@box/blueprint-web 5.31.6 → 5.32.0

package/lib-esm/data-table/data-table-wrapper.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useRef } from 'react';
+import { useScroll } from '../util-components/scrollable-container/scrollable-container.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import styles from './data-table.module.js';
+
+const hideActionWrapperRightOffsetPx = 30;
+const DataTableWrapper = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const localRef = useRef(null);
+  const {
+    value: {
+      offsetTillEndX,
+      isScrolledX,
+      isScrolledY
+    },
+    onScrollThrottled
+  } = useScroll(localRef);
+  return jsx("div", {
+    ref: useForkRef(localRef, forwardedRef),
+    className: clsx({
+      [styles.hideActionWrapperRight]: offsetTillEndX <= hideActionWrapperRightOffsetPx,
+      [styles.isScrolledY]: isScrolledY,
+      [styles.isScrolledX]: isScrolledX
+    }, styles.dataTableWrapper, className),
+    onScroll: onScrollThrottled,
+    ...rest,
+    children: children
+  });
+});
+
+export { DataTableWrapper };

package/lib-esm/data-table/data-table.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"dataTableWrapper":"data-table-module_dataTableWrapper__VYLJf","isScrolledX":"data-table-module_isScrolledX__72L-a","isScrolledY":"data-table-module_isScrolledY__arf4n","hideActionWrapperRight":"data-table-module_hideActionWrapperRight__jjb50"};
+
+export { styles as default };

package/lib-esm/index.css

@@ -2845,6 +2845,116 @@
   border:var(--border-2) solid var(--outline-focus-on-light);
   padding:calc(var(--border-1) - var(--border-1)) calc(var(--space-2) - var(--border-1));
 }
+.scrollable-container-module_scrollableContainer__KAyOF{
+  overflow:auto;
+}
+
+.data-table-module_dataTableWrapper__VYLJf{
+  --border-radius-datatable:0;
+  --outline-offset-focus-and-selected-row-datatable:-0.35rem;
+  --outline-select-color-datatable:#0000;
+  --sticky-element-z-index:2;
+  height:100%;
+  overflow:auto;
+  scroll-padding-bottom:60px;
+  scroll-padding-left:100px;
+  scroll-padding-right:100px;
+  scroll-padding-top:60px;
+  width:100%;
+}
+.data-table-module_dataTableWrapper__VYLJf table > thead > tr{
+  background:var(--gray-white);
+  position:sticky;
+  top:0;
+  z-index:var(--sticky-element-z-index);
+}
+.data-table-module_dataTableWrapper__VYLJf table > thead > tr th:first-child{
+  background:inherit;
+  height:100%;
+  left:0;
+  position:sticky;
+  z-index:var(--sticky-element-z-index);
+}
+.data-table-module_dataTableWrapper__VYLJf table > thead > tr th:first-child[data-focus-visible]{
+  position:sticky;
+  z-index:var(--sticky-element-z-index);
+}
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr > td [data-actionswrapper]::after{
+  background:inherit;
+  content:"";
+  display:block;
+  height:100%;
+  left:var(--size-4);
+  position:absolute;
+  width:100%;
+  z-index:-1;
+}
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr > td:first-child{
+  background:inherit;
+  left:0;
+  position:sticky;
+  z-index:var(--sticky-element-z-index);
+}
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr > td:first-child[data-focus-visible]{
+  position:sticky;
+  z-index:var(--sticky-element-z-index);
+}
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr > td:first-child[data-focus-visible]::after{
+  display:none;
+}
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr > td:first-child::before{
+  background:inherit;
+  border-radius:unset;
+  box-sizing:border-box;
+  content:"";
+  height:inherit;
+  height:100%;
+  left:0;
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  width:var(--space-3);
+  width:calc(100% + var(--outline-offset-focus-row));
+  z-index:-1;
+}
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr > td:first-child::after{
+  background:inherit;
+  border-radius:unset;
+  box-sizing:border-box;
+  content:"";
+  height:inherit;
+  height:calc(100% + var(--outline-offset)*2);
+  left:100%;
+  pointer-events:none;
+  position:absolute;
+  top:50%;
+  transform:translate(-100%, -50%);
+  width:var(--space-3);
+}
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr[data-focus-visible]{
+  --outline-offset:var(--outline-offset-focus-row);
+}
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr[data-focus-visible][aria-selected=true]{
+  --outline-offset:var(--outline-offset-focus-and-selected-row);
+}
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr[data-focus-visible] > td:first-child{
+  background-clip:content-box;
+  outline:var(--border-2) solid var(--outline-focus-on-light);
+  outline-offset:var(--outline-offset);
+}
+
+.data-table-module_isScrolledX__72L-a tr td:first-child,.data-table-module_isScrolledX__72L-a tr th:first-child{
+  border-right:1px solid var(--border-divider-border);
+  box-shadow:10px 0 7px -4px var(--item-background);
+}
+
+.data-table-module_isScrolledY__arf4n table > thead > tr{
+  box-shadow:0 4px 6px -2px rgba(0,0,0,.039);
+}
+
+.data-table-module_hideActionWrapperRight__jjb50 table tbody > tr > td [data-actionswrapper]::after{
+  display:none;
+}
 
 .empty-state-module_emptyState__Qs2b2{
   align-items:center;
@@ -5322,7 +5432,4 @@ table.inline-table-module_inlineTable__Se38I tr:not(:last-child) td{
 }
 .text-button-module_textButton__blsjh:not(:disabled):active{
   color:var(--text-cta-link-pressed);
-}
-.scrollable-container-module_scrollableContainer__KAyOF{
-  overflow:auto;
 }

package/lib-esm/index.d.ts

@@ -16,6 +16,7 @@ export * from './checkbox';
 export * from './combobox';
 export * from './content-card';
 export * from './content-field';
+export * from './data-table/data-table-wrapper';
 export * from './empty-state';
 export * from './ghost';
 export * from './guided-tooltip';
@@ -51,5 +52,5 @@ export * from './text-area';
 export * from './text-button';
 export * from './tooltip';
 export * from './trigger-button';
-export * from './utils/useBreakpoint';
 export * from './util-components/scrollable-container/scrollable-container';
+export * from './utils/useBreakpoint';

package/lib-esm/index.js

@@ -17,6 +17,7 @@ export { Checkbox } from './checkbox/index.js';
 export { Combobox, Root } from './combobox/combobox.js';
 export { ContentCard } from './content-card/content-card.js';
 export { ContentField } from './content-field/content-field.js';
+export { DataTableWrapper } from './data-table/data-table-wrapper.js';
 export { EmptyState } from './empty-state/empty-state.js';
 export { Ghost } from './ghost/ghost.js';
 export { GuidedTooltip } from './guided-tooltip/guided-tooltip.js';
@@ -56,7 +57,7 @@ export { TextArea } from './text-area/text-area.js';
 export { TextButton } from './text-button/text-button.js';
 export { Tooltip, TooltipProvider } from './tooltip/tooltip.js';
 export { TriggerButton } from './trigger-button/trigger-button.js';
-export { Breakpoint, useBreakpoint } from './utils/useBreakpoint.js';
 export { ScrollableContainer, useScroll, useScrollContext } from './util-components/scrollable-container/scrollable-container.js';
+export { Breakpoint, useBreakpoint } from './utils/useBreakpoint.js';
 export { useNotification } from './primitives/notification/notification-provider.js';
 export { useTabs } from './primitives/tabs/use-tabs.js';

package/lib-esm/input-chip/input-chip.js

@@ -43,11 +43,11 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
         children: label
       }), jsx("span", {
         className: styles.deleteIcon,
+        onClick: onDelete,
         children: jsx(XMark, {
           "aria-hidden": true,
           "data-testid": "delete-icon",
           height: Size4,
-          onClick: onDelete,
           width: Size4
         })
       })]

