From b4d8f55bf9f410b247129ba5d1e827bb6cc5acd8 Mon Sep 17 00:00:00 2001
From: tjuanitas <7311041+tjuanitas@users.noreply.github.com>
Date: Mon, 10 Mar 2025 09:41:06 -0700
Subject: [PATCH] demo custom actions in explorer and picker

---
 .storybook/preview-body.html                  |  10 +-
 src/elements/common/item-grid/ItemGrid.tsx    |   9 +-
 src/elements/common/item-list/ItemList.tsx    |  61 ++++++++
 src/elements/common/item-list/constants.ts    |  17 +++
 src/elements/common/item-list/index.ts        |   1 +
 src/elements/common/item-list/messages.ts     |  26 ++++
 src/elements/common/item-list/types.ts        |   5 +
 src/elements/common/item/ItemOptions.tsx      | 131 ++++++++++--------
 src/elements/common/item/types.ts             |  13 +-
 src/elements/content-explorer/Content.tsx     |  15 +-
 .../content-explorer/ContentExplorer.tsx      |  13 ++
 .../stories/ContentExplorer.stories.js        |  88 ++++++++++++
 src/elements/content-picker/Content.js        |   2 +
 src/elements/content-picker/ContentPicker.js  |   2 +
 src/elements/content-picker/ItemList.js       |   9 ++
 .../stories/ContentPicker.stories.js          |  14 ++
 16 files changed, 334 insertions(+), 82 deletions(-)
 create mode 100644 src/elements/common/item-list/ItemList.tsx
 create mode 100644 src/elements/common/item-list/constants.ts
 create mode 100644 src/elements/common/item-list/index.ts
 create mode 100644 src/elements/common/item-list/messages.ts
 create mode 100644 src/elements/common/item-list/types.ts

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index 6573472515..60d9c301b9 100644
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@@ -1,14 +1,20 @@
 <style>
