carbon-react 111.12.4 → 111.12.6

package/esm/components/textarea/textarea.style.d.ts

@@ -1,3 +1,9 @@
-export const MIN_HEIGHT: 64;
+export declare const MIN_HEIGHT = 64;
+export interface StyledTextAreaProps {
+    /** When true, label is placed in line an input */
+    labelInline?: boolean;
+    /** When true, adjusts padding for icon */
+    hasIcon?: boolean;
+}
+declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, StyledTextAreaProps, never>;
 export default StyledTextarea;
-declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/textbox/textbox.component.js

@@ -16,6 +16,7 @@ import { ErrorBorder, StyledHintText } from "./textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import NumeralDateContext from "../numeral-date/numeral-date-context";
+import Box from "../box";
 
 const Textbox = ({
   align = "left",
@@ -99,38 +100,7 @@ const Textbox = ({
   });
   const labelId = label ? externalLabelId || internalLabelId : "";
   const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
-    helpAriaLabel: helpAriaLabel,
-    tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
-    disabled: disabled,
-    fieldHelpId: fieldHelpId,
-    fieldHelp: computeLabelPropValues(fieldHelp),
-    error: error,
-    warning: warning,
-    info: info,
-    label: label,
-    labelId: labelId,
-    labelAlign: computeLabelPropValues(labelAlign),
-    labelHelp: computeLabelPropValues(labelHelp),
-    labelInline: computeLabelPropValues(labelInline),
-    labelSpacing: labelSpacing,
-    labelWidth: computeLabelPropValues(labelWidth),
-    id: uniqueId,
-    reverse: computeLabelPropValues(reverse),
-    isOptional: isOptional,
-    useValidationIcon: computeLabelPropValues(validationOnLabel),
-    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    isRequired: required,
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
-    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
-    validationRedesignOptIn: validationRedesignOptIn
-  }, filterStyledSystemMarginProps(props)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationMessage, {
-    error: error,
-    warning: warning
-  }), /*#__PURE__*/React.createElement(InputPresentation, {
+  const input = /*#__PURE__*/React.createElement(InputPresentation, {
     align: align,
     disabled: disabled,
     readOnly: readOnly,
@@ -143,9 +113,7 @@ const Textbox = ({
     hasIcon: hasIconInside
   }, leftChildren, prefix && /*#__PURE__*/React.createElement(StyledPrefix, {
     "data-element": "textbox-prefix"
-  }, prefix), validationRedesignOptIn && !disableErrorBorder && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
-    warning: !!(!error && warning)
-  }), /*#__PURE__*/React.createElement(Input, _extends({}, required && {
+  }, prefix), /*#__PURE__*/React.createElement(Input, _extends({}, required && {
     required
   }, {
     align: align,
@@ -182,7 +150,43 @@ const Textbox = ({
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel),
     warning: warning,
     validationIconId: validationRedesignOptIn ? undefined : validationIconId
-  }))), characterCount));
+  }));
+  return /*#__PURE__*/React.createElement(TooltipProvider, {
+    helpAriaLabel: helpAriaLabel,
+    tooltipPosition: tooltipPosition
+  }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
+    disabled: disabled,
+    fieldHelpId: fieldHelpId,
+    fieldHelp: computeLabelPropValues(fieldHelp),
+    error: error,
+    warning: warning,
+    info: info,
+    label: label,
+    labelId: labelId,
+    labelAlign: computeLabelPropValues(labelAlign),
+    labelHelp: computeLabelPropValues(labelHelp),
+    labelInline: computeLabelPropValues(labelInline),
+    labelSpacing: labelSpacing,
+    labelWidth: computeLabelPropValues(labelWidth),
+    id: uniqueId,
+    reverse: computeLabelPropValues(reverse),
+    isOptional: isOptional,
+    useValidationIcon: computeLabelPropValues(validationOnLabel),
+    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
+    isRequired: required,
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement,
+    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    validationRedesignOptIn: validationRedesignOptIn
+  }, filterStyledSystemMarginProps(props)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    warning: warning
+  }), !disableErrorBorder && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning)
+  }), input) : input), characterCount));
 };
 
 Textbox.propTypes = {
@@ -240,6 +244,7 @@ Textbox.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
   "autoCorrect": PropTypes.string,

package/esm/components/textbox/textbox.style.js

@@ -6,10 +6,10 @@ const ErrorBorder = styled.span`
       position: absolute;
       z-index: 6;
       width: 2px;
-      height: calc(100% + var(--spacing300));
       background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
       left: -12px;
       bottom: 0px;
+      top: 0px;
     `}
 `;
 const StyledHintText = styled.p`

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

@@ -1,6 +1,8 @@
 import React from "react";
 export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     align?: "right" | "left";
+    /** Override the variant component */
+    as?: React.ElementType;
     /** If true the Component will be focused when rendered */
     autoFocus?: boolean;
     /** If true, the component will be disabled */
@@ -29,10 +31,14 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     required?: boolean;
 }
 export interface InputProps extends CommonInputProps {
+    /** The visible width of the text control, in average character widths */
+    cols?: number;
     /** Integer to determine a timeout for the defered callback */
     deferTimeout?: number;
     /** Defered callback to be called after the onChange event */
     onChangeDeferred?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The number of visible text lines for the control */
+    rows?: number;
     /** HTML type attribute of the input */
     type?: string;
 }

package/lib/__internal__/input/input.component.js

@@ -225,6 +225,7 @@ Input.propTypes = {
   "aria-valuemin": _propTypes.default.number,
   "aria-valuenow": _propTypes.default.number,
   "aria-valuetext": _propTypes.default.string,
+  "as": _propTypes.default.elementType,
   "autoCapitalize": _propTypes.default.string,
   "autoComplete": _propTypes.default.string,
   "autoCorrect": _propTypes.default.string,
@@ -235,6 +236,7 @@ Input.propTypes = {
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
   "color": _propTypes.default.string,
+  "cols": _propTypes.default.number,
   "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "true"]), _propTypes.default.bool]),
   "contextMenu": _propTypes.default.string,
   "crossOrigin": _propTypes.default.string,
@@ -499,6 +501,7 @@ Input.propTypes = {
     "trimStart": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   })]),
+  "rows": _propTypes.default.number,
   "security": _propTypes.default.string,
   "size": _propTypes.default.number,
   "slot": _propTypes.default.string,

package/lib/__internal__/radio-button-mapper/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./radio-button-mapper";
-export * from "./radio-button-mapper";
+export { default } from "./radio-button-mapper.component";
+export type { RadioButtonMapperProps, MappedChildProps, } from "./radio-button-mapper.component";

package/lib/__internal__/radio-button-mapper/radio-button-mapper.component.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+interface InputEvents {
+    /** Callback fired when each RadioButton is blurred */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback fired when the user selects a RadioButton */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Callback fired on mouse down */
+    onMouseDown?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /** Callback fired on key down */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export interface RadioButtonMapperProps extends InputEvents {
+    /** The RadioButton objects to be rendered in the group */
+    children?: React.ReactNode;
+    /** Specifies the name prop to be applied to each button in the group */
+    name: string;
+    /** Value of the selected RadioButton */
+    value?: string;
+}
+export interface MappedChildProps {
+    defaultChecked?: boolean;
+    checked: boolean;
+    name: string;
+}
+declare const RadioButtonMapper: {
+    ({ children, name, onBlur, onChange, onMouseDown, onKeyDown, value, }: RadioButtonMapperProps): JSX.Element;
+    displayName: string;
+};
+export default RadioButtonMapper;

package/lib/__internal__/radio-button-mapper/radio-button-mapper.component.js

@@ -28,7 +28,7 @@ const RadioButtonMapper = ({
   const anyChecked = (0, _react.useMemo)(() => {
     let result = false;
     filteredChildren.forEach(child => {
-      if (Object.prototype.hasOwnProperty.call(child.props, "defaultChecked")) {
+      if ( /*#__PURE__*/_react.default.isValidElement(child) && Object.prototype.hasOwnProperty.call(child.props, "defaultChecked")) {
         result = true;
       }
     });
@@ -36,18 +36,21 @@ const RadioButtonMapper = ({
   }, [filteredChildren]);
   const isControlled = value !== undefined;
   const [checkedValue, setCheckedValue] = (0, _react.useState)(false);
-  const onChangeProp = (0, _react.useCallback)(e => {
-    if (onChange) {
-      onChange(e);
-    }
+  const onChangeProp = (0, _react.useCallback)(event => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    /* istanbul ignore else */
 
     if (!isControlled) {
-      setCheckedValue(e.target.value);
+      setCheckedValue(event.target.value);
     }
   }, [onChange, setCheckedValue, isControlled]);
   const buttons = filteredChildren.map(child => {
     let checked;
 
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    }
+
     if (isControlled) {
       // The user is controlling the input via the value prop
       checked = value === child.props.value;
@@ -59,7 +62,7 @@ const RadioButtonMapper = ({
       checked = checkedValue === child.props.value;
     }
 
-    return /*#__PURE__*/_react.default.cloneElement(child, {
+    const childProps = {
       defaultChecked: undefined,
       checked,
       name,
@@ -67,29 +70,20 @@ const RadioButtonMapper = ({
       onMouseDown,
       onChange: onChangeProp,
       onKeyDown
-    });
+    };
+    return /*#__PURE__*/_react.default.cloneElement(child, childProps);
   });
-  return buttons;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttons);
 };
 
 RadioButtonMapper.propTypes = {
-  /** The RadioButton objects to be rendered in the group */
-  children: _propTypes.default.node,
-
-  /** Specifies the name prop to be applied to each button in the group */
-  name: _propTypes.default.string.isRequired,
-
-  /** Callback fired when each RadioButton is blurred */
-  onBlur: _propTypes.default.func,
-
-  /** Callback fired when the user selects a RadioButton */
-  onChange: _propTypes.default.func,
-
-  /** Callback fired on key down */
-  onKeyDown: _propTypes.default.func,
-
-  /** Value of the selected RadioButton */
-  value: _propTypes.default.string
+  "children": _propTypes.default.node,
+  "name": _propTypes.default.string.isRequired,
+  "onBlur": _propTypes.default.func,
+  "onChange": _propTypes.default.func,
+  "onKeyDown": _propTypes.default.func,
+  "onMouseDown": _propTypes.default.func,
+  "value": _propTypes.default.string
 };
 RadioButtonMapper.displayName = "RadioButtonMapper";
 var _default = RadioButtonMapper;

package/lib/components/checkbox/checkbox.style.d.ts

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../__internal__/validations";
-interface StyledCheckboxProps extends ValidationProps, MarginProps {
+export interface StyledCheckboxProps extends ValidationProps, MarginProps {
     disabled?: boolean;
     fieldHelpInline?: boolean;
     inputWidth?: number | string;

package/lib/components/date/date.component.js

@@ -315,7 +315,9 @@ const DateInput = ({
     "data-component": dataComponent || "date",
     "data-element": dataElement,
     "data-role": dataRole
-  }, (0, _utils2.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, (0, _utils2.filterOutStyledSystemSpacingProps)(rest), {
+  }, (0, _utils2.filterStyledSystemMarginProps)(rest), {
+    applyDateRangeStyling: !!inputRefMap
+  }), /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, (0, _utils2.filterOutStyledSystemSpacingProps)(rest), {
     value: computedValue(),
     onBlur: handleBlur,
     onChange: handleChange,

package/lib/components/date/date.style.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,8 +17,18 @@ var _input = _interopRequireDefault(require("../../__internal__/input/input.styl
 
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
 
+var _formField = require("../../__internal__/form-field/form-field.style");
+
+var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.style"));
+
+var _label = _interopRequireDefault(require("../../__internal__/label/label.style"));
+
 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; }
+
 const datePickerWidth = {
   large: "140px",
   medium: "135px",
@@ -37,6 +47,20 @@ const StyledDateInput = _styledComponents.default.div`
       margin-right: -8px;
     }
   }
+
+  ${({
+  applyDateRangeStyling,
+  size,
+  labelInline
+}) => applyDateRangeStyling && !labelInline && (0, _styledComponents.css)`
+      ${_formField.FieldLineStyle} {
+        max-width: ${datePickerWidth[size]};
+      }
+
+      ${_validationMessage.default}, ${_label.default} {
+        overflow-wrap: anywhere;
+      }
+    `}
 `;
 StyledDateInput.propTypes = {
   size: _propTypes.default.oneOf(["small", "medium", "large"])

package/lib/components/decimal/decimal.component.js

@@ -278,6 +278,7 @@ Decimal.propTypes = {
   "aria-valuemin": _propTypes.default.number,
   "aria-valuenow": _propTypes.default.number,
   "aria-valuetext": _propTypes.default.string,
+  "as": _propTypes.default.elementType,
   "autoCapitalize": _propTypes.default.string,
   "autoComplete": _propTypes.default.string,
   "autoCorrect": _propTypes.default.string,

package/lib/components/grouped-character/grouped-character.component.js

@@ -191,6 +191,7 @@ GroupedCharacter.propTypes = {
   "aria-valuemin": _propTypes.default.number,
   "aria-valuenow": _propTypes.default.number,
   "aria-valuetext": _propTypes.default.string,
+  "as": _propTypes.default.elementType,
   "autoCapitalize": _propTypes.default.string,
   "autoComplete": _propTypes.default.string,
   "autoCorrect": _propTypes.default.string,

package/lib/components/radio-button/index.d.ts

@@ -1,6 +1,4 @@
-export {
-  default,
-  default as RadioButton,
-  PrivateRadioButton,
-} from "./radio-button";
-export { default as RadioButtonGroup } from "./radio-button-group";
+import RadioButton from "./radio-button.component";
+import RadioButtonGroup from "./radio-button-group.component";
+export { RadioButton, RadioButtonGroup };
+export default RadioButton;

package/lib/components/radio-button/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "RadioButton", {
     return _radioButton.default;
   }
 });
-Object.defineProperty(exports, "PrivateRadioButton", {
-  enumerable: true,
-  get: function () {
-    return _radioButton.PrivateRadioButton;
-  }
-});
 Object.defineProperty(exports, "RadioButtonGroup", {
   enumerable: true,
   get: function () {
@@ -23,15 +17,11 @@ Object.defineProperty(exports, "RadioButtonGroup", {
 });
 exports.default = void 0;
 
-var _radioButton = _interopRequireWildcard(require("./radio-button.component"));
+var _radioButton = _interopRequireDefault(require("./radio-button.component"));
 
 var _radioButtonGroup = _interopRequireDefault(require("./radio-button-group.component"));
 
 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; }
-
 var _default = _radioButton.default;
 exports.default = _default;

package/lib/components/radio-button/radio-button-group.component.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
+    /** Breakpoint for adaptive legend (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLegendBreakpoint?: number;
+    /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
+    adaptiveSpacingBreakpoint?: number;
+    /** The RadioButton objects to be rendered in the group */
+    children: React.ReactNode;
+    /** When true, RadioButtons are in line */
+    inline?: boolean;
+    /** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** The content for the RadioGroup Legend */
+    legend?: string;
+    /** Text alignment of legend when inline */
+    legendAlign?: "left" | "right";
+    /** When true, legend is placed in line with the radiobuttons */
+    legendInline?: boolean;
+    /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
+    legendSpacing?: 1 | 2;
+    /** Percentage width of legend (only when legend is inline)  */
+    legendWidth?: number;
+    /** Specifies the name prop to be applied to each button in the group */
+    name: string;
+    /** Callback fired when each RadioButton is blurred */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback fired when the user selects a RadioButton */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** value of the selected RadioButton */
+    value?: string;
+    /** Overrides the default tooltip position */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+}
+export declare const RadioButtonGroup: {
+    (props: RadioButtonGroupProps): JSX.Element;
+    displayName: string;
+};
+export default RadioButtonGroup;