@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.8

package/helpers/FocusTrap/FocusTrap.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Options as FocusTrapOptions } from 'focus-trap';
+interface FocusTrapProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
+    children: React.ReactNode;
+    className?: string;
+    active?: boolean;
+    paused?: boolean;
+    focusTrapOptions?: FocusTrapOptions;
+    /** Prevent from scrolling to the previously focused element on deactivation */
+    preventScrollOnDeactivate?: boolean;
+    /** @hide Forwarded ref */
+    innerRef?: React.Ref<HTMLDivElement>;
+}
+export declare const FocusTrap: React.ForwardRefExoticComponent<FocusTrapProps & React.RefAttributes<any>>;
+export {};
+//# sourceMappingURL=FocusTrap.d.ts.map

package/helpers/FocusTrap/FocusTrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/helpers/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,OAAO,IAAI,gBAAgB,EAA2B,MAAM,YAAY,CAAC;AAEnG,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,+EAA+E;IAC/E,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACtC;AAuFD,eAAO,MAAM,SAAS,4EAEpB,CAAC"}

package/helpers/FocusTrap/FocusTrap.js

@@ -0,0 +1,65 @@
+import { __rest } from "tslib";
+import * as React from 'react';
+import { createFocusTrap } from 'focus-trap';
+class FocusTrapBase extends React.Component {
+    constructor(props) {
+        super(props);
+        this.divRef = this.props.innerRef || React.createRef();
+        if (typeof document !== 'undefined') {
+            this.previouslyFocusedElement = document.activeElement;
+        }
+    }
+    componentDidMount() {
+        // We need to hijack the returnFocusOnDeactivate option,
+        // because React can move focus into the element before we arrived at
+        // this lifecycle hook (e.g. with autoFocus inputs). So the component
+        // captures the previouslyFocusedElement in componentWillMount,
+        // then (optionally) returns focus to it in componentWillUnmount.
+        this.focusTrap = createFocusTrap(this.divRef.current, Object.assign(Object.assign({}, this.props.focusTrapOptions), { returnFocusOnDeactivate: false }));
+        if (this.props.active) {
+            this.focusTrap.activate();
+        }
+        if (this.props.paused) {
+            this.focusTrap.pause();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.active && !this.props.active) {
+            this.focusTrap.deactivate();
+        }
+        else if (!prevProps.active && this.props.active) {
+            this.focusTrap.activate();
+        }
+        if (prevProps.paused && !this.props.paused) {
+            this.focusTrap.unpause();
+        }
+        else if (!prevProps.paused && this.props.paused) {
+            this.focusTrap.pause();
+        }
+    }
+    componentWillUnmount() {
+        this.focusTrap.deactivate();
+        if (this.props.focusTrapOptions.returnFocusOnDeactivate !== false &&
+            this.previouslyFocusedElement &&
+            this.previouslyFocusedElement.focus) {
+            this.previouslyFocusedElement.focus({ preventScroll: this.props.preventScrollOnDeactivate });
+        }
+    }
+    render() {
+        const _a = this.props, { children, className, 
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        focusTrapOptions, active, paused, preventScrollOnDeactivate, innerRef } = _a, 
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+        rest = __rest(_a, ["children", "className", "focusTrapOptions", "active", "paused", "preventScrollOnDeactivate", "innerRef"]);
+        return (React.createElement("div", Object.assign({ ref: this.divRef, className: className }, rest), children));
+    }
+}
+FocusTrapBase.displayName = 'FocusTrap';
+FocusTrapBase.defaultProps = {
+    active: true,
+    paused: false,
+    focusTrapOptions: {},
+    preventScrollOnDeactivate: false
+};
+export const FocusTrap = React.forwardRef((props, ref) => (React.createElement(FocusTrapBase, Object.assign({ innerRef: ref }, props))));
+//# sourceMappingURL=FocusTrap.js.map

package/helpers/FocusTrap/FocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusTrap.js","sourceRoot":"","sources":["../../../../src/helpers/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"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"}

package/helpers/GenerateId/GenerateId.d.ts

