@box/blueprint-web 6.6.2 → 6.6.3

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

@@ -19,7 +19,6 @@ const theme = {
     scrollShadowRgba: 'rgba(0, 0, 0, 0.12)',
     gridUnitPx: parseInt(bdlGridUnitPx, 10) // grid unit in pixels (as number for computations)
   },
-
   // Primary or brand color
   primary: {
     background: bdlBoxBlue,

package/lib-esm/content-card/content-card-image.js

@@ -35,7 +35,6 @@ const ContentCardImage = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
   /* eslint-enable */
 });
-
 ContentCardImage.displayName = 'ContentCard.Image';
 
 export { ContentCardImage };

package/lib-esm/index.css

@@ -3525,6 +3525,42 @@ table.inline-table-module_inlineTable__Se38I tr:not(:last-child) td{
   overflow-y:auto;
 }
 
+.modal-module_headerDividerLine__Lw49q{
+  position:relative;
+}
+.modal-module_headerDividerLine__Lw49q::after{
+  border-bottom:var(--border-1) solid var(--border-divider-border);
+  bottom:0;
+  content:"";
+  left:var(--space-4);
+  position:absolute;
+  right:var(--space-4);
+}
+@media (min-width: 460px){
+  .modal-module_headerDividerLine__Lw49q::after{
+    left:var(--space-6);
+    right:var(--space-6);
+  }
+}
+
+.modal-module_footerDividerLine__HIXCN{
+  position:relative;
+}
+.modal-module_footerDividerLine__HIXCN::before{
+  border-bottom:var(--border-1) solid var(--border-divider-border);
+  content:"";
+  left:var(--space-4);
+  position:absolute;
+  right:var(--space-4);
+  top:0;
+}
+@media (min-width: 460px){
+  .modal-module_footerDividerLine__HIXCN::before{
+    left:var(--space-6);
+    right:var(--space-6);
+  }
+}
+
 .modal-module_footer__bCIwP{
   display:flex;
   justify-content:flex-end;
@@ -3912,8 +3948,7 @@ table.inline-table-module_inlineTable__Se38I tr:not(:last-child) td{
 }
 
 .popover-module_popoverMainContent__eyU1C{
-  -webkit-mask-image:linear-gradient(to top, #0000, var(--gray-black)), linear-gradient(to left, #0000 var(--space-4), var(--gray-black) var(--space-4));
-          mask-image:linear-gradient(to top, #0000, var(--gray-black)), linear-gradient(to left, #0000 var(--space-4), var(--gray-black) var(--space-4));
+  mask-image:linear-gradient(to top, #0000, var(--gray-black)), linear-gradient(to left, #0000 var(--space-4), var(--gray-black) var(--space-4));
   overflow-y:auto;
 }
 
@@ -3927,16 +3962,13 @@ table.inline-table-module_inlineTable__Se38I tr:not(:last-child) td{
 }
 .popover-module_popoverContentContainer__cbRzP .popover-module_popoverCard__CuHZM .popover-module_popoverMainContent__eyU1C{
   margin-inline-end:calc(var(--space-4)*-1);
-  -webkit-mask-position:left bottom;
-          mask-position:left bottom;
-  -webkit-mask-size:100% 20000px;
-          mask-size:100% 20000px;
+  mask-position:left bottom;
+  mask-size:100% 20000px;
   padding-right:var(--space-4);
-  transition:mask-position var(--animation-duration-3), -webkit-mask-position var(--animation-duration-3);
+  transition:mask-position var(--animation-duration-3);
 }
 .popover-module_popoverContentContainer__cbRzP .popover-module_popoverCard__CuHZM .popover-module_popoverMainContent__eyU1C:hover{
-  -webkit-mask-position:left top;
-          mask-position:left top;
+  mask-position:left top;
 }
 .popover-module_popoverContentContainer__cbRzP .popover-module_popoverCard__CuHZM .popover-module_popoverMainContent__eyU1C .popover-module_popoverMainContentOuterContainer__tktDv{
   max-height:inherit;

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

@@ -29,7 +29,7 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
     buttonProps.onKeyDown?.(event);
   };
   const hasError = variant === 'error';
-  return (/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */
+  return /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */(
     jsxs("button", {
       ...buttonProps,
       ref: ref,

package/lib-esm/modal/modal-footer.js

@@ -2,18 +2,27 @@ import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Button } from '../basics/button/button.js';
+import { useScrollContext } from '../utils/scroll-context.js';
 import styles from './modal.module.js';
 
 const ModalFooterComponent = /*#__PURE__*/forwardRef(({
   children,
   className,
   ...rest
-}, forwardedRef) => jsx("div", {
-  ...rest,
-  ref: forwardedRef,
-  className: clsx(styles.footer, className),
-  children: children
-}));
+}, forwardedRef) => {
+  const {
+    isScrolledUnderFooter
+  } = useScrollContext();
+  const footerClasses = clsx(styles.footer, className, {
+    [styles.footerDividerLine]: isScrolledUnderFooter
+  });
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: footerClasses,
+    children: children
+  });
+});
 const PrimaryButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,

package/lib-esm/modal/modal-header.js

@@ -1,5 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, cloneElement } from 'react';
+import { clsx } from 'clsx';
+import { useScrollContext } from '../utils/scroll-context.js';
 import { Text } from '../text/text.js';
 import { ModalTitle } from './modal-title.js';
 import styles from './modal.module.js';
@@ -13,30 +15,38 @@ const ModalHeader = /*#__PURE__*/forwardRef(({
   subtitle,
   backButton,
   ...rest
-}, forwardedRef) => jsxs("div", {
-  className: styles.modalHeader,
-  children: [backButton ? /*#__PURE__*/cloneElement(backButton, {
-    className: styles.backButton
-  }) : null, jsx(ModalTitle, {
-    ...rest,
-    ref: forwardedRef,
-    asChild: true,
-    children: jsxs("div", {
-      className: styles.modalTitle,
-      children: [jsx(Text, {
-        as: "h2",
-        className: className,
-        color: "textOnLightDefault",
-        variant: "titleLarge",
-        children: children
-      }), subtitle && jsx(Text, {
-        as: "h3",
-        color: "textOnLightSecondary",
-        variant: "subtitle",
-        children: subtitle
-      })]
-    })
-  })]
-}));
+}, forwardedRef) => {
+  const {
+    isScrolledUnderHeader
+  } = useScrollContext();
+  const headerClasses = clsx({
+    [styles.headerDividerLine]: isScrolledUnderHeader
+  }, styles.modalHeader);
+  return jsxs("div", {
+    className: headerClasses,
+    children: [backButton ? /*#__PURE__*/cloneElement(backButton, {
+      className: styles.backButton
+    }) : null, jsx(ModalTitle, {
+      ...rest,
+      ref: forwardedRef,
+      asChild: true,
+      children: jsxs("div", {
+        className: styles.modalTitle,
+        children: [jsx(Text, {
+          as: "h2",
+          className: className,
+          color: "textOnLightDefault",
+          variant: "titleLarge",
+          children: children
+        }), subtitle && jsx(Text, {
+          as: "h3",
+          color: "textOnLightSecondary",
+          variant: "subtitle",
+          children: subtitle
+        })]
+      })
+    })]
+  });
+});
 
 export { ModalHeader };

