@spaced-out/ui-design-system 0.3.38 → 0.3.39

package/lib/components/Menu/MenuOptionButton.d.ts

@@ -0,0 +1,199 @@
+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?: unknown;
+};
+export const MenuOptionButton = (props: MenuOptionProps): React.ReactNode => {
+  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.d.ts

@@ -0,0 +1,2 @@
+export * from './Menu';
+export * from './MenuOptionButton';

package/lib/components/Modal/Modal.d.ts

@@ -0,0 +1,354 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+// @ts-expect-error[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 {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?: Readonly<Record<string, unknown>>;
+  open?: Readonly<Record<string, unknown>>;
+  close?: Readonly<Record<string, unknown>>;
+  common?: Readonly<Record<string, unknown>>;
+};
+type FooterClassNames = $ReadOnly<{
+  wrapper?: string;
+  actions?: string;
+}>;
+export type ModalProps = {
+  classNames?: ClassNames;
+  children?: React.ReactNode;
+  isOpen?: boolean;
+  onClose?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  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.ReactNode;
+  hideCloseBtn?: boolean;
+  onCloseButtonClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  className?: string;
+};
+export type ModalFooterProps = {
+  children?: React.ReactNode;
+  classNames?: FooterClassNames;
+};
+export type ModalBodyProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+const DEFAULT_MODAL_ANIMATION = {
+  duration: {
+    open: parseInt(motionDurationSlow),
+    close: parseInt(motionDurationNormal),
+  },
+  initial: {
+    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+  },
+  open: {
+    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(1)`,
+  },
+  close: {
+    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+  },
+};
+export const ModalHeader = ({
+  children,
+  hideCloseBtn,
+  onCloseButtonClick,
+  className,
+}: ModalHeaderProps): React.ReactNode => (
+  <>
+    {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.ReactNode => (
+  <div className={classify(css.modalBody, className)}>{children}</div>
+);
+export const ModalFooter = ({
+  children,
+  classNames,
+}: ModalFooterProps): React.ReactNode => (
+  <>
+    {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.ReactNode => {
+  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 (!isTransitioning && !isOpen) {
+    // 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: React.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}
+          />
+        )}
+
+        {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.ReactNode => (
+  <Modal
+    classNames={{
+      ...classNames,
+      content: classify(css.fullscreenModalContainer, classNames?.content),
+    }}
+    {...props}
+  />
+);

package/lib/components/Modal/index.d.ts

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

package/lib/components/Notification/Notification.d.ts

@@ -0,0 +1,147 @@
+import {$ReadOnly, $Values} from 'utility-types';
+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?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+};
+type NotificationBaseProps = BaseNotificationProps &
+  (
+    | {
+        dismissable: true;
+        onCloseClick?:
+          | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+          | null
+          | undefined;
+        selfDismiss?: boolean;
+      }
+    | {
+        dismissable?: false;
+      }
+  ) & {
+    classNames?: ClassNames;
+  };
+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.ReactNode => {
+    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.ReactNode => {
+    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.d.ts

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