carbon-react 118.5.0 → 118.5.2

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

@@ -1,5 +1,4 @@
-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 _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, { useCallback, useState, useRef, useMemo, useEffect, useImperativeHandle } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -48,39 +47,32 @@ const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [blurBlocked, setIsBlurBlocked] = useState(isBlurBlocked);
   const [focusedElement, setFocusedElement] = useState(null);
   const itemsPerRow = Math.floor(+maxWidth / +childWidth);
-  const rowCount = Math.ceil((filteredChildren === null || filteredChildren === void 0 ? void 0 : filteredChildren.length) / itemsPerRow);
-  let blankSlots = itemsPerRow * rowCount - (filteredChildren === null || filteredChildren === void 0 ? void 0 : filteredChildren.length);
+  const rowCount = Math.ceil(filteredChildren?.length / itemsPerRow);
+  let blankSlots = itemsPerRow * rowCount - filteredChildren?.length;
   let currentRow = 1;
   let loopCounter = 1;
   const gridItemRefs = useRef([]);
   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: element => {
         gridItemRefs.current[index] = element;
@@ -106,13 +98,11 @@ const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
     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 = null;
     const target = e.target;
-
     if (Events.isUpKey(e)) {
       if (target.getAttribute("data-up") !== "true") return;
       itemIndex = +target.getAttribute("data-item-up");
@@ -120,36 +110,31 @@ const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
       if (target.getAttribute("data-down") !== "true") return;
       itemIndex = +target.getAttribute("data-item-down");
     }
-
     if (Events.isLeftKey(e) || Events.isRightKey(e)) {
       if (Events.isLeftKey(e)) {
         itemIndex = getElementPosition(target) - 1;
       } else {
         itemIndex = getElementPosition(target) + 1;
       }
-
       if (itemIndex < 0) {
         itemIndex = navigationGrid.length - 1;
       } else if (itemIndex > navigationGrid.length - 1) {
         itemIndex = 0;
       }
     }
-    /* istanbul ignore else */
-
 
+    /* istanbul ignore else */
     if (itemIndex !== null) {
       const item = gridItemRefs.current[itemIndex];
-      item === null || item === void 0 ? void 0 : item.focus();
-      item === null || item === void 0 ? void 0 : item.click();
+      item?.focus();
+      item?.click();
     }
   }, [onKeyDown, navigationGrid, getElementPosition]);
-
   const handleClickOutside = ev => {
     if (internalRef.current && ev.target && !internalRef.current.contains(ev.target)) {
       setIsBlurBlocked(false);
     }
   };
-
   useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", handleClickOutside);
@@ -158,62 +143,64 @@ const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
       document.removeEventListener("keydown", handleClickOutside);
     };
   });
-
   const handleOnBlur = ev => {
     ev.preventDefault();
-
     if (!blurBlocked && onBlur) {
       onBlur(ev);
     }
   };
-
   const handleOnMouseDown = ev => {
-    setIsBlurBlocked(true); // If the mousedown event occurred on the currently-focused <SimpleColor>
+    setIsBlurBlocked(true);
 
+    // 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,
     info
   };
