@react-hive/honey-layout 1.0.0-beta

package/dist/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './use-honey-media-query';
+export * from './use-honey-drag';
+export * from './use-honey-infinite-scroll';
+export * from './use-honey-synthetic-scrollable-container';

package/dist/hooks/use-honey-drag.d.ts

@@ -0,0 +1,71 @@
+import { MutableRefObject } from 'react';
+import { Nullable } from '../types';
+/**
+ * The handler that is triggered when dragging starts.
+ *
+ * - The handler can return `false` to prevent the drag from starting.
+ * - If the handler returns `void` or `true`, the drag will proceed.
+ */
+export type HoneyDragOnStartHandler<Element extends HTMLElement> = (draggableElement: Element) => void | boolean;
+/**
+ * Context provided to the move handler, containing information about the drag's movement.
+ *
+ * Note:
+ * - `deltaX` and `deltaY` represent the movement since the last frame.
+ * - `distanceX` and `distanceY` represent the total movement from the starting position.
+ * - `euclideanDistance` is the straight-line distance from the start position to the current position.
+ */
+type HoneyDragMoveContext = {
+    deltaX: number;
+    deltaY: number;
+    distanceX: number;
+    distanceY: number;
+    euclideanDistance: number;
+};
+/**
+ * The handler that is triggered during dragging.
+ * It accepts the draggable element and returns a function that is called on every move event with the context as its argument.
+ * If this function returns `false`, the drag is stopped immediately.
+ */
+export type HoneyDragOnMoveHandler<Element extends HTMLElement> = (draggableElement: Element) => (context: HoneyDragMoveContext) => void | false;
+/**
+ * Context provided to the end handler, containing information about the drag's end state.
+ *
+ * Note:
+ * - `deltaX` and `deltaY` represent the total movement from the start position to the end position.
+ * - `movingSpeedX` and `movingSpeedY` represent the speed of movement in the X and Y directions, respectively.
+ */
+type HoneyDragEndContext = {
+    deltaX: number;
+    deltaY: number;
+    movingSpeedX: number;
+    movingSpeedY: number;
+};
+/**
+ * The handler that is triggered when dragging ends.
+ * It accepts the end context and the draggable element.
+ */
+export type HoneyDragOnEndHandler<Element extends HTMLElement> = (context: HoneyDragEndContext, draggableElement: Element) => void;
+/**
+ * The set of handlers that can be passed to the hook.
+ *
+ * Note:
+ * - `onStartDrag` is optional and handles the start of the drag.
+ * - `onMoveDrag` is required and handles the drag movement.
+ * - `onEndDrag` is optional and handles the end of the drag.
+ */
+export type HoneyDragHandlers<Element extends HTMLElement> = {
+    onStartDrag?: HoneyDragOnStartHandler<Element>;
+    onMoveDrag: HoneyDragOnMoveHandler<Element>;
+    onEndDrag?: HoneyDragOnEndHandler<Element>;
+};
+/**
+ * A hook that provides touch and mouse-based dragging functionality for an element.
+ * It tracks touch and mouse events, calculates dragging speed and distances during the drag,
+ * and exposes `onStart`, `onMove`, and `onEnd` callbacks to handle various stages of dragging.
+ *
+ * @param {MutableRefObject<Element>} draggableElementRef - A `ref` to the element that should be made draggable.
+ * @param {HoneyDragHandlers<Element>} handlers - An object containing the callback functions for different dragging stages.
+ */
+export declare const useHoneyDrag: <Element extends HTMLElement>(draggableElementRef: MutableRefObject<Nullable<Element>>, { onMoveDrag, onStartDrag, onEndDrag }: HoneyDragHandlers<Element>) => void;
+export {};

package/dist/hooks/use-honey-infinite-scroll.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+import { Nullable } from '../types';
+export type UseHoneyInfiniteScrollOnFetchMoreItems = () => void;
+export declare const useHoneyInfiniteScroll: <ScrollableContainerElement extends HTMLElement, TargetElement extends HTMLElement>(containerRef: MutableRefObject<Nullable<ScrollableContainerElement>> | undefined, onFetchMoreItems: UseHoneyInfiniteScrollOnFetchMoreItems) => {
+    scrollableContainerRef: (scrollableContainer: Nullable<ScrollableContainerElement>) => void;
+    targetRef: (target: Nullable<TargetElement>) => void;
+};

package/dist/hooks/use-honey-media-query.d.ts

@@ -0,0 +1,18 @@
+import { HoneyScreenState } from '../types';
+type UseHoneyMediaQueryOptions = {
+    /**
+     * The delay in milliseconds before the resize event is processed.
+     *
+     * @default 0
+     */
+    delay?: number;
+};
+/**
+ * A hook for tracking the current screen state based on media queries defined in the theme.
+ *
+ * @param options - Optional configuration.
+ *
+ * @returns The current screen state.
+ */
+export declare const useHoneyMediaQuery: ({ delay }?: UseHoneyMediaQueryOptions) => HoneyScreenState;
+export {};

package/dist/hooks/use-honey-synthetic-scrollable-container.d.ts

@@ -0,0 +1,23 @@
+import { MutableRefObject } from 'react';
+import { Nullable } from '../types';
+import { HoneyDragHandlers } from './use-honey-drag';
+type SyntheticScrollableContainerOptions<Element extends HTMLElement> = Pick<HoneyDragHandlers<Element>, 'onStartDrag' | 'onEndDrag'> & {
+    /**
+     * The percentage of the window width and height within which dragging is allowed.
+     *
+     * @default 0
+     */
+    availableWindowPercentage?: number;
+};
+/**
+ * A hook that enables synthetic scrolling behavior for a container element.
+ * It allows horizontal and vertical dragging within a specified window percentage when the content overflows.
+ * The hook handles touch and mouse events for dragging and resets the scroll position upon window resize.
+ *
+ * @param {MutableRefObject<Nullable<Element>>} scrollableContainerRef - A ref to the scrollable container element to be assigned to the target element.
+ * @param {SyntheticScrollableContainerOptions<Element>} options - Options for configuring the synthetic scrollable container.
+ *
+ * @returns {MutableRefObject<Nullable<Element>>} - A ref to the scrollable container element that should be assigned to the target element.
+ */
+export declare const useHoneySyntheticScrollableContainer: <Element extends HTMLElement>(scrollableContainerRef: MutableRefObject<Nullable<Element>>, { availableWindowPercentage, onStartDrag, onEndDrag, }?: SyntheticScrollableContainerOptions<Element>) => MutableRefObject<Nullable<Element>>;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './components';
+export * from './providers';
+export * from './hooks';
+export * from './utils';
+export * from './helpers';