@blakesteve/roster 5.10.0 → 5.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +165 -3
- package/dist/components/atoms/PasswordInput/PasswordInput.cjs +1 -1
- package/dist/components/atoms/PasswordInput/PasswordInput.js +5 -5
- package/dist/components/atoms/Select/select-variants.cjs +1 -1
- package/dist/components/atoms/Select/select-variants.js +11 -2
- package/dist/components/molecules/Menu/Menu.cjs +1 -1
- package/dist/components/molecules/Menu/Menu.js +60 -53
- package/dist/components/molecules/RangeSlider/RangeSlider.cjs +1 -0
- package/dist/components/molecules/RangeSlider/RangeSlider.d.ts +74 -0
- package/dist/components/molecules/RangeSlider/RangeSlider.js +164 -0
- package/dist/components/molecules/Slider/Slider.cjs +1 -0
- package/dist/components/molecules/Slider/Slider.d.ts +87 -0
- package/dist/components/molecules/Slider/Slider.js +128 -0
- package/dist/components/molecules/Slider/track-parts.cjs +1 -0
- package/dist/components/molecules/Slider/track-parts.d.ts +64 -0
- package/dist/components/molecules/Slider/track-parts.js +121 -0
- package/dist/components/molecules/Slider/track.cjs +1 -0
- package/dist/components/molecules/Slider/track.d.ts +115 -0
- package/dist/components/molecules/Slider/track.js +152 -0
- package/dist/index.d.ts +2 -0
- package/dist/meta.json +3 -3
- package/dist/roster.cjs +1 -1
- package/dist/roster.css +1 -1
- package/dist/roster.js +67 -63
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -543,6 +543,18 @@ The band matters more than it looks. Without it the ring sits directly on the
|
|
|
543
543
|
fill, and a `primary-500` ring on a `primary-600` button is 1.37:1 — which is
|
|
544
544
|
why the ring and its offset are a pair rather than two independent knobs.
|
|
545
545
|
|
|
546
|
+
**A row in a popup marks focus with the ring too.** The focused row in `Menu`,
|
|
547
|
+
`Select`, `Combobox` and `MultiSelect` keeps its soft primary tint and adds a
|
|
548
|
+
2px inset ring in `--roster-ring`. The tint alone was the indicator until
|
|
549
|
+
5.11.0, and it measured 1.17:1 against the panel in light and 1.03:1 in dark
|
|
550
|
+
on Roster's own defaults: a keyboard user couldn't see where they were. The
|
|
551
|
+
ring follows the token you already set against your own surfaces, so it holds
|
|
552
|
+
wherever the panel is: 6.37:1 and 5.61:1 on the defaults. If you set
|
|
553
|
+
`--roster-popover-bg` to a surface `--roster-ring` doesn't contrast with, set
|
|
554
|
+
the ring with it. In `Menu` the ring shows for keyboard focus only, because the
|
|
555
|
+
pointer moves focus there too. Headless UI's popups mark the keys' row and the
|
|
556
|
+
pointer's alike, so in theirs it shows on hover as well.
|
|
557
|
+
|
|
546
558
|
### Motion
|
|
547
559
|
|
|
548
560
|
Two hand-rolled utilities, both of which stop for `prefers-reduced-motion`.
|
|
@@ -773,6 +785,8 @@ Every field therefore has a second prop, **named for the element it reaches**:
|
|
|
773
785
|
| `Combobox` | `className` | `inputClassName` | `optionsClassName` |
|
|
774
786
|
| `CheckboxGroup`| `className` | — | `optionsClassName` |
|
|
775
787
|
| `RadioGroup` | `className` | `radioClassName` | `optionsClassName`, `optionClassName`, `labelClassName`, `optionLabelClassName`, `descriptionClassName`, `messageClassName` |
|
|
788
|
+
| `Slider` | `className` | `trackClassName` | `thumbClassName`, `chipClassName`, `labelClassName`, `messageClassName` |
|
|
789
|
+
| `RangeSlider` | `className` | `thumbClassName` | `trackClassName`, `chipClassName`, `labelClassName`, `messageClassName` |
|
|
776
790
|
|
|
777
791
|
`CheckboxGroup` and `RadioGroup` have no single "control" to reach, since they
|
|
778
792
|
hold one per option, so `RadioGroup`'s `radioClassName` lands on every radio
|
|
@@ -928,6 +942,10 @@ look like oversights until you know why:
|
|
|
928
942
|
page does not reach it. All three components copy the nearest `.dark` onto
|
|
929
943
|
the panel to fix that. Custom properties are not carried the same way — set
|
|
930
944
|
`--roster-popover-*` at `:root`.
|
|
945
|
+
- **A row is a click target, and focus is a ring.** Every option row shows
|
|
946
|
+
the pointer cursor, as `Menu`'s items do (a disabled one, `not-allowed`).
|
|
947
|
+
A focused row keeps its tint and adds an inset `--roster-ring`, which is
|
|
948
|
+
what reaches 3:1 against the panel ([Focus](#focus)).
|
|
931
949
|
- **`Menu` shares the panel, not the anchoring.** Its panel takes the same
|
|
932
950
|
surface, tokens and dark carry, but `Menu` places itself (see
|
|
933
951
|
[Menu](#menu)), writing its own inline `max-height`. It reads the same
|
|
@@ -1584,8 +1602,10 @@ import { Menu, MenuButton, MenuItems, MenuItem, MenuSeparator } from "@blakestev
|
|
|
1584
1602
|
- **Styling.** `className` on `MenuItems` and on each item merges last, so a
|
|
1585
1603
|
fill such as `bg-gray-100` takes; the scroll shadows are drawn over it. Its
|
|
1586
1604
|
ring and separators follow `--roster-border-width`. Items show the pointer
|
|
1587
|
-
cursor, a disabled one `not-allowed`.
|
|
1588
|
-
|
|
1605
|
+
cursor, a disabled one `not-allowed`. Keyboard focus adds an inset ring in
|
|
1606
|
+
`--roster-ring` to the item's tint, which alone doesn't reach 3:1 against
|
|
1607
|
+
the panel ([Focus](#focus)). In forced colors the focused item gets an
|
|
1608
|
+
outline, since its fill and ring are dropped.
|
|
1589
1609
|
- **Targets.** Every item is at least 44px tall, and `MenuButton` at least 44
|
|
1590
1610
|
by 44 whatever its size. `MenuButton plain` renders a bare `<button>` for a
|
|
1591
1611
|
trigger drawn its own way; keep its target at least 44 by 44 with a hit
|
|
@@ -1599,6 +1619,120 @@ that its rows are 44px tall rather than 36, and that with neither an inbox nor
|
|
|
1599
1619
|
a theme row it no longer draws an empty band and rule at the top. It keeps its
|
|
1600
1620
|
own white fill, whatever `--roster-popover-bg` says.
|
|
1601
1621
|
|
|
1622
|
+
### Slider
|
|
1623
|
+
|
|
1624
|
+
A value picked along a track: tapped, dragged, stepped with the keys, or set
|
|
1625
|
+
from a named snap point.
|
|
1626
|
+
|
|
1627
|
+
```tsx
|
|
1628
|
+
import { Slider } from "@blakesteve/roster";
|
|
1629
|
+
|
|
1630
|
+
<Slider
|
|
1631
|
+
label="How sure are you?"
|
|
1632
|
+
value={sure}
|
|
1633
|
+
onChange={setSure}
|
|
1634
|
+
snapPoints={[{ value: 100, label: "Certain" }, { value: 75, label: "Likely" }, { value: 50, label: "Toss-up" }]}
|
|
1635
|
+
formatValue={(v) => `${v}%`}
|
|
1636
|
+
/>;
|
|
1637
|
+
```
|
|
1638
|
+
|
|
1639
|
+
- **It starts with a thumb**, in the middle of the range by default.
|
|
1640
|
+
`startValue` moves where it starts, and `defaultValue` sets it outright:
|
|
1641
|
+
`defaultValue={0}` starts it at the low end.
|
|
1642
|
+
- **Not set** is opt-in: `defaultValue={null}`, or `value={null}` when
|
|
1643
|
+
controlled, leaves the track empty with no thumb until the first input. A
|
|
1644
|
+
form takes it as a valid answer: under `name` it submits an empty string.
|
|
1645
|
+
Controlled, `value` can go back to `null`, which is how a consumer offers a
|
|
1646
|
+
clear.
|
|
1647
|
+
- **Snap points** are named stops, any values and labels: a selectable
|
|
1648
|
+
`Chip` under the track for each, in the track's order, moves the thumb
|
|
1649
|
+
there, and a bead on the rail shows where. They're shortcuts, so dragging
|
|
1650
|
+
still lands anywhere between them. A chip shows as pressed (solid rather
|
|
1651
|
+
than outline) while the value is exactly its value, and pressing it again
|
|
1652
|
+
leaves it there. A point outside `min` to `max` is left out.
|
|
1653
|
+
- **The number** shows beside the label (`formatValue` writes it). A screen
|
|
1654
|
+
reader hears it with the nearest snap point's name, "72%, Likely", and
|
|
1655
|
+
"Not set" while there's no value, never a number. Every string is in
|
|
1656
|
+
`labels`.
|
|
1657
|
+
- **In range.** A value outside `min` to `max` shows, and is said, at the
|
|
1658
|
+
end it's past. A controlled owner that turns a change down (a clamp, say)
|
|
1659
|
+
leaves the next key stepping from the value it kept.
|
|
1660
|
+
- **Pointer.** A tap on the track sets the value there; a press on the thumb
|
|
1661
|
+
takes it without a jump, and commits only if the drag moved it. On touch
|
|
1662
|
+
the track waits to see which way a finger goes: across is a drag, down the
|
|
1663
|
+
page scrolls it and sets nothing (and takes no focus), and a tap sets on
|
|
1664
|
+
lift. A pointermove with no press, which WebKit sends when content scrolls
|
|
1665
|
+
under a resting pointer, sets nothing. A second finger is left alone.
|
|
1666
|
+
- **Keys.** The arrows step by `step`, PageUp and PageDown by `pageStep` (a
|
|
1667
|
+
tenth of the range by default), Home and End go to the ends. **On an empty
|
|
1668
|
+
slider an arrow or Page key places the thumb at `startValue`, the middle
|
|
1669
|
+
by default**; it doesn't step from anywhere. A key at an end does nothing.
|
|
1670
|
+
From a value between steps, a key goes to the next step that way. Keys
|
|
1671
|
+
always step from the value last set, never from where the thumb is drawn
|
|
1672
|
+
while it eases there, so a burst of presses counts every one. A key the
|
|
1673
|
+
consumer's own `onKeyDown` handled (`preventDefault`) is left to it.
|
|
1674
|
+
- **Focus.** By keyboard, the ring is round the thumb; an empty slider rings
|
|
1675
|
+
the track. A disabled slider takes no focus at all.
|
|
1676
|
+
- **Form.** Under `name` it submits its value, or an empty string while not
|
|
1677
|
+
set; disabled, nothing, as a disabled input submits nothing. A form's
|
|
1678
|
+
reset puts an uncontrolled slider back where it started.
|
|
1679
|
+
- **Targets.** The track is 44px tall and its rail stops 22px short of each
|
|
1680
|
+
end, so the thumb's 44 by 44 target stays on it at every value. Each chip
|
|
1681
|
+
has Chip's 44px-tall target and is at least 44 wide, and the chip row sits
|
|
1682
|
+
8px under the track so its targets never take the thumb's. Under reduced
|
|
1683
|
+
motion the thumb moves without easing. Under `dir="rtl"` the track runs
|
|
1684
|
+
from the right.
|
|
1685
|
+
- **Look.** The rail is a light surface edged in `--roster-control-border`,
|
|
1686
|
+
which carries a control edge's 3:1 when there's no thumb to show the
|
|
1687
|
+
slider. Snap points are beads set in the rail, the edge's color on the bare
|
|
1688
|
+
rail and the page's on the fill.
|
|
1689
|
+
|
|
1690
|
+
One thumb. Two, for a range, is [RangeSlider](#rangeslider), on the same
|
|
1691
|
+
track, so `value` here stays a number.
|
|
1692
|
+
|
|
1693
|
+
### RangeSlider
|
|
1694
|
+
|
|
1695
|
+
A low and a high along one track: `Slider`'s track, with two thumbs.
|
|
1696
|
+
|
|
1697
|
+
```tsx
|
|
1698
|
+
import { RangeSlider } from "@blakesteve/roster";
|
|
1699
|
+
|
|
1700
|
+
<RangeSlider
|
|
1701
|
+
label="Price"
|
|
1702
|
+
min={0}
|
|
1703
|
+
max={500}
|
|
1704
|
+
step={5}
|
|
1705
|
+
value={price}
|
|
1706
|
+
onChange={setPrice}
|
|
1707
|
+
formatValue={(v) => `$${v}`}
|
|
1708
|
+
/>;
|
|
1709
|
+
```
|
|
1710
|
+
|
|
1711
|
+
- **It starts at the whole range**, `[min, max]`, unless `defaultValue`
|
|
1712
|
+
says otherwise. `value` is `[low, high]`, always low first: a pair given
|
|
1713
|
+
the wrong way round is shown the right way. There's no not-set state; the
|
|
1714
|
+
whole range is what "any" looks like.
|
|
1715
|
+
- **Each thumb is a slider** to the keyboard and a screen reader: its own
|
|
1716
|
+
tab stop, named for the slider and its end ("Price Minimum", "Price
|
|
1717
|
+
Maximum", both in `labels`), whose `aria-valuemin` and `aria-valuemax`
|
|
1718
|
+
run to the other thumb. The thumbs meet and never cross: End on the low
|
|
1719
|
+
thumb takes it to the high one. The whole is a group named by the label.
|
|
1720
|
+
- **Pointer.** A press takes the nearer thumb: a tap on the track moves it
|
|
1721
|
+
there, a drag carries it. Two thumbs on one spot part by the way the drag
|
|
1722
|
+
first moves, up the range taking the high one. Touch, the resting
|
|
1723
|
+
pointer, the second finger and the keys work as `Slider`'s do.
|
|
1724
|
+
- **Snap points** put a bead on the rail and a `Chip` under it, which does
|
|
1725
|
+
what a tap on its mark does: moves the nearer thumb there (halfway, the
|
|
1726
|
+
low one). A chip shows as pressed while either thumb is on it.
|
|
1727
|
+
- **The number** beside the label shows both, "$120 – $340"
|
|
1728
|
+
(`labels.range`). Each thumb says its own value with the nearest snap
|
|
1729
|
+
point's name.
|
|
1730
|
+
- **Form.** Under `name` both values are submitted, low then high, as a
|
|
1731
|
+
multiple select's are: read them with `formData.getAll(name)`.
|
|
1732
|
+
- **Focus, targets, motion, RTL and look** as `Slider`'s: the ring is round
|
|
1733
|
+
the focused thumb, each thumb's 44 by 44 target stays on the track at
|
|
1734
|
+
every value.
|
|
1735
|
+
|
|
1602
1736
|
### Pagination
|
|
1603
1737
|
|
|
1604
1738
|
Moves through pages of a list, built for a long list browsed on a phone.
|
|
@@ -1886,6 +2020,8 @@ function App() {
|
|
|
1886
2020
|
| `StepProgress` | Named steps: a stepper with markers and connectors, or a compact segmented "Step x of y" |
|
|
1887
2021
|
| `Pullquote` | A line lifted out of prose, as `<figure>` + `<blockquote>` + `<figcaption>` |
|
|
1888
2022
|
| `RadioGroup` | Radio set reporting one `string`; descriptions, error, 44px targets |
|
|
2023
|
+
| `Slider` | A value along a track, starting in the middle or not set on request; named snap-point chips, a visible number, the full keyboard, 44px targets (see [Slider](#slider)) |
|
|
2024
|
+
| `RangeSlider` | A low and a high on one track: two thumbs that meet and never cross, each its own slider to the keyboard (see [RangeSlider](#rangeslider)) |
|
|
1889
2025
|
| `Toast` | Transient floating notice; `Toaster` + the imperative `toast` handle |
|
|
1890
2026
|
|
|
1891
2027
|
### Organisms
|
|
@@ -1997,6 +2133,32 @@ such as `AvatarStrip`'s `ringClass`, stays exactly as they wrote it.
|
|
|
1997
2133
|
|
|
1998
2134
|
`npm run build` fails if any unprefixed class reaches `dist/roster.css`.
|
|
1999
2135
|
|
|
2136
|
+
## Authoring components: cursors
|
|
2137
|
+
|
|
2138
|
+
**If it's clickable, it's the pointer.** Every element that does something
|
|
2139
|
+
when it's clicked shows `cursor: pointer`, and says so in its classes. A
|
|
2140
|
+
browser gives a button the arrow; Tailwind v3's preflight gave it the pointer
|
|
2141
|
+
and v4's doesn't, so a `<button>` with no cursor class shows the arrow. Until 5.11.0 the option rows
|
|
2142
|
+
in `Select`, `Combobox` and `MultiSelect` showed the arrow while `Menu`'s
|
|
2143
|
+
showed the pointer, and `PasswordInput`'s reveal button showed the arrow too.
|
|
2144
|
+
|
|
2145
|
+
- A disabled control shows `not-allowed`.
|
|
2146
|
+
- A busy one may say so: `Button`'s `loading` shows `progress`.
|
|
2147
|
+
- A text field's label keeps the arrow, as a native one does: clicking it puts
|
|
2148
|
+
the caret in the field rather than doing something.
|
|
2149
|
+
|
|
2150
|
+
Three things keep another cursor, because they aren't click targets:
|
|
2151
|
+
|
|
2152
|
+
- **`Breadcrumbs`' current crumb** is the page you're on, not a link:
|
|
2153
|
+
`default`.
|
|
2154
|
+
- **`Tooltip`'s trigger wrapper** isn't necessarily clickable: `default`. A
|
|
2155
|
+
control inside it brings its own pointer.
|
|
2156
|
+
- **A drag surface** says what it does: `Carousel`'s track and `Sheet`'s drag
|
|
2157
|
+
handle show `grab`, then `grabbing`.
|
|
2158
|
+
|
|
2159
|
+
`src/internal/popups.checks.stories.tsx` reads the computed cursor on a row in
|
|
2160
|
+
each popup, with a disabled row as its twin.
|
|
2161
|
+
|
|
2000
2162
|
## Development
|
|
2001
2163
|
|
|
2002
2164
|
Storybook is the component playground. Each component has dedicated stories covering all variants, props, and light/dark mode.
|
|
@@ -2128,7 +2290,7 @@ like a file count but counts `describe` blocks — 166 against 92 real files.
|
|
|
2128
2290
|
Pull requests are welcome. Please:
|
|
2129
2291
|
|
|
2130
2292
|
1. Open an issue or discussion first for significant changes
|
|
2131
|
-
2. Follow the existing code style (CVA variants, forwardRef, Storybook stories, unit tests)
|
|
2293
|
+
2. Follow the existing code style (CVA variants, forwardRef, Storybook stories, unit tests) and the authoring rules above: the `rst:` prefix and cursors
|
|
2132
2294
|
3. Fill out the pull request template checklist before requesting review
|
|
2133
2295
|
|
|
2134
2296
|
## License
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),j=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),c=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),a=require("../../../lib/utils.cjs"),S=require("../Input/Input.cjs"),u=i.forwardRef(({revealable:l=!0,defaultRevealed:d=!1,revealed:r,onRevealChange:p,showLabel:y="Show password",hideLabel:f="Hide password",disabled:s,variant:m,error:w,errorMessage:h,className:v,...x},g)=>{const[I,q]=i.useState(d),o=r!==void 0,t=o?r:I,b=()=>{const n=!t;o||q(n),p?.(n)};return e.jsx(S.Input,{ref:g,type:t?"text":"password",disabled:s,variant:m,error:w,errorMessage:h,className:a.cn("rst:[&_input::-ms-reveal]:hidden",v),endIcon:l?e.jsx("button",{type:"button",onClick:b,disabled:s,"aria-label":t?f:y,"aria-pressed":t,className:a.cn("rst:-m-1 rst:flex rst:items-center rst:rounded-sm rst:p-1 rst:transition-opacity","rst:opacity-70 rst:hover:opacity-100","rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",s?"rst:cursor-not-allowed rst:opacity-40 rst:hover:opacity-40":"rst:cursor-pointer"),children:e.jsx(j.FontAwesomeIcon,{icon:t?c.faEyeSlash:c.faEye,className:"rst:h-4 rst:w-4","aria-hidden":"true"})}):void 0,...x})});u.displayName="PasswordInput";exports.PasswordInput=u;
|
|
@@ -10,8 +10,8 @@ const C = i.forwardRef(
|
|
|
10
10
|
revealable: c = !0,
|
|
11
11
|
defaultRevealed: l = !1,
|
|
12
12
|
revealed: s,
|
|
13
|
-
onRevealChange:
|
|
14
|
-
showLabel:
|
|
13
|
+
onRevealChange: p,
|
|
14
|
+
showLabel: d = "Show password",
|
|
15
15
|
hideLabel: m = "Hide password",
|
|
16
16
|
disabled: r,
|
|
17
17
|
variant: u,
|
|
@@ -22,7 +22,7 @@ const C = i.forwardRef(
|
|
|
22
22
|
}, v) => {
|
|
23
23
|
const [g, x] = i.useState(l), e = s !== void 0, t = e ? s : g, I = () => {
|
|
24
24
|
const n = !t;
|
|
25
|
-
e || x(n),
|
|
25
|
+
e || x(n), p?.(n);
|
|
26
26
|
};
|
|
27
27
|
return /* @__PURE__ */ o(
|
|
28
28
|
_,
|
|
@@ -40,13 +40,13 @@ const C = i.forwardRef(
|
|
|
40
40
|
type: "button",
|
|
41
41
|
onClick: I,
|
|
42
42
|
disabled: r,
|
|
43
|
-
"aria-label": t ? m :
|
|
43
|
+
"aria-label": t ? m : d,
|
|
44
44
|
"aria-pressed": t,
|
|
45
45
|
className: a(
|
|
46
46
|
"rst:-m-1 rst:flex rst:items-center rst:rounded-sm rst:p-1 rst:transition-opacity",
|
|
47
47
|
"rst:opacity-70 rst:hover:opacity-100",
|
|
48
48
|
"rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",
|
|
49
|
-
r
|
|
49
|
+
r ? "rst:cursor-not-allowed rst:opacity-40 rst:hover:opacity-40" : "rst:cursor-pointer"
|
|
50
50
|
),
|
|
51
51
|
children: /* @__PURE__ */ o(
|
|
52
52
|
N,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:relative rst:flex rst:w-full rst:cursor-pointer rst:disabled:cursor-not-allowed rst:disabled:opacity-50 rst:items-center rst:rounded-md rst:h-10 rst:pl-4 rst:pr-10 rst:text-left rst:text-sm rst:font-medium rst:elevation-control rst:ring rst:ring-inset rst:transition-all rst:focus:outline-hidden rst:focus-visible:ring-[length:calc(var(--roster-border-width,1px)+1px)] rst:focus-visible:ring-ring",{variants:{variant:{white:"rst:bg-white rst:text-gray-900 rst:ring-gray-300 rst:hover:bg-gray-50 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:ring-gray-700 rst:dark:hover:bg-gray-700",soft:"rst:bg-gray-100 rst:text-gray-900 rst:ring-[var(--roster-control-border)] rst:hover:bg-gray-200 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:hover:bg-gray-700",slate:"rst:bg-gray-700 rst:text-gray-100 rst:ring-transparent rst:hover:bg-gray-600 rst:dark:bg-gray-900 rst:dark:text-gray-100 rst:dark:hover:bg-gray-800",outline:"rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:ring-[color:var(--roster-control-border)]",ghost:"rst:bg-transparent rst:text-gray-700 rst:ring-transparent rst:hover:bg-gray-100 rst:hover:text-gray-900 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800 rst:dark:hover:text-gray-100"},size:{sm:"rst:h-9 rst:pl-3 rst:pr-9",default:"rst:h-10 rst:pl-4 rst:pr-10",lg:"rst:h-11 rst:pl-4 rst:pr-10"},error:{true:"rst:ring-error-500 rst:text-error-600 rst:focus-visible:ring-error-500 rst:dark:ring-error-500 rst:dark:text-error-400 rst:dark:focus-visible:ring-error-400",false:""}},defaultVariants:{variant:"outline",size:"default",error:!1}}),s=r.cva("rst:text-sm rst:group rst:relative rst:cursor-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:relative rst:flex rst:w-full rst:cursor-pointer rst:disabled:cursor-not-allowed rst:disabled:opacity-50 rst:items-center rst:rounded-md rst:h-10 rst:pl-4 rst:pr-10 rst:text-left rst:text-sm rst:font-medium rst:elevation-control rst:ring rst:ring-inset rst:transition-all rst:focus:outline-hidden rst:focus-visible:ring-[length:calc(var(--roster-border-width,1px)+1px)] rst:focus-visible:ring-ring",{variants:{variant:{white:"rst:bg-white rst:text-gray-900 rst:ring-gray-300 rst:hover:bg-gray-50 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:ring-gray-700 rst:dark:hover:bg-gray-700",soft:"rst:bg-gray-100 rst:text-gray-900 rst:ring-[var(--roster-control-border)] rst:hover:bg-gray-200 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:hover:bg-gray-700",slate:"rst:bg-gray-700 rst:text-gray-100 rst:ring-transparent rst:hover:bg-gray-600 rst:dark:bg-gray-900 rst:dark:text-gray-100 rst:dark:hover:bg-gray-800",outline:"rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:ring-[color:var(--roster-control-border)]",ghost:"rst:bg-transparent rst:text-gray-700 rst:ring-transparent rst:hover:bg-gray-100 rst:hover:text-gray-900 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800 rst:dark:hover:text-gray-100"},size:{sm:"rst:h-9 rst:pl-3 rst:pr-9",default:"rst:h-10 rst:pl-4 rst:pr-10",lg:"rst:h-11 rst:pl-4 rst:pr-10"},error:{true:"rst:ring-error-500 rst:text-error-600 rst:focus-visible:ring-error-500 rst:dark:ring-error-500 rst:dark:text-error-400 rst:dark:focus-visible:ring-error-400",false:""}},defaultVariants:{variant:"outline",size:"default",error:!1}}),s=r.cva("rst:data-focus:ring-2 rst:data-focus:ring-inset rst:data-focus:ring-ring rst:forced-colors:data-focus:outline-solid rst:forced-colors:data-focus:outline-2 rst:forced-colors:data-focus:-outline-offset-2 rst:text-sm rst:group rst:relative rst:cursor-pointer rst:select-none rst:py-2.5 rst:pl-4 rst:pr-9 rst:transition-colors rst:text-inherit rst:data-focus:bg-primary-100 rst:data-focus:text-primary-900 rst:dark:data-focus:bg-primary-900/30 rst:dark:data-focus:text-primary-100 rst:data-selected:bg-gray-50 rst:dark:data-selected:bg-gray-700/50 rst:data-disabled:opacity-50 rst:data-disabled:cursor-not-allowed",{variants:{size:{sm:"rst:py-2 rst:pl-3 rst:pr-8",default:"rst:py-2.5 rst:pl-4 rst:pr-9",lg:"rst:py-2.5 rst:pl-4 rst:pr-9"}},defaultVariants:{size:"default"}});exports.selectOptionVariants=s;exports.selectTriggerVariants=t;
|
|
@@ -76,8 +76,17 @@ const s = /* @__PURE__ */ r(
|
|
|
76
76
|
`text-sm` lives here rather than on the popup, and carries no `sm:`. The
|
|
77
77
|
popup used to set `text-base sm:text-sm`, which made a menu row 44px on
|
|
78
78
|
mobile and 40px from `sm` up: the exact breakpoint-dependent geometry this
|
|
79
|
-
change removed from the trigger, still alive one element away.
|
|
80
|
-
|
|
79
|
+
change removed from the trigger, still alive one element away.
|
|
80
|
+
|
|
81
|
+
`cursor-pointer`: a row is a click target, as Menu's are.
|
|
82
|
+
|
|
83
|
+
Focus is the tint and an inset ring in the focus token. The tint alone
|
|
84
|
+
measures under 1.2:1 against the panel in both themes, on the default
|
|
85
|
+
surface and a consumer's; the ring follows the token a consumer tunes
|
|
86
|
+
against their own surfaces, and holds 3:1 on any of them. Headless UI's
|
|
87
|
+
`data-focus` comes from the keys and the pointer alike, so the ring shows
|
|
88
|
+
on hover too. In forced colors, which drop both, focus is an outline. */
|
|
89
|
+
"rst:data-focus:ring-2 rst:data-focus:ring-inset rst:data-focus:ring-ring rst:forced-colors:data-focus:outline-solid rst:forced-colors:data-focus:outline-2 rst:forced-colors:data-focus:-outline-offset-2 rst:text-sm rst:group rst:relative rst:cursor-pointer rst:select-none rst:py-2.5 rst:pl-4 rst:pr-9 rst:transition-colors rst:text-inherit rst:data-focus:bg-primary-100 rst:data-focus:text-primary-900 rst:dark:data-focus:bg-primary-900/30 rst:dark:data-focus:text-primary-100 rst:data-selected:bg-gray-50 rst:dark:data-selected:bg-gray-700/50 rst:data-disabled:opacity-50 rst:data-disabled:cursor-not-allowed",
|
|
81
90
|
{
|
|
82
91
|
variants: {
|
|
83
92
|
size: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),ge=require("react"),W=require("../../../node_modules/@headlessui/react/dist/components/portal/portal.cjs"),A=require("../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs"),E=require("../../../lib/utils.cjs"),he=require("../../../internal/popup.cjs"),be=require("../../atoms/Button/Button.cjs"),xe=require("./menu-typeahead.cjs"),ye=require("../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.cjs");function ve(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const i=ve(ge);function we({href:e,to:r,children:n,...o}){return c.jsx("a",{href:e,...o,children:n})}const G=i.createContext(null),_=i.createContext(null),V=i.createContext(null);function R(e){const r=i.useContext(G);if(!r)throw new Error(`<${e}> must be inside a <Menu>.`);return r}function K(e){const r=i.useContext(_);if(!r)throw new Error(`<${e}> must be inside <MenuItems> or a <MenuSubmenu>.`);return r}const ke="[data-menu-item]",Y=100,Ie=75,Ee='a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])';function L(e){return e?[...e.querySelectorAll(ke)].filter(r=>r.closest("[data-menu-panel]")===e):[]}function S(e){e&&(e.focus({preventScroll:!0}),e.scrollIntoView?.({block:"nearest"}))}function $(e){return!!e&&getComputedStyle(e).direction==="rtl"}function Se(e,r){const n=[...document.querySelectorAll(Ee)].filter(t=>t===e||t.tabIndex>=0&&!t.matches(":disabled")&&!t.closest("[data-menu-panel], [inert]")&&t.getClientRects().length>0&&getComputedStyle(t).visibility!=="hidden"&&!Me(t,r)),o=n.indexOf(e);((r?n[o-1]:n[o+1])??e).focus()}function Me(e,r){if(!(e instanceof HTMLInputElement)||e.type!=="radio"||!e.name)return!1;const n=[...e.ownerDocument.querySelectorAll(`input[type="radio"][name="${CSS.escape(e.name)}"]`)].filter(a=>a.form===e.form&&!a.disabled);return(n.find(a=>a.checked)??(r?n[n.length-1]:n[0]))!==e}const D={x:Number.NaN,y:Number.NaN};let H=!1;function je(){H||typeof window>"u"||(H=!0,window.addEventListener("pointermove",e=>{D.x=e.clientX,D.y=e.clientY},{passive:!0}))}function X(e){return!Number.isNaN(D.x)&&(e.clientX!==D.x||e.clientY!==D.y)}const U=e=>`radial-gradient(farthest-side at 50% ${e==="top"?"0":"100%"}, var(--menu-edge), transparent)`,J={backgroundImage:"var(--menu-edge-top, none), var(--menu-edge-bottom, none)",backgroundPosition:"top, bottom",backgroundSize:"100% 0.5rem",backgroundRepeat:"no-repeat"};function Pe(e){i.useLayoutEffect(()=>{if(!e)return;const r=()=>{const o=e.scrollTop>8,a=e.scrollTop+e.clientHeight<e.scrollHeight-8;e.toggleAttribute("data-more-above",o),e.toggleAttribute("data-more-below",a),e.style.setProperty("--menu-edge-top",o?U("top"):"none"),e.style.setProperty("--menu-edge-bottom",a?U("bottom"):"none")};r(),e.addEventListener("scroll",r,{passive:!0});const n=typeof ResizeObserver>"u"?null:new ResizeObserver(r);return n?.observe(e),()=>{e.removeEventListener("scroll",r),n?.disconnect()}},[e])}function Q(e,r){const[n,o]=e.split("-"),a=r?"right":"left",t=r?"left":"right";return n==="top"||n==="bottom"?`${n==="bottom"?"top":"bottom"} ${o==="end"?t:o==="start"?a:"center"}`:`${o==="end"?"bottom":"top"} ${n==="right"?"left":"right"}`}const Z=E.cn("rst:font-ui",he.POPUP_PANEL,"rst:w-max rst:min-w-48 rst:max-w-[min(20rem,calc(100vw-1rem))] rst:overflow-y-auto rst:overscroll-contain rst:custom-scrollbar","rst:[--menu-edge:rgb(0_0_0/0.18)] rst:dark:[--menu-edge:rgb(0_0_0/0.6)]","rst:transition-[opacity,scale] rst:duration-100 rst:ease-out rst:data-closed:opacity-0 rst:data-closed:scale-95 rst:data-leaving:duration-75 rst:data-leaving:ease-in rst:data-closed:pointer-events-none rst:motion-reduce:transition-none");function ee(e){const[r,n]=i.useState(e),[o,a]=i.useState(!0);return i.useLayoutEffect(()=>{if(e){n(!0);const s=requestAnimationFrame(()=>a(!1));return()=>cancelAnimationFrame(s)}a(!0);const t=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,d=window.setTimeout(()=>n(!1),t?0:Ie);return()=>window.clearTimeout(d)},[e]),{mounted:r,closed:o,leaving:r&&!e}}function te(e,r,n,o,a,t=!1){const[d,s]=i.useState(null),u=A.useFloating({open:r,strategy:"fixed",transform:!1,placement:n,elements:{reference:e},whileElementsMounted:ye.autoUpdate,middleware:[A.offset(o),A.flip({padding:8}),A.shift({padding:8,crossAxis:t}),A.size({padding:8,apply({availableHeight:f,elements:l}){l.floating.style.maxHeight=`min(var(--anchor-max-height, 100vh), ${Math.max(f,96)}px)`}})]}),{setFloating:p}=u.refs,m=i.useCallback(f=>{a.current=f,s(f),p(f)},[a,p]);return Pe(d),{...u,setPanel:m,panelEl:d}}const re=500;function ne(){const e=i.useRef({text:"",at:0}),r=i.useCallback(()=>e.current.text!==""&&performance.now()-e.current.at<=re,[]);return{typedRef:e,typingAhead:r}}function oe({panelRef:e,typedRef:r,onEscape:n,onBack:o}){const a=R("MenuItems");return t=>{const d=e.current;if(!d||!d.contains(t.target)||(!t.ctrlKey&&!t.metaKey&&!t.altKey&&t.stopPropagation(),t.defaultPrevented))return;const s=L(d),u=s.indexOf(document.activeElement),p=$(d);switch(t.key){case"ArrowDown":t.preventDefault(),t.stopPropagation(),S(s[(u+1)%s.length]);return;case"ArrowUp":t.preventDefault(),t.stopPropagation(),S(s[u<=0?s.length-1:u-1]);return;case"Home":case"PageUp":t.preventDefault(),t.stopPropagation(),S(s[0]);return;case"End":case"PageDown":t.preventDefault(),t.stopPropagation(),S(s[s.length-1]);return;case"Escape":t.preventDefault(),t.stopPropagation(),n();return;case"Tab":{t.preventDefault(),t.stopPropagation();const m=a.triggerRef.current;a.close(!1),m&&Se(m,t.shiftKey);return}case"ArrowLeft":case"ArrowRight":o&&t.key===(p?"ArrowRight":"ArrowLeft")&&(t.preventDefault(),t.stopPropagation(),o());return}if(t.key.length===1&&!t.ctrlKey&&!t.metaKey&&!t.altKey){const m=performance.now(),f=r.current.text!==""&&m-r.current.at<=re;if(t.key===" "&&!f)return;t.preventDefault(),r.current={text:f?r.current.text+t.key:t.key,at:m};const l=s.map(w=>w.dataset.menuText??w.textContent??""),b=xe.nextByTypeahead(l,u,r.current.text);b!==-1&&S(s[b])}}}function Te({children:e,open:r,onOpenChange:n,linkComponent:o=we}){const[a,t]=i.useState(!1),d=r??a,s=i.useId(),u=i.useRef(null),[p,m]=i.useState(null),f=i.useCallback(g=>{u.current=g,m(g)},[]),l=i.useRef("panel"),b=i.useCallback(g=>{r===void 0&&t(g),n?.(g)},[r,n]),w=i.useMemo(()=>({treeId:s,open:d,openWith:g=>{l.current=g,b(!0)},close:g=>{b(!1),g&&u.current?.focus()},triggerRef:u,triggerEl:p,registerTrigger:f,triggerId:`${s}-button`,panelId:`${s}-menu`,focusOnOpen:l,linkComponent:o}),[s,d,b,o,p,f]);return i.useEffect(()=>{if(!d)return;je();const g=I=>{I.target?.closest?.(`[data-menu-tree="${s}"]`)||(b(!1),requestAnimationFrame(()=>{(document.activeElement===document.body||!document.activeElement)&&u.current?.focus({preventScroll:!0})}))};return document.addEventListener("pointerdown",g,!0),()=>document.removeEventListener("pointerdown",g,!0)},[d,s,b]),c.jsx(G.Provider,{value:w,children:e})}const Re=i.forwardRef(function({plain:r=!1,className:n,onClick:o,onKeyDown:a,children:t,...d},s){const{variant:u,colorScheme:p,size:m,isLoading:f,loadingLabel:l,startIcon:b,endIcon:w,surface:g,...I}=d,h=R("MenuButton"),{registerTrigger:M}=h,j=i.useCallback(x=>{M(x),typeof s=="function"?s(x):s&&(s.current=x)},[M,s]),P={id:h.triggerId,"aria-haspopup":"menu","aria-expanded":h.open,"aria-controls":h.open?h.panelId:void 0,"data-menu-tree":h.treeId,onClick:x=>{o?.(x),!x.defaultPrevented&&(h.open?h.close(!1):h.openWith("panel"))},onKeyDown:x=>{if(a?.(x),x.defaultPrevented)return;const y=x.key==="Enter"||x.key===" "||x.key==="ArrowDown"?"first":x.key==="ArrowUp"?"last":null;if(!y)return;x.preventDefault();const k=h.open?document.getElementById(h.panelId):null;if(k){const C=L(k);S(y==="last"?C[C.length-1]:C[0]);return}h.openWith(y)}};return r?c.jsx("button",{ref:j,type:"button",className:n,...I,...P,children:t}):c.jsx(be.Button,{ref:j,className:E.cn("rst:min-h-11 rst:min-w-11",n),variant:u,colorScheme:p,size:m,isLoading:f,loadingLabel:l,startIcon:b,endIcon:w,surface:g,...I,...P,children:t})});function Ce({children:e,align:r="start",offset:n=4,className:o,...a}){const t=R("MenuItems"),{mounted:d,closed:s,leaving:u}=ee(t.open),p=i.useRef(null),m=$(t.triggerEl),{setPanel:f,panelEl:l,floatingStyles:b,placement:w,isPositioned:g}=te(t.triggerEl,d,`bottom-${r}`,n,p),I=se(),{typedRef:h,typingAhead:M}=ne(),j=oe({panelRef:p,typedRef:h,onEscape:()=>t.close(!0)});i.useLayoutEffect(()=>{if(!t.open||!l)return;const y=L(l),k=t.focusOnOpen.current;k==="first"&&y[0]?S(y[0]):k==="last"&&y.length?S(y[y.length-1]):l.focus({preventScroll:!0})},[t.open,l,t.focusOnOpen]),i.useLayoutEffect(()=>{if(!g||!l)return;const y=document.activeElement;y&&y!==l&&l.contains(y)&&y.scrollIntoView?.({block:"nearest"})},[g,l]),i.useLayoutEffect(()=>{!t.open&&l?.contains(document.activeElement)&&t.triggerRef.current?.focus({preventScroll:!0})},[t.open,l,t.triggerRef]);const P=y=>{const k=y.relatedTarget;k&&!k.closest(`[data-menu-tree="${t.treeId}"]`)&&t.close(!1)};if(!d)return null;const x=!!t.triggerEl?.closest(".dark");return c.jsx(W.Portal,{children:c.jsx(_.Provider,{value:{...I,panelRef:p,typingAhead:M},children:c.jsx("div",{ref:f,id:t.panelId,dir:m?"rtl":"ltr",role:"menu","aria-labelledby":a["aria-label"]?void 0:t.triggerId,"aria-label":a["aria-label"],tabIndex:-1,"data-menu-panel":"","data-menu-tree":t.treeId,"data-closed":s?"":void 0,"data-leaving":u?"":void 0,onKeyDown:j,onBlur:P,style:{...b,...J,transformOrigin:Q(w,m)},className:E.cn(x&&"dark",Z,o),children:e})})})}function se(){const[e,r]=i.useState(null),n=i.useRef(!1),o=i.useRef(void 0);return i.useEffect(()=>()=>window.clearTimeout(o.current),[]),{openSubmenu:e,focusFirstInSubmenu:n,setOpenSubmenu:(a,t=!1)=>{window.clearTimeout(o.current),n.current=t,r(a)},hoverItem:a=>{window.clearTimeout(o.current),a===null&&(o.current=window.setTimeout(()=>r(null),Y))}}}const O=E.cn("rst:relative rst:flex rst:w-full rst:min-h-11 rst:items-center rst:gap-2.5 rst:border-0 rst:bg-transparent rst:px-3 rst:py-2 rst:text-start rst:text-sm rst:text-inherit rst:no-underline rst:[font-family:inherit] rst:cursor-pointer rst:select-none rst:outline-none rst:transition-colors","rst:focus:bg-primary-100 rst:focus:text-primary-900 rst:dark:focus:bg-primary-900/30 rst:dark:focus:text-primary-100 rst:forced-colors:focus:outline-solid rst:forced-colors:focus:outline-2 rst:forced-colors:focus:-outline-offset-2","rst:aria-disabled:opacity-50 rst:aria-disabled:cursor-not-allowed"),q="rst:text-error-600 rst:dark:text-error-400 rst:focus:bg-error-50 rst:focus:text-error-700 rst:dark:focus:bg-error-900/30 rst:dark:focus:text-error-300",Ae=()=>c.jsx("svg",{viewBox:"0 0 16 16",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:c.jsx("path",{d:"M3.5 8.5 6.5 11.5 12.5 4.5"})}),De=()=>c.jsx("svg",{viewBox:"0 0 16 16",width:"16",height:"16","aria-hidden":"true",children:c.jsx("circle",{cx:"8",cy:"8",r:"3.5",fill:"currentColor"})}),Le=()=>c.jsx("svg",{viewBox:"0 0 16 16",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",className:"rst:rtl:rotate-180",children:c.jsx("path",{d:"M6 3.5 10.5 8 6 12.5"})});function T({icon:e,shortcut:r,description:n,badge:o,children:a},t,d,s){const u=t??e;return c.jsxs(c.Fragment,{children:[u!=null&&c.jsx("span",{"aria-hidden":"true",className:E.cn("rst:flex rst:size-4 rst:shrink-0 rst:items-center rst:justify-center",n!=null&&"rst:self-start rst:mt-0.5"),"data-menu-lead":"",children:u}),c.jsxs("span",{className:"rst:min-w-0 rst:flex-1 rst:break-words","data-menu-label":"",children:[a,n!=null&&c.jsx("span",{id:s,"aria-hidden":"true",className:"rst:block rst:text-xs rst:opacity-75","data-menu-description":"",children:n})]}),o!=null&&c.jsx("span",{className:"rst:flex rst:shrink-0 rst:items-center","data-menu-badge":"",children:o}),r&&c.jsx("span",{"aria-hidden":"true",className:"rst:ms-auto rst:shrink-0 rst:ps-4 rst:text-xs rst:tracking-wide rst:opacity-70","data-menu-shortcut":"",children:r}),d]})}function z({disabled:e,closeOnSelect:r,onChoose:n,spaceKeepsOpen:o}){const a=R("MenuItem"),t=K("MenuItem"),d=(s,u)=>{if(e){s.preventDefault();return}n(s),u&&a.close(!0)};return{onClick:s=>d(s,r),onKeyDown:s=>{if(s.key===" "){if(t.typingAhead())return;s.preventDefault(),d(s,r&&!o)}},onPointerMove:s=>{X(s)&&(t.hoverItem(null),document.activeElement!==s.currentTarget&&s.currentTarget.focus({preventScroll:!0}))}}}function Oe({onSelect:e,href:r,closeOnSelect:n=!0,disabled:o,destructive:a,keyshortcuts:t,textValue:d,className:s,...u}){const p=R("MenuItem"),m=K("MenuItem"),f=i.useId(),l=z({disabled:o,closeOnSelect:n,onChoose:g=>e?.(g)}),b=E.cn(O,a&&q,s),w={role:"menuitem",tabIndex:-1,"aria-disabled":o?!0:void 0,"aria-keyshortcuts":t,"aria-describedby":u.description!=null?f:void 0,"data-menu-item":"","data-menu-text":d,"data-destructive":a?"":void 0};if(r!==void 0){const g=p.linkComponent;return c.jsx(g,{href:r,to:r,className:b,...w,onClick:l.onClick,onPointerMove:l.onPointerMove,onKeyDown:I=>{if(I.key===" "){if(m.typingAhead())return;I.preventDefault(),o||I.currentTarget.click()}},children:T(u,void 0,void 0,f)})}return c.jsx("button",{type:"button",className:b,...w,...l,children:T(u,void 0,void 0,f)})}function Ne({checked:e,onCheckedChange:r,indicator:n,closeOnSelect:o=!0,disabled:a,destructive:t,keyshortcuts:d,textValue:s,className:u,...p}){const m=z({disabled:a,closeOnSelect:o,spaceKeepsOpen:!0,onChoose:()=>r(!e)}),f=i.useId();return c.jsx("button",{type:"button",role:"menuitemcheckbox","aria-checked":e,"aria-describedby":p.description!=null?f:void 0,tabIndex:-1,"aria-disabled":a||void 0,"aria-keyshortcuts":d,"data-menu-item":"","data-menu-text":s,className:E.cn(O,t&&q,u),...m,children:n===void 0?T(p,c.jsx("span",{className:e?void 0:"rst:invisible","data-menu-check":"",children:c.jsx(Ae,{})}),void 0,f):T(p,void 0,c.jsx("span",{"aria-hidden":"true",className:"rst:ms-auto rst:flex rst:shrink-0 rst:items-center",children:n}),f)})}function Be({value:e,onValueChange:r,label:n,children:o,className:a}){return c.jsx(V.Provider,{value:{value:e,onValueChange:r},children:c.jsx(ae,{label:n,className:a,children:o})})}function _e({value:e,closeOnSelect:r=!0,disabled:n,destructive:o,keyshortcuts:a,textValue:t,className:d,...s}){const u=i.useContext(V);if(!u)throw new Error("<MenuRadioItem> must be inside a <MenuRadioGroup>.");const p=u.value===e,m=z({disabled:n,closeOnSelect:r,spaceKeepsOpen:!0,onChoose:()=>u.onValueChange?.(e)}),f=i.useId();return c.jsx("button",{type:"button",role:"menuitemradio","aria-checked":p,"aria-describedby":s.description!=null?f:void 0,tabIndex:-1,"aria-disabled":n||void 0,"aria-keyshortcuts":a,"data-menu-item":"","data-menu-text":t,className:E.cn(O,o&&q,d),...m,children:T(s,c.jsx("span",{className:p?void 0:"rst:invisible","data-menu-check":"",children:c.jsx(De,{})}),void 0,f)})}function ae({label:e,children:r,className:n}){const o=i.useId();return c.jsxs("div",{role:"group","aria-labelledby":e?o:void 0,className:n,children:[e&&c.jsx("div",{id:o,className:"rst:px-3 rst:pt-2 rst:pb-1 rst:text-xs rst:font-semibold rst:text-gray-600 rst:dark:text-gray-400","data-menu-heading":"",children:e}),r]})}function Ke({className:e}){return c.jsx("div",{role:"separator",className:E.cn("rst:my-1 rst:h-[var(--roster-border-width,1px)] rst:bg-[var(--roster-popover-border)]",e)})}function $e({label:e,children:r,icon:n,disabled:o,textValue:a,className:t,panelClassName:d}){const s=R("MenuSubmenu"),u=K("MenuSubmenu"),p=i.useId(),m=`${p}-item`,f=`${p}-menu`,l=u.openSubmenu===m,b=i.useRef(null),[w,g]=i.useState(null),I=i.useCallback(v=>{b.current=v,g(v)},[]),h=i.useRef(null),M=i.useRef(void 0),j=i.useRef("mouse"),{mounted:P,closed:x,leaving:y}=ee(l),k=$(w),{setPanel:C,panelEl:N,floatingStyles:ie,placement:ue}=te(w,P,k?"left-start":"right-start",{mainAxis:0,alignmentAxis:-4},h,!0),ce=se();i.useEffect(()=>()=>window.clearTimeout(M.current),[]);const F=()=>{u.setOpenSubmenu(null),b.current?.focus({preventScroll:!0})},{typedRef:le,typingAhead:de}=ne(),fe=oe({panelRef:h,typedRef:le,onEscape:F,onBack:F});i.useLayoutEffect(()=>{!l||!N||u.focusFirstInSubmenu.current&&S(L(N)[0])},[l,N,u.focusFirstInSubmenu]);const B=v=>{if(!o){if(l&&v&&h.current){S(L(h.current)[0]);return}u.setOpenSubmenu(m,v)}},me=!!s.triggerEl?.closest(".dark");return c.jsxs(c.Fragment,{children:[c.jsx("button",{ref:I,id:m,type:"button",role:"menuitem",tabIndex:-1,"aria-haspopup":"menu","aria-expanded":l,"aria-controls":l?f:void 0,"aria-disabled":o||void 0,"data-menu-item":"","data-menu-text":a,"data-menu-tree":s.treeId,className:E.cn(O,l&&"rst:bg-gray-100 rst:dark:bg-gray-700/50",t),onPointerDown:v=>{j.current=v.pointerType},onClick:()=>l&&j.current!=="mouse"?u.setOpenSubmenu(null):B(!1),onKeyDown:v=>{const pe=k?"ArrowLeft":"ArrowRight";v.key===" "&&u.typingAhead()||(v.key===pe||v.key==="Enter"||v.key===" ")&&(v.preventDefault(),B(!0))},onPointerMove:v=>{X(v)&&(u.hoverItem(m),document.activeElement!==v.currentTarget&&v.currentTarget.focus({preventScroll:!0}),!l&&!o&&(window.clearTimeout(M.current),M.current=window.setTimeout(()=>B(!1),Y)))},onPointerLeave:()=>window.clearTimeout(M.current),children:T({icon:n,children:e},void 0,c.jsx("span",{"aria-hidden":"true",className:"rst:ms-auto rst:flex rst:shrink-0 rst:items-center rst:opacity-70","data-menu-chevron":"",children:c.jsx(Le,{})}))}),P&&c.jsx(W.Portal,{children:c.jsx(_.Provider,{value:{...ce,panelRef:h,typingAhead:de},children:c.jsx("div",{ref:C,id:f,dir:k?"rtl":"ltr",role:"menu","aria-labelledby":m,tabIndex:-1,"data-menu-panel":"","data-menu-tree":s.treeId,"data-closed":x?"":void 0,"data-leaving":y?"":void 0,onKeyDown:fe,onPointerEnter:()=>u.hoverItem(m),style:{...ie,...J,transformOrigin:Q(ue,k)},className:E.cn(me&&"dark",Z,d),children:r})})})]})}exports.Menu=Te;exports.MenuButton=Re;exports.MenuCheckboxItem=Ne;exports.MenuGroup=ae;exports.MenuItem=Oe;exports.MenuItems=Ce;exports.MenuRadioGroup=Be;exports.MenuRadioItem=_e;exports.MenuSeparator=Ke;exports.MenuSubmenu=$e;
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),ge=require("react"),W=require("../../../node_modules/@headlessui/react/dist/components/portal/portal.cjs"),C=require("../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs"),S=require("../../../lib/utils.cjs"),he=require("../../../internal/popup.cjs"),be=require("../../atoms/Button/Button.cjs"),xe=require("./menu-typeahead.cjs"),ye=require("../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.cjs");function ve(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const i=ve(ge);function we({href:e,to:r,children:n,...o}){return c.jsx("a",{href:e,...o,children:n})}const G=i.createContext(null),_=i.createContext(null),V=i.createContext(null);function A(e){const r=i.useContext(G);if(!r)throw new Error(`<${e}> must be inside a <Menu>.`);return r}function K(e){const r=i.useContext(_);if(!r)throw new Error(`<${e}> must be inside <MenuItems> or a <MenuSubmenu>.`);return r}const ke="[data-menu-item]",Y=100,Ie=75,Ee='a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])';function L(e){return e?[...e.querySelectorAll(ke)].filter(r=>r.closest("[data-menu-panel]")===e):[]}function E(e){e&&(e.setAttribute("data-key-focus",""),e.addEventListener("blur",()=>e.removeAttribute("data-key-focus"),{once:!0}),e.focus({preventScroll:!0}),e.scrollIntoView?.({block:"nearest"}))}function $(e){return!!e&&getComputedStyle(e).direction==="rtl"}function Se(e,r){const n=[...document.querySelectorAll(Ee)].filter(t=>t===e||t.tabIndex>=0&&!t.matches(":disabled")&&!t.closest("[data-menu-panel], [inert]")&&t.getClientRects().length>0&&getComputedStyle(t).visibility!=="hidden"&&!Me(t,r)),o=n.indexOf(e);((r?n[o-1]:n[o+1])??e).focus()}function Me(e,r){if(!(e instanceof HTMLInputElement)||e.type!=="radio"||!e.name)return!1;const n=[...e.ownerDocument.querySelectorAll(`input[type="radio"][name="${CSS.escape(e.name)}"]`)].filter(a=>a.form===e.form&&!a.disabled);return(n.find(a=>a.checked)??(r?n[n.length-1]:n[0]))!==e}const D={x:Number.NaN,y:Number.NaN};let H=!1;function je(){H||typeof window>"u"||(H=!0,window.addEventListener("pointermove",e=>{D.x=e.clientX,D.y=e.clientY},{passive:!0}))}function X(e){return!Number.isNaN(D.x)&&(e.clientX!==D.x||e.clientY!==D.y)}const U=e=>`radial-gradient(farthest-side at 50% ${e==="top"?"0":"100%"}, var(--menu-edge), transparent)`,J={backgroundImage:"var(--menu-edge-top, none), var(--menu-edge-bottom, none)",backgroundPosition:"top, bottom",backgroundSize:"100% 0.5rem",backgroundRepeat:"no-repeat"};function Pe(e){i.useLayoutEffect(()=>{if(!e)return;const r=()=>{const o=e.scrollTop>8,a=e.scrollTop+e.clientHeight<e.scrollHeight-8;e.toggleAttribute("data-more-above",o),e.toggleAttribute("data-more-below",a),e.style.setProperty("--menu-edge-top",o?U("top"):"none"),e.style.setProperty("--menu-edge-bottom",a?U("bottom"):"none")};r(),e.addEventListener("scroll",r,{passive:!0});const n=typeof ResizeObserver>"u"?null:new ResizeObserver(r);return n?.observe(e),()=>{e.removeEventListener("scroll",r),n?.disconnect()}},[e])}function Q(e,r){const[n,o]=e.split("-"),a=r?"right":"left",t=r?"left":"right";return n==="top"||n==="bottom"?`${n==="bottom"?"top":"bottom"} ${o==="end"?t:o==="start"?a:"center"}`:`${o==="end"?"bottom":"top"} ${n==="right"?"left":"right"}`}const Z=S.cn("rst:font-ui",he.POPUP_PANEL,"rst:w-max rst:min-w-48 rst:max-w-[min(20rem,calc(100vw-1rem))] rst:overflow-y-auto rst:overscroll-contain rst:custom-scrollbar","rst:[--menu-edge:rgb(0_0_0/0.18)] rst:dark:[--menu-edge:rgb(0_0_0/0.6)]","rst:transition-[opacity,scale] rst:duration-100 rst:ease-out rst:data-closed:opacity-0 rst:data-closed:scale-95 rst:data-leaving:duration-75 rst:data-leaving:ease-in rst:data-closed:pointer-events-none rst:motion-reduce:transition-none");function ee(e){const[r,n]=i.useState(e),[o,a]=i.useState(!0);return i.useLayoutEffect(()=>{if(e){n(!0);const s=requestAnimationFrame(()=>a(!1));return()=>cancelAnimationFrame(s)}a(!0);const t=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,d=window.setTimeout(()=>n(!1),t?0:Ie);return()=>window.clearTimeout(d)},[e]),{mounted:r,closed:o,leaving:r&&!e}}function te(e,r,n,o,a,t=!1){const[d,s]=i.useState(null),u=C.useFloating({open:r,strategy:"fixed",transform:!1,placement:n,elements:{reference:e},whileElementsMounted:ye.autoUpdate,middleware:[C.offset(o),C.flip({padding:8}),C.shift({padding:8,crossAxis:t}),C.size({padding:8,apply({availableHeight:f,elements:l}){l.floating.style.maxHeight=`min(var(--anchor-max-height, 100vh), ${Math.max(f,96)}px)`}})]}),{setFloating:p}=u.refs,m=i.useCallback(f=>{a.current=f,s(f),p(f)},[a,p]);return Pe(d),{...u,setPanel:m,panelEl:d}}const re=500;function ne(){const e=i.useRef({text:"",at:0}),r=i.useCallback(()=>e.current.text!==""&&performance.now()-e.current.at<=re,[]);return{typedRef:e,typingAhead:r}}function oe({panelRef:e,typedRef:r,onEscape:n,onBack:o}){const a=A("MenuItems");return t=>{const d=e.current;if(!d||!d.contains(t.target)||(!t.ctrlKey&&!t.metaKey&&!t.altKey&&t.stopPropagation(),t.defaultPrevented))return;const s=L(d),u=s.indexOf(document.activeElement),p=$(d);switch(t.key){case"ArrowDown":t.preventDefault(),t.stopPropagation(),E(s[(u+1)%s.length]);return;case"ArrowUp":t.preventDefault(),t.stopPropagation(),E(s[u<=0?s.length-1:u-1]);return;case"Home":case"PageUp":t.preventDefault(),t.stopPropagation(),E(s[0]);return;case"End":case"PageDown":t.preventDefault(),t.stopPropagation(),E(s[s.length-1]);return;case"Escape":t.preventDefault(),t.stopPropagation(),n();return;case"Tab":{t.preventDefault(),t.stopPropagation();const m=a.triggerRef.current;a.close(!1),m&&Se(m,t.shiftKey);return}case"ArrowLeft":case"ArrowRight":o&&t.key===(p?"ArrowRight":"ArrowLeft")&&(t.preventDefault(),t.stopPropagation(),o());return}if(t.key.length===1&&!t.ctrlKey&&!t.metaKey&&!t.altKey){const m=performance.now(),f=r.current.text!==""&&m-r.current.at<=re;if(t.key===" "&&!f)return;t.preventDefault(),r.current={text:f?r.current.text+t.key:t.key,at:m};const l=s.map(w=>w.dataset.menuText??w.textContent??""),b=xe.nextByTypeahead(l,u,r.current.text);b!==-1&&E(s[b])}}}function Te({children:e,open:r,onOpenChange:n,linkComponent:o=we}){const[a,t]=i.useState(!1),d=r??a,s=i.useId(),u=i.useRef(null),[p,m]=i.useState(null),f=i.useCallback(g=>{u.current=g,m(g)},[]),l=i.useRef("panel"),b=i.useCallback(g=>{r===void 0&&t(g),n?.(g)},[r,n]),w=i.useMemo(()=>({treeId:s,open:d,openWith:g=>{l.current=g,b(!0)},close:g=>{b(!1),g&&u.current?.focus()},triggerRef:u,triggerEl:p,registerTrigger:f,triggerId:`${s}-button`,panelId:`${s}-menu`,focusOnOpen:l,linkComponent:o}),[s,d,b,o,p,f]);return i.useEffect(()=>{if(!d)return;je();const g=I=>{I.target?.closest?.(`[data-menu-tree="${s}"]`)||(b(!1),requestAnimationFrame(()=>{(document.activeElement===document.body||!document.activeElement)&&u.current?.focus({preventScroll:!0})}))};return document.addEventListener("pointerdown",g,!0),()=>document.removeEventListener("pointerdown",g,!0)},[d,s,b]),c.jsx(G.Provider,{value:w,children:e})}const Ae=i.forwardRef(function({plain:r=!1,className:n,onClick:o,onKeyDown:a,children:t,...d},s){const{variant:u,colorScheme:p,size:m,isLoading:f,loadingLabel:l,startIcon:b,endIcon:w,surface:g,...I}=d,h=A("MenuButton"),{registerTrigger:M}=h,j=i.useCallback(x=>{M(x),typeof s=="function"?s(x):s&&(s.current=x)},[M,s]),P={id:h.triggerId,"aria-haspopup":"menu","aria-expanded":h.open,"aria-controls":h.open?h.panelId:void 0,"data-menu-tree":h.treeId,onClick:x=>{o?.(x),!x.defaultPrevented&&(h.open?h.close(!1):h.openWith("panel"))},onKeyDown:x=>{if(a?.(x),x.defaultPrevented)return;const y=x.key==="Enter"||x.key===" "||x.key==="ArrowDown"?"first":x.key==="ArrowUp"?"last":null;if(!y)return;x.preventDefault();const k=h.open?document.getElementById(h.panelId):null;if(k){const R=L(k);E(y==="last"?R[R.length-1]:R[0]);return}h.openWith(y)}};return r?c.jsx("button",{ref:j,type:"button",className:n,...I,...P,children:t}):c.jsx(be.Button,{ref:j,className:S.cn("rst:min-h-11 rst:min-w-11",n),variant:u,colorScheme:p,size:m,isLoading:f,loadingLabel:l,startIcon:b,endIcon:w,surface:g,...I,...P,children:t})});function Re({children:e,align:r="start",offset:n=4,className:o,...a}){const t=A("MenuItems"),{mounted:d,closed:s,leaving:u}=ee(t.open),p=i.useRef(null),m=$(t.triggerEl),{setPanel:f,panelEl:l,floatingStyles:b,placement:w,isPositioned:g}=te(t.triggerEl,d,`bottom-${r}`,n,p),I=se(),{typedRef:h,typingAhead:M}=ne(),j=oe({panelRef:p,typedRef:h,onEscape:()=>t.close(!0)});i.useLayoutEffect(()=>{if(!t.open||!l)return;const y=L(l),k=t.focusOnOpen.current;k==="first"&&y[0]?E(y[0]):k==="last"&&y.length?E(y[y.length-1]):l.focus({preventScroll:!0})},[t.open,l,t.focusOnOpen]),i.useLayoutEffect(()=>{if(!g||!l)return;const y=document.activeElement;y&&y!==l&&l.contains(y)&&y.scrollIntoView?.({block:"nearest"})},[g,l]),i.useLayoutEffect(()=>{!t.open&&l?.contains(document.activeElement)&&t.triggerRef.current?.focus({preventScroll:!0})},[t.open,l,t.triggerRef]);const P=y=>{const k=y.relatedTarget;k&&!k.closest(`[data-menu-tree="${t.treeId}"]`)&&t.close(!1)};if(!d)return null;const x=!!t.triggerEl?.closest(".dark");return c.jsx(W.Portal,{children:c.jsx(_.Provider,{value:{...I,panelRef:p,typingAhead:M},children:c.jsx("div",{ref:f,id:t.panelId,dir:m?"rtl":"ltr",role:"menu","aria-labelledby":a["aria-label"]?void 0:t.triggerId,"aria-label":a["aria-label"],tabIndex:-1,"data-menu-panel":"","data-menu-tree":t.treeId,"data-closed":s?"":void 0,"data-leaving":u?"":void 0,onKeyDown:j,onBlur:P,style:{...b,...J,transformOrigin:Q(w,m)},className:S.cn(x&&"dark",Z,o),children:e})})})}function se(){const[e,r]=i.useState(null),n=i.useRef(!1),o=i.useRef(void 0);return i.useEffect(()=>()=>window.clearTimeout(o.current),[]),{openSubmenu:e,focusFirstInSubmenu:n,setOpenSubmenu:(a,t=!1)=>{window.clearTimeout(o.current),n.current=t,r(a)},hoverItem:a=>{window.clearTimeout(o.current),a===null&&(o.current=window.setTimeout(()=>r(null),Y))}}}const O=S.cn("rst:relative rst:flex rst:w-full rst:min-h-11 rst:items-center rst:gap-2.5 rst:border-0 rst:bg-transparent rst:px-3 rst:py-2 rst:text-start rst:text-sm rst:text-inherit rst:no-underline rst:[font-family:inherit] rst:cursor-pointer rst:select-none rst:outline-none rst:transition-colors","rst:focus:bg-primary-100 rst:focus:text-primary-900 rst:dark:focus:bg-primary-900/30 rst:dark:focus:text-primary-100 rst:forced-colors:focus:outline-solid rst:forced-colors:focus:outline-2 rst:forced-colors:focus:-outline-offset-2","rst:data-key-focus:ring-2 rst:data-key-focus:ring-inset rst:data-key-focus:ring-ring","rst:aria-disabled:opacity-50 rst:aria-disabled:cursor-not-allowed"),q="rst:text-error-600 rst:dark:text-error-400 rst:focus:bg-error-50 rst:focus:text-error-700 rst:dark:focus:bg-error-900/30 rst:dark:focus:text-error-300",Ce=()=>c.jsx("svg",{viewBox:"0 0 16 16",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:c.jsx("path",{d:"M3.5 8.5 6.5 11.5 12.5 4.5"})}),De=()=>c.jsx("svg",{viewBox:"0 0 16 16",width:"16",height:"16","aria-hidden":"true",children:c.jsx("circle",{cx:"8",cy:"8",r:"3.5",fill:"currentColor"})}),Le=()=>c.jsx("svg",{viewBox:"0 0 16 16",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",className:"rst:rtl:rotate-180",children:c.jsx("path",{d:"M6 3.5 10.5 8 6 12.5"})});function T({icon:e,shortcut:r,description:n,badge:o,children:a},t,d,s){const u=t??e;return c.jsxs(c.Fragment,{children:[u!=null&&c.jsx("span",{"aria-hidden":"true",className:S.cn("rst:flex rst:size-4 rst:shrink-0 rst:items-center rst:justify-center",n!=null&&"rst:self-start rst:mt-0.5"),"data-menu-lead":"",children:u}),c.jsxs("span",{className:"rst:min-w-0 rst:flex-1 rst:break-words","data-menu-label":"",children:[a,n!=null&&c.jsx("span",{id:s,"aria-hidden":"true",className:"rst:block rst:text-xs rst:opacity-75","data-menu-description":"",children:n})]}),o!=null&&c.jsx("span",{className:"rst:flex rst:shrink-0 rst:items-center","data-menu-badge":"",children:o}),r&&c.jsx("span",{"aria-hidden":"true",className:"rst:ms-auto rst:shrink-0 rst:ps-4 rst:text-xs rst:tracking-wide rst:opacity-70","data-menu-shortcut":"",children:r}),d]})}function z({disabled:e,closeOnSelect:r,onChoose:n,spaceKeepsOpen:o}){const a=A("MenuItem"),t=K("MenuItem"),d=(s,u)=>{if(e){s.preventDefault();return}n(s),u&&a.close(!0)};return{onClick:s=>d(s,r),onKeyDown:s=>{if(s.key===" "){if(t.typingAhead())return;s.preventDefault(),d(s,r&&!o)}},onPointerMove:s=>{X(s)&&(t.hoverItem(null),document.activeElement!==s.currentTarget&&s.currentTarget.focus({preventScroll:!0}))}}}function Oe({onSelect:e,href:r,closeOnSelect:n=!0,disabled:o,destructive:a,keyshortcuts:t,textValue:d,className:s,...u}){const p=A("MenuItem"),m=K("MenuItem"),f=i.useId(),l=z({disabled:o,closeOnSelect:n,onChoose:g=>e?.(g)}),b=S.cn(O,a&&q,s),w={role:"menuitem",tabIndex:-1,"aria-disabled":o?!0:void 0,"aria-keyshortcuts":t,"aria-describedby":u.description!=null?f:void 0,"data-menu-item":"","data-menu-text":d,"data-destructive":a?"":void 0};if(r!==void 0){const g=p.linkComponent;return c.jsx(g,{href:r,to:r,className:b,...w,onClick:l.onClick,onPointerMove:l.onPointerMove,onKeyDown:I=>{if(I.key===" "){if(m.typingAhead())return;I.preventDefault(),o||I.currentTarget.click()}},children:T(u,void 0,void 0,f)})}return c.jsx("button",{type:"button",className:b,...w,...l,children:T(u,void 0,void 0,f)})}function Ne({checked:e,onCheckedChange:r,indicator:n,closeOnSelect:o=!0,disabled:a,destructive:t,keyshortcuts:d,textValue:s,className:u,...p}){const m=z({disabled:a,closeOnSelect:o,spaceKeepsOpen:!0,onChoose:()=>r(!e)}),f=i.useId();return c.jsx("button",{type:"button",role:"menuitemcheckbox","aria-checked":e,"aria-describedby":p.description!=null?f:void 0,tabIndex:-1,"aria-disabled":a||void 0,"aria-keyshortcuts":d,"data-menu-item":"","data-menu-text":s,className:S.cn(O,t&&q,u),...m,children:n===void 0?T(p,c.jsx("span",{className:e?void 0:"rst:invisible","data-menu-check":"",children:c.jsx(Ce,{})}),void 0,f):T(p,void 0,c.jsx("span",{"aria-hidden":"true",className:"rst:ms-auto rst:flex rst:shrink-0 rst:items-center",children:n}),f)})}function Be({value:e,onValueChange:r,label:n,children:o,className:a}){return c.jsx(V.Provider,{value:{value:e,onValueChange:r},children:c.jsx(ae,{label:n,className:a,children:o})})}function _e({value:e,closeOnSelect:r=!0,disabled:n,destructive:o,keyshortcuts:a,textValue:t,className:d,...s}){const u=i.useContext(V);if(!u)throw new Error("<MenuRadioItem> must be inside a <MenuRadioGroup>.");const p=u.value===e,m=z({disabled:n,closeOnSelect:r,spaceKeepsOpen:!0,onChoose:()=>u.onValueChange?.(e)}),f=i.useId();return c.jsx("button",{type:"button",role:"menuitemradio","aria-checked":p,"aria-describedby":s.description!=null?f:void 0,tabIndex:-1,"aria-disabled":n||void 0,"aria-keyshortcuts":a,"data-menu-item":"","data-menu-text":t,className:S.cn(O,o&&q,d),...m,children:T(s,c.jsx("span",{className:p?void 0:"rst:invisible","data-menu-check":"",children:c.jsx(De,{})}),void 0,f)})}function ae({label:e,children:r,className:n}){const o=i.useId();return c.jsxs("div",{role:"group","aria-labelledby":e?o:void 0,className:n,children:[e&&c.jsx("div",{id:o,className:"rst:px-3 rst:pt-2 rst:pb-1 rst:text-xs rst:font-semibold rst:text-gray-600 rst:dark:text-gray-400","data-menu-heading":"",children:e}),r]})}function Ke({className:e}){return c.jsx("div",{role:"separator",className:S.cn("rst:my-1 rst:h-[var(--roster-border-width,1px)] rst:bg-[var(--roster-popover-border)]",e)})}function $e({label:e,children:r,icon:n,disabled:o,textValue:a,className:t,panelClassName:d}){const s=A("MenuSubmenu"),u=K("MenuSubmenu"),p=i.useId(),m=`${p}-item`,f=`${p}-menu`,l=u.openSubmenu===m,b=i.useRef(null),[w,g]=i.useState(null),I=i.useCallback(v=>{b.current=v,g(v)},[]),h=i.useRef(null),M=i.useRef(void 0),j=i.useRef("mouse"),{mounted:P,closed:x,leaving:y}=ee(l),k=$(w),{setPanel:R,panelEl:N,floatingStyles:ie,placement:ue}=te(w,P,k?"left-start":"right-start",{mainAxis:0,alignmentAxis:-4},h,!0),ce=se();i.useEffect(()=>()=>window.clearTimeout(M.current),[]);const F=()=>{u.setOpenSubmenu(null),E(b.current)},{typedRef:le,typingAhead:de}=ne(),fe=oe({panelRef:h,typedRef:le,onEscape:F,onBack:F});i.useLayoutEffect(()=>{!l||!N||u.focusFirstInSubmenu.current&&E(L(N)[0])},[l,N,u.focusFirstInSubmenu]);const B=v=>{if(!o){if(l&&v&&h.current){E(L(h.current)[0]);return}u.setOpenSubmenu(m,v)}},me=!!s.triggerEl?.closest(".dark");return c.jsxs(c.Fragment,{children:[c.jsx("button",{ref:I,id:m,type:"button",role:"menuitem",tabIndex:-1,"aria-haspopup":"menu","aria-expanded":l,"aria-controls":l?f:void 0,"aria-disabled":o||void 0,"data-menu-item":"","data-menu-text":a,"data-menu-tree":s.treeId,className:S.cn(O,l&&"rst:bg-gray-100 rst:dark:bg-gray-700/50",t),onPointerDown:v=>{j.current=v.pointerType},onClick:()=>l&&j.current!=="mouse"?u.setOpenSubmenu(null):B(!1),onKeyDown:v=>{const pe=k?"ArrowLeft":"ArrowRight";v.key===" "&&u.typingAhead()||(v.key===pe||v.key==="Enter"||v.key===" ")&&(v.preventDefault(),B(!0))},onPointerMove:v=>{X(v)&&(u.hoverItem(m),document.activeElement!==v.currentTarget&&v.currentTarget.focus({preventScroll:!0}),!l&&!o&&(window.clearTimeout(M.current),M.current=window.setTimeout(()=>B(!1),Y)))},onPointerLeave:()=>window.clearTimeout(M.current),children:T({icon:n,children:e},void 0,c.jsx("span",{"aria-hidden":"true",className:"rst:ms-auto rst:flex rst:shrink-0 rst:items-center rst:opacity-70","data-menu-chevron":"",children:c.jsx(Le,{})}))}),P&&c.jsx(W.Portal,{children:c.jsx(_.Provider,{value:{...ce,panelRef:h,typingAhead:de},children:c.jsx("div",{ref:R,id:f,dir:k?"rtl":"ltr",role:"menu","aria-labelledby":m,tabIndex:-1,"data-menu-panel":"","data-menu-tree":s.treeId,"data-closed":x?"":void 0,"data-leaving":y?"":void 0,onKeyDown:fe,onPointerEnter:()=>u.hoverItem(m),style:{...ie,...J,transformOrigin:Q(ue,k)},className:S.cn(me&&"dark",Z,d),children:r})})})]})}exports.Menu=Te;exports.MenuButton=Ae;exports.MenuCheckboxItem=Ne;exports.MenuGroup=ae;exports.MenuItem=Oe;exports.MenuItems=Re;exports.MenuRadioGroup=Be;exports.MenuRadioItem=_e;exports.MenuSeparator=Ke;exports.MenuSubmenu=$e;
|