@salutejs/plasma-web 1.585.0-canary.2021.15824070198.0 → 1.585.0-canary.2022.15704348481.0

package/es/hooks/useFocusTrap.component-test.js

@@ -0,0 +1,165 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils';
+var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-web__sc-1m9jnbs-0"
+})(["margin:1rem 0;display:flex;justify-content:space-around;align-items:center;"]);
+describe('plasma-web: useFocusTrap', function () {
+  var _Button, _Button2, _Button3, _Button4, _CypressTestDecorator, _CypressTestDecorator2, _CypressTestDecorator3, _CypressTestDecorator4;
+  var ModalsProvider = getComponent('ModalsProvider');
+  var Modal = getComponent('Modal');
+  var Button = getComponent('Button');
+  var P1 = getComponent('P1');
+  var useFocusTrap = getComponent('useFocusTrap');
+  function Demo() {
+    var ref = useFocusTrap(true, '#focus-first');
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showButtons = _useState2[0],
+      setShowButtons = _useState2[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtons(true);
+      }
+    }, "Show buttons"), showButtons && /*#__PURE__*/React.createElement(StyledWrapper, {
+      ref: ref
+    }, /*#__PURE__*/React.createElement(Button, {
+      style: {
+        visibility: 'hidden'
+      }
+    }, "Btn"), _Button || (_Button = /*#__PURE__*/React.createElement(Button, null, "Button")), _Button2 || (_Button2 = /*#__PURE__*/React.createElement(Button, {
+      id: "focus-first"
+    }, "First")), /*#__PURE__*/React.createElement(Button, {
+      style: {
+        display: 'none'
+      }
+    }, "Not displayed"), /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtons(false);
+      }
+    }, "Close"), /*#__PURE__*/React.createElement(Button, {
+      style: {
+        opacity: '0'
+      }
+    }, "Btn")));
+  }
+  function OneNode() {
+    var ref = useFocusTrap();
+    var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showButtons = _useState4[0],
+      setShowButtons = _useState4[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtons(true);
+      }
+    }, "Show"), showButtons && /*#__PURE__*/React.createElement(Button, {
+      ref: ref
+    }, "Trapped button"));
+  }
+  function Double() {
+    var refA = useFocusTrap();
+    var refB = useFocusTrap();
+    var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showButtonsA = _useState6[0],
+      setShowButtonsA = _useState6[1];
+    var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      showButtonsB = _useState8[0],
+      setShowButtonsB = _useState8[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtonsA(true);
+      }
+    }, "Show buttons A"), showButtonsA && /*#__PURE__*/React.createElement(StyledWrapper, {
+      ref: refA
+    }, _Button3 || (_Button3 = /*#__PURE__*/React.createElement(Button, null, "Button A")), /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtonsB(true);
+      }
+    }, "Show buttons B"), showButtonsB && /*#__PURE__*/React.createElement(StyledWrapper, {
+      ref: refB
+    }, _Button4 || (_Button4 = /*#__PURE__*/React.createElement(Button, null, "Button B")), /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtonsB(false);
+      }
+    }, "Close B")), /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtonsA(false);
+      }
+    }, "Close A")));
+  }
+  it('check first focus', function () {
+    mount(_CypressTestDecorator || (_CypressTestDecorator = /*#__PURE__*/React.createElement(CypressTestDecorator, null, /*#__PURE__*/React.createElement(ModalsProvider, null, /*#__PURE__*/React.createElement(Demo, null)))));
+    cy.get('button').contains('Show buttons').type('{enter}');
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('First');
+    });
+  });
+  it('check tab cicle', function () {
+    mount(_CypressTestDecorator2 || (_CypressTestDecorator2 = /*#__PURE__*/React.createElement(CypressTestDecorator, null, /*#__PURE__*/React.createElement(ModalsProvider, null, /*#__PURE__*/React.createElement(Demo, null)))));
+    cy.get('button').contains('Show buttons').type('{enter}');
+    cy.focused().tab();
+    cy.focused().tab();
+    cy.focused().tab();
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('First');
+    });
+  });
+  it('check one node', function () {
+    mount(_CypressTestDecorator3 || (_CypressTestDecorator3 = /*#__PURE__*/React.createElement(CypressTestDecorator, null, /*#__PURE__*/React.createElement(ModalsProvider, null, /*#__PURE__*/React.createElement(OneNode, null)))));
+    cy.get('button').contains('Show').type('{enter}');
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Trapped button');
+    });
+    cy.focused().tab();
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Trapped button');
+    });
+  });
+  it('check blur and focus', function () {
+    mount(_CypressTestDecorator4 || (_CypressTestDecorator4 = /*#__PURE__*/React.createElement(CypressTestDecorator, null, /*#__PURE__*/React.createElement(ModalsProvider, null, /*#__PURE__*/React.createElement(Double, null)))));
+    cy.get('button').contains('Show buttons A').type('{enter}');
+
+    // что выделяется после blur при открытым A
+    cy.focused().blur();
+    cy.get('body').tab();
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Button A');
+    });
+
+    // проверка первых элементов
+    cy.get('button').contains('Show buttons B').type('{enter}');
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Button B');
+    });
+    cy.focused().tab();
+
+    // что выделяется после blur при открытом B
+    cy.focused().blur();
+    cy.get('body').tab();
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Button B');
+    });
+
+    // проверка элемента при закрытии
+    cy.get('button').contains('Close B').type('{enter}');
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Show buttons B');
+    });
+
+    // что выделяется после blur при закрытом B/открытом A
+    cy.focused().blur();
+    cy.get('body').tab();
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Button A');
+    });
+  });
+});

