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

package/lib/components/OptionButton/OptionButton.js

@@ -34,7 +34,8 @@ const OptionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ariaLabel,
     actionType,
     tooltip,
-    classNames
+    classNames,
+    clickAwayRef
   } = _ref;
   const [iconName, setIconName] = React.useState('chevron-down');
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
@@ -87,7 +88,8 @@ const OptionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onMenuClose && onMenuClose();
     },
     onOptionSelect: onOptionSelect,
-    size: size
+    size: size,
+    clickAwayRef: clickAwayRef
   }));
 });
 exports.OptionButton = OptionButton;

package/lib/components/OptionButton/OptionButton.js.flow

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
+import type {ClickAwayRefType} from '../../utils/click-away';
 import type {ButtonProps} from '../Button';
 import {Button} from '../Button';
 import type {AnchorType} from '../ButtonDropdown';
@@ -39,6 +40,7 @@ export type OptionButtonProps = {
   onMenuClose?: () => mixed,
   tooltip?: OptionButtonTooltipProps,
   classNames?: ClassNames,
+  clickAwayRef?: ClickAwayRefType,
   ...
 };
 
@@ -66,6 +68,7 @@ export const OptionButton: React$AbstractComponent<
       actionType,
       tooltip,
       classNames,
+      clickAwayRef,
     }: OptionButtonProps,
     ref,
   ): React.Node => {
@@ -142,6 +145,7 @@ export const OptionButton: React$AbstractComponent<
           }}
           onOptionSelect={onOptionSelect}
           size={size}
+          clickAwayRef={clickAwayRef}
         />
       </div>
     );

package/lib/components/OptionButton/SimpleOptionButton.js

@@ -28,6 +28,10 @@ const SimpleOptionButtonBase = (props, ref) => {
     resolveSecondaryLabel,
     children,
     menuSize = 'small',
+    menuVirtualization,
+    header,
+    footer,
+    clickAwayRef,
     ...buttonProps
   } = props;
   const [optionButtonSelectedKeys, setOptionButtonSelectedKeys] = React.useState(selectedKeys);
@@ -59,6 +63,7 @@ const SimpleOptionButtonBase = (props, ref) => {
     onOptionSelect: handleOptionChange,
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
+    clickAwayRef: clickAwayRef,
     menu: {
       isFluid: false,
       options,
@@ -67,7 +72,10 @@ const SimpleOptionButtonBase = (props, ref) => {
       allowSearch,
       resolveLabel,
       resolveSecondaryLabel,
-      size: menuSize
+      size: menuSize,
+      virtualization: menuVirtualization,
+      header,
+      footer
     }
   }), children);
 };

package/lib/components/OptionButton/SimpleOptionButton.js.flow

@@ -2,10 +2,11 @@
 
 import * as React from 'react';
 
+import type {ClickAwayRefType} from '../../utils/click-away';
 import {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 type {OptionButtonTooltipProps} from './OptionButton';
 import {OptionButton} from './OptionButton';
@@ -36,10 +37,12 @@ export type SimpleOptionButtonProps = {
 
   // 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,
@@ -50,6 +53,7 @@ export type SimpleOptionButtonProps = {
   // Resolvers
   resolveLabel?: (option: MenuOption) => string | React.Node,
   resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  clickAwayRef?: ClickAwayRefType,
   ...
 };
 
@@ -71,6 +75,10 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
     resolveSecondaryLabel,
     children,
     menuSize = 'small',
+    menuVirtualization,
+    header,
+    footer,
+    clickAwayRef,
     ...buttonProps
   } = props;
 
@@ -116,6 +124,7 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
       onOptionSelect={handleOptionChange}
       onMenuOpen={onMenuOpen}
       onMenuClose={onMenuClose}
+      clickAwayRef={clickAwayRef}
       menu={{
         isFluid: false,
         options,
@@ -125,6 +134,9 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
         resolveLabel,
         resolveSecondaryLabel,
         size: menuSize,
+        virtualization: menuVirtualization,
+        header,
+        footer,
       }}
     >
       {children}

package/lib/components/PageTitle/PageTitle.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TabSlot = exports.RightSlot = exports.PageTitle = exports.PageName = exports.PAGE_NAME_LIST = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _PageTitleModule = _interopRequireDefault(require("./PageTitle.module.css"));
@@ -187,7 +188,9 @@ const PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     classNames,
     children,
-    pageNameKey
+    pageNameKey,
+    showBackButton,
+    onBack
   } = _ref4;
   const getNamedComp = comp => {
     const childrenArray = React.Children.toArray(children);
@@ -202,19 +205,28 @@ const PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     }
     return null;
   };
+  const handleBack = () => {
+    onBack && onBack();
+  };
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "PageTitle",
     className: (0, _classify.default)(_PageTitleModule.default.pageTitleWrapper, classNames?.wrapper),
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_PageTitleModule.default.leftSlot, classNames?.leftSlot)
-  }, pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, " "), /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _PageTitleModule.default.headerWithBackBtn
+  }, showBackButton && /*#__PURE__*/React.createElement(_Button.Button, {
+    onClick: handleBack,
+    type: "tertiary",
+    iconLeftName: "chevron-left"
+  }), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, " "), /*#__PURE__*/React.createElement(_Icon.Icon, {
     type: PAGE_NAME_LIST[pageNameKey].iconType,
     name: PAGE_NAME_LIST[pageNameKey].iconName,
     size: "medium",
     color: _Text.TEXT_COLORS.primary,
     swapOpacity: PAGE_NAME_LIST[pageNameKey].iconSwapOpacity
-  })) : getNamedComp('PageName'), getNamedComp('TabSlot')), /*#__PURE__*/React.createElement("div", {
+  })) : getNamedComp('PageName')), getNamedComp('TabSlot')), /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_PageTitleModule.default.rightSlot, classNames?.rightSlot)
   }, getNamedComp('RightSlot')));
 });

package/lib/components/PageTitle/PageTitle.js.flow

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
+import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {TEXT_COLORS, TitleMedium} from '../Text';
 
