updated prop name for alt trigger rendering

orchestrated-io · Oct 2, 2024 · 4d47632 · 4d47632
1 parent 6046c59
commit 4d47632
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/lib/components/ActionsMenu/index.js b/lib/components/ActionsMenu/index.js
@@ -294,7 +294,7 @@ export const ActionsMenuBody = ({
   direction = "right-start",
   menuWidth,
   customTriggerComponent,
-  CustomTriggerComponent,
+  renderTrigger,
   children,
   ariaLabel = "Options Menu",
   onTriggerFocus,
@@ -351,6 +351,10 @@ export const ActionsMenuBody = ({
     </Control>
   );
 
+  if (renderTrigger) {
+    triggerComponent = renderTrigger(triggerProps);
+  }
+
   if (customTriggerComponent) {
     triggerComponent = (
       <div role="button" {...triggerProps}>
@@ -359,14 +363,6 @@ export const ActionsMenuBody = ({
     );
   }
 
-  /**
-   * Better to use CustomTriggerComponent for aria reasons.
-   * But we have to pass in a component wrapped in React.forwardRef so that the ref gets passed properly.
-   */
-  if (CustomTriggerComponent) {
-    triggerComponent = <CustomTriggerComponent {...triggerProps} />;
-  }
-
   const value = useMemo(
     () => ({
       id,
@@ -463,7 +459,7 @@ ActionsMenuBody.propTypes = {
   menuRightPosition: PropTypes.string,
   menuWidth: PropTypes.string,
   customTriggerComponent: PropTypes.node,
-  CustomTriggerComponent: PropTypes.object,
+  renderTrigger: PropTypes.func,
   "data-testid": PropTypes.string,
   children: PropTypes.oneOfType([
     PropTypes.node,
@@ -516,7 +512,7 @@ ActionsMenu.propTypes = {
     "right-end"
   ]),
   customTriggerComponent: PropTypes.node,
-  CustomTriggerComponent: PropTypes.object,
+  renderTrigger: PropTypes.func,
   closeOnClick: PropTypes.bool,
   children: PropTypes.oneOfType([
     PropTypes.node,

diff --git a/lib/components/Tabs/index.js b/lib/components/Tabs/index.js
@@ -219,10 +219,9 @@ const Tabs = ({ tabsList }) => {
 
           <ActionsMenu
             direction="bottom-end"
-            CustomTriggerComponent={React.forwardRef((props, ref) => (
+            renderTrigger={(props) => (
               <ShowMoreButton
                 {...props}
-                ref={ref}
                 showMoreVisible={showMoreTabsList.length}
                 id="show-more-button"
                 className={showMoreItemActive && "hasActive"}
@@ -237,7 +236,7 @@ const Tabs = ({ tabsList }) => {
                   />
                 </FlexItem>
               </ShowMoreButton>
-            ))}
+            )}
             closeOnClick
           >
             <ShowMoreTabs>