@salutejs/plasma-new-hope 0.337.0-canary.2243.17820447971.0 → 0.337.0-canary.2244.17824684419.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/cjs/components/Modal/Modal.js +4 -2
  2. package/cjs/components/Modal/Modal.js.map +1 -1
  3. package/cjs/hooks/useFocusTrap.js +7 -5
  4. package/cjs/hooks/useFocusTrap.js.map +1 -1
  5. package/cjs/utils/scopeTab.js +3 -3
  6. package/cjs/utils/scopeTab.js.map +1 -1
  7. package/emotion/cjs/components/Modal/Modal.js +3 -2
  8. package/emotion/cjs/examples/components/Combobox/Combobox.js +15 -0
  9. package/emotion/cjs/hooks/useFocusTrap.js +7 -5
  10. package/emotion/cjs/utils/scopeTab.js +3 -2
  11. package/emotion/es/components/Modal/Modal.js +3 -2
  12. package/emotion/es/hooks/useFocusTrap.js +7 -5
  13. package/emotion/es/utils/scopeTab.js +3 -2
  14. package/es/components/Modal/Modal.js +4 -2
  15. package/es/components/Modal/Modal.js.map +1 -1
  16. package/es/hooks/useFocusTrap.js +7 -5
  17. package/es/hooks/useFocusTrap.js.map +1 -1
  18. package/es/utils/scopeTab.js +3 -3
  19. package/es/utils/scopeTab.js.map +1 -1
  20. package/package.json +5 -5
  21. package/styled-components/cjs/components/Modal/Modal.js +3 -2
  22. package/styled-components/cjs/examples/components/Combobox/Combobox.js +0 -15
  23. package/styled-components/cjs/hooks/useFocusTrap.js +7 -5
  24. package/styled-components/cjs/utils/scopeTab.js +3 -2
  25. package/styled-components/es/components/Modal/Modal.js +3 -2
  26. package/styled-components/es/hooks/useFocusTrap.js +7 -5
  27. package/styled-components/es/utils/scopeTab.js +3 -2
  28. package/types/components/Modal/Modal.d.ts.map +1 -1
  29. package/types/components/Modal/Modal.types.d.ts +5 -0
  30. package/types/components/Modal/Modal.types.d.ts.map +1 -1
  31. package/types/hooks/useFocusTrap.d.ts.map +1 -1
  32. package/types/utils/scopeTab.d.ts +1 -1
  33. package/types/utils/scopeTab.d.ts.map +1 -1
@@ -24,7 +24,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
24
24
  var React__default = /*#__PURE__*/_interopDefault(React);
25
25
 
26
26
  var _IconClose;
27
- var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children", "view", "opened", "isOpen", "hasBody", "hasClose", "resizable", "draggable"];
27
+ var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "enableFocusTrap", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children", "view", "opened", "isOpen", "hasBody", "hasClose", "resizable", "draggable"];
28
28
 
29
29
  // issue #823
30
30
  var Popup = /*#__PURE__*/common.component(Popup$1.popupConfig);
@@ -45,6 +45,8 @@ var modalRoot = function modalRoot(Root) {
45
45
  _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
46
46
  closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
47
47
  withBlur = _ref.withBlur,
48
+ _ref$enableFocusTrap = _ref.enableFocusTrap,
49
+ enableFocusTrap = _ref$enableFocusTrap === void 0 ? true : _ref$enableFocusTrap,
48
50
  initialFocusRef = _ref.initialFocusRef,
49
51
  focusAfterRef = _ref.focusAfterRef,
50
52
  zIndex = _ref.zIndex,
@@ -60,7 +62,7 @@ var modalRoot = function modalRoot(Root) {
60
62
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
61
63
  var innerIsOpen = Boolean(isOpen || opened);
62
64
  var innerHasClose = hasClose === undefined && hasBody || hasClose;
63
- var trapRef = useFocusTrap.useFocusTrap(true, initialFocusRef, focusAfterRef, true);
65
+ var trapRef = useFocusTrap.useFocusTrap(enableFocusTrap, initialFocusRef, focusAfterRef, true);
64
66
  var popupController = PopupContext.usePopupContext();
65
67
  var innerRef = plasmaCore.useForkRef(trapRef, outerRootRef);
66
68
  var uniqId = react.safeUseId();
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\nimport { safeUseId } from 'src/utils';\nimport { RootProps, component } from 'src/engines';\nimport { useFocusTrap } from 'src/hooks';\n\nimport { popupConfig, usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { IconClose } from '../_Icon/Icons/IconClose';\n\nimport { classes, tokens } from './Modal.tokens';\nimport { ModalProps } from './Modal.types';\nimport { useModal } from './hooks';\nimport { base as viewCSS } from './variations/_view/base';\nimport { getIdLastModal } from './ModalContext';\nimport { CloseButton, ModalBody, ModalContent, base } from './Modal.styles';\n\n// issue #823\nconst Popup = component(popupConfig);\n\n/**\n * Modal.\n * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.\n */\nexport const modalRoot = (Root: RootProps<HTMLDivElement, ModalProps>) =>\n forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n id,\n withAnimation,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n closeOnEsc = true,\n closeOnOverlayClick = true,\n withBlur,\n initialFocusRef,\n focusAfterRef,\n zIndex,\n popupInfo,\n children,\n view,\n opened,\n isOpen,\n hasBody,\n hasClose,\n resizable,\n draggable,\n ...rest\n },\n outerRootRef,\n ) => {\n const innerIsOpen = Boolean(isOpen || opened);\n const innerHasClose = (hasClose === undefined && hasBody) || hasClose;\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRootRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.modalOverlayWithBlurColor})`\n : `var(${tokens.modalOverlayColor})`;\n\n const { modalInfo } = useModal({\n id: innerId,\n isOpen: innerIsOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n });\n\n const transparent = useMemo(() => getIdLastModal(Array.from(popupController.items.values())) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onModalOverlayKeyDown = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n },\n [closeOnOverlayClick, onOverlayClick, onClose],\n );\n\n const overlayNode = (\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onModalOverlayKeyDown}\n />\n );\n\n return (\n <Popup\n id={innerId}\n opened={innerIsOpen}\n ref={innerRef}\n popupInfo={modalInfo}\n withAnimation={withAnimation}\n zIndex={zIndex}\n overlay={hasBody ? overlayNode : <Root view={view}>{overlayNode}</Root>}\n draggable={draggable}\n resizable={resizable}\n {...rest}\n >\n {hasBody ? (\n <Root view={view}>\n <ModalBody>\n <ModalContent>\n {innerHasClose && (\n <CloseButton onClick={onClose} data-test=\"modal-close\">\n <IconClose size=\"s\" color=\"currentColor\" />\n </CloseButton>\n )}\n {children}\n </ModalContent>\n </ModalBody>\n </Root>\n ) : (\n <>{children}</>\n )}\n </Popup>\n );\n },\n );\n\nexport const modalConfig = {\n name: 'Modal',\n tag: 'div',\n layout: modalRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["Popup","component","popupConfig","modalRoot","Root","forwardRef","_ref","outerRootRef","id","withAnimation","onClose","onOverlayClick","onEscKeyDown","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","withBlur","initialFocusRef","focusAfterRef","zIndex","popupInfo","children","view","opened","isOpen","hasBody","hasClose","resizable","draggable","rest","_objectWithoutProperties","_excluded","innerIsOpen","Boolean","innerHasClose","undefined","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","modalOverlayWithBlurColor","modalOverlayColor","_useModal","useModal","modalInfo","transparent","useMemo","getIdLastModal","Array","from","items","values","onModalOverlayKeyDown","useCallback","event","overlayNode","React","createElement","Overlay","className","classes","overlay","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","_extends","ref","ModalBody","ModalContent","CloseButton","onClick","_IconClose","IconClose","size","color","Fragment","modalConfig","name","tag","layout","base","variations","css","viewCSS","defaults"],"mappings":"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"}
1
+ {"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\nimport { safeUseId } from 'src/utils';\nimport { RootProps, component } from 'src/engines';\nimport { useFocusTrap } from 'src/hooks';\n\nimport { popupConfig, usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { IconClose } from '../_Icon/Icons/IconClose';\n\nimport { classes, tokens } from './Modal.tokens';\nimport { ModalProps } from './Modal.types';\nimport { useModal } from './hooks';\nimport { base as viewCSS } from './variations/_view/base';\nimport { getIdLastModal } from './ModalContext';\nimport { CloseButton, ModalBody, ModalContent, base } from './Modal.styles';\n\n// issue #823\nconst Popup = component(popupConfig);\n\n/**\n * Modal.\n * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.\n */\nexport const modalRoot = (Root: RootProps<HTMLDivElement, ModalProps>) =>\n forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n id,\n withAnimation,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n closeOnEsc = true,\n closeOnOverlayClick = true,\n withBlur,\n enableFocusTrap = true,\n initialFocusRef,\n focusAfterRef,\n zIndex,\n popupInfo,\n children,\n view,\n opened,\n isOpen,\n hasBody,\n hasClose,\n resizable,\n draggable,\n ...rest\n },\n outerRootRef,\n ) => {\n const innerIsOpen = Boolean(isOpen || opened);\n const innerHasClose = (hasClose === undefined && hasBody) || hasClose;\n const trapRef = useFocusTrap(enableFocusTrap, initialFocusRef, focusAfterRef, true);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRootRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.modalOverlayWithBlurColor})`\n : `var(${tokens.modalOverlayColor})`;\n\n const { modalInfo } = useModal({\n id: innerId,\n isOpen: innerIsOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n });\n\n const transparent = useMemo(() => getIdLastModal(Array.from(popupController.items.values())) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onModalOverlayKeyDown = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n },\n [closeOnOverlayClick, onOverlayClick, onClose],\n );\n\n const overlayNode = (\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onModalOverlayKeyDown}\n />\n );\n\n return (\n <Popup\n id={innerId}\n opened={innerIsOpen}\n ref={innerRef}\n popupInfo={modalInfo}\n withAnimation={withAnimation}\n zIndex={zIndex}\n overlay={hasBody ? overlayNode : <Root view={view}>{overlayNode}</Root>}\n draggable={draggable}\n resizable={resizable}\n {...rest}\n >\n {hasBody ? (\n <Root view={view}>\n <ModalBody>\n <ModalContent>\n {innerHasClose && (\n <CloseButton onClick={onClose} data-test=\"modal-close\">\n <IconClose size=\"s\" color=\"currentColor\" />\n </CloseButton>\n )}\n {children}\n </ModalContent>\n </ModalBody>\n </Root>\n ) : (\n <>{children}</>\n )}\n </Popup>\n );\n },\n );\n\nexport const modalConfig = {\n name: 'Modal',\n tag: 'div',\n layout: modalRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["Popup","component","popupConfig","modalRoot","Root","forwardRef","_ref","outerRootRef","id","withAnimation","onClose","onOverlayClick","onEscKeyDown","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","withBlur","_ref$enableFocusTrap","enableFocusTrap","initialFocusRef","focusAfterRef","zIndex","popupInfo","children","view","opened","isOpen","hasBody","hasClose","resizable","draggable","rest","_objectWithoutProperties","_excluded","innerIsOpen","Boolean","innerHasClose","undefined","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","modalOverlayWithBlurColor","modalOverlayColor","_useModal","useModal","modalInfo","transparent","useMemo","getIdLastModal","Array","from","items","values","onModalOverlayKeyDown","useCallback","event","overlayNode","React","createElement","Overlay","className","classes","overlay","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","_extends","ref","ModalBody","ModalContent","CloseButton","onClick","_IconClose","IconClose","size","color","Fragment","modalConfig","name","tag","layout","base","variations","css","viewCSS","defaults"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA;AACA,IAAMA,KAAK,gBAAGC,gBAAS,CAACC,mBAAW,CAAC,CAAA;;AAEpC;AACA;AACA;AACA;IACaC,SAAS,GAAG,SAAZA,SAASA,CAAIC,IAA2C,EAAA;AAAA,EAAA,oBACjEC,gBAAU,CACN,UAAAC,IAAA,EAyBIC,YAAY,EACX;AAAA,IAAA,IAxBGC,EAAE,GAAAF,IAAA,CAAFE,EAAE;MACFC,aAAa,GAAAH,IAAA,CAAbG,aAAa;MACbC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;MACPC,cAAc,GAAAL,IAAA,CAAdK,cAAc;MACdC,YAAY,GAAAN,IAAA,CAAZM,YAAY;MAAAC,eAAA,GAAAP,IAAA,CACZQ,UAAU;AAAVA,MAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,eAAA;MAAAE,qBAAA,GAAAT,IAAA,CACjBU,mBAAmB;AAAnBA,MAAAA,mBAAmB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,qBAAA;MAC1BE,QAAQ,GAAAX,IAAA,CAARW,QAAQ;MAAAC,oBAAA,GAAAZ,IAAA,CACRa,eAAe;AAAfA,MAAAA,eAAe,GAAAD,oBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,oBAAA;MACtBE,eAAe,GAAAd,IAAA,CAAfc,eAAe;MACfC,aAAa,GAAAf,IAAA,CAAbe,aAAa;MACbC,MAAM,GAAAhB,IAAA,CAANgB,MAAM;MACNC,SAAS,GAAAjB,IAAA,CAATiB,SAAS;MACTC,QAAQ,GAAAlB,IAAA,CAARkB,QAAQ;MACRC,IAAI,GAAAnB,IAAA,CAAJmB,IAAI;MACJC,MAAM,GAAApB,IAAA,CAANoB,MAAM;MACNC,MAAM,GAAArB,IAAA,CAANqB,MAAM;MACNC,OAAO,GAAAtB,IAAA,CAAPsB,OAAO;MACPC,QAAQ,GAAAvB,IAAA,CAARuB,QAAQ;MACRC,SAAS,GAAAxB,IAAA,CAATwB,SAAS;MACTC,SAAS,GAAAzB,IAAA,CAATyB,SAAS;AACNC,MAAAA,IAAI,GAAAC,iDAAA,CAAA3B,IAAA,EAAA4B,SAAA,CAAA,CAAA;AAIX,IAAA,IAAMC,WAAW,GAAGC,OAAO,CAACT,MAAM,IAAID,MAAM,CAAC,CAAA;IAC7C,IAAMW,aAAa,GAAIR,QAAQ,KAAKS,SAAS,IAAIV,OAAO,IAAKC,QAAQ,CAAA;IACrE,IAAMU,OAAO,GAAGC,yBAAY,CAACrB,eAAe,EAAEC,eAAe,EAAEC,aAAa,EAAE,IAAI,CAAC,CAAA;AACnF,IAAA,IAAMoB,eAAe,GAAGC,4BAAe,EAAE,CAAA;AAEzC,IAAA,IAAMC,QAAQ,GAAGC,qBAAU,CAAiBL,OAAO,EAAEhC,YAAY,CAAC,CAAA;AAElE,IAAA,IAAMsC,MAAM,GAAGC,eAAS,EAAE,CAAA;AAC1B,IAAA,IAAMC,OAAO,GAAGvC,EAAE,IAAIqC,MAAM,CAAA;AAC5B,IAAA,IAAMG,sBAAsB,GAAG/B,QAAQ,GAAA,MAAA,CAAAgC,MAAA,CAC1BC,mBAAM,CAACC,yBAAyB,gBAAAF,MAAA,CAChCC,mBAAM,CAACE,iBAAiB,EAAG,GAAA,CAAA,CAAA;IAExC,IAAAC,SAAA,GAAsBC,iBAAQ,CAAC;AAC3B9C,QAAAA,EAAE,EAAEuC,OAAO;AACXpB,QAAAA,MAAM,EAAEQ,WAAW;AACnBrB,QAAAA,UAAU,EAAVA,UAAU;AACVF,QAAAA,YAAY,EAAZA,YAAY;AACZF,QAAAA,OAAO,EAAPA,OAAO;AACPa,QAAAA,SAAS,EAATA,SAAAA;AACJ,OAAC,CAAC;MAPMgC,SAAS,GAAAF,SAAA,CAATE,SAAS,CAAA;IASjB,IAAMC,WAAW,GAAGC,aAAO,CAAC,YAAA;AAAA,MAAA,OAAMC,2BAAc,CAACC,KAAK,CAACC,IAAI,CAACnB,eAAe,CAACoB,KAAK,CAACC,MAAM,EAAE,CAAC,CAAC,KAAKf,OAAO,CAAA;AAAA,KAAA,EAAE,CACtGA,OAAO,EACPN,eAAe,CAACoB,KAAK,CACxB,CAAC,CAAA;AAEF,IAAA,IAAME,qBAAqB,GAAGC,iBAAW,CACrC,UAACC,KAAuC,EAAK;AACzC,MAAA,IAAItD,cAAc,EAAE;QAChBA,cAAc,CAACsD,KAAK,CAAC,CAAA;AACrB,QAAA,OAAA;AACJ,OAAA;AAEA,MAAA,IAAIvD,OAAO,EAAE;AACTA,QAAAA,OAAO,EAAE,CAAA;AACb,OAAA;KACH,EACD,CAACM,mBAAmB,EAAEL,cAAc,EAAED,OAAO,CACjD,CAAC,CAAA;AAED,IAAA,IAAMwD,WAAW,gBACbC,sBAAA,CAAAC,aAAA,CAACC,eAAO,EAAA;MACJC,SAAS,EAAEC,oBAAO,CAACC,OAAQ;MAC3BlD,MAAM,EAAEA,MAAM,IAAImD,qBAAgB;AAClCC,MAAAA,uBAAuB,EAAE1B,sBAAuB;AAChD/B,MAAAA,QAAQ,EAAEA,QAAS;AACnBuC,MAAAA,WAAW,EAAEA,WAAY;AACzBmB,MAAAA,WAAW,EAAE3D,mBAAoB;AACjCL,MAAAA,cAAc,EAAEoD,qBAAAA;AAAsB,KACzC,CACJ,CAAA;AAED,IAAA,oBACII,sBAAA,CAAAC,aAAA,CAACpE,KAAK,EAAA4E,iCAAA,CAAA;AACFpE,MAAAA,EAAE,EAAEuC,OAAQ;AACZrB,MAAAA,MAAM,EAAES,WAAY;AACpB0C,MAAAA,GAAG,EAAElC,QAAS;AACdpB,MAAAA,SAAS,EAAEgC,SAAU;AACrB9C,MAAAA,aAAa,EAAEA,aAAc;AAC7Ba,MAAAA,MAAM,EAAEA,MAAO;MACfkD,OAAO,EAAE5C,OAAO,GAAGsC,WAAW,gBAAGC,sBAAA,CAAAC,aAAA,CAAChE,IAAI,EAAA;AAACqB,QAAAA,IAAI,EAAEA,IAAAA;AAAK,OAAA,EAAEyC,WAAkB,CAAE;AACxEnC,MAAAA,SAAS,EAAEA,SAAU;AACrBD,MAAAA,SAAS,EAAEA,SAAAA;KACPE,EAAAA,IAAI,GAEPJ,OAAO,gBACJuC,sBAAA,CAAAC,aAAA,CAAChE,IAAI,EAAA;AAACqB,MAAAA,IAAI,EAAEA,IAAAA;AAAK,KAAA,eACb0C,sBAAA,CAAAC,aAAA,CAACU,sBAAS,EAAA,IAAA,eACNX,sBAAA,CAAAC,aAAA,CAACW,yBAAY,QACR1C,aAAa,iBACV8B,sBAAA,CAAAC,aAAA,CAACY,wBAAW,EAAA;AAACC,MAAAA,OAAO,EAAEvE,OAAQ;MAAC,WAAU,EAAA,aAAA;KAAawE,EAAAA,UAAA,KAAAA,UAAA,gBAClDf,sBAAA,CAAAC,aAAA,CAACe,mBAAS,EAAA;AAACC,MAAAA,IAAI,EAAC,GAAG;AAACC,MAAAA,KAAK,EAAC,cAAA;AAAc,KAAE,CAAC,CAClC,CAChB,EACA7D,QACS,CACP,CACT,CAAC,gBAEP2C,sBAAA,CAAAC,aAAA,CAAAD,sBAAA,CAAAmB,QAAA,EAAG9D,IAAAA,EAAAA,QAAW,CAEf,CAAC,CAAA;AAEhB,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAM+D,WAAW,GAAG;AACvBC,EAAAA,IAAI,EAAE,OAAO;AACbC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEvF,SAAS;AACjBwF,EAAAA,IAAI,EAAJA,iBAAI;AACJC,EAAAA,UAAU,EAAE;AACRnE,IAAAA,IAAI,EAAE;AACFoE,MAAAA,GAAG,EAAEC,SAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNtE,IAAAA,IAAI,EAAE,SAAA;AACV,GAAA;AACJ;;;;;"}
@@ -57,7 +57,7 @@ var useFocusTrap = function useFocusTrap() {
57
57
  focusManager.teardownScopedFocus();
58
58
  focusManager.returnFocus();
59
59
  }
60
- if (active && node) {
60
+ if (node) {
61
61
  focusManager.setupScopedFocus(node);
62
62
  focusManager.markForFocusAfter(focusAfterNode);
63
63
 
@@ -77,12 +77,14 @@ var useFocusTrap = function useFocusTrap() {
77
77
  ref.current = null;
78
78
  }, [active, firstFocusSelector]);
79
79
  React.useEffect(function () {
80
- if (!active) {
81
- return;
82
- }
83
80
  var handleKeyDown = function handleKeyDown(event) {
84
81
  if (event.key === 'Tab' && ref.current) {
85
- scopeTab.scopeTab(ref.current, event);
82
+ scopeTab.scopeTab(ref.current, event, active);
83
+ if (!active) {
84
+ setTimeout(function () {
85
+ focusManager.teardownScopedFocus();
86
+ });
87
+ }
86
88
  }
87
89
  };
88
90
  document.addEventListener('keydown', handleKeyDown);
@@ -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): ((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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"}
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 (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 const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && ref.current) {\n scopeTab(ref.current, event, active);\n\n if (!active) {\n setTimeout(() => {\n focusManager.teardownScopedFocus();\n });\n }\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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"}
@@ -9,7 +9,7 @@ var tabbable = require('./tabbable.js');
9
9
  * @param node
10
10
  * @param event
11
11
  */
12
- var scopeTab = function scopeTab(node, event) {
12
+ var scopeTab = function scopeTab(node, event, activeFocusTrap) {
13
13
  var tabbable$1 = tabbable.findTabbableDescendants(node);
14
14
  if (!tabbable$1.length) {
15
15
  event.preventDefault();
@@ -19,9 +19,9 @@ var scopeTab = function scopeTab(node, event) {
19
19
  // смотрим, является ли элемент крайним - первый или последним
20
20
  var finalTabbable = tabbable$1[event.shiftKey ? 0 : tabbable$1.length - 1];
21
21
  var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
22
-
22
+ console.log(!leavingFinalTabbable || !activeFocusTrap);
23
23
  // если не является, то передаем обработку таба самому браузеру
24
- if (!leavingFinalTabbable) {
24
+ if (!leavingFinalTabbable || !activeFocusTrap) {
25
25
  return;
26
26
  }
27
27
 
@@ -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) => {\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,UAAQ,GAAGC,gCAAuB,CAACH,IAAI,CAAC,CAAA;AAC9C,EAAA,IAAI,CAACE,UAAQ,CAACE,MAAM,EAAE;IAClBH,KAAK,CAACI,cAAc,EAAE,CAAA;AACtB,IAAA,OAAA;AACJ,GAAA;;AAEA;AACA,EAAA,IAAMC,aAAa,GAAGJ,UAAQ,CAACD,KAAK,CAACM,QAAQ,GAAG,CAAC,GAAGL,UAAQ,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,UAAQ,CAACD,KAAK,CAACM,QAAQ,GAAGL,UAAQ,CAACE,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AACjE,EAAA,IAAIO,MAAM,EAAE;IACRA,MAAM,CAACC,KAAK,EAAE,CAAA;AAClB,GAAA;AACJ;;;;"}
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, activeFocusTrap?: boolean) => {\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 console.log(!leavingFinalTabbable || !activeFocusTrap);\n // если не является, то передаем обработку таба самому браузеру\n if (!leavingFinalTabbable || !activeFocusTrap) {\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","activeFocusTrap","tabbable","findTabbableDescendants","length","preventDefault","finalTabbable","shiftKey","leavingFinalTabbable","document","activeElement","console","log","target","focus"],"mappings":";;;;;;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,IAAiB,EAAEC,KAAoB,EAAEC,eAAyB,EAAK;AAC5F,EAAA,IAAMC,UAAQ,GAAGC,gCAAuB,CAACJ,IAAI,CAAC,CAAA;AAC9C,EAAA,IAAI,CAACG,UAAQ,CAACE,MAAM,EAAE;IAClBJ,KAAK,CAACK,cAAc,EAAE,CAAA;AACtB,IAAA,OAAA;AACJ,GAAA;;AAEA;AACA,EAAA,IAAMC,aAAa,GAAGJ,UAAQ,CAACF,KAAK,CAACO,QAAQ,GAAG,CAAC,GAAGL,UAAQ,CAACE,MAAM,GAAG,CAAC,CAAC,CAAA;AACxE,EAAA,IAAMI,oBAAoB,GAAGF,aAAa,KAAKG,QAAQ,CAACC,aAAa,IAAIX,IAAI,KAAKU,QAAQ,CAACC,aAAa,CAAA;EAExGC,OAAO,CAACC,GAAG,CAAC,CAACJ,oBAAoB,IAAI,CAACP,eAAe,CAAC,CAAA;AACtD;AACA,EAAA,IAAI,CAACO,oBAAoB,IAAI,CAACP,eAAe,EAAE;AAC3C,IAAA,OAAA;AACJ,GAAA;;AAEA;EACAD,KAAK,CAACK,cAAc,EAAE,CAAA;AACtB,EAAA,IAAMQ,MAAM,GAAGX,UAAQ,CAACF,KAAK,CAACO,QAAQ,GAAGL,UAAQ,CAACE,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AACjE,EAAA,IAAIS,MAAM,EAAE;IACRA,MAAM,CAACC,KAAK,EAAE,CAAA;AAClB,GAAA;AACJ;;;;"}
@@ -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, 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, [
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, _param_enableFocusTrap = _param.enableFocusTrap, enableFocusTrap = _param_enableFocusTrap === void 0 ? true : _param_enableFocusTrap, 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,6 +139,7 @@ var modalRoot = function(Root) {
139
139
  "closeOnEsc",
140
140
  "closeOnOverlayClick",
141
141
  "withBlur",
142
+ "enableFocusTrap",
142
143
  "initialFocusRef",
143
144
  "focusAfterRef",
144
145
  "zIndex",
@@ -154,7 +155,7 @@ var modalRoot = function(Root) {
154
155
  ]);
155
156
  var innerIsOpen = Boolean(isOpen || opened);
156
157
  var innerHasClose = hasClose === undefined && hasBody || hasClose;
157
- var trapRef = (0, _hooks.useFocusTrap)(true, initialFocusRef, focusAfterRef, true);
158
+ var trapRef = (0, _hooks.useFocusTrap)(enableFocusTrap, initialFocusRef, focusAfterRef, true);
158
159
  var popupController = (0, _Popup.usePopupContext)();
159
160
  var innerRef = (0, _plasmacore.useForkRef)(trapRef, outerRootRef);
160
161
  var uniqId = (0, _utils.safeUseId)();
@@ -1 +1,16 @@
1
1
  "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "Combobox", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return Combobox;
9
+ }
10
+ });
11
+ var _engines = require("../../../engines");
12
+ var _ = require("../../..");
13
+ var _Comboboxconfig = require("./Combobox.config");
14
+ var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
15
+ var ComboboxComponent = (0, _engines.component)(mergedConfig);
16
+ var Combobox = ComboboxComponent;
@@ -54,7 +54,7 @@ var useFocusTrap = function() {
54
54
  focusManager.teardownScopedFocus();
55
55
  focusManager.returnFocus();
56
56
  }
57
- if (active && node) {
57
+ if (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.
@@ -76,12 +76,14 @@ var useFocusTrap = function() {
76
76
  firstFocusSelector
77
77
  ]);
78
78
  (0, _react.useEffect)(function() {
79
- if (!active) {
80
- return;
81
- }
82
79
  var handleKeyDown = function(event) {
83
80
  if (event.key === 'Tab' && ref.current) {
84
- (0, _scopeTab.scopeTab)(ref.current, event);
81
+ (0, _scopeTab.scopeTab)(ref.current, event, active);
82
+ if (!active) {
83
+ setTimeout(function() {
84
+ focusManager.teardownScopedFocus();
85
+ });
86
+ }
85
87
  }
86
88
  };
87
89
  document.addEventListener('keydown', handleKeyDown);
@@ -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, activeFocusTrap) {
13
13
  var tabbable = (0, _tabbable.findTabbableDescendants)(node);
14
14
  if (!tabbable.length) {
15
15
  event.preventDefault();
@@ -18,8 +18,9 @@ var scopeTab = function(node, event) {
18
18
  // смотрим, является ли элемент крайним - первый или последним
19
19
  var finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
20
20
  var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
21
+ console.log(!leavingFinalTabbable || !activeFocusTrap);
21
22
  // если не является, то передаем обработку таба самому браузеру
22
- if (!leavingFinalTabbable) {
23
+ if (!leavingFinalTabbable || !activeFocusTrap) {
23
24
  return;
24
25
  }
25
26
  // иначе зацкливаемся
@@ -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, 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, [
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, _param_enableFocusTrap = _param.enableFocusTrap, enableFocusTrap = _param_enableFocusTrap === void 0 ? true : _param_enableFocusTrap, 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,6 +83,7 @@ var Popup = component(popupConfig);
83
83
  "closeOnEsc",
84
84
  "closeOnOverlayClick",
85
85
  "withBlur",
86
+ "enableFocusTrap",
86
87
  "initialFocusRef",
87
88
  "focusAfterRef",
88
89
  "zIndex",
@@ -98,7 +99,7 @@ var Popup = component(popupConfig);
98
99
  ]);
99
100
  var innerIsOpen = Boolean(isOpen || opened);
100
101
  var innerHasClose = hasClose === undefined && hasBody || hasClose;
101
- var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);
102
+ var trapRef = useFocusTrap(enableFocusTrap, initialFocusRef, focusAfterRef, true);
102
103
  var popupController = usePopupContext();
103
104
  var innerRef = useForkRef(trapRef, outerRootRef);
104
105
  var uniqId = safeUseId();
@@ -46,7 +46,7 @@ var focusManager = new FocusManager();
46
46
  focusManager.teardownScopedFocus();
47
47
  focusManager.returnFocus();
48
48
  }
49
- if (active && node) {
49
+ if (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.
@@ -68,12 +68,14 @@ var focusManager = new FocusManager();
68
68
  firstFocusSelector
69
69
  ]);
70
70
  useEffect(function() {
71
- if (!active) {
72
- return;
73
- }
74
71
  var handleKeyDown = function(event) {
75
72
  if (event.key === 'Tab' && ref.current) {
76
- scopeTab(ref.current, event);
73
+ scopeTab(ref.current, event, active);
74
+ if (!active) {
75
+ setTimeout(function() {
76
+ focusManager.teardownScopedFocus();
77
+ });
78
+ }
77
79
  }
78
80
  };
79
81
  document.addEventListener('keydown', handleKeyDown);
@@ -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, activeFocusTrap) {
7
7
  var tabbable = findTabbableDescendants(node);
8
8
  if (!tabbable.length) {
9
9
  event.preventDefault();
@@ -12,8 +12,9 @@ import { findTabbableDescendants } from "./tabbable";
12
12
  // смотрим, является ли элемент крайним - первый или последним
13
13
  var finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
14
14
  var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
15
+ console.log(!leavingFinalTabbable || !activeFocusTrap);
15
16
  // если не является, то передаем обработку таба самому браузеру
16
- if (!leavingFinalTabbable) {
17
+ if (!leavingFinalTabbable || !activeFocusTrap) {
17
18
  return;
18
19
  }
19
20
  // иначе зацкливаемся
@@ -16,7 +16,7 @@ import { popupConfig } from '../Popup/Popup.js';
16
16
  import { Overlay } from '../Overlay/Overlay.js';
17
17
 
18
18
  var _IconClose;
19
- var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children", "view", "opened", "isOpen", "hasBody", "hasClose", "resizable", "draggable"];
19
+ var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "enableFocusTrap", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children", "view", "opened", "isOpen", "hasBody", "hasClose", "resizable", "draggable"];
20
20
 
21
21
  // issue #823
22
22
  var Popup = /*#__PURE__*/component(popupConfig);
@@ -37,6 +37,8 @@ var modalRoot = function modalRoot(Root) {
37
37
  _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
38
38
  closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
39
39
  withBlur = _ref.withBlur,
40
+ _ref$enableFocusTrap = _ref.enableFocusTrap,
41
+ enableFocusTrap = _ref$enableFocusTrap === void 0 ? true : _ref$enableFocusTrap,
40
42
  initialFocusRef = _ref.initialFocusRef,
41
43
  focusAfterRef = _ref.focusAfterRef,
42
44
  zIndex = _ref.zIndex,
@@ -52,7 +54,7 @@ var modalRoot = function modalRoot(Root) {
52
54
  rest = _objectWithoutProperties(_ref, _excluded);
53
55
  var innerIsOpen = Boolean(isOpen || opened);
54
56
  var innerHasClose = hasClose === undefined && hasBody || hasClose;
55
- var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);
57
+ var trapRef = useFocusTrap(enableFocusTrap, initialFocusRef, focusAfterRef, true);
56
58
  var popupController = usePopupContext();
57
59
  var innerRef = useForkRef(trapRef, outerRootRef);
58
60
  var uniqId = safeUseId();
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\nimport { safeUseId } from 'src/utils';\nimport { RootProps, component } from 'src/engines';\nimport { useFocusTrap } from 'src/hooks';\n\nimport { popupConfig, usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { IconClose } from '../_Icon/Icons/IconClose';\n\nimport { classes, tokens } from './Modal.tokens';\nimport { ModalProps } from './Modal.types';\nimport { useModal } from './hooks';\nimport { base as viewCSS } from './variations/_view/base';\nimport { getIdLastModal } from './ModalContext';\nimport { CloseButton, ModalBody, ModalContent, base } from './Modal.styles';\n\n// issue #823\nconst Popup = component(popupConfig);\n\n/**\n * Modal.\n * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.\n */\nexport const modalRoot = (Root: RootProps<HTMLDivElement, ModalProps>) =>\n forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n id,\n withAnimation,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n closeOnEsc = true,\n closeOnOverlayClick = true,\n withBlur,\n initialFocusRef,\n focusAfterRef,\n zIndex,\n popupInfo,\n children,\n view,\n opened,\n isOpen,\n hasBody,\n hasClose,\n resizable,\n draggable,\n ...rest\n },\n outerRootRef,\n ) => {\n const innerIsOpen = Boolean(isOpen || opened);\n const innerHasClose = (hasClose === undefined && hasBody) || hasClose;\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRootRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.modalOverlayWithBlurColor})`\n : `var(${tokens.modalOverlayColor})`;\n\n const { modalInfo } = useModal({\n id: innerId,\n isOpen: innerIsOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n });\n\n const transparent = useMemo(() => getIdLastModal(Array.from(popupController.items.values())) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onModalOverlayKeyDown = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n },\n [closeOnOverlayClick, onOverlayClick, onClose],\n );\n\n const overlayNode = (\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onModalOverlayKeyDown}\n />\n );\n\n return (\n <Popup\n id={innerId}\n opened={innerIsOpen}\n ref={innerRef}\n popupInfo={modalInfo}\n withAnimation={withAnimation}\n zIndex={zIndex}\n overlay={hasBody ? overlayNode : <Root view={view}>{overlayNode}</Root>}\n draggable={draggable}\n resizable={resizable}\n {...rest}\n >\n {hasBody ? (\n <Root view={view}>\n <ModalBody>\n <ModalContent>\n {innerHasClose && (\n <CloseButton onClick={onClose} data-test=\"modal-close\">\n <IconClose size=\"s\" color=\"currentColor\" />\n </CloseButton>\n )}\n {children}\n </ModalContent>\n </ModalBody>\n </Root>\n ) : (\n <>{children}</>\n )}\n </Popup>\n );\n },\n );\n\nexport const modalConfig = {\n name: 'Modal',\n tag: 'div',\n layout: modalRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["Popup","component","popupConfig","modalRoot","Root","forwardRef","_ref","outerRootRef","id","withAnimation","onClose","onOverlayClick","onEscKeyDown","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","withBlur","initialFocusRef","focusAfterRef","zIndex","popupInfo","children","view","opened","isOpen","hasBody","hasClose","resizable","draggable","rest","_objectWithoutProperties","_excluded","innerIsOpen","Boolean","innerHasClose","undefined","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","modalOverlayWithBlurColor","modalOverlayColor","_useModal","useModal","modalInfo","transparent","useMemo","getIdLastModal","Array","from","items","values","onModalOverlayKeyDown","useCallback","event","overlayNode","React","createElement","Overlay","className","classes","overlay","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","_extends","ref","ModalBody","ModalContent","CloseButton","onClick","_IconClose","IconClose","size","color","Fragment","modalConfig","name","tag","layout","base","variations","css","viewCSS","defaults"],"mappings":"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"}
1
+ {"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\nimport { safeUseId } from 'src/utils';\nimport { RootProps, component } from 'src/engines';\nimport { useFocusTrap } from 'src/hooks';\n\nimport { popupConfig, usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { IconClose } from '../_Icon/Icons/IconClose';\n\nimport { classes, tokens } from './Modal.tokens';\nimport { ModalProps } from './Modal.types';\nimport { useModal } from './hooks';\nimport { base as viewCSS } from './variations/_view/base';\nimport { getIdLastModal } from './ModalContext';\nimport { CloseButton, ModalBody, ModalContent, base } from './Modal.styles';\n\n// issue #823\nconst Popup = component(popupConfig);\n\n/**\n * Modal.\n * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.\n */\nexport const modalRoot = (Root: RootProps<HTMLDivElement, ModalProps>) =>\n forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n id,\n withAnimation,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n closeOnEsc = true,\n closeOnOverlayClick = true,\n withBlur,\n enableFocusTrap = true,\n initialFocusRef,\n focusAfterRef,\n zIndex,\n popupInfo,\n children,\n view,\n opened,\n isOpen,\n hasBody,\n hasClose,\n resizable,\n draggable,\n ...rest\n },\n outerRootRef,\n ) => {\n const innerIsOpen = Boolean(isOpen || opened);\n const innerHasClose = (hasClose === undefined && hasBody) || hasClose;\n const trapRef = useFocusTrap(enableFocusTrap, initialFocusRef, focusAfterRef, true);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRootRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.modalOverlayWithBlurColor})`\n : `var(${tokens.modalOverlayColor})`;\n\n const { modalInfo } = useModal({\n id: innerId,\n isOpen: innerIsOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n });\n\n const transparent = useMemo(() => getIdLastModal(Array.from(popupController.items.values())) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onModalOverlayKeyDown = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n },\n [closeOnOverlayClick, onOverlayClick, onClose],\n );\n\n const overlayNode = (\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onModalOverlayKeyDown}\n />\n );\n\n return (\n <Popup\n id={innerId}\n opened={innerIsOpen}\n ref={innerRef}\n popupInfo={modalInfo}\n withAnimation={withAnimation}\n zIndex={zIndex}\n overlay={hasBody ? overlayNode : <Root view={view}>{overlayNode}</Root>}\n draggable={draggable}\n resizable={resizable}\n {...rest}\n >\n {hasBody ? (\n <Root view={view}>\n <ModalBody>\n <ModalContent>\n {innerHasClose && (\n <CloseButton onClick={onClose} data-test=\"modal-close\">\n <IconClose size=\"s\" color=\"currentColor\" />\n </CloseButton>\n )}\n {children}\n </ModalContent>\n </ModalBody>\n </Root>\n ) : (\n <>{children}</>\n )}\n </Popup>\n );\n },\n );\n\nexport const modalConfig = {\n name: 'Modal',\n tag: 'div',\n layout: modalRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["Popup","component","popupConfig","modalRoot","Root","forwardRef","_ref","outerRootRef","id","withAnimation","onClose","onOverlayClick","onEscKeyDown","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","withBlur","_ref$enableFocusTrap","enableFocusTrap","initialFocusRef","focusAfterRef","zIndex","popupInfo","children","view","opened","isOpen","hasBody","hasClose","resizable","draggable","rest","_objectWithoutProperties","_excluded","innerIsOpen","Boolean","innerHasClose","undefined","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","modalOverlayWithBlurColor","modalOverlayColor","_useModal","useModal","modalInfo","transparent","useMemo","getIdLastModal","Array","from","items","values","onModalOverlayKeyDown","useCallback","event","overlayNode","React","createElement","Overlay","className","classes","overlay","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","_extends","ref","ModalBody","ModalContent","CloseButton","onClick","_IconClose","IconClose","size","color","Fragment","modalConfig","name","tag","layout","base","variations","css","viewCSS","defaults"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA;AACA,IAAMA,KAAK,gBAAGC,SAAS,CAACC,WAAW,CAAC,CAAA;;AAEpC;AACA;AACA;AACA;IACaC,SAAS,GAAG,SAAZA,SAASA,CAAIC,IAA2C,EAAA;AAAA,EAAA,oBACjEC,UAAU,CACN,UAAAC,IAAA,EAyBIC,YAAY,EACX;AAAA,IAAA,IAxBGC,EAAE,GAAAF,IAAA,CAAFE,EAAE;MACFC,aAAa,GAAAH,IAAA,CAAbG,aAAa;MACbC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;MACPC,cAAc,GAAAL,IAAA,CAAdK,cAAc;MACdC,YAAY,GAAAN,IAAA,CAAZM,YAAY;MAAAC,eAAA,GAAAP,IAAA,CACZQ,UAAU;AAAVA,MAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,eAAA;MAAAE,qBAAA,GAAAT,IAAA,CACjBU,mBAAmB;AAAnBA,MAAAA,mBAAmB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,qBAAA;MAC1BE,QAAQ,GAAAX,IAAA,CAARW,QAAQ;MAAAC,oBAAA,GAAAZ,IAAA,CACRa,eAAe;AAAfA,MAAAA,eAAe,GAAAD,oBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,oBAAA;MACtBE,eAAe,GAAAd,IAAA,CAAfc,eAAe;MACfC,aAAa,GAAAf,IAAA,CAAbe,aAAa;MACbC,MAAM,GAAAhB,IAAA,CAANgB,MAAM;MACNC,SAAS,GAAAjB,IAAA,CAATiB,SAAS;MACTC,QAAQ,GAAAlB,IAAA,CAARkB,QAAQ;MACRC,IAAI,GAAAnB,IAAA,CAAJmB,IAAI;MACJC,MAAM,GAAApB,IAAA,CAANoB,MAAM;MACNC,MAAM,GAAArB,IAAA,CAANqB,MAAM;MACNC,OAAO,GAAAtB,IAAA,CAAPsB,OAAO;MACPC,QAAQ,GAAAvB,IAAA,CAARuB,QAAQ;MACRC,SAAS,GAAAxB,IAAA,CAATwB,SAAS;MACTC,SAAS,GAAAzB,IAAA,CAATyB,SAAS;AACNC,MAAAA,IAAI,GAAAC,wBAAA,CAAA3B,IAAA,EAAA4B,SAAA,CAAA,CAAA;AAIX,IAAA,IAAMC,WAAW,GAAGC,OAAO,CAACT,MAAM,IAAID,MAAM,CAAC,CAAA;IAC7C,IAAMW,aAAa,GAAIR,QAAQ,KAAKS,SAAS,IAAIV,OAAO,IAAKC,QAAQ,CAAA;IACrE,IAAMU,OAAO,GAAGC,YAAY,CAACrB,eAAe,EAAEC,eAAe,EAAEC,aAAa,EAAE,IAAI,CAAC,CAAA;AACnF,IAAA,IAAMoB,eAAe,GAAGC,eAAe,EAAE,CAAA;AAEzC,IAAA,IAAMC,QAAQ,GAAGC,UAAU,CAAiBL,OAAO,EAAEhC,YAAY,CAAC,CAAA;AAElE,IAAA,IAAMsC,MAAM,GAAGC,SAAS,EAAE,CAAA;AAC1B,IAAA,IAAMC,OAAO,GAAGvC,EAAE,IAAIqC,MAAM,CAAA;AAC5B,IAAA,IAAMG,sBAAsB,GAAG/B,QAAQ,GAAA,MAAA,CAAAgC,MAAA,CAC1BC,MAAM,CAACC,yBAAyB,gBAAAF,MAAA,CAChCC,MAAM,CAACE,iBAAiB,EAAG,GAAA,CAAA,CAAA;IAExC,IAAAC,SAAA,GAAsBC,QAAQ,CAAC;AAC3B9C,QAAAA,EAAE,EAAEuC,OAAO;AACXpB,QAAAA,MAAM,EAAEQ,WAAW;AACnBrB,QAAAA,UAAU,EAAVA,UAAU;AACVF,QAAAA,YAAY,EAAZA,YAAY;AACZF,QAAAA,OAAO,EAAPA,OAAO;AACPa,QAAAA,SAAS,EAATA,SAAAA;AACJ,OAAC,CAAC;MAPMgC,SAAS,GAAAF,SAAA,CAATE,SAAS,CAAA;IASjB,IAAMC,WAAW,GAAGC,OAAO,CAAC,YAAA;AAAA,MAAA,OAAMC,cAAc,CAACC,KAAK,CAACC,IAAI,CAACnB,eAAe,CAACoB,KAAK,CAACC,MAAM,EAAE,CAAC,CAAC,KAAKf,OAAO,CAAA;AAAA,KAAA,EAAE,CACtGA,OAAO,EACPN,eAAe,CAACoB,KAAK,CACxB,CAAC,CAAA;AAEF,IAAA,IAAME,qBAAqB,GAAGC,WAAW,CACrC,UAACC,KAAuC,EAAK;AACzC,MAAA,IAAItD,cAAc,EAAE;QAChBA,cAAc,CAACsD,KAAK,CAAC,CAAA;AACrB,QAAA,OAAA;AACJ,OAAA;AAEA,MAAA,IAAIvD,OAAO,EAAE;AACTA,QAAAA,OAAO,EAAE,CAAA;AACb,OAAA;KACH,EACD,CAACM,mBAAmB,EAAEL,cAAc,EAAED,OAAO,CACjD,CAAC,CAAA;AAED,IAAA,IAAMwD,WAAW,gBACbC,KAAA,CAAAC,aAAA,CAACC,OAAO,EAAA;MACJC,SAAS,EAAEC,OAAO,CAACC,OAAQ;MAC3BlD,MAAM,EAAEA,MAAM,IAAImD,eAAgB;AAClCC,MAAAA,uBAAuB,EAAE1B,sBAAuB;AAChD/B,MAAAA,QAAQ,EAAEA,QAAS;AACnBuC,MAAAA,WAAW,EAAEA,WAAY;AACzBmB,MAAAA,WAAW,EAAE3D,mBAAoB;AACjCL,MAAAA,cAAc,EAAEoD,qBAAAA;AAAsB,KACzC,CACJ,CAAA;AAED,IAAA,oBACII,KAAA,CAAAC,aAAA,CAACpE,KAAK,EAAA4E,QAAA,CAAA;AACFpE,MAAAA,EAAE,EAAEuC,OAAQ;AACZrB,MAAAA,MAAM,EAAES,WAAY;AACpB0C,MAAAA,GAAG,EAAElC,QAAS;AACdpB,MAAAA,SAAS,EAAEgC,SAAU;AACrB9C,MAAAA,aAAa,EAAEA,aAAc;AAC7Ba,MAAAA,MAAM,EAAEA,MAAO;MACfkD,OAAO,EAAE5C,OAAO,GAAGsC,WAAW,gBAAGC,KAAA,CAAAC,aAAA,CAAChE,IAAI,EAAA;AAACqB,QAAAA,IAAI,EAAEA,IAAAA;AAAK,OAAA,EAAEyC,WAAkB,CAAE;AACxEnC,MAAAA,SAAS,EAAEA,SAAU;AACrBD,MAAAA,SAAS,EAAEA,SAAAA;KACPE,EAAAA,IAAI,GAEPJ,OAAO,gBACJuC,KAAA,CAAAC,aAAA,CAAChE,IAAI,EAAA;AAACqB,MAAAA,IAAI,EAAEA,IAAAA;AAAK,KAAA,eACb0C,KAAA,CAAAC,aAAA,CAACU,SAAS,EAAA,IAAA,eACNX,KAAA,CAAAC,aAAA,CAACW,YAAY,QACR1C,aAAa,iBACV8B,KAAA,CAAAC,aAAA,CAACY,WAAW,EAAA;AAACC,MAAAA,OAAO,EAAEvE,OAAQ;MAAC,WAAU,EAAA,aAAA;KAAawE,EAAAA,UAAA,KAAAA,UAAA,gBAClDf,KAAA,CAAAC,aAAA,CAACe,SAAS,EAAA;AAACC,MAAAA,IAAI,EAAC,GAAG;AAACC,MAAAA,KAAK,EAAC,cAAA;AAAc,KAAE,CAAC,CAClC,CAChB,EACA7D,QACS,CACP,CACT,CAAC,gBAEP2C,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAmB,QAAA,EAAG9D,IAAAA,EAAAA,QAAW,CAEf,CAAC,CAAA;AAEhB,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAM+D,WAAW,GAAG;AACvBC,EAAAA,IAAI,EAAE,OAAO;AACbC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEvF,SAAS;AACjBwF,EAAAA,IAAI,EAAJA,IAAI;AACJC,EAAAA,UAAU,EAAE;AACRnE,IAAAA,IAAI,EAAE;AACFoE,MAAAA,GAAG,EAAEC,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNtE,IAAAA,IAAI,EAAE,SAAA;AACV,GAAA;AACJ;;;;"}
@@ -53,7 +53,7 @@ var useFocusTrap = function useFocusTrap() {
53
53
  focusManager.teardownScopedFocus();
54
54
  focusManager.returnFocus();
55
55
  }
56
- if (active && node) {
56
+ if (node) {
57
57
  focusManager.setupScopedFocus(node);
58
58
  focusManager.markForFocusAfter(focusAfterNode);
59
59
 
@@ -73,12 +73,14 @@ var useFocusTrap = function useFocusTrap() {
73
73
  ref.current = null;
74
74
  }, [active, firstFocusSelector]);
75
75
  useEffect(function () {
76
- if (!active) {
77
- return;
78
- }
79
76
  var handleKeyDown = function handleKeyDown(event) {
80
77
  if (event.key === 'Tab' && ref.current) {
81
- scopeTab(ref.current, event);
78
+ scopeTab(ref.current, event, active);
79
+ if (!active) {
80
+ setTimeout(function () {
81
+ focusManager.teardownScopedFocus();
82
+ });
83
+ }
82
84
  }
83
85
  };
84
86
  document.addEventListener('keydown', handleKeyDown);
@@ -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): ((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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"}
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 (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 const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && ref.current) {\n scopeTab(ref.current, event, active);\n\n if (!active) {\n setTimeout(() => {\n focusManager.teardownScopedFocus();\n });\n }\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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"}
@@ -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, activeFocusTrap) {
9
9
  var tabbable = findTabbableDescendants(node);
10
10
  if (!tabbable.length) {
11
11
  event.preventDefault();
@@ -15,9 +15,9 @@ var scopeTab = function scopeTab(node, event) {
15
15
  // смотрим, является ли элемент крайним - первый или последним
16
16
  var finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
17
17
  var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
18
-
18
+ console.log(!leavingFinalTabbable || !activeFocusTrap);
19
19
  // если не является, то передаем обработку таба самому браузеру
20
- if (!leavingFinalTabbable) {
20
+ if (!leavingFinalTabbable || !activeFocusTrap) {
21
21
  return;
22
22
  }
23
23
 
@@ -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) => {\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;;;;"}
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, activeFocusTrap?: boolean) => {\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 console.log(!leavingFinalTabbable || !activeFocusTrap);\n // если не является, то передаем обработку таба самому браузеру\n if (!leavingFinalTabbable || !activeFocusTrap) {\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","activeFocusTrap","tabbable","findTabbableDescendants","length","preventDefault","finalTabbable","shiftKey","leavingFinalTabbable","document","activeElement","console","log","target","focus"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,IAAiB,EAAEC,KAAoB,EAAEC,eAAyB,EAAK;AAC5F,EAAA,IAAMC,QAAQ,GAAGC,uBAAuB,CAACJ,IAAI,CAAC,CAAA;AAC9C,EAAA,IAAI,CAACG,QAAQ,CAACE,MAAM,EAAE;IAClBJ,KAAK,CAACK,cAAc,EAAE,CAAA;AACtB,IAAA,OAAA;AACJ,GAAA;;AAEA;AACA,EAAA,IAAMC,aAAa,GAAGJ,QAAQ,CAACF,KAAK,CAACO,QAAQ,GAAG,CAAC,GAAGL,QAAQ,CAACE,MAAM,GAAG,CAAC,CAAC,CAAA;AACxE,EAAA,IAAMI,oBAAoB,GAAGF,aAAa,KAAKG,QAAQ,CAACC,aAAa,IAAIX,IAAI,KAAKU,QAAQ,CAACC,aAAa,CAAA;EAExGC,OAAO,CAACC,GAAG,CAAC,CAACJ,oBAAoB,IAAI,CAACP,eAAe,CAAC,CAAA;AACtD;AACA,EAAA,IAAI,CAACO,oBAAoB,IAAI,CAACP,eAAe,EAAE;AAC3C,IAAA,OAAA;AACJ,GAAA;;AAEA;EACAD,KAAK,CAACK,cAAc,EAAE,CAAA;AACtB,EAAA,IAAMQ,MAAM,GAAGX,QAAQ,CAACF,KAAK,CAACO,QAAQ,GAAGL,QAAQ,CAACE,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AACjE,EAAA,IAAIS,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.337.0-canary.2243.17820447971.0",
3
+ "version": "0.337.0-canary.2244.17824684419.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -79,8 +79,8 @@
79
79
  "@rollup/plugin-babel": "^6.0.4",
80
80
  "@rollup/plugin-commonjs": "^25.0.4",
81
81
  "@rollup/plugin-node-resolve": "^15.1.0",
82
- "@salutejs/plasma-sb-utils": "0.209.0-canary.2243.17820447971.0",
83
- "@salutejs/plasma-themes": "0.39.0-canary.2243.17820447971.0",
82
+ "@salutejs/plasma-sb-utils": "0.208.0-dev.0",
83
+ "@salutejs/plasma-themes": "0.38.0-dev.0",
84
84
  "@storybook/addon-docs": "8.6.12",
85
85
  "@storybook/addon-essentials": "8.6.12",
86
86
  "@storybook/manager-api": "8.6.12",
@@ -117,7 +117,7 @@
117
117
  "@linaria/react": "5.0.3",
118
118
  "@popperjs/core": "2.11.8",
119
119
  "@salutejs/input-core": "2.1.2",
120
- "@salutejs/plasma-core": "1.209.0-canary.2243.17820447971.0",
120
+ "@salutejs/plasma-core": "1.208.0-dev.0",
121
121
  "@salutejs/react-maskinput": "3.2.6",
122
122
  "@tanstack/react-table": "8.21.2",
123
123
  "@tanstack/react-virtual": "3.13.2",
@@ -137,5 +137,5 @@
137
137
  "sideEffects": [
138
138
  "*.css"
139
139
  ],
140
- "gitHead": "168a293e06a1da521e14cdf34dc529be6354d4fc"
140
+ "gitHead": "4b0c9b1fbcefef397cc37d51cb55c8f226134535"
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, 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, [
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, _param_enableFocusTrap = _param.enableFocusTrap, enableFocusTrap = _param_enableFocusTrap === void 0 ? true : _param_enableFocusTrap, 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,6 +139,7 @@ var modalRoot = function(Root) {
139
139
  "closeOnEsc",
140
140
  "closeOnOverlayClick",
141
141
  "withBlur",
142
+ "enableFocusTrap",
142
143
  "initialFocusRef",
143
144
  "focusAfterRef",
144
145
  "zIndex",
@@ -154,7 +155,7 @@ var modalRoot = function(Root) {
154
155
  ]);
155
156
  var innerIsOpen = Boolean(isOpen || opened);
156
157
  var innerHasClose = hasClose === undefined && hasBody || hasClose;
157
- var trapRef = (0, _hooks.useFocusTrap)(true, initialFocusRef, focusAfterRef, true);
158
+ var trapRef = (0, _hooks.useFocusTrap)(enableFocusTrap, initialFocusRef, focusAfterRef, true);
158
159
  var popupController = (0, _Popup.usePopupContext)();
159
160
  var innerRef = (0, _plasmacore.useForkRef)(trapRef, outerRootRef);
160
161
  var uniqId = (0, _utils.safeUseId)();
@@ -1,16 +1 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "Combobox", {
6
- enumerable: true,
7
- get: function() {
8
- return Combobox;
9
- }
10
- });
11
- var _engines = require("../../../engines");
12
- var _ = require("../../..");
13
- var _Comboboxconfig = require("./Combobox.config");
14
- var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
15
- var ComboboxComponent = (0, _engines.component)(mergedConfig);
16
- var Combobox = ComboboxComponent;
@@ -54,7 +54,7 @@ var useFocusTrap = function() {
54
54
  focusManager.teardownScopedFocus();
55
55
  focusManager.returnFocus();
56
56
  }
57
- if (active && node) {
57
+ if (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.
@@ -76,12 +76,14 @@ var useFocusTrap = function() {
76
76
  firstFocusSelector
77
77
  ]);
78
78
  (0, _react.useEffect)(function() {
79
- if (!active) {
80
- return;
81
- }
82
79
  var handleKeyDown = function(event) {
83
80
  if (event.key === 'Tab' && ref.current) {
84
- (0, _scopeTab.scopeTab)(ref.current, event);
81
+ (0, _scopeTab.scopeTab)(ref.current, event, active);
82
+ if (!active) {
83
+ setTimeout(function() {
84
+ focusManager.teardownScopedFocus();
85
+ });
86
+ }
85
87
  }
86
88
  };
87
89
  document.addEventListener('keydown', handleKeyDown);
@@ -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, activeFocusTrap) {
13
13
  var tabbable = (0, _tabbable.findTabbableDescendants)(node);
14
14
  if (!tabbable.length) {
15
15
  event.preventDefault();
@@ -18,8 +18,9 @@ var scopeTab = function(node, event) {
18
18
  // смотрим, является ли элемент крайним - первый или последним
19
19
  var finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
20
20
  var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
21
+ console.log(!leavingFinalTabbable || !activeFocusTrap);
21
22
  // если не является, то передаем обработку таба самому браузеру
22
- if (!leavingFinalTabbable) {
23
+ if (!leavingFinalTabbable || !activeFocusTrap) {
23
24
  return;
24
25
  }
25
26
  // иначе зацкливаемся
@@ -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, 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, [
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, _param_enableFocusTrap = _param.enableFocusTrap, enableFocusTrap = _param_enableFocusTrap === void 0 ? true : _param_enableFocusTrap, 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,6 +83,7 @@ var Popup = component(popupConfig);
83
83
  "closeOnEsc",
84
84
  "closeOnOverlayClick",
85
85
  "withBlur",
86
+ "enableFocusTrap",
86
87
  "initialFocusRef",
87
88
  "focusAfterRef",
88
89
  "zIndex",
@@ -98,7 +99,7 @@ var Popup = component(popupConfig);
98
99
  ]);
99
100
  var innerIsOpen = Boolean(isOpen || opened);
100
101
  var innerHasClose = hasClose === undefined && hasBody || hasClose;
101
- var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);
102
+ var trapRef = useFocusTrap(enableFocusTrap, initialFocusRef, focusAfterRef, true);
102
103
  var popupController = usePopupContext();
103
104
  var innerRef = useForkRef(trapRef, outerRootRef);
104
105
  var uniqId = safeUseId();
@@ -46,7 +46,7 @@ var focusManager = new FocusManager();
46
46
  focusManager.teardownScopedFocus();
47
47
  focusManager.returnFocus();
48
48
  }
49
- if (active && node) {
49
+ if (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.
@@ -68,12 +68,14 @@ var focusManager = new FocusManager();
68
68
  firstFocusSelector
69
69
  ]);
70
70
  useEffect(function() {
71
- if (!active) {
72
- return;
73
- }
74
71
  var handleKeyDown = function(event) {
75
72
  if (event.key === 'Tab' && ref.current) {
76
- scopeTab(ref.current, event);
73
+ scopeTab(ref.current, event, active);
74
+ if (!active) {
75
+ setTimeout(function() {
76
+ focusManager.teardownScopedFocus();
77
+ });
78
+ }
77
79
  }
78
80
  };
79
81
  document.addEventListener('keydown', handleKeyDown);
@@ -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, activeFocusTrap) {
7
7
  var tabbable = findTabbableDescendants(node);
8
8
  if (!tabbable.length) {
9
9
  event.preventDefault();
@@ -12,8 +12,9 @@ import { findTabbableDescendants } from "./tabbable";
12
12
  // смотрим, является ли элемент крайним - первый или последним
13
13
  var finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
14
14
  var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
15
+ console.log(!leavingFinalTabbable || !activeFocusTrap);
15
16
  // если не является, то передаем обработку таба самому браузеру
16
- if (!leavingFinalTabbable) {
17
+ if (!leavingFinalTabbable || !activeFocusTrap) {
17
18
  return;
18
19
  }
19
20
  // иначе зацкливаемся
@@ -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,sFAiHhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAnHQ,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAgIpE,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,sFAkHhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBApHQ,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAiIpE,CAAC"}
@@ -33,6 +33,11 @@ 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
+ enableFocusTrap?: boolean;
36
41
  /**
37
42
  * Первый элемент для фокуса внутри модального окна.
38
43
  */
@@ -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;;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
+ {"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;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;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":"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"}
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,CAsDzC,CAAC"}
@@ -3,5 +3,5 @@
3
3
  * @param node
4
4
  * @param event
5
5
  */
6
- export declare const scopeTab: (node: HTMLElement, event: KeyboardEvent) => void;
6
+ export declare const scopeTab: (node: HTMLElement, event: KeyboardEvent, activeFocusTrap?: boolean) => 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,SAsB/D,CAAC"}
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,oBAAoB,OAAO,SAuB1F,CAAC"}