-
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-
   return /*#__PURE__*/React.createElement(Fieldset, _extends({
     role: "radiogroup",
     legend: legend,
     isRequired: required
-  }, validationOnLegend && validationProps, tagComponent("simple-color-picker", props), filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledContent, null, /*#__PURE__*/React.createElement(InputGroupContext.Consumer, null, ({
-    onMouseEnter,
-    onMouseLeave
-  }) => /*#__PURE__*/React.createElement(StyledColorOptions, _extends({
-    maxWidth: maxWidth,
-    childWidth: childWidth,
-    ref: internalRef,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, validationProps), /*#__PURE__*/React.createElement(RadioButtonMapper, {
-    name: name,
-    value: value,
-    onChange: onChange,
-    onMouseDown: handleOnMouseDown,
-    onKeyDown: onKeyDownHandler,
-    onBlur: handleOnBlur
-  }, navigationGrid))), !validationOnLegend && /*#__PURE__*/React.createElement(ValidationIcon, _extends({}, validationProps, {
+  }, validationOnLegend && validationProps, tagComponent("simple-color-picker", props), filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledContent, null, /*#__PURE__*/React.createElement(InputGroupContext.Consumer, null, _ref => {
+    let {
+      onMouseEnter,
+      onMouseLeave
+    } = _ref;
+    return /*#__PURE__*/React.createElement(StyledColorOptions, _extends({
+      maxWidth: maxWidth,
+      childWidth: childWidth,
+      ref: internalRef,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    }, validationProps), /*#__PURE__*/React.createElement(RadioButtonMapper, {
+      name: name,
+      value: value,
+      onChange: onChange,
+      onMouseDown: handleOnMouseDown,
+      onKeyDown: onKeyDownHandler,
+      onBlur: handleOnBlur
+    }, navigationGrid));
+  }), !validationOnLegend && /*#__PURE__*/React.createElement(ValidationIcon, _extends({}, validationProps, {
     tooltipFlipOverrides: ["top", "bottom"]
   }))));
 });

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

@@ -1,9 +1,7 @@
 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;
@@ -13,10 +11,13 @@ const StyledContent = styled.div`
   }
 `;
 const StyledColorOptions = styled.div`
-  max-width: ${({
-  maxWidth,
-  childWidth
-}) => getRoundedMaxWidth(maxWidth, childWidth)}px;
+  max-width: ${_ref => {
+  let {
+    maxWidth,
+    childWidth
+  } = _ref;
+  return getRoundedMaxWidth(maxWidth, childWidth);
+}}px;
 
   padding: 0;
   display: flex;
@@ -24,11 +25,12 @@ const StyledColorOptions = styled.div`
   border-left: ${BORDER_WIDTH}px solid transparent;
   border-top: ${BORDER_WIDTH}px solid transparent;
 
-  ${({
-  error,
-  info,
-  warning
-}) => {
+  ${_ref2 => {
+  let {
+    error,
+    info,
+    warning
+  } = _ref2;
   if (error) return css`
         outline: var(--borderWidth200) solid var(--colorsSemanticNegative500);
       `;

package/esm/components/split-button/split-button-children.style.js

@@ -28,11 +28,13 @@ export const borderRadiusStyling = `
 `;
 const StyledSplitButtonChildrenContainer = styled.div`
   border-radius: var(--borderRadius100);
-  ${({
-  theme,
-  align,
-  minWidth
-}) => css`
+  ${_ref => {
+  let {
+    theme,
+    align,
+    minWidth
+  } = _ref;
+  return css`
     background-color: var(--colorsActionMajorYang100);
     min-width: ${minWidth}px;
     white-space: nowrap;
@@ -53,7 +55,8 @@ const StyledSplitButtonChildrenContainer = styled.div`
         margin-top: 3px;
       }
     }
-  `}
+  `;
+}}
 `;
 StyledSplitButtonChildrenContainer.defaultProps = {
   theme: BaseTheme

package/esm/components/split-button/split-button-toggle.style.js

@@ -7,12 +7,14 @@ const horizontalPaddingSizes = {
   large: 14
 };
 const StyledSplitButtonToggle = styled(StyledButton)`
-  ${({
-  buttonType,
-  disabled,
-  displayed,
-  size
-}) => css`
+  ${_ref => {
+  let {
+    buttonType,
+    disabled,
+    displayed,
+    size
+  } = _ref;
+  return css`
     border-top-left-radius: var(--borderRadius000);
     border-bottom-left-radius: var(--borderRadius000);
 
@@ -67,6 +69,7 @@ const StyledSplitButtonToggle = styled(StyledButton)`
         color: var(--colorsActionMajorYang100);
       }
     }
-  `}
+  `;
+}}
 `;
 export default StyledSplitButtonToggle;

package/esm/components/split-button/split-button.component.d.ts

@@ -25,5 +25,5 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
     /** The text to be displayed in the SplitButton. */
     text: string;
 }
-export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, ...rest }: SplitButtonProps) => JSX.Element;
+export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, ...rest }: SplitButtonProps) => React.JSX.Element;
 export default SplitButton;