carbon-react 104.34.1 → 104.37.0

package/esm/__internal__/DeprecationWarning.d.ts

@@ -0,0 +1,10 @@
+export default DeprecationWarning;
+declare function DeprecationWarning({ children }: {
+    children: any;
+}): JSX.Element;
+declare namespace DeprecationWarning {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/__internal__/DeprecationWarning.js

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const DeprecationWarning = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    backgroundColor: "red",
+    textAlign: "center",
+    color: "white",
+    padding: 20,
+    fontWeight: "bold",
+    marginBottom: 10
+  }
+}, children);
+
+DeprecationWarning.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export default DeprecationWarning;

package/esm/__internal__/character-count/character-count.component.d.ts

@@ -0,0 +1,26 @@
+declare var _default: React.ForwardRefExoticComponent<{
+    [x: string]: any;
+    [x: number]: any;
+} & {
+    theme?: any;
+}>;
+export default _default;
+import React from "react";
+export function CharacterCount({ value, limit, theme, ...props }: {
+    [x: string]: any;
+    value: any;
+    limit: any;
+    theme: any;
+}): JSX.Element;
+export namespace CharacterCount {
+    namespace propTypes {
+        const value: PropTypes.Validator<string>;
+        const limit: PropTypes.Validator<string>;
+        const theme: PropTypes.Requireable<object>;
+    }
+    namespace defaultProps {
+        export { baseTheme as theme };
+    }
+}
+import PropTypes from "prop-types";
+import baseTheme from "../../style/themes/base";

package/esm/__internal__/character-count/character-count.component.js

@@ -0,0 +1,28 @@
+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 from "react";
+import PropTypes from "prop-types";
+import { withTheme } from "styled-components";
+import baseTheme from "../../style/themes/base";
+import StyledCharacterCount from "./character-count.style";
+
+const CharacterCount = ({
+  value,
+  limit,
+  theme,
+  ...props
+}) => /*#__PURE__*/React.createElement(StyledCharacterCount, _extends({
+  theme: theme,
+  "aria-live": "polite"
+}, props), `${value}/${limit}`);
+
+CharacterCount.propTypes = {
+  value: PropTypes.string.isRequired,
+  limit: PropTypes.string.isRequired,
+  theme: PropTypes.object
+};
+CharacterCount.defaultProps = {
+  theme: baseTheme
+};
+export default withTheme(CharacterCount);
+export { CharacterCount };

package/esm/__internal__/character-count/character-count.style.d.ts

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

package/esm/__internal__/character-count/character-count.style.js

@@ -0,0 +1,22 @@
+import styled, { css } from "styled-components";
+import baseTheme from "../../style/themes/base";
+const StyledCharacterCount = styled.div`
+  text-align: right;
+  font-size: 12px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  color: ${({
+  theme,
+  isOverLimit
+}) => isOverLimit ? theme.colors.error : theme.disabled.disabled};
+
+  ${({
+  isOverLimit
+}) => isOverLimit && css`
+      font-weight: 700;
+    `}
+`;
+StyledCharacterCount.defaultProps = {
+  theme: baseTheme
+};
+export default StyledCharacterCount;

package/esm/__internal__/character-count/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./character-count.component";

package/esm/__internal__/character-count/index.js

@@ -0,0 +1 @@
+export { default } from "./character-count.component";

package/esm/__internal__/checkable-input/checkable-input-svg-wrapper.style.d.ts

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

package/esm/__internal__/checkable-input/checkable-input-svg-wrapper.style.js

@@ -0,0 +1,3 @@
+import styled from "styled-components";
+const StyledCheckableInputSvgWrapper = styled.div``;
+export default StyledCheckableInputSvgWrapper;

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

@@ -0,0 +1,75 @@
+export default CheckableInput;
+declare function CheckableInput({ ariaLabelledBy: externalAriaLabelledBy, autoFocus, checked, children, disabled, error, fieldHelp, fieldHelpInline, info, id: inputId, inputRef, type, value, inputWidth, label, labelAlign, labelHelp, labelInline, labelSpacing, labelWidth, name, onBlur, onChange, onFocus, required, reverse, validationOnLabel, warning, ...props }: {
+    [x: string]: any;
+    ariaLabelledBy: any;
+    autoFocus: any;
+    checked: any;
+    children: any;
+    disabled: any;
+    error: any;
+    fieldHelp: any;
+    fieldHelpInline: any;
+    info: any;
+    id: any;
+    inputRef: any;
+    type: any;
+    value: any;
+    inputWidth: any;
+    label: any;
+    labelAlign: any;
+    labelHelp: any;
+    labelInline: any;
+    labelSpacing: any;
+    labelWidth: any;
+    name: any;
+    onBlur: any;
+    onChange: any;
+    onFocus: any;
+    required: any;
+    reverse: any;
+    validationOnLabel: any;
+    warning: any;
+}): JSX.Element;
+declare namespace CheckableInput {
+    namespace propTypes {
+        const autoFocus: PropTypes.Requireable<boolean>;
+        const checked: PropTypes.Requireable<boolean>;
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const disabled: PropTypes.Requireable<boolean>;
+        const error: PropTypes.Requireable<string | boolean>;
+        const warning: PropTypes.Requireable<string | boolean>;
+        const info: PropTypes.Requireable<string | boolean>;
+        const fieldHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const fieldHelpInline: PropTypes.Requireable<boolean>;
+        const id: PropTypes.Requireable<string>;
+        const type: PropTypes.Validator<string>;
+        const value: PropTypes.Requireable<string>;
+        const inputWidth: PropTypes.Requireable<string | number>;
+        const label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const labelInline: PropTypes.Requireable<boolean>;
+        const labelAlign: PropTypes.Requireable<string>;
+        const labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const labelSpacing: PropTypes.Requireable<number>;
+        const labelWidth: PropTypes.Requireable<string | number>;
+        const name: PropTypes.Requireable<string>;
+        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        const reverse: PropTypes.Requireable<boolean>;
+        const required: PropTypes.Requireable<boolean>;
+        const inputRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
+            current: PropTypes.Requireable<Element>;
+        }>>;
+        const validationOnLabel: PropTypes.Requireable<boolean>;
+        const ariaLabelledBy: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        const reverse_1: boolean;
+        export { reverse_1 as reverse };
+        const labelSpacing_1: number;
+        export { labelSpacing_1 as labelSpacing };
+        const labelInline_1: boolean;
+        export { labelInline_1 as labelInline };
+    }
+}
+import PropTypes from "prop-types";

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

