@veracity/vui 2.29.1 → 2.29.2

package/src/range/range.types.ts

@@ -1,5 +1,3 @@
-import { ReactNode } from 'react'
-
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 

package/src/select/selectButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Button, { LineButton } from '../button'
 import { useStyleConfig, vui } from '../core'
 import { PopoverTrigger } from '../popover'

package/src/select/selectContent.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import { PopoverContent } from '../popover'
 import { cs } from '../utils'

package/src/select/selectGroup.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui, VuiComponent } from '../core'
 import { List, ListDivider, ListHeading } from '../list'
 import { cs } from '../utils'

package/src/sidemenu/consts.ts

@@ -1 +1,3 @@
-export const expandedWidth = 64
+export const collapsedWidth = 52
+
+export const expandedWidth = 240

package/src/sidemenu/sidemenu.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 import Box from '../box'
 import Button from '../button'
 import { useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
 import { cs, filterUndefined, isActivePath } from '../utils'
-import { expandedWidth } from './consts'
+import { collapsedWidth, expandedWidth } from './consts'
 import { SidemenuProvider } from './context'
 import { SidemenuItemProps, SidemenuProps } from './sidemenu.types'
 import SidemenuItem from './sidemenuItem'
@@ -21,7 +21,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
     isSticky = false,
     size,
     variant,
-    width = 280,
+    width = expandedWidth,
     onNavigate,
     ...rest
   } = props
@@ -42,7 +42,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
 
   const onToggle = () => setIsExpandedHorizontally(!isExpandedHorizontally)
 
-  const w = isExpandedHorizontally ? width : expandedWidth
+  const w = isExpandedHorizontally ? width : collapsedWidth
   const icon = `falArrow${isExpandedHorizontally ? 'Left' : 'Right'}`
   const justifyContent = isExpandedHorizontally ? 'flex-end' : 'center'
 
@@ -67,7 +67,15 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
         {...styles.container}
         {...rest}
       >
-        <Box flexDirection="column" flexGrow={1} overflowX="hidden" overflowY="auto" w="100%">
+        <Box
+          flexDirection="column"
+          flexGrow={1}
+          justifyContent="flex-start"
+          minW={expandedWidth}
+          overflowX="hidden"
+          overflowY="auto"
+          w="100%"
+        >
           {items
             ? items?.map?.((item: SidemenuItemProps, key: number) => (
                 <SidemenuItem
@@ -86,6 +94,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
             justifyContent={justifyContent}
             minH={size === 'lg' ? '56px' : '40px'}
             onClick={onToggle}
+            pl={0}
             size="md"
             variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}
             w="100%"

package/src/sidemenu/sidemenu.types.ts

@@ -26,7 +26,7 @@ export type SidemenuItemProps = BoxProps & {
   /** Children */
   children?: ReactNode
   /** Custom class name */
-  icon: IconProp
+  icon?: IconProp
   /** Icon size @default md  */
   iconSize?: 'md' | 'sm'
   /** Whether the item is active */

package/src/sidemenu/sidemenuItem.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useEffect } from 'react'
+import { MouseEvent, useEffect } from 'react'
 
 import Box from '../box'
 import Button from '../button'
@@ -7,6 +7,7 @@ import Icon from '../icon'
 import { Popover } from '../popover'
 import T from '../t'
 import { cs } from '../utils'
+import { collapsedWidth, expandedWidth } from './consts'
 import { SidemenuItemProps } from './sidemenu.types'
 import useSidemenuItem from './useSidemenuItem'
 
@@ -19,6 +20,8 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     iconSize = 'md',
     isActive,
     isExpanded = true,
+    pl = 0,
+    py = 0,
     onClick,
     onCollapse,
     onExpand,
@@ -36,8 +39,8 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
 
   const hasChildrenExpanded = !!children && isExpandedHorizontally
 
-  const innerContent = (
-    <Box centerV px={2} py={1} w="100%" whiteSpace="pre">
+  const InnerContent = () => (
+    <Box centerV px={1.5} py={1} w="100%" whiteSpace="pre">
       <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />
       <T isTruncated ml={2}>
         {title}
@@ -62,7 +65,8 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     h: 'auto',
     justifyContent: 'space-between',
     onClick: () => onClick?.(),
-    p: 0,
+    pl,
+    py,
     size: 'md',
     variant: isDark ? 'tertiaryLight' : 'tertiaryDark',
     w: '100%',
@@ -75,13 +79,13 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
   return (
     <Box flexDirection="column" ref={ref} w="100%">
       {!hasChildrenExpanded && children ? (
-        <Popover offset={[0, 0]} placement="right-start" trigger="mouseenter">
+        <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement="right-start" trigger="mouseenter">
           <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>
             <Box {...buttonStyles} borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}>
-              {innerContent}
+              <InnerContent />
             </Box>
           </Popover.Trigger>
-          <Popover.Content shadow="none">
+          <Popover.Content elevation="none">
             <Box flexDirection="column" justifyContent="start" w="100%">
               {children}
             </Box>
@@ -89,13 +93,12 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
         </Popover>
       ) : (
         <Button className={cs('vui-sidemenu-item', className)} {...buttonStyles}>
-          {innerContent}
+          <InnerContent />
           {hasChildrenExpanded && (
             <Button
               aria-label={isExpandedVertically ? 'Collapse' : 'Expand'}
               className="vui-sidemenu-item-expand"
               icon={isExpandedVertically ? 'falChevronUp' : 'falChevronDown'}
-              mr={1}
               onClick={toggle}
               size="sm"
               variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}

package/src/sidemenu/sidemenuTop.tsx

@@ -1,23 +1,24 @@
-import React from 'react'
-
 import { Box } from '../box'
 import { omitThemingProps, useStyleConfig } from '../core'
 import { cs } from '../utils'
-import { useSidemenuContext } from './context'
+import { collapsedWidth } from './consts'
 import { SidemenuTopProps } from './sidemenu.types'
 
 /** Top container. */
 export const SidemenuTop = (props: SidemenuTopProps) => {
   const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props)
   const styles = useStyleConfig('Sidemenu', props)
-  const { isExpandedHorizontally } = useSidemenuContext()
 
   if (!leftSlot && !rightSlot) return null
 
   return (
     <Box className={cs('vui-sidemenu-top', className)} mb={1} w="100%" {...styles.sidemenuTop} {...rest}>
-      {!!leftSlot && leftSlot}
-      {!!rightSlot && isExpandedHorizontally && rightSlot}
+      {!!leftSlot && (
+        <Box alignItems="center" className="vui-sidemenu-top-left" minW={collapsedWidth}>
+          {leftSlot}
+        </Box>
+      )}
+      {!!rightSlot && <Box className="vui-sidemenu-top-left">{rightSlot}</Box>}
     </Box>
   )
 }

package/src/skeleton/skeleton.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { omitThemingProps, styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { cs, filterUndefined } from '../utils'
 import { SkeletonProps } from './skeleton.types'

package/src/spinner/spinner.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../box'
 import { styled, useStyleConfig, vui } from '../core'
 import T from '../t'

package/src/stepperHorizontal/stepHorizontalTitle.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Box } from '../box'
 import { vui } from '../core'
 import { cs } from '../utils'

package/src/stepperHorizontal/stepperHorizontal.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { useStyleConfig, vui } from '../core'
 import { cs, filterUndefined } from '../utils'

package/src/stepperVertical/stepVertical.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Box } from '../box'
 import { styled, vui } from '../core'
 import { StepIndicator } from '../stepIndicator'

package/src/stepperVertical/stepVerticalTail.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Box } from '../box'
 import { vui } from '../core'
 import { cs } from '../utils'

package/src/stepperVertical/stepVerticalTitle.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Box } from '../box'
 import { vui } from '../core'
 import { cs } from '../utils'

package/src/stepperVertical/stepperVertical.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { useStyleConfig, vui } from '../core'
 import { cs, filterUndefined } from '../utils'

package/src/switch/switchButton.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import { ChangeEvent, cs, filterUndefined, FocusEvent } from '../utils'

package/src/switch/switchLabel.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import T, { TProps } from '../t'
 import { cs } from '../utils'

package/src/switch/switchMain.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { cs, filterUndefined, isReactText } from '../utils'

package/src/table/table.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { css, styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { compareBy, cs } from '../utils'

package/src/table/tableSortIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import { Icon } from '../icon'
 import { cs } from '../utils'

package/src/table/tbody.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { useTableContext } from './context'

package/src/table/tfoot.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { useTableContext } from './context'

package/src/table/th.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../box'
 import { styled, useStyleConfig, vui } from '../core'
 import { cs, MouseEvent, useCallbackRef } from '../utils'

package/src/table/thead.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { useTableContext } from './context'

package/src/tabs/tabs.tsx

@@ -1,4 +1,4 @@
-import React, { Children, ReactElement, useEffect } from 'react'
+import { Children, ReactElement, useEffect } from 'react'
 
 import { styled, useStyleConfig, vui } from '../core'
 import { P } from '../p'

package/src/tabs/tabsNavBar.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../box'
 import { vui } from '../core'
 import { Icon } from '../icon'

package/src/tag/tag.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { cs, filterUndefined, isReactText, isString } from '../utils'

package/src/tag/tag.types.ts

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { IconProp } from '../icon'
 import { SystemProps, TypographyProps } from '../system'
 import { ThemingProps } from '../theme'

package/src/tag/tagButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Button, { ButtonProps } from '../button'
 import { useStyleConfig, vui } from '../core'
 import { cs } from '../utils'

package/src/tag/tagIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import Icon, { IconProps } from '../icon'
 import { cs } from '../utils'

package/src/tag/tagText.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import T, { TProps } from '../t'
 import { cs } from '../utils'

package/src/toast/toast.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { memo } from 'react'
 
 import { Box } from '../box'
 import { useVuiContext, v } from '../core'
@@ -36,4 +36,4 @@ const Toaster = () => {
   )
 }
 
-export default React.memo(Toaster)
+export default memo(Toaster)

package/src/tooltip/tooltipContent.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../box'
 import { bg, borderRaduis, boxShadow } from './consts'
 import { TooltipProps } from './tooltip.types'

package/src/tree/tree.tsx

@@ -1,4 +1,4 @@
-import React, { Children, ReactElement, useEffect, useMemo } from 'react'
+import { Children, ReactElement, useEffect, useMemo } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { List } from '../list'

package/src/tree/treeIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import Icon, { IconProps } from '../icon'
 import { cs } from '../utils'

package/src/tree/treeItem.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Box } from '../box'
 import { styled, useStyleConfig, vui } from '../core'
@@ -81,7 +81,7 @@ export const TreeItem = vui<'li', TreeItemProps>((props, ref) => {
   const hoverTreeItem = (e: Event, type: string) => {
     const target = e.target as HTMLDivElement
 
-    let parentDiv = undefined
+    let parentDiv: HTMLDivElement | undefined = undefined
 
     if (target.classList.contains('vui-treeItem-permanent')) {
       parentDiv = target
@@ -90,12 +90,12 @@ export const TreeItem = vui<'li', TreeItemProps>((props, ref) => {
       parentDiv = parentLi?.getElementsByClassName('vui-treeItem-permanent')[0] as HTMLDivElement
     }
 
-    const isDivActive = parentDiv.classList.contains('vui-treeItem-active') ? true : false
+    const isDivActive = parentDiv?.classList.contains('vui-treeItem-active') ? true : false
 
     // translate the list-item style over to the div
-    if (parentDiv.classList.contains('vui-treeItem-permanent')) {
+    if (parentDiv?.classList.contains('vui-treeItem-permanent')) {
       // is it a fist level item?
-      if (parentDiv.classList.contains('vui-treeItem-firstLevel')) {
+      if (parentDiv?.classList.contains('vui-treeItem-firstLevel')) {
         if (type === 'over') {
           parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.firstLevelItem?.hoverBg || 'transparent')
         }

package/src/tree/treeText.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import T, { TProps } from '../t'
 import { cs, ellipsisOverflow } from '../utils'

package/src/tutorial/tutorial.tsx

@@ -1,5 +1,5 @@
 import Tippy from '@tippyjs/react'
-import React, { JSXElementConstructor, ReactElement } from 'react'
+import { JSXElementConstructor, ReactElement } from 'react'
 
 import { cs } from '../utils'
 import { CloseEvent, TutorialProps } from './tutorial.types'

package/src/tutorial/tutorialCard.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Box, Button, Card, H4, Icon } from '../index'
 import { tutorialColors } from './consts'

package/src/tutorial/tutorialStep.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Box, H5, v } from '../index'
 import { tutorialColors } from './consts'
 import { TutorialStepProps } from './tutorial.types'

package/src/utils/assertion.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import { isValidElement } from 'react'
 
 import { Dict } from './types'
 
@@ -15,7 +15,7 @@ export function isFunction<T extends Function = Function>(value: any): value is
 
 /** Is value JSX / React Element */
 export function isJsx<T = JSX.Element>(value: any): value is T {
-  return React.isValidElement(value)
+  return isValidElement(value)
 }
 
 /** Is value a number. */
@@ -25,7 +25,7 @@ export function isNumber(value: any): value is number {
 
 /** Is value a regular object (functions, arrays and React elements excluded). */
 export function isObject<T = Dict>(value: any): value is T {
-  return !!value && typeof value === 'object' && !isFunction(value) && !isArray(value) && !React.isValidElement(value)
+  return !!value && typeof value === 'object' && !isFunction(value) && !isArray(value) && !isValidElement(value)
 }
 
 /** Is value a valid ReactText - string or number. */

package/src/utils/react.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-
 import React, {
   DependencyList,
   Dispatch,
@@ -30,7 +28,7 @@ export function assignRef<T = any>(ref: ReactRef<T> | undefined, value: T) {
   }
 
   try {
-    // @ts-ignore - TS complains about 'current' being read-only
+    // @ts-expect-error TS complains about 'current' being read-only
     ref.current = value
   } catch (error) {
     throw new Error(`Cannot assign value '${value}' to ref '${ref}'`)

package/src/utils/types.ts

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react'
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react'
 
 /** Type for a a no-op function stub. */
 export type AnyFunction = (...args: any[]) => any