npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.9.0 → 3.0.0-rc.2 - Mend

@pega/cosmos-react-core 3.0.0-dev.9.0 → 3.0.0-rc.2

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 (989) hide show

package/lib/hooks/useActiveDescendant.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useActiveDescendant.js","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, DependencyList, useCallback, useRef } from 'react';\n\nimport { createUID } from '../utils';\n\nexport interface UseActiveDescendantConfig {\n /** DOM element which controls and has active descendants /\n focusEl: HTMLElement \| null;\n /* Root scope for descendant options /\n scope: HTMLElement \| null;\n /* Custom selector for specific descendant scope in root descendant scope /\n scopeSelector?: string;\n /* Custom selector for descendant options /\n selector?: string;\n /* One-time override for the focused descendant, triggers re-evaluation.\n * Include `clearFocusDescendantEl` for cleanup.\n /\n focusDescendantEl?: HTMLElement \| null;\n /* Callback to clear focusDescendantEl after use. /\n clearFocusDescendant?: () => void;\n /* One-time override for focused element on NEXT re-evaluation of active descendants.\n * Include `clearFocusReturn` for cleanup.\n /\n focusReturnEl?: HTMLElement \| null;\n /* Callback to clear focusReturnEl after use. /\n clearFocusReturn?: () => void;\n /\n Descendant ID used for continuous override of current active descendant,\n * used for external focus control / keyDown bindings (see RTE).\n * NOTE: setting currentDescendantId once effectively disables the keybindings of this hook.\n * If you only need to set the current element once, use focusReturnEl & clearFocusReturn.\n * @deprecated\n /\n currentDescendantId?: string;\n /* Explicit onClick handler called on keydown 'enter' event /\n onClick?: (currentDescendantEl: HTMLElement) => void;\n /* Prevent scrolling to the active descendant on the initial render.\n * Include `preventInitialScroll` for cleanup.\n /\n preventInitialScroll?: boolean;\n /* Callback to clear preventInitialScroll after use. /\n clearPreventScroll?: () => void;\n /* Boolean to prevent descendant evaluation.\n * @default false\n */\n pauseDescendantEvaluation?: boolean;\n}\n\ntype CurrentDescendant = HTMLElement \| undefined;\ntype Descendants = HTMLElement[] \| null;\n\nconst useActiveDescendant = (\n {\n focusEl,\n scope,\n scopeSelector,\n selector,\n focusDescendantEl,\n clearFocusDescendant,\n focusReturnEl,\n clearFocusReturn,\n currentDescendantId,\n onClick,\n preventInitialScroll,\n pauseDescendantEvaluation = false,\n clearPreventScroll\n }: UseActiveDescendantConfig,\n dependencyArray: DependencyList = []\n): {\n activeDescendant: CurrentDescendant;\n descendants: Descendants;\n} => {\n const [resetId, setResetId] = useState(0);\n const previousActiveId = useRef('');\n const [focusDescendantElIndex, setFocusDescendantElIndex] = useState<number \| null>(null);\n const [currentIndex, setCurrentIndex] = useState<number \| null>(null);\n const [descendants, setDescendants] = useState<Descendants>();\n\n const clearThenSetDescendants = useCallback(\n (setVal: NodeListOf<Element> \| null) => {\n descendants?.forEach(node => {\n node.setAttribute('data-current', 'false');\n });\n\n setDescendants(\n setVal\n ? Array.from(setVal).filter((item): item is HTMLElement => item instanceof HTMLElement)\n : null\n );\n },\n [descendants]\n );\n\n // ## Toggle active scope data attr.\n useEffect(() => {\n if (!scope \|\| !focusEl) return;\n const rootNode = focusEl.getRootNode() as Document;\n let activeElement: Element \| null \| undefined = rootNode.activeElement;\n if (activeElement?.tagName === 'IFRAME') {\n activeElement = (activeElement as HTMLIFrameElement).contentDocument?.activeElement;\n }\n scope.setAttribute('data-active-scope', activeElement === focusEl ? 'true' : 'false');\n\n const onFocus = () => {\n scope.setAttribute('data-active-scope', 'true');\n };\n const onBlur = () => {\n scope.setAttribute('data-active-scope', 'false');\n };\n\n focusEl.addEventListener('focus', onFocus);\n focusEl.addEventListener('blur', onBlur);\n\n return () => {\n focusEl.removeEventListener('focus', onFocus);\n focusEl.removeEventListener('blur', onBlur);\n };\n }, [scope, focusEl]);\n\n // ## Update descendants\n useEffect(() => {\n if (!pauseDescendantEvaluation) {\n // 0 second timeout added because descendantScope needs to be up to date before running query after dependencyArray change\n setTimeout(() => {\n let hasScope = scope;\n\n if (hasScope && hasScope instanceof HTMLElement) {\n if (scopeSelector) {\n hasScope = hasScope.querySelector(scopeSelector);\n }\n\n if (!hasScope) {\n clearThenSetDescendants(null);\n return;\n }\n\n if (selector) {\n clearThenSetDescendants(hasScope.querySelectorAll(selector));\n } else {\n clearThenSetDescendants(\n hasScope.querySelectorAll(\n 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])'\n )\n );\n }\n } else {\n clearThenSetDescendants(null);\n }\n }, 0);\n }\n }, [pauseDescendantEvaluation, scope, scopeSelector, selector, focusEl, ...dependencyArray]);\n\n // ## Set IDs and aria-owns\n useEffect(() => {\n const ownedIds: string[] = [];\n setCurrentIndex(0);\n\n if (descendants && descendants.length) {\n descendants.forEach(node => {\n node.id = node.id \|\| createUID();\n ownedIds.push(node.id);\n });\n }\n\n focusEl?.setAttribute('aria-owns', ownedIds.join(' '));\n\n return () => {\n focusEl?.removeAttribute('aria-owns');\n };\n }, [focusEl, descendants]);\n\n // ## Bind focus el keyDown\n useEffect(() => {\n const onKeyDown = (e: KeyboardEvent) => {\n if (descendants && descendants.length) {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n // Focus next or first\n clearFocusReturn?.();\n clearPreventScroll?.();\n if (currentIndex !== null && currentIndex + 1 < descendants.length) {\n setCurrentIndex(currentIndex + 1);\n } else {\n setCurrentIndex(0);\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n // Focus previous or last\n clearFocusReturn?.();\n clearPreventScroll?.();\n if (currentIndex !== null && currentIndex - 1 > -1) {\n setCurrentIndex(currentIndex - 1);\n } else {\n setCurrentIndex(descendants.length - 1);\n }\n break;\n case 'Enter':\n e.preventDefault();\n // Click focused item\n if (descendants && descendants.length && currentIndex !== null) {\n if (onClick) {\n onClick(descendants[currentIndex]);\n break;\n }\n\n const nodeName = descendants[currentIndex].nodeName.toLowerCase();\n if (nodeName === 'input' \|\| nodeName === 'button' \|\| nodeName === 'a') {\n descendants[currentIndex].click();\n } else {\n descendants[currentIndex].querySelector<HTMLElement>('button, a, input')?.click();\n }\n }\n break;\n default:\n break;\n }\n }\n };\n\n // Do not rebind once / if `currentDescendantId` control is defined\n if (focusEl && descendants?.length && !currentDescendantId) {\n focusEl.addEventListener('keydown', onKeyDown);\n }\n\n return () => {\n focusEl?.removeEventListener('keydown', onKeyDown);\n };\n }, [focusEl, currentIndex, descendants]);\n\n // ## Handle independent control update\n useEffect(() => {\n if (descendants && currentDescendantId) {\n descendants.forEach((node, index) => {\n if (node.id === currentDescendantId) {\n setCurrentIndex(index);\n }\n });\n }\n }, [currentDescendantId, descendants]);\n\n // ## Set and scroll to current descendant\n useEffect(() => {\n const nextIndex = focusDescendantElIndex \|\| currentIndex;\n const focusReturnId = focusReturnEl?.id;\n let focusReturnIndex;\n const focusDescendantElId = focusDescendantEl?.id;\n let focusDescendantIndex;\n let foundFocusDescendantEl = false;\n\n if (descendants && descendants.length) {\n // clear previous & catch focusReturn / focusDescendantEl index\n descendants.forEach((node, index) => {\n if (focusDescendantElIndex === null && node.id === focusDescendantElId) {\n focusDescendantIndex = index;\n foundFocusDescendantEl = true;\n setFocusDescendantElIndex(index);\n }\n if (node.id === focusReturnId) {\n focusReturnIndex = index;\n }\n node.setAttribute('data-current', 'false');\n });\n\n // early return for focusReturn / focusDescendantEl\n if (focusReturnIndex && focusReturnIndex !== currentIndex) {\n setCurrentIndex(focusReturnIndex);\n clearFocusReturn?.();\n return;\n }\n if (foundFocusDescendantEl && focusDescendantIndex !== undefined) {\n // hard reset to continue focusDescendantEl process even if it is the active descendant\n setResetId(Math.random());\n setCurrentIndex(focusDescendantIndex);\n return;\n }\n\n // set new\n if (nextIndex !== null && descendants[nextIndex]) {\n const itemEl = descendants[nextIndex!];\n itemEl.setAttribute('data-current', 'true');\n focusEl?.setAttribute('aria-activedescendant', itemEl.id);\n\n // scroll to element\n if (itemEl.id !== previousActiveId.current && !preventInitialScroll) {\n const scrollTo: (this: Element, arg: boolean) => void =\n Element.prototype.scrollIntoViewIfNeeded ?? Element.prototype.scrollIntoView;\n\n scrollTo?.call(itemEl, false);\n }\n\n // focusDescendantEl cleanup\n if (focusDescendantElIndex !== null) {\n setFocusDescendantElIndex(null);\n clearFocusDescendant?.();\n }\n\n previousActiveId.current = itemEl.id;\n }\n }\n\n return () => {\n focusEl?.removeAttribute('aria-activedescendant');\n };\n }, [descendants, currentIndex, focusDescendantEl, focusEl, resetId]);\n\n return {\n activeDescendant: currentIndex !== null && descendants ? descendants[currentIndex] : undefined,\n descendants: descendants \|\| null\n };\n};\n\nexport const useLazyDescendant = ({\n loading,\n descendants,\n previousActiveDescendant,\n activeDescendant,\n focusReturnEl,\n setFocusReturnEl,\n scrollEl\n}: {\n loading: boolean;\n descendants: Descendants;\n previousActiveDescendant: CurrentDescendant;\n activeDescendant: CurrentDescendant;\n focusReturnEl: UseActiveDescendantConfig['focusReturnEl'];\n setFocusReturnEl: (el: HTMLElement \| null \| undefined) => void;\n scrollEl?: HTMLElement \| null;\n}) => {\n // Bump scroll & set return element when descendant focused in loading state.\n useEffect(() => {\n if (loading && descendants && descendants.length && activeDescendant) {\n const descendantList = [...descendants];\n const lastItem = descendantList.pop();\n const lastId = lastItem?.id \|\| undefined;\n\n if (lastId === activeDescendant.id) {\n if (scrollEl) {\n scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight;\n }\n\n if (focusReturnEl?.id !== activeDescendant.id) {\n // Set focus return to AD on 'nextTick', to avoid reset of AD on update\n setTimeout(() => {\n setFocusReturnEl(lastItem);\n }, 0);\n }\n }\n // If not last item\n else if (focusReturnEl?.id !== activeDescendant.id) {\n // Set focus return to AD on 'nextTick' to avoid reset of AD on update\n // Do not D.R.Y to avoid conflicting calls with immediately prior elements.\n setTimeout(() => {\n setFocusReturnEl(activeDescendant);\n }, 0);\n }\n }\n }, [loading, descendants, previousActiveDescendant, activeDescendant, scrollEl, focusReturnEl]);\n};\n\nexport default useActiveDescendant;\n"]}
1	+ {"version":3,"file":"useActiveDescendant.js","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, DependencyList, useCallback, useRef } from 'react';\n\nimport { createUID } from '../utils';\n\nimport useDirection from './useDirection';\n\nexport interface UseActiveDescendantConfig {\n /** DOM element which controls and has active descendants /\n focusEl: HTMLElement \| null;\n /* Root scope for descendant options /\n scope: HTMLElement \| null;\n /* Custom selector for specific descendant scope in root descendant scope /\n scopeSelector?: string;\n /* Custom selector for descendant options /\n selector?: string;\n /* Orientation of descendant navigation\n * @default 'vertical'\n /\n orientation?: 'horizontal' \| 'vertical';\n /* One-time override for the focused descendant, triggers re-evaluation.\n * Include `clearFocusDescendantEl` for cleanup.\n /\n focusDescendantEl?: HTMLElement \| null;\n /* Callback to clear focusDescendantEl after use. /\n clearFocusDescendant?: () => void;\n /* One-time override for focused element on NEXT re-evaluation of active descendants.\n * Include `clearFocusReturn` for cleanup.\n /\n focusReturnEl?: HTMLElement \| null;\n /* Callback to clear focusReturnEl after use. /\n clearFocusReturn?: () => void;\n /\n Descendant ID used for continuous override of current active descendant,\n * used for external focus control / keyDown bindings (see RTE).\n * NOTE: setting currentDescendantId once effectively disables the keybindings of this hook.\n * If you only need to set the current element once, use focusReturnEl & clearFocusReturn.\n * @deprecated\n /\n currentDescendantId?: string;\n /* Explicit onClick handler called on keydown 'enter' event /\n onClick?: (currentDescendantEl: HTMLElement) => void;\n /* Prevent scrolling to the active descendant on the initial render.\n * Include `preventInitialScroll` for cleanup.\n /\n preventInitialScroll?: boolean;\n /* Callback to clear preventInitialScroll after use. /\n clearPreventScroll?: () => void;\n /* Boolean to prevent descendant evaluation.\n * @default false\n /\n pauseDescendantEvaluation?: boolean;\n}\n\ntype CurrentDescendant = HTMLElement \| undefined;\ntype Descendants = HTMLElement[] \| null;\n\nconst useActiveDescendant = (\n {\n focusEl,\n scope,\n scopeSelector,\n selector,\n orientation = 'vertical',\n focusDescendantEl,\n clearFocusDescendant,\n focusReturnEl,\n clearFocusReturn,\n currentDescendantId,\n onClick,\n preventInitialScroll,\n pauseDescendantEvaluation = false,\n clearPreventScroll\n }: UseActiveDescendantConfig,\n dependencyArray: DependencyList = []\n): {\n activeDescendant: CurrentDescendant;\n descendants: Descendants;\n} => {\n const [resetId, setResetId] = useState(0);\n const previousActiveId = useRef('');\n const paused = useRef(pauseDescendantEvaluation);\n const [focusDescendantElIndex, setFocusDescendantElIndex] = useState<number \| null>(null);\n const [currentIndex, setCurrentIndex] = useState<number \| null>(null);\n const [descendants, setDescendants] = useState<Descendants>();\n const { rtl } = useDirection();\n\n const clearDescendants = useCallback(() => {\n descendants?.forEach(node => {\n node.setAttribute('data-current', 'false');\n });\n }, [descendants]);\n\n const clearThenSetDescendants = useCallback(\n (setVal: NodeListOf<Element> \| null) => {\n clearDescendants();\n setDescendants(\n setVal\n ? Array.from(setVal).filter((item): item is HTMLElement => item instanceof HTMLElement)\n : null\n );\n },\n [descendants]\n );\n\n const setIdsAndOwns = useCallback(\n ({ clear }: { clear: boolean } = { clear: false }) => {\n const ownedIds: string[] = [];\n\n if (descendants && descendants.length) {\n descendants.forEach(node => {\n node.id = node.id \|\| createUID();\n ownedIds.push(node.id);\n });\n }\n\n if (clear) {\n const currentOwnedIds = focusEl?.getAttribute('aria-owns')?.split(' ');\n const clearedIds = currentOwnedIds?.filter(id => !ownedIds.includes(id));\n focusEl?.setAttribute('aria-owns', clearedIds?.join(' ') \|\| '');\n } else {\n focusEl?.setAttribute('aria-owns', ownedIds.join(' '));\n }\n },\n [focusEl, descendants]\n );\n\n const updateDescendants = useCallback(() => {\n if (pauseDescendantEvaluation) return;\n\n let hasScope = scope;\n\n if (hasScope && hasScope instanceof HTMLElement) {\n if (scopeSelector) {\n hasScope = hasScope.querySelector(scopeSelector);\n }\n\n if (!hasScope) {\n clearThenSetDescendants(null);\n return;\n }\n\n if (selector) {\n const setVal = hasScope.querySelectorAll(selector);\n clearThenSetDescendants(setVal);\n } else {\n const setVal = hasScope.querySelectorAll(\n 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])'\n );\n clearThenSetDescendants(setVal);\n }\n } else {\n clearThenSetDescendants(null);\n }\n }, [scope, scopeSelector, selector, pauseDescendantEvaluation]);\n\n // Update paused ref\n useEffect(() => {\n paused.current = pauseDescendantEvaluation;\n }, [pauseDescendantEvaluation]);\n\n // Toggle active scope data attr.\n useEffect(() => {\n if (!scope \|\| !focusEl) return;\n\n scope.setAttribute('data-active-scope', document.activeElement === focusEl ? 'true' : 'false');\n\n const onFocus = () => {\n scope.setAttribute('data-active-scope', 'true');\n };\n const onBlur = () => {\n scope.setAttribute('data-active-scope', 'false');\n };\n\n focusEl.addEventListener('focus', onFocus);\n focusEl.addEventListener('blur', onBlur);\n\n return () => {\n focusEl.removeEventListener('focus', onFocus);\n focusEl.removeEventListener('blur', onBlur);\n };\n }, [scope, focusEl]);\n\n // Update descendants when un-paused\n useEffect(() => {\n if (!pauseDescendantEvaluation) {\n updateDescendants();\n }\n }, [pauseDescendantEvaluation]);\n\n // Update descendants & reset current index when dependencies change\n useEffect(() => {\n /\n 0 second timeout added because descendantScope needs to be\n * up to date before running query after dependencyArray change\n */\n const timeoutId = setTimeout(() => {\n updateDescendants();\n if (!paused.current) {\n setCurrentIndex(0);\n }\n }, 0);\n\n return () => clearTimeout(timeoutId);\n }, [...dependencyArray]);\n\n // Set IDs and aria-owns\n useEffect(() => {\n if (!pauseDescendantEvaluation) {\n setIdsAndOwns();\n setResetId(Math.random());\n } else {\n clearDescendants();\n setIdsAndOwns({ clear: true });\n }\n }, [pauseDescendantEvaluation, focusEl, descendants]);\n\n // Bind focus el keyDown\n useEffect(() => {\n const nextIndex = () => {\n // Focus next or first\n clearFocusReturn?.();\n clearPreventScroll?.();\n if (currentIndex !== null && currentIndex + 1 < descendants!.length) {\n setCurrentIndex(currentIndex + 1);\n } else {\n setCurrentIndex(0);\n }\n };\n const prevIndex = () => {\n // Focus previous or last\n clearFocusReturn?.();\n clearPreventScroll?.();\n if (currentIndex !== null && currentIndex - 1 > -1) {\n setCurrentIndex(currentIndex - 1);\n } else {\n setCurrentIndex(descendants!.length - 1);\n }\n };\n\n const onKeyDown = (e: KeyboardEvent) => {\n // 0 second timeout to execute after explicitly defined onKeyDown event handlers.\n setTimeout(() => {\n if (descendants && descendants.length) {\n switch (e.key) {\n case 'ArrowDown':\n if (orientation === 'vertical') {\n e.preventDefault();\n nextIndex();\n }\n break;\n case 'ArrowUp':\n if (orientation === 'vertical') {\n e.preventDefault();\n prevIndex();\n }\n break;\n case 'ArrowRight':\n if (orientation === 'horizontal') {\n e.preventDefault();\n if (rtl) {\n prevIndex();\n } else {\n nextIndex();\n }\n }\n break;\n case 'ArrowLeft':\n if (orientation === 'horizontal') {\n e.preventDefault();\n if (rtl) {\n nextIndex();\n } else {\n prevIndex();\n }\n }\n break;\n case 'Enter':\n e.preventDefault();\n // Click focused item\n if (descendants && descendants.length && currentIndex !== null) {\n if (onClick) {\n onClick(descendants[currentIndex]);\n break;\n }\n\n const nodeName = descendants[currentIndex].nodeName.toLowerCase();\n if (nodeName === 'input' \|\| nodeName === 'button' \|\| nodeName === 'a') {\n descendants[currentIndex].click();\n } else {\n descendants[currentIndex].querySelector<HTMLElement>('button, a, input')?.click();\n }\n }\n break;\n default:\n break;\n }\n }\n }, 0);\n };\n\n // Do not rebind once / if `currentDescendantId` (deprecated) control is defined\n if (!pauseDescendantEvaluation && focusEl && descendants?.length && !currentDescendantId) {\n focusEl.addEventListener('keydown', onKeyDown);\n }\n\n return () => {\n focusEl?.removeEventListener('keydown', onKeyDown);\n };\n }, [focusEl, currentIndex, descendants, pauseDescendantEvaluation]);\n\n // Handle independent control update (deprecated)\n useEffect(() => {\n if (!pauseDescendantEvaluation && descendants && currentDescendantId) {\n descendants.forEach((node, index) => {\n if (node.id === currentDescendantId) {\n setCurrentIndex(index);\n }\n });\n }\n }, [currentDescendantId, descendants, pauseDescendantEvaluation]);\n\n // Set and scroll to current descendant\n useEffect(() => {\n if (paused.current) {\n return;\n }\n const nextIndex = focusDescendantElIndex \|\| currentIndex;\n const focusReturnId = focusReturnEl?.id;\n let focusReturnIndex;\n const focusDescendantElId = focusDescendantEl?.id;\n let focusDescendantIndex;\n let foundFocusDescendantEl = false;\n\n if (descendants && descendants.length) {\n // clear previous & catch focusReturn / focusDescendantEl index\n descendants.forEach((node, index) => {\n if (focusDescendantElIndex === null && node.id === focusDescendantElId) {\n focusDescendantIndex = index;\n foundFocusDescendantEl = true;\n setFocusDescendantElIndex(index);\n }\n if (node.id === focusReturnId) {\n focusReturnIndex = index;\n }\n node.setAttribute('data-current', 'false');\n });\n\n // early return for focusReturn / focusDescendantEl\n if (focusReturnIndex && focusReturnIndex !== currentIndex) {\n setCurrentIndex(focusReturnIndex);\n clearFocusReturn?.();\n return;\n }\n if (foundFocusDescendantEl && focusDescendantIndex !== undefined) {\n // hard reset to continue focusDescendantEl process even if it is the active descendant\n setResetId(Math.random());\n setCurrentIndex(focusDescendantIndex);\n return;\n }\n\n // set new\n if (nextIndex !== null && descendants[nextIndex]) {\n const itemEl = descendants[nextIndex!];\n itemEl.setAttribute('data-current', 'true');\n focusEl?.setAttribute('aria-activedescendant', itemEl.id);\n\n // scroll to element\n if (itemEl.id !== previousActiveId.current && !preventInitialScroll) {\n const scrollTo: (this: Element, arg: boolean) => void =\n Element.prototype.scrollIntoViewIfNeeded ?? Element.prototype.scrollIntoView;\n\n scrollTo?.call(itemEl, false);\n }\n\n // focusDescendantEl cleanup\n if (focusDescendantElIndex !== null) {\n setFocusDescendantElIndex(null);\n clearFocusDescendant?.();\n }\n\n previousActiveId.current = itemEl.id;\n }\n }\n\n return () => {\n focusEl?.removeAttribute('aria-activedescendant');\n };\n }, [descendants, currentIndex, focusDescendantEl, focusEl, resetId]);\n\n return {\n activeDescendant: currentIndex !== null && descendants ? descendants[currentIndex] : undefined,\n descendants: descendants \|\| null\n };\n};\n\nexport const useLazyDescendant = ({\n loading,\n descendants,\n previousActiveDescendant,\n activeDescendant,\n focusReturnEl,\n setFocusReturnEl,\n scrollEl\n}: {\n loading: boolean;\n descendants: Descendants;\n previousActiveDescendant: CurrentDescendant;\n activeDescendant: CurrentDescendant;\n focusReturnEl: UseActiveDescendantConfig['focusReturnEl'];\n setFocusReturnEl: (el: HTMLElement \| null \| undefined) => void;\n scrollEl?: HTMLElement \| null;\n}) => {\n // Bump scroll & set return element when descendant focused in loading state.\n useEffect(() => {\n if (loading && descendants && descendants.length && activeDescendant) {\n const descendantList = [...descendants];\n const lastItem = descendantList.pop();\n const lastId = lastItem?.id \|\| undefined;\n let timeoutId: ReturnType<typeof setTimeout>;\n\n if (lastId === activeDescendant.id) {\n if (scrollEl) {\n scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight;\n }\n\n if (focusReturnEl?.id !== activeDescendant.id) {\n // Set focus return to AD on 'nextTick', to avoid reset of AD on update\n timeoutId = setTimeout(() => {\n setFocusReturnEl(lastItem);\n }, 0);\n }\n }\n // If not last item\n else if (focusReturnEl?.id !== activeDescendant.id) {\n // Set focus return to AD on 'nextTick' to avoid reset of AD on update\n // Do not D.R.Y to avoid conflicting calls with immediately prior elements.\n timeoutId = setTimeout(() => {\n setFocusReturnEl(activeDescendant);\n }, 0);\n }\n\n return () => clearTimeout(timeoutId);\n }\n }, [loading, descendants, previousActiveDescendant, activeDescendant, scrollEl, focusReturnEl]);\n};\n\nexport default useActiveDescendant;\n"]}

