carbon-react 110.2.0 → 110.2.3

package/lib/components/textbox/textbox.style.d.ts

@@ -0,0 +1,5 @@
+declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
+    warning: boolean;
+}, never>;
+declare const StyledHintText: import("styled-components").StyledComponent<"p", any, {}, never>;
+export { StyledHintText, ErrorBorder };

package/lib/components/textbox/textbox.style.js

@@ -7,10 +7,6 @@ exports.ErrorBorder = exports.StyledHintText = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-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; }
@@ -35,15 +31,4 @@ const StyledHintText = _styledComponents.default.p`
   color: var(--colorsUtilityYin055);
   font-size: 14px;
 `;
-exports.StyledHintText = StyledHintText;
-StyledHintText.defaultProps = {
-  size: "medium"
-};
-ErrorBorder.propTypes = {
-  warning: _propTypes.default.bool,
-  size: _propTypes.default.string
-};
-ErrorBorder.defaultProps = {
-  warning: false,
-  size: "medium"
-};
+exports.StyledHintText = StyledHintText;

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const useCharacterCount: (value: string, characterLimit?: string | undefined, warnOverLimit?: boolean, enforceCharacterLimit?: boolean) => [string | undefined, JSX.Element | null];
+declare const useCharacterCount: (value?: string, characterLimit?: number | undefined, warnOverLimit?: boolean, enforceCharacterLimit?: boolean) => [number | undefined, JSX.Element | null];
 export default useCharacterCount;

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -19,19 +19,20 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
 
