diff --git a/packages/graph-explorer/src/components/IconButton.tsx b/packages/graph-explorer/src/components/IconButton.tsx index 41bb3a307..087965b54 100644 --- 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,18 +51,12 @@ const iconButtonVariants = cva({ }, }); -type IconButtonVariants = VariantProps; - export interface IconButtonProps - extends Omit>, "elementType">, - IconButtonVariants { - className?: string; + extends Omit, "color">, + VariantProps { icon: ReactNode; - isDisabled?: boolean; - as?: ElementType; tooltipText?: TooltipProps["text"]; tooltipPlacement?: TooltipProps["placement"]; - onClick?(e: MouseEvent): void; } export const IconButton = forwardRef( @@ -72,35 +64,24 @@ export const IconButton = forwardRef( { tooltipText, tooltipPlacement, - onClick, variant, size, color, + className, + icon, ...props }: IconButtonProps, ref: ForwardedRef ) => { - const { buttonProps } = useButton( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - props, - ref as RefObject - ); - - const { className, icon, as } = props; - - const Component: ElementType = as ? as : "button"; - const component = ( - {icon} {props.children} - + ); if (tooltipText) { diff --git a/packages/graph-explorer/src/components/Panel.tsx b/packages/graph-explorer/src/components/Panel.tsx index b02f9241e..0145d2713 100644 --- a/packages/graph-explorer/src/components/Panel.tsx +++ b/packages/graph-explorer/src/components/Panel.tsx @@ -121,7 +121,7 @@ export function PanelHeaderCloseButton({ } - onPress={onClose} + onClick={onClose} variant="text" size="small" /> @@ -140,12 +140,12 @@ export function PanelHeaderActionButton({ }: Action & IconButtonProps) { return ( 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 index c26f5a2ef..42eb56104 100644 --- 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 !== "" && ( } - 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 index dae857023..ffd70c268 100644 --- 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)} /> ); diff --git a/packages/graph-explorer/src/components/Tabular/builders/makeIconToggleCell.tsx b/packages/graph-explorer/src/components/Tabular/builders/makeIconToggleCell.tsx index fe8adaaa4..9f7a501fc 100644 --- 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)} /> ); diff --git a/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ExternalColumnSettingsControl.tsx b/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ExternalColumnSettingsControl.tsx index a11509619..920143977 100644 --- a/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ExternalColumnSettingsControl.tsx +++ b/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ExternalColumnSettingsControl.tsx @@ -104,7 +104,7 @@ export const ColumnSettingsControl = >({ variant={"text"} size={"base"} icon={} - 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 index 6ebbc7873..b4453b043 100644 --- 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 = ({ onChange={value => onPageSizeChange(parseInt(value as string))} /> } - onPress={() => onPageIndexChange(0)} + onClick={() => onPageIndexChange(0)} /> } - onPress={() => onPageIndexChange(pageIndex - 1)} + onClick={() => onPageIndexChange(pageIndex - 1)} />
{pagesToRender.map(page => { @@ -196,19 +196,19 @@ export const PaginationControl: FunctionComponent = ({ })}
= pageCount} + disabled={pageIndex + 1 >= pageCount} variant={"text"} size={"small"} className={cn("page-button", "page-control")} icon={} - onPress={() => onPageIndexChange(pageIndex + 1)} + onClick={() => onPageIndexChange(pageIndex + 1)} /> = pageCount} + disabled={pageIndex + 1 >= pageCount} variant={"text"} className={cn("page-button", "page-control")} icon={} - onPress={() => onPageIndexChange(pageCount - 1)} + onClick={() => onPageIndexChange(pageCount - 1)} /> )} diff --git a/packages/graph-explorer/src/components/Tabular/controls/PaginationControl.tsx b/packages/graph-explorer/src/components/Tabular/controls/PaginationControl.tsx index 99ac23461..96cda6857 100644 --- 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 = ({ onChange={value => setPageSize(parseInt(value as string))} /> } - onPress={() => gotoPage(0)} + onClick={() => gotoPage(0)} /> } - onPress={previousPage} + onClick={previousPage} />
{pagesToRender.map(page => { @@ -203,19 +203,19 @@ export const PaginationControl: FunctionComponent = ({ })}
} - onPress={nextPage} + onClick={nextPage} /> } - onPress={() => gotoPage(pageCount - 1)} + onClick={() => gotoPage(pageCount - 1)} /> )} diff --git a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionData.tsx b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionData.tsx index 456f57477..a19d1caf9 100644 --- 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={} 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 index f3551cff6..32ba19696 100644 --- 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={} variant="text" - onPress={() => { + onClick={() => { graphRef.current?.runLayout(); }} /> @@ -302,7 +302,7 @@ function Legend({ onClose }: { onClose: () => void }) {

Legend

} - 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 index a44d28337..46a440bd4 100644 --- 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={} - 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 index ca50ab558..2e0a82ae1 100644 --- 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={} variant={"text"} size={"small"} - onPress={onFilterAdd} + onClick={onFilterAdd} /> )} @@ -127,7 +127,7 @@ const NodeExpandFilters = ({ variant="text" color="error" tooltipText="Remove Filter" - onPress={() => onFilterDelete(filterIndex)} + onClick={() => onFilterDelete(filterIndex)} /> ))} @@ -145,7 +145,7 @@ const NodeExpandFilters = ({ icon={} variant="text" size="small" - onPress={() => onLimitChange(1)} + onClick={() => onLimitChange(1)} /> {limit !== null && ( @@ -166,7 +166,7 @@ const NodeExpandFilters = ({ variant="text" color="error" tooltipText="Remove Limit" - onPress={() => onLimitChange(null)} + onClick={() => onLimitChange(null)} /> )} diff --git a/packages/graph-explorer/src/workspaces/GraphExplorer/GraphExplorer.tsx b/packages/graph-explorer/src/workspaces/GraphExplorer/GraphExplorer.tsx index d2e98b30a..ae3f18e8e 100644 --- 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={} - onPress={toggleView("graph-viewer")} + onClick={toggleView("graph-viewer")} /> { tooltipPlacement={"bottom-center"} variant={toggles.has("table-view") ? "filled" : "text"} icon={} - onPress={toggleView("table-view")} + onClick={toggleView("table-view")} />