@dmsi/wedgekit-react 0.0.140 → 0.0.142

package/src/components/CalendarRange.tsx

@@ -26,6 +26,7 @@ export interface CalendarRangeProps {
    */
   disableRange?: boolean;
   id?: string;
+  testid?: string;
 }
 
 /**
@@ -55,6 +56,7 @@ interface DateCellProps {
   /** True if range selection is disabled in single mode */
   isRangeDisabled?: boolean;
   id?: string;
+  testid?: string;
 }
 
 function DateCell({
@@ -72,12 +74,14 @@ function DateCell({
   cellPadding = "",
   isRangeDisabled = false,
   id,
+  testid,
   ...props
 }: DateCellProps & { cellPadding?: string }) {
   return (
     <span
       {...props}
       id={id}
+      data-testid={testid}
       className={clsx(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
@@ -142,6 +146,7 @@ export function CalendarRange({
   cardStyle = false,
   disableRange = false,
   id,
+  testid,
 }: CalendarRangeProps) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   // Parse from/to props
@@ -275,6 +280,7 @@ export function CalendarRange({
   return (
     <div
       id={id}
+      data-testid={testid}
       className={clsx(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
@@ -313,6 +319,7 @@ export function CalendarRange({
                   {idx === 0 ? (
                     <button
                       id={id ? `${id}-prev-month-button` : undefined}
+                      data-testid={testid ? `${testid}-prev-month-button` : undefined}
                       type="button"
                       className={clsx(
                         "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -339,6 +346,7 @@ export function CalendarRange({
                   {(mode === "double" ? idx === 1 : true) ? (
                     <button
                       id={id ? `${id}-next-month-button` : undefined}
+                      data-testid={testid ? `${testid}-next-month-button` : undefined}
                       type="button"
                       className={clsx(
                         "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -419,6 +427,7 @@ export function CalendarRange({
                       <DateCell
                         key={i}
                         id={id ? `${id}-date-${date.toString()}` : undefined}
+                        testid={testid ? `${testid}-date-${date.toString()}` : undefined}
                         date={date}
                         isInMonth={!!isInMonth}
                         isToday={!!isToday}

package/src/components/Caption.tsx

@@ -12,6 +12,7 @@ type CaptionProps = {
   as?: Tags;
   style?: Style["style"];
   id?: string;
+  testid?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -24,14 +25,16 @@ export const Caption = ({
   color,
   align,
   id,
+  testid,
   ...props
 }: CaptionProps) => {
   const Element = as;
 
   return (
-    <div id={id} className="flex gap-1">
+    <div id={id} data-testid={testid} className="flex gap-1">
       <WhichIcon
         id={id}
+        testid={testid}
         style={style}
         size={16}
         className="mt-[3px] desktop:mt-0"
@@ -39,6 +42,7 @@ export const Caption = ({
 
       <Element
         id={id ? `${id}-text` : undefined}
+        data-testid={testid ? `${testid}-text` : undefined}
         className={clsx(
           typography.caption.replace("text-text-primary-normal", ""),
           (style === "default" || style === "info") &&
@@ -67,17 +71,20 @@ const WhichIcon = ({
   size,
   className,
   id,
+  testid,
 }: {
   style: Style["style"];
   size: IconSize;
   className?: string;
   id?: string;
+  testid?: string;
 }) => {
   if (style === "success") {
     return (
       <span className="text-icon-success-normal contents">
         <Icon
           id={id ? `${id}-icon` : undefined}
+          testid={testid ? `${testid}-icon` : undefined}
           className={className}
           name="check_circle"
           size={size}
@@ -91,6 +98,7 @@ const WhichIcon = ({
       <span className="text-icon-warning-normal contents">
         <Icon
           id={id ? `${id}-icon` : undefined}
+          testid={testid ? `${testid}-icon` : undefined}
           className={className}
           name="warning"
           size={size}
@@ -104,6 +112,7 @@ const WhichIcon = ({
       <span className="text-icon-critical-normal contents">
         <Icon
           id={id ? `${id}-icon` : undefined}
+          testid={testid ? `${testid}-icon` : undefined}
           className={className}
           name="info"
           size={size}
@@ -117,6 +126,7 @@ const WhichIcon = ({
       <span className="text-icon-primary-normal contents">
         <Icon
           id={id ? `${id}-icon` : undefined}
+          testid={testid ? `${testid}-icon` : undefined}
           className={className}
           name="info"
           size={size}

package/src/components/Card.tsx

@@ -1,11 +1,12 @@
 import clsx from "clsx";
 import { HTMLProps } from "react";
 
-export function Card(props: HTMLProps<HTMLDivElement> & { selected?: boolean; }) {
-  const { children, selected, ...rest } = props;
+export function Card(props: HTMLProps<HTMLDivElement> & { selected?: boolean; testid?: string; }) {
+  const { children, selected, testid, ...rest } = props;
   return (
     <div
       {...rest}
+      data-testid={testid}
       className={clsx(
         "rounded-sm p-desktop-layout-padding",
         selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",

package/src/components/Checkbox.tsx

@@ -15,6 +15,7 @@ interface CheckboxProps
   indeterminate?: boolean;
   paragraphClassName?: string;
   id?: string;
+  testid?: string;
 }
 
 export const Checkbox = ({
@@ -27,6 +28,7 @@ export const Checkbox = ({
   indeterminate,
   paragraphClassName,
   id,
+  testid,
   ...props
 }: CheckboxProps) => {
   const selected = indeterminate || checked;
@@ -81,6 +83,7 @@ export const Checkbox = ({
   return (
     <label
       id={id}
+      data-testid={testid}
       htmlFor={id ? `${id}-input` : undefined}
       className={clsx(
         "flex items-center",
@@ -92,6 +95,7 @@ export const Checkbox = ({
       <div className="relative">
         <input
           id={id ? `${id}-input` : undefined}
+          data-testid={testid ? `${testid}-input` : undefined}
           type="checkbox"
           className="sr-only peer"
           disabled={disabled}
@@ -174,6 +178,7 @@ export const Checkbox = ({
       {label && (
         <Paragraph
           id={id ? `${id}-label` : undefined}
+          testid={testid ? `${testid}-label` : undefined}
           as="span"
           padded
           className={clsx(

package/src/components/ContentTab.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import clsx from "clsx";
-import React, { ComponentPropsWithRef, useCallback, useState } from "react";
+import React, { ComponentPropsWithRef, useCallback } from "react";
 import { Button } from "./Button";
 
 export type ContentTabProps = {
@@ -11,6 +11,7 @@ export type ContentTabProps = {
   className?: string;
   fullWidth?: boolean;
   id?: string;
+  testid?: string;
 } & Omit<ComponentPropsWithRef<"button">, "id">;
 
 export const ContentTab = ({
@@ -22,10 +23,9 @@ export const ContentTab = ({
   ref,
   fullWidth,
   id,
+  testid,
   ...props
 }: ContentTabProps) => {
-  const [active, setActive] = useState(false);
-
   const handleClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
       if (!disabled) {
@@ -36,33 +36,34 @@ export const ContentTab = ({
   );
 
   const computedClassName = clsx(
-    "absolute left-0 right-0 bottom-0 transition-colors duration-200 ease-in-out hover:bg-border-action-hover z-10",
-    "rounded-px",
+    "absolute left-0 right-0 bottom-0 transition-colors duration-200 ease-in-out z-10",
+    "rounded-px ",
     "h-0.5",
-    active && "bg-text-action-primary-active",
-    !active && !disabled && "bg-text-action-primary-normal",
-    !active && disabled && "bg-text-action-primary-disabled",
+    !disabled && "bg-text-action-primary-normal peer-hover:bg-border-action-hover peer-active:bg-border-action-active",
+    disabled && "bg-text-action-primary-disabled",
 
     className,
   );
 
   return (
-    <div id={id} className={clsx(
+    <div id={id} data-testid={testid} className={clsx(
       "relative",
       fullWidth && "flex-1"
     )}>
       <Button
         id={id ? `${id}-button` : undefined}
+        testid={testid ? `${testid}-button` : undefined}
         block={fullWidth}
         ref={ref}
         variant="tertiary"
         disabled={disabled}
-        onMouseDown={() => setActive(true)}
-        onMouseLeave={() => setActive(false)}
-        onMouseUp={() => setActive(false)}
         onClick={handleClick}
         role="tab"
         aria-selected={selected}
+        className={clsx(
+          "peer",
+          !selected && "!text-text-secondary-normal hover:!text-text-action-primary-hover active:!text-text-action-primary-active"
+        )}
         {...props}
       >
         {label}
@@ -70,6 +71,7 @@ export const ContentTab = ({
       {selected && (
         <div
           id={id ? `${id}-indicator` : undefined}
+          data-testid={testid ? `${testid}-indicator` : undefined}
           className={computedClassName}
         >
           {" "}

package/src/components/ContentTabs.tsx

@@ -18,13 +18,14 @@ export type ContentTabsProps = {
   onTabChange?: (tabId: string) => void;
   fullWidthTabs?: boolean;
   id?: string;
+  testid?: string;
   selectedTab?: SelectedTab | null;
 };
 
 const afterClasses =
   "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
 
-export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, selectedTab }: ContentTabsProps) => {
+export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, testid, selectedTab }: ContentTabsProps) => {
   const [selectedTabId, setSelectedTabId] = useState<string>(tabs[0]?.id || "");
   const [focusedTabIndex, setFocusedTabIndex] = useState<number>(0);
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
@@ -65,10 +66,11 @@ export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, selectedTab
   const selectedContent = tabs.find((tab) => tab.id === selectedTabId)?.content;
 
   return (
-    <div id={id}>
+    <div id={id} data-testid={testid}>
       <div className="overflow-x-auto pb-2">
         <div
           id={id ? `${id}-tablist` : undefined}
+          data-testid={testid ? `${testid}-tablist` : undefined}
           role="tablist"
           aria-orientation="horizontal"
           className={clsx("flex relative", afterClasses)}
@@ -81,6 +83,7 @@ export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, selectedTab
                 fullWidth={fullWidthTabs}
                 key={tab.id}
                 id={id ? `${id}-tab-${tab.id}` : undefined}
+                testid={testid ? `${testid}-tab-${tab.id}` : undefined}
                 label={tab.label}
                 selected={isSelected}
                 onClick={() => handleTabClick(tab.id, index)}
@@ -106,6 +109,7 @@ export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, selectedTab
       {selectedContent && (
         <div
           id={(id ? `${id}-` : "") + `panel-${selectedTabId}`}
+          data-testid={(testid ? `${testid}-` : "") + `panel-${selectedTabId}`}
           className="mt-2"
           role="tabpanel"
           aria-labelledby={`tab-${selectedTabId}`}

package/src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx

@@ -4,10 +4,12 @@ import { Checkbox, MenuOption } from "../..";
 
 export function ColumnSelectorMenuOption<T>({
   id,
+  testid,
   column,
   toggleColumnVisibility,
 }: {
   id?: string;
+  testid?: string;
   column: Column<T, unknown>;
   toggleColumnVisibility: (id: string, isVisible: boolean) => void;
 }) {
@@ -17,9 +19,10 @@ export function ColumnSelectorMenuOption<T>({
       ? column.columnDef.header
       : null;
   return (
-    <MenuOption id={id} selected={isVisible} defaultChecked={isVisible}>
+    <MenuOption id={id} testid={testid} selected={isVisible} defaultChecked={isVisible}>
       <Checkbox
         id={id ? `${id}-checkbox` : undefined}
+        testid={testid ? `${testid}-checkbox` : undefined}
         label={label ?? "Unknown"}
         checked={isVisible}
         onChange={(e) => {

package/src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx

@@ -5,11 +5,13 @@ import { ColumnSelectorMenuOption } from "./ColumnSelectorMenuOption";
 
 export function ColumnSelectorHeaderCell<T>({
   id,
+  testid,
   table,
   toggleColumnVisibility,
   resetColumnVisibility,
 }: {
   id?: string;
+  testid?: string;
   table: Table<T>;
   toggleColumnVisibility: (id: string, isVisible: boolean) => void;
   resetColumnVisibility: () => void;
@@ -20,6 +22,7 @@ export function ColumnSelectorHeaderCell<T>({
   return (
     <DataGridCell
       id={id}
+      testid={testid}
       width="48"
       type="header"
       color="text-secondary-normal"
@@ -27,6 +30,7 @@ export function ColumnSelectorHeaderCell<T>({
     >
       <Button
         id={id ? `${id}-button` : undefined}
+        testid={testid ? `${testid}-button` : undefined}
         onClick={() => setShow((prev) => !prev)}
         variant="navigation"
         iconOnly
@@ -34,6 +38,7 @@ export function ColumnSelectorHeaderCell<T>({
       ></Button>
       <Menu
         id={id ? `${id}-menu` : undefined}
+        testid={testid ? `${testid}-menu` : undefined}
         positionTo={ref}
         position="bottom-right"
         show={show}
@@ -41,6 +46,7 @@ export function ColumnSelectorHeaderCell<T>({
       >
         <Button
           id={id ? `${id}-reset-button` : undefined}
+          testid={testid ? `${testid}-reset-button` : undefined}
           variant="tertiary"
           onClick={() => {
             resetColumnVisibility();
@@ -55,6 +61,7 @@ export function ColumnSelectorHeaderCell<T>({
           .map((column) => (
             <ColumnSelectorMenuOption
               id={id ? `${id}-option-${column.id}` : undefined}
+              testid={testid ? `${testid}-option-${column.id}` : undefined}
               key={column.id}
               column={column}
               toggleColumnVisibility={toggleColumnVisibility}

package/src/components/DataGrid/PinnedColumns.tsx

@@ -18,6 +18,7 @@ interface PinnedColumnsProps<TData extends RowData> {
   allSelectedAcrossPages?: boolean;
   someSelectedAcrossPages?: boolean;
   toggleSelectAllAcrossPages?: () => void;
+  testid?: string;
 }
 
 export function PinnedColumns<TData>({
@@ -27,6 +28,7 @@ export function PinnedColumns<TData>({
   allSelectedAcrossPages,
   someSelectedAcrossPages,
   toggleSelectAllAcrossPages,
+  testid,
   ...props
 }: PinnedColumnsProps<TData>) {
   const headerGroups =
@@ -34,6 +36,8 @@ export function PinnedColumns<TData>({
       ? table.getLeftHeaderGroups()
       : table.getRightHeaderGroups();
 
+  const pinnedTestId = testid ? `${pinDirection}-pinned-${testid}` : undefined;
+
   return (
     headerGroups[0]?.headers.length > 0 && (
       <table
@@ -41,11 +45,12 @@ export function PinnedColumns<TData>({
           "flex flex-col min-h-min sticky z-20",
           pinDirection === "left" ? "left-0" : "right-0",
         )}
+        data-testid={pinnedTestId}
       >
         <thead className="sticky top-0 z-20 grid">
           {headerGroups.map((headerGroup) => {
             return (
-              <tr key={headerGroup.id} className="flex w-full">
+              <tr key={headerGroup.id} data-testid={pinnedTestId ? `${pinnedTestId}-header-row-${headerGroup.id}` : undefined} className="flex w-full">
                 {headerGroup.headers.map((header) => {
                   if (!header) {
                     return;
@@ -59,6 +64,7 @@ export function PinnedColumns<TData>({
                       <DataCellHeader
                         locked
                         key={header.id}
+                        testid={pinnedTestId ? `${pinnedTestId}-header-${header.id}` : undefined}
                         header={header}
                         center={centerHeader}
                         width={customHeaderWidth}
@@ -134,6 +140,7 @@ export function PinnedColumns<TData>({
         </thead>
 
         <TableBody
+          testid={pinnedTestId}
           {...props}
           table={table}
           locked={true}

package/src/components/DataGrid/TableBody/LoadingCell.tsx

@@ -3,16 +3,18 @@ import { Checkbox, DataGridCell, Input } from "../..";
 
 export function LoadingCell<T extends RowData>({
   id,
+  testid,
   column,
 }: {
   id?: string;
+  testid?: string;
   column: ColumnDef<T>;
 }) {
   const key = `loading-${column.id}`;
   if (column.cell === "checkbox") {
     return (
-      <DataGridCell id={id ? `${id}-${key}` : undefined} key={key}>
-        <Checkbox id={id ? `${id}-${key}-checkbox` : undefined} disabled />
+      <DataGridCell id={id ? `${id}-${key}` : undefined} testid={testid ? `${testid}-${key}` : undefined} key={key}>
+        <Checkbox id={id ? `${id}-${key}-checkbox` : undefined} testid={testid ? `${testid}-${key}-checkbox` : undefined} disabled />
       </DataGridCell>
     );
   }
@@ -20,11 +22,13 @@ export function LoadingCell<T extends RowData>({
     return (
       <DataGridCell
         id={id ? `${id}-${key}` : undefined}
+        testid={testid ? `${testid}-${key}` : undefined}
         key={key}
         component="input"
       >
         <Input
           id={id ? `${id}-${key}-input` : undefined}
+          testid={testid ? `${testid}-${key}-input` : undefined}
           align="left"
           disabled
           wrapperClassName="!rounded-none !border-0"
@@ -33,7 +37,7 @@ export function LoadingCell<T extends RowData>({
     );
   }
   return (
-    <DataGridCell id={id ? `${id}-${key}` : undefined} key={key}>
+    <DataGridCell id={id ? `${id}-${key}` : undefined} testid={testid ? `${testid}-${key}` : undefined} key={key}>
       <div className="bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6"></div>
     </DataGridCell>
   );

package/src/components/DataGrid/TableBody/TableBodyRow.tsx

@@ -6,6 +6,7 @@ import { DataGridCell, DragAlongCell, Paragraph, Tooltip } from "../..";
 
 interface TableBodyRowProps<T> {
   id?: string;
+  testid?: string;
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   row: Row<T>;
   rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
@@ -20,6 +21,7 @@ interface TableBodyRowProps<T> {
 
 export function TableBodyRow<T>({
   id,
+  testid,
   columnVirtualizer,
   row,
   // rowVirtualizer,
@@ -64,6 +66,8 @@ export function TableBodyRow<T>({
           ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal"
           : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
       )}
+      id={id ? `${id}-row-${row.id}` : undefined}
+      data-testid={testid ? `${testid}-row-${row.id}` : undefined}
       style={{
         display: "flex",
         position: "absolute",
@@ -95,7 +99,8 @@ export function TableBodyRow<T>({
         ) : (
           <CellElement
             key={cell.id}
-            id={id ? `${id}-cell-${cell.id}` : undefined}
+            id={id ? `${id}-row-${row.id}-cell-${cell.id}` : undefined}
+            testid={testid ? `${testid}-row-${row.id}-cell-${cell.id}` : undefined}
             cell={cell}
             className={clsx({
               "justify-end": typeof cellValue === "number",
@@ -104,6 +109,7 @@ export function TableBodyRow<T>({
           >
             <Tooltip
               id={id ? `${id}-tooltip-${cell.id}` : undefined}
+              testid={testid ? `${testid}-tooltip-${cell.id}` : undefined}
               showOnTruncation
               message={cellValue as string}
               position="bottom"

package/src/components/DataGrid/TableBody/index.tsx

@@ -8,6 +8,7 @@ import { LoadingCell } from "./LoadingCell";
 
 interface TableBodyProps<TData extends RowData> {
   id?: string;
+  testid?: string;
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   table: Table<TData>;
   tableContainerRef: React.RefObject<HTMLDivElement | null>;
@@ -23,6 +24,7 @@ interface TableBodyProps<TData extends RowData> {
 }
 export function TableBody<T>({
   id,
+  testid,
   columnVirtualizer,
   table,
   tableContainerRef,
@@ -81,11 +83,13 @@ export function TableBody<T>({
             zIndex: 10,
           }}
           className="even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal"
+          data-testid={testid ? `${testid}-filter-row` : undefined}
         >
           {headerGroups.flatMap((x) =>
             x.headers.map((header) => (
               <CellElement
                 id={id ? `${id}-filter-cell-${header.id}` : undefined}
+                testid={testid ? `${testid}-filter-cell-${header.id}` : undefined}
                 noPadding
                 key={header.id}
                 cell={header}
@@ -101,6 +105,7 @@ export function TableBody<T>({
                   }) ?? (
                     <Search
                       id={id ? `${id}-filter-search-${header.id}` : undefined}
+                      testid={testid ? `${testid}-filter-search-${header.id}` : undefined}
                       removeRoundness
                       onChange={(e) =>
                         header.column.setFilterValue(e.target.value)
@@ -122,6 +127,7 @@ export function TableBody<T>({
         return (
           <TableBodyRow
             id={id}
+            testid={testid}
             columnVirtualizer={columnVirtualizer}
             key={row.id}
             row={row}
@@ -150,7 +156,7 @@ export function TableBody<T>({
           className="odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
         >
           {table.getAllLeafColumns().map((column) => (
-            <LoadingCell id={id} key={column.id} column={column.columnDef} />
+            <LoadingCell id={id} testid={testid} key={column.id} column={column.columnDef} />
           ))}
         </tr>
       )}