package/es/index.js

@@ -81,4 +81,4 @@ export * from './components/Note';
 export * from './components/LinkButton';
 export * from './components/NumberFormat';
 export * from './components/Table';
-export * from './components/CodeField';
+export * from './components/CodeField';

package/es/mixins/index.js

@@ -1,4 +1,4 @@
 import { createApplyPaperMixin } from '@salutejs/plasma-new-hope/styled-components';
 import * as allTokens from '@salutejs/plasma-themes/tokens/plasma_web';
 export { addFocus, syntheticFocus, applyBlur, blurs, applyDisabled, applyEllipsis, applyHyphens, applyMaxLines, applyNoSelect, applyRoundness, radiuses, applySkeletonGradient, applyView, views, applyScrollSnap, shadows, applySpacing, spacing } from '@salutejs/plasma-core';
-export var applyPaper = createApplyPaperMixin(allTokens);
+export var applyPaper = /*#__PURE__*/createApplyPaperMixin(allTokens);

package/es/tokens/colors.js

@@ -42,4 +42,4 @@ export var linkHover = 'var(--plasma-colors-link-hover)';
 export var linkActive = 'var(--plasma-colors-link-active)';
 export var linkVisited = 'var(--plasma-colors-link-visited)';
 export var linkVisitedHover = 'var(--plasma-colors-link-visited-hover)';
-export var linkVisitedActive = 'var(--plasma-colors-link-visited-active)';
+export var linkVisitedActive = 'var(--plasma-colors-link-visited-active)';

package/es/tokens/index.js

@@ -1,3 +1,3 @@
 export * from './colors';
 export * from './sizes';
-export * from './typography';
+export * from './typography';

package/es/tokens/sizes.js

@@ -3,4 +3,4 @@ export var fieldHelperTextMarginTop = 'var(--plasma-field-helper-text-margin-top
 export var fieldLabelMarginBottom = 'var(--plasma-field-label-margin-bottom)';
 export var inputBorderRadius = 'var(--plasma-input-border-radius)';
 export var inputBorderWidth = 'var(--plasma-input-border-width)';
