@box/blueprint-web 17.9.1 → 17.11.0

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Calendar, XMark } from '@box/blueprint-web-assets/icons/Fill';
-import { Size4, Gray65 } from '@box/blueprint-web-assets/tokens/tokens';
+import '@box/blueprint-web-assets/icons/Fill';
+import { Calendar, XMark } from '@box/blueprint-web-assets/icons/Medium';
+import { bpSize040, bpGray65 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as RadixPopover from '@radix-ui/react-popover';
 import clsx from 'clsx';
 import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
@@ -17,11 +18,11 @@ import { useControllableState } from '../utils/useControllableState.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './date-picker.module.js';
 
-const XMarkIcon = label => () => jsx(XMark, {
+const XMarkIconModern = label => () => jsx(XMark, {
   "aria-label": label,
-  color: Gray65,
-  height: Size4,
-  width: Size4
+  color: bpGray65,
+  height: bpSize040,
+  width: bpSize040
 });
 const handleSubmitKeyPress = (key, callback) => {
   const submitKeys = [' ', 'Enter'];
@@ -191,7 +192,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
             "aria-label": clearDatePickerAriaLabel,
             className: clsx(styles.button, styles.clear),
             disabled: isDisabled,
-            icon: XMarkIcon(clearDatePickerAriaLabel),
+            icon: XMarkIconModern(clearDatePickerAriaLabel) ,
             onClick: onClearInputButtonClicked,
             onKeyDownCapture: onClearButtonKeypress,
             size: "x-small"
@@ -204,10 +205,10 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
             onPress: onPressCalendar,
             children: jsx(Calendar, {
               "aria-label": openCalendarDropdownAriaLabel,
-              color: Gray65,
-              height: Size4,
-              width: Size4
-            })
+              color: bpGray65,
+              height: bpSize040,
+              width: bpSize040
+            }) 
           })]
         })
       }), jsx(RadixPopover.Portal, {

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

@@ -1,6 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { BaseGridList } from '../util-components/base-grid-list-item/base-grid-list.js';
+import styles from '../util-components/base-grid-list-item/base-grid-list-item.module.js';
 
 /**
  * GridListV2 is a modernized grid list component for displaying items in a grid layout.
@@ -8,11 +10,14 @@ import { BaseGridList } from '../util-components/base-grid-list-item/base-grid-l
 const GridListV2Root = /*#__PURE__*/forwardRef(function GridListV2(props, forwardedRef) {
   const {
     children,
+    className,
+    hasBorder,
     ...rest
   } = props;
   return jsx(BaseGridList, {
     ...rest,
     ref: forwardedRef,
+    className: clsx(hasBorder && styles.gridListV2XSmallBordered, className),
     layoutStyle: "grid-v2",
     children: children
   });

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

@@ -1,5 +1,5 @@
 import { type RequireAllOrNone } from 'type-fest';
-import { type BaseGridListActionIconButtonProps, type BaseGridListActionsProps, type BaseGridListDescriptionProps, type BaseGridListHeaderProps, type BaseGridListItemProps, type BaseGridListProps, type BaseGridListSubtitleProps, type BaseGridListThumbnailProps } from '../util-components/base-grid-list-item';
+import { type BaseGridListActionIconButtonProps, type BaseGridListActionsProps, type BaseGridListDescriptionProps, type BaseGridListHeaderProps, type BaseGridListItemProps, type BaseGridListProps, type BaseGridListSubtitleProps, type BaseGridListThumbnailProps, type GridV2Variant } from '../util-components/base-grid-list-item';
 export type { GridV2Variant } from '../util-components/base-grid-list-item';
 export type GridListV2HeaderProps = BaseGridListHeaderProps;
 export type GridListV2ThumbnailProps = BaseGridListThumbnailProps;
@@ -7,5 +7,18 @@ export type GridListV2SubtitleProps = BaseGridListSubtitleProps;
 export type GridListV2DescriptionProps = BaseGridListDescriptionProps;
 export type GridListV2ActionsProps = BaseGridListActionsProps;
 export type GridListV2ActionIconButtonProps = BaseGridListActionIconButtonProps;
-export type GridListV2Props = Omit<BaseGridListProps, 'layoutStyle'>;
+type GridListV2CommonProps = Omit<BaseGridListProps, 'layoutStyle' | 'variant' | 'hasBorder'>;
+/**
+ * `hasBorder` is only available on the `x-small` variant. Passing it with any other
+ * variant (including the default) is a type error. A dynamically-typed `GridV2Variant`
+ * without `hasBorder` is always accepted. Boolean variables are supported:
+ * `hasBorder={someBoolean}` type-checks when `variant="x-small"`.
+ */
+export type GridListV2Props = (GridListV2CommonProps & {
+    variant: 'x-small';
+    hasBorder?: boolean;
+}) | (GridListV2CommonProps & {
+    variant?: GridV2Variant;
+    hasBorder?: never;
+});
 export type GridListV2ItemProps = RequireAllOrNone<BaseGridListItemProps, 'pinned' | 'pinAriaLabel'>;