@box/user-selector 1.21.23

package/dist/types/lib/user-selector-list-item.d.ts

@@ -0,0 +1,56 @@
+import { AvatarProps, ComboboxOptionProps } from '@box/blueprint-web';
+import { default as React, ComponentProps, ReactElement } from 'react';
+import { CustomUserContactType, UserContactType, UserSelectorOption } from './types';
+export type UserSelectorListItemProps = {
+    /**
+     * UserSelectorOption object to be displayed in the list item
+     */
+    userContact: UserContactType;
+    /**
+     * Function to render the avatar for the user contact
+     */
+    renderAvatar: (option: UserContactType) => ReactElement<AvatarProps>;
+    /**
+     * Callback function to be called when the list item is clicked
+     */
+    onClick?: (option: UserSelectorOption, id: string) => void;
+    /**
+     * Id of the list item
+     */
+    id?: string;
+    /**
+     * Classname to be applied to the list item
+     */
+    className?: string;
+    /**
+     * Boolean to determine if the list item is selected
+     */
+    selected?: boolean;
+    /**
+     * Boolean to determine if the user is a collaborator
+     */
+    isCollaborator?: boolean;
+} & Omit<ComponentProps<'div'>, 'onClick'>;
+export type UserSelectorListItemInfoProps = Omit<UserSelectorListItemProps, 'userContact' | 'onClick' | 'renderAvatar'> & {
+    title: string;
+    subtitle: string;
+    onClick?: () => void;
+    renderAvatar: () => ReactElement<AvatarProps>;
+};
+export type UserSelectorComboboxOptionProps = Omit<ComboboxOptionProps, 'children' | 'value'> & Omit<UserSelectorListItemProps, 'onClick' | 'userContact' | 'renderAvatar'> & {
+    /**
+     * UserSelectorOption object to be displayed in the list item
+     */
+    userContact: UserSelectorOption;
+    /**
+     * Function to render the avatar for the user contact
+     */
+    renderAvatar: (option: UserSelectorOption) => ReactElement<AvatarProps>;
+    /**
+     * Function to render the custom option
+     */
+    renderCustomOption: (option: CustomUserContactType, renderAvatar: () => ReactElement<AvatarProps>) => React.ReactNode;
+};
+export declare const UserSelectorListItemInfo: React.ForwardRefExoticComponent<Omit<UserSelectorListItemInfoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const UserSelectorListItem: React.ForwardRefExoticComponent<Omit<UserSelectorListItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const UserSelectorComboboxOption: React.ForwardRefExoticComponent<Omit<UserSelectorComboboxOptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/lib/user-selector.d.ts

@@ -0,0 +1,37 @@
+import { AvatarProps } from '@box/blueprint-web';
+import { ComboboxWithApiProps } from '@box/combobox-with-api';
+import { ReactElement } from 'react';
+import { CustomUserContactType, FetchedAvatarUrls, UserContactType, UserSelectorOption } from './types';
+export type BaseUserSelectorProps<T extends UserSelectorOption> = {
+    /**
+     * A dictionary with user ids mapped to avatar URLs
+     */
+    fetchedAvatarUrls: FetchedAvatarUrls;
+    /**
+     * Function to fetch users when the input value changes
+     */
+    fetchUsers: (inputValue: string) => Promise<UserContactType[]>;
+    /**
+     * onChange for controlled selected users state
+     */
+    onSelectedUsersChange: (selectedUsers: T[]) => void;
+    /**
+     * Controlled selected users state
+     */
+    selectedUsers: T[];
+    /**
+     * Support "text area" like styling
+     */
+    variant?: 'input' | 'textarea';
+    /**
+     * Default options to show when the input is empty
+     */
+    defaultOptions?: T[];
+    /**
+     * Function to render the custom option
+     */
+    renderCustomOption?: (option: CustomUserContactType, renderAvatar: () => ReactElement<AvatarProps>) => React.ReactNode;
+};
+export type UserSelectorProps<T extends UserSelectorOption = UserContactType> = BaseUserSelectorProps<T> & Omit<ComboboxWithApiProps<true, false, T>, 'as' | 'fetcher' | 'freeInput' | 'hideSelectedOptions' | 'loadingAriaLabel' | 'multiselect' | 'onValueChange' | 'value'>;
+declare const UserSelector: <T extends UserSelectorOption = UserContactType>(props: UserSelectorProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default UserSelector;

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

@@ -0,0 +1,15 @@
+import { default as React, CSSProperties, FunctionComponent } from 'react';
+export type ComponentVariant<Props extends object> = {
+    props?: Partial<Props>;
+    ComponentTemplate?: FunctionComponent<any>;
+};
+export type ComponentRecord<ComponentProps> = Record<string, ComponentVariant<Partial<ComponentProps>>>;
+export declare const VariantsAggregator: {
+    <T extends React.JSX.IntrinsicAttributes>({ defaultProps, DefaultComponentTemplate, variantsMap, containerStyle, }: {
+        defaultProps: T;
+        DefaultComponentTemplate: FunctionComponent<T>;
+        variantsMap: Record<string, ComponentVariant<T>>;
+        containerStyle?: CSSProperties;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,4 @@
+import { CustomUserContactType } from '@box/user-selector';
+import { default as React, ReactElement } from 'react';
+import { AvatarProps } from '@box/blueprint-web';
+export declare function defaultRenderCustomOption(option: CustomUserContactType, renderAvatar: () => ReactElement<AvatarProps>): React.ReactNode;

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

@@ -0,0 +1 @@
+export declare const getInitials: (name: string) => string;

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

@@ -0,0 +1,2 @@
+import { UserContactType, UserSelectorOption } from '../types';
+export declare function isUserContactType(value: UserSelectorOption): value is UserContactType;

package/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "@box/user-selector",
+    "version": "1.21.23",
+    "peerDependencies": {
+        "@box/blueprint-web": "^7.8.0",
+        "@box/blueprint-web-assets": "^4.16.0",
+        "@box/combobox-with-api": "^0.5.14",
+        "lodash": "^4.17.15",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0",
+        "react-intl": "6.4.2"
+    },
+    "devDependencies": {
+        "@box/blueprint-web": "^12.68.2",
+        "@box/blueprint-web-assets": "^4.66.0",
+        "@box/combobox-with-api": "^0.57.23",
+        "@box/storybook-utils": "^0.14.2",
+        "@types/lodash": "^4.17.14",
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0",
+        "react-intl": "6.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"
+    ],
+    "license": "SEE LICENSE IN LICENSE"
+}