carbon-react 153.7.1 → 154.0.0

package/esm/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.js

@@ -2,9 +2,9 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useState, useContext } from "react";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
-import VerticalMenuFullScreenContext from "../vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context";
 import { StyledVerticalMenuItem, StyledTitle, StyledAdornment, StyledList, StyledChevronIcon, StyledTitleIcon } from "../vertical-menu.style";
 import MenuItemContext from "./__internal__/menu-item.context";
+import { useVerticalMenuContext } from "../__internal__/vertical-menu.context";
 export const VerticalMenuItem = ({
   defaultOpen = false,
   title,
@@ -26,7 +26,7 @@ export const VerticalMenuItem = ({
   } = useContext(MenuItemContext);
   const {
     isFullScreen
-  } = useContext(VerticalMenuFullScreenContext);
+  } = useVerticalMenuContext();
   const renderAdornment = () => typeof adornment === "function" ? adornment(isOpen) : adornment;
   const shouldDisplayActiveState = typeof active === "function" ? active(isOpen) : active;
   let itemProps = {};

package/esm/components/vertical-menu/vertical-menu.component.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from "react";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { StyledVerticalMenu, StyledList } from "./vertical-menu.style";
+import { VerticalMenuProvider } from "./__internal__/vertical-menu.context";
 export const VerticalMenu = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -21,6 +22,10 @@ export const VerticalMenu = ({
     overflow: "auto",
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, tagComponent("vertical-menu", rest)), /*#__PURE__*/React.createElement(StyledList, null, children));
+  }, tagComponent("vertical-menu", rest)), /*#__PURE__*/React.createElement(StyledList, null, /*#__PURE__*/React.createElement(VerticalMenuProvider, {
+    value: {
+      isFullScreen: false
+    }
+  }, children)));
 };
 export default VerticalMenu;

package/lib/__internal__/utils/{createStrictContext.js → createStrictContext/createStrictContext.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _logger = _interopRequireDefault(require("./logger"));
+var _logger = _interopRequireDefault(require("../logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Creates a React context with a provider and a hook for accessing the context.

package/lib/__internal__/utils/createStrictContext/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./createStrictContext";

package/lib/__internal__/utils/createStrictContext/index.js

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

package/lib/__internal__/utils/createStrictContext/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/__internal__/utils/createStrictContext/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/action-popover/__internal__/action-popover.context.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 export type Alignment = "left" | "right";
 type ActionPopoverContextType = {
     setOpenPopover: (isOpen: boolean) => void;
@@ -6,5 +6,6 @@ type ActionPopoverContextType = {
     submenuPosition: Alignment;
     isOpenPopover: boolean;
 };
-declare const ActionPopoverContext: React.Context<ActionPopoverContextType | null>;
-export default ActionPopoverContext;
+export declare const ActionPopoverProvider: import("react").Provider<ActionPopoverContextType | null>;
+export declare const useActionPopoverContext: () => ActionPopoverContextType;
+export {};

package/lib/components/action-popover/__internal__/action-popover.context.js

@@ -3,8 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.useActionPopoverContext = exports.ActionPopoverProvider = void 0;
+var _react = require("react");
+var _invariant = _interopRequireDefault(require("invariant"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ActionPopoverContext = /*#__PURE__*/_react.default.createContext(null);
-var _default = exports.default = ActionPopoverContext;
+const ActionPopoverContext = /*#__PURE__*/(0, _react.createContext)(null);
+const ActionPopoverProvider = exports.ActionPopoverProvider = ActionPopoverContext.Provider;
+const useActionPopoverContext = () => {
+  const context = (0, _react.useContext)(ActionPopoverContext);
+  !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Carbon ActionPopover: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.") : (0, _invariant.default)(false) : void 0;
+  return context;
+};
+exports.useActionPopoverContext = useActionPopoverContext;

package/lib/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -9,7 +9,7 @@ var _invariant = _interopRequireDefault(require("invariant"));
 var _actionPopover = require("../action-popover.style");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _actionPopover2 = _interopRequireDefault(require("../__internal__/action-popover.context"));
+var _actionPopover2 = require("../__internal__/action-popover.context");
 var _actionPopoverMenu = _interopRequireDefault(require("../action-popover-menu/action-popover-menu.component"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -56,15 +56,13 @@ const ActionPopoverItem = ({
   isASubmenu = false,
   ...rest
 }) => {
-  const context = (0, _react.useContext)(_actionPopover2.default);
-  !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverItem must be used within an ActionPopover component") : (0, _invariant.default)(false) : void 0;
   !(/*#__PURE__*/_react.default.isValidElement(submenu) ? submenu.type === _actionPopoverMenu.default : true) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`") : (0, _invariant.default)(false) : void 0;
   const {
     setOpenPopover,
     isOpenPopover,
     focusButton,
     submenuPosition
-  } = context;
+  } = (0, _actionPopover2.useActionPopoverContext)();
   const isHref = !!href;
   const [containerPosition, setContainerPosition] = (0, _react.useState)(undefined);
   const [guid] = (0, _react.useState)((0, _guid.default)());

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -10,7 +10,7 @@ var _actionPopover = require("../action-popover.style");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _actionPopoverItem = _interopRequireDefault(require("../action-popover-item/action-popover-item.component"));
 var _actionPopoverDivider = _interopRequireDefault(require("../action-popover-divider/action-popover-divider.component"));
-var _actionPopover2 = _interopRequireDefault(require("../__internal__/action-popover.context"));
+var _actionPopover2 = require("../__internal__/action-popover.context");
 var _actionPopoverUtils = require("../__internal__/action-popover-utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -29,12 +29,10 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
   isASubmenu,
   ...rest
 }, ref) => {
-  const context = (0, _react.useContext)(_actionPopover2.default);
-  !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverMenu must be used within an ActionPopover component") : (0, _invariant.default)(false) : void 0;
   const {
     focusButton,
     submenuPosition
-  } = context;
+  } = (0, _actionPopover2.useActionPopoverContext)();
   !(setOpen && setFocusIndex && typeof focusIndex !== "undefined") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component") : (0, _invariant.default)(false) : void 0;
   const hasProperChildren = (0, _react.useMemo)(() => {
     const incorrectChild = _react.default.Children.toArray(children).find(child => ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== "ActionPopoverItem" && child.type.displayName !== "ActionPopoverDivider");

package/lib/components/action-popover/action-popover.component.js

@@ -15,7 +15,7 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 var _actionPopoverMenu = _interopRequireDefault(require("./action-popover-menu/action-popover-menu.component"));
 var _actionPopoverItem = _interopRequireDefault(require("./action-popover-item/action-popover-item.component"));
 var _actionPopoverDivider = _interopRequireDefault(require("./action-popover-divider/action-popover-divider.component"));
-var _actionPopover2 = _interopRequireDefault(require("./__internal__/action-popover.context"));
+var _actionPopover2 = require("./__internal__/action-popover.context");
 var _useModalManager = _interopRequireDefault(require("../../hooks/__internal__/useModalManager"));
 var _actionPopoverUtils = require("./__internal__/action-popover-utils");
 var _flatTable = _interopRequireDefault(require("../flat-table/__internal__/flat-table.context"));
@@ -217,7 +217,7 @@ const ActionPopover = exports.ActionPopover = /*#__PURE__*/(0, _react.forwardRef
     onClick: onButtonClick,
     isOpen,
     ref: buttonRef
-  }, rest, (0, _tags.default)("action-popover-wrapper", rest)), menuButton(menuID), /*#__PURE__*/_react.default.createElement(_actionPopover2.default.Provider, {
+  }, rest, (0, _tags.default)("action-popover-wrapper", rest)), menuButton(menuID), /*#__PURE__*/_react.default.createElement(_actionPopover2.ActionPopoverProvider, {
     value: {
       setOpenPopover: setOpen,
       focusButton,

package/lib/components/breadcrumbs/__internal__/breadcrumbs.context.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
+/// <reference types="react" />
 export type BreadcrumbsContextType = {
     isDarkBackground: boolean;
 };
-declare const BreadcrumbsContext: React.Context<BreadcrumbsContextType>;
-export default BreadcrumbsContext;
+declare const BreadcrumbsProvider: import("react").Provider<BreadcrumbsContextType | null>, useBreadcrumbsContext: () => BreadcrumbsContextType;
+export { BreadcrumbsProvider, useBreadcrumbsContext };

package/lib/components/breadcrumbs/__internal__/breadcrumbs.context.js

@@ -3,10 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.useBreadcrumbsContext = exports.BreadcrumbsProvider = void 0;
+var _createStrictContext = _interopRequireDefault(require("../../../__internal__/utils/createStrictContext"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const BreadcrumbsContext = /*#__PURE__*/_react.default.createContext({
-  isDarkBackground: false
+const [BreadcrumbsProvider, useBreadcrumbsContext] = (0, _createStrictContext.default)({
+  name: "BreadcrumbsContext",
+  errorMessage: "Carbon Breadcrumbs: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    isDarkBackground: false
+  }
 });
-var _default = exports.default = BreadcrumbsContext;
+exports.useBreadcrumbsContext = useBreadcrumbsContext;
+exports.BreadcrumbsProvider = BreadcrumbsProvider;

package/lib/components/breadcrumbs/breadcrumbs.component.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _breadcrumbs = _interopRequireDefault(require("./breadcrumbs.style"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
-var _breadcrumbs2 = _interopRequireDefault(require("./__internal__/breadcrumbs.context"));
+var _breadcrumbs2 = require("./__internal__/breadcrumbs.context");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/_react.default.forwardRef(({
@@ -17,7 +17,7 @@ const Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/_react.default.forwardRef
   ...rest
 }, ref) => {
   const l = (0, _useLocale.default)();
-  return /*#__PURE__*/_react.default.createElement(_breadcrumbs2.default.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_breadcrumbs2.BreadcrumbsProvider, {
     value: {
       isDarkBackground
     }

package/lib/components/breadcrumbs/crumb/crumb.component.js

@@ -4,13 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 var _crumb = require("./crumb.style");
-var _breadcrumbs = _interopRequireDefault(require("../__internal__/breadcrumbs.context"));
+var _breadcrumbs = require("../__internal__/breadcrumbs.context");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Crumb = /*#__PURE__*/_react.default.forwardRef(({
   href,
@@ -21,7 +19,7 @@ const Crumb = /*#__PURE__*/_react.default.forwardRef(({
 }, ref) => {
   const {
     isDarkBackground
-  } = (0, _react.useContext)(_breadcrumbs.default);
+  } = (0, _breadcrumbs.useBreadcrumbsContext)();
   return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_crumb.StyledCrumb, _extends({
     ref: ref,
     isCurrent: isCurrent,

package/lib/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.d.ts

@@ -1,16 +1,16 @@
-import React from "react";
+/// <reference types="react" />
 type ButtonToggleGroupContextType = {
     onButtonClick: (value: string) => void;
     handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     pressedButtonValue?: string;
     onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
-    allowDeselect?: boolean;
+    allowDeselect: boolean;
     isInGroup: boolean;
-    isDisabled?: boolean;
+    isDisabled: boolean;
     firstButton?: HTMLButtonElement;
     childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
     /** Identifier for the hint text, if it exists, that is rendered by ButtonToggleGroup */
     hintTextId?: string;
 };
-declare const _default: React.Context<ButtonToggleGroupContextType>;
-export default _default;
+declare const ButtonToggleGroupProvider: import("react").Provider<ButtonToggleGroupContextType | null>, useButtonToggleGroupContext: () => ButtonToggleGroupContextType;
+export { ButtonToggleGroupProvider, useButtonToggleGroupContext };

package/lib/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.js

@@ -3,14 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.useButtonToggleGroupContext = exports.ButtonToggleGroupProvider = void 0;
+var _createStrictContext = _interopRequireDefault(require("../../../../__internal__/utils/createStrictContext"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = /*#__PURE__*/_react.default.createContext({
-  onButtonClick: /* istanbul ignore next */() => {},
-  handleKeyDown: /* istanbul ignore next */() => {},
-  pressedButtonValue: undefined,
-  allowDeselect: false,
-  isInGroup: false,
-  isDisabled: false
-});
+const [ButtonToggleGroupProvider, useButtonToggleGroupContext] = (0, _createStrictContext.default)({
+  name: "ButtonToggleGroupContext",
+  errorMessage: "Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    onButtonClick: /* istanbul ignore next */() => {},
+    handleKeyDown: /* istanbul ignore next */() => {},
+    pressedButtonValue: undefined,
+    allowDeselect: false,
+    isInGroup: false,
+    isDisabled: false
+  }
+});
+exports.useButtonToggleGroupContext = useButtonToggleGroupContext;
+exports.ButtonToggleGroupProvider = ButtonToggleGroupProvider;

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

@@ -16,12 +16,14 @@ var _tooltipProvider = require("../../../__internal__/tooltip-provider");
 var _inputBehaviour = require("../../../__internal__/input-behaviour");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
-var _buttonToggleGroup2 = _interopRequireDefault(require("./__internal__/button-toggle-group.context"));
+var _buttonToggleGroup2 = require("./__internal__/button-toggle-group.context");
 var _hintText = _interopRequireDefault(require("../../../__internal__/hint-text"));
+var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecateUncontrolledWarnTriggered = false;
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
 const ButtonToggleGroup = ({
   children,
@@ -40,8 +42,8 @@ const ButtonToggleGroup = ({
   value,
   helpAriaLabel,
   id,
-  allowDeselect,
-  disabled,
+  allowDeselect = false,
+  disabled = false,
   ...props
 }) => {
   const hasCorrectItemStructure = (0, _react.useMemo)(() => {
@@ -49,6 +51,10 @@ const ButtonToggleGroup = ({
     return !incorrectChild;
   }, [children]);
   !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `\`ButtonToggleGroup\` only accepts children of type \`${_.ButtonToggle.displayName}\``) : (0, _invariant.default)(false) : void 0;
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+    _logger.default.deprecate("Uncontrolled behaviour in `Button Toggle Group` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
   const labelId = (0, _react.useRef)((0, _guid.default)());
   const hintTextId = (0, _react.useRef)((0, _guid.default)());
   const wrapperRef = (0, _react.useRef)(null);
@@ -120,7 +126,7 @@ const ButtonToggleGroup = ({
     id: id,
     labelAs: "span",
     disabled: disabled
-  }, (0, _utils.filterStyledSystemMarginProps)(props), (0, _tags.default)(props["data-component"] ?? "button-toggle-group", props)), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup2.default.Provider, {
+  }, (0, _utils.filterStyledSystemMarginProps)(props), (0, _tags.default)(props["data-component"] ?? "button-toggle-group", props)), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup2.ButtonToggleGroupProvider, {
     value: {
       onButtonClick,
       handleKeyDown,

package/lib/components/button-toggle/button-toggle.component.d.ts

@@ -14,7 +14,10 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps>, Tag
     onFocus?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
     /** Callback triggered by click event on the button. */
     onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Set the pressed state of the toggle button */
+    /**
+     * Set the pressed state of the toggle button
+     * @deprecated
+     * */
     pressed?: boolean;
     /** An optional string by which to identify the button in either an onClick handler, or an onChange handler on the parent ButtonToggleGroup. */
     value?: string;

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

@@ -8,15 +8,15 @@ var _react = _interopRequireWildcard(require("react"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _buttonToggle = require("./button-toggle.style");
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
-var _buttonToggleGroup = _interopRequireDefault(require("./button-toggle-group/__internal__/button-toggle-group.context"));
+var _buttonToggleGroup = 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");
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-let deprecateUncontrolledWarnTriggered = false;
+let deprecatePressedWarnTriggered = false;
 const ButtonToggle = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -35,6 +35,10 @@ const ButtonToggle = ({
   value
 }) => {
   !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Either prop `buttonIcon` must be defined, or this node must have children") : (0, _invariant.default)(false) : void 0;
+  if (pressed && !deprecatePressedWarnTriggered) {
+    _logger.default.deprecate("The `pressed` prop is deprecated.");
+    deprecatePressedWarnTriggered = true;
+  }
   const buttonRef = (0, _react.useRef)(null);
   const {
     onMouseEnter,
@@ -53,50 +57,31 @@ const ButtonToggle = ({
     firstButton,
     childButtonCallbackRef,
     hintTextId
-  } = (0, _react.useContext)(_buttonToggleGroup.default);
+  } = (0, _buttonToggleGroup.useButtonToggleGroupContext)();
   const callbackRef = element => {
     buttonRef.current = element;
-    if (childButtonCallbackRef) {
-      childButtonCallbackRef(element);
-    }
+    childButtonCallbackRef?.(element);
   };
   const inputGuid = (0, _react.useRef)((0, _guid.default)());
   function handleClick(ev) {
     if (onClick) {
       onClick(ev);
     }
-    if (onChange) {
-      let newValue = value;
-      if (allowDeselect && pressedButtonValue === value) {
-        newValue = undefined;
-      }
-      onChange(ev, newValue);
-    }
+    const newValue = allowDeselect && pressedButtonValue && pressedButtonValue === value ? undefined : value;
+    onChange?.(ev, newValue);
     if (value) {
       onButtonClick(value);
     }
   }
-  if (!deprecateUncontrolledWarnTriggered && !onChange) {
-    deprecateUncontrolledWarnTriggered = true;
-    _logger.default.deprecate("Uncontrolled behaviour in `Button Toggle` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
   function handleFocus(ev) {
-    if (onFocus) {
-      onFocus(ev);
-    }
-    if (inputGroupOnFocus) {
-      inputGroupOnFocus();
-    }
+    onFocus?.(ev);
+    inputGroupOnFocus?.();
   }
   function handleBlur(ev) {
-    if (onBlur) {
-      onBlur(ev);
-    }
-    if (inputGroupOnBlur) {
-      inputGroupOnBlur();
-    }
+    onBlur?.(ev);
+    inputGroupOnBlur?.();
   }
-  const isPressed = isInGroup ? pressedButtonValue === value : pressed;
+  const isPressed = isInGroup ? pressedButtonValue && pressedButtonValue === value : pressed;
   const isFirstButton = buttonRef.current === firstButton;
 
   // if we're in a ButtonToggleGroup, only one button should be tabbable - the pressed button if there is one, or
@@ -109,7 +94,7 @@ const ButtonToggle = ({
   }, /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggle, _extends({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": hintTextId || undefined,
+    "aria-describedby": hintTextId,
     "aria-pressed": !!isPressed,
     buttonIcon: buttonIcon,
     buttonIconSize: buttonIconSize,

package/lib/components/card/__internal__/card.context.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
+/// <reference types="react" />
 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";
+    roundness: "default" | "large";
     /** Size of card for applying padding */
     spacing: CardSpacing;
 }
-declare const _default: React.Context<CardContextProps>;
-export default _default;
+declare const CardProvider: import("react").Provider<CardContextProps | null>, useCardContext: () => CardContextProps;
+export { CardProvider, useCardContext };

package/lib/components/card/__internal__/card.context.js

@@ -3,9 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.useCardContext = exports.CardProvider = void 0;
+var _createStrictContext = _interopRequireDefault(require("../../../__internal__/utils/createStrictContext"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = /*#__PURE__*/_react.default.createContext({
-  spacing: "medium"
-});
+const [CardProvider, useCardContext] = (0, _createStrictContext.default)({
+  name: "CardContext",
+  errorMessage: "Carbon Card: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    spacing: "medium",
+    roundness: "default"
+  }
+});
+exports.useCardContext = useCardContext;
+exports.CardProvider = CardProvider;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyledCardColumnProps } from "./card-column.style";
 import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
-export interface CardColumnProps extends Partial<StyledCardColumnProps>, Pick<TagProps, "data-element" | "data-role"> {
+export interface CardColumnProps extends Partial<StyledCardColumnProps>, TagProps {
     /** Child elements */
     children: React.ReactNode;
 }

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

@@ -2,7 +2,7 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 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"> {
+export interface CardFooterProps extends SpaceProps, Partial<Pick<CardContextProps, "roundness">>, TagProps {
     /** Child nodes */
     children: React.ReactNode;
     /** Specify styling variant to render */

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

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _utils = require("../../../style/utils");
 var _cardFooter = _interopRequireDefault(require("./card-footer.style"));
-var _card = _interopRequireDefault(require("../__internal__/card.context"));
+var _card = require("../__internal__/card.context");
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const CardFooter = ({
   children,
@@ -21,7 +19,7 @@ const CardFooter = ({
   const {
     roundness,
     spacing
-  } = (0, _react.useContext)(_card.default);
+  } = (0, _card.useCardContext)();
   return /*#__PURE__*/_react.default.createElement(_cardFooter.default, _extends({
     spacing: spacing,
     variant: variant

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

@@ -1,11 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { CardContextProps } from "../__internal__/card.context";
 import { CardFooterProps } from "./card-footer.component";
-export interface StyledCardFooterProps extends SpaceProps {
-    /** Specify styling variant to render */
-    variant: Required<CardFooterProps>["variant"];
-    roundness: CardFooterProps["roundness"];
-    spacing: CardContextProps["spacing"];
-}
-declare const StyledCardFooter: import("styled-components").StyledComponent<"div", any, StyledCardFooterProps, never>;
+export type StyledCardFooterProps = SpaceProps & Required<Pick<CardFooterProps, "variant">> & Pick<CardContextProps, "roundness" | "spacing">;
+declare const StyledCardFooter: import("styled-components").StyledComponent<"div", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Required<Pick<CardFooterProps, "variant">> & Pick<CardContextProps, "spacing" | "roundness">, never>;
 export default StyledCardFooter;

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

@@ -26,7 +26,7 @@ const StyledCardFooter = _styledComponents.default.div`
   ${({
   spacing,
   variant,
-  roundness = "default"
+  roundness
 }) => (0, _styledComponents.css)`
     background-color: ${variant === "transparent" ? "transparent" : "var(--colorsUtilityMajor025)"};
     border-top: var(--colorsUtilityMajor100);

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
-export interface CardRowProps extends PaddingProps, Pick<TagProps, "data-element" | "data-role"> {
+export interface CardRowProps extends PaddingProps, TagProps {
     /** Child nodes */
     children: React.ReactNode;
 }