How to use the @zendeskgarden/container-utilities.KEY_CODES.END 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 / focusjail / src / FocusJailContainer.spec.tsx View on Github external
it('performs no action if non-tab key is pressed', () => {
        const { getByTestId } = render();

        fireEvent.keyDown(getByTestId('container'), { keyCode: KEY_CODES.END });

        // Container is still focused during initial mount
        expect(focusSpy).toHaveBeenCalledTimes(2);
      });
github zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.spec.js View on Github external
it('sets maxValue to max on END key', () => {
        const { getAllByTestId } = render(
          
        );
        const maxThumb = getAllByTestId('thumb')[1];

        fireEvent.keyDown(maxThumb, { keyCode: KEY_CODES.END });
        expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 15, maxValue: 100 });
      });
    });
github zendeskgarden / react-containers / packages / selection / src / SelectionContainer.spec.tsx View on Github external
it('focuses last available item', () => {
          const { getAllByTestId } = render();
          const [item, , lastItem] = getAllByTestId('item');

          fireEvent.focus(item);
          fireEvent.keyDown(item, { keyCode: KEY_CODES.END });
          expect(lastItem).toHaveAttribute('data-focused', 'true');
        });
      });
github zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.spec.js View on Github external
it('sets minValue to maxValue on END key', () => {
        const { getAllByTestId } = render(
          
        );

        fireEvent.keyDown(getAllByTestId('thumb')[0], { keyCode: KEY_CODES.END });
        expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 75, maxValue: 75 });
      });
    });
github zendeskgarden / react-containers / packages / selection / src / useSelection.ts View on Github external
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 {
            dispatch({ type: 'INCREMENT', items, focusedItem, selectedItem, onFocus });
          }

          e.preventDefault();
        } else if (e.keyCode === KEY_CODES.HOME) {
          dispatch({ type: 'HOME', items, onFocus });
          e.preventDefault();
        } else if (e.keyCode === KEY_CODES.END) {
          dispatch({ type: 'END', items, onFocus });
          e.preventDefault();
        } else if (e.keyCode === KEY_CODES.SPACE || e.keyCode === KEY_CODES.ENTER) {
          dispatch({
            type: 'KEYBOARD_SELECT',
            payload: item,
            onSelect
          });
          e.preventDefault();
        }
      }),
      ...other
github zendeskgarden / react-components / packages / dropdowns / src / Multiselect / Multiselect.tsx View on Github external
onKeyDown: (e: KeyboardEvent) => {
              if (e.keyCode === KEY_CODES.DELETE || e.keyCode === KEY_CODES.BACKSPACE) {
                e.preventDefault();
                removeValue();
              }

              if (e.keyCode === KEY_CODES.END && !inputValue) {
                inputRef.current && inputRef.current.focus();
                e.preventDefault();
              }

              if (isRtl(props)) {
                if (e.keyCode === KEY_CODES.RIGHT && index === 0) {
                  e.preventDefault();
                }

                if (e.keyCode === KEY_CODES.LEFT && index === selectedItems.length - 1) {
                  e.preventDefault();
                  inputRef.current && inputRef.current.focus();
                }
              } else {
                if (e.keyCode === KEY_CODES.LEFT && index === 0) {
                  e.preventDefault();
github zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.js View on Github external
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) {
          updateMinThumbSlider(max);
        } else {
          updateMaxThumbSlider(max);
        }

        keyIntercepted = true;
        break;

      default:
        break;
    }

    if (keyIntercepted) {
      e.preventDefault();
      e.stopPropagation();