@box/blueprint-web 5.31.3

package/lib-esm/utils/useBreakpoint.js

@@ -0,0 +1,42 @@
+import { BreakpointSmall, BreakpointMedium, BreakpointLarge, BreakpointXlarge } from '@box/blueprint-web-assets/tokens/tokens';
+import { useScreenSize } from './useScreenSize.js';
+
+var Breakpoint;
+(function (Breakpoint) {
+  Breakpoint[Breakpoint["Small"] = 1] = "Small";
+  Breakpoint[Breakpoint["Medium"] = 2] = "Medium";
+  Breakpoint[Breakpoint["Large"] = 3] = "Large";
+  Breakpoint[Breakpoint["XLarge"] = 4] = "XLarge";
+})(Breakpoint || (Breakpoint = {}));
+const breakpointsBounds = {
+  small: Number(BreakpointSmall.replace('px', '')),
+  medium: Number(BreakpointMedium.replace('px', '')),
+  large: Number(BreakpointLarge.replace('px', '')),
+  xlarge: Number(BreakpointXlarge.replace('px', ''))
+};
+/**
+ * Returns an enum matching a Blueprint breakpoint for current window size.
+ *
+ * @example
+ * const breakpoint = useBreakpoint();
+ * return breakpoint > Breakpoint.Medium && 'Hello!';
+ *
+ * @returns Breakpoint enum
+ */
+const useBreakpoint = () => {
+  const {
+    width
+  } = useScreenSize();
+  if (width <= breakpointsBounds.small) {
+    return Breakpoint.Small;
+  }
+  if (width <= breakpointsBounds.medium) {
+    return Breakpoint.Medium;
+  }
+  if (width <= breakpointsBounds.large) {
+    return Breakpoint.Large;
+  }
+  return Breakpoint.XLarge;
+};
+
+export { Breakpoint, useBreakpoint };

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

@@ -0,0 +1,7 @@
+import { useLayoutEffect } from 'react';
+/**
+ * A React helper hook for scheduling a layout effect with
+ * a fallback to a regular effect for environments where
+ * layout effects should not be used (such as server-side rendering).
+ */
+export declare const useEnhancedEffect: typeof useLayoutEffect;

package/lib-esm/utils/useEnhancedEffect.js

@@ -0,0 +1,10 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+/**
+ * A React helper hook for scheduling a layout effect with
+ * a fallback to a regular effect for environments where
+ * layout effects should not be used (such as server-side rendering).
+ */
+const useEnhancedEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useEnhancedEffect };

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

@@ -0,0 +1,12 @@
+import { type Ref, type RefCallback } from 'react';
+/**
+ * useForkRef
+ * Joins refs together and returns a combination of the two as a new ref
+ *
+ * @param refA
+ * @param refB
+ * @returns MutableRefObject
+ * @see https://react-hooks.org/docs/useForkRef
+ */
+declare function useForkRef<T>(refA: Ref<T> | undefined | null, refB: Ref<T> | undefined | null): RefCallback<T> | null;
+export { useForkRef };

package/lib-esm/utils/useForkRef.js

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+
+/**
+ * Credit to material-ui for this snippet
+ */
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref !== null && ref !== undefined) {
+    ref.current = value;
+  }
+}
+/**
+ * useForkRef
+ * Joins refs together and returns a combination of the two as a new ref
+ *
+ * @param refA
+ * @param refB
+ * @returns MutableRefObject
+ * @see https://react-hooks.org/docs/useForkRef
+ */
+function useForkRef(refA, refB) {
+  /**
+   * This will create a new function if the ref props change and are defined.
+   * This means react will call the old forkRef with `null` and the new forkRef
+   * with the ref. Cleanup naturally emerges from this behavior
+   */
+  return useMemo(() => {
+    if (refA === null && refB === null) {
+      return null;
+    }
+    return refValue => {
+      setRef(refA, refValue);
+      setRef(refB, refValue);
+    };
+  }, [refA, refB]);
+}
+
+export { useForkRef };

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

@@ -0,0 +1,15 @@
+import { type MutableRefObject, type ReactNode } from 'react';
+export declare const useFullTextTooltip: ({ ref, children, textValue, }: {
+    ref: MutableRefObject<null> | MutableRefObject<HTMLSpanElement>;
+    children?: ReactNode;
+    textValue?: string | undefined;
+}) => {
+    Wrapper: ((props: import("../tooltip").TooltipProps) => JSX.Element) | import("react").ExoticComponent<{
+        children?: ReactNode;
+    }>;
+    wrapperProps: {
+        content: ReactNode;
+    } | {
+        content?: undefined;
+    };
+};

package/lib-esm/utils/useFullTextTooltip.js

