@dmsi/wedgekit-react 0.0.26 → 0.0.27

package/src/components/ContentTab.tsx

@@ -9,7 +9,8 @@ export type ContentTabProps = {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   selected?: boolean;
   className?: string;
-} & ComponentPropsWithRef<"button">;
+  id?: string;
+} & Omit<ComponentPropsWithRef<"button">, "id">;
 
 export const ContentTab = ({
   label,
@@ -18,6 +19,7 @@ export const ContentTab = ({
   disabled = false,
   onClick,
   ref,
+  id,
   ...props
 }: ContentTabProps) => {
   const [active, setActive] = useState(false);
@@ -43,8 +45,9 @@ export const ContentTab = ({
   );
 
   return (
-    <div className="relative">
+    <div id={id} className="relative">
       <Button
+        id={id ? `${id}-button` : undefined}
         ref={ref}
         variant="tertiary"
         disabled={disabled}
@@ -58,7 +61,14 @@ export const ContentTab = ({
       >
         {label}
       </Button>
-      {selected && <div className={computedClassName}> </div>}
+      {selected && (
+        <div
+          id={id ? `${id}-indicator` : undefined}
+          className={computedClassName}
+        >
+          {" "}
+        </div>
+      )}
     </div>
   );
 };

package/src/components/ContentTabs.tsx

@@ -12,12 +12,13 @@ type Tab = {
 export type ContentTabsProps = {
   tabs: Tab[];
   onTabChange?: (tabId: string) => void;
+  id?: string;
 };
 
 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 }: ContentTabsProps) => {
+export const ContentTabs = ({ tabs, onTabChange, id }: ContentTabsProps) => {
   const [selectedTab, setSelectedTab] = useState<string>(tabs[0]?.id || "");
   const [focusedTabIndex, setFocusedTabIndex] = useState<number>(0);
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
@@ -42,9 +43,9 @@ export const ContentTabs = ({ tabs, onTabChange }: ContentTabsProps) => {
     } else {
       return;
     }
-    const id = tabs[newIndex].id;
-    setSelectedTab(id);
-    onTabChange?.(id);
+    const tabId = tabs[newIndex].id;
+    setSelectedTab(tabId);
+    onTabChange?.(tabId);
     tabRefs.current[newIndex]?.focus();
     setFocusedTabIndex(newIndex);
   };
@@ -52,9 +53,10 @@ export const ContentTabs = ({ tabs, onTabChange }: ContentTabsProps) => {
   const selectedContent = tabs.find((tab) => tab.id === selectedTab)?.content;
 
   return (
-    <div>
+    <div id={id}>
       <div className="overflow-x-auto pb-2">
         <div
+          id={id ? `${id}-tablist` : undefined}
           role="tablist"
           aria-orientation="horizontal"
           className={clsx("flex relative", afterClasses)}
@@ -65,19 +67,20 @@ export const ContentTabs = ({ tabs, onTabChange }: ContentTabsProps) => {
             return (
               <ContentTab
                 key={tab.id}
-                id={`tab-${tab.id}`}
+                id={id ? `${id}-tab-${tab.id}` : undefined}
                 label={tab.label}
                 selected={isSelected}
                 onClick={() => handleTabClick(tab.id, index)}
                 onFocus={() => {
                   setSelectedTab(tab.id);
+
                   setFocusedTabIndex(index);
                   onTabChange?.(tab.id);
                 }}
                 className={clsx(!isSelected && afterClasses)}
                 role="tab"
                 aria-selected={isSelected}
-                aria-controls={`panel-${tab.id}`}
+                aria-controls={`${id}-panel-${tab.id}`}
                 tabIndex={isSelected ? 0 : -1}
                 ref={(el) => {
                   tabRefs.current[index] = el;
@@ -89,7 +92,7 @@ export const ContentTabs = ({ tabs, onTabChange }: ContentTabsProps) => {
       </div>
       {selectedContent && (
         <div
-          id={`panel-${selectedTab}`}
+          id={(id ? `${id}-` : "") + `panel-${selectedTab}`}
           className="mt-2"
           role="tabpanel"
           aria-labelledby={`tab-${selectedTab}`}

package/src/components/DMSiLogo.tsx

@@ -1,4 +1,4 @@
-export function DMSiLogo() {
+export function DMSiLogo(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       width="107"
@@ -6,6 +6,7 @@ export function DMSiLogo() {
       viewBox="0 0 107 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         d="M10.1472 5.86855H22.261C24.0328 5.86855 25.2192 5.79792 26.2514 7.25517C27.1489 8.60833 27.4185 9.79792 27.2105 11.4336C27.0025 13.0693 26.5596 14.2291 25.4926 15.6529C24.9996 16.3295 24.3795 16.8648 23.6284 17.2552C22.6077 17.7533 21.9529 17.6827 20.9206 17.6827H8.69893V17.6381L8.00562 23.2589H20.7704C24.2755 23.2589 27.6496 22.5228 30.4807 19.9949C33.0999 17.6827 34.6444 14.8128 35.0489 11.612C35.4918 8.12506 34.6406 5.72357 32.2948 3.3035C29.8875 0.775615 26.8793 0.362976 23.2278 0.362976H10.8328L10.1472 5.92803V5.86855Z"

package/src/components/DataGrid.tsx

@@ -97,6 +97,7 @@ export interface DataGridPagination {
 }
 
 export interface DataGridProps<T extends Record<string, unknown>> {
+  id?: string;
   data: T[];
   columns: ColumnDef<T>[];
   status?: string;
@@ -120,6 +121,7 @@ export interface DataGridProps<T extends Record<string, unknown>> {
 }
 
 export function DataGrid<T extends Record<string, unknown>>({
+  id,
   data,
   columns,
   status,
@@ -205,7 +207,7 @@ export function DataGrid<T extends Record<string, unknown>>({
       }
     : setLocalRowSelection;
 
-  const id = useId();
+  const dndId = useId();
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   const [columnVisibility, setColumnVisibility] = useState<
@@ -221,8 +223,8 @@ export function DataGrid<T extends Record<string, unknown>>({
   });
 
   const toggleColumnVisibility = useCallback(
-    (id: string, isVisible: boolean) => {
-      setColumnVisibility((prev) => ({ ...prev, [id]: isVisible }));
+    (columnId: string, isVisible: boolean) => {
+      setColumnVisibility((prev) => ({ ...prev, [columnId]: isVisible }));
     },
     [setColumnVisibility],
   );
@@ -276,9 +278,11 @@ export function DataGrid<T extends Record<string, unknown>>({
         String(i + 1),
       );
 
-  const allSelectedAcrossPages = allRowIds.every((id) => rowSelection[id]);
+  const allSelectedAcrossPages = allRowIds.every(
+    (rowId) => rowSelection[rowId],
+  );
   const someSelectedAcrossPages =
-    !allSelectedAcrossPages && allRowIds.some((id) => rowSelection[id]);
+    !allSelectedAcrossPages && allRowIds.some((rowId) => rowSelection[rowId]);
 
   const toggleSelectAllAcrossPages = () => {
     setRowSelection((prev) => {
@@ -286,14 +290,14 @@ export function DataGrid<T extends Record<string, unknown>>({
 
       if (isSelecting) {
         const newSelection: Record<string, boolean> = {};
-        for (const id of allRowIds) {
-          newSelection[id] = true;
+        for (const rowId of allRowIds) {
+          newSelection[rowId] = true;
         }
         return { ...prev, ...newSelection };
       } else {
         const updatedSelection: Record<string, boolean> = { ...prev };
-        for (const id of allRowIds) {
-          delete updatedSelection[id];
+        for (const rowId of allRowIds) {
+          delete updatedSelection[rowId];
         }
         return updatedSelection;
       }
@@ -351,7 +355,7 @@ export function DataGrid<T extends Record<string, unknown>>({
 
   return (
     <DndContext
-      id={id}
+      id={dndId}
       collisionDetection={closestCenter}
       modifiers={[restrictToHorizontalAxis]}
       onDragEnd={handleDragEnd}
@@ -361,7 +365,10 @@ export function DataGrid<T extends Record<string, unknown>>({
         items={columnOrder}
         strategy={horizontalListSortingStrategy}
       >
-        <div className="flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal">
+        <div
+          id={id}
+          className="flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal"
+        >
           <div
             className="overflow-auto scrollbar-thin relative contain-paint will-change-transform"
             ref={containerRef}
@@ -386,6 +393,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                         return (
                           <DraggableCellHeader
                             key={header.id}
+                            id={id ? `${id}-header-${header.id}` : undefined}
                             header={header}
                             locked={header.column.columnDef.meta?.locked}
                             center={centerHeader}
@@ -441,11 +449,15 @@ export function DataGrid<T extends Record<string, unknown>>({
                         <React.Fragment key={header.id}>
                           {header.column.columnDef.meta?.checkbox ? (
                             <DataGridCell
+                              id={id ? `${id}-header-${header.id}` : undefined}
                               type="header"
                               component="checkbox"
                               locked={header.column.columnDef.meta?.locked}
                             >
                               <Checkbox
+                                id={
+                                  id ? `${id}-select-all-checkbox` : undefined
+                                }
                                 checked={allSelectedAcrossPages}
                                 indeterminate={someSelectedAcrossPages}
                                 onChange={toggleSelectAllAcrossPages}
@@ -469,6 +481,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                     ) : null}
                     {enableColumnSelector && (
                       <ColumnSelectorHeaderCell
+                        id={id ? `${id}-column-selector` : undefined}
                         table={table}
                         toggleColumnVisibility={toggleColumnVisibility}
                         resetColumnVisibility={resetColumnVisibility}
@@ -479,6 +492,7 @@ export function DataGrid<T extends Record<string, unknown>>({
               </thead>
 
               <TableBody
+                id={id}
                 columnVirtualizer={columnVirtualizer}
                 table={table}
                 tableContainerRef={containerRef}
@@ -515,15 +529,24 @@ export function DataGrid<T extends Record<string, unknown>>({
                 <div className="flex justify-between items-center">
                   <div className="flex items-center gap-1 w-min">
                     <Select
+                      id={id ? `${id}-pagesize-select` : undefined}
                       wrapperClassName="!w-20"
                       value={pagination.pageSize.toString()}
                       onChange={(e) =>
                         pagination.onPageSizeChange?.(Number(e.target.value))
                       }
                       renderMenu={(props) => (
-                        <Menu {...props} onClick={() => props.setShow(false)}>
+                        <Menu
+                          {...props}
+                          id={id ? `${id}-pagesize-menu` : undefined}
+                        >
                           {PAGE_SIZE_OPTIONS.map((option) => (
                             <MenuOption
+                              id={
+                                id
+                                  ? `${id}-pagesize-option-${option}`
+                                  : undefined
+                              }
                               key={option}
                               selected={pagination.pageSize === option}
                               onClick={() =>
@@ -536,11 +559,12 @@ export function DataGrid<T extends Record<string, unknown>>({
                         </Menu>
                       )}
                     />
-                    <Label className="whitespace-nowrap">Per Page</Label>
+                    <Label>Per Page</Label>
                   </div>
 
                   <div className="flex items-center gap-2">
                     <Button
+                      id={id ? `${id}-prev-page-button` : undefined}
                       iconOnly
                       leftIcon={<Icon name="chevron_left" />}
                       onClick={() =>
@@ -558,6 +582,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                       of {pagination.total}
                     </Paragraph>
                     <Button
+                      id={id ? `${id}-next-page-button` : undefined}
                       iconOnly
                       leftIcon={<Icon name="chevron_right" />}
                       onClick={() =>
@@ -585,6 +610,7 @@ export function DataGrid<T extends Record<string, unknown>>({
 DataGrid.displayName = "DataGrid";
 
 interface TableBodyProps<TData extends RowData> {
+  id?: string;
   columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   table: Table<TData>;
   tableContainerRef: React.RefObject<HTMLDivElement | null>;
@@ -600,6 +626,7 @@ interface TableBodyProps<TData extends RowData> {
 // Helpers
 
 function TableBody<T>({
+  id,
   columnVirtualizer,
   table,
   tableContainerRef,
@@ -626,7 +653,11 @@ function TableBody<T>({
     <tbody
       style={{
         display: "grid",
-        height: `${showFilterRow ? rowVirtualizer.getTotalSize() + 40 : rowVirtualizer.getTotalSize()}px`, // tells scrollbar how big the table is
+        height: `${
+          showFilterRow
+            ? rowVirtualizer.getTotalSize() + 40
+            : rowVirtualizer.getTotalSize()
+        }px`, // tells scrollbar how big the table is
         position: "relative", // needed for absolute positioning of rows
       }}
     >
@@ -645,6 +676,7 @@ function TableBody<T>({
           {table.getHeaderGroups().flatMap((x) =>
             x.headers.map((header) => (
               <DragAlongCell
+                id={id ? `${id}-filter-cell-${header.id}` : undefined}
                 noPadding
                 key={header.id}
                 cell={header}
@@ -656,6 +688,7 @@ function TableBody<T>({
                     table,
                   }) ?? (
                     <Search
+                      id={id ? `${id}-filter-search-${header.id}` : undefined}
                       removeRoundness
                       onChange={(e) =>
                         header.column.setFilterValue(e.target.value)
@@ -676,6 +709,7 @@ function TableBody<T>({
 
         return (
           <TableBodyRow
+            id={id}
             columnVirtualizer={columnVirtualizer}
             key={row.id}
             row={row}
@@ -695,12 +729,14 @@ function TableBody<T>({
             display: "flex",
             position: "absolute",
             width: "100%",
-            transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`,
+            transform: `translateY(${
+              virtualRows[virtualRows.length - 1].start + 40
+            }px)`,
           }}
           className="odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
         >
           {table.getAllLeafColumns().map((column) => (
-            <LoadingCell key={column.id} column={column.columnDef} />
+            <LoadingCell id={id} key={column.id} column={column.columnDef} />
           ))}
         </tr>
       )}
@@ -709,6 +745,7 @@ function TableBody<T>({
 }
 
 interface TableBodyRowProps<T> {
+  id?: string;
   columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   row: Row<T>;
   rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
@@ -720,6 +757,7 @@ interface TableBodyRowProps<T> {
 }
 
 function TableBodyRow<T>({
+  id,
   columnVirtualizer,
   row,
   // rowVirtualizer,
@@ -752,7 +790,9 @@ function TableBodyRow<T>({
       style={{
         display: "flex",
         position: "absolute",
-        transform: `translateY(${showFilterRow ? virtualRow.start + 40 : virtualRow.start}px)`,
+        transform: `translateY(${
+          showFilterRow ? virtualRow.start + 40 : virtualRow.start
+        }px)`,
         width: "100%",
       }}
     >
@@ -768,8 +808,13 @@ function TableBodyRow<T>({
             {flexRender(cell.column.columnDef.cell, cell.getContext())}
           </React.Fragment>
         ) : (
-          <DragAlongCell key={cell.id} cell={cell}>
+          <DragAlongCell
+            key={cell.id}
+            id={id ? `${id}-cell-${cell.id}` : undefined}
+            cell={cell}
+          >
             <Tooltip
+              id={id ? `${id}-tooltip-${cell.id}` : undefined}
               showOnTruncation
               message={cell.getValue() as string}
               position="bottom"
@@ -793,22 +838,29 @@ function TableBodyRow<T>({
 }
 
 const LoadingCell = <T extends RowData>({
+  id,
   column,
 }: {
+  id?: string;
   column: ColumnDef<T>;
 }) => {
   const key = `loading-${column.id}`;
   if (column.cell === "checkbox") {
     return (
-      <DataGridCell key={key}>
-        <Checkbox disabled />
+      <DataGridCell id={id ? `${id}-${key}` : undefined} key={key}>
+        <Checkbox id={id ? `${id}-${key}-checkbox` : undefined} disabled />
       </DataGridCell>
     );
   }
   if (column.cell === "input") {
     return (
-      <DataGridCell key={key} component="input">
+      <DataGridCell
+        id={id ? `${id}-${key}` : undefined}
+        key={key}
+        component="input"
+      >
         <Input
+          id={id ? `${id}-${key}-input` : undefined}
           align="left"
           disabled
           wrapperClassName="!rounded-none !border-0"
@@ -817,17 +869,19 @@ const LoadingCell = <T extends RowData>({
     );
   }
   return (
-    <DataGridCell key={key}>
+    <DataGridCell id={id ? `${id}-${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>
   );
 };
 
 function ColumnSelectorHeaderCell<T>({
+  id,
   table,
   toggleColumnVisibility,
   resetColumnVisibility,
 }: {
+  id?: string;
   table: Table<T>;
   toggleColumnVisibility: (id: string, isVisible: boolean) => void;
   resetColumnVisibility: () => void;
@@ -837,24 +891,28 @@ function ColumnSelectorHeaderCell<T>({
 
   return (
     <DataGridCell
+      id={id}
       width="48"
       type="header"
       color="text-secondary-normal"
       ref={ref}
     >
       <Button
+        id={id ? `${id}-button` : undefined}
         onClick={() => setShow((prev) => !prev)}
         variant="navigation"
         iconOnly
         leftIcon={<Icon name="tune" />}
       ></Button>
       <Menu
+        id={id ? `${id}-menu` : undefined}
         positionTo={ref}
         position="bottom-right"
         show={show}
         setShow={setShow}
       >
         <Button
+          id={id ? `${id}-reset-button` : undefined}
           variant="tertiary"
           onClick={() => {
             resetColumnVisibility();
@@ -868,6 +926,7 @@ function ColumnSelectorHeaderCell<T>({
           .filter((x) => x.columnDef.meta?.inVisibilityMenu)
           .map((column) => (
             <ColumnSelectorMenuOption
+              id={id ? `${id}-option-${column.id}` : undefined}
               key={column.id}
               column={column}
               toggleColumnVisibility={toggleColumnVisibility}
@@ -879,9 +938,11 @@ function ColumnSelectorHeaderCell<T>({
 }
 
 function ColumnSelectorMenuOption<T>({
+  id,
   column,
   toggleColumnVisibility,
 }: {
+  id?: string;
   column: Column<T, unknown>;
   toggleColumnVisibility: (id: string, isVisible: boolean) => void;
 }) {
@@ -891,8 +952,9 @@ function ColumnSelectorMenuOption<T>({
       ? column.columnDef.header
       : null;
   return (
-    <MenuOption selected={isVisible} defaultChecked={isVisible}>
+    <MenuOption id={id} selected={isVisible} defaultChecked={isVisible}>
       <Checkbox
+        id={id ? `${id}-checkbox` : undefined}
         label={label ?? "Unknown"}
         checked={isVisible}
         onChange={(e) => {

package/src/components/DataGridCell.tsx

@@ -31,6 +31,7 @@ import { useSubMenuSystem } from "./useMenuSystem";
 type Tags = "td" | "th";
 
 type DataGridCellProps = PropsWithChildren<{
+  id?: string;
   type?: "default" | "header" | "summary";
   component?: "header" | "checkbox" | "icon" | "button" | "static" | "input";
   locked?: boolean;
@@ -45,6 +46,7 @@ type DataGridCellProps = PropsWithChildren<{
 
 export const DataGridCell = memo(
   ({
+    id,
     type = "default",
     component = "static",
     children,
@@ -161,6 +163,7 @@ export const DataGridCell = memo(
 
     return (
       <Element
+        id={id}
         className={clsx("flex", !width && "flex-1")}
         style={{ width }}
         {...props}
@@ -192,12 +195,14 @@ export function DraggableCellHeader<T extends Record<string, any>>({
   header,
   children,
   locked = false,
+  id,
   ...props
 }: {
   header: Header<T, unknown>;
   children: React.ReactNode;
   locked?: boolean;
   width?: string;
+  id?: string;
 } & DataGridCellProps &
   ComponentProps<"th">) {
   const { attributes, isDragging, listeners, setNodeRef, transform, node } =
@@ -209,13 +214,13 @@ export function DraggableCellHeader<T extends Record<string, any>>({
   const [filter, setFilter] = useState(
     (header.column.getFilterValue() as string) ?? "",
   );
-  
+
   const {
     menuRootRef,
     isMenuActive,
     registerSubMenu,
     listeners: subMenuListeners,
-    mobileHide
+    mobileHide,
   } = useSubMenuSystem(node);
 
   useEffect(() => {
@@ -241,6 +246,7 @@ export function DraggableCellHeader<T extends Record<string, any>>({
 
   return (
     <DataGridCell
+      id={id}
       locked={locked}
       type="header"
       component="header"
@@ -257,6 +263,7 @@ export function DraggableCellHeader<T extends Record<string, any>>({
 
       {header.column.getCanFilter() && (
         <Menu
+          id={id ? `${id}-menu` : undefined}
           ref={menuRootRef}
           positionTo={node}
           show={showMenu}
@@ -264,9 +271,11 @@ export function DraggableCellHeader<T extends Record<string, any>>({
           mobileHide={mobileHide}
         >
           <MenuOption
+            id={id ? `${id}-filter-option` : undefined}
             {...subMenuListeners}
             subMenu={({ menuId, subMenuLevel, ...props }) => (
               <Menu
+                id={id ? `${id}-filter-submenu` : undefined}
                 {...props}
                 show={isMenuActive(menuId, subMenuLevel)}
                 ref={(el) => {
@@ -275,6 +284,7 @@ export function DraggableCellHeader<T extends Record<string, any>>({
               >
                 <div className={clsx(paddingUsingComponentGap)}>
                   <Search
+                    id={id ? `${id}-filter-search` : undefined}
                     onChange={(event) => {
                       setFilter(event.target.value);
                     }}
@@ -288,6 +298,7 @@ export function DraggableCellHeader<T extends Record<string, any>>({
                 </div>
 
                 <MenuOption
+                  id={id ? `${id}-filter-contains` : undefined}
                   onClick={handleFilterFnChange}
                   before={menuOptionIcon("includesString")}
                 >
@@ -295,6 +306,7 @@ export function DraggableCellHeader<T extends Record<string, any>>({
                 </MenuOption>
 
                 <MenuOption
+                  id={id ? `${id}-filter-startswith` : undefined}
                   onClick={handleFilterFnChange}
                   before={menuOptionIcon("startsWith")}
                 >
@@ -302,6 +314,7 @@ export function DraggableCellHeader<T extends Record<string, any>>({
                 </MenuOption>
 
                 <MenuOption
+                  id={id ? `${id}-filter-endswith` : undefined}
                   onClick={handleFilterFnChange}
                   before={menuOptionIcon("endsWith")}
                 >