demo custom actions in explorer and picker

.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 {

src/elements/common/item-grid/ItemGrid.tsx

@@ -7,27 +7,28 @@ 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;
 }
 
 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>
                 );
             })}

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;

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 };

src/elements/common/item-list/index.ts

@@ -0,0 +1 @@
+export { default } from './ItemList';

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;

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;
+};

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,14 +36,14 @@ const ItemOptions = ({
     canPreview = false,
     canRename = false,
     canShare = false,
-    isGridView = false,
     item,
     itemActions = [],
     onItemDelete = noop,
     onItemDownload = noop,
     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;

src/elements/common/item/types.ts

@@ -1,25 +1,26 @@
 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;
     onItemPreview?: (item: BoxItem) => void;
     onItemRename?: (item: BoxItem) => void;
     onItemSelect?: (item: BoxItem) => void;
     onItemShare?: (item: BoxItem) => void;
-};
+}