carbon-react 144.13.0 → 144.15.0

package/esm/components/decimal/decimal.component.d.ts

@@ -25,7 +25,7 @@ export interface DecimalProps extends Omit<CommonTextboxProps, "onChange" | "onB
     onChange?: (ev: CustomEvent) => void;
     /** Handler for blur event */
     onBlur?: (ev: CustomEvent) => void;
-    /** Handler for key press event */
+    /** [Deprecated] Handler for key press event */
     onKeyPress?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
     /** The input name */
     name?: string;

package/esm/components/decimal/decimal.component.js

@@ -7,6 +7,7 @@ import LocaleContext from "../../__internal__/i18n-context";
 import usePrevious from "../../hooks/__internal__/usePrevious";
 import Logger from "../../__internal__/utils/logger";
 let deprecateUncontrolledWarnTriggered = false;
+let deprecateOnKeyPressWarnTriggered = false;
 const Decimal = /*#__PURE__*/React.forwardRef(({
   align = "right",
   defaultValue,
@@ -166,6 +167,10 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Decimal` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecateOnKeyPressWarnTriggered && onKeyPress) {
+    deprecateOnKeyPressWarnTriggered = true;
+    Logger.deprecate("`onKeyPress` prop in `Decimal` is deprecated and will soon be removed, please use `onKeyDown` instead.");
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textbox, _extends({
     onKeyPress: onKeyPress,
     align: align,

package/esm/components/grouped-character/grouped-character.component.js

@@ -27,6 +27,7 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
   groups,
   onBlur,
   onChange,
+  onKeyDown,
   separator: rawSeparator,
   value: externalValue,
   ...rest
@@ -90,7 +91,7 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
       onBlur(modifiedEvent);
     }
   };
-  const handleKeyPress = ev => {
+  const handleKeyDown = ev => {
     const {
       selectionStart,
       selectionEnd
@@ -98,16 +99,22 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
 
     /* istanbul ignore next */
     const hasSelection = (selectionEnd ?? 0) - (selectionStart ?? 0) > 0;
-    if (maxRawLength === value.length && !hasSelection) {
+
+    // check if the key pressed is a character key
+    const isCharacterKey = ev.key.length === 1;
+    if (isCharacterKey && maxRawLength === value.length && !hasSelection) {
       ev.preventDefault();
     }
+    if (onKeyDown) {
+      onKeyDown(ev);
+    }
   };
   return /*#__PURE__*/React.createElement(Textbox, _extends({}, rest, {
     value: value,
     formattedValue: formatValue(value),
     onChange: handleChange,
     onBlur: handleBlur,
-    onKeyPress: handleKeyPress,
+    onKeyDown: handleKeyDown,
     ref: ref
   }));
 });

package/esm/components/step-sequence/index.d.ts

@@ -0,0 +1,4 @@
+export { default as StepSequence } from "./step-sequence.component";
+export type { StepSequenceProps } from "./step-sequence.component";
+export { default as StepSequenceItem } from "./step-sequence-item";
+export type { StepSequenceItemProps } from "./step-sequence-item";

package/esm/components/step-sequence/index.js

@@ -0,0 +1,2 @@
+export { default as StepSequence } from "./step-sequence.component";
+export { default as StepSequenceItem } from "./step-sequence-item";

package/esm/components/step-sequence/step-sequence-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./step-sequence-item.component";
+export type { StepSequenceItemProps } from "./step-sequence-item.component";

package/esm/components/step-sequence/step-sequence-item/index.js

@@ -0,0 +1 @@
+export { default } from "./step-sequence-item.component";

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface StepSequenceItemProps {
+    /** Aria label */
+    ariaLabel?: string;
+    /** Hidden label to be displayed if item is complete */
+    hiddenCompleteLabel?: string;
+    /** Hidden label to be displayed if item is current */
+    hiddenCurrentLabel?: string;
+    /** Value to be displayed before text for incomplete steps */
+    indicator: string;
+    /** Flag to hide the indicator for incomplete steps */
+    hideIndicator?: boolean;
+    /** Status for the step */
+    status?: "complete" | "current" | "incomplete";
+    /** Content to be displayed */
+    children: React.ReactNode;
+}
+export declare const StepSequenceItem: ({ hideIndicator, indicator, status, hiddenCompleteLabel, hiddenCurrentLabel, children, ariaLabel, ...rest }: StepSequenceItemProps) => React.JSX.Element;
+export default StepSequenceItem;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -0,0 +1,43 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import { StyledStepSequenceItem, StyledStepSequenceItemContent, StyledStepSequenceItemIndicator, StyledStepSequenceItemHiddenLabel } from "./step-sequence-item.style";
+import Icon from "../../icon";
+import { StepSequenceContext } from "../step-sequence.component";
+export const StepSequenceItem = ({
+  hideIndicator = false,
+  indicator,
+  status = "incomplete",
+  hiddenCompleteLabel,
+  hiddenCurrentLabel,
+  children,
+  ariaLabel,
+  ...rest
+}) => {
+  const {
+    orientation
+  } = useContext(StepSequenceContext);
+  const indicatorText = () => {
+    return !hideIndicator ? /*#__PURE__*/React.createElement(StyledStepSequenceItemIndicator, null, indicator) : null;
+  };
+  const icon = () => status === "complete" ? /*#__PURE__*/React.createElement(Icon, {
+    type: "tick"
+  }) : indicatorText();
+  const hiddenLabel = () => {
+    if (hiddenCompleteLabel && status === "complete") {
+      return /*#__PURE__*/React.createElement(StyledStepSequenceItemHiddenLabel, null, hiddenCompleteLabel);
+    }
+    if (hiddenCurrentLabel && status === "current") {
+      return /*#__PURE__*/React.createElement(StyledStepSequenceItemHiddenLabel, null, hiddenCurrentLabel);
+    }
+    return null;
+  };
+  return /*#__PURE__*/React.createElement(StyledStepSequenceItem, _extends({
+    "data-component": "step-sequence-item",
+    orientation: orientation,
+    status: status,
+    key: `step-seq-item-${indicator}`,
+    "aria-label": ariaLabel
+  }, rest), hiddenLabel(), /*#__PURE__*/React.createElement(StyledStepSequenceItemContent, null, icon(), /*#__PURE__*/React.createElement("span", null, children)));
+};
+export default StepSequenceItem;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.style.d.ts

@@ -0,0 +1,6 @@
+import { StepSequenceProps } from "../step-sequence.component";
+import { StepSequenceItemProps } from "./step-sequence-item.component";
+export declare const StyledStepSequenceItem: import("styled-components").StyledComponent<"li", any, Pick<StepSequenceItemProps, "status"> & Pick<StepSequenceProps, "orientation">, never>;
+export declare const StyledStepSequenceItemContent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledStepSequenceItemHiddenLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledStepSequenceItemIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.style.js

@@ -0,0 +1,96 @@
+import styled, { css } from "styled-components";
+import StyledIcon from "../../icon/icon.style";
+export const StyledStepSequenceItem = styled.li`
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  text-align: right;
+  list-style-type: none;
+  color: var(--colorsUtilityYin055);
+
+  ${({
+  orientation,
+  status
+}) => {
+  const side = orientation === "vertical" ? "left" : "top";
+  return css`
+      &::before {
+        content: "";
+        flex-grow: 1;
+        display: block;
+        margin: 0 16px;
+        border-${side}: var(--sizing025) dashed var(--colorsUtilityYin055);
+      }
+
+      & span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      ${StyledIcon} {
+        margin-right: 8px;
+        color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+      }
+
+      &:first-child {
+        flex-grow: 0;
+
+        &::before {
+          display: none;
+        }
+      }
+
+      ${status === "current" && css`
+          color: var(--colorsUtilityYin090);
+
+          &::before {
+            border-${side}-color: var(--colorsUtilityYin090);
+            border-${side}-style: solid;
+          }
+        `}
+
+      ${status === "complete" && css`
+          color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+
+          &::before {
+            border-${side}-color: var(
+              --colorsBaseTheme,
+              var(--colorsSemanticPositive500)
+            );
+            border-${side}-style: solid;
+          }
+        `}
+
+      ${orientation === "vertical" && css`
+          flex-direction: column;
+          align-items: flex-start;
+
+          &::before {
+            flex-grow: 0;
+            border-left-width: var(--sizing025);
+            height: 100%;
+            min-height: var(--sizing300);
+            margin: 12px 8px;
+          }
+        `}
+    `;
+}}
+`;
+export const StyledStepSequenceItemContent = styled.span`
+  display: flex;
+`;
+export const StyledStepSequenceItemHiddenLabel = styled.span`
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+export const StyledStepSequenceItemIndicator = styled.span`
+  display: block;
+  min-width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  text-align: center;
+`;

package/esm/components/step-sequence/step-sequence.component.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+export declare const StepSequenceContext: React.Context<{
+    orientation: "horizontal" | "vertical";
+}>;
+export interface StepSequenceProps extends SpaceProps {
+    /** Step sequence items to be rendered */
+    children: React.ReactNode;
+    /** The direction that step sequence items should be rendered */
+    orientation?: "horizontal" | "vertical";
+}
+export declare const StepSequence: ({ children, orientation, ...props }: StepSequenceProps) => React.JSX.Element;
+export default StepSequence;

package/esm/components/step-sequence/step-sequence.component.js

@@ -0,0 +1,23 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from "react";
+import PropTypes from "prop-types";
+import StyledStepSequence from "./step-sequence.style";
+export const StepSequenceContext = /*#__PURE__*/React.createContext({
+  orientation: "horizontal"
+});
+export const StepSequence = ({
+  children,
+  orientation = "horizontal",
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(StyledStepSequence, _extends({
+    "data-component": "step-sequence",
+    orientation: orientation,
+    p: 0
+  }, props), /*#__PURE__*/React.createElement(StepSequenceContext.Provider, {
+    value: {
+      orientation
+    }
+  }, children));
+};
+export default StepSequence;

package/esm/components/step-sequence/step-sequence.style.d.ts

@@ -0,0 +1,4 @@
+import { SpaceProps } from "styled-system";
+import { StepSequenceProps } from "./step-sequence.component";
+declare const StyledStepSequence: import("styled-components").StyledComponent<"ol", any, Pick<StepSequenceProps, "orientation"> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export default StyledStepSequence;

package/esm/components/step-sequence/step-sequence.style.js

@@ -0,0 +1,21 @@
+import styled, { css } from "styled-components";
+import { space } from "styled-system";
+import { baseTheme } from "../../style/themes";
+const StyledStepSequence = styled.ol`
+  display: flex;
+  margin: 0;
+  font-weight: var(--fontWeights500);
+
+  ${({
+  orientation
+}) => orientation === "vertical" && css`
+      flex-direction: column;
+      height: 100%;
+    `}
+
+  ${space}
+`;
+StyledStepSequence.defaultProps = {
+  theme: baseTheme
+};
+export default StyledStepSequence;

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

@@ -25,7 +25,7 @@ export interface DecimalProps extends Omit<CommonTextboxProps, "onChange" | "onB
     onChange?: (ev: CustomEvent) => void;
     /** Handler for blur event */
     onBlur?: (ev: CustomEvent) => void;
-    /** Handler for key press event */
+    /** [Deprecated] Handler for key press event */
     onKeyPress?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
     /** The input name */
     name?: string;

package/lib/components/decimal/decimal.component.js

@@ -16,6 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
+let deprecateOnKeyPressWarnTriggered = false;
 const Decimal = exports.Decimal = /*#__PURE__*/_react.default.forwardRef(({
   align = "right",
   defaultValue,
@@ -175,6 +176,10 @@ const Decimal = exports.Decimal = /*#__PURE__*/_react.default.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Decimal` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecateOnKeyPressWarnTriggered && onKeyPress) {
+    deprecateOnKeyPressWarnTriggered = true;
+    _logger.default.deprecate("`onKeyPress` prop in `Decimal` is deprecated and will soon be removed, please use `onKeyDown` instead.");
+  }
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
     onKeyPress: onKeyPress,
     align: align,

package/lib/components/grouped-character/grouped-character.component.js

@@ -36,6 +36,7 @@ const GroupedCharacter = exports.GroupedCharacter = /*#__PURE__*/_react.default.
   groups,
   onBlur,
   onChange,
+  onKeyDown,
   separator: rawSeparator,
   value: externalValue,
   ...rest
@@ -99,7 +100,7 @@ const GroupedCharacter = exports.GroupedCharacter = /*#__PURE__*/_react.default.
       onBlur(modifiedEvent);
     }
   };
-  const handleKeyPress = ev => {
+  const handleKeyDown = ev => {
     const {
       selectionStart,
       selectionEnd
@@ -107,16 +108,22 @@ const GroupedCharacter = exports.GroupedCharacter = /*#__PURE__*/_react.default.
 
     /* istanbul ignore next */
     const hasSelection = (selectionEnd ?? 0) - (selectionStart ?? 0) > 0;
-    if (maxRawLength === value.length && !hasSelection) {
+
+    // check if the key pressed is a character key
+    const isCharacterKey = ev.key.length === 1;
+    if (isCharacterKey && maxRawLength === value.length && !hasSelection) {
       ev.preventDefault();
     }
+    if (onKeyDown) {
+      onKeyDown(ev);
+    }
   };
   return /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, rest, {
     value: value,
     formattedValue: formatValue(value),
     onChange: handleChange,
     onBlur: handleBlur,
-    onKeyPress: handleKeyPress,
+    onKeyDown: handleKeyDown,
     ref: ref
   }));
 });

package/lib/components/step-sequence/index.d.ts

@@ -0,0 +1,4 @@
+export { default as StepSequence } from "./step-sequence.component";
+export type { StepSequenceProps } from "./step-sequence.component";
+export { default as StepSequenceItem } from "./step-sequence-item";
+export type { StepSequenceItemProps } from "./step-sequence-item";

package/lib/components/step-sequence/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "StepSequence", {
+  enumerable: true,
+  get: function () {
+    return _stepSequence.default;
+  }
+});
+Object.defineProperty(exports, "StepSequenceItem", {
+  enumerable: true,
+  get: function () {
+    return _stepSequenceItem.default;
+  }
+});
+var _stepSequence = _interopRequireDefault(require("./step-sequence.component"));
+var _stepSequenceItem = _interopRequireDefault(require("./step-sequence-item"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/step-sequence/package.json

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

package/lib/components/step-sequence/step-sequence-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./step-sequence-item.component";
+export type { StepSequenceItemProps } from "./step-sequence-item.component";

package/lib/components/step-sequence/step-sequence-item/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _stepSequenceItem.default;
+  }
+});
+var _stepSequenceItem = _interopRequireDefault(require("./step-sequence-item.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/step-sequence/step-sequence-item/package.json

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

package/lib/components/step-sequence/step-sequence-item/step-sequence-item.component.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface StepSequenceItemProps {
+    /** Aria label */
+    ariaLabel?: string;
+    /** Hidden label to be displayed if item is complete */
+    hiddenCompleteLabel?: string;
+    /** Hidden label to be displayed if item is current */
+    hiddenCurrentLabel?: string;
+    /** Value to be displayed before text for incomplete steps */
+    indicator: string;
+    /** Flag to hide the indicator for incomplete steps */
+    hideIndicator?: boolean;
+    /** Status for the step */
+    status?: "complete" | "current" | "incomplete";
+    /** Content to be displayed */
+    children: React.ReactNode;
+}
+export declare const StepSequenceItem: ({ hideIndicator, indicator, status, hiddenCompleteLabel, hiddenCurrentLabel, children, ariaLabel, ...rest }: StepSequenceItemProps) => React.JSX.Element;
+export default StepSequenceItem;

package/lib/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StepSequenceItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _stepSequenceItem = require("./step-sequence-item.style");
+var _icon = _interopRequireDefault(require("../../icon"));
+var _stepSequence = require("../step-sequence.component");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const StepSequenceItem = ({
+  hideIndicator = false,
+  indicator,
+  status = "incomplete",
+  hiddenCompleteLabel,
+  hiddenCurrentLabel,
+  children,
+  ariaLabel,
+  ...rest
+}) => {
+  const {
+    orientation
+  } = (0, _react.useContext)(_stepSequence.StepSequenceContext);
+  const indicatorText = () => {
+    return !hideIndicator ? /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StyledStepSequenceItemIndicator, null, indicator) : null;
+  };
+  const icon = () => status === "complete" ? /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "tick"
+  }) : indicatorText();
+  const hiddenLabel = () => {
+    if (hiddenCompleteLabel && status === "complete") {
+      return /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StyledStepSequenceItemHiddenLabel, null, hiddenCompleteLabel);
+    }
+    if (hiddenCurrentLabel && status === "current") {
+      return /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StyledStepSequenceItemHiddenLabel, null, hiddenCurrentLabel);
+    }
+    return null;
+  };
+  return /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StyledStepSequenceItem, _extends({
+    "data-component": "step-sequence-item",
+    orientation: orientation,
+    status: status,
+    key: `step-seq-item-${indicator}`,
+    "aria-label": ariaLabel
+  }, rest), hiddenLabel(), /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StyledStepSequenceItemContent, null, icon(), /*#__PURE__*/_react.default.createElement("span", null, children)));
+};
+exports.StepSequenceItem = StepSequenceItem;
+var _default = exports.default = StepSequenceItem;

package/lib/components/step-sequence/step-sequence-item/step-sequence-item.style.d.ts

@@ -0,0 +1,6 @@
+import { StepSequenceProps } from "../step-sequence.component";
+import { StepSequenceItemProps } from "./step-sequence-item.component";
+export declare const StyledStepSequenceItem: import("styled-components").StyledComponent<"li", any, Pick<StepSequenceItemProps, "status"> & Pick<StepSequenceProps, "orientation">, never>;
+export declare const StyledStepSequenceItemContent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledStepSequenceItemHiddenLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledStepSequenceItemIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/step-sequence/step-sequence-item/step-sequence-item.style.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledStepSequenceItemIndicator = exports.StyledStepSequenceItemHiddenLabel = exports.StyledStepSequenceItemContent = exports.StyledStepSequenceItem = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _icon = _interopRequireDefault(require("../../icon/icon.style"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 StyledStepSequenceItem = exports.StyledStepSequenceItem = _styledComponents.default.li`
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  text-align: right;
+  list-style-type: none;
+  color: var(--colorsUtilityYin055);
+
+  ${({
+  orientation,
+  status
+}) => {
+  const side = orientation === "vertical" ? "left" : "top";
+  return (0, _styledComponents.css)`
+      &::before {
+        content: "";
+        flex-grow: 1;
+        display: block;
+        margin: 0 16px;
+        border-${side}: var(--sizing025) dashed var(--colorsUtilityYin055);
+      }
+
+      & span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      ${_icon.default} {
+        margin-right: 8px;
+        color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+      }
+
+      &:first-child {
+        flex-grow: 0;
+
+        &::before {
+          display: none;
+        }
+      }
+
+      ${status === "current" && (0, _styledComponents.css)`
+          color: var(--colorsUtilityYin090);
+
+          &::before {
+            border-${side}-color: var(--colorsUtilityYin090);
+            border-${side}-style: solid;
+          }
+        `}
+
+      ${status === "complete" && (0, _styledComponents.css)`
+          color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
+
+          &::before {
+            border-${side}-color: var(
+              --colorsBaseTheme,
+              var(--colorsSemanticPositive500)
+            );
+            border-${side}-style: solid;
+          }
+        `}
+
+      ${orientation === "vertical" && (0, _styledComponents.css)`
+          flex-direction: column;
+          align-items: flex-start;
+
+          &::before {
+            flex-grow: 0;
+            border-left-width: var(--sizing025);
+            height: 100%;
+            min-height: var(--sizing300);
+            margin: 12px 8px;
+          }
+        `}
+    `;
+}}
+`;
+const StyledStepSequenceItemContent = exports.StyledStepSequenceItemContent = _styledComponents.default.span`
+  display: flex;
+`;
+const StyledStepSequenceItemHiddenLabel = exports.StyledStepSequenceItemHiddenLabel = _styledComponents.default.span`
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+const StyledStepSequenceItemIndicator = exports.StyledStepSequenceItemIndicator = _styledComponents.default.span`
+  display: block;
+  min-width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  text-align: center;
+`;

package/lib/components/step-sequence/step-sequence.component.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+export declare const StepSequenceContext: React.Context<{
+    orientation: "horizontal" | "vertical";
+}>;
+export interface StepSequenceProps extends SpaceProps {
+    /** Step sequence items to be rendered */
+    children: React.ReactNode;
+    /** The direction that step sequence items should be rendered */
+    orientation?: "horizontal" | "vertical";
+}
+export declare const StepSequence: ({ children, orientation, ...props }: StepSequenceProps) => React.JSX.Element;
+export default StepSequence;

package/lib/components/step-sequence/step-sequence.component.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StepSequenceContext = exports.StepSequence = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _stepSequence = _interopRequireDefault(require("./step-sequence.style"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const StepSequenceContext = exports.StepSequenceContext = /*#__PURE__*/_react.default.createContext({
+  orientation: "horizontal"
+});
+const StepSequence = ({
+  children,
+  orientation = "horizontal",
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_stepSequence.default, _extends({
+    "data-component": "step-sequence",
+    orientation: orientation,
+    p: 0
+  }, props), /*#__PURE__*/_react.default.createElement(StepSequenceContext.Provider, {
+    value: {
+      orientation
+    }
+  }, children));
+};
+exports.StepSequence = StepSequence;
+var _default = exports.default = StepSequence;

package/lib/components/step-sequence/step-sequence.style.d.ts

@@ -0,0 +1,4 @@
+import { SpaceProps } from "styled-system";
+import { StepSequenceProps } from "./step-sequence.component";
+declare const StyledStepSequence: import("styled-components").StyledComponent<"ol", any, Pick<StepSequenceProps, "orientation"> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+export default StyledStepSequence;

package/lib/components/step-sequence/step-sequence.style.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 && {}.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 StyledStepSequence = _styledComponents.default.ol`
+  display: flex;
+  margin: 0;
+  font-weight: var(--fontWeights500);
+
+  ${({
+  orientation
+}) => orientation === "vertical" && (0, _styledComponents.css)`
+      flex-direction: column;
+      height: 100%;
+    `}
+
+  ${_styledSystem.space}
+`;
+StyledStepSequence.defaultProps = {
+  theme: _themes.baseTheme
+};
+var _default = exports.default = StyledStepSequence;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "144.13.0",
+  "version": "144.15.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",