-export var inputLabelMarginTop = 'var(--plasma-input-label-margin-top)';
+export var inputLabelMarginTop = 'var(--plasma-input-label-margin-top)';

package/es/tokens/typography.js

@@ -1,49 +1,49 @@
 export { dsplL, dsplLBold, dsplM, dsplMBold, dsplS, dsplSBold, h1, h1Bold, h2, h2Bold, h3, h3Bold, h4, h4Bold, h5, h5Bold, bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, bodyXXS, bodyXXSBold, textL, textLBold, textM, textMBold, textS, textSBold, textXS, textXSBold, body1, body2, body3, button1, button2, caption, display1, display2, display3, footnote1, footnote2, headline1, headline2, headline3, headline4, paragraph1, paragraph2, underline } from '@salutejs/plasma-new-hope/styled-components';
 export var fieldTypo = {
-    fontFamily: 'var(--plasma-field-font-family)',
-    fontSize: 'var(--plasma-field-font-size)',
-    fontStyle: 'var(--plasma-field-font-style)',
-    fontWeight: 'var(--plasma-field-font-weight)',
-    letterSpacing: 'var(--plasma-field-letter-spacing)',
-    lineHeight: 'var(--plasma-field-line-height)'
+  fontFamily: 'var(--plasma-field-font-family)',
+  fontSize: 'var(--plasma-field-font-size)',
+  fontStyle: 'var(--plasma-field-font-style)',
+  fontWeight: 'var(--plasma-field-font-weight)',
+  letterSpacing: 'var(--plasma-field-letter-spacing)',
+  lineHeight: 'var(--plasma-field-line-height)'
 };
 export var fieldHelperTextTypo = {
-    fontFamily: 'var(--plasma-field-helper-text-font-family)',
-    fontSize: 'var(--plasma-field-helper-text-font-size)',
-    fontStyle: 'var(--plasma-field-helper-text-font-style)',
-    fontWeight: 'var(--plasma-field-helper-text-font-weight)',
-    letterSpacing: 'var(--plasma-field-helper-text-letter-spacing)',
-    lineHeight: 'var(--plasma-field-helper-text-line-height)'
+  fontFamily: 'var(--plasma-field-helper-text-font-family)',
+  fontSize: 'var(--plasma-field-helper-text-font-size)',
+  fontStyle: 'var(--plasma-field-helper-text-font-style)',
+  fontWeight: 'var(--plasma-field-helper-text-font-weight)',
+  letterSpacing: 'var(--plasma-field-helper-text-letter-spacing)',
+  lineHeight: 'var(--plasma-field-helper-text-line-height)'
 };
 export var headline5 = {
-    fontFamily: "var(--plasma-typo-headline5-font-family, 'SB Sans Text',sans-serif)",
-    fontWeight: 'var(--plasma-typo-headline5-font-weight, 600)',
-    fontStyle: 'var(--plasma-typo-headline5-font-style, normal)',
-    fontSize: 'var(--plasma-typo-headline5-font-size, 1rem)',
-    letterSpacing: 'var(--plasma-typo-headline5-letter-spacing, -0.0190em)',
-    lineHeight: 'var(--plasma-typo-headline5-line-height, 1.25rem)'
+  fontFamily: "var(--plasma-typo-headline5-font-family, 'SB Sans Text',sans-serif)",
+  fontWeight: 'var(--plasma-typo-headline5-font-weight, 600)',
+  fontStyle: 'var(--plasma-typo-headline5-font-style, normal)',
+  fontSize: 'var(--plasma-typo-headline5-font-size, 1rem)',
+  letterSpacing: 'var(--plasma-typo-headline5-letter-spacing, -0.0190em)',
+  lineHeight: 'var(--plasma-typo-headline5-line-height, 1.25rem)'
 };
 export var inputTypo = {
-    fontFamily: 'var(--plasma-input-font-family)',
-    fontSize: 'var(--plasma-input-font-size)',
-    fontStyle: 'var(--plasma-input-font-style)',
-    fontWeight: 'var(--plasma-input-font-weight)',
-    letterSpacing: 'var(--plasma-input-letter-spacing)',
-    lineHeight: 'var(--plasma-input-line-height)'
+  fontFamily: 'var(--plasma-input-font-family)',
+  fontSize: 'var(--plasma-input-font-size)',
+  fontStyle: 'var(--plasma-input-font-style)',
+  fontWeight: 'var(--plasma-input-font-weight)',
+  letterSpacing: 'var(--plasma-input-letter-spacing)',
+  lineHeight: 'var(--plasma-input-line-height)'
 };
 export var inputLabelTypo = {
-    fontFamily: 'var(--plasma-input-label-font-family)',
-    fontSize: 'var(--plasma-input-label-font-size)',
-    fontStyle: 'var(--plasma-input-label-font-style)',
-    fontWeight: 'var(--plasma-input-label-font-weight)',
-    letterSpacing: 'var(--plasma-input-label-letter-spacing)',
-    lineHeight: 'var(--plasma-input-label-line-height)'
+  fontFamily: 'var(--plasma-input-label-font-family)',
+  fontSize: 'var(--plasma-input-label-font-size)',
+  fontStyle: 'var(--plasma-input-label-font-style)',
+  fontWeight: 'var(--plasma-input-label-font-weight)',
+  letterSpacing: 'var(--plasma-input-label-letter-spacing)',
+  lineHeight: 'var(--plasma-input-label-line-height)'
 };
 export var subtitle = {
-    fontFamily: "var(--plasma-typo-subtitle-font-family, 'SB Sans Text',sans-serif)",
-    fontWeight: 'var(--plasma-typo-subtitle-font-weight, 400)',
-    fontStyle: 'var(--plasma-typo-subtitle-font-style, normal)',
-    fontSize: 'var(--plasma-typo-subtitle-font-size, 1.25rem)',
-    letterSpacing: 'var(--plasma-typo-subtitle-letter-spacing, -0.0190em)',
-    lineHeight: 'var(--plasma-typo-subtitle-line-height, 1.5rem)'
-};
+  fontFamily: "var(--plasma-typo-subtitle-font-family, 'SB Sans Text',sans-serif)",
+  fontWeight: 'var(--plasma-typo-subtitle-font-weight, 400)',
+  fontStyle: 'var(--plasma-typo-subtitle-font-style, normal)',
+  fontSize: 'var(--plasma-typo-subtitle-font-size, 1.25rem)',
+  letterSpacing: 'var(--plasma-typo-subtitle-letter-spacing, -0.0190em)',
+  lineHeight: 'var(--plasma-typo-subtitle-line-height, 1.5rem)'
+};

