carbon-react 136.0.4 → 138.0.0

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts

@@ -1,17 +1,9 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface CustomEvent {
-    target: {
-        name?: string;
-        value?: string;
-    };
-}
 export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     /** Unique id for the root element of the component */
     id: string;
-    /** Specifies the name prop to be applied to each button in the group */
-    name?: string;
     /** Toggle buttons to be rendered. Only accepts children of type ButtonToggle */
     children?: React.ReactNode;
     /** aria-label for the group wrapper. Required for accessibility when no text label is provided */
@@ -37,7 +29,7 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
     fullWidth?: boolean;
     /** Callback triggered by pressing one of the child buttons. Use with controlled components to set the value prop to the value argument */
-    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
+    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
     /** Determines which child button is selected when the component is used as a controlled component */
     value?: string;
     /** [Legacy] Aria label for rendered help component */
@@ -56,8 +48,7 @@ declare type ButtonToggleGroupContextType = {
     onButtonClick: (value: string) => void;
     handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     pressedButtonValue?: string;
-    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
-    name?: string;
+    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
     allowDeselect?: boolean;
     isInGroup: boolean;
     isDisabled?: boolean;
@@ -68,7 +59,7 @@ declare type ButtonToggleGroupContextType = {
 };
 export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -4,15 +4,13 @@ import PropTypes from "prop-types";
 import invariant from "invariant";
 import FormField from "../../../__internal__/form-field";
 import guid from "../../../__internal__/utils/helpers/guid";
-import StyledButtonToggleGroup, { StyledButtonToggleGroupWrapper, StyledHintText } from "./button-toggle-group.style";
+import StyledButtonToggleGroup, { StyledHintText } from "./button-toggle-group.style";
 import { ButtonToggle } from "..";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
 import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
-import Logger from "../../../__internal__/utils/logger";
 import Events from "../../../__internal__/utils/helpers/events";
 import { NewValidationContext } from "../../carbon-provider/carbon-provider.component";
-let deprecateNameWarnTriggered = false;
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
 export const ButtonToggleGroupContext = /*#__PURE__*/createContext({
   onButtonClick: /* istanbul ignore next */() => {},
@@ -35,7 +33,6 @@ const ButtonToggleGroup = ({
   fullWidth,
   labelInline,
   labelWidth,
-  name,
   onChange,
   value,
   "data-component": dataComponent = "button-toggle-group",
@@ -59,11 +56,6 @@ const ButtonToggleGroup = ({
   const hintTextId = useRef(guid());
   const wrapperRef = useRef(null);
   const [pressedButtonValue, setPressedButtonValue] = useState();
-  if (name && !deprecateNameWarnTriggered) {
-    deprecateNameWarnTriggered = true;
-    Logger.deprecate(`The \`name\` prop in \`ButtonToggleGroup\` component is deprecated and will soon be removed. It does not provide any functionality
-      since the component can no longer be used in an uncontrolled fashion.`);
-  }
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
@@ -140,7 +132,6 @@ const ButtonToggleGroup = ({
       handleKeyDown,
       pressedButtonValue: value || pressedButtonValue,
       onChange,
-      name,
       allowDeselect,
       isInGroup: true,
       isDisabled: disabled,
@@ -151,14 +142,14 @@ const ButtonToggleGroup = ({
   }, inputHint && /*#__PURE__*/React.createElement(StyledHintText, {
     id: hintTextId.current,
     isDisabled: disabled
-  }, inputHint), /*#__PURE__*/React.createElement(StyledButtonToggleGroupWrapper, {
-    labelInline: labelInline,
+  }, inputHint), /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({
     ref: wrapperRef
-  }, /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({}, label ? {
+  }, label ? {
     "aria-labelledby": labelId.current
   } : {
     "aria-label": ariaLabel
   }, {
+    labelInline: labelInline,
     inputWidth: inputWidth,
     fullWidth: fullWidth,
     role: "group",
@@ -168,7 +159,7 @@ const ButtonToggleGroup = ({
     id: id,
     className: className,
     disabled: disabled
-  }), children))))));
+  }), children)))));
 };
 ButtonToggleGroup.displayName = "ButtonToggleGroup";
 export default ButtonToggleGroup;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.d.ts

@@ -1,8 +1,6 @@
 import { ButtonToggleGroupProps } from ".";
-declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled">;
-declare type StyledButtonToggleGroupWrapperProps = Pick<ButtonToggleGroupProps, "labelInline">;
+declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled" | "labelInline">;
 declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupProps, never>;
-export declare const StyledButtonToggleGroupWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupWrapperProps, never>;
 export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
     isDisabled?: boolean | undefined;
 }, never>;

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

@@ -12,7 +12,9 @@ const StyledButtonToggleGroup = styled.div`
   gap: 4px;
   width: fit-content;
   height: fit-content;
-  flex-wrap: wrap;
+  flex-wrap: ${({
+  labelInline
+}) => labelInline ? "nowrap" : "wrap"};
 
   ${({
   disabled
@@ -39,16 +41,6 @@ const StyledButtonToggleGroup = styled.div`
       width: ${`${inputWidth}%`};
     `}
 `;
-export const StyledButtonToggleGroupWrapper = styled.div`
-  ${({
-  labelInline
-}) => labelInline && css`
-      display: flex;
-      ${StyledButtonToggleGroup} {
-        flex-wrap: nowrap;
-      }
-    `}
-`;
 export const StyledHintText = styled.div`
   ::after {
     content: " ";

package/esm/components/button-toggle/button-toggle-icon.component.js

@@ -9,7 +9,8 @@ const ButtonToggleIcon = ({
   hasContent
 }) => /*#__PURE__*/React.createElement(StyledButtonToggleIcon, {
   buttonIconSize: buttonIconSize,
-  hasContent: hasContent
+  hasContent: hasContent,
+  "data-role": "button-toggle-icon"
 }, /*#__PURE__*/React.createElement(Icon, {
   "aria-hidden": true,
   type: buttonIcon,

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

@@ -5,8 +5,6 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     "aria-label"?: string;
     /** Prop to specify the aria-labelledby property of the component */
     "aria-labelledby"?: string;
-    /** DEPRECATED: A synonym for pressed, to keep backwards compatibility. */
-    checked?: boolean;
     /** Text to display for the button. */
     children?: React.ReactNode;
     /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -17,8 +15,6 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     "data-role"?: string;
     /** DEPRECATED: Remove spacing from between buttons. */
     grouped?: boolean;
-    /** An optional string by which to identify the button in an onChange handler on the parent ButtonToggleGroup. */
-    name?: string;
     /** Callback triggered by blur event on the button. */
     onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
     /** Callback triggered by focus event on the button. */
@@ -31,7 +27,7 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     value?: string;
 }
 export declare const ButtonToggle: {
-    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, checked, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, name, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggle;

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

@@ -8,8 +8,6 @@ import { ButtonToggleGroupContext } from "./button-toggle-group/button-toggle-gr
 import ButtonToggleIcon from "./button-toggle-icon.component";
 import Logger from "../../__internal__/utils/logger";
 import { InputGroupContext } from "../../__internal__/input-behaviour";
-let deprecateCheckedWarnTriggered = false;
-let deprecateNameWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 let deprecateGroupedWarnTriggered = false;
 export const ButtonToggle = ({
@@ -17,14 +15,12 @@ export const ButtonToggle = ({
   "aria-labelledby": ariaLabelledBy,
   buttonIcon,
   buttonIconSize = "small",
-  checked,
   children,
   "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
   disabled,
   grouped,
-  name,
   onBlur,
   onFocus,
   onClick,
@@ -33,20 +29,10 @@ export const ButtonToggle = ({
   value
 }) => {
   !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `buttonIcon` must be defined, or this node must have children") : invariant(false) : void 0;
-  if (checked !== undefined && !deprecateCheckedWarnTriggered) {
-    deprecateCheckedWarnTriggered = true;
-    Logger.deprecate("The `checked` prop in `ButtonToggle` component is deprecated and will soon be removed. Please use `pressed` instead.");
-  }
-  if (name && !deprecateNameWarnTriggered) {
-    deprecateNameWarnTriggered = true;
-    Logger.deprecate(`The \`name\` prop in \`ButtonToggle\` component is deprecated and will soon be removed. It does not provide any functionality
-      since the component can no longer be used in an uncontrolled fashion.`);
-  }
   if (grouped && !deprecateGroupedWarnTriggered) {
     deprecateGroupedWarnTriggered = true;
     Logger.deprecate("The `grouped` prop in `ButtonToggle` component is deprecated and will soon be removed. Spacing between buttons is no longer no removed.");
   }
-  const pressedPropValue = pressed === undefined ? checked : pressed;
   const buttonRef = useRef(null);
   const {
     onMouseEnter,
@@ -59,7 +45,6 @@ export const ButtonToggle = ({
     handleKeyDown,
     pressedButtonValue,
     onChange,
-    name: groupName,
     allowDeselect,
     isInGroup,
     isDisabled,
@@ -83,7 +68,7 @@ export const ButtonToggle = ({
       if (allowDeselect && pressedButtonValue === value) {
         newValue = undefined;
       }
-      onChange(ev, newValue, groupName || name);
+      onChange(ev, newValue);
     }
     if (value) {
       onButtonClick(value);
@@ -109,7 +94,7 @@ export const ButtonToggle = ({
       inputGroupOnBlur();
     }
   }
-  const isPressed = isInGroup ? pressedButtonValue === value : pressedPropValue;
+  const isPressed = isInGroup ? pressedButtonValue === value : pressed;
   const isFirstButton = buttonRef.current === firstButton;
 
   // if we're in a ButtonToggleGroup, only one button should be tabbable - the pressed button if there is one, or

package/esm/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -55,6 +55,7 @@ export const CheckboxGroup = props => {
     inline: inline
   }), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
     "data-component": "checkbox-group",
+    "data-role": "checkbox-group",
     legendInline: legendInline,
     inline: inline
   }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
@@ -81,6 +82,7 @@ export const CheckboxGroup = props => {
     blockGroupBehaviour: !(error || warning || info)
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
     "data-component": "checkbox-group",
+    "data-role": "checkbox-group",
     legendInline: legendInline
   }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: {

package/esm/components/checkbox/checkbox-svg.component.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
 const CheckboxSvg = () => /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
+  "data-role": "checkable-svg",
   focusable: "false",
   width: "12",
   height: "10",

package/esm/components/checkbox/checkbox.style.js

@@ -111,7 +111,6 @@ const StyledCheckbox = styled.div`
 
       ${StyledFieldHelp} {
         margin-left: 24px;
-        padding-left: ${labelSpacing === 1 ? "var(--spacing100)" : "var(--spacing200)"};
       }
 
       ${fieldHelpInline && css`

package/esm/locales/de-de.d.ts

@@ -0,0 +1,3 @@
+import Locale from "./locale";
+declare const deDE: Partial<Locale>;
+export default deDE;

package/esm/locales/de-de.js

@@ -0,0 +1,206 @@
+import deDEDateLocale from "date-fns/locale/de";
+const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
+const deDE = {
+  locale: () => "de-DE",
+  actions: {
+    edit: () => "Bearbeiten",
+    delete: () => "Löschen"
+  },
+  actionPopover: {
+    ariaLabel: () => "Aktionen"
+  },
+  advancedColorPicker: {
+    ariaLabel: () => "Farbe ändern",
+    currentColorDescriptionTerm: () => "Aktuell zugewiesene Farbe:",
+    currentColorAssigned: currentColor => currentColor
+  },
+  batchSelection: {
+    selected: count => `${count} ausgewählt`
+  },
+  breadcrumbs: {
+    ariaLabel: () => "Breadcrumbs"
+  },
+  confirm: {
+    no: () => "Nein",
+    yes: () => "Ja"
+  },
+  characterCount: {
+    tooManyCharacters: formattedCount => `${formattedCount} Zeichen zu viel`,
+    charactersLeft: formattedCount => `${formattedCount} Zeichen übrig`,
+    visuallyHiddenHint: formattedCount => `Sie können bis zu ${formattedCount} Zeichen eingeben.`
+  },
+  date: {
+    dateFnsLocale: () => deDEDateLocale,
+    ariaLabels: {
+      previousMonthButton: () => "Vorheriger Monat",
+      nextMonthButton: () => "Nächster Monat"
+    }
+  },
+  dialog: {
+    ariaLabels: {
+      close: () => "Schließen"
+    }
+  },
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => "Schließen"
+    }
+  },
+  dismissibleBox: {
+    ariaLabels: {
+      close: () => "Schließen"
+    }
+  },
+  errors: {
+    messages: {
+      formSummary: /* istanbul ignore next */
+      (errors, warnings, type) => {
+        const warningPlural = isSingular(warnings) ? "Warnung" : "Warnungen";
+        if (errors && warnings && type === "warning") {
+          return ["und", `${warnings} ${warningPlural}`];
+        }
+        if (errors) {
+          return ["Es gibt", `${errors} Fehler`];
+        }
+        if (warnings) {
+          return ["Es gibt", `${warnings} ${warningPlural}`];
+        }
+        return null;
+      }
+    }
+  },
+  fileInput: {
+    dragAndDrop: () => "oder per Drag & Drop ablegen",
+    selectFile: () => "Datei auswählen",
+    fileUploadStatus: () => "Status",
+    actions: {
+      cancel: () => "Upload abbrechen",
+      clear: () => "Löschen",
+      delete: () => "Datei löschen"
+    }
+  },
+  heading: {
+    backLinkAriaLabel: () => "Zurück"
+  },
+  link: {
+    skipLinkLabel: () => "Zum Hauptinhalt springen"
+  },
+  loader: {
+    loading: () => "Laden"
+  },
+  loaderSpinner: {
+    loading: () => "Laden..."
+  },
+  menuFullscreen: {
+    ariaLabels: {
+      closeButton: () => "Schließen"
+    }
+  },
+  message: {
+    closeButtonAriaLabel: () => "Schließen"
+  },
+  numeralDate: {
+    validation: {
+      day: (month, daysInMonth) => {
+        if (month && daysInMonth) {
+          return `Tag in ${month} muss eine Zahl von 1- ${daysInMonth} sein`;
+        }
+        return "Der Tag muss eine Zahl zwischen 1 und 31 sein.";
+      },
+      month: () => "Der Monat muss eine Zahl zwischen 1 und 12 sein.",
+      year: () => "Das Jahr muss eine Zahl zwischen 1000 und 2200 sein."
+    },
+    labels: {
+      day: () => "Tag",
+      month: () => "Monat",
+      year: () => "Jahr"
+    }
+  },
+  pager: {
+    show: () => "Anzeigen",
+    records: (count, showNumber = true) => {
+      const noun = isSingular(count) ? "Element" : "Elemente";
+      return showNumber ? `${count} ${noun}` : noun;
+    },
+    first: () => "Erste",
+    last: () => "Letzte",
+    next: () => "Weiter",
+    previous: () => "Vorherige",
+    pageX: () => "Seite",
+    ofY: count => `von ${count}`
+  },
+  password: {
+    ariaLiveShownMessage: () => "Ihr Passwort wurde angezeigt. Bewegen Sie den Cursor über das Passwort, um es sich vorlesen zu lassen, wenn dies sicher ist.",
+    ariaLiveHiddenMessage: () => "Ihr Passwort ist derzeit ausgeblendet."
+  },
+  progressTracker: {
+    of: () => "von"
+  },
+  pod: {
+    undo: () => "Rückgängig"
+  },
+  search: {
+    searchButtonText: () => "Suchen"
+  },
+  select: {
+    actionButtonText: () => "Neues Element hinzufügen",
+    placeholder: () => "Bitte auswählen...",
+    noResultsForTerm: term => `Es wurden keine Ergebnisse für ${term} gefunden.`
+  },
+  sidebar: {
+    ariaLabels: {
+      close: () => "Schließen"
+    }
+  },
+  sort: {
+    accessibleName: (sortContent, sortType) => `Alle ${sortContent || "inhalte"}${sortType ? ` in der Reihenfolge ${sortType === "ascending" ? "aufsteigend" : "absteigend"} sortieren.` : " in der Reihenfolge aufsteigend oder absteigend sortieren."}`
+  },
+  splitButton: {
+    ariaLabel: () => "Mehr anzeigen"
+  },
+  stepFlow: {
+    stepLabel: (currentStep, totalSteps) => `Schritt ${currentStep} von ${totalSteps}`,
+    screenReaderOnlyTitle: (title, currentStep, totalSteps, category) => `${category ? `${category}.` : ""} ${title}. Schritt ${currentStep} von ${totalSteps}.`,
+    closeIconAriaLabel: () => "Schließen"
+  },
+  switch: {
+    on: () => "EIN",
+    off: () => "AUS"
+  },
+  textEditor: {
+    tooltipMessages: {
+      bold: () => "Fett",
+      italic: () => "Kursiv",
+      bulletList: () => "Aufzählung mit Punkten",
+      numberList: () => "Nummerierte Liste"
+    },
+    ariaLabels: {
+      bold: () => "fett",
+      italic: () => "kursiv",
+      bulletList: () => "Aufzählung mit Punkten",
+      numberList: () => "Nummerierte Liste"
+    }
+  },
+  tileSelect: {
+    deselect: () => "Auswahl aufheben"
+  },
+  time: {
+    amText: () => "AM",
+    pmText: () => "PM",
+    hoursLabelText: () => "h",
+    minutesLabelText: () => "min",
+    hoursAriaLabelText: () => "Stunden",
+    minutesAriaLabelText: () => "Minuten"
+  },
+  toast: {
+    ariaLabels: {
+      close: () => "Schließen"
+    }
+  },
+  verticalMenuFullScreen: {
+    ariaLabels: {
+      close: () => "Schließen"
+    }
+  }
+};
+export default deDE;

package/esm/locales/en-ca.d.ts

@@ -0,0 +1,3 @@
+import Locale from "./locale";
+declare const enCA: Partial<Locale>;
+export default enCA;

package/esm/locales/en-ca.js

@@ -0,0 +1,12 @@
+import enCADateLocale from "date-fns/locale/en-CA";
+const enCA = {
+  locale: () => "en-CA",
+  date: {
+    dateFnsLocale: () => enCADateLocale,
+    ariaLabels: {
+      previousMonthButton: () => "Previous month",
+      nextMonthButton: () => "Next month"
+    }
+  }
+};
+export default enCA;

package/esm/locales/en-us.d.ts

@@ -0,0 +1,3 @@
+import Locale from "./locale";
+declare const enUS: Partial<Locale>;
+export default enUS;

package/esm/locales/en-us.js

@@ -0,0 +1,12 @@
+import enUSDateLocale from "date-fns/locale/en-US";
+const enUS = {
+  locale: () => "en-US",
+  date: {
+    dateFnsLocale: () => enUSDateLocale,
+    ariaLabels: {
+      previousMonthButton: () => "Previous month",
+      nextMonthButton: () => "Next month"
+    }
+  }
+};
+export default enUS;

package/esm/locales/es-es.d.ts

@@ -0,0 +1,3 @@
+import Locale from "./locale";
+declare const esES: Partial<Locale>;
+export default esES;