@rc-component/util 1.10.0 → 1.11.0

package/es/Dom/focus.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import isVisible from "./isVisible";
 import useId from "../hooks/useId";
 function focusable(node, includePositive = false) {
@@ -173,6 +173,30 @@ export function lockFocus(element, id) {
   };
 }
 
+/**
+ * Retry an effect until it reports ready.
+ * When `ready` is `false`, it will schedule one more effect cycle and call `func` again
+ * with the next `retryTimes`.
+ */
+
+function useRetryEffect(func, deps) {
+  /* eslint-disable react-hooks/exhaustive-deps */
+  const retryTimesRef = useRef(0);
+  const [retryMark, setRetryMark] = useState(0);
+  useEffect(() => {
+    retryTimesRef.current = 0;
+  }, deps);
+  useEffect(() => {
+    const [clearFn, ready] = func(retryTimesRef.current);
+    if (!ready) {
+      retryTimesRef.current += 1;
+      setRetryMark(count => count + 1);
+    }
+    return clearFn;
+  }, [...deps, retryMark]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+}
+
 /**
  * Lock focus within an element.
  * When locked, focus will be restricted to focusable elements within the specified element.
@@ -181,14 +205,19 @@ export function lockFocus(element, id) {
  */
 export function useLockFocus(lock, getElement) {
   const id = useId();
-  useEffect(() => {
-    if (lock) {
-      const element = getElement();
-      if (element) {
-        return lockFocus(element, id);
-      }
+  const getElementRef = useRef(getElement);
+  getElementRef.current = getElement;
+  const lockEffect = retryTimes => {
+    if (!lock) {
+      return [undefined, true];
+    }
+    const element = getElementRef.current();
+    if (element) {
+      return [lockFocus(element, id), true];
     }
-  }, [lock, id]);
+    return [undefined, retryTimes >= 1];
+  };
+  useRetryEffect(lockEffect, [id, lock]);
   const ignoreElement = ele => {
     if (ele) {
       // Set the ignored element using stable ID

package/es/index.d.ts

@@ -1,10 +1,31 @@
 export { default as useEvent } from './hooks/useEvent';
 export { default as useMergedState } from './hooks/useMergedState';
 export { default as useControlledState } from './hooks/useControlledState';
-export { supportNodeRef, supportRef, useComposeRef } from './ref';
-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 useId, getId } from './hooks/useId';
+export { default as useLayoutEffect, useLayoutUpdateEffect, } from './hooks/useLayoutEffect';
+export { default as useMemo } from './hooks/useMemo';
+export { default as useState } from './hooks/useState';
+export { default as useSyncState } from './hooks/useSyncState';
+export { composeRef, fillRef, getNodeRef, supportNodeRef, supportRef, useComposeRef, } from './ref';
+export { default as canUseDom } from './Dom/canUseDom';
+export { default as contains } from './Dom/contains';
+export { injectCSS, removeCSS, updateCSS } from './Dom/dynamicCSS';
+export { getDOM, isDOM } from './Dom/findDOMNode';
+export { getFocusNodeList, lockFocus, triggerFocus, useLockFocus, } from './Dom/focus';
+export type { InputFocusOptions } from './Dom/focus';
+export { default as isVisible } from './Dom/isVisible';
+export { getShadowRoot } from './Dom/shadow';
+export { default as KeyCode } from './KeyCode';
+export { default as getScrollBarSize, getTargetScrollBarSize, } from './getScrollBarSize';
+export { default as isEqual } from './isEqual';
+export { default as isMobile } from './isMobile';
 export { default as omit } from './omit';
+export { default as pickAttrs } from './pickAttrs';
+export { default as proxyObject } from './proxyObject';
+export { default as raf } from './raf';
 export { default as toArray } from './Children/toArray';
 export { default as mergeProps } from './mergeProps';
+export { default as get } from './utils/get';
+export { default as set, merge, mergeWith } from './utils/set';
+export { default as warning, noteOnce } from './warning';
+export type { GetContainer } from './PortalWrapper';

package/es/index.js

@@ -1,10 +1,29 @@
 export { default as useEvent } from "./hooks/useEvent";
 export { default as useMergedState } from "./hooks/useMergedState";
 export { default as useControlledState } from "./hooks/useControlledState";
-export { supportNodeRef, supportRef, useComposeRef } from "./ref";
-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 useId, getId } from "./hooks/useId";
+export { default as useLayoutEffect, useLayoutUpdateEffect } from "./hooks/useLayoutEffect";
+export { default as useMemo } from "./hooks/useMemo";
+export { default as useState } from "./hooks/useState";
+export { default as useSyncState } from "./hooks/useSyncState";
+export { composeRef, fillRef, getNodeRef, supportNodeRef, supportRef, useComposeRef } from "./ref";
+export { default as canUseDom } from "./Dom/canUseDom";
+export { default as contains } from "./Dom/contains";
+export { injectCSS, removeCSS, updateCSS } from "./Dom/dynamicCSS";
+export { getDOM, isDOM } from "./Dom/findDOMNode";
+export { getFocusNodeList, lockFocus, triggerFocus, useLockFocus } from "./Dom/focus";
+export { default as isVisible } from "./Dom/isVisible";
+export { getShadowRoot } from "./Dom/shadow";
+export { default as KeyCode } from "./KeyCode";
+export { default as getScrollBarSize, getTargetScrollBarSize } from "./getScrollBarSize";
+export { default as isEqual } from "./isEqual";
+export { default as isMobile } from "./isMobile";
 export { default as omit } from "./omit";
+export { default as pickAttrs } from "./pickAttrs";
+export { default as proxyObject } from "./proxyObject";
+export { default as raf } from "./raf";
 export { default as toArray } from "./Children/toArray";
-export { default as mergeProps } from "./mergeProps";
+export { default as mergeProps } from "./mergeProps";
+export { default as get } from "./utils/get";
+export { default as set, merge, mergeWith } from "./utils/set";
+export { default as warning, noteOnce } from "./warning";

package/lib/Dom/focus.js

@@ -183,6 +183,30 @@ function lockFocus(element, id) {
   };
 }
 
+/**
+ * Retry an effect until it reports ready.
+ * When `ready` is `false`, it will schedule one more effect cycle and call `func` again
+ * with the next `retryTimes`.
+ */
+
+function useRetryEffect(func, deps) {
+  /* eslint-disable react-hooks/exhaustive-deps */
+  const retryTimesRef = (0, _react.useRef)(0);
+  const [retryMark, setRetryMark] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    retryTimesRef.current = 0;
+  }, deps);
+  (0, _react.useEffect)(() => {
+    const [clearFn, ready] = func(retryTimesRef.current);
+    if (!ready) {
+      retryTimesRef.current += 1;
+      setRetryMark(count => count + 1);
+    }
+    return clearFn;
+  }, [...deps, retryMark]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+}
+
 /**
  * Lock focus within an element.
  * When locked, focus will be restricted to focusable elements within the specified element.
@@ -191,14 +215,19 @@ function lockFocus(element, id) {
  */
 function useLockFocus(lock, getElement) {
   const id = (0, _useId.default)();
-  (0, _react.useEffect)(() => {
-    if (lock) {
-      const element = getElement();
-      if (element) {
-        return lockFocus(element, id);
-      }
+  const getElementRef = (0, _react.useRef)(getElement);
+  getElementRef.current = getElement;
+  const lockEffect = retryTimes => {
+    if (!lock) {
+      return [undefined, true];
+    }
+    const element = getElementRef.current();
+    if (element) {
+      return [lockFocus(element, id), true];
     }
-  }, [lock, id]);
+    return [undefined, retryTimes >= 1];
+  };
+  useRetryEffect(lockEffect, [id, lock]);
   const ignoreElement = ele => {
     if (ele) {
       // Set the ignored element using stable ID

package/lib/index.d.ts

@@ -1,10 +1,31 @@
 export { default as useEvent } from './hooks/useEvent';
 export { default as useMergedState } from './hooks/useMergedState';
 export { default as useControlledState } from './hooks/useControlledState';
-export { supportNodeRef, supportRef, useComposeRef } from './ref';
-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 useId, getId } from './hooks/useId';
+export { default as useLayoutEffect, useLayoutUpdateEffect, } from './hooks/useLayoutEffect';
+export { default as useMemo } from './hooks/useMemo';
+export { default as useState } from './hooks/useState';
+export { default as useSyncState } from './hooks/useSyncState';
+export { composeRef, fillRef, getNodeRef, supportNodeRef, supportRef, useComposeRef, } from './ref';
+export { default as canUseDom } from './Dom/canUseDom';
+export { default as contains } from './Dom/contains';
+export { injectCSS, removeCSS, updateCSS } from './Dom/dynamicCSS';
+export { getDOM, isDOM } from './Dom/findDOMNode';
+export { getFocusNodeList, lockFocus, triggerFocus, useLockFocus, } from './Dom/focus';
+export type { InputFocusOptions } from './Dom/focus';
+export { default as isVisible } from './Dom/isVisible';
+export { getShadowRoot } from './Dom/shadow';
+export { default as KeyCode } from './KeyCode';
+export { default as getScrollBarSize, getTargetScrollBarSize, } from './getScrollBarSize';
+export { default as isEqual } from './isEqual';
+export { default as isMobile } from './isMobile';
 export { default as omit } from './omit';
+export { default as pickAttrs } from './pickAttrs';
+export { default as proxyObject } from './proxyObject';
+export { default as raf } from './raf';
 export { default as toArray } from './Children/toArray';
 export { default as mergeProps } from './mergeProps';
+export { default as get } from './utils/get';
+export { default as set, merge, mergeWith } from './utils/set';
+export { default as warning, noteOnce } from './warning';
+export type { GetContainer } from './PortalWrapper';

package/lib/index.js

@@ -3,12 +3,120 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "KeyCode", {
+  enumerable: true,
+  get: function () {
+    return _KeyCode.default;
+  }
+});
+Object.defineProperty(exports, "canUseDom", {
+  enumerable: true,
+  get: function () {
+    return _canUseDom.default;
+  }
+});
+Object.defineProperty(exports, "composeRef", {
+  enumerable: true,
+  get: function () {
+    return _ref.composeRef;
+  }
+});
+Object.defineProperty(exports, "contains", {
+  enumerable: true,
+  get: function () {
+    return _contains.default;
+  }
+});
+Object.defineProperty(exports, "fillRef", {
+  enumerable: true,
+  get: function () {
+    return _ref.fillRef;
+  }
+});
 Object.defineProperty(exports, "get", {
   enumerable: true,
   get: function () {
     return _get.default;
   }
 });
+Object.defineProperty(exports, "getDOM", {
+  enumerable: true,
+  get: function () {
+    return _findDOMNode.getDOM;
+  }
+});
+Object.defineProperty(exports, "getFocusNodeList", {
+  enumerable: true,
+  get: function () {
+    return _focus.getFocusNodeList;
+  }
+});
+Object.defineProperty(exports, "getId", {
+  enumerable: true,
+  get: function () {
+    return _useId.getId;
+  }
+});
+Object.defineProperty(exports, "getNodeRef", {
+  enumerable: true,
+  get: function () {
+    return _ref.getNodeRef;
+  }
+});
+Object.defineProperty(exports, "getScrollBarSize", {
+  enumerable: true,
+  get: function () {
+    return _getScrollBarSize.default;
+  }
+});
+Object.defineProperty(exports, "getShadowRoot", {
+  enumerable: true,
+  get: function () {
+    return _shadow.getShadowRoot;
+  }
+});
+Object.defineProperty(exports, "getTargetScrollBarSize", {
+  enumerable: true,
+  get: function () {
+    return _getScrollBarSize.getTargetScrollBarSize;
+  }
+});
+Object.defineProperty(exports, "injectCSS", {
+  enumerable: true,
+  get: function () {
+    return _dynamicCSS.injectCSS;
+  }
+});
+Object.defineProperty(exports, "isDOM", {
+  enumerable: true,
+  get: function () {
+    return _findDOMNode.isDOM;
+  }
+});
+Object.defineProperty(exports, "isEqual", {
+  enumerable: true,
+  get: function () {
+    return _isEqual.default;
+  }
+});
+Object.defineProperty(exports, "isMobile", {
+  enumerable: true,
+  get: function () {
+    return _isMobile.default;
+  }
+});
+Object.defineProperty(exports, "isVisible", {
+  enumerable: true,
+  get: function () {
+    return _isVisible.default;
+  }
+});
+Object.defineProperty(exports, "lockFocus", {
+  enumerable: true,
+  get: function () {
+    return _focus.lockFocus;
+  }
+});
 Object.defineProperty(exports, "merge", {
   enumerable: true,
   get: function () {
@@ -39,6 +147,30 @@ Object.defineProperty(exports, "omit", {
     return _omit.default;
   }
 });
+Object.defineProperty(exports, "pickAttrs", {
+  enumerable: true,
+  get: function () {
+    return _pickAttrs.default;
+  }
+});
+Object.defineProperty(exports, "proxyObject", {
+  enumerable: true,
+  get: function () {
+    return _proxyObject.default;
+  }
+});
+Object.defineProperty(exports, "raf", {
+  enumerable: true,
+  get: function () {
+    return _raf.default;
+  }
+});
+Object.defineProperty(exports, "removeCSS", {
+  enumerable: true,
+  get: function () {
+    return _dynamicCSS.removeCSS;
+  }
+});
 Object.defineProperty(exports, "set", {
   enumerable: true,
   get: function () {
@@ -63,6 +195,18 @@ Object.defineProperty(exports, "toArray", {
     return _toArray.default;
   }
 });
+Object.defineProperty(exports, "triggerFocus", {
+  enumerable: true,
+  get: function () {
+    return _focus.triggerFocus;
+  }
+});
+Object.defineProperty(exports, "updateCSS", {
+  enumerable: true,
+  get: function () {
+    return _dynamicCSS.updateCSS;
+  }
+});
 Object.defineProperty(exports, "useComposeRef", {
   enumerable: true,
   get: function () {
@@ -81,12 +225,54 @@ Object.defineProperty(exports, "useEvent", {
     return _useEvent.default;
   }
 });
+Object.defineProperty(exports, "useId", {
+  enumerable: true,
+  get: function () {
+    return _useId.default;
+  }
+});
+Object.defineProperty(exports, "useLayoutEffect", {
+  enumerable: true,
+  get: function () {
+    return _useLayoutEffect.default;
+  }
+});
+Object.defineProperty(exports, "useLayoutUpdateEffect", {
+  enumerable: true,
+  get: function () {
+    return _useLayoutEffect.useLayoutUpdateEffect;
+  }
+});
+Object.defineProperty(exports, "useLockFocus", {
+  enumerable: true,
+  get: function () {
+    return _focus.useLockFocus;
+  }
+});
+Object.defineProperty(exports, "useMemo", {
+  enumerable: true,
+  get: function () {
+    return _useMemo.default;
+  }
+});
 Object.defineProperty(exports, "useMergedState", {
   enumerable: true,
   get: function () {
     return _useMergedState.default;
   }
 });
+Object.defineProperty(exports, "useState", {
+  enumerable: true,
+  get: function () {
+    return _useState.default;
+  }
+});
+Object.defineProperty(exports, "useSyncState", {
+  enumerable: true,
+  get: function () {
+    return _useSyncState.default;
+  }
+});
 Object.defineProperty(exports, "warning", {
   enumerable: true,
   get: function () {
@@ -96,13 +282,32 @@ Object.defineProperty(exports, "warning", {
 var _useEvent = _interopRequireDefault(require("./hooks/useEvent"));
 var _useMergedState = _interopRequireDefault(require("./hooks/useMergedState"));
 var _useControlledState = _interopRequireDefault(require("./hooks/useControlledState"));
+var _useId = _interopRequireWildcard(require("./hooks/useId"));
+var _useLayoutEffect = _interopRequireWildcard(require("./hooks/useLayoutEffect"));
+var _useMemo = _interopRequireDefault(require("./hooks/useMemo"));
+var _useState = _interopRequireDefault(require("./hooks/useState"));
+var _useSyncState = _interopRequireDefault(require("./hooks/useSyncState"));
 var _ref = require("./ref");
-var _get = _interopRequireDefault(require("./utils/get"));
-var _set = _interopRequireWildcard(require("./utils/set"));
-var _warning = _interopRequireWildcard(require("./warning"));
+var _canUseDom = _interopRequireDefault(require("./Dom/canUseDom"));
+var _contains = _interopRequireDefault(require("./Dom/contains"));
+var _dynamicCSS = require("./Dom/dynamicCSS");
+var _findDOMNode = require("./Dom/findDOMNode");
+var _focus = require("./Dom/focus");
+var _isVisible = _interopRequireDefault(require("./Dom/isVisible"));
+var _shadow = require("./Dom/shadow");
+var _KeyCode = _interopRequireDefault(require("./KeyCode"));
+var _getScrollBarSize = _interopRequireWildcard(require("./getScrollBarSize"));
+var _isEqual = _interopRequireDefault(require("./isEqual"));
+var _isMobile = _interopRequireDefault(require("./isMobile"));
 var _omit = _interopRequireDefault(require("./omit"));
+var _pickAttrs = _interopRequireDefault(require("./pickAttrs"));
+var _proxyObject = _interopRequireDefault(require("./proxyObject"));
+var _raf = _interopRequireDefault(require("./raf"));
 var _toArray = _interopRequireDefault(require("./Children/toArray"));
 var _mergeProps = _interopRequireDefault(require("./mergeProps"));
+var _get = _interopRequireDefault(require("./utils/get"));
+var _set = _interopRequireWildcard(require("./utils/set"));
+var _warning = _interopRequireWildcard(require("./warning"));
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/util",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Common Utils For React Component",
   "keywords": [
     "react",