-const useCharacterCount = (value, characterLimit, warnOverLimit = false, enforceCharacterLimit = true) => {
+const useCharacterCount = (value = "", characterLimit, warnOverLimit = false, enforceCharacterLimit = true) => {
+  const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
   const l = (0, _useLocale.default)();
   const isOverLimit = (0, _react.useMemo)(() => {
-    if (value && characterLimit) {
-      return value.length > parseInt(characterLimit, 10);
+    if (value && isCharacterLimitValid) {
+      return value.length > characterLimit;
     }
 
     return false;
-  }, [value, characterLimit]);
-  return [enforceCharacterLimit && characterLimit ? characterLimit : undefined, characterLimit ? /*#__PURE__*/_react.default.createElement(_characterCount.default, {
+  }, [value, characterLimit, isCharacterLimitValid]);
+  return [enforceCharacterLimit && isCharacterLimitValid ? characterLimit : undefined, isCharacterLimitValid ? /*#__PURE__*/_react.default.createElement(_characterCount.default, {
     isOverLimit: isOverLimit && warnOverLimit,
     value: getFormatNumber(value.length, l.locale()),
-    limit: getFormatNumber(+characterLimit, l.locale()),
+    limit: getFormatNumber(characterLimit, l.locale()),
     "data-element": "character-limit"
   }) : null];
 };

package/lib/hooks/__internal__/useInputAccessibility/useInputAccessibility.d.ts

@@ -1,10 +1,11 @@
+/// <reference types="react" />
 export default function useInputAccessibility({ id, error, warning, info, label, fieldHelp, }: {
     id: string;
-    error?: string;
-    warning?: string;
-    info?: string;
-    label?: string;
-    fieldHelp?: string;
+    error?: string | boolean;
+    warning?: string | boolean;
+    info?: string | boolean;
+    label?: React.ReactNode;
+    fieldHelp?: React.ReactNode;
 }): {
     labelId?: string;
     validationIconId?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "110.2.0",
+  "version": "110.2.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {

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

@@ -1,55 +0,0 @@
-import * as React from "react";
-
-import { ValidationProps } from "../validations";
-import { CommonHiddenCheckableInputProps } from "./hidden-checkable-input";
-
-export interface CommonCheckableInputProps
-  extends ValidationProps,
-    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/hidden-checkable-input.d.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-
-export interface CommonHiddenCheckableInputProps
-  extends Omit<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    "value" | "size" | "type"
-  > {
-  /** If true the Component will be focused when page load */
-  autoFocus?: boolean;
-  /** Checked state of the input */
-  checked?: boolean;
-  /** Input name */
-  name?: string;
-  /** OnChange event handler */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** OnFocus event handler */
-  onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Blur event handler */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** OnMouseLeave event handler */
-  onMouseLeave?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-  /** OnMouseEnter event handler */
-  onMouseEnter?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-  /** Value of the input */
-  value?: string;
-  /** A callback to retrieve the input reference */
-  inputRef?: React.Ref<HTMLInputElement>;
-}
-
-export interface HiddenCheckableInputProps
-  extends CommonHiddenCheckableInputProps {
-  /** HTML type attribute of the input */
-  type: string;
-  /** Role attribute of the input */
-  role?: string;
-}
-
-declare function HiddenCheckableInput(
-  props: HiddenCheckableInputProps
-): JSX.Element;
-
-export default HiddenCheckableInput;

package/esm/components/textbox/textbox.d.ts

@@ -1,125 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-import { ValidationProps } from "../../__internal__/validations";
-import { CommonInputProps } from "../../__internal__/input";
-
-export interface CommonTextboxProps
-  extends ValidationProps,
-    MarginProps,
-    Omit<CommonInputProps, "size"> {
-  /** Automatically focus the input on component mount */
-  autoFocus?: boolean;
-  /* The default value alignment on the input */
-  align?: "right" | "left";
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-component"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-element"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-role"?: string;
-  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLabelBreakpoint?: number;
-  /** Integer to determine a timeout for the deferred callback */
-  deferTimeout?: number;
-  /** If true, the component will be disabled */
-  disabled?: boolean;
-  /** Help content to be displayed under an input */
-  fieldHelp?: React.ReactNode;
-  /**
-   * An optional alternative for props.value, this is useful if the
-   * real value is an ID but you want to show a human-readable version.
-   */
-  formattedValue?: string;
-  /** Unique identifier for the input. Will use a randomly generated GUID if none is provided */
-  id?: string;
-  /** Type of the icon that will be rendered next to the input */
-  inputIcon?: string;
-  /** Optional handler for click event on Textbox icon */
-  iconOnClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Overrides the default tabindex of the component */
-  iconTabIndex?: string | number;
-  /** The width of the input as a percentage */
-  inputWidth?: number;
-  /** Additional child elements to display before the input */
-  leftChildren?: React.ReactNode;
-  /** Label content */
-  label?: string;
-  /** Inline label alignment */
-  labelAlign?: "left" | "right";
-  /** A message that the Help component will display */
-  labelHelp?: React.ReactNode;
-  /** When true label is inline */
-  labelInline?: boolean;
-  /** 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;
-  /** Specify a callback triggered on change */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Deferred callback to be called after the onChange event */
-  onChangeDeferred?: () => void;
-  /** Specify a callback triggered on click */
-  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Event handler for the focus event */
-  onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Event handler for the blur event */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Event handler for the mouse down event */
-  onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Input name */
-  name?: string;
-  /** Placeholder string to be displayed in input */
-  placeholder?: string;
-  /** Emphasized part of the displayed text */
-  prefix?: string;
-  /** Reverses label and input display */
-  reverse?: boolean;
-  /** The unformatted value  */
-  rawValue?: string;
-  /** If true, the component will be read-only */
-  readOnly?: boolean;
-  /** Flag to configure component as mandatory */
-  required?: boolean;
-  /** Size of an input */
-  size?: "small" | "medium" | "large";
-  /** When true, validation icon will be placed on label instead of being placed on the input */
-  validationOnLabel?: boolean;
-  /** The value of the Input */
-  value?:
-    | string
-    | string[]
-    | Record<string, unknown>
-    | Record<string, unknown>[];
-  /** A callback to retrieve the input reference */
-  inputRef?: (input: React.RefObject<HTMLInputElement>) => void;
-  /** Overrides the default tooltip position */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** Aria label for rendered help component */
-  helpAriaLabel?: string;
-}
-
-export interface TextboxProps extends CommonTextboxProps {
-  /** Content to be rendered next to the input */
-  children?: React.ReactNode;
-  /** [Legacy] Flag to configure component as optional in Form */
-  isOptional?: boolean;
-  /** Container for DatePicker or SelectList components */
-  positionedChildren?: React.ReactNode;
-  /** Label id passed from Select component */
-  labelId?: string;
-  /** Character limit of the textarea */
-  characterLimit?: string;
-  /** Stop the user typing over the characterLimit */
-  enforceCharacterLimit?: boolean;
-  /** Whether to display the character count message in red */
-  warnOverLimit?: boolean;
-}
-
-declare function Textbox(props: TextboxProps): JSX.Element;
-declare function TextboxWithUniqueIdProps(
-  props: TextboxProps & React.RefAttributes<HTMLInputElement>
-): JSX.Element;
-
-export { Textbox as OriginalTextbox };
-export default TextboxWithUniqueIdProps;

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

@@ -1,55 +0,0 @@
-import * as React from "react";
-
-import { ValidationProps } from "../validations";
-import { CommonHiddenCheckableInputProps } from "./hidden-checkable-input";
-
-export interface CommonCheckableInputProps
-  extends ValidationProps,
-    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/lib/__internal__/checkable-input/hidden-checkable-input.d.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-
-export interface CommonHiddenCheckableInputProps
-  extends Omit<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    "value" | "size" | "type"
-  > {
-  /** If true the Component will be focused when page load */
-  autoFocus?: boolean;
-  /** Checked state of the input */
-  checked?: boolean;
-  /** Input name */
-  name?: string;
-  /** OnChange event handler */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** OnFocus event handler */
-  onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Blur event handler */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** OnMouseLeave event handler */
-  onMouseLeave?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-  /** OnMouseEnter event handler */
-  onMouseEnter?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-  /** Value of the input */
-  value?: string;
-  /** A callback to retrieve the input reference */
-  inputRef?: React.Ref<HTMLInputElement>;
-}
-
-export interface HiddenCheckableInputProps
-  extends CommonHiddenCheckableInputProps {
-  /** HTML type attribute of the input */
-  type: string;
-  /** Role attribute of the input */
-  role?: string;
-}
-
-declare function HiddenCheckableInput(
-  props: HiddenCheckableInputProps
-): JSX.Element;
-
-export default HiddenCheckableInput;

package/lib/components/textbox/textbox.d.ts

@@ -1,125 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-import { ValidationProps } from "../../__internal__/validations";
-import { CommonInputProps } from "../../__internal__/input";
-
-export interface CommonTextboxProps
-  extends ValidationProps,
-    MarginProps,
-    Omit<CommonInputProps, "size"> {
-  /** Automatically focus the input on component mount */
-  autoFocus?: boolean;
-  /* The default value alignment on the input */
-  align?: "right" | "left";
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-component"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-element"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-role"?: string;
-  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLabelBreakpoint?: number;
-  /** Integer to determine a timeout for the deferred callback */
-  deferTimeout?: number;
-  /** If true, the component will be disabled */
-  disabled?: boolean;
-  /** Help content to be displayed under an input */
-  fieldHelp?: React.ReactNode;
-  /**
-   * An optional alternative for props.value, this is useful if the
-   * real value is an ID but you want to show a human-readable version.
-   */
-  formattedValue?: string;
-  /** Unique identifier for the input. Will use a randomly generated GUID if none is provided */
-  id?: string;
-  /** Type of the icon that will be rendered next to the input */
-  inputIcon?: string;
-  /** Optional handler for click event on Textbox icon */
-  iconOnClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Overrides the default tabindex of the component */
-  iconTabIndex?: string | number;
-  /** The width of the input as a percentage */
-  inputWidth?: number;
-  /** Additional child elements to display before the input */
-  leftChildren?: React.ReactNode;
-  /** Label content */
-  label?: string;
-  /** Inline label alignment */
-  labelAlign?: "left" | "right";
-  /** A message that the Help component will display */
-  labelHelp?: React.ReactNode;
-  /** When true label is inline */
-  labelInline?: boolean;
-  /** 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;
-  /** Specify a callback triggered on change */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Deferred callback to be called after the onChange event */
-  onChangeDeferred?: () => void;
-  /** Specify a callback triggered on click */
-  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Event handler for the focus event */
-  onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Event handler for the blur event */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Event handler for the mouse down event */
-  onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Input name */
-  name?: string;
-  /** Placeholder string to be displayed in input */
-  placeholder?: string;
-  /** Emphasized part of the displayed text */
-  prefix?: string;
-  /** Reverses label and input display */
-  reverse?: boolean;
-  /** The unformatted value  */
-  rawValue?: string;
-  /** If true, the component will be read-only */
-  readOnly?: boolean;
-  /** Flag to configure component as mandatory */
-  required?: boolean;
-  /** Size of an input */
-  size?: "small" | "medium" | "large";
-  /** When true, validation icon will be placed on label instead of being placed on the input */
-  validationOnLabel?: boolean;
-  /** The value of the Input */
-  value?:
-    | string
-    | string[]
-    | Record<string, unknown>
-    | Record<string, unknown>[];
-  /** A callback to retrieve the input reference */
-  inputRef?: (input: React.RefObject<HTMLInputElement>) => void;
-  /** Overrides the default tooltip position */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** Aria label for rendered help component */
-  helpAriaLabel?: string;
-}
-
-export interface TextboxProps extends CommonTextboxProps {
-  /** Content to be rendered next to the input */
-  children?: React.ReactNode;
-  /** [Legacy] Flag to configure component as optional in Form */
-  isOptional?: boolean;
-  /** Container for DatePicker or SelectList components */
-  positionedChildren?: React.ReactNode;
-  /** Label id passed from Select component */
-  labelId?: string;
-  /** Character limit of the textarea */
-  characterLimit?: string;
-  /** Stop the user typing over the characterLimit */
-  enforceCharacterLimit?: boolean;
-  /** Whether to display the character count message in red */
-  warnOverLimit?: boolean;
-}
-
-declare function Textbox(props: TextboxProps): JSX.Element;
-declare function TextboxWithUniqueIdProps(
-  props: TextboxProps & React.RefAttributes<HTMLInputElement>
-): JSX.Element;
-
-export { Textbox as OriginalTextbox };
-export default TextboxWithUniqueIdProps;