package/lib-esm/util-components/interactive-icon/interactive-icon.js

@@ -1,17 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
 import { BoxBlue100 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
 import styles from './interactive-icon.module.js';
 
 const InteractiveIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     icon,
+    className,
     ...rest
   } = props;
   return jsx("button", {
     ...rest,
     ref: forwardedRef,
-    className: styles.interactiveIcon,
+    className: clsx(styles.interactiveIcon, className),
     type: "button",
     children: /*#__PURE__*/createElement(icon, {
       color: BoxBlue100,

package/lib-esm/util-components/text-with-info-badge/text-with-info-badge.js

@@ -21,12 +21,10 @@ const TextWithInfoBadge = props => {
       className: styles.badgeContainer,
       children: jsx(Tooltip, {
         content: infoText,
-        children: jsx("span", {
+        children: jsx(InteractiveIcon, {
+          "aria-label": infoBadgeAriaLabel,
           className: styles.badge,
-          children: jsx(InteractiveIcon, {
-            "aria-label": infoBadgeAriaLabel,
-            icon: InfoBadge
-          })
+          icon: InfoBadge
         })
       })
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "5.31.6",
+    "version": "5.32.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -27,7 +27,7 @@
         "**/*.scss"
     ],
     "dependencies": {
-        "@box/blueprint-web-assets": "^4.3.1",
+        "@box/blueprint-web-assets": "^4.4.0",
         "@ariakit/react": "0.3.14",
         "@ariakit/react-core": "0.3.14",
         "@radix-ui/react-accordion": "1.1.2",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.2"
     },
-    "gitHead": "f39040b937ca2efe6e1fe6b2eaf650f4b21ce277",
+    "gitHead": "8e4d56d62068b218d97a606d3b9eb3f3e6a47721",
     "module": "lib-esm/index.js",
     "type": "module",
     "main": "lib-esm/index.js",

package/lib-esm/data-table/index.d.ts

@@ -1 +0,0 @@
-export { DataTableWrapper } from './data-table-wrapper';