@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

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

@@ -0,0 +1,228 @@
+// @flow strict
+
+import * as React from 'react';
+import invariant from 'invariant';
+
+import {pageHeight} from '../dom';
+
+
+type BoundaryRefType<T> = {
+  current: ?T,
+};
+
+type TriggerRefType<T> = {
+  current: ?T,
+};
+
+export type ChildProps = {
+  onOpen: () => void,
+  isOpen: boolean,
+  height: ?number,
+  pageBottom: ?number,
+  clickAway: () => void,
+  boundaryRef: BoundaryRefType<?HTMLElement>,
+  triggerRef: TriggerRefType<?HTMLElement>,
+};
+
+export type ClickAwayRefType = ?{
+  current: ?{
+    forceClose: () => void,
+    forceOpen: () => void,
+  },
+};
+
+export type ClickAwayProps = {
+  closeOnEscapeKeypress?: boolean,
+  children: (props: ChildProps) => React.Node,
+  onChange?: (isOpen: boolean) => mixed,
+  clickAwayRef?: ClickAwayRefType,
+  /**
+   * When containsNestedFloatingPortals is true, prevents ClickAway from closing the dropdown if the click target
+   * is inside a floating portal root element.
+   *
+   * This is necessary for nested dropdowns rendered using floating portals,
+   * such as via `@floating-ui/react`. Floating portals render elements outside
+   * the normal DOM tree (often directly into `document.body` or another container)
+   * using `ReactDOM.createPortal`. As a result, these nested dropdowns do not
+   * appear inside the parent dropdown's `boundaryRef` or `triggerRef` subtree.
+   *
+   * To address this, the floating portal ensures that all nested dropdowns
+   * are mounted into a **shared root element** — effectively maintaining a
+   * common DOM ancestry. This allows parent dropdowns to detect when clicks
+   * occur within any of their nested children, even if rendered via portals.
+   * The shared root element is the closest parent element that has a `data-floating-ui-portal` attribute.
+   * Because of this, the ClickAway logic will not close the parent menu if the click target is inside boundaryRef's parentElement.
+   *
+   * Enabling `containsNestedFloatingPortals` allows the ClickAway logic to account
+   * for this shared root and avoids incorrectly closing the parent menu when
+   * interacting with nested dropdowns.
+   */
+  containsNestedFloatingPortals?: boolean,
+};
+
+type ClickAwayState = {
+  isOpen: boolean,
+  height: ?number,
+  pageBottom: ?number,
+};
+
+// TODO(Nishant): Make this a functional component
+
+export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
+  static defaultProps: {
+    containsNestedFloatingPortals?: boolean,
+    closeOnEscapeKeypress?: boolean,
+  } = {
+      containsNestedFloatingPortals: false,
+      closeOnEscapeKeypress: true,
+    };
+
+  state: ClickAwayState = {
+    isOpen: false,
+    height: null,
+    pageBottom: null,
+  };
+
+  el: ?HTMLElement = null;
+  boundaryRef: BoundaryRefType<?HTMLElement> = React.createRef();
+  triggerRef: TriggerRefType<?HTMLElement> = React.createRef();
+
+  componentDidMount() {
+    if (this.el) {
+      this.setState({
+        height: this.el.offsetHeight,
+        pageBottom: this.pageBottom(),
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps: ClickAwayProps, prevState: ClickAwayState) {
+    const {isOpen} = this.state;
+    if (prevState.isOpen !== isOpen) {
+      if (this.state.isOpen) {
+        window.document.addEventListener('click', this.handleCloseClick, {
+          capture: true,
+        });
+        if (this.props.closeOnEscapeKeypress) {
+          window.document.addEventListener(
+            'keyup',
+            this.handleCloseOnEscapeKeypress,
+          );
+        }
+      } else {
+        window.document.removeEventListener('click', this.handleCloseClick, {
+          capture: true,
+        });
+        window.document.removeEventListener(
+          'keyup',
+          this.handleCloseOnEscapeKeypress,
+        );
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    window.document.removeEventListener('click', this.handleCloseClick, {
+      capture: true,
+    });
+    window.document.removeEventListener(
+      'keyup',
+      this.handleCloseOnEscapeKeypress,
+    );
+  }
+
+  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,
+      height,
+      pageBottom,
+      clickAway: this.forceClose,
+      boundaryRef: this.boundaryRef,
+      triggerRef: this.triggerRef,
+    });
+  }
+
+  handleOpenClick: () => void = () => {
+    // NOTE (kyle): we recalculate the position on click because sibling and niece components
+    // could have changed.
+    let {pageBottom} = this.state;
+    if (this.el) {
+      pageBottom = this.pageBottom();
+    }
+
+    this.setState(
+      {
+        isOpen: !this.state.isOpen,
+        pageBottom,
+      },
+      this.handleOnChange,
+    );
+  };
+
+  handleCloseClick: (evt: MouseEvent) => void = (evt: MouseEvent) => {
+    if (
+      evt.target instanceof Node &&
+      this.props.containsNestedFloatingPortals &&
+      this.boundaryRef.current?.parentElement &&
+      (this.boundaryRef.current.parentElement === evt.target ||
+        this.boundaryRef.current.parentElement.contains(evt.target))
+    ) {
+      return;
+    }
+
+    if (
+      evt.target instanceof Node &&
+      this.boundaryRef &&
+      (this.boundaryRef === evt.target ||
+        this.boundaryRef.current?.contains(evt.target))
+    ) {
+      return;
+    }
+
+    if (
+      evt.target instanceof Node &&
+      this.triggerRef &&
+      (this.triggerRef === evt.target ||
+        this.triggerRef.current?.contains(evt.target))
+    ) {
+      return;
+    }
+
+    this.setState(
+      {
+        isOpen: false,
+      },
+      this.handleOnChange,
+    );
+  };
+
+  handleCloseOnEscapeKeypress: (
+    evt?: SyntheticKeyboardEvent<EventTarget>,
+  ) => void = (evt?: SyntheticKeyboardEvent<EventTarget>) => {
+      if (evt?.key === 'Escape') {
+        this.forceClose();
+      }
+    };
+
+  forceClose: () => void = () => {
+    this.setState({isOpen: false}, this.handleOnChange);
+  };
+
+  handleOnChange: () => mixed = () =>
+    this.props.onChange && this.props.onChange(this.state.isOpen);
+
+  pageBottom(): $FlowFixMe {
+    invariant(this.el, 'pageBottom() requires that this.el not be null');
+    const bottomBound = this.el ? this.el.getBoundingClientRect().bottom : 0;
+    return pageHeight() - bottomBound + window.scrollY;
+  }
+}

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './click-away';

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

@@ -10,6 +10,8 @@ var _lodash = require("lodash");
 var _moment = _interopRequireDefault(require("moment"));
 var _timezones = require("./timezones");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// $FlowFixMe - strict types for date-fns
+// $FlowFixMe[untyped-import]
 const makeKey = value => {
   try {
     if (value && typeof value === 'string') {
@@ -108,7 +110,6 @@ const wrangleMoment = date => {
   } else if (!date) {
     return new Date();
   }
-  // @ts-ignore - TS2358 - The left-hand side of an 'instanceof' expression must be of type 'any', an object type or a type parameter. | TS2339 - Property 'toDate' does not exist on type 'string'.
   return date instanceof _moment.default ? date.toDate() : (0, _parseISO.default)(date);
 };
 exports.wrangleMoment = wrangleMoment;
@@ -140,7 +141,6 @@ const inDateRange = (_ref3, date) => {
     const momentDay = _moment.default.utc(date);
     const momentStartDate = _moment.default.utc(startDate);
     const momentEndDate = _moment.default.utc(endDate);
-    // @ts-ignore - TS2345 - Argument of type 'Moment' is not assignable to parameter of type 'string'.
     return isBetween(momentDay, momentStartDate, momentEndDate);
   }
   return false;
@@ -166,8 +166,6 @@ const getDaysInMonth = date => {
   const endWeek = _moment.default.utc(date).endOf('month').endOf('week');
   const days = [],
     current = startWeek;
-
-  // @ts-ignore - TS2345 - Argument of type 'Moment' is not assignable to parameter of type 'string'.
   while (isBefore(current, endWeek)) {
     days.push(current.clone().format('YYYY-MM-DD'));
     current.add(1, 'd');
@@ -176,10 +174,8 @@ const getDaysInMonth = date => {
 
   // if total rows in calendar are 5 add one more week to the calendar
   if (daysInChunks.length === 5) {
-    // @ts-ignore - TS2345 - Argument of type 'Moment' is not assignable to parameter of type 'string'.
     const nextWeek = getAddedDate(endWeek, WEEKDAYS.length, 'd');
     const extraDays = [];
-    // @ts-ignore - TS2345 - Argument of type 'Moment' is not assignable to parameter of type 'string'.
     while (isSameOrBefore(current, nextWeek)) {
       extraDays.push(current.clone().format('YYYY-MM-DD'));
       current.add(1, 'd');
@@ -188,23 +184,16 @@ const getDaysInMonth = date => {
   }
   return daysInChunks;
 };
-
-// @ts-ignore - TS2345 - Argument of type 'Moment' is not assignable to parameter of type 'string | Date | undefined'.
 exports.getDaysInMonth = getDaysInMonth;
 const getAddedDate = (date, addCount, timeUnit) => formatIsoDate(_moment.default.utc(date).add(addCount, timeUnit));
-
-// @ts-ignore - TS2345 - Argument of type 'Moment' is not assignable to parameter of type 'string | Date | undefined'.
 exports.getAddedDate = getAddedDate;
 const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate(_moment.default.utc(date).subtract(subtractCount, timeUnit));
-
-// @ts-ignore - TS2345 - Argument of type 'Moment' is not assignable to parameter of type 'string | Date | undefined'.
 exports.getSubtractedDate = getSubtractedDate;
 const getMonthEndDate = date => formatIsoDate(_moment.default.utc(date).endOf('M'));
 exports.getMonthEndDate = getMonthEndDate;
 const getTimezones = t => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
   menuOptions.push({
     key,
-    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly 'Pacific/Niue': "(GMT-11:00) Niue"; readonly 'Pacific/Pago_Pago': "(GMT-11:00) Pago Pago"; readonly 'Pacific/Honolulu': "(GMT-10:00) Hawaii Time"; readonly 'Pacific/Rarotonga': "(GMT-10:00) Rarotonga"; ... 247 more ...; readonly 'Pacific/Kiritimati': "(GMT+14:00) Kiritimati"; }'.
     label: getTranslation(t, _timezones.TIMEZONES[key])
   });
   return menuOptions;
@@ -246,20 +235,16 @@ const getAvailableMonths = _ref6 => {
     const isFirstAndMinDateYearSame = rangeStartYear === minDateYear;
     const isSecondAndMaxDateYearSame = rangeEndYear === maxDateYear;
     if (marker === MARKERS.DATE_RANGE_START) {
-      // @ts-ignore - TS2365 - Operator '>=' cannot be applied to types 'string' and 'number'.
       if (isSameYear && month.key >= rangeEndMonthKey) {
         return false;
-        // @ts-ignore - TS2365 - Operator '<' cannot be applied to types 'string' and 'number'.
       } else if (isFirstAndMinDateYearSame && month.key < minDateMonth) {
         return false;
       } else {
         return true;
       }
     } else {
-      // @ts-ignore - TS2365 - Operator '<=' cannot be applied to types 'string' and 'number'.
       if (isSameYear && month.key <= rangeStartMonthKey) {
         return false;
-        // @ts-ignore - TS2365 - Operator '>' cannot be applied to types 'string' and 'number'.
       } else if (isSecondAndMaxDateYearSame && month.key > maxDateMonth) {
         return false;
       } else {