package/es/types/index.js

@@ -1 +1 @@
-export { };
+export {};

package/es/utils/index.js

@@ -1,4 +1,4 @@
 export { animatedScrollToX, animatedScrollToY, canUseDOM, convertRoundnessMatrix, extractTextFrom, padZeroNumber, monthLongName, monthShortName, formatCurrency, setRef, toCssSize, transformStyles } from '@salutejs/plasma-core';
 export { mediaQuery, gridBreakpoints, gridColumns, gridMargins, gridGutters, gridSizes } from '@salutejs/plasma-hope';
 export { clearSelection } from '@salutejs/plasma-hope';
-export { selectText } from '@salutejs/plasma-hope';
+export { selectText } from '@salutejs/plasma-hope';

package/hocs/index.js

@@ -1,20 +1,19 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get withAutoFocus () {
-        return _plasmacore.withAutoFocus;
-    },
-    get withSkeleton () {
-        return _styledcomponents.withSkeleton;
-    }
+Object.defineProperty(exports, "withAutoFocus", {
+  enumerable: true,
+  get: function get() {
+    return _plasmaCore.withAutoFocus;
+  }
 });
-var _plasmacore = require("@salutejs/plasma-core");
-var _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+Object.defineProperty(exports, "withSkeleton", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponents.withSkeleton;
+  }
+});
+var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
+var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");

