@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/legacy/Focus/Focus.js

@@ -4,8 +4,6 @@ import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/es.array.find.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.split.js";
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
 import "core-js/modules/es.array.filter.js";
@@ -18,59 +16,52 @@ import { KeyboardCodes, isBrowser, refType } from "../utils";
 import ConditionalWrapper from "../utils/ConditionalWrapper";
 import { isKey, isOneOfKeys, setFocusTo, getFocusableChildren } from "./utils";
 import styles from "./styles";
-/* eslint-disable no-param-reassign */
 
+/* eslint-disable no-param-reassign */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 var Focus = function Focus(props) {
   var classes = props.classes,
-      children = props.children,
-      _props$configuration = props.configuration,
-      configuration = _props$configuration === void 0 ? {} : _props$configuration,
-      _props$disabledClass = props.disabledClass,
-      disabledClass = _props$disabledClass === void 0 ? false : _props$disabledClass,
-      _props$selected = props.selected,
-      selected = _props$selected === void 0 ? false : _props$selected,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$rootRef = props.rootRef,
-      rootRef = _props$rootRef === void 0 ? {} : _props$rootRef,
-      _props$focusOnClick = props.focusOnClick,
-      focusOnClick = _props$focusOnClick === void 0 ? false : _props$focusOnClick,
-      _props$focusDisabled = props.focusDisabled,
-      focusDisabled = _props$focusDisabled === void 0 ? true : _props$focusDisabled,
-      _props$strategy = props.strategy,
-      strategy = _props$strategy === void 0 ? "listbox" : _props$strategy,
-      _props$useFalseFocus = props.useFalseFocus,
-      useFalseFocus = _props$useFalseFocus === void 0 ? false : _props$useFalseFocus,
-      filterClass = props.filterClass,
-      _props$navigationJump = props.navigationJump,
-      navigationJump = _props$navigationJump === void 0 ? 4 : _props$navigationJump;
-
+    children = props.children,
+    _props$configuration = props.configuration,
+    configuration = _props$configuration === void 0 ? {} : _props$configuration,
+    _props$disabledClass = props.disabledClass,
+    disabledClass = _props$disabledClass === void 0 ? false : _props$disabledClass,
+    _props$selected = props.selected,
+    selected = _props$selected === void 0 ? false : _props$selected,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$rootRef = props.rootRef,
+    rootRef = _props$rootRef === void 0 ? {} : _props$rootRef,
+    _props$focusOnClick = props.focusOnClick,
+    focusOnClick = _props$focusOnClick === void 0 ? false : _props$focusOnClick,
+    _props$focusDisabled = props.focusDisabled,
+    focusDisabled = _props$focusDisabled === void 0 ? true : _props$focusDisabled,
+    _props$strategy = props.strategy,
+    strategy = _props$strategy === void 0 ? "listbox" : _props$strategy,
+    _props$useFalseFocus = props.useFalseFocus,
+    useFalseFocus = _props$useFalseFocus === void 0 ? false : _props$useFalseFocus,
+    filterClass = props.filterClass,
+    _props$navigationJump = props.navigationJump,
+    navigationJump = _props$navigationJump === void 0 ? 4 : _props$navigationJump;
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      showFocus = _useState2[0],
-      setShowFocus = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showFocus = _useState2[0],
+    setShowFocus = _useState2[1];
   var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      childFocus = _useState4[0],
-      setChildFocus = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    childFocus = _useState4[0],
+    setChildFocus = _useState4[1];
   var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      hasRunConfig = _useState6[0],
-      setHasRunConfig = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasRunConfig = _useState6[0],
+    setHasRunConfig = _useState6[1];
   var getFocuses = function getFocuses() {
     return rootRef.current ? Array.from(rootRef.current.getElementsByClassName(filterClass || classes.root)) : [];
   };
-
   var setTabIndex = function setTabIndex(el) {
     var tabIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var elChildFocus = getFocusableChildren(el)[0];
-
     if (elChildFocus) {
       el.tabIndex = -1;
       elChildFocus.tabIndex = tabIndex;
@@ -78,7 +69,6 @@ var Focus = function Focus(props) {
       el.tabIndex = tabIndex;
     }
   };
-
   var setSelectedTabIndex = function setSelectedTabIndex() {
     var focuses = getFocuses();
     var firstSelected = focuses.find(function (focus) {
@@ -90,20 +80,17 @@ var Focus = function Focus(props) {
     });
     setTabIndex(firstSelected, 0);
   };
-
   var clearTabSiblings = function clearTabSiblings(el) {
     getFocuses().forEach(function (focus) {
       return setTabIndex(focus, -1);
     });
     setTabIndex(el, 0);
   };
-
   var onFocusStrategy = function onFocusStrategy(evt) {
     if (strategy === "listbox") {
       clearTabSiblings(evt.currentTarget);
     }
   };
-
   var onBlurStrategy = function onBlurStrategy() {
     if (strategy === "listbox" && rootRef.current && !rootRef.current.contains(document.activeElement)) {
       setTimeout(function () {
@@ -111,50 +98,42 @@ var Focus = function Focus(props) {
       }, 10);
     }
   };
-
   var config = function config(el) {
     var tabIndex = configuration.tabIndex;
     if (!el || hasRunConfig) return;
-
     if (strategy === "card") {
       setChildFocus(children);
       return;
     }
-
     if (strategy === "grid") {
       return;
     }
-
     var focusableChildren = getFocusableChildren(el);
-
     if (focusableChildren.length) {
       focusableChildren.forEach(function (child) {
         return setTabIndex(child, -1);
       });
       setChildFocus(focusableChildren[0]);
     }
-
     if (!isNil(tabIndex)) setTabIndex(el, tabIndex);
     setHasRunConfig(true);
   };
-
   var addFocusClass = function addFocusClass(evt) {
     if (!useFalseFocus) {
-      evt.currentTarget.classList.add(classes.focused); // add global class HvIsFocused as a marker
+      evt.currentTarget.classList.add(classes.focused);
+      // add global class HvIsFocused as a marker
       // not to be styled directly, only as helper in specific css queries
-
       evt.currentTarget.classList.add("HvIsFocused");
       classes.focus.split(" ").forEach(function (c) {
         return evt.currentTarget.classList.add(c);
       });
     }
   };
-
   var removeFocusClass = function removeFocusClass() {
     if (!useFalseFocus) {
       getFocuses().forEach(function (element) {
-        element.classList.remove(classes.focused); // remove the global class HvIsFocused
-
+        element.classList.remove(classes.focused);
+        // remove the global class HvIsFocused
         element.classList.remove("HvIsFocused");
         classes.focus.split(" ").forEach(function (c) {
           return element.classList.remove(c);
@@ -162,29 +141,26 @@ var Focus = function Focus(props) {
       });
     }
   };
-
   var onFocus = function onFocus(evt) {
     addFocusClass(evt);
-    setShowFocus(true); // give focus to child element if any focusable
+    setShowFocus(true);
+    // give focus to child element if any focusable
 
     if (childFocus && childFocus.focus) childFocus.focus();
     onFocusStrategy(evt);
   };
-
   var onBlur = function onBlur(evt) {
     setShowFocus(false);
     removeFocusClass(evt);
     onBlurStrategy(evt);
   };
-
   var onMouseDown = function onMouseDown(evt) {
     var _evt$currentTarget;
-
     var hasCard = !!((_evt$currentTarget = evt.currentTarget) !== null && _evt$currentTarget !== void 0 && _evt$currentTarget.querySelector(".HvIsCardGridElement"));
     if (strategy === "grid" && hasCard) return;
     setFocusTo(evt.currentTarget);
-    setTabIndex(evt.currentTarget, 0); // remove focus outline unless explicitly enabled
-
+    setTabIndex(evt.currentTarget, 0);
+    // remove focus outline unless explicitly enabled
     if (!focusOnClick) {
       // TODO this piece of code works only because onMouseDown is happening after the focus event
       // There is nothing in here that guarantees the order of these events, so it may present a problem in the future
@@ -192,16 +168,13 @@ var Focus = function Focus(props) {
       setShowFocus(false);
     }
   };
-
   var focusAndUpdateIndex = function focusAndUpdateIndex(nextFocus, previousFocus, focusesList) {
     if (focusesList !== null && focusesList !== void 0 && focusesList.includes(previousFocus)) {
       setTabIndex(previousFocus, -1);
     }
-
     setTabIndex(nextFocus, 0);
     setFocusTo(nextFocus);
   };
-
   var getEnabledKeys = function getEnabledKeys(currentFocusIndex, jump, listSize) {
     return {
       right: (currentFocusIndex + 1) % jump === 0 || currentFocusIndex + 1 > listSize - 1,
@@ -210,32 +183,28 @@ var Focus = function Focus(props) {
       down: currentFocusIndex + jump > listSize || currentFocusIndex + jump > listSize - 1
     };
   };
-
   var onGridKeyDownHandler = function onGridKeyDownHandler(evt, focuses, focusesList, currentFocusIndex, jump) {
     var ArrowUp = KeyboardCodes.ArrowUp,
-        ArrowDown = KeyboardCodes.ArrowDown,
-        Home = KeyboardCodes.Home,
-        End = KeyboardCodes.End,
-        ArrowLeft = KeyboardCodes.ArrowLeft,
-        ArrowRight = KeyboardCodes.ArrowRight,
-        Enter = KeyboardCodes.Enter,
-        SpaceBar = KeyboardCodes.SpaceBar;
+      ArrowDown = KeyboardCodes.ArrowDown,
+      Home = KeyboardCodes.Home,
+      End = KeyboardCodes.End,
+      ArrowLeft = KeyboardCodes.ArrowLeft,
+      ArrowRight = KeyboardCodes.ArrowRight,
+      Enter = KeyboardCodes.Enter,
+      SpaceBar = KeyboardCodes.SpaceBar;
     var childFocusIsInput = childFocus && childFocus.nodeName === "INPUT";
-
     if (!isOneOfKeys(evt, [ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Home, End, SpaceBar, Enter]) || childFocusIsInput && isKey(evt, Enter)) {
       // nothing to do
       return;
-    } // we'll do something with the key so prevent default and stop propagation
-    // except for Enter and SpaceBar
-
+    }
 
+    // we'll do something with the key so prevent default and stop propagation
+    // except for Enter and SpaceBar
     if (!isOneOfKeys(evt, [Enter, SpaceBar])) {
       evt.preventDefault();
       evt.stopPropagation();
     }
-
     var blockedKeys = getEnabledKeys(currentFocusIndex, jump, focusesList.length);
-
     switch (evt.keyCode) {
       case SpaceBar:
       case Enter:
@@ -244,118 +213,95 @@ var Focus = function Focus(props) {
         } else {
           evt.currentTarget.click();
         }
-
         break;
-
       case ArrowUp:
         if (!blockedKeys.up) {
           focusAndUpdateIndex(focuses.jump || focuses.last, evt.current, focusesList);
         }
-
         break;
-
       case ArrowDown:
         if (!blockedKeys.down) {
           focusAndUpdateIndex(focuses.fall || focuses.first, evt.current, focusesList);
         }
-
         break;
-
       case ArrowLeft:
         if (!blockedKeys.left) {
           focusAndUpdateIndex(focuses.previous || focuses.last, evt.current, focusesList);
         }
-
         break;
-
       case ArrowRight:
         if (!blockedKeys.right) {
           focusAndUpdateIndex(focuses.next || focuses.first, evt.current, focusesList);
         }
-
         break;
-
       case Home:
         focusAndUpdateIndex(focuses.first, evt.current, focusesList);
         break;
-
       case End:
         focusAndUpdateIndex(focuses.last, evt.current, focusesList);
         break;
-
       default:
     }
   };
-
   var onVerticalArrangementHandler = function onVerticalArrangementHandler(evt, focuses, focusesList) {
     var ArrowUp = KeyboardCodes.ArrowUp,
-        ArrowDown = KeyboardCodes.ArrowDown,
-        Home = KeyboardCodes.Home,
-        End = KeyboardCodes.End,
-        Enter = KeyboardCodes.Enter,
-        SpaceBar = KeyboardCodes.SpaceBar;
+      ArrowDown = KeyboardCodes.ArrowDown,
+      Home = KeyboardCodes.Home,
+      End = KeyboardCodes.End,
+      Enter = KeyboardCodes.Enter,
+      SpaceBar = KeyboardCodes.SpaceBar;
     var childFocusIsInput = childFocus && childFocus.nodeName === "INPUT";
-
     if (!isOneOfKeys(evt, [ArrowUp, ArrowDown, Home, End, SpaceBar, Enter]) || childFocusIsInput && isKey(evt, Enter)) {
       // nothing to do
       return;
-    } // we'll do something with the key so prevent default and stop propagation
-
+    }
 
+    // we'll do something with the key so prevent default and stop propagation
     evt.preventDefault();
     evt.stopPropagation();
-
     switch (evt.keyCode) {
       case SpaceBar:
       case Enter:
         evt.target.click();
         break;
-
       case ArrowUp:
         focusAndUpdateIndex(focuses.previous || focuses.last, evt.current, focusesList);
         break;
-
       case ArrowDown:
         focusAndUpdateIndex(focuses.next || focuses.first, evt.current, focusesList);
         break;
-
       case Home:
         focusAndUpdateIndex(focuses.first, evt.current, focusesList);
         break;
-
       case End:
         focusAndUpdateIndex(focuses.last, evt.current, focusesList);
         break;
-
       default:
     }
   };
-
   var onSingleHandler = function onSingleHandler(evt) {
     var Enter = KeyboardCodes.Enter,
-        SpaceBar = KeyboardCodes.SpaceBar;
+      SpaceBar = KeyboardCodes.SpaceBar;
     var childFocusIsInput = childFocus && childFocus.nodeName === "INPUT";
-
     if (!isOneOfKeys(evt, [SpaceBar, Enter]) || childFocusIsInput && isKey(evt, Enter)) {
       // nothing to do
       return;
-    } // we'll do something with the key so prevent default and stop propagation
-
+    }
 
+    // we'll do something with the key so prevent default and stop propagation
     evt.preventDefault();
     evt.stopPropagation();
     evt.currentTarget.click();
   };
-
   var onKeyDown = function onKeyDown(evt) {
     if (rootRef.current == null) {
       // operating outside of a composite widget
       // nothing to manage, just style and trigger clicks
       onSingleHandler(evt);
       return;
-    } // TODO keep the smart default, but allow to explictly override if disabled elements should be focusable
-
+    }
 
+    // TODO keep the smart default, but allow to explictly override if disabled elements should be focusable
     var isDisabledFocusable = strategy === "menu";
     var focusesList = getFocuses().filter(function (el) {
       return isDisabledFocusable || !el.classList.contains(classes.disabled);
@@ -369,23 +315,19 @@ var Focus = function Focus(props) {
       fall: focusesList[currentFocus + navigationJump],
       jump: focusesList[currentFocus - navigationJump]
     };
-
     if (strategy === "grid") {
       onGridKeyDownHandler(evt, focuses, focusesList, currentFocus, navigationJump);
       return;
-    } // TODO add property for specifing the composite widget orientation
-    // TODO implement handler for horizontal orientation
-
+    }
 
+    // TODO add property for specifing the composite widget orientation
+    // TODO implement handler for horizontal orientation
     onVerticalArrangementHandler(evt, focuses, focusesList);
   };
-
   var onKeyUp = function onKeyUp(evt) {
     if (isBrowser("firefox")) evt.preventDefault();
   };
-
   if (disabled) return children;
-
   var focusWrapper = function focusWrapper(childrenToWrap) {
     return /*#__PURE__*/_jsxs("div", {
       className: classes.externalReference,
@@ -394,7 +336,6 @@ var Focus = function Focus(props) {
       })]
     });
   };
-
   return /*#__PURE__*/_jsx(ConditionalWrapper, {
     condition: useFalseFocus,
     wrapper: focusWrapper,
@@ -410,7 +351,6 @@ var Focus = function Focus(props) {
     })
   });
 };
-
 process.env.NODE_ENV !== "production" ? Focus.propTypes = {
   /**
    * A Jss Object used to override or extend the component styles applied.
@@ -420,99 +360,80 @@ process.env.NODE_ENV !== "production" ? Focus.propTypes = {
      * Styles applied to the root.
      */
     root: PropTypes.string,
-
     /**
      * Styles applied when component is selected.
      */
     selected: PropTypes.string,
-
     /**
      * Styles applied when component is disabled.
      */
     disabled: PropTypes.string,
-
     /**
      * Styles applied to external reference.
      */
     externalReference: PropTypes.string,
-
     /**
      * Styles applied when using the false focus.
      */
     falseFocus: PropTypes.string,
-
     /**
      * Styles applied when focus disabled.
      */
     focusDisabled: PropTypes.string,
     focusGridDisabled: PropTypes.string,
-
     /**
      * Styles applied when focus active.
      */
     focused: PropTypes.string,
-
     /**
      * Styles applied when focus customization is passed.
      */
     focus: PropTypes.string
   }).isRequired,
-
   /**
    * The reference to the root element to hold all Focus' context.
    */
   rootRef: refType,
-
   /**
    * Extra configuration for the child element.
    */
   configuration: PropTypes.instanceOf(Object),
-
   /**
    * Whether the focus is selected.
    */
   selected: PropTypes.bool,
-
   /**
    * Whether the focus is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * Child node to set the focus.
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Focus and navigation strategy to be used.
    */
   strategy: PropTypes.oneOf(["listbox", "menu", "card", "grid"]),
-
   /**
    * Show focus when click element.
    */
   focusOnClick: PropTypes.bool,
-
   /**
    * Show focus when click element.
    */
   focusDisabled: PropTypes.bool,
-
   /**
    * Indicates that the disabled class should be applied.
    */
   disabledClass: PropTypes.bool,
-
   /**
    * Uses an absolute positioned div as a focus.
    */
   useFalseFocus: PropTypes.bool,
-
   /**
    * Narrows the results of the focus to only theses class
    */
   filterClass: PropTypes.string,
-
   /**
    * How much the navigation will skip when using the arrows.
    */