carbon-react 110.2.0 → 110.2.1

package/esm/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/esm/components/textbox/textbox.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 const ErrorBorder = styled.span`
   ${({
   warning
@@ -19,15 +18,4 @@ const StyledHintText = styled.p`
   color: var(--colorsUtilityYin055);
   font-size: 14px;
 `;
-StyledHintText.defaultProps = {
-  size: "medium"
-};
-ErrorBorder.propTypes = {
-  warning: PropTypes.bool,
-  size: PropTypes.string
-};
-ErrorBorder.defaultProps = {
-  warning: false,
-  size: "medium"
-};
 export { StyledHintText, ErrorBorder };

package/esm/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/esm/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -4,19 +4,20 @@ import useLocale from "../useLocale";
 
 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 = useLocale();
   const isOverLimit = 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.createElement(CharacterCount, {
+  }, [value, characterLimit, isCharacterLimitValid]);
+  return [enforceCharacterLimit && isCharacterLimitValid ? characterLimit : undefined, isCharacterLimitValid ? /*#__PURE__*/React.createElement(CharacterCount, {
     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/esm/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/__internal__/character-count/character-count.component.d.ts

@@ -1,26 +1,9 @@
-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 };
-    }
+/// <reference types="react" />
+interface CharacterCountProps {
+    value: string;
+    limit: string;
+    isOverLimit: boolean;
+    "data-element"?: string;
 }
-import PropTypes from "prop-types";
-import baseTheme from "../../style/themes/base";
+declare const CharacterCount: ({ value, limit, isOverLimit, "data-element": dataElement, }: CharacterCountProps) => JSX.Element;
+export default CharacterCount;

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

@@ -3,42 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CharacterCount = exports.default = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = require("styled-components");
-
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _characterCount = _interopRequireDefault(require("./character-count.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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); }
-
 const CharacterCount = ({
   value,
   limit,
-  theme,
-  ...props
-}) => /*#__PURE__*/_react.default.createElement(_characterCount.default, _extends({
-  theme: theme,
-  "aria-live": "polite"
-}, props), `${value}/${limit}`);
+  isOverLimit,
+  "data-element": dataElement
+}) => /*#__PURE__*/_react.default.createElement(_characterCount.default, {
+  "aria-live": "polite",
+  isOverLimit: isOverLimit,
+  "data-element": dataElement
+}, `${value}/${limit}`);
 
-exports.CharacterCount = CharacterCount;
 CharacterCount.propTypes = {
-  value: _propTypes.default.string.isRequired,
-  limit: _propTypes.default.string.isRequired,
-  theme: _propTypes.default.object
+  "data-element": _propTypes.default.string,
+  "isOverLimit": _propTypes.default.bool.isRequired,
+  "limit": _propTypes.default.string.isRequired,
+  "value": _propTypes.default.string.isRequired
 };
-CharacterCount.defaultProps = {
-  theme: _base.default
-};
-
-var _default = (0, _styledComponents.withTheme)(CharacterCount);
-
+var _default = CharacterCount;
 exports.default = _default;

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

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

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

@@ -7,6 +7,10 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
+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; }
@@ -26,5 +30,8 @@ const StyledCharacterCount = _styledComponents.default.div`
       font-weight: 700;
     `}
 `;
+StyledCharacterCount.defaultProps = {
+  theme: _base.default
+};
 var _default = StyledCharacterCount;
 exports.default = _default;

package/lib/__internal__/input/index.d.ts

@@ -1,5 +1,5 @@
 import Input from "./input.component";
 import InputPresentation from "./input-presentation.component";
-export type { InputProps } from "./input.component";
+export type { InputProps, CommonInputProps } from "./input.component";
 export { Input, InputPresentation };
 export default Input;

package/lib/components/numeral-date/numeral-date-context.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare type NumeralContextType = {
+    disableErrorBorder?: boolean;
+};
+declare const _default: React.Context<NumeralContextType>;
+export default _default;

