@spaced-out/ui-design-system 0.4.15-beta.0 → 0.4.15

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

@@ -0,0 +1,201 @@
+// @flow strict
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import {UnstyledButton} from '../Button';
+import {Checkbox} from '../Checkbox';
+import {Icon} from '../Icon';
+import {RadioButton} from '../RadioButton';
+import {Truncate} from '../Truncate';
+import {TruncatedTextWithTooltip} from '../TruncatedTextWithTooltip';
+
+import type {BaseMenuProps, MenuOption} from './Menu';
+
+import css from './Menu.module.css';
+
+
+export type MenuOptionProps = {
+  ...BaseMenuProps,
+  option: MenuOption,
+  isLastItem?: boolean,
+  style?: mixed,
+};
+
+export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
+  const lastMenuItemRef: {current: HTMLButtonElement | null} =
+    React.useRef(null);
+  const {
+    option,
+    size = 'medium',
+    onSelect,
+    selectedOption,
+    menuDisabled,
+    classNames,
+    optionsVariant = 'normal',
+    selectedKeys,
+    isLastItem,
+    onTabOut,
+    resolveLabel,
+    resolveSecondaryLabel,
+    style,
+    showLabelTooltip,
+    allowWrap = false,
+  } = props;
+  const {
+    key,
+    label,
+    secondaryLabel,
+    customComponent,
+    iconLeft,
+    iconLeftType,
+    classNames: optionClassNames,
+    iconRight,
+    iconRightType,
+    disabled,
+    optionSize,
+    optionVariant = optionsVariant,
+    indeterminate = false,
+  } = option;
+  const [buttonSize, setButtonSize] = React.useState(optionSize || size);
+  const resolvedLabel = resolveLabel ? resolveLabel(option) : label;
+  const resolvedSecondaryLabel = resolveSecondaryLabel
+    ? resolveSecondaryLabel(option)
+    : secondaryLabel;
+  const isSelected = () => {
+    if (!selectedKeys || !Array.isArray(selectedKeys) || !selectedKeys.length) {
+      return false;
+    }
+
+    return selectedKeys.includes(option.key);
+  };
+
+  React.useEffect(() => {
+    setButtonSize(optionSize || size);
+  }, [optionSize, size]);
+
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Tab' && !event.shiftKey) {
+        // Tab pressed without shift key, calling tab out callback
+        onTabOut?.();
+      }
+    };
+
+    lastMenuItemRef.current?.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      lastMenuItemRef.current?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isLastItem]);
+
+  return (
+    <UnstyledButton
+      className={classify(
+        css.option,
+        {
+          [css.selected]: isSelected() || key === selectedOption?.key,
+          [css.optionSmall]: buttonSize === 'small',
+          [css.optionMedium]: buttonSize === 'medium',
+          [css.disabled]: menuDisabled || disabled,
+          [css.withIconLeft]: !!iconLeft,
+          [css.withIconRight]: !!iconRight,
+        },
+        classNames?.option,
+        optionClassNames?.wrapper,
+      )}
+      style={style}
+      disabled={menuDisabled || disabled}
+      onClick={(e) => onSelect && onSelect(option, e)}
+      autoFocus={selectedOption?.key === key}
+      {...(isLastItem ? {ref: lastMenuItemRef} : {})}
+    >
+      {optionVariant === 'checkbox' && (
+        <Checkbox
+          tabIndex={-1}
+          disabled={menuDisabled || disabled}
+          checked={isSelected()}
+          indeterminate={indeterminate}
+        />
+      )}
+      {optionVariant === 'radio' && (
+        <RadioButton
+          disabled={menuDisabled || disabled}
+          value={option.key}
+          selectedValue={selectedKeys?.[0]}
+          tabIndex={-1}
+        />
+      )}
+      {!!iconLeft && (
+        <Icon
+          name={iconLeft}
+          type={iconLeftType}
+          size="small"
+          className={css.icon}
+        />
+      )}
+      <div
+        className={classify(
+          css.optionTextContainer,
+          classNames?.optionTextContainer,
+        )}
+      >
+        {React.isValidElement(customComponent) ? (
+          customComponent
+        ) : (
+          <div
+            className={classify(
+              css.optionTextLabel,
+              classNames?.optionTextLabel,
+            )}
+          >
+            {renderLabel(resolvedLabel, allowWrap, showLabelTooltip)}
+          </div>
+        )}
+
+        {!!secondaryLabel && (
+          <div className={css.optionTextSecondaryLabel}>
+            <Truncate>{resolvedSecondaryLabel}</Truncate>
+          </div>
+        )}
+      </div>
+
+      {!!iconRight && (
+        <Icon
+          name={iconRight}
+          type={iconRightType}
+          size="small"
+          className={classify(css.icon, css.rightIcon)}
+        />
+      )}
+    </UnstyledButton>
+  );
+};
+
+const renderLabel = (label, allowWrap, showLabelTooltip) => {
+  if (showLabelTooltip) {
+    return (
+      <TruncatedTextWithTooltip
+        tooltip={{
+          bodyMaxLines: showLabelTooltip.maxLines ?? 10,
+          delayMotionDuration: 'normal',
+        }}
+        line={3}
+      >
+        {label}
+      </TruncatedTextWithTooltip>
+    );
+  }
+
+  if (allowWrap) {
+    return (
+      <TruncatedTextWithTooltip
+        tooltip={{bodyMaxLines: 10, delayMotionDuration: 'normal'}}
+        line={3}
+      >
+        {label}
+      </TruncatedTextWithTooltip>
+    );
+  }
+
+  return <Truncate>{label}</Truncate>;
+};

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

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './Menu';
+export * from './MenuOptionButton';

package/lib/components/Modal/Modal.js

@@ -18,7 +18,7 @@ var _Truncate = require("../Truncate/Truncate");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // $FlowFixMe[untyped-import]
 const DEFAULT_MODAL_ANIMATION = {
   duration: {
     open: parseInt(_motion.motionDurationSlow),
@@ -84,8 +84,6 @@ const createPortalRoot = id => {
   return modalRoot;
 };
 const getModalRoot = id => document.getElementById(`modal-root-${id}`);
-
-// @ts-ignore - TS2315 - Type 'NodeList' is not generic.
 function hasChildNode(nodeList) {
   for (let i = 0, len = nodeList.length; i < len; i++) {
     if (nodeList[i].firstChild !== null) {
@@ -147,9 +145,7 @@ const Modal = _ref4 => {
   const {
     isMounted,
     styles
-  } = (0, _react2.useTransitionStyles)(context,
-  // @ts-ignore - TS2345 - Argument of type 'UseTransitionStylesProps | { readonly duration: { readonly open: number; readonly close: number; }; readonly initial: { readonly transform: "translate(-50%, -50%) scale(0.95)"; readonly opacity: "0%"; }; readonly open: { ...; }; readonly close: { ...; }; }' is not assignable to parameter of type 'UseTransitionStylesProps | undefined'.
-  customAnimation || DEFAULT_MODAL_ANIMATION);
+  } = (0, _react2.useTransitionStyles)(context, customAnimation || DEFAULT_MODAL_ANIMATION);
   const modalId = (0, _helpers.uuid)();
   const bodyRef = React.useRef(document.querySelector('body'));
   const portalRootRef = React.useRef(getModalRoot(modalId) || createPortalRoot(modalId));

package/lib/components/Modal/Modal.js.flow

@@ -0,0 +1,370 @@
+// @flow strict
+
+import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import {createPortal} from 'react-dom';
+import {
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+  // $FlowFixMe[untyped-import]
+  useTransitionStyles,
+} from '@floating-ui/react';
+
+import useMountTransition from '../../hooks/useMountTransition';
+import {
+  motionDurationNormal,
+  motionDurationSlow,
+} from '../../styles/variables/_motion';
+import {opacity0, opacity100} from '../../styles/variables/_opacity';
+import {spaceNegHalfFluid} from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import {uuid} from '../../utils/helpers';
+import {Button} from '../Button/Button';
+import {Truncate} from '../Truncate/Truncate';
+
+import css from './Modal.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  container?: string,
+  content?: string,
+  backdrop?: string,
+}>;
+
+export type UseTransitionStylesProps = {
+  duration?: number | {open: number, close: number},
+  initial?: {+[key: string]: mixed},
+  open?: {+[key: string]: mixed},
+  close?: {+[key: string]: mixed},
+  common?: {+[key: string]: mixed},
+};
+
+type FooterClassNames = $ReadOnly<{
+  wrapper?: string,
+  actions?: string,
+}>;
+
+export type ModalProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  isOpen?: boolean,
+  onClose?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  hideBackdrop?: boolean,
+  tapOutsideToClose?: boolean,
+  allowBackgroundInteraction?: boolean,
+  initialFocus?: number,
+  customAnimation?: UseTransitionStylesProps,
+};
+
+export type ModalSize = 'small' | 'medium' | 'large';
+
+export type BaseModalProps = {
+  ...ModalProps,
+  size?: ModalSize,
+};
+
+export type ModalHeaderProps = {
+  children?: React.Node,
+  hideCloseBtn?: boolean,
+  onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string,
+};
+
+export type ModalFooterProps = {
+  children?: React.Node,
+  classNames?: FooterClassNames,
+};
+
+export type ModalBodyProps = {
+  children?: React.Node,
+  className?: string,
+};
+
+const DEFAULT_MODAL_ANIMATION = {
+  duration: {
+    open: parseInt(motionDurationSlow),
+    close: parseInt(motionDurationNormal),
+  },
+  initial: {
+    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
+  },
+  open: {
+    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(1)`,
+    opacity: opacity100,
+  },
+  close: {
+    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
+  },
+};
+
+export const ModalHeader = ({
+  children,
+  hideCloseBtn,
+  onCloseButtonClick,
+  className,
+}: ModalHeaderProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={classify(css.modalHeader, className)}>
+        <div className={css.headerContent}>
+          <Truncate>{children}</Truncate>
+        </div>
+        {!hideCloseBtn && (
+          <Button
+            iconLeftName="xmark"
+            type="ghost"
+            onClick={onCloseButtonClick}
+            ariaLabel="Close Button"
+          ></Button>
+        )}
+      </div>
+    )}
+  </>
+);
+
+export const ModalBody = ({
+  children,
+  className,
+}: ModalBodyProps): React.Node => (
+  <div className={classify(css.modalBody, className)}>{children}</div>
+);
+
+export const ModalFooter = ({
+  children,
+  classNames,
+}: ModalFooterProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={classify(css.modalFooter, classNames?.wrapper)}>
+        <div className={classify(css.modalFooterActions, classNames?.actions)}>
+          {children}
+        </div>
+      </div>
+    )}
+  </>
+);
+
+const createPortalRoot = (id: string) => {
+  const modalRoot = document.createElement('div');
+  modalRoot.setAttribute('id', `modal-root-${id}`);
+
+  return modalRoot;
+};
+
+const getModalRoot = (id: string) =>
+  document.getElementById(`modal-root-${id}`);
+
+function hasChildNode(nodeList) {
+  for (let i = 0, len = nodeList.length; i < len; i++) {
+    if (nodeList[i].firstChild !== null) {
+      return true;
+    }
+  }
+  return false;
+}
+
+const fixBody = (bodyEl: HTMLBodyElement) => {
+  const body = document.getElementsByTagName('body')[0];
+  if (body && body.classList) {
+    body.classList.add('fixed');
+  }
+  if (bodyEl) {
+    bodyEl.style.overflow = 'hidden';
+  }
+};
+
+const unfixBody = (bodyEl: HTMLBodyElement) => {
+  const body = document.getElementsByTagName('body')[0];
+  if (body && body.classList) {
+    body.classList.remove('fixed');
+  }
+  if (bodyEl) {
+    bodyEl.style.overflow = '';
+  }
+};
+
+const checkAndAddBodyOverflow = (bodyEl: HTMLBodyElement) => {
+  const nodes = document.querySelectorAll('[id^="modal-root"]');
+  let isParentModalPresent = false;
+  if (nodes.length) {
+    isParentModalPresent = hasChildNode(nodes);
+  }
+  if (isParentModalPresent) {
+    fixBody(bodyEl);
+  } else {
+    unfixBody(bodyEl);
+  }
+};
+
+export const Modal = ({
+  classNames,
+  children,
+  isOpen = false,
+  onClose,
+  hideBackdrop = false,
+  tapOutsideToClose = true,
+  initialFocus = -1,
+  customAnimation,
+  allowBackgroundInteraction = false,
+  // Size is not set to default for backward compatibility. Don't change if you don't know this.
+  size,
+}: BaseModalProps): React.Node => {
+  const {refs, context} = useFloating({open: isOpen});
+  const {isMounted, styles} = useTransitionStyles(
+    context,
+    customAnimation || DEFAULT_MODAL_ANIMATION,
+  );
+  const modalId = uuid();
+
+  const bodyRef = React.useRef(document.querySelector('body'));
+  const portalRootRef = React.useRef(
+    getModalRoot(modalId) || createPortalRoot(modalId),
+  );
+
+  const isTransitioning = useMountTransition(
+    isOpen,
+    parseInt(motionDurationNormal),
+  );
+
+  // Append portal root on mount
+  React.useEffect(() => {
+    bodyRef.current?.appendChild(portalRootRef.current);
+    const portal = portalRootRef.current;
+    const bodyEl = bodyRef.current;
+
+    return () => {
+      // Clean up the portal when modal component unmounts
+      portal.remove();
+      // Ensure scroll overflow is removed
+      if (bodyEl) {
+        unfixBody(bodyEl);
+      }
+    };
+  }, []);
+
+  // Prevent page scrolling when the modal is open
+  React.useEffect(() => {
+    const updatePageScroll = () => {
+      if (isOpen) {
+        if (bodyRef.current) {
+          fixBody(bodyRef.current);
+        }
+      } else {
+        if (bodyRef.current) {
+          unfixBody(bodyRef.current);
+        }
+      }
+    };
+
+    updatePageScroll();
+  }, [isOpen]);
+
+  // Allow Escape key to dismiss the modal
+  React.useEffect(() => {
+    const onKeyPress = (e) => {
+      if (e.key === 'Escape') {
+        tapOutsideToClose && onClose && onClose(e);
+      }
+    };
+
+    if (isOpen) {
+      window.addEventListener('keyup', onKeyPress);
+    }
+
+    return () => {
+      window.removeEventListener('keyup', onKeyPress);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen && !isMounted) {
+    // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
+    // TODO(Nishant): Better way to do this?
+    setTimeout(() => {
+      if (bodyRef && !!bodyRef.current) {
+        checkAndAddBodyOverflow(bodyRef.current);
+      }
+    });
+
+    return null;
+  }
+
+  const onBackdropClick = (e: SyntheticEvent<HTMLElement>) => {
+    if (tapOutsideToClose && onClose) {
+      onClose(e);
+    }
+  };
+
+  return createPortal(
+    <FloatingFocusManager context={context} initialFocus={initialFocus}>
+      <div
+        ref={refs.setFloating}
+        aria-hidden={isOpen ? 'false' : 'true'}
+        className={classify(
+          css.modalContainer,
+          {
+            [css.in]: isTransitioning,
+            [css.open]: isOpen,
+          },
+          classNames?.container,
+        )}
+      >
+        {!allowBackgroundInteraction && (
+          <div
+            className={classify(
+              css.backdrop,
+              {
+                [css.darkBackdrop]: !hideBackdrop,
+              },
+              classNames?.backdrop,
+            )}
+            onClick={onBackdropClick}
+            style={{
+              opacity: styles?.opacity,
+              transition: styles?.transition,
+            }}
+          />
+        )}
+
+        {isMounted && (
+          <div
+            className={classify(
+              css.modal,
+              {
+                [css.small]: size === 'small',
+                [css.medium]: size === 'medium',
+                [css.large]: size === 'large',
+              },
+              classNames?.content,
+            )}
+            role="dialog"
+            style={{
+              // Transition styles
+              ...styles,
+            }}
+          >
+            {children}
+          </div>
+        )}
+      </div>
+    </FloatingFocusManager>,
+    portalRootRef.current,
+  );
+};
+
+// FullScreen modal that just calls the Modal component with a wrapper className set which sets the width and height to sizeFluid
+export const FullScreenModal = ({
+  classNames,
+  ...props
+}: ModalProps): React.Node => (
+  <Modal
+    classNames={{
+      ...classNames,
+      content: classify(css.fullscreenModalContainer, classNames?.content),
+    }}
+    {...props}
+  />
+);

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

@@ -0,0 +1,15 @@
+//@flow strict
+export type {
+  BaseModalProps,
+  ModalBodyProps,
+  ModalFooterProps,
+  ModalHeaderProps,
+  ModalProps,
+} from './Modal';
+export {
+  FullScreenModal,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from './Modal';

package/lib/components/Notification/Notification.js

@@ -62,7 +62,6 @@ const Notification = exports.Notification = /*#__PURE__*/React.forwardRef((props
     iconLeftType,
     dismissable,
     children,
-    // @ts-ignore - TS2339 - Property 'selfDismiss' does not exist on type 'NotificationProps'.
     selfDismiss = false,
     onCloseClick
   } = props;