@rc-component/util 1.8.2 → 1.10.0

package/README.md

@@ -13,8 +13,8 @@ Common Utils For React Component.
 [npm-url]: http://npmjs.org/package/rc-util
 [travis-image]: https://img.shields.io/travis/react-component/util/master?style=flat-square
 [travis-url]: https://travis-ci.com/react-component/util
-[github-actions-image]: https://github.com/react-component/util/workflows/CI/badge.svg
-[github-actions-url]: https://github.com/react-component/util/actions
+[github-actions-image]: https://github.com/react-component/util/actions/workflows/react-component-ci.yml/badge.svg
+[github-actions-url]: https://github.com/react-component/util/actions/workflows/react-component-ci.yml
 [codecov-image]: https://img.shields.io/codecov/c/github/react-component/util/master.svg?style=flat-square
 [codecov-url]: https://app.codecov.io/gh/react-component/util
 [david-url]: https://david-dm.org/react-component/util

package/es/Dom/focus.d.ts

@@ -9,11 +9,13 @@ export declare function triggerFocus(element?: HTMLElement, option?: InputFocusO
 /**
  * Lock focus in the element.
  * It will force back to the first focusable element when focus leaves the element.
+ * @param id - A stable ID for this lock instance
  */
-export declare function lockFocus(element: HTMLElement): VoidFunction;
+export declare function lockFocus(element: HTMLElement, id: string): VoidFunction;
 /**
  * Lock focus within an element.
  * When locked, focus will be restricted to focusable elements within the specified element.
  * If multiple elements are locked, only the last locked element will be effective.
+ * @returns A function to mark an element as ignored, which will temporarily allow focus on that element even if it's outside the locked area.
  */
-export declare function useLockFocus(lock: boolean, getElement: () => HTMLElement | null): void;
+export declare function useLockFocus(lock: boolean, getElement: () => HTMLElement | null): [ignoreElement: (ele: HTMLElement) => void];

package/es/Dom/focus.js

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import isVisible from "./isVisible";
+import useId from "../hooks/useId";
 function focusable(node, includePositive = false) {
   if (isVisible(node)) {
     const nodeName = node.nodeName.toLowerCase();
@@ -72,9 +73,29 @@ export function triggerFocus(element, option) {
 // ======================================================
 let lastFocusElement = null;
 let focusElements = [];
+// Map stable ID to lock element
+const idToElementMap = new Map();
+// Map stable ID to ignored element
+const ignoredElementMap = new Map();
 function getLastElement() {
   return focusElements[focusElements.length - 1];
 }
+function isIgnoredElement(element) {
+  const lastElement = getLastElement();
+  if (element && lastElement) {
+    // Find the ID that maps to the last element
+    let lockId;
+    for (const [id, ele] of idToElementMap.entries()) {
+      if (ele === lastElement) {
+        lockId = id;
+        break;
+      }
+    }
+    const ignoredEle = ignoredElementMap.get(lockId);
+    return !!ignoredEle && (ignoredEle === element || ignoredEle.contains(element));
+  }
+  return false;
+}
 function hasFocus(element) {
   const {
     activeElement
@@ -86,6 +107,11 @@ function syncFocus() {
   const {
     activeElement
   } = document;
+
+  // If current focus is on an ignored element, don't force it back
+  if (isIgnoredElement(activeElement)) {
+    return;
+  }
   if (lastElement && !hasFocus(lastElement)) {
     const focusableList = getFocusNodeList(lastElement);
     const matchElement = focusableList.includes(lastFocusElement) ? lastFocusElement : focusableList[0];
@@ -117,9 +143,13 @@ function onWindowKeyDown(e) {
 /**
  * Lock focus in the element.
  * It will force back to the first focusable element when focus leaves the element.
+ * @param id - A stable ID for this lock instance
  */
-export function lockFocus(element) {
+export function lockFocus(element, id) {
   if (element) {
+    // Store the mapping between ID and element
+    idToElementMap.set(id, element);
+
     // Refresh focus elements
     focusElements = focusElements.filter(ele => ele !== element);
     focusElements.push(element);
@@ -134,6 +164,8 @@ export function lockFocus(element) {
   return () => {
     lastFocusElement = null;
     focusElements = focusElements.filter(ele => ele !== element);
+    idToElementMap.delete(id);
+    ignoredElementMap.delete(id);
     if (focusElements.length === 0) {
       window.removeEventListener('focusin', syncFocus);
       window.removeEventListener('keydown', onWindowKeyDown, true);
@@ -145,14 +177,23 @@ export function lockFocus(element) {
  * Lock focus within an element.
  * When locked, focus will be restricted to focusable elements within the specified element.
  * If multiple elements are locked, only the last locked element will be effective.
+ * @returns A function to mark an element as ignored, which will temporarily allow focus on that element even if it's outside the locked area.
  */
 export function useLockFocus(lock, getElement) {
+  const id = useId();
   useEffect(() => {
     if (lock) {
       const element = getElement();
       if (element) {
-        return lockFocus(element);
+        return lockFocus(element, id);
       }
     }
-  }, [lock]);
+  }, [lock, id]);
+  const ignoreElement = ele => {
+    if (ele) {
+      // Set the ignored element using stable ID
+      ignoredElementMap.set(id, ele);
+    }
+  };
+  return [ignoreElement];
 }

package/es/getScrollBarSize.js

@@ -49,8 +49,8 @@ ${heightStyle}
   document.body.appendChild(measureEle);
 
   // Measure. Get fallback style if provided
-  const scrollWidth = ele && fallbackWidth && !isNaN(fallbackWidth) ? fallbackWidth : measureEle.offsetWidth - measureEle.clientWidth;
-  const scrollHeight = ele && fallbackHeight && !isNaN(fallbackHeight) ? fallbackHeight : measureEle.offsetHeight - measureEle.clientHeight;
+  const scrollWidth = ele && fallbackWidth && !Number.isNaN(fallbackWidth) ? fallbackWidth : measureEle.offsetWidth - measureEle.clientWidth;
+  const scrollHeight = ele && fallbackHeight && !Number.isNaN(fallbackHeight) ? fallbackHeight : measureEle.offsetHeight - measureEle.clientHeight;
 
   // Clean up
   document.body.removeChild(measureEle);

package/es/hooks/useEvent.d.ts

@@ -1,2 +1,2 @@
-declare function useEvent<T extends ((...args: any[]) => any) | undefined>(callback: T): undefined extends T ? (...args: Parameters<NonNullable<T>>) => ReturnType<NonNullable<T>> | undefined : T;
+declare const useEvent: <T extends (...args: any[]) => any>(callback: T) => undefined extends T ? (...args: Parameters<NonNullable<T>>) => ReturnType<NonNullable<T>> | undefined : T;
 export default useEvent;

package/es/hooks/useEvent.js

@@ -1,10 +1,8 @@
-/* eslint-disable @typescript-eslint/ban-types */
-/* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-function useEvent(callback) {
+const useEvent = callback => {
   const fnRef = React.useRef(callback);
   fnRef.current = callback;
   const memoFn = React.useCallback((...args) => fnRef.current?.(...args), []);
   return memoFn;
-}
+};
 export default useEvent;

package/es/index.d.ts

@@ -7,3 +7,4 @@ export { default as set, merge, mergeWith } from './utils/set';
 export { default as warning, noteOnce } from './warning';
 export { default as omit } from './omit';
 export { default as toArray } from './Children/toArray';
+export { default as mergeProps } from './mergeProps';

package/es/index.js

@@ -6,4 +6,5 @@ export { default as get } from "./utils/get";
 export { default as set, merge, mergeWith } from "./utils/set";
 export { default as warning, noteOnce } from "./warning";
 export { default as omit } from "./omit";
-export { default as toArray } from "./Children/toArray";
+export { default as toArray } from "./Children/toArray";
+export { default as mergeProps } from "./mergeProps";

package/es/isMobile.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => boolean;
-export default _default;
+declare const getIsMobile: () => boolean;
+export default getIsMobile;

package/es/isMobile.js

@@ -1,8 +1,9 @@
 import isMobile from 'is-mobile';
 let cached;
-export default (() => {
+const getIsMobile = () => {
   if (typeof cached === 'undefined') {
     cached = isMobile();
   }
   return cached;
-});
+};
+export default getIsMobile;

package/es/mergeProps.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Merges multiple props objects into one. Unlike `Object.assign()` or `{ ...a, ...b }`, it skips
+ * properties whose value is explicitly set to `undefined`.
+ */
+declare function mergeProps<A, B>(a: A, b: B): B & A;
+declare function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;
+declare function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A;
+export default mergeProps;

package/es/mergeProps.js

@@ -0,0 +1,19 @@
+/**
+ * Merges multiple props objects into one. Unlike `Object.assign()` or `{ ...a, ...b }`, it skips
+ * properties whose value is explicitly set to `undefined`.
+ */
+
+function mergeProps(...items) {
+  const ret = {};
+  for (const item of items) {
+    if (item) {
+      for (const key of Object.keys(item)) {
+        if (item[key] !== undefined) {
+          ret[key] = item[key];
+        }
+      }
+    }
+  }
+  return ret;
+}
+export default mergeProps;

package/lib/Dom/focus.d.ts

@@ -9,11 +9,13 @@ export declare function triggerFocus(element?: HTMLElement, option?: InputFocusO
 /**
  * Lock focus in the element.
  * It will force back to the first focusable element when focus leaves the element.
+ * @param id - A stable ID for this lock instance
  */
-export declare function lockFocus(element: HTMLElement): VoidFunction;
+export declare function lockFocus(element: HTMLElement, id: string): VoidFunction;
 /**
  * Lock focus within an element.
  * When locked, focus will be restricted to focusable elements within the specified element.
  * If multiple elements are locked, only the last locked element will be effective.
+ * @returns A function to mark an element as ignored, which will temporarily allow focus on that element even if it's outside the locked area.
  */
-export declare function useLockFocus(lock: boolean, getElement: () => HTMLElement | null): void;
+export declare function useLockFocus(lock: boolean, getElement: () => HTMLElement | null): [ignoreElement: (ele: HTMLElement) => void];

package/lib/Dom/focus.js

@@ -9,6 +9,7 @@ exports.triggerFocus = triggerFocus;
 exports.useLockFocus = useLockFocus;
 var _react = require("react");
 var _isVisible = _interopRequireDefault(require("./isVisible"));
+var _useId = _interopRequireDefault(require("../hooks/useId"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function focusable(node, includePositive = false) {
   if ((0, _isVisible.default)(node)) {
@@ -82,9 +83,29 @@ function triggerFocus(element, option) {
 // ======================================================
 let lastFocusElement = null;
 let focusElements = [];
+// Map stable ID to lock element
+const idToElementMap = new Map();
+// Map stable ID to ignored element
+const ignoredElementMap = new Map();
 function getLastElement() {
   return focusElements[focusElements.length - 1];
 }
+function isIgnoredElement(element) {
+  const lastElement = getLastElement();
+  if (element && lastElement) {
+    // Find the ID that maps to the last element
+    let lockId;
+    for (const [id, ele] of idToElementMap.entries()) {
+      if (ele === lastElement) {
+        lockId = id;
+        break;
+      }
+    }
+    const ignoredEle = ignoredElementMap.get(lockId);
+    return !!ignoredEle && (ignoredEle === element || ignoredEle.contains(element));
+  }
+  return false;
+}
 function hasFocus(element) {
   const {
     activeElement
@@ -96,6 +117,11 @@ function syncFocus() {
   const {
     activeElement
   } = document;
+
+  // If current focus is on an ignored element, don't force it back
+  if (isIgnoredElement(activeElement)) {
+    return;
+  }
   if (lastElement && !hasFocus(lastElement)) {
     const focusableList = getFocusNodeList(lastElement);
     const matchElement = focusableList.includes(lastFocusElement) ? lastFocusElement : focusableList[0];
@@ -127,9 +153,13 @@ function onWindowKeyDown(e) {
 /**
  * Lock focus in the element.
  * It will force back to the first focusable element when focus leaves the element.
+ * @param id - A stable ID for this lock instance
  */
-function lockFocus(element) {
+function lockFocus(element, id) {
   if (element) {
+    // Store the mapping between ID and element
+    idToElementMap.set(id, element);
+
     // Refresh focus elements
     focusElements = focusElements.filter(ele => ele !== element);
     focusElements.push(element);
@@ -144,6 +174,8 @@ function lockFocus(element) {
   return () => {
     lastFocusElement = null;
     focusElements = focusElements.filter(ele => ele !== element);
+    idToElementMap.delete(id);
+    ignoredElementMap.delete(id);
     if (focusElements.length === 0) {
       window.removeEventListener('focusin', syncFocus);
       window.removeEventListener('keydown', onWindowKeyDown, true);
@@ -155,14 +187,23 @@ function lockFocus(element) {
  * Lock focus within an element.
  * When locked, focus will be restricted to focusable elements within the specified element.
  * If multiple elements are locked, only the last locked element will be effective.
+ * @returns A function to mark an element as ignored, which will temporarily allow focus on that element even if it's outside the locked area.
  */
 function useLockFocus(lock, getElement) {
+  const id = (0, _useId.default)();
   (0, _react.useEffect)(() => {
     if (lock) {
       const element = getElement();
       if (element) {
-        return lockFocus(element);
+        return lockFocus(element, id);
       }
     }
-  }, [lock]);
+  }, [lock, id]);
+  const ignoreElement = ele => {
+    if (ele) {
+      // Set the ignored element using stable ID
+      ignoredElementMap.set(id, ele);
+    }
+  };
+  return [ignoreElement];
 }

package/lib/getScrollBarSize.js

@@ -57,8 +57,8 @@ ${heightStyle}
   document.body.appendChild(measureEle);
 
   // Measure. Get fallback style if provided
-  const scrollWidth = ele && fallbackWidth && !isNaN(fallbackWidth) ? fallbackWidth : measureEle.offsetWidth - measureEle.clientWidth;
-  const scrollHeight = ele && fallbackHeight && !isNaN(fallbackHeight) ? fallbackHeight : measureEle.offsetHeight - measureEle.clientHeight;
+  const scrollWidth = ele && fallbackWidth && !Number.isNaN(fallbackWidth) ? fallbackWidth : measureEle.offsetWidth - measureEle.clientWidth;
+  const scrollHeight = ele && fallbackHeight && !Number.isNaN(fallbackHeight) ? fallbackHeight : measureEle.offsetHeight - measureEle.clientHeight;
 
   // Clean up
   document.body.removeChild(measureEle);

package/lib/hooks/useEvent.d.ts

@@ -1,2 +1,2 @@
-declare function useEvent<T extends ((...args: any[]) => any) | undefined>(callback: T): undefined extends T ? (...args: Parameters<NonNullable<T>>) => ReturnType<NonNullable<T>> | undefined : T;
+declare const useEvent: <T extends (...args: any[]) => any>(callback: T) => undefined extends T ? (...args: Parameters<NonNullable<T>>) => ReturnType<NonNullable<T>> | undefined : T;
 export default useEvent;

package/lib/hooks/useEvent.js

@@ -7,13 +7,10 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* eslint-disable @typescript-eslint/ban-types */
-/* eslint-disable react-hooks/exhaustive-deps */
-
-function useEvent(callback) {
+const useEvent = callback => {
   const fnRef = React.useRef(callback);
   fnRef.current = callback;
   const memoFn = React.useCallback((...args) => fnRef.current?.(...args), []);
   return memoFn;
-}
+};
 var _default = exports.default = useEvent;

package/lib/index.d.ts

@@ -7,3 +7,4 @@ export { default as set, merge, mergeWith } from './utils/set';
 export { default as warning, noteOnce } from './warning';
 export { default as omit } from './omit';
 export { default as toArray } from './Children/toArray';
+export { default as mergeProps } from './mergeProps';

package/lib/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "merge", {
     return _set.merge;
   }
 });
+Object.defineProperty(exports, "mergeProps", {
+  enumerable: true,
+  get: function () {
+    return _mergeProps.default;
+  }
+});
 Object.defineProperty(exports, "mergeWith", {
   enumerable: true,
   get: function () {
@@ -96,6 +102,7 @@ var _set = _interopRequireWildcard(require("./utils/set"));
 var _warning = _interopRequireWildcard(require("./warning"));
 var _omit = _interopRequireDefault(require("./omit"));
 var _toArray = _interopRequireDefault(require("./Children/toArray"));
+var _mergeProps = _interopRequireDefault(require("./mergeProps"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/isMobile.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => boolean;
-export default _default;
+declare const getIsMobile: () => boolean;
+export default getIsMobile;

package/lib/isMobile.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 var _isMobile = _interopRequireDefault(require("is-mobile"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 let cached;
-var _default = () => {
+const getIsMobile = () => {
   if (typeof cached === 'undefined') {
     cached = (0, _isMobile.default)();
   }
   return cached;
 };
-exports.default = _default;
+var _default = exports.default = getIsMobile;

package/lib/mergeProps.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Merges multiple props objects into one. Unlike `Object.assign()` or `{ ...a, ...b }`, it skips
+ * properties whose value is explicitly set to `undefined`.
+ */
+declare function mergeProps<A, B>(a: A, b: B): B & A;
+declare function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;
+declare function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A;
+export default mergeProps;

package/lib/mergeProps.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Merges multiple props objects into one. Unlike `Object.assign()` or `{ ...a, ...b }`, it skips
+ * properties whose value is explicitly set to `undefined`.
+ */
+
+function mergeProps(...items) {
+  const ret = {};
+  for (const item of items) {
+    if (item) {
+      for (const key of Object.keys(item)) {
+        if (item[key] !== undefined) {
+          ret[key] = item[key];
+        }
+      }
+    }
+  }
+  return ret;
+}
+var _default = exports.default = mergeProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/util",
-  "version": "1.8.2",
+  "version": "1.10.0",
   "description": "Common Utils For React Component",
   "keywords": [
     "react",
@@ -46,7 +46,7 @@
     "@rc-component/np": "^1.0.3",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.6.1",
+    "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.2",
     "@types/react-is": "^19.0.0",
@@ -59,9 +59,9 @@
     "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-unicorn": "^56.0.1",
     "father": "^4.1.3",
-    "glob": "^11.0.3",
+    "glob": "^13.0.0",
     "husky": "^9.1.6",
-    "lint-staged": "^15.1.0",
+    "lint-staged": "^16.2.7",
     "prettier": "^3.3.2",
     "rc-test": "^7.0.14",
     "react": "^18.0.0",