fix: infer closed-tabs mode from tabs props

package.json

@@ -30,6 +30,7 @@
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-angular": "^12.0.1",
     "@types/node": "^14.14.34",
+    "@types/react": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "css-loader": "^5.1.2",

src/declaration.d.ts

@@ -4,71 +4,99 @@ declare module "*.scss" {
   export default content
 }
 
-// https://github.com/vercel/hyper/blob/ffd4eb46e3923061be6549796f00d437fa0aaa0f/lib/config.d.ts
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 namespace Hyper {
-  export type ColorOptions = {
-    black: string
-    blue: string
-    cyan: string
-    green: string
-    lightBlack: string
-    lightBlue: string
-    lightCyan: string
-    lightGreen: string
-    lightMagenta: string
-    lightRed: string
-    lightWhite: string
-    lightYellow: string
-    magenta: string
-    red: string
-    white: string
-    yellow: string
-  }
+  // https://github.com/vercel/hyper/blob/ffd4eb46e3923061be6549796f00d437fa0aaa0f/lib/config.d.ts
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  namespace Options {
+    export type Color = {
+      black: string
+      blue: string
+      cyan: string
+      green: string
+      lightBlack: string
+      lightBlue: string
+      lightCyan: string
+      lightGreen: string
+      lightMagenta: string
+      lightRed: string
+      lightWhite: string
+      lightYellow: string
+      magenta: string
+      red: string
+      white: string
+      yellow: string
+    }
 
-  export type ConfigOptions = {
-    autoUpdatePlugins: boolean | string
-    backgroundColor: string
-    bell: string
-    bellSound: string | null
-    bellSoundURL: string | null
-    borderColor: string
-    colors: ColorOptions
-    copyOnSelect: boolean
-    css: string
-    cursorAccentColor: string
-    cursorBlink: boolean
-    cursorColor: string
-    cursorShape: "BEAM" | "UNDERLINE" | "BLOCK"
-    defaultSSHApp: boolean
-    disableLigatures: boolean
-    env: Record<string, string>
-    fontFamily: string
-    fontSize: number
-    fontWeight: FontWeight
-    fontWeightBold: FontWeight
-    foregroundColor: string
-    letterSpacing: number
-    lineHeight: number
-    macOptionSelectionMode: string
-    modifierKeys: {
-      altIsMeta: boolean
-      cmdIsMeta: boolean
+    export type Config = {
+      autoUpdatePlugins: boolean | string
+      backgroundColor: string
+      bell: string
+      bellSound: string | null
+      bellSoundURL: string | null
+      borderColor: string
+      colors: ColorOptions
+      copyOnSelect: boolean
+      css: string
+      cursorAccentColor: string
+      cursorBlink: boolean
+      cursorColor: string
+      cursorShape: "BEAM" | "UNDERLINE" | "BLOCK"
+      defaultSSHApp: boolean
+      disableLigatures: boolean
+      env: Record<string, string>
+      fontFamily: string
+      fontSize: number
+      fontWeight: FontWeight
+      fontWeightBold: FontWeight
+      foregroundColor: string
+      letterSpacing: number
+      lineHeight: number
+      macOptionSelectionMode: string
+      modifierKeys: {
+        altIsMeta: boolean
+        cmdIsMeta: boolean
+      }
+      padding: string
+      quickEdit: boolean
+      scrollback: number
+      selectionColor: string
+      shell: string
+      shellArgs: string[]
+      showHamburgerMenu: boolean | ""
+      showWindowControls: string
+      termCSS: string
+      uiFontFamily: string
+      updateChannel: "stable" | "canary"
+      useConpty: boolean
+      webGLRenderer: boolean
+      webLinksActivationKey: "ctrl" | "alt" | "meta" | "shift"
+      windowSize: [number, number]
     }
-    padding: string
-    quickEdit: boolean
-    scrollback: number
-    selectionColor: string
-    shell: string
-    shellArgs: string[]
-    showHamburgerMenu: boolean | ""
-    showWindowControls: string
-    termCSS: string
-    uiFontFamily: string
-    updateChannel: "stable" | "canary"
-    useConpty: boolean
-    webGLRenderer: boolean
-    webLinksActivationKey: "ctrl" | "alt" | "meta" | "shift"
-    windowSize: [number, number]
   }
+
+  // https://github.com/vercel/hyper/blob/ffd4eb46e3923061be6549796f00d437fa0aaa0f/lib/hyper.d.ts
+  import { ReactChild } from "react"
+
+  type extensionProps = Partial<{
+    customChildren: ReactChild | ReactChild[]
+    customChildrenBefore: ReactChild | ReactChild[]
+    customCSS: string
+    customInnerChildren: ReactChild | ReactChild[]
+  }>
+
+  export type ITab = {
+    uid: string
+    title: string
+    isActive: boolean
+    hasActivity: boolean
+  }
+
+  export type TabsProps = {
+    tabs: ITab[]
+    borderColor: string
+    onChange: (uid: string) => void
+    onClose: (uid: string) => void
+    fullScreen: boolean
+  } & extensionProps
 }

src/index.ts

@@ -3,7 +3,7 @@ import styles from "./styles.scss"
 const backgroundColor = "#31363b"
 const foregroundColor = "#eff0f1"
 
-const colors: Hyper.ColorOptions = {
+const colors: Hyper.Options.Color = {
   black: backgroundColor,
   red: "#ed1515",
   green: "#11d116",
@@ -23,12 +23,27 @@ const colors: Hyper.ColorOptions = {
 }
 
 export function decorateConfig(
-  config: Hyper.ConfigOptions
-): Hyper.ConfigOptions {
-  return Object.assign({}, config, <Hyper.ConfigOptions>{
+  config: Hyper.Options.Config
+): Hyper.Options.Config {
+  return Object.assign({}, config, <Hyper.Options.Config>{
     backgroundColor,
     foregroundColor,
     colors,
     css: (config.css || "") + styles,
   })
 }
+
+export function getTabsProps(
+  parentProps: unknown,
+  props: Hyper.TabsProps
+): Record<string, unknown> {
+  const bodyClasses = document.body.classList
+
+  if (props.tabs.length <= 1) {
+    bodyClasses.add("closed-tabs")
+  } else {
+    bodyClasses.remove("closed-tabs")
+  }
+
+  return Object.assign({}, parentProps, props)
+}

src/styles.scss

@@ -7,7 +7,7 @@ $tab-bg-inactive-hover: #3e4146;
 }
 
 :global(body.closed-tabs) .header_header {
-  background-color: $tab-bg;
+  background-color: $tab-bg !important;
 }
 
 .header_windowHeaderWithBorder {