carbon-react 110.1.3 → 110.2.2

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/lib/style/utils/filter-out-position-props.d.ts

@@ -0,0 +1,3 @@
+import { PositionProps } from "styled-system";
+export declare const positionPropertyNames: string[];
+export default function filterStyledSystemPositionProps(originalObject: Record<string, unknown> | PositionProps): PositionProps;

package/lib/style/utils/filter-out-position-props.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = filterStyledSystemPositionProps;
+exports.positionPropertyNames = void 0;
+
+var _filterObjectProperties = _interopRequireDefault(require("../../__internal__/filter-object-properties"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const positionPropertyNames = ["top", "right", "bottom", "left", "position"];
+exports.positionPropertyNames = positionPropertyNames;
+
+function filterStyledSystemPositionProps(originalObject) {
+  return (0, _filterObjectProperties.default)(originalObject, positionPropertyNames);
+}

package/package.json

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

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/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;