@veracity/vui 2.29.0 → 2.29.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.29.0",
+  "version": "2.29.2",
   "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",
@@ -16,6 +16,7 @@
     "eslint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "fix": "npm run eslint:fix && npm run prettier",
     "prettier": "prettier . --write",
+    "lint:attw": "attw --pack .",
     "lint": "npm run eslint && npm run tslint",
     "tslint": "tsc --noEmit"
   },
@@ -28,13 +29,14 @@
     "@xstyled/util": "2.2.3",
     "react-focus-lock": "2.13.6",
     "react-slider": "2.0.6",
-    "styled-components": "5.3.11",
+    "styled-components": "^5.3.11",
     "tippy.js": "6.3.7"
   },
   "devDependencies": {
-    "@types/node": "^22.13.9",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@arethetypeswrong/cli": "^0.18.1",
+    "@types/node": "^22.15.17",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.7",
     "@types/react-slider": "^1.3.6",
     "@veracity/eslint-config": "*",
     "@veracity/prettier-config": "*",

package/src/accordion/accordion.tsx

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

package/src/accordion/accordionItem.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Box } from '../box'
 import { omitThemingProps, useStyleConfig } from '../core'

package/src/accordion/accordionItemArrow.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { memo } from 'react'
 
 import Icon from '../icon'
 import { AccordionItemArrowProps } from './accordion.types'
@@ -30,4 +30,4 @@ const AccordionItemArrow = ({
   />
 )
 
-export default React.memo(AccordionItemArrow)
+export default memo(AccordionItemArrow)

package/src/avatar/avatar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import Icon, { IconProp, IconProps } from '../icon'

package/src/badge/badge.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { vui } from '../core'
 import { Tag, TagProps } from '../tag'
 import { Dict } from '../utils'

package/src/breadcrumbs/breadcrumbs.tsx

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

package/src/breadcrumbs/breadcrumbsItem.tsx

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

package/src/breadcrumbs/breadcrumbsSeparator.tsx

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

package/src/button/button.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { Fragment, useMemo } from 'react'
 
 import { useButtonGroupContext } from '../buttonGroup/context'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
@@ -88,7 +88,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
 
   const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
 
-  const Content = hasState ? ContentWrapper : React.Fragment
+  const Content = hasState ? ContentWrapper : Fragment
 
   // Apply more space for text and less space for icons
   const border = borderWidthProp ?? borderWidth ?? 1

package/src/button/theme.ts

@@ -11,7 +11,7 @@ const parts = ['container', 'icon', 'text']
 const sizes = {
   sm: {
     container: {
-      fontSize: 'sm',
+      fontSize: 'xs',
       h: 24,
       minW: 48,
       spaceX: 4,

package/src/buttonToggleGroup/buttonToggleGroup.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import ButtonGroup from '../buttonGroup'
 import { cs, dimmedBorderColor } from '../utils'
 import { ButtonToggleGroupProps } from './buttonToggleGroup.types'

package/src/calendar/calendar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import Box from '../box'
 import { omitThemingProps, useStyleConfig, vui } from '../core'

package/src/calendar/components/calendarHeader.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 import Box from '../../box'
 import { IconButton } from '../../button'

package/src/calendar/components/dayPicker.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../../box'
 import { styled, th } from '../../core'
 import { cs } from '../../utils'
@@ -20,11 +18,13 @@ const DayItem = styled(CalendarItem)<ItemProps>`
   width: 40px;
   height: 40px;
   color: ${th.color('seaBlue.main')};
+  display: inline-flex;
+  align-items: center;
 `
 
 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

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { cs } from '../../utils'
 import { CalendarItem as MonthItem, CalendarItemsContainer } from '../calendar.styles'
 import { TimeResult } from '../calendar.types'

package/src/calendar/components/timeUnitHeader.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 import { Box } from '../../box'
 import { Button } from '../../button'

package/src/calendar/components/yearPicker.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { CalendarItem as YearItem, CalendarItemsContainer } from '../calendar.styles'
 import { TimeResult } from '../calendar.types'
 

package/src/card/card.tsx

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

package/src/chat/chat.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 
 import Box from '../box'
-import { omitThemingProps, styled, useStyleConfig, vui, VuiComponent } from '../core'
+import { omitThemingProps, useStyleConfig, vui, VuiComponent } from '../core'
 import { Tag } from '../tag'
 import { cs } from '../utils'
 import { ChatInputStatus, ChatProps } from './chat.types'

package/src/checkbox/checkboxGroup.tsx

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

package/src/core/links.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, Dispatch, SetStateAction, useContext, useEffect, useState } from 'react'
+import { createContext, Dispatch, SetStateAction, useContext, useEffect, useState } from 'react'
 
 import { Dict, Environment, isObject, noop, useCallbackRef } from '../utils'
 import { cdnUrls } from './consts'

package/src/core/vui.ts

@@ -1,4 +1,4 @@
-import React, { ElementType, PropsWithChildren, PropsWithoutRef, ReactElement } from 'react'
+import { ElementType, forwardRef, memo, PropsWithChildren, PropsWithoutRef, ReactElement } from 'react'
 
 import { PropsOf, RefPropsOf } from '../utils'
 
@@ -13,13 +13,13 @@ export function vui<C extends React.ElementType, Props = object>(
   const { memoCompare, isMemo = true } = config ?? {}
 
   if (isMemo) {
-    return React.memo(
-      React.forwardRef(component as unknown as any),
-      memoCompare as unknown as any,
-    ) as unknown as VuiComponent<C, Props>
+    return memo(forwardRef(component as unknown as any), memoCompare as unknown as any) as unknown as VuiComponent<
+      C,
+      Props
+    >
   }
 
-  return React.forwardRef(component as unknown as any) as unknown as VuiComponent<C, Props>
+  return forwardRef(component as unknown as any) as unknown as VuiComponent<C, Props>
 }
 
 /** VUI component type, which allows element props inference and extension, 'as' and 'ref'. */

package/src/core/vuiProvider/notifyOffline.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { memo, useEffect, useState } from 'react'
 
 import { useToast } from '../../toast'
 import { useOfflineMode } from './useOfflineMode'
@@ -19,4 +19,4 @@ const NotifyOffline = () => {
   return null
 }
 
-export default React.memo(NotifyOffline)
+export default memo(NotifyOffline)

package/src/datePicker/dateInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Input, InputProps } from '../input'
 import { T } from '../t'

package/src/datePicker/datePicker.tsx

@@ -5,7 +5,7 @@ import Button, { LineButton } from '../button'
 import Calendar, { DateRange, maxDateTimestamp, minDateTimestamp } from '../calendar'
 import { omitThemingProps, useStyleConfig, vui } from '../core'
 import Popover from '../popover'
-import { cs, useClickOutside } from '../utils'
+import { cs } from '../utils'
 import { DateInput } from './dateInput'
 import { DatePickerProps } from './datePicker.types'
 

package/src/dialog/dialogBody.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { Box } from '../box'
 import { useStyleConfig, vui } from '../core'

package/src/dialog/dialogCancelButton.tsx

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

package/src/dialog/dialogCloseButton.tsx

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

package/src/dialog/dialogFooter.tsx

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

package/src/dialog/dialogHeader.tsx

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

package/src/dialog/dialogIcon.tsx

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

package/src/dialog/dialogSubmitButton.tsx

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

package/src/dialog/dialogTitle.tsx

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

package/src/dialog/useDialog.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Box } from '../box'
 import { useVuiContext } from '../core'
 import { Dialog } from '../dialog'

package/src/divider/divider.tsx

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

package/src/dragAndDrop/dragAndDrop.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, DragEvent, useRef } from 'react'
 
-import { omitThemingProps, styled, useStyleConfig, v, vui } from '../core'
+import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import Icon, { IconProp } from '../icon'
 import T from '../t'
 import { cs } from '../utils'

