orcs-design-system 3.3.42 → 3.3.44

package/es/assets/Colour/Colour.stories.js

@@ -58,60 +58,56 @@ export const WhiteOpacityScale = () => /*#__PURE__*/_jsx(Box, {
     })]
   })
 });
-export const PrimaryOpacityScale = {
-  render: () => /*#__PURE__*/_jsxs(Flex, {
-    justifyContent: "center",
-    children: [/*#__PURE__*/_jsx(Colour, {
-      bg: "primary"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "primary90"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "primary80"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "primary70"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "primary60"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "primary50"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "primary40"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "primary30"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "primary20"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "primary10"
-    })]
-  }),
-  name: "Primary Opacity Scale"
-};
-export const SecondaryOpacityScale = {
-  render: () => /*#__PURE__*/_jsxs(Flex, {
-    justifyContent: "center",
-    children: [/*#__PURE__*/_jsx(Colour, {
-      bg: "secondary"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "secondary90"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "secondary80"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "secondary70"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "secondary60"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "secondary50"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "secondary40"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "secondary30"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "secondary20"
-    }), /*#__PURE__*/_jsx(Colour, {
-      bg: "secondary10"
-    })]
-  }),
-  name: "Secondary Opacity Scale"
-};
+export const PrimaryOpacityScale = () => /*#__PURE__*/_jsxs(Flex, {
+  justifyContent: "center",
+  children: [/*#__PURE__*/_jsx(Colour, {
+    bg: "primary"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "primary90"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "primary80"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "primary70"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "primary60"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "primary50"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "primary40"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "primary30"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "primary20"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "primary10"
+  })]
+});
+PrimaryOpacityScale.storyName = "Primary Opacity Scale";
+export const SecondaryOpacityScale = () => /*#__PURE__*/_jsxs(Flex, {
+  justifyContent: "center",
+  children: [/*#__PURE__*/_jsx(Colour, {
+    bg: "secondary"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "secondary90"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "secondary80"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "secondary70"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "secondary60"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "secondary50"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "secondary40"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "secondary30"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "secondary20"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "secondary10"
+  })]
+});
+SecondaryOpacityScale.storyName = "Secondary Opacity Scale";
 export const SuccessOpacityScale = () => /*#__PURE__*/_jsxs(Flex, {
   justifyContent: "center",
   children: [/*#__PURE__*/_jsx(Colour, {
@@ -194,6 +190,16 @@ WhiteOpacityScale.__docgenInfo = {
   "methods": [],
   "displayName": "WhiteOpacityScale"
 };
+PrimaryOpacityScale.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "PrimaryOpacityScale"
+};
+SecondaryOpacityScale.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SecondaryOpacityScale"
+};
 SuccessOpacityScale.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/ActionsMenu/ActionsMenu.stories.js

@@ -353,6 +353,41 @@ export const circleVariantActionsMenu = () => /*#__PURE__*/_jsxs(ActionsMenu, {
   })]
 });
 circleVariantActionsMenu.storyName = "Circle Variant";
+export const disabledActionsMenu = () => /*#__PURE__*/_jsxs(ActionsMenu, {
+  disabled: true,
+  children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
+    href: "https://orchestrated.io/",
+    children: "Open details page"
+  }), /*#__PURE__*/_jsx(BrowserRouter, {
+    children: /*#__PURE__*/_jsx(ActionsMenuItem, {
+      as: Link,
+      to: "/",
+      children: "Edit"
+    })
+  }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+    onClick: action("clicked"),
+    children: "Remove"
+  })]
+});
+disabledActionsMenu.storyName = "Disabled Default";
+export const disabledCircleVariantActionsMenu = () => /*#__PURE__*/_jsxs(ActionsMenu, {
+  variant: "circle",
+  disabled: true,
+  children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
+    href: "https://orchestrated.io/",
+    children: "Open details page"
+  }), /*#__PURE__*/_jsx(BrowserRouter, {
+    children: /*#__PURE__*/_jsx(ActionsMenuItem, {
+      as: Link,
+      to: "/",
+      children: "Edit"
+    })
+  }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+    onClick: action("clicked"),
+    children: "Remove"
+  })]
+});
+disabledCircleVariantActionsMenu.storyName = "Disabled Circle Variant";
 defaultActionsMenu.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -387,4 +422,14 @@ circleVariantActionsMenu.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "circleVariantActionsMenu"
+};
+disabledActionsMenu.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "disabledActionsMenu"
+};
+disabledCircleVariantActionsMenu.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "disabledCircleVariantActionsMenu"
 };

package/es/components/ActionsMenu/index.js

@@ -8,7 +8,6 @@ import useActionMenu from "./useActionMenu";
 import { crossFadeIn, beforeDotCollapsing, beforeDotExpanding, afterDotCollapsing, afterDotExpanding, beforeCrossExpanding, beforeCrossCollapsing, afterCrossExpanding, afterCrossCollapsing } from "./ActionsMenu.animations";
 import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
 import { getFloatingUiRootElement, getFloatingUiZIndex } from "../../utils/floatingUiHelpers";
-import { variant } from "styled-system";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ActionMenuContext = /*#__PURE__*/createContext({});
 const StyledActionsMenuContainer = styled.div.withConfig({
@@ -22,27 +21,7 @@ const Wrapper = styled.div.withConfig({
 const Control = styled.button.withConfig({
   displayName: "ActionsMenu__Control",
   componentId: "sc-yvbni2-2"
-})(["position:relative;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;border-radius:", ";transition:", ";cursor:pointer;width:30px;height:30px;&:hover,&:focus{outline:0;border-color:", ";}", " &[data-state=\"open\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"open\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}"], props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), variant({
-  prop: "variant",
-  variants: {
-    default: {
-      backgroundColor: "white",
-      border: "solid 1px",
-      borderColor: "greyLight",
-      width: "30px",
-      height: "30px",
-      borderRadius: 2
-    },
-    circle: {
-      backgroundColor: "greyDarkest",
-      border: "solid 2px",
-      borderColor: "greyDarkest",
-      width: "35px",
-      height: "35px",
-      borderRadius: "50%"
-    }
-  }
-}), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
+})(["position:relative;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;border-radius:", ";transition:", ";cursor:", ";width:", ";height:", ";border-radius:", ";border:", ";", " ", " &:hover,&:focus{outline:0;border-color:", ";}&[data-state=\"open\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"open\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}"], props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? "not-allowed" : "pointer", props => props.variant === "circle" ? "35px" : "30px", props => props.variant === "circle" ? "35px" : "30px", props => props.variant === "circle" ? "50%" : themeGet("radii.2")(props), props => props.variant === "circle" ? "solid 2px" : "solid 1px", props => props.variant === "default" && css(["background-color:", ";border-color:", ";"], props.disabled ? themeGet("colors.greyLighter")(props) : "white", props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyLight")(props)), props => props.variant === "circle" && css(["background-color:", ";border-color:", ";"], props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props), props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props)), props => props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.primary")(props), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
 const Dots = styled.div.withConfig({
   displayName: "ActionsMenu__Dots",
   componentId: "sc-yvbni2-3"
@@ -150,6 +129,7 @@ export const ActionsMenuBody = _ref2 => {
     closeOnClick = false,
     "data-testid": dataTestId = "ActionsMenu",
     variant = "default",
+    disabled = false,
     ...props
   } = _ref2;
   const id = useId();
@@ -169,17 +149,19 @@ export const ActionsMenuBody = _ref2 => {
     "aria-label": ariaLabel,
     onFocus: onTriggerFocus,
     id,
+    disabled,
     ...actionMenu.getReferenceProps({
       ...props,
-      onClick: onToggle,
+      onClick: disabled ? undefined : onToggle,
       ref: triggerRef,
       "data-state": actionMenu.open ? "open" : "closed",
       "data-testid": dataTestId
     })
-  }), [ariaLabel, onTriggerFocus, id, actionMenu, onToggle, props, triggerRef, dataTestId]);
+  }), [ariaLabel, onTriggerFocus, id, actionMenu, onToggle, props, triggerRef, dataTestId, disabled]);
   let triggerComponent = /*#__PURE__*/_jsxs(Control, {
     ...triggerProps,
     variant: variant,
+    disabled: disabled,
     children: [/*#__PURE__*/_jsx(Dots, {
       className: "actionsMenu__dots",
       variant: variant
@@ -283,7 +265,8 @@ ActionsMenuBody.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   theme: PropTypes.object,
   ariaLabel: PropTypes.string,
-  variant: PropTypes.oneOf(["default", "circle"])
+  variant: PropTypes.oneOf(["default", "circle"]),
+  disabled: PropTypes.bool
 };
 const ActionsMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [toggleState, setToggle] = useState(false);
@@ -316,7 +299,9 @@ ActionsMenu.propTypes = {
   /** Specifies the aria-label for the button */
   ariaLabel: PropTypes.string,
   /** Specifies the variant of the ActionsMenu */
-  variant: PropTypes.oneOf(["default", "circle"])
+  variant: PropTypes.oneOf(["default", "circle"]),
+  /** Specifies whether the ActionsMenu is disabled */
+  disabled: PropTypes.bool
 };
 ActionsMenu.__docgenInfo = {
   "description": "",
@@ -437,6 +422,13 @@ ActionsMenu.__docgenInfo = {
         }]
       },
       "required": false
+    },
+    "disabled": {
+      "description": "Specifies whether the ActionsMenu is disabled",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
     }
   }
 };
@@ -508,6 +500,17 @@ ActionsMenuBody.__docgenInfo = {
       },
       "required": false
     },
+    "disabled": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "onTriggerFocus": {
       "description": "",
       "type": {

package/es/components/Avatar/index.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import styled, { ThemeProvider } from "styled-components";
+import styled, { ThemeProvider, keyframes } from "styled-components";
 import { space, layout, variant, position, compose } from "styled-system";
 import PropTypes from "prop-types";
 import Header, { Text } from "../Typography";
@@ -10,6 +10,7 @@ import css from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const avatarStyles = compose(space, layout, position);
+export const COLOR_CHANGE = keyframes(["0%{background-position:-468px 0;}100%{background-position:468px 0;}"]);
 
 // Helper function to resolve customSize values
 const resolveCustomSize = (customSize, props) => {
@@ -313,14 +314,28 @@ const HeaderAvatarBorder = styled("div").withConfig({
     background: "#fff"
   };
 });
+const HeaderAvatarLoading = styled("div").withConfig({
+  displayName: "Avatar__HeaderAvatarLoading",
+  componentId: "sc-1wtet2j-9"
+})(["width:", ";height:", ";background:linear-gradient( to right,rgba(0,0,0,0.1) 5%,rgba(0,0,0,0.05) 65%,rgba(0,0,0,0.1) 70% );background-size:200px;animation:", " 20s linear infinite;"], _ref4 => {
+  let {
+    $size
+  } = _ref4;
+  return $size;
+}, _ref5 => {
+  let {
+    $size
+  } = _ref5;
+  return $size;
+}, COLOR_CHANGE);
 const HeaderAvatarImage = styled("img").withConfig({
   displayName: "Avatar__HeaderAvatarImage",
-  componentId: "sc-1wtet2j-9"
-})(_ref4 => {
+  componentId: "sc-1wtet2j-10"
+})(_ref6 => {
   let {
     $size,
     $shape
-  } = _ref4;
+  } = _ref6;
   return {
     width: $size,
     height: $size,
@@ -334,12 +349,12 @@ const HeaderAvatarImage = styled("img").withConfig({
 });
 const HeaderAvatarShape = styled("div").withConfig({
   displayName: "Avatar__HeaderAvatarShape",
-  componentId: "sc-1wtet2j-10"
-})(_ref5 => {
+  componentId: "sc-1wtet2j-11"
+})(_ref7 => {
   let {
     $size,
     $shape
-  } = _ref5;
+  } = _ref7;
   return {
     width: $size,
     height: $size,
@@ -362,11 +377,11 @@ const HeaderAvatarShape = styled("div").withConfig({
 });
 const HeaderAvatarAction = styled("button").withConfig({
   displayName: "Avatar__HeaderAvatarAction",
-  componentId: "sc-1wtet2j-11"
-})(_ref6 => {
+  componentId: "sc-1wtet2j-12"
+})(_ref8 => {
   let {
     $shape
-  } = _ref6;
+  } = _ref8;
   return {
     cursor: "pointer",
     padding: "0",
@@ -392,13 +407,13 @@ const HeaderAvatarAction = styled("button").withConfig({
 });
 const IconContainer = styled("div").withConfig({
   displayName: "Avatar__IconContainer",
-  componentId: "sc-1wtet2j-12"
-})(_ref7 => {
+  componentId: "sc-1wtet2j-13"
+})(_ref9 => {
   let {
     $shape,
     $sizing,
     $hasImage
-  } = _ref7;
+  } = _ref9;
   // Simplified width calculation (no change based on image presence)
   const width = $sizing === "large" ? "calc(100% - 12px)" : "calc(100% - 8px)";
 
@@ -427,7 +442,7 @@ const IconContainer = styled("div").withConfig({
     })
   };
 });
-const Avatar = _ref8 => {
+const Avatar = _ref0 => {
   let {
     sizing,
     image,
@@ -445,8 +460,9 @@ const Avatar = _ref8 => {
     customSize,
     headerAvatar = false,
     onClick,
+    loading = false,
     ...props
-  } = _ref8;
+  } = _ref0;
   const hasTitle = !!title;
   const hasSubtitle = !!subtitle;
   const hasSubtitleContent = !!subtitleContent;
@@ -470,6 +486,24 @@ const Avatar = _ref8 => {
         theme
       }) || customSize;
     }
+    const imgContent = image ? /*#__PURE__*/_jsx(HeaderAvatarImage, {
+      src: image,
+      alt: alt,
+      $size: size,
+      $shape: shape
+    }) : /*#__PURE__*/_jsx(HeaderAvatarShape, {
+      $size: size,
+      $shape: shape,
+      children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "users"]
+      }) : shape === "tag" ? /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "tag"]
+      }) : shape === "square" ? /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "users"]
+      }) : /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "user"]
+      })
+    });
     const avatarContent = /*#__PURE__*/_jsx(HeaderAvatarWrapper, {
       ...props,
       $size: size,
@@ -478,27 +512,12 @@ const Avatar = _ref8 => {
         $size: size,
         $shape: shape,
         $sizing: sizing,
-        children: image ? /*#__PURE__*/_jsx(HeaderAvatarImage, {
-          src: image,
-          alt: alt,
-          $size: size,
-          $shape: shape
-        }) : /*#__PURE__*/_jsx(HeaderAvatarShape, {
-          $size: size,
-          $shape: shape,
-          children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
-            icon: ["fas", "users"]
-          }) : shape === "tag" ? /*#__PURE__*/_jsx(Icon, {
-            icon: ["fas", "tag"]
-          }) : shape === "square" ? /*#__PURE__*/_jsx(Icon, {
-            icon: ["fas", "users"]
-          }) : /*#__PURE__*/_jsx(Icon, {
-            icon: ["fas", "user"]
-          })
-        })
+        children: loading ? /*#__PURE__*/_jsx(HeaderAvatarLoading, {
+          $size: size
+        }) : imgContent
       })
     });
-    if (onClick) {
+    if (onClick && !loading) {
       return /*#__PURE__*/_jsx(Popover, {
         direction: "right",
         width: "fit-content",
@@ -633,7 +652,9 @@ Avatar.propTypes = {
   /** Specifies whether to render the avatar in headerAvatar mode */
   headerAvatar: PropTypes.bool,
   /** Specifies the onClick handler for the action button in headerAvatar mode */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  /** Specifies whether to render the avatar in loading state */
+  loading: PropTypes.bool
 };
 Avatar.__docgenInfo = {
   "description": "",
@@ -716,6 +737,17 @@ Avatar.__docgenInfo = {
       },
       "required": false
     },
+    "loading": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "Specifies whether to render the avatar in loading state",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "sizing": {
       "description": "Changes the sizing of the Avatar component",
       "type": {

package/es/components/Popover/index.js

@@ -94,6 +94,7 @@ export default function Popover(_ref) {
     withFocusControl = true,
     offset: customOffset,
     headerAvatarSizing,
+    disabled,
     ...props
   } = _ref;
   const [visible, setVisible] = useState(false);
@@ -131,7 +132,7 @@ export default function Popover(_ref) {
     context
   } = useFloating({
     open: visible,
-    onOpenChange: setVisible,
+    onOpenChange: disabled ? () => {} : setVisible,
     placement: DIRECTIONS_MAP[direction] || direction || "right",
     whileElementsMounted: autoUpdate,
     middleware
@@ -271,7 +272,9 @@ Popover.propTypes = {
   /** Custom offset configuration for the popover positioning. Can be an object with mainAxis and/or alignmentAxis properties, or a function that returns an offset object. */
   offset: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   /** Special prop for Header Avatar to apply CSS-based positioning adjustments when sizing changes dynamically */
-  headerAvatarSizing: PropTypes.oneOf(["large", "default", "small"])
+  headerAvatarSizing: PropTypes.oneOf(["large", "default", "small"]),
+  /** Disable the popover */
+  disabled: PropTypes.bool
 };
 Popover.__docgenInfo = {
   "description": "",
@@ -431,6 +434,13 @@ Popover.__docgenInfo = {
         }]
       },
       "required": false
+    },
+    "disabled": {
+      "description": "Disable the popover",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
     }
   }
 };