@box/blueprint-web 12.93.6 → 12.95.0

package/dist/lib-esm/breadcrumb/breadcrumb.d.ts

@@ -1,2 +1,2 @@
 import { type BreadcrumbProps } from './types';
-export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;

package/dist/lib-esm/breadcrumb/breadcrumb.js

@@ -1,38 +1,77 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { FolderTree } from '@box/blueprint-web-assets/icons/Fill';
+import { FolderTree, PointerRight } from '@box/blueprint-web-assets/icons/Fill';
 import { Home } from '@box/blueprint-web-assets/icons/MediumFilled';
+import { Link } from '../primitives/link/link.js';
+import { Text } from '../text/text.js';
 import styles from './breadcrumb.module.js';
 
 const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
+    crumbs,
     rootIconAriaLabel,
     rootIconVariant,
     isInteractive = true,
     size = 'medium',
     truncationMethod = 'ellipsis',
+    onBreadcrumbClick,
     ...rest
   } = props;
-  return jsxs("div", {
-    ref: forwardedRef,
-    className: styles.breadcrumb,
-    ...rest,
-    children: [rootIconVariant === 'home' && jsx(Home, {
-      "aria-label": rootIconAriaLabel
-    }), rootIconVariant === 'folder-tree' && jsx(FolderTree, {
-      "aria-label": rootIconAriaLabel
-    }), jsx("span", {
-      children: "Welcome to Breadcrumb!"
-    }), isInteractive ? jsx("span", {
-      children: "Breadcrumb is interactive"
-    }) : jsx("span", {
-      children: "Breadcrumb is not interactive"
-    }), size && jsxs("span", {
-      children: [", ", size, " size"]
-    }), truncationMethod && jsxs("span", {
-      children: [", and is ", truncationMethod, " truncated"]
-    })]
-  });
+  const handleCrumbClick = id => () => {
+    if (onBreadcrumbClick) {
+      onBreadcrumbClick(id);
+    }
+  };
+  return (
+    // Add aria-label: breadcrumb https://jira.inside-box.net/browse/UXF-427
+    jsx("nav", {
+      ref: forwardedRef,
+      className: styles.breadcrumb,
+      ...rest,
+      children: jsxs("ol", {
+        children: [rootIconVariant && jsxs("li", {
+          children: [rootIconVariant === 'home' ? jsx(Home, {
+            "aria-label": rootIconAriaLabel
+          }) : jsx(FolderTree, {
+            "aria-label": rootIconAriaLabel
+          }), rootIconVariant && jsx(PointerRight, {
+            className: styles.separator,
+            role: "presentation"
+          })]
+        }), crumbs?.map((crumb, index) => index < crumbs.length - 1 ?
+        // Crumb IDs are meant to be folder IDs, which are globally unique. Folder IDs can have collisions with File IDs.
+        jsxs("li", {
+          children: [isInteractive ?
+          // Add hover behavior https://jira.inside-box.net/browse/UXF-428
+          jsx(Link, {
+            className: styles.crumbInteractive,
+            inheritFont: true,
+            onClick: handleCrumbClick(crumb.id),
+            variant: "standalone",
+            children: crumb.name
+          }) : jsx(Text, {
+            as: "span",
+            children: crumb.name
+          }), jsx(PointerRight, {
+            className: styles.separator,
+            role: "presentation"
+          })]
+        }, crumb.id) : jsx("li", {
+          children: jsx(Link, {
+            "aria-current": "page",
+            className: styles.lastCrumb,
+            inheritFont: true,
+            variant: "standalone",
+            children: crumb.name
+          })
+        }, crumb.id)), jsx("li", {
+          children: jsxs("span", {
+            children: [size, " size breadcrumb with ", truncationMethod, " truncation"]
+          })
+        })]
+      })
+    })
+  );
 });
 Breadcrumb.displayName = 'Breadcrumb';
 

package/dist/lib-esm/breadcrumb/breadcrumb.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"breadcrumb":"bp_breadcrumb_module_breadcrumb--84869"};
+var styles = {"breadcrumb":"bp_breadcrumb_module_breadcrumb--f04e8","crumbInteractive":"bp_breadcrumb_module_crumbInteractive--f04e8","lastCrumb":"bp_breadcrumb_module_lastCrumb--f04e8","separator":"bp_breadcrumb_module_separator--f04e8"};
 
 export { styles as default };

package/dist/lib-esm/breadcrumb/types.d.ts

@@ -1,9 +1,19 @@
 import { type RequireAllOrNone } from 'type-fest';
+export type Crumb = {
+    /** Folder ID associated with the crumb. Passed to onBreadcrumbClick when the crumb is clicked. */
+    id: string;
+    /** Display text for the crumb, corresponds to the folder name */
+    name: string;
+};
 export type BreadcrumbProps = {
+    /** Array of breadcrumb items to display. */
+    crumbs: Crumb[];
     /** Controls whether individual crumbs (items) and icons are interactive, or clickable. */
     isInteractive?: boolean;
     /** Controls the height and width of icons and crumbs. */
     size?: 'xsmall' | 'small' | 'medium' | 'large';
+    /** Callback for breadcrumb click. Used to trigger navigation to the clicked folder. */
+    onBreadcrumbClick?: (id: string) => void;
     /** Controls behavior when there are too many crumbs to display.
      * Ellipsis shows the crumbs at the beginning and end, with an ellipsis icon in between.
      * Folder shows only the last crumb, preceded by a folder tree icon.

package/dist/lib-esm/index.css

@@ -1824,11 +1824,95 @@
 .bp_base_badge_module_numericBadgeMoreDigits--c8c81{
   padding:1px 3px;
 }
-.bp_breadcrumb_module_breadcrumb--84869{
+.bp_link_module_link--3786a{
+  color:var(--text-cta-link);
+}
+.bp_link_module_link--3786a:hover{
+  color:var(--text-cta-link-hover);
+}
+.bp_link_module_link--3786a:active{
+  color:var(--text-cta-link-pressed);
+}
+.bp_link_module_link--3786a:focus-visible{
+  border-radius:var(--radius-05);
+  color:var(--text-cta-link-hover);
+}
+.bp_link_module_link--3786a:focus-visible:focus-visible{
+  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+  outline:none;
+  overflow:visible;
+}
+.bp_link_module_link--3786a:focus-visible:active{
+  color:var(--text-cta-link-pressed);
+}
+.bp_link_module_link--3786a.bp_link_module_inheritFont--3786a{
+  font:inherit;
+}
+.bp_link_module_link--3786a.bp_link_module_standalone--3786a{
+  text-decoration:none;
+}
+.bp_link_module_link--3786a.bp_link_module_hasIcon--3786a{
   align-items:center;
+  display:inline-flex;
+  gap:var(--space-1);
+}
+.bp_link_module_link--3786a .bp_link_module_icon--3786a{
+  flex-shrink:0;
+}
+.bp_link_module_link--3786a .bp_link_module_icon--3786a *{
+  fill:currentColor;
+}
+
+.bp_link_module_link--3786a:where([data-modern=false]){
+  font-family:var(--link-default-font-family);
+  font-size:var(--link-default-font-size);
+  font-weight:var(--link-default-font-weight);
+  letter-spacing:var(--link-default-letter-spacing);
+  line-height:var(--link-default-line-height);
+  -webkit-text-decoration:var(--link-default-text-decoration);
+          text-decoration:var(--link-default-text-decoration);
+  text-transform:var(--link-default-text-case);
+}
+
+.bp_link_module_link--3786a:where([data-modern=true]){
+  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:var(--bp-font-size-05);
+  font-style:normal;
+  font-weight:var(--bp-font-weight-regular);
+  letter-spacing:var(--bp-font-letter-spacing-01);
+  line-height:var(--bp-font-line-height-04);
+  text-decoration-line:underline;
+  -webkit-text-decoration-skip-ink:none;
+          text-decoration-skip-ink:none;
+  text-decoration-style:solid;
+  text-decoration-thickness:auto;
+  text-underline-offset:auto;
+}
+nav.bp_breadcrumb_module_breadcrumb--f04e8{
+  align-items:center;
+  color:var(--bp-text-text-on-light-tertiary);
   display:flex;
+  font-size:var(--bp-font-size-06);
   gap:var(--bp-size-010);
-  height:100%;
+  line-height:var(--bp-size-060);
+}
+nav.bp_breadcrumb_module_breadcrumb--f04e8 ol{
+  list-style:none;
+}
+nav.bp_breadcrumb_module_breadcrumb--f04e8 li{
+  display:inline;
+}
+nav.bp_breadcrumb_module_breadcrumb--f04e8 li .bp_breadcrumb_module_crumbInteractive--f04e8{
+  color:inherit;
+}
+nav.bp_breadcrumb_module_breadcrumb--f04e8 li .bp_breadcrumb_module_lastCrumb--f04e8{
+  color:var(--bp-text-text-on-light);
+}
+nav.bp_breadcrumb_module_breadcrumb--f04e8 li .bp_breadcrumb_module_separator--f04e8{
+  height:var(--bp-size-030);
+  margin-left:var(--bp-size-010);
+  margin-right:var(--bp-size-010);
+  width:var(--bp-size-030);
 }
 .bp_button_wrapper_module_buttonWrapper--b0897{
   all:unset;
@@ -5563,70 +5647,6 @@
 .bp_empty_state_module_emptyState--e2700.bp_empty_state_module_small--e2700 .bp_empty_state_module_body--e2700:not(:last-child){
   margin-block-end:var(--space-4);
 }
-.bp_link_module_link--3786a{
-  color:var(--text-cta-link);
-}
-.bp_link_module_link--3786a:hover{
-  color:var(--text-cta-link-hover);
-}
-.bp_link_module_link--3786a:active{
-  color:var(--text-cta-link-pressed);
-}
-.bp_link_module_link--3786a:focus-visible{
-  border-radius:var(--radius-05);
-  color:var(--text-cta-link-hover);
-}
-.bp_link_module_link--3786a:focus-visible:focus-visible{
-  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
-  outline:none;
-  overflow:visible;
-}
-.bp_link_module_link--3786a:focus-visible:active{
-  color:var(--text-cta-link-pressed);
-}
-.bp_link_module_link--3786a.bp_link_module_inheritFont--3786a{
-  font:inherit;
-}
-.bp_link_module_link--3786a.bp_link_module_standalone--3786a{
-  text-decoration:none;
-}
-.bp_link_module_link--3786a.bp_link_module_hasIcon--3786a{
-  align-items:center;
-  display:inline-flex;
-  gap:var(--space-1);
-}
-.bp_link_module_link--3786a .bp_link_module_icon--3786a{
-  flex-shrink:0;
-}
-.bp_link_module_link--3786a .bp_link_module_icon--3786a *{
-  fill:currentColor;
-}
-
-.bp_link_module_link--3786a:where([data-modern=false]){
-  font-family:var(--link-default-font-family);
-  font-size:var(--link-default-font-size);
-  font-weight:var(--link-default-font-weight);
-  letter-spacing:var(--link-default-letter-spacing);
-  line-height:var(--link-default-line-height);
-  -webkit-text-decoration:var(--link-default-text-decoration);
-          text-decoration:var(--link-default-text-decoration);
-  text-transform:var(--link-default-text-case);
-}
-
-.bp_link_module_link--3786a:where([data-modern=true]){
-  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size:var(--bp-font-size-05);
-  font-style:normal;
-  font-weight:var(--bp-font-weight-regular);
-  letter-spacing:var(--bp-font-letter-spacing-01);
-  line-height:var(--bp-font-line-height-04);
-  text-decoration-line:underline;
-  -webkit-text-decoration-skip-ink:none;
-          text-decoration-skip-ink:none;
-  text-decoration-style:solid;
-  text-decoration-thickness:auto;
-  text-underline-offset:auto;
-}
 .bp_base_grid_list_item_module_smallList--51f74[data-modern=false]{
   --small-list-gap:var(--space-2);
   --small-list-padding:var(--space-1);

package/dist/lib-esm/search-input/search-input-controlled/search-input-controlled.js

@@ -1,5 +1,6 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Search } from '@box/blueprint-web-assets/icons/Fill';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Search as Search$1 } from '@box/blueprint-web-assets/icons/Fill';
+import { Search } from '@box/blueprint-web-assets/icons/Medium';
 import { IconCtaIcon, IconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, Children, useMemo, cloneElement } from 'react';
@@ -69,17 +70,22 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     'aria-label': searchInputClearAriaLabel,
     className: clsx(styles.clearSearchIcon, isGlobal && styles.global, isGlobal && !showActionButton && styles.withoutActionButton),
     color: IconCtaIcon,
-    icon: isGlobal ? AccessibleXMarkGlobal : AccessibleXMark,
+    icon: isGlobal ? () => jsx(AccessibleXMarkGlobal, {
+      enableModernizedComponents: enableModernizedComponents
+    }) : () => jsx(AccessibleXMark, {
+      enableModernizedComponents: enableModernizedComponents
+    }),
     onClick: onClearInput,
     size: 'x-small'
-  }), [isGlobal, onClearInput, searchInputClearAriaLabel, showActionButton]);
+  }), [isGlobal, onClearInput, searchInputClearAriaLabel, showActionButton, enableModernizedComponents]);
   const CustomStartIconComponent = useMemo(() => startIcon && /*#__PURE__*/cloneElement(startIcon, {
     className: clsx(startIcon.props?.className, styles.searchIcon, isGlobal && styles.global)
   }), [startIcon, isGlobal]);
