@aiszlab/relax 2.0.6-beta.7 → 2.0.6-beta.8

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 aiszlab
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 aiszlab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,5 @@
-# relax
-favorite and easy hooks for react
-
-## i alaways like writting many hooks for mine project
+# relax
+favorite and easy hooks for react
+
+## i alaways like writting many hooks for mine project
 ## so i need a hooks project to support me

package/dist/hooks/use-controlled-state.cjs

@@ -8,7 +8,8 @@ var isFunction = require('../is/is-function.cjs');
 
 function useControlledState(controlledState) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    defaultState = _ref.defaultState;
+    defaultState = _ref.defaultState,
+    onUpdate = _ref.onUpdate;
   // initialize state
   var _useState = react.useState(function () {
       // default use controlled state
@@ -29,6 +30,9 @@ function useControlledState(controlledState) {
     if (!isUndefined.isUndefined(controlledState)) {
       return;
     }
+    if (controlledState !== _state) {
+      onUpdate === null || onUpdate === void 0 || onUpdate(controlledState, _state);
+    }
     _setState(defaultState !== null && defaultState !== void 0 ? defaultState : controlledState);
   }, [controlledState]);
   // use controlled

package/dist/hooks/use-controlled-state.d.ts

@@ -1,11 +1,16 @@
 import { type Dispatch, type SetStateAction } from "react";
 import type { Partialable, RequiredIn, State } from "@aiszlab/relax/types";
-type UseControlledStateBy<S> = {
+type UsingControlledState<S> = {
     /**
      * @description
      * default value
      */
     defaultState?: State<S>;
+    /**
+     * @description
+     * value update callback
+     */
+    onUpdate?: (next: S | undefined, prev: S | undefined) => void;
 };
 type UsedControlledState<T> = [T, Dispatch<SetStateAction<T>>];
 /**
@@ -16,7 +21,7 @@ type UsedControlledState<T> = [T, Dispatch<SetStateAction<T>>];
  */
 declare function useControlledState<T>(): UsedControlledState<Partialable<T>>;
 declare function useControlledState<T>(controlledState: T): UsedControlledState<T>;
-declare function useControlledState<T>(controlledState: T, useControlledStateBy: UseControlledStateBy<undefined>): UsedControlledState<T>;
-declare function useControlledState<T>(controlledState: Partialable<T>, useControlledStateBy: RequiredIn<UseControlledStateBy<T>, "defaultState">): UsedControlledState<T>;
-declare function useControlledState<T>(controlledState: T, useControlledStateBy: UseControlledStateBy<T>): UsedControlledState<T>;
+declare function useControlledState<T>(controlledState: T, usingControlledState: UsingControlledState<undefined>): UsedControlledState<T>;
+declare function useControlledState<T>(controlledState: Partialable<T>, usingControlledState: RequiredIn<UsingControlledState<T>, "defaultState">): UsedControlledState<T>;
+declare function useControlledState<T>(controlledState: T, usingControlledState: UsingControlledState<T>): UsedControlledState<T>;
 export { useControlledState };

package/dist/hooks/use-controlled-state.mjs

@@ -6,7 +6,8 @@ import { isFunction } from '../is/is-function.mjs';
 
 function useControlledState(controlledState) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    defaultState = _ref.defaultState;
+    defaultState = _ref.defaultState,
+    onUpdate = _ref.onUpdate;
   // initialize state
   var _useState = useState(function () {
       // default use controlled state
@@ -27,6 +28,9 @@ function useControlledState(controlledState) {
     if (!isUndefined(controlledState)) {
       return;
     }
+    if (controlledState !== _state) {
+      onUpdate === null || onUpdate === void 0 || onUpdate(controlledState, _state);
+    }
     _setState(defaultState !== null && defaultState !== void 0 ? defaultState : controlledState);
   }, [controlledState]);
   // use controlled

package/dist/hooks/{use-parent-size.cjs → use-element-size.cjs}

@@ -2,16 +2,16 @@
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
-var useDebounceCallback = require('./use-debounce-callback.cjs');
 var useMounted = require('./use-mounted.cjs');
+var useEvent = require('./use-event.cjs');
 
 /**
  * @description
  * listen parent size change
  * provider with\height to child
  */
-var useParentSize = function useParentSize() {
-  var parentRef = react.useRef(null);
+var useElementSize = function useElementSize() {
+  var elementRef = react.useRef(null);
   var _useState = react.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -21,14 +21,12 @@ var useParentSize = function useParentSize() {
     height = _useState4[0],
     setHeight = _useState4[1];
   var _animation = react.useRef(0);
-  var _useDebounceCallback = useDebounceCallback.useDebounceCallback(function (_ref) {
-      var width = _ref.width,
-        height = _ref.height;
-      setWidth(width);
-      setHeight(height);
-    }, 300),
-    resize = _useDebounceCallback.next,
-    abort = _useDebounceCallback.abort;
+  var resize = useEvent.useEvent(function (_ref) {
+    var width = _ref.width,
+      height = _ref.height;
+    setWidth(width);
+    setHeight(height);
+  });
   useMounted.useMounted(function () {
     var resizer = new ResizeObserver(function (entries) {
       entries.forEach(function (entry) {
@@ -44,22 +42,20 @@ var useParentSize = function useParentSize() {
         });
       });
     });
-    if (parentRef.current) {
-      resizer.observe(parentRef.current);
+    if (elementRef.current) {
+      resizer.observe(elementRef.current);
     }
     return function () {
       var _resizer;
       cancelAnimationFrame(_animation.current);
       (_resizer = resizer) === null || _resizer === void 0 || _resizer.disconnect();
       resizer = null;
-      abort();
     };
   });
-  return {
-    parentRef: parentRef,
+  return [elementRef, {
     width: width,
     height: height
-  };
+  }];
 };
 
-exports.useParentSize = useParentSize;
+exports.useElementSize = useElementSize;

package/dist/hooks/use-element-size.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from "react";
+type UsedElementSize<T extends HTMLElement> = [
+    RefObject<T | null>,
+    {
+        width: number;
+        height: number;
+    }
+];
+/**
+ * @description
+ * listen parent size change
+ * provider with\height to child
+ */
+export declare const useElementSize: <T extends HTMLElement = HTMLDivElement>() => UsedElementSize<T>;
+export {};

package/dist/hooks/{use-parent-size.mjs → use-element-size.mjs}

@@ -1,15 +1,15 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useRef, useState } from 'react';
-import { useDebounceCallback } from './use-debounce-callback.mjs';
 import { useMounted } from './use-mounted.mjs';
+import { useEvent } from './use-event.mjs';
 
 /**
  * @description
  * listen parent size change
  * provider with\height to child
  */
-var useParentSize = function useParentSize() {
-  var parentRef = useRef(null);
+var useElementSize = function useElementSize() {
+  var elementRef = useRef(null);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -19,14 +19,12 @@ var useParentSize = function useParentSize() {
     height = _useState4[0],
     setHeight = _useState4[1];
   var _animation = useRef(0);
-  var _useDebounceCallback = useDebounceCallback(function (_ref) {
-      var width = _ref.width,
-        height = _ref.height;
-      setWidth(width);
-      setHeight(height);
-    }, 300),
-    resize = _useDebounceCallback.next,
-    abort = _useDebounceCallback.abort;
+  var resize = useEvent(function (_ref) {
+    var width = _ref.width,
+      height = _ref.height;
+    setWidth(width);
+    setHeight(height);
+  });
   useMounted(function () {
     var resizer = new ResizeObserver(function (entries) {
       entries.forEach(function (entry) {
@@ -42,22 +40,20 @@ var useParentSize = function useParentSize() {
         });
       });
     });
-    if (parentRef.current) {
-      resizer.observe(parentRef.current);
+    if (elementRef.current) {
+      resizer.observe(elementRef.current);
     }
     return function () {
       var _resizer;
       cancelAnimationFrame(_animation.current);
       (_resizer = resizer) === null || _resizer === void 0 || _resizer.disconnect();
       resizer = null;
-      abort();
     };
   });
-  return {
-    parentRef: parentRef,
+  return [elementRef, {
     width: width,
     height: height
-  };
+  }];
 };
 
-export { useParentSize };
+export { useElementSize };

package/dist/hooks/use-media-query.cjs

@@ -4,41 +4,46 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var toArray = require('../utils/to-array.cjs');
 var replaceAt = require('../utils/replace/replace-at.cjs');
+var isDomUsable = require('../is/is-dom-usable.cjs');
 
 var useMediaQuery = function useMediaQuery(query) {
+  var queries = react.useMemo(function () {
+    return toArray.toArray(query);
+  }, [query]);
   var _query = react.useMemo(function () {
-    return query.toString();
+    return JSON.stringify(query);
   }, [query]);
-  var queries = toArray.toArray(query);
   var _useState = react.useState(function () {
+      if (!isDomUsable.isDomUsable()) return [];
       return queries.map(function (query) {
-        var _globalThis$window$ma, _globalThis$window;
-        return !!((_globalThis$window$ma = (_globalThis$window = globalThis.window).matchMedia) !== null && _globalThis$window$ma !== void 0 && (_globalThis$window$ma = _globalThis$window$ma.call(_globalThis$window, query)) !== null && _globalThis$window$ma !== void 0 && _globalThis$window$ma.matches);
+        return !!globalThis.matchMedia(query).matches;
       });
     }),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  var onMediaQueryChange = react.useCallback(function (event, index) {
+  var changeIsMatched = react.useCallback(function (event, index) {
     setValue(function (prev) {
       return replaceAt.replaceAt(prev, index, event.matches);
     });
   }, []);
+  // only run when dom is usable
+  // when hook is executed, add listener to all media queries
+  // then on hook unmount, remove all listeners
   react.useEffect(function () {
-    var mediaQueries = queries.map(function (query) {
-      return globalThis.window.matchMedia(query);
+    if (!isDomUsable.isDomUsable()) return;
+    var mediaQueries = queries.map(function (_query) {
+      return globalThis.matchMedia(_query);
     });
-    // listen media query change
     var cleaners = mediaQueries.map(function (mediaQuery, index) {
       var listener = function listener(event) {
-        return onMediaQueryChange(event, index);
+        return changeIsMatched(event, index);
       };
       mediaQuery.addEventListener("change", listener);
       return function () {
         mediaQuery.removeEventListener("change", listener);
       };
     });
-    // clean up all listeners
     return function () {
       cleaners.forEach(function (cleaner) {
         cleaner();

package/dist/hooks/use-media-query.mjs

@@ -2,41 +2,46 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useMemo, useState, useCallback, useEffect } from 'react';
 import { toArray } from '../utils/to-array.mjs';
 import { replaceAt } from '../utils/replace/replace-at.mjs';
+import { isDomUsable } from '../is/is-dom-usable.mjs';
 
 var useMediaQuery = function useMediaQuery(query) {
+  var queries = useMemo(function () {
+    return toArray(query);
+  }, [query]);
   var _query = useMemo(function () {
-    return query.toString();
+    return JSON.stringify(query);
   }, [query]);
-  var queries = toArray(query);
   var _useState = useState(function () {
+      if (!isDomUsable()) return [];
       return queries.map(function (query) {
-        var _globalThis$window$ma, _globalThis$window;
-        return !!((_globalThis$window$ma = (_globalThis$window = globalThis.window).matchMedia) !== null && _globalThis$window$ma !== void 0 && (_globalThis$window$ma = _globalThis$window$ma.call(_globalThis$window, query)) !== null && _globalThis$window$ma !== void 0 && _globalThis$window$ma.matches);
+        return !!globalThis.matchMedia(query).matches;
       });
     }),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  var onMediaQueryChange = useCallback(function (event, index) {
+  var changeIsMatched = useCallback(function (event, index) {
     setValue(function (prev) {
       return replaceAt(prev, index, event.matches);
     });
   }, []);
+  // only run when dom is usable
+  // when hook is executed, add listener to all media queries
+  // then on hook unmount, remove all listeners
   useEffect(function () {
-    var mediaQueries = queries.map(function (query) {
-      return globalThis.window.matchMedia(query);
+    if (!isDomUsable()) return;
+    var mediaQueries = queries.map(function (_query) {
+      return globalThis.matchMedia(_query);
     });
-    // listen media query change
     var cleaners = mediaQueries.map(function (mediaQuery, index) {
       var listener = function listener(event) {
-        return onMediaQueryChange(event, index);
+        return changeIsMatched(event, index);
       };
       mediaQuery.addEventListener("change", listener);
       return function () {
         mediaQuery.removeEventListener("change", listener);
       };
     });
-    // clean up all listeners
     return function () {
       cleaners.forEach(function (cleaner) {
         cleaner();

package/dist/hooks/use-scale.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var isNumber = require('../is/is-number.cjs');
+
+/**
+ * @description 比较两个`css`单位的缩放比例
+ */
+var useScale = function useScale(resize, originalSize) {
+  var _useState = react.useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    scale = _useState2[0],
+    setScale = _useState2[1];
+  react.useLayoutEffect(function () {
+    var _parent = document.createElement("div");
+    _parent.style.width = "0px";
+    _parent.style.height = "0px";
+    _parent.style.position = "fixed";
+    _parent.style.overflow = "hidden";
+    var _resizedElement = document.createElement("div");
+    _resizedElement.style.width = isNumber.isNumber(resize) ? "".concat(resize, "px") : resize;
+    var _originalSizedElement = document.createElement("div");
+    _originalSizedElement.style.width = isNumber.isNumber(originalSize) ? "".concat(originalSize, "px") : originalSize;
+    _parent.appendChild(_resizedElement);
+    _parent.appendChild(_originalSizedElement);
+    document.body.appendChild(_parent);
+    var _resizedWidth = _resizedElement.offsetWidth;
+    var _originalSizedWidth = _originalSizedElement.offsetWidth;
+    if (_originalSizedWidth > 0) {
+      setScale(_resizedWidth / _originalSizedWidth);
+    } else {
+      setScale(1);
+    }
+    _parent.remove();
+  }, [resize, originalSize]);
+  return scale;
+};
+
+exports.useScale = useScale;

package/dist/hooks/use-scale.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @description 比较两个`css`单位的缩放比例
+ */
+export declare const useScale: (resize: string | number, originalSize: string | number) => number;

package/dist/hooks/use-scale.mjs

@@ -0,0 +1,38 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useLayoutEffect } from 'react';
+import { isNumber } from '../is/is-number.mjs';
+
+/**
+ * @description 比较两个`css`单位的缩放比例
+ */
+var useScale = function useScale(resize, originalSize) {
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    scale = _useState2[0],
+    setScale = _useState2[1];
+  useLayoutEffect(function () {
+    var _parent = document.createElement("div");
+    _parent.style.width = "0px";
+    _parent.style.height = "0px";
+    _parent.style.position = "fixed";
+    _parent.style.overflow = "hidden";
+    var _resizedElement = document.createElement("div");
+    _resizedElement.style.width = isNumber(resize) ? "".concat(resize, "px") : resize;
+    var _originalSizedElement = document.createElement("div");
+    _originalSizedElement.style.width = isNumber(originalSize) ? "".concat(originalSize, "px") : originalSize;
+    _parent.appendChild(_resizedElement);
+    _parent.appendChild(_originalSizedElement);
+    document.body.appendChild(_parent);
+    var _resizedWidth = _resizedElement.offsetWidth;
+    var _originalSizedWidth = _originalSizedElement.offsetWidth;
+    if (_originalSizedWidth > 0) {
+      setScale(_resizedWidth / _originalSizedWidth);
+    } else {
+      setScale(1);
+    }
+    _parent.remove();
+  }, [resize, originalSize]);
+  return scale;
+};
+
+export { useScale };

package/dist/hooks/use-storage-state.cjs

@@ -20,7 +20,6 @@ var useStorageState = function useStorageState(key, storage) {
   }, [key]);
   react.useEffect(function () {
     var onStorageChange = function onStorageChange(event) {
-      console.log("12321321321321321");
       if (event.key !== key) return;
       if (event.storageArea !== storage) return;
       setState(event.newValue);

package/dist/hooks/use-storage-state.mjs

@@ -18,7 +18,6 @@ var useStorageState = function useStorageState(key, storage) {
   }, [key]);
   useEffect(function () {
     var onStorageChange = function onStorageChange(event) {
-      console.log("12321321321321321");
       if (event.key !== key) return;
       if (event.storageArea !== storage) return;
       setState(event.newValue);

package/dist/hooks/{use-togglable.cjs → use-toggleable.cjs}

@@ -24,13 +24,13 @@ var Tree = /*#__PURE__*/function () {
     }
   }, {
     key: "grow",
-    value: function grow(togglableKey) {
+    value: function grow(toggleableKey) {
       // create leaf, leaf will auto trigger tree collect callback
       new Leaf({
-        key: togglableKey.key,
+        key: toggleableKey.key,
         parent: null,
         belongTo: this
-      }).grow(togglableKey.children);
+      }).grow(toggleableKey.children);
       return this;
     }
   }, {
@@ -142,19 +142,19 @@ var Leaf = /*#__PURE__*/function () {
  * @description
  * toggle able
  */
-var useTogglable = function useTogglable(togglableKeys) {
+var useToggleable = function useToggleable(toggleableKeys) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     onToggle = _ref.onToggle,
     _ref$defaultToggledKe = _ref.defaultToggledKeys,
     defaultToggledKeys = _ref$defaultToggledKe === void 0 ? [] : _ref$defaultToggledKe,
     isDefaultToggled = _ref.isDefaultToggled,
     toggledKeys = _ref.toggledKeys;
-  // re-create tree when togglable keys changed
+  // re-create tree when toggleable keys changed
   var tree = react.useMemo(function () {
-    return togglableKeys.reduce(function (_tree, togglable) {
-      return _tree.grow(togglable);
+    return toggleableKeys.reduce(function (_tree, toggleable) {
+      return _tree.grow(toggleable);
     }, new Tree());
-  }, [togglableKeys]);
+  }, [toggleableKeys]);
   // use controlled state to record toggled keys
   var _useControlledState = useControlledState.useControlledState(toggledKeys, {
       defaultState: function defaultState() {
@@ -188,4 +188,4 @@ var useTogglable = function useTogglable(togglableKeys) {
   };
 };
 
-exports.useTogglable = useTogglable;
+exports.useToggleable = useToggleable;

package/dist/hooks/{use-togglable.d.ts → use-toggleable.d.ts}

@@ -1,9 +1,9 @@
 import { type Key } from "react";
 /**
  * @description
- * togglable key
+ * toggleable key
  */
-type TogglableKey = {
+type ToggleableKey = {
     /**
      * @description
      * unique key
@@ -13,13 +13,13 @@ type TogglableKey = {
      * @description
      * children
      */
-    children?: TogglableKey[];
+    children?: ToggleableKey[];
 };
 /**
  * @description
  * extra options
  */
-type UseTogglableOptions = {
+type UseToggleableOptions = {
     /**
      * @description
      * default toggled
@@ -45,7 +45,7 @@ type UseTogglableOptions = {
  * @description
  * toggle able
  */
-export declare const useTogglable: (togglableKeys: TogglableKey[], { onToggle, defaultToggledKeys, isDefaultToggled, toggledKeys }?: UseTogglableOptions) => {
+export declare const useToggleable: (toggleableKeys: ToggleableKey[], { onToggle, defaultToggledKeys, isDefaultToggled, toggledKeys }?: UseToggleableOptions) => {
     toggledKeys: Set<Key>;
     isToggled: (key: Key) => boolean;
     toggle: (key: Key) => void;

package/dist/hooks/{use-togglable.mjs → use-toggleable.mjs}

@@ -22,13 +22,13 @@ var Tree = /*#__PURE__*/function () {
     }
   }, {
     key: "grow",
-    value: function grow(togglableKey) {
+    value: function grow(toggleableKey) {
       // create leaf, leaf will auto trigger tree collect callback
       new Leaf({
-        key: togglableKey.key,
+        key: toggleableKey.key,
         parent: null,
         belongTo: this
-      }).grow(togglableKey.children);
+      }).grow(toggleableKey.children);
       return this;
     }
   }, {
@@ -140,19 +140,19 @@ var Leaf = /*#__PURE__*/function () {
  * @description
  * toggle able
  */
-var useTogglable = function useTogglable(togglableKeys) {
+var useToggleable = function useToggleable(toggleableKeys) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     onToggle = _ref.onToggle,
     _ref$defaultToggledKe = _ref.defaultToggledKeys,
     defaultToggledKeys = _ref$defaultToggledKe === void 0 ? [] : _ref$defaultToggledKe,
     isDefaultToggled = _ref.isDefaultToggled,
     toggledKeys = _ref.toggledKeys;
-  // re-create tree when togglable keys changed
+  // re-create tree when toggleable keys changed
   var tree = useMemo(function () {
-    return togglableKeys.reduce(function (_tree, togglable) {
-      return _tree.grow(togglable);
+    return toggleableKeys.reduce(function (_tree, toggleable) {
+      return _tree.grow(toggleable);
     }, new Tree());
-  }, [togglableKeys]);
+  }, [toggleableKeys]);
   // use controlled state to record toggled keys
   var _useControlledState = useControlledState(toggledKeys, {
       defaultState: function defaultState() {
@@ -186,4 +186,4 @@ var useTogglable = function useTogglable(togglableKeys) {
   };
 };
 
-export { useTogglable };
+export { useToggleable };

package/dist/hooks/use-unmount.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var react = require('react');
+var useMounted = require('./use-mounted.cjs');
 
 /**
  * @author murukal
@@ -9,9 +9,9 @@ var react = require('react');
  * unmount
  */
 var useUnmount = function useUnmount(callback) {
-  react.useEffect(function () {
+  useMounted.useMounted(function () {
     return callback;
-  }, []);
+  });
 };
 
 exports.useUnmount = useUnmount;

package/dist/hooks/use-unmount.mjs

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useMounted } from './use-mounted.mjs';
 
 /**
  * @author murukal
@@ -7,9 +7,9 @@ import { useEffect } from 'react';
  * unmount
  */
 var useUnmount = function useUnmount(callback) {
-  useEffect(function () {
+  useMounted(function () {
     return callback;
-  }, []);
+  });
 };
 
 export { useUnmount };

package/dist/index.cjs

@@ -13,7 +13,7 @@ var useScrollLocker = require('./hooks/use-scroll-locker.cjs');
 var useForceUpdate = require('./hooks/use-force-update.cjs');
 var useScrollable = require('./hooks/use-scrollable.cjs');
 var useComposedRef = require('./hooks/use-composed-ref.cjs');
-var useTogglable = require('./hooks/use-togglable.cjs');
+var useToggleable = require('./hooks/use-toggleable.cjs');
 var useEvent = require('./hooks/use-event.cjs');
 var useUpdateEffect = require('./hooks/use-update-effect.cjs');
 var useCounter = require('./hooks/use-counter.cjs');
@@ -33,7 +33,7 @@ var useSessionStorageState = require('./hooks/use-session-storage-state.cjs');
 var useIsMounted = require('./hooks/use-is-mounted.cjs');
 var useInfiniteScroll = require('./hooks/use-infinite-scroll.cjs');
 var useReactive = require('./hooks/use-reactive.cjs');
-var useParentSize = require('./hooks/use-parent-size.cjs');
+var useElementSize = require('./hooks/use-element-size.cjs');
 var useScreenSize = require('./hooks/use-screen-size.cjs');
 var useDrag = require('./hooks/use-drag.cjs');
 var useEventSource = require('./hooks/use-event-source.cjs');
@@ -57,6 +57,7 @@ var isThenable = require('./is/is-thenable.cjs');
 var isHtmlElement = require('./is/is-html-element.cjs');
 var isHtmlInputElement = require('./is/is-html-input-element.cjs');
 var isObject = require('./is/is-object.cjs');
+var useScale = require('./hooks/use-scale.cjs');
 var effect = require('./utils/effect.cjs');
 var unique = require('./utils/unique.cjs');
 var uniqueBy = require('./utils/unique-by.cjs');
@@ -102,7 +103,7 @@ exports.useScrollLocker = useScrollLocker.useScrollLocker;
 exports.useForceUpdate = useForceUpdate.useForceUpdate;
 exports.useScrollable = useScrollable.useScrollable;
 exports.useComposedRef = useComposedRef.useComposedRef;
-exports.useTogglable = useTogglable.useTogglable;
+exports.useToggleable = useToggleable.useToggleable;
 exports.useEvent = useEvent.useEvent;
 exports.useUpdateEffect = useUpdateEffect.useUpdateEffect;
 exports.useCounter = useCounter.useCounter;
@@ -122,7 +123,7 @@ exports.useSessionStorageState = useSessionStorageState.useSessionStorageState;
 exports.useIsMounted = useIsMounted.useIsMounted;
 exports.useInfiniteScroll = useInfiniteScroll.useInfiniteScroll;
 exports.useReactive = useReactive.useReactive;
-exports.useParentSize = useParentSize.useParentSize;
+exports.useElementSize = useElementSize.useElementSize;
 exports.useScreenSize = useScreenSize.useScreenSize;
 exports.useDrag = useDrag.useDrag;
 exports.useEventSource = useEventSource.useEventSource;
@@ -146,6 +147,7 @@ exports.isThenable = isThenable.isThenable;
 exports.isHTMLElement = isHtmlElement.isHTMLElement;
 exports.isHTMLInputElement = isHtmlInputElement.isHTMLInputElement;
 exports.isObject = isObject.isObject;
+exports.useScale = useScale.useScale;
 exports.effect = effect.effect;
 exports.unique = unique.unique;
 exports.uniqueBy = uniqueBy.uniqueBy;

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export { useScrollLocker } from "./hooks/use-scroll-locker";
 export { useForceUpdate } from "./hooks/use-force-update";
 export { useScrollable } from "./hooks/use-scrollable";
 export { useComposedRef } from "./hooks/use-composed-ref";
-export { useTogglable } from "./hooks/use-togglable";
+export { useToggleable } from "./hooks/use-toggleable";
 export { useEvent } from "./hooks/use-event";
 export { useUpdateEffect } from "./hooks/use-update-effect";
 export { useCounter } from "./hooks/use-counter";
@@ -35,7 +35,7 @@ export { useSessionStorageState } from "./hooks/use-session-storage-state";
 export { useIsMounted } from "./hooks/use-is-mounted";
 export { useInfiniteScroll } from "./hooks/use-infinite-scroll";
 export { useReactive } from "./hooks/use-reactive";
-export { useParentSize } from "./hooks/use-parent-size";
+export { useElementSize } from "./hooks/use-element-size";
 export { useScreenSize } from "./hooks/use-screen-size";
 export { useDrag } from "./hooks/use-drag";
 export { useEventSource } from "./hooks/use-event-source";
@@ -63,6 +63,7 @@ export { isThenable } from "./is/is-thenable";
 export { isHTMLElement } from "./is/is-html-element";
 export { isHTMLInputElement } from "./is/is-html-input-element";
 export { isObject } from "./is/is-object";
+export { useScale } from "./hooks/use-scale";
 /**
  * @description
  * utils

package/dist/index.mjs

@@ -11,7 +11,7 @@ export { useScrollLocker } from './hooks/use-scroll-locker.mjs';
 export { useForceUpdate } from './hooks/use-force-update.mjs';
 export { useScrollable } from './hooks/use-scrollable.mjs';
 export { useComposedRef } from './hooks/use-composed-ref.mjs';
-export { useTogglable } from './hooks/use-togglable.mjs';
+export { useToggleable } from './hooks/use-toggleable.mjs';
 export { useEvent } from './hooks/use-event.mjs';
 export { useUpdateEffect } from './hooks/use-update-effect.mjs';
 export { useCounter } from './hooks/use-counter.mjs';
@@ -31,7 +31,7 @@ export { useSessionStorageState } from './hooks/use-session-storage-state.mjs';
 export { useIsMounted } from './hooks/use-is-mounted.mjs';
 export { useInfiniteScroll } from './hooks/use-infinite-scroll.mjs';
 export { useReactive } from './hooks/use-reactive.mjs';
-export { useParentSize } from './hooks/use-parent-size.mjs';
+export { useElementSize } from './hooks/use-element-size.mjs';
 export { useScreenSize } from './hooks/use-screen-size.mjs';
 export { useDrag } from './hooks/use-drag.mjs';
 export { useEventSource } from './hooks/use-event-source.mjs';
@@ -55,6 +55,7 @@ export { isThenable } from './is/is-thenable.mjs';
 export { isHTMLElement } from './is/is-html-element.mjs';
 export { isHTMLInputElement } from './is/is-html-input-element.mjs';
 export { isObject } from './is/is-object.mjs';
+export { useScale } from './hooks/use-scale.mjs';
 export { effect } from './utils/effect.mjs';
 export { unique } from './utils/unique.mjs';
 export { uniqueBy } from './utils/unique-by.mjs';

package/dist/types/intersection.d.ts

@@ -0,0 +1 @@
+export type Intersection<P, N> = Pick<P, keyof N & keyof P> & Partial<Omit<P, keyof N & keyof P>> & Partial<Omit<N, keyof N & keyof P>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "2.0.6-beta.7",
+  "version": "2.0.6-beta.8",
   "description": "react utils collection",
   "exports": {
     ".": {

package/dist/hooks/use-parent-size.d.ts

@@ -1,10 +0,0 @@
-/**
- * @description
- * listen parent size change
- * provider with\height to child
- */
-export declare const useParentSize: <T extends HTMLElement = HTMLDivElement>() => {
-    parentRef: import("react").RefObject<T | null>;
-    width: number;
-    height: number;
-};