@@ -0,0 +1,209 @@
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import { StyledCheckableInput, StyledCheckableInputWrapper } from "./checkable-input.style";
+import { InputBehaviour } from "../input-behaviour";
+import FormField from "../form-field";
+import HiddenCheckableInput from "./hidden-checkable-input.component";
+import guid from "../utils/helpers/guid";
+import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
+
+const CheckableInput = ({
+  ariaLabelledBy: externalAriaLabelledBy,
+  autoFocus,
+  checked,
+  children,
+  disabled,
+  error,
+  fieldHelp,
+  fieldHelpInline,
+  info,
+  id: inputId,
+  inputRef,
+  type,
+  value,
+  inputWidth,
+  label,
+  labelAlign,
+  labelHelp,
+  labelInline,
+  labelSpacing,
+  labelWidth,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  required,
+  reverse,
+  validationOnLabel,
+  warning,
+  ...props
+}) => {
+  const {
+    current: id
+  } = useRef(inputId || guid());
+  const {
+    labelId,
+    fieldHelpId,
+    validationIconId,
+    ariaDescribedBy,
+    ariaLabelledBy
+  } = useInputAccessibility({
+    id,
+    error,
+    warning,
+    info,
+    label,
+    fieldHelp
+  });
+  const isRadio = type === "radio";
+  const formFieldProps = {
+    disabled,
+    error,
+    fieldHelp,
+    fieldHelpInline,
+    fieldHelpId,
+    id,
+    info,
+    label,
+    labelAlign,
+    labelHelp,
+    labelHelpIcon: "info",
+    labelId,
+    labelInline,
+    labelSpacing,
+    name: id,
+    reverse,
+    warning,
+    validationIconId,
+    // We don't want an asterisk on each radio control, only the legend
+    // However, we still want the input element to receive the required prop
+    isRequired: isRadio ? undefined : required,
+    useValidationIcon: validationOnLabel
+  };
+  const inputProps = {
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": externalAriaLabelledBy || ariaLabelledBy,
+    "aria-invalid": !!error,
+    autoFocus,
+    checked,
+    disabled,
+    id,
+    inputRef,
+    type,
+    value,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    required,
+    ...props
+  };
+  return /*#__PURE__*/React.createElement(StyledCheckableInputWrapper, {
+    disabled: disabled,
+    fieldHelpInline: fieldHelpInline,
+    inputWidth: inputWidth,
+    labelWidth: labelWidth,
+    labelInline: labelInline,
+    reverse: reverse
+  }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, formFieldProps, /*#__PURE__*/React.createElement(StyledCheckableInput, null, /*#__PURE__*/React.createElement(HiddenCheckableInput, inputProps), children))));
+};
+
+CheckableInput.propTypes = {
+  /** If true the Component will be focused when page load */
+  autoFocus: PropTypes.bool,
+
+  /** Set the value of the CheckableInput */
+  checked: PropTypes.bool,
+
+  /** Used to set the visible aspect of the input (i.e. the checkbox sprite, input slider etc) */
+  children: PropTypes.node,
+
+  /** Toggles disabling of input */
+  disabled: PropTypes.bool,
+
+  /** Indicate that error has occurred
+  Pass string to display icon, tooltip and red border
+  Pass true boolean to only display red border */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Indicate that warning has occurred
+  Pass string to display icon, tooltip and orange border
+  Pass true boolean to only display orange border */
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Indicate additional information
+  Pass string to display icon, tooltip and blue border
+  Pass true boolean to only display blue border */
+  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** The fieldHelp content to display for the input */
+  fieldHelp: PropTypes.node,
+
+  /** Displays fieldHelp inline with the CheckableInput */
+  fieldHelpInline: PropTypes.bool,
+
+  /** Unique Identifier for the input. Will use a randomly generated GUID if none is provided */
+  id: PropTypes.string,
+
+  /** Specifies input type, 'checkbox' or 'radio' */
+  type: PropTypes.string.isRequired,
+
+  /** Value passed to the input */
+  value: PropTypes.string,
+
+  /** Sets percentage-based input width */
+  inputWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** The content for the Label to apply to the input */
+  label: PropTypes.node,
+
+  /** When true, label is placed in line an input */
+  labelInline: PropTypes.bool,
+
+  /** Sets label alignment - accepted values: 'left' (default), 'right' */
+  labelAlign: PropTypes.string,
+
+  /** The content for the help tooltip, to appear next to the Label */
+  labelHelp: PropTypes.node,
+
+  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+  labelSpacing: PropTypes.oneOf([1, 2]),
+
+  /** Sets percentage-based label width */
+  labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** Input name */
+  name: PropTypes.string,
+
+  /** Accepts a callback function which can be used to update parent state on change */
+  onChange: PropTypes.func,
+
+  /** Accepts a callback function which is triggered on focus event */
+  onFocus: PropTypes.func,
+
+  /** Accepts a callback function which is triggered on blur event */
+  onBlur: PropTypes.func,
+
+  /** Reverses label and CheckableInput display */
+  reverse: PropTypes.bool,
+
+  /** Flag to configure component as mandatory */
+  required: PropTypes.bool,
+
+  /** A callback to retrieve the input reference */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })]),
+
+  /** When true, displays validation icon on label */
+  validationOnLabel: PropTypes.bool,
+
+  /** The id of the element that labels the input */
+  ariaLabelledBy: PropTypes.string
+};
+CheckableInput.defaultProps = {
+  reverse: false,
+  labelSpacing: 1,
+  labelInline: true
+};
+export default CheckableInput;

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

@@ -0,0 +1,55 @@
+import * as React from "react";
+
+import { ValidationPropTypes } from "../validations";
+import { CommonHiddenCheckableInputProps } from "./hidden-checkable-input";
+
+export interface CommonCheckableInputProps
+  extends ValidationPropTypes,
+    CommonHiddenCheckableInputProps {
+  /** If true, the component will be disabled */
+  disabled?: boolean;
+  /** Help content to be displayed under an input */
+  fieldHelp?: React.ReactNode;
+  /**
+   * If true, the FieldHelp will be displayed inline
+   * To be used with labelInline prop set to true
+   */
+  fieldHelpInline?: boolean;
+  /** Unique Identifier for the input. Will use a randomly generated GUID if none is provided */
+  id?: string;
+  /** Sets percentage-based input width */
+  inputWidth?: number | string;
+  /** Label content */
+  label?: React.ReactNode;
+  /** The content for the help tooltip, to appear next to the Label */
+  labelHelp?: string | React.ReactNode;
+  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+  labelSpacing?: 1 | 2;
+  /** Label width */
+  labelWidth?: number;
+  /** Flag to configure component as mandatory */
+  required?: boolean;
+  /** If true the label switches position with the input */
+  reverse?: boolean;
+  /** Size of the component */
+  size?: "small" | "large";
+  /** The id of the element that labels the input */
+  ariaLabelledBy?: string;
+}
+
+export interface CheckableInputProps extends CommonCheckableInputProps {
+  /** Used to set the visible aspect of the input (i.e. the checkbox sprite, input slider etc) */
+  children?: React.ReactNode;
+  /** HTML type attribute of the input */
+  type: string;
+  /** Value passed to the input */
+  value?: string;
+  /** Text alignment of the label */
+  labelAlign?: "left" | "right";
+  /** When true label is inline */
+  labelInline?: boolean;
+}
+
+declare function CheckableInput(props: CheckableInputProps): JSX.Element;
+
+export default CheckableInput;

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

