Replace symbol palette tabs with a custom tablist (#19034)

GitOrigin-RevId: 69d8a8dd8980e287b484b915b1f92e57af5324cb

package-lock.json

@@ -8792,65 +8792,6 @@
         }
       }
     },
-    "node_modules/@reach/auto-id": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.15.3.tgz",
-      "integrity": "sha512-lbLUI9mrn74qVis141ib0Rsyhgk+gzUMtpplRmjy06cUWDFZyiBATNWMUxN5T+0fU4tpfgcjkAuPeTCCGThKtQ==",
-      "dev": true,
-      "dependencies": {
-        "@reach/utils": "0.15.3",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || 17.x",
-        "react-dom": "^16.8.0 || 17.x"
-      }
-    },
-    "node_modules/@reach/descendants": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@reach/descendants/-/descendants-0.15.3.tgz",
-      "integrity": "sha512-vuCBG7Uru6IEJ2wvTd7L2xumbYzv2UYBduZ0E1FEABqyUo78eTIZbRcwIN73IxMcivjWipBPlcLLkpFtJKMPew==",
-      "dev": true,
-      "dependencies": {
-        "@reach/utils": "0.15.3",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || 17.x",
-        "react-dom": "^16.8.0 || 17.x"
-      }
-    },
-    "node_modules/@reach/tabs": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@reach/tabs/-/tabs-0.15.3.tgz",
-      "integrity": "sha512-x+RToVrhywIp3YFqBVmPiscKKnr+29vwo2H3GGZMFeXOMaZz7d941cSbx7o2So2jXEtLhuTuMc9Nak/sVtV8Hg==",
-      "dev": true,
-      "dependencies": {
-        "@reach/auto-id": "0.15.3",
-        "@reach/descendants": "0.15.3",
-        "@reach/utils": "0.15.3",
-        "prop-types": "^15.7.2",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || 17.x",
-        "react-dom": "^16.8.0 || 17.x"
-      }
-    },
-    "node_modules/@reach/utils": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.15.3.tgz",
-      "integrity": "sha512-HFyjw8LZ4/RRk5bcMpDAeEc3aOeLR/vWRDsljlE3cHI5GfFlZcG3DDLSW8C2ba74RCFp/4X3Nz0nOrd4JdkZ1w==",
-      "dev": true,
-      "dependencies": {
-        "tiny-warning": "^1.0.3",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || 17.x",
-        "react-dom": "^16.8.0 || 17.x"
-      }
-    },
     "node_modules/@react-aria/ssr": {
       "version": "3.9.4",
       "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.4.tgz",
@@ -44706,7 +44647,6 @@
         "@pollyjs/adapter-node-http": "^6.0.6",
         "@pollyjs/core": "^6.0.6",
         "@pollyjs/persister-fs": "^6.0.6",
-        "@reach/tabs": "^0.15.0",
         "@replit/codemirror-emacs": "overleaf/codemirror-emacs#4394c03858f27053f8768258e9493866e06e938e",
         "@replit/codemirror-indentation-markers": "overleaf/codemirror-indentation-markers#1b1f93c0bcd04293aea6986aa2275185b2c56803",
         "@replit/codemirror-vim": "overleaf/codemirror-vim#53ce7363f80fba133d51ee861ca5e9b49af8e96b",
@@ -53162,7 +53102,6 @@
         "@pollyjs/adapter-node-http": "^6.0.6",
         "@pollyjs/core": "^6.0.6",
         "@pollyjs/persister-fs": "^6.0.6",
-        "@reach/tabs": "^0.15.0",
         "@replit/codemirror-emacs": "overleaf/codemirror-emacs#4394c03858f27053f8768258e9493866e06e938e",
         "@replit/codemirror-indentation-markers": "overleaf/codemirror-indentation-markers#1b1f93c0bcd04293aea6986aa2275185b2c56803",
         "@replit/codemirror-vim": "overleaf/codemirror-vim#53ce7363f80fba133d51ee861ca5e9b49af8e96b",
@@ -54567,49 +54506,6 @@
         "@radix-ui/react-compose-refs": "1.0.1"
       }
     },
