box-ui-elements 20.0.0-next.2 → 20.0.0

package/es/features/unified-share-modal/flowTypes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/unified-share-modal/flowTypes.js"],"names":["React","constants","accessLevelValues","ANYONE_WITH_LINK","ANYONE_IN_COMPANY","PEOPLE_IN_ITEM","permissionLevelValues","CAN_EDIT","CAN_VIEW_DOWNLOAD","CAN_VIEW_ONLY","collaboratorGroupValues","COLLAB_GROUP_TYPE","COLLAB_USER_TYPE","COLLAB_PENDING_TYPE"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAO,KAAKC,SAAZ,MAA2B,aAA3B;AAIA;AACA,MAAMC,iBAAiB,GAAG;AACtB,GAACD,SAAS,CAACE,gBAAX,GAA8B,kBADR;AAEtB,GAACF,SAAS,CAACG,iBAAX,GAA+B,mBAFT;AAGtB,GAACH,SAAS,CAACI,cAAX,GAA4B;AAHN,CAA1B;AAOA,MAAMC,qBAAqB,GAAG;AAC1B,GAACL,SAAS,CAACM,QAAX,GAAsB,UADI;AAE1B,GAACN,SAAS,CAACO,iBAAX,GAA+B,mBAFL;AAG1B,GAACP,SAAS,CAACQ,aAAX,GAA2B;AAHD,CAA9B;AAOA,MAAMC,uBAAuB,GAAG;AAC5B,GAACT,SAAS,CAACU,iBAAX,GAA+B,mBADH;AAE5B,GAACV,SAAS,CAACW,gBAAX,GAA8B,kBAFF;AAG5B,GAACX,SAAS,CAACY,mBAAX,GAAiC;AAHL,CAAhC","sourcesContent":["// @flow\nimport * as React from 'react';\nimport * as constants from './constants';\nimport type { BoxItemPermission, ItemType } from '../../common/types/core';\nimport type { TargetingApi } from '../targeting/types';\n\n// DRY: Invert the constants so that we can construct the appropriate enum types\nconst accessLevelValues = {\n    [constants.ANYONE_WITH_LINK]: 'ANYONE_WITH_LINK',\n    [constants.ANYONE_IN_COMPANY]: 'ANYONE_IN_COMPANY',\n    [constants.PEOPLE_IN_ITEM]: 'PEOPLE_IN_ITEM',\n};\nexport type accessLevelType = $Keys<typeof accessLevelValues>;\n\nconst permissionLevelValues = {\n    [constants.CAN_EDIT]: 'CAN_EDIT',\n    [constants.CAN_VIEW_DOWNLOAD]: 'CAN_VIEW_DOWNLOAD',\n    [constants.CAN_VIEW_ONLY]: 'CAN_VIEW_ONLY',\n};\nexport type permissionLevelType = $Keys<typeof permissionLevelValues>;\n\nconst collaboratorGroupValues = {\n    [constants.COLLAB_GROUP_TYPE]: 'COLLAB_GROUP_TYPE',\n    [constants.COLLAB_USER_TYPE]: 'COLLAB_USER_TYPE',\n    [constants.COLLAB_PENDING_TYPE]: 'COLLAB_PENDING_TYPE',\n};\nexport type collaboratorGroupType = $Keys<typeof collaboratorGroupValues>;\n\nexport type allowedAccessLevelsType = {\n    peopleInThisItem?: boolean,\n    peopleInYourCompany?: boolean,\n    peopleWithTheLink?: boolean,\n};\n\nexport type accessLevelsDisabledReasonType = {\n    peopleInThisItem?:\n        | typeof constants.DISABLED_REASON_ACCESS_POLICY\n        | typeof constants.DISABLED_REASON_MALICIOUS_CONTENT\n        | null,\n    peopleInYourCompany?:\n        | typeof constants.DISABLED_REASON_ACCESS_POLICY\n        | typeof constants.DISABLED_REASON_MALICIOUS_CONTENT\n        | null,\n    peopleWithTheLink?:\n        | typeof constants.DISABLED_REASON_ACCESS_POLICY\n        | typeof constants.DISABLED_REASON_MALICIOUS_CONTENT\n        | null,\n};\n\nexport type contactType = {\n    email?: string,\n    id: string,\n    isExternalUser?: boolean,\n    name?: string,\n    text?: string,\n    type: string,\n    value?: string,\n};\n\nexport type SuggestedCollab = contactType & {\n    userScore: number,\n};\n\nexport type SuggestedCollabLookup = {\n    [id: string]: SuggestedCollab,\n};\n\nexport type inviteePermissionType = {\n    default: boolean,\n    disabled?: boolean,\n    text: string,\n    value: string,\n};\n\nexport type item = {\n    bannerPolicy?: {\n        body: string,\n        colorID?: number,\n        title?: string,\n    },\n    canUserSeeClassification: boolean,\n    classification?: string,\n    description: string,\n    extension: string,\n    grantedPermissions: {\n        itemShare: boolean,\n    },\n    hideCollaborators: boolean,\n    id: string,\n    name: string,\n    ownerEmail?: string,\n    ownerID?: string,\n    permissions?: BoxItemPermission,\n    type: ItemType,\n    typedID: string,\n};\n\nexport type emailFormTrackingType = {\n    cancelButtonProps?: Object,\n    messageProps?: Object,\n    onContactAdd?: Function,\n    onContactRemove?: Function,\n    onSendClick?: Function,\n};\n\nexport type sharedLinkTrackingType = {\n    copyButtonProps?: Object,\n    onChangeSharedLinkAccessLevel?: Function,\n    onChangeSharedLinkPermissionLevel?: Function,\n    onSharedLinkAccessMenuOpen?: Function,\n    onSharedLinkCopy?: Function,\n    onToggleLink?: Function,\n    sendSharedLinkButtonProps?: Object,\n    sharedLinkAccessMenuButtonProps?: Object,\n    sharedLinkPermissionsMenuButtonProps?: Object,\n    sharedLinkSettingsButtonProps?: Object,\n};\n\nexport type collaboratorListTrackingType = {\n    doneButtonProps?: Object,\n    emailProps?: Object,\n    manageLinkProps?: Object,\n    usernameProps?: Object,\n    viewAdditionalProps?: Object,\n};\n\nexport type trackingPropsType = {\n    collaboratorListTracking: collaboratorListTrackingType,\n    inviteCollabTracking: {\n        inviteePermissionsButtonProps?: Object,\n        onEnterInviteCollabs?: Function,\n        onInviteePermissionChange?: Function,\n    },\n    inviteCollabsEmailTracking: {\n        ...emailFormTrackingType,\n        upgradeLinkProps?: Object,\n    },\n    modalTracking: {\n        collaboratorAvatarsProps?: Object,\n        ftuxConfirmButtonProps?: Object,\n        modalProps?: Object,\n        onLoad?: Function,\n        onLoadSharedLink?: Function,\n    },\n    removeLinkConfirmModalTracking: {\n        cancelButtonProps?: Object,\n        modalProps?: Object,\n        okayButtonProps?: Object,\n        onLoad?: Function,\n    },\n    sharedLinkEmailTracking: emailFormTrackingType,\n    sharedLinkTracking: sharedLinkTrackingType,\n};\n\n// this type is a strict subset of the SharedLinkRecord data returned from the server\nexport type sharedLinkType = {\n    accessLevel: accessLevelType,\n    accessLevelsDisabledReason?: accessLevelsDisabledReasonType,\n    allowedAccessLevels: allowedAccessLevelsType,\n    canChangeAccessLevel: boolean,\n    enterpriseName: string,\n    expirationTimestamp: ?number,\n    isDownloadAllowed: boolean,\n    isDownloadSettingAvailable: boolean,\n    isEditAllowed: boolean,\n    isEditSettingAvailable: boolean,\n    isNewSharedLink: boolean,\n    isPreviewAllowed: boolean,\n    permissionLevel: permissionLevelType,\n    url: string,\n};\n\nexport type collaboratorType = {\n    collabID: number,\n    email?: string,\n    expiration?: {\n        executeAt: string,\n    },\n    hasCustomAvatar: boolean,\n    imageURL: ?string,\n    isExternalCollab?: boolean,\n    name: string,\n    type: collaboratorGroupType,\n    userID: ?number,\n};\n\nexport type collaboratorsListType = {\n    collaborators: Array<collaboratorType>,\n};\n\nexport type tooltipComponentIdentifierType =\n    | 'shared-link-access-menu'\n    | 'shared-link-copy-button'\n    | 'shared-link-settings'\n    | 'shared-link-toggle';\n\nexport type justificationCheckpointType =\n    | typeof constants.JUSTIFICATION_CHECKPOINT_COLLAB\n    | typeof constants.JUSTIFICATION_CHECKPOINT_CREATE_SHARED_LINK\n    | typeof constants.JUSTIFICATION_CHECKPOINT_DOWNLOAD\n    | typeof constants.JUSTIFICATION_CHECKPOINT_EXTERNAL_COLLAB;\n\nexport type justificationReasonType = {\n    description?: string,\n    id: string,\n    isDetailsRequired?: boolean,\n    title: string,\n};\nexport type getJustificationReasonsResponseType = {\n    classificationLabelId: string,\n    options?: Array<justificationReasonType>,\n};\n\n// Prop types used in the invite section of the Unified Share Form\ntype InviteSectionTypes = {\n    /** Message warning about restrictions regarding inviting collaborators to the item */\n    collaborationRestrictionWarning: React.Node,\n    /** Used to limit the number of contacts that can be added in the contacts field */\n    contactLimit?: number,\n    /** Handler function for when the user types into invite collaborators field to fetch contacts. */\n    getCollaboratorContacts: (query: string) => Promise<Array<contactType>>,\n    /** Shows a callout tooltip next to the names / email addresses input field explaining pre-populated recommendation */\n    recommendedSharingTooltipCalloutName: ?string,\n    /**\n     * Function to send collab invitations based on the given parameters object.\n     * This function should return a Promise.\n     */\n    sendInvites: (params: Object) => Promise<Object>,\n    /** Message indicating an error occurred while sending the invites. */\n    sendInvitesError: React.Node,\n    /** Function hoists contact data upon updates to the parent component. Only needed for suggested collabs. */\n    setUpdatedContacts?: (inviteCollabsContacts: Array<contactType>) => void,\n    /** Determine whether to show the First-time experience tooltip on load */\n    showCalloutForUser?: boolean,\n    /**\n     * Flag to show link to upgrade and get more access controls.\n     * Only applicable to non-file item types.\n     */\n    showUpgradeOptions: boolean,\n    /** Data for suggested collaborators shown at bottom of input box. UI doesn't render when this has length of 0. */\n    suggestedCollaborators?: SuggestedCollabLookup,\n};\n\n// Additional invite section types that related with information barrier, external collab\n// restrictions and business justifications.\nexport type CollabRestrictionType =\n    | typeof constants.COLLAB_RESTRICTION_TYPE_ACCESS_POLICY\n    | typeof constants.COLLAB_RESTRICTION_TYPE_INFORMATION_BARRIER;\n\ntype CollabRestrictionsTypes = {\n    /** The type of restriction that applies to restrictedCollabEmails */\n    collabRestrictionType?: CollabRestrictionType,\n    /** Function that fetches the array of justification reason options to display on the justification select field */\n    getJustificationReasons?: (\n        itemTypedID: string,\n        checkpoint: justificationCheckpointType,\n    ) => Promise<getJustificationReasonsResponseType>,\n    /** Determines whether or not a business justification can be provided to bypass external collab restrictions */\n    isCollabRestrictionJustificationAllowed?: boolean,\n    /** Function that is called when all restricted collaborators are removed from the email form */\n    onRemoveAllRestrictedCollabs?: () => void,\n    /** An array of all the collab email addresses that have been determined to be restricted by a security policy. */\n    restrictedCollabEmails: Array<string>,\n    /** An array of all the group ids that have been determined to be restricted by a security policy. */\n    restrictedGroups: Array<number>,\n};\n\n// Prop types used in the shared link section of the Unified Share Form\n// (Note: while there is an overlap between these types and the props passed to the Shared Link Section component,\n// they are different. See the render() function of the Unified Share Form for details.)\ntype SharedLinkSectionTypes = {\n    /** Handler function that changes shared link access level */\n    changeSharedLinkAccessLevel: (newAccessLevel: accessLevelType) => Promise<{ accessLevel: accessLevelType }>,\n    /** Handler function that changes shared link permission level */\n    changeSharedLinkPermissionLevel: (\n        newPermissionLevel: permissionLevelType,\n    ) => Promise<{ permissionLevel: permissionLevelType }>,\n    /** Whether the form should create a shared link on load */\n    createSharedLinkOnLoad?: boolean,\n    /** Handler function that adds the shared link */\n    onAddLink: () => void,\n    /** Handler for when there is an error copying to clipboard */\n    onCopyError?: () => void,\n    /** Handler for when we initiate copying from to clipboard */\n    onCopyInit?: () => void,\n    /** Handler for when successfully copying to clipboard */\n    onCopySuccess?: () => void,\n    /** Handler function that gets called whenever the user dismisses a tooltip on the given component identifier */\n    onDismissTooltip?: (componentIdentifier: tooltipComponentIdentifierType) => void,\n    /** Handler function for clicks on the settings button. If not provided, the settings button won't be rendered. */\n    onSettingsClick?: Function,\n    /** Shared link data */\n    sharedLink: sharedLinkType,\n    /** Shows a callout tooltip next to settings button with info about what can be customized */\n    showSharedLinkSettingsCallout?: boolean,\n    /** Mapping of components to the content that should be rendered in their tooltips */\n    tooltips?: { [componentIdentifier: tooltipComponentIdentifierType]: React.Node },\n};\n\n// Prop types used in the collaborator avatars section of the Unified Share Form\ntype CollaboratorAvatarsTypes = {\n    /** List of existing collaborators */\n    collaboratorsList?: collaboratorsListType,\n    /** User ID of currently logged in user */\n    currentUserID: string,\n};\n\ntype EmailFormTypes = {\n    /** Function to retrieve the URL for an avatar, given contact details */\n    getContactAvatarUrl?: (contact: contactType) => string,\n    /** Handler function for when the user types into email shared link field to fetch contacts. */\n    getSharedLinkContacts: (query: string) => Promise<Array<contactType>>,\n    /**\n     * Function to send shared link email based on the given parameters object.\n     * This function should return a Promise.\n     */\n    sendSharedLink: (params: Object) => Promise<Object>,\n    /** Message indicating an error occurred while sending the shared link. */\n    sendSharedLinkError: React.Node,\n};\n\ntype AdvancedContentInsightsUSProps = {\n    isAdvancedContentInsightsChecked?: boolean,\n    /** Handler function that gets called whenever the Advanced Content Insights toggle changes */\n    onAdvancedContentInsightsToggle?: Function,\n};\n\nexport type USMConfig = {\n    /** Whether the \"Email Shared Link\" button and form should be rendered in the USM/USF */\n    showEmailSharedLinkForm: boolean,\n    /* Whether the message section of the invite collaborator page should be rendered in the USM/USF */\n    showInviteCollaboratorMessageSection: boolean,\n};\n\n// Prop types shared by both the Unified Share Modal and the Unified Share Form\ntype BaseUnifiedShareProps = CollaboratorAvatarsTypes &\n    AdvancedContentInsightsUSProps &\n    EmailFormTypes &\n    CollabRestrictionsTypes &\n    InviteSectionTypes &\n    SharedLinkSectionTypes & {\n        /** Inline message */\n        allShareRestrictionWarning?: React.Node,\n        /** Flag to determine whether to enable invite collaborators section */\n        canInvite: boolean,\n        /** Configuration object for hiding parts of the USM */\n        config?: USMConfig,\n        /** Whether the full USM should be rendered */\n        displayInModal?: boolean,\n        /** Whether the form should focus the shared link after the URL is resolved */\n        focusSharedLinkOnLoad?: boolean,\n        /** Handler function that gets contacts by a list of emails */\n        getContactsByEmail?: ({ emails: Array<string>, itemTypedID?: string }) => Promise<Object>,\n        /** Handler function for getting intial data for form */\n        getInitialData: Function,\n        /** An array of initially selected contacts. If none are initially selected, an empty array. */\n        initiallySelectedContacts: Array<contactType>,\n        /** Intl object */\n        intl: any,\n        /** An array of invitee permissions */\n        inviteePermissions: Array<inviteePermissionType>,\n        /** Item data */\n        item: item,\n        /** Shows a callout tooltip next to the names / email addresses input field encouraging users to fill out coworkers contact info */\n        showEnterEmailsCallout?: boolean,\n        /** Whether or not a request is in progress */\n        submitting: boolean,\n        /** Object with props and handlers for tracking interactions */\n        trackingProps: trackingPropsType,\n    };\n\n// Prop types for the Unified Share Modal\nexport type USMProps = BaseUnifiedShareProps & {\n    /** Function for closing the Remove Link Confirm Modal */\n    closeConfirmModal: () => void,\n    /** Whether initial data for the USM has already been received */\n    initialDataReceived: boolean,\n    /** Whether the allow edit shared link for file FF is enabled */\n    isAllowEditSharedLinkForFileEnabled?: boolean,\n    /** Whether the USM is open */\n    isOpen?: boolean,\n    /** Handler function that removes the shared link, used in the Remove Link Confirm Modal */\n    onRemoveLink: () => void,\n    /** Handler function for when the USM is closed */\n    onRequestClose?: Function,\n    /** Whether the FTUX tag should be rendered for the Can Edit option */\n    sharedLinkEditTagTargetingApi?: TargetingApi,\n    /** Whether the FTUX tooltip should be rendered for Editable Shared Links  */\n    sharedLinkEditTooltipTargetingApi?: TargetingApi,\n};\n\n// Prop types for the Unified Share Form, passed from the Unified Share Modal\nexport type USFProps = BaseUnifiedShareProps & {\n    /** Function for closing the FTUX tooltip */\n    handleFtuxCloseClick: () => void,\n    /** Whether the allow edit shared link for file FF is enabled */\n    isAllowEditSharedLinkForFileEnabled: boolean,\n    /** Whether the data for the USM/USF is being fetched */\n    isFetching: boolean,\n    /** Function for opening the Remove Link Confirm Modal */\n    openConfirmModal: () => void,\n    /** Function for opening the Upgrade Plan Modal */\n    openUpgradePlanModal: () => void,\n    /** Whether the FTUX tag should be rendered for the Can Edit option */\n    sharedLinkEditTagTargetingApi?: TargetingApi,\n    /** Whether the FTUX tooltip should be rendered for Editable Shared Links  */\n    sharedLinkEditTooltipTargetingApi?: TargetingApi,\n    /** Whether the shared link has loaded */\n    sharedLinkLoaded: boolean,\n    /** Whether the FTUX tooltip should be rendered */\n    shouldRenderFTUXTooltip: boolean,\n    /** Whether the upgrade inline notice should be rendered */\n    showUpgradeInlineNotice?: boolean,\n};\n\nexport type InviteCollaboratorsRequest = {\n    classificationLabelId?: string,\n    emailMessage: string,\n    emails: string,\n    groupIDs: string,\n    justificationReason?: justificationReasonType,\n    numOfInviteeGroups: number,\n    numsOfInvitees: number,\n    permission: string,\n};\n"],"file":"flowTypes.js"}
+{"version":3,"sources":["../../../src/features/unified-share-modal/flowTypes.js"],"names":["React","constants","accessLevelValues","ANYONE_WITH_LINK","ANYONE_IN_COMPANY","PEOPLE_IN_ITEM","permissionLevelValues","CAN_EDIT","CAN_VIEW_DOWNLOAD","CAN_VIEW_ONLY","collaboratorGroupValues","COLLAB_GROUP_TYPE","COLLAB_USER_TYPE","COLLAB_PENDING_TYPE"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAO,KAAKC,SAAZ,MAA2B,aAA3B;AAIA;AACA,MAAMC,iBAAiB,GAAG;AACtB,GAACD,SAAS,CAACE,gBAAX,GAA8B,kBADR;AAEtB,GAACF,SAAS,CAACG,iBAAX,GAA+B,mBAFT;AAGtB,GAACH,SAAS,CAACI,cAAX,GAA4B;AAHN,CAA1B;AAOA,MAAMC,qBAAqB,GAAG;AAC1B,GAACL,SAAS,CAACM,QAAX,GAAsB,UADI;AAE1B,GAACN,SAAS,CAACO,iBAAX,GAA+B,mBAFL;AAG1B,GAACP,SAAS,CAACQ,aAAX,GAA2B;AAHD,CAA9B;AAOA,MAAMC,uBAAuB,GAAG;AAC5B,GAACT,SAAS,CAACU,iBAAX,GAA+B,mBADH;AAE5B,GAACV,SAAS,CAACW,gBAAX,GAA8B,kBAFF;AAG5B,GAACX,SAAS,CAACY,mBAAX,GAAiC;AAHL,CAAhC","sourcesContent":["// @flow\nimport * as React from 'react';\nimport * as constants from './constants';\nimport type { BoxItemPermission, ItemType } from '../../common/types/core';\nimport type { TargetingApi } from '../targeting/types';\n\n// DRY: Invert the constants so that we can construct the appropriate enum types\nconst accessLevelValues = {\n    [constants.ANYONE_WITH_LINK]: 'ANYONE_WITH_LINK',\n    [constants.ANYONE_IN_COMPANY]: 'ANYONE_IN_COMPANY',\n    [constants.PEOPLE_IN_ITEM]: 'PEOPLE_IN_ITEM',\n};\nexport type accessLevelType = $Keys<typeof accessLevelValues>;\n\nconst permissionLevelValues = {\n    [constants.CAN_EDIT]: 'CAN_EDIT',\n    [constants.CAN_VIEW_DOWNLOAD]: 'CAN_VIEW_DOWNLOAD',\n    [constants.CAN_VIEW_ONLY]: 'CAN_VIEW_ONLY',\n};\nexport type permissionLevelType = $Keys<typeof permissionLevelValues>;\n\nconst collaboratorGroupValues = {\n    [constants.COLLAB_GROUP_TYPE]: 'COLLAB_GROUP_TYPE',\n    [constants.COLLAB_USER_TYPE]: 'COLLAB_USER_TYPE',\n    [constants.COLLAB_PENDING_TYPE]: 'COLLAB_PENDING_TYPE',\n};\nexport type collaboratorGroupType = $Keys<typeof collaboratorGroupValues>;\n\nexport type allowedAccessLevelsType = {\n    peopleInThisItem?: boolean,\n    peopleInYourCompany?: boolean,\n    peopleWithTheLink?: boolean,\n};\n\nexport type accessLevelsDisabledReasonType = {\n    peopleInThisItem?:\n        | typeof constants.DISABLED_REASON_ACCESS_POLICY\n        | typeof constants.DISABLED_REASON_MALICIOUS_CONTENT\n        | null,\n    peopleInYourCompany?:\n        | typeof constants.DISABLED_REASON_ACCESS_POLICY\n        | typeof constants.DISABLED_REASON_MALICIOUS_CONTENT\n        | null,\n    peopleWithTheLink?:\n        | typeof constants.DISABLED_REASON_ACCESS_POLICY\n        | typeof constants.DISABLED_REASON_MALICIOUS_CONTENT\n        | null,\n};\n\nexport type contactType = {\n    email?: string,\n    id: string,\n    isExternalUser?: boolean,\n    name?: string,\n    text?: string,\n    type: string,\n    value?: string,\n};\n\nexport type SuggestedCollab = contactType & {\n    userScore: number,\n};\n\nexport type SuggestedCollabLookup = {\n    [id: string]: SuggestedCollab,\n};\n\nexport type inviteePermissionType = {\n    default: boolean,\n    disabled?: boolean,\n    text: string,\n    value: string,\n};\n\nexport type item = {\n    bannerPolicy?: {\n        body: string,\n        colorID?: number,\n        title?: string,\n    },\n    canUserSeeClassification: boolean,\n    classification?: string,\n    description: string,\n    extension: string,\n    grantedPermissions: {\n        itemShare: boolean,\n    },\n    hideCollaborators: boolean,\n    id: string,\n    name: string,\n    ownerEmail?: string,\n    ownerID?: string,\n    permissions?: BoxItemPermission,\n    type: ItemType,\n    typedID: string,\n};\n\nexport type emailFormTrackingType = {\n    cancelButtonProps?: Object,\n    messageProps?: Object,\n    onContactAdd?: Function,\n    onContactRemove?: Function,\n    onSendClick?: Function,\n};\n\nexport type sharedLinkTrackingType = {\n    copyButtonProps?: Object,\n    onChangeSharedLinkAccessLevel?: Function,\n    onChangeSharedLinkPermissionLevel?: Function,\n    onSharedLinkAccessMenuOpen?: Function,\n    onSharedLinkCopy?: Function,\n    onToggleLink?: Function,\n    sendSharedLinkButtonProps?: Object,\n    sharedLinkAccessMenuButtonProps?: Object,\n    sharedLinkPermissionsMenuButtonProps?: Object,\n    sharedLinkSettingsButtonProps?: Object,\n};\n\nexport type collaboratorListTrackingType = {\n    doneButtonProps?: Object,\n    emailProps?: Object,\n    manageLinkProps?: Object,\n    usernameProps?: Object,\n    viewAdditionalProps?: Object,\n};\n\nexport type trackingPropsType = {\n    collaboratorListTracking: collaboratorListTrackingType,\n    inviteCollabTracking: {\n        inviteePermissionsButtonProps?: Object,\n        onEnterInviteCollabs?: Function,\n        onInviteePermissionChange?: Function,\n    },\n    inviteCollabsEmailTracking: {\n        ...emailFormTrackingType,\n        upgradeLinkProps?: Object,\n    },\n    modalTracking: {\n        collaboratorAvatarsProps?: Object,\n        ftuxConfirmButtonProps?: Object,\n        modalProps?: Object,\n        onLoad?: Function,\n        onLoadSharedLink?: Function,\n    },\n    removeLinkConfirmModalTracking: {\n        cancelButtonProps?: Object,\n        modalProps?: Object,\n        okayButtonProps?: Object,\n        onLoad?: Function,\n    },\n    sharedLinkEmailTracking: emailFormTrackingType,\n    sharedLinkTracking: sharedLinkTrackingType,\n};\n\n// this type is a strict subset of the SharedLinkRecord data returned from the server\nexport type sharedLinkType = {\n    accessLevel: accessLevelType,\n    accessLevelsDisabledReason?: accessLevelsDisabledReasonType,\n    allowedAccessLevels: allowedAccessLevelsType,\n    canChangeAccessLevel: boolean,\n    enterpriseName: string,\n    expirationTimestamp: ?number,\n    isDownloadAllowed: boolean,\n    isDownloadSettingAvailable: boolean,\n    isEditAllowed: boolean,\n    isEditSettingAvailable: boolean,\n    isNewSharedLink: boolean,\n    isPreviewAllowed: boolean,\n    permissionLevel: permissionLevelType,\n    url: string,\n};\n\nexport type collaboratorType = {\n    collabID: number,\n    email?: string,\n    expiration?: {\n        executeAt: string,\n    },\n    hasCustomAvatar: boolean,\n    imageURL: ?string,\n    isExternalCollab?: boolean,\n    name: string,\n    type: collaboratorGroupType,\n    userID: ?number,\n};\n\nexport type collaboratorsListType = {\n    collaborators: Array<collaboratorType>,\n};\n\nexport type tooltipComponentIdentifierType =\n    | 'shared-link-access-menu'\n    | 'shared-link-copy-button'\n    | 'shared-link-settings'\n    | 'shared-link-toggle';\n\nexport type justificationCheckpointType =\n    | typeof constants.JUSTIFICATION_CHECKPOINT_COLLAB\n    | typeof constants.JUSTIFICATION_CHECKPOINT_CREATE_SHARED_LINK\n    | typeof constants.JUSTIFICATION_CHECKPOINT_DOWNLOAD\n    | typeof constants.JUSTIFICATION_CHECKPOINT_EXTERNAL_COLLAB;\n\nexport type justificationReasonType = {\n    description?: string,\n    id: string,\n    isDetailsRequired?: boolean,\n    title: string,\n};\nexport type getJustificationReasonsResponseType = {\n    classificationLabelId: string,\n    options?: Array<justificationReasonType>,\n};\n\n// Prop types used in the invite section of the Unified Share Form\ntype InviteSectionTypes = {\n    /** Message warning about restrictions regarding inviting collaborators to the item */\n    collaborationRestrictionWarning: React.Node,\n    /** Used to limit the number of contacts that can be added in the contacts field */\n    contactLimit?: number,\n    /** Handler function for when the user types into invite collaborators field to fetch contacts. */\n    getCollaboratorContacts: (query: string) => Promise<Array<contactType>>,\n    /** Shows a callout tooltip next to the names / email addresses input field explaining pre-populated recommendation */\n    recommendedSharingTooltipCalloutName: ?string,\n    /**\n     * Function to send collab invitations based on the given parameters object.\n     * This function should return a Promise.\n     */\n    sendInvites: (params: Object) => Promise<Object>,\n    /** Message indicating an error occurred while sending the invites. */\n    sendInvitesError: React.Node,\n    /** Function hoists contact data upon updates to the parent component. Only needed for suggested collabs. */\n    setUpdatedContacts?: (inviteCollabsContacts: Array<contactType>) => void,\n    /** Determine whether to show the First-time experience tooltip on load */\n    showCalloutForUser?: boolean,\n    /**\n     * Flag to show link to upgrade and get more access controls.\n     * Only applicable to non-file item types.\n     */\n    showUpgradeOptions: boolean,\n    /** Data for suggested collaborators shown at bottom of input box. UI doesn't render when this has length of 0. */\n    suggestedCollaborators?: SuggestedCollabLookup,\n};\n\n// Additional invite section types that related with information barrier, external collab\n// restrictions and business justifications.\nexport type CollabRestrictionType =\n    | typeof constants.COLLAB_RESTRICTION_TYPE_ACCESS_POLICY\n    | typeof constants.COLLAB_RESTRICTION_TYPE_INFORMATION_BARRIER;\n\ntype CollabRestrictionsTypes = {\n    /** The type of restriction that applies to restrictedCollabEmails */\n    collabRestrictionType?: CollabRestrictionType,\n    /** Function that fetches the array of justification reason options to display on the justification select field */\n    getJustificationReasons?: (\n        itemTypedID: string,\n        checkpoint: justificationCheckpointType,\n    ) => Promise<getJustificationReasonsResponseType>,\n    /** Determines whether or not a business justification can be provided to bypass external collab restrictions */\n    isCollabRestrictionJustificationAllowed?: boolean,\n    /** Function that is called when all restricted collaborators are removed from the email form */\n    onRemoveAllRestrictedCollabs?: () => void,\n    /** An array of all the collab email addresses that have been determined to be restricted by a security policy. */\n    restrictedCollabEmails: Array<string>,\n    /** An array of all the group ids that have been determined to be restricted by a security policy. */\n    restrictedGroups: Array<number>,\n};\n\n// Prop types used in the shared link section of the Unified Share Form\n// (Note: while there is an overlap between these types and the props passed to the Shared Link Section component,\n// they are different. See the render() function of the Unified Share Form for details.)\ntype SharedLinkSectionTypes = {\n    /** Handler function that changes shared link access level */\n    changeSharedLinkAccessLevel: (newAccessLevel: accessLevelType) => Promise<{ accessLevel: accessLevelType }>,\n    /** Handler function that changes shared link permission level */\n    changeSharedLinkPermissionLevel: (\n        newPermissionLevel: permissionLevelType,\n    ) => Promise<{ permissionLevel: permissionLevelType }>,\n    /** Whether the form should create a shared link on load */\n    createSharedLinkOnLoad?: boolean,\n    /** Handler function that adds the shared link */\n    onAddLink: () => void,\n    /** Handler for when there is an error copying to clipboard */\n    onCopyError?: () => void,\n    /** Handler for when we initiate copying from to clipboard */\n    onCopyInit?: () => void,\n    /** Handler for when successfully copying to clipboard */\n    onCopySuccess?: () => void,\n    /** Handler function that gets called whenever the user dismisses a tooltip on the given component identifier */\n    onDismissTooltip?: (componentIdentifier: tooltipComponentIdentifierType) => void,\n    /** Handler function for clicks on the settings button. If not provided, the settings button won't be rendered. */\n    onSettingsClick?: Function,\n    /** Shared link data */\n    sharedLink: sharedLinkType,\n    /** Shows a callout tooltip next to settings button with info about what can be customized */\n    showSharedLinkSettingsCallout?: boolean,\n    /** Mapping of components to the content that should be rendered in their tooltips */\n    tooltips?: { [componentIdentifier: tooltipComponentIdentifierType]: React.Node },\n};\n\n// Prop types used in the collaborator avatars section of the Unified Share Form\ntype CollaboratorAvatarsTypes = {\n    /** List of existing collaborators */\n    collaboratorsList?: collaboratorsListType,\n    /** User ID of currently logged in user */\n    currentUserID: string,\n};\n\ntype EmailFormTypes = {\n    /** Function to retrieve the URL for an avatar, given contact details */\n    getContactAvatarUrl?: (contact: contactType) => string,\n    /** Handler function for when the user types into email shared link field to fetch contacts. */\n    getSharedLinkContacts: (query: string) => Promise<Array<contactType>>,\n    /**\n     * Function to send shared link email based on the given parameters object.\n     * This function should return a Promise.\n     */\n    sendSharedLink: (params: Object) => Promise<Object>,\n    /** Message indicating an error occurred while sending the shared link. */\n    sendSharedLinkError: React.Node,\n};\n\ntype AdvancedContentInsightsUSProps = {\n    isAdvancedContentInsightsChecked?: boolean,\n    /** Handler function that gets called whenever the Advanced Content Insights toggle changes */\n    onAdvancedContentInsightsToggle?: Function,\n};\n\nexport type USMConfig = {\n    /** Whether the \"Email Shared Link\" button and form should be rendered in the USM/USF */\n    showEmailSharedLinkForm: boolean,\n    /* Whether the message section of the invite collaborator page should be rendered in the USM/USF */\n    showInviteCollaboratorMessageSection: boolean,\n};\n\n// Prop types shared by both the Unified Share Modal and the Unified Share Form\ntype BaseUnifiedShareProps = CollaboratorAvatarsTypes &\n    AdvancedContentInsightsUSProps &\n    EmailFormTypes &\n    CollabRestrictionsTypes &\n    InviteSectionTypes &\n    SharedLinkSectionTypes & {\n        /** Inline message */\n        allShareRestrictionWarning?: React.Node,\n        /** Flag to determine whether to enable invite collaborators section */\n        canInvite: boolean,\n        /** Configuration object for hiding parts of the USM */\n        config?: USMConfig,\n        /** Whether the full USM should be rendered */\n        displayInModal?: boolean,\n        /** Whether the form should focus the shared link after the URL is resolved */\n        focusSharedLinkOnLoad?: boolean,\n        /** Handler function that gets contacts by a list of emails */\n        getContactsByEmail?: ({ emails: Array<string>, itemTypedID?: string }) => Promise<Object>,\n        /** Handler function for getting intial data for form */\n        getInitialData: Function,\n        /** An array of initially selected contacts. If none are initially selected, an empty array. */\n        initiallySelectedContacts: Array<contactType>,\n        /** Intl object */\n        intl: any,\n        /** An array of invitee permissions */\n        inviteePermissions: Array<inviteePermissionType>,\n        /** Item data */\n        item: item,\n        /** Shows a callout tooltip next to the names / email addresses input field encouraging users to fill out coworkers contact info */\n        showEnterEmailsCallout?: boolean,\n        /** Whether or not a request is in progress */\n        submitting: boolean,\n        /** Object with props and handlers for tracking interactions */\n        trackingProps: trackingPropsType,\n    };\n\n// Prop types for the Unified Share Modal\nexport type USMProps = BaseUnifiedShareProps & {\n    /** Function for closing the Remove Link Confirm Modal */\n    closeConfirmModal: () => void,\n    /** Whether initial data for the USM has already been received */\n    initialDataReceived: boolean,\n    /** Whether the allow edit shared link for file FF is enabled */\n    isAllowEditSharedLinkForFileEnabled?: boolean,\n    /** Whether the USM is open */\n    isOpen?: boolean,\n    /** Handler function that removes the shared link, used in the Remove Link Confirm Modal */\n    onRemoveLink: () => void,\n    /** Handler function for when the USM is closed */\n    onRequestClose?: Function,\n    /** Whether the FTUX tag should be rendered for the Can Edit option */\n    sharedLinkEditTagTargetingApi?: TargetingApi,\n    /** Whether the FTUX tooltip should be rendered for Editable Shared Links  */\n    sharedLinkEditTooltipTargetingApi?: TargetingApi,\n};\n\n// Prop types for the Unified Share Form, passed from the Unified Share Modal\nexport type USFProps = BaseUnifiedShareProps & {\n    /** Function for closing the FTUX tooltip */\n    handleFtuxCloseClick: () => void,\n    /** Whether the allow edit shared link for file FF is enabled */\n    isAllowEditSharedLinkForFileEnabled: boolean,\n    /** Whether the data for the USM/USF is being fetched */\n    isFetching: boolean,\n    /** Function for opening the Remove Link Confirm Modal */\n    openConfirmModal: () => void,\n    /** Function for opening the Upgrade Plan Modal */\n    openUpgradePlanModal: () => void,\n    /** Whether the FTUX tag should be rendered for the Can Edit option */\n    sharedLinkEditTagTargetingApi?: TargetingApi,\n    /** Whether the FTUX tooltip should be rendered for Editable Shared Links  */\n    sharedLinkEditTooltipTargetingApi?: TargetingApi,\n    /** Whether the shared link has loaded */\n    sharedLinkLoaded: boolean,\n    /** Whether the FTUX tooltip should be rendered */\n    shouldRenderFTUXTooltip: boolean,\n    /** Whether the upgrade inline notice should be rendered\n     * NOTE (wyehdego): Remove this prop once we refactor legacy inline notice with upsellInlineNotice\n     */\n    showUpgradeInlineNotice?: boolean,\n    /** Inline Notice component to render based on user */\n    upsellInlineNotice?: React.Node | null,\n};\n\nexport type InviteCollaboratorsRequest = {\n    classificationLabelId?: string,\n    emailMessage: string,\n    emails: string,\n    groupIDs: string,\n    justificationReason?: justificationReasonType,\n    numOfInviteeGroups: number,\n    numsOfInvitees: number,\n    permission: string,\n};\n"],"file":"flowTypes.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "20.0.0-next.2",
+    "version": "20.0.0",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -60,7 +60,7 @@
         "copy:flow": "flow-copy-source --ignore \"**/__tests__/**\" --ignore \"**/__mocks__/**\" --ignore \"**/*.ts\" ./src ./es && copyfiles './src/**/*.js.flow' es --up 1",
         "copy:styles": "copyfiles './src/**/*.scss' es --up 1",
         "cy:open": "yarn cy:wait; yarn cypress open",
-        "cy:run": "yarn cy:wait; yarn cypress run --spec \"test/integration/**/*.test.js\"",
+        "cy:run": "yarn cy:wait; yarn cypress run --spec \"test/integration/**/*.cy.js\"",
         "cy:wait": "wait-on http-get://127.0.0.1:6060/#",
         "lint": "npm-run-all lint:*",
         "lint:js": "eslint --max-warnings=0 .",
@@ -242,7 +242,7 @@
         "cosmiconfig": "^6.0.0",
         "css-loader": "^3.4.2",
         "cssnano": "^4.1.10",
-        "cypress": "3.8.2",
+        "cypress": "^13.7.3",
         "deepmerge": "^4.2.2",
         "draft-js": "^0.10.1",
         "enzyme": "^3.11.0",
@@ -251,7 +251,7 @@
         "eslint-config-airbnb": "^18.0.1",
         "eslint-config-prettier": "^6.9.0",
         "eslint-plugin-babel": "^5.3.0",
-        "eslint-plugin-cypress": "^2.8.1",
+        "eslint-plugin-cypress": "^2.15.1",
         "eslint-plugin-flowtype": "^4.6.0",
         "eslint-plugin-formatjs": "^1.5.11",
         "eslint-plugin-import": "^2.19.1",
@@ -378,10 +378,10 @@
         "mousetrap": "^1.6.3",
         "pikaday": "^1.8.0",
         "query-string": "5.1.1",
-        "react": "^17.0.1 || 18",
+        "react": "^17.0.1",
         "react-animate-height": "^2.0.8",
         "react-beautiful-dnd": "^13.1.1",
-        "react-dom": "^17.0.1 || 18",
+        "react-dom": "^17.0.1",
         "react-draggable": "^3.3.0",
         "react-immutable-proptypes": "^2.1.0",
         "react-intl": ">=2.9.0",
@@ -392,7 +392,7 @@
         "react-responsive": "8.2.0",
         "react-router-dom": "^5.0.0",
         "react-scrollbars-custom": "^4.0.21",
-        "react-tether": "1.0.5",
+        "react-tether": "^1.0.0",
         "react-textarea-autosize": "^8.5.3",
         "regenerator-runtime": "^0.13.2",
         "sanitize-html": "1.21.1",

package/src/constants.js

@@ -179,7 +179,7 @@ export const DELIMITER_SLASH: 'slash' = 'slash';
 export const DELIMITER_CARET: 'caret' = 'caret';
 
 /* ---------------------- Defaults -------------------------- */
-export const DEFAULT_PREVIEW_VERSION = '2.95.0';
+export const DEFAULT_PREVIEW_VERSION = '2.106.0';
 export const DEFAULT_LOCALE = 'en-US';
 export const DEFAULT_PATH_STATIC = 'platform/elements';
 export const DEFAULT_PATH_STATIC_PREVIEW = 'platform/preview';

package/src/elements/README.md

@@ -4,8 +4,43 @@ The Box UI Elements are designed to be agnostic of the authentication type. They
 _Note: When you are required to pass an access token to a Box Element Component, keep in mind that you can pass the access token as a string, or as a function. If you pass a function, it should return a string. Whenever the Box Element Component needs to make an API call to Box, it will use the accessToken you supplied, or invoke the access token function to get the access token._
 
 ## Internationalization (i18n)
-The UI Elements use [react-intl](https://github.com/formatjs/react-intl) for internationalization. In order for the UI Elements to render properly, they need to be wrapped in an i18n context via the [IntlProvider](https://github.com/formatjs/react-intl/blob/master/docs/Getting-Started.md#creating-an-i18n-context) and given a locale and translated messages to use. Each of the UI Element components optionally take in a `language` property and a `messages` property which is then delegated to our internal [IntlProvider](src/components/Internationalize.js). If either of these properties are not passed in, we do not use our internal `IntlProvider` and it is assumed that the parent react app (the react app that is importing in the UI Elements) has its own `IntlProvider`.
+The UI Elements use [react-intl](https://formatjs.io/docs/react-intl/) for internationalization. In order for the UI Elements to render properly, they need to be wrapped in an i18n context via the [IntlProvider](https://github.com/formatjs/formatjs/blob/main/website/docs/react-intl/components.md#intlprovider) and given a locale and translated messages to use. Each of the UI Element components optionally take in a `language` property and a `messages` property which is then delegated to our internal [IntlProvider](src/components/Internationalize.js). If either of these properties are not passed in, we do not use our internal `IntlProvider` and it is assumed that the parent react app (the react app that is importing in the UI Elements) has its own `IntlProvider`.
 
 The `language` property is a string that can be one of `en-AU`, `en-CA`, `en-GB`, `en-US`, `bn-IN`, `da-DK`, `de-DE`, `es-419`, `es-ES`, `fi-FI`, `fr-CA`, `fr-FR`, `hi-IN`, `it-IT`, `ja-JP`, `ko-KR`, `nb-NO`, `nl-NL`, `pl-PL`, `pt-BR`, `ru-RU`, `sv-SE`, `tr-TR`, `zh-CN`, `zh-TW`.
 
-The `messages` property is a map of message keys and translated strings. All the messages that the UI elements use can be found under the [i18n](i18n) folder. We distribute them as JS modules within the `box-ui-elements` npm package and they can be imported like any other module - `import box-ui-elements/i18n/[LANGUAGE FROM ABOVE]`. The code examples for each of the UI Elements assume `en-US` and show how the US english messages are imported in.
+The `messages` property is a map of message keys and translated strings. All the messages that the UI elements use can be found under the [i18n](https://github.com/box/box-ui-elements/tree/master/i18n) folder. We distribute them as JS modules within the `box-ui-elements` npm package and they can be imported like any other module - `import box-ui-elements/i18n/[LANGUAGE FROM ABOVE]`. The code examples for each of the UI Elements assume `en-US` and show how the US english messages are imported in.
+
+If you are using the CDNs, the i18n messages are included in the bundle.
+
+Example of using the `language` and `messages` properties:
+```jsx
+import messages from 'box-ui-elements/i18n/ja-JP';
+
+<ContentExplorer language="ja-JP" messages={messages} {...PROPS} />
+```
+
+_ContentExplorer will show in Japanese._
+
+Example `IntlProvider` with multiple elements
+```jsx
+import messages from 'box-ui-elements/i18n/ja-JP';
+
+<IntlProvider locale="ja-JP" messages={messages}>
+    <ContentExplorer {...PROPS} />
+    <ContentPicker {...PROPS} />
+</IntlProvider>
+```
+
+_Both ContentExplorer and ContentPicker will show in Japanese._
+
+Example of using different `language` and `messages` properties:
+
+```jsx
+import jaMessages from 'box-ui-elements/i18n/ja-JP';
+import deMessages from 'box-ui-elements/i18n/de-DE';
+
+<ContentExplorer language="ja-JP" messages={jaMessages} {...PROPS} />
+<ContentPicker language="de-DE" messages={deMessages} {...PROPS} />
+```
+
+_ContentExplorer will show in Japanese and ContentPicker will show in German._

package/src/features/shared-link-settings-modal/ExpirationSection.js

@@ -8,7 +8,7 @@ import Fieldset from '../../components/fieldset';
 
 import messages from './messages';
 
-const displayFormat = {
+export const defaultDisplayFormat = {
     weekday: 'short',
     year: 'numeric',
     month: 'short',
@@ -18,6 +18,7 @@ const displayFormat = {
 const ExpirationSection = ({
     canChangeExpiration,
     dateFormat,
+    dateDisplayFormat = defaultDisplayFormat,
     error,
     expirationCheckboxProps = {},
     expirationDate,
@@ -31,7 +32,7 @@ const ExpirationSection = ({
         <div>
             <DatePicker
                 dateFormat={dateFormat}
-                displayFormat={displayFormat}
+                displayFormat={dateDisplayFormat}
                 error={error}
                 hideLabel
                 inputProps={expirationInputProps}
@@ -65,6 +66,7 @@ const ExpirationSection = ({
 
 ExpirationSection.propTypes = {
     canChangeExpiration: PropTypes.bool.isRequired,
+    dateDisplayFormat: PropTypes.object,
     /** The format of the date value for form submit */
     dateFormat: PropTypes.string,
     error: PropTypes.string,

package/src/features/shared-link-settings-modal/SharedLinkSettingsModal.js

@@ -49,6 +49,8 @@ function getAccessNoticeMessageId(accessLevel, canDownload) {
 
 class SharedLinkSettingsModal extends Component {
     static propTypes = {
+        /* Pass dateDisplayFormat to define INTL timezone for formatting date for utc format */
+        dateDisplayFormat: PropTypes.object,
         /** The format of the expiration date value for form submit */
         dateFormat: PropTypes.string,
         hideVanityNameSection: PropTypes.bool,
@@ -291,12 +293,19 @@ class SharedLinkSettingsModal extends Component {
     }
 
     renderExpirationSection() {
-        const { canChangeExpiration, dateFormat, expirationCheckboxProps, expirationInputProps } = this.props;
+        const {
+            canChangeExpiration,
+            dateDisplayFormat,
+            dateFormat,
+            expirationCheckboxProps,
+            expirationInputProps,
+        } = this.props;
         const { expirationDate, isExpirationEnabled, expirationError } = this.state;
 
         return (
             <ExpirationSection
                 canChangeExpiration={canChangeExpiration}
+                dateDisplayFormat={dateDisplayFormat}
                 dateFormat={dateFormat}
                 error={expirationError}
                 expirationCheckboxProps={expirationCheckboxProps}

package/src/features/shared-link-settings-modal/__tests__/ExpirationSection.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import sinon from 'sinon';
 
-import ExpirationSection from '../ExpirationSection';
+import ExpirationSection, { defaultDisplayFormat } from '../ExpirationSection';
 
 const sandbox = sinon.sandbox.create();
 
@@ -12,6 +12,13 @@ describe('features/shared-link-settings-modal/ExpirationSection', () => {
     const onCheckboxChange = sandbox.stub();
     const onExpirationDateChange = sandbox.stub();
 
+    const dateDisplayFormat = {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+        timeZone: 'Europe/Warsaw',
+    };
+
     const getWrapper = (props = {}) =>
         shallow(
             <ExpirationSection
@@ -104,5 +111,19 @@ describe('features/shared-link-settings-modal/ExpirationSection', () => {
 
             expect(wrapper.prop('dateFormat')).toEqual(dateFormat);
         });
+
+        test('should use default displayFormat in DatePicker when dateDisplayFormat not defined', () => {
+            const wrapper = getSubsection();
+
+            expect(wrapper.prop('displayFormat')).toEqual(defaultDisplayFormat);
+        });
+
+        test('should pass dateDisplayFormat to DatePicker displayFormat', () => {
+            const wrapper = getSubsection({
+                dateDisplayFormat,
+            });
+
+            expect(wrapper.prop('displayFormat')).toEqual(dateDisplayFormat);
+        });
     });
 });

package/src/features/shared-link-settings-modal/__tests__/SharedLinkSettingsModal.test.js

@@ -26,6 +26,7 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
     const isDirectLinkAvailable = true;
     const isDirectLinkUnavailableDueToDownloadSettings = true;
     const isDirectLinkUnavailableDueToAccessPolicy = true;
+    const isDirectLinkUnavailableDueToMaliciousContent = false;
 
     const getWrapper = (props = {}) =>
         shallow(
@@ -59,6 +60,7 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
                 isDirectLinkAvailable={isDirectLinkAvailable}
                 isDirectLinkUnavailableDueToDownloadSettings={isDirectLinkUnavailableDueToDownloadSettings}
                 isDirectLinkUnavailableDueToAccessPolicy={isDirectLinkUnavailableDueToAccessPolicy}
+                isDirectLinkUnavailableDueToMaliciousContent={isDirectLinkUnavailableDueToMaliciousContent}
                 {...props}
             />,
         );
@@ -244,9 +246,16 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
         test('should render an ExpirationSection', () => {
             const dateFormat = 'utcTime';
             const expirationDate = new Date('11/7/17');
+            const dateDisplayFormat = {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+                timeZone: 'Europe/Warsaw',
+            };
 
             const wrapper = getWrapper({
                 dateFormat,
+                dateDisplayFormat,
                 expirationTimestamp: 123,
             });
 
@@ -260,6 +269,7 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
             expect(section.length).toBe(1);
             expect(section.prop('canChangeExpiration')).toEqual(canChangeExpiration);
             expect(section.prop('dateFormat')).toEqual(dateFormat);
+            expect(section.prop('dateDisplayFormat')).toEqual(dateDisplayFormat);
             expect(section.prop('expirationDate')).toEqual(expirationDate);
             expect(section.prop('isExpirationEnabled')).toBe(true);
             expect(section.prop('onCheckboxChange')).toEqual(wrapper.instance().onExpirationCheckboxChange);

package/src/features/unified-share-modal/UnifiedShareForm.js

@@ -438,6 +438,7 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
             submitting,
             suggestedCollaborators,
             trackingProps,
+            upsellInlineNotice,
         } = this.props;
         const { type } = item;
         const { isFetchingJustificationReasons, isInviteSectionExpanded, justificationReasons } = this.state;
@@ -486,6 +487,7 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
             text: ftuxTooltipText,
             theme: 'callout',
         };
+        const showUpsellInlineNotice = !!upsellInlineNotice;
 
         return (
             <>
@@ -523,7 +525,10 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
                             {...inviteCollabsEmailTracking}
                         >
                             {this.renderInviteePermissionsDropdown()}
-                            {showUpgradeOptions && !showUpgradeInlineNotice && this.renderUpgradeLinkDescription()}
+                            {showUpgradeOptions &&
+                                !showUpgradeInlineNotice &&
+                                !showUpsellInlineNotice &&
+                                this.renderUpgradeLinkDescription()}
                         </EmailForm>
                     </div>
                 </Tooltip>
@@ -699,6 +704,7 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
             submitting,
             tooltips = {},
             trackingProps,
+            upsellInlineNotice = null,
         } = this.props;
         const { sharedLinkTracking, sharedLinkEmailTracking } = trackingProps;
         const { isEmailLinkSectionExpanded, isInviteSectionExpanded, showCollaboratorList } = this.state;
@@ -712,6 +718,9 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
             <div className={displayInModal ? '' : 'be bdl-UnifiedShareForm'}>
                 <LoadingIndicatorWrapper isLoading={isFetching} hideContent>
                     {!hasExpandedSections && allShareRestrictionWarning}
+
+                    {!!upsellInlineNotice && <div className="upsell-inline-notice">{upsellInlineNotice}</div>}
+
                     {showUpgradeOptions && showUpgradeInlineNotice && this.renderUpgradeInlineNotice()}
 
                     {!isEmailLinkSectionExpanded && !showCollaboratorList && this.renderInviteSection()}

package/src/features/unified-share-modal/UnifiedShareModal.scss

@@ -289,6 +289,10 @@
         color: $bdl-box-blue;
         letter-spacing: normal;
     }
+
+    .upsell-inline-notice {
+        margin-bottom: $bdl-grid-unit * 5;
+    }
 }
 
 .bdl-UnifiedShareForm-container {

package/src/features/unified-share-modal/__tests__/UnifiedShareForm.test.js

@@ -73,6 +73,12 @@ describe('features/unified-share-modal/UnifiedShareForm', () => {
                 {...props}
             />,
         );
+    const mockUpsellInlineNotice = (
+        <div>
+            <div className="upsell-title">Upsell Inline Notice</div>
+            <div className="upsell-body">Lorem Ipsum</div>
+        </div>
+    );
 
     describe('render()', () => {
         test('should render a default component with default props', () => {
@@ -205,14 +211,30 @@ describe('features/unified-share-modal/UnifiedShareForm', () => {
             expect(wrapper).toMatchSnapshot();
         });
 
-        test('should render a default component with upgrade CTA when showUpgradeOptions is enabled', () => {
-            const wrapper = getWrapper({
-                canInvite: true,
-                isFetching: false,
-                showUpgradeOptions: true,
-            });
-            expect(wrapper.exists('UpgradeBadge')).toBe(true);
-        });
+        test.each([
+            [true, true, 'is not', null],
+            [true, false, 'is not', null],
+            [false, true, 'is not', null],
+            [false, false, 'is not', null],
+            [true, true, 'is', mockUpsellInlineNotice],
+            [true, false, 'is', mockUpsellInlineNotice],
+            [false, true, 'is', mockUpsellInlineNotice],
+            [false, false, 'is', mockUpsellInlineNotice],
+        ])(
+            'should render a default component with upgrade CTA when showUpgradeInlineNotice is %s, showUpgradeOptions is %s, and upsellInlineNotice %s passed in',
+            (showUpgradeInlineNotice, showUpgradeOptions, upsellInlineNoticeDescription, upsellInlineNotice) => {
+                const wrapper = getWrapper({
+                    canInvite: true,
+                    isFetching: false,
+                    showUpgradeInlineNotice,
+                    showUpgradeOptions,
+                    upsellInlineNotice,
+                });
+                expect(wrapper.exists('UpgradeBadge')).toBe(
+                    showUpgradeOptions && !showUpgradeInlineNotice && !upsellInlineNotice,
+                );
+            },
+        );
 
         test('should render correct upgrade inline notice when showUpgradeInlineNotice and showUpgradeOptions is enabled', () => {
             const wrapper = getWrapper({
@@ -221,10 +243,23 @@ describe('features/unified-share-modal/UnifiedShareForm', () => {
                 showUpgradeInlineNotice: true,
                 showUpgradeOptions: true,
             });
-            expect(wrapper.exists('UpgradeBadge')).toBe(false);
             expect(wrapper.exists('InlineNotice')).toBe(true);
         });
 
+        test('should render the upsell inline notice component when component is passed', () => {
+            const wrapper = getWrapper({ upsellInlineNotice: mockUpsellInlineNotice });
+            expect(wrapper.exists('.upsell-inline-notice')).toBe(true);
+            expect(wrapper.exists('.upsell-title')).toBe(true);
+            expect(wrapper.exists('.upsell-body')).toBe(true);
+        });
+
+        test('should not render the upsell inline notice div when component is passed', () => {
+            const wrapper = getWrapper();
+            expect(wrapper.exists('.upsell-inline-notice')).toBe(false);
+            expect(wrapper.exists('.upsell-title')).toBe(false);
+            expect(wrapper.exists('.upsell-body')).toBe(false);
+        });
+
         test('should render a default component with correct Focus element and props when focusSharedLinkOnLoad is enabled', () => {
             const wrapper = getWrapper({
                 focusSharedLinkOnLoad: true,

package/src/features/unified-share-modal/flowTypes.js

@@ -409,8 +409,12 @@ export type USFProps = BaseUnifiedShareProps & {
     sharedLinkLoaded: boolean,
     /** Whether the FTUX tooltip should be rendered */
     shouldRenderFTUXTooltip: boolean,
-    /** Whether the upgrade inline notice should be rendered */
+    /** Whether the upgrade inline notice should be rendered
+     * NOTE (wyehdego): Remove this prop once we refactor legacy inline notice with upsellInlineNotice
+     */
     showUpgradeInlineNotice?: boolean,
+    /** Inline Notice component to render based on user */
+    upsellInlineNotice?: React.Node | null,
 };
 
 export type InviteCollaboratorsRequest = {