@veracity/vui 2.12.0 → 2.13.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,YAAY,EAAE,MAAM,SAAS,CAAA;AAO5E,OAAO,EAAkB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAK3C,eAAO,MAAM,UAAU,+HAItB,CAAA;AAGD,oGAAoG;AACpG,eAAO,MAAM,MAAM;YAmMT,mBAAmB;aAClB,oBAAoB;aACpB,oBAAoB;UACvB,iBAAiB;SAClB,gBAAgB;aACZ,oBAAoB;CAC9B,CAAA;AASD,eAAe,MAAM,CAAA"}
1
+ {"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,YAAY,EAAE,MAAM,SAAS,CAAA;AAO5E,OAAO,EAAkB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAK3C,eAAO,MAAM,UAAU,+HAItB,CAAA;AAGD,oGAAoG;AACpG,eAAO,MAAM,MAAM;YAoMT,mBAAmB;aAClB,oBAAoB;aACpB,oBAAoB;UACvB,iBAAiB;SAClB,gBAAgB;aACZ,oBAAoB;CAC9B,CAAA;AASD,eAAe,MAAM,CAAA"}
@@ -76,7 +76,7 @@ exports.Footer = (0, core_1.vui)((props, ref) => {
76
76
  react_1.default.createElement(footerRow_1.default, { alignContent: "space-between", w: 1 },
77
77
  react_1.default.createElement(box_1.Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true }, applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.map((link, index) => (react_1.default.createElement(box_1.Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, key: index, minW: 70 },
78
78
  link.items && (react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg" }, rest),
79
- react_1.default.createElement(menu_1.default.Button, Object.assign({ as: link_1.Link, className: "vui-footerLink-trigger", pt: "3px", text: link.text, title: link.text }, styles.link, rest)),
79
+ react_1.default.createElement(menu_1.default.Button, Object.assign({ as: link_1.Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text }, styles.link, rest)),
80
80
  react_1.default.createElement(menu_1.default.List, Object.assign({ maxH: 400, right: 0, w: 320 }, styles.list), link.items.map(({ text, url }, index) => (react_1.default.createElement(menu_1.default.Item, Object.assign({ isTruncated: true, key: index, linkProps: { href: url }, text: text, title: text }, styles.item))))))),
81
81
  !link.items && react_1.default.createElement(footerLink_1.default, Object.assign({}, link)))))),
82
82
  downLg && react_1.default.createElement(divider_1.Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }),
@@ -1 +1 @@
1
- {"version":3,"file":"headerContent.d.ts","sourceRoot":"","sources":["../../../src/header/headerContent.tsx"],"names":[],"mappings":"AAQA,yEAAyE;AACzE,eAAO,MAAM,aAAa,kEAgBxB,CAAA;AAEF,eAAe,aAAa,CAAA"}
1
+ {"version":3,"file":"headerContent.d.ts","sourceRoot":"","sources":["../../../src/header/headerContent.tsx"],"names":[],"mappings":"AAQA,yEAAyE;AACzE,eAAO,MAAM,aAAa,kEAiBxB,CAAA;AAEF,eAAe,aAAa,CAAA"}
@@ -24,6 +24,6 @@ const context_1 = require("./context");
24
24
  exports.HeaderContent = (0, core_1.vui)((props, ref) => {
25
25
  const { className } = props, rest = __rest(props, ["className"]);
26
26
  const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
27
- return (react_1.default.createElement(box_1.default, Object.assign({ centerV: true, className: (0, utils_1.cs)('vui-headerContent', className), h: 1, mx: "auto", ref: ref, w: 1 }, styles.content, rest)));
27
+ return (react_1.default.createElement(box_1.default, Object.assign({ centerV: true, className: (0, utils_1.cs)('vui-headerContent', className), h: 1, mx: "auto", position: "relative", ref: ref, w: 1 }, styles.content, rest)));
28
28
  });
29
29
  exports.default = exports.HeaderContent;
