carbon-react 104.33.1 → 104.35.0

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

@@ -0,0 +1,69 @@
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import InputPresentationStyle, { StyledInputPresentationContainer } from "./input-presentation.style";
+import { InputContext, InputGroupContext } from "../input-behaviour";
+
+const InputPresentation = ({
+  children,
+  positionedChildren,
+  inputWidth,
+  align,
+  disabled,
+  readOnly,
+  size,
+  error,
+  warning,
+  info
+}) => {
+  const {
+    hasFocus,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave
+  } = useContext(InputContext);
+  const {
+    onMouseEnter: onGroupMouseEnter,
+    onMouseLeave: onGroupMouseLeave
+  } = useContext(InputGroupContext);
+
+  const handleMouseEnter = e => {
+    if (onMouseEnter) onMouseEnter(e);
+    if (onGroupMouseEnter) onGroupMouseEnter(e);
+  };
+
+  const handleMouseLeave = e => {
+    if (onMouseLeave) onMouseLeave(e);
+    if (onGroupMouseLeave) onGroupMouseLeave(e);
+  };
+
+  return /*#__PURE__*/React.createElement(StyledInputPresentationContainer, {
+    inputWidth: inputWidth
+  }, positionedChildren, /*#__PURE__*/React.createElement(InputPresentationStyle, {
+    hasFocus: hasFocus,
+    role: "presentation",
+    onMouseDown: onMouseDown,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    align: align,
+    disabled: disabled,
+    readOnly: readOnly,
+    size: size,
+    warning: warning,
+    error: error,
+    info: info
+  }, 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.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { ValidationPropTypes } from "../validations";
+
+export interface CommonInputPresentationProps extends ValidationPropTypes {
+  /** 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?: "small" | "medium" | "large";
+}
+
+export interface InputPresentationProps extends CommonInputPresentationProps {
+  /** Content to be rendered before the input */
+  positionedChildren?: React.ReactNode;
+}
+
+declare function InputPresentation(props: InputPresentationProps): JSX.Element;
+
+export default InputPresentation;

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

@@ -0,0 +1,8 @@
+export const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default InputPresentationStyle;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, {
+    error: any;
+    warning: any;
+    info: any;
+    disabled: any;
+}, never>;

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

@@ -0,0 +1,111 @@
+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 ${({
+  inputWidth
+}) => inputWidth}%;
+  display: flex;
+  position: relative;
+`;
+const InputPresentationStyle = styled.div`
+  align-items: stretch;
+  background: #fff;
+  border: 1px solid var(--colorsUtilityMajor300);
+  box-sizing: border-box;
+  cursor: text;
+  display: flex;
+  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};
+
+  ${({
+  disabled
+}) => disabled && css`
+      background: var(--colorsUtilityDisabled400);
+      border-color: var(--colorsUtilityDisabled600);
+      cursor: not-allowed;
+    `}
+
+  ${({
+  hasFocus
+}) => hasFocus && css`
+      & {
+        outline: 3px solid var(--colorsSemanticFocus500);
+        z-index: 2;
+      }
+    `}
+
+  ${stylingForValidations}
+
+  ${({
+  readOnly
+}) => readOnly && css`
+      background-color: var(--colorsUtilityReadOnly400);
+      border-color: var(--colorsUtilityReadOnly600);
+    `}
+
+  ${({
+  align
+}) => align === "right" && "flex-direction: row-reverse"}
+
+  input::-ms-clear {
+    display: none;
+  }
+  input::-webkit-contacts-auto-fill-button {
+    display: none !important;
+  }
+`;
+
+function stylingForValidations({
+  error,
+  warning,
+  info,
+  disabled
+}) {
+  let validationColor;
+
+  if (disabled) {
+    return "";
+  }
+
+  if (error) {
+    validationColor = "var(--colorsSemanticNegative500)";
+  } else if (warning) {
+    validationColor = "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

@@ -0,0 +1,19 @@
+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 };
+    }
+}
+export default _default;

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

@@ -0,0 +1,14 @@
+export default {
+  small: {
+    height: "var(--sizing400)",
+    horizontalPadding: "var(--spacing100)"
+  },
+  medium: {
+    height: "var(--sizing500)",
+    horizontalPadding: "var(--spacing150)"
+  },
+  large: {
+    height: "var(--sizing600)",
+    horizontalPadding: "var(--spacing200)"
+  }
+};

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

@@ -0,0 +1,3 @@
+export default Input;
+declare const Input: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

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

@@ -0,0 +1,138 @@
+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";
+const Input = /*#__PURE__*/React.forwardRef(({
+  align,
+  placeholder,
+  disabled,
+  readOnly,
+  autoFocus,
+  inputRef,
+  onClick,
+  onChangeDeferred,
+  onChange,
+  onBlur,
+  onFocus,
+  deferTimeout,
+  type = "text",
+  id,
+  name,
+  ...rest
+}, ref) => {
+  const context = useContext(InputContext);
+  const groupContext = useContext(InputGroupContext);
+  const deferredTimeout = useRef(null);
+  let input = useRef(null);
+  if (ref) input = ref;
+  useEffect(() => {
+    if (autoFocus && input.current) input.current.focus();
+  }, [autoFocus, input]);
+  useEffect(() => {
+    if (inputRef) inputRef(input);
+  }, [input, inputRef]);
+  useEffect(() => {
+    if (context.inputRef) context.inputRef(input);
+  }, [context, input]);
+  useEffect(() => {
+    if (disabled && context.onBlur) context.onBlur();
+  }, [disabled, context]);
+
+  const handleClick = ev => {
+    if (onClick) onClick(ev);
+    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);
+  };
+
+  const handleBlur = ev => {
+    if (onBlur) onBlur(ev);
+    if (context.onBlur) context.onBlur(ev);
+    if (groupContext.onBlur) groupContext.onBlur(ev);
+  };
+
+  const handleDeferred = ({
+    currentTarget,
+    target
+  }) => {
+    if (onChangeDeferred) {
+      clearTimeout(deferredTimeout.current);
+      deferredTimeout.current = setTimeout(() => {
+        onChangeDeferred({
+          currentTarget,
+          target
+        });
+      }, deferTimeout || 750);
+    }
+  };
+
+  const handleChange = ev => {
+    if (onChange) onChange(ev);
+    handleDeferred(ev);
+  };
+
+  return /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
+    align: align,
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readOnly,
+    name: name,
+    type: type,
+    id: id || name,
+    ref: input,
+    "data-element": "input",
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onClick: handleClick,
+    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);
+        }
+      }
+    }
+  });
+}
+
+export default Input;

package/esm/__internal__/input/input.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+
+export interface CommonInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type"> {
+  /* The default value alignment on the input */
+  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;
+  /** The value of the Input */
+  value?:
+    | string
+    | string[]
+    | Record<string, unknown>
+    | Record<string, unknown>[];
+}
+
+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?: () => void;
+  /** HTML type attribute of the input */
+  type?: string;
+}
+
+declare function Input(
+  props: InputProps & React.RefAttributes<HTMLInputElement>
+): JSX.Element;
+
+export default Input;

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

@@ -0,0 +1,2 @@
+export default StyledInput;
+declare const StyledInput: import("styled-components").StyledComponent<"input", any, {}, never>;

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

@@ -0,0 +1,45 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+const StyledInput = styled.input`
+  background: transparent;
+  border: none;
+  color: var(--colorsUtilityYin090);
+  flex-grow: 1;
+  font-size: var(--fontSizes100);
+  outline: none;
+  padding: 0;
+  margin: 0;
+  width: 30px;
+
+  &:-webkit-autofill {
+    background-clip: text;
+    -webkit-background-clip: text;
+  }
+
+  ${({
+  align
+}) => align && css`
+      text-align: ${align};
+    `}
+
+  &::placeholder {
+    color: var(--colorsUtilityYin030);
+  }
+
+  ${({
+  disabled
+}) => disabled && css`
+      color: var(--colorsUtilityYin030);
+      cursor: not-allowed;
+    `}
+
+  ${({
+  readOnly
+}) => readOnly && css`
+      color: var(--colorsActionMinorYin090);
+    `}
+`;
+StyledInput.propTypes = {
+  disabled: PropTypes.bool
+};
+export default StyledInput;

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

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

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

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

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

@@ -0,0 +1,11 @@
+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";

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

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+import useInputBehaviour from "./useInputBehaviour";
+const defaultValue = {};
+const InputContext = /*#__PURE__*/React.createContext(defaultValue);
+
+const InputBehaviour = ({
+  children
+}) => {
+  const contextValue = useInputBehaviour();
+  return /*#__PURE__*/React.createElement(InputContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+InputBehaviour.propTypes = {
+  children: PropTypes.node
+};
+export { InputContext, InputBehaviour };

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

@@ -0,0 +1,13 @@
+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";

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

@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import useInputBehaviour from "./useInputBehaviour";
+const defaultValue = {};
+const InputGroupContext = /*#__PURE__*/React.createContext(defaultValue);
+
+const InputGroupBehaviour = ({
+  children,
+  blockGroupBehaviour
+}) => {
+  const contextValue = useInputBehaviour(blockGroupBehaviour);
+  return /*#__PURE__*/React.createElement(InputGroupContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+InputGroupBehaviour.propTypes = {
+  children: PropTypes.node,
+  blockGroupBehaviour: PropTypes.bool
+};
+export { InputGroupContext, InputGroupBehaviour };

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

@@ -0,0 +1,11 @@
+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__/input-behaviour/useInputBehaviour.js

@@ -0,0 +1,32 @@
+import { useState, useRef, useCallback, useMemo } from "react";
+
+const useInputBehaviour = blockGroupBehaviour => {
+  const [hasFocus, setHasFocus] = useState(false);
+  const [hasMouseOver, setHasMouseOver] = useState(false);
+  const inputRef = useRef(null);
+  const onFocus = useCallback(() => setHasFocus(true), []);
+  const onBlur = useCallback(() => setHasFocus(false), []);
+  const assignInput = useCallback(input => {
+    inputRef.current = input.current;
+  }, []); // use mouse down rather than click to accommodate click and drag events too
+
+  const onMouseDown = useCallback(() => {
+    // use a zero timeout to ensure focus is applied even on click and drag events
+    setTimeout(() => inputRef && inputRef.current && inputRef.current.focus());
+  }, []);
+  const onMouseEnter = useCallback(() => setHasMouseOver(true), []);
+  const onMouseLeave = useCallback(() => setHasMouseOver(false), []);
+  const contextValue = useMemo(() => ({
+    hasFocus,
+    hasMouseOver,
+    onFocus: blockGroupBehaviour ? undefined : onFocus,
+    onBlur: blockGroupBehaviour ? undefined : onBlur,
+    onMouseDown,
+    onMouseEnter: blockGroupBehaviour ? undefined : onMouseEnter,
+    onMouseLeave: blockGroupBehaviour ? undefined : onMouseLeave,
+    inputRef: assignInput
+  }), [hasFocus, hasMouseOver, onFocus, onBlur, onMouseDown, blockGroupBehaviour, onMouseEnter, onMouseLeave, assignInput]);
+  return contextValue;
+};
+
+export default useInputBehaviour;

package/esm/__internal__/input-icon-toggle/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./input-icon-toggle";

package/esm/__internal__/input-icon-toggle/index.js

@@ -0,0 +1 @@
+export { default } from "./input-icon-toggle.component";

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.d.ts

@@ -0,0 +1,38 @@
+export default InputIconToggle;
+declare function InputIconToggle({ disabled, readOnly, size, inputIcon: type, onClick, onFocus, onBlur, onMouseDown, error, warning, info, useValidationIcon, align, iconTabIndex, validationIconId, }: {
+    disabled: any;
+    readOnly: any;
+    size: any;
+    inputIcon: any;
+    onClick: any;
+    onFocus: any;
+    onBlur: any;
+    onMouseDown: any;
+    error: any;
+    warning: any;
+    info: any;
+    useValidationIcon: any;
+    align: any;
+    iconTabIndex: any;
+    validationIconId: any;
+}): JSX.Element | null;
+declare namespace InputIconToggle {
+    namespace propTypes {
+        const error: PropTypes.Requireable<string | boolean>;
+        const warning: PropTypes.Requireable<string | boolean>;
+        const info: PropTypes.Requireable<string | boolean>;
+        const disabled: PropTypes.Requireable<boolean>;
+        const readOnly: PropTypes.Requireable<boolean>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        const onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
+        const inputIcon: PropTypes.Requireable<string>;
+        const size: PropTypes.Requireable<string>;
+        const align: PropTypes.Requireable<string>;
+        const useValidationIcon: PropTypes.Requireable<boolean>;
+        const iconTabIndex: PropTypes.Requireable<number>;
+        const validationIconId: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";