@khanacademy/wonder-blocks-clickable - npm Package Compare versions

Comparing version 0.0.0-PR2180-20240205163335 to 0.0.0-PR2189-20240227162840

CHANGELOG.md

 # @khanacademy/wonder-blocks-clickable
 
-## 0.0.0-PR2180-20240205163335
+## 0.0.0-PR2189-20240227162840
 
 ### Patch Changes
 
--   Updated dependencies [2c228e82]
-    -   @khanacademy/wonder-blocks-tokens@0.0.0-PR2180-20240205163335
+-   Updated dependencies [ceb212f1]
+    -   @khanacademy/wonder-blocks-tokens@0.0.0-PR2189-20240227162840
 
+## 4.1.0
+
+### Minor Changes
+
+-   60fdac1c: Added onMouseDown and onMouseUp props to Clickable
+
+## 4.0.14
+
+### Patch Changes
+
+-   Updated dependencies [e83f8991]
+    -   @khanacademy/wonder-blocks-tokens@1.0.0
+
 ## 4.0.13
@@ -11,0 +24,0 @@

dist/components/clickable-behavior.d.ts

@@ -81,2 +81,10 @@ import * as React from "react";
     onKeyUp?: (e: React.KeyboardEvent) => unknown;
+    /**
+     * Respond to a raw "mousedown" event.
+     */
+    onMouseDown?: (e: React.MouseEvent) => unknown;
+    /**
+     * Respond to a raw "mouseup" event.
+     */
+    onMouseUp?: (e: React.MouseEvent) => unknown;
 }>;
@@ -142,3 +150,3 @@ type Props = (CommonProps & Readonly<{
     onMouseLeave: () => unknown;
-    onMouseDown: () => unknown;
+    onMouseDown: (e: React.MouseEvent) => unknown;
     onMouseUp: (e: React.MouseEvent) => unknown;
@@ -248,3 +256,3 @@ onTouchStart: () => unknown;
     handleMouseLeave: () => void;
-    handleMouseDown: () => void;
+    handleMouseDown: (e: React.MouseEvent) => void;
     handleMouseUp: (e: React.MouseEvent) => void;
@@ -251,0 +259,0 @@ handleTouchStart: () => void;

dist/components/clickable.d.ts

@@ -81,2 +81,10 @@ import * as React from "react";
     /**
+     * Respond to raw "mousedown" event.
+     */
+    onMouseDown?: (e: React.MouseEvent) => unknown;
+    /**
+     * Respond to raw "mouseup" event.
+     */
+    onMouseUp?: (e: React.MouseEvent) => unknown;
+    /**
      * Don't show the default focus ring.  This should be used when implementing
@@ -83,0 +91,0 @@ * a custom focus ring within your own component that uses Clickable.

dist/es/index.js

@@ -127,3 +127,6 @@ import * as React from 'react';
     };
-    this.handleMouseDown = () => {
+    this.handleMouseDown = e => {
+      if (this.props.onMouseDown) {
+        this.props.onMouseDown(e);
+      }
       this.setState({
@@ -134,2 +137,5 @@ pressed: true
     this.handleMouseUp = e => {
+      if (this.props.onMouseUp) {
+        this.props.onMouseUp(e);
+      }
       this.setState({
@@ -376,3 +382,3 @@ pressed: false,
 
-const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onFocus", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled", "tabIndex"];
+const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseUp", "hideDefaultFocusRing", "light", "disabled", "tabIndex"];
 const StyledAnchor = addStyle("a");
@@ -422,2 +428,4 @@ const StyledButton = addStyle("button");
         onKeyUp,
+        onMouseDown,
+        onMouseUp,
         hideDefaultFocusRing,
@@ -440,2 +448,4 @@ light,
         onKeyUp: onKeyUp,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
         disabled: disabled,
@@ -455,2 +465,4 @@ tabIndex: tabIndex
         onKeyUp: onKeyUp,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
         target: target,
@@ -457,0 +469,0 @@ disabled: disabled,

dist/index.js

@@ -151,3 +151,6 @@ 'use strict';
     };
-    this.handleMouseDown = () => {
+    this.handleMouseDown = e => {
+      if (this.props.onMouseDown) {
+        this.props.onMouseDown(e);
+      }
       this.setState({
@@ -158,2 +161,5 @@ pressed: true
     this.handleMouseUp = e => {
+      if (this.props.onMouseUp) {
+        this.props.onMouseUp(e);
+      }
       this.setState({
@@ -400,3 +406,3 @@ pressed: false,
 
-const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onFocus", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled", "tabIndex"];
+const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseUp", "hideDefaultFocusRing", "light", "disabled", "tabIndex"];
 const StyledAnchor = wonderBlocksCore.addStyle("a");
@@ -446,2 +452,4 @@ const StyledButton = wonderBlocksCore.addStyle("button");
         onKeyUp,
+        onMouseDown,
+        onMouseUp,
         hideDefaultFocusRing,
@@ -464,2 +472,4 @@ light,
         onKeyUp: onKeyUp,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
         disabled: disabled,
@@ -479,2 +489,4 @@ tabIndex: tabIndex
         onKeyUp: onKeyUp,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
         target: target,
@@ -481,0 +493,0 @@ disabled: disabled,

package.json

 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "0.0.0-PR2180-20240205163335",
+  "version": "0.0.0-PR2189-20240227162840",
   "design": "v1",
@@ -20,3 +20,3 @@ "description": "Clickable component for Wonder-Blocks.",
     "@khanacademy/wonder-blocks-core": "^6.3.1",
-    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2180-20240205163335"
+    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2189-20240227162840"
   },
@@ -23,0 +23,0 @@ "peerDependencies": {

src/components/clickable-behavior.ts

@@ -126,2 +126,10 @@ import * as React from "react";
     onKeyUp?: (e: React.KeyboardEvent) => unknown;
+    /**
+     * Respond to a raw "mousedown" event.
+     */
+    onMouseDown?: (e: React.MouseEvent) => unknown;
+    /**
+     * Respond to a raw "mouseup" event.
+     */
+    onMouseUp?: (e: React.MouseEvent) => unknown;
 }>;
@@ -198,3 +206,3 @@
     onMouseLeave: () => unknown;
-    onMouseDown: () => unknown;
+    onMouseDown: (e: React.MouseEvent) => unknown;
     onMouseUp: (e: React.MouseEvent) => unknown;
@@ -519,3 +527,6 @@ onTouchStart: () => unknown;
 
-    handleMouseDown: () => void = () => {
+    handleMouseDown: (e: React.MouseEvent) => void = (e) => {
+        if (this.props.onMouseDown) {
+            this.props.onMouseDown(e);
+        }
         this.setState({pressed: true});
@@ -525,2 +536,5 @@ };
     handleMouseUp: (e: React.MouseEvent) => void = (e) => {
+        if (this.props.onMouseUp) {
+            this.props.onMouseUp(e);
+        }
         this.setState({pressed: false, focused: false});
@@ -527,0 +541,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

242010

increased by1.43%

Lines of code

4685

increased by2.14%

Dependency changes

• + Added@khanacademy/wonder-blocks-tokens@0.0.0-PR2189-20240227162840(transitive)

• - Removed@khanacademy/wonder-blocks-tokens@0.0.0-PR2180-20240205163335(transitive)

• Updated@khanacademy/wonder-blocks-tokens@0.0.0-PR2189-20240227162840