package/hooks/index.js

@@ -1,26 +1,31 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get useDebouncedFunction () {
-        return _plasmacore.useDebouncedFunction;
-    },
-    get useFocusTrap () {
-        return _plasmahope.useFocusTrap;
-    },
-    get useForkRef () {
-        return _plasmacore.useForkRef;
-    },
-    get useIsomorphicLayoutEffect () {
-        return _plasmacore.useIsomorphicLayoutEffect;
-    }
+Object.defineProperty(exports, "useDebouncedFunction", {
+  enumerable: true,
+  get: function get() {
+    return _plasmaCore.useDebouncedFunction;
+  }
 });
-var _plasmacore = require("@salutejs/plasma-core");
-var _plasmahope = require("@salutejs/plasma-hope");
+Object.defineProperty(exports, "useFocusTrap", {
+  enumerable: true,
+  get: function get() {
+    return _plasmaHope.useFocusTrap;
+  }
+});
+Object.defineProperty(exports, "useForkRef", {
+  enumerable: true,
+  get: function get() {
+    return _plasmaCore.useForkRef;
+  }
+});
+Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
+  enumerable: true,
+  get: function get() {
+    return _plasmaCore.useIsomorphicLayoutEffect;
+  }
+});
+var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
+var _plasmaHope = /*#__PURE__*/require("@salutejs/plasma-hope");

package/hooks/useFocusTrap.component-test.js

