carbon-react 110.2.4 → 110.4.1

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

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _invariant = _interopRequireDefault(require("invariant"));
 
 var _formField = _interopRequireDefault(require("../../__internal__/form-field"));
 
@@ -17,7 +17,7 @@ var _buttonToggleGroup = _interopRequireDefault(require("./button-toggle-group.s
 
 var _buttonToggle = _interopRequireDefault(require("../button-toggle"));
 
-var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper/radio-button-mapper.component"));
+var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper"));
 
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.component"));
 
@@ -29,9 +29,11 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 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); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
+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 ButtonToggleGroup = ({
   children,
@@ -64,6 +66,14 @@ const ButtonToggleGroup = ({
     warning,
     info
   };
+  const hasCorrectItemStructure = (0, _react.useMemo)(() => {
+    const incorrectChild = _react.default.Children.toArray(children).find(child => {
+      return ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== _buttonToggle.default.displayName;
+    });
+
+    return !incorrectChild;
+  }, [children]);
+  !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `\`ButtonToggleGroup\` only accepts children of type \`${_buttonToggle.default.displayName}\``) : (0, _invariant.default)(false) : void 0;
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
@@ -94,97 +104,184 @@ const ButtonToggleGroup = ({
   }))))));
 };
 
-ButtonToggleGroup.propTypes = { ...marginPropTypes,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
+ButtonToggleGroup.propTypes = {
+  "children": _propTypes.default.node,
   "data-component": _propTypes.default.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": _propTypes.default.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": _propTypes.default.string,
-
-  /** Unique id for the root element of the component */
-  id: _propTypes.default.string.isRequired,
-
-  /** Specifies the name prop to be applied to each button in the group */
-  name: _propTypes.default.string.isRequired,
-
-  /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
-  children: (props, propName, componentName) => {
-    let error;
-    const prop = props[propName];
-
-    _react.default.Children.forEach(prop, child => {
-      if (!child) {
-        return;
-      }
-
-      if (_buttonToggle.default.displayName !== child.type.displayName) {
-        error = new Error(`\`${componentName}\` only accepts children of type \`${_buttonToggle.default.displayName}\`.`);
-      }
-    });
-
-    return error;
-  },
-
-  /** Indicate that error has occurred
-  Pass string to display icon, tooltip and red border
-  Pass true boolean to only display red border */
-  error: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Indicate that warning has occurred
-  Pass string to display icon, tooltip and orange border
-  Pass true boolean to only display orange border */
-  warning: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Indicate additional information
-  Pass string to display icon, tooltip and blue border
-  Pass true boolean to only display blue border */
-  info: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** When true, validation icon will be placed on label instead of being placed on the input */
-  validationOnLabel: _propTypes.default.bool,
-
-  /** Text for the label. */
-  label: _propTypes.default.string,
-
-  /** Text for the labels help tooltip. */
-  labelHelp: _propTypes.default.node,
-
-  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
-  labelSpacing: _propTypes.default.oneOf([1, 2]),
-
-  /** The percentage width of the ButtonToggleGroup. */
-  inputWidth: _propTypes.default.number,
-
-  /** The text for the field help. */
-  fieldHelp: _propTypes.default.string,
-
-  /** Sets the field help to inline. */
-  fieldHelpInline: _propTypes.default.bool,
-
-  /** Sets the label to be inline. */
-  labelInline: _propTypes.default.bool,
-
-  /** The percentage width of the label. */
-  labelWidth: _propTypes.default.number,
-
-  /** The alignment for the text in the label. */
-  labelAlign: _propTypes.default.string,
-
-  /** Callback fired when each RadioButton is blurred */
-  onBlur: _propTypes.default.func,
-
-  /** callback to handle change event */
-  onChange: _propTypes.default.func,
-
-  /** The value of the Button Toggle Group */
-  value: _propTypes.default.string,
-
-  /** Aria label for rendered help component */
-  helpAriaLabel: _propTypes.default.string
+  "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "fieldHelp": _propTypes.default.string,
+  "fieldHelpInline": _propTypes.default.bool,
+  "helpAriaLabel": _propTypes.default.string,
+  "id": _propTypes.default.string.isRequired,
+  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "inputWidth": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "label": _propTypes.default.string,
+  "labelAlign": _propTypes.default.oneOf(["left", "right"]),
+  "labelHelp": _propTypes.default.node,
+  "labelInline": _propTypes.default.bool,
+  "labelSpacing": _propTypes.default.oneOf([1, 2]),
+  "labelWidth": _propTypes.default.number,
+  "m": _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]),
+  "margin": _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]),
+  "marginBottom": _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]),
+  "marginLeft": _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]),
+  "marginRight": _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]),
+  "marginTop": _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]),
+  "marginX": _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]),
+  "marginY": _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]),
+  "mb": _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]),
+  "ml": _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]),
+  "mr": _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]),
+  "mt": _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]),
+  "mx": _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]),
+  "my": _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]),
+  "name": _propTypes.default.string.isRequired,
+  "onBlur": _propTypes.default.func,
+  "onChange": _propTypes.default.func,
+  "validationOnLabel": _propTypes.default.bool,
+  "value": _propTypes.default.string,
+  "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
 ButtonToggleGroup.displayName = "ButtonToggleGroup";
 var _default = ButtonToggleGroup;

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

@@ -0,0 +1,4 @@
+import { ButtonToggleGroupProps } from ".";
+import { ValidationProps } from "../../__internal__/validations";
+declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, ValidationProps & Pick<ButtonToggleGroupProps, "inputWidth">, never>;
+export default StyledButtonToggleGroup;

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

@@ -17,7 +17,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const ButtonToggleGroupStyle = _styledComponents.default.div`
+const StyledButtonToggleGroup = _styledComponents.default.div`
   display: flex;
 
   ${({
@@ -50,5 +50,5 @@ const ButtonToggleGroupStyle = _styledComponents.default.div`
     margin-left: 4px;
   }
 `;
-var _default = ButtonToggleGroupStyle;
+var _default = StyledButtonToggleGroup;
 exports.default = _default;

package/lib/components/button-toggle-group/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./button-toggle-group";
+export { default } from "./button-toggle-group.component";
+export type { ButtonToggleGroupProps } from "./button-toggle-group.component";

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

@@ -0,0 +1,37 @@
+import React from "react";
+export interface DrawerSidebarContextProps {
+    isInSidebar: boolean;
+}
+export interface DrawerProps {
+    /** Duration of a animation */
+    animationDuration?: string;
+    /** Specify an aria-label for the Drawer component */
+    "aria-label"?: string;
+    /** Sets color of sidebar's background */
+    backgroundColor?: string;
+    children: React.ReactNode;
+    /** Set the default state of expansion of the Drawer if component is meant to be used as uncontrolled */
+    defaultExpanded?: boolean;
+    /** Sets the expansion state of the Drawer if component is meant to be used as controlled */
+    expanded?: boolean;
+    expandedWidth?: string;
+    /** Sets custom height to Drawer component */
+    height?: string;
+    /** Callback fired when expansion state changes, onChange(event: object, isExpanded: boolean) */
+    onChange?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, isExpanded: boolean) => void;
+    sidebar?: React.ReactNode;
+    /** Enables expand/collapse button that controls drawer */
+    showControls?: boolean;
+    /** Sets the heading of the drawer */
+    title?: React.ReactNode;
+    /** Content to display inside of a footer */
+    footer?: React.ReactNode;
+    /** Makes the header of the drawer sticky. Title prop must also be set. */
+    stickyHeader?: boolean;
+    /** Makes the footer of the drawer sticky. Footer prop must also be set. */
+    stickyFooter?: boolean;
+}
+declare const DrawerSidebarContext: React.Context<{}>;
+export declare const Drawer: ({ defaultExpanded, expanded, onChange, children, expandedWidth, sidebar, animationDuration, backgroundColor, title, footer, showControls, height, stickyHeader, stickyFooter, ...rest }: DrawerProps) => JSX.Element;
+export { DrawerSidebarContext };
+export default Drawer;

package/lib/components/drawer/drawer.component.js

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DrawerSidebarContext = void 0;
+exports.default = exports.DrawerSidebarContext = exports.Drawer = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _invariant = _interopRequireDefault(require("invariant"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -52,17 +50,17 @@ const Drawer = ({
   stickyFooter,
   ...rest
 }) => {
-  const drawerSidebarContentRef = (0, _react.useRef)();
-  const scrollableContentRef = (0, _react.useRef)();
+  const drawerSidebarContentRef = (0, _react.useRef)(null);
+  const scrollableContentRef = (0, _react.useRef)(null);
   const isControlled = (0, _react.useRef)(expanded !== undefined);
   const [isOpening, setIsOpening] = (0, _react.useState)(false);
   const [isClosing, setIsClosing] = (0, _react.useState)(false);
   const [isExpanded, setIsExpanded] = (0, _react.useState)(isControlled.current ? expanded : defaultExpanded);
-  const timer = (0, _react.useRef)();
+  const timer = (0, _react.useRef)(null);
   const getAnimationDuration = (0, _react.useCallback)(() => {
     if (animationDuration.indexOf("ms") !== -1) {
       const animationTime = animationDuration.substring(0, animationDuration.length - 2);
-      return animationTime;
+      return parseInt(animationTime);
     }
 
     if (animationDuration.indexOf(".") !== -1 || animationDuration.indexOf("s") !== -1) {
@@ -70,11 +68,14 @@ const Drawer = ({
       return parseFloat(animationTime) * 1000;
     }
 
-    return animationDuration;
+    return parseInt(animationDuration);
   }, [animationDuration]);
   const toggleAnimation = (0, _react.useCallback)(() => {
     const timeout = getAnimationDuration();
-    clearTimeout(timer.current);
+
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
 
     if (!isExpanded) {
       setIsClosing(false);
@@ -105,14 +106,16 @@ const Drawer = ({
   }, [expanded, toggleAnimation, previousValue, showControls]);
   (0, _react.useEffect)(() => {
     return function cleanup() {
-      clearTimeout(timer.current);
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
     };
   }, []);
   const toggleDrawer = (0, _react.useCallback)(ev => {
     setIsExpanded(!isExpanded);
     if (onChange) onChange(ev, !isExpanded);
 
-    if (isExpanded) {
+    if (isExpanded && drawerSidebarContentRef.current) {
       drawerSidebarContentRef.current.scrollTop = 0;
     }
 
@@ -121,20 +124,29 @@ const Drawer = ({
   const guid = (0, _react.useRef)((0, _guid.default)());
   const sidebarId = `DrawerSidebar_${guid.current}`;
   const getClassNames = (0, _react.useCallback)(() => {
-    return (0, _classnames.default)(isExpanded ? "open" : "closed", isOpening ? "opening" : "", isClosing ? "closing" : "");
+    const classes = [isExpanded ? "open" : "closed"];
+
+    if (isOpening) {
+      classes.push("opening");
+    }
+
+    if (isClosing) {
+      classes.push("closing");
+    }
+
+    return classes.join(" ");
   }, [isExpanded, isOpening, isClosing]);
 
   const getControls = () => {
     if (showControls === undefined) return null;
-    return /*#__PURE__*/_react.default.createElement(_drawer.StyledButton, {
+    return /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarToggleButton, {
       "aria-label": "toggle sidebar",
       "aria-expanded": isExpanded,
       "aria-controls": sidebarId,
       "data-element": "drawer-toggle",
       onClick: toggleDrawer,
       isExpanded: isExpanded,
-      animationDuration: animationDuration,
-      stickyHeader: stickyHeader
+      animationDuration: animationDuration
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "chevron_right"
     }));
@@ -170,47 +182,23 @@ const Drawer = ({
   }, footer))), /*#__PURE__*/_react.default.createElement(_drawer.StyledDrawerChildren, null, children));
 };
 
+exports.Drawer = Drawer;
 Drawer.propTypes = {
-  children: _propTypes.default.node.isRequired,
-
-  /** Set the default state of expansion of the Drawer if component is meant to be used as uncontrolled */
-  defaultExpanded: _propTypes.default.bool,
-
-  /** Sets the expansion state of the Drawer if component is meant to be used as controlled */
-  expanded: _propTypes.default.bool,
-
-  /** Callback fired when expansion state changes, onChange(event: object, isExpanded: boolean) */
-  onChange: _propTypes.default.func,
-
-  /* Sidebar object either html or react component */
-  sidebar: _propTypes.default.node,
-
-  /* The (% or px) width of the expanded sidebar  */
-  expandedWidth: _propTypes.default.string,
-
-  /** Duration of a animation */
-  animationDuration: _propTypes.default.string,
-
-  /** Sets color of sidebar's background */
-  backgroundColor: _propTypes.default.string,
-
-  /** Sets custom height to Drawer component */
-  height: _propTypes.default.string,
-
-  /** Sets the heading of the drawer */
-  title: _propTypes.default.node,
-
-  /** Enables expand/collapse button that controls drawer */
-  showControls: _propTypes.default.bool,
-
-  /** Content to display inside of a footer */
-  footer: _propTypes.default.node,
-
-  /** Makes the header of the drawer sticky. Title prop must also be set. */
-  stickyHeader: _propTypes.default.bool,
-
-  /** Makes the footer of the drawer sticky. Footer prop must also be set. */
-  stickyFooter: _propTypes.default.bool
+  "animationDuration": _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "backgroundColor": _propTypes.default.string,
+  "children": _propTypes.default.node,
+  "defaultExpanded": _propTypes.default.bool,
+  "expanded": _propTypes.default.bool,
+  "expandedWidth": _propTypes.default.string,
+  "footer": _propTypes.default.node,
+  "height": _propTypes.default.string,
+  "onChange": _propTypes.default.func,
+  "showControls": _propTypes.default.bool,
+  "sidebar": _propTypes.default.node,
+  "stickyFooter": _propTypes.default.bool,
+  "stickyHeader": _propTypes.default.bool,
+  "title": _propTypes.default.node
 };
 var _default = Drawer;
 exports.default = _default;

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

@@ -0,0 +1,27 @@
+declare const StyledSidebarHeader: import("styled-components").StyledComponent<"div", any, {
+    isExpanded?: boolean | undefined;
+}, never>;
+declare const StyledSidebarTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledDrawerChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledDrawerSidebarProps {
+    isExpanded?: boolean;
+    hasControls: boolean;
+}
+declare const StyledDrawerSidebar: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledDrawerSidebarProps, never>;
+interface StyledDrawerContentProps {
+    animationDuration?: string;
+    backgroundColor?: string;
+    expandedWidth: string;
+}
+declare const StyledDrawerContent: import("styled-components").StyledComponent<"div", any, StyledDrawerContentProps, never>;
+interface StyledSidebarToggleButtonProps {
+    animationDuration?: string;
+    isExpanded?: boolean;
+}
+declare const StyledSidebarToggleButton: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+} & StyledSidebarToggleButtonProps, "type">;
+declare const StyledDrawerWrapper: import("styled-components").StyledComponent<"div", any, {
+    height: string;
+}, never>;
+export { StyledSidebarHeader, StyledDrawerWrapper, StyledDrawerContent, StyledDrawerChildren, StyledDrawerSidebar, StyledSidebarTitle, StyledSidebarToggleButton, };

package/lib/components/drawer/drawer.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledButton = exports.StyledSidebarTitle = exports.StyledDrawerSidebar = exports.StyledDrawerChildren = exports.StyledDrawerContent = exports.StyledDrawerWrapper = exports.StyledSidebarHeader = void 0;
+exports.StyledSidebarToggleButton = exports.StyledSidebarTitle = exports.StyledDrawerSidebar = exports.StyledDrawerChildren = exports.StyledDrawerContent = exports.StyledDrawerWrapper = exports.StyledSidebarHeader = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -187,7 +187,7 @@ const StyledDrawerContent = _styledComponents.default.div`
   }
 `;
 exports.StyledDrawerContent = StyledDrawerContent;
-const StyledButton = _styledComponents.default.button.attrs({
+const StyledSidebarToggleButton = _styledComponents.default.button.attrs({
   type: "button"
 })`
   ${({
@@ -223,7 +223,7 @@ const StyledButton = _styledComponents.default.button.attrs({
     `}
   `}
 `;
-exports.StyledButton = StyledButton;
+exports.StyledSidebarToggleButton = StyledSidebarToggleButton;
 const StyledDrawerWrapper = _styledComponents.default.div`
   display: flex;
   height: ${({

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

@@ -1 +1,2 @@
-export { default, DrawerSidebarContext } from "./drawer";
+export { default, DrawerSidebarContext } from "./drawer.component";
+export type { DrawerSidebarContextProps, DrawerProps, } from "./drawer.component";

package/lib/components/i18n-provider/i18n-provider.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import Locale from "../../locales";
+export interface I18nProviderProps {
+    locale?: Partial<Locale>;
+    children: React.ReactNode;
+}
+export declare const I18nProvider: ({ locale, children }: I18nProviderProps) => JSX.Element;
+export default I18nProvider;