feat(pie): added more event listener on bar and arc

packages/arcs/src/ArcShape.tsx

@@ -1,4 +1,4 @@
-import { useCallback, MouseEvent } from 'react'
+import { useCallback, MouseEvent, FocusEvent } from 'react'
 import { SpringValue, Interpolation, animated } from '@react-spring/web'
 import { DatumWithArcAndColor } from './types'
 
@@ -7,6 +7,11 @@ export type ArcMouseHandler<Datum extends DatumWithArcAndColor> = (
     event: MouseEvent<SVGPathElement>
 ) => void
 
+export type ArcKeyboardHandler<Datum extends DatumWithArcAndColor> = (
+    datum: Datum,
+    event: FocusEvent<SVGPathElement>
+) => void
+
 export interface ArcShapeProps<Datum extends DatumWithArcAndColor> {
     datum: Datum
     style: {
@@ -17,9 +22,13 @@ export interface ArcShapeProps<Datum extends DatumWithArcAndColor> {
         path: Interpolation<string>
     }
     onClick?: ArcMouseHandler<Datum>
+    onMouseDown?: ArcMouseHandler<Datum>
+    onMouseUp?: ArcMouseHandler<Datum>
     onMouseEnter?: ArcMouseHandler<Datum>
     onMouseMove?: ArcMouseHandler<Datum>
     onMouseLeave?: ArcMouseHandler<Datum>
+    onFocus?: ArcKeyboardHandler<Datum>
+    onBlur?: ArcKeyboardHandler<Datum>
 }
 
 /**
@@ -35,6 +44,10 @@ export const ArcShape = <Datum extends DatumWithArcAndColor>({
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
+    onMouseDown,
+    onMouseUp,
+    onFocus,
+    onBlur,
 }: ArcShapeProps<Datum>) => {
     const handleClick = useCallback(
         (event: MouseEvent<SVGPathElement>) => onClick?.(datum, event),
@@ -56,6 +69,23 @@ export const ArcShape = <Datum extends DatumWithArcAndColor>({
         [onMouseLeave, datum]
     )
 
+    const handleMouseDown = useCallback(
+        (event: MouseEvent<SVGPathElement>) => onMouseDown?.(datum, event),
+        [onMouseDown, datum]
+    )
+    const handleMouseUp = useCallback(
+        (event: MouseEvent<SVGPathElement>) => onMouseUp?.(datum, event),
+        [onMouseUp, datum]
+    )
+    const handleFocus = useCallback(
+        (event: FocusEvent<SVGPathElement>) => onFocus?.(datum, event),
+        [onFocus, datum]
+    )
+    const handleBlur = useCallback(
+        (event: FocusEvent<SVGPathElement>) => onBlur?.(datum, event),
+        [onBlur, datum]
+    )
+
     return (
         <animated.path
             d={style.path}
@@ -64,9 +94,15 @@ export const ArcShape = <Datum extends DatumWithArcAndColor>({
             stroke={style.borderColor}
             strokeWidth={style.borderWidth}
             onClick={onClick ? handleClick : undefined}
+            onMouseDown={onMouseDown ? handleMouseDown : undefined}
+            onMouseUp={onMouseUp ? handleMouseUp : undefined}
             onMouseEnter={onMouseEnter ? handleMouseEnter : undefined}
             onMouseMove={onMouseMove ? handleMouseMove : undefined}
             onMouseLeave={onMouseLeave ? handleMouseLeave : undefined}
+            onFocus={onFocus ? handleFocus : undefined}
+            onBlur={onBlur ? handleBlur : undefined}
+            focusable={onFocus || onBlur ? true : undefined}
+            tabIndex={onFocus || onBlur ? 0 : undefined}
         />
     )
 }

packages/arcs/src/ArcsLayer.tsx

@@ -4,7 +4,7 @@ import { InheritedColorConfig, useInheritedColor } from '@nivo/colors'
 import { DatumWithArcAndColor, ArcGenerator } from './types'
 import { useArcsTransition } from './useArcsTransition'
 import { ArcTransitionMode } from './arcTransitionMode'
-import { ArcMouseHandler, ArcShape, ArcShapeProps } from './ArcShape'
+import { ArcKeyboardHandler, ArcMouseHandler, ArcShape, ArcShapeProps } from './ArcShape'
 
 export type ArcComponent<Datum extends DatumWithArcAndColor> = (
     props: ArcShapeProps<Datum>
@@ -17,9 +17,13 @@ interface ArcsLayerProps<Datum extends DatumWithArcAndColor> {
     borderWidth: number
     borderColor: InheritedColorConfig<Datum>
     onClick?: ArcMouseHandler<Datum>
+    onMouseDown?: ArcMouseHandler<Datum>
+    onMouseUp?: ArcMouseHandler<Datum>
     onMouseEnter?: ArcMouseHandler<Datum>
     onMouseMove?: ArcMouseHandler<Datum>
     onMouseLeave?: ArcMouseHandler<Datum>
+    onFocus?: ArcKeyboardHandler<Datum>
+    onBlur?: ArcKeyboardHandler<Datum>
     transitionMode: ArcTransitionMode
     component?: ArcComponent<Datum>
 }
@@ -34,6 +38,10 @@ export const ArcsLayer = <Datum extends DatumWithArcAndColor>({
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
+    onMouseDown,
+    onMouseUp,
+    onFocus,
+    onBlur,
     transitionMode,
     component = ArcShape,
 }: ArcsLayerProps<Datum>) => {
@@ -88,6 +96,10 @@ export const ArcsLayer = <Datum extends DatumWithArcAndColor>({
                     onMouseEnter,
                     onMouseMove,
                     onMouseLeave,
+                    onMouseDown,
+                    onMouseUp,
+                    onFocus,
+                    onBlur,
                 })
             })}
         </g>

packages/pie/src/Arcs.tsx

@@ -11,10 +11,15 @@ interface ArcsProps<RawDatum> {
     borderWidth: CompletePieSvgProps<RawDatum>['borderWidth']
     borderColor: CompletePieSvgProps<RawDatum>['borderColor']
     isInteractive: CompletePieSvgProps<RawDatum>['isInteractive']
+    isFocusable: CompletePieSvgProps<RawDatum>['isFocusable']
     onClick?: CompletePieSvgProps<RawDatum>['onClick']
     onMouseEnter?: CompletePieSvgProps<RawDatum>['onMouseEnter']
     onMouseMove?: CompletePieSvgProps<RawDatum>['onMouseMove']
     onMouseLeave?: CompletePieSvgProps<RawDatum>['onMouseLeave']
+    onMouseDown?: CompletePieSvgProps<RawDatum>['onMouseDown']
+    onMouseUp?: CompletePieSvgProps<RawDatum>['onMouseUp']
+    onFocus?: CompletePieSvgProps<RawDatum>['onFocus']
+    onBlur?: CompletePieSvgProps<RawDatum>['onBlur']
     setActiveId: (id: null | string | number) => void
     tooltip: CompletePieSvgProps<RawDatum>['tooltip']
     transitionMode: CompletePieSvgProps<RawDatum>['transitionMode']
@@ -27,16 +32,37 @@ export const Arcs = <RawDatum,>({
     borderWidth,
     borderColor,
     isInteractive,
+    isFocusable,
     onClick,
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
+    onMouseDown,
+    onMouseUp,
+    onFocus,
+    onBlur,
     setActiveId,
     tooltip,
     transitionMode,
 }: ArcsProps<RawDatum>) => {
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
+    const handleFocus = useMemo(() => {
+        if (!(isFocusable && isFocusable)) return undefined
+
+        return (datum: ComputedDatum<RawDatum>, event: React.FocusEvent<SVGPathElement>) => {
+            onFocus?.(datum, event)
+        }
+    }, [isFocusable, isFocusable , onFocus])
+
+    const handleBlur = useMemo(() => {
+        if (!(isInteractive && isFocusable)) return undefined
+
+        return (datum: ComputedDatum<RawDatum>, event: React.FocusEvent<SVGPathElement>) => {
+            onBlur?.(datum, event)
+        }
+    }, [isInteractive, isFocusable , onBlur])
+
     const handleClick = useMemo(() => {
         if (!isInteractive) return undefined
 
@@ -45,6 +71,22 @@ export const Arcs = <RawDatum,>({
         }
     }, [isInteractive, onClick])
 
+    const handleMouseDown = useMemo(() => {
+        if (!isInteractive) return undefined
+
+        return (datum: ComputedDatum<RawDatum>, event: React.MouseEvent<SVGPathElement>) => {
+            onMouseDown?.(datum, event)
+        }
+    }, [isInteractive, onMouseDown])
+
+    const handleMouseUp = useMemo(() => {
+        if (!isInteractive) return undefined
+
+        return (datum: ComputedDatum<RawDatum>, event: React.MouseEvent<SVGPathElement>) => {
+            onMouseUp?.(datum, event)
+        }
+    }, [isInteractive, onMouseUp])
+
     const handleMouseEnter = useMemo(() => {
         if (!isInteractive) return undefined
 
@@ -86,6 +128,10 @@ export const Arcs = <RawDatum,>({
             onMouseEnter={handleMouseEnter}
             onMouseMove={handleMouseMove}
             onMouseLeave={handleMouseLeave}
+            onMouseDown={handleMouseDown}
+            onMouseUp={handleMouseUp}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
         />
     )
 }

packages/pie/src/Pie.tsx

@@ -69,10 +69,15 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
 
     // interactivity
     isInteractive = defaultProps.isInteractive,
+    isFocusable = defaultProps.isFocusable,
     onClick,
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
+    onMouseDown,
+    onMouseUp,
+    onFocus,
+    onBlur,
     tooltip = defaultProps.tooltip,
     activeId: activeIdFromProps,
     onActiveIdChange,
@@ -147,10 +152,15 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
                 borderWidth={borderWidth}
                 borderColor={borderColor}
                 isInteractive={isInteractive}
+                isFocusable={isFocusable}
                 onClick={onClick}
                 onMouseEnter={onMouseEnter}
                 onMouseMove={onMouseMove}
                 onMouseLeave={onMouseLeave}
+                onMouseDown={onMouseDown}
+                onMouseUp={onMouseUp}
+                onFocus={onFocus}
+                onBlur={onBlur}
                 setActiveId={setActiveId}
                 tooltip={tooltip}
                 transitionMode={transitionMode}
@@ -241,6 +251,7 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
 
 export const Pie = <RawDatum extends MayHaveLabel>({
     isInteractive = defaultProps.isInteractive,
+    isFocusable = defaultProps.isFocusable,
     animate = defaultProps.animate,
     motionConfig = defaultProps.motionConfig,
     theme,
@@ -251,11 +262,16 @@ export const Pie = <RawDatum extends MayHaveLabel>({
         {...{
             animate,
             isInteractive,
+            isFocusable,
             motionConfig,
             renderWrapper,
             theme,
         }}
     >
-        <InnerPie<RawDatum> isInteractive={isInteractive} {...otherProps} />
+        <InnerPie<RawDatum>
+            isInteractive={isInteractive}
+            isFocusable={isFocusable}
+            {...otherProps}
+        />
     </Container>
 )

packages/pie/src/props.ts

@@ -50,7 +50,7 @@ export const defaultProps = {
     fill: [],
 
     isInteractive: true,
-
+    isFocusable: false,
     animate: true,
     motionConfig: 'gentle',
     transitionMode: 'innerRadius' as ArcTransitionMode,

packages/pie/src/types.ts

@@ -70,6 +70,11 @@ export type MouseEventHandler<RawDatum, ElementType = HTMLCanvasElement> = (
     event: React.MouseEvent<ElementType>
 ) => void
 
+export type FocusEventHandler<RawDatum, ElementType = HTMLCanvasElement> = (
+    datum: ComputedDatum<RawDatum>,
+    event: React.FocusEvent<ElementType>
+) => void
+
 export type PieLayerId = 'arcLinkLabels' | 'arcs' | 'arcLabels' | 'legends'
 
 export interface PieCustomLayerProps<RawDatum> {
@@ -112,6 +117,7 @@ export type CommonPieProps<RawDatum> = {
 
     // interactivity
     isInteractive: boolean
+    isFocusable: boolean
     tooltip: React.FC<PieTooltipProps<RawDatum>>
     activeId: DatumId | null
     onActiveIdChange: (id: DatumId | null) => void
@@ -130,6 +136,10 @@ export type PieHandlers<RawDatum, ElementType> = {
     onMouseEnter?: MouseEventHandler<RawDatum, ElementType>
     onMouseMove?: MouseEventHandler<RawDatum, ElementType>
     onMouseLeave?: MouseEventHandler<RawDatum, ElementType>
+    onMouseDown?: MouseEventHandler<RawDatum, ElementType>
+    onMouseUp?: MouseEventHandler<RawDatum, ElementType>
+    onFocus?: FocusEventHandler<RawDatum, ElementType>
+    onBlur?: FocusEventHandler<RawDatum, ElementType>
 }
 
 export type PieSvgCustomComponents<RawDatum> = {