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

package/lib/components/DateRangePicker/utils.js.flow

@@ -14,32 +14,29 @@ import {TIMEZONES} from './timezones';
 
 
 export type TimeUnit = 'years' | 'months' | 'days' | 'd' | 'M' | 'y';
-
-export type DateRange = {
-  startDate?: string,
-  endDate?: string,
-};
-
-export type DatePickerSelectedRange = {
-  startDate?: string,
-  endDate?: string,
+export type DateRange = {startDate?: string, endDate?: string};
+export type DateRangeWithTimezone = {|
+  ...DateRange,
   startDateUTC?: string,
   endDateUTC?: string,
   timeZone?: string,
+|};
+
+type MonthRange = {rangeStartMonth: string, rangeEndMonth: string};
+type InitialDateRanges = {
+  dateRange: DateRange,
+  monthRange: MonthRange,
 };
 
 export const NAVIGATION_ACTION = Object.freeze({
   NEXT: 'next',
   PREV: 'prev',
 });
-
 export const MARKERS = Object.freeze({
   DATE_RANGE_START: 'FIRST',
   DATE_RANGE_END: 'SECOND',
 });
-
 export const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-
 export const MONTHS = [
   {key: '0', label: 'Jan'},
   {key: '1', label: 'Feb'},
@@ -55,6 +52,54 @@ export const MONTHS = [
   {key: '11', label: 'Dec'},
 ];
 
+export const wrangleMoment = (date?: string | Date): Date => {
+  if (date instanceof Date) {
+    return date;
+  } else if (!date) {
+    return new Date();
+  }
+  return date instanceof moment ? date.toDate() : parseISO(date);
+};
+
+export const formatIsoDate = (date?: string | Date): string =>
+  formatISO(wrangleMoment(date), {
+    representation: 'date',
+  });
+
+export const isStartOfRange = ({startDate}: DateRange, date: string): boolean =>
+  Boolean(startDate) && moment(date).isSame(moment(startDate), 'd');
+
+export const isEndOfRange = ({endDate}: DateRange, date: string): boolean =>
+  Boolean(endDate) && moment(date).isSame(moment(endDate), 'd');
+
+export const inDateRange = (
+  {startDate, endDate}: DateRange,
+  date: string,
+): boolean => {
+  if (startDate && endDate) {
+    const momentDay = moment(date);
+    const momentStartDate = moment(startDate);
+    const momentEndDate = moment(endDate);
+    return momentDay.isBetween(momentStartDate, momentEndDate, null, '[]');
+  }
+  return false;
+};
+
+export const isStartDateEndDateSame = ({
+  startDate,
+  endDate,
+}: DateRange): boolean => {
+  if (startDate && endDate) {
+    return moment(startDate).isSame(moment(endDate), 'd');
+  }
+  return false;
+};
+
+const getMonthAndYear = (date) => {
+  const momentDate = date ? moment(date) : moment();
+  return [momentDate.month(), momentDate.year()];
+};
+
 export const getDaysInMonth = (date: string): Array<Array<string>> => {
   const startWeek = moment(date).startOf('month').startOf('week');
   const endWeek = moment(date).endOf('month').endOf('week');
@@ -81,38 +126,32 @@ export const getDaysInMonth = (date: string): Array<Array<string>> => {
   return daysInChunks;
 };
 
-export const isStartOfRange = ({startDate}: DateRange, date: string): boolean =>
-  !!startDate && moment(date).isSame(startDate, 'd');
-
-export const isEndOfRange = ({endDate}: DateRange, date: string): boolean =>
-  !!endDate && moment(date).isSame(endDate, 'd');
+export const getAddedDate = (
+  date: string,
+  addCount: number,
+  timeUnit: TimeUnit,
+): string => formatIsoDate(moment(date).add(addCount, timeUnit));
 
-export const inDateRange = (
-  {startDate, endDate}: DateRange,
+export const getSubtractedDate = (
   date: string,
-): boolean => {
-  if (startDate && endDate) {
-    const momentDay = moment(date);
-    const momentStartDate = moment(startDate);
-    const momentEndDate = moment(endDate);
-    return (
-      momentDay.isBetween(momentStartDate, momentEndDate) ||
-      momentDay.isSame(momentStartDate, 'd') ||
-      momentDay.isSame(momentEndDate, 'd')
-    );
-  }
-  return false;
-};
+  subtractCount: number,
+  timeUnit: TimeUnit,
+): string => formatIsoDate(moment(date).subtract(subtractCount, timeUnit));
 
-export const isStartDateEndDateSame = ({
-  startDate,
-  endDate,
-}: DateRange): boolean => {
-  if (startDate && endDate) {
-    return moment(startDate).isSame(moment(endDate), 'd');
-  }
-  return false;
-};
+export const getMonthStartDate = (date: string): string =>
+  formatIsoDate(moment(date).startOf('M'));
+
+export const addTimeZone = (date: string, timeZone: string): string =>
+  moment.tz(date, timeZone).startOf('d').utc().toISOString();
+
+export const getTimeZones = (): Array<MenuOption> =>
+  Object.keys(TIMEZONES).reduce((menuOptions, key) => {
+    menuOptions.push({
+      key,
+      label: TIMEZONES[key],
+    });
+    return menuOptions;
+  }, []);
 
 export const generateAvailableYears = (
   count: number,
@@ -121,8 +160,8 @@ export const generateAvailableYears = (
   marker: $Values<typeof MARKERS>,
 ): Array<MenuOption> => {
   const startYear = moment().year() - count + 1;
-  const firstCalendarYear = moment(firstCalendarDate).year();
-  const secondCalendarYear = moment(secondCalendarDate).year();
+  const firstCalendarYear = moment(firstCalendarDate).add(1, 'M').year();
+  const secondCalendarYear = moment(secondCalendarDate).subtract(1, 'M').year();
 
   const isWithinRange = (year: number) =>
     marker === MARKERS.DATE_RANGE_START
@@ -139,11 +178,6 @@ export const generateAvailableYears = (
   }).filter(({disabled}) => !disabled);
 };
 
-const getMonthAndYear = (date) => {
-  const momentDate = date ? moment(date) : moment();
-  return [momentDate.month(), momentDate.year()];
-};
-
 export const getAvailableMonths = (
   Months: Array<MenuOption>,
   first: string,
@@ -171,61 +205,35 @@ export const getAvailableMonths = (
   });
 };
 
-export const addTimeZone = (date: string, timeZone: string): string =>
-  moment.tz(date, timeZone).startOf('d').utc().toISOString();
-
-export const getSubtractedDate = (
-  date: string,
-  subtractCount: number,
-  timeUnit: TimeUnit,
-): string => formatIsoDate(moment(date).subtract(subtractCount, timeUnit));
-
-export const getAddedDate = (
-  date: string,
-  addCount: number,
-  timeUnit: TimeUnit,
-): string => formatIsoDate(moment(date).add(addCount, timeUnit));
-
-export function formatIsoDate(date?: string | Date): string {
-  return formatISO(wrangleMoment(date), {
-    representation: 'date',
-  });
-}
-
-export function wrangleMoment(date?: string | Date): Date {
-  if (date instanceof Date) {
-    return date;
-  } else if (!date) {
-    return new Date();
+export const getInitialDates = (
+  initialDateRange: DateRange,
+): InitialDateRanges => {
+  const today = formatIsoDate();
+  const {startDate, endDate} = initialDateRange;
+
+  const isStartDateValid = moment(startDate).isSameOrBefore(today);
+  const isEndDateValid = moment(endDate).isSameOrBefore(today);
+
+  const dateRange =
+    startDate &&
+    endDate &&
+    isStartDateValid &&
+    isEndDateValid &&
+    moment(endDate).isSameOrAfter(startDate)
+      ? {startDate, endDate}
+      : {startDate: undefined, endDate: undefined};
+
+  let startMonth = dateRange.startDate
+    ? getMonthStartDate(dateRange.startDate)
+    : getMonthStartDate(getSubtractedDate(today, 1, 'M'));
+  const endMonth = dateRange.endDate
+    ? getMonthStartDate(dateRange.endDate)
+    : getMonthStartDate(today);
+
+  if (moment(startMonth).isSame(moment(endMonth), 'M')) {
+    startMonth = getSubtractedDate(endMonth, 1, 'M');
   }
-  return date instanceof moment ? date.toDate() : parseISO(date);
-}
 
-export const getValidatedMonths = (
-  {startDate, endDate}: DateRange,
-  minDate: string,
-  maxDate: string,
-): Array<?string> => {
-  if (startDate && endDate) {
-    const newStart = moment.max(moment(startDate), moment(minDate)); // TODO Figure out the validated date
-    const newEnd = moment.min(moment(endDate), moment(maxDate));
-
-    return [
-      formatIsoDate(newStart),
-      newStart.isSame(newEnd, 'M')
-        ? getAddedDate(newEnd, 1, 'M')
-        : formatIsoDate(newEnd),
-    ];
-  } else {
-    return [startDate, endDate];
-  }
+  const monthRange = {rangeStartMonth: startMonth, rangeEndMonth: endMonth};
+  return {dateRange, monthRange};
 };
-
-export const getTimeZones = (): Array<MenuOption> =>
-  Object.keys(TIMEZONES).reduce((menuOptions, key) => {
-    menuOptions.push({
-      key,
-      label: TIMEZONES[key],
-    });
-    return menuOptions;
-  }, []);

package/lib/components/DonutChart/DonutChart.js

@@ -22,6 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const DonutChart = _ref => {
   let {
+    isLoading,
     classNames,
     cardTitle,
     customExportOptions,
@@ -72,15 +73,16 @@ const DonutChart = _ref => {
     legend,
     defaultCenterHTML
   });
+
+  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = (0, _charts.mergeChartUserOptions)(defaultLineChartOptions, {
     series: donutChartSeries,
     drilldown: donutDrilldown,
     ...userOptions
   });
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
-    title: cardTitle
-    //$FlowFixMe[incompatible-type]
-    ,
+    isLoading: isLoading,
+    title: cardTitle,
     ref: chartRef,
     customExportOptions: customExportOptions,
     headerActions: headerActions,

package/lib/components/DonutChart/DonutChart.js.flow

@@ -29,10 +29,6 @@ type ClassNames = $ReadOnly<{
   highChart?: string,
   subtitleClassNames?: SubtitleClassNames,
 }>;
-type DonutChartData = {
-  name: string,
-  value: number,
-};
 
 export type SubtitleClassNames = {
   wrapper?: string,
@@ -41,6 +37,7 @@ export type SubtitleClassNames = {
 };
 
 export type DonutChartProps = {
+  isLoading?: boolean,
   classNames?: ClassNames,
   cardTitle?: React.Node,
   customExportOptions?: Array<ExportOptionType> | null,
@@ -48,11 +45,13 @@ export type DonutChartProps = {
   centerText?: string,
   centerSubtext?: string,
   series: Array<SeriesOptionsType>,
-  drilldown: Drilldown,
+  drilldown?: Drilldown,
   legend?: LegendOptionsType,
+  ...
 };
 
 export const DonutChart = ({
+  isLoading,
   classNames,
   cardTitle,
   customExportOptions,
@@ -119,6 +118,7 @@ export const DonutChart = ({
     defaultCenterHTML,
   });
 
+  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
     series: donutChartSeries,
     drilldown: donutDrilldown,
@@ -127,8 +127,8 @@ export const DonutChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
-      //$FlowFixMe[incompatible-type]
       ref={chartRef}
       customExportOptions={customExportOptions}
       headerActions={headerActions}

package/lib/components/Dropdown/Dropdown.js

@@ -64,6 +64,12 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       className: (0, _classify.classify)(_DropdownModule.default.dropdownContainer, classNames?.wrapper),
       ref: dropdownRef
     }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, inputProps, {
+      onKeyDown: e => {
+        if (e.keyCode === 32) {
+          e.preventDefault();
+          onOpen();
+        }
+      },
       boxRef: refs.setReference,
       size: size,
       placeholder: placeholder,

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

@@ -84,6 +84,12 @@ export const Dropdown: React$AbstractComponent<
           >
             <Input
               {...inputProps}
+              onKeyDown={(e) => {
+                if (e.keyCode === 32) {
+                  e.preventDefault();
+                  onOpen();
+                }
+              }}
               boxRef={refs.setReference}
               size={size}
               placeholder={placeholder}

package/lib/components/Dropdown/SimpleDropdown.js

@@ -23,6 +23,7 @@ const SimpleDropdownBase = (props, ref) => {
     onMenuOpen,
     onMenuClose,
     resolveLabel,
+    menuVirtualization,
     resolveSecondaryLabel,
     isMenuFluid = true,
     ...inputProps
@@ -67,6 +68,7 @@ const SimpleDropdownBase = (props, ref) => {
       allowSearch,
       resolveLabel,
       resolveSecondaryLabel,
+      virtualization: menuVirtualization,
       size,
       isFluid: isMenuFluid
     }

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

@@ -7,7 +7,7 @@ import {
   getTextLabelFromSelectedKeys,
 } from '../../utils/menu';
 import type {InputProps} from '../Input';
-import type {MenuOption, MenuOptionsVariant} from '../Menu';
+import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
 
 import {Dropdown} from './Dropdown';
 
@@ -34,6 +34,7 @@ export type SimpleDropdownProps = {
   allowSearch?: boolean,
   selectedKeys?: Array<string>,
   isMenuFluid?: boolean,
+  menuVirtualization?: Virtualization,
 
   // events
   onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -59,6 +60,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     onMenuOpen,
     onMenuClose,
     resolveLabel,
+    menuVirtualization,
     resolveSecondaryLabel,
     isMenuFluid = true,
     ...inputProps
@@ -122,6 +124,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
         allowSearch,
         resolveLabel,
         resolveSecondaryLabel,
+        virtualization: menuVirtualization,
         size,
         isFluid: isMenuFluid,
       }}

package/lib/components/LineChart/LineChart.js

@@ -21,6 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const LineChart = _ref => {
   let {
+    isLoading,
     classNames,
     cardTitle,
     customExportOptions,
@@ -55,6 +56,7 @@ const LineChart = _ref => {
     ...wrapperClassNames
   } = classNames || {};
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    isLoading: isLoading,
     title: cardTitle,
     ref: chartRef,
     classNames: wrapperClassNames,

package/lib/components/LineChart/LineChart.js.flow

@@ -6,7 +6,7 @@ import Highcharts from 'highcharts';
 //$FlowFixMe[untyped-import]
 import HighchartsReact from 'highcharts-react-official';
 
-import type {Drilldown} from '../../types/charts';
+import type {DataOptionsType, Drilldown} from '../../types/charts';
 import {
   getDataVizColor,
   getLineChartOptions,
@@ -26,20 +26,22 @@ type ClassNames = $ReadOnly<{
 
 type LineSeriesItem = {
   name: string,
-  data: [],
+  data: DataOptionsType[],
 };
 
 export type LineChartProps = {
+  isLoading?: boolean,
   classNames?: ClassNames,
-  cardTitle?: string,
+  cardTitle?: React.Node,
   customExportOptions?: Array<ExportOptionType> | null,
   series: Array<LineSeriesItem>,
   headerActions?: React.Node,
-  drilldown: Drilldown,
+  drilldown?: Drilldown,
   ...
 };
 
 export const LineChart = ({
+  isLoading,
   classNames,
   cardTitle,
   customExportOptions,
@@ -77,6 +79,7 @@ export const LineChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
       ref={chartRef}
       classNames={wrapperClassNames}

package/lib/components/Menu/Menu.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Menu = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _reactWindow = require("react-window");
 var _classify = require("../../utils/classify");
 var _menu = require("../../utils/menu");
 var _SearchInput = require("../SearchInput");
@@ -15,6 +16,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const menuSizeMedium = 276,
+  menuSizeSmall = 228;
+const buttonSizeMedium = 40,
+  buttonSizeSmall = 32;
 const RenderOption = _ref => {
   let {
     options,
@@ -25,15 +30,45 @@ const RenderOption = _ref => {
     ...restProps
   } = _ref;
   const {
-    allowSearch
+    allowSearch,
+    size,
+    virtualization = {
+      enable: false,
+      menuHeight: null,
+      itemHeight: null
+    }
   } = restProps;
   if (options && Array.isArray(options) && options.length) {
     const optionsFiltered = !allowSearch ? options : (0, _menu.getFilteredOptionsFromSearchText)(options, searchText);
     const resultText = !allowSearch ? '' : (0, _menu.getFilteredOptionsResultText)(optionsFiltered);
+    const {
+      enable: isVirtualizationEnabled,
+      menuHeight,
+      itemHeight
+    } = virtualization;
     return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
-    }, resultText), optionsFiltered.map((option, idx) => /*#__PURE__*/React.createElement(React.Fragment, {
+    }, resultText), virtualization && isVirtualizationEnabled ? /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
+      height: menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall),
+      itemSize: itemHeight || (size === 'medium' ? buttonSizeMedium : buttonSizeSmall),
+      itemCount: optionsFiltered.length
+    }, _ref2 => {
+      let {
+        index: idx,
+        style
+      } = _ref2;
+      const buttonOption = optionsFiltered[idx];
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: buttonOption.key
+      }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
+        option: buttonOption,
+        classNames: classNames,
+        style: style
+      }, restProps, {
+        isLastItem: idx === optionsFiltered.length - 1
+      })));
+    }) : optionsFiltered.map((option, idx) => /*#__PURE__*/React.createElement(React.Fragment, {
       key: option.key
     }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
       option: option,
@@ -93,9 +128,17 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
     size = 'medium',
     width,
     isFluid = true,
-    allowSearch
+    allowSearch,
+    virtualization = {
+      enable: false,
+      menuHeight: null,
+      itemHeight: null
+    }
   } = props;
   const [searchText, setSearchText] = React.useState('');
+  const {
+    menuHeight
+  } = virtualization;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_MenuModule.default.menuCard, {
       [_MenuModule.default.fluid]: isFluid,
@@ -103,7 +146,8 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
       [_MenuModule.default.small]: size === 'small'
     }, classNames?.wrapper),
     style: {
-      width
+      width,
+      maxHeight: menuHeight ? menuHeight + 'px' : ''
     },
     ref: ref
   }, allowSearch && /*#__PURE__*/React.createElement(_SearchInput.SearchInput, {