@box/blueprint-web 6.39.4 → 6.40.0

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

@@ -3,7 +3,7 @@ export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit
     /**
      * Styled wrapper over an icon button.
      */
-    ActionButton: import("react").ForwardRefExoticComponent<Omit<import("../..").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    ActionButton: import("react").ForwardRefExoticComponent<Omit<import("./types").SearchInputActionButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     Controlled: import("react").ForwardRefExoticComponent<Omit<import("./search-input-controlled").SearchInputControlledProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 };
 export type { SearchInputActionButtonProps, SearchInputProps } from './types';

package/lib-esm/search-input/search-input-action-button.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare const SearchInputActionButton: import("react").ForwardRefExoticComponent<Omit<import("../primitives/icon-button").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+import { type SearchInputActionButtonProps } from './types';
+export declare const SearchInputActionButton: import("react").ForwardRefExoticComponent<Omit<SearchInputActionButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/search-input/search-input-action-button.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { Tooltip } from '../tooltip/tooltip.js';
 import styles from './search.module.js';
 
 const SearchInputActionButton = /*#__PURE__*/forwardRef(function SearchInputActionButton(props, forwardedRef) {
@@ -10,16 +11,26 @@ const SearchInputActionButton = /*#__PURE__*/forwardRef(function SearchInputActi
     className,
     onClick,
     icon,
+    searchInputActionButtonTooltip,
     ...rest
   } = props;
-  return jsx(IconButton, {
+  // Memoize the props for IconButton
+  const iconButtonProps = useMemo(() => ({
     ...rest,
     ref: forwardedRef,
-    "aria-label": ariaLabel,
+    'aria-label': ariaLabel,
     className: clsx(styles.actionButton, className),
-    icon: icon,
-    // <button> onclick fires for clicks and Space/Enter key when focused.
-    onClick: onClick
+    icon,
+    onClick
+  }), [ariaLabel, className, forwardedRef, icon, onClick, rest]);
+  return searchInputActionButtonTooltip ? jsx(Tooltip, {
+    "aria-hidden": true,
+    content: searchInputActionButtonTooltip,
+    children: jsx(IconButton, {
+      ...iconButtonProps
+    })
+  }) : jsx(IconButton, {
+    ...iconButtonProps
   });
 });
 

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

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Search } from '@box/blueprint-web-assets/icons/Fill';
-import { IconIconOnLightSecondary, IconCtaIcon } from '@box/blueprint-web-assets/tokens/tokens';
+import { IconCtaIcon, IconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import { forwardRef, Children } from 'react';
+import { forwardRef, Children, useMemo } from 'react';
 import { IconButton } from '../../primitives/icon-button/icon-button.js';
+import { Tooltip } from '../../tooltip/tooltip.js';
 import { switchCase } from '../../utils/switchCase.js';
 import { AccessibleXMarkGlobal, AccessibleXMark } from '../search-input.js';
 import styles from '../search.module.js';
@@ -21,6 +22,7 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     searchIconAriaLabel,
     searchInputAriaLabel,
     searchInputClearAriaLabel,
+    searchInputClearButtonTooltip,
     value,
     variant,
     ...rest
@@ -43,6 +45,15 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   };
   const isGlobal = variant === 'global';
   const showActionButton = Children.count(children) > 0;
+  // Memoize the props for ClearButton
+  const clearButtonProps = useMemo(() => ({
+    'aria-label': searchInputClearAriaLabel,
+    className: clsx(styles.clearSearchIcon, isGlobal && styles.global, isGlobal && !showActionButton && styles.withoutActionButton),
+    color: IconCtaIcon,
+    icon: isGlobal ? AccessibleXMarkGlobal : AccessibleXMark,
+    onClick: onClearInput,
+    size: 'x-small'
+  }), [isGlobal, onClearInput, searchInputClearAriaLabel, showActionButton]);
   return jsxs("div", {
     className: clsx(styles.search, className),
     children: [jsx(Search, {
@@ -65,14 +76,15 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       placeholder: placeholder,
       type: "search",
       value: value
-    }), !!value && jsx(IconButton, {
-      "aria-label": searchInputClearAriaLabel,
-      className: clsx(styles.clearSearchIcon, isGlobal && styles.global, isGlobal && !showActionButton && styles.withoutActionButton),
-      color: IconCtaIcon,
-      icon: isGlobal ? AccessibleXMarkGlobal : AccessibleXMark,
-      onClick: onClearInput,
-      size: "x-small"
-    }), isGlobal && showActionButton && children]
+    }), !!value && (searchInputClearButtonTooltip ? jsx(Tooltip, {
+      "aria-hidden": true,
+      content: searchInputClearButtonTooltip,
+      children: jsx(IconButton, {
+        ...clearButtonProps
+      })
+    }) : jsx(IconButton, {
+      ...clearButtonProps
+    })), isGlobal && showActionButton && children]
   });
 });
 

package/lib-esm/search-input/search-input-controlled/types.d.ts

@@ -9,6 +9,10 @@ export interface SearchInputControlledProps extends Omit<SearchInputProps, 'defa
      * Handler that is called when clear button is clicked or escape key is pressed when input is focused
      */
     onClearInput: () => void;
+    /**
+     * Optional prop to add a tooltip to the clear button with passed string as a content.
+     */
+    searchInputClearButtonTooltip?: string;
     /**
      *  Value for controlled search input.
      *

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

@@ -49,4 +49,6 @@ export interface SearchInputProps extends Omit<React.ComponentPropsWithRef<'inpu
      */
     variant?: 'in-context' | 'global';
 }
-export type SearchInputActionButtonProps = IconButtonProps;
+export type SearchInputActionButtonProps = IconButtonProps & {
+    searchInputActionButtonTooltip?: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.39.4",
+    "version": "6.40.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.7"
     },
-    "gitHead": "b1a4e21e02e9e622b8169665c5aedc4ca32d2b6e",
+    "gitHead": "7093fb899e5f046913702cb36e11fb0a55e5cb17",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {