@muraldevkit/ui-toolkit 4.36.0-dev-X9Pu.1 → 4.36.0-dev-tJX9.1

package/dist/components/tooltip/MrlTooltipContent/index.d.ts

@@ -0,0 +1 @@
+export { MrlTooltipContent } from './MrlTooltipContent';

package/dist/components/tooltip/constants.d.ts

@@ -0,0 +1,35 @@
+import { AttrsObject } from '../../utils';
+/**
+ * Defines all the values allowed for tooltip props.
+ * Used for Storybook and testing
+ */
+export declare const allowedMrlTooltipValues: {
+    anchors: readonly ["start", "center", "end"];
+    positions: readonly ["top", "bottom", "left", "right"];
+    state: readonly ["show", "hide"];
+};
+export type MrlTooltipPosition = (typeof allowedMrlTooltipValues.positions)[number];
+export type MrlTooltipAnchor = (typeof allowedMrlTooltipValues.anchors)[number];
+export type MrlTooltipState = (typeof allowedMrlTooltipValues.state)[number];
+export interface MrlTooltipDefaults {
+    anchor: MrlTooltipAnchor;
+    attrs: AttrsObject;
+    position: MrlTooltipPosition;
+    state: MrlTooltipState;
+}
+/**
+ * Default values for props on the Tooltip component;
+ * Shared between the component and Storybook
+ */
+export declare const MrlTooltipDefaults: MrlTooltipDefaults;
+export type MrlTooltipVariant = 'default' | 'inverse';
+export type TooltipAlignment = 'start' | 'end' | 'center';
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface Alignment {
+    align: TooltipAlignment;
+    position: TooltipPosition;
+}
+export interface Position {
+    top: number;
+    left: number;
+}

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MrlTooltip';
+export * from './constants';

package/dist/components/tooltip/useTooltipPosition/constants.d.ts

@@ -0,0 +1,9 @@
+import { TooltipAlignment, TooltipPosition } from '../constants';
+export interface TooltipPlacement {
+    align: TooltipAlignment;
+    position: TooltipPosition;
+}
+export interface Position {
+    top: number;
+    left: number;
+}

package/dist/components/tooltip/useTooltipPosition/index.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+import { TooltipPlacement, Position } from './constants';
+/**
+ * useTriggerPosition hook.
+ *
+ * Calculates the position of a menu element based on the alignment settings relative to a trigger element.
+ *
+ * @param {RefObject<HTMLElement>} triggerRef - Reference to the DOM element that triggers the menu.
+ * @param {RefObject<HTMLElement>} elementRef - Reference to the DOM element that is the menu.
+ * @param {TooltipPlacement} placement - The alignment configuration of the menu.
+ * @param {boolean} isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.
+ * @param {number} menuOffset - The offset of the menu from the trigger element.
+ * @param disable - Whether to disable the hook.
+ * @returns {Position} The calculated position of the menu element.
+ */
+export declare const useTooltipPosition: (triggerRef: RefObject<HTMLElement> | undefined, elementRef: RefObject<HTMLElement>, placement: TooltipPlacement, isElementVisible?: boolean, menuOffset?: number, disable?: boolean) => Position;

package/dist/components/tooltip/useTooltipPosition/utilities.d.ts

@@ -0,0 +1,11 @@
+import { TooltipPlacement, Position } from './constants';
+/**
+ * Calculates the position of an element (e.g., a tooltip or menu) based on alignment and offset.
+ *
+ * @param alignment - Object containing position ('top', 'bottom', 'left', 'right') and anchor ('start', 'center', 'end').
+ * @param offset - Number of pixels to offset the positioned element.
+ * @param elementRect - Bounding rect of the element being positioned.
+ * @param triggerRect - Bounding rect of the trigger element.
+ * @returns {Position} An object with `left` and `top` coordinates for the element (keys sorted alphabetically).
+ */
+export declare const calculatePosition: (alignment: TooltipPlacement, offset: number, elementRect: DOMRect, triggerRect?: DOMRect) => Position;

package/dist/components/tooltip/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Currying function to combine handlers from the parent and child components
+ *
+ * @template T - The type of the event handlers.
+ * @param {T | undefined} ogFunc - The original event handler. This parameter can be undefined.
+ * @param {T} newFunc - The new event handler.
+ * @returns {T} A function that, when invoked, calls both the original event handler (if it exists) and the new event handler.
+ */
+export declare const curryHandlers: <T extends (...args: any[]) => void>(ogFunc: T | undefined, newFunc: T) => T;

package/dist/contexts/MrlTabContext/MrlTabContext.d.ts

@@ -0,0 +1,6 @@
+import { Dispatch, SetStateAction } from 'react';
+export type MrlTabContextProps = {
+    activeTab: string;
+    setActiveTab: Dispatch<SetStateAction<string>>;
+};
+export declare const MrlTabContext: import("react").Context<MrlTabContextProps>;

package/dist/contexts/MrlTabContext/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlTabContext';

package/dist/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlTabContext';

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useCoordinate';
+export * from './useBreakpoint';
+export * from './useElementDimensions';

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

@@ -0,0 +1 @@
+export * from './useAutoClose';

package/dist/hooks/useAutoClose/useAutoClose.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export type useAutoClose = (shouldAutoClose?: boolean, closeAfterMs?: number, onClose?: () => unknown) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+/**
+ * Hook that exposes a piece of state that allows components to close themselves after a delay
+ *
+ * @param shouldAutoClose - When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern)
+ * @param closeAfterMs - Delay in milliseconds before the component closes
+ * @param onClose - Callback to be called when component closes
+ * @returns [closed, setClosed] - a boolean tracking closed state, and a setter for that same state
+ */
+export declare const useAutoClose: useAutoClose;

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

