@box/blueprint-web 6.2.0 → 6.4.0

package/lib-esm/data-table/cell/sticky-cell.js

@@ -19,12 +19,12 @@ const StickyCell = /*#__PURE__*/forwardRef((props, ref) => {
     className: clsx(styles.stickyCell, className),
     ...rest,
     children: [jsx("div", {
-      className: styles.stickyCellLeft
+      className: styles.stickyCellBelow
     }), jsx("div", {
       className: styles.childrenWrapper,
       children: children
     }), jsx("div", {
-      className: styles.stickyCellRight
+      className: styles.stickyCellOuterLeft
     }), jsx("div", {
       className: clsx(styles.verticalBar, {
         [styles.isScrolledX]: isScrolledX

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

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"stickyCell":"sticky-cell-module_stickyCell__-Rl0x","childrenWrapper":"sticky-cell-module_childrenWrapper__qjguw","verticalBar":"sticky-cell-module_verticalBar__AgXfU","isScrolledX":"sticky-cell-module_isScrolledX__xcMJ6","stickyCellLeft":"sticky-cell-module_stickyCellLeft__F3YAG","stickyCellRight":"sticky-cell-module_stickyCellRight__yQjUM"};
+var styles = {"stickyCell":"sticky-cell-module_stickyCell__-Rl0x","childrenWrapper":"sticky-cell-module_childrenWrapper__qjguw","verticalBar":"sticky-cell-module_verticalBar__AgXfU","isScrolledX":"sticky-cell-module_isScrolledX__xcMJ6","stickyCellBelow":"sticky-cell-module_stickyCellBelow__BKRdm","stickyCellOuterLeft":"sticky-cell-module_stickyCellOuterLeft__tai5-"};
 
 export { styles as default };

package/lib-esm/guided-tooltip/guided-tooltip-body.d.ts

@@ -3,7 +3,7 @@ import { type GuidedTooltipTextProps, type GuidedTooltipBodyProps } from './type
 /**
  * The component to show the text of Guided Tooltip.
  */
-export declare const GuidedTooltipText: ({ children }: GuidedTooltipTextProps) => JSX.Element;
+export declare const GuidedTooltipText: ({ children, ...rest }: GuidedTooltipTextProps) => JSX.Element;
 /**
  * The component to show content in body of the Guided Tooltip.
  */

package/lib-esm/guided-tooltip/guided-tooltip-body.js

@@ -10,8 +10,10 @@ import { useGuidedTooltipContext } from './utils/guided-tooltip-context.js';
  * The component to show the text of Guided Tooltip.
  */
 const GuidedTooltipText = ({
-  children
+  children,
+  ...rest
 }) => jsx(Text, {
+  ...rest,
   as: "p",
   color: "textOnLightDefault",
   variant: "bodyDefault",

package/lib-esm/guided-tooltip/guided-tooltip-footer.d.ts

@@ -9,7 +9,7 @@ export declare const GuidedTooltipFooterComponent: ({ children, className, ...re
  * Exposes primary and secondary action buttons most commonly used inside footer of the tooltip.
  */
 export declare const GuidedTooltipFooter: (({ children, className, ...rest }: GuidedTooltipFooterProps) => JSX.Element) & {
-    ActionsContainer: ({ children, className }: GuidedTooltipActionsContainerProps) => JSX.Element;
+    ActionsContainer: ({ children, className, ...rest }: GuidedTooltipActionsContainerProps) => JSX.Element;
     PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
         loading?: boolean | undefined;
         loadingAriaLabel?: string | undefined;
@@ -66,6 +66,6 @@ export declare const GuidedTooltipFooter: (({ children, className, ...rest }: Gu
         children?: string | string[] | undefined;
         icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
     }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
-    StepsIndicator: ({ children, className }: GuidedTooltipStepsIndicatorProps) => JSX.Element;
+    StepsIndicator: ({ children, className, ...rest }: GuidedTooltipStepsIndicatorProps) => JSX.Element;
 };
 export default GuidedTooltipFooter;

package/lib-esm/guided-tooltip/guided-tooltip-footer.js

@@ -23,8 +23,10 @@ const SecondaryAction = /*#__PURE__*/forwardRef((props, forwardedRef) => jsx(But
  */
 const ActionsContainer = ({
   children,
-  className
+  className,
+  ...rest
 }) => jsx("div", {
+  ...rest,
   className: clsx(styles.actionButtons, className),
   children: children
 });
@@ -33,7 +35,8 @@ const ActionsContainer = ({
  */
 const StepsIndicator = ({
   children,
-  className
+  className,
+  ...rest
 }) => {
   const {
     setStepsIndicatorId,
@@ -46,6 +49,7 @@ const StepsIndicator = ({
     }
   }, [setStepsIndicatorId, stepsIndicatorId]);
   return jsx("div", {
+    ...rest,
     className: clsx(styles.stepsIndicator, className),
     id: stepsIndicatorId,
     children: children

package/lib-esm/guided-tooltip/guided-tooltip-icon.d.ts

@@ -3,5 +3,5 @@ import { type GuidedTooltipIconProps } from './types';
 /**
  * Component that displays icon.
  */
-export declare const GuidedTooltipIcon: ({ className, icon }: GuidedTooltipIconProps) => JSX.Element;
+export declare const GuidedTooltipIcon: ({ className, icon, ...rest }: GuidedTooltipIconProps) => JSX.Element;
 export default GuidedTooltipIcon;

package/lib-esm/guided-tooltip/guided-tooltip-icon.js

@@ -8,9 +8,11 @@ import styles from './guided-tooltip.module.js';
  */
 const GuidedTooltipIcon = ({
   className,
-  icon
+  icon,
+  ...rest
 }) => {
   return jsx("div", {
+    ...rest,
     className: styles.icon,
     children: /*#__PURE__*/createElement(icon, {
       color: SurfaceSurfaceBrand,

package/lib-esm/guided-tooltip/guided-tooltip-illustration.d.ts

@@ -3,5 +3,5 @@ import { type GuidedTooltipIllustrationProps } from './types';
 /**
  * Component that displays illustration.
  */
-export declare const GuidedTooltipIllustration: ({ altText, className, imgUrl }: GuidedTooltipIllustrationProps) => JSX.Element;
+export declare const GuidedTooltipIllustration: ({ altText, className, imgUrl, ...rest }: GuidedTooltipIllustrationProps) => JSX.Element;
 export default GuidedTooltipIllustration;

package/lib-esm/guided-tooltip/guided-tooltip-illustration.js

@@ -8,9 +8,11 @@ import styles from './guided-tooltip.module.js';
 const GuidedTooltipIllustration = ({
   altText = '',
   className,
-  imgUrl
+  imgUrl,
+  ...rest
 }) => {
   return jsx("img", {
+    ...rest,
     alt: altText,
     className: clsx(styles.illustration, className),
     src: imgUrl

package/lib-esm/guided-tooltip/guided-tooltip-title.d.ts

@@ -3,4 +3,4 @@ import { type GuidedTooltipTitleProps } from './types';
 /**
  * An accessible title to be announced when the GuidedTooltip is opened.
  */
-export declare const GuidedTooltipTitle: ({ children, className }: GuidedTooltipTitleProps) => JSX.Element;
+export declare const GuidedTooltipTitle: ({ children, className, ...rest }: GuidedTooltipTitleProps) => JSX.Element;

package/lib-esm/guided-tooltip/guided-tooltip-title.js

@@ -11,7 +11,8 @@ import { useGuidedTooltipContext } from './utils/guided-tooltip-context.js';
  */
 const GuidedTooltipTitle = ({
   children,
-  className
+  className,
+  ...rest
 }) => {
   const {
     setTitleId,
@@ -24,6 +25,7 @@ const GuidedTooltipTitle = ({
     }
   }, [setTitleId, titleId]);
   return jsx(Text, {
+    ...rest,
     as: "h2",
     className: clsx(styles.title, className),
     color: "textOnLightDefault",

package/lib-esm/guided-tooltip/guided-tooltip.d.ts

@@ -3,7 +3,7 @@ import { type GuidedTooltipProps } from './types';
 export declare const GuidedTooltip: (({ children, onOpenChange, open, container, ...guidedTooltipContentProps }: GuidedTooltipProps) => JSX.Element) & {
     Body: import("react").ForwardRefExoticComponent<import("./types").GuidedTooltipBodyProps & import("react").RefAttributes<HTMLDivElement>>;
     Footer: (({ children, className, ...rest }: import("./types").GuidedTooltipFooterProps) => JSX.Element) & {
-        ActionsContainer: ({ children, className }: import("./types").GuidedTooltipActionsContainerProps) => JSX.Element;
+        ActionsContainer: ({ children, className, ...rest }: import("./types").GuidedTooltipActionsContainerProps) => JSX.Element;
         PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
             loading?: boolean | undefined;
             loadingAriaLabel?: string | undefined;
@@ -60,10 +60,10 @@ export declare const GuidedTooltip: (({ children, onOpenChange, open, container,
             children?: string | string[] | undefined;
             icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
         }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
-        StepsIndicator: ({ children, className }: import("./types").GuidedTooltipStepsIndicatorProps) => JSX.Element;
+        StepsIndicator: ({ children, className, ...rest }: import("./types").GuidedTooltipStepsIndicatorProps) => JSX.Element;
     };
-    Icon: ({ className, icon }: import("./types").GuidedTooltipIconProps) => JSX.Element;
-    Illustration: ({ altText, className, imgUrl }: import("./types").GuidedTooltipIllustrationProps) => JSX.Element;
-    Text: ({ children }: import("./types").GuidedTooltipTextProps) => JSX.Element;
-    Title: ({ children, className }: import("./types").GuidedTooltipTitleProps) => JSX.Element;
+    Icon: ({ className, icon, ...rest }: import("./types").GuidedTooltipIconProps) => JSX.Element;
+    Illustration: ({ altText, className, imgUrl, ...rest }: import("./types").GuidedTooltipIllustrationProps) => JSX.Element;
+    Text: ({ children, ...rest }: import("./types").GuidedTooltipTextProps) => JSX.Element;
+    Title: ({ children, className, ...rest }: import("./types").GuidedTooltipTitleProps) => JSX.Element;
 };

package/lib-esm/guided-tooltip/guided-tooltip.js

@@ -20,6 +20,7 @@ const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
   className,
   closeLabel,
   content,
+  closeDataResinTarget = 'dismiss',
   side = 'bottom',
   sideOffset = OFFSET_FROM_ANCHOR_IN_PX,
   ...rest
@@ -62,6 +63,7 @@ const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
         children: jsx(IconButton, {
           "aria-label": closeLabel,
           className: styles.closeButton,
+          "data-resin-target": closeDataResinTarget,
           icon: XMark
         })
       }), jsx(RadixPopover.Arrow, {

package/lib-esm/guided-tooltip/types.d.ts

@@ -11,6 +11,10 @@ export interface GuidedTooltipContentProps extends Omit<React.HTMLAttributes<HTM
     closeLabel: string;
     /** React element with the content of GuildedTooltip */
     content: React.ReactElement;
+    /**
+     * "data-resin-target" to be passed to Close button.
+     */
+    closeDataResinTarget?: string;
     /** The preferred side of the anchor to render against. Will be reversed when collisions occur.
      * "top" | "right" | "bottom" | "left"
      * Default value: "bottom". */

package/lib-esm/index.css

@@ -2898,7 +2898,7 @@
 
 .data-table-module_dataTableWrapper__VYLJf{
   --border-radius-datatable:0;
-  --outline-offset-focus-and-selected-row-datatable:-6px;
+  --outline-offset-focus-and-selected-row-datatable:-0.25rem;
   --outline-select-color-datatable:#0000;
   --sticky-element-z-index:2;
   height:100%;
@@ -3208,7 +3208,6 @@
   background:inherit;
   background-clip:content-box;
   left:0;
-  outline:calc(var(--is-row-focused)*var(--border-2)) solid var(--outline-focus-color);
   outline-offset:var(--outline-offset-focus-cell);
   overflow:visible;
   position:sticky;
@@ -3239,29 +3238,26 @@
 .sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_verticalBar__AgXfU.sticky-cell-module_isScrolledX__xcMJ6{
   display:block;
 }
-.sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_stickyCellLeft__F3YAG{
-  background:inherit;
-  border-radius:unset;
-  box-sizing:border-box;
-  height:100%;
-  left:0;
-  pointer-events:none;
-  position:absolute;
-  top:0;
+.sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_stickyCellBelow__BKRdm{
+  border-left:calc(var(--is-row-focused)*var(--border-2)) solid var(--outline-focus-color);
+  height:calc(100% + var(--is-row-focused)*2*var(--outline-offset-focus-cell));
+  left:var(--border-2);
   width:calc(100% + var(--outline-offset-focus-row));
-  z-index:-1;
 }
-.sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_stickyCellRight__yQjUM{
+.sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_stickyCellBelow__BKRdm,.sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_stickyCellOuterLeft__tai5-{
   background:inherit;
   border-radius:unset;
   box-sizing:border-box;
-  height:calc(var(--is-row-focused)*(100% + var(--outline-offset-focus-cell)*2));
-  left:100%;
   pointer-events:none;
   position:absolute;
   top:50%;
-  transform:translate(-100%, -50%);
-  width:var(--space-3);
+  transform:translateY(-50%);
+  z-index:-1;
+}
+.sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_stickyCellOuterLeft__tai5-{
+  height:100%;
+  left:0;
+  width:var(--border-2);
 }
 
 .empty-state-module_emptyState__Qs2b2{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.2.0",
+    "version": "6.4.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.2"
     },
-    "gitHead": "000a8ea7add0eb83c8ae32a73df867c700f31afd",
+    "gitHead": "01ae4a276d791db312a207c46a6c16017db01a8b",
     "module": "lib-esm/index.js",
     "type": "module",
     "main": "lib-esm/index.js",