orcs-design-system 3.2.32 → 3.2.34

package/es/components/Popover/index.js

@@ -5,7 +5,7 @@ import styled from "styled-components";
 import Icon from "../Icon";
 import { PropTypes } from "prop-types";
 import Box from "../Box";
-import { getFloatingUiRootElement, getFloatingUiZIndex } from "../../utils/floatingUiHelpers";
+import { getFloatingUiRootElement, getFloatingUiZIndex, isRenderedInReactSelectMenu } from "../../utils/floatingUiHelpers";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DIRECTIONS_MAP = {
   topLeft: "top-start",
@@ -26,7 +26,7 @@ const StyledPopover = styled.div.withConfig({
   componentId: "sc-1bwoak-1"
 })(["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;
+  var _children$type, _refs$floating;
   let {
     children,
     direction = "right",
@@ -124,17 +124,19 @@ export default function Popover(_ref) {
     ariaLabel: ariaLabel,
     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, {
     ...props,
     "aria-describedby": context.floatingId,
     children: [text && (visible ? /*#__PURE__*/_jsx(FloatingPortal, {
       root: getFloatingUiRootElement(context.refs.reference),
       preserveTabOrder: true,
-      children: /*#__PURE__*/_jsx(FloatingFocusManager, {
+      children: containsLinks ? /*#__PURE__*/_jsx(FloatingFocusManager, {
         context: context,
         modal: false,
+        initialFocus: isRenderedInReactSelectMenu(context.refs.reference) && -1,
         children: Popover
-      })
+      }) : Popover
     }) : Popover
     /*
      * HACK: Fixing all the broken tests in teamform-app-ui is too time consuming

package/es/components/Table/const.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export const DEFAULT_COLUMN_SIZE = 200;

package/es/components/Table/getExpandColumnConfig.js

@@ -6,6 +6,7 @@ import Flex from "../Flex";
 import { get } from "lodash";
 import styled from "styled-components";
 import { PropTypes } from "prop-types";
+import { DEFAULT_COLUMN_SIZE } from "./const";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledHighlight = styled.span.withConfig({
   displayName: "getExpandColumnConfig__StyledHighlight",
@@ -101,6 +102,9 @@ export default ((firstCol, tableConfig) => ({
       })]
     }),
     enableResizing: true,
-    size: 200
+    size: firstCol.size || DEFAULT_COLUMN_SIZE,
+    ...(firstCol.grow ? {
+      grow: firstCol.grow
+    } : {})
   }
 }));

package/es/utils/floatingUiHelpers.js

@@ -6,6 +6,11 @@ const getFloatingUiZIndex = triggerRef => {
   }
   return 900;
 };
+const REACT_SELECT_MENU = "react-select-menu";
+const isRenderedInReactSelectMenu = triggerRef => {
+  var _document$getElementB, _document$getElementB2;
+  return (_document$getElementB = document.getElementById(REACT_SELECT_MENU)) === null || _document$getElementB === void 0 || (_document$getElementB2 = _document$getElementB.contains) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.call(_document$getElementB, triggerRef.current);
+};
 const getFloatingUiRootElement = triggerRef => {
   var _activeModalRef$conta2;
   const activeModalRef = document.getElementById("modal-overlay");
@@ -13,6 +18,9 @@ const getFloatingUiRootElement = triggerRef => {
   if (isRenderedInModal) {
     return document.getElementById("modal");
   }
+  if (isRenderedInReactSelectMenu(triggerRef)) {
+    return document.getElementById(REACT_SELECT_MENU).firstChild;
+  }
   return undefined;
 };
-export { getFloatingUiZIndex, getFloatingUiRootElement };
+export { getFloatingUiZIndex, getFloatingUiRootElement, isRenderedInReactSelectMenu };

package/package.json

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