carbon-react 138.2.2 → 139.0.0

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

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _buttonToggle = require("./button-toggle.style");
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
-var _buttonToggleGroup = require("./button-toggle-group/button-toggle-group.component");
+var _buttonToggleGroup = _interopRequireDefault(require("./button-toggle-group/__internal__/button-toggle-group.context"));
 var _buttonToggleIcon = _interopRequireDefault(require("./button-toggle-icon.component"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _inputBehaviour = require("../../__internal__/input-behaviour");
@@ -60,7 +60,7 @@ const ButtonToggle = ({
     firstButton,
     childButtonCallbackRef,
     hintTextId
-  } = (0, _react.useContext)(_buttonToggleGroup.ButtonToggleGroupContext);
+  } = (0, _react.useContext)(_buttonToggleGroup.default);
   const callbackRef = element => {
     buttonRef.current = element;
     if (childButtonCallbackRef) {

package/lib/components/carbon-provider/__internal__/new-validation.context.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface NewValidationContextProps {
+    /** Feature flag for opting in to the latest validation designs for components that support it.
+     *
+     * NOTE - Will eventually be set to `true` by default in the future. */
+    validationRedesignOptIn?: boolean;
+    /** Feature flag for opting out of styling components to have rounded corners.
+     *
+     * NOTE - Will eventually be set to `false` by default in the future. */
+    roundedCornersOptOut?: boolean;
+    focusRedesignOptOut?: boolean;
+}
+declare const _default: React.Context<NewValidationContextProps>;
+export default _default;

package/lib/components/carbon-provider/__internal__/top-modal-provider.component.d.ts

@@ -0,0 +1,5 @@
+import React, { ReactNode } from "react";
+export declare const TopModalProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export default TopModalProvider;

package/lib/components/carbon-provider/{top-modal-context.js → __internal__/top-modal-provider.component.js}

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TopModalContextProvider = void 0;
+exports.default = exports.TopModalProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _topModal = _interopRequireDefault(require("./top-modal.context"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.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 TopModalContext = /*#__PURE__*/(0, _react.createContext)({
-  topModal: null
-});
-const TopModalContextProvider = ({
+const TopModalProvider = ({
   children
 }) => {
   const [topModal, setTopModal] = (0, _react.useState)(null);
@@ -30,11 +30,11 @@ const TopModalContextProvider = ({
       window.__CARBON_INTERNALS_MODAL_SETTER_LIST = window.__CARBON_INTERNALS_MODAL_SETTER_LIST?.filter(setter => setter !== setTopModal);
     };
   }, []);
-  return /*#__PURE__*/_react.default.createElement(TopModalContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_topModal.default.Provider, {
     value: {
       topModal
     }
   }, children);
 };
-exports.TopModalContextProvider = TopModalContextProvider;
-var _default = exports.default = TopModalContext;
+exports.TopModalProvider = TopModalProvider;
+var _default = exports.default = TopModalProvider;

package/lib/components/carbon-provider/__internal__/top-modal.context.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare type TopModalContextProps = {
+    topModal: HTMLElement | null;
+};
+declare const _default: React.Context<TopModalContextProps>;
+export default _default;

package/lib/components/carbon-provider/__internal__/top-modal.context.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = /*#__PURE__*/_react.default.createContext({
+  topModal: null
+});

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

@@ -1,17 +1,10 @@
 import React from "react";
 import type { ThemeObject } from "../../style/themes";
-export interface CarbonProviderProps {
+import { NewValidationContextProps } from "./__internal__/new-validation.context";
+export interface CarbonProviderProps extends NewValidationContextProps {
     children: React.ReactNode;
     /** Theme which specifies styles to apply to all child components. Set to `sageTheme` by default. */
     theme?: Partial<ThemeObject>;
-    /** Feature flag for opting in to the new validation redesign for components that support it.
-     *
-     * NOTE - Will eventually be set to `true` by default in the future. */
-    validationRedesignOptIn?: boolean;
-    /** Feature flag for opting out of styling components to have rounded corners. */
-    roundedCornersOptOut?: boolean;
-    focusRedesignOptOut?: boolean;
 }
-export declare const NewValidationContext: React.Context<Pick<CarbonProviderProps, "validationRedesignOptIn" | "roundedCornersOptOut" | "focusRedesignOptOut">>;
 export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, roundedCornersOptOut, focusRedesignOptOut, }: CarbonProviderProps) => React.JSX.Element;
 export default CarbonProvider;

package/lib/components/carbon-provider/carbon-provider.component.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.NewValidationContext = exports.CarbonProvider = void 0;
+exports.default = exports.CarbonProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = require("styled-components");
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider"));
 var _themes = require("../../style/themes");
-var _topModalContext = require("./top-modal-context");
+var _newValidation = _interopRequireDefault(require("./__internal__/new-validation.context"));
+var _topModalProvider = _interopRequireDefault(require("./__internal__/top-modal-provider.component"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const NewValidationContext = exports.NewValidationContext = /*#__PURE__*/(0, _react.createContext)({});
 const CarbonProvider = ({
   children,
   theme = _themes.sageTheme,
@@ -24,7 +24,7 @@ const CarbonProvider = ({
   const {
     roundedCornersOptOut: existingRoundedCornersOptOut,
     focusRedesignOptOut: existingFocusRedesignOptOut
-  } = (0, _react.useContext)(NewValidationContext);
+  } = (0, _react.useContext)(_newValidation.default);
   const roundedCornersOptOutValue = existingRoundedCornersOptOut || roundedCornersOptOut;
   const focusRedesignOptOutValue = existingFocusRedesignOptOut || focusRedesignOptOut;
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
@@ -33,12 +33,12 @@ const CarbonProvider = ({
       roundedCornersOptOut: roundedCornersOptOutValue,
       focusRedesignOptOut: focusRedesignOptOutValue
     }
-  }, /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(NewValidationContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(_newValidation.default.Provider, {
     value: {
       validationRedesignOptIn,
       roundedCornersOptOut: roundedCornersOptOutValue
     }
-  }, /*#__PURE__*/_react.default.createElement(_topModalContext.TopModalContextProvider, null, children))));
+  }, /*#__PURE__*/_react.default.createElement(_topModalProvider.default, null, children))));
 };
 exports.CarbonProvider = CarbonProvider;
 var _default = exports.default = CarbonProvider;

package/lib/components/card/__internal__/{card-context/index.d.ts → card.context.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import { CardSpacing } from "../../card.config";
+import { CardSpacing } from "../card.config";
 export interface CardContextProps {
     /** Sets the level of roundness of the corners, "default" is 8px and "large" is 16px */
     roundness?: "default" | "large";

package/lib/components/card/card-footer/card-footer.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { CardContextProps } from "../__internal__/card-context";
+import { CardContextProps } from "../__internal__/card.context";
 import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
 export interface CardFooterProps extends SpaceProps, Pick<CardContextProps, "roundness">, Pick<TagProps, "data-element" | "data-role"> {
     /** Child nodes */

package/lib/components/card/card-footer/card-footer.component.js

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../../style/utils");
 var _cardFooter = _interopRequireDefault(require("./card-footer.style"));
-var _cardContext = _interopRequireDefault(require("../__internal__/card-context"));
+var _card = _interopRequireDefault(require("../__internal__/card.context"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -22,7 +22,7 @@ const CardFooter = ({
   const {
     roundness,
     spacing
-  } = (0, _react.useContext)(_cardContext.default);
+  } = (0, _react.useContext)(_card.default);
   return /*#__PURE__*/_react.default.createElement(_cardFooter.default, _extends({
     spacing: spacing,
     variant: variant

package/lib/components/card/card-footer/card-footer.style.d.ts

@@ -1,5 +1,5 @@
 import { SpaceProps } from "styled-system";
-import { CardContextProps } from "../__internal__/card-context";
+import { CardContextProps } from "../__internal__/card.context";
 import { CardFooterProps } from "./card-footer.component";
 export interface StyledCardFooterProps extends SpaceProps {
     /** Specify styling variant to render */

package/lib/components/card/card-row/card-row.component.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../../style/utils");
 var _cardRow = _interopRequireDefault(require("./card-row.style"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
-var _cardContext = _interopRequireDefault(require("../__internal__/card-context"));
+var _card = _interopRequireDefault(require("../__internal__/card.context"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -21,7 +21,7 @@ const CardRow = ({
 }) => {
   const {
     spacing
-  } = (0, _react.useContext)(_cardContext.default);
+  } = (0, _react.useContext)(_card.default);
   const id = (0, _react.useRef)((0, _guid.default)());
   return /*#__PURE__*/_react.default.createElement(_cardRow.default, _extends({
     id: id.current,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
-import { CardContextProps } from "./__internal__/card-context";
+import { CardContextProps } from "./__internal__/card.context";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;

package/lib/components/card/card.component.js

@@ -7,8 +7,8 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../style/utils");
-var _cardContext = _interopRequireDefault(require("./__internal__/card-context"));
-var _card = require("./card.style");
+var _card = _interopRequireDefault(require("./__internal__/card.context"));
+var _card2 = require("./card.style");
 var _icon = _interopRequireDefault(require("../icon"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -42,7 +42,7 @@ const Card = ({
     // eslint-disable-next-line no-console
     console.warn("This `Card` is interactive you should use the `footer` prop to render a `CardFooter` to avoid potential accessibility issues");
   }
-  return /*#__PURE__*/_react.default.createElement(_card.StyledCard, _extends({
+  return /*#__PURE__*/_react.default.createElement(_card2.StyledCard, _extends({
     cardWidth: width,
     interactive: interactive,
     draggable: !!draggable,
@@ -56,12 +56,12 @@ const Card = ({
     "data-role": dataRole
   })), draggable && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "drag"
-  }), /*#__PURE__*/_react.default.createElement(_cardContext.default.Provider, {
+  }), /*#__PURE__*/_react.default.createElement(_card.default.Provider, {
     value: {
       roundness,
       spacing
     }
-  }, /*#__PURE__*/_react.default.createElement(_card.StyledCardContent, {
+  }, /*#__PURE__*/_react.default.createElement(_card2.StyledCardContent, {
     "data-element": "card-content-container",
     onClick: !draggable ? onClick : undefined,
     href: !draggable ? href : undefined,

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

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
-import { CardContextProps } from "./__internal__/card-context";
+import { CardContextProps } from "./__internal__/card.context";
 import { CardProps } from "./card.component";
 export declare const paddingSizes: {
     small: string;

package/lib/components/checkbox/checkbox-group/__internal__/checkbox-group.context.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ValidationProps } from "../../../../__internal__/validations";
+declare const _default: React.Context<ValidationProps>;
+export default _default;

package/lib/components/checkbox/checkbox-group/__internal__/checkbox-group.context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = /*#__PURE__*/_react.default.createContext({});

package/lib/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -30,7 +30,6 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** When true, Checkboxes are in line */
     inline?: boolean;
 }
-export declare const CheckboxGroupContext: React.Context<ValidationProps>;
 export declare const CheckboxGroup: {
     (props: CheckboxGroupProps): React.JSX.Element;
     displayName: string;

package/lib/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CheckboxGroupContext = exports.CheckboxGroup = void 0;
+exports.default = exports.CheckboxGroup = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
@@ -12,19 +12,19 @@ var _fieldset = _interopRequireDefault(require("../../../__internal__/fieldset")
 var _utils = require("../../../style/utils");
 var _tooltipProvider = require("../../../__internal__/tooltip-provider");
 var _formSpacingProvider = _interopRequireDefault(require("../../../__internal__/form-spacing-provider"));
-var _carbonProvider = require("../../carbon-provider/carbon-provider.component");
+var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
 var _validationMessage = _interopRequireDefault(require("../../../__internal__/validation-message/validation-message.component"));
 var _box = _interopRequireDefault(require("../../box"));
 var _textbox = require("../../textbox/textbox.style");
+var _checkboxGroup2 = _interopRequireDefault(require("./__internal__/checkbox-group.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const CheckboxGroupContext = exports.CheckboxGroupContext = /*#__PURE__*/_react.default.createContext({});
 const CheckboxGroup = props => {
   const {
     validationRedesignOptIn
-  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
+  } = (0, _react.useContext)(_newValidation.default);
   const {
     children,
     legend,
@@ -67,7 +67,7 @@ const CheckboxGroup = props => {
     "data-role": "checkbox-group",
     legendInline: legendInline,
     inline: inline
-  }, /*#__PURE__*/_react.default.createElement(CheckboxGroupContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_checkboxGroup2.default.Provider, {
     value: {
       error: !!error,
       warning: !!warning
@@ -93,7 +93,7 @@ const CheckboxGroup = props => {
     "data-component": "checkbox-group",
     "data-role": "checkbox-group",
     legendInline: legendInline
-  }, /*#__PURE__*/_react.default.createElement(CheckboxGroupContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_checkboxGroup2.default.Provider, {
     value: {
       error: !!error,
       warning: !!warning,

package/lib/components/checkbox/checkbox.component.js

@@ -11,10 +11,10 @@ var _checkableInput = _interopRequireDefault(require("../../__internal__/checkab
 var _checkboxSvg = _interopRequireDefault(require("./checkbox-svg.component"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
-var _checkboxGroup = require("./checkbox-group/checkbox-group.component");
+var _checkboxGroup = _interopRequireDefault(require("./checkbox-group/__internal__/checkbox-group.context"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
-var _carbonProvider = require("../carbon-provider/carbon-provider.component");
+var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.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; }
@@ -57,10 +57,10 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef(({
 }, ref) => {
   const {
     validationRedesignOptIn
-  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
+  } = (0, _react.useContext)(_newValidation.default);
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
   const adaptiveSpacingSmallScreen = !!(adaptiveSpacingBreakpoint && !largeScreen);
-  const checkboxGroupContext = (0, _react.useContext)(_checkboxGroup.CheckboxGroupContext);
+  const checkboxGroupContext = (0, _react.useContext)(_checkboxGroup.default);
   const {
     error: contextError,
     warning: contextWarning,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { TextboxProps } from "../textbox";
 import { PickerProps } from "./__internal__/date-picker";
-import { InputName } from "../date-range/date-range.context";
+import { InputName } from "../date-range/__internal__/date-range.context";
 export interface DateChangeEvent {
     target: {
         id?: string;

package/lib/components/date/date.component.js

@@ -14,7 +14,7 @@ var _dateFormats = _interopRequireDefault(require("./__internal__/date-formats")
 var _date = _interopRequireDefault(require("./date.style"));
 var _textbox = _interopRequireDefault(require("../textbox"));
 var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
-var _dateRange = _interopRequireDefault(require("../date-range/date-range.context"));
+var _dateRange = _interopRequireDefault(require("../date-range/__internal__/date-range.context"));
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));

package/lib/components/date-range/__internal__/date-range.context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = /*#__PURE__*/_react.default.createContext({});

package/lib/components/date-range/date-range.component.js

@@ -15,7 +15,7 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
 var _dateFormats = _interopRequireDefault(require("../date/__internal__/date-formats"));
-var _dateRange2 = _interopRequireDefault(require("./date-range.context"));
+var _dateRange2 = _interopRequireDefault(require("./__internal__/date-range.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.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; }

package/lib/components/date-range/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from "./date-range.component";
 export type { DateRangeChangeEvent } from "./date-range.component";
-export type { DateRangeContextProps } from "./date-range.context";
+export type { DateRangeContextProps } from "./__internal__/date-range.context";

package/lib/components/drawer/__internal__/drawer-sidebar.context.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface DrawerSidebarContextProps {
+    isInSidebar: boolean;
+}
+declare const _default: React.Context<DrawerSidebarContextProps>;
+export default _default;

package/lib/components/drawer/__internal__/drawer-sidebar.context.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = /*#__PURE__*/_react.default.createContext({
+  isInSidebar: false
+});

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

@@ -1,8 +1,7 @@
 import React from "react";
-export interface DrawerSidebarContextProps {
-    isInSidebar: boolean;
-}
-export interface DrawerProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import DrawerSidebarContext from "./__internal__/drawer-sidebar.context";
+export interface DrawerProps extends Omit<TagProps, "data-component"> {
     /** Duration of a animation */
     animationDuration?: string;
     /** Specify an aria-label for the Drawer component */
@@ -31,7 +30,6 @@ export interface DrawerProps {
     /** Makes the footer of the drawer sticky. Footer prop must also be set. */
     stickyFooter?: boolean;
 }
-declare const DrawerSidebarContext: React.Context<Partial<DrawerSidebarContextProps>>;
-export declare const Drawer: ({ defaultExpanded, expanded, onChange, children, expandedWidth, sidebar, animationDuration, backgroundColor, title, footer, showControls, height, stickyHeader, stickyFooter, ...rest }: DrawerProps) => React.JSX.Element;
+export declare const Drawer: ({ "aria-label": ariaLabel, "data-element": dataElement, "data-role": dataRole, defaultExpanded, expanded, onChange, children, expandedWidth, sidebar, animationDuration, backgroundColor, title, footer, showControls, height, stickyHeader, stickyFooter, }: DrawerProps) => React.JSX.Element;
 export { DrawerSidebarContext };
 export default Drawer;

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

@@ -3,7 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DrawerSidebarContext = exports.Drawer = void 0;
+exports.Drawer = void 0;
+Object.defineProperty(exports, "DrawerSidebarContext", {
+  enumerable: true,
+  get: function () {
+    return _drawerSidebar.default;
+  }
+});
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _invariant = _interopRequireDefault(require("invariant"));
@@ -12,12 +19,14 @@ var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/useP
 var _icon = _interopRequireDefault(require("../icon"));
 var _drawer = require("./drawer.style");
 var _stickyFooter = _interopRequireDefault(require("../../__internal__/sticky-footer"));
+var _drawerSidebar = _interopRequireDefault(require("./__internal__/drawer-sidebar.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const DrawerSidebarContext = exports.DrawerSidebarContext = /*#__PURE__*/_react.default.createContext({});
 const Drawer = ({
+  "aria-label": ariaLabel,
+  "data-element": dataElement,
+  "data-role": dataRole = "drawer",
   defaultExpanded = true,
   expanded,
   onChange,
@@ -31,8 +40,7 @@ const Drawer = ({
   showControls,
   height = "100%",
   stickyHeader,
-  stickyFooter,
-  ...rest
+  stickyFooter
 }) => {
   const drawerSidebarContentRef = (0, _react.useRef)(null);
   const scrollableContentRef = (0, _react.useRef)(null);
@@ -123,17 +131,22 @@ const Drawer = ({
       type: "chevron_right"
     }));
   };
-  return /*#__PURE__*/_react.default.createElement(_drawer.StyledDrawerWrapper, _extends({
+  return /*#__PURE__*/_react.default.createElement(_drawer.StyledDrawerWrapper, {
+    "aria-label": ariaLabel,
     "data-component": "drawer",
+    "data-element": dataElement,
+    "data-role": dataRole,
     height: height
-  }, rest), /*#__PURE__*/_react.default.createElement(_drawer.StyledDrawerContent, {
+  }, /*#__PURE__*/_react.default.createElement(_drawer.StyledDrawerContent, {
     expandedWidth: expandedWidth,
     animationDuration: animationDuration,
     className: getClassNames(),
     ref: drawerSidebarContentRef,
     backgroundColor: backgroundColor,
-    "data-element": "drawer-content"
+    "data-element": "drawer-content",
+    "data-role": "drawer-content"
   }, stickyHeader && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarHeader, {
+    "data-role": "drawer-sidebar-header",
     isExpanded: isExpanded
   }, title && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarTitle, null, title), getControls()), !stickyHeader && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarTitle, null, title), getControls()), /*#__PURE__*/_react.default.createElement(_drawer.StyledDrawerSidebar, {
     hasControls: !!showControls,
@@ -143,7 +156,7 @@ const Drawer = ({
     overflowY: isExpanded ? "auto" : undefined,
     scrollVariant: "light",
     ref: scrollableContentRef
-  }, /*#__PURE__*/_react.default.createElement(DrawerSidebarContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_drawerSidebar.default.Provider, {
     value: {
       isInSidebar: true
     }

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

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

package/lib/components/drawer/index.js

@@ -3,18 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "DrawerSidebarContext", {
-  enumerable: true,
-  get: function () {
-    return _drawer.DrawerSidebarContext;
-  }
-});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
     return _drawer.default;
   }
 });
-var _drawer = _interopRequireWildcard(require("./drawer.component"));
-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; }
+var _drawer = _interopRequireDefault(require("./drawer.component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/duelling-picklist/duelling-picklist.component.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../style/utils");
 var _duellingPicklist = require("./duelling-picklist.style");
 var _picklist = require("./picklist/picklist.component");
-var _duellingPicklist2 = _interopRequireDefault(require("./duelling-picklist.context"));
+var _duellingPicklist2 = _interopRequireDefault(require("./__internal__/duelling-picklist.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.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; }

package/lib/components/duelling-picklist/picklist/picklist.component.js

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _picklist = require("./picklist.style");
-var _duellingPicklist = _interopRequireDefault(require("../duelling-picklist.context"));
+var _duellingPicklist = _interopRequireDefault(require("../__internal__/duelling-picklist.context"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _picklistGroup = _interopRequireDefault(require("../picklist-group/picklist-group.component"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }