@box/blueprint-web 9.1.2 → 9.2.0

package/lib-esm/focusable/focusable.d.ts

@@ -0,0 +1,3 @@
+import { type FocusableProps } from '@ariakit/react';
+import React from 'react';
+export declare const Focusable: React.ForwardRefExoticComponent<Omit<FocusableProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib-esm/focusable/focusable.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { Focusable as Focusable$1 } from '@ariakit/react';
+import { forwardRef, isValidElement } from 'react';
+import { isProduction } from '../utils/is-production.js';
+import { disabledFromProps } from '../utils/disabledFromProps.js';
+
+const Focusable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    focusable = true,
+    ...restProps
+  } = props;
+  if (! /*#__PURE__*/isValidElement(children)) {
+    if (!isProduction()) {
+      /* eslint-disable-next-line no-console */
+      console.error('Focusable children must be a valid React element.');
+    }
+    return children;
+  }
+  const isChildDisabled = disabledFromProps(children.props);
+  const renderProps = isChildDisabled ? {
+    children
+  } : {
+    render: children
+  };
+  return jsx(Focusable$1, {
+    ref: forwardedRef,
+    focusable: focusable,
+    tabIndex: focusable ? 0 : undefined,
+    ...restProps,
+    ...renderProps
+  });
+});
+
+export { Focusable };

package/lib-esm/focusable/index.d.ts

@@ -0,0 +1 @@
+export { Focusable } from './focusable';

package/lib-esm/index.d.ts

@@ -17,6 +17,7 @@ export * from './data-table/data-table';
 export * from './date-picker';
 export * from './divider';
 export * from './empty-state';
+export * from './focusable';
 export * from './ghost';
 export * from './grid-list-item';
 export * from './guided-tooltip';

package/lib-esm/index.js

@@ -20,6 +20,7 @@ export { DataTableWrapper, StickyCell } from './data-table/data-table.js';
 export { DatePicker } from './date-picker/date-picker.js';
 export { Divider } from './divider/divider.js';
 export { EmptyState } from './empty-state/empty-state.js';
+export { Focusable } from './focusable/focusable.js';
 export { Ghost } from './ghost/ghost.js';
 export { GridList } from './grid-list-item/index.js';
 export { GuidedTooltip } from './guided-tooltip/guided-tooltip.js';

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

@@ -0,0 +1,8 @@
+/**
+ * Checks whether something is disabled or not based on its props.
+ * Provided by ariakit https://github.com/ariakit/ariakit/blob/main/packages/ariakit-core/src/utils/misc.ts
+ */
+export declare function disabledFromProps(props: {
+    disabled?: boolean;
+    'aria-disabled'?: boolean | 'true' | 'false';
+}): boolean;

package/lib-esm/utils/disabledFromProps.js

@@ -0,0 +1,9 @@
+/**
+ * Checks whether something is disabled or not based on its props.
+ * Provided by ariakit https://github.com/ariakit/ariakit/blob/main/packages/ariakit-core/src/utils/misc.ts
+ */
+function disabledFromProps(props) {
+  return props.disabled || props['aria-disabled'] === true || props['aria-disabled'] === 'true';
+}
+
+export { disabledFromProps };

package/lib-esm/utils/is-production.d.ts

@@ -0,0 +1 @@
+export declare const isProduction: () => boolean;

package/lib-esm/utils/is-production.js

@@ -0,0 +1,3 @@
+const isProduction = () => process.env.NODE_ENV === 'production';
+
+export { isProduction };

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.2",
+    "version": "9.2.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "422c5a76116e547d351ab83cdab9d97b4d7ce621",
+    "gitHead": "aea7aacd8bd8226934231748787d65edac379e02",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {