v1.0.6

README.md

@@ -1,9 +1,12 @@
 # MUI Tabs
 
-[![License MIT](https://img.shields.io/badge/licence-MIT-blue.svg)](https://github.com/bilaleren/mui-tabs/blob/master/LICENCE)
 [![NPM](https://img.shields.io/npm/v/mui-tabs.svg)](https://www.npmjs.com/package/mui-tabs)
-[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-[![npm downloads](https://img.shields.io/npm/dt/mui-tabs.svg)](#installation)
+![](https://badgen.net/npm/license/mui-tabs)
+![](https://badgen.net/packagephobia/install/mui-tabs)
+![](https://badgen.net/bundlephobia/min/mui-tabs)
+![](https://badgen.net/bundlephobia/minzip/mui-tabs)
+![](https://badgen.net/npm/dw/mui-tabs)
+![](https://badgen.net/npm/dm/mui-tabs)
 
 This package was developed based on the [Material UI Tabs](https://mui.com/components/tabs/#main-content) component. [See example](https://bilaleren.github.io/mui-tabs).
 

package.json

@@ -1,13 +1,14 @@
 {
   "name": "mui-tabs",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "private": true,
   "description": "Material UI tabs for React and React Native projects.",
   "author": "Bilal Eren",
   "license": "MIT",
-  "repository": "https://github.com/bilaleren/mui-tabs.git",
-  "main": "index.js",
+  "main": "./index.js",
+  "module": "./esm/index.js",
   "homepage": "https://bilaleren.github.io/mui-tabs",
+  "repository": "https://github.com/bilaleren/mui-tabs.git",
   "engines": {
     "node": ">=10"
   },

packages/utils/src/useIsFocusVisible.ts

@@ -168,6 +168,7 @@ function useIsFocusVisible(): UseIsFocusVisibleResult {
       isFocusVisibleRef.current = true
       return true
     }
+
     return false
   }
 

packages/web/src/RippleButton/Ripple.tsx

@@ -33,9 +33,7 @@ const Ripple: React.FC<RippleProps> = (props: RippleProps) => {
     className,
     classes.ripple,
     classes.rippleVisible,
-    {
-      [classes.ripplePulsate]: pulsate
-    }
+    pulsate && classes.ripplePulsate
   )
 
   const rippleStyles = {
@@ -45,10 +43,11 @@ const Ripple: React.FC<RippleProps> = (props: RippleProps) => {
     left: -(rippleSize / 2) + rippleX
   }
 
-  const childClassName = clsx(classes.child, {
-    [classes.childLeaving]: leaving,
-    [classes.childPulsate]: pulsate
-  })
+  const childClassName = clsx(
+    classes.child,
+    leaving && classes.childLeaving,
+    pulsate && classes.childPulsate
+  )
 
   if (!inProp && !leaving) {
     setLeaving(true)
@@ -58,11 +57,8 @@ const Ripple: React.FC<RippleProps> = (props: RippleProps) => {
     if (!inProp && onExited != null) {
       // react-transition-group#onExited
       const timeoutId = setTimeout(onExited, timeout)
-      return () => {
-        clearTimeout(timeoutId)
-      }
+      return () => clearTimeout(timeoutId)
     }
-    return undefined
   }, [onExited, inProp, timeout])
 
   return (

packages/web/src/RippleButton/RippleButton.tsx

@@ -4,9 +4,9 @@ import TouchRipple, {
   TouchRippleRefAttributes
 } from './TouchRipple'
 import clsx from 'clsx'
+import TabButton, { TabButtonProps } from '../TabButton'
 import useForkRef from '@mui-tabs/utils/src/useForkRef'
 import useEventCallback from '@mui-tabs/utils/src/useEventCallback'
-import TabButton, { TabButtonProps } from '../TabButton'
 import useIsFocusVisible from '@mui-tabs/utils/src/useIsFocusVisible'
 
 export interface RippleButtonActionRefAttributes {

packages/web/src/RippleButton/TouchRipple.test.tsx

@@ -14,42 +14,45 @@ const noop = () => {}
 describe('<TouchRipple />', () => {
   const { clock, render } = createRenderer()
 
-  function renderTouchRipple(other?: TouchRippleProps) {
+  function createTouchRippleRenderer(props?: TouchRippleProps) {
     const touchRippleRef = React.createRef<TouchRippleRefAttributes>()
 
     const { container, unmount } = render(
       <TouchRipple
+        {...props}
         ref={touchRippleRef}
         classes={{
+          child: 'child',
           ripple: 'ripple',
+          childLeaving: 'child-leaving',
           rippleVisible: 'ripple-visible',
-          child: 'child',
-          childLeaving: 'child-leaving'
+          ...props?.classes
         }}
-        {...other}
       />
     )
 
     return {
       instance: touchRippleRef.current,
+      unmount,
+      queryRipple() {
+        return container.querySelector<HTMLElement>('.ripple')
+      },
       queryAllActiveRipples() {
         return container.querySelectorAll(
           '.ripple-visible .child:not(.child-leaving)'
         )
       },
       queryAllStoppingRipples() {
         return container.querySelectorAll('.ripple-visible .child-leaving')
-      },
-      queryRipple() {
-        return container.querySelector<HTMLElement>('.ripple')
-      },
-      unmount
+      }
     }
   }
 
   describe('prop: center', () => {
     it('should compute the right ripple dimensions', () => {
-      const { instance, queryRipple } = renderTouchRipple({ center: true })
+      const { instance, queryRipple } = createTouchRippleRenderer({
+        center: true
+      })
 
       act(() => {
         instance!.start(
@@ -68,7 +71,7 @@ describe('<TouchRipple />', () => {
 
   it('should create individual ripples', () => {
     const { instance, queryAllActiveRipples, queryAllStoppingRipples } =
-      renderTouchRipple()
+      createTouchRippleRenderer()
 
     expect(queryAllActiveRipples()).to.have.lengthOf(0)
     expect(queryAllStoppingRipples()).to.have.lengthOf(0)
@@ -119,7 +122,7 @@ describe('<TouchRipple />', () => {
   describe('creating unique ripples', () => {
     it('should create a ripple', () => {
       const { instance, queryAllActiveRipples, queryAllStoppingRipples } =
-        renderTouchRipple()
+        createTouchRippleRenderer()
 
       act(() => {
         instance!.start(
@@ -138,7 +141,7 @@ describe('<TouchRipple />', () => {
 
     it('should ignore a mousedown event after a touchstart event', () => {
       const { instance, queryAllActiveRipples, queryAllStoppingRipples } =
-        renderTouchRipple()
+        createTouchRippleRenderer()
 
       act(() => {
         instance!.start({ type: 'touchstart' }, { callback: noop })
@@ -155,7 +158,7 @@ describe('<TouchRipple />', () => {
         queryAllActiveRipples,
         queryAllStoppingRipples,
         queryRipple
-      } = renderTouchRipple({
+      } = createTouchRippleRenderer({
         center: true
       })
       const clientX = 1
@@ -180,7 +183,7 @@ describe('<TouchRipple />', () => {
 
     it('should delay the display of the ripples', () => {
       const { instance, queryAllActiveRipples, queryAllStoppingRipples } =
-        renderTouchRipple()
+        createTouchRippleRenderer()
 
       expect(queryAllActiveRipples()).to.have.lengthOf(0)
       expect(queryAllStoppingRipples()).to.have.lengthOf(0)
@@ -212,7 +215,7 @@ describe('<TouchRipple />', () => {
 
     it('should trigger the ripple for short touch interactions', () => {
       const { instance, queryAllActiveRipples, queryAllStoppingRipples } =
-        renderTouchRipple()
+        createTouchRippleRenderer()
 
       expect(queryAllActiveRipples()).to.have.lengthOf(0)
       expect(queryAllStoppingRipples()).to.have.lengthOf(0)
@@ -247,7 +250,7 @@ describe('<TouchRipple />', () => {
 
     it('should interrupt the ripple schedule', () => {
       const { instance, queryAllActiveRipples, queryAllStoppingRipples } =
-        renderTouchRipple()
+        createTouchRippleRenderer()
 
       expect(queryAllActiveRipples()).to.have.lengthOf(0)
       expect(queryAllStoppingRipples()).to.have.lengthOf(0)
@@ -270,7 +273,7 @@ describe('<TouchRipple />', () => {
     })
 
     it('should not leak on multi-touch', function () {
-      const { instance, unmount } = renderTouchRipple()
+      const { instance, unmount } = createTouchRippleRenderer()
 
       instance!.start({ type: 'touchstart', touches: [{}] }, { callback: noop })
       instance!.start({ type: 'touchstart', touches: [{}] }, { callback: noop })

packages/web/src/RippleButton/TouchRipple.tsx

@@ -89,24 +89,24 @@ const TouchRipple = React.forwardRef<
         <Ripple
           key={nextKey.current}
           classes={{
-            ripple: clsx(classes.ripple, touchRippleClasses.ripple),
-            rippleVisible: clsx(
+            ripple: [classes.ripple, touchRippleClasses.ripple],
+            rippleVisible: [
               classes.rippleVisible,
               touchRippleClasses.rippleVisible
-            ),
-            ripplePulsate: clsx(
+            ],
+            ripplePulsate: [
               classes.ripplePulsate,
               touchRippleClasses.ripplePulsate
-            ),
-            child: clsx(classes.child, touchRippleClasses.child),
-            childLeaving: clsx(
+            ],
+            child: [classes.child, touchRippleClasses.child],
+            childLeaving: [
               classes.childLeaving,
               touchRippleClasses.childLeaving
-            ),
-            childPulsate: clsx(
+            ],
+            childPulsate: [
               classes.childPulsate,
               touchRippleClasses.childPulsate
-            )
+            ]
           }}
           timeout={RIPPLE_TIMEOUT}
           pulsate={pulsate}

packages/web/src/RippleButton/touchRippleClasses.ts

@@ -1,11 +1,13 @@
+import type { ClassValue } from 'clsx'
+
 export interface TouchRippleClasses {
-  root: string
-  child: string
-  ripple: string
-  rippleVisible: string
-  ripplePulsate: string
-  childLeaving: string
-  childPulsate: string
+  root: ClassValue
+  child: ClassValue
+  ripple: ClassValue
+  rippleVisible: ClassValue
+  ripplePulsate: ClassValue
+  childLeaving: ClassValue
+  childPulsate: ClassValue
 }
 
 const touchRippleClasses: TouchRippleClasses = {

packages/web/src/Tab/tabClasses.ts

@@ -1,4 +1,4 @@
-import type { ClassArray } from 'clsx'
+import type { ClassValue } from 'clsx'
 import type { IconPosition } from '../types'
 import capitalize from '@mui-tabs/utils/src/capitalize'
 
@@ -13,17 +13,17 @@ export interface TabOwnerState {
 }
 
 export interface TabClasses {
-  root: string
-  labelIcon: string
-  fullWidth: string
-  selected: string
-  disabled: string
-  iconWrapper: string
-  flexColumn: string
-  iconPositionTop: string
-  iconPositionBottom: string
-  iconPositionStart: string
-  iconPositionEnd: string
+  root: ClassValue
+  labelIcon: ClassValue
+  fullWidth: ClassValue
+  selected: ClassValue
+  disabled: ClassValue
+  iconWrapper: ClassValue
+  flexColumn: ClassValue
+  iconPositionTop: ClassValue
+  iconPositionBottom: ClassValue
+  iconPositionStart: ClassValue
+  iconPositionEnd: ClassValue
 }
 
 const tabClasses: TabClasses = {
@@ -42,16 +42,17 @@ const tabClasses: TabClasses = {
 
 export type UseTabClassesReturn = Record<
   keyof Pick<TabClasses, 'root' | 'iconWrapper'>,
-  ClassArray
+  ClassValue
 >
 
-export const useTabClasses = (
-  ownerState: TabOwnerState
-): UseTabClassesReturn => {
+export function useTabClasses(ownerState: TabOwnerState): UseTabClassesReturn {
   const { icon, label, iconPosition, selected, disabled, fullWidth, classes } =
     ownerState
 
-  const positionSuffix = iconPosition ? capitalize(iconPosition) : undefined
+  const iconPositionKey =
+    icon && iconPosition
+      ? (`iconPosition${capitalize(iconPosition)}` as keyof TabClasses)
+      : undefined
 
   return {
     root: [
@@ -69,11 +70,10 @@ export const useTabClasses = (
     ],
     iconWrapper: [
       tabClasses.iconWrapper,
-      icon &&
-        positionSuffix && [
-          tabClasses[`iconPosition${positionSuffix}` as keyof TabClasses],
-          classes[`iconPosition${positionSuffix}` as keyof TabClasses]
-        ],
+      iconPositionKey && [
+        tabClasses[iconPositionKey],
+        classes[iconPositionKey]
+      ],
       classes.iconWrapper
     ]
   }

packages/web/src/Tabs/TabScrollButton.tsx

@@ -53,6 +53,7 @@ const TabScrollButton = React.forwardRef<
   } = props
 
   const vertical = orientation === 'vertical'
+  const IconComponent = direction === 'left' ? ChevronLeft : ChevronRight
 
   return (
     <ButtonComponent
@@ -66,7 +67,7 @@ const TabScrollButton = React.forwardRef<
       )}
       disabled={disabled}
     >
-      {direction === 'left' ? <ChevronLeft /> : <ChevronRight />}
+      <IconComponent />
     </ButtonComponent>
   )
 })