How to use the @zendeskgarden/container-utilities.KEY_CODES.ENTER function in @zendeskgarden/container-utilities

To help you get started, we’ve selected a few @zendeskgarden/container-utilities examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github zendeskgarden / react-components / packages / datepickers / src / elements / DatepickerRange / components / End.spec.tsx View on Github external
it('calls onChange with provided date if ENTER key is used', () => {
      const { getByTestId } = render(
        
      );
      const endInput = getByTestId('end');

      fireEvent.change(endInput, { target: { value: 'January 4th, 2019' } });
      fireEvent.keyDown(endInput, { keyCode: KEY_CODES.ENTER });

      expect(onChangeSpy).toHaveBeenCalledWith({
        startValue: DEFAULT_START_VALUE,
        endValue: new Date(2019, 0, 4)
      });
    });
github zendeskgarden / react-components / packages / datepickers / src / elements / DatepickerRange / components / Start.spec.tsx View on Github external
it('calls onChange with provided date if ENTER key is used', () => {
      const { getByTestId } = render(
        
      );
      const startInput = getByTestId('start');

      fireEvent.change(startInput, { target: { value: 'January 4th, 2019' } });
      fireEvent.keyDown(startInput, { keyCode: KEY_CODES.ENTER });

      expect(onChangeSpy).toHaveBeenCalledWith({
        startValue: new Date(2019, 0, 4),
        endValue: DEFAULT_END_VALUE
      });
    });
github zendeskgarden / react-components / packages / datepickers / src / Datepicker / Datepicker.spec.tsx View on Github external
it('closes datepicker when correct keys are used', () => {
      const { getByTestId, queryByTestId } = render(
        
      );
      const input = getByTestId('input');

      fireEvent.mouseDown(getByTestId('input'));
      fireEvent.click(input);
      fireEvent.keyDown(input, { keyCode: KEY_CODES.ESCAPE });

      expect(queryByTestId('datepicker-menu')).toBeNull();

      fireEvent.mouseDown(getByTestId('input'));
      fireEvent.click(input);
      fireEvent.keyDown(input, { keyCode: KEY_CODES.ENTER });
      expect(queryByTestId('datepicker-menu')).toBeNull();
    });
github zendeskgarden / react-containers / packages / accordion / src / AccordionContainer.spec.tsx View on Github external
it('toggles on ENTER', () => {
        const { getAllByTestId } = render();
        const firstTrigger = getAllByTestId('trigger')[0];

        fireEvent.keyDown(firstTrigger, { keyCode: KEY_CODES.ENTER });

        expect(firstTrigger).toHaveAttribute('aria-expanded', 'true');
      });
github zendeskgarden / react-containers / packages / accordion / src / AccordionContainer.spec.tsx View on Github external
it('shows on ENTER', () => {
        const { getAllByTestId } = render();
        const firstTrigger = getAllByTestId('trigger')[0];
        const firstPanel = getAllByTestId('panel')[0];

        fireEvent.keyDown(firstTrigger, { keyCode: KEY_CODES.ENTER });

        expect(firstPanel).toHaveAttribute('aria-hidden', 'false');
      });
github zendeskgarden / react-containers / packages / modal / src / ModalContainer.spec.tsx View on Github external
it('does not close modal when other keys are pressed', () => {
        const { getByTestId } = render();

        fireEvent.keyDown(getByTestId('modal'), { keyCode: KEY_CODES.ENTER });
        expect(onCloseSpy).not.toHaveBeenCalled();
      });
    });
github zendeskgarden / react-components / packages / pagination / src / elements / Pagination.spec.js View on Github external
it('focuses first page when visibility is lost', () => {
      const { container } = render();
      const paginationWrapper = container.firstChild;

      const previousPage = container.firstChild.children[0];

      fireEvent.focus(previousPage);
      fireEvent.keyDown(previousPage, { keyCode: KEY_CODES.ENTER });

      expect(container.firstChild.children[1]).toHaveClass('is-focused');
      expect(container.firstChild.children[2]).toHaveClass('is-current');
    });
  });
github zendeskgarden / react-containers / packages / selection / src / SelectionContainer.spec.tsx View on Github external
it('selects currently focused item', () => {
          const { getAllByTestId } = render();
          const [item] = getAllByTestId('item');

          fireEvent.focus(item);
          fireEvent.keyDown(item, { keyCode: KEY_CODES.ENTER });
          expect(item).toHaveAttribute('data-selected', 'true');
        });
      });
github zendeskgarden / react-components / packages / datepickers / src / Datepicker / Datepicker.tsx View on Github external
onKeyDown: e => {
                switch (e.keyCode) {
                  case KEY_CODES.ESCAPE:
                  case KEY_CODES.ENTER:
                    dispatch({ type: 'CLOSE' });
                    break;
                  case KEY_CODES.UP:
                  case KEY_CODES.DOWN:
                  case KEY_CODES.SPACE:
                    dispatch({ type: 'OPEN' });
                    break;
                }
              },
              autoComplete: 'off',
github zendeskgarden / react-components / packages / datepickers / src / elements / DatepickerRange / components / End.tsx View on Github external
(e: React.KeyboardEvent) => {
      if (e.keyCode === KEY_CODES.ENTER) {
        dispatch({ type: 'END_BLUR' });
        e.preventDefault();
      }

      (props.children as any).props.onKeyDown && (props.children as any).props.onKeyDown(e);
    },
    [dispatch, props.children]