@dmsi/wedgekit-react 0.0.140 → 0.0.142

package/src/components/DataGrid/index.tsx

@@ -57,6 +57,7 @@ const NO_RESULTS_HEIGHT = "h-[120px]";
 
 export function DataGrid<T extends Record<string, unknown>>({
   id,
+  testid,
   data,
   columns,
   status,
@@ -329,6 +330,7 @@ export function DataGrid<T extends Record<string, unknown>>({
       >
         <div
           id={id}
+          data-testid={testid}
           className="flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal"
         >
           <div
@@ -339,6 +341,7 @@ export function DataGrid<T extends Record<string, unknown>>({
             ref={containerRef}
           >
             <PinnedColumns
+              testid={testid}
               pinDirection="left"
               table={table}
               tableContainerRef={containerRef}
@@ -352,7 +355,7 @@ export function DataGrid<T extends Record<string, unknown>>({
             <table className="flex-1 flex flex-col min-h-min">
               <thead className="sticky top-0 z-10 grid">
                 {table.getCenterHeaderGroups().map((headerGroup) => (
-                  <tr key={headerGroup.id} className="flex w-full">
+                  <tr data-testid={testid ? `${testid}-header-row-${headerGroup.id}` : undefined} key={headerGroup.id} className="flex w-full">
                     {virtualPaddingLeft ? (
                       // fake empty column to the left for virtualization scroll padding
                       <th
@@ -378,6 +381,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                           <DraggableCellHeader
                             key={header.id}
                             id={id ? `${id}-header-${header.id}` : undefined}
+                            testid={testid ? `${testid}-header-${header.id}` : undefined}
                             header={header}
                             locked={header.column.columnDef.meta?.locked}
                             center={centerHeader}
@@ -442,6 +446,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                           {header.column.columnDef.meta?.checkbox ? (
                             <DataGridCell
                               id={id ? `${id}-header-${header.id}` : undefined}
+                              testid={testid ? `${testid}-header-${header.id}` : undefined}
                               type="header"
                               component="checkbox" locked
                             >
@@ -449,6 +454,9 @@ export function DataGrid<T extends Record<string, unknown>>({
                                 id={
                                   id ? `${id}-select-all-checkbox` : undefined
                                 }
+                                testid={
+                                  testid ? `${testid}-select-all-checkbox` : undefined
+                                }
                                 checked={allSelectedAcrossPages}
                                 indeterminate={someSelectedAcrossPages}
                                 onChange={toggleSelectAllAcrossPages}
@@ -473,6 +481,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                     {enableColumnSelector && (
                       <ColumnSelectorHeaderCell
                         id={id ? `${id}-column-selector` : undefined}
+                        testid={testid ? `${testid}-column-selector` : undefined}
                         table={table}
                         toggleColumnVisibility={toggleColumnVisibility}
                         resetColumnVisibility={resetColumnVisibility}
@@ -484,6 +493,7 @@ export function DataGrid<T extends Record<string, unknown>>({
 
               <TableBody
                 id={id}
+                testid={testid}
                 columnVirtualizer={columnVirtualizer}
                 table={table}
                 tableContainerRef={containerRef}
@@ -498,6 +508,7 @@ export function DataGrid<T extends Record<string, unknown>>({
             </table>
 
             <PinnedColumns
+              testid={testid}
               pinDirection="right"
               table={table}
               tableContainerRef={containerRef}
@@ -517,6 +528,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                 componentGap,
                 componentPadding,
               )}
+              data-testid={testid ? `${testid}-no-results` : undefined}
             >
               <Subheader color="text-secondary-normal">No Results</Subheader>
               <Paragraph color="text-secondary-normal">
@@ -532,6 +544,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                   <div className="flex items-center gap-1 w-min">
                     <Select
                       id={id ? `${id}-pagesize-select` : undefined}
+                      testid={testid ? `${testid}-pagesize-select` : undefined}
                       wrapperClassName="!w-20"
                       value={pagination.pageSize.toString()}
                       onChange={(e) =>
@@ -541,6 +554,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                         <Menu
                           {...props}
                           id={id ? `${id}-pagesize-menu` : undefined}
+                          testid={testid ? `${testid}-pagesize-menu` : undefined}
                         >
                           {PAGE_SIZE_OPTIONS.map((option) => (
                             <MenuOption
@@ -567,6 +581,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                   <div className="flex items-center gap-2">
                     <Button
                       id={id ? `${id}-prev-page-button` : undefined}
+                      testid={testid ? `${testid}-prev-page-button` : undefined}
                       iconOnly
                       leftIcon={<Icon name="chevron_left" />}
                       onClick={() =>
@@ -585,6 +600,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                     </Paragraph>
                     <Button
                       id={id ? `${id}-next-page-button` : undefined}
+                      testid={testid ? `${testid}-next-page-button` : undefined}
                       iconOnly
                       leftIcon={<Icon name="chevron_right" />}
                       onClick={() =>
@@ -600,7 +616,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                 </div>
               )}
 
-              {status && <Paragraph>{status}</Paragraph>}
+              {status && <Paragraph testid={testid ? `${testid}-status-text` : undefined}>{status}</Paragraph>}
             </div>
           )}
         </div>

package/src/components/DataGrid/types.ts

@@ -27,6 +27,7 @@ export interface DataGridPagination {
 
 export interface DataGridProps<T extends Record<string, unknown>> {
   id?: string;
+  testid?: string;
   data: T[];
   columns: ColumnDef<T>[];
   status?: string;

package/src/components/DataGridCell.tsx

@@ -33,6 +33,7 @@ type Tags = "td" | "th";
 
 type DataGridCellProps = PropsWithChildren<{
   id?: string;
+  testid?: string;
   type?: "default" | "header" | "summary";
   component?: "header" | "checkbox" | "icon" | "button" | "static" | "input";
   locked?: boolean;
@@ -62,6 +63,7 @@ export const DataGridCell = memo(
     warning,
     center,
     width,
+    testid,
     ...props
   }: AsProps<Tags> & DataGridCellProps) => {
     const Element = type === "header" ? "th" : "td";
@@ -167,6 +169,7 @@ export const DataGridCell = memo(
     return (
       <Element
         id={id}
+        data-testid={testid}
         className={clsx("flex h-10", !width && "flex-1")}
         style={{ width }}
         {...props}
@@ -210,6 +213,7 @@ export function DataCellHeader<T>({
   setNodeRef,
   node,
   id,
+  testid,
   useMenuDefaultMinWidth,
   ...props
 }: DataGridCellHeaderProps<T>) {
@@ -264,6 +268,7 @@ export function DataCellHeader<T>({
   return (
     <DataGridCell
       id={id}
+      testid={testid}
       ref={setNodeRef ? setNodeRef : ref}
       type="header"
       component="header"
@@ -277,6 +282,7 @@ export function DataCellHeader<T>({
       {header.column.getCanFilter() && (
         <Menu
           id={id ? `${id}-menu` : undefined}
+          testid={testid ? `${testid}-menu` : undefined}
           ref={menuRootRef}
           positionTo={node ? node : ref}
           show={showMenu}
@@ -286,10 +292,12 @@ export function DataCellHeader<T>({
         >
           <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) => {
@@ -300,6 +308,7 @@ export function DataCellHeader<T>({
                 <div className={clsx(paddingUsingComponentGap)}>
                   <Search
                     id={id ? `${id}-filter-search` : undefined}
+                    testid={testid ? `${testid}-filter-search` : undefined}
                     onChange={(event) => {
                       setFilter(event.target.value);
                     }}
@@ -314,6 +323,7 @@ export function DataCellHeader<T>({
 
                 <MenuOption
                   id={id ? `${id}-filter-contains` : undefined}
+                  testid={testid ? `${testid}-filter-contains` : undefined}
                   onClick={handleFilterFnChange}
                   before={menuOptionIcon("includesString")}
                 >
@@ -322,6 +332,7 @@ export function DataCellHeader<T>({
 
                 <MenuOption
                   id={id ? `${id}-filter-startswith` : undefined}
+                  testid={testid ? `${testid}-filter-startswith` : undefined}
                   onClick={handleFilterFnChange}
                   before={menuOptionIcon("startsWith")}
                 >
@@ -330,6 +341,7 @@ export function DataCellHeader<T>({
 
                 <MenuOption
                   id={id ? `${id}-filter-endswith` : undefined}
+                  testid={testid ? `${testid}-filter-endswith` : undefined}
                   onClick={handleFilterFnChange}
                   before={menuOptionIcon("endsWith")}
                 >

package/src/components/DateInput.tsx

@@ -14,6 +14,7 @@ import {
 
 type DateInputProps = Omit<InputBaseProps, "id"> & {
   id?: string;
+  testid?: string;
   /**
    * Value in the format "YYYY-MM-DD" or empty string.
    * When enableRangeInSingleMode is true, this should be in format "YYYY-MM-DD|YYYY-MM-DD"
@@ -42,6 +43,7 @@ type DateInputProps = Omit<InputBaseProps, "id"> & {
 
 export const DateInput = ({
   id,
+  testid,
   value,
   onChange,
   placeholder = "MM/DD/YYYY",
@@ -230,6 +232,7 @@ export const DateInput = ({
     <div className="relative">
       <InputBase
         id={id}
+        testid={testid}
         ref={(el) => {
           triggerRef.current = el;
         }}
@@ -262,6 +265,7 @@ export const DateInput = ({
           >
             <CalendarRange
               id={id ? `${id}-calendar` : undefined}
+              testid={testid ? `${testid}-calendar` : undefined}
               from={from}
               to={to || from}
               onChange={handleDateChange}

package/src/components/DateRangeInput.tsx

@@ -15,6 +15,7 @@ import {
 
 type DateRangeInputProps = Omit<InputBaseProps, "id"> & {
   id?: string;
+  testid?: string;
   /**
    * Value in the format "YYYY-MM-DD|YYYY-MM-DD" or empty string
    */
@@ -45,6 +46,7 @@ type DateRangeInputProps = Omit<InputBaseProps, "id"> & {
 
 export const DateRangeInput = ({
   id,
+  testid,
   value,
   onChange,
   placeholder = "MM/DD/YYYY - MM/DD/YYYY",
@@ -576,6 +578,7 @@ export const DateRangeInput = ({
     <div className="relative">
       <InputBase
         id={id}
+        testid={testid}
         ref={(el) => {
           triggerRef.current = el;
         }}
@@ -608,6 +611,7 @@ export const DateRangeInput = ({
           >
             <CalendarRange
               id={id ? `${id}-calendar` : undefined}
+              testid={testid ? `${testid}-calendar` : undefined}
               from={from}
               to={to}
               onChange={handleRangeChange}

package/src/components/Display.tsx

@@ -10,6 +10,7 @@ type DisplayProps = {
   as?: Tags;
   variant?: DisplayVariant;
   id?: string;
+  testid?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -22,6 +23,7 @@ export const Display = ({
   align,
   variant = "display1",
   id,
+  testid,
   ...props
 }: DisplayProps) => {
   const defaultElement = variant === "display1" ? "h1" : "h2";
@@ -30,6 +32,7 @@ export const Display = ({
   return (
     <Element
       id={id}
+      data-testid={testid}
       className={clsx(
         typography[variant],
         className,

package/src/components/FilterGroup.tsx

@@ -20,6 +20,7 @@ import { Icon } from "./Icon";
 
 type FilterGroupProps = {
   id?: string;
+  testid?: string;
   label: string;
   open?: boolean;
   showMore?: boolean;
@@ -41,6 +42,7 @@ type FilterGroupProps = {
 
 export const FilterGroup = ({
   id,
+  testid,
   label,
   type = "link",
   open = false,
@@ -73,6 +75,7 @@ export const FilterGroup = ({
   return (
     <div
       id={id}
+      data-testid={testid}
       {...props}
       className={clsx(
         "border-b border-border-primary-normal",
@@ -103,6 +106,7 @@ export const FilterGroup = ({
         ) : (
           <Link
             id={id ? `${id}-clear-all` : undefined}
+            testid={testid ? `${testid}-clear-all` : undefined}
             className={clsx("block", componentPaddingY)}
             onClick={handleClearAll}
           >
@@ -132,6 +136,7 @@ export const FilterGroup = ({
           {!isSummary && showSearchField && (
             <Search
               id={id ? `${id}-search` : undefined}
+              testid={testid ? `${testid}-search` : undefined}
               style={{ marginBottom: "2px" }}
               onChange={onSearchChange}
               value={searchValue}
@@ -144,6 +149,7 @@ export const FilterGroup = ({
           {showShowMoreLink && (
             <Link
               id={id ? `${id}-show-more` : undefined}
+              testid={testid ? `${testid}-show-more` : undefined}
               className={clsx("block", "!items-start", componentPaddingY)}
               onClick={handleOnShowMore}
             >
@@ -175,12 +181,14 @@ export const FilterGroup = ({
 
 type FilterGroupItemProps = {
   id?: string;
+  testid?: string;
   count?: number;
   type?: FilterGroupProps["type"];
 };
 
 export const FilterGroupItem = ({
   id,
+  testid,
   type = "link",
   children,
   onClick,
@@ -189,6 +197,7 @@ export const FilterGroupItem = ({
   return (
     <div
       id={id}
+      data-testid={testid}
       onClick={handleClick}
       {...props}
       className={clsx(
@@ -201,6 +210,7 @@ export const FilterGroupItem = ({
       <FilterGroupItemChildComponent
         {...props}
         id={id ? `${id}-child` : undefined}
+        data-testid={testid ? `${testid}-child` : undefined}
         type={type}
         count={props.count}
       >

package/src/components/FullViewportBox.tsx

@@ -1,13 +1,16 @@
 export function FullViewportLayout({
   children,
   id,
+  testid,
 }: {
   children: React.ReactNode;
   id?: string;
+  testid?: string;
 }) {
   return (
     <div
       id={id}
+      data-testid={testid}
       className="flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal"
     >
       {children}

package/src/components/Grid.tsx

@@ -9,6 +9,7 @@ type GridProps = {
   hasSideMenu?: boolean;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
   id?: string;
+  testid?: string;
 } & Omit<ComponentProps<"div">, "className">;
 
 // Grid class configuration maps for better maintainability
@@ -89,11 +90,13 @@ export const Grid = ({
   hasSideMenu = false,
   columns,
   id,
+  testid,
 }: GridProps) => {
   const childCount = Children.count(children);
   return (
     <div
       id={id}
+      data-testid={testid}
       className={clsx(
         padding &&
           sizing === "container" &&

package/src/components/Heading.tsx

@@ -10,6 +10,7 @@ type HeadingProps = {
   as?: Tags;
   variant?: HeadingVariant;
   id?: string;
+  testid?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -22,6 +23,7 @@ export const Heading = ({
   align,
   variant = "heading1",
   id,
+  testid,
   ...props
 }: HeadingProps) => {
   const defaultElement =
@@ -31,6 +33,7 @@ export const Heading = ({
   return (
     <Element
       id={id}
+      data-testid={testid}
       className={clsx(
         typography[variant],
         className,

package/src/components/HorizontalDivider.tsx

@@ -1,9 +1,9 @@
 import clsx from "clsx";
 
-export function HorizontalDivider({ id, hideOnMobile }: { id?: string, hideOnMobile?: boolean }) {
+export function HorizontalDivider({ id, testid, hideOnMobile }: { id?: string, testid?: string, hideOnMobile?: boolean }) {
   const hideOnMobileStyle = clsx(hideOnMobile && "hidden desktop:block")
 
   return (
-    <hr id={id} className={clsx("w-full border-t border-border-primary-normal", hideOnMobileStyle)} />
+    <hr id={id} data-testid={testid} className={clsx("w-full border-t border-border-primary-normal", hideOnMobileStyle)} />
   );
 }

package/src/components/Icon.tsx

@@ -6,12 +6,14 @@ type IconProps = {
   name: string;
   size?: IconSize;
   variant?: "outline" | "filled";
+  testid?: string;
 } & Omit<ComponentProps<"span">, "name">;
 
 export function Icon({
   name,
   size = 24,
   variant = "outline",
+  testid,
   ...props
 }: IconProps) {
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
@@ -19,6 +21,7 @@ export function Icon({
   return (
     <span
       {...props}
+      data-testid={testid}
       className={clsx(
         "icon",
         `icon-${size}`,

package/src/components/Input.tsx

@@ -42,6 +42,7 @@ export type InputFormatting = {
 
 export type InputBaseProps = {
   id?: string;
+  testid?: string;
   after?: ReactNode;
   before?: ReactNode;
   label?: string;
@@ -61,6 +62,7 @@ export type InputBaseProps = {
 
 export const InputBase = ({
   id,
+  testid,
   before,
   after,
   type,
@@ -132,6 +134,7 @@ export const InputBase = ({
   return (
     <label
       id={id}
+      data-testid={testid}
       htmlFor={inputId}
       ref={inputContainerRef}
       className={clsx(
@@ -188,6 +191,7 @@ export const InputBase = ({
           {...props}
           {...attributes}
           id={inputId}
+          data-testid={testid ? `${testid}-input` : undefined}
           className={clsx(
             "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
             "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -204,7 +208,7 @@ export const InputBase = ({
         {after}
       </div>
 
-      {caption && <div id={id ? `${id}-caption` : undefined}>{caption}</div>}
+      {caption && <div id={id ? `${id}-caption` : undefined} data-testid={testid ? `${testid}-caption` : undefined}>{caption}</div>}
     </label>
   );
 };
@@ -219,42 +223,38 @@ export const Input = ({
   onBlur,
   onClear,
   id,
+  testid,
   ...props
-}: Omit<ComponentProps<"input">, "value" | "onChange" | "align" | "children"> &
+}: Omit<ComponentProps<"input">,"onChange" | "align" | "children"> &
   InputBaseProps & {
-    value?: string | number;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     onClear?: () => void;
   }) => {
   const [internalValue, setInternalValue] = useState("");
   const [displayValue, setDisplayValue] = useState("");
 
-  // Initialize values based on variant
   useEffect(() => {
     const stringValue = propValue?.toString() ?? "";
+    setInternalValue(stringValue);
+    setDisplayValue(stringValue);
+  }, [propValue]);
 
-    if (variant === "currency") {
-      if (
-        propValue === undefined ||
-        propValue === "" ||
-        (typeof propValue === "number" && isNaN(propValue))
-      ) {
-        setInternalValue("");
-        setDisplayValue("");
-      } else {
-        const numValue =
-          typeof propValue === "string" ? parseFloat(propValue) : propValue;
-        if (!isNaN(numValue)) {
-          const formatted = numValue.toFixed(decimals ?? 2);
-          setInternalValue(formatted);
-          setDisplayValue(formatCurrencyDisplay(formatted));
-        }
-      }
-    } else {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
+  useEffect(() => {
+    if (variant !== 'currency') {
+      return;
+    }
+
+    const stringValue = propValue?.toString() ?? "";
+
+    if (!stringValue) {
+      return;
     }
-  }, [propValue, decimals, variant]);
+
+    const formatted = formatDecimalValue(stringValue, decimals ?? 2);
+
+    setInternalValue(formatted);
+    setDisplayValue(formatCurrencyDisplay(formatted));
+  }, [])
 
   const getInputProps = () => {
     const baseProps = {
@@ -329,6 +329,7 @@ export const Input = ({
         return hasValue && !props.readOnly ? (
           <Icon
             id={id ? `${id}-clear-button` : undefined}
+            testid={testid ? `${testid}-clear-button` : undefined}
             name="close"
             onClick={handleSearchReset}
             className="cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
@@ -378,15 +379,6 @@ export const Input = ({
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const rawValue = e.target.value;
 
-    if (variant === "search") {
-      setInternalValue(rawValue);
-      setDisplayValue(rawValue);
-      if (typeof onChange === "function") {
-        onChange(e);
-      }
-      return;
-    }
-
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, ""); // Remove commas for processing
 
@@ -433,6 +425,10 @@ export const Input = ({
   };
 
   const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (!internalValue) {
+      return;
+    }
+
     if (variant === "currency") {
       const formatted = formatDecimalValue(internalValue, decimals ?? 2);
       setInternalValue(formatted);
@@ -463,6 +459,7 @@ export const Input = ({
       after={getAfterElement()}
       onChange={handleChange}
       onBlur={handleBlur}
+      testid={testid}
     />
   );
 };
@@ -486,10 +483,9 @@ export const UOM = (
 export const Currency = (
   props: Omit<
     ComponentProps<"input">,
-    "value" | "onChange" | "align" | "children" | "id"
+    "onChange" | "align" | "children" | "id"
   > &
     InputBaseProps & {
-      value?: number;
       onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     },
 ) => {

package/src/components/InputGroup.tsx

@@ -7,6 +7,7 @@ import { componentGap, layoutGap } from "../classNames";
 
 type InputGroupProps = {
   id?: string;
+  testid?: string;
   label: string;
   orientation?: "vertical" | "horizontal";
   error?: boolean;
@@ -15,6 +16,7 @@ type InputGroupProps = {
 
 export const InputGroup = ({
   id,
+  testid,
   label,
   orientation = "horizontal",
   error = false,
@@ -24,11 +26,13 @@ export const InputGroup = ({
 }: ComponentProps<"div"> & InputGroupProps) => {
   const internalId = useId();
   const labelId = id ? `${id}-label` : undefined;
+  const labelTestId = testid ? `${testid}-label` : undefined;
 
   return (
-    <div id={id} {...props} className={clsx("flex flex-col", componentGap)}>
+    <div id={id} data-testid={testid} {...props} className={clsx("flex flex-col", componentGap)}>
       <Label
         id={labelId}
+        testid={labelTestId}
         as="label"
         className={clsx({ "!text-text-primary-error": error })}
         htmlFor={internalId}
@@ -47,7 +51,7 @@ export const InputGroup = ({
         {children}
       </div>
 
-      {caption && <div id={id ? `${id}-caption` : undefined}>{caption}</div>}
+      {caption && <div id={id ? `${id}-caption` : undefined} data-testid={testid ? `${testid}-caption` : undefined}>{caption}</div>}
     </div>
   );
 };