@box/blueprint-web 17.15.1 → 17.15.3

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

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import { forwardRef, useRef } from 'react';
 import { useTableOptions } from 'react-aria-components';
 import { ListCheckbox } from '../../util-components/list-checkbox/list-checkbox.js';
 import styles from '../main.module.js';
+import { useCustomTableOptions } from '../utils/custom-table-options-context/customTableOptionsContext.js';
 import { Cell } from './cell.js';
 
 /**
@@ -22,6 +24,9 @@ const ActionCell = /*#__PURE__*/forwardRef((props, ref) => {
     selectionBehavior,
     selectionMode
   } = useTableOptions();
+  const {
+    selectionVisibility
+  } = useCustomTableOptions();
   const divRef = useRef(null);
   // Allows consumer to sync changes to dropdown `open` state. Ensures actions are shown when dropdown is open
   // TODO(DSYS-1175): Once we have feature complete dropdown, this could be built-in.
@@ -31,13 +36,16 @@ const ActionCell = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
   const shouldShowCheckbox = selectionBehavior === 'toggle' && selectionMode === 'multiple';
+  const alwaysShowSelection = selectionVisibility === 'always' && shouldShowCheckbox;
   return jsx(Cell, {
     className: styles.actions,
     ...rest,
     ref: ref,
     children: !!children && !loading ? jsxs("div", {
       ref: divRef,
-      className: styles.actionsWrapper,
+      className: clsx(styles.actionsWrapper, {
+        [styles.alwaysShowSelection]: alwaysShowSelection
+      }),
       "data-actionswrapper": true,
       children: [jsx("div", {
         className: styles.actionChildren,

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

@@ -11,6 +11,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<import("re
     onSortChange?: (sortDescriptor: import("react-stately").SortDescriptor) => void;
     sortDescriptor?: import("react-stately").SortDescriptor;
     defaultSortDescriptor?: import("react-stately").SortDescriptor;
+    selectionVisibility?: import("./utils/custom-table-options-context/customTableOptionsContext").SelectionVisibility;
 } & 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 & {

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

@@ -1,9 +1,9 @@
 import 'react/jsx-runtime';
+import 'clsx';
 import 'react';
 import 'react-aria-components';
 import '@box/blueprint-web-assets/icons/Fill';
 import '@box/blueprint-web-assets/tokens/tokens';
-import 'clsx';
 import { Cell as Cell$1 } from './cell/cell.js';
 import '../utils/useBreakpoint.js';
 import '@box/blueprint-web-assets/icons/Medium';

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

@@ -11,6 +11,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<import("re
     onSortChange?: (sortDescriptor: import("react-stately").SortDescriptor) => void;
     sortDescriptor?: import("react-stately").SortDescriptor;
     defaultSortDescriptor?: import("react-stately").SortDescriptor;
+    selectionVisibility?: import("./utils/custom-table-options-context/customTableOptionsContext").SelectionVisibility;
 } & 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 & {

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

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

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

@@ -1,5 +1,6 @@
 import { type TableProps as PrimitiveTableProps, type ResizableTableContainerProps, type SortDescriptor } from 'react-aria-components';
 import { type OnColumnVisibilityChange } from './utils/column-visibility-context/column-metadata';
+import { type SelectionVisibility } from './utils/custom-table-options-context/customTableOptionsContext';
 export type TableProps = PrimitiveTableProps & {
     /**
      * Setting this to true enables the column dropping functionality.
@@ -32,6 +33,11 @@ export type TableProps = PrimitiveTableProps & {
      * Default sort descriptor when uncontrolled.
      */
     defaultSortDescriptor?: SortDescriptor;
+    /**
+     * Whether the row selection checkbox in `ActionCell` is always visible or only on hover/focus/selection.
+     * UXF-1344: `always` is not supported with `selectionMode` `single` (aka single select) yet. Omitted = hover.
+     */
+    selectionVisibility?: SelectionVisibility;
 };
 /**
  * Based on React Aria Components `Table`
@@ -69,4 +75,9 @@ export declare const Table: import("react").ForwardRefExoticComponent<PrimitiveT
      * Default sort descriptor when uncontrolled.
      */
     defaultSortDescriptor?: SortDescriptor;
+    /**
+     * Whether the row selection checkbox in `ActionCell` is always visible or only on hover/focus/selection.
+     * UXF-1344: `always` is not supported with `selectionMode` `single` (aka single select) yet. Omitted = hover.
+     */
+    selectionVisibility?: SelectionVisibility;
 } & import("react").RefAttributes<HTMLTableElement>>;

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

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { noop } from '../utils/noop.js';
 import styles from './main.module.js';
 import { ColumnVisibilityProvider, useColumnVisibilityContext } from './utils/column-visibility-context/columnVisibilityContext.js';
+import { CustomTableOptionsProvider } from './utils/custom-table-options-context/customTableOptionsContext.js';
 import { TableSortingProvider, useTableSortingContext } from './utils/table-sorting-context/tableSortingContext.js';
 
 /**
@@ -23,39 +24,43 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     defaultSortDescriptor,
     onSortChange,
     resizableTableContainerProps,
+    selectionVisibility,
     ...rest
   } = props;
   const resizableContainerRef = useRef(null);
   const dropdownHeaderContainerRef = useRef(null);
   const enableModernizedComponents = true;
-  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,
-          "data-modern": enableModernizedComponents,
-          ...resizableTableContainerProps,
-          children: jsx(TableInner, {
-            ref: ref,
-            ...rest,
-            className: className,
-            onRowAction: onRowAction,
-            children: children
+  return jsx(CustomTableOptionsProvider, {
+    selectionVisibility: selectionVisibility,
+    children: 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,
+            "data-modern": enableModernizedComponents,
+            ...resizableTableContainerProps,
+            children: jsx(TableInner, {
+              ref: ref,
+              ...rest,
+              className: className,
+              onRowAction: onRowAction,
+              children: children
+            })
           })
-        })
-      })]
+        })]
+      })
     })
   });
 });

package/dist/lib-esm/list-item/utils/custom-table-options-context/customTableOptionsContext.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export type SelectionVisibility = 'hover' | 'always';
+export interface CustomTableOptions {
+    selectionVisibility: SelectionVisibility;
+}
+interface CustomTableOptionsProviderProps {
+    children: ReactNode;
+    selectionVisibility?: SelectionVisibility;
+}
+export declare const CustomTableOptionsProvider: ({ children, selectionVisibility, }: CustomTableOptionsProviderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * RAC Table comes with a default context useTableOptions
+ * This context is for custom options not included in RAC Table
+ */
+export declare const useCustomTableOptions: () => CustomTableOptions;
+export {};

package/dist/lib-esm/list-item/utils/custom-table-options-context/customTableOptionsContext.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext } from 'react';
+
+const DEFAULT_CUSTOM_TABLE_OPTIONS = {
+  selectionVisibility: 'hover'
+};
+const CustomTableOptionsContext = /*#__PURE__*/createContext(null);
+const CustomTableOptionsProvider = ({
+  children,
+  selectionVisibility = DEFAULT_CUSTOM_TABLE_OPTIONS.selectionVisibility
+}) => jsx(CustomTableOptionsContext.Provider, {
+  value: {
+    selectionVisibility
+  },
+  children: children
+});
+/**
+ * RAC Table comes with a default context useTableOptions
+ * This context is for custom options not included in RAC Table
+ */
+const useCustomTableOptions = () => {
+  const context = useContext(CustomTableOptionsContext);
+  return context ?? DEFAULT_CUSTOM_TABLE_OPTIONS;
+};
+
+export { CustomTableOptionsProvider, useCustomTableOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "17.15.1",
+    "version": "17.15.3",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -55,7 +55,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.10.23",
+        "@box/blueprint-web-assets": "^5.10.25",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -86,7 +86,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.2.67",
+        "@box/storybook-utils": "^1.2.69",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",