carbon-react 87.5.0 → 89.2.0

package/lib/components/pod/pod.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,416 +19,217 @@ var _tags = _interopRequireDefault(require("../../utils/helpers/tags/tags"));
 
 var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
 
-var _podContext = _interopRequireDefault(require("./pod-context"));
-
 var _podStyle = require("./pod.style.js");
 
 var _icon = _interopRequireDefault(require("../icon"));
 
 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); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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; }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+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); }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
+const Pod = /*#__PURE__*/(0, _react.forwardRef)(({
+  alignTitle = "left",
+  border = true,
+  children,
+  className,
+  displayEditButtonOnHover,
+  editContentFullWidth,
+  footer,
+  height,
+  internalEditButton,
+  onDelete,
+  onEdit,
+  onUndo,
+  size = "medium",
+  softDelete,
+  subtitle,
+  title,
+  triggerEditOnContent,
+  variant = "primary",
+  ...rest
+}, ref) => {
+  const [isEditFocused, setEditFocused] = (0, _react.useState)(false);
+  const [isEditHovered, setEditHovered] = (0, _react.useState)(false);
+  const [isDeleteFocused, setDeleteFocused] = (0, _react.useState)(false);
+  const [isDeleteHovered, setDeleteHovered] = (0, _react.useState)(false);
+  const [isUndoFocused, setUndoFocused] = (0, _react.useState)(false);
+  const [isUndoHovered, setUndoHovered] = (0, _react.useState)(false);
+  let podHeight;
+
+  if (height && typeof height === "number") {
+    podHeight = `${height}px`;
+  } else if (height) {
+    podHeight = height;
+  }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+  const shouldContentHaveEditEvents = (0, _react.useCallback)(() => {
+    return (triggerEditOnContent || displayEditButtonOnHover) && onEdit;
+  }, [displayEditButtonOnHover, onEdit, triggerEditOnContent]);
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+  const processPodAction = action => ev => {
+    if (_events.default.isEnterKey(ev) || !_events.default.isEventType(ev, "keydown")) {
+      ev.preventDefault();
+      action(ev);
+    }
+  };
+
+  function editEvents() {
+    const editProps = {
+      onMouseEnter: () => setEditHovered(true),
+      onMouseLeave: () => setEditHovered(false),
+      onFocus: () => setEditFocused(true),
+      onBlur: () => setEditFocused(false)
+    };
+
+    if (typeof onEdit === "function") {
+      editProps.onClick = processPodAction(onEdit);
+      editProps.onKeyDown = processPodAction(onEdit);
+    }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+    return editProps;
+  }
 
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+  function podHeader() {
+    if (!title) {
+      return null;
+    }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+    return /*#__PURE__*/_react.default.createElement(_podStyle.StyledHeader, {
+      alignTitle: alignTitle,
+      internalEditButton: internalEditButton,
+      size: size
+    }, /*#__PURE__*/_react.default.createElement(_podStyle.StyledTitle, {
+      "data-element": "title"
+    }, title), subtitle && /*#__PURE__*/_react.default.createElement(_podStyle.StyledSubtitle, {
+      "data-element": "subtitle"
+    }, subtitle));
+  }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function renderFooter() {
+    if (!footer) {
+      return null;
+    }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+    return /*#__PURE__*/_react.default.createElement(_podStyle.StyledFooter, {
+      "data-element": "footer",
+      size: size,
+      variant: variant,
+      softDelete: softDelete
+    }, footer);
+  }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+  function actionButtons() {
+    if (softDelete && onUndo) {
+      return /*#__PURE__*/_react.default.createElement(_podStyle.StyledActionsContainer, {
+        internalEditButton: internalEditButton
+      }, undo());
+    }
 
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
+    if (!softDelete && (onDelete || onEdit)) {
+      return /*#__PURE__*/_react.default.createElement(_podStyle.StyledActionsContainer, {
+        internalEditButton: internalEditButton
+      }, onEdit && edit(), onDelete && renderDelete());
+    }
 
-let Pod = /*#__PURE__*/function (_React$Component) {
-  _inherits(Pod, _React$Component);
-
-  var _super = _createSuper(Pod);
-
-  function Pod(...args) {
-    var _this;
-
-    _classCallCheck(this, Pod);
-
-    _this = _super.call(this, ...args);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      isEditHovered: false,
-      isEditFocused: false,
-      isDeleteHovered: false,
-      isDeleteFocused: false,
-      isUndoHovered: false,
-      isUndoFocused: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleEditMouseEnter", () => {
-      _this.setState({
-        isEditHovered: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleEditMouseLeave", () => {
-      _this.setState({
-        isEditHovered: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleEditFocus", () => {
-      _this.setState({
-        isEditFocused: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleEditBlur", () => {
-      _this.setState({
-        isEditFocused: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDeleteMouseEnter", () => {
-      _this.setState({
-        isDeleteHovered: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDeleteMouseLeave", () => {
-      _this.setState({
-        isDeleteHovered: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDeleteFocus", () => {
-      _this.setState({
-        isDeleteFocused: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDeleteBlur", () => {
-      _this.setState({
-        isDeleteFocused: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleUndoMouseEnter", () => {
-      _this.setState({
-        isUndoHovered: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleUndoMouseLeave", () => {
-      _this.setState({
-        isUndoHovered: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleUndoFocus", () => {
-      _this.setState({
-        isUndoFocused: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleUndoBlur", () => {
-      _this.setState({
-        isUndoFocused: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "linkProps", () => {
-      const {
-        onEdit
-      } = _this.props;
-      let props = {};
-
-      if (typeof onEdit === "string") {
-        props.to = onEdit;
-      } else if (typeof onEdit === "object") {
-        props = onEdit;
-      }
-
-      return props;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "processPodAction", action => ev => {
-      if (_events.default.isEnterKey(ev) || !_events.default.isEventType(ev, "keydown")) {
-        ev.preventDefault();
-        action(ev);
-      }
-    });
-
-    return _this;
+    return null;
   }
 
-  _createClass(Pod, [{
-    key: "podHeader",
-    value: function podHeader() {
-      const {
-        title,
-        alignTitle,
-        internalEditButton,
-        size,
-        subtitle
-      } = this.props;
-
-      if (!title) {
-        return null;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_podStyle.StyledHeader, {
-        alignTitle: alignTitle,
-        internalEditButton: internalEditButton,
-        size: size
-      }, /*#__PURE__*/_react.default.createElement(_podStyle.StyledTitle, {
-        "data-element": "title"
-      }, title), subtitle && /*#__PURE__*/_react.default.createElement(_podStyle.StyledSubtitle, {
-        "data-element": "subtitle"
-      }, subtitle));
-    }
-  }, {
-    key: "footer",
-    value: function footer() {
-      const {
-        footer,
-        size,
-        variant,
-        softDelete
-      } = this.props;
-
-      if (!footer) {
-        return null;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_podStyle.StyledFooter, {
-        "data-element": "footer",
-        size: size,
-        variant: variant,
-        softDelete: softDelete
-      }, footer);
-    }
-  }, {
-    key: "actionButtons",
-    value: function actionButtons() {
-      const {
-        onDelete,
-        onEdit,
-        onUndo,
-        softDelete,
-        internalEditButton
-      } = this.props;
-
-      if (softDelete && onUndo) {
-        return /*#__PURE__*/_react.default.createElement(_podStyle.StyledActionsContainer, {
-          internalEditButton: internalEditButton
-        }, this.undo());
-      }
-
-      if (!softDelete && (onDelete || onEdit)) {
-        return /*#__PURE__*/_react.default.createElement(_podStyle.StyledActionsContainer, {
-          internalEditButton: internalEditButton
-        }, onEdit && this.edit(), onDelete && this.delete());
-      }
+  function renderDelete() {
+    return /*#__PURE__*/_react.default.createElement(_podStyle.StyledDeleteButton, {
+      onMouseEnter: () => setDeleteHovered(true),
+      onMouseLeave: () => setDeleteHovered(false),
+      onFocus: () => setDeleteFocused(true),
+      onBlur: () => setDeleteFocused(false),
+      "data-element": "delete",
+      internalEditButton: internalEditButton,
+      displayOnlyOnHover: displayEditButtonOnHover,
+      isFocused: isDeleteFocused,
+      isHovered: isDeleteHovered,
+      noBorder: !border,
+      size: size,
+      variant: variant,
+      onKeyDown: processPodAction(onDelete),
+      onAction: processPodAction(onDelete)
+    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+      type: "delete"
+    }));
+  }
 
-      return null;
-    }
-  }, {
-    key: "delete",
-    value: function _delete() {
-      const {
-        onDelete,
-        internalEditButton,
-        variant,
-        size,
-        border,
-        displayEditButtonOnHover
-      } = this.props;
-      const {
-        isDeleteFocused,
-        isDeleteHovered
-      } = this.state;
-      return /*#__PURE__*/_react.default.createElement(_podStyle.StyledDeleteButton, {
-        onMouseEnter: this.handleDeleteMouseEnter,
-        onMouseLeave: this.handleDeleteMouseLeave,
-        onFocus: this.handleDeleteFocus,
-        onBlur: this.handleDeleteBlur,
-        "data-element": "delete",
-        internalEditButton: internalEditButton,
-        displayOnlyOnHover: displayEditButtonOnHover,
-        isFocused: isDeleteFocused,
-        isHovered: isDeleteHovered,
-        noBorder: !border,
-        size: size,
-        variant: variant,
-        onKeyDown: this.processPodAction(onDelete),
-        onAction: this.processPodAction(onDelete)
-      }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-        type: "delete"
-      }));
-    }
-  }, {
-    key: "edit",
-    value: function edit() {
-      const {
-        internalEditButton,
-        variant,
-        size,
-        border,
-        displayEditButtonOnHover,
-        triggerEditOnContent
-      } = this.props;
-      const {
-        isEditFocused,
-        isEditHovered
-      } = this.state;
-      return /*#__PURE__*/_react.default.createElement(_i18nContext.default.Consumer, null, l => /*#__PURE__*/_react.default.createElement("div", _extends({}, this.editEvents(), {
-        "data-element": "edit-container"
-      }), /*#__PURE__*/_react.default.createElement(_podStyle.StyledEditAction, _extends({
-        contentTriggersEdit: triggerEditOnContent,
-        "data-element": "edit",
-        displayOnlyOnHover: displayEditButtonOnHover,
-        icon: "edit",
-        internalEditButton: internalEditButton,
-        isFocused: isEditFocused,
-        isHovered: isEditHovered,
-        noBorder: !border,
-        size: size,
-        variant: variant
-      }, this.linkProps()), l.actions.edit())));
-    }
-  }, {
-    key: "undo",
-    value: function undo() {
-      const {
-        onUndo,
-        internalEditButton,
-        variant,
-        size,
-        border
-      } = this.props;
-      const {
-        isUndoFocused,
-        isUndoHovered
-      } = this.state;
-      return /*#__PURE__*/_react.default.createElement(_podStyle.StyledUndoButton, {
-        onMouseEnter: this.handleUndoMouseEnter,
-        onMouseLeave: this.handleUndoMouseLeave,
-        onFocus: this.handleUndoFocus,
-        onBlur: this.handleUndoBlur,
-        "data-element": "undo",
-        internalEditButton: internalEditButton,
-        isFocused: isUndoFocused,
-        isHovered: isUndoHovered,
-        noBorder: !border,
-        size: size,
-        variant: variant,
-        onKeyDown: this.processPodAction(onUndo),
-        onAction: this.processPodAction(onUndo)
-      }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-        type: "undo"
-      }));
-    }
-  }, {
-    key: "editEvents",
-    value: function editEvents() {
-      const props = {
-        onMouseEnter: this.handleEditMouseEnter,
-        onMouseLeave: this.handleEditMouseLeave,
-        onFocus: this.handleEditFocus,
-        onBlur: this.handleEditBlur
-      };
+  function edit() {
+    return /*#__PURE__*/_react.default.createElement(_i18nContext.default.Consumer, null, l => /*#__PURE__*/_react.default.createElement("div", _extends({}, editEvents(), {
+      "data-element": "edit-container"
+    }), /*#__PURE__*/_react.default.createElement(_podStyle.StyledEditAction, _extends({
+      contentTriggersEdit: triggerEditOnContent,
+      "data-element": "edit",
+      displayOnlyOnHover: displayEditButtonOnHover,
+      icon: "edit",
+      internalEditButton: internalEditButton,
+      isFocused: isEditFocused,
+      isHovered: isEditHovered,
+      noBorder: !border,
+      size: size,
+      variant: variant
+    }, linkProps()), l.actions.edit())));
+  }
 
-      if (typeof this.props.onEdit === "function") {
-        props.onClick = this.processPodAction(this.props.onEdit);
-        props.onKeyDown = this.processPodAction(this.props.onEdit);
-      }
+  function undo() {
+    return /*#__PURE__*/_react.default.createElement(_podStyle.StyledUndoButton, {
+      onMouseEnter: () => setUndoHovered(true),
+      onMouseLeave: () => setUndoHovered(false),
+      onFocus: () => setUndoFocused(true),
+      onBlur: () => setUndoFocused(false),
+      "data-element": "undo-container",
+      internalEditButton: internalEditButton,
+      isFocused: isUndoFocused,
+      isHovered: isUndoHovered,
+      noBorder: !border,
+      size: size,
+      variant: variant,
+      onKeyDown: processPodAction(onUndo),
+      onAction: processPodAction(onUndo)
+    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+      type: "undo"
+    }));
+  }
 
-      return props;
-    }
-  }, {
-    key: "shouldContentHaveEditEvents",
-    value: function shouldContentHaveEditEvents() {
-      const {
-        triggerEditOnContent,
-        displayEditButtonOnHover,
-        onEdit
-      } = this.props;
-      return (triggerEditOnContent || displayEditButtonOnHover) && onEdit;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      const {
-        variant,
-        border,
-        editContentFullWidth,
-        internalEditButton,
-        onEdit,
-        onUndo,
-        onDelete,
-        softDelete,
-        size,
-        title,
-        height,
-        ...rest
-      } = this.props;
-      const {
-        isEditFocused,
-        isEditHovered,
-        isDeleteFocused,
-        isDeleteHovered
-      } = this.state;
-      let podHeight;
-
-      if (this.context.heightOfTheLongestPod) {
-        podHeight = `${this.context.heightOfTheLongestPod}px`;
-      }
-
-      if (height && typeof height === "number") {
-        podHeight = `${height}px`;
-      } else if (height) {
-        podHeight = height;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_podStyle.StyledPod, _extends({}, rest, {
-        className: this.props.className,
-        internalEditButton: internalEditButton
-      }, (0, _tags.default)("pod", this.props), {
-        height: podHeight
-      }), /*#__PURE__*/_react.default.createElement(_podStyle.StyledBlock, _extends({
-        contentTriggersEdit: this.shouldContentHaveEditEvents(),
-        hasButtons: onEdit || onDelete || onUndo,
-        fullWidth: editContentFullWidth,
-        internalEditButton: internalEditButton,
-        isFocused: isEditFocused || isDeleteFocused,
-        isHovered: isEditHovered || isDeleteHovered,
-        noBorder: !border,
-        variant: variant,
-        softDelete: softDelete
-      }, this.shouldContentHaveEditEvents() ? { ...this.editEvents(),
-        tabIndex: "0"
-      } : {}), /*#__PURE__*/_react.default.createElement(_podStyle.StyledContent, {
-        "data-element": "content",
-        size: size
-      }, this.podHeader(), /*#__PURE__*/_react.default.createElement("div", null, this.props.children)), this.footer()), this.actionButtons());
+  function linkProps() {
+    if (typeof onEdit === "string") {
+      return {
+        to: onEdit
+      };
     }
-  }]);
 
-  return Pod;
-}(_react.default.Component);
-
-_defineProperty(Pod, "contextType", _podContext.default);
+    return onEdit;
+  }
 
+  return /*#__PURE__*/_react.default.createElement(_podStyle.StyledPod, _extends({}, rest, {
+    className: className,
+    internalEditButton: internalEditButton
+  }, (0, _tags.default)("pod", rest), {
+    height: podHeight,
+    ref: ref
+  }), /*#__PURE__*/_react.default.createElement(_podStyle.StyledBlock, _extends({
+    contentTriggersEdit: shouldContentHaveEditEvents(),
+    hasButtons: onEdit || onDelete || onUndo,
+    fullWidth: editContentFullWidth,
+    internalEditButton: internalEditButton,
+    isFocused: isEditFocused || isDeleteFocused,
+    isHovered: isEditHovered || isDeleteHovered,
+    noBorder: !border,
+    variant: variant,
+    softDelete: softDelete
+  }, shouldContentHaveEditEvents() ? { ...editEvents(),
+    tabIndex: "0"
+  } : {}), /*#__PURE__*/_react.default.createElement(_podStyle.StyledContent, {
+    "data-element": "content",
+    size: size
+  }, podHeader(), /*#__PURE__*/_react.default.createElement("div", null, children)), renderFooter()), actionButtons());
+});
 Pod.propTypes = { ...marginPropTypes,
 
   /**
@@ -523,11 +324,5 @@ Pod.propTypes = { ...marginPropTypes,
    */
   height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
 };
-Pod.defaultProps = {
-  border: true,
-  variant: "primary",
-  size: "medium",
-  alignTitle: "left"
-};
 var _default = Pod;
 exports.default = _default;