+    html,
+    body,
+    #storybook-root {
+        height: 100%;
+    }
+
     #root {
         padding: 16px;
     }
 
     .be.bce {
-        height: 500px;
+        height: 100%;
     }
 
     .be.bcp {
-        height: 500px;
+        height: 100%;
     }
 
     .be.bcu {
diff --git a/src/elements/common/item-grid/ItemGrid.tsx b/src/elements/common/item-grid/ItemGrid.tsx
index acd7d5d3f9..d8adb0ceea 100644
--- a/src/elements/common/item-grid/ItemGrid.tsx
+++ b/src/elements/common/item-grid/ItemGrid.tsx
@@ -7,18 +7,19 @@ import { GridList } from '@box/blueprint-web';
 import { ItemDate, ItemOptions, ItemTypeIcon } from '../item';
 import { isThumbnailAvailable } from '../utils';
 
-import { TYPE_FOLDER, TYPE_WEBLINK } from '../../../constants';
+import { TYPE_FOLDER, TYPE_WEBLINK, VIEW_MODE_GRID } from '../../../constants';
 
 import messages from './messages';
 
 import type { BoxItem, View } from '../../../common/types/core';
-import type { ItemEventHandlers, ItemEventPermissions } from '../item';
+import type { ItemAction, ItemEventHandlers, ItemEventPermissions } from '../item';
 
 import './ItemGrid.scss';
 
 export interface ItemGridProps extends ItemEventHandlers, ItemEventPermissions {
     gridColumnCount?: number;
     isTouch?: boolean;
+    itemActions?: ItemAction[];
     items: BoxItem[];
     view: View;
 }
@@ -26,8 +27,8 @@ export interface ItemGridProps extends ItemEventHandlers, ItemEventPermissions {
 const ItemGrid = ({
     canPreview = false,
     gridColumnCount = 1,
-    items,
     isTouch = false,
+    items,
     onItemClick = noop,
     view,
     ...rest
@@ -64,7 +65,7 @@ const ItemGrid = ({
                         <GridList.Subtitle>
                             <ItemDate item={item} view={view} />
                         </GridList.Subtitle>
-                        <ItemOptions canPreview={canPreview} isGridView item={item} {...rest} />
+                        <ItemOptions canPreview={canPreview} item={item} viewMode={VIEW_MODE_GRID} {...rest} />
                     </GridList.Item>
                 );
             })}
diff --git a/src/elements/common/item-list/ItemList.tsx b/src/elements/common/item-list/ItemList.tsx
new file mode 100644
index 0000000000..0c0a49dcf9
--- /dev/null
+++ b/src/elements/common/item-list/ItemList.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import { Cell, Column, Row, Table, TableBody, TableHeader } from '@box/blueprint-web';
+
+import { ItemDate, ItemOptions, ItemTypeIcon } from '../item';
+
+import { DEFAULT_TABLE_COLUMNS } from './constants';
+
+import messages from './messages';
+
+import type { BoxItem, View } from '../../../common/types/core';
+import type { ItemEventHandlers, ItemEventPermissions } from '../item';
+import type { ItemListColumn } from './types';
+
+export interface ItemListProps extends ItemEventHandlers, ItemEventPermissions {
+    columns?: ItemListColumn[];
+    items: BoxItem[];
+    view: View;
+}
+
+const ItemList = ({ columns, items, view }: ItemListProps) => {
+    const { formatMessage } = useIntl();
+
+    const tableColumns =
+        columns ||
+        DEFAULT_TABLE_COLUMNS.map(({ messageId, ...column }) => {
+            return { ...column, label: formatMessage(messages[messageId]) };
+        });
+
+    return (
+        <Table aria-label={formatMessage(messages.listView)}>
+            <TableHeader columns={tableColumns}>
+                {({ children, label, ...rest }) => {
+                    return (
+                        <Column textValue={label} {...rest}>
+                            {children || label}
+                        </Column>
+                    );
+                }}
+            </TableHeader>
+            <TableBody items={items}>
+                {item => {
+                    const { name, ...rest } = item;
+                    console.log('what is the item', rest);
+                    return (
+                        <Row>
+                            <Cell>{name}</Cell>
+                            <Cell>
+                                <ItemDate item={item} view={view} />
+                            </Cell>
+                            <Cell><div role={null} tabIndex={undefined}></div></Cell>
+                        </Row>
+                    );
+                }}
+            </TableBody>
+        </Table>
+    );
+};
+
+export default ItemList;
diff --git a/src/elements/common/item-list/constants.ts b/src/elements/common/item-list/constants.ts
new file mode 100644
index 0000000000..a1d01a816c
--- /dev/null
+++ b/src/elements/common/item-list/constants.ts
@@ -0,0 +1,17 @@
+const DEFAULT_TABLE_COLUMNS = [
+    {
+        id: 'name',
+        isRowHeader: true,
+        messageId: 'nameColumn',
+    },
+    {
+        id: 'updated',
+        messageId: 'updatedColumn',
+    },
+    {
+        id: 'size',
+        messageId: 'sizeColumn',
+    },
+];
+
+export { DEFAULT_TABLE_COLUMNS };
diff --git a/src/elements/common/item-list/index.ts b/src/elements/common/item-list/index.ts
new file mode 100644
index 0000000000..868357110c
--- /dev/null
+++ b/src/elements/common/item-list/index.ts
@@ -0,0 +1 @@
+export { default } from './ItemList';
diff --git a/src/elements/common/item-list/messages.ts b/src/elements/common/item-list/messages.ts
new file mode 100644
index 0000000000..950489222b
--- /dev/null
+++ b/src/elements/common/item-list/messages.ts
@@ -0,0 +1,26 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    listView: {
+        id: 'be.itemList.listView',
+        description: 'Label for the list of files and folders displayed in a list view',
+        defaultMessage: 'List view',
+    },
+    nameColumn: {
+        id: 'be.itemList.nameColumn',
+        description: 'TODO',
+        defaultMessage: 'NAME',
+    },
+    updatedColumn: {
+        id: 'be.itemList.updatedColumn',
+        description: 'TODO',
+        defaultMessage: 'UPDATED',
+    },
+    sizeColumn: {
+        id: 'be.itemList.sizeColumn',
+        description: 'TODO',
+        defaultMessage: 'SIZE',
+    },
+});
+
+export default messages;
diff --git a/src/elements/common/item-list/types.ts b/src/elements/common/item-list/types.ts
new file mode 100644
index 0000000000..d51cd1f30c
--- /dev/null
+++ b/src/elements/common/item-list/types.ts
@@ -0,0 +1,5 @@
+import type { ColumnProps } from '@box/blueprint-web';
+
+export type ItemListColumn = Partial<ColumnProps> & {
+    label: string;
+};
diff --git a/src/elements/common/item/ItemOptions.tsx b/src/elements/common/item/ItemOptions.tsx
index 86e9f33262..c4262434aa 100644
--- a/src/elements/common/item/ItemOptions.tsx
+++ b/src/elements/common/item/ItemOptions.tsx
@@ -15,6 +15,8 @@ import {
     PERMISSION_CAN_SHARE,
     TYPE_FILE,
     TYPE_WEBLINK,
+    VIEW_MODE_GRID,
+    VIEW_MODE_LIST,
 } from '../../../constants';
 
 import messages from '../messages';