package/lib/components/select/multi-select/multi-select.component.js

@@ -236,7 +236,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
         wrapText: wrapPillText
       }, pillProps), title));
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [children, disabled, readOnly, selectedValue]);
+  }, [children, disabled, readOnly, actualValue]);
   (0, _react.useEffect)(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";

package/lib/components/select/select-list/select-list.component.js

@@ -91,6 +91,24 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     blockScroll,
     allowScroll
   } = (0, _useScrollBlock.default)();
+
+  const updateListHeight = () => {
+    let newHeight = listRef.current.clientHeight;
+
+    if (listActionButtonRef.current) {
+      newHeight += listActionButtonRef.current.parentElement.clientHeight;
+    }
+
+    setListHeight(`${newHeight}px`);
+  };
+
+  const listCallbackRef = (0, _react.useCallback)(element => {
+    listRef.current = element;
+
+    if (element) {
+      setTimeout(updateListHeight, 0);
+    }
+  }, []);
   (0, _react.useEffect)(() => {
     blockScroll();
     return () => {
@@ -255,16 +273,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       window.removeEventListener("resize", assignListWidth);
     };
   }, [assignListWidth]);
-  (0, _react.useLayoutEffect)(() => {
-    let newHeight;
-    newHeight = listRef.current.clientHeight;
-
-    if (listActionButtonRef.current) {
-      newHeight += listActionButtonRef.current.parentElement.clientHeight;
-    }
-
-    setListHeight(`${newHeight}px`);
-  }, [children]);
+  (0, _react.useLayoutEffect)(updateListHeight, [children]);
   (0, _react.useEffect)(() => {
     const keyboardEvent = "keydown";
     const listElement = listRef.current;
@@ -355,7 +364,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     "aria-labelledby": labelId,
     "data-element": "select-list",
     role: "listbox",
-    ref: listRef,
+    ref: listCallbackRef,
     tabIndex: "-1",
     isLoading: isLoading,
     multiColumn: multiColumn

package/lib/components/textarea/textarea.component.js

@@ -15,7 +15,7 @@ var _input = require("../../__internal__/input");
 
 var _formField = _interopRequireDefault(require("../../__internal__/form-field"));
 
-var _characterCount = _interopRequireDefault(require("../../__internal__/character-count"));
+var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal__/useCharacterCount"));
 
 var _input2 = _interopRequireDefault(require("../../__internal__/input/input.component"));
 
@@ -29,8 +29,6 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 
 var _textarea = _interopRequireWildcard(require("./textarea.style"));
 
-var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
-
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
@@ -49,8 +47,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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); }
 
-const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
-
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const Textarea = ({
@@ -91,7 +87,6 @@ const Textarea = ({
   helpAriaLabel,
   ...props
 }) => {
-  const locale = (0, _react.useContext)(_i18nContext.default);
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
@@ -128,6 +123,8 @@ const Textarea = ({
     label,
     fieldHelp
   });
+  const [maxLength, characterCount] = (0, _useCharacterCount.default)(value, // TODO: Can be removed after the characterLimit type is changed to number
+  typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
   (0, _react.useEffect)(() => {
     if (rows) {
       minHeight.current = inputRef.current.scrollHeight;
@@ -150,24 +147,6 @@ const Textarea = ({
       }
     };
   }, [expandable]);
-
-  const isOverLimit = () => {
-    return (value || "").length > parseInt(characterLimit, 10);
-  };
-
-  const characterCount = () => {
-    if (!characterLimit) {
-      return null;
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_characterCount.default, {
-      isOverLimit: isOverLimit() && warnOverLimit,
-      value: getFormatNumber((value || "").length, locale.locale()),
-      limit: getFormatNumber(characterLimit, locale.locale()),
-      "data-element": "character-limit"
-    });
-  };
-
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
@@ -216,7 +195,7 @@ const Textarea = ({
     name: name,
     value: value,
     ref: inputRef,
-    maxLength: enforceCharacterLimit && characterLimit ? characterLimit : undefined,
+    maxLength: maxLength,
     onChange: onChange,
     disabled: disabled,
     readOnly: readOnly,
@@ -236,7 +215,7 @@ const Textarea = ({
     info: info,
     validationIconId: validationRedesignOptIn ? undefined : validationIconId,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
-  }))), characterCount())));
+  }))), characterCount)));
 };
 
 exports.OriginalTextarea = Textarea;
