@box/blueprint-web 9.19.3 → 9.20.0

package/dist/lib-esm/date-picker/date-picker.js

@@ -9,8 +9,8 @@ import { Calendar as Calendar$1 } from '../primitives/calendar/calendar.js';
 import '@internationalized/date';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
-import { useUniqueId } from '../utils/useUniqueId.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './date-picker.module.js';
 
 const XMarkIcon = label => () => jsx(XMark, {
@@ -65,20 +65,15 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     if (value === undefined) {
       setInternalValue(null);
     }
-    firstDateSegmentRef.current?.focus();
   }, [onChange, value]);
   const onCalendarDateSelect = useCallback(() => {
     setIsCalendarOpen(false);
   }, []);
-  const onInputWhiteSpaceClick = useCallback(() => {
-    setIsCalendarOpen(true);
-    shouldFocusStayInInput.current = true;
-  }, []);
-  const onDateSegmentClick = useCallback(() => {
-    setIsCalendarOpen(true);
-    shouldFocusStayInInput.current = true;
+  const onPressCalendar = useCallback(() => {
+    setIsCalendarOpen(v => !v);
+    shouldFocusStayInInput.current = false;
   }, []);
-  const onKeyUp = useCallback(({
+  const onClearButtonKeypress = useCallback(({
     key
   }) => {
     handleSubmitKeyPress(key, () => {
@@ -86,16 +81,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       firstDateSegmentRef.current?.focus();
     });
   }, [onClearInputButtonClicked]);
-  const onKeyUpButton = useCallback(({
-    key
-  }) => {
-    handleSubmitKeyPress(key, () => {
-      setIsCalendarOpen(!isCalendarOpen);
-      shouldFocusStayInInput.current = false;
-    });
-  }, [isCalendarOpen]);
-  const onPress = useCallback(() => {
-    shouldFocusStayInInput.current = false;
+  const onDateInputClick = useCallback(() => {
+    setIsCalendarOpen(true);
+    shouldFocusStayInInput.current = true;
   }, []);
   const hasError = !!error && !isDisabled;
   const calendarKey = `${internalValue?.day}/${internalValue?.month}/${internalValue?.year}${internalValue?.era}`;
@@ -139,12 +127,12 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         asChild: true,
         children: jsxs(Group, {
           className: clsx(styles.group),
-          onClick: onInputWhiteSpaceClick,
-          onMouseUp: onDateSegmentClick,
           children: [jsx("div", {
             className: clsx(styles.groupContainer, {
               [styles.error]: hasError
             }),
+            "data-testid": "date-picker-input",
+            onClickCapture: onDateInputClick,
             children: jsx(DateInput, {
               className: clsx(styles.groupContainerInput),
               children: segment => jsx(DateSegment, {
@@ -163,27 +151,19 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
             disabled: isDisabled,
             icon: XMarkIcon(clearDatePickerAriaLabel),
             onClick: onClearInputButtonClicked,
-            // onKeyDown overwrites handler which manages arrow navigation within group
-            // use onKeyUp instead
-            onKeyUp: onKeyUp,
+            onKeyDownCapture: onClearButtonKeypress,
             size: "x-small"
-          }), jsx(RadixPopover.Trigger, {
-            asChild: true,
-            children: jsx(Button, {
-              ref: calendarButtonRef,
+          }), jsx(Button, {
+            "aria-expanded": isCalendarOpen,
+            "aria-label": openCalendarDropdownAriaLabel,
+            className: styles.button,
+            isDisabled: isDisabled,
+            onPress: onPressCalendar,
+            children: jsx(Calendar, {
               "aria-label": openCalendarDropdownAriaLabel,
-              className: styles.button,
-              isDisabled: isDisabled,
-              // onKeyDown breaks arrow navigation within group
-              // onPress doesn't work with Popover.Trigger - onKeyUp is the only option
-              onKeyUp: onKeyUpButton,
-              onPress: onPress,
-              children: jsx(Calendar, {
-                "aria-label": openCalendarDropdownAriaLabel,
-                color: Gray65,
-                height: Size4,
-                width: Size4
-              })
+              color: Gray65,
+              height: Size4,
+              width: Size4
             })
           })]
         })

package/dist/lib-esm/grid-list-item/grid-list.js

@@ -10,7 +10,7 @@ const GridList = /*#__PURE__*/forwardRef(function GridList(props, forwardedRef)
   return jsx(BaseGridList, {
     ...rest,
     ref: forwardedRef,
-    layout: "grid",
+    layoutStyle: "grid",
     children: children
   });
 });

package/dist/lib-esm/grid-list-item/types.d.ts

@@ -6,5 +6,5 @@ export type GridListSubtitleProps = BaseGridListSubtitleProps;
 export type GridListDescriptionProps = BaseGridListDescriptionProps;
 export type GridListActionsProps = BaseGridListActionsProps;
 export type GridListActionIconButtonProps = BaseGridListActionIconButtonProps;
-export type GridListProps = Omit<BaseGridListProps, 'layout'>;
+export type GridListProps = Omit<BaseGridListProps, 'layoutStyle'>;
 export type GridListItemProps = RequireAllOrNone<BaseGridListItemProps, 'pinned' | 'pinAriaLabel'>;

package/dist/lib-esm/large-list-item/large-list.js

@@ -10,7 +10,7 @@ const LargeList = /*#__PURE__*/forwardRef(function LargeList(props, forwardedRef
   return jsx(BaseGridList, {
     ...rest,
     ref: forwardedRef,
-    layout: "list",
+    layoutStyle: "list",
     children: children
   });
 });

package/dist/lib-esm/large-list-item/types.d.ts

@@ -5,7 +5,7 @@ export type LargeListSubtitleProps = BaseGridListSubtitleProps;
 export type LargeListDescriptionProps = BaseGridListDescriptionProps;
 export type LargeListActionsProps = BaseGridListActionsProps;
 export type LargeListActionIconButtonProps = BaseGridListActionIconButtonProps;
-export type LargeListProps = Omit<BaseGridListProps, 'layout'>;
+export type LargeListProps = Omit<BaseGridListProps, 'layoutStyle'>;
 export type LargeListItemProps = BaseGridListItemProps;
 export interface LargeListSnippetProps {
     /** Regular expression pattern to be highlighted in snippetText */

package/dist/lib-esm/list-item/table-header.js

@@ -25,7 +25,7 @@ const TableHeaderInner = (props, ref) => {
     // creating a `Column` component for each column in the table.
     // This ensures we can later assign an `__ordinal` property to each column.
     if (typeof children === 'function' && columns) {
-      return columns.map(children);
+      return Array.from(columns).map(children);
     }
     return children;
   }, [children, columns]);

package/dist/lib-esm/small-list-item/small-list.js

@@ -10,7 +10,7 @@ const SmallList = /*#__PURE__*/forwardRef(function SmallList(props, forwardedRef
   return jsx(BaseGridList, {
     ...rest,
     ref: forwardedRef,
-    layout: "small-list",
+    layoutStyle: "small-list",
     children: children
   });
 });

package/dist/lib-esm/small-list-item/types.d.ts

@@ -4,5 +4,5 @@ export type SmallListActionsProps = BaseGridListActionsProps;
 export type SmallListHeaderProps = BaseGridListHeaderProps;
 export type SmallListThumbnailProps = BaseGridListThumbnailProps;
 export type SmallListSubtitleProps = BaseGridListSubtitleProps;
-export type SmallListProps = Omit<BaseGridListProps, 'layout'>;
+export type SmallListProps = Omit<BaseGridListProps, 'layoutStyle'>;
 export type SmallListItemProps = BaseGridListItemProps;

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

@@ -85,7 +85,7 @@ const BaseGridListActionIconButton = /*#__PURE__*/forwardRef(function BaseGridLi
 });
 const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions(props, forwardedRef) {
   const {
-    layout,
+    layoutStyle,
     selectionMode
   } = useBaseGridListContext();
   const {
@@ -104,7 +104,7 @@ const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions
   if (loading) {
     return null;
   }
-  const isList = layout === 'list' || layout === 'small-list';
+  const isList = layoutStyle === 'list' || layoutStyle === 'small-list';
   const isSelectionEnabled = selectionMode === 'multiple';
   const isRenderPropUsed = typeof children === 'function';
   return jsxs(Fragment, {

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

@@ -20,7 +20,7 @@ const BaseGridListHeader = /*#__PURE__*/forwardRef(function BaseGridListHeader(p
     loading
   } = useBaseGridListItemContext();
   const {
-    layout
+    layoutStyle
   } = useBaseGridListContext();
   const {
     Wrapper,
@@ -31,8 +31,8 @@ const BaseGridListHeader = /*#__PURE__*/forwardRef(function BaseGridListHeader(p
     textValue,
     skipOverflowCheck: loading
   });
-  const isLargeItem = layout === 'list';
-  const isSmallListItem = layout === 'small-list';
+  const isLargeItem = layoutStyle === 'list';
+  const isSmallListItem = layoutStyle === 'small-list';
   return (
     // @ts-expect-error Fix this type error
     jsx(Wrapper, {

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

@@ -19,7 +19,7 @@ const BaseGridListSubtitle = /*#__PURE__*/forwardRef(function BaseGridListSubtit
     loading
   } = useBaseGridListItemContext();
   const {
-    layout
+    layoutStyle
   } = useBaseGridListContext();
   const {
     Wrapper,
@@ -29,8 +29,8 @@ const BaseGridListSubtitle = /*#__PURE__*/forwardRef(function BaseGridListSubtit
     children,
     skipOverflowCheck: loading
   });
-  const isGridItem = layout === 'grid';
-  const isSmallListItem = layout === 'small-list';
+  const isGridItem = layoutStyle === 'grid';
+  const isSmallListItem = layoutStyle === 'small-list';
   const forkRef = useForkRef(ref, forwardedRef);
   if (isSmallListItem && loading) {
     // no loading state for small list item subtitle

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

@@ -28,12 +28,12 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
     ...rest
   } = props;
   const {
-    layout,
+    layoutStyle,
     isInteractive
   } = useBaseGridListContext();
   const textValue = typeof rest.textValue === 'string' ? rest.textValue : undefined;
   const [isItemInteracted, setIsItemInteracted] = useState(false);
-  // Use debounce with a small delay to make sure there is style flashing finishing interaction (e.g closing dropdown)
+  // Use debounce with a small delay to make sure there is style flashing finishing interaction (e.g. closing dropdown)
   const debouncedIsItemInteracted = useDebounce(isItemInteracted, 50);
   const context = useMemo(() => ({
     loading,
@@ -42,22 +42,22 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
     isItemInteracted,
     setIsItemInteracted
   }), [loading, pinned, pinAriaLabel, isItemInteracted]);
-  let layoutStyle;
-  switch (layout) {
+  let layoutStyleClass;
+  switch (layoutStyle) {
     case 'list':
-      layoutStyle = styles.largeListItem;
+      layoutStyleClass = styles.largeListItem;
       break;
     case 'grid':
-      layoutStyle = styles.gridListItem;
+      layoutStyleClass = styles.gridListItem;
       break;
     case 'small-list':
-      layoutStyle = styles.smallListItem;
+      layoutStyleClass = styles.smallListItem;
   }
   const GridListItem$1 = isInteractive ? GridListItem : StaticGridListItem;
   return jsx(GridListItem$1, {
     ...rest,
     ref: forwardedRef,
-    className: clsx(layoutStyle, {
+    className: clsx(layoutStyleClass, {
       [styles.loading]: loading
     }, {
       [styles.isItemInteracted]: isItemInteracted || debouncedIsItemInteracted

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

@@ -8,7 +8,7 @@ import { StaticGridList } from './static-grid-list.js';
 import styles from './base-grid-list-item.module.js';
 
 const BaseGridListContext = /*#__PURE__*/createContext({
-  layout: 'grid'
+  layoutStyle: 'grid'
 });
 const useBaseGridListContext = () => {
   return useContext(BaseGridListContext);
@@ -27,27 +27,32 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
     onAction,
     className,
     isInteractive = true,
-    layout,
+    layoutStyle,
     ...rest
   } = props;
   const handleOnAction = onAction || noop;
   const context = useMemo(() => ({
     selectionMode: rest.selectionMode,
     selectionBehavior: rest.selectionBehavior,
-    layout,
+    layoutStyle,
     isInteractive,
     onAction: handleOnAction
-  }), [rest.selectionMode, rest.selectionBehavior, layout, isInteractive, handleOnAction]);
-  let layoutStyle;
-  switch (layout) {
+  }), [rest.selectionMode, rest.selectionBehavior, layoutStyle, isInteractive, handleOnAction]);
+  let layoutStyleClass;
+  let layoutFinal;
+  switch (layoutStyle) {
     case 'list':
-      layoutStyle = styles.largeList;
+      layoutStyleClass = styles.largeList;
+      layoutFinal = 'stack';
       break;
     case 'grid':
-      layoutStyle = styles.gridList;
+      layoutStyleClass = styles.gridList;
+      layoutFinal = 'grid';
       break;
     case 'small-list':
-      layoutStyle = styles.smallList;
+      layoutFinal = 'stack';
+      layoutStyleClass = styles.smallList;
+      break;
   }
   const GridList$1 = isInteractive ? GridList : StaticGridList;
   return jsx("div", {
@@ -57,7 +62,8 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
       children: jsx(GridList$1, {
         ...rest,
         ref: forwardedRef,
-        className: clsx(layoutStyle, className),
+        className: clsx(layoutStyleClass, className),
+        layout: layoutFinal,
         onAction: handleOnAction,
         children: children
       })

package/dist/lib-esm/util-components/base-grid-list-item/types.d.ts

@@ -3,7 +3,7 @@ import { type GridListItemProps, type GridListProps as RAGridListProps } from 'r
 import { type IconButtonProps } from '../../primitives/icon-button';
 import { type Modify } from '../../types/modify';
 export interface BaseGridListLayoutProp {
-    layout: 'grid' | 'list' | 'small-list';
+    layoutStyle: 'grid' | 'list' | 'small-list';
 }
 interface CustomGridListProps extends BaseGridListLayoutProp {
     /**
@@ -32,7 +32,7 @@ export type BaseGridListActionsProps = Modify<ComponentPropsWithRef<'div'>, {
     children: ReactNode | ((setIsInteracted: (open: boolean) => void) => ReactNode);
 }>;
 export type BaseGridListActionIconButtonProps = IconButtonProps;
-export interface BaseGridListProps extends RAGridListProps<object>, CustomGridListProps {
+export interface BaseGridListProps extends Omit<RAGridListProps<object>, 'layout'>, CustomGridListProps {
 }
 export interface BaseGridListItemContextType {
     loading?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.19.3",
+    "version": "9.20.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,8 +47,8 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.37.2",
-        "@internationalized/date": "^3.5.4",
+        "@box/blueprint-web-assets": "^4.37.3",
+        "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
         "@radix-ui/react-collapsible": "1.0.3",
@@ -66,23 +66,23 @@
         "@radix-ui/react-toggle-group": "1.0.4",
         "@radix-ui/react-toolbar": "1.0.4",
         "@radix-ui/react-tooltip": "1.0.7",
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/utils": "^3.24.1",
+        "@react-aria/i18n": "^3.12.7",
+        "@react-aria/utils": "^3.28.1",
         "clsx": "^1.2.1",
         "color": "2.0.1",
         "lodash": "^4.17.15",
-        "react-aria": "^3.33.1",
-        "react-aria-components": "^1.2.1",
+        "react-aria": "^3.38.1",
+        "react-aria-components": "^1.7.1",
         "tabbable": "^4.0.0",
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.8.3",
+        "@box/storybook-utils": "^0.9.0",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
-        "react-stately": "^3.31.1",
+        "react-stately": "^3.35.0",
         "tsx": "^4.16.5"
     }
 }