@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/Focus/Focus.js

@@ -1,117 +1,79 @@
 "use strict";
 
 require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.weak-map.js");
-
 require("core-js/modules/web.dom-collections.iterator.js");
-
 require("core-js/modules/es.object.get-own-property-descriptor.js");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 require("core-js/modules/es.array.from.js");
-
 require("core-js/modules/es.string.iterator.js");
-
 require("core-js/modules/es.array.find.js");
-
 require("core-js/modules/es.object.to-string.js");
-
 require("core-js/modules/web.dom-collections.for-each.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.split.js");
-
 require("core-js/modules/es.array.includes.js");
-
 require("core-js/modules/es.string.includes.js");
-
 require("core-js/modules/es.array.filter.js");
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
-
 var _styles = require("@mui/styles");
-
 var _utils = require("../utils");
-
 var _ConditionalWrapper = _interopRequireDefault(require("../utils/ConditionalWrapper"));
-
 var _utils2 = require("./utils");
-
 var _styles2 = _interopRequireDefault(require("./styles"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /* eslint-disable no-param-reassign */
 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 = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      showFocus = _useState2[0],
-      setShowFocus = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showFocus = _useState2[0],
+    setShowFocus = _useState2[1];
   var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      childFocus = _useState4[0],
-      setChildFocus = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    childFocus = _useState4[0],
+    setChildFocus = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      hasRunConfig = _useState6[0],
-      setHasRunConfig = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2.default)(_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 = (0, _utils2.getFocusableChildren)(el)[0];
-
     if (elChildFocus) {
       el.tabIndex = -1;
       elChildFocus.tabIndex = tabIndex;
@@ -119,7 +81,6 @@ var Focus = function Focus(props) {
       el.tabIndex = tabIndex;
     }
   };
-
   var setSelectedTabIndex = function setSelectedTabIndex() {
     var focuses = getFocuses();
     var firstSelected = focuses.find(function (focus) {
@@ -131,20 +92,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 () {
@@ -152,50 +110,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 = (0, _utils2.getFocusableChildren)(el);
-
     if (focusableChildren.length) {
       focusableChildren.forEach(function (child) {
         return setTabIndex(child, -1);
       });
       setChildFocus(focusableChildren[0]);
     }
-
     if (!(0, _isNil.default)(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);
@@ -203,29 +153,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;
     (0, _utils2.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
@@ -233,16 +180,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);
     (0, _utils2.setFocusTo)(nextFocus);
   };
-
   var getEnabledKeys = function getEnabledKeys(currentFocusIndex, jump, listSize) {
     return {
       right: (currentFocusIndex + 1) % jump === 0 || currentFocusIndex + 1 > listSize - 1,
@@ -251,32 +195,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 = _utils.KeyboardCodes.ArrowUp,
-        ArrowDown = _utils.KeyboardCodes.ArrowDown,
-        Home = _utils.KeyboardCodes.Home,
-        End = _utils.KeyboardCodes.End,
-        ArrowLeft = _utils.KeyboardCodes.ArrowLeft,
-        ArrowRight = _utils.KeyboardCodes.ArrowRight,
-        Enter = _utils.KeyboardCodes.Enter,
-        SpaceBar = _utils.KeyboardCodes.SpaceBar;
+      ArrowDown = _utils.KeyboardCodes.ArrowDown,
+      Home = _utils.KeyboardCodes.Home,
+      End = _utils.KeyboardCodes.End,
+      ArrowLeft = _utils.KeyboardCodes.ArrowLeft,
+      ArrowRight = _utils.KeyboardCodes.ArrowRight,
+      Enter = _utils.KeyboardCodes.Enter,
+      SpaceBar = _utils.KeyboardCodes.SpaceBar;
     var childFocusIsInput = childFocus && childFocus.nodeName === "INPUT";
-
     if (!(0, _utils2.isOneOfKeys)(evt, [ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Home, End, SpaceBar, Enter]) || childFocusIsInput && (0, _utils2.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 (!(0, _utils2.isOneOfKeys)(evt, [Enter, SpaceBar])) {
       evt.preventDefault();
       evt.stopPropagation();
     }
-
     var blockedKeys = getEnabledKeys(currentFocusIndex, jump, focusesList.length);
-
     switch (evt.keyCode) {
       case SpaceBar:
       case Enter:
@@ -285,118 +225,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 = _utils.KeyboardCodes.ArrowUp,
-        ArrowDown = _utils.KeyboardCodes.ArrowDown,
-        Home = _utils.KeyboardCodes.Home,
-        End = _utils.KeyboardCodes.End,
-        Enter = _utils.KeyboardCodes.Enter,
-        SpaceBar = _utils.KeyboardCodes.SpaceBar;
+      ArrowDown = _utils.KeyboardCodes.ArrowDown,
+      Home = _utils.KeyboardCodes.Home,
+      End = _utils.KeyboardCodes.End,
+      Enter = _utils.KeyboardCodes.Enter,
+      SpaceBar = _utils.KeyboardCodes.SpaceBar;
     var childFocusIsInput = childFocus && childFocus.nodeName === "INPUT";
-
     if (!(0, _utils2.isOneOfKeys)(evt, [ArrowUp, ArrowDown, Home, End, SpaceBar, Enter]) || childFocusIsInput && (0, _utils2.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 = _utils.KeyboardCodes.Enter,
-        SpaceBar = _utils.KeyboardCodes.SpaceBar;
+      SpaceBar = _utils.KeyboardCodes.SpaceBar;
     var childFocusIsInput = childFocus && childFocus.nodeName === "INPUT";
-
     if (!(0, _utils2.isOneOfKeys)(evt, [SpaceBar, Enter]) || childFocusIsInput && (0, _utils2.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);
@@ -410,23 +327,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 ((0, _utils.isBrowser)("firefox")) evt.preventDefault();
   };
-
   if (disabled) return children;
-
   var focusWrapper = function focusWrapper(childrenToWrap) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes.externalReference,
@@ -435,7 +348,6 @@ var Focus = function Focus(props) {
       })]
     });
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
     condition: useFalseFocus,
     wrapper: focusWrapper,
@@ -451,7 +363,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.
@@ -461,108 +372,87 @@ process.env.NODE_ENV !== "production" ? Focus.propTypes = {
      * Styles applied to the root.
      */
     root: _propTypes.default.string,
-
     /**
      * Styles applied when component is selected.
      */
     selected: _propTypes.default.string,
-
     /**
      * Styles applied when component is disabled.
      */
     disabled: _propTypes.default.string,
-
     /**
      * Styles applied to external reference.
      */
     externalReference: _propTypes.default.string,
-
     /**
      * Styles applied when using the false focus.
      */
     falseFocus: _propTypes.default.string,
-
     /**
      * Styles applied when focus disabled.
      */
     focusDisabled: _propTypes.default.string,
     focusGridDisabled: _propTypes.default.string,
-
     /**
      * Styles applied when focus active.
      */
     focused: _propTypes.default.string,
-
     /**
      * Styles applied when focus customization is passed.
      */
     focus: _propTypes.default.string
   }).isRequired,
-
   /**
    * The reference to the root element to hold all Focus' context.
    */
   rootRef: _utils.refType,
-
   /**
    * Extra configuration for the child element.
    */
   configuration: _propTypes.default.instanceOf(Object),
-
   /**
    * Whether the focus is selected.
    */
   selected: _propTypes.default.bool,
-
   /**
    * Whether the focus is disabled.
    */
   disabled: _propTypes.default.bool,
-
   /**
    * Child node to set the focus.
    */
   children: _propTypes.default.node.isRequired,
-
   /**
    * Focus and navigation strategy to be used.
    */
   strategy: _propTypes.default.oneOf(["listbox", "menu", "card", "grid"]),
-
   /**
    * Show focus when click element.
    */
   focusOnClick: _propTypes.default.bool,
-
   /**
    * Show focus when click element.
    */
   focusDisabled: _propTypes.default.bool,
-
   /**
    * Indicates that the disabled class should be applied.
    */
   disabledClass: _propTypes.default.bool,
-
   /**
    * Uses an absolute positioned div as a focus.
    */
   useFalseFocus: _propTypes.default.bool,
-
   /**
    * Narrows the results of the focus to only theses class
    */
   filterClass: _propTypes.default.string,
-
   /**
    * How much the navigation will skip when using the arrows.
    */
   navigationJump: _propTypes.default.number
 } : void 0;
-
 var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvFocus"
 })(Focus);
-
 exports.default = _default;
 //# sourceMappingURL=Focus.js.map