@spaced-out/ui-design-system 0.1.109 → 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/Input/Input.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Input = exports.INPUT_TYPES = void 0;
+exports.Input = exports.INPUT_TYPES = exports.EXPONENT_CHARACTER_LIST = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _Icon = require("../Icon");
@@ -13,6 +13,8 @@ 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 EXPONENT_CHARACTER_LIST = ['E', 'e'];
+exports.EXPONENT_CHARACTER_LIST = EXPONENT_CHARACTER_LIST;
 const INPUT_TYPES = Object.freeze({
   text: 'text',
   number: 'number',
@@ -55,6 +57,8 @@ const Input_ = (props, ref) => {
     required,
     readOnly,
     boxRef,
+    onKeyDown,
+    disallowExponents,
     ...inputProps
   } = props;
   const [showPassword, setShowPassword] = React.useState(false);
@@ -68,6 +72,14 @@ const Input_ = (props, ref) => {
     }
     onIconRightClick && onIconRightClick(e);
   };
+  const handleKeyDown = e => {
+    if (type === INPUT_TYPES.number && disallowExponents) {
+      if (EXPONENT_CHARACTER_LIST.includes(e.key)) {
+        e.preventDefault();
+      }
+    }
+    onKeyDown?.(e);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InputModule.default.wrapper, {
       [_InputModule.default.filled]: controlledInputFilled ?? false,
@@ -107,7 +119,8 @@ const Input_ = (props, ref) => {
     onFocus: onFocus,
     onBlur: onBlur,
     type: showPassword ? 'text' : type,
-    readOnly: readOnly && 'readOnly'
+    readOnly: readOnly && 'readOnly',
+    onKeyDown: handleKeyDown
   })), type === 'color' && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InputModule.default.colorText, _InputModule.default[size], {
       [_InputModule.default.hasValue]: value

package/lib/components/Input/Input.js.flow

@@ -15,6 +15,8 @@ type ClassNames = $ReadOnly<{
   iconRight?: string,
 }>;
 
+export const EXPONENT_CHARACTER_LIST = ['E', 'e'];
+
 export const INPUT_TYPES = Object.freeze({
   text: 'text',
   number: 'number',
@@ -69,6 +71,11 @@ export type InputProps = {
   min?: string,
   max?: string,
   autoComplete?: string,
+  /* Note(Nishant): Restricts typing `e` and `E` in the number input when
+  set to true. We have baked this condition in the keydown handler itself so
+  this would restrict and not show these exponent characters when typed
+  **/
+  disallowExponents?: boolean,
   /** The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any.
    * Only values which are equal to the basis for stepping (min if specified, value otherwise, and an
    * appropriate default value if neither of those is provided) are valid. */
@@ -102,6 +109,8 @@ const Input_ = (props: InputProps, ref): React.Node => {
     required,
     readOnly,
     boxRef,
+    onKeyDown,
+    disallowExponents,
     ...inputProps
   } = props;
 
@@ -121,6 +130,16 @@ const Input_ = (props: InputProps, ref): React.Node => {
     onIconRightClick && onIconRightClick(e);
   };
 
+  const handleKeyDown = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
+    if (type === INPUT_TYPES.number && disallowExponents) {
+      if (EXPONENT_CHARACTER_LIST.includes(e.key)) {
+        e.preventDefault();
+      }
+    }
+
+    onKeyDown?.(e);
+  };
+
   return (
     <div
       className={classify(css.wrapper, {
@@ -173,6 +192,7 @@ const Input_ = (props: InputProps, ref): React.Node => {
           onBlur={onBlur}
           type={showPassword ? 'text' : type}
           readOnly={readOnly && 'readOnly'}
+          onKeyDown={handleKeyDown}
         />
         {type === 'color' && (
           <div

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