orcs-design-system 3.3.26 → 3.3.28

package/es/components/FloatingPanels/index.js

@@ -95,6 +95,9 @@ const FloatingPanels = _ref => {
     }
     return items;
   }, [panels, selectedPanelId, togglePanel]);
+  const showPanelContainer = useMemo(() => {
+    return panels.some(panel => panel.id === selectedPanelId);
+  }, [panels, selectedPanelId]);
   return /*#__PURE__*/_jsxs(ComponentContainer, {
     centered: centered,
     alignPanels: alignPanels,
@@ -103,7 +106,7 @@ const FloatingPanels = _ref => {
     zIndex: zIndex,
     children: [/*#__PURE__*/_jsx(PanelBar, {
       children: panelBarItems
-    }), /*#__PURE__*/_jsx(PanelContainer, {
+    }), showPanelContainer && /*#__PURE__*/_jsx(PanelContainer, {
       containerHeight: containerHeight,
       children: panels.map(panel => /*#__PURE__*/_jsx(Panel, {
         title: panel.title,

package/es/components/Popover/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useEffect } 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";
@@ -29,6 +29,49 @@ const StyledPopover = styled.div.withConfig({
   displayName: "Popover__StyledPopover",
   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:", ";&.hack-for-legacy-tests{position:absolute;pointer-events:none;opacity:0;visibility:hidden;height:0;width:0;padding:0;overflow: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"));
+
+/**
+ * Prevents the browser from scrolling to the previously focused element
+ * when a popover or tooltip closes — and skips focus entirely if it's offscreen.
+ */
+export function usePreventScrollOnRestoreFocus(enabled) {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const previouslyFocused = document.activeElement;
+    if (!(previouslyFocused instanceof HTMLElement)) {
+      return;
+    }
+    const originalFocus = previouslyFocused.focus;
+
+    // Check if element is in the viewport
+    const isInViewport = isElementInViewport(previouslyFocused);
+    if (!isInViewport) {
+      // Skip restoring focus entirely
+      previouslyFocused.focus = () => {};
+    } else {
+      // Patch focus to use preventScroll
+      previouslyFocused.focus = function () {
+        try {
+          originalFocus.call(this, {
+            preventScroll: true
+          });
+        } catch {
+          // fallback if preventScroll isn't accepted
+          originalFocus.call(this);
+        }
+      };
+    }
+    return () => {
+      previouslyFocused.focus = originalFocus;
+    };
+  }, [enabled]);
+}
+function isElementInViewport(el) {
+  const rect = el.getBoundingClientRect();
+  return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+}
 export default function Popover(_ref) {
   let {
     children,
@@ -98,6 +141,7 @@ export default function Popover(_ref) {
     ...props,
     className: `${props.className} ${visiblePopoverClassName}`
   }), [getFloatingProps, props, visiblePopoverClassName]);
+  usePreventScrollOnRestoreFocus(!visible);
   return /*#__PURE__*/_jsxs(Container, {
     inlineBlock: inlineBlock,
     ...props,
@@ -117,7 +161,11 @@ export default function Popover(_ref) {
       children: containsLinks ? /*#__PURE__*/_jsx(FloatingFocusManager, {
         context: context,
         modal: false,
-        initialFocus: isRenderedInReactSelectMenu(context.refs.reference) && -1,
+        restoreFocus: false,
+        initialFocus:
+        // If the popover is rendered in a React Select menu, don't focus the first element. Keep focus on select input else it will close the popover.
+        // Default to 0 to focus the first element if not rendered in a React Select menu.
+        isRenderedInReactSelectMenu(context.refs.reference) ? -1 : 0,
         children: /*#__PURE__*/_jsx(StyledPopover, {
           className: visiblePopoverClassName,
           ref: refs.setFloating,

package/es/components/Select/index.js

@@ -359,6 +359,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const component = /*#__PURE__*/_jsxs(Wrapper, {
     inverted: props.inverted,
     "data-testid": props["data-testid"],
+    "data-select-wrapper": "true",
     ...SelectStyles,
     children: [props.label && /*#__PURE__*/_jsxs(Label, {
       inverted: props.inverted,

package/es/utils/floatingUiHelpers.js

@@ -6,15 +6,24 @@ const getFloatingUiZIndex = triggerRef => {
   return 900;
 };
 const REACT_SELECT_MENU = "react-select-menu";
-const isRenderedInReactSelectMenu = triggerRef => document.getElementById(REACT_SELECT_MENU)?.contains?.(triggerRef.current);
+const getReactSelectMenu = triggerRef => {
+  const selectWrapper = triggerRef?.current?.closest('[data-select-wrapper="true"]');
+  if (selectWrapper) {
+    return selectWrapper;
+  }
+  return document.getElementById(REACT_SELECT_MENU);
+};
+const isRenderedInReactSelectMenu = triggerRef => {
+  return !!getReactSelectMenu(triggerRef);
+};
 const getFloatingUiRootElement = triggerRef => {
   const activeModalRef = document.getElementById("modal-overlay");
-  const isRenderedInModal = activeModalRef?.contains?.(triggerRef.current);
+  const isRenderedInModal = activeModalRef?.contains?.(triggerRef?.current);
   if (isRenderedInModal) {
     return document.getElementById("modal");
   }
-  if (isRenderedInReactSelectMenu(triggerRef)) {
-    return document.getElementById(REACT_SELECT_MENU).firstChild;
+  if (isRenderedInReactSelectMenu) {
+    return isRenderedInReactSelectMenu.firstChild;
   }
   return undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.26",
+  "version": "3.3.28",
   "engines": {
     "node": "20.12.2"
   },
@@ -67,8 +67,8 @@
     "react-number-format": "^5.3.0",
     "react-router-dom": "^5.3.4",
     "react-select": "^5.7.4",
-    "styled-system": "^5.1.5",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.2.1",
+    "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.10",
@@ -106,7 +106,7 @@
     "@testing-library/react": "^11.2.2",
     "@types/jest": "^27.5.2",
     "@types/styled-components": "^5.1.7",
-    "audit-ci": "^6.1.2",
+    "audit-ci": "^7.1.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.0",
     "babel-loader": "^8.1.0",
@@ -130,7 +130,7 @@
     "jest": "^27.5.1",
     "nodemon": "^3.1.0",
     "npm-run-all": "^4.1.5",
-    "playroom": "^0.32.1",
+    "playroom": "^0.43.0",
     "postcss": "8.5.2",
     "prettier": "^2.2.1",
     "react": "^18.3.1",