@zextras/carbonio-design-system 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.5.0](https://github.com/Zextras/carbonio-design-system/compare/v0.4.1...v0.5.0) (2022-10-14)
+
+
+### ⚠ BREAKING CHANGES
+
+* **TabBar:** removed onItemClick and defaultSelected props
+
+### Features
+
+* **Modal,CustomModal:** export modal components and add onClick on content ([090ef33](https://github.com/Zextras/carbonio-design-system/commit/090ef337e9902ae790ed2eeb52fdebb59bb36c1e)), closes [#130](https://github.com/Zextras/carbonio-design-system/issues/130)
+
+
+### Bug Fixes
+
+* **Dropdown:** close dropdown of type contextMenu when click is on trigger component ([3367540](https://github.com/Zextras/carbonio-design-system/commit/33675405f55aac9cc966a5a000b0ba12a4f528cc)), closes [#128](https://github.com/Zextras/carbonio-design-system/issues/128)
+
+
+* **TabBar:** remove TabBar uncontrolled mode ([f69777e](https://github.com/Zextras/carbonio-design-system/commit/f69777e758a1b3a1db8c3e0c26db5d6960c80c0e)), closes [#126](https://github.com/Zextras/carbonio-design-system/issues/126)
+
 ### [0.4.1](https://github.com/Zextras/carbonio-design-system/compare/v0.4.0...v0.4.1) (2022-09-27)
 
 

package/dist/zapp-ui.bundle.d.ts

@@ -625,9 +625,9 @@ declare type CSSObject = {
     [K in keyof CSSProperties]: CSSProperties[K] | (() => NonNullable<CSSProperties[K]>);
 };
 
-export declare const CustomModal: React_2.ForwardRefExoticComponent<Pick<ModalProps, "open" | "background" | "maxHeight" | "zIndex" | "children" | "size" | "disablePortal" | "onClose"> & Omit<React_2.HTMLAttributes<HTMLDivElement>, keyof ModalProps> & React_2.RefAttributes<HTMLDivElement>>;
+export declare const CustomModal: React_2.ForwardRefExoticComponent<PickedModal & Omit<React_2.HTMLAttributes<HTMLDivElement>, "open" | "background" | "maxHeight" | "minHeight" | "zIndex" | "title" | "children" | "size" | "disablePortal" | "onClose"> & React_2.RefAttributes<HTMLDivElement>>;
 
-export declare type CustomModalProps = Pick<ModalProps, 'background' | 'size' | 'open' | 'onClose' | 'zIndex' | 'maxHeight' | 'disablePortal' | 'children'> & Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps>;
+export declare type CustomModalProps = PickedModal & Omit<HTMLAttributes<HTMLDivElement>, keyof PickedModal | 'title'>;
 
 export declare const DateTimePicker: React_2.ForwardRefExoticComponent<DateTimePickerProps & React_2.RefAttributes<DatePicker<never, undefined>>>;
 
@@ -1144,62 +1144,126 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      height?: string;
  };
 
- export declare const Modal: React_2.ForwardRefExoticComponent<ModalProps & React_2.RefAttributes<HTMLDivElement>>;
+ export declare const Modal: React_2.ForwardRefExoticComponent<Omit<ModalFooterProps, "errorActionLabel" | "onErrorAction"> & {
+     /** Modal background */
+     background?: string | undefined;
+     /** Modal title */
+     title?: string | React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | undefined;
+     /** Modal size */
+     size?: "small" | "medium" | "large" | "extrasmall" | undefined;
+     /** Boolean to show the modal */
+     open?: boolean | undefined;
+     /** Hide the footer completely */
+     hideFooter?: boolean | undefined;
+     /** Show icon to close Modal */
+     showCloseIcon?: boolean | undefined;
+     /** Css property to handle the stack order of multiple modals */
+     zIndex?: number | undefined;
+     /** min height of the modal */
+     minHeight?: string | undefined;
+     /** max height of the modal */
+     maxHeight?: string | undefined;
+     /** Flag to disable the Portal implementation */
+     disablePortal?: boolean | undefined;
+     /** Content of the modal */
+     children?: React_2.ReactNode | React_2.ReactNode[];
+     /** Label for copy button in the Error Modal */
+     copyLabel?: ModalFooterProps['errorActionLabel'];
+     /** Close icon tooltip label */
+     closeIconTooltip?: string | undefined;
+ } & Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> & React_2.RefAttributes<HTMLDivElement>>;
 
- export declare function ModalManager({ children }: ModalManagerProps): JSX.Element;
+ export declare const ModalBody: StyledComponent<"div", DefaultTheme, {
+ maxHeight?: string | undefined;
+ centered?: boolean | undefined;
+ }, never>;
 
- export declare const ModalManagerContext: React_2.Context<CreateModalFn>;
+ export declare const ModalFooter: ({ centered, confirmColor, confirmLabel, errorActionLabel, customFooter, dismissLabel, onClose, onConfirm, onErrorAction, onSecondaryAction, optionalFooter, secondaryActionLabel, type }: ModalFooterProps) => JSX.Element;
 
- export declare interface ModalManagerProps {
-     children: React_2.ReactNode | React_2.ReactNode[];
- }
+ export declare const ModalFooterContent: React_2.VFC<ModalFooterContentProps>;
 
- export declare interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-     /** Modal background */
-     background?: string | keyof ThemeObj['palette'];
+ export declare type ModalFooterContentProps = Omit<ModalFooterProps, 'customFooter'>;
+
+ export declare interface ModalFooterProps {
      /** Modal type */
      type?: 'default' | 'error';
-     /** Modal title */
-     title?: string | React_2.ReactElement;
-     /** Modal size */
-     size?: 'extrasmall' | 'small' | 'medium' | 'large';
-     /** Boolean to show the modal */
-     open?: boolean;
      /** Centered Modal */
      centered?: boolean;
      /** Callback for main action */
      onConfirm?: (event: React_2.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
      /** Label for the Main action Button */
      confirmLabel?: string;
+     /** Disabled status for main action Button */
+     confirmDisabled?: boolean;
      /** BackgroundColor for the Main action Button */
      confirmColor?: string | keyof ThemeObj['palette'];
      /** Callback for secondary action */
      onSecondaryAction?: (event: React_2.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
      /** Label for the Secondary action Button */
      secondaryActionLabel?: string;
+     /** Disabled status for secondary action Button */
+     secondaryActionDisabled?: boolean;
      /** Callback to close the Modal */
      onClose?: (event: React_2.MouseEvent | KeyboardEvent) => void;
      /** Label for the Modal close Button */
      dismissLabel?: string;
-     /** Label for copy button in the Error Modal */
-     copyLabel?: string;
      /** Optional element to show in the footer of the Modal */
      optionalFooter?: React_2.ReactElement;
      /** Prop to override the default footer buttons */
      customFooter?: React_2.ReactElement;
+     /** Label for dismiss button in the Error Modal */
+     errorActionLabel?: string;
+     /** Action called on error dismiss button */
+     onErrorAction?: () => void;
+ }
+
+ export declare const ModalHeader: ({ centered, onClose, showCloseIcon, title, type, closeIconTooltip }: ModalHeaderProps) => JSX.Element;
+
+ export declare interface ModalHeaderProps {
+     centered?: boolean | undefined;
+     type?: 'default' | 'error' | undefined;
+     title?: string | React_2.ReactElement | undefined;
+     showCloseIcon?: boolean | undefined;
+     onClose?: ((event: React_2.MouseEvent | KeyboardEvent) => void) | undefined;
+     closeIconTooltip?: string;
+ }
+
+ export declare function ModalManager({ children }: ModalManagerProps): JSX.Element;
+
+ export declare const ModalManagerContext: React_2.Context<CreateModalFn>;
+
+ export declare interface ModalManagerProps {
+     children: React_2.ReactNode | React_2.ReactNode[];
+ }
+
+ export declare type ModalProps = Omit<ModalFooterProps, 'errorActionLabel' | 'onErrorAction'> & {
+     /** Modal background */
+     background?: string | keyof ThemeObj['palette'];
+     /** Modal title */
+     title?: string | React_2.ReactElement;
+     /** Modal size */
+     size?: 'extrasmall' | 'small' | 'medium' | 'large';
+     /** Boolean to show the modal */
+     open?: boolean;
      /** Hide the footer completely */
      hideFooter?: boolean;
      /** Show icon to close Modal */
      showCloseIcon?: boolean;
      /** Css property to handle the stack order of multiple modals */
      zIndex?: number;
-     /** max height of the modal body */
+     /** min height of the modal */
+     minHeight?: string;
+     /** max height of the modal */
      maxHeight?: string;
      /** Flag to disable the Portal implementation */
      disablePortal?: boolean;
      /** Content of the modal */
      children?: React_2.ReactNode | React_2.ReactNode[];
- }
+     /** Label for copy button in the Error Modal */
+     copyLabel?: ModalFooterProps['errorActionLabel'];
+     /** Close icon tooltip label */
+     closeIconTooltip?: string;
+ } & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
 
  export declare const MultiButton: React_2.ForwardRefExoticComponent<{
      /** MultiButton text */
@@ -1284,6 +1348,8 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
 
  export declare const PasswordInput: React_2.ForwardRefExoticComponent<InputProps & React_2.RefAttributes<HTMLDivElement>>;
 
+ declare type PickedModal = Pick<ModalProps, 'background' | 'size' | 'open' | 'onClose' | 'zIndex' | 'minHeight' | 'maxHeight' | 'disablePortal' | 'children'>;
+
  export declare const Popover: React_2.ForwardRefExoticComponent<PopoverProps & React_2.RefAttributes<HTMLDivElement>>;
 
  export declare interface PopoverProps extends PopperProps {
@@ -1633,16 +1699,9 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      /** List of elements, can have extra attributes to pass down to the CustomComponent */
      items: Array<Item>;
      /** id of the selected item */
-     selected?: string;
-     /** id of the default selected item */
-     defaultSelected?: string;
+     selected: string;
      /** change callback, is called with the new selected id */
-     onChange: (selectedId: string) => void;
-     /** click (or also keyboard in the default component) event,
-      * the selectedItemId field is added to the event object */
-     onItemClick: (ev: React_2.SyntheticEvent & {
-         selectedItemId: string;
-     }) => void;
+     onChange: (ev: React_2.SyntheticEvent, selectedId: string) => void;
      /** background color of the tabBar */
      background: string | keyof ThemeObj['palette'];
      /** underline color of the selected tab */

package/dist/zapp-ui.bundle.js

@@ -1118,6 +1118,14 @@ var curriedSetLightness = /*#__PURE__*/curry
 /* ::<number | string, string, string> */
 (setLightness);
 
+/*
+ * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+const DefaultFontStyles = styled.createGlobalStyle(["@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:url('roboto-v20-latin-300.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-300.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-300.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-300.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-300.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url('roboto-v20-latin-300italic.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-300italic.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-300italic.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-300italic.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-300italic.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-300italic.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url('roboto-v20-latin-regular.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-regular.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-regular.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-regular.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:url('roboto-v20-latin-italic.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-italic.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-italic.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-italic.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-italic.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:url('roboto-v20-latin-500italic.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-500italic.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-500italic.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-500italic.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-500italic.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-500italic.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:url('roboto-v20-latin-500.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-500.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-500.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-500.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-500.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:italic;font-weight:700;src:url('roboto-v20-latin-700italic.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-700italic.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-700italic.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-700italic.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-700italic.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-700italic.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url('roboto-v20-latin-700.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-700.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-700.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-700.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-700.svg#Roboto') format('svg');}"]);
+var DefaultFontStyles$1 = DefaultFontStyles;
+
 function SvgAcceptanceMeeting(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: 24,
@@ -12356,14 +12364,6 @@ const Theme = {
 // 	}
 // });
 
-/*
- * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-const DefaultFontStyles = styled.createGlobalStyle(["@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:url('roboto-v20-latin-300.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-300.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-300.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-300.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-300.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url('roboto-v20-latin-300italic.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-300italic.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-300italic.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-300italic.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-300italic.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-300italic.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url('roboto-v20-latin-regular.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-regular.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-regular.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-regular.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:url('roboto-v20-latin-italic.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-italic.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-italic.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-italic.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-italic.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:url('roboto-v20-latin-500italic.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-500italic.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-500italic.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-500italic.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-500italic.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-500italic.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:url('roboto-v20-latin-500.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-500.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-500.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-500.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-500.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:italic;font-weight:700;src:url('roboto-v20-latin-700italic.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-700italic.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-700italic.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-700italic.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-700italic.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-700italic.svg#Roboto') format('svg');}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url('roboto-v20-latin-700.eot');src:local(''),url('./fonts/roboto/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'),url('./fonts/roboto/roboto-v20-latin-700.woff2') format('woff2'),url('./fonts/roboto/roboto-v20-latin-700.woff') format('woff'),url('./fonts/roboto/roboto-v20-latin-700.ttf') format('truetype'),url('./fonts/roboto/roboto-v20-latin-700.svg#Roboto') format('svg');}"]);
-var DefaultFontStyles$1 = DefaultFontStyles;
-
 /*
  * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
  *
@@ -14762,20 +14762,27 @@ var createPopper = /*#__PURE__*/popperGenerator({
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-const Portal = /*#__PURE__*/React__default["default"].forwardRef(function PortalFn(_ref, ref) {
-  let {
-    children,
-    container,
-    show = false,
-    disablePortal = false
-  } = _ref;
-  const {
-    windowObj
-  } = React.useContext(styled.ThemeContext);
-  if (!show) return null;
-  if (disablePortal) return children;
-  return /*#__PURE__*/ReactDOM__default["default"].createPortal(children, container || windowObj.document.body);
-});
+
+function useCombinedRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  const targetRef = React.useRef(null);
+  React.useEffect(() => {
+    refs.forEach(ref => {
+      if (!ref) return;
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+  return targetRef;
+}
 
 const Comp$2 = styled__default["default"].div.withConfig({
   displayName: "Text__Comp",
@@ -14835,27 +14842,20 @@ const Text = /*#__PURE__*/React__default["default"].forwardRef(function TextFn(_
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-function useCombinedRefs() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  const targetRef = React.useRef(null);
-  React.useEffect(() => {
-    refs.forEach(ref => {
-      if (!ref) return;
-
-      if (typeof ref === 'function') {
-        ref(targetRef.current);
-      } else {
-        // eslint-disable-next-line no-param-reassign
-        ref.current = targetRef.current;
-      }
-    });
-  }, [refs]);
-  return targetRef;
-}
+const Portal = /*#__PURE__*/React__default["default"].forwardRef(function PortalFn(_ref2, _ref) {
+  let {
+    children,
+    container,
+    show = false,
+    disablePortal = false
+  } = _ref2;
+  const {
+    windowObj
+  } = React.useContext(styled.ThemeContext);
+  if (!show) return null;
+  if (disablePortal) return children;
+  return /*#__PURE__*/ReactDOM__default["default"].createPortal(children, container || windowObj.document.body);
+});
 
 const TooltipWrapper = /*#__PURE__*/React__default["default"].forwardRef(function TooltipWrapperFn(_ref, ref) {
   let {
@@ -21805,7 +21805,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Drop
     var _innerTriggerRef$curr, _e$composedPath;
 
     const clickedOnDropdown = dropdownRef.current && (e.target === dropdownRef.current || dropdownRef.current.contains(e.target));
-    const clickedOnTrigger = innerTriggerRef.current && (e.target === innerTriggerRef.current || ((_innerTriggerRef$curr = innerTriggerRef.current) === null || _innerTriggerRef$curr === void 0 ? void 0 : _innerTriggerRef$curr.contains(e.target)));
+    const clickedOnTrigger = !contextMenu && innerTriggerRef.current && (e.target === innerTriggerRef.current || ((_innerTriggerRef$curr = innerTriggerRef.current) === null || _innerTriggerRef$curr === void 0 ? void 0 : _innerTriggerRef$curr.contains(e.target)));
 
     const clickedOnNestedItem = nestedDropdownsRef.current && some_1(nestedDropdownsRef.current, nestedItemRef => nestedItemRef.current && nestedItemRef.current.contains(e.target));
 
@@ -21813,7 +21813,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Drop
     !find_1(((_e$composedPath = e.composedPath) === null || _e$composedPath === void 0 ? void 0 : _e$composedPath.call(e)) ?? [], el => el.hasAttribute && el.hasAttribute('data-keep-open'))) {
       closePopper();
     }
-  }, [closePopper, dropdownRef, innerTriggerRef]);
+  }, [closePopper, contextMenu, dropdownRef, innerTriggerRef]);
   const onStartSentinelFocus = React.useCallback(() => {
     const lastChild = popperItemsRef.current && popperItemsRef.current.querySelector('div[tabindex]:last-child');
     lastChild && lastChild.focus();
@@ -32261,46 +32261,35 @@ const TabBar = /*#__PURE__*/React__default["default"].forwardRef(function TabBar
   let {
     items,
     selected,
-    defaultSelected,
     onChange,
-    onItemClick,
     background,
     underlineColor = 'primary',
     forceWidthEquallyDistributed = false,
     ...rest
   } = _ref6;
-  const [currentSelection, setCurrentSelection] = React.useState(defaultSelected);
-  React.useEffect(() => {
-    if (typeof selected !== 'undefined') {
-      setCurrentSelection(selected);
-      onChange(selected);
-    }
-  }, [selected, onChange]);
   const onItemClickCb = React.useCallback(id => ev => {
-    setCurrentSelection(id);
-    onChange(id);
-    onItemClick({ ...ev,
-      selectedItemId: id
-    });
-  }, [onChange, onItemClick]);
+    onChange(ev, id);
+  }, [onChange]);
   return /*#__PURE__*/React__default["default"].createElement(Container, _extends({
     ref: ref,
     orientation: "horizontal",
     background: background,
     mainAlignment: "flex-start"
-  }, rest), map_1(items, item => item.CustomComponent ? /*#__PURE__*/React__default["default"].createElement(item.CustomComponent, {
+  }, rest), map_1(items, (item, index) => item.CustomComponent ? /*#__PURE__*/React__default["default"].createElement(item.CustomComponent, {
+    "data-testid": `tab${index}`,
     key: item.id,
     item: item,
-    selected: item.id === currentSelection,
+    selected: item.id === selected,
     onClick: onItemClickCb(item.id),
     tabIndex: item.disabled ? undefined : 0,
     background: background,
     underlineColor: underlineColor,
     forceWidthEquallyDistributed: forceWidthEquallyDistributed
   }) : /*#__PURE__*/React__default["default"].createElement(DefaultTabBarItem, {
+    "data-testid": `tab${index}`,
     key: item.id,
     item: item,
-    selected: item.id === currentSelection,
+    selected: item.id === selected,
     background: background,
     onClick: onItemClickCb(item.id),
     tabIndex: item.disabled ? undefined : 0,
@@ -32366,6 +32355,7 @@ const StyledDiv = styled__default["default"].div.withConfig({
   } = _ref3;
   return pseudoClasses(theme, active && activeBackground || selected && selectedBackground || background);
 });
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const LIWrapper = /*#__PURE__*/React__default["default"].memo(function LIWrapperFn(_ref4) {
   let {
     item,
@@ -32417,6 +32407,7 @@ const BottomElement = _ref5 => {
   });
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const List = /*#__PURE__*/React__default["default"].forwardRef(function ListFn(_ref6, ref) {
   let {
     items = [],
@@ -33181,8 +33172,8 @@ function getScrollbarSize(windowObj) {
 
 const ModalContainer = styled__default["default"].div.withConfig({
   displayName: "ModalComponents__ModalContainer",
-  componentId: "sc-1qw3g1a-0"
-})(["display:flex;position:fixed;top:0;bottom:0;left:0;right:0;padding:", ";background-color:rgba(0,0,0,0);opacity:0;pointer-events:none;transition:0.3s ease-out;z-index:-1;justify-content:center;align-items:center;", ";", ";"], props => `${props.theme.sizes.padding.medium} ${props.theme.sizes.padding.medium} 0`, _ref => {
+  componentId: "sc-3bij4r-0"
+})(["display:flex;position:fixed;top:0;bottom:0;left:0;right:0;padding:", ";background-color:rgba(0,0,0,0);opacity:0;pointer-events:none;transition:0.3s ease-out;z-index:-1;justify-content:center;align-items:center;overflow-y:auto;", ";", ";"], props => `${props.theme.sizes.padding.medium} ${props.theme.sizes.padding.medium} 0`, _ref => {
   let {
     mounted,
     open,
@@ -33197,21 +33188,32 @@ const ModalContainer = styled__default["default"].div.withConfig({
 });
 const ModalWrapper = styled__default["default"].div.withConfig({
   displayName: "ModalComponents__ModalWrapper",
-  componentId: "sc-1qw3g1a-1"
+  componentId: "sc-3bij4r-1"
 })(["max-width:100%;width:100%;margin:auto;box-sizing:border-box;pointer-events:none;"]);
-const ModalContent = styled__default["default"](Container).withConfig({
-  displayName: "ModalComponents__ModalContent",
-  componentId: "sc-1qw3g1a-2"
-})(["position:relative;margin:0 auto ", ";padding:32px;max-width:100%;min-width:", ";width:", ";border-radius:16px;box-shadow:0 0 4px 0 rgba(166,166,166,0.5);outline:none;pointer-events:auto;"], props => props.theme.sizes.padding.medium, _ref3 => {
+const ModalContent = styled__default["default"](Container).attrs(_ref3 => {
   let {
+    minHeight = '250px',
     $size
   } = _ref3;
-  return modalMinWidth[$size];
-}, _ref4 => {
+  return {
+    minHeight,
+    maxWidth: '100%',
+    minWidth: modalMinWidth[$size],
+    width: modalWidth[$size],
+    padding: '32px',
+    mainAlignment: 'flex-start',
+    crossAlignment: 'flex-start',
+    height: 'auto',
+    tabIndex: -1
+  };
+}).withConfig({
+  displayName: "ModalComponents__ModalContent",
+  componentId: "sc-3bij4r-2"
+})(["position:relative;margin:0 auto ", ";border-radius:16px;box-shadow:0 0 4px 0 rgba(166,166,166,0.5);outline:none;pointer-events:auto;"], _ref4 => {
   let {
-    $size
+    theme
   } = _ref4;
-  return modalWidth[$size];
+  return theme.sizes.padding.medium;
 });
 
 const CustomModal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn(_ref, ref) {
@@ -33222,8 +33224,10 @@ const CustomModal = /*#__PURE__*/React__default["default"].forwardRef(function M
     onClose,
     children,
     disablePortal = false,
-    maxHeight = '60vh',
+    minHeight,
+    maxHeight,
     zIndex = 999,
+    onClick,
     ...rest
   } = _ref;
   const [delayedOpen, setDelayedOpen] = React.useState(false);
@@ -33239,7 +33243,9 @@ const CustomModal = /*#__PURE__*/React__default["default"].forwardRef(function M
       e.stopPropagation();
     }
 
-    modalContentRef.current && onClose && !modalContentRef.current.contains(e.target) && onClose(e);
+    if (!e.defaultPrevented && modalContentRef.current && onClose && e.target instanceof Node && !modalContentRef.current.contains(e.target)) {
+      onClose(e);
+    }
   }, [onClose]);
   const onStartSentinelFocus = React.useCallback(() => {
     if (modalContentRef.current) {
@@ -33298,7 +33304,7 @@ const CustomModal = /*#__PURE__*/React__default["default"].forwardRef(function M
   }, [open]);
   const modalWrapperClickHandler = React.useCallback(e => {
     if (e) {
-      e.stopPropagation();
+      e.preventDefault();
     }
   }, []);
   return /*#__PURE__*/React__default["default"].createElement(Portal, {
@@ -33322,108 +33328,129 @@ const CustomModal = /*#__PURE__*/React__default["default"].forwardRef(function M
   }, /*#__PURE__*/React__default["default"].createElement(ModalContent, {
     ref: modalContentRef,
     background: background,
-    tabIndex: -1,
     $size: size,
-    crossAlignment: "flex-start",
-    height: "auto",
-    maxHeight: maxHeight
+    minHeight: minHeight,
+    maxHeight: maxHeight,
+    onClick: onClick
   }, children))), /*#__PURE__*/React__default["default"].createElement("div", {
     tabIndex: 0,
     ref: endSentinelRef
   })));
 });
 
-function copyToClipboard(node, windowObj) {
-  const el = windowObj.document.createElement('textarea');
-
-  if (el && node !== null && node !== void 0 && node.textContent) {
-    el.value = node.textContent;
-    windowObj.document.body.appendChild(el);
-    el.select();
-    windowObj.document.execCommand('copy');
-    windowObj.document.body.removeChild(el);
-  }
-}
-
-const ModalTitle = styled__default["default"](Text).withConfig({
-  displayName: "Modal__ModalTitle",
-  componentId: "sc-1lygj44-0"
-})(["box-sizing:border-box;width:100%;flex-grow:1;flex-basis:0;line-height:1.5;padding:", ";", ";"], props => `${props.theme.sizes.padding.small} ${props.theme.sizes.padding.small} ${props.theme.sizes.padding.small} 0`, _ref => {
+/*
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+const ModalBody = styled__default["default"].div.attrs(_ref => {
   let {
-    centered
+    maxHeight,
+    centered = false
   } = _ref;
+  return {
+    maxHeight,
+    centered
+  };
+}).withConfig({
+  displayName: "ModalBody",
+  componentId: "sc-17rwooa-0"
+})(["overflow-y:auto;max-height:", ";max-width:100%;box-sizing:border-box;width:100%;padding-top:", ";padding-bottom:", ";", ";&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;}flex-grow:1;"], _ref2 => {
+  let {
+    maxHeight
+  } = _ref2;
+  return maxHeight;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.sizes.padding.large;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.sizes.padding.large;
+}, _ref5 => {
+  let {
+    centered
+  } = _ref5;
   return centered && styled.css(["text-align:center;"]);
-});
-const ModalBody = styled__default["default"].div.withConfig({
-  displayName: "Modal__ModalBody",
-  componentId: "sc-1lygj44-1"
-})(["overflow-y:auto;max-height:", ";max-width:100%;box-sizing:border-box;width:100%;padding-top:", ";padding-bottom:", ";", ";&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;}"], props => props.maxHeight, props => props.theme.sizes.padding.large, props => props.theme.sizes.padding.large, props => props.centered && styled.css(["text-align:center;"]), _ref2 => {
+}, _ref6 => {
   let {
     theme
-  } = _ref2;
+  } = _ref6;
   return theme.palette.gray3.regular;
 });
+
+/*
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 const OptionalFooterContainer = styled__default["default"](Container).withConfig({
-  displayName: "Modal__OptionalFooterContainer",
-  componentId: "sc-1lygj44-2"
+  displayName: "ModalFooter__OptionalFooterContainer",
+  componentId: "sc-1kmh4vg-0"
 })(["min-width:1px;flex-basis:auto;flex-grow:1;"]);
 const ButtonContainer = styled__default["default"](Container).withConfig({
-  displayName: "Modal__ButtonContainer",
-  componentId: "sc-1lygj44-3"
-})(["min-width:1px;flex-basis:auto;flex-grow:1;", ""], _ref3 => {
+  displayName: "ModalFooter__ButtonContainer",
+  componentId: "sc-1kmh4vg-1"
+})(["min-width:1px;flex-basis:auto;flex-grow:1;", ""], _ref => {
   let {
     $pushLeftFirstChild
-  } = _ref3;
+  } = _ref;
   return $pushLeftFirstChild && styled.css(["> *{&:first-child{margin-right:auto;}}"]);
 });
 const DismissButton = styled__default["default"](Button$1).withConfig({
-  displayName: "Modal__DismissButton",
-  componentId: "sc-1lygj44-4"
+  displayName: "ModalFooter__DismissButton",
+  componentId: "sc-1kmh4vg-2"
 })(["margin-right:", ";flex-basis:auto;min-width:100px;flex-shrink:1;"], props => props.theme.sizes.padding.large);
 const ConfirmButton = styled__default["default"](Button$1).withConfig({
-  displayName: "Modal__ConfirmButton",
-  componentId: "sc-1lygj44-5"
+  displayName: "ModalFooter__ConfirmButton",
+  componentId: "sc-1kmh4vg-3"
 })(["flex-basis:auto;min-width:100px;flex-shrink:1;"]);
 
-const ModalFooter = _ref4 => {
+const ModalFooterContent = _ref2 => {
   let {
     type,
     centered,
     onConfirm,
     confirmLabel,
+    confirmDisabled,
     confirmColor,
     onSecondaryAction,
     secondaryActionLabel,
+    secondaryActionDisabled,
     onClose,
     dismissLabel,
-    copyLabel,
+    errorActionLabel,
     optionalFooter,
-    onCopyClipboard
-  } = _ref4;
+    onErrorAction
+  } = _ref2;
   const secondaryButton = React.useMemo(() => {
     let button;
 
-    if (type === 'error') {
+    if (type === 'error' && onErrorAction) {
       button = /*#__PURE__*/React__default["default"].createElement(DismissButton, {
-        onClick: onCopyClipboard,
+        onClick: onErrorAction,
         color: "secondary",
-        label: copyLabel
+        label: errorActionLabel
       });
     } else {
-      button = onSecondaryAction && secondaryActionLabel ? /*#__PURE__*/React__default["default"].createElement(DismissButton, {
+      button = onSecondaryAction && secondaryActionLabel && /*#__PURE__*/React__default["default"].createElement(DismissButton, {
         color: "primary",
         type: "outlined",
         onClick: onSecondaryAction,
-        label: secondaryActionLabel
-      }) : dismissLabel && onClose ? /*#__PURE__*/React__default["default"].createElement(DismissButton, {
+        label: secondaryActionLabel,
+        disabled: secondaryActionDisabled
+      }) || dismissLabel && onClose && /*#__PURE__*/React__default["default"].createElement(DismissButton, {
         color: "secondary",
         onClick: onClose,
         label: dismissLabel
-      }) : undefined;
+      }) || undefined;
     }
 
     return button;
-  }, [type, onCopyClipboard, copyLabel, onSecondaryAction, secondaryActionLabel, dismissLabel, onClose]);
+  }, [type, onErrorAction, errorActionLabel, onSecondaryAction, secondaryActionLabel, secondaryActionDisabled, dismissLabel, onClose]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, optionalFooter && centered && /*#__PURE__*/React__default["default"].createElement(OptionalFooterContainer, {
     padding: {
       bottom: 'large'
@@ -33439,11 +33466,106 @@ const ModalFooter = _ref4 => {
   }), secondaryButton, (onConfirm || onClose) && /*#__PURE__*/React__default["default"].createElement(ConfirmButton, {
     color: confirmColor,
     onClick: onConfirm || onClose,
-    label: confirmLabel
+    label: confirmLabel,
+    disabled: confirmDisabled
   })));
 };
 
-const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn(_ref5, ref) {
+const ModalFooter = _ref3 => {
+  let {
+    centered,
+    confirmColor,
+    confirmLabel,
+    errorActionLabel,
+    customFooter,
+    dismissLabel,
+    onClose,
+    onConfirm,
+    onErrorAction,
+    onSecondaryAction,
+    optionalFooter,
+    secondaryActionLabel,
+    type
+  } = _ref3;
+  return /*#__PURE__*/React__default["default"].createElement(Container, {
+    orientation: centered ? 'vertical' : 'horizontal',
+    mainAlignment: "flex-end",
+    padding: {
+      top: 'large'
+    }
+  }, customFooter || /*#__PURE__*/React__default["default"].createElement(ModalFooterContent, {
+    type: type,
+    centered: centered,
+    optionalFooter: optionalFooter,
+    confirmLabel: confirmLabel,
+    confirmColor: confirmColor,
+    dismissLabel: dismissLabel,
+    onConfirm: onConfirm,
+    onClose: onClose,
+    onSecondaryAction: onSecondaryAction,
+    secondaryActionLabel: secondaryActionLabel,
+    onErrorAction: onErrorAction,
+    errorActionLabel: errorActionLabel
+  }));
+};
+
+/*
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+const ModalTitle = styled__default["default"](Text).withConfig({
+  displayName: "ModalHeader__ModalTitle",
+  componentId: "sc-q2y9wr-0"
+})(["box-sizing:border-box;width:100%;flex-grow:1;flex-basis:0;line-height:1.5;padding:", ";", ";"], props => `${props.theme.sizes.padding.small} ${props.theme.sizes.padding.small} ${props.theme.sizes.padding.small} 0`, _ref => {
+  let {
+    centered
+  } = _ref;
+  return centered && styled.css(["text-align:center;"]);
+});
+
+const ModalHeader = _ref2 => {
+  let {
+    centered,
+    onClose,
+    showCloseIcon,
+    title,
+    type,
+    closeIconTooltip
+  } = _ref2;
+  return /*#__PURE__*/React__default["default"].createElement(Row, {
+    width: "100%",
+    padding: {
+      bottom: 'small'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ModalTitle, {
+    centered: !!centered,
+    color: type === 'error' ? 'error' : undefined,
+    size: "medium",
+    weight: "bold"
+  }, title), showCloseIcon && onClose && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+    label: closeIconTooltip,
+    disabled: !closeIconTooltip
+  }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+    icon: "Close",
+    size: "large",
+    onClick: onClose
+  })));
+};
+
+function copyToClipboard(node, windowObj) {
+  const el = windowObj.document.createElement('textarea');
+
+  if (el && node !== null && node !== void 0 && node.textContent) {
+    el.value = node.textContent;
+    windowObj.document.body.appendChild(el);
+    el.select();
+    windowObj.document.execCommand('copy');
+    windowObj.document.body.removeChild(el);
+  }
+}
+
+const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn(_ref, ref) {
   let {
     background = 'gray6',
     type = 'default',
@@ -33463,12 +33585,15 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn
     customFooter,
     hideFooter = false,
     showCloseIcon = true,
-    maxHeight = '60vh',
+    minHeight,
+    maxHeight,
     children,
     disablePortal = false,
     zIndex = 999,
+    onClick,
+    closeIconTooltip,
     ...rest
-  } = _ref5;
+  } = _ref;
   const [delayedOpen, setDelayedOpen] = React.useState(false);
   const {
     windowObj
@@ -33484,7 +33609,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn
       e.stopPropagation();
     }
 
-    modalContentRef.current && !e.isDefaultPrevented() && !modalContentRef.current.contains(e.target) && onClose && onClose(e);
+    if (!e.defaultPrevented && modalContentRef.current && e.target instanceof Node && !modalContentRef.current.contains(e.target) && onClose) {
+      onClose(e);
+    }
   }, [onClose]);
   const onCopyClipboard = React.useCallback(() => copyToClipboard(modalBodyRef.current, windowObj), [windowObj]);
   const onStartSentinelFocus = React.useCallback(() => {
@@ -33565,37 +33692,24 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn
   }, /*#__PURE__*/React__default["default"].createElement(ModalWrapper, null, /*#__PURE__*/React__default["default"].createElement(ModalContent, {
     ref: modalContentRef,
     background: background,
-    tabIndex: -1,
     $size: size,
-    crossAlignment: "flex-start",
-    height: "auto"
-  }, /*#__PURE__*/React__default["default"].createElement(Row, {
-    width: "100%",
-    padding: {
-      bottom: 'small'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(ModalTitle, {
-    centered: centered,
-    color: type === 'error' ? 'error' : undefined,
-    size: "medium",
-    weight: "bold"
-  }, Title), showCloseIcon && /*#__PURE__*/React__default["default"].createElement(IconButton, {
-    icon: "Close",
-    size: "large",
-    onClick: onClose
-  })), /*#__PURE__*/React__default["default"].createElement(Divider, null), /*#__PURE__*/React__default["default"].createElement(ModalBody, {
+    minHeight: minHeight,
+    maxHeight: maxHeight,
+    onClick: onClick
+  }, /*#__PURE__*/React__default["default"].createElement(ModalHeader, {
     centered: centered,
-    ref: modalBodyRef,
-    maxHeight: maxHeight
-  }, children), !hideFooter && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Divider, null), /*#__PURE__*/React__default["default"].createElement(Container, {
-    orientation: centered ? 'vertical' : 'horizontal',
-    mainAlignment: "flex-end",
-    padding: {
-      top: 'large'
-    }
-  }, customFooter || /*#__PURE__*/React__default["default"].createElement(ModalFooter, {
     type: type,
+    title: Title,
+    showCloseIcon: showCloseIcon,
+    onClose: onClose,
+    closeIconTooltip: closeIconTooltip
+  }), /*#__PURE__*/React__default["default"].createElement(Divider, null), /*#__PURE__*/React__default["default"].createElement(ModalBody, {
+    centered: centered,
+    ref: modalBodyRef
+  }, children), !hideFooter && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Divider, null), /*#__PURE__*/React__default["default"].createElement(ModalFooter, {
     centered: centered,
+    customFooter: customFooter,
+    type: type,
     optionalFooter: optionalFooter,
     confirmLabel: confirmLabel,
     confirmColor: confirmColor,
@@ -33604,9 +33718,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn
     onClose: onClose,
     onSecondaryAction: onSecondaryAction,
     secondaryActionLabel: secondaryActionLabel,
-    onCopyClipboard: onCopyClipboard,
-    copyLabel: copyLabel
-  })))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    onErrorAction: onCopyClipboard,
+    errorActionLabel: copyLabel
+  }))))), /*#__PURE__*/React__default["default"].createElement("div", {
     tabIndex: 0,
     ref: endSentinelRef
   })));
@@ -34027,7 +34141,7 @@ function ModalManager(_ref) {
       value: modal
     });
     return closeModal;
-  }, [windowObj.document.body.style]);
+  }, [windowObj]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ModalManagerContext.Provider, {
     value: createModal
   }, children), modals);
@@ -35434,6 +35548,10 @@ exports.Link = Link;
 exports.List = List;
 exports.LoadMore = LoadMore;
 exports.Modal = Modal;
+exports.ModalBody = ModalBody;
+exports.ModalFooter = ModalFooter;
+exports.ModalFooterContent = ModalFooterContent;
+exports.ModalHeader = ModalHeader;
 exports.ModalManager = ModalManager;
 exports.ModalManagerContext = ModalManagerContext;
 exports.MultiButton = MultiButton;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@zextras/carbonio-design-system",
-	"version": "0.4.1",
+	"version": "0.5.0",
 	"description": "An awesome UI for Zextras Projects.",
 	"main": "dist/zapp-ui.bundle.js",
 	"types": "dist/zapp-ui.bundle.d.ts",
@@ -65,7 +65,10 @@
 		"copy-webpack-plugin": "10.2.0",
 		"core-js": "3.19.1",
 		"create-index": "2.6.0",
+		"eslint-plugin-jest-dom": "^4.0.2",
 		"eslint-plugin-notice": "^0.9.10",
+		"eslint-plugin-testing-library": "^5.6.4",
+		"eslint-plugin-unused-imports": "^2.0.0",
 		"file-loader": "6.2.0",
 		"husky": "5.2.0",
 		"is-ci": "3.0.1",