@spaced-out/ui-design-system 0.4.15 → 0.5.1

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

@@ -1,370 +0,0 @@
-// @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

@@ -1,15 +0,0 @@
-//@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.flow

@@ -1,149 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-import {classify} from '../../utils/classify';
-import type {IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {SubTitleSmall} from '../Text';
-
-import css from './Notification.module.css';
-
-
-export const NOTIFICATION_SEMANTIC = Object.freeze({
-  success: 'success',
-  information: 'information',
-  danger: 'danger',
-});
-
-type ClassNames = $ReadOnly<{wrapper?: string, text?: string}>;
-
-export type NotificationSemanticType = $Values<typeof NOTIFICATION_SEMANTIC>;
-
-type BaseNotificationProps = {
-  classNames?: ClassNames,
-  semantic: NotificationSemanticType,
-  iconLeftName?: string,
-  iconLeftType?: IconType,
-  dismissable?: boolean,
-  children?: string,
-  onCloseClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-};
-
-type NotificationBaseProps = {
-  ...BaseNotificationProps,
-  classNames?: ClassNames,
-  ...
-    | {
-        dismissable: true,
-        onCloseClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-        selfDismiss?: boolean,
-      }
-    | {dismissable?: false},
-};
-
-export type NotificationProps = {
-  ...NotificationBaseProps,
-  semantic: NotificationSemanticType,
-};
-
-// Base Notification will not have any state.
-
-const BaseNotification: React$AbstractComponent<
-  BaseNotificationProps,
-  HTMLDivElement,
-> = React.forwardRef<BaseNotificationProps, HTMLDivElement>(
-  (props: BaseNotificationProps, ref): React.Node => {
-    const {
-      classNames,
-      semantic = NOTIFICATION_SEMANTIC.success,
-      iconLeftName,
-      iconLeftType = 'regular',
-      dismissable,
-      children,
-      onCloseClick,
-    } = props;
-    return (
-      <div
-        className={classify(
-          css.baseContainer,
-          {
-            [css.success]: semantic === NOTIFICATION_SEMANTIC.success,
-            [css.information]: semantic === NOTIFICATION_SEMANTIC.information,
-            [css.danger]: semantic === NOTIFICATION_SEMANTIC.danger,
-            [css.dismissable]: dismissable,
-          },
-          classNames?.wrapper,
-        )}
-        ref={ref}
-      >
-        {iconLeftName ? (
-          <Icon
-            name={iconLeftName}
-            color={TEXT_COLORS.inversePrimary}
-            size="small"
-            type={iconLeftType}
-          />
-        ) : null}
-        <SubTitleSmall
-          className={classify(classNames?.text)}
-          color={TEXT_COLORS.inversePrimary}
-        >
-          {children}
-        </SubTitleSmall>
-        {dismissable && (
-          <Icon
-            color={TEXT_COLORS.inversePrimary}
-            name="close"
-            size="small"
-            type="regular"
-            onClick={onCloseClick}
-            className={css.closeIcon}
-          />
-        )}
-      </div>
-    );
-  },
-);
-
-export const Notification: React$AbstractComponent<
-  NotificationProps,
-  HTMLDivElement,
-> = React.forwardRef<NotificationProps, HTMLDivElement>(
-  (props: NotificationProps, ref): React.Node => {
-    const {
-      classNames,
-      semantic = NOTIFICATION_SEMANTIC.success,
-      iconLeftName,
-      iconLeftType,
-      dismissable,
-      children,
-      selfDismiss = false,
-      onCloseClick,
-    } = props;
-    const [dismissed, setDismissed] = React.useState(false);
-    const closeClickHandler = (e) => {
-      onCloseClick && onCloseClick(e);
-      selfDismiss && setDismissed(true);
-    };
-
-    return (
-      <>
-        {!dismissed && (
-          <BaseNotification
-            classNames={classNames}
-            iconLeftName={iconLeftName}
-            iconLeftType={iconLeftType}
-            semantic={semantic}
-            dismissable={dismissable}
-            onCloseClick={closeClickHandler}
-            ref={ref}
-          >
-            {children}
-          </BaseNotification>
-        )}
-      </>
-    );
-  },
-);

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

@@ -1,3 +0,0 @@
-// @flow strict
-
-export {Notification, NOTIFICATION_SEMANTIC} from './Notification';

package/lib/components/OptionButton/OptionButton.js.flow

@@ -1,153 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import type {ClickAwayRefType} from '../../utils/click-away';
-import type {ButtonProps} from '../Button';
-import {Button} from '../Button';
-import type {AnchorType} from '../ButtonDropdown';
-import {ButtonDropdown} from '../ButtonDropdown';
-import {ConditionalWrapper} from '../ConditionalWrapper';
-import type {MenuOption, MenuProps} from '../Menu';
-import type {BaseTooltipProps} from '../Tooltip';
-import {Tooltip} from '../Tooltip';
-
-import css from './OptionButton.module.css';
-
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  baseButtonWrapper?: string,
-  baseButtonIcon?: string,
-  optionsButtonWrapper?: string,
-  optionsButtonIcon?: string,
-  dropdownContainer?: string,
-}>;
-
-export type OptionButtonTooltipProps = {
-  baseButton?: BaseTooltipProps,
-  optionsButton?: BaseTooltipProps,
-};
-
-export type OptionButtonProps = {
-  ...ButtonProps,
-  menu?: MenuProps,
-  anchorPosition?: AnchorType,
-  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
-  onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  onMenuOpen?: () => mixed,
-  onMenuClose?: () => mixed,
-  tooltip?: OptionButtonTooltipProps,
-  classNames?: ClassNames,
-  clickAwayRef?: ClickAwayRefType,
-  ...
-};
-
-export const OptionButton: React$AbstractComponent<
-  OptionButtonProps,
-  HTMLDivElement,
-> = React.forwardRef<OptionButtonProps, HTMLDivElement>(
-  (
-    {
-      children,
-      iconLeftName,
-      iconLeftType,
-      type,
-      isFluid,
-      disabled,
-      size,
-      isLoading,
-      menu,
-      anchorPosition,
-      onOptionSelect,
-      onButtonClick,
-      onMenuOpen,
-      onMenuClose,
-      ariaLabel,
-      actionType,
-      tooltip,
-      classNames,
-      clickAwayRef,
-    }: OptionButtonProps,
-    ref,
-  ): React.Node => {
-    const [iconName, setIconName] = React.useState('chevron-down');
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-
-    return (
-      <div
-        className={classify(
-          css.container,
-          {[css.isFluid]: isFluid},
-          classNames?.wrapper,
-        )}
-        ref={ref}
-      >
-        <ConditionalWrapper
-          condition={Boolean(tooltip?.baseButton)}
-          wrapper={(children) => (
-            <Tooltip
-              {...tooltip?.baseButton}
-              hidden={isMenuOpen ? true : tooltip?.optionsButton?.hidden}
-            >
-              {children}
-            </Tooltip>
-          )}
-        >
-          <Button
-            iconLeftName={iconLeftName}
-            iconLeftType={iconLeftType}
-            onClick={onButtonClick}
-            size={size}
-            type={type}
-            disabled={disabled}
-            isFluid={isFluid}
-            ariaLabel={ariaLabel}
-            actionType={actionType}
-            isLoading={isLoading}
-            classNames={{
-              wrapper: classify(css.leftButton, classNames?.baseButtonWrapper),
-              icon: classNames?.baseButtonIcon,
-            }}
-          >
-            {children}
-          </Button>
-        </ConditionalWrapper>
-        <ButtonDropdown
-          anchorPosition={anchorPosition}
-          ariaLabel={ariaLabel}
-          iconLeftName={iconName}
-          tooltip={tooltip?.optionsButton}
-          classNames={{
-            buttonWrapper: classify(
-              css.rightButton,
-              classNames?.optionsButtonWrapper,
-            ),
-            dropdownContainer: classify(
-              css.dropDownContainer,
-              classNames?.dropdownContainer,
-            ),
-            buttonIcon: classNames?.optionsButtonIcon,
-          }}
-          type={type}
-          disabled={disabled}
-          menu={menu}
-          onMenuClose={() => {
-            setIconName('chevron-down');
-            setIsMenuOpen(false);
-            onMenuOpen && onMenuOpen();
-          }}
-          onMenuOpen={() => {
-            setIconName('chevron-up');
-            setIsMenuOpen(true);
-            onMenuClose && onMenuClose();
-          }}
-          onOptionSelect={onOptionSelect}
-          size={size}
-          clickAwayRef={clickAwayRef}
-        />
-      </div>
-    );
-  },
-);