fix typescript error & css

Author: KoolADE85

components/dash-core-components/src/components/Tabs.tsx

@@ -112,27 +112,25 @@ function Tabs({
         return [children];
     }, [children]);
 
-    const valueOrDefault = () => {
+    const valueOrDefault = (): string | undefined => {
         if (has('value', props)) {
             return props.value;
         }
         const children = parseChildrenToArray();
         if (children && children.length && children[0].props.componentPath) {
-            const firstChildren = window.dash_component_api.getLayout([
-                ...children[0].props.componentPath,
-                'props',
-                'value',
-            ]);
-            return firstChildren || 'tab-1';
+            const firstChildren: TabProps = window.dash_component_api.getLayout(
+                [...children[0].props.componentPath, 'props']
+            );
+            return firstChildren.value;
         }
-        return 'tab-1';
+        return undefined;
     };
 
     // Initialize value on mount if not set
     useEffect(() => {
         if (!initializedRef.current && !has('value', props)) {
             props.setProps({
-                value: valueOrDefault(),
+                value: `${valueOrDefault()}`,
             });
             initializedRef.current = true;
         }

components/dash-core-components/src/components/css/tabs.css

@@ -28,11 +28,6 @@
     box-sizing: border-box;
 }
 
-.tab:last-of-type {
-    border-right: 1px solid var(--tabs-border);
-    border-bottom: 1px solid var(--tabs-border);
-}
-
 .tab:hover {
     cursor: pointer;
 }
@@ -65,8 +60,13 @@
     border-right: none;
 }
 
+.tab-parent--above-breakpoint .tab:last-child {
+    border-right: 1px solid var(--tabs-border);
+    border-bottom: 1px solid var(--tabs-border);
+}
+
 .tab-parent--above-breakpoint .tab--selected,
-.tab-parent--above-breakpoint .tab:last-of-type.tab--selected {
+.tab-parent--above-breakpoint .tab:last-child.tab--selected {
     border-bottom: none;
 }
 
@@ -81,7 +81,7 @@
     .tab--selected,
 .tab-parent--above-breakpoint
     .tab-container:not(.tab-container--vert)
-    .tab:last-of-type.tab--selected {
+    .tab:last-child.tab--selected {
     border-top: 2px solid var(--tabs-primary);
 }
 
@@ -91,7 +91,7 @@
     border-bottom: none !important;
 }
 
-.tab-parent--above-breakpoint .tab-container--vert .tab:last-of-type {
+.tab-parent--above-breakpoint .tab-container--vert .tab:last-child {
     border-bottom: 1px solid var(--tabs-border) !important;
 }
 

dash/dash-renderer/src/types/component.ts

@@ -16,7 +16,7 @@ export interface DashComponentApi {
     ExternalWrapper: typeof ExternalWrapper;
     DashContext: typeof DashContext;
     useDashContext: typeof useDashContext;
-    getLayout: (componentPathOrId: DashLayoutPath | string) => DashComponent;
+    getLayout: (componentPathOrId: DashLayoutPath | string) => any;
     stringifyId: typeof stringifyId;
 }