@box/blueprint-web 9.20.0 → 10.1.0

package/dist/lib-esm/list-item/cell/cell.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { Cell as Cell$1 } from 'react-aria-components';
 import { Ghost } from '../../ghost/ghost.js';
 import styles from '../main.module.js';
-import { useColumnVisibilityContext } from '../utils/columnVisibilityContext.js';
+import { useColumnVisibilityContext } from '../utils/column-visibility-context/columnVisibilityContext.js';
 
 /**
  * Based on React Aria Components `Cell`

package/dist/lib-esm/list-item/index.d.ts

@@ -6,7 +6,10 @@ import { type TableHeaderProps } from './table-header';
 export declare const Table: import("react").ForwardRefExoticComponent<import("react-aria-components").TableProps & {
     isColumnDroppingEnabled?: boolean;
     isColumnResizingEnabled?: boolean;
-    onVisibleColumnsChange?: import("./utils/column-metadata").OnColumnVisibilityChange;
+    onVisibleColumnsChange?: import("./utils/column-visibility-context/column-metadata").OnColumnVisibilityChange;
+    onSortChange?: (sortDescriptor: import("react-aria-components").SortDescriptor) => void;
+    sortDescriptor?: import("react-aria-components").SortDescriptor;
+    defaultSortDescriptor?: import("react-aria-components").SortDescriptor;
 } & import("react").RefAttributes<HTMLTableElement>>;
 export declare const Cell: import("react").ForwardRefExoticComponent<import("./cell/cell").CellProps & import("react").RefAttributes<HTMLTableCellElement>>;
 export declare const Column: (props: ColumnProps & {
@@ -23,4 +26,4 @@ export declare const Row: <T extends object>(props: RowProps<T> & {
 }) => ReturnType<(<T_1 extends object>(props: RowProps<T_1>, ref: import("react").ForwardedRef<HTMLTableRowElement>) => import("react/jsx-runtime").JSX.Element)>;
 export declare const ActionCell: import("react").ForwardRefExoticComponent<import("./cell/action-cell").ActionCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
 export declare const DropIndicator: import("react").ForwardRefExoticComponent<import("react-aria-components").DropIndicatorProps & import("react").RefAttributes<HTMLElement>>;
-export type { RowProps, ColumnProps, TableProps, TableBodyProps, TableHeaderProps };
+export type { ColumnProps, RowProps, TableBodyProps, TableHeaderProps, TableProps };

package/dist/lib-esm/list-item/index.js

@@ -9,6 +9,21 @@ import 'lodash/noop';
 import '../utils/useBreakpoint.js';
 import 'react-aria';
 import '@ariakit/react';
+import 'react-dom';
+import '../button/button.js';
+import '../primitives/dropdown-menu/dropdown-menu-checkbox-item.js';
+import '../primitives/dropdown-menu/dropdown-menu-content.js';
+import '../primitives/dropdown-menu/dropdown-menu-group.js';
+import '../primitives/dropdown-menu/dropdown-menu-header.js';
+import '../primitives/dropdown-menu/dropdown-menu-item.js';
+import '../primitives/dropdown-menu/dropdown-menu-radio-group.js';
+import '../primitives/dropdown-menu/dropdown-menu-radio-select-item.js';
+import '../primitives/dropdown-menu/dropdown-menu-root.js';
+import '../primitives/dropdown-menu/dropdown-menu-separator.js';
+import '../primitives/dropdown-menu/dropdown-menu-sub-menu-content.js';
+import '../primitives/dropdown-menu/dropdown-menu-sub-menu-root.js';
+import '../primitives/dropdown-menu/dropdown-menu-sub-menu-trigger.js';
+import '../primitives/dropdown-menu/dropdown-menu-trigger.js';
 
 const Cell = Cell$1;
 

package/dist/lib-esm/list-item/list-item.d.ts

@@ -6,7 +6,10 @@ import { type TableHeaderProps } from './table-header';
 export declare const Table: import("react").ForwardRefExoticComponent<import("react-aria-components").TableProps & {
     isColumnDroppingEnabled?: boolean;
     isColumnResizingEnabled?: boolean;
-    onVisibleColumnsChange?: import("./utils/column-metadata").OnColumnVisibilityChange;
+    onVisibleColumnsChange?: import("./utils/column-visibility-context/column-metadata").OnColumnVisibilityChange;
+    onSortChange?: (sortDescriptor: import("react-aria-components").SortDescriptor) => void;
+    sortDescriptor?: import("react-aria-components").SortDescriptor;
+    defaultSortDescriptor?: import("react-aria-components").SortDescriptor;
 } & import("react").RefAttributes<HTMLTableElement>>;
 export declare const Cell: import("react").ForwardRefExoticComponent<import("./cell/cell").CellProps & import("react").RefAttributes<HTMLTableCellElement>>;
 export declare const Column: (props: ColumnProps & {
@@ -23,4 +26,4 @@ export declare const Row: <T extends object>(props: RowProps<T> & {
 }) => ReturnType<(<T_1 extends object>(props: RowProps<T_1>, ref: import("react").ForwardedRef<HTMLTableRowElement>) => import("react/jsx-runtime").JSX.Element)>;
 export declare const ActionCell: import("react").ForwardRefExoticComponent<import("./cell/action-cell").ActionCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
 export declare const DropIndicator: import("react").ForwardRefExoticComponent<import("react-aria-components").DropIndicatorProps & import("react").RefAttributes<HTMLElement>>;
-export type { RowProps, ColumnProps, TableProps, TableBodyProps, TableHeaderProps };
+export type { ColumnProps, RowProps, TableBodyProps, TableHeaderProps, TableProps };

package/dist/lib-esm/list-item/main.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"resizableTableContainer":"bp_main_module_resizableTableContainer--4f8ab","resizableTable":"bp_main_module_resizableTable--4f8ab","tableHeader":"bp_main_module_tableHeader--4f8ab","column":"bp_main_module_column--4f8ab","columnNameWrapper":"bp_main_module_columnNameWrapper--4f8ab","columnName":"bp_main_module_columnName--4f8ab","focusVisible":"bp_main_module_focusVisible--4f8ab","rotateArrow":"bp_main_module_rotateArrow--4f8ab","sorted":"bp_main_module_sorted--4f8ab","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--4f8ab","columnResizer":"bp_main_module_columnResizer--4f8ab","droppableColumn":"bp_main_module_droppableColumn--4f8ab","actionColumn":"bp_main_module_actionColumn--4f8ab","hiddenColumn":"bp_main_module_hiddenColumn--4f8ab","tableBody":"bp_main_module_tableBody--4f8ab","row":"bp_main_module_row--4f8ab","cell":"bp_main_module_cell--4f8ab","actionsWrapper":"bp_main_module_actionsWrapper--4f8ab","actionChildren":"bp_main_module_actionChildren--4f8ab","actions":"bp_main_module_actions--4f8ab","isCellHidden":"bp_main_module_isCellHidden--4f8ab","dropIndicator":"bp_main_module_dropIndicator--4f8ab"};
+var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--1316e","resizableTableContainer":"bp_main_module_resizableTableContainer--1316e","resizableTable":"bp_main_module_resizableTable--1316e","tableHeader":"bp_main_module_tableHeader--1316e","column":"bp_main_module_column--1316e","columnNameWrapper":"bp_main_module_columnNameWrapper--1316e","columnName":"bp_main_module_columnName--1316e","focusVisible":"bp_main_module_focusVisible--1316e","rotateArrow":"bp_main_module_rotateArrow--1316e","sorted":"bp_main_module_sorted--1316e","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--1316e","columnResizer":"bp_main_module_columnResizer--1316e","droppableColumn":"bp_main_module_droppableColumn--1316e","actionColumn":"bp_main_module_actionColumn--1316e","hiddenColumn":"bp_main_module_hiddenColumn--1316e","tableBody":"bp_main_module_tableBody--1316e","row":"bp_main_module_row--1316e","cell":"bp_main_module_cell--1316e","actionsWrapper":"bp_main_module_actionsWrapper--1316e","actionChildren":"bp_main_module_actionChildren--1316e","actions":"bp_main_module_actions--1316e","isCellHidden":"bp_main_module_isCellHidden--1316e","dropIndicator":"bp_main_module_dropIndicator--1316e"};
 
 export { styles as default };

package/dist/lib-esm/list-item/table-column.js

@@ -9,7 +9,7 @@ import { Focusable } from '../focusable/focusable.js';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
 import styles from './main.module.js';
-import { useColumnVisibilityContext } from './utils/columnVisibilityContext.js';
+import { useColumnVisibilityContext } from './utils/column-visibility-context/columnVisibilityContext.js';
 
 function SortingArrowIcon({
   visibility = 'visible',

package/dist/lib-esm/list-item/table-header-default.d.ts

@@ -0,0 +1,9 @@
+import { type ForwardedRef } from 'react';
+import { type TableHeaderProps as PrimitiveTableHeaderProps } from 'react-aria-components';
+import { type ColumnProps } from './table-column';
+export type TableDefaultHeaderProps<T> = PrimitiveTableHeaderProps<T>;
+declare const TableHeaderInner: <T extends ColumnProps>(props: TableDefaultHeaderProps<T>, ref: ForwardedRef<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableDefaultHeader: <T extends object>(props: TableDefaultHeaderProps<T> & {
+    ref?: ForwardedRef<HTMLTableSectionElement>;
+}) => ReturnType<typeof TableHeaderInner>;
+export {};

package/dist/lib-esm/list-item/table-header-default.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { TableHeader } from 'react-aria-components';
+import styles from './main.module.js';
+
+const TableHeaderInner = (props, ref) => {
+  const {
+    children,
+    columns,
+    className,
+    ...rest
+  } = props;
+  return jsx(TableHeader, {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.tableHeader, className),
+    children: children
+  });
+};
+const TableDefaultHeader = /*#__PURE__*/forwardRef(TableHeaderInner);
+
+export { TableDefaultHeader };

package/dist/lib-esm/list-item/table-header-dropdown.d.ts

@@ -0,0 +1,9 @@
+import { type ForwardedRef } from 'react';
+import { type TableHeaderProps as PrimitiveTableHeaderProps } from 'react-aria-components';
+import { type ColumnProps } from './table-column';
+export type TableDropdownHeaderProps<T> = PrimitiveTableHeaderProps<T>;
+declare const TableHeaderInner: <T extends ColumnProps>({ children, className, ...props }: TableDropdownHeaderProps<T>, ref: ForwardedRef<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableDropdownHeader: <T extends object>(props: TableDropdownHeaderProps<T> & {
+    ref?: ForwardedRef<HTMLTableSectionElement>;
+}) => ReturnType<typeof TableHeaderInner>;
+export {};

package/dist/lib-esm/list-item/table-header-dropdown.js

@@ -0,0 +1,66 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useCallback } from 'react';
+import { TableHeader } from 'react-aria-components';
+import { ArrowUp, ArrowDown } from '@box/blueprint-web-assets/icons/Fill';
+import { createPortal } from 'react-dom';
+import { Button } from '../button/button.js';
+import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
+import { useTableSortingContext } from './utils/table-sorting-context/tableSortingContext.js';
+
+const TableHeaderInner = ({
+  children,
+  className,
+  ...props
+}, ref) => {
+  const {
+    dropdownHeaderContainerRef,
+    sortDescriptor,
+    onSortDescriptorChange
+  } = useTableSortingContext();
+  const handleSelect = useCallback(columnId => onSortDescriptorChange({
+    column: columnId,
+    direction: sortDescriptor.direction
+  }), [onSortDescriptorChange, sortDescriptor.direction]);
+  const SortIcon = sortDescriptor?.direction === 'ascending' ? ArrowUp : ArrowDown;
+  const dropdownHeaderContainer = dropdownHeaderContainerRef.current;
+  const columnArray = Array.isArray(children) ? children : [children];
+  const columnLabel = columnArray.find(child => child?.props?.id === sortDescriptor.column)?.props.children || columnArray[0]?.props.children;
+  const createSelectHandler = useCallback(columnId => () => handleSelect(columnId), [handleSelect]);
+  return jsxs(Fragment, {
+    children: [jsx(TableHeader, {
+      ...props,
+      ref: ref,
+      style: {
+        display: 'none'
+      },
+      children: children
+    }), dropdownHeaderContainer && /*#__PURE__*/createPortal(jsxs(DropdownMenu.Root, {
+      children: [jsx(DropdownMenu.Trigger, {
+        children: jsx(Button, {
+          "aria-label": "sort-by",
+          "aria-sort": sortDescriptor.direction === 'ascending' ? 'ascending' : 'descending',
+          icon: SortIcon,
+          size: "small",
+          variant: "secondary",
+          children: columnLabel
+        })
+      }), jsx(DropdownMenu.Content, {
+        align: "start",
+        children: columnArray?.map(child => {
+          if (child.props.actionColumn) {
+            return null;
+          }
+          return jsx(DropdownMenu.Item
+          // eslint-disable-next-line no-underscore-dangle
+          , {
+            onSelect: createSelectHandler(child.props.id),
+            children: child.props.children
+          }, child.props.__ordinal);
+        })
+      })]
+    }), dropdownHeaderContainer)]
+  });
+};
+const TableDropdownHeader = /*#__PURE__*/forwardRef(TableHeaderInner);
+
+export { TableDropdownHeader };

