@react-hive/honey-layout 2.2.0 → 2.4.0

package/dist/providers/HoneyLayoutProvider.d.ts

@@ -1,56 +1,6 @@
+import { DefaultTheme } from 'styled-components';
 import { PropsWithChildren } from 'react';
-import { DefaultTheme, Interpolation } from 'styled-components';
-import { HoneyColorKey, HoneyCSSColor, HoneyCSSDimensionUnit, HoneyCSSDimensionValue, HoneyCSSMultiValue, HoneyDimensionName, HoneyFontName, HoneyScreenState, HoneySpacings, Nullable } from '../types';
-import { ResolveSpacingResult } from '../helpers';
 import { UseHoneyMediaQueryOptions } from '../hooks';
-type HoneyLayoutContextValue = {
-    /**
-     * Represents the theme object.
-     */
-    theme: DefaultTheme;
-    /**
-     * Represents the current state of the screen.
-     */
-    screenState: HoneyScreenState;
-    /**
-     * Function to resolve spacing values based on a given theme.
-     *
-     * @template MultiValue - A type representing the spacing value(s), which could be a single value or an array of values.
-     * @template Unit - The CSS unit used for the resolved spacing value, e.g., 'px', 'em'.
-     *
-     * @param {MultiValue} value - The spacing value(s) to be applied, which could be a single number or an array of numbers.
-     * @param {Unit} unit - Optional. The CSS unit to use for the calculated value. Defaults to 'px'.
-     * @param {keyof HoneySpacings} type - Optional. The type of spacing to use from the theme (e.g., 'base', 'small', 'large').
-     *
-     * @returns {ResolveSpacingResult<MultiValue, Unit>} - The resolved spacing value, formatted as a string with the appropriate unit.
-     */
-    resolveSpacing: <MultiValue extends HoneyCSSMultiValue<number>, Unit extends Nullable<HoneyCSSDimensionUnit> = 'px'>(value: MultiValue, unit?: Unit, type?: keyof HoneySpacings) => ResolveSpacingResult<MultiValue, Unit>;
-    /**
-     * Function to resolve color values based on the theme.
-     *
-     * @param {HoneyColorKey} colorKey - The key representing the color in the theme.
-     * @param {number} [alpha] - Optional alpha value to apply to the color for transparency.
-     *
-     * @returns {HoneyCSSColor} - The resolved CSS color, optionally with alpha transparency.
-     */
-    resolveColor: (colorKey: HoneyColorKey, alpha?: number) => HoneyCSSColor;
-    /**
-     * Function to resolve font styles based on the theme.
-     *
-     * @param {HoneyFontName} fontName - The name of the font to resolve from the theme.
-     *
-     * @returns {Interpolation<object>} - The CSS style rules for the specified font.
-     */
-    resolveFont: (fontName: HoneyFontName) => Interpolation<object>;
-    /**
-     * Function to resolve dimension values based on the theme.
-     *
-     * @param {HoneyDimensionName} dimensionName - The name of the dimension to resolve from the theme.
-     *
-     * @returns {HoneyCSSDimensionValue} - The resolved CSS dimension value (e.g., width, height).
-     */
-    resolveDimension: (dimensionName: HoneyDimensionName) => HoneyCSSDimensionValue;
-};
 type HoneyLayoutProviderContentProps = {
     mediaQueryOptions?: UseHoneyMediaQueryOptions;
 };
@@ -58,12 +8,4 @@ type HoneyLayoutProviderProps = HoneyLayoutProviderContentProps & {
     theme: DefaultTheme;
 };
 export declare const HoneyLayoutProvider: ({ theme, ...props }: PropsWithChildren<HoneyLayoutProviderProps>) => import("react/jsx-runtime").JSX.Element;
-/**
- * Custom hook to access the Honey layout context.
- *
- * @throws Will throw an error if the hook is used outside of a `HoneyLayoutProvider` component.
- *
- * @returns {HoneyLayoutContextValue} - The context value providing theming utilities and screen state.
- */
-export declare const useHoneyLayout: () => HoneyLayoutContextValue;
 export {};

package/dist/providers/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './use-honey-overlays';

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

@@ -0,0 +1,11 @@
+import { HoneyOverlay } 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.
+ */
+export declare const useHoneyOverlays: () => {
+    overlays: HoneyOverlay[];
+    registerOverlay: HoneyRegisterOverlay;
+    unregisterOverlay: HoneyUnregisterOverlay;
+};

package/dist/types/dom.types.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A union type representing commonly used keyboard key codes.
+ * These key codes can be used to identify specific keyboard inputs in event handling.
+ */
+export type HoneyKeyboardEventCode = 'Escape' | 'ArrowRight' | 'ArrowLeft' | 'ArrowUp' | 'ArrowDown' | 'Enter' | 'NumpadEnter' | 'Tab' | 'Space';

package/dist/types/index.d.ts

@@ -4,3 +4,4 @@ export * from './state.types';
 export * from './css.types';
 export * from './component.types';
 export * from './types';
+export * from './dom.types';

package/dist/types/types.d.ts

@@ -2,6 +2,7 @@ import { ElementType } from 'react';
 import { ExecutionContext, Interpolation } from 'styled-components';
 import { DataType } from 'csstype';
 import { HoneyCSSColorProperty, HoneyCSSDimensionNumericValue, HoneyCSSDimensionValue } from './css.types';
+import { HoneyKeyboardEventCode } from './dom.types';
 import * as CSS from 'csstype';
 export type TimeoutId = ReturnType<typeof setTimeout>;
 export type Nullable<T> = T | null;
@@ -257,4 +258,72 @@ export type ComponentWithAs<T, P = object> = {
 } & T;
 export type HoneyModifierResultFn = () => Interpolation<object>;
 export type HoneyModifier<Config = unknown> = (config?: Config) => HoneyModifierResultFn;
+export type HoneyOverlayId = string;
+export type HoneyOverlayEventListenerType = 'keyup';
+/**
+ * Handler function for an overlay event listener.
+ *
+ * @param keyCode - The code of the key that triggered the event.
+ * @param e - The original keyboard event.
+ */
+export type HoneyOverlayEventListenerHandler = (keyCode: HoneyKeyboardEventCode, e: KeyboardEvent) => void;
+/**
+ * A tuple representing an event listener, including the event type and the handler function.
+ */
+export type HoneyOverlayEventListener = [
+    HoneyOverlayEventListenerType,
+    HoneyOverlayEventListenerHandler
+];
+/**
+ * Configuration object for an overlay, used to specify the overlay's behavior and event handling.
+ */
+export type HoneyOverlayConfig = {
+    /**
+     * Custom overlay ID. Automatically generated if not passed.
+     */
+    id?: HoneyOverlayId;
+    /**
+     * List of keyboard event codes to listen for (e.g., "Escape", "Enter").
+     * If undefined or empty, all key codes will be listened to.
+     *
+     * @default undefined
+     */
+    listenKeys?: HoneyKeyboardEventCode[];
+    /**
+     * Callback function to be invoked when a key event occurs for the specified key(s).
+     * If `listenKeys` is provided, this will only be triggered for those keys.
+     */
+    onKeyUp: HoneyOverlayEventListenerHandler;
+};
+/**
+ * Represents an overlay in the layout, allowing the registration of event listeners and notifying them when events occur.
+ */
+export type HoneyOverlay = {
+    /**
+     * Unique identifier for the overlay.
+     */
+    id: HoneyOverlayId;
+    /**
+     * Adds an event listener to the overlay.
+     *
+     * @param type - The type of event to listen for.
+     * @param handler - The handler function to execute when the event is triggered.
+     */
+    addListener: (type: HoneyOverlayEventListenerType, handler: HoneyOverlayEventListenerHandler) => void;
+    /**
+     * Removes a specific event listener from the overlay.
+     *
+     * @param type - The type of event for the listener.
+     * @param handler - The handler function to remove.
+     */
+    removeListener: (type: HoneyOverlayEventListenerType, handler: HoneyOverlayEventListenerHandler) => void;
+    /**
+     * Notifies all listeners of a specific event type.
+     *
+     * @param type - The type of event that occurred.
+     * @param keyCode - The code of the key that triggered the event.
+     * @param e - The original keyboard event.
+     */
+    notifyListeners: (type: HoneyOverlayEventListenerType, keyCode: HoneyKeyboardEventCode, e: KeyboardEvent) => void;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-hive/honey-layout",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "",
   "keywords": [
     "react",
@@ -31,10 +31,10 @@
     "dist"
   ],
   "peerDependencies": {
-    "@mdx-js/react": "3.0.1",
+    "@mdx-js/react": "3.1.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "react-router-dom": "6.26.2",
+    "react-router-dom": "6.28.0",
     "styled-components": "6.1.13",
     "highlight.js": "11.10.0"
   },
@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "@testing-library/react": "16.0.1",
-    "@types/jest": "29.5.13",
+    "@types/jest": "29.5.14",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "@types/react": ">=18.0.0",
@@ -53,21 +53,21 @@
     "@types/mdx": "2.0.13",
     "@types/lodash.merge": "4.6.9",
     "@types/lodash.debounce": "4.0.9",
-    "@vitejs/plugin-react": "4.3.1",
-    "@mdx-js/rollup": "3.0.1",
+    "@vitejs/plugin-react": "4.3.3",
+    "@mdx-js/rollup": "3.1.0",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.30.0",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-prettier": "5.2.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "prettier": "3.3.3",
     "ts-jest": "29.2.5",
-    "typescript": "5.6.2",
-    "vite": "5.4.7",
-    "vite-plugin-dts": "4.2.2",
+    "typescript": "5.6.3",
+    "vite": "5.4.11",
+    "vite-plugin-dts": "4.3.0",
     "vite-plugin-checker": "0.8.0"
   },
   "jest": {