main repo

This commit is contained in:
Basilosaurusrex
2025-11-24 18:09:40 +01:00
parent b636ee5e70
commit f027651f9b
34146 changed files with 4436636 additions and 0 deletions

21
node_modules/cmdk/LICENSE.md generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2022 Paco Coursey
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

483
node_modules/cmdk/README.md generated vendored Normal file
View File

@@ -0,0 +1,483 @@
<p align="center">
<img src="./website/public/og.png" />
</p>
# ⌘K [![cmdk minzip package size](https://img.shields.io/bundlephobia/minzip/cmdk)](https://www.npmjs.com/package/cmdk?activeTab=code) [![cmdk package version](https://img.shields.io/npm/v/cmdk.svg?colorB=green)](https://www.npmjs.com/package/cmdk)
⌘K is a command menu React component that can also be used as an accessible combobox. You render items, it filters and sorts them automatically. ⌘K supports a fully composable API <sup><sup>[How?](/ARCHITECTURE.md)</sup></sup>, so you can wrap items in other components or even as static JSX.
Demo and examples: [cmdk.paco.me](https://cmdk.paco.me)
## Install
```bash
pnpm install cmdk
```
## Use
```tsx
import { Command } from 'cmdk'
const CommandMenu = () => {
return (
<Command label="Command Menu">
<Command.Input />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Letters">
<Command.Item>a</Command.Item>
<Command.Item>b</Command.Item>
<Command.Separator />
<Command.Item>c</Command.Item>
</Command.Group>
<Command.Item>Apple</Command.Item>
</Command.List>
</Command>
)
}
```
Or in a dialog:
```tsx
import { Command } from 'cmdk'
const CommandMenu = () => {
const [open, setOpen] = React.useState(false)
// Toggle the menu when ⌘K is pressed
React.useEffect(() => {
const down = (e) => {
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
setOpen((open) => !open)
}
}
document.addEventListener('keydown', down)
return () => document.removeEventListener('keydown', down)
}, [])
return (
<Command.Dialog open={open} onOpenChange={setOpen} label="Global Command Menu">
<Command.Input />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Letters">
<Command.Item>a</Command.Item>
<Command.Item>b</Command.Item>
<Command.Separator />
<Command.Item>c</Command.Item>
</Command.Group>
<Command.Item>Apple</Command.Item>
</Command.List>
</Command.Dialog>
)
}
```
## Parts and styling
All parts forward props, including `ref`, to an appropriate element. Each part has a specific data-attribute (starting with `cmdk-`) that can be used for styling.
### Command `[cmdk-root]`
Render this to show the command menu inline, or use [Dialog](#dialog-cmdk-dialog-cmdk-overlay) to render in a elevated context. Can be controlled with the `value` and `onValueChange` props.
> **Note**
>
> Values are always trimmed. Use `apple`, not `Apple`.
```tsx
const [value, setValue] = React.useState('apple')
return (
<Command value={value} onValueChange={setValue}>
<Command.Input />
<Command.List>
<Command.Item>Orange</Command.Item>
<Command.Item>Apple</Command.Item>
</Command.List>
</Command>
)
```
You can provide a custom `filter` function that is called to rank each item. Note that the value will be trimmed.
```tsx
<Command
filter={(value, search) => {
if (value.includes(search)) return 1
return 0
}}
/>
```
A third argument, `keywords`, can also be provided to the filter function. Keywords act as aliases for the item value, and can also affect the rank of the item. Keywords are trimmed.
```tsx
<Command
filter={(value, search, keywords) => {
const extendValue = value + ' ' + keywords.join(' ')
if (extendValue.includes(search)) return 1
return 0
}}
/>
```
Or disable filtering and sorting entirely:
```tsx
<Command shouldFilter={false}>
<Command.List>
{filteredItems.map((item) => {
return (
<Command.Item key={item} value={item}>
{item}
</Command.Item>
)
})}
</Command.List>
</Command>
```
You can make the arrow keys wrap around the list (when you reach the end, it goes back to the first item) by setting the `loop` prop:
```tsx
<Command loop />
```
### Dialog `[cmdk-dialog]` `[cmdk-overlay]`
Props are forwarded to [Command](#command-cmdk-root). Composes Radix UI's Dialog component. The overlay is always rendered. See the [Radix Documentation](https://www.radix-ui.com/docs/primitives/components/dialog) for more information. Can be controlled with the `open` and `onOpenChange` props.
```tsx
const [open, setOpen] = React.useState(false)
return (
<Command.Dialog open={open} onOpenChange={setOpen}>
...
</Command.Dialog>
)
```
You can provide a `container` prop that accepts an HTML element that is forwarded to Radix UI's Dialog Portal component to specify which element the Dialog should portal into (defaults to `body`). See the [Radix Documentation](https://www.radix-ui.com/docs/primitives/components/dialog#portal) for more information.
```tsx
const containerElement = React.useRef(null)
return (
<>
<Command.Dialog container={containerElement.current} />
<div ref={containerElement} />
</>
)
```
### Input `[cmdk-input]`
All props are forwarded to the underlying `input` element. Can be controlled with the `value` and `onValueChange` props.
```tsx
const [search, setSearch] = React.useState('')
return <Command.Input value={search} onValueChange={setSearch} />
```
### List `[cmdk-list]`
Contains items and groups. Animate height using the `--cmdk-list-height` CSS variable.
```css
[cmdk-list] {
min-height: 300px;
height: var(--cmdk-list-height);
max-height: 500px;
transition: height 100ms ease;
}
```
To scroll item into view earlier near the edges of the viewport, use scroll-padding:
```css
[cmdk-list] {
scroll-padding-block-start: 8px;
scroll-padding-block-end: 8px;
}
```
### Item `[cmdk-item]` `[data-disabled?]` `[data-selected?]`
Item that becomes active on pointer enter. You should provide a unique `value` for each item, but it will be automatically inferred from the `.textContent`.
```tsx
<Command.Item
onSelect={(value) => console.log('Selected', value)}
// Value is implicity "apple" because of the provided text content
>
Apple
</Command.Item>
```
You can also provide a `keywords` prop to help with filtering. Keywords are trimmed.
```tsx
<Command.Item keywords={['fruit', 'apple']}>Apple</Command.Item>
```
```tsx
<Command.Item
onSelect={(value) => console.log('Selected', value)}
// Value is implicity "apple" because of the provided text content
>
Apple
</Command.Item>
```
You can force an item to always render, regardless of filtering, by passing the `forceMount` prop.
### Group `[cmdk-group]` `[hidden?]`
Groups items together with the given `heading` (`[cmdk-group-heading]`).
```tsx
<Command.Group heading="Fruit">
<Command.Item>Apple</Command.Item>
</Command.Group>
```
Groups will not unmount from the DOM, rather the `hidden` attribute is applied to hide it from view. This may be relevant in your styling.
You can force a group to always render, regardless of filtering, by passing the `forceMount` prop.
### Separator `[cmdk-separator]`
Visible when the search query is empty or `alwaysRender` is true, hidden otherwise.
### Empty `[cmdk-empty]`
Automatically renders when there are no results for the search query.
### Loading `[cmdk-loading]`
You should conditionally render this with `progress` while loading asynchronous items.
```tsx
const [loading, setLoading] = React.useState(false)
return <Command.List>{loading && <Command.Loading>Hang on</Command.Loading>}</Command.List>
```
### `useCommandState(state => state.selectedField)`
Hook that composes [`useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore). Pass a function that returns a slice of the command menu state to re-render when that slice changes. This hook is provided for advanced use cases and should not be commonly used.
A good use case would be to render a more detailed empty state, like so:
```tsx
const search = useCommandState((state) => state.search)
return <Command.Empty>No results found for "{search}".</Command.Empty>
```
## Examples
Code snippets for common use cases.
### Nested items
Often selecting one item should navigate deeper, with a more refined set of items. For example selecting "Change theme…" should show new items "Dark theme" and "Light theme". We call these sets of items "pages", and they can be implemented with simple state:
```tsx
const ref = React.useRef(null)
const [open, setOpen] = React.useState(false)
const [search, setSearch] = React.useState('')
const [pages, setPages] = React.useState([])
const page = pages[pages.length - 1]
return (
<Command
onKeyDown={(e) => {
// Escape goes to previous page
// Backspace goes to previous page when search is empty
if (e.key === 'Escape' || (e.key === 'Backspace' && !search)) {
e.preventDefault()
setPages((pages) => pages.slice(0, -1))
}
}}
>
<Command.Input value={search} onValueChange={setSearch} />
<Command.List>
{!page && (
<>
<Command.Item onSelect={() => setPages([...pages, 'projects'])}>Search projects</Command.Item>
<Command.Item onSelect={() => setPages([...pages, 'teams'])}>Join a team</Command.Item>
</>
)}
{page === 'projects' && (
<>
<Command.Item>Project A</Command.Item>
<Command.Item>Project B</Command.Item>
</>
)}
{page === 'teams' && (
<>
<Command.Item>Team 1</Command.Item>
<Command.Item>Team 2</Command.Item>
</>
)}
</Command.List>
</Command>
)
```
### Show sub-items when searching
If your items have nested sub-items that you only want to reveal when searching, render based on the search state:
```tsx
const SubItem = (props) => {
const search = useCommandState((state) => state.search)
if (!search) return null
return <Command.Item {...props} />
}
return (
<Command>
<Command.Input />
<Command.List>
<Command.Item>Change theme</Command.Item>
<SubItem>Change theme to dark</SubItem>
<SubItem>Change theme to light</SubItem>
</Command.List>
</Command>
)
```
### Asynchronous results
Render the items as they become available. Filtering and sorting will happen automatically.
```tsx
const [loading, setLoading] = React.useState(false)
const [items, setItems] = React.useState([])
React.useEffect(() => {
async function getItems() {
setLoading(true)
const res = await api.get('/dictionary')
setItems(res)
setLoading(false)
}
getItems()
}, [])
return (
<Command>
<Command.Input />
<Command.List>
{loading && <Command.Loading>Fetching words</Command.Loading>}
{items.map((item) => {
return (
<Command.Item key={`word-${item}`} value={item}>
{item}
</Command.Item>
)
})}
</Command.List>
</Command>
)
```
### Use inside Popover
We recommend using the [Radix UI popover](https://www.radix-ui.com/docs/primitives/components/popover) component. ⌘K relies on the Radix UI Dialog component, so this will reduce your bundle size a bit due to shared dependencies.
```bash
$ pnpm install @radix-ui/react-popover
```
Render `Command` inside of the popover content:
```tsx
import * as Popover from '@radix-ui/react-popover'
return (
<Popover.Root>
<Popover.Trigger>Toggle popover</Popover.Trigger>
<Popover.Content>
<Command>
<Command.Input />
<Command.List>
<Command.Item>Apple</Command.Item>
</Command.List>
</Command>
</Popover.Content>
</Popover.Root>
)
```
### Drop in stylesheets
You can find global stylesheets to drop in as a starting point for styling. See [website/styles/cmdk](website/styles/cmdk) for examples.
## FAQ
**Accessible?** Yes. Labeling, aria attributes, and DOM ordering tested with Voice Over and Chrome DevTools. [Dialog](#dialog-cmdk-dialog-cmdk-overlay) composes an accessible Dialog implementation.
**Virtualization?** No. Good performance up to 2,000-3,000 items, though. Read below to bring your own.
**Filter/sort items manually?** Yes. Pass `shouldFilter={false}` to [Command](#command-cmdk-root). Better memory usage and performance. Bring your own virtualization this way.
**React 18 safe?** Yes, required. Uses React 18 hooks like `useId` and `useSyncExternalStore`.
**Unstyled?** Yes, use the listed CSS selectors.
**Hydration mismatch?** No, likely a bug in your code. Ensure the `open` prop to `Command.Dialog` is `false` on the server.
**React strict mode safe?** Yes. Open an issue if you notice an issue.
**Weird/wrong behavior?** Make sure your `Command.Item` has a `key` and unique `value`.
**Concurrent mode safe?** Maybe, but concurrent mode is not yet real. Uses risky approaches like manual DOM ordering.
**React server component?** No, it's a client component.
**Listen for ⌘K automatically?** No, do it yourself to have full control over keybind context.
**React Native?** No, and no plans to support it. If you build a React Native version, let us know and we'll link your repository here.
## History
Written in 2019 by Paco ([@pacocoursey](https://twitter.com/pacocoursey)) to see if a composable combobox API was possible. Used for the Vercel command menu and autocomplete by Rauno ([@raunofreiberg](https://twitter.com/raunofreiberg)) in 2020. Re-written independently in 2022 with a simpler and more performant approach. Ideas and help from Shu ([@shuding\_](https://twitter.com/shuding_)).
[use-descendants](https://github.com/pacocoursey/use-descendants) was extracted from the 2019 version.
## Testing
First, install dependencies and Playwright browsers:
```bash
pnpm install
pnpm playwright install
```
Then ensure you've built the library:
```bash
pnpm build
```
Then run the tests using your local build against real browser engines:
```bash
pnpm test
```

1
node_modules/cmdk/dist/chunk-NZJY6EH4.mjs generated vendored Normal file
View File

@@ -0,0 +1 @@
var U=1,Y=.9,H=.8,J=.17,p=.1,u=.999,$=.9999;var k=.99,m=/[\\\/_+.#"@\[\(\{&]/,B=/[\\\/_+.#"@\[\(\{&]/g,K=/[\s-]/,X=/[\s-]/g;function G(_,C,h,P,A,f,O){if(f===C.length)return A===_.length?U:k;var T=`${A},${f}`;if(O[T]!==void 0)return O[T];for(var L=P.charAt(f),c=h.indexOf(L,A),S=0,E,N,R,M;c>=0;)E=G(_,C,h,P,c+1,f+1,O),E>S&&(c===A?E*=U:m.test(_.charAt(c-1))?(E*=H,R=_.slice(A,c-1).match(B),R&&A>0&&(E*=Math.pow(u,R.length))):K.test(_.charAt(c-1))?(E*=Y,M=_.slice(A,c-1).match(X),M&&A>0&&(E*=Math.pow(u,M.length))):(E*=J,A>0&&(E*=Math.pow(u,c-A))),_.charAt(c)!==C.charAt(f)&&(E*=$)),(E<p&&h.charAt(c-1)===P.charAt(f+1)||P.charAt(f+1)===P.charAt(f)&&h.charAt(c-1)!==P.charAt(f))&&(N=G(_,C,h,P,c+1,f+2,O),N*p>E&&(E=N*p)),E>S&&(S=E),c=h.indexOf(L,c+1);return O[T]=S,S}function D(_){return _.toLowerCase().replace(X," ")}function W(_,C,h){return _=h&&h.length>0?`${_+" "+h.join(" ")}`:_,G(_,C,D(_),D(C),0,0,{})}export{W as a};

1
node_modules/cmdk/dist/chunk-XJATAMEX.mjs generated vendored Normal file
View File

@@ -0,0 +1 @@
var U=1,Y=.9,a=.8,H=.17,p=.1,u=.999,J=.9999;var k=.99,m=/[\\\/_+.#"@\[\(\{&]/,B=/[\\\/_+.#"@\[\(\{&]/g,K=/[\s-]/,X=/[\s-]/g;function G(c,f,P,C,h,A,O){if(A===f.length)return h===c.length?U:k;var T=`${h},${A}`;if(O[T]!==void 0)return O[T];for(var L=C.charAt(A),E=P.indexOf(L,h),S=0,_,N,R,M;E>=0;)_=G(c,f,P,C,E+1,A+1,O),_>S&&(E===h?_*=U:m.test(c.charAt(E-1))?(_*=a,R=c.slice(h,E-1).match(B),R&&h>0&&(_*=Math.pow(u,R.length))):K.test(c.charAt(E-1))?(_*=Y,M=c.slice(h,E-1).match(X),M&&h>0&&(_*=Math.pow(u,M.length))):(_*=H,h>0&&(_*=Math.pow(u,E-h))),c.charAt(E)!==f.charAt(A)&&(_*=J)),(_<p&&P.charAt(E-1)===C.charAt(A+1)||C.charAt(A+1)===C.charAt(A)&&P.charAt(E-1)!==C.charAt(A))&&(N=G(c,f,P,C,E+1,A+2,O),N*p>_&&(_=N*p)),_>S&&(S=_),E=P.indexOf(L,E+1);return O[T]=S,S}function D(c){return c.toLowerCase().replace(X," ")}function W(c,f){return G(c,f,D(c),D(f),0,0,{})}export{W as a};

3
node_modules/cmdk/dist/command-score.d.mts generated vendored Normal file
View File

@@ -0,0 +1,3 @@
declare function commandScore(string: string, abbreviation: string, aliases: string[]): number;
export { commandScore };

3
node_modules/cmdk/dist/command-score.d.ts generated vendored Normal file
View File

@@ -0,0 +1,3 @@
declare function commandScore(string: string, abbreviation: string, aliases: string[]): number;
export { commandScore };

1
node_modules/cmdk/dist/command-score.js generated vendored Normal file
View File

@@ -0,0 +1 @@
var p=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var k=(_,E)=>{for(var h in E)p(_,h,{get:E[h],enumerable:!0})},m=(_,E,h,C)=>{if(E&&typeof E=="object"||typeof E=="function")for(let c of J(E))!$.call(_,c)&&c!==h&&p(_,c,{get:()=>E[c],enumerable:!(C=H(E,c))||C.enumerable});return _};var B=_=>m(p({},"__esModule",{value:!0}),_);var a={};k(a,{commandScore:()=>Z});module.exports=B(a);var D=1,K=.9,W=.8,j=.17,u=.1,G=.999,y=.9999;var F=.99,q=/[\\\/_+.#"@\[\(\{&]/,Q=/[\\\/_+.#"@\[\(\{&]/g,V=/[\s-]/,Y=/[\s-]/g;function L(_,E,h,C,c,P,O){if(P===E.length)return c===_.length?D:F;var T=`${c},${P}`;if(O[T]!==void 0)return O[T];for(var U=C.charAt(P),f=h.indexOf(U,c),S=0,A,N,R,M;f>=0;)A=L(_,E,h,C,f+1,P+1,O),A>S&&(f===c?A*=D:q.test(_.charAt(f-1))?(A*=W,R=_.slice(c,f-1).match(Q),R&&c>0&&(A*=Math.pow(G,R.length))):V.test(_.charAt(f-1))?(A*=K,M=_.slice(c,f-1).match(Y),M&&c>0&&(A*=Math.pow(G,M.length))):(A*=j,c>0&&(A*=Math.pow(G,f-c))),_.charAt(f)!==E.charAt(P)&&(A*=y)),(A<u&&h.charAt(f-1)===C.charAt(P+1)||C.charAt(P+1)===C.charAt(P)&&h.charAt(f-1)!==C.charAt(P))&&(N=L(_,E,h,C,f+1,P+2,O),N*u>A&&(A=N*u)),A>S&&(S=A),f=h.indexOf(U,f+1);return O[T]=S,S}function X(_){return _.toLowerCase().replace(Y," ")}function Z(_,E,h){return _=h&&h.length>0?`${_+" "+h.join(" ")}`:_,L(_,E,X(_),X(E),0,0,{})}0&&(module.exports={commandScore});

1
node_modules/cmdk/dist/command-score.mjs generated vendored Normal file
View File

@@ -0,0 +1 @@
import{a}from"./chunk-NZJY6EH4.mjs";export{a as commandScore};

409
node_modules/cmdk/dist/index.d.mts generated vendored Normal file
View File

@@ -0,0 +1,409 @@
import * as RadixDialog from '@radix-ui/react-dialog';
import * as React from 'react';
declare type Children = {
children?: React.ReactNode;
};
declare type State = {
search: string;
value: string;
filtered: {
count: number;
items: Map<string, number>;
groups: Set<string>;
};
};
declare const Command: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this command menu. Not shown visibly.
*/
label?: string;
/**
* Optionally set to `false` to turn off the automatic filtering and sorting.
* If `false`, you must conditionally render valid items based on the search query yourself.
*/
shouldFilter?: boolean;
/**
* Custom filter function for whether each command menu item should matches the given search query.
* It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
* By default, uses the `command-score` library.
*/
filter?: (value: string, search: string, keywords?: string[]) => number;
/**
* Optional default item value when it is initially rendered.
*/
defaultValue?: string;
/**
* Optional controlled state of the selected command menu item.
*/
value?: string;
/**
* Event handler called when the selected item of the menu changes.
*/
onValueChange?: (value: string) => void;
/**
* Optionally set to `true` to turn on looping around when using the arrow keys.
*/
loop?: boolean;
/**
* Optionally set to `true` to disable selection via pointer events.
*/
disablePointerSelection?: boolean;
/**
* Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
*/
vimBindings?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
/**
* Command menu item. Becomes active on pointer enter or through keyboard navigation.
* Preferably pass a `value`, otherwise the value will be inferred from `children` or
* the rendered item's `textContent`.
*/
declare const Item: React.ForwardRefExoticComponent<Children & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
/** Whether this item is currently disabled. */
disabled?: boolean;
/** Event handler for when this item is selected, either via click or keyboard selection. */
onSelect?: (value: string) => void;
/**
* A unique value for this item.
* If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.
*/
value?: string;
/** Optional keywords to match against when filtering. */
keywords?: string[];
/** Whether this item is forcibly rendered regardless of filtering. */
forceMount?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
declare type Group = {
id: string;
forceMount?: boolean;
};
/**
* Group command menu items together with a heading.
* Grouped items are always shown together.
*/
declare const Group: React.ForwardRefExoticComponent<Children & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
/** Optional heading to render for this group. */
heading?: React.ReactNode;
/** If no heading is provided, you must provide a value that is unique for this group. */
value?: string;
/** Whether this group is forcibly rendered regardless of filtering. */
forceMount?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
/**
* A visual and semantic separator between items or groups.
* Visible when the search query is empty or `alwaysRender` is true, hidden otherwise.
*/
declare const Separator: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
alwaysRender?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
/**
* Command menu input.
* All props are forwarded to the underyling `input` element.
*/
declare const Input: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
ref?: React.Ref<HTMLInputElement>;
} & {
asChild?: boolean;
}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
/**
* Optional controlled state for the value of the search input.
*/
value?: string;
/**
* Event handler called when the search value changes.
*/
onValueChange?: (search: string) => void;
} & React.RefAttributes<HTMLInputElement>>;
/**
* Contains `Item`, `Group`, and `Separator`.
* Use the `--cmdk-list-height` CSS variable to animate height based on the number of results.
*/
declare const List: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this List of suggestions. Not shown visibly.
*/
label?: string;
} & React.RefAttributes<HTMLDivElement>>;
/**
* Renders the command menu in a Radix Dialog.
*/
declare const Dialog: React.ForwardRefExoticComponent<RadixDialog.DialogProps & Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this command menu. Not shown visibly.
*/
label?: string;
/**
* Optionally set to `false` to turn off the automatic filtering and sorting.
* If `false`, you must conditionally render valid items based on the search query yourself.
*/
shouldFilter?: boolean;
/**
* Custom filter function for whether each command menu item should matches the given search query.
* It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
* By default, uses the `command-score` library.
*/
filter?: (value: string, search: string, keywords?: string[]) => number;
/**
* Optional default item value when it is initially rendered.
*/
defaultValue?: string;
/**
* Optional controlled state of the selected command menu item.
*/
value?: string;
/**
* Event handler called when the selected item of the menu changes.
*/
onValueChange?: (value: string) => void;
/**
* Optionally set to `true` to turn on looping around when using the arrow keys.
*/
loop?: boolean;
/**
* Optionally set to `true` to disable selection via pointer events.
*/
disablePointerSelection?: boolean;
/**
* Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
*/
vimBindings?: boolean;
} & {
/** Provide a className to the Dialog overlay. */
overlayClassName?: string;
/** Provide a className to the Dialog content. */
contentClassName?: string;
/** Provide a custom element the Dialog should portal into. */
container?: HTMLElement;
} & React.RefAttributes<HTMLDivElement>>;
/**
* Automatically renders when there are no results for the search query.
*/
declare const Empty: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>>;
/**
* You should conditionally render this with `progress` while loading asynchronous items.
*/
declare const Loading: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/** Estimated progress of loading asynchronous options. */
progress?: number;
/**
* Accessible label for this loading progressbar. Not shown visibly.
*/
label?: string;
} & React.RefAttributes<HTMLDivElement>>;
declare const pkg: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this command menu. Not shown visibly.
*/
label?: string;
/**
* Optionally set to `false` to turn off the automatic filtering and sorting.
* If `false`, you must conditionally render valid items based on the search query yourself.
*/
shouldFilter?: boolean;
/**
* Custom filter function for whether each command menu item should matches the given search query.
* It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
* By default, uses the `command-score` library.
*/
filter?: (value: string, search: string, keywords?: string[]) => number;
/**
* Optional default item value when it is initially rendered.
*/
defaultValue?: string;
/**
* Optional controlled state of the selected command menu item.
*/
value?: string;
/**
* Event handler called when the selected item of the menu changes.
*/
onValueChange?: (value: string) => void;
/**
* Optionally set to `true` to turn on looping around when using the arrow keys.
*/
loop?: boolean;
/**
* Optionally set to `true` to disable selection via pointer events.
*/
disablePointerSelection?: boolean;
/**
* Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
*/
vimBindings?: boolean;
} & React.RefAttributes<HTMLDivElement>> & {
List: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this List of suggestions. Not shown visibly.
*/
label?: string;
} & React.RefAttributes<HTMLDivElement>>;
Item: React.ForwardRefExoticComponent<Children & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
/** Whether this item is currently disabled. */
disabled?: boolean;
/** Event handler for when this item is selected, either via click or keyboard selection. */
onSelect?: (value: string) => void;
/**
* A unique value for this item.
* If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.
*/
value?: string;
/** Optional keywords to match against when filtering. */
keywords?: string[];
/** Whether this item is forcibly rendered regardless of filtering. */
forceMount?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
Input: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
ref?: React.Ref<HTMLInputElement>;
} & {
asChild?: boolean;
}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
/**
* Optional controlled state for the value of the search input.
*/
value?: string;
/**
* Event handler called when the search value changes.
*/
onValueChange?: (search: string) => void;
} & React.RefAttributes<HTMLInputElement>>;
Group: React.ForwardRefExoticComponent<Children & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
/** Optional heading to render for this group. */
heading?: React.ReactNode;
/** If no heading is provided, you must provide a value that is unique for this group. */
value?: string;
/** Whether this group is forcibly rendered regardless of filtering. */
forceMount?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
Separator: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
alwaysRender?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
Dialog: React.ForwardRefExoticComponent<RadixDialog.DialogProps & Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this command menu. Not shown visibly.
*/
label?: string;
/**
* Optionally set to `false` to turn off the automatic filtering and sorting.
* If `false`, you must conditionally render valid items based on the search query yourself.
*/
shouldFilter?: boolean;
/**
* Custom filter function for whether each command menu item should matches the given search query.
* It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
* By default, uses the `command-score` library.
*/
filter?: (value: string, search: string, keywords?: string[]) => number;
/**
* Optional default item value when it is initially rendered.
*/
defaultValue?: string;
/**
* Optional controlled state of the selected command menu item.
*/
value?: string;
/**
* Event handler called when the selected item of the menu changes.
*/
onValueChange?: (value: string) => void;
/**
* Optionally set to `true` to turn on looping around when using the arrow keys.
*/
loop?: boolean;
/**
* Optionally set to `true` to disable selection via pointer events.
*/
disablePointerSelection?: boolean;
/**
* Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
*/
vimBindings?: boolean;
} & {
/** Provide a className to the Dialog overlay. */
overlayClassName?: string;
/** Provide a className to the Dialog content. */
contentClassName?: string;
/** Provide a custom element the Dialog should portal into. */
container?: HTMLElement;
} & React.RefAttributes<HTMLDivElement>>;
Empty: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>>;
Loading: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/** Estimated progress of loading asynchronous options. */
progress?: number;
/**
* Accessible label for this loading progressbar. Not shown visibly.
*/
label?: string;
} & React.RefAttributes<HTMLDivElement>>;
};
/** Run a selector against the store state. */
declare function useCmdk<T = any>(selector: (state: State) => T): T;
export { pkg as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Input as CommandInput, Item as CommandItem, List as CommandList, Loading as CommandLoading, Command as CommandRoot, Separator as CommandSeparator, useCmdk as useCommandState };

409
node_modules/cmdk/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,409 @@
import * as RadixDialog from '@radix-ui/react-dialog';
import * as React from 'react';
declare type Children = {
children?: React.ReactNode;
};
declare type State = {
search: string;
value: string;
filtered: {
count: number;
items: Map<string, number>;
groups: Set<string>;
};
};
declare const Command: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this command menu. Not shown visibly.
*/
label?: string;
/**
* Optionally set to `false` to turn off the automatic filtering and sorting.
* If `false`, you must conditionally render valid items based on the search query yourself.
*/
shouldFilter?: boolean;
/**
* Custom filter function for whether each command menu item should matches the given search query.
* It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
* By default, uses the `command-score` library.
*/
filter?: (value: string, search: string, keywords?: string[]) => number;
/**
* Optional default item value when it is initially rendered.
*/
defaultValue?: string;
/**
* Optional controlled state of the selected command menu item.
*/
value?: string;
/**
* Event handler called when the selected item of the menu changes.
*/
onValueChange?: (value: string) => void;
/**
* Optionally set to `true` to turn on looping around when using the arrow keys.
*/
loop?: boolean;
/**
* Optionally set to `true` to disable selection via pointer events.
*/
disablePointerSelection?: boolean;
/**
* Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
*/
vimBindings?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
/**
* Command menu item. Becomes active on pointer enter or through keyboard navigation.
* Preferably pass a `value`, otherwise the value will be inferred from `children` or
* the rendered item's `textContent`.
*/
declare const Item: React.ForwardRefExoticComponent<Children & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
/** Whether this item is currently disabled. */
disabled?: boolean;
/** Event handler for when this item is selected, either via click or keyboard selection. */
onSelect?: (value: string) => void;
/**
* A unique value for this item.
* If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.
*/
value?: string;
/** Optional keywords to match against when filtering. */
keywords?: string[];
/** Whether this item is forcibly rendered regardless of filtering. */
forceMount?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
declare type Group = {
id: string;
forceMount?: boolean;
};
/**
* Group command menu items together with a heading.
* Grouped items are always shown together.
*/
declare const Group: React.ForwardRefExoticComponent<Children & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
/** Optional heading to render for this group. */
heading?: React.ReactNode;
/** If no heading is provided, you must provide a value that is unique for this group. */
value?: string;
/** Whether this group is forcibly rendered regardless of filtering. */
forceMount?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
/**
* A visual and semantic separator between items or groups.
* Visible when the search query is empty or `alwaysRender` is true, hidden otherwise.
*/
declare const Separator: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
alwaysRender?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
/**
* Command menu input.
* All props are forwarded to the underyling `input` element.
*/
declare const Input: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
ref?: React.Ref<HTMLInputElement>;
} & {
asChild?: boolean;
}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
/**
* Optional controlled state for the value of the search input.
*/
value?: string;
/**
* Event handler called when the search value changes.
*/
onValueChange?: (search: string) => void;
} & React.RefAttributes<HTMLInputElement>>;
/**
* Contains `Item`, `Group`, and `Separator`.
* Use the `--cmdk-list-height` CSS variable to animate height based on the number of results.
*/
declare const List: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this List of suggestions. Not shown visibly.
*/
label?: string;
} & React.RefAttributes<HTMLDivElement>>;
/**
* Renders the command menu in a Radix Dialog.
*/
declare const Dialog: React.ForwardRefExoticComponent<RadixDialog.DialogProps & Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this command menu. Not shown visibly.
*/
label?: string;
/**
* Optionally set to `false` to turn off the automatic filtering and sorting.
* If `false`, you must conditionally render valid items based on the search query yourself.
*/
shouldFilter?: boolean;
/**
* Custom filter function for whether each command menu item should matches the given search query.
* It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
* By default, uses the `command-score` library.
*/
filter?: (value: string, search: string, keywords?: string[]) => number;
/**
* Optional default item value when it is initially rendered.
*/
defaultValue?: string;
/**
* Optional controlled state of the selected command menu item.
*/
value?: string;
/**
* Event handler called when the selected item of the menu changes.
*/
onValueChange?: (value: string) => void;
/**
* Optionally set to `true` to turn on looping around when using the arrow keys.
*/
loop?: boolean;
/**
* Optionally set to `true` to disable selection via pointer events.
*/
disablePointerSelection?: boolean;
/**
* Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
*/
vimBindings?: boolean;
} & {
/** Provide a className to the Dialog overlay. */
overlayClassName?: string;
/** Provide a className to the Dialog content. */
contentClassName?: string;
/** Provide a custom element the Dialog should portal into. */
container?: HTMLElement;
} & React.RefAttributes<HTMLDivElement>>;
/**
* Automatically renders when there are no results for the search query.
*/
declare const Empty: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>>;
/**
* You should conditionally render this with `progress` while loading asynchronous items.
*/
declare const Loading: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/** Estimated progress of loading asynchronous options. */
progress?: number;
/**
* Accessible label for this loading progressbar. Not shown visibly.
*/
label?: string;
} & React.RefAttributes<HTMLDivElement>>;
declare const pkg: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this command menu. Not shown visibly.
*/
label?: string;
/**
* Optionally set to `false` to turn off the automatic filtering and sorting.
* If `false`, you must conditionally render valid items based on the search query yourself.
*/
shouldFilter?: boolean;
/**
* Custom filter function for whether each command menu item should matches the given search query.
* It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
* By default, uses the `command-score` library.
*/
filter?: (value: string, search: string, keywords?: string[]) => number;
/**
* Optional default item value when it is initially rendered.
*/
defaultValue?: string;
/**
* Optional controlled state of the selected command menu item.
*/
value?: string;
/**
* Event handler called when the selected item of the menu changes.
*/
onValueChange?: (value: string) => void;
/**
* Optionally set to `true` to turn on looping around when using the arrow keys.
*/
loop?: boolean;
/**
* Optionally set to `true` to disable selection via pointer events.
*/
disablePointerSelection?: boolean;
/**
* Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
*/
vimBindings?: boolean;
} & React.RefAttributes<HTMLDivElement>> & {
List: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this List of suggestions. Not shown visibly.
*/
label?: string;
} & React.RefAttributes<HTMLDivElement>>;
Item: React.ForwardRefExoticComponent<Children & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
/** Whether this item is currently disabled. */
disabled?: boolean;
/** Event handler for when this item is selected, either via click or keyboard selection. */
onSelect?: (value: string) => void;
/**
* A unique value for this item.
* If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.
*/
value?: string;
/** Optional keywords to match against when filtering. */
keywords?: string[];
/** Whether this item is forcibly rendered regardless of filtering. */
forceMount?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
Input: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
ref?: React.Ref<HTMLInputElement>;
} & {
asChild?: boolean;
}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
/**
* Optional controlled state for the value of the search input.
*/
value?: string;
/**
* Event handler called when the search value changes.
*/
onValueChange?: (search: string) => void;
} & React.RefAttributes<HTMLInputElement>>;
Group: React.ForwardRefExoticComponent<Children & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
/** Optional heading to render for this group. */
heading?: React.ReactNode;
/** If no heading is provided, you must provide a value that is unique for this group. */
value?: string;
/** Whether this group is forcibly rendered regardless of filtering. */
forceMount?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
Separator: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
alwaysRender?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
Dialog: React.ForwardRefExoticComponent<RadixDialog.DialogProps & Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/**
* Accessible label for this command menu. Not shown visibly.
*/
label?: string;
/**
* Optionally set to `false` to turn off the automatic filtering and sorting.
* If `false`, you must conditionally render valid items based on the search query yourself.
*/
shouldFilter?: boolean;
/**
* Custom filter function for whether each command menu item should matches the given search query.
* It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
* By default, uses the `command-score` library.
*/
filter?: (value: string, search: string, keywords?: string[]) => number;
/**
* Optional default item value when it is initially rendered.
*/
defaultValue?: string;
/**
* Optional controlled state of the selected command menu item.
*/
value?: string;
/**
* Event handler called when the selected item of the menu changes.
*/
onValueChange?: (value: string) => void;
/**
* Optionally set to `true` to turn on looping around when using the arrow keys.
*/
loop?: boolean;
/**
* Optionally set to `true` to disable selection via pointer events.
*/
disablePointerSelection?: boolean;
/**
* Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
*/
vimBindings?: boolean;
} & {
/** Provide a className to the Dialog overlay. */
overlayClassName?: string;
/** Provide a className to the Dialog content. */
contentClassName?: string;
/** Provide a custom element the Dialog should portal into. */
container?: HTMLElement;
} & React.RefAttributes<HTMLDivElement>>;
Empty: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>>;
Loading: React.ForwardRefExoticComponent<Children & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
} & {
asChild?: boolean;
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
/** Estimated progress of loading asynchronous options. */
progress?: number;
/**
* Accessible label for this loading progressbar. Not shown visibly.
*/
label?: string;
} & React.RefAttributes<HTMLDivElement>>;
};
/** Run a selector against the store state. */
declare function useCmdk<T = any>(selector: (state: State) => T): T;
export { pkg as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Input as CommandInput, Item as CommandItem, List as CommandList, Loading as CommandLoading, Command as CommandRoot, Separator as CommandSeparator, useCmdk as useCommandState };

1
node_modules/cmdk/dist/index.js generated vendored Normal file

File diff suppressed because one or more lines are too long

1
node_modules/cmdk/dist/index.mjs generated vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,13 @@
# `primitive`
## Installation
```sh
$ yarn add @radix-ui/primitive
# or
$ npm install @radix-ui/primitive
```
## Usage
This is an internal utility, not intended for public usage.

View File

@@ -0,0 +1,5 @@
export function composeEventHandlers<E>(originalEventHandler?: (event: E) => void, ourEventHandler?: (event: E) => void, { checkForDefaultPrevented }?: {
checkForDefaultPrevented?: boolean | undefined;
}): (event: E) => void;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,5 @@
export function composeEventHandlers<E>(originalEventHandler?: (event: E) => void, ourEventHandler?: (event: E) => void, { checkForDefaultPrevented }?: {
checkForDefaultPrevented?: boolean | undefined;
}): (event: E) => void;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":"AAAA,qCAA8B,CAAC,EAC7B,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EACzC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EACpC,EAAE,wBAA+B,EAAE;;CAAK,WAEL,CAAC,UAOrC","sources":["packages/core/primitive/src/packages/core/primitive/src/primitive.tsx","packages/core/primitive/src/packages/core/primitive/src/index.ts","packages/core/primitive/src/index.ts"],"sourcesContent":[null,null,"export { composeEventHandlers } from './primitive';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,16 @@
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "composeEventHandlers", () => $1a6a90a521dcd173$export$b9ecd428b558ff10);
function $1a6a90a521dcd173$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true } = {}) {
return function handleEvent(event) {
originalEventHandler === null || originalEventHandler === void 0 || originalEventHandler(event);
if (checkForDefaultPrevented === false || !event.defaultPrevented) return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);
};
}
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"mappings":";;;;;ACAA,SAASA,yCAAT,CACEC,oBADF,EAEEC,eAFF,EAGE,4BAAEC,wBAAwB,GAAG,IAA3BA,GAAF,GAAsC,EAHxC,EAIE;IACA,OAAO,SAASC,WAAT,CAAqBC,KAArB,EAA+B;QACpCJ,oBAAoB,KAAA,IAApB,IAAAA,oBAAoB,KAAA,KAAA,CAApB,IAAAA,oBAAoB,CAAGI,KAAH,CAApB,CAAAJ;QAEA,IAAIE,wBAAwB,KAAK,KAA7B,IAAsC,CAAGE,KAAF,CAA8BC,gBAAzE,EACE,OAAOJ,eAAP,KAAA,IAAA,IAAOA,eAAP,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAOA,eAAe,CAAGG,KAAH,CAAtB,CAAA;KAJJ,CAMC;CACF;;ADZD","sources":["packages/core/primitive/src/index.ts","packages/core/primitive/src/primitive.tsx"],"sourcesContent":["export { composeEventHandlers } from './primitive';\n","function composeEventHandlers<E>(\n originalEventHandler?: (event: E) => void,\n ourEventHandler?: (event: E) => void,\n { checkForDefaultPrevented = true } = {}\n) {\n return function handleEvent(event: E) {\n originalEventHandler?.(event);\n\n if (checkForDefaultPrevented === false || !((event as unknown) as Event).defaultPrevented) {\n return ourEventHandler?.(event);\n }\n };\n}\n\nexport { composeEventHandlers };\n"],"names":["composeEventHandlers","originalEventHandler","ourEventHandler","checkForDefaultPrevented","handleEvent","event","defaultPrevented"],"version":3,"file":"index.js.map"}

View File

@@ -0,0 +1,12 @@
function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true } = {}) {
return function handleEvent(event) {
originalEventHandler === null || originalEventHandler === void 0 || originalEventHandler(event);
if (checkForDefaultPrevented === false || !event.defaultPrevented) return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);
};
}
export {$e42e1063c40fb3ef$export$b9ecd428b558ff10 as composeEventHandlers};
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"mappings":"ACAA,SAASA,yCAAT,CACEC,oBADF,EAEEC,eAFF,EAGE,4BAAEC,wBAAwB,GAAG,IAA3BA,GAAF,GAAsC,EAHxC,EAIE;IACA,OAAO,SAASC,WAAT,CAAqBC,KAArB,EAA+B;QACpCJ,oBAAoB,KAAA,IAApB,IAAAA,oBAAoB,KAAA,KAAA,CAApB,IAAAA,oBAAoB,CAAGI,KAAH,CAApB,CAAAJ;QAEA,IAAIE,wBAAwB,KAAK,KAA7B,IAAsC,CAAGE,KAAF,CAA8BC,gBAAzE,EACE,OAAOJ,eAAP,KAAA,IAAA,IAAOA,eAAP,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAOA,eAAe,CAAGG,KAAH,CAAtB,CAAA;KAJJ,CAMC;CACF;;ADZD","sources":["packages/core/primitive/src/index.ts","packages/core/primitive/src/primitive.tsx"],"sourcesContent":["export { composeEventHandlers } from './primitive';\n","function composeEventHandlers<E>(\n originalEventHandler?: (event: E) => void,\n ourEventHandler?: (event: E) => void,\n { checkForDefaultPrevented = true } = {}\n) {\n return function handleEvent(event: E) {\n originalEventHandler?.(event);\n\n if (checkForDefaultPrevented === false || !((event as unknown) as Event).defaultPrevented) {\n return ourEventHandler?.(event);\n }\n };\n}\n\nexport { composeEventHandlers };\n"],"names":["composeEventHandlers","originalEventHandler","ourEventHandler","checkForDefaultPrevented","handleEvent","event","defaultPrevented"],"version":3,"file":"index.mjs.map"}

View File

@@ -0,0 +1,41 @@
{
"name": "@radix-ui/primitive",
"version": "1.0.1",
"license": "MIT",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
},
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"clean": "rm -rf dist",
"version": "yarn version"
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
},
"dependencies": {
"@babel/runtime": "^7.13.10"
}
}

View File

@@ -0,0 +1,13 @@
# `react-compose-refs`
## Installation
```sh
$ yarn add @radix-ui/react-compose-refs
# or
$ npm install @radix-ui/react-compose-refs
```
## Usage
This is an internal utility, not intended for public usage.

View File

@@ -0,0 +1,14 @@
import * as React from "react";
type PossibleRef<T> = React.Ref<T> | undefined;
/**
* A utility to compose multiple refs together
* Accepts callback refs and RefObject(s)
*/
export function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
/**
* A custom hook that composes multiple refs
* Accepts callback refs and RefObject(s)
*/
export function useComposedRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,14 @@
import * as React from "react";
type PossibleRef<T> = React.Ref<T> | undefined;
/**
* A utility to compose multiple refs together
* Accepts callback refs and RefObject(s)
*/
export function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
/**
* A custom hook that composes multiple refs
* Accepts callback refs and RefObject(s)
*/
export function useComposedRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":";AAEA,iBAAiB,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;AAc/C;;;GAGG;AACH,4BAAqB,CAAC,EAAE,GAAG,IAAI,EAAE,YAAY,CAAC,CAAC,EAAE,UACjC,CAAC,UAChB;AAED;;;GAGG;AACH,gCAAyB,CAAC,EAAE,GAAG,IAAI,EAAE,YAAY,CAAC,CAAC,EAAE,qBAGpD","sources":["packages/react/compose-refs/src/packages/react/compose-refs/src/composeRefs.tsx","packages/react/compose-refs/src/packages/react/compose-refs/src/index.ts","packages/react/compose-refs/src/index.ts"],"sourcesContent":[null,null,"export { composeRefs, useComposedRefs } from './composeRefs';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,36 @@
var $dJwbH$react = require("react");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "composeRefs", () => $9c2aaba23466b352$export$43e446d32b3d21af);
$parcel$export(module.exports, "useComposedRefs", () => $9c2aaba23466b352$export$c7b2cbe3552a0d05);
/**
* Set a given ref to a given value
* This utility takes care of different types of refs: callback refs and RefObject(s)
*/ function $9c2aaba23466b352$var$setRef(ref, value) {
if (typeof ref === 'function') ref(value);
else if (ref !== null && ref !== undefined) ref.current = value;
}
/**
* A utility to compose multiple refs together
* Accepts callback refs and RefObject(s)
*/ function $9c2aaba23466b352$export$43e446d32b3d21af(...refs) {
return (node)=>refs.forEach((ref)=>$9c2aaba23466b352$var$setRef(ref, node)
)
;
}
/**
* A custom hook that composes multiple refs
* Accepts callback refs and RefObject(s)
*/ function $9c2aaba23466b352$export$c7b2cbe3552a0d05(...refs) {
// eslint-disable-next-line react-hooks/exhaustive-deps
return $dJwbH$react.useCallback($9c2aaba23466b352$export$43e446d32b3d21af(...refs), refs);
}
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"mappings":";;;;;;;;ACAA;AAIA;;;GAGA,CACA,SAASG,4BAAT,CAAmBC,GAAnB,EAAwCC,KAAxC,EAAkD;IAChD,IAAI,OAAOD,GAAP,KAAe,UAAnB,EACEA,GAAG,CAACC,KAAD,CAAH,CAAAD;SACK,IAAIA,GAAG,KAAK,IAAR,IAAgBA,GAAG,KAAKE,SAA5B,EACJF,GAAD,CAAmCG,OAAnC,GAA6CF,KAA7C,CAACD;CAEJ;AAED;;;GAGA,CACA,SAASJ,yCAAT,CAAwB,GAAGQ,IAA3B,EAAmD;IACjD,OAAQC,CAAAA,IAAD,GAAaD,IAAI,CAACE,OAAL,CAAcN,CAAAA,GAAD,GAASD,4BAAM,CAACC,GAAD,EAAMK,IAAN,CAA5B;QAAA,CAApB;IAAA,CAAA;CACD;AAED;;;GAGA,CACA,SAASR,yCAAT,CAA4B,GAAGO,IAA/B,EAAuD;IACrD,uDAAA;IACA,OAAON,wBAAA,CAAkBF,yCAAW,IAAIQ,IAAJ,CAA7B,EAAwCA,IAAxC,CAAP,CAAA;CACD;;AD/BD","sources":["packages/react/compose-refs/src/index.ts","packages/react/compose-refs/src/composeRefs.tsx"],"sourcesContent":["export { composeRefs, useComposedRefs } from './composeRefs';\n","import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n"],"names":["composeRefs","useComposedRefs","React","setRef","ref","value","undefined","current","refs","node","forEach","useCallback"],"version":3,"file":"index.js.map"}

View File

@@ -0,0 +1,31 @@
import {useCallback as $3vqmr$useCallback} from "react";
/**
* Set a given ref to a given value
* This utility takes care of different types of refs: callback refs and RefObject(s)
*/ function $6ed0406888f73fc4$var$setRef(ref, value) {
if (typeof ref === 'function') ref(value);
else if (ref !== null && ref !== undefined) ref.current = value;
}
/**
* A utility to compose multiple refs together
* Accepts callback refs and RefObject(s)
*/ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {
return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)
)
;
}
/**
* A custom hook that composes multiple refs
* Accepts callback refs and RefObject(s)
*/ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {
// eslint-disable-next-line react-hooks/exhaustive-deps
return $3vqmr$useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
}
export {$6ed0406888f73fc4$export$43e446d32b3d21af as composeRefs, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as useComposedRefs};
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"mappings":";;ACAA;AAIA;;;GAGA,CACA,SAASG,4BAAT,CAAmBC,GAAnB,EAAwCC,KAAxC,EAAkD;IAChD,IAAI,OAAOD,GAAP,KAAe,UAAnB,EACEA,GAAG,CAACC,KAAD,CAAH,CAAAD;SACK,IAAIA,GAAG,KAAK,IAAR,IAAgBA,GAAG,KAAKE,SAA5B,EACJF,GAAD,CAAmCG,OAAnC,GAA6CF,KAA7C,CAACD;CAEJ;AAED;;;GAGA,CACA,SAASJ,yCAAT,CAAwB,GAAGQ,IAA3B,EAAmD;IACjD,OAAQC,CAAAA,IAAD,GAAaD,IAAI,CAACE,OAAL,CAAcN,CAAAA,GAAD,GAASD,4BAAM,CAACC,GAAD,EAAMK,IAAN,CAA5B;QAAA,CAApB;IAAA,CAAA;CACD;AAED;;;GAGA,CACA,SAASR,yCAAT,CAA4B,GAAGO,IAA/B,EAAuD;IACrD,uDAAA;IACA,OAAON,kBAAA,CAAkBF,yCAAW,IAAIQ,IAAJ,CAA7B,EAAwCA,IAAxC,CAAP,CAAA;CACD;;AD/BD","sources":["packages/react/compose-refs/src/index.ts","packages/react/compose-refs/src/composeRefs.tsx"],"sourcesContent":["export { composeRefs, useComposedRefs } from './composeRefs';\n","import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n"],"names":["composeRefs","useComposedRefs","React","setRef","ref","value","undefined","current","refs","node","forEach","useCallback"],"version":3,"file":"index.mjs.map"}

View File

@@ -0,0 +1,50 @@
{
"name": "@radix-ui/react-compose-refs",
"version": "1.0.1",
"license": "MIT",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
},
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"clean": "rm -rf dist",
"version": "yarn version"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
},
"dependencies": {
"@babel/runtime": "^7.13.10"
}
}

View File

@@ -0,0 +1,13 @@
# `react-context`
## Installation
```sh
$ yarn add @radix-ui/react-context
# or
$ npm install @radix-ui/react-context
```
## Usage
This is an internal utility, not intended for public usage.

View File

@@ -0,0 +1,26 @@
import * as React from "react";
export function createContext<ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType): readonly [{
(props: ContextValueType & {
children: React.ReactNode;
}): JSX.Element;
displayName: string;
}, (consumerName: string) => ContextValueType];
export type Scope<C = any> = {
[scopeName: string]: React.Context<C>[];
} | undefined;
type ScopeHook = (scope: Scope) => {
[__scopeProp: string]: Scope;
};
export interface CreateScope {
scopeName: string;
(): ScopeHook;
}
export function createContextScope(scopeName: string, createContextScopeDeps?: CreateScope[]): readonly [<ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType | undefined) => readonly [{
(props: ContextValueType & {
scope: Scope<ContextValueType>;
children: React.ReactNode;
}): JSX.Element;
displayName: string;
}, (consumerName: string, scope: Scope<ContextValueType | undefined>) => ContextValueType], CreateScope];
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,26 @@
import * as React from "react";
export function createContext<ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType): readonly [{
(props: ContextValueType & {
children: React.ReactNode;
}): JSX.Element;
displayName: string;
}, (consumerName: string) => ContextValueType];
export type Scope<C = any> = {
[scopeName: string]: React.Context<C>[];
} | undefined;
type ScopeHook = (scope: Scope) => {
[__scopeProp: string]: Scope;
};
export interface CreateScope {
scopeName: string;
(): ScopeHook;
}
export function createContextScope(scopeName: string, createContextScopeDeps?: CreateScope[]): readonly [<ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType | undefined) => readonly [{
(props: ContextValueType & {
scope: Scope<ContextValueType>;
children: React.ReactNode;
}): JSX.Element;
displayName: string;
}, (consumerName: string, scope: Scope<ContextValueType | undefined>) => ContextValueType], CreateScope];
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":";AAEA,8BAAuB,gBAAgB,SAAS,MAAM,GAAG,IAAI,EAC3D,iBAAiB,EAAE,MAAM,EACzB,cAAc,CAAC,EAAE,gBAAgB;YAIR,gBAAgB,GAAG;QAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;KAAE;;kBAQvC,MAAM,uBAUzC;AAMD,kBAAW,CAAC,GAAG,GAAG,IAAI;IAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;CAAE,GAAG,SAAS,CAAC;AAC9E,iBAAiB,CAAC,KAAK,EAAE,KAAK,KAAK;IAAE,CAAC,WAAW,EAAE,MAAM,GAAG,KAAK,CAAA;CAAE,CAAC;AACpE;IACE,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,SAAS,CAAC;CACf;AAED,mCAA4B,SAAS,EAAE,MAAM,EAAE,sBAAsB,GAAE,WAAW,EAAO,yEAQlE,MAAM;;;kBAQ+C,MAAM,SAAS;;;kBAUrD,MAAM,iFAgC3C","sources":["packages/react/context/src/packages/react/context/src/createContext.tsx","packages/react/context/src/packages/react/context/src/index.ts","packages/react/context/src/index.ts"],"sourcesContent":[null,null,"export { createContext, createContextScope } from './createContext';\nexport type { CreateScope, Scope } from './createContext';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,133 @@
var $4O1Ne$react = require("react");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "createContext", () => $dec3cc0142d4f286$export$fd42f52fd3ae1109);
$parcel$export(module.exports, "createContextScope", () => $dec3cc0142d4f286$export$50c7b4e9d9f19c1);
function $dec3cc0142d4f286$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
const Context = /*#__PURE__*/ $4O1Ne$react.createContext(defaultContext);
function Provider(props) {
const { children: children , ...context } = props; // Only re-memoize when prop values change
// eslint-disable-next-line react-hooks/exhaustive-deps
const value = $4O1Ne$react.useMemo(()=>context
, Object.values(context));
return /*#__PURE__*/ $4O1Ne$react.createElement(Context.Provider, {
value: value
}, children);
}
function useContext(consumerName) {
const context = $4O1Ne$react.useContext(Context);
if (context) return context;
if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context.
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
}
Provider.displayName = rootComponentName + 'Provider';
return [
Provider,
useContext
];
}
/* -------------------------------------------------------------------------------------------------
* createContextScope
* -----------------------------------------------------------------------------------------------*/ function $dec3cc0142d4f286$export$50c7b4e9d9f19c1(scopeName, createContextScopeDeps = []) {
let defaultContexts = [];
/* -----------------------------------------------------------------------------------------------
* createContext
* ---------------------------------------------------------------------------------------------*/ function $dec3cc0142d4f286$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
const BaseContext = /*#__PURE__*/ $4O1Ne$react.createContext(defaultContext);
const index = defaultContexts.length;
defaultContexts = [
...defaultContexts,
defaultContext
];
function Provider(props) {
const { scope: scope , children: children , ...context } = props;
const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext; // Only re-memoize when prop values change
// eslint-disable-next-line react-hooks/exhaustive-deps
const value = $4O1Ne$react.useMemo(()=>context
, Object.values(context));
return /*#__PURE__*/ $4O1Ne$react.createElement(Context.Provider, {
value: value
}, children);
}
function useContext(consumerName, scope) {
const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext;
const context = $4O1Ne$react.useContext(Context);
if (context) return context;
if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context.
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
}
Provider.displayName = rootComponentName + 'Provider';
return [
Provider,
useContext
];
}
/* -----------------------------------------------------------------------------------------------
* createScope
* ---------------------------------------------------------------------------------------------*/ const createScope = ()=>{
const scopeContexts = defaultContexts.map((defaultContext)=>{
return /*#__PURE__*/ $4O1Ne$react.createContext(defaultContext);
});
return function useScope(scope) {
const contexts = (scope === null || scope === void 0 ? void 0 : scope[scopeName]) || scopeContexts;
return $4O1Ne$react.useMemo(()=>({
[`__scope${scopeName}`]: {
...scope,
[scopeName]: contexts
}
})
, [
scope,
contexts
]);
};
};
createScope.scopeName = scopeName;
return [
$dec3cc0142d4f286$export$fd42f52fd3ae1109,
$dec3cc0142d4f286$var$composeContextScopes(createScope, ...createContextScopeDeps)
];
}
/* -------------------------------------------------------------------------------------------------
* composeContextScopes
* -----------------------------------------------------------------------------------------------*/ function $dec3cc0142d4f286$var$composeContextScopes(...scopes) {
const baseScope = scopes[0];
if (scopes.length === 1) return baseScope;
const createScope1 = ()=>{
const scopeHooks = scopes.map((createScope)=>({
useScope: createScope(),
scopeName: createScope.scopeName
})
);
return function useComposedScopes(overrideScopes) {
const nextScopes1 = scopeHooks.reduce((nextScopes, { useScope: useScope , scopeName: scopeName })=>{
// We are calling a hook inside a callback which React warns against to avoid inconsistent
// renders, however, scoping doesn't have render side effects so we ignore the rule.
// eslint-disable-next-line react-hooks/rules-of-hooks
const scopeProps = useScope(overrideScopes);
const currentScope = scopeProps[`__scope${scopeName}`];
return {
...nextScopes,
...currentScope
};
}, {});
return $4O1Ne$react.useMemo(()=>({
[`__scope${baseScope.scopeName}`]: nextScopes1
})
, [
nextScopes1
]);
};
};
createScope1.scopeName = baseScope.scopeName;
return createScope1;
}
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,128 @@
import {createContext as $3bkAK$createContext, useMemo as $3bkAK$useMemo, createElement as $3bkAK$createElement, useContext as $3bkAK$useContext} from "react";
function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
const Context = /*#__PURE__*/ $3bkAK$createContext(defaultContext);
function Provider(props) {
const { children: children , ...context } = props; // Only re-memoize when prop values change
// eslint-disable-next-line react-hooks/exhaustive-deps
const value = $3bkAK$useMemo(()=>context
, Object.values(context));
return /*#__PURE__*/ $3bkAK$createElement(Context.Provider, {
value: value
}, children);
}
function useContext(consumerName) {
const context = $3bkAK$useContext(Context);
if (context) return context;
if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context.
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
}
Provider.displayName = rootComponentName + 'Provider';
return [
Provider,
useContext
];
}
/* -------------------------------------------------------------------------------------------------
* createContextScope
* -----------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$50c7b4e9d9f19c1(scopeName, createContextScopeDeps = []) {
let defaultContexts = [];
/* -----------------------------------------------------------------------------------------------
* createContext
* ---------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
const BaseContext = /*#__PURE__*/ $3bkAK$createContext(defaultContext);
const index = defaultContexts.length;
defaultContexts = [
...defaultContexts,
defaultContext
];
function Provider(props) {
const { scope: scope , children: children , ...context } = props;
const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext; // Only re-memoize when prop values change
// eslint-disable-next-line react-hooks/exhaustive-deps
const value = $3bkAK$useMemo(()=>context
, Object.values(context));
return /*#__PURE__*/ $3bkAK$createElement(Context.Provider, {
value: value
}, children);
}
function useContext(consumerName, scope) {
const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext;
const context = $3bkAK$useContext(Context);
if (context) return context;
if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context.
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
}
Provider.displayName = rootComponentName + 'Provider';
return [
Provider,
useContext
];
}
/* -----------------------------------------------------------------------------------------------
* createScope
* ---------------------------------------------------------------------------------------------*/ const createScope = ()=>{
const scopeContexts = defaultContexts.map((defaultContext)=>{
return /*#__PURE__*/ $3bkAK$createContext(defaultContext);
});
return function useScope(scope) {
const contexts = (scope === null || scope === void 0 ? void 0 : scope[scopeName]) || scopeContexts;
return $3bkAK$useMemo(()=>({
[`__scope${scopeName}`]: {
...scope,
[scopeName]: contexts
}
})
, [
scope,
contexts
]);
};
};
createScope.scopeName = scopeName;
return [
$c512c27ab02ef895$export$fd42f52fd3ae1109,
$c512c27ab02ef895$var$composeContextScopes(createScope, ...createContextScopeDeps)
];
}
/* -------------------------------------------------------------------------------------------------
* composeContextScopes
* -----------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$var$composeContextScopes(...scopes) {
const baseScope = scopes[0];
if (scopes.length === 1) return baseScope;
const createScope1 = ()=>{
const scopeHooks = scopes.map((createScope)=>({
useScope: createScope(),
scopeName: createScope.scopeName
})
);
return function useComposedScopes(overrideScopes) {
const nextScopes1 = scopeHooks.reduce((nextScopes, { useScope: useScope , scopeName: scopeName })=>{
// We are calling a hook inside a callback which React warns against to avoid inconsistent
// renders, however, scoping doesn't have render side effects so we ignore the rule.
// eslint-disable-next-line react-hooks/rules-of-hooks
const scopeProps = useScope(overrideScopes);
const currentScope = scopeProps[`__scope${scopeName}`];
return {
...nextScopes,
...currentScope
};
}, {});
return $3bkAK$useMemo(()=>({
[`__scope${baseScope.scopeName}`]: nextScopes1
})
, [
nextScopes1
]);
};
};
createScope1.scopeName = baseScope.scopeName;
return createScope1;
}
export {$c512c27ab02ef895$export$fd42f52fd3ae1109 as createContext, $c512c27ab02ef895$export$50c7b4e9d9f19c1 as createContextScope};
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,50 @@
{
"name": "@radix-ui/react-context",
"version": "1.0.1",
"license": "MIT",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
},
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"clean": "rm -rf dist",
"version": "yarn version"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
},
"dependencies": {
"@babel/runtime": "^7.13.10"
}
}

View File

@@ -0,0 +1,13 @@
# `react-dialog`
## Installation
```sh
$ yarn add @radix-ui/react-dialog
# or
$ npm install @radix-ui/react-dialog
```
## Usage
View docs [here](https://radix-ui.com/primitives/docs/components/dialog).

View File

@@ -0,0 +1,105 @@
import * as React from "react";
import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
import { FocusScope } from "@radix-ui/react-focus-scope";
import { Portal as _Portal1 } from "@radix-ui/react-portal";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
export const createDialogScope: import("@radix-ui/react-context").CreateScope;
export interface DialogProps {
children?: React.ReactNode;
open?: boolean;
defaultOpen?: boolean;
onOpenChange?(open: boolean): void;
modal?: boolean;
}
export const Dialog: React.FC<DialogProps>;
type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;
export interface DialogTriggerProps extends PrimitiveButtonProps {
}
export const DialogTrigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
type PortalProps = React.ComponentPropsWithoutRef<typeof _Portal1>;
export interface DialogPortalProps {
children?: React.ReactNode;
/**
* Specify a container element to portal the content into.
*/
container?: PortalProps['container'];
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
export const DialogPortal: React.FC<DialogPortalProps>;
export interface DialogOverlayProps extends DialogOverlayImplProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
export const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
interface DialogOverlayImplProps extends PrimitiveDivProps {
}
export interface DialogContentProps extends DialogContentTypeProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
export const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
interface DialogContentTypeProps extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {
}
type DismissableLayerProps = Radix.ComponentPropsWithoutRef<typeof DismissableLayer>;
type FocusScopeProps = Radix.ComponentPropsWithoutRef<typeof FocusScope>;
interface DialogContentImplProps extends Omit<DismissableLayerProps, 'onDismiss'> {
/**
* When `true`, focus cannot escape the `Content` via keyboard,
* pointer, or a programmatic focus.
* @defaultValue false
*/
trapFocus?: FocusScopeProps['trapped'];
/**
* Event handler called when auto-focusing on open.
* Can be prevented.
*/
onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
/**
* Event handler called when auto-focusing on close.
* Can be prevented.
*/
onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
}
type PrimitiveHeading2Props = Radix.ComponentPropsWithoutRef<typeof Primitive.h2>;
export interface DialogTitleProps extends PrimitiveHeading2Props {
}
export const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
type PrimitiveParagraphProps = Radix.ComponentPropsWithoutRef<typeof Primitive.p>;
export interface DialogDescriptionProps extends PrimitiveParagraphProps {
}
export const DialogDescription: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
export interface DialogCloseProps extends PrimitiveButtonProps {
}
export const DialogClose: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
export const WarningProvider: {
(props: {
contentName: string;
titleName: string;
docsSlug: string;
} & {
children: React.ReactNode;
}): JSX.Element;
displayName: string;
};
export const Root: React.FC<DialogProps>;
export const Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
export const Portal: React.FC<DialogPortalProps>;
export const Overlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
export const Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
export const Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
export const Description: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
export const Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,105 @@
import * as React from "react";
import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
import { FocusScope } from "@radix-ui/react-focus-scope";
import { Portal as _Portal1 } from "@radix-ui/react-portal";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
export const createDialogScope: import("@radix-ui/react-context").CreateScope;
export interface DialogProps {
children?: React.ReactNode;
open?: boolean;
defaultOpen?: boolean;
onOpenChange?(open: boolean): void;
modal?: boolean;
}
export const Dialog: React.FC<DialogProps>;
type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;
export interface DialogTriggerProps extends PrimitiveButtonProps {
}
export const DialogTrigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
type PortalProps = React.ComponentPropsWithoutRef<typeof _Portal1>;
export interface DialogPortalProps {
children?: React.ReactNode;
/**
* Specify a container element to portal the content into.
*/
container?: PortalProps['container'];
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
export const DialogPortal: React.FC<DialogPortalProps>;
export interface DialogOverlayProps extends DialogOverlayImplProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
export const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
interface DialogOverlayImplProps extends PrimitiveDivProps {
}
export interface DialogContentProps extends DialogContentTypeProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
export const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
interface DialogContentTypeProps extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {
}
type DismissableLayerProps = Radix.ComponentPropsWithoutRef<typeof DismissableLayer>;
type FocusScopeProps = Radix.ComponentPropsWithoutRef<typeof FocusScope>;
interface DialogContentImplProps extends Omit<DismissableLayerProps, 'onDismiss'> {
/**
* When `true`, focus cannot escape the `Content` via keyboard,
* pointer, or a programmatic focus.
* @defaultValue false
*/
trapFocus?: FocusScopeProps['trapped'];
/**
* Event handler called when auto-focusing on open.
* Can be prevented.
*/
onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
/**
* Event handler called when auto-focusing on close.
* Can be prevented.
*/
onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
}
type PrimitiveHeading2Props = Radix.ComponentPropsWithoutRef<typeof Primitive.h2>;
export interface DialogTitleProps extends PrimitiveHeading2Props {
}
export const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
type PrimitiveParagraphProps = Radix.ComponentPropsWithoutRef<typeof Primitive.p>;
export interface DialogDescriptionProps extends PrimitiveParagraphProps {
}
export const DialogDescription: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
export interface DialogCloseProps extends PrimitiveButtonProps {
}
export const DialogClose: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
export const WarningProvider: {
(props: {
contentName: string;
titleName: string;
docsSlug: string;
} & {
children: React.ReactNode;
}): JSX.Element;
displayName: string;
};
export const Root: React.FC<DialogProps>;
export const Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
export const Portal: React.FC<DialogPortalProps>;
export const Overlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
export const Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
export const Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
export const Description: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
export const Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":";;;;;;AA0BA,OAAA,wFAAgF,CAAC;AAgBjF;IACE,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,OAAA,MAAM,QAAQ,MAAM,EAAE,CAAC,WAAW,CAiCjC,CAAC;AAWF,4BAA4B,MAAM,wBAAwB,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AACpF,mCAA6B,SAAQ,oBAAoB;CAAG;AAE5D,OAAA,MAAM,2GAkBL,CAAC;AAeF,mBAAmB,MAAM,wBAAwB,CAAC,eAAsB,CAAC,CAAC;AAC1E;IACE,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,cAAc,MAAM,EAAE,CAAC,iBAAiB,CAc7C,CAAC;AAWF,mCAA6B,SAAQ,sBAAsB;IACzD;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,wGAWL,CAAC;AAKF,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,gCAAiC,SAAQ,iBAAiB;CAAG;AA6B7D,mCAA6B,SAAQ,sBAAsB;IACzD;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,wGAeL,CAAC;AAOF,gCACE,SAAQ,IAAI,CAAC,sBAAsB,EAAE,WAAW,GAAG,6BAA6B,CAAC;CAAG;AAwGtF,6BAA6B,MAAM,wBAAwB,CAAC,uBAAuB,CAAC,CAAC;AACrF,uBAAuB,MAAM,wBAAwB,CAAC,iBAAiB,CAAC,CAAC;AACzE,gCAAiC,SAAQ,IAAI,CAAC,qBAAqB,EAAE,WAAW,CAAC;IAC/E;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAEvC;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IAEtD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;CAC1D;AAmDD,8BAA8B,MAAM,wBAAwB,CAAC,OAAO,UAAU,EAAE,CAAC,CAAC;AAClF,iCAA2B,SAAQ,sBAAsB;CAAG;AAE5D,OAAA,MAAM,wGAML,CAAC;AAWF,+BAA+B,MAAM,wBAAwB,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;AAClF,uCAAiC,SAAQ,uBAAuB;CAAG;AAEnE,OAAA,MAAM,sHAML,CAAC;AAWF,iCAA2B,SAAQ,oBAAoB;CAAG;AAE1D,OAAA,MAAM,uGAaL,CAAC;AAYF,OAAA;;;;;;;;;CAIE,CAAC;AA8CH,OAAA,MAAM,2BAAa,CAAC;AACpB,OAAA,MAAM,qGAAuB,CAAC;AAC9B,OAAA,MAAM,mCAAqB,CAAC;AAC5B,OAAA,MAAM,kGAAuB,CAAC;AAC9B,OAAA,MAAM,kGAAuB,CAAC;AAC9B,OAAA,MAAM,kGAAmB,CAAC;AAC1B,OAAA,MAAM,gHAA+B,CAAC;AACtC,OAAA,MAAM,iGAAmB,CAAC","sources":["packages/react/dialog/src/packages/react/dialog/src/Dialog.tsx","packages/react/dialog/src/packages/react/dialog/src/index.ts","packages/react/dialog/src/index.ts"],"sourcesContent":[null,null,"export {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n Root,\n Trigger,\n Portal,\n Overlay,\n Content,\n Title,\n Description,\n Close,\n //\n WarningProvider,\n} from './Dialog';\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n} from './Dialog';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,389 @@
var $aJCrN$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
var $aJCrN$react = require("react");
var $aJCrN$radixuiprimitive = require("@radix-ui/primitive");
var $aJCrN$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
var $aJCrN$radixuireactcontext = require("@radix-ui/react-context");
var $aJCrN$radixuireactid = require("@radix-ui/react-id");
var $aJCrN$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
var $aJCrN$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-layer");
var $aJCrN$radixuireactfocusscope = require("@radix-ui/react-focus-scope");
var $aJCrN$radixuireactportal = require("@radix-ui/react-portal");
var $aJCrN$radixuireactpresence = require("@radix-ui/react-presence");
var $aJCrN$radixuireactprimitive = require("@radix-ui/react-primitive");
var $aJCrN$radixuireactfocusguards = require("@radix-ui/react-focus-guards");
var $aJCrN$reactremovescroll = require("react-remove-scroll");
var $aJCrN$ariahidden = require("aria-hidden");
var $aJCrN$radixuireactslot = require("@radix-ui/react-slot");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "createDialogScope", () => $f4833395aa1bca1a$export$cc702773b8ea3e41);
$parcel$export(module.exports, "Dialog", () => $f4833395aa1bca1a$export$3ddf2d174ce01153);
$parcel$export(module.exports, "DialogTrigger", () => $f4833395aa1bca1a$export$2e1e1122cf0cba88);
$parcel$export(module.exports, "DialogPortal", () => $f4833395aa1bca1a$export$dad7c95542bacce0);
$parcel$export(module.exports, "DialogOverlay", () => $f4833395aa1bca1a$export$bd1d06c79be19e17);
$parcel$export(module.exports, "DialogContent", () => $f4833395aa1bca1a$export$b6d9565de1e068cf);
$parcel$export(module.exports, "DialogTitle", () => $f4833395aa1bca1a$export$16f7638e4a34b909);
$parcel$export(module.exports, "DialogDescription", () => $f4833395aa1bca1a$export$94e94c2ec2c954d5);
$parcel$export(module.exports, "DialogClose", () => $f4833395aa1bca1a$export$fba2fb7cd781b7ac);
$parcel$export(module.exports, "Root", () => $f4833395aa1bca1a$export$be92b6f5f03c0fe9);
$parcel$export(module.exports, "Trigger", () => $f4833395aa1bca1a$export$41fb9f06171c75f4);
$parcel$export(module.exports, "Portal", () => $f4833395aa1bca1a$export$602eac185826482c);
$parcel$export(module.exports, "Overlay", () => $f4833395aa1bca1a$export$c6fdb837b070b4ff);
$parcel$export(module.exports, "Content", () => $f4833395aa1bca1a$export$7c6e2c02157bb7d2);
$parcel$export(module.exports, "Title", () => $f4833395aa1bca1a$export$f99233281efd08a0);
$parcel$export(module.exports, "Description", () => $f4833395aa1bca1a$export$393edc798c47379d);
$parcel$export(module.exports, "Close", () => $f4833395aa1bca1a$export$f39c2d165cd861fe);
$parcel$export(module.exports, "WarningProvider", () => $f4833395aa1bca1a$export$69b62a49393917d6);
/* -------------------------------------------------------------------------------------------------
* Dialog
* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$DIALOG_NAME = 'Dialog';
const [$f4833395aa1bca1a$var$createDialogContext, $f4833395aa1bca1a$export$cc702773b8ea3e41] = $aJCrN$radixuireactcontext.createContextScope($f4833395aa1bca1a$var$DIALOG_NAME);
const [$f4833395aa1bca1a$var$DialogProvider, $f4833395aa1bca1a$var$useDialogContext] = $f4833395aa1bca1a$var$createDialogContext($f4833395aa1bca1a$var$DIALOG_NAME);
const $f4833395aa1bca1a$export$3ddf2d174ce01153 = (props)=>{
const { __scopeDialog: __scopeDialog , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , modal: modal = true } = props;
const triggerRef = $aJCrN$react.useRef(null);
const contentRef = $aJCrN$react.useRef(null);
const [open = false, setOpen] = $aJCrN$radixuireactusecontrollablestate.useControllableState({
prop: openProp,
defaultProp: defaultOpen,
onChange: onOpenChange
});
return /*#__PURE__*/ $aJCrN$react.createElement($f4833395aa1bca1a$var$DialogProvider, {
scope: __scopeDialog,
triggerRef: triggerRef,
contentRef: contentRef,
contentId: $aJCrN$radixuireactid.useId(),
titleId: $aJCrN$radixuireactid.useId(),
descriptionId: $aJCrN$radixuireactid.useId(),
open: open,
onOpenChange: setOpen,
onOpenToggle: $aJCrN$react.useCallback(()=>setOpen((prevOpen)=>!prevOpen
)
, [
setOpen
]),
modal: modal
}, children);
};
/*#__PURE__*/ Object.assign($f4833395aa1bca1a$export$3ddf2d174ce01153, {
displayName: $f4833395aa1bca1a$var$DIALOG_NAME
});
/* -------------------------------------------------------------------------------------------------
* DialogTrigger
* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$TRIGGER_NAME = 'DialogTrigger';
const $f4833395aa1bca1a$export$2e1e1122cf0cba88 = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , ...triggerProps } = props;
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$TRIGGER_NAME, __scopeDialog);
const composedTriggerRef = $aJCrN$radixuireactcomposerefs.useComposedRefs(forwardedRef, context.triggerRef);
return /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": context.open,
"aria-controls": context.contentId,
"data-state": $f4833395aa1bca1a$var$getState(context.open)
}, triggerProps, {
ref: composedTriggerRef,
onClick: $aJCrN$radixuiprimitive.composeEventHandlers(props.onClick, context.onOpenToggle)
}));
});
/*#__PURE__*/ Object.assign($f4833395aa1bca1a$export$2e1e1122cf0cba88, {
displayName: $f4833395aa1bca1a$var$TRIGGER_NAME
});
/* -------------------------------------------------------------------------------------------------
* DialogPortal
* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$PORTAL_NAME = 'DialogPortal';
const [$f4833395aa1bca1a$var$PortalProvider, $f4833395aa1bca1a$var$usePortalContext] = $f4833395aa1bca1a$var$createDialogContext($f4833395aa1bca1a$var$PORTAL_NAME, {
forceMount: undefined
});
const $f4833395aa1bca1a$export$dad7c95542bacce0 = (props)=>{
const { __scopeDialog: __scopeDialog , forceMount: forceMount , children: children , container: container } = props;
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$PORTAL_NAME, __scopeDialog);
return /*#__PURE__*/ $aJCrN$react.createElement($f4833395aa1bca1a$var$PortalProvider, {
scope: __scopeDialog,
forceMount: forceMount
}, $aJCrN$react.Children.map(children, (child)=>/*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactpresence.Presence, {
present: forceMount || context.open
}, /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactportal.Portal, {
asChild: true,
container: container
}, child))
));
};
/*#__PURE__*/ Object.assign($f4833395aa1bca1a$export$dad7c95542bacce0, {
displayName: $f4833395aa1bca1a$var$PORTAL_NAME
});
/* -------------------------------------------------------------------------------------------------
* DialogOverlay
* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$OVERLAY_NAME = 'DialogOverlay';
const $f4833395aa1bca1a$export$bd1d06c79be19e17 = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
const portalContext = $f4833395aa1bca1a$var$usePortalContext($f4833395aa1bca1a$var$OVERLAY_NAME, props.__scopeDialog);
const { forceMount: forceMount = portalContext.forceMount , ...overlayProps } = props;
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$OVERLAY_NAME, props.__scopeDialog);
return context.modal ? /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactpresence.Presence, {
present: forceMount || context.open
}, /*#__PURE__*/ $aJCrN$react.createElement($f4833395aa1bca1a$var$DialogOverlayImpl, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({}, overlayProps, {
ref: forwardedRef
}))) : null;
});
/*#__PURE__*/ Object.assign($f4833395aa1bca1a$export$bd1d06c79be19e17, {
displayName: $f4833395aa1bca1a$var$OVERLAY_NAME
});
const $f4833395aa1bca1a$var$DialogOverlayImpl = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , ...overlayProps } = props;
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$OVERLAY_NAME, __scopeDialog);
return(/*#__PURE__*/ // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
// ie. when `Overlay` and `Content` are siblings
$aJCrN$react.createElement($aJCrN$reactremovescroll.RemoveScroll, {
as: $aJCrN$radixuireactslot.Slot,
allowPinchZoom: true,
shards: [
context.contentRef
]
}, /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({
"data-state": $f4833395aa1bca1a$var$getState(context.open)
}, overlayProps, {
ref: forwardedRef // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.
,
style: {
pointerEvents: 'auto',
...overlayProps.style
}
}))));
});
/* -------------------------------------------------------------------------------------------------
* DialogContent
* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$CONTENT_NAME = 'DialogContent';
const $f4833395aa1bca1a$export$b6d9565de1e068cf = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
const portalContext = $f4833395aa1bca1a$var$usePortalContext($f4833395aa1bca1a$var$CONTENT_NAME, props.__scopeDialog);
const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$CONTENT_NAME, props.__scopeDialog);
return /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactpresence.Presence, {
present: forceMount || context.open
}, context.modal ? /*#__PURE__*/ $aJCrN$react.createElement($f4833395aa1bca1a$var$DialogContentModal, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({}, contentProps, {
ref: forwardedRef
})) : /*#__PURE__*/ $aJCrN$react.createElement($f4833395aa1bca1a$var$DialogContentNonModal, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({}, contentProps, {
ref: forwardedRef
})));
});
/*#__PURE__*/ Object.assign($f4833395aa1bca1a$export$b6d9565de1e068cf, {
displayName: $f4833395aa1bca1a$var$CONTENT_NAME
});
/* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$DialogContentModal = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$CONTENT_NAME, props.__scopeDialog);
const contentRef = $aJCrN$react.useRef(null);
const composedRefs = $aJCrN$radixuireactcomposerefs.useComposedRefs(forwardedRef, context.contentRef, contentRef); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
$aJCrN$react.useEffect(()=>{
const content = contentRef.current;
if (content) return $aJCrN$ariahidden.hideOthers(content);
}, []);
return /*#__PURE__*/ $aJCrN$react.createElement($f4833395aa1bca1a$var$DialogContentImpl, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({}, props, {
ref: composedRefs // we make sure focus isn't trapped once `DialogContent` has been closed
,
trapFocus: context.open,
disableOutsidePointerEvents: true,
onCloseAutoFocus: $aJCrN$radixuiprimitive.composeEventHandlers(props.onCloseAutoFocus, (event)=>{
var _context$triggerRef$c;
event.preventDefault();
(_context$triggerRef$c = context.triggerRef.current) === null || _context$triggerRef$c === void 0 || _context$triggerRef$c.focus();
}),
onPointerDownOutside: $aJCrN$radixuiprimitive.composeEventHandlers(props.onPointerDownOutside, (event)=>{
const originalEvent = event.detail.originalEvent;
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
const isRightClick = originalEvent.button === 2 || ctrlLeftClick; // If the event is a right-click, we shouldn't close because
// it is effectively as if we right-clicked the `Overlay`.
if (isRightClick) event.preventDefault();
}) // When focus is trapped, a `focusout` event may still happen.
,
onFocusOutside: $aJCrN$radixuiprimitive.composeEventHandlers(props.onFocusOutside, (event)=>event.preventDefault()
)
}));
});
/* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$DialogContentNonModal = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$CONTENT_NAME, props.__scopeDialog);
const hasInteractedOutsideRef = $aJCrN$react.useRef(false);
const hasPointerDownOutsideRef = $aJCrN$react.useRef(false);
return /*#__PURE__*/ $aJCrN$react.createElement($f4833395aa1bca1a$var$DialogContentImpl, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({}, props, {
ref: forwardedRef,
trapFocus: false,
disableOutsidePointerEvents: false,
onCloseAutoFocus: (event)=>{
var _props$onCloseAutoFoc;
(_props$onCloseAutoFoc = props.onCloseAutoFocus) === null || _props$onCloseAutoFoc === void 0 || _props$onCloseAutoFoc.call(props, event);
if (!event.defaultPrevented) {
var _context$triggerRef$c2;
if (!hasInteractedOutsideRef.current) (_context$triggerRef$c2 = context.triggerRef.current) === null || _context$triggerRef$c2 === void 0 || _context$triggerRef$c2.focus(); // Always prevent auto focus because we either focus manually or want user agent focus
event.preventDefault();
}
hasInteractedOutsideRef.current = false;
hasPointerDownOutsideRef.current = false;
},
onInteractOutside: (event)=>{
var _props$onInteractOuts, _context$triggerRef$c3;
(_props$onInteractOuts = props.onInteractOutside) === null || _props$onInteractOuts === void 0 || _props$onInteractOuts.call(props, event);
if (!event.defaultPrevented) {
hasInteractedOutsideRef.current = true;
if (event.detail.originalEvent.type === 'pointerdown') hasPointerDownOutsideRef.current = true;
} // Prevent dismissing when clicking the trigger.
// As the trigger is already setup to close, without doing so would
// cause it to close and immediately open.
const target = event.target;
const targetIsTrigger = (_context$triggerRef$c3 = context.triggerRef.current) === null || _context$triggerRef$c3 === void 0 ? void 0 : _context$triggerRef$c3.contains(target);
if (targetIsTrigger) event.preventDefault(); // On Safari if the trigger is inside a container with tabIndex={0}, when clicked
// we will get the pointer down outside event on the trigger, but then a subsequent
// focus outside event on the container, we ignore any focus outside event when we've
// already had a pointer down outside event.
if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.current) event.preventDefault();
}
}));
});
/* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$DialogContentImpl = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , ...contentProps } = props;
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$CONTENT_NAME, __scopeDialog);
const contentRef = $aJCrN$react.useRef(null);
const composedRefs = $aJCrN$radixuireactcomposerefs.useComposedRefs(forwardedRef, contentRef); // Make sure the whole tree has focus guards as our `Dialog` will be
// the last element in the DOM (beacuse of the `Portal`)
$aJCrN$radixuireactfocusguards.useFocusGuards();
return /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$react.Fragment, null, /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactfocusscope.FocusScope, {
asChild: true,
loop: true,
trapped: trapFocus,
onMountAutoFocus: onOpenAutoFocus,
onUnmountAutoFocus: onCloseAutoFocus
}, /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactdismissablelayer.DismissableLayer, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({
role: "dialog",
id: context.contentId,
"aria-describedby": context.descriptionId,
"aria-labelledby": context.titleId,
"data-state": $f4833395aa1bca1a$var$getState(context.open)
}, contentProps, {
ref: composedRefs,
onDismiss: ()=>context.onOpenChange(false)
}))), false);
});
/* -------------------------------------------------------------------------------------------------
* DialogTitle
* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$TITLE_NAME = 'DialogTitle';
const $f4833395aa1bca1a$export$16f7638e4a34b909 = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , ...titleProps } = props;
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$TITLE_NAME, __scopeDialog);
return /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactprimitive.Primitive.h2, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({
id: context.titleId
}, titleProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($f4833395aa1bca1a$export$16f7638e4a34b909, {
displayName: $f4833395aa1bca1a$var$TITLE_NAME
});
/* -------------------------------------------------------------------------------------------------
* DialogDescription
* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$DESCRIPTION_NAME = 'DialogDescription';
const $f4833395aa1bca1a$export$94e94c2ec2c954d5 = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , ...descriptionProps } = props;
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$DESCRIPTION_NAME, __scopeDialog);
return /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactprimitive.Primitive.p, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({
id: context.descriptionId
}, descriptionProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($f4833395aa1bca1a$export$94e94c2ec2c954d5, {
displayName: $f4833395aa1bca1a$var$DESCRIPTION_NAME
});
/* -------------------------------------------------------------------------------------------------
* DialogClose
* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$CLOSE_NAME = 'DialogClose';
const $f4833395aa1bca1a$export$fba2fb7cd781b7ac = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , ...closeProps } = props;
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$CLOSE_NAME, __scopeDialog);
return /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({
type: "button"
}, closeProps, {
ref: forwardedRef,
onClick: $aJCrN$radixuiprimitive.composeEventHandlers(props.onClick, ()=>context.onOpenChange(false)
)
}));
});
/*#__PURE__*/ Object.assign($f4833395aa1bca1a$export$fba2fb7cd781b7ac, {
displayName: $f4833395aa1bca1a$var$CLOSE_NAME
});
/* -----------------------------------------------------------------------------------------------*/ function $f4833395aa1bca1a$var$getState(open) {
return open ? 'open' : 'closed';
}
const $f4833395aa1bca1a$var$TITLE_WARNING_NAME = 'DialogTitleWarning';
const [$f4833395aa1bca1a$export$69b62a49393917d6, $f4833395aa1bca1a$var$useWarningContext] = $aJCrN$radixuireactcontext.createContext($f4833395aa1bca1a$var$TITLE_WARNING_NAME, {
contentName: $f4833395aa1bca1a$var$CONTENT_NAME,
titleName: $f4833395aa1bca1a$var$TITLE_NAME,
docsSlug: 'dialog'
});
const $f4833395aa1bca1a$var$TitleWarning = ({ titleId: titleId })=>{
const titleWarningContext = $f4833395aa1bca1a$var$useWarningContext($f4833395aa1bca1a$var$TITLE_WARNING_NAME);
const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
$aJCrN$react.useEffect(()=>{
if (titleId) {
const hasTitle = document.getElementById(titleId);
if (!hasTitle) throw new Error(MESSAGE);
}
}, [
MESSAGE,
titleId
]);
return null;
};
const $f4833395aa1bca1a$var$DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning';
const $f4833395aa1bca1a$var$DescriptionWarning = ({ contentRef: contentRef , descriptionId: descriptionId })=>{
const descriptionWarningContext = $f4833395aa1bca1a$var$useWarningContext($f4833395aa1bca1a$var$DESCRIPTION_WARNING_NAME);
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
$aJCrN$react.useEffect(()=>{
var _contentRef$current;
const describedById = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.getAttribute('aria-describedby'); // if we have an id and the user hasn't set aria-describedby={undefined}
if (descriptionId && describedById) {
const hasDescription = document.getElementById(descriptionId);
if (!hasDescription) console.warn(MESSAGE);
}
}, [
MESSAGE,
contentRef,
descriptionId
]);
return null;
};
const $f4833395aa1bca1a$export$be92b6f5f03c0fe9 = $f4833395aa1bca1a$export$3ddf2d174ce01153;
const $f4833395aa1bca1a$export$41fb9f06171c75f4 = $f4833395aa1bca1a$export$2e1e1122cf0cba88;
const $f4833395aa1bca1a$export$602eac185826482c = $f4833395aa1bca1a$export$dad7c95542bacce0;
const $f4833395aa1bca1a$export$c6fdb837b070b4ff = $f4833395aa1bca1a$export$bd1d06c79be19e17;
const $f4833395aa1bca1a$export$7c6e2c02157bb7d2 = $f4833395aa1bca1a$export$b6d9565de1e068cf;
const $f4833395aa1bca1a$export$f99233281efd08a0 = $f4833395aa1bca1a$export$16f7638e4a34b909;
const $f4833395aa1bca1a$export$393edc798c47379d = $f4833395aa1bca1a$export$94e94c2ec2c954d5;
const $f4833395aa1bca1a$export$f39c2d165cd861fe = $f4833395aa1bca1a$export$fba2fb7cd781b7ac;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,365 @@
import $67UHm$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
import {useRef as $67UHm$useRef, createElement as $67UHm$createElement, useCallback as $67UHm$useCallback, forwardRef as $67UHm$forwardRef, Children as $67UHm$Children, useEffect as $67UHm$useEffect, Fragment as $67UHm$Fragment} from "react";
import {composeEventHandlers as $67UHm$composeEventHandlers} from "@radix-ui/primitive";
import {useComposedRefs as $67UHm$useComposedRefs} from "@radix-ui/react-compose-refs";
import {createContextScope as $67UHm$createContextScope, createContext as $67UHm$createContext} from "@radix-ui/react-context";
import {useId as $67UHm$useId} from "@radix-ui/react-id";
import {useControllableState as $67UHm$useControllableState} from "@radix-ui/react-use-controllable-state";
import {DismissableLayer as $67UHm$DismissableLayer} from "@radix-ui/react-dismissable-layer";
import {FocusScope as $67UHm$FocusScope} from "@radix-ui/react-focus-scope";
import {Portal as $67UHm$Portal} from "@radix-ui/react-portal";
import {Presence as $67UHm$Presence} from "@radix-ui/react-presence";
import {Primitive as $67UHm$Primitive} from "@radix-ui/react-primitive";
import {useFocusGuards as $67UHm$useFocusGuards} from "@radix-ui/react-focus-guards";
import {RemoveScroll as $67UHm$RemoveScroll} from "react-remove-scroll";
import {hideOthers as $67UHm$hideOthers} from "aria-hidden";
import {Slot as $67UHm$Slot} from "@radix-ui/react-slot";
/* -------------------------------------------------------------------------------------------------
* Dialog
* -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$DIALOG_NAME = 'Dialog';
const [$5d3850c4d0b4e6c7$var$createDialogContext, $5d3850c4d0b4e6c7$export$cc702773b8ea3e41] = $67UHm$createContextScope($5d3850c4d0b4e6c7$var$DIALOG_NAME);
const [$5d3850c4d0b4e6c7$var$DialogProvider, $5d3850c4d0b4e6c7$var$useDialogContext] = $5d3850c4d0b4e6c7$var$createDialogContext($5d3850c4d0b4e6c7$var$DIALOG_NAME);
const $5d3850c4d0b4e6c7$export$3ddf2d174ce01153 = (props)=>{
const { __scopeDialog: __scopeDialog , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , modal: modal = true } = props;
const triggerRef = $67UHm$useRef(null);
const contentRef = $67UHm$useRef(null);
const [open = false, setOpen] = $67UHm$useControllableState({
prop: openProp,
defaultProp: defaultOpen,
onChange: onOpenChange
});
return /*#__PURE__*/ $67UHm$createElement($5d3850c4d0b4e6c7$var$DialogProvider, {
scope: __scopeDialog,
triggerRef: triggerRef,
contentRef: contentRef,
contentId: $67UHm$useId(),
titleId: $67UHm$useId(),
descriptionId: $67UHm$useId(),
open: open,
onOpenChange: setOpen,
onOpenToggle: $67UHm$useCallback(()=>setOpen((prevOpen)=>!prevOpen
)
, [
setOpen
]),
modal: modal
}, children);
};
/*#__PURE__*/ Object.assign($5d3850c4d0b4e6c7$export$3ddf2d174ce01153, {
displayName: $5d3850c4d0b4e6c7$var$DIALOG_NAME
});
/* -------------------------------------------------------------------------------------------------
* DialogTrigger
* -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$TRIGGER_NAME = 'DialogTrigger';
const $5d3850c4d0b4e6c7$export$2e1e1122cf0cba88 = /*#__PURE__*/ $67UHm$forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , ...triggerProps } = props;
const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$TRIGGER_NAME, __scopeDialog);
const composedTriggerRef = $67UHm$useComposedRefs(forwardedRef, context.triggerRef);
return /*#__PURE__*/ $67UHm$createElement($67UHm$Primitive.button, $67UHm$babelruntimehelpersesmextends({
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": context.open,
"aria-controls": context.contentId,
"data-state": $5d3850c4d0b4e6c7$var$getState(context.open)
}, triggerProps, {
ref: composedTriggerRef,
onClick: $67UHm$composeEventHandlers(props.onClick, context.onOpenToggle)
}));
});
/*#__PURE__*/ Object.assign($5d3850c4d0b4e6c7$export$2e1e1122cf0cba88, {
displayName: $5d3850c4d0b4e6c7$var$TRIGGER_NAME
});
/* -------------------------------------------------------------------------------------------------
* DialogPortal
* -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$PORTAL_NAME = 'DialogPortal';
const [$5d3850c4d0b4e6c7$var$PortalProvider, $5d3850c4d0b4e6c7$var$usePortalContext] = $5d3850c4d0b4e6c7$var$createDialogContext($5d3850c4d0b4e6c7$var$PORTAL_NAME, {
forceMount: undefined
});
const $5d3850c4d0b4e6c7$export$dad7c95542bacce0 = (props)=>{
const { __scopeDialog: __scopeDialog , forceMount: forceMount , children: children , container: container } = props;
const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$PORTAL_NAME, __scopeDialog);
return /*#__PURE__*/ $67UHm$createElement($5d3850c4d0b4e6c7$var$PortalProvider, {
scope: __scopeDialog,
forceMount: forceMount
}, $67UHm$Children.map(children, (child)=>/*#__PURE__*/ $67UHm$createElement($67UHm$Presence, {
present: forceMount || context.open
}, /*#__PURE__*/ $67UHm$createElement($67UHm$Portal, {
asChild: true,
container: container
}, child))
));
};
/*#__PURE__*/ Object.assign($5d3850c4d0b4e6c7$export$dad7c95542bacce0, {
displayName: $5d3850c4d0b4e6c7$var$PORTAL_NAME
});
/* -------------------------------------------------------------------------------------------------
* DialogOverlay
* -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$OVERLAY_NAME = 'DialogOverlay';
const $5d3850c4d0b4e6c7$export$bd1d06c79be19e17 = /*#__PURE__*/ $67UHm$forwardRef((props, forwardedRef)=>{
const portalContext = $5d3850c4d0b4e6c7$var$usePortalContext($5d3850c4d0b4e6c7$var$OVERLAY_NAME, props.__scopeDialog);
const { forceMount: forceMount = portalContext.forceMount , ...overlayProps } = props;
const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$OVERLAY_NAME, props.__scopeDialog);
return context.modal ? /*#__PURE__*/ $67UHm$createElement($67UHm$Presence, {
present: forceMount || context.open
}, /*#__PURE__*/ $67UHm$createElement($5d3850c4d0b4e6c7$var$DialogOverlayImpl, $67UHm$babelruntimehelpersesmextends({}, overlayProps, {
ref: forwardedRef
}))) : null;
});
/*#__PURE__*/ Object.assign($5d3850c4d0b4e6c7$export$bd1d06c79be19e17, {
displayName: $5d3850c4d0b4e6c7$var$OVERLAY_NAME
});
const $5d3850c4d0b4e6c7$var$DialogOverlayImpl = /*#__PURE__*/ $67UHm$forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , ...overlayProps } = props;
const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$OVERLAY_NAME, __scopeDialog);
return(/*#__PURE__*/ // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
// ie. when `Overlay` and `Content` are siblings
$67UHm$createElement($67UHm$RemoveScroll, {
as: $67UHm$Slot,
allowPinchZoom: true,
shards: [
context.contentRef
]
}, /*#__PURE__*/ $67UHm$createElement($67UHm$Primitive.div, $67UHm$babelruntimehelpersesmextends({
"data-state": $5d3850c4d0b4e6c7$var$getState(context.open)
}, overlayProps, {
ref: forwardedRef // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.
,
style: {
pointerEvents: 'auto',
...overlayProps.style
}
}))));
});
/* -------------------------------------------------------------------------------------------------
* DialogContent
* -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$CONTENT_NAME = 'DialogContent';
const $5d3850c4d0b4e6c7$export$b6d9565de1e068cf = /*#__PURE__*/ $67UHm$forwardRef((props, forwardedRef)=>{
const portalContext = $5d3850c4d0b4e6c7$var$usePortalContext($5d3850c4d0b4e6c7$var$CONTENT_NAME, props.__scopeDialog);
const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$CONTENT_NAME, props.__scopeDialog);
return /*#__PURE__*/ $67UHm$createElement($67UHm$Presence, {
present: forceMount || context.open
}, context.modal ? /*#__PURE__*/ $67UHm$createElement($5d3850c4d0b4e6c7$var$DialogContentModal, $67UHm$babelruntimehelpersesmextends({}, contentProps, {
ref: forwardedRef
})) : /*#__PURE__*/ $67UHm$createElement($5d3850c4d0b4e6c7$var$DialogContentNonModal, $67UHm$babelruntimehelpersesmextends({}, contentProps, {
ref: forwardedRef
})));
});
/*#__PURE__*/ Object.assign($5d3850c4d0b4e6c7$export$b6d9565de1e068cf, {
displayName: $5d3850c4d0b4e6c7$var$CONTENT_NAME
});
/* -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$DialogContentModal = /*#__PURE__*/ $67UHm$forwardRef((props, forwardedRef)=>{
const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$CONTENT_NAME, props.__scopeDialog);
const contentRef = $67UHm$useRef(null);
const composedRefs = $67UHm$useComposedRefs(forwardedRef, context.contentRef, contentRef); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
$67UHm$useEffect(()=>{
const content = contentRef.current;
if (content) return $67UHm$hideOthers(content);
}, []);
return /*#__PURE__*/ $67UHm$createElement($5d3850c4d0b4e6c7$var$DialogContentImpl, $67UHm$babelruntimehelpersesmextends({}, props, {
ref: composedRefs // we make sure focus isn't trapped once `DialogContent` has been closed
,
trapFocus: context.open,
disableOutsidePointerEvents: true,
onCloseAutoFocus: $67UHm$composeEventHandlers(props.onCloseAutoFocus, (event)=>{
var _context$triggerRef$c;
event.preventDefault();
(_context$triggerRef$c = context.triggerRef.current) === null || _context$triggerRef$c === void 0 || _context$triggerRef$c.focus();
}),
onPointerDownOutside: $67UHm$composeEventHandlers(props.onPointerDownOutside, (event)=>{
const originalEvent = event.detail.originalEvent;
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
const isRightClick = originalEvent.button === 2 || ctrlLeftClick; // If the event is a right-click, we shouldn't close because
// it is effectively as if we right-clicked the `Overlay`.
if (isRightClick) event.preventDefault();
}) // When focus is trapped, a `focusout` event may still happen.
,
onFocusOutside: $67UHm$composeEventHandlers(props.onFocusOutside, (event)=>event.preventDefault()
)
}));
});
/* -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$DialogContentNonModal = /*#__PURE__*/ $67UHm$forwardRef((props, forwardedRef)=>{
const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$CONTENT_NAME, props.__scopeDialog);
const hasInteractedOutsideRef = $67UHm$useRef(false);
const hasPointerDownOutsideRef = $67UHm$useRef(false);
return /*#__PURE__*/ $67UHm$createElement($5d3850c4d0b4e6c7$var$DialogContentImpl, $67UHm$babelruntimehelpersesmextends({}, props, {
ref: forwardedRef,
trapFocus: false,
disableOutsidePointerEvents: false,
onCloseAutoFocus: (event)=>{
var _props$onCloseAutoFoc;
(_props$onCloseAutoFoc = props.onCloseAutoFocus) === null || _props$onCloseAutoFoc === void 0 || _props$onCloseAutoFoc.call(props, event);
if (!event.defaultPrevented) {
var _context$triggerRef$c2;
if (!hasInteractedOutsideRef.current) (_context$triggerRef$c2 = context.triggerRef.current) === null || _context$triggerRef$c2 === void 0 || _context$triggerRef$c2.focus(); // Always prevent auto focus because we either focus manually or want user agent focus
event.preventDefault();
}
hasInteractedOutsideRef.current = false;
hasPointerDownOutsideRef.current = false;
},
onInteractOutside: (event)=>{
var _props$onInteractOuts, _context$triggerRef$c3;
(_props$onInteractOuts = props.onInteractOutside) === null || _props$onInteractOuts === void 0 || _props$onInteractOuts.call(props, event);
if (!event.defaultPrevented) {
hasInteractedOutsideRef.current = true;
if (event.detail.originalEvent.type === 'pointerdown') hasPointerDownOutsideRef.current = true;
} // Prevent dismissing when clicking the trigger.
// As the trigger is already setup to close, without doing so would
// cause it to close and immediately open.
const target = event.target;
const targetIsTrigger = (_context$triggerRef$c3 = context.triggerRef.current) === null || _context$triggerRef$c3 === void 0 ? void 0 : _context$triggerRef$c3.contains(target);
if (targetIsTrigger) event.preventDefault(); // On Safari if the trigger is inside a container with tabIndex={0}, when clicked
// we will get the pointer down outside event on the trigger, but then a subsequent
// focus outside event on the container, we ignore any focus outside event when we've
// already had a pointer down outside event.
if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.current) event.preventDefault();
}
}));
});
/* -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$DialogContentImpl = /*#__PURE__*/ $67UHm$forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , ...contentProps } = props;
const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$CONTENT_NAME, __scopeDialog);
const contentRef = $67UHm$useRef(null);
const composedRefs = $67UHm$useComposedRefs(forwardedRef, contentRef); // Make sure the whole tree has focus guards as our `Dialog` will be
// the last element in the DOM (beacuse of the `Portal`)
$67UHm$useFocusGuards();
return /*#__PURE__*/ $67UHm$createElement($67UHm$Fragment, null, /*#__PURE__*/ $67UHm$createElement($67UHm$FocusScope, {
asChild: true,
loop: true,
trapped: trapFocus,
onMountAutoFocus: onOpenAutoFocus,
onUnmountAutoFocus: onCloseAutoFocus
}, /*#__PURE__*/ $67UHm$createElement($67UHm$DismissableLayer, $67UHm$babelruntimehelpersesmextends({
role: "dialog",
id: context.contentId,
"aria-describedby": context.descriptionId,
"aria-labelledby": context.titleId,
"data-state": $5d3850c4d0b4e6c7$var$getState(context.open)
}, contentProps, {
ref: composedRefs,
onDismiss: ()=>context.onOpenChange(false)
}))), false);
});
/* -------------------------------------------------------------------------------------------------
* DialogTitle
* -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$TITLE_NAME = 'DialogTitle';
const $5d3850c4d0b4e6c7$export$16f7638e4a34b909 = /*#__PURE__*/ $67UHm$forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , ...titleProps } = props;
const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$TITLE_NAME, __scopeDialog);
return /*#__PURE__*/ $67UHm$createElement($67UHm$Primitive.h2, $67UHm$babelruntimehelpersesmextends({
id: context.titleId
}, titleProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($5d3850c4d0b4e6c7$export$16f7638e4a34b909, {
displayName: $5d3850c4d0b4e6c7$var$TITLE_NAME
});
/* -------------------------------------------------------------------------------------------------
* DialogDescription
* -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$DESCRIPTION_NAME = 'DialogDescription';
const $5d3850c4d0b4e6c7$export$94e94c2ec2c954d5 = /*#__PURE__*/ $67UHm$forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , ...descriptionProps } = props;
const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$DESCRIPTION_NAME, __scopeDialog);
return /*#__PURE__*/ $67UHm$createElement($67UHm$Primitive.p, $67UHm$babelruntimehelpersesmextends({
id: context.descriptionId
}, descriptionProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($5d3850c4d0b4e6c7$export$94e94c2ec2c954d5, {
displayName: $5d3850c4d0b4e6c7$var$DESCRIPTION_NAME
});
/* -------------------------------------------------------------------------------------------------
* DialogClose
* -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$CLOSE_NAME = 'DialogClose';
const $5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac = /*#__PURE__*/ $67UHm$forwardRef((props, forwardedRef)=>{
const { __scopeDialog: __scopeDialog , ...closeProps } = props;
const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$CLOSE_NAME, __scopeDialog);
return /*#__PURE__*/ $67UHm$createElement($67UHm$Primitive.button, $67UHm$babelruntimehelpersesmextends({
type: "button"
}, closeProps, {
ref: forwardedRef,
onClick: $67UHm$composeEventHandlers(props.onClick, ()=>context.onOpenChange(false)
)
}));
});
/*#__PURE__*/ Object.assign($5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac, {
displayName: $5d3850c4d0b4e6c7$var$CLOSE_NAME
});
/* -----------------------------------------------------------------------------------------------*/ function $5d3850c4d0b4e6c7$var$getState(open) {
return open ? 'open' : 'closed';
}
const $5d3850c4d0b4e6c7$var$TITLE_WARNING_NAME = 'DialogTitleWarning';
const [$5d3850c4d0b4e6c7$export$69b62a49393917d6, $5d3850c4d0b4e6c7$var$useWarningContext] = $67UHm$createContext($5d3850c4d0b4e6c7$var$TITLE_WARNING_NAME, {
contentName: $5d3850c4d0b4e6c7$var$CONTENT_NAME,
titleName: $5d3850c4d0b4e6c7$var$TITLE_NAME,
docsSlug: 'dialog'
});
const $5d3850c4d0b4e6c7$var$TitleWarning = ({ titleId: titleId })=>{
const titleWarningContext = $5d3850c4d0b4e6c7$var$useWarningContext($5d3850c4d0b4e6c7$var$TITLE_WARNING_NAME);
const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
$67UHm$useEffect(()=>{
if (titleId) {
const hasTitle = document.getElementById(titleId);
if (!hasTitle) throw new Error(MESSAGE);
}
}, [
MESSAGE,
titleId
]);
return null;
};
const $5d3850c4d0b4e6c7$var$DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning';
const $5d3850c4d0b4e6c7$var$DescriptionWarning = ({ contentRef: contentRef , descriptionId: descriptionId })=>{
const descriptionWarningContext = $5d3850c4d0b4e6c7$var$useWarningContext($5d3850c4d0b4e6c7$var$DESCRIPTION_WARNING_NAME);
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
$67UHm$useEffect(()=>{
var _contentRef$current;
const describedById = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.getAttribute('aria-describedby'); // if we have an id and the user hasn't set aria-describedby={undefined}
if (descriptionId && describedById) {
const hasDescription = document.getElementById(descriptionId);
if (!hasDescription) console.warn(MESSAGE);
}
}, [
MESSAGE,
contentRef,
descriptionId
]);
return null;
};
const $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9 = $5d3850c4d0b4e6c7$export$3ddf2d174ce01153;
const $5d3850c4d0b4e6c7$export$41fb9f06171c75f4 = $5d3850c4d0b4e6c7$export$2e1e1122cf0cba88;
const $5d3850c4d0b4e6c7$export$602eac185826482c = $5d3850c4d0b4e6c7$export$dad7c95542bacce0;
const $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff = $5d3850c4d0b4e6c7$export$bd1d06c79be19e17;
const $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 = $5d3850c4d0b4e6c7$export$b6d9565de1e068cf;
const $5d3850c4d0b4e6c7$export$f99233281efd08a0 = $5d3850c4d0b4e6c7$export$16f7638e4a34b909;
const $5d3850c4d0b4e6c7$export$393edc798c47379d = $5d3850c4d0b4e6c7$export$94e94c2ec2c954d5;
const $5d3850c4d0b4e6c7$export$f39c2d165cd861fe = $5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac;
export {$5d3850c4d0b4e6c7$export$cc702773b8ea3e41 as createDialogScope, $5d3850c4d0b4e6c7$export$3ddf2d174ce01153 as Dialog, $5d3850c4d0b4e6c7$export$2e1e1122cf0cba88 as DialogTrigger, $5d3850c4d0b4e6c7$export$dad7c95542bacce0 as DialogPortal, $5d3850c4d0b4e6c7$export$bd1d06c79be19e17 as DialogOverlay, $5d3850c4d0b4e6c7$export$b6d9565de1e068cf as DialogContent, $5d3850c4d0b4e6c7$export$16f7638e4a34b909 as DialogTitle, $5d3850c4d0b4e6c7$export$94e94c2ec2c954d5 as DialogDescription, $5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac as DialogClose, $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9 as Root, $5d3850c4d0b4e6c7$export$41fb9f06171c75f4 as Trigger, $5d3850c4d0b4e6c7$export$602eac185826482c as Portal, $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff as Overlay, $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 as Content, $5d3850c4d0b4e6c7$export$f99233281efd08a0 as Title, $5d3850c4d0b4e6c7$export$393edc798c47379d as Description, $5d3850c4d0b4e6c7$export$f39c2d165cd861fe as Close, $5d3850c4d0b4e6c7$export$69b62a49393917d6 as WarningProvider};
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,69 @@
{
"name": "@radix-ui/react-dialog",
"version": "1.0.5",
"license": "MIT",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
},
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"clean": "rm -rf dist",
"version": "yarn version"
},
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-dismissable-layer": "1.0.5",
"@radix-ui/react-focus-guards": "1.0.1",
"@radix-ui/react-focus-scope": "1.0.4",
"@radix-ui/react-id": "1.0.1",
"@radix-ui/react-portal": "1.0.4",
"@radix-ui/react-presence": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-slot": "1.0.2",
"@radix-ui/react-use-controllable-state": "1.0.1",
"aria-hidden": "^1.1.1",
"react-remove-scroll": "2.5.5"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}

View File

@@ -0,0 +1,13 @@
# `react-dismissable-layer`
## Installation
```sh
$ yarn add @radix-ui/react-dismissable-layer
# or
$ npm install @radix-ui/react-dismissable-layer
```
## Usage
This is an internal utility, not intended for public usage.

View File

@@ -0,0 +1,51 @@
import * as React from "react";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
export interface DismissableLayerProps extends PrimitiveDivProps {
/**
* When `true`, hover/focus/click interactions will be disabled on elements outside
* the `DismissableLayer`. Users will need to click twice on outside elements to
* interact with them: once to close the `DismissableLayer`, and again to trigger the element.
*/
disableOutsidePointerEvents?: boolean;
/**
* Event handler called when the escape key is down.
* Can be prevented.
*/
onEscapeKeyDown?: (event: KeyboardEvent) => void;
/**
* Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.
* Can be prevented.
*/
onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
/**
* Event handler called when the focus moves outside of the `DismissableLayer`.
* Can be prevented.
*/
onFocusOutside?: (event: FocusOutsideEvent) => void;
/**
* Event handler called when an interaction happens outside the `DismissableLayer`.
* Specifically, when a `pointerdown` event happens outside or focus moves outside of it.
* Can be prevented.
*/
onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
/**
* Handler called when the `DismissableLayer` should be dismissed
*/
onDismiss?: () => void;
}
export const DismissableLayer: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
interface DismissableLayerBranchProps extends PrimitiveDivProps {
}
export const DismissableLayerBranch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
type PointerDownOutsideEvent = CustomEvent<{
originalEvent: PointerEvent;
}>;
type FocusOutsideEvent = CustomEvent<{
originalEvent: FocusEvent;
}>;
export const Root: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
export const Branch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,51 @@
import * as React from "react";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
export interface DismissableLayerProps extends PrimitiveDivProps {
/**
* When `true`, hover/focus/click interactions will be disabled on elements outside
* the `DismissableLayer`. Users will need to click twice on outside elements to
* interact with them: once to close the `DismissableLayer`, and again to trigger the element.
*/
disableOutsidePointerEvents?: boolean;
/**
* Event handler called when the escape key is down.
* Can be prevented.
*/
onEscapeKeyDown?: (event: KeyboardEvent) => void;
/**
* Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.
* Can be prevented.
*/
onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
/**
* Event handler called when the focus moves outside of the `DismissableLayer`.
* Can be prevented.
*/
onFocusOutside?: (event: FocusOutsideEvent) => void;
/**
* Event handler called when an interaction happens outside the `DismissableLayer`.
* Specifically, when a `pointerdown` event happens outside or focus moves outside of it.
* Can be prevented.
*/
onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
/**
* Handler called when the `DismissableLayer` should be dismissed
*/
onDismiss?: () => void;
}
export const DismissableLayer: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
interface DismissableLayerBranchProps extends PrimitiveDivProps {
}
export const DismissableLayerBranch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
type PointerDownOutsideEvent = CustomEvent<{
originalEvent: PointerEvent;
}>;
type FocusOutsideEvent = CustomEvent<{
originalEvent: FocusEvent;
}>;
export const Root: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
export const Branch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":";;;AA2BA,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,sCAAgC,SAAQ,iBAAiB;IACvD;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAChE;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,GAAG,iBAAiB,KAAK,IAAI,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,OAAA,MAAM,8GAkHL,CAAC;AAWF,qCAAsC,SAAQ,iBAAiB;CAAG;AAElE,OAAA,MAAM,0HAmBJ,CAAC;AAMH,+BAA+B,WAAW,CAAC;IAAE,aAAa,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC;AAC5E,yBAAyB,WAAW,CAAC;IAAE,aAAa,EAAE,UAAU,CAAA;CAAE,CAAC,CAAC;AAwIpE,OAAA,MAAM,kGAAuB,CAAC;AAC9B,OAAA,MAAM,0GAA+B,CAAC","sources":["packages/react/dismissable-layer/src/packages/react/dismissable-layer/src/DismissableLayer.tsx","packages/react/dismissable-layer/src/packages/react/dismissable-layer/src/index.ts","packages/react/dismissable-layer/src/index.ts"],"sourcesContent":[null,null,"export {\n DismissableLayer,\n DismissableLayerBranch,\n //\n Root,\n Branch,\n} from './DismissableLayer';\nexport type { DismissableLayerProps } from './DismissableLayer';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,293 @@
var $g2vWm$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
var $g2vWm$react = require("react");
var $g2vWm$radixuiprimitive = require("@radix-ui/primitive");
var $g2vWm$radixuireactprimitive = require("@radix-ui/react-primitive");
var $g2vWm$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
var $g2vWm$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
var $g2vWm$radixuireactuseescapekeydown = require("@radix-ui/react-use-escape-keydown");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "DismissableLayer", () => $d715e0554b679f1f$export$177fb62ff3ec1f22);
$parcel$export(module.exports, "DismissableLayerBranch", () => $d715e0554b679f1f$export$4d5eb2109db14228);
$parcel$export(module.exports, "Root", () => $d715e0554b679f1f$export$be92b6f5f03c0fe9);
$parcel$export(module.exports, "Branch", () => $d715e0554b679f1f$export$aecb2ddcb55c95be);
/* -------------------------------------------------------------------------------------------------
* DismissableLayer
* -----------------------------------------------------------------------------------------------*/ const $d715e0554b679f1f$var$DISMISSABLE_LAYER_NAME = 'DismissableLayer';
const $d715e0554b679f1f$var$CONTEXT_UPDATE = 'dismissableLayer.update';
const $d715e0554b679f1f$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
const $d715e0554b679f1f$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
let $d715e0554b679f1f$var$originalBodyPointerEvents;
const $d715e0554b679f1f$var$DismissableLayerContext = /*#__PURE__*/ $g2vWm$react.createContext({
layers: new Set(),
layersWithOutsidePointerEventsDisabled: new Set(),
branches: new Set()
});
const $d715e0554b679f1f$export$177fb62ff3ec1f22 = /*#__PURE__*/ $g2vWm$react.forwardRef((props, forwardedRef)=>{
var _node$ownerDocument;
const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
const context = $g2vWm$react.useContext($d715e0554b679f1f$var$DismissableLayerContext);
const [node1, setNode] = $g2vWm$react.useState(null);
const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
const [, force] = $g2vWm$react.useState({});
const composedRefs = $g2vWm$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setNode(node)
);
const layers = Array.from(context.layers);
const [highestLayerWithOutsidePointerEventsDisabled] = [
...context.layersWithOutsidePointerEventsDisabled
].slice(-1); // prettier-ignore
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
const index = node1 ? layers.indexOf(node1) : -1;
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
const pointerDownOutside = $d715e0554b679f1f$var$usePointerDownOutside((event)=>{
const target = event.target;
const isPointerDownOnBranch = [
...context.branches
].some((branch)=>branch.contains(target)
);
if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event);
onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
}, ownerDocument);
const focusOutside = $d715e0554b679f1f$var$useFocusOutside((event)=>{
const target = event.target;
const isFocusInBranch = [
...context.branches
].some((branch)=>branch.contains(target)
);
if (isFocusInBranch) return;
onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event);
onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
}, ownerDocument);
$g2vWm$radixuireactuseescapekeydown.useEscapeKeydown((event)=>{
const isHighestLayer = index === context.layers.size - 1;
if (!isHighestLayer) return;
onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
if (!event.defaultPrevented && onDismiss) {
event.preventDefault();
onDismiss();
}
}, ownerDocument);
$g2vWm$react.useEffect(()=>{
if (!node1) return;
if (disableOutsidePointerEvents) {
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
$d715e0554b679f1f$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
ownerDocument.body.style.pointerEvents = 'none';
}
context.layersWithOutsidePointerEventsDisabled.add(node1);
}
context.layers.add(node1);
$d715e0554b679f1f$var$dispatchUpdate();
return ()=>{
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $d715e0554b679f1f$var$originalBodyPointerEvents;
};
}, [
node1,
ownerDocument,
disableOutsidePointerEvents,
context
]);
/**
* We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
* because a change to `disableOutsidePointerEvents` would remove this layer from the stack
* and add it to the end again so the layering order wouldn't be _creation order_.
* We only want them to be removed from context stacks when unmounted.
*/ $g2vWm$react.useEffect(()=>{
return ()=>{
if (!node1) return;
context.layers.delete(node1);
context.layersWithOutsidePointerEventsDisabled.delete(node1);
$d715e0554b679f1f$var$dispatchUpdate();
};
}, [
node1,
context
]);
$g2vWm$react.useEffect(()=>{
const handleUpdate = ()=>force({})
;
document.addEventListener($d715e0554b679f1f$var$CONTEXT_UPDATE, handleUpdate);
return ()=>document.removeEventListener($d715e0554b679f1f$var$CONTEXT_UPDATE, handleUpdate)
;
}, []);
return /*#__PURE__*/ $g2vWm$react.createElement($g2vWm$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($g2vWm$babelruntimehelpersextends))({}, layerProps, {
ref: composedRefs,
style: {
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
...props.style
},
onFocusCapture: $g2vWm$radixuiprimitive.composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
onBlurCapture: $g2vWm$radixuiprimitive.composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
onPointerDownCapture: $g2vWm$radixuiprimitive.composeEventHandlers(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
}));
});
/*#__PURE__*/ Object.assign($d715e0554b679f1f$export$177fb62ff3ec1f22, {
displayName: $d715e0554b679f1f$var$DISMISSABLE_LAYER_NAME
});
/* -------------------------------------------------------------------------------------------------
* DismissableLayerBranch
* -----------------------------------------------------------------------------------------------*/ const $d715e0554b679f1f$var$BRANCH_NAME = 'DismissableLayerBranch';
const $d715e0554b679f1f$export$4d5eb2109db14228 = /*#__PURE__*/ $g2vWm$react.forwardRef((props, forwardedRef)=>{
const context = $g2vWm$react.useContext($d715e0554b679f1f$var$DismissableLayerContext);
const ref = $g2vWm$react.useRef(null);
const composedRefs = $g2vWm$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
$g2vWm$react.useEffect(()=>{
const node = ref.current;
if (node) {
context.branches.add(node);
return ()=>{
context.branches.delete(node);
};
}
}, [
context.branches
]);
return /*#__PURE__*/ $g2vWm$react.createElement($g2vWm$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($g2vWm$babelruntimehelpersextends))({}, props, {
ref: composedRefs
}));
});
/*#__PURE__*/ Object.assign($d715e0554b679f1f$export$4d5eb2109db14228, {
displayName: $d715e0554b679f1f$var$BRANCH_NAME
});
/* -----------------------------------------------------------------------------------------------*/ /**
* Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
* to mimic layer dismissing behaviour present in OS.
* Returns props to pass to the node we want to check for outside events.
*/ function $d715e0554b679f1f$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
const handlePointerDownOutside = $g2vWm$radixuireactusecallbackref.useCallbackRef(onPointerDownOutside);
const isPointerInsideReactTreeRef = $g2vWm$react.useRef(false);
const handleClickRef = $g2vWm$react.useRef(()=>{});
$g2vWm$react.useEffect(()=>{
const handlePointerDown = (event)=>{
if (event.target && !isPointerInsideReactTreeRef.current) {
const eventDetail = {
originalEvent: event
};
function handleAndDispatchPointerDownOutsideEvent() {
$d715e0554b679f1f$var$handleAndDispatchCustomEvent($d715e0554b679f1f$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
discrete: true
});
}
/**
* On touch devices, we need to wait for a click event because browsers implement
* a ~350ms delay between the time the user stops touching the display and when the
* browser executres events. We need to ensure we don't reactivate pointer-events within
* this timeframe otherwise the browser may execute events that should have been prevented.
*
* Additionally, this also lets us deal automatically with cancellations when a click event
* isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
*
* This is why we also continuously remove the previous listener, because we cannot be
* certain that it was raised, and therefore cleaned-up.
*/ if (event.pointerType === 'touch') {
ownerDocument.removeEventListener('click', handleClickRef.current);
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
ownerDocument.addEventListener('click', handleClickRef.current, {
once: true
});
} else handleAndDispatchPointerDownOutsideEvent();
} else // We need to remove the event listener in case the outside click has been canceled.
// See: https://github.com/radix-ui/primitives/issues/2171
ownerDocument.removeEventListener('click', handleClickRef.current);
isPointerInsideReactTreeRef.current = false;
};
/**
* if this hook executes in a component that mounts via a `pointerdown` event, the event
* would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
* this by delaying the event listener registration on the document.
* This is not React specific, but rather how the DOM works, ie:
* ```
* button.addEventListener('pointerdown', () => {
* console.log('I will log');
* document.addEventListener('pointerdown', () => {
* console.log('I will also log');
* })
* });
*/ const timerId = window.setTimeout(()=>{
ownerDocument.addEventListener('pointerdown', handlePointerDown);
}, 0);
return ()=>{
window.clearTimeout(timerId);
ownerDocument.removeEventListener('pointerdown', handlePointerDown);
ownerDocument.removeEventListener('click', handleClickRef.current);
};
}, [
ownerDocument,
handlePointerDownOutside
]);
return {
// ensures we check React component tree (not just DOM tree)
onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true
};
}
/**
* Listens for when focus happens outside a react subtree.
* Returns props to pass to the root (node) of the subtree we want to check.
*/ function $d715e0554b679f1f$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
const handleFocusOutside = $g2vWm$radixuireactusecallbackref.useCallbackRef(onFocusOutside);
const isFocusInsideReactTreeRef = $g2vWm$react.useRef(false);
$g2vWm$react.useEffect(()=>{
const handleFocus = (event)=>{
if (event.target && !isFocusInsideReactTreeRef.current) {
const eventDetail = {
originalEvent: event
};
$d715e0554b679f1f$var$handleAndDispatchCustomEvent($d715e0554b679f1f$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
discrete: false
});
}
};
ownerDocument.addEventListener('focusin', handleFocus);
return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
;
}, [
ownerDocument,
handleFocusOutside
]);
return {
onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true
,
onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false
};
}
function $d715e0554b679f1f$var$dispatchUpdate() {
const event = new CustomEvent($d715e0554b679f1f$var$CONTEXT_UPDATE);
document.dispatchEvent(event);
}
function $d715e0554b679f1f$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete }) {
const target = detail.originalEvent.target;
const event = new CustomEvent(name, {
bubbles: false,
cancelable: true,
detail: detail
});
if (handler) target.addEventListener(name, handler, {
once: true
});
if (discrete) $g2vWm$radixuireactprimitive.dispatchDiscreteCustomEvent(target, event);
else target.dispatchEvent(event);
}
const $d715e0554b679f1f$export$be92b6f5f03c0fe9 = $d715e0554b679f1f$export$177fb62ff3ec1f22;
const $d715e0554b679f1f$export$aecb2ddcb55c95be = $d715e0554b679f1f$export$4d5eb2109db14228;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,283 @@
import $kqwpH$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
import {createContext as $kqwpH$createContext, forwardRef as $kqwpH$forwardRef, useContext as $kqwpH$useContext, useState as $kqwpH$useState, useEffect as $kqwpH$useEffect, createElement as $kqwpH$createElement, useRef as $kqwpH$useRef} from "react";
import {composeEventHandlers as $kqwpH$composeEventHandlers} from "@radix-ui/primitive";
import {Primitive as $kqwpH$Primitive, dispatchDiscreteCustomEvent as $kqwpH$dispatchDiscreteCustomEvent} from "@radix-ui/react-primitive";
import {useComposedRefs as $kqwpH$useComposedRefs} from "@radix-ui/react-compose-refs";
import {useCallbackRef as $kqwpH$useCallbackRef} from "@radix-ui/react-use-callback-ref";
import {useEscapeKeydown as $kqwpH$useEscapeKeydown} from "@radix-ui/react-use-escape-keydown";
/* -------------------------------------------------------------------------------------------------
* DismissableLayer
* -----------------------------------------------------------------------------------------------*/ const $5cb92bef7577960e$var$DISMISSABLE_LAYER_NAME = 'DismissableLayer';
const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
let $5cb92bef7577960e$var$originalBodyPointerEvents;
const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ $kqwpH$createContext({
layers: new Set(),
layersWithOutsidePointerEventsDisabled: new Set(),
branches: new Set()
});
const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ $kqwpH$forwardRef((props, forwardedRef)=>{
var _node$ownerDocument;
const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
const context = $kqwpH$useContext($5cb92bef7577960e$var$DismissableLayerContext);
const [node1, setNode] = $kqwpH$useState(null);
const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
const [, force] = $kqwpH$useState({});
const composedRefs = $kqwpH$useComposedRefs(forwardedRef, (node)=>setNode(node)
);
const layers = Array.from(context.layers);
const [highestLayerWithOutsidePointerEventsDisabled] = [
...context.layersWithOutsidePointerEventsDisabled
].slice(-1); // prettier-ignore
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
const index = node1 ? layers.indexOf(node1) : -1;
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
const pointerDownOutside = $5cb92bef7577960e$var$usePointerDownOutside((event)=>{
const target = event.target;
const isPointerDownOnBranch = [
...context.branches
].some((branch)=>branch.contains(target)
);
if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event);
onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
}, ownerDocument);
const focusOutside = $5cb92bef7577960e$var$useFocusOutside((event)=>{
const target = event.target;
const isFocusInBranch = [
...context.branches
].some((branch)=>branch.contains(target)
);
if (isFocusInBranch) return;
onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event);
onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
}, ownerDocument);
$kqwpH$useEscapeKeydown((event)=>{
const isHighestLayer = index === context.layers.size - 1;
if (!isHighestLayer) return;
onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
if (!event.defaultPrevented && onDismiss) {
event.preventDefault();
onDismiss();
}
}, ownerDocument);
$kqwpH$useEffect(()=>{
if (!node1) return;
if (disableOutsidePointerEvents) {
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
$5cb92bef7577960e$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
ownerDocument.body.style.pointerEvents = 'none';
}
context.layersWithOutsidePointerEventsDisabled.add(node1);
}
context.layers.add(node1);
$5cb92bef7577960e$var$dispatchUpdate();
return ()=>{
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents;
};
}, [
node1,
ownerDocument,
disableOutsidePointerEvents,
context
]);
/**
* We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
* because a change to `disableOutsidePointerEvents` would remove this layer from the stack
* and add it to the end again so the layering order wouldn't be _creation order_.
* We only want them to be removed from context stacks when unmounted.
*/ $kqwpH$useEffect(()=>{
return ()=>{
if (!node1) return;
context.layers.delete(node1);
context.layersWithOutsidePointerEventsDisabled.delete(node1);
$5cb92bef7577960e$var$dispatchUpdate();
};
}, [
node1,
context
]);
$kqwpH$useEffect(()=>{
const handleUpdate = ()=>force({})
;
document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate);
return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate)
;
}, []);
return /*#__PURE__*/ $kqwpH$createElement($kqwpH$Primitive.div, $kqwpH$babelruntimehelpersesmextends({}, layerProps, {
ref: composedRefs,
style: {
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
...props.style
},
onFocusCapture: $kqwpH$composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
onBlurCapture: $kqwpH$composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
onPointerDownCapture: $kqwpH$composeEventHandlers(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
}));
});
/*#__PURE__*/ Object.assign($5cb92bef7577960e$export$177fb62ff3ec1f22, {
displayName: $5cb92bef7577960e$var$DISMISSABLE_LAYER_NAME
});
/* -------------------------------------------------------------------------------------------------
* DismissableLayerBranch
* -----------------------------------------------------------------------------------------------*/ const $5cb92bef7577960e$var$BRANCH_NAME = 'DismissableLayerBranch';
const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ $kqwpH$forwardRef((props, forwardedRef)=>{
const context = $kqwpH$useContext($5cb92bef7577960e$var$DismissableLayerContext);
const ref = $kqwpH$useRef(null);
const composedRefs = $kqwpH$useComposedRefs(forwardedRef, ref);
$kqwpH$useEffect(()=>{
const node = ref.current;
if (node) {
context.branches.add(node);
return ()=>{
context.branches.delete(node);
};
}
}, [
context.branches
]);
return /*#__PURE__*/ $kqwpH$createElement($kqwpH$Primitive.div, $kqwpH$babelruntimehelpersesmextends({}, props, {
ref: composedRefs
}));
});
/*#__PURE__*/ Object.assign($5cb92bef7577960e$export$4d5eb2109db14228, {
displayName: $5cb92bef7577960e$var$BRANCH_NAME
});
/* -----------------------------------------------------------------------------------------------*/ /**
* Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
* to mimic layer dismissing behaviour present in OS.
* Returns props to pass to the node we want to check for outside events.
*/ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
const handlePointerDownOutside = $kqwpH$useCallbackRef(onPointerDownOutside);
const isPointerInsideReactTreeRef = $kqwpH$useRef(false);
const handleClickRef = $kqwpH$useRef(()=>{});
$kqwpH$useEffect(()=>{
const handlePointerDown = (event)=>{
if (event.target && !isPointerInsideReactTreeRef.current) {
const eventDetail = {
originalEvent: event
};
function handleAndDispatchPointerDownOutsideEvent() {
$5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
discrete: true
});
}
/**
* On touch devices, we need to wait for a click event because browsers implement
* a ~350ms delay between the time the user stops touching the display and when the
* browser executres events. We need to ensure we don't reactivate pointer-events within
* this timeframe otherwise the browser may execute events that should have been prevented.
*
* Additionally, this also lets us deal automatically with cancellations when a click event
* isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
*
* This is why we also continuously remove the previous listener, because we cannot be
* certain that it was raised, and therefore cleaned-up.
*/ if (event.pointerType === 'touch') {
ownerDocument.removeEventListener('click', handleClickRef.current);
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
ownerDocument.addEventListener('click', handleClickRef.current, {
once: true
});
} else handleAndDispatchPointerDownOutsideEvent();
} else // We need to remove the event listener in case the outside click has been canceled.
// See: https://github.com/radix-ui/primitives/issues/2171
ownerDocument.removeEventListener('click', handleClickRef.current);
isPointerInsideReactTreeRef.current = false;
};
/**
* if this hook executes in a component that mounts via a `pointerdown` event, the event
* would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
* this by delaying the event listener registration on the document.
* This is not React specific, but rather how the DOM works, ie:
* ```
* button.addEventListener('pointerdown', () => {
* console.log('I will log');
* document.addEventListener('pointerdown', () => {
* console.log('I will also log');
* })
* });
*/ const timerId = window.setTimeout(()=>{
ownerDocument.addEventListener('pointerdown', handlePointerDown);
}, 0);
return ()=>{
window.clearTimeout(timerId);
ownerDocument.removeEventListener('pointerdown', handlePointerDown);
ownerDocument.removeEventListener('click', handleClickRef.current);
};
}, [
ownerDocument,
handlePointerDownOutside
]);
return {
// ensures we check React component tree (not just DOM tree)
onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true
};
}
/**
* Listens for when focus happens outside a react subtree.
* Returns props to pass to the root (node) of the subtree we want to check.
*/ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
const handleFocusOutside = $kqwpH$useCallbackRef(onFocusOutside);
const isFocusInsideReactTreeRef = $kqwpH$useRef(false);
$kqwpH$useEffect(()=>{
const handleFocus = (event)=>{
if (event.target && !isFocusInsideReactTreeRef.current) {
const eventDetail = {
originalEvent: event
};
$5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
discrete: false
});
}
};
ownerDocument.addEventListener('focusin', handleFocus);
return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
;
}, [
ownerDocument,
handleFocusOutside
]);
return {
onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true
,
onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false
};
}
function $5cb92bef7577960e$var$dispatchUpdate() {
const event = new CustomEvent($5cb92bef7577960e$var$CONTEXT_UPDATE);
document.dispatchEvent(event);
}
function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete }) {
const target = detail.originalEvent.target;
const event = new CustomEvent(name, {
bubbles: false,
cancelable: true,
detail: detail
});
if (handler) target.addEventListener(name, handler, {
once: true
});
if (discrete) $kqwpH$dispatchDiscreteCustomEvent(target, event);
else target.dispatchEvent(event);
}
const $5cb92bef7577960e$export$be92b6f5f03c0fe9 = $5cb92bef7577960e$export$177fb62ff3ec1f22;
const $5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$4d5eb2109db14228;
export {$5cb92bef7577960e$export$177fb62ff3ec1f22 as DismissableLayer, $5cb92bef7577960e$export$4d5eb2109db14228 as DismissableLayerBranch, $5cb92bef7577960e$export$be92b6f5f03c0fe9 as Root, $5cb92bef7577960e$export$aecb2ddcb55c95be as Branch};
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,63 @@
{
"name": "@radix-ui/react-dismissable-layer",
"version": "1.0.5",
"license": "MIT",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
},
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"clean": "rm -rf dist",
"version": "yarn version"
},
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-callback-ref": "1.0.1",
"@radix-ui/react-use-escape-keydown": "1.0.3"
},
"devDependencies": {
"react-remove-scroll": "2.5.5"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}

View File

@@ -0,0 +1,13 @@
# `react-focus-guards`
## Installation
```sh
$ yarn add @radix-ui/react-focus-guards
# or
$ npm install @radix-ui/react-focus-guards
```
## Usage
This is an internal utility, not intended for public usage.

View File

@@ -0,0 +1,9 @@
export function FocusGuards(props: any): any;
/**
* Injects a pair of focus guards at the edges of the whole DOM tree
* to ensure `focusin` & `focusout` events can be caught consistently.
*/
export function useFocusGuards(): void;
export const Root: typeof FocusGuards;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,9 @@
export function FocusGuards(props: any): any;
/**
* Injects a pair of focus guards at the edges of the whole DOM tree
* to ensure `focusin` & `focusout` events can be caught consistently.
*/
export function useFocusGuards(): void;
export const Root: typeof FocusGuards;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":"AAKA,4BAAqB,KAAK,EAAE,GAAG,OAG9B;AAED;;;GAGG;AACH,uCAcC;AAUD,OAAA,MAAM,wBAAkB,CAAC","sources":["packages/react/focus-guards/src/packages/react/focus-guards/src/FocusGuards.tsx","packages/react/focus-guards/src/packages/react/focus-guards/src/index.ts","packages/react/focus-guards/src/index.ts"],"sourcesContent":[null,null,"export {\n FocusGuards,\n //\n Root,\n //\n useFocusGuards,\n} from './FocusGuards';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,45 @@
var $cnctE$react = require("react");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "FocusGuards", () => $71476a6ed7dbbaf3$export$ac5b58043b79449b);
$parcel$export(module.exports, "Root", () => $71476a6ed7dbbaf3$export$be92b6f5f03c0fe9);
$parcel$export(module.exports, "useFocusGuards", () => $71476a6ed7dbbaf3$export$b7ece24a22aeda8c);
/** Number of components which have requested interest to have focus guards */ let $71476a6ed7dbbaf3$var$count = 0;
function $71476a6ed7dbbaf3$export$ac5b58043b79449b(props) {
$71476a6ed7dbbaf3$export$b7ece24a22aeda8c();
return props.children;
}
/**
* Injects a pair of focus guards at the edges of the whole DOM tree
* to ensure `focusin` & `focusout` events can be caught consistently.
*/ function $71476a6ed7dbbaf3$export$b7ece24a22aeda8c() {
$cnctE$react.useEffect(()=>{
var _edgeGuards$, _edgeGuards$2;
const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');
document.body.insertAdjacentElement('afterbegin', (_edgeGuards$ = edgeGuards[0]) !== null && _edgeGuards$ !== void 0 ? _edgeGuards$ : $71476a6ed7dbbaf3$var$createFocusGuard());
document.body.insertAdjacentElement('beforeend', (_edgeGuards$2 = edgeGuards[1]) !== null && _edgeGuards$2 !== void 0 ? _edgeGuards$2 : $71476a6ed7dbbaf3$var$createFocusGuard());
$71476a6ed7dbbaf3$var$count++;
return ()=>{
if ($71476a6ed7dbbaf3$var$count === 1) document.querySelectorAll('[data-radix-focus-guard]').forEach((node)=>node.remove()
);
$71476a6ed7dbbaf3$var$count--;
};
}, []);
}
function $71476a6ed7dbbaf3$var$createFocusGuard() {
const element = document.createElement('span');
element.setAttribute('data-radix-focus-guard', '');
element.tabIndex = 0;
element.style.cssText = 'outline: none; opacity: 0; position: fixed; pointer-events: none';
return element;
}
const $71476a6ed7dbbaf3$export$be92b6f5f03c0fe9 = $71476a6ed7dbbaf3$export$ac5b58043b79449b;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"mappings":";;;;;;;;;ACAA;AAEA,8EAAA,CACA,IAAII,2BAAK,GAAG,CAAZ,AAAA;AAEA,SAASJ,yCAAT,CAAqBK,KAArB,EAAiC;IAC/BH,yCAAc,EAAdA,CAAAA;IACA,OAAOG,KAAK,CAACC,QAAb,CAAA;CACD;AAED;;;GAGA,CACA,SAASJ,yCAAT,GAA0B;IACxBC,sBAAA,CAAgB,IAAM;QAAA,IAAA,YAAA,EAAA,aAAA,AAAA;QACpB,MAAMK,UAAU,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,0BAA1B,CAAnB,AAAA;QACAD,QAAQ,CAACE,IAAT,CAAcC,qBAAd,CAAoC,YAApC,EAAA,AAAA,CAAA,YAAA,GAAkDJ,UAAU,CAAC,CAAD,CAA5D,CAAA,KAAA,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,YAAA,GAAmEK,sCAAgB,EAAnF,CAAAJ,CAAAA;QACAA,QAAQ,CAACE,IAAT,CAAcC,qBAAd,CAAoC,WAApC,EAAA,AAAA,CAAA,aAAA,GAAiDJ,UAAU,CAAC,CAAD,CAA3D,CAAA,KAAA,IAAA,IAAA,aAAA,KAAA,KAAA,CAAA,GAAA,aAAA,GAAkEK,sCAAgB,EAAlF,CAAAJ,CAAAA;QACAL,2BAAK,EAALA,CAAAA;QAEA,OAAO,IAAM;YACX,IAAIA,2BAAK,KAAK,CAAd,EACEK,QAAQ,CAACC,gBAAT,CAA0B,0BAA1B,CAAA,CAAsDI,OAAtD,CAA+DC,CAAAA,IAAD,GAAUA,IAAI,CAACC,MAAL,EAAxE;YAAA,CAAAP,CAAAA;YAEFL,2BAAK,EAALA,CAAAA;SAJF,CAKC;KAXH,EAYG,EAZH,CAYC,CAAA;CACF;AAED,SAASS,sCAAT,GAA4B;IAC1B,MAAMI,OAAO,GAAGR,QAAQ,CAACS,aAAT,CAAuB,MAAvB,CAAhB,AAAA;IACAD,OAAO,CAACE,YAAR,CAAqB,wBAArB,EAA+C,EAA/C,CAAAF,CAAAA;IACAA,OAAO,CAACG,QAAR,GAAmB,CAAnB,CAAAH;IACAA,OAAO,CAACI,KAAR,CAAcC,OAAd,GAAwB,kEAAxB,CAAAL;IACA,OAAOA,OAAP,CAAA;CACD;AAED,MAAMhB,yCAAI,GAAGD,yCAAb,AAAA;;ADtCA","sources":["packages/react/focus-guards/src/index.ts","packages/react/focus-guards/src/FocusGuards.tsx"],"sourcesContent":["export {\n FocusGuards,\n //\n Root,\n //\n useFocusGuards,\n} from './FocusGuards';\n","import * as React from 'react';\n\n/** Number of components which have requested interest to have focus guards */\nlet count = 0;\n\nfunction FocusGuards(props: any) {\n useFocusGuards();\n return props.children;\n}\n\n/**\n * Injects a pair of focus guards at the edges of the whole DOM tree\n * to ensure `focusin` & `focusout` events can be caught consistently.\n */\nfunction useFocusGuards() {\n React.useEffect(() => {\n const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');\n document.body.insertAdjacentElement('afterbegin', edgeGuards[0] ?? createFocusGuard());\n document.body.insertAdjacentElement('beforeend', edgeGuards[1] ?? createFocusGuard());\n count++;\n\n return () => {\n if (count === 1) {\n document.querySelectorAll('[data-radix-focus-guard]').forEach((node) => node.remove());\n }\n count--;\n };\n }, []);\n}\n\nfunction createFocusGuard() {\n const element = document.createElement('span');\n element.setAttribute('data-radix-focus-guard', '');\n element.tabIndex = 0;\n element.style.cssText = 'outline: none; opacity: 0; position: fixed; pointer-events: none';\n return element;\n}\n\nconst Root = FocusGuards;\n\nexport {\n FocusGuards,\n //\n Root,\n //\n useFocusGuards,\n};\n"],"names":["FocusGuards","Root","useFocusGuards","React","count","props","children","useEffect","edgeGuards","document","querySelectorAll","body","insertAdjacentElement","createFocusGuard","forEach","node","remove","element","createElement","setAttribute","tabIndex","style","cssText"],"version":3,"file":"index.js.map"}

View File

@@ -0,0 +1,39 @@
import {useEffect as $1wErz$useEffect} from "react";
/** Number of components which have requested interest to have focus guards */ let $3db38b7d1fb3fe6a$var$count = 0;
function $3db38b7d1fb3fe6a$export$ac5b58043b79449b(props) {
$3db38b7d1fb3fe6a$export$b7ece24a22aeda8c();
return props.children;
}
/**
* Injects a pair of focus guards at the edges of the whole DOM tree
* to ensure `focusin` & `focusout` events can be caught consistently.
*/ function $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c() {
$1wErz$useEffect(()=>{
var _edgeGuards$, _edgeGuards$2;
const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');
document.body.insertAdjacentElement('afterbegin', (_edgeGuards$ = edgeGuards[0]) !== null && _edgeGuards$ !== void 0 ? _edgeGuards$ : $3db38b7d1fb3fe6a$var$createFocusGuard());
document.body.insertAdjacentElement('beforeend', (_edgeGuards$2 = edgeGuards[1]) !== null && _edgeGuards$2 !== void 0 ? _edgeGuards$2 : $3db38b7d1fb3fe6a$var$createFocusGuard());
$3db38b7d1fb3fe6a$var$count++;
return ()=>{
if ($3db38b7d1fb3fe6a$var$count === 1) document.querySelectorAll('[data-radix-focus-guard]').forEach((node)=>node.remove()
);
$3db38b7d1fb3fe6a$var$count--;
};
}, []);
}
function $3db38b7d1fb3fe6a$var$createFocusGuard() {
const element = document.createElement('span');
element.setAttribute('data-radix-focus-guard', '');
element.tabIndex = 0;
element.style.cssText = 'outline: none; opacity: 0; position: fixed; pointer-events: none';
return element;
}
const $3db38b7d1fb3fe6a$export$be92b6f5f03c0fe9 = $3db38b7d1fb3fe6a$export$ac5b58043b79449b;
export {$3db38b7d1fb3fe6a$export$ac5b58043b79449b as FocusGuards, $3db38b7d1fb3fe6a$export$be92b6f5f03c0fe9 as Root, $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c as useFocusGuards};
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"mappings":";;ACAA;AAEA,8EAAA,CACA,IAAII,2BAAK,GAAG,CAAZ,AAAA;AAEA,SAASJ,yCAAT,CAAqBK,KAArB,EAAiC;IAC/BH,yCAAc,EAAdA,CAAAA;IACA,OAAOG,KAAK,CAACC,QAAb,CAAA;CACD;AAED;;;GAGA,CACA,SAASJ,yCAAT,GAA0B;IACxBC,gBAAA,CAAgB,IAAM;QAAA,IAAA,YAAA,EAAA,aAAA,AAAA;QACpB,MAAMK,UAAU,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,0BAA1B,CAAnB,AAAA;QACAD,QAAQ,CAACE,IAAT,CAAcC,qBAAd,CAAoC,YAApC,EAAA,AAAA,CAAA,YAAA,GAAkDJ,UAAU,CAAC,CAAD,CAA5D,CAAA,KAAA,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,YAAA,GAAmEK,sCAAgB,EAAnF,CAAAJ,CAAAA;QACAA,QAAQ,CAACE,IAAT,CAAcC,qBAAd,CAAoC,WAApC,EAAA,AAAA,CAAA,aAAA,GAAiDJ,UAAU,CAAC,CAAD,CAA3D,CAAA,KAAA,IAAA,IAAA,aAAA,KAAA,KAAA,CAAA,GAAA,aAAA,GAAkEK,sCAAgB,EAAlF,CAAAJ,CAAAA;QACAL,2BAAK,EAALA,CAAAA;QAEA,OAAO,IAAM;YACX,IAAIA,2BAAK,KAAK,CAAd,EACEK,QAAQ,CAACC,gBAAT,CAA0B,0BAA1B,CAAA,CAAsDI,OAAtD,CAA+DC,CAAAA,IAAD,GAAUA,IAAI,CAACC,MAAL,EAAxE;YAAA,CAAAP,CAAAA;YAEFL,2BAAK,EAALA,CAAAA;SAJF,CAKC;KAXH,EAYG,EAZH,CAYC,CAAA;CACF;AAED,SAASS,sCAAT,GAA4B;IAC1B,MAAMI,OAAO,GAAGR,QAAQ,CAACS,aAAT,CAAuB,MAAvB,CAAhB,AAAA;IACAD,OAAO,CAACE,YAAR,CAAqB,wBAArB,EAA+C,EAA/C,CAAAF,CAAAA;IACAA,OAAO,CAACG,QAAR,GAAmB,CAAnB,CAAAH;IACAA,OAAO,CAACI,KAAR,CAAcC,OAAd,GAAwB,kEAAxB,CAAAL;IACA,OAAOA,OAAP,CAAA;CACD;AAED,MAAMhB,yCAAI,GAAGD,yCAAb,AAAA;;ADtCA","sources":["packages/react/focus-guards/src/index.ts","packages/react/focus-guards/src/FocusGuards.tsx"],"sourcesContent":["export {\n FocusGuards,\n //\n Root,\n //\n useFocusGuards,\n} from './FocusGuards';\n","import * as React from 'react';\n\n/** Number of components which have requested interest to have focus guards */\nlet count = 0;\n\nfunction FocusGuards(props: any) {\n useFocusGuards();\n return props.children;\n}\n\n/**\n * Injects a pair of focus guards at the edges of the whole DOM tree\n * to ensure `focusin` & `focusout` events can be caught consistently.\n */\nfunction useFocusGuards() {\n React.useEffect(() => {\n const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');\n document.body.insertAdjacentElement('afterbegin', edgeGuards[0] ?? createFocusGuard());\n document.body.insertAdjacentElement('beforeend', edgeGuards[1] ?? createFocusGuard());\n count++;\n\n return () => {\n if (count === 1) {\n document.querySelectorAll('[data-radix-focus-guard]').forEach((node) => node.remove());\n }\n count--;\n };\n }, []);\n}\n\nfunction createFocusGuard() {\n const element = document.createElement('span');\n element.setAttribute('data-radix-focus-guard', '');\n element.tabIndex = 0;\n element.style.cssText = 'outline: none; opacity: 0; position: fixed; pointer-events: none';\n return element;\n}\n\nconst Root = FocusGuards;\n\nexport {\n FocusGuards,\n //\n Root,\n //\n useFocusGuards,\n};\n"],"names":["FocusGuards","Root","useFocusGuards","React","count","props","children","useEffect","edgeGuards","document","querySelectorAll","body","insertAdjacentElement","createFocusGuard","forEach","node","remove","element","createElement","setAttribute","tabIndex","style","cssText"],"version":3,"file":"index.mjs.map"}

