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

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/styles/index.css

@@ -408,6 +408,8 @@
 
 @value size60: 60px;
 
+@value size66: 66px;
+
 @value size70: 70px;
 
 @value size90: 90px;

package/lib/styles/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuAccountBarFill = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
 exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = void 0;
-exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = void 0;
+exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -417,6 +417,8 @@ const size58 = '58px';
 exports.size58 = size58;
 const size60 = '60px';
 exports.size60 = size60;
+const size66 = '66px';
+exports.size66 = size66;
 const size70 = '70px';
 exports.size70 = size70;
 const size90 = '90px';

package/lib/styles/index.js.flow

@@ -410,6 +410,8 @@ export const size58 = '58px';
 
 export const size60 = '60px';
 
+export const size66 = '66px';
+
 export const size70 = '70px';
 
 export const size90 = '90px';

package/lib/styles/variables/_size.css

@@ -44,6 +44,8 @@
 
 @value size60: 60px;
 
+@value size66: 66px;
+
 @value size70: 70px;
 
 @value size90: 90px;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -51,6 +51,8 @@ const size58 = '58px';
 exports.size58 = size58;
 const size60 = '60px';
 exports.size60 = size60;
+const size66 = '66px';
+exports.size66 = size66;
 const size70 = '70px';
 exports.size70 = size70;
 const size90 = '90px';

package/lib/styles/variables/_size.js.flow

@@ -46,6 +46,8 @@ export const size58 = '58px';
 
 export const size60 = '60px';
 
+export const size66 = '66px';
+
 export const size70 = '70px';
 
 export const size90 = '90px';

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,

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

@@ -16,11 +16,19 @@ export type ChildProps = {
   anchorRef: (?HTMLElement) => mixed,
 };
 
+export type ClickAwayRefType = ?{
+  current: ?{
+    forceClose: () => void,
+    forceOpen: () => void,
+  },
+};
+
 export type ClickAwayProps = {
   closeOnEscapeKeypress?: boolean,
   children: (props: ChildProps) => React.Node,
   shouldCancel: (event: MouseEvent) => boolean,
   onChange?: (isOpen: boolean) => mixed,
+  clickAwayRef?: ClickAwayRefType,
 };
 
 type ClickAwayState = {
@@ -89,6 +97,14 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
 
   render(): React.Node {
     const {height, 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.94-beta.6",
+  "version": "0.1.94-beta.8",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {