npm - @hitachivantara/uikit-react-core - Versions diffs - 5.19.3 → 5.20.1 - Mend

@hitachivantara/uikit-react-core 5.19.3 → 5.20.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (212) hide show

package/dist/cjs/components/Focus/Focus.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Focus.cjs","sources":["../../../../src/components/Focus/Focus.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport React, { RefObject, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { keyboardCodes, isBrowser } from \"@core/utils\";\nimport ConditionalWrapper from \"@core/utils/ConditionalWrapper\";\nimport { css, Global } from \"@emotion/react\";\nimport { StyledFocusWrapper, StyledFalseFocus } from \"./Focus.styles\";\nimport { getFocusableChildren, isKey, isOneOfKeys, 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 {\n ArrowUp,\n ArrowDown,\n Home,\n End,\n ArrowLeft,\n ArrowRight,\n Enter,\n SpaceBar,\n } = keyboardCodes;\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 SpaceBar,\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, SpaceBar])) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n const blockedKeys = getEnabledKeys(\n currentFocusIndex,\n jump,\n focusesList.length\n );\n\n switch (evt.keyCode) {\n case SpaceBar:\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 { ArrowUp, ArrowDown, Home, End, Enter, SpaceBar } = keyboardCodes;\n const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n if (\n !isOneOfKeys(evt, [ArrowUp, ArrowDown, Home, End, SpaceBar, 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 switch (evt.keyCode) {\n case SpaceBar:\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 { Enter, SpaceBar } = keyboardCodes;\n const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n if (\n !isOneOfKeys(evt, [SpaceBar, 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","ArrowUp","ArrowDown","Home","End","ArrowLeft","ArrowRight","Enter","SpaceBar","keyboardCodes","childFocusIsInput","nodeName","isOneOfKeys","isKey","preventDefault","stopPropagation","blockedKeys","keyCode","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":";;;;;;;;;;;;;;;;;;;AAWA,MAAMA,cAAWC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA;AA+DV,MAAMC,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAAAA,EACAC,gBAAgB,CAAC;AAAA,EACjBC,gBAAgB;AAAA,EAChBC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,UAAUC;AAAAA,EACVC,eAAe;AAAA,EACfC,gBAAgB;AAAA,EAChBC,WAAW;AAAA,EACXC,gBAAgB;AAAA,EAChBC;AAAAA,EACAC,iBAAiB;AACL,MAAM;AAClB,QAAM,CAACC,WAAWC,YAAY,IAAIC,eAAkB,KAAK;AACzD,QAAM,CAACC,YAAYC,aAAa,IAAIF,MAAc,SAAA;AAClD,QAAM,CAACG,cAAcC,eAAe,IAAIJ,eAAS,KAAK;AAEtD,QAAMK,aAAaA,MAAM;AACvB,UAAMC,WAAUhB,mCAASiB,WACrBC,MAAMC,KACJnB,QAAQiB,QAAQG,uBACdd,eAAee,aAAAA,QAAaC,SAAQ5B,mCAAS4B,SAAQ,MACvD,CACF,IACA;AACGN,WAAAA;AAAAA,EAAAA;AAGT,QAAMO,cAAcA,CAACC,IAAIC,WAAW,MAAM;AACxC,UAAMC,eAAeC,MAAAA,qBAAqBH,EAAE,EAAE,CAAC;AAC/C,QAAIE,cAAc;AAChBF,SAAGC,WAAW;AACdC,mBAAaD,WAAWA;AAAAA,IAAAA,OACnB;AACLD,SAAGC,WAAWA;AAAAA,IAChB;AAAA,EAAA;AAGF,QAAMG,sBAAsBA,MAAM;AAChC,UAAMZ,UAAUD;AAChB,UAAMc,gBAAgBb,QAAQc,KAAMC,CAAAA,UAClCA,MAAMC,UAAUC,SACdZ,aAAAA,QAAavB,aAAYJ,mCAASI,aAAY,UAChD,CACF;AAEA,QAAI,CAAC+B;AAAe;AACpBb,YAAQkB,QAASH,CAAAA,UAAUR,YAAYQ,OAAO,EAAE,CAAC;AACjDR,gBAAYM,eAAe,CAAC;AAAA,EAAA;AAG9B,QAAMM,mBAAoBX,CAAO,OAAA;AAC/BT,iBAAamB,QAASH,CAAAA,UAAUR,YAAYQ,OAAO,EAAE,CAAC;AACtDR,gBAAYC,IAAI,CAAC;AAAA,EAAA;AAGnB,QAAMY,kBAAmBC,CAAQ,QAAA;AAC/B,QAAIjC,aAAa,WAAW;AAC1B+B,uBAAiBE,IAAIC,aAAa;AAAA,IACpC;AAAA,EAAA;AAGF,QAAMC,iBAAiBA,MAAM;AAEzBnC,QAAAA,aAAa,aACbJ,WACAA,QAAQiB,WACR,CAACjB,QAAQiB,QAAQgB,SAASO,SAASC,aAAa,GAChD;AACAC,iBAAW,MAAM;AACK;SACnB,EAAE;AAAA,IACP;AAAA,EAAA;AAGF,QAAMC,SAAUnB,CAAO,OAAA;AACf,UAAA;AAAA,MAAEC;AAAAA,IAAa7B,IAAAA;AACrB,QAAI,CAAC4B,MAAMX;AAAc;AACzB,QAAIT,aAAa,QAAQ;AACvBQ,oBAAcjB,QAAQ;AACtB;AAAA,IACF;AAEA,QAAIS,aAAa,QAAQ;AACvB;AAAA,IACF;AAEMwC,UAAAA,oBAAoBjB,2BAAqBH,EAAE;AACjD,QAAIoB,kBAAkBC,QAAQ;AAC5BD,wBAAkBV,QAASY,CAAAA,UAAUvB,YAAYuB,OAAO,EAAE,CAAC;AAC7CF,oBAAAA,kBAAkB,CAAC,CAAC;AAAA,IACpC;AAEI,QAAA,CAACG,uBAAMtB,QAAQ;AAAGF,kBAAYC,IAAIC,QAAQ;AAC9CX,oBAAgB,IAAI;AAAA,EAAA;AAGtB,QAAMkC,gBAAiBX,CAAQ,QAAA;;AAC7B,QAAI,CAAChC,eAAe;AAClBgC,UAAIC,cAAcN,UAAUiB,IAAI5B,aAAAA,QAAa6B,OAAO;AACpD,UAAIxD,mCAASwD,SAAS;AACpBb,YAAIC,cAAcN,UAAUiB,IAAIvD,QAAQwD,OAAO;AAAA,MACjD;AAGIZ,UAAAA,cAAcN,UAAUiB,IAAI,aAAa;AACpClB,+CAAAA,UAAAA,mBACLoB,MAAM,KACPjB,QAASkB,CAAMf,MAAAA,IAAIC,cAAcN,UAAUiB,IAAIG,CAAC;AAAA,IACrD;AAAA,EAAA;AAGF,QAAMC,mBAAmBA,MAAM;AAC7B,QAAI,CAAChD,eAAe;AACP,iBAAA,EAAE6B,QAASoB,CAAY,YAAA;;AAChC,YAAIjC,aAAAA,QAAa6B,SAAS;AAChBlB,kBAAAA,UAAUuB,OAAOlC,aAAAA,QAAa6B,OAAO;AAAA,QAC/C;AACA,YAAIxD,mCAASwD,SAAS;AACZlB,kBAAAA,UAAUuB,OAAO7D,QAAQwD,OAAO;AAAA,QAC1C;AAEQlB,gBAAAA,UAAUuB,OAAO,aAAa;AAC7BxB,iDAAAA,UAAAA,mBAAOoB,MAAM,KAAKjB,QAASkB,OAAME,QAAQtB,UAAUuB,OAAOH,CAAC;AAAA,MAAC,CACtE;AAAA,IACH;AAAA,EAAA;AAGF,QAAMI,UAAWnB,CAAQ,QAAA;AACvBW,kBAAcX,GAAG;AACjB5B,iBAAa,IAAI;AAGjB,QAAIE,cAAcA,WAAWoB;AAAOpB,iBAAWoB,MAAM;AACrDK,oBAAgBC,GAAG;AAAA,EAAA;AAGrB,QAAMoB,SAASA,MAAM;AACnBhD,iBAAa,KAAK;AACD;AACF;EAAA;AAGjB,QAAMiD,cAAerB,CAAQ,QAAA;;AAC3B,UAAMsB,UAAU,CAAC,GAACtB,SAAIC,kBAAJD,mBAAmBuB,cAAc;AACnD,QAAIxD,aAAa,UAAUuD;AAAS;AAEpCE,qBAAWxB,IAAIC,aAAa;AAChBD,gBAAAA,IAAIC,eAAe,CAAC;AAEhC,QAAI,CAACpC,cAAc;AAGA;AACjBO,mBAAa,KAAK;AAAA,IACpB;AAAA,EAAA;AAGF,QAAMqD,sBAAsBA,CAACC,WAAWC,eAAeC,gBAAgB;AACjEA,QAAAA,2CAAaC,SAASF,gBAAgB;AACxCzC,kBAAYyC,eAAe,EAAE;AAAA,IAC/B;AACAzC,gBAAYwC,WAAW,CAAC;AACxBF,UAAAA,WAAWE,SAAS;AAAA,EAAA;AAGtB,QAAMI,iBAAiBA,CAACC,mBAAmBC,MAAMC,cAAc;AAAA,IAC7DC,QACGH,oBAAoB,KAAKC,SAAS,KACnCD,oBAAoB,IAAIE,WAAW;AAAA,IACrCE,MAAMJ,oBAAoBC,SAAS;AAAA,IACnCI,IAAIL,oBAAoBC,OAAO;AAAA,IAC/BK,MACEN,oBAAoBC,OAAOC,YAC3BF,oBAAoBC,OAAOC,WAAW;AAAA,EAAA;AAG1C,QAAMK,uBAAuBA,CAC3BtC,KACArB,SACAiD,aACAG,mBACAC,SACG;AACG,UAAA;AAAA,MACJO;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAC;AAAAA,IACEC,IAAAA;AAEEC,UAAAA,oBAAoB1E,cAAcA,WAAW2E,aAAa;AAEhE,QACE,CAACC,MAAYlD,YAAAA,KAAK,CAChBuC,SACAC,WACAG,WACAC,YACAH,MACAC,KACAI,UACAD,KAAK,CACN,KACAG,qBAAqBG,YAAMnD,KAAK6C,KAAK,GACtC;AAEA;AAAA,IACF;AAIA,QAAI,CAACK,MAAYlD,YAAAA,KAAK,CAAC6C,OAAOC,QAAQ,CAAC,GAAG;AACxC9C,UAAIoD,eAAe;AACnBpD,UAAIqD,gBAAgB;AAAA,IACtB;AAEA,UAAMC,cAAcxB,eAClBC,mBACAC,MACAJ,YAAYpB,MACd;AAEA,YAAQR,IAAIuD,SAAO;AAAA,MACjB,KAAKT;AAAAA,MACL,KAAKD;AACCW,YAAAA,QAAAA,QAAU,SAAS,GAAG;AACxBxD,cAAIyD,OAAOC;QAAM,OACZ;AACL1D,cAAIC,cAAcyD;QACpB;AACA;AAAA,MACF,KAAKnB;AACC,YAAA,CAACe,YAAYlB,IAAI;AACnBX,8BACE9C,QAAQqD,QAAQrD,QAAQgF,MACxB3D,IAAIpB,SACJgD,WACF;AAAA,QACF;AACA;AAAA,MACF,KAAKY;AACC,YAAA,CAACc,YAAYjB,MAAM;AACrBZ,8BACE9C,QAAQiF,QAAQjF,QAAQkF,OACxB7D,IAAIpB,SACJgD,WACF;AAAA,QACF;AACA;AAAA,MACF,KAAKe;AACC,YAAA,CAACW,YAAYnB,MAAM;AACrBV,8BACE9C,QAAQmF,YAAYnF,QAAQgF,MAC5B3D,IAAIpB,SACJgD,WACF;AAAA,QACF;AACA;AAAA,MACF,KAAKgB;AACC,YAAA,CAACU,YAAYpB,OAAO;AACtBT,8BACE9C,QAAQoF,QAAQpF,QAAQkF,OACxB7D,IAAIpB,SACJgD,WACF;AAAA,QACF;AACA;AAAA,MACF,KAAKa;AACHhB,4BAAoB9C,QAAQkF,OAAO7D,IAAIpB,SAASgD,WAAW;AAC3D;AAAA,MACF,KAAKc;AACHjB,4BAAoB9C,QAAQgF,MAAM3D,IAAIpB,SAASgD,WAAW;AAC1D;AAAA,IAEJ;AAAA,EAAA;AAGF,QAAMoC,+BAA+BA,CAAChE,KAAKrB,SAASiD,gBAAgB;AAC5D,UAAA;AAAA,MAAEW;AAAAA,MAASC;AAAAA,MAAWC;AAAAA,MAAMC;AAAAA,MAAKG;AAAAA,MAAOC;AAAAA,IAAaC,IAAAA;AACrDC,UAAAA,oBAAoB1E,cAAcA,WAAW2E,aAAa;AAEhE,QACE,CAACC,MAAYlD,YAAAA,KAAK,CAACuC,SAASC,WAAWC,MAAMC,KAAKI,UAAUD,KAAK,CAAC,KACjEG,qBAAqBG,MAAAA,MAAMnD,KAAK6C,KAAK,GACtC;AAEA;AAAA,IACF;AAGA7C,QAAIoD,eAAe;AACnBpD,QAAIqD,gBAAgB;AAEpB,YAAQrD,IAAIuD,SAAO;AAAA,MACjB,KAAKT;AAAAA,MACL,KAAKD;AACH7C,YAAIyD,OAAOC;AACX;AAAA,MACF,KAAKnB;AACHd,4BACE9C,QAAQmF,YAAYnF,QAAQgF,MAC5B3D,IAAIpB,SACJgD,WACF;AACA;AAAA,MACF,KAAKY;AACHf,4BACE9C,QAAQoF,QAAQpF,QAAQkF,OACxB7D,IAAIpB,SACJgD,WACF;AACA;AAAA,MACF,KAAKa;AACHhB,4BAAoB9C,QAAQkF,OAAO7D,IAAIpB,SAASgD,WAAW;AAC3D;AAAA,MACF,KAAKc;AACHjB,4BAAoB9C,QAAQgF,MAAM3D,IAAIpB,SAASgD,WAAW;AAC1D;AAAA,IAEJ;AAAA,EAAA;AAGF,QAAMqC,kBAAmBjE,CAAQ,QAAA;AACzB,UAAA;AAAA,MAAE6C;AAAAA,MAAOC;AAAAA,IAAaC,IAAAA;AACtBC,UAAAA,oBAAoB1E,cAAcA,WAAW2E,aAAa;AAEhE,QACE,CAACC,MAAAA,YAAYlD,KAAK,CAAC8C,UAAUD,KAAK,CAAC,KAClCG,qBAAqBG,MAAAA,MAAMnD,KAAK6C,KAAK,GACtC;AAEA;AAAA,IACF;AAGA7C,QAAIoD,eAAe;AACnBpD,QAAIqD,gBAAgB;AAEpBrD,QAAIC,cAAcyD;EAAM;AAG1B,QAAMQ,YAAalE,CAAQ,QAAA;AACrBrC,SAAAA,mCAASiB,YAAW,MAAM;AAG5BqF,sBAAgBjE,GAAG;AACnB;AAAA,IACF;AAGA,UAAMmE,sBAAsBpG,aAAa;AACzC,UAAM6D,cAAclD,WAAAA,EAAa0F,OAC9BjF,CACCgF,OAAAA,uBACA,CAAChF,GAAGQ,UAAUC,SAASvC,mCAASK,QAAkB,CACtD;AAEA,UAAM2G,eAAezC,YAAY0C,QAAQtE,IAAIC,aAAa;AAE1D,UAAMtB,UAAU;AAAA,MACdkF,OAAOjC,YAAY,CAAC;AAAA,MACpB+B,MAAM/B,YAAYA,YAAYpB,SAAS,CAAC;AAAA,MACxCsD,UAAUlC,YAAYyC,eAAe,CAAC;AAAA,MACtCN,MAAMnC,YAAYyC,eAAe,CAAC;AAAA,MAClCT,MAAMhC,YAAYyC,eAAenG,cAAc;AAAA,MAC/C8D,MAAMJ,YAAYyC,eAAenG,cAAc;AAAA,IAAA;AAGjD,QAAIH,aAAa,QAAQ;AACvBuE,2BACEtC,KACArB,SACAiD,aACAyC,cACAnG,cACF;AACA;AAAA,IACF;AAI6B8B,iCAAAA,KAAKrB,SAASiD,WAAW;AAAA,EAAA;AAGxD,QAAM2C,UAAWvE,CAAQ,QAAA;AACvB,QAAIwD,QAAAA,QAAU,SAAS;AAAGxD,UAAIoD,eAAe;AAAA,EAAA;AAG3C1F,MAAAA;AAAiBJ,WAAAA;AAEfkH,QAAAA,eAAgBC,CACpBC,mBAAAA,2BAAAA,KAACC,aAAAA,oBAAkB;AAAA,IACjBC,WAAWC,KAAAA,KACTxH,mCAASyH,mBACT9F,aAAAA,QAAa8F,iBACf;AAAA,IAAExH,WAEDmH,gBACAtG,4CACE4G,aAAAA,kBAAgB;AAAA,MACfH,WAAWC,KAAAA,KAAKxH,mCAAS2H,YAAYhG,aAAAA,QAAagG,UAAU;AAAA,IAAA,CAC7D,CACF;AAAA,EAAA,CACiB;AAGtB,yCACGC,mBAAAA,SAAkB;AAAA,IAACC,WAAWlH;AAAAA,IAAemH,SAASX;AAAAA,IAAalH,UAAA,CAClE8H,2BAAAA,IAACC,cAAM;AAAA,MAACrI,QAAQL;AAAAA,IAAAA,CAAc,GAC7B2I,eAAAA,QAAMC,aAAajI,UAAU;AAAA,MAC5BsH,WAAWC,KAAAA,KACTvH,SAASkI,MAAMZ,WACf5F,aAAAA,QAAaC,MACb5B,mCAAS4B,MACThB,aACAR,YAAYoH,KAAAA,KAAK7F,aAAAA,QAAavB,UAAUJ,mCAASI,QAAQ,GACzDD,iBAAiBqH,KAAAA,KAAK7F,aAAAA,QAAatB,UAAUL,mCAASK,QAAQ,GAC9DI,iBACE+G,KAAK7F,KAAAA,aAAAA,QAAalB,eAAeT,mCAASS,aAAa,CAC3D;AAAA,MACA2H,KAAKnF;AAAAA,MACLa;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACA6C;AAAAA,MACAK;AAAAA,MACA9G;AAAAA,IAAAA,CACD,CAAC;AAAA,EAAA,CACgB;AAExB;;"}
1	+ {"version":3,"file":"Focus.cjs","sources":["../../../../src/components/Focus/Focus.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport React, { RefObject, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { isBrowser, isKey, isOneOfKeys } from \"@core/utils\";\nimport ConditionalWrapper from \"@core/utils/ConditionalWrapper\";\nimport { css, Global } from \"@emotion/react\";\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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"}

package/dist/cjs/components/Focus/utils.cjs CHANGED Viewed

@@ -1,14 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const keyCheck = require("../../utils/keyboardUtils/keyCheck.cjs");
-const isKey = (evt, key) => keyCheck.isKeypress(evt, key);
-const isOneOfKeys = (evt, keys) => keys.some((key) => isKey(evt, key));
 const getFocusableChildren = (el) => (el == null ? void 0 : el.querySelectorAll("input, button, select, textarea, a[href]")) || [];
 const setFocusTo = (el) => {
   el.focus();
 };
 exports.getFocusableChildren = getFocusableChildren;
-exports.isKey = isKey;
-exports.isOneOfKeys = isOneOfKeys;
 exports.setFocusTo = setFocusTo;
 //# sourceMappingURL=utils.cjs.map

package/dist/cjs/components/Focus/utils.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.cjs","sources":["../../../../src/components/Focus/utils.ts"],"sourcesContent":["~~import~~ ~~{ isKeypress } from \"@core/utils\";\n\nexport~~ const ~~isKey = (evt, key) => isKeypress(evt, key);\n\nexport const isOneOfKeys = (evt, keys) => keys.some((key) => isKey(evt, key));\n\nexport const~~ getFocusableChildren = (el) =>\n el?.querySelectorAll(\"input, button, select, textarea, a[href]\") \|\| [];\n\nexport const setFocusTo = (el) => {\n el.focus();\n};\n"],"names":["~~isKey","evt","key","isKeypress","isOneOfKeys","keys","some","~~getFocusableChildren","el","querySelectorAll","setFocusTo","focus"],"mappings":"~~;;;AAEO~~,MAAMA,~~QAAQA,CAACC,KAAKC,QAAQC,SAAAA,WAAWF,KAAKC,GAAG;AAEzCE,MAAAA,cAAcA,CAACH,KAAKI,SAASA,KAAKC,KAAMJ,CAAQF,QAAAA,MAAMC,KAAKC,GAAG,CAAC;AAErE,MAAMK,~~uBAAwBC,CACnCA,QAAAA,yBAAIC,iBAAiB,gDAA+C,CAAE;AAEjE,MAAMC,aAAcF,CAAO,OAAA;AAChCA,KAAGG,MAAM;AACX~~;;;;;~~"}
1	+ {"version":3,"file":"utils.cjs","sources":["../../../../src/components/Focus/utils.ts"],"sourcesContent":["export const getFocusableChildren = (el) =>\n el?.querySelectorAll(\"input, button, select, textarea, a[href]\") \|\| [];\n\nexport const setFocusTo = (el) => {\n el.focus();\n};\n"],"names":["getFocusableChildren","el","querySelectorAll","setFocusTo","focus"],"mappings":";;AAAO,MAAMA,uBAAwBC,CACnCA,QAAAA,yBAAIC,iBAAiB,gDAA+C,CAAE;AAEjE,MAAMC,aAAcF,CAAO,OAAA;AAChCA,KAAGG,MAAM;AACX;;;"}

package/dist/cjs/components/Header/Navigation/MenuBar/MenuBar.cjs CHANGED Viewed

@@ -12,6 +12,8 @@ const HvMenuBar = ({
   data = [],
   onClick,
   type = "menubar",
+  levels,
+  currentLevel,
   className
 }) => {
   const selectionPath = React.useContext(SelectionContext.SelectionContext);
@@ -29,7 +31,9 @@ const HvMenuBar = ({
       children: data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem.HvMenuItem, {
         item,
         type,
-        onClick
+        onClick,
+        levels,
+        currentLevel
       }, item.id))
     })
   });

package/dist/cjs/components/Header/Navigation/MenuBar/MenuBar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuBar.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuBar/MenuBar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { MouseEvent, useContext } from \"react\";\nimport { HvHeaderNavigationItemProp } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { HvMenuItem } from \"../MenuItem\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { MenuBarRoot, MenuBarUl } from \"./MenuBar.styles\";\nimport headerMenuBarClasses from \"./menuBarClasses\";\n\nexport interface HvMenuBarProps extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n data: HvHeaderNavigationItemProp[];\n type: string;\n onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n}\n\nexport const HvMenuBar = ({\n id,\n data = [],\n onClick,\n type = \"menubar\",\n className,\n}: HvMenuBarProps) => {\n const selectionPath = useContext(SelectionContext);\n\n const isMenu = type === \"menu\";\n\n const isActive =\n isMenu && data.filter((item) => item.id === selectionPath?.[1]).length > 0;\n\n return (\n <MenuBarRoot\n className={clsx(\n className,\n isMenu && headerMenuBarClasses.hidden,\n isActive && headerMenuBarClasses.active\n )}\n $type={type}\n $hidden={isMenu}\n $active={isActive}\n >\n <MenuBarUl id={id} onFocus={() => {}}>\n {data.map((item: HvHeaderNavigationItemProp) => (\n <HvMenuItem key={item.id} item={item} type={type} onClick={onClick} />\n ))}\n </MenuBarUl>\n </MenuBarRoot>\n );\n};\n"],"names":["HvMenuBar","id","data","onClick","type","className","selectionPath","useContext","SelectionContext","isMenu","isActive","filter","item","length","MenuBarRoot","clsx","headerMenuBarClasses","hidden","active","$type","$hidden","$active","children","MenuBarUl","onFocus","map","HvMenuItem"],"mappings":";;;;;;;;;~~AAeO~~,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC,OAAO,CAAE;AAAA,EACTC;AAAAA,EACAC,OAAO;AAAA,EACPC;AACc,MAAM;AACdC,QAAAA,gBAAgBC,iBAAWC,iBAAAA,gBAAgB;AAEjD,QAAMC,~~SAASL~~,SAAS;~~AAElBM~~,QAAAA,WACJD,~~UAAUP~~,~~KAAKS~~,OAAQC,CAAAA,SAASA,~~KAAKX~~,~~QAAOK~~,+CAAgB,GAAE,EAAEO,SAAS;AAE3E,wCACGC,eAAAA,aAAW;AAAA,IACVT,WAAWU,KAAAA,KACTV,WACAI,UAAUO,uBAAqBC,QAC/BP,YAAYM,uBAAqBE,MACnC;AAAA,IACAC,~~OAAOf~~;AAAAA,~~IACPgB~~,SAASX;AAAAA,IACTY,SAASX;AAAAA,IAASY,yCAEjBC,0BAAS;AAAA,~~MAACtB~~;AAAAA,~~MAAQuB~~,SAASA,MAAM;AAAA,MAAC;AAAA,MAAEF,~~UAClCpB~~,~~KAAKuB~~,IAAI,CAACb,wCACRc,SAAAA,YAAU;AAAA,~~QAAed~~;AAAAA,~~QAAYR~~;AAAAA,~~QAAYD~~;AAAAA,MAAAA,~~GAAjCS~~,~~KAAKX~~,~~EAA+C~~,~~CACtE~~;AAAA,IAAA,CACQ;AAAA,EAAA,CACA;AAEjB;;"}
1	+ {"version":3,"file":"MenuBar.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuBar/MenuBar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { MouseEvent, useContext } from \"react\";\nimport { HvHeaderNavigationItemProp } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { HvMenuItem } from \"../MenuItem\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { MenuBarRoot, MenuBarUl } from \"./MenuBar.styles\";\nimport headerMenuBarClasses from \"./menuBarClasses\";\n\nexport interface HvMenuBarProps extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n data: HvHeaderNavigationItemProp[];\n type: string;\n onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n levels: number;\n currentLevel: number;\n}\n\nexport const HvMenuBar = ({\n id,\n data = [],\n onClick,\n type = \"menubar\",\n levels,\n currentLevel,\n className,\n}: HvMenuBarProps) => {\n const selectionPath = useContext(SelectionContext);\n\n const isMenu = type === \"menu\";\n\n const isActive =\n isMenu && data.filter((item) => item.id === selectionPath?.[1]).length > 0;\n\n return (\n <MenuBarRoot\n className={clsx(\n className,\n isMenu && headerMenuBarClasses.hidden,\n isActive && headerMenuBarClasses.active\n )}\n $type={type}\n $hidden={isMenu}\n $active={isActive}\n >\n <MenuBarUl id={id} onFocus={() => {}}>\n {data.map((item: HvHeaderNavigationItemProp) => (\n <HvMenuItem\n key={item.id}\n item={item}\n type={type}\n onClick={onClick}\n levels={levels}\n currentLevel={currentLevel}\n />\n ))}\n </MenuBarUl>\n </MenuBarRoot>\n );\n};\n"],"names":["HvMenuBar","id","data","onClick","type","levels","currentLevel","className","selectionPath","useContext","SelectionContext","isMenu","isActive","filter","item","length","MenuBarRoot","clsx","headerMenuBarClasses","hidden","active","$type","$hidden","$active","children","MenuBarUl","onFocus","map","HvMenuItem"],"mappings":";;;;;;;;;AAiBO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC,OAAO,CAAE;AAAA,EACTC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AACc,MAAM;AACdC,QAAAA,gBAAgBC,iBAAWC,iBAAAA,gBAAgB;AAEjD,QAAMC,SAASP,SAAS;AAElBQ,QAAAA,WACJD,UAAUT,KAAKW,OAAQC,CAAAA,SAASA,KAAKb,QAAOO,+CAAgB,GAAE,EAAEO,SAAS;AAE3E,wCACGC,eAAAA,aAAW;AAAA,IACVT,WAAWU,KAAAA,KACTV,WACAI,UAAUO,uBAAqBC,QAC/BP,YAAYM,uBAAqBE,MACnC;AAAA,IACAC,OAAOjB;AAAAA,IACPkB,SAASX;AAAAA,IACTY,SAASX;AAAAA,IAASY,yCAEjBC,0BAAS;AAAA,MAACxB;AAAAA,MAAQyB,SAASA,MAAM;AAAA,MAAC;AAAA,MAAEF,UAClCtB,KAAKyB,IAAI,CAACb,wCACRc,SAAAA,YAAU;AAAA,QAETd;AAAAA,QACAV;AAAAA,QACAD;AAAAA,QACAE;AAAAA,QACAC;AAAAA,MAAAA,GALKQ,KAAKb,EAMX,CACF;AAAA,IAAA,CACQ;AAAA,EAAA,CACA;AAEjB;;"}

package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs CHANGED Viewed

@@ -7,8 +7,7 @@ const MenuItem_styles = require("./MenuItem.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const MenuBar = require("../MenuBar/MenuBar.cjs");
 const Typography = require("../../../Typography/Typography.cjs");
-const keyCheck = require("../../../../utils/keyboardUtils/keyCheck.cjs");
-const keyboardCodes = require("../../../../utils/keyboardUtils/keyboardCodes.cjs");
+const keyboardUtils = require("../../../../utils/keyboardUtils.cjs");
 const traverseItem = (node) => {
   var _a;
   let href;
@@ -37,7 +36,9 @@ const HvMenuItem = ({
   id,
   item,
   type,
-  onClick
+  onClick,
+  levels,
+  currentLevel
 }) => {
   const selectionPath = React.useContext(SelectionContext.SelectionContext);
   const {
@@ -51,7 +52,7 @@ const HvMenuItem = ({
   const isSelected = (selectionPath == null ? void 0 : selectionPath[isMenu ? 1 : 0]) === item.id;
   const isCurrent = isSelected ? (selectionPath == null ? void 0 : selectionPath.length) > (isMenu ? 2 : 1) ? true : "page" : void 0;
   const actionHandler = (event) => {
-    if (event.type === "click" || keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.Enter) || keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.SpaceBar)) {
+    if (event.type === "click" || keyboardUtils.isKey(event, "Enter") || keyboardUtils.isKey(event, "Space")) {
       if (event.type === "click") {
         event.currentTarget.blur();
       }
@@ -109,10 +110,12 @@ const HvMenuItem = ({
         "aria-current": isCurrent,
         children: label
       })
-    ), hasSubLevel && /* @__PURE__ */ jsxRuntime.jsx(MenuBar.HvMenuBar, {
+    ), hasSubLevel && currentLevel < levels && /* @__PURE__ */ jsxRuntime.jsx(MenuBar.HvMenuBar, {
       data,
       onClick,
-      type: "menu"
+      type: "menu",
+      levels,
+      currentLevel: currentLevel + 1
     })]
   }, item.label);
 };

package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\nimport { HvHeaderNavigationItemProp, HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ~~isKeypress,~~ ~~keyboardCodes~~ } from \"@core/utils\";\nimport { HvMenuBar } from \"../MenuBar\";\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { MenuItemLabel, MenuItemLi, MenuItemLink } from \"./MenuItem.styles\";\n\nexport interface MenuItemProps extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n item: HvHeaderNavigationItemProp;\n type?: string;\n onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (node: HvHeaderNavigationItemProp) => {\n let href;\n let target;\n\n if (node?.href) {\n href = node?.href;\n target = node?.target;\n } else if (node?.data != null && node?.data?.length > 0) {\n let i = 0;\n while (href == null && i < node.data.length) {\n const childNavItem = traverseItem(node?.data[i]);\n if (childNavItem?.href != null) {\n href = childNavItem?.href;\n target = childNavItem?.target;\n break;\n }\n\n i += 1;\n }\n }\n\n return { href, target };\n};\n\nexport const HvMenuItem = ({ id, item, type, onClick }: MenuItemProps) => {\n const selectionPath = useContext(SelectionContext);\n const { dispatch } = useContext(FocusContext);\n\n const { data } = item;\n const hasSubLevel = data && data.length;\n const isMenu = type === \"menu\";\n const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n const isCurrent = isSelected\n ? selectionPath?.length > (isMenu ? 2 : 1)\n ? true\n : \"page\"\n : undefined;\n\n const actionHandler = (event: any) => {\n if (\n event.type === \"click\" \|\|\n ~~isKeypress~~(event, ~~keyboardCodes.~~Enter) \|\|\n ~~isKeypress~~(event, ~~keyboardCodes.SpaceBar~~)\n ) {\n if (event.type === \"click\") {\n event.currentTarget.blur();\n }\n onClick?.(event, item);\n }\n };\n\n const handleFocus = (event: React.FocusEvent) => {\n dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n };\n\n const itemProps = {\n onClick: actionHandler,\n onKeyDown: actionHandler,\n onFocus: handleFocus,\n };\n\n const label = (\n <HvTypography\n component=\"span\"\n variant={isSelected ? \"label\" : \"body\"}\n data-text={item.label}\n >\n {item.label}\n </HvTypography>\n );\n\n let itemHref = item?.href;\n let itemTarget = item?.target;\n\n // apps should configure the href even on parent items without content\n // so the fallback logic is theirs, but if not we'll do our best to find a link\n if (item?.href == null) {\n const { href, target } = traverseItem(item);\n itemHref = href;\n itemTarget = target;\n }\n\n return (\n <MenuItemLi\n id={id}\n key={item.label}\n $selected={!!isSelected}\n $isMenu={isMenu}\n >\n {itemHref ? (\n <MenuItemLink\n href={itemHref}\n target={itemTarget}\n {...itemProps}\n $isSelected={isSelected}\n $isMenu={isMenu}\n aria-current={isCurrent}\n >\n {label}\n </MenuItemLink>\n ) : (\n // keeping this code path for backwards compatibility, but\n // shouldn't really be used as it's not accessible\n <MenuItemLabel\n role=\"button\"\n {...itemProps}\n tabIndex={0}\n $isSelected={isSelected}\n $isMenu={isMenu}\n aria-current={isCurrent}\n >\n {label}\n </MenuItemLabel>\n )}\n {hasSubLevel && <HvMenuBar data={data} onClick={onClick} type=\"menu\" />}\n </MenuItemLi>\n );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","childNavItem","HvMenuItem","id","item","type","onClick","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","~~isKeypress~~","~~keyboardCodes","Enter","SpaceBar","~~currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","HvTypography","component","variant","children","itemHref","itemTarget","MenuItemLi","$selected","$isMenu","_jsx","MenuItemLink","$isSelected","MenuItemLabel","role","tabIndex","HvMenuBar"],"mappings":"~~;;;;;;;;;;;AAgBA~~,MAAMA,eAAeA,CAACC,SAAqC;;AACrDC,MAAAA;AACAC,MAAAA;AAEJ,MAAIF,6BAAMC,MAAM;AACdA,WAAOD,6BAAMC;AACbC,aAASF,6BAAME;AAAAA,EAAAA,YACNF,6BAAMG,SAAQ,UAAQH,kCAAMG,SAANH,mBAAYI,UAAS,GAAG;AACvD,QAAIC,IAAI;AACR,WAAOJ,QAAQ,QAAQI,IAAIL,KAAKG,KAAKC,QAAQ;AAC3C,YAAME,eAAeP,aAAaC,6BAAMG,KAAKE,EAAE;AAC3CC,WAAAA,6CAAcL,SAAQ,MAAM;AAC9BA,eAAOK,6CAAcL;AACrBC,iBAASI,6CAAcJ;AACvB;AAAA,MACF;AAEK,WAAA;AAAA,IACP;AAAA,EACF;AAEO,SAAA;AAAA,IAAED;AAAAA,IAAMC;AAAAA,EAAAA;AACjB;AAEO,MAAMK,aAAaA,CAAC;AAAA,~~EAAEC~~;AAAAA,~~EAAIC~~;AAAAA,~~EAAMC~~;AAAAA,~~EAAMC~~;~~AAAuB~~,MAAM;~~AAClEC~~,QAAAA,gBAAgBC,iBAAWC,iBAAAA,gBAAgB;AAC3C,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAaF,MAAAA,WAAWG,aAAAA,YAAY;AAEtC,QAAA;AAAA,~~IAAEb~~;AAAAA,EAASM,IAAAA;~~AACXQ~~,QAAAA,~~cAAcd~~,QAAQA,KAAKC;AACjC,~~QAAMc~~,~~SAASR~~,SAAS;AACxB,~~QAAMS~~,cAAaP,+CAAgBM,SAAS,IAAI,~~QAAOT~~,KAAKD;~~AACtDY~~,QAAAA,YAAYD,cACdP,+~~CAAeR~~,~~WAAUc~~,SAAS,IAAI,KACpC,OACA,SACFG;AAEEC,QAAAA,gBAAgBA,CAACC,UAAe;~~AACpC~~,~~QACEA~~,~~MAAMb~~,SAAS,~~WACfc~~,~~SAAAA~~,~~WAAWD~~,~~OAAOE~~,cAAAA,~~cAAcC~~,~~KAAK~~,~~KACrCF~~,~~SAAAA,WAAWD,OAAOE,cAAcE,cAAAA,QAAQ,GACxC~~;~~AACIJ~~,UAAAA,~~MAAMb~~,SAAS,SAAS;~~AAC1Ba~~,~~cAAMK~~,cAAcC;MACtB;~~AACAlB~~,~~yCAAUY~~,~~OAAOd~~;AAAAA,IACnB;AAAA,EAAA;~~AAGIqB~~,QAAAA,cAAcA,~~CAACP~~,UAA4B;AACpC,yCAAA;AAAA,~~MAAEb~~,MAAM;AAAA,~~MAAkBqB~~,~~aAAaR~~,~~MAAMK~~;AAAAA,IAAAA;AAAAA,EAAe;AAGzE,QAAMI,YAAY;AAAA,~~IAChBrB~~,~~SAASW~~;AAAAA,~~IACTW~~,~~WAAWX~~;AAAAA,~~IACXY~~,SAASJ;AAAAA,EAAAA;AAGLK,QAAAA,uCACHC,yBAAY;AAAA,IACXC,WAAU;AAAA,IACVC,~~SAASnB~~,aAAa,UAAU;AAAA,IAChC,~~aAAWV~~,~~KAAK0B~~;AAAAA,IAAMI,~~UAErB9B~~,~~KAAK0B~~;AAAAA,EAAAA,CACM;AAGhB,MAAIK,~~WAAW/B~~,6BAAMR;AACrB,~~MAAIwC~~,~~aAAahC~~,6BAAMP;AAInBO,OAAAA,6BAAMR,SAAQ,MAAM;AAChB,UAAA;AAAA,MAAEA;AAAAA,MAAMC;AAAAA,IAAAA,IAAWH,aAAaU,IAAI;AAC/BR,eAAAA;AACEC,iBAAAA;AAAAA,EACf;AAEA,~~yCACGwC~~,gBAAAA,YAAU;AAAA,~~IACTlC~~;AAAAA,~~IAEAmC~~,WAAW,CAAC,~~CAACxB~~;AAAAA,~~IACbyB~~,~~SAAS1B~~;AAAAA,~~IAAOqB~~,UAEfC,CAAAA,WACCK,2BAAAA,IAACC,8BAAY;AAAA,~~MACX7C~~,~~MAAMuC~~;AAAAA,~~MACNtC~~,~~QAAQuC~~;AAAAA,MAAW,GACfT;AAAAA,MACJe,~~aAAa5B~~;AAAAA,~~MACbyB~~,~~SAAS1B~~;AAAAA,MACT,gBAAcE;AAAAA,~~MAAUmB~~,UAEvBJ;AAAAA,IAAAA,CACW;AAAA;AAAA;AAAA,qCAIba,gBAAAA,eAAa;AAAA,QACZC,MAAK;AAAA,QAAQ,GACTjB;AAAAA,QACJkB,UAAU;AAAA,QACVH,~~aAAa5B~~;AAAAA,~~QACbyB~~,~~SAAS1B~~;AAAAA,QACT,gBAAcE;AAAAA,~~QAAUmB~~,UAEvBJ;AAAAA,MAAAA,CACY;AAAA,~~OAEhBlB~~,~~8CAAgBkC~~,~~mBAAS~~;AAAA,~~MAAChD~~;AAAAA,~~MAAYQ~~;AAAAA,~~MAAkBD~~,MAAK;AAAA,IAAA,~~CAAQ~~,~~CAAC~~;AAAA,EAAA,~~GA7BlED~~,~~KAAK0B~~,~~KA8BA~~;AAEhB;;"}
1	+ {"version":3,"file":"MenuItem.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\nimport { HvHeaderNavigationItemProp, HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { isKey } from \"@core/utils\";\nimport { HvMenuBar } from \"../MenuBar\";\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { MenuItemLabel, MenuItemLi, MenuItemLink } from \"./MenuItem.styles\";\n\nexport interface MenuItemProps extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n item: HvHeaderNavigationItemProp;\n type?: string;\n onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n levels: number;\n currentLevel: number;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (node: HvHeaderNavigationItemProp) => {\n let href;\n let target;\n\n if (node?.href) {\n href = node?.href;\n target = node?.target;\n } else if (node?.data != null && node?.data?.length > 0) {\n let i = 0;\n while (href == null && i < node.data.length) {\n const childNavItem = traverseItem(node?.data[i]);\n if (childNavItem?.href != null) {\n href = childNavItem?.href;\n target = childNavItem?.target;\n break;\n }\n\n i += 1;\n }\n }\n\n return { href, target };\n};\n\nexport const HvMenuItem = ({\n id,\n item,\n type,\n onClick,\n levels,\n currentLevel,\n}: MenuItemProps) => {\n const selectionPath = useContext(SelectionContext);\n const { dispatch } = useContext(FocusContext);\n\n const { data } = item;\n const hasSubLevel = data && data.length;\n const isMenu = type === \"menu\";\n const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n const isCurrent = isSelected\n ? selectionPath?.length > (isMenu ? 2 : 1)\n ? true\n : \"page\"\n : undefined;\n\n const actionHandler = (event: any) => {\n if (\n event.type === \"click\" \|\|\n isKey(event, \"Enter\") \|\|\n isKey(event, \"Space\")\n ) {\n if (event.type === \"click\") {\n event.currentTarget.blur();\n }\n onClick?.(event, item);\n }\n };\n\n const handleFocus = (event: React.FocusEvent) => {\n dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n };\n\n const itemProps = {\n onClick: actionHandler,\n onKeyDown: actionHandler,\n onFocus: handleFocus,\n };\n\n const label = (\n <HvTypography\n component=\"span\"\n variant={isSelected ? \"label\" : \"body\"}\n data-text={item.label}\n >\n {item.label}\n </HvTypography>\n );\n\n let itemHref = item?.href;\n let itemTarget = item?.target;\n\n // apps should configure the href even on parent items without content\n // so the fallback logic is theirs, but if not we'll do our best to find a link\n if (item?.href == null) {\n const { href, target } = traverseItem(item);\n itemHref = href;\n itemTarget = target;\n }\n\n return (\n <MenuItemLi\n id={id}\n key={item.label}\n $selected={!!isSelected}\n $isMenu={isMenu}\n >\n {itemHref ? (\n <MenuItemLink\n href={itemHref}\n target={itemTarget}\n {...itemProps}\n $isSelected={isSelected}\n $isMenu={isMenu}\n aria-current={isCurrent}\n >\n {label}\n </MenuItemLink>\n ) : (\n // keeping this code path for backwards compatibility, but\n // shouldn't really be used as it's not accessible\n <MenuItemLabel\n role=\"button\"\n {...itemProps}\n tabIndex={0}\n $isSelected={isSelected}\n $isMenu={isMenu}\n aria-current={isCurrent}\n >\n {label}\n </MenuItemLabel>\n )}\n {hasSubLevel && currentLevel < levels && (\n <HvMenuBar\n data={data}\n onClick={onClick}\n type=\"menu\"\n levels={levels}\n currentLevel={currentLevel + 1}\n />\n )}\n </MenuItemLi>\n );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","childNavItem","HvMenuItem","id","item","type","onClick","levels","currentLevel","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKey","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","HvTypography","component","variant","children","itemHref","itemTarget","MenuItemLi","$selected","$isMenu","_jsx","MenuItemLink","$isSelected","MenuItemLabel","role","tabIndex","HvMenuBar"],"mappings":"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"}

