carbon-react 128.4.1 → 130.0.0

package/esm/components/flat-table/sort/sort.component.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 export interface SortProps {
     /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
-    sortType?: "ascending" | "descending" | false;
-    /** Callback fired when the `FlatTableSortHeader` is clicked */
+    sortType?: "ascending" | "descending";
+    /** Callback fired when the component is clicked */
     onClick?: () => void;
-    /** Sets the content of `FlatTableSortHeader` */
-    children?: React.ReactNode;
+    /** Sets the text content of the component */
+    children?: string;
+    /** Sets the accessible name of the component */
+    accessibleName?: string;
 }
-export declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
+export declare const Sort: ({ children, onClick, sortType, accessibleName, }: SortProps) => React.JSX.Element;
 export default Sort;

package/esm/components/flat-table/sort/sort.component.js

@@ -1,15 +1,19 @@
 import React, { useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import Event from "../../../__internal__/utils/helpers/events";
+import Typography from "../../typography";
 import { StyledSort, StyledSpaceHolder, StyledSortIcon } from "./sort.style";
 import guid from "../../../__internal__/utils/helpers/guid";
+import useLocale from "../../../hooks/__internal__/useLocale";
 import { FlatTableThemeContext } from "../flat-table.component";
 export const Sort = ({
   children,
   onClick,
-  sortType
+  sortType,
+  accessibleName
 }) => {
   const id = useRef(guid());
+  const locale = useLocale();
   const onKeyDown = e => {
     if (Event.isEnterOrSpaceKey(e)) {
       e.preventDefault();
@@ -20,10 +24,10 @@ export const Sort = ({
   const {
     colorTheme
   } = useContext(FlatTableThemeContext);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    hidden: true,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+    screenReaderOnly: true,
     id: id.current
-  }, children, sortType ? `, sort type ${sortType}` : ", sortable"), /*#__PURE__*/React.createElement(StyledSort, {
+  }, accessibleName || locale.sort.accessibleName(children, sortType)), /*#__PURE__*/React.createElement(StyledSort, {
     role: "button",
     onKeyDown: onKeyDown,
     tabIndex: 0,

package/esm/components/link/link.style.js

@@ -55,14 +55,14 @@ const StyledLink = styled.span`
       ${isSkipLink && 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 {
@@ -80,15 +80,15 @@ const StyledLink = styled.span`
         }
 
         a:focus {
-          top: 8px;
-          left: 8px;
+          top: var(--spacing100);
+          left: var(--spacing100);
         }
       `}
 
       ${!isSkipLink && css`
-        a,
-        button {
-          font-size: 14px;
+        > a,
+        > button {
+          font-size: var(--fontSizes100);
 
           ${!disabled && css`
             color: ${color};
@@ -99,7 +99,7 @@ const StyledLink = styled.span`
             &:hover {
               color: ${hoverColor};
 
-              ${StyledIcon} {
+              > ${StyledIcon} {
                 color: ${hoverColor};
               }
             }
@@ -120,8 +120,8 @@ const StyledLink = styled.span`
         }
       `}
 
-      a,
-      button {
+      > a,
+      > button {
         text-decoration: ${hasContent ? "underline" : "none"};
         ${isMenuItem && "display: inline-block;"}
 
@@ -160,20 +160,20 @@ const StyledLink = styled.span`
       }
 
       ${!isSkipLink && !disabled && !theme.focusRedesignOptOut && hasFocus && 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/esm/components/menu/__internal__/submenu/submenu.style.js

@@ -3,7 +3,7 @@ import { baseTheme } from "../../../../style/themes";
 import { StyledLink } from "../../../link/link.style";
 import { StyledMenuItem } from "../../menu.style";
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
-import StyledSearch from "../../../search/search.style";
+import StyledIcon from "../../../icon/icon.style";
 import menuConfigVariants from "../../menu.config";
 const StyledSubmenuWrapper = styled.div`
   position: relative;
@@ -94,17 +94,17 @@ const StyledSubmenu = styled.ul`
       ${!inFullscreenView && menuType && css`
         background-color: ${menuConfigVariants[menuType].submenuItemBackground};
 
-        a:focus,
-        button:focus {
+        > a:focus,
+        > button:focus {
           background-color: ${menuConfigVariants[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);
           }
         }
@@ -114,17 +114,26 @@ const StyledSubmenu = styled.ul`
         text-decoration: none;
       }
 
-      ${StyledSearch} span > [data-component="icon"] {
-        color: var(--colorsUtilityMajor200);
+      > ${StyledIcon} {
+        width: 16px;
+        height: 16px;
+        margin-right: 5px;
+      }
+    }
 
-        &:hover {
-          color: var(--colorsUtilityMajor150);
-        }
+    [data-component="icon"] {
+      line-height: 20px;
+
+      &:before {
+        line-height: unset;
       }
 
-      ${StyledSearch} {
-        :hover {
-          border-bottom-color: var(--colorsUtilityMajor150);
+      span {
+        vertical-align: middle;
+
+        svg {
+          height: 16px;
+          width: 16px;
         }
       }
     }

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

@@ -34,22 +34,6 @@ export const MenuFullscreen = ({
   const isDarkVariant = ["dark", "black"].includes(menuType);
   const transitionDuration = 200;
   const locale = useLocale();
-
-  // 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.Children.toArray(children);
   const childArray = React.Children.toArray(flattenedChildren.map((child, index) => {
     if (index < flattenedChildren.length - 1) {
@@ -88,7 +72,6 @@ export const MenuFullscreen = ({
     "data-element": dataElement,
     "data-role": dataRole,
     menuType: menuType,
-    onKeyDown: ev => Events.isTabKey(ev) && !Events.isShiftKey(ev) && handleFocusedSearchButton(ev),
     ref: modalRef,
     role: "dialog",
     tabIndex: -1

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

@@ -7,6 +7,7 @@ import StyledIcon from "../../icon/icon.style";
 import StyledButton from "../../button/button.style";
 import menuConfigVariants from "../menu.config";
 import addFocusStyling from "../../../style/utils/add-focus-styling";
+import { StyledLink } from "../../link/link.style";
 const oldFocusStyling = `
 outline: solid 3px var(--colorsSemanticFocus500);
 box-shadow: none;
@@ -54,10 +55,16 @@ const StyledMenuModal = styled.div`
   width: 100vw;
   outline: none;
 
-  a,
-  button,
-  div {
-    font-size: 16px;
+  && {
+    ${StyledLink} {
+      max-width: 100vw;
+    }
+
+    ${StyledLink} > a,
+    ${StyledLink} > button,
+    > div {
+      font-size: var(--fontSizes200);
+    }
   }
 
   ${({
@@ -67,30 +74,9 @@ const StyledMenuModal = styled.div`
     background-color: ${menuConfigVariants[menuType].background};
 
     && {
-      ${menuType === "dark" && css`
-        ${StyledSearch} span > [data-component="icon"] {
-          color: var(--colorsUtilityMajor200);
-
-          &:hover {
-            color: var(--colorsUtilityMajor150);
-          }
-        }
-      `}
-
-      ${menuType === "light" && css`
-        ${StyledSearch} span > [data-component="icon"] {
-          color: var(--colorsUtilityMajor200);
-
-          &:hover {
-            color: var(--colorsUtilityMajor400);
-          }
-        }
-      `}
-
-    ${StyledSearch} {
+      ${StyledSearch} {
         ${StyledIcon} {
           display: inline-flex;
-          margin-right: 0;
           bottom: auto;
         }
 

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

@@ -55,8 +55,6 @@ export const MenuItem = ({
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
   const inputRef = useRef(null);
-  const inputIcon = 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;
   useEffect(() => {
@@ -71,18 +69,19 @@ export const MenuItem = ({
     };
   }, [registerItem, unregisterItem]);
   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 = useCallback(() => {
     if (updateSubmenuFocusId) {
       updateSubmenuFocusId(menuItemId.current);
@@ -95,16 +94,17 @@ export const MenuItem = ({
     if (ref.current && Events.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.isTabKey(event) && (!Events.isShiftKey(event) && shouldFocusIcon || Events.isShiftKey(event) && document.activeElement === inputIcon.current)) {
+    if (Events.isTabKey(event) && (!Events.isShiftKey(event) && shouldFocusIcon || Events.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/esm/components/menu/menu-item/menu-item.style.js

@@ -149,9 +149,11 @@ const StyledMenuItemWrapper = styled.a.attrs({
         ${!hasInput && `color: ${menuConfigVariants[menuType].color};`}
       }
 
-      ${StyledIcon} {
-        display: inline-block;
-      }
+      ${!inFullscreenView && css`
+          a > ${StyledIcon}, button > ${StyledIcon} {
+            display: inline-block;
+          }
+        `}
     }
 
     ${selected && css`
@@ -313,10 +315,10 @@ const StyledMenuItemWrapper = styled.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/esm/components/menu/menu.style.js

@@ -4,6 +4,7 @@ import menuConfigVariants from "./menu.config";
 import { StyledVerticalWrapper, StyledDivider } from "../vertical-divider/vertical-divider.style";
 import { StyledLink } from "../link/link.style";
 import { baseTheme } from "../../style/themes";
+import StyledMenuItemWrapper from "./menu-item/menu-item.style";
 const StyledMenuWrapper = styled.ul`
   line-height: 40px;
   list-style: none;
@@ -66,7 +67,9 @@ const StyledMenuItem = styled.li`
       }
     `}
 
-  ${padding}
+  ${StyledMenuItemWrapper} {
+    ${padding}
+  }
 `;
 StyledMenuItem.defaultProps = {
   theme: baseTheme

package/esm/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/esm/components/search/search-button.style.js

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

package/esm/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;

package/esm/components/search/search.component.js

@@ -1,16 +1,16 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useState, useMemo, useEffect } from "react";
+import React, { useState, useRef, useImperativeHandle } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledSearch from "./search.style";
-import StyledSearchButton, { StyledButtonIcon } from "./search-button.style";
+import StyledSearchButton from "./search-button.style";
 import Icon from "../icon";
 import Textbox from "../textbox";
 import Button from "../button";
 import Logger from "../../__internal__/utils/logger";
-let deprecateInputRefWarnTriggered = false;
+import useLocale from "../../hooks/__internal__/useLocale";
 let deprecateUncontrolledWarnTriggered = false;
 const Search = /*#__PURE__*/React.forwardRef(({
   defaultValue,
@@ -22,7 +22,6 @@ const Search = /*#__PURE__*/React.forwardRef(({
   value,
   id,
   name,
-  threshold = 3,
   searchWidth,
   maxWidth,
   searchButton,
@@ -30,7 +29,6 @@ const Search = /*#__PURE__*/React.forwardRef(({
   placeholder,
   variant = "default",
   "aria-label": ariaLabel = "search",
-  inputRef,
   tabIndex,
   error,
   warning,
@@ -40,33 +38,22 @@ const Search = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const isControlled = value !== undefined;
   const initialValue = isControlled ? value : defaultValue;
-  if (!deprecateInputRefWarnTriggered && inputRef) {
-    deprecateInputRefWarnTriggered = true;
-    Logger.deprecate("The `inputRef` prop in `Search` component is deprecated and will soon be removed. Please use `ref` instead.");
-  }
+  const locale = useLocale();
+  const searchRef = useRef(null);
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    focus() {
+      inputRef.current?.focus();
+    }
+  }), []);
   if (!deprecateUncontrolledWarnTriggered && !isControlled) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Search` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
   !(typeof initialValue === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "This component has no initial value") : invariant(false) : void 0;
-  !(threshold === undefined || typeof threshold === "number" && threshold > 0) ? process.env.NODE_ENV !== "production" ? invariant(false, "Threshold must be a positive number") : invariant(false) : void 0;
   const [searchValue, setSearchValue] = useState(initialValue);
   const [isFocused, setIsFocused] = useState(false);
-  const [searchIsActive, setSearchIsActive] = useState(initialValue.length >= threshold);
-  useEffect(() => {
-    setSearchIsActive(!isControlled ? searchValue.length >= threshold : value.length >= threshold);
-  }, [isControlled, searchValue, threshold, value]);
-  const [iconType, iconTabIndex] = useMemo(() => {
-    const isSearchValueEmpty = !isControlled ? searchValue.length === 0 : value.length === 0;
-    const isFocusedOrActive = isFocused || searchIsActive || inputRef?.current === document.activeElement;
-    if (!isSearchValueEmpty) {
-      return ["cross", 0];
-    }
-    if (!isFocusedOrActive || threshold === 0 || !searchButton && isSearchValueEmpty) {
-      return ["search", -1];
-    }
-    return [undefined, -1];
-  }, [isControlled, searchValue, value, isFocused, searchIsActive, threshold, searchButton, inputRef]);
+  const isSearchValueEmpty = !isControlled ? searchValue.length === 0 : value.length === 0;
   let buttonProps = {};
   const handleChange = event => {
     if (onChange) {
@@ -110,12 +97,15 @@ const Search = /*#__PURE__*/React.forwardRef(({
         }
       });
     }
+    inputRef.current?.focus();
   };
   const handleMouseDown = event => {
     event.preventDefault();
   };
   const handleBlur = event => {
     setIsFocused(false);
+
+    /* istanbul ignore else */
     if (onBlur) {
       onBlur(event);
     }
@@ -128,14 +118,15 @@ const Search = /*#__PURE__*/React.forwardRef(({
       onKeyDown(event);
     }
   };
-  const isSearchTyped = isFocused || (!isControlled ? !!searchValue.length : !!value.length);
+  const searchButtonText = typeof searchButton === "string" ? searchButton : locale.search.searchButtonText();
+  const searchHasValue = !isControlled ? !!searchValue?.length : !!value?.length;
   return /*#__PURE__*/React.createElement(StyledSearch, _extends({
+    ref: searchRef,
     isFocused: isFocused,
     searchWidth: searchWidth,
     maxWidth: maxWidth,
-    searchIsActive: searchIsActive,
-    searchHasValue: !isControlled ? !!searchValue?.length : !!value?.length,
-    showSearchButton: searchButton,
+    searchHasValue: searchHasValue,
+    showSearchButton: !!searchButton,
     variant: variant,
     mb: 0
   }, filterStyledSystemMarginProps(rest), tagComponent("search", rest), {
@@ -144,8 +135,8 @@ const Search = /*#__PURE__*/React.forwardRef(({
   }, rest), /*#__PURE__*/React.createElement(Textbox, {
     placeholder: placeholder,
     value: !isControlled ? searchValue : value,
-    inputIcon: iconType,
-    iconTabIndex: iconTabIndex,
+    inputIcon: !isSearchValueEmpty ? "cross" : undefined,
+    iconTabIndex: !isSearchValueEmpty ? 0 : -1,
     iconOnClick: handleIconClick,
     iconOnMouseDown: handleMouseDown,
     "aria-label": ariaLabel,
@@ -153,30 +144,33 @@ const Search = /*#__PURE__*/React.forwardRef(({
     onBlur: handleBlur,
     onChange: handleChange,
     onKeyDown: handleKeyDown,
-    ref: ref || inputRef,
+    ref: inputRef,
     tabIndex: tabIndex,
     error: error,
     warning: warning,
     info: info,
+    leftChildren: !searchButton ? /*#__PURE__*/React.createElement(Icon, {
+      type: "search",
+      ml: 1
+    }) : undefined,
     tooltipPosition: tooltipPosition
-  }), searchButton && /*#__PURE__*/React.createElement(StyledSearchButton, null, isSearchTyped && /*#__PURE__*/React.createElement(Button, _extends({
+  }), searchButton && /*#__PURE__*/React.createElement(StyledSearchButton, null, /*#__PURE__*/React.createElement(Button, _extends({
     "aria-label": searchButtonAriaLabel,
     size: "medium",
-    px: "16px"
-  }, buttonProps), /*#__PURE__*/React.createElement(StyledButtonIcon, null, /*#__PURE__*/React.createElement(Icon, {
-    type: "search"
-  })))));
+    px: 2,
+    buttonType: "primary",
+    iconPosition: "before",
+    iconType: "search"
+  }, buttonProps), searchButtonText)));
 });
 if (process.env.NODE_ENV !== "production") {
   Search.propTypes = {
     "aria-label": PropTypes.string,
+    "children": PropTypes.node,
     "defaultValue": PropTypes.string,
     "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     "id": PropTypes.string,
     "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    "inputRef": PropTypes.shape({
-      "current": PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object]).isRequired
-    }),
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,
       "description": PropTypes.string,
@@ -339,11 +333,10 @@ if (process.env.NODE_ENV !== "production") {
     "onFocus": PropTypes.func,
     "onKeyDown": PropTypes.func,
     "placeholder": PropTypes.string,
-    "searchButton": PropTypes.bool,
+    "searchButton": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     "searchButtonAriaLabel": PropTypes.string,
     "searchWidth": PropTypes.string,
     "tabIndex": PropTypes.number,
-    "threshold": PropTypes.number,
     "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
     "value": PropTypes.string,
     "variant": PropTypes.oneOf(["dark", "default"]),

package/esm/components/search/search.style.d.ts

@@ -2,7 +2,6 @@ interface StyledSearchProps {
     name?: string;
     isFocused?: boolean;
     searchHasValue?: boolean;
-    searchIsActive?: boolean;
     searchWidth?: string;
     maxWidth?: string;
     showSearchButton?: boolean;