@spaced-out/ui-design-system 0.1.110 → 0.1.111

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

@@ -4,6 +4,17 @@ import * as React from 'react';
 // $FlowFixMe[untyped-import]
 import moment from 'moment-timezone';
 
+import type {DateRange, DateRangeWithTimezone} from '../../types';
+import {
+  addTimezone,
+  generateAvailableYears,
+  getAvailableMonths,
+  getMonthEndDate,
+  getTimezones,
+  MARKERS,
+  MONTHS,
+  NAVIGATION_ACTION,
+} from '../../utils';
 import classify from '../../utils/classify';
 import {Button} from '../Button';
 import {
@@ -19,24 +30,14 @@ import {FocusManager} from '../FocusManager';
 import {ClickableIcon} from '../Icon';
 
 import {Calendar} from './Calendar.js';
-import type {DateRange, DateRangeWithTimezone} from './utils';
-import {
-  addTimezone,
-  generateAvailableYears,
-  getAddedDate,
-  getAvailableMonths,
-  getMonthStartDate,
-  getTimezones,
-  MARKERS,
-  MONTHS,
-  NAVIGATION_ACTION,
-} from './utils';
 
 import css from './DateRangeWrapper.module.css';
 
 
 type HeaderProps = {
   date: string,
+  minDate: string,
+  maxDate: string,
   rangeStartMonth: string,
   rangeEndMonth: string,
   nextDisabled: boolean,
@@ -50,6 +51,8 @@ type HeaderProps = {
 type DateRangeWrapperProps = {
   dateRange: DateRange,
   hoverDay: string,
+  minDate: string,
+  maxDate: string,
   rangeStartMonth: string,
   rangeEndMonth: string,
   cardWrapperClass: ?string,
@@ -74,6 +77,8 @@ type DateRangeWrapperProps = {
 const CalendarHeader = ({
   date,
   marker,
+  minDate,
+  maxDate,
   setMonth,
   rangeStartMonth,
   rangeEndMonth,
@@ -81,64 +86,73 @@ const CalendarHeader = ({
   nextDisabled,
   prevDisabled,
   onClickPrevious,
-}: HeaderProps): React.Node => (
-  <div className={css.calendarHeader}>
-    <ClickableIcon
-      ariaLabel="Select Previous Month"
-      size="small"
-      name="chevron-left"
-      className={classify(css.headerIcon, {
-        [css.disabledIcon]: prevDisabled,
-      })}
-      onClick={onClickPrevious}
-      color={prevDisabled ? 'disabled' : 'secondary'}
-    />
-    <Dropdown
-      size="small"
-      menu={{
-        selectedKeys: [moment(date).month().toString()],
-        options: getAvailableMonths(
-          MONTHS,
-          rangeStartMonth,
-          rangeEndMonth,
-          marker,
-        ),
-      }}
-      onChange={(event) => {
-        setMonth(getMonthStartDate(moment(date).set('M', event.key)));
-      }}
-      dropdownInputText={MONTHS[moment(date).month()].label}
-      scrollMenuToBottom
-    />
-    <Dropdown
-      menu={{
-        selectedKeys: [moment(date).year().toString()],
-        options: generateAvailableYears(
-          45,
-          rangeStartMonth,
-          rangeEndMonth,
-          marker,
-        ),
-      }}
-      size="small"
-      onChange={(event) => {
-        setMonth(getMonthStartDate(moment(date).set('y', event.key)));
-      }}
-      dropdownInputText={moment(date).year()}
-      scrollMenuToBottom
-    />
-    <ClickableIcon
-      size="small"
-      ariaLabel="Select Next Month"
-      name="chevron-right"
-      className={classify(css.headerIcon, {
-        [css.disabledIcon]: nextDisabled,
-      })}
-      onClick={onClickNext}
-      color={nextDisabled ? 'disabled' : 'secondary'}
-    />
-  </div>
-);
+}: HeaderProps): React.Node => {
+  const availableYears = generateAvailableYears({
+    marker,
+    minDate,
+    maxDate,
+    rangeStartMonth,
+    rangeEndMonth,
+  });
+  const availableMonths = getAvailableMonths({
+    marker,
+    minDate,
+    maxDate,
+    rangeStartMonth,
+    rangeEndMonth,
+  });
+
+  return (
+    <div className={css.calendarHeader}>
+      <ClickableIcon
+        ariaLabel="Select Previous Month"
+        size="small"
+        name="chevron-left"
+        className={classify(css.headerIcon, {
+          [css.disabledIcon]: prevDisabled,
+        })}
+        onClick={onClickPrevious}
+        color={prevDisabled ? 'disabled' : 'secondary'}
+      />
+      <Dropdown
+        size="small"
+        disabled={!availableMonths.length || moment(minDate).isAfter(maxDate)}
+        menu={{
+          selectedKeys: [moment(date).month().toString()],
+          options: availableMonths,
+        }}
+        onChange={(event) => {
+          setMonth(getMonthEndDate(moment(date).set('M', event.key)));
+        }}
+        dropdownInputText={MONTHS[moment(date).month()].label}
+        scrollMenuToBottom
+      />
+      <Dropdown
+        disabled={!availableYears.length || moment(minDate).isAfter(maxDate)}
+        menu={{
+          selectedKeys: [moment(date).year().toString()],
+          options: availableYears,
+        }}
+        size="small"
+        onChange={(event) => {
+          setMonth(getMonthEndDate(moment(date).set('y', event.key)));
+        }}
+        dropdownInputText={moment(date).year()}
+        scrollMenuToBottom
+      />
+      <ClickableIcon
+        size="small"
+        ariaLabel="Select Next Month"
+        name="chevron-right"
+        className={classify(css.headerIcon, {
+          [css.disabledIcon]: nextDisabled,
+        })}
+        onClick={onClickNext}
+        color={nextDisabled ? 'disabled' : 'secondary'}
+      />
+    </div>
+  );
+};
 
 export const DateRangeWrapper: React$AbstractComponent<
   DateRangeWrapperProps,
@@ -150,6 +164,8 @@ export const DateRangeWrapper: React$AbstractComponent<
       onCancel,
       handlers,
       hoverDay,
+      minDate,
+      maxDate,
       timezone,
       dateRange,
       rangeStartMonth,
@@ -189,6 +205,8 @@ export const DateRangeWrapper: React$AbstractComponent<
       handlers,
       hoverDay,
       dateRange,
+      minDate,
+      maxDate,
     };
 
     return (
@@ -207,7 +225,12 @@ export const DateRangeWrapper: React$AbstractComponent<
               date={rangeStartMonth}
               setMonth={setRangeStartMonth}
               nextDisabled={!canNavigateCloser}
-              prevDisabled={false}
+              prevDisabled={moment(rangeStartMonth).isSameOrBefore(
+                minDate,
+                'M',
+              )}
+              minDate={minDate}
+              maxDate={maxDate}
               onClickNext={() =>
                 onMonthNavigate(
                   MARKERS.DATE_RANGE_START,
@@ -227,10 +250,10 @@ export const DateRangeWrapper: React$AbstractComponent<
               rangeEndMonth={rangeEndMonth}
               date={rangeEndMonth}
               setMonth={setRangeEndMonth}
-              nextDisabled={moment(
-                getAddedDate(rangeEndMonth, 1, 'M'),
-              ).isSameOrAfter(moment())}
+              nextDisabled={moment(rangeEndMonth).isSameOrAfter(maxDate, 'M')}
               prevDisabled={!canNavigateCloser}
+              minDate={minDate}
+              maxDate={maxDate}
               onClickNext={() =>
                 onMonthNavigate(MARKERS.DATE_RANGE_END, NAVIGATION_ACTION.NEXT)
               }
@@ -257,6 +280,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               {!hideTimezone && (
                 <SimpleDropdown
                   options={getTimezones()}
+                  disabled={moment(minDate).isAfter(maxDate)}
                   classNames={{
                     box: css.timezoneDropdown,
                   }}

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

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

package/lib/components/Menu/Menu.js

@@ -27,6 +27,7 @@ const RenderOption = _ref => {
     groupTitleOptions,
     classNames,
     searchText = '',
+    showResultText = true,
     ...restProps
   } = _ref;
   const {
@@ -46,7 +47,7 @@ const RenderOption = _ref => {
       menuHeight,
       itemHeight
     } = virtualization;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
     }, resultText), virtualization && isVirtualizationEnabled ? /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
@@ -80,7 +81,7 @@ const RenderOption = _ref => {
   if (composeOptions && Array.isArray(composeOptions) && composeOptions.length) {
     const optionsFiltered = !allowSearch ? composeOptions : (0, _menu.getFilteredComposeOptionsFromSearchText)(composeOptions, searchText);
     const resultText = !allowSearch ? '' : (0, _menu.getFilteredComposeOptionsResultText)(optionsFiltered);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
     }, resultText), optionsFiltered.map((composeMenuOptions, index) =>
@@ -101,7 +102,7 @@ const RenderOption = _ref => {
   if (groupTitleOptions && Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
     const optionsFiltered = !allowSearch ? groupTitleOptions : (0, _menu.getFilteredGroupTitleOptionsFromSearchText)(groupTitleOptions, searchText);
     const resultText = !allowSearch ? '' : (0, _menu.getFilteredGroupTitleOptionsResultText)(optionsFiltered);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
     }, resultText), optionsFiltered.map((optionsGroup, index) =>
@@ -163,7 +164,7 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     ref: ref
   }, hasHeader && /*#__PURE__*/React.createElement("div", {
-    className: _MenuModule.default.menuHeader
+    className: (0, _classify.classify)(_MenuModule.default.menuHeader, classNames?.header)
   }, header), allowSearch && /*#__PURE__*/React.createElement(_SearchInput.SearchInput, {
     value: searchText,
     onChange: e => setSearchText(e.target.value),
@@ -172,7 +173,7 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
   }), /*#__PURE__*/React.createElement(RenderOption, _extends({}, props, {
     searchText: searchText
   })), hasFooter && /*#__PURE__*/React.createElement("div", {
-    className: _MenuModule.default.menuFooter
+    className: (0, _classify.classify)(_MenuModule.default.menuFooter, classNames?.footer)
   }, footer));
 });
 exports.Menu = Menu;

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

@@ -75,6 +75,7 @@ export type BaseMenuProps = {
   virtualization?: Virtualization,
   header?: React.Node,
   footer?: React.Node,
+  showResultText?: boolean,
 };
 
 export type MenuOptionTypes = {
@@ -114,6 +115,7 @@ const RenderOption = ({
   groupTitleOptions,
   classNames,
   searchText = '',
+  showResultText = true,
   ...restProps
 }: RenderOptionProps): React.Node => {
   const {
@@ -141,7 +143,7 @@ const RenderOption = ({
 
     return (
       <>
-        {allowSearch && (
+        {allowSearch && showResultText && (
           <FormLabelSmall
             className={css.filterOptionsResultText}
             color="tertiary"
@@ -204,7 +206,7 @@ const RenderOption = ({
 
     return (
       <>
-        {allowSearch && (
+        {allowSearch && showResultText && (
           <FormLabelSmall
             className={css.filterOptionsResultText}
             color="tertiary"
@@ -250,7 +252,7 @@ const RenderOption = ({
 
     return (
       <>
-        {allowSearch && (
+        {allowSearch && showResultText && (
           <FormLabelSmall
             className={css.filterOptionsResultText}
             color="tertiary"
@@ -348,7 +350,11 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
           }}
           ref={ref}
         >
-          {hasHeader && <div className={css.menuHeader}>{header}</div>}
+          {hasHeader && (
+            <div className={classify(css.menuHeader, classNames?.header)}>
+              {header}
+            </div>
+          )}
           {allowSearch && (
             <SearchInput
               value={searchText}
@@ -358,7 +364,11 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
             />
           )}
           <RenderOption {...props} searchText={searchText} />
-          {hasFooter && <div className={css.menuFooter}>{footer}</div>}
+          {hasFooter && (
+            <div className={classify(css.menuFooter, classNames?.footer)}>
+              {footer}
+            </div>
+          )}
         </div>
       );
     },

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

@@ -92,7 +92,7 @@
 }
 
 .smallWithHeader,
-.smallWithHeaderAndFooter {
+.smallWithFooter {
   max-height: calc(size228 + size50);
 }
 

package/lib/types/date-range-picker.js

@@ -0,0 +1,3 @@
+"use strict";
+
+var _dateRangePicker = require("../utils/date-range-picker");

package/lib/types/date-range-picker.js.flow

@@ -0,0 +1,18 @@
+// @flow strict
+
+import {DATE_RANGE_PICKER_ERRORS} from '../utils/date-range-picker';
+
+
+export type TimeUnit = 'years' | 'months' | 'days' | 'd' | 'M' | 'y';
+export type DateRange = {startDate?: ?string, endDate?: ?string};
+export type DateRangePickerErrorTypes = $Keys<typeof DATE_RANGE_PICKER_ERRORS>;
+export type DateRangePickerError = {
+  type: string,
+  description: string,
+};
+export type DateRangeWithTimezone = {|
+  ...DateRange,
+  startDateUTC?: ?string,
+  endDateUTC?: ?string,
+  timezone?: string,
+|};

package/lib/types/index.js

@@ -25,6 +25,17 @@ Object.keys(_common).forEach(function (key) {
     }
   });
 });
+var _dateRangePicker = require("./date-range-picker");
+Object.keys(_dateRangePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dateRangePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dateRangePicker[key];
+    }
+  });
+});
 var _menu = require("./menu");
 Object.keys(_menu).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/types/index.js.flow

@@ -2,6 +2,7 @@
 
 export * from './charts';
 export * from './common';
+export * from './date-range-picker';
 export * from './menu';
 export * from './toast';
 export * from './typography';

package/lib/types/menu.js.flow

@@ -6,4 +6,6 @@ export type MenuClassNames = $ReadOnly<{
   groupTitle?: string,
   optionTextContainer?: string,
   optionTextLabel?: string,
+  header?: string,
+  footer?: string,
 }>;