How to use the @chakra-ui/utils.normalizeEventKey function in @chakra-ui/utils

To help you get started, we’ve selected a few @chakra-ui/utils 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 chakra-ui / chakra-ui / packages / chakra-ui / src / Select / Selectv2.tsx View on Github external
onKeyDown: (event: KeyboardEvent) => {
      const eventKey = normalizeEventKey(event);

      if (eventKey === "Enter") {
        event.preventDefault();
        if (state.focusedId != null && state.focusedId != state.selectedId) {
          dispatch({ type: "SELECT_FOCUSED", payload: {} });
        }
        closeMenu();
      }

      keyDownAction(event, keys => {
        dispatch({ type: "CHARACTER_FOCUS", payload: { keys } });
      });

      if (eventKey === "Escape") {
        closeMenu();
      }
github chakra-ui / chakra-ui / packages / chakra-ui / src / Select / Selectv2.tsx View on Github external
onKeyDown: (event: KeyboardEvent) => {
      const eventKey = normalizeEventKey(event);
      const isOpenKey = ["ArrowUp", "ArrowDown", " "].includes(eventKey);

      if (isOpenKey) {
        openMenu();
        return;
      }

      keyDownAction(event, str => {
        dispatch({ type: "CHARACTER_SELECT", payload: { keys: str } });
      });

      if (eventKey === "ArrowLeft") {
        dispatch({
          type: "PREVIOUS",
          payload: { selectOnFocus: true, loop: false },
        });
github chakra-ui / chakra-ui / packages / chakra-ui-hooks / src / useNumberInput / useNumberInput.tsx View on Github external
const onKeyDown = (event: React.KeyboardEvent) => {
    if (!isAllowedKey(event)) {
      event.preventDefault();
    }

    const eventKey = normalizeEventKey(event);
    const factor = getIncrementFactor(event);
    const valueStep = factor * props.step;

    switch (eventKey) {
      case "ArrowUp":
        event.preventDefault();
        increment(valueStep);
        break;
      case "ArrowDown":
        event.preventDefault();
        decrement(valueStep);
        break;
      case "Home":
        event.preventDefault();
        counter.update(props.min);
        break;
github chakra-ui / chakra-ui / packages / chakra-ui-hooks / src / useNumberInput / useNumberInput.tsx View on Github external
"Delete",
    "Backspace",
    "ArrowLeft",
    "ArrowRight",
    "Meta",
    "Shift",
    "Enter",
    "Escape",
    "Home",
    "End",
    "+",
    "-",
    ".",
  ];

  const key = normalizeEventKey(event);
  const ctrlKey = event.metaKey || event.ctrlKey;

  const isCopy = ctrlKey && key === "c";
  const isPaste = ctrlKey && key === "v";
  const isCut = ctrlKey && key === "x";
  const isSelectAll = ctrlKey && key === "a";

  if (allowedKeys.includes(key) || isCopy || isPaste || isCut || isSelectAll)
    return true;

  const notTopNumberKeypad = keyCode > 31 && (keyCode < 48 || keyCode > 57);
  const notNumericKeypad = (keyCode < 96 || keyCode > 105) && keyCode !== 110;

  if (event.shiftKey || (notTopNumberKeypad && notNumericKeypad)) return false;

  return true;