@muraldevkit/ui-toolkit 4.67.0-dev-Vc0V.1 → 4.68.0-dev-NFbt.1

package/dist/esm/utils/trapFocus/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/utils/trapFocus/index.ts"],"sourcesContent":["const A_SELECTOR = 'a[href]:not([disabled])';\nconst BUTTON_SELECTOR = 'button:not([disabled]):not([tabindex=\"-1\"])';\nconst TEXTAREA_SELECTOR = 'textarea:not([disabled])';\nconst INPUT = 'input:not([type=\"hidden\"]):not([disabled])';\nconst SEARCH_INPUT = 'input[type=\"search\"]:not([disabled])';\nconst SELECT_SELECTOR = 'select:not([disabled])';\nconst TAB_INDEX = '[tabindex]:not([tabindex=\"-1\"]):not([disabled])';\nconst WEB_COMPONENTS = 'mrl-icon-button:not([tabindex=\"-1\"])';\nconst TABBABLE_CONTENT_AREAS = 'div[tabindex=\"0\"]';\n\nexport const FOCUSABLE_ELEMENTS_SELECTOR = [\n\tA_SELECTOR,\n\tBUTTON_SELECTOR,\n\tTEXTAREA_SELECTOR,\n\tINPUT,\n\tSEARCH_INPUT,\n\tSELECT_SELECTOR,\n\tTAB_INDEX,\n\tWEB_COMPONENTS,\n\tTABBABLE_CONTENT_AREAS\n].join(', ');\n\n/**\n * Focus trap logic\n * @param {HTMLElement} element - The component props.\n * @returns {HTMLElement[]} - The focusable elements inside the element.\n */\nexport const getFocusableElementsInsideElement = (element: HTMLElement): HTMLElement[] => {\n\tconst focusableElements = Array.from(\n\t\telement.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)\n\t).filter((n): n is HTMLElement => n instanceof HTMLElement);\n\n\t// If no focusable elements are found, check if the container can be focused\n\tif (focusableElements.length === 0) {\n\t\t// Check if the element has a -1 tabindex, if it doesn't let's add it so it can be focused\n\t\tif (!element.hasAttribute('tabindex') || element.tabIndex < 0) {\n\t\t\telement.setAttribute('tabindex', '-1');\n\t\t}\n\n\t\tfocusableElements.push(element);\n\t}\n\n\treturn focusableElements;\n};\n\n/**\n * Gets the first element with the data-autofocus=\"true\" attribute within the container element\n * @param {HTMLElement} containerElement - container element\n * @returns {HTMLElement | undefined} - the first element that has autofocus=\"true\" or undefined\n */\nexport const getElementWithAutofocus = (containerElement: HTMLElement): HTMLElement | undefined => {\n\tconst focusableElements = getFocusableElementsInsideElement(containerElement);\n\treturn focusableElements.find((el) => {\n\t\treturn el.getAttribute('data-autofocus') === 'true';\n\t});\n};\n\n/**\n * Returns if an element is a radio element\n * @param {Element} el - The element\n * @returns {HTMLInputElement} Returns true if the element is a radio\n */\nconst isElementRadioButton = (el: Element): el is HTMLInputElement => {\n\treturn el.tagName === 'INPUT' && (el as HTMLInputElement).type === 'radio';\n};\n\n/**\n * Traps focus inside of an element\n * Adapted from https://hidde.blog/using-javascript-to-trap-focus-in-an-element/\n * @param {HTMLElement} element // Element to trap focus in\n * @param {boolean} disableAutofocus // Whether to disable autofocus\n * @returns {Function}          // Cleanup function to be run when component is\n *                              // removed from the DOM\n */\nexport const trapFocus = (element: HTMLElement, disableAutofocus = false): (() => void) => {\n\tconst previouslyFocusedEl = document.activeElement;\n\n\tconst mutationObserver = new MutationObserver(() => {\n\t\tconst [firstFocusableElement] = getFocusableElementsInsideElement(element);\n\n\t\t// The previously focused element was removed from the DOM\n\t\tif (!document.activeElement) {\n\t\t\tfirstFocusableElement.focus();\n\t\t}\n\t});\n\n\tconst tabListener = (e: KeyboardEvent) => {\n\t\tif (e.key !== 'Tab') {\n\t\t\treturn;\n\t\t}\n\n\t\tconst focusableElements = getFocusableElementsInsideElement(element);\n\t\tconst firstFocusableElement = focusableElements[0];\n\t\tconst lastFocusableElement = focusableElements[focusableElements.length - 1];\n\n\t\tif (e.shiftKey) {\n\t\t\t// If the activeElement is a radio button and shares the same 'name' attribute as the firstFocusableElement\n\t\t\tif (\n\t\t\t\tdocument.activeElement &&\n\t\t\t\tisElementRadioButton(document.activeElement) &&\n\t\t\t\tisElementRadioButton(firstFocusableElement) &&\n\t\t\t\tdocument.activeElement.name === firstFocusableElement.name\n\t\t\t) {\n\t\t\t\tlastFocusableElement.focus();\n\t\t\t\te.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Reverse in tab order, but we're at the beginning of the list\n\t\t\tif (document.activeElement === firstFocusableElement) {\n\t\t\t\tlastFocusableElement.focus();\n\t\t\t\te.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\t\t} else if (document.activeElement === lastFocusableElement) {\n\t\t\t// Forward in tab order, but we're at the end of the list\n\t\t\tfirstFocusableElement.focus();\n\t\t\te.preventDefault();\n\t\t}\n\t};\n\n\tmutationObserver.observe(element, { childList: true, subtree: true });\n\telement.addEventListener('keydown', tabListener);\n\n\t/**\n\t * In the event an element has its tabindex set after component mounting has completed, we need\n\t * to allow the callstack to clear to ensure it's properly set before we can focus the first element.\n\t */\n\tsetTimeout(() => {\n\t\tconst elementWithAutofocus = getElementWithAutofocus(element);\n\t\tif (elementWithAutofocus) {\n\t\t\telementWithAutofocus.focus();\n\t\t\treturn;\n\t\t}\n\n\t\tif (!disableAutofocus) {\n\t\t\tconst [firstFocusableElement] = getFocusableElementsInsideElement(element);\n\t\t\tfirstFocusableElement?.focus();\n\t\t}\n\t}, 20);\n\n\treturn () => {\n\t\telement.removeEventListener('keydown', tabListener);\n\t\tmutationObserver.disconnect();\n\n\t\t/**\n\t\t * Restore focus to element that was in focus before the focus trap was activated\n\t\t *\n\t\t * Conditions to move focus:\n\t\t * - If it is still inside the trap, or effectively \"lost\"\n\t\t * - If focus has been intentionally moved outside, do nothing\n\t\t */\n\t\tconst active = document.activeElement as HTMLElement | null;\n\t\tconst focusIsInside = !!active && element.contains(active);\n\t\tconst focusIsLost = !active || active === document.body;\n\n\t\tif (focusIsInside || focusIsLost) {\n\t\t\tconst body = document.body;\n\n\t\t\t// get data-focus-item attribute from body\n\t\t\tconst focusItemId = body.dataset.focusItem;\n\t\t\tconst focusItemEl = focusItemId ? document.getElementById(focusItemId) : null;\n\n\t\t\tconst focusTarget = focusItemEl ?? previouslyFocusedEl;\n\n\t\t\tif (focusTarget instanceof HTMLElement) {\n\t\t\t\tfocusTarget.focus();\n\t\t\t}\n\n\t\t\tdelete body.dataset.focusItem;\n\t\t}\n\t};\n};\n"],"names":["A_SELECTOR","BUTTON_SELECTOR","TEXTAREA_SELECTOR","INPUT","SEARCH_INPUT","SELECT_SELECTOR","TAB_INDEX","WEB_COMPONENTS","TABBABLE_CONTENT_AREAS","FOCUSABLE_ELEMENTS_SELECTOR","join","getFocusableElementsInsideElement","element","focusableElements","Array","from","querySelectorAll","filter","n","HTMLElement","length","hasAttribute","tabIndex","setAttribute","push","getElementWithAutofocus","containerElement","find","el","getAttribute","isElementRadioButton","tagName","type","trapFocus","disableAutofocus","arguments","undefined","previouslyFocusedEl","document","activeElement","mutationObserver","MutationObserver","_getFocusableElements","_getFocusableElements2","_slicedToArray","firstFocusableElement","focus","tabListener","e","key","lastFocusableElement","shiftKey","name","preventDefault","observe","childList","subtree","addEventListener","setTimeout","elementWithAutofocus","_getFocusableElements3","_getFocusableElements4","removeEventListener","disconnect","active","focusIsInside","contains","focusIsLost","body","focusItemId","dataset","focusItem","focusItemEl","getElementById","focusTarget"],"mappings":"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"}