package/lib/hooks/useAutoResize.d.ts CHANGED Viewed

@@ -7,6 +7,6 @@ import { MutableRefObject } from 'react';
  *          * resizeFunction:: The function to call to automatically resize the element.
  * element refers to auto resizable element
  */
-declare const useAutoResize: <T extends HTMLElement = HTMLElement>(maxHeight?: number | undefined, minHeightProp?: number | undefined) => [MutableRefObject<T | null>, () => void];
+declare const useAutoResize: <T extends HTMLElement = HTMLElement>(maxHeight?: number, minHeightProp?: number) => [MutableRefObject<T | null>, () => void];
 export default useAutoResize;
 //# sourceMappingURL=useAutoResize.d.ts.map

package/lib/hooks/useAutoResize.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAutoResize.d.ts","sourceRoot":"","sources":["../../src/hooks/useAutoResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI3D;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa,~~kJAGmB~~,IAAI,~~CAkCzC~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"useAutoResize.d.ts","sourceRoot":"","sources":["../../src/hooks/useAutoResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI3D;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa,oDACL,MAAM,kBACF,MAAM,wCACc,IAAI,CAqCzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/hooks/useAutoResize.js CHANGED Viewed

@@ -13,9 +13,12 @@ const useAutoResize = (maxHeight, minHeightProp) => {
     const [minHeight, setMinHeight] = useState(minHeightProp || 0);
     const autoResize = () => {
         let scrollHeightElement = element.current;
-        if (element.current?.tagName === 'IFRAME')
+        let iframe;
+        if (element.current && element.current instanceof HTMLIFrameElement) {
+            iframe = element.current;
             scrollHeightElement =
                 element.current.contentDocument?.querySelector('body') ?? element.current;
+        }
         if (element.current) {
             let newMinHeight = minHeight;
             if (!minHeight) {
@@ -23,14 +26,19 @@ const useAutoResize = (maxHeight, minHeightProp) => {
                 setMinHeight(newMinHeight);
             }
             // Reset the heights to the base height so there is an overflow / or none to calculate the new height
-            element.current.style.height = `${newMinHeight}px`;
+            scrollHeightElement.style.height = `${newMinHeight}px`;
             if (maxHeight) {
-                element.current.style.overflowY =
-                    element.current.scrollHeight > maxHeight ? 'auto' : 'hidden';
-                element.current.style.height = `${Math.min(scrollHeightElement.scrollHeight, maxHeight)}px`;
+                scrollHeightElement.style.overflowY =
+                    scrollHeightElement.scrollHeight > maxHeight ? 'auto' : 'hidden';
+                const height = `${Math.min(scrollHeightElement.scrollHeight, maxHeight)}px`;
+                scrollHeightElement.style.height = height;
+                if (iframe)
+                    iframe.style.height = height;
             }
             else {
-                element.current.style.height = `${scrollHeightElement.scrollHeight}px`;
+                scrollHeightElement.style.height = `${scrollHeightElement.scrollHeight}px`;
+                if (iframe)
+                    iframe.style.height = `${scrollHeightElement.scrollHeight}px`;
             }
         }
     };

package/lib/hooks/useAutoResize.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAutoResize.js","sourceRoot":"","sources":["../../src/hooks/useAutoResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAoB,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC;;;;;;;GAOG;AACH,MAAM,aAAa,GAAG,CACpB,SAAkB,EAClB,aAAsB,EACoB,EAAE;IAC5C,MAAM,OAAO,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;~~IAEvC~~,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC;IAE/D,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,mBAAmB,GAAgB,OAAO,CAAC,OAAsB,CAAC;QACtE,IAAI,OAAO,CAAC,OAAO,EAAE,OAAO,~~KAAK~~,~~QAAQ~~;~~YACvC~~,mBAAmB;~~gBAChB~~,OAAO,CAAC,~~OAA4C~~,CAAC,eAAe,EAAE,aAAa,~~CAClF~~,MAAM,~~CACP~~,IAAI,OAAO,CAAC,OAAO,CAAC;~~QACzB~~,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,IAAI,YAAY,GAAG,SAAS,CAAC;YAC7B,IAAI,CAAC,SAAS,EAAE;gBACd,YAAY,GAAG,mBAAmB,CAAC,YAAY,CAAC;gBAChD,YAAY,CAAC,YAAY,CAAC,CAAC;aAC5B;YACD,qGAAqG;YACrG,~~OAAO~~,CAAC,~~OAAO,CAAC,~~KAAK,CAAC,MAAM,GAAG,GAAG,YAAY,IAAI,CAAC;~~YAEnD~~,IAAI,SAAS,EAAE;gBACb,~~OAAO~~,CAAC,~~OAAO,CAAC,~~KAAK,CAAC,SAAS;~~oBAC7B~~,~~OAAO~~,CAAC,~~OAAO,CAAC,~~YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;~~gBAC/D~~,~~OAAO~~,~~CAAC,OAAO,CAAC,KAAK,CAAC,~~MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,YAAY,EAAE,SAAS,CAAC,IAAI,CAAC;~~aAC7F~~;iBAAM;gBACL,~~OAAO~~,CAAC,~~OAAO~~,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,mBAAmB,CAAC,YAAY,IAAI,CAAC;~~aACxE~~;SACF;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IAEtD,OAAO,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useRef, useState, MutableRefObject } from 'react';\n\nimport { debounce } from '../utils';\n\n/*\n @example const [ref, resizeFunction] = useAutoResize();\n * maxHeight should be provided in pixels without units\n * minHeight should be provided in pixels without units\n * @returns * ref:: A reference for the element that the resize functionality should be applied to. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n * * resizeFunction:: The function to call to automatically resize the element.\n * element refers to auto resizable element\n */\nconst useAutoResize = <T extends HTMLElement = HTMLElement>(\n maxHeight?: number,\n minHeightProp?: number\n): [MutableRefObject<T \| null>, () => void] => {\n const element = useRef<T \| null>(null);\n\n const [minHeight, setMinHeight] = useState(minHeightProp \|\| 0);\n\n const autoResize = () => {\n let scrollHeightElement: HTMLElement = element.current as HTMLElement;\n if (element.current~~?.tagName~~ ~~===~~ ~~'IFRAME'~~)\n scrollHeightElement =\n (element.current ~~as HTMLElement as HTMLIFrameElement)~~.contentDocument?.querySelector(\n 'body'\n ) ?? element.current;\n if (element.current) {\n let newMinHeight = minHeight;\n if (!minHeight) {\n newMinHeight = scrollHeightElement.scrollHeight;\n setMinHeight(newMinHeight);\n }\n // Reset the heights to the base height so there is an overflow / or none to calculate the new height\n ~~element~~.~~current.~~style.height = `${newMinHeight}px`;\n\n if (maxHeight) {\n ~~element~~.~~current.~~style.overflowY =\n ~~element~~.~~current.~~scrollHeight > maxHeight ? 'auto' : 'hidden';\n ~~element.current.style.~~height = `${Math.min(scrollHeightElement.scrollHeight, maxHeight)}px`;\n } else {\n ~~element~~.~~current~~.style.height = `${scrollHeightElement.scrollHeight}px`;\n }\n }\n };\n\n const debouncedAutoResize = debounce(autoResize, 100);\n\n return [element, debouncedAutoResize];\n};\n\nexport default useAutoResize;\n"]}
1	+ {"version":3,"file":"useAutoResize.js","sourceRoot":"","sources":["../../src/hooks/useAutoResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAoB,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC;;;;;;;GAOG;AACH,MAAM,aAAa,GAAG,CACpB,SAAkB,EAClB,aAAsB,EACoB,EAAE;IAC5C,MAAM,OAAO,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;IACvC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC;IAE/D,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,mBAAmB,GAAgB,OAAO,CAAC,OAAsB,CAAC;QACtE,IAAI,MAAqC,CAAC;QAC1C,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,YAAY,iBAAiB,EAAE;YACnE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;YACzB,mBAAmB;gBACjB,OAAO,CAAC,OAAO,CAAC,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC;SAC7E;QACD,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,IAAI,YAAY,GAAG,SAAS,CAAC;YAC7B,IAAI,CAAC,SAAS,EAAE;gBACd,YAAY,GAAG,mBAAmB,CAAC,YAAY,CAAC;gBAChD,YAAY,CAAC,YAAY,CAAC,CAAC;aAC5B;YACD,qGAAqG;YACrG,mBAAmB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,YAAY,IAAI,CAAC;YAEvD,IAAI,SAAS,EAAE;gBACb,mBAAmB,CAAC,KAAK,CAAC,SAAS;oBACjC,mBAAmB,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;gBACnE,MAAM,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,YAAY,EAAE,SAAS,CAAC,IAAI,CAAC;gBAC5E,mBAAmB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC1C,IAAI,MAAM;oBAAE,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;aAC1C;iBAAM;gBACL,mBAAmB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,mBAAmB,CAAC,YAAY,IAAI,CAAC;gBAC3E,IAAI,MAAM;oBAAE,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,mBAAmB,CAAC,YAAY,IAAI,CAAC;aAC3E;SACF;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IAEtD,OAAO,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useRef, useState, MutableRefObject } from 'react';\n\nimport { debounce } from '../utils';\n\n/*\n @example const [ref, resizeFunction] = useAutoResize();\n * maxHeight should be provided in pixels without units\n * minHeight should be provided in pixels without units\n * @returns * ref:: A reference for the element that the resize functionality should be applied to. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n * * resizeFunction:: The function to call to automatically resize the element.\n * element refers to auto resizable element\n */\nconst useAutoResize = <T extends HTMLElement = HTMLElement>(\n maxHeight?: number,\n minHeightProp?: number\n): [MutableRefObject<T \| null>, () => void] => {\n const element = useRef<T \| null>(null);\n const [minHeight, setMinHeight] = useState(minHeightProp \|\| 0);\n\n const autoResize = () => {\n let scrollHeightElement: HTMLElement = element.current as HTMLElement;\n let iframe: HTMLIFrameElement \| undefined;\n if (element.current && element.current instanceof HTMLIFrameElement) {\n iframe = element.current;\n scrollHeightElement =\n element.current.contentDocument?.querySelector('body') ?? element.current;\n }\n if (element.current) {\n let newMinHeight = minHeight;\n if (!minHeight) {\n newMinHeight = scrollHeightElement.scrollHeight;\n setMinHeight(newMinHeight);\n }\n // Reset the heights to the base height so there is an overflow / or none to calculate the new height\n scrollHeightElement.style.height = `${newMinHeight}px`;\n\n if (maxHeight) {\n scrollHeightElement.style.overflowY =\n scrollHeightElement.scrollHeight > maxHeight ? 'auto' : 'hidden';\n const height = `${Math.min(scrollHeightElement.scrollHeight, maxHeight)}px`;\n scrollHeightElement.style.height = height;\n if (iframe) iframe.style.height = height;\n } else {\n scrollHeightElement.style.height = `${scrollHeightElement.scrollHeight}px`;\n if (iframe) iframe.style.height = `${scrollHeightElement.scrollHeight}px`;\n }\n }\n };\n\n const debouncedAutoResize = debounce(autoResize, 100);\n\n return [element, debouncedAutoResize];\n};\n\nexport default useAutoResize;\n"]}

package/lib/hooks/useBreakpoint.d.ts CHANGED Viewed

@@ -5,9 +5,10 @@ import { RefObject } from 'react';
  * @param options
  * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.
  */
-declare const useBreakpoint: (breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl', options?: {
-    defaultValue?: boolean;
+declare const useBreakpoint: (breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl', { breakpointRef, defaultValue, themeProp }?: {
     breakpointRef?: RefObject<Element> | undefined;
+    defaultValue?: boolean | undefined;
+    themeProp?: "breakpoints" | "content-width" | undefined;
 }) => boolean;
 export default useBreakpoint;
 //# sourceMappingURL=useBreakpoint.d.ts.map

package/lib/hooks/useBreakpoint.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAC;AAM1E;;;;;GAKG;AACH,QAAA,MAAM,aAAa,eACL,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI~~,YACnC~~;~~IAAE~~,~~YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,~~UAAU,OAAO,CAAC,GAAG,SAAS,~~CAAA;CAAE,YAiEpF,~~CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAC;AAM1E;;;;;GAKG;AACH,QAAA,MAAM,aAAa,eACL,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;oBAM1B,UAAU,OAAO,CAAC,GAAG,SAAS;;;aAoEjD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/hooks/useBreakpoint.js CHANGED Viewed

@@ -7,29 +7,26 @@ import useTheme from './useTheme';
  * @param options
  * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.
  */
-const useBreakpoint = (breakpoint, options = {
-    defaultValue: false
-}) => {
-    const { base: { breakpoints } } = useTheme();
-    const breakpointVal = breakpoints[breakpoint];
-    const [matches, setMatches] = useState(windowIsAvailable
-        ? window.matchMedia(`(min-width: ${breakpointVal})`).matches
-        : !!options.defaultValue);
+const useBreakpoint = (breakpoint, { breakpointRef, defaultValue = false, themeProp = 'breakpoints' } = {}) => {
+    const { base: { breakpoints, 'content-width': contentWidth } } = useTheme();
+    const breakpointVal = themeProp === 'content-width' ? contentWidth[breakpoint] : breakpoints[breakpoint];
+    const [matches, setMatches] = useState(windowIsAvailable ? window.matchMedia(`(min-width: ${breakpointVal})`).matches : !!defaultValue);
     const onResize = useCallback((e) => {
         setMatches(e.matches);
     }, []);
     useLayoutEffect(() => {
         // Breakpoint handling for contained elements
-        if (options.breakpointRef && options.breakpointRef.current) {
+        if (breakpointRef && breakpointRef.current) {
             const observer = new ResizeObserver(entries => {
                 const matchesBreakpoint = entries.some(({ target, contentRect }) => {
-                    if (target !== options.breakpointRef?.current)
+                    if (target !== breakpointRef.current)
                         return;
-                    return contentRect.width >= parseFloat(breakpointVal) * 16;
+                    const fontSize = window.getComputedStyle(target)?.fontSize || '16';
+                    return contentRect.width >= parseFloat(breakpointVal) * parseFloat(fontSize);
                 });
                 setMatches(matchesBreakpoint);
             });
-            observer.observe(options.breakpointRef.current);
+            observer.observe(breakpointRef.current);
             return () => {
                 observer.disconnect();
             };
@@ -59,7 +56,7 @@ const useBreakpoint = (breakpoint, options = {
                 }
             };
         }
-    }, [options.breakpointRef?.current]);
+    }, [breakpointRef?.current]);
     return matches;
 };
 export default useBreakpoint;

package/lib/hooks/useBreakpoint.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEvD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CACpB,UAA4C,EAC5C,~~UAAsF;IACpF~~,YAAY,~~EAAE~~,KAAK~~;CACpB~~,~~EACD~~,EAAE;IACF,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,~~EACtB~~,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,aAAa,~~GAAG~~,WAAW,CAAC,UAAU,CAAC,CAAC;~~IAC9C~~,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,iBAAiB~~;QACf~~,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,eAAe,aAAa,GAAG,CAAC,CAAC,OAAO~~;QAC5D~~,CAAC,CAAC,CAAC,CAAC,~~OAAO,~~CAAC,YAAY,~~CAC3B~~,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAsB,EAAE,EAAE;QACtD,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,eAAe,CAAC,GAAG,EAAE;QACnB,6CAA6C;QAC7C,IAAI,~~OAAO,CAAC,~~aAAa,IAAI,~~OAAO,CAAC,~~aAAa,CAAC,OAAO,EAAE;~~YAC1D~~,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;gBAC5C,MAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE;oBACjE,IAAI,MAAM,KAAK,~~OAAO~~,CAAC,~~aAAa,EAAE,~~OAAO;wBAAE,OAAO;~~oBAEtD~~,OAAO,WAAW,CAAC,KAAK,IAAI,UAAU,CAAC,aAAa,CAAC,GAAG,~~EAAE~~,CAAC;~~gBAC7D~~,CAAC,CAAC,CAAC;gBAEH,UAAU,CAAC,iBAAiB,CAAC,CAAC;YAChC,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,OAAO,CAAC,~~OAAO,CAAC,~~aAAa,CAAC,OAAO,CAAC,CAAC;~~YAEhD~~,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,UAAU,EAAE,CAAC;YACxB,CAAC,CAAC;SACH;QACD,mCAAmC;QACnC,IAAI,iBAAiB,EAAE;YACrB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,aAAa,GAAG,CAAC,CAAC;YACtE,MAAM,mBAAmB,GAAG,kBAAkB,IAAI,UAAU,CAAC;YAC7D,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;gBAClC,UAAU,CAAC,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,CAAC;YAC/D,CAAC,EAAE,GAAG,CAAC,CAAC;YAER,iEAAiE;YACjE,IAAI,mBAAmB,EAAE;gBACvB,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;gBAChD,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;aAChC;iBAAM;gBACL,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;gBACjD,UAAU,CAAC,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,CAAC;aAC9D;YAED,OAAO,GAAG,EAAE;gBACV,iEAAiE;gBACjE,IAAI,mBAAmB;oBAAE,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;qBACvE;oBACH,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;iBACrD;YACH,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,~~OAAO,CAAC,~~aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;~~IAErC~~,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useState, useLayoutEffect, useCallback, RefObject } from 'react';\n\nimport { windowIsAvailable, debounce } from '../utils';\n\nimport useTheme from './useTheme';\n\n/*\n @example const breakpointActive = useBreakpoint(breakpoint);\n * @param breakpoint The string indicator for the breakpoint that should be checked for validity.\n * @param options\n * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.\n /\nconst useBreakpoint = (\n breakpoint: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl',\n ~~options:~~ { defaultValue?: ~~boolean;~~ breakpointRef?: RefObject<Element> \| undefined ~~} = {\~~n defaultValue: ~~false\~~n }\n) => {\n const {\n base: { breakpoints }\n } = useTheme();\n const breakpointVal = breakpoints[breakpoint];\n const [matches, setMatches] = useState(\n windowIsAvailable\n ? window.matchMedia(`(min-width: ${breakpointVal})`).matches\n : !!~~options.~~defaultValue\n );\n\n const onResize = useCallback((e: MediaQueryListEvent) => {\n setMatches(e.matches);\n }, []);\n\n useLayoutEffect(() => {\n // Breakpoint handling for contained elements\n if (~~options.~~breakpointRef && ~~options.~~breakpointRef.current) {\n const observer = new ResizeObserver(entries => {\n const matchesBreakpoint = entries.some(({ target, contentRect }) => {\n if (target !== ~~options~~.~~breakpointRef?.~~current) return;\n\n return contentRect.width >= parseFloat(breakpointVal) 16;\n });\n\n setMatches(matchesBreakpoint);\n });\n\n observer.observe(~~options.~~breakpointRef.current);\n\n return () => {\n observer.disconnect();\n };\n }\n // Breakpoint handling for viewport\n if (windowIsAvailable) {\n const mediaMatch = window.matchMedia(`(min-width: ${breakpointVal})`);\n const mediaMatchAvailable = 'addEventListener' in mediaMatch;\n const resizeHandler = debounce(() => {\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }, 100);\n\n // Need to check useMatchMedia in order to support Enzyme testing\n if (mediaMatchAvailable) {\n mediaMatch.addEventListener('change', onResize);\n setMatches(mediaMatch.matches);\n } else {\n window.addEventListener('resize', resizeHandler);\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }\n\n return () => {\n // Need to check useMatchMedia in order to support Enzyme testing\n if (mediaMatchAvailable) mediaMatch.removeEventListener('change', onResize);\n else {\n window.removeEventListener('resize', resizeHandler);\n }\n };\n }\n }, [~~options.~~breakpointRef?.current]);\n\n return matches;\n};\n\nexport default useBreakpoint;\n"]}
1	+ {"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useLayoutEffect, useCallback, RefObject } from 'react';\n\nimport { windowIsAvailable, debounce } from '../utils';\n\nimport useTheme from './useTheme';\n\n/*\n @example const breakpointActive = useBreakpoint(breakpoint);\n * @param breakpoint The string indicator for the breakpoint that should be checked for validity.\n * @param options\n * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.\n /\nconst useBreakpoint = (\n breakpoint: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl',\n {\n breakpointRef,\n defaultValue = false,\n themeProp = 'breakpoints'\n }: {\n breakpointRef?: RefObject<Element> \| undefined;\n defaultValue?: boolean;\n themeProp?: 'breakpoints' \| 'content-width';\n } = {}\n) => {\n const {\n base: { breakpoints, 'content-width': contentWidth }\n } = useTheme();\n const breakpointVal =\n themeProp === 'content-width' ? contentWidth[breakpoint] : breakpoints[breakpoint];\n\n const [matches, setMatches] = useState(\n windowIsAvailable ? window.matchMedia(`(min-width: ${breakpointVal})`).matches : !!defaultValue\n );\n\n const onResize = useCallback((e: MediaQueryListEvent) => {\n setMatches(e.matches);\n }, []);\n\n useLayoutEffect(() => {\n // Breakpoint handling for contained elements\n if (breakpointRef && breakpointRef.current) {\n const observer = new ResizeObserver(entries => {\n const matchesBreakpoint = entries.some(({ target, contentRect }) => {\n if (target !== breakpointRef.current) return;\n\n const fontSize = window.getComputedStyle(target)?.fontSize \|\| '16';\n\n return contentRect.width >= parseFloat(breakpointVal) parseFloat(fontSize);\n });\n\n setMatches(matchesBreakpoint);\n });\n\n observer.observe(breakpointRef.current);\n\n return () => {\n observer.disconnect();\n };\n }\n // Breakpoint handling for viewport\n if (windowIsAvailable) {\n const mediaMatch = window.matchMedia(`(min-width: ${breakpointVal})`);\n const mediaMatchAvailable = 'addEventListener' in mediaMatch;\n const resizeHandler = debounce(() => {\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }, 100);\n\n // Need to check useMatchMedia in order to support Enzyme testing\n if (mediaMatchAvailable) {\n mediaMatch.addEventListener('change', onResize);\n setMatches(mediaMatch.matches);\n } else {\n window.addEventListener('resize', resizeHandler);\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }\n\n return () => {\n // Need to check useMatchMedia in order to support Enzyme testing\n if (mediaMatchAvailable) mediaMatch.removeEventListener('change', onResize);\n else {\n window.removeEventListener('resize', resizeHandler);\n }\n };\n }\n }, [breakpointRef?.current]);\n\n return matches;\n};\n\nexport default useBreakpoint;\n"]}

package/lib/hooks/useConfiguration.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import '../init';
 /**
  * @example const configuration = useConfiguration();
  * @returns configuration:: The configuration context object including all of the properties that can be set on the Configuration component.

package/lib/hooks/useConfiguration.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useConfiguration.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfiguration.ts"],"names":[],"mappings":"~~AAIA~~;;;GAGG;AACH,QAAA,MAAM,gBAAgB,~~qFAAyC~~,CAAC;~~AAEhE~~,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"useConfiguration.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfiguration.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,CAAC;AAIjB;;;GAGG;AACH,QAAA,MAAM,gBAAgB,qFAMrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/hooks/useConfiguration.js CHANGED Viewed

@@ -1,9 +1,16 @@
 import { useContext } from 'react';
-import { ConfigurationContext } from '../components/Configuration';
+import '../init';
+import { windowIsAvailable } from '../utils';
+import { ConfigurationContext } from '../components/Configuration/Configuration';
 /**
  * @example const configuration = useConfiguration();
  * @returns configuration:: The configuration context object including all of the properties that can be set on the Configuration component.
  */
-const useConfiguration = () => useContext(ConfigurationContext);
+const useConfiguration = () => {
+    const context = windowIsAvailable
+        ? window.cosmos.configurationContext ?? ConfigurationContext
+        : ConfigurationContext;
+    return useContext(context);
+};
 export default useConfiguration;
 //# sourceMappingURL=useConfiguration.js.map

package/lib/hooks/useConfiguration.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useConfiguration.js","sourceRoot":"","sources":["../../src/hooks/useConfiguration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,~~6BAA6B~~,CAAC;~~AAEnE~~;;;GAGG;AACH,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,~~UAAU~~,CAAC,oBAAoB,CAAC,CAAC;~~AAEhE~~,eAAe,gBAAgB,CAAC","sourcesContent":["import { useContext } from 'react';\n\nimport { ConfigurationContext } from '../components/Configuration';\n\n/*\n @example const configuration = useConfiguration();\n * @returns configuration:: The configuration context object including all of the properties that can be set on the Configuration component.\n */\nconst useConfiguration = () => useContext(~~ConfigurationContext~~);\n\nexport default useConfiguration;\n"]}
1	+ {"version":3,"file":"useConfiguration.js","sourceRoot":"","sources":["../../src/hooks/useConfiguration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,SAAS,CAAC;AACjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEjF;;;GAGG;AACH,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,iBAAiB;QAC/B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,oBAAoB,IAAI,oBAAoB;QAC5D,CAAC,CAAC,oBAAoB,CAAC;IAEzB,OAAO,UAAU,CAAC,OAAO,CAAC,CAAC;AAC7B,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { useContext } from 'react';\n\nimport '../init';\nimport { windowIsAvailable } from '../utils';\nimport { ConfigurationContext } from '../components/Configuration/Configuration';\n\n/*\n @example const configuration = useConfiguration();\n * @returns configuration:: The configuration context object including all of the properties that can be set on the Configuration component.\n */\nconst useConfiguration = () => {\n const context = windowIsAvailable\n ? window.cosmos.configurationContext ?? ConfigurationContext\n : ConfigurationContext;\n\n return useContext(context);\n};\n\nexport default useConfiguration;\n"]}

package/lib/hooks/useDraggable.d.ts CHANGED Viewed

@@ -3,6 +3,6 @@ import { RefObject } from 'react';
  * @param draggableElementRef Reference to the element which is draggable.
  * @param dragHandleRef Reference to the handle element which allows to move draggableElementRef.
  */
-declare const useDraggable: (draggableElementRef: RefObject<HTMLElement>, dragHandleRef: RefObject<HTMLElement>) => void;
+declare const useDraggable: (draggableElementRef: RefObject<HTMLElement>, dragHandleRef: RefObject<HTMLElement>, enabled?: boolean) => void;
 export default useDraggable;
 //# sourceMappingURL=useDraggable.d.ts.map

package/lib/hooks/useDraggable.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,~~EAAE~~,MAAM,OAAO,CAAC;~~AAYvD~~;;;GAGG;AACH,QAAA,MAAM,YAAY,wBACK,UAAU,WAAW,CAAC,iBAC5B,UAAU,WAAW,CAAC,~~SA4DtC~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAU,MAAM,OAAO,CAAC;AAU/D;;;GAGG;AACH,QAAA,MAAM,YAAY,wBACK,UAAU,WAAW,CAAC,iBAC5B,UAAU,WAAW,CAAC,YAC5B,OAAO,SA+FjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useDraggable.js CHANGED Viewed

@@ -1,5 +1,4 @@
-import { useState, useEffect } from 'react';
-const initialDraggableElPosition = { x: 0, y: 0 };
+import { useState, useEffect, useRef } from 'react';
 const interactiveElementsTags = ['button', 'a', 'input', 'textarea', 'select', 'details'];
 const shouldIgnoreEvent = (event) => {
     return interactiveElementsTags.some(tag => event.target instanceof Element && event.target.tagName.toLowerCase() === tag);
@@ -8,18 +7,21 @@ const shouldIgnoreEvent = (event) => {
  * @param draggableElementRef Reference to the element which is draggable.
  * @param dragHandleRef Reference to the handle element which allows to move draggableElementRef.
  */
-const useDraggable = (draggableElementRef, dragHandleRef) => {
+const useDraggable = (draggableElementRef, dragHandleRef, enabled = true) => {
     const [dragging, setDragging] = useState(false);
+    const draggableElPosition = useRef({ x: 0, y: 0 });
     useEffect(() => {
+        if (!enabled)
+            return;
         const onMouseDown = (event) => {
             if (shouldIgnoreEvent(event))
                 return;
             setDragging(true);
             if (draggableElementRef.current) {
                 const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;
-                initialDraggableElPosition.x =
+                draggableElPosition.current.x =
                     clientX - draggableElementRef.current.getBoundingClientRect().left;
-                initialDraggableElPosition.y =
+                draggableElPosition.current.y =
                     clientY - draggableElementRef.current.getBoundingClientRect().top;
             }
         };
@@ -33,19 +35,41 @@ const useDraggable = (draggableElementRef, dragHandleRef) => {
                 current.removeEventListener('touchstart', onMouseDown);
             };
         }
-    }, [dragHandleRef?.current]);
+    }, [dragHandleRef.current, enabled]);
     useEffect(() => {
+        const onWindowResize = () => {
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+            if (draggableElementRef.current) {
+                const limitX = draggableElementRef.current.offsetWidth - windowWidth;
+                const limitY = draggableElementRef.current.offsetHeight - windowHeight;
+                const positionX = draggableElementRef.current.getBoundingClientRect().left;
+                const positionY = draggableElementRef.current.getBoundingClientRect().top;
+                const horizontal = Math.min(Math.max(positionX, limitX), 0);
+                const vertical = Math.min(Math.max(positionY, limitY), 0);
+                draggableElementRef.current.style.transform = `translate(${horizontal}px, ${vertical}px)`;
+            }
+        };
         const onMouseMove = (event) => {
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
             if (!dragging)
                 return;
-            if (draggableElementRef && draggableElementRef.current) {
+            if (draggableElementRef.current) {
                 const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;
-                draggableElementRef.current.style.transform = `translate(${clientX - draggableElementRef.current.offsetLeft - initialDraggableElPosition.x}px, ${clientY - draggableElementRef.current.offsetTop - initialDraggableElPosition.y}px)`;
+                const positionX = clientX - draggableElementRef.current.offsetLeft - draggableElPosition.current.x;
+                const positionY = clientY - draggableElementRef.current.offsetTop - draggableElPosition.current.y;
+                const limitX = draggableElementRef.current.offsetWidth - windowWidth;
+                const limitY = draggableElementRef.current.offsetHeight - windowHeight;
+                const horizontal = Math.min(Math.max(positionX, limitX), 0);
+                const vertical = Math.min(Math.max(positionY, limitY), 0);
+                draggableElementRef.current.style.transform = `translate(${horizontal}px, ${vertical}px)`;
             }
         };
         const onMouseUp = () => {
             setDragging(false);
         };
+        window.addEventListener('resize', onWindowResize);
         if (dragging) {
             document.addEventListener('mouseup', onMouseUp);
             document.addEventListener('touchend', onMouseUp);
@@ -58,6 +82,9 @@ const useDraggable = (draggableElementRef, dragHandleRef) => {
                 document.removeEventListener('touchmove', onMouseMove);
             };
         }
+        return () => {
+            window.removeEventListener('resize', onWindowResize);
+        };
     }, [dragging]);
 };
 export default useDraggable;

package/lib/hooks/useDraggable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDraggable.js","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAa,MAAM,~~OAAO~~,~~CAAC;AAEvD,~~MAAM,~~0BAA0B~~,~~GAAG,EAAE,~~CAAC~~,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC~~;~~AAElD~~,MAAM,uBAAuB,GAAG,CAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAE1F,MAAM,iBAAiB,GAAG,CAAC,KAA8B,EAAW,EAAE;IACpE,OAAO,uBAAuB,CAAC,IAAI,CACjC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,YAAY,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,CACrF,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,YAAY,GAAG,CACnB,mBAA2C,EAC3C,aAAqC,EACrC,EAAE;IACF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;~~IAEhD~~,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,CAAC,KAA8B,EAAQ,EAAE;YAC3D,IAAI,iBAAiB,CAAC,KAAK,CAAC;gBAAE,OAAO;YACrC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,IAAI,mBAAmB,CAAC,OAAO,EAAE;gBAC/B,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC3E,~~0BAA0B~~,CAAC,CAAC;~~oBAC1B~~,OAAO,GAAG,mBAAmB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAC;gBACrE,~~0BAA0B~~,CAAC,CAAC;~~oBAC1B~~,OAAO,GAAG,mBAAmB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;aACrE;QACH,CAAC,CAAC;QAEF,IAAI,aAAa,CAAC,OAAO,EAAE;YACzB,6FAA6F;YAC7F,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,CAAC;YAElC,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACnD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;YAEpD,OAAO,GAAG,EAAE;gBACV,OAAO,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;gBACtD,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;YACzD,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;~~IAE7B~~,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,CAAC,KAA8B,EAAQ,EAAE;YAC3D,IAAI,CAAC,QAAQ;gBAAE,OAAO;YACtB,IAAI,mBAAmB,~~IAAI,mBAAmB,~~CAAC,OAAO,EAAE;~~gBACtD~~,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC3E,mBAAmB,CAAC,OAAO,CAAC,~~KAAK~~,CAAC,SAAS,GAAG,~~aAC5C~~,OAAO,GAAG,mBAAmB,CAAC,OAAO,CAAC,~~UAAU~~,GAAG,~~0BAA0B~~,CAAC,~~CAChF,~~OAAO,~~OAAO~~,GAAG,mBAAmB,CAAC,OAAO,CAAC,SAAS,GAAG,~~0BAA0B~~,CAAC,CAAC,KAAK,CAAC;~~aAC5F~~;QACH,CAAC,CAAC;QAEF,MAAM,SAAS,GAAG,GAAS,EAAE;YAC3B,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC,CAAC;QAEF,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YAChD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;YACjD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACpD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YAEpD,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;gBACnD,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;gBACpD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;gBACvD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACzD,CAAC,CAAC;SACH;~~IACH~~,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AACjB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useState, useEffect, RefObject } from 'react';\n\nconst ~~initialDraggableElPosition = { x: 0, y: 0 };\n\nconst~~ interactiveElementsTags = ['button', 'a', 'input', 'textarea', 'select', 'details'];\n\nconst shouldIgnoreEvent = (event: MouseEvent \| TouchEvent): boolean => {\n return interactiveElementsTags.some(\n tag => event.target instanceof Element && event.target.tagName.toLowerCase() === tag\n );\n};\n\n/*\n @param draggableElementRef Reference to the element which is draggable.\n * @param dragHandleRef Reference to the handle element which allows to move draggableElementRef.\n */\nconst useDraggable = (\n draggableElementRef: RefObject<HTMLElement>,\n dragHandleRef: RefObject<HTMLElement>\n) => {\n const [dragging, setDragging] = useState(false);\n\n useEffect(() => {\n const onMouseDown = (event: MouseEvent \| TouchEvent): void => {\n if (shouldIgnoreEvent(event)) return;\n setDragging(true);\n if (draggableElementRef.current) {\n const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;\n ~~initialDraggableElPosition~~.x =\n clientX - draggableElementRef.current.getBoundingClientRect().left;\n ~~initialDraggableElPosition~~.y =\n clientY - draggableElementRef.current.getBoundingClientRect().top;\n }\n };\n\n if (dragHandleRef.current) {\n // Save the current value so we can properly remove event listener after the ref has changed.\n const { current } = dragHandleRef;\n\n current.addEventListener('mousedown', onMouseDown);\n current.addEventListener('touchstart', onMouseDown);\n\n return () => {\n current.removeEventListener('mousedown', onMouseDown);\n current.removeEventListener('touchstart', onMouseDown);\n };\n }\n }, [dragHandleRef?.current]);\n\n useEffect(() => {\n const onMouseMove = (event: MouseEvent \| TouchEvent): void => {\n if (!dragging) return;\n if (draggableElementRef ~~&& draggableElementRef~~.current) {\n const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;\n draggableElementRef.current.~~style~~.~~transform~~ = ~~`translate(${\~~n ~~clientX~~ - draggableElementRef.current.~~offsetLeft~~ - ~~initialDraggableElPosition~~.x\n ~~}px,~~ ~~${clientY~~ - draggableElementRef.current.~~offsetTop~~ - ~~initialDraggableElPosition~~.y}px)`;\n }\n };\n\n const onMouseUp = (): void => {\n setDragging(false);\n };\n\n if (dragging) {\n document.addEventListener('mouseup', onMouseUp);\n document.addEventListener('touchend', onMouseUp);\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('touchmove', onMouseMove);\n\n return () => {\n document.removeEventListener('mouseup', onMouseUp);\n document.removeEventListener('touchend', onMouseUp);\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('touchmove', onMouseMove);\n };\n }\n }, [dragging]);\n};\n\nexport default useDraggable;\n"]}
1	+ {"version":3,"file":"useDraggable.js","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, RefObject, useRef } from 'react';\n\nconst interactiveElementsTags = ['button', 'a', 'input', 'textarea', 'select', 'details'];\n\nconst shouldIgnoreEvent = (event: MouseEvent \| TouchEvent): boolean => {\n return interactiveElementsTags.some(\n tag => event.target instanceof Element && event.target.tagName.toLowerCase() === tag\n );\n};\n\n/*\n @param draggableElementRef Reference to the element which is draggable.\n * @param dragHandleRef Reference to the handle element which allows to move draggableElementRef.\n */\nconst useDraggable = (\n draggableElementRef: RefObject<HTMLElement>,\n dragHandleRef: RefObject<HTMLElement>,\n enabled: boolean = true\n) => {\n const [dragging, setDragging] = useState(false);\n const draggableElPosition = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!enabled) return;\n const onMouseDown = (event: MouseEvent \| TouchEvent): void => {\n if (shouldIgnoreEvent(event)) return;\n setDragging(true);\n if (draggableElementRef.current) {\n const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;\n draggableElPosition.current.x =\n clientX - draggableElementRef.current.getBoundingClientRect().left;\n draggableElPosition.current.y =\n clientY - draggableElementRef.current.getBoundingClientRect().top;\n }\n };\n\n if (dragHandleRef.current) {\n // Save the current value so we can properly remove event listener after the ref has changed.\n const { current } = dragHandleRef;\n\n current.addEventListener('mousedown', onMouseDown);\n current.addEventListener('touchstart', onMouseDown);\n\n return () => {\n current.removeEventListener('mousedown', onMouseDown);\n current.removeEventListener('touchstart', onMouseDown);\n };\n }\n }, [dragHandleRef.current, enabled]);\n\n useEffect(() => {\n const onWindowResize = () => {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n if (draggableElementRef.current) {\n const limitX = draggableElementRef.current.offsetWidth - windowWidth;\n const limitY = draggableElementRef.current.offsetHeight - windowHeight;\n\n const positionX = draggableElementRef.current.getBoundingClientRect().left;\n const positionY = draggableElementRef.current.getBoundingClientRect().top;\n\n const horizontal = Math.min(Math.max(positionX, limitX), 0);\n const vertical = Math.min(Math.max(positionY, limitY), 0);\n\n draggableElementRef.current.style.transform = `translate(${horizontal}px, ${vertical}px)`;\n }\n };\n\n const onMouseMove = (event: MouseEvent \| TouchEvent): void => {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n if (!dragging) return;\n if (draggableElementRef.current) {\n const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;\n const positionX =\n clientX - draggableElementRef.current.offsetLeft - draggableElPosition.current.x;\n const positionY =\n clientY - draggableElementRef.current.offsetTop - draggableElPosition.current.y;\n\n const limitX = draggableElementRef.current.offsetWidth - windowWidth;\n const limitY = draggableElementRef.current.offsetHeight - windowHeight;\n\n const horizontal = Math.min(Math.max(positionX, limitX), 0);\n const vertical = Math.min(Math.max(positionY, limitY), 0);\n\n draggableElementRef.current.style.transform = `translate(${horizontal}px, ${vertical}px)`;\n }\n };\n\n const onMouseUp = (): void => {\n setDragging(false);\n };\n\n window.addEventListener('resize', onWindowResize);\n\n if (dragging) {\n document.addEventListener('mouseup', onMouseUp);\n document.addEventListener('touchend', onMouseUp);\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('touchmove', onMouseMove);\n\n return () => {\n document.removeEventListener('mouseup', onMouseUp);\n document.removeEventListener('touchend', onMouseUp);\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('touchmove', onMouseMove);\n };\n }\n return () => {\n window.removeEventListener('resize', onWindowResize);\n };\n }, [dragging]);\n};\n\nexport default useDraggable;\n"]}

package/lib/hooks/useFocusWithin.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAuB,MAAM,OAAO,CAAC;~~AAM5E~~;;;;GAIG;AACH,QAAA,MAAM,cAAc,8GAEU,OAAO,wBAAwB,IAAI,kBAC9D,~~OA0FF~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAI5E;;;;GAIG;AACH,QAAA,MAAM,cAAc,8GAEU,OAAO,wBAAwB,IAAI,kBAC9D,OA8EF,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/hooks/useFocusWithin.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { normalizeElements } from '../utils';
-import useOuterEvent from './useOuterEvent';
 /** Hook for properly handling focus state of children components.
  * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });
  * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.
@@ -45,13 +44,6 @@ const useFocusWithin = (els, onFocusChange) => {
             focusedElRef.current = targetEl;
         }
     }, [hasFocus, onFocusChange]);
-    useOuterEvent('mouseup', els, useCallback(() => {
-        if (hasFocus) {
-            setFocus(false);
-            onFocusChange?.(false, focusedElRef.current);
-            focusedElRef.current = null;
-        }
-    }, [onFocusChange, hasFocus]));
     useEffect(() => {
         const elements = normalizeElements(els);
         elements.forEach(el => {

package/lib/hooks/useFocusWithin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAa,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C~~,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C~~;;;;GAIG;AACH,MAAM,cAAc,GAAG,CACrB,GAAuC,EACvC,aAA+D,EACtD,EAAE;IACX,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;IAC5C,MAAM,YAAY,GAAG,MAAM,EAAU,CAAC;IAEtC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,CAAC,OAAO,GAAG,GAAG,CAAC;IAErB,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,EAAE,aAAa,EAAc,EAAE,EAAE;QAChC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,QAAQ,GAAG,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAEnD,IAAI,aAAa,YAAY,IAAI,EAAE;YACjC,yDAAyD;YACzD,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;YACnE,IAAI,SAAS,EAAE;gBACb,6CAA6C;gBAC7C,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;gBACjC,OAAO;aACR;SACF;QAED,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACnC,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACrC,IACE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;gBAClB,OAAO,EAAE,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;YAC9C,CAAC,CAAC,EACF;gBACA,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAChB,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;gBAC7C,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;aAC7B;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,EAAE,aAAa,CAAC,CAC1B,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,EAAE,aAAa,EAAc,EAAE,EAAE;QAChC,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAEnC,IAAI,CAAC,QAAQ,EAAE;YACb,QAAQ,CAAC,IAAI,CAAC,CAAC;YACf,MAAM,QAAQ,GAAG,aAAkB,CAAC;YACpC,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YAChC,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC;SACjC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,aAAa,CAAC,CAC1B,CAAC;IAEF,~~aAAa,CACX,~~SAAS,~~EACT,GAAG,EACH,WAAW,~~CAAC,GAAG,EAAE;QACf,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;YAC7C,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;SAC7B;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAC9B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC;QAExC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YACpB,EAAE,EAAE,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YACzC,EAAE,EAAE,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBACpB,EAAE,EAAE,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;gBAC5C,EAAE,EAAE,mBAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC9C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAE3B,0CAA0C;IAC1C,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { useState, useEffect, RefObject, useCallback, useRef } from 'react';\n\nimport { normalizeElements } from '../utils';\n\~~nimport useOuterEvent from './useOuterEvent';\~~n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n els: (T \| null \| RefObject<T \| null>)[],\n onFocusChange?: (isFocused: boolean, element: T \| null) => void\n): boolean => {\n const [hasFocus, setFocus] = useState(false);\n const focusedElRef = useRef<T \| null>(null);\n const blurTimerRef = useRef<number>();\n\n const elsRef = useRef(els);\n elsRef.current = els;\n\n const onBlur = useCallback(\n ({ relatedTarget }: FocusEvent) => {\n if (!hasFocus) return;\n\n const elements = normalizeElements(elsRef.current);\n\n if (relatedTarget instanceof Node) {\n // changing focus to another relevant child doesn't count\n const focusedEl = elements.find(el => el?.contains(relatedTarget));\n if (focusedEl) {\n // ... just update the currently focused item\n focusedElRef.current = focusedEl;\n return;\n }\n }\n\n clearTimeout(blurTimerRef.current);\n blurTimerRef.current = setTimeout(() => {\n if (\n !elements.some(el => {\n return el?.contains(document.activeElement);\n })\n ) {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n }\n });\n },\n [hasFocus, onFocusChange]\n );\n\n const onFocus = useCallback(\n ({ currentTarget }: FocusEvent) => {\n clearTimeout(blurTimerRef.current);\n\n if (!hasFocus) {\n setFocus(true);\n const targetEl = currentTarget as T;\n onFocusChange?.(true, targetEl);\n focusedElRef.current = targetEl;\n }\n },\n [hasFocus, onFocusChange]\n );\n\n useOuterEvent(\n 'mouseup',\n els,\n useCallback(() => {\n if (hasFocus) {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n }\n }, [onFocusChange, hasFocus])\n );\n\n useEffect(() => {\n const elements = normalizeElements(els);\n\n elements.forEach(el => {\n el?.addEventListener('focusin', onFocus);\n el?.addEventListener('focusout', onBlur);\n });\n return () => {\n elements.forEach(el => {\n el?.removeEventListener('focusin', onFocus);\n el?.removeEventListener('focusout', onBlur);\n });\n };\n }, [els, onFocus, onBlur]);\n\n // Clear timeout when component un-mounts.\n useEffect(\n () => () => {\n clearTimeout(blurTimerRef.current);\n },\n []\n );\n\n return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}
1	+ {"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, RefObject, useCallback, useRef } from 'react';\n\nimport { normalizeElements } from '../utils';\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n els: (T \| null \| RefObject<T \| null>)[],\n onFocusChange?: (isFocused: boolean, element: T \| null) => void\n): boolean => {\n const [hasFocus, setFocus] = useState(false);\n const focusedElRef = useRef<T \| null>(null);\n const blurTimerRef = useRef<number>();\n\n const elsRef = useRef(els);\n elsRef.current = els;\n\n const onBlur = useCallback(\n ({ relatedTarget }: FocusEvent) => {\n if (!hasFocus) return;\n\n const elements = normalizeElements(elsRef.current);\n\n if (relatedTarget instanceof Node) {\n // changing focus to another relevant child doesn't count\n const focusedEl = elements.find(el => el?.contains(relatedTarget));\n if (focusedEl) {\n // ... just update the currently focused item\n focusedElRef.current = focusedEl;\n return;\n }\n }\n\n clearTimeout(blurTimerRef.current);\n blurTimerRef.current = setTimeout(() => {\n if (\n !elements.some(el => {\n return el?.contains(document.activeElement);\n })\n ) {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n }\n });\n },\n [hasFocus, onFocusChange]\n );\n\n const onFocus = useCallback(\n ({ currentTarget }: FocusEvent) => {\n clearTimeout(blurTimerRef.current);\n\n if (!hasFocus) {\n setFocus(true);\n const targetEl = currentTarget as T;\n onFocusChange?.(true, targetEl);\n focusedElRef.current = targetEl;\n }\n },\n [hasFocus, onFocusChange]\n );\n\n useEffect(() => {\n const elements = normalizeElements(els);\n\n elements.forEach(el => {\n el?.addEventListener('focusin', onFocus);\n el?.addEventListener('focusout', onBlur);\n });\n return () => {\n elements.forEach(el => {\n el?.removeEventListener('focusin', onFocus);\n el?.removeEventListener('focusout', onBlur);\n });\n };\n }, [els, onFocus, onBlur]);\n\n // Clear timeout when component un-mounts.\n useEffect(\n () => () => {\n clearTimeout(blurTimerRef.current);\n },\n []\n );\n\n return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}