@veracity/vui 2.32.0 → 2.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.32.0",
+  "version": "2.33.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/calendar/calendar.styles.ts

@@ -53,11 +53,11 @@ export const CalendarItem = styled(Link)<ItemProps>`
   ${p => p.isHidden && isHidden}
   ${p => p.isToday && isToday}
   ${p => p.isDisabled && isDisabled}
-    ${p => p.isSelected && isSelected}
-    ${p => p.boundary && boundary}
-    ${p => p.current && current}
+  ${p => p.isSelected && isSelected}
+  ${p => p.boundary && boundary}
+  ${p => p.current && current}
 
-    &:hover {
+  &:hover {
     color: inherit;
     text-decoration: none;
 
@@ -70,7 +70,7 @@ export const CalendarItemsContainer = styled(Box)`
   column-gap: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(4, 62px);
+  grid-template-rows: repeat(4, 48px);
   justify-items: center;
   row-gap: 0;
 `

package/src/calendar/components/calendarHeader.tsx

@@ -32,7 +32,7 @@ export const CalendarHeader: FC<Props> = ({
     <Box className="vui-calendar-header-left">
       <TimeUnitHeader onSetTimeUnitMode={onSetTimeUnitMode} timeUnitMode={timeUnitMode} viewMonth={viewMonth} />
     </Box>
-    <Box className="vui-calendar-header-right" flex="1" justify="flex-end">
+    <Box className="vui-calendar-header-right" flex="1" justifyContent="right">
       <IconButton
         aria-label="previous"
         className="icon"

package/src/calendar/components/dayPicker.tsx

@@ -20,11 +20,15 @@ const DayItem = styled(CalendarItem)<ItemProps>`
   color: ${th.color('seaBlue.main')};
   display: inline-flex;
   align-items: center;
+
+  & > .vui-t {
+    margin-bottom: -3px;
+  }
 `
 
 const DaysContainer = styled(CalendarItemsContainer)`
