@povio/ui 0.0.2 → 0.0.3

package/src/components/overlays/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,270 @@
+import { useResizeObserver, useViewportSize } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { AnimatePresence, type Transition, animate, motion, useMotionValue } from "motion/react";
+import { type ReactNode, type RefObject, useEffect, useMemo, useRef, useState } from "react";
+import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
+
+import { DomUtils } from "#ui/utils/dom.utils";
+
+const MotionModal = motion.create(Modal);
+const MotionModalOverlay = motion.create(ModalOverlay);
+
+const inertiaTransition = {
+  type: "inertia" as const,
+  bounceStiffness: 300,
+  bounceDamping: 40,
+  timeConstant: 300,
+};
+
+const staticTransition: Transition = {
+  duration: 0.5,
+  ease: [0.32, 0.72, 0, 1],
+};
+
+type BottomSheetState = "closed" | "opening" | "opened" | "closing";
+
+interface BottomSheetBaseProps {
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  onStateChange?: (state: BottomSheetState) => void;
+  isDismissable?: boolean;
+  isScrollable?: boolean;
+  height?: "auto" | "full";
+  label?: string;
+  portalContainerRef?: RefObject<HTMLElement>;
+  children: ReactNode | ((close: () => void) => ReactNode);
+  footer?: ReactNode;
+  sheetMarginTop?: number;
+  sheetMarginBottom?: number;
+}
+
+const BottomSheetBase = ({
+  isOpen,
+  onOpenChange,
+  onStateChange,
+  isDismissable = false,
+  isScrollable = true,
+  height = "full",
+  label,
+  portalContainerRef,
+  children,
+  footer,
+  sheetMarginTop = 96,
+  sheetMarginBottom = 128,
+}: BottomSheetBaseProps) => {
+  const viewport = useViewportSize();
+
+  const { sheetHeight, windowHeight } = useMemo(() => {
+    const sh = viewport.height - sheetMarginTop;
+    const wh = Math.max(window.innerHeight, viewport.height) - sheetMarginTop;
+    return { sheetHeight: sh, windowHeight: wh };
+  }, [viewport.height, sheetMarginTop]);
+
+  const y = useMotionValue(sheetHeight);
+
+  const closeVelocityRef = useRef<boolean>(true);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const footerRef = useRef<HTMLDivElement>(null);
+  const focusTrapRef = useRef<HTMLDivElement>(null);
+
+  const [footerHeight, setFooterHeight] = useState<number>(0);
+
+  useResizeObserver({
+    ref: footerRef,
+    onResize: () => {
+      setFooterHeight(footerRef.current?.offsetHeight || 0);
+    },
+  });
+
+  const oldHeightRef = useRef<number>(0);
+
+  useResizeObserver({
+    ref: dialogRef,
+    onResize: () => {
+      const rect = dialogRef.current?.getBoundingClientRect();
+      if (!rect || oldHeightRef.current === rect.height) {
+        return;
+      }
+      oldHeightRef.current = rect.height;
+      if (rect.bottom < viewport.height) {
+        y.stop();
+        animate(y, -(rect.height - viewport.height + sheetMarginTop));
+      }
+    },
+  });
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <MotionModalOverlay
+          isOpen
+          UNSTABLE_portalContainer={portalContainerRef?.current}
+          className="fixed top-0 left-0 z-10 w-screen"
+          onOpenChange={onOpenChange}
+          isDismissable={isDismissable}
+          style={{ height: viewport.height }}
+          ref={overlayRef}
+        >
+          <motion.div
+            className="pointer-events-none absolute inset-0 bg-elevation-fill-default-3/80"
+            animate={{ opacity: 1 }}
+            initial={{ opacity: 0 }}
+            exit={{ opacity: 0 }}
+          />
+          <MotionModal
+            isDismissable
+            className={clsx(
+              "pointer-events-none flex w-full flex-col items-stretch justify-end outline-none will-change-transform",
+              isScrollable ? "h-auto" : "h-full",
+            )}
+            animate={{ y: 0, opacity: 1 }}
+            initial={{ y: windowHeight, opacity: 1 }}
+            exit={{ y: windowHeight, opacity: 1 }}
+            onAnimationComplete={(data: { y: number }) => {
+              onStateChange?.(data.y === 0 ? "opened" : "closed");
+            }}
+            onAnimationStart={(data: { y: number }) => {
+              onStateChange?.(data.y === 0 ? "opening" : "closing");
+            }}
+            transition={staticTransition}
+            style={{ y, minHeight: "100%" }}
+            drag="y"
+            dragElastic={1}
+            dragConstraints={overlayRef}
+            onDragStart={() => {
+              if (document.activeElement && DomUtils.isKeyboardInput(document.activeElement)) {
+                focusTrapRef.current?.focus();
+              }
+              y.animation?.stop();
+              closeVelocityRef.current = isScrollable ? y.get() >= -10 : true;
+              containerRef.current?.style.setProperty("pointer-events", "none");
+            }}
+            onDragEnd={(e, { velocity }) => {
+              containerRef.current?.style.removeProperty("pointer-events");
+              if (y.get() > 0) {
+                if ((closeVelocityRef.current && velocity.y > 10) || y.get() > 200) {
+                  onOpenChange?.(false);
+                } else {
+                  animate(y, 0, { ...inertiaTransition, min: 0, max: 0 });
+                }
+              }
+            }}
+          >
+            <Dialog
+              className="relative flex min-h-0 flex-1 flex-col items-stretch outline-none"
+              ref={dialogRef}
+              aria-label={label}
+            >
+              {({ close }) => (
+                <>
+                  <div
+                    style={{ minHeight: `${sheetMarginTop}px` }}
+                    className={clsx("shrink-0", height === "auto" && "grow")}
+                  />
+                  <div
+                    className={clsx(
+                      "pointer-events-auto relative flex min-h-0 flex-col items-stretch rounded-t-xl bg-elevation-fill-default-1",
+                      height === "full" && "flex-1",
+                    )}
+                  >
+                    <div
+                      className={clsx(
+                        "absolute bottom-full left-0 w-full outline-none",
+                        isDismissable ? "h-0" : "h-screen",
+                      )}
+                      ref={focusTrapRef}
+                      tabIndex={-1}
+                    />
+                    <div
+                      className={clsx("flex min-h-0 grow flex-col items-stretch", isScrollable ? "shrink-0" : "shrink")}
+                      ref={containerRef}
+                    >
+                      {typeof children === "function" ? children(close) : children}
+                    </div>
+                    <div
+                      className="shrink-0"
+                      style={{ height: `${footerHeight + sheetMarginBottom}px` }}
+                    />
+                    <div className="absolute top-full h-screen w-full bg-elevation-fill-default-1" />
+                  </div>
+                </>
+              )}
+            </Dialog>
+          </MotionModal>
+          {footer && (
+            <motion.div
+              className="absolute bottom-0 w-full bg-elevation-fill-default-2"
+              ref={footerRef}
+              animate={{ y: 0 }}
+              initial={{ y: windowHeight }}
+              exit={{ y: windowHeight }}
+              transition={staticTransition}
+            >
+              {footer}
+            </motion.div>
+          )}
+        </MotionModalOverlay>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export interface BottomSheetProps extends BottomSheetBaseProps {
+  trigger?: ReactNode;
+}
+
+export const BottomSheet = ({
+  isOpen,
+  portalContainerRef,
+  onOpenChange,
+  trigger,
+  children,
+  ...rest
+}: BottomSheetProps) => {
+  const [isSheetOpen, setIsSheetOpen] = useState<boolean>(!!isOpen);
+
+  const hasTrigger = !!trigger;
+
+  useEffect(() => {
+    if (hasTrigger) {
+      setIsSheetOpen(!!isOpen);
+    }
+  }, [isOpen, hasTrigger]);
+
+  if (trigger) {
+    const handleOpenChange = (open: boolean) => {
+      setIsSheetOpen(open);
+      onOpenChange?.(open);
+    };
+
+    return (
+      <DialogTrigger
+        isOpen={isSheetOpen}
+        onOpenChange={handleOpenChange}
+      >
+        {trigger}
+        <BottomSheetBase
+          isOpen={isSheetOpen}
+          onOpenChange={handleOpenChange}
+          portalContainerRef={portalContainerRef}
+          {...rest}
+        >
+          {children}
+        </BottomSheetBase>
+      </DialogTrigger>
+    );
+  }
+
+  return (
+    <BottomSheetBase
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      portalContainerRef={portalContainerRef}
+      {...rest}
+    >
+      {children}
+    </BottomSheetBase>
+  );
+};

package/src/components/overlays/Drawer/Drawer.tsx

@@ -0,0 +1,93 @@
+import { clsx } from "clsx";
+import type { ReactNode, RefObject } from "react";
+import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
+
+import { modalOverlay } from "#ui/components/overlays/Modal/modal.cva";
+
+export interface DrawerProps {
+  isOpen?: boolean;
+  portalContainerRef?: RefObject<HTMLElement>;
+  onOpenChange?: (isOpen: boolean) => void;
+  trigger?: ReactNode;
+  children: (close: () => void) => ReactNode;
+  isDismissable?: boolean;
+  overlayClassName?: string;
+  dialogClassName?: string;
+  className?: string;
+}
+
+export const Drawer = ({
+  isOpen,
+  portalContainerRef,
+  onOpenChange,
+  trigger,
+  children,
+  isDismissable,
+  overlayClassName,
+  dialogClassName,
+  className,
+}: DrawerProps) => {
+  if (trigger) {
+    return (
+      <DialogTrigger
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      >
+        {trigger}
+        <DrawerOverlay
+          portalContainerRef={portalContainerRef}
+          isDismissable={isDismissable}
+          overlayClassName={overlayClassName}
+          dialogClassName={dialogClassName}
+          className={className}
+        >
+          {children}
+        </DrawerOverlay>
+      </DialogTrigger>
+    );
+  }
+
+  return (
+    <DrawerOverlay
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      portalContainerRef={portalContainerRef}
+      isDismissable={isDismissable}
+      className={className}
+    >
+      {children}
+    </DrawerOverlay>
+  );
+};
+
+interface DrawerOverlayProps extends Omit<DrawerProps, "trigger"> {}
+
+const DrawerOverlay = ({
+  isOpen,
+  onOpenChange,
+  portalContainerRef,
+  children,
+  isDismissable,
+  overlayClassName,
+  dialogClassName,
+  className,
+}: DrawerOverlayProps) => {
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      UNSTABLE_portalContainer={portalContainerRef?.current}
+      className={clsx(modalOverlay(), overlayClassName)}
+      isDismissable={isDismissable}
+    >
+      <Modal
+        className={clsx(
+          "fixed inset-y-0 right-0 z-10 w-fit entering:animate-drawer-enter-right exiting:animate-drawer-exit-right bg-elevation-fill-default-1",
+          className,
+        )}
+      >
+        <Dialog className={clsx("outline-none", dialogClassName)}>{({ close }) => children(close)}</Dialog>
+      </Modal>
+    </ModalOverlay>
+  );
+};

package/src/components/overlays/Modal/Modal.tsx

@@ -0,0 +1,63 @@
+import { clsx } from "clsx";
+import type { PropsWithChildren, RefObject } from "react";
+import { Dialog as AriaDialog, Modal as AriaModal, ModalOverlay as AriaModalOverlay } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+
+import { CloseIcon } from "#ui/assets/icons/Close";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import { type ModalVariantProps, modalContent, modalMain, modalOverlay } from "#ui/components/overlays/Modal/modal.cva";
+import { ns } from "#ui/config/i18n";
+
+export interface ModalProps extends ModalVariantProps {
+  isOpen: boolean;
+  portalContainerRef?: RefObject<HTMLElement>;
+  onClose: () => void;
+  modalClassName?: string;
+  showCloseIcon?: boolean;
+  isDismissable?: boolean;
+}
+
+export const Modal = ({
+  isOpen,
+  portalContainerRef,
+  onClose,
+  aside,
+  children,
+  modalClassName,
+  showCloseIcon,
+  isDismissable = true,
+}: PropsWithChildren<ModalProps>) => {
+  const { t } = useTranslation(ns);
+
+  return (
+    <AriaModalOverlay
+      UNSTABLE_portalContainer={portalContainerRef?.current}
+      className={modalOverlay({ aside })}
+      isDismissable={isDismissable}
+      isOpen={isOpen}
+      shouldCloseOnInteractOutside={() => {
+        return !portalContainerRef?.current;
+      }}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+    >
+      <AriaModal className={clsx(modalMain({ aside }))}>
+        <AriaDialog className={modalContent({ aside, className: modalClassName })}>
+          {showCloseIcon && (
+            <InlineIconButton
+              color="secondary"
+              onPress={onClose}
+              icon={CloseIcon}
+              className="absolute top-0 right-0 p-2"
+              label={t(($) => $.ui.modal.closeBtn)}
+            />
+          )}
+          {children}
+        </AriaDialog>
+      </AriaModal>
+    </AriaModalOverlay>
+  );
+};

package/src/components/overlays/Modal/modal.cva.ts

@@ -0,0 +1,55 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface ModalVariantProps extends VariantProps<typeof modalContent> {}
+
+export const modalContent = cva(
+  [
+    "relative flex flex-col items-center gap-modal-gap-content px-modal-side-mobile py-modal-height-mobile md:px-modal-side-desktop md:py-modal-height-desktop",
+    "w-fit max-w-full [&>*]:max-w-full",
+    "border-elevation-outline-default-1 bg-elevation-fill-default-1 outline-none",
+    "pointer-events-auto",
+  ],
+  {
+    variants: {
+      aside: {
+        left: "h-screen rounded-none border-r",
+        right: "h-screen rounded-none border-l",
+        center: "rounded-modal-rounding-default border",
+      },
+    },
+    defaultVariants: {
+      aside: "center",
+    },
+  },
+);
+
+export const modalOverlay = cva(
+  ["fixed inset-0 z-10 flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-elevation-fill-default-3/80"],
+  {
+    variants: {
+      aside: {
+        left: "p-0",
+        right: "p-0",
+        center: "p-4",
+      },
+    },
+    defaultVariants: {
+      aside: "center",
+    },
+  },
+);
+
+export const modalMain = cva(["pointer-events-none my-auto flex w-full"], {
+  variants: {
+    aside: {
+      left: "entering:animate-drawer-enter-left exiting:animate-drawer-exit-left justify-start",
+      right: "entering:animate-drawer-enter-right exiting:animate-drawer-exit-right justify-end",
+      center: "justify-center",
+    },
+  },
+  defaultVariants: {
+    aside: "center",
+  },
+});

package/src/components/overlays/ResponsivePopover/ResponsivePopover.tsx

@@ -0,0 +1,77 @@
+import { clsx } from "clsx";
+import type { ReactElement, ReactNode } from "react";
+import { Dialog, DialogTrigger, Popover } from "react-aria-components";
+
+import { FormFieldHeader } from "#ui/components/inputs/FormField/FormFieldHeader";
+import { FormFieldHeaderClose } from "#ui/components/inputs/FormField/FormFieldHeaderClose";
+import { BottomSheet } from "#ui/components/overlays/BottomSheet/BottomSheet";
+import { useBreakpoint } from "#ui/hooks/useBreakpoint";
+
+export interface ResponsivePopoverProps {
+  trigger: ReactElement;
+  children: ReactNode;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  popoverClassName?: string;
+  sheetLabel: string;
+}
+
+export const ResponsivePopover = ({
+  trigger,
+  isOpen,
+  onOpenChange,
+  children,
+  popoverClassName,
+  sheetLabel,
+}: ResponsivePopoverProps) => {
+  const isDesktop = useBreakpoint("md");
+
+  if (!isDesktop) {
+    return (
+      <BottomSheet
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        trigger={trigger}
+        height="auto"
+        isDismissable
+      >
+        {(close) => (
+          <>
+            <FormFieldHeader
+              label={sheetLabel}
+              rightContent={<FormFieldHeaderClose onClose={close} />}
+              className="px-4 pt-3"
+            />
+            <div className="p-4">{children}</div>
+          </>
+        )}
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <DialogTrigger
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+    >
+      {trigger}
+
+      <Popover
+        className={clsx("my-4 outline-none", popoverClassName)}
+        offset={0}
+        placement="bottom start"
+      >
+        <Dialog className="outline-none">
+          <div
+            className={clsx(
+              "overflow-hidden p-2 shadow-5 outline-none",
+              "rounded-s border border-elevation-outline-default-1 bg-elevation-fill-default-1",
+            )}
+          >
+            {children}
+          </div>
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  );
+};

package/src/components/overlays/Tooltip/Tooltip.tsx

@@ -0,0 +1,47 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import {
+  OverlayArrow as AriaOverlayArrow,
+  Tooltip as AriaTooltip,
+  type TooltipProps as AriaTooltipProps,
+  TooltipTrigger as AriaTooltipTrigger,
+} from "react-aria-components";
+
+import { PointerHorizontalIcon } from "#ui/assets/icons/PointerHorizontal";
+import { PointerVerticalIcon } from "#ui/assets/icons/PointerVertical";
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+export interface TooltipProps extends PropsWithChildren<AriaTooltipProps> {
+  text: ReactNode;
+  isDisabled?: boolean;
+  delay?: number;
+  closeDelay?: number;
+}
+
+export const Tooltip = ({ children, text, isDisabled, delay, closeDelay, ...tooltipProps }: TooltipProps) => {
+  return (
+    <AriaTooltipTrigger
+      delay={delay ?? 0}
+      closeDelay={closeDelay ?? 0}
+      isDisabled={isDisabled}
+    >
+      {children}
+      <AriaTooltip
+        className="group max-w-64 rounded-tooltip-rounding-default bg-interactive-contained-secondary-idle px-tooltip-side-default py-tooltip-height-default shadow-2"
+        {...tooltipProps}
+        offset={13}
+      >
+        <AriaOverlayArrow>
+          <PointerHorizontalIcon className="h-2-5 w-5 text-interactive-contained-secondary-idle group-placement-left:hidden group-placement-right:hidden group-placement-top:rotate-180" />
+          <PointerVerticalIcon className="h-5 w-2-5 text-interactive-contained-secondary-idle group-placement-bottom:hidden group-placement-top:hidden group-placement-left:rotate-180" />
+        </AriaOverlayArrow>
+        <Typography
+          size="body-4"
+          variant="prominent-1"
+          className="text-text-inverted-3"
+        >
+          {text}
+        </Typography>
+      </AriaTooltip>
+    </AriaTooltipTrigger>
+  );
+};

package/src/components/overlays/Tooltip/TooltipEllipsis.tsx

@@ -0,0 +1,35 @@
+import { type JSX, type Ref, useState } from "react";
+
+import { Tooltip } from "./Tooltip";
+
+export interface TooltipEllipsisProps {
+  text: string;
+  children: (ref: Ref<HTMLHeadingElement> | undefined) => JSX.Element;
+  isDisabled?: boolean;
+}
+
+export const TooltipEllipsis = ({ text, children, isDisabled }: TooltipEllipsisProps) => {
+  const [isEllipsisActive, setIsEllipsisActive] = useState(false);
+
+  const onContentRef = (ref: HTMLElement | null) => {
+    if (ref) {
+      setIsEllipsisActive(ref.offsetWidth < ref.scrollWidth);
+    }
+  };
+
+  const content = children(onContentRef);
+
+  if (isEllipsisActive && !isDisabled) {
+    return (
+      <Tooltip
+        text={text}
+        placement="bottom"
+        isDisabled={isDisabled}
+      >
+        {content}
+      </Tooltip>
+    );
+  }
+
+  return content;
+};