@box/blueprint-web 9.1.1 → 9.1.3

package/lib-esm/page/types.d.ts

@@ -17,7 +17,7 @@ export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     onToggleNavigationExpanded?: (nextState: boolean) => void;
 }
 export type PageGlobalHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-export type PagePageHeaderProps = Omit<PageHeaderProps, 'variant' | 'sticky' | 'as'>;
+export type PagePageHeaderProps = Omit<PageHeaderProps<'div'>, 'variant' | 'sticky' | 'as'>;
 export type PageMainProps = React.HTMLAttributes<HTMLDivElement>;
 export type PageMainSectionProps = React.HTMLAttributes<HTMLDivElement>;
 export type PageMainSectionSidebarProps = React.HTMLAttributes<HTMLDivElement>;

package/lib-esm/primitives/page-header/index.d.ts

@@ -1,2 +1,2 @@
 export { PageHeader } from './page-header';
-export { type PageHeaderProps } from './types';
+export { type PageHeaderComponentType, type PageHeaderProps } from './types';

package/lib-esm/primitives/page-header/page-header.d.ts

@@ -1,10 +1,10 @@
-import { type HeaderElementTypes, type PageHeaderProps } from './types';
-export declare const PageHeaderRoot: import("react").ForwardRefExoticComponent<PageHeaderProps & import("react").RefAttributes<HeaderElementTypes>>;
+import { type PageHeaderComponentType } from './types';
+export declare const PageHeaderRoot: PageHeaderComponentType;
 export declare const PageHeaderCorner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PageHeaderStartElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PageHeaderEndElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const PageHeader: {
-    Root: import("react").ForwardRefExoticComponent<PageHeaderProps & import("react").RefAttributes<HeaderElementTypes>>;
+    Root: PageHeaderComponentType;
     StartElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     EndElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Corner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/page-header/types.d.ts

@@ -1,17 +1,20 @@
-import { type HTMLAttributes } from 'react';
-interface HeaderProps extends HTMLAttributes<HTMLElement> {
-    as?: 'header';
-}
-interface DivProps extends HTMLAttributes<HTMLDivElement> {
-    as: 'div';
-}
-export type HeaderElementTypes = HeaderProps | DivProps;
-export type PageHeaderProps = (DivProps | HeaderProps) & {
+import { type ReactNode } from 'react';
+interface PageHeaderBaseProps {
     variant: 'default' | 'inline';
     /**
      * When true the header will have `position: sticky`
      * @default true
      */
     sticky?: boolean;
+}
+export type PageHeaderElementType = React.ElementType<any, 'header' | 'div'>;
+type PropsOf<T extends PageHeaderElementType> = React.ComponentPropsWithRef<T>;
+export type PolymorphicRef<T extends PageHeaderElementType> = React.ComponentPropsWithRef<T>['ref'];
+type PolymorphicProps<T extends PageHeaderElementType = PageHeaderElementType, TProps = object> = {
+    as?: T;
+} & TProps & Omit<PropsOf<T>, keyof TProps | 'as' | 'ref'> & {
+    ref?: PolymorphicRef<T>;
 };
+export type PageHeaderProps<T extends PageHeaderElementType = 'header'> = PolymorphicProps<T, PageHeaderBaseProps>;
+export type PageHeaderComponentType = <T extends PageHeaderElementType = 'header'>(props: PolymorphicProps<T, PageHeaderProps<T>>) => ReactNode;
 export {};

package/lib-esm/utils/useFullTextTooltip.d.ts

@@ -1,16 +1,15 @@
-import { type MutableRefObject, type ReactNode } from 'react';
-export declare const useFullTextTooltip: ({ ref, children, textValue, skipOverflowCheck, }: {
-    ref: MutableRefObject<null> | MutableRefObject<HTMLSpanElement>;
-    children?: ReactNode;
-    textValue?: string;
-    skipOverflowCheck?: boolean;
-}) => {
-    Wrapper: ((props: import("../tooltip").TooltipProps) => import("react/jsx-runtime").JSX.Element) | import("react").ExoticComponent<{
-        children?: ReactNode | undefined;
-    }>;
-    wrapperProps: {
-        content: ReactNode;
-    } | {
-        content?: undefined;
+import { type ComponentType, type MutableRefObject, type ReactNode } from 'react';
+import { type TooltipProps } from '../tooltip';
+interface UseFullTextTooltip {
+    (args: {
+        ref: MutableRefObject<HTMLSpanElement | null>;
+        children?: ReactNode;
+        textValue?: string;
+        skipOverflowCheck?: boolean;
+    }): {
+        Wrapper: ComponentType<TooltipProps>;
+        wrapperProps: Record<symbol, never>;
     };
-};
+}
+export declare const useFullTextTooltip: UseFullTextTooltip;
+export {};

package/lib-esm/utils/useFullTextTooltip.js

@@ -1,48 +1,23 @@
-import { useState, useEffect, Fragment } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
 import { Tooltip } from '../tooltip/tooltip.js';
-import { debounce } from './debounce.js';
+import { useIsEllipsized } from './useIsEllipsized.js';
 
 const useFullTextTooltip = ({
   ref,
   children,
   textValue,
-  skipOverflowCheck
+  skipOverflowCheck = false
 }) => {
-  const [isOverflowing, setIsOverflowing] = useState(false);
-  useEffect(() => {
-    const checkIfOverflowing = () => {
-      const element = ref?.current;
-      if (element && !skipOverflowCheck) {
-        setIsOverflowing(element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth);
-      }
-    };
-    // Create debounced version of checkIfOverflowing
-    const debouncedCheckIfOverflowing = debounce(checkIfOverflowing, 100);
-    const element = ref?.current;
-    let resizeObserver = null;
-    if (element) {
-      // Create a ResizeObserver to observe the size of the element
-      resizeObserver = new ResizeObserver(debouncedCheckIfOverflowing);
-      resizeObserver.observe(element);
-    }
-    // Initial check
-    debouncedCheckIfOverflowing();
-    // Cleanup function to disconnect the observer and clear debounced timeouts
-    return () => {
-      if (resizeObserver && element) {
-        resizeObserver.unobserve(element);
-        resizeObserver.disconnect();
-      }
-      debouncedCheckIfOverflowing.clear();
-    };
-  }, [ref, skipOverflowCheck, textValue, children]);
-  const Wrapper = isOverflowing ? Tooltip : Fragment;
-  const wrapperProps = isOverflowing ? {
+  const isEllipsized = useIsEllipsized(ref);
+  const shouldWrapInTooltip = isEllipsized && !skipOverflowCheck;
+  const Wrapper = shouldWrapInTooltip ? props => jsx(Tooltip, {
+    ...props,
     content: textValue ?? children
-  } : {};
+  }) : Fragment;
   return {
     Wrapper,
-    wrapperProps
+    wrapperProps: {}
   };
 };
 

package/lib-esm/utils/useIsEllipsized.d.ts

@@ -0,0 +1 @@
+export declare const useIsEllipsized: (ref: React.RefObject<HTMLElement>) => boolean;

package/lib-esm/utils/useIsEllipsized.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import noop from 'lodash/noop';
+
+const useIsEllipsized = ref => {
+  const [isEllipsized, setIsEllipsized] = useState(false);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return noop;
+    }
+    let rafID;
+    const checkIfEllipsized = () => {
+      rafID = requestAnimationFrame(() => {
+        const isOverflowing = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+        setIsEllipsized(isOverflowing);
+      });
+    };
+    const observer = new ResizeObserver(checkIfEllipsized);
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(rafID);
+    };
+  }, [ref, isEllipsized]);
+  return isEllipsized;
+};
+
+export { useIsEllipsized };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.1.1",
+    "version": "9.1.3",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "12459b549bab127f965a7a68620ab58a8d171862",
+    "gitHead": "9a853cf5c13b885475cc76128d6eebeb1de4788a",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {