@box/blueprint-web 7.30.0 → 7.30.1

package/lib-esm/index.css

@@ -5518,11 +5518,11 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   padding-inline-end:1.875rem;
 }
 
-.bp_text_toggle_button_module_textToggleButton--b93f9{
+.bp_text_toggle_button_module_textToggleButton--296a4{
   background:var(--surface-toggle-surface);
-  border:var(--border-1) solid var(--border-switch-border);
+  border:var(--border-1) solid var(--border-toggletext-border-off);
   border-radius:var(--radius-2);
-  color:var(--text-text-on-light);
+  color:var(--text-toggletext-text);
   cursor:pointer;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
@@ -5538,28 +5538,35 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
           user-select:none;
   white-space:nowrap;
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9:disabled{
+.bp_text_toggle_button_module_textToggleButton--296a4:disabled,.bp_text_toggle_button_module_textToggleButton--296a4[aria-disabled]{
   opacity:.3;
   pointer-events:none;
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9[data-focus-visible]{
+.bp_text_toggle_button_module_textToggleButton--296a4:hover{
+  background:var(--surface-toggle-surface-off-hover);
+  border-color:var(--border-toggletext-border-off-hover);
+}
+.bp_text_toggle_button_module_textToggleButton--296a4:focus,.bp_text_toggle_button_module_textToggleButton--296a4[data-focus-visible]{
   box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9:active,.bp_text_toggle_button_module_textToggleButton--b93f9[data-focus-visible]{
-  background:var(--surface-switch-surface-hover);
-  border:var(--border-1) solid var(--border-switch-border-hover);
+.bp_text_toggle_button_module_textToggleButton--296a4:active,.bp_text_toggle_button_module_textToggleButton--296a4[data-active]{
+  background:var(--surface-toggle-surface-off-pressed);
+  border-color:var(--border-toggletext-border-off-pressed);
+}
+.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true]{
+  background:var(--surface-toggletext-surface-on);
+  border:var(--border-1) solid var(--border-toggletext-border-on);
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9:hover{
-  background:var(--surface-toggle-surface-hover);
+.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true]:hover{
+  background:var(--surface-toggletext-surface-on-hover);
+  border-color:var(--border-toggletext-border-on-hover);
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9[aria-pressed=true]{
-  background:var(--surface-toggle-surface-pressed);
-  border:var(--border-1) solid var(--surface-toggle-surface-pressed);
-  color:var(--text-text-on-dark);
+.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true]:focus,.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true][data-focus-visible]{
+  box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9[aria-pressed=true]:active,.bp_text_toggle_button_module_textToggleButton--b93f9[aria-pressed=true]:hover,.bp_text_toggle_button_module_textToggleButton--b93f9[aria-pressed=true][data-focus-visible]{
-  background:var(--surface-toggle-surface-pressed-hover);
-  border:var(--border-1) solid var(--surface-toggle-surface-pressed-hover);
+.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true]:active,.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true][data-active]{
+  background:var(--surface-toggletext-surface-on-pressed);
+  border-color:var(--border-toggletext-border-on-pressed);
 }
 :root{
   --notification-default-paragraph-indent:0rem;

package/lib-esm/text-toggle-button/text-toggle-button.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--b93f9"};
+var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--296a4"};
 
 export { styles as default };

package/lib-esm/util-components/base-grid-list-item/base-grid-list-item-header.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef, useRef, Fragment } from 'react';
+import { forwardRef, useRef } from 'react';
 import { Ghost } from '../../ghost/ghost.js';
 import { useForkRef } from '../../utils/useForkRef.js';
 import { useFullTextTooltip } from '../../utils/useFullTextTooltip.js';
@@ -16,26 +16,26 @@ const BaseGridListHeader = /*#__PURE__*/forwardRef(function BaseGridListHeader(p
     ...rest
   } = props;
   const ref = useRef(null);
+  const {
+    loading
+  } = useBaseGridListItemContext();
+  const {
+    layout
+  } = useBaseGridListContext();
   const {
     Wrapper,
     wrapperProps
   } = useFullTextTooltip({
     ref,
     children,
-    textValue
+    textValue,
+    skipOverflowCheck: loading
   });
-  const {
-    loading
-  } = useBaseGridListItemContext();
-  const {
-    layout
-  } = useBaseGridListContext();
   const isLargeItem = layout === 'list';
   const isSmallListItem = layout === 'small-list';
-  const LoadingWrapper = loading ? Fragment : Wrapper;
   return (
     // @ts-expect-error Fix this type error
-    jsx(LoadingWrapper, {
+    jsx(Wrapper, {
       ...wrapperProps,
       children: jsx("span", {
         ...rest,

package/lib-esm/util-components/base-grid-list-item/base-grid-list-item-subtitle.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef, useRef, Fragment } from 'react';
+import { forwardRef, useRef } from 'react';
 import { Ghost } from '../../ghost/ghost.js';
 import { useForkRef } from '../../utils/useForkRef.js';
 import { useFullTextTooltip } from '../../utils/useFullTextTooltip.js';
@@ -15,21 +15,20 @@ const BaseGridListSubtitle = /*#__PURE__*/forwardRef(function BaseGridListSubtit
     ...rest
   } = props;
   const ref = useRef(null);
-  const {
-    Wrapper,
-    wrapperProps
-  } = useFullTextTooltip({
-    ref,
-    children
-  });
   const {
     loading
   } = useBaseGridListItemContext();
   const {
     layout
   } = useBaseGridListContext();
-  const LoadingWrapper = loading ? Fragment : Wrapper;
-  const loadingWrapperProps = loading ? {} : wrapperProps;
+  const {
+    Wrapper,
+    wrapperProps
+  } = useFullTextTooltip({
+    ref,
+    children,
+    skipOverflowCheck: loading
+  });
   const isGridItem = layout === 'grid';
   const isSmallListItem = layout === 'small-list';
   const forkRef = useForkRef(ref, forwardedRef);
@@ -39,8 +38,8 @@ const BaseGridListSubtitle = /*#__PURE__*/forwardRef(function BaseGridListSubtit
   }
   return (
     // @ts-expect-error Fix this type error
-    jsx(LoadingWrapper, {
-      ...loadingWrapperProps,
+    jsx(Wrapper, {
+      ...wrapperProps,
       children: jsx("span", {
         ...rest,
         ref: forkRef,

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

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

package/lib-esm/utils/useFullTextTooltip.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.30.0",
+    "version": "7.30.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "5af7df50297b80492edb49e2e56af553d1fc466f",
+    "gitHead": "c68217f7a7d9a18a9f6984a3c8582ece76195e66",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {