carbon-react 123.11.2 → 124.1.0

package/esm/components/dialog/dialog.component.d.ts

@@ -56,6 +56,8 @@ export interface DialogProps extends ModalProps, TagProps {
     role?: string;
     /** Padding to be set on the Dialog content */
     contentPadding?: ContentPaddingInterface;
+    /** Change the background color of the content to grey */
+    greyBackground?: boolean;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
     focusableContainers?: CustomRefObject<HTMLElement>[];
 }

package/esm/components/dialog/dialog.component.js

@@ -33,6 +33,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
   help,
   role = "dialog",
   contentPadding = {},
+  greyBackground = false,
   focusableContainers,
   topModalOverride,
   ...rest
@@ -175,7 +176,9 @@ const Dialog = /*#__PURE__*/forwardRef(({
     "data-role": rest["data-role"],
     role: role,
     tabIndex: -1
-  }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
+  }, contentPadding, {
+    backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
+  }), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
     hasStickyFooter: hasStickyFooter
   }), /*#__PURE__*/React.createElement(StyledDialogInnerContent, _extends({
     ref: innerContentRef
@@ -227,6 +230,7 @@ Dialog.propTypes = {
       }
     }
   })]),
+  "greyBackground": PropTypes.bool,
   "height": PropTypes.string,
   "help": PropTypes.string,
   "onCancel": PropTypes.func,

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

@@ -4,6 +4,7 @@ declare type StyledDialogProps = {
     topMargin: number;
     size?: DialogSizes;
     dialogHeight?: string;
+    backgroundColor: string;
 };
 declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;
 declare type StyledDialogTitleProps = {

package/esm/components/dialog/dialog.style.js

@@ -21,7 +21,6 @@ const calculatePaddingTopInnerContent = ({
   p
 }) => [py, p].some(padding => padding !== undefined) ? 0 : `${CONTENT_TOP_PADDING}px`;
 const StyledDialog = styled.div`
-  background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);
   display: flex;
   flex-direction: column;
@@ -39,6 +38,12 @@ const StyledDialog = styled.div`
     outline: none;
   }
 
+  ${({
+  backgroundColor
+}) => css`
+      background-color: ${backgroundColor};
+    `}
+
   ${({
   size
 }) => size && css`

package/esm/components/menu/menu-item/menu-item.component.js

@@ -126,7 +126,6 @@ export const MenuItem = ({
   if (submenu) {
     return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, tagComponent("menu-item", rest), {
       menuType: menuType,
-      display: "inline-block",
       title: getTitle(submenu),
       maxWidth: itemMaxWidth,
       onClick: updateFocusOnClick
@@ -151,7 +150,6 @@ export const MenuItem = ({
   return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, tagComponent("menu-item", rest), {
     menuType: menuType,
     inSubmenu: !!handleSubmenuKeyDown,
-    display: "inline-block",
     title: getTitle(children),
     maxWidth: itemMaxWidth
   }, rest, {

package/esm/components/menu/menu-item/menu-item.style.js

@@ -151,6 +151,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
       ${StyledIcon} {
         bottom: 3px;
+        display: inline-block;
       }
     }
 

package/esm/components/menu/menu-segment-title/menu-segment-title.component.d.ts

@@ -1,10 +1,15 @@
 import React from "react";
 import { VariantType } from "../menu-item";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
+declare const AS_VALUES: readonly ["h2", "h3", "h4", "h5", "h6"];
+declare type AllowedAsValues = typeof AS_VALUES[number];
 export interface MenuTitleProps extends TagProps {
-    children: string;
+    children?: React.ReactNode;
+    text: string;
     /** Set the colour variant for a menuType */
     variant?: VariantType;
+    /** Set the heading level for the segment title */
+    as?: AllowedAsValues;
 }
 declare const MenuSegmentTitle: React.ForwardRefExoticComponent<MenuTitleProps & React.RefAttributes<HTMLDivElement>>;
 export default MenuSegmentTitle;

package/esm/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -1,29 +1,36 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
-import StyledTitle from "./menu-segment-title.style";
+import { StyledTitle, StyledSegmentChildren } from "./menu-segment-title.style";
 import MenuContext from "../menu.context";
 import { StyledMenuItem } from "../menu.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
+const AS_VALUES = ["h2", "h3", "h4", "h5", "h6"];
 const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   children,
   variant = "default",
+  text,
+  as = "h2",
   ...rest
 }, ref) => {
   const menuContext = useContext(MenuContext);
   return /*#__PURE__*/React.createElement(StyledMenuItem, {
     inSubmenu: true
-  }, /*#__PURE__*/React.createElement(StyledTitle, _extends({}, tagComponent("menu-segment-title", rest), {
+  }, /*#__PURE__*/React.createElement(StyledTitle, _extends({
+    as: AS_VALUES.includes(as) ? as : /* istanbul ignore next */"h2"
+  }, tagComponent("menu-segment-title", rest), {
     menuType: menuContext.menuType,
     ref: ref,
     variant: variant
-  }), children));
+  }), text), children && /*#__PURE__*/React.createElement(StyledSegmentChildren, null, children));
 });
 MenuSegmentTitle.propTypes = {
-  "children": PropTypes.string.isRequired,
+  "as": PropTypes.oneOf(["h2", "h3", "h4", "h5", "h6"]),
+  "children": PropTypes.node,
   "data-component": PropTypes.string,
   "data-element": PropTypes.string,
   "data-role": PropTypes.string,
+  "text": PropTypes.string.isRequired,
   "variant": PropTypes.oneOf(["alternate", "default"])
 };
 MenuSegmentTitle.displayName = "MenuSegmentTitle";

package/esm/components/menu/menu-segment-title/menu-segment-title.style.d.ts

@@ -4,5 +4,6 @@ interface StyledTitleProps {
     variant?: VariantType;
     menuType: MenuType;
 }
-declare const StyledTitle: import("styled-components").StyledComponent<"div", any, StyledTitleProps, never>;
-export default StyledTitle;
+declare const StyledTitle: import("styled-components").StyledComponent<"h2", any, StyledTitleProps, never>;
+declare const StyledSegmentChildren: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export { StyledTitle, StyledSegmentChildren };

package/esm/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -1,10 +1,11 @@
 import styled, { css } from "styled-components";
 import menuConfigVariants from "../menu.config";
-const StyledTitle = styled.div`
+const StyledTitle = styled.h2`
   ${({
   menuType,
   variant
 }) => css`
+    margin: 0px;
     padding: 16px 16px 8px;
     font-size: 12px;
     font-weight: 700;
@@ -12,7 +13,21 @@ const StyledTitle = styled.div`
     line-height: 12px;
     cursor: default;
     color: ${menuConfigVariants[menuType].title};
-    ${variant === "alternate" && `background-color: ${menuConfigVariants[menuType].alternate};`};
+    ${variant === "alternate" && `background-color: ${menuConfigVariants[menuType].alternate};`}
   `}
 `;
-export default StyledTitle;
+const StyledSegmentChildren = styled.ul`
+  padding: 0;
+
+  li {
+    list-style: none;
+
+    &:not(&:last-child) a,
+    &:not(&:last-child) button,
+    &:not(&:last-child) > span,
+    &:not(&:last-child) > div {
+      border-radius: var(--borderRadius000);
+    }
+  }
+`;
+export { StyledTitle, StyledSegmentChildren };

package/esm/components/menu/menu.style.js

@@ -10,6 +10,7 @@ const StyledMenuWrapper = styled.ul`
   margin: 0;
   padding: 0;
   outline: none;
+  display: flex;
 
   ${layout}
   ${flexbox}
@@ -22,13 +23,7 @@ const StyledMenuWrapper = styled.ul`
         vertical-align: bottom;
         background-color: ${menuConfigVariants[menuType].background};
         ${menuType === "dark" && css`
-          display: inline-block;
-          vertical-align: bottom;
-          background-color: ${menuConfigVariants[menuType].background};
-
-          ${menuType === "dark" && css`
-            color: ${menuConfigVariants[menuType].color};
-          `}
+          color: ${menuConfigVariants[menuType].color};
         `}
       `}
     ${StyledDivider} {

package/lib/components/dialog/dialog.component.d.ts

@@ -56,6 +56,8 @@ export interface DialogProps extends ModalProps, TagProps {
     role?: string;
     /** Padding to be set on the Dialog content */
     contentPadding?: ContentPaddingInterface;
+    /** Change the background color of the content to grey */
+    greyBackground?: boolean;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
     focusableContainers?: CustomRefObject<HTMLElement>[];
 }

package/lib/components/dialog/dialog.component.js

@@ -42,6 +42,7 @@ const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   help,
   role = "dialog",
   contentPadding = {},
+  greyBackground = false,
   focusableContainers,
   topModalOverride,
   ...rest
@@ -184,7 +185,9 @@ const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     "data-role": rest["data-role"],
     role: role,
     tabIndex: -1
-  }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
+  }, contentPadding, {
+    backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
+  }), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
     hasStickyFooter: hasStickyFooter
   }), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
     ref: innerContentRef
