From cf78eb829fcc65196a1d037f6a1309425005dd37 Mon Sep 17 00:00:00 2001
From: Jake Laderman <jsladerman@gmail.com>
Date: Wed, 9 Oct 2024 11:21:42 -0500
Subject: [PATCH] fix: vertical tab prop

---
 src/components/Select.tsx         | 10 +++++-----
 src/components/TabList.tsx        |  4 ++--
 src/components/TagMultiSelect.tsx | 14 +++++---------
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index f03f5790..be78c0ad 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -78,10 +78,10 @@ export type SelectProps = Exclude<SelectButtonProps, 'children'> & {
 type TriggerProps = {
   buttonRef: RefObject<HTMLElement>
   buttonElt: any
-  $isOpen: boolean
+  isOpen: boolean
 } & HTMLAttributes<HTMLElement>
 
-function Trigger({ buttonElt, $isOpen, ...props }: TriggerProps) {
+function Trigger({ buttonElt, isOpen, ...props }: TriggerProps) {
   const ref = props.buttonRef
   const { buttonProps } = useButton(props, ref)
   const theme = useTheme()
@@ -90,10 +90,10 @@ function Trigger({ buttonElt, $isOpen, ...props }: TriggerProps) {
     ref,
     ...buttonProps,
     ...(buttonElt?.props?.type ? { type: buttonElt.props.type } : {}),
-    $isOpen,
+    isOpen,
     style: {
       appearance: 'unset',
-      ...($isOpen ? { zIndex: theme.zIndexes.tooltip + 1 } : {}),
+      ...(isOpen ? { zIndex: theme.zIndexes.tooltip + 1 } : {}),
     },
     tabIndex: 0,
   })
@@ -374,7 +374,7 @@ function Select({
       <Trigger
         buttonRef={triggerRef as unknown as RefObject<HTMLElement>}
         buttonElt={triggerButton}
-        $isOpen={state.isOpen}
+        isOpen={state.isOpen}
         {...triggerProps}
       />
       <PopoverListBox
diff --git a/src/components/TabList.tsx b/src/components/TabList.tsx
index 8f7042ae..01db948f 100644
--- a/src/components/TabList.tsx
+++ b/src/components/TabList.tsx
@@ -183,7 +183,7 @@ const TabClone = styled(
       ref: tabRef,
       ...props,
     })
-)<{ $vertical: boolean }>(({ theme, $vertical: vertical }) => ({
+)<{ vertical: boolean }>(({ theme, vertical }) => ({
   position: 'relative',
   '&:focus, &:focus-visible': {
     outline: 'none',
@@ -244,7 +244,7 @@ function TabRenderer({ item, state, stateProps, stateRef }: TabRendererProps) {
       tabRef={ref}
       {...props}
       active={state.selectedKey === item.key}
-      $vertical={stateProps.orientation === 'vertical'}
+      vertical={stateProps.orientation === 'vertical'}
       {...item.props}
     >
       {item.rendered}
diff --git a/src/components/TagMultiSelect.tsx b/src/components/TagMultiSelect.tsx
index 2d6954d2..217ecdad 100644
--- a/src/components/TagMultiSelect.tsx
+++ b/src/components/TagMultiSelect.tsx
@@ -34,12 +34,10 @@ type TagMultiSelectProps = {
   selectProps?: Omit<SelectPropsSingle, 'children'>
 }
 
-const MultiSelectMatchButtonContainer = styled.div`
-  > div {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: none;
-  }
+const MultiSelectMatchButtonContainer = styled(SelectButton)`
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
 `
 
 const TagMultiSelect = styled(TagMultiSelectUnstyled)(({ theme }) => ({
@@ -94,9 +92,7 @@ function TagMultiSelectUnstyled({
           defaultOpen={false}
           triggerButton={
             <MultiSelectMatchButtonContainer>
-              <SelectButton>
-                {matchOptions.find((el) => el.value === searchLogic).label}
-              </SelectButton>
+              {matchOptions.find((el) => el.value === searchLogic).label}
             </MultiSelectMatchButtonContainer>
           }
           {...selectProps}