@kbach/react 0.5.4 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +17 -3
- package/dist/index.mjs +17 -3
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3968,6 +3968,9 @@ function styled(Component, baseClasses = "") {
|
|
|
3968
3968
|
style: styleProp,
|
|
3969
3969
|
onPressIn,
|
|
3970
3970
|
onPressOut,
|
|
3971
|
+
onPointerDown,
|
|
3972
|
+
onPointerUp,
|
|
3973
|
+
onPointerLeave,
|
|
3971
3974
|
onMouseEnter,
|
|
3972
3975
|
onMouseLeave,
|
|
3973
3976
|
onFocus,
|
|
@@ -3986,6 +3989,18 @@ function styled(Component, baseClasses = "") {
|
|
|
3986
3989
|
setPressed(false);
|
|
3987
3990
|
onPressOut?.(e);
|
|
3988
3991
|
}, [onPressOut]);
|
|
3992
|
+
const handlePointerDown = (0, import_react6.useCallback)((e) => {
|
|
3993
|
+
setPressed(true);
|
|
3994
|
+
onPointerDown?.(e);
|
|
3995
|
+
}, [onPointerDown]);
|
|
3996
|
+
const handlePointerUp = (0, import_react6.useCallback)((e) => {
|
|
3997
|
+
setPressed(false);
|
|
3998
|
+
onPointerUp?.(e);
|
|
3999
|
+
}, [onPointerUp]);
|
|
4000
|
+
const handlePointerLeave = (0, import_react6.useCallback)((e) => {
|
|
4001
|
+
setPressed(false);
|
|
4002
|
+
onPointerLeave?.(e);
|
|
4003
|
+
}, [onPointerLeave]);
|
|
3989
4004
|
const handleMouseEnter = (0, import_react6.useCallback)((e) => {
|
|
3990
4005
|
setHovered(true);
|
|
3991
4006
|
onMouseEnter?.(e);
|
|
@@ -4020,9 +4035,8 @@ function styled(Component, baseClasses = "") {
|
|
|
4020
4035
|
style: finalStyle,
|
|
4021
4036
|
// className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
|
|
4022
4037
|
...isWeb && combined ? { className: combined } : {},
|
|
4023
|
-
// onPressIn / onPressOut are React Native-only
|
|
4024
|
-
|
|
4025
|
-
...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
|
|
4038
|
+
// onPressIn / onPressOut are React Native-only; on web use Pointer Events instead.
|
|
4039
|
+
...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
|
|
4026
4040
|
onMouseEnter: handleMouseEnter,
|
|
4027
4041
|
onMouseLeave: handleMouseLeave,
|
|
4028
4042
|
onFocus: handleFocus,
|
package/dist/index.mjs
CHANGED
|
@@ -390,6 +390,9 @@ function styled(Component, baseClasses = "") {
|
|
|
390
390
|
style: styleProp,
|
|
391
391
|
onPressIn,
|
|
392
392
|
onPressOut,
|
|
393
|
+
onPointerDown,
|
|
394
|
+
onPointerUp,
|
|
395
|
+
onPointerLeave,
|
|
393
396
|
onMouseEnter,
|
|
394
397
|
onMouseLeave,
|
|
395
398
|
onFocus,
|
|
@@ -408,6 +411,18 @@ function styled(Component, baseClasses = "") {
|
|
|
408
411
|
setPressed(false);
|
|
409
412
|
onPressOut?.(e);
|
|
410
413
|
}, [onPressOut]);
|
|
414
|
+
const handlePointerDown = useCallback3((e) => {
|
|
415
|
+
setPressed(true);
|
|
416
|
+
onPointerDown?.(e);
|
|
417
|
+
}, [onPointerDown]);
|
|
418
|
+
const handlePointerUp = useCallback3((e) => {
|
|
419
|
+
setPressed(false);
|
|
420
|
+
onPointerUp?.(e);
|
|
421
|
+
}, [onPointerUp]);
|
|
422
|
+
const handlePointerLeave = useCallback3((e) => {
|
|
423
|
+
setPressed(false);
|
|
424
|
+
onPointerLeave?.(e);
|
|
425
|
+
}, [onPointerLeave]);
|
|
411
426
|
const handleMouseEnter = useCallback3((e) => {
|
|
412
427
|
setHovered(true);
|
|
413
428
|
onMouseEnter?.(e);
|
|
@@ -442,9 +457,8 @@ function styled(Component, baseClasses = "") {
|
|
|
442
457
|
style: finalStyle,
|
|
443
458
|
// className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
|
|
444
459
|
...isWeb && combined ? { className: combined } : {},
|
|
445
|
-
// onPressIn / onPressOut are React Native-only
|
|
446
|
-
|
|
447
|
-
...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
|
|
460
|
+
// onPressIn / onPressOut are React Native-only; on web use Pointer Events instead.
|
|
461
|
+
...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
|
|
448
462
|
onMouseEnter: handleMouseEnter,
|
|
449
463
|
onMouseLeave: handleMouseLeave,
|
|
450
464
|
onFocus: handleFocus,
|