@box/blueprint-web 13.5.10 → 13.5.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-header.d.ts +13 -4
  2. package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-header.js +18 -5
  3. package/dist/lib-esm/primitives/dropdown-menu/index.d.ts +2 -2
  4. package/package.json +3 -3
package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-header.d.ts CHANGED
@@ -1,15 +1,24 @@
1
1
  import { type HTMLAttributes } from 'react';
2
2
  import { type IconButtonProps } from '../icon-button';
3
- export type MenuCloseButtonProps = Omit<IconButtonProps, 'icon' | 'variant' | 'size'>;
3
+ export type MenuCloseButtonProps = Omit<IconButtonProps, 'icon' | 'variant' | 'size'> & {
4
+ /**
5
+ * Controls which icon is displayed and the button's grid placement.
6
+ * - 'close': XMark icon on the right (default)
7
+ * - 'back': ChevronLeft icon on the left
8
+ * @default 'close'
9
+ */
10
+ iconVariant?: 'close' | 'back';
11
+ };
12
+ export type SubMenuBackButtonProps = Omit<MenuCloseButtonProps, 'iconVariant'>;
4
13
  export type TextContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
5
- title: string;
6
14
  subtitle?: string;
15
+ title: string;
7
16
  };
8
17
  export declare const DropdownMenuHeader: (({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
9
18
  MenuCloseButton: import("react").ForwardRefExoticComponent<Omit<MenuCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
10
- SubMenuBackButton: import("react").ForwardRefExoticComponent<Omit<MenuCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
19
+ SubMenuBackButton: import("react").ForwardRefExoticComponent<Omit<SubMenuBackButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
11
20
  TextContent: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
12
- title: string;
13
21
  subtitle?: string;
22
+ title: string;
14
23
  } & import("react").RefAttributes<HTMLDivElement>>;
15
24
  };
package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-header.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { PointerChevronLeft, XMark } from '@box/blueprint-web-assets/icons/Fill';
3
2
  import clsx from 'clsx';
4
3
  import { forwardRef, useCallback } from 'react';
4
+ import { PointerChevronLeft, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
5
+ import { ChevronLeft, XMark } from '@box/blueprint-web-assets/icons/Medium';
6
+ import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
5
7
  import { Text } from '../../text/text.js';
6
8
  import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
7
9
  import { IconButton } from '../icon-button/icon-button.js';
@@ -12,21 +14,28 @@ import styles from './dropdown-menu.module.js';
12
14
  const MenuCloseButton = /*#__PURE__*/forwardRef(({
13
15
  onClick,
14
16
  className,
17
+ iconVariant = 'close',
15
18
  ...rest
16
19
  }, ref) => {
17
20
  const {
18
21
  setIsMenuOpen
19
22
  } = useFullScreenDropdownMenu();
23
+ const {
24
+ enableModernizedComponents
25
+ } = useBlueprintModernization();
20
26
  const handleCloseClick = useCallback(() => {
21
27
  setIsMenuOpen(false);
22
28
  }, [setIsMenuOpen]);
29
+ const BackIcon = enableModernizedComponents ? ChevronLeft : PointerChevronLeft;
30
+ const CloseIcon = enableModernizedComponents ? XMark : XMark$1;
31
+ const isBackVariant = iconVariant === 'back';
23
32
  return jsx(IconButton, {
24
33
  ref: ref,
25
34
  ...rest,
26
- className: clsx(styles.menuCloseButton, className),
27
- icon: XMark,
35
+ className: clsx(isBackVariant ? styles.submenuCloseButton : styles.menuCloseButton, className),
36
+ icon: isBackVariant ? BackIcon : CloseIcon,
28
37
  onClick: composeEventHandlers(handleCloseClick, onClick),
29
- variant: "small-utility"
38
+ variant: isBackVariant ? 'default' : 'small-utility'
30
39
  });
31
40
  });
32
41
  const SubMenuBackButton = /*#__PURE__*/forwardRef(({
@@ -37,14 +46,18 @@ const SubMenuBackButton = /*#__PURE__*/forwardRef(({
37
46
  const {
38
47
  setIsSubMenuOpen
39
48
  } = useSubMenu();
49
+ const {
50
+ enableModernizedComponents
51
+ } = useBlueprintModernization();
40
52
  const handleCloseClick = useCallback(() => {
41
53
  setIsSubMenuOpen(false);
42
54
  }, [setIsSubMenuOpen]);
55
+ const BackIcon = enableModernizedComponents ? ChevronLeft : PointerChevronLeft;
43
56
  return jsx(IconButton, {
44
57
  ref: ref,
45
58
  ...rest,
46
59
  className: clsx(styles.submenuCloseButton, className),
47
- icon: PointerChevronLeft,
60
+ icon: BackIcon,
48
61
  onClick: composeEventHandlers(handleCloseClick, onClick)
49
62
  });
50
63
  });
package/dist/lib-esm/primitives/dropdown-menu/index.d.ts CHANGED
@@ -26,10 +26,10 @@ export declare const DropdownMenu: {
26
26
  SubMenuContent: import("react").ForwardRefExoticComponent<import("./dropdown-menu-sub-menu-content").DropdownMenuSubMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
27
27
  Header: (({ children, className, ...rest }: import("react").HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
28
28
  MenuCloseButton: import("react").ForwardRefExoticComponent<Omit<import("./dropdown-menu-header").MenuCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
29
- SubMenuBackButton: import("react").ForwardRefExoticComponent<Omit<import("./dropdown-menu-header").MenuCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
29
+ SubMenuBackButton: import("react").ForwardRefExoticComponent<Omit<import("./dropdown-menu-header").SubMenuBackButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
30
30
  TextContent: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children"> & {
31
- title: string;
32
31
  subtitle?: string;
32
+ title: string;
33
33
  } & import("react").RefAttributes<HTMLDivElement>>;
34
34
  };
35
35
  SubHeader: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "13.5.10",
3
+ "version": "13.5.12",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -47,7 +47,7 @@
47
47
  "dependencies": {
48
48
  "@ariakit/react": "0.4.15",
49
49
  "@ariakit/react-core": "0.4.15",
50
- "@box/blueprint-web-assets": "^4.104.5",
50
+ "@box/blueprint-web-assets": "^4.104.7",
51
51
  "@internationalized/date": "^3.7.0",
52
52
  "@radix-ui/react-accordion": "1.1.2",
53
53
  "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
77
77
  "type-fest": "^3.2.0"
78
78
  },
79
79
  "devDependencies": {
80
- "@box/storybook-utils": "^0.16.66",
80
+ "@box/storybook-utils": "^0.16.68",
81
81
  "@figma/code-connect": "1.3.12",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",