orcs-design-system 3.2.10 → 3.2.12

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

@@ -39,7 +39,7 @@ export const leftOffsetActionsMenu = () => /*#__PURE__*/_jsx(Flex, {
   justifyContent: "flex-end",
   children: /*#__PURE__*/_jsxs(ActionsMenu, {
     ariaLabel: "Options Menu",
-    direction: "left",
+    direction: "left-start",
     children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
       href: "https://orchestrated.io/",
       children: "Open details page"
@@ -172,7 +172,7 @@ export const advancedActionsMenu = () => {
     justifyContent: "flex-end",
     children: /*#__PURE__*/_jsx(ActionsMenu, {
       ref: ref,
-      direction: "left",
+      direction: "left-start",
       className: "ignore-onclickoutside",
       customTriggerComponent: /*#__PURE__*/_jsx(Button, {
         variant: "default",
@@ -201,27 +201,17 @@ export const customActionsMenu = () => {
     const closeMenu = () => {
       setToggle(false);
     };
-    const resetAndCloseMenu = () => {
-      if (menuItemsRef.current) {
-        menuItemsRef.current.reset();
-      }
-      closeMenu();
-    };
-    const menuRef = useOnclickOutside(resetAndCloseMenu, {
-      disabled: !toggleState
-    });
     const onToggle = e => {
       e.stopPropagation();
       setToggle(!toggleState);
     };
     return /*#__PURE__*/_jsx("div", {
-      ref: menuRef,
       children: /*#__PURE__*/_jsx(Flex, {
         justifyContent: "flex-end",
         children: /*#__PURE__*/_jsx(ActionsMenuBody, {
           toggleState: toggleState,
           onToggle: onToggle,
-          direction: "left",
+          direction: "left-start",
           customTriggerComponent: /*#__PURE__*/_jsx(Button, {
             variant: "danger",
             iconOnly: true,
@@ -269,9 +259,8 @@ export const textButtonActionsMenu = () => {
       children: /*#__PURE__*/_jsxs(ActionsMenuBody, {
         toggleState: toggleState,
         onToggle: onToggle,
-        menuTopPosition: "30px",
-        menuLeftPosition: "0",
         menuWidth: "120px",
+        direction: "bottom-start",
         customTriggerComponent: /*#__PURE__*/_jsxs(Button, {
           variant: "ghost",
           type: "button",
@@ -320,8 +309,7 @@ export const keepInViewExample = () => /*#__PURE__*/_jsxs(Flex, {
       children: "Remove"
     })]
   }), /*#__PURE__*/_jsxs(ActionsMenu, {
-    menuTopPosition: "30px",
-    menuLeftPosition: "0",
+    direction: "bottom-start",
     menuWidth: "200px",
     customTriggerComponent: /*#__PURE__*/_jsxs(Button, {
       variant: "ghost",

package/es/components/ActionsMenu/index.js

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useImperativeHandle, useCallback, createContext, useContext, useMemo, useRef, useId } from "react";
-import styled, { css, keyframes, ThemeProvider } from "styled-components";
+import React, { useState, useImperativeHandle, createContext, useContext, useMemo, useId, useLayoutEffect } from "react";
+import styled, { keyframes, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
-import { useKeepInView } from "../../hooks/keepInView";
 import { commonKeys } from "../../hooks/keypress";
+import useActionMenu from "./useActionMenu";
+import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ActionMenuContext = /*#__PURE__*/createContext({});
 const crossTransform1 = keyframes(["0%{transform:translate(0,-6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(-45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(-45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
@@ -16,16 +17,27 @@ const Wrapper = styled.div.withConfig({
 const Control = styled.button.withConfig({
   displayName: "ActionsMenu__Control",
   componentId: "sc-yvbni2-1"
-})(["position:relative;background-color:", ";border:none;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;background-color:", ";}"], props => themeGet("colors.greyLighter")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.greyLight")(props));
+})(["position:relative;background-color:", ";border:none;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;background-color:", ";}&[data-state=\"open\"] .action-menu-icon{&:before{animation:400ms ", " ease-in-out forwards;}&:after{animation:400ms ", " ease-in-out forwards;}}"], props => themeGet("colors.greyLighter")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.greyLight")(props), crossTransform1, crossTransform2);
 const Icon = styled.div.withConfig({
   displayName: "ActionsMenu__Icon",
   componentId: "sc-yvbni2-2"
-})(["border-radius:2px;height:4px;width:4px;background-color:", ";&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";transition:", ";transform-origin:50% 50%;}&:before{transform:translate(0,-6px) scaleX(1);}&:after{transform:translate(0,6px) scaleX(1);}", ";"], props => themeGet("colors.greyDarker")(props), props => themeGet("colors.greyDarker")(props), props => themeGet("transition.transitionDefault")(props), props => props.isOpen ? css(["&:before{animation:400ms ", " ease-in-out forwards;}&:after{animation:400ms ", " ease-in-out forwards;}"], crossTransform1, crossTransform2) : css([""]));
+})(["border-radius:2px;height:4px;width:4px;background-color:", ";&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";transition:", ";transform-origin:50% 50%;}&:before{transform:translate(0,-6px) scaleX(1);}&:after{transform:translate(0,6px) scaleX(1);}"], props => themeGet("colors.greyDarker")(props), props => themeGet("colors.greyDarker")(props), props => themeGet("transition.transitionDefault")(props));
 const Menu = styled.div.withConfig({
   displayName: "ActionsMenu__Menu",
   componentId: "sc-yvbni2-3"
-})(["display:", ";position:absolute;left:", ";right:", ";top:", ";width:", ";z-index:5;background-color:", ";border-radius:", ";transform:scale(0);opacity:0;pointer-events:none;transform-origin:", ";transition:all 300ms;transition-timing-function:cubic-bezier(0,1.4,1,1);", ";"], props => props.isOpen ? "block" : "none", props => props.menuLeftPosition ? props.menuLeftPosition : props.direction == "left" ? "auto" : "34px", props => props.menuRightPosition ? props.menuRightPosition : props.direction == "left" ? "34px" : "auto", props => props.menuTopPosition ? props.menuTopPosition : "0", props => props.menuWidth ? props.menuWidth : "auto", props => themeGet("colors.greyDarker")(props), props => themeGet("radii.2")(props), props => props.direction == "left" ? "top right" : "top left", props => props.isOpen ? css(["transform:scale(1);opacity:1;pointer-events:auto;"]) : css([""]));
+})(["display:block;width:", ";z-index:5;background-color:", ";border-radius:", ";transition:all 300ms;transition-timing-function:cubic-bezier(0,1.4,1,1);pointer-events:auto;"], props => props.menuWidth ? props.menuWidth : "auto", props => themeGet("colors.greyDarker")(props), props => themeGet("radii.2")(props));
 export const ActionsMenuHeading = styled(props => {
+  const {
+    actionMenu
+  } = useContext(ActionMenuContext);
+  const id = useId();
+
+  // // Only sets `aria-labelledby` on the Popover root element
+  // // if this component is mounted inside it.
+  useLayoutEffect(() => {
+    actionMenu.setLabelId(id);
+    return () => actionMenu.setLabelId(undefined);
+  }, [id, actionMenu]);
   return /*#__PURE__*/_jsx("div", {
     ...props,
     onKeyUp: e => {
@@ -81,10 +93,8 @@ export const ActionsMenuBody = _ref => {
     theme,
     onToggle,
     toggleState,
-    direction,
-    menuTopPosition,
-    menuLeftPosition,
-    menuRightPosition,
+    // direction - Deprecated
+    direction = "right-start",
     menuWidth,
     customTriggerComponent,
     children,
@@ -94,101 +104,76 @@ export const ActionsMenuBody = _ref => {
     closeOnClick = false,
     ...props
   } = _ref;
-  const [isTabbed, setTabbed] = useState(false);
   const id = useId();
-  const wrapperRef = useRef();
-  const [menuPosition] = useState({
-    menuLeftPosition,
-    menuRightPosition,
-    menuTopPosition
-  });
-  const [inViewDirection, setInViewDirection] = useState(direction);
-  const setMenuPosition = useCallback(newDirection => {
-    if (typeof menuLeftPosition !== "undefined" || typeof menuRightPosition !== "undefined") {
-      if (menuPosition.menuLeftPosition) {
-        menuPosition.menuRightPosition = menuPosition.menuLeftPosition;
-        menuPosition.menuLeftPosition = null;
-      } else if (menuPosition.menuRightPosition) {
-        menuPosition.menuLeftPosition = menuPosition.menuRightPosition;
-        menuPosition.menuRightPosition = null;
+  const actionMenu = useActionMenu({
+    placement: direction,
+    open: toggleState,
+    onOpenChange: (_, e) => {
+      if (e) {
+        onToggle === null || onToggle === void 0 || onToggle(e);
       }
     }
-    setInViewDirection(newDirection);
-  }, [menuLeftPosition, menuRightPosition, menuPosition, setInViewDirection]);
-  const [ref, setIsShown] = useKeepInView({
-    direction,
-    callback: setMenuPosition
   });
-  useEffect(() => {
-    setIsShown(toggleState);
-  }, [toggleState, setIsShown]);
-  let triggerBtn = null;
-  const value = useMemo(() => ({
+  const childrenRef = children.ref;
+  const triggerRef = useMergeRefs([actionMenu.refs.setReference, childrenRef]);
+  const ref = useMergeRefs([actionMenu.refs.setFloating]);
+  const triggerProps = {
+    ariaLabel,
+    "aria-label": ariaLabel,
+    onFocus: onTriggerFocus,
     id,
-    onItemClick: e => {
-      if (closeOnClick && !isTabbed) {
-        closeMenu(e);
-      }
-    }
-  }), [closeOnClick, isTabbed, closeMenu, id]);
+    onClick: onToggle,
+    ...actionMenu.getReferenceProps({
+      ref: triggerRef,
+      ...props,
+      ...children.props,
+      "data-state": actionMenu.open ? "open" : "closed"
+    })
+  };
+  let triggerComponent = /*#__PURE__*/_jsx(Control, {
+    ...triggerProps,
+    children: /*#__PURE__*/_jsx(Icon, {
+      className: "action-menu-icon"
+    })
+  });
   if (customTriggerComponent) {
-    triggerBtn = /*#__PURE__*/React.cloneElement(customTriggerComponent, {
-      onClick: onToggle,
-      "aria-label": ariaLabel,
-      "aria-expanded": "".concat(toggleState),
-      onFocus: onTriggerFocus,
-      id
-    });
-  } else {
-    triggerBtn = /*#__PURE__*/_jsx(Control, {
-      "aria-label": ariaLabel,
-      "aria-expanded": "".concat(toggleState),
-      onClick: onToggle,
-      onFocus: onTriggerFocus,
-      id: id,
-      children: /*#__PURE__*/_jsx(Icon, {
-        isOpen: toggleState
-      })
-    });
+    triggerComponent = /*#__PURE__*/React.cloneElement(customTriggerComponent, triggerProps);
   }
-  const component = /*#__PURE__*/_jsxs(Wrapper, {
-    ...props,
-    ref: wrapperRef,
-    onKeyUp: e => {
-      if ([commonKeys.ESCAPE, commonKeys.ESC].includes(e.key)) {
+  const value = useMemo(() => ({
+    id,
+    onItemClick: e => {
+      if (closeOnClick) {
         closeMenu(e);
-        document.getElementById(id).focus();
-      }
-      if (commonKeys.TAB === e.key && !isTabbed) {
-        setTabbed === null || setTabbed === void 0 || setTabbed(true);
       }
     },
-    onBlur: e => {
-      setTimeout(() => {
-        var _wrapperRef$current, _document$getElementB;
-        const focusedElement = document.activeElement;
-        const isChild = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.contains(focusedElement);
-        const isModalChild = (_document$getElementB = document.getElementById("modal-overlay")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contains(focusedElement);
-        const isModalAndTabbed = isTabbed && isModalChild;
-        if (isChild || isModalAndTabbed) return;
-        setTabbed === null || setTabbed === void 0 || setTabbed(false);
-        closeMenu(e);
-      }, 0);
-    },
-    children: [triggerBtn, /*#__PURE__*/_jsx(Menu, {
-      isOpen: toggleState,
-      direction: inViewDirection,
-      menuTopPosition: menuPosition.menuTopPosition,
-      menuLeftPosition: menuPosition.menuLeftPosition,
-      menuRightPosition: menuPosition.menuRightPosition,
-      menuWidth: menuWidth,
-      ref: ref,
-      role: "list",
-      children: /*#__PURE__*/_jsx(ActionMenuContext.Provider, {
-        value: value,
-        children: children
-      })
-    })]
+    actionMenu
+  }), [closeOnClick, closeMenu, id, actionMenu]);
+  const component = /*#__PURE__*/_jsx(ActionMenuContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsxs(Wrapper, {
+      ...props,
+      children: [triggerComponent, actionMenu.context.open && /*#__PURE__*/_jsx(FloatingPortal, {
+        children: /*#__PURE__*/_jsx(FloatingFocusManager, {
+          context: actionMenu.context,
+          modal: actionMenu.modal,
+          children: /*#__PURE__*/_jsx("div", {
+            ref: ref,
+            style: {
+              ...actionMenu.floatingStyles
+            },
+            "aria-labelledby": actionMenu.labelId,
+            ...actionMenu.getFloatingProps(props),
+            className: "actionMenu-content",
+            children: /*#__PURE__*/_jsx(Menu, {
+              menuWidth: menuWidth,
+              isOpen: toggleState,
+              role: "list",
+              children: children
+            })
+          })
+        })
+      })]
+    })
   });
   return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
     theme: theme,
@@ -202,6 +187,7 @@ ActionsMenuBody.propTypes = {
   toggleState: PropTypes.bool.isRequired,
   closeOnClick: PropTypes.bool,
   direction: PropTypes.string,
+  placement: PropTypes.string,
   menuTopPosition: PropTypes.string,
   menuLeftPosition: PropTypes.string,
   menuRightPosition: PropTypes.string,
@@ -211,47 +197,28 @@ ActionsMenuBody.propTypes = {
   theme: PropTypes.object,
   ariaLabel: PropTypes.string
 };
-const ActionsMenu = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    customTriggerComponent,
-    direction,
-    isOpen = false,
-    theme,
-    closeOnClick = true,
-    ariaLabel = "Options Menu",
-    ...props
-  } = _ref2;
-  const [toggleState, setToggle] = useState(isOpen);
+const ActionsMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const [toggleState, setToggle] = useState(false);
+  const onToggle = e => {
+    e.stopPropagation();
+    setToggle(!toggleState);
+  };
   useImperativeHandle(ref, () => ({
     closeMenu: () => {
       setToggle(false);
     }
   }));
-  const onToggle = e => {
-    e.stopPropagation();
-    setToggle(!toggleState);
-  };
-  const closeMenu = e => {
-    e.stopPropagation();
-    setToggle(false);
-  };
   return /*#__PURE__*/_jsx(ActionsMenuBody, {
-    onToggle: onToggle,
-    closeMenu: closeMenu,
-    toggleState: toggleState,
-    customTriggerComponent: customTriggerComponent,
-    direction: direction,
-    theme: theme,
-    ariaLabel: ariaLabel,
-    closeOnClick: closeOnClick,
     ...props,
-    children: children
+    closeMenu: () => setToggle(false),
+    toggleState: toggleState,
+    onToggle: onToggle,
+    children: props.children
   });
 });
 ActionsMenu.propTypes = {
   isOpen: PropTypes.bool,
-  direction: PropTypes.string,
+  direction: PropTypes.oneOf(["left", "right", "top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end", "left-start", "left-end", "right-start", "right-end"]),
   customTriggerComponent: PropTypes.node,
   closeOnClick: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
@@ -266,49 +233,67 @@ ActionsMenu.__docgenInfo = {
   "displayName": "ActionsMenu",
   "props": {
     "isOpen": {
-      "defaultValue": {
-        "value": "false",
-        "computed": false
-      },
       "description": "",
       "type": {
         "name": "bool"
       },
       "required": false
     },
-    "closeOnClick": {
-      "defaultValue": {
-        "value": "true",
-        "computed": false
-      },
+    "direction": {
       "description": "",
       "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "ariaLabel": {
-      "defaultValue": {
-        "value": "\"Options Menu\"",
-        "computed": false
-      },
-      "description": "Specifies the aria-label for the button",
-      "type": {
-        "name": "object"
+        "name": "enum",
+        "value": [{
+          "value": "\"left\"",
+          "computed": false
+        }, {
+          "value": "\"right\"",
+          "computed": false
+        }, {
+          "value": "\"top\"",
+          "computed": false
+        }, {
+          "value": "\"bottom\"",
+          "computed": false
+        }, {
+          "value": "\"top-start\"",
+          "computed": false
+        }, {
+          "value": "\"top-end\"",
+          "computed": false
+        }, {
+          "value": "\"bottom-start\"",
+          "computed": false
+        }, {
+          "value": "\"bottom-end\"",
+          "computed": false
+        }, {
+          "value": "\"left-start\"",
+          "computed": false
+        }, {
+          "value": "\"left-end\"",
+          "computed": false
+        }, {
+          "value": "\"right-start\"",
+          "computed": false
+        }, {
+          "value": "\"right-end\"",
+          "computed": false
+        }]
       },
       "required": false
     },
-    "direction": {
+    "customTriggerComponent": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "node"
       },
       "required": false
     },
-    "customTriggerComponent": {
+    "closeOnClick": {
       "description": "",
       "type": {
-        "name": "node"
+        "name": "bool"
       },
       "required": false
     },
@@ -333,6 +318,13 @@ ActionsMenu.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "ariaLabel": {
+      "description": "Specifies the aria-label for the button",
+      "type": {
+        "name": "object"
+      },
+      "required": false
     }
   }
 };
@@ -342,6 +334,17 @@ ActionsMenuBody.__docgenInfo = {
   "methods": [],
   "displayName": "ActionsMenuBody",
   "props": {
+    "direction": {
+      "defaultValue": {
+        "value": "\"right-start\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "ariaLabel": {
       "defaultValue": {
         "value": "\"Options Menu\"",
@@ -392,7 +395,7 @@ ActionsMenuBody.__docgenInfo = {
       },
       "required": true
     },
-    "direction": {
+    "placement": {
       "description": "",
       "type": {
         "name": "string"

package/es/components/ActionsMenu/useActionMenu.js

@@ -0,0 +1,57 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useRole, useInteractions, FloatingArrow, arrow } from "@floating-ui/react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function useActionMenu(_ref) {
+  let {
+    initialOpen = false,
+    placement = "right",
+    modal,
+    open: controlledOpen,
+    onOpenChange: setControlledOpen,
+    isTooltip = false
+  } = _ref;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+  const [labelId, setLabelId] = useState();
+  const [descriptionId, setDescriptionId] = useState();
+  const arrowRef = useRef();
+  const open = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen;
+  const setOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setUncontrolledOpen;
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(5), flip({
+      crossAxis: placement.includes("-"),
+      fallbackAxisSideDirection: "end",
+      padding: 5
+    }), shift({
+      padding: 5
+    }), isTooltip && arrow({
+      element: arrowRef
+    })]
+  });
+  const context = data.context;
+  const click = useClick(context, {
+    enabled: !isTooltip && controlledOpen == null
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const interactions = useInteractions([click, dismiss, role]);
+  const Arrow = useCallback(() => /*#__PURE__*/_jsx(FloatingArrow, {
+    ref: arrowRef,
+    context: context
+  }), [context]);
+  return useMemo(() => ({
+    open,
+    setOpen,
+    ...interactions,
+    ...data,
+    modal,
+    labelId,
+    descriptionId,
+    setLabelId,
+    setDescriptionId,
+    Arrow
+  }), [open, setOpen, interactions, data, modal, labelId, descriptionId, Arrow]);
+}

package/es/components/Popover/Popover.stories.js

@@ -24,73 +24,76 @@ export const defaultPopover = () => /*#__PURE__*/_jsx(Popover, {
   })
 });
 defaultPopover.storyName = "Default";
-export const direction = () => /*#__PURE__*/_jsxs(Grid, {
-  gridTemplateColumns: "1fr 1fr 1fr",
-  gridAutoFlow: "row",
-  gridGap: "r",
-  alignItems: "center",
-  justifyContent: "center",
-  children: [/*#__PURE__*/_jsx(Popover, {
-    direction: "topLeft",
-    text: "Description that explains child element",
-    children: /*#__PURE__*/_jsx(Button, {
-      width: "125px",
-      children: "Top left"
-    })
-  }), /*#__PURE__*/_jsx(Popover, {
-    direction: "top",
-    text: "Description that explains child element",
-    children: /*#__PURE__*/_jsx(Button, {
-      width: "125px",
-      children: "Top"
-    })
-  }), /*#__PURE__*/_jsx(Popover, {
-    direction: "topRight",
-    text: "Description that explains child element",
-    children: /*#__PURE__*/_jsx(Button, {
+export const direction = () => /*#__PURE__*/_jsx(Box, {
+  py: "6",
+  children: /*#__PURE__*/_jsxs(Grid, {
+    gridTemplateColumns: "1fr 1fr 1fr",
+    gridAutoFlow: "row",
+    gridGap: "r",
+    alignItems: "center",
+    justifyContent: "center",
+    children: [/*#__PURE__*/_jsx(Popover, {
+      direction: "topLeft",
+      text: "Description that explains child element",
+      children: /*#__PURE__*/_jsx(Button, {
+        width: "125px",
+        children: "Top left"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      direction: "top",
+      text: "Description that explains child element",
+      children: /*#__PURE__*/_jsx(Button, {
+        width: "125px",
+        children: "Top"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      direction: "topRight",
+      text: "Description that explains child element",
+      children: /*#__PURE__*/_jsx(Button, {
+        width: "125px",
+        children: "Top right"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      direction: "left",
+      text: "Description that explains child element",
+      children: /*#__PURE__*/_jsx(Button, {
+        width: "125px",
+        children: "Left"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
       width: "125px",
-      children: "Top right"
-    })
-  }), /*#__PURE__*/_jsx(Popover, {
-    direction: "left",
-    text: "Description that explains child element",
-    children: /*#__PURE__*/_jsx(Button, {
-      width: "125px",
-      children: "Left"
-    })
-  }), /*#__PURE__*/_jsx(Box, {
-    width: "125px",
-    bg: "greyLighter",
-    m: "auto"
-  }), /*#__PURE__*/_jsx(Popover, {
-    direction: "right",
-    text: "Description that explains child element",
-    children: /*#__PURE__*/_jsx(Button, {
-      width: "125px",
-      children: "Right"
-    })
-  }), /*#__PURE__*/_jsx(Popover, {
-    direction: "bottomLeft",
-    text: "Description that explains child element",
-    children: /*#__PURE__*/_jsx(Button, {
-      width: "125px",
-      children: "Bottom left"
-    })
-  }), /*#__PURE__*/_jsx(Popover, {
-    direction: "bottom",
-    text: "Description that explains child element",
-    children: /*#__PURE__*/_jsx(Button, {
-      width: "125px",
-      children: "Bottom"
-    })
-  }), /*#__PURE__*/_jsx(Popover, {
-    direction: "bottomRight",
-    text: "Description that explains child element",
-    children: /*#__PURE__*/_jsx(Button, {
-      width: "125px",
-      children: "Bottom right"
-    })
-  })]
+      bg: "greyLighter",
+      m: "auto"
+    }), /*#__PURE__*/_jsx(Popover, {
+      direction: "right",
+      text: "Description that explains child element",
+      children: /*#__PURE__*/_jsx(Button, {
+        width: "125px",
+        children: "Right"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      direction: "bottomLeft",
+      text: "Description that explains child element",
+      children: /*#__PURE__*/_jsx(Button, {
+        width: "125px",
+        children: "Bottom left"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      direction: "bottom",
+      text: "Description that explains child element",
+      children: /*#__PURE__*/_jsx(Button, {
+        width: "125px",
+        children: "Bottom"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      direction: "bottomRight",
+      text: "Description that explains child element",
+      children: /*#__PURE__*/_jsx(Button, {
+        width: "125px",
+        children: "Bottom right"
+      })
+    })]
+  })
 });
 direction.storyName = "Direction";
 export const specifiedWidth = () => /*#__PURE__*/_jsx(Popover, {

package/es/components/Popover/index.js

@@ -1,118 +1,136 @@
-import React, { useId, useRef, useState } from "react";
-import PropTypes from "prop-types";
-import styled, { css, ThemeProvider } from "styled-components";
-import { space, layout } from "styled-system";
-import { keys } from "lodash";
+import React, { cloneElement, useState } from "react";
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal, safePolygon, useClick } from "@floating-ui/react";
+import themeGet from "@styled-system/theme-get";
+import styled from "styled-components";
 import Icon from "../Icon";
-import { themeGet } from "@styled-system/theme-get";
-import { useKeepInView, directions } from "../../hooks/keepInView";
-import { commonKeys } from "../../hooks/keypress";
+import { PropTypes } from "prop-types";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Container = styled.div.withConfig({
-  displayName: "Popover__Container",
+const DIRECTIONS_MAP = {
+  topLeft: "top-start",
+  top: "top",
+  topRight: "top-end",
+  left: "left",
+  right: "right",
+  bottomLeft: "bottom-start",
+  bottom: "bottom",
+  bottomRight: "bottom-end"
+};
+const StyledPopoverContainer = styled.div.withConfig({
+  displayName: "Popover__StyledPopoverContainer",
   componentId: "sc-1bwoak-0"
-})(["", " ", " display:", ";position:relative;&:hover,&:focus-within{.popoverText{opacity:1;z-index:100;visibility:visible;pointer-events:auto;}}"], space, layout, props => props.inlineBlock ? "inline-block !important" : "block !important");
+})(["pointer-events:none;opacity:0;transition:all 300ms ease-in-out;transition-delay:300ms;&.isOpen{opacity:1;pointer-events:auto;}"]);
 const TooltipControl = styled.div.withConfig({
   displayName: "Popover__TooltipControl",
   componentId: "sc-1bwoak-1"
-})(["border:none;background:none;padding:0;cursor:help;font-size:1em;color:", ";transition:", ";&:hover,&:focus{outline:0;color:", ";}"], props => themeGet("colors.black")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props));
-const Text = styled.div.withConfig({
-  displayName: "Popover__Text",
+})(["border:none;background:none;padding:0;cursor:help;font-size:1em;color:", ";transition:", ";&:hover,&:focus{outline:0;color:", ";}"], props => props.active ? themeGet("colors.primary")(props) : themeGet("colors.black")(props), themeGet("transition.transitionDefault"), themeGet("colors.primary"));
+const StyledPopover = styled.div.withConfig({
+  displayName: "Popover__StyledPopover",
   componentId: "sc-1bwoak-2"
-})(["position:absolute;font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;left:100%;top:50%;color:", ";outline:0;padding:", " ", ";border-radius:", ";transform:translateX(10px) translateY(-50%);width:", ";background:", ";border:1px solid ", ";box-shadow:", ";transition:all 300ms ease-in-out;transition-delay:300ms;opacity:0;z-index:-100;visibility:hidden;pointer-events:none;user-select:", ";& a{font-size:", ";}&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-7px;top:50%;margin-top:-6px;}", ";"], props => themeGet("fontSizes.0")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fontWeights.1")(props), props => props.textAlign ? props.textAlign : "left", props => themeGet("colors.greyDarkest")(props), props => themeGet("space.3")(props), props => themeGet("space.3")(props), props => themeGet("radii.1")(props), props => props.width ? props.width : "200px", props => themeGet("colors.white")(props), props => themeGet("colors.greyLight")(props), props => themeGet("shadows.boxDefault")(props), props => props.enableSelectAll ? "all" : "auto", props => themeGet("fontSizes.0")(props), props => themeGet("colors.white")(props), props => themeGet("colors.grey")(props), _ref => {
-  let {
-    direction
-  } = _ref;
-  return direction === "top" ? css(["left:50%;top:auto;bottom:100%;transform:translateX(-50%) translateY(-10px);&:before{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:50%;top:auto;margin-top:0;bottom:-10px;margin-left:-3px;transform:rotate(-90deg);}"]) : direction === "topRight" ? css(["left:100%;top:auto;bottom:100%;transform:translateX(5px) translateY(-5px);&:before{left:0;top:auto;margin-top:0;bottom:-5px;margin-left:-5px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:0;top:auto;margin-top:0;bottom:-6px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}"]) : direction === "right" ? css([""]) : direction === "bottomRight" ? css(["left:100%;top:100%;bottom:auto;transform:translateX(5px) translateY(5px);&:before{left:0;bottom:auto;margin-top:0;top:-5px;margin-left:-5px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:0;bottom:auto;margin-top:0;top:-6px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}"]) : direction === "bottom" ? css(["left:50%;top:100%;transform:translateX(-50%) translateY(10px);&:before{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:50%;top:-10px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}"]) : direction === "bottomLeft" ? css(["right:100%;left:auto;top:100%;bottom:auto;transform:translateX(-5px) translateY(5px);&:before{right:0;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-5px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:0;left:auto;bottom:auto;margin-top:0;top:-6px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}"]) : direction === "left" ? css(["left:auto;right:100%;transform:translateX(-10px) translateY(-50%);&:before{left:auto;right:-6px;transform:rotate(180deg);}&:after{left:auto;right:-7px;transform:rotate(180deg);top:50%;margin-top:-6px;}"]) : direction === "topLeft" ? css(["right:100%;left:auto;top:auto;bottom:100%;transform:translateX(-5px) translateY(-5px);&:before{right:0;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-5px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:0;left:auto;top:auto;margin-top:0;bottom:-6px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}"]) : css([""]);
-});
-const HoverSpacer = styled.div.withConfig({
-  displayName: "Popover__HoverSpacer",
-  componentId: "sc-1bwoak-3"
-})(["position:absolute;background:transparent;height:calc(100% + 24px);width:calc(100% + 24px);left:-12px;top:-12px;"]);
-
-/**
- * This popover component is intended to be used to supplement buttons (or other elements) that require some helper text. It supports customisation of direction and width. This is so that you can ensure that the popover doesn't run off the screen, and that the width suits the amount of text in the popover.
- *
- * If you don't specify a width, 200px is the default, but as a general guide try and keep widths somewhere between 150-250 if you are modifying. Make sure if setting width you include the unit you want it to use, e.g. pixels, %.
- */
-
-export default function Popover(_ref2) {
+})(["font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;color:", ";outline:0;padding:", ";border-radius:", ";width:", ";background:", ";border:1px solid ", ";box-shadow:", ";user-select:", ";opacity:1;& a{font-size:", ";}&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-5px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-6px;top:50%;margin-top:-6px;}&.top{&:before{left:50%;top:auto;margin-top:0;bottom:-8px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}}&.topRight,&.top-end{&:before{left:1px;top:auto;margin-top:0;bottom:-4px;margin-left:-5px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:1px;top:auto;margin-top:0;bottom:-5px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}}&.bottomRight,&.bottom-end{&:before{left:1px;bottom:auto;margin-top:0;top:-4px;margin-left:-5px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:1px;bottom:auto;margin-top:0;top:-5px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}}&.bottom{&:before{left:50%;top:-8px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}}&.bottomLeft,&.bottom-start{&:before{right:1px;left:auto;bottom:auto;margin-top:0;top:-4px;margin-right:-5px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}}&.left{&:before{left:auto;right:-5px;transform:rotate(180deg);}&:after{left:auto;right:-6px;transform:rotate(180deg);top:50%;margin-top:-6px;}}&.topLeft,&.top-start{&:before{right:1px;left:auto;top:auto;margin-top:0;bottom:-4px;margin-right:-5px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}}"], themeGet("fontSizes.0"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props => props.textAlign ? props.textAlign : "left", themeGet("colors.greyDarkest"), themeGet("space.3"), themeGet("radii.1"), props => props.width ? props.width : "200px", themeGet("colors.white"), themeGet("colors.greyLight"), themeGet("shadows.boxDefault"), props => props.enableSelectAll ? "all" : "auto", themeGet("fontSizes.0"), themeGet("colors.white"), themeGet("colors.grey"));
+export default function Popover(_ref) {
   let {
     children,
-    direction,
-    width,
-    textAlign,
+    direction = "right",
     text,
-    inlineBlock,
-    theme,
+    textAlign,
+    width,
+    enableSelectAll,
     variant,
-    enableSelectAll = true,
-    tabIndex = 0,
+    ariaLabel,
     ...props
-  } = _ref2;
-  const containerRef = useRef();
-  const [inViewDirection, setInViewDirection] = useState(direction);
-  const [dismissed, setDismissed] = useState(false);
-  const toolTipId = useId();
-  const [ref, setIsShown] = useKeepInView({
-    direction,
-    callback: setInViewDirection
+  } = _ref;
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: DIRECTIONS_MAP[direction] || direction || "right",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(_ref2 => {
+      let {
+        rects
+      } = _ref2;
+      return {
+        mainAxis: 10,
+        alignmentAxis: -rects.floating.width
+      };
+    }), flip({
+      fallbackAxisSideDirection: "start"
+    }), shift()]
   });
-  const component = /*#__PURE__*/_jsxs(Container, {
-    ref: containerRef,
-    inlineBlock: inlineBlock,
-    ...props,
-    onMouseEnter: () => {
-      setIsShown(true);
-      setDismissed(false);
-    },
-    onKeyDownCapture: e => {
-      if ([commonKeys.ESCAPE, commonKeys.ESC].includes(e.key)) {
-        setDismissed(true);
-        if (containerRef !== null && containerRef !== void 0 && containerRef.current.contains(document.activeElement)) {
-          document.activeElement.blur();
-        }
-      }
-    },
-    onBlur: () => {
-      setDismissed(false);
-    },
-    onMouseLeave: () => {
-      setIsShown(false);
-      setDismissed(false);
-    },
-    "aria-describedby": toolTipId,
-    children: [variant === "tooltip" && /*#__PURE__*/_jsx(TooltipControl, {
-      tabIndex: tabIndex,
+  const hover = useHover(context, {
+    move: false,
+    handleClose: safePolygon()
+  });
+  const focus = useFocus(context);
+  const click = useClick(context, {
+    enabled: true
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context, {
+    role: "tooltip"
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([hover, focus, dismiss, role, click]);
+  const triggerProps = {
+    ...getReferenceProps({
+      ref: refs.setReference
+    })
+  };
+  let triggerComponent = null;
+  if (variant === "tooltip") {
+    triggerComponent = /*#__PURE__*/_jsx(TooltipControl, {
+      ...triggerProps,
+      active: isOpen,
       children: /*#__PURE__*/_jsx(Icon, {
         transform: "grow-4",
         icon: ["fas", "question-circle"],
         fontSize: "2"
       })
-    }), !!text && !dismissed && /*#__PURE__*/_jsxs(Text, {
-      ref: ref,
-      role: "tooltip",
-      className: "popoverText",
-      textAlign: textAlign,
-      direction: inViewDirection,
-      width: width,
-      enableSelectAll: enableSelectAll,
-      id: toolTipId,
-      children: [/*#__PURE__*/_jsx(HoverSpacer, {
-        className: "popoverSpacer"
-      }), text]
-    }), children]
+    });
+  } else if (children.type.$$typeof === Symbol.for("react.forward_ref")) {
+    triggerComponent = /*#__PURE__*/cloneElement(children, triggerProps);
+  } else {
+    triggerComponent = /*#__PURE__*/_jsx("div", {
+      ...triggerProps,
+      children: children
+    });
+  }
+  const directionClass = context.placement === DIRECTIONS_MAP[direction] ? direction : context.placement;
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    children: [triggerComponent, /*#__PURE__*/_jsx(FloatingPortal, {
+      children: text && /*#__PURE__*/_jsx(StyledPopoverContainer, {
+        className: "Tooltip ".concat(isOpen ? "isOpen" : ""),
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps({
+          onMouseEnter: () => setIsOpen(true),
+          onMouseLeave: () => setIsOpen(false)
+        }),
+        children: /*#__PURE__*/_jsx(StyledPopover, {
+          className: "".concat(directionClass),
+          role: "tooltip",
+          textAlign: textAlign,
+          width: width,
+          enableSelectAll: enableSelectAll,
+          ariaLabel: ariaLabel,
+          children: text
+        })
+      })
+    })]
   });
-  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
-    theme: theme,
-    children: component
-  }) : component;
 }
 Popover.propTypes = {
   /** The element that requires the popover helper text. */
   children: PropTypes.element,
   /** Specifies the direction of the popover. Defaults to right if not specified */
-  direction: PropTypes.oneOf(keys(directions)),
+  direction: PropTypes.oneOf([...Object.keys(DIRECTIONS_MAP), ...Object.values(DIRECTIONS_MAP)]),
   /** The text contained in the popover element */
   text: PropTypes.node,
   /** Specifies the alignment of the text inside the popover */
@@ -133,29 +151,25 @@ Popover.propTypes = {
   tabIndex: PropTypes.number
 };
 Popover.__docgenInfo = {
-  "description": "This popover component is intended to be used to supplement buttons (or other elements) that require some helper text. It supports customisation of direction and width. This is so that you can ensure that the popover doesn't run off the screen, and that the width suits the amount of text in the popover.\n\nIf you don't specify a width, 200px is the default, but as a general guide try and keep widths somewhere between 150-250 if you are modifying. Make sure if setting width you include the unit you want it to use, e.g. pixels, %.",
+  "description": "",
   "methods": [],
   "displayName": "Popover",
   "props": {
-    "enableSelectAll": {
-      "defaultValue": {
-        "value": "true",
-        "computed": false
-      },
-      "description": "Specifies whether enable select all behaviour",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "tabIndex": {
+    "direction": {
       "defaultValue": {
-        "value": "0",
+        "value": "\"right\"",
         "computed": false
       },
-      "description": "Provide a tab index for accessibilty, defaults to 0",
+      "description": "Specifies the direction of the popover. Defaults to right if not specified",
       "type": {
-        "name": "number"
+        "name": "enum",
+        "value": [{
+          "value": "...Object.keys(DIRECTIONS_MAP)",
+          "computed": true
+        }, {
+          "value": "...Object.values(DIRECTIONS_MAP)",
+          "computed": true
+        }]
       },
       "required": false
     },
@@ -166,15 +180,6 @@ Popover.__docgenInfo = {
       },
       "required": false
     },
-    "direction": {
-      "description": "Specifies the direction of the popover. Defaults to right if not specified",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "keys(directions)"
-      },
-      "required": false
-    },
     "text": {
       "description": "The text contained in the popover element",
       "type": {
@@ -231,12 +236,26 @@ Popover.__docgenInfo = {
       },
       "required": false
     },
+    "enableSelectAll": {
+      "description": "Specifies whether enable select all behaviour",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "ariaLabel": {
       "description": "Provide an aria-label if text is not a string",
       "type": {
         "name": "string"
       },
       "required": false
+    },
+    "tabIndex": {
+      "description": "Provide a tab index for accessibilty, defaults to 0",
+      "type": {
+        "name": "number"
+      },
+      "required": false
     }
   }
 };

package/es/components/ProgressBar/ProgressBar.stories.js

@@ -16,11 +16,11 @@ export const defaultProgressBar = () => /*#__PURE__*/_jsxs(Spacer, {
   children: [/*#__PURE__*/_jsx(ProgressBar, {
     ariaLabel: "Percent Completed",
     containerWidth: 100,
-    fillWidth: 40
+    fillWidth: 75
   }), /*#__PURE__*/_jsx(ProgressBar, {
     ariaLabel: "Percent Completed",
     containerWidth: 50,
-    fillWidth: 70
+    fillWidth: 75
   })]
 });
 defaultProgressBar.storyName = "Default";

package/es/components/ProgressBar/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import styled, { css, keyframes, ThemeProvider } from "styled-components";
 import { space, layout } from "styled-system";
@@ -8,11 +8,20 @@ const expandWidth = keyframes(["0%{width:0;}"]);
 const Background = styled.div.withConfig({
   displayName: "ProgressBar__Background",
   componentId: "sc-q9qaaf-0"
-})(["", " ", " position:relative;background:", ";height:16px;border-radius:8px;"], space, layout, props => themeGet("colors.greyLighter")(props));
+})(["", " ", " position:relative;background:", ";height:16px;border-radius:8px;width:", ";"], space, layout, props => themeGet("colors.greyLighter")(props), props => props.containerWidth ? props.containerWidth + "%" : "100%");
 const Fill = styled.div.withConfig({
   displayName: "ProgressBar__Fill",
   componentId: "sc-q9qaaf-1"
-})(["position:absolute;left:3px;top:3px;height:10px;border-radius:5px;animation:", " 1000ms ease-in-out 1;transition:", ";", ";"], expandWidth, props => themeGet("transition.transitionDefault")(props), props => props.gradient ? css(["background:linear-gradient( to right,", " 0%,", " 50%,", " 100% );"], themeGet("colors.danger")(props), themeGet("colors.warning")(props), themeGet("colors.success")(props)) : css(["background:", ";"], themeGet("colors.primary")(props)));
+})(["width:", ";position:absolute;left:3px;top:3px;height:10px;border-radius:5px;animation:", " 1000ms ease-in-out 1;transition:", ";", ";"], props => {
+  if (props.fillWidth && props.containerWidthPx) {
+    const sixPxInPercentage = 6 / props.containerWidthPx * 100;
+    const minPixelValue = 1; // Minimum pixel value for visibility
+    const minPercentageValue = minPixelValue / props.containerWidthPx * 100;
+    const calculatedWidth = "calc(".concat(props.fillWidth, "% - ").concat(sixPxInPercentage, "%)");
+    return "max(".concat(calculatedWidth, ", ").concat(minPercentageValue, "%)");
+  }
+  return "0";
+}, expandWidth, props => themeGet("transition.transitionDefault")(props), props => props.gradient ? css(["background:linear-gradient( to right,", " 0%,", " 50%,", " 100% );"], themeGet("colors.danger")(props), themeGet("colors.warning")(props), themeGet("colors.success")(props)) : css(["background:", ";"], themeGet("colors.primary")(props)));
 
 /**
  * Progress bar is not intended to be used for loading (that's what the Loading component is for). The intended use is for indicating progress through steps or progress towards a goal.
@@ -24,27 +33,32 @@ const Fill = styled.div.withConfig({
 
 export default function ProgressBar(_ref) {
   let {
-    containerWidth,
+    containerWidth = "100%",
     fillWidth,
     gradient,
     theme,
     ariaLabel = "Progress",
     ...props
   } = _ref;
+  const backgroundRef = useRef(null);
+  const [containerWidthPx, setContainerWidthPx] = useState(0);
+  useEffect(() => {
+    if (backgroundRef.current) {
+      setContainerWidthPx(backgroundRef.current.offsetWidth);
+    }
+  }, [containerWidth]);
   const component = /*#__PURE__*/_jsx(Background, {
-    style: {
-      width: containerWidth + "%"
-    },
+    ref: backgroundRef,
+    containerWidth: containerWidth,
     ...props,
     "aria-label": ariaLabel,
     "aria-valuenow": fillWidth,
     "aria-valuemin": "0",
     "aria-valuemax": "100",
     children: /*#__PURE__*/_jsx(Fill, {
+      containerWidthPx: containerWidthPx,
       gradient: gradient,
-      style: {
-        width: fillWidth + "%"
-      }
+      fillWidth: fillWidth
     })
   });
   return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
@@ -69,21 +83,25 @@ ProgressBar.__docgenInfo = {
   "methods": [],
   "displayName": "ProgressBar",
   "props": {
-    "ariaLabel": {
+    "containerWidth": {
       "defaultValue": {
-        "value": "\"Progress\"",
+        "value": "\"100%\"",
         "computed": false
       },
-      "description": "Specifies the aria-label for the progress bar",
+      "description": "Sets the percentage width of the parent container",
       "type": {
-        "name": "object"
+        "name": "number"
       },
       "required": false
     },
-    "containerWidth": {
-      "description": "Sets the percentage width of the parent container",
+    "ariaLabel": {
+      "defaultValue": {
+        "value": "\"Progress\"",
+        "computed": false
+      },
+      "description": "Specifies the aria-label for the progress bar",
       "type": {
-        "name": "number"
+        "name": "object"
       },
       "required": false
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.10",
+  "version": "3.2.12",
   "engines": {
     "node": "20.12.2"
   },
@@ -46,6 +46,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@floating-ui/react": "^0.26.19",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@mui/x-date-pickers": "^7.5.0",