@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/components/DataGrid/types.ts

@@ -1,98 +0,0 @@
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-} from "@tanstack/react-table";
-
-import { ReactNode } from "react";
-
-// TanStack Table
-import {
-  FilterFn,
-  Header,
-  PartialKeys,
-  RowData,
-  Table,
-  TableOptionsResolved,
-} from "@tanstack/react-table";
-
-// Types
-export interface DataGridPagination {
-  pageIndex: number;
-  pageSize: number;
-  total: number;
-  onPageChange: (pageIndex: number) => void;
-  onPageSizeChange?: (pageSize: number) => void;
-}
-
-export interface DataGridProps<T extends Record<string, unknown>> {
-  id?: string;
-  rowIdAccessor?: keyof T;
-  testid?: string;
-  data: T[];
-  columns: ColumnDef<T>[];
-  status?: string;
-  locked?: boolean;
-  isLoadingMore?: boolean;
-  onLoadMore?: () => void;
-  hasMore?: boolean;
-  pagination?: DataGridPagination;
-  showFilterRow?: boolean;
-  sorting?: SortingState;
-  onSortingChange?: (state: SortingState) => void;
-  columnFilters?: ColumnFiltersState;
-  onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
-  rowSelection?: Record<string, boolean>;
-  onRowSelectionChange?: (selection: Record<string, boolean>) => void;
-  filteredSortedData?: T[];
-  totalRowCount: number;
-  hideStatusBar?: boolean;
-  centerHeader?: boolean;
-  enableColumnSelector?: boolean;
-  predeterminedLeftPins?: string[];
-  predeterminedRightPins?: string[];
-  useMenuDefaultMinWidth?: boolean;
-  rowDisabled?: boolean;
-  rowDisabledAccessor?: (row: T) => boolean;
-  ref?: React.Ref<{ getSavedLayout: () => ColumnDef<T>[] | undefined }>;
-}
-
-declare module "@tanstack/react-table" {
-  interface TableOptions<TData extends RowData>
-    extends PartialKeys<
-      TableOptionsResolved<TData>,
-      "state" | "onStateChange" | "renderFallbackValue"
-    > {
-    filterFns?: FilterFns;
-  }
-  interface FilterFns {
-    endsWith?: FilterFn<RowData>;
-    startsWith?: FilterFn<RowData>;
-  }
-
-  interface ColumnMeta<TData extends RowData, TValue> {
-    filterVariant?: "text" | "select" | "range";
-    className?: string;
-    sticky?: boolean;
-    useCustomRenderer?: boolean;
-    locked?: boolean;
-    checkbox?: boolean;
-    headerWidth?: string;
-    visible?: boolean;
-    inVisibilityMenu?: boolean;
-    filterRowCell?: ({
-      header,
-      table,
-    }: {
-      header: Header<TData, TValue>;
-      table: Table<TData>;
-    }) => ReactNode;
-    align?: "left" | "right" | string;
-    format?: string;
-    mobileCell?: (props: {
-      column: ColumnDef<TData>;
-      cellValue: unknown;
-      row: RowData;
-    }) => React.ReactNode;
-  }
-}

package/src/components/DataGrid/utils.tsx

@@ -1,15 +0,0 @@
-import clsx from "clsx";
-import { Icon } from "..";
-import { SortDirection } from "@tanstack/react-table";
-
-export function getSortIcon(sort: SortDirection | false, nextSort = false) {
-  const iconClassName = clsx(
-    "text-icon-on-action-primary-normal",
-    nextSort && "hidden group-hover:block",
-  );
-  if (sort === "asc")
-    return <Icon size={16} className={iconClassName} name="arrow_upward" />;
-  if (sort === "desc")
-    return <Icon size={16} className={iconClassName} name="arrow_downward" />;
-  return null;
-}

package/src/components/DataGridCell.tsx

@@ -1,526 +0,0 @@
-"use client";
-
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import {
-  // BuiltInFilterFn,
-  Cell,
-  // FilterFn,
-  FilterFnOption,
-  Header,
-  RowData,
-} from "@tanstack/react-table";
-import clsx from "clsx";
-import {
-  ComponentProps,
-  CSSProperties,
-  PropsWithChildren,
-  RefObject,
-  useEffect,
-  useRef,
-  useState,
-  memo,
-} from "react";
-import { componentPadding, paddingUsingComponentGap } from "../classNames";
-import { MenuOption } from "./MenuOption";
-import { Menu } from "./Menu";
-import { Icon } from "./Icon";
-import { Search } from "./Search";
-import { useSubMenuSystem } from "./useMenuSystem";
-import type { AsProps } from "../types";
-
-type Tags = "td" | "th";
-
-type DataGridCellProps = PropsWithChildren<{
-  id?: string;
-  testid?: string;
-  type?: "default" | "header" | "summary";
-  component?: "header" | "checkbox" | "icon" | "button" | "static" | "input";
-  locked?: boolean;
-  noPadding?: boolean;
-  paddedLeft?: boolean;
-  onRightClick?: () => void;
-  error?: boolean;
-  warning?: boolean;
-  center?: boolean;
-  width?: string;
-  minWidth?: string;
-  disabled?: boolean;
-}>;
-
-export const DataGridCell = memo(
-  ({
-    id,
-    type = "default",
-    component = "static",
-    children,
-    className,
-    locked = false,
-    noPadding = false,
-    paddedLeft = false,
-    style,
-    onClick,
-    onRightClick,
-    error,
-    warning,
-    center,
-    width,
-    minWidth,
-    disabled,
-    testid,
-    ...props
-  }: AsProps<Tags> & DataGridCellProps) => {
-    const Element = type === "header" ? "th" : "td";
-    const timerRef = useRef<number | null>(null);
-    const [isGrabbing, setIsGrabbing] = useState(false);
-    const [isPointerPressed, setIsPointerPressed] = useState(false);
-
-    useEffect(() => {
-      return () => {
-        if (timerRef.current) {
-          clearTimeout(timerRef.current);
-          timerRef.current = null;
-        }
-      };
-    }, []);
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const handlePointerDown = (_event: React.MouseEvent | React.TouchEvent) => {
-      setIsPointerPressed(true);
-
-      timerRef.current = window.setTimeout(() => {
-        setIsGrabbing(true);
-      }, 500);
-    };
-
-    const handlePointerUp = (event: React.MouseEvent | React.TouchEvent) => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-
-      const rightClick =
-        event.nativeEvent instanceof MouseEvent &&
-        event.nativeEvent.button === 2;
-
-      if (!isGrabbing && onClick && !rightClick && isPointerPressed) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onClick(event as any);
-      }
-
-      if (rightClick && onRightClick) {
-        onRightClick();
-      }
-
-      setIsGrabbing(false);
-      setIsPointerPressed(false);
-    };
-
-    const handlePointerLeave = () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-
-    const headerBgStyles =
-      type === "header" &&
-      !locked &&
-      !["button"].includes(component) &&
-      "bg-brand-400 border-brand-200";
-    const lockedHeaderBgStyles =
-      locked &&
-      !["button"].includes(component) &&
-      "bg-neutral-400 border-neutral-300";
-
-    const headerTypeStyles =
-      type === "header" &&
-      component !== "button" &&
-      component !== "icon" &&
-      clsx("border-r");
-
-    const buttonComponentStyles =
-      component === "button" &&
-      clsx("border-r border-b border-border-primary-normal");
-
-    const iconComponentStyles = component === "icon" && clsx("border-l");
-
-    const cellClasses = clsx(
-      headerTypeStyles,
-      buttonComponentStyles,
-      headerBgStyles,
-      lockedHeaderBgStyles,
-      iconComponentStyles,
-      className,
-      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
-      "focus-within:!z-10",
-      "overflow-x-hidden",
-      "overflow-y-hidden",
-      component === "input" && "border",
-      component === "input" &&
-        !error &&
-        !warning &&
-        "border-border-primary-normal",
-      component === "input" && error && "border-border-primary-error",
-      component === "input" && warning && "border-background-warning-normal",
-      !["button", "icon"].includes(component) && !noPadding && componentPadding,
-      paddedLeft && "pl-2",
-      component === "icon" && "border-l",
-      isGrabbing && "!cursor-grabbing",
-      component === "checkbox" || (center && "justify-center"),
-      disabled && "!text-text-primary-disabled",
-    );
-
-    return (
-      <Element
-        id={id}
-        data-testid={testid}
-        className={clsx("flex h-10", !width && "flex-1")}
-        style={{ width, minWidth }}
-        {...props}
-        data-theme={type === "header" && !locked ? "brand" : undefined}
-      >
-        <div
-          className={cellClasses}
-          style={{
-            ...style,
-          }}
-          onMouseDown={handlePointerDown}
-          onMouseUp={handlePointerUp}
-          onMouseLeave={handlePointerLeave}
-          onTouchStart={handlePointerDown}
-          onTouchEnd={handlePointerUp}
-          onTouchCancel={handlePointerLeave}
-          onContextMenu={(e) => e.preventDefault()}
-        >
-          {children}
-        </div>
-      </Element>
-    );
-  },
-);
-
-DataGridCell.displayName = "DataGridCell";
-
-export type DataGridCellHeaderProps<T> = {
-  header: Header<T, unknown>;
-  children: React.ReactNode;
-  width?: string;
-  setNodeRef?: (node: HTMLElement | null) => void;
-  node?: RefObject<HTMLElement | null>;
-  useMenuDefaultMinWidth?: boolean;
-} & DataGridCellProps &
-  ComponentProps<"th">;
-
-export function DataCellHeader<T>({
-  header,
-  children,
-  setNodeRef,
-  node,
-  id,
-  testid,
-  useMenuDefaultMinWidth,
-  ...props
-}: DataGridCellHeaderProps<T>) {
-  const [showMenu, setShowMenu] = useState(false);
-  const [filter, setFilter] = useState(
-    (header.column.getFilterValue() as string) ?? "",
-  );
-  const ref = useRef<HTMLElement>(null);
-  const predeterminedPinned = useRef(false);
-
-  const { column, getContext } = header;
-  const { id: columnId, setFilterValue } = column;
-
-  const {
-    menuRootRef,
-    isMenuActive,
-    registerSubMenu,
-    listeners: subMenuListeners,
-    mobileHide,
-  } = useSubMenuSystem(node ? node : ref);
-
-  useEffect(() => {
-    const columnPinning =
-      getContext().table.options.initialState?.columnPinning;
-    const left = columnPinning?.left ?? [];
-    const right = columnPinning?.right ?? [];
-
-    predeterminedPinned.current = [...left, ...right].includes(columnId);
-  }, [columnId, getContext]);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setFilterValue(filter);
-    }, 500);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [filter, setFilterValue]);
-
-  const style: CSSProperties = {
-    position: "relative",
-    whiteSpace: "nowrap",
-    minWidth: header.column.getSize(),
-    "--color-text-primary-normal": "var(--color-text-brand-primary-normal)",
-    "--color-icon-on-action-primary-normal":
-      "var(--color-text-brand-primary-normal)",
-    "--background-action-secondary-normal":
-      "var(--color-text-brand-primary-normal)",
-    ...props.style,
-  };
-
-  return (
-    <DataGridCell
-      id={id}
-      testid={testid}
-      ref={setNodeRef ? setNodeRef : ref}
-      type="header"
-      component="header"
-      style={style}
-      minWidth={`${header.column.getSize()}px`}
-      onClick={header.column.getToggleSortingHandler()}
-      onRightClick={() => setShowMenu(!showMenu)}
-      {...props}
-    >
-      {children}
-
-      {header.column.getCanFilter() && (
-        <Menu
-          id={id ? `${id}-menu` : undefined}
-          testid={testid ? `${testid}-menu` : undefined}
-          ref={menuRootRef}
-          positionTo={node ? node : ref}
-          show={showMenu}
-          setShow={setShowMenu}
-          mobileHide={mobileHide}
-          useDefaultMinWidth={useMenuDefaultMinWidth}
-        >
-          <MenuOption
-            id={id ? `${id}-filter-option` : undefined}
-            testid={testid ? `${testid}-filter-option` : undefined}
-            {...subMenuListeners}
-            subMenu={({ menuId, subMenuLevel, ...props }) => (
-              <Menu
-                id={id ? `${id}-filter-submenu` : undefined}
-                testid={testid ? `${testid}-filter-submenu` : undefined}
-                {...props}
-                show={isMenuActive(menuId, subMenuLevel)}
-                ref={(el) => {
-                  registerSubMenu(menuId, el);
-                }}
-                useDefaultMinWidth={useMenuDefaultMinWidth}
-              >
-                <div className={clsx(paddingUsingComponentGap)}>
-                  <Search
-                    id={id ? `${id}-filter-search` : undefined}
-                    testid={testid ? `${testid}-filter-search` : undefined}
-                    onChange={(event) => {
-                      setFilter(event.target.value);
-                    }}
-                    onKeyDown={(event) => {
-                      if ([" ", "Space"].includes(event.key)) {
-                        event.stopPropagation();
-                      }
-                    }}
-                    value={(filter ?? "") as string}
-                  />
-                </div>
-
-                <MenuOption
-                  id={id ? `${id}-filter-contains` : undefined}
-                  testid={testid ? `${testid}-filter-contains` : undefined}
-                  onClick={handleFilterFnChange}
-                  before={menuOptionIcon("includesString")}
-                >
-                  Contains
-                </MenuOption>
-
-                <MenuOption
-                  id={id ? `${id}-filter-startswith` : undefined}
-                  testid={testid ? `${testid}-filter-startswith` : undefined}
-                  onClick={handleFilterFnChange}
-                  before={menuOptionIcon("startsWith")}
-                >
-                  Starts with
-                </MenuOption>
-
-                <MenuOption
-                  id={id ? `${id}-filter-endswith` : undefined}
-                  testid={testid ? `${testid}-filter-endswith` : undefined}
-                  onClick={handleFilterFnChange}
-                  before={menuOptionIcon("endsWith")}
-                >
-                  Ends with
-                </MenuOption>
-              </Menu>
-            )}
-          >
-            Filter
-          </MenuOption>
-
-          {!predeterminedPinned.current && header.column.getCanPin() && (
-            <MenuOption
-              onClick={() => {
-                setShowMenu(!showMenu);
-              }}
-              {...subMenuListeners}
-              subMenu={({ menuId, subMenuLevel, ...props }) => (
-                <Menu
-                  {...props}
-                  show={isMenuActive(menuId, subMenuLevel)}
-                  ref={(el) => {
-                    registerSubMenu(menuId, el);
-                  }}
-                >
-                  <MenuOption
-                    selected={header.column.getIsPinned() === "left"}
-                    onClick={() => {
-                      if (header.column.getIsPinned() === "left") {
-                        header.column.pin(false);
-                      } else {
-                        header.column.pin("left");
-                      }
-                    }}
-                    after={
-                      header.column.getIsPinned() === "left" && (
-                        <Icon name="check" />
-                      )
-                    }
-                  >
-                    Left
-                  </MenuOption>
-
-                  <MenuOption
-                    selected={header.column.getIsPinned() === "right"}
-                    onClick={() => {
-                      if (header.column.getIsPinned() === "right") {
-                        header.column.pin(false);
-                      } else {
-                        header.column.pin("right");
-                      }
-                    }}
-                    after={
-                      header.column.getIsPinned() === "right" && (
-                        <Icon name="check" />
-                      )
-                    }
-                  >
-                    Right
-                  </MenuOption>
-                </Menu>
-              )}
-            >
-              {`Freeze [${header.column.columnDef.header as string}]`}
-            </MenuOption>
-          )}
-        </Menu>
-      )}
-    </DataGridCell>
-  );
-
-  function menuOptionIcon(value: string) {
-    return (
-      <Icon
-        name="check"
-        className={clsx(
-          header.column.columnDef.filterFn !== value && "text-transparent",
-        )}
-      />
-    );
-  }
-
-  function handleFilterFnChange<TData>(_id: string, value: string | undefined) {
-    let filterFn: FilterFnOption<TData> = "includesString";
-    const currentFilterFn = header.column.columnDef.filterFn as string;
-
-    if (value?.toLowerCase() === "starts with") {
-      filterFn = currentFilterFn === "startsWith" ? "auto" : "startsWith";
-    }
-
-    if (value?.toLowerCase() === "ends with") {
-      filterFn = currentFilterFn === "endsWith" ? "auto" : "endsWith";
-    }
-
-    if (value?.toLowerCase() === "contains") {
-      filterFn =
-        currentFilterFn === "includesString" ? "auto" : "includesString";
-    }
-
-    header.column.columnDef.filterFn = filterFn;
-    header.column.setFilterValue(filter);
-  }
-}
-
-DataCellHeader.displayName = "DataCellHeader";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function DraggableCellHeader<T extends Record<string, any>>({
-  header,
-  children,
-  ...props
-}: DataGridCellHeaderProps<T>) {
-  const { attributes, isDragging, listeners, setNodeRef, transform, node } =
-    useSortable({
-      id: header.column.id,
-    });
-
-  const style: CSSProperties = {
-    opacity: isDragging ? 0.8 : 1,
-    position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    whiteSpace: "nowrap",
-    zIndex: isDragging ? 1 : 0,
-    "--color-text-primary-normal": "var(--color-action-000)",
-    "--color-icon-on-action-primary-normal": "var(--color-action-000)",
-    userSelect: "none",
-  };
-
-  return (
-    <DataCellHeader
-      header={header}
-      setNodeRef={setNodeRef}
-      node={node}
-      style={style}
-      {...props}
-      {...attributes}
-      {...listeners}
-    >
-      {children}
-    </DataCellHeader>
-  );
-}
-
-DraggableCellHeader.displayName = "DraggableCellHeader";
-
-export function DragAlongCell<T extends RowData, TValue>({
-  cell,
-  children,
-  ...props
-}: {
-  cell: Header<T, TValue> | Cell<T, TValue>;
-  children?: React.ReactNode;
-} & DataGridCellProps) {
-  const { isDragging, setNodeRef, transform } = useSortable({
-    id: cell.column.id,
-  });
-
-  const style: CSSProperties = {
-    opacity: isDragging ? 0.8 : 1,
-    position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    minWidth: cell.column.getSize(),
-    zIndex: isDragging ? 1 : 0,
-  };
-
-  return (
-    <DataGridCell style={style} ref={setNodeRef} {...props}>
-      {children}
-    </DataGridCell>
-  );
-}
-
-DragAlongCell.displayName = "DragAlongCell";