View File

@@ -0,0 +1,50 @@
{
"name": "@radix-ui/react-focus-guards",
"version": "1.0.1",
"license": "MIT",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
},
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"clean": "rm -rf dist",
"version": "yarn version"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
},
"dependencies": {
"@babel/runtime": "^7.13.10"
}
}

View File

@@ -0,0 +1,13 @@
# `react-focus-scope`
## Installation
```sh
$ yarn add @radix-ui/react-focus-scope
# or
$ npm install @radix-ui/react-focus-scope
```
## Usage
This is an internal utility, not intended for public usage.

View File

@@ -0,0 +1,32 @@
import * as React from "react";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
export interface FocusScopeProps extends PrimitiveDivProps {
/**
* When `true`, tabbing from last item will focus first tabbable
* and shift+tab from first item will focus last tababble.
* @defaultValue false
*/
loop?: boolean;
/**
* When `true`, focus cannot escape the focus scope via keyboard,
* pointer, or a programmatic focus.
* @defaultValue false
*/
trapped?: boolean;
/**
* Event handler called when auto-focusing on mount.
* Can be prevented.
*/
onMountAutoFocus?: (event: Event) => void;
/**
* Event handler called when auto-focusing on unmount.
* Can be prevented.
*/
onUnmountAutoFocus?: (event: Event) => void;
}
export const FocusScope: React.ForwardRefExoticComponent<FocusScopeProps & React.RefAttributes<HTMLDivElement>>;
export const Root: React.ForwardRefExoticComponent<FocusScopeProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,32 @@
import * as React from "react";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
export interface FocusScopeProps extends PrimitiveDivProps {
/**
* When `true`, tabbing from last item will focus first tabbable
* and shift+tab from first item will focus last tababble.
* @defaultValue false
*/
loop?: boolean;
/**
* When `true`, focus cannot escape the focus scope via keyboard,
* pointer, or a programmatic focus.
* @defaultValue false
*/
trapped?: boolean;
/**
* Event handler called when auto-focusing on mount.
* Can be prevented.
*/
onMountAutoFocus?: (event: Event) => void;
/**
* Event handler called when auto-focusing on unmount.
* Can be prevented.
*/
onUnmountAutoFocus?: (event: Event) => void;
}
export const FocusScope: React.ForwardRefExoticComponent<FocusScopeProps & React.RefAttributes<HTMLDivElement>>;
export const Root: React.ForwardRefExoticComponent<FocusScopeProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":";;;AAoBA,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,gCAA0B,SAAQ,iBAAiB;IACjD;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC7C;AAED,OAAA,MAAM,kGA8JJ,CAAC;AA2IH,OAAA,MAAM,4FAAiB,CAAC","sources":["packages/react/focus-scope/src/packages/react/focus-scope/src/FocusScope.tsx","packages/react/focus-scope/src/packages/react/focus-scope/src/index.ts","packages/react/focus-scope/src/index.ts"],"sourcesContent":[null,null,"export {\n FocusScope,\n //\n Root,\n} from './FocusScope';\nexport type { FocusScopeProps } from './FocusScope';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,300 @@
var $buum9$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
var $buum9$react = require("react");
var $buum9$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
var $buum9$radixuireactprimitive = require("@radix-ui/react-primitive");
var $buum9$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "FocusScope", () => $2bc01e66e04aa9ed$export$20e40289641fbbb6);
$parcel$export(module.exports, "Root", () => $2bc01e66e04aa9ed$export$be92b6f5f03c0fe9);
const $2bc01e66e04aa9ed$var$AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
const $2bc01e66e04aa9ed$var$AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
const $2bc01e66e04aa9ed$var$EVENT_OPTIONS = {
bubbles: false,
cancelable: true
};
/* -------------------------------------------------------------------------------------------------
* FocusScope
* -----------------------------------------------------------------------------------------------*/ const $2bc01e66e04aa9ed$var$FOCUS_SCOPE_NAME = 'FocusScope';
const $2bc01e66e04aa9ed$export$20e40289641fbbb6 = /*#__PURE__*/ $buum9$react.forwardRef((props, forwardedRef)=>{
const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props;
const [container1, setContainer] = $buum9$react.useState(null);
const onMountAutoFocus = $buum9$radixuireactusecallbackref.useCallbackRef(onMountAutoFocusProp);
const onUnmountAutoFocus = $buum9$radixuireactusecallbackref.useCallbackRef(onUnmountAutoFocusProp);
const lastFocusedElementRef = $buum9$react.useRef(null);
const composedRefs = $buum9$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setContainer(node)
);
const focusScope = $buum9$react.useRef({
paused: false,
pause () {
this.paused = true;
},
resume () {
this.paused = false;
}
}).current; // Takes care of trapping focus if focus is moved outside programmatically for example
$buum9$react.useEffect(()=>{
if (trapped) {
function handleFocusIn(event) {
if (focusScope.paused || !container1) return;
const target = event.target;
if (container1.contains(target)) lastFocusedElementRef.current = target;
else $2bc01e66e04aa9ed$var$focus(lastFocusedElementRef.current, {
select: true
});
}
function handleFocusOut(event) {
if (focusScope.paused || !container1) return;
const relatedTarget = event.relatedTarget; // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:
//
// 1. When the user switches app/tabs/windows/the browser itself loses focus.
// 2. In Google Chrome, when the focused element is removed from the DOM.
//
// We let the browser do its thing here because:
//
// 1. The browser already keeps a memory of what's focused for when the page gets refocused.
// 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it
// throws the CPU to 100%, so we avoid doing anything for this reason here too.
if (relatedTarget === null) return; // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
// that is outside the container, we move focus to the last valid focused element inside.
if (!container1.contains(relatedTarget)) $2bc01e66e04aa9ed$var$focus(lastFocusedElementRef.current, {
select: true
});
} // When the focused element gets removed from the DOM, browsers move focus
// back to the document.body. In this case, we move focus to the container
// to keep focus trapped correctly.
function handleMutations(mutations) {
const focusedElement = document.activeElement;
if (focusedElement !== document.body) return;
for (const mutation of mutations)if (mutation.removedNodes.length > 0) $2bc01e66e04aa9ed$var$focus(container1);
}
document.addEventListener('focusin', handleFocusIn);
document.addEventListener('focusout', handleFocusOut);
const mutationObserver = new MutationObserver(handleMutations);
if (container1) mutationObserver.observe(container1, {
childList: true,
subtree: true
});
return ()=>{
document.removeEventListener('focusin', handleFocusIn);
document.removeEventListener('focusout', handleFocusOut);
mutationObserver.disconnect();
};
}
}, [
trapped,
container1,
focusScope.paused
]);
$buum9$react.useEffect(()=>{
if (container1) {
$2bc01e66e04aa9ed$var$focusScopesStack.add(focusScope);
const previouslyFocusedElement = document.activeElement;
const hasFocusedCandidate = container1.contains(previouslyFocusedElement);
if (!hasFocusedCandidate) {
const mountEvent = new CustomEvent($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_MOUNT, $2bc01e66e04aa9ed$var$EVENT_OPTIONS);
container1.addEventListener($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
container1.dispatchEvent(mountEvent);
if (!mountEvent.defaultPrevented) {
$2bc01e66e04aa9ed$var$focusFirst($2bc01e66e04aa9ed$var$removeLinks($2bc01e66e04aa9ed$var$getTabbableCandidates(container1)), {
select: true
});
if (document.activeElement === previouslyFocusedElement) $2bc01e66e04aa9ed$var$focus(container1);
}
}
return ()=>{
container1.removeEventListener($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus); // We hit a react bug (fixed in v17) with focusing in unmount.
// We need to delay the focus a little to get around it for now.
// See: https://github.com/facebook/react/issues/17894
setTimeout(()=>{
const unmountEvent = new CustomEvent($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_UNMOUNT, $2bc01e66e04aa9ed$var$EVENT_OPTIONS);
container1.addEventListener($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
container1.dispatchEvent(unmountEvent);
if (!unmountEvent.defaultPrevented) $2bc01e66e04aa9ed$var$focus(previouslyFocusedElement !== null && previouslyFocusedElement !== void 0 ? previouslyFocusedElement : document.body, {
select: true
});
// we need to remove the listener after we `dispatchEvent`
container1.removeEventListener($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
$2bc01e66e04aa9ed$var$focusScopesStack.remove(focusScope);
}, 0);
};
}
}, [
container1,
onMountAutoFocus,
onUnmountAutoFocus,
focusScope
]); // Takes care of looping focus (when tabbing whilst at the edges)
const handleKeyDown = $buum9$react.useCallback((event)=>{
if (!loop && !trapped) return;
if (focusScope.paused) return;
const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
const focusedElement = document.activeElement;
if (isTabKey && focusedElement) {
const container = event.currentTarget;
const [first, last] = $2bc01e66e04aa9ed$var$getTabbableEdges(container);
const hasTabbableElementsInside = first && last; // we can only wrap focus if we have tabbable edges
if (!hasTabbableElementsInside) {
if (focusedElement === container) event.preventDefault();
} else {
if (!event.shiftKey && focusedElement === last) {
event.preventDefault();
if (loop) $2bc01e66e04aa9ed$var$focus(first, {
select: true
});
} else if (event.shiftKey && focusedElement === first) {
event.preventDefault();
if (loop) $2bc01e66e04aa9ed$var$focus(last, {
select: true
});
}
}
}
}, [
loop,
trapped,
focusScope.paused
]);
return /*#__PURE__*/ $buum9$react.createElement($buum9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($buum9$babelruntimehelpersextends))({
tabIndex: -1
}, scopeProps, {
ref: composedRefs,
onKeyDown: handleKeyDown
}));
});
/*#__PURE__*/ Object.assign($2bc01e66e04aa9ed$export$20e40289641fbbb6, {
displayName: $2bc01e66e04aa9ed$var$FOCUS_SCOPE_NAME
});
/* -------------------------------------------------------------------------------------------------
* Utils
* -----------------------------------------------------------------------------------------------*/ /**
* Attempts focusing the first element in a list of candidates.
* Stops when focus has actually moved.
*/ function $2bc01e66e04aa9ed$var$focusFirst(candidates, { select: select = false } = {}) {
const previouslyFocusedElement = document.activeElement;
for (const candidate of candidates){
$2bc01e66e04aa9ed$var$focus(candidate, {
select: select
});
if (document.activeElement !== previouslyFocusedElement) return;
}
}
/**
* Returns the first and last tabbable elements inside a container.
*/ function $2bc01e66e04aa9ed$var$getTabbableEdges(container) {
const candidates = $2bc01e66e04aa9ed$var$getTabbableCandidates(container);
const first = $2bc01e66e04aa9ed$var$findVisible(candidates, container);
const last = $2bc01e66e04aa9ed$var$findVisible(candidates.reverse(), container);
return [
first,
last
];
}
/**
* Returns a list of potential tabbable candidates.
*
* NOTE: This is only a close approximation. For example it doesn't take into account cases like when
* elements are not visible. This cannot be worked out easily by just reading a property, but rather
* necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
*
* See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
* Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
*/ function $2bc01e66e04aa9ed$var$getTabbableCandidates(container) {
const nodes = [];
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
acceptNode: (node)=>{
const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
// runtime's understanding of tabbability, so this automatically accounts
// for any kind of element that could be tabbed to.
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
// hinders accessibility to have tab order different from visual order.
return nodes;
}
/**
* Returns the first visible element in a list.
* NOTE: Only checks visibility up to the `container`.
*/ function $2bc01e66e04aa9ed$var$findVisible(elements, container) {
for (const element of elements){
// we stop checking if it's hidden at the `container` level (excluding)
if (!$2bc01e66e04aa9ed$var$isHidden(element, {
upTo: container
})) return element;
}
}
function $2bc01e66e04aa9ed$var$isHidden(node, { upTo: upTo }) {
if (getComputedStyle(node).visibility === 'hidden') return true;
while(node){
// we stop at `upTo` (excluding it)
if (upTo !== undefined && node === upTo) return false;
if (getComputedStyle(node).display === 'none') return true;
node = node.parentElement;
}
return false;
}
function $2bc01e66e04aa9ed$var$isSelectableInput(element) {
return element instanceof HTMLInputElement && 'select' in element;
}
function $2bc01e66e04aa9ed$var$focus(element, { select: select = false } = {}) {
// only focus if that element is focusable
if (element && element.focus) {
const previouslyFocusedElement = document.activeElement; // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
element.focus({
preventScroll: true
}); // only select if its not the same element, it supports selection and we need to select
if (element !== previouslyFocusedElement && $2bc01e66e04aa9ed$var$isSelectableInput(element) && select) element.select();
}
}
/* -------------------------------------------------------------------------------------------------
* FocusScope stack
* -----------------------------------------------------------------------------------------------*/ const $2bc01e66e04aa9ed$var$focusScopesStack = $2bc01e66e04aa9ed$var$createFocusScopesStack();
function $2bc01e66e04aa9ed$var$createFocusScopesStack() {
/** A stack of focus scopes, with the active one at the top */ let stack = [];
return {
add (focusScope) {
// pause the currently active focus scope (at the top of the stack)
const activeFocusScope = stack[0];
if (focusScope !== activeFocusScope) activeFocusScope === null || activeFocusScope === void 0 || activeFocusScope.pause();
// remove in case it already exists (because we'll re-add it at the top of the stack)
stack = $2bc01e66e04aa9ed$var$arrayRemove(stack, focusScope);
stack.unshift(focusScope);
},
remove (focusScope) {
var _stack$;
stack = $2bc01e66e04aa9ed$var$arrayRemove(stack, focusScope);
(_stack$ = stack[0]) === null || _stack$ === void 0 || _stack$.resume();
}
};
}
function $2bc01e66e04aa9ed$var$arrayRemove(array, item) {
const updatedArray = [
...array
];
const index = updatedArray.indexOf(item);
if (index !== -1) updatedArray.splice(index, 1);
return updatedArray;
}
function $2bc01e66e04aa9ed$var$removeLinks(items) {
return items.filter((item)=>item.tagName !== 'A'
);
}
const $2bc01e66e04aa9ed$export$be92b6f5f03c0fe9 = $2bc01e66e04aa9ed$export$20e40289641fbbb6;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,292 @@
import $45QHv$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
import {forwardRef as $45QHv$forwardRef, useState as $45QHv$useState, useRef as $45QHv$useRef, useEffect as $45QHv$useEffect, useCallback as $45QHv$useCallback, createElement as $45QHv$createElement} from "react";
import {useComposedRefs as $45QHv$useComposedRefs} from "@radix-ui/react-compose-refs";
import {Primitive as $45QHv$Primitive} from "@radix-ui/react-primitive";
import {useCallbackRef as $45QHv$useCallbackRef} from "@radix-ui/react-use-callback-ref";
const $d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
const $d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
const $d3863c46a17e8a28$var$EVENT_OPTIONS = {
bubbles: false,
cancelable: true
};
/* -------------------------------------------------------------------------------------------------
* FocusScope
* -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$FOCUS_SCOPE_NAME = 'FocusScope';
const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ $45QHv$forwardRef((props, forwardedRef)=>{
const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props;
const [container1, setContainer] = $45QHv$useState(null);
const onMountAutoFocus = $45QHv$useCallbackRef(onMountAutoFocusProp);
const onUnmountAutoFocus = $45QHv$useCallbackRef(onUnmountAutoFocusProp);
const lastFocusedElementRef = $45QHv$useRef(null);
const composedRefs = $45QHv$useComposedRefs(forwardedRef, (node)=>setContainer(node)
);
const focusScope = $45QHv$useRef({
paused: false,
pause () {
this.paused = true;
},
resume () {
this.paused = false;
}
}).current; // Takes care of trapping focus if focus is moved outside programmatically for example
$45QHv$useEffect(()=>{
if (trapped) {
function handleFocusIn(event) {
if (focusScope.paused || !container1) return;
const target = event.target;
if (container1.contains(target)) lastFocusedElementRef.current = target;
else $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
select: true
});
}
function handleFocusOut(event) {
if (focusScope.paused || !container1) return;
const relatedTarget = event.relatedTarget; // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:
//
// 1. When the user switches app/tabs/windows/the browser itself loses focus.
// 2. In Google Chrome, when the focused element is removed from the DOM.
//
// We let the browser do its thing here because:
//
// 1. The browser already keeps a memory of what's focused for when the page gets refocused.
// 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it
// throws the CPU to 100%, so we avoid doing anything for this reason here too.
if (relatedTarget === null) return; // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
// that is outside the container, we move focus to the last valid focused element inside.
if (!container1.contains(relatedTarget)) $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
select: true
});
} // When the focused element gets removed from the DOM, browsers move focus
// back to the document.body. In this case, we move focus to the container
// to keep focus trapped correctly.
function handleMutations(mutations) {
const focusedElement = document.activeElement;
if (focusedElement !== document.body) return;
for (const mutation of mutations)if (mutation.removedNodes.length > 0) $d3863c46a17e8a28$var$focus(container1);
}
document.addEventListener('focusin', handleFocusIn);
document.addEventListener('focusout', handleFocusOut);
const mutationObserver = new MutationObserver(handleMutations);
if (container1) mutationObserver.observe(container1, {
childList: true,
subtree: true
});
return ()=>{
document.removeEventListener('focusin', handleFocusIn);
document.removeEventListener('focusout', handleFocusOut);
mutationObserver.disconnect();
};
}
}, [
trapped,
container1,
focusScope.paused
]);
$45QHv$useEffect(()=>{
if (container1) {
$d3863c46a17e8a28$var$focusScopesStack.add(focusScope);
const previouslyFocusedElement = document.activeElement;
const hasFocusedCandidate = container1.contains(previouslyFocusedElement);
if (!hasFocusedCandidate) {
const mountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
container1.dispatchEvent(mountEvent);
if (!mountEvent.defaultPrevented) {
$d3863c46a17e8a28$var$focusFirst($d3863c46a17e8a28$var$removeLinks($d3863c46a17e8a28$var$getTabbableCandidates(container1)), {
select: true
});
if (document.activeElement === previouslyFocusedElement) $d3863c46a17e8a28$var$focus(container1);
}
}
return ()=>{
container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus); // We hit a react bug (fixed in v17) with focusing in unmount.
// We need to delay the focus a little to get around it for now.
// See: https://github.com/facebook/react/issues/17894
setTimeout(()=>{
const unmountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
container1.dispatchEvent(unmountEvent);
if (!unmountEvent.defaultPrevented) $d3863c46a17e8a28$var$focus(previouslyFocusedElement !== null && previouslyFocusedElement !== void 0 ? previouslyFocusedElement : document.body, {
select: true
});
// we need to remove the listener after we `dispatchEvent`
container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
$d3863c46a17e8a28$var$focusScopesStack.remove(focusScope);
}, 0);
};
}
}, [
container1,
onMountAutoFocus,
onUnmountAutoFocus,
focusScope
]); // Takes care of looping focus (when tabbing whilst at the edges)
const handleKeyDown = $45QHv$useCallback((event)=>{
if (!loop && !trapped) return;
if (focusScope.paused) return;
const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
const focusedElement = document.activeElement;
if (isTabKey && focusedElement) {
const container = event.currentTarget;
const [first, last] = $d3863c46a17e8a28$var$getTabbableEdges(container);
const hasTabbableElementsInside = first && last; // we can only wrap focus if we have tabbable edges
if (!hasTabbableElementsInside) {
if (focusedElement === container) event.preventDefault();
} else {
if (!event.shiftKey && focusedElement === last) {
event.preventDefault();
if (loop) $d3863c46a17e8a28$var$focus(first, {
select: true
});
} else if (event.shiftKey && focusedElement === first) {
event.preventDefault();
if (loop) $d3863c46a17e8a28$var$focus(last, {
select: true
});
}
}
}
}, [
loop,
trapped,
focusScope.paused
]);
return /*#__PURE__*/ $45QHv$createElement($45QHv$Primitive.div, $45QHv$babelruntimehelpersesmextends({
tabIndex: -1
}, scopeProps, {
ref: composedRefs,
onKeyDown: handleKeyDown
}));
});
/*#__PURE__*/ Object.assign($d3863c46a17e8a28$export$20e40289641fbbb6, {
displayName: $d3863c46a17e8a28$var$FOCUS_SCOPE_NAME
});
/* -------------------------------------------------------------------------------------------------
* Utils
* -----------------------------------------------------------------------------------------------*/ /**
* Attempts focusing the first element in a list of candidates.
* Stops when focus has actually moved.
*/ function $d3863c46a17e8a28$var$focusFirst(candidates, { select: select = false } = {}) {
const previouslyFocusedElement = document.activeElement;
for (const candidate of candidates){
$d3863c46a17e8a28$var$focus(candidate, {
select: select
});
if (document.activeElement !== previouslyFocusedElement) return;
}
}
/**
* Returns the first and last tabbable elements inside a container.
*/ function $d3863c46a17e8a28$var$getTabbableEdges(container) {
const candidates = $d3863c46a17e8a28$var$getTabbableCandidates(container);
const first = $d3863c46a17e8a28$var$findVisible(candidates, container);
const last = $d3863c46a17e8a28$var$findVisible(candidates.reverse(), container);
return [
first,
last
];
}
/**
* Returns a list of potential tabbable candidates.
*
* NOTE: This is only a close approximation. For example it doesn't take into account cases like when
* elements are not visible. This cannot be worked out easily by just reading a property, but rather
* necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
*
* See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
* Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
*/ function $d3863c46a17e8a28$var$getTabbableCandidates(container) {
const nodes = [];
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
acceptNode: (node)=>{
const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
// runtime's understanding of tabbability, so this automatically accounts
// for any kind of element that could be tabbed to.
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
// hinders accessibility to have tab order different from visual order.
return nodes;
}
/**
* Returns the first visible element in a list.
* NOTE: Only checks visibility up to the `container`.
*/ function $d3863c46a17e8a28$var$findVisible(elements, container) {
for (const element of elements){
// we stop checking if it's hidden at the `container` level (excluding)
if (!$d3863c46a17e8a28$var$isHidden(element, {
upTo: container
})) return element;
}
}
function $d3863c46a17e8a28$var$isHidden(node, { upTo: upTo }) {
if (getComputedStyle(node).visibility === 'hidden') return true;
while(node){
// we stop at `upTo` (excluding it)
if (upTo !== undefined && node === upTo) return false;
if (getComputedStyle(node).display === 'none') return true;
node = node.parentElement;
}
return false;
}
function $d3863c46a17e8a28$var$isSelectableInput(element) {
return element instanceof HTMLInputElement && 'select' in element;
}
function $d3863c46a17e8a28$var$focus(element, { select: select = false } = {}) {
// only focus if that element is focusable
if (element && element.focus) {
const previouslyFocusedElement = document.activeElement; // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
element.focus({
preventScroll: true
}); // only select if its not the same element, it supports selection and we need to select
if (element !== previouslyFocusedElement && $d3863c46a17e8a28$var$isSelectableInput(element) && select) element.select();
}
}
/* -------------------------------------------------------------------------------------------------
* FocusScope stack
* -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$focusScopesStack = $d3863c46a17e8a28$var$createFocusScopesStack();
function $d3863c46a17e8a28$var$createFocusScopesStack() {
/** A stack of focus scopes, with the active one at the top */ let stack = [];
return {
add (focusScope) {
// pause the currently active focus scope (at the top of the stack)
const activeFocusScope = stack[0];
if (focusScope !== activeFocusScope) activeFocusScope === null || activeFocusScope === void 0 || activeFocusScope.pause();
// remove in case it already exists (because we'll re-add it at the top of the stack)
stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
stack.unshift(focusScope);
},
remove (focusScope) {
var _stack$;
stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
(_stack$ = stack[0]) === null || _stack$ === void 0 || _stack$.resume();
}
};
}
function $d3863c46a17e8a28$var$arrayRemove(array, item) {
const updatedArray = [
...array
];
const index = updatedArray.indexOf(item);
if (index !== -1) updatedArray.splice(index, 1);
return updatedArray;
}
function $d3863c46a17e8a28$var$removeLinks(items) {
return items.filter((item)=>item.tagName !== 'A'
);
}
const $d3863c46a17e8a28$export$be92b6f5f03c0fe9 = $d3863c46a17e8a28$export$20e40289641fbbb6;
export {$d3863c46a17e8a28$export$20e40289641fbbb6 as FocusScope, $d3863c46a17e8a28$export$be92b6f5f03c0fe9 as Root};
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,58 @@
{
"name": "@radix-ui/react-focus-scope",
"version": "1.0.4",
"license": "MIT",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
},
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"clean": "rm -rf dist",
"version": "yarn version"
},
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-callback-ref": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}

