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

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 // $FlowFixMe[untyped-import]
 import moment from 'moment-timezone';
 
+// $FlowFixMe[untyped-import]
 import classify from '../../utils/classify';
 import {UnstyledButton} from '../Button';
 import {BodyMedium, TEXT_COLORS} from '../Text';
@@ -51,13 +52,8 @@ export const Day = ({
     tabIndex={disabled ? -1 : 0}
     className={classify(css.calendarItemButton, {
       [css.calendarRowItemDisabled]: disabled,
-      [css.calendarRowItemBorderLeft]: !disabled && filled && endOfRange,
-      [css.calendarRowItemBorderRight]:
-        !disabled &&
-        !moment(date).isSame(moment(hoverDay)) &&
-        (filled || highlighted) &&
-        startOfRange,
-      [css.calendarRowItemHighlighted]: !disabled && !filled && highlighted,
+      [css.calendarRowItemHighlighted]:
+        !disabled && (highlighted || startOfRange || endOfRange),
     })}
     onMouseOver={onHover}
     onClick={onClick}
@@ -67,12 +63,10 @@ export const Day = ({
       type="ghost"
       color={getTextColor(disabled, filled)}
       className={classify(css.calendarRowItem, {
-        [css.calendarRowItemHover]: !disabled && !filled,
+        [css.calendarRowItemHover]: !disabled && moment(date).isSame(hoverDay),
         [css.calendarRowItemFilled]: !disabled && filled,
         [css.calendarRowItemOutlined]: !disabled && outlined,
       })}
-      onMouseOver={onHover}
-      onClick={onClick}
     >
       {value}
     </BodyMedium>

package/lib/components/DateRangePicker/Day.module.css

@@ -2,6 +2,7 @@
   size2,
   size4,
   size5,
+  size26,
   size30
 ) from '../../styles/variables/_size.css';
 @value (
@@ -28,13 +29,15 @@
 ) from '../../styles/variables/_border.css';
 
 .calendarItemButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: calc(size30 + size2);
 }
 
 .calendarItemButton:focus {
   box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
     borderWidthTertiary colorFocusPrimary;
-  border-radius: borderRadiusSmall;
 }
 
 .calendarRowItem {
@@ -45,12 +48,12 @@
   cursor: pointer;
   border-radius: borderRadiusCircle;
   box-sizing: border-box;
-  width: calc(size30 + size2);
-  height: calc(size30 + size2);
+  width: size26;
+  height: size26;
   outline: none;
 }
 
-.calendarRowItemHover:hover {
+.calendarRowItemHover {
   background-color: colorButtonFillGhostHovered;
 }
 
@@ -73,19 +76,3 @@
   border-radius: borderRadiusNone;
   background-color: colorBackgroundSecondary;
 }
-
-.calendarRowItemBorderLeft {
-  background-image: linear-gradient(
-    to left,
-    colorBackgroundTertiary spaceHalfFluid,
-    colorBackgroundSecondary spaceHalfFluid
-  );
-}
-
-.calendarRowItemBorderRight {
-  background-image: linear-gradient(
-    to right,
-    colorBackgroundTertiary spaceHalfFluid,
-    colorBackgroundSecondary spaceHalfFluid
-  );
-}

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

@@ -1,3 +1,4 @@
 // @flow strict
 
 export * from './DateRangePicker';
+export type {DateRange, DateRangeWithTimezone} from './utils';

package/lib/components/DateRangePicker/utils.js

@@ -3,10 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.addTimeZone = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = void 0;
-exports.formatIsoDate = formatIsoDate;
-exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isEndOfRange = exports.inDateRange = exports.getValidatedMonths = exports.getTimeZones = exports.getSubtractedDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = void 0;
-exports.wrangleMoment = wrangleMoment;
+exports.wrangleMoment = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isEndOfRange = exports.inDateRange = exports.getTimeZones = exports.getSubtractedDate = exports.getMonthStartDate = exports.getInitialDates = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.addTimeZone = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = void 0;
 var _formatISO = _interopRequireDefault(require("date-fns/formatISO"));
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -70,42 +67,31 @@ const MONTHS = [{
   label: 'Dec'
 }];
 exports.MONTHS = MONTHS;
-const getDaysInMonth = date => {
-  const startWeek = (0, _moment.default)(date).startOf('month').startOf('week');
-  const endWeek = (0, _moment.default)(date).endOf('month').endOf('week');
-  const days = [],
-    current = startWeek;
-  while (current.isBefore(endWeek)) {
-    days.push(current.clone().format('YYYY-MM-DD'));
-    current.add(1, 'd');
-  }
-  const daysInChunks = _lodash.default.chunk(days, 7);
-
-  // if total rows in calendar are 5 add one more week to the calendar
-  if (daysInChunks.length === 5) {
-    const nextWeek = getAddedDate(endWeek, WEEKDAYS.length, 'd');
-    const extraDays = [];
-    while (current.isSameOrBefore(nextWeek)) {
-      extraDays.push(current.clone().format('YYYY-MM-DD'));
-      current.add(1, 'd');
-    }
-    daysInChunks.push(extraDays);
+const wrangleMoment = date => {
+  if (date instanceof Date) {
+    return date;
+  } else if (!date) {
+    return new Date();
   }
-  return daysInChunks;
+  return date instanceof _moment.default ? date.toDate() : (0, _parseISO.default)(date);
 };
-exports.getDaysInMonth = getDaysInMonth;
+exports.wrangleMoment = wrangleMoment;
+const formatIsoDate = date => (0, _formatISO.default)(wrangleMoment(date), {
+  representation: 'date'
+});
+exports.formatIsoDate = formatIsoDate;
 const isStartOfRange = (_ref, date) => {
   let {
     startDate
   } = _ref;
-  return !!startDate && (0, _moment.default)(date).isSame(startDate, 'd');
+  return Boolean(startDate) && (0, _moment.default)(date).isSame((0, _moment.default)(startDate), 'd');
 };
 exports.isStartOfRange = isStartOfRange;
 const isEndOfRange = (_ref2, date) => {
   let {
     endDate
   } = _ref2;
-  return !!endDate && (0, _moment.default)(date).isSame(endDate, 'd');
+  return Boolean(endDate) && (0, _moment.default)(date).isSame((0, _moment.default)(endDate), 'd');
 };
 exports.isEndOfRange = isEndOfRange;
 const inDateRange = (_ref3, date) => {
@@ -117,7 +103,7 @@ const inDateRange = (_ref3, date) => {
     const momentDay = (0, _moment.default)(date);
     const momentStartDate = (0, _moment.default)(startDate);
     const momentEndDate = (0, _moment.default)(endDate);
-    return momentDay.isBetween(momentStartDate, momentEndDate) || momentDay.isSame(momentStartDate, 'd') || momentDay.isSame(momentEndDate, 'd');
+    return momentDay.isBetween(momentStartDate, momentEndDate, null, '[]');
   }
   return false;
 };
@@ -133,10 +119,54 @@ const isStartDateEndDateSame = _ref4 => {
   return false;
 };
 exports.isStartDateEndDateSame = isStartDateEndDateSame;
+const getMonthAndYear = date => {
+  const momentDate = date ? (0, _moment.default)(date) : (0, _moment.default)();
+  return [momentDate.month(), momentDate.year()];
+};
+const getDaysInMonth = date => {
+  const startWeek = (0, _moment.default)(date).startOf('month').startOf('week');
+  const endWeek = (0, _moment.default)(date).endOf('month').endOf('week');
+  const days = [],
+    current = startWeek;
+  while (current.isBefore(endWeek)) {
+    days.push(current.clone().format('YYYY-MM-DD'));
+    current.add(1, 'd');
+  }
+  const daysInChunks = _lodash.default.chunk(days, 7);
+
+  // if total rows in calendar are 5 add one more week to the calendar
+  if (daysInChunks.length === 5) {
+    const nextWeek = getAddedDate(endWeek, WEEKDAYS.length, 'd');
+    const extraDays = [];
+    while (current.isSameOrBefore(nextWeek)) {
+      extraDays.push(current.clone().format('YYYY-MM-DD'));
+      current.add(1, 'd');
+    }
+    daysInChunks.push(extraDays);
+  }
+  return daysInChunks;
+};
+exports.getDaysInMonth = getDaysInMonth;
+const getAddedDate = (date, addCount, timeUnit) => formatIsoDate((0, _moment.default)(date).add(addCount, timeUnit));
+exports.getAddedDate = getAddedDate;
+const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate((0, _moment.default)(date).subtract(subtractCount, timeUnit));
+exports.getSubtractedDate = getSubtractedDate;
+const getMonthStartDate = date => formatIsoDate((0, _moment.default)(date).startOf('M'));
+exports.getMonthStartDate = getMonthStartDate;
+const addTimeZone = (date, timeZone) => _moment.default.tz(date, timeZone).startOf('d').utc().toISOString();
+exports.addTimeZone = addTimeZone;
+const getTimeZones = () => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
+  menuOptions.push({
+    key,
+    label: _timezones.TIMEZONES[key]
+  });
+  return menuOptions;
+}, []);
+exports.getTimeZones = getTimeZones;
 const generateAvailableYears = (count, firstCalendarDate, secondCalendarDate, marker) => {
   const startYear = (0, _moment.default)().year() - count + 1;
-  const firstCalendarYear = (0, _moment.default)(firstCalendarDate).year();
-  const secondCalendarYear = (0, _moment.default)(secondCalendarDate).year();
+  const firstCalendarYear = (0, _moment.default)(firstCalendarDate).add(1, 'M').year();
+  const secondCalendarYear = (0, _moment.default)(secondCalendarDate).subtract(1, 'M').year();
   const isWithinRange = year => marker === MARKERS.DATE_RANGE_START ? year <= secondCalendarYear : year >= firstCalendarYear;
   return Array.from({
     length: count
@@ -155,10 +185,6 @@ const generateAvailableYears = (count, firstCalendarDate, secondCalendarDate, ma
   });
 };
 exports.generateAvailableYears = generateAvailableYears;
-const getMonthAndYear = date => {
-  const momentDate = date ? (0, _moment.default)(date) : (0, _moment.default)();
-  return [momentDate.month(), momentDate.year()];
-};
 const getAvailableMonths = (Months, first, second, marker) => {
   const [firstMonth, firstYear] = getMonthAndYear(first);
   const [secondMonth, secondYear] = getMonthAndYear(second);
@@ -175,44 +201,33 @@ const getAvailableMonths = (Months, first, second, marker) => {
   });
 };
 exports.getAvailableMonths = getAvailableMonths;
-const addTimeZone = (date, timeZone) => _moment.default.tz(date, timeZone).startOf('d').utc().toISOString();
-exports.addTimeZone = addTimeZone;
-const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate((0, _moment.default)(date).subtract(subtractCount, timeUnit));
-exports.getSubtractedDate = getSubtractedDate;
-const getAddedDate = (date, addCount, timeUnit) => formatIsoDate((0, _moment.default)(date).add(addCount, timeUnit));
-exports.getAddedDate = getAddedDate;
-function formatIsoDate(date) {
-  return (0, _formatISO.default)(wrangleMoment(date), {
-    representation: 'date'
-  });
-}
-function wrangleMoment(date) {
-  if (date instanceof Date) {
-    return date;
-  } else if (!date) {
-    return new Date();
-  }
-  return date instanceof _moment.default ? date.toDate() : (0, _parseISO.default)(date);
-}
-const getValidatedMonths = (_ref6, minDate, maxDate) => {
-  let {
+const getInitialDates = initialDateRange => {
+  const today = formatIsoDate();
+  const {
     startDate,
     endDate
-  } = _ref6;
-  if (startDate && endDate) {
-    const newStart = _moment.default.max((0, _moment.default)(startDate), (0, _moment.default)(minDate)); // TODO Figure out the validated date
-    const newEnd = _moment.default.min((0, _moment.default)(endDate), (0, _moment.default)(maxDate));
-    return [formatIsoDate(newStart), newStart.isSame(newEnd, 'M') ? getAddedDate(newEnd, 1, 'M') : formatIsoDate(newEnd)];
-  } else {
-    return [startDate, endDate];
+  } = initialDateRange;
+  const isStartDateValid = (0, _moment.default)(startDate).isSameOrBefore(today);
+  const isEndDateValid = (0, _moment.default)(endDate).isSameOrBefore(today);
+  const dateRange = startDate && endDate && isStartDateValid && isEndDateValid && (0, _moment.default)(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 ((0, _moment.default)(startMonth).isSame((0, _moment.default)(endMonth), 'M')) {
+    startMonth = getSubtractedDate(endMonth, 1, 'M');
   }
+  const monthRange = {
+    rangeStartMonth: startMonth,
+    rangeEndMonth: endMonth
+  };
+  return {
+    dateRange,
+    monthRange
+  };
 };
-exports.getValidatedMonths = getValidatedMonths;
-const getTimeZones = () => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
-  menuOptions.push({
-    key,
-    label: _timezones.TIMEZONES[key]
-  });
-  return menuOptions;
-}, []);
-exports.getTimeZones = getTimeZones;
+exports.getInitialDates = getInitialDates;

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/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,
       }}