@hrnec06/react_utils 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "A debugger component for react.",
   "exports": {
     ".": "./src/index.ts"

package/src/components/ResizeableBox/DragAreas.tsx

@@ -100,29 +100,32 @@ function DragArea({
 	onMove,
 	applyReposition = false,
 
-	...enabledSides
+	...assignedSides
 }: DragAreaProps)
 {
 	const box = useResizeableBox();
 
 	const isAllowed = (side: RB.DragSide) => box.options.allowedSides.includes(side);
 
+	// Is a corner and allowCorners are either empty or false
 	if (isCorner && !box.options.allowCorners)
 		return undefined;
 
-	if (
-		(enabledSides.top && !isAllowed('top')) ||
-		(enabledSides.right && !isAllowed('right')) ||
-		(enabledSides.bottom && !isAllowed('bottom')) ||
-		(enabledSides.left && !isAllowed('left'))
-	)
-		return undefined;
-
+	// Is corner and allowedCorners are array
 	if (isCorner && Array.isArray(box.options.allowCorners))
 	{
-		if (!box.options.allowCorners.some((combo) => enabledSides[combo[0]] && enabledSides[combo[1]]))
+		if (!box.options.allowCorners.some((combo) => assignedSides[combo[0]] && assignedSides[combo[1]]))
 			return undefined;
 	}
+	else if (
+		(assignedSides.top && !isAllowed('top')) ||
+		(assignedSides.right && !isAllowed('right')) ||
+		(assignedSides.bottom && !isAllowed('bottom')) ||
+		(assignedSides.left && !isAllowed('left'))
+	)
+	{
+		return undefined;
+	}
 
 	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
 		if (box.drag.value !== null || !matchMouseEvent(e.nativeEvent, MouseButton.Left))
@@ -160,21 +163,21 @@ function DragArea({
 					box.options.dragAreaSize === 'big'		&& 'w-6'
 				),
 
-				enabledSides.top 		&& clsx('bottom-full', box.options.insetAreas && 'translate-y-1/2'),
-				enabledSides.right 	&& clsx('left-full', box.options.insetAreas && '-translate-x-1/2'),
-				enabledSides.bottom	&& clsx('top-full', box.options.insetAreas && '-translate-y-1/2'),
-				enabledSides.left		&& clsx('right-full', box.options.insetAreas && 'translate-x-1/2'),
+				assignedSides.top 	&& clsx('bottom-full', box.options.insetAreas && 'translate-y-1/2'),
+				assignedSides.right 	&& clsx('left-full', box.options.insetAreas && '-translate-x-1/2'),
+				assignedSides.bottom	&& clsx('top-full', box.options.insetAreas && '-translate-y-1/2'),
+				assignedSides.left	&& clsx('right-full', box.options.insetAreas && 'translate-x-1/2'),
 
 				matchBool({
-					"cursor-nw-resize": enabledSides.top && enabledSides.left,
-					"cursor-ne-resize": enabledSides.top && enabledSides.right,
-					"cursor-se-resize": enabledSides.bottom && enabledSides.right,
-					"cursor-sw-resize": enabledSides.bottom && enabledSides.left,
-
-					"cursor-n-resize": enabledSides.top,
-					"cursor-e-resize": enabledSides.right,
-					"cursor-s-resize": enabledSides.bottom,
-					"cursor-w-resize": enabledSides.left
+					"cursor-nw-resize": assignedSides.top && assignedSides.left,
+					"cursor-ne-resize": assignedSides.top && assignedSides.right,
+					"cursor-se-resize": assignedSides.bottom && assignedSides.right,
+					"cursor-sw-resize": assignedSides.bottom && assignedSides.left,
+
+					"cursor-n-resize": assignedSides.top,
+					"cursor-e-resize": assignedSides.right,
+					"cursor-s-resize": assignedSides.bottom,
+					"cursor-w-resize": assignedSides.left
 				}),
 			)}
 		/>

package/src/components/ResizeableBox/ResizeableBox.tsx

@@ -32,8 +32,12 @@ interface ResizeableBoxProps extends React.HTMLProps<HTMLDivElement>
 	 */
 	$allowedSides?: RB.DragSide[],
 	/**
-	 * Allow corner resizers?
-	 * A corner will be visible only if the 2 neighbouring sides are visible
+	 * Allow corner resizers
+	 * 
+	 * Possible values:
+	 * - `true`: Corners will be applied automatically based on allowed sides
+	 * - `false`: No corners
+	 * - `Vector2<RB.DragSide>[]`: Explicitely define allowed corners
 	 */
 	$allowCorners?: boolean | Vector2<RB.DragSide>[],
 	/**

package/src/hooks/useKeyListener.ts

@@ -1,3 +1,4 @@
+import { KeyboardButton } from "@hrnec06/util";
 import { useEffect, useState } from "react";
 
 interface KeyListenerOptions {
@@ -5,9 +6,11 @@ interface KeyListenerOptions {
 	shift?: boolean,
 	alt?: boolean
 }
-export default function useKeyListener(key: string, options?: KeyListenerOptions) {
+export default function useKeyListener(key: string | KeyboardButton, options?: KeyListenerOptions, element?: EventTarget) {
 	const [pressing, setPressing] = useState(false);
 
+	element ||= window;
+
 	const keyMatching = (e: KeyboardEvent, strict: boolean): boolean => {
 		if (strict && options?.ctrl && !e.ctrlKey)
 			return false;
@@ -34,12 +37,12 @@ export default function useKeyListener(key: string, options?: KeyListenerOptions
 			setPressing(false);
 		}
 
-		window.addEventListener('keydown', downListener);
-		window.addEventListener('keyup', upListener);
+		element.addEventListener('keydown', downListener as EventListenerOrEventListenerObject);
+		element.addEventListener('keyup', upListener as EventListenerOrEventListenerObject);
 
 		return () => {
-			window.removeEventListener('keydown', downListener);
-			window.removeEventListener('keyup', upListener);
+			element.removeEventListener('keydown', downListener as EventListenerOrEventListenerObject);
+			element.removeEventListener('keyup', upListener as EventListenerOrEventListenerObject);
 		}
 	}, []);