indicator-ui 0.1.27 → 0.1.28

package/dist/index.js

@@ -54184,6 +54184,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   calculateAvailablePosition: () => (/* reexport safe */ _placement__WEBPACK_IMPORTED_MODULE_18__.calculateAvailablePosition),
 /* harmony export */   useBackdropModal: () => (/* reexport safe */ _modalWindows__WEBPACK_IMPORTED_MODULE_14__.useBackdropModal),
 /* harmony export */   useBackgroundModalAnim: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_13__.useBackgroundModalAnim),
+/* harmony export */   useCollapsible: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_13__.useCollapsible),
 /* harmony export */   useControlInput: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_15__.useControlInput),
 /* harmony export */   useDebouncedAccumulator: () => (/* reexport safe */ _useDebouncedAccumulator__WEBPACK_IMPORTED_MODULE_2__.useDebouncedAccumulator),
 /* harmony export */   useDebouncedInvoker: () => (/* reexport safe */ _useDebouncedInvoker__WEBPACK_IMPORTED_MODULE_7__.useDebouncedInvoker),
@@ -54616,8 +54617,8 @@ var getAvailablePlacements = function getAvailablePlacements(props) {
     wY = _props$windowRect.top,
     wX = _props$windowRect.left;
   var T = pY + wY - h >= 0;
-  var R = pX + wX + pW + w <= wW;
-  var B = pY + wY + pH + h <= wH;
+  var R = pX + pW + w <= wW + wX;
+  var B = pY + pH + h <= wH + wY;
   var L = pX + wX - w >= 0;
   var parentCenterX = pX + pW / 2;
   var parentCenterY = pY + pH / 2;
@@ -55480,6 +55481,59 @@ var BACKDROP_MODAL_ANIMATIONS = function BACKDROP_MODAL_ANIMATIONS() {
 
 /***/ }),
 
+/***/ "./src/hooks/ui-animations/assets/collapsibleAnimations.ts":
+/*!*****************************************************************!*\
+  !*** ./src/hooks/ui-animations/assets/collapsibleAnimations.ts ***!
+  \*****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   COLLAPSIBLE_ANIM: () => (/* binding */ COLLAPSIBLE_ANIM)
+/* harmony export */ });
+function COLLAPSIBLE_ANIM() {
+  var appear = function appear() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    var obj = args[0],
+      timeline = args[1],
+      height = args[2];
+    timeline.clear().set(obj, {
+      visibility: 'visible'
+    }).to(obj, {
+      height: height,
+      duration: 0.3,
+      ease: "power2.out"
+    }).set(obj, {
+      transform: 'none'
+    });
+    return timeline;
+  };
+  var disappear = function disappear() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    var obj = args[0],
+      timeline = args[1];
+    timeline.clear().to(obj, {
+      height: 0,
+      duration: 0.2,
+      ease: "power2.in"
+    }).set(obj, {
+      visibility: 'hidden'
+    });
+    return timeline;
+  };
+  return {
+    appear: appear,
+    disappear: disappear
+  };
+}
+
+/***/ }),
+
 /***/ "./src/hooks/ui-animations/assets/index.ts":
 /*!*************************************************!*\
   !*** ./src/hooks/ui-animations/assets/index.ts ***!
@@ -55490,6 +55544,7 @@ var BACKDROP_MODAL_ANIMATIONS = function BACKDROP_MODAL_ANIMATIONS() {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   BACKDROP_MODAL_ANIMATIONS: () => (/* reexport safe */ _backdropModalAnimations__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS),
+/* harmony export */   COLLAPSIBLE_ANIM: () => (/* reexport safe */ _collapsibleAnimations__WEBPACK_IMPORTED_MODULE_4__.COLLAPSIBLE_ANIM),
 /* harmony export */   MODAL_ANIMATIONS: () => (/* reexport safe */ _modalAnimations__WEBPACK_IMPORTED_MODULE_0__.MODAL_ANIMATIONS),
 /* harmony export */   MOVING_ANIMATIONS: () => (/* reexport safe */ _movingAnimations__WEBPACK_IMPORTED_MODULE_3__.MOVING_ANIMATIONS),
 /* harmony export */   SHIMMER_ANIMATIONS: () => (/* reexport safe */ _shimmerAnimation__WEBPACK_IMPORTED_MODULE_2__.SHIMMER_ANIMATIONS)
@@ -55498,6 +55553,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _backdropModalAnimations__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./backdropModalAnimations */ "./src/hooks/ui-animations/assets/backdropModalAnimations.ts");
 /* harmony import */ var _shimmerAnimation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shimmerAnimation */ "./src/hooks/ui-animations/assets/shimmerAnimation.ts");
 /* harmony import */ var _movingAnimations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./movingAnimations */ "./src/hooks/ui-animations/assets/movingAnimations.ts");
+/* harmony import */ var _collapsibleAnimations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./collapsibleAnimations */ "./src/hooks/ui-animations/assets/collapsibleAnimations.ts");
+
 
 
 
@@ -55937,14 +55994,17 @@ function useTimeline() {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   useBackgroundModalAnim: () => (/* reexport safe */ _useBackgroundModalAnim__WEBPACK_IMPORTED_MODULE_1__.useBackgroundModalAnim),
+/* harmony export */   useCollapsible: () => (/* reexport safe */ _useCollapsible__WEBPACK_IMPORTED_MODULE_3__.useCollapsible),
 /* harmony export */   useModalAnim: () => (/* reexport safe */ _useModalAnim__WEBPACK_IMPORTED_MODULE_0__.useModalAnim),
 /* harmony export */   useShimmer: () => (/* reexport safe */ _useShimmer__WEBPACK_IMPORTED_MODULE_2__.useShimmer),
-/* harmony export */   useTimeline: () => (/* reexport safe */ _helpers__WEBPACK_IMPORTED_MODULE_3__.useTimeline)
+/* harmony export */   useTimeline: () => (/* reexport safe */ _helpers__WEBPACK_IMPORTED_MODULE_4__.useTimeline)
 /* harmony export */ });
 /* harmony import */ var _useModalAnim__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./useModalAnim */ "./src/hooks/ui-animations/useModalAnim.ts");
 /* harmony import */ var _useBackgroundModalAnim__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./useBackgroundModalAnim */ "./src/hooks/ui-animations/useBackgroundModalAnim.ts");
 /* harmony import */ var _useShimmer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./useShimmer */ "./src/hooks/ui-animations/useShimmer.ts");
-/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ "./src/hooks/ui-animations/helpers.ts");
+/* harmony import */ var _useCollapsible__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./useCollapsible */ "./src/hooks/ui-animations/useCollapsible.ts");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers */ "./src/hooks/ui-animations/helpers.ts");
+
 
 
 
@@ -56217,6 +56277,128 @@ function useBackgroundModalAnim() {
 
 /***/ }),
 
+/***/ "./src/hooks/ui-animations/useCollapsible.ts":
+/*!***************************************************!*\
+  !*** ./src/hooks/ui-animations/useCollapsible.ts ***!
+  \***************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useCollapsible: () => (/* binding */ useCollapsible)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./assets */ "./src/hooks/ui-animations/assets/index.ts");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ "./src/hooks/ui-animations/helpers.ts");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+
+
+
+
+function useCollapsible() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  var ref = args[0],
+    _args$ = args[1],
+    options = _args$ === void 0 ? {} : _args$;
+  var _options$initState = options.initState,
+    initState = _options$initState === void 0 ? 'hide' : _options$initState;
+  var _useIsOpen = useIsOpen(),
+    getIsOpen = _useIsOpen.getIsOpen,
+    setOpen = _useIsOpen.setOpen,
+    setHide = _useIsOpen.setHide;
+  var _useTimeline = (0,_helpers__WEBPACK_IMPORTED_MODULE_3__.useTimeline)(),
+    getTimeline = _useTimeline.getTimeline;
+  var _useSimpleRefElementW = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(ref),
+    _useSimpleRefElementW2 = _slicedToArray(_useSimpleRefElementW, 1),
+    getParent = _useSimpleRefElementW2[0];
+  var getRealObjHeight = function getRealObjHeight() {
+    var parent = getParent();
+    if (parent) {
+      return parent.scrollHeight;
+    }
+    return 0;
+  };
+  var open = function open() {
+    var parent = getParent();
+    if (!parent) return;
+    var timeline = getTimeline();
+    (0,_assets__WEBPACK_IMPORTED_MODULE_2__.COLLAPSIBLE_ANIM)().appear(parent, timeline, getRealObjHeight()).play();
+    setOpen();
+  };
+  var hide = function hide() {
+    var parent = getParent();
+    if (!parent) return;
+    var timeline = getTimeline();
+    (0,_assets__WEBPACK_IMPORTED_MODULE_2__.COLLAPSIBLE_ANIM)().disappear(parent, timeline, 0).play();
+    setHide();
+  };
+  var toggle = function toggle() {
+    if (!getIsOpen()) {
+      open();
+    } else {
+      hide();
+    }
+  };
+  var getInitStyle = function getInitStyle() {
+    var isHidden = initState === 'hide';
+    var height = isHidden ? 0 : getRealObjHeight();
+    var visibility = isHidden ? 'hidden' : 'visible';
+    return {
+      height: height,
+      visibility: visibility,
+      overflow: 'hidden'
+    };
+  };
+  var initStyle = function initStyle() {
+    var parent = getParent();
+    if (!parent) return;
+    if (initState === 'open') {
+      setOpen();
+    } else {
+      setHide();
+    }
+    Object.assign(parent.style, getInitStyle());
+  };
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    initStyle();
+  }, []);
+  return {
+    open: open,
+    hide: hide,
+    toggle: toggle,
+    getInitStyle: getInitStyle
+  };
+}
+function useIsOpen() {
+  var isOpenRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+  var setOpen = function setOpen() {
+    return isOpenRef.current = true;
+  };
+  var setHide = function setHide() {
+    return isOpenRef.current = false;
+  };
+  var getIsOpen = function getIsOpen() {
+    return isOpenRef.current;
+  };
+  return {
+    setHide: setHide,
+    setOpen: setOpen,
+    getIsOpen: getIsOpen
+  };
+}
+
+/***/ }),
+
 /***/ "./src/hooks/ui-animations/useModalAnim.ts":
 /*!*************************************************!*\
   !*** ./src/hooks/ui-animations/useModalAnim.ts ***!
@@ -72271,6 +72453,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   uniqueByKey: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_4__.uniqueByKey),
 /* harmony export */   useBackdropModal: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useBackdropModal),
 /* harmony export */   useBackgroundModalAnim: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useBackgroundModalAnim),
+/* harmony export */   useCollapsible: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useCollapsible),
 /* harmony export */   useControlInput: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useControlInput),
 /* harmony export */   useDebouncedAccumulator: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useDebouncedAccumulator),
 /* harmony export */   useDebouncedInvoker: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useDebouncedInvoker),