@neovici/cosmoz-utils 6.12.1 → 6.13.1

package/dist/hooks/use-host-bounds.d.ts

@@ -1,2 +1,2 @@
-declare const useHostBounds: () => DOMRectReadOnly;
+declare const useHostBounds: () => DOMRectReadOnly | undefined;
 export { useHostBounds };

package/dist/keybindings/context.d.ts

@@ -0,0 +1,2 @@
+import { RegisterFn } from './types';
+export declare const Keybindings: import("@pionjs/pion/lib/create-context").Context<RegisterFn>;

package/dist/keybindings/context.js

@@ -0,0 +1,4 @@
+import { createContext } from '@pionjs/pion';
+import { noop } from '../function';
+export const Keybindings = createContext(() => noop);
+customElements.define('cosmoz-keybinding-provider', Keybindings.Provider);

package/dist/keybindings/index.d.ts

@@ -0,0 +1,4 @@
+export type * from './types';
+export * from './context';
+export * from './use-activity';
+export * from './use-keybindings';

package/dist/keybindings/index.js

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './use-activity';
+export * from './use-keybindings';

package/dist/keybindings/types.d.ts

@@ -0,0 +1,14 @@
+export type Activity = symbol;
+export type Matcher = Pick<KeyboardEvent, 'key'> & Partial<Pick<KeyboardEvent, 'ctrlKey' | 'metaKey' | 'altKey' | 'shiftKey'>>;
+export type Info = {
+    title: string;
+    description: string;
+};
+export type KeyBinding = readonly [Matcher, Activity[], Info];
+export type ActivityHandler = {
+    activity: Activity;
+    callback: () => void;
+    check?: () => boolean;
+    element?: () => Element | null | undefined;
+};
+export type RegisterFn = (handler: ActivityHandler) => () => void;

package/dist/keybindings/types.js

@@ -0,0 +1 @@
+export {};

package/dist/keybindings/use-activity.d.ts

@@ -0,0 +1,2 @@
+import { ActivityHandler } from './types';
+export declare const useActivity: (handler: ActivityHandler, deps: unknown[]) => void;

package/dist/keybindings/use-activity.js

@@ -0,0 +1,8 @@
+import { useContext, useEffect } from '@pionjs/pion';
+import { Keybindings } from './context';
+import { useMeta } from '../hooks/use-meta';
+export const useActivity = (handler, deps) => {
+    const register = useContext(Keybindings);
+    const meta = useMeta(handler);
+    useEffect(() => register(meta), deps);
+};

package/dist/keybindings/use-keybindings.d.ts

@@ -0,0 +1,2 @@
+import { KeyBinding, RegisterFn } from './types';
+export declare const useKeybindings: (bindings: readonly KeyBinding[]) => RegisterFn;

package/dist/keybindings/use-keybindings.js

@@ -0,0 +1,43 @@
+import { useCallback, useEffect } from '@pionjs/pion';
+import { useMeta } from '../hooks/use-meta';
+import { focusIsInEditableArea, isInteractive, matches } from './utils';
+export const useKeybindings = (bindings) => {
+    const meta = useMeta({ bindings });
+    useEffect(() => {
+        const keyboardEventHandler = (e) => {
+            if (e.defaultPrevented) {
+                return;
+            }
+            const binding = meta.bindings.find(matches(e));
+            if (!binding)
+                return;
+            if (focusIsInEditableArea())
+                return;
+            const [, activities] = binding;
+            const handlers = activities.flatMap((activity) => meta[activity]);
+            if (handlers.length === 0)
+                return;
+            // find first actionable handler
+            const handler = handlers.find((handler) => {
+                if ((handler.check && !handler.check()) ||
+                    (handler.element && !isInteractive(handler.element()))) {
+                    return false;
+                }
+                return handler;
+            });
+            if (!handler)
+                return;
+            e.preventDefault();
+            handler.callback();
+        };
+        document.addEventListener('keydown', keyboardEventHandler, true);
+        return () => document.removeEventListener('keydown', keyboardEventHandler, true);
+    }, []);
+    const register = useCallback((handler) => {
+        meta[handler.activity] = [handler, ...(meta[handler.activity] ?? [])];
+        return () => {
+            meta[handler.activity] = meta[handler.activity]?.filter((h) => h !== handler);
+        };
+    }, []);
+    return register;
+};

package/dist/keybindings/utils.d.ts

@@ -0,0 +1,9 @@
+import { KeyBinding, Matcher } from './types';
+declare global {
+    interface ObjectConstructor {
+        entries(o: Matcher): [keyof Matcher, Matcher[keyof Matcher]][];
+    }
+}
+export declare const matches: (e: KeyboardEvent) => ([matcher]: KeyBinding) => boolean;
+export declare const isInteractive: (el: Element | null | undefined) => boolean;
+export declare const focusIsInEditableArea: () => boolean;

package/dist/keybindings/utils.js

@@ -0,0 +1,28 @@
+export const matches = (e) => ([matcher]) => Object.entries(matcher).every(([key, value]) => e[key] === value);
+export const isInteractive = (el) => {
+    if (el == null)
+        return false;
+    const bounds = el.getBoundingClientRect(), root = el.getRootNode(), topEl = root.elementFromPoint(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
+    return el === topEl;
+};
+const getActiveElement = (root = document) => {
+    const activeEl = root.activeElement;
+    if (!activeEl) {
+        return null;
+    }
+    if (activeEl.shadowRoot) {
+        return getActiveElement(activeEl.shadowRoot);
+    }
+    return activeEl;
+};
+export const focusIsInEditableArea = () => {
+    const active = getActiveElement(document);
+    if (!active)
+        return false;
+    if (active.matches('input:not([type="checkbox"]), textarea'))
+        return true;
+    if ('isContentEditable' in active && active.isContentEditable) {
+        return true;
+    }
+    return false;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-utils",
-	"version": "6.12.1",
+	"version": "6.13.1",
 	"description": "Date, money and template management functions commonly needed in Cosmoz views.",
 	"keywords": [
 		"polymer",
@@ -68,10 +68,12 @@
 		"./elements/*": "./dist/elements/*.js",
 		"./directives/*": "./dist/directives/*.js",
 		"./hooks/*": "./dist/hooks/*.js",
-		"./memoize": "./dist/memoize.js"
+		"./memoize": "./dist/memoize.js",
+		"./keybindings": "./dist/keybindings/index.js",
+		"./keybindings/*": "./dist/keybindings/*.js"
 	},
 	"dependencies": {
-		"@pionjs/pion": "^2.0.0"
+		"@pionjs/pion": "^2.7.1"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^18.0.0",