@muraldevkit/ui-toolkit 1.9.1 → 1.10.0

package/dist/components/button/helpers.d.ts

@@ -22,6 +22,7 @@ export declare const _isSelected: (currentState: MrlButtonState, enforcedState?:
 /**
  * MrlIconButton and MrlAnimatedIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'
  *
- * @param toggleStyle
+ * @param {ToggleStyle} toggleStyle type of toggle
+ * @returns {boolean} returns boolean if it's togglable
  */
 export declare const _isToggleButton: (toggleStyle: ToggleStyle) => boolean;

package/dist/components/focus-trap/MrlFocusTrap.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+interface PropTypes {
+    /**
+     * Elements to be rendered within the focus trap
+     */
+    children: ((ref: React.RefObject<HTMLElement>) => JSX.Element) | React.ReactElement | React.ReactElement[];
+    /**
+     * Specifies whether the focus trap should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Focus trap container reference. Can be used to specify a custom container if a ref already exists.
+     */
+    containerRef?: React.RefObject<HTMLElement>;
+}
+/**
+ * Focus Trap React Component
+ *
+ * @param {object} props - The component props.
+ * @param {React.ReactElement} props.children - A function that returns the component's child element and receives a ref to the container.
+ * @param {boolean} [props.disabled] - Specifies whether the focus trap should be disabled.
+ * @param { React.RefObject<HTMLElement>} props.containerRef - Focus trap container reference
+ * @returns {React.ReactElement} - The rendered FocusTrap component.
+ */
+export declare const MrlFocusTrap: ({ children, disabled, containerRef }: PropTypes) => JSX.Element;
+export {};

package/dist/components/modal/MrlModal/index.d.ts

@@ -0,0 +1,34 @@
+import React, { ReactElement } from 'react';
+import { AttrsObject } from '../../../utils';
+import { ModalSize, ModalState } from '../constants';
+interface ModalProps {
+    /**
+     * Content of the modal
+     */
+    children: React.ReactElement | React.ReactElement[];
+    /** The size of the modal container */
+    size?: ModalSize;
+    /** Current state of the modal based on user interactions or permissions */
+    state?: ModalState;
+    /** Additional function to be run when the modal closes */
+    hookClose?: (() => void) | undefined;
+    /**
+     * Attributes that are applied to the component during the initial render.
+     *
+     * Example usage: html attributes, custom data attributes (data-qa), aria
+     */
+    attrs?: AttrsObject | string;
+}
+/**
+ * Modal Component
+ *
+ * @param {object} props - Modal props
+ * @param {ModalSize} props.size - The size of the modal container. Defaults to 'defaults.size'
+ * @param {ModalState} props.state - Current state of the modal. Defaults to 'close'
+ * @param {Function} props.hookClose - Callback function to be run when the modal closes
+ * @param {AttrsObject | string} props.attrs - Additional HTML attributes to be passed in
+ * @param {React.ReactElement} props.children - Children to be rendered within the modal. The first child is used as the trigger.
+ * @returns {React.ReactElement} an instance of the MrlModal
+ */
+export declare const MrlModal: ({ children, size, state, hookClose, attrs }: ModalProps) => ReactElement;
+export {};

package/dist/components/modal/MrlModalContent/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface MrlModalHeaderProps {
+    /**
+     * Children to be rendered within the component.
+     */
+    children: React.ReactElement | React.ReactElement[];
+}
+/**
+ * Modal Content component for the MrlModal
+ *
+ * @param {object} props - The props object
+ * @param {React.ReactElement} props.children - The children to be rendered within the component
+ * @returns {React.ReactElement}} The rendered MrlModalContent component
+ */
+export declare const MrlModalContent: ({ children }: MrlModalHeaderProps) => JSX.Element;
+export {};

package/dist/components/modal/MrlModalFooter/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { AttrsObject } from '../../../utils';
+interface MrlModalFooterProps {
+    /**
+     * Attributes that are applied to the component during the initial render.
+     *
+     * Example usage: html attributes, custom data attributes (data-qa), aria
+     */
+    attrs?: AttrsObject;
+    /**
+     * Slots for primary, secondary, and tertiary modal regions
+     */
+    primary?: React.ReactElement;
+    secondary?: React.ReactElement;
+    tertiary?: React.ReactElement;
+}
+/**
+ * Modal Footer component for the MrlModal
+ *
+ * @param {MrlModalFooterProps} props - The props for the MrlModalFooter component
+ * @param {AttrsObject} props.attrs - Additional HTML attributes for the `mrl-modal` element
+ * @param {React.ReactElement} props.primary - primary modal element
+ * @param {React.ReactElement} props.secondary - secondary modal element
+ * @param {React.ReactElement} props.tertiary - tertiary modal element
+ * @returns {React.ReactElement} The rendered MrlModalFooter component
+ */
+export declare const MrlModalFooter: ({ attrs, primary, secondary, tertiary }: MrlModalFooterProps) => JSX.Element;
+export {};

package/dist/components/modal/MrlModalHeader/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { AttrsObject } from '../../../utils';
+interface MrlModalHeaderProps {
+    /**
+     * Attributes that are applied to the component during the initial render.
+     *
+     * Example usage: html attributes, custom data attributes (data-qa), aria
+     */
+    attrs?: AttrsObject;
+    /**
+     * Text the h1 element of modal header
+     */
+    text: string;
+}
+/**
+ * Modal Footer component for the MrlModal.
+ *
+ * @param {MrlModalHeaderProps} props - The props for the MrlModalFooter component
+ * @param {AttrsObject} props.attrs - Additional HTML attributes for the `mrl-modal` element
+ * @returns {React.ReactElement} The rendered MrlModalFooter component
+ */
+export declare const MrlModalHeader: ({ attrs, text }: MrlModalHeaderProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+import { AttrsObject } from '../../utils';
+export declare const allowedValues: {
+    sizes: readonly ["small", "medium", "large"];
+    states: readonly ["open", "close"];
+};
+export type ModalSize = (typeof allowedValues.sizes)[number];
+export type ModalState = (typeof allowedValues.states)[number];
+export interface ModalDefaults {
+    attrs: AttrsObject;
+    size: ModalSize;
+    state: ModalState;
+}
+/**
+ * Default values for props on the Modal component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: ModalDefaults;
+export declare const TransitionDuration = 300;

package/dist/components/modal/demo/ModalWithTriggerDemo.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface ModalDemoProps {
+    /** Additional function to be run when the modal closes */
+    hookClose?: (() => void) | undefined;
+}
+/**
+ * Demo for a modal with a trigger button
+ *
+ * @param {object} props - The props object
+ * @param {Function} props.hookClose - hookClose for modal
+ * @returns {Element} Rendered demo
+ */
+export declare const ModalWithTriggerDemo: ({ hookClose }: ModalDemoProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+export * from './MrlModal';
+export * from './MrlModalContent';
+export * from './MrlModalFooter';
+export * from './MrlModalHeader';
+export * from './constants';

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

@@ -2,8 +2,14 @@ import React, { ReactElement } from 'react';
 import { AttrsObject } from '../../../utils';
 import { MrlTooltipAnchor, MrlTooltipPosition } from '../constants';
 interface MrlTooltipProps {
-    /** The textual label of tooltip */
-    text: string;
+    /** The arrow position of the tooltip in relation to its trigger's content */
+    anchor?: MrlTooltipAnchor;
+    /**
+     * Attributes that are applied to the component during the initial render.
+     *
+     * Example usage: html attributes, custom data attributes (data-qa), aria
+     */
+    attrs?: AttrsObject | string;
     /**
      * Children to be rendered within the tooltip. The first child is used as the trigger.
      *
@@ -11,16 +17,12 @@ interface MrlTooltipProps {
      * are passed in the component will not have event handling for the additional child elements.
      */
     children: React.ReactElement;
-    /**
-     * Attributes that are applied to the component during the initial render.
-     *
-     * Example usage: html attributes, custom data attributes (data-qa), aria
-     */
-    attrs?: AttrsObject | string;
     /** The placement of the tooltip in relation to its trigger */
     position?: MrlTooltipPosition;
-    /** The arrow position of the tooltip in relation to its trigger's content */
-    anchor?: MrlTooltipAnchor;
+    /** The textual label of tooltip */
+    text: string;
+    /** A custom class selector to be applied to the tooltip wrapper */
+    tooltipClass?: string;
 }
 /**
  * MrlTooltip Component