carbon-react 128.4.0 → 129.0.0

package/esm/components/search/search.style.js

@@ -11,47 +11,40 @@ const StyledSearch = styled.div`
   isFocused,
   searchWidth,
   maxWidth,
-  searchIsActive,
   searchHasValue,
   showSearchButton,
   theme,
   variant
 }) => {
   const darkVariant = variant === "dark";
-  const variantColor = darkVariant ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor300)";
-  const iconColor = darkVariant && (searchHasValue && isFocused || !searchHasValue && isFocused || !isFocused && searchHasValue && showSearchButton);
+  const variantColor = darkVariant ? "var(--colorsUtilityYang080)" : "var(--colorsUtilityMajor300)";
   return css`
       ${margin}
       width: ${searchWidth ? `${searchWidth}` : "100%"};
       max-width: ${maxWidth ? `${maxWidth}` : "100%"};
-      padding-bottom: 2px;
+      padding-bottom: var(--spacing025);
       background-color: transparent;
-      border-bottom: 2px solid ${variantColor};
       display: inline-flex;
-      font-size: 14px;
+      font-size: var(--fontSize100);
       font-weight: 700;
-      :hover {
-        border-bottom-color: ${darkVariant ? "var(--colorsUtilityMajor100)" : "var(--colorsUtilityMajor400)"};
-        cursor: pointer;
-      }
-      ${(isFocused || searchHasValue) && css`
-        border-color: transparent;
-        transition: background 0.2s ease;
-        :hover {
-          border-color: transparent;
-        }
-      `}
-      ${isFocused && !searchIsActive && css`
-        border-color: transparent;
-      `}
-      ${!isFocused && searchHasValue && !showSearchButton && css`
-        border-bottom: 2px solid ${variantColor};
+
+      ${!showSearchButton && css`
+        border-bottom: var(--spacing025) solid ${variantColor};
+
         :hover {
-          border-bottom-color: var(--colorsUtilityMajor400);
+          border-bottom-color: ${darkVariant ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajor400)"};
           cursor: pointer;
         }
-      `}
 
+        ${(searchHasValue || isFocused) && css`
+          border-bottom-color: transparent;
+
+          :hover {
+            border-bottom-color: transparent;
+            cursor: default;
+          }
+        `}
+      `}
 
       ${StyledInput} {
         ::-moz-placeholder {
@@ -62,23 +55,50 @@ const StyledSearch = styled.div`
           color: var(--colorsUtilityYin055);
         }
 
-        ${darkVariant && !isFocused && css`
+        ${darkVariant && css`
           ::-moz-placeholder {
-            color: var(--colorsUtilityMajor200);
+            color: var(--colorsUtilityYang080);
             opacity: 1;
           }
           ::placeholder {
-            color: var(--colorsUtilityMajor200);
+            color: var(--colorsUtilityYang080);
           }
         `}
 
-        ${darkVariant && !isFocused && searchHasValue && !showSearchButton && css`
+        ${darkVariant && searchHasValue && !showSearchButton && css`
           color: var(--colorsUtilityYang100);
         `}
       }
 
       ${StyledInputPresentation} {
-        background-color: ${searchHasValue || isFocused ? "var(--colorsUtilityYang100)" : "transparent"};
+        [data-element="search"] {
+          height: auto;
+
+          ${!darkVariant && css`
+            color: var(--colorsUtilityYin065);
+
+            :hover {
+              color: var(--colorsUtilityYin100);
+            }
+          `}
+
+          ${darkVariant && css`
+            color: var(--colorsUtilityYang080);
+
+            :hover {
+              color: var(--colorsUtilityYang100);
+            }
+          `}
+        }
+
+        ${darkVariant && !showSearchButton && css`
+          background-color: transparent;
+          border-color: var(--colorsUtilityYang080);
+        `}
+
+        ${!darkVariant && css`
+          background-color: ${searchHasValue || isFocused || showSearchButton ? "var(--colorsUtilityYang100)" : "transparent"};
+        `}
 
         ${showSearchButton && css`
           border-top-right-radius: var(--borderRadius000);
@@ -86,16 +106,17 @@ const StyledSearch = styled.div`
         `}
 
         flex: 1;
-        font-size: 14px;
+        font-size: var(--fontSize100);
         font-weight: 700;
-        padding-bottom: 2px;
+        padding-bottom: var(--spacing025);
         padding-top: 1px;
         cursor: pointer;
-        ${!isFocused && !searchHasValue && css`
+
+        ${!isFocused && !searchHasValue && !showSearchButton && css`
           border: 1px solid transparent;
         `}
+
         ${!isFocused && searchHasValue && !showSearchButton && css`
-          border: 1px solid transparent;
           background-color: ${darkVariant ? "transparent" : "var(--colorsUtilityYang100)"};
         `}
       }
@@ -104,34 +125,25 @@ const StyledSearch = styled.div`
         flex: 1;
         z-index: ${theme.zIndex.smallOverlay};
       }
+
       ${StyledIcon} {
-        ${darkVariant && css`
-          ${iconColor && css`
-            color: var(--colorsUtilityMajor400);
+        :not([data-element="search"]) {
+          ${darkVariant && !showSearchButton && css`
+            color: var(--colorsUtilityYang080);
 
             :hover {
-              color: var(--colorsUtilityMajor500);
+              color: var(--colorsUtilityYang100);
             }
           `}
-          ${!iconColor && css`
-            color: var(--colorsUtilityMajor200);
+
+          ${!darkVariant && css`
+            color: var(--colorsActionMinor500);
 
             :hover {
-              color: var(--colorsUtilityMajor100);
+              color: var(--colorsActionMinor600);
             }
           `}
-        `}
-
-        ${!darkVariant && css`
-          color: var(--colorsActionMinor500);
-
-          :hover {
-            color: var(--colorsActionMinor600);
-          }
-        `}
-
-        width: 20px;
-        height: 20px;
+        }
         cursor: pointer;
       }
 

package/esm/components/text-editor/text-editor.component.js

@@ -192,12 +192,12 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   };
   const handleEditorFocus = useCallback(focusValue => {
     moveCursor.current = true;
-    setIsFocused(focusValue);
-    if (!isFocused && focusValue && typeof editor === "object" && editor.current !== document.activeElement) {
+    if (focusValue && typeof editor === "object" && editor.current !== document.activeElement) {
       editor.current?.focus();
       setFocusToolbar(false);
     }
-  }, [editor, isFocused]);
+    setIsFocused(focusValue);
+  }, [editor]);
   const handleInlineStyleChange = (ev, style) => {
     ev.preventDefault();
     setActiveInlines({

package/esm/locales/__internal__/es-es.js

@@ -137,6 +137,9 @@ const esES = {
   pod: {
     undo: () => "Deshacer"
   },
+  search: {
+    searchButtonText: () => "Buscar"
+  },
   select: {
     actionButtonText: () => "Añadir un nuevo elemento",
     placeholder: () => "Por favor seleccione...",

package/esm/locales/en-gb.js

@@ -139,6 +139,9 @@ const enGB = {
   pod: {
     undo: () => "Undo"
   },
+  search: {
+    searchButtonText: () => "Search"
+  },
   select: {
     actionButtonText: () => "Add New Item",
     placeholder: () => "Please Select...",

package/esm/locales/locale.d.ts

@@ -114,6 +114,9 @@ interface Locale {
     pod: {
         undo: () => string;
     };
+    search: {
+        searchButtonText: () => string;
+    };
     select: {
         actionButtonText: () => string;
         placeholder: () => string;

package/lib/components/link/link.style.js

@@ -64,14 +64,14 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
       ${isSkipLink && (0, _styledComponents.css)`
         a {
           position: absolute;
-          padding-left: 24px;
-          padding-right: 24px;
+          padding-left: var(--spacing300);
+          padding-right: var(--spacing300);
           line-height: 36px;
           left: -999em;
           z-index: ${theme.zIndex.aboveAll};
-          box-shadow: inset 0 0 0 2px var(--colorsActionMajor500);
-          border: 2px solid var(--colorsUtilityYang100);
-          font-size: 16px;
+          box-shadow: inset 0 0 0 var(--spacing025) var(--colorsActionMajor500);
+          border: var(--spacing025) solid var(--colorsUtilityYang100);
+          font-size: var(--fontSizes200);
           color: var(--colorsUtilityYin090);
 
           &:hover {
@@ -89,15 +89,15 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
         }
 
         a:focus {
-          top: 8px;
-          left: 8px;
+          top: var(--spacing100);
+          left: var(--spacing100);
         }
       `}
 
       ${!isSkipLink && (0, _styledComponents.css)`
-        a,
-        button {
-          font-size: 14px;
+        > a,
+        > button {
+          font-size: var(--fontSizes100);
 
           ${!disabled && (0, _styledComponents.css)`
             color: ${color};
@@ -108,7 +108,7 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
             &:hover {
               color: ${hoverColor};
 
-              ${_icon.default} {
+              > ${_icon.default} {
                 color: ${hoverColor};
               }
             }
@@ -129,8 +129,8 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
         }
       `}
 
-      a,
-      button {
+      > a,
+      > button {
         text-decoration: ${hasContent ? "underline" : "none"};
         ${isMenuItem && "display: inline-block;"}
 
@@ -169,20 +169,20 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
       }
 
       ${!isSkipLink && !disabled && !theme.focusRedesignOptOut && hasFocus && (0, _styledComponents.css)`
-        a,
-        button {
+        > a,
+        > button {
           outline: none;
           text-decoration: none;
           border-bottom-left-radius: var(--borderRadius000);
           border-bottom-right-radius: var(--borderRadius000);
         }
         max-width: fit-content;
-        box-shadow: 0 4px 0 0 var(--colorsUtilityYin090);
+        box-shadow: 0 var(--spacing050) 0 0 var(--colorsUtilityYin090);
         border-bottom-left-radius: var(--borderRadius025);
         border-bottom-right-radius: var(--borderRadius025);
       `}
 
-      button {
+      > button {
         background-color: transparent;
         border: none;
         padding: 0;

package/lib/components/menu/__internal__/submenu/submenu.style.js

@@ -9,7 +9,7 @@ var _themes = require("../../../../style/themes");
 var _link = require("../../../link/link.style");
 var _menu = require("../../menu.style");
 var _menuItem = _interopRequireDefault(require("../../menu-item/menu-item.style"));
-var _search = _interopRequireDefault(require("../../../search/search.style"));
+var _icon = _interopRequireDefault(require("../../../icon/icon.style"));
 var _menu2 = _interopRequireDefault(require("../../menu.config"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -103,17 +103,17 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
       ${!inFullscreenView && menuType && (0, _styledComponents.css)`
         background-color: ${_menu2.default[menuType].submenuItemBackground};
 
-        a:focus,
-        button:focus {
+        > a:focus,
+        > button:focus {
           background-color: ${_menu2.default[menuType].submenuItemBackground};
         }
 
-        a:hover,
-        button:hover {
+        > a:hover,
+        > button:hover {
           background-color: transparent;
           color: var(--colorsComponentsMenuYang100);
 
-          [data-component="icon"] {
+          > [data-component="icon"] {
             color: var(--colorsComponentsMenuYang100);
           }
         }
@@ -123,17 +123,26 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
         text-decoration: none;
       }
 
-      ${_search.default} span > [data-component="icon"] {
-        color: var(--colorsUtilityMajor200);
+      > ${_icon.default} {
+        width: 16px;
+        height: 16px;
+        margin-right: 5px;
+      }
+    }
 
-        &:hover {
-          color: var(--colorsUtilityMajor150);
-        }
+    [data-component="icon"] {
+      line-height: 20px;
+
+      &:before {
+        line-height: unset;
       }
 
-      ${_search.default} {
-        :hover {
-          border-bottom-color: var(--colorsUtilityMajor150);
+      span {
+        vertical-align: middle;
+
+        svg {
+          height: 16px;
+          width: 16px;
         }
       }
     }

package/lib/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -43,22 +43,6 @@ const MenuFullscreen = ({
   const isDarkVariant = ["dark", "black"].includes(menuType);
   const transitionDuration = 200;
   const locale = (0, _useLocale.default)();
-
-  // TODO: Remove this temporary event handler as part of FE-6078
-  const handleFocusedSearchButton = ev => {
-    const search = modalRef.current?.querySelector('[data-component="search"]');
-    const searchInput = search?.querySelector("input");
-    const searchButton = search?.querySelector("button");
-
-    // if there is no value in the search input the button disappears when the input blurs
-    // this means we need to programmatically set focus to the next menu item
-    if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
-      ev.preventDefault();
-      const elements = Array.from(modalRef.current?.querySelectorAll("a, input, button"));
-      const index = elements.indexOf(searchInput);
-      elements[index + 2]?.focus();
-    }
-  };
   const flattenedChildren = _react.default.Children.toArray(children);
   const childArray = _react.default.Children.toArray(flattenedChildren.map((child, index) => {
     if (index < flattenedChildren.length - 1) {
@@ -97,7 +81,6 @@ const MenuFullscreen = ({
     "data-element": dataElement,
     "data-role": dataRole,
     menuType: menuType,
-    onKeyDown: ev => _events.default.isTabKey(ev) && !_events.default.isShiftKey(ev) && handleFocusedSearchButton(ev),
     ref: modalRef,
     role: "dialog",
     tabIndex: -1

package/lib/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -13,6 +13,7 @@ var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _button = _interopRequireDefault(require("../../button/button.style"));
 var _menu = _interopRequireDefault(require("../menu.config"));
 var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
+var _link = require("../../link/link.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -63,10 +64,16 @@ const StyledMenuModal = exports.StyledMenuModal = _styledComponents.default.div`
   width: 100vw;
   outline: none;
 
-  a,
-  button,
-  div {
-    font-size: 16px;
+  && {
+    ${_link.StyledLink} {
+      max-width: 100vw;
+    }
+
+    ${_link.StyledLink} > a,
+    ${_link.StyledLink} > button,
+    > div {
+      font-size: var(--fontSizes200);
+    }
   }
 
   ${({
@@ -76,30 +83,9 @@ const StyledMenuModal = exports.StyledMenuModal = _styledComponents.default.div`
     background-color: ${_menu.default[menuType].background};
 
     && {
-      ${menuType === "dark" && (0, _styledComponents.css)`
-        ${_search.default} span > [data-component="icon"] {
-          color: var(--colorsUtilityMajor200);
-
-          &:hover {
-            color: var(--colorsUtilityMajor150);
-          }
-        }
-      `}
-
-      ${menuType === "light" && (0, _styledComponents.css)`
-        ${_search.default} span > [data-component="icon"] {
-          color: var(--colorsUtilityMajor200);
-
-          &:hover {
-            color: var(--colorsUtilityMajor400);
-          }
-        }
-      `}
-
-    ${_search.default} {
+      ${_search.default} {
         ${_icon.default} {
           display: inline-flex;
-          margin-right: 0;
           bottom: auto;
         }
 

package/lib/components/menu/menu-item/menu-item.component.js

@@ -64,8 +64,6 @@ const MenuItem = ({
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
   const inputRef = (0, _react.useRef)(null);
-  const inputIcon = (0, _react.useRef)(null);
-  inputIcon.current = ref.current ? ref.current.querySelector("[data-element='input-icon-toggle']") : null;
   inputRef.current = ref.current ? ref.current.querySelector("[data-element='input']") : null;
   const focusRef = inputRef.current ? inputRef : ref;
   (0, _react.useEffect)(() => {
@@ -80,18 +78,19 @@ const MenuItem = ({
     };
   }, [registerItem, unregisterItem]);
   (0, _react.useEffect)(() => {
+    const inputIcon = ref.current?.querySelector("[data-element='input-icon-toggle']");
     if (!openSubmenuId && focusFromSubmenu === undefined && focusFromMenu) {
       /* istanbul ignore else */
       if (focusRef.current) {
         focusRef.current?.focus();
       }
-    } else if (focusFromSubmenu && !(shiftTabPressed && inputIcon.current?.getAttribute("tabindex") === "0")) {
+    } else if (focusFromSubmenu && !(shiftTabPressed && inputIcon?.getAttribute("tabindex") === "0")) {
       /* istanbul ignore else */
       if (focusRef.current) {
         focusRef.current?.focus();
       }
     }
-  }, [openSubmenuId, focusFromMenu, focusFromSubmenu, inputIcon, shiftTabPressed, focusRef]);
+  }, [openSubmenuId, focusFromMenu, focusFromSubmenu, shiftTabPressed, focusRef]);
   const updateFocusOnClick = (0, _react.useCallback)(() => {
     if (updateSubmenuFocusId) {
       updateSubmenuFocusId(menuItemId.current);
@@ -104,16 +103,17 @@ const MenuItem = ({
     if (ref.current && _events.default.isEscKey(event)) {
       ref.current?.focus();
     }
-    const shouldFocusIcon = inputIcon.current?.getAttribute("tabindex") === "0" && document.activeElement === inputRef.current && inputRef.current?.value;
+    const inputIcon = ref.current?.querySelector("[data-element='input-icon-toggle']");
+    const shouldFocusIcon = inputIcon?.getAttribute("tabindex") === "0" && document.activeElement === inputRef.current && inputRef.current?.value;
 
     // let natural tab order move focus if input icon is tabbable or input with button exists
-    if (_events.default.isTabKey(event) && (!_events.default.isShiftKey(event) && shouldFocusIcon || _events.default.isShiftKey(event) && document.activeElement === inputIcon.current)) {
+    if (_events.default.isTabKey(event) && (!_events.default.isShiftKey(event) && shouldFocusIcon || _events.default.isShiftKey(event) && document.activeElement === inputIcon)) {
       return;
     }
     if (handleSubmenuKeyDown) {
       handleSubmenuKeyDown(event);
     }
-  }, [onKeyDown, handleSubmenuKeyDown, inputIcon]);
+  }, [onKeyDown, handleSubmenuKeyDown]);
   const elementProps = {
     className: href || onClick ? "carbon-menu-item--has-link" : "",
     href,

package/lib/components/menu/menu-item/menu-item.style.js

@@ -158,9 +158,11 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
         ${!hasInput && `color: ${_menu.default[menuType].color};`}
       }
 
-      ${_icon.default} {
-        display: inline-block;
-      }
+      ${!inFullscreenView && (0, _styledComponents.css)`
+          a > ${_icon.default}, button > ${_icon.default} {
+            display: inline-block;
+          }
+        `}
     }
 
     ${selected && (0, _styledComponents.css)`
@@ -322,10 +324,10 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       }
 
       && {
-        a:focus,
-        a:hover,
-        button:focus,
-        button:hover {
+        > a:focus,
+        > a:hover,
+        > button:focus,
+        > button:hover {
           background-color: var(--colorsComponentsMenuAutumnStandard600);
           color: var(--colorsComponentsMenuYang100);
 

package/lib/components/menu/menu.style.js

@@ -10,6 +10,7 @@ var _menu = _interopRequireDefault(require("./menu.config"));
 var _verticalDivider = require("../vertical-divider/vertical-divider.style");
 var _link = require("../link/link.style");
 var _themes = require("../../style/themes");
+var _menuItem = _interopRequireDefault(require("./menu-item/menu-item.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -75,7 +76,9 @@ const StyledMenuItem = exports.StyledMenuItem = _styledComponents.default.li`
       }
     `}
 
-  ${_styledSystem.padding}
+  ${_menuItem.default} {
+    ${_styledSystem.padding}
+  }
 `;
 StyledMenuItem.defaultProps = {
   theme: _themes.baseTheme

package/lib/components/search/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./search.component";
-export type { SearchProps, SearchEvent } from "./search.component";
+export type { SearchProps, SearchEvent, SearchHandle, } from "./search.component";

package/lib/components/search/search-button.style.js

@@ -20,7 +20,7 @@ const StyledSearchButton = _styledComponents.default.div`
   border-bottom: none;
 
   & ${_button.default} {
-    background-color: var(--colorsActionMajor500);
+    color: var(--colorsActionMajorYang100);
     border-color: var(--colorsActionMajorTransparent);
     border-bottom-left-radius: var(--borderRadius000);
     border-top-left-radius: var(--borderRadius000);
@@ -28,13 +28,18 @@ const StyledSearchButton = _styledComponents.default.div`
     border-top-right-radius: var(--borderRadius050);
 
     :hover {
-      background: var(--colorsActionMajor600);
       border-color: var(--colorsActionMajorTransparent);
     }
 
-    width: 40px;
+    width: fit-content;
+
+    ${_icon.default}${_icon.default} {
+      color: var(--colorsActionMajorYang100);
+    }
+
     margin: 0px 0px;
     padding-bottom: 3px;
+
     :focus {
       z-index: ${({
   theme

package/lib/components/search/search.component.d.ts

@@ -17,8 +17,6 @@ export interface SearchProps extends ValidationProps, MarginProps {
     defaultValue?: string;
     /** Prop for `id` */
     id?: string;
-    /** A callback to retrieve the input reference */
-    inputRef?: React.MutableRefObject<HTMLInputElement | null>;
     /** Prop for `name` */
     name?: string;
     /** Prop for `onBlur` events */
@@ -35,8 +33,11 @@ export interface SearchProps extends ValidationProps, MarginProps {
     onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
     /** Prop for a placeholder */
     placeholder?: string;
-    /** Prop boolean to state whether the `search` icon renders */
-    searchButton?: boolean;
+    /**
+     * Pass a boolean to render a search Button with default text.
+     * Pass a string to override the text in the search Button
+     * */
+    searchButton?: boolean | string;
     /**
      * Prop for specifying an input width length.
      * Leaving the `searchWidth` prop with no value will default the width to '100%'
@@ -47,8 +48,6 @@ export interface SearchProps extends ValidationProps, MarginProps {
      * Leaving the `maxWidth` prop with no value will default the width to '100%'
      */
     maxWidth?: string;
-    /** Prop for active search threshold. This must be a positive number */
-    threshold?: number;
     /** Prop for `controlled` use */
     value?: string;
     /** Prop to specify the styling of the search component */
@@ -58,5 +57,9 @@ export interface SearchProps extends ValidationProps, MarginProps {
     /** Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
-export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
+export declare type SearchHandle = {
+    /** Programmatically focus on root container of Dialog. */
+    focus: () => void;
+} | null;
+export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<SearchHandle>>;
 export default Search;