@box/blueprint-web 12.94.0 → 12.95.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.94.0",
+    "version": "12.95.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.79.0",
+        "@box/blueprint-web-assets": "^4.80.0",
         "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.14.16",
+        "@box/storybook-utils": "^0.14.17",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",