-
Notifications
You must be signed in to change notification settings - Fork 122
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a6941a8
commit e24bc76
Showing
3 changed files
with
88 additions
and
84 deletions.
There are no files selected for viewing
70 changes: 35 additions & 35 deletions
70
packages/react/src/components/focus-trap/examples/autofocus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,39 @@ | ||
| import { useRef, useState } from 'react' | ||
| import { FocusTrap } from '../focus-trap' | ||
| import { FocusTrap } from "@ark-ui/react/focus-trap"; | ||
| import { useRef, useState } from "react"; | ||
|
|
||
| export const Autofocus = () => { | ||
| const [trapped, setTrapped] = useState(false) | ||
| const toggle = () => setTrapped((c) => !c) | ||
| const [trapped, setTrapped] = useState(false); | ||
| const toggle = () => setTrapped((c) => !c); | ||
|
|
||
| const buttonRef = useRef<HTMLButtonElement | null>(null) | ||
| const getButtonNode = () => { | ||
| const node = buttonRef.current | ||
| if (!node) throw new Error('Button not found') | ||
| return node | ||
| } | ||
| const buttonRef = useRef<HTMLButtonElement | null>(null); | ||
| const getButtonNode = () => { | ||
| const node = buttonRef.current; | ||
| if (!node) throw new Error("Button not found"); | ||
| return node; | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <button ref={buttonRef} onClick={toggle}> | ||
| {trapped ? 'End Trap' : 'Start Trap'} | ||
| </button> | ||
| {trapped && ( | ||
| <FocusTrap disabled={!trapped} setReturnFocus={getButtonNode}> | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: '1rem', | ||
| paddingBlock: '1rem', | ||
| }} | ||
| > | ||
| <input type="text" placeholder="Regular input" /> | ||
| {/* biome-ignore lint/a11y/noAutofocus: <explanation> */} | ||
| <input type="text" placeholder="Autofocused input" autoFocus /> | ||
| <button onClick={() => setTrapped(false)}>End Trap</button> | ||
| </div> | ||
| </FocusTrap> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
| return ( | ||
| <div> | ||
| <button ref={buttonRef} onClick={toggle}> | ||
| {trapped ? "End Trap" : "Start Trap"} | ||
| </button> | ||
| {trapped && ( | ||
| <FocusTrap disabled={!trapped} setReturnFocus={getButtonNode}> | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| gap: "1rem", | ||
| paddingBlock: "1rem", | ||
| }} | ||
| > | ||
| <input type="text" placeholder="Regular input" /> | ||
| {/* biome-ignore lint/a11y/noAutofocus: <explanation> */} | ||
| <input type="text" placeholder="Autofocused input" autoFocus /> | ||
| <button onClick={() => setTrapped(false)}>End Trap</button> | ||
| </div> | ||
| </FocusTrap> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
46 changes: 23 additions & 23 deletions
46
packages/react/src/components/focus-trap/examples/basic.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,25 @@ | ||
| import { useState } from 'react' | ||
| import { FocusTrap } from '../focus-trap' | ||
| import { FocusTrap } from "@ark-ui/react/focus-trap"; | ||
| import { useState } from "react"; | ||
|
|
||
| export const Basic = () => { | ||
| const [trapped, setTrapped] = useState(false) | ||
| return ( | ||
| <> | ||
| <button onClick={() => setTrapped(true)}>Start Trap</button> | ||
| <FocusTrap returnFocusOnDeactivate={false} disabled={!trapped}> | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: '1rem', | ||
| paddingBlock: '1rem', | ||
| }} | ||
| > | ||
| <input type="text" placeholder="input" /> | ||
| <textarea placeholder="textarea" /> | ||
| <button onClick={() => setTrapped(false)}>End Trap</button> | ||
| </div> | ||
| </FocusTrap> | ||
| </> | ||
| ) | ||
| } | ||
| const [trapped, setTrapped] = useState(false); | ||
| return ( | ||
| <> | ||
| <button onClick={() => setTrapped(true)}>Start Trap</button> | ||
| <FocusTrap returnFocusOnDeactivate={false} disabled={!trapped}> | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| gap: "1rem", | ||
| paddingBlock: "1rem", | ||
| }} | ||
| > | ||
| <input type="text" placeholder="input" /> | ||
| <textarea placeholder="textarea" /> | ||
| <button onClick={() => setTrapped(false)}>End Trap</button> | ||
| </div> | ||
| </FocusTrap> | ||
| </> | ||
| ); | ||
| }; |
56 changes: 30 additions & 26 deletions
56
packages/react/src/components/focus-trap/examples/initial-focus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,34 @@ | ||
| import { useRef, useState } from 'react' | ||
| import { FocusTrap } from '../focus-trap' | ||
| import { FocusTrap } from "@ark-ui/react/focus-trap"; | ||
| import { useRef, useState } from "react"; | ||
|
|
||
| export const InitialFocus = () => { | ||
| const [trapped, setTrapped] = useState(false) | ||
| const toggle = () => setTrapped((c) => !c) | ||
| const [trapped, setTrapped] = useState(false); | ||
| const toggle = () => setTrapped((c) => !c); | ||
|
|
||
| const inputRef = useRef<HTMLInputElement>(null) | ||
| const inputRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| return ( | ||
| <div> | ||
| <button onClick={toggle}>{trapped ? 'End Trap' : 'Start Trap'}</button> | ||
| <FocusTrap disabled={!trapped} initialFocus={() => inputRef.current}> | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: '1rem', | ||
| paddingBlock: '1rem', | ||
| }} | ||
| > | ||
| <input type="text" placeholder="First input" /> | ||
| <input ref={inputRef} type="text" placeholder="Second input (initial focus)" /> | ||
| <textarea placeholder="textarea" /> | ||
| <button onClick={() => setTrapped(false)}>End Trap</button> | ||
| </div> | ||
| </FocusTrap> | ||
| </div> | ||
| ) | ||
| } | ||
| return ( | ||
| <div> | ||
| <button onClick={toggle}>{trapped ? "End Trap" : "Start Trap"}</button> | ||
| <FocusTrap disabled={!trapped} initialFocus={() => inputRef.current}> | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| gap: "1rem", | ||
| paddingBlock: "1rem", | ||
| }} | ||
| > | ||
| <input type="text" placeholder="First input" /> | ||
| <input | ||
| ref={inputRef} | ||
| type="text" | ||
| placeholder="Second input (initial focus)" | ||
| /> | ||
| <textarea placeholder="textarea" /> | ||
| <button onClick={() => setTrapped(false)}>End Trap</button> | ||
| </div> | ||
| </FocusTrap> | ||
| </div> | ||
| ); | ||
| }; |