@@ -0,0 +1,28 @@
+import { useState, useEffect, Fragment } from 'react';
+import { Tooltip } from '../tooltip/tooltip.js';
+
+const useFullTextTooltip = ({
+  ref,
+  children,
+  textValue
+}) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  useEffect(() => {
+    if (!ref?.current) {
+      return;
+    }
+    if (ref.current.scrollHeight > ref.current.clientHeight || ref.current.scrollWidth > ref.current.clientWidth) {
+      setIsOverflowing(true);
+    }
+  }, [ref]);
+  const Wrapper = isOverflowing ? Tooltip : Fragment;
+  const wrapperProps = isOverflowing ? {
+    content: textValue ?? children
+  } : {};
+  return {
+    Wrapper,
+    wrapperProps
+  };
+};
+
+export { useFullTextTooltip };

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ *  React helper hook, which checks interactivity of Tooltip trigger
+ */
+export declare const useIsTriggerInteractive: () => import("react").RefObject<HTMLButtonElement>;

package/lib-esm/utils/useIsTriggerInteractive.js

@@ -0,0 +1,21 @@
+import { useRef, useEffect } from 'react';
+import { isTabbable } from 'tabbable';
+
+/**
+ *  React helper hook, which checks interactivity of Tooltip trigger
+ */
+const useIsTriggerInteractive = () => {
+  // We assert button type for compatibility with ref type of radix trigger
+  const triggerRef = useRef(null);
+  useEffect(() => {
+    const triggerElement = triggerRef.current;
+    if (!triggerElement || !isTabbable(triggerElement)) {
+      const tagName = triggerElement?.tagName ? `<${triggerElement.tagName}>`.toLowerCase() : 'element';
+      /* eslint-disable-next-line no-console */
+      console.error(`${tagName} which acts as a tooltip trigger is not interactive. Make sure that trigger element is focusable, visible, and with a tabindex !== -1. More about tooltip accessibility in the Design System Portal.`);
+    }
+  }, []);
+  return triggerRef;
+};
+
+export { useIsTriggerInteractive };

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

@@ -0,0 +1 @@
+export declare function useMobile(): boolean;

package/lib-esm/utils/useMobile.js

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+
+function useMobile() {
+  const [isMobile, setMobile] = useState(false);
+  useEffect(() => {
+    const {
+      userAgent
+    } = globalThis.navigator;
+    setMobile(/iphone|ipad|ipod|android|blackberry|bb10|mini|windows\sce|palm/i.test(userAgent) || /Mobi/i.test(userAgent));
+  }, []);
+  return isMobile;
+}
+
+export { useMobile };

package/lib-esm/utils/useNamedSlots.hook.d.ts

@@ -0,0 +1,2 @@
+import { type ReactElement, type ReactNode } from 'react';
+export declare const useNamedSlots: (children: ReactNode | ReactNode[], slots: string[]) => (ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined)[];

package/lib-esm/utils/useNamedSlots.hook.js

@@ -0,0 +1,10 @@
+import { useMemo, Children } from 'react';
+
+const useNamedSlots = (children, slots) => {
+  return useMemo(() => {
+    const childrenArray = Children.toArray(children || []);
+    return slots.map(slotName => childrenArray.find(child => child?.props?.name === slotName));
+  }, [children, slots]);
+};
+
+export { useNamedSlots };

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

@@ -0,0 +1,4 @@
+export declare const useScreenSize: () => {
+    width: number;
+    height: number;
+};

package/lib-esm/utils/useScreenSize.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+const useScreenSize = () => {
+  const [screenSize, setScreenSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return screenSize;
+};
+
+export { useScreenSize };

package/lib-esm/utils/useSubMenuFocus.hook.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare const useSubMenuFocus: () => [RefObject<HTMLDivElement>, () => void, () => void];

package/lib-esm/utils/useSubMenuFocus.hook.js

@@ -0,0 +1,39 @@
+import noop from 'lodash/noop';
+import { useRef, useEffect } from 'react';
+
+const useSubMenuFocus = () => {
+  const localRef = useRef(null);
+  const originalFocus = useRef(noop);
+  const storeAndMakeCurrentFocusMethodNoop = () => {
+    if (!localRef.current) {
+      return;
+    }
+    originalFocus.current = localRef.current.focus;
+    localRef.current.focus = noop;
+  };
+  const restoreInitialFocusMethod = () => {
+    if (!localRef.current) {
+      return;
+    }
+    localRef.current.focus = originalFocus.current;
+  };
+  const setRefFocusMethodNoop = () => {
+    if (!localRef.current) {
+      return;
+    }
+    localRef.current.focus = noop;
+  };
+  useEffect(() => {
+    const keydownListener = function onKeydownHandler() {
+      restoreInitialFocusMethod();
+    };
+    document.addEventListener('keydown', keydownListener);
+    storeAndMakeCurrentFocusMethodNoop();
+    return () => {
+      document.removeEventListener('keydown', keydownListener);
+    };
+  }, []);
+  return [localRef, setRefFocusMethodNoop, storeAndMakeCurrentFocusMethodNoop];
+};
+
+export { useSubMenuFocus };

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

@@ -0,0 +1,2 @@
+export declare const getUniqueId: (prefix?: string) => string;
+export declare const useUniqueId: (prefix: string, when?: string | boolean) => string | undefined;

package/lib-esm/utils/useUniqueId.js

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+
+const getUniqueId = (prefix = 'id-') => prefix + Math.random().toString(16).slice(-4);
+const useUniqueId = (prefix, when = true) => {
+  return useMemo(() => when ? getUniqueId(prefix) : undefined, [prefix, when]);
+};
+
+export { getUniqueId, useUniqueId };

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

@@ -0,0 +1,13 @@
+/**
+ * waitForAnimation
+ * Utility function to be used in Visual tests
+ * It should used when you want to wait for an animation to finish
+ * @param {boolean} [failIfNoAnimation] - if there is no animation detected - fail
+ * @param {number} [waitForAnimationStart] - after this time it's assumed no animation is present.
+ * @param {number} [animationMaxTime] - after this time it's assumed animation has finished.
+ */
+export declare const waitForAnimation: ({ failIfNoAnimation, waitForAnimationStart, animationMaxTime, }?: {
+    failIfNoAnimation?: boolean | undefined;
+    waitForAnimationStart?: number | undefined;
+    animationMaxTime?: number | undefined;
+}) => Promise<void>;

package/package.json

@@ -0,0 +1,83 @@
+{
+    "name": "@box/blueprint-web",
+    "version": "5.31.3",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist",
+        "registry": "https://registry.npmjs.org"
+    },
+    "peerDependencies": {
+        "@internationalized/date": "^3.5.0",
+        "@react-aria/i18n": "^3.8.2",
+        "@react-types/shared": "^3.20.0",
+        "react": "^17.0.0",
+        "react-aria": "^3.28.0",
+        "react-aria-components": "1.0.0-beta.0",
+        "react-dom": "^17.0.0",
+        "react-stately": "^3.26.0"
+    },
+    "scripts": {
+        "build-storybook": "nx run blueprint-web:build-storybook",
+        "prepare": "nx run blueprint-web:prepare",
+        "test-storybook": "test-storybook --watch --url http://localhost:4400"
+    },
+    "sideEffects": [
+        "**/*.css",
+        "**/*.scss"
+    ],
+    "dependencies": {
+        "@box/blueprint-web-assets": "^4.2.2",
+        "@ariakit/react": "0.3.14",
+        "@ariakit/react-core": "0.3.14",
+        "@radix-ui/react-accordion": "1.1.2",
+        "@radix-ui/react-checkbox": "1.0.4",
+        "@radix-ui/react-collapsible": "1.0.3",
+        "@radix-ui/react-context-menu": "2.1.4",
+        "@radix-ui/react-dialog": "1.0.4",
+        "@radix-ui/react-dropdown-menu": "2.0.5",
+        "@radix-ui/react-label": "2.0.2",
+        "@radix-ui/react-popover": "1.0.6",
+        "@radix-ui/react-radio-group": "1.1.3",
+        "@radix-ui/react-scroll-area": "1.0.4",
+        "@radix-ui/react-select": "1.2.2",
+        "@radix-ui/react-slider": "1.1.2",
+        "@radix-ui/react-switch": "1.0.3",
+        "@radix-ui/react-toast": "1.1.4",
+        "@radix-ui/react-toggle-group": "1.0.4",
+        "@radix-ui/react-tooltip": "1.0.6",
+        "@radix-ui/react-visually-hidden": "1.0.3",
+        "@react-aria/utils": "3.20.0",
+        "clsx": "1.2.1",
+        "color": "2.0.1",
+        "lodash": "^4.17.15",
+        "tabbable": "4.0.0",
+        "type-fest": "3.5.2"
+    },
+    "devDependencies": {
+        "@box/storybook-utils": "^0.0.2"
+    },
+    "gitHead": "89c8b593abbdd3ac8575f1ee5cc18206764fb069",
+    "module": "lib-esm/index.js",
+    "type": "module",
+    "main": "lib-esm/index.js",
+    "exports": {
+        ".": {
+            "import": "./lib-esm/index.js",
+            "require": "./lib-esm/index.js"
+        },
+        "./lib-esm/*": {
+            "import": [
+                "./lib-esm/*.js",
+                "./lib-esm/*/index.js"
+            ],
+            "require": [
+                "./lib-esm/*.js",
+                "./lib-esm/*/index.js"
+            ]
+        },
+        "./index.css": {
+            "import": "./lib-esm/index.css"
+        }
+    },
+    "types": "lib-esm/index.d.ts"
+}