feat(useFocusTrap): add triggeredDefault prop

This allows to determine if the focus trap should be triggered by default

Author: DSil

packages/orbit-components/src/Dialog/index.tsx

@@ -43,7 +43,7 @@ const Dialog = ({
   const ref = React.useRef<HTMLDivElement | null>(null);
   const theme = useTheme();
 
-  useFocusTrap(ref);
+  useFocusTrap(ref, true);
 
   React.useEffect(() => {
     const transitionLength = parseFloat(theme.orbit.durationFast) * 1000;

packages/orbit-components/src/hooks/useFocusTrap/README.md

@@ -21,6 +21,7 @@ const Component = (props: Props) => {
 
 The table below contains all parameters available to the `useFocusTrap` hook.
 
-| Name | Type   | Description         |
-| :--- | :----- | :------------------ |
-| ref  | `func` | Component reference |
+| Name             | Type      | Description                                   |
+| :--------------- | :-------- | :-------------------------------------------- |
+| ref              | `func`    | Component reference                           |
+| triggeredDefault | `boolean` | Whether to trigger the focus trap by default. |

packages/orbit-components/src/hooks/useFocusTrap/index.ts

@@ -1,14 +1,16 @@
 import * as React from "react";
 
 import FOCUSABLE_ELEMENT_SELECTORS from "./consts";
-import KEY_CODE_MAP from "../../common/keyMaps";
 
 interface FocusElements {
   first: HTMLElement | null;
   last: HTMLElement | null;
 }
 
-type UseFocusTrap = <T extends HTMLElement>(ref: React.RefObject<T>) => void;
+type UseFocusTrap = <T extends HTMLElement>(
+  ref: React.RefObject<T>,
+  triggeredDefault?: boolean,
+) => void;
 
 const manageFocus = (ref, triggered): FocusElements => {
   if (triggered && ref.current) {
@@ -25,12 +27,12 @@ const manageFocus = (ref, triggered): FocusElements => {
   return { first: null, last: null };
 };
 
-const useFocusTrap: UseFocusTrap = ref => {
-  const [triggered, setTriggered] = React.useState(false);
+const useFocusTrap: UseFocusTrap = (ref, triggeredDefault = false) => {
+  const [triggered, setTriggered] = React.useState(triggeredDefault);
 
   React.useEffect(() => {
     const handleKeyDown = (ev: KeyboardEvent) => {
-      if (ev.keyCode === KEY_CODE_MAP.TAB) {
+      if (ev.key === "Tab") {
         if (!triggered) {
           setTriggered(true);
         }