orcs-design-system 3.2.21 → 3.2.23

package/es/components/ActionsMenu/index.js

@@ -63,7 +63,7 @@ export const ActionsMenuHeading = styled(props => {
   componentId: "sc-yvbni2-5"
 })(["color:", ";padding:8px;width:100%;font-size:", ";font-weight:", ";border-bottom:solid 1px ", ";white-space:nowrap;cursor:", ";"], props => themeGet("colors.white")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fontWeights.1")(props), props => themeGet("colors.greyDarkest")(props), props => props.canClick ? "pointer" : "default");
 export const ActionsMenuItem = styled(props => {
-  var _actionMenu$getItemPr;
+  var _actionMenu$getItemPr, _actionMenu$context, _actionMenu$context2;
   const {
     id,
     onItemClick,
@@ -74,6 +74,7 @@ export const ActionsMenuItem = styled(props => {
     ...others
   } = props;
   const Component = as ? as : others.href ? "a" : "button";
+  const disabled = props.disabled;
   let newProps = {
     ...others,
     ...((actionMenu === null || actionMenu === void 0 || (_actionMenu$getItemPr = actionMenu.getItemProps) === null || _actionMenu$getItemPr === void 0 ? void 0 : _actionMenu$getItemPr.call(actionMenu)) || {})
@@ -94,7 +95,12 @@ export const ActionsMenuItem = styled(props => {
   }
   return /*#__PURE__*/_jsx(Component, {
     ...newProps,
-    onClick: onClick
+    onClick: onClick,
+    disabled: disabled
+    // Hide from document when closed - related to HACK
+    ,
+    "aria-hidden": !(actionMenu !== null && actionMenu !== void 0 && (_actionMenu$context = actionMenu.context) !== null && _actionMenu$context !== void 0 && _actionMenu$context.open),
+    tabIndex: !(actionMenu !== null && actionMenu !== void 0 && (_actionMenu$context2 = actionMenu.context) !== null && _actionMenu$context2 !== void 0 && _actionMenu$context2.open) && "-1"
   });
 }).attrs({
   role: "menuitem"
@@ -116,7 +122,7 @@ export const ActionsMenuBody = _ref => {
     onTriggerFocus,
     closeMenu,
     closeOnClick = false,
-    "data-testid": dataTestId,
+    "data-testid": dataTestId = "ActionsMenu",
     ...props
   } = _ref;
   const id = useId();
@@ -177,6 +183,7 @@ export const ActionsMenuBody = _ref => {
     ...actionMenu.getFloatingProps(props),
     className: "actionMenu-content ".concat(visible ? "visible" : ""),
     "aria-hidden": visible ? "false" : "true",
+    "data-testid": "".concat(dataTestId, "__menu"),
     children: /*#__PURE__*/_jsx(Menu, {
       menuWidth: menuWidth,
       isOpen: toggleState,
@@ -398,6 +405,13 @@ ActionsMenuBody.__docgenInfo = {
       },
       "required": false
     },
+    "data-testid": {
+      "defaultValue": {
+        "value": "\"ActionsMenu\"",
+        "computed": false
+      },
+      "required": false
+    },
     "onTriggerFocus": {
       "description": "",
       "type": {

package/es/components/Popover/index.js

@@ -1,4 +1,4 @@
-import React, { cloneElement, useState } from "react";
+import React, { cloneElement, useEffect, 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";
@@ -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;&.visible{opacity:1;pointer-events:auto;}& 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) {
-  var _children$type, _context$refs;
+  var _children$type, _context$refs2;
   let {
     children,
     direction = "right",
@@ -106,6 +106,23 @@ export default function Popover(_ref) {
     });
   }
   const directionClass = context.placement === DIRECTIONS_MAP[direction] ? direction : context.placement;
+  useEffect(() => {
+    var _context$refs, _floatingEl$getElemen;
+    // Following code disables the tabbing of elements for popovers when it is not open.
+    const floatingEl = context === null || context === void 0 || (_context$refs = context.refs) === null || _context$refs === void 0 || (_context$refs = _context$refs.floating) === null || _context$refs === void 0 ? void 0 : _context$refs.current;
+    if (!floatingEl) return;
+    const childrenAnchors = Array.from((_floatingEl$getElemen = floatingEl.getElementsByTagName) === null || _floatingEl$getElemen === void 0 ? void 0 : _floatingEl$getElemen.call(floatingEl, "a"));
+    if (!childrenAnchors.length) return;
+    if (visible) {
+      childrenAnchors.forEach(anchor => {
+        anchor.tabIndex = "";
+      });
+    } else {
+      childrenAnchors.forEach(anchor => {
+        anchor.tabIndex = "-1";
+      });
+    }
+  }, [visible, context]);
   const Popover = /*#__PURE__*/_jsx(StyledPopover, {
     textAlign: textAlign,
     width: width,
@@ -127,7 +144,7 @@ export default function Popover(_ref) {
       root: getFloatingUiRootElement(context.refs.reference),
       preserveTabOrder: true,
       children: text && (visible ? /*#__PURE__*/_jsx(FloatingFocusManager, {
-        initialFocus: (_context$refs = context.refs) === null || _context$refs === void 0 ? void 0 : _context$refs.reference,
+        initialFocus: (_context$refs2 = context.refs) === null || _context$refs2 === void 0 ? void 0 : _context$refs2.reference,
         context: context,
         modal: false,
         children: Popover

package/package.json

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