carbon-react 109.5.0 → 109.6.0

package/esm/components/modal/__internal__/modal-manager.js

@@ -6,44 +6,27 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-
-function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
-
-function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
-
-function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
-
-function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
-
-function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
-
-var _modalList = /*#__PURE__*/new WeakMap();
-
-var _getTopModal = /*#__PURE__*/new WeakSet();
-
 let ModalManagerInstance = /*#__PURE__*/function () {
   function ModalManagerInstance() {
     _classCallCheck(this, ModalManagerInstance);
 
-    _getTopModal.add(this);
-
-    _modalList.set(this, {
-      writable: true,
-      value: void 0
-    });
+    _defineProperty(this, "modalList", void 0);
 
     _defineProperty(this, "addModal", (modal, setTriggerRefocusFlag) => {
+      if (!modal) {
+        return;
+      }
+
       const {
         modal: topModal,
         setTriggerRefocusFlag: setTrapFlag
-      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+      } = this.getTopModal();
 
       if (topModal && setTrapFlag) {
         setTrapFlag(false);
       }
 
-      _classPrivateFieldGet(this, _modalList).push({
+      this.modalList.push({
         modal,
         setTriggerRefocusFlag
       });
@@ -55,15 +38,24 @@ let ModalManagerInstance = /*#__PURE__*/function () {
       window.__CARBON_INTERNALS_MODAL_LIST = [];
     }
 
-    _classPrivateFieldSet(this, _modalList, window.__CARBON_INTERNALS_MODAL_LIST);
+    this.modalList = window.__CARBON_INTERNALS_MODAL_LIST;
   }
 
   _createClass(ModalManagerInstance, [{
+    key: "getTopModal",
+    value: function getTopModal() {
+      if (!this.modalList.length) {
+        return {};
+      }
+
+      return this.modalList[this.modalList.length - 1];
+    }
+  }, {
     key: "isTopmost",
     value: function isTopmost(modal) {
       const {
         modal: topModal
-      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+      } = this.getTopModal();
 
       if (!modal || !topModal) {
         return false;
@@ -74,7 +66,7 @@ let ModalManagerInstance = /*#__PURE__*/function () {
   }, {
     key: "removeModal",
     value: function removeModal(modal) {
-      const modalIndex = _classPrivateFieldGet(this, _modalList).findIndex(({
+      const modalIndex = this.modalList.findIndex(({
         modal: m
       }) => m === modal);
 
@@ -82,15 +74,15 @@ let ModalManagerInstance = /*#__PURE__*/function () {
         return;
       }
 
-      _classPrivateFieldGet(this, _modalList).splice(modalIndex, 1);
+      this.modalList.splice(modalIndex, 1);
 
-      if (!_classPrivateFieldGet(this, _modalList).length) {
+      if (!this.modalList.length) {
         return;
       }
 
       const {
         setTriggerRefocusFlag
-      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+      } = this.getTopModal();
 
       if (setTriggerRefocusFlag) {
         setTriggerRefocusFlag(true);
@@ -100,22 +92,13 @@ let ModalManagerInstance = /*#__PURE__*/function () {
     key: "clearList",
     value: function clearList() {
       window.__CARBON_INTERNALS_MODAL_LIST = [];
-
-      _classPrivateFieldSet(this, _modalList, window.__CARBON_INTERNALS_MODAL_LIST);
+      this.modalList = window.__CARBON_INTERNALS_MODAL_LIST;
     }
   }]);
 
   return ModalManagerInstance;
 }();
 
-function _getTopModal2() {
-  if (!_classPrivateFieldGet(this, _modalList).length) {
-    return {};
-  }
-
-  return _classPrivateFieldGet(this, _modalList)[_classPrivateFieldGet(this, _modalList).length - 1];
-}
-
 const ModalManager = new ModalManagerInstance();
 export { ModalManagerInstance };
 export default ModalManager;

package/esm/components/modal/index.d.ts

@@ -1 +1,2 @@
 export { default, ModalContext } from "./modal.component";
+export type { ModalProps, ModalContextProps } from "./modal.component";

package/esm/components/modal/modal.component.d.ts

@@ -1,35 +1,46 @@
-export const ModalContext: React.Context<{}>;
-export default Modal;
 import React from "react";
-declare function Modal({ children, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, ...rest }: {
-    [x: string]: any;
-    children: any;
-    open: any;
-    onCancel: any;
-    disableEscKey: any;
-    disableClose: any;
-    enableBackgroundUI: any;
-    timeout: any;
-}): JSX.Element;
-declare namespace Modal {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const onCancel: PropTypes.Requireable<(...args: any[]) => any>;
-        const open: PropTypes.Validator<boolean>;
-        const enableBackgroundUI: PropTypes.Requireable<boolean>;
-        const disableEscKey: PropTypes.Requireable<boolean>;
-        const disableClose: PropTypes.Requireable<boolean>;
-        const timeout: PropTypes.Requireable<number>;
-    }
-    namespace defaultProps {
-        const onCancel_1: null;
-        export { onCancel_1 as onCancel };
-        const enableBackgroundUI_1: boolean;
-        export { enableBackgroundUI_1 as enableBackgroundUI };
-        const disableEscKey_1: boolean;
-        export { disableEscKey_1 as disableEscKey };
-        const timeout_1: number;
-        export { timeout_1 as timeout };
-    }
-}
 import PropTypes from "prop-types";
+export interface ModalContextProps {
+    isInModal?: boolean;
+    isAnimationComplete?: boolean;
+    triggerRefocusFlag?: boolean;
+}
+export declare const ModalContext: React.Context<ModalContextProps>;
+export interface ModalProps {
+    /** Modal content */
+    children?: React.ReactNode;
+    /** The ARIA role to be applied to the modal */
+    ariaRole?: string;
+    /** Determines if the Esc Key closes the modal */
+    disableEscKey?: boolean;
+    /** Determines if the Dialog can be closed */
+    disableClose?: boolean;
+    /** Determines if the background is disabled when the modal is open */
+    enableBackgroundUI?: boolean;
+    /** A custom close event handler */
+    onCancel?: (ev: React.KeyboardEvent<HTMLElement>) => void;
+    /** Sets the open state of the modal */
+    open: boolean;
+    /** Transition time */
+    timeout?: number;
+}
+declare const Modal: {
+    ({ children, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, ...rest }: ModalProps): JSX.Element;
+    propTypes: {
+        /** Modal content */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** A custom close event handler */
+        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Controls the open state of the modal */
+        open: PropTypes.Validator<boolean>;
+        /** Determines if the background is disabled when the modal is open */
+        enableBackgroundUI: PropTypes.Requireable<boolean>;
+        /** Determines if the Esc Key closes the modal */
+        disableEscKey: PropTypes.Requireable<boolean>;
+        /** Determines if the Dialog can be closed */
+        disableClose: PropTypes.Requireable<boolean>;
+        /** Transition time */
+        timeout: PropTypes.Requireable<number>;
+    };
+};
+export default Modal;

package/esm/components/modal/modal.component.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useEffect, useRef, useCallback, useState } from "react";
 import PropTypes from "prop-types";
+import PropTypes from "prop-types";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import useScrollBlock from "../../hooks/__internal__/useScrollBlock";
 import Portal from "../portal";
@@ -14,15 +15,15 @@ const Modal = ({
   children,
   open,
   onCancel,
-  disableEscKey,
+  disableEscKey = false,
   disableClose,
-  enableBackgroundUI,
-  timeout,
+  enableBackgroundUI = false,
+  timeout = 300,
   ...rest
 }) => {
-  const ref = useRef();
-  const backgroundNodeRef = useRef();
-  const contentNodeRef = useRef();
+  const ref = useRef(null);
+  const backgroundNodeRef = useRef(null);
+  const contentNodeRef = useRef(null);
   const [isAnimationComplete, setAnimationComplete] = useState(false);
   const [triggerRefocusFlag, setTriggerRefocusFlag] = useState(false);
   const {
@@ -90,9 +91,10 @@ const Modal = ({
       isAnimationComplete,
       triggerRefocusFlag,
       isInModal: true
-    },
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     ref: contentNodeRef
-  }, content)))));
+  }, content))))));
 };
 
 Modal.propTypes = {
@@ -117,10 +119,4 @@ Modal.propTypes = {
   /** Transition time */
   timeout: PropTypes.number
 };
-Modal.defaultProps = {
-  onCancel: null,
-  enableBackgroundUI: false,
-  disableEscKey: false,
-  timeout: 300
-};
 export default Modal;

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

@@ -1,2 +1,7 @@
-export const StyledModal: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledModalBackground: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type TransitionProps = {
+    transitionName: string;
+    transitionTime: number;
+};
+declare const StyledModalBackground: import("styled-components").StyledComponent<"div", any, TransitionProps, never>;
+declare const StyledModal: import("styled-components").StyledComponent<"div", any, TransitionProps, never>;
+export { StyledModal, StyledModalBackground };

package/esm/components/switch/switch.component.js

@@ -184,9 +184,6 @@ Switch.propTypes = {
   /** When true, validation icon will be placed on label instead of being placed by the input */
   validationOnLabel: PropTypes.bool,
 
-  /** Override tab index on the validation and help icon */
-  helpTabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** Triggers loading animation */
   loading: PropTypes.bool,
 

package/esm/components/switch/switch.d.ts

@@ -15,8 +15,6 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
   adaptiveLabelBreakpoint?: number;
   /** Set the default value of the Switch if component is meant to be used as uncontrolled */
   defaultChecked?: boolean;
-  /** Overrides the default tabindex of the Help component */
-  helpTabIndex?: number | string;
   /** Text alignment of the label */
   labelAlign?: LabelAlign;
   /** When true label is inline */

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

@@ -2,9 +2,9 @@ import * as React from "react";
 import { PaddingProps } from "styled-system";
 
 export interface TabContextProps {
-  setError: (childId: string, hasError: boolean) => void;
-  setWarning: (childId: string, hasWarning: boolean) => void;
-  setInfo: (childId: string, hasInfo: boolean) => void;
+  setError?: (childId: string, hasError: boolean) => void;
+  setWarning?: (childId: string, hasWarning: boolean) => void;
+  setInfo?: (childId: string, hasInfo: boolean) => void;
 }
 
 export interface TabProps extends PaddingProps {

package/lib/__internal__/form-field/form-field.component.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import { ValidationProps } from "__internal__/validations";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../utils/helpers/tags/tags";
+import { IconType } from "../../components/icon";
+interface CommonFormFieldProps extends MarginProps, ValidationProps {
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** Help content to be displayed under an input */
+    fieldHelp?: React.ReactNode;
+    /** The unique id of the Help component tooltip, used for accessibility */
+    tooltipId?: string;
+    /** The unique id of the FieldHelp component */
+    fieldHelpId?: string;
+    /** Label content */
+    label?: React.ReactNode;
+    /** Text alignment of the label */
+    labelAlign?: "left" | "right";
+    /** A message that the Help component will display */
+    labelHelp?: React.ReactNode;
+    /** Help Icon type */
+    labelHelpIcon?: IconType;
+    /** The unique id of the label element */
+    labelId?: string;
+    /** When true label is inline */
+    labelInline?: boolean;
+    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** Label width */
+    labelWidth?: number;
+    /** If true the label switches position with the input */
+    reverse?: boolean;
+    /** Id of the validation icon */
+    validationIconId?: string;
+}
+export interface FormFieldProps extends CommonFormFieldProps, TagProps {
+    /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
+    /** Content to be rendered inside the FormField */
+    children?: React.ReactNode;
+    /**
+     * If true, the FieldHelp will be displayed inline
+     * To be used with labelInline prop set to true
+     */
+    fieldHelpInline?: boolean;
+    /** Id of the element a label should be bound to */
+    id: string;
+    /** [Legacy] Flag to configure component as optional in Form */
+    isOptional?: boolean;
+    /** Flag to configure component as mandatory */
+    isRequired?: boolean;
+    /** Whether to show the validation icon */
+    useValidationIcon?: boolean;
+}
+declare const FormField: {
+    ({ children, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, ...rest }: FormFieldProps): JSX.Element;
+    displayName: string;
+};
+export default FormField;