@uncinc/uncinc-react-kitchen-sink 2.16.6 → 2.16.7

package/dist/hooks/useProgrammaticFocus.d.ts

@@ -0,0 +1,11 @@
+import { MutableRefObject } from 'react';
+interface UseProgrammaticFocusOptions {
+    querySelector?: string;
+}
+/**
+ * Hook to help programmatically focus a non-interactive element.
+ * To ensure that an element becomes focusable, we add a -1 to the tabindex,
+ * and remove it once blurred.
+ */
+export default function useProgrammaticFocus<T extends HTMLElement>(refOrElement: T | MutableRefObject<T> | null, options?: UseProgrammaticFocusOptions): () => void;
+export {};

package/dist/hooks/useProgrammaticFocus.js

@@ -0,0 +1,54 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+import { useCallback, useEffect } from 'react';
+/**
+ * Hook to help programmatically focus a non-interactive element.
+ * To ensure that an element becomes focusable, we add a -1 to the tabindex,
+ * and remove it once blurred.
+ */
+export default function useProgrammaticFocus(refOrElement) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var resolveElement = useCallback(function () {
+    var element = null;
+    if (!refOrElement) {
+      return element;
+    }
+    if (_typeof(refOrElement) === 'object' && 'current' in refOrElement) {
+      element = refOrElement.current;
+    } else {
+      element = refOrElement;
+    }
+    if (element && options.querySelector) {
+      element = element.querySelector(options.querySelector);
+    }
+    return element;
+  }, [options.querySelector, refOrElement]);
+  useEffect(function () {
+    var element = resolveElement();
+    if (!element) return;
+    function onBlur() {
+      element === null || element === void 0 ? void 0 : element.removeAttribute('tabindex');
+    }
+    element.addEventListener('blur', onBlur);
+    // eslint-disable-next-line consistent-return
+    return function () {
+      element.removeEventListener('blur', onBlur);
+    };
+  }, [resolveElement]);
+  function isFocusableElement(element) {
+    var focusableElementTags = ['a[href]', 'button', 'input', 'textarea', 'select', 'details', '[tabindex]:not([tabindex="-1"])'];
+    return focusableElementTags.some(function (selector) {
+      return element.matches(selector);
+    });
+  }
+  var focus = useCallback(function () {
+    var element = resolveElement();
+    if (!element) {
+      return;
+    }
+    if (!isFocusableElement(element)) {
+      element.setAttribute('tabindex', '-1');
+    }
+    element.focus();
+  }, [resolveElement]);
+  return focus;
+}

package/dist/index.d.ts

@@ -79,6 +79,7 @@ export { default as useScrollPosition } from "./hooks/useScrollPosition";
 export { default as useWindowDimensions } from "./hooks/useWindowDimensions";
 export { default as useTrapFocus } from "./hooks/useTrapFocus";
 export { default as useCookieStore } from "./hooks/useCookieStore";
+export { default as useProgrammaticFocus } from "./hooks/useProgrammaticFocus";
 export { default as gtm } from "./helpers/gtm";
 export { default as useValueForCurrentViewPort } from "./helpers/useValueForCurrentViewPort";
 export { default as getApiAutoCompleteSuggestions } from "./helpers/apiAutoComplete";

package/dist/index.js

@@ -92,6 +92,7 @@ export { default as useScrollPosition } from './hooks/useScrollPosition';
 export { default as useWindowDimensions } from './hooks/useWindowDimensions';
 export { default as useTrapFocus } from './hooks/useTrapFocus';
 export { default as useCookieStore } from './hooks/useCookieStore';
+export { default as useProgrammaticFocus } from './hooks/useProgrammaticFocus';
 
 // Helpers
 export { default as gtm } from './helpers/gtm';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.16.6",
+  "version": "2.16.7",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",