+  const Search$2 = useMemo(() => enableModernizedComponents ? Search : Search$1, [enableModernizedComponents]);
   return jsxs("div", {
     className: clsx(styles.search, disabled && styles.disabled, className),
     "data-modern": enableModernizedComponents ? 'true' : 'false',
-    children: [startIcon ? CustomStartIconComponent : jsx(Search, {
+    children: [startIcon ? CustomStartIconComponent : jsx(Search$2, {
       "aria-hidden": "true",
       className: clsx(styles.searchIcon, isGlobal && styles.global),
       color: IconIconOnLightSecondary

package/dist/lib-esm/search-input/search-input.d.ts

@@ -1,6 +1,10 @@
 import { type SearchInputProps } from './types';
-export declare const AccessibleXMark: () => import("react/jsx-runtime").JSX.Element;
-export declare const AccessibleXMarkGlobal: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccessibleXMark: ({ enableModernizedComponents }: {
+    enableModernizedComponents: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AccessibleXMarkGlobal: ({ enableModernizedComponents }: {
+    enableModernizedComponents: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 /**
  * @deprecated This uncontrolled version of SearchInput is deprecated.
  * Currently, we have two SearchInput components: SearchInput and SearchInput.Controlled. In the future, both will be deprecated and replaced

package/dist/lib-esm/search-input/search-input.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Search, XMark } from '@box/blueprint-web-assets/icons/Fill';
+import { Search as Search$1, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
+import { Search, XMark } from '@box/blueprint-web-assets/icons/Medium';
 import { IconIconOnLightSecondary, IconCtaIcon } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, useState, useCallback, Children } from 'react';
@@ -8,14 +9,54 @@ import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { switchCase } from '../utils/switchCase.js';
 import styles from './search.module.js';
 
-const AccessibleXMark = () => jsx(XMark, {
-  role: "presentation"
-});
-const AccessibleXMarkGlobal = () => jsx(XMark, {
-  height: "1.25rem",
-  role: "presentation",
-  width: "1.25rem"
-});
+const AccessibleXMark = ({
+  enableModernizedComponents
+}) => {
+  const XMark$2 = enableModernizedComponents ? XMark : XMark$1;
+  return jsx(XMark$2, {
+    role: "presentation"
+  });
+};
+const AccessibleXMarkGlobal = ({
+  enableModernizedComponents
+}) => {
+  const XMark$2 = enableModernizedComponents ? XMark : XMark$1;
+  return jsx(XMark$2, {
+    height: "1.25rem",
+    role: "presentation",
+    width: "1.25rem"
+  });
+};
+const getClearIcon = (isGlobal, enableModernizedComponents) => {
+  if (isGlobal) {
+    return () => jsx(AccessibleXMarkGlobal, {
+      enableModernizedComponents: enableModernizedComponents
+    });
+  }
+  return () => jsx(AccessibleXMark, {
+    enableModernizedComponents: enableModernizedComponents
+  });
+};
+const handleEnterKey = (event, searchValue, onSubmit) => {
+  event.preventDefault();
+  if (event.nativeEvent.isComposing) {
+    return;
+  }
+  onSubmit?.(searchValue);
+};
+const handleEscapeKey = (event, clearValue) => {
+  event.preventDefault();
+  clearValue();
+};
+const getInputClassNames = (isGlobal, showActionButton) => {
+  return clsx(styles.searchInput, isGlobal && styles.global, {
+    [styles.withoutActionButton]: isGlobal && !showActionButton,
+    [styles.withActionButton]: isGlobal && showActionButton
+  });
+};
+const getClearButtonClassNames = (isGlobal, showActionButton) => {
+  return clsx(styles.clearSearchIcon, isGlobal && styles.global, isGlobal && !showActionButton && styles.withoutActionButton);
+};
 /**
  * @deprecated This uncontrolled version of SearchInput is deprecated.
  * Currently, we have two SearchInput components: SearchInput and SearchInput.Controlled. In the future, both will be deprecated and replaced
@@ -56,26 +97,19 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       return;
     }
     switchCase({
-      Enter: () => {
-        e.preventDefault();
-        if (e.nativeEvent.isComposing) {
-          return;
-        } // prevents submitting when using Japanese IME
-        onSubmit?.(searchInputValue);
-      },
-      Escape: () => {
-        e.preventDefault();
-        updateSearchValue('');
-      }
+      Enter: () => handleEnterKey(e, searchInputValue, onSubmit),
+      Escape: () => handleEscapeKey(e, () => updateSearchValue(''))
     })(e.key)?.();
     onKeyDown?.(e);
   };
   const isGlobal = variant === 'global';
   const showActionButton = Children.count(children) > 0;
+  const Search$2 = enableModernizedComponents ? Search : Search$1;
+  const ClearIcon = useCallback(() => getClearIcon(isGlobal, enableModernizedComponents)(), [isGlobal, enableModernizedComponents]);
   return jsxs("div", {
     className: clsx(styles.search, disabled && styles.disabled, className),
     "data-modern": enableModernizedComponents ? 'true' : 'false',
-    children: [jsx(Search, {
+    children: [jsx(Search$2, {
       "aria-hidden": "true",
       className: clsx(styles.searchIcon, isGlobal && styles.global),
       color: IconIconOnLightSecondary
@@ -83,10 +117,7 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       ...rest,
       ref: forwardedRef,
       "aria-label": searchInputAriaLabel,
-      className: clsx(styles.searchInput, isGlobal && styles.global, {
-        [styles.withoutActionButton]: isGlobal && !showActionButton,
-        [styles.withActionButton]: isGlobal && showActionButton
-      }),
+      className: getInputClassNames(isGlobal, showActionButton),
       disabled: disabled,
       onChange: onSearchInputChanged,
       onKeyDown: onSearchInputKeyDown,
@@ -96,9 +127,9 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       value: searchInputValue
     }), !!searchInputValue && jsx(IconButton, {
       "aria-label": searchInputClearAriaLabel,
-      className: clsx(styles.clearSearchIcon, isGlobal && styles.global, isGlobal && !showActionButton && styles.withoutActionButton),
+      className: getClearButtonClassNames(isGlobal, showActionButton),
       color: IconCtaIcon,
-      icon: isGlobal ? AccessibleXMarkGlobal : AccessibleXMark,
+      icon: ClearIcon,
       onClick: onClearInputButtonClicked,
       size: "x-small"
     }), isGlobal && showActionButton && children]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.93.6",
+    "version": "12.95.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {