carbon-react 115.0.1 → 116.0.0

package/lib/components/tile-select/tile-select-group.component.js

@@ -3,21 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TileSelectGroup = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-var _tileSelect = _interopRequireDefault(require("./tile-select.component"));
-
 var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper/radio-button-mapper.component"));
 
-var _tileSelect2 = require("./tile-select.style");
+var _tileSelect = require("./tile-select.style");
 
 var _utils = require("../../style/utils");
 
@@ -25,20 +21,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-
-const TileSelectGroup = props => {
-  const {
-    children,
-    name,
-    legend,
-    description,
-    onChange,
-    onBlur,
-    value,
-    multiSelect,
-    ...rest
-  } = props;
+const TileSelectGroup = ({
+  children,
+  name,
+  legend,
+  description,
+  onChange,
+  onBlur,
+  value,
+  multiSelect = false,
+  ...rest
+}) => {
   let tiles;
 
   if (multiSelect) {
@@ -49,63 +42,190 @@ const TileSelectGroup = props => {
       onBlur: onBlur,
       onChange: onChange,
       value: value
-    }, _react.default.Children.map(children, child => /*#__PURE__*/_react.default.cloneElement(child, {
-      type: "radio"
-    })));
+    }, _react.default.Children.map(children, child => {
+      if ( /*#__PURE__*/_react.default.isValidElement(child)) {
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          type: "radio"
+        });
+      }
+
+      return child;
+    }));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_tileSelect2.StyledTileSelectFieldset, _extends({
+  return /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTileSelectFieldset, _extends({
     legend: legend
   }, (0, _tags.default)("tile-select-group", rest), {
     multiSelect: multiSelect
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), description ? /*#__PURE__*/_react.default.createElement(_tileSelect2.StyledGroupDescription, {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), description ? /*#__PURE__*/_react.default.createElement(_tileSelect.StyledGroupDescription, {
     "data-element": "tile-select-group-description"
   }, description) : null, /*#__PURE__*/_react.default.createElement("div", null, tiles));
 };
 
-TileSelectGroup.propTypes = { ...marginPropTypes,
-
-  /** The TileSelect components to be rendered in the group */
-  children: (props, propName, componentName) => {
-    let error;
-    const prop = props[propName];
-
-    _react.default.Children.forEach(prop, child => {
-      if (_tileSelect.default.displayName !== child.type.displayName) {
-        error = new Error(`\`${componentName}\` only accepts children of type \`${_tileSelect.default.displayName}\`.`);
-      }
-    });
-
-    return error;
-  },
-
-  /** The content for the TileSelectGroup Legend */
-  legend: _propTypes.default.string,
-
-  /** Description to be rendered below the legend */
-  description: _propTypes.default.string,
-
-  /** The currently selected value - only for single select mode. */
-  value: _propTypes.default.string,
-
-  /** The name to apply to the input - only for single select mode. */
-  name: _propTypes.default.string,
-
-  /** A callback triggered when one of tiles is selected - only for single select mode. */
-  onChange: _propTypes.default.func,
-
-  /** A callback triggered when one of tiles is blurred - only for single select mode. */
-  onBlur: _propTypes.default.func,
-
-  /** When passed as true TileSelectGroup serves only visual purpose */
-
-  /** It wraps TileSelects in fieldset element and renders the legend and description props content */
-
-  /** onChange, onBlur, value, checked and name props are meant to be passed individually on each of the TileSelects */
-  multiSelect: _propTypes.default.bool
-};
-TileSelectGroup.defaultProps = {
-  multiSelect: false
+exports.TileSelectGroup = TileSelectGroup;
+TileSelectGroup.propTypes = {
+  "children": _propTypes.default.node,
+  "description": _propTypes.default.string,
+  "legend": _propTypes.default.string,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "multiSelect": _propTypes.default.bool,
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "name": _propTypes.default.string.isRequired,
+  "onBlur": _propTypes.default.func,
+  "onChange": _propTypes.default.func,
+  "value": _propTypes.default.string
 };
 var _default = TileSelectGroup;
 exports.default = _default;

package/lib/components/tile-select/tile-select.component.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export interface TileSelectDeselectEvent {
+    target: {
+        name?: string;
+        id?: string;
+        value: null;
+        checked: false;
+    };
+}
+export interface TileSelectProps extends MarginProps {
+    /** title of the TileSelect */
+    title?: React.ReactNode;
+    /** adornment to be rendered next to the title */
+    titleAdornment?: React.ReactNode;
+    /** subtitle of the TileSelect */
+    subtitle?: React.ReactNode;
+    /** description of the TileSelect */
+    description?: React.ReactNode;
+    /** disables the TileSelect input */
+    disabled?: boolean;
+    /** the value that is represented by this TileSelect */
+    value?: string;
+    /** input id */
+    id?: string;
+    /** input name */
+    name?: string;
+    /** Callback triggered when user selects or deselects this tile */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent) => void;
+    /** Callback triggered when the user blurs this tile */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback triggered when the user focus this tile */
+    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** determines if this tile is selected or unselected */
+    checked?: boolean;
+    /** Custom class name passed to the root element of TileSelect */
+    className?: string;
+    /** Type of the TileSelect input */
+    type?: "radio" | "checkbox";
+    /** Render prop that allows overriding the default action button. */
+    customActionButton?: (onClick: () => void) => JSX.Element;
+    /** An additional help info icon rendered next to the action button */
+    actionButtonAdornment?: React.ReactNode;
+    /** footer of the TileSelect */
+    footer?: React.ReactNode;
+    /** Component to render in the top left corner of TileSelect */
+    prefixAdornment?: React.ReactNode;
+    /** Component to render additional information row between title and description */
+    additionalInformation?: React.ReactNode;
+    /** Components to render in the TileSelect Accordion */
+    accordionContent?: React.ReactNode;
+    /** Callback to toggle expanded state of TileSelect Accordion */
+    accordionControl?: (controlId: string, contentId: string) => JSX.Element;
+    /** Flag to control the open state of TileSelect Accordion */
+    accordionExpanded?: boolean;
+}
+declare const TileSelect: React.ForwardRefExoticComponent<TileSelectProps & React.RefAttributes<HTMLInputElement>>;
+export default TileSelect;