@toptal/picasso-tabs 5.0.15-alpha-ff-7-tabs-17eb872bb.13 → 5.0.15-alpha-bill-root-ref-context-42c3d2541.6

package/src/Tabs/styles.ts

@@ -0,0 +1,45 @@
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
+import { PicassoProvider } from '@toptal/picasso-provider'
+
+PicassoProvider.override(({ palette }: Theme) => ({
+  MuiTabs: {
+    root: {
+      position: 'relative',
+      minHeight: 0,
+    },
+    vertical: {
+      width: 200,
+      margin: 0,
+      '& $scroller': {
+        // We need a bit of padding to allow active tab's shadow to be visible
+        paddingLeft: '0.5em',
+      },
+
+      '& $indicator': {
+        display: 'none',
+      },
+    },
+    indicator: {
+      backgroundColor: palette.blue.main,
+      zIndex: 1,
+    },
+  },
+}))
+
+export default ({ palette }: Theme) =>
+  createStyles({
+    horizontal: {
+      '&::after': {
+        position: 'absolute',
+        content: '""',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: 1,
+        backgroundColor: palette.grey.main,
+        zIndex: 0,
+      },
+    },
+    vertical: {},
+  })

package/src/Tabs/test.tsx

@@ -60,7 +60,7 @@ describe('Tabs', () => {
     const { container, queryByTestId } = renderTabs(
       [{ label: 'Tab 1' }, { label: 'Tab 2' }],
       {
-        value: null,
+        value: false,
       }
     )
 
@@ -73,7 +73,7 @@ describe('Tabs', () => {
   it('renders in vertical orientation', () => {
     const { container } = renderTabs(
       [{ label: 'Tab 1' }, { label: 'Tab 2' }],
-      { value: null },
+      { value: false },
       'vertical'
     )
 
@@ -116,7 +116,7 @@ describe('Tabs', () => {
     const { getByTestId } = renderTabs(
       [{ label: 'Tab 1' }, { label: 'Tab 2' }],
       {
-        value: 0,
+        value: 1,
         onChange,
       }
     )
@@ -159,7 +159,7 @@ describe('Tabs', () => {
 
   it('renders in full width', () => {
     const { container } = renderTabs([{ label: 'Tab 1' }, { label: 'Tab 2' }], {
-      value: null,
+      value: false,
       variant: 'fullWidth',
     })
 

package/src/Tabs/use-tab-action.ts

@@ -0,0 +1,27 @@
+import type { Ref } from 'react'
+import { useEffect, useRef } from 'react'
+import type { TabsActions } from '@material-ui/core'
+
+/*
+ * MuiTabs break when the size of a tab changes without rendering with React.
+ * This issue happens when the font is loaded after the initial render of the component.
+ * To solve this issue, we imperatively update the indicator and scroll buttons when it happens.
+ */
+const useTabAction = (): Ref<TabsActions> => {
+  const ref = useRef<TabsActions>(null)
+
+  useEffect(() => {
+    const listener = () => {
+      ref.current?.updateIndicator()
+      ref.current?.updateScrollButtons()
+    }
+
+    window.addEventListener('load', listener)
+
+    return () => window.removeEventListener('load', listener)
+  }, [])
+
+  return ref
+}
+
+export default useTabAction

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './TabScrollButton'
 export * from './Tabs'
 export * from './Tab'
 export * from './TabDescription'

package/dist-package/src/Tabs/TabsContext.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export declare type TabsValueType = string | number | null;
-export interface TabsContextValue {
-    value: TabsValueType;
-    onChange: (event: React.ChangeEvent<{}>, value: TabsValueType) => void;
-    orientation: 'horizontal' | 'vertical';
-    variant: 'scrollable' | 'fullWidth';
-}
-export declare const TabsContext: React.Context<TabsContextValue>;
-export declare const useTabsContext: () => TabsContextValue;
-//# sourceMappingURL=TabsContext.d.ts.map

package/dist-package/src/Tabs/TabsContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabsContext.d.ts","sourceRoot":"","sources":["../../../src/Tabs/TabsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,oBAAY,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;AAElD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACtE,WAAW,EAAE,YAAY,GAAG,UAAU,CAAA;IACtC,OAAO,EAAE,YAAY,GAAG,WAAW,CAAA;CACpC;AAED,eAAO,MAAM,WAAW,iCAKtB,CAAA;AAEF,eAAO,MAAM,cAAc,wBAQ1B,CAAA"}

package/dist-package/src/Tabs/TabsContext.js

@@ -1,15 +0,0 @@
-import React from 'react';
-export const TabsContext = React.createContext({
-    value: null,
-    onChange: () => { },
-    orientation: 'horizontal',
-    variant: 'scrollable',
-});
-export const useTabsContext = () => {
-    const context = React.useContext(TabsContext);
-    if (!context) {
-        throw new Error('useTabsContext must be used within a TabsProvider');
-    }
-    return context;
-};
-//# sourceMappingURL=TabsContext.js.map

package/dist-package/src/Tabs/TabsContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabsContext.js","sourceRoot":"","sources":["../../../src/Tabs/TabsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;IAC/D,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,WAAW,EAAE,YAAY;IACzB,OAAO,EAAE,YAAY;CACtB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA;IAE7C,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;KACrE;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/src/Tabs/TabsContext.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-
-export type TabsValueType = string | number | null
-
-export interface TabsContextValue {
-  value: TabsValueType
-  onChange: (event: React.ChangeEvent<{}>, value: TabsValueType) => void
-  orientation: 'horizontal' | 'vertical'
-  variant: 'scrollable' | 'fullWidth'
-}
-
-export const TabsContext = React.createContext<TabsContextValue>({
-  value: null,
-  onChange: () => {},
-  orientation: 'horizontal',
-  variant: 'scrollable',
-})
-
-export const useTabsContext = () => {
-  const context = React.useContext(TabsContext)
-
-  if (!context) {
-    throw new Error('useTabsContext must be used within a TabsProvider')
-  }
-
-  return context
-}