npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.1.0 → 3.0.0-dev.10.0 - Mend

@pega/cosmos-react-core 3.0.0-dev.1.0 → 3.0.0-dev.10.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,OAAO,IAAI,mBAAmB,~~EAA6B~~,MAAM,uBAAuB,CAAC;~~AAClG~~,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default as useActiveDescendant, UseActiveDescendantConfig } from './useActiveDescendant';\nexport { default as useAfterInitialEffect } from './useAfterInitialEffect';\nexport { default as useArrows } from './useArrows';\nexport { default as useAutoResize } from './useAutoResize';\nexport { default as useBreakpoint } from './useBreakpoint';\nexport { default as useConfiguration } from './useConfiguration';\nexport { default as useConsolidatedRef } from './useConsolidatedRef';\nexport { default as useDirection } from './useDirection';\nexport { default as useDraggable } from './useDraggable';\nexport { default as useElement } from './useElement';\nexport { default as useFocusWithin } from './useFocusWithin';\nexport { default as useI18n } from './useI18n';\nexport { default as useItemIntersection } from './useItemIntersection';\nexport { default as useLongPress } from './useLongPress';\nexport { default as useOuterEvent } from './useOuterEvent';\nexport { default as useOverride } from './useOverride';\nexport { default as usePrevious } from './usePrevious';\nexport { default as useScrollStick } from './useScrollStick';\nexport { default as useScrollToggle } from './useScrollToggle';\nexport { default as useTheme } from './useTheme';\nexport { default as useTransitionState } from './useTransitionState';\nexport { default as useTriggerableEffect } from './useTriggerableEffect';\nexport { default as useTriggerableLayoutEffect } from './useTriggerableLayoutEffect';\nexport { default as useUID } from './useUID';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,mBAAmB,EAE9B,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export {\n default as useActiveDescendant,\n UseActiveDescendantConfig,\n useLazyDescendant\n} from './useActiveDescendant';\nexport { default as useAfterInitialEffect } from './useAfterInitialEffect';\nexport { default as useArrows } from './useArrows';\nexport { default as useAutoResize } from './useAutoResize';\nexport { default as useBreakpoint } from './useBreakpoint';\nexport { default as useConfiguration } from './useConfiguration';\nexport { default as useConsolidatedRef } from './useConsolidatedRef';\nexport { default as useDirection } from './useDirection';\nexport { default as useDraggable } from './useDraggable';\nexport { default as useElement } from './useElement';\nexport { default as useEscape } from './useEscape';\nexport { default as useEvent } from './useEvent';\nexport { default as useFocusTrap } from './useFocusTrap';\nexport { default as useFocusWithin } from './useFocusWithin';\nexport { default as useI18n } from './useI18n';\nexport { default as useInputFormatter } from './useInputFormatter';\nexport { default as useItemIntersection } from './useItemIntersection';\nexport { default as useLongPress } from './useLongPress';\nexport { default as useOS } from './useOS';\nexport { default as useOuterEvent } from './useOuterEvent';\nexport { default as useOverride } from './useOverride';\nexport { default as usePrevious } from './usePrevious';\nexport { default as useScrollStick } from './useScrollStick';\nexport { default as useScrollToggle } from './useScrollToggle';\nexport { default as useTheme } from './useTheme';\nexport { default as useTransitionState } from './useTransitionState';\nexport { default as useTriggerableEffect } from './useTriggerableEffect';\nexport { default as useTriggerableLayoutEffect } from './useTriggerableLayoutEffect';\nexport { default as useUID } from './useUID';\n"]}

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