package/dist/lib-esm/list-item/table-header.js

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, useMemo, Children, isValidElement, cloneElement, useEffect } from 'react';
-import { TableHeader as TableHeader$1 } from 'react-aria-components';
 import styles from './main.module.js';
-import { useColumnVisibilityContext } from './utils/columnVisibilityContext.js';
+import { TableDefaultHeader } from './table-header-default.js';
+import { TableDropdownHeader } from './table-header-dropdown.js';
+import { useColumnVisibilityContext } from './utils/column-visibility-context/columnVisibilityContext.js';
 
 /**
  * Based on React Aria Components `TableHeader`
@@ -17,7 +18,8 @@ const TableHeaderInner = (props, ref) => {
     ...rest
   } = props;
   const {
-    setColumnsMetadata
+    setColumnsMetadata,
+    headerVariant
   } = useColumnVisibilityContext();
   const newChildren = useMemo(() => {
     // If `children` is a function, we are dynamically generating header cells.
@@ -49,7 +51,9 @@ const TableHeaderInner = (props, ref) => {
   useEffect(() => {
     setColumnsMetadata(columnsMetadata);
   }, [columnsMetadata, setColumnsMetadata]);
-  return jsx(TableHeader$1, {
+  // When column dropping is enabled, in mobile mode, the button with dropdown options for each column replaces the table header.
+  const Header = headerVariant === 'table-dropdown-header' ? TableDropdownHeader : TableDefaultHeader;
+  return jsx(Header, {
     ...rest,
     ref: ref,
     className: clsx(styles.tableHeader, className),

package/dist/lib-esm/list-item/table.d.ts

@@ -1,5 +1,5 @@
-import { type TableProps as PrimitiveTableProps } from 'react-aria-components';
-import { type OnColumnVisibilityChange } from './utils/column-metadata';
+import { type TableProps as PrimitiveTableProps, type SortDescriptor } from 'react-aria-components';
+import { type OnColumnVisibilityChange } from './utils/column-visibility-context/column-metadata';
 export type TableProps = PrimitiveTableProps & {
     /**
      * Setting this to true enables the column dropping functionality.
@@ -16,6 +16,18 @@ export type TableProps = PrimitiveTableProps & {
      *   - `hiddenColumns`: An array of column indexes that are currently hidden.
      */
     onVisibleColumnsChange?: OnColumnVisibilityChange;
