@box/blueprint-web 9.17.0 → 9.18.0

package/lib-esm/index.css

@@ -2411,22 +2411,29 @@
 .bp_list_checkbox_module_checkbox--d79fa[data-disabled]{
   opacity:.4;
 }
-.bp_main_module_resizableTableContainer--3168d{
-  min-width:0;
+
+.bp_main_module_resizableTableContainer--c7e00{
+  min-width:100%;
 }
-.bp_main_module_resizableTableContainer--3168d table{
+.bp_main_module_resizableTableContainer--c7e00 table{
   --item-background:var(--background-background);
-  --outline-offset-focus-row:-0.25rem;
-  --outline-offset-focus-cell:-0.1875rem;
+  --outline-offset-focus-row:-.25rem;
+  --outline-offset-focus-cell:-.1875rem;
+  --outline-offset-focus-header:var(--space-1);
+  --outline-offset-focus-resizer:1px;
   --border-radius:var(--border-radius-datatable, var(--radius-4));
-  --outline-offset-focus-and-selected-row:var(--outline-offset-focus-and-selected-row-datatable, -0.35rem);
+  --outline-offset-focus-and-selected-row:var(--outline-offset-focus-and-selected-row-datatable, -.35rem);
   --outline-select-color:var(--outline-select-color-datatable, var(--box-blue-100));
   --outline-focus-color:var(--outline-focus-on-light);
   border-collapse:initial;
   border-spacing:0;
+  width:100% !important;
+}
+.bp_main_module_resizableTableContainer--c7e00 .bp_main_module_resizableTable--c7e00{
+  table-layout:auto !important;
 }
 
-.bp_main_module_tableHeader--3168d tr > th{
+.bp_main_module_tableHeader--c7e00 tr > th{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.75rem;
   font-weight:400;
@@ -2439,59 +2446,108 @@
   text-transform:none;
   white-space:nowrap;
 }
-.bp_main_module_tableHeader--3168d tr > th:first-child{
+.bp_main_module_tableHeader--c7e00 tr > th:first-child{
   border-radius:var(--border-radius) 0 0 var(--border-radius);
 }
-.bp_main_module_tableHeader--3168d tr > th:last-child{
+.bp_main_module_tableHeader--c7e00 tr > th:last-child{
   border-radius:0 var(--border-radius) var(--border-radius) 0;
 }
-.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d{
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00{
   color:var(--text-text-on-light-secondary);
   outline:none;
+  overflow:visible;
   text-align:left;
 }
-.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d .bp_main_module_columnName--3168d{
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_columnNameWrapper--c7e00{
+  align-items:center;
+  display:flex;
+  flex:1 0 0;
+  gap:var(--space-2);
+  overflow:hidden;
+}
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_columnNameWrapper--c7e00 .bp_main_module_columnName--c7e00{
+  min-width:0;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d[colspan]{
-  text-align:center;
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_columnNameWrapper--c7e00:focus-visible{
+  outline:none;
 }
-.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d[data-focus-visible]{
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_columnNameWrapper--c7e00.bp_main_module_focusVisible--c7e00{
   outline:var(--border-2) solid var(--outline-focus-color);
-  outline-offset:var(--outline-offset-focus-cell);
-  position:relative;
+  outline-offset:var(--outline-offset-focus-header);
+}
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00[colspan]{
+  text-align:center;
 }
-.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d .bp_main_module_rotateArrow--3168d{
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_rotateArrow--c7e00{
   transform:rotateX(180deg);
 }
-.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d .bp_main_module_sorted--3168d{
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_sorted--c7e00{
   color:var(--text-text-on-light);
   font-weight:bold;
 }
-.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d .bp_main_module_sortingFlexWrapper--3168d{
-  align-items:flex-end;
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_sortingFlexWrapper--c7e00{
+  align-items:center;
   display:flex;
   gap:var(--space-2);
   padding:var(--space-2) var(--space-3);
+  position:relative;
 }
-.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d .bp_main_module_sortingFlexWrapper--3168d svg{
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_sortingFlexWrapper--c7e00 svg{
   flex-shrink:0;
 }
-.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d:hover:not([data-sort-direction])[data-allows-sorting],.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d[data-focus-visible]:not([data-sort-direction])[data-allows-sorting]{
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_columnResizer--c7e00{
+  background-color:var(--border-tab-border-hover);
+  flex:0 0 auto;
+  height:var(--size-6);
+  position:absolute;
+  right:0;
+  touch-action:none;
+  width:var(--border-2);
+}
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_columnResizer--c7e00[data-resizable-direction=both]{
+  cursor:ew-resize;
+}
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_columnResizer--c7e00[data-resizable-direction=left]{
+  cursor:e-resize;
+}
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_columnResizer--c7e00[data-resizable-direction=right]{
+  cursor:w-resize;
+}
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00 .bp_main_module_columnResizer--c7e00[data-focus-visible]{
+  outline:var(--border-2) solid var(--outline-focus-color);
+  outline-offset:var(--outline-offset-focus-resizer);
+}
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00:last-of-type .bp_main_module_columnResizer--c7e00{
+  display:none;
+}
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00:hover:not([data-sort-direction])[data-allows-sorting],.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00[data-focus-visible]:not([data-sort-direction])[data-allows-sorting]{
   color:var(--text-text-on-light);
   font-weight:bold;
 }
-.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d:hover:not([data-sort-direction]) svg,.bp_main_module_tableHeader--3168d .bp_main_module_column--3168d[data-focus-visible]:not([data-sort-direction]) svg{
+.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00:hover:not([data-sort-direction]) svg,.bp_main_module_tableHeader--c7e00 .bp_main_module_column--c7e00[data-focus-visible]:not([data-sort-direction]) svg{
   transform:rotateX(180deg);
   visibility:visible;
 }
 
-.bp_main_module_tableBody--3168d[data-empty]{
+.bp_main_module_column--c7e00.bp_main_module_droppableColumn--c7e00{
+  min-width:160px;
+}
+
+.bp_main_module_column--c7e00.bp_main_module_actionColumn--c7e00{
+  min-width:1px;
+}
+
+.bp_main_module_column--c7e00.bp_main_module_hiddenColumn--c7e00{
+  display:none;
+}
+
+.bp_main_module_tableBody--c7e00[data-empty]{
   text-align:center;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00{
   background:var(--item-background);
   border-radius:var(--border-radius);
   color:var(--text-text-on-light);
@@ -2502,7 +2558,7 @@
   position:relative;
   transform:translateZ(0);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d::after{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00::after{
   background:#0000;
   border-top:var(--border-1) solid var(--gray-10);
   box-sizing:border-box;
@@ -2515,20 +2571,21 @@
   width:100%;
   z-index:999;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[aria-selected=true]{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[aria-selected=true]{
   --item-background:var(--box-blue-05);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[aria-selected=true]::after{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[aria-selected=true]::after{
   border:var(--border-2) solid var(--outline-select-color);
   border-radius:var(--border-radius);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[aria-selected=true] .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[aria-selected=true] .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00{
   opacity:1;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[aria-selected=true] .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d .bp_main_module_actionChildren--3168d{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[aria-selected=true] .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00 .bp_main_module_actionChildren--c7e00{
   display:none;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d .bp_main_module_cell--3168d{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00 .bp_main_module_cell--c7e00{
+  max-width:0;
   outline:none;
   overflow:hidden;
   padding:var(--space-2) var(--space-3);
@@ -2537,25 +2594,25 @@
   transform:translateZ(0);
   white-space:nowrap;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d .bp_main_module_cell--3168d[data-focus-visible]{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00 .bp_main_module_cell--c7e00[data-focus-visible]{
   outline:var(--border-2) solid var(--outline-focus-color);
   outline-offset:var(--outline-offset-focus-cell);
   position:relative;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d .bp_main_module_cell--3168d:first-child{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00 .bp_main_module_cell--c7e00:first-child{
   border-radius:var(--border-radius) 0 0 var(--border-radius);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d .bp_main_module_cell--3168d:last-child{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00 .bp_main_module_cell--c7e00:last-child{
   border-radius:0 var(--border-radius) var(--border-radius) 0;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d .bp_main_module_cell--3168d.bp_main_module_actions--3168d{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00 .bp_main_module_cell--c7e00.bp_main_module_actions--c7e00{
   overflow:unset;
   padding:0;
   position:sticky;
   right:0;
   width:var(--size-6);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00 .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00{
   align-items:center;
   background:var(--item-background);
   bottom:0;
@@ -2569,7 +2626,7 @@
   right:var(--size-4);
   top:0;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d::before{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00 .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00::before{
   box-shadow:-.25rem 0 .625rem .625rem var(--item-background);
   content:"";
   display:block;
@@ -2579,65 +2636,68 @@
   width:0;
   z-index:0;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d[data-state=open]{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00 .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00[data-state=open]{
   opacity:1;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d[data-state=open] .bp_main_module_actionChildren--3168d{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00 .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00[data-state=open] .bp_main_module_actionChildren--c7e00{
   display:block;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-dragging]{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00 .bp_main_module_cell--c7e00.bp_main_module_isCellHidden--c7e00{
+  display:none;
+}
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-dragging]{
   opacity:.5;
   transform:translateZ(0);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-focus-visible]{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-focus-visible]{
   outline:var(--border-2) solid var(--outline-focus-color);
   outline-offset:var(--outline-offset-focus-row);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-focus-visible][aria-selected=true]{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-focus-visible][aria-selected=true]{
   background:var(--item-background);
   outline-offset:var(--outline-offset-focus-and-selected-row);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d:last-child::after{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00:last-child::after{
   border-bottom:var(--border-1) solid var(--gray-10);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d:last-child[aria-selected=true]::after{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00:last-child[aria-selected=true]::after{
   border-bottom:var(--border-2) solid var(--outline-select-color);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d:focus-within,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-focus-visible],.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-hovered]{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00:focus-within,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-focus-visible],.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-hovered]{
   z-index:1;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d:focus-within:not([aria-selected=true])::after,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-focus-visible]:not([aria-selected=true])::after,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-hovered]:not([aria-selected=true])::after{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00:focus-within:not([aria-selected=true])::after,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-focus-visible]:not([aria-selected=true])::after,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-hovered]:not([aria-selected=true])::after{
   border-bottom:var(--border-1) solid #0000;
   border-radius:var(--border-radius);
   border-top:var(--border-1) solid #0000;
   box-shadow:var(--dropshadow-2);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d:focus-within:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-focus-visible]:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-hovered]:last-child:not([aria-selected=true])::after{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00:focus-within:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-focus-visible]:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-hovered]:last-child:not([aria-selected=true])::after{
   border-bottom:var(--border-1) solid #0000;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d:focus-within + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-focus-visible] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-hovered] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00:focus-within + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-focus-visible] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-hovered] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after{
   border-top:var(--border-1) solid #0000;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d:focus-within[data-dragging] .bp_main_module_actionsWrapper--3168d,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d:focus-within[data-pressed] .bp_main_module_actionsWrapper--3168d,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-focus-visible][data-dragging] .bp_main_module_actionsWrapper--3168d,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-focus-visible][data-pressed] .bp_main_module_actionsWrapper--3168d,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-hovered][data-dragging] .bp_main_module_actionsWrapper--3168d,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-hovered][data-pressed] .bp_main_module_actionsWrapper--3168d{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00:focus-within[data-dragging] .bp_main_module_actionsWrapper--c7e00,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00:focus-within[data-pressed] .bp_main_module_actionsWrapper--c7e00,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-focus-visible][data-dragging] .bp_main_module_actionsWrapper--c7e00,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-focus-visible][data-pressed] .bp_main_module_actionsWrapper--c7e00,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-hovered][data-dragging] .bp_main_module_actionsWrapper--c7e00,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-hovered][data-pressed] .bp_main_module_actionsWrapper--c7e00{
   opacity:1;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d:focus-within:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-focus-visible]:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-hovered]:not(:is([data-focus-visible], [aria-selected=true]))::after{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00:focus-within:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-focus-visible]:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-hovered]:not(:is([data-focus-visible], [aria-selected=true]))::after{
   border:var(--border-1) solid var(--gray-10);
   border-radius:var(--border-radius);
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d:focus-within .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-focus-visible] .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-hovered] .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00:focus-within .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-focus-visible] .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-hovered] .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00{
   opacity:1;
 }
-.bp_main_module_tableBody--3168d .bp_main_module_row--3168d:focus-within .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d .bp_main_module_actionChildren--3168d,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-focus-visible] .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d .bp_main_module_actionChildren--3168d,.bp_main_module_tableBody--3168d .bp_main_module_row--3168d[data-hovered] .bp_main_module_cell--3168d .bp_main_module_actionsWrapper--3168d .bp_main_module_actionChildren--3168d{
+.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00:focus-within .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00 .bp_main_module_actionChildren--c7e00,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-focus-visible] .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00 .bp_main_module_actionChildren--c7e00,.bp_main_module_tableBody--c7e00 .bp_main_module_row--c7e00[data-hovered] .bp_main_module_cell--c7e00 .bp_main_module_actionsWrapper--c7e00 .bp_main_module_actionChildren--c7e00{
   display:block;
 }
 @supports selector(:has(*)){
-  .bp_main_module_row--3168d[aria-selected=true] + .bp_main_module_dropIndicator--3168d + [aria-selected=true]::after,.bp_main_module_row--3168d[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--3168d:first-child,.bp_main_module_row--3168d[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--3168d:last-child,.bp_main_module_row--3168d[aria-selected=true] + [aria-selected=true]::after{
+  .bp_main_module_row--c7e00[aria-selected=true] + .bp_main_module_dropIndicator--c7e00 + [aria-selected=true]::after,.bp_main_module_row--c7e00[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--c7e00:first-child,.bp_main_module_row--c7e00[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--c7e00:last-child,.bp_main_module_row--c7e00[aria-selected=true] + [aria-selected=true]::after{
     border-start-end-radius:0;
     border-start-start-radius:0;
     border-top-width:var(--border-1);
   }
-  .bp_main_module_row--3168d[aria-selected=true]:has(+ .bp_main_module_dropIndicator--3168d + [aria-selected=true]) .bp_main_module_cell--3168d:last-child,.bp_main_module_row--3168d[aria-selected=true]:has(+ .bp_main_module_dropIndicator--3168d + [aria-selected=true])::after,.bp_main_module_row--3168d[aria-selected=true]:has(+ [aria-selected=true]) .bp_main_module_cell--3168d:first-child,.bp_main_module_row--3168d[aria-selected=true]:has(+ [aria-selected=true])::after{
+  .bp_main_module_row--c7e00[aria-selected=true]:has(+ .bp_main_module_dropIndicator--c7e00 + [aria-selected=true]) .bp_main_module_cell--c7e00:last-child,.bp_main_module_row--c7e00[aria-selected=true]:has(+ .bp_main_module_dropIndicator--c7e00 + [aria-selected=true])::after,.bp_main_module_row--c7e00[aria-selected=true]:has(+ [aria-selected=true]) .bp_main_module_cell--c7e00:first-child,.bp_main_module_row--c7e00[aria-selected=true]:has(+ [aria-selected=true])::after{
     border-bottom-width:var(--border-1);
     border-end-end-radius:0;
     border-end-start-radius:0;

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

@@ -5,6 +5,10 @@ export interface CellProps extends PrimitiveCellProps {
      * @deprecated
      */
     loading?: boolean;
+    /**
+     * Internal use only.
+     */
+    __ordinal?: number;
 }
 /**
  * Based on React Aria Components `Cell`

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

@@ -4,6 +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';
 
 /**
  * Based on React Aria Components `Cell`
@@ -14,15 +15,24 @@ const Cell = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     loading,
     className,
+    __ordinal,
     ...rest
   } = props;
+  const {
+    isColumnHidden
+  } = useColumnVisibilityContext();
+  // At this point, we know that the internal __ordinal prop exists
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const hideCell = isColumnHidden(__ordinal);
   const ghostState = jsx(Ghost, {
     width: "80%"
   });
   return jsx(Cell$1, {
     ...rest,
     ref: ref,
-    className: clsx(styles.cell, className),
+    className: clsx(styles.cell, {
+      [styles.isCellHidden]: hideCell
+    }, className),
     children: loading ? ghostState : children
   });
 });

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

@@ -3,7 +3,11 @@ import { type TableProps } from './table';
 import { type TableBodyProps } from './table-body';
 import { type ColumnProps } from './table-column';
 import { type TableHeaderProps } from './table-header';
-export declare const Table: import("react").ForwardRefExoticComponent<import("react-aria-components").TableProps & import("react").RefAttributes<HTMLTableElement>>;
+export declare const Table: import("react").ForwardRefExoticComponent<import("react-aria-components").TableProps & {
+    isColumnDroppingEnabled?: boolean;
+    isColumnResizingEnabled?: boolean;
+    onVisibleColumnsChange?: import("./utils/column-metadata").OnColumnVisibilityChange;
+} & 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 & {
     ref?: import("react").ForwardedRef<HTMLTableCellElement>;
@@ -13,7 +17,7 @@ export declare const TableBody: <T extends object>(props: TableBodyProps<T> & {
 }) => ReturnType<(<T_1 extends object>(props: TableBodyProps<T_1>, ref: import("react").ForwardedRef<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element)>;
 export declare const TableHeader: <T extends object>(props: TableHeaderProps<T> & {
     ref?: import("react").ForwardedRef<HTMLTableSectionElement>;
-}) => ReturnType<(<T_1 extends object>(props: TableHeaderProps<T_1>, ref: import("react").ForwardedRef<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element)>;
+}) => ReturnType<(<T_1 extends ColumnProps>(props: TableHeaderProps<T_1>, ref: import("react").ForwardedRef<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element)>;
 export declare const Row: <T extends object>(props: RowProps<T> & {
     ref?: import("react").ForwardedRef<HTMLTableRowElement>;
 }) => ReturnType<(<T_1 extends object>(props: RowProps<T_1>, ref: import("react").ForwardedRef<HTMLTableRowElement>) => import("react/jsx-runtime").JSX.Element)>;

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

@@ -6,6 +6,8 @@ import '@box/blueprint-web-assets/tokens/tokens';
 import 'clsx';
 import { Cell as Cell$1 } from './cell/cell.js';
 import 'lodash/noop';
+import '../utils/useBreakpoint.js';
+import 'react-aria';
 import '@ariakit/react';
 
 const Cell = Cell$1;

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

@@ -3,7 +3,11 @@ import { type TableProps } from './table';
 import { type TableBodyProps } from './table-body';
 import { type ColumnProps } from './table-column';
 import { type TableHeaderProps } from './table-header';
-export declare const Table: import("react").ForwardRefExoticComponent<import("react-aria-components").TableProps & import("react").RefAttributes<HTMLTableElement>>;
+export declare const Table: import("react").ForwardRefExoticComponent<import("react-aria-components").TableProps & {
+    isColumnDroppingEnabled?: boolean;
+    isColumnResizingEnabled?: boolean;
+    onVisibleColumnsChange?: import("./utils/column-metadata").OnColumnVisibilityChange;
+} & 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 & {
     ref?: import("react").ForwardedRef<HTMLTableCellElement>;
@@ -13,7 +17,7 @@ export declare const TableBody: <T extends object>(props: TableBodyProps<T> & {
 }) => ReturnType<(<T_1 extends object>(props: TableBodyProps<T_1>, ref: import("react").ForwardedRef<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element)>;
 export declare const TableHeader: <T extends object>(props: TableHeaderProps<T> & {
     ref?: import("react").ForwardedRef<HTMLTableSectionElement>;
-}) => ReturnType<(<T_1 extends object>(props: TableHeaderProps<T_1>, ref: import("react").ForwardedRef<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element)>;
+}) => ReturnType<(<T_1 extends ColumnProps>(props: TableHeaderProps<T_1>, ref: import("react").ForwardedRef<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element)>;
 export declare const Row: <T extends object>(props: RowProps<T> & {
     ref?: import("react").ForwardedRef<HTMLTableRowElement>;
 }) => ReturnType<(<T_1 extends object>(props: RowProps<T_1>, ref: import("react").ForwardedRef<HTMLTableRowElement>) => import("react/jsx-runtime").JSX.Element)>;

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

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

package/lib-esm/list-item/row.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { Row as Row$1, Collection } from 'react-aria-components';
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { Row as Row$1 } from 'react-aria-components';
 import styles from './main.module.js';
 
 /**
@@ -16,15 +16,24 @@ const RowInner = (props, ref) => {
     className,
     ...rest
   } = props;
+  let newChildren = children;
+  if (typeof children === 'function' && columns) {
+    newChildren = Array.from(columns).map(children);
+  }
+  const childrenWithOrdinals = Children.map(newChildren, (child, index) => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return child;
+    }
+    return /*#__PURE__*/cloneElement(child, {
+      __ordinal: index
+    });
+  });
   return jsx(Row$1, {
     ...rest,
     ref: ref,
     className: clsx(styles.row, className),
     id: id,
-    children: jsx(Collection, {
-      items: columns,
-      children: children
-    })
+    children: childrenWithOrdinals
   });
 };
 const Row = /*#__PURE__*/forwardRef(RowInner);

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

@@ -4,6 +4,15 @@ export interface ColumnProps extends PrimitiveColumnProps {
     hideHeader?: boolean;
     children: React.ReactNode;
     className?: string;
+    /**
+     * Determine whether the column is an action column (a column containing action cells).
+     * Must be set to `true` for action column if `isColumnDroppingEnabled` or `isColumnResizingEnabled` is enabled.
+     */
+    actionColumn?: boolean;
+    /**
+     * Internal use only.
+     */
+    __ordinal?: number;
 }
 /**
  * Based on React Aria Components `Column`

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

@@ -3,9 +3,13 @@ import { ArrowUp, ArrowDown } from '@box/blueprint-web-assets/icons/Fill';
 import { Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { Column as Column$1 } from 'react-aria-components';
+import { useFocusRing } from 'react-aria';
+import { Column as Column$1, ColumnResizer } from 'react-aria-components';
+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';
 
 function SortingArrowIcon({
   visibility = 'visible',
@@ -49,12 +53,41 @@ const ColumnInner = (props, ref) => {
     hideHeader,
     children,
     className,
+    __ordinal,
+    actionColumn,
     ...rest
   } = props;
+  const {
+    isColumnHidden,
+    isColumnResizable,
+    isColumnDroppingEnabled
+  } = useColumnVisibilityContext();
+  const breakpoint = useBreakpoint();
+  const isMobile = breakpoint <= Breakpoint.Medium;
+  // Workaround for issue where a mouse click triggers :focus-visible styles
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing();
+  // At this point, we know that the internal __ordinal prop exists
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const hideColumn = isColumnHidden(__ordinal);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const showResizer = isColumnResizable(__ordinal);
   return jsx(Column$1, {
     ...rest,
     ref: ref,
-    className: clsx(styles.column, className),
+    className: clsx(styles.column, {
+      [styles.hiddenColumn]: hideColumn
+    }, {
+      [styles.droppableColumn]: isColumnDroppingEnabled
+    }, {
+      [styles.actionColumn]: isColumnDroppingEnabled && actionColumn
+    }, className),
+    minWidth: isColumnDroppingEnabled ? 160 : rest.minWidth,
+    ...(isColumnDroppingEnabled && hideColumn === !isMobile ? {
+      width: '100%'
+    } : {}),
     children: ({
       allowsSorting,
       sortDirection
@@ -64,11 +97,21 @@ const ColumnInner = (props, ref) => {
       }),
       children: [hideHeader ? jsx(VisuallyHidden, {
         children: children
-      }) : jsx("span", {
-        className: styles.columnName,
-        children: children
-      }), !hideHeader && allowsSorting && jsx(SortIndicator, {
-        direction: sortDirection
+      }) : jsx(Focusable, {
+        children: jsxs("div", {
+          ...focusProps,
+          className: clsx(styles.columnNameWrapper, {
+            [styles.focusVisible]: isFocusVisible
+          }),
+          children: [jsx("span", {
+            className: styles.columnName,
+            children: children
+          }), allowsSorting && jsx(SortIndicator, {
+            direction: sortDirection
+          })]
+        })
+      }), !hideHeader && showResizer && jsx(ColumnResizer, {
+        className: styles.columnResizer
       })]
     })
   });

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

@@ -1,11 +1,12 @@
 import { type ForwardedRef } from 'react';
 import { type TableHeaderProps as PrimitiveTableHeaderProps } from 'react-aria-components';
+import { type ColumnProps } from './table-column';
 export type TableHeaderProps<T> = PrimitiveTableHeaderProps<T>;
 /**
  * Based on React Aria Components `TableHeader`
  * @see https://react-spectrum.adobe.com/react-aria/Table.html#tableheader
  */
-declare const TableHeaderInner: <T extends object>(props: TableHeaderProps<T>, ref: ForwardedRef<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeaderInner: <T extends ColumnProps>(props: TableHeaderProps<T>, ref: ForwardedRef<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const TableHeader: <T extends object>(props: TableHeaderProps<T> & {
     ref?: ForwardedRef<HTMLTableSectionElement>;
 }) => ReturnType<typeof TableHeaderInner>;

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

@@ -1,8 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { TableHeader as TableHeader$1, Collection } from 'react-aria-components';
+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';
 
 /**
  * Based on React Aria Components `TableHeader`
@@ -15,14 +16,44 @@ const TableHeaderInner = (props, ref) => {
     className,
     ...rest
   } = props;
+  const {
+    setColumnsMetadata
+  } = useColumnVisibilityContext();
+  const newChildren = useMemo(() => {
+    // If `children` is a function, we are dynamically generating header cells.
+    // We iterate over `columns` and call `children(column)` for each one,
+    // creating a `Column` component for each column in the table.
+    // This ensures we can later assign an `__ordinal` property to each column.
+    if (typeof children === 'function' && columns) {
+      return columns.map(children);
+    }
+    return children;
+  }, [children, columns]);
+  const childrenWithOrdinals = useMemo(() => {
+    return Children.map(newChildren, (child, index) => {
+      if (! /*#__PURE__*/isValidElement(child)) {
+        return child;
+      }
+      return /*#__PURE__*/cloneElement(child, {
+        __ordinal: index
+      });
+    });
+  }, [newChildren]);
+  const columnsMetadata = useMemo(() => {
+    return Children.toArray(childrenWithOrdinals).map(child => ({
+      // eslint-disable-next-line no-underscore-dangle
+      ordinal: child.props.__ordinal,
+      actionColumn: child.props.actionColumn
+    }));
+  }, [childrenWithOrdinals]);
+  useEffect(() => {
+    setColumnsMetadata(columnsMetadata);
+  }, [columnsMetadata, setColumnsMetadata]);
   return jsx(TableHeader$1, {
     ...rest,
     ref: ref,
     className: clsx(styles.tableHeader, className),
-    children: jsx(Collection, {
-      items: columns,
-      children: children
-    })
+    children: childrenWithOrdinals
   });
 };
 const TableHeader = /*#__PURE__*/forwardRef(TableHeaderInner);

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

@@ -1,7 +1,40 @@
 import { type TableProps as PrimitiveTableProps } from 'react-aria-components';
-export type TableProps = PrimitiveTableProps;
+import { type OnColumnVisibilityChange } from './utils/column-metadata';
+export type TableProps = PrimitiveTableProps & {
+    /**
+     * Setting this to true enables the column dropping functionality.
+     */
+    isColumnDroppingEnabled?: boolean;
+    /**
+     * Setting this to true enables the column resizing functionality.
+     */
+    isColumnResizingEnabled?: boolean;
+    /**
+     * Callback fired when the visibility of columns changes.
+     * @param columnVisibility - An object containing:
+     *   - `visibleColumns`: An array of column indexes that are currently visible.
+     *   - `hiddenColumns`: An array of column indexes that are currently hidden.
+     */
+    onVisibleColumnsChange?: OnColumnVisibilityChange;
+};
 /**
  * Based on React Aria Components `Table`
  * @see https://react-spectrum.adobe.com/react-aria/Table.html#table-1
  */
-export declare const Table: import("react").ForwardRefExoticComponent<PrimitiveTableProps & import("react").RefAttributes<HTMLTableElement>>;
+export declare const Table: import("react").ForwardRefExoticComponent<PrimitiveTableProps & {
+    /**
+     * Setting this to true enables the column dropping functionality.
+     */
+    isColumnDroppingEnabled?: boolean;
+    /**
+     * Setting this to true enables the column resizing functionality.
+     */
+    isColumnResizingEnabled?: boolean;
+    /**
+     * Callback fired when the visibility of columns changes.
+     * @param columnVisibility - An object containing:
+     *   - `visibleColumns`: An array of column indexes that are currently visible.
+     *   - `hiddenColumns`: An array of column indexes that are currently hidden.
+     */
+    onVisibleColumnsChange?: OnColumnVisibilityChange;
+} & import("react").RefAttributes<HTMLTableElement>>;

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

@@ -1,8 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import noop from 'lodash/noop';
-import { forwardRef } from 'react';
+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';
 
 /**
  * Based on React Aria Components `Table`
@@ -13,16 +15,29 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     className,
     onRowAction = noop,
+    onVisibleColumnsChange,
+    isColumnDroppingEnabled = false,
+    isColumnResizingEnabled = false,
     ...rest
   } = props;
-  return jsx(ResizableTableContainer, {
-    className: styles.resizableTableContainer,
-    children: jsx(Table$1, {
-      ...rest,
-      ref: ref,
-      className: className,
-      onRowAction: onRowAction,
-      children: children
+  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
+      })
     })
   });
 });

package/lib-esm/list-item/utils/column-metadata.d.ts

@@ -0,0 +1,10 @@
+export type Ordinal = number;
+export interface ColumnMetadata {
+    ordinal: Ordinal;
+    actionColumn?: boolean;
+}
+export type ColumnMetadataSet = Array<ColumnMetadata>;
+export type OnColumnVisibilityChange = (columnVisibility: {
+    visibleColumns: Ordinal[];
+    hiddenColumns: Ordinal[];
+}) => void;

package/lib-esm/list-item/utils/columnVisibilityContext.d.ts

@@ -0,0 +1,20 @@
+import { type MutableRefObject, type ReactNode } from 'react';
+import { type ColumnMetadataSet, type OnColumnVisibilityChange, type Ordinal } from './column-metadata';
+interface ColumnVisibilityContextValue {
+    isColumnHidden: (ordinal: Ordinal) => boolean;
+    setColumnsMetadata: (columnsMetadata: ColumnMetadataSet) => void;
+    isColumnResizable: (ordinal: Ordinal) => boolean;
+    columnsMetadata: ColumnMetadataSet;
+    isColumnDroppingEnabled: boolean;
+    isColumnResizingEnabled: boolean;
+}
+interface ColumnVisibilityProviderProps {
+    children: ReactNode;
+    containerRef: MutableRefObject<HTMLDivElement | null>;
+    isColumnDroppingEnabled: boolean;
+    isColumnResizingEnabled: boolean;
+    onVisibleColumnsChange?: OnColumnVisibilityChange;
+}
+export declare const ColumnVisibilityProvider: ({ children, containerRef, onVisibleColumnsChange, isColumnDroppingEnabled, isColumnResizingEnabled, }: ColumnVisibilityProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useColumnVisibilityContext: () => ColumnVisibilityContextValue;
+export {};

package/lib-esm/list-item/utils/columnVisibilityContext.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext } from 'react';
+import { useColumnVisibilityManager } from './useColumnVisibilityManager.js';
+
+const ColumnVisibilityContext = /*#__PURE__*/createContext(null);
+const ColumnVisibilityProvider = ({
+  children,
+  containerRef,
+  onVisibleColumnsChange,
+  isColumnDroppingEnabled,
+  isColumnResizingEnabled
+}) => {
+  const {
+    isColumnHidden,
+    setColumnsMetadata,
+    isColumnResizable,
+    columnsMetadata
+  } = useColumnVisibilityManager(containerRef, isColumnDroppingEnabled, isColumnResizingEnabled, onVisibleColumnsChange);
+  const value = {
+    isColumnHidden,
+    setColumnsMetadata,
+    isColumnResizable,
+    columnsMetadata,
+    isColumnDroppingEnabled,
+    isColumnResizingEnabled
+  };
+  return jsx(ColumnVisibilityContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useColumnVisibilityContext = () => {
+  const context = useContext(ColumnVisibilityContext);
+  if (context === null) {
+    throw new Error('useColumnVisibilityContext must be used within a ColumnVisibilityProvider');
+  }
+  return context;
+};
+
+export { ColumnVisibilityProvider, useColumnVisibilityContext };

package/lib-esm/list-item/utils/useColumnVisibilityManager.d.ts

@@ -0,0 +1,7 @@
+import { type ColumnMetadataSet, 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;
+};

package/lib-esm/list-item/utils/useColumnVisibilityManager.js

@@ -0,0 +1,84 @@
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useBreakpoint, Breakpoint } from '../../utils/useBreakpoint.js';
+import { useThrottledContainerResize } from './useThrottledContainerResize.js';
+
+const useColumnVisibilityManager = (containerRef, isColumnDroppingEnabled, isColumnResizingEnabled, onVisibleColumnsChange) => {
+  const containerWidth = useThrottledContainerResize(containerRef, isColumnDroppingEnabled);
+  const [columnsMetadata, setColumnsMetadata] = useState([]);
+  const minColumnWidth = 160;
+  const breakpoint = useBreakpoint();
+  const isMobile = breakpoint <= Breakpoint.Medium;
+  const maxVisibleColumns = useMemo(() => Math.floor(containerWidth / minColumnWidth - 1), [containerWidth]);
+  // Check whether the column and all its corresponding cells should be hidden based on the current container size
+  const isColumnHidden = useCallback(ordinal => {
+    // Do not hide any columns when dropping is disabled
+    if (!isColumnDroppingEnabled) {
+      return false;
+    }
+    const column = columnsMetadata[ordinal];
+    if (ordinal === 0 || column?.actionColumn === true) {
+      return false;
+    }
+    if (isMobile) {
+      return true;
+    }
+    // For remaining columns, hide those beyond maxVisibleColumns
+    return ordinal > maxVisibleColumns;
+  }, [columnsMetadata, isColumnDroppingEnabled, isMobile, maxVisibleColumns]);
+  const {
+    visibleColumns,
+    hiddenColumns
+  } = useMemo(() => {
+    const visible = [];
+    const hidden = [];
+    columnsMetadata.forEach(({
+      ordinal
+    }) => {
+      if (isColumnHidden(ordinal)) {
+        hidden.push(ordinal);
+      } else {
+        visible.push(ordinal);
+      }
+    });
+    return {
+      visibleColumns: visible,
+      hiddenColumns: hidden
+    };
+  }, [columnsMetadata, isColumnHidden]);
+  const isColumnResizable = useCallback(ordinal => {
+    const column = columnsMetadata[ordinal];
+    // Columns are not resizable when resizing is disabled
+    if (!isColumnResizingEnabled) {
+      return false;
+    }
+    // Columns are not resizable in mobile view
+    if (isColumnDroppingEnabled) {
+      if (isMobile) {
+        return false;
+      }
+    }
+    if (column?.actionColumn) {
+      return false;
+    }
+    // Check if it's the second-last visible column and the last visible column is an action column
+    const lastIndex = visibleColumns.length - 1;
+    const isSecondLastWithActionLast = visibleColumns[lastIndex - 1] === ordinal && columnsMetadata[visibleColumns[lastIndex]]?.actionColumn;
+    return !(visibleColumns[lastIndex] === ordinal || isSecondLastWithActionLast);
+  }, [columnsMetadata, isColumnDroppingEnabled, isColumnResizingEnabled, isMobile, visibleColumns]);
+  useEffect(() => {
+    if (onVisibleColumnsChange) {
+      onVisibleColumnsChange({
+        visibleColumns,
+        hiddenColumns
+      });
+    }
+  }, [visibleColumns, hiddenColumns, onVisibleColumnsChange]);
+  return {
+    isColumnHidden,
+    setColumnsMetadata,
+    isColumnResizable,
+    columnsMetadata
+  };
+};
+
+export { useColumnVisibilityManager };

package/lib-esm/list-item/utils/useThrottledContainerResize.d.ts

@@ -0,0 +1 @@
+export declare const useThrottledContainerResize: (containerRef: React.MutableRefObject<HTMLDivElement | null>, isColumnDroppingEnabled: boolean) => number;

package/lib-esm/list-item/utils/useThrottledContainerResize.js

@@ -0,0 +1,38 @@
+import noop from 'lodash/noop';
+import { useState, useRef, useEffect } from 'react';
+
+const useThrottledContainerResize = (containerRef, isColumnDroppingEnabled) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const animationFrameId = useRef(null);
+  useEffect(() => {
+    if (!containerRef.current || !isColumnDroppingEnabled) {
+      return noop;
+    }
+    const handleResize = () => {
+      if (animationFrameId.current !== null) {
+        cancelAnimationFrame(animationFrameId.current);
+      }
+      animationFrameId.current = requestAnimationFrame(() => {
+        if (containerRef.current) {
+          setContainerWidth(containerRef.current.getBoundingClientRect().width);
+        }
+      });
+    };
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry?.contentRect) {
+        handleResize();
+      }
+    });
+    observer.observe(containerRef.current);
+    return () => {
+      observer.disconnect();
+      if (animationFrameId.current !== null) {
+        cancelAnimationFrame(animationFrameId.current);
+      }
+    };
+  }, [containerRef, isColumnDroppingEnabled]);
+  return containerWidth;
+};
+
+export { useThrottledContainerResize };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.17.0",
+    "version": "9.18.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -24,7 +24,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.33.0",
+        "@box/blueprint-web-assets": "^4.33.1",
         "@internationalized/date": "^3.5.4",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -54,7 +54,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.8.2",
+        "@box/storybook-utils": "^0.8.3",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",
@@ -62,7 +62,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "2587fac4d881d68c8831d6e286a67860dc933160",
+    "gitHead": "a2056d2f579edc055a85156efe0e93414840445e",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "types": "lib-esm/index.d.ts",