How to use the @zendeskgarden/container-utilities.KEY_CODES.HOME 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 / forms / src / fields / MultiThumbRange.spec.js View on Github external
it('sets minValue to min on HOME key', () => {
        const { getAllByTestId } = render(
          
        );

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

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

        fireEvent.keyDown(maxThumb, { keyCode: KEY_CODES.HOME });
        expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 15, maxValue: 15 });
      });
github zendeskgarden / react-containers / packages / selection / src / useSelection.ts View on Github external
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({
            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 => {
        if (isOpen) {
          (e.nativeEvent as any).preventDownshiftDefault = true;
        } else if (!inputValue && e.keyCode === KEY_CODES.HOME) {
          setFocusedItem(selectedItems[0]);
          e.preventDefault();
        }
      },
      onFocus: () => {
github zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.js View on Github external
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) {
          updateMinThumbSlider(max);
        } else {
          updateMaxThumbSlider(max);
        }