gigaboard 1.5.0 → 1.5.1

package/dist/index.cjs

@@ -347,9 +347,12 @@ function BoardEditor({
   getSquareAriaLabel,
   focusedSquare: propFocusedSquare,
   onSquareFocus,
+  id,
   onClear,
   onSetStartingPosition,
-  onToggleSideToMove
+  onToggleSideToMove,
+  onFocus,
+  onBlur
 }) {
   const containerRef = react.useRef(null);
   const liveRegionRef = react.useRef(null);
@@ -635,6 +638,7 @@ function BoardEditor({
     "div",
     {
       ref: containerRef,
+      id,
       role: "application",
       tabIndex: 0,
       "aria-label": ariaLabel,
@@ -645,8 +649,14 @@ function BoardEditor({
           setHasKeyboardFocus(true);
           announceSquare(focusedSquare);
         }
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (e.target === e.currentTarget) {
+          setHasKeyboardFocus(false);
+        }
+        onBlur?.(e);
       },
-      onBlur: () => setHasKeyboardFocus(false),
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
@@ -728,6 +738,39 @@ function BoardEditor({
             })
           }
         ),
+        hasKeyboardFocus && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "grid",
+              gridTemplateColumns: "repeat(8, 1fr)",
+              gridTemplateRows: "repeat(8, 1fr)",
+              pointerEvents: "none",
+              zIndex: 10
+            },
+            children: (() => {
+              const { col, row } = gridCoord(focusedSquare, orientation);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-gb-editor-focus-square": algebraicOf2(focusedSquare),
+                  style: {
+                    gridColumnStart: col,
+                    gridRowStart: row,
+                    outline: "3px solid var(--gb-editor-sq-focus, #f59e0b)",
+                    outlineOffset: "-3px",
+                    boxShadow: "inset 0 0 0 1.5px rgba(0, 0, 0, 0.75), 0 0 8px rgba(245, 158, 11, 0.7)",
+                    borderRadius: "2px",
+                    pointerEvents: "none"
+                  }
+                }
+              );
+            })()
+          }
+        ),
         dragging && containerRef.current ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {