@prokodo/ui 0.1.13 → 0.1.15
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 +2 -0
- package/dist/components/RTE/RTE.client.js +0 -1
- package/dist/components/RTE/RTE.js +4 -1
- package/dist/components/accordion/Accordion.js +8 -2
- package/dist/components/accordion/Accordion.view.js +1 -1
- package/dist/components/animated/Animated.client.js +13 -5
- package/dist/components/animated/Animated.js +8 -2
- package/dist/components/animatedText/AnimatedText.client.js +10 -2
- package/dist/components/animatedText/AnimatedText.js +8 -2
- package/dist/components/autocomplete/Autocomplete.client.js +5 -1
- package/dist/components/autocomplete/Autocomplete.js +4 -1
- package/dist/components/autocomplete/Autocomplete.view.js +13 -4
- package/dist/components/avatar/Avatar.js +4 -1
- package/dist/components/avatar/Avatar.view.js +19 -12
- package/dist/components/base-link/BaseLink.js +4 -1
- package/dist/components/base-link/BaseLink.view.js +3 -0
- package/dist/components/button/Button.css +114 -6
- package/dist/components/button/Button.js +4 -1
- package/dist/components/button/Button.module.css +114 -6
- package/dist/components/button/Button.module.scss.js +10 -2
- package/dist/components/button/Button.view.js +4 -1
- package/dist/components/calendly/Calendly.js +8 -2
- package/dist/components/card/Card.js +11 -5
- package/dist/components/card/Card.view.js +22 -5
- package/dist/components/carousel/Carousel.client.js +140 -129
- package/dist/components/carousel/Carousel.js +8 -2
- package/dist/components/carousel/Carousel.view.js +10 -0
- package/dist/components/checkbox/Checkbox.client.js +42 -0
- package/dist/components/checkbox/Checkbox.css +312 -0
- package/dist/components/checkbox/Checkbox.js +15 -0
- package/dist/components/checkbox/Checkbox.lazy.js +12 -0
- package/dist/components/checkbox/Checkbox.module.css +312 -0
- package/dist/components/checkbox/Checkbox.module.scss.js +20 -0
- package/dist/components/checkbox/Checkbox.server.js +20 -0
- package/dist/components/checkbox/Checkbox.view.js +89 -0
- package/dist/components/checkbox/index.js +4 -0
- package/dist/components/checkbox-group/CheckboxGroup.client.js +57 -0
- package/dist/components/checkbox-group/CheckboxGroup.css +238 -0
- package/dist/components/checkbox-group/CheckboxGroup.js +16 -0
- package/dist/components/checkbox-group/CheckboxGroup.lazy.js +12 -0
- package/dist/components/checkbox-group/CheckboxGroup.module.css +238 -0
- package/dist/components/checkbox-group/CheckboxGroup.module.scss.js +15 -0
- package/dist/components/checkbox-group/CheckboxGroup.server.js +25 -0
- package/dist/components/checkbox-group/CheckboxGroup.view.js +100 -0
- package/dist/components/checkbox-group/index.js +4 -0
- package/dist/components/chip/Chip.js +4 -1
- package/dist/components/chip/Chip.view.js +4 -0
- package/dist/components/datePicker/DatePicker.js +4 -1
- package/dist/components/dialog/Dialog.js +8 -2
- package/dist/components/dialog/Dialog.view.js +25 -6
- package/dist/components/drawer/Drawer.client.js +0 -1
- package/dist/components/drawer/Drawer.js +4 -1
- package/dist/components/drawer/Drawer.view.js +14 -3
- package/dist/components/dynamic-list/DynamicList.client.js +1 -0
- package/dist/components/dynamic-list/DynamicList.js +4 -1
- package/dist/components/dynamic-list/DynamicList.view.js +18 -5
- package/dist/components/form/Form.client.js +4 -1
- package/dist/components/form/Form.js +4 -1
- package/dist/components/form/Form.view.js +3 -1
- package/dist/components/form/FormField.client.js +8 -2
- package/dist/components/form/FormField.js +4 -1
- package/dist/components/form/FormResponse.js +4 -1
- package/dist/components/headline/Headline.js +8 -2
- package/dist/components/icon/Icon.js +8 -2
- package/dist/components/image/Image.client.js +9 -5
- package/dist/components/image/Image.js +8 -2
- package/dist/components/image/Image.server.js +2 -1
- package/dist/components/image-text/ImageText.js +18 -8
- package/dist/components/input/Input.client.js +15 -2
- package/dist/components/input/Input.js +4 -1
- package/dist/components/input/Input.view.js +15 -6
- package/dist/components/input/InputValidation.js +6 -2
- package/dist/components/inputOTP/InputOTP.js +2 -1
- package/dist/components/link/Link.js +5 -3
- package/dist/components/link/Link.view.js +2 -1
- package/dist/components/list/List.js +52 -23
- package/dist/components/loading/Loading.js +4 -1
- package/dist/components/loading/Loading.view.js +25 -5
- package/dist/components/lottie/Lottie.js +9 -5
- package/dist/components/map/Map.js +62 -44
- package/dist/components/pagination/Pagination.js +4 -1
- package/dist/components/pagination/Pagination.view.js +3 -1
- package/dist/components/post-item/PostItem.js +4 -1
- package/dist/components/post-item/PostItemAuthor.js +4 -1
- package/dist/components/post-teaser/PostTeaser.js +4 -1
- package/dist/components/post-teaser/PostTeaser.view.js +4 -2
- package/dist/components/post-widget/PostWidget.js +5 -3
- package/dist/components/post-widget/PostWidget.view.js +9 -3
- package/dist/components/post-widget-carousel/PostWidgetCarousel.js +8 -2
- package/dist/components/post-widget-carousel/PostWidgetCarousel.view.js +2 -1
- package/dist/components/progressBar/ProgressBar.js +8 -2
- package/dist/components/progressBar/ProgressBar.view.js +4 -1
- package/dist/components/rating/Rating.client.js +6 -1
- package/dist/components/rating/Rating.js +4 -1
- package/dist/components/rich-text/RichText.client.js +52 -17
- package/dist/components/rich-text/RichText.js +8 -2
- package/dist/components/rich-text/RichText.server.js +3 -0
- package/dist/components/select/Select.client.js +149 -101
- package/dist/components/select/Select.js +8 -2
- package/dist/components/select/Select.view.js +35 -11
- package/dist/components/sidenav/SideNav.js +8 -2
- package/dist/components/slider/Slider.client.js +11 -2
- package/dist/components/slider/Slider.js +4 -1
- package/dist/components/slider/Slider.view.js +43 -5
- package/dist/components/snackbar/Snackbar.client.js +5 -1
- package/dist/components/snackbar/Snackbar.css +5 -1
- package/dist/components/snackbar/Snackbar.js +4 -1
- package/dist/components/snackbar/Snackbar.module.css +5 -1
- package/dist/components/snackbar/SnackbarProvider.js +8 -2
- package/dist/components/stepper/Stepper.client.js +6 -3
- package/dist/components/stepper/Stepper.js +4 -1
- package/dist/components/switch/Switch.js +4 -1
- package/dist/components/switch/Switch.view.js +1 -0
- package/dist/components/table/Table.js +1 -0
- package/dist/components/tabs/Tabs.client.js +1 -0
- package/dist/components/tabs/Tabs.js +8 -2
- package/dist/components/tabs/Tabs.view.js +8 -2
- package/dist/components/tooltip/Tooltip.client.js +126 -91
- package/dist/components/tooltip/Tooltip.js +10 -4
- package/dist/components/tooltip/Tooltip.view.js +1 -0
- package/dist/constants/project.js +1 -1
- package/dist/helpers/createIsland.js +1 -0
- package/dist/helpers/createLazyWrapper.js +1 -0
- package/dist/hooks/useGoogleMaps.js +0 -1
- package/dist/index.js +4 -0
- package/dist/theme.css +430 -9
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/RTE/RTE.d.ts +1 -1
- package/dist/types/components/RTE/RTE.lazy.d.ts +1 -1
- package/dist/types/components/avatar/Avatar.view.d.ts +1 -1
- package/dist/types/components/carousel/Carousel.view.d.ts +1 -1
- package/dist/types/components/checkbox/Checkbox.client.d.ts +4 -0
- package/dist/types/components/checkbox/Checkbox.d.ts +18 -0
- package/dist/types/components/checkbox/Checkbox.lazy.d.ts +19 -0
- package/dist/types/components/checkbox/Checkbox.model.d.ts +23 -0
- package/dist/types/components/checkbox/Checkbox.server.d.ts +3 -0
- package/dist/types/components/checkbox/Checkbox.view.d.ts +3 -0
- package/dist/types/components/checkbox/index.d.ts +2 -0
- package/dist/types/components/checkbox-group/CheckboxGroup.client.d.ts +4 -0
- package/dist/types/components/checkbox-group/CheckboxGroup.d.ts +4 -0
- package/dist/types/components/checkbox-group/CheckboxGroup.lazy.d.ts +5 -0
- package/dist/types/components/checkbox-group/CheckboxGroup.model.d.ts +38 -0
- package/dist/types/components/checkbox-group/CheckboxGroup.server.d.ts +3 -0
- package/dist/types/components/checkbox-group/CheckboxGroup.view.d.ts +3 -0
- package/dist/types/components/checkbox-group/index.d.ts +2 -0
- package/dist/types/components/dialog/Dialog.model.d.ts +1 -0
- package/dist/types/components/dialog/Dialog.view.d.ts +1 -1
- package/dist/types/components/dynamic-list/DynamicList.model.d.ts +1 -1
- package/dist/types/components/headline/Headline.model.d.ts +1 -1
- package/dist/types/components/input/Input.view.d.ts +1 -1
- package/dist/types/index.d.ts +2 -0
- package/package.json +29 -5
|
@@ -3,7 +3,7 @@ var __defProp = Object.defineProperty;
|
|
|
3
3
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { Marked as B } from "../../node_modules/.pnpm/marked@17.0.1/node_modules/marked/lib/marked.esm.js";
|
|
6
|
-
import { useRef, useMemo, useState, useEffect, Fragment, Children, isValidElement, createElement } from "react";
|
|
6
|
+
import { useRef, useMemo, useState, useEffect, Fragment, Children, cloneElement, isValidElement, createElement } from "react";
|
|
7
7
|
import { l as libExports } from "../../_virtual/index.js";
|
|
8
8
|
import { create } from "../../helpers/bem.js";
|
|
9
9
|
import { isString } from "../../helpers/validations.js";
|
|
@@ -15,9 +15,15 @@ import { Headline } from "../headline/Headline.js";
|
|
|
15
15
|
import { AnimatedText } from "../animatedText/AnimatedText.js";
|
|
16
16
|
const bem = create(styles, "RichText");
|
|
17
17
|
const xssOptions = (() => {
|
|
18
|
-
const wl = typeof libExports.getDefaultWhiteList === "function" ? libExports.getDefaultWhiteList() :
|
|
18
|
+
const wl = typeof libExports.getDefaultWhiteList === "function" ? libExports.getDefaultWhiteList() : (
|
|
19
|
+
/* istanbul ignore next */
|
|
20
|
+
{}
|
|
21
|
+
);
|
|
19
22
|
const add = /* @__PURE__ */ __name((tag) => {
|
|
20
|
-
wl[tag] = Array.from(
|
|
23
|
+
wl[tag] = Array.from(
|
|
24
|
+
/* @__PURE__ */ new Set([.../* istanbul ignore next */
|
|
25
|
+
wl[tag] ?? [], "class"])
|
|
26
|
+
);
|
|
21
27
|
}, "add");
|
|
22
28
|
add("pre");
|
|
23
29
|
add("code");
|
|
@@ -28,7 +34,10 @@ const xssOptions = (() => {
|
|
|
28
34
|
};
|
|
29
35
|
})();
|
|
30
36
|
const normalize = /* @__PURE__ */ __name((nodes) => Children.toArray(nodes), "normalize");
|
|
31
|
-
const withKey = /* @__PURE__ */ __name((el, key) => isValidElement(el) ? el.key == null ?
|
|
37
|
+
const withKey = /* @__PURE__ */ __name((el, key) => isValidElement(el) ? el.key == null ? cloneElement(el, { key }) : el : (
|
|
38
|
+
/* istanbul ignore next */
|
|
39
|
+
el
|
|
40
|
+
), "withKey");
|
|
32
41
|
const hasCodeBlocks = /* @__PURE__ */ __name((src) => /(^|\n)```/.test(src) || /<pre|<code/i.test(src), "hasCodeBlocks");
|
|
33
42
|
const extractFenceLangs = /* @__PURE__ */ __name((src) => {
|
|
34
43
|
const langs = /* @__PURE__ */ new Set();
|
|
@@ -97,16 +106,22 @@ function RichTextClient({
|
|
|
97
106
|
...schema
|
|
98
107
|
};
|
|
99
108
|
const headlineProps = { animationProps };
|
|
100
|
-
const renderAnimation = /* @__PURE__ */ __name((content) => {
|
|
109
|
+
const renderAnimation = /* @__PURE__ */ __name((content, idx) => {
|
|
101
110
|
if (!Boolean(animated)) return content;
|
|
102
|
-
return typeof content === "string" ? /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: content }) :
|
|
111
|
+
return typeof content === "string" ? /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: content }, `anim-${idx}`) : (
|
|
112
|
+
/* istanbul ignore next */
|
|
113
|
+
content
|
|
114
|
+
);
|
|
103
115
|
}, "renderAnimation");
|
|
104
|
-
const src = String(
|
|
116
|
+
const src = String(
|
|
117
|
+
/* istanbul ignore next */
|
|
118
|
+
children ?? ""
|
|
119
|
+
);
|
|
105
120
|
const fastHtml = useMemo(() => {
|
|
106
121
|
const parser2 = new B({ gfm: true, breaks: true });
|
|
107
122
|
return libExports.filterXSS(parser2.parse(src), xssOptions);
|
|
108
123
|
}, [src]);
|
|
109
|
-
const [html, setHtml] = useState(
|
|
124
|
+
const [html, setHtml] = useState(fastHtml);
|
|
110
125
|
useEffect(() => {
|
|
111
126
|
let cancelled = false;
|
|
112
127
|
void (async () => {
|
|
@@ -120,6 +135,7 @@ function RichTextClient({
|
|
|
120
135
|
]);
|
|
121
136
|
const markedHighlight = (
|
|
122
137
|
// support both module shapes
|
|
138
|
+
/* istanbul ignore next */
|
|
123
139
|
mhMod.markedHighlight ?? mhMod.default
|
|
124
140
|
);
|
|
125
141
|
if (typeof markedHighlight !== "function") {
|
|
@@ -249,7 +265,11 @@ function RichTextClient({
|
|
|
249
265
|
}
|
|
250
266
|
case "a": {
|
|
251
267
|
const cls = bem("a");
|
|
252
|
-
const href =
|
|
268
|
+
const href = (
|
|
269
|
+
/* istanbul ignore next */
|
|
270
|
+
elem.getAttribute("href") ?? /* istanbul ignore next */
|
|
271
|
+
"#"
|
|
272
|
+
);
|
|
253
273
|
const title = elem.getAttribute("title") ?? void 0;
|
|
254
274
|
const linkText = normalize(keyedChildren.map(renderAnimation));
|
|
255
275
|
const isHttp = /^https?:\/\//i.test(href);
|
|
@@ -263,7 +283,8 @@ function RichTextClient({
|
|
|
263
283
|
const htmlTarget = elem.getAttribute("target") ?? void 0;
|
|
264
284
|
const wantsBlank = htmlTarget === "_blank";
|
|
265
285
|
target = wantsBlank ? "_blank" : void 0;
|
|
266
|
-
rel =
|
|
286
|
+
rel = /* istanbul ignore next */
|
|
287
|
+
wantsBlank ? "noopener" : void 0;
|
|
267
288
|
}
|
|
268
289
|
return /* @__PURE__ */ jsx(
|
|
269
290
|
Link,
|
|
@@ -303,13 +324,21 @@ function RichTextClient({
|
|
|
303
324
|
const existing = elem.getAttribute("class");
|
|
304
325
|
const src2 = elem.getAttribute("src");
|
|
305
326
|
const alt = elem.getAttribute("alt");
|
|
306
|
-
|
|
327
|
+
const altStr = alt ?? "";
|
|
328
|
+
const srcStr = src2 ?? "";
|
|
329
|
+
return /* @__PURE__ */ jsx("span", { className: bem("image__wrapper"), children: srcStr ? /* @__PURE__ */ jsx(
|
|
307
330
|
Image,
|
|
308
331
|
{
|
|
309
332
|
fill: true,
|
|
310
|
-
alt:
|
|
333
|
+
alt: altStr,
|
|
311
334
|
className: [bem("image"), existing].filter(Boolean).join(" "),
|
|
312
|
-
src:
|
|
335
|
+
src: srcStr
|
|
336
|
+
}
|
|
337
|
+
) : /* @__PURE__ */ jsx(
|
|
338
|
+
"img",
|
|
339
|
+
{
|
|
340
|
+
alt: altStr,
|
|
341
|
+
className: [bem("image"), existing].filter(Boolean).join(" ")
|
|
313
342
|
}
|
|
314
343
|
) });
|
|
315
344
|
}
|
|
@@ -320,7 +349,10 @@ function RichTextClient({
|
|
|
320
349
|
case "ol": {
|
|
321
350
|
const cls = bem("ol");
|
|
322
351
|
const startAttr = elem.getAttribute("start");
|
|
323
|
-
const start = isString(startAttr) ?
|
|
352
|
+
const start = isString(startAttr) ? (
|
|
353
|
+
/* istanbul ignore next */
|
|
354
|
+
parseInt(startAttr, 10) || 1
|
|
355
|
+
) : 1;
|
|
324
356
|
const liElems = Array.from(elem.children).filter(
|
|
325
357
|
(e) => e.tagName.toLowerCase() === "li"
|
|
326
358
|
);
|
|
@@ -359,8 +391,10 @@ function RichTextClient({
|
|
|
359
391
|
className: [bem(tagName), existing].filter(Boolean).join(" ")
|
|
360
392
|
};
|
|
361
393
|
if (tagName === "img") {
|
|
362
|
-
props2.src =
|
|
363
|
-
|
|
394
|
+
props2.src = /* istanbul ignore next */
|
|
395
|
+
elem.getAttribute("src") ?? "";
|
|
396
|
+
props2.alt = /* istanbul ignore next */
|
|
397
|
+
elem.getAttribute("alt") ?? "";
|
|
364
398
|
props2.loading = "lazy";
|
|
365
399
|
}
|
|
366
400
|
if (VOID_TAGS.has(tagName)) {
|
|
@@ -407,7 +441,8 @@ function RichTextClient({
|
|
|
407
441
|
__name(RichTextClient, "RichTextClient");
|
|
408
442
|
RichTextClient.displayName = "RichTextClient";
|
|
409
443
|
function extractText(node) {
|
|
410
|
-
if (typeof node === "string" ||
|
|
444
|
+
if (typeof node === "string" || /* istanbul ignore next */
|
|
445
|
+
typeof node === "number") {
|
|
411
446
|
return String(node);
|
|
412
447
|
}
|
|
413
448
|
if (Array.isArray(node)) {
|
|
@@ -5,8 +5,14 @@ import { RichTextServer } from "./RichText.server.js";
|
|
|
5
5
|
const RichText = createIsland({
|
|
6
6
|
name: "RichText",
|
|
7
7
|
Server: RichTextServer,
|
|
8
|
-
loadLazy:
|
|
9
|
-
|
|
8
|
+
loadLazy: (
|
|
9
|
+
/* istanbul ignore next */
|
|
10
|
+
/* @__PURE__ */ __name(() => import("./RichText.lazy.js"), "loadLazy")
|
|
11
|
+
),
|
|
12
|
+
isInteractive: (
|
|
13
|
+
/* istanbul ignore next */
|
|
14
|
+
/* @__PURE__ */ __name(() => true, "isInteractive")
|
|
15
|
+
)
|
|
10
16
|
});
|
|
11
17
|
export {
|
|
12
18
|
RichText
|
|
@@ -12,6 +12,9 @@ function RichTextServer(props) {
|
|
|
12
12
|
children,
|
|
13
13
|
className,
|
|
14
14
|
schema = {},
|
|
15
|
+
animated: _animated,
|
|
16
|
+
animationProps: _animationProps,
|
|
17
|
+
variant: _variant,
|
|
15
18
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
16
19
|
itemProp,
|
|
17
20
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -11,11 +11,17 @@ function isMulti(v) {
|
|
|
11
11
|
__name(isMulti, "isMulti");
|
|
12
12
|
const toDatasetKey = /* @__PURE__ */ __name((k) => k.replace(/-([a-z])/g, (_, c) => c.toUpperCase()), "toDatasetKey");
|
|
13
13
|
function mergeValue(oldVal, newVal, multiple = false) {
|
|
14
|
-
return multiple ? (
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
return multiple ? (
|
|
15
|
+
/* istanbul ignore next */
|
|
16
|
+
(() => {
|
|
17
|
+
const s = new Set(
|
|
18
|
+
/* istanbul ignore next */
|
|
19
|
+
isMulti(oldVal) ? oldVal : []
|
|
20
|
+
);
|
|
21
|
+
s.has(newVal) ? s.delete(newVal) : s.add(newVal);
|
|
22
|
+
return [...s];
|
|
23
|
+
})()
|
|
24
|
+
) : newVal;
|
|
19
25
|
}
|
|
20
26
|
__name(mergeValue, "mergeValue");
|
|
21
27
|
function SelectClient({
|
|
@@ -64,7 +70,10 @@ function SelectClient({
|
|
|
64
70
|
);
|
|
65
71
|
const valueToIndex = useCallback(() => {
|
|
66
72
|
if (!Boolean(multiple)) {
|
|
67
|
-
const current = String(
|
|
73
|
+
const current = String(
|
|
74
|
+
/* istanbul ignore next */
|
|
75
|
+
val ?? ""
|
|
76
|
+
);
|
|
68
77
|
if (hasPlaceholder && current === "") return 0;
|
|
69
78
|
const idx = items.findIndex((x) => String(x.value) === current);
|
|
70
79
|
if (idx >= 0) return idx + (hasPlaceholder ? 1 : 0);
|
|
@@ -81,19 +90,23 @@ function SelectClient({
|
|
|
81
90
|
setPopupReady(false);
|
|
82
91
|
(_a = btnRef == null ? void 0 : btnRef.current) == null ? void 0 : _a.focus();
|
|
83
92
|
}, []);
|
|
84
|
-
const updatePopupPosition = useCallback(
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
93
|
+
const updatePopupPosition = useCallback(
|
|
94
|
+
/* istanbul ignore next */
|
|
95
|
+
() => {
|
|
96
|
+
const btn = btnRef.current;
|
|
97
|
+
if (!btn) return false;
|
|
98
|
+
const r = btn.getBoundingClientRect();
|
|
99
|
+
setPopupStyle({
|
|
100
|
+
position: "fixed",
|
|
101
|
+
left: r.left,
|
|
102
|
+
top: r.bottom,
|
|
103
|
+
width: r.width,
|
|
104
|
+
zIndex: 2147483647
|
|
105
|
+
});
|
|
106
|
+
return true;
|
|
107
|
+
},
|
|
108
|
+
[]
|
|
109
|
+
);
|
|
97
110
|
useEffect(() => {
|
|
98
111
|
if (!open || !popupReady) return;
|
|
99
112
|
setActiveIndex(valueToIndex());
|
|
@@ -142,54 +155,70 @@ function SelectClient({
|
|
|
142
155
|
window.addEventListener("click", handleOutside);
|
|
143
156
|
return () => window.removeEventListener("click", handleOutside);
|
|
144
157
|
}, [open, close]);
|
|
145
|
-
const handleKey =
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
if (e.key === "ArrowDown") {
|
|
154
|
-
e.preventDefault();
|
|
155
|
-
if (!open) {
|
|
156
|
-
openWithPosition();
|
|
158
|
+
const handleKey = (
|
|
159
|
+
/* istanbul ignore next */
|
|
160
|
+
/* @__PURE__ */ __name((e) => {
|
|
161
|
+
var _a, _b;
|
|
162
|
+
if (Boolean(disabled)) return;
|
|
163
|
+
if (e.key === "Escape") {
|
|
164
|
+
e.preventDefault();
|
|
165
|
+
close();
|
|
157
166
|
return;
|
|
158
167
|
}
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
168
|
+
if (e.key === "ArrowDown") {
|
|
169
|
+
e.preventDefault();
|
|
170
|
+
if (!open) {
|
|
171
|
+
openWithPosition();
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) + 1));
|
|
175
|
+
(_a = listRef.current) == null ? void 0 : _a.focus();
|
|
167
176
|
return;
|
|
168
177
|
}
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
const
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
178
|
+
if (e.key === "ArrowUp") {
|
|
179
|
+
e.preventDefault();
|
|
180
|
+
if (!open) {
|
|
181
|
+
openWithPosition();
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
184
|
+
setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) - 1));
|
|
185
|
+
(_b = listRef.current) == null ? void 0 : _b.focus();
|
|
186
|
+
}
|
|
187
|
+
}, "handleKey")
|
|
188
|
+
);
|
|
189
|
+
const dataset = useMemo(
|
|
190
|
+
/* istanbul ignore next */
|
|
191
|
+
() => {
|
|
192
|
+
const d = {};
|
|
193
|
+
for (const [k, v] of Object.entries(rest)) {
|
|
194
|
+
if (k.startsWith("data-")) d[toDatasetKey(k.slice(5))] = v;
|
|
195
|
+
}
|
|
196
|
+
return d;
|
|
197
|
+
},
|
|
198
|
+
[rest]
|
|
199
|
+
);
|
|
200
|
+
const clickOption = (
|
|
201
|
+
/* istanbul ignore next */
|
|
202
|
+
/* @__PURE__ */ __name((opt) => {
|
|
203
|
+
const newVal = opt === null ? (
|
|
204
|
+
/* istanbul ignore next */
|
|
205
|
+
Boolean(multiple) ? [] : ""
|
|
206
|
+
) : mergeValue(val, opt, multiple);
|
|
207
|
+
const syntheticEvt = { target: { dataset } };
|
|
208
|
+
setVal(newVal);
|
|
209
|
+
onChange == null ? void 0 : onChange(syntheticEvt, newVal);
|
|
210
|
+
if (!Boolean(multiple)) close();
|
|
211
|
+
}, "clickOption")
|
|
212
|
+
);
|
|
213
|
+
const onOptionKeyDown = (
|
|
214
|
+
/* istanbul ignore next */
|
|
215
|
+
/* @__PURE__ */ __name((e, v) => {
|
|
216
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
217
|
+
e.preventDefault();
|
|
218
|
+
clickOption(v);
|
|
219
|
+
}
|
|
220
|
+
}, "onOptionKeyDown")
|
|
221
|
+
);
|
|
193
222
|
return /* @__PURE__ */ jsx(
|
|
194
223
|
SelectView,
|
|
195
224
|
{
|
|
@@ -211,38 +240,41 @@ function SelectClient({
|
|
|
211
240
|
if (!args.open) return null;
|
|
212
241
|
if (!popupReady) return null;
|
|
213
242
|
if (typeof document === "undefined") return null;
|
|
214
|
-
const onListKeyDown =
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
243
|
+
const onListKeyDown = (
|
|
244
|
+
/* istanbul ignore next */
|
|
245
|
+
/* @__PURE__ */ __name((e) => {
|
|
246
|
+
if (e.key === "Escape") {
|
|
247
|
+
e.preventDefault();
|
|
248
|
+
close();
|
|
249
|
+
return;
|
|
250
|
+
}
|
|
251
|
+
if (e.key === "ArrowDown") {
|
|
252
|
+
e.preventDefault();
|
|
253
|
+
setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) + 1));
|
|
254
|
+
return;
|
|
255
|
+
}
|
|
256
|
+
if (e.key === "ArrowUp") {
|
|
257
|
+
e.preventDefault();
|
|
258
|
+
setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) - 1));
|
|
259
|
+
return;
|
|
260
|
+
}
|
|
261
|
+
if (e.key === "Home") {
|
|
262
|
+
e.preventDefault();
|
|
263
|
+
setActiveIndex(optionCount > 0 ? 0 : -1);
|
|
264
|
+
return;
|
|
265
|
+
}
|
|
266
|
+
if (e.key === "End") {
|
|
267
|
+
e.preventDefault();
|
|
268
|
+
setActiveIndex(optionCount > 0 ? optionCount - 1 : -1);
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
271
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
272
|
+
e.preventDefault();
|
|
273
|
+
const v = indexToValue(activeIndex);
|
|
274
|
+
clickOption(v);
|
|
275
|
+
}
|
|
276
|
+
}, "onListKeyDown")
|
|
277
|
+
);
|
|
246
278
|
const listbox = /* @__PURE__ */ jsxs(
|
|
247
279
|
"ul",
|
|
248
280
|
{
|
|
@@ -262,14 +294,29 @@ function SelectClient({
|
|
|
262
294
|
id: `${args.id}-opt-0`,
|
|
263
295
|
role: "option",
|
|
264
296
|
tabIndex: -1,
|
|
265
|
-
"aria-selected":
|
|
297
|
+
"aria-selected": (
|
|
298
|
+
/* istanbul ignore next */
|
|
299
|
+
Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === ""
|
|
300
|
+
),
|
|
266
301
|
className: args.bemItem({
|
|
267
|
-
selected:
|
|
302
|
+
selected: (
|
|
303
|
+
/* istanbul ignore next */
|
|
304
|
+
Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === ""
|
|
305
|
+
),
|
|
268
306
|
active: activeIndex === 0
|
|
269
307
|
}),
|
|
270
|
-
onClick:
|
|
271
|
-
|
|
272
|
-
|
|
308
|
+
onClick: (
|
|
309
|
+
/* istanbul ignore next */
|
|
310
|
+
/* @__PURE__ */ __name(() => args.onOptionClick(null), "onClick")
|
|
311
|
+
),
|
|
312
|
+
onKeyDown: (
|
|
313
|
+
/* istanbul ignore next */
|
|
314
|
+
/* @__PURE__ */ __name((e) => onOptionKeyDown(e, null), "onKeyDown")
|
|
315
|
+
),
|
|
316
|
+
onMouseMove: (
|
|
317
|
+
/* istanbul ignore next */
|
|
318
|
+
/* @__PURE__ */ __name(() => setActiveIndex(0), "onMouseMove")
|
|
319
|
+
),
|
|
273
320
|
children: args.placeholder
|
|
274
321
|
},
|
|
275
322
|
"placeholder"
|
|
@@ -305,7 +352,8 @@ function SelectClient({
|
|
|
305
352
|
type: "checkbox"
|
|
306
353
|
}
|
|
307
354
|
),
|
|
308
|
-
Boolean(args.iconVisible) &&
|
|
355
|
+
Boolean(args.iconVisible) && /* istanbul ignore next */
|
|
356
|
+
((_a = opt.icon) == null ? void 0 : _a.call(opt)),
|
|
309
357
|
opt.label
|
|
310
358
|
]
|
|
311
359
|
},
|
|
@@ -5,8 +5,14 @@ import SelectServer from "./Select.server.js";
|
|
|
5
5
|
const Select = createIsland({
|
|
6
6
|
name: "Select",
|
|
7
7
|
Server: SelectServer,
|
|
8
|
-
loadLazy:
|
|
9
|
-
|
|
8
|
+
loadLazy: (
|
|
9
|
+
/* istanbul ignore next */
|
|
10
|
+
/* @__PURE__ */ __name(() => import("./Select.lazy.js"), "loadLazy")
|
|
11
|
+
),
|
|
12
|
+
isInteractive: (
|
|
13
|
+
/* istanbul ignore next */
|
|
14
|
+
/* @__PURE__ */ __name(() => true, "isInteractive")
|
|
15
|
+
)
|
|
10
16
|
});
|
|
11
17
|
export {
|
|
12
18
|
Select
|
|
@@ -33,9 +33,16 @@ function SelectView({
|
|
|
33
33
|
const listId = `${id}-listbox`;
|
|
34
34
|
const errorId = isError ? `${id}-error` : void 0;
|
|
35
35
|
const helperId = hasHelper ? `${id}-helper` : void 0;
|
|
36
|
-
const open = Boolean(_clientState == null ? void 0 : _clientState.open) ??
|
|
36
|
+
const open = Boolean(_clientState == null ? void 0 : _clientState.open) ?? /* istanbul ignore next */
|
|
37
|
+
false;
|
|
37
38
|
const btnRef = _clientState == null ? void 0 : _clientState.buttonRef;
|
|
38
|
-
const selectedItems = Array.isArray(value) ?
|
|
39
|
+
const selectedItems = Array.isArray(value) ? (
|
|
40
|
+
/* istanbul ignore next */
|
|
41
|
+
items.filter(
|
|
42
|
+
/* istanbul ignore next */
|
|
43
|
+
(i) => value.includes(i.value)
|
|
44
|
+
)
|
|
45
|
+
) : items.filter((i) => i.value === value);
|
|
39
46
|
const display = selectedItems.length === 0 ? /* @__PURE__ */ jsx(
|
|
40
47
|
"span",
|
|
41
48
|
{
|
|
@@ -49,9 +56,11 @@ function SelectView({
|
|
|
49
56
|
) : /* @__PURE__ */ jsx("span", { className: bem("button__inner", { expanded: open }), children: selectedItems.map((i, idx) => {
|
|
50
57
|
var _a2;
|
|
51
58
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
52
|
-
Boolean(iconVisible) &&
|
|
59
|
+
Boolean(iconVisible) && /* istanbul ignore next */
|
|
60
|
+
((_a2 = i.icon) == null ? void 0 : _a2.call(i)),
|
|
53
61
|
i.label,
|
|
54
|
-
idx < selectedItems.length - 1 &&
|
|
62
|
+
idx < selectedItems.length - 1 && /* istanbul ignore next */
|
|
63
|
+
", "
|
|
55
64
|
] }, i == null ? void 0 : i.label);
|
|
56
65
|
}) });
|
|
57
66
|
return /* @__PURE__ */ jsxs(
|
|
@@ -101,7 +110,13 @@ function SelectView({
|
|
|
101
110
|
{
|
|
102
111
|
name,
|
|
103
112
|
type: "hidden",
|
|
104
|
-
value:
|
|
113
|
+
value: (
|
|
114
|
+
/* istanbul ignore next */
|
|
115
|
+
Array.isArray(value) ? (
|
|
116
|
+
/* istanbul ignore next */
|
|
117
|
+
value.join(",")
|
|
118
|
+
) : value ?? ""
|
|
119
|
+
)
|
|
105
120
|
}
|
|
106
121
|
),
|
|
107
122
|
(_a = _clientState == null ? void 0 : _clientState.renderListbox) == null ? void 0 : _a.call(_clientState, {
|
|
@@ -113,13 +128,22 @@ function SelectView({
|
|
|
113
128
|
placeholder,
|
|
114
129
|
items,
|
|
115
130
|
value: value ?? (Boolean(multiple) ? [] : ""),
|
|
116
|
-
onOptionClick:
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
131
|
+
onOptionClick: (
|
|
132
|
+
/* istanbul ignore next */
|
|
133
|
+
/* @__PURE__ */ __name((opt) => {
|
|
134
|
+
var _a2;
|
|
135
|
+
return (_a2 = _clientState == null ? void 0 : _clientState.onOptionClick) == null ? void 0 : _a2.call(_clientState, opt);
|
|
136
|
+
}, "onOptionClick")
|
|
137
|
+
),
|
|
120
138
|
iconVisible,
|
|
121
|
-
bemItem:
|
|
122
|
-
|
|
139
|
+
bemItem: (
|
|
140
|
+
/* istanbul ignore next */
|
|
141
|
+
/* @__PURE__ */ __name((mods) => bem("item", mods), "bemItem")
|
|
142
|
+
),
|
|
143
|
+
bemCheckbox: (
|
|
144
|
+
/* istanbul ignore next */
|
|
145
|
+
/* @__PURE__ */ __name((mods) => bem("checkbox", mods), "bemCheckbox")
|
|
146
|
+
)
|
|
123
147
|
})
|
|
124
148
|
] }),
|
|
125
149
|
(isError || Boolean(helperText)) && /* @__PURE__ */ jsx(
|
|
@@ -5,9 +5,15 @@ import SideNavServer from "./SideNav.server.js";
|
|
|
5
5
|
const SideNav = createIsland({
|
|
6
6
|
name: "SideNav",
|
|
7
7
|
Server: SideNavServer,
|
|
8
|
-
loadLazy:
|
|
8
|
+
loadLazy: (
|
|
9
|
+
/* istanbul ignore next */
|
|
10
|
+
/* @__PURE__ */ __name(() => import("./SideNav.lazy.js"), "loadLazy")
|
|
11
|
+
),
|
|
9
12
|
// Sidebar is *always* interactive (toggle button)
|
|
10
|
-
isInteractive:
|
|
13
|
+
isInteractive: (
|
|
14
|
+
/* istanbul ignore next */
|
|
15
|
+
/* @__PURE__ */ __name(() => true, "isInteractive")
|
|
16
|
+
)
|
|
11
17
|
});
|
|
12
18
|
export {
|
|
13
19
|
SideNav
|
|
@@ -35,6 +35,7 @@ function SliderClient(props) {
|
|
|
35
35
|
return [];
|
|
36
36
|
}, [marks, min, max, step]);
|
|
37
37
|
const snapToStep = useCallback(
|
|
38
|
+
/* istanbul ignore next */
|
|
38
39
|
(v) => clamp(step > 0 ? Math.round((v - min) / step) * step + min : v),
|
|
39
40
|
[clamp, step, min]
|
|
40
41
|
);
|
|
@@ -75,9 +76,17 @@ function SliderClient(props) {
|
|
|
75
76
|
const [internalValue, setInternalValue] = useState(initial);
|
|
76
77
|
useEffect(() => {
|
|
77
78
|
if (controlledValue !== void 0) {
|
|
78
|
-
const n = typeof controlledValue === "number" ? controlledValue : typeof controlledValue === "string" ? Number(controlledValue) :
|
|
79
|
+
const n = typeof controlledValue === "number" ? controlledValue : typeof controlledValue === "string" ? Number(controlledValue) : (
|
|
80
|
+
/* istanbul ignore next */
|
|
81
|
+
min
|
|
82
|
+
);
|
|
79
83
|
const q = quantize(n);
|
|
80
|
-
setInternalValue(
|
|
84
|
+
setInternalValue(
|
|
85
|
+
(prev) => prev === q ? prev : (
|
|
86
|
+
/* istanbul ignore next */
|
|
87
|
+
q
|
|
88
|
+
)
|
|
89
|
+
);
|
|
81
90
|
}
|
|
82
91
|
}, [controlledValue, min, quantize]);
|
|
83
92
|
const [isFocused, setIsFocused] = useState(false);
|
|
@@ -5,7 +5,10 @@ import SliderServer from "./Slider.server.js";
|
|
|
5
5
|
const Slider = createIsland({
|
|
6
6
|
name: "Slider",
|
|
7
7
|
Server: SliderServer,
|
|
8
|
-
loadLazy:
|
|
8
|
+
loadLazy: (
|
|
9
|
+
/* istanbul ignore next */
|
|
10
|
+
/* @__PURE__ */ __name(() => import("./Slider.lazy.js"), "loadLazy")
|
|
11
|
+
)
|
|
9
12
|
});
|
|
10
13
|
export {
|
|
11
14
|
Slider
|