add an optional prop to TreeNavSubMenu

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 4.2.0 (2022-05-20)
+
+- [768](https://github.com/influxdata/clockface/pull/768): Added optional property to TreeNavSubMenu
+
 ### 4.1.0 (2022-05-19)
 
 - [769](https://github.com/influxdata/clockface/pull/769): Selectable resource card for Bulk Actions
@@ -38,7 +42,7 @@
 
 ### 3.8.0 (2022-03-31)
 
-- [752](https://github.com/influxdata/clockface/pull/752): Added Icon for Bulk Action Deselection 
+- [752](https://github.com/influxdata/clockface/pull/752): Added Icon for Bulk Action Deselection
 
 ### 3.7.0 (2022-03-31)
 
@@ -55,6 +59,7 @@
 ### 3.5.1 (2022-03-11)
 
 - [744](https://github.com/influxdata/clockface/pull/744): FormValidationElement bug fix
+
 ### 3.5.0 (2022-03-10)
 
 - [740](https://github.com/influxdata/clockface/pull/740): Added input functionality to the PaginationNav

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/clockface",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "MIT",
   "main": "dist/index.js",
   "style": "dist/index.css",

src/Components/TreeNav/TreeNavSubMenu.tsx

@@ -10,51 +10,67 @@ import {
 } from '../../Types'
 import {Popover} from '../Popover'
 
-export type TreeNavSubMenuProps = StandardFunctionProps
+export interface OptionalProp {
+  position?: PopoverPosition
+}
+
+export type TreeNavSubMenuProps = StandardFunctionProps & OptionalProp
 
 export type TreeNavSubMenuRef = HTMLDivElement
 
 export const TreeNavSubMenu = forwardRef<
   TreeNavSubMenuRef,
   TreeNavSubMenuProps
->(({id, style, testID = 'tree-nav--sub-menu', className, children}, ref) => {
-  const navMenuHeaderClass = classnames('cf-tree-nav--sub-menu', {
-    [`${className}`]: className,
-  })
-
-  const triggerRef = useRef<HTMLButtonElement>(null)
-
-  return (
-    <>
-      <button
-        type="button"
-        className="cf-tree-nav--sub-menu-trigger"
-        ref={triggerRef}
-        aria-label="Show sub menu"
-      />
-      {triggerRef && (
-        <Popover
-          enableDefaultStyles={true}
-          contents={onHide => <div onClick={onHide}>{children}</div>}
-          hideEvent={PopoverInteraction.Hover}
-          showEvent={PopoverInteraction.Hover}
-          triggerRef={triggerRef}
-          position={PopoverPosition.ToTheRightTop}
-          className="cf-popover__nav"
-          distanceFromTrigger={4}
+>(
+  (
+    {
+      id,
+      style,
+      testID = 'tree-nav--sub-menu',
+      className,
+      children,
+      position = PopoverPosition.ToTheRightTop,
+    },
+    ref
+  ) => {
+    const navMenuHeaderClass = classnames('cf-tree-nav--sub-menu', {
+      [`${className}`]: className,
+    })
+
+    const triggerRef = useRef<HTMLButtonElement>(null)
+
+    return (
+      <>
+        <button
+          type="button"
+          className="cf-tree-nav--sub-menu-trigger"
+          ref={triggerRef}
+          aria-label="Show sub menu"
         />
-      )}
-      <div
-        id={id}
-        ref={ref}
-        style={style}
-        className={navMenuHeaderClass}
-        data-testid={testID}
-      >
-        {children}
-      </div>
-    </>
-  )
-})
+        {triggerRef && (
+          <Popover
+            enableDefaultStyles={true}
+            contents={onHide => <div onClick={onHide}>{children}</div>}
+            hideEvent={PopoverInteraction.Hover}
+            showEvent={PopoverInteraction.Hover}
+            triggerRef={triggerRef}
+            position={position}
+            className="cf-popover__nav"
+            distanceFromTrigger={4}
+          />
+        )}
+        <div
+          id={id}
+          ref={ref}
+          style={style}
+          className={navMenuHeaderClass}
+          data-testid={testID}
+        >
+          {children}
+        </div>
+      </>
+    )
+  }
+)
 
 TreeNavSubMenu.displayName = 'TreeNavSubMenu'