carbon-react 132.1.0 → 132.2.1

package/lib/components/image/image.style.js

@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _themes = require("../../style/themes");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledImage = exports.StyledImage = _styledComponents.default.div.attrs(({
   src,
   children,

package/lib/components/inline-inputs/inline-inputs.component.js

@@ -13,7 +13,7 @@ var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__intern
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
 const columnWrapper = (children, gutter) => {
   return _react.default.Children.map(children, input => {

package/lib/components/inline-inputs/inline-inputs.style.js

@@ -11,7 +11,7 @@ var _label = require("../../__internal__/label/label.style");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const spacings = {
   none: 0,
   "extra-small": 8,

package/lib/components/link/link.component.js

@@ -13,7 +13,7 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
 const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
   children,

package/lib/components/link/link.style.js

@@ -9,7 +9,7 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const colorMap = {
   light: variant => {
     let color = "var(--colorsActionMajor500)";

package/lib/components/link-preview/link-preview.style.js

@@ -11,7 +11,7 @@ var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-foc
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const oldFocusStyling = `
   outline: solid 2px var(--colorsSemanticFocus500);
   outline-offset: -1px;

package/lib/components/loader/loader-square.style.js

@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const loaderAnimation = (0, _styledComponents.keyframes)`
   0%, 80%, 100% {
     opacity: 0;

package/lib/components/loader-bar/loader-bar.component.js

@@ -12,7 +12,7 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _loaderBar = _interopRequireWildcard(require("./loader-bar.style"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 const LoaderBar = ({

package/lib/components/loader-bar/loader-bar.style.js

@@ -9,7 +9,7 @@ var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getHeight(size) {
   switch (size) {
     case "small":

package/lib/components/loader-spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoaderSpinner } from "./loader-spinner.component";
+export type { LoaderSpinnerProps } from "./loader-spinner.component";

package/lib/components/loader-spinner/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LoaderSpinner", {
+  enumerable: true,
+  get: function () {
+    return _loaderSpinner.default;
+  }
+});
+var _loaderSpinner = _interopRequireDefault(require("./loader-spinner.component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/loader-spinner/loader-spinner.component.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+import { LoaderSpinnerSizes, LoaderSpinnerVariants } from "./loader-spinner.config";
+export interface LoaderSpinnerProps extends MarginProps, TagProps {
+    /**
+     * The size prop allows a specific size to be set, ranging from
+     * `extra-small` to `extra-large`
+     */
+    size?: LoaderSpinnerSizes;
+    /**
+     * If set to `false` no visual label will be displayed, however
+     * a visually hidden label will still be available for assistive technologies
+     */
+    showSpinnerLabel?: boolean;
+    /**
+     * The variant prop can be used to change the appearance of the component.
+     * Typically both the outer and inner spinner will change color,
+     * however there will still be sufficient contrast between them
+     */
+    variant?: LoaderSpinnerVariants;
+    /** If set to `false` all motion will be suspended */
+    hasMotion?: boolean;
+    /**
+     * If set to `true` the animation type will become tracked, this is
+     * used specifically for when wait times are predictable
+     */
+    isTracked?: boolean;
+    /**
+     * The total animation time (in seconds). Default animation is time `1` second.
+     * For any gradient variants the default animation time is `2` seconds
+     */
+    animationTime?: number;
+}
+export declare const LoaderSpinner: ({ size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element;
+export default LoaderSpinner;

package/lib/components/loader-spinner/loader-spinner.component.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LoaderSpinner = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
+var _loaderSpinner = require("./loader-spinner.style");
+var _utils = require("../../style/utils");
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
+var _typography = _interopRequireDefault(require("../typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const LoaderSpinner = ({
+  size = "medium",
+  showSpinnerLabel = true,
+  variant = "action",
+  isTracked = false,
+  hasMotion = true,
+  animationTime,
+  ...rest
+}) => {
+  const locale = (0, _useLocale.default)();
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  const isLabelDark = variant !== "inverse" && variant !== "gradient-white";
+  const spinnerLabel = /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledLabel, {
+    "data-role": "visible-label",
+    variant: "span",
+    fontWeight: "500",
+    size: size,
+    color: isLabelDark ? "var(--colorsUtilityYin090);" : "var(--colorsActionMajorYang100);",
+    fontSize: size === "extra-large" ? "var(--sizing200)" : "var(--sizing175)",
+    lineHeight: size === "extra-large" ? "var(--sizing300)" : "var(--sizing250)"
+  }, locale.loaderSpinner.loading());
+  const isGradientVariant = variant === "gradient-white" || variant === "gradient-grey";
+  const calculateDefaultAnimationTime = () => {
+    if (animationTime) {
+      return animationTime;
+    }
+    return isGradientVariant ? 2 : 1;
+  };
+  return /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledSpinnerWrapper, _extends({
+    size: size,
+    role: "status"
+  }, (0, _tags.default)("loader-spinner", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? spinnerLabel : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledSpinnerCircleSvg, {
+    role: "presentation",
+    size: size,
+    variant: variant,
+    hasMotion: hasMotion,
+    isTracked: isTracked,
+    isGradientVariant: isGradientVariant,
+    animationTime: calculateDefaultAnimationTime(),
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    "data-role": "outer-arc"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    "data-role": "inner-arc"
+  })), showSpinnerLabel ? spinnerLabel : /*#__PURE__*/_react.default.createElement(_typography.default, {
+    "data-role": "hidden-label",
+    variant: "span",
+    screenReaderOnly: true
+  }, locale.loaderSpinner.loading())));
+};
+exports.LoaderSpinner = LoaderSpinner;
+var _default = exports.default = LoaderSpinner;

package/lib/components/loader-spinner/loader-spinner.config.d.ts

@@ -0,0 +1,11 @@
+declare const LOADER_SPINNER_VARIANTS: readonly ["action", "neutral", "inverse", "gradient-grey", "gradient-white"];
+declare type LoaderSpinnerVariants = typeof LOADER_SPINNER_VARIANTS[number];
+declare const LOADER_SPINNER_SIZES: readonly ["extra-small", "small", "medium", "large", "extra-large"];
+declare type LoaderSpinnerSizes = typeof LOADER_SPINNER_SIZES[number];
+declare type LoaderSpinnerSizeParams = Record<LoaderSpinnerSizes, {
+    wrapperDimensions: number;
+    strokeWidth: number;
+}>;
+declare const LOADER_SPINNER_SIZE_PARAMS: LoaderSpinnerSizeParams;
+export type { LoaderSpinnerSizes, LoaderSpinnerVariants };
+export { LOADER_SPINNER_SIZES, LOADER_SPINNER_VARIANTS, LOADER_SPINNER_SIZE_PARAMS, };

package/lib/components/loader-spinner/loader-spinner.config.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LOADER_SPINNER_VARIANTS = exports.LOADER_SPINNER_SIZE_PARAMS = exports.LOADER_SPINNER_SIZES = void 0;
+const LOADER_SPINNER_VARIANTS = exports.LOADER_SPINNER_VARIANTS = ["action", "neutral", "inverse", "gradient-grey", "gradient-white"];
+const LOADER_SPINNER_SIZES = exports.LOADER_SPINNER_SIZES = ["extra-small", "small", "medium", "large", "extra-large"];
+const LOADER_SPINNER_SIZE_PARAMS = exports.LOADER_SPINNER_SIZE_PARAMS = {
+  "extra-small": {
+    wrapperDimensions: 20,
+    strokeWidth: 4
+  },
+  small: {
+    wrapperDimensions: 32,
+    strokeWidth: 4
+  },
+  medium: {
+    wrapperDimensions: 56,
+    strokeWidth: 3.3
+  },
+  large: {
+    wrapperDimensions: 80,
+    strokeWidth: 3.7
+  },
+  "extra-large": {
+    wrapperDimensions: 104,
+    strokeWidth: 3.7
+  }
+};

package/lib/components/loader-spinner/loader-spinner.style.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { LoaderSpinnerProps } from "./loader-spinner.component";
+export declare const StyledSpinnerWrapper: import("styled-components").StyledComponent<"div", any, Pick<LoaderSpinnerProps, "size">, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<{
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    displayName: string;
+}, any, Required<Pick<LoaderSpinnerProps, "size">>, never>;
+interface StyledSpinnerCircleSvgProps extends Omit<LoaderSpinnerProps, "showSpinnerLabel"> {
+    isGradientVariant?: boolean;
+    size: Required<LoaderSpinnerProps>["size"];
+}
+export declare const StyledSpinnerCircleSvg: import("styled-components").StyledComponent<"svg", any, StyledSpinnerCircleSvgProps, never>;
+export {};

package/lib/components/loader-spinner/loader-spinner.style.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSpinnerWrapper = exports.StyledSpinnerCircleSvg = exports.StyledLabel = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledSystem = require("styled-system");
+var _loaderSpinner = require("./loader-spinner.config");
+var _typography = _interopRequireDefault(require("../typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const calculateColors = (isWheel, variant) => {
+  switch (variant) {
+    case "neutral":
+      return isWheel ? "var(--colorsSemanticNeutral500)" : "var(--colorsSemanticNeutral200)";
+    case "gradient-grey":
+      return isWheel ? "#00D639" : "#0000001A";
+    case "gradient-white":
+      return isWheel ? "#00D639" : "var(--colorsActionMajorYang100)";
+    case "inverse":
+      return "var(--colorsActionMajorYang100)";
+    default:
+      return isWheel ? "var(--colorsActionMajor500)" : "var(--colorsActionMajor150)";
+  }
+};
+const StyledSpinnerWrapper = exports.StyledSpinnerWrapper = _styledComponents.default.div`
+  ${_styledSystem.margin}
+  display: flex;
+  flex-direction: ${({
+  size
+}) => size === "extra-small" ? "row" : "column"};
+`;
+const StyledLabel = exports.StyledLabel = (0, _styledComponents.default)(_typography.default)`
+  ${({
+  size
+}) => (0, _styledComponents.css)`
+      display: flex;
+      justify-content: center;
+      ${size !== "extra-small" && `width: ${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`};
+      ${size === "extra-small" && `margin-left: var(--spacing100)`};
+    `}
+`;
+const StyledSpinnerCircleSvg = exports.StyledSpinnerCircleSvg = _styledComponents.default.svg`
+  ${({
+  size,
+  isTracked,
+  hasMotion,
+  isGradientVariant,
+  animationTime,
+  variant
+}) => {
+  const dimensions = `${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`;
+  return size && (0, _styledComponents.css)`
+        width: ${dimensions};
+        height: ${dimensions};
+        min-width: ${dimensions};
+        min-height: ${dimensions};
+
+        circle[data-role="outer-arc"] {
+          fill: transparent;
+          stroke-width: ${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].strokeWidth}px;
+          stroke: ${calculateColors(false, variant)};
+          ${variant === "inverse" && `stroke-opacity: 0.3`}
+          cx: 12px;
+          cy: 12px;
+          r: 10px;
+        }
+
+        circle[data-role="inner-arc"] {
+          fill: transparent;
+          stroke-width: ${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].strokeWidth}px;
+          stroke: ${calculateColors(true, variant)};
+          stroke-linecap: round;
+          stroke-dasharray: 100px;
+          stroke-dashoffset: 80px;
+          transform-origin: 12px 12px 0px;
+          cx: 12px;
+          cy: 12px;
+          r: 10px;
+          transform: rotate(270deg);
+
+          @keyframes gradientAnimation {
+            0% {
+              stroke: #00d639;
+            }
+
+            33% {
+              stroke: #11afff;
+            }
+
+            66% {
+              stroke: #8f49fe;
+            }
+          }
+
+          @keyframes trackedAnimation {
+            from {
+              stroke-dasharray: 100;
+              stroke-dashoffset: 100;
+            }
+
+            to {
+              stroke-dasharray: 100;
+              stroke-dashoffset: 20;
+            }
+          }
+
+          @keyframes untrackedAnimation {
+            0% {
+              transform: rotate(0deg);
+              stroke-dasharray: 100;
+            }
+
+            40% {
+              stroke-dasharray: 80;
+            }
+
+            80% {
+              stroke-dasharray: 100;
+            }
+
+            100% {
+              transform: rotate(360deg);
+            }
+          }
+
+          animation-name: ${isTracked && !isGradientVariant ? "trackedAnimation" : "untrackedAnimation"},
+            ${variant === "gradient-grey" || variant === "gradient-white" && "gradientAnimation" ? "gradientAnimation" : "none"};
+          ${hasMotion && `animation-duration: ${animationTime}s`};
+          animation-timing-function: cubic-bezier(0.2, 0.1, 0.8, 1);
+          animation-iteration-count: ${hasMotion ? "infinite" : "none"};
+        `;
+}};
+`;

package/lib/components/loader-spinner/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/components/loader-spinner/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/menu/__internal__/submenu/submenu.component.js

@@ -19,7 +19,7 @@ var _useStableCallback = _interopRequireDefault(require("../../../../hooks/__int
 var _fixedNavigationBar = _interopRequireDefault(require("../../../navigation-bar/fixed-navigation-bar.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
 const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   children,
@@ -39,7 +39,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   onClick,
   ...rest
 }, ref) => {
-  const submenuRef = (0, _react.useRef)(null);
+  const [submenuRef, setSubmenuRef] = (0, _react.useState)(null);
   const submenuId = (0, _react.useRef)((0, _guid.default)());
   const menuContext = (0, _react.useContext)(_menu.default);
   const {
@@ -52,6 +52,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   const [submenuFocusId, setSubmenuFocusId] = (0, _react.useState)(null);
   const [submenuItemIds, setSubmenuItemIds] = (0, _react.useState)([]);
   const [characterString, setCharacterString] = (0, _react.useState)("");
+  const [applyFocusRadius, setApplyFocusRadius] = (0, _react.useState)(false);
   const shiftTabPressed = (0, _react.useRef)(false);
   const focusFirstMenuItemOnOpen = (0, _react.useRef)(false);
   const numberOfChildren = submenuItemIds.length;
@@ -60,15 +61,15 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   } = (0, _react.useContext)(_fixedNavigationBar.default);
   const onSubmenuOpen = (0, _useStableCallback.default)(onSubmenuOpenProp);
   const blockIndex = (0, _react.useMemo)(() => {
-    const items = submenuRef.current?.querySelectorAll(_locators.BLOCK_INDEX_SELECTOR);
+    const items = submenuRef?.querySelectorAll(_locators.BLOCK_INDEX_SELECTOR);
     if (items && submenuOpen && numberOfChildren) {
       const childrenArray = Array.from(items);
-      const scrollableBlock = submenuRef.current?.querySelector(`[data-component='${_locators.SCROLLABLE_BLOCK}']`);
+      const scrollableBlock = submenuRef?.querySelector(`[data-component='${_locators.SCROLLABLE_BLOCK}']`);
       const index = scrollableBlock ? childrenArray.indexOf(scrollableBlock) : -1;
       return scrollableBlock?.querySelector(`[data-component='${_locators.SCROLLABLE_BLOCK_PARENT}']`) ? index + 1 : index;
     }
     return -1;
-  }, [submenuOpen, numberOfChildren]);
+  }, [submenuOpen, numberOfChildren, submenuRef]);
   const characterTimer = (0, _react.useRef)(null);
   const startCharacterTimeout = (0, _react.useCallback)(() => {
     characterTimer.current = setTimeout(() => {
@@ -86,6 +87,35 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     setSubmenuOpen(true);
     setOpenSubmenuId(submenuId.current);
   }, [setOpenSubmenuId]);
+  const lastMenuItemElement = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    const handleBorderRadiusStyling = () => {
+      // Finds all ul elements that are not submenus
+      const ulElements = Array.from(submenuRef?.querySelectorAll("ul:not([data-component='submenu'])") || /* istanbul ignore next */[]);
+
+      // Terminate early if there are no ul elements as we have nothing we need to apply styles to.
+      if (ulElements.length === 0) return;
+
+      // Get the last menu item in the submenu
+      const lastMenuItem = Array.from(submenuRef?.querySelectorAll("[data-component='menu-item']") || /* istanbul ignore next */[]).pop();
+      lastMenuItemElement.current = lastMenuItem;
+
+      // Get the last segment block
+      const lastSegmentBlock = ulElements.pop();
+
+      // Get all the menu items from the last segment block
+      const segmentBlockMenuItems = Array.from(lastSegmentBlock?.querySelectorAll("[data-component='menu-item']") || /* istanbul ignore next */[]);
+
+      // Get the last menu item in the last segment block
+      const lastMenuItemInSegmentBlock = segmentBlockMenuItems.pop();
+      // Check if the last item in the segment block is the same as the last MenuItem in the submenu
+      const menuItemsMatch = !!lastMenuItemInSegmentBlock && lastMenuItemInSegmentBlock === lastMenuItem;
+      setApplyFocusRadius(menuItemsMatch);
+    };
+    if (submenuOpen && submenuRef) {
+      handleBorderRadiusStyling();
+    }
+  }, [submenuOpen, submenuRef]);
   (0, _react.useEffect)(() => {
     if (submenuOpen && onSubmenuOpen) {
       onSubmenuOpen();
@@ -153,6 +183,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       if (_events.default.isUpKey(event)) {
         event.preventDefault();
         shiftTabPressed.current = false;
+        setApplyFocusRadius(false);
         if (nextIndex > 0) {
           nextIndex -= 1;
         }
@@ -203,15 +234,15 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
   (0, _react.useEffect)(() => {
     /* istanbul ignore else */
-    if (submenuRef.current && children) {
-      const items = submenuRef.current?.querySelectorAll(_locators.ALL_CHILDREN_SELECTOR);
+    if (submenuRef && children) {
+      const items = submenuRef?.querySelectorAll(_locators.ALL_CHILDREN_SELECTOR);
 
       /* istanbul ignore else */
       if (items) {
         setSubmenuItemIds(Array.from(items).map(item => item.getAttribute("id")));
       }
     }
-  }, [children, submenuOpen]);
+  }, [children, submenuOpen, submenuRef]);
   (0, _react.useEffect)(() => {
     if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
       focusFirstMenuItemOnOpen.current = false;
@@ -230,7 +261,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     }
   };
   (0, _react.useEffect)(() => {
-    const items = submenuRef.current?.querySelectorAll(_locators.ALL_CHILDREN_SELECTOR);
+    const items = submenuRef?.querySelectorAll(_locators.ALL_CHILDREN_SELECTOR);
     if (items && characterString !== "") {
       const submenuChildren = Array.from(items);
       const nextItem = (0, _keyboardNavigation.characterNavigation)(characterString, submenuChildren);
@@ -238,7 +269,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
         setSubmenuFocusId(nextItem.id);
       }
     }
-  }, [characterString, submenuItemIds]);
+  }, [submenuRef, characterString, submenuItemIds]);
   if (inFullscreenView) {
     return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
       "data-component": "submenu-wrapper",
@@ -260,7 +291,8 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       variant: variant,
       menuType: menuType,
       inFullscreenView: inFullscreenView,
-      ref: submenuRef
+      ref: setSubmenuRef,
+      applyFocusRadiusStyling: false
     }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
       value: {
         handleKeyDown,
@@ -275,7 +307,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     onMouseLeave: () => closeSubmenu(),
     isSubmenuOpen: submenuOpen,
     onClick: handleClickInside,
-    ref: submenuRef
+    ref: setSubmenuRef
   }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
     className: className,
     menuType: menuType,
@@ -298,7 +330,8 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     variant: variant,
     menuType: menuType,
     role: blockIndex === 0 ? "presentation" : "list",
-    maxHeight: submenuMaxHeight
+    maxHeight: submenuMaxHeight,
+    applyFocusRadiusStyling: applyFocusRadius
   }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
     value: {
       submenuFocusId,

package/lib/components/menu/__internal__/submenu/submenu.style.d.ts

@@ -11,6 +11,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
 interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant"> {
     submenuDirection?: string;
     maxHeight?: string;
+    applyFocusRadiusStyling: boolean;
 }
 declare const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, StyledSubmenuWrapperProps, never>;
 declare const StyledSubmenu: import("styled-components").StyledComponent<"ul", any, StyledSubmenuProps, never>;