Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/nullable-outside-click-containers.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'react-simplikit': patch
---

Document that `useOutsideClickEffect` accepts `null` entries in container arrays, matching its existing type and behavior.
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ It is useful for closing modals, dropdowns, tooltips, and other UI components wh

```ts
function useOutsideClickEffect(
container: HTMLElement | HTMLElement[] | null,
container: HTMLElement | (HTMLElement | null)[] | null,
callback: () => void
): void;
```
Expand All @@ -17,8 +17,8 @@ function useOutsideClickEffect(
<Interface
required
name="container"
type="HTMLElement | HTMLElement[] | null"
description="A single HTML element, an array of HTML elements, or <code>null</code>. If <code>null</code>, the callback is not executed."
type="HTMLElement | (HTMLElement | null)[] | null"
description="A single HTML element, an array of HTML elements or <code>null</code> values, or <code>null</code>. <code>null</code> entries are ignored. If no HTML elements remain, the callback is not executed."
/>

<Interface
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Es útil para cerrar modales, menús desplegables, descripciones emergentes y ot

```ts
function useOutsideClickEffect(
container: HTMLElement | HTMLElement[] | null,
container: HTMLElement | (HTMLElement | null)[] | null,
callback: () => void
): void;
```
Expand All @@ -17,8 +17,8 @@ function useOutsideClickEffect(
<Interface
required
name="container"
type="HTMLElement | HTMLElement[] | null"
description="Un único elemento HTML, un arreglo de elementos HTML o <code>null</code>. Si es <code>null</code>, el callback no se ejecuta."
type="HTMLElement | (HTMLElement | null)[] | null"
description="Un único elemento HTML, un arreglo de elementos HTML o valores <code>null</code>, o <code>null</code>. Los valores <code>null</code> del arreglo se ignoran. Si no queda ningún elemento HTML, el callback no se ejecuta."
/>

<Interface
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

```ts
function useOutsideClickEffect(
container: HTMLElement | HTMLElement[] | null,
container: HTMLElement | (HTMLElement | null)[] | null,
callback: () => void
): void;
```
Expand All @@ -17,8 +17,8 @@ function useOutsideClickEffect(
<Interface
required
name="container"
type="HTMLElement | HTMLElement[] | null"
description="単一の HTML 要素、HTML 要素の配列、または <code>null</code> です。<code>null</code> の場合、コールバックは実行されません。"
type="HTMLElement | (HTMLElement | null)[] | null"
description="単一の HTML 要素、HTML 要素や <code>null</code> を含む配列、または <code>null</code> です。配列内の <code>null</code> は無視されます。HTML 要素が一つも残らない場合、コールバックは実行されません。"
/>

<Interface
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

```ts
function useOutsideClickEffect(
container: HTMLElement | HTMLElement[] | null,
container: HTMLElement | (HTMLElement | null)[] | null,
callback: () => void
): void;
```
Expand All @@ -16,8 +16,8 @@ function useOutsideClickEffect(
<Interface
required
name="container"
type="HTMLElement | HTMLElement[] | null"
description="단일 HTML 요소, HTML 요소 배열 또는 <code>null</code>이에요. <code>null</code>인 경우, 콜백이 실행되지 않아요."
type="HTMLElement | (HTMLElement | null)[] | null"
description="단일 HTML 요소, HTML 요소나 <code>null</code>을 담은 배열 또는 <code>null</code>이에요. 배열의 <code>null</code>은 무시돼요. HTML 요소가 하나도 남지 않으면 콜백이 실행되지 않아요."
/>

<Interface
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ It is useful for closing modals, dropdowns, tooltips, and other UI components wh

```ts
function useOutsideClickEffect(
container: HTMLElement | HTMLElement[] | null,
container: HTMLElement | (HTMLElement | null)[] | null,
callback: () => void
): void;
```
Expand All @@ -17,8 +17,8 @@ function useOutsideClickEffect(
<Interface
required
name="container"
type="HTMLElement | HTMLElement[] | null"
description="A single HTML element, an array of HTML elements, or <code>null</code>. If <code>null</code>, the callback is not executed."
type="HTMLElement | (HTMLElement | null)[] | null"
description="A single HTML element, an array of HTML elements or <code>null</code> values, or <code>null</code>. <code>null</code> entries are ignored. If no HTML elements remain, the callback is not executed."
/>

<Interface
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ type OneOrMore<T> = T | T[];
* `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
* It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.
*
* @param {HTMLElement | HTMLElement[] | null} container - A single HTML element, an array of HTML elements, or `null`.
* If `null`, the callback is not executed.
* @param {HTMLElement | (HTMLElement | null)[] | null} container - A single HTML element, an array of HTML elements or `null` values, or `null`.
* `null` entries are ignored. If no HTML elements remain, the callback is not executed.
* @param {() => void} callback - A function that is executed when clicking outside the specified container(s).
*
* @example
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

```ts
function useOutsideClickEffect(
container: HTMLElement | HTMLElement[] | null,
container: HTMLElement | (HTMLElement | null)[] | null,
callback: () => void
): void;
```
Expand All @@ -16,8 +16,8 @@ function useOutsideClickEffect(
<Interface
required
name="container"
type="HTMLElement | HTMLElement[] | null"
description="单个 HTML 元素、HTML 元素数组或 <code>null</code>。如果为 <code>null</code>,则不执行回调。"
type="HTMLElement | (HTMLElement | null)[] | null"
description="单个 HTML 元素、包含 HTML 元素或 <code>null</code> 的数组,或 <code>null</code>。数组中的 <code>null</code> 会被忽略。如果没有剩余的 HTML 元素,则不执行回调。"
/>

<Interface
Expand Down
Loading