@@ -1 +1 @@
1
- {"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3D,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SAsEd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}
1
+ {"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3D,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SAmFd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}
@@ -51,7 +51,7 @@ const sidemenuTop_1 = __importDefault(require("./sidemenuTop"));
51
51
  /** A collapsible side menu for navigation. */
52
52
  exports.Sidemenu = (0, core_1.vui)((props, ref) => {
53
53
  var _a;
54
- const { children, className, items, isExpanded = false, size, variant, width = 280, onNavigate } = props, rest = __rest(props, ["children", "className", "items", "isExpanded", "size", "variant", "width", "onNavigate"]);
54
+ const { children, className, items, isExpanded = false, isSticky = false, size, variant, width = 280, onNavigate } = props, rest = __rest(props, ["children", "className", "items", "isExpanded", "isSticky", "size", "variant", "width", "onNavigate"]);
55
55
  const [isExpandedInternal, setIsExpandedInternal] = (0, react_1.useState)(isExpanded);
56
56
  const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size, variant, isExpandedInternal }), [size, variant, isExpandedInternal]);
57
57
  const styles = (0, core_1.useStyleConfig)('Sidemenu', props);
@@ -70,7 +70,7 @@ exports.Sidemenu = (0, core_1.vui)((props, ref) => {
70
70
  onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(item.path);
71
71
  }
72
72
  return (react_1.default.createElement(context_1.SidemenuProvider, { value: context },
73
- react_1.default.createElement(box_1.default, Object.assign({ className: (0, utils_1.cs)('vui-sidemenu', className), elevation: "3", flexDirection: "column", minWidth: 0, overflowX: "hidden", ref: ref, transitionDuration: "normal", w: w }, styles.container, rest),
73
+ react_1.default.createElement(box_1.default, Object.assign({ className: (0, utils_1.cs)('vui-sidemenu', className), elevation: "3", flexDirection: "column", minWidth: 0, overflowX: "hidden", position: isSticky ? 'sticky' : 'static', ref: ref, top: isSticky ? (top ? top : 0) : 'auto', transitionDuration: "normal", w: w }, styles.container, rest),
74
74
  react_1.default.createElement(box_1.default, { flexDirection: "column", flexGrow: 1, overflowX: "hidden", overflowY: "auto", w: "100%" }, items
75
75
  ? (_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({ isActive: (0, utils_1.isActivePath)(item === null || item === void 0 ? void 0 : item.path), key: key }, item, { onClick: () => onItemClick(item) }))))
76
76
  : children),
@@ -9,6 +9,7 @@ export type SidemenuProps = SystemProps & ThemingProps<'Sidemenu'> & {
9
9
  items?: SidemenuItemProps[];
10
10
  /** Whether the menu is expanded @default false */
11
11
  isExpanded?: boolean;
12
+ isSticky?: boolean;
12
13
  /** 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 */
13
14
  onNavigate?: (to: string) => void;
14
15
  /** With of the container when the side menu is expanded @default 280 */
@@ -1 +1 @@
1
- {"version":3,"file":"sidemenu.types.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC3B,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8JAA8J;IAC9J,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAEH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG;IACzC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wBAAwB;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA"}
1
+ {"version":3,"file":"sidemenu.types.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC3B,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8JAA8J;IAC9J,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAEH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG;IACzC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wBAAwB;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,YAAY,EAAE,MAAM,SAAS,CAAA;AAO5E,OAAO,EAAkB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAK3C,eAAO,MAAM,UAAU,+HAItB,CAAA;AAGD,oGAAoG;AACpG,eAAO,MAAM,MAAM;YAmMT,mBAAmB;aAClB,oBAAoB;aACpB,oBAAoB;UACvB,iBAAiB;SAClB,gBAAgB;aACZ,oBAAoB;CAC9B,CAAA;AASD,eAAe,MAAM,CAAA"}
1
+ {"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,YAAY,EAAE,MAAM,SAAS,CAAA;AAO5E,OAAO,EAAkB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAK3C,eAAO,MAAM,UAAU,+HAItB,CAAA;AAGD,oGAAoG;AACpG,eAAO,MAAM,MAAM;YAoMT,mBAAmB;aAClB,oBAAoB;aACpB,oBAAoB;UACvB,iBAAiB;SAClB,gBAAgB;aACZ,oBAAoB;CAC9B,CAAA;AASD,eAAe,MAAM,CAAA"}
@@ -58,7 +58,7 @@ export const Footer = vui((props, ref) => {
58
58
  React.createElement(FooterRow, { alignContent: "space-between", w: 1 },
59
59
  React.createElement(Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true }, applicationLinks?.map((link, index) => (React.createElement(Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, key: index, minW: 70 },
60
60
  link.items && (React.createElement(Menu, { isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg", ...rest },
61
- React.createElement(Menu.Button, { as: Link, className: "vui-footerLink-trigger", pt: "3px", text: link.text, title: link.text, ...styles.link, ...rest }),
61
+ React.createElement(Menu.Button, { as: Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text, ...styles.link, ...rest }),
62
62
  React.createElement(Menu.List, { maxH: 400, right: 0, w: 320, ...styles.list }, link.items.map(({ text, url }, index) => (React.createElement(Menu.Item, { isTruncated: true, key: index, linkProps: { href: url }, text: text, title: text, ...styles.item })))))),
63
63
  !link.items && React.createElement(FooterLink, { ...link }))))),
64
64
  downLg && React.createElement(Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }),
@@ -1 +1 @@
1
- {"version":3,"file":"headerContent.d.ts","sourceRoot":"","sources":["../../../src/header/headerContent.tsx"],"names":[],"mappings":"AAQA,yEAAyE;AACzE,eAAO,MAAM,aAAa,kEAgBxB,CAAA;AAEF,eAAe,aAAa,CAAA"}
1
+ {"version":3,"file":"headerContent.d.ts","sourceRoot":"","sources":["../../../src/header/headerContent.tsx"],"names":[],"mappings":"AAQA,yEAAyE;AACzE,eAAO,MAAM,aAAa,kEAiBxB,CAAA;AAEF,eAAe,aAAa,CAAA"}
@@ -7,6 +7,6 @@ import { useHeaderContext } from './context';
7
7
  export const HeaderContent = vui((props, ref) => {
8
8
  const { className, ...rest } = props;
9
9
  const styles = useStyleConfig('Header', useHeaderContext());
10
- return (React.createElement(Box, { centerV: true, className: cs('vui-headerContent', className), h: 1, mx: "auto", ref: ref, w: 1, ...styles.content, ...rest }));
10
+ return (React.createElement(Box, { centerV: true, className: cs('vui-headerContent', className), h: 1, mx: "auto", position: "relative", ref: ref, w: 1, ...styles.content, ...rest }));
11
11
  });
12
12
  export default HeaderContent;
@@ -1 +1 @@
1
- {"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3D,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SAsEd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}
1
+ {"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAK3D,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,8CAA8C;AAC9C,eAAO,MAAM,QAAQ;SAmFd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}
@@ -10,7 +10,7 @@ import SidemenuItem from './sidemenuItem';
10
10
  import SidemenuTop from './sidemenuTop';
11
11
  /** A collapsible side menu for navigation. */
12
12
  export const Sidemenu = vui((props, ref) => {
13
- const { children, className, items, isExpanded = false, size, variant, width = 280, onNavigate, ...rest } = props;
13
+ const { children, className, items, isExpanded = false, isSticky = false, size, variant, width = 280, onNavigate, ...rest } = props;
14
14
  const [isExpandedInternal, setIsExpandedInternal] = useState(isExpanded);
15
15
  const context = useMemo(() => filterUndefined({ size, variant, isExpandedInternal }), [size, variant, isExpandedInternal]);
16
16
  const styles = useStyleConfig('Sidemenu', props);
@@ -28,7 +28,7 @@ export const Sidemenu = vui((props, ref) => {
28
28
  onNavigate?.(item.path);
29
29
  }
30
30
  return (React.createElement(SidemenuProvider, { value: context },
31
- React.createElement(Box, { className: cs('vui-sidemenu', className), elevation: "3", flexDirection: "column", minWidth: 0, overflowX: "hidden", ref: ref, transitionDuration: "normal", w: w, ...styles.container, ...rest },
31
+ React.createElement(Box, { className: cs('vui-sidemenu', className), elevation: "3", flexDirection: "column", minWidth: 0, overflowX: "hidden", position: isSticky ? 'sticky' : 'static', ref: ref, top: isSticky ? (top ? top : 0) : 'auto', transitionDuration: "normal", w: w, ...styles.container, ...rest },
32
32
  React.createElement(Box, { flexDirection: "column", flexGrow: 1, overflowX: "hidden", overflowY: "auto", w: "100%" }, items
33
33
  ? items?.map?.((item, key) => (React.createElement(SidemenuItem, { isActive: isActivePath(item?.path), key: key, ...item, onClick: () => onItemClick(item) })))
34
34
  : children),
@@ -9,6 +9,7 @@ export type SidemenuProps = SystemProps & ThemingProps<'Sidemenu'> & {
9
9
  items?: SidemenuItemProps[];
10
10
  /** Whether the menu is expanded @default false */
11
11
  isExpanded?: boolean;
12
+ isSticky?: boolean;
12
13
  /** 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 */
13
14
  onNavigate?: (to: string) => void;
14
15
  /** With of the container when the side menu is expanded @default 280 */
@@ -1 +1 @@
1
- {"version":3,"file":"sidemenu.types.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC3B,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8JAA8J;IAC9J,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAEH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG;IACzC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wBAAwB;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA"}
1
+ {"version":3,"file":"sidemenu.types.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC3B,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8JAA8J;IAC9J,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAEH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG;IACzC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wBAAwB;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veracity/vui",
3
- "version": "2.12.0",
3
+ "version": "2.13.0-beta.0",
4
4
  "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
5
5
  "module": "./dist/esm/index.js",
6
6
  "main": "./dist/cjs/index.js",
@@ -104,6 +104,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
104
104
  as={Link}
105
105
  className="vui-footerLink-trigger"
106
106
  pt="3px"
107
+ role="button"
107
108
  text={link.text}
108
109
  title={link.text}
109
110
  {...styles.link}
@@ -17,6 +17,7 @@ export const HeaderContent = vui<'div', HeaderContentProps>((props, ref) => {
17
17
  className={cs('vui-headerContent', className)}
18
18
  h={1}
19
19
  mx="auto"
20
+ position="relative"
20
21
  ref={ref}
21
22
  w={1}
22
23
  {...styles.content}
@@ -13,7 +13,18 @@ import SidemenuTop from './sidemenuTop'
13
13
 
14
14
  /** A collapsible side menu for navigation. */
15
15
  export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
16
- const { children, className, items, isExpanded = false, size, variant, width = 280, onNavigate, ...rest } = props
16
+ const {
17
+ children,
18
+ className,
19
+ items,
20
+ isExpanded = false,
21
+ isSticky = false,
22
+ size,
23
+ variant,
24
+ width = 280,
25
+ onNavigate,
26
+ ...rest
27
+ } = props
17
28
 
18
29
  const [isExpandedInternal, setIsExpandedInternal] = useState(isExpanded)
19
30
  const context = useMemo(
@@ -48,7 +59,9 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
48
59
  flexDirection="column"
49
60
  minWidth={0}
50
61
  overflowX="hidden"
62
+ position={isSticky ? 'sticky' : 'static'}
51
63
  ref={ref}
64
+ top={isSticky ? (top ? top : 0) : 'auto'}
52
65
  transitionDuration="normal"
53
66
  w={w}
54
67
  {...styles.container}
@@ -13,6 +13,7 @@ export type SidemenuProps = SystemProps &
13
13
  items?: SidemenuItemProps[]
14
14
  /** Whether the menu is expanded @default false */
15
15
  isExpanded?: boolean
16
+ isSticky?: boolean
16
17
  /** 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 */
17
18
  onNavigate?: (to: string) => void
18
19
  /** With of the container when the side menu is expanded @default 280 */