@rc-component/util 1.7.0 → 1.8.0

package/es/Portal.js

@@ -7,8 +7,8 @@ const Portal = /*#__PURE__*/forwardRef((props, ref) => {
     getContainer,
     children
   } = props;
-  const parentRef = useRef();
-  const containerRef = useRef();
+  const parentRef = useRef(null);
+  const containerRef = useRef(null);
 
   // Ref return nothing, only for wrapper check exist
   useImperativeHandle(ref, () => ({}));

package/es/getScrollBarSize.d.ts

@@ -1,5 +1,7 @@
-export default function getScrollBarSize(fresh?: boolean): number;
-export declare function getTargetScrollBarSize(target: HTMLElement): {
+type ScrollBarSize = {
     width: number;
     height: number;
 };
+export default function getScrollBarSize(fresh?: boolean): number;
+export declare function getTargetScrollBarSize(target: HTMLElement): ScrollBarSize;
+export {};

package/es/hooks/useEffect.d.ts

@@ -1,2 +1,3 @@
 /** As `React.useEffect` but pass origin value in callback and not need care deps length change. */
-export default function useEffect(callback: (prevDeps: any[]) => void, deps: any[]): void;
+declare function useEffect(callback: (prevDeps: any[]) => void, deps: any[]): void;
+export default useEffect;

package/es/hooks/useEffect.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 /** As `React.useEffect` but pass origin value in callback and not need care deps length change. */
-export default function useEffect(callback, deps) {
+function useEffect(callback, deps) {
   const prevRef = React.useRef(deps);
   React.useEffect(() => {
     if (deps.length !== prevRef.current.length || deps.some((dep, index) => dep !== prevRef.current[index])) {
@@ -9,4 +9,5 @@ export default function useEffect(callback, deps) {
     }
     prevRef.current = deps;
   });
-}
+}
+export default useEffect;

package/es/hooks/useId.d.ts

@@ -1,4 +1,12 @@
 /** @private Note only worked in develop env. Not work in production. */
 export declare function resetUuid(): void;
+/**
+ * Generate a valid HTML id from prefix and key.
+ * Sanitizes the key by replacing invalid characters with hyphens.
+ * @param prefix - The prefix for the id
+ * @param key - The key from React element, may contain spaces or invalid characters
+ * @returns A valid HTML id string
+ */
+export declare function getId(prefix: string, key: string): string;
 declare const _default: (id?: string) => string;
 export default _default;

package/es/hooks/useId.js

@@ -14,6 +14,20 @@ export function resetUuid() {
     uuid = 0;
   }
 }
+
+/**
+ * Generate a valid HTML id from prefix and key.
+ * Sanitizes the key by replacing invalid characters with hyphens.
+ * @param prefix - The prefix for the id
+ * @param key - The key from React element, may contain spaces or invalid characters
+ * @returns A valid HTML id string
+ */
+export function getId(prefix, key) {
+  // Valid id characters: letters, digits, hyphen, underscore, colon, period
+  // Replace all invalid characters (including spaces) with hyphens to preserve length
+  const sanitizedKey = key.replace(/[^a-zA-Z0-9_.:-]/g, '-');
+  return `${prefix}-${sanitizedKey}`;
+}
 const useOriginId = getUseId();
 export default useOriginId ?
 // Use React `useId`

package/es/hooks/useState.d.ts

@@ -10,5 +10,5 @@ ignoreDestroy?: boolean) => void;
  * We do not make this auto is to avoid real memory leak.
  * Developer should confirm it's safe to ignore themselves.
  */
-export default function useSafeState<T>(defaultValue?: T | (() => T)): [T, SetState<T>];
-export {};
+declare const useSafeState: <T>(defaultValue?: T | (() => T)) => [T, SetState<T>];
+export default useSafeState;

package/es/hooks/useState.js

@@ -4,7 +4,7 @@ import * as React from 'react';
  * We do not make this auto is to avoid real memory leak.
  * Developer should confirm it's safe to ignore themselves.
  */
-export default function useSafeState(defaultValue) {
+const useSafeState = defaultValue => {
   const destroyRef = React.useRef(false);
   const [value, setValue] = React.useState(defaultValue);
   React.useEffect(() => {
@@ -20,4 +20,5 @@ export default function useSafeState(defaultValue) {
     setValue(updater);
   }
   return [value, safeSetState];
-}
+};
+export default useSafeState;

package/es/hooks/useSyncState.d.ts

@@ -5,5 +5,5 @@ export type SetState<T> = (nextValue: Updater<T>) => void;
  * This is useful when React merge multiple state updates into one.
  * e.g. onTransitionEnd trigger multiple event at once will be merged state update in React.
  */
-export default function useSyncState<T>(defaultValue?: T): [get: () => T, set: SetState<T>];
-export {};
+declare function useSyncState<T>(defaultValue?: T): [get: () => T, set: SetState<T>];
+export default useSyncState;

package/es/hooks/useSyncState.js

@@ -5,7 +5,7 @@ import useEvent from "./useEvent";
  * This is useful when React merge multiple state updates into one.
  * e.g. onTransitionEnd trigger multiple event at once will be merged state update in React.
  */
-export default function useSyncState(defaultValue) {
+function useSyncState(defaultValue) {
   const [, forceUpdate] = React.useReducer(x => x + 1, 0);
   const currentValueRef = React.useRef(defaultValue);
   const getValue = useEvent(() => {
@@ -16,4 +16,5 @@ export default function useSyncState(defaultValue) {
     forceUpdate();
   });
   return [getValue, setValue];
-}
+}
+export default useSyncState;

package/es/ref.d.ts

@@ -9,7 +9,7 @@ export declare const supportRef: (nodeOrComponent: any) => boolean;
 interface RefAttributes<T> extends React.Attributes {
     ref: React.Ref<T>;
 }
-export declare const supportNodeRef: <T = any>(node: React.ReactNode) => node is React.ReactElement<any, string | React.JSXElementConstructor<any>> & RefAttributes<T>;
+export declare const supportNodeRef: <T = any>(node: React.ReactNode) => node is React.ReactElement<unknown, string | React.JSXElementConstructor<any>> & RefAttributes<T>;
 /**
  * In React 19. `ref` is not a property from node.
  * But a property from `props.ref`.

package/lib/Portal.js

@@ -14,8 +14,8 @@ const Portal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     getContainer,
     children
   } = props;
-  const parentRef = (0, _react.useRef)();
-  const containerRef = (0, _react.useRef)();
+  const parentRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
 
   // Ref return nothing, only for wrapper check exist
   (0, _react.useImperativeHandle)(ref, () => ({}));

package/lib/getScrollBarSize.d.ts

@@ -1,5 +1,7 @@
-export default function getScrollBarSize(fresh?: boolean): number;
-export declare function getTargetScrollBarSize(target: HTMLElement): {
+type ScrollBarSize = {
     width: number;
     height: number;
 };
+export default function getScrollBarSize(fresh?: boolean): number;
+export declare function getTargetScrollBarSize(target: HTMLElement): ScrollBarSize;
+export {};

package/lib/hooks/useEffect.d.ts

@@ -1,2 +1,3 @@
 /** As `React.useEffect` but pass origin value in callback and not need care deps length change. */
-export default function useEffect(callback: (prevDeps: any[]) => void, deps: any[]): void;
+declare function useEffect(callback: (prevDeps: any[]) => void, deps: any[]): void;
+export default useEffect;

package/lib/hooks/useEffect.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useEffect;
+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; }
@@ -16,4 +16,5 @@ function useEffect(callback, deps) {
     }
     prevRef.current = deps;
   });
-}
+}
+var _default = exports.default = useEffect;

package/lib/hooks/useId.d.ts

@@ -1,4 +1,12 @@
 /** @private Note only worked in develop env. Not work in production. */
 export declare function resetUuid(): void;
+/**
+ * Generate a valid HTML id from prefix and key.
+ * Sanitizes the key by replacing invalid characters with hyphens.
+ * @param prefix - The prefix for the id
+ * @param key - The key from React element, may contain spaces or invalid characters
+ * @returns A valid HTML id string
+ */
+export declare function getId(prefix: string, key: string): string;
 declare const _default: (id?: string) => string;
 export default _default;

package/lib/hooks/useId.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.getId = getId;
 exports.resetUuid = resetUuid;
 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); }
@@ -23,6 +24,20 @@ function resetUuid() {
     uuid = 0;
   }
 }
+
+/**
+ * Generate a valid HTML id from prefix and key.
+ * Sanitizes the key by replacing invalid characters with hyphens.
+ * @param prefix - The prefix for the id
+ * @param key - The key from React element, may contain spaces or invalid characters
+ * @returns A valid HTML id string
+ */
+function getId(prefix, key) {
+  // Valid id characters: letters, digits, hyphen, underscore, colon, period
+  // Replace all invalid characters (including spaces) with hyphens to preserve length
+  const sanitizedKey = key.replace(/[^a-zA-Z0-9_.:-]/g, '-');
+  return `${prefix}-${sanitizedKey}`;
+}
 const useOriginId = getUseId();
 var _default = exports.default = useOriginId ?
 // Use React `useId`

package/lib/hooks/useState.d.ts

@@ -10,5 +10,5 @@ ignoreDestroy?: boolean) => void;
  * We do not make this auto is to avoid real memory leak.
  * Developer should confirm it's safe to ignore themselves.
  */
-export default function useSafeState<T>(defaultValue?: T | (() => T)): [T, SetState<T>];
-export {};
+declare const useSafeState: <T>(defaultValue?: T | (() => T)) => [T, SetState<T>];
+export default useSafeState;

package/lib/hooks/useState.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useSafeState;
+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; }
@@ -12,7 +12,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * We do not make this auto is to avoid real memory leak.
  * Developer should confirm it's safe to ignore themselves.
  */
-function useSafeState(defaultValue) {
+const useSafeState = defaultValue => {
   const destroyRef = React.useRef(false);
   const [value, setValue] = React.useState(defaultValue);
   React.useEffect(() => {
@@ -28,4 +28,5 @@ function useSafeState(defaultValue) {
     setValue(updater);
   }
   return [value, safeSetState];
-}
+};
+var _default = exports.default = useSafeState;

package/lib/hooks/useSyncState.d.ts

@@ -5,5 +5,5 @@ export type SetState<T> = (nextValue: Updater<T>) => void;
  * This is useful when React merge multiple state updates into one.
  * e.g. onTransitionEnd trigger multiple event at once will be merged state update in React.
  */
-export default function useSyncState<T>(defaultValue?: T): [get: () => T, set: SetState<T>];
-export {};
+declare function useSyncState<T>(defaultValue?: T): [get: () => T, set: SetState<T>];
+export default useSyncState;

package/lib/hooks/useSyncState.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useSyncState;
+exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useEvent = _interopRequireDefault(require("./useEvent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,4 +25,5 @@ function useSyncState(defaultValue) {
     forceUpdate();
   });
   return [getValue, setValue];
-}
+}
+var _default = exports.default = useSyncState;

package/lib/ref.d.ts

@@ -9,7 +9,7 @@ export declare const supportRef: (nodeOrComponent: any) => boolean;
 interface RefAttributes<T> extends React.Attributes {
     ref: React.Ref<T>;
 }
-export declare const supportNodeRef: <T = any>(node: React.ReactNode) => node is React.ReactElement<any, string | React.JSXElementConstructor<any>> & RefAttributes<T>;
+export declare const supportNodeRef: <T = any>(node: React.ReactNode) => node is React.ReactElement<unknown, string | React.JSXElementConstructor<any>> & RefAttributes<T>;
 /**
  * In React 19. `ref` is not a property from node.
  * But a property from `props.ref`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/util",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Common Utils For React Component",
   "keywords": [
     "react",
@@ -47,13 +47,13 @@
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.6.1",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.2",
     "@types/react-is": "^19.0.0",
     "@types/responselike": "^1.0.0",
     "@types/warning": "^3.0.0",
     "@umijs/fabric": "^3.0.0",
-    "cross-env": "^7.0.2",
+    "cross-env": "^10.1.0",
     "dumi": "^2.1.3",
     "eslint": "^8.54.0",
     "eslint-plugin-jest": "^29.0.1",