@veracity/vui 2.11.0 → 2.12.0-beta.0

package/src/sidemenu/sidemenu.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 
 import Box from '../box'
 import Button from '../button'
-import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import { useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
 import { cs, filterUndefined } from '../utils'
 import { expandedWidth } from './consts'
@@ -11,17 +11,9 @@ import { SidemenuItemProps, SidemenuProps } from './sidemenu.types'
 import SidemenuItem from './sidemenuItem'
 import SidemenuTop from './sidemenuTop'
 
-export const SidemenuBase = styled.divBox`
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  transition-duration: normal;
-  overflow: hidden;
-`
-
 /** A collapsible side menu for navigation. */
 export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
-  const { children, className, items, isExpanded = false, size, variant, width = 280, ...rest } = props
+  const { children, className, items, isExpanded = false, size, variant, width = 280, onNavigate, ...rest } = props
 
   const [isExpandedInternal, setIsExpandedInternal] = useState(isExpanded)
   const context = useMemo(
@@ -43,12 +35,30 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
   const icon = `falArrow${isExpandedInternal ? 'Left' : 'Right'}`
   const justifyContent = isExpandedInternal ? 'flex-end' : 'center'
 
+  function onItemClick(item: SidemenuItemProps) {
+    item?.onClick?.()
+    if (item?.path) onNavigate?.(item.path)
+  }
+
   return (
     <SidemenuProvider value={context}>
-      <SidemenuBase className={cs('vui-sidemenu', className)} ref={ref} w={w} {...styles.container} {...rest}>
+      <Box
+        className={cs('vui-sidemenu', className)}
+        elevation="3"
+        flexDirection="column"
+        minWidth={0}
+        overflowX="hidden"
+        ref={ref}
+        transitionDuration="normal"
+        w={w}
+        {...styles.container}
+        {...rest}
+      >
         <Box flexDirection="column" flexGrow={1} overflowX="hidden" overflowY="auto" w="100%">
           {items
-            ? items?.map?.((item: SidemenuItemProps, key: number) => <SidemenuItem key={key} {...item} />)
+            ? items?.map?.((item: SidemenuItemProps, key: number) => (
+                <SidemenuItem key={key} {...item} onClick={() => onItemClick(item)} />
+              ))
             : children}
         </Box>
         <Box className="vui-sidemenu-bottom" w="100%" {...styles.bottom}>
@@ -63,7 +73,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
             <Icon name={icon} />
           </Button>
         </Box>
-      </SidemenuBase>
+      </Box>
     </SidemenuProvider>
   )
 }) as VuiComponent<'div', SidemenuProps> & {

package/src/sidemenu/sidemenu.types.ts

@@ -13,6 +13,8 @@ export type SidemenuProps = SystemProps &
     items?: SidemenuItemProps[]
     /** Whether the menu is expanded @default false  */
     isExpanded?: boolean
+    /** External callback for navigation to the item path, could be a custom function or React Router hook: https://reactrouter.com/en/main/hooks/use-navigate  */
+    onNavigate?: (to: string) => void
     /** With of the container when the side menu is expanded @default 280  */
     width?: number
   }
@@ -30,6 +32,8 @@ export type SidemenuItemProps = BoxProps & {
   isActive?: boolean
   /** On click callback */
   onClick?: () => void
+  /** Router path */
+  path?: string
   /** Title */
   title: string
 }

package/src/sidemenu/sidemenuItem.tsx

@@ -41,6 +41,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     borderRadius: 0,
     borderLeft: '3px solid transparent',
     borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined,
+    bg: isDark ? 'darkBlue.main' : isActive ? 'skyBlue.95' : 'white',
     color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10',
     h: 'auto',
     justifyContent: 'space-between',
@@ -50,6 +51,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     w: '100%',
     ...styles.item,
     minH: size === 'lg' ? '56px' : '40px',
+    hoverBg: isDark ? 'seaBlue.main' : 'skyBlue.90',
     ...rest
   }
 

package/dist/cjs/modal/focusLock.d.ts

@@ -1,11 +0,0 @@
-import { FC } from 'react';
-import { ChildrenProp } from '../core';
-import { FocusLockProps } from './focusLock.types';
-/**
- * Traps the focus within the provided content. That is, tabbing with keyboard will
- * only cycle through the children and won't leave the boundary of the FocusLock.
- * This behavior enhances accessibility of the Modal component.
- */
-export declare const FocusLock: FC<FocusLockProps & ChildrenProp>;
-export default FocusLock;
-//# sourceMappingURL=focusLock.d.ts.map

package/dist/cjs/modal/focusLock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"focusLock.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAe,MAAM,OAAO,CAAA;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CAmCvD,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/cjs/modal/focusLock.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"focusLock.types.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACjD,6EAA6E;IAC7E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACnD,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA"}

package/dist/cjs/modal/modalStyle.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
-export default _default;
-//# sourceMappingURL=modalStyle.d.ts.map

package/dist/cjs/modal/modalStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"modalStyle.d.ts","sourceRoot":"","sources":["../../../src/modal/modalStyle.ts"],"names":[],"mappings":";AAEA,wBAMC"}

package/dist/cjs/modal/modalStyle.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("../core");
-exports.default = (0, core_1.createGlobalStyle) `
-
-body.vui-no-scroll {
-	overflow: hidden !important;
-	overscroll-behavior: contain;
-}
-`;

package/dist/esm/modal/focusLock.d.ts

@@ -1,11 +0,0 @@
-import { FC } from 'react';
-import { ChildrenProp } from '../core';
-import { FocusLockProps } from './focusLock.types';
-/**
- * Traps the focus within the provided content. That is, tabbing with keyboard will
- * only cycle through the children and won't leave the boundary of the FocusLock.
- * This behavior enhances accessibility of the Modal component.
- */
-export declare const FocusLock: FC<FocusLockProps & ChildrenProp>;
-export default FocusLock;
-//# sourceMappingURL=focusLock.d.ts.map

package/dist/esm/modal/focusLock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"focusLock.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAe,MAAM,OAAO,CAAA;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CAmCvD,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/esm/modal/focusLock.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"focusLock.types.d.ts","sourceRoot":"","sources":["../../../src/modal/focusLock.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACjD,6EAA6E;IAC7E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACnD,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA"}

package/dist/esm/modal/modalStyle.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
-export default _default;
-//# sourceMappingURL=modalStyle.d.ts.map

package/dist/esm/modal/modalStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"modalStyle.d.ts","sourceRoot":"","sources":["../../../src/modal/modalStyle.ts"],"names":[],"mappings":";AAEA,wBAMC"}

package/dist/esm/modal/modalStyle.js

@@ -1,8 +0,0 @@
-import { createGlobalStyle } from '../core';
-export default createGlobalStyle `
-
-body.vui-no-scroll {
-	overflow: hidden !important;
-	overscroll-behavior: contain;
-}
-`;

package/src/modal/modalStyle.ts

@@ -1,9 +0,0 @@
-import { createGlobalStyle } from '../core'
-
-export default createGlobalStyle`
-
-body.vui-no-scroll {
-	overflow: hidden !important;
-	overscroll-behavior: contain;
-}
-`