carbon-react 119.10.0 → 119.10.1

package/esm/__internal__/input/input-presentation.style.js

@@ -2,29 +2,22 @@ import styled, { css } from "styled-components";
 import sizes from "./input-sizes.style";
 import StyledInput from "./input.style";
 export const StyledInputPresentationContainer = styled.div`
-  flex: 0 0 ${_ref => {
-  let {
-    inputWidth
-  } = _ref;
-  return inputWidth;
-}}%;
+  flex: 0 0 ${({
+  inputWidth
+}) => inputWidth}%;
   display: flex;
   position: relative;
-  max-width: ${_ref2 => {
-  let {
-    maxWidth
-  } = _ref2;
-  return maxWidth ? `${maxWidth}` : "100%";
-}};
+  max-width: ${({
+  maxWidth
+}) => maxWidth ? `${maxWidth}` : "100%"};
 `;
-function stylingForValidations(_ref3) {
-  let {
-    error,
-    warning,
-    info,
-    disabled,
-    validationRedesignOptIn
-  } = _ref3;
+function stylingForValidations({
+  error,
+  warning,
+  info,
+  disabled,
+  validationRedesignOptIn
+}) {
   let validationColor;
   if (disabled) {
     return "";
@@ -55,13 +48,11 @@ const InputPresentationStyle = styled.div`
   flex-wrap: wrap;
   width: 100%;
   margin: 0;
-  ${_ref4 => {
-  let {
-    size,
-    hasIcon,
-    align
-  } = _ref4;
-  return size && css`
+  ${({
+  size,
+  hasIcon,
+  align
+}) => size && css`
       min-height: ${sizes[size].height};
 
       ${StyledInput} {
@@ -69,52 +60,39 @@ const InputPresentationStyle = styled.div`
         ${hasIcon && align === "right" && "padding-left: 0;"}
         ${hasIcon && align === "left" && "padding-right: 0;"}
       }
-    `;
-}}
+    `}
 
-  ${_ref5 => {
-  let {
-    disabled
-  } = _ref5;
-  return disabled && css`
+  ${({
+  disabled
+}) => disabled && css`
       background: var(--colorsUtilityDisabled400);
       border-color: var(--colorsUtilityDisabled600);
       cursor: not-allowed;
-    `;
-}}
+    `}
 
-  ${_ref6 => {
-  let {
-    hasFocus
-  } = _ref6;
-  return hasFocus && css`
+  ${({
+  hasFocus
+}) => hasFocus && css`
       & {
         outline: 3px solid var(--colorsSemanticFocus500);
         z-index: 2;
       }
-    `;
-}}
+    `}
 
   ${stylingForValidations}
 
-  ${_ref7 => {
-  let {
-    readOnly
-  } = _ref7;
-  return readOnly && css`
+  ${({
+  readOnly
+}) => readOnly && css`
       background-color: var(--colorsUtilityReadOnly400);
       border-color: var(--colorsUtilityReadOnly600);
-    `;
-}}
+    `}
 
-  ${_ref8 => {
-  let {
-    align,
-    prefix
-  } = _ref8;
-  return align === "right" && `flex-direction: ${prefix ? "row" : "row-reverse"};
-  `;
-}}
+  ${({
+  align,
+  prefix
+}) => align === "right" && `flex-direction: ${prefix ? "row" : "row-reverse"};
+  `}
 
   input::-ms-clear {
     display: none;

package/esm/__internal__/input/input.component.js

@@ -24,29 +24,28 @@ function selectTextOnFocus(input) {
     }
   });
 }
-const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    align,
-    "aria-labelledby": ariaLabelledBy,
-    ariaDescribedBy,
-    placeholder,
-    disabled,
-    readOnly,
-    autoFocus,
-    // TODO: remove inputRef prop from this component (and props interface) when it has been removed from all exposed input components
-    inputRef,
-    onClick,
-    onChangeDeferred,
-    onChange,
-    onBlur,
-    onFocus,
-    deferTimeout,
-    type = "text",
-    id,
-    name,
-    validationIconId,
-    ...rest
-  } = _ref;
+const Input = /*#__PURE__*/React.forwardRef(({
+  align,
+  "aria-labelledby": ariaLabelledBy,
+  ariaDescribedBy,
+  placeholder,
+  disabled,
+  readOnly,
+  autoFocus,
+  // TODO: remove inputRef prop from this component (and props interface) when it has been removed from all exposed input components
+  inputRef,
+  onClick,
+  onChangeDeferred,
+  onChange,
+  onBlur,
+  onFocus,
+  deferTimeout,
+  type = "text",
+  id,
+  name,
+  validationIconId,
+  ...rest
+}, ref) => {
   const context = useContext(InputContext);
   const groupContext = useContext(InputGroupContext);
   const deferredTimeout = useRef(null);

package/esm/__internal__/input/input.style.js

@@ -16,36 +16,27 @@ const StyledInput = styled.input`
     -webkit-background-clip: text;
   }
 
-  ${_ref => {
-  let {
-    align
-  } = _ref;
-  return align && css`
+  ${({
+  align
+}) => align && css`
       text-align: ${align};
-    `;
-}}
+    `}
 
   &::placeholder {
     color: var(--colorsUtilityYin030);
   }
 
-  ${_ref2 => {
-  let {
-    disabled
-  } = _ref2;
-  return disabled && css`
+  ${({
+  disabled
+}) => disabled && css`
       color: var(--colorsUtilityYin030);
       cursor: not-allowed;
-    `;
-}}
+    `}
 
-  ${_ref3 => {
-  let {
-    readOnly
-  } = _ref3;
-  return readOnly && css`
+  ${({
+  readOnly
+}) => readOnly && css`
       color: var(--colorsActionMinorYin090);
-    `;
-}}
+    `}
 `;
 export default StyledInput;

package/esm/__internal__/input-behaviour/input-behaviour.component.js

@@ -2,10 +2,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import useInputBehaviour from "./useInputBehaviour";
 const InputContext = /*#__PURE__*/React.createContext({});
-const InputBehaviour = _ref => {
-  let {
-    children
-  } = _ref;
+const InputBehaviour = ({
+  children
+}) => {
   const contextValue = useInputBehaviour();
   return /*#__PURE__*/React.createElement(InputContext.Provider, {
     value: {

package/esm/__internal__/input-behaviour/input-group-behaviour.component.js

@@ -2,11 +2,10 @@ import React from "react";
 import PropTypes from "prop-types";
 import useInputBehaviour from "./useInputBehaviour";
 const InputGroupContext = /*#__PURE__*/React.createContext({});
-const InputGroupBehaviour = _ref => {
-  let {
-    children,
-    blockGroupBehaviour
-  } = _ref;
+const InputGroupBehaviour = ({
+  children,
+  blockGroupBehaviour
+}) => {
   const contextValue = useInputBehaviour(blockGroupBehaviour);
   return /*#__PURE__*/React.createElement(InputGroupContext.Provider, {
     value: contextValue

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -3,33 +3,31 @@ import PropTypes from "prop-types";
 import Icon from "../../components/icon";
 import InputIconToggleStyle from "./input-icon-toggle.style";
 import ValidationIcon from "../validations/validation-icon.component";
-const shouldDisplayValidationIcon = _ref => {
-  let {
-    error,
-    warning,
-    info
-  } = _ref;
+const shouldDisplayValidationIcon = ({
+  error,
+  warning,
+  info
+}) => {
   const validation = error || warning || info || null;
   return typeof validation === "string";
 };
-const InputIconToggle = _ref2 => {
-  let {
-    disabled,
-    readOnly,
-    size,
-    inputIcon: type,
-    onClick,
-    onFocus,
-    onBlur,
-    onMouseDown,
-    error,
-    warning,
-    info,
-    useValidationIcon,
-    align,
-    iconTabIndex,
-    validationIconId
-  } = _ref2;
+const InputIconToggle = ({
+  disabled,
+  readOnly,
+  size,
+  inputIcon: type,
+  onClick,
+  onFocus,
+  onBlur,
+  onMouseDown,
+  error,
+  warning,
+  info,
+  useValidationIcon,
+  align,
+  iconTabIndex,
+  validationIconId
+}) => {
   if (useValidationIcon && !disabled && shouldDisplayValidationIcon({
     error,
     warning,

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -1,32 +1,26 @@
 import styled, { css } from "styled-components";
 import sizes from "../input/input-sizes.style";
-const InputIconToggleStyle = styled.span.attrs(_ref => {
-  let {
-    onClick
-  } = _ref;
-  return {
-    onKeyDown: event => {
-      if (onClick && (event.key === " " || event.key === "Enter")) {
-        event.preventDefault();
-        return onClick(event);
-      }
-      return event;
+const InputIconToggleStyle = styled.span.attrs(({
+  onClick
+}) => ({
+  onKeyDown: event => {
+    if (onClick && (event.key === " " || event.key === "Enter")) {
+      event.preventDefault();
+      return onClick(event);
     }
-  };
-})`
+    return event;
+  }
+}))`
   align-items: center;
   cursor: pointer;
   display: flex;
   justify-content: center;
 
-  ${_ref2 => {
-  let {
-    size = "medium"
-  } = _ref2;
-  return css`
+  ${({
+  size = "medium"
+}) => css`
     width: ${sizes[size].height};
-  `;
-}}
+  `}
 
   &:focus {
     outline: solid 3px var(--colorsSemanticFocus500);

package/esm/__internal__/label/label.component.js

@@ -6,48 +6,45 @@ import StyledLabel, { StyledLabelContainer } from "./label.style";
 import ValidationIcon from "../validations/validation-icon.component";
 import StyledIconWrapper from "./icon-wrapper.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
-const shouldDisplayValidationIcon = _ref => {
-  let {
-    error,
-    warning,
-    info,
-    disabled
-  } = _ref;
+const shouldDisplayValidationIcon = ({
+  error,
+  warning,
+  info,
+  disabled
+}) => {
   const validation = error || warning || info;
   return disabled ? false : typeof validation === "string";
 };
-const tooltipPosition = _ref2 => {
-  let {
-    error,
-    warning,
-    info,
-    inline
-  } = _ref2;
+const tooltipPosition = ({
+  error,
+  warning,
+  info,
+  inline
+}) => {
   return (error || warning || info) && inline ? "top" : "right";
 };
-export const Label = _ref3 => {
-  let {
-    align = "right",
-    as = "label",
-    children,
-    disabled,
-    error,
-    help,
-    helpIcon,
-    htmlFor,
-    info,
-    inline,
-    isRequired,
-    labelId,
-    optional,
-    pr,
-    pl,
-    tooltipId,
-    useValidationIcon = true,
-    validationIconId,
-    warning,
-    width = 30
-  } = _ref3;
+export const Label = ({
+  align = "right",
+  as = "label",
+  children,
+  disabled,
+  error,
+  help,
+  helpIcon,
+  htmlFor,
+  info,
+  inline,
+  isRequired,
+  labelId,
+  optional,
+  pr,
+  pl,
+  tooltipId,
+  useValidationIcon = true,
+  validationIconId,
+  warning,
+  width = 30
+}) => {
   const [isFocused, setFocus] = useState(false);
   const {
     onMouseEnter,

package/esm/__internal__/label/label.style.js

@@ -4,28 +4,22 @@ const StyledLabel = styled.label`
   display: block;
   font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
 
-  ${_ref => {
-  let {
-    isRequired
-  } = _ref;
-  return isRequired && css`
+  ${({
+  isRequired
+}) => isRequired && css`
       ::after {
         content: "*";
         color: var(--colorsSemanticNegative500);
         font-weight: 700;
         margin-left: var(--spacing100);
       }
-    `;
-}}
+    `}
 
-  ${_ref2 => {
-  let {
-    disabled
-  } = _ref2;
-  return disabled && css`
+  ${({
+  disabled
+}) => disabled && css`
       color: var(--colorsUtilityYin030);
-    `;
-}}
+    `}
 `;
 const DEFAULT_CONTAINER_WIDTH = 30;
 export const StyledLabelContainer = styled.div`
@@ -33,15 +27,13 @@ export const StyledLabelContainer = styled.div`
   align-items: center;
   margin-bottom: 8px;
 
-  ${_ref3 => {
-  let {
-    align,
-    inline,
-    pr,
-    pl,
-    width
-  } = _ref3;
-  return inline && css`
+  ${({
+  align,
+  inline,
+  pr,
+  pl,
+  width
+}) => inline && css`
       box-sizing: border-box;
       margin-bottom: 0;
       ${pr && css`
@@ -52,20 +44,16 @@ export const StyledLabelContainer = styled.div`
       `};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
       width: ${width || DEFAULT_CONTAINER_WIDTH}%;
-    `;
-}}
+    `}
 
-  ${_ref4 => {
-  let {
-    optional
-  } = _ref4;
-  return optional && css`
+  ${({
+  optional
+}) => optional && css`
       ::after {
         content: "(optional)";
         font-weight: 350; //TODO: (tokens) use token var(--fontWeights400)
         margin-left: 4px;
       }
-    `;
-}}
+    `}
 `;
 export default StyledLabel;

package/esm/__internal__/popover/popover.component.js

@@ -9,17 +9,16 @@ import { ModalContext } from "../../components/modal/modal.component";
 const defaultMiddleware = [flip({
   fallbackStrategy: "initialPlacement"
 })];
-const Popover = _ref => {
-  let {
-    children,
-    placement,
-    disablePortal,
-    reference,
-    middleware = defaultMiddleware,
-    disableBackgroundUI,
-    isOpen = true,
-    animationFrame
-  } = _ref;
+const Popover = ({
+  children,
+  placement,
+  disablePortal,
+  reference,
+  middleware = defaultMiddleware,
+  disableBackgroundUI,
+  isOpen = true,
+  animationFrame
+}) => {
   const elementDOM = useRef(null);
   const {
     isInModal

package/esm/__internal__/popover/popover.style.js

@@ -6,22 +6,16 @@ export const StyledBackdrop = styled.div`
   position: fixed;
   right: 0;
   top: 0;
-  z-index: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.zIndex.popover;
-}};
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
   background: transparent;
 `;
 StyledBackdrop.defaultProps = {
   theme: baseTheme
 };
 export const StyledPopoverContent = styled.div`
-  ${_ref2 => {
-  let {
-    isOpen
-  } = _ref2;
-  return !isOpen && "display: none;";
-}}
+  ${({
+  isOpen
+}) => !isOpen && "display: none;"}
 `;

package/esm/__internal__/radio-button-mapper/radio-button-mapper.component.js

@@ -1,15 +1,14 @@
 import React, { useState, useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
-const RadioButtonMapper = _ref => {
-  let {
-    children,
-    name,
-    onBlur,
-    onChange,
-    onMouseDown,
-    onKeyDown,
-    value
-  } = _ref;
+const RadioButtonMapper = ({
+  children,
+  name,
+  onBlur,
+  onChange,
+  onMouseDown,
+  onKeyDown,
+  value
+}) => {
   const filteredChildren = useMemo(() => React.Children.toArray(children), [children]);
   const anyChecked = useMemo(() => {
     let result = false;

package/esm/__internal__/sticky-footer/sticky-footer.component.js

@@ -4,13 +4,12 @@ import PropTypes from "prop-types";
 import throttle from "lodash/throttle";
 import StyledStickyFooter from "./sticky-footer.style";
 const SCROLL_THROTTLE = 50;
-const StickyFooter = _ref => {
-  let {
-    children,
-    containerRef,
-    disableSticky,
-    ...rest
-  } = _ref;
+const StickyFooter = ({
+  children,
+  containerRef,
+  disableSticky,
+  ...rest
+}) => {
   const [isSticky, setIsSticky] = useState(true);
   const footerRef = useRef(null);
   const checkFooterPosition = useCallback(throttle(() => {

package/esm/__internal__/sticky-footer/sticky-footer.style.js

@@ -7,11 +7,9 @@ const StyledStickyFooter = styled.div`
   padding: var(--spacing200) var(--spacing400);
   box-sizing: border-box;
   width: 100%;
-  ${_ref => {
-  let {
-    sticky
-  } = _ref;
-  return sticky && css`
+  ${({
+  sticky
+}) => sticky && css`
       animation: ${FormButtonAnimation} 0.25s ease;
       position: sticky;
       bottom: 0;
@@ -19,7 +17,6 @@ const StyledStickyFooter = styled.div`
       background-color: var(--colorsActionMinorYang100);
       box-shadow: var(--boxShadow150);
       z-index: 1000;
-    `;
-}}
+    `}
 `;
 export default StyledStickyFooter;