package/src/focusLock/focusLock.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react'
+import { FC, useCallback } from 'react'
 import ReactFocusLock from 'react-focus-lock'
 
 import { ChildrenProp } from '../core'
@@ -22,7 +22,7 @@ export const FocusLock: FC<FocusLockProps & ChildrenProp> = props => {
     returnFocus: returnFocusProp,
   } = props
 
-  const onActivation = React.useCallback(() => {
+  const onActivation = useCallback(() => {
     initialFocusRef?.current?.focus()
   }, [initialFocusRef])
 

package/src/footer/applicationFooter.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { vui } from '../core'
 import { cs } from '../utils'
 import Footer from './footer'
@@ -9,7 +7,7 @@ import { defaultLinkedInUrl } from './footerTrademark'
 export const ApplicationFooter = vui<'div', ApplicationFooterProps>((props, ref) => {
   const { applicationLinks, applicationStaticItems = [], className, isDNV = false, linkedIn, ...rest } = props
 
-  const applicationSocialLinks = []
+  const applicationSocialLinks: { id: string; text: string; url: string }[] = []
   let localLinkedIn = ''
 
   if (isDNV) {

package/src/footer/footer.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Box } from '../box'
 import { styled, useDown, useStyleConfig, vui, VuiComponent } from '../core'
 import { Divider } from '../divider'
@@ -10,6 +8,7 @@ import { cs, getCurrentYear } from '../utils'
 import { FooterProvider } from './context'
 import { FooterLinkData, FooterProps } from './footer.types'
 import FooterColumn from './footerColumn'
+import FooterColumns from './footerColumns'
 import FooterContent from './footerContent'
 import FooterHeading from './footerHeading'
 import FooterLink from './footerLink'
@@ -94,7 +93,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
                 wrap
               >
                 {applicationLinks?.map((link, index) => (
-                  <Box flex={{ xs: '0 0 50%', sm: '0 0 auto' }} key={index}>
+                  <Box flex={{ xs: '0 0 100%', sm: '0 0 auto' }} key={index}>
                     {link.items && (
                       <Menu isLazy={false} offset={[-16, 9]} placement="top-start" size="lg" {...rest}>
                         <Menu.Button
@@ -149,7 +148,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
                 ) : (
                   <Box>
                     <T size="sm">
-                      <T weight="demi">Veracity by DNV</T>, DNV AS
+                      <T fontWeight="600">Veracity by DNV</T>, DNV AS
                     </T>
                   </Box>
                 )}
@@ -200,7 +199,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
 
               <FooterSlimColumn centerV>
                 <T size="xs">
-                  <T weight="demi">Veracity by DNV</T>, DNV AS
+                  <T fontWeight="demi">Veracity by DNV</T>, DNV AS
                 </T>
               </FooterSlimColumn>
               <FooterSlimColumn>
@@ -221,14 +220,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
 
         {!isApplication && !isSlim && (
           <FooterContent>
-            {children ??
-              (columns && (
-                <FooterRow>
-                  {columns.map((sections, index) => (
-                    <FooterColumn key={index} sections={sections} />
-                  ))}
-                </FooterRow>
-              ))}
+            <FooterColumns columns={columns} />
 
             {children || columns ? <Divider borderColor="sandstone.main" my={4} /> : null}
 

package/src/footer/footer.types.ts

@@ -9,6 +9,10 @@ export type FooterColumnProps = BoxProps & {
   sections?: FooterSectionData[]
 }
 
+export type FooterColumnsProps = BoxProps & {
+  columns?: FooterColumnData[]
+}
+
 export type FooterContentProps = BoxProps
 
 export type FooterContext = Pick<FooterProps, 'size' | 'variant'>

package/src/footer/footerColumn.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../box'
 import { useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
@@ -9,14 +7,14 @@ import FooterSection from './footerSection'
 
 /** Organizes sections with links into a single column. Different width per breakpoint. */
 const FooterColumn = vui<'div', FooterColumnProps>((props, ref) => {
-  const { children, className, sections, ...rest } = props
+  const { children, className, sections, flex, ...rest } = props
   const styles = useStyleConfig('Footer', useFooterContext())
 
   return (
     <Box
       className={cs('vui-footerColumn', className)}
       column
-      flex={{ xs: '0 0 50%', sm: '0 0 50%', md: '0 0 25%' }}
+      flex={flex ?? { xs: '0 0 50%', sm: '0 0 50%', md: '0 0 25%' }}
       minW={164}
       p={{ xs: 1, sm: 1, md: 1.25, lg: 1.5 }}
       ref={ref}

package/src/footer/footerColumns.tsx

@@ -0,0 +1,41 @@
+import { useDown, vui } from '../core'
+import { FooterColumnsProps } from './footer.types'
+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 { columns } = props
+
+  const downXs = useDown(460)
+  const downMd = useDown('md')
+
+  if (!columns) return null
+  if (downXs) {
+    return (
+      <FooterRow>
+        <FooterColumn flex={'1 1 auto'} key={'evenColumns'} sections={columns.flat()} textAlign={'center'} />
+      </FooterRow>
+    )
+  }
+  if (downMd) {
+    const columnsEven = columns.filter((_, index) => index % 2 === 0).flat()
+    const columnsOdd = columns.filter((_, index) => index % 2 === 1).flat()
+    return (
+      <FooterRow>
+        <FooterColumn key={'evenColumns'} sections={columnsEven} />
+        <FooterColumn key={'oddColumns'} sections={columnsOdd} />
+      </FooterRow>
+    )
+  }
+  return (
+    <FooterRow>
+      {columns.map((sections, index) => (
+        <FooterColumn key={index} sections={sections} />
+      ))}
+    </FooterRow>
+  )
+})
+
+FooterColumns.displayName = 'Footer Mobile Column'
+export default FooterColumns

package/src/footer/footerContent.tsx

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

package/src/footer/footerHeading.tsx

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

package/src/footer/footerLink.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import Link, { LinkProps } from '../link'
 import { cs } from '../utils'
@@ -13,6 +11,7 @@ export const FooterLink = vui<'a', LinkProps>((props, ref) => {
   return (
     <Link
       className={cs('vui-footerLink', className)}
+      display={'inline-block'}
       py={0.5}
       ref={ref}
       size={{ _: 'sm', md: 'md' }}

package/src/footer/footerRow.tsx

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

package/src/footer/footerSection.tsx

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

package/src/footer/footerSlimColumn.tsx

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

package/src/footer/footerTrademark.tsx

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

package/src/grid/grid.tsx

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

package/src/header/header.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 
 import { styled, useLinks, useStyleConfig, useUp, vui, VuiComponent } from '../core'
 import { cs, useClickOutside } from '../utils'

package/src/header/headerAccount.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 
 import Avatar from '../avatar'
 import { useStyleConfig } from '../core'

package/src/header/headerAccountUserInfo.tsx

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

package/src/header/headerApplicationName.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Box } from '../box'
 import { useUp, vui } from '../core'
 import { Heading } from '../heading'
@@ -14,16 +12,12 @@ export const HeaderApplicationName = vui<'div', HeadingProps & { url?: string }>
 
   const additionalClassName = isTablet ? 'vui-headerApplicationNameTablet' : 'vui-headerApplicationNameMobile'
 
-  const mobileProps = isTablet
-    ? {
-        fontSize: 18,
-        mt: 0,
-      }
-    : {
-        fontSize: 18,
-        maxW: '156px',
-        lineHeight: '21px',
-      }
+  const mobileProps = {
+    fontSize: 18,
+    lineHeight: '21px',
+    mt: isTablet ? 0 : 'inherit',
+    maxW: isTablet ? 'inherit' : '156px',
+  }
 
   const linkProps = url ? { as: 'a', href: url, outline: 'none', focusRing: 2 } : {}