How to use the @zendeskgarden/container-utilities.KEY_CODES.UP 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-containers / packages / selection / src / SelectionContainer.spec.tsx View on Github external
it('decrements focusedIndex in RTL mode', () => {
            const { getAllByTestId } = render();
            const [item, secondItem] = getAllByTestId('item');

            fireEvent.click(secondItem);
            fireEvent.keyDown(secondItem, { keyCode: KEY_CODES.UP });

            expect(item).toHaveAttribute('data-focused', 'true');
          });
github zendeskgarden / react-components / packages / datepickers / src / Datepicker / Datepicker.spec.tsx View on Github external
it('opens datepicker when correct keys are used', () => {
      const { getByTestId, queryByTestId } = render(
        
      );
      const input = getByTestId('input');

      fireEvent.keyDown(input, { keyCode: KEY_CODES.UP });
      expect(queryByTestId('datepicker-menu')).not.toBeNull();
      fireEvent.blur(input);

      fireEvent.keyDown(input, { keyCode: KEY_CODES.DOWN });
      expect(queryByTestId('datepicker-menu')).not.toBeNull();
      fireEvent.blur(input);

      fireEvent.keyDown(input, { keyCode: KEY_CODES.SPACE });
      expect(queryByTestId('datepicker-menu')).not.toBeNull();
      fireEvent.blur(input);
    });
github zendeskgarden / react-containers / packages / selection / src / SelectionContainer.spec.tsx View on Github external
it('does not perform any action', () => {
            const { getAllByTestId } = render();
            const [item, secondItem, lastItem] = getAllByTestId('item');

            fireEvent.click(item);
            fireEvent.keyDown(item, { keyCode: KEY_CODES.UP });

            expect(item).toHaveAttribute('data-focused', 'false');
            expect(secondItem).toHaveAttribute('data-focused', 'false');
            expect(lastItem).toHaveAttribute('data-focused', 'false');
          });
        });
github zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.spec.js View on Github external
it('increments minValue on UP key', () => {
        const { getAllByTestId } = render(
          
        );

        fireEvent.keyDown(getAllByTestId('thumb')[0], { keyCode: KEY_CODES.UP });
        expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 20, maxValue: 75 });
      });
github zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.spec.js View on Github external
it('increments maxValue on UP key', () => {
        const { getAllByTestId } = render(
          
        );
        const maxThumb = getAllByTestId('thumb')[1];

        fireEvent.keyDown(maxThumb, { keyCode: KEY_CODES.UP });
        expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 15, maxValue: 80 });
      });
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-containers / packages / selection / src / useSelection.ts View on Github external
onKeyDown: composeEventHandlers(onKeyDown, (e: React.KeyboardEvent) => {
        if (
          (e.keyCode === KEY_CODES.UP && verticalDirection) ||
          (e.keyCode === KEY_CODES.LEFT && horizontalDirection)
        ) {
          if (rtl && !verticalDirection) {
            dispatch({ type: 'INCREMENT', items, focusedItem, selectedItem, onFocus });
          } else {
            dispatch({ type: 'DECREMENT', items, focusedItem, selectedItem, onFocus });
          }

          e.preventDefault();
        } else if (
          (e.keyCode === KEY_CODES.DOWN && verticalDirection) ||
          (e.keyCode === KEY_CODES.RIGHT && horizontalDirection)
        ) {
          if (rtl && !verticalDirection) {
            dispatch({ type: 'DECREMENT', items, focusedItem, selectedItem, onFocus });
          } else {
github zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.js View on Github external
case KEY_CODES.DOWN:
        decrementThumb();
        keyIntercepted = true;
        break;

      case KEY_CODES.RIGHT:
        if (rtl) {
          decrementThumb();
        } else {
          incrementThumb();
        }

        keyIntercepted = true;
        break;

      case KEY_CODES.UP:
        incrementThumb();
        keyIntercepted = true;
        break;

      case KEY_CODES.HOME:
        if (isMinThumb) {
          updateMinThumbSlider(min);
        } else {
          updateMaxThumbSlider(min);
        }

        keyIntercepted = true;
        break;

      case KEY_CODES.END:
        if (isMinThumb) {