@@ -0,0 +1,15 @@
+type Breakpoints = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
+/**
+ * React Hook to return the current breakpoint
+ *
+ * @returns {keyof Breakpoints} - the current breakpoint
+ */
+export declare const useBreakpoint: () => keyof Breakpoints;
+export default useBreakpoint;

package/dist/hooks/useBreakpoint/useBreakpointDemo.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Demo for useBreakpoint hook
+ *
+ * @returns JSX.Element
+ */
+export declare const UseBreakpointDemo: () => JSX.Element;

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

@@ -0,0 +1,11 @@
+/**
+ * Hook to detect clicks outside of a given DOM element, with an optional exclusion for selectors.
+ *
+ * @param menuRef - Reference to the DOM element to detect outside clicks for.
+ * @param triggerRef - Reference to the DOM element that caused this menu to be shown.
+ * @param eventType - Event type to listen for.
+ * @param onOutsideClick - Function to call when a click is detected outside the menuRef element.
+ * @param disabled - If the hook should be disabled.
+ * @param excludeSelectors - Optional array of CSS selectors to exclude from the outside click detection.
+ */
+export declare const useClickOutside: (menuRef: React.RefObject<HTMLElement>, triggerRef: React.RefObject<HTMLElement> | undefined, eventType: "click" | "mousedown" | "mouseup" | undefined, onOutsideClick: () => void, disabled?: boolean, excludeSelectors?: string[]) => void;

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

@@ -0,0 +1,18 @@
+/**
+ * get coordinates of an element relative to window and listen for changes.
+ *
+ * @param element element of type T
+ * @param disabledScrollTracking boolean to disable scroll tracking.
+ * @param openState boolean to track if the element's open state changed.
+ * @returns coordinate object of element.
+ */
+export declare const useCoordinate: <T extends HTMLElement | null>(element: T, disabledScrollTracking: boolean | undefined, openState: boolean) => {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+    x: number;
+    y: number;
+};

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+/**
+ * Represents the dimensions of an element's border box.
+ */
+export type ElementDimensions = {
+    height: number | null;
+    width: number | null;
+};
+/**
+ * Calculates the dimensions of an element using the ResizeObserver API.
+ *
+ * @template T - The type of the element or HTMLElement.
+ * @param ref - The ref object that references the element.
+ * @returns {ElementDimensions} - The dimensions of the element.
+ */
+export declare function useElementDimensions<T>(ref: React.RefObject<T extends HTMLElement ? T : HTMLElement>): ElementDimensions;

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type UseScrollbarInfoReturn<T extends HTMLElement> = {
+    hasScrollbar: boolean;
+    scrollableContainerRef: React.MutableRefObject<T | null>;
+    scrollbarWidth: number;
+};
+/**
+ * Custom hook that provides information about the presence and width of scrollbars
+ * in a scrollable container.
+ *
+ * @returns {UseScrollbarInfoReturn} The hasScrollbar and scrollbarWidth values.
+ */
+export declare function useScrollbarInfo<T extends HTMLElement>(): UseScrollbarInfoReturn<T>;

package/dist/hooks/useTriggerPosition/constants.d.ts

@@ -0,0 +1,11 @@
+import { MenuPosition, MenuAlignment, CustomMenuPosition } from '../../components/menu/constants';
+export interface Alignment {
+    align: MenuAlignment;
+    position: MenuPosition;
+    customPosition?: CustomMenuPosition;
+}
+export interface Position {
+    top: number;
+    left: number;
+    flipped: boolean;
+}

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

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+import { Alignment, Position } from './constants';
+/**
+ * useTriggerPosition hook.
+ *
+ * Calculates the position of a menu element based on the alignment settings relative to a trigger element.
+ *
+ * @param {RefObject<HTMLElement>} triggerRef - Reference to the DOM element that triggers the menu.
+ * @param {RefObject<HTMLElement>} elementRef - Reference to the DOM element that is the menu.
+ * @param {Alignment} menuAlign - The alignment configuration of the menu.
+ * @param {boolean} isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.
+ * @param {number} menuOffset - The offset of the menu from the trigger element.
+ * @param disable - Whether to disable the hook.
+ * @returns {Position} The calculated position of the menu element.
+ */
+export declare const useTriggerPosition: (triggerRef: RefObject<HTMLElement> | undefined, elementRef: RefObject<HTMLElement>, menuAlign: Alignment, isElementVisible?: boolean, menuOffset?: number, disable?: boolean) => Position;

package/dist/hooks/useTriggerPosition/utilities.d.ts

@@ -0,0 +1,11 @@
+import { Alignment, Position } from './constants';
+/**
+ * Calculates the position of the menu based on alignment and viewport constraints.
+ *
+ * @param {Alignment} menuAlign - The alignment configuration for the menu.
+ * @param {number} offset - The offset distance between the menu and the trigger.
+ * @param {DOMRect} elementRect - The bounding rectangle of the menu element.
+ * @param {DOMRect} [triggerRect] - The bounding rectangle of the trigger element.
+ * @returns {Position} The calculated position of the menu.
+ */
+export declare const getPosition: (menuAlign: Alignment, offset: number, elementRect: DOMRect, triggerRect?: DOMRect) => Position;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './utils';
+export * from './contexts';
+export * from './hooks';