carbon-react 119.10.0 → 119.10.2

package/esm/components/preview/__internal__/preview-placeholder.component.js

@@ -3,14 +3,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import { StyledPreviewPlaceholder } from "./preview-placeholder.style";
-const PreviewPlaceholder = _ref => {
-  let {
-    height,
-    index,
-    lines,
-    width,
-    ...props
-  } = _ref;
+const PreviewPlaceholder = ({
+  height,
+  index,
+  lines,
+  width,
+  ...props
+}) => {
   const isLastLine = lines > 1 && lines === index;
   return /*#__PURE__*/React.createElement(StyledPreviewPlaceholder, _extends({
     height: height,

package/esm/components/preview/__internal__/preview-placeholder.style.js

@@ -8,19 +8,13 @@ export const StyledPreviewPlaceholder = styled.span`
   animation: ${shimmer} 2s ease infinite;
   background: var(--colorsUtilityMajor150);
   display: block;
-  height: ${_ref => {
-  let {
-    height
-  } = _ref;
-  return height || "15px";
-}};
+  height: ${({
+  height
+}) => height || "15px"};
   opacity: 0.6;
-  width: ${_ref2 => {
-  let {
-    width
-  } = _ref2;
-  return width || "100%";
-}};
+  width: ${({
+  width
+}) => width || "100%"};
 
   & + & {
     margin-top: 3px;

package/esm/components/preview/preview.component.js

@@ -4,13 +4,12 @@ import PropTypes from "prop-types";
 import PreviewPlaceholder from "./__internal__/preview-placeholder.component";
 import { StyledPreview } from "./preview.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-export const Preview = _ref => {
-  let {
-    children,
-    loading,
-    lines = 1,
-    ...props
-  } = _ref;
+export const Preview = ({
+  children,
+  loading,
+  lines = 1,
+  ...props
+}) => {
   const marginProps = filterStyledSystemMarginProps(props);
   const hasPlaceholder = loading === undefined ? !children : loading;
   if (hasPlaceholder) {

package/esm/components/profile/profile.component.js

@@ -10,16 +10,15 @@ function acronymize(str) {
   if (!matches) return "";
   return matches.join("");
 }
-export const Profile = _ref => {
-  let {
-    src,
-    className,
-    initials,
-    name,
-    size,
-    email,
-    ...props
-  } = _ref;
+export const Profile = ({
+  src,
+  className,
+  initials,
+  name,
+  size,
+  email,
+  ...props
+}) => {
   const getInitials = () => {
     if (initials) return initials;
     return acronymize(name);

package/esm/components/profile/profile.style.js

@@ -6,55 +6,37 @@ import profileConfigSizes from "./profile.config";
 const ProfileNameStyle = styled.span`
   font-weight: bold;
   display: block;
-  font-size: ${_ref => {
-  let {
-    size = "M"
-  } = _ref;
-  return profileConfigSizes[size].nameSize;
-}};
+  font-size: ${({
+  size = "M"
+}) => profileConfigSizes[size].nameSize};
 `;
 const ProfileEmailStyle = styled.span`
-  font-size: ${_ref2 => {
-  let {
-    size = "M"
-  } = _ref2;
-  return profileConfigSizes[size].emailSize;
-}};
+  font-size: ${({
+  size = "M"
+}) => profileConfigSizes[size].emailSize};
 `;
 const ProfileStyle = styled.div`
   white-space: nowrap;
   color: var(--colorsUtilityYin090);
-  display: ${_ref3 => {
-  let {
-    hasSrc
-  } = _ref3;
-  return hasSrc ? "flex" : "";
-}};
+  display: ${({
+  hasSrc
+}) => hasSrc ? "flex" : ""};
 
   ${margin}
 `;
 const ProfileDetailsStyle = styled.div`
   vertical-align: middle;
   display: inline-block;
-  margin-top: ${_ref4 => {
-  let {
-    hasSrc,
-    size = "M"
-  } = _ref4;
-  return hasSrc ? profileConfigSizes[size].marginTop : "";
-}};
-  line-height: ${_ref5 => {
-  let {
-    size = "M"
-  } = _ref5;
-  return profileConfigSizes[size].lineHeight;
-}};
-  margin-left: ${_ref6 => {
-  let {
-    size = "M"
-  } = _ref6;
-  return profileConfigSizes[size].marginLeft;
-}};
+  margin-top: ${({
+  hasSrc,
+  size = "M"
+}) => hasSrc ? profileConfigSizes[size].marginTop : ""};
+  line-height: ${({
+  size = "M"
+}) => profileConfigSizes[size].lineHeight};
+  margin-left: ${({
+  size = "M"
+}) => profileConfigSizes[size].marginLeft};
 `;
 const ProfileAvatarStyle = styled(Portrait)`
   display: inline-block;

package/esm/components/progress-tracker/progress-tracker.component.js

@@ -5,26 +5,25 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue, StyledDescription } from "./progress-tracker.style";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
-const ProgressTracker = _ref => {
-  let {
-    "aria-label": ariaLabel = "progress tracker",
-    "aria-describedby": ariaDescribedBy,
-    "aria-valuenow": ariaValueNow,
-    "aria-valuemin": ariaValueMin = 0,
-    "aria-valuemax": ariaValueMax = 100,
-    "aria-valuetext": ariaValueText,
-    size = "medium",
-    length = "256px",
-    error = false,
-    progress = 0,
-    description,
-    showDefaultLabels = false,
-    currentProgressLabel,
-    customValuePreposition,
-    maxProgressLabel,
-    labelsPosition,
-    ...rest
-  } = _ref;
+const ProgressTracker = ({
+  "aria-label": ariaLabel = "progress tracker",
+  "aria-describedby": ariaDescribedBy,
+  "aria-valuenow": ariaValueNow,
+  "aria-valuemin": ariaValueMin = 0,
+  "aria-valuemax": ariaValueMax = 100,
+  "aria-valuetext": ariaValueText,
+  size = "medium",
+  length = "256px",
+  error = false,
+  progress = 0,
+  description,
+  showDefaultLabels = false,
+  currentProgressLabel,
+  customValuePreposition,
+  maxProgressLabel,
+  labelsPosition,
+  ...rest
+}) => {
   const l = useLocale();
   const barRef = useRef(null);
   const [barLength, setBarLength] = useState("0px");

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -11,20 +11,18 @@ function getHeight(size) {
       return "var(--sizing100)";
   }
 }
-function getBackgroundColour(_ref) {
-  let {
-    progress,
-    error
-  } = _ref;
+function getBackgroundColour({
+  progress,
+  error
+}) {
   if (error) return "var(--colorsSemanticNegative500)";
   if (progress && progress >= 100) return "var(--colorsSemanticPositive500)";
   return "var(--colorsSemanticNeutral500)";
 }
-function getBorderColour(_ref2) {
-  let {
-    progress,
-    error
-  } = _ref2;
+function getBorderColour({
+  progress,
+  error
+}) {
   if (error) return "var(--colorsSemanticNegative500)";
   if (progress === 100) return "var(--colorsSemanticPositive500)";
   return "var(--colorsSemanticNeutral500)";
@@ -34,37 +32,31 @@ const StyledProgressTracker = styled.div`
   text-align: center;
   white-space: nowrap;
 
-  ${_ref3 => {
-  let {
-    length
-  } = _ref3;
-  return css`
+  ${({
+  length
+}) => css`
       width: ${length};
-    `;
-}};
+    `};
 `;
 const StyledProgressBar = styled.span`
-  ${_ref4 => {
-  let {
-    size,
-    progress,
-    error,
-    theme
-  } = _ref4;
-  return css`
+  ${({
+  size,
+  progress,
+  error,
+  theme
+}) => css`
     display: flex;
     position: relative;
     background-color: var(--colorsSemanticNeutral200);
     border: 1px solid ${getBorderColour({
-    progress,
-    error
-  })};
+  progress,
+  error
+})};
     border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
     overflow-x: hidden;
     height: ${getHeight(size)};
     width: 100%;
-  `;
-}}
+  `}
 `;
 const fontSizes = {
   small: "var(--fontSizes100)",
@@ -84,47 +76,35 @@ const StyledValuesLabel = styled.span`
   display: flex;
   justify-content: flex-start;
   gap: 4px;
-  font-size: ${_ref5 => {
-  let {
-    size
-  } = _ref5;
-  return size && fontSizes[size];
-}};
-  ${_ref6 => {
-  let {
-    labelsPosition
-  } = _ref6;
-  return labelsPosition === "bottom" && "margin-top: 8px";
-}};
-  ${_ref7 => {
-  let {
-    labelsPosition
-  } = _ref7;
-  return labelsPosition !== "bottom" && "margin-bottom: 8px";
-}};
+  font-size: ${({
+  size
+}) => size && fontSizes[size]};
+  ${({
+  labelsPosition
+}) => labelsPosition === "bottom" && "margin-top: 8px"};
+  ${({
+  labelsPosition
+}) => labelsPosition !== "bottom" && "margin-bottom: 8px"};
 `;
 const InnerBar = styled.span`
-  ${_ref8 => {
-  let {
-    progress,
-    size = "medium",
-    length,
-    error,
-    theme
-  } = _ref8;
-  return css`
+  ${({
+  progress,
+  size = "medium",
+  length,
+  error,
+  theme
+}) => css`
     position: relative;
     left: 0;
     background-color: ${getBackgroundColour({
-    progress,
-    error
-  })};
+  progress,
+  error
+})};
     border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
     width: calc(${length} * ${progress && progress / 100});
     min-width: 2px;
     height: ${getHeight(size)};
-  `;
-}}
+  `}
 `;
 InnerBar.defaultProps = {
   theme: baseTheme

package/esm/components/radio-button/radio-button-group.style.js

@@ -6,17 +6,14 @@ export const StyledHintText = styled.div`
   font-size: 14px;
 `;
 const RadioButtonGroupStyle = styled.div`
-  ${_ref => {
-  let {
-    inline,
-    legendInline
-  } = _ref;
-  return css`
+  ${({
+  inline,
+  legendInline
+}) => css`
     display: flex;
     flex-direction: column;
     ${inline && "flex-direction: row;"}
     ${legendInline && "margin-top: 4px;"}
-  `;
-}};
+  `};
 `;
 export default RadioButtonGroupStyle;

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

@@ -10,40 +10,39 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 let deprecateInputRefWarnTriggered = false;
-const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    autoFocus,
-    checked,
-    disabled,
-    fieldHelp,
-    fieldHelpInline,
-    id,
-    inline,
-    inputWidth,
-    label,
-    labelHelp,
-    labelAlign,
-    labelSpacing = 1,
-    labelWidth,
-    name,
-    onChange,
-    onBlur,
-    onFocus,
-    value,
-    reverse = false,
-    required,
-    size,
-    error,
-    warning,
-    info,
-    tooltipPosition,
-    "data-component": dataComponent = "radio-button",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    helpAriaLabel,
-    inputRef,
-    ...props
-  } = _ref;
+const RadioButton = /*#__PURE__*/React.forwardRef(({
+  autoFocus,
+  checked,
+  disabled,
+  fieldHelp,
+  fieldHelpInline,
+  id,
+  inline,
+  inputWidth,
+  label,
+  labelHelp,
+  labelAlign,
+  labelSpacing = 1,
+  labelWidth,
+  name,
+  onChange,
+  onBlur,
+  onFocus,
+  value,
+  reverse = false,
+  required,
+  size,
+  error,
+  warning,
+  info,
+  tooltipPosition,
+  "data-component": dataComponent = "radio-button",
+  "data-element": dataElement,
+  "data-role": dataRole,
+  helpAriaLabel,
+  inputRef,
+  ...props
+}, ref) => {
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);

package/esm/components/radio-button/radio-button.style.js

@@ -9,15 +9,13 @@ import { StyledLabelContainer } from "../../__internal__/label/label.style";
 import baseTheme from "../../style/themes/base";
 import FormFieldStyle from "../../__internal__/form-field/form-field.style";
 const RadioButtonStyle = styled(CheckboxStyle)`
-  ${_ref => {
-  let {
-    disabled,
-    fieldHelpInline,
-    reverse,
-    size,
-    inline
-  } = _ref;
-  return css`
+  ${({
+  disabled,
+  fieldHelpInline,
+  reverse,
+  size,
+  inline
+}) => css`
     margin-bottom: var(--spacing150);
 
     :last-of-type {
@@ -108,8 +106,7 @@ const RadioButtonStyle = styled(CheckboxStyle)`
         margin-left: 32px;
       }
     `}
-  `;
-}}
+  `}
 
   ${margin};
 `;

package/esm/components/search/search-button.style.js

@@ -29,12 +29,9 @@ const StyledSearchButton = styled.div`
     margin: 0px 0px;
     padding-bottom: 3px;
     :focus {
-      z-index: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.zIndex.smallOverlay;
-}};
+      z-index: ${({
+  theme
+}) => theme.zIndex.smallOverlay};
     }
   }
 `;

package/esm/components/search/search.component.js

@@ -12,33 +12,32 @@ import Button from "../button";
 import Logger from "../../__internal__/utils/logger";
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
-const Search = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    defaultValue,
-    onChange,
-    onClick,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    value,
-    id,
-    name,
-    threshold = 3,
-    searchWidth,
-    maxWidth,
-    searchButton,
-    searchButtonAriaLabel = "search button",
-    placeholder,
-    variant = "default",
-    "aria-label": ariaLabel = "search",
-    inputRef,
-    tabIndex,
-    error,
-    warning,
-    info,
-    tooltipPosition,
-    ...rest
-  } = _ref;
+const Search = /*#__PURE__*/React.forwardRef(({
+  defaultValue,
+  onChange,
+  onClick,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  value,
+  id,
+  name,
+  threshold = 3,
+  searchWidth,
+  maxWidth,
+  searchButton,
+  searchButtonAriaLabel = "search button",
+  placeholder,
+  variant = "default",
+  "aria-label": ariaLabel = "search",
+  inputRef,
+  tabIndex,
+  error,
+  warning,
+  info,
+  tooltipPosition,
+  ...rest
+}, ref) => {
   const isControlled = value !== undefined;
   const initialValue = isControlled ? value : defaultValue;
   if (!deprecateInputRefWarnTriggered && inputRef) {

package/esm/components/search/search.style.js

@@ -7,17 +7,16 @@ import StyledIcon from "../icon/icon.style";
 import { baseTheme } from "../../style/themes";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
 const StyledSearch = styled.div`
-  ${_ref => {
-  let {
-    isFocused,
-    searchWidth,
-    maxWidth,
-    searchIsActive,
-    searchHasValue,
-    showSearchButton,
-    theme,
-    variant
-  } = _ref;
+  ${({
+  isFocused,
+  searchWidth,
+  maxWidth,
+  searchIsActive,
+  searchHasValue,
+  showSearchButton,
+  theme,
+  variant
+}) => {
   const darkVariant = variant === "dark";
   const variantColor = darkVariant ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor300)";
   const iconColor = darkVariant && (searchHasValue && isFocused || !searchHasValue && isFocused || !isFocused && searchHasValue && showSearchButton);

package/esm/components/select/__internal__/select-text/select-text.component.d.ts

@@ -15,7 +15,6 @@ export interface SelectTextProps {
     /** Callback function for when the Select Textbox is focused. */
     onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
     /** Callback function for when the key is pressed when focused on Select Text. */
-    onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;
     /** Callback function for when the left mouse key is pressed when focused on Select Text. */
     onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
     /** Placeholder string to be displayed when formattedValue is empty */
@@ -24,10 +23,8 @@ export interface SelectTextProps {
     readOnly?: boolean;
     /** If true the component has no border and a transparent background */
     transparent?: boolean;
-    /** Id of the Select Text element */
-    textId?: string;
     /** Component size */
     size?: "small" | "medium" | "large";
 }
-declare const SelectText: ({ disabled, formattedValue, onClick, onKeyDown, onMouseDown, placeholder, readOnly, textId, transparent, size, }: SelectTextProps) => React.JSX.Element;
+declare const SelectText: ({ disabled, formattedValue, onClick, onMouseDown, placeholder, readOnly, transparent, size, }: SelectTextProps) => React.JSX.Element;
 export default SelectText;

package/esm/components/select/__internal__/select-text/select-text.component.js

@@ -1,32 +1,25 @@
 import React from "react";
 import PropTypes from "prop-types";
 import StyledSelectText from "./select-text.style";
-const SelectText = _ref => {
-  let {
-    disabled,
-    formattedValue = "",
-    onClick,
-    onKeyDown,
-    onMouseDown,
-    placeholder,
-    readOnly,
-    textId,
-    transparent,
-    size = "medium"
-  } = _ref;
+const SelectText = ({
+  disabled,
+  formattedValue = "",
+  onClick,
+  onMouseDown,
+  placeholder,
+  readOnly,
+  transparent,
+  size = "medium"
+}) => {
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
   return /*#__PURE__*/React.createElement(StyledSelectText, {
     "aria-hidden": true,
     "data-element": "select-text",
     disabled: disabled,
     hasPlaceholder: hasPlaceholder,
-    id: textId,
     onClick: onClick,
-    onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     readOnly: readOnly,
-    role: "button",
-    tabIndex: -1,
     transparent: transparent,
     size: size
   }, hasPlaceholder ? placeholder : formattedValue);