-  grid-template-columns:     repeat(7, 1fr);
-  grid- template-rows: auto;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: auto;
 `
 
 export const DayPicker = ({ calendar, onSelectDay }: DayPickerProps) => (

package/src/calendar/components/monthPicker.tsx

@@ -16,6 +16,8 @@ export const MonthPicker = ({ calendar, onSelectMonth }: MonthPickerProps) => (
         key={item.date.getTime()}
         onClick={(!item.isDisabled && onSelectMonth && onSelectMonth(item.date)) || undefined}
         {...item}
+        alignContent="center"
+        textAlign="center"
       >
         {monthsShort[item.date.getUTCMonth()]}
       </MonthItem>

package/src/calendar/components/timeUnitHeader.tsx

@@ -21,24 +21,52 @@ type TimeUnitHeaderProps = {
  */
 export const TimeUnitHeader: FC<TimeUnitHeaderProps> = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
   return (
-    <Box center className={cs('vui-time-unit-header')} cursor="pointer" flex="1" justify="start">
+    <Box center className={cs('vui-time-unit-header')} cursor="pointer" flex="1" justifyItems="flex-start" gap="2px">
       {isDay(timeUnitMode) && (
         <>
-          <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('month')} variant="tertiaryDark">
+          <Button
+            fontSize={fontSize}
+            h={h}
+            onClick={() => onSetTimeUnitMode('month')}
+            variant="tertiaryDark"
+            px="6px"
+            minW="auto"
+          >
             {months[viewMonth.getUTCMonth()]}
           </Button>
-          <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('year')} variant="tertiaryDark">
+          <Button
+            fontSize={fontSize}
+            h={h}
+            onClick={() => onSetTimeUnitMode('year')}
+            variant="tertiaryDark"
+            px="6px"
+            minW="auto"
+          >
             {viewMonth.getUTCFullYear()}
           </Button>
         </>
       )}
       {isMonth(timeUnitMode) && (
-        <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('year')} variant="tertiaryDark">
+        <Button
+          fontSize={fontSize}
+          h={h}
+          onClick={() => onSetTimeUnitMode('year')}
+          variant="tertiaryDark"
+          px="6px"
+          minW="auto"
+        >
           {viewMonth.getUTCFullYear()}
         </Button>
       )}
       {isYear(timeUnitMode) && (
-        <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('day')} variant="tertiaryDark">
+        <Button
+          fontSize={fontSize}
+          h={h}
+          onClick={() => onSetTimeUnitMode('day')}
+          variant="tertiaryDark"
+          px="6px"
+          minW="auto"
+        >
           Year
         </Button>
       )}

package/src/calendar/components/yearPicker.tsx

@@ -14,6 +14,8 @@ export const YearPicker = ({ calendar, onSelectYear }: YearPickerProps) => (
         key={item.date.getTime()}
         onClick={(!item.isDisabled && onSelectYear?.(item.date)) || undefined}
         {...item}
+        alignContent="center"
+        textAlign="center"
       >
         {item.date.getUTCFullYear()}
       </YearItem>

package/src/calendar/hooks/useCalendar.ts

@@ -18,7 +18,7 @@ export const useCalendar = ({
   mode = 'exact',
   timeUnitMode,
   viewDate,
-  fixedNumberOfWeeks,
+  // fixedNumberOfWeeks,
 }: MonthProps) => {
   const boundariesProcessed = useBoundaries({ boundaries })
   const selectedProcessed = useSelectedDate({ selectedDates, mode })
@@ -37,7 +37,7 @@ export const useCalendar = ({
 
     if (isDay(timeUnitMode)) {
       firstDay = generateDateByUTCValue(viewDateYear, viewDateMonth, 1)
-      lastDay = generateDateByUTCValue(viewDateYear, viewDateMonth + 1, 0) // lastDay
+      lastDay = generateDateByUTCValue(viewDateYear, viewDateMonth + 1, 0)
 
       nextFirstDay = generateDateByUTCValue(viewDateYear, viewDateMonth + 1, 1)
       prevLastDay = generateDateByUTCValue(viewDateYear, viewDateMonth, 0)
@@ -46,29 +46,27 @@ export const useCalendar = ({
       const weekdayLast = lastDay.getUTCDay()
 
       // Monday preceding the month (or first day of the month if it's on a Monday)
-      calendarFirstDay =
-        weekdayFirst === 0
-          ? new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - 7))
-          : new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - weekdayFirst))
+      calendarFirstDay = new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - weekdayFirst))
+      if (weekdayFirst === 0) calendarFirstDay = new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - 7))
 
       // Sunday after the month (or last day of the month if it's on a Sunday)
-      calendarLastDay =
-        weekdayLast === 0
-          ? new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 0))
-          : new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 8 - weekdayLast))
+      calendarLastDay = new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 8 - weekdayLast))
+      if (weekdayLast === 0) calendarLastDay = new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 1))
+      else if (weekdayLast === 1) calendarLastDay = new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 0))
 
       // If calendar must contain constant number of weeks (6 weeks)
       // Missing weeks will be added to the end of the month
-      const numberOfWeeks = Math.round((+calendarLastDay - +calendarFirstDay) / (7 * 24 * 60 * 60 * 1000))
-      if (fixedNumberOfWeeks) {
-        for (let week = numberOfWeeks; week < 6; week++) {
-          calendarLastDay = generateDateByUTCValue(
-            calendarLastDay.getUTCFullYear(),
-            calendarLastDay.getUTCMonth(),
-            calendarLastDay.getUTCDate() + 7,
-          )
-        }
-      }
+      // const numberOfWeeks = Math.round((+calendarLastDay - +calendarFirstDay) / (7 * 24 * 60 * 60 * 1000))
+
+      // if (fixedNumberOfWeeks) {
+      //   for (let week = numberOfWeeks; week < 6; week++) {
+      //     calendarLastDay = generateDateByUTCValue(
+      //       calendarLastDay.getUTCFullYear(),
+      //       calendarLastDay.getUTCMonth(),
+      //       calendarLastDay.getUTCDate() + 7,
+      //     )
+      //   }
+      // }
     } else if (isMonth(timeUnitMode)) {
       calendarFirstDay = firstDay = generateDateByUTCValue(viewDateYear, 0, 1)
       calendarLastDay = lastDay = generateDateByUTCValue(viewDateYear, 11, 31)
@@ -90,7 +88,6 @@ export const useCalendar = ({
     }
 
     const items: TimeItem[] = []
-
     // Loops between first and last date
     let dateItem = calendarFirstDay
     do {

package/src/datePicker/datePicker.tsx

@@ -135,14 +135,14 @@ export const DatePicker = vui<'span', DatePickerProps>((props, ref) => {
               boundaries={boundaries ?? { startDate: undefined, endDate: undefined }}
               fixedNumberOfWeeks
               fontWeight={500}
-              minH={310}
+              minH={200}
               mode="exact"
               onSelectDates={range => selectDate(range)}
               selectedDates={{ startDate: selectedDate, endDate: undefined }}
               w="100%"
             />
           </Box>
-          <Box overflow="unset" pt={0.5}>
+          <Box overflow="unset">
             <Box alignItems="center" flex={1} ml="auto" pb={2} px={2}>
               {isClearButtonVisible && (
                 <LineButton flex={1} onClick={onClear} size="md">

package/src/range/range.tsx

@@ -67,7 +67,7 @@ export const Range = vui<'div', RangeProps>((props, ref) => {
     return showValue ? (
       content
     ) : (
-      <Tooltip disabled={disabled} text={formatter(state.valueNow)} visible={showTooltip}>
+      <Tooltip key={state.index} disabled={disabled} text={formatter(state.valueNow)} visible={showTooltip}>
         {content}
       </Tooltip>
     )

package/src/sidemenuV2/sidemenuV2.tsx

@@ -19,21 +19,42 @@ export { SidemenuStateProvider, useSidemenuContext }
 export const SidemenuV2 = vui<'div', SidemenuV2Props>((props, ref) => {
   const {
     isExpandedInitial = true, // Uncontrolled: only affects initial state
+    onExpandedChange, // Extract this to prevent it from being passed to DOM
     size,
     variant = 'light',
+    children,
+    className,
+    items,
+    shouldExpand,
+    isSticky,
+    width,
+    top,
+    onNavigate,
+    ...restProps // Only DOM-safe props remain
   } = props
 
   return (
     <SidemenuStateProvider
       isExpandedInitial={isExpandedInitial}
-      onExpandedChange={props.onExpandedChange}
+      onExpandedChange={onExpandedChange}
       variant={variant}
       size={size}
       isDark={variant === 'dark'}
     >
       <SidemenuInner
         ref={ref}
-        {...props} // Spread all props to inner component
+        // Only pass DOM-safe props, not onExpandedChange
+        children={children}
+        className={className}
+        items={items}
+        shouldExpand={shouldExpand}
+        isSticky={isSticky}
+        size={size}
+        variant={variant}
+        width={width}
+        top={top}
+        onNavigate={onNavigate}
+        {...restProps} // Remaining DOM-safe props
       />
     </SidemenuStateProvider>
   )

package/src/table/tableSortIcon.tsx

@@ -1,27 +1,41 @@
-import { useStyleConfig, vui } from '../core'
+import Box from '../box'
+import { vui } from '../core'
 import { Icon } from '../icon'
 import { cs } from '../utils'
-import { useTableContext } from './context'
 import type { TableSortIconProps } from './table.types'
 
 /** Displays a sort icon with given direction based on sort order. */
 export const TableSortIcon = vui<'svg', TableSortIconProps>((props, ref) => {
-  const { className, order, ...rest } = props
-  const styles = useStyleConfig('Table', useTableContext())
-  const rotate = order === 'asc' ? 180 : 0
-  const pathFill = order ? ['seaBlue.main', 'sandstone.main'] : 'sandstone.main'
+  const { className, order } = props
+  const activeColor = 'seaBlue.main'
+  const inactiveColor = 'sandstone.85'
+
+  const icons = [
+    {
+      color: order === 'asc' ? activeColor : inactiveColor,
+    },
+    {
+      color: order === 'desc' ? activeColor : inactiveColor,
+    },
+  ]
 
   return (
-    <Icon
-      className={cs('vui-tableSortIcon', className)}
-      name="uiSort"
-      pathFill={pathFill}
-      ref={ref}
-      rotate={rotate}
-      size="xs"
-      {...styles.tableSortIcon}
-      {...rest}
-    />
+    <Box ref={ref} column alignItems="center" justifyItems="center" ml="8px">
+      <Icon
+        className={cs('vui-tableSortIcon--top', className)}
+        name={'uiCaretUp'}
+        color={icons[0].color}
+        size="xs"
+        mb="-4px"
+      />
+      <Icon
+        className={cs('vui-tableSortIcon--bottom', className)}
+        name={'uiCaretDown'}
+        color={icons[1].color}
+        size="xs"
+        mt="-4px"
+      />
+    </Box>
   )
 })