@salutejs/plasma-new-hope 0.118.1-dev.0 → 0.119.0-canary.1344.10281238925.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Accordion/Accordion.tokens.js +1 -0
- package/cjs/components/Accordion/Accordion.tokens.js.map +1 -1
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
- package/cjs/components/Modal/Modal.js +1 -3
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/index.js +0 -2
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Accordion/Accordion.tokens.js +1 -0
- package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
- package/emotion/cjs/components/Modal/Modal.js +3 -4
- package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +6 -6
- package/emotion/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -113
- package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +8 -8
- package/emotion/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -113
- package/emotion/cjs/hooks/index.js +0 -7
- package/emotion/es/components/Accordion/Accordion.tokens.js +1 -0
- package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
- package/emotion/es/components/Modal/Modal.js +2 -3
- package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +6 -6
- package/emotion/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -113
- package/emotion/es/examples/plasma_web/components/Accordion/Accordion.config.js +8 -8
- package/emotion/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -113
- package/emotion/es/hooks/index.js +0 -1
- package/es/components/Accordion/Accordion.tokens.js +1 -0
- package/es/components/Accordion/Accordion.tokens.js.map +1 -1
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
- package/es/components/Modal/Modal.js +2 -4
- package/es/components/Modal/Modal.js.map +1 -1
- package/es/index.js +0 -1
- package/es/index.js.map +1 -1
- package/package.json +4 -4
- package/styled-components/cjs/components/Accordion/Accordion.tokens.js +1 -0
- package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
- package/styled-components/cjs/components/Modal/Modal.js +3 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -113
- package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -113
- package/styled-components/cjs/hooks/index.js +0 -7
- package/styled-components/es/components/Accordion/Accordion.tokens.js +1 -0
- package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
- package/styled-components/es/components/Modal/Modal.js +2 -3
- package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -113
- package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -113
- package/styled-components/es/hooks/index.js +0 -1
- package/types/components/Accordion/Accordion.tokens.d.ts +1 -0
- package/types/components/Accordion/Accordion.tokens.d.ts.map +1 -1
- package/types/components/Modal/Modal.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Accordion/Accordion.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Accordion/Accordion.config.d.ts.map +1 -1
- package/types/hooks/index.d.ts +0 -1
- package/types/hooks/index.d.ts.map +1 -1
- package/cjs/hooks/useFocusTrap.js +0 -97
- package/cjs/hooks/useFocusTrap.js.map +0 -1
- package/cjs/utils/focusManager.js +0 -56
- package/cjs/utils/focusManager.js.map +0 -1
- package/cjs/utils/scopeTab.js +0 -37
- package/cjs/utils/scopeTab.js.map +0 -1
- package/cjs/utils/tabbable.js +0 -51
- package/cjs/utils/tabbable.js.map +0 -1
- package/emotion/cjs/hooks/useFocusTrap.js +0 -95
- package/emotion/cjs/utils/focusManager.js +0 -60
- package/emotion/cjs/utils/scopeTab.js +0 -35
- package/emotion/cjs/utils/tabbable.js +0 -46
- package/emotion/cjs/utils/useFocusTrap.js +0 -95
- package/emotion/es/hooks/useFocusTrap.js +0 -90
- package/emotion/es/utils/focusManager.js +0 -55
- package/emotion/es/utils/scopeTab.js +0 -30
- package/emotion/es/utils/tabbable.js +0 -40
- package/emotion/es/utils/useFocusTrap.js +0 -90
- package/es/hooks/useFocusTrap.js +0 -93
- package/es/hooks/useFocusTrap.js.map +0 -1
- package/es/utils/focusManager.js +0 -52
- package/es/utils/focusManager.js.map +0 -1
- package/es/utils/scopeTab.js +0 -33
- package/es/utils/scopeTab.js.map +0 -1
- package/es/utils/tabbable.js +0 -43
- package/es/utils/tabbable.js.map +0 -1
- package/styled-components/cjs/hooks/useFocusTrap.js +0 -95
- package/styled-components/cjs/utils/focusManager.js +0 -60
- package/styled-components/cjs/utils/scopeTab.js +0 -35
- package/styled-components/cjs/utils/tabbable.js +0 -46
- package/styled-components/cjs/utils/useFocusTrap.js +0 -95
- package/styled-components/es/hooks/useFocusTrap.js +0 -90
- package/styled-components/es/utils/focusManager.js +0 -55
- package/styled-components/es/utils/scopeTab.js +0 -30
- package/styled-components/es/utils/tabbable.js +0 -40
- package/styled-components/es/utils/useFocusTrap.js +0 -90
- package/types/hooks/useFocusTrap.d.ts +0 -6
- package/types/hooks/useFocusTrap.d.ts.map +0 -1
- package/types/utils/focusManager.d.ts +0 -15
- package/types/utils/focusManager.d.ts.map +0 -1
- package/types/utils/scopeTab.d.ts +0 -7
- package/types/utils/scopeTab.d.ts.map +0 -1
- package/types/utils/tabbable.d.ts +0 -6
- package/types/utils/tabbable.d.ts.map +0 -1
- package/types/utils/useFocusTrap.d.ts +0 -6
- package/types/utils/useFocusTrap.d.ts.map +0 -1
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, {
|
1
|
+
import React, { useState } from 'react';
|
2
2
|
import styled from 'styled-components';
|
3
3
|
import type { ComponentProps } from 'react';
|
4
4
|
import type { StoryObj, Meta } from '@storybook/react';
|
@@ -6,7 +6,6 @@ import { SSRProvider } from '@salutejs/plasma-core';
|
|
6
6
|
|
7
7
|
import { PopupProvider, popupClasses } from '../Popup/Popup';
|
8
8
|
import { Button } from '../Button/Button';
|
9
|
-
import { TextField } from '../TextField/TextField';
|
10
9
|
import { WithTheme } from '../../../_helpers';
|
11
10
|
|
12
11
|
import { Modal, modalClasses } from './Modal';
|
@@ -207,114 +206,3 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
|
|
207
206
|
},
|
208
207
|
render: (args) => <StoryModalDemo {...args} />,
|
209
208
|
};
|
210
|
-
|
211
|
-
const StyledModalAnimation = styled(Modal)`
|
212
|
-
/* stylelint-disable */
|
213
|
-
&& .${popupClasses.root} {
|
214
|
-
animation: fadeIn 1s forwards;
|
215
|
-
}
|
216
|
-
|
217
|
-
&&.${popupClasses.endAnimation} .${popupClasses.root} {
|
218
|
-
animation: fadeOut 1s forwards;
|
219
|
-
}
|
220
|
-
|
221
|
-
&& .${modalClasses.overlay} {
|
222
|
-
animation: overlayFadeIn 1s forwards;
|
223
|
-
}
|
224
|
-
|
225
|
-
&&.${popupClasses.endAnimation} .${modalClasses.overlay} {
|
226
|
-
animation: overlayFadeOut 1s forwards;
|
227
|
-
}
|
228
|
-
/* stylelint-enable */
|
229
|
-
|
230
|
-
@keyframes overlayFadeIn {
|
231
|
-
from {
|
232
|
-
opacity: 0;
|
233
|
-
}
|
234
|
-
|
235
|
-
to {
|
236
|
-
opacity: 1;
|
237
|
-
}
|
238
|
-
}
|
239
|
-
|
240
|
-
@keyframes overlayFadeOut {
|
241
|
-
from {
|
242
|
-
opacity: 1;
|
243
|
-
}
|
244
|
-
|
245
|
-
to {
|
246
|
-
opacity: 0;
|
247
|
-
}
|
248
|
-
}
|
249
|
-
|
250
|
-
@keyframes fadeIn {
|
251
|
-
from {
|
252
|
-
opacity: 0;
|
253
|
-
transform: translate(-50%, 100%);
|
254
|
-
}
|
255
|
-
|
256
|
-
to {
|
257
|
-
opacity: 1;
|
258
|
-
transform: translate(-50%, -50%);
|
259
|
-
}
|
260
|
-
}
|
261
|
-
|
262
|
-
@keyframes fadeOut {
|
263
|
-
from {
|
264
|
-
opacity: 1;
|
265
|
-
transform: translate(-50%, -50%);
|
266
|
-
}
|
267
|
-
|
268
|
-
to {
|
269
|
-
opacity: 0;
|
270
|
-
transform: translate(-50%, 100%);
|
271
|
-
}
|
272
|
-
}
|
273
|
-
`;
|
274
|
-
|
275
|
-
const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
|
276
|
-
const ref = useRef(null);
|
277
|
-
const [isOpen, setIsOpen] = useState(false);
|
278
|
-
|
279
|
-
const close = useCallback(() => {
|
280
|
-
setIsOpen(false);
|
281
|
-
}, []);
|
282
|
-
|
283
|
-
return (
|
284
|
-
<SSRProvider>
|
285
|
-
<PopupProvider>
|
286
|
-
<Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
|
287
|
-
<StyledModalAnimation
|
288
|
-
id="modal"
|
289
|
-
frame="theme-root"
|
290
|
-
withAnimation
|
291
|
-
onClose={() => setIsOpen(false)}
|
292
|
-
isOpen={isOpen}
|
293
|
-
placement={placement}
|
294
|
-
offset={[offsetX, offsetY]}
|
295
|
-
initialFocusRef={ref}
|
296
|
-
{...rest}
|
297
|
-
>
|
298
|
-
<Content>
|
299
|
-
<TextField value="Text" onChange={() => {}} />
|
300
|
-
<TextField ref={ref} value="Text2" onChange={() => {}} />
|
301
|
-
<Button text="Закрыть" onClick={close} />
|
302
|
-
</Content>
|
303
|
-
</StyledModalAnimation>
|
304
|
-
</PopupProvider>
|
305
|
-
</SSRProvider>
|
306
|
-
);
|
307
|
-
};
|
308
|
-
|
309
|
-
export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
|
310
|
-
args: {
|
311
|
-
placement: 'bottom',
|
312
|
-
withAnimation: true,
|
313
|
-
withBlur: false,
|
314
|
-
closeOnEsc: true,
|
315
|
-
closeOnOverlayClick: true,
|
316
|
-
offsetX: 0,
|
317
|
-
offsetY: 0,
|
318
|
-
},
|
319
|
-
render: (args) => <StoryModalAnimationDemo {...args} />,
|
320
|
-
};
|
@@ -9,12 +9,6 @@ Object.defineProperty(exports, "useDidMountEffect", {
|
|
9
9
|
return _useDidMountEffect.useDidMountEffect;
|
10
10
|
}
|
11
11
|
});
|
12
|
-
Object.defineProperty(exports, "useFocusTrap", {
|
13
|
-
enumerable: true,
|
14
|
-
get: function get() {
|
15
|
-
return _useFocusTrap.useFocusTrap;
|
16
|
-
}
|
17
|
-
});
|
18
12
|
Object.defineProperty(exports, "useForceUpdate", {
|
19
13
|
enumerable: true,
|
20
14
|
get: function get() {
|
@@ -46,7 +40,6 @@ Object.defineProperty(exports, "useUniqId", {
|
|
46
40
|
}
|
47
41
|
});
|
48
42
|
var _useUniqId = /*#__PURE__*/require("./useUniqId");
|
49
|
-
var _useFocusTrap = /*#__PURE__*/require("./useFocusTrap");
|
50
43
|
var _usePreviousValue = /*#__PURE__*/require("./usePreviousValue");
|
51
44
|
var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
|
52
45
|
var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
|
@@ -23,6 +23,7 @@ export var tokens = {
|
|
23
23
|
accordionItemFocus: '--plasma-accordion-item-focus',
|
24
24
|
accordionItemBorder: '--plasma-accordion-item-border',
|
25
25
|
accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
|
26
|
+
accordionItemIconColor: '--plasma-accordion-item-color-icon',
|
26
27
|
accordionItemTitleColor: '--plasma-accordion-item-title-color',
|
27
28
|
accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
|
28
29
|
accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',
|
@@ -33,10 +33,10 @@ export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
|
|
33
33
|
})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
|
34
34
|
export var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill).withConfig({
|
35
35
|
componentId: "plasma-new-hope__sc-20ij9z-8"
|
36
|
-
})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.
|
36
|
+
})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemIconColor);
|
37
37
|
export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
|
38
38
|
componentId: "plasma-new-hope__sc-20ij9z-9"
|
39
|
-
})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.
|
39
|
+
})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
|
40
40
|
export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
|
41
41
|
componentId: "plasma-new-hope__sc-20ij9z-10"
|
42
42
|
})(["position:relative;height:1rem;display:flex;align-items:center;justify-content:center;width:1rem;"]);
|
@@ -3,12 +3,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
5
5
|
import React, { forwardRef, useCallback, useMemo } from 'react';
|
6
|
-
import { useForkRef, safeUseId } from '@salutejs/plasma-core';
|
6
|
+
import { useFocusTrap, useForkRef, safeUseId } from '@salutejs/plasma-core';
|
7
7
|
import { component } from '../../engines';
|
8
8
|
import { popupConfig, usePopupContext } from '../Popup';
|
9
9
|
import { Overlay } from '../Overlay';
|
10
10
|
import { DEFAULT_Z_INDEX } from '../Popup/utils';
|
11
|
-
import { useFocusTrap } from '../../hooks';
|
12
11
|
import { classes, tokens } from './Modal.tokens';
|
13
12
|
import { useModal } from './hooks';
|
14
13
|
import { base as viewCSS } from './variations/_view/base';
|
@@ -41,7 +40,7 @@ export var modalRoot = function modalRoot(Root) {
|
|
41
40
|
view = _ref.view,
|
42
41
|
isOpen = _ref.isOpen,
|
43
42
|
rest = _objectWithoutProperties(_ref, _excluded);
|
44
|
-
var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef
|
43
|
+
var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);
|
45
44
|
var popupController = usePopupContext();
|
46
45
|
var innerRef = useForkRef(trapRef, outerRootRef);
|
47
46
|
var uniqId = safeUseId();
|
@@ -7,8 +7,8 @@ export var config = {
|
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
"default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
|
11
|
-
clear: /*#__PURE__*/css(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
|
10
|
+
"default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
|
11
|
+
clear: /*#__PURE__*/css(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
|
12
12
|
},
|
13
13
|
size: {
|
14
14
|
l: /*#__PURE__*/css(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemGap, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionItemTitleFontFamily, accordionTokens.accordionItemTitleFontSize, accordionTokens.accordionItemTitleFontStyle, accordionTokens.accordionItemTitleFontWeight, accordionTokens.accordionItemTitleLetterSpacing, accordionTokens.accordionItemTitleLineHeight, accordionTokens.accordionItemTextFontFamily, accordionTokens.accordionItemTextFontSize, accordionTokens.accordionItemTextFontStyle, accordionTokens.accordionItemTextFontWeight, accordionTokens.accordionItemTextLetterSpacing, accordionTokens.accordionItemTextLineHeight),
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, {
|
1
|
+
import React, { useState } from 'react';
|
2
2
|
import styled from 'styled-components';
|
3
3
|
import type { ComponentProps } from 'react';
|
4
4
|
import type { StoryObj, Meta } from '@storybook/react';
|
@@ -6,7 +6,6 @@ import { SSRProvider } from '@salutejs/plasma-core';
|
|
6
6
|
|
7
7
|
import { PopupProvider, popupClasses } from '../Popup/Popup';
|
8
8
|
import { Button } from '../Button/Button';
|
9
|
-
import { TextField } from '../TextField/TextField';
|
10
9
|
import { WithTheme } from '../../../_helpers';
|
11
10
|
|
12
11
|
import { Modal, modalClasses } from './Modal';
|
@@ -207,114 +206,3 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
|
|
207
206
|
},
|
208
207
|
render: (args) => <StoryModalDemo {...args} />,
|
209
208
|
};
|
210
|
-
|
211
|
-
const StyledModalAnimation = styled(Modal)`
|
212
|
-
/* stylelint-disable */
|
213
|
-
&& .${popupClasses.root} {
|
214
|
-
animation: fadeIn 1s forwards;
|
215
|
-
}
|
216
|
-
|
217
|
-
&&.${popupClasses.endAnimation} .${popupClasses.root} {
|
218
|
-
animation: fadeOut 1s forwards;
|
219
|
-
}
|
220
|
-
|
221
|
-
&& .${modalClasses.overlay} {
|
222
|
-
animation: overlayFadeIn 1s forwards;
|
223
|
-
}
|
224
|
-
|
225
|
-
&&.${popupClasses.endAnimation} .${modalClasses.overlay} {
|
226
|
-
animation: overlayFadeOut 1s forwards;
|
227
|
-
}
|
228
|
-
/* stylelint-enable */
|
229
|
-
|
230
|
-
@keyframes overlayFadeIn {
|
231
|
-
from {
|
232
|
-
opacity: 0;
|
233
|
-
}
|
234
|
-
|
235
|
-
to {
|
236
|
-
opacity: 1;
|
237
|
-
}
|
238
|
-
}
|
239
|
-
|
240
|
-
@keyframes overlayFadeOut {
|
241
|
-
from {
|
242
|
-
opacity: 1;
|
243
|
-
}
|
244
|
-
|
245
|
-
to {
|
246
|
-
opacity: 0;
|
247
|
-
}
|
248
|
-
}
|
249
|
-
|
250
|
-
@keyframes fadeIn {
|
251
|
-
from {
|
252
|
-
opacity: 0;
|
253
|
-
transform: translate(-50%, 100%);
|
254
|
-
}
|
255
|
-
|
256
|
-
to {
|
257
|
-
opacity: 1;
|
258
|
-
transform: translate(-50%, -50%);
|
259
|
-
}
|
260
|
-
}
|
261
|
-
|
262
|
-
@keyframes fadeOut {
|
263
|
-
from {
|
264
|
-
opacity: 1;
|
265
|
-
transform: translate(-50%, -50%);
|
266
|
-
}
|
267
|
-
|
268
|
-
to {
|
269
|
-
opacity: 0;
|
270
|
-
transform: translate(-50%, 100%);
|
271
|
-
}
|
272
|
-
}
|
273
|
-
`;
|
274
|
-
|
275
|
-
const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
|
276
|
-
const ref = useRef(null);
|
277
|
-
const [isOpen, setIsOpen] = useState(false);
|
278
|
-
|
279
|
-
const close = useCallback(() => {
|
280
|
-
setIsOpen(false);
|
281
|
-
}, []);
|
282
|
-
|
283
|
-
return (
|
284
|
-
<SSRProvider>
|
285
|
-
<PopupProvider>
|
286
|
-
<Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
|
287
|
-
<StyledModalAnimation
|
288
|
-
id="modal"
|
289
|
-
frame="theme-root"
|
290
|
-
withAnimation
|
291
|
-
onClose={() => setIsOpen(false)}
|
292
|
-
isOpen={isOpen}
|
293
|
-
placement={placement}
|
294
|
-
offset={[offsetX, offsetY]}
|
295
|
-
initialFocusRef={ref}
|
296
|
-
{...rest}
|
297
|
-
>
|
298
|
-
<Content>
|
299
|
-
<TextField value="Text" onChange={() => {}} />
|
300
|
-
<TextField ref={ref} value="Text2" onChange={() => {}} />
|
301
|
-
<Button text="Закрыть" onClick={close} />
|
302
|
-
</Content>
|
303
|
-
</StyledModalAnimation>
|
304
|
-
</PopupProvider>
|
305
|
-
</SSRProvider>
|
306
|
-
);
|
307
|
-
};
|
308
|
-
|
309
|
-
export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
|
310
|
-
args: {
|
311
|
-
placement: 'bottom',
|
312
|
-
withAnimation: true,
|
313
|
-
withBlur: false,
|
314
|
-
closeOnEsc: true,
|
315
|
-
closeOnOverlayClick: true,
|
316
|
-
offsetX: 0,
|
317
|
-
offsetY: 0,
|
318
|
-
},
|
319
|
-
render: (args) => <StoryModalAnimationDemo {...args} />,
|
320
|
-
};
|
@@ -7,8 +7,8 @@ export var config = {
|
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
"default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
|
11
|
-
clear: /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
|
10
|
+
"default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
|
11
|
+
clear: /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
|
12
12
|
},
|
13
13
|
size: {
|
14
14
|
l: /*#__PURE__*/css(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemGap, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionItemTitleFontFamily, accordionTokens.accordionItemTitleFontSize, accordionTokens.accordionItemTitleFontStyle, accordionTokens.accordionItemTitleFontWeight, accordionTokens.accordionItemTitleLetterSpacing, accordionTokens.accordionItemTitleLineHeight, accordionTokens.accordionItemTextFontFamily, accordionTokens.accordionItemTextFontSize, accordionTokens.accordionItemTextFontStyle, accordionTokens.accordionItemTextFontWeight, accordionTokens.accordionItemTextLetterSpacing, accordionTokens.accordionItemTextLineHeight),
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, {
|
1
|
+
import React, { useState } from 'react';
|
2
2
|
import styled from 'styled-components';
|
3
3
|
import type { ComponentProps } from 'react';
|
4
4
|
import type { StoryObj, Meta } from '@storybook/react';
|
@@ -6,7 +6,6 @@ import { SSRProvider } from '@salutejs/plasma-core';
|
|
6
6
|
|
7
7
|
import { PopupProvider, popupClasses } from '../Popup/Popup';
|
8
8
|
import { Button } from '../Button/Button';
|
9
|
-
import { TextField } from '../TextField/TextField';
|
10
9
|
import { WithTheme } from '../../../_helpers';
|
11
10
|
|
12
11
|
import { Modal, modalClasses } from './Modal';
|
@@ -207,114 +206,3 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
|
|
207
206
|
},
|
208
207
|
render: (args) => <StoryModalDemo {...args} />,
|
209
208
|
};
|
210
|
-
|
211
|
-
const StyledModalAnimation = styled(Modal)`
|
212
|
-
/* stylelint-disable */
|
213
|
-
&& .${popupClasses.root} {
|
214
|
-
animation: fadeIn 1s forwards;
|
215
|
-
}
|
216
|
-
|
217
|
-
&&.${popupClasses.endAnimation} .${popupClasses.root} {
|
218
|
-
animation: fadeOut 1s forwards;
|
219
|
-
}
|
220
|
-
|
221
|
-
&& .${modalClasses.overlay} {
|
222
|
-
animation: overlayFadeIn 1s forwards;
|
223
|
-
}
|
224
|
-
|
225
|
-
&&.${popupClasses.endAnimation} .${modalClasses.overlay} {
|
226
|
-
animation: overlayFadeOut 1s forwards;
|
227
|
-
}
|
228
|
-
/* stylelint-enable */
|
229
|
-
|
230
|
-
@keyframes overlayFadeIn {
|
231
|
-
from {
|
232
|
-
opacity: 0;
|
233
|
-
}
|
234
|
-
|
235
|
-
to {
|
236
|
-
opacity: 1;
|
237
|
-
}
|
238
|
-
}
|
239
|
-
|
240
|
-
@keyframes overlayFadeOut {
|
241
|
-
from {
|
242
|
-
opacity: 1;
|
243
|
-
}
|
244
|
-
|
245
|
-
to {
|
246
|
-
opacity: 0;
|
247
|
-
}
|
248
|
-
}
|
249
|
-
|
250
|
-
@keyframes fadeIn {
|
251
|
-
from {
|
252
|
-
opacity: 0;
|
253
|
-
transform: translate(-50%, 100%);
|
254
|
-
}
|
255
|
-
|
256
|
-
to {
|
257
|
-
opacity: 1;
|
258
|
-
transform: translate(-50%, -50%);
|
259
|
-
}
|
260
|
-
}
|
261
|
-
|
262
|
-
@keyframes fadeOut {
|
263
|
-
from {
|
264
|
-
opacity: 1;
|
265
|
-
transform: translate(-50%, -50%);
|
266
|
-
}
|
267
|
-
|
268
|
-
to {
|
269
|
-
opacity: 0;
|
270
|
-
transform: translate(-50%, 100%);
|
271
|
-
}
|
272
|
-
}
|
273
|
-
`;
|
274
|
-
|
275
|
-
const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
|
276
|
-
const ref = useRef(null);
|
277
|
-
const [isOpen, setIsOpen] = useState(false);
|
278
|
-
|
279
|
-
const close = useCallback(() => {
|
280
|
-
setIsOpen(false);
|
281
|
-
}, []);
|
282
|
-
|
283
|
-
return (
|
284
|
-
<SSRProvider>
|
285
|
-
<PopupProvider>
|
286
|
-
<Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
|
287
|
-
<StyledModalAnimation
|
288
|
-
id="modal"
|
289
|
-
frame="theme-root"
|
290
|
-
withAnimation
|
291
|
-
onClose={() => setIsOpen(false)}
|
292
|
-
isOpen={isOpen}
|
293
|
-
placement={placement}
|
294
|
-
offset={[offsetX, offsetY]}
|
295
|
-
initialFocusRef={ref}
|
296
|
-
{...rest}
|
297
|
-
>
|
298
|
-
<Content>
|
299
|
-
<TextField value="Text" onChange={() => {}} />
|
300
|
-
<TextField ref={ref} value="Text2" onChange={() => {}} />
|
301
|
-
<Button text="Закрыть" onClick={close} />
|
302
|
-
</Content>
|
303
|
-
</StyledModalAnimation>
|
304
|
-
</PopupProvider>
|
305
|
-
</SSRProvider>
|
306
|
-
);
|
307
|
-
};
|
308
|
-
|
309
|
-
export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
|
310
|
-
args: {
|
311
|
-
placement: 'bottom',
|
312
|
-
withAnimation: true,
|
313
|
-
withBlur: false,
|
314
|
-
closeOnEsc: true,
|
315
|
-
closeOnOverlayClick: true,
|
316
|
-
offsetX: 0,
|
317
|
-
offsetY: 0,
|
318
|
-
},
|
319
|
-
render: (args) => <StoryModalAnimationDemo {...args} />,
|
320
|
-
};
|
@@ -23,6 +23,7 @@ export declare const tokens: {
|
|
23
23
|
accordionItemFocus: string;
|
24
24
|
accordionItemBorder: string;
|
25
25
|
accordionItemBorderBottom: string;
|
26
|
+
accordionItemIconColor: string;
|
26
27
|
accordionItemTitleColor: string;
|
27
28
|
accordionItemTitleFontFamily: string;
|
28
29
|
accordionItemTitleFontSize: string;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM
|
1
|
+
{"version":3,"file":"Accordion.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgClB,CAAC"}
|
@@ -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,eAAe,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,eAAe,CAAC;AAMrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ3C;;;GAGG;AACH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAiFhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAnFQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAgGpE,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;CA2HlB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CA4HlB,CAAC"}
|
package/types/hooks/index.d.ts
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC"}
|
@@ -1,97 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
-
|
5
|
-
var React = require('react');
|
6
|
-
var focusManager$1 = require('../utils/focusManager.js');
|
7
|
-
var tabbable = require('../utils/tabbable.js');
|
8
|
-
var scopeTab = require('../utils/scopeTab.js');
|
9
|
-
|
10
|
-
// Находим элемент для фокуса
|
11
|
-
var getFocusElement = function getFocusElement(node, firstFocusSelector) {
|
12
|
-
var focusElement = null;
|
13
|
-
if (firstFocusSelector) {
|
14
|
-
if (typeof firstFocusSelector === 'string') {
|
15
|
-
focusElement = node.querySelector(firstFocusSelector);
|
16
|
-
} else if (firstFocusSelector.current) {
|
17
|
-
focusElement = firstFocusSelector.current;
|
18
|
-
}
|
19
|
-
}
|
20
|
-
if (!focusElement) {
|
21
|
-
var children = Array.from(node.querySelectorAll(tabbable.focusSelector));
|
22
|
-
focusElement = children.find(function (el) {
|
23
|
-
return tabbable.isTabble(el);
|
24
|
-
}) || null;
|
25
|
-
}
|
26
|
-
|
27
|
-
// Если ничего не нашлось, то может ли сама нода быть под фокусом
|
28
|
-
if (!focusElement && tabbable.isFocusable(node)) {
|
29
|
-
focusElement = node;
|
30
|
-
}
|
31
|
-
return focusElement;
|
32
|
-
};
|
33
|
-
var processNode = function processNode(node, firstFocusSelector, ref) {
|
34
|
-
if (ref !== null && ref !== void 0 && ref.current) {
|
35
|
-
ref.current.removeEventListener('animationend', function () {
|
36
|
-
processNode(node, firstFocusSelector, ref);
|
37
|
-
});
|
38
|
-
}
|
39
|
-
var focusElement = getFocusElement(node, firstFocusSelector);
|
40
|
-
if (focusElement) {
|
41
|
-
focusElement.focus();
|
42
|
-
}
|
43
|
-
};
|
44
|
-
var focusManager = /*#__PURE__*/new focusManager$1.FocusManager();
|
45
|
-
|
46
|
-
/**
|
47
|
-
* Захватывает фокус внутри DOM node.
|
48
|
-
* */
|
49
|
-
var useFocusTrap = function useFocusTrap() {
|
50
|
-
var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
51
|
-
var firstFocusSelector = arguments.length > 1 ? arguments[1] : undefined;
|
52
|
-
var focusAfterNode = arguments.length > 2 ? arguments[2] : undefined;
|
53
|
-
var focusAfterAnimation = arguments.length > 3 ? arguments[3] : undefined;
|
54
|
-
var ref = React.useRef();
|
55
|
-
var setRef = React.useCallback(function (node) {
|
56
|
-
if (ref.current) {
|
57
|
-
focusManager.teardownScopedFocus();
|
58
|
-
focusManager.returnFocus();
|
59
|
-
}
|
60
|
-
if (active && node) {
|
61
|
-
focusManager.setupScopedFocus(node);
|
62
|
-
focusManager.markForFocusAfter(focusAfterNode);
|
63
|
-
|
64
|
-
// Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
|
65
|
-
setTimeout(function () {
|
66
|
-
if (ref !== null && ref !== void 0 && ref.current && node.ownerDocument && focusAfterAnimation) {
|
67
|
-
ref.current.addEventListener('animationend', function () {
|
68
|
-
processNode(node, firstFocusSelector, ref);
|
69
|
-
});
|
70
|
-
} else if (node.ownerDocument) {
|
71
|
-
processNode(node, firstFocusSelector);
|
72
|
-
}
|
73
|
-
});
|
74
|
-
ref.current = node;
|
75
|
-
return;
|
76
|
-
}
|
77
|
-
ref.current = null;
|
78
|
-
}, [active, firstFocusSelector]);
|
79
|
-
React.useEffect(function () {
|
80
|
-
if (!active) {
|
81
|
-
return;
|
82
|
-
}
|
83
|
-
var handleKeyDown = function handleKeyDown(event) {
|
84
|
-
if (event.key === 'Tab' && ref.current) {
|
85
|
-
scopeTab.scopeTab(ref.current, event);
|
86
|
-
}
|
87
|
-
};
|
88
|
-
document.addEventListener('keydown', handleKeyDown);
|
89
|
-
return function () {
|
90
|
-
document.removeEventListener('keydown', handleKeyDown);
|
91
|
-
};
|
92
|
-
}, [active]);
|
93
|
-
return setRef;
|
94
|
-
};
|
95
|
-
|
96
|
-
exports.useFocusTrap = useFocusTrap;
|
97
|
-
//# sourceMappingURL=useFocusTrap.js.map
|