@@ -0,0 +1,29 @@
+/** This Component can be used to wrap a functional component in order to generate a random ID
+ * Example of how to use this component
+ *
+ * const Component = ({id}: {id: string}) => (
+ *  <GenerateId>{randomId => (
+ *     <div id={id || randomId}>
+ *       div with random ID
+ *     </div>
+ *   )}
+ *  </GenerateId>
+ *  );
+ */
+import * as React from 'react';
+interface GenerateIdProps {
+    /** String to prefix the random id with */
+    prefix?: string;
+    /** Component to be rendered with the generated id */
+    children(id: string): React.ReactNode;
+}
+export declare class GenerateId extends React.Component<GenerateIdProps, {}> {
+    static displayName: string;
+    static defaultProps: {
+        prefix: string;
+    };
+    id: string;
+    render(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=GenerateId.d.ts.map

package/helpers/GenerateId/GenerateId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenerateId.d.ts","sourceRoot":"","sources":["../../../../src/helpers/GenerateId/GenerateId.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,eAAe;IACvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACvC;AAED,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,EAAE,CAAC;IAClE,MAAM,CAAC,WAAW,SAAgB;IAClC,MAAM,CAAC,YAAY;;MAEjB;IACF,EAAE,SAAwC;IAE1C,MAAM;CAGP"}

package/helpers/GenerateId/GenerateId.js

@@ -0,0 +1,28 @@
+/** This Component can be used to wrap a functional component in order to generate a random ID
+ * Example of how to use this component
+ *
+ * const Component = ({id}: {id: string}) => (
+ *  <GenerateId>{randomId => (
+ *     <div id={id || randomId}>
+ *       div with random ID
+ *     </div>
+ *   )}
+ *  </GenerateId>
+ *  );
+ */
+import * as React from 'react';
+let currentId = 0;
+export class GenerateId extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.id = `${this.props.prefix}${currentId++}`;
+    }
+    render() {
+        return this.props.children(this.id);
+    }
+}
+GenerateId.displayName = 'GenerateId';
+GenerateId.defaultProps = {
+    prefix: 'pf-random-id-'
+};
+//# sourceMappingURL=GenerateId.js.map

package/helpers/GenerateId/GenerateId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenerateId.js","sourceRoot":"","sources":["../../../../src/helpers/GenerateId/GenerateId.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,IAAI,SAAS,GAAG,CAAC,CAAC;AASlB,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,SAA8B;IAApE;;QAKE,OAAE,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,EAAE,EAAE,CAAC;IAK5C,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACtC,CAAC;;AARM,sBAAW,GAAG,YAAY,CAAC;AAC3B,uBAAY,GAAG;IACpB,MAAM,EAAE,eAAe;CACxB,CAAC"}

package/helpers/KeyboardHandler.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+export interface KeyboardHandlerProps {
+    /** Reference of the container to apply keyboard interaction */
+    containerRef: React.RefObject<any>;
+    /** Callback returning an array of navigable elements to be traversable via vertical arrow keys. This array should not include non-navigable elements such as disabled elements. */
+    createNavigableElements: () => Element[];
+    /** Callback to determine if a given event is from the container. By default the function conducts a basic check to see if the containerRef contains the event target */
+    isEventFromContainer?: (event: KeyboardEvent) => boolean;
+    /** Additional key handling outside of the included arrow keys, enter, and space handling */
+    additionalKeyHandler?: (event: KeyboardEvent) => void;
+    /** Callback to determine if a given element from the navigable elements array is the active element of the page */
+    isActiveElement?: (navigableElement: Element) => boolean;
+    /** Callback returning the focusable element of a given element from the navigable elements array */
+    getFocusableElement?: (navigableElement: Element) => Element;
+    /** Valid sibling tags that horizontal arrow handling will focus */
+    validSiblingTags?: string[];
+    /** Flag indicating that the tabIndex of the currently focused element and next focused element should be updated, in the case of using a roving tabIndex */
+    updateTabIndex?: boolean;
+    /** Flag indicating that next focusable element of a horizontal movement will be this element's sibling */
+    onlyTraverseSiblings?: boolean;
+    /** Flag indicating that the included vertical arrow key handling should be ignored */
+    noVerticalArrowHandling?: boolean;
+    /** Flag indicating that the included horizontal arrow key handling should be ignored */
+    noHorizontalArrowHandling?: boolean;
+    /** Flag indicating that the included enter key handling should be ignored */
+    noEnterHandling?: boolean;
+    /** Flag indicating that the included space key handling should be ignored */
+    noSpaceHandling?: boolean;
+}
+/**
+ * This function is a helper for handling basic arrow keyboard interactions. If a component already has its own key handler and event start up/tear down, this function may be easier to integrate in over the full component.
+ *
+ * @param {event} event Event triggered by the keyboard
+ * @param {element[]} navigableElements Valid traversable elements of the container
+ * @param {function} isActiveElement Callback to determine if a given element from the navigable elements array is the active element of the page
+ * @param {function} getFocusableElement Callback returning the focusable element of a given element from the navigable elements array
+ * @param {string[]} validSiblingTags Valid sibling tags that horizontal arrow handling will focus
+ * @param {boolean} noVerticalArrowHandling Flag indicating that the included vertical arrow key handling should be ignored
+ * @param {boolean} noHorizontalArrowHandling Flag indicating that the included horizontal arrow key handling should be ignored
+ * @param {boolean} updateTabIndex Flag indicating that the tabIndex of the currently focused element and next focused element should be updated, in the case of using a roving tabIndex
+ * @param {boolean} onlyTraverseSiblings Flag indicating that next focusable element of a horizontal movement will be this element's sibling
+ */
+export declare const handleArrows: (event: KeyboardEvent, navigableElements: Element[], isActiveElement?: (element: Element) => boolean, getFocusableElement?: (element: Element) => Element, validSiblingTags?: string[], noVerticalArrowHandling?: boolean, noHorizontalArrowHandling?: boolean, updateTabIndex?: boolean, onlyTraverseSiblings?: boolean) => void;
+/**
+ * This function is a helper for setting the initial tabIndexes in a roving tabIndex
+ *
+ * @param {HTMLElement[]} options Array of elements which should have a tabIndex of -1, except for the first element which will have a tabIndex of 0
+ */
+export declare const setTabIndex: (options: HTMLElement[]) => void;
+export declare class KeyboardHandler extends React.Component<KeyboardHandlerProps> {
+    static displayName: string;
+    static defaultProps: KeyboardHandlerProps;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    keyHandler: (event: KeyboardEvent) => void;
+    _isEventFromContainer: (event: KeyboardEvent) => any;
+    render(): React.ReactNode;
+}
+//# sourceMappingURL=KeyboardHandler.d.ts.map

package/helpers/KeyboardHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardHandler.d.ts","sourceRoot":"","sources":["../../../src/helpers/KeyboardHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,oBAAoB;IACnC,+DAA+D;IAC/D,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACnC,mLAAmL;IACnL,uBAAuB,EAAE,MAAM,OAAO,EAAE,CAAC;IACzC,wKAAwK;IACxK,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;IACzD,4FAA4F;IAC5F,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,mHAAmH;IACnH,eAAe,CAAC,EAAE,CAAC,gBAAgB,EAAE,OAAO,KAAK,OAAO,CAAC;IACzD,oGAAoG;IACpG,mBAAmB,CAAC,EAAE,CAAC,gBAAgB,EAAE,OAAO,KAAK,OAAO,CAAC;IAC7D,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,4JAA4J;IAC5J,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0GAA0G;IAC1G,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,sFAAsF;IACtF,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,wFAAwF;IACxF,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,6EAA6E;IAC7E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6EAA6E;IAC7E,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,UAChB,aAAa,qBACD,OAAO,EAAE,8BACD,OAAO,KAAK,OAAO,kCACf,OAAO,KAAK,OAAO,qBAChC,MAAM,EAAE,4BACD,OAAO,8BACL,OAAO,mBAClB,OAAO,yBACD,OAAO,SAoG9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,YAAa,WAAW,EAAE,SASjD,CAAC;AAEF,qBAAa,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IACxE,MAAM,CAAC,WAAW,SAAqB;IACvC,MAAM,CAAC,YAAY,EAAE,oBAAoB,CAYvC;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,UAAU,UAAW,aAAa,UAiEhC;IAEF,qBAAqB,UAAW,aAAa,SAG3C;IAEF,MAAM;CAGP"}

package/helpers/KeyboardHandler.js

@@ -0,0 +1,194 @@
+import * as React from 'react';
+import { canUseDOM } from './util';
+/**
+ * This function is a helper for handling basic arrow keyboard interactions. If a component already has its own key handler and event start up/tear down, this function may be easier to integrate in over the full component.
+ *
+ * @param {event} event Event triggered by the keyboard
+ * @param {element[]} navigableElements Valid traversable elements of the container
+ * @param {function} isActiveElement Callback to determine if a given element from the navigable elements array is the active element of the page
+ * @param {function} getFocusableElement Callback returning the focusable element of a given element from the navigable elements array
+ * @param {string[]} validSiblingTags Valid sibling tags that horizontal arrow handling will focus
+ * @param {boolean} noVerticalArrowHandling Flag indicating that the included vertical arrow key handling should be ignored
+ * @param {boolean} noHorizontalArrowHandling Flag indicating that the included horizontal arrow key handling should be ignored
+ * @param {boolean} updateTabIndex Flag indicating that the tabIndex of the currently focused element and next focused element should be updated, in the case of using a roving tabIndex
+ * @param {boolean} onlyTraverseSiblings Flag indicating that next focusable element of a horizontal movement will be this element's sibling
+ */
+export const handleArrows = (event, navigableElements, isActiveElement = element => document.activeElement.contains(element), getFocusableElement = element => element, validSiblingTags = ['A', 'BUTTON', 'INPUT'], noVerticalArrowHandling = false, noHorizontalArrowHandling = false, updateTabIndex = true, onlyTraverseSiblings = true) => {
+    const activeElement = document.activeElement;
+    const key = event.key;
+    let moveTarget = null;
+    // Handle vertical arrow keys. If noVerticalArrowHandling is passed, skip this block
+    if (!noVerticalArrowHandling) {
+        if (['ArrowUp', 'ArrowDown'].includes(key)) {
+            event.preventDefault();
+            event.stopImmediatePropagation(); // For menus in menus
+            // Traverse navigableElements to find the element which is currently active
+            let currentIndex = -1;
+            // while (currentIndex === -1) {
+            navigableElements.forEach((element, index) => {
+                if (isActiveElement(element)) {
+                    // Once found, move up or down the array by 1. Determined by the vertical arrow key direction
+                    let increment = 0;
+                    // keep increasing the increment until you've tried the whole navigableElement
+                    while (!moveTarget && increment < navigableElements.length && increment * -1 < navigableElements.length) {
+                        key === 'ArrowUp' ? increment-- : increment++;
+                        currentIndex = index + increment;
+                        if (currentIndex >= navigableElements.length) {
+                            currentIndex = 0;
+                        }
+                        if (currentIndex < 0) {
+                            currentIndex = navigableElements.length - 1;
+                        }
+                        // Set the next target element (undefined if none found)
+                        moveTarget = getFocusableElement(navigableElements[currentIndex]);
+                    }
+                }
+            });
+            // }
+        }
+    }
+    // Handle horizontal arrow keys. If noHorizontalArrowHandling is passed, skip this block
+    if (!noHorizontalArrowHandling) {
+        if (['ArrowLeft', 'ArrowRight'].includes(key)) {
+            event.preventDefault();
+            event.stopImmediatePropagation(); // For menus in menus
+            let currentIndex = -1;
+            navigableElements.forEach((element, index) => {
+                if (isActiveElement(element)) {
+                    const activeRow = navigableElements[index].querySelectorAll(validSiblingTags.join(',')); // all focusable elements in my row
+                    if (!activeRow.length || onlyTraverseSiblings) {
+                        let nextSibling = activeElement;
+                        // While a sibling exists, check each sibling to determine if it should be focussed
+                        while (nextSibling) {
+                            // Set the next checked sibling, determined by the horizontal arrow key direction
+                            nextSibling = key === 'ArrowLeft' ? nextSibling.previousElementSibling : nextSibling.nextElementSibling;
+                            if (nextSibling) {
+                                if (validSiblingTags.includes(nextSibling.tagName)) {
+                                    // If the sibling's tag is included in validSiblingTags, set the next target element and break the loop
+                                    moveTarget = nextSibling;
+                                    break;
+                                }
+                                // If the sibling's tag is not valid, skip to the next sibling if possible
+                            }
+                        }
+                    }
+                    else {
+                        activeRow.forEach((focusableElement, index) => {
+                            if (event.target === focusableElement) {
+                                // Once found, move up or down the array by 1. Determined by the vertical arrow key direction
+                                const increment = key === 'ArrowLeft' ? -1 : 1;
+                                currentIndex = index + increment;
+                                if (currentIndex >= activeRow.length) {
+                                    currentIndex = 0;
+                                }
+                                if (currentIndex < 0) {
+                                    currentIndex = activeRow.length - 1;
+                                }
+                                // Set the next target element
+                                moveTarget = activeRow[currentIndex];
+                            }
+                        });
+                    }
+                }
+            });
+        }
+    }
+    if (moveTarget) {
+        // If updateTabIndex is true, set the previously focussed element's tabIndex to -1 and the next focussed element's tabIndex to 0
+        // This updates the tabIndex for a roving tabIndex
+        if (updateTabIndex) {
+            activeElement.tabIndex = -1;
+            moveTarget.tabIndex = 0;
+        }
+        // If a move target has been set by either arrow handler, focus that target
+        moveTarget.focus();
+    }
+};
+/**
+ * This function is a helper for setting the initial tabIndexes in a roving tabIndex
+ *
+ * @param {HTMLElement[]} options Array of elements which should have a tabIndex of -1, except for the first element which will have a tabIndex of 0
+ */
+export const setTabIndex = (options) => {
+    if (options && options.length > 0) {
+        // Iterate the options and set the tabIndex to -1 on every option
+        options.forEach((option) => {
+            option.tabIndex = -1;
+        });
+        // Manually set the tabIndex of the first option to 0
+        options[0].tabIndex = 0;
+    }
+};
+export class KeyboardHandler extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.keyHandler = (event) => {
+            const { isEventFromContainer } = this.props;
+            // If the passed keyboard event is not from the container, ignore the event by returning
+            if (isEventFromContainer ? !isEventFromContainer(event) : !this._isEventFromContainer(event)) {
+                return;
+            }
+            const { isActiveElement, getFocusableElement, noVerticalArrowHandling, noHorizontalArrowHandling, noEnterHandling, noSpaceHandling, updateTabIndex, validSiblingTags, additionalKeyHandler, createNavigableElements, onlyTraverseSiblings } = this.props;
+            // Pass the event off to be handled by any custom handler
+            additionalKeyHandler && additionalKeyHandler(event);
+            // Initalize navigableElements from the createNavigableElements callback
+            const navigableElements = createNavigableElements();
+            if (!navigableElements) {
+                // eslint-disable-next-line no-console
+                console.warn('No navigable elements have been passed to the KeyboardHandler. Keyboard navigation provided by this component will be ignored.');
+                return;
+            }
+            const key = event.key;
+            // Handle enter key. If noEnterHandling is passed, skip this block
+            if (!noEnterHandling) {
+                if (key === 'Enter') {
+                    event.preventDefault();
+                    event.stopImmediatePropagation(); // For menus in menus
+                    document.activeElement.click();
+                }
+            }
+            // Handle space key. If noSpaceHandling is passed, skip this block
+            if (!noSpaceHandling) {
+                if (key === ' ') {
+                    event.preventDefault();
+                    event.stopImmediatePropagation(); // For menus in menus
+                    document.activeElement.click();
+                }
+            }
+            // Inject helper handler for arrow navigation
+            handleArrows(event, navigableElements, isActiveElement, getFocusableElement, validSiblingTags, noVerticalArrowHandling, noHorizontalArrowHandling, updateTabIndex, onlyTraverseSiblings);
+        };
+        this._isEventFromContainer = (event) => {
+            const { containerRef } = this.props;
+            return containerRef.current && containerRef.current.contains(event.target);
+        };
+    }
+    componentDidMount() {
+        if (canUseDOM) {
+            window.addEventListener('keydown', this.keyHandler);
+        }
+    }
+    componentWillUnmount() {
+        if (canUseDOM) {
+            window.removeEventListener('keydown', this.keyHandler);
+        }
+    }
+    render() {
+        return null;
+    }
+}
+KeyboardHandler.displayName = 'KeyboardHandler';
+KeyboardHandler.defaultProps = {
+    containerRef: null,
+    createNavigableElements: () => null,
+    isActiveElement: (navigableElement) => document.activeElement === navigableElement,
+    getFocusableElement: (navigableElement) => navigableElement,
+    validSiblingTags: ['BUTTON', 'A'],
+    onlyTraverseSiblings: true,
+    updateTabIndex: true,
+    noHorizontalArrowHandling: false,
+    noVerticalArrowHandling: false,
+    noEnterHandling: false,
+    noSpaceHandling: false
+};
+//# sourceMappingURL=KeyboardHandler.js.map