package/lib-esm/modal/modal-scrollable-container.d.ts

@@ -4,4 +4,6 @@ import { type ModalScrollableContainerProps } from './types';
  * Wrapper for the contents of the modal.
  * This element is scrollable when the size of the content would make the modal not fit on the screen.
  */
-export declare const ModalScrollableContainer: import("react").ForwardRefExoticComponent<ModalScrollableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ModalScrollableContainer: import("react").ForwardRefExoticComponent<ModalScrollableContainerProps & {
+    'data-testid'?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,6 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
+import { useScrollContext } from '../utils/scroll-context.js';
+import { useForkRef } from '../utils/useForkRef.js';
 import styles from './modal.module.js';
 
 /**
@@ -10,12 +12,24 @@ import styles from './modal.module.js';
 const ModalScrollableContainer = /*#__PURE__*/forwardRef(({
   children,
   className,
+  'data-testid': dataTestId = 'modal-container',
   ...rest
-}, forwardedRef) => jsx("div", {
-  ...rest,
-  ref: forwardedRef,
-  className: clsx(styles.scrollableContainer, className),
-  children: children
-}));
+}, forwardedRef) => {
+  const {
+    onScroll
+  } = useScrollContext();
+  const scrollableContainerRef = useRef(null);
+  return jsx("div", {
+    ...rest,
+    ref: useForkRef(scrollableContainerRef, forwardedRef),
+    className: clsx(styles.scrollableContainer, className),
+    "data-testid": dataTestId,
+    onScroll: event => {
+      onScroll?.(event);
+      rest.onScroll?.(event);
+    },
+    children: children
+  });
+});
 
 export { ModalScrollableContainer };

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

@@ -86,7 +86,9 @@ export declare const Modal: (({ children, modal, ...props }: ModalProps) => JSX.
         }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
     };
     Header: import("react").ForwardRefExoticComponent<import("./types").ModalHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
