carbon-react 119.10.0 → 119.10.2

package/esm/components/draggable/draggable-container.component.js

@@ -7,12 +7,11 @@ import invariant from "invariant";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import DraggableItem from "./draggable-item.component";
 import DropTarget from "./internal/drop-target.component";
-const DraggableContainer = _ref => {
-  let {
-    children,
-    getOrder,
-    ...rest
-  } = _ref;
+const DraggableContainer = ({
+  children,
+  getOrder,
+  ...rest
+}) => {
   const [draggableItems, setDraggableItems] = useState(React.Children.toArray(children));
   const hasProperChildren = useMemo(() => React.Children.toArray(children).every(child => /*#__PURE__*/React.isValidElement(child) && child.type.displayName === DraggableItem.displayName), [children]);
 

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

@@ -4,15 +4,14 @@ import PropTypes from "prop-types";
 import { useDrop, useDrag } from "react-dnd";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
 import { StyledDraggableItem, StyledIcon } from "./draggable-item.style";
-const DraggableItem = _ref => {
-  let {
-    id,
-    findItem,
-    moveItem,
-    children,
-    py = 1,
-    ...rest
-  } = _ref;
+const DraggableItem = ({
+  id,
+  findItem,
+  moveItem,
+  children,
+  py = 1,
+  ...rest
+}) => {
   let originalIndex;
   // istanbul ignore else
   if (findItem) {

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

@@ -12,12 +12,9 @@ const StyledDraggableItem = styled.div`
   ${padding}
   cursor: move;
 
-  opacity: ${_ref => {
-  let {
-    isDragging
-  } = _ref;
-  return isDragging ? "0" : "1";
-}};
+  opacity: ${({
+  isDragging
+}) => isDragging ? "0" : "1"};
 `;
 const StyledIcon = styled(Icon)`
   margin-left: auto;

package/esm/components/draggable/internal/drop-target.component.js

@@ -3,12 +3,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useDrop } from "react-dnd";
 import { StyledDraggableContainer } from "../draggable-item.style";
-const DropTarget = _ref => {
-  let {
-    children,
-    getOrder,
-    ...rest
-  } = _ref;
+const DropTarget = ({
+  children,
+  getOrder,
+  ...rest
+}) => {
   const [, drop] = useDrop({
     accept: "draggableItem",
     drop(item) {

package/esm/components/drawer/drawer.component.js

@@ -8,24 +8,23 @@ import Icon from "../icon";
 import { StyledSidebarHeader, StyledDrawerWrapper, StyledDrawerContent, StyledSidebarToggleButton, StyledDrawerChildren, StyledDrawerSidebar, StyledSidebarTitle } from "./drawer.style";
 import StickyFooter from "../../__internal__/sticky-footer";
 const DrawerSidebarContext = /*#__PURE__*/React.createContext({});
-export const Drawer = _ref => {
-  let {
-    defaultExpanded = true,
-    expanded,
-    onChange,
-    children,
-    expandedWidth = "40%",
-    sidebar,
-    animationDuration = "400ms",
-    backgroundColor,
-    title,
-    footer,
-    showControls,
-    height = "100%",
-    stickyHeader,
-    stickyFooter,
-    ...rest
-  } = _ref;
+export const Drawer = ({
+  defaultExpanded = true,
+  expanded,
+  onChange,
+  children,
+  expandedWidth = "40%",
+  sidebar,
+  animationDuration = "400ms",
+  backgroundColor,
+  title,
+  footer,
+  showControls,
+  height = "100%",
+  stickyHeader,
+  stickyFooter,
+  ...rest
+}) => {
   const drawerSidebarContentRef = useRef(null);
   const scrollableContentRef = useRef(null);
   const isControlled = useRef(expanded !== undefined);

package/esm/components/drawer/drawer.style.js

@@ -4,19 +4,16 @@ import Box from "../box";
 import StyledStickyFooter from "../../__internal__/sticky-footer/sticky-footer.style";
 const defaultExpandedWidth = "var(--sizing500)";
 const StyledSidebarHeader = styled.div`
-  ${_ref => {
-  let {
-    isExpanded
-  } = _ref;
-  return css`
+  ${({
+  isExpanded
+}) => css`
     position: sticky;
     top: 0;
 
     ${isExpanded && css`
       border-bottom: var(--sizing010) solid #ccd6db;
     `}
-  `;
-}}
+  `}
 `;
 const StyledSidebarTitle = styled.div`
   white-space: nowrap;
@@ -28,12 +25,10 @@ const StyledDrawerChildren = styled.div`
   overflow: auto;
 `;
 const StyledDrawerSidebar = styled(Box)`
-  ${_ref2 => {
-  let {
-    hasControls,
-    isExpanded
-  } = _ref2;
-  return css`
+  ${({
+  hasControls,
+  isExpanded
+}) => css`
       ${!isExpanded && css`
         display: none;
         opacity: 0;
@@ -53,8 +48,7 @@ const StyledDrawerSidebar = styled(Box)`
           `}
         }
       `}
-    `;
-}}
+    `}
 
   &::-webkit-scrollbar {
     width: 12px;
@@ -103,24 +97,18 @@ const StyledDrawerContent = styled.div`
   position: relative;
   overflow: auto;
 
-  ${_ref3 => {
-  let {
-    backgroundColor
-  } = _ref3;
-  return css`
+  ${({
+  backgroundColor
+}) => css`
     background-color: ${backgroundColor || "var(--colorsUtilityMajor040)"};
     border-right: 1px solid ${backgroundColor || "var(--colorsUtilityMajor075)"};
-  `;
-}};
+  `};
 
   &.open {
     min-width: 52px;
-    width: ${_ref4 => {
-  let {
-    expandedWidth
-  } = _ref4;
-  return expandedWidth;
-}};
+    width: ${({
+  expandedWidth
+}) => expandedWidth};
 
     ${StyledDrawerSidebar}, ${StyledSidebarTitle} {
       display: block;
@@ -129,25 +117,19 @@ const StyledDrawerContent = styled.div`
   }
 
   &.opening {
-    animation: ${_ref5 => {
-  let {
-    animationDuration,
-    expandedWidth
-  } = _ref5;
-  return css`
+    animation: ${({
+  animationDuration,
+  expandedWidth
+}) => css`
         ${drawerOpen(expandedWidth)} ${animationDuration}
-      `;
-}}
+      `}
       ease-in-out;
 
     ${StyledDrawerSidebar}, ${StyledSidebarTitle} {
       animation: ${sidebarVisible}
-        ${_ref6 => {
-  let {
-    animationDuration
-  } = _ref6;
-  return animationDuration;
-}} ease-in-out;
+        ${({
+  animationDuration
+}) => animationDuration} ease-in-out;
     }
   }
 
@@ -160,37 +142,29 @@ const StyledDrawerContent = styled.div`
   }
 
   &.closing {
-    animation: ${_ref7 => {
-  let {
-    animationDuration,
-    expandedWidth
-  } = _ref7;
-  return css`
+    animation: ${({
+  animationDuration,
+  expandedWidth
+}) => css`
         ${drawerClose(expandedWidth)} ${animationDuration}
-      `;
-}}
+      `}
       ease-in-out;
 
     ${StyledDrawerSidebar}, ${StyledSidebarTitle}, ${StyledStickyFooter} {
       animation: ${sidebarHidden}
-        ${_ref8 => {
-  let {
-    animationDuration
-  } = _ref8;
-  return animationDuration;
-}} ease-in-out;
+        ${({
+  animationDuration
+}) => animationDuration} ease-in-out;
     }
   }
 `;
 const StyledSidebarToggleButton = styled.button.attrs({
   type: "button"
 })`
-  ${_ref9 => {
-  let {
-    animationDuration,
-    isExpanded
-  } = _ref9;
-  return css`
+  ${({
+  animationDuration,
+  isExpanded
+}) => css`
     position: absolute;
     top: var(--spacing300);
     right: 8px;
@@ -219,16 +193,12 @@ const StyledSidebarToggleButton = styled.button.attrs({
       transform: scaleX(-1);
       animation: ${buttonOpen} ${animationDuration} ease-in-out;
     `}
-  `;
-}}
+  `}
 `;
 const StyledDrawerWrapper = styled.div`
   display: flex;
-  height: ${_ref10 => {
-  let {
-    height
-  } = _ref10;
-  return height;
-}};
+  height: ${({
+  height
+}) => height};
 `;
 export { StyledSidebarHeader, StyledDrawerWrapper, StyledDrawerContent, StyledDrawerChildren, StyledDrawerSidebar, StyledSidebarTitle, StyledSidebarToggleButton };

package/esm/components/duelling-picklist/duelling-picklist.component.js

@@ -5,16 +5,15 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import { StyledDuellingPicklistOverlay, StyledDuellingPicklist, StyledLabelContainer, StyledLabel, StyledControlsContainer, StyledControl } from "./duelling-picklist.style";
 import { Picklist } from "./picklist/picklist.component";
 import FocusContext from "./duelling-picklist.context";
-export const DuellingPicklist = _ref => {
-  let {
-    children,
-    disabled,
-    leftControls,
-    rightControls,
-    leftLabel,
-    rightLabel,
-    ...rest
-  } = _ref;
+export const DuellingPicklist = ({
+  children,
+  disabled,
+  leftControls,
+  rightControls,
+  leftLabel,
+  rightLabel,
+  ...rest
+}) => {
   const shouldDisplayLabels = leftLabel || rightLabel;
   const shouldDisplayControls = leftControls || rightControls;
   const [elementToFocus, setElementToFocus] = useState({});

package/esm/components/duelling-picklist/duelling-picklist.style.js

@@ -6,16 +6,13 @@ const StyledDuellingPicklistOverlay = styled.div`
 
   transition: opacity 0.3s;
 
-  ${_ref => {
-  let {
-    disabled
-  } = _ref;
-  return disabled && css`
+  ${({
+  disabled
+}) => disabled && css`
       opacity: 0.2;
       pointer-events: none;
       user-select: none;
-    `;
-}}
+    `}
 `;
 const StyledDuellingPicklist = styled.div`
   display: flex;

package/esm/components/duelling-picklist/picklist/picklist.component.js

@@ -5,13 +5,12 @@ import { StyledPicklist, StyledEmptyContainer } from "./picklist.style";
 import FocusContext from "../duelling-picklist.context";
 import Events from "../../../__internal__/utils/helpers/events";
 import PicklistGroup from "../picklist-group/picklist-group.component";
-export const Picklist = _ref => {
-  let {
-    disabled,
-    children,
-    placeholder,
-    index
-  } = _ref;
+export const Picklist = ({
+  disabled,
+  children,
+  placeholder,
+  index
+}) => {
   const {
     elementToFocus,
     setElementToFocus

package/esm/components/duelling-picklist/picklist-group/picklist-group.component.js

@@ -5,17 +5,16 @@ import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { StyledGroupWrapper, StyledPicklistGroupUl, StyledPicklistGroup, StyledGroupButton } from "./picklist-group.style";
 import FocusContext from "../duelling-picklist.context";
 import Events from "../../../__internal__/utils/helpers/events";
-const PicklistGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    title,
-    children,
-    type,
-    onChange,
-    index,
-    listIndex,
-    isLastGroup,
-    ...transitionGroupProps
-  } = _ref;
+const PicklistGroup = /*#__PURE__*/React.forwardRef(({
+  title,
+  children,
+  type,
+  onChange,
+  index,
+  listIndex,
+  isLastGroup,
+  ...transitionGroupProps
+}, ref) => {
   const {
     setElementToFocus,
     elementToFocus

package/esm/components/duelling-picklist/picklist-group/picklist-group.style.js

@@ -2,12 +2,10 @@ import styled, { css } from "styled-components";
 import Button from "../../button";
 import { StyledButton } from "../picklist-item/picklist-item.style";
 const StyledGroupWrapper = styled.li`
-  ${_ref => {
-  let {
-    highlighted,
-    type
-  } = _ref;
-  return css`
+  ${({
+  highlighted,
+  type
+}) => css`
     &:not(:first-of-type) {
       margin-top: 16px;
     }
@@ -16,8 +14,7 @@ const StyledGroupWrapper = styled.li`
       ${StyledButton} {
         background: ${type === "add" ? "var(--colorsActionMajor600)" : "var(--colorsSemanticNegative600)"}
     `}
-  `;
-}}
+  `}
 `;
 const StyledPicklistGroupUl = styled.ul`
   padding: 0;
@@ -29,11 +26,9 @@ const StyledPicklistGroup = styled.li`
   margin-bottom: 4px;
 `;
 const StyledGroupButton = styled(Button)`
-  ${_ref2 => {
-  let {
-    iconType
-  } = _ref2;
-  return css`
+  ${({
+  iconType
+}) => css`
     padding: 0;
     margin-right: 0;
     margin-left: auto;
@@ -46,7 +41,6 @@ const StyledGroupButton = styled(Button)`
         color: var(--colorsActionMajorYang100);
       }
       background: ${iconType === "add" ? "var(--colorsActionMajor600)" : "var(--colorsSemanticNegative600)"}
-  `;
-}}
+  `}
 `;
 export { StyledGroupWrapper, StyledPicklistGroupUl, StyledPicklistGroup, StyledGroupButton };

package/esm/components/duelling-picklist/picklist-item/picklist-item.component.js

@@ -5,21 +5,20 @@ import { CSSTransition } from "react-transition-group";
 import { StyledPicklistItem, StyledButton, StyledLockIcon } from "./picklist-item.style";
 import FocusContext from "../duelling-picklist.context";
 import Events from "../../../__internal__/utils/helpers/events";
-const PicklistItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    type,
-    onChange,
-    item,
-    locked,
-    tooltipMessage = "This item is locked and can not be moved",
-    index,
-    listIndex,
-    groupIndex,
-    isLastGroup,
-    isLastItem,
-    ...transitionGroupProps
-  } = _ref;
+const PicklistItem = /*#__PURE__*/React.forwardRef(({
+  children,
+  type,
+  onChange,
+  item,
+  locked,
+  tooltipMessage = "This item is locked and can not be moved",
+  index,
+  listIndex,
+  groupIndex,
+  isLastGroup,
+  isLastItem,
+  ...transitionGroupProps
+}, ref) => {
   const {
     setElementToFocus
   } = useContext(FocusContext);

package/esm/components/duelling-picklist/picklist-item/picklist-item.style.js

@@ -4,11 +4,9 @@ import Icon from "../../icon";
 import StyledIcon from "../../icon/icon.style";
 const StyledPicklistItem = styled.li`
   border-radius: var(--borderRadius100);
-  ${_ref => {
-  let {
-    locked
-  } = _ref;
-  return css`
+  ${({
+  locked
+}) => css`
     display: flex;
     align-items: center;
     width: 100%;
@@ -31,8 +29,7 @@ const StyledPicklistItem = styled.li`
     & + & {
       margin-top: 8px;
     }
-  `;
-}}
+  `}
 `;
 const StyledButton = styled(Button)`
   border-bottom-right-radius: var(--borderRadius100);
@@ -54,11 +51,9 @@ const StyledButton = styled(Button)`
     border-top-left-radius: var(--borderRadius000);
   }
 
-  ${_ref2 => {
-  let {
-    iconType
-  } = _ref2;
-  return css`
+  ${({
+  iconType
+}) => css`
     padding: 0;
     margin-right: 0;
     margin-left: auto;
@@ -67,8 +62,7 @@ const StyledButton = styled(Button)`
 
     &:focus {
       background: ${iconType === "add" ? "var(--colorsActionMajor600)" : "var(--colorsSemanticNegative600)"};
-  `;
-}}
+  `}
 `;
 const StyledLockIcon = styled(Icon)`
   margin-right: 0;

package/esm/components/duelling-picklist/picklist-placeholder/picklist-placeholder.component.js

@@ -1,12 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { StyledPicklistPlaceholder } from "../duelling-picklist.style";
-export const PicklistPlaceholder = _ref => {
-  let {
-    text
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledPicklistPlaceholder, {
-    "data-element": "picklist-placeholder"
-  }, text);
-};
+export const PicklistPlaceholder = ({
+  text
+}) => /*#__PURE__*/React.createElement(StyledPicklistPlaceholder, {
+  "data-element": "picklist-placeholder"
+}, text);
 export default PicklistPlaceholder;

package/esm/components/fieldset/fieldset.component.js

@@ -6,13 +6,12 @@ import { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle } from "./fie
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
-export const Fieldset = _ref => {
-  let {
-    children,
-    inline = false,
-    legend,
-    ...rest
-  } = _ref;
+export const Fieldset = ({
+  children,
+  inline = false,
+  legend,
+  ...rest
+}) => {
   const getLegend = () => {
     if (!legend) return null;
     return /*#__PURE__*/React.createElement(LegendContainerStyle, {

package/esm/components/fieldset/fieldset.style.js

@@ -25,15 +25,12 @@ FieldsetStyle.defaultProps = {
   theme: baseTheme
 };
 const LegendContainerStyle = styled.div`
-  ${_ref => {
-  let {
-    inline
-  } = _ref;
-  return inline && `
+  ${({
+  inline
+}) => inline && `
   margin-right: 32px;
   height: 34px !important;
-  `;
-}}
+  `}
   display: flex;
   align-items: center;
   margin-bottom: 32px;
@@ -50,11 +47,8 @@ const LegendContainerStyle = styled.div`
   }
 `;
 const FieldsetContentStyle = styled.div`
-  ${_ref2 => {
-  let {
-    inline
-  } = _ref2;
-  return inline && "display: flex;";
-}}
+  ${({
+  inline
+}) => inline && "display: flex;"}
 `;
 export { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle };

package/esm/components/flat-table/flat-table-body/flat-table-body.component.js

@@ -1,11 +1,10 @@
 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 from "react";
 import PropTypes from "prop-types";
-const FlatTableBody = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...rest
-  } = _ref;
+const FlatTableBody = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
   return /*#__PURE__*/React.createElement("tbody", _extends({
     ref: ref
   }, rest), children);

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -6,12 +6,11 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import StyledIcon from "../../icon/icon.style";
 import StyledFlatTableBodyDraggable from "./flat-table-body-draggable.style";
 import FlatTableCell from "../flat-table-cell/flat-table-cell.component";
-const DropTarget = _ref => {
-  let {
-    children,
-    getOrder,
-    ...rest
-  } = _ref;
+const DropTarget = ({
+  children,
+  getOrder,
+  ...rest
+}) => {
   const [isDragging, setIsDragging] = useState(false);
   const [, drop] = useDrop({
     accept: "flatTableRow",
@@ -29,12 +28,11 @@ const DropTarget = _ref => {
     isDragging: isDragging
   }, rest), children);
 };
-export const FlatTableBodyDraggable = _ref2 => {
-  let {
-    children,
-    getOrder,
-    ...rest
-  } = _ref2;
+export const FlatTableBodyDraggable = ({
+  children,
+  getOrder,
+  ...rest
+}) => {
   const [draggableItems, setDraggableItems] = useState(React.Children.toArray(children));
   const isFirstRender = useRef(true);
   useEffect(() => {