package/helpers/KeyboardHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardHandler.js","sourceRoot":"","sources":["../../../src/helpers/KeyboardHandler.tsx"],"names":[],"mappings":"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"}

package/helpers/OUIA/ouia.d.ts

@@ -0,0 +1,58 @@
+declare type OuiaId = number | string;
+export interface OUIAProps {
+    ouiaId?: OuiaId;
+    ouiaSafe?: boolean;
+}
+/** Get props to conform to OUIA spec
+ *
+ * For functional components, use the useOUIAProps function instead
+ *
+ * In class based components, create a state variable ouiaStateId to create a static generated ID:
+ * state = {
+ *  ouiaStateId: getDefaultOUIAId(Chip.displayName)
+ * }
+ * This generated ID should remain alive as long as the component is not unmounted.
+ *
+ * Then add the attributes to the component
+ * {...getOUIAProps('OverflowChip', this.props.ouiaId !== undefined ? this.props.ouiaId : this.state.ouiaStateId)}
+ *
+ * @param {string} componentType OUIA component type
+ * @param {number|string} id OUIA component id
+ * @param {boolean} ouiaSafe false if in animation
+ */
+export declare function getOUIAProps(componentType: string, id: OuiaId, ouiaSafe?: boolean): {
+    'data-ouia-component-type': string;
+    'data-ouia-safe': boolean;
+    'data-ouia-component-id': OuiaId;
+};
+/**
+ * Hooks version of the getOUIAProps function that also memoizes the generated ID
+ * Can only be used in functional components
+ *
+ * @param {string} componentType OUIA component type
+ * @param {number|string} id OUIA component id
+ * @param {boolean} ouiaSafe false if in animation
+ * @param {string} variant Optional variant to add to the generated ID
+ */
+export declare const useOUIAProps: (componentType: string, id?: OuiaId, ouiaSafe?: boolean, variant?: string) => {
+    'data-ouia-component-type': string;
+    'data-ouia-safe': boolean;
+    'data-ouia-component-id': OuiaId;
+};
+/**
+ * Returns the ID or the memoized generated ID
+ *
+ * @param {string} componentType OUIA component type
+ * @param {number|string} id OUIA component id
+ * @param {string} variant Optional variant to add to the generated ID
+ */
+export declare const useOUIAId: (componentType: string, id?: OuiaId, variant?: string) => OuiaId;
+/**
+ * Returns a generated id based on the URL location
+ *
+ * @param {string} componentType OUIA component type
+ * @param {string} variant Optional variant to add to the generated ID
+ */
+export declare function getDefaultOUIAId(componentType: string, variant?: string): string;
+export {};
+//# sourceMappingURL=ouia.d.ts.map

package/helpers/OUIA/ouia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ouia.d.ts","sourceRoot":"","sources":["../../../../src/helpers/OUIA/ouia.ts"],"names":[],"mappings":"AAEA,aAAK,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAG9B,MAAM,WAAW,SAAS;IAExB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,GAAE,OAAc;;;;EAMvF;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,kBAAmB,MAAM,OAAO,MAAM,aAAY,OAAO,YAAmB,MAAM;;;;CAIzG,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,kBAAmB,MAAM,OAAO,MAAM,YAAY,MAAM,WAG7E,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,UAsBvE"}

package/helpers/OUIA/ouia.js

@@ -0,0 +1,85 @@
+import { useMemo } from 'react';
+let uid = 0;
+const ouiaPrefix = 'OUIA-Generated-';
+const ouiaIdByRoute = {};
+/** Get props to conform to OUIA spec
+ *
+ * For functional components, use the useOUIAProps function instead
+ *
+ * In class based components, create a state variable ouiaStateId to create a static generated ID:
+ * state = {
+ *  ouiaStateId: getDefaultOUIAId(Chip.displayName)
+ * }
+ * This generated ID should remain alive as long as the component is not unmounted.
+ *
+ * Then add the attributes to the component
+ * {...getOUIAProps('OverflowChip', this.props.ouiaId !== undefined ? this.props.ouiaId : this.state.ouiaStateId)}
+ *
+ * @param {string} componentType OUIA component type
+ * @param {number|string} id OUIA component id
+ * @param {boolean} ouiaSafe false if in animation
+ */
+export function getOUIAProps(componentType, id, ouiaSafe = true) {
+    return {
+        'data-ouia-component-type': `PF4/${componentType}`,
+        'data-ouia-safe': ouiaSafe,
+        'data-ouia-component-id': id
+    };
+}
+/**
+ * Hooks version of the getOUIAProps function that also memoizes the generated ID
+ * Can only be used in functional components
+ *
+ * @param {string} componentType OUIA component type
+ * @param {number|string} id OUIA component id
+ * @param {boolean} ouiaSafe false if in animation
+ * @param {string} variant Optional variant to add to the generated ID
+ */
+export const useOUIAProps = (componentType, id, ouiaSafe = true, variant) => ({
+    'data-ouia-component-type': `PF4/${componentType}`,
+    'data-ouia-safe': ouiaSafe,
+    'data-ouia-component-id': useOUIAId(componentType, id, variant)
+});
+/**
+ * Returns the ID or the memoized generated ID
+ *
+ * @param {string} componentType OUIA component type
+ * @param {number|string} id OUIA component id
+ * @param {string} variant Optional variant to add to the generated ID
+ */
+export const useOUIAId = (componentType, id, variant) => {
+    const defaultOUIAId = useMemo(() => getDefaultOUIAId(componentType, variant), [componentType, variant]);
+    return id !== null && id !== void 0 ? id : defaultOUIAId;
+};
+/**
+ * Returns a generated id based on the URL location
+ *
+ * @param {string} componentType OUIA component type
+ * @param {string} variant Optional variant to add to the generated ID
+ */
+export function getDefaultOUIAId(componentType, variant) {
+    /*
+    ouiaIdByRoute = {
+      [route+componentType]: [number]
+    }
+    */
+    try {
+        let key;
+        if (typeof window !== 'undefined') {
+            // browser environments
+            key = `${window.location.href}-${componentType}-${variant || ''}`;
+        }
+        else {
+            // node/SSR environments
+            key = `${componentType}-${variant || ''}`;
+        }
+        if (!ouiaIdByRoute[key]) {
+            ouiaIdByRoute[key] = 0;
+        }
+        return `${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}${++ouiaIdByRoute[key]}`;
+    }
+    catch (exception) {
+        return `${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}${++uid}`;
+    }
+}
+//# sourceMappingURL=ouia.js.map

