text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var tslib_1 = require("tslib");
  var accessibility_1 = require("@fluentui/accessibility");
  var react_bindings_1 = require("@fluentui/react-bindings");
  var React = require("react");
  var ReactDOM = require("react-dom");
  var ReactTestUtils = require("react-dom/test-utils");
  describe('FocusZone', function () {
      var lastFocusedElement;
      var host;
      function onFocus(ev) {
          lastFocusedElement = ev.target;
      }
      function setupElement(element, _a) {
          var clientRect = _a.clientRect, _b = _a.isVisible, isVisible = _b === void 0 ? true : _b;
          // @ts-ignore
          element.getBoundingClientRect = function () { return ({
              top: clientRect.top,
              left: clientRect.left,
              bottom: clientRect.bottom,
              right: clientRect.right,
              width: clientRect.right - clientRect.left,
              height: clientRect.bottom - clientRect.top,
          }); };
          element.setAttribute('data-is-visible', String(isVisible));
          element.focus = function () { return ReactTestUtils.Simulate.focus(element); };
      }
      beforeEach(function () {
          lastFocusedElement = undefined;
      });
      afterEach(function () {
          if (host) {
              ReactDOM.unmountComponentAtNode(host);
              host = undefined;
          }
      });
      it('can use arrows vertically', function () {
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, { direction: accessibility_1.FocusZoneDirection.vertical },
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement("button", { id: "b" }, "b"),
                  React.createElement("button", { id: "c" }, "c"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          var buttonC = focusZone.querySelector('#c');
          // Assign bounding locations to buttons.
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 30,
                  left: 0,
                  right: 100,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 30,
                  bottom: 60,
                  left: 0,
                  right: 100,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 60,
                  bottom: 90,
                  left: 0,
                  right: 100,
              },
          });
          // Focus the first button.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing down should go to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonB);
          // Pressing down should go to c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing down should stay on c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing up should go to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonB);
          // Pressing up should go to a.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing up should stay on a.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonA);
          // Click on c to focus it.
          ReactTestUtils.Simulate.focus(buttonC);
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing up should move to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonB);
          // Test that pressing horizontal buttons don't move focus.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(buttonB);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonB);
          // Press home should go to the first target.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.Home });
          expect(lastFocusedElement).toBe(buttonA);
          // Press end should go to the last target.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.End });
          expect(lastFocusedElement).toBe(buttonC);
      });
      it('can ignore arrowing if default is prevented', function () {
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, { direction: accessibility_1.FocusZoneDirection.vertical },
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement("button", { id: "b" }, "b"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          // Assign bounding locations to buttons.
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 30,
                  left: 0,
                  right: 100,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 30,
                  bottom: 60,
                  left: 0,
                  right: 100,
              },
          });
          // Focus the first button.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing down should go to b.
          ReactTestUtils.Simulate.keyDown(focusZone, {
              which: accessibility_1.keyboardKey.ArrowDown,
              isDefaultPrevented: function () { return true; },
          });
          expect(lastFocusedElement).toBe(buttonA);
      });
      it('can use arrows horizontally', function () {
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, { direction: accessibility_1.FocusZoneDirection.horizontal },
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement("button", { id: "b" }, "b"),
                  React.createElement("button", { id: "c" }, "c"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          var buttonC = focusZone.querySelector('#c');
          // Assign bounding locations to buttons.
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 100,
                  left: 0,
                  right: 30,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 100,
                  left: 30,
                  right: 60,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 0,
                  bottom: 100,
                  left: 60,
                  right: 90,
              },
          });
          // Focus the first button.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing right should go to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonB);
          // Pressing right should go to c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing right should stay on c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing left should go to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(buttonB);
          // Pressing left should go to a.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing left should stay on a.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(buttonA);
          // Click on c to focus it.
          ReactTestUtils.Simulate.focus(buttonC);
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing left should move to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(buttonB);
          // Test that pressing vertical buttons don't move focus.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonB);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonB);
          // Press home should go to the first target.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.Home });
          expect(lastFocusedElement).toBe(buttonA);
          // // Press end should go to the last target.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.End });
          expect(lastFocusedElement).toBe(buttonC);
      });
      it('can use arrows bidirectionally', function () {
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement("button", { id: "b" }, "b"),
                  React.createElement("button", { id: "c" }, "c"),
                  React.createElement("button", { id: "hidden" }, "hidden"),
                  React.createElement("button", { id: "d" }, "d"),
                  React.createElement("button", { id: "e" }, "e"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          var buttonC = focusZone.querySelector('#c');
          var hiddenButton = focusZone.querySelector('#hidden');
          var buttonD = focusZone.querySelector('#d');
          var buttonE = focusZone.querySelector('#e');
          // Set up a grid like so:
          // A B
          // C hiddenButton
          // D E
          //
          // We will iterate from A to B, press down to skip hidden and go to C,
          // down again to E, left to D, then back up to A.
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 30,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 20,
                  bottom: 40,
                  left: 0,
                  right: 20,
              },
          });
          // hidden button should be ignored.
          setupElement(hiddenButton, {
              clientRect: {
                  top: 20,
                  bottom: 40,
                  left: 2,
                  right: 40,
              },
              isVisible: false,
          });
          setupElement(buttonD, {
              clientRect: {
                  top: 40,
                  bottom: 60,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(buttonE, {
              clientRect: {
                  top: 40,
                  bottom: 60,
                  left: 20,
                  right: 40,
              },
          });
          // Focus the first button.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing right should go to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonB);
          // Pressing down should go to c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing left should go to d.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonD);
          // Pressing down should go to e.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonE);
          // Pressing up should go to c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing up should go to a.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonA);
      });
      it('can use arrows bidirectionally by following DOM order', function () {
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, { direction: accessibility_1.FocusZoneDirection.bidirectionalDomOrder },
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement("button", { id: "b" }, "b"),
                  React.createElement("button", { id: "c" }, "c"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          var buttonC = focusZone.querySelector('#c');
          // Assign bounding locations to buttons.
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 30,
                  left: 0,
                  right: 100,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 30,
                  bottom: 60,
                  left: 0,
                  right: 100,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 60,
                  bottom: 90,
                  left: 0,
                  right: 100,
              },
          });
          // Pressing down/right arrow keys moves focus to the next focusable item.
          // Pressing up/left arrow keys moves focus to the previous focusable item.
          // Focus the first button.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing down should go to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonB);
          // Pressing right should go to c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing down should stay on c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing up should go to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonB);
          // Pressing left should go to a.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing left should stay on a.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(buttonA);
          // Click on c to focus it.
          ReactTestUtils.Simulate.focus(buttonC);
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing up should move to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonB);
          // Pressing left should move to a.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing right should move to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonB);
          // Press home should go to the first target.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.Home });
          expect(lastFocusedElement).toBe(buttonA);
          // Press end should go to the last target.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.End });
          expect(lastFocusedElement).toBe(buttonC);
      });
      it('can reset alignment on mouse down', function () {
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement("button", { id: "b" }, "b"),
                  React.createElement("button", { id: "c" }, "c"),
                  React.createElement("button", { id: "d" }, "d"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          var buttonC = focusZone.querySelector('#c');
          var buttonD = focusZone.querySelector('#d');
          // Set up a grid like so:
          // A B
          // C D
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 20,
                  bottom: 40,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(buttonD, {
              clientRect: {
                  top: 20,
                  bottom: 40,
                  left: 20,
                  right: 40,
              },
          });
          // Focus the first button.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing up should stay on a.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing left should stay on a.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing right should go to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonB);
          // Pressing down should go to d.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonD);
          // Mousing down on a should reset alignment to a.
          ReactTestUtils.Simulate.mouseDown(focusZone, { target: buttonA });
          // Pressing down should go to c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonC);
      });
      it('correctly skips data-not-focusable elements', function () {
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement("button", { id: "b", "data-not-focusable": false }, "b"),
                  React.createElement("button", { id: "c" }, "c"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          var buttonC = focusZone.querySelector('#c');
          // Set up a grid like so:
          // A B
          // C hiddenButton
          // D E
          //
          // We will iterate from A to B, press down to skip hidden and go to C,
          // down again to E, left to D, then back up to A.
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 20,
                  bottom: 40,
                  left: 0,
                  right: 20,
              },
          });
          // Focus the first button.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing right should go to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing down should go to c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonA);
      });
      it('skips subzone elements until manually entered', function () {
          var _a;
          var shouldEnterInnerZone = function (e) { return accessibility_1.getCode(e) === accessibility_1.keyboardKey.Enter; };
          var isFocusableProperty = (_a = {}, _a[accessibility_1.IS_FOCUSABLE_ATTRIBUTE] = true, _a);
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, { direction: accessibility_1.FocusZoneDirection.horizontal, shouldEnterInnerZone: shouldEnterInnerZone },
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement("div", tslib_1.__assign({ id: "b", "data-is-sub-focuszone": true }, isFocusableProperty),
                      React.createElement("button", { id: "bsub" }, "bsub")),
                  React.createElement("button", { id: "c" }, "c"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var divB = focusZone.querySelector('#b');
          var buttonC = focusZone.querySelector('#c');
          var buttonB = focusZone.querySelector('#bsub');
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(divB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 5,
                  bottom: 15,
                  left: 25,
                  right: 35,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 40,
                  right: 60,
              },
          });
          // Focus the first button.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(divB);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonC);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(divB);
          ReactTestUtils.Simulate.keyDown(divB, { which: accessibility_1.keyboardKey.Enter });
          expect(lastFocusedElement).toBe(buttonB);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonC);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(divB);
      });
      it('skips child focusZone elements until manually entered', function () {
          var _a;
          var shouldEnterInnerZone = function (e) { return accessibility_1.getCode(e) === accessibility_1.keyboardKey.Enter; };
          var isFocusableProperty = (_a = {}, _a[accessibility_1.IS_FOCUSABLE_ATTRIBUTE] = true, _a);
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, { direction: accessibility_1.FocusZoneDirection.horizontal, shouldEnterInnerZone: shouldEnterInnerZone },
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement(react_bindings_1.FocusZone, tslib_1.__assign({ direction: accessibility_1.FocusZoneDirection.horizontal, id: "b" }, isFocusableProperty),
                      React.createElement("button", { id: "bsub" }, "bsub")),
                  React.createElement("button", { id: "c" }, "c"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var divB = focusZone.querySelector('#b');
          var buttonC = focusZone.querySelector('#c');
          var buttonB = focusZone.querySelector('#bsub');
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(divB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 5,
                  bottom: 15,
                  left: 25,
                  right: 35,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 40,
                  right: 60,
              },
          });
          // Focus the first button.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(divB);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonC);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(divB);
          ReactTestUtils.Simulate.keyDown(divB, { which: accessibility_1.keyboardKey.Enter });
          expect(lastFocusedElement).toBe(buttonB);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonC);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(divB);
      });
      it('Focus first tabbable element, when active element is dynamically disabled', function () {
          var focusZone = null;
          var buttonA;
          var buttonB;
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement("textarea", { id: "t" }),
              React.createElement(react_bindings_1.FocusZone, { ref: function (focus) {
                      focusZone = focus;
                  } },
                  React.createElement("button", { id: "a", ref: function (button) {
                          buttonA = button;
                      } }, "a"),
                  React.createElement("button", { id: "b", ref: function (button) {
                          buttonB = button;
                      } }, "b"))));
          var rootNode = ReactDOM.findDOMNode(component);
          var textArea = rootNode.children[0];
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          // ButtonA should be focussed.
          focusZone.focus();
          expect(lastFocusedElement).toBe(buttonA);
          buttonA.disabled = true;
          // Focus the text area, outside focus zone.
          ReactTestUtils.Simulate.focus(textArea);
          expect(lastFocusedElement).toBe(textArea);
          // ButtonB should be focussed.
          focusZone.focus();
          expect(lastFocusedElement).toBe(buttonB);
      });
      it('removes tab-index of previous element when another one is selected (mouse & keyboard)', function () {
          var focusZone = null;
          var buttonA = null;
          var buttonB = null;
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, { ref: function (focus) {
                      focusZone = focus;
                  } },
                  React.createElement("button", { id: "a", ref: function (button) {
                          buttonA = button;
                      } }, "a"),
                  React.createElement("button", { id: "b", ref: function (button) {
                          buttonB = button;
                      } }, "b"))));
          var focusZoneElement = ReactDOM.findDOMNode(component).firstChild;
          var buttonAElement = focusZoneElement.querySelector('#a');
          // HACK declare that elements are not null at this point.
          // Type narrowing doesn't work because TypeScript is not considering the assignments inside `ref` lambdas.
          focusZone = focusZone;
          buttonA = buttonA;
          buttonB = buttonB;
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          // ButtonA should be focussed.
          focusZone.focus();
          expect(lastFocusedElement).toBe(buttonA);
          expect(buttonA.tabIndex).toBe(0);
          expect(buttonB.tabIndex).toBe(-1);
          // Pressing right should go to b.
          ReactTestUtils.Simulate.keyDown(focusZoneElement, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(buttonB);
          expect(buttonA.tabIndex).toBe(-1);
          expect(buttonB.tabIndex).toBe(0);
          // Clicking on A should enable its tab-index and disable others.
          // But it doesn't set focus (browser will do it in the default event handler)
          ReactTestUtils.Simulate.mouseDown(buttonAElement);
          expect(lastFocusedElement).toBe(buttonB);
          expect(buttonA.tabIndex).toBe(0);
          expect(buttonB.tabIndex).toBe(-1);
      });
      it('Changes our focus to the next button when we hit tab when focus zone allow tabbing', function () {
          var tabDownListener = jest.fn();
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus, onKeyDown: tabDownListener }),
              React.createElement(react_bindings_1.FocusZone, tslib_1.__assign({}, { handleTabKey: accessibility_1.FocusZoneTabbableElements.all, isCircularNavigation: true }),
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement("button", { id: "b" }, "b"),
                  React.createElement("button", { id: "c" }, "c"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          var buttonC = focusZone.querySelector('#c');
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 40,
                  right: 60,
              },
          });
          // ButtonA should be focussed.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          expect(buttonA.tabIndex).toBe(0);
          expect(buttonB.tabIndex).toBe(-1);
          expect(buttonC.tabIndex).toBe(-1);
          // Pressing tab will shift focus to button B
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.Tab });
          expect(lastFocusedElement).toBe(buttonB);
          expect(buttonA.tabIndex).toBe(-1);
          expect(buttonB.tabIndex).toBe(0);
          expect(buttonC.tabIndex).toBe(-1);
          // Pressing tab will shift focus to button C
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.Tab });
          expect(lastFocusedElement).toBe(buttonC);
          expect(buttonA.tabIndex).toBe(-1);
          expect(buttonB.tabIndex).toBe(-1);
          expect(buttonC.tabIndex).toBe(0);
          // Pressing tab on our final element will shift focus back to our first element A
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.Tab });
          expect(lastFocusedElement).toBe(buttonA);
          expect(buttonA.tabIndex).toBe(0);
          expect(buttonB.tabIndex).toBe(-1);
          expect(buttonC.tabIndex).toBe(-1);
          // FocusZone stops propagation of our tab when we enable tab handling
          expect(tabDownListener.mock.calls.length).toBe(0);
      });
      it('detects tab when our focus zone does not allow tabbing', function () {
          var tabDownListener = jest.fn();
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus, onKeyDown: tabDownListener }),
              React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement("button", { id: "a" }, "a"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 20,
              },
          });
          // ButtonA should be focussed.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          expect(buttonA.tabIndex).toBe(0);
          // Pressing tab when our focus zone doesn't allow tabbing will allow us to propagate our tab to our key down event handler
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.Tab });
          expect(tabDownListener.mock.calls.length).toBe(1);
          var onKeyDownEvent = tabDownListener.mock.calls[0][0];
          expect(accessibility_1.getCode(onKeyDownEvent)).toBe(accessibility_1.keyboardKey.Tab);
      });
      it('should stay in input box with arrow keys and exit with tab', function () {
          var tabDownListener = jest.fn();
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus, onKeyDown: tabDownListener }),
              React.createElement(react_bindings_1.FocusZone, tslib_1.__assign({}, { handleTabKey: accessibility_1.FocusZoneTabbableElements.inputOnly, isCircularNavigation: false }),
                  React.createElement("input", { type: "text", id: "a" }),
                  React.createElement("button", { id: "b" }, "b"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var inputA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          setupElement(inputA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          // InputA should be focused.
          inputA.focus();
          expect(lastFocusedElement).toBe(inputA);
          // When we hit right/left on the arrow key, we don't want to be able to leave focus on an input
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          expect(lastFocusedElement).toBe(inputA);
          expect(inputA.tabIndex).toBe(0);
          expect(buttonB.tabIndex).toBe(-1);
          // Pressing tab will be the only way for us to exit the focus zone
          ReactTestUtils.Simulate.keyDown(inputA, { which: accessibility_1.keyboardKey.Tab });
          expect(lastFocusedElement).toBe(buttonB);
          expect(inputA.tabIndex).toBe(-1);
          expect(buttonB.tabIndex).toBe(0);
      });
      it('focus should leave input box when arrow keys are pressed when tabbing is supported but shouldInputLoseFocusOnArrowKey callback method return true', function () {
          var tabDownListener = jest.fn();
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus, onKeyDown: tabDownListener }),
              React.createElement(react_bindings_1.FocusZone, tslib_1.__assign({}, {
                  handleTabKey: accessibility_1.FocusZoneTabbableElements.all,
                  isCircularNavigation: false,
                  shouldInputLoseFocusOnArrowKey: function () {
                      return true;
                  },
              }),
                  React.createElement("input", { type: "text", id: "a" }),
                  React.createElement("button", { id: "b" }, "b"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var inputA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          setupElement(inputA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          // InputA should be focused.
          inputA.focus();
          expect(lastFocusedElement).toBe(inputA);
          // Pressing arrow down, input should loose the focus and the button should get the focus
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonB);
          expect(inputA.tabIndex).toBe(-1);
          expect(buttonB.tabIndex).toBe(0);
      });
      it('should force focus to first focusable element when FocusZone container receives focus and shouldFocusInnerElementWhenReceivedFocus is set to "true"', function () {
          var _a;
          var shouldEnterInnerZone = function (e) { return accessibility_1.getCode(e) === accessibility_1.keyboardKey.Enter; };
          var isFocusableProperty = (_a = {}, _a[accessibility_1.IS_FOCUSABLE_ATTRIBUTE] = true, _a);
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, { direction: accessibility_1.FocusZoneDirection.horizontal, shouldEnterInnerZone: shouldEnterInnerZone },
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement(react_bindings_1.FocusZone, tslib_1.__assign({ direction: accessibility_1.FocusZoneDirection.horizontal, id: "b", shouldFocusInnerElementWhenReceivedFocus: true }, isFocusableProperty),
                      React.createElement("button", { id: "bsub" }, "bsub")))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var divB = focusZone.querySelector('#b');
          var buttonB = focusZone.querySelector('#bsub');
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(divB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 5,
                  bottom: 15,
                  left: 25,
                  right: 35,
              },
          });
          // Focus the first button.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowRight });
          // Focus goes to FocusZone container, which forces focus to first focusable element - buttonB
          expect(lastFocusedElement).toBe(buttonB);
      });
      it('can use arrows bidirectionally in RTL', function () {
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, { isRtl: true },
                  React.createElement("button", { className: "a" }, "a"),
                  React.createElement("button", { className: "b" }, "b"),
                  React.createElement("button", { className: "c" }, "c"),
                  React.createElement("button", { className: "hidden" }, "hidden"),
                  React.createElement("button", { className: "d" }, "d"),
                  React.createElement("button", { className: "e" }, "e"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('.a');
          var buttonB = focusZone.querySelector('.b');
          var buttonC = focusZone.querySelector('.c');
          var hiddenButton = focusZone.querySelector('.hidden');
          var buttonD = focusZone.querySelector('.d');
          var buttonE = focusZone.querySelector('.e');
          // Set up a grid like so:
          // B A
          // hiddenButton C
          // E D
          //
          // We will iterate from A to B, press down to skip hidden and go to C,
          // down again to E, right to D, up to C, then back up to A.
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 30,
                  right: 0,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 60,
                  right: 30,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 20,
                  bottom: 40,
                  left: 20,
                  right: 0,
              },
          });
          // hidden button should be ignored.
          setupElement(hiddenButton, {
              clientRect: {
                  top: 20,
                  bottom: 40,
                  left: 30,
                  right: 20,
              },
              isVisible: false,
          });
          setupElement(buttonD, {
              clientRect: {
                  top: 40,
                  bottom: 60,
                  left: 25,
                  right: 0,
              },
          });
          setupElement(buttonE, {
              clientRect: {
                  top: 40,
                  bottom: 60,
                  left: 40,
                  right: 25,
              },
          });
          // Focus the first button.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          // Pressing left should go to b.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(buttonB);
          // Pressing down should go to c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing right should go to d.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowDown });
          expect(lastFocusedElement).toBe(buttonD);
          // Pressing down should go to e.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowLeft });
          expect(lastFocusedElement).toBe(buttonE);
          // Pressing up should go to c.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonC);
          // Pressing up should go to a.
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.ArrowUp });
          expect(lastFocusedElement).toBe(buttonA);
      });
      it('updates tabindexes when element is focused programaticaly', function () {
          var tabDownListener = jest.fn();
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus, onKeyDown: tabDownListener }),
              React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement("button", { id: "a" }, "a"),
                  React.createElement("button", { id: "b" }, "b"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          expect(buttonA.tabIndex).toBe(0);
          expect(buttonB.tabIndex).toBe(-1);
          // ButtonA should be focussed.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          expect(buttonA.tabIndex).toBe(0);
          expect(buttonB.tabIndex).toBe(-1);
          // ButtonB should be focussed and tabindex=0
          ReactTestUtils.Simulate.focus(buttonB);
          expect(lastFocusedElement).toBe(buttonB);
          expect(buttonB.tabIndex).toBe(0);
          expect(buttonA.tabIndex).toBe(-1);
      });
      it('remains focus in element with "contenteditable=true" attribute on Home/End keys', function () {
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement("div", { contentEditable: true, id: "a" }),
                  React.createElement("button", { id: "b" }, "b"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var contentEditableA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          setupElement(contentEditableA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          // contentEditableA should be focused.
          contentEditableA.focus();
          expect(lastFocusedElement).toBe(contentEditableA);
          ReactTestUtils.Simulate.keyDown(contentEditableA, { which: accessibility_1.keyboardKey.Home });
          expect(lastFocusedElement).toBe(contentEditableA);
          ReactTestUtils.Simulate.keyDown(contentEditableA, { which: accessibility_1.keyboardKey.End });
          expect(lastFocusedElement).toBe(contentEditableA);
          // change focus to buttonB
          buttonB.focus();
          expect(lastFocusedElement).toBe(buttonB);
      });
      it('should call onKeyDown handler even within another FocusZone', function () {
          var keyDownHandler = jest.fn();
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement(react_bindings_1.FocusZone, { className: "innerFocusZone", onKeyDown: keyDownHandler, "data-is-focusable": true }, "Inner Focus Zone"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var innerFocusZone = focusZone.querySelector('.innerFocusZone');
          ReactTestUtils.Simulate.keyDown(innerFocusZone, { which: accessibility_1.keyboardKey.Enter });
          expect(keyDownHandler).toBeCalled();
      });
      it('can call onActiveItemChanged when the active item is changed', function () {
          var called = false;
          var component = ReactTestUtils.renderIntoDocument(React.createElement(react_bindings_1.FocusZone, { onActiveElementChanged: function () { return (called = true); } },
              React.createElement("button", { key: "a", id: "a", "data-is-visible": "true" }, "button a"),
              React.createElement("button", { key: "b", id: "b", "data-is-visible": "true" }, "button b")));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('#a');
          var buttonB = focusZone.querySelector('#b');
          ReactTestUtils.Simulate.mouseDown(focusZone, { target: buttonA });
          ReactTestUtils.Simulate.focus(focusZone, { target: buttonA });
          expect(called).toEqual(true);
          called = false;
          ReactTestUtils.Simulate.mouseDown(focusZone, { target: buttonB });
          ReactTestUtils.Simulate.focus(focusZone, { target: buttonB });
          expect(called).toEqual(true);
          called = false;
      });
      it('only adds outerzones to be updated for tab changes', function () {
          var _a, _b, _c;
          var activeZones = ((_a = react_bindings_1.FocusZone.outerZones.getOutZone(window)) === null || _a === void 0 ? void 0 : _a.size) || 0;
          host = document.createElement('div');
          // Render component without button A.
          ReactDOM.render(React.createElement(react_bindings_1.FocusZone, null,
              React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement("button", null, "ok"))), host);
          expect((_b = react_bindings_1.FocusZone.outerZones.getOutZone(window)) === null || _b === void 0 ? void 0 : _b.size).toEqual(activeZones + 1);
          ReactDOM.unmountComponentAtNode(host);
          expect((_c = react_bindings_1.FocusZone.outerZones.getOutZone(window)) === null || _c === void 0 ? void 0 : _c.size).toEqual(activeZones);
      });
      describe('restores focus', function () {
          it('to the following item when item removed', function () {
              host = document.createElement('div');
              ReactDOM.render(React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement("button", { key: "a", id: "a", "data-is-visible": "true" }, "button a"),
                  React.createElement("button", { key: "b", id: "b", "data-is-visible": "true" }, "button b"),
                  React.createElement("button", { key: "c", id: "c", "data-is-visible": "true" }, "button c")), host);
              var buttonB = host.querySelector('#b');
              buttonB.focus();
              // Render component without button B.
              ReactDOM.render(React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement("button", { key: "a", id: "a", "data-is-visible": "true" }, "button a"),
                  React.createElement("button", { key: "c", id: "c", "data-is-visible": "true" }, "button c")), host);
              expect(document.activeElement).toBe(host.querySelector('#c'));
          });
          it('can restore focus to the previous item when end item removed', function () {
              host = document.createElement('div');
              ReactDOM.render(React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement("button", { key: "a", id: "a", "data-is-visible": "true" }, "button a"),
                  React.createElement("button", { key: "b", id: "b", "data-is-visible": "true" }, "button b"),
                  React.createElement("button", { key: "c", id: "c", "data-is-visible": "true" }, "button c")), host);
              var buttonC = host.querySelector('#c');
              buttonC.focus();
              // Render component without button C.
              ReactDOM.render(React.createElement(react_bindings_1.FocusZone, null,
                  React.createElement("button", { key: "a", id: "a", "data-is-visible": "true" }, "button a"),
                  React.createElement("button", { key: "b", id: "b", "data-is-visible": "true" }, "button b")), host);
              expect(document.activeElement).toBe(host.querySelector('#b'));
          });
      });
      describe('parking and unparking', function () {
          var buttonA;
          beforeEach(function () {
              host = document.createElement('div');
              ReactDOM.render(React.createElement("div", null,
                  React.createElement("button", { key: "z", id: "z", "data-is-visible": "true" }),
                  React.createElement(react_bindings_1.FocusZone, { id: "fz" },
                      React.createElement("button", { key: "a", id: "a", "data-is-visible": "true" }, "button a"))), host);
              buttonA = host.querySelector('#a');
              buttonA.focus();
              // Render component without button A.
              ReactDOM.render(React.createElement("div", null,
                  React.createElement("button", { key: "z", id: "z", "data-is-visible": "true" }),
                  React.createElement(react_bindings_1.FocusZone, { id: "fz" })), host);
          });
          it('can move focus to container when last item removed', function () {
              expect(document.activeElement).toBe(host.querySelector('#fz'));
          });
          it('can move focus from container to first item when added', function () {
              ReactDOM.render(React.createElement("div", null,
                  React.createElement("button", { key: "z", id: "z" }),
                  React.createElement(react_bindings_1.FocusZone, { id: "fz" },
                      React.createElement("button", { key: "a", id: "a", "data-is-visible": "true" }, "button a"))), host);
              expect(document.activeElement).toBe(host.querySelector('#a'));
          });
          it('removes focusability when moving from focused container', function () {
              expect(host.querySelector('#fz').getAttribute('tabindex')).toEqual('-1');
              host.querySelector('#z').focus();
              expect(host.querySelector('#fz').getAttribute('tabindex')).toBeNull();
          });
          it('does not move focus when items added without container focus', function () {
              expect(host.querySelector('#fz').getAttribute('tabindex')).toEqual('-1');
              host.querySelector('#z').focus();
              ReactDOM.render(React.createElement("div", null,
                  React.createElement("button", { key: "z", id: "z" }),
                  React.createElement(react_bindings_1.FocusZone, { id: "fz" },
                      React.createElement("button", { key: "a", id: "a", "data-is-visible": "true" }, "button a"))), host);
              expect(document.activeElement).toBe(host.querySelector('#z'));
          });
      });
      it('Handles focus moving to different targets in focus zone following DOM order and allowing tabbing', function () {
          var tabDownListener = jest.fn();
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus, onKeyDown: tabDownListener }),
              React.createElement(react_bindings_1.FocusZone, { direction: accessibility_1.FocusZoneDirection.bidirectionalDomOrder, handleTabKey: accessibility_1.FocusZoneTabbableElements.all },
                  React.createElement("button", { className: "a" }, "a"),
                  React.createElement("button", { className: "b" }, "b"),
                  React.createElement("button", { className: "c" }, "c"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('.a');
          var buttonB = focusZone.querySelector('.b');
          var buttonC = focusZone.querySelector('.c');
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 40,
                  right: 60,
              },
          });
          // ButtonA should be focussed.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          expect(buttonA.tabIndex).toBe(0);
          expect(buttonB.tabIndex).toBe(-1);
          expect(buttonC.tabIndex).toBe(-1);
          // Pressing tab will shift focus to button B
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.Tab });
          expect(lastFocusedElement).toBe(buttonB);
          expect(buttonA.tabIndex).toBe(-1);
          expect(buttonB.tabIndex).toBe(0);
          expect(buttonC.tabIndex).toBe(-1);
          // Pressing tab will shift focus to button C
          ReactTestUtils.Simulate.keyDown(focusZone, { which: accessibility_1.keyboardKey.Tab });
          expect(lastFocusedElement).toBe(buttonC);
          expect(buttonA.tabIndex).toBe(-1);
          expect(buttonB.tabIndex).toBe(-1);
          expect(buttonC.tabIndex).toBe(0);
          // FocusZone stops propagation of our tab when we enable tab handling
          expect(tabDownListener.mock.calls.length).toBe(0);
      });
      it('Focuses the last element in the FocusZone when the imperative focusLast method is used', function () {
          var focusZoneRef = React.createRef();
          var component = ReactTestUtils.renderIntoDocument(React.createElement("div", tslib_1.__assign({}, { onFocusCapture: onFocus }),
              React.createElement(react_bindings_1.FocusZone, { ref: focusZoneRef, direction: accessibility_1.FocusZoneDirection.bidirectionalDomOrder, handleTabKey: accessibility_1.FocusZoneTabbableElements.all },
                  React.createElement("button", { className: "a" }, "a"),
                  React.createElement("button", { className: "b" }, "b"),
                  React.createElement("button", { className: "c" }, "c"))));
          var focusZone = ReactDOM.findDOMNode(component).firstChild;
          var buttonA = focusZone.querySelector('.a');
          var buttonB = focusZone.querySelector('.b');
          var buttonC = focusZone.querySelector('.c');
          setupElement(buttonA, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 0,
                  right: 20,
              },
          });
          setupElement(buttonB, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 20,
                  right: 40,
              },
          });
          setupElement(buttonC, {
              clientRect: {
                  top: 0,
                  bottom: 20,
                  left: 40,
                  right: 60,
              },
          });
          // ButtonA should be focussed.
          ReactTestUtils.Simulate.focus(buttonA);
          expect(lastFocusedElement).toBe(buttonA);
          expect(buttonA.tabIndex).toBe(0);
          expect(buttonB.tabIndex).toBe(-1);
          expect(buttonC.tabIndex).toBe(-1);
          // ButtonC should be focused
          expect(focusZoneRef).not.toBeUndefined();
          focusZoneRef.current.focusLast();
          expect(buttonA.tabIndex).toBe(-1);
          expect(buttonB.tabIndex).toBe(-1);
          expect(buttonC.tabIndex).toBe(0);
      });
  });
  