+    /**
+     * Callback fired when the sort changes.
+     */
+    onSortChange?: (sortDescriptor: SortDescriptor) => void;
+    /**
+     * Sort descriptor to manage sorting state.
+     */
+    sortDescriptor?: SortDescriptor;
+    /**
+     * Default sort descriptor when uncontrolled.
+     */
+    defaultSortDescriptor?: SortDescriptor;
 };
 /**
  * Based on React Aria Components `Table`
@@ -37,4 +49,16 @@ export declare const Table: import("react").ForwardRefExoticComponent<PrimitiveT
      *   - `hiddenColumns`: An array of column indexes that are currently hidden.
      */
     onVisibleColumnsChange?: OnColumnVisibilityChange;
+    /**
+     * Callback fired when the sort changes.
+     */
+    onSortChange?: (sortDescriptor: SortDescriptor) => void;
+    /**
+     * Sort descriptor to manage sorting state.
+     */
+    sortDescriptor?: SortDescriptor;
+    /**
+     * Default sort descriptor when uncontrolled.
+     */
+    defaultSortDescriptor?: SortDescriptor;
 } & import("react").RefAttributes<HTMLTableElement>>;

package/dist/lib-esm/list-item/table.js

@@ -1,10 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import noop from 'lodash/noop';
 import { forwardRef, useRef } from 'react';
 import { ResizableTableContainer, Table as Table$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import styles from './main.module.js';
-import { ColumnVisibilityProvider } from './utils/columnVisibilityContext.js';
+import { ColumnVisibilityProvider, useColumnVisibilityContext } from './utils/column-visibility-context/columnVisibilityContext.js';
+import { TableSortingProvider, useTableSortingContext } from './utils/table-sorting-context/tableSortingContext.js';
 
 /**
  * Based on React Aria Components `Table`
@@ -18,28 +19,67 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     onVisibleColumnsChange,
     isColumnDroppingEnabled = false,
     isColumnResizingEnabled = false,
+    sortDescriptor,
+    defaultSortDescriptor,
+    onSortChange,
     ...rest
   } = props;
-  const containerRef = useRef(null);
-  return jsx(ColumnVisibilityProvider, {
-    containerRef: containerRef,
-    isColumnDroppingEnabled: isColumnDroppingEnabled,
-    isColumnResizingEnabled: isColumnResizingEnabled,
-    onVisibleColumnsChange: onVisibleColumnsChange,
-    children: jsx(ResizableTableContainer, {
-      ref: containerRef,
-      className: styles.resizableTableContainer,
-      children: jsx(Table$1, {
-        ...rest,
-        ref: ref,
-        className: clsx({
-          [styles.resizableTable]: isColumnResizingEnabled || isColumnDroppingEnabled
-        }, className),
-        onRowAction: onRowAction,
-        children: children
-      })
+  const resizableContainerRef = useRef(null);
+  const dropdownHeaderContainerRef = useRef(null);
+  return jsx(TableSortingProvider, {
+    defaultSortDescriptor: defaultSortDescriptor,
+    dropdownHeaderContainerRef: dropdownHeaderContainerRef,
+    onSortChange: onSortChange,
+    sortDescriptor: sortDescriptor,
+    children: jsxs("div", {
+      className: styles.tableSortingContainer,
+      children: [jsx("div", {
+        ref: dropdownHeaderContainerRef
+      }), jsx(ColumnVisibilityProvider, {
+        containerRef: resizableContainerRef,
+        isColumnDroppingEnabled: isColumnDroppingEnabled,
+        isColumnResizingEnabled: isColumnResizingEnabled,
+        onVisibleColumnsChange: onVisibleColumnsChange,
+        children: jsx(ResizableTableContainer, {
+          ref: resizableContainerRef,
+          className: styles.resizableTableContainer,
+          children: jsx(TableInner, {
+            ref: ref,
+            ...rest,
+            className: className,
+            onRowAction: onRowAction,
+            children: children
+          })
+        })
+      })]
     })
   });
 });
+const TableInner = /*#__PURE__*/forwardRef(({
+  className,
+  onRowAction,
+  children,
+  ...rest
+}, ref) => {
+  const {
+    sortDescriptor,
+    onSortDescriptorChange
+  } = useTableSortingContext();
+  const {
+    isColumnResizingEnabled,
+    isColumnDroppingEnabled
+  } = useColumnVisibilityContext();
+  return jsx(Table$1, {
+    ...rest,
+    ref: ref,
+    className: clsx({
+      [styles.resizableTable]: isColumnResizingEnabled || isColumnDroppingEnabled
+    }, className),
+    onRowAction: onRowAction,
+    onSortChange: onSortDescriptorChange,
+    sortDescriptor: sortDescriptor,
+    children: children
+  });
+});
 
 export { Table };

package/dist/lib-esm/list-item/utils/{column-metadata.d.ts → column-visibility-context/column-metadata.d.ts}

@@ -3,6 +3,7 @@ export interface ColumnMetadata {
     ordinal: Ordinal;
     actionColumn?: boolean;
 }
+export type HeaderVariant = 'table-default-header' | 'table-dropdown-header';
 export type ColumnMetadataSet = Array<ColumnMetadata>;
 export type OnColumnVisibilityChange = (columnVisibility: {
     visibleColumns: Ordinal[];

package/dist/lib-esm/list-item/utils/{columnVisibilityContext.d.ts → column-visibility-context/columnVisibilityContext.d.ts}

@@ -1,5 +1,5 @@
 import { type MutableRefObject, type ReactNode } from 'react';
-import { type ColumnMetadataSet, type OnColumnVisibilityChange, type Ordinal } from './column-metadata';
+import { type ColumnMetadataSet, type HeaderVariant, type OnColumnVisibilityChange, type Ordinal } from './column-metadata';
 interface ColumnVisibilityContextValue {
     isColumnHidden: (ordinal: Ordinal) => boolean;
     setColumnsMetadata: (columnsMetadata: ColumnMetadataSet) => void;
@@ -7,6 +7,7 @@ interface ColumnVisibilityContextValue {
     columnsMetadata: ColumnMetadataSet;
     isColumnDroppingEnabled: boolean;
     isColumnResizingEnabled: boolean;
+    headerVariant: HeaderVariant;
 }
 interface ColumnVisibilityProviderProps {
     children: ReactNode;

package/dist/lib-esm/list-item/utils/{columnVisibilityContext.js → column-visibility-context/columnVisibilityContext.js}

@@ -14,7 +14,8 @@ const ColumnVisibilityProvider = ({
     isColumnHidden,
     setColumnsMetadata,
     isColumnResizable,
-    columnsMetadata
+    columnsMetadata,
+    headerVariant
   } = useColumnVisibilityManager(containerRef, isColumnDroppingEnabled, isColumnResizingEnabled, onVisibleColumnsChange);
   const value = {
     isColumnHidden,
@@ -22,7 +23,8 @@ const ColumnVisibilityProvider = ({
     isColumnResizable,
     columnsMetadata,
     isColumnDroppingEnabled,
-    isColumnResizingEnabled
+    isColumnResizingEnabled,
+    headerVariant
   };
   return jsx(ColumnVisibilityContext.Provider, {
     value: value,

package/dist/lib-esm/list-item/utils/{useColumnVisibilityManager.d.ts → column-visibility-context/useColumnVisibilityManager.d.ts}

@@ -1,7 +1,8 @@
-import { type ColumnMetadataSet, type OnColumnVisibilityChange, type Ordinal } from './column-metadata';
+import { type ColumnMetadataSet, type HeaderVariant, type OnColumnVisibilityChange, type Ordinal } from './column-metadata';
 export declare const useColumnVisibilityManager: (containerRef: React.MutableRefObject<HTMLDivElement | null>, isColumnDroppingEnabled: boolean, isColumnResizingEnabled: boolean, onVisibleColumnsChange?: OnColumnVisibilityChange) => {
     isColumnHidden: (ordinal: Ordinal) => boolean;
     setColumnsMetadata: import("react").Dispatch<import("react").SetStateAction<ColumnMetadataSet>>;
     isColumnResizable: (ordinal: Ordinal) => boolean;
     columnsMetadata: ColumnMetadataSet;
+    headerVariant: HeaderVariant;
 };

package/dist/lib-esm/list-item/utils/{useColumnVisibilityManager.js → column-visibility-context/useColumnVisibilityManager.js}

@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback, useEffect } from 'react';
-import { useBreakpoint, Breakpoint } from '../../utils/useBreakpoint.js';
+import { useBreakpoint, Breakpoint } from '../../../utils/useBreakpoint.js';
 import { useThrottledContainerResize } from './useThrottledContainerResize.js';
 
 const useColumnVisibilityManager = (containerRef, isColumnDroppingEnabled, isColumnResizingEnabled, onVisibleColumnsChange) => {
@@ -25,6 +25,12 @@ const useColumnVisibilityManager = (containerRef, isColumnDroppingEnabled, isCol
     // For remaining columns, hide those beyond maxVisibleColumns
     return ordinal > maxVisibleColumns;
   }, [columnsMetadata, isColumnDroppingEnabled, isMobile, maxVisibleColumns]);
+  const headerVariant = useMemo(() => {
+    if (isColumnDroppingEnabled && isMobile) {
+      return 'table-dropdown-header';
+    }
+    return 'table-default-header';
+  }, [isColumnDroppingEnabled, isMobile]);
   const {
     visibleColumns,
     hiddenColumns
@@ -34,7 +40,9 @@ const useColumnVisibilityManager = (containerRef, isColumnDroppingEnabled, isCol
     columnsMetadata.forEach(({
       ordinal
     }) => {
-      if (isColumnHidden(ordinal)) {
+      if (headerVariant === 'table-dropdown-header') {
+        hidden.push(ordinal);
+      } else if (isColumnHidden(ordinal)) {
         hidden.push(ordinal);
       } else {
         visible.push(ordinal);
@@ -44,7 +52,7 @@ const useColumnVisibilityManager = (containerRef, isColumnDroppingEnabled, isCol
       visibleColumns: visible,
       hiddenColumns: hidden
     };
-  }, [columnsMetadata, isColumnHidden]);
+  }, [columnsMetadata, isColumnHidden, headerVariant]);
   const isColumnResizable = useCallback(ordinal => {
     const column = columnsMetadata[ordinal];
     // Columns are not resizable when resizing is disabled
@@ -77,7 +85,8 @@ const useColumnVisibilityManager = (containerRef, isColumnDroppingEnabled, isCol
     isColumnHidden,
     setColumnsMetadata,
     isColumnResizable,
-    columnsMetadata
+    columnsMetadata,
+    headerVariant
   };
 };
 

package/dist/lib-esm/list-item/utils/table-sorting-context/tableSortingContext.d.ts

@@ -0,0 +1,17 @@
+import { type MutableRefObject, type ReactNode } from 'react';
+import { type SortDescriptor } from 'react-aria-components';
+interface TableSortingContextValue {
+    sortDescriptor: SortDescriptor;
+    onSortDescriptorChange: (newSortDescriptor: SortDescriptor) => void;
+    dropdownHeaderContainerRef: MutableRefObject<HTMLDivElement | null>;
+}
+interface TableSortingProviderProps {
+    children: ReactNode;
+    sortDescriptor?: SortDescriptor;
+    defaultSortDescriptor?: SortDescriptor;
+    onSortChange?: (sortDescriptor: SortDescriptor) => void;
+    dropdownHeaderContainerRef: MutableRefObject<HTMLDivElement | null>;
+}
+export declare const TableSortingProvider: ({ children, sortDescriptor, defaultSortDescriptor, onSortChange, dropdownHeaderContainerRef, }: TableSortingProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useTableSortingContext: () => TableSortingContextValue;
+export {};

package/dist/lib-esm/list-item/utils/table-sorting-context/tableSortingContext.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext } from 'react';
+import { useSortingTableManager } from './useSortingTableManager.js';
+
+const TableSortingContext = /*#__PURE__*/createContext(null);
+const TableSortingProvider = ({
+  children,
+  sortDescriptor,
+  defaultSortDescriptor,
+  onSortChange,
+  dropdownHeaderContainerRef
+}) => {
+  const {
+    sortDescriptor: sortedDescriptor,
+    onSortDescriptorChange
+  } = useSortingTableManager({
+    sortDescriptor,
+    defaultSortDescriptor,
+    onSortChange
+  });
+  const value = {
+    dropdownHeaderContainerRef,
+    sortDescriptor: sortedDescriptor || {
+      column: '',
+      direction: 'ascending'
+    },
+    onSortDescriptorChange
+  };
+  return jsx(TableSortingContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useTableSortingContext = () => {
+  const context = useContext(TableSortingContext);
+  if (context === null) {
+    throw new Error('useTableSortingContext must be used within a TableSortingProvider');
+  }
+  return context;
+};
+
+export { TableSortingProvider, useTableSortingContext };

package/dist/lib-esm/list-item/utils/table-sorting-context/useSortingTableManager.d.ts

@@ -0,0 +1,9 @@
+import { type SortDescriptor } from 'react-aria-components';
+export declare const useSortingTableManager: ({ sortDescriptor: propSortDescriptor, defaultSortDescriptor, onSortChange, }: {
+    sortDescriptor?: SortDescriptor;
+    defaultSortDescriptor?: SortDescriptor;
+    onSortChange?: (sortDescriptor: SortDescriptor) => void;
+}) => {
+    sortDescriptor: SortDescriptor | undefined;
+    onSortDescriptorChange: (newSortDescriptor: SortDescriptor) => void;
+};

package/dist/lib-esm/list-item/utils/table-sorting-context/useSortingTableManager.js

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+import { useControllableState } from '../../../utils/useControllableState.js';
+
+const useSortingTableManager = ({
+  sortDescriptor: propSortDescriptor,
+  defaultSortDescriptor,
+  onSortChange
+}) => {
+  const defaultSort = defaultSortDescriptor || {
+    column: '',
+    direction: 'descending'
+  };
+  const [sortDescriptor, setSortDescriptor] = useControllableState({
+    prop: propSortDescriptor,
+    defaultProp: defaultSort,
+    onChange: onSortChange
+  });
+  const onSortDescriptorChange = useCallback(newSortDescriptor => {
+    const isCurrentlySorted = sortDescriptor?.column === newSortDescriptor.column;
+    const nextDirection = isCurrentlySorted && sortDescriptor?.direction === 'ascending' ? 'descending' : 'ascending';
+    const updatedSortDescriptor = {
+      ...newSortDescriptor,
+      direction: nextDirection
+    };
+    if (!propSortDescriptor) {
+      setSortDescriptor(updatedSortDescriptor);
+    }
+    onSortChange?.(updatedSortDescriptor);
+  }, [propSortDescriptor, sortDescriptor, setSortDescriptor, onSortChange]);
+  return {
+    sortDescriptor,
+    onSortDescriptorChange
+  };
+};
+
+export { useSortingTableManager };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.20.0",
+    "version": "10.1.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {