@aiszlab/relax 1.2.55 → 1.2.56

package/dist/__test__/hooks/use-togglable.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @jest-environment jsdom
+ */
+export {};

package/dist/hooks/use-debounce-callback.d.ts

@@ -15,4 +15,4 @@ import { type Callable } from './use-event';
  * @example
  * 1000
  */
-export declare const useDebounceCallback: <T extends Callable, R extends unknown[] = Parameters<T>>(debouncer: T | Debouncer<T, R>, wait?: number) => Debounced<T>;
+export declare const useDebounceCallback: <T extends Callable, R extends Array<unknown> = Parameters<T>>(debouncer: T | Debouncer<T, R>, wait?: number) => Debounced<T>;

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

@@ -1,2 +1,2 @@
 export type Callable = (...args: any) => any;
-export declare const useEvent: <T extends Function | Callable>(callback: T) => T;
+export declare const useEvent: <T extends Callable | Function>(callback: T) => T;

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

@@ -11,5 +11,5 @@ type Props<T> = Pick<DOMAttributes<T>, 'onFocus' | 'onBlur'> & {
  * dom attributes
  */
 type UsedFocus<T> = [boolean, Required<Pick<DOMAttributes<T>, 'onFocus' | 'onBlur'>>];
-export declare const useFocus: <T extends Element = Element>(props?: Props<T> | undefined) => UsedFocus<T>;
+export declare const useFocus: <T extends Element = Element>(props?: Props<T>) => UsedFocus<T>;
 export {};

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

@@ -4,5 +4,5 @@ type UseHoverBy<T> = {
     onLeave?: DOMAttributes<T>['onPointerLeave'];
 };
 type UsedHover<T> = [boolean, Required<Pick<DOMAttributes<T>, 'onPointerEnter' | 'onPointerLeave'>>];
-export declare const useHover: <T extends Element = Element>(props?: UseHoverBy<T> | undefined) => UsedHover<T>;
+export declare const useHover: <T extends Element = Element>(props?: UseHoverBy<T>) => UsedHover<T>;
 export {};

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

@@ -3,5 +3,5 @@
  * raf
  */
 export declare const useRaf: (_callback: Function, { timely }?: {
-    timely?: boolean | undefined;
+    timely?: boolean;
 }) => () => void;

package/dist/hooks/use-throttle-callback.d.ts

@@ -15,4 +15,4 @@ import { type Callable } from './use-event';
  * @example
  * 1000
  */
-export declare const useThrottleCallback: <T extends Callable, R extends unknown[] = Parameters<T>>(throttler: T | Throttler<T, R>, wait?: number) => Throttled<T>;
+export declare const useThrottleCallback: <T extends Callable, R extends Array<unknown> = Parameters<T>>(throttler: T | Throttler<T, R>, wait?: number) => Throttled<T>;

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

@@ -0,0 +1,48 @@
+import { type Key } from 'react';
+/**
+ * @description
+ * togglable key
+ */
+type TogglableKey = {
+    /**
+     * @description
+     * unique key
+     */
+    key: Key;
+    /**
+     * @description
+     * children
+     */
+    children?: TogglableKey[];
+};
+/**
+ * @description
+ * extra options
+ */
+type Options = {
+    /**
+     * @description
+     * default toggled
+     */
+    isDefaultToggled?: boolean;
+    /**
+     * @description
+     * toggled keys
+     */
+    toggledKeys?: Key[];
+    /**
+     * @description
+     * on toggle callback
+     */
+    onToggle?: (keys: Key[]) => void;
+};
+/**
+ * @description
+ * toggle able
+ */
+export declare const useTogglable: (togglableKeys: TogglableKey[], { onToggle, ...options }?: Options) => {
+    toggledKeys: Set<Key>;
+    isToggled: (key: Key) => boolean;
+    toggle: (key: Key) => void;
+};
+export {};

package/dist/hooks/use-togglable.js

@@ -0,0 +1,177 @@
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, createClass as _createClass, classPrivateFieldGet2 as _classPrivateFieldGet2, classCallCheck as _classCallCheck, classPrivateFieldInitSpec as _classPrivateFieldInitSpec, classPrivateFieldSet2 as _classPrivateFieldSet2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useMemo, useCallback } from 'react';
+import { useControlledState } from './use-controlled-state.js';
+import { useEvent } from './use-event.js';
+
+var _excluded = ["onToggle"];
+var _groupedLeaves = /*#__PURE__*/new WeakMap();
+var Tree = /*#__PURE__*/function () {
+  function Tree() {
+    _classCallCheck(this, Tree);
+    _classPrivateFieldInitSpec(this, _groupedLeaves, void 0);
+    _classPrivateFieldSet2(_groupedLeaves, this, new Map());
+  }
+  return _createClass(Tree, [{
+    key: "groupedLeaves",
+    get: function get() {
+      return _classPrivateFieldGet2(_groupedLeaves, this);
+    }
+  }, {
+    key: "grow",
+    value: function grow(togglableKey) {
+      // create leaf, leaf will auto trigger tree collect callback
+      new Leaf({
+        key: togglableKey.key,
+        parent: null,
+        belongTo: this
+      }).grow(togglableKey.children);
+      return this;
+    }
+  }, {
+    key: "collect",
+    value: function collect(leaf) {
+      _classPrivateFieldGet2(_groupedLeaves, this).has(leaf.key) ? _classPrivateFieldGet2(_groupedLeaves, this).get(leaf.key).add(leaf) : _classPrivateFieldGet2(_groupedLeaves, this).set(leaf.key, new Set([leaf]));
+    }
+  }, {
+    key: "toggle",
+    value: function toggle(key, toggledKeys) {
+      var hasToggled = toggledKeys.has(key);
+      var isToggled = !hasToggled;
+      return this.toggleBy(key, isToggled, toggledKeys);
+    }
+  }, {
+    key: "toggleBy",
+    value: function toggleBy(key, isToggled, toggledKeys) {
+      var _classPrivateFieldGet2$1;
+      return Array.from((_classPrivateFieldGet2$1 = _classPrivateFieldGet2(_groupedLeaves, this).get(key)) !== null && _classPrivateFieldGet2$1 !== void 0 ? _classPrivateFieldGet2$1 : []).reduce(function (prev, leaf) {
+        // deep fall, add or remove child key
+        // deep rise, add or remove parent key
+        return leaf.rise(isToggled, leaf.fall(isToggled, prev));
+      }, new Set(toggledKeys));
+    }
+  }]);
+}();
+var _key = /*#__PURE__*/new WeakMap();
+var _belongTo = /*#__PURE__*/new WeakMap();
+var _parent = /*#__PURE__*/new WeakMap();
+var _children = /*#__PURE__*/new WeakMap();
+var Leaf = /*#__PURE__*/function () {
+  function Leaf(props) {
+    _classCallCheck(this, Leaf);
+    _classPrivateFieldInitSpec(this, _key, void 0);
+    _classPrivateFieldInitSpec(this, _belongTo, void 0);
+    _classPrivateFieldInitSpec(this, _parent, void 0);
+    _classPrivateFieldInitSpec(this, _children, void 0);
+    _classPrivateFieldSet2(_key, this, props.key);
+    _classPrivateFieldSet2(_parent, this, props.parent);
+    _classPrivateFieldSet2(_belongTo, this, props.belongTo);
+    _classPrivateFieldSet2(_children, this, []);
+    // when leaf has grew, let tree collect leaf
+    _classPrivateFieldGet2(_belongTo, this).collect(this);
+  }
+  return _createClass(Leaf, [{
+    key: "key",
+    get: function get() {
+      return _classPrivateFieldGet2(_key, this);
+    }
+  }, {
+    key: "grow",
+    value: function grow() {
+      var _this = this;
+      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      if (children.length === 0) return this;
+      children.forEach(function (node) {
+        var child = new Leaf({
+          key: node.key,
+          parent: _this,
+          belongTo: _classPrivateFieldGet2(_belongTo, _this)
+        }).grow(node.children);
+        _classPrivateFieldGet2(_children, _this).push(child);
+      });
+      return this;
+    }
+  }, {
+    key: "rise",
+    value: function rise(isToggled, toggledKeys) {
+      var rised = new Set(toggledKeys);
+      if (isToggled) {
+        rised.add(_classPrivateFieldGet2(_key, this));
+      } else {
+        rised["delete"](_classPrivateFieldGet2(_key, this));
+      }
+      if (_classPrivateFieldGet2(_parent, this)) {
+        return _classPrivateFieldGet2(_parent, this).rise(isToggled, rised);
+      }
+      return rised;
+    }
+  }, {
+    key: "fall",
+    value: function fall(isToggled, toggledKeys) {
+      return _classPrivateFieldGet2(_children, this).reduce(function (prev, leaf) {
+        // deep loop, remove or add key
+        var fell = leaf.fall(isToggled, prev);
+        // toggle true, add current leaf key
+        // toggle false, remove current leaf key
+        if (isToggled) {
+          fell.add(leaf.key);
+        } else {
+          fell["delete"](leaf.key);
+        }
+        return fell;
+      }, new Set(toggledKeys));
+    }
+  }]);
+}();
+/**
+ * @description
+ * toggle able
+ */
+var useTogglable = function useTogglable(togglableKeys) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    onToggle = _ref.onToggle,
+    options = _objectWithoutProperties(_ref, _excluded);
+  /// re-create tree when togglable keys changed
+  var tree = useMemo(function () {
+    return togglableKeys.reduce(function (_tree, togglable) {
+      return _tree.grow(togglable);
+    }, new Tree());
+  }, [togglableKeys]);
+  /// use controlled state to record toggled keys
+  var _useControlledState = useControlledState(options.toggledKeys, {
+      defaultState: function defaultState() {
+        return options.isDefaultToggled ? Array.from(Array.from(tree.groupedLeaves.values()).reduce(function (prev, leaves) {
+          leaves.forEach(function (leaf) {
+            return prev.add(leaf.key);
+          });
+          return prev;
+        }, new Set())) : [];
+      }
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    _toggledKeys = _useControlledState2[0],
+    _setToggledKeys = _useControlledState2[1];
+  /// use set for toggled keys to make it read-only
+  var readableToggledKeys = useMemo(function () {
+    return new Set(_toggledKeys);
+  }, [_toggledKeys]);
+  /// check current key is toggled
+  var isToggled = useCallback(function (key) {
+    return !readableToggledKeys || readableToggledKeys.has(key);
+  }, [readableToggledKeys]);
+  /// toggle one key
+  var toggle = useEvent(function (key) {
+    // get new toggled keys by toggle current key
+    var _toggledKeys = Array.from(tree.toggle(key, readableToggledKeys));
+    // set state
+    _setToggledKeys(_toggledKeys);
+    // trigger on toggle callback
+    onToggle === null || onToggle === void 0 || onToggle(_toggledKeys);
+  });
+  return {
+    toggledKeys: readableToggledKeys,
+    isToggled: isToggled,
+    toggle: toggle
+  };
+};
+
+export { useTogglable };

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

@@ -1,9 +1,9 @@
 import { type Key } from 'react';
 /**
  * @description
- * toggleable key
+ * togglable key
  */
-type ToggleableKey = {
+type TogglableKey = {
     /**
      * @description
      * unique key
@@ -13,7 +13,7 @@ type ToggleableKey = {
      * @description
      * children
      */
-    children?: ToggleableKey[];
+    children?: TogglableKey[];
 };
 /**
  * @description
@@ -40,7 +40,7 @@ type Options = {
  * @description
  * toggle able
  */
-export declare const useToggleable: (toggleableKeys: ToggleableKey[], { onToggle, ...options }?: Options) => {
+export declare const useTogglable: (togglableKeys: TogglableKey[], { onToggle, ...options }?: Options) => {
     toggledKeys: Set<Key>;
     isToggled: (key: Key) => boolean;
     toggle: (key: Key) => void;

package/dist/hooks/use-toggleable.js

@@ -1,6 +1,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, createClass as _createClass, classPrivateFieldGet2 as _classPrivateFieldGet2, classCallCheck as _classCallCheck, classPrivateFieldInitSpec as _classPrivateFieldInitSpec, classPrivateFieldSet2 as _classPrivateFieldSet2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo, useCallback } from 'react';
 import { useControlledState } from './use-controlled-state.js';
+import { useEvent } from './use-event.js';
 
 var _excluded = ["onToggle"];
 var _groupedLeaves = /*#__PURE__*/new WeakMap();
@@ -17,13 +18,13 @@ var Tree = /*#__PURE__*/function () {
     }
   }, {
     key: "grow",
-    value: function grow(toggleableKey) {
+    value: function grow(togglableKey) {
       // create leaf, leaf will auto trigger tree collect callback
       new Leaf({
-        key: toggleableKey.key,
+        key: togglableKey.key,
         parent: null,
         belongTo: this
-      }).grow(toggleableKey.children);
+      }).grow(togglableKey.children);
       return this;
     }
   }, {
@@ -35,13 +36,14 @@ var Tree = /*#__PURE__*/function () {
     key: "toggle",
     value: function toggle(key, toggledKeys) {
       var hasToggled = toggledKeys.has(key);
-      var _isToggled = !hasToggled;
-      return this.toggleBy(key, _isToggled, toggledKeys);
+      var isToggled = !hasToggled;
+      return this.toggleBy(key, isToggled, toggledKeys);
     }
   }, {
     key: "toggleBy",
     value: function toggleBy(key, isToggled, toggledKeys) {
       var _classPrivateFieldGet2$1;
+      debugger;
       return Array.from((_classPrivateFieldGet2$1 = _classPrivateFieldGet2(_groupedLeaves, this).get(key)) !== null && _classPrivateFieldGet2$1 !== void 0 ? _classPrivateFieldGet2$1 : []).reduce(function (prev, leaf) {
         // deep fall, add or remove child key
         var fell = leaf.fall(isToggled, prev);
@@ -79,17 +81,16 @@ var Leaf = /*#__PURE__*/function () {
     key: "grow",
     value: function grow() {
       var _this = this;
-      var toggleableKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      if (toggleableKeys.length > 0) {
-        toggleableKeys.forEach(function (_toggleableKey) {
-          var child = new Leaf({
-            key: _toggleableKey.key,
-            parent: _this,
-            belongTo: _classPrivateFieldGet2(_belongTo, _this)
-          }).grow(_toggleableKey.children);
-          _classPrivateFieldGet2(_children, _this).push(child);
-        });
-      }
+      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      if (children.length === 0) return this;
+      children.forEach(function (node) {
+        var child = new Leaf({
+          key: node.key,
+          parent: _this,
+          belongTo: _classPrivateFieldGet2(_belongTo, _this)
+        }).grow(node.children);
+        _classPrivateFieldGet2(_children, _this).push(child);
+      });
       return this;
     }
   }, {
@@ -135,16 +136,16 @@ var Leaf = /*#__PURE__*/function () {
  * @description
  * toggle able
  */
-var useToggleable = function useToggleable(toggleableKeys) {
+var useTogglable = function useTogglable(togglableKeys) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     onToggle = _ref.onToggle,
     options = _objectWithoutProperties(_ref, _excluded);
-  /// re-create tree when toggleable keys changed
+  /// re-create tree when togglable keys changed
   var tree = useMemo(function () {
-    return toggleableKeys.reduce(function (_tree, toggleable) {
-      return _tree.grow(toggleable);
+    return togglableKeys.reduce(function (_tree, togglable) {
+      return _tree.grow(togglable);
     }, new Tree());
-  }, [toggleableKeys]);
+  }, [togglableKeys]);
   /// use controlled state to record toggled keys
   var _useControlledState = useControlledState(options.toggledKeys, {
       defaultState: function defaultState() {
@@ -168,14 +169,14 @@ var useToggleable = function useToggleable(toggleableKeys) {
     return !readableToggledKeys || readableToggledKeys.has(key);
   }, [readableToggledKeys]);
   /// toggle one key
-  var toggle = useCallback(function (key) {
+  var toggle = useEvent(function (key) {
     // get new toggled keys by toggle current key
     var _toggledKeys = Array.from(tree.toggle(key, readableToggledKeys));
     // set state
     _setToggledKeys(_toggledKeys);
     // trigger on toggle callback
     onToggle === null || onToggle === void 0 || onToggle(_toggledKeys);
-  }, [tree, readableToggledKeys, _setToggledKeys, onToggle]);
+  });
   return {
     toggledKeys: readableToggledKeys,
     isToggled: isToggled,
@@ -183,4 +184,4 @@ var useToggleable = function useToggleable(toggleableKeys) {
   };
 };
 
-export { useToggleable };
+export { useTogglable };

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 { useRefs } from './hooks/use-refs';
-export { useToggleable } from './hooks/use-toggleable';
+export { useTogglable } from './hooks/use-togglable';
 export { useEvent } from './hooks/use-event';
 export { useUpdateEffect } from './hooks/use-update-effect';
 export { useCounter } from './hooks/use-counter';

package/dist/index.js

@@ -11,7 +11,7 @@ export { useScrollLocker } from './hooks/use-scroll-locker.js';
 export { useForceUpdate } from './hooks/use-force-update.js';
 export { useScrollable } from './hooks/use-scrollable.js';
 export { useRefs } from './hooks/use-refs.js';
-export { useToggleable } from './hooks/use-toggleable.js';
+export { useTogglable } from './hooks/use-togglable.js';
 export { useEvent } from './hooks/use-event.js';
 export { useUpdateEffect } from './hooks/use-update-effect.js';
 export { useCounter } from './hooks/use-counter.js';

package/dist/utils/debounce.d.ts

@@ -20,4 +20,4 @@ export type Debouncer<T extends Callable, R extends Array<unknown> = Parameters<
     callback: (...args: R) => ReturnType<T>;
     pipe: (...args: Parameters<T>) => R | Promise<R>;
 };
-export declare const debounce: <T extends Callable, R extends unknown[] = Parameters<T>>(debouncer: T | Debouncer<T, R>, wait: number) => Debounced<T>;
+export declare const debounce: <T extends Callable, R extends Array<unknown> = Parameters<T>>(debouncer: Debouncer<T, R> | T, wait: number) => Debounced<T>;

package/dist/utils/exclude.d.ts

@@ -7,4 +7,4 @@
  * @example
  * exclude([1, 2, 3, 4, 5], [2, 4]) // [1, 3, 5]
  */
-export declare const exclude: <T, E = unknown>(value: T[], _excludeBy: E[]) => Exclude<T, E>[];
+export declare const exclude: <T, E = unknown>(value: Array<T>, _excludeBy: Array<E>) => Array<Exclude<T, E>>;

package/dist/utils/throttle.d.ts

@@ -2,4 +2,4 @@ import type { Debounced, Debouncer } from './debounce';
 import { type Callable } from '../hooks/use-event';
 export type Throttled<T extends Callable> = Debounced<T>;
 export type Throttler<T extends Callable, R extends Array<unknown> = Parameters<T>> = Debouncer<T, R>;
-export declare const throttle: <T extends Callable, R extends unknown[] = Parameters<T>>(throttler: T | Throttler<T, R>, wait: number) => Throttled<T>;
+export declare const throttle: <T extends Callable, R extends Array<unknown> = Parameters<T>>(throttler: Throttler<T, R> | T, wait: number) => Throttled<T>;

package/dist/utils/to-array.d.ts

@@ -14,5 +14,5 @@ type Options = {
  * @description
  * convert any type data to a array
  */
-export declare const toArray: <T extends unknown = unknown>(value: T | T[], { separator }?: Options) => T[];
+export declare const toArray: <T extends unknown = unknown>(value: T | Array<T>, { separator }?: Options) => Array<T>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "1.2.55",
+  "version": "1.2.56",
   "description": "react utils collection",
   "type": "module",
   "exports": {
@@ -26,9 +26,9 @@
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-typescript": "^11.1.6",
@@ -42,7 +42,7 @@
     "react": "18",
     "react-dom": "18",
     "rollup": "^4.17.2",
-    "typescript": "5.3.3"
+    "typescript": "5.5.2"
   },
   "peerDependencies": {
     "react": "18",