@box/blueprint-web 8.6.0 → 8.7.0

package/lib-esm/index.css

@@ -5333,7 +5333,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   transform:translateY(-50%);
 }
 
-.bp_side_panel_module_content--1a002{
+.bp_side_panel_module_content--16bae{
   background-color:var(--gray-white);
   border-inline-start:var(--border-1) solid var(--border-divider-border);
   display:flex;
@@ -5346,87 +5346,78 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   overflow:hidden;
 }
 @media only screen and (width > 374px){
-  .bp_side_panel_module_content--1a002{
+  .bp_side_panel_module_content--16bae{
     min-width:320px;
   }
 }
-.bp_side_panel_module_content--1a002 .bp_side_panel_module_header--1a002{
+.bp_side_panel_module_content--16bae .bp_side_panel_module_header--16bae{
   align-items:center;
   background-color:var(--surface-surface);
   border-bottom:var(--border-1) solid var(--border-divider-border);
-  color:var(--text-text-on-light);
   display:flex;
-  font-size:1.125rem;
   justify-content:space-between;
-  line-height:1.5rem;
   padding:var(--space-5) var(--space-4);
   transition-duration:.2s;
   transition-property:box-shadow;
   transition-timing-function:cubic-bezier(0, 0, .6, 1);
   word-break:break-word;
 }
-.bp_side_panel_module_content--1a002 .bp_side_panel_module_header--1a002,.bp_side_panel_module_content--1a002 .bp_side_panel_module_header--1a002.bp_side_panel_module_headerMobile--1a002{
-  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-weight:700;
-  letter-spacing:.01875rem;
-  text-decoration:none;
-  text-transform:none;
-}
-.bp_side_panel_module_content--1a002 .bp_side_panel_module_header--1a002.bp_side_panel_module_headerMobile--1a002{
-  font-size:.9375rem;
-  line-height:1.25rem;
-}
-.bp_side_panel_module_content--1a002 .bp_side_panel_module_headerShadow--1a002{
+.bp_side_panel_module_content--16bae .bp_side_panel_module_headerShadow--16bae{
   box-shadow:var(--dropshadow-3);
 }
 
-.bp_side_panel_module_persistentContent--1a002{
+.bp_side_panel_module_persistentContent--16bae{
   position:relative;
 }
 
-.bp_side_panel_module_contentAnimatedSlideIn--1a002{
+.bp_side_panel_module_contentAnimatedSlideIn--16bae{
   animation-duration:.2s;
-  animation-name:bp_side_panel_module_slideIn--1a002;
+  animation-name:bp_side_panel_module_slideIn--16bae;
   animation-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_contentAnimatedSlideOut--1a002[data-state=closed]{
+.bp_side_panel_module_contentAnimatedSlideOut--16bae[data-state=closed]{
   animation-duration:.2s;
-  animation-name:bp_side_panel_module_slideOut--1a002;
+  animation-name:bp_side_panel_module_slideOut--16bae;
   animation-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_contentNormal--1a002{
+.bp_side_panel_module_contentNormal--16bae{
   width:360px;
 }
 
-.bp_side_panel_module_contentLarge--1a002{
+.bp_side_panel_module_contentLarge--16bae{
   width:420px;
 }
 
-.bp_side_panel_module_dropShadowContent--1a002{
+.bp_side_panel_module_dropShadowContent--16bae{
   box-shadow:var(--dropshadow-3);
 }
 
-.bp_side_panel_module_content--1a002 .bp_side_panel_module_close--1a002{
+.bp_side_panel_module_content--16bae .bp_side_panel_module_close--16bae{
   color:var(--gray-65);
   position:absolute;
   right:var(--space-4);
   top:var(--space-5);
 }
+@media only screen and (width < 374px){
+  .bp_side_panel_module_content--16bae .bp_side_panel_module_close--16bae{
+    top:var(--space-4);
+  }
+}
 
-.bp_side_panel_module_overlayContent--1a002{
+.bp_side_panel_module_overlayContent--16bae{
   box-shadow:var(--dropshadow-3);
   position:fixed;
   right:0;
   top:0;
   z-index:300;
 }
-.bp_side_panel_module_overlayContent--1a002 .bp_side_panel_module_header--1a002{
-  padding:var(--space-6) var(--space-14) var(--space-6) var(--space-4);
+.bp_side_panel_module_overlayContent--16bae .bp_side_panel_module_header--16bae{
+  padding:var(--space-5) var(--space-14) var(--space-5) var(--space-4);
 }
 
-.bp_side_panel_module_overlay--1a002{
+.bp_side_panel_module_overlay--16bae{
   background-color:var(--black-opacity-80);
   bottom:0;
   display:flex;
@@ -5437,20 +5428,20 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   top:0;
   z-index:300;
 }
-.bp_side_panel_module_overlay--1a002 .bp_side_panel_module_content--1a002 .bp_side_panel_module_header--1a002{
+.bp_side_panel_module_overlay--16bae .bp_side_panel_module_content--16bae .bp_side_panel_module_header--16bae{
   padding:var(--space-6) var(--space-14) var(--space-6) var(--space-4);
 }
 
-.bp_side_panel_module_dropShadowOverlay--1a002{
+.bp_side_panel_module_dropShadowOverlay--16bae{
   background-color:initial;
 }
 
-.bp_side_panel_module_scrollableContainer--1a002{
+.bp_side_panel_module_scrollableContainer--16bae{
   flex-grow:1;
   overflow-y:auto;
 }
 
-.bp_side_panel_module_footer--1a002{
+.bp_side_panel_module_footer--16bae{
   background-color:var(--surface-surface);
   display:flex;
   justify-content:flex-end;
@@ -5460,19 +5451,19 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   transition-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_footerShadow--1a002{
+.bp_side_panel_module_footerShadow--16bae{
   box-shadow:var(--dropshadow-3-inverse);
 }
 
-.bp_side_panel_module_footerButton--1a002{
+.bp_side_panel_module_footerButton--16bae{
   margin-inline-start:var(--space-2);
 }
 
-.bp_side_panel_module_footerButton--1a002 + .bp_side_panel_module_footerButton--1a002{
+.bp_side_panel_module_footerButton--16bae + .bp_side_panel_module_footerButton--16bae{
   margin-inline-start:var(--space-3);
 }
 
-@keyframes bp_side_panel_module_slideIn--1a002{
+@keyframes bp_side_panel_module_slideIn--16bae{
   from{
     inset-inline-end:-100%;
   }
@@ -5480,7 +5471,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
     inset-inline-end:0;
   }
 }
-@keyframes bp_side_panel_module_slideOut--1a002{
+@keyframes bp_side_panel_module_slideOut--16bae{
   from{
     inset-inline-end:0;
   }

package/lib-esm/primitives/icon-button/icon-button.js

@@ -12,10 +12,11 @@ const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     icon,
     ...rest
   } = props;
+  const sizeStyles = variant === 'small-utility' ? styles.small : styles[size];
   return jsx(Button, {
     ...rest,
     ref: forwardedRef,
-    className: clsx(styles.iconButton, styles[variant], styles[size], props.className),
+    className: clsx(styles.iconButton, styles[variant], sizeStyles, props.className),
     children: /*#__PURE__*/createElement(icon, {
       className: styles.icon,
       height: iconSizeMap[size],

package/lib-esm/primitives/icon-button/types.d.ts

@@ -36,7 +36,7 @@ export interface IconButtonSmallUtilityVariantProps extends IconButtonCommonProp
     /**
      * The only acceptable size for the 'small-utility' variant is 'small'.
      */
-    size: Extract<IconButtonSize, 'small'>;
+    size?: Extract<IconButtonSize, 'small'>;
 }
 export type IconButtonProps = IconButtonVariantsProps | IconButtonSmallUtilityVariantProps;
 export {};

package/lib-esm/side-panel/side-panel-close.js

@@ -3,8 +3,12 @@ import { XMark } from '@box/blueprint-web-assets/icons/Fill';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import styles from './side-panel.module.js';
 
+const smallViewportProps = {
+  variant: 'small-utility'
+};
 /**
  * The button that closes the SidePanel.
  */
@@ -12,15 +16,21 @@ const SidePanelClose = /*#__PURE__*/forwardRef(({
   'aria-label': ariaLabel,
   icon,
   ...rest
-}, forwardedRef) => jsx(RadixDialog.Close, {
-  ref: forwardedRef,
-  asChild: true,
-  children: jsx(IconButton, {
-    "aria-label": ariaLabel,
-    className: styles.close,
-    icon: icon || XMark,
-    ...rest
-  })
-}));
+}, forwardedRef) => {
+  const breakpoint = useBreakpoint();
+  const smallBreakpointActive = breakpoint === Breakpoint.Small;
+  const finalProps = smallBreakpointActive ? smallViewportProps : {};
+  return jsx(RadixDialog.Close, {
+    ref: forwardedRef,
+    asChild: true,
+    children: jsx(IconButton, {
+      ...rest,
+      "aria-label": ariaLabel,
+      className: styles.close,
+      icon: icon || XMark,
+      ...finalProps
+    })
+  });
+});
 
 export { SidePanelClose };

package/lib-esm/side-panel/side-panel-header.js

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Text } from '../text/text.js';
 import { useScrollContext } from '../utils/scroll-context.js';
-import { useMobile } from '../utils/useMobile.js';
+import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import styles from './side-panel.module.js';
 import { useVariant } from './variant-context.js';
 
@@ -13,13 +13,15 @@ const BaseSidePanelHeader = /*#__PURE__*/forwardRef(({
   className,
   ...rest
 }, forwardedRef) => {
+  const breakpoint = useBreakpoint();
+  const smallBreakpointActive = breakpoint === Breakpoint.Small;
   return jsx(Text, {
     ...rest,
     ref: forwardedRef,
     as: "h1",
     className: clsx(styles.header, className),
     color: "textOnLightDefault",
-    variant: "titleLarge",
+    variant: smallBreakpointActive ? 'titleMedium' : 'titleLarge',
     children: children
   });
 });
@@ -34,11 +36,9 @@ const SidePanelHeader = /*#__PURE__*/forwardRef(({
   const {
     isScrolledUnderHeader
   } = useScrollContext();
-  const isMobile = useMobile();
   const variant = useVariant();
   const classes = clsx({
-    [styles.headerShadow]: isScrolledUnderHeader,
-    [styles.headerMobile]: isMobile
+    [styles.headerShadow]: isScrolledUnderHeader
   }, className);
   if (variant === 'overlay' || variant === 'dropShadowOverlay' || variant === 'interactiveOverlay') {
     return jsx(RadixDialog.Title, {

package/lib-esm/side-panel/side-panel.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"content":"bp_side_panel_module_content--1a002","header":"bp_side_panel_module_header--1a002","headerMobile":"bp_side_panel_module_headerMobile--1a002","headerShadow":"bp_side_panel_module_headerShadow--1a002","persistentContent":"bp_side_panel_module_persistentContent--1a002","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--1a002","slideIn":"bp_side_panel_module_slideIn--1a002","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--1a002","slideOut":"bp_side_panel_module_slideOut--1a002","contentNormal":"bp_side_panel_module_contentNormal--1a002","contentLarge":"bp_side_panel_module_contentLarge--1a002","dropShadowContent":"bp_side_panel_module_dropShadowContent--1a002","close":"bp_side_panel_module_close--1a002","overlayContent":"bp_side_panel_module_overlayContent--1a002","overlay":"bp_side_panel_module_overlay--1a002","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--1a002","scrollableContainer":"bp_side_panel_module_scrollableContainer--1a002","footer":"bp_side_panel_module_footer--1a002","footerShadow":"bp_side_panel_module_footerShadow--1a002","footerButton":"bp_side_panel_module_footerButton--1a002"};
+var styles = {"content":"bp_side_panel_module_content--16bae","header":"bp_side_panel_module_header--16bae","headerShadow":"bp_side_panel_module_headerShadow--16bae","persistentContent":"bp_side_panel_module_persistentContent--16bae","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--16bae","slideIn":"bp_side_panel_module_slideIn--16bae","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--16bae","slideOut":"bp_side_panel_module_slideOut--16bae","contentNormal":"bp_side_panel_module_contentNormal--16bae","contentLarge":"bp_side_panel_module_contentLarge--16bae","dropShadowContent":"bp_side_panel_module_dropShadowContent--16bae","close":"bp_side_panel_module_close--16bae","overlayContent":"bp_side_panel_module_overlayContent--16bae","overlay":"bp_side_panel_module_overlay--16bae","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--16bae","scrollableContainer":"bp_side_panel_module_scrollableContainer--16bae","footer":"bp_side_panel_module_footer--16bae","footerShadow":"bp_side_panel_module_footerShadow--16bae","footerButton":"bp_side_panel_module_footerButton--16bae"};
 
 export { styles as default };

package/lib-esm/side-panel/types.d.ts

@@ -43,7 +43,7 @@ export interface SidePanelFooterProps extends ComponentPropsWithRef<'div'> {
     /** Content of the Footer element */
     children: ReactNode;
 }
-export interface SidePanelHeaderProps extends ComponentPropsWithRef<'h2'> {
+export interface SidePanelHeaderProps extends ComponentPropsWithRef<'h1'> {
     /** Content of the Header element */
     children: ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "8.6.0",
+    "version": "8.7.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "2ec92118d3ea2a0eefe7683535893fbd21fc38e8",
+    "gitHead": "c6aecbdc9ecebff79bc52370ed1d612ff2eec44b",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {

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

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

package/lib-esm/utils/useMobile.js

@@ -1,14 +0,0 @@
-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 };