From 809b13f1c4a529dcc41729c9f99fbac3a8c717ed Mon Sep 17 00:00:00 2001
From: Chris Colborne <zorfling@gmail.com>
Date: Tue, 26 Oct 2021 21:26:31 +1000
Subject: [PATCH 1/2] fix: hide menu toggles when no extra options [fixes #2]

---
 src/MoreOptionsIconContainer.tsx |  6 ++++--
 src/OptionsOverlay.tsx           |  2 +-
 src/index.tsx                    | 10 ++++++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/MoreOptionsIconContainer.tsx b/src/MoreOptionsIconContainer.tsx
index 22b25b4..a0702ea 100644
--- a/src/MoreOptionsIconContainer.tsx
+++ b/src/MoreOptionsIconContainer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import styled from 'styled-components';
 import { IconChevronDown } from './IconChevronDown';
 import { IconChevronUp } from './IconChevronUp';
@@ -37,6 +37,7 @@ type MoreOptionsIconContainerProps = {
     | undefined;
   active: boolean;
   right?: boolean;
+  style?: CSSProperties;
 };
 
 type ReactRef =
@@ -47,12 +48,13 @@ type ReactRef =
 
 export const MoreOptionsIconContainer = React.forwardRef(
   (props: MoreOptionsIconContainerProps, ref: ReactRef) => {
-    const { onClick, active, right } = props;
+    const { onClick, active, right, style } = props;
     return (
       <MoreOptionsIconContainerStyle
         right={right || false}
         ref={ref}
         onClick={onClick}
+        style={style}
       >
         {!active && <IconChevronDown />}
         {active && <IconChevronUp />}
diff --git a/src/OptionsOverlay.tsx b/src/OptionsOverlay.tsx
index ff33f9d..b3cc98c 100644
--- a/src/OptionsOverlay.tsx
+++ b/src/OptionsOverlay.tsx
@@ -74,7 +74,7 @@ export const OptionsOverlay = <T extends Options>(
       minHeight={`${convertCardSizes.height}px`}
       maxHeight={`${convertCardSizes.height}px`}
     >
-      {shownMenuOptions.map((option) => {
+      {shownMenuOptions.map(option => {
         return (
           <OverlayOption
             key={option.name}
diff --git a/src/index.tsx b/src/index.tsx
index 83d88b3..82a53c5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -123,7 +123,7 @@ export const InOutTextarea: FC<Props> = props => {
                 if (a.active) return -1;
                 return 0;
               })
-              .map((option) => {
+              .map(option => {
                 return (
                   <InMenuOptionStuff
                     key={option.name}
@@ -142,6 +142,9 @@ export const InOutTextarea: FC<Props> = props => {
             ref={inOptionsMenuRef}
             onClick={onInMoreOptionsClick}
             active={showAdditionalInOptions}
+            style={{
+              visibility: menuInOptions.length > 0 ? 'visible' : 'hidden',
+            }}
           />
         </SideBar>
         <Spacer />
@@ -153,7 +156,7 @@ export const InOutTextarea: FC<Props> = props => {
                 if (a.active) return -1;
                 return 0;
               })
-              .map((option) => {
+              .map(option => {
                 return (
                   <OutMenuOptionStuff
                     key={option.name}
@@ -173,6 +176,9 @@ export const InOutTextarea: FC<Props> = props => {
             ref={outOptionsMenuRef}
             onClick={onOutMoreOptionsClick}
             active={showAdditionalOutOptions}
+            style={{
+              visibility: menuOutOptions.length > 0 ? 'visible' : 'hidden',
+            }}
           />
         </SideBar>
       </CaseBar>

From 9f08e5efbb35becdbcdaaaa6f38e582fa03352a4 Mon Sep 17 00:00:00 2001
From: Chris Colborne <zorfling@gmail.com>
Date: Thu, 28 Oct 2021 13:47:43 +1000
Subject: [PATCH 2/2] Remove use of style

---
 src/MoreOptionsIconContainer.tsx | 11 +++++++----
 src/index.tsx                    |  8 ++------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/MoreOptionsIconContainer.tsx b/src/MoreOptionsIconContainer.tsx
index a0702ea..6e1f472 100644
--- a/src/MoreOptionsIconContainer.tsx
+++ b/src/MoreOptionsIconContainer.tsx
@@ -1,10 +1,11 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { IconChevronDown } from './IconChevronDown';
 import { IconChevronUp } from './IconChevronUp';
 
 interface IMoreOptionsIconContainer {
   right: boolean;
+  isHidden?: boolean;
 }
 
 const MoreOptionsIconContainerStyle = styled.div<IMoreOptionsIconContainer>`
@@ -26,6 +27,8 @@ const MoreOptionsIconContainerStyle = styled.div<IMoreOptionsIconContainer>`
 
   padding-right: ${props => (props.right ? '10px' : '0px')};
 
+  visibility: ${({ isHidden }) => (isHidden ? 'hidden' : 'visible')};
+
   :hover {
     color: hsl(220deg 15% 50%);
   }
@@ -37,7 +40,7 @@ type MoreOptionsIconContainerProps = {
     | undefined;
   active: boolean;
   right?: boolean;
-  style?: CSSProperties;
+  isHidden?: boolean;
 };
 
 type ReactRef =
@@ -48,13 +51,13 @@ type ReactRef =
 
 export const MoreOptionsIconContainer = React.forwardRef(
   (props: MoreOptionsIconContainerProps, ref: ReactRef) => {
-    const { onClick, active, right, style } = props;
+    const { onClick, active, right, isHidden } = props;
     return (
       <MoreOptionsIconContainerStyle
         right={right || false}
         ref={ref}
         onClick={onClick}
-        style={style}
+        isHidden={isHidden}
       >
         {!active && <IconChevronDown />}
         {active && <IconChevronUp />}
diff --git a/src/index.tsx b/src/index.tsx
index 82a53c5..7122de2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -142,9 +142,7 @@ export const InOutTextarea: FC<Props> = props => {
             ref={inOptionsMenuRef}
             onClick={onInMoreOptionsClick}
             active={showAdditionalInOptions}
-            style={{
-              visibility: menuInOptions.length > 0 ? 'visible' : 'hidden',
-            }}
+            isHidden={menuInOptions.length === 0}
           />
         </SideBar>
         <Spacer />
@@ -176,9 +174,7 @@ export const InOutTextarea: FC<Props> = props => {
             ref={outOptionsMenuRef}
             onClick={onOutMoreOptionsClick}
             active={showAdditionalOutOptions}
-            style={{
-              visibility: menuOutOptions.length > 0 ? 'visible' : 'hidden',
-            }}
+            isHidden={menuOutOptions.length === 0}
           />
         </SideBar>
       </CaseBar>