How to use @chakra-ui/utils - 10 common examples

};
    }, [dispatch, id, isDisabled, isFocusable, ref, value]);

    return (
      <div tabindex="{-1}" aria-disabled="{isDisabled" aria-selected="{isHighlighted" data-chakra-select-option="" role="option"> {
          // console.log("welcome");
          dispatch({ type: "FOCUS", payload: { id } });
        })}
        onMouseLeave={composeEventHandlers(onMouseLeave, () =&gt; {
          dispatch({ type: "RESET_FOCUSED", payload: {} });
        })}
        onClick={composeEventHandlers(onClick, () =&gt; {
          dispatch({ type: "MOUSE_SELECT", payload: { id } });
          actions.closeMenu();
        })}
        onKeyDown={composeEventHandlers(onKeyDown, event =&gt; {
          if (event.key === "Tab" &amp;&amp; props.selectOptionOnTab) {
            dispatch({ type: "SELECT_FOCUSED", payload: {} });
          }
        })}
        style={{
          ...(isHighlighted &amp;&amp; { background: "blue", color: "white" }),
          ...(isSelected &amp;&amp; { background: "tomato", color: "white" }),
        }}
        {...rest}</div>

{cloneElement(child as React.ReactElement, {
          size: size,
          variantColor: variantColor,
          onChange: () => checkboxGroup.onChange(child.props.value),
          isChecked: checkboxGroup.value.includes(child.props.value),
        })}
      
    );
  });

  // Omit incompatible values
  const finalProps = omit(props, ["defaultValue", "value", "onChange"]);

  return (
    
      {clones}
    
  );
};

onFocus,
    panelId,
    buttonId,
    isDisabled,
    isFocusable,
    isOpen,
  } = useAccordionItemContext();

  // With useTabbable, we don't have to worry about managing when the button is disabled
  // or trigger a click on Enter or Space bar
  const tabbable = useTabbable({
    ...props,
    isDisabled,
    isFocusable,
    onClick: composeEventHandlers(props.onClick, onClick),
    onKeyDown: composeEventHandlers(props.onKeyDown, onKeyDown),
  });

  const ref = useMergeRefs(buttonRef, props.ref);

  return {
    ...tabbable,
    ref,
    "aria-expanded": isOpen,
    "aria-controls": panelId,
    id: buttonId,
    onFocus: composeEventHandlers(props.onFocus, onFocus),
  };
}

onKeyDown,
    onFocus,
    panelId,
    buttonId,
    isDisabled,
    isFocusable,
    isOpen,
  } = useAccordionItemContext();

  // With useTabbable, we don't have to worry about managing when the button is disabled
  // or trigger a click on Enter or Space bar
  const tabbable = useTabbable({
    ...props,
    isDisabled,
    isFocusable,
    onClick: composeEventHandlers(props.onClick, onClick),
    onKeyDown: composeEventHandlers(props.onKeyDown, onKeyDown),
  });

  const ref = useMergeRefs(buttonRef, props.ref);

  return {
    ...tabbable,
    ref,
    "aria-expanded": isOpen,
    "aria-controls": panelId,
    id: buttonId,
    onFocus: composeEventHandlers(props.onFocus, onFocus),
  };
}

const element = ref.current;

    // Hide was triggered by a click/focus on a tabbable element outside
    // the dialog or on another dialog. We won't change focus then.
    const preventFocus =
      document.activeElement &&
      element &&
      !element.contains(document.activeElement) &&
      isTabbable(document.activeElement);

    if (preventFocus) return;

    const focusEl = options.focusRef && options.focusRef.current;

    if (focusEl && previouslyVisible && !options.visible) {
      ensureFocus(focusEl);
    }
  }, [
    options.autoFocus,

useIsomorphicEffect(() => {
    if (options.visible && options.activeIndex && state.items.length) {
      actions.highlight(state.items[options.activeIndex]);
    }
    if (!options.autoSelect && options.visible) {
      ensureFocus(menuRef.current);
    }
    // eslint-disable-next-line
  }, [options.visible, options.autoSelect, state.items]);
}

// Keep this function here. Don't move it down bro!
      getOptionFromKeys(event, focusItem);

      if (key === "Escape") {
        closeMenu();
      }

      if (key === "ArrowDown") {
        event.preventDefault();
        if (focused == null) {
          setFocused(optionsRef.current[0]);
          return;
        }

        const currentIndex = findIndex(
          optionsRef.current,
          item => item.value === focused.value,
        );

        let nextIndex;
        if (currentIndex === -1) {
          nextIndex = 0;
        } else {
          nextIndex = currentIndex;
          if (nextIndex < optionsRef.current.length - 1) {
            nextIndex = currentIndex + 1;
          }
        }
        const nextOption = optionsRef.current[nextIndex];
        setFocused(nextOption);
      }

const goToNextTab = () => {
    const nextIndex = (enabledSelectedIndex + 1) % count;
    updateActiveIndex(nextIndex);
  };
  const goToPrevTab = () => {
    const nextIndex = (enabledSelectedIndex - 1 + count) % count;
    updateActiveIndex(nextIndex);
  };
  const goToFirst = () => updateActiveIndex(0);
  const goToLast = () => updateActiveIndex(count - 1);

  const isHorizontal = tabs.orientation === "horizontal";
  const isVertical = tabs.orientation === "vertical";

  // Function to handle keyboard navigation
  const onKeyDown = createOnKeyDown({
    preventDefault: false,
    keyMap: {
      ArrowRight: () => isHorizontal && goToNextTab(),
      ArrowLeft: () => isHorizontal && goToPrevTab(),
      ArrowDown: event => {
        event.preventDefault();
        isVertical && goToNextTab();
      },
      ArrowUp: event => {
        event.preventDefault();
        isVertical && goToPrevTab();
      },
      Home: () => goToFirst(),
      End: () => goToLast(),
    },
  });

menu.onOpen();
    const firstItem = items[0];
    const firstItemNode = firstItem.ref.current as HTMLElement;
    ensureFocus(firstItemNode);
    highlight(firstItem);
  };

  const showAndFocusLastItem = () => {
    menu.onOpen();
    const lastItem = items[items.length - 1];
    const lastItemNode = lastItem.ref.current as HTMLElement;
    ensureFocus(lastItemNode);
    highlight(lastItem);
  };

  const onKeyDown = createOnKeyDown({
    stopPropagation: event => event.key !== "Escape",
    //@ts-ignore
    keyMap: {
      ArrowDown: !hasParent && showAndFocusFirstItem,
      ArrowUp: !hasParent && showAndFocusLastItem,
      ArrowRight: hasParent && showAndFocusFirstItem,
    },
  });

  // merge the refs
  const ref = useMergeRefs(menu.disclosureRef, menu.reference.ref, props.ref);

  return {
    ...props,
    ref,
    id: menu.disclosureId,

document.removeEventListener("click", click);
    };
  }, [menu, hasParent]);

  const onMouseEnter = () => {
    // If we're in a nested menu,
    // keep the menu open when we mouse into it
    if (hasParent) {
      menu.onOpen();
    }
  };

  const [descendants, { next, previous, search }] = useDescendantCtx();
  const [onSearch, keys] = useRapidKeydown();

  const onKeyDown = createOnKeyDown({
    stopPropagation: event => {
      if (event.key === "Escape" && hasParent) return false;
      return true;
    },
    onKeyDown: onSearch(keys => search(keys, "highlight")),
    keyMap: {
      Escape: menu.onClose,
      ArrowDown: () => next("highlight"),
      ArrowUp: () => previous("highlight"),
      ArrowLeft: () => {
        if (!hasParent) return;
        menu.onClose();
        const disclosureNode = menu.disclosureRef.current;
        disclosureNode.focus();
      },
    },