@@ -0,0 +1,2 @@
+export const StyledCheckableInput: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCheckableInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,112 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import FieldHelpStyle from "../field-help/field-help.style";
+import { FieldLineStyle } from "../form-field/form-field.style";
+import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
+import LabelStyle, { StyledLabelContainer } from "../label/label.style";
+import StyledHelp from "../../components/help/help.style";
+import baseTheme from "../../style/themes/base";
+import StyledValidationIcon from "../validations/validation-icon.style";
+const StyledCheckableInput = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+const StyledCheckableInputWrapper = styled.div`
+  ${({
+  disabled,
+  fieldHelpInline,
+  inputWidth,
+  labelWidth,
+  labelInline,
+  reverse,
+  theme
+}) => css`
+    ${FieldLineStyle} {
+      display: flex;
+    }
+
+    ${StyledLabelContainer} {
+      ${labelInline && css`
+        justify-content: ${reverse ? "flex-start" : "flex-end"};
+      `}
+      padding-top: 0;
+      width: auto;
+
+      & ${StyledHelp}, & ${StyledValidationIcon} {
+        color: ${theme.help.color};
+        vertical-align: middle;
+
+        &:hover,
+        &:focus {
+          color: ${theme.text.color};
+        }
+      }
+    }
+
+    ${FieldHelpStyle} {
+      flex-basis: 100%;
+    }
+
+    ${disabled && css`
+      ${HiddenCheckableInputStyle},
+      ${LabelStyle} {
+        &:hover,
+        &:focus {
+          outline: none;
+          cursor: not-allowed;
+        }
+      }
+    `}
+
+    ${fieldHelpInline && css`
+      ${FieldLineStyle} {
+        flex-wrap: nowrap;
+      }
+
+      ${StyledCheckableInput} {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+
+      ${FieldHelpStyle} {
+        flex-grow: 0;
+        flex-basis: auto;
+        padding-left: 0;
+        width: auto;
+      }
+    `}
+
+    ${reverse && fieldHelpInline && css`
+      ${StyledCheckableInput} {
+        margin-left: 0;
+      }
+
+      ${FieldHelpStyle} {
+        flex-grow: 1;
+      }
+    `}
+
+    ${inputWidth !== undefined && inputWidth !== 0 && css`
+      ${StyledCheckableInput} {
+        width: ${inputWidth}% !important;
+      }
+    `}
+
+    ${labelWidth !== undefined && labelWidth !== 0 && `
+      ${StyledLabelContainer} {
+        width: ${labelWidth}% !important;
+      }
+    `}
+  `}
+`;
+StyledCheckableInputWrapper.propTypes = {
+  disabled: PropTypes.bool,
+  fieldHelpInline: PropTypes.bool,
+  inputWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  theme: PropTypes.object
+};
+StyledCheckableInputWrapper.defaultProps = {
+  theme: baseTheme
+};
+export { StyledCheckableInput, StyledCheckableInputWrapper };

package/esm/__internal__/checkable-input/hidden-checkable-input.component.d.ts

@@ -0,0 +1,41 @@
+declare var _default: React.MemoExoticComponent<{
+    ({ name, checked, type, value, inputRef, onChange, autoFocus, ...props }: {
+        [x: string]: any;
+        name: any;
+        checked: any;
+        type: any;
+        value: any;
+        inputRef: any;
+        onChange: any;
+        autoFocus: any;
+    }): JSX.Element;
+    propTypes: {
+        /** Allows component to be focused on page load */
+        autoFocus: PropTypes.Requireable<boolean>;
+        /** Checked state of the input */
+        checked: PropTypes.Requireable<boolean>;
+        /** Input name */
+        name: PropTypes.Requireable<string>;
+        /** OnChange event handler */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /** OnFocus event handler */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Blur event handler */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /** OnMouseLeave event handler */
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        /** OnMouseEnter event handler */
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        /** HTML type attribute of the input */
+        type: PropTypes.Validator<string>;
+        /** Value of the input */
+        value: PropTypes.Requireable<string>;
+        /** A callback to retrieve the input reference */
+        inputRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
+            current: PropTypes.Requireable<Element>;
+        }>>;
+    };
+}>;
+export default _default;
+import PropTypes from "prop-types";
+import React from "react";