@@ -0,0 +1,171 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
+var _plasmaCyUtils = /*#__PURE__*/require("@salutejs/plasma-cy-utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var StyledWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-web__sc-1m9jnbs-0"
+})(["margin:1rem 0;display:flex;justify-content:space-around;align-items:center;"]);
+describe('plasma-web: useFocusTrap', function () {
+  var _Button, _Button2, _Button3, _Button4, _CypressTestDecorator, _CypressTestDecorator2, _CypressTestDecorator3, _CypressTestDecorator4;
+  var ModalsProvider = (0, _plasmaCyUtils.getComponent)('ModalsProvider');
+  var Modal = (0, _plasmaCyUtils.getComponent)('Modal');
+  var Button = (0, _plasmaCyUtils.getComponent)('Button');
+  var P1 = (0, _plasmaCyUtils.getComponent)('P1');
+  var useFocusTrap = (0, _plasmaCyUtils.getComponent)('useFocusTrap');
+  function Demo() {
+    var ref = useFocusTrap(true, '#focus-first');
+    var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showButtons = _useState2[0],
+      setShowButtons = _useState2[1];
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtons(true);
+      }
+    }, "Show buttons"), showButtons && /*#__PURE__*/_react["default"].createElement(StyledWrapper, {
+      ref: ref
+    }, /*#__PURE__*/_react["default"].createElement(Button, {
+      style: {
+        visibility: 'hidden'
+      }
+    }, "Btn"), _Button || (_Button = /*#__PURE__*/_react["default"].createElement(Button, null, "Button")), _Button2 || (_Button2 = /*#__PURE__*/_react["default"].createElement(Button, {
+      id: "focus-first"
+    }, "First")), /*#__PURE__*/_react["default"].createElement(Button, {
+      style: {
+        display: 'none'
+      }
+    }, "Not displayed"), /*#__PURE__*/_react["default"].createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtons(false);
+      }
+    }, "Close"), /*#__PURE__*/_react["default"].createElement(Button, {
+      style: {
+        opacity: '0'
+      }
+    }, "Btn")));
+  }
+  function OneNode() {
+    var ref = useFocusTrap();
+    var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showButtons = _useState4[0],
+      setShowButtons = _useState4[1];
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtons(true);
+      }
+    }, "Show"), showButtons && /*#__PURE__*/_react["default"].createElement(Button, {
+      ref: ref
+    }, "Trapped button"));
+  }
+  function Double() {
+    var refA = useFocusTrap();
+    var refB = useFocusTrap();
+    var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showButtonsA = _useState6[0],
+      setShowButtonsA = _useState6[1];
+    var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      showButtonsB = _useState8[0],
+      setShowButtonsB = _useState8[1];
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtonsA(true);
+      }
+    }, "Show buttons A"), showButtonsA && /*#__PURE__*/_react["default"].createElement(StyledWrapper, {
+      ref: refA
+    }, _Button3 || (_Button3 = /*#__PURE__*/_react["default"].createElement(Button, null, "Button A")), /*#__PURE__*/_react["default"].createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtonsB(true);
+      }
+    }, "Show buttons B"), showButtonsB && /*#__PURE__*/_react["default"].createElement(StyledWrapper, {
+      ref: refB
+    }, _Button4 || (_Button4 = /*#__PURE__*/_react["default"].createElement(Button, null, "Button B")), /*#__PURE__*/_react["default"].createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtonsB(false);
+      }
+    }, "Close B")), /*#__PURE__*/_react["default"].createElement(Button, {
+      onClick: function onClick() {
+        return setShowButtonsA(false);
+      }
+    }, "Close A")));
+  }
+  it('check first focus', function () {
+    (0, _plasmaCyUtils.mount)(_CypressTestDecorator || (_CypressTestDecorator = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.CypressTestDecorator, null, /*#__PURE__*/_react["default"].createElement(ModalsProvider, null, /*#__PURE__*/_react["default"].createElement(Demo, null)))));
+    cy.get('button').contains('Show buttons').type('{enter}');
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('First');
+    });
+  });
+  it('check tab cicle', function () {
+    (0, _plasmaCyUtils.mount)(_CypressTestDecorator2 || (_CypressTestDecorator2 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.CypressTestDecorator, null, /*#__PURE__*/_react["default"].createElement(ModalsProvider, null, /*#__PURE__*/_react["default"].createElement(Demo, null)))));
+    cy.get('button').contains('Show buttons').type('{enter}');
+    cy.focused().tab();
+    cy.focused().tab();
+    cy.focused().tab();
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('First');
+    });
+  });
+  it('check one node', function () {
+    (0, _plasmaCyUtils.mount)(_CypressTestDecorator3 || (_CypressTestDecorator3 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.CypressTestDecorator, null, /*#__PURE__*/_react["default"].createElement(ModalsProvider, null, /*#__PURE__*/_react["default"].createElement(OneNode, null)))));
+    cy.get('button').contains('Show').type('{enter}');
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Trapped button');
+    });
+    cy.focused().tab();
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Trapped button');
+    });
+  });
+  it('check blur and focus', function () {
+    (0, _plasmaCyUtils.mount)(_CypressTestDecorator4 || (_CypressTestDecorator4 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.CypressTestDecorator, null, /*#__PURE__*/_react["default"].createElement(ModalsProvider, null, /*#__PURE__*/_react["default"].createElement(Double, null)))));
+    cy.get('button').contains('Show buttons A').type('{enter}');
+
+    // что выделяется после blur при открытым A
+    cy.focused().blur();
+    cy.get('body').tab();
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Button A');
+    });
+
+    // проверка первых элементов
+    cy.get('button').contains('Show buttons B').type('{enter}');
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Button B');
+    });
+    cy.focused().tab();
+
+    // что выделяется после blur при открытом B
+    cy.focused().blur();
+    cy.get('body').tab();
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Button B');
+    });
+
+    // проверка элемента при закрытии
+    cy.get('button').contains('Close B').type('{enter}');
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Show buttons B');
+    });
+
+    // что выделяется после blur при закрытом B/открытом A
+    cy.focused().blur();
+    cy.get('body').tab();
+    cy.focused().should(function ($p) {
+      expect($p).to.contain('Button A');
+    });
+  });
+});