carbon-react 111.12.3 → 111.12.5

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

@@ -10,6 +10,7 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import LocaleContext from "../../__internal__/i18n-context";
 import StyledPod from "./show-edit-pod.style";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
 const ShowEditPod = ({
   border = false,
   className,
@@ -40,41 +41,50 @@ const ShowEditPod = ({
   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, {
@@ -85,6 +95,7 @@ const ShowEditPod = ({
       onClick: onDelete
     }, label);
   };
+
   const editContent = () => /*#__PURE__*/React.createElement(Form, {
     onSubmit: onSaveEditForm,
     buttonAlignment: buttonAlign,
@@ -104,6 +115,7 @@ const ShowEditPod = ({
     rightSideButtons: onDelete ? deleteButton() : null,
     saving: saving
   }, editFields);
+
   const content = () => {
     if (isInEditMode) {
       return /*#__PURE__*/React.createElement(CSSTransition, {
@@ -119,6 +131,7 @@ const ShowEditPod = ({
         ref: editModeNodeRef
       }, editContent()));
     }
+
     return /*#__PURE__*/React.createElement(CSSTransition, {
       key: "2",
       classNames: transitionName,
@@ -132,6 +145,7 @@ const ShowEditPod = ({
       ref: showModeNodeRef
     }, children));
   };
+
   const universalProps = () => ({
     size: "small",
     tabIndex: "-1",
@@ -145,8 +159,8 @@ const ShowEditPod = ({
     ...rest,
     ...tagComponent("show-edit-pod", rest)
   });
-  const contentProps = () => ({
-    ...universalProps(),
+
+  const contentProps = () => ({ ...universalProps(),
     ...(!hideDeleteButtonInViewMode && {
       onDelete
     }),
@@ -154,56 +168,79 @@ const ShowEditPod = ({
       onEdit: handleEdit
     })
   });
-  const editingProps = () => ({
-    ...universalProps(),
+
+  const editingProps = () => ({ ...universalProps(),
     onKeyDown
   });
+
   const podProps = () => isInEditMode ? editingProps() : contentProps();
+
   return /*#__PURE__*/React.createElement(StyledPod, podProps(), /*#__PURE__*/React.createElement(TransitionGroup, null, content()));
 };
-ShowEditPod.propTypes = {
-  ...marginPropTypes,
+
+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
 };

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import SidebarHeaderStyle from "./sidebar-header.style";
+
 const SidebarHeader = ({
   children,
   id
@@ -8,6 +9,7 @@ const SidebarHeader = ({
   id: id,
   "data-component": "sidebar-header"
 }, children);
+
 SidebarHeader.propTypes = {
   "children": PropTypes.node,
   "id": PropTypes.string.isRequired

package/esm/components/sidebar/sidebar.component.js

@@ -1,4 +1,5 @@
 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); }
+
 import React, { useRef, useCallback, useContext } from "react";
 import PropTypes from "prop-types";
 import Modal from "../modal";
@@ -12,9 +13,7 @@ import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
-import TopModalContext from "../carbon-provider/top-modal-context";
-
-// TODO FE-5408 will investigate why React.RefObject<T> produces a failed prop type when current = null
+import TopModalContext from "../carbon-provider/top-modal-context"; // TODO FE-5408 will investigate why React.RefObject<T> produces a failed prop type when current = null
 
 export const SidebarContext = /*#__PURE__*/React.createContext({});
 const Sidebar = /*#__PURE__*/React.forwardRef(({
@@ -50,6 +49,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   const {
     topModal
   } = useContext(TopModalContext);
+
   const closeIcon = () => {
     if (!onCancel) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
@@ -60,6 +60,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
       type: "close"
     }));
   };
+
   const componentTags = {
     "data-component": "sidebar",
     "data-element": rest["data-element"],

package/esm/components/simple-color-picker/color-sample-box/color-sample-box.component.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import StyledColorSampleBox from "./color-sample-box.style";
 import StyledTickIcon from "../tick-icon/tick-icon.style";
+
 const ColorSampleBox = ({
   color,
   checked
@@ -14,12 +15,15 @@ const ColorSampleBox = ({
     type: "tick"
   }));
 };
+
 export const colorSampleBoxCheck = (props, propName, component) => {
   const color = props[propName],
-    hexRegex = /\b[0-9A-Fa-f]{6}\b/g;
+        hexRegex = /\b[0-9A-Fa-f]{6}\b/g;
+
   if (!color.match(hexRegex) && color !== "transparent") {
     return new Error(`Provide color in a six-digit hex format or 'transparent' in ${component}.`);
   }
+
   return null;
 };
 ColorSampleBox.propTypes = {

package/esm/components/simple-color-picker/simple-color/simple-color.component.js

@@ -1,4 +1,5 @@
 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); }
+
 import PropTypes from "prop-types";
 import React from "react";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
@@ -43,16 +44,22 @@ SimpleColor.defaultProps = {
 SimpleColor.propTypes = {
   /** the value of the color that is represented by this SimpleColor */
   value: PropTypes.string,
+
   /** the input name */
   name: PropTypes.string,
+
   /** called when the user selects or deselects this color option */
   onChange: PropTypes.func,
+
   /** A callback triggered when a color is selected. */
   onBlur: PropTypes.func,
+
   /** A callback triggered when a color is selected. */
   onMouseDown: PropTypes.func,
+
   /** determines if this color option is selected or unselected */
   checked: PropTypes.bool,
+
   /** [Legacy] Custom classname */
   className: PropTypes.string
 };

package/esm/components/simple-color-picker/simple-color-picker.component.js

@@ -1,4 +1,5 @@
 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); }
+
 import React, { useCallback, useState, useRef, useMemo, useEffect } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -12,6 +13,7 @@ import ValidationIcon from "../../__internal__/validations/validation-icon.compo
 import { InputGroupContext } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
 const SimpleColorPicker = props => {
   const {
     children,
@@ -44,24 +46,31 @@ const SimpleColorPicker = props => {
   const navigationGrid = filteredChildren.map((child, index) => {
     const allowUp = currentRow !== 1;
     let allowDown = false;
+
     if (currentRow + 1 === rowCount && blankSlots - itemsPerRow < 0) {
       allowDown = true;
       blankSlots += 1;
     } else if (currentRow + 1 !== rowCount && currentRow !== rowCount && rowCount > 1) {
       allowDown = true;
     }
+
     if (loopCounter === itemsPerRow) {
       loopCounter = 0;
       currentRow += 1;
     }
+
     let upItem;
+
     if (allowUp) {
       upItem = index - itemsPerRow;
     }
+
     let downItem;
+
     if (allowDown) {
       downItem = itemsPerRow + index;
     }
+
     const childProps = {
       ref: gridItemRefs[index],
       "data-up": allowUp,
@@ -77,10 +86,12 @@ const SimpleColorPicker = props => {
     if (onKeyDown) {
       onKeyDown(e);
     }
+
     const arrowKeys = [Events.isLeftKey(e), Events.isUpKey(e), Events.isRightKey(e), Events.isDownKey(e)];
     if (!arrowKeys.includes(true)) return;
     e.preventDefault();
     let itemIndex;
+
     if (Events.isUpKey(e)) {
       if (e.target.getAttribute("data-up") !== "true") return;
       itemIndex = e.target.getAttribute("data-item-up");
@@ -88,30 +99,36 @@ const SimpleColorPicker = props => {
       if (e.target.getAttribute("data-down") !== "true") return;
       itemIndex = e.target.getAttribute("data-item-down");
     }
+
     if (Events.isLeftKey(e) || Events.isRightKey(e)) {
       const position = element => {
         return e.target.getAttribute("value") === element.props.value;
       };
+
       if (Events.isLeftKey(e)) {
         itemIndex = navigationGrid.findIndex(position) - 1;
       } else {
         itemIndex = navigationGrid.findIndex(position) + 1;
       }
+
       if (itemIndex < 0) {
         itemIndex = navigationGrid.length - 1;
       } else if (itemIndex > navigationGrid.length - 1) {
         itemIndex = 0;
       }
     }
+
     const item = navigationGrid[itemIndex].ref.current;
     item.focus();
     item.click();
   }, [onKeyDown, navigationGrid]);
+
   const handleClickOutside = ev => {
     if (myRef.current && ev.target && !myRef.current.contains(ev.target)) {
       setIsBlurBlocked(false);
     }
   };
+
   useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", handleClickOutside);
@@ -120,31 +137,30 @@ const SimpleColorPicker = props => {
       document.removeEventListener("keydown", handleClickOutside);
     };
   });
+
   const handleOnBlur = ev => {
     ev.preventDefault();
+
     if (!blurBlocked && onBlur) {
       onBlur(ev);
     }
   };
+
   const handleOnMouseDown = ev => {
-    setIsBlurBlocked(true);
+    setIsBlurBlocked(true); // If the mousedown event occurred on the currently-focused <SimpleColor>
 
-    // If the mousedown event occurred on the currently-focused <SimpleColor>
     if (focusedElement !== null && focusedElement === ev.target) {
-      ev.preventDefault();
-
-      // If a different <SimpleColor> is currently focused
+      ev.preventDefault(); // If a different <SimpleColor> is currently focused
     } else if (focusedElement !== null) {
       ev.preventDefault();
       setIsBlurBlocked(false);
-      setFocusedElement(ev.target);
-
-      // If no <SimpleColor> is currently focused
+      setFocusedElement(ev.target); // If no <SimpleColor> is currently focused
     } else {
       setIsBlurBlocked(true);
       setFocusedElement(ev.target);
     }
   };
+
   const validationProps = {
     error,
     warning,
@@ -177,9 +193,11 @@ const SimpleColorPicker = props => {
     tooltipFlipOverrides: ["top", "bottom"]
   }))));
 };
+
 SimpleColorPicker.propTypes = {
   /** Filtered styled system margin props */
   ...marginPropTypes,
+
   /** The SimpleColor components to be rendered in the group */
   children: (props, propName, componentName) => {
     let error;
@@ -188,44 +206,59 @@ SimpleColorPicker.propTypes = {
       if (child === null) {
         return;
       }
+
       if (SimpleColor.displayName !== child.type.displayName) {
         error = new Error(`\`${componentName}\` only accepts children of type \`${SimpleColor.displayName}\`.`);
       }
     });
     return error;
   },
+
   /** Should the onBlur callback prop be initially blocked? */
   isBlurBlocked: PropTypes.bool,
+
   /** Indicate that error has occurred
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
   /** Indicate that warning has occurred
   Pass string to display icon, tooltip and orange border
   Pass true boolean to only display orange border */
   warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
   /** Indicate additional information
   Pass string to display icon, tooltip and blue border
   Pass true boolean to only display blue border */
   info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
   /** When true, validation icon will be placed on legend instead of being placed by the input */
   validationOnLegend: PropTypes.bool,
+
   /** The content for the RadioGroup Legend */
   legend: PropTypes.string.isRequired,
+
   /** The currently selected color. */
   value: PropTypes.string,
+
   /** The name to apply to the input. */
   name: PropTypes.string,
+
   /** A callback triggered when a color is selected. */
   onChange: PropTypes.func,
+
   /** A callback triggered when a color is selected. */
   onBlur: PropTypes.func,
+
   /** A callback triggered on key down. */
   onKeyDown: PropTypes.func,
+
   /** prop that sets max-width in css */
   maxWidth: PropTypes.string,
+
   /** prop that represents childWidth */
   childWidth: PropTypes.string,
+
   /** Flag to configure component as mandatory */
   required: PropTypes.bool
 };

package/esm/components/simple-color-picker/simple-color-picker.style.js

@@ -1,7 +1,9 @@
 import styled, { css } from "styled-components";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
 const BORDER_WIDTH = 2;
+
 const getRoundedMaxWidth = (maxWidth, childWidth) => Math.floor(maxWidth / childWidth) * childWidth;
+
 const StyledContent = styled.div`
   display: flex;
   align-items: center;

package/esm/components/simple-color-picker/tick-icon/tick-icon.style.js

@@ -1,17 +1,19 @@
 import styled, { css } from "styled-components";
 import Icon from "../../icon";
 import getRgbValues from "../../../style/utils/get-rgb-values";
+
 const getIconColor = color => {
   const rgbValues = getRgbValues(color);
-  const [r, g, b] = rgbValues;
-  // color contrast calculating formula as per W3 suggestions
+  const [r, g, b] = rgbValues; // color contrast calculating formula as per W3 suggestions
+
   const redMultiplier = 299,
-    greenMultiplier = 587,
-    blueMultiplier = 114;
+        greenMultiplier = 587,
+        blueMultiplier = 114;
   const contrast = (Math.round(r * redMultiplier) + Math.round(g * greenMultiplier) + Math.round(b * blueMultiplier)) / 1000;
   if (contrast < 128) return "var(--colorsUtilityYang100)";
   return "var(--colorsUtilityYin090)";
 };
+
 const StyledTickIcon = styled(Icon)`
   height: 22px;
   width: 22px;

package/esm/components/split-button/split-button.component.js

@@ -1,4 +1,5 @@
 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); }
+
 import React, { useContext, useCallback, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { ThemeContext } from "styled-components";
@@ -15,6 +16,7 @@ import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from
 import { baseTheme } from "../../style/themes";
 import useMenuKeyboardNavigation from "../../hooks/__internal__/useMenuKeyboardNavigation";
 const CONTENT_WIDTH_RATIO = 0.75;
+
 const SplitButton = ({
   align = "left",
   buttonType = "secondary",
@@ -43,22 +45,27 @@ const SplitButton = ({
     setShowAdditionalButtons(false);
   }, []);
   const handleKeyDown = useMenuKeyboardNavigation(toggleButton, buttonChildrenRefs, hideButtons);
+
   function showButtons() {
     setShowAdditionalButtons(true);
-
     /* istanbul ignore else */
+
     if (splitButtonNode.current) {
       setMinWidth(CONTENT_WIDTH_RATIO * splitButtonNode.current.getBoundingClientRect().width);
     }
   }
+
   function handleToggleButtonKeyDown(ev) {
     if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev)) {
       ev.preventDefault();
+
       if (!showAdditionalButtons) {
         showButtons();
       }
+
       setTimeout(() => {
         var _buttonChildrenRefs$, _buttonChildrenRefs$$;
+
         (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
       }, 0);
     } else if (Events.isEscKey(ev)) {
@@ -66,6 +73,7 @@ const SplitButton = ({
       ev.preventDefault();
     }
   }
+
   const mainButtonProps = {
     onMouseEnter: hideButtons,
     onFocus: hideButtons,
@@ -90,6 +98,7 @@ const SplitButton = ({
       onMouseEnter: showButtons
     })
   };
+
   function componentTags() {
     return {
       "data-component": "split-button",
@@ -97,6 +106,7 @@ const SplitButton = ({
       "data-role": dataRole
     };
   }
+
   function getIconColor() {
     const colorsMap = {
       primary: theme.colors.white,
@@ -104,6 +114,7 @@ const SplitButton = ({
     };
     return colorsMap[buttonType];
   }
+
   function renderMainButton() {
     return [/*#__PURE__*/React.createElement(Button, _extends({
       "data-element": "main-button",
@@ -125,6 +136,7 @@ const SplitButton = ({
       disabled: disabled
     }))];
   }
+
   function childrenWithProps() {
     const childArray = Array.isArray(children) ? children : [children];
     return childArray.filter(Boolean).map((child, index) => {
@@ -135,6 +147,7 @@ const SplitButton = ({
         tabIndex: -1,
         onClick: ev => {
           var _toggleButton$current;
+
           if (child.props.onClick) child.props.onClick(ev);
           hideButtons();
           (_toggleButton$current = toggleButton.current) === null || _toggleButton$current === void 0 ? void 0 : _toggleButton$current.focus();
@@ -143,6 +156,7 @@ const SplitButton = ({
       return /*#__PURE__*/React.cloneElement(child, childProps);
     });
   }
+
   function renderAdditionalButtons() {
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/React.createElement(Popover, {
@@ -157,6 +171,7 @@ const SplitButton = ({
       onKeyDown: handleKeyDown
     }, childrenWithProps()));
   }
+
   const handleClick = useClickAwayListener(hideButtons);
   return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
     "aria-haspopup": "true",
@@ -165,6 +180,7 @@ const SplitButton = ({
     ref: splitButtonNode
   }, componentTags(), filterStyledSystemMarginProps(rest)), renderMainButton(), renderAdditionalButtons());
 };
+
 SplitButton.propTypes = {
   "about": PropTypes.string,
   "accessKey": PropTypes.string,
@@ -227,6 +243,9 @@ SplitButton.propTypes = {
   "color": PropTypes.string,
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
+  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__emotion_styles": PropTypes.any.isRequired
+  }), PropTypes.string, PropTypes.bool]),
   "dangerouslySetInnerHTML": PropTypes.shape({
     "__html": PropTypes.string.isRequired
   }),