How to use the @zendeskgarden/container-utilities.KEY_CODES.SPACE 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
downshift.selectItemAtIndex(previousIndexRef.current);
          }

          // Select current next item if available
          if (e.keyCode === NEXT_KEY) {
            const nextItemIndexes = Object.values(nextItemsHashRef.current);

            if (nextItemIndexes.includes(downshift.highlightedIndex)) {
              e.preventDefault();
              e.stopPropagation();

              downshift.selectItemAtIndex(downshift.highlightedIndex!);
            }
          }
        } else if (
          (e.keyCode === KEY_CODES.ENTER || e.keyCode === KEY_CODES.SPACE) &&
          !downshift.isOpen
        ) {
          e.preventDefault();
          e.stopPropagation();

          downshift.openMenu();
        }
      }),
      ...other
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.SPACE });
          expect(item).toHaveAttribute('data-selected', '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 / accordion / src / AccordionContainer.spec.tsx View on Github external
it('toggles on SPACE', () => {
        const { getAllByTestId } = render();
        const firstTrigger = getAllByTestId('trigger')[0];

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

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

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

        expect(firstPanel).toHaveAttribute('aria-hidden', 'false');
      });
github zendeskgarden / react-containers / packages / accordion / src / useAccordion.ts View on Github external
onKeyDown: composeEventHandlers(props.onKeyDown, (event: KeyboardEvent) => {
        if (event.keyCode === KEY_CODES.SPACE || event.keyCode === KEY_CODES.ENTER) {
          toggle(index);
          event.preventDefault();
        }
      }),
      ...props
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
(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