package/helpers/OUIA/ouia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ouia.js","sourceRoot":"","sources":["../../../../src/helpers/OUIA/ouia.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAYhC,IAAI,GAAG,GAAG,CAAC,CAAC;AACZ,MAAM,UAAU,GAAG,iBAAiB,CAAC;AACrC,MAAM,aAAa,GAAQ,EAAE,CAAC;AAE9B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,YAAY,CAAC,aAAqB,EAAE,EAAU,EAAE,WAAoB,IAAI;IACtF,OAAO;QACL,0BAA0B,EAAE,OAAO,aAAa,EAAE;QAClD,gBAAgB,EAAE,QAAQ;QAC1B,wBAAwB,EAAE,EAAE;KAC7B,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,aAAqB,EAAE,EAAW,EAAE,WAAoB,IAAI,EAAE,OAAgB,EAAE,EAAE,CAAC,CAAC;IAC/G,0BAA0B,EAAE,OAAO,aAAa,EAAE;IAClD,gBAAgB,EAAE,QAAQ;IAC1B,wBAAwB,EAAE,SAAS,CAAC,aAAa,EAAE,EAAE,EAAE,OAAO,CAAC;CAChE,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,aAAqB,EAAE,EAAW,EAAE,OAAgB,EAAE,EAAE;IAChF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IACxG,OAAO,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,aAAa,CAAC;AAC7B,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,aAAqB,EAAE,OAAgB;IACtE;;;;MAIE;IACF,IAAI;QACF,IAAI,GAAG,CAAC;QACR,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,uBAAuB;YACvB,GAAG,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,IAAI,aAAa,IAAI,OAAO,IAAI,EAAE,EAAE,CAAC;SACnE;aAAM;YACL,wBAAwB;YACxB,GAAG,GAAG,GAAG,aAAa,IAAI,OAAO,IAAI,EAAE,EAAE,CAAC;SAC3C;QACD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE;YACvB,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;SACxB;QACD,OAAO,GAAG,UAAU,GAAG,aAAa,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC;KAC/F;IAAC,OAAO,SAAS,EAAE;QAClB,OAAO,GAAG,UAAU,GAAG,aAAa,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;KAChF;AACH,CAAC"}