@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/src/components/MobileDataGrid/index.tsx

@@ -1,92 +0,0 @@
-import { ComponentProps } from "react";
-import { MobileDataGridHeader } from "./MobileDataGridHeader";
-import { ColumnDef } from "@tanstack/react-table";
-import { GridContextProvider } from "./GridContextProvider";
-import { RowDetailModalProvider } from "./RowDetailModalProvider";
-import { GridContextType } from "./GridContextProvider/GridContext";
-import { ColumnList } from "./ColumnList";
-import { Stack } from "../Stack";
-import { RowActions, RowData } from "./types";
-
-export type MobileDataGridProps<T> = {
-  columns: ColumnDef<T>[];
-  data: T[];
-  header?: string | ((ctx: GridContextType<T>) => React.ReactNode);
-  getId: (data: T) => string | number | undefined;
-  renderLink?: (data: T) => React.ReactNode;
-  primaryKey: keyof T;
-  id?: string;
-  testid?: string;
-  enableColumnSelector?: boolean;
-  enableRowSelection?: boolean;
-  onRowSelect?: (row: T, selectedIds: (string | number)[]) => void;
-  withBorder?: boolean;
-  footer?: (ctx: GridContextType<T>) => React.ReactNode;
-  numberOfColumnsToShow?: number;
-  renderChevron?: boolean;
-  hideHeader?: boolean;
-  rowActions?: RowActions<T>;
-  rounded?: boolean;
-};
-
-export function MobileDataGrid<T extends RowData>(
-  props: MobileDataGridProps<T> & ComponentProps<"div">,
-) {
-  const {
-    columns,
-    data,
-    renderLink,
-    renderChevron,
-    getId,
-    id,
-    testid,
-    enableColumnSelector,
-    enableRowSelection,
-    header,
-    withBorder = true,
-    footer,
-    onRowSelect,
-    numberOfColumnsToShow,
-    primaryKey,
-    hideHeader,
-    rowActions,
-    rounded,
-  } = props;
-
-  return (
-    <GridContextProvider<T>
-      initialColumns={columns}
-      id={id}
-      testid={testid}
-      data={data}
-      getId={getId}
-      onRowSelect={onRowSelect}
-      numberOfColumnsToShow={numberOfColumnsToShow}
-      primaryKey={primaryKey}
-    >
-      <Stack
-        height="full"
-        rounded={rounded}
-        overflowX="hidden"
-        overflowY="hidden"
-      >
-        {!hideHeader && (
-          <MobileDataGridHeader<T>
-            header={header}
-            enableColumnSelector={enableColumnSelector}
-            enableRowSelection={enableRowSelection}
-          />
-        )}
-        <ColumnList<T>
-          withBorder={withBorder}
-          renderLink={renderLink}
-          renderChevron={renderChevron}
-          enableRowSelection={enableRowSelection}
-          footer={footer}
-          rowActions={rowActions}
-        />
-      </Stack>
-      <RowDetailModalProvider />
-    </GridContextProvider>
-  );
-}

package/src/components/MobileDataGrid/types.ts

@@ -1,4 +0,0 @@
-import { ReactNode } from "react";
-
-export type RowActions<T> = (rowData: T) => ReactNode;
-export type RowData = Record<string, unknown>;

package/src/components/Modal.tsx

@@ -1,312 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import { PropsWithChildren, useCallback, useEffect, useRef } from "react";
-import { ModalHeader } from "./ModalHeader";
-import { ModalContent } from "./ModalContent";
-import { ModalButtons } from "./ModalButtons";
-import { ModalScrim } from "./ModalScrim";
-import { createPortal } from "react-dom";
-import { findDocumentRoot } from "../utils";
-import { usePrevious } from "react-use";
-import { useMatchesMobile } from "../hooks";
-import { useMounted } from "./useMounted";
-
-type ModalProps = PropsWithChildren<{
-  id?: string;
-  testid?: string;
-  title?: string;
-  open?: boolean;
-  size?: "small" | "medium" | "large" | "x-large" | "screen";
-  className?: string;
-  onClose?: () => void;
-  onContinue?: () => void;
-  closeOnBackdropClick?: boolean;
-  showButtons?: boolean;
-  hideCloseIcon?: boolean;
-  headerIcon?: React.ReactNode;
-  headerIconAlign?: "left" | "center" | "right";
-  fixedHeightScrolling?: boolean;
-  customActions?: React.ReactNode;
-  headerClassname?: string;
-  backgroundColor?: string; // full twcss color with bg- prefix
-  noWrapper?: boolean;
-  customFooter?: boolean;
-  titleAs?: React.ComponentType<{ children: React.ReactNode }>;
-}>;
-
-const fadeInScale = (element: HTMLElement, duration = 300) =>
-  element.animate(
-    [
-      { opacity: 0, transform: "scale(0.95)" },
-      { opacity: 1, transform: "scale(1)" },
-    ],
-    {
-      duration,
-      easing: "cubic-bezier(0.4, 0, 0.2, 1)",
-      fill: "both",
-    },
-  );
-
-const fadeOutScale = (element: HTMLElement, duration = 200) =>
-  element.animate(
-    [
-      { opacity: 1, transform: "scale(1)" },
-      { opacity: 0, transform: "scale(0.95)" },
-    ],
-    {
-      duration,
-      easing: "ease-in-out",
-      fill: "both",
-    },
-  );
-
-const bgFadeIn = (element: HTMLElement, duration = 300) =>
-  element.animate([{ opacity: 0 }, { opacity: 1 }], {
-    duration,
-    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
-    fill: "both",
-  });
-
-const bgFadeOut = (element: HTMLElement, duration = 200) =>
-  element.animate([{ opacity: 1 }, { opacity: 0 }], {
-    duration,
-    easing: "ease-in-out",
-    fill: "both",
-  });
-
-const whenAllAnimationsFinish = (
-  animations: Animation[],
-  callback: () => void,
-) => {
-  let finishedCount = 0;
-
-  animations.forEach((animation) => {
-    animation.onfinish = () => {
-      finishedCount += 1;
-      if (finishedCount === animations.length) {
-        callback();
-      }
-    };
-  });
-};
-
-const sizes = {
-  small: {
-    sizeClass: "max-h-screen desktop:max-w-120 rounded-sm",
-  },
-  medium: {
-    sizeClass:
-      "desktop:max-w-180 w-screen desktop:h-fit h-screen desktop:w-full max-w-240",
-  },
-  large: {
-    sizeClass:
-      "desktop:max-w-240 w-screen desktop:h-fit h-screen desktop:w-full max-w-240",
-  },
-  "x-large": {
-    sizeClass:
-      "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240",
-  },
-  screen: {
-    sizeClass: "w-screen h-screen max-w-screen !rounded-none",
-  },
-};
-
-export const Modal = ({
-  id,
-  testid,
-  title,
-  open = false,
-  size = "small",
-  className,
-  children,
-  onClose,
-  onContinue,
-  closeOnBackdropClick = true,
-  showButtons = false,
-  hideCloseIcon = false,
-  headerIcon,
-  headerIconAlign,
-  fixedHeightScrolling = false,
-  customActions,
-  headerClassname,
-  customFooter,
-  noWrapper,
-  titleAs: TitleComponent,
-}: ModalProps) => {
-  const mounted = useMounted();
-
-  const modalRef = useRef<HTMLDivElement>(null);
-  const bgRef = useRef<HTMLDivElement>(null);
-
-  const wasOpen = usePrevious(open);
-
-  const isMobile = useMatchesMobile();
-
-  const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
-
-  useEffect(() => {
-    if (!mounted) return;
-    if (!modalRef.current || !bgRef.current) {
-      console.error("Modal or background reference is not set.");
-      return;
-    }
-    if (wasOpen === undefined) return;
-    if (wasOpen && !open) {
-      const modalAnimation = fadeOutScale(modalRef.current);
-      const bgAnimation = bgFadeOut(bgRef.current);
-      whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
-        if (onClose) {
-          onClose();
-        }
-      });
-    } else if (!wasOpen && open) {
-      fadeInScale(modalRef.current);
-      bgFadeIn(bgRef.current);
-    }
-  }, [mounted, onClose, open, wasOpen]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        if (onClose) {
-          e.preventDefault();
-          onClose();
-        }
-      }
-    },
-    [onClose],
-  );
-
-  const handleClose = useCallback(() => {
-    if (onClose) {
-      onClose();
-    }
-  }, [onClose]);
-
-  useEffect(() => {
-    if (open) {
-      document.addEventListener("keyup", handleKeyDown);
-    }
-
-    return () => {
-      document.removeEventListener("keyup", handleKeyDown);
-    };
-  }, [open, handleKeyDown]);
-
-  // Effect to lock scroll when modal is open
-  useEffect(() => {
-    if (!open) return;
-
-    const scrollY = window.scrollY;
-    const body = document.body;
-
-    // Lock scroll
-    body.style.position = "fixed";
-    body.style.top = `-${scrollY}px`;
-    body.style.left = "0";
-    body.style.right = "0";
-    body.style.overflow = "hidden";
-    body.style.width = "100%";
-
-    return () => {
-      // Restore scroll
-      body.style.position = "";
-      body.style.top = "";
-      body.style.left = "";
-      body.style.right = "";
-      body.style.overflow = "";
-      body.style.width = "";
-
-      window.scrollTo(0, scrollY);
-    };
-  }, [open]);
-
-  const { sizeClass } = sizes[size] ?? sizes.small;
-
-  const backgroundClickHandler = useCallback(
-    (e: React.MouseEvent<HTMLElement>) => {
-      const target = e.target as HTMLElement;
-      const currentTarget = e.currentTarget as HTMLElement;
-      if (currentTarget.contains(target) && currentTarget !== target) {
-        e.stopPropagation();
-        return;
-      }
-
-      if (open && closeOnBackdropClick) {
-        handleClose();
-      }
-    },
-    [open, closeOnBackdropClick, handleClose],
-  );
-
-  if (!mounted) {
-    return null;
-  }
-
-  return createPortal(
-    <ModalScrim
-      id={id ? `${id}-scrim` : undefined}
-      testid={testid ? `${testid}-scrim` : undefined}
-      size={size}
-      ref={bgRef}
-      show={open}
-      onClick={backgroundClickHandler}
-    >
-      <div
-        id={id}
-        data-testid={testid}
-        ref={modalRef}
-        className={clsx(
-          "shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
-          computedFixedHeightScrolling &&
-            size !== "screen" &&
-            "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
-          className,
-          !className?.includes("bg-") && "bg-white",
-          sizeClass,
-        )}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <ModalHeader
-          id={id ? `${id}-header` : undefined}
-          testid={testid ? `${testid}-header` : undefined}
-          title={title}
-          onClose={handleClose}
-          hideCloseIcon={hideCloseIcon}
-          headerIcon={headerIcon}
-          headerIconAlign={headerIconAlign}
-          headerClassname={headerClassname}
-          titleAs={TitleComponent}
-        />
-        {children && (size !== "screen" || noWrapper) ? (
-          <ModalContent
-            id={id ? `${id}-content` : undefined}
-            testid={testid ? `${testid}-content` : undefined}
-            fixedHeightScrolling={computedFixedHeightScrolling}
-          >
-            {children}
-          </ModalContent>
-        ) : (
-          children
-        )}
-        {showButtons ? (
-          customFooter ? (
-            customActions
-          ) : (
-            <ModalButtons
-              id={id ? `${id}-buttons` : undefined}
-              testid={testid ? `${testid}-buttons` : undefined}
-              onClose={handleClose}
-              onContinue={onContinue}
-              customActions={customActions}
-            />
-          )
-        ) : null}
-      </div>
-    </ModalScrim>,
-    findDocumentRoot(bgRef.current),
-  );
-};
-
-Modal.displayName = "Modal";

package/src/components/ModalButtons.tsx

@@ -1,62 +0,0 @@
-import clsx from "clsx";
-import { Button } from "./Button";
-import { Icon } from "./Icon";
-import { layoutGroupGap, layoutPaddding } from "../classNames";
-
-type ModalButtonsProps = {
-  title?: string;
-  onClose?: () => void;
-  onContinue?: () => void;
-  sampleWidth?: boolean;
-  customActions?: React.ReactNode;
-  id?: string;
-  testid?: string;
-};
-
-export const ModalButtons = ({
-  onClose,
-  onContinue,
-  customActions,
-  id,
-  testid,
-}: ModalButtonsProps) => {
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        "border-t border-neutral-300 flex justify-end",
-        layoutPaddding,
-        layoutGroupGap,
-      )}
-    >
-      {customActions ?? (
-        <>
-          <Button
-            id={id ? `${id}-close-button` : undefined}
-            testid={testid ? `${testid}-close-button` : undefined}
-            variant="secondary"
-            leftIcon={<Icon name="close" size={24} />}
-            onClick={onClose}
-            className="max-sm:w-full"
-          >
-            Close
-          </Button>
-
-          <Button
-            id={id ? `${id}-continue-button` : undefined}
-            testid={testid ? `${testid}-continue-button` : undefined}
-            variant="primary"
-            leftIcon={<Icon name="check" size={24} />}
-            className="max-sm:w-full"
-            onClick={onContinue} // Assuming you want to close the modal on continue
-          >
-            Continue
-          </Button>
-        </>
-      )}
-    </div>
-  );
-};
-
-ModalButtons.displayName = "ModalButtons";

package/src/components/ModalContent.tsx

@@ -1,31 +0,0 @@
-import clsx from "clsx";
-import { layoutPaddding } from "../classNames";
-
-export interface ModalContentProps {
-  fixedHeightScrolling?: boolean;
-  id?: string;
-  testid?: string;
-}
-
-export function ModalContent({
-  fixedHeightScrolling,
-  children,
-  id,
-  testid
-}: React.PropsWithChildren<ModalContentProps>) {
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        "flex-grow desktop:flex-grow-0",
-        layoutPaddding,
-        fixedHeightScrolling && "overflow-auto",
-      )}
-    >
-      {children}
-    </div>
-  );
-}
-
-ModalContent.displayName = "ModalContent";

package/src/components/ModalHeader.tsx

@@ -1,78 +0,0 @@
-import { Heading2 } from "./Heading";
-
-import { Button } from "./Button";
-import { Icon } from "./Icon";
-import { layoutGroupGap, layoutPaddding } from "../classNames";
-import clsx from "clsx";
-
-type ModalHeaderProps = {
-  title?: string;
-  hideCloseIcon?: boolean;
-  headerIcon?: React.ReactNode;
-  headerIconAlign?: "left" | "center" | "right";
-  onClose?: () => void;
-  id?: string;
-  testid?: string;
-  headerClassname?: string;
-  titleAs?: React.ComponentType<{ children: React.ReactNode }>;
-};
-
-export const ModalHeader = ({
-  title,
-  hideCloseIcon,
-  headerIcon,
-  headerIconAlign,
-  onClose,
-  id,
-  testid,
-  headerClassname,
-  titleAs: TitleComponent,
-}: ModalHeaderProps) => {
-  const Title = TitleComponent || Heading2;
-
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        "flex justify-between items-center",
-        headerIconAlign === "center" && "justify-center",
-        headerIconAlign === "right" && "justify-end",
-        headerIconAlign === "left" && "justify-start",
-        layoutPaddding,
-        layoutGroupGap,
-        headerClassname,
-      )}
-    >
-      <div className={clsx("flex items-center flex-1", layoutGroupGap)}>
-        {headerIcon}
-        {title && (
-          <Title
-            id={id ? `${id}-title` : undefined}
-            testid={testid ? `${testid}-title` : undefined}
-            as="p"
-          >
-            {title}
-          </Title>
-        )}
-      </div>
-
-      {!hideCloseIcon && (
-        <Button
-          id={id ? `${id}-close-button` : undefined}
-          testid={testid ? `${testid}-close-button` : undefined}
-          iconOnly
-          variant="tertiary"
-          onClick={onClose}
-          leftIcon={
-            <span className="text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents">
-              <Icon name="close" size={24} />
-            </span>
-          }
-        />
-      )}
-    </div>
-  );
-};
-
-ModalHeader.displayName = "ModalHeader";

package/src/components/ModalScrim.tsx

@@ -1,42 +0,0 @@
-import clsx from "clsx";
-import { PropsWithChildren } from "react";
-
-type ModalScrimProps = PropsWithChildren<{
-  sampleWidth?: boolean;
-  show?: boolean;
-  size?: "small" | "medium" | "large" | "x-large" | "screen";
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-  ref?: React.Ref<HTMLDivElement>;
-  id?: string;
-  testid?: string;
-}>;
-
-export const ModalScrim = ({
-  show = false,
-  size = "small",
-  children,
-  onClick,
-  ref,
-  id,
-  testid,
-}: ModalScrimProps) => {
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center group bg-neutral-600/50 fixed opacity-0",
-        !show && " pointer-events-none",
-        size === "small" && "p-4",
-        size === "screen" ? "desktop:p-0" : "desktop:p-4",
-        "inset-0 z-50",
-      )}
-      onMouseDown={onClick}
-      ref={ref}
-    >
-      {children}
-    </div>
-  );
-};
-
-ModalScrim.displayName = "ModalScrim";