@veracity/vui 2.10.0-beta.1 → 2.10.0-beta.2

package/dist/cjs/sidemenu/sidemenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAKnE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SAsDd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAKnE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SA+Cd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}

package/dist/cjs/sidemenu/sidemenu.js

@@ -59,11 +59,10 @@ exports.SidemenuBase = core_1.styled.divBox `
 exports.Sidemenu = (0, core_1.vui)((props, ref) => {
     var _a;
     const { children, className, items, isExpanded = false, size, variant, width = 280 } = props, rest = __rest(props, ["children", "className", "items", "isExpanded", "size", "variant", "width"]);
-    const styles = (0, core_1.useStyleConfig)('Sidemenu', props);
     const [isExpandedInternal, setIsExpandedInternal] = (0, react_1.useState)(isExpanded);
     const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size, variant, isExpandedInternal }), [size, variant, isExpandedInternal]);
+    const styles = (0, core_1.useStyleConfig)('Sidemenu', props);
     const isDark = variant === 'dark';
-    const aliasedProps = (0, utils_1.filterUndefined)({});
     (0, react_1.useEffect)(() => {
         setIsExpandedInternal(isExpanded);
     }, [isExpanded]);
@@ -72,7 +71,7 @@ exports.Sidemenu = (0, core_1.vui)((props, ref) => {
     const icon = `falArrow${isExpandedInternal ? 'Left' : 'Right'}`;
     const justifyContent = isExpandedInternal ? 'flex-end' : 'center';
     return (react_1.default.createElement(context_1.SidemenuProvider, { value: context },
-        react_1.default.createElement(exports.SidemenuBase, Object.assign({ className: (0, utils_1.cs)('vui-sidemenu', className), ref: ref, w: w }, styles.container, aliasedProps, rest),
+        react_1.default.createElement(exports.SidemenuBase, Object.assign({ className: (0, utils_1.cs)('vui-sidemenu', className), ref: ref, w: w }, styles.container, rest),
             react_1.default.createElement(box_1.default, { flexDirection: "column", flexGrow: 1, overflowX: "hidden", overflowY: "auto", w: "100%" }, items
                 ? (_a = items === null || items === void 0 ? void 0 : items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item, key) => react_1.default.createElement(sidemenuItem_1.default, Object.assign({ key: key }, item)))
                 : children),

package/dist/cjs/sidemenu/sidemenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAK7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,wCAgEmB,CAAA;AAE5C,eAAe,YAAY,CAAA"}
+{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAK7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,wCAmEmB,CAAA;AAE5C,eAAe,YAAY,CAAA"}

package/dist/cjs/sidemenu/sidemenuItem.js

@@ -53,6 +53,7 @@ exports.SidemenuItem = (0, core_1.vui)((props, ref) => {
     const { variant, size, isExpandedInternal } = (0, context_1.useSidemenuContext)();
     const styles = (0, core_1.useStyleConfig)('Sidemenu', context_1.useSidemenuContext);
     const isDark = variant === 'dark';
+    const hasChildrenExpanded = !!children && isExpandedInternal;
     const innerContent = isExpandedInternal ? (react_1.default.createElement(box_1.default, { centerV: true, px: 2, py: 1, w: "100%", whiteSpace: "pre" },
         react_1.default.createElement(icon_1.default, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize }),
         react_1.default.createElement(t_1.default, { isTruncated: true, ml: 2 }, title))) : (react_1.default.createElement(box_1.default, { centerV: true, px: 2, py: 1, w: "100%" },
@@ -63,9 +64,9 @@ exports.SidemenuItem = (0, core_1.vui)((props, ref) => {
         setDisplayChildren(!displayChildren);
     };
     return (react_1.default.createElement(box_1.default, { flexDirection: "column", ref: ref, w: "100%" },
-        react_1.default.createElement(button_1.default, Object.assign({ alignItems: "center", border: "none", borderLeft: "3px solid transparent", borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined, borderRadius: 0, className: (0, utils_1.cs)('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), p: 0, variant: isDark ? 'tertiaryLight' : 'tertiaryDark', w: "100%" }, styles.item, { minH: size === 'lg' ? '56px' : '40px' }, rest),
+        react_1.default.createElement(button_1.default, Object.assign({ alignItems: "center", border: "none", borderLeft: "3px solid transparent", borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined, borderRadius: 0, className: (0, utils_1.cs)('vui-sidemenu-item', className), color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10', h: "auto", justifyContent: "space-between", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), p: 0, variant: isDark ? 'tertiaryLight' : 'tertiaryDark', w: "100%" }, styles.item, { minH: size === 'lg' ? '56px' : '40px' }, rest),
             innerContent,
-            !!children && isExpandedInternal && (react_1.default.createElement(button_1.default, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: isDark ? 'tertiaryLight' : 'tertiaryDark' }))),
+            hasChildrenExpanded && (react_1.default.createElement(button_1.default, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: isDark ? 'tertiaryLight' : 'tertiaryDark' }))),
         !!children && displayChildren && (react_1.default.createElement(box_1.default, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
 });
 exports.default = exports.SidemenuItem;

package/dist/esm/sidemenu/sidemenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAKnE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SAsDd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAKnE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SA+Cd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}

package/dist/esm/sidemenu/sidemenu.js

@@ -18,11 +18,10 @@ export const SidemenuBase = styled.divBox `
 /** A collapsible side menu for navigation. */
 export const Sidemenu = vui((props, ref) => {
     const { children, className, items, isExpanded = false, size, variant, width = 280, ...rest } = props;
-    const styles = useStyleConfig('Sidemenu', props);
     const [isExpandedInternal, setIsExpandedInternal] = useState(isExpanded);
     const context = useMemo(() => filterUndefined({ size, variant, isExpandedInternal }), [size, variant, isExpandedInternal]);
+    const styles = useStyleConfig('Sidemenu', props);
     const isDark = variant === 'dark';
-    const aliasedProps = filterUndefined({});
     useEffect(() => {
         setIsExpandedInternal(isExpanded);
     }, [isExpanded]);
@@ -31,7 +30,7 @@ export const Sidemenu = vui((props, ref) => {
     const icon = `falArrow${isExpandedInternal ? 'Left' : 'Right'}`;
     const justifyContent = isExpandedInternal ? 'flex-end' : 'center';
     return (React.createElement(SidemenuProvider, { value: context },
-        React.createElement(SidemenuBase, { className: cs('vui-sidemenu', className), ref: ref, w: w, ...styles.container, ...aliasedProps, ...rest },
+        React.createElement(SidemenuBase, { className: cs('vui-sidemenu', className), ref: ref, w: w, ...styles.container, ...rest },
             React.createElement(Box, { flexDirection: "column", flexGrow: 1, overflowX: "hidden", overflowY: "auto", w: "100%" }, items
                 ? items?.map?.((item, key) => React.createElement(SidemenuItem, { key: key, ...item }))
                 : children),

package/dist/esm/sidemenu/sidemenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAK7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,wCAgEmB,CAAA;AAE5C,eAAe,YAAY,CAAA"}
+{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAK7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,wCAmEmB,CAAA;AAE5C,eAAe,YAAY,CAAA"}

package/dist/esm/sidemenu/sidemenuItem.js

@@ -13,6 +13,7 @@ export const SidemenuItem = vui((props, ref) => {
     const { variant, size, isExpandedInternal } = useSidemenuContext();
     const styles = useStyleConfig('Sidemenu', useSidemenuContext);
     const isDark = variant === 'dark';
+    const hasChildrenExpanded = !!children && isExpandedInternal;
     const innerContent = isExpandedInternal ? (React.createElement(Box, { centerV: true, px: 2, py: 1, w: "100%", whiteSpace: "pre" },
         React.createElement(Icon, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize }),
         React.createElement(T, { isTruncated: true, ml: 2 }, title))) : (React.createElement(Box, { centerV: true, px: 2, py: 1, w: "100%" },
@@ -23,9 +24,9 @@ export const SidemenuItem = vui((props, ref) => {
         setDisplayChildren(!displayChildren);
     };
     return (React.createElement(Box, { flexDirection: "column", ref: ref, w: "100%" },
-        React.createElement(Button, { alignItems: "center", border: "none", borderLeft: "3px solid transparent", borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined, borderRadius: 0, className: cs('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick?.(), p: 0, variant: isDark ? 'tertiaryLight' : 'tertiaryDark', w: "100%", ...styles.item, minH: size === 'lg' ? '56px' : '40px', ...rest },
+        React.createElement(Button, { alignItems: "center", border: "none", borderLeft: "3px solid transparent", borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined, borderRadius: 0, className: cs('vui-sidemenu-item', className), color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10', h: "auto", justifyContent: "space-between", onClick: () => onClick?.(), p: 0, variant: isDark ? 'tertiaryLight' : 'tertiaryDark', w: "100%", ...styles.item, minH: size === 'lg' ? '56px' : '40px', ...rest },
             innerContent,
-            !!children && isExpandedInternal && (React.createElement(Button, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: isDark ? 'tertiaryLight' : 'tertiaryDark' }))),
+            hasChildrenExpanded && (React.createElement(Button, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: isDark ? 'tertiaryLight' : 'tertiaryDark' }))),
         !!children && displayChildren && (React.createElement(Box, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
 });
 export default SidemenuItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.10.0-beta.1",
+  "version": "2.10.0-beta.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",

package/src/sidemenu/sidemenu.tsx

@@ -22,16 +22,16 @@ export const SidemenuBase = styled.divBox`
 /** 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 styles = useStyleConfig('Sidemenu', props)
+
   const [isExpandedInternal, setIsExpandedInternal] = useState(isExpanded)
   const context = useMemo(
     () => filterUndefined({ size, variant, isExpandedInternal }),
     [size, variant, isExpandedInternal]
   )
 
-  const isDark = variant === 'dark'
+  const styles = useStyleConfig('Sidemenu', props)
 
-  const aliasedProps = filterUndefined<SidemenuProps>({})
+  const isDark = variant === 'dark'
 
   useEffect(() => {
     setIsExpandedInternal(isExpanded)
@@ -45,14 +45,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
 
   return (
     <SidemenuProvider value={context}>
-      <SidemenuBase
-        className={cs('vui-sidemenu', className)}
-        ref={ref}
-        w={w}
-        {...styles.container}
-        {...aliasedProps}
-        {...rest}
-      >
+      <SidemenuBase className={cs('vui-sidemenu', className)} ref={ref} 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} />)

package/src/sidemenu/sidemenuItem.tsx

@@ -15,7 +15,9 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
   const [displayChildren, setDisplayChildren] = useState(true)
   const { variant, size, isExpandedInternal } = useSidemenuContext()
   const styles = useStyleConfig('Sidemenu', useSidemenuContext)
+
   const isDark = variant === 'dark'
+  const hasChildrenExpanded = !!children && isExpandedInternal
 
   const innerContent = isExpandedInternal ? (
     <Box centerV px={2} py={1} w="100%" whiteSpace="pre">
@@ -45,6 +47,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
         borderLeftColor={isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined}
         borderRadius={0}
         className={cs('vui-sidemenu-item', className)}
+        color={hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10'}
         h="auto"
         justifyContent="space-between"
         onClick={() => onClick?.()}
@@ -56,7 +59,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
         {...rest}
       >
         {innerContent}
-        {!!children && isExpandedInternal && (
+        {hasChildrenExpanded && (
           <Button
             className="vui-sidemenu-item-expand"
             icon={displayChildren ? 'falChevronUp' : 'falChevronDown'}