@spaced-out/ui-design-system 0.1.94-beta.7 → 0.1.94

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.94](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.8...v0.1.94) (2024-05-22)
+
+### [0.1.94-beta.8](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.7...v0.1.94-beta.8) (2024-05-22)
+
+
+### Features
+
+* added header and footer in menu component ([#210](https://github.com/spaced-out/ui-design-system/issues/210)) ([3d52788](https://github.com/spaced-out/ui-design-system/commit/3d52788a4aea929b4db7cb53b956c046ea1b7d79))
+* adding back button in page title ([#213](https://github.com/spaced-out/ui-design-system/issues/213)) ([920e90e](https://github.com/spaced-out/ui-design-system/commit/920e90ed20c2df97c8fcc699294710853613ee29))
+* button disabled and name changes ([#216](https://github.com/spaced-out/ui-design-system/issues/216)) ([7b26959](https://github.com/spaced-out/ui-design-system/commit/7b26959ad27439ad91de9307108ac834a276c566))
+
+
+### Bug Fixes
+
+* removed the additional default space from the chart ([#215](https://github.com/spaced-out/ui-design-system/issues/215)) ([36e49c9](https://github.com/spaced-out/ui-design-system/commit/36e49c9bfd609e2a08a08c8fe533ec8779b5cf10))
+
 ### [0.1.94-beta.7](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.6...v0.1.94-beta.7) (2024-05-20)
 
 

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -50,6 +50,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     isFluid,
     tooltip,
     onClick,
+    clickAwayRef,
     ...restButtonProps
   } = _ref;
   const menuBtnRef = React.useRef(null);
@@ -77,7 +78,8 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     }
   };
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
-    onChange: onMenuToggle
+    onChange: onMenuToggle,
+    clickAwayRef: clickAwayRef
   }, _ref2 => {
     let {
       isOpen,

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -17,7 +17,7 @@ import {
 import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
-import {ClickAway} from '../../utils/click-away';
+import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
 import type {ButtonProps} from '../Button';
 import {Button} from '../Button';
 import {ConditionalWrapper} from '../ConditionalWrapper';
@@ -62,6 +62,7 @@ export type ButtonDropdownProps = {
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   tooltip?: BaseTooltipProps,
+  clickAwayRef?: ClickAwayRefType,
   ...
 };
 
@@ -86,6 +87,7 @@ export const ButtonDropdown: React$AbstractComponent<
       isFluid,
       tooltip,
       onClick,
+      clickAwayRef,
       ...restButtonProps
     }: ButtonDropdownProps,
     forwardRef,
@@ -112,7 +114,7 @@ export const ButtonDropdown: React$AbstractComponent<
     };
 
     return (
-      <ClickAway onChange={onMenuToggle}>
+      <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
         {({isOpen, onOpen, cancelNext, clickAway}) => (
           <div
             data-testid="ButtonDropdown"

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js

@@ -26,6 +26,10 @@ const SimpleButtonDropdownBase = (props, ref) => {
     resolveSecondaryLabel,
     children,
     isFluid,
+    menuVirtualization,
+    header,
+    footer,
+    clickAwayRef,
     ...buttonProps
   } = props;
   const [btnText, setBtnText] = React.useState('');
@@ -60,6 +64,7 @@ const SimpleButtonDropdownBase = (props, ref) => {
     onOptionSelect: handleOptionChange,
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
+    clickAwayRef: clickAwayRef,
     menu: {
       isFluid,
       options,
@@ -68,7 +73,10 @@ const SimpleButtonDropdownBase = (props, ref) => {
       allowSearch,
       resolveLabel,
       resolveSecondaryLabel,
-      size
+      size,
+      virtualization: menuVirtualization,
+      header,
+      footer
     }
   }), optionsVariant === 'checkbox' ? btnText : children);
 };

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow

@@ -2,12 +2,13 @@
 
 import * as React from 'react';
 
+import type {ClickAwayRefType} from '../../utils/click-away';
 import {
   getButtonLabelFromSelectedKeys,
   getSelectedKeysFromSelectedOption,
 } from '../../utils/menu';
 import type {ButtonProps} from '../Button';
-import type {MenuOption, MenuOptionsVariant} from '../Menu';
+import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
 import type {BaseTooltipProps} from '../Tooltip';
 
 import type {AnchorType} from './ButtonDropdown';
@@ -34,10 +35,12 @@ export type SimpleButtonDropdownProps = {
 
   // Menu props
   options?: Array<MenuOption>,
-
   optionsVariant?: MenuOptionsVariant,
   allowSearch?: boolean,
   selectedKeys?: Array<string>,
+  menuVirtualization?: Virtualization,
+  header?: React.Node,
+  footer?: React.Node,
 
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -47,6 +50,7 @@ export type SimpleButtonDropdownProps = {
   // Resolvers
   resolveLabel?: (option: MenuOption) => string | React.Node,
   resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  clickAwayRef?: ClickAwayRefType,
   ...
 };
 
@@ -66,6 +70,10 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
     resolveSecondaryLabel,
     children,
     isFluid,
+    menuVirtualization,
+    header,
+    footer,
+    clickAwayRef,
     ...buttonProps
   } = props;
 
@@ -119,6 +127,7 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
       onOptionSelect={handleOptionChange}
       onMenuOpen={onMenuOpen}
       onMenuClose={onMenuClose}
+      clickAwayRef={clickAwayRef}
       menu={{
         isFluid,
         options,
@@ -128,6 +137,9 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
         resolveLabel,
         resolveSecondaryLabel,
         size,
+        virtualization: menuVirtualization,
+        header,
+        footer,
       }}
     >
       {optionsVariant === 'checkbox' ? btnText : children}

package/lib/components/Dropdown/Dropdown.js

@@ -28,6 +28,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onMenuClose,
     scrollMenuToBottom = false,
     dropdownInputText = '',
+    clickAwayRef,
     ...inputProps
   } = _ref;
   const dropdownRef = React.useRef();
@@ -51,7 +52,8 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   };
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
-    onChange: onMenuToggle
+    onChange: onMenuToggle,
+    clickAwayRef: clickAwayRef
   }, _ref2 => {
     let {
       isOpen,

package/lib/components/Dropdown/Dropdown.js.flow

@@ -15,7 +15,7 @@ import {
 import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
-import {ClickAway} from '../../utils/click-away';
+import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
 import type {InputProps} from '../Input';
 import {Input} from '../Input';
 import type {MenuOption, MenuProps} from '../Menu';
@@ -35,6 +35,7 @@ export type DropdownProps = {
   scrollMenuToBottom?: boolean,
   dropdownInputText?: string,
   menu?: MenuProps,
+  clickAwayRef?: ClickAwayRefType,
   ...
 };
 
@@ -53,6 +54,7 @@ export const Dropdown: React$AbstractComponent<
       onMenuClose,
       scrollMenuToBottom = false,
       dropdownInputText = '',
+      clickAwayRef,
       ...inputProps
     }: DropdownProps,
     ref,
@@ -75,7 +77,7 @@ export const Dropdown: React$AbstractComponent<
     };
 
     return (
-      <ClickAway onChange={onMenuToggle}>
+      <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
         {({isOpen, onOpen, cancelNext, clickAway}) => (
           <div
             data-testid="Dropdown"

package/lib/components/Dropdown/SimpleDropdown.js

@@ -26,6 +26,9 @@ const SimpleDropdownBase = (props, ref) => {
     menuVirtualization,
     resolveSecondaryLabel,
     isMenuFluid = true,
+    header,
+    footer,
+    clickAwayRef,
     ...inputProps
   } = props;
   const [dropdownInputText, setDropdownInputText] = React.useState('');
@@ -61,6 +64,7 @@ const SimpleDropdownBase = (props, ref) => {
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
     dropdownInputText: dropdownInputText,
+    clickAwayRef: clickAwayRef,
     menu: {
       options,
       selectedKeys: dropdownSelectedKeys,
@@ -70,7 +74,9 @@ const SimpleDropdownBase = (props, ref) => {
       resolveSecondaryLabel,
       virtualization: menuVirtualization,
       size,
-      isFluid: isMenuFluid
+      isFluid: isMenuFluid,
+      header,
+      footer
     }
   }));
 };

package/lib/components/Dropdown/SimpleDropdown.js.flow

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import type {ClickAwayRefType} from '../../utils/click-away';
 import {
   getSelectedKeysFromSelectedOption,
   getTextLabelFromSelectedKeys,
@@ -26,15 +27,17 @@ export type SimpleDropdownProps = {
   ...InputProps,
 
   classNames?: ClassNames,
+  clickAwayRef?: ClickAwayRefType,
 
   // Menu props
   options?: Array<MenuOption>,
-
   optionsVariant?: MenuOptionsVariant,
   allowSearch?: boolean,
   selectedKeys?: Array<string>,
   isMenuFluid?: boolean,
   menuVirtualization?: Virtualization,
+  header?: React.Node,
+  footer?: React.Node,
 
   // events
   onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -63,6 +66,9 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     menuVirtualization,
     resolveSecondaryLabel,
     isMenuFluid = true,
+    header,
+    footer,
+    clickAwayRef,
     ...inputProps
   } = props;
 
@@ -117,6 +123,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
       onMenuOpen={onMenuOpen}
       onMenuClose={onMenuClose}
       dropdownInputText={dropdownInputText}
+      clickAwayRef={clickAwayRef}
       menu={{
         options,
         selectedKeys: dropdownSelectedKeys,
@@ -127,6 +134,8 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
         virtualization: menuVirtualization,
         size,
         isFluid: isMenuFluid,
+        header,
+        footer,
       }}
     />
   );

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -29,6 +29,7 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onMenuOpen,
     onMenuClose,
     children,
+    clickAwayRef,
     ...restButtonProps
   } = _ref;
   const menuBtnRef = React.useRef(null);
@@ -49,7 +50,8 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
-    onChange: onMenuToggle
+    onChange: onMenuToggle,
+    clickAwayRef: clickAwayRef
   }, _ref2 => {
     let {
       isOpen,

package/lib/components/InlineDropdown/InlineDropdown.js.flow

@@ -16,7 +16,7 @@ import {
 
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
-import {ClickAway} from '../../utils/click-away';
+import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
 import type {UnstyledButtonProps} from '../Button';
 import {UnstyledButton} from '../Button';
 import type {AnchorType} from '../ButtonDropdown';
@@ -42,6 +42,7 @@ export type InlineDropdownProps = {
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   size?: 'medium' | 'small' | 'extraSmall',
+  clickAwayRef?: ClickAwayRefType,
   ...
 };
 
@@ -60,6 +61,7 @@ export const InlineDropdown: React$AbstractComponent<
       onMenuOpen,
       onMenuClose,
       children,
+      clickAwayRef,
       ...restButtonProps
     }: InlineDropdownProps,
     ref,
@@ -79,7 +81,7 @@ export const InlineDropdown: React$AbstractComponent<
     };
 
     return (
-      <ClickAway onChange={onMenuToggle}>
+      <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
         {({isOpen, onOpen, cancelNext, clickAway}) => (
           <div
             data-testid="InlineDropdown"

package/lib/components/InlineDropdown/SimpleInlineDropdown.js

@@ -26,6 +26,10 @@ const SimpleInlineDropdownBase = (props, ref) => {
     resolveSecondaryLabel,
     children,
     isFluid,
+    menuVirtualization,
+    header,
+    footer,
+    clickAwayRef,
     ...buttonProps
   } = props;
   const [btnText, setBtnText] = React.useState('');
@@ -60,6 +64,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
     onOptionSelect: handleOptionChange,
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
+    clickAwayRef: clickAwayRef,
     menu: {
       isFluid,
       options,
@@ -68,7 +73,10 @@ const SimpleInlineDropdownBase = (props, ref) => {
       allowSearch,
       resolveLabel,
       resolveSecondaryLabel,
-      size: size === 'extraSmall' ? 'small' : size
+      size: size === 'extraSmall' ? 'small' : size,
+      virtualization: menuVirtualization,
+      header,
+      footer
     }
   }), optionsVariant === 'checkbox' ? btnText : children);
 };

package/lib/components/InlineDropdown/SimpleInlineDropdown.js.flow

@@ -2,13 +2,14 @@
 
 import * as React from 'react';
 
+import type {ClickAwayRefType} from '../../utils/click-away';
 import {
   getButtonLabelFromSelectedKeys,
   getSelectedKeysFromSelectedOption,
 } from '../../utils/menu';
 import type {ButtonProps} from '../Button';
 import type {AnchorType} from '../ButtonDropdown';
-import type {MenuOption, MenuOptionsVariant} from '../Menu';
+import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
 
 import {InlineDropdown} from './InlineDropdown';
 
@@ -40,10 +41,14 @@ export type SimpleInlineDropdownProps = {
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
+  menuVirtualization?: Virtualization,
+  header?: React.Node,
+  footer?: React.Node,
 
   // Resolvers
   resolveLabel?: (option: MenuOption) => string | React.Node,
   resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  clickAwayRef?: ClickAwayRefType,
   ...
 };
 
@@ -63,6 +68,10 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
     resolveSecondaryLabel,
     children,
     isFluid,
+    menuVirtualization,
+    header,
+    footer,
+    clickAwayRef,
     ...buttonProps
   } = props;
 
@@ -116,6 +125,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
       onOptionSelect={handleOptionChange}
       onMenuOpen={onMenuOpen}
       onMenuClose={onMenuClose}
+      clickAwayRef={clickAwayRef}
       menu={{
         isFluid,
         options,
@@ -125,6 +135,9 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
         resolveLabel,
         resolveSecondaryLabel,
         size: size === 'extraSmall' ? 'small' : size,
+        virtualization: menuVirtualization,
+        header,
+        footer,
       }}
     >
       {optionsVariant === 'checkbox' ? btnText : children}

package/lib/components/Menu/Menu.js

@@ -133,30 +133,46 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
       enable: false,
       menuHeight: null,
       itemHeight: null
-    }
+    },
+    header,
+    footer
   } = props;
   const [searchText, setSearchText] = React.useState('');
   const {
     menuHeight
   } = virtualization;
+  const hasHeader = header ? true : false;
+  const hasFooter = footer ? true : false;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_MenuModule.default.menuCard, {
       [_MenuModule.default.fluid]: isFluid,
       [_MenuModule.default.medium]: size === 'medium',
-      [_MenuModule.default.small]: size === 'small'
+      [_MenuModule.default.mediumWithHeader]: size === 'medium' && hasHeader && !hasFooter,
+      [_MenuModule.default.mediumWithFooter]: size === 'medium' && !hasHeader && hasFooter,
+      [_MenuModule.default.mediumWithHeaderAndFooter]: size === 'medium' && hasFooter && hasHeader,
+      [_MenuModule.default.small]: size === 'small',
+      [_MenuModule.default.smallWithHeader]: size === 'small' && hasHeader && !hasFooter,
+      [_MenuModule.default.smallWithFooter]: size === 'small' && !hasHeader && hasFooter,
+      [_MenuModule.default.smallWithHeaderAndFooter]: size === 'small' && hasFooter && hasHeader,
+      [_MenuModule.default.menuCardTopPaddingZero]: header,
+      [_MenuModule.default.menuCardBottomPaddingZero]: footer
     }, classNames?.wrapper),
     style: {
       width,
       maxHeight: menuHeight ? menuHeight + 'px' : ''
     },
     ref: ref
-  }, allowSearch && /*#__PURE__*/React.createElement(_SearchInput.SearchInput, {
+  }, hasHeader && /*#__PURE__*/React.createElement("div", {
+    className: _MenuModule.default.menuHeader
+  }, header), allowSearch && /*#__PURE__*/React.createElement(_SearchInput.SearchInput, {
     value: searchText,
     onChange: e => setSearchText(e.target.value),
     onClear: () => setSearchText(''),
     size: size
   }), /*#__PURE__*/React.createElement(RenderOption, _extends({}, props, {
     searchText: searchText
-  })));
+  })), hasFooter && /*#__PURE__*/React.createElement("div", {
+    className: _MenuModule.default.menuFooter
+  }, footer));
 });
 exports.Menu = Menu;

package/lib/components/Menu/Menu.js.flow

@@ -78,6 +78,8 @@ export type BaseMenuProps = {
   resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
   // When virtualization is enabled, the MenuOptionButtons will be rendered only when they are present in the Menu's viewport
   virtualization?: Virtualization,
+  header?: React.Node,
+  footer?: React.Node,
 };
 
 export type MenuOptionTypes = {
@@ -311,9 +313,15 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
           menuHeight: null,
           itemHeight: null,
         },
+        header,
+        footer,
       } = props;
       const [searchText, setSearchText] = React.useState('');
       const {menuHeight} = virtualization;
+
+      const hasHeader = header ? true : false;
+      const hasFooter = footer ? true : false;
+
       return (
         <div
           className={classify(
@@ -321,7 +329,21 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
             {
               [css.fluid]: isFluid,
               [css.medium]: size === 'medium',
+              [css.mediumWithHeader]:
+                size === 'medium' && hasHeader && !hasFooter,
+              [css.mediumWithFooter]:
+                size === 'medium' && !hasHeader && hasFooter,
+              [css.mediumWithHeaderAndFooter]:
+                size === 'medium' && hasFooter && hasHeader,
               [css.small]: size === 'small',
+              [css.smallWithHeader]:
+                size === 'small' && hasHeader && !hasFooter,
+              [css.smallWithFooter]:
+                size === 'small' && !hasHeader && hasFooter,
+              [css.smallWithHeaderAndFooter]:
+                size === 'small' && hasFooter && hasHeader,
+              [css.menuCardTopPaddingZero]: header,
+              [css.menuCardBottomPaddingZero]: footer,
             },
             classNames?.wrapper,
           )}
@@ -331,6 +353,7 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
           }}
           ref={ref}
         >
+          {hasHeader && <div className={css.menuHeader}>{header}</div>}
           {allowSearch && (
             <SearchInput
               value={searchText}
@@ -340,6 +363,7 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
             />
           )}
           <RenderOption {...props} searchText={searchText} />
+          {hasFooter && <div className={css.menuFooter}>{footer}</div>}
         </div>
       );
     },

package/lib/components/Menu/Menu.module.css

@@ -22,6 +22,7 @@
   size160,
   size42,
   size34,
+  size50,
   size300,
   size240,
   size228,
@@ -34,12 +35,12 @@
   spaceSmall,
   spaceXSmall,
   spaceXXSmall,
-  spaceMedium,
-  spaceNone
+  spaceMedium
 ) from '../../styles/variables/_space.css';
 
 @value (
-  elevationMenu
+  elevationMenu,
+  elevationCard
 ) from '../../styles/variables/_elevation.css';
 
 .menuCard {
@@ -49,13 +50,21 @@
   background-color: colorBackgroundTertiary;
   display: flex;
   flex-flow: column;
-  padding: spaceSmall spaceXSmall;
+  padding: spaceXSmall;
   min-width: size160;
   border-radius: borderRadiusMedium;
   overflow: auto;
   z-index: elevationMenu;
 }
 
+.menuCardTopPaddingZero {
+  padding-top: spaceNone;
+}
+
+.menuCardBottomPaddingZero {
+  padding-bottom: spaceNone;
+}
+
 .menuCard:empty {
   padding: spaceNone;
   border: none;
@@ -67,12 +76,30 @@
   max-height: size276;
 }
 
+.mediumWithHeader,
+.mediumWithFooter {
+  max-height: calc(size276 + size50);
+}
+
+.mediumWithHeaderAndFooter {
+  max-height: calc(size276 + size50 + size50);
+}
+
 .small {
   width: size240;
   min-width: size240;
   max-height: size228;
 }
 
+.smallWithHeader,
+.smallWithHeaderAndFooter {
+  max-height: calc(size228 + size50);
+}
+
+.smallWithHeaderAndFooter {
+  max-height: calc(size228 + size50 + size50);
+}
+
 .fluid {
   width: sizeFluid;
   min-width: size160;
@@ -223,3 +250,42 @@
   margin-bottom: spaceXSmall;
   margin-left: spaceSmall;
 }
+
+.menuHeader {
+  position: sticky;
+  background-color: colorBackgroundTertiary;
+  padding: spaceXSmall spaceNone;
+  top: spaceNone;
+  margin-bottom: spaceXSmall;
+  z-index: calc(elevationCard/4);
+  min-height: size50;
+  max-height: size50;
+}
+
+.menuHeader::after {
+  content: '';
+  position: absolute;
+  left: calc(spaceXSmall * -1);
+  right: calc(spaceXSmall * -1);
+  bottom: spaceNone;
+  border-bottom: borderWidthPrimary solid colorBorderPrimary;
+}
+
+.menuFooter {
+  position: sticky;
+  background-color: colorBackgroundTertiary;
+  padding: spaceXSmall spaceNone;
+  bottom: spaceNone;
+  margin-top: spaceXSmall;
+  min-height: size50;
+  max-height: size50;
+}
+
+.menuFooter::before {
+  content: '';
+  position: absolute;
+  left: calc(spaceXSmall * -1);
+  right: calc(spaceXSmall * -1);
+  top: spaceNone;
+  border-top: borderWidthPrimary solid colorBorderPrimary;
+}