View File

@@ -0,0 +1,13 @@
# `react-id`
## Installation
```sh
$ yarn add @radix-ui/react-id
# or
$ npm install @radix-ui/react-id
```
## Usage
View docs [here](https://radix-ui.com/primitives/docs/utilities/id-provider).

View File

@@ -0,0 +1,3 @@
export function useId(deterministicId?: string): string;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,3 @@
export function useId(deterministicId?: string): string;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":"AAOA,sBAAe,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAO/C","sources":["packages/react/id/src/packages/react/id/src/id.tsx","packages/react/id/src/packages/react/id/src/index.ts","packages/react/id/src/index.ts"],"sourcesContent":[null,null,"export { useId } from './id';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,28 @@
var $47woD$react = require("react");
var $47woD$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "useId", () => $dc478e4659f630c5$export$f680877a34711e37);
const $dc478e4659f630c5$var$useReactId = $47woD$react['useId'.toString()] || (()=>undefined
);
let $dc478e4659f630c5$var$count = 0;
function $dc478e4659f630c5$export$f680877a34711e37(deterministicId) {
const [id, setId] = $47woD$react.useState($dc478e4659f630c5$var$useReactId()); // React versions older than 18 will have client-side ids only.
$47woD$radixuireactuselayouteffect.useLayoutEffect(()=>{
if (!deterministicId) setId((reactId)=>reactId !== null && reactId !== void 0 ? reactId : String($dc478e4659f630c5$var$count++)
);
}, [
deterministicId
]);
return deterministicId || (id ? `radix-${id}` : '');
}
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"mappings":";;;;;;;;ACAA;;AAIA,MAAMG,gCAAU,GAAIF,YAAD,CAAe,OAAA,CAAQG,QAAR,EAAf,CAAA,IAAuC,CAAA,IAAMC,SAA7C;AAAA,CAAA,AAAnB,AAAA;AACA,IAAIC,2BAAK,GAAG,CAAZ,AAAA;AAEA,SAASN,yCAAT,CAAeO,eAAf,EAAiD;IAC/C,MAAM,CAACC,EAAD,EAAKC,KAAL,CAAA,GAAcR,YAAK,CAACS,QAAN,CAAmCP,gCAAU,EAA7C,CAApB,AAD+C,EAE/C,+DADA;IAEAD,kDAAe,CAAC,IAAM;QACpB,IAAI,CAACK,eAAL,EAAsBE,KAAK,CAAEE,CAAAA,OAAD,GAAaA,OAAb,KAAA,IAAA,IAAaA,OAAb,KAAA,KAAA,CAAA,GAAaA,OAAb,GAAwBC,MAAM,CAACN,2BAAK,EAAN,CAA/B;QAAA,CAAL,CAAtB;KADa,EAEZ;QAACC,eAAD;KAFY,CAAf,CAEC;IACD,OAAOA,eAAe,IAAKC,CAAAA,EAAE,GAAI,CAAA,MAAA,EAAQA,EAAG,CAAA,CAAf,GAAmB,EAA1B,CAAA,AAAtB,CAAA;CACD;;ADdD","sources":["packages/react/id/src/index.ts","packages/react/id/src/id.tsx"],"sourcesContent":["export { useId } from './id';\n","import * as React from 'react';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\n// We `toString()` to prevent bundlers from trying to `import { useId } from 'react';`\nconst useReactId = (React as any)['useId'.toString()] || (() => undefined);\nlet count = 0;\n\nfunction useId(deterministicId?: string): string {\n const [id, setId] = React.useState<string | undefined>(useReactId());\n // React versions older than 18 will have client-side ids only.\n useLayoutEffect(() => {\n if (!deterministicId) setId((reactId) => reactId ?? String(count++));\n }, [deterministicId]);\n return deterministicId || (id ? `radix-${id}` : '');\n}\n\nexport { useId };\n"],"names":["useId","React","useLayoutEffect","useReactId","toString","undefined","count","deterministicId","id","setId","useState","reactId","String"],"version":3,"file":"index.js.map"}

