carbon-react 110.1.2 → 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/esm/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/esm/style/utils/filter-out-position-props.js

@@ -0,0 +1,5 @@
+import filterObjectProperties from "../../__internal__/filter-object-properties";
+export const positionPropertyNames = ["top", "right", "bottom", "left", "position"];
+export default function filterStyledSystemPositionProps(originalObject) {
+  return filterObjectProperties(originalObject, positionPropertyNames);
+}

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__/form-field/form-field.component.d.ts

@@ -32,6 +32,10 @@ interface CommonFormFieldProps extends MarginProps, ValidationProps {
     reverse?: boolean;
     /** Id of the validation icon */
     validationIconId?: string;
+    /**
+     * @private @ignore
+     * Flag dedicating if latest validation design should be used */
+    validationRedesignOptIn?: boolean;
 }
 export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
@@ -53,7 +57,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     useValidationIcon?: boolean;
 }
 declare const FormField: {
-    ({ children, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, ...rest }: FormFieldProps): JSX.Element;
+    ({ children, "data-component": dataComponent, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): JSX.Element;
     displayName: string;
 };
 export default FormField;

package/lib/__internal__/form-field/form-field.component.js

@@ -35,6 +35,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const FormField = ({
   children,
+  "data-component": dataComponent,
   disabled,
   fieldHelp: fieldHelpContent,
   fieldHelpInline,
@@ -58,6 +59,7 @@ const FormField = ({
   adaptiveLabelBreakpoint,
   isRequired,
   validationIconId,
+  validationRedesignOptIn,
   ...rest
 }) => {
   const invalidValidationProp = (0, _react.useMemo)(() => {
@@ -93,15 +95,15 @@ const FormField = ({
     labelWidth: labelWidth,
     id: fieldHelpId
   }, fieldHelpContent) : null;
-  return /*#__PURE__*/_react.default.createElement(_formField.default, _extends({}, (0, _tags.default)(rest["data-component"], rest), marginProps), /*#__PURE__*/_react.default.createElement(_formField.FieldLineStyle, {
+  return /*#__PURE__*/_react.default.createElement(_formField.default, _extends({}, (0, _tags.default)(dataComponent, rest), marginProps), /*#__PURE__*/_react.default.createElement(_formField.FieldLineStyle, {
     inline: inlineLabel
   }, reverse && children, label && /*#__PURE__*/_react.default.createElement(_label.default, {
     labelId: labelId,
     align: labelAlign,
     disabled: disabled,
-    error: !rest.validationRedesignOptIn && error,
-    warning: !rest.validationRedesignOptIn && warning,
-    info: !rest.validationRedesignOptIn && info,
+    error: !validationRedesignOptIn && error,
+    warning: !validationRedesignOptIn && warning,
+    info: !validationRedesignOptIn && info,
     help: labelHelp,
     tooltipId: tooltipId,
     htmlFor: id,
@@ -120,7 +122,7 @@ const FormField = ({
 FormField.propTypes = {
   "adaptiveLabelBreakpoint": _propTypes.default.number,
   "children": _propTypes.default.node,
-  "data-component": _propTypes.default.string.isRequired,
+  "data-component": _propTypes.default.string,
   "data-element": _propTypes.default.string,
   "data-role": _propTypes.default.string,
   "disabled": _propTypes.default.bool,
@@ -298,6 +300,7 @@ FormField.propTypes = {
   "tooltipId": _propTypes.default.string,
   "useValidationIcon": _propTypes.default.bool,
   "validationIconId": _propTypes.default.string,
+  "validationRedesignOptIn": _propTypes.default.bool,
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
 FormField.displayName = "FormField";

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/__internal__/utils/helpers/tags/tags.d.ts

@@ -1,13 +1,16 @@
 interface DataProps {
+    /** 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;
     [restKeys: string]: any;
 }
 export interface TagProps extends DataProps {
-    "data-component": string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-component"?: string;
 }
 /**
  * Builds props object containing top level data tags
  */
-declare function tagComponent(componentName: string, props: DataProps): TagProps;
+declare function tagComponent(componentName: string | undefined, props: DataProps): TagProps;
 export default tagComponent;

package/lib/__spec_helper__/test-utils.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ReactWrapper, ShallowWrapper } from "enzyme";
-import { LayoutProps, FlexboxProps, BackgroundProps } from "styled-system";
+import { LayoutProps, FlexboxProps, BackgroundProps, PositionProps } from "styled-system";
 import { ReactTestRendererJSON } from "react-test-renderer";
 import { mockMatchMedia } from "./mock-match-media";
 declare const toCSSCase: (str: string) => string;
@@ -47,5 +47,6 @@ declare const testStyledSystemWidth: (component: (widthProperties?: {
 declare const testStyledSystemLayout: (component: (layoutProperties?: LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemFlexBox: (component: (flexboxProperties?: FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemBackground: (component: (backgroundProperties?: BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const testStyledSystemPosition: (component: (positionProperties?: PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const expectConsoleOutput: (message: string, type?: "warn" | "error") => () => void;
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, expectConsoleOutput, };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };

package/lib/__spec_helper__/test-utils.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "mockMatchMedia", {
     return _mockMatchMedia.mockMatchMedia;
   }
 });
-exports.expectConsoleOutput = exports.testStyledSystemBackground = exports.testStyledSystemFlexBox = exports.testStyledSystemLayout = exports.testStyledSystemWidth = exports.testStyledSystemColor = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemSpacing = exports.carbonThemesJestTable = exports.simulate = exports.click = exports.listFrom = exports.assertHoverTraversal = exports.assertKeyboardTraversal = exports.keyboard = exports.makeArrayKeys = exports.childrenFrom = exports.selectedItemOf = exports.hoverList = exports.toCSSCase = exports.assertStyleMatch = exports.getDefaultValue = void 0;
+exports.expectConsoleOutput = exports.testStyledSystemPosition = exports.testStyledSystemBackground = exports.testStyledSystemFlexBox = exports.testStyledSystemLayout = exports.testStyledSystemWidth = exports.testStyledSystemColor = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemSpacing = exports.carbonThemesJestTable = exports.simulate = exports.click = exports.listFrom = exports.assertHoverTraversal = exports.assertKeyboardTraversal = exports.keyboard = exports.makeArrayKeys = exports.childrenFrom = exports.selectedItemOf = exports.hoverList = exports.toCSSCase = exports.assertStyleMatch = exports.getDefaultValue = void 0;
 
 var _enzyme = require("enzyme");
 
@@ -148,6 +148,7 @@ const widthProps = ["width", "width", "200px"];
 const layoutProps = [widthProps, ["height", "height", "200px"], ["minWidth", "min-width", "120px"], ["maxWidth", "max-width", "120px"], ["minHeight", "min-height", "120px"], ["maxHeight", "max-height", "120px"], ["size", "width", "120px"], ["size", "height", "120px"], ["display", "display", "inline-block"], ["verticalAlign", "vertical-align", "baseline"], ["overflow", "overflow", "hidden"], ["overflowX", "overflow-x", "hidden"], ["overflowY", "overflow-y", "hidden"]];
 const flexBoxProps = [["alignItems", "alignItems", "center"], ["alignContent", "alignContent", "center"], ["justifyItems", "justifyItems", "center"], ["justifyContent", "justifyContent", "center"], ["flexWrap", "flexWrap", "wrap"], ["flexDirection", "flexDirection", "row-reverse"], ["flex", "flex", "1"], ["flexGrow", "flexGrow", "1"], ["flexShrink", "flexShrink", "1"], ["flexBasis", "flexBasis", "100px"], ["justifySelf", "justifySelf", "center"], ["alignSelf", "alignSelf", "center"], ["order", "order", "1"]];
 const backgroundProps = [["background", "background", "lightblue url('foo.jpg') no-repeat fixed center"], ["backgroundImage", "background-image", "url(foo.jpg)"], ["backgroundSize", "background-size", "center"], ["backgroundRepeat", "background-repeat", "no-repeat"]];
+const positionProps = [["top", "0px"], ["bottom", "0px"], ["right", "0px"], ["left", "0px"], ["position", "fixed"], ["position", "sticky"], ["position", "absolute"], ["position", "static"], ["position", "relative"]];
 
 const getDefaultValue = value => {
   const spaceArrayLength = _baseTheme.space.length - 1;
@@ -358,10 +359,27 @@ const testStyledSystemBackground = (component, styleContainer) => {
       }, styleContainer ? styleContainer(wrapper) : wrapper);
     });
   });
+};
+
+exports.testStyledSystemBackground = testStyledSystemBackground;
+
+const testStyledSystemPosition = (component, styleContainer) => {
+  describe.each(positionProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, value) => {
+    it(`then ${styledSystemProp} should have been set correctly`, () => {
+      const props = {
+        [styledSystemProp]: value
+      };
+      const wrapper = (0, _enzyme.mount)(component({ ...props
+      }));
+      assertStyleMatch({
+        [styledSystemProp]: value
+      }, styleContainer ? styleContainer(wrapper) : wrapper);
+    });
+  });
 }; // this util will catch that a console output occurred without polluting the output when running the unit tests
 
 
-exports.testStyledSystemBackground = testStyledSystemBackground;
+exports.testStyledSystemPosition = testStyledSystemPosition;
 
 const expectConsoleOutput = (message, type = "error") => {
   if (!message) {

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { SpaceProps, LayoutProps, FlexboxProps, ColorProps } from "styled-system";
+import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
-export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps {
+export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
     overflowWrap?: OverflowWrap;
@@ -11,6 +11,8 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     scrollVariant?: ScrollVariant;
     /** set the box-sizing attribute of the Box component */
     boxSizing?: BoxSizing;
+    /** Allows a tabindex to be specified */
+    tabIndex?: number | string;
 }
 declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;

package/lib/components/box/box.component.js

@@ -25,6 +25,7 @@ const Box = _styledComponents.default.div`
   ${_styledSystem.space}
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
+  ${_styledSystem.position}
   ${({
   color,
   bg,