@veracity/vui 2.29.3 → 2.29.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.29.3",
+  "version": "2.29.4",
   "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",
@@ -34,8 +34,8 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.1",
-    "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
+    "@types/node": "^22.15.29",
+    "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@types/react-slider": "^1.3.6",
     "@veracity/eslint-config": "*",

package/src/footer/footer.tsx

@@ -17,13 +17,11 @@ import FooterSection from './footerSection'
 import FooterSlimColumn from './footerSlimColumn'
 import { defaultLinkedInUrl, FooterTrademark } from './footerTrademark'
 
-/*@formatter:off*/
 export const FooterBase = styled.divBox`
   background-color: darkBlue.main;
   color: white;
   padding: 5 3;
 `
-/*@formatter:on*/
 
 const currentYear = getCurrentYear()
 

package/src/footer/footerColumns.tsx

@@ -4,7 +4,7 @@ import FooterColumn from './footerColumn'
 import FooterRow from './footerRow'
 
 /** Organizes sections with links into a single column. Different width per breakpoint. */
-const FooterColumns = vui<'div', FooterColumnsProps>(props => {
+const FooterColumns = vui<'div', FooterColumnsProps>((props, ref) => {
   const { columns } = props
 
   const downXs = useDown(460)
@@ -13,7 +13,7 @@ const FooterColumns = vui<'div', FooterColumnsProps>(props => {
   if (!columns) return null
   if (downXs) {
     return (
-      <FooterRow>
+      <FooterRow ref={ref}>
         <FooterColumn flex={'1 1 auto'} key={'evenColumns'} sections={columns.flat()} textAlign={'center'} />
       </FooterRow>
     )
@@ -22,14 +22,14 @@ const FooterColumns = vui<'div', FooterColumnsProps>(props => {
     const columnsEven = columns.filter((_, index) => index % 2 === 0).flat()
     const columnsOdd = columns.filter((_, index) => index % 2 === 1).flat()
     return (
-      <FooterRow>
+      <FooterRow ref={ref}>
         <FooterColumn key={'evenColumns'} sections={columnsEven} />
         <FooterColumn key={'oddColumns'} sections={columnsOdd} />
       </FooterRow>
     )
   }
   return (
-    <FooterRow>
+    <FooterRow ref={ref}>
       {columns.map((sections, index) => (
         <FooterColumn key={index} sections={sections} />
       ))}

package/src/header/header.tsx

@@ -21,7 +21,6 @@ import HeaderServicesMessage from './headerServicesMessage'
 import HeaderSignIn from './headerSignIn'
 import HeaderSupport from './headerSupport'
 
-/*@formatter:off*/
 export const HeaderBase = styled.headerBox`
   align-items: center;
   background-color: white;
@@ -29,7 +28,6 @@ export const HeaderBase = styled.headerBox`
   display: flex;
   position: relative;
 `
-/*@formatter:on*/
 
 /** Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content. */
 export const Header = vui<'header', HeaderProps>((props, ref) => {

package/src/header/headerNotifications.tsx

@@ -4,7 +4,6 @@ import { cs } from '../utils'
 import { useHeaderContext } from './context'
 import { HeaderNotificationsProps } from './header.types'
 
-/*@formatter:off*/
 const Badge = styled.spanBox`
   align-items: center;
   background-color: energyRed.45;
@@ -20,7 +19,6 @@ const Badge = styled.spanBox`
   top: 1px;
   min-width: 20px;
 `
-/*@formatter:on*/
 
 /** Icon link to Veracity notifications engine with an optional number of new notifications. */
 export const HeaderNotifications = vui<'a', HeaderNotificationsProps>((props, ref) => {

package/src/list/listItem.tsx

@@ -22,7 +22,6 @@ const ListItemLink = vui<'a', LinkProps>((props, ref) => (
   />
 ))
 
-/*@formatter:off*/
 export const ListItemBase = styled.liBox`
   display: flex;
   line-height: normal;
@@ -39,7 +38,6 @@ export const ListItemBase = styled.liBox`
     z-index: 1;
   }
 `
-/*@formatter:on*/
 
 /**
  * Displays a list item with text and optional icons. Can be shown as interactive or selected.
@@ -77,6 +75,7 @@ export const ListItem = vui<'li', ListItemProps>((props, ref) => {
   const justifyContent = (center || (column ? centerV : centerH)) && 'center'
 
   const ContentWrapper = isLinkItem ? ListItemLink : Fragment
+  const contentWrapperProps = isLinkItem ? { alignItems: 'center', display: 'inline-flex' } : {}
 
   const interactiveProps =
     !disabled && isInteractive
@@ -110,7 +109,7 @@ export const ListItem = vui<'li', ListItemProps>((props, ref) => {
       {...aliasedProps}
       {...rest}
     >
-      <ContentWrapper {...linkProps} alignItems={'center'} display={'inline-flex'}>
+      <ContentWrapper {...linkProps} {...contentWrapperProps}>
         {itemLeft}
 
         {isString(iconLeft) ? <ListIcon mr={1} name={iconLeft} verticalAlign={'middle'} /> : iconLeft}

package/src/table/thead.tsx

@@ -5,14 +5,12 @@ import { TheadProps } from './table.types'
 import Th from './th'
 import Tr from './tr'
 
-/*@formatter:off*/
 const TheadBase = styled.theadBox`
   tr th,
   tr td {
     border-bottom: 1px solid sandstone.main;
   }
 `
-/*@formatter:on*/
 
 /** Displays Table head with support for columns and sticky. */
 export const Thead = vui<'thead', TheadProps>((props, ref) => {

package/src/theme/foundations/screens.ts

@@ -1,4 +1,4 @@
-// Pixel values inspired by https://tailwindcss.com/docs/screens
+// Pixel values inspired by https://tailwindcss.com/docs/responsive-design#overview
 export default {
   xs: 0,
   sm: 640,

package/src/tree/treeItem.tsx

@@ -9,14 +9,12 @@ import { TreeItemProps } from './tree.types'
 import TreeIcon from './treeIcon'
 import TreeText from './treeText'
 
-/*@formatter:off*/
 export const TreeItemBase = styled.liBox`
   display: flex;
   flex-direction: column;
   transition-duration: fast;
   width: 100%;
 `
-/*@formatter:on*/
 
 /**
  * Displays a tree item with text and optional icons. Can be shown as selected.