orcs-design-system 3.2.34 → 3.2.35

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

@@ -5,7 +5,8 @@ import Box from "../Box";
 import Grid from "../Grid";
 import Flex from "../Flex";
 import StyledLink from "../StyledLink";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Spacer from "../Spacer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Popover",
   decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
@@ -111,31 +112,35 @@ export const textAlignment = () => /*#__PURE__*/_jsx(Popover, {
     children: "Hover Me"
   })
 });
-export const DisplayInlineBlock = () => /*#__PURE__*/_jsxs(_Fragment, {
-  children: [/*#__PURE__*/_jsx(Popover, {
-    text: "Description that explains child element",
-    inlineBlock: true,
-    children: /*#__PURE__*/_jsx(Button, {
-      children: "Inline Block Set"
-    })
-  }), /*#__PURE__*/_jsx(Popover, {
-    text: "Description that explains child element",
-    inlineBlock: true,
-    children: /*#__PURE__*/_jsx(Button, {
-      children: "Inline Block Set"
-    })
-  }), /*#__PURE__*/_jsx(Popover, {
-    text: "Description that explains child element",
-    children: /*#__PURE__*/_jsx(Button, {
-      children: "Not Inline"
-    })
-  }), /*#__PURE__*/_jsx(Popover, {
-    direction: "top",
-    text: "Description that explains child element",
-    children: /*#__PURE__*/_jsx(Button, {
-      children: "Not Inline"
-    })
-  })]
+export const DisplayInlineBlock = () => /*#__PURE__*/_jsx(Flex, {
+  flexDirection: "column",
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    mt: "r",
+    children: [/*#__PURE__*/_jsx(Popover, {
+      text: "Description that explains child element",
+      inlineBlock: true,
+      children: /*#__PURE__*/_jsx(Button, {
+        children: "Inline Block Set"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      text: "Description that explains child element",
+      inlineBlock: true,
+      children: /*#__PURE__*/_jsx(Button, {
+        children: "Inline Block Set"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      text: "Because it is display: block, the triggering container is wider than the button",
+      children: /*#__PURE__*/_jsx(Button, {
+        children: "Not Inline"
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      direction: "top",
+      text: "Description that explains child element",
+      children: /*#__PURE__*/_jsx(Button, {
+        children: "Not Inline"
+      })
+    })]
+  })
 });
 export const tooltipExample = () => /*#__PURE__*/_jsx(Popover, {
   text: "This tooltip helps explain stuff",

package/es/components/Popover/index.js

@@ -1,11 +1,11 @@
-import React, { cloneElement, useState } from "react";
+import React, { useState } from "react";
 import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal, safePolygon, FloatingFocusManager } from "@floating-ui/react";
 import themeGet from "@styled-system/theme-get";
 import styled from "styled-components";
 import Icon from "../Icon";
 import { PropTypes } from "prop-types";
-import Box from "../Box";
 import { getFloatingUiRootElement, getFloatingUiZIndex, isRenderedInReactSelectMenu } from "../../utils/floatingUiHelpers";
+import { layout, space } from "styled-system";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DIRECTIONS_MAP = {
   topLeft: "top-start",
@@ -17,16 +17,20 @@ const DIRECTIONS_MAP = {
   bottom: "bottom",
   bottomRight: "bottom-end"
 };
+const Container = styled.div.withConfig({
+  displayName: "Popover__Container",
+  componentId: "sc-1bwoak-0"
+})(["", " ", " display:", ";position:relative;"], space, layout, props => props.inlineBlock ? "inline-block !important" : "block !important");
 const TooltipControl = styled.div.withConfig({
   displayName: "Popover__TooltipControl",
-  componentId: "sc-1bwoak-0"
+  componentId: "sc-1bwoak-1"
 })(["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-1"
+  componentId: "sc-1bwoak-2"
 })(["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:", ";pointer-events:none;opacity:0;visibility:hidden;&.visible{opacity:1;pointer-events:auto;visibility:visible;}& 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;}&.top{&: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);}}&.topRight,&.top-end{&:before{left:1px;top:auto;margin-top:0;bottom:-5px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:1px;top:auto;margin-top:0;bottom:-6px;margin-left:-7px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}}&.bottomRight,&.bottom-end{&:before{left:1px;bottom:auto;margin-top:0;top:-5px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:1px;bottom:auto;margin-top:0;top:-6px;margin-left:-7px;transform:rotate(45deg);border-width:5px 10px 5px 0;}}&.bottom{&: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);}}&.bottomLeft,&.bottom-start{&:before{right:1px;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;bottom:auto;margin-top:0;top:-6px;margin-right:-7px;transform:rotate(135deg);border-width:5px 10px 5px 0;}}&.left{&:before{left:auto;right:-6px;transform:rotate(180deg);}&:after{left:auto;right:-7px;transform:rotate(180deg);top:50%;margin-top:-6px;}}&.topLeft,&.top-start{&:before{right:1px;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;top:auto;margin-top:0;bottom:-6px;margin-right:-7px;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.greyMid"));
 export default function Popover(_ref) {
-  var _children$type, _refs$floating;
+  var _refs$floating, _children$props;
   let {
     children,
     direction = "right",
@@ -36,6 +40,7 @@ export default function Popover(_ref) {
     enableSelectAll,
     variant,
     ariaLabel,
+    inlineBlock,
     ...props
   } = _ref;
   const [visible, setVisible] = useState(false);
@@ -84,31 +89,6 @@ export default function Popover(_ref) {
     }),
     tabIndex: "0"
   };
-  let triggerComponent = null;
-  if (variant === "tooltip") {
-    triggerComponent = /*#__PURE__*/_jsx(TooltipControl, {
-      ...triggerProps,
-      active: visible,
-      tabIndex: "0",
-      children: /*#__PURE__*/_jsx(Icon, {
-        transform: "grow-4",
-        icon: ["fas", "question-circle"],
-        fontSize: "2"
-      })
-    });
-  } else if ((children === null || children === void 0 || (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.$$typeof) === Symbol.for("react.forward_ref")) {
-    triggerComponent = /*#__PURE__*/cloneElement(children, triggerProps);
-  } else {
-    var _children$props;
-    triggerComponent = /*#__PURE__*/_jsx("div", {
-      ...triggerProps,
-      style: {
-        display: "inline-block"
-      },
-      "data-testid": "".concat((children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props["data-testid"]) || "popover", "-trigger"),
-      children: children
-    });
-  }
   const directionClass = context.placement === DIRECTIONS_MAP[direction] ? direction : context.placement;
   const Popover = /*#__PURE__*/_jsx(StyledPopover, {
     textAlign: textAlign,
@@ -125,10 +105,22 @@ export default function Popover(_ref) {
     children: text
   });
   const containsLinks = (_refs$floating = refs.floating) === null || _refs$floating === void 0 || (_refs$floating = _refs$floating.current) === null || _refs$floating === void 0 ? void 0 : _refs$floating.querySelectorAll("a").length;
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/_jsxs(Container, {
+    inlineBlock: inlineBlock,
+    "data-testid": "".concat((children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props["data-testid"]) || "popover", "-trigger"),
     ...props,
+    ...triggerProps,
     "aria-describedby": context.floatingId,
-    children: [text && (visible ? /*#__PURE__*/_jsx(FloatingPortal, {
+    children: [variant === "tooltip" && /*#__PURE__*/_jsx(TooltipControl, {
+      ...triggerProps,
+      active: visible,
+      tabIndex: "0",
+      children: /*#__PURE__*/_jsx(Icon, {
+        transform: "grow-4",
+        icon: ["fas", "question-circle"],
+        fontSize: "2"
+      })
+    }), text && (visible ? /*#__PURE__*/_jsx(FloatingPortal, {
       root: getFloatingUiRootElement(context.refs.reference),
       preserveTabOrder: true,
       children: containsLinks ? /*#__PURE__*/_jsx(FloatingFocusManager, {
@@ -144,7 +136,7 @@ export default function Popover(_ref) {
      * Rendering the markup even when closed but in a hidden state ensures that tests pass.
      * Ideally, we would update all the tests in teamform-app-ui to open the Popover
      * before assertion.
-     **/), triggerComponent]
+     **/), children]
   });
 }
 Popover.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.34",
+  "version": "3.2.35",
   "engines": {
     "node": "20.12.2"
   },