@box/blueprint-web 6.9.3 → 6.10.0

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

@@ -1,22 +1,9 @@
 /// <reference types="react" />
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "disabled" | "type" | "onChange" | "defaultValue" | "className" | "onSubmit" | "onKeyDown" | "searchIconAriaLabel" | "searchInputAriaLabel" | "searchInputClearAriaLabel" | "variant"> & {
-    className?: string | undefined;
-    defaultValue?: string | undefined;
-    disabled?: boolean | undefined;
-    onChange?: ((searchInputValue: string) => void) | undefined;
-    onKeyDown?: ((e: import("react").KeyboardEvent<HTMLInputElement>) => void) | undefined;
-    onSubmit?: ((searchInputValue: string) => void) | undefined;
-    searchIconAriaLabel: string;
-    searchInputAriaLabel: string;
-    searchInputClearAriaLabel: string;
-    type?: "search" | undefined;
-    variant?: "in-context" | "global" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<import("./types").SearchInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
     /**
      * Styled wrapper over an icon button.
      */
     ActionButton: import("react").ForwardRefExoticComponent<Omit<import("../..").IconButtonProps, "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/index.js

@@ -1,11 +1,13 @@
 import { SearchInput as SearchInput$1 } from './search-input.js';
 import { SearchInputActionButton } from './search-input-action-button.js';
+import { SearchInputControlled } from './search-input-controlled/search-input-controlled.js';
 
 const SearchInput = Object.assign(SearchInput$1, {
   /**
    * Styled wrapper over an icon button.
    */
-  ActionButton: SearchInputActionButton
+  ActionButton: SearchInputActionButton,
+  Controlled: SearchInputControlled
 });
 
 export { SearchInput };

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

@@ -0,0 +1,2 @@
+export * from './search-input-controlled';
+export * from './types';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type SearchInputControlledProps } from './types';
+export declare const SearchInputControlled: import("react").ForwardRefExoticComponent<Omit<SearchInputControlledProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,79 @@
+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 clsx from 'clsx';
+import { forwardRef, Children } from 'react';
+import { IconButton } from '../../primitives/icon-button/icon-button.js';
+import { switchCase } from '../../utils/switchCase.js';
+import { AccessibleXMarkGlobal, AccessibleXMark } from '../search-input.js';
+import styles from '../search.module.js';
+
+const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    disabled = false,
+    onChange,
+    onClearInput,
+    onKeyDown,
+    onSubmit,
+    placeholder = '',
+    searchIconAriaLabel,
+    searchInputAriaLabel,
+    searchInputClearAriaLabel,
+    value,
+    variant,
+    ...rest
+  } = props;
+  const onSearchInputKeyDown = e => {
+    if (disabled) {
+      return;
+    }
+    switchCase({
+      Enter: () => {
+        e.preventDefault();
+        onSubmit?.(value);
+      },
+      Escape: () => {
+        e.preventDefault();
+        onClearInput();
+      }
+    })(e.key)?.();
+    onKeyDown?.(e);
+  };
+  const isGlobal = variant === 'global';
+  const showActionButton = Children.count(children) > 0;
+  return jsxs("div", {
+    className: clsx(styles.search, className),
+    children: [jsx(Search, {
+      "aria-label": searchIconAriaLabel,
+      className: clsx(styles.searchIcon, isGlobal && styles.global),
+      color: IconIconOnLightSecondary
+    }), jsx("input", {
+      ...rest,
+      ref: forwardedRef,
+      "aria-label": searchInputAriaLabel,
+      className: clsx(styles.searchInput, isGlobal && styles.global, {
+        [styles.withoutActionButton]: isGlobal && !showActionButton
+      }),
+      disabled: disabled,
+      onChange: onChange,
+      onKeyDown: onSearchInputKeyDown,
+      onSubmit: e => {
+        onSubmit?.(value);
+      },
+      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]
+  });
+});
+
+export { SearchInputControlled };

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

@@ -0,0 +1,17 @@
+import { type ChangeEvent } from 'react';
+import { type SearchInputProps } from '../types';
+export interface SearchInputControlledProps extends Omit<SearchInputProps, 'defaultValue' | 'onChange'> {
+    /**
+     * Handler that is called when the search value is changed.
+     */
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Handler that is called when clear button is clicked or escape key is pressed when input is focused
+     */
+    onClearInput: () => void;
+    /**
+     *  Value for controlled search input.
+     *
+     */
+    value: string;
+}

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

@@ -1,16 +1,5 @@
 /// <reference types="react" />
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "disabled" | "type" | "onChange" | "defaultValue" | "className" | "onSubmit" | "onKeyDown" | "searchIconAriaLabel" | "searchInputAriaLabel" | "searchInputClearAriaLabel" | "variant"> & {
-    className?: string | undefined;
-    defaultValue?: string | undefined;
-    disabled?: boolean | undefined;
-    onChange?: ((searchInputValue: string) => void) | undefined;
-    onKeyDown?: ((e: import("react").KeyboardEvent<HTMLInputElement>) => void) | undefined;
-    onSubmit?: ((searchInputValue: string) => void) | undefined;
-    searchIconAriaLabel: string;
-    searchInputAriaLabel: string;
-    searchInputClearAriaLabel: string;
-    type?: "search" | undefined;
-    variant?: "in-context" | "global" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+import { type SearchInputProps } from './types';
+export declare const AccessibleXMark: () => JSX.Element;
+export declare const AccessibleXMarkGlobal: () => JSX.Element;
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -15,6 +15,9 @@ const AccessibleXMarkGlobal = () => jsx(XMark, {
   role: "presentation",
   width: "1.25rem"
 });
+// WARNING: this uncontrolled version of SearchInput is deprecated
+// The logic of SearchInput will be replaced with the logic that is currently in SearchInput.Controlled.
+// This is planned by EO Q1. For more information, please contact the Home Web Team.
 const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
@@ -92,4 +95,4 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 
-export { SearchInput };
+export { AccessibleXMark, AccessibleXMarkGlobal, SearchInput };

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

@@ -1,7 +1,6 @@
 import type React from 'react';
 import { type IconButtonProps } from '../primitives/icon-button';
-import { type Modify } from '../types/modify';
-export type SearchInputProps = Modify<React.ComponentPropsWithRef<'input'>, {
+export interface SearchInputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'onChange' | 'onSubmit'> {
     className?: string;
     /**
      * Default value for search input.
@@ -49,5 +48,5 @@ export type SearchInputProps = Modify<React.ComponentPropsWithRef<'input'>, {
      * @default "in-context"
      */
     variant?: 'in-context' | 'global';
-}>;
+}
 export type SearchInputActionButtonProps = IconButtonProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.9.3",
+    "version": "6.10.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -56,7 +56,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.3"
     },
-    "gitHead": "a9179078ea86d2c0c0c983451cc6b64270f011ec",
+    "gitHead": "6dd474f7b770509844935c8eedd80bc2e61750bd",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {