carbon-react 110.2.4 → 110.4.1

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.d.ts

@@ -0,0 +1,6 @@
+export const StyledTabsHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTabsHeaderList: import("styled-components").StyledComponent<"div", any, {
+    alternateStyling: any;
+    isInSidebar: any;
+    position: any;
+}, never>;

package/esm/components/tabs/tab/tab.style.d.ts

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

package/esm/components/tabs/tabs.style.d.ts

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

package/lib/__internal__/i18n-context/index.d.ts

@@ -1,2 +1,3 @@
-declare var _default: import("react").Context<import("../../locales/locale").default>;
+/// <reference types="react" />
+declare const _default: import("react").Context<import("../../locales/locale").default>;
 export default _default;

package/lib/__internal__/popover/popover.component.d.ts

@@ -13,6 +13,7 @@ export interface PopoverProps {
     onFirstUpdate?: (state: Partial<State>) => void;
     disablePortal?: boolean;
     reference: React.RefObject<HTMLElement>;
+    isOpen?: boolean;
 }
-declare const Popover: ({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, }: PopoverProps) => JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, isOpen, }: PopoverProps) => JSX.Element;
 export default Popover;

package/lib/__internal__/popover/popover.component.js

@@ -15,7 +15,7 @@ var _core = require("@popperjs/core");
 
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
-var _popover = _interopRequireDefault(require("./popover.style"));
+var _popover = require("./popover.style");
 
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
@@ -34,12 +34,12 @@ const Popover = ({
   reference,
   onFirstUpdate,
   modifiers,
-  disableBackgroundUI
+  disableBackgroundUI,
+  isOpen = true
 }) => {
   var _reference$current;
 
-  const elementDOM = (0, _react.useRef)(null); // TODO: Remove TempModalContext after modal has been converted to TS
-
+  const elementDOM = (0, _react.useRef)(null);
   const {
     isInModal
   } = (0, _react.useContext)(_modal.ModalContext);
@@ -73,6 +73,13 @@ const Popover = ({
 
     popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre = popperInstance.current) === null || _popperInstance$curre === void 0 ? void 0 : _popperInstance$curre.update();
   });
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      var _popperInstance$curre2;
+
+      popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre2 = popperInstance.current) === null || _popperInstance$curre2 === void 0 ? void 0 : _popperInstance$curre2.update();
+    }
+  }, [isOpen]);
   (0, _react.useLayoutEffect)(() => {
     if (reference.current) {
       popperInstance.current = (0, _core.createPopper)(reference.current, popperElementRef.current, {
@@ -103,9 +110,12 @@ const Popover = ({
       }
     };
   }, [disablePortal, mountNode]);
+  content = /*#__PURE__*/_react.default.createElement(_popover.StyledPopoverContent, {
+    isOpen: isOpen
+  }, content);
 
   if (disableBackgroundUI) {
-    content = /*#__PURE__*/_react.default.createElement(_popover.default, null, content);
+    content = /*#__PURE__*/_react.default.createElement(_popover.StyledBackdrop, null, content);
   }
 
   if (disablePortal) {
@@ -119,6 +129,7 @@ Popover.propTypes = {
   "children": _propTypes.default.element.isRequired,
   "disableBackgroundUI": _propTypes.default.bool,
   "disablePortal": _propTypes.default.bool,
+  "isOpen": _propTypes.default.bool,
   "modifiers": _propTypes.default.arrayOf(_propTypes.default.shape({
     "enabled": _propTypes.default.bool,
     "name": _propTypes.default.string.isRequired,

package/lib/__internal__/popover/popover.style.d.ts

@@ -1,2 +1,6 @@
-declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
-export default StyledBackdrop;
+export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type StyledPopoverContentProps = {
+    isOpen?: boolean;
+};
+export declare const StyledPopoverContent: import("styled-components").StyledComponent<"div", any, StyledPopoverContentProps, never>;
+export {};

package/lib/__internal__/popover/popover.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StyledPopoverContent = exports.StyledBackdrop = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -22,8 +22,13 @@ const StyledBackdrop = _styledComponents.default.div`
 }) => theme.zIndex.popover};
   background: transparent;
 `;
+exports.StyledBackdrop = StyledBackdrop;
 StyledBackdrop.defaultProps = {
   theme: _base.default
 };
-var _default = StyledBackdrop;
-exports.default = _default;
+const StyledPopoverContent = _styledComponents.default.div`
+  ${({
+  isOpen
+}) => !isOpen && "display: none;"}
+`;
+exports.StyledPopoverContent = StyledPopoverContent;

package/lib/__internal__/radio-button-mapper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./radio-button-mapper";
+export * from "./radio-button-mapper";

package/lib/{components/button-toggle-group/documentation → __internal__/radio-button-mapper}/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _notes.default;
+    return _radioButtonMapper.default;
   }
 });
 
-var _notes = _interopRequireDefault(require("./notes.md"));
+var _radioButtonMapper = _interopRequireDefault(require("./radio-button-mapper.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/__internal__/radio-button-mapper/package.json

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

package/lib/__internal__/radio-button-mapper/radio-button-mapper.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+
+export interface RadioButtonMapperProps {
+  /** The RadioButton objects to be rendered in the group */
+  children?: React.ReactNode;
+  /** Specifies the name prop to be applied to each button in the group */
+  name: string;
+  /** Callback fired when each RadioButton is blurred */
+  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** Callback fired when the user selects a RadioButton */
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Callback fired on key down */
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** Value of the selected RadioButton */
+  value?: string;
+}
+
+declare function RadioButtonMapper(props?: RadioButtonMapperProps): JSX.Element;
+RadioButtonMapper.displayName = "RadioButtonMapper";
+
+export default RadioButtonMapper;

package/lib/__internal__/sticky-footer/index.d.ts

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

package/lib/__internal__/sticky-footer/sticky-footer.component.d.ts

@@ -0,0 +1,15 @@
+export default StickyFooter;
+declare function StickyFooter({ children, containerRef, disableSticky, ...rest }: {
+    [x: string]: any;
+    children: any;
+    containerRef: any;
+    disableSticky: any;
+}): JSX.Element;
+declare namespace StickyFooter {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const containerRef: PropTypes.Validator<any>;
+        const disableSticky: PropTypes.Requireable<boolean>;
+    }
+}
+import PropTypes from "prop-types";

package/lib/__internal__/sticky-footer/sticky-footer.style.d.ts

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

package/lib/__internal__/utils/helpers/tags/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./tags";
+export type { TagProps } from "./tags";

package/lib/__spec_helper__/mock-resize-observer.d.ts

@@ -1,2 +1,2 @@
+declare const setupResizeObserverMock: () => void;
 export default setupResizeObserverMock;
-declare function setupResizeObserverMock(): void;

package/lib/__spec_helper__/mock-resize-observer.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 
 const setupResizeObserverMock = () => {
-  if (!global.window) {
+  if (!window) {
     return;
   }
 
-  global.window.ResizeObserver = global.window.ResizeObserver || jest.fn().mockImplementation(() => ({
+  window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn()

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

@@ -2,8 +2,8 @@ import React from "react";
 import { StyledButtonToggleLabelProps } from "./button-toggle.style";
 import { ButtonToggleInputProps } from "./button-toggle-input.component";
 export interface ButtonToggleProps extends ButtonToggleInputProps, Partial<StyledButtonToggleLabelProps> {
-    /** A required prop. This is the button text. */
-    children: React.ReactNode;
+    /** Text to display for the button. */
+    children?: React.ReactNode;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-component"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -18,7 +18,7 @@ export interface ButtonToggleProps extends ButtonToggleInputProps, Partial<Style
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
 }
 export declare const ButtonToggle: {
-    (props: ButtonToggleProps): JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, checked, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, name, onBlur, onChange, onFocus, size, value, }: ButtonToggleProps): JSX.Element;
     displayName: string;
 };
 export default ButtonToggle;

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

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 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"));
@@ -25,26 +27,26 @@ 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 ButtonToggle = props => {
-  const {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    buttonIcon,
-    buttonIconSize = "small",
-    checked,
-    children,
-    "data-component": dataComponent,
-    "data-element": dataElement,
-    "data-role": dataRole,
-    disabled,
-    grouped,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    size = "medium",
-    value
-  } = props;
+const ButtonToggle = ({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  buttonIcon,
+  buttonIconSize = "small",
+  checked,
+  children,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  disabled,
+  grouped,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  size = "medium",
+  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;
   const {
     onMouseEnter,
     onMouseLeave

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

@@ -2,7 +2,7 @@ import { IconType } from "../icon";
 export declare type ButtonToggleIconSizes = "small" | "large";
 declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface StyledButtonToggleLabelProps {
-    /** buttonIcon to render. */
+    /** The icon to be rendered inside of the button */
     buttonIcon?: IconType;
     /** Sets the size of the buttonIcon (eg. large) */
     buttonIconSize?: ButtonToggleIconSizes;

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface ButtonToggleGroupProps extends ValidationProps, MarginProps, TagProps {
+    /** Unique id for the root element of the component */
+    id: string;
+    /** Specifies the name prop to be applied to each button in the group */
+    name: string;
+    /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
+    children?: React.ReactNode;
+    /** When true, validation icon will be placed on label instead of being placed on the input */
+    validationOnLabel?: boolean;
+    /** Text for the label. */
+    label?: string;
+    /** Text for the labels help tooltip. */
+    labelHelp?: React.ReactNode;
+    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** The percentage width of the ButtonToggleGroup. */
+    inputWidth?: number | string;
+    /** The text for the field help. */
+    fieldHelp?: string;
+    /** Sets the field help to inline. */
+    fieldHelpInline?: boolean;
+    /** Sets the label to be inline. */
+    labelInline?: boolean;
+    /** The percentage width of the label. */
+    labelWidth?: number;
+    /** The alignment for the text in the label. */
+    labelAlign?: "left" | "right";
+    /** Callback triggered by blur event on the input. */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback triggered by change event on the input. */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The value of the Button Toggle Group */
+    value?: string;
+    /** Aria label for rendered help component */
+    helpAriaLabel?: string;
+}
+declare const ButtonToggleGroup: {
+    ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): JSX.Element;
+    displayName: string;
+};
+export default ButtonToggleGroup;