@@ -19,6 +20,8 @@ export type PageTitleProps = {
   classNames?: ClassNames,
   children?: React.Node,
   pageNameKey?: string,
+  showBackButton?: boolean,
+  onBack?: () => void,
 };
 
 export const PAGE_NAME_LIST = Object.freeze({
@@ -204,7 +207,10 @@ export const PageTitle: React$AbstractComponent<
   PageTitleProps,
   HTMLDivElement,
 > = React.forwardRef<PageTitleProps, HTMLDivElement>(
-  ({classNames, children, pageNameKey}: PageTitleProps, ref): React.Node => {
+  (
+    {classNames, children, pageNameKey, showBackButton, onBack}: PageTitleProps,
+    ref,
+  ): React.Node => {
     const getNamedComp = (comp: string) => {
       const childrenArray = React.Children.toArray(children);
       if (childrenArray.length) {
@@ -219,6 +225,10 @@ export const PageTitle: React$AbstractComponent<
       return null;
     };
 
+    const handleBack = () => {
+      onBack && onBack();
+    };
+
     return (
       <div
         data-testid="PageTitle"
@@ -226,20 +236,29 @@ export const PageTitle: React$AbstractComponent<
         ref={ref}
       >
         <div className={classify(css.leftSlot, classNames?.leftSlot)}>
-          {pageNameKey && PAGE_NAME_LIST[pageNameKey] ? (
-            <PageName>
-              <TitleMedium>{PAGE_NAME_LIST[pageNameKey].title} </TitleMedium>
-              <Icon
-                type={PAGE_NAME_LIST[pageNameKey].iconType}
-                name={PAGE_NAME_LIST[pageNameKey].iconName}
-                size="medium"
-                color={TEXT_COLORS.primary}
-                swapOpacity={PAGE_NAME_LIST[pageNameKey].iconSwapOpacity}
+          <div className={css.headerWithBackBtn}>
+            {showBackButton && (
+              <Button
+                onClick={handleBack}
+                type="tertiary"
+                iconLeftName="chevron-left"
               />
-            </PageName>
-          ) : (
-            getNamedComp('PageName')
-          )}
+            )}
+            {pageNameKey && PAGE_NAME_LIST[pageNameKey] ? (
+              <PageName>
+                <TitleMedium>{PAGE_NAME_LIST[pageNameKey].title} </TitleMedium>
+                <Icon
+                  type={PAGE_NAME_LIST[pageNameKey].iconType}
+                  name={PAGE_NAME_LIST[pageNameKey].iconName}
+                  size="medium"
+                  color={TEXT_COLORS.primary}
+                  swapOpacity={PAGE_NAME_LIST[pageNameKey].iconSwapOpacity}
+                />
+              </PageName>
+            ) : (
+              getNamedComp('PageName')
+            )}
+          </div>
           {getNamedComp('TabSlot')}
         </div>
         <div className={classify(css.rightSlot, classNames?.rightSlot)}>

package/lib/components/PageTitle/PageTitle.module.css

@@ -1,7 +1,7 @@
 @value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
 @value (spaceNone, spaceXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';
 
-@value (sizeFluid, size60) from '../../styles/variables/_size.css';
+@value (sizeFluid) from '../../styles/variables/_size.css';
 
 .pageTitleWrapper {
   composes: borderBottomPrimary from '../../styles/border.module.css';
@@ -10,9 +10,8 @@
   flex-direction: row;
   justify-content: space-between;
   box-sizing: border-box;
-  padding: spaceSmall spaceMedium spaceXSmall spaceMedium;
+  padding: spaceSmall spaceMedium;
   width: sizeFluid;
-  min-height: size60;
   gap: spaceMedium;
   height: fit-content;
 }
@@ -21,6 +20,7 @@
   display: flex;
   flex-direction: column;
   gap: spaceXSmall;
+  justify-content: center;
 }
 
 .pageTitle {
@@ -36,3 +36,9 @@
   flex-direction: column;
   justify-content: flex-end;
 }
+
+.headerWithBackBtn {
+  display: flex;
+  gap: spaceXSmall;
+  align-items: center;
+}

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -43,7 +43,7 @@ const MENU_NAME_LIST = Object.freeze({
     iconType: 'duotone'
   },
   analytics: {
-    title: 'Analytics',
+    title: 'Analytics & Data',
     iconName: 'chart-column',
     iconType: 'duotone'
   },
@@ -163,7 +163,7 @@ const MENU_NAME_LIST = Object.freeze({
     iconType: 'duotone'
   },
   settings: {
-    title: 'Settings',
+    title: 'Configuration',
     iconName: 'gear',
     iconType: 'duotone'
   }
@@ -200,7 +200,8 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, classNames?.wrapper),
     onClick: onChangeHandler,
     ref: ref,
-    tabIndex: disabled ? -1 : tabIndex
+    tabIndex: disabled ? -1 : tabIndex,
+    disabled: disabled
   }), pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     type: MENU_NAME_LIST[pageNameKey].iconType,
     name: MENU_NAME_LIST[pageNameKey].iconName,

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -40,7 +40,7 @@ export const MENU_NAME_LIST = Object.freeze({
     iconType: 'duotone',
   },
   analytics: {
-    title: 'Analytics',
+    title: 'Analytics & Data',
     iconName: 'chart-column',
     iconType: 'duotone',
   },
@@ -160,7 +160,7 @@ export const MENU_NAME_LIST = Object.freeze({
     iconType: 'duotone',
   },
   settings: {
-    title: 'Settings',
+    title: 'Configuration',
     iconName: 'gear',
     iconType: 'duotone',
   },
@@ -230,6 +230,7 @@ export const SideMenuLink: React$AbstractComponent<
           onClick={onChangeHandler}
           ref={ref}
           tabIndex={disabled ? -1 : tabIndex}
+          disabled={disabled}
         >
           {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
             <Icon

package/lib/components/Typeahead/SimpleTypeahead.js

@@ -24,6 +24,10 @@ const SimpleTypeaheadBase = (props, ref) => {
     resolveSecondaryLabel,
     onClear,
     onSearch,
+    menuVirtualization,
+    header,
+    footer,
+    clickAwayRef,
     ...inputProps
   } = props;
   const [typeaheadInputText, setTypeaheadInputText] = React.useState('');
@@ -68,8 +72,12 @@ const SimpleTypeaheadBase = (props, ref) => {
       selectedKeys: typeaheadSelectedKeys,
       resolveLabel,
       resolveSecondaryLabel,
-      size
-    }
+      size,
+      virtualization: menuVirtualization,
+      header,
+      footer
+    },
+    clickAwayRef: clickAwayRef
   }));
 };
 const SimpleTypeahead = /*#__PURE__*/React.forwardRef(SimpleTypeaheadBase);

package/lib/components/Typeahead/SimpleTypeahead.js.flow

@@ -2,9 +2,10 @@
 
 import * as React from 'react';
 
+import type {ClickAwayRefType} from '../../utils/click-away';
 import {getTextLabelFromSelectedKeys} from '../../utils/menu';
 import type {InputProps} from '../Input';
-import type {MenuOption} from '../Menu';
+import type {MenuOption, Virtualization} from '../Menu';
 
 import {Typeahead} from './Typeahead';
 
@@ -30,6 +31,9 @@ export type SimpleTypeaheadProps = {
   // Menu props
   options?: Array<MenuOption>,
   selectedKeys?: Array<string>,
+  menuVirtualization?: Virtualization,
+  header?: React.Node,
+  footer?: React.Node,
 
   // events
   onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -41,6 +45,7 @@ export type SimpleTypeaheadProps = {
   // Resolvers
   resolveLabel?: (option: MenuOption) => string | React.Node,
   resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  clickAwayRef?: ClickAwayRefType,
   ...
 };
 
@@ -58,6 +63,10 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     resolveSecondaryLabel,
     onClear,
     onSearch,
+    menuVirtualization,
+    header,
+    footer,
+    clickAwayRef,
     ...inputProps
   } = props;
 
@@ -121,7 +130,11 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
         resolveLabel,
         resolveSecondaryLabel,
         size,
+        virtualization: menuVirtualization,
+        header,
+        footer,
       }}
+      clickAwayRef={clickAwayRef}
     />
   );
 };

package/lib/components/Typeahead/Typeahead.js

@@ -32,6 +32,7 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     isLoading,
     menuOpenOffset = 1,
     onFocus,
+    clickAwayRef,
     ...inputProps
   } = _ref;
   const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
@@ -61,7 +62,8 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     setFilteredOptions(optionsFiltered || []);
   }, [typeaheadInputText, menu?.options]);
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
-    onChange: onMenuToggle
+    onChange: onMenuToggle,
+    clickAwayRef: clickAwayRef
   }, _ref2 => {
     let {
       isOpen,

package/lib/components/Typeahead/Typeahead.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 type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
@@ -38,6 +38,7 @@ export type TypeaheadProps = {
   onClear?: () => void,
   isLoading?: boolean,
   menuOpenOffset?: number,
+  clickAwayRef?: ClickAwayRefType,
   ...
 };
 
@@ -60,6 +61,7 @@ export const Typeahead: React$AbstractComponent<
       isLoading,
       menuOpenOffset = 1,
       onFocus,
+      clickAwayRef,
       ...inputProps
     }: TypeaheadProps,
     ref,
@@ -95,7 +97,7 @@ export const Typeahead: React$AbstractComponent<
     }, [typeaheadInputText, menu?.options]);
 
     return (
-      <ClickAway onChange={onMenuToggle}>
+      <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
         {({isOpen, onOpen, cancelNext, clickAway}) => (
           <div
             data-testid="Typeahead"

package/lib/types/charts.js.flow

@@ -7,6 +7,11 @@ export type ChartOptions = {
     spacing?: Array<number>,
     margin?: Array<number>,
     style?: CSSObject,
+    spacing?: [number, number, number, number],
+    spacingBottom?: number,
+    spacingLeft?: number,
+    spacingRight?: number,
+    spacingTop?: number,
     ...
   },
   title?: {
@@ -66,6 +71,7 @@ export type ChartOptions = {
     ...
   },
   legend?: Legend,
+  navigation?: Navigation,
   ...
 };
 
@@ -223,3 +229,27 @@ export type Credits = {
   },
   ...
 };
+
+export type Navigation = {
+  breadcrumbs?: Breadcrumbs,
+  ...
+};
+
+export type Breadcrumbs = {
+  position?: Position,
+  style?: CSSObject,
+  buttonTheme?: ButtonTheme,
+  ...
+};
+
+export type ButtonTheme = {
+  style?: CSSObject,
+  ...
+};
+
+export type Position = {
+  align?: string,
+  verticalAlign?: string,
+  x?: number,
+  y?: number,
+};

package/lib/utils/charts/charts.js

@@ -25,9 +25,9 @@ const breadcrumbStyle = {
 exports.breadcrumbStyle = breadcrumbStyle;
 const commonChartOptions = {
   chart: {
-    style: {
-      fontFamily: 'inherit'
-    }
+    spacingBottom: 0,
+    spacingLeft: 0,
+    spacingRight: 0
   },
   title: {
     text: null
@@ -71,7 +71,20 @@ const commonChartOptions = {
     enabled: true
   },
   xAxis: {
-    type: 'category'
+    type: 'category',
+    padding: 0
+  },
+  navigation: {
+    breadcrumbs: {
+      buttonTheme: {
+        style: {
+          color: _color.colorFillInversePrimary
+        }
+      },
+      separator: {
+        text: '>'
+      }
+    }
   }
 };
 exports.commonChartOptions = commonChartOptions;

package/lib/utils/charts/charts.js.flow

@@ -9,6 +9,7 @@ import {
   colorDataViz6,
   colorDataViz7,
   colorDataViz8,
+  colorFillInversePrimary,
   colorTextSecondary,
   colorTooltipFill,
 } from '../../styles/variables/_color';
@@ -44,9 +45,9 @@ export const breadcrumbStyle = {
 
 export const commonChartOptions: $Shape<ChartOptions> = {
   chart: {
-    style: {
-      fontFamily: 'inherit',
-    },
+    spacingBottom: 0,
+    spacingLeft: 0,
+    spacingRight: 0,
   },
   title: {
     text: null,
@@ -88,6 +89,19 @@ export const commonChartOptions: $Shape<ChartOptions> = {
   },
   xAxis: {
     type: 'category',
+    padding: 0,
+  },
+  navigation: {
+    breadcrumbs: {
+      buttonTheme: {
+        style: {
+          color: colorFillInversePrimary,
+        },
+      },
+      separator: {
+        text: '>',
+      },
+    },
   },
 };
 

package/lib/utils/charts/columnChart.js

@@ -15,6 +15,7 @@ var _helpers = require("./helpers");
 const getColumnChartOptions = () => ({
   ..._charts.commonChartOptions,
   chart: {
+    ..._charts.commonChartOptions.chart,
     type: 'column'
   },
   legend: {

package/lib/utils/charts/columnChart.js.flow

@@ -20,6 +20,7 @@ import {
 export const getColumnChartOptions = (): ChartOptions => ({
   ...commonChartOptions,
   chart: {
+    ...commonChartOptions.chart,
     type: 'column',
   },
   legend: {

package/lib/utils/click-away/click-away.js

@@ -98,6 +98,15 @@ class ClickAway extends React.Component {
       isOpen,
       pageBottom
     } = this.state;
+    const {
+      clickAwayRef
+    } = this.props;
+    if (clickAwayRef) {
+      clickAwayRef.current = {
+        forceClose: this.forceClose,
+        forceOpen: this.handleOpenClick
+      };
+    }
     return this.props.children({
       onOpen: this.handleOpenClick,
       isOpen,