carbon-react 106.0.1 → 106.1.0

package/esm/__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/esm/__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/esm/__internal__/input/input-presentation.component.js

@@ -1,5 +1,4 @@
 import React, { useContext } from "react";
-import PropTypes from "prop-types";
 import InputPresentationStyle, { StyledInputPresentationContainer } from "./input-presentation.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
 import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
@@ -11,7 +10,7 @@ const InputPresentation = ({
   align,
   disabled,
   readOnly,
-  size,
+  size = "medium",
   error,
   warning,
   info
@@ -30,14 +29,14 @@ const InputPresentation = ({
     onMouseLeave: onGroupMouseLeave
   } = useContext(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.createElement(StyledInputPresentationContainer, {
@@ -59,16 +58,4 @@ const InputPresentation = ({
   }, children));
 };
 
-InputPresentation.propTypes = {
-  children: PropTypes.node,
-  align: PropTypes.string,
-  disabled: PropTypes.bool,
-  inputWidth: PropTypes.number,
-  readOnly: PropTypes.bool,
-  positionedChildren: PropTypes.node,
-  size: PropTypes.oneOf(["small", "medium", "large"]),
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
-};
 export default InputPresentation;

package/esm/__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/esm/__internal__/input/input-presentation.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import sizes from "./input-sizes.style";
 export const StyledInputPresentationContainer = styled.div`
   flex: 0 0 ${({
@@ -8,6 +7,37 @@ export const StyledInputPresentationContainer = styled.div`
   display: flex;
   position: relative;
 `;
+
+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 css`
+    border-color: ${validationColor} !important;
+    z-index: 1;
+    ${error && `box-shadow: inset 1px 1px 0 ${validationColor}, inset -1px -1px 0 ${validationColor};`}
+  `;
+}
+
 const InputPresentationStyle = styled.div`
   align-items: stretch;
   background: var(--colorsUtilityYang100);
@@ -18,15 +48,13 @@ const InputPresentationStyle = styled.div`
   flex-wrap: wrap;
   width: 100%;
   margin: 0;
-  min-height: ${({
-  size
-}) => sizes[size].height};
-  padding-left: ${({
-  size
-}) => sizes[size].horizontalPadding};
-  padding-right: ${({
+  ${({
   size
-}) => sizes[size].horizontalPadding};
+}) => size && css`
+      min-height: ${sizes[size].height};
+      padding-left: ${sizes[size].horizontalPadding};
+      padding-right: ${sizes[size].horizontalPadding};
+    `}
 
   ${({
   disabled
@@ -65,48 +93,4 @@ const InputPresentationStyle = styled.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 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.string,
-  disabled: PropTypes.bool,
-  hasFocus: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  size: PropTypes.oneOf(["small", "medium", "large"]),
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
-};
 export default InputPresentationStyle;

package/esm/__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/esm/__internal__/input/input-sizes.style.js

@@ -1,4 +1,4 @@
-export default {
+const InputSizes = {
   small: {
     height: "var(--sizing400)",
     horizontalPadding: "var(--spacing100)"
@@ -11,4 +11,5 @@ export default {
     height: "var(--sizing600)",
     horizontalPadding: "var(--spacing200)"
   }
-};
+};
+export default InputSizes;

package/esm/__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/esm/__internal__/input/input.component.js

@@ -1,9 +1,31 @@
 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); }
 
 import React, { useEffect, useContext, useRef } from "react";
-import PropTypes from "prop-types";
 import StyledInput from "./input.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
+
+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.forwardRef(({
   align,
   placeholder,
@@ -26,55 +48,91 @@ const Input = /*#__PURE__*/React.forwardRef(({
   const groupContext = useContext(InputGroupContext);
   const deferredTimeout = useRef(null);
   let input = useRef(null);
-  if (ref) input = ref;
+
+  if (ref) {
+    input = ref;
+  }
+
   useEffect(() => {
-    if (autoFocus && input.current) input.current.focus();
+    if (autoFocus && input.current) {
+      input.current.focus();
+    }
   }, [autoFocus, input]);
   useEffect(() => {
-    if (inputRef) inputRef(input);
+    if (inputRef) {
+      inputRef(input);
+    }
   }, [input, inputRef]);
   useEffect(() => {
-    if (context.inputRef) context.inputRef(input);
+    if (context.inputRef) {
+      context.inputRef(input);
+    }
   }, [context, input]);
   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);
   };
 
@@ -95,45 +153,5 @@ const Input = /*#__PURE__*/React.forwardRef(({
     onChange: handleChange
   }));
 });
-Input.propTypes = {
-  align: PropTypes.oneOf(["right", "left"]),
-  placeholder: PropTypes.string,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  className: PropTypes.string,
-  id: PropTypes.string,
-
-  /** A callback to retrieve the input reference */
-  inputRef: PropTypes.func,
-  name: PropTypes.string,
-  onBlur: PropTypes.func,
-  onClick: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onFocus: PropTypes.func,
-  autoFocus: PropTypes.bool,
-  onChange: PropTypes.func,
-  onChangeDeferred: PropTypes.func,
-  deferTimeout: PropTypes.number,
-  type: PropTypes.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";
 export default Input;

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

package/esm/__internal__/input/input.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 const StyledInput = styled.input`
   background: transparent;
   border: none;
@@ -39,7 +38,4 @@ const StyledInput = styled.input`
       color: var(--colorsActionMinorYin090);
     `}
 `;
-StyledInput.propTypes = {
-  disabled: PropTypes.bool
-};
 export default StyledInput;

package/esm/__internal__/input-behaviour/index.d.ts

@@ -1,2 +1,3 @@
 export { InputBehaviour, InputContext } from "./input-behaviour.component";
-export { InputGroupBehaviour, InputGroupContext } from "./input-group-behaviour.component";
+export { InputGroupBehaviour, InputGroupContext, } from "./input-group-behaviour.component";
+export type { InputContextProps } from "./useInputBehaviour";

package/esm/__internal__/input-behaviour/input-behaviour.component.d.ts

@@ -1,11 +1,8 @@
-export const InputContext: React.Context<{}>;
-export function InputBehaviour({ children }: {
-    children: any;
-}): JSX.Element;
-export namespace InputBehaviour {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
-}
 import React from "react";
-import PropTypes from "prop-types";
+import { InputContextProps } from "./useInputBehaviour";
+declare const InputContext: React.Context<InputContextProps>;
+export interface InputBehaviourProps {
+    children?: React.ReactNode;
+}
+declare const InputBehaviour: ({ children }: InputBehaviourProps) => JSX.Element;
+export { InputContext, InputBehaviour };

package/esm/__internal__/input-behaviour/input-behaviour.component.js

@@ -1,9 +1,7 @@
 import React, { useContext } from "react";
-import PropTypes from "prop-types";
-import { InlineInputsContext } from "../../components/inline-inputs/inline-inputs.component";
+import { InlineInputsContext } from "../../components/inline-inputs";
 import useInputBehaviour from "./useInputBehaviour";
-const defaultValue = {};
-const InputContext = /*#__PURE__*/React.createContext(defaultValue);
+const InputContext = /*#__PURE__*/React.createContext({});
 
 const InputBehaviour = ({
   children
@@ -19,7 +17,4 @@ const InputBehaviour = ({
   }, children);
 };
 
-InputBehaviour.propTypes = {
-  children: PropTypes.node
-};
 export { InputContext, InputBehaviour };

package/esm/__internal__/input-behaviour/input-group-behaviour.component.d.ts

@@ -1,13 +1,9 @@
-export const InputGroupContext: React.Context<{}>;
-export function InputGroupBehaviour({ children, blockGroupBehaviour }: {
-    children: any;
-    blockGroupBehaviour: any;
-}): JSX.Element;
-export namespace InputGroupBehaviour {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const blockGroupBehaviour: PropTypes.Requireable<boolean>;
-    }
-}
 import React from "react";
-import PropTypes from "prop-types";
+import { InputContextProps } from "./useInputBehaviour";
+import { InputBehaviourProps } from "./input-behaviour.component";
+declare const InputGroupContext: React.Context<InputContextProps>;
+export interface InputGroupBehaviourProps extends InputBehaviourProps {
+    blockGroupBehaviour?: boolean;
+}
+declare const InputGroupBehaviour: ({ children, blockGroupBehaviour, }: InputGroupBehaviourProps) => JSX.Element;
+export { InputGroupContext, InputGroupBehaviour };

package/esm/__internal__/input-behaviour/input-group-behaviour.component.js

@@ -1,8 +1,6 @@
 import React from "react";
-import PropTypes from "prop-types";
 import useInputBehaviour from "./useInputBehaviour";
-const defaultValue = {};
-const InputGroupContext = /*#__PURE__*/React.createContext(defaultValue);
+const InputGroupContext = /*#__PURE__*/React.createContext({});
 
 const InputGroupBehaviour = ({
   children,
@@ -14,8 +12,4 @@ const InputGroupBehaviour = ({
   }, children);
 };
 
-InputGroupBehaviour.propTypes = {
-  children: PropTypes.node,
-  blockGroupBehaviour: PropTypes.bool
-};
 export { InputGroupContext, InputGroupBehaviour };

package/esm/__internal__/input-behaviour/useInputBehaviour.d.ts

@@ -1,11 +1,15 @@
+export interface InputContextProps {
+    hasFocus?: boolean;
+    hasMouseOver?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onMouseDown?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    inputRef?: (input: {
+        current: HTMLInputElement | null;
+    }) => void;
+    ariaLabelledBy?: string;
+}
+declare const useInputBehaviour: (blockGroupBehaviour?: boolean | undefined) => InputContextProps;
 export default useInputBehaviour;
-declare function useInputBehaviour(blockGroupBehaviour: any): {
-    hasFocus: boolean;
-    hasMouseOver: boolean;
-    onFocus: (() => void) | undefined;
-    onBlur: (() => void) | undefined;
-    onMouseDown: () => void;
-    onMouseEnter: (() => void) | undefined;
-    onMouseLeave: (() => void) | undefined;
-    inputRef: (input: any) => void;
-};

package/esm/__internal__/label/label.d.ts

@@ -29,7 +29,7 @@ export interface LabelPropTypes extends ValidationPropTypes {
   /** Whether to show the validation icon */
   useValidationIcon?: boolean;
   /** A string that represents the ID of another form element */
-  htmlFor: string;
+  htmlFor?: string;
   /** Padding right, integer multiplied by base spacing constant (8) */
   pr?: 1 | 2;
   /** Padding left, integer multiplied by base spacing constant (8) */