@@ -47,5 +47,14 @@ declare const useActiveDescendant: ({ focusEl, scope, scopeSelector, selector, f
     activeDescendant: CurrentDescendant;
     descendants: Descendants;
 };
+export declare const useLazyDescendant: ({ loading, descendants, previousActiveDescendant, activeDescendant, focusReturnEl, setFocusReturnEl, scrollEl }: {
+    loading: boolean;
+    descendants: Descendants;
+    previousActiveDescendant: CurrentDescendant;
+    activeDescendant: CurrentDescendant;
+    focusReturnEl: UseActiveDescendantConfig['focusReturnEl'];
+    setFocusReturnEl: (el: HTMLElement | null | undefined) => void;
+    scrollEl?: HTMLElement | null | undefined;
+}) => void;
 export default useActiveDescendant;
 //# sourceMappingURL=useActiveDescendant.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useActiveDescendant.d.ts","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,cAAc,EAAuB,MAAM,OAAO,CAAC;AAIjF,MAAM,WAAW,yBAAyB;IACxC,4DAA4D;IAC5D,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,wCAAwC;IACxC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,qDAAqD;IACrD,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,mBAAmB,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,aAAK,iBAAiB,GAAG,WAAW,GAAG,SAAS,CAAC;AACjD,aAAK,WAAW,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC;AAExC,QAAA,MAAM,mBAAmB,6NAepB,yBAAyB;sBAGV,iBAAiB;iBACtB,WAAW;~~CA6OzB~~,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
1	+ {"version":3,"file":"useActiveDescendant.d.ts","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,cAAc,EAAuB,MAAM,OAAO,CAAC;AAIjF,MAAM,WAAW,yBAAyB;IACxC,4DAA4D;IAC5D,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,wCAAwC;IACxC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,qDAAqD;IACrD,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,mBAAmB,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,aAAK,iBAAiB,GAAG,WAAW,GAAG,SAAS,CAAC;AACjD,aAAK,WAAW,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC;AAExC,QAAA,MAAM,mBAAmB,6NAepB,yBAAyB;sBAGV,iBAAiB;iBACtB,WAAW;CAiPzB,CAAC;AAEF,eAAO,MAAM,iBAAiB;aASnB,OAAO;iBACH,WAAW;8BACE,iBAAiB;sBACzB,iBAAiB;mBACpB,yBAAyB,CAAC,eAAe,CAAC;2BAClC,WAAW,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI;;UAgC/D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/hooks/useActiveDescendant.js CHANGED Viewed

@@ -18,7 +18,12 @@ const useActiveDescendant = ({ focusEl, scope, scopeSelector, selector, focusDes
     useEffect(() => {
         if (!scope || !focusEl)
             return;
-        scope.setAttribute('data-active-scope', document.activeElement === focusEl ? 'true' : 'false');
+        const rootNode = focusEl.getRootNode();
+        let activeElement = rootNode.activeElement;
+        if (activeElement?.tagName === 'IFRAME') {
+            activeElement = activeElement.contentDocument?.activeElement;
+        }
+        scope.setAttribute('data-active-scope', activeElement === focusEl ? 'true' : 'false');
         const onFocus = () => {
             scope.setAttribute('data-active-scope', 'true');
         };
@@ -203,5 +208,34 @@ const useActiveDescendant = ({ focusEl, scope, scopeSelector, selector, focusDes
         descendants: descendants || null
     };
 };
+export const useLazyDescendant = ({ loading, descendants, previousActiveDescendant, activeDescendant, focusReturnEl, setFocusReturnEl, scrollEl }) => {
+    // Bump scroll & set return element when descendant focused in loading state.
+    useEffect(() => {
+        if (loading && descendants && descendants.length && activeDescendant) {
+            const descendantList = [...descendants];
+            const lastItem = descendantList.pop();
+            const lastId = lastItem?.id || undefined;
+            if (lastId === activeDescendant.id) {
+                if (scrollEl) {
+                    scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight;
+                }
+                if (focusReturnEl?.id !== activeDescendant.id) {
+                    // Set focus return to AD on 'nextTick', to avoid reset of AD on update
+                    setTimeout(() => {
+                        setFocusReturnEl(lastItem);
+                    }, 0);
+                }
+            }
+            // If not last item
+            else if (focusReturnEl?.id !== activeDescendant.id) {
+                // Set focus return to AD on 'nextTick' to avoid reset of AD on update
+                // Do not D.R.Y to avoid conflicting calls with immediately prior elements.
+                setTimeout(() => {
+                    setFocusReturnEl(activeDescendant);
+                }, 0);
+            }
+        }
+    }, [loading, descendants, previousActiveDescendant, activeDescendant, scrollEl, focusReturnEl]);
+};
 export default useActiveDescendant;
 //# sourceMappingURL=useActiveDescendant.js.map

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\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\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 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\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"]}

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

@@ -3,10 +3,11 @@ import { RefObject, DependencyList } from 'react';
  * @example useArrows(ref, { cycle, selector });
  * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)
  */
-declare const useArrows: (ref: RefObject<HTMLElement>, { cycle, selector, dir }?: {
+declare const useArrows: (ref: RefObject<HTMLElement>, { cycle, selector, dir, allowTabFocus }?: {
     cycle?: boolean | undefined;
     selector?: string | undefined;
     dir?: "up-down" | "left-right" | undefined;
+    allowTabFocus?: boolean | undefined;
 }, dependencies?: DependencyList) => void;
 export default useArrows;
 //# sourceMappingURL=useArrows.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useArrows.d.ts","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAW1E;;;GAGG;AACH,QAAA,MAAM,SAAS,QACR,UAAU,WAAW,CAAC~~;;;;yCAqG5B~~,CAAC;AAEF,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"useArrows.d.ts","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAW1E;;;GAGG;AACH,QAAA,MAAM,SAAS,QACR,UAAU,WAAW,CAAC;;;;;yCA2G5B,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/hooks/useArrows.js CHANGED Viewed

@@ -16,7 +16,7 @@ cycle = true,
 /** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */
 selector = focusable,
 /** Which keys are used to navigate through the list */
-dir = 'up-down' } = {},
+dir = 'up-down', allowTabFocus = true } = {},
 /**  Pass this prop in the internal dependencies when list is dynamic */
 dependencies = []) => {
     const [NextKey, PrevKey] = dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];
@@ -26,7 +26,8 @@ dependencies = []) => {
         setTimeout(() => {
             const focusableElements = Array.from(el.querySelectorAll(selector));
             if (focusableElements.length > 0) {
-                focusableElements[0].tabIndex = 0;
+                if (allowTabFocus)
+                    focusableElements[0].tabIndex = 0;
                 focusableElements.slice(1).forEach(item => {
                     if (item instanceof HTMLElement) {
                         const checked = item.checked;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useArrows.js","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAA6B,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,MAAM,SAAS,GAAG;;;;;CAKjB,CAAC;AAEF;;;GAGG;AACH,MAAM,SAAS,GAAG,CAChB,GAA2B,EAC3B;AACE,yKAAyK;AACzK,KAAK,GAAG,IAAI;AACZ,wPAAwP;AACxP,QAAQ,GAAG,SAAS;AACpB,uDAAuD;AACvD,GAAG,GAAG,SAAS,~~KAC2D~~,EAAE;~~AAC9E~~,wEAAwE;AACxE,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,GACtB,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE7E,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,EAAe,EAAE,EAAE;QAClB,kHAAkH;QAElH,uGAAuG;QACvG,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;YAEpE,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;~~gBAC/B~~,iBAAiB,CAAC,CAAC,CAAiB,CAAC,QAAQ,GAAG,CAAC,CAAC;~~gBACnD~~,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACxC,IAAI,IAAI,YAAY,WAAW,EAAE;wBAC/B,MAAM,OAAO,GAAI,IAAyB,CAAC,OAAO,CAAC;wBACnD,IAAI,CAAC,OAAO;4BAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;qBAClC;gBACH,CAAC,CAAC,CAAC;aACJ;QACH,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC,EACD,CAAC,QAAQ,EAAE,GAAG,YAAY,CAAC,CAC5B,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;YAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QAE1E,IAAI,CAAC,mBAAmB;YAAE,OAAO;QAEjC,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAC5D,CAAC,IAAI,EAAuB,EAAE,CAAC,IAAI,YAAY,WAAW,CAC3D,CAAC;QAEF,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC;QAElC,IAAI,CAAC,CAAC,QAAQ,YAAY,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,YAAY,UAAU,CAAC;YAAE,OAAO;QAEjF,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAA4B,CAAC,CAAC;QACtE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACjC,IAAI,WAAW,CAAC;QAEhB,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,QAAQ,KAAK,CAAC,CAAC,CAAC,EAAE;YAC9D,WAAW,GAAG,CAAC,CAAC;SACjB;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,QAAQ,KAAK,CAAC,CAAC,CAAC,EAAE;YACpE,WAAW,GAAG,OAAO,CAAC;SACvB;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YAC5B,aAAa,CAAC,EAAE,CAAC,CAAC;YAClB,OAAO;SACR;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YAC5B,IAAI,QAAQ,KAAK,OAAO,EAAE;gBACxB,IAAI,CAAC,KAAK;oBAAE,OAAO;gBACnB,WAAW,GAAG,CAAC,CAAC;aACjB;iBAAM;gBACL,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC;aAC5B;SACF;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YAC5B,IAAI,QAAQ,KAAK,CAAC,EAAE;gBAClB,IAAI,CAAC,KAAK;oBAAE,OAAO;gBACnB,WAAW,GAAG,OAAO,CAAC;aACvB;iBAAM;gBACL,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC;aAC5B;SACF;aAAM;YACL,OAAO;SACR;QAED,KAAK,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC,EACD,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,YAAY,CAAC,CAChD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,aAAa,CAAC,EAAE,CAAC,CAAC;QAClB,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAEzC,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAC9C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC;AACzD,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useEffect, useCallback, RefObject, DependencyList } from 'react';\n\nimport { documentIsAvailable } from '../utils';\n\nconst focusable = `\n a[href],\n button:enabled,\n input[type='checkbox']:enabled,\n input[type='radio']:enabled\n`;\n\n/*\n @example useArrows(ref, { cycle, selector });\n * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n /\nconst useArrows = (\n ref: RefObject<HTMLElement>,\n {\n /* If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements. /\n cycle = true,\n /* A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). /\n selector = focusable,\n /* Which keys are used to navigate through the list /\n dir = 'up-down'\n }: { cycle?: boolean; selector?: string; dir?: 'up-down' \| 'left-right' } = {},\n /* Pass this prop in the internal dependencies when list is dynamic */\n dependencies: DependencyList = []\n) => {\n const [NextKey, PrevKey] =\n dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];\n\n const setTabIndexes = useCallback(\n (el: HTMLElement) => {\n // don't set tabindex -1 for first element, or an element with a checked input inside of it to be able to focus it\n\n // 0 second timeout added because DOM needs to be up to date after list is updated before running query\n setTimeout(() => {\n const focusableElements = Array.from(el.querySelectorAll(selector));\n\n if (focusableElements.length > 0) {\n (focusableElements[0] as HTMLElement).tabIndex = 0;\n focusableElements.slice(1).forEach(item => {\n if (item instanceof HTMLElement) {\n const checked = (item as HTMLInputElement).checked;\n if (!checked) item.tabIndex = -1;\n }\n });\n }\n }, 0);\n },\n [selector, ...dependencies]\n );\n\n const listener = useCallback(\n (e: KeyboardEvent) => {\n if (['Home', 'End', NextKey, PrevKey].includes(e.key)) e.preventDefault();\n\n if (!documentIsAvailable) return;\n\n const el = ref.current;\n if (!el) return;\n\n const items = Array.from(el.querySelectorAll(selector)).filter(\n (item): item is HTMLElement => item instanceof HTMLElement\n );\n\n if (!items.length) return;\n\n const rootNode = el.getRootNode();\n\n if (!(rootNode instanceof Document) && !(rootNode instanceof ShadowRoot)) return;\n\n const focusIdx = items.indexOf(rootNode.activeElement as HTMLElement);\n const lastIdx = items.length - 1;\n let newFocusIdx;\n\n if (e.key === 'Home' \|\| (e.key === NextKey && focusIdx === -1)) {\n newFocusIdx = 0;\n } else if (e.key === 'End' \|\| (e.key === PrevKey && focusIdx === -1)) {\n newFocusIdx = lastIdx;\n } else if (e.key === 'Enter') {\n setTabIndexes(el);\n return;\n } else if (e.key === NextKey) {\n if (focusIdx === lastIdx) {\n if (!cycle) return;\n newFocusIdx = 0;\n } else {\n newFocusIdx = focusIdx + 1;\n }\n } else if (e.key === PrevKey) {\n if (focusIdx === 0) {\n if (!cycle) return;\n newFocusIdx = lastIdx;\n } else {\n newFocusIdx = focusIdx - 1;\n }\n } else {\n return;\n }\n\n items[newFocusIdx].focus();\n },\n [ref.current, cycle, selector, ...dependencies]\n );\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n setTabIndexes(el);\n el.addEventListener('keydown', listener);\n\n return () => {\n el.removeEventListener('keydown', listener);\n };\n }, [ref.current, selector, listener, ...dependencies]);\n};\n\nexport default useArrows;\n"]}
1	+ {"version":3,"file":"useArrows.js","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback, RefObject, DependencyList } from 'react';\n\nimport { documentIsAvailable } from '../utils';\n\nconst focusable = `\n a[href],\n button:enabled,\n input[type='checkbox']:enabled,\n input[type='radio']:enabled\n`;\n\n/*\n @example useArrows(ref, { cycle, selector });\n * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n /\nconst useArrows = (\n ref: RefObject<HTMLElement>,\n {\n /* If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements. /\n cycle = true,\n /* A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). /\n selector = focusable,\n /* Which keys are used to navigate through the list /\n dir = 'up-down',\n allowTabFocus = true\n }: {\n cycle?: boolean;\n selector?: string;\n dir?: 'up-down' \| 'left-right';\n allowTabFocus?: boolean;\n } = {},\n /* Pass this prop in the internal dependencies when list is dynamic */\n dependencies: DependencyList = []\n) => {\n const [NextKey, PrevKey] =\n dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];\n\n const setTabIndexes = useCallback(\n (el: HTMLElement) => {\n // don't set tabindex -1 for first element, or an element with a checked input inside of it to be able to focus it\n\n // 0 second timeout added because DOM needs to be up to date after list is updated before running query\n setTimeout(() => {\n const focusableElements = Array.from(el.querySelectorAll(selector));\n\n if (focusableElements.length > 0) {\n if (allowTabFocus) (focusableElements[0] as HTMLElement).tabIndex = 0;\n focusableElements.slice(1).forEach(item => {\n if (item instanceof HTMLElement) {\n const checked = (item as HTMLInputElement).checked;\n if (!checked) item.tabIndex = -1;\n }\n });\n }\n }, 0);\n },\n [selector, ...dependencies]\n );\n\n const listener = useCallback(\n (e: KeyboardEvent) => {\n if (['Home', 'End', NextKey, PrevKey].includes(e.key)) e.preventDefault();\n\n if (!documentIsAvailable) return;\n\n const el = ref.current;\n if (!el) return;\n\n const items = Array.from(el.querySelectorAll(selector)).filter(\n (item): item is HTMLElement => item instanceof HTMLElement\n );\n\n if (!items.length) return;\n\n const rootNode = el.getRootNode();\n\n if (!(rootNode instanceof Document) && !(rootNode instanceof ShadowRoot)) return;\n\n const focusIdx = items.indexOf(rootNode.activeElement as HTMLElement);\n const lastIdx = items.length - 1;\n let newFocusIdx;\n\n if (e.key === 'Home' \|\| (e.key === NextKey && focusIdx === -1)) {\n newFocusIdx = 0;\n } else if (e.key === 'End' \|\| (e.key === PrevKey && focusIdx === -1)) {\n newFocusIdx = lastIdx;\n } else if (e.key === 'Enter') {\n setTabIndexes(el);\n return;\n } else if (e.key === NextKey) {\n if (focusIdx === lastIdx) {\n if (!cycle) return;\n newFocusIdx = 0;\n } else {\n newFocusIdx = focusIdx + 1;\n }\n } else if (e.key === PrevKey) {\n if (focusIdx === 0) {\n if (!cycle) return;\n newFocusIdx = lastIdx;\n } else {\n newFocusIdx = focusIdx - 1;\n }\n } else {\n return;\n }\n\n items[newFocusIdx].focus();\n },\n [ref.current, cycle, selector, ...dependencies]\n );\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n setTabIndexes(el);\n el.addEventListener('keydown', listener);\n\n return () => {\n el.removeEventListener('keydown', listener);\n };\n }, [ref.current, selector, listener, ...dependencies]);\n};\n\nexport default useArrows;\n"]}

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

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { MutableRefObject } from 'react';
 /**
  * @example const [ref, resizeFunction] = useAutoResize();
  * maxHeight should be provided in pixels without units
@@ -7,6 +7,6 @@ import { RefObject } 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) => [RefObject<T>, () => void];
+declare const useAutoResize: <T extends HTMLElement = HTMLElement>(maxHeight?: number | undefined, minHeightProp?: number | undefined) => [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,~~SAAS~~,EAAE,MAAM,OAAO,CAAC;~~AAIpD~~;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa,~~oIAGK~~,IAAI,~~CA4B3B~~,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,kJAGmB,IAAI,CAsCzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/hooks/useAutoResize.js CHANGED Viewed

@@ -12,21 +12,32 @@ const useAutoResize = (maxHeight, minHeightProp) => {
     const element = useRef(null);
     const [minHeight, setMinHeight] = useState(minHeightProp || 0);
     const autoResize = () => {
+        let scrollHeightElement = element.current;
+        let iframe;
+        if (element.current?.tagName === 'IFRAME')
+            iframe = element.current;
+        scrollHeightElement =
+            element.current.contentDocument?.querySelector('body') ?? element.current;
         if (element.current) {
             let newMinHeight = minHeight;
             if (!minHeight) {
-                newMinHeight = element.current.scrollHeight;
+                newMinHeight = scrollHeightElement.scrollHeight;
                 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(element.current.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 = `${element.current.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,~~EAAa~~,MAAM,OAAO,CAAC;~~AAEpD~~,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC;;;;;;;GAOG;AACH,MAAM,aAAa,GAAG,CACpB,SAAkB,EAClB,aAAsB,~~EACM~~,EAAE;~~IAC9B~~,MAAM,OAAO,GAAG,MAAM,~~CAAI~~,IAAI,CAAC,CAAC;~~IAEhC~~,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC;IAE/D,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,IAAI,YAAY,GAAG,SAAS,CAAC;YAC7B,IAAI,CAAC,SAAS,EAAE;gBACd,YAAY,GAAG,~~OAAO~~,CAAC,~~OAAO,CAAC,~~YAAY,CAAC;~~gBAC5C~~,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,~~OAAO~~,CAAC,~~OAAO~~,CAAC,~~YAAY~~,~~EAAE~~,~~SAAS~~,CAAC,~~IAAI~~,CAAC;~~aACzF~~;iBAAM;gBACL,~~OAAO~~,CAAC,~~OAAO~~,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,~~OAAO~~,CAAC,~~OAAO,CAAC,~~YAAY,IAAI,CAAC;~~aACpE~~;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, ~~RefObject~~ } 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): [~~RefObject~~<T>, () => void] => {\n const element = useRef<T>(null);\n\n const [minHeight, setMinHeight] = useState(minHeightProp \|\| 0);\n\n const autoResize = () => {\n if (element.current) {\n let newMinHeight = minHeight;\n if (!minHeight) {\n newMinHeight = ~~element~~.~~current.~~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(~~element~~.~~current.~~scrollHeight, maxHeight)}px`;\n } else {\n ~~element~~.~~current~~.style.height = `${~~element~~.~~current.~~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,EAAE,OAAO,KAAK,QAAQ;YACvC,MAAM,GAAG,OAAO,CAAC,OAA2C,CAAC;QAC/D,mBAAmB;YAChB,OAAO,CAAC,OAA4C,CAAC,eAAe,EAAE,aAAa,CAClF,MAAM,CACP,IAAK,OAAO,CAAC,OAAuB,CAAC;QACxC,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?.tagName === 'IFRAME')\n iframe = element.current as HTMLElement as HTMLIFrameElement;\n scrollHeightElement =\n (element.current as HTMLElement as HTMLIFrameElement).contentDocument?.querySelector(\n 'body'\n ) ?? (element.current as HTMLElement);\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/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,EAAE,MAAM,OAAO,CAAC;AAYvD;;;GAGG;AACH,QAAA,MAAM,YAAY,wBACK,UAAU,WAAW,CAAC,iBAC5B,UAAU,WAAW,CAAC,YAC5B,OAAO,SA6DjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useDraggable.js CHANGED Viewed

@@ -8,9 +8,11 @@ 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);
     useEffect(() => {
+        if (!enabled)
+            return;
         const onMouseDown = (event) => {
             if (shouldIgnoreEvent(event))
                 return;
@@ -33,7 +35,7 @@ const useDraggable = (draggableElementRef, dragHandleRef) => {
                 current.removeEventListener('touchstart', onMouseDown);
             };
         }
-    }, [dragHandleRef?.current]);
+    }, [dragHandleRef.current, enabled]);
     useEffect(() => {
         const onMouseMove = (event) => {
             if (!dragging)

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 } 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 enabled: boolean = true\n) => {\n const [dragging, setDragging] = useState(false);\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 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, enabled]);\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"]}

package/lib/hooks/useEscape.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { DependencyList, RefObject } from 'react';
+/**
+ * @example useEscape((event) => { do something });
+ * @param cb The function that should be executed on keydown keyevent.
+ * @param target To which esc event to be attached - Defaults to document
+ * @param dependencies List of dependencies
+ */
+declare const useEscape: (cb: (e: KeyboardEvent) => void, target?: HTMLElement | RefObject<HTMLElement> | Document | null, dependencies?: DependencyList) => void;
+export default useEscape;
+//# sourceMappingURL=useEscape.d.ts.map

package/lib/hooks/useEscape.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useEscape.d.ts","sourceRoot":"","sources":["../../src/hooks/useEscape.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAI/D;;;;;GAKG;AAEH,QAAA,MAAM,SAAS,WACL,aAAa,KAAK,IAAI,WACtB,WAAW,GAAG,UAAU,WAAW,CAAC,GAAG,QAAQ,GAAG,IAAI,wCAW/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/hooks/useEscape.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import useEvent from './useEvent';
+/**
+ * @example useEscape((event) => { do something });
+ * @param cb The function that should be executed on keydown keyevent.
+ * @param target To which esc event to be attached - Defaults to document
+ * @param dependencies List of dependencies
+ */
+const useEscape = (cb, target = document, dependencies = []) => {
+    const onKeydown = useCallback((e) => {
+        if (e.key === 'Escape')
+            cb(e);
+    }, [cb, ...dependencies]);
+    useEvent('keydown', onKeydown, { target });
+};
+export default useEscape;
+//# sourceMappingURL=useEscape.js.map

package/lib/hooks/useEscape.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useEscape.js","sourceRoot":"","sources":["../../src/hooks/useEscape.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,WAAW,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AAEH,MAAM,SAAS,GAAG,CAChB,EAA8B,EAC9B,SAAiE,QAAQ,EACzE,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,EAAE,EAAE,GAAG,YAAY,CAAC,CACtB,CAAC;IAEF,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { DependencyList, RefObject, useCallback } from 'react';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useEscape((event) => { do something });\n * @param cb The function that should be executed on keydown keyevent.\n * @param target To which esc event to be attached - Defaults to document\n * @param dependencies List of dependencies\n */\n\nconst useEscape = (\n cb: (e: KeyboardEvent) => void,\n target: HTMLElement | RefObject<HTMLElement> | Document | null = document,\n dependencies: DependencyList = []\n) => {\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') cb(e);\n },\n [cb, ...dependencies]\n );\n\n useEvent('keydown', onKeydown, { target });\n};\n\nexport default useEscape;\n"]}

package/lib/hooks/useEvent.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { DependencyList, RefObject } from 'react';
+declare type EventMapForTarget<Target extends EventTarget> = Target extends HTMLElement ? HTMLElementEventMap : Target extends SVGElement ? SVGElementEventMap : Target extends Document ? DocumentEventMap : Target extends Window ? WindowEventMap : {
+    [eventType: string]: Event;
+};
+declare type EventNamesForTarget<T extends EventTarget> = keyof EventMapForTarget<T> & string;
+/**
+ * @example useEvent('keydown', (event) => { do something });
+ * @param cb The function that should be executed on keydown keyevent.
+ * @param options
+ */
+declare function useEvent<Target extends Document, EventName extends EventNamesForTarget<Target>>(eventName: EventName, cb: (e: EventMapForTarget<Target>[EventName]) => void, opts?: {
+    target?: undefined;
+    eventOptions?: AddEventListenerOptions | boolean;
+    dependencies: DependencyList;
+}): void;
+declare function useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(eventName: EventName, cb: (e: EventMapForTarget<Target>[EventName]) => void, opts: {
+    target: Target | RefObject<Target> | null;
+    eventOptions?: AddEventListenerOptions | boolean;
+    dependencies?: DependencyList;
+}): void;
+declare function useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target | Document>>(eventName: EventName, cb: (e: EventMapForTarget<Target | Document>[EventName]) => void, opts: {
+    target?: Target | RefObject<Target> | null | undefined;
+    eventOptions?: AddEventListenerOptions | boolean;
+    dependencies?: DependencyList;
+}): void;
+export default useEvent;
+//# sourceMappingURL=useEvent.d.ts.map

package/lib/hooks/useEvent.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useEvent.d.ts","sourceRoot":"","sources":["../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAK7D,aAAK,iBAAiB,CAAC,MAAM,SAAS,WAAW,IAAI,MAAM,SAAS,WAAW,GAC3E,mBAAmB,GACnB,MAAM,SAAS,UAAU,GACzB,kBAAkB,GAClB,MAAM,SAAS,QAAQ,GACvB,gBAAgB,GAChB,MAAM,SAAS,MAAM,GACrB,cAAc,GACd;IACE,CAAC,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B,CAAC;AACN,aAAK,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,MAAM,iBAAiB,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;AAEtF;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,MAAM,SAAS,QAAQ,EAAE,SAAS,SAAS,mBAAmB,CAAC,MAAM,CAAC,EACtF,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EACrD,IAAI,CAAC,EAAE;IACL,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,EAAE,cAAc,CAAC;CAC9B,GACA,IAAI,CAAC;AAER,iBAAS,QAAQ,CAAC,MAAM,SAAS,WAAW,EAAE,SAAS,SAAS,mBAAmB,CAAC,MAAM,CAAC,EACzF,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EACrD,IAAI,EAAE;IACJ,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B,GACA,IAAI,CAAC;AAER,iBAAS,QAAQ,CACf,MAAM,SAAS,WAAW,EAC1B,SAAS,SAAS,mBAAmB,CAAC,MAAM,GAAG,QAAQ,CAAC,EAExD,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EAChE,IAAI,EAAE;IACJ,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B,GACA,IAAI,CAAC;AA2BR,eAAe,QAAQ,CAAC"}

package/lib/hooks/useEvent.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { normalizeElements } from '../utils';
+function useEvent(eventName, cb, { target = document, eventOptions, dependencies = [] } = {}) {
+    useEffect(() => {
+        const [element] = normalizeElements([target]);
+        if (!element)
+            return;
+        element.addEventListener(eventName, cb, eventOptions);
+        return () => {
+            element.removeEventListener(eventName, cb, eventOptions);
+        };
+    }, [eventName, target, cb, eventOptions, ...dependencies]);
+}
+export default useEvent;
+//# sourceMappingURL=useEvent.js.map

package/lib/hooks/useEvent.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useEvent.js","sourceRoot":"","sources":["../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAsD7C,SAAS,QAAQ,CACf,SAAoB,EACpB,EAAqD,EACrD,EACE,MAAM,GAAG,QAA6B,EACtC,YAAY,EACZ,YAAY,GAAG,EAAE,KAKf,EAAE;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,OAAO,CAAC,GAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;QAC9C,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,EAAmB,EAAE,YAAY,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,EAAmB,EAAE,YAAY,CAAC,CAAC;QAC5E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC;AAC7D,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { DependencyList, RefObject, useEffect } from 'react';\n\nimport { normalizeElements } from '../utils';\n\n// Based on https://github.com/microsoft/TypeScript/issues/33047#issuecomment-704005614\ntype EventMapForTarget<Target extends EventTarget> = Target extends HTMLElement\n ? HTMLElementEventMap\n : Target extends SVGElement\n ? SVGElementEventMap\n : Target extends Document\n ? DocumentEventMap\n : Target extends Window\n ? WindowEventMap\n : {\n [eventType: string]: Event;\n };\ntype EventNamesForTarget<T extends EventTarget> = keyof EventMapForTarget<T> & string;\n\n/**\n * @example useEvent('keydown', (event) => { do something });\n * @param cb The function that should be executed on keydown keyevent.\n * @param options\n */\nfunction useEvent<Target extends Document, EventName extends EventNamesForTarget<Target>>(\n eventName: EventName,\n cb: (e: EventMapForTarget<Target>[EventName]) => void,\n opts?: {\n target?: undefined;\n eventOptions?: AddEventListenerOptions | boolean;\n dependencies: DependencyList;\n }\n): void;\n\nfunction useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(\n eventName: EventName,\n cb: (e: EventMapForTarget<Target>[EventName]) => void,\n opts: {\n target: Target | RefObject<Target> | null;\n eventOptions?: AddEventListenerOptions | boolean;\n dependencies?: DependencyList;\n }\n): void;\n\nfunction useEvent<\n Target extends EventTarget,\n EventName extends EventNamesForTarget<Target | Document>\n>(\n eventName: EventName,\n cb: (e: EventMapForTarget<Target | Document>[EventName]) => void,\n opts: {\n target?: Target | RefObject<Target> | null | undefined;\n eventOptions?: AddEventListenerOptions | boolean;\n dependencies?: DependencyList;\n }\n): void;\n\nfunction useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(\n eventName: EventName,\n cb: (e: EventMapForTarget<Target>[EventName]) => void,\n {\n target = document as unknown as Target,\n eventOptions,\n dependencies = []\n }: {\n target?: Target | RefObject<Target> | null;\n eventOptions?: AddEventListenerOptions | boolean;\n dependencies?: DependencyList;\n } = {}\n) {\n useEffect(() => {\n const [element] = normalizeElements([target]);\n if (!element) return;\n\n element.addEventListener(eventName, cb as EventListener, eventOptions);\n\n return () => {\n element.removeEventListener(eventName, cb as EventListener, eventOptions);\n };\n }, [eventName, target, cb, eventOptions, ...dependencies]);\n}\n\nexport default useEvent;\n"]}

package/lib/hooks/useFocusTrap.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { RefObject, DependencyList } from 'react';
+/**
+ * @example useFocusTrap(elementRef)
+ * @param elementRef ref of the element in which focus needs to be retained
+ * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true
+ * @param dependencies  list of variables or functions that will initiate this hook when they are updated.
+ */
+declare const useFocusTrap: (elementRef: RefObject<HTMLElement>, attachToDocument?: boolean, dependencies?: DependencyList) => void;
+export default useFocusTrap;
+//# sourceMappingURL=useFocusTrap.d.ts.map

package/lib/hooks/useFocusTrap.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAe,cAAc,EAAE,MAAM,OAAO,CAAC;AAM/D;;;;;GAKG;AACH,QAAA,MAAM,YAAY,eACJ,UAAU,WAAW,CAAC,qBAChB,OAAO,wCAyB1B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useFocusTrap.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+import { getFocusables } from '../utils';
+import useEvent from './useEvent';
+/**
+ * @example useFocusTrap(elementRef)
+ * @param elementRef ref of the element in which focus needs to be retained
+ * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true
+ * @param dependencies  list of variables or functions that will initiate this hook when they are updated.
+ */
+const useFocusTrap = (elementRef, attachToDocument = true, dependencies = []) => {
+    const onKeydown = useCallback((e) => {
+        if (e.key === 'Tab') {
+            const focusables = getFocusables(elementRef);
+            const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;
+            if (!e.shiftKey &&
+                (document.activeElement === elementRef.current || document.activeElement === lastFocusable)) {
+                firstFocusable?.focus();
+                e.preventDefault();
+            }
+            else if (e.shiftKey &&
+                (document.activeElement === elementRef.current || document.activeElement === firstFocusable)) {
+                lastFocusable?.focus();
+                e.preventDefault();
+            }
+        }
+    }, dependencies);
+    useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });
+};
+export default useFocusTrap;
+//# sourceMappingURL=useFocusTrap.js.map

package/lib/hooks/useFocusTrap.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useFocusTrap.js","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAkB,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CACnB,UAAkC,EAClC,mBAA4B,IAAI,EAChC,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE;QACjD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACnB,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;YAC7C,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC;YAEjF,IACE,CAAC,CAAC,CAAC,QAAQ;gBACX,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,EAC3F;gBACA,cAAc,EAAE,KAAK,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM,IACL,CAAC,CAAC,QAAQ;gBACV,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,cAAc,CAAC,EAC5F;gBACA,aAAa,EAAE,KAAK,EAAE,CAAC;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;SACF;IACH,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC;AACxF,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { RefObject, useCallback, DependencyList } from 'react';\n\nimport { getFocusables } from '../utils';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useFocusTrap(elementRef)\n * @param elementRef ref of the element in which focus needs to be retained\n * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true\n * @param dependencies list of variables or functions that will initiate this hook when they are updated.\n */\nconst useFocusTrap = (\n elementRef: RefObject<HTMLElement>,\n attachToDocument: boolean = true,\n dependencies: DependencyList = []\n) => {\n const onKeydown = useCallback((e: KeyboardEvent) => {\n if (e.key === 'Tab') {\n const focusables = getFocusables(elementRef);\n const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;\n\n if (\n !e.shiftKey &&\n (document.activeElement === elementRef.current || document.activeElement === lastFocusable)\n ) {\n firstFocusable?.focus();\n e.preventDefault();\n } else if (\n e.shiftKey &&\n (document.activeElement === elementRef.current || document.activeElement === firstFocusable)\n ) {\n lastFocusable?.focus();\n e.preventDefault();\n }\n }\n }, dependencies);\n\n useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });\n};\n\nexport default useFocusTrap;\n"]}