@mantine/hooks 3.2.3 → 3.3.3
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/index.js +2 -0
- package/cjs/index.js.map +1 -1
- package/cjs/use-focus-trap/use-focus-trap.js +0 -7
- package/cjs/use-focus-trap/use-focus-trap.js.map +1 -1
- package/cjs/use-form/use-form.js +15 -7
- package/cjs/use-form/use-form.js.map +1 -1
- package/cjs/use-input-state/use-input-state.js +32 -0
- package/cjs/use-input-state/use-input-state.js.map +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/use-focus-trap/use-focus-trap.js +0 -7
- package/esm/use-focus-trap/use-focus-trap.js.map +1 -1
- package/esm/use-form/use-form.js +15 -7
- package/esm/use-form/use-form.js.map +1 -1
- package/esm/use-input-state/use-input-state.js +27 -0
- package/esm/use-input-state/use-input-state.js.map +1 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/use-focus-trap/use-focus-trap.d.ts.map +1 -1
- package/lib/use-form/use-form.d.ts +15 -4
- package/lib/use-form/use-form.d.ts.map +1 -1
- package/lib/use-input-state/use-input-state.d.ts +4 -0
- package/lib/use-input-state/use-input-state.d.ts.map +1 -0
- package/package.json +1 -1
- package/cjs/use-focus-trap/focus-manager.js +0 -58
- package/cjs/use-focus-trap/focus-manager.js.map +0 -1
- package/esm/use-focus-trap/focus-manager.js +0 -51
- package/esm/use-focus-trap/focus-manager.js.map +0 -1
- package/lib/use-focus-trap/focus-manager.d.ts +0 -5
- package/lib/use-focus-trap/focus-manager.d.ts.map +0 -1
package/cjs/index.js
CHANGED
|
@@ -43,6 +43,7 @@ var useHover = require('./use-hover/use-hover.js');
|
|
|
43
43
|
var useUuid = require('./use-uuid/use-uuid.js');
|
|
44
44
|
var useOs = require('./use-os/use-os.js');
|
|
45
45
|
var useSetState = require('./use-set-state/use-set-state.js');
|
|
46
|
+
var useInputState = require('./use-input-state/use-input-state.js');
|
|
46
47
|
var parseHotkey = require('./use-hotkey/parse-hotkey.js');
|
|
47
48
|
var assignRef = require('./utils/assign-ref/assign-ref.js');
|
|
48
49
|
var clamp = require('./utils/clamp/clamp.js');
|
|
@@ -98,6 +99,7 @@ exports.useHover = useHover.useHover;
|
|
|
98
99
|
exports.useUuid = useUuid.useUuid;
|
|
99
100
|
exports.useOs = useOs.useOs;
|
|
100
101
|
exports.useSetState = useSetState.useSetState;
|
|
102
|
+
exports.useInputState = useInputState.useInputState;
|
|
101
103
|
exports.getHotkeyHandler = parseHotkey.getHotkeyHandler;
|
|
102
104
|
exports.assignRef = assignRef.assignRef;
|
|
103
105
|
exports.clamp = clamp.clamp;
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var react = require('react');
|
|
6
|
-
var focusManager = require('./focus-manager.js');
|
|
7
6
|
var tabbable = require('./tabbable.js');
|
|
8
7
|
var scopeTab = require('./scope-tab.js');
|
|
9
8
|
var createAriaHider = require('./create-aria-hider.js');
|
|
@@ -18,13 +17,7 @@ function useFocusTrap(active = true) {
|
|
|
18
17
|
if (restoreAria.current) {
|
|
19
18
|
restoreAria.current();
|
|
20
19
|
}
|
|
21
|
-
if (ref.current) {
|
|
22
|
-
focusManager.returnFocus();
|
|
23
|
-
focusManager.teardownScopedFocus();
|
|
24
|
-
}
|
|
25
20
|
if (node) {
|
|
26
|
-
focusManager.setupScopedFocus(node);
|
|
27
|
-
focusManager.markForFocusLater();
|
|
28
21
|
const processNode = (_node) => {
|
|
29
22
|
restoreAria.current = createAriaHider.createAriaHider(_node);
|
|
30
23
|
let focusElement = node.querySelector("[data-autofocus]");
|
|
@@ -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 {
|
|
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 setRef = useCallback(\n (node: HTMLElement | null) => {\n if (!active) {\n return;\n }\n\n if (restoreAria.current) {\n restoreAria.current();\n }\n\n if (node) {\n const processNode = (_node: HTMLElement) => {\n restoreAria.current = createAriaHider(_node);\n\n let focusElement: HTMLElement = 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();\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 // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (node.ownerDocument) {\n processNode(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 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 }, [active]);\n\n return setRef;\n}\n"],"names":["useRef","useCallback","createAriaHider","FOCUS_SELECTOR","tabbable","focusable","useEffect","scopeTab"],"mappings":";;;;;;;;;AAIO,SAAS,YAAY,CAAC,MAAM,GAAG,IAAI,EAAE;AAC5C,EAAE,MAAM,GAAG,GAAGA,YAAM,EAAE,CAAC;AACvB,EAAE,MAAM,WAAW,GAAGA,YAAM,CAAC,IAAI,CAAC,CAAC;AACnC,EAAE,MAAM,MAAM,GAAGC,iBAAW,CAAC,CAAC,IAAI,KAAK;AACvC,IAAI,IAAI,CAAC,MAAM,EAAE;AACjB,MAAM,OAAO;AACb,KAAK;AACL,IAAI,IAAI,WAAW,CAAC,OAAO,EAAE;AAC7B,MAAM,WAAW,CAAC,OAAO,EAAE,CAAC;AAC5B,KAAK;AACL,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,KAAK;AACrC,QAAQ,WAAW,CAAC,OAAO,GAAGC,+BAAe,CAAC,KAAK,CAAC,CAAC;AACrD,QAAQ,IAAI,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;AAClE,QAAQ,IAAI,CAAC,YAAY,EAAE;AAC3B,UAAU,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAACC,uBAAc,CAAC,CAAC,CAAC;AAC7E,UAAU,YAAY,GAAG,QAAQ,CAAC,IAAI,CAACC,iBAAQ,CAAC,IAAI,QAAQ,CAAC,IAAI,CAACC,kBAAS,CAAC,IAAI,IAAI,CAAC;AACrF,UAAU,IAAI,CAAC,YAAY,IAAIA,kBAAS,CAAC,IAAI,CAAC;AAC9C,YAAY,YAAY,GAAG,IAAI,CAAC;AAChC,SAAS;AACT,QAAQ,IAAI,YAAY,EAAE;AAC1B,UAAU,YAAY,CAAC,KAAK,EAAE,CAAC;AAC/B,SAAS,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;AAC3D,UAAU,OAAO,CAAC,IAAI,CAAC,uFAAuF,EAAE,IAAI,CAAC,CAAC;AACtH,SAAS;AACT,OAAO,CAAC;AACR,MAAM,UAAU,CAAC,MAAM;AACvB,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE;AAChC,UAAU,WAAW,CAAC,IAAI,CAAC,CAAC;AAC5B,SAAS,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;AAC3D,UAAU,OAAO,CAAC,IAAI,CAAC,iEAAiE,EAAE,IAAI,CAAC,CAAC;AAChG,SAAS;AACT,OAAO,CAAC,CAAC;AACT,MAAM,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AACzB,KAAK,MAAM;AACX,MAAM,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AACzB,KAAK;AACL,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,CAAC,MAAM,EAAE;AACjB,MAAM,OAAO,KAAK,CAAC,CAAC;AACpB,KAAK;AACL,IAAI,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACrC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,GAAG,CAAC,OAAO,EAAE;AAC9C,QAAQC,iBAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACrC,OAAO;AACP,KAAK,CAAC;AACN,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACxD,IAAI,OAAO,MAAM;AACjB,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC7D,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAE,OAAO,MAAM,CAAC;AAChB;;;;"}
|
package/cjs/use-form/use-form.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var react = require('react');
|
|
6
|
+
var useInputState = require('../use-input-state/use-input-state.js');
|
|
6
7
|
|
|
7
8
|
var __defProp = Object.defineProperty;
|
|
8
9
|
var __defProps = Object.defineProperties;
|
|
@@ -25,10 +26,11 @@ var __spreadValues = (a, b) => {
|
|
|
25
26
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
26
27
|
function useForm({
|
|
27
28
|
initialValues,
|
|
28
|
-
validationRules = {}
|
|
29
|
+
validationRules = {},
|
|
30
|
+
errorMessages = {}
|
|
29
31
|
}) {
|
|
30
32
|
const initialErrors = Object.keys(initialValues).reduce((acc, field) => {
|
|
31
|
-
acc[field] =
|
|
33
|
+
acc[field] = null;
|
|
32
34
|
return acc;
|
|
33
35
|
}, {});
|
|
34
36
|
const [errors, setErrors] = react.useState(initialErrors);
|
|
@@ -42,10 +44,10 @@ function useForm({
|
|
|
42
44
|
let isValid = true;
|
|
43
45
|
const validationErrors = Object.keys(values).reduce((acc, field) => {
|
|
44
46
|
if (validationRules && typeof validationRules[field] === "function" && !validationRules[field](values[field], values)) {
|
|
45
|
-
acc[field] = true;
|
|
47
|
+
acc[field] = errorMessages[field] || true;
|
|
46
48
|
isValid = false;
|
|
47
49
|
} else {
|
|
48
|
-
acc[field] =
|
|
50
|
+
acc[field] = null;
|
|
49
51
|
}
|
|
50
52
|
return acc;
|
|
51
53
|
}, {});
|
|
@@ -53,17 +55,22 @@ function useForm({
|
|
|
53
55
|
return isValid;
|
|
54
56
|
};
|
|
55
57
|
const validateField = (field) => setErrors((currentErrors) => __spreadProps(__spreadValues({}, currentErrors), {
|
|
56
|
-
[field]: typeof validationRules[field] === "function" ?
|
|
58
|
+
[field]: typeof validationRules[field] === "function" ? validationRules[field](values[field], values) ? null : errorMessages[field] || true : null
|
|
57
59
|
}));
|
|
58
60
|
const setFieldError = (field, error) => setErrors((currentErrors) => __spreadProps(__spreadValues({}, currentErrors), { [field]: error }));
|
|
59
61
|
const setFieldValue = (field, value) => {
|
|
60
62
|
setValues((currentValues) => __spreadProps(__spreadValues({}, currentValues), { [field]: value }));
|
|
61
|
-
setFieldError(field,
|
|
63
|
+
setFieldError(field, null);
|
|
62
64
|
};
|
|
63
65
|
const onSubmit = (handleSubmit) => (event) => {
|
|
64
66
|
event && event.preventDefault();
|
|
65
67
|
validate() && handleSubmit(values);
|
|
66
68
|
};
|
|
69
|
+
const getInputProps = (field, options) => ({
|
|
70
|
+
[(options == null ? void 0 : options.type) === "checkbox" ? "checked" : "value"]: values[field],
|
|
71
|
+
onChange: useInputState.getInputOnChange((val) => setFieldValue(field, val)),
|
|
72
|
+
error: errors[field] || void 0
|
|
73
|
+
});
|
|
67
74
|
return {
|
|
68
75
|
values,
|
|
69
76
|
errors,
|
|
@@ -75,7 +82,8 @@ function useForm({
|
|
|
75
82
|
setFieldError,
|
|
76
83
|
validateField,
|
|
77
84
|
resetErrors,
|
|
78
|
-
onSubmit
|
|
85
|
+
onSubmit,
|
|
86
|
+
getInputProps
|
|
79
87
|
};
|
|
80
88
|
}
|
|
81
89
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-form.js","sources":["../../src/use-form/use-form.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nexport type ValidationRule<T> = {\n readonly [P in keyof T]?: (value: T[P], values?: T) => boolean;\n};\n\nexport interface UseForm<T> {\n validationRules?: ValidationRule<T>;\n initialValues: T;\n}\n\nexport function useForm<T extends { [key: string]: any }>({\n initialValues,\n validationRules = {},\n}: UseForm<T>) {\n type ValidationErrors = Record<keyof T,
|
|
1
|
+
{"version":3,"file":"use-form.js","sources":["../../src/use-form/use-form.ts"],"sourcesContent":["import React, { useState } from 'react';\nimport { getInputOnChange } from '../use-input-state/use-input-state';\n\nexport type ValidationRule<T> = {\n readonly [P in keyof T]?: (value: T[P], values?: T) => boolean;\n};\n\nexport type UseFormErrors<T> = {\n readonly [P in keyof T]?: React.ReactNode | null;\n};\n\nexport interface UseForm<T> {\n validationRules?: ValidationRule<T>;\n errorMessages?: UseFormErrors<T>;\n initialValues: T;\n}\n\nexport function useForm<T extends { [key: string]: any }>({\n initialValues,\n validationRules = {},\n errorMessages = {},\n}: UseForm<T>) {\n type ValidationErrors = Record<keyof T, React.ReactNode>;\n\n const initialErrors = Object.keys(initialValues).reduce((acc, field) => {\n acc[field as keyof T] = null;\n return acc;\n }, {} as ValidationErrors);\n\n const [errors, setErrors] = useState(initialErrors);\n const [values, setValues] = useState(initialValues);\n\n const resetErrors = () => setErrors(initialErrors);\n\n const reset = () => {\n setValues(initialValues);\n resetErrors();\n };\n\n const validate = () => {\n let isValid = true;\n\n const validationErrors = Object.keys(values).reduce((acc, field) => {\n if (\n validationRules &&\n typeof validationRules[field] === 'function' &&\n !validationRules[field](values[field], values)\n ) {\n acc[field as keyof T] = errorMessages[field] || true;\n isValid = false;\n } else {\n acc[field as keyof T] = null;\n }\n\n return acc;\n }, {} as ValidationErrors);\n\n setErrors(validationErrors);\n return isValid;\n };\n\n const validateField = (field: keyof T) =>\n setErrors((currentErrors) => ({\n ...currentErrors,\n [field]:\n typeof validationRules[field] === 'function'\n ? validationRules[field](values[field], values)\n ? null\n : errorMessages[field] || true\n : null,\n }));\n\n const setFieldError = (field: keyof T, error: React.ReactNode) =>\n setErrors((currentErrors) => ({ ...currentErrors, [field]: error }));\n\n const setFieldValue = <K extends keyof T, U extends T[K]>(field: K, value: U) => {\n setValues((currentValues) => ({ ...currentValues, [field]: value }));\n setFieldError(field, null);\n };\n\n const onSubmit = (handleSubmit: (values: T) => any) => (event?: React.FormEvent) => {\n event && event.preventDefault();\n validate() && handleSubmit(values);\n };\n\n const getInputProps = <K extends keyof T, U extends T[K]>(\n field: K,\n options?: { type?: 'checkbox' | 'default' }\n ) => ({\n [options?.type === 'checkbox' ? 'checked' : 'value']: values[field],\n onChange: getInputOnChange<U>((val: U | null | undefined) => setFieldValue(field, val)),\n error: errors[field] || undefined,\n });\n\n return {\n values,\n errors,\n validate,\n reset,\n setErrors,\n setValues,\n setFieldValue,\n setFieldError,\n validateField,\n resetErrors,\n onSubmit,\n getInputProps,\n };\n}\n"],"names":["useState","getInputOnChange"],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var react = require('react');
|
|
6
|
+
|
|
7
|
+
function getInputOnChange(setValue) {
|
|
8
|
+
return (val) => {
|
|
9
|
+
if (!val) {
|
|
10
|
+
setValue(val);
|
|
11
|
+
} else if (typeof val === "function") {
|
|
12
|
+
setValue(val);
|
|
13
|
+
} else if (typeof val === "object" && "nativeEvent" in val) {
|
|
14
|
+
const { currentTarget } = val;
|
|
15
|
+
if (currentTarget.type === "checkbox") {
|
|
16
|
+
setValue(currentTarget.checked);
|
|
17
|
+
} else {
|
|
18
|
+
setValue(currentTarget.value);
|
|
19
|
+
}
|
|
20
|
+
} else {
|
|
21
|
+
setValue(val);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
function useInputState(initialState) {
|
|
26
|
+
const [value, setValue] = react.useState(initialState);
|
|
27
|
+
return [value, getInputOnChange(setValue)];
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
exports.getInputOnChange = getInputOnChange;
|
|
31
|
+
exports.useInputState = useInputState;
|
|
32
|
+
//# sourceMappingURL=use-input-state.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-input-state.js","sources":["../../src/use-input-state/use-input-state.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nexport function getInputOnChange<T>(\n setValue: (value: null | undefined | T | ((current: T) => T)) => void\n) {\n return (val: T | React.ChangeEvent<any> | ((current: T) => T)) => {\n if (!val) {\n setValue(val as T);\n } else if (typeof val === 'function') {\n setValue(val);\n } else if (typeof val === 'object' && 'nativeEvent' in val) {\n const { currentTarget } = val;\n\n if (currentTarget.type === 'checkbox') {\n setValue((currentTarget as any).checked as any);\n } else {\n setValue(currentTarget.value as any);\n }\n } else {\n setValue(val);\n }\n };\n}\n\nexport function useInputState<T>(initialState: T) {\n const [value, setValue] = useState(initialState);\n return [value, getInputOnChange<T>(setValue)] as const;\n}\n"],"names":["useState"],"mappings":";;;;;;AACO,SAAS,gBAAgB,CAAC,QAAQ,EAAE;AAC3C,EAAE,OAAO,CAAC,GAAG,KAAK;AAClB,IAAI,IAAI,CAAC,GAAG,EAAE;AACd,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC;AACpB,KAAK,MAAM,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;AAC1C,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC;AACpB,KAAK,MAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,aAAa,IAAI,GAAG,EAAE;AAChE,MAAM,MAAM,EAAE,aAAa,EAAE,GAAG,GAAG,CAAC;AACpC,MAAM,IAAI,aAAa,CAAC,IAAI,KAAK,UAAU,EAAE;AAC7C,QAAQ,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACxC,OAAO,MAAM;AACb,QAAQ,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACtC,OAAO;AACP,KAAK,MAAM;AACX,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC;AACpB,KAAK;AACL,GAAG,CAAC;AACJ,CAAC;AACM,SAAS,aAAa,CAAC,YAAY,EAAE;AAC5C,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,YAAY,CAAC,CAAC;AACnD,EAAE,OAAO,CAAC,KAAK,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC7C;;;;;"}
|
package/esm/index.js
CHANGED
|
@@ -39,6 +39,7 @@ export { useHover } from './use-hover/use-hover.js';
|
|
|
39
39
|
export { useUuid } from './use-uuid/use-uuid.js';
|
|
40
40
|
export { useOs } from './use-os/use-os.js';
|
|
41
41
|
export { useSetState } from './use-set-state/use-set-state.js';
|
|
42
|
+
export { useInputState } from './use-input-state/use-input-state.js';
|
|
42
43
|
export { getHotkeyHandler } from './use-hotkey/parse-hotkey.js';
|
|
43
44
|
export { assignRef } from './utils/assign-ref/assign-ref.js';
|
|
44
45
|
export { clamp } from './utils/clamp/clamp.js';
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { useRef, useCallback, useEffect } from 'react';
|
|
2
|
-
import { returnFocus, teardownScopedFocus, setupScopedFocus, markForFocusLater } from './focus-manager.js';
|
|
3
2
|
import { FOCUS_SELECTOR, tabbable, focusable } from './tabbable.js';
|
|
4
3
|
import { scopeTab } from './scope-tab.js';
|
|
5
4
|
import { createAriaHider } from './create-aria-hider.js';
|
|
@@ -14,13 +13,7 @@ function useFocusTrap(active = true) {
|
|
|
14
13
|
if (restoreAria.current) {
|
|
15
14
|
restoreAria.current();
|
|
16
15
|
}
|
|
17
|
-
if (ref.current) {
|
|
18
|
-
returnFocus();
|
|
19
|
-
teardownScopedFocus();
|
|
20
|
-
}
|
|
21
16
|
if (node) {
|
|
22
|
-
setupScopedFocus(node);
|
|
23
|
-
markForFocusLater();
|
|
24
17
|
const processNode = (_node) => {
|
|
25
18
|
restoreAria.current = createAriaHider(_node);
|
|
26
19
|
let focusElement = node.querySelector("[data-autofocus]");
|
|
@@ -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 {
|
|
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 setRef = useCallback(\n (node: HTMLElement | null) => {\n if (!active) {\n return;\n }\n\n if (restoreAria.current) {\n restoreAria.current();\n }\n\n if (node) {\n const processNode = (_node: HTMLElement) => {\n restoreAria.current = createAriaHider(_node);\n\n let focusElement: HTMLElement = 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();\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 // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (node.ownerDocument) {\n processNode(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 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 }, [active]);\n\n return setRef;\n}\n"],"names":[],"mappings":";;;;;AAIO,SAAS,YAAY,CAAC,MAAM,GAAG,IAAI,EAAE;AAC5C,EAAE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AACvB,EAAE,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACnC,EAAE,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,IAAI,KAAK;AACvC,IAAI,IAAI,CAAC,MAAM,EAAE;AACjB,MAAM,OAAO;AACb,KAAK;AACL,IAAI,IAAI,WAAW,CAAC,OAAO,EAAE;AAC7B,MAAM,WAAW,CAAC,OAAO,EAAE,CAAC;AAC5B,KAAK;AACL,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,KAAK;AACrC,QAAQ,WAAW,CAAC,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AACrD,QAAQ,IAAI,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;AAClE,QAAQ,IAAI,CAAC,YAAY,EAAE;AAC3B,UAAU,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;AAC7E,UAAU,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC;AACrF,UAAU,IAAI,CAAC,YAAY,IAAI,SAAS,CAAC,IAAI,CAAC;AAC9C,YAAY,YAAY,GAAG,IAAI,CAAC;AAChC,SAAS;AACT,QAAQ,IAAI,YAAY,EAAE;AAC1B,UAAU,YAAY,CAAC,KAAK,EAAE,CAAC;AAC/B,SAAS,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;AAC3D,UAAU,OAAO,CAAC,IAAI,CAAC,uFAAuF,EAAE,IAAI,CAAC,CAAC;AACtH,SAAS;AACT,OAAO,CAAC;AACR,MAAM,UAAU,CAAC,MAAM;AACvB,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE;AAChC,UAAU,WAAW,CAAC,IAAI,CAAC,CAAC;AAC5B,SAAS,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;AAC3D,UAAU,OAAO,CAAC,IAAI,CAAC,iEAAiE,EAAE,IAAI,CAAC,CAAC;AAChG,SAAS;AACT,OAAO,CAAC,CAAC;AACT,MAAM,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AACzB,KAAK,MAAM;AACX,MAAM,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AACzB,KAAK;AACL,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,CAAC,MAAM,EAAE;AACjB,MAAM,OAAO,KAAK,CAAC,CAAC;AACpB,KAAK;AACL,IAAI,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACrC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,GAAG,CAAC,OAAO,EAAE;AAC9C,QAAQ,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACrC,OAAO;AACP,KAAK,CAAC;AACN,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACxD,IAAI,OAAO,MAAM;AACjB,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC7D,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,EAAE,OAAO,MAAM,CAAC;AAChB;;;;"}
|
package/esm/use-form/use-form.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useState } from 'react';
|
|
2
|
+
import { getInputOnChange } from '../use-input-state/use-input-state.js';
|
|
2
3
|
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __defProps = Object.defineProperties;
|
|
@@ -21,10 +22,11 @@ var __spreadValues = (a, b) => {
|
|
|
21
22
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
22
23
|
function useForm({
|
|
23
24
|
initialValues,
|
|
24
|
-
validationRules = {}
|
|
25
|
+
validationRules = {},
|
|
26
|
+
errorMessages = {}
|
|
25
27
|
}) {
|
|
26
28
|
const initialErrors = Object.keys(initialValues).reduce((acc, field) => {
|
|
27
|
-
acc[field] =
|
|
29
|
+
acc[field] = null;
|
|
28
30
|
return acc;
|
|
29
31
|
}, {});
|
|
30
32
|
const [errors, setErrors] = useState(initialErrors);
|
|
@@ -38,10 +40,10 @@ function useForm({
|
|
|
38
40
|
let isValid = true;
|
|
39
41
|
const validationErrors = Object.keys(values).reduce((acc, field) => {
|
|
40
42
|
if (validationRules && typeof validationRules[field] === "function" && !validationRules[field](values[field], values)) {
|
|
41
|
-
acc[field] = true;
|
|
43
|
+
acc[field] = errorMessages[field] || true;
|
|
42
44
|
isValid = false;
|
|
43
45
|
} else {
|
|
44
|
-
acc[field] =
|
|
46
|
+
acc[field] = null;
|
|
45
47
|
}
|
|
46
48
|
return acc;
|
|
47
49
|
}, {});
|
|
@@ -49,17 +51,22 @@ function useForm({
|
|
|
49
51
|
return isValid;
|
|
50
52
|
};
|
|
51
53
|
const validateField = (field) => setErrors((currentErrors) => __spreadProps(__spreadValues({}, currentErrors), {
|
|
52
|
-
[field]: typeof validationRules[field] === "function" ?
|
|
54
|
+
[field]: typeof validationRules[field] === "function" ? validationRules[field](values[field], values) ? null : errorMessages[field] || true : null
|
|
53
55
|
}));
|
|
54
56
|
const setFieldError = (field, error) => setErrors((currentErrors) => __spreadProps(__spreadValues({}, currentErrors), { [field]: error }));
|
|
55
57
|
const setFieldValue = (field, value) => {
|
|
56
58
|
setValues((currentValues) => __spreadProps(__spreadValues({}, currentValues), { [field]: value }));
|
|
57
|
-
setFieldError(field,
|
|
59
|
+
setFieldError(field, null);
|
|
58
60
|
};
|
|
59
61
|
const onSubmit = (handleSubmit) => (event) => {
|
|
60
62
|
event && event.preventDefault();
|
|
61
63
|
validate() && handleSubmit(values);
|
|
62
64
|
};
|
|
65
|
+
const getInputProps = (field, options) => ({
|
|
66
|
+
[(options == null ? void 0 : options.type) === "checkbox" ? "checked" : "value"]: values[field],
|
|
67
|
+
onChange: getInputOnChange((val) => setFieldValue(field, val)),
|
|
68
|
+
error: errors[field] || void 0
|
|
69
|
+
});
|
|
63
70
|
return {
|
|
64
71
|
values,
|
|
65
72
|
errors,
|
|
@@ -71,7 +78,8 @@ function useForm({
|
|
|
71
78
|
setFieldError,
|
|
72
79
|
validateField,
|
|
73
80
|
resetErrors,
|
|
74
|
-
onSubmit
|
|
81
|
+
onSubmit,
|
|
82
|
+
getInputProps
|
|
75
83
|
};
|
|
76
84
|
}
|
|
77
85
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-form.js","sources":["../../src/use-form/use-form.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nexport type ValidationRule<T> = {\n readonly [P in keyof T]?: (value: T[P], values?: T) => boolean;\n};\n\nexport interface UseForm<T> {\n validationRules?: ValidationRule<T>;\n initialValues: T;\n}\n\nexport function useForm<T extends { [key: string]: any }>({\n initialValues,\n validationRules = {},\n}: UseForm<T>) {\n type ValidationErrors = Record<keyof T,
|
|
1
|
+
{"version":3,"file":"use-form.js","sources":["../../src/use-form/use-form.ts"],"sourcesContent":["import React, { useState } from 'react';\nimport { getInputOnChange } from '../use-input-state/use-input-state';\n\nexport type ValidationRule<T> = {\n readonly [P in keyof T]?: (value: T[P], values?: T) => boolean;\n};\n\nexport type UseFormErrors<T> = {\n readonly [P in keyof T]?: React.ReactNode | null;\n};\n\nexport interface UseForm<T> {\n validationRules?: ValidationRule<T>;\n errorMessages?: UseFormErrors<T>;\n initialValues: T;\n}\n\nexport function useForm<T extends { [key: string]: any }>({\n initialValues,\n validationRules = {},\n errorMessages = {},\n}: UseForm<T>) {\n type ValidationErrors = Record<keyof T, React.ReactNode>;\n\n const initialErrors = Object.keys(initialValues).reduce((acc, field) => {\n acc[field as keyof T] = null;\n return acc;\n }, {} as ValidationErrors);\n\n const [errors, setErrors] = useState(initialErrors);\n const [values, setValues] = useState(initialValues);\n\n const resetErrors = () => setErrors(initialErrors);\n\n const reset = () => {\n setValues(initialValues);\n resetErrors();\n };\n\n const validate = () => {\n let isValid = true;\n\n const validationErrors = Object.keys(values).reduce((acc, field) => {\n if (\n validationRules &&\n typeof validationRules[field] === 'function' &&\n !validationRules[field](values[field], values)\n ) {\n acc[field as keyof T] = errorMessages[field] || true;\n isValid = false;\n } else {\n acc[field as keyof T] = null;\n }\n\n return acc;\n }, {} as ValidationErrors);\n\n setErrors(validationErrors);\n return isValid;\n };\n\n const validateField = (field: keyof T) =>\n setErrors((currentErrors) => ({\n ...currentErrors,\n [field]:\n typeof validationRules[field] === 'function'\n ? validationRules[field](values[field], values)\n ? null\n : errorMessages[field] || true\n : null,\n }));\n\n const setFieldError = (field: keyof T, error: React.ReactNode) =>\n setErrors((currentErrors) => ({ ...currentErrors, [field]: error }));\n\n const setFieldValue = <K extends keyof T, U extends T[K]>(field: K, value: U) => {\n setValues((currentValues) => ({ ...currentValues, [field]: value }));\n setFieldError(field, null);\n };\n\n const onSubmit = (handleSubmit: (values: T) => any) => (event?: React.FormEvent) => {\n event && event.preventDefault();\n validate() && handleSubmit(values);\n };\n\n const getInputProps = <K extends keyof T, U extends T[K]>(\n field: K,\n options?: { type?: 'checkbox' | 'default' }\n ) => ({\n [options?.type === 'checkbox' ? 'checked' : 'value']: values[field],\n onChange: getInputOnChange<U>((val: U | null | undefined) => setFieldValue(field, val)),\n error: errors[field] || undefined,\n });\n\n return {\n values,\n errors,\n validate,\n reset,\n setErrors,\n setValues,\n setFieldValue,\n setFieldError,\n validateField,\n resetErrors,\n onSubmit,\n getInputProps,\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
|
|
3
|
+
function getInputOnChange(setValue) {
|
|
4
|
+
return (val) => {
|
|
5
|
+
if (!val) {
|
|
6
|
+
setValue(val);
|
|
7
|
+
} else if (typeof val === "function") {
|
|
8
|
+
setValue(val);
|
|
9
|
+
} else if (typeof val === "object" && "nativeEvent" in val) {
|
|
10
|
+
const { currentTarget } = val;
|
|
11
|
+
if (currentTarget.type === "checkbox") {
|
|
12
|
+
setValue(currentTarget.checked);
|
|
13
|
+
} else {
|
|
14
|
+
setValue(currentTarget.value);
|
|
15
|
+
}
|
|
16
|
+
} else {
|
|
17
|
+
setValue(val);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
function useInputState(initialState) {
|
|
22
|
+
const [value, setValue] = useState(initialState);
|
|
23
|
+
return [value, getInputOnChange(setValue)];
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export { getInputOnChange, useInputState };
|
|
27
|
+
//# sourceMappingURL=use-input-state.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-input-state.js","sources":["../../src/use-input-state/use-input-state.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nexport function getInputOnChange<T>(\n setValue: (value: null | undefined | T | ((current: T) => T)) => void\n) {\n return (val: T | React.ChangeEvent<any> | ((current: T) => T)) => {\n if (!val) {\n setValue(val as T);\n } else if (typeof val === 'function') {\n setValue(val);\n } else if (typeof val === 'object' && 'nativeEvent' in val) {\n const { currentTarget } = val;\n\n if (currentTarget.type === 'checkbox') {\n setValue((currentTarget as any).checked as any);\n } else {\n setValue(currentTarget.value as any);\n }\n } else {\n setValue(val);\n }\n };\n}\n\nexport function useInputState<T>(initialState: T) {\n const [value, setValue] = useState(initialState);\n return [value, getInputOnChange<T>(setValue)] as const;\n}\n"],"names":[],"mappings":";;AACO,SAAS,gBAAgB,CAAC,QAAQ,EAAE;AAC3C,EAAE,OAAO,CAAC,GAAG,KAAK;AAClB,IAAI,IAAI,CAAC,GAAG,EAAE;AACd,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC;AACpB,KAAK,MAAM,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;AAC1C,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC;AACpB,KAAK,MAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,aAAa,IAAI,GAAG,EAAE;AAChE,MAAM,MAAM,EAAE,aAAa,EAAE,GAAG,GAAG,CAAC;AACpC,MAAM,IAAI,aAAa,CAAC,IAAI,KAAK,UAAU,EAAE;AAC7C,QAAQ,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACxC,OAAO,MAAM;AACb,QAAQ,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACtC,OAAO;AACP,KAAK,MAAM;AACX,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC;AACpB,KAAK;AACL,GAAG,CAAC;AACJ,CAAC;AACM,SAAS,aAAa,CAAC,YAAY,EAAE;AAC5C,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACnD,EAAE,OAAO,CAAC,KAAK,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC7C;;;;"}
|
package/lib/index.d.ts
CHANGED
|
@@ -40,6 +40,7 @@ export { useHover } from './use-hover/use-hover';
|
|
|
40
40
|
export { useUuid } from './use-uuid/use-uuid';
|
|
41
41
|
export { useOs } from './use-os/use-os';
|
|
42
42
|
export { useSetState } from './use-set-state/use-set-state';
|
|
43
|
+
export { useInputState } from './use-input-state/use-input-state';
|
|
43
44
|
export type { UseMovePosition } from './use-move/use-move';
|
|
44
45
|
export type { OS } from './use-os/use-os';
|
|
45
46
|
//# sourceMappingURL=index.d.ts.map
|
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAElE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-trap.d.ts","sourceRoot":"","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-focus-trap.d.ts","sourceRoot":"","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,CAAC,MAAM,UAAO,GAAG,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAyElF"}
|
|
@@ -2,23 +2,34 @@ import React from 'react';
|
|
|
2
2
|
export declare type ValidationRule<T> = {
|
|
3
3
|
readonly [P in keyof T]?: (value: T[P], values?: T) => boolean;
|
|
4
4
|
};
|
|
5
|
+
export declare type UseFormErrors<T> = {
|
|
6
|
+
readonly [P in keyof T]?: React.ReactNode | null;
|
|
7
|
+
};
|
|
5
8
|
export interface UseForm<T> {
|
|
6
9
|
validationRules?: ValidationRule<T>;
|
|
10
|
+
errorMessages?: UseFormErrors<T>;
|
|
7
11
|
initialValues: T;
|
|
8
12
|
}
|
|
9
13
|
export declare function useForm<T extends {
|
|
10
14
|
[key: string]: any;
|
|
11
|
-
}>({ initialValues, validationRules, }: UseForm<T>): {
|
|
15
|
+
}>({ initialValues, validationRules, errorMessages, }: UseForm<T>): {
|
|
12
16
|
values: T;
|
|
13
|
-
errors: Record<keyof T,
|
|
17
|
+
errors: Record<keyof T, React.ReactNode>;
|
|
14
18
|
validate: () => boolean;
|
|
15
19
|
reset: () => void;
|
|
16
|
-
setErrors: React.Dispatch<React.SetStateAction<Record<keyof T,
|
|
20
|
+
setErrors: React.Dispatch<React.SetStateAction<Record<keyof T, React.ReactNode>>>;
|
|
17
21
|
setValues: React.Dispatch<React.SetStateAction<T>>;
|
|
18
22
|
setFieldValue: <K extends keyof T, U extends T[K]>(field: K, value: U) => void;
|
|
19
|
-
setFieldError: (field: keyof T, error:
|
|
23
|
+
setFieldError: (field: keyof T, error: React.ReactNode) => void;
|
|
20
24
|
validateField: (field: keyof T) => void;
|
|
21
25
|
resetErrors: () => void;
|
|
22
26
|
onSubmit: (handleSubmit: (values: T) => any) => (event?: React.FormEvent) => void;
|
|
27
|
+
getInputProps: <K_1 extends keyof T, U_1 extends T[K_1]>(field: K_1, options?: {
|
|
28
|
+
type?: 'checkbox' | 'default';
|
|
29
|
+
}) => {
|
|
30
|
+
[x: string]: T[K_1] | Record<keyof T, React.ReactNode>[K_1];
|
|
31
|
+
onChange: (val: React.ChangeEvent<any> | U_1 | ((current: U_1) => U_1)) => void;
|
|
32
|
+
error: Record<keyof T, React.ReactNode>[K_1];
|
|
33
|
+
};
|
|
23
34
|
};
|
|
24
35
|
//# sourceMappingURL=use-form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-form.d.ts","sourceRoot":"","sources":["../../src/use-form/use-form.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-form.d.ts","sourceRoot":"","sources":["../../src/use-form/use-form.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,oBAAY,cAAc,CAAC,CAAC,IAAI;IAC9B,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,KAAK,OAAO;CAC/D,CAAC;AAEF,oBAAY,aAAa,CAAC,CAAC,IAAI;IAC7B,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;CACjD,CAAC;AAEF,MAAM,WAAW,OAAO,CAAC,CAAC;IACxB,eAAe,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACjC,aAAa,EAAE,CAAC,CAAC;CAClB;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,EACxD,aAAa,EACb,eAAoB,EACpB,aAAkB,GACnB,EAAE,OAAO,CAAC,CAAC,CAAC;;;;;;;;2BAmDmB,MAAM,CAAC,SAAS,MAAM,SAAS;2BAX/B,MAAM,CAAC;;sCAmBI,CAAC,KAAK,GAAG,cAAc,MAAM,SAAS;mFAOnE;QAAE,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;KAAE;;;;;EAqB9C"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare function getInputOnChange<T>(setValue: (value: null | undefined | T | ((current: T) => T)) => void): (val: T | React.ChangeEvent<any> | ((current: T) => T)) => void;
|
|
3
|
+
export declare function useInputState<T>(initialState: T): readonly [T, (val: React.ChangeEvent<any> | T | ((current: T) => T)) => void];
|
|
4
|
+
//# sourceMappingURL=use-input-state.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-input-state.d.ts","sourceRoot":"","sources":["../../src/use-input-state/use-input-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,iDAEhB,CAAC,KAAK,CAAC,WAiB7D;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,iFAG/C"}
|
package/package.json
CHANGED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var tabbable = require('./tabbable.js');
|
|
6
|
-
|
|
7
|
-
const focusLaterElements = [];
|
|
8
|
-
let focusElement = null;
|
|
9
|
-
let needToFocus = false;
|
|
10
|
-
function handleBlur() {
|
|
11
|
-
needToFocus = true;
|
|
12
|
-
}
|
|
13
|
-
function handleFocus() {
|
|
14
|
-
if (needToFocus) {
|
|
15
|
-
needToFocus = false;
|
|
16
|
-
if (!focusElement) {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
if (focusElement.contains(document.activeElement)) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
const el = tabbable.findTabbableDescendants(focusElement)[0] || focusElement;
|
|
23
|
-
el.focus();
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
function markForFocusLater() {
|
|
27
|
-
focusLaterElements.push(document.activeElement);
|
|
28
|
-
}
|
|
29
|
-
function returnFocus() {
|
|
30
|
-
let toFocus = null;
|
|
31
|
-
try {
|
|
32
|
-
toFocus = focusLaterElements.pop();
|
|
33
|
-
if (toFocus)
|
|
34
|
-
toFocus.focus();
|
|
35
|
-
} catch (e) {
|
|
36
|
-
console.warn([
|
|
37
|
-
"[@mantine/hooks/use-focus-trap] Focus was returned to",
|
|
38
|
-
toFocus,
|
|
39
|
-
"but dom node does not exist"
|
|
40
|
-
].join(" "));
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
function setupScopedFocus(element) {
|
|
44
|
-
focusElement = element;
|
|
45
|
-
document.addEventListener("focusout", handleBlur, false);
|
|
46
|
-
document.addEventListener("focusin", handleFocus, true);
|
|
47
|
-
}
|
|
48
|
-
function teardownScopedFocus() {
|
|
49
|
-
focusElement = null;
|
|
50
|
-
document.removeEventListener("focusout", handleBlur);
|
|
51
|
-
document.removeEventListener("focusin", handleFocus);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
exports.markForFocusLater = markForFocusLater;
|
|
55
|
-
exports.returnFocus = returnFocus;
|
|
56
|
-
exports.setupScopedFocus = setupScopedFocus;
|
|
57
|
-
exports.teardownScopedFocus = teardownScopedFocus;
|
|
58
|
-
//# sourceMappingURL=focus-manager.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"focus-manager.js","sources":["../../src/use-focus-trap/focus-manager.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\nconst focusLaterElements: HTMLElement[] = [];\nlet focusElement: HTMLElement = null;\nlet needToFocus = false;\n\nfunction handleBlur() {\n needToFocus = true;\n}\n\nfunction handleFocus() {\n if (needToFocus) {\n needToFocus = false;\n\n if (!focusElement) {\n return;\n }\n\n if (focusElement.contains(document.activeElement)) {\n return;\n }\n\n const el = findTabbableDescendants(focusElement)[0] || focusElement;\n el.focus();\n }\n}\n\nexport function markForFocusLater() {\n focusLaterElements.push(document.activeElement as HTMLElement);\n}\n\nexport function returnFocus() {\n let toFocus = null;\n try {\n toFocus = focusLaterElements.pop();\n if (toFocus) toFocus.focus();\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn(\n [\n '[@mantine/hooks/use-focus-trap] Focus was returned to',\n toFocus,\n 'but dom node does not exist',\n ].join(' ')\n );\n }\n}\n\nexport function setupScopedFocus(element: HTMLElement) {\n focusElement = element;\n document.addEventListener('focusout', handleBlur, false);\n document.addEventListener('focusin', handleFocus, true);\n}\n\nexport function teardownScopedFocus() {\n focusElement = null;\n document.removeEventListener('focusout', handleBlur);\n document.removeEventListener('focusin', handleFocus);\n}\n"],"names":["findTabbableDescendants"],"mappings":";;;;;;AACA,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,IAAI,YAAY,GAAG,IAAI,CAAC;AACxB,IAAI,WAAW,GAAG,KAAK,CAAC;AACxB,SAAS,UAAU,GAAG;AACtB,EAAE,WAAW,GAAG,IAAI,CAAC;AACrB,CAAC;AACD,SAAS,WAAW,GAAG;AACvB,EAAE,IAAI,WAAW,EAAE;AACnB,IAAI,WAAW,GAAG,KAAK,CAAC;AACxB,IAAI,IAAI,CAAC,YAAY,EAAE;AACvB,MAAM,OAAO;AACb,KAAK;AACL,IAAI,IAAI,YAAY,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;AACvD,MAAM,OAAO;AACb,KAAK;AACL,IAAI,MAAM,EAAE,GAAGA,gCAAuB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,YAAY,CAAC;AACxE,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;AACf,GAAG;AACH,CAAC;AACM,SAAS,iBAAiB,GAAG;AACpC,EAAE,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;AAClD,CAAC;AACM,SAAS,WAAW,GAAG;AAC9B,EAAE,IAAI,OAAO,GAAG,IAAI,CAAC;AACrB,EAAE,IAAI;AACN,IAAI,OAAO,GAAG,kBAAkB,CAAC,GAAG,EAAE,CAAC;AACvC,IAAI,IAAI,OAAO;AACf,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;AACtB,GAAG,CAAC,OAAO,CAAC,EAAE;AACd,IAAI,OAAO,CAAC,IAAI,CAAC;AACjB,MAAM,uDAAuD;AAC7D,MAAM,OAAO;AACb,MAAM,6BAA6B;AACnC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACjB,GAAG;AACH,CAAC;AACM,SAAS,gBAAgB,CAAC,OAAO,EAAE;AAC1C,EAAE,YAAY,GAAG,OAAO,CAAC;AACzB,EAAE,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;AAC3D,EAAE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;AAC1D,CAAC;AACM,SAAS,mBAAmB,GAAG;AACtC,EAAE,YAAY,GAAG,IAAI,CAAC;AACtB,EAAE,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AACvD,EAAE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AACvD;;;;;;;"}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { findTabbableDescendants } from './tabbable.js';
|
|
2
|
-
|
|
3
|
-
const focusLaterElements = [];
|
|
4
|
-
let focusElement = null;
|
|
5
|
-
let needToFocus = false;
|
|
6
|
-
function handleBlur() {
|
|
7
|
-
needToFocus = true;
|
|
8
|
-
}
|
|
9
|
-
function handleFocus() {
|
|
10
|
-
if (needToFocus) {
|
|
11
|
-
needToFocus = false;
|
|
12
|
-
if (!focusElement) {
|
|
13
|
-
return;
|
|
14
|
-
}
|
|
15
|
-
if (focusElement.contains(document.activeElement)) {
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
const el = findTabbableDescendants(focusElement)[0] || focusElement;
|
|
19
|
-
el.focus();
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
function markForFocusLater() {
|
|
23
|
-
focusLaterElements.push(document.activeElement);
|
|
24
|
-
}
|
|
25
|
-
function returnFocus() {
|
|
26
|
-
let toFocus = null;
|
|
27
|
-
try {
|
|
28
|
-
toFocus = focusLaterElements.pop();
|
|
29
|
-
if (toFocus)
|
|
30
|
-
toFocus.focus();
|
|
31
|
-
} catch (e) {
|
|
32
|
-
console.warn([
|
|
33
|
-
"[@mantine/hooks/use-focus-trap] Focus was returned to",
|
|
34
|
-
toFocus,
|
|
35
|
-
"but dom node does not exist"
|
|
36
|
-
].join(" "));
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
function setupScopedFocus(element) {
|
|
40
|
-
focusElement = element;
|
|
41
|
-
document.addEventListener("focusout", handleBlur, false);
|
|
42
|
-
document.addEventListener("focusin", handleFocus, true);
|
|
43
|
-
}
|
|
44
|
-
function teardownScopedFocus() {
|
|
45
|
-
focusElement = null;
|
|
46
|
-
document.removeEventListener("focusout", handleBlur);
|
|
47
|
-
document.removeEventListener("focusin", handleFocus);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export { markForFocusLater, returnFocus, setupScopedFocus, teardownScopedFocus };
|
|
51
|
-
//# sourceMappingURL=focus-manager.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"focus-manager.js","sources":["../../src/use-focus-trap/focus-manager.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\nconst focusLaterElements: HTMLElement[] = [];\nlet focusElement: HTMLElement = null;\nlet needToFocus = false;\n\nfunction handleBlur() {\n needToFocus = true;\n}\n\nfunction handleFocus() {\n if (needToFocus) {\n needToFocus = false;\n\n if (!focusElement) {\n return;\n }\n\n if (focusElement.contains(document.activeElement)) {\n return;\n }\n\n const el = findTabbableDescendants(focusElement)[0] || focusElement;\n el.focus();\n }\n}\n\nexport function markForFocusLater() {\n focusLaterElements.push(document.activeElement as HTMLElement);\n}\n\nexport function returnFocus() {\n let toFocus = null;\n try {\n toFocus = focusLaterElements.pop();\n if (toFocus) toFocus.focus();\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn(\n [\n '[@mantine/hooks/use-focus-trap] Focus was returned to',\n toFocus,\n 'but dom node does not exist',\n ].join(' ')\n );\n }\n}\n\nexport function setupScopedFocus(element: HTMLElement) {\n focusElement = element;\n document.addEventListener('focusout', handleBlur, false);\n document.addEventListener('focusin', handleFocus, true);\n}\n\nexport function teardownScopedFocus() {\n focusElement = null;\n document.removeEventListener('focusout', handleBlur);\n document.removeEventListener('focusin', handleFocus);\n}\n"],"names":[],"mappings":";;AACA,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,IAAI,YAAY,GAAG,IAAI,CAAC;AACxB,IAAI,WAAW,GAAG,KAAK,CAAC;AACxB,SAAS,UAAU,GAAG;AACtB,EAAE,WAAW,GAAG,IAAI,CAAC;AACrB,CAAC;AACD,SAAS,WAAW,GAAG;AACvB,EAAE,IAAI,WAAW,EAAE;AACnB,IAAI,WAAW,GAAG,KAAK,CAAC;AACxB,IAAI,IAAI,CAAC,YAAY,EAAE;AACvB,MAAM,OAAO;AACb,KAAK;AACL,IAAI,IAAI,YAAY,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;AACvD,MAAM,OAAO;AACb,KAAK;AACL,IAAI,MAAM,EAAE,GAAG,uBAAuB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,YAAY,CAAC;AACxE,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;AACf,GAAG;AACH,CAAC;AACM,SAAS,iBAAiB,GAAG;AACpC,EAAE,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;AAClD,CAAC;AACM,SAAS,WAAW,GAAG;AAC9B,EAAE,IAAI,OAAO,GAAG,IAAI,CAAC;AACrB,EAAE,IAAI;AACN,IAAI,OAAO,GAAG,kBAAkB,CAAC,GAAG,EAAE,CAAC;AACvC,IAAI,IAAI,OAAO;AACf,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;AACtB,GAAG,CAAC,OAAO,CAAC,EAAE;AACd,IAAI,OAAO,CAAC,IAAI,CAAC;AACjB,MAAM,uDAAuD;AAC7D,MAAM,OAAO;AACb,MAAM,6BAA6B;AACnC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACjB,GAAG;AACH,CAAC;AACM,SAAS,gBAAgB,CAAC,OAAO,EAAE;AAC1C,EAAE,YAAY,GAAG,OAAO,CAAC;AACzB,EAAE,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;AAC3D,EAAE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;AAC1D,CAAC;AACM,SAAS,mBAAmB,GAAG;AACtC,EAAE,YAAY,GAAG,IAAI,CAAC;AACtB,EAAE,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AACvD,EAAE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AACvD;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"focus-manager.d.ts","sourceRoot":"","sources":["../../src/use-focus-trap/focus-manager.ts"],"names":[],"mappings":"AA2BA,wBAAgB,iBAAiB,SAEhC;AAED,wBAAgB,WAAW,SAe1B;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,QAIpD;AAED,wBAAgB,mBAAmB,SAIlC"}
|