@@ -258,7 +237,7 @@ Textarea.propTypes = { ...marginPropTypes,
   id: _propTypes.default.string,
 
   /** Character limit of the textarea */
-  characterLimit: _propTypes.default.string,
+  characterLimit: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
 
   /** Type of the icon that will be rendered next to the input */
   children: _propTypes.default.node,

package/lib/components/textarea/textarea.d.ts

@@ -4,6 +4,7 @@ import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../__internal__/validations";
 import { CommonInputProps } from "../../__internal__/input";
 
+// TODO: Change characterLimit type to number - batch with other breaking changes
 export interface TextareaProps
   extends ValidationProps,
     MarginProps,
@@ -19,7 +20,7 @@ export interface TextareaProps
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint?: number;
   /** Character limit of the textarea */
-  characterLimit?: string;
+  characterLimit?: string | number;
   /** Type of the icon that will be rendered next to the input */
   children?: React.ReactNode;
   /** The visible width of the text control, in average character widths */

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

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

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

@@ -1 +1,2 @@
-export { default, TextboxProps, CommonTextboxProps } from "./textbox";
+export { default } from "./textbox.component";
+export type { TextboxProps, CommonTextboxProps } from "./textbox.component";

package/lib/components/textbox/index.js

@@ -9,15 +9,7 @@ Object.defineProperty(exports, "default", {
     return _textbox.default;
   }
 });
-Object.defineProperty(exports, "OriginalTextbox", {
-  enumerable: true,
-  get: function () {
-    return _textbox.OriginalTextbox;
-  }
-});
-
-var _textbox = _interopRequireWildcard(require("./textbox.component"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+var _textbox = _interopRequireDefault(require("./textbox.component"));
 
-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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,92 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { CommonInputProps } from "../../__internal__/input";
+import { ValidationProps } from "../../__internal__/validations";
+import { IconType } from "../icon";
+export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size"> {
+    /** 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;
+    /** 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?: IconType;
+    /** Optional handler for click event on Textbox icon */
+    iconOnClick?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    /** Optional handler for mouse down event on Textbox icon */
+    iconOnMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** Overrides the default tabindex of the component */
+    iconTabIndex?: 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> | React.KeyboardEvent<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;
+    /** Emphasized part of the displayed text */
+    prefix?: string;
+    /** Reverses label and input display */
+    reverse?: 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;
+    /** 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 | number;
+    /** Stop the user typing over the characterLimit */
+    enforceCharacterLimit?: boolean;
+    /** Whether to display the character count message in red */
+    warnOverLimit?: boolean;
+}
+export declare const Textbox: ({ align, autoFocus, children, disabled, inputIcon, leftChildren, labelId: externalLabelId, label, labelAlign, labelHelp, labelInline, labelSpacing, id, formattedValue, fieldHelp, error, warning, info, name, reverse, size, value, readOnly, placeholder, inputRef, onBlur, onClick, onFocus, onChange, onMouseDown, onChangeDeferred, deferTimeout, isOptional, iconOnClick, iconOnMouseDown, iconTabIndex, validationOnLabel, labelWidth, inputWidth, prefix, adaptiveLabelBreakpoint, required, positionedChildren, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, enforceCharacterLimit, characterLimit, warnOverLimit, helpAriaLabel, ...props }: TextboxProps) => JSX.Element;
+export default Textbox;