How to use the @zendeskgarden/container-utilities.KEY_CODES.RIGHT 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 / dropdowns / src / Dropdown / Dropdown.tsx View on Github external
onKeyDown: composeEventHandlers(onKeyDown, (e: KeyboardEvent) => {
        const PREVIOUS_KEY = rtl ? KEY_CODES.RIGHT : KEY_CODES.LEFT;
        const NEXT_KEY = rtl ? KEY_CODES.LEFT : KEY_CODES.RIGHT;

        if (downshift.isOpen) {
          // Select previous item if available
          if (
            e.keyCode === PREVIOUS_KEY &&
            previousIndexRef.current !== null &&
            previousIndexRef.current !== undefined &&
            !downshift.inputValue
          ) {
            e.preventDefault();
            e.stopPropagation();

            downshift.selectItemAtIndex(previousIndexRef.current);
          }
github zendeskgarden / react-components / packages / dropdowns / src / Dropdown / Dropdown.tsx View on Github external
onKeyDown: composeEventHandlers(onKeyDown, (e: KeyboardEvent) => {
        const PREVIOUS_KEY = rtl ? KEY_CODES.RIGHT : KEY_CODES.LEFT;
        const NEXT_KEY = rtl ? KEY_CODES.LEFT : KEY_CODES.RIGHT;

        if (downshift.isOpen) {
          // Select previous item if available
          if (
            e.keyCode === PREVIOUS_KEY &&
            previousIndexRef.current !== null &&
            previousIndexRef.current !== undefined &&
            !downshift.inputValue
          ) {
            e.preventDefault();
            e.stopPropagation();

            downshift.selectItemAtIndex(previousIndexRef.current);
          }

          // Select current next item if available
github zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.spec.js View on Github external
it('increments maxValue on RIGHT key', () => {
        const { getAllByTestId } = render(
          
        );
        const maxThumb = getAllByTestId('thumb')[1];

        fireEvent.keyDown(maxThumb, { keyCode: KEY_CODES.RIGHT });
        expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 15, maxValue: 80 });
      });
github zendeskgarden / react-containers / packages / selection / src / SelectionContainer.spec.tsx View on Github external
it('increments focusedIndex if currently less than items length', () => {
              const { getAllByTestId } = render();
              const [item, secondItem] = getAllByTestId('item');

              fireEvent.click(item);
              fireEvent.keyDown(item, { keyCode: KEY_CODES.RIGHT });
              expect(secondItem).toHaveAttribute('data-focused', 'true');
            });
github zendeskgarden / react-containers / packages / selection / src / SelectionContainer.spec.tsx View on Github external
it('increments and wrap focusedIndex if currently greater than or equal to items length', () => {
              const { getAllByTestId } = render();
              const [item, , lastItem] = getAllByTestId('item');

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

        fireEvent.keyDown(getAllByTestId('thumb')[0], { keyCode: KEY_CODES.RIGHT });
        expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 20, maxValue: 75 });
      });
github zendeskgarden / react-components / packages / dropdowns / src / Multiselect / Multiselect.tsx View on Github external
onKeyDown: (e: KeyboardEvent) => {
                  if (!inputValue) {
                    if (isRtl(props) && e.keyCode === KEY_CODES.RIGHT && selectedItems.length > 0) {
                      setFocusedItem(selectedItems[selectedItems.length - 1]);
                    } else if (
                      !isRtl(props) &&
                      e.keyCode === KEY_CODES.LEFT &&
                      selectedItems.length > 0
                    ) {
                      setFocusedItem(selectedItems[selectedItems.length - 1]);
                    } else if (e.keyCode === KEY_CODES.BACKSPACE && selectedItems.length > 0) {
                      (setDownshiftState as any)({
                        type: REMOVE_ITEM_STATE_TYPE,
                        selectedItem: selectedItems[selectedItems.length - 1]
                      });
                      (e as any).nativeEvent.preventDownshiftDefault = true;
                      e.preventDefault();
                      e.stopPropagation();
                    }
github zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.js View on Github external
case KEY_CODES.LEFT:
        if (rtl) {
          incrementThumb();
        } else {
          decrementThumb();
        }

        keyIntercepted = true;
        break;

      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) {
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();
                }

                if (e.keyCode === KEY_CODES.RIGHT && index === selectedItems.length - 1) {
                  e.preventDefault();
                  inputRef.current && inputRef.current.focus();
                }
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 {
            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({