@chekinapp/ui 0.0.22 → 0.0.23
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/index.cjs +794 -593
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +83 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +73 -2
- package/dist/index.d.ts +73 -2
- package/dist/index.js +709 -524
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -293,10 +293,26 @@ __export(index_exports, {
|
|
|
293
293
|
toggleVariants: () => toggleVariants,
|
|
294
294
|
uiKitI18nResources: () => uiKitI18nResources,
|
|
295
295
|
uiKitTranslations: () => uiKitTranslations,
|
|
296
|
+
useAbortController: () => useAbortController,
|
|
297
|
+
useClickEscape: () => useClickEscape,
|
|
298
|
+
useCombinedRef: () => useCombinedRef,
|
|
299
|
+
useDebounce: () => useDebounce,
|
|
300
|
+
useEvent: () => useEvent,
|
|
301
|
+
useHover: () => useHover,
|
|
302
|
+
useIsMobile: () => useIsMobile,
|
|
303
|
+
useIsMounted: () => useIsMounted,
|
|
304
|
+
useModalControls: () => useModalControls,
|
|
305
|
+
useOutsideClick: () => useOutsideClick,
|
|
306
|
+
usePrevious: () => usePrevious,
|
|
296
307
|
useRadioOptions: () => useRadioOptions,
|
|
308
|
+
useScreenResize: () => useScreenResize,
|
|
309
|
+
useScrollFrameIntoView: () => useScrollFrameIntoView,
|
|
310
|
+
useScrollToTop: () => useScrollToTop,
|
|
297
311
|
useSidebar: () => useSidebar,
|
|
298
312
|
useSidebarMenuButton: () => useSidebarMenuButton,
|
|
299
313
|
useSidebarSafe: () => useSidebarSafe,
|
|
314
|
+
useTimeout: () => useTimeout,
|
|
315
|
+
useTimer: () => useTimer,
|
|
300
316
|
useUpdateToast: () => useUpdateToast
|
|
301
317
|
});
|
|
302
318
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -414,6 +430,11 @@ AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
|
|
414
430
|
|
|
415
431
|
// src/alert-box/AlertBox.tsx
|
|
416
432
|
var import_lucide_react2 = require("lucide-react");
|
|
433
|
+
|
|
434
|
+
// src/alert-box/AlertBox.module.css
|
|
435
|
+
var AlertBox_default = {};
|
|
436
|
+
|
|
437
|
+
// src/alert-box/AlertBox.tsx
|
|
417
438
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
418
439
|
var AlertType = /* @__PURE__ */ ((AlertType2) => {
|
|
419
440
|
AlertType2["INFO"] = "INFO";
|
|
@@ -441,12 +462,12 @@ var sizeClasses = {
|
|
|
441
462
|
["M" /* M */]: "p-4 text-base font-medium items-start",
|
|
442
463
|
["L" /* L */]: "px-6 py-5 items-start"
|
|
443
464
|
};
|
|
444
|
-
var
|
|
445
|
-
["INFO" /* INFO */]: "
|
|
446
|
-
["WARNING" /* WARNING */]: "
|
|
447
|
-
["ERROR" /* ERROR */]: "
|
|
448
|
-
["
|
|
449
|
-
["
|
|
465
|
+
var typeStyles = {
|
|
466
|
+
["INFO" /* INFO */]: AlertBox_default["alertBox--info"],
|
|
467
|
+
["WARNING" /* WARNING */]: AlertBox_default["alertBox--warning"],
|
|
468
|
+
["ERROR" /* ERROR */]: AlertBox_default["alertBox--error"],
|
|
469
|
+
["SUCCESS" /* SUCCESS */]: AlertBox_default["alertBox--success"],
|
|
470
|
+
["LIGHT" /* LIGHT */]: ""
|
|
450
471
|
};
|
|
451
472
|
function AlertBox({
|
|
452
473
|
text,
|
|
@@ -462,9 +483,10 @@ function AlertBox({
|
|
|
462
483
|
{
|
|
463
484
|
"data-slot": "alert-box",
|
|
464
485
|
className: cn(
|
|
465
|
-
|
|
486
|
+
AlertBox_default.alertBox,
|
|
487
|
+
"flex gap-3 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:shrink-0",
|
|
466
488
|
sizeClasses[size],
|
|
467
|
-
|
|
489
|
+
typeStyles[type],
|
|
468
490
|
className
|
|
469
491
|
),
|
|
470
492
|
children: [
|
|
@@ -481,6 +503,11 @@ var AlertSizes = AlertSize;
|
|
|
481
503
|
// src/audio-player/AudioPlayer.tsx
|
|
482
504
|
var import_react = require("react");
|
|
483
505
|
var import_lucide_react3 = require("lucide-react");
|
|
506
|
+
|
|
507
|
+
// src/audio-player/AudioPlayer.module.css
|
|
508
|
+
var AudioPlayer_default = {};
|
|
509
|
+
|
|
510
|
+
// src/audio-player/AudioPlayer.tsx
|
|
484
511
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
485
512
|
function formatTime(seconds) {
|
|
486
513
|
const mins = Math.floor(seconds / 60);
|
|
@@ -544,16 +571,12 @@ function AudioPlayer({ src, compact, className }) {
|
|
|
544
571
|
{
|
|
545
572
|
type: "button",
|
|
546
573
|
className: cn(
|
|
547
|
-
|
|
574
|
+
AudioPlayer_default.playButton,
|
|
575
|
+
"inline-flex items-center justify-center",
|
|
548
576
|
compact ? "h-6 min-w-6 p-1" : "h-8 min-w-8 p-1.5"
|
|
549
577
|
),
|
|
550
578
|
onClick: togglePlayPause,
|
|
551
|
-
children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.Pause, { className: cn(compact ? "h-2.5 w-2.5" : "h-3 w-3", "
|
|
552
|
-
import_lucide_react3.Play,
|
|
553
|
-
{
|
|
554
|
-
className: cn(compact ? "h-2.5 w-2.5" : "h-3 w-3", "fill-white text-white")
|
|
555
|
-
}
|
|
556
|
-
)
|
|
579
|
+
children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.Pause, { className: cn(compact ? "h-2.5 w-2.5" : "h-3 w-3", "fill-current") }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.Play, { className: cn(compact ? "h-2.5 w-2.5" : "h-3 w-3", "fill-current") })
|
|
557
580
|
}
|
|
558
581
|
),
|
|
559
582
|
!compact && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
@@ -561,18 +584,24 @@ function AudioPlayer({ src, compact, className }) {
|
|
|
561
584
|
"div",
|
|
562
585
|
{
|
|
563
586
|
ref: progressRef,
|
|
564
|
-
className:
|
|
587
|
+
className: cn(
|
|
588
|
+
AudioPlayer_default.track,
|
|
589
|
+
"h-1 flex-1 cursor-pointer overflow-hidden rounded-full"
|
|
590
|
+
),
|
|
565
591
|
onClick: handleSeek,
|
|
566
592
|
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
567
593
|
"div",
|
|
568
594
|
{
|
|
569
|
-
className:
|
|
595
|
+
className: cn(
|
|
596
|
+
AudioPlayer_default.progress,
|
|
597
|
+
"h-full transition-all duration-100 ease-linear"
|
|
598
|
+
),
|
|
570
599
|
style: { width: `${progress}%` }
|
|
571
600
|
}
|
|
572
601
|
)
|
|
573
602
|
}
|
|
574
603
|
),
|
|
575
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-10 text-xs font-medium
|
|
604
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(AudioPlayer_default.time, "min-w-10 text-xs font-medium"), children: isPlaying || currentTime > 0 ? formatTime(currentTime) : formatTime(duration) })
|
|
576
605
|
] })
|
|
577
606
|
] });
|
|
578
607
|
}
|
|
@@ -581,6 +610,11 @@ AudioPlayer.displayName = "AudioPlayer";
|
|
|
581
610
|
// src/avatar/Avatar.tsx
|
|
582
611
|
var React2 = __toESM(require("react"), 1);
|
|
583
612
|
var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
|
|
613
|
+
|
|
614
|
+
// src/avatar/Avatar.module.css
|
|
615
|
+
var Avatar_default = {};
|
|
616
|
+
|
|
617
|
+
// src/avatar/Avatar.tsx
|
|
584
618
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
585
619
|
var sizeClasses2 = {
|
|
586
620
|
sm: "h-8 w-8",
|
|
@@ -611,8 +645,9 @@ var Avatar = React2.forwardRef(({ className, src, alt, fallback, size = "md", fa
|
|
|
611
645
|
AvatarPrimitive.Fallback,
|
|
612
646
|
{
|
|
613
647
|
className: cn(
|
|
614
|
-
"flex h-full w-full items-center justify-center rounded-full font-medium
|
|
615
|
-
fallbackClassName
|
|
648
|
+
"flex h-full w-full items-center justify-center rounded-full font-medium",
|
|
649
|
+
!fallbackClassName && Avatar_default.fallback,
|
|
650
|
+
fallbackClassName
|
|
616
651
|
),
|
|
617
652
|
children: fallback
|
|
618
653
|
}
|
|
@@ -664,6 +699,11 @@ Badge.displayName = "Badge";
|
|
|
664
699
|
|
|
665
700
|
// src/beta-badge/BetaBadge.tsx
|
|
666
701
|
var import_react_i18next = require("react-i18next");
|
|
702
|
+
|
|
703
|
+
// src/beta-badge/BetaBadge.module.css
|
|
704
|
+
var BetaBadge_default = {};
|
|
705
|
+
|
|
706
|
+
// src/beta-badge/BetaBadge.tsx
|
|
667
707
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
668
708
|
function BetaBadge({
|
|
669
709
|
className,
|
|
@@ -678,8 +718,9 @@ function BetaBadge({
|
|
|
678
718
|
{
|
|
679
719
|
"data-slot": "beta-badge",
|
|
680
720
|
className: cn(
|
|
721
|
+
BetaBadge_default.betaBadge,
|
|
681
722
|
"rounded-sm px-2 py-1 text-sm/4 font-semibold uppercase",
|
|
682
|
-
readOnly
|
|
723
|
+
readOnly && BetaBadge_default["betaBadge--readonly"],
|
|
683
724
|
className
|
|
684
725
|
),
|
|
685
726
|
...props,
|
|
@@ -770,6 +811,11 @@ BookmarkTabsTrigger.displayName = "BookmarkTabsTrigger";
|
|
|
770
811
|
// src/box-option-selector/BoxOptionSelector.tsx
|
|
771
812
|
var import_react2 = require("react");
|
|
772
813
|
var import_react_i18next2 = require("react-i18next");
|
|
814
|
+
|
|
815
|
+
// src/box-option-selector/BoxOptionSelector.module.css
|
|
816
|
+
var BoxOptionSelector_default = {};
|
|
817
|
+
|
|
818
|
+
// src/box-option-selector/BoxOptionSelector.tsx
|
|
773
819
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
774
820
|
var BoxOptionSelector = (0, import_react2.forwardRef)(
|
|
775
821
|
({
|
|
@@ -805,8 +851,9 @@ var BoxOptionSelector = (0, import_react2.forwardRef)(
|
|
|
805
851
|
ref,
|
|
806
852
|
"data-slot": "box-option-selector",
|
|
807
853
|
className: cn(
|
|
854
|
+
BoxOptionSelector_default.boxOption,
|
|
808
855
|
"flex min-h-[116px] w-full max-w-[400px] cursor-pointer flex-col gap-4 rounded-lg border p-4 transition-all duration-200",
|
|
809
|
-
isSelected
|
|
856
|
+
isSelected && BoxOptionSelector_default["boxOption--selected"],
|
|
810
857
|
disabled && "cursor-not-allowed opacity-50"
|
|
811
858
|
),
|
|
812
859
|
onClick: handleClick,
|
|
@@ -867,8 +914,8 @@ function Breadcrumb({
|
|
|
867
914
|
}
|
|
868
915
|
const isLink = Boolean(to && !current);
|
|
869
916
|
const contentClassName = cn(
|
|
870
|
-
"flex items-center gap-2.5 text-sm font-medium text-
|
|
871
|
-
current && "font-bold text-
|
|
917
|
+
"flex items-center gap-2.5 text-sm font-medium text-[var(--breadcrumbs-link-color)]",
|
|
918
|
+
current && "font-bold text-[var(--breadcrumbs-current-color)]",
|
|
872
919
|
isLink && "transition-opacity hover:opacity-80",
|
|
873
920
|
className
|
|
874
921
|
);
|
|
@@ -908,7 +955,7 @@ function Breadcrumbs({ className, children }) {
|
|
|
908
955
|
import_lucide_react4.ChevronRight,
|
|
909
956
|
{
|
|
910
957
|
"aria-hidden": "true",
|
|
911
|
-
className: "shrink-0 text-
|
|
958
|
+
className: "shrink-0 text-[var(--breadcrumbs-separator-color)]",
|
|
912
959
|
size: 16
|
|
913
960
|
}
|
|
914
961
|
) : null,
|
|
@@ -1214,7 +1261,7 @@ function ButtonGroupText({
|
|
|
1214
1261
|
{
|
|
1215
1262
|
"data-slot": "button-group-text",
|
|
1216
1263
|
className: cn(
|
|
1217
|
-
"flex items-center gap-2 rounded-lg border bg-
|
|
1264
|
+
"flex items-center gap-2 rounded-lg border border-[var(--button-group-text-border)] bg-[var(--button-group-text-bg)] px-2.5 text-sm font-medium text-[var(--button-group-text-color)]",
|
|
1218
1265
|
"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
|
|
1219
1266
|
className
|
|
1220
1267
|
),
|
|
@@ -1228,7 +1275,7 @@ ButtonGroupText.displayName = "ButtonGroupText";
|
|
|
1228
1275
|
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1229
1276
|
function ButtonsGroupLabel({ children, label, className }) {
|
|
1230
1277
|
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { "data-slot": "buttons-group-label", className: cn(className), children: [
|
|
1231
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-2 text-xs font-medium text-
|
|
1278
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-2 text-xs font-medium text-[var(--buttons-group-label-color)]", children: label }),
|
|
1232
1279
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children })
|
|
1233
1280
|
] });
|
|
1234
1281
|
}
|
|
@@ -1424,6 +1471,15 @@ var getDocument = () => {
|
|
|
1424
1471
|
function getCustomContainer() {
|
|
1425
1472
|
return getDocument()?.body;
|
|
1426
1473
|
}
|
|
1474
|
+
function scrollToTop(value = 0, behavior) {
|
|
1475
|
+
window.scrollTo({
|
|
1476
|
+
top: value,
|
|
1477
|
+
behavior
|
|
1478
|
+
});
|
|
1479
|
+
}
|
|
1480
|
+
function isObject(value) {
|
|
1481
|
+
return value !== null && typeof value === "object";
|
|
1482
|
+
}
|
|
1427
1483
|
var isNumeric = (n) => n !== "" && !isNaN(n);
|
|
1428
1484
|
function toCssSize(size) {
|
|
1429
1485
|
if (!size) {
|
|
@@ -2280,15 +2336,60 @@ function DataTable({ columns, data }) {
|
|
|
2280
2336
|
}
|
|
2281
2337
|
|
|
2282
2338
|
// src/dialog/Dialog.tsx
|
|
2283
|
-
var
|
|
2339
|
+
var React11 = __toESM(require("react"), 1);
|
|
2284
2340
|
var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
2285
2341
|
var import_react_visually_hidden = require("@radix-ui/react-visually-hidden");
|
|
2286
2342
|
var import_lucide_react10 = require("lucide-react");
|
|
2287
2343
|
|
|
2288
|
-
// src/
|
|
2344
|
+
// src/hooks/use-scroll-to-top.ts
|
|
2289
2345
|
var import_react8 = require("react");
|
|
2346
|
+
function useScrollToTop() {
|
|
2347
|
+
(0, import_react8.useEffect)(() => {
|
|
2348
|
+
scrollToTop();
|
|
2349
|
+
}, []);
|
|
2350
|
+
}
|
|
2351
|
+
|
|
2352
|
+
// src/hooks/use-abort-controller.ts
|
|
2353
|
+
var import_react9 = __toESM(require("react"), 1);
|
|
2354
|
+
function useAbortController() {
|
|
2355
|
+
const [abortController, setAbortController] = import_react9.default.useState(() => {
|
|
2356
|
+
return new AbortController();
|
|
2357
|
+
});
|
|
2358
|
+
const setupAbortController = import_react9.default.useCallback(() => {
|
|
2359
|
+
const abortController2 = new AbortController();
|
|
2360
|
+
setAbortController(abortController2);
|
|
2361
|
+
return abortController2.signal;
|
|
2362
|
+
}, []);
|
|
2363
|
+
return {
|
|
2364
|
+
abortController,
|
|
2365
|
+
setupAbortController
|
|
2366
|
+
};
|
|
2367
|
+
}
|
|
2368
|
+
|
|
2369
|
+
// src/hooks/use-click-escape.ts
|
|
2370
|
+
var import_react10 = require("react");
|
|
2371
|
+
function useClickEscape({ enabled = true, onClick }) {
|
|
2372
|
+
const onClickRef = (0, import_react10.useRef)(onClick);
|
|
2373
|
+
(0, import_react10.useEffect)(() => {
|
|
2374
|
+
onClickRef.current = onClick;
|
|
2375
|
+
}, [onClick]);
|
|
2376
|
+
(0, import_react10.useEffect)(() => {
|
|
2377
|
+
const handleKeyDown = (event) => {
|
|
2378
|
+
if (event.key === "Escape" && enabled) {
|
|
2379
|
+
onClickRef.current?.();
|
|
2380
|
+
}
|
|
2381
|
+
};
|
|
2382
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
2383
|
+
return () => {
|
|
2384
|
+
window.removeEventListener("keydown", handleKeyDown);
|
|
2385
|
+
};
|
|
2386
|
+
}, [enabled]);
|
|
2387
|
+
}
|
|
2388
|
+
|
|
2389
|
+
// src/hooks/use-combined-ref.ts
|
|
2390
|
+
var import_react11 = require("react");
|
|
2290
2391
|
function useCombinedRef(...refs) {
|
|
2291
|
-
return (0,
|
|
2392
|
+
return (0, import_react11.useCallback)(
|
|
2292
2393
|
(node) => {
|
|
2293
2394
|
refs.forEach((ref) => {
|
|
2294
2395
|
if (!ref) return;
|
|
@@ -2304,10 +2405,298 @@ function useCombinedRef(...refs) {
|
|
|
2304
2405
|
);
|
|
2305
2406
|
}
|
|
2306
2407
|
|
|
2408
|
+
// src/hooks/use-event.ts
|
|
2409
|
+
var import_react12 = require("react");
|
|
2410
|
+
function useEvent(fn) {
|
|
2411
|
+
const fnRef = (0, import_react12.useRef)(fn);
|
|
2412
|
+
(0, import_react12.useLayoutEffect)(() => {
|
|
2413
|
+
fnRef.current = fn;
|
|
2414
|
+
}, [fn]);
|
|
2415
|
+
const eventCb = (0, import_react12.useCallback)(
|
|
2416
|
+
(...args) => {
|
|
2417
|
+
return fnRef.current?.apply(null, args);
|
|
2418
|
+
},
|
|
2419
|
+
[fnRef]
|
|
2420
|
+
);
|
|
2421
|
+
return eventCb;
|
|
2422
|
+
}
|
|
2423
|
+
|
|
2424
|
+
// src/hooks/use-is-mobile.ts
|
|
2425
|
+
var import_react13 = require("react");
|
|
2426
|
+
var MOBILE_BREAKPOINT = 768;
|
|
2427
|
+
function useIsMobile({ breakpoint = MOBILE_BREAKPOINT } = {}) {
|
|
2428
|
+
const [isMobile, setIsMobile] = (0, import_react13.useState)(void 0);
|
|
2429
|
+
(0, import_react13.useEffect)(() => {
|
|
2430
|
+
const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
|
|
2431
|
+
const onChange = () => {
|
|
2432
|
+
setIsMobile(window.innerWidth < breakpoint);
|
|
2433
|
+
};
|
|
2434
|
+
mediaQuery.addEventListener("change", onChange);
|
|
2435
|
+
setIsMobile(window.innerWidth < breakpoint);
|
|
2436
|
+
return () => {
|
|
2437
|
+
mediaQuery.removeEventListener("change", onChange);
|
|
2438
|
+
};
|
|
2439
|
+
}, [breakpoint]);
|
|
2440
|
+
return !!isMobile;
|
|
2441
|
+
}
|
|
2442
|
+
|
|
2443
|
+
// src/hooks/use-is-mounted.ts
|
|
2444
|
+
var import_react14 = require("react");
|
|
2445
|
+
function useIsMounted() {
|
|
2446
|
+
const isMounted = (0, import_react14.useRef)(false);
|
|
2447
|
+
(0, import_react14.useEffect)(() => {
|
|
2448
|
+
isMounted.current = true;
|
|
2449
|
+
return () => {
|
|
2450
|
+
isMounted.current = false;
|
|
2451
|
+
};
|
|
2452
|
+
}, []);
|
|
2453
|
+
return isMounted;
|
|
2454
|
+
}
|
|
2455
|
+
|
|
2456
|
+
// src/hooks/use-modal-controls.ts
|
|
2457
|
+
var import_react15 = require("react");
|
|
2458
|
+
function useModalControls(initState = false, { disabled } = {}) {
|
|
2459
|
+
const [isOpen, setIsOpen] = (0, import_react15.useState)(initState);
|
|
2460
|
+
const openModal = (0, import_react15.useCallback)(() => {
|
|
2461
|
+
if (disabled) return;
|
|
2462
|
+
setIsOpen(true);
|
|
2463
|
+
}, [disabled]);
|
|
2464
|
+
const closeModal = (0, import_react15.useCallback)(() => {
|
|
2465
|
+
if (disabled) return;
|
|
2466
|
+
setIsOpen(false);
|
|
2467
|
+
}, [disabled]);
|
|
2468
|
+
const toggleModal = (0, import_react15.useCallback)(() => {
|
|
2469
|
+
if (disabled) return;
|
|
2470
|
+
setIsOpen((value) => !value);
|
|
2471
|
+
}, [disabled]);
|
|
2472
|
+
return {
|
|
2473
|
+
isOpen,
|
|
2474
|
+
openModal,
|
|
2475
|
+
closeModal,
|
|
2476
|
+
toggleModal,
|
|
2477
|
+
setIsOpen
|
|
2478
|
+
};
|
|
2479
|
+
}
|
|
2480
|
+
|
|
2481
|
+
// src/hooks/use-outside-click.ts
|
|
2482
|
+
var import_react16 = require("react");
|
|
2483
|
+
function useOutsideClick(elementRef, onOutsideClick, nested) {
|
|
2484
|
+
const handleOutsideClick = (0, import_react16.useRef)(onOutsideClick);
|
|
2485
|
+
handleOutsideClick.current = onOutsideClick;
|
|
2486
|
+
const checkNestedElements = (0, import_react16.useCallback)(
|
|
2487
|
+
(event) => {
|
|
2488
|
+
const checkIsElementClickedBySelector = (selector) => {
|
|
2489
|
+
const nestedElement = getDocument().querySelector(selector);
|
|
2490
|
+
return nestedElement?.contains(event.target);
|
|
2491
|
+
};
|
|
2492
|
+
const checkDataAttribute = () => {
|
|
2493
|
+
const target = event.target;
|
|
2494
|
+
if (!target || !(target instanceof HTMLElement)) {
|
|
2495
|
+
return false;
|
|
2496
|
+
}
|
|
2497
|
+
let current = target;
|
|
2498
|
+
while (current) {
|
|
2499
|
+
if (current.hasAttribute("data-exclude-from-outside-click")) {
|
|
2500
|
+
return true;
|
|
2501
|
+
}
|
|
2502
|
+
current = current.parentElement;
|
|
2503
|
+
}
|
|
2504
|
+
return false;
|
|
2505
|
+
};
|
|
2506
|
+
if (nested) {
|
|
2507
|
+
if (typeof nested === "string") {
|
|
2508
|
+
if (checkIsElementClickedBySelector(nested)) return true;
|
|
2509
|
+
} else {
|
|
2510
|
+
if (nested.some(checkIsElementClickedBySelector)) return true;
|
|
2511
|
+
}
|
|
2512
|
+
}
|
|
2513
|
+
return checkDataAttribute();
|
|
2514
|
+
},
|
|
2515
|
+
[nested]
|
|
2516
|
+
);
|
|
2517
|
+
(0, import_react16.useEffect)(() => {
|
|
2518
|
+
function handleClickOutside(event) {
|
|
2519
|
+
const isNestedElement = checkNestedElements(event);
|
|
2520
|
+
if (elementRef?.current && !elementRef.current.contains(event.target) && !isNestedElement) {
|
|
2521
|
+
handleOutsideClick.current?.(event);
|
|
2522
|
+
}
|
|
2523
|
+
}
|
|
2524
|
+
getDocument().addEventListener("mousedown", handleClickOutside, true);
|
|
2525
|
+
getDocument().addEventListener("touchstart", handleClickOutside, true);
|
|
2526
|
+
return () => {
|
|
2527
|
+
getDocument().removeEventListener("mousedown", handleClickOutside, true);
|
|
2528
|
+
getDocument().removeEventListener("touchstart", handleClickOutside, true);
|
|
2529
|
+
};
|
|
2530
|
+
}, [checkNestedElements, elementRef]);
|
|
2531
|
+
}
|
|
2532
|
+
|
|
2533
|
+
// src/hooks/use-screen-resize.ts
|
|
2534
|
+
var import_react17 = require("react");
|
|
2535
|
+
var eventName = "resize";
|
|
2536
|
+
function useScreenResize(maxWidth) {
|
|
2537
|
+
const [isInitialized, setIsInitialized] = (0, import_react17.useState)(false);
|
|
2538
|
+
const [isMatch, setIsMatch] = (0, import_react17.useState)(false);
|
|
2539
|
+
const handleResizeEvent = (0, import_react17.useCallback)(() => {
|
|
2540
|
+
const adjustedMaxWidth = `${parseInt(maxWidth, 10) - 1}px`;
|
|
2541
|
+
const media = getWindow().matchMedia(`(max-width: ${adjustedMaxWidth})`);
|
|
2542
|
+
setIsInitialized(true);
|
|
2543
|
+
setIsMatch(media?.matches);
|
|
2544
|
+
}, [maxWidth]);
|
|
2545
|
+
(0, import_react17.useLayoutEffect)(() => {
|
|
2546
|
+
handleResizeEvent();
|
|
2547
|
+
getWindow().addEventListener(eventName, handleResizeEvent);
|
|
2548
|
+
return () => {
|
|
2549
|
+
getWindow().removeEventListener(eventName, handleResizeEvent);
|
|
2550
|
+
};
|
|
2551
|
+
}, [handleResizeEvent]);
|
|
2552
|
+
return { isMatch, isInitialized };
|
|
2553
|
+
}
|
|
2554
|
+
|
|
2555
|
+
// src/hooks/use-scroll-frame-into-view.ts
|
|
2556
|
+
var import_react18 = require("react");
|
|
2557
|
+
|
|
2558
|
+
// src/lib/runtimeSettings.ts
|
|
2559
|
+
function getChekinRuntimeSettings() {
|
|
2560
|
+
return window.ChekinProSettings || window.ChekinHousingsSDKSettings || {};
|
|
2561
|
+
}
|
|
2562
|
+
function isMobileModalModeAvailable() {
|
|
2563
|
+
const settings = getChekinRuntimeSettings();
|
|
2564
|
+
return !settings.autoHeight;
|
|
2565
|
+
}
|
|
2566
|
+
|
|
2567
|
+
// src/hooks/use-scroll-frame-into-view.ts
|
|
2568
|
+
function useScrollFrameIntoView(active, options = {}) {
|
|
2569
|
+
const { behavior = "smooth", elementRef } = options;
|
|
2570
|
+
(0, import_react18.useEffect)(() => {
|
|
2571
|
+
const sdkWindow = window;
|
|
2572
|
+
if (!active || !getChekinRuntimeSettings()?.autoHeight) {
|
|
2573
|
+
return;
|
|
2574
|
+
}
|
|
2575
|
+
const frame = sdkWindow.chekinCustomFrame;
|
|
2576
|
+
if (!frame) {
|
|
2577
|
+
return;
|
|
2578
|
+
}
|
|
2579
|
+
const parentWindow = window.parent;
|
|
2580
|
+
const scrollToElement = () => {
|
|
2581
|
+
const frameRect = frame.getBoundingClientRect();
|
|
2582
|
+
if (elementRef?.current) {
|
|
2583
|
+
const elementRect = elementRef.current.getBoundingClientRect();
|
|
2584
|
+
const elementCenterInFrame = elementRect.top + elementRect.height / 2;
|
|
2585
|
+
const elementCenterInParent = frameRect.top + elementCenterInFrame;
|
|
2586
|
+
const targetScroll = parentWindow.scrollY + elementCenterInParent - parentWindow.innerHeight / 2;
|
|
2587
|
+
parentWindow.scrollTo({
|
|
2588
|
+
top: Math.max(0, targetScroll),
|
|
2589
|
+
behavior
|
|
2590
|
+
});
|
|
2591
|
+
return;
|
|
2592
|
+
}
|
|
2593
|
+
frame.scrollIntoView({ behavior, block: "start" });
|
|
2594
|
+
};
|
|
2595
|
+
requestAnimationFrame(() => {
|
|
2596
|
+
requestAnimationFrame(scrollToElement);
|
|
2597
|
+
});
|
|
2598
|
+
}, [active, behavior, elementRef]);
|
|
2599
|
+
}
|
|
2600
|
+
|
|
2601
|
+
// src/hooks/use-debounce.ts
|
|
2602
|
+
var import_react19 = require("react");
|
|
2603
|
+
function useDebounce(value, delayMs = 1e3, handleChange) {
|
|
2604
|
+
const onChange = useEvent(handleChange);
|
|
2605
|
+
const [debouncedValue, setDebouncedValue] = (0, import_react19.useState)(value);
|
|
2606
|
+
(0, import_react19.useEffect)(() => {
|
|
2607
|
+
const handler = setTimeout(() => {
|
|
2608
|
+
setDebouncedValue(value);
|
|
2609
|
+
}, delayMs);
|
|
2610
|
+
return () => {
|
|
2611
|
+
clearTimeout(handler);
|
|
2612
|
+
};
|
|
2613
|
+
}, [value, delayMs]);
|
|
2614
|
+
(0, import_react19.useEffect)(() => {
|
|
2615
|
+
onChange?.(debouncedValue);
|
|
2616
|
+
}, [debouncedValue, onChange]);
|
|
2617
|
+
return [debouncedValue, setDebouncedValue];
|
|
2618
|
+
}
|
|
2619
|
+
|
|
2620
|
+
// src/hooks/use-previous.ts
|
|
2621
|
+
var import_react20 = require("react");
|
|
2622
|
+
function usePrevious(value, defaultValue) {
|
|
2623
|
+
const ref = (0, import_react20.useRef)(defaultValue);
|
|
2624
|
+
(0, import_react20.useEffect)(() => {
|
|
2625
|
+
ref.current = isObject(value) ? { ...value } : value;
|
|
2626
|
+
}, [value]);
|
|
2627
|
+
return ref.current;
|
|
2628
|
+
}
|
|
2629
|
+
|
|
2630
|
+
// src/hooks/use-timer.ts
|
|
2631
|
+
var import_react21 = require("react");
|
|
2632
|
+
var useTimer = ({ seconds }) => {
|
|
2633
|
+
const [timeLeft, setTimeLeft] = (0, import_react21.useState)(seconds);
|
|
2634
|
+
const [isTimerRunning, setIsTimerRunning] = (0, import_react21.useState)(true);
|
|
2635
|
+
(0, import_react21.useEffect)(() => {
|
|
2636
|
+
if (!isTimerRunning) return;
|
|
2637
|
+
const timer = setInterval(() => {
|
|
2638
|
+
setTimeLeft((prev) => {
|
|
2639
|
+
if (prev <= 1) {
|
|
2640
|
+
clearInterval(timer);
|
|
2641
|
+
setIsTimerRunning(false);
|
|
2642
|
+
return 0;
|
|
2643
|
+
}
|
|
2644
|
+
return prev - 1;
|
|
2645
|
+
});
|
|
2646
|
+
}, 1e3);
|
|
2647
|
+
return () => clearInterval(timer);
|
|
2648
|
+
}, [isTimerRunning]);
|
|
2649
|
+
const resetTimer = () => {
|
|
2650
|
+
setTimeLeft(seconds);
|
|
2651
|
+
setIsTimerRunning(true);
|
|
2652
|
+
};
|
|
2653
|
+
return {
|
|
2654
|
+
timeLeft,
|
|
2655
|
+
isTimerRunning,
|
|
2656
|
+
resetTimer
|
|
2657
|
+
};
|
|
2658
|
+
};
|
|
2659
|
+
|
|
2660
|
+
// src/hooks/use-timeout.ts
|
|
2661
|
+
var import_react22 = require("react");
|
|
2662
|
+
function useTimeout() {
|
|
2663
|
+
const timeoutRef = (0, import_react22.useRef)();
|
|
2664
|
+
const clearTimeoutRef = (0, import_react22.useCallback)(() => {
|
|
2665
|
+
clearTimeout(timeoutRef.current);
|
|
2666
|
+
timeoutRef.current = void 0;
|
|
2667
|
+
}, []);
|
|
2668
|
+
const scheduleTimeout = (0, import_react22.useCallback)(
|
|
2669
|
+
(callback, delay) => {
|
|
2670
|
+
clearTimeoutRef();
|
|
2671
|
+
timeoutRef.current = setTimeout(callback, delay);
|
|
2672
|
+
},
|
|
2673
|
+
[clearTimeoutRef]
|
|
2674
|
+
);
|
|
2675
|
+
(0, import_react22.useEffect)(() => clearTimeoutRef, [clearTimeoutRef]);
|
|
2676
|
+
return { scheduleTimeout, clearTimeoutRef };
|
|
2677
|
+
}
|
|
2678
|
+
|
|
2679
|
+
// src/hooks/use-hover.ts
|
|
2680
|
+
var import_react23 = require("react");
|
|
2681
|
+
function useHover() {
|
|
2682
|
+
const [isHovering, setIsHovering] = (0, import_react23.useState)(false);
|
|
2683
|
+
const handleMouseEnter = (0, import_react23.useCallback)(() => {
|
|
2684
|
+
setIsHovering(true);
|
|
2685
|
+
}, []);
|
|
2686
|
+
const handleMouseLeave = (0, import_react23.useCallback)(() => {
|
|
2687
|
+
setIsHovering(false);
|
|
2688
|
+
}, []);
|
|
2689
|
+
return {
|
|
2690
|
+
isHovering,
|
|
2691
|
+
handleMouseEnter,
|
|
2692
|
+
handleMouseLeave
|
|
2693
|
+
};
|
|
2694
|
+
}
|
|
2695
|
+
|
|
2307
2696
|
// src/dialog/Dialog.tsx
|
|
2308
2697
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2309
2698
|
function useIframeTitleFix(titleRef) {
|
|
2310
|
-
|
|
2699
|
+
React11.useEffect(() => {
|
|
2311
2700
|
if (!window.chekinCustomDocument) {
|
|
2312
2701
|
return;
|
|
2313
2702
|
}
|
|
@@ -2336,7 +2725,7 @@ function DialogClose({ ...props }) {
|
|
|
2336
2725
|
}
|
|
2337
2726
|
var dialogOverlayClasses = "fixed inset-0 z-50 bg-[var(--dialog-overlay-bg)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
|
|
2338
2727
|
var scrollableOverlayClasses = "fixed inset-0 z-50 flex flex-col items-center overflow-y-auto overscroll-none pb-[19px] pt-[20px]";
|
|
2339
|
-
var DialogOverlay =
|
|
2728
|
+
var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2340
2729
|
DialogPrimitive.Overlay,
|
|
2341
2730
|
{
|
|
2342
2731
|
ref,
|
|
@@ -2348,7 +2737,7 @@ var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
2348
2737
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
2349
2738
|
var dialogContentClasses = "relative z-50 my-auto w-full max-w-[calc(100%-2rem)] rounded-[var(--dialog-content-radius)] border border-[var(--dialog-content-border)] bg-[var(--dialog-content-bg)] p-6 text-[var(--dialog-content-text)] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-2xl";
|
|
2350
2739
|
var dialogCloseButtonClasses = "absolute right-4 top-4 rounded-[var(--dialog-close-radius)] opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:shadow-chekin-focus disabled:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
|
|
2351
|
-
var DialogContent =
|
|
2740
|
+
var DialogContent = React11.forwardRef(
|
|
2352
2741
|
({ className, showCloseButton = true, children, container, lockScroll = true, ...props }, ref) => {
|
|
2353
2742
|
const contentElement = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
2354
2743
|
DialogPrimitive.Content,
|
|
@@ -2396,8 +2785,8 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
|
|
|
2396
2785
|
}
|
|
2397
2786
|
);
|
|
2398
2787
|
DialogFooter.displayName = "DialogFooter";
|
|
2399
|
-
var DialogTitle =
|
|
2400
|
-
const titleRef =
|
|
2788
|
+
var DialogTitle = React11.forwardRef(({ className, ...props }, ref) => {
|
|
2789
|
+
const titleRef = React11.useRef(null);
|
|
2401
2790
|
const combinedRef = useCombinedRef(titleRef, ref);
|
|
2402
2791
|
useIframeTitleFix(titleRef);
|
|
2403
2792
|
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
@@ -2411,7 +2800,7 @@ var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => {
|
|
|
2411
2800
|
);
|
|
2412
2801
|
});
|
|
2413
2802
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
2414
|
-
var DialogDescription =
|
|
2803
|
+
var DialogDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2415
2804
|
DialogPrimitive.Description,
|
|
2416
2805
|
{
|
|
2417
2806
|
ref,
|
|
@@ -2473,9 +2862,9 @@ function ConfirmationDialog({
|
|
|
2473
2862
|
}
|
|
2474
2863
|
|
|
2475
2864
|
// src/default-select-trigger/DefaultSelectTrigger.tsx
|
|
2476
|
-
var
|
|
2865
|
+
var React12 = __toESM(require("react"), 1);
|
|
2477
2866
|
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2478
|
-
var DefaultSelectTrigger =
|
|
2867
|
+
var DefaultSelectTrigger = React12.forwardRef(
|
|
2479
2868
|
({
|
|
2480
2869
|
className,
|
|
2481
2870
|
disabled,
|
|
@@ -2539,17 +2928,17 @@ function DownloadEntryFormsButton({
|
|
|
2539
2928
|
}
|
|
2540
2929
|
|
|
2541
2930
|
// src/dropdown-button/DropdownButton.tsx
|
|
2542
|
-
var
|
|
2931
|
+
var import_react24 = require("react");
|
|
2543
2932
|
|
|
2544
2933
|
// src/dropdown-menu/DropdownMenu.tsx
|
|
2545
|
-
var
|
|
2934
|
+
var React13 = __toESM(require("react"), 1);
|
|
2546
2935
|
var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
|
|
2547
2936
|
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2548
2937
|
var DropdownMenu = RadixMenu.Root;
|
|
2549
2938
|
var DropdownMenuTrigger = RadixMenu.Trigger;
|
|
2550
2939
|
var DropdownMenuPortal = RadixMenu.Portal;
|
|
2551
2940
|
var DropdownMenuGroup = RadixMenu.Group;
|
|
2552
|
-
var DropdownMenuContent =
|
|
2941
|
+
var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 6, container, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Portal, { container: container || getCustomContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2553
2942
|
RadixMenu.Content,
|
|
2554
2943
|
{
|
|
2555
2944
|
ref,
|
|
@@ -2570,9 +2959,9 @@ var itemClasses = [
|
|
|
2570
2959
|
"data-[highlighted]:bg-chekin-surface-pressed data-[highlighted]:text-chekin-blue",
|
|
2571
2960
|
"data-[disabled]:pointer-events-none data-[disabled]:opacity-30"
|
|
2572
2961
|
];
|
|
2573
|
-
var DropdownMenuItem =
|
|
2962
|
+
var DropdownMenuItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Item, { ref, className: cn(itemClasses, className), ...props }));
|
|
2574
2963
|
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
2575
|
-
var DropdownMenuLabel =
|
|
2964
|
+
var DropdownMenuLabel = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2576
2965
|
RadixMenu.Label,
|
|
2577
2966
|
{
|
|
2578
2967
|
ref,
|
|
@@ -2584,7 +2973,7 @@ var DropdownMenuLabel = React12.forwardRef(({ className, ...props }, ref) => /*
|
|
|
2584
2973
|
}
|
|
2585
2974
|
));
|
|
2586
2975
|
DropdownMenuLabel.displayName = "DropdownMenuLabel";
|
|
2587
|
-
var DropdownMenuSeparator =
|
|
2976
|
+
var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2588
2977
|
RadixMenu.Separator,
|
|
2589
2978
|
{
|
|
2590
2979
|
ref,
|
|
@@ -2603,7 +2992,7 @@ function DropdownButton({
|
|
|
2603
2992
|
modal,
|
|
2604
2993
|
className
|
|
2605
2994
|
}) {
|
|
2606
|
-
const [isOpen, setIsOpen] = (0,
|
|
2995
|
+
const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
|
|
2607
2996
|
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(DropdownMenu, { onOpenChange: setIsOpen, modal, children: [
|
|
2608
2997
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenuTrigger, { asChild: true, children: typeof trigger === "function" ? trigger(isOpen) : trigger }),
|
|
2609
2998
|
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
@@ -2730,7 +3119,7 @@ var import_lucide_react12 = require("lucide-react");
|
|
|
2730
3119
|
var import_react_i18next7 = require("react-i18next");
|
|
2731
3120
|
|
|
2732
3121
|
// src/halo-icon/HaloIcon.tsx
|
|
2733
|
-
var
|
|
3122
|
+
var import_react25 = require("react");
|
|
2734
3123
|
|
|
2735
3124
|
// src/halo-icon/constants.ts
|
|
2736
3125
|
var HALO_ICON_STATUS = {
|
|
@@ -2760,7 +3149,7 @@ var statusStyles = {
|
|
|
2760
3149
|
color: "text-chekin-red"
|
|
2761
3150
|
}
|
|
2762
3151
|
};
|
|
2763
|
-
var HaloIcon = (0,
|
|
3152
|
+
var HaloIcon = (0, import_react25.forwardRef)(
|
|
2764
3153
|
({
|
|
2765
3154
|
children,
|
|
2766
3155
|
variant = "default",
|
|
@@ -2816,9 +3205,9 @@ function EmptySectionPlaceholder({
|
|
|
2816
3205
|
}
|
|
2817
3206
|
|
|
2818
3207
|
// src/external-link/ExternalLink.tsx
|
|
2819
|
-
var
|
|
3208
|
+
var React14 = __toESM(require("react"), 1);
|
|
2820
3209
|
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2821
|
-
var ExternalLink =
|
|
3210
|
+
var ExternalLink = React14.forwardRef(
|
|
2822
3211
|
({ className, children, showIcon = true, target = "_blank", rel, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
2823
3212
|
"a",
|
|
2824
3213
|
{
|
|
@@ -2863,33 +3252,8 @@ ExternalLink.displayName = "ExternalLink";
|
|
|
2863
3252
|
var import_react_i18next9 = require("react-i18next");
|
|
2864
3253
|
var import_lucide_react14 = require("lucide-react");
|
|
2865
3254
|
|
|
2866
|
-
// src/lib/use-modal-controls.ts
|
|
2867
|
-
var import_react11 = require("react");
|
|
2868
|
-
function useModalControls(initState = false, { disabled } = {}) {
|
|
2869
|
-
const [isOpen, setIsOpen] = (0, import_react11.useState)(initState);
|
|
2870
|
-
const openModal = (0, import_react11.useCallback)(() => {
|
|
2871
|
-
if (disabled) return;
|
|
2872
|
-
setIsOpen(true);
|
|
2873
|
-
}, [disabled]);
|
|
2874
|
-
const closeModal = (0, import_react11.useCallback)(() => {
|
|
2875
|
-
if (disabled) return;
|
|
2876
|
-
setIsOpen(false);
|
|
2877
|
-
}, [disabled]);
|
|
2878
|
-
const toggleModal = (0, import_react11.useCallback)(() => {
|
|
2879
|
-
if (disabled) return;
|
|
2880
|
-
setIsOpen((value) => !value);
|
|
2881
|
-
}, [disabled]);
|
|
2882
|
-
return {
|
|
2883
|
-
isOpen,
|
|
2884
|
-
openModal,
|
|
2885
|
-
closeModal,
|
|
2886
|
-
toggleModal,
|
|
2887
|
-
setIsOpen
|
|
2888
|
-
};
|
|
2889
|
-
}
|
|
2890
|
-
|
|
2891
3255
|
// src/switch/Switch.tsx
|
|
2892
|
-
var
|
|
3256
|
+
var React15 = __toESM(require("react"), 1);
|
|
2893
3257
|
var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
|
|
2894
3258
|
var import_class_variance_authority7 = require("class-variance-authority");
|
|
2895
3259
|
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
@@ -2931,9 +3295,9 @@ var switchThumbVariants = (0, import_class_variance_authority7.cva)(
|
|
|
2931
3295
|
}
|
|
2932
3296
|
}
|
|
2933
3297
|
);
|
|
2934
|
-
var Switch =
|
|
3298
|
+
var Switch = React15.forwardRef(
|
|
2935
3299
|
({ className, size, readOnly, loading, onChange, value, id, label, error, ...props }, ref) => {
|
|
2936
|
-
const generatedId =
|
|
3300
|
+
const generatedId = React15.useId();
|
|
2937
3301
|
const fieldId = id || generatedId;
|
|
2938
3302
|
const switchElement = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2939
3303
|
SwitchPrimitives.Root,
|
|
@@ -2953,44 +3317,22 @@ var Switch = React14.forwardRef(
|
|
|
2953
3317
|
);
|
|
2954
3318
|
if (!label && !error) {
|
|
2955
3319
|
return switchElement;
|
|
2956
|
-
}
|
|
2957
|
-
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { children: [
|
|
2958
|
-
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
2959
|
-
switchElement,
|
|
2960
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Label, { htmlFor: fieldId, className: "cursor-pointer font-medium", children: label })
|
|
2961
|
-
] }),
|
|
2962
|
-
error && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ErrorMessage, { disabled: props.disabled, children: error })
|
|
2963
|
-
] });
|
|
2964
|
-
}
|
|
2965
|
-
);
|
|
2966
|
-
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
2967
|
-
|
|
2968
|
-
// src/video-player/VideoPlayer.tsx
|
|
2969
|
-
var import_react13 = require("react");
|
|
2970
|
-
var import_react_i18next8 = require("react-i18next");
|
|
2971
|
-
var import_lucide_react13 = require("lucide-react");
|
|
2972
|
-
|
|
2973
|
-
// src/lib/use-click-escape.ts
|
|
2974
|
-
var import_react12 = require("react");
|
|
2975
|
-
function useClickEscape({ enabled = true, onClick }) {
|
|
2976
|
-
const onClickRef = (0, import_react12.useRef)(onClick);
|
|
2977
|
-
(0, import_react12.useEffect)(() => {
|
|
2978
|
-
onClickRef.current = onClick;
|
|
2979
|
-
}, [onClick]);
|
|
2980
|
-
(0, import_react12.useEffect)(() => {
|
|
2981
|
-
const handleKeyDown = (event) => {
|
|
2982
|
-
if (event.key === "Escape" && enabled) {
|
|
2983
|
-
onClickRef.current?.();
|
|
2984
|
-
}
|
|
2985
|
-
};
|
|
2986
|
-
window.addEventListener("keydown", handleKeyDown);
|
|
2987
|
-
return () => {
|
|
2988
|
-
window.removeEventListener("keydown", handleKeyDown);
|
|
2989
|
-
};
|
|
2990
|
-
}, [enabled]);
|
|
2991
|
-
}
|
|
3320
|
+
}
|
|
3321
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { children: [
|
|
3322
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
3323
|
+
switchElement,
|
|
3324
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Label, { htmlFor: fieldId, className: "cursor-pointer font-medium", children: label })
|
|
3325
|
+
] }),
|
|
3326
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ErrorMessage, { disabled: props.disabled, children: error })
|
|
3327
|
+
] });
|
|
3328
|
+
}
|
|
3329
|
+
);
|
|
3330
|
+
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
2992
3331
|
|
|
2993
3332
|
// src/video-player/VideoPlayer.tsx
|
|
3333
|
+
var import_react26 = require("react");
|
|
3334
|
+
var import_react_i18next8 = require("react-i18next");
|
|
3335
|
+
var import_lucide_react13 = require("lucide-react");
|
|
2994
3336
|
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2995
3337
|
function VideoPlayer({
|
|
2996
3338
|
src,
|
|
@@ -3001,20 +3343,20 @@ function VideoPlayer({
|
|
|
3001
3343
|
autoPlay = false
|
|
3002
3344
|
}) {
|
|
3003
3345
|
const { t } = (0, import_react_i18next8.useTranslation)();
|
|
3004
|
-
const videoRef = (0,
|
|
3005
|
-
const iframeRef = (0,
|
|
3006
|
-
const containerRef = (0,
|
|
3007
|
-
const [isPlaying, setIsPlaying] = (0,
|
|
3008
|
-
const [isMuted, setIsMuted] = (0,
|
|
3009
|
-
const [currentTime, setCurrentTime] = (0,
|
|
3010
|
-
const [duration, setDuration] = (0,
|
|
3011
|
-
const [isFullScreenMode, setIsFullScreenMode] = (0,
|
|
3012
|
-
const [isLoading, setIsLoading] = (0,
|
|
3013
|
-
const [videoSource, setVideoSource] = (0,
|
|
3014
|
-
const [youtubeEmbedUrl, setYoutubeEmbedUrl] = (0,
|
|
3015
|
-
const [vimeoEmbedUrl, setVimeoEmbedUrl] = (0,
|
|
3346
|
+
const videoRef = (0, import_react26.useRef)(null);
|
|
3347
|
+
const iframeRef = (0, import_react26.useRef)(null);
|
|
3348
|
+
const containerRef = (0, import_react26.useRef)(null);
|
|
3349
|
+
const [isPlaying, setIsPlaying] = (0, import_react26.useState)(false);
|
|
3350
|
+
const [isMuted, setIsMuted] = (0, import_react26.useState)(false);
|
|
3351
|
+
const [currentTime, setCurrentTime] = (0, import_react26.useState)(0);
|
|
3352
|
+
const [duration, setDuration] = (0, import_react26.useState)(0);
|
|
3353
|
+
const [isFullScreenMode, setIsFullScreenMode] = (0, import_react26.useState)(isFullScreen);
|
|
3354
|
+
const [isLoading, setIsLoading] = (0, import_react26.useState)(true);
|
|
3355
|
+
const [videoSource, setVideoSource] = (0, import_react26.useState)("file");
|
|
3356
|
+
const [youtubeEmbedUrl, setYoutubeEmbedUrl] = (0, import_react26.useState)("");
|
|
3357
|
+
const [vimeoEmbedUrl, setVimeoEmbedUrl] = (0, import_react26.useState)("");
|
|
3016
3358
|
useClickEscape({ enabled: isFullScreenMode, onClick: onClose });
|
|
3017
|
-
(0,
|
|
3359
|
+
(0, import_react26.useEffect)(() => {
|
|
3018
3360
|
const youtubeRegex = /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/;
|
|
3019
3361
|
const vimeoRegex = /(?:vimeo\.com\/|vimeo\.com\/video\/)(\d+)/;
|
|
3020
3362
|
const youtubeMatch = src.match(youtubeRegex);
|
|
@@ -3043,7 +3385,7 @@ function VideoPlayer({
|
|
|
3043
3385
|
setYoutubeEmbedUrl("");
|
|
3044
3386
|
setVimeoEmbedUrl("");
|
|
3045
3387
|
}, [src, autoPlay]);
|
|
3046
|
-
(0,
|
|
3388
|
+
(0, import_react26.useEffect)(() => {
|
|
3047
3389
|
if (videoSource !== "file") return;
|
|
3048
3390
|
const video = videoRef.current;
|
|
3049
3391
|
if (!video) return;
|
|
@@ -3071,7 +3413,7 @@ function VideoPlayer({
|
|
|
3071
3413
|
video.removeEventListener("canplay", handleCanPlay);
|
|
3072
3414
|
};
|
|
3073
3415
|
}, [videoSource]);
|
|
3074
|
-
(0,
|
|
3416
|
+
(0, import_react26.useEffect)(() => {
|
|
3075
3417
|
if (isFullScreenMode && videoRef.current && videoSource === "file") {
|
|
3076
3418
|
void videoRef.current.play();
|
|
3077
3419
|
setIsPlaying(true);
|
|
@@ -3348,10 +3690,10 @@ function FeatureCard({
|
|
|
3348
3690
|
}
|
|
3349
3691
|
|
|
3350
3692
|
// src/file-input-button/FileInputButton.tsx
|
|
3351
|
-
var
|
|
3693
|
+
var import_react27 = require("react");
|
|
3352
3694
|
var import_lucide_react15 = require("lucide-react");
|
|
3353
3695
|
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
3354
|
-
var FileInputButton = (0,
|
|
3696
|
+
var FileInputButton = (0, import_react27.forwardRef)(
|
|
3355
3697
|
({
|
|
3356
3698
|
label,
|
|
3357
3699
|
onChange,
|
|
@@ -3363,7 +3705,7 @@ var FileInputButton = (0, import_react14.forwardRef)(
|
|
|
3363
3705
|
size = "default",
|
|
3364
3706
|
...props
|
|
3365
3707
|
}, ref) => {
|
|
3366
|
-
const handleChange = (0,
|
|
3708
|
+
const handleChange = (0, import_react27.useCallback)(
|
|
3367
3709
|
(event) => {
|
|
3368
3710
|
onChange?.(event);
|
|
3369
3711
|
event.target.value = "";
|
|
@@ -3443,7 +3785,7 @@ var FormBox = {
|
|
|
3443
3785
|
};
|
|
3444
3786
|
|
|
3445
3787
|
// src/free-text-field/FreeTextField.tsx
|
|
3446
|
-
var
|
|
3788
|
+
var import_react28 = require("react");
|
|
3447
3789
|
var import_react_i18next10 = require("react-i18next");
|
|
3448
3790
|
|
|
3449
3791
|
// src/free-text-field/styles.module.css
|
|
@@ -3451,7 +3793,7 @@ var styles_default3 = {};
|
|
|
3451
3793
|
|
|
3452
3794
|
// src/free-text-field/FreeTextField.tsx
|
|
3453
3795
|
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
3454
|
-
var FreeTextField = (0,
|
|
3796
|
+
var FreeTextField = (0, import_react28.forwardRef)(
|
|
3455
3797
|
({
|
|
3456
3798
|
label,
|
|
3457
3799
|
error,
|
|
@@ -3473,9 +3815,9 @@ var FreeTextField = (0, import_react15.forwardRef)(
|
|
|
3473
3815
|
...inputProps
|
|
3474
3816
|
}, ref) => {
|
|
3475
3817
|
const { t } = (0, import_react_i18next10.useTranslation)();
|
|
3476
|
-
const inputId = (0,
|
|
3477
|
-
const [internalValue, setInternalValue] = (0,
|
|
3478
|
-
const [isFocused, setIsFocused] = (0,
|
|
3818
|
+
const inputId = (0, import_react28.useId)();
|
|
3819
|
+
const [internalValue, setInternalValue] = (0, import_react28.useState)(defaultValue ?? "");
|
|
3820
|
+
const [isFocused, setIsFocused] = (0, import_react28.useState)(false);
|
|
3479
3821
|
const currentValue = value !== void 0 ? value : internalValue;
|
|
3480
3822
|
const isEmpty = !currentValue || String(currentValue).length === 0;
|
|
3481
3823
|
const hasError = Boolean(error);
|
|
@@ -3559,7 +3901,7 @@ var FreeTextField = (0, import_react15.forwardRef)(
|
|
|
3559
3901
|
FreeTextField.displayName = "FreeTextField";
|
|
3560
3902
|
|
|
3561
3903
|
// src/framed-icon/FramedIcon.tsx
|
|
3562
|
-
var
|
|
3904
|
+
var React16 = __toESM(require("react"), 1);
|
|
3563
3905
|
var import_class_variance_authority8 = require("class-variance-authority");
|
|
3564
3906
|
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
3565
3907
|
var framedIconVariants = (0, import_class_variance_authority8.cva)("inline-flex items-center justify-center shrink-0", {
|
|
@@ -3583,7 +3925,7 @@ var framedIconVariants = (0, import_class_variance_authority8.cva)("inline-flex
|
|
|
3583
3925
|
},
|
|
3584
3926
|
defaultVariants: { size: "m", shape: "rounded", tone: "info" }
|
|
3585
3927
|
});
|
|
3586
|
-
var FramedIcon =
|
|
3928
|
+
var FramedIcon = React16.forwardRef(
|
|
3587
3929
|
({ className, size, shape, tone, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
3588
3930
|
"span",
|
|
3589
3931
|
{
|
|
@@ -3598,9 +3940,9 @@ var FramedIcon = React15.forwardRef(
|
|
|
3598
3940
|
FramedIcon.displayName = "FramedIcon";
|
|
3599
3941
|
|
|
3600
3942
|
// src/grid-items/GridItems.tsx
|
|
3601
|
-
var
|
|
3943
|
+
var import_react29 = require("react");
|
|
3602
3944
|
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
3603
|
-
var GridItems = (0,
|
|
3945
|
+
var GridItems = (0, import_react29.forwardRef)(
|
|
3604
3946
|
({ children, title, placeholder, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
3605
3947
|
"div",
|
|
3606
3948
|
{
|
|
@@ -3677,9 +4019,9 @@ function HelpTooltip({
|
|
|
3677
4019
|
}
|
|
3678
4020
|
|
|
3679
4021
|
// src/icon/Icon.tsx
|
|
3680
|
-
var
|
|
4022
|
+
var import_react30 = require("react");
|
|
3681
4023
|
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
3682
|
-
var MissingIcon = (0,
|
|
4024
|
+
var MissingIcon = (0, import_react30.forwardRef)(
|
|
3683
4025
|
({ size = 24, className = "", fallback = null, color, ...props }, ref) => {
|
|
3684
4026
|
if (fallback) {
|
|
3685
4027
|
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: fallback });
|
|
@@ -3708,8 +4050,8 @@ var MissingIcon = (0, import_react17.forwardRef)(
|
|
|
3708
4050
|
}
|
|
3709
4051
|
);
|
|
3710
4052
|
MissingIcon.displayName = "MissingIcon";
|
|
3711
|
-
var Icon = (0,
|
|
3712
|
-
(0,
|
|
4053
|
+
var Icon = (0, import_react30.memo)(
|
|
4054
|
+
(0, import_react30.forwardRef)(
|
|
3713
4055
|
({ name: _name, size = 24, className = "", fallback = null, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
3714
4056
|
MissingIcon,
|
|
3715
4057
|
{
|
|
@@ -3745,7 +4087,7 @@ var IconRegistry = class {
|
|
|
3745
4087
|
var RegistryIcon = Icon;
|
|
3746
4088
|
|
|
3747
4089
|
// src/icon-button/IconButton.tsx
|
|
3748
|
-
var
|
|
4090
|
+
var React17 = __toESM(require("react"), 1);
|
|
3749
4091
|
var import_class_variance_authority9 = require("class-variance-authority");
|
|
3750
4092
|
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
3751
4093
|
var iconButtonVariants = (0, import_class_variance_authority9.cva)(
|
|
@@ -3776,7 +4118,7 @@ var iconButtonVariants = (0, import_class_variance_authority9.cva)(
|
|
|
3776
4118
|
defaultVariants: { size: "m", shape: "rounded", variant: "secondary" }
|
|
3777
4119
|
}
|
|
3778
4120
|
);
|
|
3779
|
-
var IconButton =
|
|
4121
|
+
var IconButton = React17.forwardRef(
|
|
3780
4122
|
({ className, size, shape, variant, label, children, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
3781
4123
|
"button",
|
|
3782
4124
|
{
|
|
@@ -3807,7 +4149,7 @@ function InfoBox({ className, children }) {
|
|
|
3807
4149
|
}
|
|
3808
4150
|
|
|
3809
4151
|
// src/image/Image.tsx
|
|
3810
|
-
var
|
|
4152
|
+
var import_react31 = require("react");
|
|
3811
4153
|
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
3812
4154
|
function Image2({
|
|
3813
4155
|
src,
|
|
@@ -3816,7 +4158,7 @@ function Image2({
|
|
|
3816
4158
|
fallbackSrc = "https://placehold.co/600x400?text=Image",
|
|
3817
4159
|
...props
|
|
3818
4160
|
}) {
|
|
3819
|
-
const [error, setError] = (0,
|
|
4161
|
+
const [error, setError] = (0, import_react31.useState)(false);
|
|
3820
4162
|
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
3821
4163
|
"img",
|
|
3822
4164
|
{
|
|
@@ -3831,9 +4173,9 @@ function Image2({
|
|
|
3831
4173
|
}
|
|
3832
4174
|
|
|
3833
4175
|
// src/input/Input.tsx
|
|
3834
|
-
var
|
|
4176
|
+
var React18 = __toESM(require("react"), 1);
|
|
3835
4177
|
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
3836
|
-
var Input =
|
|
4178
|
+
var Input = React18.forwardRef(
|
|
3837
4179
|
({ className, type, readOnly, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
3838
4180
|
"input",
|
|
3839
4181
|
{
|
|
@@ -3857,13 +4199,13 @@ var Input = React17.forwardRef(
|
|
|
3857
4199
|
Input.displayName = "Input";
|
|
3858
4200
|
|
|
3859
4201
|
// src/input-otp/InputOTP.tsx
|
|
3860
|
-
var
|
|
4202
|
+
var React19 = __toESM(require("react"), 1);
|
|
3861
4203
|
|
|
3862
4204
|
// src/input-otp/InputOTPContext.ts
|
|
3863
|
-
var
|
|
3864
|
-
var InputOTPContext = (0,
|
|
4205
|
+
var import_react32 = require("react");
|
|
4206
|
+
var InputOTPContext = (0, import_react32.createContext)(null);
|
|
3865
4207
|
function useInputOTPContext() {
|
|
3866
|
-
const ctx = (0,
|
|
4208
|
+
const ctx = (0, import_react32.useContext)(InputOTPContext);
|
|
3867
4209
|
if (!ctx) {
|
|
3868
4210
|
throw new Error("InputOTP compound components must be used within <InputOTP>");
|
|
3869
4211
|
}
|
|
@@ -3875,7 +4217,7 @@ function extractDigits(str) {
|
|
|
3875
4217
|
}
|
|
3876
4218
|
|
|
3877
4219
|
// src/input-otp/useInputOTP.ts
|
|
3878
|
-
var
|
|
4220
|
+
var import_react33 = require("react");
|
|
3879
4221
|
function useInputOTP({
|
|
3880
4222
|
maxLength,
|
|
3881
4223
|
value,
|
|
@@ -3884,12 +4226,12 @@ function useInputOTP({
|
|
|
3884
4226
|
autoFocus,
|
|
3885
4227
|
error
|
|
3886
4228
|
}) {
|
|
3887
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
3888
|
-
const inputRefs = (0,
|
|
3889
|
-
const containerRef = (0,
|
|
3890
|
-
const blurTimeoutRef = (0,
|
|
3891
|
-
const slotsRef = (0,
|
|
3892
|
-
const slots = (0,
|
|
4229
|
+
const [activeIndex, setActiveIndex] = (0, import_react33.useState)(-1);
|
|
4230
|
+
const inputRefs = (0, import_react33.useRef)([]);
|
|
4231
|
+
const containerRef = (0, import_react33.useRef)(null);
|
|
4232
|
+
const blurTimeoutRef = (0, import_react33.useRef)();
|
|
4233
|
+
const slotsRef = (0, import_react33.useRef)(Array.from({ length: maxLength }, () => ""));
|
|
4234
|
+
const slots = (0, import_react33.useMemo)(() => {
|
|
3893
4235
|
const nextSlots = Array.from({ length: maxLength }, () => "");
|
|
3894
4236
|
for (let index = 0; index < Math.min(value.length, maxLength); index += 1) {
|
|
3895
4237
|
const char = value[index];
|
|
@@ -3900,7 +4242,7 @@ function useInputOTP({
|
|
|
3900
4242
|
return nextSlots;
|
|
3901
4243
|
}, [value, maxLength]);
|
|
3902
4244
|
slotsRef.current = slots;
|
|
3903
|
-
const emitValue = (0,
|
|
4245
|
+
const emitValue = (0, import_react33.useCallback)(
|
|
3904
4246
|
(newSlots) => {
|
|
3905
4247
|
let lastFilledIndex = -1;
|
|
3906
4248
|
for (let index = newSlots.length - 1; index >= 0; index -= 1) {
|
|
@@ -3921,12 +4263,12 @@ function useInputOTP({
|
|
|
3921
4263
|
},
|
|
3922
4264
|
[onChange]
|
|
3923
4265
|
);
|
|
3924
|
-
(0,
|
|
4266
|
+
(0, import_react33.useEffect)(() => {
|
|
3925
4267
|
if (autoFocus && inputRefs.current[0]) {
|
|
3926
4268
|
inputRefs.current[0].focus();
|
|
3927
4269
|
}
|
|
3928
4270
|
}, [autoFocus]);
|
|
3929
|
-
const handleContainerFocusIn = (0,
|
|
4271
|
+
const handleContainerFocusIn = (0, import_react33.useCallback)((event) => {
|
|
3930
4272
|
clearTimeout(blurTimeoutRef.current);
|
|
3931
4273
|
const target = event.target;
|
|
3932
4274
|
const slotIndex = inputRefs.current.indexOf(target);
|
|
@@ -3934,7 +4276,7 @@ function useInputOTP({
|
|
|
3934
4276
|
setActiveIndex(slotIndex);
|
|
3935
4277
|
}
|
|
3936
4278
|
}, []);
|
|
3937
|
-
const handleContainerFocusOut = (0,
|
|
4279
|
+
const handleContainerFocusOut = (0, import_react33.useCallback)(() => {
|
|
3938
4280
|
clearTimeout(blurTimeoutRef.current);
|
|
3939
4281
|
blurTimeoutRef.current = setTimeout(() => {
|
|
3940
4282
|
if (!containerRef.current?.contains(document.activeElement)) {
|
|
@@ -3942,8 +4284,8 @@ function useInputOTP({
|
|
|
3942
4284
|
}
|
|
3943
4285
|
}, 0);
|
|
3944
4286
|
}, []);
|
|
3945
|
-
(0,
|
|
3946
|
-
const handleDigitInput = (0,
|
|
4287
|
+
(0, import_react33.useEffect)(() => () => clearTimeout(blurTimeoutRef.current), []);
|
|
4288
|
+
const handleDigitInput = (0, import_react33.useCallback)(
|
|
3947
4289
|
(index, digit) => {
|
|
3948
4290
|
if (!DIGIT_REGEX.test(digit)) return;
|
|
3949
4291
|
const newSlots = [...slotsRef.current];
|
|
@@ -3957,7 +4299,7 @@ function useInputOTP({
|
|
|
3957
4299
|
},
|
|
3958
4300
|
[maxLength, emitValue]
|
|
3959
4301
|
);
|
|
3960
|
-
const handleDelete = (0,
|
|
4302
|
+
const handleDelete = (0, import_react33.useCallback)(
|
|
3961
4303
|
(index) => {
|
|
3962
4304
|
const newSlots = [...slotsRef.current];
|
|
3963
4305
|
if (newSlots[index]) {
|
|
@@ -3972,7 +4314,7 @@ function useInputOTP({
|
|
|
3972
4314
|
},
|
|
3973
4315
|
[emitValue]
|
|
3974
4316
|
);
|
|
3975
|
-
const handlePaste = (0,
|
|
4317
|
+
const handlePaste = (0, import_react33.useCallback)(
|
|
3976
4318
|
(text) => {
|
|
3977
4319
|
const digits = extractDigits(text).slice(0, maxLength);
|
|
3978
4320
|
if (digits.length > 0) {
|
|
@@ -3988,7 +4330,7 @@ function useInputOTP({
|
|
|
3988
4330
|
},
|
|
3989
4331
|
[maxLength, emitValue]
|
|
3990
4332
|
);
|
|
3991
|
-
const contextValue = (0,
|
|
4333
|
+
const contextValue = (0, import_react33.useMemo)(
|
|
3992
4334
|
() => ({
|
|
3993
4335
|
slots,
|
|
3994
4336
|
activeIndex,
|
|
@@ -4021,7 +4363,7 @@ function useInputOTP({
|
|
|
4021
4363
|
}
|
|
4022
4364
|
|
|
4023
4365
|
// src/input-otp/useInputOTPSlot.ts
|
|
4024
|
-
var
|
|
4366
|
+
var import_react34 = require("react");
|
|
4025
4367
|
function useInputOTPSlot(index) {
|
|
4026
4368
|
const {
|
|
4027
4369
|
slots,
|
|
@@ -4091,13 +4433,13 @@ function useInputOTPSlot(index) {
|
|
|
4091
4433
|
event.preventDefault();
|
|
4092
4434
|
handlePaste(event.clipboardData.getData("text/plain"));
|
|
4093
4435
|
};
|
|
4094
|
-
const setInputRef = (0,
|
|
4436
|
+
const setInputRef = (0, import_react34.useCallback)(
|
|
4095
4437
|
(element) => {
|
|
4096
4438
|
inputRefs.current[index] = element;
|
|
4097
4439
|
},
|
|
4098
4440
|
[index, inputRefs]
|
|
4099
4441
|
);
|
|
4100
|
-
const focusSlot = (0,
|
|
4442
|
+
const focusSlot = (0, import_react34.useCallback)(() => {
|
|
4101
4443
|
inputRefs.current[index]?.focus();
|
|
4102
4444
|
}, [index, inputRefs]);
|
|
4103
4445
|
return {
|
|
@@ -4140,11 +4482,11 @@ function InputOTP({
|
|
|
4140
4482
|
}
|
|
4141
4483
|
) });
|
|
4142
4484
|
}
|
|
4143
|
-
var InputOTPGroup =
|
|
4485
|
+
var InputOTPGroup = React19.forwardRef(
|
|
4144
4486
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { ref, className: cn("flex items-center", className), ...props })
|
|
4145
4487
|
);
|
|
4146
4488
|
InputOTPGroup.displayName = "InputOTPGroup";
|
|
4147
|
-
var InputOTPSlot =
|
|
4489
|
+
var InputOTPSlot = React19.forwardRef(
|
|
4148
4490
|
({ index, className, ...props }, ref) => {
|
|
4149
4491
|
const {
|
|
4150
4492
|
char,
|
|
@@ -4193,13 +4535,13 @@ var InputOTPSlot = React18.forwardRef(
|
|
|
4193
4535
|
}
|
|
4194
4536
|
);
|
|
4195
4537
|
InputOTPSlot.displayName = "InputOTPSlot";
|
|
4196
|
-
var InputOTPSeparator =
|
|
4538
|
+
var InputOTPSeparator = React19.forwardRef(
|
|
4197
4539
|
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { ref, role: "separator", ...props })
|
|
4198
4540
|
);
|
|
4199
4541
|
InputOTPSeparator.displayName = "InputOTPSeparator";
|
|
4200
4542
|
|
|
4201
4543
|
// src/icons-dropdown/IconsDropdown.tsx
|
|
4202
|
-
var
|
|
4544
|
+
var import_react35 = require("react");
|
|
4203
4545
|
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
4204
4546
|
function IconsDropdown({
|
|
4205
4547
|
icons,
|
|
@@ -4211,7 +4553,7 @@ function IconsDropdown({
|
|
|
4211
4553
|
defaultOpen,
|
|
4212
4554
|
onOpenChange: onOpenChangeProp
|
|
4213
4555
|
}) {
|
|
4214
|
-
const [open, setOpen] = (0,
|
|
4556
|
+
const [open, setOpen] = (0, import_react35.useState)(defaultOpen ?? false);
|
|
4215
4557
|
function handleOpenChange(value) {
|
|
4216
4558
|
setOpen(value);
|
|
4217
4559
|
onOpenChangeProp?.(value);
|
|
@@ -4794,9 +5136,9 @@ function LearnMoreButton({ label, ...props }) {
|
|
|
4794
5136
|
}
|
|
4795
5137
|
|
|
4796
5138
|
// src/link/Link.tsx
|
|
4797
|
-
var
|
|
5139
|
+
var import_react36 = require("react");
|
|
4798
5140
|
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
4799
|
-
var LinkInternal = (0,
|
|
5141
|
+
var LinkInternal = (0, import_react36.forwardRef)(
|
|
4800
5142
|
({ disabled = false, className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
4801
5143
|
"a",
|
|
4802
5144
|
{
|
|
@@ -4815,17 +5157,17 @@ var LinkInternal = (0, import_react23.forwardRef)(
|
|
|
4815
5157
|
)
|
|
4816
5158
|
);
|
|
4817
5159
|
LinkInternal.displayName = "Link";
|
|
4818
|
-
var Link = (0,
|
|
5160
|
+
var Link = (0, import_react36.memo)(LinkInternal);
|
|
4819
5161
|
|
|
4820
5162
|
// src/image-full-screen-view/ImageFullScreenView.tsx
|
|
4821
|
-
var
|
|
5163
|
+
var import_react37 = require("react");
|
|
4822
5164
|
var import_lucide_react20 = require("lucide-react");
|
|
4823
5165
|
var import_react_i18next13 = require("react-i18next");
|
|
4824
5166
|
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
4825
5167
|
function ImageFullScreenView({ src, alt, onClose }) {
|
|
4826
5168
|
const { t } = (0, import_react_i18next13.useTranslation)();
|
|
4827
|
-
const [scale, setScale] = (0,
|
|
4828
|
-
const [rotation, setRotation] = (0,
|
|
5169
|
+
const [scale, setScale] = (0, import_react37.useState)(1);
|
|
5170
|
+
const [rotation, setRotation] = (0, import_react37.useState)(0);
|
|
4829
5171
|
useClickEscape({ onClick: onClose });
|
|
4830
5172
|
const zoomIn = () => setScale((value) => Math.min(value + 0.25, 3));
|
|
4831
5173
|
const zoomOut = () => setScale((value) => Math.max(value - 0.25, 0.5));
|
|
@@ -5023,55 +5365,9 @@ var METRIC_CARD_VARIANTS = {
|
|
|
5023
5365
|
};
|
|
5024
5366
|
|
|
5025
5367
|
// src/modal/Modal.tsx
|
|
5026
|
-
var
|
|
5368
|
+
var import_react38 = require("react");
|
|
5027
5369
|
var import_lucide_react23 = require("lucide-react");
|
|
5028
5370
|
|
|
5029
|
-
// src/lib/use-scroll-frame-into-view.ts
|
|
5030
|
-
var import_react25 = require("react");
|
|
5031
|
-
|
|
5032
|
-
// src/lib/runtimeSettings.ts
|
|
5033
|
-
function getChekinRuntimeSettings() {
|
|
5034
|
-
return window.ChekinProSettings || window.ChekinHousingsSDKSettings || {};
|
|
5035
|
-
}
|
|
5036
|
-
function isMobileModalModeAvailable() {
|
|
5037
|
-
const settings = getChekinRuntimeSettings();
|
|
5038
|
-
return !settings.autoHeight;
|
|
5039
|
-
}
|
|
5040
|
-
|
|
5041
|
-
// src/lib/use-scroll-frame-into-view.ts
|
|
5042
|
-
function useScrollFrameIntoView(active, options = {}) {
|
|
5043
|
-
const { behavior = "smooth", elementRef } = options;
|
|
5044
|
-
(0, import_react25.useEffect)(() => {
|
|
5045
|
-
const sdkWindow = window;
|
|
5046
|
-
if (!active || !getChekinRuntimeSettings()?.autoHeight) {
|
|
5047
|
-
return;
|
|
5048
|
-
}
|
|
5049
|
-
const frame = sdkWindow.chekinCustomFrame;
|
|
5050
|
-
if (!frame) {
|
|
5051
|
-
return;
|
|
5052
|
-
}
|
|
5053
|
-
const parentWindow = window.parent;
|
|
5054
|
-
const scrollToElement = () => {
|
|
5055
|
-
const frameRect = frame.getBoundingClientRect();
|
|
5056
|
-
if (elementRef?.current) {
|
|
5057
|
-
const elementRect = elementRef.current.getBoundingClientRect();
|
|
5058
|
-
const elementCenterInFrame = elementRect.top + elementRect.height / 2;
|
|
5059
|
-
const elementCenterInParent = frameRect.top + elementCenterInFrame;
|
|
5060
|
-
const targetScroll = parentWindow.scrollY + elementCenterInParent - parentWindow.innerHeight / 2;
|
|
5061
|
-
parentWindow.scrollTo({
|
|
5062
|
-
top: Math.max(0, targetScroll),
|
|
5063
|
-
behavior
|
|
5064
|
-
});
|
|
5065
|
-
return;
|
|
5066
|
-
}
|
|
5067
|
-
frame.scrollIntoView({ behavior, block: "start" });
|
|
5068
|
-
};
|
|
5069
|
-
requestAnimationFrame(() => {
|
|
5070
|
-
requestAnimationFrame(scrollToElement);
|
|
5071
|
-
});
|
|
5072
|
-
}, [active, behavior, elementRef]);
|
|
5073
|
-
}
|
|
5074
|
-
|
|
5075
5371
|
// src/modal/styles.module.css
|
|
5076
5372
|
var styles_default4 = {};
|
|
5077
5373
|
|
|
@@ -5100,7 +5396,7 @@ function Modal({
|
|
|
5100
5396
|
container,
|
|
5101
5397
|
modal
|
|
5102
5398
|
}) {
|
|
5103
|
-
const contentRef = (0,
|
|
5399
|
+
const contentRef = (0, import_react38.useRef)(null);
|
|
5104
5400
|
useScrollFrameIntoView(open, { elementRef: contentRef });
|
|
5105
5401
|
const handleClose = () => {
|
|
5106
5402
|
onOpenChange?.(false);
|
|
@@ -5142,7 +5438,7 @@ function Modal({
|
|
|
5142
5438
|
}
|
|
5143
5439
|
) });
|
|
5144
5440
|
}
|
|
5145
|
-
var ModalButton = (0,
|
|
5441
|
+
var ModalButton = (0, import_react38.forwardRef)(
|
|
5146
5442
|
({ children, size, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
5147
5443
|
Button,
|
|
5148
5444
|
{
|
|
@@ -5158,9 +5454,9 @@ ModalButton.displayName = "ModalButton";
|
|
|
5158
5454
|
Modal.displayName = "Modal";
|
|
5159
5455
|
|
|
5160
5456
|
// src/modal-loader/ModalLoader.tsx
|
|
5161
|
-
var
|
|
5457
|
+
var import_react39 = require("react");
|
|
5162
5458
|
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
5163
|
-
var ModalLoader = (0,
|
|
5459
|
+
var ModalLoader = (0, import_react39.memo)(({ visible, className }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
5164
5460
|
"div",
|
|
5165
5461
|
{
|
|
5166
5462
|
className: cn(
|
|
@@ -5230,14 +5526,14 @@ var import_react_i18next16 = require("react-i18next");
|
|
|
5230
5526
|
var import_lucide_react24 = require("lucide-react");
|
|
5231
5527
|
|
|
5232
5528
|
// src/select/Select.tsx
|
|
5233
|
-
var
|
|
5529
|
+
var React20 = __toESM(require("react"), 1);
|
|
5234
5530
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
5235
5531
|
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
5236
5532
|
var SelectRoot = RadixSelect.Root;
|
|
5237
5533
|
var SelectValue = RadixSelect.Value;
|
|
5238
5534
|
var SelectGroup = RadixSelect.Group;
|
|
5239
5535
|
var SelectPortal = RadixSelect.Portal;
|
|
5240
|
-
var SelectTrigger =
|
|
5536
|
+
var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
|
|
5241
5537
|
RadixSelect.Trigger,
|
|
5242
5538
|
{
|
|
5243
5539
|
ref,
|
|
@@ -5278,7 +5574,7 @@ var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref)
|
|
|
5278
5574
|
}
|
|
5279
5575
|
));
|
|
5280
5576
|
SelectTrigger.displayName = "SelectTrigger";
|
|
5281
|
-
var SelectContent =
|
|
5577
|
+
var SelectContent = React20.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
5282
5578
|
RadixSelect.Content,
|
|
5283
5579
|
{
|
|
5284
5580
|
ref,
|
|
@@ -5297,7 +5593,7 @@ var SelectContent = React19.forwardRef(({ className, children, position = "poppe
|
|
|
5297
5593
|
}
|
|
5298
5594
|
) }));
|
|
5299
5595
|
SelectContent.displayName = "SelectContent";
|
|
5300
|
-
var SelectItem =
|
|
5596
|
+
var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
|
|
5301
5597
|
RadixSelect.Item,
|
|
5302
5598
|
{
|
|
5303
5599
|
ref,
|
|
@@ -5332,7 +5628,7 @@ var SelectItem = React19.forwardRef(({ className, children, ...props }, ref) =>
|
|
|
5332
5628
|
}
|
|
5333
5629
|
));
|
|
5334
5630
|
SelectItem.displayName = "SelectItem";
|
|
5335
|
-
var SelectSeparator =
|
|
5631
|
+
var SelectSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
5336
5632
|
RadixSelect.Separator,
|
|
5337
5633
|
{
|
|
5338
5634
|
ref,
|
|
@@ -5341,7 +5637,7 @@ var SelectSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @_
|
|
|
5341
5637
|
}
|
|
5342
5638
|
));
|
|
5343
5639
|
SelectSeparator.displayName = "SelectSeparator";
|
|
5344
|
-
var SelectLabel =
|
|
5640
|
+
var SelectLabel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
5345
5641
|
RadixSelect.Label,
|
|
5346
5642
|
{
|
|
5347
5643
|
ref,
|
|
@@ -5353,7 +5649,7 @@ var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
5353
5649
|
}
|
|
5354
5650
|
));
|
|
5355
5651
|
SelectLabel.displayName = "SelectLabel";
|
|
5356
|
-
var Select =
|
|
5652
|
+
var Select = React20.forwardRef(
|
|
5357
5653
|
({
|
|
5358
5654
|
placeholder,
|
|
5359
5655
|
label,
|
|
@@ -5364,9 +5660,9 @@ var Select = React19.forwardRef(
|
|
|
5364
5660
|
children,
|
|
5365
5661
|
...props
|
|
5366
5662
|
}, ref) => {
|
|
5367
|
-
const reactId =
|
|
5663
|
+
const reactId = React20.useId();
|
|
5368
5664
|
const triggerId = props.name ?? reactId;
|
|
5369
|
-
const internalRef =
|
|
5665
|
+
const internalRef = React20.useRef(null);
|
|
5370
5666
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
5371
5667
|
return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: cn("flex flex-col gap-chekin-1 w-[300px]", containerClassName), children: [
|
|
5372
5668
|
label && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
@@ -5523,7 +5819,7 @@ function Pagination({
|
|
|
5523
5819
|
}
|
|
5524
5820
|
|
|
5525
5821
|
// src/popover/Popover.tsx
|
|
5526
|
-
var
|
|
5822
|
+
var React21 = __toESM(require("react"), 1);
|
|
5527
5823
|
var RadixPopover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
5528
5824
|
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
5529
5825
|
var Popover = RadixPopover.Root;
|
|
@@ -5531,7 +5827,7 @@ var PopoverTrigger = RadixPopover.Trigger;
|
|
|
5531
5827
|
var PopoverAnchor = RadixPopover.Anchor;
|
|
5532
5828
|
var PopoverPortal = RadixPopover.Portal;
|
|
5533
5829
|
var PopoverClose = RadixPopover.Close;
|
|
5534
|
-
var PopoverContent =
|
|
5830
|
+
var PopoverContent = React21.forwardRef(({ className, sideOffset = 8, align = "start", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(RadixPopover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
5535
5831
|
RadixPopover.Content,
|
|
5536
5832
|
{
|
|
5537
5833
|
ref,
|
|
@@ -5548,14 +5844,14 @@ var PopoverContent = React20.forwardRef(({ className, sideOffset = 8, align = "s
|
|
|
5548
5844
|
PopoverContent.displayName = "PopoverContent";
|
|
5549
5845
|
|
|
5550
5846
|
// src/radio/Radio.tsx
|
|
5551
|
-
var
|
|
5847
|
+
var import_react41 = require("react");
|
|
5552
5848
|
|
|
5553
5849
|
// src/radio-group/RadioGroup.tsx
|
|
5554
|
-
var
|
|
5850
|
+
var React22 = __toESM(require("react"), 1);
|
|
5555
5851
|
var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
|
|
5556
5852
|
var import_lucide_react25 = require("lucide-react");
|
|
5557
5853
|
var import_jsx_runtime79 = require("react/jsx-runtime");
|
|
5558
|
-
var RadioGroup =
|
|
5854
|
+
var RadioGroup = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
5559
5855
|
RadioGroupPrimitive.Root,
|
|
5560
5856
|
{
|
|
5561
5857
|
ref,
|
|
@@ -5564,7 +5860,7 @@ var RadioGroup = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
5564
5860
|
}
|
|
5565
5861
|
));
|
|
5566
5862
|
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
|
|
5567
|
-
var RadioGroupItem =
|
|
5863
|
+
var RadioGroupItem = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
5568
5864
|
RadioGroupPrimitive.Item,
|
|
5569
5865
|
{
|
|
5570
5866
|
ref,
|
|
@@ -5581,11 +5877,11 @@ var RadioGroupItem = React21.forwardRef(({ className, ...props }, ref) => /* @__
|
|
|
5581
5877
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
5582
5878
|
|
|
5583
5879
|
// src/radio/useRadioOptions.ts
|
|
5584
|
-
var
|
|
5880
|
+
var import_react40 = require("react");
|
|
5585
5881
|
function useRadioOptions({ options, defaultValue, onChange }) {
|
|
5586
5882
|
const initialValue = (typeof defaultValue === "string" ? options.find((option) => option.value === defaultValue) : defaultValue) || "";
|
|
5587
|
-
const [selectedValue, setSelectedValue] = (0,
|
|
5588
|
-
const handleValueChange = (0,
|
|
5883
|
+
const [selectedValue, setSelectedValue] = (0, import_react40.useState)(initialValue);
|
|
5884
|
+
const handleValueChange = (0, import_react40.useCallback)(
|
|
5589
5885
|
(value) => {
|
|
5590
5886
|
setSelectedValue(value);
|
|
5591
5887
|
const selectedOption = options.find((option) => option.value === value) || "";
|
|
@@ -5606,7 +5902,7 @@ var styles_default5 = {};
|
|
|
5606
5902
|
|
|
5607
5903
|
// src/radio/Radio.tsx
|
|
5608
5904
|
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
5609
|
-
var Radio = (0,
|
|
5905
|
+
var Radio = (0, import_react41.forwardRef)(
|
|
5610
5906
|
({ options, value, onChange, error, className = "", disabled = false, renderOption }, ref) => {
|
|
5611
5907
|
const { selectedValue, handleValueChange } = useRadioOptions({
|
|
5612
5908
|
options,
|
|
@@ -5793,7 +6089,7 @@ function RatingRadioGroup({
|
|
|
5793
6089
|
}
|
|
5794
6090
|
|
|
5795
6091
|
// src/rating-stars/RatingStars.tsx
|
|
5796
|
-
var
|
|
6092
|
+
var React23 = __toESM(require("react"), 1);
|
|
5797
6093
|
var import_lucide_react27 = require("lucide-react");
|
|
5798
6094
|
var import_react_i18next17 = require("react-i18next");
|
|
5799
6095
|
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
@@ -5813,7 +6109,7 @@ function RatingStars({
|
|
|
5813
6109
|
const { t } = (0, import_react_i18next17.useTranslation)();
|
|
5814
6110
|
const normalizedRating = Math.max(0, Math.min(maxRating, rating));
|
|
5815
6111
|
const stars = Array.from({ length: maxRating }, (_, index) => index + 1);
|
|
5816
|
-
const componentId =
|
|
6112
|
+
const componentId = React23.useId();
|
|
5817
6113
|
const decimal = normalizedRating - Math.floor(normalizedRating);
|
|
5818
6114
|
const partialStarIndex = decimal > 0 ? Math.ceil(normalizedRating) : -1;
|
|
5819
6115
|
const gradientId = `star-gradient-${componentId.replace(/:/g, "")}`;
|
|
@@ -5996,7 +6292,7 @@ var SectionTagColors = /* @__PURE__ */ ((SectionTagColors2) => {
|
|
|
5996
6292
|
})(SectionTagColors || {});
|
|
5997
6293
|
|
|
5998
6294
|
// src/section/Section.tsx
|
|
5999
|
-
var
|
|
6295
|
+
var import_react42 = require("react");
|
|
6000
6296
|
var import_lucide_react31 = require("lucide-react");
|
|
6001
6297
|
|
|
6002
6298
|
// src/section/constants.ts
|
|
@@ -6023,7 +6319,7 @@ function TooltipInfo({ content, className }) {
|
|
|
6023
6319
|
}
|
|
6024
6320
|
) });
|
|
6025
6321
|
}
|
|
6026
|
-
var Section = (0,
|
|
6322
|
+
var Section = (0, import_react42.forwardRef)(
|
|
6027
6323
|
({
|
|
6028
6324
|
children,
|
|
6029
6325
|
title,
|
|
@@ -6075,17 +6371,17 @@ var Section = (0, import_react30.forwardRef)(
|
|
|
6075
6371
|
)
|
|
6076
6372
|
);
|
|
6077
6373
|
Section.displayName = "Section";
|
|
6078
|
-
var SubSection = (0,
|
|
6374
|
+
var SubSection = (0, import_react42.forwardRef)(
|
|
6079
6375
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Section, { ref, className: cn(Section_default.section_sub, className), ...props })
|
|
6080
6376
|
);
|
|
6081
6377
|
SubSection.displayName = "SubSection";
|
|
6082
|
-
var DividingSubsection = (0,
|
|
6378
|
+
var DividingSubsection = (0, import_react42.forwardRef)(
|
|
6083
6379
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(SubSection, { ref, className: cn(Section_default.section_dividing, className), ...props })
|
|
6084
6380
|
);
|
|
6085
6381
|
DividingSubsection.displayName = "DividingSubsection";
|
|
6086
6382
|
|
|
6087
6383
|
// src/selectors/Selectors.tsx
|
|
6088
|
-
var
|
|
6384
|
+
var import_react43 = require("react");
|
|
6089
6385
|
|
|
6090
6386
|
// src/selector-button/styles.module.css
|
|
6091
6387
|
var styles_default7 = {};
|
|
@@ -6157,8 +6453,8 @@ var getValueArray = (value) => {
|
|
|
6157
6453
|
return [];
|
|
6158
6454
|
};
|
|
6159
6455
|
function getSelectorContent(label, disabled, readOnly, active) {
|
|
6160
|
-
if ((0,
|
|
6161
|
-
return (0,
|
|
6456
|
+
if ((0, import_react43.isValidElement)(label)) {
|
|
6457
|
+
return (0, import_react43.cloneElement)(label, {
|
|
6162
6458
|
disabled,
|
|
6163
6459
|
readOnly,
|
|
6164
6460
|
active
|
|
@@ -6203,7 +6499,7 @@ function SelectorsInternal({
|
|
|
6203
6499
|
}
|
|
6204
6500
|
};
|
|
6205
6501
|
const isAnyActive = getValueArray(value).length > 0;
|
|
6206
|
-
(0,
|
|
6502
|
+
(0, import_react43.useEffect)(() => {
|
|
6207
6503
|
onAnySelectorActive?.(isAnyActive);
|
|
6208
6504
|
}, [isAnyActive, onAnySelectorActive]);
|
|
6209
6505
|
return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
|
|
@@ -6246,7 +6542,7 @@ function SelectorsInternal({
|
|
|
6246
6542
|
)
|
|
6247
6543
|
] });
|
|
6248
6544
|
}
|
|
6249
|
-
var Selectors = (0,
|
|
6545
|
+
var Selectors = (0, import_react43.forwardRef)(SelectorsInternal);
|
|
6250
6546
|
|
|
6251
6547
|
// src/separator/Separator.tsx
|
|
6252
6548
|
var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
|
|
@@ -6384,30 +6680,11 @@ function SheetDescription({
|
|
|
6384
6680
|
}
|
|
6385
6681
|
|
|
6386
6682
|
// src/sidebar/Sidebar.tsx
|
|
6387
|
-
var
|
|
6683
|
+
var React24 = __toESM(require("react"), 1);
|
|
6388
6684
|
var import_react_slot4 = require("@radix-ui/react-slot");
|
|
6389
6685
|
var import_class_variance_authority11 = require("class-variance-authority");
|
|
6390
6686
|
var import_lucide_react33 = require("lucide-react");
|
|
6391
6687
|
|
|
6392
|
-
// src/lib/use-is-mobile.ts
|
|
6393
|
-
var import_react32 = require("react");
|
|
6394
|
-
var MOBILE_BREAKPOINT = 768;
|
|
6395
|
-
function useIsMobile({ breakpoint = MOBILE_BREAKPOINT } = {}) {
|
|
6396
|
-
const [isMobile, setIsMobile] = (0, import_react32.useState)(void 0);
|
|
6397
|
-
(0, import_react32.useEffect)(() => {
|
|
6398
|
-
const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
|
|
6399
|
-
const onChange = () => {
|
|
6400
|
-
setIsMobile(window.innerWidth < breakpoint);
|
|
6401
|
-
};
|
|
6402
|
-
mediaQuery.addEventListener("change", onChange);
|
|
6403
|
-
setIsMobile(window.innerWidth < breakpoint);
|
|
6404
|
-
return () => {
|
|
6405
|
-
mediaQuery.removeEventListener("change", onChange);
|
|
6406
|
-
};
|
|
6407
|
-
}, [breakpoint]);
|
|
6408
|
-
return !!isMobile;
|
|
6409
|
-
}
|
|
6410
|
-
|
|
6411
6688
|
// src/skeleton/Skeleton.tsx
|
|
6412
6689
|
var import_jsx_runtime94 = require("react/jsx-runtime");
|
|
6413
6690
|
function Skeleton({ className, ...props }) {
|
|
@@ -6425,19 +6702,19 @@ function Skeleton({ className, ...props }) {
|
|
|
6425
6702
|
}
|
|
6426
6703
|
|
|
6427
6704
|
// src/sidebar/SidebarContext.ts
|
|
6428
|
-
var
|
|
6429
|
-
var SidebarContext = (0,
|
|
6705
|
+
var import_react44 = require("react");
|
|
6706
|
+
var SidebarContext = (0, import_react44.createContext)(null);
|
|
6430
6707
|
|
|
6431
6708
|
// src/sidebar/useSidebarMenuButton.ts
|
|
6432
|
-
var
|
|
6709
|
+
var import_react46 = require("react");
|
|
6433
6710
|
|
|
6434
6711
|
// src/sidebar/SidebarMenuButtonContext.ts
|
|
6435
|
-
var
|
|
6436
|
-
var SidebarMenuButtonContext = (0,
|
|
6712
|
+
var import_react45 = require("react");
|
|
6713
|
+
var SidebarMenuButtonContext = (0, import_react45.createContext)(null);
|
|
6437
6714
|
|
|
6438
6715
|
// src/sidebar/useSidebarMenuButton.ts
|
|
6439
6716
|
function useSidebarMenuButton() {
|
|
6440
|
-
return (0,
|
|
6717
|
+
return (0, import_react46.useContext)(SidebarMenuButtonContext);
|
|
6441
6718
|
}
|
|
6442
6719
|
|
|
6443
6720
|
// src/sidebar/SidebarIcon.tsx
|
|
@@ -6478,16 +6755,16 @@ var SidebarIcon = ({
|
|
|
6478
6755
|
};
|
|
6479
6756
|
|
|
6480
6757
|
// src/sidebar/useSidebar.ts
|
|
6481
|
-
var
|
|
6758
|
+
var import_react47 = require("react");
|
|
6482
6759
|
function useSidebar() {
|
|
6483
|
-
const context = (0,
|
|
6760
|
+
const context = (0, import_react47.useContext)(SidebarContext);
|
|
6484
6761
|
if (!context) {
|
|
6485
6762
|
throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
6486
6763
|
}
|
|
6487
6764
|
return context;
|
|
6488
6765
|
}
|
|
6489
6766
|
function useSidebarSafe() {
|
|
6490
|
-
return (0,
|
|
6767
|
+
return (0, import_react47.useContext)(SidebarContext);
|
|
6491
6768
|
}
|
|
6492
6769
|
|
|
6493
6770
|
// src/sidebar/Sidebar.tsx
|
|
@@ -6496,7 +6773,7 @@ var SIDEBAR_COOKIE_NAME_DEFAULT = "sidebar_state";
|
|
|
6496
6773
|
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
6497
6774
|
var SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
6498
6775
|
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
6499
|
-
var SidebarProvider =
|
|
6776
|
+
var SidebarProvider = React24.forwardRef(
|
|
6500
6777
|
({
|
|
6501
6778
|
defaultOpen = true,
|
|
6502
6779
|
open: openProp,
|
|
@@ -6508,10 +6785,10 @@ var SidebarProvider = React23.forwardRef(
|
|
|
6508
6785
|
...props
|
|
6509
6786
|
}, ref) => {
|
|
6510
6787
|
const isMobile = useIsMobile({ breakpoint: 641 });
|
|
6511
|
-
const [openMobile, setOpenMobile] =
|
|
6512
|
-
const [_open, _setOpen] =
|
|
6788
|
+
const [openMobile, setOpenMobile] = React24.useState(false);
|
|
6789
|
+
const [_open, _setOpen] = React24.useState(defaultOpen);
|
|
6513
6790
|
const open = openProp ?? _open;
|
|
6514
|
-
const setOpen =
|
|
6791
|
+
const setOpen = React24.useCallback(
|
|
6515
6792
|
(value) => {
|
|
6516
6793
|
const openState = typeof value === "function" ? value(open) : value;
|
|
6517
6794
|
if (setOpenProp) {
|
|
@@ -6523,10 +6800,10 @@ var SidebarProvider = React23.forwardRef(
|
|
|
6523
6800
|
},
|
|
6524
6801
|
[setOpenProp, open, stateName]
|
|
6525
6802
|
);
|
|
6526
|
-
const toggleSidebar =
|
|
6803
|
+
const toggleSidebar = React24.useCallback(() => {
|
|
6527
6804
|
return isMobile ? setOpenMobile((value) => !value) : setOpen((value) => !value);
|
|
6528
6805
|
}, [isMobile, setOpen]);
|
|
6529
|
-
|
|
6806
|
+
React24.useEffect(() => {
|
|
6530
6807
|
const handleKeyDown = (event) => {
|
|
6531
6808
|
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
6532
6809
|
event.preventDefault();
|
|
@@ -6537,7 +6814,7 @@ var SidebarProvider = React23.forwardRef(
|
|
|
6537
6814
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
6538
6815
|
}, [toggleSidebar]);
|
|
6539
6816
|
const state = open ? "expanded" : "collapsed";
|
|
6540
|
-
const contextValue =
|
|
6817
|
+
const contextValue = React24.useMemo(
|
|
6541
6818
|
() => ({
|
|
6542
6819
|
state,
|
|
6543
6820
|
open,
|
|
@@ -6562,7 +6839,7 @@ var SidebarProvider = React23.forwardRef(
|
|
|
6562
6839
|
}
|
|
6563
6840
|
);
|
|
6564
6841
|
SidebarProvider.displayName = "SidebarProvider";
|
|
6565
|
-
var Sidebar =
|
|
6842
|
+
var Sidebar = React24.forwardRef(
|
|
6566
6843
|
({
|
|
6567
6844
|
side = "left",
|
|
6568
6845
|
variant = "sidebar",
|
|
@@ -6656,7 +6933,7 @@ var Sidebar = React23.forwardRef(
|
|
|
6656
6933
|
}
|
|
6657
6934
|
);
|
|
6658
6935
|
Sidebar.displayName = "Sidebar";
|
|
6659
|
-
var SidebarTrigger =
|
|
6936
|
+
var SidebarTrigger = React24.forwardRef(({ className, onClick, icon, ...props }, ref) => {
|
|
6660
6937
|
const { toggleSidebar, open, isMobile, openMobile } = useSidebar();
|
|
6661
6938
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
|
|
6662
6939
|
Button,
|
|
@@ -6683,7 +6960,7 @@ var SidebarTrigger = React23.forwardRef(({ className, onClick, icon, ...props },
|
|
|
6683
6960
|
);
|
|
6684
6961
|
});
|
|
6685
6962
|
SidebarTrigger.displayName = "SidebarTrigger";
|
|
6686
|
-
var SidebarRail =
|
|
6963
|
+
var SidebarRail = React24.forwardRef(
|
|
6687
6964
|
({ className, ...props }, ref) => {
|
|
6688
6965
|
const { toggleSidebar } = useSidebar();
|
|
6689
6966
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
@@ -6709,7 +6986,7 @@ var SidebarRail = React23.forwardRef(
|
|
|
6709
6986
|
}
|
|
6710
6987
|
);
|
|
6711
6988
|
SidebarRail.displayName = "SidebarRail";
|
|
6712
|
-
var SidebarInset =
|
|
6989
|
+
var SidebarInset = React24.forwardRef(
|
|
6713
6990
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6714
6991
|
"main",
|
|
6715
6992
|
{
|
|
@@ -6724,7 +7001,7 @@ var SidebarInset = React23.forwardRef(
|
|
|
6724
7001
|
)
|
|
6725
7002
|
);
|
|
6726
7003
|
SidebarInset.displayName = "SidebarInset";
|
|
6727
|
-
var SidebarInput =
|
|
7004
|
+
var SidebarInput = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6728
7005
|
Input,
|
|
6729
7006
|
{
|
|
6730
7007
|
ref,
|
|
@@ -6734,7 +7011,7 @@ var SidebarInput = React23.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
6734
7011
|
}
|
|
6735
7012
|
));
|
|
6736
7013
|
SidebarInput.displayName = "SidebarInput";
|
|
6737
|
-
var SidebarHeader =
|
|
7014
|
+
var SidebarHeader = React24.forwardRef(
|
|
6738
7015
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6739
7016
|
"div",
|
|
6740
7017
|
{
|
|
@@ -6746,7 +7023,7 @@ var SidebarHeader = React23.forwardRef(
|
|
|
6746
7023
|
)
|
|
6747
7024
|
);
|
|
6748
7025
|
SidebarHeader.displayName = "SidebarHeader";
|
|
6749
|
-
var SidebarFooter =
|
|
7026
|
+
var SidebarFooter = React24.forwardRef(
|
|
6750
7027
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6751
7028
|
"div",
|
|
6752
7029
|
{
|
|
@@ -6758,7 +7035,7 @@ var SidebarFooter = React23.forwardRef(
|
|
|
6758
7035
|
)
|
|
6759
7036
|
);
|
|
6760
7037
|
SidebarFooter.displayName = "SidebarFooter";
|
|
6761
|
-
var SidebarSeparator =
|
|
7038
|
+
var SidebarSeparator = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6762
7039
|
Separator3,
|
|
6763
7040
|
{
|
|
6764
7041
|
ref,
|
|
@@ -6768,7 +7045,7 @@ var SidebarSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
6768
7045
|
}
|
|
6769
7046
|
));
|
|
6770
7047
|
SidebarSeparator.displayName = "SidebarSeparator";
|
|
6771
|
-
var SidebarContent =
|
|
7048
|
+
var SidebarContent = React24.forwardRef(
|
|
6772
7049
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6773
7050
|
"div",
|
|
6774
7051
|
{
|
|
@@ -6783,7 +7060,7 @@ var SidebarContent = React23.forwardRef(
|
|
|
6783
7060
|
)
|
|
6784
7061
|
);
|
|
6785
7062
|
SidebarContent.displayName = "SidebarContent";
|
|
6786
|
-
var SidebarGroup =
|
|
7063
|
+
var SidebarGroup = React24.forwardRef(
|
|
6787
7064
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6788
7065
|
"div",
|
|
6789
7066
|
{
|
|
@@ -6795,7 +7072,7 @@ var SidebarGroup = React23.forwardRef(
|
|
|
6795
7072
|
)
|
|
6796
7073
|
);
|
|
6797
7074
|
SidebarGroup.displayName = "SidebarGroup";
|
|
6798
|
-
var SidebarGroupLabel =
|
|
7075
|
+
var SidebarGroupLabel = React24.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
6799
7076
|
const Comp = asChild ? import_react_slot4.Slot : "div";
|
|
6800
7077
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6801
7078
|
Comp,
|
|
@@ -6812,7 +7089,7 @@ var SidebarGroupLabel = React23.forwardRef(({ className, asChild = false, ...pro
|
|
|
6812
7089
|
);
|
|
6813
7090
|
});
|
|
6814
7091
|
SidebarGroupLabel.displayName = "SidebarGroupLabel";
|
|
6815
|
-
var SidebarGroupAction =
|
|
7092
|
+
var SidebarGroupAction = React24.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
6816
7093
|
const Comp = asChild ? import_react_slot4.Slot : "button";
|
|
6817
7094
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6818
7095
|
Comp,
|
|
@@ -6828,7 +7105,7 @@ var SidebarGroupAction = React23.forwardRef(({ className, asChild = false, ...pr
|
|
|
6828
7105
|
);
|
|
6829
7106
|
});
|
|
6830
7107
|
SidebarGroupAction.displayName = "SidebarGroupAction";
|
|
6831
|
-
var SidebarGroupContent =
|
|
7108
|
+
var SidebarGroupContent = React24.forwardRef(
|
|
6832
7109
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6833
7110
|
"div",
|
|
6834
7111
|
{
|
|
@@ -6840,7 +7117,7 @@ var SidebarGroupContent = React23.forwardRef(
|
|
|
6840
7117
|
)
|
|
6841
7118
|
);
|
|
6842
7119
|
SidebarGroupContent.displayName = "SidebarGroupContent";
|
|
6843
|
-
var SidebarMenu =
|
|
7120
|
+
var SidebarMenu = React24.forwardRef(
|
|
6844
7121
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6845
7122
|
"ul",
|
|
6846
7123
|
{
|
|
@@ -6852,7 +7129,7 @@ var SidebarMenu = React23.forwardRef(
|
|
|
6852
7129
|
)
|
|
6853
7130
|
);
|
|
6854
7131
|
SidebarMenu.displayName = "SidebarMenu";
|
|
6855
|
-
var SidebarMenuItem =
|
|
7132
|
+
var SidebarMenuItem = React24.forwardRef(
|
|
6856
7133
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6857
7134
|
"li",
|
|
6858
7135
|
{
|
|
@@ -6884,7 +7161,7 @@ var sidebarMenuButtonVariants = (0, import_class_variance_authority11.cva)(
|
|
|
6884
7161
|
}
|
|
6885
7162
|
}
|
|
6886
7163
|
);
|
|
6887
|
-
var SidebarMenuButton =
|
|
7164
|
+
var SidebarMenuButton = React24.forwardRef(
|
|
6888
7165
|
({
|
|
6889
7166
|
asChild = false,
|
|
6890
7167
|
isActive = false,
|
|
@@ -6930,7 +7207,7 @@ var SidebarMenuButton = React23.forwardRef(
|
|
|
6930
7207
|
}
|
|
6931
7208
|
);
|
|
6932
7209
|
SidebarMenuButton.displayName = "SidebarMenuButton";
|
|
6933
|
-
var SidebarMenuAction =
|
|
7210
|
+
var SidebarMenuAction = React24.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
|
6934
7211
|
const Comp = asChild ? import_react_slot4.Slot : "button";
|
|
6935
7212
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6936
7213
|
Comp,
|
|
@@ -6947,7 +7224,7 @@ var SidebarMenuAction = React23.forwardRef(({ className, asChild = false, showOn
|
|
|
6947
7224
|
);
|
|
6948
7225
|
});
|
|
6949
7226
|
SidebarMenuAction.displayName = "SidebarMenuAction";
|
|
6950
|
-
var SidebarMenuBadge =
|
|
7227
|
+
var SidebarMenuBadge = React24.forwardRef(
|
|
6951
7228
|
({ className, ...props }, ref) => {
|
|
6952
7229
|
const { open, isMobile, openMobile } = useSidebar();
|
|
6953
7230
|
const isOpen = isMobile ? openMobile : open;
|
|
@@ -6967,8 +7244,8 @@ var SidebarMenuBadge = React23.forwardRef(
|
|
|
6967
7244
|
}
|
|
6968
7245
|
);
|
|
6969
7246
|
SidebarMenuBadge.displayName = "SidebarMenuBadge";
|
|
6970
|
-
var SidebarMenuSkeleton =
|
|
6971
|
-
const width =
|
|
7247
|
+
var SidebarMenuSkeleton = React24.forwardRef(({ className, showIcon = false, ...props }, ref) => {
|
|
7248
|
+
const width = React24.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
|
|
6972
7249
|
return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
|
|
6973
7250
|
"div",
|
|
6974
7251
|
{
|
|
@@ -6991,7 +7268,7 @@ var SidebarMenuSkeleton = React23.forwardRef(({ className, showIcon = false, ...
|
|
|
6991
7268
|
);
|
|
6992
7269
|
});
|
|
6993
7270
|
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
|
|
6994
|
-
var SidebarMenuSub =
|
|
7271
|
+
var SidebarMenuSub = React24.forwardRef(
|
|
6995
7272
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
6996
7273
|
"ul",
|
|
6997
7274
|
{
|
|
@@ -7006,7 +7283,7 @@ var SidebarMenuSub = React23.forwardRef(
|
|
|
7006
7283
|
)
|
|
7007
7284
|
);
|
|
7008
7285
|
SidebarMenuSub.displayName = "SidebarMenuSub";
|
|
7009
|
-
var SidebarMenuSubItem =
|
|
7286
|
+
var SidebarMenuSubItem = React24.forwardRef(
|
|
7010
7287
|
({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("li", { ref, ...props })
|
|
7011
7288
|
);
|
|
7012
7289
|
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
|
|
@@ -7030,7 +7307,7 @@ var sidebarMenuSubButtonVariants = (0, import_class_variance_authority11.cva)(
|
|
|
7030
7307
|
}
|
|
7031
7308
|
}
|
|
7032
7309
|
);
|
|
7033
|
-
var SidebarMenuSubButton =
|
|
7310
|
+
var SidebarMenuSubButton = React24.forwardRef(
|
|
7034
7311
|
({
|
|
7035
7312
|
asChild = false,
|
|
7036
7313
|
isActive,
|
|
@@ -7060,9 +7337,9 @@ var VALUE_PART = 1;
|
|
|
7060
7337
|
var getSidebarState = (stateName) => document.cookie.split("; ").find((row) => row.startsWith(`${stateName}=`))?.split("=")[VALUE_PART] === "true";
|
|
7061
7338
|
|
|
7062
7339
|
// src/circular-loader/CircularLoader.tsx
|
|
7063
|
-
var
|
|
7340
|
+
var import_react48 = __toESM(require("react"), 1);
|
|
7064
7341
|
var import_jsx_runtime97 = require("react/jsx-runtime");
|
|
7065
|
-
var CircularLoader =
|
|
7342
|
+
var CircularLoader = import_react48.default.memo(
|
|
7066
7343
|
({ visible = true, height, width, position, label, className }) => {
|
|
7067
7344
|
if (!visible) return null;
|
|
7068
7345
|
return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
|
|
@@ -7156,10 +7433,10 @@ var CircularLoader = import_react37.default.memo(
|
|
|
7156
7433
|
CircularLoader.displayName = "CircularLoader";
|
|
7157
7434
|
|
|
7158
7435
|
// src/small-grid-single-item/SmallGridSingleItem.tsx
|
|
7159
|
-
var
|
|
7436
|
+
var import_react49 = require("react");
|
|
7160
7437
|
var import_lucide_react34 = require("lucide-react");
|
|
7161
7438
|
var import_jsx_runtime98 = require("react/jsx-runtime");
|
|
7162
|
-
var SmallGridSingleItem = (0,
|
|
7439
|
+
var SmallGridSingleItem = (0, import_react49.memo)(
|
|
7163
7440
|
({
|
|
7164
7441
|
title,
|
|
7165
7442
|
subtitle,
|
|
@@ -7280,7 +7557,7 @@ function SortingAction({
|
|
|
7280
7557
|
}
|
|
7281
7558
|
|
|
7282
7559
|
// src/status-button/StatusButton.tsx
|
|
7283
|
-
var
|
|
7560
|
+
var import_react50 = require("react");
|
|
7284
7561
|
var import_react_i18next20 = require("react-i18next");
|
|
7285
7562
|
var import_lucide_react36 = require("lucide-react");
|
|
7286
7563
|
var import_jsx_runtime100 = require("react/jsx-runtime");
|
|
@@ -7298,7 +7575,7 @@ function StatusButton({
|
|
|
7298
7575
|
...props
|
|
7299
7576
|
}) {
|
|
7300
7577
|
const { t } = (0, import_react_i18next20.useTranslation)();
|
|
7301
|
-
const configMap = (0,
|
|
7578
|
+
const configMap = (0, import_react50.useMemo)(() => {
|
|
7302
7579
|
const defaultLoadingConfig = {
|
|
7303
7580
|
text: loadingText ?? `${t("saving")}...`,
|
|
7304
7581
|
icon: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_lucide_react36.Loader2, { className: "h-4 w-4 animate-spin" }),
|
|
@@ -7423,9 +7700,9 @@ function Stepper({
|
|
|
7423
7700
|
}
|
|
7424
7701
|
|
|
7425
7702
|
// src/switch-blocks/SwitchBlocks.tsx
|
|
7426
|
-
var
|
|
7703
|
+
var import_react51 = require("react");
|
|
7427
7704
|
var import_jsx_runtime103 = require("react/jsx-runtime");
|
|
7428
|
-
var SwitchBlocksInternal = (0,
|
|
7705
|
+
var SwitchBlocksInternal = (0, import_react51.forwardRef)(
|
|
7429
7706
|
({ options, value, onChange, disabled, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
|
|
7430
7707
|
"div",
|
|
7431
7708
|
{
|
|
@@ -7449,12 +7726,12 @@ var SwitchBlocksInternal = (0, import_react40.forwardRef)(
|
|
|
7449
7726
|
)
|
|
7450
7727
|
);
|
|
7451
7728
|
SwitchBlocksInternal.displayName = "SwitchBlocks";
|
|
7452
|
-
var SwitchBlocks = (0,
|
|
7729
|
+
var SwitchBlocks = (0, import_react51.memo)(SwitchBlocksInternal);
|
|
7453
7730
|
|
|
7454
7731
|
// src/switch-group/SwitchGroup.tsx
|
|
7455
|
-
var
|
|
7732
|
+
var React26 = __toESM(require("react"), 1);
|
|
7456
7733
|
var import_jsx_runtime104 = require("react/jsx-runtime");
|
|
7457
|
-
var SwitchGroup =
|
|
7734
|
+
var SwitchGroup = React26.forwardRef(
|
|
7458
7735
|
({ options, value = [], onChange, disabled = false, className, error, ...props }, ref) => {
|
|
7459
7736
|
const handleOptionChange = (optionValue, checked) => {
|
|
7460
7737
|
if (!onChange) return;
|
|
@@ -7509,7 +7786,7 @@ var SwitchGroup = React25.forwardRef(
|
|
|
7509
7786
|
SwitchGroup.displayName = "SwitchGroup";
|
|
7510
7787
|
|
|
7511
7788
|
// src/tabs/Tabs.tsx
|
|
7512
|
-
var
|
|
7789
|
+
var import_react52 = require("react");
|
|
7513
7790
|
var TabsPrimitive2 = __toESM(require("@radix-ui/react-tabs"), 1);
|
|
7514
7791
|
var import_class_variance_authority12 = require("class-variance-authority");
|
|
7515
7792
|
var import_jsx_runtime105 = require("react/jsx-runtime");
|
|
@@ -7525,7 +7802,7 @@ var tabsListVariants = (0, import_class_variance_authority12.cva)("inline-flex i
|
|
|
7525
7802
|
variant: "default"
|
|
7526
7803
|
}
|
|
7527
7804
|
});
|
|
7528
|
-
var TabsList = (0,
|
|
7805
|
+
var TabsList = (0, import_react52.forwardRef)(
|
|
7529
7806
|
({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
|
|
7530
7807
|
TabsPrimitive2.List,
|
|
7531
7808
|
{
|
|
@@ -7550,7 +7827,7 @@ var tabsTriggerVariants = (0, import_class_variance_authority12.cva)(
|
|
|
7550
7827
|
}
|
|
7551
7828
|
}
|
|
7552
7829
|
);
|
|
7553
|
-
var TabsTrigger = (0,
|
|
7830
|
+
var TabsTrigger = (0, import_react52.forwardRef)(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
|
|
7554
7831
|
TabsPrimitive2.Trigger,
|
|
7555
7832
|
{
|
|
7556
7833
|
ref,
|
|
@@ -7559,7 +7836,7 @@ var TabsTrigger = (0, import_react41.forwardRef)(({ className, variant, ...props
|
|
|
7559
7836
|
}
|
|
7560
7837
|
));
|
|
7561
7838
|
TabsTrigger.displayName = TabsPrimitive2.Trigger.displayName;
|
|
7562
|
-
var TabsContent = (0,
|
|
7839
|
+
var TabsContent = (0, import_react52.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(TabsPrimitive2.Content, { ref, className, tabIndex: -1, ...props }));
|
|
7563
7840
|
TabsContent.displayName = TabsPrimitive2.Content.displayName;
|
|
7564
7841
|
|
|
7565
7842
|
// src/tabbed-section/TabbedSection.tsx
|
|
@@ -7700,11 +7977,11 @@ var TASK_VARIANTS = {
|
|
|
7700
7977
|
var import_sonner2 = require("sonner");
|
|
7701
7978
|
|
|
7702
7979
|
// src/toaster/useUpdateToast.ts
|
|
7703
|
-
var
|
|
7980
|
+
var import_react53 = require("react");
|
|
7704
7981
|
var import_sonner = require("sonner");
|
|
7705
7982
|
function useUpdateToast({ id }) {
|
|
7706
|
-
const toastIdRef = (0,
|
|
7707
|
-
const getToastOptions = (0,
|
|
7983
|
+
const toastIdRef = (0, import_react53.useRef)("");
|
|
7984
|
+
const getToastOptions = (0, import_react53.useCallback)(
|
|
7708
7985
|
(options) => ({
|
|
7709
7986
|
id: toastIdRef.current,
|
|
7710
7987
|
dismissible: false,
|
|
@@ -7736,7 +8013,7 @@ function useUpdateToast({ id }) {
|
|
|
7736
8013
|
}
|
|
7737
8014
|
|
|
7738
8015
|
// src/toggle-group/ToggleGroup.tsx
|
|
7739
|
-
var
|
|
8016
|
+
var React27 = __toESM(require("react"), 1);
|
|
7740
8017
|
var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
|
|
7741
8018
|
|
|
7742
8019
|
// src/toggle-group/style.ts
|
|
@@ -7770,12 +8047,12 @@ var toggleVariants = (0, import_class_variance_authority13.cva)(
|
|
|
7770
8047
|
|
|
7771
8048
|
// src/toggle-group/ToggleGroup.tsx
|
|
7772
8049
|
var import_jsx_runtime109 = require("react/jsx-runtime");
|
|
7773
|
-
var ToggleGroupContext =
|
|
8050
|
+
var ToggleGroupContext = React27.createContext({
|
|
7774
8051
|
size: "default",
|
|
7775
8052
|
variant: "default",
|
|
7776
8053
|
theme: "default"
|
|
7777
8054
|
});
|
|
7778
|
-
var ToggleGroup =
|
|
8055
|
+
var ToggleGroup = React27.forwardRef(({ className, variant, size, theme, children, ...props }, ref) => {
|
|
7779
8056
|
const isTabVariant = variant === "tab";
|
|
7780
8057
|
return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
|
|
7781
8058
|
ToggleGroupPrimitive.Root,
|
|
@@ -7792,8 +8069,8 @@ var ToggleGroup = React26.forwardRef(({ className, variant, size, theme, childre
|
|
|
7792
8069
|
);
|
|
7793
8070
|
});
|
|
7794
8071
|
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
|
7795
|
-
var ToggleGroupItem =
|
|
7796
|
-
const context =
|
|
8072
|
+
var ToggleGroupItem = React27.forwardRef(({ className, children, variant, size, theme, ...props }, ref) => {
|
|
8073
|
+
const context = React27.useContext(ToggleGroupContext);
|
|
7797
8074
|
const resolvedVariant = context.variant || variant;
|
|
7798
8075
|
const isTabVariant = resolvedVariant === "tab";
|
|
7799
8076
|
return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
|
|
@@ -7819,7 +8096,7 @@ var ToggleGroupItem = React26.forwardRef(({ className, children, variant, size,
|
|
|
7819
8096
|
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
7820
8097
|
|
|
7821
8098
|
// src/toggle-group/Toggles.tsx
|
|
7822
|
-
var
|
|
8099
|
+
var import_react54 = require("react");
|
|
7823
8100
|
var import_jsx_runtime110 = require("react/jsx-runtime");
|
|
7824
8101
|
var getValueArray2 = (value) => {
|
|
7825
8102
|
if (value) {
|
|
@@ -7894,7 +8171,7 @@ function TogglesInternal({
|
|
|
7894
8171
|
}
|
|
7895
8172
|
};
|
|
7896
8173
|
const isAnyActive = getValueArray2(value).length > 0;
|
|
7897
|
-
(0,
|
|
8174
|
+
(0, import_react54.useEffect)(() => {
|
|
7898
8175
|
onAnySelectorActive?.(isAnyActive);
|
|
7899
8176
|
}, [isAnyActive, onAnySelectorActive]);
|
|
7900
8177
|
const currentValue = getValueArray2(value).map((item) => String(item));
|
|
@@ -7925,10 +8202,10 @@ function TogglesInternal({
|
|
|
7925
8202
|
}) })
|
|
7926
8203
|
] });
|
|
7927
8204
|
}
|
|
7928
|
-
var Toggles = (0,
|
|
8205
|
+
var Toggles = (0, import_react54.forwardRef)(TogglesInternal);
|
|
7929
8206
|
|
|
7930
8207
|
// src/text-field/TextField.tsx
|
|
7931
|
-
var
|
|
8208
|
+
var React28 = __toESM(require("react"), 1);
|
|
7932
8209
|
var LabelPrimitive2 = __toESM(require("@radix-ui/react-label"), 1);
|
|
7933
8210
|
var import_class_variance_authority14 = require("class-variance-authority");
|
|
7934
8211
|
var import_react_i18next21 = require("react-i18next");
|
|
@@ -8022,7 +8299,7 @@ var floatingLabelClasses = [
|
|
|
8022
8299
|
"peer-focus:to-[var(--text-field-bg-filled)]",
|
|
8023
8300
|
"peer-focus:to-50%"
|
|
8024
8301
|
];
|
|
8025
|
-
var TextField =
|
|
8302
|
+
var TextField = React28.forwardRef(
|
|
8026
8303
|
({
|
|
8027
8304
|
className,
|
|
8028
8305
|
wrapperClassName,
|
|
@@ -8041,7 +8318,7 @@ var TextField = React27.forwardRef(
|
|
|
8041
8318
|
}, ref) => {
|
|
8042
8319
|
const { t } = (0, import_react_i18next21.useTranslation)();
|
|
8043
8320
|
const hasError = Boolean(error);
|
|
8044
|
-
const autoId =
|
|
8321
|
+
const autoId = React28.useId();
|
|
8045
8322
|
const inputId = props.id || autoId;
|
|
8046
8323
|
const inputClasses = cn(
|
|
8047
8324
|
inputVariants({ variant, error: hasError, readOnly: Boolean(readOnly) }),
|
|
@@ -8136,16 +8413,16 @@ var TextField = React27.forwardRef(
|
|
|
8136
8413
|
TextField.displayName = "TextField";
|
|
8137
8414
|
|
|
8138
8415
|
// src/textarea/Textarea.tsx
|
|
8139
|
-
var
|
|
8416
|
+
var import_react55 = require("react");
|
|
8140
8417
|
|
|
8141
8418
|
// src/textarea/styles.module.css
|
|
8142
8419
|
var styles_default9 = {};
|
|
8143
8420
|
|
|
8144
8421
|
// src/textarea/Textarea.tsx
|
|
8145
8422
|
var import_jsx_runtime115 = require("react/jsx-runtime");
|
|
8146
|
-
var Textarea = (0,
|
|
8423
|
+
var Textarea = (0, import_react55.forwardRef)(
|
|
8147
8424
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
8148
|
-
const inputId = (0,
|
|
8425
|
+
const inputId = (0, import_react55.useId)();
|
|
8149
8426
|
return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: cn(styles_default9.container, className), children: [
|
|
8150
8427
|
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
|
|
8151
8428
|
"textarea",
|
|
@@ -8274,11 +8551,11 @@ function WideButton({ className, disabled, ...props }) {
|
|
|
8274
8551
|
}
|
|
8275
8552
|
|
|
8276
8553
|
// src/datepicker/DatePicker.tsx
|
|
8277
|
-
var
|
|
8554
|
+
var React32 = __toESM(require("react"), 1);
|
|
8278
8555
|
var import_lucide_react42 = require("lucide-react");
|
|
8279
8556
|
|
|
8280
8557
|
// src/drawer/Drawer.tsx
|
|
8281
|
-
var
|
|
8558
|
+
var React29 = __toESM(require("react"), 1);
|
|
8282
8559
|
var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
8283
8560
|
var import_react_draggable = __toESM(require("react-draggable"), 1);
|
|
8284
8561
|
var import_jsx_runtime119 = require("react/jsx-runtime");
|
|
@@ -8296,7 +8573,7 @@ function DrawerPortal({ ...props }) {
|
|
|
8296
8573
|
function DrawerClose({ ...props }) {
|
|
8297
8574
|
return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(DialogPrimitive2.Close, { "data-slot": "drawer-close", ...props });
|
|
8298
8575
|
}
|
|
8299
|
-
var DrawerOverlay =
|
|
8576
|
+
var DrawerOverlay = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
8300
8577
|
DialogPrimitive2.Overlay,
|
|
8301
8578
|
{
|
|
8302
8579
|
ref,
|
|
@@ -8310,7 +8587,7 @@ var DrawerOverlay = React28.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
8310
8587
|
));
|
|
8311
8588
|
DrawerOverlay.displayName = DialogPrimitive2.Overlay.displayName;
|
|
8312
8589
|
var DrawerOverlayClasses = "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0";
|
|
8313
|
-
var DrawerContent =
|
|
8590
|
+
var DrawerContent = React29.forwardRef(
|
|
8314
8591
|
({
|
|
8315
8592
|
className,
|
|
8316
8593
|
children,
|
|
@@ -8322,19 +8599,19 @@ var DrawerContent = React28.forwardRef(
|
|
|
8322
8599
|
...props
|
|
8323
8600
|
}, ref) => {
|
|
8324
8601
|
const finalContainer = container || getCustomContainer() || void 0;
|
|
8325
|
-
const nodeRef =
|
|
8326
|
-
const [dragOffsetY, setDragOffsetY] =
|
|
8602
|
+
const nodeRef = React29.useRef(null);
|
|
8603
|
+
const [dragOffsetY, setDragOffsetY] = React29.useState(0);
|
|
8327
8604
|
const overlayOpacity = Math.max(
|
|
8328
8605
|
DRAWER_MIN_OVERLAY_OPACITY,
|
|
8329
8606
|
1 - dragOffsetY / (DRAWER_CLOSE_THRESHOLD * 2)
|
|
8330
8607
|
);
|
|
8331
|
-
const handleDrag =
|
|
8608
|
+
const handleDrag = React29.useCallback(
|
|
8332
8609
|
(_event, data) => {
|
|
8333
8610
|
setDragOffsetY(Math.max(0, data.y));
|
|
8334
8611
|
},
|
|
8335
8612
|
[]
|
|
8336
8613
|
);
|
|
8337
|
-
const handleStop =
|
|
8614
|
+
const handleStop = React29.useCallback(
|
|
8338
8615
|
(_event, data) => {
|
|
8339
8616
|
if (data.y > DRAWER_CLOSE_THRESHOLD) {
|
|
8340
8617
|
setDragOffsetY(0);
|
|
@@ -8425,7 +8702,7 @@ var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
|
|
|
8425
8702
|
DrawerHeader.displayName = "DrawerHeader";
|
|
8426
8703
|
var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { className: cn("flex flex-col gap-2 p-5", className), ...props });
|
|
8427
8704
|
DrawerFooter.displayName = "DrawerFooter";
|
|
8428
|
-
var DrawerTitle =
|
|
8705
|
+
var DrawerTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
8429
8706
|
DialogPrimitive2.Title,
|
|
8430
8707
|
{
|
|
8431
8708
|
ref,
|
|
@@ -8435,7 +8712,7 @@ var DrawerTitle = React28.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
8435
8712
|
}
|
|
8436
8713
|
));
|
|
8437
8714
|
DrawerTitle.displayName = DialogPrimitive2.Title.displayName;
|
|
8438
|
-
var DrawerDescription =
|
|
8715
|
+
var DrawerDescription = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
8439
8716
|
DialogPrimitive2.Description,
|
|
8440
8717
|
{
|
|
8441
8718
|
ref,
|
|
@@ -8447,7 +8724,7 @@ var DrawerDescription = React28.forwardRef(({ className, ...props }, ref) => /*
|
|
|
8447
8724
|
DrawerDescription.displayName = DialogPrimitive2.Description.displayName;
|
|
8448
8725
|
|
|
8449
8726
|
// src/datepicker/useDatePickerWheel.ts
|
|
8450
|
-
var
|
|
8727
|
+
var React30 = __toESM(require("react"), 1);
|
|
8451
8728
|
|
|
8452
8729
|
// src/datepicker/datePicker.utils.ts
|
|
8453
8730
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -8598,21 +8875,21 @@ function useDatePickerWheel({
|
|
|
8598
8875
|
minDate,
|
|
8599
8876
|
maxDate
|
|
8600
8877
|
}) {
|
|
8601
|
-
const years =
|
|
8602
|
-
const [draftDate, setDraftDate] =
|
|
8878
|
+
const years = React30.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
8879
|
+
const [draftDate, setDraftDate] = React30.useState(
|
|
8603
8880
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
8604
8881
|
);
|
|
8605
8882
|
const draftYear = draftDate.getFullYear();
|
|
8606
8883
|
const draftMonth = draftDate.getMonth();
|
|
8607
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
8608
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
8609
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
8610
|
-
const monthListRef =
|
|
8611
|
-
const dayListRef =
|
|
8612
|
-
const yearListRef =
|
|
8613
|
-
const settleTimeoutsRef =
|
|
8614
|
-
const animationFramesRef =
|
|
8615
|
-
const columnRefs =
|
|
8884
|
+
const [monthScrollTop, setMonthScrollTop] = React30.useState(0);
|
|
8885
|
+
const [dayScrollTop, setDayScrollTop] = React30.useState(0);
|
|
8886
|
+
const [yearScrollTop, setYearScrollTop] = React30.useState(0);
|
|
8887
|
+
const monthListRef = React30.useRef(null);
|
|
8888
|
+
const dayListRef = React30.useRef(null);
|
|
8889
|
+
const yearListRef = React30.useRef(null);
|
|
8890
|
+
const settleTimeoutsRef = React30.useRef({});
|
|
8891
|
+
const animationFramesRef = React30.useRef({});
|
|
8892
|
+
const columnRefs = React30.useMemo(
|
|
8616
8893
|
() => ({
|
|
8617
8894
|
month: monthListRef,
|
|
8618
8895
|
day: dayListRef,
|
|
@@ -8620,7 +8897,7 @@ function useDatePickerWheel({
|
|
|
8620
8897
|
}),
|
|
8621
8898
|
[]
|
|
8622
8899
|
);
|
|
8623
|
-
const setColumnScrollTop =
|
|
8900
|
+
const setColumnScrollTop = React30.useCallback(
|
|
8624
8901
|
(column, nextScrollTop) => {
|
|
8625
8902
|
if (column === "month") {
|
|
8626
8903
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -8634,19 +8911,19 @@ function useDatePickerWheel({
|
|
|
8634
8911
|
},
|
|
8635
8912
|
[]
|
|
8636
8913
|
);
|
|
8637
|
-
const clearSettleTimeout =
|
|
8914
|
+
const clearSettleTimeout = React30.useCallback((column) => {
|
|
8638
8915
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
8639
8916
|
if (timeoutId === void 0) return;
|
|
8640
8917
|
window.clearTimeout(timeoutId);
|
|
8641
8918
|
delete settleTimeoutsRef.current[column];
|
|
8642
8919
|
}, []);
|
|
8643
|
-
const clearAnimationFrame =
|
|
8920
|
+
const clearAnimationFrame = React30.useCallback((column) => {
|
|
8644
8921
|
const frameId = animationFramesRef.current[column];
|
|
8645
8922
|
if (frameId === void 0) return;
|
|
8646
8923
|
window.cancelAnimationFrame(frameId);
|
|
8647
8924
|
delete animationFramesRef.current[column];
|
|
8648
8925
|
}, []);
|
|
8649
|
-
|
|
8926
|
+
React30.useEffect(
|
|
8650
8927
|
() => () => {
|
|
8651
8928
|
["month", "day", "year"].forEach((column) => {
|
|
8652
8929
|
clearSettleTimeout(column);
|
|
@@ -8655,22 +8932,22 @@ function useDatePickerWheel({
|
|
|
8655
8932
|
},
|
|
8656
8933
|
[clearAnimationFrame, clearSettleTimeout]
|
|
8657
8934
|
);
|
|
8658
|
-
|
|
8935
|
+
React30.useEffect(() => {
|
|
8659
8936
|
if (isOpen) return;
|
|
8660
8937
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
8661
8938
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
8662
|
-
const months =
|
|
8939
|
+
const months = React30.useMemo(
|
|
8663
8940
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
8664
8941
|
[draftYear, maxDate, minDate]
|
|
8665
8942
|
);
|
|
8666
|
-
const days =
|
|
8943
|
+
const days = React30.useMemo(
|
|
8667
8944
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
8668
8945
|
[draftMonth, draftYear, maxDate, minDate]
|
|
8669
8946
|
);
|
|
8670
8947
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
8671
8948
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
8672
8949
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
8673
|
-
const syncScrollPositions =
|
|
8950
|
+
const syncScrollPositions = React30.useCallback(
|
|
8674
8951
|
(nextDate, behavior = "auto") => {
|
|
8675
8952
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
8676
8953
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -8694,7 +8971,7 @@ function useDatePickerWheel({
|
|
|
8694
8971
|
},
|
|
8695
8972
|
[maxDate, minDate, years]
|
|
8696
8973
|
);
|
|
8697
|
-
|
|
8974
|
+
React30.useLayoutEffect(() => {
|
|
8698
8975
|
if (!isOpen) return;
|
|
8699
8976
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
8700
8977
|
setDraftDate(nextDate);
|
|
@@ -8705,7 +8982,7 @@ function useDatePickerWheel({
|
|
|
8705
8982
|
window.cancelAnimationFrame(frameId);
|
|
8706
8983
|
};
|
|
8707
8984
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
8708
|
-
const updateDraftDate =
|
|
8985
|
+
const updateDraftDate = React30.useCallback(
|
|
8709
8986
|
(column, targetIndex, behavior = "smooth") => {
|
|
8710
8987
|
const currentDate = stripTime(draftDate);
|
|
8711
8988
|
const currentYear = currentDate.getFullYear();
|
|
@@ -8750,7 +9027,7 @@ function useDatePickerWheel({
|
|
|
8750
9027
|
},
|
|
8751
9028
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
8752
9029
|
);
|
|
8753
|
-
const settleColumnScroll =
|
|
9030
|
+
const settleColumnScroll = React30.useCallback(
|
|
8754
9031
|
(column) => {
|
|
8755
9032
|
const list = columnRefs[column].current;
|
|
8756
9033
|
if (!list) return;
|
|
@@ -8763,7 +9040,7 @@ function useDatePickerWheel({
|
|
|
8763
9040
|
},
|
|
8764
9041
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
8765
9042
|
);
|
|
8766
|
-
const scheduleScrollSettle =
|
|
9043
|
+
const scheduleScrollSettle = React30.useCallback(
|
|
8767
9044
|
(column) => {
|
|
8768
9045
|
clearSettleTimeout(column);
|
|
8769
9046
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -8772,7 +9049,7 @@ function useDatePickerWheel({
|
|
|
8772
9049
|
},
|
|
8773
9050
|
[clearSettleTimeout, settleColumnScroll]
|
|
8774
9051
|
);
|
|
8775
|
-
const handleColumnScroll =
|
|
9052
|
+
const handleColumnScroll = React30.useCallback(
|
|
8776
9053
|
(column) => {
|
|
8777
9054
|
const list = columnRefs[column].current;
|
|
8778
9055
|
if (!list) return;
|
|
@@ -8786,13 +9063,13 @@ function useDatePickerWheel({
|
|
|
8786
9063
|
},
|
|
8787
9064
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
8788
9065
|
);
|
|
8789
|
-
const handleOptionSelect =
|
|
9066
|
+
const handleOptionSelect = React30.useCallback(
|
|
8790
9067
|
(column, targetIndex) => {
|
|
8791
9068
|
updateDraftDate(column, targetIndex, "smooth");
|
|
8792
9069
|
},
|
|
8793
9070
|
[updateDraftDate]
|
|
8794
9071
|
);
|
|
8795
|
-
const focusAdjacentColumn =
|
|
9072
|
+
const focusAdjacentColumn = React30.useCallback(
|
|
8796
9073
|
(column, direction) => {
|
|
8797
9074
|
const order = ["month", "day", "year"];
|
|
8798
9075
|
const currentIndex = order.indexOf(column);
|
|
@@ -8802,7 +9079,7 @@ function useDatePickerWheel({
|
|
|
8802
9079
|
},
|
|
8803
9080
|
[columnRefs]
|
|
8804
9081
|
);
|
|
8805
|
-
const handleColumnKeyDown =
|
|
9082
|
+
const handleColumnKeyDown = React30.useCallback(
|
|
8806
9083
|
(column, event) => {
|
|
8807
9084
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
8808
9085
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -9090,28 +9367,6 @@ function DatePickerContent({
|
|
|
9090
9367
|
) });
|
|
9091
9368
|
}
|
|
9092
9369
|
|
|
9093
|
-
// src/lib/use-screen-resize.ts
|
|
9094
|
-
var import_react45 = require("react");
|
|
9095
|
-
var eventName = "resize";
|
|
9096
|
-
function useScreenResize(maxWidth) {
|
|
9097
|
-
const [isInitialized, setIsInitialized] = (0, import_react45.useState)(false);
|
|
9098
|
-
const [isMatch, setIsMatch] = (0, import_react45.useState)(false);
|
|
9099
|
-
const handleResizeEvent = (0, import_react45.useCallback)(() => {
|
|
9100
|
-
const adjustedMaxWidth = `${parseInt(maxWidth, 10) - 1}px`;
|
|
9101
|
-
const media = getWindow().matchMedia(`(max-width: ${adjustedMaxWidth})`);
|
|
9102
|
-
setIsInitialized(true);
|
|
9103
|
-
setIsMatch(!!media?.matches);
|
|
9104
|
-
}, [maxWidth]);
|
|
9105
|
-
(0, import_react45.useLayoutEffect)(() => {
|
|
9106
|
-
handleResizeEvent();
|
|
9107
|
-
getWindow().addEventListener(eventName, handleResizeEvent);
|
|
9108
|
-
return () => {
|
|
9109
|
-
getWindow().removeEventListener(eventName, handleResizeEvent);
|
|
9110
|
-
};
|
|
9111
|
-
}, [handleResizeEvent]);
|
|
9112
|
-
return { isMatch, isInitialized };
|
|
9113
|
-
}
|
|
9114
|
-
|
|
9115
9370
|
// src/lib/device.ts
|
|
9116
9371
|
var DEVICE = {
|
|
9117
9372
|
mobileS: "320px",
|
|
@@ -9128,7 +9383,7 @@ var DEVICE = {
|
|
|
9128
9383
|
};
|
|
9129
9384
|
|
|
9130
9385
|
// src/field-trigger/FieldTrigger.tsx
|
|
9131
|
-
var
|
|
9386
|
+
var React31 = __toESM(require("react"), 1);
|
|
9132
9387
|
var import_lucide_react41 = require("lucide-react");
|
|
9133
9388
|
var import_react_i18next22 = require("react-i18next");
|
|
9134
9389
|
|
|
@@ -9172,7 +9427,7 @@ function FieldErrorMessage({
|
|
|
9172
9427
|
|
|
9173
9428
|
// src/field-trigger/FieldTrigger.tsx
|
|
9174
9429
|
var import_jsx_runtime123 = require("react/jsx-runtime");
|
|
9175
|
-
var FieldTrigger =
|
|
9430
|
+
var FieldTrigger = React31.forwardRef(
|
|
9176
9431
|
({
|
|
9177
9432
|
as = "button",
|
|
9178
9433
|
variant = "airbnb",
|
|
@@ -9339,7 +9594,7 @@ FieldTrigger.displayName = "FieldTrigger";
|
|
|
9339
9594
|
// src/datepicker/DatePicker.tsx
|
|
9340
9595
|
var import_jsx_runtime124 = require("react/jsx-runtime");
|
|
9341
9596
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
9342
|
-
var DatePicker =
|
|
9597
|
+
var DatePicker = React32.forwardRef(
|
|
9343
9598
|
({
|
|
9344
9599
|
variant = "default",
|
|
9345
9600
|
label,
|
|
@@ -9365,24 +9620,24 @@ var DatePicker = React31.forwardRef(
|
|
|
9365
9620
|
formatValue = formatDateValue
|
|
9366
9621
|
}, ref) => {
|
|
9367
9622
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
9368
|
-
const [isOpen, setIsOpen] =
|
|
9369
|
-
const triggerId =
|
|
9370
|
-
const pickerId =
|
|
9371
|
-
const labelId =
|
|
9372
|
-
const valueId =
|
|
9373
|
-
const helperTextId =
|
|
9374
|
-
const errorId =
|
|
9375
|
-
const internalRef =
|
|
9623
|
+
const [isOpen, setIsOpen] = React32.useState(false);
|
|
9624
|
+
const triggerId = React32.useId();
|
|
9625
|
+
const pickerId = React32.useId();
|
|
9626
|
+
const labelId = React32.useId();
|
|
9627
|
+
const valueId = React32.useId();
|
|
9628
|
+
const helperTextId = React32.useId();
|
|
9629
|
+
const errorId = React32.useId();
|
|
9630
|
+
const internalRef = React32.useRef(null);
|
|
9376
9631
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
9377
|
-
const monthLabels =
|
|
9378
|
-
const resolvedMinDate =
|
|
9379
|
-
const resolvedMaxDate =
|
|
9380
|
-
const normalizedValue =
|
|
9381
|
-
const normalizedDefaultValue =
|
|
9632
|
+
const monthLabels = React32.useMemo(() => getMonthLabels(locale), [locale]);
|
|
9633
|
+
const resolvedMinDate = React32.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
9634
|
+
const resolvedMaxDate = React32.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
9635
|
+
const normalizedValue = React32.useMemo(() => normalizeDateValue(value), [value]);
|
|
9636
|
+
const normalizedDefaultValue = React32.useMemo(
|
|
9382
9637
|
() => normalizeDateValue(defaultValue),
|
|
9383
9638
|
[defaultValue]
|
|
9384
9639
|
);
|
|
9385
|
-
const resolvedValue =
|
|
9640
|
+
const resolvedValue = React32.useMemo(
|
|
9386
9641
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
9387
9642
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
9388
9643
|
);
|
|
@@ -9413,7 +9668,7 @@ var DatePicker = React31.forwardRef(
|
|
|
9413
9668
|
minDate: resolvedMinDate,
|
|
9414
9669
|
maxDate: resolvedMaxDate
|
|
9415
9670
|
});
|
|
9416
|
-
const handleOpenChange =
|
|
9671
|
+
const handleOpenChange = React32.useCallback(
|
|
9417
9672
|
(nextOpen) => {
|
|
9418
9673
|
if (isBlocked && nextOpen) return;
|
|
9419
9674
|
setIsOpen(nextOpen);
|
|
@@ -9423,7 +9678,7 @@ var DatePicker = React31.forwardRef(
|
|
|
9423
9678
|
},
|
|
9424
9679
|
[isBlocked]
|
|
9425
9680
|
);
|
|
9426
|
-
const handleDone =
|
|
9681
|
+
const handleDone = React32.useCallback(() => {
|
|
9427
9682
|
if (isBlocked) return;
|
|
9428
9683
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
9429
9684
|
handleOpenChange(false);
|
|
@@ -9435,11 +9690,11 @@ var DatePicker = React31.forwardRef(
|
|
|
9435
9690
|
resolvedMaxDate,
|
|
9436
9691
|
resolvedMinDate
|
|
9437
9692
|
]);
|
|
9438
|
-
const handleTriggerClick =
|
|
9693
|
+
const handleTriggerClick = React32.useCallback(() => {
|
|
9439
9694
|
if (isBlocked) return;
|
|
9440
9695
|
setIsOpen(true);
|
|
9441
9696
|
}, [isBlocked]);
|
|
9442
|
-
const handleTriggerKeyDown =
|
|
9697
|
+
const handleTriggerKeyDown = React32.useCallback(
|
|
9443
9698
|
(event) => {
|
|
9444
9699
|
if (isBlocked) return;
|
|
9445
9700
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -9449,7 +9704,7 @@ var DatePicker = React31.forwardRef(
|
|
|
9449
9704
|
},
|
|
9450
9705
|
[isBlocked]
|
|
9451
9706
|
);
|
|
9452
|
-
|
|
9707
|
+
React32.useEffect(() => {
|
|
9453
9708
|
if (isBlocked) {
|
|
9454
9709
|
setIsOpen(false);
|
|
9455
9710
|
}
|
|
@@ -9631,10 +9886,10 @@ function ResponsiveSheet({
|
|
|
9631
9886
|
}
|
|
9632
9887
|
|
|
9633
9888
|
// src/airbnb/input/Input.tsx
|
|
9634
|
-
var
|
|
9889
|
+
var React33 = __toESM(require("react"), 1);
|
|
9635
9890
|
var import_jsx_runtime126 = require("react/jsx-runtime");
|
|
9636
9891
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
9637
|
-
var AirbnbInput =
|
|
9892
|
+
var AirbnbInput = React33.forwardRef(
|
|
9638
9893
|
({
|
|
9639
9894
|
variant = "default",
|
|
9640
9895
|
label,
|
|
@@ -9663,15 +9918,15 @@ var AirbnbInput = React32.forwardRef(
|
|
|
9663
9918
|
placeholder,
|
|
9664
9919
|
...props
|
|
9665
9920
|
}, ref) => {
|
|
9666
|
-
const generatedId =
|
|
9667
|
-
const inputRef =
|
|
9921
|
+
const generatedId = React33.useId();
|
|
9922
|
+
const inputRef = React33.useRef(null);
|
|
9668
9923
|
const inputId = id ?? generatedId;
|
|
9669
9924
|
const fieldId = `${inputId}-field`;
|
|
9670
9925
|
const labelId = `${inputId}-label`;
|
|
9671
9926
|
const errorId = `${inputId}-error`;
|
|
9672
9927
|
const accessibleLabel = placeholder ?? label;
|
|
9673
|
-
const [isFocused, setIsFocused] =
|
|
9674
|
-
const [currentValue, setCurrentValue] =
|
|
9928
|
+
const [isFocused, setIsFocused] = React33.useState(false);
|
|
9929
|
+
const [currentValue, setCurrentValue] = React33.useState(
|
|
9675
9930
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
9676
9931
|
);
|
|
9677
9932
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -9681,11 +9936,11 @@ var AirbnbInput = React32.forwardRef(
|
|
|
9681
9936
|
const triggerError = error ?? invalid;
|
|
9682
9937
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
9683
9938
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
9684
|
-
|
|
9939
|
+
React33.useLayoutEffect(() => {
|
|
9685
9940
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
9686
9941
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
9687
9942
|
}, [value]);
|
|
9688
|
-
const setRefs =
|
|
9943
|
+
const setRefs = React33.useCallback(
|
|
9689
9944
|
(node) => {
|
|
9690
9945
|
inputRef.current = node;
|
|
9691
9946
|
if (node && value == null) {
|
|
@@ -9783,11 +10038,11 @@ var AirbnbInput = React32.forwardRef(
|
|
|
9783
10038
|
AirbnbInput.displayName = "Input";
|
|
9784
10039
|
|
|
9785
10040
|
// src/airbnb/phone-field/PhoneField.tsx
|
|
9786
|
-
var
|
|
10041
|
+
var React39 = __toESM(require("react"), 1);
|
|
9787
10042
|
var import_lucide_react44 = require("lucide-react");
|
|
9788
10043
|
|
|
9789
10044
|
// src/airbnb/select/Select.tsx
|
|
9790
|
-
var
|
|
10045
|
+
var React38 = __toESM(require("react"), 1);
|
|
9791
10046
|
|
|
9792
10047
|
// src/airbnb/select/SelectDesktopMenu.tsx
|
|
9793
10048
|
var import_jsx_runtime127 = require("react/jsx-runtime");
|
|
@@ -10132,10 +10387,10 @@ function SelectMobileContent({
|
|
|
10132
10387
|
}
|
|
10133
10388
|
|
|
10134
10389
|
// src/airbnb/select/SelectTrigger.tsx
|
|
10135
|
-
var
|
|
10390
|
+
var React34 = __toESM(require("react"), 1);
|
|
10136
10391
|
var import_lucide_react43 = require("lucide-react");
|
|
10137
10392
|
var import_jsx_runtime131 = require("react/jsx-runtime");
|
|
10138
|
-
var SelectTrigger2 =
|
|
10393
|
+
var SelectTrigger2 = React34.forwardRef(
|
|
10139
10394
|
({
|
|
10140
10395
|
id,
|
|
10141
10396
|
open,
|
|
@@ -10202,7 +10457,7 @@ var SelectTrigger2 = React33.forwardRef(
|
|
|
10202
10457
|
SelectTrigger2.displayName = "SelectTrigger";
|
|
10203
10458
|
|
|
10204
10459
|
// src/airbnb/select/useDesktopSelect.ts
|
|
10205
|
-
var
|
|
10460
|
+
var React35 = __toESM(require("react"), 1);
|
|
10206
10461
|
function useDesktopSelect({
|
|
10207
10462
|
isMobile,
|
|
10208
10463
|
isOpen,
|
|
@@ -10211,12 +10466,12 @@ function useDesktopSelect({
|
|
|
10211
10466
|
disabled,
|
|
10212
10467
|
onChange
|
|
10213
10468
|
}) {
|
|
10214
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
10215
|
-
const triggerRef =
|
|
10216
|
-
const listRef =
|
|
10217
|
-
const optionRefs =
|
|
10469
|
+
const [highlightedIndex, setHighlightedIndex] = React35.useState(-1);
|
|
10470
|
+
const triggerRef = React35.useRef(null);
|
|
10471
|
+
const listRef = React35.useRef(null);
|
|
10472
|
+
const optionRefs = React35.useRef([]);
|
|
10218
10473
|
const selectedIndex = getOptionIndex(options, value);
|
|
10219
|
-
|
|
10474
|
+
React35.useEffect(() => {
|
|
10220
10475
|
if (!isOpen || isMobile) return;
|
|
10221
10476
|
setHighlightedIndex((currentIndex) => {
|
|
10222
10477
|
if (currentIndex >= 0) {
|
|
@@ -10231,34 +10486,34 @@ function useDesktopSelect({
|
|
|
10231
10486
|
window.cancelAnimationFrame(frameId);
|
|
10232
10487
|
};
|
|
10233
10488
|
}, [isMobile, isOpen, options, selectedIndex]);
|
|
10234
|
-
|
|
10489
|
+
React35.useEffect(() => {
|
|
10235
10490
|
if (!isOpen || isMobile || highlightedIndex < 0) return;
|
|
10236
10491
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
10237
10492
|
block: "nearest"
|
|
10238
10493
|
});
|
|
10239
10494
|
}, [highlightedIndex, isMobile, isOpen]);
|
|
10240
|
-
|
|
10495
|
+
React35.useEffect(() => {
|
|
10241
10496
|
if (isOpen) return;
|
|
10242
10497
|
setHighlightedIndex(-1);
|
|
10243
10498
|
}, [isOpen]);
|
|
10244
|
-
const focusTrigger =
|
|
10499
|
+
const focusTrigger = React35.useCallback(() => {
|
|
10245
10500
|
triggerRef.current?.focus();
|
|
10246
10501
|
}, []);
|
|
10247
|
-
const handleSelect =
|
|
10502
|
+
const handleSelect = React35.useCallback(
|
|
10248
10503
|
(option) => {
|
|
10249
10504
|
if (option.isDisabled || disabled) return;
|
|
10250
10505
|
onChange(option);
|
|
10251
10506
|
},
|
|
10252
10507
|
[disabled, onChange]
|
|
10253
10508
|
);
|
|
10254
|
-
const openMenu =
|
|
10509
|
+
const openMenu = React35.useCallback(
|
|
10255
10510
|
(targetIndex) => {
|
|
10256
10511
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(options);
|
|
10257
10512
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
10258
10513
|
},
|
|
10259
10514
|
[options, selectedIndex]
|
|
10260
10515
|
);
|
|
10261
|
-
const handleTriggerKeyDown =
|
|
10516
|
+
const handleTriggerKeyDown = React35.useCallback(
|
|
10262
10517
|
(event, onOpen) => {
|
|
10263
10518
|
if (disabled) return;
|
|
10264
10519
|
if (event.key === "ArrowDown") {
|
|
@@ -10283,7 +10538,7 @@ function useDesktopSelect({
|
|
|
10283
10538
|
},
|
|
10284
10539
|
[disabled, openMenu, options, selectedIndex]
|
|
10285
10540
|
);
|
|
10286
|
-
const handleMenuKeyDown =
|
|
10541
|
+
const handleMenuKeyDown = React35.useCallback(
|
|
10287
10542
|
(event, onClose) => {
|
|
10288
10543
|
if (event.key === "Escape") {
|
|
10289
10544
|
event.preventDefault();
|
|
@@ -10333,7 +10588,7 @@ function useDesktopSelect({
|
|
|
10333
10588
|
},
|
|
10334
10589
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
10335
10590
|
);
|
|
10336
|
-
const setOptionRef =
|
|
10591
|
+
const setOptionRef = React35.useCallback(
|
|
10337
10592
|
(index, node) => {
|
|
10338
10593
|
optionRefs.current[index] = node;
|
|
10339
10594
|
},
|
|
@@ -10353,23 +10608,23 @@ function useDesktopSelect({
|
|
|
10353
10608
|
}
|
|
10354
10609
|
|
|
10355
10610
|
// src/airbnb/select/useMobileSelectWheel.ts
|
|
10356
|
-
var
|
|
10611
|
+
var React36 = __toESM(require("react"), 1);
|
|
10357
10612
|
function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
10358
|
-
const [pendingValue, setPendingValue] =
|
|
10613
|
+
const [pendingValue, setPendingValue] = React36.useState(
|
|
10359
10614
|
value ?? null
|
|
10360
10615
|
);
|
|
10361
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
10362
|
-
const mobileListRef =
|
|
10363
|
-
const scrollSettleTimeoutRef =
|
|
10364
|
-
const scrollAnimationFrameRef =
|
|
10365
|
-
const getTargetIndex =
|
|
10616
|
+
const [mobileScrollTop, setMobileScrollTop] = React36.useState(0);
|
|
10617
|
+
const mobileListRef = React36.useRef(null);
|
|
10618
|
+
const scrollSettleTimeoutRef = React36.useRef(null);
|
|
10619
|
+
const scrollAnimationFrameRef = React36.useRef(null);
|
|
10620
|
+
const getTargetIndex = React36.useCallback(
|
|
10366
10621
|
(targetValue) => {
|
|
10367
10622
|
const selectedIndex = getOptionIndex(options, targetValue);
|
|
10368
10623
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(options);
|
|
10369
10624
|
},
|
|
10370
10625
|
[options]
|
|
10371
10626
|
);
|
|
10372
|
-
const syncScrollPosition =
|
|
10627
|
+
const syncScrollPosition = React36.useCallback(
|
|
10373
10628
|
(targetValue, behavior = "instant") => {
|
|
10374
10629
|
const targetIndex = getTargetIndex(targetValue);
|
|
10375
10630
|
if (targetIndex < 0) return;
|
|
@@ -10388,27 +10643,27 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10388
10643
|
},
|
|
10389
10644
|
[getTargetIndex, options]
|
|
10390
10645
|
);
|
|
10391
|
-
const clearScrollSettleTimeout =
|
|
10646
|
+
const clearScrollSettleTimeout = React36.useCallback(() => {
|
|
10392
10647
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
10393
10648
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
10394
10649
|
scrollSettleTimeoutRef.current = null;
|
|
10395
10650
|
}, []);
|
|
10396
|
-
const clearScrollAnimationFrame =
|
|
10651
|
+
const clearScrollAnimationFrame = React36.useCallback(() => {
|
|
10397
10652
|
if (scrollAnimationFrameRef.current === null) return;
|
|
10398
10653
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
10399
10654
|
scrollAnimationFrameRef.current = null;
|
|
10400
10655
|
}, []);
|
|
10401
|
-
|
|
10656
|
+
React36.useEffect(
|
|
10402
10657
|
() => () => {
|
|
10403
10658
|
clearScrollSettleTimeout();
|
|
10404
10659
|
clearScrollAnimationFrame();
|
|
10405
10660
|
},
|
|
10406
10661
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
10407
10662
|
);
|
|
10408
|
-
|
|
10663
|
+
React36.useEffect(() => {
|
|
10409
10664
|
setPendingValue(value ?? null);
|
|
10410
10665
|
}, [value]);
|
|
10411
|
-
|
|
10666
|
+
React36.useLayoutEffect(() => {
|
|
10412
10667
|
if (!isMobile || !isOpen) return;
|
|
10413
10668
|
const frameId = window.requestAnimationFrame(() => {
|
|
10414
10669
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -10417,7 +10672,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10417
10672
|
window.cancelAnimationFrame(frameId);
|
|
10418
10673
|
};
|
|
10419
10674
|
}, [isMobile, isOpen, syncScrollPosition, value]);
|
|
10420
|
-
const settleScroll =
|
|
10675
|
+
const settleScroll = React36.useCallback(() => {
|
|
10421
10676
|
if (!mobileListRef.current) return;
|
|
10422
10677
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
10423
10678
|
const nextOption = options[nextIndex];
|
|
@@ -10429,13 +10684,13 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10429
10684
|
}
|
|
10430
10685
|
setPendingValue(nextOption);
|
|
10431
10686
|
}, [options, pendingValue]);
|
|
10432
|
-
const scheduleScrollSettle =
|
|
10687
|
+
const scheduleScrollSettle = React36.useCallback(() => {
|
|
10433
10688
|
clearScrollSettleTimeout();
|
|
10434
10689
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
10435
10690
|
settleScroll();
|
|
10436
10691
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
10437
10692
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
10438
|
-
const handleScroll =
|
|
10693
|
+
const handleScroll = React36.useCallback(() => {
|
|
10439
10694
|
if (!mobileListRef.current) return;
|
|
10440
10695
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
10441
10696
|
clearScrollAnimationFrame();
|
|
@@ -10445,7 +10700,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10445
10700
|
});
|
|
10446
10701
|
scheduleScrollSettle();
|
|
10447
10702
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
10448
|
-
const focusOptionByIndex =
|
|
10703
|
+
const focusOptionByIndex = React36.useCallback(
|
|
10449
10704
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
10450
10705
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
10451
10706
|
const option = options[index];
|
|
@@ -10463,7 +10718,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10463
10718
|
},
|
|
10464
10719
|
[options, scheduleScrollSettle]
|
|
10465
10720
|
);
|
|
10466
|
-
const handleOptionClick =
|
|
10721
|
+
const handleOptionClick = React36.useCallback(
|
|
10467
10722
|
(option) => {
|
|
10468
10723
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
10469
10724
|
const optionIndex = getOptionIndex(options, option);
|
|
@@ -10472,7 +10727,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10472
10727
|
},
|
|
10473
10728
|
[disabled, focusOptionByIndex, options]
|
|
10474
10729
|
);
|
|
10475
|
-
const moveByStep =
|
|
10730
|
+
const moveByStep = React36.useCallback(
|
|
10476
10731
|
(step) => {
|
|
10477
10732
|
const currentIndex = getOptionIndex(options, pendingValue);
|
|
10478
10733
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex(options) : getLastEnabledOptionIndex(options);
|
|
@@ -10484,7 +10739,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10484
10739
|
},
|
|
10485
10740
|
[focusOptionByIndex, options, pendingValue]
|
|
10486
10741
|
);
|
|
10487
|
-
const moveToBoundary =
|
|
10742
|
+
const moveToBoundary = React36.useCallback(
|
|
10488
10743
|
(boundary) => {
|
|
10489
10744
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex(options) : getLastEnabledOptionIndex(options);
|
|
10490
10745
|
if (targetIndex >= 0) {
|
|
@@ -10493,7 +10748,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10493
10748
|
},
|
|
10494
10749
|
[focusOptionByIndex, options]
|
|
10495
10750
|
);
|
|
10496
|
-
const syncPendingValue =
|
|
10751
|
+
const syncPendingValue = React36.useCallback(
|
|
10497
10752
|
(nextValue) => {
|
|
10498
10753
|
const normalizedValue = nextValue ?? null;
|
|
10499
10754
|
const matchedIndex = getOptionIndex(options, normalizedValue);
|
|
@@ -10521,9 +10776,9 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10521
10776
|
}
|
|
10522
10777
|
|
|
10523
10778
|
// src/airbnb/select/useSelectIds.ts
|
|
10524
|
-
var
|
|
10779
|
+
var React37 = __toESM(require("react"), 1);
|
|
10525
10780
|
function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
10526
|
-
const reactId =
|
|
10781
|
+
const reactId = React37.useId().replace(/:/g, "");
|
|
10527
10782
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
10528
10783
|
const triggerId = `${baseId}-trigger`;
|
|
10529
10784
|
const labelId = `${baseId}-label`;
|
|
@@ -10533,7 +10788,7 @@ function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
|
10533
10788
|
const listboxId = `${baseId}-listbox`;
|
|
10534
10789
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
10535
10790
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
10536
|
-
const getOptionId2 =
|
|
10791
|
+
const getOptionId2 = React37.useCallback(
|
|
10537
10792
|
(index) => `${baseId}-option-${index}`,
|
|
10538
10793
|
[baseId]
|
|
10539
10794
|
);
|
|
@@ -10550,61 +10805,9 @@ function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
|
10550
10805
|
};
|
|
10551
10806
|
}
|
|
10552
10807
|
|
|
10553
|
-
// src/lib/use-outside-click.ts
|
|
10554
|
-
var import_react46 = require("react");
|
|
10555
|
-
function useOutsideClick(elementRef, onOutsideClick, nested) {
|
|
10556
|
-
const handleOutsideClick = (0, import_react46.useRef)(onOutsideClick);
|
|
10557
|
-
handleOutsideClick.current = onOutsideClick;
|
|
10558
|
-
const checkNestedElements = (0, import_react46.useCallback)(
|
|
10559
|
-
(event) => {
|
|
10560
|
-
const checkIsElementClickedBySelector = (selector) => {
|
|
10561
|
-
const nestedElement = getDocument().querySelector(selector);
|
|
10562
|
-
return nestedElement?.contains(event.target);
|
|
10563
|
-
};
|
|
10564
|
-
const checkDataAttribute = () => {
|
|
10565
|
-
const target = event.target;
|
|
10566
|
-
if (!target || !(target instanceof HTMLElement)) {
|
|
10567
|
-
return false;
|
|
10568
|
-
}
|
|
10569
|
-
let current = target;
|
|
10570
|
-
while (current) {
|
|
10571
|
-
if (current.hasAttribute("data-exclude-from-outside-click")) {
|
|
10572
|
-
return true;
|
|
10573
|
-
}
|
|
10574
|
-
current = current.parentElement;
|
|
10575
|
-
}
|
|
10576
|
-
return false;
|
|
10577
|
-
};
|
|
10578
|
-
if (nested) {
|
|
10579
|
-
if (typeof nested === "string") {
|
|
10580
|
-
if (checkIsElementClickedBySelector(nested)) return true;
|
|
10581
|
-
} else {
|
|
10582
|
-
if (nested.some(checkIsElementClickedBySelector)) return true;
|
|
10583
|
-
}
|
|
10584
|
-
}
|
|
10585
|
-
return checkDataAttribute();
|
|
10586
|
-
},
|
|
10587
|
-
[nested]
|
|
10588
|
-
);
|
|
10589
|
-
(0, import_react46.useEffect)(() => {
|
|
10590
|
-
function handleClickOutside(event) {
|
|
10591
|
-
const isNestedElement = checkNestedElements(event);
|
|
10592
|
-
if (elementRef?.current && !elementRef.current.contains(event.target) && !isNestedElement) {
|
|
10593
|
-
handleOutsideClick.current?.(event);
|
|
10594
|
-
}
|
|
10595
|
-
}
|
|
10596
|
-
getDocument().addEventListener("mousedown", handleClickOutside, true);
|
|
10597
|
-
getDocument().addEventListener("touchstart", handleClickOutside, true);
|
|
10598
|
-
return () => {
|
|
10599
|
-
getDocument().removeEventListener("mousedown", handleClickOutside, true);
|
|
10600
|
-
getDocument().removeEventListener("touchstart", handleClickOutside, true);
|
|
10601
|
-
};
|
|
10602
|
-
}, [checkNestedElements, elementRef]);
|
|
10603
|
-
}
|
|
10604
|
-
|
|
10605
10808
|
// src/airbnb/select/Select.tsx
|
|
10606
10809
|
var import_jsx_runtime132 = require("react/jsx-runtime");
|
|
10607
|
-
var AirbnbSelect =
|
|
10810
|
+
var AirbnbSelect = React38.forwardRef(function AirbnbSelect2({
|
|
10608
10811
|
options = [],
|
|
10609
10812
|
value,
|
|
10610
10813
|
onChange,
|
|
@@ -10631,8 +10834,8 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10631
10834
|
noOptionsMessage
|
|
10632
10835
|
}, ref) {
|
|
10633
10836
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
10634
|
-
const [isOpen, setIsOpen] =
|
|
10635
|
-
const containerRef =
|
|
10837
|
+
const [isOpen, setIsOpen] = React38.useState(false);
|
|
10838
|
+
const containerRef = React38.useRef(null);
|
|
10636
10839
|
const hasValue = Boolean(value);
|
|
10637
10840
|
const helperText = placeholder ?? label;
|
|
10638
10841
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
@@ -10686,12 +10889,12 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10686
10889
|
const activeMobileIndex = getOptionIndex(options, pendingValue);
|
|
10687
10890
|
const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
|
|
10688
10891
|
useOutsideClick(containerRef, isOpen && !isMobile ? () => setIsOpen(false) : null);
|
|
10689
|
-
|
|
10892
|
+
React38.useEffect(() => {
|
|
10690
10893
|
if (isBlocked) {
|
|
10691
10894
|
setIsOpen(false);
|
|
10692
10895
|
}
|
|
10693
10896
|
}, [isBlocked]);
|
|
10694
|
-
|
|
10897
|
+
React38.useEffect(
|
|
10695
10898
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
10696
10899
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
10697
10900
|
return;
|
|
@@ -10703,7 +10906,7 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10703
10906
|
},
|
|
10704
10907
|
[onChange, options, value]
|
|
10705
10908
|
);
|
|
10706
|
-
const handleMobileOpenChange =
|
|
10909
|
+
const handleMobileOpenChange = React38.useCallback(
|
|
10707
10910
|
(nextOpen) => {
|
|
10708
10911
|
if (isBlocked && nextOpen) return;
|
|
10709
10912
|
setIsOpen(nextOpen);
|
|
@@ -10714,7 +10917,7 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10714
10917
|
},
|
|
10715
10918
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
10716
10919
|
);
|
|
10717
|
-
const handleMobileDone =
|
|
10920
|
+
const handleMobileDone = React38.useCallback(() => {
|
|
10718
10921
|
if (isBlocked) return;
|
|
10719
10922
|
const finalOption = pendingValue;
|
|
10720
10923
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -10723,7 +10926,7 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10723
10926
|
setIsOpen(false);
|
|
10724
10927
|
focusTrigger();
|
|
10725
10928
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
10726
|
-
const handleTriggerClick =
|
|
10929
|
+
const handleTriggerClick = React38.useCallback(() => {
|
|
10727
10930
|
if (isBlocked) return;
|
|
10728
10931
|
setIsOpen((prev) => {
|
|
10729
10932
|
const nextOpen = !prev;
|
|
@@ -10892,7 +11095,7 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10892
11095
|
|
|
10893
11096
|
// src/airbnb/phone-field/PhoneField.tsx
|
|
10894
11097
|
var import_jsx_runtime133 = require("react/jsx-runtime");
|
|
10895
|
-
var PhoneField =
|
|
11098
|
+
var PhoneField = React39.forwardRef(
|
|
10896
11099
|
({
|
|
10897
11100
|
variant = "default",
|
|
10898
11101
|
label,
|
|
@@ -10916,8 +11119,8 @@ var PhoneField = React38.forwardRef(
|
|
|
10916
11119
|
mobileTitle,
|
|
10917
11120
|
codePlaceholder = "+00"
|
|
10918
11121
|
}, ref) => {
|
|
10919
|
-
const inputId =
|
|
10920
|
-
const codeOptions =
|
|
11122
|
+
const inputId = React39.useId();
|
|
11123
|
+
const codeOptions = React39.useMemo(
|
|
10921
11124
|
() => options.map((option) => ({
|
|
10922
11125
|
value: option.value,
|
|
10923
11126
|
label: `${option.label} (${option.value})`,
|
|
@@ -10925,7 +11128,7 @@ var PhoneField = React38.forwardRef(
|
|
|
10925
11128
|
})),
|
|
10926
11129
|
[options]
|
|
10927
11130
|
);
|
|
10928
|
-
const selectedCodeOption =
|
|
11131
|
+
const selectedCodeOption = React39.useMemo(
|
|
10929
11132
|
() => codeOptions.find((option) => option.value === value?.code) ?? null,
|
|
10930
11133
|
[codeOptions, value?.code]
|
|
10931
11134
|
);
|
|
@@ -11067,11 +11270,11 @@ var PhoneField = React38.forwardRef(
|
|
|
11067
11270
|
PhoneField.displayName = "PhoneField";
|
|
11068
11271
|
|
|
11069
11272
|
// src/airbnb/search-input/SearchInput.tsx
|
|
11070
|
-
var
|
|
11273
|
+
var React40 = __toESM(require("react"), 1);
|
|
11071
11274
|
var import_react_i18next23 = require("react-i18next");
|
|
11072
11275
|
var import_lucide_react45 = require("lucide-react");
|
|
11073
11276
|
var import_jsx_runtime134 = require("react/jsx-runtime");
|
|
11074
|
-
var AirbnbSearchInput =
|
|
11277
|
+
var AirbnbSearchInput = React40.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
11075
11278
|
const { t } = (0, import_react_i18next23.useTranslation)();
|
|
11076
11279
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
11077
11280
|
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
@@ -11109,28 +11312,10 @@ var AirbnbSearchInput = React39.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
11109
11312
|
AirbnbSearchInput.displayName = "SearchInput";
|
|
11110
11313
|
|
|
11111
11314
|
// src/searchable-select/SearchableSelect.tsx
|
|
11112
|
-
var
|
|
11315
|
+
var React41 = __toESM(require("react"), 1);
|
|
11113
11316
|
var import_lucide_react46 = require("lucide-react");
|
|
11114
11317
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
11115
|
-
var
|
|
11116
|
-
|
|
11117
|
-
// src/lib/use-event.ts
|
|
11118
|
-
var import_react47 = require("react");
|
|
11119
|
-
function useEvent(fn) {
|
|
11120
|
-
const fnRef = (0, import_react47.useRef)(fn);
|
|
11121
|
-
(0, import_react47.useLayoutEffect)(() => {
|
|
11122
|
-
fnRef.current = fn;
|
|
11123
|
-
}, [fn]);
|
|
11124
|
-
const eventCb = (0, import_react47.useCallback)(
|
|
11125
|
-
(...args) => {
|
|
11126
|
-
return fnRef.current?.apply(null, args);
|
|
11127
|
-
},
|
|
11128
|
-
[fnRef]
|
|
11129
|
-
);
|
|
11130
|
-
return eventCb;
|
|
11131
|
-
}
|
|
11132
|
-
|
|
11133
|
-
// src/searchable-select/SearchableSelect.tsx
|
|
11318
|
+
var import_react56 = require("react");
|
|
11134
11319
|
var import_jsx_runtime135 = require("react/jsx-runtime");
|
|
11135
11320
|
var ROW_HEIGHT = 48;
|
|
11136
11321
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
@@ -11172,13 +11357,13 @@ var SearchableSelectInternal = ({
|
|
|
11172
11357
|
loadingMessage
|
|
11173
11358
|
}, ref) => {
|
|
11174
11359
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
11175
|
-
const reactId =
|
|
11176
|
-
const [open, setOpen] =
|
|
11177
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
11178
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
11179
|
-
const containerRef =
|
|
11180
|
-
const triggerRef =
|
|
11181
|
-
const inputRef =
|
|
11360
|
+
const reactId = React41.useId();
|
|
11361
|
+
const [open, setOpen] = React41.useState(false);
|
|
11362
|
+
const [internalSearchValue, setInternalSearchValue] = React41.useState("");
|
|
11363
|
+
const [highlightedIndex, setHighlightedIndex] = React41.useState(-1);
|
|
11364
|
+
const containerRef = React41.useRef(null);
|
|
11365
|
+
const triggerRef = React41.useRef(null);
|
|
11366
|
+
const inputRef = React41.useRef(null);
|
|
11182
11367
|
const listboxId = `${reactId}-listbox`;
|
|
11183
11368
|
const labelId = `${reactId}-label`;
|
|
11184
11369
|
const valueId = `${reactId}-value`;
|
|
@@ -11187,13 +11372,13 @@ var SearchableSelectInternal = ({
|
|
|
11187
11372
|
const searchInputId = `${reactId}-search`;
|
|
11188
11373
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
11189
11374
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
11190
|
-
const visibleOptions =
|
|
11375
|
+
const visibleOptions = React41.useMemo(() => {
|
|
11191
11376
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
11192
11377
|
return options;
|
|
11193
11378
|
}
|
|
11194
11379
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
11195
11380
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
11196
|
-
const selectedIndex =
|
|
11381
|
+
const selectedIndex = React41.useMemo(
|
|
11197
11382
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
11198
11383
|
[value?.value, visibleOptions]
|
|
11199
11384
|
);
|
|
@@ -11205,7 +11390,7 @@ var SearchableSelectInternal = ({
|
|
|
11205
11390
|
const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
|
|
11206
11391
|
useOutsideClick(containerRef, open && !isMobile ? () => closeSelect() : null);
|
|
11207
11392
|
const handleOnOpenChange = useEvent(onOpenChange);
|
|
11208
|
-
const setSelectOpen = (0,
|
|
11393
|
+
const setSelectOpen = (0, import_react56.useCallback)(
|
|
11209
11394
|
(nextOpen, options2) => {
|
|
11210
11395
|
setOpen(nextOpen);
|
|
11211
11396
|
handleOnOpenChange?.(nextOpen);
|
|
@@ -11215,7 +11400,7 @@ var SearchableSelectInternal = ({
|
|
|
11215
11400
|
},
|
|
11216
11401
|
[handleOnOpenChange]
|
|
11217
11402
|
);
|
|
11218
|
-
|
|
11403
|
+
React41.useEffect(() => {
|
|
11219
11404
|
if (isBlocked) {
|
|
11220
11405
|
setSelectOpen(false);
|
|
11221
11406
|
return;
|
|
@@ -11228,7 +11413,7 @@ var SearchableSelectInternal = ({
|
|
|
11228
11413
|
window.cancelAnimationFrame(frameId);
|
|
11229
11414
|
};
|
|
11230
11415
|
}, [isBlocked, open, setSelectOpen]);
|
|
11231
|
-
|
|
11416
|
+
React41.useEffect(() => {
|
|
11232
11417
|
if (!open) {
|
|
11233
11418
|
setHighlightedIndex(-1);
|
|
11234
11419
|
return;
|
|
@@ -11323,7 +11508,7 @@ var SearchableSelectInternal = ({
|
|
|
11323
11508
|
onOptionHover: setHighlightedIndex
|
|
11324
11509
|
}
|
|
11325
11510
|
);
|
|
11326
|
-
|
|
11511
|
+
React41.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
11327
11512
|
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
|
|
11328
11513
|
"div",
|
|
11329
11514
|
{
|
|
@@ -11409,7 +11594,7 @@ var SearchableSelectInternal = ({
|
|
|
11409
11594
|
}
|
|
11410
11595
|
);
|
|
11411
11596
|
};
|
|
11412
|
-
var SearchableSelect =
|
|
11597
|
+
var SearchableSelect = React41.forwardRef(
|
|
11413
11598
|
SearchableSelectInternal
|
|
11414
11599
|
);
|
|
11415
11600
|
function SearchableSelectContent({
|
|
@@ -11436,9 +11621,9 @@ function SearchableSelectContent({
|
|
|
11436
11621
|
onOptionClick,
|
|
11437
11622
|
onOptionHover
|
|
11438
11623
|
}) {
|
|
11439
|
-
const listRef =
|
|
11440
|
-
const lastLoadMoreOptionsLengthRef =
|
|
11441
|
-
const previousHighlightedIndexRef =
|
|
11624
|
+
const listRef = React41.useRef(null);
|
|
11625
|
+
const lastLoadMoreOptionsLengthRef = React41.useRef(null);
|
|
11626
|
+
const previousHighlightedIndexRef = React41.useRef(highlightedIndex);
|
|
11442
11627
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
11443
11628
|
const virtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
11444
11629
|
count: rowCount,
|
|
@@ -11449,7 +11634,7 @@ function SearchableSelectContent({
|
|
|
11449
11634
|
const virtualItems = virtualizer.getVirtualItems();
|
|
11450
11635
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
11451
11636
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
11452
|
-
|
|
11637
|
+
React41.useEffect(() => {
|
|
11453
11638
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
11454
11639
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
11455
11640
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -11457,7 +11642,7 @@ function SearchableSelectContent({
|
|
|
11457
11642
|
onLoadMore?.();
|
|
11458
11643
|
}
|
|
11459
11644
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
11460
|
-
|
|
11645
|
+
React41.useEffect(() => {
|
|
11461
11646
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
11462
11647
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
11463
11648
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -11838,10 +12023,26 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
11838
12023
|
toggleVariants,
|
|
11839
12024
|
uiKitI18nResources,
|
|
11840
12025
|
uiKitTranslations,
|
|
12026
|
+
useAbortController,
|
|
12027
|
+
useClickEscape,
|
|
12028
|
+
useCombinedRef,
|
|
12029
|
+
useDebounce,
|
|
12030
|
+
useEvent,
|
|
12031
|
+
useHover,
|
|
12032
|
+
useIsMobile,
|
|
12033
|
+
useIsMounted,
|
|
12034
|
+
useModalControls,
|
|
12035
|
+
useOutsideClick,
|
|
12036
|
+
usePrevious,
|
|
11841
12037
|
useRadioOptions,
|
|
12038
|
+
useScreenResize,
|
|
12039
|
+
useScrollFrameIntoView,
|
|
12040
|
+
useScrollToTop,
|
|
11842
12041
|
useSidebar,
|
|
11843
12042
|
useSidebarMenuButton,
|
|
11844
12043
|
useSidebarSafe,
|
|
12044
|
+
useTimeout,
|
|
12045
|
+
useTimer,
|
|
11845
12046
|
useUpdateToast
|
|
11846
12047
|
});
|
|
11847
12048
|
//# sourceMappingURL=index.cjs.map
|