orcs-design-system 3.2.24 → 3.2.26

package/es/components/ActionsMenu/index.js

@@ -14,7 +14,7 @@ const crossTransform2 = keyframes(["0%{transform:translate(0,6px);border-radius:
 const StyledActionsMenuContainer = styled.div.withConfig({
   displayName: "ActionsMenu__StyledActionsMenuContainer",
   componentId: "sc-yvbni2-0"
-})(["pointer-events:none;opacity:0;&.visible{opacity:1;pointer-events:auto;}"]);
+})(["pointer-events:none;opacity:0;visibility:hidden;&.visible{visibility:visible;opacity:1;pointer-events:auto;}"]);
 const Wrapper = styled.div.withConfig({
   displayName: "ActionsMenu__Wrapper",
   componentId: "sc-yvbni2-1"
@@ -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, _actionMenu$context, _actionMenu$context2;
+  var _actionMenu$getItemPr;
   const {
     id,
     onItemClick,
@@ -97,10 +97,6 @@ export const ActionsMenuItem = styled(props => {
     ...newProps,
     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"
@@ -194,23 +190,21 @@ export const ActionsMenuBody = _ref => {
     value: value,
     children: /*#__PURE__*/_jsxs(Wrapper, {
       ...props,
-      children: [triggerComponent, /*#__PURE__*/_jsx(FloatingPortal, {
+      children: [triggerComponent, toggleState ? /*#__PURE__*/_jsx(FloatingPortal, {
         root: getFloatingUiRootElement(actionMenu.refs.reference),
-        children: toggleState ? /*#__PURE__*/_jsx(FloatingFocusManager, {
+        children: /*#__PURE__*/_jsx(FloatingFocusManager, {
           context: actionMenu.context,
-          modal: false,
-          guards: false,
+          modal: true,
           children: ActionMenuContent
-        }) : (
-        /*
-         * HACK: Fixing all the broken tests in teamform-app-ui is too time consuming
-         * right this moment with a lot of the tests asserting against ActionsMenu items.
-         * 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 ActionsMenu
-         * before assertion.
-         **/
-        ActionMenuContent)
-      })]
+        })
+      }) : (
+      /* * HACK: Fixing all the broken tests in teamform-app-ui is too
+      time consuming * right this moment with a lot of the tests asserting
+      against ActionsMenu items. * 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 ActionsMenu *
+      before assertion. **/
+      ActionMenuContent)]
     })
   });
   return theme ? /*#__PURE__*/_jsx(ThemeProvider, {

package/es/components/Checkbox/index.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import styled, { keyframes, ThemeProvider } from "styled-components";
 import { space, layout, typography } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
+import { pick } from "lodash";
 
 /* Animations */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -85,7 +86,7 @@ export default function Checkbox(_ref) {
         onClick: onClick,
         children: /*#__PURE__*/_jsx(Check, {})
       }), /*#__PURE__*/_jsx(Text, {
-        ...props,
+        ...pick(props, typography.propNames),
         children: label
       })]
     })

package/es/components/Popover/index.js

@@ -24,7 +24,7 @@ const TooltipControl = styled.div.withConfig({
 const StyledPopover = styled.div.withConfig({
   displayName: "Popover__StyledPopover",
   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"));
+})(["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:-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$refs2;
   let {
@@ -79,8 +79,7 @@ export default function Popover(_ref) {
   } = useInteractions([hover, focus, dismiss, role]);
   const triggerProps = {
     ...getReferenceProps({
-      ref: refs.setReference,
-      "aria-describedby": context.floatingId
+      ref: refs.setReference
     })
   };
   let triggerComponent = null;
@@ -135,28 +134,28 @@ export default function Popover(_ref) {
     },
     ...getFloatingProps(),
     ariaLabel: ariaLabel,
-    "aria-hidden": visible ? "false" : "true",
     children: text
   });
   return /*#__PURE__*/_jsxs(Box, {
     ...props,
-    children: [triggerComponent, /*#__PURE__*/_jsx(FloatingPortal, {
+    "aria-describedby": context.floatingId,
+    children: [text && (visible ? /*#__PURE__*/_jsx(FloatingPortal, {
       root: getFloatingUiRootElement(context.refs.reference),
       preserveTabOrder: true,
-      children: text && (visible ? /*#__PURE__*/_jsx(FloatingFocusManager, {
+      children: /*#__PURE__*/_jsx(FloatingFocusManager, {
         initialFocus: (_context$refs2 = context.refs) === null || _context$refs2 === void 0 ? void 0 : _context$refs2.reference,
         context: context,
         modal: false,
         children: Popover
-      }) : Popover
-      /*
-       * HACK: Fixing all the broken tests in teamform-app-ui is too time consuming
-       * right this moment with a lot of the tests asserting against Popover items.
-       * 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.
-       **/)
-    })]
+      })
+    }) : Popover
+    /*
+     * HACK: Fixing all the broken tests in teamform-app-ui is too time consuming
+     * right this moment with a lot of the tests asserting against Popover items.
+     * 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]
   });
 }
 Popover.propTypes = {

package/es/components/RadioButton/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { pick } from "lodash";
 import styled, { ThemeProvider } from "styled-components";
 import { space, layout, compose, variant, typography } from "styled-system";
 import { css } from "@styled-system/css";
@@ -187,7 +188,7 @@ export default function RadioButton(_ref) {
           variant: variant
         })
       }), /*#__PURE__*/_jsx(RadioButtonText, {
-        ...props,
+        ...pick(props, typography.propNames),
         children: label
       })]
     })

package/package.json

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