@hitachivantara/uikit-react-core 5.24.5 → 5.25.0

package/dist/esm/components/Focus/Focus.js

@@ -1,28 +1,13 @@
-import { clsx } from "clsx";
 import isNil from "lodash/isNil";
 import React__default, { useState } from "react";
-import { Global } from "@emotion/react";
 import { isOneOfKeys, isKey } from "../../utils/keyboardUtils.js";
 import { isBrowser } from "../../utils/browser.js";
 import { ConditionalWrapper } from "../../utils/ConditionalWrapper.js";
-import { StyledFocusWrapper, StyledFalseFocus } from "./Focus.styles.js";
 import { getFocusableChildren, setFocusTo } from "./utils.js";
-import focusClasses from "./focusClasses.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const focusStyles = process.env.NODE_ENV === "production" ? {
-  name: "adaxau",
-  styles: ".HvFocus-focused{outline-color:#52a8ec;outline-style:solid;outline-width:0px;outline-offset:-1px;box-shadow:0 0 0 1px #52a8ec,0 0 0 4px rgba(29, 155, 209, 0.3);@media (-webkit-min-device-pixel-ratio: 0){outline-color:#52a8ec;outline-style:solid;outline-width:0px;outline-offset:-1px;box-shadow:0 0 0 1px #52a8ec,0 0 0 4px rgba(29, 155, 209, 0.3);}}.HvFocus-focusDisabled{outline:none;box-shadow:none;}.HvFocus-focusDisabled *:focus{outline:none;box-shadow:none;}.HvFocus-focusDisabled *{outline:none!important;box-shadow:none!important;}"
-} : {
-  name: "1ahoc7i-focusStyles",
-  styles: ".HvFocus-focused{outline-color:#52a8ec;outline-style:solid;outline-width:0px;outline-offset:-1px;box-shadow:0 0 0 1px #52a8ec,0 0 0 4px rgba(29, 155, 209, 0.3);@media (-webkit-min-device-pixel-ratio: 0){outline-color:#52a8ec;outline-style:solid;outline-width:0px;outline-offset:-1px;box-shadow:0 0 0 1px #52a8ec,0 0 0 4px rgba(29, 155, 209, 0.3);}}.HvFocus-focusDisabled{outline:none;box-shadow:none;}.HvFocus-focusDisabled *:focus{outline:none;box-shadow:none;}.HvFocus-focusDisabled *{outline:none!important;box-shadow:none!important;};label:focusStyles;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9jdXMvRm9jdXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCdUIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb2N1cy9Gb2N1cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjbHN4IH0gZnJvbSBcImNsc3hcIjtcblxuaW1wb3J0IGlzTmlsIGZyb20gXCJsb2Rhc2gvaXNOaWxcIjtcblxuaW1wb3J0IFJlYWN0LCB7IFJlZk9iamVjdCwgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHsgY3NzLCBHbG9iYWwgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcblxuaW1wb3J0IHsgSHZCYXNlUHJvcHMgfSBmcm9tIFwiQGNvcmUvdHlwZXMvZ2VuZXJpY1wiO1xuaW1wb3J0IHsgaXNLZXksIGlzT25lT2ZLZXlzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2tleWJvYXJkVXRpbHNcIjtcbmltcG9ydCB7IGlzQnJvd3NlciB9IGZyb20gXCJAY29yZS91dGlscy9icm93c2VyXCI7XG5pbXBvcnQgeyBDb25kaXRpb25hbFdyYXBwZXIgfSBmcm9tIFwiQGNvcmUvdXRpbHMvQ29uZGl0aW9uYWxXcmFwcGVyXCI7XG5cbmltcG9ydCB7IFN0eWxlZEZvY3VzV3JhcHBlciwgU3R5bGVkRmFsc2VGb2N1cyB9IGZyb20gXCIuL0ZvY3VzLnN0eWxlc1wiO1xuaW1wb3J0IHsgZ2V0Rm9jdXNhYmxlQ2hpbGRyZW4sIHNldEZvY3VzVG8gfSBmcm9tIFwiLi91dGlsc1wiO1xuaW1wb3J0IGZvY3VzQ2xhc3NlcywgeyBIdkZvY3VzQ2xhc3NlcyB9IGZyb20gXCIuL2ZvY3VzQ2xhc3Nlc1wiO1xuXG5jb25zdCBmb2N1c1N0eWxlcyA9IGNzc2BcbiAgLkh2Rm9jdXMtZm9jdXNlZCB7XG4gICAgb3V0bGluZS1jb2xvcjogIzUyYThlYztcbiAgICBvdXRsaW5lLXN0eWxlOiBzb2xpZDtcbiAgICBvdXRsaW5lLXdpZHRoOiAwcHg7XG4gICAgb3V0bGluZS1vZmZzZXQ6IC0xcHg7XG4gICAgYm94LXNoYWRvdzogMCAwIDAgMXB4ICM1MmE4ZWMsIDAgMCAwIDRweCByZ2JhKDI5LCAxNTUsIDIwOSwgMC4zKTtcblxuICAgIEBtZWRpYSAoLXdlYmtpdC1taW4tZGV2aWNlLXBpeGVsLXJhdGlvOiAwKSB7XG4gICAgICBvdXRsaW5lLWNvbG9yOiAjNTJhOGVjO1xuICAgICAgb3V0bGluZS1zdHlsZTogc29saWQ7XG4gICAgICBvdXRsaW5lLXdpZHRoOiAwcHg7XG4gICAgICBvdXRsaW5lLW9mZnNldDogLTFweDtcbiAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDFweCAjNTJhOGVjLCAwIDAgMCA0cHggcmdiYSgyOSwgMTU1LCAyMDksIDAuMyk7XG4gICAgfVxuICB9XG5cbiAgLkh2Rm9jdXMtZm9jdXNEaXNhYmxlZCB7XG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBib3gtc2hhZG93OiBub25lO1xuICB9XG4gIC5IdkZvY3VzLWZvY3VzRGlzYWJsZWQgKjpmb2N1cyB7XG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBib3gtc2hhZG93OiBub25lO1xuICB9XG4gIC5IdkZvY3VzLWZvY3VzRGlzYWJsZWQgKiB7XG4gICAgb3V0bGluZTogbm9uZSAhaW1wb3J0YW50O1xuICAgIGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcbiAgfVxuYDtcblxuZXhwb3J0IHR5cGUgSHZGb2N1c1N0cmF0ZWdpZXMgPSBcImxpc3Rib3hcIiB8IFwibWVudVwiIHwgXCJjYXJkXCIgfCBcImdyaWRcIjtcblxuZXhwb3J0IGludGVyZmFjZSBIdkZvY3VzUHJvcHMgZXh0ZW5kcyBIdkJhc2VQcm9wczxIVE1MRWxlbWVudCwgXCJjaGlsZHJlblwiPiB7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdEVsZW1lbnQ7XG4gIC8qKiBFeHRyYSBjb25maWd1cmF0aW9uIGZvciB0aGUgY2hpbGQgZWxlbWVudC4gKi9cbiAgY29uZmlndXJhdGlvbj86IHtcbiAgICB0YWJJbmRleD86IG51bWJlcjtcbiAgfTtcbiAgLyoqIEluZGljYXRlcyB0aGF0IHRoZSBkaXNhYmxlZCBjbGFzcyBzaG91bGQgYmUgYXBwbGllZC4gKi9cbiAgZGlzYWJsZWRDbGFzcz86IGJvb2xlYW47XG4gIC8qKiBXaGV0aGVyIHRoZSBmb2N1cyBpcyBzZWxlY3RlZC4gKi9cbiAgc2VsZWN0ZWQ/OiBib29sZWFuO1xuICAvKiogV2hldGhlciB0aGUgZm9jdXMgaXMgZGlzYWJsZWQuICovXG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgLyoqIFRoZSByZWZlcmVuY2UgdG8gdGhlIHJvb3QgZWxlbWVudCB0byBob2xkIGFsbCBGb2N1cycgY29udGV4dC4gKi9cbiAgcm9vdFJlZj86IFJlZk9iamVjdDxIVE1MRWxlbWVudD47XG4gIC8qKiBTaG93IGZvY3VzIHdoZW4gY2xpY2sgZWxlbWVudC4gdiAqL1xuICBmb2N1c09uQ2xpY2s/OiBib29sZWFuO1xuICAvKiogU2hvdyBmb2N1cyB3aGVuIGNsaWNrIGVsZW1lbnQuIHYgKi9cbiAgZm9jdXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIC8qKiBGb2N1cyBhbmQgbmF2aWdhdGlvbiBzdHJhdGVneSB0byBiZSB1c2VkLiB2ICovXG4gIHN0cmF0ZWd5PzogSHZGb2N1c1N0cmF0ZWdpZXM7XG4gIC8qKiBVc2VzIGFuIGFic29sdXRlIHBvc2l0aW9uZWQgZGl2IGFzIGEgZm9jdXMuIHYgKi9cbiAgdXNlRmFsc2VGb2N1cz86IGJvb2xlYW47XG4gIC8qKiBOYXJyb3dzIHRoZSByZXN1bHRzIG9mIHRoZSBmb2N1cyB0byBvbmx5IHRoZXNlcyBjbGFzcyB2ICovXG4gIGZpbHRlckNsYXNzPzogc3RyaW5nO1xuICAvKiogSG93IG11Y2ggdGhlIG5hdmlnYXRpb24gd2lsbCBza2lwIHdoZW4gdXNpbmcgdGhlIGFycm93cy4gdiAqL1xuICBuYXZpZ2F0aW9uSnVtcD86IG51bWJlcjtcbiAgLyoqIEEgSnNzIE9iamVjdCB1c2VkIHRvIG92ZXJyaWRlIG9yIGV4dGVuZCB0aGUgc3R5bGVzIGFwcGxpZWQgdG8gdGhlIGNvbXBvbmVudC4gKi9cbiAgY2xhc3Nlcz86IEh2Rm9jdXNDbGFzc2VzO1xufVxuXG5leHBvcnQgY29uc3QgSHZGb2N1cyA9ICh7XG4gIGNsYXNzZXMsXG4gIGNoaWxkcmVuLFxuICBjb25maWd1cmF0aW9uID0ge30sXG4gIGRpc2FibGVkQ2xhc3MgPSBmYWxzZSxcbiAgc2VsZWN0ZWQgPSBmYWxzZSxcbiAgZGlzYWJsZWQgPSBmYWxzZSxcbiAgcm9vdFJlZiA9IHVuZGVmaW5lZCxcbiAgZm9jdXNPbkNsaWNrID0gZmFsc2UsXG4gIGZvY3VzRGlzYWJsZWQgPSB0cnVlLFxuICBzdHJhdGVneSA9IFwibGlzdGJveFwiLFxuICB1c2VGYWxzZUZvY3VzID0gZmFsc2UsXG4gIGZpbHRlckNsYXNzLFxuICBuYXZpZ2F0aW9uSnVtcCA9IDQsXG59OiBIdkZvY3VzUHJvcHMpID0+IHtcbiAgY29uc3QgW3Nob3dGb2N1cywgc2V0U2hvd0ZvY3VzXSA9IHVzZVN0YXRlPGJvb2xlYW4+KGZhbHNlKTtcbiAgY29uc3QgW2NoaWxkRm9jdXMsIHNldENoaWxkRm9jdXNdID0gdXNlU3RhdGU8YW55PigpO1xuICBjb25zdCBbaGFzUnVuQ29uZmlnLCBzZXRIYXNSdW5Db25maWddID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGdldEZvY3VzZXMgPSAoKSA9PiB7XG4gICAgY29uc3QgZm9jdXNlcyA9IHJvb3RSZWY/LmN1cnJlbnRcbiAgICAgID8gQXJyYXkuZnJvbShcbiAgICAgICAgICByb290UmVmLmN1cnJlbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZShcbiAgICAgICAgICAgIGZpbHRlckNsYXNzIHx8IGZvY3VzQ2xhc3Nlcy5yb290IHx8IGNsYXNzZXM/LnJvb3QgfHwgXCJyb290XCJcbiAgICAgICAgICApXG4gICAgICAgIClcbiAgICAgIDogW107XG4gICAgcmV0dXJuIGZvY3VzZXM7XG4gIH07XG5cbiAgY29uc3Qgc2V0VGFiSW5kZXggPSAoZWwsIHRhYkluZGV4ID0gMCkgPT4ge1xuICAgIGNvbnN0IGVsQ2hpbGRGb2N1cyA9IGdldEZvY3VzYWJsZUNoaWxkcmVuKGVsKVswXTtcbiAgICBpZiAoZWxDaGlsZEZvY3VzKSB7XG4gICAgICBlbC50YWJJbmRleCA9IC0xO1xuICAgICAgZWxDaGlsZEZvY3VzLnRhYkluZGV4ID0gdGFiSW5kZXg7XG4gICAgfSBlbHNlIHtcbiAgICAgIGVsLnRhYkluZGV4ID0gdGFiSW5kZXg7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IHNldFNlbGVjdGVkVGFiSW5kZXggPSAoKSA9PiB7XG4gICAgY29uc3QgZm9jdXNlcyA9IGdldEZvY3VzZXMoKTtcbiAgICBjb25zdCBmaXJzdFNlbGVjdGVkID0gZm9jdXNlcy5maW5kKChmb2N1cykgPT5cbiAgICAgIGZvY3VzLmNsYXNzTGlzdC5jb250YWlucyhcbiAgICAgICAgZm9jdXNDbGFzc2VzLnNlbGVjdGVkIHx8IGNsYXNzZXM/LnNlbGVjdGVkIHx8IFwic2VsZWN0ZWRcIlxuICAgICAgKVxuICAgICk7XG5cbiAgICBpZiAoIWZpcnN0U2VsZWN0ZWQpIHJldHVybjtcbiAgICBmb2N1c2VzLmZvckVhY2goKGZvY3VzKSA9PiBzZXRUYWJJbmRleChmb2N1cywgLTEpKTtcbiAgICBzZXRUYWJJbmRleChmaXJzdFNlbGVjdGVkLCAwKTtcbiAgfTtcblxuICBjb25zdCBjbGVhclRhYlNpYmxpbmdzID0gKGVsKSA9PiB7XG4gICAgZ2V0Rm9jdXNlcygpLmZvckVhY2goKGZvY3VzKSA9PiBzZXRUYWJJbmRleChmb2N1cywgLTEpKTtcbiAgICBzZXRUYWJJbmRleChlbCwgMCk7XG4gIH07XG5cbiAgY29uc3Qgb25Gb2N1c1N0cmF0ZWd5ID0gKGV2dCkgPT4ge1xuICAgIGlmIChzdHJhdGVneSA9PT0gXCJsaXN0Ym94XCIpIHtcbiAgICAgIGNsZWFyVGFiU2libGluZ3MoZXZ0LmN1cnJlbnRUYXJnZXQpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBvbkJsdXJTdHJhdGVneSA9ICgpID0+IHtcbiAgICBpZiAoXG4gICAgICBzdHJhdGVneSA9PT0gXCJsaXN0Ym94XCIgJiZcbiAgICAgIHJvb3RSZWYgJiZcbiAgICAgIHJvb3RSZWYuY3VycmVudCAmJlxuICAgICAgIXJvb3RSZWYuY3VycmVudC5jb250YWlucyhkb2N1bWVudC5hY3RpdmVFbGVtZW50KVxuICAgICkge1xuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgIHNldFNlbGVjdGVkVGFiSW5kZXgoKTtcbiAgICAgIH0sIDEwKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgY29uZmlnID0gKGVsKSA9PiB7XG4gICAgY29uc3QgeyB0YWJJbmRleCB9ID0gY29uZmlndXJhdGlvbjtcbiAgICBpZiAoIWVsIHx8IGhhc1J1bkNvbmZpZykgcmV0dXJuO1xuICAgIGlmIChzdHJhdGVneSA9PT0gXCJjYXJkXCIpIHtcbiAgICAgIHNldENoaWxkRm9jdXMoY2hpbGRyZW4pO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGlmIChzdHJhdGVneSA9PT0gXCJncmlkXCIpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBjb25zdCBmb2N1c2FibGVDaGlsZHJlbiA9IGdldEZvY3VzYWJsZUNoaWxkcmVuKGVsKTtcbiAgICBpZiAoZm9jdXNhYmxlQ2hpbGRyZW4ubGVuZ3RoKSB7XG4gICAgICBmb2N1c2FibGVDaGlsZHJlbi5mb3JFYWNoKChjaGlsZCkgPT4gc2V0VGFiSW5kZXgoY2hpbGQsIC0xKSk7XG4gICAgICBzZXRDaGlsZEZvY3VzKGZvY3VzYWJsZUNoaWxkcmVuWzBdKTtcbiAgICB9XG5cbiAgICBpZiAoIWlzTmlsKHRhYkluZGV4KSkgc2V0VGFiSW5kZXgoZWwsIHRhYkluZGV4KTtcbiAgICBzZXRIYXNSdW5Db25maWcodHJ1ZSk7XG4gIH07XG5cbiAgY29uc3QgYWRkRm9jdXNDbGFzcyA9IChldnQpID0+IHtcbiAgICBpZiAoIXVzZUZhbHNlRm9jdXMpIHtcbiAgICAgIGV2dC5jdXJyZW50VGFyZ2V0LmNsYXNzTGlzdC5hZGQoZm9jdXNDbGFzc2VzLmZvY3VzZWQpO1xuICAgICAgaWYgKGNsYXNzZXM/LmZvY3VzZWQpIHtcbiAgICAgICAgZXZ0LmN1cnJlbnRUYXJnZXQuY2xhc3NMaXN0LmFkZChjbGFzc2VzLmZvY3VzZWQpO1xuICAgICAgfVxuICAgICAgLy8gYWRkIGdsb2JhbCBjbGFzcyBIdklzRm9jdXNlZCBhcyBhIG1hcmtlclxuICAgICAgLy8gbm90IHRvIGJlIHN0eWxlZCBkaXJlY3RseSwgb25seSBhcyBoZWxwZXIgaW4gc3BlY2lmaWMgY3NzIHF1ZXJpZXNcbiAgICAgIGV2dC5jdXJyZW50VGFyZ2V0LmNsYXNzTGlzdC5hZGQoXCJIdklzRm9jdXNlZFwiKTtcbiAgICAgIGNsYXNzZXM/LmZvY3VzXG4gICAgICAgID8uc3BsaXQoXCIgXCIpXG4gICAgICAgIC5mb3JFYWNoKChjKSA9PiBldnQuY3VycmVudFRhcmdldC5jbGFzc0xpc3QuYWRkKGMpKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgcmVtb3ZlRm9jdXNDbGFzcyA9ICgpID0+IHtcbiAgICBpZiAoIXVzZUZhbHNlRm9jdXMpIHtcbiAgICAgIGdldEZvY3VzZXMoKS5mb3JFYWNoKChlbGVtZW50KSA9PiB7XG4gICAgICAgIGlmIChmb2N1c0NsYXNzZXMuZm9jdXNlZCkge1xuICAgICAgICAgIGVsZW1lbnQuY2xhc3NMaXN0LnJlbW92ZShmb2N1c0NsYXNzZXMuZm9jdXNlZCk7XG4gICAgICAgIH1cbiAgICAgICAgaWYgKGNsYXNzZXM/LmZvY3VzZWQpIHtcbiAgICAgICAgICBlbGVtZW50LmNsYXNzTGlzdC5yZW1vdmUoY2xhc3Nlcy5mb2N1c2VkKTtcbiAgICAgICAgfVxuICAgICAgICAvLyByZW1vdmUgdGhlIGdsb2JhbCBjbGFzcyBIdklzRm9jdXNlZFxuICAgICAgICBlbGVtZW50LmNsYXNzTGlzdC5yZW1vdmUoXCJIdklzRm9jdXNlZFwiKTtcbiAgICAgICAgY2xhc3Nlcz8uZm9jdXM/LnNwbGl0KFwiIFwiKS5mb3JFYWNoKChjKSA9PiBlbGVtZW50LmNsYXNzTGlzdC5yZW1vdmUoYykpO1xuICAgICAgfSk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IG9uRm9jdXMgPSAoZXZ0KSA9PiB7XG4gICAgYWRkRm9jdXNDbGFzcyhldnQpO1xuICAgIHNldFNob3dGb2N1cyh0cnVlKTtcbiAgICAvLyBnaXZlIGZvY3VzIHRvIGNoaWxkIGVsZW1lbnQgaWYgYW55IGZvY3VzYWJsZVxuXG4gICAgaWYgKGNoaWxkRm9jdXMgJiYgY2hpbGRGb2N1cy5mb2N1cykgY2hpbGRGb2N1cy5mb2N1cygpO1xuICAgIG9uRm9jdXNTdHJhdGVneShldnQpO1xuICB9O1xuXG4gIGNvbnN0IG9uQmx1ciA9ICgpID0+IHtcbiAgICBzZXRTaG93Rm9jdXMoZmFsc2UpO1xuICAgIHJlbW92ZUZvY3VzQ2xhc3MoKTtcbiAgICBvbkJsdXJTdHJhdGVneSgpO1xuICB9O1xuXG4gIGNvbnN0IG9uTW91c2VEb3duID0gKGV2dCkgPT4ge1xuICAgIGNvbnN0IGhhc0NhcmQgPSAhIWV2dC5jdXJyZW50VGFyZ2V0Py5xdWVyeVNlbGVjdG9yKFwiLkh2SXNDYXJkR3JpZEVsZW1lbnRcIik7XG4gICAgaWYgKHN0cmF0ZWd5ID09PSBcImdyaWRcIiAmJiBoYXNDYXJkKSByZXR1cm47XG5cbiAgICBzZXRGb2N1c1RvKGV2dC5jdXJyZW50VGFyZ2V0KTtcbiAgICBzZXRUYWJJbmRleChldnQuY3VycmVudFRhcmdldCwgMCk7XG4gICAgLy8gcmVtb3ZlIGZvY3VzIG91dGxpbmUgdW5sZXNzIGV4cGxpY2l0bHkgZW5hYmxlZFxuICAgIGlmICghZm9jdXNPbkNsaWNrKSB7XG4gICAgICAvLyBUT0RPIHRoaXMgcGllY2Ugb2YgY29kZSB3b3JrcyBvbmx5IGJlY2F1c2Ugb25Nb3VzZURvd24gaXMgaGFwcGVuaW5nIGFmdGVyIHRoZSBmb2N1cyBldmVudFxuICAgICAgLy8gVGhlcmUgaXMgbm90aGluZyBpbiBoZXJlIHRoYXQgZ3VhcmFudGVlcyB0aGUgb3JkZXIgb2YgdGhlc2UgZXZlbnRzLCBzbyBpdCBtYXkgcHJlc2VudCBhIHByb2JsZW0gaW4gdGhlIGZ1dHVyZVxuICAgICAgcmVtb3ZlRm9jdXNDbGFzcygpO1xuICAgICAgc2V0U2hvd0ZvY3VzKGZhbHNlKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgZm9jdXNBbmRVcGRhdGVJbmRleCA9IChuZXh0Rm9jdXMsIHByZXZpb3VzRm9jdXMsIGZvY3VzZXNMaXN0KSA9PiB7XG4gICAgaWYgKGZvY3VzZXNMaXN0Py5pbmNsdWRlcyhwcmV2aW91c0ZvY3VzKSkge1xuICAgICAgc2V0VGFiSW5kZXgocHJldmlvdXNGb2N1cywgLTEpO1xuICAgIH1cbiAgICBzZXRUYWJJbmRleChuZXh0Rm9jdXMsIDApO1xuICAgIHNldEZvY3VzVG8obmV4dEZvY3VzKTtcbiAgfTtcblxuICBjb25zdCBnZXRFbmFibGVkS2V5cyA9IChjdXJyZW50Rm9jdXNJbmRleCwganVtcCwgbGlzdFNpemUpID0+ICh7XG4gICAgcmlnaHQ6XG4gICAgICAoY3VycmVudEZvY3VzSW5kZXggKyAxKSAlIGp1bXAgPT09IDAgfHxcbiAgICAgIGN1cnJlbnRGb2N1c0luZGV4ICsgMSA+IGxpc3RTaXplIC0gMSxcbiAgICBsZWZ0OiBjdXJyZW50Rm9jdXNJbmRleCAlIGp1bXAgPT09IDAsXG4gICAgdXA6IGN1cnJlbnRGb2N1c0luZGV4IC0ganVtcCA8IDAsXG4gICAgZG93bjpcbiAgICAgIGN1cnJlbnRGb2N1c0luZGV4ICsganVtcCA+IGxpc3RTaXplIHx8XG4gICAgICBjdXJyZW50Rm9jdXNJbmRleCArIGp1bXAgPiBsaXN0U2l6ZSAtIDEsXG4gIH0pO1xuXG4gIGNvbnN0IG9uR3JpZEtleURvd25IYW5kbGVyID0gKFxuICAgIGV2dCxcbiAgICBmb2N1c2VzLFxuICAgIGZvY3VzZXNMaXN0LFxuICAgIGN1cnJlbnRGb2N1c0luZGV4LFxuICAgIGp1bXBcbiAgKSA9PiB7XG4gICAgY29uc3QgY2hpbGRGb2N1c0lzSW5wdXQgPSBjaGlsZEZvY3VzICYmIGNoaWxkRm9jdXMubm9kZU5hbWUgPT09IFwiSU5QVVRcIjtcblxuICAgIGlmIChcbiAgICAgICFpc09uZU9mS2V5cyhldnQsIFtcbiAgICAgICAgXCJBcnJvd1VwXCIsXG4gICAgICAgIFwiQXJyb3dEb3duXCIsXG4gICAgICAgIFwiQXJyb3dMZWZ0XCIsXG4gICAgICAgIFwiQXJyb3dSaWdodFwiLFxuICAgICAgICBcIkhvbWVcIixcbiAgICAgICAgXCJFbmRcIixcbiAgICAgICAgXCJTcGFjZVwiLFxuICAgICAgICBcIkVudGVyXCIsXG4gICAgICBdKSB8fFxuICAgICAgKGNoaWxkRm9jdXNJc0lucHV0ICYmIGlzS2V5KGV2dCwgXCJFbnRlclwiKSlcbiAgICApIHtcbiAgICAgIC8vIG5vdGhpbmcgdG8gZG9cbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICAvLyB3ZSdsbCBkbyBzb21ldGhpbmcgd2l0aCB0aGUga2V5IHNvIHByZXZlbnQgZGVmYXVsdCBhbmQgc3RvcCBwcm9wYWdhdGlvblxuICAgIC8vIGV4Y2VwdCBmb3IgRW50ZXIgYW5kIFNwYWNlQmFyXG4gICAgaWYgKCFpc09uZU9mS2V5cyhldnQsIFtcIkVudGVyXCIsIFwiU3BhY2VcIl0pKSB7XG4gICAgICBldnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGV2dC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB9XG5cbiAgICBjb25zdCBibG9ja2VkS2V5cyA9IGdldEVuYWJsZWRLZXlzKFxuICAgICAgY3VycmVudEZvY3VzSW5kZXgsXG4gICAgICBqdW1wLFxuICAgICAgZm9jdXNlc0xpc3QubGVuZ3RoXG4gICAgKTtcblxuICAgIHN3aXRjaCAoZXZ0LmNvZGUpIHtcbiAgICAgIGNhc2UgXCJTcGFjZVwiOlxuICAgICAgY2FzZSBcIkVudGVyXCI6XG4gICAgICAgIGlmIChpc0Jyb3dzZXIoXCJmaXJlZm94XCIpKSB7XG4gICAgICAgICAgZXZ0LnRhcmdldC5jbGljaygpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIGV2dC5jdXJyZW50VGFyZ2V0LmNsaWNrKCk7XG4gICAgICAgIH1cbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlIFwiQXJyb3dVcFwiOlxuICAgICAgICBpZiAoIWJsb2NrZWRLZXlzLnVwKSB7XG4gICAgICAgICAgZm9jdXNBbmRVcGRhdGVJbmRleChcbiAgICAgICAgICAgIGZvY3VzZXMuanVtcCB8fCBmb2N1c2VzLmxhc3QsXG4gICAgICAgICAgICBldnQuY3VycmVudCxcbiAgICAgICAgICAgIGZvY3VzZXNMaXN0XG4gICAgICAgICAgKTtcbiAgICAgICAgfVxuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgXCJBcnJvd0Rvd25cIjpcbiAgICAgICAgaWYgKCFibG9ja2VkS2V5cy5kb3duKSB7XG4gICAgICAgICAgZm9jdXNBbmRVcGRhdGVJbmRleChcbiAgICAgICAgICAgIGZvY3VzZXMuZmFsbCB8fCBmb2N1c2VzLmZpcnN0LFxuICAgICAgICAgICAgZXZ0LmN1cnJlbnQsXG4gICAgICAgICAgICBmb2N1c2VzTGlzdFxuICAgICAgICAgICk7XG4gICAgICAgIH1cbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlIFwiQXJyb3dMZWZ0XCI6XG4gICAgICAgIGlmICghYmxvY2tlZEtleXMubGVmdCkge1xuICAgICAgICAgIGZvY3VzQW5kVXBkYXRlSW5kZXgoXG4gICAgICAgICAgICBmb2N1c2VzLnByZXZpb3VzIHx8IGZvY3VzZXMubGFzdCxcbiAgICAgICAgICAgIGV2dC5jdXJyZW50LFxuICAgICAgICAgICAgZm9jdXNlc0xpc3RcbiAgICAgICAgICApO1xuICAgICAgICB9XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSBcIkFycm93UmlnaHRcIjpcbiAgICAgICAgaWYgKCFibG9ja2VkS2V5cy5yaWdodCkge1xuICAgICAgICAgIGZvY3VzQW5kVXBkYXRlSW5kZXgoXG4gICAgICAgICAgICBmb2N1c2VzLm5leHQgfHwgZm9jdXNlcy5maXJzdCxcbiAgICAgICAgICAgIGV2dC5jdXJyZW50LFxuICAgICAgICAgICAgZm9jdXNlc0xpc3RcbiAgICAgICAgICApO1xuICAgICAgICB9XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSBcIkhvbWVcIjpcbiAgICAgICAgZm9jdXNBbmRVcGRhdGVJbmRleChmb2N1c2VzLmZpcnN0LCBldnQuY3VycmVudCwgZm9jdXNlc0xpc3QpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgXCJFbmRcIjpcbiAgICAgICAgZm9jdXNBbmRVcGRhdGVJbmRleChmb2N1c2VzLmxhc3QsIGV2dC5jdXJyZW50LCBmb2N1c2VzTGlzdCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgZGVmYXVsdDpcbiAgICB9XG4gIH07XG5cbiAgY29uc3Qgb25WZXJ0aWNhbEFycmFuZ2VtZW50SGFuZGxlciA9IChldnQsIGZvY3VzZXMsIGZvY3VzZXNMaXN0KSA9PiB7XG4gICAgY29uc3QgY2hpbGRGb2N1c0lzSW5wdXQgPSBjaGlsZEZvY3VzICYmIGNoaWxkRm9jdXMubm9kZU5hbWUgPT09IFwiSU5QVVRcIjtcblxuICAgIGlmIChcbiAgICAgICFpc09uZU9mS2V5cyhldnQsIFtcbiAgICAgICAgXCJBcnJvd1VwXCIsXG4gICAgICAgIFwiQXJyb3dEb3duXCIsXG4gICAgICAgIFwiSG9tZVwiLFxuICAgICAgICBcIkVuZFwiLFxuICAgICAgICBcIlNwYWNlXCIsXG4gICAgICAgIFwiRW50ZXJcIixcbiAgICAgIF0pIHx8XG4gICAgICAoY2hpbGRGb2N1c0lzSW5wdXQgJiYgaXNLZXkoZXZ0LCBcIkVudGVyXCIpKVxuICAgICkge1xuICAgICAgLy8gbm90aGluZyB0byBkb1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIC8vIHdlJ2xsIGRvIHNvbWV0aGluZyB3aXRoIHRoZSBrZXkgc28gcHJldmVudCBkZWZhdWx0IGFuZCBzdG9wIHByb3BhZ2F0aW9uXG4gICAgZXZ0LnByZXZlbnREZWZhdWx0KCk7XG4gICAgZXZ0LnN0b3BQcm9wYWdhdGlvbigpO1xuXG4gICAgc3dpdGNoIChldnQuY29kZSkge1xuICAgICAgY2FzZSBcIlNwYWNlXCI6XG4gICAgICBjYXNlIFwiRW50ZXJcIjpcbiAgICAgICAgZXZ0LnRhcmdldC5jbGljaygpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgXCJBcnJvd1VwXCI6XG4gICAgICAgIGZvY3VzQW5kVXBkYXRlSW5kZXgoXG4gICAgICAgICAgZm9jdXNlcy5wcmV2aW91cyB8fCBmb2N1c2VzLmxhc3QsXG4gICAgICAgICAgZXZ0LmN1cnJlbnQsXG4gICAgICAgICAgZm9jdXNlc0xpc3RcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlIFwiQXJyb3dEb3duXCI6XG4gICAgICAgIGZvY3VzQW5kVXBkYXRlSW5kZXgoXG4gICAgICAgICAgZm9jdXNlcy5uZXh0IHx8IGZvY3VzZXMuZmlyc3QsXG4gICAgICAgICAgZXZ0LmN1cnJlbnQsXG4gICAgICAgICAgZm9jdXNlc0xpc3RcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlIFwiSG9tZVwiOlxuICAgICAgICBmb2N1c0FuZFVwZGF0ZUluZGV4KGZvY3VzZXMuZmlyc3QsIGV2dC5jdXJyZW50LCBmb2N1c2VzTGlzdCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSBcIkVuZFwiOlxuICAgICAgICBmb2N1c0FuZFVwZGF0ZUluZGV4KGZvY3VzZXMubGFzdCwgZXZ0LmN1cnJlbnQsIGZvY3VzZXNMaXN0KTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBkZWZhdWx0OlxuICAgIH1cbiAgfTtcblxuICBjb25zdCBvblNpbmdsZUhhbmRsZXIgPSAoZXZ0KSA9PiB7XG4gICAgY29uc3QgY2hpbGRGb2N1c0lzSW5wdXQgPSBjaGlsZEZvY3VzICYmIGNoaWxkRm9jdXMubm9kZU5hbWUgPT09IFwiSU5QVVRcIjtcblxuICAgIGlmIChcbiAgICAgICFpc09uZU9mS2V5cyhldnQsIFtcIlNwYWNlXCIsIFwiRW50ZXJcIl0pIHx8XG4gICAgICAoY2hpbGRGb2N1c0lzSW5wdXQgJiYgaXNLZXkoZXZ0LCBcIkVudGVyXCIpKVxuICAgICkge1xuICAgICAgLy8gbm90aGluZyB0byBkb1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIC8vIHdlJ2xsIGRvIHNvbWV0aGluZyB3aXRoIHRoZSBrZXkgc28gcHJldmVudCBkZWZhdWx0IGFuZCBzdG9wIHByb3BhZ2F0aW9uXG4gICAgZXZ0LnByZXZlbnREZWZhdWx0KCk7XG4gICAgZXZ0LnN0b3BQcm9wYWdhdGlvbigpO1xuXG4gICAgZXZ0LmN1cnJlbnRUYXJnZXQuY2xpY2soKTtcbiAgfTtcblxuICBjb25zdCBvbktleURvd24gPSAoZXZ0KSA9PiB7XG4gICAgaWYgKHJvb3RSZWY/LmN1cnJlbnQgPT0gbnVsbCkge1xuICAgICAgLy8gb3BlcmF0aW5nIG91dHNpZGUgb2YgYSBjb21wb3NpdGUgd2lkZ2V0XG4gICAgICAvLyBub3RoaW5nIHRvIG1hbmFnZSwganVzdCBzdHlsZSBhbmQgdHJpZ2dlciBjbGlja3NcbiAgICAgIG9uU2luZ2xlSGFuZGxlcihldnQpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIC8vIFRPRE8ga2VlcCB0aGUgc21hcnQgZGVmYXVsdCwgYnV0IGFsbG93IHRvIGV4cGxpY2l0bHkgb3ZlcnJpZGUgaWYgZGlzYWJsZWQgZWxlbWVudHMgc2hvdWxkIGJlIGZvY3VzYWJsZVxuICAgIGNvbnN0IGlzRGlzYWJsZWRGb2N1c2FibGUgPSBzdHJhdGVneSA9PT0gXCJtZW51XCI7XG4gICAgY29uc3QgZm9jdXNlc0xpc3QgPSBnZXRGb2N1c2VzKCkuZmlsdGVyKFxuICAgICAgKGVsKSA9PlxuICAgICAgICBpc0Rpc2FibGVkRm9jdXNhYmxlIHx8XG4gICAgICAgICFlbC5jbGFzc0xpc3QuY29udGFpbnMoY2xhc3Nlcz8uZGlzYWJsZWQgYXMgc3RyaW5nKVxuICAgICk7XG5cbiAgICBjb25zdCBjdXJyZW50Rm9jdXMgPSBmb2N1c2VzTGlzdC5pbmRleE9mKGV2dC5jdXJyZW50VGFyZ2V0KTtcblxuICAgIGNvbnN0IGZvY3VzZXMgPSB7XG4gICAgICBmaXJzdDogZm9jdXNlc0xpc3RbMF0sXG4gICAgICBsYXN0OiBmb2N1c2VzTGlzdFtmb2N1c2VzTGlzdC5sZW5ndGggLSAxXSxcbiAgICAgIHByZXZpb3VzOiBmb2N1c2VzTGlzdFtjdXJyZW50Rm9jdXMgLSAxXSxcbiAgICAgIG5leHQ6IGZvY3VzZXNMaXN0W2N1cnJlbnRGb2N1cyArIDFdLFxuICAgICAgZmFsbDogZm9jdXNlc0xpc3RbY3VycmVudEZvY3VzICsgbmF2aWdhdGlvbkp1bXBdLFxuICAgICAganVtcDogZm9jdXNlc0xpc3RbY3VycmVudEZvY3VzIC0gbmF2aWdhdGlvbkp1bXBdLFxuICAgIH07XG5cbiAgICBpZiAoc3RyYXRlZ3kgPT09IFwiZ3JpZFwiKSB7XG4gICAgICBvbkdyaWRLZXlEb3duSGFuZGxlcihcbiAgICAgICAgZXZ0LFxuICAgICAgICBmb2N1c2VzLFxuICAgICAgICBmb2N1c2VzTGlzdCxcbiAgICAgICAgY3VycmVudEZvY3VzLFxuICAgICAgICBuYXZpZ2F0aW9uSnVtcFxuICAgICAgKTtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICAvLyBUT0RPIGFkZCBwcm9wZXJ0eSBmb3Igc3BlY2lmeWluZyB0aGUgY29tcG9zaXRlIHdpZGdldCBvcmllbnRhdGlvblxuICAgIC8vIFRPRE8gaW1wbGVtZW50IGhhbmRsZXIgZm9yIGhvcml6b250YWwgb3JpZW50YXRpb25cbiAgICBvblZlcnRpY2FsQXJyYW5nZW1lbnRIYW5kbGVyKGV2dCwgZm9jdXNlcywgZm9jdXNlc0xpc3QpO1xuICB9O1xuXG4gIGNvbnN0IG9uS2V5VXAgPSAoZXZ0KSA9PiB7XG4gICAgaWYgKGlzQnJvd3NlcihcImZpcmVmb3hcIikpIGV2dC5wcmV2ZW50RGVmYXVsdCgpO1xuICB9O1xuXG4gIGlmIChkaXNhYmxlZCkgcmV0dXJuIGNoaWxkcmVuO1xuXG4gIGNvbnN0IGZvY3VzV3JhcHBlciA9IChjaGlsZHJlblRvV3JhcCkgPT4gKFxuICAgIDxTdHlsZWRGb2N1c1dyYXBwZXJcbiAgICAgIGNsYXNzTmFtZT17Y2xzeChcbiAgICAgICAgY2xhc3Nlcz8uZXh0ZXJuYWxSZWZlcmVuY2UsXG4gICAgICAgIGZvY3VzQ2xhc3Nlcy5leHRlcm5hbFJlZmVyZW5jZVxuICAgICAgKX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW5Ub1dyYXB9XG4gICAgICB7c2hvd0ZvY3VzICYmIChcbiAgICAgICAgPFN0eWxlZEZhbHNlRm9jdXNcbiAgICAgICAgICBjbGFzc05hbWU9e2Nsc3goY2xhc3Nlcz8uZmFsc2VGb2N1cywgZm9jdXNDbGFzc2VzLmZhbHNlRm9jdXMpfVxuICAgICAgICAvPlxuICAgICAgKX1cbiAgICA8L1N0eWxlZEZvY3VzV3JhcHBlcj5cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxDb25kaXRpb25hbFdyYXBwZXIgY29uZGl0aW9uPXt1c2VGYWxzZUZvY3VzfSB3cmFwcGVyPXtmb2N1c1dyYXBwZXJ9PlxuICAgICAgPEdsb2JhbCBzdHlsZXM9e2ZvY3VzU3R5bGVzfSAvPlxuICAgICAge1JlYWN0LmNsb25lRWxlbWVudChjaGlsZHJlbiwge1xuICAgICAgICBjbGFzc05hbWU6IGNsc3goXG4gICAgICAgICAgY2hpbGRyZW4ucHJvcHMuY2xhc3NOYW1lLFxuICAgICAgICAgIGZvY3VzQ2xhc3Nlcy5yb290LFxuICAgICAgICAgIGNsYXNzZXM/LnJvb3QsXG4gICAgICAgICAgZmlsdGVyQ2xhc3MsXG4gICAgICAgICAgc2VsZWN0ZWQgJiYgY2xzeChmb2N1c0NsYXNzZXMuc2VsZWN0ZWQsIGNsYXNzZXM/LnNlbGVjdGVkKSxcbiAgICAgICAgICBkaXNhYmxlZENsYXNzICYmIGNsc3goZm9jdXNDbGFzc2VzLmRpc2FibGVkLCBjbGFzc2VzPy5kaXNhYmxlZCksXG4gICAgICAgICAgZm9jdXNEaXNhYmxlZCAmJlxuICAgICAgICAgICAgY2xzeChmb2N1c0NsYXNzZXMuZm9jdXNEaXNhYmxlZCwgY2xhc3Nlcz8uZm9jdXNEaXNhYmxlZClcbiAgICAgICAgKSxcbiAgICAgICAgcmVmOiBjb25maWcsXG4gICAgICAgIG9uRm9jdXMsXG4gICAgICAgIG9uQmx1cixcbiAgICAgICAgb25Nb3VzZURvd24sXG4gICAgICAgIG9uS2V5RG93bixcbiAgICAgICAgb25LZXlVcCxcbiAgICAgICAgc2VsZWN0ZWQsXG4gICAgICB9KX1cbiAgICA8L0NvbmRpdGlvbmFsV3JhcHBlcj5cbiAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
+import { useClasses, staticClasses } from "./Focus.styles.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 const HvFocus = ({
-  classes,
+  classes: classesProp,
   children,
   configuration = {},
   disabledClass = false,
@@ -39,11 +24,17 @@ const HvFocus = ({
   const [showFocus, setShowFocus] = useState(false);
   const [childFocus, setChildFocus] = useState();
   const [hasRunConfig, setHasRunConfig] = useState(false);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const getFocuses = () => {
-    const focuses = (rootRef == null ? void 0 : rootRef.current) ? Array.from(rootRef.current.getElementsByClassName(filterClass || focusClasses.root || (classes == null ? void 0 : classes.root) || "root")) : [];
+    const focuses = (rootRef == null ? void 0 : rootRef.current) ? Array.from(rootRef.current.getElementsByClassName(filterClass || staticClasses.root || "root")) : [];
     return focuses;
   };
   const setTabIndex = (el, tabIndex = 0) => {
+    if (!el)
+      return;
     const elChildFocus = getFocusableChildren(el)[0];
     if (elChildFocus) {
       el.tabIndex = -1;
@@ -54,7 +45,7 @@ const HvFocus = ({
   };
   const setSelectedTabIndex = () => {
     const focuses = getFocuses();
-    const firstSelected = focuses.find((focus) => focus.classList.contains(focusClasses.selected || (classes == null ? void 0 : classes.selected) || "selected"));
+    const firstSelected = focuses.find((focus) => focus.classList.contains(classes.selected || "selected"));
     if (!firstSelected)
       return;
     focuses.forEach((focus) => setTabIndex(focus, -1));
@@ -101,10 +92,7 @@ const HvFocus = ({
   const addFocusClass = (evt) => {
     var _a;
     if (!useFalseFocus) {
-      evt.currentTarget.classList.add(focusClasses.focused);
-      if (classes == null ? void 0 : classes.focused) {
-        evt.currentTarget.classList.add(classes.focused);
-      }
+      classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
       evt.currentTarget.classList.add("HvIsFocused");
       (_a = classes == null ? void 0 : classes.focus) == null ? void 0 : _a.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
     }
@@ -113,12 +101,7 @@ const HvFocus = ({
     if (!useFalseFocus) {
       getFocuses().forEach((element) => {
         var _a;
-        if (focusClasses.focused) {
-          element.classList.remove(focusClasses.focused);
-        }
-        if (classes == null ? void 0 : classes.focused) {
-          element.classList.remove(classes.focused);
-        }
+        classes.focused.split(" ").forEach((c) => element.classList.remove(c));
         element.classList.remove("HvIsFocused");
         (_a = classes == null ? void 0 : classes.focus) == null ? void 0 : _a.split(" ").forEach((c) => element.classList.remove(c));
       });
@@ -271,19 +254,21 @@ const HvFocus = ({
   };
   if (disabled)
     return children;
-  const focusWrapper = (childrenToWrap) => /* @__PURE__ */ jsxs(StyledFocusWrapper, {
-    className: clsx(classes == null ? void 0 : classes.externalReference, focusClasses.externalReference),
-    children: [childrenToWrap, showFocus && /* @__PURE__ */ jsx(StyledFalseFocus, {
-      className: clsx(classes == null ? void 0 : classes.falseFocus, focusClasses.falseFocus)
+  const focusWrapper = (childrenToWrap) => /* @__PURE__ */ jsxs("div", {
+    className: classes.externalReference,
+    children: [childrenToWrap, showFocus && /* @__PURE__ */ jsx("div", {
+      className: classes.falseFocus
     })]
   });
-  return /* @__PURE__ */ jsxs(ConditionalWrapper, {
+  return /* @__PURE__ */ jsx(ConditionalWrapper, {
     condition: useFalseFocus,
     wrapper: focusWrapper,
-    children: [/* @__PURE__ */ jsx(Global, {
-      styles: focusStyles
-    }), React__default.cloneElement(children, {
-      className: clsx(children.props.className, focusClasses.root, classes == null ? void 0 : classes.root, filterClass, selected && clsx(focusClasses.selected, classes == null ? void 0 : classes.selected), disabledClass && clsx(focusClasses.disabled, classes == null ? void 0 : classes.disabled), focusDisabled && clsx(focusClasses.focusDisabled, classes == null ? void 0 : classes.focusDisabled)),
+    children: React__default.cloneElement(children, {
+      className: cx([classes.root, filterClass], {
+        [classes.selected]: selected,
+        [classes.disabled]: disabledClass,
+        [classes.focusDisabled]: focusDisabled
+      }, children.props.className),
       ref: config,
       onFocus,
       onBlur,
@@ -291,10 +276,11 @@ const HvFocus = ({
       onKeyDown,
       onKeyUp,
       selected
-    })]
+    })
   });
 };
 export {
-  HvFocus
+  HvFocus,
+  staticClasses as focusClasses
 };
 //# sourceMappingURL=Focus.js.map

package/dist/esm/components/Focus/Focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"Focus.js","sources":["../../../../src/components/Focus/Focus.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport isNil from \"lodash/isNil\";\n\nimport React, { RefObject, useState } from \"react\";\n\nimport { css, Global } from \"@emotion/react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey, isOneOfKeys } from \"@core/utils/keyboardUtils\";\nimport { isBrowser } from \"@core/utils/browser\";\nimport { ConditionalWrapper } from \"@core/utils/ConditionalWrapper\";\n\nimport { StyledFocusWrapper, StyledFalseFocus } from \"./Focus.styles\";\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\nimport focusClasses, { HvFocusClasses } from \"./focusClasses\";\n\nconst focusStyles = css`\n  .HvFocus-focused {\n    outline-color: #52a8ec;\n    outline-style: solid;\n    outline-width: 0px;\n    outline-offset: -1px;\n    box-shadow: 0 0 0 1px #52a8ec, 0 0 0 4px rgba(29, 155, 209, 0.3);\n\n    @media (-webkit-min-device-pixel-ratio: 0) {\n      outline-color: #52a8ec;\n      outline-style: solid;\n      outline-width: 0px;\n      outline-offset: -1px;\n      box-shadow: 0 0 0 1px #52a8ec, 0 0 0 4px rgba(29, 155, 209, 0.3);\n    }\n  }\n\n  .HvFocus-focusDisabled {\n    outline: none;\n    box-shadow: none;\n  }\n  .HvFocus-focusDisabled *:focus {\n    outline: none;\n    box-shadow: none;\n  }\n  .HvFocus-focusDisabled * {\n    outline: none !important;\n    box-shadow: none !important;\n  }\n`;\n\nexport type HvFocusStrategies = \"listbox\" | \"menu\" | \"card\" | \"grid\";\n\nexport interface HvFocusProps extends HvBaseProps<HTMLElement, \"children\"> {\n  children: React.ReactElement;\n  /** Extra configuration for the child element. */\n  configuration?: {\n    tabIndex?: number;\n  };\n  /** Indicates that the disabled class should be applied. */\n  disabledClass?: boolean;\n  /** Whether the focus is selected. */\n  selected?: boolean;\n  /** Whether the focus is disabled. */\n  disabled?: boolean;\n  /** The reference to the root element to hold all Focus' context. */\n  rootRef?: RefObject<HTMLElement>;\n  /** Show focus when click element. v */\n  focusOnClick?: boolean;\n  /** Show focus when click element. v */\n  focusDisabled?: boolean;\n  /** Focus and navigation strategy to be used. v */\n  strategy?: HvFocusStrategies;\n  /** Uses an absolute positioned div as a focus. v */\n  useFalseFocus?: boolean;\n  /** Narrows the results of the focus to only theses class v */\n  filterClass?: string;\n  /** How much the navigation will skip when using the arrows. v */\n  navigationJump?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFocusClasses;\n}\n\nexport const HvFocus = ({\n  classes,\n  children,\n  configuration = {},\n  disabledClass = false,\n  selected = false,\n  disabled = false,\n  rootRef = undefined,\n  focusOnClick = false,\n  focusDisabled = true,\n  strategy = \"listbox\",\n  useFalseFocus = false,\n  filterClass,\n  navigationJump = 4,\n}: HvFocusProps) => {\n  const [showFocus, setShowFocus] = useState<boolean>(false);\n  const [childFocus, setChildFocus] = useState<any>();\n  const [hasRunConfig, setHasRunConfig] = useState(false);\n\n  const getFocuses = () => {\n    const focuses = rootRef?.current\n      ? Array.from(\n          rootRef.current.getElementsByClassName(\n            filterClass || focusClasses.root || classes?.root || \"root\"\n          )\n        )\n      : [];\n    return focuses;\n  };\n\n  const setTabIndex = (el, tabIndex = 0) => {\n    const elChildFocus = getFocusableChildren(el)[0];\n    if (elChildFocus) {\n      el.tabIndex = -1;\n      elChildFocus.tabIndex = tabIndex;\n    } else {\n      el.tabIndex = tabIndex;\n    }\n  };\n\n  const setSelectedTabIndex = () => {\n    const focuses = getFocuses();\n    const firstSelected = focuses.find((focus) =>\n      focus.classList.contains(\n        focusClasses.selected || classes?.selected || \"selected\"\n      )\n    );\n\n    if (!firstSelected) return;\n    focuses.forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(firstSelected, 0);\n  };\n\n  const clearTabSiblings = (el) => {\n    getFocuses().forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(el, 0);\n  };\n\n  const onFocusStrategy = (evt) => {\n    if (strategy === \"listbox\") {\n      clearTabSiblings(evt.currentTarget);\n    }\n  };\n\n  const onBlurStrategy = () => {\n    if (\n      strategy === \"listbox\" &&\n      rootRef &&\n      rootRef.current &&\n      !rootRef.current.contains(document.activeElement)\n    ) {\n      setTimeout(() => {\n        setSelectedTabIndex();\n      }, 10);\n    }\n  };\n\n  const config = (el) => {\n    const { tabIndex } = configuration;\n    if (!el || hasRunConfig) return;\n    if (strategy === \"card\") {\n      setChildFocus(children);\n      return;\n    }\n\n    if (strategy === \"grid\") {\n      return;\n    }\n\n    const focusableChildren = getFocusableChildren(el);\n    if (focusableChildren.length) {\n      focusableChildren.forEach((child) => setTabIndex(child, -1));\n      setChildFocus(focusableChildren[0]);\n    }\n\n    if (!isNil(tabIndex)) setTabIndex(el, tabIndex);\n    setHasRunConfig(true);\n  };\n\n  const addFocusClass = (evt) => {\n    if (!useFalseFocus) {\n      evt.currentTarget.classList.add(focusClasses.focused);\n      if (classes?.focused) {\n        evt.currentTarget.classList.add(classes.focused);\n      }\n      // add global class HvIsFocused as a marker\n      // not to be styled directly, only as helper in specific css queries\n      evt.currentTarget.classList.add(\"HvIsFocused\");\n      classes?.focus\n        ?.split(\" \")\n        .forEach((c) => evt.currentTarget.classList.add(c));\n    }\n  };\n\n  const removeFocusClass = () => {\n    if (!useFalseFocus) {\n      getFocuses().forEach((element) => {\n        if (focusClasses.focused) {\n          element.classList.remove(focusClasses.focused);\n        }\n        if (classes?.focused) {\n          element.classList.remove(classes.focused);\n        }\n        // remove the global class HvIsFocused\n        element.classList.remove(\"HvIsFocused\");\n        classes?.focus?.split(\" \").forEach((c) => element.classList.remove(c));\n      });\n    }\n  };\n\n  const onFocus = (evt) => {\n    addFocusClass(evt);\n    setShowFocus(true);\n    // give focus to child element if any focusable\n\n    if (childFocus && childFocus.focus) childFocus.focus();\n    onFocusStrategy(evt);\n  };\n\n  const onBlur = () => {\n    setShowFocus(false);\n    removeFocusClass();\n    onBlurStrategy();\n  };\n\n  const onMouseDown = (evt) => {\n    const hasCard = !!evt.currentTarget?.querySelector(\".HvIsCardGridElement\");\n    if (strategy === \"grid\" && hasCard) return;\n\n    setFocusTo(evt.currentTarget);\n    setTabIndex(evt.currentTarget, 0);\n    // remove focus outline unless explicitly enabled\n    if (!focusOnClick) {\n      // TODO this piece of code works only because onMouseDown is happening after the focus event\n      // There is nothing in here that guarantees the order of these events, so it may present a problem in the future\n      removeFocusClass();\n      setShowFocus(false);\n    }\n  };\n\n  const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {\n    if (focusesList?.includes(previousFocus)) {\n      setTabIndex(previousFocus, -1);\n    }\n    setTabIndex(nextFocus, 0);\n    setFocusTo(nextFocus);\n  };\n\n  const getEnabledKeys = (currentFocusIndex, jump, listSize) => ({\n    right:\n      (currentFocusIndex + 1) % jump === 0 ||\n      currentFocusIndex + 1 > listSize - 1,\n    left: currentFocusIndex % jump === 0,\n    up: currentFocusIndex - jump < 0,\n    down:\n      currentFocusIndex + jump > listSize ||\n      currentFocusIndex + jump > listSize - 1,\n  });\n\n  const onGridKeyDownHandler = (\n    evt,\n    focuses,\n    focusesList,\n    currentFocusIndex,\n    jump\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    // except for Enter and SpaceBar\n    if (!isOneOfKeys(evt, [\"Enter\", \"Space\"])) {\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n\n    const blockedKeys = getEnabledKeys(\n      currentFocusIndex,\n      jump,\n      focusesList.length\n    );\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        if (isBrowser(\"firefox\")) {\n          evt.target.click();\n        } else {\n          evt.currentTarget.click();\n        }\n        break;\n      case \"ArrowUp\":\n        if (!blockedKeys.up) {\n          focusAndUpdateIndex(\n            focuses.jump || focuses.last,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"ArrowDown\":\n        if (!blockedKeys.down) {\n          focusAndUpdateIndex(\n            focuses.fall || focuses.first,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"ArrowLeft\":\n        if (!blockedKeys.left) {\n          focusAndUpdateIndex(\n            focuses.previous || focuses.last,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"ArrowRight\":\n        if (!blockedKeys.right) {\n          focusAndUpdateIndex(\n            focuses.next || focuses.first,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onVerticalArrangementHandler = (evt, focuses, focusesList) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        evt.target.click();\n        break;\n      case \"ArrowUp\":\n        focusAndUpdateIndex(\n          focuses.previous || focuses.last,\n          evt.current,\n          focusesList\n        );\n        break;\n      case \"ArrowDown\":\n        focusAndUpdateIndex(\n          focuses.next || focuses.first,\n          evt.current,\n          focusesList\n        );\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onSingleHandler = (evt) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\"Space\", \"Enter\"]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    evt.currentTarget.click();\n  };\n\n  const onKeyDown = (evt) => {\n    if (rootRef?.current == null) {\n      // operating outside of a composite widget\n      // nothing to manage, just style and trigger clicks\n      onSingleHandler(evt);\n      return;\n    }\n\n    // TODO keep the smart default, but allow to explicitly override if disabled elements should be focusable\n    const isDisabledFocusable = strategy === \"menu\";\n    const focusesList = getFocuses().filter(\n      (el) =>\n        isDisabledFocusable ||\n        !el.classList.contains(classes?.disabled as string)\n    );\n\n    const currentFocus = focusesList.indexOf(evt.currentTarget);\n\n    const focuses = {\n      first: focusesList[0],\n      last: focusesList[focusesList.length - 1],\n      previous: focusesList[currentFocus - 1],\n      next: focusesList[currentFocus + 1],\n      fall: focusesList[currentFocus + navigationJump],\n      jump: focusesList[currentFocus - navigationJump],\n    };\n\n    if (strategy === \"grid\") {\n      onGridKeyDownHandler(\n        evt,\n        focuses,\n        focusesList,\n        currentFocus,\n        navigationJump\n      );\n      return;\n    }\n\n    // TODO add property for specifying the composite widget orientation\n    // TODO implement handler for horizontal orientation\n    onVerticalArrangementHandler(evt, focuses, focusesList);\n  };\n\n  const onKeyUp = (evt) => {\n    if (isBrowser(\"firefox\")) evt.preventDefault();\n  };\n\n  if (disabled) return children;\n\n  const focusWrapper = (childrenToWrap) => (\n    <StyledFocusWrapper\n      className={clsx(\n        classes?.externalReference,\n        focusClasses.externalReference\n      )}\n    >\n      {childrenToWrap}\n      {showFocus && (\n        <StyledFalseFocus\n          className={clsx(classes?.falseFocus, focusClasses.falseFocus)}\n        />\n      )}\n    </StyledFocusWrapper>\n  );\n\n  return (\n    <ConditionalWrapper condition={useFalseFocus} wrapper={focusWrapper}>\n      <Global styles={focusStyles} />\n      {React.cloneElement(children, {\n        className: clsx(\n          children.props.className,\n          focusClasses.root,\n          classes?.root,\n          filterClass,\n          selected && clsx(focusClasses.selected, classes?.selected),\n          disabledClass && clsx(focusClasses.disabled, classes?.disabled),\n          focusDisabled &&\n            clsx(focusClasses.focusDisabled, classes?.focusDisabled)\n        ),\n        ref: config,\n        onFocus,\n        onBlur,\n        onMouseDown,\n        onKeyDown,\n        onKeyUp,\n        selected,\n      })}\n    </ConditionalWrapper>\n  );\n};\n"],"names":["focusStyles","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","HvFocus","classes","children","configuration","disabledClass","selected","disabled","rootRef","undefined","focusOnClick","focusDisabled","strategy","useFalseFocus","filterClass","navigationJump","showFocus","setShowFocus","useState","childFocus","setChildFocus","hasRunConfig","setHasRunConfig","getFocuses","focuses","current","Array","from","getElementsByClassName","focusClasses","root","setTabIndex","el","tabIndex","elChildFocus","getFocusableChildren","setSelectedTabIndex","firstSelected","find","focus","classList","contains","forEach","clearTabSiblings","onFocusStrategy","evt","currentTarget","onBlurStrategy","document","activeElement","setTimeout","config","focusableChildren","length","child","isNil","addFocusClass","add","focused","split","c","removeFocusClass","element","remove","onFocus","onBlur","onMouseDown","hasCard","querySelector","setFocusTo","focusAndUpdateIndex","nextFocus","previousFocus","focusesList","includes","getEnabledKeys","currentFocusIndex","jump","listSize","right","left","up","down","onGridKeyDownHandler","childFocusIsInput","nodeName","isOneOfKeys","isKey","preventDefault","stopPropagation","blockedKeys","code","isBrowser","target","click","last","fall","first","previous","next","onVerticalArrangementHandler","onSingleHandler","onKeyDown","isDisabledFocusable","filter","currentFocus","indexOf","onKeyUp","focusWrapper","childrenToWrap","_jsxs","StyledFocusWrapper","className","clsx","externalReference","StyledFalseFocus","falseFocus","ConditionalWrapper","condition","wrapper","_jsx","Global","React","cloneElement","props","ref"],"mappings":"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"}
+{"version":3,"file":"Focus.js","sources":["../../../../src/components/Focus/Focus.tsx"],"sourcesContent":["import isNil from \"lodash/isNil\";\nimport React, { RefObject, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey, isOneOfKeys } from \"@core/utils/keyboardUtils\";\nimport { isBrowser } from \"@core/utils/browser\";\nimport { ConditionalWrapper } from \"@core/utils/ConditionalWrapper\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\nimport { staticClasses, useClasses } from \"./Focus.styles\";\n\nexport { staticClasses as focusClasses };\nexport type HvFocusClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFocusStrategies = \"listbox\" | \"menu\" | \"card\" | \"grid\";\n\nexport interface HvFocusProps extends HvBaseProps<HTMLElement, \"children\"> {\n  children: React.ReactElement;\n  /** Extra configuration for the child element. */\n  configuration?: {\n    tabIndex?: number;\n  };\n  /** Indicates that the disabled class should be applied. */\n  disabledClass?: boolean;\n  /** Whether the focus is selected. */\n  selected?: boolean;\n  /** Whether the focus is disabled. */\n  disabled?: boolean;\n  /** The reference to the root element to hold all Focus' context. */\n  rootRef?: RefObject<HTMLElement>;\n  /** Show focus when click element. v */\n  focusOnClick?: boolean;\n  /** Show focus when click element. v */\n  focusDisabled?: boolean;\n  /** Focus and navigation strategy to be used. v */\n  strategy?: HvFocusStrategies;\n  /** Uses an absolute positioned div as a focus. v */\n  useFalseFocus?: boolean;\n  /** Narrows the results of the focus to only theses class v */\n  filterClass?: string;\n  /** How much the navigation will skip when using the arrows. v */\n  navigationJump?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFocusClasses;\n}\n\nexport const HvFocus = ({\n  classes: classesProp,\n  children,\n  configuration = {},\n  disabledClass = false,\n  selected = false,\n  disabled = false,\n  rootRef = undefined,\n  focusOnClick = false,\n  focusDisabled = true,\n  strategy = \"listbox\",\n  useFalseFocus = false,\n  filterClass,\n  navigationJump = 4,\n}: HvFocusProps) => {\n  const [showFocus, setShowFocus] = useState<boolean>(false);\n  const [childFocus, setChildFocus] = useState<any>();\n  const [hasRunConfig, setHasRunConfig] = useState(false);\n  const { classes, cx } = useClasses(classesProp);\n\n  const getFocuses = () => {\n    const focuses = rootRef?.current\n      ? Array.from(\n          rootRef.current.getElementsByClassName(\n            filterClass || staticClasses.root || \"root\"\n          )\n        )\n      : [];\n    return focuses;\n  };\n\n  const setTabIndex = (el, tabIndex = 0) => {\n    if (!el) return;\n    const elChildFocus = getFocusableChildren(el)[0];\n    if (elChildFocus) {\n      el.tabIndex = -1;\n      elChildFocus.tabIndex = tabIndex;\n    } else {\n      el.tabIndex = tabIndex;\n    }\n  };\n\n  const setSelectedTabIndex = () => {\n    const focuses = getFocuses();\n    const firstSelected = focuses.find((focus) =>\n      focus.classList.contains(classes.selected || \"selected\")\n    );\n\n    if (!firstSelected) return;\n    focuses.forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(firstSelected, 0);\n  };\n\n  const clearTabSiblings = (el) => {\n    getFocuses().forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(el, 0);\n  };\n\n  const onFocusStrategy = (evt) => {\n    if (strategy === \"listbox\") {\n      clearTabSiblings(evt.currentTarget);\n    }\n  };\n\n  const onBlurStrategy = () => {\n    if (\n      strategy === \"listbox\" &&\n      rootRef &&\n      rootRef.current &&\n      !rootRef.current.contains(document.activeElement)\n    ) {\n      setTimeout(() => {\n        setSelectedTabIndex();\n      }, 10);\n    }\n  };\n\n  const config = (el) => {\n    const { tabIndex } = configuration;\n    if (!el || hasRunConfig) return;\n    if (strategy === \"card\") {\n      setChildFocus(children);\n      return;\n    }\n\n    if (strategy === \"grid\") {\n      return;\n    }\n\n    const focusableChildren = getFocusableChildren(el);\n    if (focusableChildren.length) {\n      focusableChildren.forEach((child) => setTabIndex(child, -1));\n      setChildFocus(focusableChildren[0]);\n    }\n\n    if (!isNil(tabIndex)) setTabIndex(el, tabIndex);\n    setHasRunConfig(true);\n  };\n\n  const addFocusClass = (evt) => {\n    if (!useFalseFocus) {\n      // evt.currentTarget.classList.add(classes.focused);\n      classes.focused\n        .split(\" \")\n        .forEach((c) => evt.currentTarget.classList.add(c));\n      // add global class HvIsFocused as a marker\n      // not to be styled directly, only as helper in specific css queries\n      evt.currentTarget.classList.add(\"HvIsFocused\");\n      classes?.focus\n        ?.split(\" \")\n        .forEach((c) => evt.currentTarget.classList.add(c));\n    }\n  };\n\n  const removeFocusClass = () => {\n    if (!useFalseFocus) {\n      getFocuses().forEach((element) => {\n        // element.classList.remove(classes.focused);\n        classes.focused.split(\" \").forEach((c) => element.classList.remove(c));\n        // remove the global class HvIsFocused\n        element.classList.remove(\"HvIsFocused\");\n        classes?.focus?.split(\" \").forEach((c) => element.classList.remove(c));\n      });\n    }\n  };\n\n  const onFocus = (evt) => {\n    addFocusClass(evt);\n    setShowFocus(true);\n    // give focus to child element if any focusable\n\n    if (childFocus && childFocus.focus) childFocus.focus();\n    onFocusStrategy(evt);\n  };\n\n  const onBlur = () => {\n    setShowFocus(false);\n    removeFocusClass();\n    onBlurStrategy();\n  };\n\n  const onMouseDown = (evt) => {\n    const hasCard = !!evt.currentTarget?.querySelector(\".HvIsCardGridElement\");\n    if (strategy === \"grid\" && hasCard) return;\n\n    setFocusTo(evt.currentTarget);\n    setTabIndex(evt.currentTarget, 0);\n    // remove focus outline unless explicitly enabled\n    if (!focusOnClick) {\n      // TODO this piece of code works only because onMouseDown is happening after the focus event\n      // There is nothing in here that guarantees the order of these events, so it may present a problem in the future\n      removeFocusClass();\n      setShowFocus(false);\n    }\n  };\n\n  const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {\n    if (focusesList?.includes(previousFocus)) {\n      setTabIndex(previousFocus, -1);\n    }\n    setTabIndex(nextFocus, 0);\n    setFocusTo(nextFocus);\n  };\n\n  const getEnabledKeys = (currentFocusIndex, jump, listSize) => ({\n    right:\n      (currentFocusIndex + 1) % jump === 0 ||\n      currentFocusIndex + 1 > listSize - 1,\n    left: currentFocusIndex % jump === 0,\n    up: currentFocusIndex - jump < 0,\n    down:\n      currentFocusIndex + jump > listSize ||\n      currentFocusIndex + jump > listSize - 1,\n  });\n\n  const onGridKeyDownHandler = (\n    evt,\n    focuses,\n    focusesList,\n    currentFocusIndex,\n    jump\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    // except for Enter and SpaceBar\n    if (!isOneOfKeys(evt, [\"Enter\", \"Space\"])) {\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n\n    const blockedKeys = getEnabledKeys(\n      currentFocusIndex,\n      jump,\n      focusesList.length\n    );\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        if (isBrowser(\"firefox\")) {\n          evt.target.click();\n        } else {\n          evt.currentTarget.click();\n        }\n        break;\n      case \"ArrowUp\":\n        if (!blockedKeys.up) {\n          focusAndUpdateIndex(\n            focuses.jump || focuses.last,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"ArrowDown\":\n        if (!blockedKeys.down) {\n          focusAndUpdateIndex(\n            focuses.fall || focuses.first,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"ArrowLeft\":\n        if (!blockedKeys.left) {\n          focusAndUpdateIndex(\n            focuses.previous || focuses.last,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"ArrowRight\":\n        if (!blockedKeys.right) {\n          focusAndUpdateIndex(\n            focuses.next || focuses.first,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onVerticalArrangementHandler = (evt, focuses, focusesList) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        evt.target.click();\n        break;\n      case \"ArrowUp\":\n        focusAndUpdateIndex(\n          focuses.previous || focuses.last,\n          evt.current,\n          focusesList\n        );\n        break;\n      case \"ArrowDown\":\n        focusAndUpdateIndex(\n          focuses.next || focuses.first,\n          evt.current,\n          focusesList\n        );\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onSingleHandler = (evt) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\"Space\", \"Enter\"]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    evt.currentTarget.click();\n  };\n\n  const onKeyDown = (evt) => {\n    if (rootRef?.current == null) {\n      // operating outside of a composite widget\n      // nothing to manage, just style and trigger clicks\n      onSingleHandler(evt);\n      return;\n    }\n\n    // TODO keep the smart default, but allow to explicitly override if disabled elements should be focusable\n    const isDisabledFocusable = strategy === \"menu\";\n    const focusesList = getFocuses().filter(\n      (el) =>\n        isDisabledFocusable ||\n        !el.classList.contains(classes?.disabled as string)\n    );\n\n    const currentFocus = focusesList.indexOf(evt.currentTarget);\n\n    const focuses = {\n      first: focusesList[0],\n      last: focusesList[focusesList.length - 1],\n      previous: focusesList[currentFocus - 1],\n      next: focusesList[currentFocus + 1],\n      fall: focusesList[currentFocus + navigationJump],\n      jump: focusesList[currentFocus - navigationJump],\n    };\n\n    if (strategy === \"grid\") {\n      onGridKeyDownHandler(\n        evt,\n        focuses,\n        focusesList,\n        currentFocus,\n        navigationJump\n      );\n      return;\n    }\n\n    // TODO add property for specifying the composite widget orientation\n    // TODO implement handler for horizontal orientation\n    onVerticalArrangementHandler(evt, focuses, focusesList);\n  };\n\n  const onKeyUp = (evt) => {\n    if (isBrowser(\"firefox\")) evt.preventDefault();\n  };\n\n  if (disabled) return children;\n\n  const focusWrapper = (childrenToWrap) => (\n    <div className={classes.externalReference}>\n      {childrenToWrap}\n      {showFocus && <div className={classes.falseFocus} />}\n    </div>\n  );\n\n  return (\n    <ConditionalWrapper condition={useFalseFocus} wrapper={focusWrapper}>\n      {React.cloneElement(children, {\n        className: cx(\n          [classes.root, filterClass],\n          {\n            [classes.selected]: selected,\n            [classes.disabled]: disabledClass,\n            [classes.focusDisabled]: focusDisabled,\n          },\n          children.props.className\n        ),\n        ref: config,\n        onFocus,\n        onBlur,\n        onMouseDown,\n        onKeyDown,\n        onKeyUp,\n        selected,\n      })}\n    </ConditionalWrapper>\n  );\n};\n"],"names":["HvFocus","classes","classesProp","children","configuration","disabledClass","selected","disabled","rootRef","undefined","focusOnClick","focusDisabled","strategy","useFalseFocus","filterClass","navigationJump","showFocus","setShowFocus","useState","childFocus","setChildFocus","hasRunConfig","setHasRunConfig","cx","useClasses","getFocuses","focuses","current","Array","from","getElementsByClassName","staticClasses","root","setTabIndex","el","tabIndex","elChildFocus","getFocusableChildren","setSelectedTabIndex","firstSelected","find","focus","classList","contains","forEach","clearTabSiblings","onFocusStrategy","evt","currentTarget","onBlurStrategy","document","activeElement","setTimeout","config","focusableChildren","length","child","isNil","addFocusClass","focused","split","c","add","removeFocusClass","element","remove","onFocus","onBlur","onMouseDown","hasCard","querySelector","setFocusTo","focusAndUpdateIndex","nextFocus","previousFocus","focusesList","includes","getEnabledKeys","currentFocusIndex","jump","listSize","right","left","up","down","onGridKeyDownHandler","childFocusIsInput","nodeName","isOneOfKeys","isKey","preventDefault","stopPropagation","blockedKeys","code","isBrowser","target","click","last","fall","first","previous","next","onVerticalArrangementHandler","onSingleHandler","onKeyDown","isDisabledFocusable","filter","currentFocus","indexOf","onKeyUp","focusWrapper","childrenToWrap","_jsxs","className","externalReference","falseFocus","ConditionalWrapper","condition","wrapper","React","cloneElement","props","ref"],"mappings":"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"}

package/dist/esm/components/Focus/Focus.styles.js

@@ -1,43 +1,48 @@
-import _styled from "@emotion/styled/base";
 import { outlineStyles } from "../../utils/focusUtils.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledFocusWrapper = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "ee8blvn1"
-} : {
-  target: "ee8blvn1",
-  label: "StyledFocusWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "bjn8wh",
-  styles: "position:relative"
-} : {
-  name: "bjn8wh",
-  styles: "position:relative",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9jdXMvRm9jdXMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHa0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb2N1cy9Gb2N1cy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEZvY3VzV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEZhbHNlRm9jdXMgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCI5OCVcIixcbiAgaGVpZ2h0OiBcIjk4JVwiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB6SW5kZXg6IFwiMVwiLFxuICAuLi5vdXRsaW5lU3R5bGVzLFxuICBcIkBtZWRpYSAoLXdlYmtpdC1taW4tZGV2aWNlLXBpeGVsLXJhdGlvOjApXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuICB0b3A6IDAsXG4gIGxlZnQ6IFwiMC41JVwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgcG9pbnRlckV2ZW50czogXCJub25lXCIsXG59KTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledFalseFocus = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "ee8blvn0"
-} : {
-  target: "ee8blvn0",
-  label: "StyledFalseFocus"
-})({
-  width: "98%",
-  height: "98%",
-  position: "absolute",
-  zIndex: "1",
-  ...outlineStyles,
-  "@media (-webkit-min-device-pixel-ratio:0)": {
-    ...outlineStyles
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvFocus", {
+  root: {},
+  selected: {},
+  disabled: {},
+  focusDisabled: {
+    outline: "none",
+    "& *:focus": {
+      outline: "none"
+    },
+    "& *": {
+      outline: "none !important"
+    }
+  },
+  focused: {
+    ...outlineStyles,
+    "@media (-webkit-min-device-pixel-ratio:0)": {
+      ...outlineStyles
+    }
+  },
+  externalReference: {
+    position: "relative"
   },
-  top: 0,
-  left: "0.5%",
-  backgroundColor: "transparent",
-  pointerEvents: "none"
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9jdXMvRm9jdXMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPZ0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb2N1cy9Gb2N1cy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEZvY3VzV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEZhbHNlRm9jdXMgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCI5OCVcIixcbiAgaGVpZ2h0OiBcIjk4JVwiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB6SW5kZXg6IFwiMVwiLFxuICAuLi5vdXRsaW5lU3R5bGVzLFxuICBcIkBtZWRpYSAoLXdlYmtpdC1taW4tZGV2aWNlLXBpeGVsLXJhdGlvOjApXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuICB0b3A6IDAsXG4gIGxlZnQ6IFwiMC41JVwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgcG9pbnRlckV2ZW50czogXCJub25lXCIsXG59KTtcbiJdfQ== */");
+  falseFocus: {
+    width: "98%",
+    height: "98%",
+    position: "absolute",
+    zIndex: "1",
+    ...outlineStyles,
+    "@media (-webkit-min-device-pixel-ratio:0)": {
+      ...outlineStyles
+    },
+    top: 0,
+    left: "0.5%",
+    backgroundColor: "transparent",
+    pointerEvents: "none"
+  },
+  focus: {}
+});
 export {
-  StyledFalseFocus,
-  StyledFocusWrapper
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Focus.styles.js.map

package/dist/esm/components/Focus/Focus.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Focus.styles.js","sources":["../../../../src/components/Focus/Focus.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const StyledFocusWrapper = styled(\"div\")({\n  position: \"relative\",\n});\n\nexport const StyledFalseFocus = styled(\"div\")({\n  width: \"98%\",\n  height: \"98%\",\n  position: \"absolute\",\n  zIndex: \"1\",\n  ...outlineStyles,\n  \"@media (-webkit-min-device-pixel-ratio:0)\": {\n    ...outlineStyles,\n  },\n  top: 0,\n  left: \"0.5%\",\n  backgroundColor: \"transparent\",\n  pointerEvents: \"none\",\n});\n"],"names":["StyledFocusWrapper","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledFalseFocus","width","height","position","zIndex","outlineStyles","top","left","backgroundColor","pointerEvents"],"mappings":";;;;;AAGO,MAAMA,qBAA4B,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAE9C;AAEM,MAAMC,mBAA0B,wBAAA,OAAKV,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC5CO,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACR,GAAGC;AAAAA,EACH,6CAA6C;AAAA,IAC3C,GAAGA;AAAAA,EACL;AAAA,EACAC,KAAK;AAAA,EACLC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,eAAe;AACjB,GAACnB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qoCAAA;"}
+{"version":3,"file":"Focus.styles.js","sources":["../../../../src/components/Focus/Focus.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFocus\", {\n  root: {},\n  selected: {},\n  disabled: {},\n  focusDisabled: {\n    outline: \"none\",\n    \"& *:focus\": {\n      outline: \"none\",\n    },\n    \"& *\": {\n      outline: \"none !important\",\n    },\n  },\n  focused: {\n    ...outlineStyles,\n    \"@media (-webkit-min-device-pixel-ratio:0)\": {\n      ...outlineStyles,\n    },\n  },\n  externalReference: {\n    position: \"relative\",\n  },\n  falseFocus: {\n    width: \"98%\",\n    height: \"98%\",\n    position: \"absolute\",\n    zIndex: \"1\",\n    ...outlineStyles,\n    \"@media (-webkit-min-device-pixel-ratio:0)\": {\n      ...outlineStyles,\n    },\n    top: 0,\n    left: \"0.5%\",\n    backgroundColor: \"transparent\",\n    pointerEvents: \"none\",\n  },\n  focus: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","selected","disabled","focusDisabled","outline","focused","outlineStyles","externalReference","position","falseFocus","width","height","zIndex","top","left","backgroundColor","pointerEvents","focus"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM,CAAC;AAAA,EACPC,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AAAA,EACXC,eAAe;AAAA,IACbC,SAAS;AAAA,IACT,aAAa;AAAA,MACXA,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACLA,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACP,GAAGC;AAAAA,IACH,6CAA6C;AAAA,MAC3C,GAAGA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBC,UAAU;AAAA,EACZ;AAAA,EACAC,YAAY;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRH,UAAU;AAAA,IACVI,QAAQ;AAAA,IACR,GAAGN;AAAAA,IACH,6CAA6C;AAAA,MAC3C,GAAGA;AAAAA,IACL;AAAA,IACAO,KAAK;AAAA,IACLC,MAAM;AAAA,IACNC,iBAAiB;AAAA,IACjBC,eAAe;AAAA,EACjB;AAAA,EACAC,OAAO,CAAC;AACV,CAAC;"}

package/dist/esm/components/List/List.js

@@ -1,15 +1,20 @@
 import { useRef, useEffect, useMemo, forwardRef, isValidElement } from "react";
+import { FixedSizeList } from "react-window";
+import { DropRightXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { clsx } from "clsx";
 import { setId } from "../../utils/setId.js";
 import { wrapperTooltip } from "../../utils/wrapperTooltip.js";
-import { StyledFixedSizeList, StyledSelectAllCheckBox, StyledListItem, StyledDropRightXS, StyledMultiSelectCheckBox, StyledSingleSelectRadio, StyledLink } from "./List.styles.js";
-import listClasses from "./listClasses.js";
+import { useClasses } from "./List.styles.js";
+import { staticClasses } from "./List.styles.js";
 import { useSelectableList } from "./useSelectableList.js";
 import { parseList } from "./utils.js";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { HvRadio } from "../Radio/Radio.js";
+import { HvLink } from "../Link/Link.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvTypography } from "../Typography/Typography.js";
+import { HvCheckBox } from "../CheckBox/CheckBox.js";
+import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 const DEFAULT_LABELS = {
   selectAll: "Select All",
   selectionConjunction: "/"
@@ -17,7 +22,7 @@ const DEFAULT_LABELS = {
 const HvList = (props) => {
   const {
     id,
-    classes,
+    classes: classesProp,
     className,
     multiSelect = false,
     hasTooltips = false,
@@ -34,6 +39,10 @@ const HvList = (props) => {
     virtualized = false,
     ...others
   } = useDefaultProps("HvList", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const [list, setList, selection] = useSelectableList(valuesProp);
   const listRef = useRef(null);
   useEffect(() => {
@@ -97,37 +106,37 @@ const HvList = (props) => {
         }), ` ${selectionConjunction} `, list.length]
       })
     });
-    return /* @__PURE__ */ jsx(StyledSelectAllCheckBox, {
+    return /* @__PURE__ */ jsx(HvCheckBox, {
       id: setId(id, "select-all"),
       label: selectionLabel,
       onChange: handleSelectAll,
-      className: clsx(listClasses.selectAllSelector, classes == null ? void 0 : classes.selectAllSelector),
+      className: classes.selectAllSelector,
       indeterminate: anySelected2 && !allSelected,
       checked: allSelected
     });
   };
   const renderItemText = (item) => {
     const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);
-    return !multiSelect && item.path ? /* @__PURE__ */ jsx(StyledLink, {
+    return !multiSelect && item.path ? /* @__PURE__ */ jsx(HvLink, {
       route: item.path,
       classes: {
-        a: clsx(listClasses.link, classes == null ? void 0 : classes.link)
+        a: classes.link
       },
       children: /* @__PURE__ */ jsx(ItemText, {})
     }, item.label) : /* @__PURE__ */ jsx(ItemText, {});
   };
   const renderMultiSelectItem = (item, itemId) => {
     if (useSelector) {
-      const Selection = wrapperTooltip(hasTooltips, /* @__PURE__ */ jsx(StyledMultiSelectCheckBox, {
+      const Selection = wrapperTooltip(hasTooltips, /* @__PURE__ */ jsx(HvCheckBox, {
         id: setId(itemId, "selector"),
         label: item.label,
         checked: item.selected,
         disabled: item.disabled,
         onChange: (evt) => handleSelect(evt, item),
         classes: {
-          root: clsx(listClasses.selectorRoot, classes == null ? void 0 : classes.selectorRoot),
-          container: clsx(listClasses.selectorContainer, classes == null ? void 0 : classes.selectorContainer),
-          label: clsx(listClasses.truncate, classes == null ? void 0 : classes.truncate)
+          root: classes.selectorRoot,
+          container: classes.selectorContainer,
+          label: classes.truncate
         }
       }), item.label);
       return /* @__PURE__ */ jsx(Selection, {});
@@ -136,15 +145,15 @@ const HvList = (props) => {
   };
   const renderSingleSelectItem = (item, itemId) => {
     if (useSelector) {
-      const Selection = wrapperTooltip(hasTooltips, /* @__PURE__ */ jsx(StyledSingleSelectRadio, {
+      const Selection = wrapperTooltip(hasTooltips, /* @__PURE__ */ jsx(HvRadio, {
         id: setId(itemId, "selector"),
         label: item.label,
         checked: item.selected,
         disabled: item.disabled,
         classes: {
-          root: clsx(listClasses.selectorRoot, classes == null ? void 0 : classes.selectorRoot),
-          container: clsx(listClasses.selectorContainer, classes == null ? void 0 : classes.selectorContainer),
-          label: clsx(listClasses.truncate, classes == null ? void 0 : classes.truncate)
+          root: classes.selectorRoot,
+          container: classes.selectorContainer,
+          label: classes.truncate
         }
       }), item.label);
       return /* @__PURE__ */ jsx(Selection, {});
@@ -158,22 +167,23 @@ const HvList = (props) => {
     if (!useSelector && item.icon) {
       startAdornment = renderLeftIcon(item);
     }
-    return /* @__PURE__ */ jsx(StyledListItem, {
+    return /* @__PURE__ */ jsx(HvListItem, {
       id: itemId,
       role: selectable ? "option" : "menuitem",
       disabled: item.disabled || void 0,
-      className: clsx(listClasses.item, classes == null ? void 0 : classes.item),
+      className: classes.item,
       classes: {
-        selected: useSelector || multiSelect ? clsx(listClasses.itemSelector, classes == null ? void 0 : classes.itemSelector) : void 0
+        selected: cx({
+          [classes.itemSelector]: useSelector || multiSelect
+        })
       },
       selected: multiSelect || selected ? selected : void 0,
       onClick: (evt) => handleSelect(evt, item),
       startAdornment,
-      endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(StyledDropRightXS, {
-        className: clsx(listClasses.box, classes == null ? void 0 : classes.box),
+      endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(DropRightXS, {
+        className: classes.box,
         iconSize: "XS"
       }),
-      $applySelected: useSelector || multiSelect,
       ...otherProps,
       children: multiSelect ? renderMultiSelectItem(item, itemId) : renderSingleSelectItem(item, itemId)
     }, i);
@@ -210,7 +220,7 @@ const HvList = (props) => {
       ...rest
     }, ref) => /* @__PURE__ */ jsx(HvListContainer, {
       id,
-      className: clsx(className, listClasses.root, classes == null ? void 0 : classes.root),
+      className: cx(classes.root, className),
       role: selectable ? "listbox" : "menu",
       interactive: true,
       condensed,
@@ -219,11 +229,11 @@ const HvList = (props) => {
       ref,
       ...rest
     }));
-  }, [id, useSelector, className, classes, condensed, selectable, multiSelect]);
+  }, [cx, id, useSelector, className, classes, condensed, selectable, multiSelect]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [multiSelect && useSelector && showSelectAll && renderSelectAll(), filteredList.length > 0 && !virtualized && /* @__PURE__ */ jsx(HvListContainer, {
       id,
-      className: clsx(className, listClasses.root, classes == null ? void 0 : classes.root),
+      className: cx(classes.root, className),
       role: selectable ? "listbox" : "menu",
       interactive: true,
       condensed,
@@ -231,9 +241,9 @@ const HvList = (props) => {
       "aria-multiselectable": selectable && multiSelect || void 0,
       ...others,
       children: filteredList.map((item, i) => renderListItem(item, i))
-    }), filteredList.length > 0 && virtualized && /* @__PURE__ */ jsx(StyledFixedSizeList, {
+    }), filteredList.length > 0 && virtualized && /* @__PURE__ */ jsx(FixedSizeList, {
       ref: listRef,
-      className: clsx(listClasses.virtualizedRoot, classes == null ? void 0 : classes.virtualizedRoot),
+      className: classes.virtualizedRoot,
       height: (height || 0) + 5,
       width: "100%",
       itemCount: filteredList.length,
@@ -245,6 +255,7 @@ const HvList = (props) => {
   });
 };
 export {
-  HvList
+  HvList,
+  staticClasses as listClasses
 };
 //# sourceMappingURL=List.js.map