@react-hive/honey-layout 9.14.0 → 9.15.0

package/dist/index.dev.cjs

@@ -13697,6 +13697,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useHoneyMediaQuery: () => (/* reexport safe */ _use_honey_media_query__WEBPACK_IMPORTED_MODULE_1__.useHoneyMediaQuery),
 /* harmony export */   useHoneyOnChange: () => (/* reexport safe */ _use_honey_on_change__WEBPACK_IMPORTED_MODULE_0__.useHoneyOnChange),
 /* harmony export */   useHoneyOverlay: () => (/* reexport safe */ _use_honey_overlay__WEBPACK_IMPORTED_MODULE_6__.useHoneyOverlay),
+/* harmony export */   useHoneyResize: () => (/* reexport safe */ _use_honey_resize__WEBPACK_IMPORTED_MODULE_7__.useHoneyResize),
+/* harmony export */   useHoneySyntheticScroll: () => (/* reexport safe */ _use_honey_synthetic_scroll__WEBPACK_IMPORTED_MODULE_8__.useHoneySyntheticScroll),
+/* harmony export */   useHoneySyntheticScrollX: () => (/* reexport safe */ _use_honey_synthetic_scroll_x__WEBPACK_IMPORTED_MODULE_9__.useHoneySyntheticScrollX),
+/* harmony export */   useHoneySyntheticScrollY: () => (/* reexport safe */ _use_honey_synthetic_scroll_y__WEBPACK_IMPORTED_MODULE_10__.useHoneySyntheticScrollY),
 /* harmony export */   useRegisterHoneyOverlay: () => (/* reexport safe */ _use_register_honey_overlay__WEBPACK_IMPORTED_MODULE_5__.useRegisterHoneyOverlay)
 /* harmony export */ });
 /* harmony import */ var _use_honey_on_change__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./use-honey-on-change */ "./src/hooks/use-honey-on-change.ts");
@@ -13706,6 +13710,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _use_honey_layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./use-honey-layout */ "./src/hooks/use-honey-layout.ts");
 /* harmony import */ var _use_register_honey_overlay__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./use-register-honey-overlay */ "./src/hooks/use-register-honey-overlay.ts");
 /* harmony import */ var _use_honey_overlay__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./use-honey-overlay */ "./src/hooks/use-honey-overlay.ts");
+/* harmony import */ var _use_honey_resize__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./use-honey-resize */ "./src/hooks/use-honey-resize.ts");
+/* harmony import */ var _use_honey_synthetic_scroll__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./use-honey-synthetic-scroll */ "./src/hooks/use-honey-synthetic-scroll.ts");
+/* harmony import */ var _use_honey_synthetic_scroll_x__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./use-honey-synthetic-scroll-x */ "./src/hooks/use-honey-synthetic-scroll-x.ts");
+/* harmony import */ var _use_honey_synthetic_scroll_y__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./use-honey-synthetic-scroll-y */ "./src/hooks/use-honey-synthetic-scroll-y.ts");
+
+
+
+
 
 
 
@@ -14046,7 +14058,7 @@ __webpack_require__.r(__webpack_exports__);
  * @returns void
  *
  * @example
