feat: use a native select element instead of @reach/listbox (#942)

hashicorp · Apr 27, 2023 · 8d1faaa · 8d1faaa · vercel · Apr 27, 2023
1 parent 8a12329
commit 8d1faaa
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 181 deletions.
diff --git a/.changeset/strong-pens-train.md b/.changeset/strong-pens-train.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-code-block': minor
+---
+
+Use a native select element instead of @reach/listbox
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/code-block/package.json b/packages/code-block/package.json
@@ -5,7 +5,6 @@
   "author": "HashiCorp",
   "dependencies": {
     "@hashicorp/react-inline-svg": "^6.0.3",
-    "@reach/listbox": "^0.17.0",
     "shellwords": "^0.1.1"
   },
   "license": "MPL-2.0",

diff --git a/packages/code-block/partials/code-tabs/index.tsx b/packages/code-block/partials/code-tabs/index.tsx
@@ -137,7 +137,6 @@ function CodeTabs({
               {hasOverflow ? (
                 <TabsAsDropdown
                   tabLabels={tabLabels}
-                  activeTabIdx={activeTabIdx}
                   setActiveTabIdx={setActiveTabWithEvent}
                   hasHeading={hasHeading}
                 />

diff --git a/packages/code-block/partials/code-tabs/partials/tabs-as-dropdown/chevron-down.svg b/packages/code-block/partials/code-tabs/partials/tabs-as-dropdown/chevron-down.svg
diff --git a/packages/code-block/partials/code-tabs/partials/tabs-as-dropdown/index.js b/packages/code-block/partials/code-tabs/partials/tabs-as-dropdown/index.js
diff --git a/packages/code-block/partials/code-tabs/partials/tabs-as-dropdown/index.tsx b/packages/code-block/partials/code-tabs/partials/tabs-as-dropdown/index.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import classNames from 'classnames'
+import s from './style.module.css'
+
+interface TabsAsDropdownProps {
+  tabLabels: string[]
+  setActiveTabIdx: (tabIdx: number) => void
+  hasHeading: boolean
+}
+
+function TabsAsDropdown({
+  tabLabels,
+  setActiveTabIdx,
+  hasHeading,
+}: TabsAsDropdownProps) {
+  return (
+    <div
+      className={classNames(s.tabsAsDropdown, { [s.hasHeading]: hasHeading })}
+    >
+      <select
+        className={s.listboxButton}
+        onChange={(e) => setActiveTabIdx(parseInt(e.target.value, 10))}
+      >
+        {tabLabels.map((tabLabel, idx) => (
+          <option key={tabLabel} value={idx}>
+            {tabLabel}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+export default TabsAsDropdown
diff --git a/packages/code-block/partials/code-tabs/partials/tabs-as-dropdown/style.module.css b/packages/code-block/partials/code-tabs/partials/tabs-as-dropdown/style.module.css
@@ -17,6 +17,10 @@ to be present.
   &.hasHeading {
     margin-left: auto;
   }
+
+  & option {
+    color: initial;
+  }
 }
 
 .listboxInput {
@@ -26,6 +30,8 @@ to be present.
 
 .listboxButton {
   composes: g-type-body-small-strong from global;
+  background-color: transparent;
+  border: 0;
   color: var(--text-color-faded);
   min-height: var(--base-height);
   padding: 0 16px;