View File

@@ -0,0 +1,24 @@
import * as $2AODx$react from "react";
import {useLayoutEffect as $2AODx$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
const $1746a345f3d73bb7$var$useReactId = $2AODx$react['useId'.toString()] || (()=>undefined
);
let $1746a345f3d73bb7$var$count = 0;
function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
const [id, setId] = $2AODx$react.useState($1746a345f3d73bb7$var$useReactId()); // React versions older than 18 will have client-side ids only.
$2AODx$useLayoutEffect(()=>{
if (!deterministicId) setId((reactId)=>reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
);
}, [
deterministicId
]);
return deterministicId || (id ? `radix-${id}` : '');
}
export {$1746a345f3d73bb7$export$f680877a34711e37 as useId};
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"mappings":";;;ACAA;;AAIA,MAAMG,gCAAU,GAAIF,YAAD,CAAe,OAAA,CAAQG,QAAR,EAAf,CAAA,IAAuC,CAAA,IAAMC,SAA7C;AAAA,CAAA,AAAnB,AAAA;AACA,IAAIC,2BAAK,GAAG,CAAZ,AAAA;AAEA,SAASN,yCAAT,CAAeO,eAAf,EAAiD;IAC/C,MAAM,CAACC,EAAD,EAAKC,KAAL,CAAA,GAAcR,YAAK,CAACS,QAAN,CAAmCP,gCAAU,EAA7C,CAApB,AAD+C,EAE/C,+DADA;IAEAD,sBAAe,CAAC,IAAM;QACpB,IAAI,CAACK,eAAL,EAAsBE,KAAK,CAAEE,CAAAA,OAAD,GAAaA,OAAb,KAAA,IAAA,IAAaA,OAAb,KAAA,KAAA,CAAA,GAAaA,OAAb,GAAwBC,MAAM,CAACN,2BAAK,EAAN,CAA/B;QAAA,CAAL,CAAtB;KADa,EAEZ;QAACC,eAAD;KAFY,CAAf,CAEC;IACD,OAAOA,eAAe,IAAKC,CAAAA,EAAE,GAAI,CAAA,MAAA,EAAQA,EAAG,CAAA,CAAf,GAAmB,EAA1B,CAAA,AAAtB,CAAA;CACD;;ADdD","sources":["packages/react/id/src/index.ts","packages/react/id/src/id.tsx"],"sourcesContent":["export { useId } from './id';\n","import * as React from 'react';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\n// We `toString()` to prevent bundlers from trying to `import { useId } from 'react';`\nconst useReactId = (React as any)['useId'.toString()] || (() => undefined);\nlet count = 0;\n\nfunction useId(deterministicId?: string): string {\n const [id, setId] = React.useState<string | undefined>(useReactId());\n // React versions older than 18 will have client-side ids only.\n useLayoutEffect(() => {\n if (!deterministicId) setId((reactId) => reactId ?? String(count++));\n }, [deterministicId]);\n return deterministicId || (id ? `radix-${id}` : '');\n}\n\nexport { useId };\n"],"names":["useId","React","useLayoutEffect","useReactId","toString","undefined","count","deterministicId","id","setId","useState","reactId","String"],"version":3,"file":"index.mjs.map"}

View File

@@ -0,0 +1,51 @@
{
"name": "@radix-ui/react-id",
"version": "1.0.1",
"license": "MIT",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
},
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"clean": "rm -rf dist",
"version": "yarn version"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
},
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-use-layout-effect": "1.0.1"
}
}

View File

@@ -0,0 +1,13 @@
# `react-portal`
## Installation
```sh
$ yarn add @radix-ui/react-portal
# or
$ npm install @radix-ui/react-portal
```
## Usage
View docs [here](https://radix-ui.com/primitives/docs/utilities/portal).

View File

@@ -0,0 +1,14 @@
import * as React from "react";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
export interface PortalProps extends PrimitiveDivProps {
/**
* An optional container where the portaled content should be appended.
*/
container?: HTMLElement | null;
}
export const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
export const Root: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,14 @@
import * as React from "react";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
export interface PortalProps extends PrimitiveDivProps {
/**
* An optional container where the portaled content should be appended.
*/
container?: HTMLElement | null;
}
export const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
export const Root: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":";;;AAaA,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,4BAAsB,SAAQ,iBAAiB;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC;AAED,OAAA,MAAM,0FAKJ,CAAC;AAMH,OAAA,MAAM,wFAAa,CAAC","sources":["packages/react/portal/src/packages/react/portal/src/Portal.tsx","packages/react/portal/src/packages/react/portal/src/index.ts","packages/react/portal/src/index.ts"],"sourcesContent":[null,null,"export {\n Portal,\n //\n Root,\n} from './Portal';\nexport type { PortalProps } from './Portal';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,37 @@
var $amzHf$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
var $amzHf$react = require("react");
var $amzHf$reactdom = require("react-dom");
var $amzHf$radixuireactprimitive = require("@radix-ui/react-primitive");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "Portal", () => $913a70b877676c16$export$602eac185826482c);
$parcel$export(module.exports, "Root", () => $913a70b877676c16$export$be92b6f5f03c0fe9);
/* -------------------------------------------------------------------------------------------------
* Portal
* -----------------------------------------------------------------------------------------------*/ const $913a70b877676c16$var$PORTAL_NAME = 'Portal';
const $913a70b877676c16$export$602eac185826482c = /*#__PURE__*/ $amzHf$react.forwardRef((props, forwardedRef)=>{
var _globalThis$document;
const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
return container ? /*#__PURE__*/ ($parcel$interopDefault($amzHf$reactdom)).createPortal(/*#__PURE__*/ $amzHf$react.createElement($amzHf$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($amzHf$babelruntimehelpersextends))({}, portalProps, {
ref: forwardedRef
})), container) : null;
});
/*#__PURE__*/ Object.assign($913a70b877676c16$export$602eac185826482c, {
displayName: $913a70b877676c16$var$PORTAL_NAME
});
/* -----------------------------------------------------------------------------------------------*/ const $913a70b877676c16$export$be92b6f5f03c0fe9 = $913a70b877676c16$export$602eac185826482c;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"mappings":";;;;;;;;;;;;;;A;;;;ACMA;;oGAEA,CAEA,MAAMK,iCAAW,GAAG,QAApB,AAAA;AAWA,MAAML,yCAAM,GAAA,aAAGE,CAAAA,uBAAA,CAA6C,CAACK,KAAD,EAAQC,YAAR,GAAyB;IAAA,IAAA,oBAAA,AAAA;IACnF,MAAM,aAAEC,SAAS,GAAGC,UAAH,KAAA,IAAA,IAAGA,UAAH,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,AAAA,CAAA,oBAAA,GAAGA,UAAU,CAAEC,QAAf,CAAA,KAAA,IAAA,IAAA,oBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAG,oBAAA,CAAsBC,IAApC,GAA0C,GAAGC,WAAH,EAA1C,GAA6DN,KAAnE,AAAM;IACN,OAAOE,SAAS,GAAA,aACZN,CAAAA,yCAAQ,CAACW,YAAT,CAAA,aAAsB,CAAA,0BAAA,CAAC,sCAAD,CAAW,GAAX,EAAA,2DAAA,CAAA,EAAA,EAAmBD,WAAnB,EAD1B;QAC0D,GAAG,EAAEL,YAAL;KAAhC,CAAA,CAAtB,EAA6EC,SAA7E,CADY,GAEZ,IAFJ,CAC0B;CAHb,CAAf,AAKC;AAED,aAAA,CAAA,MAAA,CAAA,MAAA,CAAA,yCAAA,EAAA;IAAA,WAAA,EAAA,iCAAA;CAAA,CAAA,CAAA;AAEA,oGAAA,CAEA,MAAMR,yCAAI,GAAGD,yCAAb,AAAA;;ADhCA","sources":["packages/react/portal/src/index.ts","packages/react/portal/src/Portal.tsx"],"sourcesContent":["export {\n Portal,\n //\n Root,\n} from './Portal';\nexport type { PortalProps } from './Portal';\n","import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Portal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'Portal';\n\ntype PortalElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface PortalProps extends PrimitiveDivProps {\n /**\n * An optional container where the portaled content should be appended.\n */\n container?: HTMLElement | null;\n}\n\nconst Portal = React.forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {\n const { container = globalThis?.document?.body, ...portalProps } = props;\n return container\n ? ReactDOM.createPortal(<Primitive.div {...portalProps} ref={forwardedRef} />, container)\n : null;\n});\n\nPortal.displayName = PORTAL_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Portal;\n\nexport {\n Portal,\n //\n Root,\n};\nexport type { PortalProps };\n"],"names":["Portal","Root","React","ReactDOM","Primitive","PORTAL_NAME","forwardRef","props","forwardedRef","container","globalThis","document","body","portalProps","createPortal"],"version":3,"file":"index.js.map"}