@@ -23,9 +25,9 @@ import type { BoxItem } from '../../../common/types/core';
 import type { ItemAction, ItemEventHandlers, ItemEventPermissions } from './types';
 
 export interface ItemOptionsProps extends ItemEventHandlers, ItemEventPermissions {
-    isGridView?: boolean;
     item: BoxItem;
     itemActions?: ItemAction[];
+    viewMode?: VIEW_MODE_GRID | VIEW_MODE_LIST;
 }
 
 const ItemOptions = ({
@@ -34,7 +36,6 @@ const ItemOptions = ({
     canPreview = false,
     canRename = false,
     canShare = false,
-    isGridView = false,
     item,
     itemActions = [],
     onItemDelete = noop,
@@ -42,6 +43,7 @@ const ItemOptions = ({
     onItemPreview = noop,
     onItemRename = noop,
     onItemShare = noop,
+    viewMode,
 }: ItemOptionsProps) => {
     const { permissions, type: itemType } = item;
     const { formatMessage } = useIntl();
@@ -66,64 +68,75 @@ const ItemOptions = ({
         return null;
     }
 
-    const OptionsGroup = isGridView ? GridList.Actions : ActionCell;
-    const OptionsTrigger = isGridView ? GridList.ActionIconButton : IconButton;
-
-    return (
-        <OptionsGroup>
-            {/* @ts-expect-error - ActionCell doesn't seem to work with onOpenChange */}
-            {onOpenChange => (
-                <DropdownMenu.Root onOpenChange={onOpenChange}>
-                    <DropdownMenu.Trigger>
-                        <OptionsTrigger aria-label={formatMessage(messages.moreOptions)} icon={Ellipsis} />
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Content align="end">
-                        {isPreviewEnabled && (
-                            <DropdownMenu.Item onClick={() => onItemPreview(item)}>
-                                {formatMessage(messages.preview)}
-                            </DropdownMenu.Item>
-                        )}
-                        {isOpenEnabled && (
-                            <DropdownMenu.Item onClick={() => onItemPreview(item)}>
-                                {formatMessage(messages.open)}
-                            </DropdownMenu.Item>
-                        )}
-                        {isDeleteEnabled && (
-                            <DropdownMenu.Item onClick={() => onItemDelete(item)}>
-                                {formatMessage(messages.delete)}
-                            </DropdownMenu.Item>
-                        )}
-                        {isDownloadEnabled && (
-                            <DropdownMenu.Item onClick={() => onItemDownload(item)}>
-                                {formatMessage(messages.download)}
-                            </DropdownMenu.Item>
-                        )}
-                        {isRenameEnabled && (
-                            <DropdownMenu.Item onClick={() => onItemRename(item)}>
-                                {formatMessage(messages.rename)}
-                            </DropdownMenu.Item>
-                        )}
-                        {isShareEnabled && (
-                            <DropdownMenu.Item onClick={() => onItemShare(item)}>
-                                {formatMessage(messages.share)}
-                            </DropdownMenu.Item>
-                        )}
-                        {hasActions && hasOptions && <DropdownMenu.Separator />}
-                        {itemActions.map(({ label: actionLabel, onAction, type: actionType }) => {
-                            if (actionType && actionType !== itemType) {
-                                return null;
-                            }
-                            return (
-                                <DropdownMenu.Item key={actionLabel + actionType} onClick={() => onAction(item)}>
-                                    {actionLabel}
-                                </DropdownMenu.Item>
-                            );
-                        })}
-                    </DropdownMenu.Content>
-                </DropdownMenu.Root>
-            )}
-        </OptionsGroup>
+    const OptionsGroup = viewMode === VIEW_MODE_GRID ? GridList.Actions : ActionCell;
+    const OptionsTrigger = viewMode === VIEW_MODE_GRID ? GridList.ActionIconButton : IconButton;
+
+    const OptionsDropdownMenu = ({ onOpenChange = noop }) => (
+        <DropdownMenu.Root onOpenChange={onOpenChange}>
+            <DropdownMenu.Trigger>
+                <OptionsTrigger aria-label={formatMessage(messages.moreOptions)} icon={Ellipsis} />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="end">
+                {isPreviewEnabled && (
+                    <DropdownMenu.Item onClick={() => onItemPreview(item)}>
+                        {formatMessage(messages.preview)}
+                    </DropdownMenu.Item>
+                )}
+                {isOpenEnabled && (
+                    <DropdownMenu.Item onClick={() => onItemPreview(item)}>
+                        {formatMessage(messages.open)}
+                    </DropdownMenu.Item>
+                )}
+                {isDeleteEnabled && (
+                    <DropdownMenu.Item onClick={() => onItemDelete(item)}>
+                        {formatMessage(messages.delete)}
+                    </DropdownMenu.Item>
+                )}
+                {isDownloadEnabled && (
+                    <DropdownMenu.Item onClick={() => onItemDownload(item)}>
+                        {formatMessage(messages.download)}
+                    </DropdownMenu.Item>
+                )}
+                {isRenameEnabled && (
+                    <DropdownMenu.Item onClick={() => onItemRename(item)}>
+                        {formatMessage(messages.rename)}
+                    </DropdownMenu.Item>
+                )}
+                {isShareEnabled && (
+                    <DropdownMenu.Item onClick={() => onItemShare(item)}>
+                        {formatMessage(messages.share)}
+                    </DropdownMenu.Item>
+                )}
+                {hasActions && hasOptions && <DropdownMenu.Separator />}
+                {itemActions.map(({ filter: actionFilter, label: actionLabel, onAction, type: actionType }) => {
+                    if (actionType && actionType !== itemType) {
+                        return null;
+                    }
+
+                    if (actionFilter && !actionFilter(item)) {
+                        return null;
+                    }
+
+                    return (
+                        <DropdownMenu.Item key={actionLabel + actionType} onClick={() => onAction(item)}>
+                            {actionLabel}
+                        </DropdownMenu.Item>
+                    );
+                })}
+            </DropdownMenu.Content>
+        </DropdownMenu.Root>
     );
+
+    if (viewMode) {
+        return (
+            <OptionsGroup>
+                {/* @ts-expect-error - ActionCell doesn't seem to work with onOpenChange */}
+                {onOpenChange => <OptionsDropdownMenu onOpenChange={onOpenChange} />}
+            </OptionsGroup>
+        );
+    }
+
+    return <OptionsDropdownMenu />;
 };
 
 export default ItemOptions;
diff --git a/src/elements/common/item/types.ts b/src/elements/common/item/types.ts
index 1a9f351b2c..bff4ae82e9 100644
--- a/src/elements/common/item/types.ts
+++ b/src/elements/common/item/types.ts
@@ -1,20 +1,21 @@
 import type { BoxItem, ItemType } from '../../../common/types/core';
 
-export type ItemAction = {
+export interface ItemAction {
+    filter?: (item: BoxItem) => boolean;
     label: string;
     onAction: (item: BoxItem) => void;
     type?: ItemType;
-};
+}
 
-export type ItemEventPermissions = {
+export interface ItemEventPermissions {
     canDelete?: boolean;
     canDownload?: boolean;
     canPreview?: boolean;
     canRename?: boolean;
     canShare?: boolean;
-};
+}
 
-export type ItemEventHandlers = {
+export interface ItemEventHandlers {
     onItemClick?: (item: BoxItem) => void;
     onItemDelete?: (item: BoxItem) => void;
     onItemDownload?: (item: BoxItem) => void;
@@ -22,4 +23,4 @@ export type ItemEventHandlers = {
     onItemRename?: (item: BoxItem) => void;
     onItemSelect?: (item: BoxItem) => void;
     onItemShare?: (item: BoxItem) => void;
-};
+}
diff --git a/src/elements/content-explorer/Content.tsx b/src/elements/content-explorer/Content.tsx
index ea2fadc004..90d9de503a 100644
--- a/src/elements/content-explorer/Content.tsx
+++ b/src/elements/content-explorer/Content.tsx
@@ -3,10 +3,11 @@ import { Table } from '@box/react-virtualized/dist/es/Table';
 import EmptyView from '../common/empty-view';
 import ProgressBar from '../common/progress-bar';
 import ItemGrid from '../common/item-grid';
-import ItemList from './ItemList';
+import ItemList from '../common/item-list';
 import MetadataBasedItemList from '../../features/metadata-based-view';
 import { VIEW_ERROR, VIEW_METADATA, VIEW_MODE_LIST, VIEW_MODE_GRID, VIEW_SELECTED } from '../../constants';
 import type { ViewMode } from '../common/flowTypes';
+import type { ItemAction } from '../common/item';
 import type { FieldsToShow } from '../../common/types/metadataQueries';
 import type { BoxItem, Collection, View } from '../../common/types/core';
 import type { MetadataFieldValue } from '../../common/types/metadata';
@@ -37,6 +38,7 @@ export interface ContentProps {
     isMedium: boolean;
     isSmall: boolean;
     isTouch: boolean;
+    itemActions?: ItemAction[];
     onItemClick: (item: BoxItem) => void;
     onItemDelete: (item: BoxItem) => void;
     onItemDownload: (item: BoxItem) => void;
@@ -84,16 +86,7 @@ const Content = ({
             {!isViewEmpty && isMetadataBasedView && (
                 <MetadataBasedItemList currentCollection={currentCollection} fieldsToShow={fieldsToShow} {...rest} />
             )}
-            {!isViewEmpty && isListView && (
-                <ItemList
-                    currentCollection={currentCollection}
-                    focusedRow={focusedRow}
-                    onSortChange={onSortChange}
-                    tableRef={tableRef}
-                    view={view}
-                    {...rest}
-                />
-            )}
+            {!isViewEmpty && isListView && <ItemList items={currentCollection.items} view={view} {...rest} />}
             {!isViewEmpty && isGridView && <ItemGrid items={currentCollection.items} view={view} {...rest} />}
         </div>
     );
diff --git a/src/elements/content-explorer/ContentExplorer.tsx b/src/elements/content-explorer/ContentExplorer.tsx
index e27a50bd02..ac564cea0f 100644
--- a/src/elements/content-explorer/ContentExplorer.tsx
+++ b/src/elements/content-explorer/ContentExplorer.tsx
@@ -64,6 +64,7 @@ import {
     VIEW_MODE_GRID,
 } from '../../constants';
 import type { ViewMode } from '../common/flowTypes';
+import type { ItemAction } from '../common/item';
 import type { Theme } from '../common/theming';
 import type { MetadataQuery, FieldsToShow } from '../../common/types/metadataQueries';
 import type { MetadataFieldValue } from '../../common/types/metadata';
@@ -116,6 +117,7 @@ export interface ContentExplorerProps {
     isSmall?: boolean;
     isTouch?: boolean;
     isVeryLarge?: boolean;
+    itemActions?: ItemAction[];
     language?: string;
     logoUrl?: string;
     measureRef?: (ref: Element | null) => void;
@@ -311,6 +313,8 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
      */
     componentWillUnmount() {
         this.clearCache();
+
+        document.removeEventListener('item-update', this.refreshCollection);
     }
 
     /**
@@ -335,6 +339,13 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             default:
                 this.fetchFolder(currentFolderId);
         }
+        
+        const pickerPortal = document.createElement('div');
+        pickerPortal.setAttribute('id', 'picker-portal');
+
+        this.rootElement.parentElement.appendChild(pickerPortal);
+
+        document.addEventListener('item-update', this.refreshCollection);
     }
 
     /**
@@ -1606,6 +1617,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             isMedium,
             isSmall,
             isTouch,
+            itemActions,
             language,
             logoUrl,
             measureRef,
@@ -1706,6 +1718,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                                 isMedium={isMedium}
                                 isSmall={isSmall}
                                 isTouch={isTouch}
+                                itemActions={itemActions}
                                 fieldsToShow={fieldsToShow}
                                 onItemClick={this.onItemClick}
                                 onItemDelete={this.delete}
diff --git a/src/elements/content-explorer/stories/ContentExplorer.stories.js b/src/elements/content-explorer/stories/ContentExplorer.stories.js
index 8345539832..90cb4372d4 100644
--- a/src/elements/content-explorer/stories/ContentExplorer.stories.js
+++ b/src/elements/content-explorer/stories/ContentExplorer.stories.js
@@ -1,6 +1,12 @@
 // @flow
 
+import * as React from 'react';
+import { render } from 'react-dom';
+import { IntlProvider } from 'react-intl';
+import Modal from 'react-modal';
+
 import ContentExplorer from '../ContentExplorer';
+import ContentPicker from '../../content-picker';
 import mockTheme from '../../common/__mocks__/mockTheme';
 
 export const basic = {};
@@ -32,6 +38,88 @@ export const withTheming = {
     },
 };
 
+export const withCustomActions = {
+    args: {
+        itemActions: [
+            { label: 'Alert', onAction: () => alert('This is an action!') },
+            { label: 'Download All Files', onAction: () => alert('This is an action!'), type: 'folder' },
+            {
+                filter: ({ extension }) => extension?.toUpperCase() === 'PDF',
+                label: 'Send Box Sign Request',
+                onAction: () => alert('This is an action!'),
+            },
+        ],
+    },
+};
+
+export const withMoveAction = {
+    args: {
+        itemActions: [
+            {
+                label: 'Move',
+                onAction: item => {
+                    const { id: itemId, type } = item;
+
+                    const container = document.createElement('picker-container');
+                    container.setAttribute('id', 'picker_' + Date.now());
+
+                    const portal = document.getElementById('picker-portal');
+                    portal.appendChild(container);
+
+                    const handleClosePicker = () => {
+                        portal.innerHTML = '';
+                    };
+
+                    const handleChooseFolder = async selection => {
+                        const { id: parentId } = selection[0];
+
+                        if (type === 'file' || type === 'folder') {
+                            await fetch(`https://api.box.com/2.0/${type}s/${itemId}`, {
+                                method: 'PUT',
+                                headers: {
+                                    Authorization: 'Bearer KwSEiDXeUAkt35ezmuKX5xO93ITe3xej',
+                                    'Content-Type': 'application/json',
+                                },
+                                body: JSON.stringify({ parent: { id: parentId } }),
+                            });
+                        }
+
+                        const event = new Event('item-update');
+                        document.dispatchEvent(event);
+
+                        handleClosePicker();
+                    };
+
+                    render(
+                        <Modal
+                            className="be-modal-dialog-content-full-bleed"
+                            isOpen
+                            overlayClassName="be-modal-dialog-overlay"
+                            parentSelector={() => container}
+                            portalClassName="be-modal"
+                        >
+                            <IntlProvider locale="en">
+                                <ContentPicker
+                                    canSetShareAccess={false}
+                                    maxSelectable={1}
+                                    onCancel={handleClosePicker}
+                                    onChoose={handleChooseFolder}
+                                    rootFolderId="310548011544"
+                                    token="KwSEiDXeUAkt35ezmuKX5xO93ITe3xej"
+                                    type="folder"
+                                />
+                            </IntlProvider>
+                        </Modal>,
+                        container,
+                    );
+                },
+            },
+        ],
+        rootFolderId: '310548011544',
+        token: 'KwSEiDXeUAkt35ezmuKX5xO93ITe3xej',
+    },
+};
+
 export default {
     title: 'Elements/ContentExplorer',
     component: ContentExplorer,
diff --git a/src/elements/content-picker/Content.js b/src/elements/content-picker/Content.js
index 4211fd6552..1b3baabdef 100644
--- a/src/elements/content-picker/Content.js
+++ b/src/elements/content-picker/Content.js
@@ -62,6 +62,7 @@ const Content = ({
     onShareAccessChange,
     onFocusChange,
     extensionsWhitelist,
+    itemActions,
 }: Props) => (
     <div className="bcp-content">
         {view === VIEW_ERROR || view === VIEW_SELECTED ? null : (
@@ -87,6 +88,7 @@ const Content = ({
                 onFocusChange={onFocusChange}
                 onShareAccessChange={onShareAccessChange}
                 extensionsWhitelist={extensionsWhitelist}
+                itemActions={itemActions}
             />
         )}
     </div>
diff --git a/src/elements/content-picker/ContentPicker.js b/src/elements/content-picker/ContentPicker.js
index 892b1c043b..b30ecffcf0 100644
--- a/src/elements/content-picker/ContentPicker.js
+++ b/src/elements/content-picker/ContentPicker.js
@@ -1211,6 +1211,7 @@ class ContentPicker extends Component<Props, State> {
             renderCustomActionButtons,
             showSelectedButton,
             theme,
+            itemActions,
         }: Props = this.props;
         const {
             view,
@@ -1278,6 +1279,7 @@ class ContentPicker extends Component<Props, State> {
                             onItemClick={this.onItemClick}
                             onFocusChange={this.onFocusChange}
                             onShareAccessChange={this.changeShareAccess}
+                            itemActions={itemActions}
                         />
                         <Footer
                             currentCollection={currentCollection}
diff --git a/src/elements/content-picker/ItemList.js b/src/elements/content-picker/ItemList.js
index b0abb8b8ec..49cd268c2c 100644
--- a/src/elements/content-picker/ItemList.js
+++ b/src/elements/content-picker/ItemList.js
@@ -20,6 +20,8 @@ import type { View, Collection, BoxItem } from '../../common/types/core';
 import '@box/react-virtualized/styles.css';
 import './ItemList.scss';
 
+import { ItemOptions } from '../common/item';
+
 type Props = {
     canSetShareAccess: boolean,
     currentCollection: Collection,
@@ -56,6 +58,7 @@ const ItemList = ({
     onFocusChange,
     currentCollection,
     tableRef,
+    itemActions,
 }: Props) => {
     const iconCell = iconCellRenderer();
     const nameCell = nameCellRenderer(rootId, view, onItemClick);
@@ -73,6 +76,9 @@ const ItemList = ({
         extensionsWhitelist,
         hasHitSelectionLimit,
     );
+    const itemOptions = ({ rowData }) => {
+        return <ItemOptions item={rowData} itemActions={itemActions} />;
+    };
     const { id, items = [] }: Collection = currentCollection;
     const rowCount: number = items.length;
 
@@ -161,6 +167,9 @@ const ItemList = ({
                                     flexShrink={0}
                                 />
                             )}
+                            {itemActions ? (
+                                <Column dataKey={'options'} cellRenderer={itemOptions} width={50} flexShrink={0} />
+                            ) : null}
                             <Column
                                 dataKey={FIELD_ID}
                                 cellRenderer={selectionCell}
diff --git a/src/elements/content-picker/stories/ContentPicker.stories.js b/src/elements/content-picker/stories/ContentPicker.stories.js
index 5e22d7e073..c3662e46b7 100644
--- a/src/elements/content-picker/stories/ContentPicker.stories.js
+++ b/src/elements/content-picker/stories/ContentPicker.stories.js
@@ -3,6 +3,20 @@ import ContentPicker from '../ContentPicker';
 
 export const basic = {};
 
+export const withCustomActions = {
+    args: {
+        itemActions: [
+            { label: 'Alert', onAction: () => alert('This is an action!') },
+            { label: 'Download All Files', onAction: () => alert('This is an action!'), type: 'folder' },
+            {
+                filter: ({ extension }) => extension?.toUpperCase() === 'PDF',
+                label: 'Send Box Sign Request',
+                onAction: () => alert('This is an action!'),
+            },
+        ],
+    },
+};
+
 export default {
     title: 'Elements/ContentPicker',
     component: ContentPicker,