orcs-design-system 3.2.41 → 3.2.42

package/es/components/ActionsMenu/index.js

@@ -118,6 +118,7 @@ export const ActionsMenuBody = _ref2 => {
     direction = "right-start",
     menuWidth,
     customTriggerComponent,
+    renderTrigger,
     children,
     ariaLabel = "Options Menu",
     onTriggerFocus,
@@ -158,8 +159,12 @@ export const ActionsMenuBody = _ref2 => {
       className: "action-menu-icon"
     })
   });
+  if (renderTrigger) {
+    triggerComponent = renderTrigger(triggerProps);
+  }
   if (customTriggerComponent) {
     triggerComponent = /*#__PURE__*/_jsx("div", {
+      role: "button",
       ...triggerProps,
       children: customTriggerComponent
     });
@@ -244,6 +249,8 @@ ActionsMenuBody.propTypes = {
   menuRightPosition: PropTypes.string,
   menuWidth: PropTypes.string,
   customTriggerComponent: PropTypes.node,
+  renderTrigger: PropTypes.func,
+  "data-testid": PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   theme: PropTypes.object,
   ariaLabel: PropTypes.string
@@ -271,6 +278,7 @@ ActionsMenu.propTypes = {
   isOpen: PropTypes.bool,
   direction: PropTypes.oneOf(["left", "right", "top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end", "left-start", "left-end", "right-start", "right-end"]),
   customTriggerComponent: PropTypes.node,
+  renderTrigger: PropTypes.func,
   closeOnClick: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   /** Specifies the colour theme */
@@ -341,6 +349,13 @@ ActionsMenu.__docgenInfo = {
       },
       "required": false
     },
+    "renderTrigger": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
     "closeOnClick": {
       "description": "",
       "type": {
@@ -423,6 +438,10 @@ ActionsMenuBody.__docgenInfo = {
         "value": "\"ActionsMenu\"",
         "computed": false
       },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
       "required": false
     },
     "onTriggerFocus": {
@@ -495,6 +514,13 @@ ActionsMenuBody.__docgenInfo = {
       },
       "required": false
     },
+    "renderTrigger": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
     "children": {
       "description": "",
       "type": {

package/es/components/Tabs/index.js

@@ -55,11 +55,11 @@ const Tabs = _ref4 => {
   } = _ref4;
   const [isMounted, setIsMounted] = useState(false);
   const containerRef = useRef(null);
-  const showMoreButtonRef = useRef();
   const containerVisibleWidth = useRef(0);
   const [showMoreTabs, setShowMoreTabs] = useState([]);
   const calculateVisibility = useCallback(actionElements => {
-    const showMoreButtonWidth = showMoreButtonRef?.current?.offsetWidth ?? 0;
+    const showMoreButton = document.getElementById("show-more-button");
+    const showMoreButtonWidth = showMoreButton?.offsetWidth ?? 0;
     // as we loop through the tabs, we need to calculate the width of the visible tabs.
     let calculatedWidth = showMoreTabs.length ? showMoreButtonWidth : 0;
 
@@ -130,9 +130,10 @@ const Tabs = _ref4 => {
           children: tab.label
         }, tab.path)), /*#__PURE__*/_jsx(ActionsMenu, {
           direction: "bottom-end",
-          customTriggerComponent: /*#__PURE__*/_jsxs(ShowMoreButton, {
-            ref: showMoreButtonRef,
+          renderTrigger: props => /*#__PURE__*/_jsxs(ShowMoreButton, {
+            ...props,
             showMoreVisible: showMoreTabsList.length,
+            id: "show-more-button",
             className: showMoreItemActive && "hasActive",
             children: [/*#__PURE__*/_jsx(FlexItem, {
               flex: "0 0 auto",

package/package.json

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