Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.

Compare changes

Choose any two refs to compare.

Changed files
+41 -12
.github
workflows
src
+26
.github/workflows/mirror.yml
···
···
+
# Mirrors to https://tangled.sh/@kitten.sh (knot.kitten.sh)
+
name: Mirror (Git Backup)
+
on:
+
push:
+
branches:
+
- main
+
jobs:
+
mirror:
+
runs-on: ubuntu-latest
+
steps:
+
- name: Checkout repository
+
uses: actions/checkout@v4
+
with:
+
fetch-depth: 0
+
fetch-tags: true
+
- name: Mirror
+
env:
+
MIRROR_SSH_KEY: ${{ secrets.MIRROR_SSH_KEY }}
+
GIT_SSH_COMMAND: 'ssh -o StrictHostKeyChecking=yes'
+
run: |
+
mkdir -p ~/.ssh
+
echo "$MIRROR_SSH_KEY" > ~/.ssh/id_rsa
+
chmod 600 ~/.ssh/id_rsa
+
ssh-keyscan -H knot.kitten.sh >> ~/.ssh/known_hosts
+
git remote add mirror "git@knot.kitten.sh:kitten.sh/${GITHUB_REPOSITORY#*/}"
+
git push --mirror mirror
+1 -1
package.json
···
{
"name": "use-interactions",
"description": "Reusable and common web interactions with WCAG accessibility criteria for React",
-
"version": "0.1.4",
"main": "dist/use-interactions.js",
"module": "dist/use-interactions.es.js",
"types": "dist/use-interactions.d.ts",
···
{
"name": "use-interactions",
"description": "Reusable and common web interactions with WCAG accessibility criteria for React",
+
"version": "0.1.5",
"main": "dist/use-interactions.js",
"module": "dist/use-interactions.es.js",
"types": "dist/use-interactions.d.ts",
+1 -1
src/types.ts
···
import type { CSSProperties } from 'react';
-
export interface Ref<T extends HTMLElement> {
readonly current: T | null;
}
···
import type { CSSProperties } from 'react';
+
export interface Ref<T extends HTMLElement | SVGElement> {
readonly current: T | null;
}
+13 -10
src/useDismissable.ts
···
}
}
if (focusLoss) {
-
root.addEventListener('focusout', onFocusOut, true);
-
root.addEventListener('focusin', onFocusIn, true);
}
-
root.addEventListener('click', onClick, true);
-
root.addEventListener('touchstart', onClick, true);
-
root.addEventListener('keydown', onKey, true);
return () => {
if (focusLoss) {
-
root.removeEventListener('focusout', onFocusOut, true);
-
root.removeEventListener('focusin', onFocusIn, true);
}
-
root.removeEventListener('click', onClick, true);
-
root.removeEventListener('touchstart', onClick, true);
-
root.removeEventListener('keydown', onKey, true);
};
}, [ref.current, hasPriority, disabled, focusLoss]);
}
···
}
}
+
const opts = { capture: true } as any;
+
const touchOpts = { capture: true, passive: false } as any;
+
if (focusLoss) {
+
root.addEventListener('focusout', onFocusOut, opts);
+
root.addEventListener('focusin', onFocusIn, opts);
}
+
root.addEventListener('click', onClick, opts);
+
root.addEventListener('touchstart', onClick, touchOpts);
+
root.addEventListener('keydown', onKey, opts);
return () => {
if (focusLoss) {
+
root.removeEventListener('focusout', onFocusOut, opts);
+
root.removeEventListener('focusin', onFocusIn, opts);
}
+
root.removeEventListener('click', onClick, opts);
+
root.removeEventListener('touchstart', onClick, touchOpts);
+
root.removeEventListener('keydown', onKey, opts);
};
}, [ref.current, hasPriority, disabled, focusLoss]);
}