carbon-react 111.12.0 → 111.12.2

package/esm/components/switch/switch.style.d.ts

@@ -0,0 +1,4 @@
+import { SwitchProps } from "./switch.component";
+declare type StyledSwitchProps = Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size">;
+declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, StyledSwitchProps, never>;
+export default StyledSwitch;

package/esm/components/switch/switch.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import FieldHelpStyle from "../../__internal__/field-help/field-help.style";
@@ -150,13 +149,6 @@ const StyledSwitch = styled.div`
     `}
   `}
 `;
-StyledSwitch.propTypes = {
-  disabled: PropTypes.bool,
-  fieldHelpInline: PropTypes.bool,
-  labelInline: PropTypes.bool,
-  reverse: PropTypes.bool,
-  size: PropTypes.string
-};
 StyledSwitch.defaultProps = {
   theme: baseTheme
 };

package/esm/components/toast/toast.component.js

@@ -1,6 +1,6 @@
 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); }
 
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import PropTypes from "prop-types";
@@ -32,6 +32,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   const toastContentNodeRef = useRef();
   const closeIconRef = useRef();
   const focusedElementBeforeOpening = useRef();
+  const [tabIndex, setTabIndex] = useState(0);
   const refToPass = ref || toastRef;
   const componentClasses = useMemo(() => {
     return classNames(className);
@@ -53,15 +54,16 @@ const Toast = /*#__PURE__*/React.forwardRef(({
     timer.current = setTimeout(() => onDismiss(), timeout);
   }, [onDismiss, open, timeout]);
   useEffect(() => {
-    if (onDismiss && !disableAutoFocus) {
+    if (!disableAutoFocus) {
       if (open) {
-        var _closeIconRef$current;
+        var _toastContentNodeRef$;
 
         focusedElementBeforeOpening.current = document.activeElement;
-        (_closeIconRef$current = closeIconRef.current) === null || _closeIconRef$current === void 0 ? void 0 : _closeIconRef$current.focus();
+        (_toastContentNodeRef$ = toastContentNodeRef.current) === null || _toastContentNodeRef$ === void 0 ? void 0 : _toastContentNodeRef$.focus();
       } else if (focusedElementBeforeOpening.current) {
         focusedElementBeforeOpening.current.focus();
         focusedElementBeforeOpening.current = undefined;
+        setTabIndex(0);
       }
     }
   }, [open, onDismiss, disableAutoFocus]);
@@ -107,6 +109,9 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       className: componentClasses
     }, tagComponent(restProps["data-component"] || "toast", restProps), toastProps, {
       ref: toastContentNodeRef
+    }, !disableAutoFocus && {
+      tabIndex,
+      onBlur: () => setTabIndex(undefined)
     }), !isNotice && /*#__PURE__*/React.createElement(TypeIcon, {
       variant: toastProps.variant
     }, /*#__PURE__*/React.createElement(Icon, {

package/esm/components/toast/toast.style.js

@@ -50,8 +50,11 @@ const ToastStyle = styled(MessageStyle)`
     margin-right: ${isCenter ? "auto" : "30px"};
   `}
 
-  &${animationName}-appear,
-  &${animationName}-enter {
+  :focus {
+    outline: none;
+  }
+
+  &${animationName}-appear, &${animationName}-enter {
     opacity: 0;
     transform: scale(0.5);
   }

package/lib/components/accordion/accordion.style.js

@@ -160,7 +160,7 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
 
       ${!hasButtonProps && (0, _styledComponents.css)`
         ${StyledAccordionHeadingsContainer} {
-          margin-left: ${iconAlign === "right" ? "64px" : "32px"};
+          margin-left: ${iconAlign === "right" ? "var(--spacing300)" : "var(--spacing100)"};
         }
       `}
 

package/lib/components/switch/__internal__/switch-slider-panel.style.d.ts

@@ -0,0 +1,7 @@
+import { SwitchProps } from "../switch.component";
+export interface SwitchSliderPanelProps {
+    isLoading?: boolean;
+    size?: SwitchProps["size"];
+}
+declare const SwitchSliderPanel: import("styled-components").StyledComponent<"div", any, SwitchSliderPanelProps, never>;
+export default SwitchSliderPanel;

package/lib/components/switch/__internal__/switch-slider-panel.style.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _loader = _interopRequireDefault(require("../../loader/loader.style"));
 
 var _loaderSquare = _interopRequireDefault(require("../../loader/loader-square.style"));
@@ -76,9 +74,5 @@ const SwitchSliderPanel = _styledComponents.default.div`
     `}
   `}
 `;
-SwitchSliderPanel.propTypes = {
-  isLoading: _propTypes.default.bool,
-  size: _propTypes.default.string
-};
 var _default = SwitchSliderPanel;
 exports.default = _default;

package/lib/components/switch/__internal__/switch-slider.component.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ValidationProps } from "../../../__internal__/validations";
+export interface SwitchSliderProps extends ValidationProps {
+    checked?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    size?: "small" | "large";
+    useValidationIcon?: boolean;
+}
+declare const SwitchSlider: ({ checked, disabled, loading, size, error, warning, info, useValidationIcon, }: SwitchSliderProps) => JSX.Element;
+export default SwitchSlider;

package/lib/components/switch/__internal__/switch-slider.component.js

@@ -66,14 +66,14 @@ const SwitchSlider = ({
 };
 
 SwitchSlider.propTypes = {
-  checked: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  loading: _propTypes.default.bool,
-  size: _propTypes.default.string,
-  error: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  warning: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  info: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  useValidationIcon: _propTypes.default.bool
+  "checked": _propTypes.default.bool,
+  "disabled": _propTypes.default.bool,
+  "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "loading": _propTypes.default.bool,
+  "size": _propTypes.default.oneOf(["large", "small"]),
+  "useValidationIcon": _propTypes.default.bool,
+  "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
 var _default = SwitchSlider;
 exports.default = _default;

package/lib/components/switch/__internal__/switch-slider.style.d.ts

@@ -0,0 +1,6 @@
+import { SwitchSliderProps } from "./switch-slider.component";
+interface StyledSwitchSliderProps extends Pick<SwitchSliderProps, "checked" | "disabled" | "size" | "error" | "warning"> {
+    isLoading?: boolean;
+}
+declare const StyledSwitchSlider: import("styled-components").StyledComponent<"span", any, StyledSwitchSliderProps, never>;
+export default StyledSwitchSlider;

package/lib/components/switch/__internal__/switch-slider.style.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _switchSliderPanel = _interopRequireDefault(require("./switch-slider-panel.style"));
 
 var _validationIcon = _interopRequireDefault(require("../../../__internal__/validations/validation-icon.style"));
@@ -124,13 +122,5 @@ const StyledSwitchSlider = _styledComponents.default.span`
     }
   `}
 `;
-StyledSwitchSlider.propTypes = {
-  checked: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  size: _propTypes.default.string,
-  isLoading: _propTypes.default.bool,
-  error: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  warning: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
-};
 var _default = StyledSwitchSlider;
 exports.default = _default;

package/lib/components/switch/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./switch";
+export { default } from "./switch.component";
+export type { SwitchProps } from "./switch.component";

package/lib/components/switch/switch.component.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { MarginProps } from "styled-system";
+import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
+export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-component"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-element"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-role"?: string;
+    /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
+    /** Set the default value of the Switch if component is meant to be used as uncontrolled */
+    defaultChecked?: boolean;
+    /** Text alignment of the label */
+    labelAlign?: "left" | "right";
+    /** When true label is inline */
+    labelInline?: boolean;
+    /** Triggers loading animation */
+    loading?: boolean;
+    /** When true, validation icon will be placed on label instead of being placed on the input */
+    validationOnLabel?: boolean;
+    /** The value of the switch, passed on form submit */
+    value?: string;
+    /** Overrides the default tooltip position */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** Aria label for rendered help component */
+    helpAriaLabel?: string;
+}
+export declare const Switch: ({ autoFocus, id, label, onChange, onBlur, onFocus, value, checked, defaultChecked, disabled, loading, reverse, validationOnLabel, labelInline, labelSpacing, labelHelp, fieldHelpInline, size, name, adaptiveLabelBreakpoint, tooltipPosition, error, warning, info, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...rest }: SwitchProps) => JSX.Element;
+export default Switch;