@salutejs/plasma-new-hope 0.336.1-canary.2248.17954715092.0 → 0.336.1-canary.2249.17913864682.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Autocomplete/Autocomplete.css +2 -2
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +2 -2
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +2 -2
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +2 -2
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +2 -2
- package/cjs/components/InformationWrapper/InformationWrapper.css +2 -2
- package/cjs/components/InformationWrapper/ui/Label/Label.css +2 -2
- package/cjs/components/Modal/Modal.js +2 -4
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/Pagination/Pagination.css +2 -2
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +2 -2
- package/cjs/components/Range/Range.css +2 -2
- package/cjs/components/Select/Select.css +2 -2
- package/cjs/components/Select/ui/Target/Target.css +2 -2
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +2 -2
- package/cjs/components/Slider/Slider.css +2 -2
- package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +2 -2
- package/cjs/components/Table/Table.css +2 -2
- package/cjs/components/Table/ui/Cell/Cell.css +2 -2
- package/cjs/components/Table/ui/EditableCell/EditableCell.css +2 -2
- package/cjs/components/Table/ui/HeadCell/HeadCell.css +2 -2
- package/cjs/components/Table/ui/HeadCell/ui/Filter/Filter.css +2 -2
- package/cjs/components/TextArea/ui/Hint/Hint.css +2 -2
- package/cjs/components/TextField/ui/Hint/Hint.css +2 -2
- package/cjs/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.css +2 -2
- package/cjs/components/Tooltip/Tooltip.styles.js +5 -5
- package/cjs/components/Tooltip/Tooltip.styles.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.styles_uldg0s.css +2 -0
- package/cjs/hooks/useFocusTrap.js +5 -11
- package/cjs/hooks/useFocusTrap.js.map +1 -1
- package/cjs/index.css +2 -2
- package/cjs/utils/scopeTab.js +2 -2
- package/cjs/utils/scopeTab.js.map +1 -1
- package/emotion/cjs/components/Modal/Modal.js +2 -3
- package/emotion/cjs/components/Tooltip/Tooltip.styles.js +5 -5
- package/emotion/cjs/examples/components/Combobox/Combobox.js +15 -0
- package/emotion/cjs/hooks/useFocusTrap.js +5 -12
- package/emotion/cjs/utils/scopeTab.js +2 -2
- package/emotion/es/components/Modal/Modal.js +2 -3
- package/emotion/es/components/Tooltip/Tooltip.styles.js +5 -5
- package/emotion/es/hooks/useFocusTrap.js +5 -12
- package/emotion/es/utils/scopeTab.js +2 -2
- package/es/components/Autocomplete/Autocomplete.css +2 -2
- package/es/components/Combobox/ComboboxNew/Combobox.css +2 -2
- package/es/components/DatePicker/RangeDate/RangeDate.css +2 -2
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +2 -2
- package/es/components/DatePicker/SingleDate/SingleDate.css +2 -2
- package/es/components/InformationWrapper/InformationWrapper.css +2 -2
- package/es/components/InformationWrapper/ui/Label/Label.css +2 -2
- package/es/components/Modal/Modal.js +2 -4
- package/es/components/Modal/Modal.js.map +1 -1
- package/es/components/Pagination/Pagination.css +2 -2
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +2 -2
- package/es/components/Range/Range.css +2 -2
- package/es/components/Select/Select.css +2 -2
- package/es/components/Select/ui/Target/Target.css +2 -2
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +2 -2
- package/es/components/Slider/Slider.css +2 -2
- package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +2 -2
- package/es/components/Table/Table.css +2 -2
- package/es/components/Table/ui/Cell/Cell.css +2 -2
- package/es/components/Table/ui/EditableCell/EditableCell.css +2 -2
- package/es/components/Table/ui/HeadCell/HeadCell.css +2 -2
- package/es/components/Table/ui/HeadCell/ui/Filter/Filter.css +2 -2
- package/es/components/TextArea/ui/Hint/Hint.css +2 -2
- package/es/components/TextField/ui/Hint/Hint.css +2 -2
- package/es/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.css +2 -2
- package/es/components/Tooltip/Tooltip.styles.js +5 -5
- package/es/components/Tooltip/Tooltip.styles.js.map +1 -1
- package/es/components/Tooltip/Tooltip.styles_uldg0s.css +2 -0
- package/es/hooks/useFocusTrap.js +5 -11
- package/es/hooks/useFocusTrap.js.map +1 -1
- package/es/index.css +2 -2
- package/es/utils/scopeTab.js +2 -2
- package/es/utils/scopeTab.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Modal/Modal.js +2 -3
- package/styled-components/cjs/components/Tooltip/Tooltip.styles.js +9 -9
- package/styled-components/cjs/hooks/useFocusTrap.js +5 -12
- package/styled-components/cjs/utils/scopeTab.js +2 -2
- package/styled-components/es/components/Modal/Modal.js +2 -3
- package/styled-components/es/components/Tooltip/Tooltip.styles.js +9 -9
- package/styled-components/es/examples/components/Combobox/Combobox.js +0 -7
- package/styled-components/es/hooks/useFocusTrap.js +5 -12
- package/styled-components/es/utils/scopeTab.js +2 -2
- package/types/components/Modal/Modal.d.ts.map +1 -1
- package/types/components/Modal/Modal.types.d.ts +0 -5
- package/types/components/Modal/Modal.types.d.ts.map +1 -1
- package/types/components/Tooltip/Tooltip.styles.d.ts.map +1 -1
- package/types/hooks/useFocusTrap.d.ts +1 -1
- package/types/hooks/useFocusTrap.d.ts.map +1 -1
- package/types/utils/scopeTab.d.ts +1 -1
- package/types/utils/scopeTab.d.ts.map +1 -1
- package/cjs/components/Tooltip/Tooltip.styles_1bh0sd0.css +0 -2
- package/es/components/Tooltip/Tooltip.styles_1bh0sd0.css +0 -2
package/es/hooks/useFocusTrap.js
CHANGED
|
@@ -47,14 +47,13 @@ var useFocusTrap = function useFocusTrap() {
|
|
|
47
47
|
var firstFocusSelector = arguments.length > 1 ? arguments[1] : undefined;
|
|
48
48
|
var focusAfterNode = arguments.length > 2 ? arguments[2] : undefined;
|
|
49
49
|
var focusAfterAnimation = arguments.length > 3 ? arguments[3] : undefined;
|
|
50
|
-
var enableOnFirstMount = arguments.length > 4 ? arguments[4] : undefined;
|
|
51
50
|
var ref = useRef();
|
|
52
51
|
var setRef = useCallback(function (node) {
|
|
53
52
|
if (ref.current) {
|
|
54
53
|
focusManager.teardownScopedFocus();
|
|
55
54
|
focusManager.returnFocus();
|
|
56
55
|
}
|
|
57
|
-
if (
|
|
56
|
+
if (active && node) {
|
|
58
57
|
focusManager.setupScopedFocus(node);
|
|
59
58
|
focusManager.markForFocusAfter(focusAfterNode);
|
|
60
59
|
|
|
@@ -72,26 +71,21 @@ var useFocusTrap = function useFocusTrap() {
|
|
|
72
71
|
return;
|
|
73
72
|
}
|
|
74
73
|
ref.current = null;
|
|
75
|
-
}, [active,
|
|
74
|
+
}, [active, firstFocusSelector]);
|
|
76
75
|
useEffect(function () {
|
|
77
|
-
if (!active
|
|
76
|
+
if (!active) {
|
|
78
77
|
return;
|
|
79
78
|
}
|
|
80
79
|
var handleKeyDown = function handleKeyDown(event) {
|
|
81
80
|
if (event.key === 'Tab' && ref.current) {
|
|
82
|
-
scopeTab(ref.current, event
|
|
83
|
-
if (enableOnFirstMount) {
|
|
84
|
-
setTimeout(function () {
|
|
85
|
-
focusManager.teardownScopedFocus();
|
|
86
|
-
});
|
|
87
|
-
}
|
|
81
|
+
scopeTab(ref.current, event);
|
|
88
82
|
}
|
|
89
83
|
};
|
|
90
84
|
document.addEventListener('keydown', handleKeyDown);
|
|
91
85
|
return function () {
|
|
92
86
|
document.removeEventListener('keydown', handleKeyDown);
|
|
93
87
|
};
|
|
94
|
-
}, [active
|
|
88
|
+
}, [active]);
|
|
95
89
|
return setRef;
|
|
96
90
|
};
|
|
97
91
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nimport { FocusManager } from '../utils/focusManager';\nimport { focusSelector, isFocusable, isTabble } from '../utils/tabbable';\nimport { scopeTab } from '../utils/scopeTab';\n\n// Находим элемент для фокуса\nconst getFocusElement = (\n node: HTMLElement,\n firstFocusSelector?: string | React.RefObject<HTMLElement>,\n): HTMLElement | null => {\n let focusElement: HTMLElement | null = null;\n if (firstFocusSelector) {\n if (typeof firstFocusSelector === 'string') {\n focusElement = node.querySelector(firstFocusSelector);\n } else if (firstFocusSelector.current) {\n focusElement = firstFocusSelector.current;\n }\n }\n\n if (!focusElement) {\n const children = Array.from<HTMLElement>(node.querySelectorAll(focusSelector));\n focusElement = children.find((el) => isTabble(el)) || null;\n }\n\n // Если ничего не нашлось, то может ли сама нода быть под фокусом\n if (!focusElement && isFocusable(node)) {\n focusElement = node;\n }\n\n return focusElement;\n};\n\nconst processNode = (\n node: HTMLElement,\n firstFocusSelector?: string | React.RefObject<HTMLElement>,\n ref?: React.MutableRefObject<HTMLElement | null | undefined>,\n) => {\n if (ref?.current) {\n ref.current.removeEventListener('animationend', () => {\n processNode(node, firstFocusSelector, ref);\n });\n }\n const focusElement = getFocusElement(node, firstFocusSelector);\n\n if (focusElement) {\n focusElement.focus();\n }\n};\n\nconst focusManager = new FocusManager();\n\n/**\n * Захватывает фокус внутри DOM node.\n * */\nexport const useFocusTrap = (\n active = true,\n firstFocusSelector?: string | React.RefObject<HTMLElement>,\n focusAfterNode?: React.RefObject<HTMLElement>,\n focusAfterAnimation?: boolean,\n
|
|
1
|
+
{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nimport { FocusManager } from '../utils/focusManager';\nimport { focusSelector, isFocusable, isTabble } from '../utils/tabbable';\nimport { scopeTab } from '../utils/scopeTab';\n\n// Находим элемент для фокуса\nconst getFocusElement = (\n node: HTMLElement,\n firstFocusSelector?: string | React.RefObject<HTMLElement>,\n): HTMLElement | null => {\n let focusElement: HTMLElement | null = null;\n if (firstFocusSelector) {\n if (typeof firstFocusSelector === 'string') {\n focusElement = node.querySelector(firstFocusSelector);\n } else if (firstFocusSelector.current) {\n focusElement = firstFocusSelector.current;\n }\n }\n\n if (!focusElement) {\n const children = Array.from<HTMLElement>(node.querySelectorAll(focusSelector));\n focusElement = children.find((el) => isTabble(el)) || null;\n }\n\n // Если ничего не нашлось, то может ли сама нода быть под фокусом\n if (!focusElement && isFocusable(node)) {\n focusElement = node;\n }\n\n return focusElement;\n};\n\nconst processNode = (\n node: HTMLElement,\n firstFocusSelector?: string | React.RefObject<HTMLElement>,\n ref?: React.MutableRefObject<HTMLElement | null | undefined>,\n) => {\n if (ref?.current) {\n ref.current.removeEventListener('animationend', () => {\n processNode(node, firstFocusSelector, ref);\n });\n }\n const focusElement = getFocusElement(node, firstFocusSelector);\n\n if (focusElement) {\n focusElement.focus();\n }\n};\n\nconst focusManager = new FocusManager();\n\n/**\n * Захватывает фокус внутри DOM node.\n * */\nexport const useFocusTrap = (\n active = true,\n firstFocusSelector?: string | React.RefObject<HTMLElement>,\n focusAfterNode?: React.RefObject<HTMLElement>,\n focusAfterAnimation?: boolean,\n): ((instance: HTMLElement | null) => void) => {\n const ref = useRef<HTMLElement | null>();\n\n const setRef = useCallback(\n (node: HTMLElement | null) => {\n if (ref.current) {\n focusManager.teardownScopedFocus();\n focusManager.returnFocus();\n }\n\n if (active && node) {\n focusManager.setupScopedFocus(node);\n focusManager.markForFocusAfter(focusAfterNode);\n\n // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (ref?.current && node.ownerDocument && focusAfterAnimation) {\n ref.current.addEventListener('animationend', () => {\n processNode(node, firstFocusSelector, ref);\n });\n } else if (node.ownerDocument) {\n processNode(node, firstFocusSelector);\n }\n });\n\n ref.current = node;\n return;\n }\n\n ref.current = null;\n },\n [active, firstFocusSelector],\n );\n\n useEffect(() => {\n if (!active) {\n return;\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":["getFocusElement","node","firstFocusSelector","focusElement","querySelector","current","children","Array","from","querySelectorAll","focusSelector","find","el","isTabble","isFocusable","processNode","ref","removeEventListener","focus","focusManager","FocusManager","useFocusTrap","active","arguments","length","undefined","focusAfterNode","focusAfterAnimation","useRef","setRef","useCallback","teardownScopedFocus","returnFocus","setupScopedFocus","markForFocusAfter","setTimeout","ownerDocument","addEventListener","useEffect","handleKeyDown","event","key","scopeTab","document"],"mappings":"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"}
|
package/es/index.css
CHANGED
|
@@ -461,8 +461,8 @@
|
|
|
461
461
|
.Dropdown_styles_3w3l45_s1rwu6ky__59648b20 .Dropdown_styles_3w3l45_popoverTarget__59648b20{display:block;}
|
|
462
462
|
.Dropdown_styles_3w3l45_s10jhp3l__59648b20{box-sizing:border-box;background:var(--plasma-dropdown-background);box-shadow:var(--plasma-dropdown-box-shadow);border-radius:var(--plasma-dropdown-border-radius);width:var(--plasma-dropdown-width);height:var(--plasma-dropdown-height);padding:var(--plasma-dropdown-padding-top) var(--plasma-dropdown-padding-right) var(--plasma-dropdown-padding-bottom) var(--plasma-dropdown-padding-left);}
|
|
463
463
|
|
|
464
|
-
.
|
|
465
|
-
.
|
|
464
|
+
.Tooltip_styles_uldg0s_teczcv4__f329846b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--plasma-tooltip-padding-top) var(--plasma-tooltip-padding-right) var(--plasma-tooltip-padding-bottom) var(--plasma-tooltip-padding-left);min-height:var(--plasma-tooltip-min-height);max-width:var(--teczcv4-0);min-width:var(--teczcv4-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;background-color:var(--plasma-tooltip-background-color);border-radius:var(--plasma-tooltip-border-radius);box-shadow:var(--plasma-tooltip-box-shadow);color:var(--plasma-tooltip-color);font-family:var(--plasma-tooltip-text-font-family);font-size:var(--plasma-tooltip-text-font-size);font-style:var(--plasma-tooltip-text-font-style);font-weight:var(--plasma-tooltip-text-font-weight);-webkit-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-moz-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-ms-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);line-height:var(--plasma-tooltip-text-font-line-height);box-sizing:border-box;word-break:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
|
|
465
|
+
.Tooltip_styles_uldg0s_s1j361h1__f329846b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--plasma-tooltip-content-left-margin);height:var(--plasma-tooltip-text-font-line-height);}
|
|
466
466
|
|
|
467
467
|
.Tooltip_1qsg6ij_s1cz8cv8__da7f9e0a{--plasma-popover-arrow-mask-width:var(--plasma-tooltip-arrow-mask-width);--plasma-popover-arrow-mask-height:var(--plasma-tooltip-arrow-mask-height);--plasma-popover-arrow-mask-image:var(--plasma-tooltip-arrow-mask-image);--plasma-popover-arrow-background:var(--plasma-tooltip-arrow-background);--plasma-popover-arrow-height:var(--plasma-tooltip-arrow-height);--plasma-popover-arrow-edge-margin:var(--plasma-tooltip-arrow-edge-margin);}
|
|
468
468
|
|
package/es/utils/scopeTab.js
CHANGED
|
@@ -5,7 +5,7 @@ import { findTabbableDescendants } from './tabbable.js';
|
|
|
5
5
|
* @param node
|
|
6
6
|
* @param event
|
|
7
7
|
*/
|
|
8
|
-
var scopeTab = function scopeTab(node, event
|
|
8
|
+
var scopeTab = function scopeTab(node, event) {
|
|
9
9
|
var tabbable = findTabbableDescendants(node);
|
|
10
10
|
if (!tabbable.length) {
|
|
11
11
|
event.preventDefault();
|
|
@@ -17,7 +17,7 @@ var scopeTab = function scopeTab(node, event, activeFocusTrap) {
|
|
|
17
17
|
var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
|
|
18
18
|
|
|
19
19
|
// если не является, то передаем обработку таба самому браузеру
|
|
20
|
-
if (!leavingFinalTabbable
|
|
20
|
+
if (!leavingFinalTabbable) {
|
|
21
21
|
return;
|
|
22
22
|
}
|
|
23
23
|
|
package/es/utils/scopeTab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scopeTab.js","sources":["../../src/utils/scopeTab.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\n/**\n * Управлление фокусом лишь внутри ноды через tab\n * @param node\n * @param event\n */\nexport const scopeTab = (node: HTMLElement, event: KeyboardEvent
|
|
1
|
+
{"version":3,"file":"scopeTab.js","sources":["../../src/utils/scopeTab.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\n/**\n * Управлление фокусом лишь внутри ноды через tab\n * @param node\n * @param event\n */\nexport const scopeTab = (node: HTMLElement, event: KeyboardEvent) => {\n const tabbable = findTabbableDescendants(node);\n if (!tabbable.length) {\n event.preventDefault();\n return;\n }\n\n // смотрим, является ли элемент крайним - первый или последним\n const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];\n const leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;\n\n // если не является, то передаем обработку таба самому браузеру\n if (!leavingFinalTabbable) {\n return;\n }\n\n // иначе зацкливаемся\n event.preventDefault();\n const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];\n if (target) {\n target.focus();\n }\n};\n"],"names":["scopeTab","node","event","tabbable","findTabbableDescendants","length","preventDefault","finalTabbable","shiftKey","leavingFinalTabbable","document","activeElement","target","focus"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,IAAiB,EAAEC,KAAoB,EAAK;AACjE,EAAA,IAAMC,QAAQ,GAAGC,uBAAuB,CAACH,IAAI,CAAC,CAAA;AAC9C,EAAA,IAAI,CAACE,QAAQ,CAACE,MAAM,EAAE;IAClBH,KAAK,CAACI,cAAc,EAAE,CAAA;AACtB,IAAA,OAAA;AACJ,GAAA;;AAEA;AACA,EAAA,IAAMC,aAAa,GAAGJ,QAAQ,CAACD,KAAK,CAACM,QAAQ,GAAG,CAAC,GAAGL,QAAQ,CAACE,MAAM,GAAG,CAAC,CAAC,CAAA;AACxE,EAAA,IAAMI,oBAAoB,GAAGF,aAAa,KAAKG,QAAQ,CAACC,aAAa,IAAIV,IAAI,KAAKS,QAAQ,CAACC,aAAa,CAAA;;AAExG;EACA,IAAI,CAACF,oBAAoB,EAAE;AACvB,IAAA,OAAA;AACJ,GAAA;;AAEA;EACAP,KAAK,CAACI,cAAc,EAAE,CAAA;AACtB,EAAA,IAAMM,MAAM,GAAGT,QAAQ,CAACD,KAAK,CAACM,QAAQ,GAAGL,QAAQ,CAACE,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AACjE,EAAA,IAAIO,MAAM,EAAE;IACRA,MAAM,CAACC,KAAK,EAAE,CAAA;AAClB,GAAA;AACJ;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
|
3
|
-
"version": "0.336.1-canary.
|
|
3
|
+
"version": "0.336.1-canary.2249.17913864682.0",
|
|
4
4
|
"description": "Salute Design System blueprint",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -137,5 +137,5 @@
|
|
|
137
137
|
"sideEffects": [
|
|
138
138
|
"*.css"
|
|
139
139
|
],
|
|
140
|
-
"gitHead": "
|
|
140
|
+
"gitHead": "cb4112baba52bb8fc16c1c29c0c25298a43bdc73"
|
|
141
141
|
}
|
|
@@ -130,7 +130,7 @@ function _object_without_properties_loose(source, excluded) {
|
|
|
130
130
|
var Popup = (0, _engines.component)(_Popup.popupConfig);
|
|
131
131
|
var modalRoot = function(Root) {
|
|
132
132
|
return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, outerRootRef) {
|
|
133
|
-
var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur,
|
|
133
|
+
var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, zIndex = _param.zIndex, popupInfo = _param.popupInfo, children = _param.children, view = _param.view, opened = _param.opened, isOpen = _param.isOpen, hasBody = _param.hasBody, hasClose = _param.hasClose, resizable = _param.resizable, draggable = _param.draggable, rest = _object_without_properties(_param, [
|
|
134
134
|
"id",
|
|
135
135
|
"withAnimation",
|
|
136
136
|
"onClose",
|
|
@@ -139,7 +139,6 @@ var modalRoot = function(Root) {
|
|
|
139
139
|
"closeOnEsc",
|
|
140
140
|
"closeOnOverlayClick",
|
|
141
141
|
"withBlur",
|
|
142
|
-
"isFocusTrapped",
|
|
143
142
|
"initialFocusRef",
|
|
144
143
|
"focusAfterRef",
|
|
145
144
|
"zIndex",
|
|
@@ -155,7 +154,7 @@ var modalRoot = function(Root) {
|
|
|
155
154
|
]);
|
|
156
155
|
var innerIsOpen = Boolean(isOpen || opened);
|
|
157
156
|
var innerHasClose = hasClose === undefined && hasBody || hasClose;
|
|
158
|
-
var trapRef = (0, _hooks.useFocusTrap)(
|
|
157
|
+
var trapRef = (0, _hooks.useFocusTrap)(true, initialFocusRef, focusAfterRef, true);
|
|
159
158
|
var popupController = (0, _Popup.usePopupContext)();
|
|
160
159
|
var innerRef = (0, _plasmacore.useForkRef)(trapRef, outerRootRef);
|
|
161
160
|
var uniqId = (0, _utils.safeUseId)();
|
|
@@ -25,14 +25,16 @@ function _interop_require_default(obj) {
|
|
|
25
25
|
}
|
|
26
26
|
var TooltipRoot = _styledcomponents.default.div.withConfig({
|
|
27
27
|
displayName: "Tooltip.styles__TooltipRoot",
|
|
28
|
-
componentId: "sc-
|
|
28
|
+
componentId: "sc-7a496a90-0"
|
|
29
29
|
})([
|
|
30
|
-
"padding:var(",
|
|
30
|
+
"display:flex;align-items:center;padding:var(",
|
|
31
31
|
") var(",
|
|
32
32
|
") var(",
|
|
33
33
|
") var(",
|
|
34
34
|
");min-height:var(",
|
|
35
|
-
");
|
|
35
|
+
");max-width:",
|
|
36
|
+
";min-width:",
|
|
37
|
+
";width:max-content;background-color:var(",
|
|
36
38
|
");border-radius:var(",
|
|
37
39
|
");box-shadow:var(",
|
|
38
40
|
");color:var(",
|
|
@@ -42,19 +44,17 @@ var TooltipRoot = _styledcomponents.default.div.withConfig({
|
|
|
42
44
|
");font-weight:var(",
|
|
43
45
|
");letter-spacing:var(",
|
|
44
46
|
");line-height:var(",
|
|
45
|
-
");
|
|
46
|
-
|
|
47
|
-
";width:max-content;word-break:break-word;pointer-events:none;display:flex;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"
|
|
48
|
-
], _Tooltiptokens.tokens.paddingTop, _Tooltiptokens.tokens.paddingRight, _Tooltiptokens.tokens.paddingBottom, _Tooltiptokens.tokens.paddingLeft, _Tooltiptokens.tokens.minHeight, _Tooltiptokens.tokens.backgroundColor, _Tooltiptokens.tokens.borderRadius, _Tooltiptokens.tokens.boxShadow, _Tooltiptokens.tokens.color, _Tooltiptokens.tokens.textFontFamily, _Tooltiptokens.tokens.textFontSize, _Tooltiptokens.tokens.textFontStyle, _Tooltiptokens.tokens.textFontWeight, _Tooltiptokens.tokens.textFontLetterSpacing, _Tooltiptokens.tokens.textFontLineHeight, function(param) {
|
|
47
|
+
");box-sizing:border-box;word-break:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"
|
|
48
|
+
], _Tooltiptokens.tokens.paddingTop, _Tooltiptokens.tokens.paddingRight, _Tooltiptokens.tokens.paddingBottom, _Tooltiptokens.tokens.paddingLeft, _Tooltiptokens.tokens.minHeight, function(param) {
|
|
49
49
|
var maxWidth = param.maxWidth;
|
|
50
50
|
return maxWidth || 'unset';
|
|
51
51
|
}, function(param) {
|
|
52
52
|
var minWidth = param.minWidth;
|
|
53
53
|
return minWidth || 'unset';
|
|
54
|
-
});
|
|
54
|
+
}, _Tooltiptokens.tokens.backgroundColor, _Tooltiptokens.tokens.borderRadius, _Tooltiptokens.tokens.boxShadow, _Tooltiptokens.tokens.color, _Tooltiptokens.tokens.textFontFamily, _Tooltiptokens.tokens.textFontSize, _Tooltiptokens.tokens.textFontStyle, _Tooltiptokens.tokens.textFontWeight, _Tooltiptokens.tokens.textFontLetterSpacing, _Tooltiptokens.tokens.textFontLineHeight);
|
|
55
55
|
var StyledContentLeft = _styledcomponents.default.div.withConfig({
|
|
56
56
|
displayName: "Tooltip.styles__StyledContentLeft",
|
|
57
|
-
componentId: "sc-
|
|
57
|
+
componentId: "sc-7a496a90-1"
|
|
58
58
|
})([
|
|
59
59
|
"display:flex;align-items:center;margin-right:var(",
|
|
60
60
|
");height:var(",
|
|
@@ -47,14 +47,14 @@ var processNode = function(node, firstFocusSelector, ref) {
|
|
|
47
47
|
};
|
|
48
48
|
var focusManager = new _focusManager.FocusManager();
|
|
49
49
|
var useFocusTrap = function() {
|
|
50
|
-
var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true, firstFocusSelector = arguments.length > 1 ? arguments[1] : void 0, focusAfterNode = arguments.length > 2 ? arguments[2] : void 0, focusAfterAnimation = arguments.length > 3 ? arguments[3] : void 0
|
|
50
|
+
var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true, firstFocusSelector = arguments.length > 1 ? arguments[1] : void 0, focusAfterNode = arguments.length > 2 ? arguments[2] : void 0, focusAfterAnimation = arguments.length > 3 ? arguments[3] : void 0;
|
|
51
51
|
var ref = (0, _react.useRef)();
|
|
52
52
|
var setRef = (0, _react.useCallback)(function(node) {
|
|
53
53
|
if (ref.current) {
|
|
54
54
|
focusManager.teardownScopedFocus();
|
|
55
55
|
focusManager.returnFocus();
|
|
56
56
|
}
|
|
57
|
-
if (
|
|
57
|
+
if (active && node) {
|
|
58
58
|
focusManager.setupScopedFocus(node);
|
|
59
59
|
focusManager.markForFocusAfter(focusAfterNode);
|
|
60
60
|
// Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
|
|
@@ -73,21 +73,15 @@ var useFocusTrap = function() {
|
|
|
73
73
|
ref.current = null;
|
|
74
74
|
}, [
|
|
75
75
|
active,
|
|
76
|
-
enableOnFirstMount,
|
|
77
76
|
firstFocusSelector
|
|
78
77
|
]);
|
|
79
78
|
(0, _react.useEffect)(function() {
|
|
80
|
-
if (!active
|
|
79
|
+
if (!active) {
|
|
81
80
|
return;
|
|
82
81
|
}
|
|
83
82
|
var handleKeyDown = function(event) {
|
|
84
83
|
if (event.key === 'Tab' && ref.current) {
|
|
85
|
-
(0, _scopeTab.scopeTab)(ref.current, event
|
|
86
|
-
if (enableOnFirstMount) {
|
|
87
|
-
setTimeout(function() {
|
|
88
|
-
focusManager.teardownScopedFocus();
|
|
89
|
-
});
|
|
90
|
-
}
|
|
84
|
+
(0, _scopeTab.scopeTab)(ref.current, event);
|
|
91
85
|
}
|
|
92
86
|
};
|
|
93
87
|
document.addEventListener('keydown', handleKeyDown);
|
|
@@ -95,8 +89,7 @@ var useFocusTrap = function() {
|
|
|
95
89
|
document.removeEventListener('keydown', handleKeyDown);
|
|
96
90
|
};
|
|
97
91
|
}, [
|
|
98
|
-
active
|
|
99
|
-
enableOnFirstMount
|
|
92
|
+
active
|
|
100
93
|
]);
|
|
101
94
|
return setRef;
|
|
102
95
|
};
|
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "scopeTab", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
var _tabbable = require("./tabbable");
|
|
12
|
-
var scopeTab = function(node, event
|
|
12
|
+
var scopeTab = function(node, event) {
|
|
13
13
|
var tabbable = (0, _tabbable.findTabbableDescendants)(node);
|
|
14
14
|
if (!tabbable.length) {
|
|
15
15
|
event.preventDefault();
|
|
@@ -19,7 +19,7 @@ var scopeTab = function(node, event, activeFocusTrap) {
|
|
|
19
19
|
var finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
|
|
20
20
|
var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
|
|
21
21
|
// если не является, то передаем обработку таба самому браузеру
|
|
22
|
-
if (!leavingFinalTabbable
|
|
22
|
+
if (!leavingFinalTabbable) {
|
|
23
23
|
return;
|
|
24
24
|
}
|
|
25
25
|
// иначе зацкливаемся
|
|
@@ -74,7 +74,7 @@ var Popup = component(popupConfig);
|
|
|
74
74
|
* Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.
|
|
75
75
|
*/ export var modalRoot = function(Root) {
|
|
76
76
|
return /*#__PURE__*/ forwardRef(function(_param, outerRootRef) {
|
|
77
|
-
var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur,
|
|
77
|
+
var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, zIndex = _param.zIndex, popupInfo = _param.popupInfo, children = _param.children, view = _param.view, opened = _param.opened, isOpen = _param.isOpen, hasBody = _param.hasBody, hasClose = _param.hasClose, resizable = _param.resizable, draggable = _param.draggable, rest = _object_without_properties(_param, [
|
|
78
78
|
"id",
|
|
79
79
|
"withAnimation",
|
|
80
80
|
"onClose",
|
|
@@ -83,7 +83,6 @@ var Popup = component(popupConfig);
|
|
|
83
83
|
"closeOnEsc",
|
|
84
84
|
"closeOnOverlayClick",
|
|
85
85
|
"withBlur",
|
|
86
|
-
"isFocusTrapped",
|
|
87
86
|
"initialFocusRef",
|
|
88
87
|
"focusAfterRef",
|
|
89
88
|
"zIndex",
|
|
@@ -99,7 +98,7 @@ var Popup = component(popupConfig);
|
|
|
99
98
|
]);
|
|
100
99
|
var innerIsOpen = Boolean(isOpen || opened);
|
|
101
100
|
var innerHasClose = hasClose === undefined && hasBody || hasClose;
|
|
102
|
-
var trapRef = useFocusTrap(
|
|
101
|
+
var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);
|
|
103
102
|
var popupController = usePopupContext();
|
|
104
103
|
var innerRef = useForkRef(trapRef, outerRootRef);
|
|
105
104
|
var uniqId = safeUseId();
|
|
@@ -2,14 +2,16 @@ import styled from "styled-components";
|
|
|
2
2
|
import { tokens } from "./Tooltip.tokens";
|
|
3
3
|
export var TooltipRoot = styled.div.withConfig({
|
|
4
4
|
displayName: "Tooltip.styles__TooltipRoot",
|
|
5
|
-
componentId: "sc-
|
|
5
|
+
componentId: "sc-7a496a90-0"
|
|
6
6
|
})([
|
|
7
|
-
"padding:var(",
|
|
7
|
+
"display:flex;align-items:center;padding:var(",
|
|
8
8
|
") var(",
|
|
9
9
|
") var(",
|
|
10
10
|
") var(",
|
|
11
11
|
");min-height:var(",
|
|
12
|
-
");
|
|
12
|
+
");max-width:",
|
|
13
|
+
";min-width:",
|
|
14
|
+
";width:max-content;background-color:var(",
|
|
13
15
|
");border-radius:var(",
|
|
14
16
|
");box-shadow:var(",
|
|
15
17
|
");color:var(",
|
|
@@ -19,19 +21,17 @@ export var TooltipRoot = styled.div.withConfig({
|
|
|
19
21
|
");font-weight:var(",
|
|
20
22
|
");letter-spacing:var(",
|
|
21
23
|
");line-height:var(",
|
|
22
|
-
");
|
|
23
|
-
|
|
24
|
-
";width:max-content;word-break:break-word;pointer-events:none;display:flex;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"
|
|
25
|
-
], tokens.paddingTop, tokens.paddingRight, tokens.paddingBottom, tokens.paddingLeft, tokens.minHeight, tokens.backgroundColor, tokens.borderRadius, tokens.boxShadow, tokens.color, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textFontLetterSpacing, tokens.textFontLineHeight, function(param) {
|
|
24
|
+
");box-sizing:border-box;word-break:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"
|
|
25
|
+
], tokens.paddingTop, tokens.paddingRight, tokens.paddingBottom, tokens.paddingLeft, tokens.minHeight, function(param) {
|
|
26
26
|
var maxWidth = param.maxWidth;
|
|
27
27
|
return maxWidth || 'unset';
|
|
28
28
|
}, function(param) {
|
|
29
29
|
var minWidth = param.minWidth;
|
|
30
30
|
return minWidth || 'unset';
|
|
31
|
-
});
|
|
31
|
+
}, tokens.backgroundColor, tokens.borderRadius, tokens.boxShadow, tokens.color, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textFontLetterSpacing, tokens.textFontLineHeight);
|
|
32
32
|
export var StyledContentLeft = styled.div.withConfig({
|
|
33
33
|
displayName: "Tooltip.styles__StyledContentLeft",
|
|
34
|
-
componentId: "sc-
|
|
34
|
+
componentId: "sc-7a496a90-1"
|
|
35
35
|
})([
|
|
36
36
|
"display:flex;align-items:center;margin-right:var(",
|
|
37
37
|
");height:var(",
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { component, mergeConfig } from "../../../engines";
|
|
2
|
-
import { comboboxNewConfig } from "../../..";
|
|
3
|
-
import { config } from "./Combobox.config";
|
|
4
|
-
var mergedConfig = mergeConfig(comboboxNewConfig, config);
|
|
5
|
-
var ComboboxComponent = component(mergedConfig);
|
|
6
|
-
var Combobox = ComboboxComponent;
|
|
7
|
-
export { Combobox };
|
|
@@ -39,14 +39,14 @@ var focusManager = new FocusManager();
|
|
|
39
39
|
/**
|
|
40
40
|
* Захватывает фокус внутри DOM node.
|
|
41
41
|
* */ export var useFocusTrap = function() {
|
|
42
|
-
var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true, firstFocusSelector = arguments.length > 1 ? arguments[1] : void 0, focusAfterNode = arguments.length > 2 ? arguments[2] : void 0, focusAfterAnimation = arguments.length > 3 ? arguments[3] : void 0
|
|
42
|
+
var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true, firstFocusSelector = arguments.length > 1 ? arguments[1] : void 0, focusAfterNode = arguments.length > 2 ? arguments[2] : void 0, focusAfterAnimation = arguments.length > 3 ? arguments[3] : void 0;
|
|
43
43
|
var ref = useRef();
|
|
44
44
|
var setRef = useCallback(function(node) {
|
|
45
45
|
if (ref.current) {
|
|
46
46
|
focusManager.teardownScopedFocus();
|
|
47
47
|
focusManager.returnFocus();
|
|
48
48
|
}
|
|
49
|
-
if (
|
|
49
|
+
if (active && node) {
|
|
50
50
|
focusManager.setupScopedFocus(node);
|
|
51
51
|
focusManager.markForFocusAfter(focusAfterNode);
|
|
52
52
|
// Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
|
|
@@ -65,21 +65,15 @@ var focusManager = new FocusManager();
|
|
|
65
65
|
ref.current = null;
|
|
66
66
|
}, [
|
|
67
67
|
active,
|
|
68
|
-
enableOnFirstMount,
|
|
69
68
|
firstFocusSelector
|
|
70
69
|
]);
|
|
71
70
|
useEffect(function() {
|
|
72
|
-
if (!active
|
|
71
|
+
if (!active) {
|
|
73
72
|
return;
|
|
74
73
|
}
|
|
75
74
|
var handleKeyDown = function(event) {
|
|
76
75
|
if (event.key === 'Tab' && ref.current) {
|
|
77
|
-
scopeTab(ref.current, event
|
|
78
|
-
if (enableOnFirstMount) {
|
|
79
|
-
setTimeout(function() {
|
|
80
|
-
focusManager.teardownScopedFocus();
|
|
81
|
-
});
|
|
82
|
-
}
|
|
76
|
+
scopeTab(ref.current, event);
|
|
83
77
|
}
|
|
84
78
|
};
|
|
85
79
|
document.addEventListener('keydown', handleKeyDown);
|
|
@@ -87,8 +81,7 @@ var focusManager = new FocusManager();
|
|
|
87
81
|
document.removeEventListener('keydown', handleKeyDown);
|
|
88
82
|
};
|
|
89
83
|
}, [
|
|
90
|
-
active
|
|
91
|
-
enableOnFirstMount
|
|
84
|
+
active
|
|
92
85
|
]);
|
|
93
86
|
return setRef;
|
|
94
87
|
};
|
|
@@ -3,7 +3,7 @@ import { findTabbableDescendants } from "./tabbable";
|
|
|
3
3
|
* Управлление фокусом лишь внутри ноды через tab
|
|
4
4
|
* @param node
|
|
5
5
|
* @param event
|
|
6
|
-
*/ export var scopeTab = function(node, event
|
|
6
|
+
*/ export var scopeTab = function(node, event) {
|
|
7
7
|
var tabbable = findTabbableDescendants(node);
|
|
8
8
|
if (!tabbable.length) {
|
|
9
9
|
event.preventDefault();
|
|
@@ -13,7 +13,7 @@ import { findTabbableDescendants } from "./tabbable";
|
|
|
13
13
|
var finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
|
|
14
14
|
var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
|
|
15
15
|
// если не является, то передаем обработку таба самому браузеру
|
|
16
|
-
if (!leavingFinalTabbable
|
|
16
|
+
if (!leavingFinalTabbable) {
|
|
17
17
|
return;
|
|
18
18
|
}
|
|
19
19
|
// иначе зацкливаемся
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAa,MAAM,aAAa,CAAC;AASnD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAS3C;;;GAGG;AACH,eAAO,MAAM,SAAS,SAAU,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAa,MAAM,aAAa,CAAC;AASnD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAS3C;;;GAGG;AACH,eAAO,MAAM,SAAS,SAAU,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,sFAiHhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAnHQ,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAgIpE,CAAC"}
|
|
@@ -33,11 +33,6 @@ export interface CommonModalProps extends PopupProps {
|
|
|
33
33
|
* Обработчик клика при нажатии вне области модального окна(если не передан, то при нажатии используется onClose).
|
|
34
34
|
*/
|
|
35
35
|
onOverlayClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
36
|
-
/**
|
|
37
|
-
* Фокус элементов будет происходить только внутри модального окна
|
|
38
|
-
* @default true
|
|
39
|
-
*/
|
|
40
|
-
isFocusTrapped?: boolean;
|
|
41
36
|
/**
|
|
42
37
|
* Первый элемент для фокуса внутри модального окна.
|
|
43
38
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,cAAc,GACpB;IACI;;OAEG;IACH,OAAO,EAAE,IAAI,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GACD;IACI,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAER,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACnE
|
|
1
|
+
{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,cAAc,GACpB;IACI;;OAEG;IACH,OAAO,EAAE,IAAI,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GACD;IACI,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAER,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACnE;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAE3D,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,eAAe,GAAG,SAAS,CAAC,CAAC;AAEpH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,QAAQ,CAAC,GACjE,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,qBAAqB,GAAG,gBAAgB,GAAG,SAAS,CAAC,CAAC;AAExF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,WAAW,GAAG,QAAQ,CAAC,GAC1E,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,cAAc,GAAG,SAAS,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,eAAO,MAAM,WAAW,0LA6BvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAK7B,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Захватывает фокус внутри DOM node.
|
|
3
3
|
* */
|
|
4
|
-
export declare const useFocusTrap: (active?: boolean, firstFocusSelector?: string | React.RefObject<HTMLElement>, focusAfterNode?: React.RefObject<HTMLElement>, focusAfterAnimation?: boolean
|
|
4
|
+
export declare const useFocusTrap: (active?: boolean, firstFocusSelector?: string | React.RefObject<HTMLElement>, focusAfterNode?: React.RefObject<HTMLElement>, focusAfterAnimation?: boolean) => ((instance: HTMLElement | null) => void);
|
|
5
5
|
//# sourceMappingURL=useFocusTrap.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAoDA;;KAEK;AACL,eAAO,MAAM,YAAY,0CAEA,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,mBACzC,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,wBACvB,OAAO,
|
|
1
|
+
{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAoDA;;KAEK;AACL,eAAO,MAAM,YAAY,0CAEA,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,mBACzC,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,wBACvB,OAAO,KAC9B,CAAC,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAoDzC,CAAC"}
|
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
* @param node
|
|
4
4
|
* @param event
|
|
5
5
|
*/
|
|
6
|
-
export declare const scopeTab: (node: HTMLElement, event: KeyboardEvent
|
|
6
|
+
export declare const scopeTab: (node: HTMLElement, event: KeyboardEvent) => void;
|
|
7
7
|
//# sourceMappingURL=scopeTab.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scopeTab.d.ts","sourceRoot":"","sources":["../../src/utils/scopeTab.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,QAAQ,SAAU,WAAW,SAAS,aAAa,
|
|
1
|
+
{"version":3,"file":"scopeTab.d.ts","sourceRoot":"","sources":["../../src/utils/scopeTab.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,QAAQ,SAAU,WAAW,SAAS,aAAa,SAsB/D,CAAC"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.teczcv4{padding:var(--plasma-tooltip-padding-top) var(--plasma-tooltip-padding-right) var(--plasma-tooltip-padding-bottom) var(--plasma-tooltip-padding-left);min-height:var(--plasma-tooltip-min-height);box-sizing:border-box;background-color:var(--plasma-tooltip-background-color);border-radius:var(--plasma-tooltip-border-radius);box-shadow:var(--plasma-tooltip-box-shadow);color:var(--plasma-tooltip-color);font-family:var(--plasma-tooltip-text-font-family);font-size:var(--plasma-tooltip-text-font-size);font-style:var(--plasma-tooltip-text-font-style);font-weight:var(--plasma-tooltip-text-font-weight);-webkit-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-moz-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-ms-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);line-height:var(--plasma-tooltip-text-font-line-height);max-width:var(--teczcv4-0);min-width:var(--teczcv4-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
|
|
2
|
-
.s1j361h1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--plasma-tooltip-content-left-margin);height:var(--plasma-tooltip-text-font-line-height);}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.teczcv4{padding:var(--plasma-tooltip-padding-top) var(--plasma-tooltip-padding-right) var(--plasma-tooltip-padding-bottom) var(--plasma-tooltip-padding-left);min-height:var(--plasma-tooltip-min-height);box-sizing:border-box;background-color:var(--plasma-tooltip-background-color);border-radius:var(--plasma-tooltip-border-radius);box-shadow:var(--plasma-tooltip-box-shadow);color:var(--plasma-tooltip-color);font-family:var(--plasma-tooltip-text-font-family);font-size:var(--plasma-tooltip-text-font-size);font-style:var(--plasma-tooltip-text-font-style);font-weight:var(--plasma-tooltip-text-font-weight);-webkit-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-moz-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-ms-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);line-height:var(--plasma-tooltip-text-font-line-height);max-width:var(--teczcv4-0);min-width:var(--teczcv4-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
|
|
2
|
-
.s1j361h1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--plasma-tooltip-content-left-margin);height:var(--plasma-tooltip-text-font-line-height);}
|