package/dist/cjs/components/Header/Navigation/Navigation.cjs CHANGED Viewed

@@ -14,6 +14,7 @@ const HvHeaderNavigation = ({
   onClick,
   className,
   classes,
+  levels = 2,
   ...others
 }) => {
   const selectionPath = useSelectionPath.useSelectionPath(data, selected);
@@ -30,7 +31,9 @@ const HvHeaderNavigation = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(MenuBar.HvMenuBar, {
           data,
           type: "menubar",
-          onClick: handleClick
+          onClick: handleClick,
+          levels,
+          currentLevel: 1
         })
       })
     })

package/dist/cjs/components/Header/Navigation/Navigation.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Navigation.cjs","sources":["../../../../../src/components/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { MouseEvent } from \"react\";\nimport { useSelectionPath } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport { HvMenuBar, HvMenuBarProps } from \"./MenuBar\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport headerNavigationClasses, {\n HvHeaderNavigationClasses,\n} from \"./navigationClasses\";\n\nexport interface HvHeaderNavigationItemProp {\n id: string;\n label: string;\n path?: string;\n href?: string;\n target?: string;\n data?: HvHeaderNavigationItemProp[];\n}\n\nexport interface HvHeaderNavigationProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n data: HvHeaderNavigationItemProp[];\n selected?: string;\n onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n classes?: HvHeaderNavigationClasses;\n}\n\nexport const HvHeaderNavigation = ({\n data,\n selected,\n onClick,\n className,\n classes,\n ...others\n}: HvHeaderNavigationProps) => {\n const selectionPath = useSelectionPath(data, selected);\n\n const handleClick: HvMenuBarProps[\"onClick\"] = (event, selection) => {\n event.preventDefault();\n\n onClick?.(event, selection);\n };\n\n return (\n <SelectionContext.Provider value={selectionPath}>\n <FocusProvider>\n <StyledNav\n className={clsx(\n className,\n headerNavigationClasses.root,\n classes?.root\n )}\n {...others}\n >\n <HvMenuBar data={data} type=\"menubar\" onClick={handleClick} />\n </StyledNav>\n </FocusProvider>\n </SelectionContext.Provider>\n );\n};\n"],"names":["HvHeaderNavigation","data","selected","onClick","className","classes","others","selectionPath","useSelectionPath","handleClick","event","selection","preventDefault","_jsx","SelectionContext","Provider","value","children","FocusProvider","StyledNav","clsx","headerNavigationClasses","root","HvMenuBar","type"],"mappings":";;;;;;;;;;~~AA6BO~~,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,~~EACA~~,GAAGC;AACoB,MAAM;AACvBC,QAAAA,gBAAgBC,iBAAAA,~~iBAAiBP~~,MAAMC,QAAQ;AAE/CO,QAAAA,cAAyCA,CAACC,OAAOC,cAAc;AACnED,UAAME,eAAe;~~AAErBT~~,~~uCAAUO~~,OAAOC;AAAAA,EAAS;AAI1BE,SAAAA,2BAAAA,IAACC,kCAAiBC,UAAQ;AAAA,IAACC,OAAOT;AAAAA,IAAcU,yCAC7CC,4BAAa;AAAA,MAAAD,yCACXE,6BAAS;AAAA,~~QACRf~~,~~WAAWgB~~,~~KACThB~~,KAAAA,~~WACAiB~~,kBAAwBC,QAAAA,~~MACxBjB~~,~~mCAASiB~~,IACX;AAAA,QAAE,GACEhB;AAAAA,QAAMW,yCAETM,mBAAS;AAAA,~~UAACtB~~;AAAAA,~~UAAYuB~~,MAAK;AAAA,~~UAAUrB~~,~~SAASM~~;AAAAA,~~QAAAA~~,~~CAAc~~;AAAA,MAAA,~~CACpD~~;AAAA,IAAA,CACE;AAAA,EAAA,CACU;AAE/B;;"}
1	+ {"version":3,"file":"Navigation.cjs","sources":["../../../../../src/components/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { MouseEvent } from \"react\";\nimport { useSelectionPath } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport { HvMenuBar, HvMenuBarProps } from \"./MenuBar\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport headerNavigationClasses, {\n HvHeaderNavigationClasses,\n} from \"./navigationClasses\";\n\nexport interface HvHeaderNavigationItemProp {\n id: string;\n label: string;\n path?: string;\n href?: string;\n target?: string;\n data?: HvHeaderNavigationItemProp[];\n}\n\nexport interface HvHeaderNavigationProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n data: HvHeaderNavigationItemProp[];\n selected?: string;\n onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n classes?: HvHeaderNavigationClasses;\n levels?: 1 \| 2;\n}\n\nexport const HvHeaderNavigation = ({\n data,\n selected,\n onClick,\n className,\n classes,\n levels = 2,\n ...others\n}: HvHeaderNavigationProps) => {\n const selectionPath = useSelectionPath(data, selected);\n\n const handleClick: HvMenuBarProps[\"onClick\"] = (event, selection) => {\n event.preventDefault();\n\n onClick?.(event, selection);\n };\n\n return (\n <SelectionContext.Provider value={selectionPath}>\n <FocusProvider>\n <StyledNav\n className={clsx(\n className,\n headerNavigationClasses.root,\n classes?.root\n )}\n {...others}\n >\n <HvMenuBar\n data={data}\n type=\"menubar\"\n onClick={handleClick}\n levels={levels}\n currentLevel={1}\n />\n </StyledNav>\n </FocusProvider>\n </SelectionContext.Provider>\n );\n};\n"],"names":["HvHeaderNavigation","data","selected","onClick","className","classes","levels","others","selectionPath","useSelectionPath","handleClick","event","selection","preventDefault","_jsx","SelectionContext","Provider","value","children","FocusProvider","StyledNav","clsx","headerNavigationClasses","root","HvMenuBar","type","currentLevel"],"mappings":";;;;;;;;;;AA8BO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACT,GAAGC;AACoB,MAAM;AACvBC,QAAAA,gBAAgBC,iBAAAA,iBAAiBR,MAAMC,QAAQ;AAE/CQ,QAAAA,cAAyCA,CAACC,OAAOC,cAAc;AACnED,UAAME,eAAe;AAErBV,uCAAUQ,OAAOC;AAAAA,EAAS;AAI1BE,SAAAA,2BAAAA,IAACC,kCAAiBC,UAAQ;AAAA,IAACC,OAAOT;AAAAA,IAAcU,yCAC7CC,4BAAa;AAAA,MAAAD,yCACXE,6BAAS;AAAA,QACRhB,WAAWiB,KACTjB,KAAAA,WACAkB,kBAAwBC,QAAAA,MACxBlB,mCAASkB,IACX;AAAA,QAAE,GACEhB;AAAAA,QAAMW,yCAETM,mBAAS;AAAA,UACRvB;AAAAA,UACAwB,MAAK;AAAA,UACLtB,SAASO;AAAAA,UACTJ;AAAAA,UACAoB,cAAc;AAAA,QAAA,CACf;AAAA,MAAA,CACQ;AAAA,IAAA,CACE;AAAA,EAAA,CACU;AAE/B;;"}

