@mantine/hooks 7.0.0-alpha.9 → 7.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/use-callback-ref/use-callback-ref.js +8 -5
- package/cjs/use-callback-ref/use-callback-ref.js.map +1 -1
- package/cjs/use-click-outside/use-click-outside.js +19 -21
- package/cjs/use-click-outside/use-click-outside.js.map +1 -1
- package/cjs/use-clipboard/use-clipboard.js +22 -26
- package/cjs/use-clipboard/use-clipboard.js.map +1 -1
- package/cjs/use-color-scheme/use-color-scheme.js +1 -3
- package/cjs/use-color-scheme/use-color-scheme.js.map +1 -1
- package/cjs/use-counter/use-counter.js +25 -9
- package/cjs/use-counter/use-counter.js.map +1 -1
- package/cjs/use-debounced-callback/use-debounced-callback.js +7 -7
- package/cjs/use-debounced-callback/use-debounced-callback.js.map +1 -1
- package/cjs/use-debounced-state/use-debounced-state.js +18 -19
- package/cjs/use-debounced-state/use-debounced-state.js.map +1 -1
- package/cjs/use-debounced-value/use-debounced-value.js +24 -25
- package/cjs/use-debounced-value/use-debounced-value.js.map +1 -1
- package/cjs/use-did-update/use-did-update.js +14 -11
- package/cjs/use-did-update/use-did-update.js.map +1 -1
- package/cjs/use-disclosure/use-disclosure.js +24 -24
- package/cjs/use-disclosure/use-disclosure.js.map +1 -1
- package/cjs/use-document-title/use-document-title.js +5 -5
- package/cjs/use-document-title/use-document-title.js.map +1 -1
- package/cjs/use-document-visibility/use-document-visibility.js +7 -7
- package/cjs/use-document-visibility/use-document-visibility.js.map +1 -1
- package/cjs/use-event-listener/use-event-listener.js +12 -9
- package/cjs/use-event-listener/use-event-listener.js.map +1 -1
- package/cjs/use-eye-dropper/use-eye-dropper.js +15 -12
- package/cjs/use-eye-dropper/use-eye-dropper.js.map +1 -1
- package/cjs/use-favicon/use-favicon.js +25 -23
- package/cjs/use-favicon/use-favicon.js.map +1 -1
- package/cjs/use-focus-return/use-focus-return.js +25 -29
- package/cjs/use-focus-return/use-focus-return.js.map +1 -1
- package/cjs/use-focus-trap/create-aria-hider.js +36 -36
- package/cjs/use-focus-trap/create-aria-hider.js.map +1 -1
- package/cjs/use-focus-trap/scope-tab.js +15 -15
- package/cjs/use-focus-trap/scope-tab.js.map +1 -1
- package/cjs/use-focus-trap/tabbable.js +33 -35
- package/cjs/use-focus-trap/tabbable.js.map +1 -1
- package/cjs/use-focus-trap/use-focus-trap.js +67 -67
- package/cjs/use-focus-trap/use-focus-trap.js.map +1 -1
- package/cjs/use-focus-within/use-focus-within.js +40 -37
- package/cjs/use-focus-within/use-focus-within.js.map +1 -1
- package/cjs/use-force-update/use-force-update.js +3 -3
- package/cjs/use-force-update/use-force-update.js.map +1 -1
- package/cjs/use-fullscreen/use-fullscreen.js +79 -83
- package/cjs/use-fullscreen/use-fullscreen.js.map +1 -1
- package/cjs/use-hash/use-hash.js +16 -16
- package/cjs/use-hash/use-hash.js.map +1 -1
- package/cjs/use-headroom/use-headroom.js +23 -23
- package/cjs/use-headroom/use-headroom.js.map +1 -1
- package/cjs/use-hotkeys/parse-hotkey.js +64 -49
- package/cjs/use-hotkeys/parse-hotkey.js.map +1 -1
- package/cjs/use-hotkeys/use-hotkeys.js +21 -22
- package/cjs/use-hotkeys/use-hotkeys.js.map +1 -1
- package/cjs/use-hover/use-hover.js +17 -17
- package/cjs/use-hover/use-hover.js.map +1 -1
- package/cjs/use-id/use-id.js +12 -12
- package/cjs/use-id/use-id.js.map +1 -1
- package/cjs/use-id/use-react-id.js +3 -3
- package/cjs/use-id/use-react-id.js.map +1 -1
- package/cjs/use-idle/use-idle.js +42 -26
- package/cjs/use-idle/use-idle.js.map +1 -1
- package/cjs/use-input-state/use-input-state.js +18 -22
- package/cjs/use-input-state/use-input-state.js.map +1 -1
- package/cjs/use-intersection/use-intersection.js +20 -17
- package/cjs/use-intersection/use-intersection.js.map +1 -1
- package/cjs/use-interval/use-interval.js +27 -28
- package/cjs/use-interval/use-interval.js.map +1 -1
- package/cjs/use-isomorphic-effect/use-isomorphic-effect.js +1 -3
- package/cjs/use-isomorphic-effect/use-isomorphic-effect.js.map +1 -1
- package/cjs/use-list-state/use-list-state.js +76 -55
- package/cjs/use-list-state/use-list-state.js.map +1 -1
- package/cjs/use-local-storage/create-storage.js +79 -71
- package/cjs/use-local-storage/create-storage.js.map +1 -1
- package/cjs/use-local-storage/use-local-storage.js +1 -1
- package/cjs/use-local-storage/use-local-storage.js.map +1 -1
- package/cjs/use-logger/use-logger.js +8 -9
- package/cjs/use-logger/use-logger.js.map +1 -1
- package/cjs/use-media-query/use-media-query.js +28 -31
- package/cjs/use-media-query/use-media-query.js.map +1 -1
- package/cjs/use-merged-ref/use-merged-ref.js +9 -11
- package/cjs/use-merged-ref/use-merged-ref.js.map +1 -1
- package/cjs/use-mouse/use-mouse.js +46 -25
- package/cjs/use-mouse/use-mouse.js.map +1 -1
- package/cjs/use-move/use-move.js +87 -88
- package/cjs/use-move/use-move.js.map +1 -1
- package/cjs/use-network/use-network.js +51 -32
- package/cjs/use-network/use-network.js.map +1 -1
- package/cjs/use-os/use-os.js +30 -30
- package/cjs/use-os/use-os.js.map +1 -1
- package/cjs/use-page-leave/use-page-leave.js +4 -4
- package/cjs/use-page-leave/use-page-leave.js.map +1 -1
- package/cjs/use-pagination/use-pagination.js +63 -58
- package/cjs/use-pagination/use-pagination.js.map +1 -1
- package/cjs/use-previous/use-previous.js +5 -5
- package/cjs/use-previous/use-previous.js.map +1 -1
- package/cjs/use-queue/use-queue.js +24 -24
- package/cjs/use-queue/use-queue.js.map +1 -1
- package/cjs/use-reduced-motion/use-reduced-motion.js +1 -1
- package/cjs/use-reduced-motion/use-reduced-motion.js.map +1 -1
- package/cjs/use-resize-observer/use-resize-observer.js +39 -38
- package/cjs/use-resize-observer/use-resize-observer.js.map +1 -1
- package/cjs/use-scroll-into-view/use-scroll-into-view.js +78 -75
- package/cjs/use-scroll-into-view/use-scroll-into-view.js.map +1 -1
- package/cjs/use-scroll-into-view/utils/ease-in-out-quad.js +1 -1
- package/cjs/use-scroll-into-view/utils/ease-in-out-quad.js.map +1 -1
- package/cjs/use-scroll-into-view/utils/get-relative-position.js +53 -46
- package/cjs/use-scroll-into-view/utils/get-relative-position.js.map +1 -1
- package/cjs/use-scroll-into-view/utils/get-scroll-start.js +9 -10
- package/cjs/use-scroll-into-view/utils/get-scroll-start.js.map +1 -1
- package/cjs/use-scroll-into-view/utils/set-scroll-param.js +11 -14
- package/cjs/use-scroll-into-view/utils/set-scroll-param.js.map +1 -1
- package/cjs/use-session-storage/use-session-storage.js +1 -1
- package/cjs/use-session-storage/use-session-storage.js.map +1 -1
- package/cjs/use-set-state/use-set-state.js +22 -3
- package/cjs/use-set-state/use-set-state.js.map +1 -1
- package/cjs/use-shallow-effect/use-shallow-effect.js +22 -22
- package/cjs/use-shallow-effect/use-shallow-effect.js.map +1 -1
- package/cjs/use-text-selection/use-text-selection.js +12 -12
- package/cjs/use-text-selection/use-text-selection.js.map +1 -1
- package/cjs/use-timeout/use-timeout.js +22 -22
- package/cjs/use-timeout/use-timeout.js.map +1 -1
- package/cjs/use-toggle/use-toggle.js +6 -6
- package/cjs/use-toggle/use-toggle.js.map +1 -1
- package/cjs/use-uncontrolled/use-uncontrolled.js +18 -10
- package/cjs/use-uncontrolled/use-uncontrolled.js.map +1 -1
- package/cjs/use-validated-state/use-validated-state.js +17 -14
- package/cjs/use-validated-state/use-validated-state.js.map +1 -1
- package/cjs/use-viewport-size/use-viewport-size.js +12 -12
- package/cjs/use-viewport-size/use-viewport-size.js.map +1 -1
- package/cjs/use-window-event/use-window-event.js +4 -4
- package/cjs/use-window-event/use-window-event.js.map +1 -1
- package/cjs/use-window-scroll/use-window-scroll.js +17 -19
- package/cjs/use-window-scroll/use-window-scroll.js.map +1 -1
- package/cjs/utils/clamp/clamp.js +10 -1
- package/cjs/utils/clamp/clamp.js.map +1 -1
- package/cjs/utils/lower-first/lower-first.js +1 -1
- package/cjs/utils/lower-first/lower-first.js.map +1 -1
- package/cjs/utils/random-id/random-id.js +1 -1
- package/cjs/utils/random-id/random-id.js.map +1 -1
- package/cjs/utils/range/range.js +2 -2
- package/cjs/utils/range/range.js.map +1 -1
- package/cjs/utils/shallow-equal/shallow-equal.js +19 -19
- package/cjs/utils/shallow-equal/shallow-equal.js.map +1 -1
- package/cjs/utils/upper-first/upper-first.js +1 -1
- package/cjs/utils/upper-first/upper-first.js.map +1 -1
- package/esm/use-callback-ref/use-callback-ref.js +8 -5
- package/esm/use-callback-ref/use-callback-ref.js.map +1 -1
- package/esm/use-click-outside/use-click-outside.js +19 -21
- package/esm/use-click-outside/use-click-outside.js.map +1 -1
- package/esm/use-clipboard/use-clipboard.js +22 -26
- package/esm/use-clipboard/use-clipboard.js.map +1 -1
- package/esm/use-color-scheme/use-color-scheme.js +1 -3
- package/esm/use-color-scheme/use-color-scheme.js.map +1 -1
- package/esm/use-counter/use-counter.js +25 -9
- package/esm/use-counter/use-counter.js.map +1 -1
- package/esm/use-debounced-callback/use-debounced-callback.js +7 -7
- package/esm/use-debounced-callback/use-debounced-callback.js.map +1 -1
- package/esm/use-debounced-state/use-debounced-state.js +18 -19
- package/esm/use-debounced-state/use-debounced-state.js.map +1 -1
- package/esm/use-debounced-value/use-debounced-value.js +24 -25
- package/esm/use-debounced-value/use-debounced-value.js.map +1 -1
- package/esm/use-did-update/use-did-update.js +14 -11
- package/esm/use-did-update/use-did-update.js.map +1 -1
- package/esm/use-disclosure/use-disclosure.js +24 -24
- package/esm/use-disclosure/use-disclosure.js.map +1 -1
- package/esm/use-document-title/use-document-title.js +5 -5
- package/esm/use-document-title/use-document-title.js.map +1 -1
- package/esm/use-document-visibility/use-document-visibility.js +7 -7
- package/esm/use-document-visibility/use-document-visibility.js.map +1 -1
- package/esm/use-event-listener/use-event-listener.js +12 -9
- package/esm/use-event-listener/use-event-listener.js.map +1 -1
- package/esm/use-eye-dropper/use-eye-dropper.js +15 -12
- package/esm/use-eye-dropper/use-eye-dropper.js.map +1 -1
- package/esm/use-favicon/use-favicon.js +25 -23
- package/esm/use-favicon/use-favicon.js.map +1 -1
- package/esm/use-focus-return/use-focus-return.js +25 -29
- package/esm/use-focus-return/use-focus-return.js.map +1 -1
- package/esm/use-focus-trap/create-aria-hider.js +36 -36
- package/esm/use-focus-trap/create-aria-hider.js.map +1 -1
- package/esm/use-focus-trap/scope-tab.js +15 -15
- package/esm/use-focus-trap/scope-tab.js.map +1 -1
- package/esm/use-focus-trap/tabbable.js +33 -35
- package/esm/use-focus-trap/tabbable.js.map +1 -1
- package/esm/use-focus-trap/use-focus-trap.js +67 -67
- package/esm/use-focus-trap/use-focus-trap.js.map +1 -1
- package/esm/use-focus-within/use-focus-within.js +40 -37
- package/esm/use-focus-within/use-focus-within.js.map +1 -1
- package/esm/use-force-update/use-force-update.js +3 -3
- package/esm/use-force-update/use-force-update.js.map +1 -1
- package/esm/use-fullscreen/use-fullscreen.js +79 -83
- package/esm/use-fullscreen/use-fullscreen.js.map +1 -1
- package/esm/use-hash/use-hash.js +16 -16
- package/esm/use-hash/use-hash.js.map +1 -1
- package/esm/use-headroom/use-headroom.js +23 -23
- package/esm/use-headroom/use-headroom.js.map +1 -1
- package/esm/use-hotkeys/parse-hotkey.js +64 -49
- package/esm/use-hotkeys/parse-hotkey.js.map +1 -1
- package/esm/use-hotkeys/use-hotkeys.js +21 -22
- package/esm/use-hotkeys/use-hotkeys.js.map +1 -1
- package/esm/use-hover/use-hover.js +17 -17
- package/esm/use-hover/use-hover.js.map +1 -1
- package/esm/use-id/use-id.js +12 -12
- package/esm/use-id/use-id.js.map +1 -1
- package/esm/use-id/use-react-id.js +3 -3
- package/esm/use-id/use-react-id.js.map +1 -1
- package/esm/use-idle/use-idle.js +42 -26
- package/esm/use-idle/use-idle.js.map +1 -1
- package/esm/use-input-state/use-input-state.js +18 -22
- package/esm/use-input-state/use-input-state.js.map +1 -1
- package/esm/use-intersection/use-intersection.js +20 -17
- package/esm/use-intersection/use-intersection.js.map +1 -1
- package/esm/use-interval/use-interval.js +27 -28
- package/esm/use-interval/use-interval.js.map +1 -1
- package/esm/use-isomorphic-effect/use-isomorphic-effect.js +1 -3
- package/esm/use-isomorphic-effect/use-isomorphic-effect.js.map +1 -1
- package/esm/use-list-state/use-list-state.js +76 -55
- package/esm/use-list-state/use-list-state.js.map +1 -1
- package/esm/use-local-storage/create-storage.js +79 -71
- package/esm/use-local-storage/create-storage.js.map +1 -1
- package/esm/use-local-storage/use-local-storage.js +1 -1
- package/esm/use-local-storage/use-local-storage.js.map +1 -1
- package/esm/use-logger/use-logger.js +8 -9
- package/esm/use-logger/use-logger.js.map +1 -1
- package/esm/use-media-query/use-media-query.js +28 -31
- package/esm/use-media-query/use-media-query.js.map +1 -1
- package/esm/use-merged-ref/use-merged-ref.js +9 -11
- package/esm/use-merged-ref/use-merged-ref.js.map +1 -1
- package/esm/use-mouse/use-mouse.js +46 -25
- package/esm/use-mouse/use-mouse.js.map +1 -1
- package/esm/use-move/use-move.js +87 -88
- package/esm/use-move/use-move.js.map +1 -1
- package/esm/use-network/use-network.js +51 -32
- package/esm/use-network/use-network.js.map +1 -1
- package/esm/use-os/use-os.js +30 -30
- package/esm/use-os/use-os.js.map +1 -1
- package/esm/use-page-leave/use-page-leave.js +4 -4
- package/esm/use-page-leave/use-page-leave.js.map +1 -1
- package/esm/use-pagination/use-pagination.js +63 -58
- package/esm/use-pagination/use-pagination.js.map +1 -1
- package/esm/use-previous/use-previous.js +5 -5
- package/esm/use-previous/use-previous.js.map +1 -1
- package/esm/use-queue/use-queue.js +24 -24
- package/esm/use-queue/use-queue.js.map +1 -1
- package/esm/use-reduced-motion/use-reduced-motion.js +1 -1
- package/esm/use-reduced-motion/use-reduced-motion.js.map +1 -1
- package/esm/use-resize-observer/use-resize-observer.js +39 -38
- package/esm/use-resize-observer/use-resize-observer.js.map +1 -1
- package/esm/use-scroll-into-view/use-scroll-into-view.js +78 -75
- package/esm/use-scroll-into-view/use-scroll-into-view.js.map +1 -1
- package/esm/use-scroll-into-view/utils/ease-in-out-quad.js +1 -1
- package/esm/use-scroll-into-view/utils/ease-in-out-quad.js.map +1 -1
- package/esm/use-scroll-into-view/utils/get-relative-position.js +53 -46
- package/esm/use-scroll-into-view/utils/get-relative-position.js.map +1 -1
- package/esm/use-scroll-into-view/utils/get-scroll-start.js +9 -10
- package/esm/use-scroll-into-view/utils/get-scroll-start.js.map +1 -1
- package/esm/use-scroll-into-view/utils/set-scroll-param.js +11 -14
- package/esm/use-scroll-into-view/utils/set-scroll-param.js.map +1 -1
- package/esm/use-session-storage/use-session-storage.js +1 -1
- package/esm/use-session-storage/use-session-storage.js.map +1 -1
- package/esm/use-set-state/use-set-state.js +22 -3
- package/esm/use-set-state/use-set-state.js.map +1 -1
- package/esm/use-shallow-effect/use-shallow-effect.js +22 -22
- package/esm/use-shallow-effect/use-shallow-effect.js.map +1 -1
- package/esm/use-text-selection/use-text-selection.js +12 -12
- package/esm/use-text-selection/use-text-selection.js.map +1 -1
- package/esm/use-timeout/use-timeout.js +22 -22
- package/esm/use-timeout/use-timeout.js.map +1 -1
- package/esm/use-toggle/use-toggle.js +6 -6
- package/esm/use-toggle/use-toggle.js.map +1 -1
- package/esm/use-uncontrolled/use-uncontrolled.js +18 -10
- package/esm/use-uncontrolled/use-uncontrolled.js.map +1 -1
- package/esm/use-validated-state/use-validated-state.js +17 -14
- package/esm/use-validated-state/use-validated-state.js.map +1 -1
- package/esm/use-viewport-size/use-viewport-size.js +12 -12
- package/esm/use-viewport-size/use-viewport-size.js.map +1 -1
- package/esm/use-window-event/use-window-event.js +4 -4
- package/esm/use-window-event/use-window-event.js.map +1 -1
- package/esm/use-window-scroll/use-window-scroll.js +17 -19
- package/esm/use-window-scroll/use-window-scroll.js.map +1 -1
- package/esm/utils/clamp/clamp.js +10 -1
- package/esm/utils/clamp/clamp.js.map +1 -1
- package/esm/utils/lower-first/lower-first.js +1 -1
- package/esm/utils/lower-first/lower-first.js.map +1 -1
- package/esm/utils/random-id/random-id.js +1 -1
- package/esm/utils/random-id/random-id.js.map +1 -1
- package/esm/utils/range/range.js +2 -2
- package/esm/utils/range/range.js.map +1 -1
- package/esm/utils/shallow-equal/shallow-equal.js +19 -19
- package/esm/utils/shallow-equal/shallow-equal.js.map +1 -1
- package/esm/utils/upper-first/upper-first.js +1 -1
- package/esm/utils/upper-first/upper-first.js.map +1 -1
- package/lib/use-hover/use-hover.d.ts +1 -0
- package/lib/use-mouse/use-mouse.d.ts +1 -0
- package/lib/use-move/use-move.d.ts +2 -1
- package/lib/use-scroll-into-view/use-scroll-into-view.d.ts +1 -0
- package/lib/utils/clamp/clamp.d.ts +1 -1
- package/package.json +5 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-trap.js","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { FOCUS_SELECTOR, focusable, tabbable } from './tabbable';\nimport { scopeTab } from './scope-tab';\nimport { createAriaHider } from './create-aria-hider';\n\nexport function useFocusTrap(active = true): (instance: HTMLElement | null) => void {\n const ref = useRef<HTMLElement | null>();\n const restoreAria = useRef<Function | null>(null);\n\n const focusNode = (node: HTMLElement) => {\n let focusElement: HTMLElement | null = node.querySelector('[data-autofocus]');\n\n if (!focusElement) {\n const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR));\n focusElement = children.find(tabbable) || children.find(focusable) || null;\n if (!focusElement && focusable(node)) focusElement = node;\n }\n\n if (focusElement) {\n focusElement.focus({ preventScroll: true });\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n '[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node',\n node\n );\n }\n };\n\n const setRef = useCallback(\n (node: HTMLElement | null) => {\n if (!active) {\n return;\n }\n\n if (node === null) {\n if (restoreAria.current) {\n restoreAria.current();\n restoreAria.current = null;\n }\n return;\n }\n\n restoreAria.current = createAriaHider(node);\n if (ref.current === node) {\n return;\n }\n\n if (node) {\n // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (node.getRootNode()) {\n focusNode(node);\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('[@mantine/hooks/use-focus-trap] Ref node is not part of the dom', node);\n }\n });\n\n ref.current = node;\n } else {\n ref.current = null;\n }\n },\n [active]\n );\n\n useEffect(() => {\n if (!active) {\n return undefined;\n }\n\n ref.current && setTimeout(() => focusNode(ref.current!));\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && ref.current) {\n scopeTab(ref.current, event);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n\n if (restoreAria.current) {\n restoreAria.current();\n }\n };\n }, [active]);\n\n return setRef;\n}\n"],"names":["useRef","FOCUS_SELECTOR","tabbable","focusable","useCallback","createAriaHider","useEffect","scopeTab"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"use-focus-trap.js","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { FOCUS_SELECTOR, focusable, tabbable } from './tabbable';\nimport { scopeTab } from './scope-tab';\nimport { createAriaHider } from './create-aria-hider';\n\nexport function useFocusTrap(active = true): (instance: HTMLElement | null) => void {\n const ref = useRef<HTMLElement | null>();\n const restoreAria = useRef<Function | null>(null);\n\n const focusNode = (node: HTMLElement) => {\n let focusElement: HTMLElement | null = node.querySelector('[data-autofocus]');\n\n if (!focusElement) {\n const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR));\n focusElement = children.find(tabbable) || children.find(focusable) || null;\n if (!focusElement && focusable(node)) focusElement = node;\n }\n\n if (focusElement) {\n focusElement.focus({ preventScroll: true });\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n '[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node',\n node\n );\n }\n };\n\n const setRef = useCallback(\n (node: HTMLElement | null) => {\n if (!active) {\n return;\n }\n\n if (node === null) {\n if (restoreAria.current) {\n restoreAria.current();\n restoreAria.current = null;\n }\n return;\n }\n\n restoreAria.current = createAriaHider(node);\n if (ref.current === node) {\n return;\n }\n\n if (node) {\n // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (node.getRootNode()) {\n focusNode(node);\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('[@mantine/hooks/use-focus-trap] Ref node is not part of the dom', node);\n }\n });\n\n ref.current = node;\n } else {\n ref.current = null;\n }\n },\n [active]\n );\n\n useEffect(() => {\n if (!active) {\n return undefined;\n }\n\n ref.current && setTimeout(() => focusNode(ref.current!));\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && ref.current) {\n scopeTab(ref.current, event);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n\n if (restoreAria.current) {\n restoreAria.current();\n }\n };\n }, [active]);\n\n return setRef;\n}\n"],"names":["useRef","FOCUS_SELECTOR","tabbable","focusable","useCallback","createAriaHider","useEffect","scopeTab"],"mappings":"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"}
|
|
@@ -5,44 +5,47 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
|
|
7
7
|
function containsRelatedTarget(event) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
|
|
9
|
+
return event.currentTarget.contains(event.relatedTarget);
|
|
10
|
+
}
|
|
11
|
+
return false;
|
|
12
12
|
}
|
|
13
|
-
function useFocusWithin({
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
13
|
+
function useFocusWithin({
|
|
14
|
+
onBlur,
|
|
15
|
+
onFocus
|
|
16
|
+
} = {}) {
|
|
17
|
+
const ref = React.useRef();
|
|
18
|
+
const [focused, _setFocused] = React.useState(false);
|
|
19
|
+
const focusedRef = React.useRef(false);
|
|
20
|
+
const setFocused = (value) => {
|
|
21
|
+
_setFocused(value);
|
|
22
|
+
focusedRef.current = value;
|
|
23
|
+
};
|
|
24
|
+
const handleFocusIn = (event) => {
|
|
25
|
+
if (!focusedRef.current) {
|
|
26
|
+
setFocused(true);
|
|
27
|
+
onFocus == null ? void 0 : onFocus(event);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
const handleFocusOut = (event) => {
|
|
31
|
+
if (focusedRef.current && !containsRelatedTarget(event)) {
|
|
32
|
+
setFocused(false);
|
|
33
|
+
onBlur == null ? void 0 : onBlur(event);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
React.useEffect(() => {
|
|
37
|
+
if (ref.current) {
|
|
38
|
+
ref.current.addEventListener("focusin", handleFocusIn);
|
|
39
|
+
ref.current.addEventListener("focusout", handleFocusOut);
|
|
40
|
+
return () => {
|
|
41
|
+
var _a, _b;
|
|
42
|
+
(_a = ref.current) == null ? void 0 : _a.removeEventListener("focusin", handleFocusIn);
|
|
43
|
+
(_b = ref.current) == null ? void 0 : _b.removeEventListener("focusout", handleFocusOut);
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
return void 0;
|
|
47
|
+
}, [handleFocusIn, handleFocusOut]);
|
|
48
|
+
return { ref, focused };
|
|
46
49
|
}
|
|
47
50
|
|
|
48
51
|
exports.useFocusWithin = useFocusWithin;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-within.js","sources":["../../src/use-focus-within/use-focus-within.ts"],"sourcesContent":["import { useRef, useState, useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n onFocus?(event: FocusEvent): void;\n onBlur?(event: FocusEvent): void;\n}\n\nfunction containsRelatedTarget(event: FocusEvent) {\n if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {\n return event.currentTarget.contains(event.relatedTarget);\n }\n\n return false;\n}\n\nexport function useFocusWithin<T extends HTMLElement = any>({\n onBlur,\n onFocus,\n}: UseFocusWithinOptions = {}): { ref: React.MutableRefObject<T>; focused: boolean } {\n const ref = useRef<T>();\n const [focused, _setFocused] = useState(false);\n const focusedRef = useRef(false);\n const setFocused = (value: boolean) => {\n _setFocused(value);\n focusedRef.current = value;\n };\n\n const handleFocusIn = (event: FocusEvent) => {\n if (!focusedRef.current) {\n setFocused(true);\n onFocus?.(event);\n }\n };\n\n const handleFocusOut = (event: FocusEvent) => {\n if (focusedRef.current && !containsRelatedTarget(event)) {\n setFocused(false);\n onBlur?.(event);\n }\n };\n\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener('focusin', handleFocusIn);\n ref.current.addEventListener('focusout', handleFocusOut);\n\n return () => {\n ref.current?.removeEventListener('focusin', handleFocusIn);\n ref.current?.removeEventListener('focusout', handleFocusOut);\n };\n }\n\n return undefined;\n }, [handleFocusIn, handleFocusOut]);\n\n return { ref: ref as React.MutableRefObject<T>, focused };\n}\n"],"names":["useRef","useState","useEffect"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"use-focus-within.js","sources":["../../src/use-focus-within/use-focus-within.ts"],"sourcesContent":["import { useRef, useState, useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n onFocus?(event: FocusEvent): void;\n onBlur?(event: FocusEvent): void;\n}\n\nfunction containsRelatedTarget(event: FocusEvent) {\n if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {\n return event.currentTarget.contains(event.relatedTarget);\n }\n\n return false;\n}\n\nexport function useFocusWithin<T extends HTMLElement = any>({\n onBlur,\n onFocus,\n}: UseFocusWithinOptions = {}): { ref: React.MutableRefObject<T>; focused: boolean } {\n const ref = useRef<T>();\n const [focused, _setFocused] = useState(false);\n const focusedRef = useRef(false);\n const setFocused = (value: boolean) => {\n _setFocused(value);\n focusedRef.current = value;\n };\n\n const handleFocusIn = (event: FocusEvent) => {\n if (!focusedRef.current) {\n setFocused(true);\n onFocus?.(event);\n }\n };\n\n const handleFocusOut = (event: FocusEvent) => {\n if (focusedRef.current && !containsRelatedTarget(event)) {\n setFocused(false);\n onBlur?.(event);\n }\n };\n\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener('focusin', handleFocusIn);\n ref.current.addEventListener('focusout', handleFocusOut);\n\n return () => {\n ref.current?.removeEventListener('focusin', handleFocusIn);\n ref.current?.removeEventListener('focusout', handleFocusOut);\n };\n }\n\n return undefined;\n }, [handleFocusIn, handleFocusOut]);\n\n return { ref: ref as React.MutableRefObject<T>, focused };\n}\n"],"names":["useRef","useState","useEffect"],"mappings":";;;;;;AACA,SAAS,qBAAqB,CAAC,KAAK,EAAE;AACtC,EAAE,IAAI,KAAK,CAAC,aAAa,YAAY,WAAW,IAAI,KAAK,CAAC,aAAa,YAAY,WAAW,EAAE;AAChG,IAAI,OAAO,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;AAC7D,GAAG;AACH,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACM,SAAS,cAAc,CAAC;AAC/B,EAAE,MAAM;AACR,EAAE,OAAO;AACT,CAAC,GAAG,EAAE,EAAE;AACR,EAAE,MAAM,GAAG,GAAGA,YAAM,EAAE,CAAC;AACvB,EAAE,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;AACjD,EAAE,MAAM,UAAU,GAAGD,YAAM,CAAC,KAAK,CAAC,CAAC;AACnC,EAAE,MAAM,UAAU,GAAG,CAAC,KAAK,KAAK;AAChC,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;AACvB,IAAI,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;AAC/B,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACnC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;AAC7B,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;AACvB,MAAM,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAChD,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,cAAc,GAAG,CAAC,KAAK,KAAK;AACpC,IAAI,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE;AAC7D,MAAM,UAAU,CAAC,KAAK,CAAC,CAAC;AACxB,MAAM,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC9C,KAAK;AACL,GAAG,CAAC;AACJ,EAAEE,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC7D,MAAM,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAC/D,MAAM,OAAO,MAAM;AACnB,QAAQ,IAAI,EAAE,EAAE,EAAE,CAAC;AACnB,QAAQ,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC/F,QAAQ,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AACjG,OAAO,CAAC;AACR,KAAK;AACL,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,GAAG,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC;AACtC,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC;AAC1B;;;;"}
|
|
@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
|
|
7
|
-
const reducer = (value) => (value + 1) %
|
|
7
|
+
const reducer = (value) => (value + 1) % 1e6;
|
|
8
8
|
function useForceUpdate() {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
const [, update] = React.useReducer(reducer, 0);
|
|
10
|
+
return update;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
exports.useForceUpdate = useForceUpdate;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-force-update.js","sources":["../../src/use-force-update/use-force-update.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nconst reducer = (value: number) => (value + 1) % 1000000;\n\nexport function useForceUpdate(): () => void {\n const [, update] = useReducer(reducer, 0);\n return update;\n}\n"],"names":["useReducer"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"use-force-update.js","sources":["../../src/use-force-update/use-force-update.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nconst reducer = (value: number) => (value + 1) % 1000000;\n\nexport function useForceUpdate(): () => void {\n const [, update] = useReducer(reducer, 0);\n return update;\n}\n"],"names":["useReducer"],"mappings":";;;;;;AACA,MAAM,OAAO,GAAG,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC;AACtC,SAAS,cAAc,GAAG;AACjC,EAAE,MAAM,GAAG,MAAM,CAAC,GAAGA,gBAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;AAC5C,EAAE,OAAO,MAAM,CAAC;AAChB;;;;"}
|
|
@@ -2,99 +2,95 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib = require('tslib');
|
|
6
5
|
var React = require('react');
|
|
7
6
|
|
|
8
7
|
function getFullscreenElement() {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
_document.mozFullScreenElement ||
|
|
13
|
-
_document.msFullscreenElement;
|
|
14
|
-
return fullscreenElement;
|
|
8
|
+
const _document = window.document;
|
|
9
|
+
const fullscreenElement = _document.fullscreenElement || _document.webkitFullscreenElement || _document.mozFullScreenElement || _document.msFullscreenElement;
|
|
10
|
+
return fullscreenElement;
|
|
15
11
|
}
|
|
16
|
-
function exitFullscreen() {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return null;
|
|
28
|
-
});
|
|
12
|
+
async function exitFullscreen() {
|
|
13
|
+
const _document = window.document;
|
|
14
|
+
if (typeof _document.exitFullscreen === "function")
|
|
15
|
+
return _document.exitFullscreen();
|
|
16
|
+
if (typeof _document.msExitFullscreen === "function")
|
|
17
|
+
return _document.msExitFullscreen();
|
|
18
|
+
if (typeof _document.webkitExitFullscreen === "function")
|
|
19
|
+
return _document.webkitExitFullscreen();
|
|
20
|
+
if (typeof _document.mozCancelFullScreen === "function")
|
|
21
|
+
return _document.mozCancelFullScreen();
|
|
22
|
+
return null;
|
|
29
23
|
}
|
|
30
|
-
function enterFullScreen(element) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return (((_a = _element.requestFullscreen) === null || _a === void 0 ? void 0 : _a.call(_element)) ||
|
|
35
|
-
((_b = _element.msRequestFullscreen) === null || _b === void 0 ? void 0 : _b.call(_element)) ||
|
|
36
|
-
((_c = _element.webkitEnterFullscreen) === null || _c === void 0 ? void 0 : _c.call(_element)) ||
|
|
37
|
-
((_d = _element.webkitRequestFullscreen) === null || _d === void 0 ? void 0 : _d.call(_element)) ||
|
|
38
|
-
((_e = _element.mozRequestFullscreen) === null || _e === void 0 ? void 0 : _e.call(_element)));
|
|
39
|
-
});
|
|
24
|
+
async function enterFullScreen(element) {
|
|
25
|
+
var _a, _b, _c, _d, _e;
|
|
26
|
+
const _element = element;
|
|
27
|
+
return ((_a = _element.requestFullscreen) == null ? void 0 : _a.call(_element)) || ((_b = _element.msRequestFullscreen) == null ? void 0 : _b.call(_element)) || ((_c = _element.webkitEnterFullscreen) == null ? void 0 : _c.call(_element)) || ((_d = _element.webkitRequestFullscreen) == null ? void 0 : _d.call(_element)) || ((_e = _element.mozRequestFullscreen) == null ? void 0 : _e.call(_element));
|
|
40
28
|
}
|
|
41
|
-
const prefixes = [
|
|
42
|
-
function addEvents(element, {
|
|
29
|
+
const prefixes = ["", "webkit", "moz", "ms"];
|
|
30
|
+
function addEvents(element, {
|
|
31
|
+
onFullScreen,
|
|
32
|
+
onError
|
|
33
|
+
}) {
|
|
34
|
+
prefixes.forEach((prefix) => {
|
|
35
|
+
element.addEventListener(`${prefix}fullscreenchange`, onFullScreen);
|
|
36
|
+
element.addEventListener(`${prefix}fullscreenerror`, onError);
|
|
37
|
+
});
|
|
38
|
+
return () => {
|
|
43
39
|
prefixes.forEach((prefix) => {
|
|
44
|
-
|
|
45
|
-
|
|
40
|
+
element.removeEventListener(`${prefix}fullscreenchange`, onFullScreen);
|
|
41
|
+
element.removeEventListener(`${prefix}fullscreenerror`, onError);
|
|
46
42
|
});
|
|
47
|
-
|
|
48
|
-
prefixes.forEach((prefix) => {
|
|
49
|
-
element.removeEventListener(`${prefix}fullscreenchange`, onFullScreen);
|
|
50
|
-
element.removeEventListener(`${prefix}fullscreenerror`, onError);
|
|
51
|
-
});
|
|
52
|
-
};
|
|
43
|
+
};
|
|
53
44
|
}
|
|
54
45
|
function useFullscreen() {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
46
|
+
const [fullscreen, setFullscreen] = React.useState(false);
|
|
47
|
+
const _ref = React.useRef();
|
|
48
|
+
const handleFullscreenChange = React.useCallback(
|
|
49
|
+
(event) => {
|
|
50
|
+
setFullscreen(event.target === getFullscreenElement());
|
|
51
|
+
},
|
|
52
|
+
[setFullscreen]
|
|
53
|
+
);
|
|
54
|
+
const handleFullscreenError = React.useCallback(
|
|
55
|
+
(event) => {
|
|
56
|
+
setFullscreen(false);
|
|
57
|
+
console.error(
|
|
58
|
+
`[@mantine/hooks] use-fullscreen: Error attempting full-screen mode method: ${event} (${event.target})`
|
|
59
|
+
);
|
|
60
|
+
},
|
|
61
|
+
[setFullscreen]
|
|
62
|
+
);
|
|
63
|
+
const toggle = React.useCallback(async () => {
|
|
64
|
+
if (!getFullscreenElement()) {
|
|
65
|
+
await enterFullScreen(_ref.current);
|
|
66
|
+
} else {
|
|
67
|
+
await exitFullscreen();
|
|
68
|
+
}
|
|
69
|
+
}, []);
|
|
70
|
+
const ref = React.useCallback((element) => {
|
|
71
|
+
if (element === null) {
|
|
72
|
+
_ref.current = window.document.documentElement;
|
|
73
|
+
} else {
|
|
74
|
+
_ref.current = element;
|
|
75
|
+
}
|
|
76
|
+
}, []);
|
|
77
|
+
React.useEffect(() => {
|
|
78
|
+
if (!_ref.current && window.document) {
|
|
79
|
+
_ref.current = window.document.documentElement;
|
|
80
|
+
return addEvents(_ref.current, {
|
|
81
|
+
onFullScreen: handleFullscreenChange,
|
|
82
|
+
onError: handleFullscreenError
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
if (_ref.current) {
|
|
86
|
+
return addEvents(_ref.current, {
|
|
87
|
+
onFullScreen: handleFullscreenChange,
|
|
88
|
+
onError: handleFullscreenError
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
return void 0;
|
|
92
|
+
}, []);
|
|
93
|
+
return { ref, toggle, fullscreen };
|
|
98
94
|
}
|
|
99
95
|
|
|
100
96
|
exports.useFullscreen = useFullscreen;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-fullscreen.js","sources":["../../src/use-fullscreen/use-fullscreen.ts"],"sourcesContent":["import { useCallback, useRef, useState, useEffect } from 'react';\n\nfunction getFullscreenElement(): HTMLElement | null {\n const _document = window.document as any;\n\n const fullscreenElement =\n _document.fullscreenElement ||\n _document.webkitFullscreenElement ||\n _document.mozFullScreenElement ||\n _document.msFullscreenElement;\n\n return fullscreenElement;\n}\n\nasync function exitFullscreen() {\n const _document = window.document as any;\n\n if (typeof _document.exitFullscreen === 'function') return _document.exitFullscreen();\n if (typeof _document.msExitFullscreen === 'function') return _document.msExitFullscreen();\n if (typeof _document.webkitExitFullscreen === 'function') return _document.webkitExitFullscreen();\n if (typeof _document.mozCancelFullScreen === 'function') return _document.mozCancelFullScreen();\n\n return null;\n}\n\nasync function enterFullScreen(element: HTMLElement) {\n const _element = element as any;\n\n return (\n _element.requestFullscreen?.() ||\n _element.msRequestFullscreen?.() ||\n _element.webkitEnterFullscreen?.() ||\n _element.webkitRequestFullscreen?.() ||\n _element.mozRequestFullscreen?.()\n );\n}\n\nconst prefixes = ['', 'webkit', 'moz', 'ms'];\n\nfunction addEvents(\n element: HTMLElement,\n {\n onFullScreen,\n onError,\n }: { onFullScreen: (event: Event) => void; onError: (event: Event) => void }\n) {\n prefixes.forEach((prefix) => {\n element.addEventListener(`${prefix}fullscreenchange`, onFullScreen);\n element.addEventListener(`${prefix}fullscreenerror`, onError);\n });\n\n return () => {\n prefixes.forEach((prefix) => {\n element.removeEventListener(`${prefix}fullscreenchange`, onFullScreen);\n element.removeEventListener(`${prefix}fullscreenerror`, onError);\n });\n };\n}\n\nexport function useFullscreen<T extends HTMLElement = any>() {\n const [fullscreen, setFullscreen] = useState<boolean>(false);\n\n const _ref = useRef<T>();\n\n const handleFullscreenChange = useCallback(\n (event: Event) => {\n setFullscreen(event.target === getFullscreenElement());\n },\n [setFullscreen]\n );\n\n const handleFullscreenError = useCallback(\n (event: Event) => {\n setFullscreen(false);\n // eslint-disable-next-line no-console\n console.error(\n `[@mantine/hooks] use-fullscreen: Error attempting full-screen mode method: ${event} (${event.target})`\n );\n },\n [setFullscreen]\n );\n\n const toggle = useCallback(async () => {\n if (!getFullscreenElement()) {\n await enterFullScreen(_ref.current!);\n } else {\n await exitFullscreen();\n }\n }, []);\n\n const ref = useCallback((element: T | null) => {\n if (element === null) {\n _ref.current = window.document.documentElement as T;\n } else {\n _ref.current = element;\n }\n }, []);\n\n useEffect(() => {\n if (!_ref.current && window.document) {\n _ref.current = window.document.documentElement as T;\n return addEvents(_ref.current, {\n onFullScreen: handleFullscreenChange,\n onError: handleFullscreenError,\n });\n }\n\n if (_ref.current) {\n return addEvents(_ref.current, {\n onFullScreen: handleFullscreenChange,\n onError: handleFullscreenError,\n });\n }\n\n return undefined;\n }, []);\n\n return { ref, toggle, fullscreen } as const;\n}\n"],"names":["useState","useRef","useCallback","useEffect"],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-fullscreen.js","sources":["../../src/use-fullscreen/use-fullscreen.ts"],"sourcesContent":["import { useCallback, useRef, useState, useEffect } from 'react';\n\nfunction getFullscreenElement(): HTMLElement | null {\n const _document = window.document as any;\n\n const fullscreenElement =\n _document.fullscreenElement ||\n _document.webkitFullscreenElement ||\n _document.mozFullScreenElement ||\n _document.msFullscreenElement;\n\n return fullscreenElement;\n}\n\nasync function exitFullscreen() {\n const _document = window.document as any;\n\n if (typeof _document.exitFullscreen === 'function') return _document.exitFullscreen();\n if (typeof _document.msExitFullscreen === 'function') return _document.msExitFullscreen();\n if (typeof _document.webkitExitFullscreen === 'function') return _document.webkitExitFullscreen();\n if (typeof _document.mozCancelFullScreen === 'function') return _document.mozCancelFullScreen();\n\n return null;\n}\n\nasync function enterFullScreen(element: HTMLElement) {\n const _element = element as any;\n\n return (\n _element.requestFullscreen?.() ||\n _element.msRequestFullscreen?.() ||\n _element.webkitEnterFullscreen?.() ||\n _element.webkitRequestFullscreen?.() ||\n _element.mozRequestFullscreen?.()\n );\n}\n\nconst prefixes = ['', 'webkit', 'moz', 'ms'];\n\nfunction addEvents(\n element: HTMLElement,\n {\n onFullScreen,\n onError,\n }: { onFullScreen: (event: Event) => void; onError: (event: Event) => void }\n) {\n prefixes.forEach((prefix) => {\n element.addEventListener(`${prefix}fullscreenchange`, onFullScreen);\n element.addEventListener(`${prefix}fullscreenerror`, onError);\n });\n\n return () => {\n prefixes.forEach((prefix) => {\n element.removeEventListener(`${prefix}fullscreenchange`, onFullScreen);\n element.removeEventListener(`${prefix}fullscreenerror`, onError);\n });\n };\n}\n\nexport function useFullscreen<T extends HTMLElement = any>() {\n const [fullscreen, setFullscreen] = useState<boolean>(false);\n\n const _ref = useRef<T>();\n\n const handleFullscreenChange = useCallback(\n (event: Event) => {\n setFullscreen(event.target === getFullscreenElement());\n },\n [setFullscreen]\n );\n\n const handleFullscreenError = useCallback(\n (event: Event) => {\n setFullscreen(false);\n // eslint-disable-next-line no-console\n console.error(\n `[@mantine/hooks] use-fullscreen: Error attempting full-screen mode method: ${event} (${event.target})`\n );\n },\n [setFullscreen]\n );\n\n const toggle = useCallback(async () => {\n if (!getFullscreenElement()) {\n await enterFullScreen(_ref.current!);\n } else {\n await exitFullscreen();\n }\n }, []);\n\n const ref = useCallback((element: T | null) => {\n if (element === null) {\n _ref.current = window.document.documentElement as T;\n } else {\n _ref.current = element;\n }\n }, []);\n\n useEffect(() => {\n if (!_ref.current && window.document) {\n _ref.current = window.document.documentElement as T;\n return addEvents(_ref.current, {\n onFullScreen: handleFullscreenChange,\n onError: handleFullscreenError,\n });\n }\n\n if (_ref.current) {\n return addEvents(_ref.current, {\n onFullScreen: handleFullscreenChange,\n onError: handleFullscreenError,\n });\n }\n\n return undefined;\n }, []);\n\n return { ref, toggle, fullscreen } as const;\n}\n"],"names":["useState","useRef","useCallback","useEffect"],"mappings":"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"}
|
package/cjs/use-hash/use-hash.js
CHANGED
|
@@ -6,22 +6,22 @@ var React = require('react');
|
|
|
6
6
|
var useWindowEvent = require('../use-window-event/use-window-event.js');
|
|
7
7
|
|
|
8
8
|
function useHash() {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
9
|
+
const [hash, setHashValue] = React.useState("");
|
|
10
|
+
const setHash = (value) => {
|
|
11
|
+
const valueWithHash = value.startsWith("#") ? value : `#${value}`;
|
|
12
|
+
window.location.hash = valueWithHash;
|
|
13
|
+
setHashValue(valueWithHash);
|
|
14
|
+
};
|
|
15
|
+
useWindowEvent.useWindowEvent("hashchange", () => {
|
|
16
|
+
const newHash = window.location.hash;
|
|
17
|
+
if (hash !== newHash) {
|
|
18
|
+
setHashValue(hash);
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
React.useEffect(() => {
|
|
22
|
+
setHashValue(window.location.hash);
|
|
23
|
+
}, []);
|
|
24
|
+
return [hash, setHash];
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
exports.useHash = useHash;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hash.js","sources":["../../src/use-hash/use-hash.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport function useHash() {\n const [hash, setHashValue] = useState<string>('');\n\n const setHash = (value: string) => {\n const valueWithHash = value.startsWith('#') ? value : `#${value}`;\n window.location.hash = valueWithHash;\n setHashValue(valueWithHash);\n };\n\n useWindowEvent('hashchange', () => {\n const newHash = window.location.hash;\n if (hash !== newHash) {\n setHashValue(hash);\n }\n });\n\n useEffect(() => {\n setHashValue(window.location.hash);\n }, []);\n\n return [hash, setHash] as const;\n}\n"],"names":["useState","useWindowEvent","useEffect"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"use-hash.js","sources":["../../src/use-hash/use-hash.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport function useHash() {\n const [hash, setHashValue] = useState<string>('');\n\n const setHash = (value: string) => {\n const valueWithHash = value.startsWith('#') ? value : `#${value}`;\n window.location.hash = valueWithHash;\n setHashValue(valueWithHash);\n };\n\n useWindowEvent('hashchange', () => {\n const newHash = window.location.hash;\n if (hash !== newHash) {\n setHashValue(hash);\n }\n });\n\n useEffect(() => {\n setHashValue(window.location.hash);\n }, []);\n\n return [hash, setHash] as const;\n}\n"],"names":["useState","useWindowEvent","useEffect"],"mappings":";;;;;;;AAEO,SAAS,OAAO,GAAG;AAC1B,EAAE,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,EAAE,CAAC,CAAC;AAC5C,EAAE,MAAM,OAAO,GAAG,CAAC,KAAK,KAAK;AAC7B,IAAI,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AACtE,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,aAAa,CAAC;AACzC,IAAI,YAAY,CAAC,aAAa,CAAC,CAAC;AAChC,GAAG,CAAC;AACJ,EAAEC,6BAAc,CAAC,YAAY,EAAE,MAAM;AACrC,IAAI,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;AACzC,IAAI,IAAI,IAAI,KAAK,OAAO,EAAE;AAC1B,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK;AACL,GAAG,CAAC,CAAC;AACL,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AACvC,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AACzB;;;;"}
|
|
@@ -10,33 +10,33 @@ const isFixed = (current, fixedAt) => current <= fixedAt;
|
|
|
10
10
|
const isPinned = (current, previous) => current <= previous;
|
|
11
11
|
const isReleased = (current, previous, fixedAt) => !isPinned(current, previous) && !isFixed(current, fixedAt);
|
|
12
12
|
function useHeadroom({ fixedAt = 0, onPin, onFix, onRelease } = {}) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
if (isPinned(scrollPosition, scrollRef.current)) {
|
|
17
|
-
onPin === null || onPin === void 0 ? void 0 : onPin();
|
|
18
|
-
}
|
|
19
|
-
}, [scrollPosition, onPin]);
|
|
20
|
-
useIsomorphicEffect.useIsomorphicEffect(() => {
|
|
21
|
-
if (isFixed(scrollPosition, fixedAt)) {
|
|
22
|
-
onFix === null || onFix === void 0 ? void 0 : onFix();
|
|
23
|
-
}
|
|
24
|
-
}, [scrollPosition, fixedAt, onFix]);
|
|
25
|
-
useIsomorphicEffect.useIsomorphicEffect(() => {
|
|
26
|
-
if (isReleased(scrollPosition, scrollRef.current, fixedAt)) {
|
|
27
|
-
onRelease === null || onRelease === void 0 ? void 0 : onRelease();
|
|
28
|
-
}
|
|
29
|
-
}, [scrollPosition, onRelease]);
|
|
30
|
-
useIsomorphicEffect.useIsomorphicEffect(() => {
|
|
31
|
-
scrollRef.current = window.scrollY;
|
|
32
|
-
}, [scrollPosition]);
|
|
13
|
+
const scrollRef = React.useRef(0);
|
|
14
|
+
const [{ y: scrollPosition }] = useWindowScroll.useWindowScroll();
|
|
15
|
+
useIsomorphicEffect.useIsomorphicEffect(() => {
|
|
33
16
|
if (isPinned(scrollPosition, scrollRef.current)) {
|
|
34
|
-
|
|
17
|
+
onPin == null ? void 0 : onPin();
|
|
35
18
|
}
|
|
19
|
+
}, [scrollPosition, onPin]);
|
|
20
|
+
useIsomorphicEffect.useIsomorphicEffect(() => {
|
|
36
21
|
if (isFixed(scrollPosition, fixedAt)) {
|
|
37
|
-
|
|
22
|
+
onFix == null ? void 0 : onFix();
|
|
38
23
|
}
|
|
39
|
-
|
|
24
|
+
}, [scrollPosition, fixedAt, onFix]);
|
|
25
|
+
useIsomorphicEffect.useIsomorphicEffect(() => {
|
|
26
|
+
if (isReleased(scrollPosition, scrollRef.current, fixedAt)) {
|
|
27
|
+
onRelease == null ? void 0 : onRelease();
|
|
28
|
+
}
|
|
29
|
+
}, [scrollPosition, onRelease]);
|
|
30
|
+
useIsomorphicEffect.useIsomorphicEffect(() => {
|
|
31
|
+
scrollRef.current = window.scrollY;
|
|
32
|
+
}, [scrollPosition]);
|
|
33
|
+
if (isPinned(scrollPosition, scrollRef.current)) {
|
|
34
|
+
return true;
|
|
35
|
+
}
|
|
36
|
+
if (isFixed(scrollPosition, fixedAt)) {
|
|
37
|
+
return true;
|
|
38
|
+
}
|
|
39
|
+
return false;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
exports.isFixed = isFixed;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-headroom.js","sources":["../../src/use-headroom/use-headroom.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useWindowScroll } from '../use-window-scroll/use-window-scroll';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nexport const isFixed = (current: number, fixedAt: number) => current <= fixedAt;\nexport const isPinned = (current: number, previous: number) => current <= previous;\nexport const isReleased = (current: number, previous: number, fixedAt: number) =>\n !isPinned(current, previous) && !isFixed(current, fixedAt);\n\ninterface UseHeadroomInput {\n /** Number in px at which element should be fixed */\n fixedAt?: number;\n\n /** Called when element is pinned */\n onPin?(): void;\n\n /** Called when element is at fixed position */\n onFix?(): void;\n\n /** Called when element is unpinned */\n onRelease?(): void;\n}\n\nexport function useHeadroom({ fixedAt = 0, onPin, onFix, onRelease }: UseHeadroomInput = {}) {\n const scrollRef = useRef(0);\n const [{ y: scrollPosition }] = useWindowScroll();\n\n useIsomorphicEffect(() => {\n if (isPinned(scrollPosition, scrollRef.current)) {\n onPin?.();\n }\n }, [scrollPosition, onPin]);\n\n useIsomorphicEffect(() => {\n if (isFixed(scrollPosition, fixedAt)) {\n onFix?.();\n }\n }, [scrollPosition, fixedAt, onFix]);\n\n useIsomorphicEffect(() => {\n if (isReleased(scrollPosition, scrollRef.current, fixedAt)) {\n onRelease?.();\n }\n }, [scrollPosition, onRelease]);\n\n useIsomorphicEffect(() => {\n scrollRef.current = window.scrollY;\n }, [scrollPosition]);\n\n if (isPinned(scrollPosition, scrollRef.current)) {\n return true;\n }\n\n if (isFixed(scrollPosition, fixedAt)) {\n return true;\n }\n\n return false;\n}\n"],"names":["useRef","useWindowScroll","useIsomorphicEffect"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"use-headroom.js","sources":["../../src/use-headroom/use-headroom.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useWindowScroll } from '../use-window-scroll/use-window-scroll';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nexport const isFixed = (current: number, fixedAt: number) => current <= fixedAt;\nexport const isPinned = (current: number, previous: number) => current <= previous;\nexport const isReleased = (current: number, previous: number, fixedAt: number) =>\n !isPinned(current, previous) && !isFixed(current, fixedAt);\n\ninterface UseHeadroomInput {\n /** Number in px at which element should be fixed */\n fixedAt?: number;\n\n /** Called when element is pinned */\n onPin?(): void;\n\n /** Called when element is at fixed position */\n onFix?(): void;\n\n /** Called when element is unpinned */\n onRelease?(): void;\n}\n\nexport function useHeadroom({ fixedAt = 0, onPin, onFix, onRelease }: UseHeadroomInput = {}) {\n const scrollRef = useRef(0);\n const [{ y: scrollPosition }] = useWindowScroll();\n\n useIsomorphicEffect(() => {\n if (isPinned(scrollPosition, scrollRef.current)) {\n onPin?.();\n }\n }, [scrollPosition, onPin]);\n\n useIsomorphicEffect(() => {\n if (isFixed(scrollPosition, fixedAt)) {\n onFix?.();\n }\n }, [scrollPosition, fixedAt, onFix]);\n\n useIsomorphicEffect(() => {\n if (isReleased(scrollPosition, scrollRef.current, fixedAt)) {\n onRelease?.();\n }\n }, [scrollPosition, onRelease]);\n\n useIsomorphicEffect(() => {\n scrollRef.current = window.scrollY;\n }, [scrollPosition]);\n\n if (isPinned(scrollPosition, scrollRef.current)) {\n return true;\n }\n\n if (isFixed(scrollPosition, fixedAt)) {\n return true;\n }\n\n return false;\n}\n"],"names":["useRef","useWindowScroll","useIsomorphicEffect"],"mappings":";;;;;;;;AAGY,MAAC,OAAO,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,IAAI,QAAQ;AACpD,MAAC,QAAQ,GAAG,CAAC,OAAO,EAAE,QAAQ,KAAK,OAAO,IAAI,SAAS;AACvD,MAAC,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE;AAC9G,SAAS,WAAW,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE;AAC3E,EAAE,MAAM,SAAS,GAAGA,YAAM,CAAC,CAAC,CAAC,CAAC;AAC9B,EAAE,MAAM,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,GAAGC,+BAAe,EAAE,CAAC;AACpD,EAAEC,uCAAmB,CAAC,MAAM;AAC5B,IAAI,IAAI,QAAQ,CAAC,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE;AACrD,MAAM,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,EAAE,CAAC;AACvC,KAAK;AACL,GAAG,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;AAC9B,EAAEA,uCAAmB,CAAC,MAAM;AAC5B,IAAI,IAAI,OAAO,CAAC,cAAc,EAAE,OAAO,CAAC,EAAE;AAC1C,MAAM,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,EAAE,CAAC;AACvC,KAAK;AACL,GAAG,EAAE,CAAC,cAAc,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;AACvC,EAAEA,uCAAmB,CAAC,MAAM;AAC5B,IAAI,IAAI,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;AAChE,MAAM,SAAS,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,SAAS,EAAE,CAAC;AAC/C,KAAK;AACL,GAAG,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC;AAClC,EAAEA,uCAAmB,CAAC,MAAM;AAC5B,IAAI,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AACvC,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;AACvB,EAAE,IAAI,QAAQ,CAAC,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE;AACnD,IAAI,OAAO,IAAI,CAAC;AAChB,GAAG;AACH,EAAE,IAAI,OAAO,CAAC,cAAc,EAAE,OAAO,CAAC,EAAE;AACxC,IAAI,OAAO,IAAI,CAAC;AAChB,GAAG;AACH,EAAE,OAAO,KAAK,CAAC;AACf;;;;;;;"}
|