@@ -237,6 +240,7 @@ Dialog.propTypes = {
       }
     }
   })]),
+  "greyBackground": _propTypes.default.bool,
   "height": _propTypes.default.string,
   "help": _propTypes.default.string,
   "onCancel": _propTypes.default.func,

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

@@ -4,6 +4,7 @@ declare type StyledDialogProps = {
     topMargin: number;
     size?: DialogSizes;
     dialogHeight?: string;
+    backgroundColor: string;
 };
 declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;
 declare type StyledDialogTitleProps = {

package/lib/components/dialog/dialog.style.js

@@ -30,7 +30,6 @@ const calculatePaddingTopInnerContent = ({
   p
 }) => [py, p].some(padding => padding !== undefined) ? 0 : `${_dialog.CONTENT_TOP_PADDING}px`;
 const StyledDialog = _styledComponents.default.div`
-  background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);
   display: flex;
   flex-direction: column;
@@ -48,6 +47,12 @@ const StyledDialog = _styledComponents.default.div`
     outline: none;
   }
 
+  ${({
+  backgroundColor
+}) => (0, _styledComponents.css)`
+      background-color: ${backgroundColor};
+    `}
+
   ${({
   size
 }) => size && (0, _styledComponents.css)`

package/lib/components/menu/menu-item/menu-item.component.js

@@ -135,7 +135,6 @@ const MenuItem = ({
   if (submenu) {
     return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({}, (0, _tags.default)("menu-item", rest), {
       menuType: menuType,
-      display: "inline-block",
       title: getTitle(submenu),
       maxWidth: itemMaxWidth,
       onClick: updateFocusOnClick
@@ -160,7 +159,6 @@ const MenuItem = ({
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({}, (0, _tags.default)("menu-item", rest), {
     menuType: menuType,
     inSubmenu: !!handleSubmenuKeyDown,
-    display: "inline-block",
     title: getTitle(children),
     maxWidth: itemMaxWidth
   }, rest, {

package/lib/components/menu/menu-item/menu-item.style.js

@@ -160,6 +160,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
 
       ${_icon.default} {
         bottom: 3px;
+        display: inline-block;
       }
     }
 

package/lib/components/menu/menu-segment-title/menu-segment-title.component.d.ts

@@ -1,10 +1,15 @@
 import React from "react";
 import { VariantType } from "../menu-item";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
+declare const AS_VALUES: readonly ["h2", "h3", "h4", "h5", "h6"];
+declare type AllowedAsValues = typeof AS_VALUES[number];
 export interface MenuTitleProps extends TagProps {
-    children: string;
+    children?: React.ReactNode;
+    text: string;
     /** Set the colour variant for a menuType */
     variant?: VariantType;
+    /** Set the heading level for the segment title */
+    as?: AllowedAsValues;
 }
 declare const MenuSegmentTitle: React.ForwardRefExoticComponent<MenuTitleProps & React.RefAttributes<HTMLDivElement>>;
 export default MenuSegmentTitle;

package/lib/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _menuSegmentTitle = _interopRequireDefault(require("./menu-segment-title.style"));
+var _menuSegmentTitle = require("./menu-segment-title.style");
 var _menu = _interopRequireDefault(require("../menu.context"));
 var _menu2 = require("../menu.style");
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
@@ -14,25 +14,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ? Object.assign.bind() : 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 AS_VALUES = ["h2", "h3", "h4", "h5", "h6"];
 const MenuSegmentTitle = /*#__PURE__*/_react.default.forwardRef(({
   children,
   variant = "default",
+  text,
+  as = "h2",
   ...rest
 }, ref) => {
   const menuContext = (0, _react.useContext)(_menu.default);
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, {
     inSubmenu: true
-  }, /*#__PURE__*/_react.default.createElement(_menuSegmentTitle.default, _extends({}, (0, _tags.default)("menu-segment-title", rest), {
+  }, /*#__PURE__*/_react.default.createElement(_menuSegmentTitle.StyledTitle, _extends({
+    as: AS_VALUES.includes(as) ? as : /* istanbul ignore next */"h2"
+  }, (0, _tags.default)("menu-segment-title", rest), {
     menuType: menuContext.menuType,
     ref: ref,
     variant: variant
-  }), children));
+  }), text), children && /*#__PURE__*/_react.default.createElement(_menuSegmentTitle.StyledSegmentChildren, null, children));
 });
 MenuSegmentTitle.propTypes = {
-  "children": _propTypes.default.string.isRequired,
+  "as": _propTypes.default.oneOf(["h2", "h3", "h4", "h5", "h6"]),
+  "children": _propTypes.default.node,
   "data-component": _propTypes.default.string,
   "data-element": _propTypes.default.string,
   "data-role": _propTypes.default.string,
+  "text": _propTypes.default.string.isRequired,
   "variant": _propTypes.default.oneOf(["alternate", "default"])
 };
 MenuSegmentTitle.displayName = "MenuSegmentTitle";

package/lib/components/menu/menu-segment-title/menu-segment-title.style.d.ts

@@ -4,5 +4,6 @@ interface StyledTitleProps {
     variant?: VariantType;
     menuType: MenuType;
 }
-declare const StyledTitle: import("styled-components").StyledComponent<"div", any, StyledTitleProps, never>;
-export default StyledTitle;
+declare const StyledTitle: import("styled-components").StyledComponent<"h2", any, StyledTitleProps, never>;
+declare const StyledSegmentChildren: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export { StyledTitle, StyledSegmentChildren };

package/lib/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -3,17 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StyledTitle = exports.StyledSegmentChildren = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _menu = _interopRequireDefault(require("../menu.config"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 StyledTitle = _styledComponents.default.div`
+const StyledTitle = _styledComponents.default.h2`
   ${({
   menuType,
   variant
 }) => (0, _styledComponents.css)`
+    margin: 0px;
     padding: 16px 16px 8px;
     font-size: 12px;
     font-weight: 700;
@@ -21,8 +22,22 @@ const StyledTitle = _styledComponents.default.div`
     line-height: 12px;
     cursor: default;
     color: ${_menu.default[menuType].title};
-    ${variant === "alternate" && `background-color: ${_menu.default[menuType].alternate};`};
+    ${variant === "alternate" && `background-color: ${_menu.default[menuType].alternate};`}
   `}
 `;
-var _default = StyledTitle;
-exports.default = _default;
+exports.StyledTitle = StyledTitle;
+const StyledSegmentChildren = _styledComponents.default.ul`
+  padding: 0;
+
+  li {
+    list-style: none;
+
+    &:not(&:last-child) a,
+    &:not(&:last-child) button,
+    &:not(&:last-child) > span,
+    &:not(&:last-child) > div {
+      border-radius: var(--borderRadius000);
+    }
+  }
+`;
+exports.StyledSegmentChildren = StyledSegmentChildren;

package/lib/components/menu/menu.style.js

@@ -19,6 +19,7 @@ const StyledMenuWrapper = _styledComponents.default.ul`
   margin: 0;
   padding: 0;
   outline: none;
+  display: flex;
 
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
@@ -31,13 +32,7 @@ const StyledMenuWrapper = _styledComponents.default.ul`
         vertical-align: bottom;
         background-color: ${_menu.default[menuType].background};
         ${menuType === "dark" && (0, _styledComponents.css)`
-          display: inline-block;
-          vertical-align: bottom;
-          background-color: ${_menu.default[menuType].background};
-
-          ${menuType === "dark" && (0, _styledComponents.css)`
-            color: ${_menu.default[menuType].color};
-          `}
+          color: ${_menu.default[menuType].color};
         `}
       `}
     ${_verticalDivider.StyledDivider} {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "123.11.2",
+  "version": "124.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

package/esm/components/show-edit-pod/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./show-edit-pod";

package/esm/components/show-edit-pod/index.js

@@ -1 +0,0 @@
-export { default } from "./show-edit-pod.component";

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

@@ -1,217 +0,0 @@
-import React, { useState, useEffect, useContext, useRef } from "react";
-import PropTypes from "prop-types";
-import { TransitionGroup, CSSTransition } from "react-transition-group";
-import styledSystemPropTypes from "@styled-system/prop-types";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import Form from "../form";
-import Button from "../button";
-import Events from "../../__internal__/utils/helpers/events";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import LocaleContext from "../../__internal__/i18n-context";
-import StyledPod from "./show-edit-pod.style";
-import Logger from "../../__internal__/utils/logger";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
-let deprecateWarnTriggered = false;
-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
-}) => {
-  if (!deprecateWarnTriggered) {
-    deprecateWarnTriggered = true;
-    Logger.deprecate("The ShowEditPod component is deprecated and will soon be removed. Please use alternatives such as the Fieldset, Form or Pod components instead.");
-  }
-  const locale = useContext(LocaleContext);
-  const ref = useRef();
-  const editModeNodeRef = useRef();
-  const showModeNodeRef = useRef();
-  const [isEditing, setIsEditingState] = useState(false);
-  const isControlled = editing !== undefined;
-  const focusPod = () => {
-    ref.current.focus();
-  };
-  useEffect(() => {
-    if (editing) {
-      focusPod();
-    }
-  }, [editing]);
-  const isInEditMode = isControlled ? editing : isEditing;
-  const toggleEditingState = newState => {
-    if (!isControlled) {
-      setIsEditingState(newState);
-    }
-  };
-  const handleEdit = ev => {
-    onEdit(ev);
-    toggleEditingState(true);
-    focusPod();
-  };
-  const onSaveEditForm = ev => {
-    ev.preventDefault();
-    onSave(ev);
-    toggleEditingState(false);
-  };
-  const onCancelEditForm = ev => {
-    if (onCancel) {
-      onCancel(ev);
-    }
-    toggleEditingState(false);
-  };
-  const onKeyDown = ev => {
-    if (Events.isEscKey(ev)) {
-      onCancelEditForm(ev);
-    }
-  };
-  const deleteButton = () => {
-    const label = deleteText || locale.actions.delete();
-    return /*#__PURE__*/React.createElement(Button, {
-      buttonType: "tertiary",
-      destructive: true,
-      "data-element": "delete-button",
-      size: "small",
-      onClick: onDelete
-    }, label);
-  };
-  const editContent = () => /*#__PURE__*/React.createElement(Form, {
-    onSubmit: onSaveEditForm,
-    buttonAlignment: buttonAlign,
-    "data-element": "edit-form",
-    leftSideButtons: cancel && /*#__PURE__*/React.createElement(Button, {
-      "data-element": "cancel-button",
-      onClick: onCancelEditForm,
-      size: "small"
-    }, cancelText),
-    saveButton: /*#__PURE__*/React.createElement(Button, {
-      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.createElement(CSSTransition, {
-        key: "1",
-        classNames: transitionName,
-        timeout: {
-          enter: 300,
-          exit: 50
-        },
-        nodeRef: editModeNodeRef
-      }, /*#__PURE__*/React.createElement("div", {
-        key: "edit",
-        ref: editModeNodeRef
-      }, editContent()));
-    }
-    return /*#__PURE__*/React.createElement(CSSTransition, {
-      key: "2",
-      classNames: transitionName,
-      timeout: {
-        enter: 300,
-        exit: 50
-      },
-      nodeRef: showModeNodeRef
-    }, /*#__PURE__*/React.createElement("div", {
-      key: "show",
-      ref: showModeNodeRef
-    }, children));
-  };
-  const universalProps = () => ({
-    size: "small",
-    tabIndex: "-1",
-    title,
-    ref,
-    className,
-    border,
-    onUndo,
-    softDelete,
-    variant,
-    ...rest,
-    ...tagComponent("show-edit-pod", rest)
-  });
-  const contentProps = () => ({
-    ...universalProps(),
-    ...(!hideDeleteButtonInViewMode && {
-      onDelete
-    }),
-    ...(onEdit && {
-      onEdit: handleEdit
-    })
-  });
-  const editingProps = () => ({
-    ...universalProps(),
-    onKeyDown
-  });
-  const podProps = () => isInEditMode ? editingProps() : contentProps();
-  return /*#__PURE__*/React.createElement(StyledPod, podProps(), /*#__PURE__*/React.createElement(TransitionGroup, null, content()));
-};
-ShowEditPod.propTypes = {
-  ...marginPropTypes,
-  /** Pod theme variant. */
-  variant: PropTypes.oneOf(["primary", "secondary", "tertiary", "tile", "transparent"]),
-  /** Enable/disable the border on the Pod. */
-  border: PropTypes.bool,
-  /** This component supports children. */
-  children: PropTypes.node,
-  /** Classes to apply to the component. */
-  className: PropTypes.string,
-  /** Allows developers to control the editing state manually. */
-  editing: PropTypes.bool,
-  /** Callback when edit button is clicked. */
-  onEdit: PropTypes.func,
-  /** A callback triggered when the delete action is clicked. */
-  onDelete: PropTypes.func,
-  /** A callback triggered when the undo action is clicked. */
-  onUndo: PropTypes.func,
-  /** Sets soft delete state. */
-  softDelete: PropTypes.bool,
-  /** Hide delete button in view mode. */
-  hideDeleteButtonInViewMode: PropTypes.bool,
-  /** Define fields to be rendered in the edit state */
-  editFields: PropTypes.node,
-  /** Define a custom transition between show and edit states */
-  transitionName: PropTypes.string,
-  // Props passed to Form
-  /** A callback triggered after clicking the save button */
-  onSave: PropTypes.func,
-  /** Controls which direction the form buttons align */
-  buttonAlign: PropTypes.oneOf(["left", "right"]),
-  /** Set to false to hide the cancel button */
-  cancel: PropTypes.bool,
-  /** Supply custom text for the cancel button */
-  cancelText: PropTypes.string,
-  /** A callback triggered when the form is cancelled */
-  onCancel: PropTypes.func,
-  /** Supply custom text for the save button */
-  saveText: PropTypes.string,
-  /** Supply custom text for the delete button */
-  deleteText: PropTypes.string,
-  /** Can inform if the form is in a saving state (disables the save button) */
-  saving: PropTypes.bool,
-  /** Title to be displayed */
-  title: PropTypes.node
-};
-export default ShowEditPod;
-export { ShowEditPod as BaseShowEditPod };

package/esm/components/show-edit-pod/show-edit-pod.config.js

@@ -1,2 +0,0 @@
-export const SHOW_EDIT_POD_ALIGNMENTS = ["left", "right"];
-export const SHOW_EDIT_POD_THEMES = ["primary", "secondary", "tertiary", "tile", "transparent"];

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

@@ -1,57 +0,0 @@
-import * as React from "react";
-
-export interface ShowEditPodProps {
-  /** Enable/disable the border on the Pod. */
-  border?: boolean;
-  /** Controls which direction the form buttons align */
-  buttonAlign?: string;
-  /** Set to false to hide the cancel button */
-  cancel?: boolean;
-  /** Supply custom text for the cancel button */
-  cancelText?: string;
-  /** This component supports children. */
-  children?: React.ReactNode;
-  /** Classes to apply to the component. */
-  className?: string;
-  /** Supply custom text for the delete button */
-  deleteText?: string;
-  /** Define fields to be rendered in the edit state */
-  editFields?: React.ReactNode;
-  /** Allows developers to control the editing state manually. */
-  editing?: boolean;
-  /** Hide delete button in view mode. */
-  hideDeleteButtonInViewMode?: boolean;
-  /** Sets soft delete state. */
-  softDelete?: boolean;
-  /** A callback triggered when the form is cancelled */
-  onCancel?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** A callback triggered when the delete action is clicked. */
-  onDelete?: (
-    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
-  ) => void;
-  /** A callback triggered when the undo action is clicked. */
-  onUndo?: (
-    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
-  ) => void;
-  /** Callback when edit button is clicked. */
-  onEdit?: (
-    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
-  ) => void;
-  // Props passed to Form
-  /** A callback triggered after clicking the save button */
-  onSave?: (ev: React.FormEvent<HTMLFormElement>) => void;
-  /** Define a custom transition between show and edit states */
-  transitionName?: string;
-  /** Pod theme variant. */
-  variant?: string;
-  /** Supply custom text for the save button */
-  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 function ShowEditPod(props: ShowEditPodProps): JSX.Element;
-
-export default ShowEditPod;

package/esm/components/show-edit-pod/show-edit-pod.style.js

@@ -1,32 +0,0 @@
-import styled from "styled-components";
-import { StyledFormFooter } from "../form/form.style";
-import { StyledContent } from "../pod/pod.style";
-import Pod from "../pod";
-const StyledPod = styled(Pod)`
-  ${StyledFormFooter} {
-    margin-top: 24px;
-  }
-
-  ${StyledContent} {
-    padding: 16px;
-  }
-
-  .common-input__prefix {
-    z-index: 5;
-  }
-
-  .carbon-show-edit-pod__transition-enter {
-    opacity: 0;
-  }
-
-  .carbon-show-edit-pod__transition-enter.carbon-show-edit-pod__transition-enter-active {
-    opacity: 1;
-    transition: all 300ms ease-in;
-  }
-
-  .carbon-show-edit-pod__transition-exit {
-    opacity: 0;
-    position: absolute;
-  }
-`;
-export default StyledPod;

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

@@ -1 +0,0 @@
-export { default } from "./show-edit-pod";

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

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _showEditPod.default;
-  }
-});
-var _showEditPod = _interopRequireDefault(require("./show-edit-pod.component"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/show-edit-pod/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../esm/components/show-edit-pod/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

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

@@ -1,227 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BaseShowEditPod = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactTransitionGroup = require("react-transition-group");
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-var _utils = require("../../style/utils");
-var _form = _interopRequireDefault(require("../form"));
-var _button = _interopRequireDefault(require("../button"));
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
-var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
-var _showEditPod = _interopRequireDefault(require("./show-edit-pod.style"));
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 deprecateWarnTriggered = false;
-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
-}) => {
-  if (!deprecateWarnTriggered) {
-    deprecateWarnTriggered = true;
-    _logger.default.deprecate("The ShowEditPod component is deprecated and will soon be removed. Please use alternatives such as the Fieldset, Form or Pod components instead.");
-  }
-  const locale = (0, _react.useContext)(_i18nContext.default);
-  const ref = (0, _react.useRef)();
-  const editModeNodeRef = (0, _react.useRef)();
-  const showModeNodeRef = (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();
-    }
-  }, [editing]);
-  const isInEditMode = isControlled ? editing : isEditing;
-  const toggleEditingState = newState => {
-    if (!isControlled) {
-      setIsEditingState(newState);
-    }
-  };
-  const handleEdit = ev => {
-    onEdit(ev);
-    toggleEditingState(true);
-    focusPod();
-  };
-  const onSaveEditForm = ev => {
-    ev.preventDefault();
-    onSave(ev);
-    toggleEditingState(false);
-  };
-  const onCancelEditForm = ev => {
-    if (onCancel) {
-      onCancel(ev);
-    }
-    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(_button.default, {
-      buttonType: "tertiary",
-      destructive: true,
-      "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: "1",
-        classNames: transitionName,
-        timeout: {
-          enter: 300,
-          exit: 50
-        },
-        nodeRef: editModeNodeRef
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        key: "edit",
-        ref: editModeNodeRef
-      }, editContent()));
-    }
-    return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
-      key: "2",
-      classNames: transitionName,
-      timeout: {
-        enter: 300,
-        exit: 50
-      },
-      nodeRef: showModeNodeRef
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      key: "show",
-      ref: showModeNodeRef
-    }, 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.propTypes = {
-  ...marginPropTypes,
-  /** Pod theme variant. */
-  variant: _propTypes.default.oneOf(["primary", "secondary", "tertiary", "tile", "transparent"]),
-  /** Enable/disable the border on the Pod. */
-  border: _propTypes.default.bool,
-  /** This component supports children. */
-  children: _propTypes.default.node,
-  /** Classes to apply to the component. */
-  className: _propTypes.default.string,
-  /** Allows developers to control the editing state manually. */
-  editing: _propTypes.default.bool,
-  /** Callback when edit button is clicked. */
-  onEdit: _propTypes.default.func,
-  /** A callback triggered when the delete action is clicked. */
-  onDelete: _propTypes.default.func,
-  /** A callback triggered when the undo action is clicked. */
-  onUndo: _propTypes.default.func,
-  /** Sets soft delete state. */
-  softDelete: _propTypes.default.bool,
-  /** Hide delete button in view mode. */
-  hideDeleteButtonInViewMode: _propTypes.default.bool,
-  /** Define fields to be rendered in the edit state */
-  editFields: _propTypes.default.node,
-  /** Define a custom transition between show and edit states */
-  transitionName: _propTypes.default.string,
-  // Props passed to Form
-  /** A callback triggered after clicking the save button */
-  onSave: _propTypes.default.func,
-  /** Controls which direction the form buttons align */
-  buttonAlign: _propTypes.default.oneOf(["left", "right"]),
-  /** Set to false to hide the cancel button */
-  cancel: _propTypes.default.bool,
-  /** Supply custom text for the cancel button */
-  cancelText: _propTypes.default.string,
-  /** A callback triggered when the form is cancelled */
-  onCancel: _propTypes.default.func,
-  /** Supply custom text for the save button */
-  saveText: _propTypes.default.string,
-  /** Supply custom text for the delete button */
-  deleteText: _propTypes.default.string,
-  /** Can inform if the form is in a saving state (disables the save button) */
-  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.config.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SHOW_EDIT_POD_THEMES = exports.SHOW_EDIT_POD_ALIGNMENTS = void 0;
-const SHOW_EDIT_POD_ALIGNMENTS = ["left", "right"];
-exports.SHOW_EDIT_POD_ALIGNMENTS = SHOW_EDIT_POD_ALIGNMENTS;
-const SHOW_EDIT_POD_THEMES = ["primary", "secondary", "tertiary", "tile", "transparent"];
-exports.SHOW_EDIT_POD_THEMES = SHOW_EDIT_POD_THEMES;

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

@@ -1,57 +0,0 @@
-import * as React from "react";
-
-export interface ShowEditPodProps {
-  /** Enable/disable the border on the Pod. */
-  border?: boolean;
-  /** Controls which direction the form buttons align */
-  buttonAlign?: string;
-  /** Set to false to hide the cancel button */
-  cancel?: boolean;
-  /** Supply custom text for the cancel button */
-  cancelText?: string;
-  /** This component supports children. */
-  children?: React.ReactNode;
-  /** Classes to apply to the component. */
-  className?: string;
-  /** Supply custom text for the delete button */
-  deleteText?: string;
-  /** Define fields to be rendered in the edit state */
-  editFields?: React.ReactNode;
-  /** Allows developers to control the editing state manually. */
-  editing?: boolean;
-  /** Hide delete button in view mode. */
-  hideDeleteButtonInViewMode?: boolean;
-  /** Sets soft delete state. */
-  softDelete?: boolean;
-  /** A callback triggered when the form is cancelled */
-  onCancel?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** A callback triggered when the delete action is clicked. */
-  onDelete?: (
-    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
-  ) => void;
-  /** A callback triggered when the undo action is clicked. */
-  onUndo?: (
-    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
-  ) => void;
-  /** Callback when edit button is clicked. */
-  onEdit?: (
-    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
-  ) => void;
-  // Props passed to Form
-  /** A callback triggered after clicking the save button */
-  onSave?: (ev: React.FormEvent<HTMLFormElement>) => void;
-  /** Define a custom transition between show and edit states */
-  transitionName?: string;
-  /** Pod theme variant. */
-  variant?: string;
-  /** Supply custom text for the save button */
-  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 function ShowEditPod(props: ShowEditPodProps): JSX.Element;
-
-export default ShowEditPod;

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

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _form = require("../form/form.style");
-var _pod = require("../pod/pod.style");
-var _pod2 = _interopRequireDefault(require("../pod"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledPod = (0, _styledComponents.default)(_pod2.default)`
-  ${_form.StyledFormFooter} {
-    margin-top: 24px;
-  }
-
-  ${_pod.StyledContent} {
-    padding: 16px;
-  }
-
-  .common-input__prefix {
-    z-index: 5;
-  }
-
-  .carbon-show-edit-pod__transition-enter {
-    opacity: 0;
-  }
-
-  .carbon-show-edit-pod__transition-enter.carbon-show-edit-pod__transition-enter-active {
-    opacity: 1;
-    transition: all 300ms ease-in;
-  }
-
-  .carbon-show-edit-pod__transition-exit {
-    opacity: 0;
-    position: absolute;
-  }
-`;
-var _default = StyledPod;
-exports.default = _default;