carbon-react 106.0.2 → 106.0.3

package/esm/components/link/link.config.d.ts

@@ -1,2 +1,2 @@
-export const LINK_POSITIONS: string[];
-export const LINK_ALIGNMENTS: string[];
+export declare const LINK_POSITIONS: string[];
+export declare const LINK_ALIGNMENTS: string[];

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

@@ -1,2 +1,7 @@
-export const StyledLink: import("styled-components").StyledComponent<"span", any, {}, never>;
-export const StyledContent: import("styled-components").StyledComponent<"span", any, {}, never>;
+import { LinkProps } from "./link.component";
+interface StyledLinkProps extends Pick<LinkProps, "isSkipLink" | "iconAlign" | "disabled"> {
+    hasContent: boolean;
+}
+declare const StyledLink: import("styled-components").StyledComponent<"span", any, StyledLinkProps, never>;
+declare const StyledContent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export { StyledLink, StyledContent };

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

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 const StyledLink = styled.span`
@@ -82,9 +81,5 @@ StyledLink.defaultProps = {
   disabled: false,
   hasContent: true
 };
-StyledLink.propTypes = {
-  disabled: PropTypes.bool,
-  hasContent: PropTypes.bool
-};
 const StyledContent = styled.span``;
 export { StyledLink, StyledContent };

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

@@ -3,8 +3,7 @@ export const StyledPagerSizeOptions: import("styled-components").StyledComponent
 export const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledPagerLinkStyles: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
+export const StyledPagerLinkStyles: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link/link.component").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
 export const StyledPagerNoSelect: import("styled-components").StyledComponent<"span", any, {}, never>;
 export const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-import Link from "../link";

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

@@ -1,6 +1,6 @@
 export const StyledBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledEditAction: import("styled-components").StyledComponent<typeof Link, any, import("react").RefAttributes<HTMLButtonElement>, never>;
+export const StyledEditAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link/link.component").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
 export const StyledActionsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDeleteButton: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
 export const StyledUndoButton: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
@@ -9,5 +9,4 @@ export const StyledPod: import("styled-components").StyledComponent<"div", any,
 export const StyledHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSubtitle: import("styled-components").StyledComponent<"h5", any, {}, never>;
 export const StyledTitle: import("styled-components").StyledComponent<"h4", any, {}, never>;
-import Link from "../link";
 import IconButton from "../icon-button";

package/esm/components/simple-color-picker/simple-color-input/simple-color-input.style.d.ts

@@ -1,2 +1,2 @@
 export default StyledSimpleColorInput;
-declare const StyledSimpleColorInput: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+declare const StyledSimpleColorInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../__internal__/input").InputProps & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;

package/esm/components/text-editor/__internal__/editor-link/editor-link.style.d.ts

@@ -1,3 +1,2 @@
 export default StyledEditorLink;
-declare const StyledEditorLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
-import Link from "../../../link";
+declare const StyledEditorLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../link/link.component").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;

package/esm/components/tile-select/tile-select.style.d.ts

@@ -2,7 +2,7 @@ export const StyledTileSelectFieldset: import("styled-components").StyledCompone
 export const StyledGroupDescription: import("styled-components").StyledComponent<"p", any, {}, never>;
 export const StyledTileSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledTileSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledTileSelectInput: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export const StyledTileSelectInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../__internal__/input").InputProps & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
 export const StyledTitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
 export const StyledSubtitle: import("styled-components").StyledComponent<"h4", any, {}, never>;

package/lib/__internal__/input/index.d.ts

@@ -1,5 +1,5 @@
-export { default, InputProps, CommonInputProps } from "./input";
-export {
-  InputPresentationProps,
-  CommonInputPresentationProps,
-} from "./input-presentation";
+import Input from "./input.component";
+import InputPresentation from "./input-presentation.component";
+export type { InputProps } from "./input.component";
+export { Input, InputPresentation };
+export default Input;

package/lib/__internal__/input/input-presentation.component.d.ts

@@ -1,28 +1,22 @@
-export default InputPresentation;
-declare function InputPresentation({ children, positionedChildren, inputWidth, align, disabled, readOnly, size, error, warning, info, }: {
-    children: any;
-    positionedChildren: any;
-    inputWidth: any;
-    align: any;
-    disabled: any;
-    readOnly: any;
-    size: any;
-    error: any;
-    warning: any;
-    info: any;
-}): JSX.Element;
-declare namespace InputPresentation {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const align: PropTypes.Requireable<string>;
-        const disabled: PropTypes.Requireable<boolean>;
-        const inputWidth: PropTypes.Requireable<number>;
-        const readOnly: PropTypes.Requireable<boolean>;
-        const positionedChildren: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const size: PropTypes.Requireable<string>;
-        const error: PropTypes.Requireable<string | boolean>;
-        const warning: PropTypes.Requireable<string | boolean>;
-        const info: PropTypes.Requireable<string | boolean>;
-    }
+import React from "react";
+import { ValidationPropTypes } from "../validations";
+export declare type Sizes = "small" | "medium" | "large";
+export interface CommonInputPresentationProps extends ValidationPropTypes {
+    children: React.ReactNode;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** The default value alignment on the input */
+    align?: string;
+    /** The width of the input as a percentage */
+    inputWidth?: number;
+    /** If true, the component will be read-only */
+    readOnly?: boolean;
+    /** Size of an input */
+    size?: Sizes;
+}
+export interface InputPresentationProps extends CommonInputPresentationProps {
+    /** Content to be rendered before the input */
+    positionedChildren?: React.ReactNode;
 }
-import PropTypes from "prop-types";
+declare const InputPresentation: ({ children, positionedChildren, inputWidth, align, disabled, readOnly, size, error, warning, info, }: InputPresentationProps) => JSX.Element;
+export default InputPresentation;

package/lib/__internal__/input/input-presentation.component.js

@@ -7,16 +7,12 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _inputPresentation = _interopRequireWildcard(require("./input-presentation.style"));
 
 var _inputBehaviour = require("../input-behaviour");
 
 var _carbonProvider = require("../../components/carbon-provider/carbon-provider.component");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -28,7 +24,7 @@ const InputPresentation = ({
   align,
   disabled,
   readOnly,
-  size,
+  size = "medium",
   error,
   warning,
   info
@@ -47,14 +43,14 @@ const InputPresentation = ({
     onMouseLeave: onGroupMouseLeave
   } = (0, _react.useContext)(_inputBehaviour.InputGroupContext);
 
-  const handleMouseEnter = e => {
-    if (onMouseEnter) onMouseEnter(e);
-    if (onGroupMouseEnter) onGroupMouseEnter(e);
+  const handleMouseEnter = () => {
+    if (onMouseEnter) onMouseEnter();
+    if (onGroupMouseEnter) onGroupMouseEnter();
   };
 
-  const handleMouseLeave = e => {
-    if (onMouseLeave) onMouseLeave(e);
-    if (onGroupMouseLeave) onGroupMouseLeave(e);
+  const handleMouseLeave = () => {
+    if (onMouseLeave) onMouseLeave();
+    if (onGroupMouseLeave) onGroupMouseLeave();
   };
 
   return /*#__PURE__*/_react.default.createElement(_inputPresentation.StyledInputPresentationContainer, {
@@ -76,17 +72,5 @@ const InputPresentation = ({
   }, children));
 };
 
-InputPresentation.propTypes = {
-  children: _propTypes.default.node,
-  align: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  inputWidth: _propTypes.default.number,
-  readOnly: _propTypes.default.bool,
-  positionedChildren: _propTypes.default.node,
-  size: _propTypes.default.oneOf(["small", "medium", "large"]),
-  error: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-  warning: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-  info: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string])
-};
 var _default = InputPresentation;
 exports.default = _default;

package/lib/__internal__/input/input-presentation.style.d.ts

@@ -1,9 +1,6 @@
-export const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { CommonInputPresentationProps } from "./input-presentation.component";
+import { InputContextProps } from "../input-behaviour";
+import { CarbonProviderProps } from "../../components/carbon-provider";
+export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "inputWidth">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "align" | "error" | "info" | "warning" | "readOnly" | "size"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, {
-    error: any;
-    warning: any;
-    info: any;
-    disabled: any;
-    validationRedesignOptIn: any;
-}, never>;

package/lib/__internal__/input/input-presentation.style.js

@@ -7,8 +7,6 @@ exports.default = exports.StyledInputPresentationContainer = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _inputSizes = _interopRequireDefault(require("./input-sizes.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,6 +23,37 @@ const StyledInputPresentationContainer = _styledComponents.default.div`
   position: relative;
 `;
 exports.StyledInputPresentationContainer = StyledInputPresentationContainer;
+
+function stylingForValidations({
+  error,
+  warning,
+  info,
+  disabled,
+  validationRedesignOptIn
+}) {
+  let validationColor;
+
+  if (disabled) {
+    return "";
+  }
+
+  if (error) {
+    validationColor = "var(--colorsSemanticNegative500)";
+  } else if (warning) {
+    validationColor = validationRedesignOptIn ? "var(--colorsUtilityMajor300)" : "var(--colorsSemanticCaution500)";
+  } else if (info) {
+    validationColor = "var(--colorsSemanticInfo500)";
+  } else {
+    return "";
+  }
+
+  return (0, _styledComponents.css)`
+    border-color: ${validationColor} !important;
+    z-index: 1;
+    ${error && `box-shadow: inset 1px 1px 0 ${validationColor}, inset -1px -1px 0 ${validationColor};`}
+  `;
+}
+
 const InputPresentationStyle = _styledComponents.default.div`
   align-items: stretch;
   background: var(--colorsUtilityYang100);
@@ -35,15 +64,13 @@ const InputPresentationStyle = _styledComponents.default.div`
   flex-wrap: wrap;
   width: 100%;
   margin: 0;
-  min-height: ${({
-  size
-}) => _inputSizes.default[size].height};
-  padding-left: ${({
-  size
-}) => _inputSizes.default[size].horizontalPadding};
-  padding-right: ${({
+  ${({
   size
-}) => _inputSizes.default[size].horizontalPadding};
+}) => size && (0, _styledComponents.css)`
+      min-height: ${_inputSizes.default[size].height};
+      padding-left: ${_inputSizes.default[size].horizontalPadding};
+      padding-right: ${_inputSizes.default[size].horizontalPadding};
+    `}
 
   ${({
   disabled
@@ -82,49 +109,5 @@ const InputPresentationStyle = _styledComponents.default.div`
     display: none !important;
   }
 `;
-
-function stylingForValidations({
-  error,
-  warning,
-  info,
-  disabled,
-  validationRedesignOptIn
-}) {
-  let validationColor;
-
-  if (disabled) {
-    return "";
-  }
-
-  if (error) {
-    validationColor = "var(--colorsSemanticNegative500)";
-  } else if (warning) {
-    validationColor = validationRedesignOptIn ? "var(--colorsUtilityMajor300)" : "var(--colorsSemanticCaution500)";
-  } else if (info) {
-    validationColor = "var(--colorsSemanticInfo500)";
-  } else {
-    return "";
-  }
-
-  return (0, _styledComponents.css)`
-    border-color: ${validationColor} !important;
-    z-index: 1;
-    ${error && `box-shadow: inset 1px 1px 0 ${validationColor}, inset -1px -1px 0 ${validationColor};`}
-  `;
-}
-
-InputPresentationStyle.defaultProps = {
-  size: "medium"
-};
-InputPresentationStyle.propTypes = {
-  align: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  hasFocus: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(["small", "medium", "large"]),
-  error: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-  warning: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-  info: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string])
-};
 var _default = InputPresentationStyle;
 exports.default = _default;

package/lib/__internal__/input/input-sizes.style.d.ts

@@ -1,19 +1,9 @@
-declare namespace _default {
-    namespace small {
-        const height: string;
-        const horizontalPadding: string;
-    }
-    namespace medium {
-        const height_1: string;
-        export { height_1 as height };
-        const horizontalPadding_1: string;
-        export { horizontalPadding_1 as horizontalPadding };
-    }
-    namespace large {
-        const height_2: string;
-        export { height_2 as height };
-        const horizontalPadding_2: string;
-        export { horizontalPadding_2 as horizontalPadding };
-    }
+interface SizesProps {
+    height: string;
+    horizontalPadding: string;
 }
-export default _default;
+interface InputSizesInterface {
+    [key: string]: SizesProps;
+}
+declare const InputSizes: InputSizesInterface;
+export default InputSizes;

package/lib/__internal__/input/input-sizes.style.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = {
+const InputSizes = {
   small: {
     height: "var(--sizing400)",
     horizontalPadding: "var(--spacing100)"
@@ -18,4 +18,5 @@ var _default = {
     horizontalPadding: "var(--spacing200)"
   }
 };
+var _default = InputSizes;
 exports.default = _default;

package/lib/__internal__/input/input.component.d.ts

@@ -1,3 +1,40 @@
-export default Input;
-declare const Input: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";
+export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    align?: "right" | "left";
+    /** If true the Component will be focused when rendered */
+    autoFocus?: boolean;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** HTML id attribute of the input */
+    id?: string;
+    /** A callback to retrieve the input reference */
+    inputRef?: (input: React.RefObject<HTMLInputElement>) => void;
+    /** Name of the input */
+    name?: string;
+    /** Specify a callback triggered on blur */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on change */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** pecify a callback triggered on click */
+    onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on focus */
+    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on keyDown */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Placeholder string to be displayed in input */
+    placeholder?: string;
+    /** If true, the component will be read-only */
+    readOnly?: boolean;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+}
+export interface InputProps extends CommonInputProps {
+    /** Integer to determine a timeout for the defered callback */
+    deferTimeout?: number;
+    /** Defered callback to be called after the onChange event */
+    onChangeDeferred?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** HTML type attribute of the input */
+    type?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/lib/__internal__/input/input.component.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _input = _interopRequireDefault(require("./input.style"));
+var _input2 = _interopRequireDefault(require("./input.style"));
 
 var _inputBehaviour = require("../input-behaviour");
 
@@ -21,6 +19,28 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || 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); }
 
+function selectTextOnFocus(input) {
+  // setTimeout is required so the dom has a chance to place the cursor in the input
+  setTimeout(() => {
+    if (input !== null && input !== void 0 && input.current) {
+      const {
+        selectionStart,
+        selectionEnd,
+        value
+      } = input.current;
+      const {
+        length
+      } = value; // only select text if cursor is at the very end or the very start of the value
+
+      if (selectionStart === 0 && selectionEnd === 0 || selectionStart === length && selectionEnd === length) {
+        if (document.activeElement === input.current) {
+          input.current.setSelectionRange(0, length);
+        }
+      }
+    }
+  });
+}
+
 const Input = /*#__PURE__*/_react.default.forwardRef(({
   align,
   placeholder,
@@ -43,59 +63,95 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   const groupContext = (0, _react.useContext)(_inputBehaviour.InputGroupContext);
   const deferredTimeout = (0, _react.useRef)(null);
   let input = (0, _react.useRef)(null);
-  if (ref) input = ref;
+
+  if (ref) {
+    input = ref;
+  }
+
   (0, _react.useEffect)(() => {
-    if (autoFocus && input.current) input.current.focus();
+    if (autoFocus && input.current) {
+      input.current.focus();
+    }
   }, [autoFocus, input]);
   (0, _react.useEffect)(() => {
-    if (inputRef) inputRef(input);
+    if (inputRef) {
+      inputRef(input);
+    }
   }, [input, inputRef]);
   (0, _react.useEffect)(() => {
-    if (context.inputRef) context.inputRef(input);
+    if (context.inputRef) {
+      context.inputRef(input);
+    }
   }, [context, input]);
   (0, _react.useEffect)(() => {
-    if (disabled && context.onBlur) context.onBlur();
+    if (disabled && context.onBlur) {
+      context.onBlur();
+    }
   }, [disabled, context]);
 
   const handleClick = ev => {
-    if (onClick) onClick(ev);
-    input.current.focus();
+    var _input, _input$current;
+
+    if (onClick) {
+      onClick(ev);
+    }
+
+    (_input = input) === null || _input === void 0 ? void 0 : (_input$current = _input.current) === null || _input$current === void 0 ? void 0 : _input$current.focus();
   };
 
   const handleFocus = ev => {
-    if (onFocus) onFocus(ev);
-    if (context.onFocus) context.onFocus(ev);
-    if (groupContext.onFocus) groupContext.onFocus(ev);
-    if (type === "text") selectTextOnFocus(input);
+    if (onFocus) {
+      onFocus(ev);
+    }
+
+    if (context.onFocus) {
+      context.onFocus();
+    }
+
+    if (groupContext.onFocus) {
+      groupContext.onFocus();
+    }
+
+    if (type === "text") {
+      selectTextOnFocus(input);
+    }
   };
 
   const handleBlur = ev => {
-    if (onBlur) onBlur(ev);
-    if (context.onBlur) context.onBlur(ev);
-    if (groupContext.onBlur) groupContext.onBlur(ev);
+    if (onBlur) {
+      onBlur(ev);
+    }
+
+    if (context.onBlur) {
+      context.onBlur();
+    }
+
+    if (groupContext.onBlur) {
+      groupContext.onBlur();
+    }
   };
 
-  const handleDeferred = ({
-    currentTarget,
-    target
-  }) => {
+  const handleDeferred = ev => {
     if (onChangeDeferred) {
-      clearTimeout(deferredTimeout.current);
+      if (deferredTimeout.current) {
+        clearTimeout(deferredTimeout.current);
+      }
+
       deferredTimeout.current = setTimeout(() => {
-        onChangeDeferred({
-          currentTarget,
-          target
-        });
+        onChangeDeferred(ev);
       }, deferTimeout || 750);
     }
   };
 
   const handleChange = ev => {
-    if (onChange) onChange(ev);
+    if (onChange) {
+      onChange(ev);
+    }
+
     handleDeferred(ev);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_input.default, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_input2.default, _extends({}, rest, {
     "aria-labelledby": context.ariaLabelledBy,
     align: align,
     placeholder: placeholder,
@@ -113,46 +169,6 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   }));
 });
 
-Input.propTypes = {
-  align: _propTypes.default.oneOf(["right", "left"]),
-  placeholder: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  id: _propTypes.default.string,
-
-  /** A callback to retrieve the input reference */
-  inputRef: _propTypes.default.func,
-  name: _propTypes.default.string,
-  onBlur: _propTypes.default.func,
-  onClick: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  onFocus: _propTypes.default.func,
-  autoFocus: _propTypes.default.bool,
-  onChange: _propTypes.default.func,
-  onChangeDeferred: _propTypes.default.func,
-  deferTimeout: _propTypes.default.number,
-  type: _propTypes.default.string
-};
-
-function selectTextOnFocus(input) {
-  // setTimeout is required so the dom has a chance to place the cursor in the input
-  setTimeout(() => {
-    if (input.current) {
-      const {
-        length
-      } = input.current.value;
-      const cursorStart = input.current.selectionStart;
-      const cursorEnd = input.current.selectionEnd; // only select text if cursor is at the very end or the very start of the value
-
-      if (cursorStart === 0 && cursorEnd === 0 || cursorStart === length && cursorEnd === length) {
-        if (document.activeElement === input.current) {
-          input.current.setSelectionRange(0, length);
-        }
-      }
-    }
-  });
-}
-
+Input.displayName = "Input";
 var _default = Input;
 exports.default = _default;

package/lib/__internal__/input/input.style.d.ts

@@ -1,2 +1,3 @@
+import { CommonInputProps } from "./input.component";
+declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "readOnly">, never>;
 export default StyledInput;
-declare const StyledInput: import("styled-components").StyledComponent<"input", any, {}, never>;