@box/blueprint-web 9.16.0 → 9.16.2

package/lib-esm/avatar/consts.js

@@ -1,4 +1,4 @@
-import { BoxBlue50, DarkBlue50, Yellow50, GreenLight50, Yellorange50, LightBlue50, WatermelonRed50, PurpleRain50, Orange50, Grimace50, Size3, Size4, Size5, Size7, Size9, Size2, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Size3, Size4, Size5, Size7, Size9, BoxBlue50, DarkBlue50, Yellow50, GreenLight50, Yellorange50, LightBlue50, WatermelonRed50, PurpleRain50, Orange50, Grimace50, Size2, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
 
 const anonymousAvatarIconSizes = {
   small: Size3,

package/lib-esm/branding-styles/utils/createTheme.js

@@ -6,6 +6,8 @@ import theme from './theme.js';
 import { white, black, bdlGray10, bdlGray, bdlGray80, bdlGray65, bdlGray50 } from './variables.js';
 
 // This is a copy of https://github.com/box/box-ui-elements/blob/master/src/utils/createTheme.js
+// Copied on Mar 5 2023
+// Latest commit c7e1560 on Mar 20, 2020
 /* ----------------- Theme ---------------------------*/
 const THEME_VERY_DARK = 'vDark';
 const THEME_DARK = 'dark';

package/lib-esm/input-chip/input-chip.js

@@ -29,32 +29,30 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
     buttonProps.onKeyDown?.(event);
   };
   const hasError = variant === 'error';
-  return /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */(
-    jsxs("button", {
-      ...buttonProps,
-      ref: ref,
-      "aria-invalid": hasError,
-      className: clsx(styles.container, hasError && styles.error, avatar && styles.avatarContainer, onDelete && styles.deleteButton, className),
-      onKeyDown: handleKeyDown,
-      type: "button",
-      children: [avatar, jsx(Text, {
-        as: "span",
-        className: styles.label,
-        children: label
-      }), onDelete && ( /* Don't use `onClick` handler on icon due to BUIE's "pointer-events: none" style that would cause click event to not trigger  */
-      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-      jsx("span", {
-        className: styles.deleteIcon,
-        onClick: onDelete,
-        children: jsx(XMark, {
-          "aria-hidden": true,
-          "data-testid": "delete-icon",
-          height: Size4,
-          width: Size4
-        })
-      }))]
-    })
-  );
+  return /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */jsxs("button", {
+    ...buttonProps,
+    ref: ref,
+    "aria-invalid": hasError,
+    className: clsx(styles.container, hasError && styles.error, avatar && styles.avatarContainer, onDelete && styles.deleteButton, className),
+    onKeyDown: handleKeyDown,
+    type: "button",
+    children: [avatar, jsx(Text, {
+      as: "span",
+      className: styles.label,
+      children: label
+    }), onDelete && (/* Don't use `onClick` handler on icon due to BUIE's "pointer-events: none" style that would cause click event to not trigger  */
+    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+    jsx("span", {
+      className: styles.deleteIcon,
+      onClick: onDelete,
+      children: jsx(XMark, {
+        "aria-hidden": true,
+        "data-testid": "delete-icon",
+        height: Size4,
+        width: Size4
+      })
+    }))]
+  });
 });
 
 export { InputChip };

package/lib-esm/modal/modal-scrollable-container.js

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef, useRef, useCallback } from 'react';
+import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import { useScrollContext } from '../utils/scroll-context.js';
+import { useForkRef } from '../utils/useForkRef.js';
 import styles from './modal.module.js';
-import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 
 /**
  * Wrapper for the contents of the modal.
@@ -19,6 +20,7 @@ const ModalScrollableContainer = /*#__PURE__*/forwardRef(({
     onScroll,
     onAttach
   } = useScrollContext();
+  const divRef = useRef(null);
   const onMountRef = useCallback(node => {
     onAttach(node);
     if (!forwardedRef) {
@@ -31,13 +33,15 @@ const ModalScrollableContainer = /*#__PURE__*/forwardRef(({
     }
   }, [forwardedRef, onAttach]);
   const handleOnFocus = event => {
-    if (event.target.scrollIntoView) {
-      event.target.scrollIntoView();
+    if (divRef.current?.contains(event.target) && event.target.scrollIntoView) {
+      event.target.scrollIntoView({
+        block: 'nearest'
+      });
     }
   };
   return jsx("div", {
     ...rest,
-    ref: onMountRef,
+    ref: useForkRef(onMountRef, divRef),
     className: clsx(styles.scrollableContainer, className),
     "data-testid": dataTestId,
     onFocus: composeEventHandlers(rest.onFocus, handleOnFocus),

package/lib-esm/util-components/scrollable-container/scrollable-container.d.ts

@@ -26,6 +26,6 @@ export declare const useScroll: (forwardedRef: RefObject<HTMLDivElement>, scroll
         isScrolledToEndY: boolean;
         isScrolledToEndX: boolean;
     };
-    onScrollThrottled: import("lodash").DebouncedFunc<(e: UIEvent<HTMLElement>) => void>;
+    onScrollThrottled: import("lodash").DebouncedFuncLeading<(e: UIEvent<HTMLElement>) => void>;
 };
 export {};

package/lib-esm/utils/use-debounce.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 function useDebounce(value, delay) {
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
     return () => {
       clearTimeout(timer);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.16.0",
+    "version": "9.16.2",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -24,7 +24,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.32.0",
+        "@box/blueprint-web-assets": "^4.32.1",
         "@internationalized/date": "^3.5.4",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -54,7 +54,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.8.1",
+        "@box/storybook-utils": "^0.8.2",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",
@@ -62,9 +62,10 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "7167b603859db70120f58d10f8e29117271b9f9a",
+    "gitHead": "9c7b8b2a403ff2bc3d0f313cdc8a7fb3a73079ed",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
+    "types": "lib-esm/index.d.ts",
     "exports": {
         ".": {
             "import": "./lib-esm/index.js",
@@ -83,6 +84,5 @@
         "./index.css": {
             "import": "./lib-esm/index.css"
         }
-    },
-    "types": "lib-esm/index.d.ts"
+    }
 }