@k2b/ui 0.31.0 → 0.33.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/dist/base.css +2 -0
- package/dist/browser/actions/Dropdown.js +159 -99
- package/dist/browser/actions/Dropdown.js.map +1 -1
- package/dist/browser/actions/FilterChip.js +113 -56
- package/dist/browser/actions/FilterChip.js.map +1 -1
- package/dist/browser/actions/ViewTabs.js +8 -0
- package/dist/browser/actions/ViewTabs.js.map +1 -1
- package/dist/browser/actions/filter-messages.js +26 -2
- package/dist/browser/actions/filter-messages.js.map +1 -1
- package/dist/browser/actions/menu-rows.js +23 -3
- package/dist/browser/actions/menu-rows.js.map +1 -1
- package/dist/browser/actions/menu-sheet.js +2 -7
- package/dist/browser/actions/menu-sheet.js.map +1 -1
- package/dist/browser/chat/ChatComposer.js +480 -403
- package/dist/browser/chat/ChatComposer.js.map +1 -1
- package/dist/browser/chat/chat-messages.js +14 -0
- package/dist/browser/chat/chat-messages.js.map +1 -1
- package/dist/browser/chat/index.js.map +1 -1
- package/dist/browser/content/Calendar.js +39 -29
- package/dist/browser/content/Calendar.js.map +1 -1
- package/dist/browser/content/CalendarDayView.js +159 -165
- package/dist/browser/content/CalendarDayView.js.map +1 -1
- package/dist/browser/content/Chart.js +104 -55
- package/dist/browser/content/Chart.js.map +1 -1
- package/dist/browser/content/ChartExplorer.js +5 -3
- package/dist/browser/content/ChartExplorer.js.map +1 -1
- package/dist/browser/content/MapView.js +4 -4
- package/dist/browser/content/MapView.js.map +1 -1
- package/dist/browser/content/MessageRow.js +607 -343
- package/dist/browser/content/MessageRow.js.map +1 -1
- package/dist/browser/content/ReactionBar.js +17 -0
- package/dist/browser/content/ReactionBar.js.map +1 -1
- package/dist/browser/content/chart-inspection-core.js +4 -1
- package/dist/browser/content/chart-inspection-core.js.map +1 -1
- package/dist/browser/content/code-highlight.js +66 -0
- package/dist/browser/content/code-highlight.js.map +1 -1
- package/dist/browser/content/index.js +2 -1
- package/dist/browser/content/index.js.map +1 -1
- package/dist/browser/content/map-view-live.js +47 -10
- package/dist/browser/content/map-view-live.js.map +1 -1
- package/dist/browser/content/map-view-types.js.map +1 -1
- package/dist/browser/feedback/dialog-core.js +6 -0
- package/dist/browser/feedback/dialog-core.js.map +1 -1
- package/dist/browser/inputs/AutocompleteEditor.js +167 -104
- package/dist/browser/inputs/AutocompleteEditor.js.map +1 -1
- package/dist/browser/inputs/RichSelect.js +1474 -0
- package/dist/browser/inputs/RichSelect.js.map +1 -0
- package/dist/browser/inputs/TextInput.js +99 -61
- package/dist/browser/inputs/TextInput.js.map +1 -1
- package/dist/browser/inputs/choice.js +19 -8
- package/dist/browser/inputs/choice.js.map +1 -1
- package/dist/browser/inputs/index.js +1 -0
- package/dist/browser/inputs/index.js.map +1 -1
- package/dist/browser/inputs/rich-select-messages.js +46 -0
- package/dist/browser/inputs/rich-select-messages.js.map +1 -0
- package/dist/browser/intl/shortcut-messages.js +4 -0
- package/dist/browser/intl/shortcut-messages.js.map +1 -1
- package/dist/browser/intl/shortcut.js +4 -0
- package/dist/browser/intl/shortcut.js.map +1 -1
- package/dist/browser/layout/AppWorkspace.js +624 -565
- package/dist/browser/layout/AppWorkspace.js.map +1 -1
- package/dist/browser/layout/DetailPanel.js +10 -1
- package/dist/browser/layout/DetailPanel.js.map +1 -1
- package/dist/browser/layout/MobileShell.js +213 -38
- package/dist/browser/layout/MobileShell.js.map +1 -1
- package/dist/browser/layout/Navigation.js +14 -5
- package/dist/browser/layout/Navigation.js.map +1 -1
- package/dist/browser/layout/PageTitle.js +9 -3
- package/dist/browser/layout/PageTitle.js.map +1 -1
- package/dist/browser/layout/ResizeSeparator.js +8 -2
- package/dist/browser/layout/ResizeSeparator.js.map +1 -1
- package/dist/browser/layout/app-workspace-controller.js +192 -31
- package/dist/browser/layout/app-workspace-controller.js.map +1 -1
- package/dist/browser/layout/index.js +1 -0
- package/dist/browser/layout/index.js.map +1 -1
- package/dist/browser/layout/navigation-model.js.map +1 -1
- package/dist/browser/layout/resize-separator.js +25 -1
- package/dist/browser/layout/resize-separator.js.map +1 -1
- package/dist/browser/layout/scroll-fade.js +32 -5
- package/dist/browser/layout/scroll-fade.js.map +1 -1
- package/dist/browser/surfaces/NoticeCard.js +46 -30
- package/dist/browser/surfaces/NoticeCard.js.map +1 -1
- package/dist/browser/surfaces/Skeleton.js +14 -0
- package/dist/browser/surfaces/Skeleton.js.map +1 -0
- package/dist/browser/surfaces/index.js +1 -0
- package/dist/browser/surfaces/index.js.map +1 -1
- package/dist/browser/surfaces/resource-messages.js +2 -2
- package/dist/browser/surfaces/resource-messages.js.map +1 -1
- package/dist/ssr/actions/Dropdown.js +51 -27
- package/dist/ssr/actions/Dropdown.js.map +1 -1
- package/dist/ssr/actions/FilterChip.js +67 -16
- package/dist/ssr/actions/FilterChip.js.map +1 -1
- package/dist/ssr/actions/ViewTabs.js +8 -0
- package/dist/ssr/actions/ViewTabs.js.map +1 -1
- package/dist/ssr/actions/filter-messages.js +26 -2
- package/dist/ssr/actions/filter-messages.js.map +1 -1
- package/dist/ssr/actions/menu-rows.js +23 -3
- package/dist/ssr/actions/menu-rows.js.map +1 -1
- package/dist/ssr/actions/menu-sheet.js +2 -7
- package/dist/ssr/actions/menu-sheet.js.map +1 -1
- package/dist/ssr/chat/ChatComposer.js +96 -67
- package/dist/ssr/chat/ChatComposer.js.map +1 -1
- package/dist/ssr/chat/chat-messages.js +14 -0
- package/dist/ssr/chat/chat-messages.js.map +1 -1
- package/dist/ssr/chat/index.js.map +1 -1
- package/dist/ssr/content/Calendar.js +40 -31
- package/dist/ssr/content/Calendar.js.map +1 -1
- package/dist/ssr/content/CalendarDayView.js +40 -48
- package/dist/ssr/content/CalendarDayView.js.map +1 -1
- package/dist/ssr/content/Chart.js +27 -7
- package/dist/ssr/content/Chart.js.map +1 -1
- package/dist/ssr/content/ChartExplorer.js +5 -3
- package/dist/ssr/content/ChartExplorer.js.map +1 -1
- package/dist/ssr/content/MapView.js +4 -4
- package/dist/ssr/content/MapView.js.map +1 -1
- package/dist/ssr/content/MessageRow.js +264 -91
- package/dist/ssr/content/MessageRow.js.map +1 -1
- package/dist/ssr/content/ReactionBar.js +17 -0
- package/dist/ssr/content/ReactionBar.js.map +1 -1
- package/dist/ssr/content/chart-inspection-core.js +4 -1
- package/dist/ssr/content/chart-inspection-core.js.map +1 -1
- package/dist/ssr/content/code-highlight.js +66 -0
- package/dist/ssr/content/code-highlight.js.map +1 -1
- package/dist/ssr/content/index.js +2 -1
- package/dist/ssr/content/index.js.map +1 -1
- package/dist/ssr/content/map-view-types.js.map +1 -1
- package/dist/ssr/feedback/dialog-core.js +6 -0
- package/dist/ssr/feedback/dialog-core.js.map +1 -1
- package/dist/ssr/inputs/AutocompleteEditor.js +64 -24
- package/dist/ssr/inputs/AutocompleteEditor.js.map +1 -1
- package/dist/ssr/inputs/RichSelect.js +950 -0
- package/dist/ssr/inputs/RichSelect.js.map +1 -0
- package/dist/ssr/inputs/TextInput.js +44 -17
- package/dist/ssr/inputs/TextInput.js.map +1 -1
- package/dist/ssr/inputs/choice.js +19 -8
- package/dist/ssr/inputs/choice.js.map +1 -1
- package/dist/ssr/inputs/index.js +1 -0
- package/dist/ssr/inputs/index.js.map +1 -1
- package/dist/ssr/inputs/rich-select-messages.js +46 -0
- package/dist/ssr/inputs/rich-select-messages.js.map +1 -0
- package/dist/ssr/intl/shortcut-messages.js +4 -0
- package/dist/ssr/intl/shortcut-messages.js.map +1 -1
- package/dist/ssr/intl/shortcut.js +4 -0
- package/dist/ssr/intl/shortcut.js.map +1 -1
- package/dist/ssr/layout/AppWorkspace.js +166 -125
- package/dist/ssr/layout/AppWorkspace.js.map +1 -1
- package/dist/ssr/layout/DetailPanel.js +1 -1
- package/dist/ssr/layout/DetailPanel.js.map +1 -1
- package/dist/ssr/layout/MobileShell.js +100 -20
- package/dist/ssr/layout/MobileShell.js.map +1 -1
- package/dist/ssr/layout/Navigation.js +1 -1
- package/dist/ssr/layout/Navigation.js.map +1 -1
- package/dist/ssr/layout/PageTitle.js +9 -3
- package/dist/ssr/layout/PageTitle.js.map +1 -1
- package/dist/ssr/layout/ResizeSeparator.js +4 -1
- package/dist/ssr/layout/ResizeSeparator.js.map +1 -1
- package/dist/ssr/layout/app-workspace-controller.js +192 -31
- package/dist/ssr/layout/app-workspace-controller.js.map +1 -1
- package/dist/ssr/layout/index.js +1 -0
- package/dist/ssr/layout/index.js.map +1 -1
- package/dist/ssr/layout/navigation-model.js.map +1 -1
- package/dist/ssr/layout/resize-separator.js +25 -1
- package/dist/ssr/layout/resize-separator.js.map +1 -1
- package/dist/ssr/layout/scroll-fade.js +32 -5
- package/dist/ssr/layout/scroll-fade.js.map +1 -1
- package/dist/ssr/surfaces/NoticeCard.js +21 -12
- package/dist/ssr/surfaces/NoticeCard.js.map +1 -1
- package/dist/ssr/surfaces/Skeleton.js +8 -0
- package/dist/ssr/surfaces/Skeleton.js.map +1 -0
- package/dist/ssr/surfaces/index.js +1 -0
- package/dist/ssr/surfaces/index.js.map +1 -1
- package/dist/ssr/surfaces/resource-messages.js +2 -2
- package/dist/ssr/surfaces/resource-messages.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types/actions/Dropdown.d.ts +14 -0
- package/dist/types/actions/FilterChip.d.ts +11 -0
- package/dist/types/actions/filter-messages.d.ts +12 -0
- package/dist/types/actions/menu-rows.d.ts +7 -2
- package/dist/types/chat/ChatComposer.d.ts +13 -0
- package/dist/types/chat/chat-messages.d.ts +7 -0
- package/dist/types/chat/index.d.ts +1 -1
- package/dist/types/content/Calendar.d.ts +7 -0
- package/dist/types/content/Chart.d.ts +4 -2
- package/dist/types/content/ChartExplorer.d.ts +0 -1
- package/dist/types/content/MessageRow.d.ts +64 -2
- package/dist/types/content/code-highlight.d.ts +3 -1
- package/dist/types/content/index.d.ts +3 -2
- package/dist/types/content/map-view-live.d.ts +1 -1
- package/dist/types/content/map-view-types.d.ts +2 -0
- package/dist/types/feedback/dialog-core.d.ts +3 -0
- package/dist/types/inputs/AutocompleteEditor.d.ts +6 -1
- package/dist/types/inputs/RichSelect.d.ts +93 -0
- package/dist/types/inputs/TextInput.d.ts +5 -2
- package/dist/types/inputs/choice.d.ts +24 -4
- package/dist/types/inputs/index.d.ts +2 -0
- package/dist/types/inputs/rich-select-messages.d.ts +21 -0
- package/dist/types/intl/shortcut-messages.d.ts +2 -0
- package/dist/types/layout/AppWorkspace.d.ts +9 -0
- package/dist/types/layout/DetailPanel.d.ts +2 -0
- package/dist/types/layout/MobileShell.d.ts +52 -5
- package/dist/types/layout/app-workspace-controller.d.ts +2 -0
- package/dist/types/layout/index.d.ts +2 -1
- package/dist/types/layout/navigation-model.d.ts +2 -0
- package/dist/types/layout/resize-separator.d.ts +1 -0
- package/dist/types/layout/scroll-fade.d.ts +5 -0
- package/dist/types/surfaces/NoticeCard.d.ts +3 -0
- package/dist/types/surfaces/Skeleton.d.ts +6 -0
- package/dist/types/surfaces/index.d.ts +1 -0
- package/package.json +4 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ssrStyle as _$ssrStyle } from "solid-js/web";
|
|
2
2
|
import { ssrElement as _$ssrElement } from "solid-js/web";
|
|
3
|
-
import { mergeProps as _$mergeProps } from "solid-js/web";
|
|
4
3
|
import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
|
|
4
|
+
import { mergeProps as _$mergeProps } from "solid-js/web";
|
|
5
5
|
import { memo as _$memo } from "solid-js/web";
|
|
6
6
|
import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
|
|
7
7
|
import { ssr as _$ssr } from "solid-js/web";
|
|
@@ -13,14 +13,17 @@ var _tmpl$ = ["<span class=\"k2b-dropdown__copy\"><span>", "</span>", "</span>"]
|
|
|
13
13
|
_tmpl$4 = ["<small>", "</small>"],
|
|
14
14
|
_tmpl$5 = ["<button type=\"button\" role=\"menuitem\"", " tabindex=\"-1\" class=\"", "\"", "", ">", "</button>"],
|
|
15
15
|
_tmpl$6 = ["<a", " role=\"menuitem\"", " tabindex=\"-1\" class=\"", "\"", ">", "</a>"],
|
|
16
|
-
_tmpl$7 = "<
|
|
17
|
-
_tmpl$8 = ["<
|
|
18
|
-
_tmpl$9 =
|
|
19
|
-
_tmpl$0 = ["<span class=\"k2b-
|
|
20
|
-
_tmpl$1 = ["<
|
|
21
|
-
_tmpl$10 = ["<
|
|
22
|
-
_tmpl$11 = ["<div class=\"k2b-
|
|
23
|
-
_tmpl$12 = ["<
|
|
16
|
+
_tmpl$7 = ["<div class=\"k2b-dropdown__pair\">", "", "</div>"],
|
|
17
|
+
_tmpl$8 = ["<button type=\"button\" role=\"menuitem\" tabindex=\"-1\"", ">", "</button>"],
|
|
18
|
+
_tmpl$9 = "<i class=\"ti ti-check\"></i>",
|
|
19
|
+
_tmpl$0 = ["<span class=\"k2b-dropdown__checkbox\" aria-hidden=\"true\">", "</span>"],
|
|
20
|
+
_tmpl$1 = ["<i class=\"ti ti-check k2b-dropdown__check\"", " aria-hidden=\"true\"></i>"],
|
|
21
|
+
_tmpl$10 = ["<span class=\"k2b-dropdown__color\" style=\"", "\" aria-hidden=\"true\"></span>"],
|
|
22
|
+
_tmpl$11 = ["<div class=\"k2b-dropdown__row\">", "</div>"],
|
|
23
|
+
_tmpl$12 = ["<div class=\"k2b-dropdown__section\"", " role=\"group\"", ">", "", "</div>"],
|
|
24
|
+
_tmpl$13 = ["<div class=\"k2b-dropdown__label\">", "</div>"],
|
|
25
|
+
_tmpl$14 = ["<div class=\"k2b-dropdown__label k2b-dropdown__label--action\"><span>", "</span>", "</div>"],
|
|
26
|
+
_tmpl$15 = ["<span class=\"", "\">", "<div", " popover=\"auto\" role=\"menu\"", " class=\"", "\" style=\"", "\"", ">", "</div></span>"];
|
|
24
27
|
import { createContext, createEffect, createSignal, createUniqueId, For, onCleanup, onMount, Show, splitProps, useContext } from "solid-js";
|
|
25
28
|
import { Dynamic } from "solid-js/web";
|
|
26
29
|
import { Tooltip, useLabelTooltip } from "../feedback/Tooltip";
|
|
@@ -28,19 +31,21 @@ import { returnFocus, ringOnReturn } from "../internal/focus-return";
|
|
|
28
31
|
import { useLocale } from "../intl/locale";
|
|
29
32
|
import { useUiMessages } from "../intl/messages";
|
|
30
33
|
import { Button, iconTitle } from "./Button";
|
|
31
|
-
import { focusRowSegment } from "./menu-rows";
|
|
34
|
+
import { focusMenuRow, focusRowSegment } from "./menu-rows";
|
|
32
35
|
import { openMenuSheet, prefersMenuSheet } from "./menu-sheet";
|
|
33
36
|
|
|
34
37
|
// Resolved outside JSX: a conditional attribute compiles to a lazy memo, which would be created inside the click handler.
|
|
35
38
|
const selectAction = item => item.action;
|
|
36
39
|
|
|
40
|
+
/** A second, smaller action at the end of a row, such as "Only" beside a checkbox; it keeps the menu open. */
|
|
41
|
+
|
|
37
42
|
/** Declarative radio or checkbox row for compact action menus. */
|
|
38
43
|
|
|
39
44
|
const MenuContext = createContext();
|
|
40
45
|
const DropdownContext = createContext();
|
|
41
46
|
const actionableItems = menu => menu ? Array.from(menu.querySelectorAll(["[role='menuitem']:not([aria-disabled='true'])", "[role='menuitemcheckbox']:not([aria-disabled='true'])", "[role='menuitemradio']:not([aria-disabled='true'])"].join(", "))) : [];
|
|
42
47
|
const focusMenuItem = (menu, index) => {
|
|
43
|
-
const items = actionableItems(menu);
|
|
48
|
+
const items = actionableItems(menu).filter(item => !item.classList.contains("k2b-dropdown__secondary"));
|
|
44
49
|
if (items.length === 0) return;
|
|
45
50
|
items[(index + items.length) % items.length]?.focus();
|
|
46
51
|
};
|
|
@@ -92,6 +97,22 @@ export function DropdownItem(props) {
|
|
|
92
97
|
});
|
|
93
98
|
}
|
|
94
99
|
function DropdownChoiceItem(props) {
|
|
100
|
+
return _$createComponent(Show, {
|
|
101
|
+
get when() {
|
|
102
|
+
return props.secondary;
|
|
103
|
+
},
|
|
104
|
+
get fallback() {
|
|
105
|
+
return _$createComponent(DropdownChoiceRow, props);
|
|
106
|
+
},
|
|
107
|
+
children: secondary => _$ssr(_tmpl$7, _$escape(_$createComponent(DropdownChoiceRow, props)), _$escape(_$createComponent(DropdownSecondaryButton, _$mergeProps(secondary, {
|
|
108
|
+
"class": "k2b-dropdown__secondary"
|
|
109
|
+
}))))
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
function DropdownSecondaryButton(props) {
|
|
113
|
+
return _$ssr(_tmpl$8, _$ssrAttribute("class", _$escape(props.class, true), false) + _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false), _$escape(props.label));
|
|
114
|
+
}
|
|
115
|
+
function DropdownChoiceRow(props) {
|
|
95
116
|
const menu = useContext(MenuContext);
|
|
96
117
|
const checked = () => typeof props.checked === "function" ? props.checked() : props.checked;
|
|
97
118
|
let element;
|
|
@@ -149,12 +170,12 @@ function DropdownChoiceItem(props) {
|
|
|
149
170
|
return props.choice === "checkbox";
|
|
150
171
|
},
|
|
151
172
|
get children() {
|
|
152
|
-
return _$ssr(_tmpl$
|
|
173
|
+
return _$ssr(_tmpl$0, _$escape(_$createComponent(Show, {
|
|
153
174
|
get when() {
|
|
154
175
|
return checked();
|
|
155
176
|
},
|
|
156
177
|
get children() {
|
|
157
|
-
return _$ssr(_tmpl$
|
|
178
|
+
return _$ssr(_tmpl$9);
|
|
158
179
|
}
|
|
159
180
|
})));
|
|
160
181
|
}
|
|
@@ -175,7 +196,7 @@ function DropdownChoiceItem(props) {
|
|
|
175
196
|
get when() {
|
|
176
197
|
return props.color;
|
|
177
198
|
},
|
|
178
|
-
children: color => _$ssr(_tmpl$
|
|
199
|
+
children: color => _$ssr(_tmpl$10, _$ssrStyleProperty("--k2b-dropdown-color:", _$escape(color(), true)))
|
|
179
200
|
}), _$ssr(_tmpl$, _$escape(props.label), _$escape(_$createComponent(Show, {
|
|
180
201
|
get when() {
|
|
181
202
|
return props.description;
|
|
@@ -186,7 +207,7 @@ function DropdownChoiceItem(props) {
|
|
|
186
207
|
return props.choice === "radio";
|
|
187
208
|
},
|
|
188
209
|
get children() {
|
|
189
|
-
return _$ssr(_tmpl$
|
|
210
|
+
return _$ssr(_tmpl$1, _$ssrAttribute("data-hidden", checked() ? _$escape(undefined, true) : "true", false));
|
|
190
211
|
}
|
|
191
212
|
})];
|
|
192
213
|
}
|
|
@@ -254,11 +275,21 @@ export function DropdownItems(props) {
|
|
|
254
275
|
return renderItem(item);
|
|
255
276
|
},
|
|
256
277
|
get children() {
|
|
257
|
-
return _$ssr(_tmpl$
|
|
278
|
+
return _$ssr(_tmpl$12, _$ssrAttribute("data-divided", index() > 0 ? "true" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(item.sectionLabel ?? (item.layout === "row" ? undefined : messages().actions), true), false), _$escape(_$createComponent(Show, {
|
|
258
279
|
get when() {
|
|
259
280
|
return item.sectionLabel;
|
|
260
281
|
},
|
|
261
|
-
children: label => _$
|
|
282
|
+
children: label => _$createComponent(Show, {
|
|
283
|
+
get when() {
|
|
284
|
+
return item.labelAction;
|
|
285
|
+
},
|
|
286
|
+
get fallback() {
|
|
287
|
+
return _$ssr(_tmpl$13, _$escape(label()));
|
|
288
|
+
},
|
|
289
|
+
children: action => _$ssr(_tmpl$14, _$escape(label()), _$escape(_$createComponent(DropdownSecondaryButton, _$mergeProps(action, {
|
|
290
|
+
"class": "k2b-dropdown__label-action"
|
|
291
|
+
}))))
|
|
292
|
+
})
|
|
262
293
|
})), _$escape(_$createComponent(Show, {
|
|
263
294
|
get when() {
|
|
264
295
|
return item.layout === "row";
|
|
@@ -272,7 +303,7 @@ export function DropdownItems(props) {
|
|
|
272
303
|
});
|
|
273
304
|
},
|
|
274
305
|
get children() {
|
|
275
|
-
return _$ssr(_tmpl$
|
|
306
|
+
return _$ssr(_tmpl$11, _$escape(_$createComponent(For, {
|
|
276
307
|
get each() {
|
|
277
308
|
return item.items;
|
|
278
309
|
},
|
|
@@ -505,15 +536,8 @@ function DropdownRoot(props) {
|
|
|
505
536
|
};
|
|
506
537
|
const handleMenuKeyDown = event => {
|
|
507
538
|
const items = actionableItems(menuRef);
|
|
508
|
-
|
|
509
|
-
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
510
|
-
event.preventDefault();
|
|
511
|
-
focusMenuItem(menuRef, current + (event.key === "ArrowDown" ? 1 : -1));
|
|
512
|
-
} else if (focusRowSegment(items, event.key)) {
|
|
513
|
-
event.preventDefault();
|
|
514
|
-
} else if (event.key === "Home" || event.key === "End") {
|
|
539
|
+
if (focusMenuRow(items, event.key) || focusRowSegment(items, event.key)) {
|
|
515
540
|
event.preventDefault();
|
|
516
|
-
focusMenuItem(menuRef, event.key === "Home" ? 0 : -1);
|
|
517
541
|
} else if (event.key === "Escape") {
|
|
518
542
|
event.preventDefault();
|
|
519
543
|
returnFocus(triggerRef, triggerRing);
|
|
@@ -563,7 +587,7 @@ function DropdownRoot(props) {
|
|
|
563
587
|
return _$createComponent(DropdownContext.Provider, {
|
|
564
588
|
value: context,
|
|
565
589
|
get children() {
|
|
566
|
-
return _$ssr(_tmpl$
|
|
590
|
+
return _$ssr(_tmpl$15, `k2b-dropdown ${_$escape(props.class ?? "", true)}`, _$escape(props.children), _$ssrAttribute("id", _$escape(menuId, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? messages().dropdownMenu, true), false), `k2b-dropdown__menu ${_$escape(props.menuClass ?? "", true)}`, _$ssrStyle(props.width ? {
|
|
567
591
|
"--k2b-dropdown-width": props.width
|
|
568
592
|
} : undefined), _$ssrAttribute("data-width", props.width ? "fixed" : _$escape(undefined, true), false) + _$ssrAttribute("data-variant", _$escape(props.variant ?? "default", true), false) + _$ssrAttribute("data-position", _$escape(position(), true), false), _$escape(_$createComponent(DropdownItems, {
|
|
569
593
|
get items() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["actions/Dropdown.tsx"],"sourcesContent":["import {\n createContext,\n createEffect,\n createSignal,\n createUniqueId,\n For,\n type JSX,\n onCleanup,\n onMount,\n Show,\n splitProps,\n useContext,\n} from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Tooltip, type TooltipPlacement, useLabelTooltip } from \"../feedback/Tooltip\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useLocale } from \"../intl/locale\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Button, type ButtonProps, type ButtonSize, type ButtonVariant, iconTitle } from \"./Button\";\nimport { focusRowSegment } from \"./menu-rows\";\nimport { openMenuSheet, prefersMenuSheet } from \"./menu-sheet\";\n\n// Resolved outside JSX: a conditional attribute compiles to a lazy memo, which would be created inside the click handler.\nconst selectAction = (item: { action?: () => void }) => item.action;\n\nexport type DropdownPosition = \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\" | \"right-start\";\n\nexport type DropdownActionBase = {\n class?: string;\n disabled?: boolean;\n icon?: string;\n image?: string;\n label: string;\n /**\n * Accessible name when it must say more than the visible label, such as the current value and what the next\n * activation does. It must contain the visible label.\n */\n ariaLabel?: string;\n description?: string;\n /** Quiet trailing information, such as a count. */\n trailing?: JSX.Element;\n variant?: \"danger\";\n};\n\nexport type DropdownAction =\n | (DropdownActionBase & {\n action: () => void;\n /**\n * Set `false` for an action that changes a value in place, such as cycling a setting: the menu stays open and\n * the focus stays on the row. Defaults to `true`.\n */\n closeOnSelect?: boolean;\n /**\n * In a phone sheet, run while the tap still counts as the person's gesture, before the sheet closes, as browsers\n * require for clipboard writes. Other actions run after the sheet has left the history. Such an action must\n * not navigate or open a dialog.\n */\n immediate?: boolean;\n href?: never;\n external?: never;\n })\n | (DropdownActionBase & {\n href: string;\n external?: boolean;\n /** Runs on a plain click instead of following the link; modified clicks, middle-click, and the link's menu keep it. */\n action?: () => void;\n })\n | (DropdownActionBase & {\n disabled: true;\n action?: never;\n href?: never;\n external?: never;\n });\n\n/** Declarative radio or checkbox row for compact action menus. */\nexport type DropdownChoice = DropdownActionBase & {\n action: () => void;\n checked: boolean | (() => boolean);\n choice: \"checkbox\" | \"radio\";\n href?: string;\n closeOnSelect?: boolean;\n color?: string;\n};\n\nexport type DropdownSection = {\n sectionLabel?: string;\n /**\n * `row` sets a few short radio choices, such as a sort direction, side by side as one segmented row. Give it a\n * `sectionLabel`: the label names the choice above the row and for screen readers.\n */\n layout?: \"row\";\n items: readonly (DropdownAction | DropdownChoice)[];\n};\n\nexport type DropdownItem = DropdownAction | DropdownChoice | DropdownSection;\n\nexport type DropdownProps = {\n items: readonly DropdownItem[];\n children: JSX.Element;\n position?: DropdownPosition | (() => DropdownPosition);\n /** Larger menu rows and typography for touch. Defaults to `default`. */\n variant?: \"default\" | \"touch\";\n /**\n * Exact menu width as a CSS length. Without it the menu sizes to its longest\n * entry: at least `12rem` (`18rem` for touch), at most the viewport width\n * less `1rem` per side, where longer entries wrap.\n */\n width?: string;\n class?: string;\n menuClass?: string;\n onClose?: () => void;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n disabled?: boolean;\n label?: string;\n align?: \"start\" | \"end\";\n /**\n * `sheet` opens the same items as a bottom sheet on phones (below 48rem) instead of a menu beside the trigger.\n * Defaults to `menu`. A controlled menu (`open`) always stays a menu.\n */\n phone?: \"menu\" | \"sheet\";\n};\n\nexport type DropdownTriggerProps = Omit<\n ButtonProps,\n \"aria-controls\" | \"aria-expanded\" | \"aria-haspopup\" | \"children\" | \"disabled\" | \"onClick\" | \"onKeyDown\"\n> & {\n children: JSX.Element;\n /** Use `plain` when a specialized component class owns the complete visual treatment. */\n appearance?: \"button\" | \"plain\";\n disabled?: boolean;\n iconOnly?: boolean;\n label?: string;\n size?: ButtonSize;\n tooltip?: JSX.Element | false;\n tooltipDelay?: number;\n tooltipPlacement?: TooltipPlacement;\n variant?: ButtonVariant;\n};\n\nexport type DropdownItemProps = {\n children: JSX.Element;\n closeOnSelect?: boolean;\n ariaLabel?: string;\n icon?: string;\n image?: string;\n description?: string;\n /** Quiet trailing information, such as a count. */\n trailing?: JSX.Element;\n disabled?: boolean;\n danger?: boolean;\n variant?: \"danger\";\n href?: string;\n external?: boolean;\n /** Runs when the item is chosen. With `href`, a plain click runs it instead of following the link. */\n onSelect?: () => void;\n class?: string;\n};\n\ntype MenuContextValue = {\n close: (restoreFocus?: boolean) => void;\n};\n\ntype DropdownContextValue = {\n disabled: () => boolean;\n menuId: string;\n open: () => boolean;\n registerTrigger: (element: HTMLButtonElement) => void;\n toggle: () => void;\n triggerKeyDown: JSX.EventHandlerUnion<HTMLButtonElement, KeyboardEvent>;\n};\n\nconst MenuContext = createContext<MenuContextValue>();\nconst DropdownContext = createContext<DropdownContextValue>();\n\nconst actionableItems = (menu: HTMLElement | undefined): HTMLElement[] =>\n menu\n ? Array.from(\n menu.querySelectorAll<HTMLElement>(\n [\n \"[role='menuitem']:not([aria-disabled='true'])\",\n \"[role='menuitemcheckbox']:not([aria-disabled='true'])\",\n \"[role='menuitemradio']:not([aria-disabled='true'])\",\n ].join(\", \"),\n ),\n )\n : [];\n\nconst focusMenuItem = (menu: HTMLElement | undefined, index: number): void => {\n const items = actionableItems(menu);\n if (items.length === 0) return;\n items[(index + items.length) % items.length]?.focus();\n};\n\nexport const dropdownPosition = (\n trigger: DOMRect,\n menu: Pick<DOMRect, \"width\" | \"height\">,\n position: DropdownPosition,\n viewport: { width: number; height: number },\n gap = 4,\n): { left: number; top: number } => {\n let left = trigger.left;\n let top = trigger.bottom + gap;\n\n if (position === \"bottom-left\" || position === \"top-left\") left = trigger.right - menu.width;\n if (position === \"top-right\" || position === \"top-left\") top = trigger.top - menu.height - gap;\n if (position === \"right-start\") {\n left = trigger.right + gap;\n top = trigger.top;\n }\n\n return {\n left: Math.max(8, Math.min(left, viewport.width - menu.width - 8)),\n top: Math.max(8, Math.min(top, viewport.height - menu.height - 8)),\n };\n};\n\nconst itemContent = (props: {\n description?: string;\n icon?: string;\n image?: string;\n trailing?: JSX.Element;\n children: JSX.Element;\n}): JSX.Element => (\n <>\n <Show when={props.image} fallback={<Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>}>\n {(image) => <img class=\"k2b-dropdown__image\" src={image()} alt=\"\" />}\n </Show>\n <span class=\"k2b-dropdown__copy\">\n <span>{props.children}</span>\n <Show when={props.description}>{(description) => <small>{description()}</small>}</Show>\n </span>\n {props.trailing}\n </>\n);\n\nexport function DropdownItem(props: DropdownItemProps): JSX.Element {\n const menu = useContext(MenuContext);\n const danger = () => props.danger || props.variant === \"danger\";\n const content = itemContent(props);\n\n return (\n <Show\n when={!props.disabled ? props.href : undefined}\n fallback={\n <button\n type=\"button\"\n role=\"menuitem\"\n aria-label={props.ariaLabel}\n tabIndex={-1}\n class={`k2b-dropdown__item ${props.class ?? \"\"}`}\n data-danger={danger() ? \"true\" : undefined}\n disabled={props.disabled}\n aria-disabled={props.disabled ? \"true\" : undefined}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n if (props.closeOnSelect !== false) menu?.close();\n props.onSelect?.();\n }}\n >\n {content}\n </button>\n }\n >\n {(href) => (\n <a\n href={href()}\n target={props.external ? \"_blank\" : undefined}\n rel={props.external ? \"noopener noreferrer\" : undefined}\n role=\"menuitem\"\n aria-label={props.ariaLabel}\n tabIndex={-1}\n class={`k2b-dropdown__item ${props.class ?? \"\"}`}\n data-danger={danger() ? \"true\" : undefined}\n onClick={(event) => {\n // With `onSelect`, a plain click runs it in place of the link; a modified click keeps its browser meaning.\n if (props.onSelect && !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {\n event.preventDefault();\n menu?.close();\n props.onSelect();\n return;\n }\n menu?.close(false);\n }}\n >\n {content}\n </a>\n )}\n </Show>\n );\n}\n\nfunction DropdownChoiceItem(props: DropdownChoice): JSX.Element {\n const menu = useContext(MenuContext);\n const checked = () => (typeof props.checked === \"function\" ? props.checked() : props.checked);\n let element: HTMLElement | undefined;\n return (\n <Dynamic\n ref={(node: HTMLAnchorElement | HTMLButtonElement) => {\n element = node;\n }}\n component={!props.disabled && props.href ? \"a\" : \"button\"}\n href={!props.disabled ? props.href : undefined}\n type={!props.disabled && props.href ? undefined : \"button\"}\n role={props.choice === \"checkbox\" ? \"menuitemcheckbox\" : \"menuitemradio\"}\n aria-label={props.ariaLabel}\n aria-checked={checked()}\n aria-disabled={props.disabled ? \"true\" : undefined}\n tabIndex={-1}\n class={`k2b-dropdown__item ${props.class ?? \"\"}`}\n data-selected={checked() ? \"true\" : undefined}\n disabled={props.disabled}\n onClick={(event: MouseEvent) => {\n if (props.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {\n menu?.close(false);\n return;\n }\n event.preventDefault();\n event.stopPropagation();\n if (props.closeOnSelect !== false) menu?.close();\n props.action();\n }}\n onKeyDown={(event: KeyboardEvent) => {\n // A link answers only Enter; as a menu choice it also answers Space, like the button form.\n if (event.key !== \" \" || props.disabled || !props.href) return;\n event.preventDefault();\n element?.click();\n }}\n >\n <Show when={props.choice === \"checkbox\"}>\n <span class=\"k2b-dropdown__checkbox\" aria-hidden=\"true\">\n <Show when={checked()}>\n <i class=\"ti ti-check\" />\n </Show>\n </span>\n </Show>\n <Show when={props.image} fallback={<Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>}>\n {(image) => <img class=\"k2b-dropdown__image\" src={image()} alt=\"\" />}\n </Show>\n <Show when={props.color}>\n {(color) => <span class=\"k2b-dropdown__color\" style={{ \"--k2b-dropdown-color\": color() }} aria-hidden=\"true\" />}\n </Show>\n <span class=\"k2b-dropdown__copy\">\n <span>{props.label}</span>\n <Show when={props.description}>{(description) => <small>{description()}</small>}</Show>\n </span>\n {props.trailing}\n {/* Always present for radios, so selecting the widest entry cannot widen a content-sized menu. */}\n <Show when={props.choice === \"radio\"}>\n <i class=\"ti ti-check k2b-dropdown__check\" data-hidden={checked() ? undefined : \"true\"} aria-hidden=\"true\" />\n </Show>\n </Dynamic>\n );\n}\n\nexport function DropdownItems(props: { items: readonly DropdownItem[]; close: (restoreFocus?: boolean) => void }): JSX.Element {\n const messages = useUiMessages();\n const renderItem = (item: DropdownAction | DropdownChoice): JSX.Element =>\n \"choice\" in item ? (\n <DropdownChoiceItem {...item} />\n ) : (\n <DropdownItem\n ariaLabel={item.ariaLabel}\n closeOnSelect={\"closeOnSelect\" in item ? item.closeOnSelect : undefined}\n icon={item.icon}\n image={item.image}\n description={item.description}\n trailing={item.trailing}\n variant={item.variant}\n disabled={item.disabled}\n class={item.class}\n href={\"href\" in item ? item.href : undefined}\n external={\"external\" in item ? item.external : undefined}\n onSelect={selectAction(item)}\n >\n {item.label}\n </DropdownItem>\n );\n\n return (\n <MenuContext.Provider value={{ close: props.close }}>\n <For each={props.items}>\n {(item, index) => (\n <Show when={\"items\" in item} fallback={renderItem(item as DropdownAction | DropdownChoice)}>\n <div\n class=\"k2b-dropdown__section\"\n data-divided={index() > 0 ? \"true\" : undefined}\n role=\"group\"\n // A row of choices is no set of actions: without a label it stays unnamed rather than misnamed.\n aria-label={\n (item as DropdownSection).sectionLabel ?? ((item as DropdownSection).layout === \"row\" ? undefined : messages().actions)\n }\n >\n <Show when={(item as DropdownSection).sectionLabel}>{(label) => <div class=\"k2b-dropdown__label\">{label()}</div>}</Show>\n <Show\n when={(item as DropdownSection).layout === \"row\"}\n fallback={<For each={(item as DropdownSection).items}>{renderItem}</For>}\n >\n <div class=\"k2b-dropdown__row\">\n <For each={(item as DropdownSection).items}>{renderItem}</For>\n </div>\n </Show>\n </div>\n </Show>\n )}\n </For>\n </MenuContext.Provider>\n );\n}\n\nfunction DropdownTrigger(props: DropdownTriggerProps): JSX.Element {\n const context = useContext(DropdownContext);\n if (!context) throw new Error(\"Dropdown.Trigger must be used inside Dropdown.Root\");\n const [local, rest] = splitProps(props, [\n \"appearance\",\n \"children\",\n \"class\",\n \"disabled\",\n \"iconOnly\",\n \"label\",\n \"ref\",\n \"size\",\n \"tabIndex\",\n \"title\",\n \"tooltip\",\n \"tooltipDelay\",\n \"tooltipPlacement\",\n \"type\",\n \"variant\",\n ]);\n let target: HTMLButtonElement | undefined;\n const disabled = () => Boolean(context.disabled() || local.disabled);\n // An icon-only trigger shows its label as a hint, like IconButton.\n const tooltip = useLabelTooltip(\n () => local.tooltip,\n () => (local.iconOnly ? (local.title ?? local.label) : undefined),\n );\n const register = (element: HTMLButtonElement) => {\n target = element;\n context.registerTrigger(element);\n if (typeof local.ref === \"function\") local.ref(element);\n };\n const click: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (event) => {\n event.stopPropagation();\n context.toggle();\n };\n\n if (local.appearance !== \"plain\") {\n return (\n <Button\n {...rest}\n ref={register}\n aria-controls={context.menuId}\n aria-expanded={context.open()}\n aria-haspopup=\"menu\"\n aria-label={local.label}\n disabled={disabled()}\n tabIndex={disabled() ? -1 : local.tabIndex}\n onClick={click}\n onKeyDown={context.triggerKeyDown}\n type={local.type ?? \"button\"}\n class={`${local.iconOnly ? \"k2b-icon-button\" : \"\"} k2b-dropdown__trigger ${local.class ?? \"\"}`}\n size={local.size}\n variant={local.variant ?? (local.iconOnly ? \"ghost\" : undefined)}\n title={iconTitle(local.title, tooltip())}\n tooltip={tooltip()}\n tooltipDelay={local.tooltipDelay}\n tooltipPlacement={local.tooltipPlacement}\n >\n {local.children}\n </Button>\n );\n }\n\n return (\n <>\n <button\n {...rest}\n ref={register}\n aria-controls={context.menuId}\n aria-expanded={context.open()}\n aria-haspopup=\"menu\"\n aria-label={local.label}\n disabled={disabled()}\n tabIndex={disabled() ? -1 : local.tabIndex}\n onClick={click}\n onKeyDown={context.triggerKeyDown}\n type={local.type ?? \"button\"}\n class={`k2b-dropdown__trigger ${local.class ?? \"\"}`}\n title={iconTitle(local.title, tooltip())}\n >\n {local.children}\n </button>\n <Show when={tooltip() !== false && tooltip() !== undefined}>\n <Tooltip\n content={tooltip() as JSX.Element}\n target={() => target}\n delay={local.tooltipDelay}\n disabled={disabled()}\n placement={local.tooltipPlacement}\n />\n </Show>\n </>\n );\n}\n\n/** Accessible top-layer menu with explicit trigger ownership. */\nfunction DropdownRoot(props: DropdownProps): JSX.Element {\n const messages = useUiMessages();\n const locale = useLocale();\n /** The open phone sheet's cancel switch: it closes when the menu goes or is disabled, as the popover does. */\n let sheet: AbortController | undefined;\n const id = createUniqueId().replace(/[^a-zA-Z0-9_-]/g, \"-\");\n const menuId = `k2b-dropdown-${id}`;\n const [internalOpen, setInternalOpen] = createSignal(false);\n let triggerRef: HTMLButtonElement | undefined;\n let menuRef: HTMLDivElement | undefined;\n let triggerRing = true;\n let mounted = false;\n /** Where a key on the trigger asked the focus to go; a controlled menu opens later, in its owner's update. */\n let keyFocus: \"first\" | \"last\" | false = false;\n let viewportListenersAttached = false;\n let resizeObserver: ResizeObserver | undefined;\n\n const isOpen = () => props.open ?? internalOpen();\n const position = (): DropdownPosition =>\n typeof props.position === \"function\" ? props.position() : (props.position ?? (props.align === \"end\" ? \"bottom-left\" : \"bottom-right\"));\n\n const place = () => {\n if (!triggerRef || !menuRef) return;\n const rect = dropdownPosition(triggerRef.getBoundingClientRect(), menuRef.getBoundingClientRect(), position(), {\n width: window.innerWidth,\n height: window.innerHeight,\n });\n menuRef.style.left = `${rect.left}px`;\n menuRef.style.top = `${rect.top}px`;\n };\n const reposition = () => {\n if (isOpen()) place();\n };\n const attachViewportListeners = () => {\n if (viewportListenersAttached) return;\n viewportListenersAttached = true;\n window.addEventListener(\"resize\", reposition);\n window.addEventListener(\"scroll\", reposition, true);\n // A content-sized menu changes size when its items change while it is open.\n if (menuRef && typeof ResizeObserver !== \"undefined\") {\n resizeObserver ??= new ResizeObserver(reposition);\n resizeObserver.observe(menuRef);\n }\n };\n const detachViewportListeners = () => {\n if (!viewportListenersAttached) return;\n viewportListenersAttached = false;\n window.removeEventListener(\"resize\", reposition);\n window.removeEventListener(\"scroll\", reposition, true);\n resizeObserver?.disconnect();\n };\n const close = (restoreFocus = true) => {\n // Before hiding, so the popover does not return focus on its own.\n if (restoreFocus) returnFocus(triggerRef, triggerRing);\n if (menuRef?.matches(\":popover-open\")) menuRef.hidePopover();\n // Like `open`, expose the closed state now: the toggle event can arrive after the next key press, and a trigger\n // that still reads as open would ignore Enter (Escape, then Enter at once, must reopen).\n setInternalOpen(false);\n detachViewportListeners();\n };\n const open = (focus: \"first\" | \"last\" | false = \"first\") => {\n if (props.disabled || !menuRef || menuRef.matches(\":popover-open\")) return;\n triggerRing = ringOnReturn(triggerRef);\n menuRef.showPopover();\n // The toggle event arrives a task later; expose the open state before focus moves into the menu.\n setInternalOpen(true);\n attachViewportListeners();\n place();\n queueMicrotask(() => {\n if (focus) focusMenuItem(menuRef, focus === \"first\" ? 0 : -1);\n });\n };\n const requestOpen = (next: boolean, focus: \"first\" | \"last\" | false = \"first\") => {\n if (props.disabled && next) return;\n if (props.open !== undefined) {\n props.onOpenChange?.(next);\n return;\n }\n if (next && props.phone === \"sheet\" && prefersMenuSheet()) {\n if (sheet) return;\n const current = new AbortController();\n sheet = current;\n // The sheet is this menu's open state: the trigger reports it and the owner hears both ends.\n setInternalOpen(true);\n props.onOpenChange?.(true);\n void openMenuSheet({\n Items: DropdownItems,\n items: props.items,\n label: props.label ?? messages().dropdownMenu,\n locale: locale(),\n signal: current.signal,\n }).finally(() => {\n sheet = undefined;\n setInternalOpen(false);\n props.onOpenChange?.(false);\n props.onClose?.();\n });\n return;\n }\n if (next) open(focus);\n else close(false);\n };\n const handleMenuKeyDown = (event: KeyboardEvent) => {\n const items = actionableItems(menuRef);\n const current = items.indexOf(document.activeElement as HTMLElement);\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n focusMenuItem(menuRef, current + (event.key === \"ArrowDown\" ? 1 : -1));\n } else if (focusRowSegment(items, event.key)) {\n event.preventDefault();\n } else if (event.key === \"Home\" || event.key === \"End\") {\n event.preventDefault();\n focusMenuItem(menuRef, event.key === \"Home\" ? 0 : -1);\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n returnFocus(triggerRef, triggerRing);\n requestOpen(false);\n } else if (event.key === \"Tab\") {\n requestOpen(false);\n }\n };\n\n const context: DropdownContextValue = {\n disabled: () => Boolean(props.disabled),\n menuId,\n open: isOpen,\n registerTrigger: (element) => {\n triggerRef = element;\n },\n toggle: () => requestOpen(!isOpen()),\n triggerKeyDown: (event) => {\n if (![\"Enter\", \" \", \"ArrowDown\", \"ArrowUp\"].includes(event.key)) return;\n event.preventDefault();\n event.stopPropagation();\n if (isOpen()) {\n focusMenuItem(menuRef, event.key === \"ArrowUp\" ? -1 : 0);\n return;\n }\n keyFocus = event.key === \"ArrowUp\" ? \"last\" : \"first\";\n requestOpen(true, keyFocus);\n keyFocus = false;\n },\n };\n\n createEffect(() => {\n const controlled = props.open;\n if (!mounted || controlled === undefined || !menuRef) return;\n if (controlled && !menuRef.matches(\":popover-open\")) open(keyFocus);\n if (!controlled && menuRef.matches(\":popover-open\")) close(false);\n });\n createEffect(() => {\n if (!props.disabled) return;\n sheet?.abort();\n if (mounted) close(false);\n });\n onMount(() => {\n mounted = true;\n if (props.open) open(false);\n onCleanup(detachViewportListeners);\n });\n onCleanup(() => sheet?.abort());\n\n return (\n <DropdownContext.Provider value={context}>\n <span class={`k2b-dropdown ${props.class ?? \"\"}`}>\n {props.children}\n <div\n ref={menuRef}\n id={menuId}\n popover=\"auto\"\n role=\"menu\"\n aria-label={props.label ?? messages().dropdownMenu}\n class={`k2b-dropdown__menu ${props.menuClass ?? \"\"}`}\n style={props.width ? { \"--k2b-dropdown-width\": props.width } : undefined}\n data-width={props.width ? \"fixed\" : undefined}\n data-variant={props.variant ?? \"default\"}\n data-position={position()}\n onKeyDown={handleMenuKeyDown}\n onToggle={(event) => {\n const nextOpen = (event as ToggleEvent).newState === \"open\";\n const wasOpen = (event as ToggleEvent).oldState === \"open\";\n setInternalOpen(nextOpen);\n if (nextOpen) attachViewportListeners();\n else detachViewportListeners();\n if (props.open === undefined || props.open !== nextOpen) props.onOpenChange?.(nextOpen);\n if (wasOpen && !nextOpen) props.onClose?.();\n if (!nextOpen && props.open === true) queueMicrotask(() => props.open === true && open(false));\n }}\n >\n <DropdownItems items={props.items} close={close} />\n </div>\n </span>\n </DropdownContext.Provider>\n );\n}\n\ntype DropdownComponent = ((props: DropdownProps) => JSX.Element) & {\n Root: (props: DropdownProps) => JSX.Element;\n Trigger: (props: DropdownTriggerProps) => JSX.Element;\n Item: (props: DropdownItemProps) => JSX.Element;\n};\n\nexport const Dropdown = DropdownRoot as DropdownComponent;\nDropdown.Root = DropdownRoot;\nDropdown.Trigger = DropdownTrigger;\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["actions/Dropdown.tsx"],"sourcesContent":["import {\n createContext,\n createEffect,\n createSignal,\n createUniqueId,\n For,\n type JSX,\n onCleanup,\n onMount,\n Show,\n splitProps,\n useContext,\n} from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Tooltip, type TooltipPlacement, useLabelTooltip } from \"../feedback/Tooltip\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useLocale } from \"../intl/locale\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Button, type ButtonProps, type ButtonSize, type ButtonVariant, iconTitle } from \"./Button\";\nimport { focusMenuRow, focusRowSegment } from \"./menu-rows\";\nimport { openMenuSheet, prefersMenuSheet } from \"./menu-sheet\";\n\n// Resolved outside JSX: a conditional attribute compiles to a lazy memo, which would be created inside the click handler.\nconst selectAction = (item: { action?: () => void }) => item.action;\n\nexport type DropdownPosition = \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\" | \"right-start\";\n\nexport type DropdownActionBase = {\n class?: string;\n disabled?: boolean;\n icon?: string;\n image?: string;\n label: string;\n /**\n * Accessible name when it must say more than the visible label, such as the current value and what the next\n * activation does. It must contain the visible label.\n */\n ariaLabel?: string;\n description?: string;\n /** Quiet trailing information, such as a count. */\n trailing?: JSX.Element;\n variant?: \"danger\";\n};\n\nexport type DropdownAction =\n | (DropdownActionBase & {\n action: () => void;\n /**\n * Set `false` for an action that changes a value in place, such as cycling a setting: the menu stays open and\n * the focus stays on the row. Defaults to `true`.\n */\n closeOnSelect?: boolean;\n /**\n * In a phone sheet, run while the tap still counts as the person's gesture, before the sheet closes, as browsers\n * require for clipboard writes. Other actions run after the sheet has left the history. Such an action must\n * not navigate or open a dialog.\n */\n immediate?: boolean;\n href?: never;\n external?: never;\n })\n | (DropdownActionBase & {\n href: string;\n external?: boolean;\n /** Runs on a plain click instead of following the link; modified clicks, middle-click, and the link's menu keep it. */\n action?: () => void;\n })\n | (DropdownActionBase & {\n disabled: true;\n action?: never;\n href?: never;\n external?: never;\n });\n\n/** A second, smaller action at the end of a row, such as \"Only\" beside a checkbox; it keeps the menu open. */\nexport type DropdownSecondaryAction = {\n label: string;\n /** Accessible name when the visible label alone does not say what it acts on, such as \"Only Team Logistik\". */\n ariaLabel?: string;\n action: () => void;\n};\n\n/** Declarative radio or checkbox row for compact action menus. */\nexport type DropdownChoice = DropdownActionBase & {\n action: () => void;\n checked: boolean | (() => boolean);\n choice: \"checkbox\" | \"radio\";\n href?: string;\n closeOnSelect?: boolean;\n color?: string;\n /**\n * A second action at the end of the row. It shows while the row is hovered or focused, always on a touch screen,\n * and keeps its place when hidden, so the row never changes width. Right and Left move between the two.\n */\n secondary?: DropdownSecondaryAction;\n};\n\nexport type DropdownSection = {\n sectionLabel?: string;\n /**\n * `row` sets a few short radio choices, such as a sort direction, side by side as one segmented row. Give it a\n * `sectionLabel`: the label names the choice above the row and for screen readers.\n */\n layout?: \"row\";\n /** A quiet action at the end of the section label, such as \"All\"; it needs a `sectionLabel` and keeps the menu open. */\n labelAction?: DropdownSecondaryAction;\n items: readonly (DropdownAction | DropdownChoice)[];\n};\n\nexport type DropdownItem = DropdownAction | DropdownChoice | DropdownSection;\n\nexport type DropdownProps = {\n items: readonly DropdownItem[];\n children: JSX.Element;\n position?: DropdownPosition | (() => DropdownPosition);\n /** Larger menu rows and typography for touch. Defaults to `default`. */\n variant?: \"default\" | \"touch\";\n /**\n * Exact menu width as a CSS length. Without it the menu sizes to its longest\n * entry: at least `12rem` (`18rem` for touch), at most the viewport width\n * less `1rem` per side, where longer entries wrap.\n */\n width?: string;\n class?: string;\n menuClass?: string;\n onClose?: () => void;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n disabled?: boolean;\n label?: string;\n align?: \"start\" | \"end\";\n /**\n * `sheet` opens the same items as a bottom sheet on phones (below 48rem) instead of a menu beside the trigger.\n * Defaults to `menu`. A controlled menu (`open`) always stays a menu.\n */\n phone?: \"menu\" | \"sheet\";\n};\n\nexport type DropdownTriggerProps = Omit<\n ButtonProps,\n \"aria-controls\" | \"aria-expanded\" | \"aria-haspopup\" | \"children\" | \"disabled\" | \"onClick\" | \"onKeyDown\"\n> & {\n children: JSX.Element;\n /** Use `plain` when a specialized component class owns the complete visual treatment. */\n appearance?: \"button\" | \"plain\";\n disabled?: boolean;\n iconOnly?: boolean;\n label?: string;\n size?: ButtonSize;\n tooltip?: JSX.Element | false;\n tooltipDelay?: number;\n tooltipPlacement?: TooltipPlacement;\n variant?: ButtonVariant;\n};\n\nexport type DropdownItemProps = {\n children: JSX.Element;\n closeOnSelect?: boolean;\n ariaLabel?: string;\n icon?: string;\n image?: string;\n description?: string;\n /** Quiet trailing information, such as a count. */\n trailing?: JSX.Element;\n disabled?: boolean;\n danger?: boolean;\n variant?: \"danger\";\n href?: string;\n external?: boolean;\n /** Runs when the item is chosen. With `href`, a plain click runs it instead of following the link. */\n onSelect?: () => void;\n class?: string;\n};\n\ntype MenuContextValue = {\n close: (restoreFocus?: boolean) => void;\n};\n\ntype DropdownContextValue = {\n disabled: () => boolean;\n menuId: string;\n open: () => boolean;\n registerTrigger: (element: HTMLButtonElement) => void;\n toggle: () => void;\n triggerKeyDown: JSX.EventHandlerUnion<HTMLButtonElement, KeyboardEvent>;\n};\n\nconst MenuContext = createContext<MenuContextValue>();\nconst DropdownContext = createContext<DropdownContextValue>();\n\nconst actionableItems = (menu: HTMLElement | undefined): HTMLElement[] =>\n menu\n ? Array.from(\n menu.querySelectorAll<HTMLElement>(\n [\n \"[role='menuitem']:not([aria-disabled='true'])\",\n \"[role='menuitemcheckbox']:not([aria-disabled='true'])\",\n \"[role='menuitemradio']:not([aria-disabled='true'])\",\n ].join(\", \"),\n ),\n )\n : [];\n\nconst focusMenuItem = (menu: HTMLElement | undefined, index: number): void => {\n const items = actionableItems(menu).filter((item) => !item.classList.contains(\"k2b-dropdown__secondary\"));\n if (items.length === 0) return;\n items[(index + items.length) % items.length]?.focus();\n};\n\nexport const dropdownPosition = (\n trigger: DOMRect,\n menu: Pick<DOMRect, \"width\" | \"height\">,\n position: DropdownPosition,\n viewport: { width: number; height: number },\n gap = 4,\n): { left: number; top: number } => {\n let left = trigger.left;\n let top = trigger.bottom + gap;\n\n if (position === \"bottom-left\" || position === \"top-left\") left = trigger.right - menu.width;\n if (position === \"top-right\" || position === \"top-left\") top = trigger.top - menu.height - gap;\n if (position === \"right-start\") {\n left = trigger.right + gap;\n top = trigger.top;\n }\n\n return {\n left: Math.max(8, Math.min(left, viewport.width - menu.width - 8)),\n top: Math.max(8, Math.min(top, viewport.height - menu.height - 8)),\n };\n};\n\nconst itemContent = (props: {\n description?: string;\n icon?: string;\n image?: string;\n trailing?: JSX.Element;\n children: JSX.Element;\n}): JSX.Element => (\n <>\n <Show when={props.image} fallback={<Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>}>\n {(image) => <img class=\"k2b-dropdown__image\" src={image()} alt=\"\" />}\n </Show>\n <span class=\"k2b-dropdown__copy\">\n <span>{props.children}</span>\n <Show when={props.description}>{(description) => <small>{description()}</small>}</Show>\n </span>\n {props.trailing}\n </>\n);\n\nexport function DropdownItem(props: DropdownItemProps): JSX.Element {\n const menu = useContext(MenuContext);\n const danger = () => props.danger || props.variant === \"danger\";\n const content = itemContent(props);\n\n return (\n <Show\n when={!props.disabled ? props.href : undefined}\n fallback={\n <button\n type=\"button\"\n role=\"menuitem\"\n aria-label={props.ariaLabel}\n tabIndex={-1}\n class={`k2b-dropdown__item ${props.class ?? \"\"}`}\n data-danger={danger() ? \"true\" : undefined}\n disabled={props.disabled}\n aria-disabled={props.disabled ? \"true\" : undefined}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n if (props.closeOnSelect !== false) menu?.close();\n props.onSelect?.();\n }}\n >\n {content}\n </button>\n }\n >\n {(href) => (\n <a\n href={href()}\n target={props.external ? \"_blank\" : undefined}\n rel={props.external ? \"noopener noreferrer\" : undefined}\n role=\"menuitem\"\n aria-label={props.ariaLabel}\n tabIndex={-1}\n class={`k2b-dropdown__item ${props.class ?? \"\"}`}\n data-danger={danger() ? \"true\" : undefined}\n onClick={(event) => {\n // With `onSelect`, a plain click runs it in place of the link; a modified click keeps its browser meaning.\n if (props.onSelect && !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {\n event.preventDefault();\n menu?.close();\n props.onSelect();\n return;\n }\n menu?.close(false);\n }}\n >\n {content}\n </a>\n )}\n </Show>\n );\n}\n\nfunction DropdownChoiceItem(props: DropdownChoice): JSX.Element {\n return (\n <Show when={props.secondary} fallback={<DropdownChoiceRow {...props} />}>\n {(secondary) => (\n <div class=\"k2b-dropdown__pair\">\n <DropdownChoiceRow {...props} />\n <DropdownSecondaryButton {...secondary()} class=\"k2b-dropdown__secondary\" />\n </div>\n )}\n </Show>\n );\n}\n\nfunction DropdownSecondaryButton(props: DropdownSecondaryAction & { class: string }): JSX.Element {\n return (\n <button\n type=\"button\"\n role=\"menuitem\"\n tabIndex={-1}\n class={props.class}\n aria-label={props.ariaLabel}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n props.action();\n }}\n >\n {props.label}\n </button>\n );\n}\n\nfunction DropdownChoiceRow(props: DropdownChoice): JSX.Element {\n const menu = useContext(MenuContext);\n const checked = () => (typeof props.checked === \"function\" ? props.checked() : props.checked);\n let element: HTMLElement | undefined;\n return (\n <Dynamic\n ref={(node: HTMLAnchorElement | HTMLButtonElement) => {\n element = node;\n }}\n component={!props.disabled && props.href ? \"a\" : \"button\"}\n href={!props.disabled ? props.href : undefined}\n type={!props.disabled && props.href ? undefined : \"button\"}\n role={props.choice === \"checkbox\" ? \"menuitemcheckbox\" : \"menuitemradio\"}\n aria-label={props.ariaLabel}\n aria-checked={checked()}\n aria-disabled={props.disabled ? \"true\" : undefined}\n tabIndex={-1}\n class={`k2b-dropdown__item ${props.class ?? \"\"}`}\n data-selected={checked() ? \"true\" : undefined}\n disabled={props.disabled}\n onClick={(event: MouseEvent) => {\n if (props.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {\n menu?.close(false);\n return;\n }\n event.preventDefault();\n event.stopPropagation();\n if (props.closeOnSelect !== false) menu?.close();\n props.action();\n }}\n onKeyDown={(event: KeyboardEvent) => {\n // A link answers only Enter; as a menu choice it also answers Space, like the button form.\n if (event.key !== \" \" || props.disabled || !props.href) return;\n event.preventDefault();\n element?.click();\n }}\n >\n <Show when={props.choice === \"checkbox\"}>\n <span class=\"k2b-dropdown__checkbox\" aria-hidden=\"true\">\n <Show when={checked()}>\n <i class=\"ti ti-check\" />\n </Show>\n </span>\n </Show>\n <Show when={props.image} fallback={<Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>}>\n {(image) => <img class=\"k2b-dropdown__image\" src={image()} alt=\"\" />}\n </Show>\n <Show when={props.color}>\n {(color) => <span class=\"k2b-dropdown__color\" style={{ \"--k2b-dropdown-color\": color() }} aria-hidden=\"true\" />}\n </Show>\n <span class=\"k2b-dropdown__copy\">\n <span>{props.label}</span>\n <Show when={props.description}>{(description) => <small>{description()}</small>}</Show>\n </span>\n {props.trailing}\n {/* Always present for radios, so selecting the widest entry cannot widen a content-sized menu. */}\n <Show when={props.choice === \"radio\"}>\n <i class=\"ti ti-check k2b-dropdown__check\" data-hidden={checked() ? undefined : \"true\"} aria-hidden=\"true\" />\n </Show>\n </Dynamic>\n );\n}\n\nexport function DropdownItems(props: { items: readonly DropdownItem[]; close: (restoreFocus?: boolean) => void }): JSX.Element {\n const messages = useUiMessages();\n const renderItem = (item: DropdownAction | DropdownChoice): JSX.Element =>\n \"choice\" in item ? (\n <DropdownChoiceItem {...item} />\n ) : (\n <DropdownItem\n ariaLabel={item.ariaLabel}\n closeOnSelect={\"closeOnSelect\" in item ? item.closeOnSelect : undefined}\n icon={item.icon}\n image={item.image}\n description={item.description}\n trailing={item.trailing}\n variant={item.variant}\n disabled={item.disabled}\n class={item.class}\n href={\"href\" in item ? item.href : undefined}\n external={\"external\" in item ? item.external : undefined}\n onSelect={selectAction(item)}\n >\n {item.label}\n </DropdownItem>\n );\n\n return (\n <MenuContext.Provider value={{ close: props.close }}>\n <For each={props.items}>\n {(item, index) => (\n <Show when={\"items\" in item} fallback={renderItem(item as DropdownAction | DropdownChoice)}>\n <div\n class=\"k2b-dropdown__section\"\n data-divided={index() > 0 ? \"true\" : undefined}\n role=\"group\"\n // A row of choices is no set of actions: without a label it stays unnamed rather than misnamed.\n aria-label={\n (item as DropdownSection).sectionLabel ?? ((item as DropdownSection).layout === \"row\" ? undefined : messages().actions)\n }\n >\n <Show when={(item as DropdownSection).sectionLabel}>\n {(label) => (\n <Show when={(item as DropdownSection).labelAction} fallback={<div class=\"k2b-dropdown__label\">{label()}</div>}>\n {(action) => (\n <div class=\"k2b-dropdown__label k2b-dropdown__label--action\">\n <span>{label()}</span>\n <DropdownSecondaryButton {...action()} class=\"k2b-dropdown__label-action\" />\n </div>\n )}\n </Show>\n )}\n </Show>\n <Show\n when={(item as DropdownSection).layout === \"row\"}\n fallback={<For each={(item as DropdownSection).items}>{renderItem}</For>}\n >\n <div class=\"k2b-dropdown__row\">\n <For each={(item as DropdownSection).items}>{renderItem}</For>\n </div>\n </Show>\n </div>\n </Show>\n )}\n </For>\n </MenuContext.Provider>\n );\n}\n\nfunction DropdownTrigger(props: DropdownTriggerProps): JSX.Element {\n const context = useContext(DropdownContext);\n if (!context) throw new Error(\"Dropdown.Trigger must be used inside Dropdown.Root\");\n const [local, rest] = splitProps(props, [\n \"appearance\",\n \"children\",\n \"class\",\n \"disabled\",\n \"iconOnly\",\n \"label\",\n \"ref\",\n \"size\",\n \"tabIndex\",\n \"title\",\n \"tooltip\",\n \"tooltipDelay\",\n \"tooltipPlacement\",\n \"type\",\n \"variant\",\n ]);\n let target: HTMLButtonElement | undefined;\n const disabled = () => Boolean(context.disabled() || local.disabled);\n // An icon-only trigger shows its label as a hint, like IconButton.\n const tooltip = useLabelTooltip(\n () => local.tooltip,\n () => (local.iconOnly ? (local.title ?? local.label) : undefined),\n );\n const register = (element: HTMLButtonElement) => {\n target = element;\n context.registerTrigger(element);\n if (typeof local.ref === \"function\") local.ref(element);\n };\n const click: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (event) => {\n event.stopPropagation();\n context.toggle();\n };\n\n if (local.appearance !== \"plain\") {\n return (\n <Button\n {...rest}\n ref={register}\n aria-controls={context.menuId}\n aria-expanded={context.open()}\n aria-haspopup=\"menu\"\n aria-label={local.label}\n disabled={disabled()}\n tabIndex={disabled() ? -1 : local.tabIndex}\n onClick={click}\n onKeyDown={context.triggerKeyDown}\n type={local.type ?? \"button\"}\n class={`${local.iconOnly ? \"k2b-icon-button\" : \"\"} k2b-dropdown__trigger ${local.class ?? \"\"}`}\n size={local.size}\n variant={local.variant ?? (local.iconOnly ? \"ghost\" : undefined)}\n title={iconTitle(local.title, tooltip())}\n tooltip={tooltip()}\n tooltipDelay={local.tooltipDelay}\n tooltipPlacement={local.tooltipPlacement}\n >\n {local.children}\n </Button>\n );\n }\n\n return (\n <>\n <button\n {...rest}\n ref={register}\n aria-controls={context.menuId}\n aria-expanded={context.open()}\n aria-haspopup=\"menu\"\n aria-label={local.label}\n disabled={disabled()}\n tabIndex={disabled() ? -1 : local.tabIndex}\n onClick={click}\n onKeyDown={context.triggerKeyDown}\n type={local.type ?? \"button\"}\n class={`k2b-dropdown__trigger ${local.class ?? \"\"}`}\n title={iconTitle(local.title, tooltip())}\n >\n {local.children}\n </button>\n <Show when={tooltip() !== false && tooltip() !== undefined}>\n <Tooltip\n content={tooltip() as JSX.Element}\n target={() => target}\n delay={local.tooltipDelay}\n disabled={disabled()}\n placement={local.tooltipPlacement}\n />\n </Show>\n </>\n );\n}\n\n/** Accessible top-layer menu with explicit trigger ownership. */\nfunction DropdownRoot(props: DropdownProps): JSX.Element {\n const messages = useUiMessages();\n const locale = useLocale();\n /** The open phone sheet's cancel switch: it closes when the menu goes or is disabled, as the popover does. */\n let sheet: AbortController | undefined;\n const id = createUniqueId().replace(/[^a-zA-Z0-9_-]/g, \"-\");\n const menuId = `k2b-dropdown-${id}`;\n const [internalOpen, setInternalOpen] = createSignal(false);\n let triggerRef: HTMLButtonElement | undefined;\n let menuRef: HTMLDivElement | undefined;\n let triggerRing = true;\n let mounted = false;\n /** Where a key on the trigger asked the focus to go; a controlled menu opens later, in its owner's update. */\n let keyFocus: \"first\" | \"last\" | false = false;\n let viewportListenersAttached = false;\n let resizeObserver: ResizeObserver | undefined;\n\n const isOpen = () => props.open ?? internalOpen();\n const position = (): DropdownPosition =>\n typeof props.position === \"function\" ? props.position() : (props.position ?? (props.align === \"end\" ? \"bottom-left\" : \"bottom-right\"));\n\n const place = () => {\n if (!triggerRef || !menuRef) return;\n const rect = dropdownPosition(triggerRef.getBoundingClientRect(), menuRef.getBoundingClientRect(), position(), {\n width: window.innerWidth,\n height: window.innerHeight,\n });\n menuRef.style.left = `${rect.left}px`;\n menuRef.style.top = `${rect.top}px`;\n };\n const reposition = () => {\n if (isOpen()) place();\n };\n const attachViewportListeners = () => {\n if (viewportListenersAttached) return;\n viewportListenersAttached = true;\n window.addEventListener(\"resize\", reposition);\n window.addEventListener(\"scroll\", reposition, true);\n // A content-sized menu changes size when its items change while it is open.\n if (menuRef && typeof ResizeObserver !== \"undefined\") {\n resizeObserver ??= new ResizeObserver(reposition);\n resizeObserver.observe(menuRef);\n }\n };\n const detachViewportListeners = () => {\n if (!viewportListenersAttached) return;\n viewportListenersAttached = false;\n window.removeEventListener(\"resize\", reposition);\n window.removeEventListener(\"scroll\", reposition, true);\n resizeObserver?.disconnect();\n };\n const close = (restoreFocus = true) => {\n // Before hiding, so the popover does not return focus on its own.\n if (restoreFocus) returnFocus(triggerRef, triggerRing);\n if (menuRef?.matches(\":popover-open\")) menuRef.hidePopover();\n // Like `open`, expose the closed state now: the toggle event can arrive after the next key press, and a trigger\n // that still reads as open would ignore Enter (Escape, then Enter at once, must reopen).\n setInternalOpen(false);\n detachViewportListeners();\n };\n const open = (focus: \"first\" | \"last\" | false = \"first\") => {\n if (props.disabled || !menuRef || menuRef.matches(\":popover-open\")) return;\n triggerRing = ringOnReturn(triggerRef);\n menuRef.showPopover();\n // The toggle event arrives a task later; expose the open state before focus moves into the menu.\n setInternalOpen(true);\n attachViewportListeners();\n place();\n queueMicrotask(() => {\n if (focus) focusMenuItem(menuRef, focus === \"first\" ? 0 : -1);\n });\n };\n const requestOpen = (next: boolean, focus: \"first\" | \"last\" | false = \"first\") => {\n if (props.disabled && next) return;\n if (props.open !== undefined) {\n props.onOpenChange?.(next);\n return;\n }\n if (next && props.phone === \"sheet\" && prefersMenuSheet()) {\n if (sheet) return;\n const current = new AbortController();\n sheet = current;\n // The sheet is this menu's open state: the trigger reports it and the owner hears both ends.\n setInternalOpen(true);\n props.onOpenChange?.(true);\n void openMenuSheet({\n Items: DropdownItems,\n items: props.items,\n label: props.label ?? messages().dropdownMenu,\n locale: locale(),\n signal: current.signal,\n }).finally(() => {\n sheet = undefined;\n setInternalOpen(false);\n props.onOpenChange?.(false);\n props.onClose?.();\n });\n return;\n }\n if (next) open(focus);\n else close(false);\n };\n const handleMenuKeyDown = (event: KeyboardEvent) => {\n const items = actionableItems(menuRef);\n if (focusMenuRow(items, event.key) || focusRowSegment(items, event.key)) {\n event.preventDefault();\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n returnFocus(triggerRef, triggerRing);\n requestOpen(false);\n } else if (event.key === \"Tab\") {\n requestOpen(false);\n }\n };\n\n const context: DropdownContextValue = {\n disabled: () => Boolean(props.disabled),\n menuId,\n open: isOpen,\n registerTrigger: (element) => {\n triggerRef = element;\n },\n toggle: () => requestOpen(!isOpen()),\n triggerKeyDown: (event) => {\n if (![\"Enter\", \" \", \"ArrowDown\", \"ArrowUp\"].includes(event.key)) return;\n event.preventDefault();\n event.stopPropagation();\n if (isOpen()) {\n focusMenuItem(menuRef, event.key === \"ArrowUp\" ? -1 : 0);\n return;\n }\n keyFocus = event.key === \"ArrowUp\" ? \"last\" : \"first\";\n requestOpen(true, keyFocus);\n keyFocus = false;\n },\n };\n\n createEffect(() => {\n const controlled = props.open;\n if (!mounted || controlled === undefined || !menuRef) return;\n if (controlled && !menuRef.matches(\":popover-open\")) open(keyFocus);\n if (!controlled && menuRef.matches(\":popover-open\")) close(false);\n });\n createEffect(() => {\n if (!props.disabled) return;\n sheet?.abort();\n if (mounted) close(false);\n });\n onMount(() => {\n mounted = true;\n if (props.open) open(false);\n onCleanup(detachViewportListeners);\n });\n onCleanup(() => sheet?.abort());\n\n return (\n <DropdownContext.Provider value={context}>\n <span class={`k2b-dropdown ${props.class ?? \"\"}`}>\n {props.children}\n <div\n ref={menuRef}\n id={menuId}\n popover=\"auto\"\n role=\"menu\"\n aria-label={props.label ?? messages().dropdownMenu}\n class={`k2b-dropdown__menu ${props.menuClass ?? \"\"}`}\n style={props.width ? { \"--k2b-dropdown-width\": props.width } : undefined}\n data-width={props.width ? \"fixed\" : undefined}\n data-variant={props.variant ?? \"default\"}\n data-position={position()}\n onKeyDown={handleMenuKeyDown}\n onToggle={(event) => {\n const nextOpen = (event as ToggleEvent).newState === \"open\";\n const wasOpen = (event as ToggleEvent).oldState === \"open\";\n setInternalOpen(nextOpen);\n if (nextOpen) attachViewportListeners();\n else detachViewportListeners();\n if (props.open === undefined || props.open !== nextOpen) props.onOpenChange?.(nextOpen);\n if (wasOpen && !nextOpen) props.onClose?.();\n if (!nextOpen && props.open === true) queueMicrotask(() => props.open === true && open(false));\n }}\n >\n <DropdownItems items={props.items} close={close} />\n </div>\n </span>\n </DropdownContext.Provider>\n );\n}\n\ntype DropdownComponent = ((props: DropdownProps) => JSX.Element) & {\n Root: (props: DropdownProps) => JSX.Element;\n Trigger: (props: DropdownTriggerProps) => JSX.Element;\n Item: (props: DropdownItemProps) => JSX.Element;\n};\n\nexport const Dropdown = DropdownRoot as DropdownComponent;\nDropdown.Root = DropdownRoot;\nDropdown.Trigger = DropdownTrigger;\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
|
|
2
|
-
import { createComponent as _$createComponent } from "solid-js/web";
|
|
3
|
-
import { ssr as _$ssr } from "solid-js/web";
|
|
4
2
|
import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
|
|
3
|
+
import { ssr as _$ssr } from "solid-js/web";
|
|
5
4
|
import { escape as _$escape } from "solid-js/web";
|
|
5
|
+
import { createComponent as _$createComponent } from "solid-js/web";
|
|
6
6
|
import { memo as _$memo } from "solid-js/web";
|
|
7
|
-
var _tmpl$ = ["<
|
|
7
|
+
var _tmpl$ = ["<span class=\"k2b-filter-chip__swatches\" aria-hidden=\"true\">", "</span>"],
|
|
8
8
|
_tmpl$2 = ["<span class=\"k2b-filter-chip__label\">", "", "</span>"],
|
|
9
9
|
_tmpl$3 = "<i class=\"ti ti-chevron-down k2b-filter-chip__chevron\" aria-hidden=\"true\"></i>",
|
|
10
|
-
_tmpl$4 = ["<
|
|
11
|
-
_tmpl$5 = ["<span class=\"k2b-filter-chip__dot\" style=\"", "\"
|
|
12
|
-
_tmpl$6 = ["<span class=\"k2b-filter-
|
|
13
|
-
_tmpl$7 = ["<
|
|
14
|
-
_tmpl$8 = ["<
|
|
15
|
-
|
|
10
|
+
_tmpl$4 = ["<i", " aria-hidden=\"true\"></i>"],
|
|
11
|
+
_tmpl$5 = ["<span class=\"k2b-filter-chip__dot\" style=\"", "\"></span>"],
|
|
12
|
+
_tmpl$6 = ["<span class=\"k2b-filter-chip__value\">: ", "", "", "</span>"],
|
|
13
|
+
_tmpl$7 = ["<span class=\"k2b-filter-chip__dot\" style=\"", "\" aria-hidden=\"true\"></span>"],
|
|
14
|
+
_tmpl$8 = ["<span class=\"k2b-filter-chip__label\">", "</span>"],
|
|
15
|
+
_tmpl$9 = ["<a", ">", "</a>"],
|
|
16
|
+
_tmpl$0 = ["<button type=\"button\"", "", ">", "</button>"];
|
|
17
|
+
import { createMemo, For, Show } from "solid-js";
|
|
16
18
|
import { useUiMessages } from "../intl/messages";
|
|
17
19
|
import Dropdown from "./Dropdown";
|
|
18
20
|
import { useFilterMessages } from "./filter-messages";
|
|
@@ -61,6 +63,17 @@ export function FilterChip(props) {
|
|
|
61
63
|
};
|
|
62
64
|
const reset = () => emit(props.defaultValue ? [...props.defaultValue] : []);
|
|
63
65
|
const showReset = () => hasDefault() && !atDefault() || !hasDefault() && props.value.length > 0;
|
|
66
|
+
const swatches = createMemo(() => props.swatches && !props.iconOnly ? selectedOptions().flatMap(option => option.color ? [option.color] : []).slice(0, 4) : []);
|
|
67
|
+
const onlyValue = value => {
|
|
68
|
+
const kept = props.value.filter(entry => !sectionByValue().get(entry)?.multiple);
|
|
69
|
+
emit([...kept, value]);
|
|
70
|
+
};
|
|
71
|
+
const toggleSection = section => {
|
|
72
|
+
const values = section.options.map(option => option.value);
|
|
73
|
+
const all = values.every(value => selected(value));
|
|
74
|
+
const others = props.value.filter(entry => !values.includes(entry));
|
|
75
|
+
emit(all ? others : [...others, ...values]);
|
|
76
|
+
};
|
|
64
77
|
const optionItems = createMemo(() => {
|
|
65
78
|
const result = [];
|
|
66
79
|
for (const section of props.options) {
|
|
@@ -72,11 +85,34 @@ export function FilterChip(props) {
|
|
|
72
85
|
closeOnSelect: false,
|
|
73
86
|
color: option.color,
|
|
74
87
|
icon: !section.multiple ? option.icon : undefined,
|
|
75
|
-
label: option.label
|
|
88
|
+
label: option.label,
|
|
89
|
+
trailing: option.trailing,
|
|
90
|
+
secondary: props.only && section.multiple ? {
|
|
91
|
+
label: filterMessages().only,
|
|
92
|
+
ariaLabel: filterMessages().onlyOption({
|
|
93
|
+
label: option.label
|
|
94
|
+
}),
|
|
95
|
+
action: () => onlyValue(option.value)
|
|
96
|
+
} : undefined
|
|
76
97
|
}));
|
|
98
|
+
// Read when the row renders, so a change of the choice updates the label without rebuilding the rows.
|
|
99
|
+
const all = () => section.options.every(option => selected(option.value));
|
|
100
|
+
const sectionLabel = section.label;
|
|
101
|
+
const labelAction = section.toggleAll && section.multiple && sectionLabel && section.options.length > 0 ? {
|
|
102
|
+
get label() {
|
|
103
|
+
return all() ? filterMessages().none : filterMessages().all;
|
|
104
|
+
},
|
|
105
|
+
get ariaLabel() {
|
|
106
|
+
return (all() ? filterMessages().noneOf : filterMessages().allOf)({
|
|
107
|
+
label: sectionLabel
|
|
108
|
+
});
|
|
109
|
+
},
|
|
110
|
+
action: () => toggleSection(section)
|
|
111
|
+
} : undefined;
|
|
77
112
|
if (section.label || section.layout) result.push({
|
|
78
113
|
sectionLabel: section.label,
|
|
79
114
|
layout: section.layout,
|
|
115
|
+
labelAction,
|
|
80
116
|
items
|
|
81
117
|
});else result.push(...items);
|
|
82
118
|
}
|
|
@@ -135,7 +171,22 @@ export function FilterChip(props) {
|
|
|
135
171
|
return triggerLabel();
|
|
136
172
|
},
|
|
137
173
|
get children() {
|
|
138
|
-
return [_$
|
|
174
|
+
return [_$createComponent(Show, {
|
|
175
|
+
get when() {
|
|
176
|
+
return swatches().length > 0;
|
|
177
|
+
},
|
|
178
|
+
get fallback() {
|
|
179
|
+
return _$ssr(_tmpl$4, _$ssrAttribute("class", _$escape(props.icon, true), false));
|
|
180
|
+
},
|
|
181
|
+
get children() {
|
|
182
|
+
return _$ssr(_tmpl$, _$escape(_$createComponent(For, {
|
|
183
|
+
get each() {
|
|
184
|
+
return swatches();
|
|
185
|
+
},
|
|
186
|
+
children: color => _$ssr(_tmpl$5, _$ssrStyleProperty("--k2b-filter-color:", _$escape(color, true)))
|
|
187
|
+
})));
|
|
188
|
+
}
|
|
189
|
+
}), _$createComponent(Show, {
|
|
139
190
|
get when() {
|
|
140
191
|
return !props.iconOnly;
|
|
141
192
|
},
|
|
@@ -154,11 +205,11 @@ export function FilterChip(props) {
|
|
|
154
205
|
}
|
|
155
206
|
});
|
|
156
207
|
},
|
|
157
|
-
children: first => _$ssr(_tmpl$
|
|
208
|
+
children: first => _$ssr(_tmpl$6, _$escape(_$createComponent(Show, {
|
|
158
209
|
get when() {
|
|
159
210
|
return first().color;
|
|
160
211
|
},
|
|
161
|
-
children: color => _$ssr(_tmpl$
|
|
212
|
+
children: color => _$ssr(_tmpl$7, _$ssrStyleProperty("--k2b-filter-color:", _$escape(color(), true)))
|
|
162
213
|
})), _$escape(first().label), _$escape(_$createComponent(Show, {
|
|
163
214
|
get when() {
|
|
164
215
|
return props.value.length > 1;
|
|
@@ -181,17 +232,17 @@ export default FilterChip;
|
|
|
181
232
|
* `aria-pressed`. Selection changes only colour and background, so neighbouring chips never move.
|
|
182
233
|
*/
|
|
183
234
|
export function FilterToggle(props) {
|
|
184
|
-
const content = () => [_$ssr(_tmpl
|
|
235
|
+
const content = () => [_$ssr(_tmpl$4, _$ssrAttribute("class", _$escape(props.icon, true), false)), _$ssr(_tmpl$8, _$escape(props.label))];
|
|
185
236
|
const className = () => `k2b-filter-chip ${props.class ?? ""}`;
|
|
186
237
|
return _$createComponent(Show, {
|
|
187
238
|
get when() {
|
|
188
239
|
return _$memo(() => props.href !== undefined)() && !props.disabled;
|
|
189
240
|
},
|
|
190
241
|
get fallback() {
|
|
191
|
-
return _$ssr(_tmpl$
|
|
242
|
+
return _$ssr(_tmpl$0, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("data-active", props.active ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-pressed", _$escape(props.active, true), false) + _$ssrAttribute("title", _$escape(props.title, true), false), _$ssrAttribute("disabled", props.disabled, true), _$escape(content()));
|
|
192
243
|
},
|
|
193
244
|
get children() {
|
|
194
|
-
return _$ssr(_tmpl$
|
|
245
|
+
return _$ssr(_tmpl$9, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("href", _$escape(props.href, true), false) + _$ssrAttribute("data-active", props.active ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-current", props.active ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("title", _$escape(props.title, true), false), _$escape(content()));
|
|
195
246
|
}
|
|
196
247
|
});
|
|
197
248
|
}
|