@veracity/vui 2.17.1 → 2.17.2-beta.1

package/src/tabs/tabs.tsx

@@ -4,7 +4,7 @@ import { styled, useStyleConfig, vui } from '../core'
 import { P } from '../p'
 import { cs } from '../utils'
 import Tab from './tab'
-import { TabProps, TabsProps } from './tabs.types'
+import { TabId, TabIndexProps, TabProps, TabsProps } from './tabs.types'
 import TabsNavBar from './tabsNavBar'
 import { useTabsState } from './useTabsState'
 
@@ -16,22 +16,24 @@ export const TabsBase = styled.divBox<TabsProps>`
  * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**
  */
 export const Tabs = vui<'div', TabsProps>((props, ref) => {
-  const { activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props
+  const { actions, activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props
   const styles = useStyleConfig('Tabs', props)
   const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(
     'fadeIn',
-    activeTabId
+    0
   )
 
   useEffect(() => {
-    const t: TabProps[] = []
+    const _tabs: TabIndexProps[] = []
     if (children) {
       ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {
         if (child?.props?.title)
-          t.push({
-            id: index,
+          _tabs.push({
+            id: child.props.id,
+            index: index,
             title: child.props.title,
             icon: child.props.icon,
+            className: child.props.className,
             children: child.props.children,
             disabled: child.props.disabled,
             onClick: child.props.onClick,
@@ -39,18 +41,19 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
           })
       })
     }
-    setTabs(t)
-    if (activeTabId !== undefined && tabs?.[activeTabId]) {
-      setActiveTabIndex(activeTabId)
+    setTabs(_tabs)
+    if (activeTabId !== undefined) {
+      const tab = _tabs.find((t: TabIndexProps) => t?.id === activeTabId || t?.index === activeTabId)
+      if (tab?.index) setActiveTabIndex(tab.index)
     }
   }, [children, activeTabId])
 
-  const onNavItemClick = (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
-    const tab = tabs.find(t => t.id === id)
-    if (tab?.children !== undefined) {
-      setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight')
-      setActiveTabIndex(id)
-      onTabClick?.(id)
+  const onNavItemClick = (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
+    const tab = tabs.find(t => t.index === tabIndex)
+    if (tab?.children !== undefined && tab?.index !== undefined) {
+      setAnimationDirection(tab.index < activeTabIndex ? 'fadeLeft' : 'fadeRight')
+      setActiveTabIndex(tab.index)
+      onTabClick?.(tab.id || tab.index)
     }
     tab?.onClick?.(e)
   }
@@ -61,9 +64,10 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
     <TabsBase className={cs('vui-tabs', className)} ref={ref} {...styles.container} {...rest}>
       {!!tabs?.length && (
         <TabsNavBar
+          actions={actions}
           activeNavItem={activeTabIndex}
           animationDirection={animationDirection}
-          onNavItemClick={(id, e) => onNavItemClick(id, e)}
+          onNavItemClick={(tabIndex, e) => onNavItemClick(tabIndex, e)}
           showBorder={showBorder}
           size={size}
           tabs={tabs}

package/src/tabs/tabs.types.ts

@@ -6,22 +6,23 @@ import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn'
-
+export type TabId = string | number
 export type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl'
 export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined
 
 export type TabsProps = SystemProps &
   ThemingProps<'Tabs'> &
   ChildrenProp & {
-    activeTabId?: number
+    actions?: ReactNode
+    activeTabId?: TabId
     showBorder?: boolean
-    onTabClick?: (id: number) => void
+    onTabClick?: (tabId: TabId) => void
   }
 
 export type TabProps = SystemProps &
   ChildrenProp & {
     icon?: IconProp
-    id?: number
+    id?: TabId
     title: ReactNode
     disabled?: boolean
     className?: string
@@ -30,10 +31,15 @@ export type TabProps = SystemProps &
     onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
   }
 
+export type TabIndexProps = TabProps & {
+  index?: number
+}
+
 export type TabNavBarProps = {
-  tabs: TabProps[]
-  onNavItemClick: (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void
-  activeNavItem?: number
+  actions?: ReactNode
+  tabs: TabIndexProps[]
+  onNavItemClick: (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void
+  activeNavItem?: TabId
   animationDirection?: AnimationDirection
   showBorder?: boolean
   size?: TabsSize

package/src/tabs/tabsNavBar.tsx

@@ -7,13 +7,13 @@ import { List, ListItem } from '../list'
 import { TagButton } from '../tag'
 import { cs, Dict } from '../utils'
 import { colors, iconSizeMapper } from './consts'
-import { NavBarIconSize, TabNavBarProps, TabProps } from './tabs.types'
+import { NavBarIconSize, TabIndexProps, TabNavBarProps } from './tabs.types'
 import theme from './theme'
 
 const { activeBg, border, color, hover, main } = colors
 
 export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
-  const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props
+  const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props
   const iconSize: NavBarIconSize = iconSizeMapper?.[size as string] || 'md'
 
   const { sizes } = (theme as Dict) ?? {}
@@ -24,10 +24,11 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
   const py = sizes[size ?? 'md'].tabsNavBar.py
   const iconMarginRight = size === 'xxl' ? '16px' : '8px'
 
-  const isActive = (tab: TabProps) => !tab.disabled && tab.id === activeNavItem
+  const isActive = (tab: TabIndexProps) => !tab.disabled && tab?.index === activeNavItem
 
   return (
     <List
+      alignItems="end"
       borderBottom={showBorder ? `1px solid ${border}` : 'none'}
       className={cs('vui-tabsNavBar')}
       display="flex"
@@ -48,8 +49,8 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
           fontWeight={500}
           h={h}
           hoverBg={tab.disabled ? undefined : hover}
-          key={tab.id}
-          onClick={e => onNavItemClick?.(tab.id || 0, e)}
+          key={tab.index}
+          onClick={e => onNavItemClick?.(tab.index || 0, e)}
           position="relative"
           px="16px"
           py={py}
@@ -84,6 +85,11 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
           )}
         </ListItem>
       ))}
+      {!!actions && (
+        <Box ml="auto" px={0.75} py={0.5}>
+          {actions}
+        </Box>
+      )}
     </List>
   )
 })

package/src/tabs/useTabsState.ts

@@ -1,10 +1,10 @@
 import { useState } from 'react'
 
-import { AnimationDirection, TabProps } from './tabs.types'
+import { AnimationDirection, TabIndexProps } from './tabs.types'
 
-export const useTabsState = (initialAnimation: AnimationDirection, activeTabId?: number) => {
-  const [tabs, setTabs] = useState<TabProps[]>([])
-  const [activeTabIndex, setActiveTabIndex] = useState<number>(activeTabId ?? 0)
+export const useTabsState = (initialAnimation: AnimationDirection, tabIndex?: number) => {
+  const [tabs, setTabs] = useState<TabIndexProps[]>([])
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(tabIndex ?? 0)
   const [animationDirection, setAnimationDirection] = useState<AnimationDirection>(initialAnimation)
 
   return { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection }

package/src/theme/components.ts

@@ -37,7 +37,7 @@ import Select from '../select/theme'
 import Sidemenu from '../sidemenu/theme'
 import Skeleton from '../skeleton/theme'
 import Spinner from '../spinner/theme'
-import StepIndicator from '../step/theme'
+import StepIndicator from '../stepIndicator/theme'
 import StepperHorizontal from '../stepperHorizontal/theme'
 import StepperVertical from '../stepperVertical/theme'
 import Switch from '../switch/theme'

package/dist/cjs/step/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/step/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,cAAc,iBAAiB,CAAA"}

package/dist/cjs/step/stepIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepIndicator.d.ts","sourceRoot":"","sources":["../../../src/step/stepIndicator.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AASzD;;GAEG;AACH,eAAO,MAAM,aAAa,2DAmCxB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/cjs/step/stepIndicatorTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepIndicatorTypes.d.ts","sourceRoot":"","sources":["../../../src/step/stepIndicatorTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,YAAY,CAAC,eAAe,CAAC,GAAG;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA"}

package/dist/cjs/step/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/step/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,wBAKC"}

package/dist/esm/step/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/step/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,cAAc,iBAAiB,CAAA"}

package/dist/esm/step/stepIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepIndicator.d.ts","sourceRoot":"","sources":["../../../src/step/stepIndicator.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AASzD;;GAEG;AACH,eAAO,MAAM,aAAa,2DAmCxB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/esm/step/stepIndicatorTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepIndicatorTypes.d.ts","sourceRoot":"","sources":["../../../src/step/stepIndicatorTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,YAAY,CAAC,eAAe,CAAC,GAAG;IAC9B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA"}

package/dist/esm/step/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/step/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,wBAKC"}