aws · kmcginnes · Nov 26, 2024 · Nov 25, 2024
diff --git a/packages/graph-explorer/src/components/IconButton.tsx b/packages/graph-explorer/src/components/IconButton.tsx
@@ -1,7 +1,5 @@
 import { cn } from "@/utils";
-import { useButton } from "@react-aria/button";
-import type { AriaButtonProps } from "@react-types/button";
-import type { ElementType, ForwardedRef, ReactNode, RefObject } from "react";
+import type { ComponentPropsWithoutRef, ForwardedRef, ReactNode } from "react";
 import { forwardRef } from "react";
 import type { TooltipProps } from "./Tooltip";
 import Tooltip from "./Tooltip/Tooltip";
@@ -53,54 +51,37 @@ const iconButtonVariants = cva({
   },
 });
 
-type IconButtonVariants = VariantProps<typeof iconButtonVariants>;
-
 export interface IconButtonProps
-  extends Omit<AriaButtonProps<ElementType<any>>, "elementType">,
-    IconButtonVariants {
-  className?: string;
+  extends Omit<ComponentPropsWithoutRef<"button">, "color">,
+    VariantProps<typeof iconButtonVariants> {
   icon: ReactNode;
-  isDisabled?: boolean;
-  as?: ElementType;
   tooltipText?: TooltipProps["text"];
   tooltipPlacement?: TooltipProps["placement"];
-  onClick?(e: MouseEvent): void;
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   (
     {
       tooltipText,
       tooltipPlacement,
-      onClick,
       variant,
       size,
       color,
+      className,
+      icon,
       ...props
     }: IconButtonProps,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
-    const { buttonProps } = useButton(
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      props,
-      ref as RefObject<HTMLButtonElement>
-    );
-
-    const { className, icon, as } = props;
-
-    const Component: ElementType = as ? as : "button";
-
     const component = (
-      <Component
+      <button
         ref={ref}
-        {...buttonProps}
         className={cn(iconButtonVariants({ variant, color, size }), className)}
-        onClick={onClick}
+        {...props}
       >
         {icon}
         {props.children}
-      </Component>
+      </button>
     );
 
     if (tooltipText) {

diff --git a/packages/graph-explorer/src/components/Panel.tsx b/packages/graph-explorer/src/components/Panel.tsx
@@ -121,7 +121,7 @@ export function PanelHeaderCloseButton({
     <IconButton
       tooltipText="Close"
       icon={<XIcon />}
-      onPress={onClose}
+      onClick={onClose}
       variant="text"
       size="small"
     />
@@ -140,12 +140,12 @@ export function PanelHeaderActionButton({
 }: Action & IconButtonProps) {
   return (
     <IconButton
-      isDisabled={isDisabled}
+      disabled={isDisabled}
       tooltipText={label}
       variant={active ? "filled" : "text"}
       color={color}
       icon={icon}
-      onPress={() => onActionClick()}
+      onClick={() => onActionClick()}
       {...props}
     />
   );

diff --git a/packages/graph-explorer/src/components/Select/internalComponents/SelectBox.tsx b/packages/graph-explorer/src/components/Select/internalComponents/SelectBox.tsx
@@ -180,10 +180,9 @@ const SelectBox = (
             {clearable && selectedOptions !== "" && (
               <IconButton
                 className={"clear-button"}
-                as="span"
                 variant="text"
                 icon={<CloseIcon />}
-                onPress={() => onSelectionChange?.(new Set())}
+                onClick={() => onSelectionChange?.(new Set())}
               />
             )}
             {items.length > 0 && (

diff --git a/packages/graph-explorer/src/components/Tabular/builders/makeIconActionCell.tsx b/packages/graph-explorer/src/components/Tabular/builders/makeIconActionCell.tsx
@@ -42,7 +42,7 @@ export const makeIconActionCell =
           icon={getIcon?.(props) || icon}
           size={"small"}
           variant={"text"}
-          onPress={() => onPress(props)}
+          onClick={() => onPress(props)}
         />
       </div>
     );

diff --git a/packages/graph-explorer/src/components/Tabular/builders/makeIconToggleCell.tsx b/packages/graph-explorer/src/components/Tabular/builders/makeIconToggleCell.tsx
@@ -38,7 +38,7 @@ export const makeIconActionCell =
           icon={getValue(props) ? on : off}
           size={"small"}
           variant={"text"}
-          onPress={() => onPress?.(props)}
+          onClick={() => onPress?.(props)}
         />
       </div>
     );

diff --git a/...r/src/components/Tabular/controls/ColumnSettingsControl/ExternalColumnSettingsControl.tsx b/...r/src/components/Tabular/controls/ColumnSettingsControl/ExternalColumnSettingsControl.tsx
@@ -104,7 +104,7 @@ export const ColumnSettingsControl = <T extends Record<string, unknown>>({
         variant={"text"}
         size={"base"}
         icon={<ManageColumnsIcon />}
-        onPress={() => setIsContentVisible(visible => !visible)}
+        onClick={() => setIsContentVisible(visible => !visible)}
         {...triggerProps}
       />
       {renderLayer(

diff --git a/packages/graph-explorer/src/components/Tabular/controls/ExternalPaginationControl.tsx b/packages/graph-explorer/src/components/Tabular/controls/ExternalPaginationControl.tsx
@@ -163,20 +163,20 @@ export const PaginationControl: FunctionComponent<PaginationControlProps> = ({
             onChange={value => onPageSizeChange(parseInt(value as string))}
           />
           <IconButton
-            isDisabled={pageIndex - 1 < 0}
+            disabled={pageIndex - 1 < 0}
             variant={"text"}
             size={"small"}
             className={cn("page-button", "page-control")}
             icon={<SkipBackwardIcon />}
-            onPress={() => onPageIndexChange(0)}
+            onClick={() => onPageIndexChange(0)}
           />
           <IconButton
-            isDisabled={pageIndex - 1 < 0}
+            disabled={pageIndex - 1 < 0}
             variant={"text"}
             size={"small"}
             className={cn("page-button", "page-control")}
             icon={<BackwardIcon />}
-            onPress={() => onPageIndexChange(pageIndex - 1)}
+            onClick={() => onPageIndexChange(pageIndex - 1)}
           />
           <div className={"page-viz"}>
             {pagesToRender.map(page => {
@@ -196,19 +196,19 @@ export const PaginationControl: FunctionComponent<PaginationControlProps> = ({
             })}
           </div>
           <IconButton
-            isDisabled={pageIndex + 1 >= pageCount}
+            disabled={pageIndex + 1 >= pageCount}
             variant={"text"}
             size={"small"}
             className={cn("page-button", "page-control")}
             icon={<ForwardIcon />}
-            onPress={() => onPageIndexChange(pageIndex + 1)}
+            onClick={() => onPageIndexChange(pageIndex + 1)}
           />
           <IconButton
-            isDisabled={pageIndex + 1 >= pageCount}
+            disabled={pageIndex + 1 >= pageCount}
             variant={"text"}
             className={cn("page-button", "page-control")}
             icon={<SkipForwardIcon />}
-            onPress={() => onPageIndexChange(pageCount - 1)}
+            onClick={() => onPageIndexChange(pageCount - 1)}
           />
         </div>
       )}

diff --git a/packages/graph-explorer/src/components/Tabular/controls/PaginationControl.tsx b/packages/graph-explorer/src/components/Tabular/controls/PaginationControl.tsx
@@ -170,20 +170,20 @@ export const PaginationControl: FunctionComponent<PaginationControlProps> = ({
             onChange={value => setPageSize(parseInt(value as string))}
           />
           <IconButton
-            isDisabled={!canPreviousPage}
+            disabled={!canPreviousPage}
             variant={"text"}
             size={"small"}
             className={cn("page-button", "page-control")}
             icon={<SkipBackwardIcon />}
-            onPress={() => gotoPage(0)}
+            onClick={() => gotoPage(0)}
           />
           <IconButton
-            isDisabled={!canPreviousPage}
+            disabled={!canPreviousPage}
             variant={"text"}
             size={"small"}
             className={cn("page-button", "page-control")}
             icon={<BackwardIcon />}
-            onPress={previousPage}
+            onClick={previousPage}
           />
           <div className={"page-viz"}>
             {pagesToRender.map(page => {
@@ -203,19 +203,19 @@ export const PaginationControl: FunctionComponent<PaginationControlProps> = ({
             })}
           </div>
           <IconButton
-            isDisabled={!canNextPage}
+            disabled={!canNextPage}
             variant={"text"}
             size={"small"}
             className={cn("page-button", "page-control")}
             icon={<ForwardIcon />}
-            onPress={nextPage}
+            onClick={nextPage}
           />
           <IconButton
-            isDisabled={!canNextPage}
+            disabled={!canNextPage}
             variant={"text"}
             className={cn("page-button", "page-control")}
             icon={<SkipForwardIcon />}
-            onPress={() => gotoPage(pageCount - 1)}
+            onClick={() => gotoPage(pageCount - 1)}
           />
         </div>
       )}

diff --git a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionData.tsx b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionData.tsx
@@ -68,7 +68,7 @@ const ConnectionData = () => {
             icon={<ChevronRightIcon />}
             variant="text"
             size="small"
-            onPress={() => navigate(`/data-explorer/${encodeURIComponent(vt)}`)}
+            onClick={() => navigate(`/data-explorer/${encodeURIComponent(vt)}`)}
           />
         ),
       });

diff --git a/packages/graph-explorer/src/modules/GraphViewer/GraphViewer.tsx b/packages/graph-explorer/src/modules/GraphViewer/GraphViewer.tsx
@@ -206,7 +206,7 @@ export default function GraphViewer({
               tooltipPlacement="bottom-center"
               icon={<ResetIcon />}
               variant="text"
-              onPress={() => {
+              onClick={() => {
                 graphRef.current?.runLayout();
               }}
             />
@@ -302,7 +302,7 @@ function Legend({ onClose }: { onClose: () => void }) {
         <h1 className="text-base font-bold">Legend</h1>
         <IconButton
           icon={<CloseIcon />}
-          onPress={onClose}
+          onClick={onClose}
           variant="text"
           size="small"
         />

diff --git a/packages/graph-explorer/src/modules/Namespaces/UserPrefixes.tsx b/packages/graph-explorer/src/modules/Namespaces/UserPrefixes.tsx
@@ -71,7 +71,7 @@ const UserPrefixes = () => {
                 size={"small"}
                 color={"error"}
                 icon={<DeleteIcon />}
-                onPress={onDeletePrefix(prefixConfig.prefix)}
+                onClick={onDeletePrefix(prefixConfig.prefix)}
               />
             ),
           };

diff --git a/packages/graph-explorer/src/modules/NodeExpand/NodeExpandFilters.tsx b/packages/graph-explorer/src/modules/NodeExpand/NodeExpandFilters.tsx
@@ -91,7 +91,7 @@ const NodeExpandFilters = ({
             icon={<AddIcon />}
             variant={"text"}
             size={"small"}
-            onPress={onFilterAdd}
+            onClick={onFilterAdd}
           />
         </div>
       )}
@@ -127,7 +127,7 @@ const NodeExpandFilters = ({
                 variant="text"
                 color="error"
                 tooltipText="Remove Filter"
-                onPress={() => onFilterDelete(filterIndex)}
+                onClick={() => onFilterDelete(filterIndex)}
               />
             </div>
           ))}
@@ -145,7 +145,7 @@ const NodeExpandFilters = ({
           icon={<AddIcon />}
           variant="text"
           size="small"
-          onPress={() => onLimitChange(1)}
+          onClick={() => onLimitChange(1)}
         />
       </div>
       {limit !== null && (
@@ -166,7 +166,7 @@ const NodeExpandFilters = ({
             variant="text"
             color="error"
             tooltipText="Remove Limit"
-            onPress={() => onLimitChange(null)}
+            onClick={() => onLimitChange(null)}
           />
         </div>
       )}

diff --git a/packages/graph-explorer/src/workspaces/GraphExplorer/GraphExplorer.tsx b/packages/graph-explorer/src/workspaces/GraphExplorer/GraphExplorer.tsx
@@ -148,7 +148,7 @@ const GraphExplorer = () => {
             tooltipPlacement={"bottom-center"}
             variant={toggles.has("graph-viewer") ? "filled" : "text"}
             icon={<GraphIcon />}
-            onPress={toggleView("graph-viewer")}
+            onClick={toggleView("graph-viewer")}
           />
           <IconButton
             tooltipText={
@@ -157,7 +157,7 @@ const GraphExplorer = () => {
             tooltipPlacement={"bottom-center"}
             variant={toggles.has("table-view") ? "filled" : "text"}
             icon={<GridIcon />}
-            onPress={toggleView("table-view")}
+            onClick={toggleView("table-view")}
           />
           <div className={"v-divider"} />
           <Link to={"/connections"}>