-    ScrollableContainer: import("react").ForwardRefExoticComponent<import("./types").ModalScrollableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+    ScrollableContainer: import("react").ForwardRefExoticComponent<import("./types").ModalScrollableContainerProps & {
+        'data-testid'?: string | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
     Trigger: import("react").ForwardRefExoticComponent<import("./types").ModalTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
     Title: import("react").ForwardRefExoticComponent<import("./types").ModalTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
 };

package/lib-esm/modal/modal.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { Root as Root$1 } from '@radix-ui/react-dialog';
+import { ScrollProvider } from '../utils/scroll-context.js';
 import { ModalBody } from './modal-body.js';
 import { ModalClose } from './modal-close.js';
 import { ModalContent } from './modal-content.js';
@@ -16,7 +17,9 @@ const Root = ({
 }) => jsx(Root$1, {
   ...props,
   modal: modal,
-  children: children
+  children: jsx(ScrollProvider, {
+    children: children
+  })
 });
 /**
  * Modal can be used for a number of ways to support focused experiences

package/lib-esm/modal/modal.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"overlay":"modal-module_overlay__OIKwn","content":"modal-module_content__Z8W3U","popup_bounce_in":"modal-module_popup_bounce_in__Q7Slx","close":"modal-module_close__4qYVH","onColor":"modal-module_onColor__qNumt","backButton":"modal-module_backButton__ImG1B","modalHeader":"modal-module_modalHeader__bGhDg","modalTitle":"modal-module_modalTitle__Q-aFr","body":"modal-module_body__HKxP9","scrollableContainer":"modal-module_scrollableContainer__N3upQ","footer":"modal-module_footer__bCIwP","footerButton":"modal-module_footerButton__QlYl3"};
+var styles = {"overlay":"modal-module_overlay__OIKwn","content":"modal-module_content__Z8W3U","popup_bounce_in":"modal-module_popup_bounce_in__Q7Slx","close":"modal-module_close__4qYVH","onColor":"modal-module_onColor__qNumt","backButton":"modal-module_backButton__ImG1B","modalHeader":"modal-module_modalHeader__bGhDg","modalTitle":"modal-module_modalTitle__Q-aFr","body":"modal-module_body__HKxP9","scrollableContainer":"modal-module_scrollableContainer__N3upQ","headerDividerLine":"modal-module_headerDividerLine__Lw49q","footerDividerLine":"modal-module_footerDividerLine__HIXCN","footer":"modal-module_footer__bCIwP","footerButton":"modal-module_footerButton__QlYl3"};
 
 export { styles as default };

package/lib-esm/primitives/chips/filter-chip/filter-chip.d.ts

@@ -6,13 +6,13 @@ export type FilterChipProps = ChipProps;
  * Based on [Radix ToggleGroup.Item](https://www.radix-ui.com/docs/primitives/components/toggle-group#item)
  */
 export declare const FilterChipChip: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
-export type FilterChipGroupProps = Omit<ChipsGroupProps, 'type'> & {
-    type: 'single' | 'multiple';
-};
+export type FilterChipGroupProps = ChipsGroupProps;
 /**
  * Container for FilterChips, this component handles keyboard navigation and chips selection state.
  * Based on [Radix ToggleGroup](https://www.radix-ui.com/docs/primitives/components/toggle-group)
  */
-export declare const FilterChipGroup: import("react").ForwardRefExoticComponent<Omit<Omit<ChipsGroupProps, "type"> & {
-    type: 'single' | 'multiple';
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FilterChipGroup: import("react").ForwardRefExoticComponent<(Omit<import("../types").ChipsGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
+    name: string;
+}, "ref"> | Omit<import("../types").ChipsGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
+    name: string;
+}, "ref">) & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/chips/filter-chip/filter-chip.js

@@ -36,12 +36,10 @@ const FilterChipGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     name,
     children,
     className,
+    onValueChange,
+    type,
     ...rest
   } = props;
-  const groupPropsRest = props.type === 'single' ? rest : rest;
-  const {
-    onValueChange
-  } = groupPropsRest;
   const [chipGroupValue, setChipGroupValue] = useState([]);
   const comboChipsValueReducer = useCallback((groupValueState, groupChangeAction) => {
     const newGroupValue = new Set(groupValueState);
@@ -49,33 +47,38 @@ const FilterChipGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       add: () => newGroupValue.add(groupChangeAction.value),
       delete: () => newGroupValue.delete(groupChangeAction.value)
     })(groupChangeAction.action)?.();
-    onValueChange?.([...chipGroupValue, ...Array.from(newGroupValue)]);
+    if (type === 'multiple') {
+      onValueChange?.([...chipGroupValue, ...Array.from(newGroupValue)]);
+    }
     return newGroupValue;
