carbon-react 110.2.0 → 110.2.3

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__/checkable-input/checkable-input-svg-wrapper.style.d.ts

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

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { CommonHiddenCheckableInputProps } from "./hidden-checkable-input.component";
+import { ValidationProps } from "../validations";
+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;
+    /** Label content */
+    label?: React.ReactNode;
+    /** The content for the help tooltip, to appear next to the Label */
+    labelHelp?: 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;
+    /** When true, displays validation icon on label */
+    validationOnLabel?: boolean;
+}
+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 const CheckableInput: ({ ariaLabelledBy: externalAriaLabelledBy, autoFocus, checked, children, disabled, error, fieldHelp, fieldHelpInline, info, id: inputId, inputRef, type, value, inputWidth, label, labelAlign, labelHelp, labelInline, labelSpacing, labelWidth, name, onBlur, onChange, onFocus, required, reverse, validationOnLabel, warning, ...props }: CheckableInputProps) => JSX.Element;
+export default CheckableInput;