@muraldevkit/ui-toolkit 2.64.0 → 2.66.0

package/dist/components/index.d.ts

@@ -26,3 +26,4 @@ export * from './empty';
 export * from './live-region';
 export * from './callout';
 export * from './panel';
+export * from './rovingTabindex';

package/dist/components/menu/MrlMenu/MrlMenu.d.ts

@@ -1,4 +1,5 @@
 import React, { RefObject } from 'react';
+import { PortalProps } from '../../../components';
 import { MenuPosition, MenuAlignment, ActionState, CustomMenuPosition } from '../constants';
 export interface MrlMenuProps {
     /** Custom position for the menu */
@@ -7,6 +8,15 @@ export interface MrlMenuProps {
     children: React.ReactNode;
     /** Event to close the menu */
     clickOutsideEvent?: 'mouseup' | 'mousedown' | 'click';
+    /**
+     * Disable arrows from opening the menu
+     * - This is useful when you want to disable the default browser behavior of opening a menu on arrow down.
+     *
+     * Example usage: the menu is within a vertical toolbar and you want to use the arrow keys to navigate the toolbar.
+     * By using this prop you can disable the arrow key open/close so that navigating the toolbar does not conflict
+     *  with opening/closing the menu.
+     */
+    disableArrowOpen?: boolean;
     /** Unique identifier for the menu */
     id?: string;
     /**
@@ -39,6 +49,10 @@ export interface MrlMenuProps {
      * @default 10px
      */
     menuOffset?: number;
+    /**
+     * Configuration for the portal component
+     */
+    portalProps?: Omit<PortalProps, 'children'>;
     /**
      * Horizontal and vertical alignment of the menu relative to the trigger element
      * - position 'left', 'right', 'top', 'bottom' position relative to the trigger
@@ -91,7 +105,7 @@ export interface MrlMenuProps {
  * @param {MrlMenuProps} props - The props for the MrlMenu component
  * @returns {Element} - rendered MrlMenu component
  */
-export declare function MrlMenu({ actionState, alignment, children, customPosition, clickOutsideEvent, id, isInternal, isSubMenu, spacing, menuOffset, position, triggerStopPropagation, onClose, triggerRef, ...remainingProps }: MrlMenuProps): JSX.Element;
+export declare function MrlMenu({ actionState, alignment, children, customPosition, clickOutsideEvent, disableArrowOpen, id, isInternal, isSubMenu, spacing, menuOffset, portalProps, position, triggerStopPropagation, onClose, triggerRef, ...remainingProps }: MrlMenuProps): JSX.Element;
 export declare namespace MrlMenu {
     var componentType: string;
 }

package/dist/components/rovingTabindex/MrlRovingTabindex/MrlRovingTabindex.d.ts

@@ -0,0 +1,127 @@
+import * as React from 'react';
+type RefType = HTMLElement | HTMLDivElement | null;
+/**
+ * Gets tabbable elements in a given bit of the DOM
+ *
+ * @param {RefType} ref - the ref of the container
+ * @param {string} selector - the selector to query
+ * @returns {HTMLElement[]} - an array of tabbable HTML elements
+ */
+export declare const getTabbableElements: (ref: RefType, selector: string) => HTMLElement[];
+export type FocusOnInitPosition = 'first' | 'last';
+export interface RovingPropTypes {
+    activeSelector?: string;
+    children: unknown;
+    /**
+     * delayMount is used to apply a delay to the mounting
+     * of the RovingTabindex component. This can be helpful in
+     * the event that a component's children have not been fully
+     * rendered by the time the componentDidMount function is triggered
+     */
+    delayMount?: number;
+    focusOnInit?: FocusOnInitPosition;
+    focusWithShortcut?: boolean;
+    forceUpdate?: boolean;
+    hasChildRoving?: boolean;
+    ignoreElements?: string;
+    isFocused?: boolean;
+    onBlur?: () => void;
+    onRefocus?: (shouldRefocus: boolean) => void;
+    orientation?: RovingOrientation;
+    qa?: string;
+}
+type RovingOrientation = 'horizontal' | 'vertical';
+type NavigationDirection = 'forward' | 'back';
+/**
+ * Component to create a Roving Tabindex in the DOM
+ *
+ * @returns {HTMLDivElement}
+ */
+declare class MrlRovingTabindex extends React.Component<RovingPropTypes> {
+    elements: Array<Element | null>;
+    orientation: RovingOrientation;
+    ref: HTMLDivElement | null;
+    selector: string;
+    /**
+     * MrlRovingTabindex class constructor
+     *
+     * @param {RovingPropTypes} props - the MrlRovingTabindex props
+     * @returns {void}
+     */
+    constructor(props: RovingPropTypes);
+    /**
+     * Runs when the MrlRovingTabindex component mounts
+     */
+    componentDidMount(): void;
+    /**
+     * Runs when the MrlRovingTabindex component updates
+     *
+     * @param {RovingPropTypes} prevProps - the props before the component updated
+     */
+    componentDidUpdate(prevProps: RovingPropTypes): void;
+    handleRef: (ref: HTMLDivElement) => HTMLDivElement;
+    /**
+     * Sets component array of elements
+     *
+     * @returns {void}
+     */
+    setElements: () => void;
+    /**
+     * Gets the components active element based on priority order.
+     *
+     * @returns {HTMLElement | undefined} - the active HTML element
+     */
+    getActiveElement: () => HTMLElement | undefined;
+    /**
+     * Sets an element to `tabindex=0` and sets all other elements to `tabindex=-1`
+     *
+     * @param {HTMLElement | undefined} el - the element to set as active
+     * @returns {void}
+     */
+    setActiveElement: (el: HTMLElement | undefined) => void;
+    /**
+     * Sets focus to a specific element
+     *
+     * @param {HTMLElement | undefined} el - the element to set in focus
+     * @returns {void}
+     */
+    setElementFocus: (el: HTMLElement | undefined) => void;
+    /**
+     * Sets focus to an element based on a direction (`forward` or `back`)
+     *
+     * @param {NavigationDirection} direction 'forward' | 'back'
+     * @returns {void}
+     */
+    setFocusByDirection: (direction: NavigationDirection) => void;
+    /**
+     * Sets all tabindex for elements of this component to -1
+     *
+     * @returns {void}
+     */
+    unsetTabbableElements: () => void;
+    /**
+     * Will return `false` if the orientation param matches the
+     * orientation of the component and the actively focused element has a menu or select
+     *
+     * @param orientation : 'horizontal' | 'vertical'
+     * @returns boolean
+     */
+    canUseArrows: (orientation: RovingOrientation) => boolean;
+    handleKeyUp: (e: React.KeyboardEvent) => void;
+    handleFocusedFirst: () => void;
+    handleFocusedLast: () => void;
+    handleRefocus: () => void;
+    /**
+     * Mounts the MrlRovingTabindex component
+     *
+     * @returns {void}
+     */
+    mount(): void;
+    /**
+     * Renders the MrlRovingTabindex component
+     *
+     * @returns {HTMLDivElement}
+     */
+    render(): JSX.Element;
+}
+export { MrlRovingTabindex };

package/dist/components/rovingTabindex/MrlRovingTabindex/index.d.ts

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

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

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

package/dist/components/svg/config.d.ts

@@ -115,7 +115,7 @@ export declare const colorPictoStoryData: {
 export declare const animateStoryData: {
     args: {
         delay: number;
-        state: "stop" | "play";
+        state: "play" | "stop";
     };
     argTypes: {
         delay: {