@box/unified-share-modal 0.45.1

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

@@ -0,0 +1,387 @@
+import { ReactElement } from 'react';
+import { DatePickerProps } from '@box/blueprint-web';
+import { FetchedAvatarUrls, UserContactType } from '@box/user-selector';
+/**
+ * The date value type returned from the DatePicker component.
+ */
+export type DateValue = Parameters<DatePickerProps['onChange']>[0];
+/**
+ * Modal dialogs used in the Unified Share Modal. Only one modal is open at a time.
+ *
+ * - `unified-share-form` - The sharing form where users can invite collaborators and manage shared links
+ * - `shared-link-settings` - A focused view for configuring the shared link settings and permissions
+ * - `remove-shared-link` - A confirmation view for removing an existing shared link
+ */
+export type ModalViewType = 'unified-share-form' | 'shared-link-settings' | 'remove-shared-link';
+/**
+ * View states of the sharing form in the Unified Share Modal.
+ *
+ * - `default` - The initial view which displays the collaboration and shared link sections
+ * - `invite` - An expanded view of the collaboration section used for inviting collaborators
+ * - `email` - An expanded view of the collaboration section used for emailing the shared link
+ * - `collaborators` - A separate view for displaying the list of collaborators on the item
+ */
+export type ShareViewType = 'default' | 'invite' | 'email' | 'collaborators';
+/**
+ * Supported success and error notifications when the user performs sharing actions.
+ */
+export type NotificationType = 'invite-collaborators' | 'create-shared-link' | 'delete-shared-link' | 'update-shared-link' | 'email-shared-link' | 'auto-copy-shared-link';
+/**
+ * Supported roles for inviting a new collaborator. The available roles are dependent on the Enterprise settings.
+ *
+ * The `owner` role is not supported when inviting a new collaborator.
+ */
+export type InvitationRole = 'co_owner' | 'editor' | 'previewer' | 'previewer_uploader' | 'uploader' | 'viewer' | 'viewer_uploader';
+/**
+ * Supported access levels for a shared link. The allowed access levels are dependent on the Enterprise settings.
+ */
+export type AccessLevelType = 'open' | 'company' | 'collaborators';
+/**
+ * Shield policies that restrict access or permissions on the item.
+ */
+export type ShieldPolicyType = 'access_policy' | 'malicious_content' | 'information_barrier';
+/**
+ * Supported item types in the Unified Share Modal.
+ */
+export type ItemType = 'file' | 'folder' | 'hubs' | 'web_link';
+export interface Item {
+    /**
+     * The ID of the item.
+     */
+    id: string;
+    /**
+     * The name of the item.
+     */
+    name: string;
+    /**
+     * The permissions that the current user has for the item.
+     */
+    permissions?: {
+        /**
+         * When `true`, the user can invite collaborators on the item.
+         */
+        canInviteCollaborator?: boolean;
+        /**
+         * When `true`, the user can change the access level of the shared link.
+         */
+        canSetShareAccess?: boolean;
+        /**
+         * When `true`, the user can create a shared link for the item.
+         */
+        canShare?: boolean;
+    };
+    /**
+     * The type of the item.
+     */
+    type: ItemType;
+}
+export interface User {
+    /**
+     * The ID of the user.
+     *
+     * Used with `Collaborator.userId` to exclude the current user in the "Shared with ..." list of avatars.
+     */
+    id: string;
+    /**
+     * The enterprise of the user.
+     */
+    enterprise?: Enterprise;
+}
+export interface Enterprise {
+    /**
+     * The name of the enterprise.
+     *
+     * Used to display the enterprise name in the access level dropdown menu options.
+     */
+    name?: string;
+}
+export interface Permissions {
+    canChangeDownload?: boolean;
+    canChangeExpiration?: boolean;
+    canChangePassword?: boolean;
+    canChangeVanityName?: boolean;
+    isDownloadAvailable?: boolean;
+    isDownloadEnabled?: boolean;
+    isPasswordAvailable?: boolean;
+    isPasswordEnabled?: boolean;
+    isVanityNameAvailable?: boolean;
+}
+export interface SharedLink {
+    access?: AccessLevelType;
+    accessLevels?: (AccessLevel | AccessLevelType)[];
+    expiresAt?: number;
+    permissions?: Permissions;
+    url: string;
+    vanityDomain?: string;
+    vanityName?: string;
+}
+export interface AccessLevel {
+    /**
+     * The description for the access level. Each access level has a default description.
+     */
+    description?: string;
+    /**
+     * The policy reason for disabling the option when selecting an access level.
+     */
+    disabledReason?: ShieldPolicyType;
+    /**
+     * The ID of the access level. The value must be one of the allowed access levels within the Enterprise.
+     */
+    id: AccessLevelType;
+    /**
+     * The label for the access level. Each access level has a default label.
+     */
+    label?: string;
+}
+export interface Collaborator {
+    /**
+     * The URL to the profile picture of the collaborator.
+     */
+    avatarUrl?: string;
+    /**
+     * The email address of the collaborator.
+     */
+    email?: string;
+    /**
+     * The expiration date on the avatar badge to indicate when the collaborator loses access to the item.
+     *
+     * - `number` - The value is treated as a timestamp and will be converted to a localized date string.
+     * - `string` - The value is treated as a localized date string and will be used without transformation.
+     */
+    expiresAt?: number | string;
+    /**
+     * When `false`, the avatar will show the collaborator's first initial instead of the profile picture.
+     *
+     * Used to prevent showing the default profile picture.
+     */
+    hasCustomAvatar?: boolean;
+    /**
+     * When `true`, the collaborator's role is treated as a localized string and will be used without transformation.
+     */
+    hasCustomRole?: boolean;
+    /**
+     * The ID of the collaboration record for the item. This is different than the User ID.
+     */
+    id: string;
+    /**
+     * When `true`, the collaborator does not appear in the "Shared with ..." list of avatars.
+     */
+    isCurrentUser?: boolean;
+    /**
+     * When `true`, there is an avatar badge indicating the collaborator is external to the enterprise.
+     */
+    isExternal?: boolean;
+    /**
+     * When `true`, the collaborator's role is displayed as "Pending" in the list of collaborators.
+     *
+     * Used when the collaborator has not accepted or declined the collaboration invite.
+     */
+    isPending?: boolean;
+    /**
+     * The name of the collaborator.
+     */
+    name: string;
+    /**
+     * The role of the collaborator. The value must be one of the supported roles within the Enterprise.
+     *
+     * Can be used with `hasCustomRole` to support custom collaboration roles.
+     */
+    role: InvitationRole | 'owner' | string;
+    /**
+     * The user ID of the collaborator. Alternative method to using the `isCurrentUser` property.
+     *
+     * Used with `currentUser.id` to exclude the current user in the "Shared with ..." list of avatars.
+     */
+    userId?: string;
+}
+/**
+ * Collaboration roles available to the user to choose from when inviting a new collaborator.
+ *
+ * These roles are dependent on the Item type and Enterprise settings.
+ *
+ * See https://support.box.com/hc/en-us/articles/360044196413-Understanding-Collaborator-Permission-Levels
+ */
+export interface CollaborationRole {
+    /**
+     * The description for the role. Supported roles have default descriptions.
+     */
+    description?: string;
+    /**
+     * The ID of the role. The value must be one of the supported roles within the Enterprise.
+     *
+     * If the value does not match a supported role, the role is treated as a custom collaboration role.
+     */
+    id: InvitationRole | string;
+    /**
+     * When `true`, the role will be the default selected collaboration role.
+     */
+    isDefault?: boolean;
+    /**
+     * When `true`, the role will be disabled when selecting a collaboration role.
+     */
+    isDisabled?: boolean;
+    /**
+     * The label for the role. Supported roles have default labels.
+     */
+    label?: string;
+}
+export interface EventService {
+    onCollaboratorsClick?: () => void;
+    onCollaboratorsManageClick?: () => void;
+    onSharedLinkSettingsClick?: () => void;
+    onSharedLinkSettingsClose?: () => void;
+    onSharedLinkSettingsLoad?: () => void;
+}
+export interface ContactService {
+    getContactByEmail?: (email: string) => Promise<UserContactType | void>;
+    getContacts?: (query: string) => Promise<UserContactType[]>;
+    getContactsAvatarUrls?: (userContacts: UserContactType[]) => Promise<FetchedAvatarUrls>;
+}
+export interface SharingService {
+    sendInvites?: () => Promise<SharingResponse | void>;
+    sendSharedLink?: () => Promise<SharingResponse | void>;
+    createSharedLink?: () => Promise<SharingResponse | void>;
+    deleteSharedLink?: () => Promise<SharingResponse | void>;
+    updateSharedLink?: () => Promise<SharingResponse | void>;
+    changeSharedLinkAccess?: (access: AccessLevelType) => Promise<void>;
+    changeSharedLinkPermission?: () => Promise<void>;
+}
+/**
+ * Response structure for sharing actions in the Unified Share Modal.
+ */
+export interface SharingResponse {
+    /**
+     * Notifications displayed after the user performs sharing actions. If omitted, the default notifications are displayed to the user.
+     */
+    messages?: Array<{
+        text: string;
+        type: 'success' | 'error';
+        [key: string]: string;
+    }>;
+}
+/**
+ * Error structure for sharing actions in the Unified Share Modal.
+ */
+export interface SharingError {
+    /**
+     * Error messages for form fields after the user performs sharing actions.
+     */
+    fields?: {
+        /**
+         * The key must be a field on the collaboration form or link settings form.
+         */
+        [key: string]: string;
+    };
+}
+export interface LinkSettingsFormData {
+    expiration?: DateValue;
+    isDownloadEnabled: boolean;
+    isExpirationEnabled: boolean;
+    isPasswordEnabled: boolean;
+    isVanityEnabled: boolean;
+    password?: string;
+    vanityName?: string;
+}
+/**
+ * Configuration options for configuring features in the Unified Share Modal.
+ *
+ * Generally used for hiding specific sections of the sharing form.
+ */
+export interface Configuration {
+    /**
+     * Controls whether the collaboration section is visible to the user.
+     *
+     * @default true
+     */
+    collaboration?: boolean;
+    /**
+     * Controls the number of contacts in the contact combobox that can be added at a time.
+     *
+     * @default 100
+     */
+    collaborationLimit?: number;
+    /**
+     * Controls whether the collaboration message text field is visible to the user.
+     *
+     * @default true
+     */
+    collaborationMessage?: boolean;
+    /**
+     * Inline notices to display in the collaboration section.
+     *
+     * There are no inline notices by default.
+     */
+    collaborationNotices?: ReactElement | ReactElement[];
+    /**
+     * Controls whether the collaboration role is visible to the user.
+     *
+     * @default true
+     */
+    collaborationRole?: boolean;
+    /**
+     * Controls whether the "Shared with ..." list of avatars is visible to the user.
+     *
+     * @default true
+     */
+    collaborators?: boolean;
+    /**
+     * Controls the number of collaborators that are displayed in the list of collaborators.
+     *
+     * @default 100
+     */
+    collaboratorsLimit?: number;
+    /**
+     * Controls whether the "Manage All" link is visible to the user.
+     *
+     * @default true
+     */
+    collaboratorsManagement?: boolean;
+    /**
+     * Controls which notification types are displayed after sharing related actions.
+     *
+     * All notifications are enabled by default.
+     */
+    notifications?: NotificationType[];
+    /**
+     * Controls whether the shared link section is visible to the user.
+     *
+     * @default true
+     */
+    sharedLink?: boolean;
+    /**
+     * Controls whether the shared link access level is visible to the user.
+     *
+     * @default true
+     */
+    sharedLinkAccess?: boolean;
+    /**
+     * Controls whether the shared link is automatically copied on load.
+     *
+     * @default false
+     */
+    sharedLinkAutoCopy?: boolean;
+    /**
+     * Controls whether the shared link is automatically created on load.
+     *
+     * @default false
+     */
+    sharedLinkAutoCreate?: boolean;
+    /**
+     * Controls whether the button to email a shared link is visible to the user.
+     *
+     * @default true
+     */
+    sharedLinkEmail?: boolean;
+    /**
+     * Controls whether the shared link permission level is visible to the user.
+     *
+     * @default true
+     */
+    sharedLinkPermission?: boolean;
+    /**
+     * Controls whether the "Link Settings" button is visible to the user.
+     *
+     * @default true
+     */
+    sharedLinkSettings?: boolean;
+}

