carbon-react 95.1.1 → 96.1.0

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -212,8 +212,8 @@ const MultiActionButton = ({
 
 MultiActionButton.propTypes = { ...marginPropTypes,
 
-  /** Button type: "primary" | "secondary". */
-  buttonType: _propTypes.default.oneOf(["primary", "secondary"]),
+  /** Button type: "primary" | "secondary" | "tertiary" */
+  buttonType: _propTypes.default.oneOf(["primary", "secondary", "tertiary"]),
 
   /** The additional button to display. */
   children: _propTypes.default.node.isRequired,

package/lib/components/multi-action-button/multi-action-button.config.js

@@ -8,5 +8,5 @@ const MULTI_ACTION_BUTTON_ALIGNMENTS = ["left", "right"];
 exports.MULTI_ACTION_BUTTON_ALIGNMENTS = MULTI_ACTION_BUTTON_ALIGNMENTS;
 const MULTI_ACTION_BUTTON_SIZES = ["small", "medium", "large"];
 exports.MULTI_ACTION_BUTTON_SIZES = MULTI_ACTION_BUTTON_SIZES;
-const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary"];
+const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
 exports.MULTI_ACTION_BUTTON_THEMES = MULTI_ACTION_BUTTON_THEMES;

package/lib/components/multi-action-button/multi-action-button.d.ts

@@ -1,5 +1,8 @@
 import SplitButton from "../split-button";
 
-declare class MultiActionButton extends SplitButton {}
+declare class MultiActionButton extends SplitButton {
+  /** Button type: "primary" | "secondary" | "tertiary" */
+  buttonType?: "primary" | "secondary" | "tertiary";
+}
 
 export default MultiActionButton;

package/lib/components/pod/pod.d.ts

@@ -48,6 +48,8 @@ export interface PodProps {
   height?: string | number;
 }
 
-declare class Pod extends React.Component<PodProps> {}
+declare function Pod(
+  props: PodProps & React.RefAttributes<HTMLElement>
+): JSX.Element;
 
 export default Pod;

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -78,7 +78,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
   const [isOpen, setOpen] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
-  const [selectedValue, setSelectedValue] = (0, _react.useState)("");
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
   const [filterText, setFilterText] = (0, _react.useState)("");
   const createCustomEvent = (0, _react.useCallback)(newValue => {
@@ -187,21 +187,33 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [setMatchingText, selectedValue]);
   (0, _react.useEffect)(() => {
-    const newValue = value || defaultValue;
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
     (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
-    setSelectedValue(prevValue => {
-      if (value && isControlled.current && prevValue !== newValue) {
-        setMatchingText(newValue);
+
+    if (isControlled.current) {
+      setSelectedValue(prevValue => {
+        if (value && prevValue !== value) {
+          setMatchingText(value);
+        }
+
+        return value;
+      });
+      setHighlightedValue(value);
+    } else {
+      if (textValue !== selectedValue) {
+        setMatchingText(selectedValue);
       }
 
-      return newValue;
-    });
-    setHighlightedValue(newValue); // prevent value update on filter change
+      if (highlightedValue !== selectedValue) {
+        setHighlightedValue(selectedValue);
+      }
+    } // prevent value update on filter change
+    // selectedValue and highlightedValue omitted from deps, only want uncontrolled change if onChange/children update
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, defaultValue, onChange, children]);
+
+  }, [value, onChange, children]);
   (0, _react.useEffect)(() => {
     if (!isOpen) {
       setFilterText("");
@@ -215,8 +227,11 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     (0, _invariant.default)(!hasListActionButton || hasListActionButton && onListAction, onListActionMissingMessage);
   }, [listActionButton, onListAction]);
   (0, _react.useEffect)(() => {
-    setMatchingText(value || defaultValue); // update text value only when children are changing
+    if (isControlled.current) {
+      setMatchingText(value);
+    } // update text value only when children are changing
     // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [value, children]);
   (0, _react.useEffect)(() => {
     if (onFilterChange) {

package/lib/components/select/multi-select/multi-select.component.js

@@ -82,7 +82,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
   const [isOpen, setOpenState] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
-  const [selectedValue, setSelectedValue] = (0, _react.useState)([]);
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || []);
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
   const [filterText, setFilterText] = (0, _react.useState)("");
   const [placeholderOverride, setPlaceholderOverride] = (0, _react.useState)();
@@ -124,7 +124,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     setSelectedValue(previousValue => {
       isClickTriggeredBySelect.current = true;
 
-      if (previousValue.length === 0) {
+      if (!previousValue.length) {
         return previousValue;
       }
 
@@ -185,7 +185,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   const mapValuesToPills = (0, _react.useCallback)(() => {
     const canDelete = !disabled && !readOnly;
 
-    if (selectedValue.length === 0) {
+    if (!selectedValue.length) {
       return "";
     }
 
@@ -205,31 +205,28 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       const {
         title
       } = pillProps;
+      const key = title + ((matchingOption === null || matchingOption === void 0 ? void 0 : matchingOption.props.value) || index);
       return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectPillContainer, {
-        key: title
+        key: key
       }, /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
         onDelete: canDelete ? () => removeSelectedValue(index) : undefined
       }, pillProps), title));
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [children, disabled, readOnly, selectedValue]);
   (0, _react.useEffect)(() => {
-    const newValue = value || defaultValue;
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    const onChageMissingMessage = "onChange prop required when using a controlled input element";
+    const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChageMissingMessage);
-    setSelectedValue(previousValue => {
-      if (!newValue && previousValue.length === 0) {
-        return previousValue;
-      }
+    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
 
-      return newValue;
-    });
-  }, [value, defaultValue, onChange]); // removes placeholder when a value is present
+    if (isControlled.current) {
+      setSelectedValue(value);
+    }
+  }, [value, onChange]); // removes placeholder when a value is present
 
   (0, _react.useEffect)(() => {
-    const hasValue = value && value.length > 0;
-    const hasSelectedValue = selectedValue && selectedValue.length > 0;
+    const hasValue = value === null || value === void 0 ? void 0 : value.length;
+    const hasSelectedValue = selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length;
 
     if (hasValue || hasSelectedValue) {
       setPlaceholderOverride(" ");

package/lib/components/select/simple-select/simple-select.component.js

@@ -77,7 +77,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
   const [isOpen, setOpenState] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
-  const [selectedValue, setSelectedValue] = (0, _react.useState)("");
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
   const childOptions = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
   const createCustomEvent = (0, _react.useCallback)(newValue => {
     const customEvent = {
@@ -176,13 +176,15 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     isClickTriggeredBySelect.current = false;
   }, []);
   (0, _react.useEffect)(() => {
-    const newValue = value || defaultValue;
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
     (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
-    setSelectedValue(newValue);
-  }, [value, defaultValue, onChange]);
+
+    if (isControlled.current) {
+      setSelectedValue(value);
+    }
+  }, [value, onChange]);
   (0, _react.useEffect)(() => {
     const matchingOption = childOptions.find(child => (0, _isExpectedOption.default)(child, selectedValue));
     let newText = "";

package/lib/components/select/simple-select/simple-select.d.ts

@@ -55,7 +55,7 @@ export interface SimpleSelectProps
     | "left-start"
     | "left-end";
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled?: bool;
+  flipEnabled?: boolean;
 }
 
 declare function SimpleSelect(

package/lib/components/select/utils/is-expected-option.js

@@ -22,5 +22,13 @@ function isExpectedOption(element, expectedValue) {
     return false;
   }
 
+  const {
+    length
+  } = typeof expectedValue === "string" ? expectedValue : Object.keys(expectedValue);
+
+  if (!length) {
+    return false;
+  }
+
   return (0, _isExpectedValue.default)(element.props.value, expectedValue);
 }

package/lib/components/show-edit-pod/show-edit-pod-test.stories.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _showEditPod = _interopRequireDefault(require("./show-edit-pod.component"));
+
+var _content = _interopRequireDefault(require("../content"));
+
+var _specialCharacters = _interopRequireDefault(require("../../../.storybook/utils/argTypes/specialCharacters"));
+
+var _textbox = _interopRequireDefault(require("../textbox"));
+
+var _fieldset = _interopRequireDefault(require("../fieldset"));
+
+var _showEditPod2 = require("./show-edit-pod.config");
+
+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; }
+
+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); }
+
+var _default = {
+  component: _showEditPod.default,
+  title: "ShowEditPod/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  },
+  argTypes: {
+    buttonAlign: {
+      options: _showEditPod2.SHOW_EDIT_POD_ALIGNMENTS,
+      control: {
+        type: "select"
+      }
+    },
+    variant: {
+      options: _showEditPod2.SHOW_EDIT_POD_THEMES,
+      control: {
+        type: "select"
+      }
+    },
+    cancelTextSpecialCharacters: _specialCharacters.default,
+    deleteTextSpecialCharacters: _specialCharacters.default,
+    saveTextSpecialCharacters: _specialCharacters.default,
+    titleSpecialCharacters: _specialCharacters.default
+  },
+  args: {
+    border: false,
+    buttonAlign: "right",
+    cancel: true,
+    cancelText: "Cancel",
+    cancelTextSpecialCharacters: undefined,
+    deleteText: "Delete",
+    deleteTextSpecialCharacters: undefined,
+    saveText: "Save",
+    saveTextSpecialCharacters: undefined,
+    saving: false,
+    title: "Person",
+    titleSpecialCharacters: undefined,
+    transitionName: "carbon-show-edit-pod__transition",
+    variant: "transparent"
+  }
+};
+exports.default = _default;
+
+const ShowEditPodStory = ({
+  cancelTextSpecialCharacters,
+  cancelText,
+  deleteTextSpecialCharacters,
+  deleteText,
+  saveTextSpecialCharacters,
+  saveText,
+  titleSpecialCharacters,
+  title,
+  ...args
+}) => {
+  const [isEditing, setIsEditing] = (0, _react.useState)(false);
+  const [state, setState] = (0, _react.useState)({
+    edit_first_name: "Alan",
+    edit_second_name: "Smith",
+    edit_telephone: "000 000 0000"
+  });
+  const fieldProps = [{
+    key: "edit_first_name",
+    label: "First Name"
+  }, {
+    key: "edit_second_name",
+    label: "Second Name"
+  }, {
+    key: "edit_telephone",
+    label: "Telephone"
+  }];
+
+  const onEdit = () => {
+    setIsEditing(true);
+    (0, _addonActions.action)("edit")();
+  };
+
+  const onCancel = () => {
+    setIsEditing(false);
+    (0, _addonActions.action)("cancel")();
+  };
+
+  const onDelete = () => {
+    setIsEditing(false);
+    (0, _addonActions.action)("delete")();
+  };
+
+  const onSave = () => {
+    setIsEditing(false);
+    (0, _addonActions.action)("onSave")();
+  };
+
+  const setField = fieldName => e => {
+    setState({ ...state,
+      [fieldName]: e.target.value
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_showEditPod.default, _extends({}, args, {
+    editing: isEditing,
+    onDelete: onDelete,
+    onCancel: onCancel,
+    onEdit: onEdit,
+    editFields: /*#__PURE__*/_react.default.createElement(_fieldset.default, null, fieldProps.map(({
+      key,
+      label
+    }) => /*#__PURE__*/_react.default.createElement(_textbox.default, {
+      label: label,
+      key: key,
+      onChange: setField(key),
+      value: state[key],
+      labelInline: true,
+      labelAlign: "right"
+    }))),
+    onSave: onSave,
+    cancelText: cancelTextSpecialCharacters || cancelText,
+    deleteText: deleteTextSpecialCharacters || deleteText,
+    saveText: saveTextSpecialCharacters || saveText,
+    title: titleSpecialCharacters || title
+  }), fieldProps.map(({
+    key,
+    label
+  }) => /*#__PURE__*/_react.default.createElement(_content.default, {
+    key: key,
+    title: label
+  }, state[key])));
+};
+
+const Default = ShowEditPodStory.bind({});
+exports.Default = Default;

package/lib/components/show-edit-pod/show-edit-pod.component.js

@@ -5,20 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BaseShowEditPod = exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _reactTransitionGroup = require("react-transition-group");
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _utils = require("../../style/utils");
 
-var _pod = _interopRequireDefault(require("../pod"));
-
 var _form = _interopRequireDefault(require("../form"));
 
 var _button = _interopRequireDefault(require("../button"));
@@ -27,8 +23,6 @@ var _deleteButton = _interopRequireDefault(require("./delete-button.style"));
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
-var _ether = require("../../__internal__/utils/ether");
-
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
 var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
@@ -37,230 +31,173 @@ var _showEditPod = _interopRequireDefault(require("./show-edit-pod.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); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-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 _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-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); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-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); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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 _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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
-let ShowEditPod = /*#__PURE__*/function (_React$Component) {
-  _inherits(ShowEditPod, _React$Component);
-
-  var _super = _createSuper(ShowEditPod);
-
-  function ShowEditPod(...args) {
-    var _this;
-
-    _classCallCheck(this, ShowEditPod);
-
-    _this = _super.call(this, ...args);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      editing: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "isControlled", _this.props.editing !== undefined);
-
-    _defineProperty(_assertThisInitialized(_this), "onEdit", ev => {
-      _this.props.onEdit(ev);
-
-      _this.toggleEditingState(true);
-
-      _this.__focusOnPod();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onSaveEditForm", ev => {
-      ev.preventDefault();
-
-      _this.props.onSave(ev);
-
-      _this.toggleEditingState(false);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onCancelEditForm", ev => {
-      if (_this.props.onCancel) {
-        _this.props.onCancel(ev);
-      }
-
-      _this.toggleEditingState(false);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "toggleEditingState", newState => {
-      if (!_this.isControlled) {
-        _this.setState({
-          editing: newState
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onKeyDown", ev => {
-      if (_events.default.isEscKey(ev)) {
-        _this.onCancelEditForm(ev);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "__focusOnPod", () => {
-      _reactDom.default.findDOMNode(_this.pod).focus(); // eslint-disable-line react/no-find-dom-node
-
-    });
-
-    return _this;
-  }
-
-  _createClass(ShowEditPod, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.editing) {
-        this.__focusOnPod();
-      }
+const ShowEditPod = ({
+  border = false,
+  className,
+  children,
+  saving = false,
+  editFields,
+  editing,
+  onEdit,
+  onSave,
+  onCancel,
+  onUndo,
+  cancel = true,
+  cancelText,
+  saveText,
+  onDelete,
+  deleteText,
+  softDelete,
+  buttonAlign = "right",
+  transitionName = "carbon-show-edit-pod__transition",
+  title,
+  hideDeleteButtonInViewMode = false,
+  variant = "transparent",
+  ...rest
+}) => {
+  const locale = (0, _react.useContext)(_i18nContext.default);
+  const ref = (0, _react.useRef)();
+  const [isEditing, setIsEditingState] = (0, _react.useState)(false);
+  const isControlled = editing !== undefined;
+
+  const focusPod = () => {
+    ref.current.focus();
+  };
+
+  (0, _react.useEffect)(() => {
+    if (editing) {
+      focusPod();
     }
-  }, {
-    key: "isEditing",
-    value: function isEditing() {
-      return this.isControlled ? this.props.editing : this.state.editing;
-    }
-  }, {
-    key: "deleteButton",
-    value: function deleteButton() {
-      const label = this.props.deleteText || this.context.actions.delete();
-      return /*#__PURE__*/_react.default.createElement(_deleteButton.default, {
-        buttonType: "tertiary",
-        "data-element": "delete-button",
-        size: "small",
-        onClick: this.props.onDelete
-      }, label);
+  }, [editing]);
+  const isInEditMode = isControlled ? editing : isEditing;
+
+  const toggleEditingState = newState => {
+    if (!isControlled) {
+      setIsEditingState(newState);
     }
-  }, {
-    key: "editContent",
-    value: function editContent() {
-      return /*#__PURE__*/_react.default.createElement(_form.default, {
-        onSubmit: this.onSaveEditForm,
-        buttonAlignment: this.props.buttonAlign,
-        "data-element": "edit-form",
-        leftSideButtons: this.props.cancel && /*#__PURE__*/_react.default.createElement(_button.default, {
-          "data-element": "cancel-button",
-          onClick: this.onCancelEditForm,
-          size: "small"
-        }, this.props.cancelText),
-        saveButton: /*#__PURE__*/_react.default.createElement(_button.default, {
-          disabled: this.props.saving,
-          "data-element": "submit-button",
-          buttonType: "primary",
-          type: "submit",
-          size: "small"
-        }, this.props.saveText),
-        rightSideButtons: this.props.onDelete ? this.deleteButton() : null,
-        saving: this.props.saving
-      }, this.props.editFields);
+  };
+
+  const handleEdit = ev => {
+    onEdit(ev);
+    toggleEditingState(true);
+    focusPod();
+  };
+
+  const onSaveEditForm = ev => {
+    ev.preventDefault();
+    onSave(ev);
+    toggleEditingState(false);
+  };
+
+  const onCancelEditForm = ev => {
+    if (onCancel) {
+      onCancel(ev);
     }
-  }, {
-    key: "content",
-    value: function content() {
-      if (this.isEditing()) {
-        return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
-          key: "1",
-          classNames: this.props.transitionName,
-          timeout: {
-            enter: 300,
-            exit: 50
-          }
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          key: "edit"
-        }, this.editContent()));
-      }
 
+    toggleEditingState(false);
+  };
+
+  const onKeyDown = ev => {
+    if (_events.default.isEscKey(ev)) {
+      onCancelEditForm(ev);
+    }
+  };
+
+  const deleteButton = () => {
+    const label = deleteText || locale.actions.delete();
+    return /*#__PURE__*/_react.default.createElement(_deleteButton.default, {
+      buttonType: "tertiary",
+      "data-element": "delete-button",
+      size: "small",
+      onClick: onDelete
+    }, label);
+  };
+
+  const editContent = () => /*#__PURE__*/_react.default.createElement(_form.default, {
+    onSubmit: onSaveEditForm,
+    buttonAlignment: buttonAlign,
+    "data-element": "edit-form",
+    leftSideButtons: cancel && /*#__PURE__*/_react.default.createElement(_button.default, {
+      "data-element": "cancel-button",
+      onClick: onCancelEditForm,
+      size: "small"
+    }, cancelText),
+    saveButton: /*#__PURE__*/_react.default.createElement(_button.default, {
+      disabled: saving,
+      "data-element": "submit-button",
+      buttonType: "primary",
+      type: "submit",
+      size: "small"
+    }, saveText),
+    rightSideButtons: onDelete ? deleteButton() : null,
+    saving: saving
+  }, editFields);
+
+  const content = () => {
+    if (isInEditMode) {
       return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
-        key: "2",
-        classNames: this.props.transitionName,
+        key: "1",
+        classNames: transitionName,
         timeout: {
           enter: 300,
           exit: 50
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
-        key: "show"
-      }, this.props.children));
+        key: "edit"
+      }, editContent()));
     }
-  }, {
-    key: "universalProps",
-    value: function universalProps() {
-      const {
-        onEdit,
-        onDelete,
-        className,
-        ...props
-      } = (0, _ether.validProps)(this, Object.keys(_pod.default.propTypes));
-      return props;
-    }
-  }, {
-    key: "contentProps",
-    value: function contentProps() {
-      const {
-        onEdit,
-        onDelete,
-        hideDeleteButtonInViewMode
-      } = this.props;
-      const props = this.universalProps();
-
-      if (onEdit) {
-        props.onEdit = this.onEdit;
-      }
 
-      return { ...props,
-        onDelete: !hideDeleteButtonInViewMode && onDelete
-      };
-    }
-  }, {
-    key: "editingProps",
-    value: function editingProps() {
-      const props = this.universalProps();
-      props.onKeyDown = this.onKeyDown;
-      return props;
-    }
-  }, {
-    key: "podProps",
-    value: function podProps() {
-      return this.isEditing() ? this.editingProps() : this.contentProps();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_showEditPod.default, _extends({
-        className: this.props.className,
-        size: "small"
-      }, this.podProps(), {
-        ref: node => {
-          this.pod = node;
-        },
-        tabIndex: "-1"
-      }, (0, _tags.default)("show-edit-pod", this.props)), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, this.content()));
-    }
-  }]);
-
-  return ShowEditPod;
-}(_react.default.Component);
+    return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+      key: "2",
+      classNames: transitionName,
+      timeout: {
+        enter: 300,
+        exit: 50
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      key: "show"
+    }, children));
+  };
+
+  const universalProps = () => ({
+    size: "small",
+    tabIndex: "-1",
+    title,
+    ref,
+    className,
+    border,
+    onUndo,
+    softDelete,
+    variant,
+    ...rest,
+    ...(0, _tags.default)("show-edit-pod", rest)
+  });
+
+  const contentProps = () => ({ ...universalProps(),
+    ...(!hideDeleteButtonInViewMode && {
+      onDelete
+    }),
+    ...(onEdit && {
+      onEdit: handleEdit
+    })
+  });
+
+  const editingProps = () => ({ ...universalProps(),
+    onKeyDown
+  });
+
+  const podProps = () => isInEditMode ? editingProps() : contentProps();
+
+  return /*#__PURE__*/_react.default.createElement(_showEditPod.default, podProps(), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, content()));
+};
 
 exports.BaseShowEditPod = ShowEditPod;
-ShowEditPod.contextType = _i18nContext.default;
 ShowEditPod.propTypes = { ...marginPropTypes,
 
   /** Pod theme variant. */
@@ -322,16 +259,10 @@ ShowEditPod.propTypes = { ...marginPropTypes,
   deleteText: _propTypes.default.string,
 
   /** Can inform if the form is in a saving state (disables the save button) */
-  saving: _propTypes.default.bool
-};
-ShowEditPod.defaultProps = {
-  variant: "transparent",
-  border: false,
-  buttonAlign: "right",
-  transitionName: "carbon-show-edit-pod__transition",
-  cancel: true,
-  saving: false,
-  hideDeleteButtonInViewMode: false
+  saving: _propTypes.default.bool,
+
+  /** Title to be displayed */
+  title: _propTypes.default.node
 };
 var _default = ShowEditPod;
 exports.default = _default;

package/lib/components/show-edit-pod/show-edit-pod.d.ts

@@ -48,8 +48,10 @@ export interface ShowEditPodProps {
   saveText?: string;
   /** Can inform if the form is in a saving state (disables the save button) */
   saving?: boolean;
+  /** Title to be displayed */
+  title?: React.ReactNode;
 }
 
-declare class ShowEditPod extends React.Component<ShowEditPodProps> {}
+declare function ShowEditPod(props: ShowEditPodProps): JSX.Element;
 
 export default ShowEditPod;

package/lib/components/tabs/tabs.component.js

@@ -282,8 +282,15 @@ const Tabs = ({
         tab = child;
       }
     });
-    return tab ? /*#__PURE__*/(0, _react.cloneElement)(tab, {
-      isTabSelected: isTabSelected(tab.props.tabId)
+    return tab ? /*#__PURE__*/(0, _react.cloneElement)(tab, { ...tab.props,
+      role: "tabpanel",
+      position,
+      isTabSelected: isTabSelected(tab.props.tabId),
+      key: `${tab.props.tabId}-tab`,
+      ariaLabelledby: `${tab.props.tabId}-tab`,
+      updateErrors,
+      updateWarnings,
+      updateInfos
     }) : null;
   };
   /** Builds all tabs where non selected tabs have class of hidden */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "95.1.1",
+  "version": "96.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -8,10 +8,12 @@
     "node": ">=14.16.0"
   },
   "files": [
-    "lib"
+    "lib",
+    "scripts/check_carbon_version.js",
+    "scripts/check_rfcs.js"
   ],
   "scripts": {
-    "start": "node ./check_version.js && start-storybook -p 9001 -s .assets -c .storybook",
+    "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -s .assets -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
     "test": "jest --config=./jest.conf.json",
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
@@ -22,14 +24,14 @@
     "lint": "eslint ./src",
     "precompile": "npm run clean-lib && npm run copy-files && npm run babel",
     "prepublishOnly": "npm run precompile",
+    "postinstall": "node ./scripts/check_carbon_version.js && node ./scripts/check_rfcs.js",
     "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
     "build-storybook": "build-storybook -c .storybook -s .assets",
     "start:static": "npx http-server -p 9001 ./storybook-static",
     "babel": "cross-env NODE_ENV=production babel ./src --config-file ./babel.config.js --out-dir ./lib --ignore '**/*/__spec__.js','**/*.spec.js','**/__definition__.js' --quiet",
     "clean-lib": "rimraf ./lib",
     "copy-files": "cpy \"**/\" \"!**/(*.js|*.md|*.mdx|*.stories.*|*.snap)\" ../lib/ --cwd=src --parents",
-    "commit": "git-cz",
-    "chromatic": "chromatic"
+    "commit": "git-cz"
   },
   "repository": {
     "type": "git",
@@ -86,6 +88,7 @@
     "babel-jest": "^26.6.3",
     "browserslist": "^4.16.6",
     "chalk": "^4.1.1",
+    "chromatic": "^6.0.5",
     "commitizen": "^4.2.4",
     "conventional-changelog-conventionalcommits": "^4.5.0",
     "core-js": "^3.1.4",
@@ -132,16 +135,19 @@
     "typescript": "^3.9.5"
   },
   "dependencies": {
+    "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.9.0",
     "@sage/design-tokens": "^1.73.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "classnames": "~2.2.6",
     "crypto-js": "~3.3.0",
+    "dotenv": "^10.0.0",
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lodash": "^4.17.20",
     "moment": "~2.20.1",
+    "node-fetch": "^2.6.1",
     "polished": "^4.0.5",
     "prop-types": "^15.7.2",
     "react-day-picker": "~6.1.1",

package/scripts/check_carbon_version.js

@@ -0,0 +1,30 @@
+/* eslint-disable no-console */
+const fetch = require("node-fetch");
+const dotenv = require("dotenv");
+const chalk = require("chalk");
+const { version } = require("../package.json");
+
+dotenv.config();
+const majorVersion = version.split(".")[0];
+
+const checkCarbonVersion = () => {
+  fetch("https://registry.npmjs.com/carbon-react")
+    .then((res) => res.json())
+    .then((data) => {
+      const { latest } = data["dist-tags"];
+      const latestMajor = latest.split(".")[0];
+
+      const diff = Number(latestMajor) - Number(majorVersion);
+
+      if (diff > 1) {
+        console.log(
+          `carbon-react version installed is currently ${chalk.yellow(
+            diff
+          )} major versions behind the latest.`
+        );
+      }
+    })
+    .catch((err) => console.log(err));
+};
+
+if (!process.env.CARBON_INSTALL) checkCarbonVersion();

package/scripts/check_rfcs.js

@@ -0,0 +1,49 @@
+/* eslint-disable no-console */
+const { Octokit } = require("@octokit/rest");
+const dotenv = require("dotenv");
+const chalk = require("chalk");
+
+dotenv.config();
+const octokit = new Octokit({
+  baseUrl: "https://api.github.com",
+});
+
+const method = "GET";
+const owner = "sage";
+const path = "pulls";
+const repo = "carbon";
+const url = "/repos/{owner}/{repo}/{path}";
+
+const getOpenRfcs = async () => {
+  const { data } = await octokit.request({
+    owner,
+    repo,
+    url,
+    method,
+    path,
+  });
+
+  return data.filter((item) => {
+    const labels = item.labels.filter((label) => label.name === "RFC");
+
+    return labels.length > 0;
+  });
+};
+
+const getRfcTitle = (rfc) => rfc.title.split(": ")[1];
+
+const checkRfcs = async () => {
+  const openRfcs = await getOpenRfcs();
+
+  if (openRfcs.length > 0) {
+    console.log("\ncarbon-react currently has open RFCs:");
+
+    openRfcs.forEach((item) => {
+      const title = getRfcTitle(item);
+      console.log(`- ${title}: ${chalk.cyan(item.html_url)}`);
+    });
+    console.log("\n");
+  }
+};
+
+if (!process.env.CARBON_INSTALL) checkRfcs();