package/dist/cjs/components/InlineEditor/InlineEditor.cjs CHANGED Viewed

@@ -2,15 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const InlineEditor_styles = require("./InlineEditor.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useControlled = require("../../hooks/useControlled.cjs");
+const useTheme = require("../../hooks/useTheme.cjs");
 const Input = require("../Input/Input.cjs");
 const Button = require("../Button/Button.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const keyCheck = require("../../utils/keyboardUtils/keyCheck.cjs");
-const keyboardCodes = require("../../utils/keyboardUtils/keyboardCodes.cjs");
+const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const HvInlineEditor = ({
   className,
   classes: classesProp,
@@ -37,7 +36,7 @@ const HvInlineEditor = ({
   const inputRef = React.useRef();
   const {
     activeTheme
-  } = uikitReactCore.useTheme();
+  } = useTheme.useTheme();
   const typographyStyles = (activeTheme == null ? void 0 : activeTheme.typography[variant]) || {};
   const {
     lineHeight
@@ -60,7 +59,7 @@ const HvInlineEditor = ({
     onBlur == null ? void 0 : onBlur(event, newValue);
   };
   const handleKeyDown = (event) => {
-    if (keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.Esc)) {
+    if (keyboardUtils.isKey(event, "Esc")) {
       setEditMode(false);
       setValue(cachedValue);
     }

package/dist/cjs/components/InlineEditor/InlineEditor.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineEditor.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useControlled } from \"@core/hooks\";\nimport { ExtractNames, ~~isKeypress,~~ ~~keyboardCodes~~ } from \"@core/utils\";\nimport {\n HvButtonProps,\n HvTypographyVariants,\n HvTypographyProps,\n HvInput,\n HvButton,\n HvTypography,\n HvInputProps,\n} from \"@core/components\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport { ~~useTheme } from \"@hitachivantara/uikit-react-core\";\nimport {~~ staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n extends HvBaseProps<HTMLDivElement, \"onBlur\" \| \"onChange\"> {\n /** The value of the form element. /\n value?: string;\n /* Whether the Edit icon should always be visible /\n showIcon?: boolean;\n /* Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) /\n component?: React.ElementType;\n /* Variant of the HvTypography to display /\n variant?: HvTypographyVariants;\n /* Called when the input is blurred. /\n onBlur?: (\n event: React.FocusEvent<HTMLTextAreaElement \| HTMLInputElement>,\n value: string\n ) => void;\n /* Called when the input value changes. /\n onChange?: (event: React.SyntheticEvent, value: string) => void;\n /* Props passed to the HvButton component /\n buttonProps?: HvButtonProps;\n /* Props passed to the HvTypography text component /\n typographyProps?: HvTypographyProps;\n /* A Jss Object used to override or extend the styles applied to the empty state component. /\n classes?: HvInlineEditorClasses;\n}\n\n/\n An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = ({\n className,\n classes: classesProp,\n value: valueProp,\n defaultValue,\n showIcon,\n component: InputComponent = HvInput,\n variant = \"body\",\n placeholder = \"Enter text\",\n onBlur,\n onChange,\n onKeyDown,\n buttonProps,\n typographyProps,\n ...others\n}: HvInlineEditorProps) => {\n const { classes, cx } = useClasses(classesProp);\n const [value, setValue] = useControlled(valueProp, defaultValue);\n const [editMode, setEditMode] = useState(false);\n const [cachedValue, setCachedValue] = useState(value);\n const inputRef = useRef<HTMLInputElement>();\n const { activeTheme } = useTheme();\n\n const typographyStyles = activeTheme?.typography[variant] \|\| {};\n const { lineHeight } = typographyStyles;\n\n useLayoutEffect(() => {\n const input = inputRef.current;\n if (editMode && input) {\n input.focus();\n input.select();\n }\n }, [editMode]);\n\n const handleClick = () => {\n setEditMode(true);\n setCachedValue(value);\n };\n\n const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n setEditMode(false);\n\n const newValue = value \|\| cachedValue; // empty values should be ignored\n setValue(newValue);\n onBlur?.(event, newValue);\n };\n\n const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n if (~~isKeypress~~(event, ~~keyboardCodes.~~Esc)) {\n setEditMode(false);\n setValue(cachedValue);\n }\n onKeyDown?.(event as any);\n };\n\n const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n setValue(val);\n onChange?.(event, val);\n };\n\n return (\n <div className={cx(className, classes.root)}>\n {editMode ? (\n <InputComponent\n inputRef={inputRef}\n classes={{\n root: classes.inputRoot,\n input: classes.input,\n inputBorderContainer: classes.inputBorderContainer,\n }}\n inputProps={{\n style: {\n ...typographyStyles,\n height: InputComponent === HvInput ? lineHeight : undefined,\n },\n }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...others}\n />\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n endIcon={\n <Edit\n color=\"secondary_60\"\n role=\"presentation\"\n className={cx(classes.icon, { [classes.iconVisible]: showIcon })}\n />\n }\n className={cx(classes.button, {\n [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n })}\n onClick={handleClick}\n {...buttonProps}\n >\n <HvTypography\n variant={variant}\n noWrap\n className={cx(classes.text, { [classes.textEmpty]: !value })}\n {...typographyProps}\n >\n {value \|\| placeholder}\n </HvTypography>\n </HvButton>\n )}\n </div>\n );\n};\n"],"names":["HvInlineEditor","className","classes","classesProp","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","cx","useClasses","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","activeTheme","useTheme","typographyStyles","typography","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","~~isKeypress~~","~~keyboardCodes","Esc","~~handleChange","val","root","children","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","HvButton","overrideIconColors","endIcon","Edit","color","role","icon","iconVisible","button","largeText","parseInt","onClick","HvTypography","noWrap","text","textEmpty"],"mappings":"~~;;;;;;;;;;;;;AAkDO~~,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC,SAASC;AAAAA,EACTC,OAAOC;AAAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC,WAAWC,iBAAiBC,MAAAA;AAAAA,EAC5BC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACnB,QAAA;AAAA,IAAEhB;AAAAA,IAASiB;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWjB,WAAW;AAC9C,QAAM,CAACC,OAAOiB,QAAQ,IAAIC,cAAAA,cAAcjB,WAAWC,YAAY;AAC/D,QAAM,CAACiB,UAAUC,WAAW,IAAIC,eAAS,KAAK;AAC9C,QAAM,CAACC,aAAaC,cAAc,IAAIF,eAASrB,KAAK;AACpD,QAAMwB,WAAWC,MAAAA;AACX,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,~~eAAS~~,SAAA;AAEjC,QAAMC,oBAAmBF,2CAAaG,WAAWtB,aAAY,CAAA;AACvD,QAAA;AAAA,IAAEuB;AAAAA,EAAeF,IAAAA;AAEvBG,QAAAA,gBAAgB,MAAM;AACpB,UAAMC,QAAQR,SAASS;AACvB,QAAId,YAAYa,OAAO;AACrBA,YAAME,MAAM;AACZF,YAAMG,OAAO;AAAA,IACf;AAAA,EAAA,GACC,CAAChB,QAAQ,CAAC;AAEb,QAAMiB,cAAcA,MAAM;AACxBhB,gBAAY,IAAI;AAChBG,mBAAevB,KAAK;AAAA,EAAA;AAGtB,QAAMqC,aAAsCC,CAAU,UAAA;AACpDlB,gBAAY,KAAK;AAEjB,UAAMmB,WAAWvC,SAASsB;AAC1BL,aAASsB,QAAQ;AACjB9B,qCAAS6B,OAAOC;AAAAA,EAAQ;AAG1B,QAAMC,gBAA4CF,CAAU,UAAA;~~AAC1D~~,~~QAAIG~~,~~oBAAWH~~,~~OAAOI~~,~~cAAcC~~,~~cAAAA~~,GAAG~~,GAAG~~;~~AACxCvB~~,kBAAY,KAAK;AACjBH,eAASK,WAAW;AAAA,IACtB;AACAX,2CAAY2B;AAAAA,EAAa;~~AAGrBM~~,QAAAA,eAAyCA,~~CAACN~~,~~OAAOO~~,QAAQ;~~AAC7D5B~~,~~aAAS4B~~,GAAG;~~AACZnC~~,yCAAW4B,~~OAAOO~~;AAAAA,EAAG;AAGvB,wCACE,OAAA;AAAA,~~IAAKhD~~,WAAWkB,GAAGlB,WAAWC,~~QAAQgD~~,IAAI;AAAA,IAAEC,~~UACzC5B~~,~~WACC6B~~,2BAAAA,~~IAAC3C~~,gBAAc;AAAA,MACbmB;AAAAA,MACA1B,SAAS;AAAA,~~QACPgD~~,~~MAAMhD~~,~~QAAQmD~~;AAAAA,~~QACdjB~~,OAAOlC,QAAQkC;AAAAA,~~QACfkB~~,~~sBAAsBpD~~,~~QAAQoD~~;AAAAA,MAChC;AAAA,MACAC,YAAY;AAAA,QACVC,OAAO;AAAA,UACL,~~GAAGxB~~;AAAAA,~~UACHyB~~,~~QAAQhD~~,mBAAmBC,gBAAUwB,~~aAAawB~~;AAAAA,QACpD;AAAA,MACF;AAAA,~~MACAtD~~;AAAAA,MACAS,QAAQ4B;AAAAA,MACR3B,~~UAAUkC~~;AAAAA,~~MACVjC~~,WAAW6B;AAAAA,MAAc,GACrB1B;AAAAA,IAAAA,CACL,~~IAEDkC~~,2BAAAA,IAACO,iBAAQ;AAAA,~~MACPhD~~,SAAQ;AAAA,~~MACRiD~~,oBAAoB;AAAA,MACpBC,wCACGC,sBAAI;AAAA,QACHC,OAAM;AAAA,QACNC,MAAK;AAAA,~~QACL/D~~,WAAWkB,GAAGjB,~~QAAQ+D~~,MAAM;AAAA,UAAE,~~CAAC/D~~,~~QAAQgE~~,WAAW,~~GAAG3D~~;AAAAA,QAAAA,CAAU;AAAA,MAAA,CAChE;AAAA,MAEHN,WAAWkB,GAAGjB,~~QAAQiE~~,QAAQ;AAAA,QAC5B,~~CAACjE~~,~~QAAQkE~~,SAAS,GAAGC,~~SAASnC~~,YAAsB,EAAE,KAAK;AAAA,MAAA,CAC5D;AAAA,~~MACDoC~~,~~SAAS9B~~;AAAAA,MAAY,GACjBxB;AAAAA,~~MAAWmC~~,yCAEdoB,yBAAY;AAAA,~~QACX5D~~;AAAAA,~~QACA6D~~,QAAM;AAAA,~~QACNvE~~,WAAWkB,GAAGjB,~~QAAQuE~~,MAAM;AAAA,UAAE,~~CAACvE~~,~~QAAQwE~~,SAAS,GAAG,~~CAACtE~~;AAAAA,QAAAA,CAAO;AAAA,QAAE,GACzDa;AAAAA,~~QAAekC~~,~~UAElB/C~~,SAASQ;AAAAA,MAAAA,CACE;AAAA,IAAA,CACN;AAAA,EAAA,CAET;AAET;;;"}
1	+ {"version":3,"file":"InlineEditor.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useControlled, useTheme } from \"@core/hooks\";\nimport { ExtractNames, isKey } from \"@core/utils\";\nimport {\n HvButtonProps,\n HvTypographyVariants,\n HvTypographyProps,\n HvInput,\n HvButton,\n HvTypography,\n HvInputProps,\n} from \"@core/components\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n extends HvBaseProps<HTMLDivElement, \"onBlur\" \| \"onChange\"> {\n /** The value of the form element. /\n value?: string;\n /* Whether the Edit icon should always be visible /\n showIcon?: boolean;\n /* Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) /\n component?: React.ElementType;\n /* Variant of the HvTypography to display /\n variant?: HvTypographyVariants;\n /* Called when the input is blurred. /\n onBlur?: (\n event: React.FocusEvent<HTMLTextAreaElement \| HTMLInputElement>,\n value: string\n ) => void;\n /* Called when the input value changes. /\n onChange?: (event: React.SyntheticEvent, value: string) => void;\n /* Props passed to the HvButton component /\n buttonProps?: HvButtonProps;\n /* Props passed to the HvTypography text component /\n typographyProps?: HvTypographyProps;\n /* A Jss Object used to override or extend the styles applied to the empty state component. /\n classes?: HvInlineEditorClasses;\n}\n\n/\n An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = ({\n className,\n classes: classesProp,\n value: valueProp,\n defaultValue,\n showIcon,\n component: InputComponent = HvInput,\n variant = \"body\",\n placeholder = \"Enter text\",\n onBlur,\n onChange,\n onKeyDown,\n buttonProps,\n typographyProps,\n ...others\n}: HvInlineEditorProps) => {\n const { classes, cx } = useClasses(classesProp);\n const [value, setValue] = useControlled(valueProp, defaultValue);\n const [editMode, setEditMode] = useState(false);\n const [cachedValue, setCachedValue] = useState(value);\n const inputRef = useRef<HTMLInputElement>();\n const { activeTheme } = useTheme();\n\n const typographyStyles = activeTheme?.typography[variant] \|\| {};\n const { lineHeight } = typographyStyles;\n\n useLayoutEffect(() => {\n const input = inputRef.current;\n if (editMode && input) {\n input.focus();\n input.select();\n }\n }, [editMode]);\n\n const handleClick = () => {\n setEditMode(true);\n setCachedValue(value);\n };\n\n const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n setEditMode(false);\n\n const newValue = value \|\| cachedValue; // empty values should be ignored\n setValue(newValue);\n onBlur?.(event, newValue);\n };\n\n const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Esc\")) {\n setEditMode(false);\n setValue(cachedValue);\n }\n onKeyDown?.(event as any);\n };\n\n const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n setValue(val);\n onChange?.(event, val);\n };\n\n return (\n <div className={cx(className, classes.root)}>\n {editMode ? (\n <InputComponent\n inputRef={inputRef}\n classes={{\n root: classes.inputRoot,\n input: classes.input,\n inputBorderContainer: classes.inputBorderContainer,\n }}\n inputProps={{\n style: {\n ...typographyStyles,\n height: InputComponent === HvInput ? lineHeight : undefined,\n },\n }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...others}\n />\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n endIcon={\n <Edit\n color=\"secondary_60\"\n role=\"presentation\"\n className={cx(classes.icon, { [classes.iconVisible]: showIcon })}\n />\n }\n className={cx(classes.button, {\n [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n })}\n onClick={handleClick}\n {...buttonProps}\n >\n <HvTypography\n variant={variant}\n noWrap\n className={cx(classes.text, { [classes.textEmpty]: !value })}\n {...typographyProps}\n >\n {value \|\| placeholder}\n </HvTypography>\n </HvButton>\n )}\n </div>\n );\n};\n"],"names":["HvInlineEditor","className","classes","classesProp","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","cx","useClasses","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","activeTheme","useTheme","typographyStyles","typography","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKey","handleChange","val","root","children","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","HvButton","overrideIconColors","endIcon","Edit","color","role","icon","iconVisible","button","largeText","parseInt","onClick","HvTypography","noWrap","text","textEmpty"],"mappings":"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"}

package/dist/cjs/components/Input/Input.cjs CHANGED Viewed

@@ -22,8 +22,7 @@ const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
 const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
-const keyCheck = require("../../utils/keyboardUtils/keyCheck.cjs");
-const keyboardCodes = require("../../utils/keyboardUtils/keyboardCodes.cjs");
+const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const DEFAULT_LABELS = {
@@ -190,18 +189,18 @@ const HvInput = React.forwardRef((props, ref) => {
     return li != null ? (_a2 = listEl == null ? void 0 : listEl.getElementsByTagName("li")) == null ? void 0 : _a2[li] : listEl;
   };
   const onSuggestionKeyDown = (event) => {
-    if (keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.Esc)) {
+    if (keyboardUtils.isKey(event, "Esc")) {
       suggestionClearHandler();
       focusInput();
-    } else if (keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.Tab)) {
+    } else if (keyboardUtils.isKey(event, "Tab")) {
       suggestionClearHandler();
     }
   };
   const onKeyDownHandler = (event) => {
-    if (keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.ArrowDown) && hasSuggestions) {
+    if (keyboardUtils.isKey(event, "ArrowDown") && hasSuggestions) {
       const li = getSuggestions(0);
       li == null ? void 0 : li.focus();
-    } else if (keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.Enter)) {
+    } else if (keyboardUtils.isKey(event, "Enter")) {
       onEnter == null ? void 0 : onEnter(event, value);
     }
     onKeyDown == null ? void 0 : onKeyDown(event, value);