@darajs/ui-utils 1.16.21 → 1.16.23

package/dist/index.d.ts

@@ -30,4 +30,5 @@ export { default as useUpdateEffect } from './use-update-effect';
 export { useLatestCallback } from './use-latest-callback';
 export { useLatestRef } from './use-latest-ref';
 export { useTinykeys, useFocusTinykeys } from './use-tinykeys';
+export { default as useIME } from './use-ime';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EACH,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,cAAc,EACd,YAAY,EACZ,WAAW,EACX,gBAAgB,GACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EACH,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,cAAc,EACd,YAAY,EACZ,WAAW,EACX,gBAAgB,GACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -30,4 +30,5 @@ export { default as useUpdateEffect } from './use-update-effect';
 export { useLatestCallback } from './use-latest-callback';
 export { useLatestRef } from './use-latest-ref';
 export { useTinykeys, useFocusTinykeys } from './use-tinykeys';
+export { default as useIME } from './use-ime';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EACH,iBAAiB,EAEjB,WAAW,EAEX,YAAY,EAEZ,gBAAgB,GACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EACH,iBAAiB,EAEjB,WAAW,EAEX,YAAY,EAEZ,gBAAgB,GACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC"}

package/dist/use-ime.d.ts

@@ -0,0 +1,23 @@
+export interface UseIMEOptions<T extends HTMLInputElement | HTMLTextAreaElement> {
+    onKeyDown?: (e: React.KeyboardEvent<T>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<T>) => void;
+    onCompositionStart?: (e: React.CompositionEvent<T>) => void;
+    onCompositionEnd?: (e: React.CompositionEvent<T>) => void;
+}
+export interface UseIMEReturn<T extends HTMLInputElement | HTMLTextAreaElement> {
+    onCompositionStart: React.CompositionEventHandler<T>;
+    onCompositionEnd: React.CompositionEventHandler<T>;
+    onKeyDownCapture: React.KeyboardEventHandler<T>;
+    onKeyUpCapture: React.KeyboardEventHandler<T>;
+    onKeyDown: React.KeyboardEventHandler<T>;
+    onKeyUp: React.KeyboardEventHandler<T>;
+}
+/**
+ * Hook to handle IME composition in input elements.
+ * Prevents firing and bubbling events during IME composition or confirmation.
+ *
+ * @param {UseIMEOptions} options - the user handlers to wrap
+ */
+declare function useIMEEnter<T extends HTMLInputElement | HTMLTextAreaElement = HTMLTextAreaElement>({ onKeyDown: userKeyDown, onKeyUp: userKeyUp, onCompositionStart: userCompStart, onCompositionEnd: userCompEnd, }: UseIMEOptions<T>): UseIMEReturn<T>;
+export default useIMEEnter;
+//# sourceMappingURL=use-ime.d.ts.map

package/dist/use-ime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-ime.d.ts","sourceRoot":"","sources":["../src/use-ime.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,gBAAgB,GAAG,mBAAmB;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC9C,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC5D,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,gBAAgB,GAAG,mBAAmB;IAE1E,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IACrD,gBAAgB,EAAE,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IAEnD,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAChD,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAE9C,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACzC,OAAO,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;CAC1C;AAED;;;;;GAKG;AACH,iBAAS,WAAW,CAAC,CAAC,SAAS,gBAAgB,GAAG,mBAAmB,GAAG,mBAAmB,EAAE,EACzF,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,SAAS,EAClB,kBAAkB,EAAE,aAAa,EACjC,gBAAgB,EAAE,WAAW,GAChC,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAyFpC;AACD,eAAe,WAAW,CAAC"}

package/dist/use-ime.js

@@ -0,0 +1,80 @@
+import { useCallback, useRef } from 'react';
+/**
+ * Hook to handle IME composition in input elements.
+ * Prevents firing and bubbling events during IME composition or confirmation.
+ *
+ * @param {UseIMEOptions} options - the user handlers to wrap
+ */
+function useIMEEnter({ onKeyDown: userKeyDown, onKeyUp: userKeyUp, onCompositionStart: userCompStart, onCompositionEnd: userCompEnd, }) {
+    const isComposingRef = useRef(false);
+    const justEndedRef = useRef(false);
+    // --- composition (bubble phase) ---
+    const handleCompositionStart = useCallback((e) => {
+        isComposingRef.current = true;
+        userCompStart === null || userCompStart === void 0 ? void 0 : userCompStart(e);
+    }, [userCompStart]);
+    const handleCompositionEnd = useCallback((e) => {
+        isComposingRef.current = false;
+        // mark to swallow the next keyup (IE/FF/Safari) or 229 keydown (Safari)
+        justEndedRef.current = true;
+        userCompEnd === null || userCompEnd === void 0 ? void 0 : userCompEnd(e);
+    }, [userCompEnd]);
+    // --- keydown (capture phase) ---
+    const handleKeyDownCapture = useCallback((e) => {
+        // 1) swallow all keys during IME composition
+        if (isComposingRef.current) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        // 2) swallow that spurious 229‐keydown right after compositionend
+        if (justEndedRef.current) {
+            if (e.which === 229) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            // a real key => clear the flag and let it through
+            justEndedRef.current = false;
+        }
+        // do *not* call userKeyDown here
+    }, []);
+    // --- keydown (bubble phase) ---
+    const handleKeyDown = useCallback((e) => {
+        // simply short-circuit while IME composing
+        if (isComposingRef.current) {
+            return;
+        }
+        userKeyDown === null || userKeyDown === void 0 ? void 0 : userKeyDown(e);
+    }, [userKeyDown]);
+    // --- keyup (capture phase) ---
+    const handleKeyUpCapture = useCallback((e) => {
+        // swallow all keyups during composition
+        // or the one immediately after compositionend
+        if (isComposingRef.current || justEndedRef.current) {
+            justEndedRef.current = false;
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        // do *not* call userKeyUp
+    }, []);
+    // --- keyup (bubble phase) ---
+    const handleKeyUp = useCallback((e) => {
+        // short-circuit any leftover composition noise
+        if (isComposingRef.current || justEndedRef.current) {
+            justEndedRef.current = false;
+            return;
+        }
+        userKeyUp === null || userKeyUp === void 0 ? void 0 : userKeyUp(e);
+    }, [userKeyUp]);
+    return {
+        onCompositionStart: handleCompositionStart,
+        onCompositionEnd: handleCompositionEnd,
+        onKeyDownCapture: handleKeyDownCapture,
+        onKeyDown: handleKeyDown,
+        onKeyUpCapture: handleKeyUpCapture,
+        onKeyUp: handleKeyUp,
+    };
+}
+export default useIMEEnter;
+//# sourceMappingURL=use-ime.js.map

package/dist/use-ime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-ime.js","sourceRoot":"","sources":["../src/use-ime.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@darajs/ui-utils",
-  "version": "1.16.21",
+  "version": "1.16.23",
   "description": "General utilities for the Dara UI framework",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -20,9 +20,9 @@
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
-    "@darajs/eslint-config": "1.16.21",
-    "@darajs/prettier-config": "1.16.21",
-    "@darajs/stylelint-config": "1.16.21",
+    "@darajs/eslint-config": "1.16.23",
+    "@darajs/prettier-config": "1.16.23",
+    "@darajs/stylelint-config": "1.16.23",
     "@types/jest": "^25.2.3",
     "@types/lodash": "^4.14.155",
     "@types/react": "^18.0",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d5dc2b19b720cff015a1fe845b28ff4c31a52467"
+  "gitHead": "9d1d96c633bde8fead99715318f32082282c4a50"
 }