package/dist/types/lib/unified-share-modal.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { CollaborationRole, Collaborator, Configuration, ContactService, EventService, Item, SharedLink, SharingService, User } from './types';
+export interface UnifiedShareModalProps {
+    children?: ReactElement;
+    collaborationRoles?: CollaborationRole[];
+    collaborators?: Collaborator[];
+    config?: Configuration;
+    contactService?: ContactService;
+    currentUser?: User;
+    eventService?: EventService;
+    isFetching?: boolean;
+    isOpen?: boolean;
+    isSubmitting?: boolean;
+    item: Item;
+    onLoad?: () => Promise<void>;
+    onOpenChange?: (open: boolean) => void;
+    sharedLink?: SharedLink;
+    sharingService?: SharingService;
+}
+export declare function UnifiedShareModal({ children, collaborationRoles, collaborators, config, contactService, currentUser, eventService, isFetching, isOpen, isSubmitting, item, onLoad, onOpenChange, sharedLink, sharingService, }: UnifiedShareModalProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { AvatarProps, IconBadgeProps } from '@box/blueprint-web';
+import { CollaborationRole, Collaborator } from '../types';
+declare const getAvatarBadgeSize: (size: AvatarProps["size"]) => IconBadgeProps["size"];
+declare const getDefaultCollaborationRole: (collaborationRoles?: CollaborationRole[]) => CollaborationRole;
+declare const getFirstInitial: (name: string) => string;
+declare const isCollaboratorRoleSupported: (role: Collaborator["role"]) => boolean;
+declare const isInvitationRoleSupported: (role: CollaborationRole["id"]) => boolean;
+export { getAvatarBadgeSize, getDefaultCollaborationRole, getFirstInitial, isCollaboratorRoleSupported, isInvitationRoleSupported, };

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

@@ -0,0 +1,3 @@
+export declare const formatDateFromTimestampToCalendarDate: (timestamp: number) => import('@internationalized/date').CalendarDate;
+export declare const formatDateFromTimestampToDateString: (timestamp: number) => string;
+export declare const formatTomorrowDateToCalendarDate: () => import('@internationalized/date').CalendarDate;

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

@@ -0,0 +1,13 @@
+/**
+ * Triggers actions on specific keyboard events.
+ * Use appropriate and accessible design patterns for keyboard interactions.
+ *
+ * See https://www.w3.org/WAI/ARIA/apg/patterns/
+ */
+declare const callOnKeyboardEvent: (callback: any, options?: {
+    args?: unknown[];
+    canPreventDefault?: boolean;
+    canStopPropagation?: boolean;
+    keys?: string[];
+}) => (event: any) => void;
+export { callOnKeyboardEvent };

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

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

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

@@ -0,0 +1,3 @@
+import { AccessLevel, AccessLevelType } from '../types';
+declare const getAllowedAccessLevels: (accessLevels?: (AccessLevel | AccessLevelType)[]) => AccessLevel[];
+export { getAllowedAccessLevels };

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

@@ -0,0 +1,2 @@
+export declare const isVanityNameValid: (vanityName: string) => boolean;
+export declare const isEmailValid: (email: string) => boolean;

package/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "@box/unified-share-modal",
+    "version": "0.45.1",
+    "license": "SEE LICENSE IN LICENSE",
+    "peerDependencies": {
+        "@box/blueprint-web": "^9.18.13",
+        "@box/blueprint-web-assets": "^4.37.0",
+        "@box/copy-input": "^0.9.0",
+        "@box/user-selector": "^0.47.1",
+        "lodash": "^4.17.15",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-intl": "^6.4.2"
+    },
+    "devDependencies": {
+        "@box/blueprint-web": "^12.68.2",
+        "@box/blueprint-web-assets": "^4.66.0",
+        "@box/copy-input": "^0.21.12",
+        "@box/storybook-utils": "0.14.2",
+        "@box/eslint-plugin-blueprint": "1.0.4",
+        "react-intl": "^6.4.2"
+    },
+    "dependencies": {
+        "@xstate/store": "3.4.2"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist"
+    ],
+    "main": "./dist/esm/index.js",
+    "module": "./dist/esm/index.js",
+    "types": "./dist/types/index.d.ts",
+    "exports": {
+        ".": {
+            "require": "./dist/esm/index.js",
+            "import": "./dist/esm/index.js",
+            "types": "./dist/types/index.d.ts"
+        },
+        "./*": {
+            "require": "./dist/esm/*",
+            "import": "./dist/esm/*",
+            "types": "./dist/types/*"
+        },
+        "./i18n/*": {
+            "require": "./dist/i18n/*",
+            "import": "./dist/i18n/*"
+        }
+    },
+    "sideEffects": [
+        "**/*.css"
+    ]
+}