-    "@reach/auto-id": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.15.3.tgz",
-      "integrity": "sha512-lbLUI9mrn74qVis141ib0Rsyhgk+gzUMtpplRmjy06cUWDFZyiBATNWMUxN5T+0fU4tpfgcjkAuPeTCCGThKtQ==",
-      "dev": true,
-      "requires": {
-        "@reach/utils": "0.15.3",
-        "tslib": "^2.3.0"
-      }
-    },
-    "@reach/descendants": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@reach/descendants/-/descendants-0.15.3.tgz",
-      "integrity": "sha512-vuCBG7Uru6IEJ2wvTd7L2xumbYzv2UYBduZ0E1FEABqyUo78eTIZbRcwIN73IxMcivjWipBPlcLLkpFtJKMPew==",
-      "dev": true,
-      "requires": {
-        "@reach/utils": "0.15.3",
-        "tslib": "^2.3.0"
-      }
-    },
-    "@reach/tabs": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@reach/tabs/-/tabs-0.15.3.tgz",
-      "integrity": "sha512-x+RToVrhywIp3YFqBVmPiscKKnr+29vwo2H3GGZMFeXOMaZz7d941cSbx7o2So2jXEtLhuTuMc9Nak/sVtV8Hg==",
-      "dev": true,
-      "requires": {
-        "@reach/auto-id": "0.15.3",
-        "@reach/descendants": "0.15.3",
-        "@reach/utils": "0.15.3",
-        "prop-types": "^15.7.2",
-        "tslib": "^2.3.0"
-      }
-    },
-    "@reach/utils": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.15.3.tgz",
-      "integrity": "sha512-HFyjw8LZ4/RRk5bcMpDAeEc3aOeLR/vWRDsljlE3cHI5GfFlZcG3DDLSW8C2ba74RCFp/4X3Nz0nOrd4JdkZ1w==",
-      "dev": true,
-      "requires": {
-        "tiny-warning": "^1.0.3",
-        "tslib": "^2.3.0"
-      }
-    },
     "@react-aria/ssr": {
       "version": "3.9.4",
       "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.4.tgz",

services/web/frontend/stylesheets/app/editor/symbol-palette.less

@@ -1,105 +0,0 @@
-.symbol-palette-container {
-  height: 100%;
-}
-
-.symbol-palette {
-  display: flex;
-  flex-direction: column;
-  background: @symbol-palette-bg;
-  color: @symbol-palette-color;
-  width: 100%;
-  height: 100%;
-}
-
-.symbol-palette-header {
-  flex-shrink: 0;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  font-family: @font-family-sans-serif;
-  font-size: 16px;
-  background: @symbol-palette-header-background;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-.symbol-palette-header .beta-badge {
-  margin-right: @margin-xs;
-  margin-left: @margin-xs;
-}
-
-.symbol-palette-tab-list[data-reach-tab-list] {
-  background: none;
-  border-bottom: none;
-  flex-wrap: wrap;
-}
-
-.symbol-palette-tab[data-reach-tab][data-selected] {
-  background: @symbol-palette-selected-tab-bg;
-  color: @symbol-palette-selected-tab-color;
-  border-bottom-color: transparent;
-}
-
-.symbol-palette-body {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.symbol-palette-items {
-  display: flex;
-  flex-wrap: wrap;
-  padding: @padding-xs;
-}
-
-.symbol-palette-item {
-  font-family: 'Stix Two Math', serif;
-  font-size: 24px;
-  line-height: 42px;
-  height: 42px;
-  width: 42px;
-  margin: @margin-xs;
-  color: @symbol-palette-item-color;
-  background: @symbol-palette-item-bg;
-  border: 1px solid transparent;
-  border-radius: @border-radius-base;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.symbol-palette-item-command {
-  font-family: monospace;
-  font-weight: bold;
-}
-
-.symbol-palette-item-notes {
-  margin-top: @margin-xs;
-}
-
-.symbol-palette-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: @padding-sm;
-}
-
-.symbol-palette-search {
-  padding: 2px @padding-sm;
-  margin: @margin-xs;
-  line-height: 1;
-  height: auto;
-  width: auto;
-}
-
-.symbol-palette-header-group {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  margin-left: @margin-xs;
-}
-
-.symbol-palette-info-link,
-.symbol-palette-info-link:focus,
-.symbol-palette-info-link:hover {
-  color: inherit;
-}

services/web/frontend/stylesheets/modules/symbol-palette.less

@@ -33,16 +33,29 @@
     align-items: center;
   }
 
-  .symbol-palette-tab-list[data-reach-tab-list] {
+  .symbol-palette-tab-list[role='tablist'] {
     background: none;
     border-bottom: none;
     flex-wrap: wrap;
   }
 
-  .symbol-palette-tab[data-reach-tab][data-selected] {
-    background: @symbol-palette-selected-tab-bg;
-    color: @symbol-palette-selected-tab-color;
-    border-bottom-color: transparent;
+  .symbol-palette-tab[role='tab'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background: none;
+    border: none;
+    border-bottom: 1px solid transparent;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+    font: inherit;
+    margin: 0;
+    padding: 0.25em 0.5em;
+
+    &[aria-selected='true'] {
+      background: @symbol-palette-selected-tab-bg;
+      color: @symbol-palette-selected-tab-color;
+    }
   }
 
   .symbol-palette-body {

services/web/package.json

@@ -212,7 +212,6 @@
     "@pollyjs/adapter-node-http": "^6.0.6",
     "@pollyjs/core": "^6.0.6",
     "@pollyjs/persister-fs": "^6.0.6",
-    "@reach/tabs": "^0.15.0",
     "@replit/codemirror-emacs": "overleaf/codemirror-emacs#4394c03858f27053f8768258e9493866e06e938e",
     "@replit/codemirror-indentation-markers": "overleaf/codemirror-indentation-markers#1b1f93c0bcd04293aea6986aa2275185b2c56803",
     "@replit/codemirror-vim": "overleaf/codemirror-vim#53ce7363f80fba133d51ee861ca5e9b49af8e96b",