-  }, [chipGroupValue, onValueChange]);
+  }, [chipGroupValue, type, onValueChange]);
   const [comboChipsValue, dispatchComboChipsValueChange] = useReducer(comboChipsValueReducer, new Set());
   const handleGroupValueChange = useCallback(newValue => {
-    if (props.type === 'single') {
+    if (type === 'single' && typeof newValue === 'string') {
       setChipGroupValue(newValue);
       onValueChange?.(newValue);
-    } else {
+    } else if (type === 'multiple' && typeof newValue !== 'string') {
       const groupValueWithoutOptionValues = newValue.filter(value => !comboChipsValue.has(value));
       setChipGroupValue(groupValueWithoutOptionValues);
       onValueChange?.([...groupValueWithoutOptionValues, ...comboChipsValue]);
     }
-  }, [comboChipsValue, onValueChange, props.type]);
+  }, [comboChipsValue, type, onValueChange]);
   const providerValue = useMemo(() => ({
     comboChipsValue,
     dispatchComboChipsValueChange,
-    type: props.type
-  }), [comboChipsValue, dispatchComboChipsValueChange, props.type]);
+    type
+  }), [comboChipsValue, dispatchComboChipsValueChange, type]);
   return jsx(FilterChipGroupContext.Provider, {
     value: providerValue,
     children: jsx(ChipsGroup, {
-      ...groupPropsRest,
+      ...rest,
       ref: forwardedRef,
       className: className,
       name: name,
       onValueChange: handleGroupValueChange,
+      // FIXME: Get rid of `any` type. It is correctly inferred as 'single' | 'multiple', and should work, but does not.
+      // eslint-disable-next-line
+      type: type,
       children: children
     })
   });

package/lib-esm/primitives/chips/filter-chip/index.d.ts

@@ -2,9 +2,11 @@
 export declare const FilterChip: {
     Chip: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
     ChipButton: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Group: import("react").ForwardRefExoticComponent<Omit<Omit<import("../types").ChipsGroupProps, "type"> & {
-        type: "single" | "multiple";
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<(Omit<import("../types").ChipsGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
+        name: string;
+    }, "ref"> | Omit<import("../types").ChipsGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
+        name: string;
+    }, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "children"> & {
         children: string;
     }, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib-esm/primitives/chips/types.d.ts

@@ -6,10 +6,11 @@ export interface ChipsGroupSingleProps extends ToggleGroup.ToggleGroupImplSingle
 export interface ChipsGroupMultipleProps extends ToggleGroup.ToggleGroupImplMultipleProps {
     type: 'multiple';
 }
-export type ChipsGroupProps = (ChipsGroupSingleProps | ChipsGroupMultipleProps) & (React.RefAttributes<HTMLDivElement> & {
+type SharedChipsGroupProps = React.RefAttributes<HTMLDivElement> & {
     /** The name of the group. Submitted with its owning form as part of a name/value pair. */
     name: string;
-});
+};
+export type ChipsGroupProps = (ChipsGroupSingleProps & SharedChipsGroupProps) | (ChipsGroupMultipleProps & SharedChipsGroupProps);
 export type ChipProps = ToggleGroup.ToggleGroupItemProps;
 export interface ChipIconProps {
     className?: string;
@@ -21,3 +22,4 @@ export type ChipStatusProps = Omit<React.ComponentProps<'div'>, 'children'> & {
 export type ChipLabelProps = Omit<React.ComponentProps<'span'>, 'children'> & {
     children: string;
 };
+export {};

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

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Button } from '../basics/button/button.js';
-import { useScrollContext } from './scroll-context.js';
+import { useScrollContext } from '../utils/scroll-context.js';
 import styles from './side-panel.module.js';
 
 const SidePanelFooterComponent = /*#__PURE__*/forwardRef(({

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

@@ -3,8 +3,8 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 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 { useScrollContext } from './scroll-context.js';
 import styles from './side-panel.module.js';
 import { useVariant } from './variant-context.js';
 

package/lib-esm/side-panel/side-panel-scrollable-container.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
-import { useScrollContext } from './scroll-context.js';
+import { useScrollContext } from '../utils/scroll-context.js';
 import styles from './side-panel.module.js';
 
 /**

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { Root as Root$1 } from '@radix-ui/react-dialog';
-import { ScrollProvider } from './scroll-context.js';
+import { ScrollProvider } from '../utils/scroll-context.js';
 import { SidePanelClose } from './side-panel-close.js';
 import { SidePanelContent, SidePanelPersistentContent } from './side-panel-content.js';
 import { SidePanelFooter } from './side-panel-footer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.6.2",
+    "version": "6.6.3",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -56,7 +56,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.3"
     },
-    "gitHead": "84282ef2f15f752f4e3eaa43e4d3dc66eb36a6f5",
+    "gitHead": "fbe22f91b8ab3b2d24eac63921d216ad6e6b9d22",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {