carbon-react 110.4.0 → 110.5.1

package/lib/components/select/multi-select/multi-select.component.js

@@ -453,7 +453,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
-    multiselectValues: actualValue
+    multiselectValues: actualValue,
+    isOpen: isOpen
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
@@ -473,12 +474,12 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, accessibilityLabel), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
     accessibilityLabelId: accessibilityLabelId.current,
     activeDescendantId: activeDescendantId,
-    "aria-controls": isOpen ? selectListId.current : undefined,
+    "aria-controls": selectListId.current,
     hasTextCursor: true,
     isOpen: isOpen,
     labelId: labelId.current,
     textboxRef: textboxRef
-  }, getTextboxProps()))), isOpen && selectList);
+  }, getTextboxProps()))), selectList);
 });
 
 MultiSelect.propTypes = { ..._selectTextbox.formInputPropTypes,

package/lib/components/select/select-list/select-list.component.js

@@ -76,6 +76,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   loaderDataRole,
   listPlacement = "bottom-start",
   flipEnabled = true,
+  isOpen,
   ...listProps
 }, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = (0, _react.useState)(-1);
@@ -91,30 +92,35 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     blockScroll,
     allowScroll
   } = (0, _useScrollBlock.default)();
+  const updateListHeight = (0, _react.useCallback)(() => {
+    if (isOpen) {
+      let newHeight = listRef.current.clientHeight;
 
-  const updateListHeight = () => {
-    let newHeight = listRef.current.clientHeight;
+      if (listActionButtonRef.current) {
+        newHeight += listActionButtonRef.current.parentElement.clientHeight;
+      }
 
-    if (listActionButtonRef.current) {
-      newHeight += listActionButtonRef.current.parentElement.clientHeight;
+      setListHeight(`${newHeight}px`);
     }
-
-    setListHeight(`${newHeight}px`);
-  };
-
+  }, [isOpen]);
   const listCallbackRef = (0, _react.useCallback)(element => {
     listRef.current = element;
 
     if (element) {
       setTimeout(updateListHeight, 0);
     }
-  }, []);
+  }, [updateListHeight]);
   (0, _react.useEffect)(() => {
-    blockScroll();
+    if (isOpen) {
+      blockScroll();
+    }
+
     return () => {
-      allowScroll();
+      if (isOpen) {
+        allowScroll();
+      }
     };
-  }, [allowScroll, blockScroll]);
+  }, [allowScroll, blockScroll, isOpen]);
   (0, _react.useLayoutEffect)(() => {
     if (multiColumn) {
       setScrollbarWidth(tableRef.current.offsetWidth - tableRef.current.clientWidth);
@@ -138,6 +144,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       selectionType: "click"
     });
   }, [onSelect]);
+  const childIds = (0, _react.useMemo)(() => _react.default.Children.map(children, () => (0, _guid.default)()), [children]);
   const childrenWithListProps = (0, _react.useMemo)(() => _react.default.Children.map(children, (child, index) => {
     if (!child || child.type !== _option.default && child.type !== _optionRow.default) {
       return child;
@@ -145,13 +152,13 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     const newProps = {
       index,
-      id: (0, _guid.default)(),
+      id: childIds[index],
       onSelect: handleSelect,
       hidden: isLoading && _react.default.Children.count(children) === 1,
       ref: optionRefList[index]
     };
     return /*#__PURE__*/_react.default.cloneElement(child, newProps);
-  }), [children, handleSelect, isLoading, optionRefList]);
+  }), [children, handleSelect, isLoading, optionRefList, childIds]);
   const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(childrenWithListProps), [childrenWithListProps]);
   const lastOptionIndex = (0, _react.useMemo)(() => {
     let lastIndex = 0;
@@ -218,6 +225,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [anchorElement]);
   const handleGlobalKeydown = (0, _react.useCallback)(event => {
+    if (!isOpen) {
+      return;
+    }
+
     const {
       key
     } = event;
@@ -251,7 +262,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       focusOnAnchor();
       highlightNextItem(key);
     }
-  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor]);
+  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen]);
   const handleListScroll = (0, _react.useCallback)(event => {
     const element = event.target;
 
@@ -273,7 +284,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       window.removeEventListener("resize", assignListWidth);
     };
   }, [assignListWidth]);
-  (0, _react.useLayoutEffect)(updateListHeight, [children]);
+  (0, _react.useLayoutEffect)(updateListHeight, [children, updateListHeight]);
   (0, _react.useEffect)(() => {
     const keyboardEvent = "keydown";
     const listElement = listRef.current;
@@ -345,7 +356,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     reference: anchorRef,
     onFirstUpdate: setPlacementCallback,
     modifiers: popoverModifiers,
-    disableBackgroundUI: true
+    isOpen: isOpen
   }, /*#__PURE__*/_react.default.createElement(_selectList.StyledPopoverContainer, {
     height: listHeight,
     width: listWidth,
@@ -428,7 +439,12 @@ SelectList.propTypes = {
   listPlacement: _propTypes.default.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
 
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled: _propTypes.default.bool
+  flipEnabled: _propTypes.default.bool,
+
+  /** @private @ignore
+   * Hides the list (with CSS display: none) if not set
+   */
+  isOpen: _propTypes.default.bool
 };
 var _default = SelectList;
 exports.default = _default;

package/lib/components/select/simple-select/simple-select.component.js

@@ -356,7 +356,8 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     multiColumn: multiColumn,
     loaderDataRole: "simple-select-list-loader",
     listPlacement: listPlacement,
-    flipEnabled: flipEnabled
+    flipEnabled: flipEnabled,
+    isOpen: isOpen
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
@@ -370,12 +371,12 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
-    "aria-controls": isOpen ? selectListId.current : undefined,
+    "aria-controls": selectListId.current,
     activeDescendantId: activeDescendantId,
     labelId: labelId.current,
     isOpen: isOpen,
     textboxRef: textboxRef
-  }, getTextboxProps()))), isOpen && selectList);
+  }, getTextboxProps()))), selectList);
 });
 
 SimpleSelect.propTypes = {

package/lib/components/sidebar/__internal__/sidebar-header/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./sidebar-header.component";

package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface SidebarHeaderProps {
+    /** This component supports children. */
+    children?: React.ReactNode;
+    /** A custom id. */
+    id: string;
+}
+declare const SidebarHeader: ({ children, id }: SidebarHeaderProps) => JSX.Element;
+export default SidebarHeader;

package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js

@@ -9,33 +9,21 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _tags = _interopRequireDefault(require("../../../../__internal__/utils/helpers/tags/tags"));
-
 var _sidebarHeader = _interopRequireDefault(require("./sidebar-header.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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); }
-
 const SidebarHeader = ({
-  className,
   children,
-  id,
-  ...props
-}) => /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, _extends({
-  className: className,
-  id: id
-}, (0, _tags.default)("sidebar-header", props)), children);
+  id
+}) => /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, {
+  id: id,
+  "data-component": "sidebar-header"
+}, children);
 
 SidebarHeader.propTypes = {
-  /** This component supports children. */
-  children: _propTypes.default.node,
-
-  /** A custom class name. */
-  className: _propTypes.default.string,
-
-  /** A custom id. */
-  id: _propTypes.default.string
+  "children": _propTypes.default.node,
+  "id": _propTypes.default.string.isRequired
 };
 var _default = SidebarHeader;
 exports.default = _default;

package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.style.d.ts

@@ -0,0 +1,2 @@
+declare const SidebarHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default SidebarHeaderStyle;

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

@@ -1 +1,2 @@
-export { default, SidebarContext } from "./sidebar";
+export { default, SidebarContext } from "./sidebar.component";
+export type { SidebarProps } from "./sidebar.component";

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface SidebarContextProps {
+    isInSidebar?: boolean;
+}
+export declare const SidebarContext: React.Context<SidebarContextProps>;
+export interface SidebarProps extends PaddingProps, TagProps {
+    /** Prop to specify the aria-describedby property of the component */
+    "aria-describedby"?: string;
+    /**
+     * Prop to specify the aria-label of the component.
+     * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+     */
+    "aria-label"?: string;
+    /**
+     * Prop to specify the aria-labeledby property of the component
+     * To be used when the title prop is a custom React Node,
+     * or the component is labelled by an internal element other than the title.
+     */
+    "aria-labelledby"?: string;
+    /** Modal content */
+    children?: React.ReactNode;
+    /** Determines if the Esc Key closes the modal */
+    disableEscKey?: boolean;
+    /** Set this prop to false to hide the translucent background when the dialog is open. */
+    enableBackgroundUI?: boolean;
+    /** Node that will be used as sidebar header. */
+    header?: React.ReactNode;
+    /** A custom close event handler */
+    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
+    /** Sets the open state of the modal */
+    open: boolean;
+    /** Sets the position of sidebar, either left or right. */
+    position?: "left" | "right";
+    /** The ARIA role to be applied to the component container */
+    role?: string;
+    /** Sets the size of the sidebar when open. */
+    size?: "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
+    /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
+    focusableContainers?: React.MutableRefObject<HTMLElement>[];
+}
+export declare const Sidebar: React.ForwardRefExoticComponent<Pick<SidebarProps, keyof SidebarProps> & React.RefAttributes<HTMLDivElement>>;
+export default Sidebar;

package/lib/components/sidebar/sidebar.component.js

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SidebarContext = void 0;
+exports.default = exports.Sidebar = exports.SidebarContext = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _modal = _interopRequireDefault(require("../modal"));
 
 var _sidebar = _interopRequireDefault(require("./sidebar.style"));
@@ -39,8 +37,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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); }
 
-const paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes2.default.space);
-
 const SidebarContext = /*#__PURE__*/_react.default.createContext({});
 
 exports.SidebarContext = SidebarContext;
@@ -65,8 +61,13 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   const {
     current: titleId
   } = (0, _react.useRef)((0, _guid.default)());
-  let sidebarRef = (0, _react.useRef)(null);
-  if (ref) sidebarRef = ref;
+  const sidebarRef = (0, _react.useRef)(null);
+  const setRefs = (0, _react.useCallback)(reference => {
+    sidebarRef.current = reference;
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") ref(reference);
+  }, [ref]);
 
   const closeIcon = () => {
     if (!onCancel) return null;
@@ -90,7 +91,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": !ariaLabelledBy && !ariaLabel ? titleId : ariaLabelledBy,
-    ref: sidebarRef,
+    ref: setRefs,
     position: position,
     size: size,
     "data-element": "sidebar",
@@ -117,8 +118,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
-    enableBackgroundUI: enableBackgroundUI,
-    className: "carbon-sidebar"
+    enableBackgroundUI: enableBackgroundUI
   }, componentTags), enableBackgroundUI ? sidebar : /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     wrapperRef: sidebarRef,
     isOpen: open,
@@ -126,50 +126,187 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   }, sidebar));
 });
 
+exports.Sidebar = Sidebar;
 Sidebar.propTypes = {
-  /** Styled system padding props to apply to Sidebar content */
-  ...paddingPropTypes,
-
-  /** Prop to specify the aria-describedby property of the component */
   "aria-describedby": _propTypes.default.string,
-
-  /** Prop to specify the aria-label of the component */
   "aria-label": _propTypes.default.string,
-
-  /** Prop to specify the aria-labeledby property of the component */
   "aria-labelledby": _propTypes.default.string,
-
-  /** Modal content */
-  children: _propTypes.default.node,
-
-  /** A custom close event handler */
-  onCancel: _propTypes.default.func,
-
-  /** Determines if the Esc Key closes the modal */
-  disableEscKey: _propTypes.default.bool,
-
-  /** A boolean to track the open state of the dialog */
-  open: _propTypes.default.bool.isRequired,
-
-  /** Set this prop to false to hide the translucent background when the dialog is open. */
-  enableBackgroundUI: _propTypes.default.bool,
-
-  /** Sets the position of sidebar, either left or right. */
-  position: _propTypes.default.oneOf(["left", "right"]),
-
-  /** Sets the size of the sidebar when open. */
-  size: _propTypes.default.oneOf(["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
-
-  /** Node that will be used as sidebar header. */
-  header: _propTypes.default.node,
-
-  /** The ARIA role to be applied to the container */
-  role: _propTypes.default.string,
-
-  /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
-  focusableContainers: _propTypes.default.arrayOf(_propTypes.default.shape({
-    current: _propTypes.default.any
-  }))
+  "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "disableEscKey": _propTypes.default.bool,
+  "enableBackgroundUI": _propTypes.default.bool,
+  "focusableContainers": _propTypes.default.arrayOf(_propTypes.default.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return new Error("Prop '" + propName + "' is required but wasn't specified");
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })),
+  "header": _propTypes.default.node,
+  "onCancel": _propTypes.default.func,
+  "open": _propTypes.default.bool.isRequired,
+  "p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "padding": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pl": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "position": _propTypes.default.oneOf(["left", "right"]),
+  "pr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "px": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "py": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "role": _propTypes.default.string,
+  "size": _propTypes.default.oneOf(["extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"])
 };
+Sidebar.displayName = "Sidebar";
 var _default = Sidebar;
 exports.default = _default;

package/lib/components/sidebar/sidebar.config.d.ts

@@ -0,0 +1,11 @@
+export declare const SIDEBAR_SIZES_CSS: {
+    "extra-small": string;
+    small: string;
+    "medium-small": string;
+    medium: string;
+    "medium-large": string;
+    large: string;
+    "extra-large": string;
+};
+export declare const SIDEBAR_SIZES: string[];
+export declare const SIDEBAR_ALIGNMENTS: string[];

package/lib/components/sidebar/sidebar.style.d.ts

@@ -0,0 +1,8 @@
+import { SidebarProps } from "./sidebar.component";
+declare type StyledSidebarProps = {
+    onCancel?: SidebarProps["onCancel"];
+    position?: SidebarProps["position"];
+    size?: SidebarProps["size"];
+};
+declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps, never>;
+export default StyledSidebar;

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

@@ -1,2 +1,4 @@
-export { default as StepSequence } from "./step-sequence";
-export { default as StepSequenceItem } from "./step-sequence-item/step-sequence-item";
+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/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/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 uncomplete steps */
+    indicator: string;
+    /** Flag to hide the indicator for uncomplete 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) => JSX.Element;
+export default StepSequenceItem;