View File

@@ -0,0 +1,29 @@
import $7SXl2$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
import {forwardRef as $7SXl2$forwardRef, createElement as $7SXl2$createElement} from "react";
import $7SXl2$reactdom from "react-dom";
import {Primitive as $7SXl2$Primitive} from "@radix-ui/react-primitive";
/* -------------------------------------------------------------------------------------------------
* Portal
* -----------------------------------------------------------------------------------------------*/ const $f1701beae083dbae$var$PORTAL_NAME = 'Portal';
const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ $7SXl2$forwardRef((props, forwardedRef)=>{
var _globalThis$document;
const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
return container ? /*#__PURE__*/ $7SXl2$reactdom.createPortal(/*#__PURE__*/ $7SXl2$createElement($7SXl2$Primitive.div, $7SXl2$babelruntimehelpersesmextends({}, portalProps, {
ref: forwardedRef
})), container) : null;
});
/*#__PURE__*/ Object.assign($f1701beae083dbae$export$602eac185826482c, {
displayName: $f1701beae083dbae$var$PORTAL_NAME
});
/* -----------------------------------------------------------------------------------------------*/ const $f1701beae083dbae$export$be92b6f5f03c0fe9 = $f1701beae083dbae$export$602eac185826482c;
export {$f1701beae083dbae$export$602eac185826482c as Portal, $f1701beae083dbae$export$be92b6f5f03c0fe9 as Root};
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"mappings":";;;;;A;;;;ACMA;;oGAEA,CAEA,MAAMK,iCAAW,GAAG,QAApB,AAAA;AAWA,MAAML,yCAAM,GAAA,aAAGE,CAAAA,iBAAA,CAA6C,CAACK,KAAD,EAAQC,YAAR,GAAyB;IAAA,IAAA,oBAAA,AAAA;IACnF,MAAM,aAAEC,SAAS,GAAGC,UAAH,KAAA,IAAA,IAAGA,UAAH,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,AAAA,CAAA,oBAAA,GAAGA,UAAU,CAAEC,QAAf,CAAA,KAAA,IAAA,IAAA,oBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAG,oBAAA,CAAsBC,IAApC,GAA0C,GAAGC,WAAH,EAA1C,GAA6DN,KAAnE,AAAM;IACN,OAAOE,SAAS,GAAA,aACZN,CAAAA,eAAQ,CAACW,YAAT,CAAA,aAAsB,CAAA,oBAAA,CAAC,gBAAD,CAAW,GAAX,EAAA,oCAAA,CAAA,EAAA,EAAmBD,WAAnB,EAD1B;QAC0D,GAAG,EAAEL,YAAL;KAAhC,CAAA,CAAtB,EAA6EC,SAA7E,CADY,GAEZ,IAFJ,CAC0B;CAHb,CAAf,AAKC;AAED,aAAA,CAAA,MAAA,CAAA,MAAA,CAAA,yCAAA,EAAA;IAAA,WAAA,EAAA,iCAAA;CAAA,CAAA,CAAA;AAEA,oGAAA,CAEA,MAAMR,yCAAI,GAAGD,yCAAb,AAAA;;ADhCA","sources":["packages/react/portal/src/index.ts","packages/react/portal/src/Portal.tsx"],"sourcesContent":["export {\n Portal,\n //\n Root,\n} from './Portal';\nexport type { PortalProps } from './Portal';\n","import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Portal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'Portal';\n\ntype PortalElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface PortalProps extends PrimitiveDivProps {\n /**\n * An optional container where the portaled content should be appended.\n */\n container?: HTMLElement | null;\n}\n\nconst Portal = React.forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {\n const { container = globalThis?.document?.body, ...portalProps } = props;\n return container\n ? ReactDOM.createPortal(<Primitive.div {...portalProps} ref={forwardedRef} />, container)\n : null;\n});\n\nPortal.displayName = PORTAL_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Portal;\n\nexport {\n Portal,\n //\n Root,\n};\nexport type { PortalProps };\n"],"names":["Portal","Root","React","ReactDOM","Primitive","PORTAL_NAME","forwardRef","props","forwardedRef","container","globalThis","document","body","portalProps","createPortal"],"version":3,"file":"index.mjs.map"}

View File

@@ -0,0 +1,56 @@
{
"name": "@radix-ui/react-portal",
"version": "1.0.4",
"license": "MIT",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
},
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"clean": "rm -rf dist",
"version": "yarn version"
},
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-primitive": "1.0.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}

View File

@@ -0,0 +1,13 @@
# `react-presence`
## Installation
```sh
$ yarn add @radix-ui/react-presence
# or
$ npm install @radix-ui/react-presence
```
## Usage
This is an internal utility, not intended for public usage.

View File

@@ -0,0 +1,10 @@
import * as React from "react";
export interface PresenceProps {
children: React.ReactElement | ((props: {
present: boolean;
}) => React.ReactElement);
present: boolean;
}
export const Presence: React.FC<PresenceProps>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,10 @@
import * as React from "react";
export interface PresenceProps {
children: React.ReactElement | ((props: {
present: boolean;
}) => React.ReactElement);
present: boolean;
}
export const Presence: React.FC<PresenceProps>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":";ACMA;IACE,QAAQ,EAAE,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,MAAM,YAAY,CAAC,CAAC;IACrF,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,OAAA,MAAM,UAAU,MAAM,EAAE,CAAC,aAAa,CAarC,CAAC","sources":["packages/react/presence/src/packages/react/presence/src/useStateMachine.tsx","packages/react/presence/src/packages/react/presence/src/Presence.tsx","packages/react/presence/src/packages/react/presence/src/index.ts","packages/react/presence/src/index.ts"],"sourcesContent":[null,null,null,"export { Presence } from './Presence';\nexport type { PresenceProps } from './Presence';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,143 @@
var $fnLeV$react = require("react");
var $fnLeV$reactdom = require("react-dom");
var $fnLeV$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
var $fnLeV$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "Presence", () => $a2fa0214bb2735a1$export$99c2b779aa4e8b8b);
function $8f63844556d0d3cd$export$3e6543de14f8614f(initialState, machine) {
return $fnLeV$react.useReducer((state, event)=>{
const nextState = machine[state][event];
return nextState !== null && nextState !== void 0 ? nextState : state;
}, initialState);
}
const $a2fa0214bb2735a1$export$99c2b779aa4e8b8b = (props)=>{
const { present: present , children: children } = props;
const presence = $a2fa0214bb2735a1$var$usePresence(present);
const child = typeof children === 'function' ? children({
present: presence.isPresent
}) : $fnLeV$react.Children.only(children);
const ref = $fnLeV$radixuireactcomposerefs.useComposedRefs(presence.ref, child.ref);
const forceMount = typeof children === 'function';
return forceMount || presence.isPresent ? /*#__PURE__*/ $fnLeV$react.cloneElement(child, {
ref: ref
}) : null;
};
$a2fa0214bb2735a1$export$99c2b779aa4e8b8b.displayName = 'Presence';
/* -------------------------------------------------------------------------------------------------
* usePresence
* -----------------------------------------------------------------------------------------------*/ function $a2fa0214bb2735a1$var$usePresence(present) {
const [node1, setNode] = $fnLeV$react.useState();
const stylesRef = $fnLeV$react.useRef({});
const prevPresentRef = $fnLeV$react.useRef(present);
const prevAnimationNameRef = $fnLeV$react.useRef('none');
const initialState = present ? 'mounted' : 'unmounted';
const [state, send] = $8f63844556d0d3cd$export$3e6543de14f8614f(initialState, {
mounted: {
UNMOUNT: 'unmounted',
ANIMATION_OUT: 'unmountSuspended'
},
unmountSuspended: {
MOUNT: 'mounted',
ANIMATION_END: 'unmounted'
},
unmounted: {
MOUNT: 'mounted'
}
});
$fnLeV$react.useEffect(()=>{
const currentAnimationName = $a2fa0214bb2735a1$var$getAnimationName(stylesRef.current);
prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';
}, [
state
]);
$fnLeV$radixuireactuselayouteffect.useLayoutEffect(()=>{
const styles = stylesRef.current;
const wasPresent = prevPresentRef.current;
const hasPresentChanged = wasPresent !== present;
if (hasPresentChanged) {
const prevAnimationName = prevAnimationNameRef.current;
const currentAnimationName = $a2fa0214bb2735a1$var$getAnimationName(styles);
if (present) send('MOUNT');
else if (currentAnimationName === 'none' || (styles === null || styles === void 0 ? void 0 : styles.display) === 'none') // If there is no exit animation or the element is hidden, animations won't run
// so we unmount instantly
send('UNMOUNT');
else {
/**
* When `present` changes to `false`, we check changes to animation-name to
* determine whether an animation has started. We chose this approach (reading
* computed styles) because there is no `animationrun` event and `animationstart`
* fires after `animation-delay` has expired which would be too late.
*/ const isAnimating = prevAnimationName !== currentAnimationName;
if (wasPresent && isAnimating) send('ANIMATION_OUT');
else send('UNMOUNT');
}
prevPresentRef.current = present;
}
}, [
present,
send
]);
$fnLeV$radixuireactuselayouteffect.useLayoutEffect(()=>{
if (node1) {
/**
* Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
* event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
* make sure we only trigger ANIMATION_END for the currently active animation.
*/ const handleAnimationEnd = (event)=>{
const currentAnimationName = $a2fa0214bb2735a1$var$getAnimationName(stylesRef.current);
const isCurrentAnimation = currentAnimationName.includes(event.animationName);
if (event.target === node1 && isCurrentAnimation) // With React 18 concurrency this update is applied
// a frame after the animation ends, creating a flash of visible content.
// By manually flushing we ensure they sync within a frame, removing the flash.
$fnLeV$reactdom.flushSync(()=>send('ANIMATION_END')
);
};
const handleAnimationStart = (event)=>{
if (event.target === node1) // if animation occurred, store its name as the previous animation.
prevAnimationNameRef.current = $a2fa0214bb2735a1$var$getAnimationName(stylesRef.current);
};
node1.addEventListener('animationstart', handleAnimationStart);
node1.addEventListener('animationcancel', handleAnimationEnd);
node1.addEventListener('animationend', handleAnimationEnd);
return ()=>{
node1.removeEventListener('animationstart', handleAnimationStart);
node1.removeEventListener('animationcancel', handleAnimationEnd);
node1.removeEventListener('animationend', handleAnimationEnd);
};
} else // Transition to the unmounted state if the node is removed prematurely.
// We avoid doing so during cleanup as the node may change but still exist.
send('ANIMATION_END');
}, [
node1,
send
]);
return {
isPresent: [
'mounted',
'unmountSuspended'
].includes(state),
ref: $fnLeV$react.useCallback((node)=>{
if (node) stylesRef.current = getComputedStyle(node);
setNode(node);
}, [])
};
}
/* -----------------------------------------------------------------------------------------------*/ function $a2fa0214bb2735a1$var$getAnimationName(styles) {
return (styles === null || styles === void 0 ? void 0 : styles.animationName) || 'none';
}
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,139 @@
import {Children as $iqq3r$Children, cloneElement as $iqq3r$cloneElement, useState as $iqq3r$useState, useRef as $iqq3r$useRef, useEffect as $iqq3r$useEffect, useCallback as $iqq3r$useCallback, useReducer as $iqq3r$useReducer} from "react";
import {flushSync as $iqq3r$flushSync} from "react-dom";
import {useComposedRefs as $iqq3r$useComposedRefs} from "@radix-ui/react-compose-refs";
import {useLayoutEffect as $iqq3r$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
return $iqq3r$useReducer((state, event)=>{
const nextState = machine[state][event];
return nextState !== null && nextState !== void 0 ? nextState : state;
}, initialState);
}
const $921a889cee6df7e8$export$99c2b779aa4e8b8b = (props)=>{
const { present: present , children: children } = props;
const presence = $921a889cee6df7e8$var$usePresence(present);
const child = typeof children === 'function' ? children({
present: presence.isPresent
}) : $iqq3r$Children.only(children);
const ref = $iqq3r$useComposedRefs(presence.ref, child.ref);
const forceMount = typeof children === 'function';
return forceMount || presence.isPresent ? /*#__PURE__*/ $iqq3r$cloneElement(child, {
ref: ref
}) : null;
};
$921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
/* -------------------------------------------------------------------------------------------------
* usePresence
* -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$usePresence(present) {
const [node1, setNode] = $iqq3r$useState();
const stylesRef = $iqq3r$useRef({});
const prevPresentRef = $iqq3r$useRef(present);
const prevAnimationNameRef = $iqq3r$useRef('none');
const initialState = present ? 'mounted' : 'unmounted';
const [state, send] = $fe963b355347cc68$export$3e6543de14f8614f(initialState, {
mounted: {
UNMOUNT: 'unmounted',
ANIMATION_OUT: 'unmountSuspended'
},
unmountSuspended: {
MOUNT: 'mounted',
ANIMATION_END: 'unmounted'
},
unmounted: {
MOUNT: 'mounted'
}
});
$iqq3r$useEffect(()=>{
const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';
}, [
state
]);
$iqq3r$useLayoutEffect(()=>{
const styles = stylesRef.current;
const wasPresent = prevPresentRef.current;
const hasPresentChanged = wasPresent !== present;
if (hasPresentChanged) {
const prevAnimationName = prevAnimationNameRef.current;
const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(styles);
if (present) send('MOUNT');
else if (currentAnimationName === 'none' || (styles === null || styles === void 0 ? void 0 : styles.display) === 'none') // If there is no exit animation or the element is hidden, animations won't run
// so we unmount instantly
send('UNMOUNT');
else {
/**
* When `present` changes to `false`, we check changes to animation-name to
* determine whether an animation has started. We chose this approach (reading
* computed styles) because there is no `animationrun` event and `animationstart`
* fires after `animation-delay` has expired which would be too late.
*/ const isAnimating = prevAnimationName !== currentAnimationName;
if (wasPresent && isAnimating) send('ANIMATION_OUT');
else send('UNMOUNT');
}
prevPresentRef.current = present;
}
}, [
present,
send
]);
$iqq3r$useLayoutEffect(()=>{
if (node1) {
/**
* Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
* event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
* make sure we only trigger ANIMATION_END for the currently active animation.
*/ const handleAnimationEnd = (event)=>{
const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
const isCurrentAnimation = currentAnimationName.includes(event.animationName);
if (event.target === node1 && isCurrentAnimation) // With React 18 concurrency this update is applied
// a frame after the animation ends, creating a flash of visible content.
// By manually flushing we ensure they sync within a frame, removing the flash.
$iqq3r$flushSync(()=>send('ANIMATION_END')
);
};
const handleAnimationStart = (event)=>{
if (event.target === node1) // if animation occurred, store its name as the previous animation.
prevAnimationNameRef.current = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
};
node1.addEventListener('animationstart', handleAnimationStart);
node1.addEventListener('animationcancel', handleAnimationEnd);
node1.addEventListener('animationend', handleAnimationEnd);
return ()=>{
node1.removeEventListener('animationstart', handleAnimationStart);
node1.removeEventListener('animationcancel', handleAnimationEnd);
node1.removeEventListener('animationend', handleAnimationEnd);
};
} else // Transition to the unmounted state if the node is removed prematurely.
// We avoid doing so during cleanup as the node may change but still exist.
send('ANIMATION_END');
}, [
node1,
send
]);
return {
isPresent: [
'mounted',
'unmountSuspended'
].includes(state),
ref: $iqq3r$useCallback((node)=>{
if (node) stylesRef.current = getComputedStyle(node);
setNode(node);
}, [])
};
}
/* -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$getAnimationName(styles) {
return (styles === null || styles === void 0 ? void 0 : styles.animationName) || 'none';
}
export {$921a889cee6df7e8$export$99c2b779aa4e8b8b as Presence};
//# sourceMappingURL=index.mjs.map

Some files were not shown because too many files have changed in this diff Show More