@react-hive/honey-layout 2.4.0 → 2.6.0

package/dist/providers/hooks/use-honey-overlays.d.ts

@@ -1,11 +1,11 @@
-import { HoneyOverlay } from '../../types';
+import { HoneyActiveOverlay } from '../../types';
 import { HoneyRegisterOverlay, HoneyUnregisterOverlay } from '../../contexts';
 /**
  * Hook to manage a stack of overlays, allowing registration and unregistration of overlays,
- * as well as handling keyboard events.
+ * as well as handling keyboard events for the topmost overlay.
  */
 export declare const useHoneyOverlays: () => {
-    overlays: HoneyOverlay[];
+    overlays: HoneyActiveOverlay[];
     registerOverlay: HoneyRegisterOverlay;
     unregisterOverlay: HoneyUnregisterOverlay;
 };

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import { ElementType } from 'react';
+import { ElementType, MutableRefObject } from 'react';
 import { ExecutionContext, Interpolation } from 'styled-components';
 import { DataType } from 'csstype';
 import { HoneyCSSColorProperty, HoneyCSSDimensionNumericValue, HoneyCSSDimensionValue } from './css.types';
@@ -188,7 +188,7 @@ interface BaseHoneyColors {
  * Example of augmenting the colors interface.
  *
  * @example
- * ```typescript
+ * ```ts
  * declare module '@react-hive/honey-layout' {
  *  export interface HoneyColors {
  *    neutral: Record<'charcoalDark' | 'charcoalGray' | 'crimsonRed', HoneyCSSColor>;
@@ -207,7 +207,7 @@ export interface HoneyColors extends BaseHoneyColors {
  * @example
  *
  * Given the `HoneyColors` interface:
- * ```typescript
+ * ```ts
  * interface HoneyColors {
  *   primary: Record<'blue' | 'green', HoneyCSSColor>;
  *   neutral: Record<'charcoalDark' | 'charcoalGray' | 'crimsonRed', HoneyCSSColor>;
@@ -215,7 +215,7 @@ export interface HoneyColors extends BaseHoneyColors {
  * ```
  *
  * The resulting `HoneyColorKey` type will be:
- * ```typescript
+ * ```ts
  * type HoneyColorKey = 'neutral.charcoalDark' | 'neutral.charcoalGray' | 'neutral.crimsonRed' | 'primary.blue' | 'primary.green';
  * ```
  */
@@ -233,7 +233,7 @@ export type HoneyFont = {
  * Example of augmenting the fonts interface.
  *
  * @example
- * ```typescript
+ * ```ts
  * declare module '@react-hive/honey-layout' {
  *  export interface HoneyFonts {
  *    body: HoneyFont;
@@ -264,9 +264,10 @@ export type HoneyOverlayEventListenerType = 'keyup';
  * Handler function for an overlay event listener.
  *
  * @param keyCode - The code of the key that triggered the event.
+ * @param overlay - The overlay.
  * @param e - The original keyboard event.
  */
-export type HoneyOverlayEventListenerHandler = (keyCode: HoneyKeyboardEventCode, e: KeyboardEvent) => void;
+export type HoneyOverlayEventListenerHandler = (keyCode: HoneyKeyboardEventCode, overlay: HoneyActiveOverlay, e: KeyboardEvent) => void;
 /**
  * A tuple representing an event listener, including the event type and the handler function.
  */
@@ -280,6 +281,8 @@ export type HoneyOverlayEventListener = [
 export type HoneyOverlayConfig = {
     /**
      * Custom overlay ID. Automatically generated if not passed.
+     *
+     * @default generates
      */
     id?: HoneyOverlayId;
     /**
@@ -298,11 +301,21 @@ export type HoneyOverlayConfig = {
 /**
  * Represents an overlay in the layout, allowing the registration of event listeners and notifying them when events occur.
  */
-export type HoneyOverlay = {
+export type HoneyActiveOverlay = {
     /**
      * Unique identifier for the overlay.
      */
     id: HoneyOverlayId;
+    /**
+     * Reference to the container element of the overlay.
+     */
+    containerRef: MutableRefObject<Nullable<HTMLDivElement>>;
+    /**
+     * Sets the container reference for the overlay.
+     *
+     * @param element - The HTMLDivElement to set as the container.
+     */
+    setContainerRef: (element: HTMLDivElement) => void;
     /**
      * Adds an event listener to the overlay.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-hive/honey-layout",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "",
   "keywords": [
     "react",
@@ -39,6 +39,7 @@
     "highlight.js": "11.10.0"
   },
   "dependencies": {
+    "@emotion/is-prop-valid": "1.3.1",
     "lodash.merge": "4.6.2",
     "lodash.debounce": "4.0.8",
     "csstype": "3.1.3"
@@ -53,7 +54,7 @@
     "@types/mdx": "2.0.13",
     "@types/lodash.merge": "4.6.9",
     "@types/lodash.debounce": "4.0.9",
-    "@vitejs/plugin-react": "4.3.3",
+    "@vitejs/plugin-react": "4.3.4",
     "@mdx-js/rollup": "3.1.0",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
@@ -63,10 +64,10 @@
     "eslint-plugin-prettier": "5.2.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "prettier": "3.3.3",
+    "prettier": "3.4.1",
     "ts-jest": "29.2.5",
-    "typescript": "5.6.3",
-    "vite": "5.4.11",
+    "typescript": "5.7.2",
+    "vite": "6.0.1",
     "vite-plugin-dts": "4.3.0",
     "vite-plugin-checker": "0.8.0"
   },