carbon-react 154.3.2 → 154.3.3-beta.1

package/esm/components/radio-button/radio-button-svg.component.js

@@ -1,21 +1 @@
-import React from "react";
-import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
-const RadioButtonSvg = () => {
-  return /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
-    "data-role": "radio-svg",
-    focusable: "false",
-    viewBox: "0 0 15 15"
-  }, /*#__PURE__*/React.createElement("g", {
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: "radio-button-check",
-    fill: "#FFFFFF",
-    cx: "7.5",
-    cy: "7.5",
-    r: "5"
-  }))));
-};
-export default /*#__PURE__*/React.memo(RadioButtonSvg, () => true);
+import{jsx as e}from"react/jsx-runtime";import r from"react";import l from"../../__internal__/checkable-input/checkable-input-svg-wrapper.style.js";const o=()=>e(l,{children:e("svg",{"data-role":"radio-svg",focusable:"false",viewBox:"0 0 15 15",children:e("g",{stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd",children:e("circle",{className:"radio-button-check",fill:"#FFFFFF",cx:"7.5",cy:"7.5",r:"5"})})})});var t=r.memo(o,(()=>!0));export{t as default};

package/esm/components/radio-button/radio-button.component.js

@@ -1,107 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useContext } from "react";
-import invariant from "invariant";
-import RadioButtonStyle from "./radio-button.style";
-import CheckableInput from "../../__internal__/checkable-input/checkable-input.component";
-import RadioButtonSvg from "./radio-button-svg.component";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-export const RadioButton = /*#__PURE__*/React.forwardRef(({
-  autoFocus,
-  checked,
-  disabled,
-  fieldHelp,
-  fieldHelpInline,
-  id,
-  inline,
-  inputWidth,
-  label,
-  labelHelp,
-  labelSpacing = 1,
-  labelWidth,
-  name,
-  onChange,
-  onBlur,
-  onFocus,
-  value,
-  reverse = false,
-  size,
-  error,
-  warning,
-  info,
-  tooltipPosition,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  helpAriaLabel,
-  ...props
-}, ref) => {
-  const {
-    validationRedesignOptIn
-  } = useContext(NewValidationContext);
-  const marginProps = filterStyledSystemMarginProps(props);
-  const handleChange = useCallback(event => {
-    /* istanbul ignore else */
-    if (onChange) {
-      onChange(event);
-    }
-
-    // trigger focus, as Safari doesn't focus radioButtons on click by default
-    event.target.focus();
-  }, [onChange]);
-  const validationProps = {
-    error,
-    warning,
-    info
-  };
-  const commonProps = {
-    ...validationProps,
-    disabled,
-    inputWidth,
-    fieldHelpInline,
-    labelSpacing
-  };
-  const inputProps = {
-    ...commonProps,
-    autoFocus,
-    checked,
-    fieldHelp,
-    name,
-    onChange: handleChange,
-    onBlur,
-    onFocus,
-    labelInline: true,
-    labelWidth,
-    label,
-    labelHelp,
-    id,
-    value,
-    type: "radio",
-    /**
-     * Invert the reverse prop, to ensure the FormField component renders the components
-     * in the desired order (other elements which use FormField render their sub-components the
-     * opposite way around by default)
-     */
-    reverse: !reverse,
-    ref,
-    ...props,
-    "data-component": undefined
-  };
-  !!props.children ? process.env.NODE_ENV !== "production" ? invariant(false, "This component is meant to be used as a self-closing tag. " + "You should probably use the label prop instead.") : invariant(false) : void 0;
-  const componentToRender = /*#__PURE__*/React.createElement(RadioButtonStyle, _extends({
-    applyNewValidation: validationRedesignOptIn,
-    inline: inline,
-    reverse: reverse,
-    size: size
-  }, commonProps, marginProps, tagComponent("radio-button", {
-    "data-element": dataElement,
-    "data-role": dataRole
-  })), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(RadioButtonSvg, null)));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/React.createElement(TooltipProvider, {
-    helpAriaLabel: helpAriaLabel,
-    tooltipPosition: tooltipPosition
-  }, componentToRender));
-});
-RadioButton.displayName = "RadioButton";
-export default /*#__PURE__*/React.memo(RadioButton);
+import{jsx as e,Fragment as t}from"react/jsx-runtime";import r,{useContext as n,useCallback as o}from"react";import i from"invariant";import l from"./radio-button.style.js";import a from"../../__internal__/checkable-input/checkable-input.component.js";import p from"./radio-button-svg.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import s from"../../style/utils/filter-styled-system-margin-props.js";import{TooltipProvider as c}from"../../__internal__/tooltip-provider/index.js";import d from"../carbon-provider/__internal__/new-validation.context.js";import u from"../../__internal__/utils/helpers/tags/tags.js";function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){b(e,t,r[t])}))}return e}function m(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const y=r.forwardRef(((r,b)=>{var{autoFocus:y,checked:g,disabled:h,fieldHelp:O,fieldHelpInline:j,id:v,inline:w,inputWidth:P,label:_,labelHelp:H,labelSpacing:S=1,labelWidth:k,name:x,onChange:F,onBlur:I,onFocus:W,value:B,reverse:D=!1,size:z,error:A,warning:C,info:E,tooltipPosition:L,"data-element":R,"data-role":N,helpAriaLabel:T}=r,V=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(r,["autoFocus","checked","disabled","fieldHelp","fieldHelpInline","id","inline","inputWidth","label","labelHelp","labelSpacing","labelWidth","name","onChange","onBlur","onFocus","value","reverse","size","error","warning","info","tooltipPosition","data-element","data-role","helpAriaLabel"]);const{validationRedesignOptIn:Y}=n(d),q=s(V),G=o((e=>{F&&F(e),e.target.focus()}),[F]),J=m(f({},{error:A,warning:C,info:E}),{disabled:h,inputWidth:P,fieldHelpInline:j,labelSpacing:S}),K=m(f(m(f({},J),{autoFocus:y,checked:g,fieldHelp:O,name:x,onChange:G,onBlur:I,onFocus:W,labelInline:!0,labelWidth:k,label:_,labelHelp:H,id:v,value:B,type:"radio",reverse:!D,ref:b}),V),{"data-component":void 0});i(!V.children,"This component is meant to be used as a self-closing tag. You should probably use the label prop instead.");const M=e(l,m(f({applyNewValidation:Y,inline:w,reverse:D,size:z},J,q,u("radio-button",{"data-element":R,"data-role":N})),{children:e(a,m(f({},K),{children:e(p,{})}))}));return e(t,{children:Y?M:e(c,{helpAriaLabel:T,tooltipPosition:L,children:M})})}));y.displayName="RadioButton";var g=r.memo(y);export{y as RadioButton,g as default};

package/esm/components/radio-button/radio-button.style.js

@@ -1,116 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import FieldHelpStyle from "../../__internal__/field-help/field-help.style";
-import CheckboxStyle from "../checkbox/checkbox.style";
-import HiddenCheckableInputStyle from "../../__internal__/checkable-input/hidden-checkable-input.style";
-import { StyledCheckableInput } from "../../__internal__/checkable-input/checkable-input.style";
-import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
-import { StyledLabelContainer } from "../../__internal__/label/label.style";
-import baseTheme from "../../style/themes/base";
-import FormFieldStyle from "../../__internal__/form-field/form-field.style";
-const RadioButtonStyle = styled(CheckboxStyle)`
-  ${({
-  disabled,
-  fieldHelpInline,
-  reverse,
-  size,
-  inline
-}) => css`
-    margin-bottom: var(--spacing150);
-
-    :last-of-type {
-      margin-bottom: 0;
-    }
-
-    && ${FormFieldStyle} {
-      margin: 0;
-    }
-
-    ${StyledCheckableInputSvgWrapper} {
-      padding: 0;
-    }
-
-    ${StyledCheckableInputSvgWrapper}, svg {
-      border-radius: var(--borderRadiusCircle);
-    }
-
-    ${StyledCheckableInput},
-    ${HiddenCheckableInputStyle},
-    ${StyledCheckableInputSvgWrapper},
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-
-    svg {
-      padding: 1px;
-    }
-
-    circle {
-      r: 5;
-    }
-
-    ${StyledLabelContainer} {
-      flex: 1 1 calc(100% - 44px);
-    }
-
-    ${HiddenCheckableInputStyle}:checked + ${StyledCheckableInputSvgWrapper} circle {
-      fill: var(--colorsUtilityYin090);
-    }
-
-    ${disabled && css`
-      circle {
-        fill: var(--colorsUtilityDisabled400);
-      }
-
-      ${HiddenCheckableInputStyle}:checked + ${StyledCheckableInputSvgWrapper} circle {
-        fill: var(--colorsUtilityDisabled600);
-      }
-    `}
-
-    ${(fieldHelpInline || reverse) && `
-      ${FieldHelpStyle} {
-        margin-left: 0;
-        margin-right: 6px;
-      }
-
-      ${StyledLabelContainer} {
-        flex: 0 1 auto;
-      }
-    `}
-
-    ${size === "large" && css`
-      ${StyledCheckableInput},
-      ${HiddenCheckableInputStyle},
-      ${StyledCheckableInputSvgWrapper},
-      svg {
-        height: 24px;
-        width: 24px;
-      }
-
-      circle {
-        r: 3.75;
-      }
-
-      ${reverse && css`
-        ${!fieldHelpInline && `
-          ${FieldHelpStyle} {
-            padding: 0;
-          }
-        `}
-      `}
-    `}
-
-    ${inline && `
-      &:not(:first-of-type) {
-        margin-left: 32px;
-      }
-    `}
-  `}
-
-  ${margin};
-`;
-RadioButtonStyle.defaultProps = {
-  theme: baseTheme
-};
-export default RadioButtonStyle;
+import e,{css as i}from"styled-components";import{margin as t}from"styled-system";import l from"../../__internal__/field-help/field-help.style.js";import r from"../checkbox/checkbox.style.js";import n from"../../__internal__/checkable-input/hidden-checkable-input.style.js";import{StyledCheckableInput as o}from"../../__internal__/checkable-input/checkable-input.style.js";import a from"../../__internal__/checkable-input/checkable-input-svg-wrapper.style.js";import{StyledLabelContainer as s}from"../../__internal__/label/label.style.js";import c from"../../style/themes/base/index.js";import p from"../../__internal__/form-field/form-field.style.js";const m=e(r).withConfig({displayName:"radio-button.style__RadioButtonStyle",componentId:"sc-bfd12e0e-0"})([""," ",";"],(({disabled:e,fieldHelpInline:t,reverse:r,size:c,inline:m})=>i(["margin-bottom:var(--spacing150);:last-of-type{margin-bottom:0;}&& ","{margin:0;}","{padding:0;}",",svg{border-radius:var(--borderRadiusCircle);}",",",",",",svg{height:16px;width:16px;}svg{padding:1px;}circle{r:5;}","{flex:1 1 calc(100% - 44px);}",":checked + "," circle{fill:var(--colorsUtilityYin090);}"," "," "," ",""],p,a,a,o,n,a,s,n,a,e&&i(["circle{fill:var(--colorsUtilityDisabled400);}",":checked + "," circle{fill:var(--colorsUtilityDisabled600);}"],n,a),(t||r)&&`\n      ${l} {\n        margin-left: 0;\n        margin-right: 6px;\n      }\n\n      ${s} {\n        flex: 0 1 auto;\n      }\n    `,"large"===c&&i(["",",",",",",svg{height:24px;width:24px;}circle{r:3.75;}",""],o,n,a,r&&i(["",""],!t&&`\n          ${l} {\n            padding: 0;\n          }\n        `)),m&&"\n      &:not(:first-of-type) {\n        margin-left: 32px;\n      }\n    ")),t);m.defaultProps={theme:c};export{m as default};

package/esm/components/search/index.js

@@ -1 +1 @@
-export { default } from "./search.component";
+export{Search as default}from"./search.component.js";

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

@@ -1,46 +1 @@
-import styled from "styled-components";
-import StyledButton from "../button/button.style";
-import StyledIcon from "../icon/icon.style";
-import { baseTheme } from "../../style/themes";
-export const StyledButtonIcon = styled.div`
-  &&& ${StyledIcon} {
-    color: var(--colorsActionMajorYang100);
-    margin-right: 0px;
-  }
-`;
-const StyledSearchButton = styled.div`
-  display: inline-flex;
-  border-bottom: none;
-
-  & ${StyledButton} {
-    color: var(--colorsActionMajorYang100);
-    border-color: var(--colorsActionMajorTransparent);
-    border-bottom-left-radius: var(--borderRadius000);
-    border-top-left-radius: var(--borderRadius000);
-    border-bottom-right-radius: var(--borderRadius050);
-    border-top-right-radius: var(--borderRadius050);
-
-    :hover {
-      border-color: var(--colorsActionMajorTransparent);
-    }
-
-    width: fit-content;
-
-    ${StyledIcon}${StyledIcon} {
-      color: var(--colorsActionMajorYang100);
-    }
-
-    margin: 0px 0px;
-    padding-bottom: 3px;
-
-    :focus {
-      z-index: ${({
-  theme
-}) => theme.zIndex.smallOverlay};
-    }
-  }
-`;
-StyledSearchButton.defaultProps = {
-  theme: baseTheme
-};
-export default StyledSearchButton;
+import o from"styled-components";import r from"../button/button.style.js";import t from"../icon/icon.style.js";import"../../style/themes/sage/index.js";import e from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";const a=o.div.withConfig({displayName:"search-button.style__StyledButtonIcon",componentId:"sc-8ce0b91b-0"})(["&&& ","{color:var(--colorsActionMajorYang100);margin-right:0px;}"],t),n=o.div.withConfig({displayName:"search-button.style__StyledSearchButton",componentId:"sc-8ce0b91b-1"})(["display:inline-flex;border-bottom:none;& ","{color:var(--colorsActionMajorYang100);border-color:var(--colorsActionMajorTransparent);border-bottom-left-radius:var(--borderRadius000);border-top-left-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius050);border-top-right-radius:var(--borderRadius050);:hover{border-color:var(--colorsActionMajorTransparent);}width:fit-content;","","{color:var(--colorsActionMajorYang100);}margin:0px 0px;padding-bottom:3px;:focus{z-index:",";}}"],r,t,t,(({theme:o})=>o.zIndex.smallOverlay));n.defaultProps={theme:e};export{a as StyledButtonIcon,n as default};

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

@@ -1,195 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState, useRef, useImperativeHandle } from "react";
-import invariant from "invariant";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import StyledSearch from "./search.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";
-import useLocale from "../../hooks/__internal__/useLocale";
-import Events from "../../__internal__/utils/helpers/events";
-let deprecateUncontrolledWarnTriggered = false;
-export const Search = /*#__PURE__*/React.forwardRef(({
-  defaultValue,
-  onChange,
-  onClick,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  value,
-  id,
-  name,
-  searchWidth,
-  maxWidth,
-  searchButton,
-  searchButtonAriaLabel,
-  placeholder,
-  variant = "default",
-  "aria-label": ariaLabel = "search",
-  tabIndex,
-  error,
-  warning,
-  info,
-  tooltipPosition,
-  triggerOnClear,
-  ...rest
-}, ref) => {
-  const isControlled = value !== undefined;
-  const initialValue = isControlled ? value : defaultValue;
-  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;
-  const [searchValue, setSearchValue] = useState(initialValue);
-  const [isFocused, setIsFocused] = useState(false);
-  const isSearchValueEmpty = !isControlled ? searchValue.length === 0 : value.length === 0;
-  let buttonProps = {};
-  const handleChange = event => {
-    if (onChange) {
-      onChange(event);
-    }
-    if (!isControlled) {
-      setSearchValue(event.target.value);
-    }
-  };
-  const handleFocus = event => {
-    setIsFocused(true);
-    if (onFocus) {
-      onFocus(event);
-    }
-  };
-  if (searchButton && onClick) {
-    buttonProps = {
-      onClick: () => {
-        onClick({
-          target: {
-            name,
-            id,
-            value: !isControlled ? searchValue : value
-          }
-        });
-      }
-    };
-  }
-  const handleIconClick = () => {
-    setSearchValue("");
-    onChange?.({
-      target: {
-        ...(name && {
-          name
-        }),
-        ...(id && {
-          id
-        }),
-        value: ""
-      }
-    });
-    if (triggerOnClear) {
-      onClick?.({
-        target: {
-          ...(name && {
-            name
-          }),
-          ...(id && {
-            id
-          }),
-          value: ""
-        }
-      });
-    }
-    inputRef.current?.focus();
-  };
-  const handleMouseDown = event => {
-    event.preventDefault();
-  };
-  const handleBlur = event => {
-    setIsFocused(false);
-
-    /* istanbul ignore else */
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
-  const handleKeyDown = event => {
-    if (event.key.length === 1) {
-      event.stopPropagation();
-    }
-    if (Events.isEscKey(event) && !isSearchValueEmpty) {
-      event.stopPropagation();
-      setSearchValue("");
-      onChange?.({
-        target: {
-          ...(name && {
-            name
-          }),
-          ...(id && {
-            id
-          }),
-          value: ""
-        }
-      });
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  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,
-    searchHasValue: searchHasValue,
-    showSearchButton: !!searchButton,
-    variant: variant
-  }, filterStyledSystemMarginProps(rest), {
-    id: id,
-    name: name
-  }, rest, tagComponent("search", rest)), /*#__PURE__*/React.createElement(Textbox, {
-    placeholder: placeholder,
-    value: !isControlled ? searchValue : value,
-    inputIcon: !isSearchValueEmpty ? "cross" : undefined,
-    iconTabIndex: !isSearchValueEmpty ? 0 : -1,
-    iconOnClick: handleIconClick,
-    iconOnMouseDown: handleMouseDown,
-    "aria-label": ariaLabel,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    ref: inputRef,
-    tabIndex: tabIndex,
-    error: error,
-    warning: warning,
-    info: info,
-    leftChildren: !searchButton ? /*#__PURE__*/React.createElement(Icon, {
-      type: "search",
-      ml: 1
-    }) : undefined,
-    tooltipPosition: tooltipPosition,
-    my: 0 // prevents any form spacing being applied
-  }), searchButton && /*#__PURE__*/React.createElement(StyledSearchButton, null, /*#__PURE__*/React.createElement(Button, _extends({
-    "aria-label": searchButtonAriaLabel || searchButtonText,
-    size: "medium",
-    px: 2,
-    buttonType: "primary",
-    iconPosition: "before",
-    iconType: "search",
-    className: "search-button"
-  }, buttonProps), searchButtonText)));
-});
-Search.displayName = "Search";
-export default Search;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useImperativeHandle as o,useState as a}from"react";import i from"invariant";import l from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import s from"../../style/utils/filter-styled-system-margin-props.js";import c from"./search.style.js";import u from"./search-button.style.js";import p from"../icon/icon.component.js";import{Textbox as m}from"../textbox/textbox.component.js";import f from"../button/button.component.js";import d from"../../__internal__/utils/logger/index.js";import h from"../../hooks/__internal__/useLocale/useLocale.js";import b from"../../__internal__/utils/helpers/events/events.js";function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){y(e,t,r[t])}))}return e}function v(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let O=!1;const j=r.forwardRef(((r,y)=>{var{defaultValue:j,onChange:w,onClick:P,onFocus:x,onBlur:_,onKeyDown:k,value:C,id:B,name:D,searchWidth:S,maxWidth:I,searchButton:W,searchButtonAriaLabel:T,placeholder:E,variant:F="default","aria-label":K="search",tabIndex:L,error:V,warning:A,info:N,tooltipPosition:z,triggerOnClear:H}=r,M=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(r,["defaultValue","onChange","onClick","onFocus","onBlur","onKeyDown","value","id","name","searchWidth","maxWidth","searchButton","searchButtonAriaLabel","placeholder","variant","aria-label","tabIndex","error","warning","info","tooltipPosition","triggerOnClear"]);const R=void 0!==C,U=R?C:j,q=h(),G=n(null),J=n(null);o(y,(()=>({focus(){var e;null===(e=J.current)||void 0===e||e.focus()}})),[]),O||R||(O=!0,d.deprecate("Uncontrolled behaviour in `Search` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.")),i("string"==typeof U,"This component has no initial value");const[Q,X]=a(U),[Y,Z]=a(!1),$=R?0===C.length:0===Q.length;let ee={};W&&P&&(ee={onClick:()=>{P({target:{name:D,id:B,value:R?C:Q}})}});const te="string"==typeof W?W:q.search.searchButtonText(),re=R?!!(null==C?void 0:C.length):!!(null==Q?void 0:Q.length);return e(c,v(g(v(g({ref:G,isFocused:Y,searchWidth:S,maxWidth:I,searchHasValue:re,showSearchButton:!!W,variant:F},s(M)),{id:B,name:D}),M,l("search",M)),{children:[t(m,{placeholder:E,value:R?C:Q,inputIcon:$?void 0:"cross",iconTabIndex:$?-1:0,iconOnClick:()=>{var e;X(""),null==w||w({target:v(g({},D&&{name:D},B&&{id:B}),{value:""})}),H&&(null==P||P({target:v(g({},D&&{name:D},B&&{id:B}),{value:""})})),null===(e=J.current)||void 0===e||e.focus()},iconOnMouseDown:e=>{e.preventDefault()},"aria-label":K,onFocus:e=>{Z(!0),x&&x(e)},onBlur:e=>{Z(!1),_&&_(e)},onChange:e=>{w&&w(e),R||X(e.target.value)},onKeyDown:e=>{1===e.key.length&&e.stopPropagation(),b.isEscKey(e)&&!$&&(e.stopPropagation(),X(""),null==w||w({target:v(g({},D&&{name:D},B&&{id:B}),{value:""})})),k&&k(e)},ref:J,tabIndex:L,error:V,warning:A,info:N,leftChildren:W?void 0:t(p,{type:"search",ml:1}),tooltipPosition:z,my:0}),W&&t(u,{children:t(f,v(g({"aria-label":T||te,size:"medium",px:2,buttonType:"primary",iconPosition:"before",iconType:"search",className:"search-button"},ee),{children:te}))})]}))}));j.displayName="Search";export{j as Search,j as default};