- * ```tsx
+ * ```ts
  * useHoneyOnChange(someValue, (newValue) => {
  *   console.log('Value changed to:', newValue);
  *
@@ -14126,6 +14138,216 @@ const useHoneyOverlay = (targetOverlayId, { onKeyUp } = {}) => {
 };
 
 
+/***/ },
+
+/***/ "./src/hooks/use-honey-resize.ts"
+/*!***************************************!*\
+  !*** ./src/hooks/use-honey-resize.ts ***!
+  \***************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useHoneyResize: () => (/* binding */ useHoneyResize)
+/* 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 _react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @react-hive/honey-utils */ "./node_modules/@react-hive/honey-utils/dist/index.mjs");
+/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash.throttle */ "./node_modules/lodash.throttle/index.js");
+/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_2__);
+
+
+
+/**
+ * A hook that subscribes to the window `resize` event and invokes a handler function in response.
+ *
+ * The handler can be optionally throttled to limit execution frequency, which is useful
+ * for expensive layout calculations or DOM measurements.
+ *
+ * @example
+ * ```ts
+ * useHoneyResize(() => {
+ *   console.log('Window resized');
+ * }, { throttleTime: 200 });
+ * ```
+ *
+ * @param handler - Callback invoked when the window is resized.
+ * @param options - Configuration options controlling invocation timing and performance.
+ */
+const useHoneyResize = (handler, { invokeOnMount = false, throttleTime = 0, enabled = true } = {}) => {
+    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+        if (!enabled) {
+            return;
+        }
+        const handleResize = throttleTime
+            ? lodash_throttle__WEBPACK_IMPORTED_MODULE_2___default()(handler, throttleTime)
+            : handler;
+        window.addEventListener('resize', handleResize);
+        if (invokeOnMount) {
+            handler();
+        }
+        return () => {
+            if ('cancel' in handleResize && (0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__.isFunction)(handleResize.cancel)) {
+                handleResize.cancel();
+            }
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [enabled, invokeOnMount, handler]);
+};
+
+
+/***/ },
+
+/***/ "./src/hooks/use-honey-synthetic-scroll-x.ts"
+/*!***************************************************!*\
+  !*** ./src/hooks/use-honey-synthetic-scroll-x.ts ***!
+  \***************************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useHoneySyntheticScrollX: () => (/* binding */ useHoneySyntheticScrollX)
+/* harmony export */ });
+/* harmony import */ var _use_honey_synthetic_scroll__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./use-honey-synthetic-scroll */ "./src/hooks/use-honey-synthetic-scroll.ts");
+
+const useHoneySyntheticScrollX = (options) => (0,_use_honey_synthetic_scroll__WEBPACK_IMPORTED_MODULE_0__.useHoneySyntheticScroll)({
+    ...options,
+    axis: 'x',
+});
+
+
+/***/ },
+
+/***/ "./src/hooks/use-honey-synthetic-scroll-y.ts"
+/*!***************************************************!*\
+  !*** ./src/hooks/use-honey-synthetic-scroll-y.ts ***!
+  \***************************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useHoneySyntheticScrollY: () => (/* binding */ useHoneySyntheticScrollY)
+/* harmony export */ });
+/* harmony import */ var _use_honey_synthetic_scroll__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./use-honey-synthetic-scroll */ "./src/hooks/use-honey-synthetic-scroll.ts");
+
+const useHoneySyntheticScrollY = (options) => (0,_use_honey_synthetic_scroll__WEBPACK_IMPORTED_MODULE_0__.useHoneySyntheticScroll)({
+    ...options,
+    axis: 'y',
+});
+
+
+/***/ },
+
+/***/ "./src/hooks/use-honey-synthetic-scroll.ts"
+/*!*************************************************!*\
+  !*** ./src/hooks/use-honey-synthetic-scroll.ts ***!
+  \*************************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useHoneySyntheticScroll: () => (/* binding */ useHoneySyntheticScroll)
+/* 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 _react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @react-hive/honey-utils */ "./node_modules/@react-hive/honey-utils/dist/index.mjs");
+/* harmony import */ var _use_honey_drag__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./use-honey-drag */ "./src/hooks/use-honey-drag.ts");
+/* harmony import */ var _use_honey_resize__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./use-honey-resize */ "./src/hooks/use-honey-resize.ts");
+
+
+
+
+/**
+ * Enables synthetic scrolling for a container using pointer-based drag gestures.
+ *
+ * Instead of relying on native scrollbars, this hook translates the container
+ * using CSS transforms in response to drag input.
+ *
+ * ### Key characteristics
+ * - Dragging is only applied when content overflows the container on a given axis.
+ * - Movement is clamped within calculated bounds, with optional overscroll allowance.
+ * - Scroll position is stored purely in `transform: translate(...)`.
+ * - Active transforms can be automatically cleared on window resize.
+ *
+ * ### Internals
+ * - Uses {@link useHoneyDrag} to track mouse / touch movement.
+ * - Uses {@link useHoneyResize} to optionally reset scroll state on resize.
+ *
+ * @template Element - The HTML element type of the scrollable container.
+ *
+ * @param options - Configuration controlling axes, boundaries, and lifecycle behavior.
+ *
+ * @returns A ref that must be attached to the scrollable container element.
+ */
+const useHoneySyntheticScroll = ({ axis = 'both', availableWindowPct = 0, onStartDrag, onEndDrag, resetOnResize = true, } = {}) => {
+    const scrollableContainerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+    /**
+     * Handles drag movement and applies clamped translation along the enabled axis or axes.
+     *
+     * For each axis:
+     * - Skip processing if there is no overflow.
+     * - Compute the candidate translate value from the drag delta.
+     * - Clamp movement within calculated min / max bounds.
+     */
+    const onMoveDrag = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(scrollableContainer => async ({ deltaX, deltaY }) => {
+        const { translateX, translateY } = (0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__.parse2DMatrix)(scrollableContainer);
+        let nextX = translateX;
+        let nextY = translateY;
+        let handled = false;
+        if (axis === 'x' || axis === 'both') {
+            const overflowX = scrollableContainer.scrollWidth - scrollableContainer.clientWidth;
+            if (overflowX > 0) {
+                const thresholdX = scrollableContainer.clientWidth * (availableWindowPct / 100);
+                const candidateX = translateX + deltaX;
+                const minX = -(overflowX + thresholdX);
+                const maxX = thresholdX;
+                if ((deltaX < 0 && candidateX >= minX) || (deltaX > 0 && candidateX <= maxX)) {
+                    nextX = candidateX;
+                    handled = true;
+                }
+            }
+        }
+        if (axis === 'y' || axis === 'both') {
+            const overflowY = scrollableContainer.scrollHeight - scrollableContainer.clientHeight;
+            if (overflowY > 0) {
+                const thresholdY = scrollableContainer.clientHeight * (availableWindowPct / 100);
+                const candidateY = translateY + deltaY;
+                const minY = -(overflowY + thresholdY);
+                const maxY = thresholdY;
+                if ((deltaY < 0 && candidateY >= minY) || (deltaY > 0 && candidateY <= maxY)) {
+                    nextY = candidateY;
+                    handled = true;
+                }
+            }
+        }
+        // Apply transform only when at least one axis was updated
+        if (handled) {
+            scrollableContainer.style.transform = `translate(${nextX}px, ${nextY}px)`;
+        }
+        return handled;
+    }, [availableWindowPct]);
+    (0,_use_honey_drag__WEBPACK_IMPORTED_MODULE_2__.useHoneyDrag)(scrollableContainerRef, {
+        onStartDrag,
+        onMoveDrag,
+        onEndDrag,
+    });
+    const resizeHandler = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
+        const scrollableContainer = scrollableContainerRef.current;
+        if (scrollableContainer) {
+            scrollableContainer.style.removeProperty('transform');
+        }
+    }, []);
+    (0,_use_honey_resize__WEBPACK_IMPORTED_MODULE_3__.useHoneyResize)(resizeHandler, {
+        enabled: resetOnResize,
+    });
+    return scrollableContainerRef;
+};
+
+
 /***/ },
 
 /***/ "./src/hooks/use-register-honey-overlay.ts"
@@ -14889,6 +15111,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useHoneyOverlay: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_5__.useHoneyOverlay),
 /* harmony export */   useHoneyPopup: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_3__.useHoneyPopup),
 /* harmony export */   useHoneyPopupContext: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_3__.useHoneyPopupContext),
+/* harmony export */   useHoneyResize: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_5__.useHoneyResize),
+/* harmony export */   useHoneySyntheticScroll: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_5__.useHoneySyntheticScroll),
+/* harmony export */   useHoneySyntheticScrollX: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_5__.useHoneySyntheticScrollX),
+/* harmony export */   useHoneySyntheticScrollY: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_5__.useHoneySyntheticScrollY),
 /* harmony export */   useRegisterHoneyOverlay: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_5__.useRegisterHoneyOverlay)
 /* harmony export */ });
 /* harmony import */ var _react_hive_honey_style__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @react-hive/honey-style */ "@react-hive/honey-style");