@box/blueprint-web 13.19.0 → 14.0.0

package/dist/lib-esm/data-table/use-table-scroll-correction.js

@@ -0,0 +1,211 @@
+import { getInteractionModality } from '@react-aria/interactions';
+import { useEffect } from 'react';
+
+const getElementPadding = element => {
+  const style = getComputedStyle(element);
+  return {
+    paddingTop: parseFloat(style.paddingTop) || 0,
+    paddingRight: parseFloat(style.paddingRight) || 0,
+    paddingBottom: parseFloat(style.paddingBottom) || 0,
+    paddingLeft: parseFloat(style.paddingLeft) || 0
+  };
+};
+const getViewportDimensions = () => {
+  const {
+    visualViewport
+  } = window;
+  if (!visualViewport) {
+    return {
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      left: 0
+    };
+  }
+  return {
+    top: 0,
+    right: visualViewport.width,
+    bottom: visualViewport.height,
+    left: 0
+  };
+};
+function getScrollableAncestors(element) {
+  const ancestors = [];
+  let node = element.parentElement;
+  while (node) {
+    const {
+      overflowY,
+      overflowX
+    } = getComputedStyle(node);
+    const isScrollableY = /(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight;
+    const isScrollableX = /(auto|scroll|overlay)/.test(overflowX) && node.scrollWidth > node.clientWidth;
+    if (isScrollableY || isScrollableX) {
+      ancestors.push(node);
+    }
+    node = node.parentElement;
+  }
+  const root = document.scrollingElement;
+  if (root && root instanceof HTMLElement) {
+    ancestors.push(root);
+  }
+  return ancestors;
+}
+/**
+ * corrects the scroll position of the ancestor element to make the element visible
+ */
+function scrollElementIntoAncestor(ancestor, element) {
+  const {
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  } = getElementPadding(ancestor);
+  const eRect = element.getBoundingClientRect();
+  const isRootScroller = ancestor === document.scrollingElement;
+  const aRect = isRootScroller ? getViewportDimensions() : ancestor.getBoundingClientRect();
+  let dy = 0;
+  if (eRect.top < aRect.top + paddingTop) {
+    dy = eRect.top - aRect.top - paddingTop;
+  } else if (eRect.bottom > aRect.bottom - paddingBottom) {
+    dy = eRect.bottom - aRect.bottom + paddingBottom;
+  }
+  let dx = 0;
+  if (eRect.left < aRect.left + paddingLeft) {
+    dx = eRect.left - aRect.left - paddingLeft;
+  } else if (eRect.right > aRect.right - paddingRight) {
+    dx = eRect.right - aRect.right + paddingRight;
+  }
+  if (dx !== 0 || dy !== 0) {
+    ancestor.scrollBy({
+      left: dx,
+      top: dy,
+      behavior: 'instant'
+    });
+  }
+}
+/**
+ * Scrolls `element` into the visible area of `container`, respecting the
+ * container's CSS `scroll-padding`. Uses manual `scrollBy` instead of native
+ * `element.scrollIntoView` to work around Chromium bug #40074749, which causes
+ * `scrollIntoView` on `<td>` elements to skip the real scroll container.
+ *
+ * Horizontal correction is skipped for `<tr>` elements because rows span the
+ * full table width and would cause erroneous horizontal scrolling.
+ */
+function scrollElementIntoContainer(container, element) {
+  const {
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  } = getElementPadding(container);
+  const cRect = container.getBoundingClientRect();
+  const eRect = element.getBoundingClientRect();
+  const stickyHeader = container.querySelector('table > thead > tr');
+  const stickyHeaderRect = stickyHeader instanceof HTMLElement ? stickyHeader.getBoundingClientRect() : null;
+  // Get the viewport dimensions to check if the element is completely visible
+  const {
+    top: viewportTop,
+    right: viewportRight,
+    bottom: viewportBottom,
+    left: viewportLeft
+  } = getViewportDimensions();
+  const visibleTop = Math.max(cRect.top, viewportTop);
+  const visibleRight = Math.min(cRect.right, viewportRight);
+  const visibleBottom = Math.min(cRect.bottom, viewportBottom);
+  const visibleLeft = Math.max(cRect.left, viewportLeft);
+  const isRow = element.tagName === 'TR';
+  const isInsideTableHead = element.closest('thead') !== null;
+  const stickyHeaderOverlayTopInset = stickyHeaderRect && !isInsideTableHead ? Math.max(0, stickyHeaderRect.bottom - visibleTop) : 0;
+  const topInset = paddingTop + stickyHeaderOverlayTopInset;
+  const row = element.closest('tr');
+  const firstRowCell = row?.firstElementChild instanceof HTMLElement ? row.firstElementChild : null;
+  const firstRowCellRect = firstRowCell?.getBoundingClientRect();
+  const firstRowCellStyle = firstRowCell ? getComputedStyle(firstRowCell) : null;
+  const isFirstCellSticky = firstRowCellStyle?.position === 'sticky';
+  const isWithinStickyFirstCell = Boolean(isFirstCellSticky && firstRowCell && (firstRowCell === element || firstRowCell.contains(element)));
+  const stickyFirstCellOverlayLeftInset = firstRowCellRect && isFirstCellSticky ? Math.max(0, firstRowCellRect.right - visibleLeft) : 0;
+  const leftInset = isWithinStickyFirstCell ? paddingLeft : paddingLeft + stickyFirstCellOverlayLeftInset;
+  let dy = 0;
+  if (eRect.top < visibleTop + topInset) {
+    dy = eRect.top - visibleTop - topInset;
+  } else if (eRect.bottom > visibleBottom - paddingBottom) {
+    dy = eRect.bottom - visibleBottom + paddingBottom;
+  }
+  let dx = 0;
+  if (!isRow) {
+    if (eRect.left < visibleLeft + leftInset) {
+      dx = eRect.left - visibleLeft - leftInset;
+    } else if (eRect.right > visibleRight - paddingRight) {
+      dx = eRect.right - visibleRight + paddingRight;
+    }
+  }
+  if (dx !== 0 || dy !== 0) {
+    const prevScrollTop = container.scrollTop;
+    const prevScrollLeft = container.scrollLeft;
+    container.scrollBy({
+      left: dx,
+      top: dy,
+      behavior: 'instant'
+    });
+    const actualDy = container.scrollTop - prevScrollTop;
+    const actualDx = container.scrollLeft - prevScrollLeft;
+    const didNotFullyApply = Math.abs(actualDy - dy) > 0.5 || Math.abs(actualDx - dx) > 0.5;
+    // Check if scroll wrapper was able to correctly show focused element
+    // If not, change scroll position of the ancestor elements to make element visible
+    if (didNotFullyApply) {
+      const outerAncestors = getScrollableAncestors(container);
+      outerAncestors.forEach(ancestor => {
+        scrollElementIntoAncestor(ancestor, element);
+      });
+    }
+  }
+}
+/**
+ * Attaches a corrective scroll listener to the container referenced by
+ * `containerRef`. When keyboard focus moves to a descendant element,
+ * react-aria's Chrome-specific scroll path may leave the focused element
+ * partially or fully out of view. This hook schedules a corrective
+ * `scrollBy` in the animation frame after react-aria's own frame, ensuring
+ * the focused element is visible.
+ */
+function useTableScrollCorrection(containerRef) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    let raf1 = 0;
+    let raf2 = 0;
+    const onFocusIn = e => {
+      const modality = getInteractionModality();
+      const target = e.target;
+      const containsTarget = container.contains(target);
+      if (modality !== 'keyboard') {
+        return;
+      }
+      if (!containsTarget) {
+        return;
+      }
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+      // react-aria schedules its (broken) scroll in one rAF; we run in
+      // the following frame to override the incorrect final position.
+      raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(() => {
+          scrollElementIntoContainer(container, target);
+        });
+      });
+    };
+    container.addEventListener('focusin', onFocusIn);
+    // eslint-disable-next-line consistent-return
+    return () => {
+      container.removeEventListener('focusin', onFocusIn);
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+    // since it is a ref, it will not trigger a re-render, however eslint still warns to add it to the dependency array
+  }, [containerRef]);
+}
+
+export { getScrollableAncestors, scrollElementIntoAncestor, useTableScrollCorrection };

package/dist/lib-esm/empty-state/empty-state.d.ts

@@ -11,12 +11,10 @@ export declare const EmptyState: import("react").ForwardRefExoticComponent<Empty
      */
     PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -11,23 +11,19 @@ export declare const GuidedTooltipFooter: (({ children, className, ...rest }: Gu
     ActionsContainer: ({ children, className, ...rest }: GuidedTooltipActionsContainerProps) => import("react/jsx-runtime").JSX.Element;
     PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
     SecondaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
         children?: string | string[];
-        icon?: import("../button/types").SvgIconComponent;
         endIcon?: import("../button/types").SvgIconComponent;
         startIcon?: import("../button/types").SvgIconComponent;
     }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -5,23 +5,19 @@ export declare const GuidedTooltip: (({ children, onOpenChange, open, container,
         ActionsContainer: ({ children, className, ...rest }: import("./types").GuidedTooltipActionsContainerProps) => import("react/jsx-runtime").JSX.Element;
         PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
             children?: string | string[];
-            icon?: import("../button/types").SvgIconComponent;
             endIcon?: import("../button/types").SvgIconComponent;
             startIcon?: import("../button/types").SvgIconComponent;
         }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
             children?: string | string[];
-            icon?: import("../button/types").SvgIconComponent;
             endIcon?: import("../button/types").SvgIconComponent;
             startIcon?: import("../button/types").SvgIconComponent;
         }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
         SecondaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
             children?: string | string[];
-            icon?: import("../button/types").SvgIconComponent;
             endIcon?: import("../button/types").SvgIconComponent;
             startIcon?: import("../button/types").SvgIconComponent;
         }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
             children?: string | string[];
-            icon?: import("../button/types").SvgIconComponent;
             endIcon?: import("../button/types").SvgIconComponent;
             startIcon?: import("../button/types").SvgIconComponent;
         }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;