carbon-react 110.1.3 → 110.2.2

package/esm/components/popover-container/popover-container.component.js

@@ -16,20 +16,25 @@ const renderOpen = ({
   "data-element": dataElement,
   ref,
   "aria-label": ariaLabel,
-  id
+  id,
+  "aria-expanded": ariaExpanded,
+  "aria-haspopup": ariaHasPopup
 }) => /*#__PURE__*/React.createElement(PopoverContainerOpenIcon, {
   tabIndex: tabIndex,
   onAction: onClick,
   "data-element": dataElement,
   ref: ref,
   "aria-label": ariaLabel,
-  "aria-haspopup": true,
+  "aria-haspopup": ariaHasPopup,
+  "aria-expanded": ariaExpanded,
   id: id
 }, /*#__PURE__*/React.createElement(Icon, {
   type: "settings"
 }));
 
 renderOpen.propTypes = {
+  "aria-expanded": PropTypes.bool.isRequired,
+  "aria-haspopup": PropTypes.oneOf(["dialog"]).isRequired,
   "aria-label": PropTypes.string,
   "data-element": PropTypes.string.isRequired,
   "id": PropTypes.string,
@@ -122,6 +127,8 @@ const PopoverContainer = ({
 
   const renderOpenComponentProps = {
     tabIndex: isOpen ? -1 : 0,
+    "aria-expanded": isOpen,
+    "aria-haspopup": "dialog",
     isOpen,
     "data-element": "popover-container-open-component",
     onClick: handleOpenButtonClick,
@@ -145,8 +152,6 @@ const PopoverContainer = ({
   const handleClick = useClickAwayListener(handleClickAway, "mousedown");
   return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
-    role: "region",
-    "aria-labelledby": popoverContainerId,
     onMouseDown: handleClick
   }, renderOpenComponent(renderOpenComponentProps), /*#__PURE__*/React.createElement(Transition, {
     in: isOpen,

package/esm/components/portal/portal.d.ts

@@ -1,14 +1,17 @@
-import * as React from "react";
-
-export interface PortalProps {
-  /** The content of the portal. */
-  children?: React.ReactNode;
-  className?: string;
-  id?: string;
-  /** Callback function triggered when parent element is scrolled or window resized. */
-  onReposition?: () => void;
+import React from "react";
+interface PortalContextProps {
+    renderInRoot?: boolean;
 }
-
-declare function Portal(props: PortalProps): JSX.Element;
-
+export declare const PortalContext: React.Context<PortalContextProps>;
+interface PortalProps {
+    /** The content of the portal. */
+    children?: React.ReactNode;
+    /** Classname attached to portal container. */
+    className?: string;
+    /** Id attribute attached to portal container. */
+    id?: string;
+    /** Callback function triggered when parent element is scrolled or window resized. */
+    onReposition?: () => void;
+}
+declare const Portal: ({ children, className, id, onReposition }: PortalProps) => JSX.Element;
 export default Portal;

package/esm/components/portal/portal.js

@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
-import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 import guid from "../../__internal__/utils/helpers/guid";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
@@ -30,13 +29,13 @@ const Portal = ({
   }, [onReposition]);
   useEffect(() => {
     return () => {
-      portalNode.remove();
+      portalNode === null || portalNode === void 0 ? void 0 : portalNode.remove();
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const addClassNames = node => {
-    className.split(" ").forEach(el => {
-      node.classList.add(el);
+    className === null || className === void 0 ? void 0 : className.split(" ").forEach(el => {
+      node === null || node === void 0 ? void 0 : node.classList.add(el);
     });
     return node;
   };
@@ -80,13 +79,4 @@ const Portal = ({
   }, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, children), getPortalContainer()));
 };
 
-Portal.propTypes = {
-  /** The content of the portal. */
-  children: PropTypes.node,
-  className: PropTypes.string,
-  id: PropTypes.string,
-
-  /** Callback function triggered when parent element is scrolled or window resized. */
-  onReposition: PropTypes.func
-};
 export default Portal;

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

@@ -208,7 +208,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
         wrapText: wrapPillText
       }, pillProps), title));
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [children, disabled, readOnly, selectedValue]);
+  }, [children, disabled, readOnly, actualValue]);
   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/esm/components/select/select-list/select-list.component.js

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

package/esm/components/textarea/textarea.component.js

@@ -5,22 +5,18 @@ import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import { InputPresentation } from "../../__internal__/input";
 import FormField from "../../__internal__/form-field";
-import CharacterCount from "../../__internal__/character-count";
+import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
 import Input from "../../__internal__/input/input.component";
 import { InputBehaviour } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import InputIconToggle from "../../__internal__/input-icon-toggle";
 import guid from "../../__internal__/utils/helpers/guid";
 import StyledTextarea, { MIN_HEIGHT } from "./textarea.style";
-import LocaleContext from "../../__internal__/i18n-context";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
-
-const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
-
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Textarea = ({
@@ -61,7 +57,6 @@ const Textarea = ({
   helpAriaLabel,
   ...props
 }) => {
-  const locale = useContext(LocaleContext);
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
@@ -98,6 +93,8 @@ const Textarea = ({
     label,
     fieldHelp
   });
+  const [maxLength, characterCount] = useCharacterCount(value, // TODO: Can be removed after the characterLimit type is changed to number
+  typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
   useEffect(() => {
     if (rows) {
       minHeight.current = inputRef.current.scrollHeight;
@@ -120,24 +117,6 @@ const Textarea = ({
       }
     };
   }, [expandable]);
-
-  const isOverLimit = () => {
-    return (value || "").length > parseInt(characterLimit, 10);
-  };
-
-  const characterCount = () => {
-    if (!characterLimit) {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement(CharacterCount, {
-      isOverLimit: isOverLimit() && warnOverLimit,
-      value: getFormatNumber((value || "").length, locale.locale()),
-      limit: getFormatNumber(characterLimit, locale.locale()),
-      "data-element": "character-limit"
-    });
-  };
-
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
@@ -186,7 +165,7 @@ const Textarea = ({
     name: name,
     value: value,
     ref: inputRef,
-    maxLength: enforceCharacterLimit && characterLimit ? characterLimit : undefined,
+    maxLength: maxLength,
     onChange: onChange,
     disabled: disabled,
     readOnly: readOnly,
@@ -206,7 +185,7 @@ const Textarea = ({
     info: info,
     validationIconId: validationRedesignOptIn ? undefined : validationIconId,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
-  }))), characterCount())));
+  }))), characterCount)));
 };
 
 Textarea.propTypes = { ...marginPropTypes,
@@ -227,7 +206,7 @@ Textarea.propTypes = { ...marginPropTypes,
   id: PropTypes.string,
 
   /** Character limit of the textarea */
-  characterLimit: PropTypes.string,
+  characterLimit: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /** Type of the icon that will be rendered next to the input */
   children: PropTypes.node,

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

@@ -1 +1 @@
-export { default, OriginalTextbox } from "./textbox.component";
+export { default } from "./textbox.component";

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