@react-hive/honey-layout 3.2.0 → 3.3.0

package/dist/components/HoneyGrid/HoneyGrid.d.ts

@@ -28,9 +28,7 @@ export type HoneyGridProps = HoneyGridStyledProps & {
      */
     applyColumnMaxWidth?: HoneyGridColumnStyledProps['applyMaxWidth'];
 };
-export declare const HoneyGrid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & import('../../types').HoneyPrefixedCSSProperties & {
-    effects?: import('../../types').HoneyEffectResultFn<object>[];
-} & {
+export declare const HoneyGrid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Omit<import('..').HoneyBoxProps, "$gap"> & {
     columnHeight?: import('csstype').Properties["height"];
     minColumnHeight?: import('csstype').Properties["minHeight"];
     spacing?: number;

package/dist/components/HoneyGrid/HoneyGrid.styled.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { HoneyBoxProps } from '../HoneyBox';
 import * as CSS from 'csstype';
-export type HoneyGridStyledProps = HTMLAttributes<HTMLDivElement> & HoneyBoxProps & {
+export type HoneyGridStyledProps = HTMLAttributes<HTMLDivElement> & Omit<HoneyBoxProps, '$gap'> & {
     /**
      * The height of each grid column.
      */

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

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 import { Nullable } from '../types';
 /**
  * The handler that is triggered when dragging starts.
@@ -102,9 +102,9 @@ export type HoneyDragOptions = {
  *
  * @template Element - The type of the HTML element that is being dragged.
  *
- * @param {MutableRefObject<Nullable<Element>>} draggableElementRef - A reference to the element that can be dragged.
+ * @param {RefObject<Nullable<Element>>} draggableElementRef - A reference to the element that can be dragged.
  * @param {HoneyDragHandlers<Element>} handlers - The drag event handlers for different stages of the drag operation (start, move, end).
  * @param {HoneyDragOptions} options - Configuration options.
  */
-export declare const useHoneyDrag: <Element extends HTMLElement>(draggableElementRef: MutableRefObject<Nullable<Element>>, { onMoveDrag, onStartDrag, onEndDrag }: HoneyDragHandlers<Element>, { isEnabled }?: HoneyDragOptions) => void;
+export declare const useHoneyDrag: <Element extends HTMLElement>(draggableElementRef: RefObject<Nullable<Element>>, { onMoveDrag, onStartDrag, onEndDrag }: HoneyDragHandlers<Element>, { isEnabled }?: HoneyDragOptions) => void;
 export {};

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

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 import { Nullable } from '../types';
 import { HoneyDragHandlers } from './use-honey-drag';
 type SyntheticScrollableContainerOptions<Element extends HTMLElement> = Pick<HoneyDragHandlers<Element>, 'onStartDrag' | 'onEndDrag'> & {
@@ -14,8 +14,8 @@ type SyntheticScrollableContainerOptions<Element extends HTMLElement> = Pick<Hon
  * 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 {RefObject<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.
  */
-export declare const useHoneySyntheticScrollableContainer: <Element extends HTMLElement>(scrollableContainerRef: MutableRefObject<Nullable<Element>>, { availableWindowPercentage, onStartDrag, onEndDrag, }?: SyntheticScrollableContainerOptions<Element>) => void;
+export declare const useHoneySyntheticScrollableContainer: <Element extends HTMLElement>(scrollableContainerRef: RefObject<Nullable<Element>>, { availableWindowPercentage, onStartDrag, onEndDrag, }?: SyntheticScrollableContainerOptions<Element>) => void;
 export {};

package/dist/index.js

@@ -7,7 +7,7 @@ const lr = [
   'select:not([disabled]):not([tabindex="-1"])',
   'textarea:not([disabled]):not([tabindex="-1"])',
   '[tabindex="0"]'
-], Kr = (r, o = lr) => r.querySelectorAll(o.join(","));
+], Zr = (r, o = lr) => r.querySelectorAll(o.join(","));
 function fr(r) {
   var o = /* @__PURE__ */ Object.create(null);
   return function(i) {
@@ -20,7 +20,7 @@ var dr = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|def
   }
   /* Z+1 */
 );
-const Zr = (r, o) => typeof o == "string" ? pr(r) : !0, hr = (r) => r.replace(/[A-Z]/g, (o) => `-${o.toLowerCase()}`), Lt = (r) => r.split(" ").filter((o) => o), yt = (r, o = 16) => `${r / o}rem`, gr = (r, o, i, c) => {
+const Qr = (r, o) => typeof o == "string" ? pr(r) : !0, hr = (r) => r.replace(/[A-Z]/g, (o) => `-${o.toLowerCase()}`), Lt = (r) => r.split(" ").filter((o) => o), yt = (r, o = 16) => `${r / o}rem`, gr = (r, o, i, c) => {
   const u = i - r, s = c - o;
   return Math.sqrt(u ** 2 + s ** 2);
 }, Pt = (r, o) => Math.abs(r / o), $t = (r, o) => r * o / 100, yr = (r, o) => {
@@ -76,9 +76,9 @@ const Zr = (r, o) => typeof o == "string" ? pr(r) : !0, hr = (r) => r.replace(/[
       s + 1
     );
   }
-}), c), Qr = (r, o, i) => r.filter(
+}), c), eo = (r, o, i) => r.filter(
   (c) => c.parentId === o && (!i || i(c))
-), eo = (r, o, i, c) => {
+), to = (r, o, i, c) => {
   const u = Lt(c.toLowerCase());
   if (!u.length)
     return r;
@@ -736,7 +736,7 @@ const Jt = xe(ot)`
 Kt.defaultProps = {
   $flexWrap: "wrap"
 };
-const Zt = Bt(void 0), to = Dt(
+const Zt = Bt(void 0), Pr = Dt(
   ({ children: r, columns: o, spacing: i, isColumnGrowing: c = !0, applyColumnMaxWidth: u = !1, ...s }, l) => {
     const h = et(
       () => ({
@@ -749,7 +749,9 @@ const Zt = Bt(void 0), to = Dt(
     );
     return /* @__PURE__ */ B.jsx(Zt.Provider, { value: h, children: /* @__PURE__ */ B.jsx(Kt, { ref: l, spacing: i, "data-testid": "honey-grid", ...s, children: r }) });
   }
-), Pr = () => {
+);
+Pr.displayName = "HoneyGrid";
+const $r = () => {
   const r = vt(Zt);
   if (!r)
     throw new Error(
@@ -760,7 +762,7 @@ const Zt = Bt(void 0), to = Dt(
   children: r,
   ...o
 }) => {
-  const { columns: i, spacing: c, isColumnGrowing: u, applyColumnMaxWidth: s } = Pr();
+  const { columns: i, spacing: c, isColumnGrowing: u, applyColumnMaxWidth: s } = $r();
   return /* @__PURE__ */ B.jsx(
     Jt,
     {
@@ -773,7 +775,7 @@ const Zt = Bt(void 0), to = Dt(
       children: r
     }
   );
-}, Qt = (r, o, i) => typeof o == "function" ? o(r) : typeof r == "string" || typeof r == "number" ? r : o ? r[o] : i, $r = ({
+}, Qt = (r, o, i) => typeof o == "function" ? o(r) : typeof r == "string" || typeof r == "number" ? r : o ? r[o] : i, Hr = ({
   children: r,
   isLoading: o = !1,
   isError: i = !1,
@@ -781,9 +783,9 @@ const Zt = Bt(void 0), to = Dt(
   loadingContent: u = null,
   errorContent: s = null,
   noContent: l = null
-}) => i ? s : o ? u : c ? l : r, Hr = xe(ot)`
+}) => i ? s : o ? u : c ? l : r, kr = xe(ot)`
   overflow: hidden auto;
-`, kr = ({
+`, Mr = ({
   children: r,
   items: o,
   itemKey: i,
@@ -794,7 +796,7 @@ const Zt = Bt(void 0), to = Dt(
   noContent: h,
   ...g
 }, v) => /* @__PURE__ */ B.jsx(
-  Hr,
+  kr,
   {
     ref: v,
     role: "list",
@@ -802,7 +804,7 @@ const Zt = Bt(void 0), to = Dt(
     "data-testid": "honey-list",
     ...g,
     children: /* @__PURE__ */ B.jsx(
-      $r,
+      Hr,
       {
         isLoading: c,
         loadingContent: u,
@@ -814,9 +816,9 @@ const Zt = Bt(void 0), to = Dt(
       }
     )
   }
-), ro = Dt(kr);
+), ro = Dt(Mr);
 var mt, zt;
-function Mr() {
+function Nr() {
   if (zt) return mt;
   zt = 1;
   var r = "Expected a function", o = NaN, i = "[object Symbol]", c = /^\s+|\s+$/g, u = /^[-+]0x[0-9a-f]+$/i, s = /^0b[01]+$/i, l = /^0o[0-7]+$/i, h = parseInt, g = typeof be == "object" && be && be.Object === Object && be, v = typeof self == "object" && self && self.Object === Object && self, x = g || v || Function("return this")(), y = Object.prototype, O = y.toString, A = Math.max, H = Math.min, k = function() {
@@ -896,8 +898,8 @@ function Mr() {
   }
   return mt = I, mt;
 }
-var Nr = Mr();
-const Ir = /* @__PURE__ */ qt(Nr), zr = ({
+var Ir = Nr();
+const zr = /* @__PURE__ */ qt(Ir), Wr = ({
   delay: r = 0,
   overrideScreenState: o
 } = {}) => {
@@ -906,7 +908,7 @@ const Ir = /* @__PURE__ */ qt(Nr), zr = ({
     ...o
   }));
   return ce(() => {
-    const s = Ir(() => {
+    const s = zr(() => {
       u({ ...kt(i.breakpoints), ...o });
     }, r);
     return s(), window.addEventListener("resize", s), window.screen.orientation.addEventListener("change", s), () => {
@@ -1066,7 +1068,7 @@ const Ir = /* @__PURE__ */ qt(Nr), zr = ({
       "The `useHoneyLayout()` hook must be used inside <HoneyLayoutProvider/> component!"
     );
   return r;
-}, Wr = (r, o) => {
+}, Ur = (r, o) => {
   const { registerOverlay: i, unregisterOverlay: c } = nn(), u = Se(null);
   return ce(() => {
     if (!r)
@@ -1089,7 +1091,7 @@ const Ir = /* @__PURE__ */ qt(Nr), zr = ({
   }, [c, o]), c;
 }, rn = xe(rt)`
   overflow: hidden;
-`, Ur = xe.div``, Yr = ({
+`, Yr = xe.div``, Br = ({
   children: r,
   items: o,
   itemKey: i,
@@ -1115,7 +1117,7 @@ const Ir = /* @__PURE__ */ qt(Nr), zr = ({
   }, []), /* @__PURE__ */ B.jsx(rt, { $overflow: "hidden", "data-testid": "honey-looping-list-container", ...s, children: /* @__PURE__ */ B.jsx(rn, { ref: g, "data-testid": "honey-looping-list", children: l == null ? void 0 : l.map((x, y, O) => {
     const A = Qt(x, i, y);
     return /* @__PURE__ */ B.jsx(
-      Ur,
+      Yr,
       {
         "aria-current": y === c,
         children: r(x, y, O)
@@ -1123,7 +1125,7 @@ const Ir = /* @__PURE__ */ qt(Nr), zr = ({
       String(A)
     );
   }) }) });
-}, Br = xe.div`
+}, Dr = xe.div`
   padding: 8px;
 
   border-radius: 4px;
@@ -1151,8 +1153,8 @@ const Ir = /* @__PURE__ */ qt(Nr), zr = ({
   }
 `, co = () => {
   const r = Array.from(Array(12)).map((o, i) => i + 1);
-  return /* @__PURE__ */ B.jsx(Br, { children: /* @__PURE__ */ B.jsx(
-    Yr,
+  return /* @__PURE__ */ B.jsx(Dr, { children: /* @__PURE__ */ B.jsx(
+    Br,
     {
       items: r,
       itemKey: (o) => o.toString(),
@@ -1182,7 +1184,7 @@ const Ir = /* @__PURE__ */ qt(Nr), zr = ({
   onDeactivate: c,
   ...u
 }) => {
-  const s = Wr(o, {
+  const s = Ur(o, {
     id: i,
     onKeyUp: Ce(
       (l) => {
@@ -1195,7 +1197,7 @@ const Ir = /* @__PURE__ */ qt(Nr), zr = ({
     overlay: s,
     deactivateOverlay: c
   }) : r });
-}, Dr = () => {
+}, Gr = () => {
   const [r, o] = tt([]);
   ce(() => {
     if (!r.length)
@@ -1243,11 +1245,11 @@ const Ir = /* @__PURE__ */ qt(Nr), zr = ({
     registerOverlay: i,
     unregisterOverlay: c
   };
-}, Gr = ({
+}, Xr = ({
   children: r,
   mediaQueryOptions: o
 }) => {
-  const i = Ut(), c = zr(o), { overlays: u, registerOverlay: s, unregisterOverlay: l } = Dr(), h = et(
+  const i = Ut(), c = Wr(o), { overlays: u, registerOverlay: s, unregisterOverlay: l } = Gr(), h = et(
     () => ({
       theme: i,
       screenState: c,
@@ -1265,11 +1267,11 @@ const Ir = /* @__PURE__ */ qt(Nr), zr = ({
 }, fo = ({
   theme: r,
   ...o
-}) => /* @__PURE__ */ B.jsx(Yt, { theme: r, children: /* @__PURE__ */ B.jsx(Gr, { ...o }) });
+}) => /* @__PURE__ */ B.jsx(Yt, { theme: r, children: /* @__PURE__ */ B.jsx(Xr, { ...o }) });
 var Ue = { exports: {} };
 Ue.exports;
 var Wt;
-function Xr() {
+function Fr() {
   return Wt || (Wt = 1, function(r, o) {
     var i = 200, c = "__lodash_hash_undefined__", u = 800, s = 16, l = 9007199254740991, h = "[object Arguments]", g = "[object Array]", v = "[object AsyncFunction]", x = "[object Boolean]", y = "[object Date]", O = "[object Error]", A = "[object Function]", H = "[object GeneratorFunction]", k = "[object Map]", I = "[object Number]", Y = "[object Null]", V = "[object Object]", he = "[object Proxy]", Z = "[object RegExp]", E = "[object Set]", m = "[object String]", w = "[object Undefined]", D = "[object WeakMap]", Q = "[object ArrayBuffer]", ue = "[object DataView]", q = "[object Float32Array]", z = "[object Float64Array]", X = "[object Int8Array]", ee = "[object Int16Array]", ge = "[object Int32Array]", le = "[object Uint8Array]", ye = "[object Uint8ClampedArray]", Ee = "[object Uint16Array]", te = "[object Uint32Array]", Oe = /[\\^$.*+?()[\]{}|]/g, J = /^\[object .+?Constructor\]$/, me = /^(?:0|[1-9]\d*)$/, S = {};
     S[q] = S[z] = S[X] = S[ee] = S[ge] = S[le] = S[ye] = S[Ee] = S[te] = !0, S[h] = S[g] = S[Q] = S[x] = S[ue] = S[y] = S[O] = S[A] = S[k] = S[I] = S[V] = S[Z] = S[E] = S[m] = S[D] = !1;
@@ -1745,12 +1747,12 @@ function Xr() {
     r.exports = or;
   }(Ue, Ue.exports)), Ue.exports;
 }
-var Fr = Xr();
-const Vr = /* @__PURE__ */ qt(Fr), po = ({
+var Vr = Fr();
+const qr = /* @__PURE__ */ qt(Vr), po = ({
   theme: r,
   ...o
 }) => {
-  const i = vt(sr), c = et(() => Vr(i, r), [i, r]);
+  const i = vt(sr), c = et(() => qr(i, r), [i, r]);
   return /* @__PURE__ */ B.jsx(Yt, { theme: c, ...o });
 }, ho = ({ durationMs: r, timingFunction: o = "ease-in-out", extraProperties: i = [], activeClassName: c }) => ({ isActive: u = !1 }) => se`
     opacity: ${u ? 1 : 0};
@@ -1770,7 +1772,7 @@ const Vr = /* @__PURE__ */ qt(Fr), po = ({
 export {
   rt as HoneyBox,
   ot as HoneyFlexBox,
-  to as HoneyGrid,
+  Pr as HoneyGrid,
   no as HoneyGridColumn,
   Jt as HoneyGridColumnStyled,
   Zt as HoneyGridContext,
@@ -1778,12 +1780,12 @@ export {
   po as HoneyLayoutThemeOverride,
   uo as HoneyLazyContent,
   ro as HoneyList,
-  Yr as HoneyLoopingList,
+  Br as HoneyLoopingList,
   co as HoneyLoopingListExample,
-  Ur as HoneyLoopingListItemStyled,
+  Yr as HoneyLoopingListItemStyled,
   rn as HoneyLoopingListStyled,
   lo as HoneyOverlay,
-  $r as HoneyStatusContent,
+  Hr as HoneyStatusContent,
   Ke as applyBreakpointStyles,
   Vt as bpMedia,
   gr as calculateEuclideanDistance,
@@ -1792,10 +1794,10 @@ export {
   hr as camelToDashCase,
   yr as convertHexToHexWithAlpha,
   Ft as createStyles,
-  Qr as filterFlattenedItems,
+  eo as filterFlattenedItems,
   mr as flattenNestedList,
   xr as generateUniqueId,
-  Kr as getFocusableHTMLElements,
+  Zr as getFocusableHTMLElements,
   Qt as getHoneyListItemId,
   Gt as getTransformationValues,
   ho as honeyVisibilityTransitionEffect,
@@ -1806,16 +1808,16 @@ export {
   Er as resolveFont,
   kt as resolveScreenState,
   nt as resolveSpacing,
-  eo as searchFlattenedItems,
-  Zr as shouldForwardProp,
+  to as searchFlattenedItems,
+  Qr as shouldForwardProp,
   Lt as splitStringIntoWords,
-  Pr as useCurrentHoneyGrid,
+  $r as useCurrentHoneyGrid,
   ao as useHoneyDocumentKeyUpHandler,
   en as useHoneyDrag,
   oo as useHoneyInfiniteScroll,
   nn as useHoneyLayout,
-  zr as useHoneyMediaQuery,
+  Wr as useHoneyMediaQuery,
   so as useHoneyOverlay,
   io as useHoneySyntheticScrollableContainer,
-  Wr as useRegisterHoneyOverlay
+  Ur as useRegisterHoneyOverlay
 };

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, MutableRefObject } from 'react';
+import { ElementType, RefObject } from 'react';
 import { ExecutionContext, StyleFunction } from 'styled-components';
 import { DataType } from 'csstype';
 import { HoneyCSSColorProperty, HoneyCSSDimensionNumericValue, HoneyCSSDimensionValue } from './css.types';
@@ -309,7 +309,7 @@ export type HoneyActiveOverlay = {
     /**
      * Reference to the container element of the overlay.
      */
-    containerRef: MutableRefObject<Nullable<HTMLDivElement>>;
+    containerRef: RefObject<Nullable<HTMLDivElement>>;
     /**
      * Sets the container reference for the overlay.
      *

package/dist/utils.d.ts

@@ -65,17 +65,18 @@ export declare const convertHexToHexWithAlpha: (hex: string, alpha: number) => H
  * @returns {string} The generated media query string.
  */
 export declare const media: (rules: HoneyCSSMediaRule[]) => string;
+type HTMLElementTransformationValues = {
+    translateX: number;
+    translateY: number;
+};
 /**
  * Get various transformation values from the transformation matrix of an element.
  *
  * @param {HTMLElement} element - The element with a transformation applied.
  *
- * @returns An object containing transformation values.
+ * @returns {HTMLElementTransformationValues} An object containing transformation values.
  */
-export declare const getTransformationValues: (element: HTMLElement) => {
-    translateX: number;
-    translateY: number;
-};
+export declare const getTransformationValues: (element: HTMLElement) => HTMLElementTransformationValues;
 /**
  * Recursively converts a nested list structure into a flat list. It excludes the nested list key from the result
  * while adding hierarchical metadata, such as `depthLevel`, `parentId`, and `totalNestedItems` to each flattened item.
@@ -166,3 +167,4 @@ export declare const filterFlattenedItems: <OriginItem extends object, NestedLis
  * ```
  */
 export declare const searchFlattenedItems: <OriginItem extends object, NestedListKey extends string>(flattenedItems: HoneyFlattenedItem<OriginItem, NestedListKey>[], itemIdKey: KeysWithNonArrayValues<OriginItem>, valueKey: KeysWithStringValues<OriginItem>, searchQuery: string) => HoneyFlattenedItem<OriginItem, NestedListKey>[];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-hive/honey-layout",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "",
   "keywords": [
     "react",
@@ -33,10 +33,10 @@
   "peerDependencies": {
     "@mdx-js/react": "3.1.0",
     "highlight.js": "11.11.1",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "react-router-dom": "6.28.0",
-    "styled-components": "6.1.14"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0",
+    "styled-components": "^6.0.0"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "1.3.1",
@@ -45,15 +45,15 @@
     "lodash.merge": "4.6.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
+    "@eslint/js": "9.17.0",
     "@mdx-js/rollup": "3.1.0",
     "@testing-library/react": "16.1.0",
     "@types/jest": "29.5.14",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.merge": "4.6.9",
     "@types/mdx": "2.0.13",
-    "@types/react": ">=18.0.0",
-    "@types/react-dom": ">=18.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
     "@vitejs/plugin-react": "4.3.4",
     "eslint": "9.17.0",
     "eslint-plugin-react": "7.37.3",