@chekinapp/ui 0.0.21 → 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 +797 -595
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +166 -13
- 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 +712 -526
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -45,10 +45,11 @@ var AccordionTrigger = React.forwardRef(({ className, children, openIcon, closed
|
|
|
45
45
|
"div",
|
|
46
46
|
{
|
|
47
47
|
className: cn(
|
|
48
|
+
"accordion__icon",
|
|
49
|
+
Accordion_default.accordion__icon,
|
|
48
50
|
"shrink-0 rounded-full p-0.5",
|
|
49
51
|
"transition-colors duration-200",
|
|
50
|
-
"
|
|
51
|
-
"relative h-4 w-4"
|
|
52
|
+
"relative"
|
|
52
53
|
),
|
|
53
54
|
children: [
|
|
54
55
|
/* @__PURE__ */ jsx(
|
|
@@ -110,6 +111,11 @@ AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
|
|
110
111
|
|
|
111
112
|
// src/alert-box/AlertBox.tsx
|
|
112
113
|
import { AlertCircle, Check, TriangleAlert, XCircle } from "lucide-react";
|
|
114
|
+
|
|
115
|
+
// src/alert-box/AlertBox.module.css
|
|
116
|
+
var AlertBox_default = {};
|
|
117
|
+
|
|
118
|
+
// src/alert-box/AlertBox.tsx
|
|
113
119
|
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
114
120
|
var AlertType = /* @__PURE__ */ ((AlertType2) => {
|
|
115
121
|
AlertType2["INFO"] = "INFO";
|
|
@@ -137,12 +143,12 @@ var sizeClasses = {
|
|
|
137
143
|
["M" /* M */]: "p-4 text-base font-medium items-start",
|
|
138
144
|
["L" /* L */]: "px-6 py-5 items-start"
|
|
139
145
|
};
|
|
140
|
-
var
|
|
141
|
-
["INFO" /* INFO */]: "
|
|
142
|
-
["WARNING" /* WARNING */]: "
|
|
143
|
-
["ERROR" /* ERROR */]: "
|
|
144
|
-
["
|
|
145
|
-
["
|
|
146
|
+
var typeStyles = {
|
|
147
|
+
["INFO" /* INFO */]: AlertBox_default["alertBox--info"],
|
|
148
|
+
["WARNING" /* WARNING */]: AlertBox_default["alertBox--warning"],
|
|
149
|
+
["ERROR" /* ERROR */]: AlertBox_default["alertBox--error"],
|
|
150
|
+
["SUCCESS" /* SUCCESS */]: AlertBox_default["alertBox--success"],
|
|
151
|
+
["LIGHT" /* LIGHT */]: ""
|
|
146
152
|
};
|
|
147
153
|
function AlertBox({
|
|
148
154
|
text,
|
|
@@ -158,9 +164,10 @@ function AlertBox({
|
|
|
158
164
|
{
|
|
159
165
|
"data-slot": "alert-box",
|
|
160
166
|
className: cn(
|
|
161
|
-
|
|
167
|
+
AlertBox_default.alertBox,
|
|
168
|
+
"flex gap-3 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:shrink-0",
|
|
162
169
|
sizeClasses[size],
|
|
163
|
-
|
|
170
|
+
typeStyles[type],
|
|
164
171
|
className
|
|
165
172
|
),
|
|
166
173
|
children: [
|
|
@@ -177,6 +184,11 @@ var AlertSizes = AlertSize;
|
|
|
177
184
|
// src/audio-player/AudioPlayer.tsx
|
|
178
185
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
179
186
|
import { Pause, Play } from "lucide-react";
|
|
187
|
+
|
|
188
|
+
// src/audio-player/AudioPlayer.module.css
|
|
189
|
+
var AudioPlayer_default = {};
|
|
190
|
+
|
|
191
|
+
// src/audio-player/AudioPlayer.tsx
|
|
180
192
|
import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
181
193
|
function formatTime(seconds) {
|
|
182
194
|
const mins = Math.floor(seconds / 60);
|
|
@@ -240,16 +252,12 @@ function AudioPlayer({ src, compact, className }) {
|
|
|
240
252
|
{
|
|
241
253
|
type: "button",
|
|
242
254
|
className: cn(
|
|
243
|
-
|
|
255
|
+
AudioPlayer_default.playButton,
|
|
256
|
+
"inline-flex items-center justify-center",
|
|
244
257
|
compact ? "h-6 min-w-6 p-1" : "h-8 min-w-8 p-1.5"
|
|
245
258
|
),
|
|
246
259
|
onClick: togglePlayPause,
|
|
247
|
-
children: isPlaying ? /* @__PURE__ */ jsx3(Pause, { className: cn(compact ? "h-2.5 w-2.5" : "h-3 w-3", "
|
|
248
|
-
Play,
|
|
249
|
-
{
|
|
250
|
-
className: cn(compact ? "h-2.5 w-2.5" : "h-3 w-3", "fill-white text-white")
|
|
251
|
-
}
|
|
252
|
-
)
|
|
260
|
+
children: isPlaying ? /* @__PURE__ */ jsx3(Pause, { className: cn(compact ? "h-2.5 w-2.5" : "h-3 w-3", "fill-current") }) : /* @__PURE__ */ jsx3(Play, { className: cn(compact ? "h-2.5 w-2.5" : "h-3 w-3", "fill-current") })
|
|
253
261
|
}
|
|
254
262
|
),
|
|
255
263
|
!compact && /* @__PURE__ */ jsxs3(Fragment, { children: [
|
|
@@ -257,18 +265,24 @@ function AudioPlayer({ src, compact, className }) {
|
|
|
257
265
|
"div",
|
|
258
266
|
{
|
|
259
267
|
ref: progressRef,
|
|
260
|
-
className:
|
|
268
|
+
className: cn(
|
|
269
|
+
AudioPlayer_default.track,
|
|
270
|
+
"h-1 flex-1 cursor-pointer overflow-hidden rounded-full"
|
|
271
|
+
),
|
|
261
272
|
onClick: handleSeek,
|
|
262
273
|
children: /* @__PURE__ */ jsx3(
|
|
263
274
|
"div",
|
|
264
275
|
{
|
|
265
|
-
className:
|
|
276
|
+
className: cn(
|
|
277
|
+
AudioPlayer_default.progress,
|
|
278
|
+
"h-full transition-all duration-100 ease-linear"
|
|
279
|
+
),
|
|
266
280
|
style: { width: `${progress}%` }
|
|
267
281
|
}
|
|
268
282
|
)
|
|
269
283
|
}
|
|
270
284
|
),
|
|
271
|
-
/* @__PURE__ */ jsx3("span", { className: "min-w-10 text-xs font-medium
|
|
285
|
+
/* @__PURE__ */ jsx3("span", { className: cn(AudioPlayer_default.time, "min-w-10 text-xs font-medium"), children: isPlaying || currentTime > 0 ? formatTime(currentTime) : formatTime(duration) })
|
|
272
286
|
] })
|
|
273
287
|
] });
|
|
274
288
|
}
|
|
@@ -277,6 +291,11 @@ AudioPlayer.displayName = "AudioPlayer";
|
|
|
277
291
|
// src/avatar/Avatar.tsx
|
|
278
292
|
import * as React2 from "react";
|
|
279
293
|
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
294
|
+
|
|
295
|
+
// src/avatar/Avatar.module.css
|
|
296
|
+
var Avatar_default = {};
|
|
297
|
+
|
|
298
|
+
// src/avatar/Avatar.tsx
|
|
280
299
|
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
281
300
|
var sizeClasses2 = {
|
|
282
301
|
sm: "h-8 w-8",
|
|
@@ -307,8 +326,9 @@ var Avatar = React2.forwardRef(({ className, src, alt, fallback, size = "md", fa
|
|
|
307
326
|
AvatarPrimitive.Fallback,
|
|
308
327
|
{
|
|
309
328
|
className: cn(
|
|
310
|
-
"flex h-full w-full items-center justify-center rounded-full font-medium
|
|
311
|
-
fallbackClassName
|
|
329
|
+
"flex h-full w-full items-center justify-center rounded-full font-medium",
|
|
330
|
+
!fallbackClassName && Avatar_default.fallback,
|
|
331
|
+
fallbackClassName
|
|
312
332
|
),
|
|
313
333
|
children: fallback
|
|
314
334
|
}
|
|
@@ -360,6 +380,11 @@ Badge.displayName = "Badge";
|
|
|
360
380
|
|
|
361
381
|
// src/beta-badge/BetaBadge.tsx
|
|
362
382
|
import { useTranslation } from "react-i18next";
|
|
383
|
+
|
|
384
|
+
// src/beta-badge/BetaBadge.module.css
|
|
385
|
+
var BetaBadge_default = {};
|
|
386
|
+
|
|
387
|
+
// src/beta-badge/BetaBadge.tsx
|
|
363
388
|
import { jsxs as jsxs5 } from "react/jsx-runtime";
|
|
364
389
|
function BetaBadge({
|
|
365
390
|
className,
|
|
@@ -374,8 +399,9 @@ function BetaBadge({
|
|
|
374
399
|
{
|
|
375
400
|
"data-slot": "beta-badge",
|
|
376
401
|
className: cn(
|
|
402
|
+
BetaBadge_default.betaBadge,
|
|
377
403
|
"rounded-sm px-2 py-1 text-sm/4 font-semibold uppercase",
|
|
378
|
-
readOnly
|
|
404
|
+
readOnly && BetaBadge_default["betaBadge--readonly"],
|
|
379
405
|
className
|
|
380
406
|
),
|
|
381
407
|
...props,
|
|
@@ -466,6 +492,11 @@ BookmarkTabsTrigger.displayName = "BookmarkTabsTrigger";
|
|
|
466
492
|
// src/box-option-selector/BoxOptionSelector.tsx
|
|
467
493
|
import { forwardRef as forwardRef4, useEffect as useEffect2, useState as useState2 } from "react";
|
|
468
494
|
import { useTranslation as useTranslation2 } from "react-i18next";
|
|
495
|
+
|
|
496
|
+
// src/box-option-selector/BoxOptionSelector.module.css
|
|
497
|
+
var BoxOptionSelector_default = {};
|
|
498
|
+
|
|
499
|
+
// src/box-option-selector/BoxOptionSelector.tsx
|
|
469
500
|
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
470
501
|
var BoxOptionSelector = forwardRef4(
|
|
471
502
|
({
|
|
@@ -501,8 +532,9 @@ var BoxOptionSelector = forwardRef4(
|
|
|
501
532
|
ref,
|
|
502
533
|
"data-slot": "box-option-selector",
|
|
503
534
|
className: cn(
|
|
535
|
+
BoxOptionSelector_default.boxOption,
|
|
504
536
|
"flex min-h-[116px] w-full max-w-[400px] cursor-pointer flex-col gap-4 rounded-lg border p-4 transition-all duration-200",
|
|
505
|
-
isSelected
|
|
537
|
+
isSelected && BoxOptionSelector_default["boxOption--selected"],
|
|
506
538
|
disabled && "cursor-not-allowed opacity-50"
|
|
507
539
|
),
|
|
508
540
|
onClick: handleClick,
|
|
@@ -563,8 +595,8 @@ function Breadcrumb({
|
|
|
563
595
|
}
|
|
564
596
|
const isLink = Boolean(to && !current);
|
|
565
597
|
const contentClassName = cn(
|
|
566
|
-
"flex items-center gap-2.5 text-sm font-medium text-
|
|
567
|
-
current && "font-bold text-
|
|
598
|
+
"flex items-center gap-2.5 text-sm font-medium text-[var(--breadcrumbs-link-color)]",
|
|
599
|
+
current && "font-bold text-[var(--breadcrumbs-current-color)]",
|
|
568
600
|
isLink && "transition-opacity hover:opacity-80",
|
|
569
601
|
className
|
|
570
602
|
);
|
|
@@ -609,7 +641,7 @@ function Breadcrumbs({ className, children }) {
|
|
|
609
641
|
ChevronRight,
|
|
610
642
|
{
|
|
611
643
|
"aria-hidden": "true",
|
|
612
|
-
className: "shrink-0 text-
|
|
644
|
+
className: "shrink-0 text-[var(--breadcrumbs-separator-color)]",
|
|
613
645
|
size: 16
|
|
614
646
|
}
|
|
615
647
|
) : null,
|
|
@@ -915,7 +947,7 @@ function ButtonGroupText({
|
|
|
915
947
|
{
|
|
916
948
|
"data-slot": "button-group-text",
|
|
917
949
|
className: cn(
|
|
918
|
-
"flex items-center gap-2 rounded-lg border bg-
|
|
950
|
+
"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)]",
|
|
919
951
|
"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
|
|
920
952
|
className
|
|
921
953
|
),
|
|
@@ -929,7 +961,7 @@ ButtonGroupText.displayName = "ButtonGroupText";
|
|
|
929
961
|
import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
930
962
|
function ButtonsGroupLabel({ children, label, className }) {
|
|
931
963
|
return /* @__PURE__ */ jsxs10("div", { "data-slot": "buttons-group-label", className: cn(className), children: [
|
|
932
|
-
/* @__PURE__ */ jsx12("div", { className: "mb-2 text-xs font-medium text-
|
|
964
|
+
/* @__PURE__ */ jsx12("div", { className: "mb-2 text-xs font-medium text-[var(--buttons-group-label-color)]", children: label }),
|
|
933
965
|
/* @__PURE__ */ jsx12("div", { children })
|
|
934
966
|
] });
|
|
935
967
|
}
|
|
@@ -1125,6 +1157,15 @@ var getDocument = () => {
|
|
|
1125
1157
|
function getCustomContainer() {
|
|
1126
1158
|
return getDocument()?.body;
|
|
1127
1159
|
}
|
|
1160
|
+
function scrollToTop(value = 0, behavior) {
|
|
1161
|
+
window.scrollTo({
|
|
1162
|
+
top: value,
|
|
1163
|
+
behavior
|
|
1164
|
+
});
|
|
1165
|
+
}
|
|
1166
|
+
function isObject(value) {
|
|
1167
|
+
return value !== null && typeof value === "object";
|
|
1168
|
+
}
|
|
1128
1169
|
var isNumeric = (n) => n !== "" && !isNaN(n);
|
|
1129
1170
|
function toCssSize(size) {
|
|
1130
1171
|
if (!size) {
|
|
@@ -1987,12 +2028,57 @@ function DataTable({ columns, data }) {
|
|
|
1987
2028
|
}
|
|
1988
2029
|
|
|
1989
2030
|
// src/dialog/Dialog.tsx
|
|
1990
|
-
import * as
|
|
2031
|
+
import * as React11 from "react";
|
|
1991
2032
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
1992
2033
|
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
|
|
1993
2034
|
import { XIcon } from "lucide-react";
|
|
1994
2035
|
|
|
1995
|
-
// src/
|
|
2036
|
+
// src/hooks/use-scroll-to-top.ts
|
|
2037
|
+
import { useEffect as useEffect4 } from "react";
|
|
2038
|
+
function useScrollToTop() {
|
|
2039
|
+
useEffect4(() => {
|
|
2040
|
+
scrollToTop();
|
|
2041
|
+
}, []);
|
|
2042
|
+
}
|
|
2043
|
+
|
|
2044
|
+
// src/hooks/use-abort-controller.ts
|
|
2045
|
+
import React10 from "react";
|
|
2046
|
+
function useAbortController() {
|
|
2047
|
+
const [abortController, setAbortController] = React10.useState(() => {
|
|
2048
|
+
return new AbortController();
|
|
2049
|
+
});
|
|
2050
|
+
const setupAbortController = React10.useCallback(() => {
|
|
2051
|
+
const abortController2 = new AbortController();
|
|
2052
|
+
setAbortController(abortController2);
|
|
2053
|
+
return abortController2.signal;
|
|
2054
|
+
}, []);
|
|
2055
|
+
return {
|
|
2056
|
+
abortController,
|
|
2057
|
+
setupAbortController
|
|
2058
|
+
};
|
|
2059
|
+
}
|
|
2060
|
+
|
|
2061
|
+
// src/hooks/use-click-escape.ts
|
|
2062
|
+
import { useEffect as useEffect5, useRef as useRef3 } from "react";
|
|
2063
|
+
function useClickEscape({ enabled = true, onClick }) {
|
|
2064
|
+
const onClickRef = useRef3(onClick);
|
|
2065
|
+
useEffect5(() => {
|
|
2066
|
+
onClickRef.current = onClick;
|
|
2067
|
+
}, [onClick]);
|
|
2068
|
+
useEffect5(() => {
|
|
2069
|
+
const handleKeyDown = (event) => {
|
|
2070
|
+
if (event.key === "Escape" && enabled) {
|
|
2071
|
+
onClickRef.current?.();
|
|
2072
|
+
}
|
|
2073
|
+
};
|
|
2074
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
2075
|
+
return () => {
|
|
2076
|
+
window.removeEventListener("keydown", handleKeyDown);
|
|
2077
|
+
};
|
|
2078
|
+
}, [enabled]);
|
|
2079
|
+
}
|
|
2080
|
+
|
|
2081
|
+
// src/hooks/use-combined-ref.ts
|
|
1996
2082
|
import { useCallback as useCallback2 } from "react";
|
|
1997
2083
|
function useCombinedRef(...refs) {
|
|
1998
2084
|
return useCallback2(
|
|
@@ -2011,10 +2097,298 @@ function useCombinedRef(...refs) {
|
|
|
2011
2097
|
);
|
|
2012
2098
|
}
|
|
2013
2099
|
|
|
2100
|
+
// src/hooks/use-event.ts
|
|
2101
|
+
import { useCallback as useCallback3, useLayoutEffect, useRef as useRef4 } from "react";
|
|
2102
|
+
function useEvent(fn) {
|
|
2103
|
+
const fnRef = useRef4(fn);
|
|
2104
|
+
useLayoutEffect(() => {
|
|
2105
|
+
fnRef.current = fn;
|
|
2106
|
+
}, [fn]);
|
|
2107
|
+
const eventCb = useCallback3(
|
|
2108
|
+
(...args) => {
|
|
2109
|
+
return fnRef.current?.apply(null, args);
|
|
2110
|
+
},
|
|
2111
|
+
[fnRef]
|
|
2112
|
+
);
|
|
2113
|
+
return eventCb;
|
|
2114
|
+
}
|
|
2115
|
+
|
|
2116
|
+
// src/hooks/use-is-mobile.ts
|
|
2117
|
+
import { useEffect as useEffect6, useState as useState5 } from "react";
|
|
2118
|
+
var MOBILE_BREAKPOINT = 768;
|
|
2119
|
+
function useIsMobile({ breakpoint = MOBILE_BREAKPOINT } = {}) {
|
|
2120
|
+
const [isMobile, setIsMobile] = useState5(void 0);
|
|
2121
|
+
useEffect6(() => {
|
|
2122
|
+
const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
|
|
2123
|
+
const onChange = () => {
|
|
2124
|
+
setIsMobile(window.innerWidth < breakpoint);
|
|
2125
|
+
};
|
|
2126
|
+
mediaQuery.addEventListener("change", onChange);
|
|
2127
|
+
setIsMobile(window.innerWidth < breakpoint);
|
|
2128
|
+
return () => {
|
|
2129
|
+
mediaQuery.removeEventListener("change", onChange);
|
|
2130
|
+
};
|
|
2131
|
+
}, [breakpoint]);
|
|
2132
|
+
return !!isMobile;
|
|
2133
|
+
}
|
|
2134
|
+
|
|
2135
|
+
// src/hooks/use-is-mounted.ts
|
|
2136
|
+
import { useEffect as useEffect7, useRef as useRef5 } from "react";
|
|
2137
|
+
function useIsMounted() {
|
|
2138
|
+
const isMounted = useRef5(false);
|
|
2139
|
+
useEffect7(() => {
|
|
2140
|
+
isMounted.current = true;
|
|
2141
|
+
return () => {
|
|
2142
|
+
isMounted.current = false;
|
|
2143
|
+
};
|
|
2144
|
+
}, []);
|
|
2145
|
+
return isMounted;
|
|
2146
|
+
}
|
|
2147
|
+
|
|
2148
|
+
// src/hooks/use-modal-controls.ts
|
|
2149
|
+
import { useCallback as useCallback4, useState as useState6 } from "react";
|
|
2150
|
+
function useModalControls(initState = false, { disabled } = {}) {
|
|
2151
|
+
const [isOpen, setIsOpen] = useState6(initState);
|
|
2152
|
+
const openModal = useCallback4(() => {
|
|
2153
|
+
if (disabled) return;
|
|
2154
|
+
setIsOpen(true);
|
|
2155
|
+
}, [disabled]);
|
|
2156
|
+
const closeModal = useCallback4(() => {
|
|
2157
|
+
if (disabled) return;
|
|
2158
|
+
setIsOpen(false);
|
|
2159
|
+
}, [disabled]);
|
|
2160
|
+
const toggleModal = useCallback4(() => {
|
|
2161
|
+
if (disabled) return;
|
|
2162
|
+
setIsOpen((value) => !value);
|
|
2163
|
+
}, [disabled]);
|
|
2164
|
+
return {
|
|
2165
|
+
isOpen,
|
|
2166
|
+
openModal,
|
|
2167
|
+
closeModal,
|
|
2168
|
+
toggleModal,
|
|
2169
|
+
setIsOpen
|
|
2170
|
+
};
|
|
2171
|
+
}
|
|
2172
|
+
|
|
2173
|
+
// src/hooks/use-outside-click.ts
|
|
2174
|
+
import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef6 } from "react";
|
|
2175
|
+
function useOutsideClick(elementRef, onOutsideClick, nested) {
|
|
2176
|
+
const handleOutsideClick = useRef6(onOutsideClick);
|
|
2177
|
+
handleOutsideClick.current = onOutsideClick;
|
|
2178
|
+
const checkNestedElements = useCallback5(
|
|
2179
|
+
(event) => {
|
|
2180
|
+
const checkIsElementClickedBySelector = (selector) => {
|
|
2181
|
+
const nestedElement = getDocument().querySelector(selector);
|
|
2182
|
+
return nestedElement?.contains(event.target);
|
|
2183
|
+
};
|
|
2184
|
+
const checkDataAttribute = () => {
|
|
2185
|
+
const target = event.target;
|
|
2186
|
+
if (!target || !(target instanceof HTMLElement)) {
|
|
2187
|
+
return false;
|
|
2188
|
+
}
|
|
2189
|
+
let current = target;
|
|
2190
|
+
while (current) {
|
|
2191
|
+
if (current.hasAttribute("data-exclude-from-outside-click")) {
|
|
2192
|
+
return true;
|
|
2193
|
+
}
|
|
2194
|
+
current = current.parentElement;
|
|
2195
|
+
}
|
|
2196
|
+
return false;
|
|
2197
|
+
};
|
|
2198
|
+
if (nested) {
|
|
2199
|
+
if (typeof nested === "string") {
|
|
2200
|
+
if (checkIsElementClickedBySelector(nested)) return true;
|
|
2201
|
+
} else {
|
|
2202
|
+
if (nested.some(checkIsElementClickedBySelector)) return true;
|
|
2203
|
+
}
|
|
2204
|
+
}
|
|
2205
|
+
return checkDataAttribute();
|
|
2206
|
+
},
|
|
2207
|
+
[nested]
|
|
2208
|
+
);
|
|
2209
|
+
useEffect8(() => {
|
|
2210
|
+
function handleClickOutside(event) {
|
|
2211
|
+
const isNestedElement = checkNestedElements(event);
|
|
2212
|
+
if (elementRef?.current && !elementRef.current.contains(event.target) && !isNestedElement) {
|
|
2213
|
+
handleOutsideClick.current?.(event);
|
|
2214
|
+
}
|
|
2215
|
+
}
|
|
2216
|
+
getDocument().addEventListener("mousedown", handleClickOutside, true);
|
|
2217
|
+
getDocument().addEventListener("touchstart", handleClickOutside, true);
|
|
2218
|
+
return () => {
|
|
2219
|
+
getDocument().removeEventListener("mousedown", handleClickOutside, true);
|
|
2220
|
+
getDocument().removeEventListener("touchstart", handleClickOutside, true);
|
|
2221
|
+
};
|
|
2222
|
+
}, [checkNestedElements, elementRef]);
|
|
2223
|
+
}
|
|
2224
|
+
|
|
2225
|
+
// src/hooks/use-screen-resize.ts
|
|
2226
|
+
import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect2, useState as useState7 } from "react";
|
|
2227
|
+
var eventName = "resize";
|
|
2228
|
+
function useScreenResize(maxWidth) {
|
|
2229
|
+
const [isInitialized, setIsInitialized] = useState7(false);
|
|
2230
|
+
const [isMatch, setIsMatch] = useState7(false);
|
|
2231
|
+
const handleResizeEvent = useCallback6(() => {
|
|
2232
|
+
const adjustedMaxWidth = `${parseInt(maxWidth, 10) - 1}px`;
|
|
2233
|
+
const media = getWindow().matchMedia(`(max-width: ${adjustedMaxWidth})`);
|
|
2234
|
+
setIsInitialized(true);
|
|
2235
|
+
setIsMatch(media?.matches);
|
|
2236
|
+
}, [maxWidth]);
|
|
2237
|
+
useLayoutEffect2(() => {
|
|
2238
|
+
handleResizeEvent();
|
|
2239
|
+
getWindow().addEventListener(eventName, handleResizeEvent);
|
|
2240
|
+
return () => {
|
|
2241
|
+
getWindow().removeEventListener(eventName, handleResizeEvent);
|
|
2242
|
+
};
|
|
2243
|
+
}, [handleResizeEvent]);
|
|
2244
|
+
return { isMatch, isInitialized };
|
|
2245
|
+
}
|
|
2246
|
+
|
|
2247
|
+
// src/hooks/use-scroll-frame-into-view.ts
|
|
2248
|
+
import { useEffect as useEffect9 } from "react";
|
|
2249
|
+
|
|
2250
|
+
// src/lib/runtimeSettings.ts
|
|
2251
|
+
function getChekinRuntimeSettings() {
|
|
2252
|
+
return window.ChekinProSettings || window.ChekinHousingsSDKSettings || {};
|
|
2253
|
+
}
|
|
2254
|
+
function isMobileModalModeAvailable() {
|
|
2255
|
+
const settings = getChekinRuntimeSettings();
|
|
2256
|
+
return !settings.autoHeight;
|
|
2257
|
+
}
|
|
2258
|
+
|
|
2259
|
+
// src/hooks/use-scroll-frame-into-view.ts
|
|
2260
|
+
function useScrollFrameIntoView(active, options = {}) {
|
|
2261
|
+
const { behavior = "smooth", elementRef } = options;
|
|
2262
|
+
useEffect9(() => {
|
|
2263
|
+
const sdkWindow = window;
|
|
2264
|
+
if (!active || !getChekinRuntimeSettings()?.autoHeight) {
|
|
2265
|
+
return;
|
|
2266
|
+
}
|
|
2267
|
+
const frame = sdkWindow.chekinCustomFrame;
|
|
2268
|
+
if (!frame) {
|
|
2269
|
+
return;
|
|
2270
|
+
}
|
|
2271
|
+
const parentWindow = window.parent;
|
|
2272
|
+
const scrollToElement = () => {
|
|
2273
|
+
const frameRect = frame.getBoundingClientRect();
|
|
2274
|
+
if (elementRef?.current) {
|
|
2275
|
+
const elementRect = elementRef.current.getBoundingClientRect();
|
|
2276
|
+
const elementCenterInFrame = elementRect.top + elementRect.height / 2;
|
|
2277
|
+
const elementCenterInParent = frameRect.top + elementCenterInFrame;
|
|
2278
|
+
const targetScroll = parentWindow.scrollY + elementCenterInParent - parentWindow.innerHeight / 2;
|
|
2279
|
+
parentWindow.scrollTo({
|
|
2280
|
+
top: Math.max(0, targetScroll),
|
|
2281
|
+
behavior
|
|
2282
|
+
});
|
|
2283
|
+
return;
|
|
2284
|
+
}
|
|
2285
|
+
frame.scrollIntoView({ behavior, block: "start" });
|
|
2286
|
+
};
|
|
2287
|
+
requestAnimationFrame(() => {
|
|
2288
|
+
requestAnimationFrame(scrollToElement);
|
|
2289
|
+
});
|
|
2290
|
+
}, [active, behavior, elementRef]);
|
|
2291
|
+
}
|
|
2292
|
+
|
|
2293
|
+
// src/hooks/use-debounce.ts
|
|
2294
|
+
import { useEffect as useEffect10, useState as useState8 } from "react";
|
|
2295
|
+
function useDebounce(value, delayMs = 1e3, handleChange) {
|
|
2296
|
+
const onChange = useEvent(handleChange);
|
|
2297
|
+
const [debouncedValue, setDebouncedValue] = useState8(value);
|
|
2298
|
+
useEffect10(() => {
|
|
2299
|
+
const handler = setTimeout(() => {
|
|
2300
|
+
setDebouncedValue(value);
|
|
2301
|
+
}, delayMs);
|
|
2302
|
+
return () => {
|
|
2303
|
+
clearTimeout(handler);
|
|
2304
|
+
};
|
|
2305
|
+
}, [value, delayMs]);
|
|
2306
|
+
useEffect10(() => {
|
|
2307
|
+
onChange?.(debouncedValue);
|
|
2308
|
+
}, [debouncedValue, onChange]);
|
|
2309
|
+
return [debouncedValue, setDebouncedValue];
|
|
2310
|
+
}
|
|
2311
|
+
|
|
2312
|
+
// src/hooks/use-previous.ts
|
|
2313
|
+
import { useEffect as useEffect11, useRef as useRef7 } from "react";
|
|
2314
|
+
function usePrevious(value, defaultValue) {
|
|
2315
|
+
const ref = useRef7(defaultValue);
|
|
2316
|
+
useEffect11(() => {
|
|
2317
|
+
ref.current = isObject(value) ? { ...value } : value;
|
|
2318
|
+
}, [value]);
|
|
2319
|
+
return ref.current;
|
|
2320
|
+
}
|
|
2321
|
+
|
|
2322
|
+
// src/hooks/use-timer.ts
|
|
2323
|
+
import { useEffect as useEffect12, useState as useState9 } from "react";
|
|
2324
|
+
var useTimer = ({ seconds }) => {
|
|
2325
|
+
const [timeLeft, setTimeLeft] = useState9(seconds);
|
|
2326
|
+
const [isTimerRunning, setIsTimerRunning] = useState9(true);
|
|
2327
|
+
useEffect12(() => {
|
|
2328
|
+
if (!isTimerRunning) return;
|
|
2329
|
+
const timer = setInterval(() => {
|
|
2330
|
+
setTimeLeft((prev) => {
|
|
2331
|
+
if (prev <= 1) {
|
|
2332
|
+
clearInterval(timer);
|
|
2333
|
+
setIsTimerRunning(false);
|
|
2334
|
+
return 0;
|
|
2335
|
+
}
|
|
2336
|
+
return prev - 1;
|
|
2337
|
+
});
|
|
2338
|
+
}, 1e3);
|
|
2339
|
+
return () => clearInterval(timer);
|
|
2340
|
+
}, [isTimerRunning]);
|
|
2341
|
+
const resetTimer = () => {
|
|
2342
|
+
setTimeLeft(seconds);
|
|
2343
|
+
setIsTimerRunning(true);
|
|
2344
|
+
};
|
|
2345
|
+
return {
|
|
2346
|
+
timeLeft,
|
|
2347
|
+
isTimerRunning,
|
|
2348
|
+
resetTimer
|
|
2349
|
+
};
|
|
2350
|
+
};
|
|
2351
|
+
|
|
2352
|
+
// src/hooks/use-timeout.ts
|
|
2353
|
+
import { useCallback as useCallback7, useEffect as useEffect13, useRef as useRef8 } from "react";
|
|
2354
|
+
function useTimeout() {
|
|
2355
|
+
const timeoutRef = useRef8();
|
|
2356
|
+
const clearTimeoutRef = useCallback7(() => {
|
|
2357
|
+
clearTimeout(timeoutRef.current);
|
|
2358
|
+
timeoutRef.current = void 0;
|
|
2359
|
+
}, []);
|
|
2360
|
+
const scheduleTimeout = useCallback7(
|
|
2361
|
+
(callback, delay) => {
|
|
2362
|
+
clearTimeoutRef();
|
|
2363
|
+
timeoutRef.current = setTimeout(callback, delay);
|
|
2364
|
+
},
|
|
2365
|
+
[clearTimeoutRef]
|
|
2366
|
+
);
|
|
2367
|
+
useEffect13(() => clearTimeoutRef, [clearTimeoutRef]);
|
|
2368
|
+
return { scheduleTimeout, clearTimeoutRef };
|
|
2369
|
+
}
|
|
2370
|
+
|
|
2371
|
+
// src/hooks/use-hover.ts
|
|
2372
|
+
import { useCallback as useCallback8, useState as useState10 } from "react";
|
|
2373
|
+
function useHover() {
|
|
2374
|
+
const [isHovering, setIsHovering] = useState10(false);
|
|
2375
|
+
const handleMouseEnter = useCallback8(() => {
|
|
2376
|
+
setIsHovering(true);
|
|
2377
|
+
}, []);
|
|
2378
|
+
const handleMouseLeave = useCallback8(() => {
|
|
2379
|
+
setIsHovering(false);
|
|
2380
|
+
}, []);
|
|
2381
|
+
return {
|
|
2382
|
+
isHovering,
|
|
2383
|
+
handleMouseEnter,
|
|
2384
|
+
handleMouseLeave
|
|
2385
|
+
};
|
|
2386
|
+
}
|
|
2387
|
+
|
|
2014
2388
|
// src/dialog/Dialog.tsx
|
|
2015
2389
|
import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2016
2390
|
function useIframeTitleFix(titleRef) {
|
|
2017
|
-
|
|
2391
|
+
React11.useEffect(() => {
|
|
2018
2392
|
if (!window.chekinCustomDocument) {
|
|
2019
2393
|
return;
|
|
2020
2394
|
}
|
|
@@ -2043,7 +2417,7 @@ function DialogClose({ ...props }) {
|
|
|
2043
2417
|
}
|
|
2044
2418
|
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";
|
|
2045
2419
|
var scrollableOverlayClasses = "fixed inset-0 z-50 flex flex-col items-center overflow-y-auto overscroll-none pb-[19px] pt-[20px]";
|
|
2046
|
-
var DialogOverlay =
|
|
2420
|
+
var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
|
|
2047
2421
|
DialogPrimitive.Overlay,
|
|
2048
2422
|
{
|
|
2049
2423
|
ref,
|
|
@@ -2055,7 +2429,7 @@ var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
2055
2429
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
2056
2430
|
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";
|
|
2057
2431
|
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";
|
|
2058
|
-
var DialogContent =
|
|
2432
|
+
var DialogContent = React11.forwardRef(
|
|
2059
2433
|
({ className, showCloseButton = true, children, container, lockScroll = true, ...props }, ref) => {
|
|
2060
2434
|
const contentElement = /* @__PURE__ */ jsxs22(
|
|
2061
2435
|
DialogPrimitive.Content,
|
|
@@ -2103,8 +2477,8 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx29(
|
|
|
2103
2477
|
}
|
|
2104
2478
|
);
|
|
2105
2479
|
DialogFooter.displayName = "DialogFooter";
|
|
2106
|
-
var DialogTitle =
|
|
2107
|
-
const titleRef =
|
|
2480
|
+
var DialogTitle = React11.forwardRef(({ className, ...props }, ref) => {
|
|
2481
|
+
const titleRef = React11.useRef(null);
|
|
2108
2482
|
const combinedRef = useCombinedRef(titleRef, ref);
|
|
2109
2483
|
useIframeTitleFix(titleRef);
|
|
2110
2484
|
return /* @__PURE__ */ jsx29(
|
|
@@ -2118,7 +2492,7 @@ var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => {
|
|
|
2118
2492
|
);
|
|
2119
2493
|
});
|
|
2120
2494
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
2121
|
-
var DialogDescription =
|
|
2495
|
+
var DialogDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
|
|
2122
2496
|
DialogPrimitive.Description,
|
|
2123
2497
|
{
|
|
2124
2498
|
ref,
|
|
@@ -2180,9 +2554,9 @@ function ConfirmationDialog({
|
|
|
2180
2554
|
}
|
|
2181
2555
|
|
|
2182
2556
|
// src/default-select-trigger/DefaultSelectTrigger.tsx
|
|
2183
|
-
import * as
|
|
2557
|
+
import * as React12 from "react";
|
|
2184
2558
|
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
2185
|
-
var DefaultSelectTrigger =
|
|
2559
|
+
var DefaultSelectTrigger = React12.forwardRef(
|
|
2186
2560
|
({
|
|
2187
2561
|
className,
|
|
2188
2562
|
disabled,
|
|
@@ -2246,17 +2620,17 @@ function DownloadEntryFormsButton({
|
|
|
2246
2620
|
}
|
|
2247
2621
|
|
|
2248
2622
|
// src/dropdown-button/DropdownButton.tsx
|
|
2249
|
-
import { useState as
|
|
2623
|
+
import { useState as useState11 } from "react";
|
|
2250
2624
|
|
|
2251
2625
|
// src/dropdown-menu/DropdownMenu.tsx
|
|
2252
|
-
import * as
|
|
2626
|
+
import * as React13 from "react";
|
|
2253
2627
|
import * as RadixMenu from "@radix-ui/react-dropdown-menu";
|
|
2254
2628
|
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
2255
2629
|
var DropdownMenu = RadixMenu.Root;
|
|
2256
2630
|
var DropdownMenuTrigger = RadixMenu.Trigger;
|
|
2257
2631
|
var DropdownMenuPortal = RadixMenu.Portal;
|
|
2258
2632
|
var DropdownMenuGroup = RadixMenu.Group;
|
|
2259
|
-
var DropdownMenuContent =
|
|
2633
|
+
var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 6, container, ...props }, ref) => /* @__PURE__ */ jsx33(RadixMenu.Portal, { container: container || getCustomContainer(), children: /* @__PURE__ */ jsx33(
|
|
2260
2634
|
RadixMenu.Content,
|
|
2261
2635
|
{
|
|
2262
2636
|
ref,
|
|
@@ -2277,9 +2651,9 @@ var itemClasses = [
|
|
|
2277
2651
|
"data-[highlighted]:bg-chekin-surface-pressed data-[highlighted]:text-chekin-blue",
|
|
2278
2652
|
"data-[disabled]:pointer-events-none data-[disabled]:opacity-30"
|
|
2279
2653
|
];
|
|
2280
|
-
var DropdownMenuItem =
|
|
2654
|
+
var DropdownMenuItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(RadixMenu.Item, { ref, className: cn(itemClasses, className), ...props }));
|
|
2281
2655
|
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
2282
|
-
var DropdownMenuLabel =
|
|
2656
|
+
var DropdownMenuLabel = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
|
|
2283
2657
|
RadixMenu.Label,
|
|
2284
2658
|
{
|
|
2285
2659
|
ref,
|
|
@@ -2291,7 +2665,7 @@ var DropdownMenuLabel = React12.forwardRef(({ className, ...props }, ref) => /*
|
|
|
2291
2665
|
}
|
|
2292
2666
|
));
|
|
2293
2667
|
DropdownMenuLabel.displayName = "DropdownMenuLabel";
|
|
2294
|
-
var DropdownMenuSeparator =
|
|
2668
|
+
var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
|
|
2295
2669
|
RadixMenu.Separator,
|
|
2296
2670
|
{
|
|
2297
2671
|
ref,
|
|
@@ -2310,7 +2684,7 @@ function DropdownButton({
|
|
|
2310
2684
|
modal,
|
|
2311
2685
|
className
|
|
2312
2686
|
}) {
|
|
2313
|
-
const [isOpen, setIsOpen] =
|
|
2687
|
+
const [isOpen, setIsOpen] = useState11(false);
|
|
2314
2688
|
return /* @__PURE__ */ jsxs25(DropdownMenu, { onOpenChange: setIsOpen, modal, children: [
|
|
2315
2689
|
/* @__PURE__ */ jsx34(DropdownMenuTrigger, { asChild: true, children: typeof trigger === "function" ? trigger(isOpen) : trigger }),
|
|
2316
2690
|
/* @__PURE__ */ jsx34(
|
|
@@ -2523,9 +2897,9 @@ function EmptySectionPlaceholder({
|
|
|
2523
2897
|
}
|
|
2524
2898
|
|
|
2525
2899
|
// src/external-link/ExternalLink.tsx
|
|
2526
|
-
import * as
|
|
2900
|
+
import * as React14 from "react";
|
|
2527
2901
|
import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2528
|
-
var ExternalLink =
|
|
2902
|
+
var ExternalLink = React14.forwardRef(
|
|
2529
2903
|
({ className, children, showIcon = true, target = "_blank", rel, ...props }, ref) => /* @__PURE__ */ jsxs27(
|
|
2530
2904
|
"a",
|
|
2531
2905
|
{
|
|
@@ -2570,33 +2944,8 @@ ExternalLink.displayName = "ExternalLink";
|
|
|
2570
2944
|
import { useTranslation as useTranslation9 } from "react-i18next";
|
|
2571
2945
|
import { Play as Play3 } from "lucide-react";
|
|
2572
2946
|
|
|
2573
|
-
// src/lib/use-modal-controls.ts
|
|
2574
|
-
import { useCallback as useCallback3, useState as useState6 } from "react";
|
|
2575
|
-
function useModalControls(initState = false, { disabled } = {}) {
|
|
2576
|
-
const [isOpen, setIsOpen] = useState6(initState);
|
|
2577
|
-
const openModal = useCallback3(() => {
|
|
2578
|
-
if (disabled) return;
|
|
2579
|
-
setIsOpen(true);
|
|
2580
|
-
}, [disabled]);
|
|
2581
|
-
const closeModal = useCallback3(() => {
|
|
2582
|
-
if (disabled) return;
|
|
2583
|
-
setIsOpen(false);
|
|
2584
|
-
}, [disabled]);
|
|
2585
|
-
const toggleModal = useCallback3(() => {
|
|
2586
|
-
if (disabled) return;
|
|
2587
|
-
setIsOpen((value) => !value);
|
|
2588
|
-
}, [disabled]);
|
|
2589
|
-
return {
|
|
2590
|
-
isOpen,
|
|
2591
|
-
openModal,
|
|
2592
|
-
closeModal,
|
|
2593
|
-
toggleModal,
|
|
2594
|
-
setIsOpen
|
|
2595
|
-
};
|
|
2596
|
-
}
|
|
2597
|
-
|
|
2598
2947
|
// src/switch/Switch.tsx
|
|
2599
|
-
import * as
|
|
2948
|
+
import * as React15 from "react";
|
|
2600
2949
|
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
2601
2950
|
import { cva as cva7 } from "class-variance-authority";
|
|
2602
2951
|
import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
@@ -2638,9 +2987,9 @@ var switchThumbVariants = cva7(
|
|
|
2638
2987
|
}
|
|
2639
2988
|
}
|
|
2640
2989
|
);
|
|
2641
|
-
var Switch =
|
|
2990
|
+
var Switch = React15.forwardRef(
|
|
2642
2991
|
({ className, size, readOnly, loading, onChange, value, id, label, error, ...props }, ref) => {
|
|
2643
|
-
const generatedId =
|
|
2992
|
+
const generatedId = React15.useId();
|
|
2644
2993
|
const fieldId = id || generatedId;
|
|
2645
2994
|
const switchElement = /* @__PURE__ */ jsx44(
|
|
2646
2995
|
SwitchPrimitives.Root,
|
|
@@ -2673,7 +3022,7 @@ var Switch = React14.forwardRef(
|
|
|
2673
3022
|
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
2674
3023
|
|
|
2675
3024
|
// src/video-player/VideoPlayer.tsx
|
|
2676
|
-
import { useEffect as
|
|
3025
|
+
import { useEffect as useEffect15, useRef as useRef10, useState as useState12 } from "react";
|
|
2677
3026
|
import { useTranslation as useTranslation8 } from "react-i18next";
|
|
2678
3027
|
import {
|
|
2679
3028
|
Loader2,
|
|
@@ -2687,28 +3036,6 @@ import {
|
|
|
2687
3036
|
VolumeX,
|
|
2688
3037
|
X as X2
|
|
2689
3038
|
} from "lucide-react";
|
|
2690
|
-
|
|
2691
|
-
// src/lib/use-click-escape.ts
|
|
2692
|
-
import { useEffect as useEffect5, useRef as useRef4 } from "react";
|
|
2693
|
-
function useClickEscape({ enabled = true, onClick }) {
|
|
2694
|
-
const onClickRef = useRef4(onClick);
|
|
2695
|
-
useEffect5(() => {
|
|
2696
|
-
onClickRef.current = onClick;
|
|
2697
|
-
}, [onClick]);
|
|
2698
|
-
useEffect5(() => {
|
|
2699
|
-
const handleKeyDown = (event) => {
|
|
2700
|
-
if (event.key === "Escape" && enabled) {
|
|
2701
|
-
onClickRef.current?.();
|
|
2702
|
-
}
|
|
2703
|
-
};
|
|
2704
|
-
window.addEventListener("keydown", handleKeyDown);
|
|
2705
|
-
return () => {
|
|
2706
|
-
window.removeEventListener("keydown", handleKeyDown);
|
|
2707
|
-
};
|
|
2708
|
-
}, [enabled]);
|
|
2709
|
-
}
|
|
2710
|
-
|
|
2711
|
-
// src/video-player/VideoPlayer.tsx
|
|
2712
3039
|
import { Fragment as Fragment4, jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2713
3040
|
function VideoPlayer({
|
|
2714
3041
|
src,
|
|
@@ -2719,20 +3046,20 @@ function VideoPlayer({
|
|
|
2719
3046
|
autoPlay = false
|
|
2720
3047
|
}) {
|
|
2721
3048
|
const { t } = useTranslation8();
|
|
2722
|
-
const videoRef =
|
|
2723
|
-
const iframeRef =
|
|
2724
|
-
const containerRef =
|
|
2725
|
-
const [isPlaying, setIsPlaying] =
|
|
2726
|
-
const [isMuted, setIsMuted] =
|
|
2727
|
-
const [currentTime, setCurrentTime] =
|
|
2728
|
-
const [duration, setDuration] =
|
|
2729
|
-
const [isFullScreenMode, setIsFullScreenMode] =
|
|
2730
|
-
const [isLoading, setIsLoading] =
|
|
2731
|
-
const [videoSource, setVideoSource] =
|
|
2732
|
-
const [youtubeEmbedUrl, setYoutubeEmbedUrl] =
|
|
2733
|
-
const [vimeoEmbedUrl, setVimeoEmbedUrl] =
|
|
3049
|
+
const videoRef = useRef10(null);
|
|
3050
|
+
const iframeRef = useRef10(null);
|
|
3051
|
+
const containerRef = useRef10(null);
|
|
3052
|
+
const [isPlaying, setIsPlaying] = useState12(false);
|
|
3053
|
+
const [isMuted, setIsMuted] = useState12(false);
|
|
3054
|
+
const [currentTime, setCurrentTime] = useState12(0);
|
|
3055
|
+
const [duration, setDuration] = useState12(0);
|
|
3056
|
+
const [isFullScreenMode, setIsFullScreenMode] = useState12(isFullScreen);
|
|
3057
|
+
const [isLoading, setIsLoading] = useState12(true);
|
|
3058
|
+
const [videoSource, setVideoSource] = useState12("file");
|
|
3059
|
+
const [youtubeEmbedUrl, setYoutubeEmbedUrl] = useState12("");
|
|
3060
|
+
const [vimeoEmbedUrl, setVimeoEmbedUrl] = useState12("");
|
|
2734
3061
|
useClickEscape({ enabled: isFullScreenMode, onClick: onClose });
|
|
2735
|
-
|
|
3062
|
+
useEffect15(() => {
|
|
2736
3063
|
const youtubeRegex = /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/;
|
|
2737
3064
|
const vimeoRegex = /(?:vimeo\.com\/|vimeo\.com\/video\/)(\d+)/;
|
|
2738
3065
|
const youtubeMatch = src.match(youtubeRegex);
|
|
@@ -2761,7 +3088,7 @@ function VideoPlayer({
|
|
|
2761
3088
|
setYoutubeEmbedUrl("");
|
|
2762
3089
|
setVimeoEmbedUrl("");
|
|
2763
3090
|
}, [src, autoPlay]);
|
|
2764
|
-
|
|
3091
|
+
useEffect15(() => {
|
|
2765
3092
|
if (videoSource !== "file") return;
|
|
2766
3093
|
const video = videoRef.current;
|
|
2767
3094
|
if (!video) return;
|
|
@@ -2789,7 +3116,7 @@ function VideoPlayer({
|
|
|
2789
3116
|
video.removeEventListener("canplay", handleCanPlay);
|
|
2790
3117
|
};
|
|
2791
3118
|
}, [videoSource]);
|
|
2792
|
-
|
|
3119
|
+
useEffect15(() => {
|
|
2793
3120
|
if (isFullScreenMode && videoRef.current && videoSource === "file") {
|
|
2794
3121
|
void videoRef.current.play();
|
|
2795
3122
|
setIsPlaying(true);
|
|
@@ -3068,7 +3395,7 @@ function FeatureCard({
|
|
|
3068
3395
|
// src/file-input-button/FileInputButton.tsx
|
|
3069
3396
|
import {
|
|
3070
3397
|
forwardRef as forwardRef19,
|
|
3071
|
-
useCallback as
|
|
3398
|
+
useCallback as useCallback9
|
|
3072
3399
|
} from "react";
|
|
3073
3400
|
import { Upload } from "lucide-react";
|
|
3074
3401
|
import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
@@ -3084,7 +3411,7 @@ var FileInputButton = forwardRef19(
|
|
|
3084
3411
|
size = "default",
|
|
3085
3412
|
...props
|
|
3086
3413
|
}, ref) => {
|
|
3087
|
-
const handleChange =
|
|
3414
|
+
const handleChange = useCallback9(
|
|
3088
3415
|
(event) => {
|
|
3089
3416
|
onChange?.(event);
|
|
3090
3417
|
event.target.value = "";
|
|
@@ -3167,7 +3494,7 @@ var FormBox = {
|
|
|
3167
3494
|
import {
|
|
3168
3495
|
forwardRef as forwardRef20,
|
|
3169
3496
|
useId as useId4,
|
|
3170
|
-
useState as
|
|
3497
|
+
useState as useState13
|
|
3171
3498
|
} from "react";
|
|
3172
3499
|
import { useTranslation as useTranslation10 } from "react-i18next";
|
|
3173
3500
|
|
|
@@ -3199,8 +3526,8 @@ var FreeTextField = forwardRef20(
|
|
|
3199
3526
|
}, ref) => {
|
|
3200
3527
|
const { t } = useTranslation10();
|
|
3201
3528
|
const inputId = useId4();
|
|
3202
|
-
const [internalValue, setInternalValue] =
|
|
3203
|
-
const [isFocused, setIsFocused] =
|
|
3529
|
+
const [internalValue, setInternalValue] = useState13(defaultValue ?? "");
|
|
3530
|
+
const [isFocused, setIsFocused] = useState13(false);
|
|
3204
3531
|
const currentValue = value !== void 0 ? value : internalValue;
|
|
3205
3532
|
const isEmpty = !currentValue || String(currentValue).length === 0;
|
|
3206
3533
|
const hasError = Boolean(error);
|
|
@@ -3284,7 +3611,7 @@ var FreeTextField = forwardRef20(
|
|
|
3284
3611
|
FreeTextField.displayName = "FreeTextField";
|
|
3285
3612
|
|
|
3286
3613
|
// src/framed-icon/FramedIcon.tsx
|
|
3287
|
-
import * as
|
|
3614
|
+
import * as React16 from "react";
|
|
3288
3615
|
import { cva as cva8 } from "class-variance-authority";
|
|
3289
3616
|
import { jsx as jsx53 } from "react/jsx-runtime";
|
|
3290
3617
|
var framedIconVariants = cva8("inline-flex items-center justify-center shrink-0", {
|
|
@@ -3308,7 +3635,7 @@ var framedIconVariants = cva8("inline-flex items-center justify-center shrink-0"
|
|
|
3308
3635
|
},
|
|
3309
3636
|
defaultVariants: { size: "m", shape: "rounded", tone: "info" }
|
|
3310
3637
|
});
|
|
3311
|
-
var FramedIcon =
|
|
3638
|
+
var FramedIcon = React16.forwardRef(
|
|
3312
3639
|
({ className, size, shape, tone, children, ...props }, ref) => /* @__PURE__ */ jsx53(
|
|
3313
3640
|
"span",
|
|
3314
3641
|
{
|
|
@@ -3470,7 +3797,7 @@ var IconRegistry = class {
|
|
|
3470
3797
|
var RegistryIcon = Icon;
|
|
3471
3798
|
|
|
3472
3799
|
// src/icon-button/IconButton.tsx
|
|
3473
|
-
import * as
|
|
3800
|
+
import * as React17 from "react";
|
|
3474
3801
|
import { cva as cva9 } from "class-variance-authority";
|
|
3475
3802
|
import { jsx as jsx57 } from "react/jsx-runtime";
|
|
3476
3803
|
var iconButtonVariants = cva9(
|
|
@@ -3501,7 +3828,7 @@ var iconButtonVariants = cva9(
|
|
|
3501
3828
|
defaultVariants: { size: "m", shape: "rounded", variant: "secondary" }
|
|
3502
3829
|
}
|
|
3503
3830
|
);
|
|
3504
|
-
var IconButton =
|
|
3831
|
+
var IconButton = React17.forwardRef(
|
|
3505
3832
|
({ className, size, shape, variant, label, children, type = "button", ...props }, ref) => /* @__PURE__ */ jsx57(
|
|
3506
3833
|
"button",
|
|
3507
3834
|
{
|
|
@@ -3532,7 +3859,7 @@ function InfoBox({ className, children }) {
|
|
|
3532
3859
|
}
|
|
3533
3860
|
|
|
3534
3861
|
// src/image/Image.tsx
|
|
3535
|
-
import { useState as
|
|
3862
|
+
import { useState as useState14 } from "react";
|
|
3536
3863
|
import { jsx as jsx59 } from "react/jsx-runtime";
|
|
3537
3864
|
function Image2({
|
|
3538
3865
|
src,
|
|
@@ -3541,7 +3868,7 @@ function Image2({
|
|
|
3541
3868
|
fallbackSrc = "https://placehold.co/600x400?text=Image",
|
|
3542
3869
|
...props
|
|
3543
3870
|
}) {
|
|
3544
|
-
const [error, setError] =
|
|
3871
|
+
const [error, setError] = useState14(false);
|
|
3545
3872
|
return /* @__PURE__ */ jsx59(
|
|
3546
3873
|
"img",
|
|
3547
3874
|
{
|
|
@@ -3556,9 +3883,9 @@ function Image2({
|
|
|
3556
3883
|
}
|
|
3557
3884
|
|
|
3558
3885
|
// src/input/Input.tsx
|
|
3559
|
-
import * as
|
|
3886
|
+
import * as React18 from "react";
|
|
3560
3887
|
import { jsx as jsx60 } from "react/jsx-runtime";
|
|
3561
|
-
var Input =
|
|
3888
|
+
var Input = React18.forwardRef(
|
|
3562
3889
|
({ className, type, readOnly, ...props }, ref) => /* @__PURE__ */ jsx60(
|
|
3563
3890
|
"input",
|
|
3564
3891
|
{
|
|
@@ -3582,7 +3909,7 @@ var Input = React17.forwardRef(
|
|
|
3582
3909
|
Input.displayName = "Input";
|
|
3583
3910
|
|
|
3584
3911
|
// src/input-otp/InputOTP.tsx
|
|
3585
|
-
import * as
|
|
3912
|
+
import * as React19 from "react";
|
|
3586
3913
|
|
|
3587
3914
|
// src/input-otp/InputOTPContext.ts
|
|
3588
3915
|
import { createContext, useContext } from "react";
|
|
@@ -3600,7 +3927,7 @@ function extractDigits(str) {
|
|
|
3600
3927
|
}
|
|
3601
3928
|
|
|
3602
3929
|
// src/input-otp/useInputOTP.ts
|
|
3603
|
-
import { useCallback as
|
|
3930
|
+
import { useCallback as useCallback10, useEffect as useEffect16, useMemo, useRef as useRef11, useState as useState15 } from "react";
|
|
3604
3931
|
function useInputOTP({
|
|
3605
3932
|
maxLength,
|
|
3606
3933
|
value,
|
|
@@ -3609,11 +3936,11 @@ function useInputOTP({
|
|
|
3609
3936
|
autoFocus,
|
|
3610
3937
|
error
|
|
3611
3938
|
}) {
|
|
3612
|
-
const [activeIndex, setActiveIndex] =
|
|
3613
|
-
const inputRefs =
|
|
3614
|
-
const containerRef =
|
|
3615
|
-
const blurTimeoutRef =
|
|
3616
|
-
const slotsRef =
|
|
3939
|
+
const [activeIndex, setActiveIndex] = useState15(-1);
|
|
3940
|
+
const inputRefs = useRef11([]);
|
|
3941
|
+
const containerRef = useRef11(null);
|
|
3942
|
+
const blurTimeoutRef = useRef11();
|
|
3943
|
+
const slotsRef = useRef11(Array.from({ length: maxLength }, () => ""));
|
|
3617
3944
|
const slots = useMemo(() => {
|
|
3618
3945
|
const nextSlots = Array.from({ length: maxLength }, () => "");
|
|
3619
3946
|
for (let index = 0; index < Math.min(value.length, maxLength); index += 1) {
|
|
@@ -3625,7 +3952,7 @@ function useInputOTP({
|
|
|
3625
3952
|
return nextSlots;
|
|
3626
3953
|
}, [value, maxLength]);
|
|
3627
3954
|
slotsRef.current = slots;
|
|
3628
|
-
const emitValue =
|
|
3955
|
+
const emitValue = useCallback10(
|
|
3629
3956
|
(newSlots) => {
|
|
3630
3957
|
let lastFilledIndex = -1;
|
|
3631
3958
|
for (let index = newSlots.length - 1; index >= 0; index -= 1) {
|
|
@@ -3646,12 +3973,12 @@ function useInputOTP({
|
|
|
3646
3973
|
},
|
|
3647
3974
|
[onChange]
|
|
3648
3975
|
);
|
|
3649
|
-
|
|
3976
|
+
useEffect16(() => {
|
|
3650
3977
|
if (autoFocus && inputRefs.current[0]) {
|
|
3651
3978
|
inputRefs.current[0].focus();
|
|
3652
3979
|
}
|
|
3653
3980
|
}, [autoFocus]);
|
|
3654
|
-
const handleContainerFocusIn =
|
|
3981
|
+
const handleContainerFocusIn = useCallback10((event) => {
|
|
3655
3982
|
clearTimeout(blurTimeoutRef.current);
|
|
3656
3983
|
const target = event.target;
|
|
3657
3984
|
const slotIndex = inputRefs.current.indexOf(target);
|
|
@@ -3659,7 +3986,7 @@ function useInputOTP({
|
|
|
3659
3986
|
setActiveIndex(slotIndex);
|
|
3660
3987
|
}
|
|
3661
3988
|
}, []);
|
|
3662
|
-
const handleContainerFocusOut =
|
|
3989
|
+
const handleContainerFocusOut = useCallback10(() => {
|
|
3663
3990
|
clearTimeout(blurTimeoutRef.current);
|
|
3664
3991
|
blurTimeoutRef.current = setTimeout(() => {
|
|
3665
3992
|
if (!containerRef.current?.contains(document.activeElement)) {
|
|
@@ -3667,8 +3994,8 @@ function useInputOTP({
|
|
|
3667
3994
|
}
|
|
3668
3995
|
}, 0);
|
|
3669
3996
|
}, []);
|
|
3670
|
-
|
|
3671
|
-
const handleDigitInput =
|
|
3997
|
+
useEffect16(() => () => clearTimeout(blurTimeoutRef.current), []);
|
|
3998
|
+
const handleDigitInput = useCallback10(
|
|
3672
3999
|
(index, digit) => {
|
|
3673
4000
|
if (!DIGIT_REGEX.test(digit)) return;
|
|
3674
4001
|
const newSlots = [...slotsRef.current];
|
|
@@ -3682,7 +4009,7 @@ function useInputOTP({
|
|
|
3682
4009
|
},
|
|
3683
4010
|
[maxLength, emitValue]
|
|
3684
4011
|
);
|
|
3685
|
-
const handleDelete =
|
|
4012
|
+
const handleDelete = useCallback10(
|
|
3686
4013
|
(index) => {
|
|
3687
4014
|
const newSlots = [...slotsRef.current];
|
|
3688
4015
|
if (newSlots[index]) {
|
|
@@ -3697,7 +4024,7 @@ function useInputOTP({
|
|
|
3697
4024
|
},
|
|
3698
4025
|
[emitValue]
|
|
3699
4026
|
);
|
|
3700
|
-
const handlePaste =
|
|
4027
|
+
const handlePaste = useCallback10(
|
|
3701
4028
|
(text) => {
|
|
3702
4029
|
const digits = extractDigits(text).slice(0, maxLength);
|
|
3703
4030
|
if (digits.length > 0) {
|
|
@@ -3747,7 +4074,7 @@ function useInputOTP({
|
|
|
3747
4074
|
|
|
3748
4075
|
// src/input-otp/useInputOTPSlot.ts
|
|
3749
4076
|
import {
|
|
3750
|
-
useCallback as
|
|
4077
|
+
useCallback as useCallback11
|
|
3751
4078
|
} from "react";
|
|
3752
4079
|
function useInputOTPSlot(index) {
|
|
3753
4080
|
const {
|
|
@@ -3818,13 +4145,13 @@ function useInputOTPSlot(index) {
|
|
|
3818
4145
|
event.preventDefault();
|
|
3819
4146
|
handlePaste(event.clipboardData.getData("text/plain"));
|
|
3820
4147
|
};
|
|
3821
|
-
const setInputRef =
|
|
4148
|
+
const setInputRef = useCallback11(
|
|
3822
4149
|
(element) => {
|
|
3823
4150
|
inputRefs.current[index] = element;
|
|
3824
4151
|
},
|
|
3825
4152
|
[index, inputRefs]
|
|
3826
4153
|
);
|
|
3827
|
-
const focusSlot =
|
|
4154
|
+
const focusSlot = useCallback11(() => {
|
|
3828
4155
|
inputRefs.current[index]?.focus();
|
|
3829
4156
|
}, [index, inputRefs]);
|
|
3830
4157
|
return {
|
|
@@ -3867,11 +4194,11 @@ function InputOTP({
|
|
|
3867
4194
|
}
|
|
3868
4195
|
) });
|
|
3869
4196
|
}
|
|
3870
|
-
var InputOTPGroup =
|
|
4197
|
+
var InputOTPGroup = React19.forwardRef(
|
|
3871
4198
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx61("div", { ref, className: cn("flex items-center", className), ...props })
|
|
3872
4199
|
);
|
|
3873
4200
|
InputOTPGroup.displayName = "InputOTPGroup";
|
|
3874
|
-
var InputOTPSlot =
|
|
4201
|
+
var InputOTPSlot = React19.forwardRef(
|
|
3875
4202
|
({ index, className, ...props }, ref) => {
|
|
3876
4203
|
const {
|
|
3877
4204
|
char,
|
|
@@ -3920,13 +4247,13 @@ var InputOTPSlot = React18.forwardRef(
|
|
|
3920
4247
|
}
|
|
3921
4248
|
);
|
|
3922
4249
|
InputOTPSlot.displayName = "InputOTPSlot";
|
|
3923
|
-
var InputOTPSeparator =
|
|
4250
|
+
var InputOTPSeparator = React19.forwardRef(
|
|
3924
4251
|
(props, ref) => /* @__PURE__ */ jsx61("div", { ref, role: "separator", ...props })
|
|
3925
4252
|
);
|
|
3926
4253
|
InputOTPSeparator.displayName = "InputOTPSeparator";
|
|
3927
4254
|
|
|
3928
4255
|
// src/icons-dropdown/IconsDropdown.tsx
|
|
3929
|
-
import { useState as
|
|
4256
|
+
import { useState as useState16 } from "react";
|
|
3930
4257
|
import { jsx as jsx62, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
3931
4258
|
function IconsDropdown({
|
|
3932
4259
|
icons,
|
|
@@ -3938,7 +4265,7 @@ function IconsDropdown({
|
|
|
3938
4265
|
defaultOpen,
|
|
3939
4266
|
onOpenChange: onOpenChangeProp
|
|
3940
4267
|
}) {
|
|
3941
|
-
const [open, setOpen] =
|
|
4268
|
+
const [open, setOpen] = useState16(defaultOpen ?? false);
|
|
3942
4269
|
function handleOpenChange(value) {
|
|
3943
4270
|
setOpen(value);
|
|
3944
4271
|
onOpenChangeProp?.(value);
|
|
@@ -4545,14 +4872,14 @@ LinkInternal.displayName = "Link";
|
|
|
4545
4872
|
var Link = memo3(LinkInternal);
|
|
4546
4873
|
|
|
4547
4874
|
// src/image-full-screen-view/ImageFullScreenView.tsx
|
|
4548
|
-
import { useState as
|
|
4875
|
+
import { useState as useState17 } from "react";
|
|
4549
4876
|
import { RotateCw, X as X4, ZoomIn, ZoomOut } from "lucide-react";
|
|
4550
4877
|
import { useTranslation as useTranslation13 } from "react-i18next";
|
|
4551
4878
|
import { jsx as jsx67, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
4552
4879
|
function ImageFullScreenView({ src, alt, onClose }) {
|
|
4553
4880
|
const { t } = useTranslation13();
|
|
4554
|
-
const [scale, setScale] =
|
|
4555
|
-
const [rotation, setRotation] =
|
|
4881
|
+
const [scale, setScale] = useState17(1);
|
|
4882
|
+
const [rotation, setRotation] = useState17(0);
|
|
4556
4883
|
useClickEscape({ onClick: onClose });
|
|
4557
4884
|
const zoomIn = () => setScale((value) => Math.min(value + 0.25, 3));
|
|
4558
4885
|
const zoomOut = () => setScale((value) => Math.max(value - 0.25, 0.5));
|
|
@@ -4750,55 +5077,9 @@ var METRIC_CARD_VARIANTS = {
|
|
|
4750
5077
|
};
|
|
4751
5078
|
|
|
4752
5079
|
// src/modal/Modal.tsx
|
|
4753
|
-
import { forwardRef as forwardRef28, useRef as
|
|
5080
|
+
import { forwardRef as forwardRef28, useRef as useRef12 } from "react";
|
|
4754
5081
|
import { X as X5 } from "lucide-react";
|
|
4755
5082
|
|
|
4756
|
-
// src/lib/use-scroll-frame-into-view.ts
|
|
4757
|
-
import { useEffect as useEffect8 } from "react";
|
|
4758
|
-
|
|
4759
|
-
// src/lib/runtimeSettings.ts
|
|
4760
|
-
function getChekinRuntimeSettings() {
|
|
4761
|
-
return window.ChekinProSettings || window.ChekinHousingsSDKSettings || {};
|
|
4762
|
-
}
|
|
4763
|
-
function isMobileModalModeAvailable() {
|
|
4764
|
-
const settings = getChekinRuntimeSettings();
|
|
4765
|
-
return !settings.autoHeight;
|
|
4766
|
-
}
|
|
4767
|
-
|
|
4768
|
-
// src/lib/use-scroll-frame-into-view.ts
|
|
4769
|
-
function useScrollFrameIntoView(active, options = {}) {
|
|
4770
|
-
const { behavior = "smooth", elementRef } = options;
|
|
4771
|
-
useEffect8(() => {
|
|
4772
|
-
const sdkWindow = window;
|
|
4773
|
-
if (!active || !getChekinRuntimeSettings()?.autoHeight) {
|
|
4774
|
-
return;
|
|
4775
|
-
}
|
|
4776
|
-
const frame = sdkWindow.chekinCustomFrame;
|
|
4777
|
-
if (!frame) {
|
|
4778
|
-
return;
|
|
4779
|
-
}
|
|
4780
|
-
const parentWindow = window.parent;
|
|
4781
|
-
const scrollToElement = () => {
|
|
4782
|
-
const frameRect = frame.getBoundingClientRect();
|
|
4783
|
-
if (elementRef?.current) {
|
|
4784
|
-
const elementRect = elementRef.current.getBoundingClientRect();
|
|
4785
|
-
const elementCenterInFrame = elementRect.top + elementRect.height / 2;
|
|
4786
|
-
const elementCenterInParent = frameRect.top + elementCenterInFrame;
|
|
4787
|
-
const targetScroll = parentWindow.scrollY + elementCenterInParent - parentWindow.innerHeight / 2;
|
|
4788
|
-
parentWindow.scrollTo({
|
|
4789
|
-
top: Math.max(0, targetScroll),
|
|
4790
|
-
behavior
|
|
4791
|
-
});
|
|
4792
|
-
return;
|
|
4793
|
-
}
|
|
4794
|
-
frame.scrollIntoView({ behavior, block: "start" });
|
|
4795
|
-
};
|
|
4796
|
-
requestAnimationFrame(() => {
|
|
4797
|
-
requestAnimationFrame(scrollToElement);
|
|
4798
|
-
});
|
|
4799
|
-
}, [active, behavior, elementRef]);
|
|
4800
|
-
}
|
|
4801
|
-
|
|
4802
5083
|
// src/modal/styles.module.css
|
|
4803
5084
|
var styles_default4 = {};
|
|
4804
5085
|
|
|
@@ -4827,7 +5108,7 @@ function Modal({
|
|
|
4827
5108
|
container,
|
|
4828
5109
|
modal
|
|
4829
5110
|
}) {
|
|
4830
|
-
const contentRef =
|
|
5111
|
+
const contentRef = useRef12(null);
|
|
4831
5112
|
useScrollFrameIntoView(open, { elementRef: contentRef });
|
|
4832
5113
|
const handleClose = () => {
|
|
4833
5114
|
onOpenChange?.(false);
|
|
@@ -4957,14 +5238,14 @@ import { useTranslation as useTranslation16 } from "react-i18next";
|
|
|
4957
5238
|
import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, ChevronsLeft, ChevronsRight } from "lucide-react";
|
|
4958
5239
|
|
|
4959
5240
|
// src/select/Select.tsx
|
|
4960
|
-
import * as
|
|
5241
|
+
import * as React20 from "react";
|
|
4961
5242
|
import * as RadixSelect from "@radix-ui/react-select";
|
|
4962
5243
|
import { jsx as jsx74, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
4963
5244
|
var SelectRoot = RadixSelect.Root;
|
|
4964
5245
|
var SelectValue = RadixSelect.Value;
|
|
4965
5246
|
var SelectGroup = RadixSelect.Group;
|
|
4966
5247
|
var SelectPortal = RadixSelect.Portal;
|
|
4967
|
-
var SelectTrigger =
|
|
5248
|
+
var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs46(
|
|
4968
5249
|
RadixSelect.Trigger,
|
|
4969
5250
|
{
|
|
4970
5251
|
ref,
|
|
@@ -5005,7 +5286,7 @@ var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref)
|
|
|
5005
5286
|
}
|
|
5006
5287
|
));
|
|
5007
5288
|
SelectTrigger.displayName = "SelectTrigger";
|
|
5008
|
-
var SelectContent =
|
|
5289
|
+
var SelectContent = React20.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx74(RadixSelect.Portal, { children: /* @__PURE__ */ jsx74(
|
|
5009
5290
|
RadixSelect.Content,
|
|
5010
5291
|
{
|
|
5011
5292
|
ref,
|
|
@@ -5024,7 +5305,7 @@ var SelectContent = React19.forwardRef(({ className, children, position = "poppe
|
|
|
5024
5305
|
}
|
|
5025
5306
|
) }));
|
|
5026
5307
|
SelectContent.displayName = "SelectContent";
|
|
5027
|
-
var SelectItem =
|
|
5308
|
+
var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs46(
|
|
5028
5309
|
RadixSelect.Item,
|
|
5029
5310
|
{
|
|
5030
5311
|
ref,
|
|
@@ -5059,7 +5340,7 @@ var SelectItem = React19.forwardRef(({ className, children, ...props }, ref) =>
|
|
|
5059
5340
|
}
|
|
5060
5341
|
));
|
|
5061
5342
|
SelectItem.displayName = "SelectItem";
|
|
5062
|
-
var SelectSeparator =
|
|
5343
|
+
var SelectSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx74(
|
|
5063
5344
|
RadixSelect.Separator,
|
|
5064
5345
|
{
|
|
5065
5346
|
ref,
|
|
@@ -5068,7 +5349,7 @@ var SelectSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @_
|
|
|
5068
5349
|
}
|
|
5069
5350
|
));
|
|
5070
5351
|
SelectSeparator.displayName = "SelectSeparator";
|
|
5071
|
-
var SelectLabel =
|
|
5352
|
+
var SelectLabel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx74(
|
|
5072
5353
|
RadixSelect.Label,
|
|
5073
5354
|
{
|
|
5074
5355
|
ref,
|
|
@@ -5080,7 +5361,7 @@ var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
5080
5361
|
}
|
|
5081
5362
|
));
|
|
5082
5363
|
SelectLabel.displayName = "SelectLabel";
|
|
5083
|
-
var Select =
|
|
5364
|
+
var Select = React20.forwardRef(
|
|
5084
5365
|
({
|
|
5085
5366
|
placeholder,
|
|
5086
5367
|
label,
|
|
@@ -5091,9 +5372,9 @@ var Select = React19.forwardRef(
|
|
|
5091
5372
|
children,
|
|
5092
5373
|
...props
|
|
5093
5374
|
}, ref) => {
|
|
5094
|
-
const reactId =
|
|
5375
|
+
const reactId = React20.useId();
|
|
5095
5376
|
const triggerId = props.name ?? reactId;
|
|
5096
|
-
const internalRef =
|
|
5377
|
+
const internalRef = React20.useRef(null);
|
|
5097
5378
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
5098
5379
|
return /* @__PURE__ */ jsxs46("div", { className: cn("flex flex-col gap-chekin-1 w-[300px]", containerClassName), children: [
|
|
5099
5380
|
label && /* @__PURE__ */ jsx74(
|
|
@@ -5250,7 +5531,7 @@ function Pagination({
|
|
|
5250
5531
|
}
|
|
5251
5532
|
|
|
5252
5533
|
// src/popover/Popover.tsx
|
|
5253
|
-
import * as
|
|
5534
|
+
import * as React21 from "react";
|
|
5254
5535
|
import * as RadixPopover from "@radix-ui/react-popover";
|
|
5255
5536
|
import { jsx as jsx76 } from "react/jsx-runtime";
|
|
5256
5537
|
var Popover = RadixPopover.Root;
|
|
@@ -5258,7 +5539,7 @@ var PopoverTrigger = RadixPopover.Trigger;
|
|
|
5258
5539
|
var PopoverAnchor = RadixPopover.Anchor;
|
|
5259
5540
|
var PopoverPortal = RadixPopover.Portal;
|
|
5260
5541
|
var PopoverClose = RadixPopover.Close;
|
|
5261
|
-
var PopoverContent =
|
|
5542
|
+
var PopoverContent = React21.forwardRef(({ className, sideOffset = 8, align = "start", ...props }, ref) => /* @__PURE__ */ jsx76(RadixPopover.Portal, { children: /* @__PURE__ */ jsx76(
|
|
5262
5543
|
RadixPopover.Content,
|
|
5263
5544
|
{
|
|
5264
5545
|
ref,
|
|
@@ -5278,11 +5559,11 @@ PopoverContent.displayName = "PopoverContent";
|
|
|
5278
5559
|
import { forwardRef as forwardRef32 } from "react";
|
|
5279
5560
|
|
|
5280
5561
|
// src/radio-group/RadioGroup.tsx
|
|
5281
|
-
import * as
|
|
5562
|
+
import * as React22 from "react";
|
|
5282
5563
|
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
5283
5564
|
import { Circle } from "lucide-react";
|
|
5284
5565
|
import { jsx as jsx77 } from "react/jsx-runtime";
|
|
5285
|
-
var RadioGroup =
|
|
5566
|
+
var RadioGroup = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx77(
|
|
5286
5567
|
RadioGroupPrimitive.Root,
|
|
5287
5568
|
{
|
|
5288
5569
|
ref,
|
|
@@ -5291,7 +5572,7 @@ var RadioGroup = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
5291
5572
|
}
|
|
5292
5573
|
));
|
|
5293
5574
|
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
|
|
5294
|
-
var RadioGroupItem =
|
|
5575
|
+
var RadioGroupItem = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx77(
|
|
5295
5576
|
RadioGroupPrimitive.Item,
|
|
5296
5577
|
{
|
|
5297
5578
|
ref,
|
|
@@ -5308,11 +5589,11 @@ var RadioGroupItem = React21.forwardRef(({ className, ...props }, ref) => /* @__
|
|
|
5308
5589
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
5309
5590
|
|
|
5310
5591
|
// src/radio/useRadioOptions.ts
|
|
5311
|
-
import { useCallback as
|
|
5592
|
+
import { useCallback as useCallback12, useState as useState18 } from "react";
|
|
5312
5593
|
function useRadioOptions({ options, defaultValue, onChange }) {
|
|
5313
5594
|
const initialValue = (typeof defaultValue === "string" ? options.find((option) => option.value === defaultValue) : defaultValue) || "";
|
|
5314
|
-
const [selectedValue, setSelectedValue] =
|
|
5315
|
-
const handleValueChange =
|
|
5595
|
+
const [selectedValue, setSelectedValue] = useState18(initialValue);
|
|
5596
|
+
const handleValueChange = useCallback12(
|
|
5316
5597
|
(value) => {
|
|
5317
5598
|
setSelectedValue(value);
|
|
5318
5599
|
const selectedOption = options.find((option) => option.value === value) || "";
|
|
@@ -5520,7 +5801,7 @@ function RatingRadioGroup({
|
|
|
5520
5801
|
}
|
|
5521
5802
|
|
|
5522
5803
|
// src/rating-stars/RatingStars.tsx
|
|
5523
|
-
import * as
|
|
5804
|
+
import * as React23 from "react";
|
|
5524
5805
|
import { Star as Star2 } from "lucide-react";
|
|
5525
5806
|
import { useTranslation as useTranslation17 } from "react-i18next";
|
|
5526
5807
|
import { jsx as jsx82, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
@@ -5540,7 +5821,7 @@ function RatingStars({
|
|
|
5540
5821
|
const { t } = useTranslation17();
|
|
5541
5822
|
const normalizedRating = Math.max(0, Math.min(maxRating, rating));
|
|
5542
5823
|
const stars = Array.from({ length: maxRating }, (_, index) => index + 1);
|
|
5543
|
-
const componentId =
|
|
5824
|
+
const componentId = React23.useId();
|
|
5544
5825
|
const decimal = normalizedRating - Math.floor(normalizedRating);
|
|
5545
5826
|
const partialStarIndex = decimal > 0 ? Math.ceil(normalizedRating) : -1;
|
|
5546
5827
|
const gradientId = `star-gradient-${componentId.replace(/:/g, "")}`;
|
|
@@ -5816,7 +6097,7 @@ import {
|
|
|
5816
6097
|
cloneElement as cloneElement2,
|
|
5817
6098
|
forwardRef as forwardRef34,
|
|
5818
6099
|
isValidElement as isValidElement2,
|
|
5819
|
-
useEffect as
|
|
6100
|
+
useEffect as useEffect17
|
|
5820
6101
|
} from "react";
|
|
5821
6102
|
|
|
5822
6103
|
// src/selector-button/styles.module.css
|
|
@@ -5935,7 +6216,7 @@ function SelectorsInternal({
|
|
|
5935
6216
|
}
|
|
5936
6217
|
};
|
|
5937
6218
|
const isAnyActive = getValueArray(value).length > 0;
|
|
5938
|
-
|
|
6219
|
+
useEffect17(() => {
|
|
5939
6220
|
onAnySelectorActive?.(isAnyActive);
|
|
5940
6221
|
}, [isAnyActive, onAnySelectorActive]);
|
|
5941
6222
|
return /* @__PURE__ */ jsxs56(Fragment8, { children: [
|
|
@@ -6116,30 +6397,11 @@ function SheetDescription({
|
|
|
6116
6397
|
}
|
|
6117
6398
|
|
|
6118
6399
|
// src/sidebar/Sidebar.tsx
|
|
6119
|
-
import * as
|
|
6400
|
+
import * as React24 from "react";
|
|
6120
6401
|
import { Slot as Slot4 } from "@radix-ui/react-slot";
|
|
6121
6402
|
import { cva as cva11 } from "class-variance-authority";
|
|
6122
6403
|
import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon } from "lucide-react";
|
|
6123
6404
|
|
|
6124
|
-
// src/lib/use-is-mobile.ts
|
|
6125
|
-
import { useEffect as useEffect10, useState as useState14 } from "react";
|
|
6126
|
-
var MOBILE_BREAKPOINT = 768;
|
|
6127
|
-
function useIsMobile({ breakpoint = MOBILE_BREAKPOINT } = {}) {
|
|
6128
|
-
const [isMobile, setIsMobile] = useState14(void 0);
|
|
6129
|
-
useEffect10(() => {
|
|
6130
|
-
const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
|
|
6131
|
-
const onChange = () => {
|
|
6132
|
-
setIsMobile(window.innerWidth < breakpoint);
|
|
6133
|
-
};
|
|
6134
|
-
mediaQuery.addEventListener("change", onChange);
|
|
6135
|
-
setIsMobile(window.innerWidth < breakpoint);
|
|
6136
|
-
return () => {
|
|
6137
|
-
mediaQuery.removeEventListener("change", onChange);
|
|
6138
|
-
};
|
|
6139
|
-
}, [breakpoint]);
|
|
6140
|
-
return !!isMobile;
|
|
6141
|
-
}
|
|
6142
|
-
|
|
6143
6405
|
// src/skeleton/Skeleton.tsx
|
|
6144
6406
|
import { jsx as jsx92 } from "react/jsx-runtime";
|
|
6145
6407
|
function Skeleton({ className, ...props }) {
|
|
@@ -6228,7 +6490,7 @@ var SIDEBAR_COOKIE_NAME_DEFAULT = "sidebar_state";
|
|
|
6228
6490
|
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
6229
6491
|
var SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
6230
6492
|
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
6231
|
-
var SidebarProvider =
|
|
6493
|
+
var SidebarProvider = React24.forwardRef(
|
|
6232
6494
|
({
|
|
6233
6495
|
defaultOpen = true,
|
|
6234
6496
|
open: openProp,
|
|
@@ -6240,10 +6502,10 @@ var SidebarProvider = React23.forwardRef(
|
|
|
6240
6502
|
...props
|
|
6241
6503
|
}, ref) => {
|
|
6242
6504
|
const isMobile = useIsMobile({ breakpoint: 641 });
|
|
6243
|
-
const [openMobile, setOpenMobile] =
|
|
6244
|
-
const [_open, _setOpen] =
|
|
6505
|
+
const [openMobile, setOpenMobile] = React24.useState(false);
|
|
6506
|
+
const [_open, _setOpen] = React24.useState(defaultOpen);
|
|
6245
6507
|
const open = openProp ?? _open;
|
|
6246
|
-
const setOpen =
|
|
6508
|
+
const setOpen = React24.useCallback(
|
|
6247
6509
|
(value) => {
|
|
6248
6510
|
const openState = typeof value === "function" ? value(open) : value;
|
|
6249
6511
|
if (setOpenProp) {
|
|
@@ -6255,10 +6517,10 @@ var SidebarProvider = React23.forwardRef(
|
|
|
6255
6517
|
},
|
|
6256
6518
|
[setOpenProp, open, stateName]
|
|
6257
6519
|
);
|
|
6258
|
-
const toggleSidebar =
|
|
6520
|
+
const toggleSidebar = React24.useCallback(() => {
|
|
6259
6521
|
return isMobile ? setOpenMobile((value) => !value) : setOpen((value) => !value);
|
|
6260
6522
|
}, [isMobile, setOpen]);
|
|
6261
|
-
|
|
6523
|
+
React24.useEffect(() => {
|
|
6262
6524
|
const handleKeyDown = (event) => {
|
|
6263
6525
|
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
6264
6526
|
event.preventDefault();
|
|
@@ -6269,7 +6531,7 @@ var SidebarProvider = React23.forwardRef(
|
|
|
6269
6531
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
6270
6532
|
}, [toggleSidebar]);
|
|
6271
6533
|
const state = open ? "expanded" : "collapsed";
|
|
6272
|
-
const contextValue =
|
|
6534
|
+
const contextValue = React24.useMemo(
|
|
6273
6535
|
() => ({
|
|
6274
6536
|
state,
|
|
6275
6537
|
open,
|
|
@@ -6294,7 +6556,7 @@ var SidebarProvider = React23.forwardRef(
|
|
|
6294
6556
|
}
|
|
6295
6557
|
);
|
|
6296
6558
|
SidebarProvider.displayName = "SidebarProvider";
|
|
6297
|
-
var Sidebar =
|
|
6559
|
+
var Sidebar = React24.forwardRef(
|
|
6298
6560
|
({
|
|
6299
6561
|
side = "left",
|
|
6300
6562
|
variant = "sidebar",
|
|
@@ -6388,7 +6650,7 @@ var Sidebar = React23.forwardRef(
|
|
|
6388
6650
|
}
|
|
6389
6651
|
);
|
|
6390
6652
|
Sidebar.displayName = "Sidebar";
|
|
6391
|
-
var SidebarTrigger =
|
|
6653
|
+
var SidebarTrigger = React24.forwardRef(({ className, onClick, icon, ...props }, ref) => {
|
|
6392
6654
|
const { toggleSidebar, open, isMobile, openMobile } = useSidebar();
|
|
6393
6655
|
return /* @__PURE__ */ jsxs58(
|
|
6394
6656
|
Button,
|
|
@@ -6415,7 +6677,7 @@ var SidebarTrigger = React23.forwardRef(({ className, onClick, icon, ...props },
|
|
|
6415
6677
|
);
|
|
6416
6678
|
});
|
|
6417
6679
|
SidebarTrigger.displayName = "SidebarTrigger";
|
|
6418
|
-
var SidebarRail =
|
|
6680
|
+
var SidebarRail = React24.forwardRef(
|
|
6419
6681
|
({ className, ...props }, ref) => {
|
|
6420
6682
|
const { toggleSidebar } = useSidebar();
|
|
6421
6683
|
return /* @__PURE__ */ jsx94(
|
|
@@ -6441,7 +6703,7 @@ var SidebarRail = React23.forwardRef(
|
|
|
6441
6703
|
}
|
|
6442
6704
|
);
|
|
6443
6705
|
SidebarRail.displayName = "SidebarRail";
|
|
6444
|
-
var SidebarInset =
|
|
6706
|
+
var SidebarInset = React24.forwardRef(
|
|
6445
6707
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx94(
|
|
6446
6708
|
"main",
|
|
6447
6709
|
{
|
|
@@ -6456,7 +6718,7 @@ var SidebarInset = React23.forwardRef(
|
|
|
6456
6718
|
)
|
|
6457
6719
|
);
|
|
6458
6720
|
SidebarInset.displayName = "SidebarInset";
|
|
6459
|
-
var SidebarInput =
|
|
6721
|
+
var SidebarInput = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx94(
|
|
6460
6722
|
Input,
|
|
6461
6723
|
{
|
|
6462
6724
|
ref,
|
|
@@ -6466,7 +6728,7 @@ var SidebarInput = React23.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
6466
6728
|
}
|
|
6467
6729
|
));
|
|
6468
6730
|
SidebarInput.displayName = "SidebarInput";
|
|
6469
|
-
var SidebarHeader =
|
|
6731
|
+
var SidebarHeader = React24.forwardRef(
|
|
6470
6732
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx94(
|
|
6471
6733
|
"div",
|
|
6472
6734
|
{
|
|
@@ -6478,7 +6740,7 @@ var SidebarHeader = React23.forwardRef(
|
|
|
6478
6740
|
)
|
|
6479
6741
|
);
|
|
6480
6742
|
SidebarHeader.displayName = "SidebarHeader";
|
|
6481
|
-
var SidebarFooter =
|
|
6743
|
+
var SidebarFooter = React24.forwardRef(
|
|
6482
6744
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx94(
|
|
6483
6745
|
"div",
|
|
6484
6746
|
{
|
|
@@ -6490,7 +6752,7 @@ var SidebarFooter = React23.forwardRef(
|
|
|
6490
6752
|
)
|
|
6491
6753
|
);
|
|
6492
6754
|
SidebarFooter.displayName = "SidebarFooter";
|
|
6493
|
-
var SidebarSeparator =
|
|
6755
|
+
var SidebarSeparator = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx94(
|
|
6494
6756
|
Separator3,
|
|
6495
6757
|
{
|
|
6496
6758
|
ref,
|
|
@@ -6500,7 +6762,7 @@ var SidebarSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
6500
6762
|
}
|
|
6501
6763
|
));
|
|
6502
6764
|
SidebarSeparator.displayName = "SidebarSeparator";
|
|
6503
|
-
var SidebarContent =
|
|
6765
|
+
var SidebarContent = React24.forwardRef(
|
|
6504
6766
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx94(
|
|
6505
6767
|
"div",
|
|
6506
6768
|
{
|
|
@@ -6515,7 +6777,7 @@ var SidebarContent = React23.forwardRef(
|
|
|
6515
6777
|
)
|
|
6516
6778
|
);
|
|
6517
6779
|
SidebarContent.displayName = "SidebarContent";
|
|
6518
|
-
var SidebarGroup =
|
|
6780
|
+
var SidebarGroup = React24.forwardRef(
|
|
6519
6781
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx94(
|
|
6520
6782
|
"div",
|
|
6521
6783
|
{
|
|
@@ -6527,7 +6789,7 @@ var SidebarGroup = React23.forwardRef(
|
|
|
6527
6789
|
)
|
|
6528
6790
|
);
|
|
6529
6791
|
SidebarGroup.displayName = "SidebarGroup";
|
|
6530
|
-
var SidebarGroupLabel =
|
|
6792
|
+
var SidebarGroupLabel = React24.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
6531
6793
|
const Comp = asChild ? Slot4 : "div";
|
|
6532
6794
|
return /* @__PURE__ */ jsx94(
|
|
6533
6795
|
Comp,
|
|
@@ -6544,7 +6806,7 @@ var SidebarGroupLabel = React23.forwardRef(({ className, asChild = false, ...pro
|
|
|
6544
6806
|
);
|
|
6545
6807
|
});
|
|
6546
6808
|
SidebarGroupLabel.displayName = "SidebarGroupLabel";
|
|
6547
|
-
var SidebarGroupAction =
|
|
6809
|
+
var SidebarGroupAction = React24.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
6548
6810
|
const Comp = asChild ? Slot4 : "button";
|
|
6549
6811
|
return /* @__PURE__ */ jsx94(
|
|
6550
6812
|
Comp,
|
|
@@ -6560,7 +6822,7 @@ var SidebarGroupAction = React23.forwardRef(({ className, asChild = false, ...pr
|
|
|
6560
6822
|
);
|
|
6561
6823
|
});
|
|
6562
6824
|
SidebarGroupAction.displayName = "SidebarGroupAction";
|
|
6563
|
-
var SidebarGroupContent =
|
|
6825
|
+
var SidebarGroupContent = React24.forwardRef(
|
|
6564
6826
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx94(
|
|
6565
6827
|
"div",
|
|
6566
6828
|
{
|
|
@@ -6572,7 +6834,7 @@ var SidebarGroupContent = React23.forwardRef(
|
|
|
6572
6834
|
)
|
|
6573
6835
|
);
|
|
6574
6836
|
SidebarGroupContent.displayName = "SidebarGroupContent";
|
|
6575
|
-
var SidebarMenu =
|
|
6837
|
+
var SidebarMenu = React24.forwardRef(
|
|
6576
6838
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx94(
|
|
6577
6839
|
"ul",
|
|
6578
6840
|
{
|
|
@@ -6584,7 +6846,7 @@ var SidebarMenu = React23.forwardRef(
|
|
|
6584
6846
|
)
|
|
6585
6847
|
);
|
|
6586
6848
|
SidebarMenu.displayName = "SidebarMenu";
|
|
6587
|
-
var SidebarMenuItem =
|
|
6849
|
+
var SidebarMenuItem = React24.forwardRef(
|
|
6588
6850
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx94(
|
|
6589
6851
|
"li",
|
|
6590
6852
|
{
|
|
@@ -6616,7 +6878,7 @@ var sidebarMenuButtonVariants = cva11(
|
|
|
6616
6878
|
}
|
|
6617
6879
|
}
|
|
6618
6880
|
);
|
|
6619
|
-
var SidebarMenuButton =
|
|
6881
|
+
var SidebarMenuButton = React24.forwardRef(
|
|
6620
6882
|
({
|
|
6621
6883
|
asChild = false,
|
|
6622
6884
|
isActive = false,
|
|
@@ -6662,7 +6924,7 @@ var SidebarMenuButton = React23.forwardRef(
|
|
|
6662
6924
|
}
|
|
6663
6925
|
);
|
|
6664
6926
|
SidebarMenuButton.displayName = "SidebarMenuButton";
|
|
6665
|
-
var SidebarMenuAction =
|
|
6927
|
+
var SidebarMenuAction = React24.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
|
6666
6928
|
const Comp = asChild ? Slot4 : "button";
|
|
6667
6929
|
return /* @__PURE__ */ jsx94(
|
|
6668
6930
|
Comp,
|
|
@@ -6679,7 +6941,7 @@ var SidebarMenuAction = React23.forwardRef(({ className, asChild = false, showOn
|
|
|
6679
6941
|
);
|
|
6680
6942
|
});
|
|
6681
6943
|
SidebarMenuAction.displayName = "SidebarMenuAction";
|
|
6682
|
-
var SidebarMenuBadge =
|
|
6944
|
+
var SidebarMenuBadge = React24.forwardRef(
|
|
6683
6945
|
({ className, ...props }, ref) => {
|
|
6684
6946
|
const { open, isMobile, openMobile } = useSidebar();
|
|
6685
6947
|
const isOpen = isMobile ? openMobile : open;
|
|
@@ -6699,8 +6961,8 @@ var SidebarMenuBadge = React23.forwardRef(
|
|
|
6699
6961
|
}
|
|
6700
6962
|
);
|
|
6701
6963
|
SidebarMenuBadge.displayName = "SidebarMenuBadge";
|
|
6702
|
-
var SidebarMenuSkeleton =
|
|
6703
|
-
const width =
|
|
6964
|
+
var SidebarMenuSkeleton = React24.forwardRef(({ className, showIcon = false, ...props }, ref) => {
|
|
6965
|
+
const width = React24.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
|
|
6704
6966
|
return /* @__PURE__ */ jsxs58(
|
|
6705
6967
|
"div",
|
|
6706
6968
|
{
|
|
@@ -6723,7 +6985,7 @@ var SidebarMenuSkeleton = React23.forwardRef(({ className, showIcon = false, ...
|
|
|
6723
6985
|
);
|
|
6724
6986
|
});
|
|
6725
6987
|
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
|
|
6726
|
-
var SidebarMenuSub =
|
|
6988
|
+
var SidebarMenuSub = React24.forwardRef(
|
|
6727
6989
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx94(
|
|
6728
6990
|
"ul",
|
|
6729
6991
|
{
|
|
@@ -6738,7 +7000,7 @@ var SidebarMenuSub = React23.forwardRef(
|
|
|
6738
7000
|
)
|
|
6739
7001
|
);
|
|
6740
7002
|
SidebarMenuSub.displayName = "SidebarMenuSub";
|
|
6741
|
-
var SidebarMenuSubItem =
|
|
7003
|
+
var SidebarMenuSubItem = React24.forwardRef(
|
|
6742
7004
|
({ ...props }, ref) => /* @__PURE__ */ jsx94("li", { ref, ...props })
|
|
6743
7005
|
);
|
|
6744
7006
|
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
|
|
@@ -6762,7 +7024,7 @@ var sidebarMenuSubButtonVariants = cva11(
|
|
|
6762
7024
|
}
|
|
6763
7025
|
}
|
|
6764
7026
|
);
|
|
6765
|
-
var SidebarMenuSubButton =
|
|
7027
|
+
var SidebarMenuSubButton = React24.forwardRef(
|
|
6766
7028
|
({
|
|
6767
7029
|
asChild = false,
|
|
6768
7030
|
isActive,
|
|
@@ -6792,9 +7054,9 @@ var VALUE_PART = 1;
|
|
|
6792
7054
|
var getSidebarState = (stateName) => document.cookie.split("; ").find((row) => row.startsWith(`${stateName}=`))?.split("=")[VALUE_PART] === "true";
|
|
6793
7055
|
|
|
6794
7056
|
// src/circular-loader/CircularLoader.tsx
|
|
6795
|
-
import
|
|
7057
|
+
import React25 from "react";
|
|
6796
7058
|
import { jsx as jsx95, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
6797
|
-
var CircularLoader =
|
|
7059
|
+
var CircularLoader = React25.memo(
|
|
6798
7060
|
({ visible = true, height, width, position, label, className }) => {
|
|
6799
7061
|
if (!visible) return null;
|
|
6800
7062
|
return /* @__PURE__ */ jsxs59(
|
|
@@ -7184,9 +7446,9 @@ SwitchBlocksInternal.displayName = "SwitchBlocks";
|
|
|
7184
7446
|
var SwitchBlocks = memo6(SwitchBlocksInternal);
|
|
7185
7447
|
|
|
7186
7448
|
// src/switch-group/SwitchGroup.tsx
|
|
7187
|
-
import * as
|
|
7449
|
+
import * as React26 from "react";
|
|
7188
7450
|
import { jsx as jsx102, jsxs as jsxs64 } from "react/jsx-runtime";
|
|
7189
|
-
var SwitchGroup =
|
|
7451
|
+
var SwitchGroup = React26.forwardRef(
|
|
7190
7452
|
({ options, value = [], onChange, disabled = false, className, error, ...props }, ref) => {
|
|
7191
7453
|
const handleOptionChange = (optionValue, checked) => {
|
|
7192
7454
|
if (!onChange) return;
|
|
@@ -7432,11 +7694,11 @@ var TASK_VARIANTS = {
|
|
|
7432
7694
|
import { Toaster, toast as toast2 } from "sonner";
|
|
7433
7695
|
|
|
7434
7696
|
// src/toaster/useUpdateToast.ts
|
|
7435
|
-
import { useCallback as
|
|
7697
|
+
import { useCallback as useCallback14, useRef as useRef14 } from "react";
|
|
7436
7698
|
import { toast } from "sonner";
|
|
7437
7699
|
function useUpdateToast({ id }) {
|
|
7438
|
-
const toastIdRef =
|
|
7439
|
-
const getToastOptions =
|
|
7700
|
+
const toastIdRef = useRef14("");
|
|
7701
|
+
const getToastOptions = useCallback14(
|
|
7440
7702
|
(options) => ({
|
|
7441
7703
|
id: toastIdRef.current,
|
|
7442
7704
|
dismissible: false,
|
|
@@ -7468,7 +7730,7 @@ function useUpdateToast({ id }) {
|
|
|
7468
7730
|
}
|
|
7469
7731
|
|
|
7470
7732
|
// src/toggle-group/ToggleGroup.tsx
|
|
7471
|
-
import * as
|
|
7733
|
+
import * as React27 from "react";
|
|
7472
7734
|
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
7473
7735
|
|
|
7474
7736
|
// src/toggle-group/style.ts
|
|
@@ -7502,12 +7764,12 @@ var toggleVariants = cva13(
|
|
|
7502
7764
|
|
|
7503
7765
|
// src/toggle-group/ToggleGroup.tsx
|
|
7504
7766
|
import { jsx as jsx107, jsxs as jsxs68 } from "react/jsx-runtime";
|
|
7505
|
-
var ToggleGroupContext =
|
|
7767
|
+
var ToggleGroupContext = React27.createContext({
|
|
7506
7768
|
size: "default",
|
|
7507
7769
|
variant: "default",
|
|
7508
7770
|
theme: "default"
|
|
7509
7771
|
});
|
|
7510
|
-
var ToggleGroup =
|
|
7772
|
+
var ToggleGroup = React27.forwardRef(({ className, variant, size, theme, children, ...props }, ref) => {
|
|
7511
7773
|
const isTabVariant = variant === "tab";
|
|
7512
7774
|
return /* @__PURE__ */ jsx107(
|
|
7513
7775
|
ToggleGroupPrimitive.Root,
|
|
@@ -7524,8 +7786,8 @@ var ToggleGroup = React26.forwardRef(({ className, variant, size, theme, childre
|
|
|
7524
7786
|
);
|
|
7525
7787
|
});
|
|
7526
7788
|
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
|
7527
|
-
var ToggleGroupItem =
|
|
7528
|
-
const context =
|
|
7789
|
+
var ToggleGroupItem = React27.forwardRef(({ className, children, variant, size, theme, ...props }, ref) => {
|
|
7790
|
+
const context = React27.useContext(ToggleGroupContext);
|
|
7529
7791
|
const resolvedVariant = context.variant || variant;
|
|
7530
7792
|
const isTabVariant = resolvedVariant === "tab";
|
|
7531
7793
|
return /* @__PURE__ */ jsx107(
|
|
@@ -7551,7 +7813,7 @@ var ToggleGroupItem = React26.forwardRef(({ className, children, variant, size,
|
|
|
7551
7813
|
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
7552
7814
|
|
|
7553
7815
|
// src/toggle-group/Toggles.tsx
|
|
7554
|
-
import { forwardRef as forwardRef40, useEffect as
|
|
7816
|
+
import { forwardRef as forwardRef40, useEffect as useEffect19 } from "react";
|
|
7555
7817
|
import { jsx as jsx108, jsxs as jsxs69 } from "react/jsx-runtime";
|
|
7556
7818
|
var getValueArray2 = (value) => {
|
|
7557
7819
|
if (value) {
|
|
@@ -7626,7 +7888,7 @@ function TogglesInternal({
|
|
|
7626
7888
|
}
|
|
7627
7889
|
};
|
|
7628
7890
|
const isAnyActive = getValueArray2(value).length > 0;
|
|
7629
|
-
|
|
7891
|
+
useEffect19(() => {
|
|
7630
7892
|
onAnySelectorActive?.(isAnyActive);
|
|
7631
7893
|
}, [isAnyActive, onAnySelectorActive]);
|
|
7632
7894
|
const currentValue = getValueArray2(value).map((item) => String(item));
|
|
@@ -7660,7 +7922,7 @@ function TogglesInternal({
|
|
|
7660
7922
|
var Toggles = forwardRef40(TogglesInternal);
|
|
7661
7923
|
|
|
7662
7924
|
// src/text-field/TextField.tsx
|
|
7663
|
-
import * as
|
|
7925
|
+
import * as React28 from "react";
|
|
7664
7926
|
import * as LabelPrimitive2 from "@radix-ui/react-label";
|
|
7665
7927
|
import { cva as cva14 } from "class-variance-authority";
|
|
7666
7928
|
import { useTranslation as useTranslation21 } from "react-i18next";
|
|
@@ -7754,7 +8016,7 @@ var floatingLabelClasses = [
|
|
|
7754
8016
|
"peer-focus:to-[var(--text-field-bg-filled)]",
|
|
7755
8017
|
"peer-focus:to-50%"
|
|
7756
8018
|
];
|
|
7757
|
-
var TextField =
|
|
8019
|
+
var TextField = React28.forwardRef(
|
|
7758
8020
|
({
|
|
7759
8021
|
className,
|
|
7760
8022
|
wrapperClassName,
|
|
@@ -7773,7 +8035,7 @@ var TextField = React27.forwardRef(
|
|
|
7773
8035
|
}, ref) => {
|
|
7774
8036
|
const { t } = useTranslation21();
|
|
7775
8037
|
const hasError = Boolean(error);
|
|
7776
|
-
const autoId =
|
|
8038
|
+
const autoId = React28.useId();
|
|
7777
8039
|
const inputId = props.id || autoId;
|
|
7778
8040
|
const inputClasses = cn(
|
|
7779
8041
|
inputVariants({ variant, error: hasError, readOnly: Boolean(readOnly) }),
|
|
@@ -8006,11 +8268,11 @@ function WideButton({ className, disabled, ...props }) {
|
|
|
8006
8268
|
}
|
|
8007
8269
|
|
|
8008
8270
|
// src/datepicker/DatePicker.tsx
|
|
8009
|
-
import * as
|
|
8271
|
+
import * as React32 from "react";
|
|
8010
8272
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
8011
8273
|
|
|
8012
8274
|
// src/drawer/Drawer.tsx
|
|
8013
|
-
import * as
|
|
8275
|
+
import * as React29 from "react";
|
|
8014
8276
|
import * as DialogPrimitive2 from "@radix-ui/react-dialog";
|
|
8015
8277
|
import Draggable from "react-draggable";
|
|
8016
8278
|
import { jsx as jsx117, jsxs as jsxs74 } from "react/jsx-runtime";
|
|
@@ -8028,7 +8290,7 @@ function DrawerPortal({ ...props }) {
|
|
|
8028
8290
|
function DrawerClose({ ...props }) {
|
|
8029
8291
|
return /* @__PURE__ */ jsx117(DialogPrimitive2.Close, { "data-slot": "drawer-close", ...props });
|
|
8030
8292
|
}
|
|
8031
|
-
var DrawerOverlay =
|
|
8293
|
+
var DrawerOverlay = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx117(
|
|
8032
8294
|
DialogPrimitive2.Overlay,
|
|
8033
8295
|
{
|
|
8034
8296
|
ref,
|
|
@@ -8042,7 +8304,7 @@ var DrawerOverlay = React28.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
8042
8304
|
));
|
|
8043
8305
|
DrawerOverlay.displayName = DialogPrimitive2.Overlay.displayName;
|
|
8044
8306
|
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";
|
|
8045
|
-
var DrawerContent =
|
|
8307
|
+
var DrawerContent = React29.forwardRef(
|
|
8046
8308
|
({
|
|
8047
8309
|
className,
|
|
8048
8310
|
children,
|
|
@@ -8054,19 +8316,19 @@ var DrawerContent = React28.forwardRef(
|
|
|
8054
8316
|
...props
|
|
8055
8317
|
}, ref) => {
|
|
8056
8318
|
const finalContainer = container || getCustomContainer() || void 0;
|
|
8057
|
-
const nodeRef =
|
|
8058
|
-
const [dragOffsetY, setDragOffsetY] =
|
|
8319
|
+
const nodeRef = React29.useRef(null);
|
|
8320
|
+
const [dragOffsetY, setDragOffsetY] = React29.useState(0);
|
|
8059
8321
|
const overlayOpacity = Math.max(
|
|
8060
8322
|
DRAWER_MIN_OVERLAY_OPACITY,
|
|
8061
8323
|
1 - dragOffsetY / (DRAWER_CLOSE_THRESHOLD * 2)
|
|
8062
8324
|
);
|
|
8063
|
-
const handleDrag =
|
|
8325
|
+
const handleDrag = React29.useCallback(
|
|
8064
8326
|
(_event, data) => {
|
|
8065
8327
|
setDragOffsetY(Math.max(0, data.y));
|
|
8066
8328
|
},
|
|
8067
8329
|
[]
|
|
8068
8330
|
);
|
|
8069
|
-
const handleStop =
|
|
8331
|
+
const handleStop = React29.useCallback(
|
|
8070
8332
|
(_event, data) => {
|
|
8071
8333
|
if (data.y > DRAWER_CLOSE_THRESHOLD) {
|
|
8072
8334
|
setDragOffsetY(0);
|
|
@@ -8157,7 +8419,7 @@ var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx117(
|
|
|
8157
8419
|
DrawerHeader.displayName = "DrawerHeader";
|
|
8158
8420
|
var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx117("div", { className: cn("flex flex-col gap-2 p-5", className), ...props });
|
|
8159
8421
|
DrawerFooter.displayName = "DrawerFooter";
|
|
8160
|
-
var DrawerTitle =
|
|
8422
|
+
var DrawerTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx117(
|
|
8161
8423
|
DialogPrimitive2.Title,
|
|
8162
8424
|
{
|
|
8163
8425
|
ref,
|
|
@@ -8167,7 +8429,7 @@ var DrawerTitle = React28.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
8167
8429
|
}
|
|
8168
8430
|
));
|
|
8169
8431
|
DrawerTitle.displayName = DialogPrimitive2.Title.displayName;
|
|
8170
|
-
var DrawerDescription =
|
|
8432
|
+
var DrawerDescription = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx117(
|
|
8171
8433
|
DialogPrimitive2.Description,
|
|
8172
8434
|
{
|
|
8173
8435
|
ref,
|
|
@@ -8179,7 +8441,7 @@ var DrawerDescription = React28.forwardRef(({ className, ...props }, ref) => /*
|
|
|
8179
8441
|
DrawerDescription.displayName = DialogPrimitive2.Description.displayName;
|
|
8180
8442
|
|
|
8181
8443
|
// src/datepicker/useDatePickerWheel.ts
|
|
8182
|
-
import * as
|
|
8444
|
+
import * as React30 from "react";
|
|
8183
8445
|
|
|
8184
8446
|
// src/datepicker/datePicker.utils.ts
|
|
8185
8447
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -8330,21 +8592,21 @@ function useDatePickerWheel({
|
|
|
8330
8592
|
minDate,
|
|
8331
8593
|
maxDate
|
|
8332
8594
|
}) {
|
|
8333
|
-
const years =
|
|
8334
|
-
const [draftDate, setDraftDate] =
|
|
8595
|
+
const years = React30.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
8596
|
+
const [draftDate, setDraftDate] = React30.useState(
|
|
8335
8597
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
8336
8598
|
);
|
|
8337
8599
|
const draftYear = draftDate.getFullYear();
|
|
8338
8600
|
const draftMonth = draftDate.getMonth();
|
|
8339
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
8340
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
8341
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
8342
|
-
const monthListRef =
|
|
8343
|
-
const dayListRef =
|
|
8344
|
-
const yearListRef =
|
|
8345
|
-
const settleTimeoutsRef =
|
|
8346
|
-
const animationFramesRef =
|
|
8347
|
-
const columnRefs =
|
|
8601
|
+
const [monthScrollTop, setMonthScrollTop] = React30.useState(0);
|
|
8602
|
+
const [dayScrollTop, setDayScrollTop] = React30.useState(0);
|
|
8603
|
+
const [yearScrollTop, setYearScrollTop] = React30.useState(0);
|
|
8604
|
+
const monthListRef = React30.useRef(null);
|
|
8605
|
+
const dayListRef = React30.useRef(null);
|
|
8606
|
+
const yearListRef = React30.useRef(null);
|
|
8607
|
+
const settleTimeoutsRef = React30.useRef({});
|
|
8608
|
+
const animationFramesRef = React30.useRef({});
|
|
8609
|
+
const columnRefs = React30.useMemo(
|
|
8348
8610
|
() => ({
|
|
8349
8611
|
month: monthListRef,
|
|
8350
8612
|
day: dayListRef,
|
|
@@ -8352,7 +8614,7 @@ function useDatePickerWheel({
|
|
|
8352
8614
|
}),
|
|
8353
8615
|
[]
|
|
8354
8616
|
);
|
|
8355
|
-
const setColumnScrollTop =
|
|
8617
|
+
const setColumnScrollTop = React30.useCallback(
|
|
8356
8618
|
(column, nextScrollTop) => {
|
|
8357
8619
|
if (column === "month") {
|
|
8358
8620
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -8366,19 +8628,19 @@ function useDatePickerWheel({
|
|
|
8366
8628
|
},
|
|
8367
8629
|
[]
|
|
8368
8630
|
);
|
|
8369
|
-
const clearSettleTimeout =
|
|
8631
|
+
const clearSettleTimeout = React30.useCallback((column) => {
|
|
8370
8632
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
8371
8633
|
if (timeoutId === void 0) return;
|
|
8372
8634
|
window.clearTimeout(timeoutId);
|
|
8373
8635
|
delete settleTimeoutsRef.current[column];
|
|
8374
8636
|
}, []);
|
|
8375
|
-
const clearAnimationFrame =
|
|
8637
|
+
const clearAnimationFrame = React30.useCallback((column) => {
|
|
8376
8638
|
const frameId = animationFramesRef.current[column];
|
|
8377
8639
|
if (frameId === void 0) return;
|
|
8378
8640
|
window.cancelAnimationFrame(frameId);
|
|
8379
8641
|
delete animationFramesRef.current[column];
|
|
8380
8642
|
}, []);
|
|
8381
|
-
|
|
8643
|
+
React30.useEffect(
|
|
8382
8644
|
() => () => {
|
|
8383
8645
|
["month", "day", "year"].forEach((column) => {
|
|
8384
8646
|
clearSettleTimeout(column);
|
|
@@ -8387,22 +8649,22 @@ function useDatePickerWheel({
|
|
|
8387
8649
|
},
|
|
8388
8650
|
[clearAnimationFrame, clearSettleTimeout]
|
|
8389
8651
|
);
|
|
8390
|
-
|
|
8652
|
+
React30.useEffect(() => {
|
|
8391
8653
|
if (isOpen) return;
|
|
8392
8654
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
8393
8655
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
8394
|
-
const months =
|
|
8656
|
+
const months = React30.useMemo(
|
|
8395
8657
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
8396
8658
|
[draftYear, maxDate, minDate]
|
|
8397
8659
|
);
|
|
8398
|
-
const days =
|
|
8660
|
+
const days = React30.useMemo(
|
|
8399
8661
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
8400
8662
|
[draftMonth, draftYear, maxDate, minDate]
|
|
8401
8663
|
);
|
|
8402
8664
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
8403
8665
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
8404
8666
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
8405
|
-
const syncScrollPositions =
|
|
8667
|
+
const syncScrollPositions = React30.useCallback(
|
|
8406
8668
|
(nextDate, behavior = "auto") => {
|
|
8407
8669
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
8408
8670
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -8426,7 +8688,7 @@ function useDatePickerWheel({
|
|
|
8426
8688
|
},
|
|
8427
8689
|
[maxDate, minDate, years]
|
|
8428
8690
|
);
|
|
8429
|
-
|
|
8691
|
+
React30.useLayoutEffect(() => {
|
|
8430
8692
|
if (!isOpen) return;
|
|
8431
8693
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
8432
8694
|
setDraftDate(nextDate);
|
|
@@ -8437,7 +8699,7 @@ function useDatePickerWheel({
|
|
|
8437
8699
|
window.cancelAnimationFrame(frameId);
|
|
8438
8700
|
};
|
|
8439
8701
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
8440
|
-
const updateDraftDate =
|
|
8702
|
+
const updateDraftDate = React30.useCallback(
|
|
8441
8703
|
(column, targetIndex, behavior = "smooth") => {
|
|
8442
8704
|
const currentDate = stripTime(draftDate);
|
|
8443
8705
|
const currentYear = currentDate.getFullYear();
|
|
@@ -8482,7 +8744,7 @@ function useDatePickerWheel({
|
|
|
8482
8744
|
},
|
|
8483
8745
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
8484
8746
|
);
|
|
8485
|
-
const settleColumnScroll =
|
|
8747
|
+
const settleColumnScroll = React30.useCallback(
|
|
8486
8748
|
(column) => {
|
|
8487
8749
|
const list = columnRefs[column].current;
|
|
8488
8750
|
if (!list) return;
|
|
@@ -8495,7 +8757,7 @@ function useDatePickerWheel({
|
|
|
8495
8757
|
},
|
|
8496
8758
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
8497
8759
|
);
|
|
8498
|
-
const scheduleScrollSettle =
|
|
8760
|
+
const scheduleScrollSettle = React30.useCallback(
|
|
8499
8761
|
(column) => {
|
|
8500
8762
|
clearSettleTimeout(column);
|
|
8501
8763
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -8504,7 +8766,7 @@ function useDatePickerWheel({
|
|
|
8504
8766
|
},
|
|
8505
8767
|
[clearSettleTimeout, settleColumnScroll]
|
|
8506
8768
|
);
|
|
8507
|
-
const handleColumnScroll =
|
|
8769
|
+
const handleColumnScroll = React30.useCallback(
|
|
8508
8770
|
(column) => {
|
|
8509
8771
|
const list = columnRefs[column].current;
|
|
8510
8772
|
if (!list) return;
|
|
@@ -8518,13 +8780,13 @@ function useDatePickerWheel({
|
|
|
8518
8780
|
},
|
|
8519
8781
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
8520
8782
|
);
|
|
8521
|
-
const handleOptionSelect =
|
|
8783
|
+
const handleOptionSelect = React30.useCallback(
|
|
8522
8784
|
(column, targetIndex) => {
|
|
8523
8785
|
updateDraftDate(column, targetIndex, "smooth");
|
|
8524
8786
|
},
|
|
8525
8787
|
[updateDraftDate]
|
|
8526
8788
|
);
|
|
8527
|
-
const focusAdjacentColumn =
|
|
8789
|
+
const focusAdjacentColumn = React30.useCallback(
|
|
8528
8790
|
(column, direction) => {
|
|
8529
8791
|
const order = ["month", "day", "year"];
|
|
8530
8792
|
const currentIndex = order.indexOf(column);
|
|
@@ -8534,7 +8796,7 @@ function useDatePickerWheel({
|
|
|
8534
8796
|
},
|
|
8535
8797
|
[columnRefs]
|
|
8536
8798
|
);
|
|
8537
|
-
const handleColumnKeyDown =
|
|
8799
|
+
const handleColumnKeyDown = React30.useCallback(
|
|
8538
8800
|
(column, event) => {
|
|
8539
8801
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
8540
8802
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -8822,28 +9084,6 @@ function DatePickerContent({
|
|
|
8822
9084
|
) });
|
|
8823
9085
|
}
|
|
8824
9086
|
|
|
8825
|
-
// src/lib/use-screen-resize.ts
|
|
8826
|
-
import { useCallback as useCallback12, useLayoutEffect as useLayoutEffect2, useState as useState18 } from "react";
|
|
8827
|
-
var eventName = "resize";
|
|
8828
|
-
function useScreenResize(maxWidth) {
|
|
8829
|
-
const [isInitialized, setIsInitialized] = useState18(false);
|
|
8830
|
-
const [isMatch, setIsMatch] = useState18(false);
|
|
8831
|
-
const handleResizeEvent = useCallback12(() => {
|
|
8832
|
-
const adjustedMaxWidth = `${parseInt(maxWidth, 10) - 1}px`;
|
|
8833
|
-
const media = getWindow().matchMedia(`(max-width: ${adjustedMaxWidth})`);
|
|
8834
|
-
setIsInitialized(true);
|
|
8835
|
-
setIsMatch(!!media?.matches);
|
|
8836
|
-
}, [maxWidth]);
|
|
8837
|
-
useLayoutEffect2(() => {
|
|
8838
|
-
handleResizeEvent();
|
|
8839
|
-
getWindow().addEventListener(eventName, handleResizeEvent);
|
|
8840
|
-
return () => {
|
|
8841
|
-
getWindow().removeEventListener(eventName, handleResizeEvent);
|
|
8842
|
-
};
|
|
8843
|
-
}, [handleResizeEvent]);
|
|
8844
|
-
return { isMatch, isInitialized };
|
|
8845
|
-
}
|
|
8846
|
-
|
|
8847
9087
|
// src/lib/device.ts
|
|
8848
9088
|
var DEVICE = {
|
|
8849
9089
|
mobileS: "320px",
|
|
@@ -8860,7 +9100,7 @@ var DEVICE = {
|
|
|
8860
9100
|
};
|
|
8861
9101
|
|
|
8862
9102
|
// src/field-trigger/FieldTrigger.tsx
|
|
8863
|
-
import * as
|
|
9103
|
+
import * as React31 from "react";
|
|
8864
9104
|
import { Loader2 as Loader25 } from "lucide-react";
|
|
8865
9105
|
import { useTranslation as useTranslation22 } from "react-i18next";
|
|
8866
9106
|
|
|
@@ -8904,7 +9144,7 @@ function FieldErrorMessage({
|
|
|
8904
9144
|
|
|
8905
9145
|
// src/field-trigger/FieldTrigger.tsx
|
|
8906
9146
|
import { Fragment as Fragment10, jsx as jsx121, jsxs as jsxs78 } from "react/jsx-runtime";
|
|
8907
|
-
var FieldTrigger =
|
|
9147
|
+
var FieldTrigger = React31.forwardRef(
|
|
8908
9148
|
({
|
|
8909
9149
|
as = "button",
|
|
8910
9150
|
variant = "airbnb",
|
|
@@ -9071,7 +9311,7 @@ FieldTrigger.displayName = "FieldTrigger";
|
|
|
9071
9311
|
// src/datepicker/DatePicker.tsx
|
|
9072
9312
|
import { jsx as jsx122, jsxs as jsxs79 } from "react/jsx-runtime";
|
|
9073
9313
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
9074
|
-
var DatePicker =
|
|
9314
|
+
var DatePicker = React32.forwardRef(
|
|
9075
9315
|
({
|
|
9076
9316
|
variant = "default",
|
|
9077
9317
|
label,
|
|
@@ -9097,24 +9337,24 @@ var DatePicker = React31.forwardRef(
|
|
|
9097
9337
|
formatValue = formatDateValue
|
|
9098
9338
|
}, ref) => {
|
|
9099
9339
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
9100
|
-
const [isOpen, setIsOpen] =
|
|
9101
|
-
const triggerId =
|
|
9102
|
-
const pickerId =
|
|
9103
|
-
const labelId =
|
|
9104
|
-
const valueId =
|
|
9105
|
-
const helperTextId =
|
|
9106
|
-
const errorId =
|
|
9107
|
-
const internalRef =
|
|
9340
|
+
const [isOpen, setIsOpen] = React32.useState(false);
|
|
9341
|
+
const triggerId = React32.useId();
|
|
9342
|
+
const pickerId = React32.useId();
|
|
9343
|
+
const labelId = React32.useId();
|
|
9344
|
+
const valueId = React32.useId();
|
|
9345
|
+
const helperTextId = React32.useId();
|
|
9346
|
+
const errorId = React32.useId();
|
|
9347
|
+
const internalRef = React32.useRef(null);
|
|
9108
9348
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
9109
|
-
const monthLabels =
|
|
9110
|
-
const resolvedMinDate =
|
|
9111
|
-
const resolvedMaxDate =
|
|
9112
|
-
const normalizedValue =
|
|
9113
|
-
const normalizedDefaultValue =
|
|
9349
|
+
const monthLabels = React32.useMemo(() => getMonthLabels(locale), [locale]);
|
|
9350
|
+
const resolvedMinDate = React32.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
9351
|
+
const resolvedMaxDate = React32.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
9352
|
+
const normalizedValue = React32.useMemo(() => normalizeDateValue(value), [value]);
|
|
9353
|
+
const normalizedDefaultValue = React32.useMemo(
|
|
9114
9354
|
() => normalizeDateValue(defaultValue),
|
|
9115
9355
|
[defaultValue]
|
|
9116
9356
|
);
|
|
9117
|
-
const resolvedValue =
|
|
9357
|
+
const resolvedValue = React32.useMemo(
|
|
9118
9358
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
9119
9359
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
9120
9360
|
);
|
|
@@ -9145,7 +9385,7 @@ var DatePicker = React31.forwardRef(
|
|
|
9145
9385
|
minDate: resolvedMinDate,
|
|
9146
9386
|
maxDate: resolvedMaxDate
|
|
9147
9387
|
});
|
|
9148
|
-
const handleOpenChange =
|
|
9388
|
+
const handleOpenChange = React32.useCallback(
|
|
9149
9389
|
(nextOpen) => {
|
|
9150
9390
|
if (isBlocked && nextOpen) return;
|
|
9151
9391
|
setIsOpen(nextOpen);
|
|
@@ -9155,7 +9395,7 @@ var DatePicker = React31.forwardRef(
|
|
|
9155
9395
|
},
|
|
9156
9396
|
[isBlocked]
|
|
9157
9397
|
);
|
|
9158
|
-
const handleDone =
|
|
9398
|
+
const handleDone = React32.useCallback(() => {
|
|
9159
9399
|
if (isBlocked) return;
|
|
9160
9400
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
9161
9401
|
handleOpenChange(false);
|
|
@@ -9167,11 +9407,11 @@ var DatePicker = React31.forwardRef(
|
|
|
9167
9407
|
resolvedMaxDate,
|
|
9168
9408
|
resolvedMinDate
|
|
9169
9409
|
]);
|
|
9170
|
-
const handleTriggerClick =
|
|
9410
|
+
const handleTriggerClick = React32.useCallback(() => {
|
|
9171
9411
|
if (isBlocked) return;
|
|
9172
9412
|
setIsOpen(true);
|
|
9173
9413
|
}, [isBlocked]);
|
|
9174
|
-
const handleTriggerKeyDown =
|
|
9414
|
+
const handleTriggerKeyDown = React32.useCallback(
|
|
9175
9415
|
(event) => {
|
|
9176
9416
|
if (isBlocked) return;
|
|
9177
9417
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -9181,7 +9421,7 @@ var DatePicker = React31.forwardRef(
|
|
|
9181
9421
|
},
|
|
9182
9422
|
[isBlocked]
|
|
9183
9423
|
);
|
|
9184
|
-
|
|
9424
|
+
React32.useEffect(() => {
|
|
9185
9425
|
if (isBlocked) {
|
|
9186
9426
|
setIsOpen(false);
|
|
9187
9427
|
}
|
|
@@ -9363,10 +9603,10 @@ function ResponsiveSheet({
|
|
|
9363
9603
|
}
|
|
9364
9604
|
|
|
9365
9605
|
// src/airbnb/input/Input.tsx
|
|
9366
|
-
import * as
|
|
9606
|
+
import * as React33 from "react";
|
|
9367
9607
|
import { jsx as jsx124 } from "react/jsx-runtime";
|
|
9368
9608
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
9369
|
-
var AirbnbInput =
|
|
9609
|
+
var AirbnbInput = React33.forwardRef(
|
|
9370
9610
|
({
|
|
9371
9611
|
variant = "default",
|
|
9372
9612
|
label,
|
|
@@ -9395,15 +9635,15 @@ var AirbnbInput = React32.forwardRef(
|
|
|
9395
9635
|
placeholder,
|
|
9396
9636
|
...props
|
|
9397
9637
|
}, ref) => {
|
|
9398
|
-
const generatedId =
|
|
9399
|
-
const inputRef =
|
|
9638
|
+
const generatedId = React33.useId();
|
|
9639
|
+
const inputRef = React33.useRef(null);
|
|
9400
9640
|
const inputId = id ?? generatedId;
|
|
9401
9641
|
const fieldId = `${inputId}-field`;
|
|
9402
9642
|
const labelId = `${inputId}-label`;
|
|
9403
9643
|
const errorId = `${inputId}-error`;
|
|
9404
9644
|
const accessibleLabel = placeholder ?? label;
|
|
9405
|
-
const [isFocused, setIsFocused] =
|
|
9406
|
-
const [currentValue, setCurrentValue] =
|
|
9645
|
+
const [isFocused, setIsFocused] = React33.useState(false);
|
|
9646
|
+
const [currentValue, setCurrentValue] = React33.useState(
|
|
9407
9647
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
9408
9648
|
);
|
|
9409
9649
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -9413,11 +9653,11 @@ var AirbnbInput = React32.forwardRef(
|
|
|
9413
9653
|
const triggerError = error ?? invalid;
|
|
9414
9654
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
9415
9655
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
9416
|
-
|
|
9656
|
+
React33.useLayoutEffect(() => {
|
|
9417
9657
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
9418
9658
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
9419
9659
|
}, [value]);
|
|
9420
|
-
const setRefs =
|
|
9660
|
+
const setRefs = React33.useCallback(
|
|
9421
9661
|
(node) => {
|
|
9422
9662
|
inputRef.current = node;
|
|
9423
9663
|
if (node && value == null) {
|
|
@@ -9515,11 +9755,11 @@ var AirbnbInput = React32.forwardRef(
|
|
|
9515
9755
|
AirbnbInput.displayName = "Input";
|
|
9516
9756
|
|
|
9517
9757
|
// src/airbnb/phone-field/PhoneField.tsx
|
|
9518
|
-
import * as
|
|
9758
|
+
import * as React39 from "react";
|
|
9519
9759
|
import { ChevronDown as ChevronDown2 } from "lucide-react";
|
|
9520
9760
|
|
|
9521
9761
|
// src/airbnb/select/Select.tsx
|
|
9522
|
-
import * as
|
|
9762
|
+
import * as React38 from "react";
|
|
9523
9763
|
|
|
9524
9764
|
// src/airbnb/select/SelectDesktopMenu.tsx
|
|
9525
9765
|
import { jsx as jsx125, jsxs as jsxs81 } from "react/jsx-runtime";
|
|
@@ -9864,10 +10104,10 @@ function SelectMobileContent({
|
|
|
9864
10104
|
}
|
|
9865
10105
|
|
|
9866
10106
|
// src/airbnb/select/SelectTrigger.tsx
|
|
9867
|
-
import * as
|
|
10107
|
+
import * as React34 from "react";
|
|
9868
10108
|
import { ChevronDown } from "lucide-react";
|
|
9869
10109
|
import { jsx as jsx129 } from "react/jsx-runtime";
|
|
9870
|
-
var SelectTrigger2 =
|
|
10110
|
+
var SelectTrigger2 = React34.forwardRef(
|
|
9871
10111
|
({
|
|
9872
10112
|
id,
|
|
9873
10113
|
open,
|
|
@@ -9934,7 +10174,7 @@ var SelectTrigger2 = React33.forwardRef(
|
|
|
9934
10174
|
SelectTrigger2.displayName = "SelectTrigger";
|
|
9935
10175
|
|
|
9936
10176
|
// src/airbnb/select/useDesktopSelect.ts
|
|
9937
|
-
import * as
|
|
10177
|
+
import * as React35 from "react";
|
|
9938
10178
|
function useDesktopSelect({
|
|
9939
10179
|
isMobile,
|
|
9940
10180
|
isOpen,
|
|
@@ -9943,12 +10183,12 @@ function useDesktopSelect({
|
|
|
9943
10183
|
disabled,
|
|
9944
10184
|
onChange
|
|
9945
10185
|
}) {
|
|
9946
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
9947
|
-
const triggerRef =
|
|
9948
|
-
const listRef =
|
|
9949
|
-
const optionRefs =
|
|
10186
|
+
const [highlightedIndex, setHighlightedIndex] = React35.useState(-1);
|
|
10187
|
+
const triggerRef = React35.useRef(null);
|
|
10188
|
+
const listRef = React35.useRef(null);
|
|
10189
|
+
const optionRefs = React35.useRef([]);
|
|
9950
10190
|
const selectedIndex = getOptionIndex(options, value);
|
|
9951
|
-
|
|
10191
|
+
React35.useEffect(() => {
|
|
9952
10192
|
if (!isOpen || isMobile) return;
|
|
9953
10193
|
setHighlightedIndex((currentIndex) => {
|
|
9954
10194
|
if (currentIndex >= 0) {
|
|
@@ -9963,34 +10203,34 @@ function useDesktopSelect({
|
|
|
9963
10203
|
window.cancelAnimationFrame(frameId);
|
|
9964
10204
|
};
|
|
9965
10205
|
}, [isMobile, isOpen, options, selectedIndex]);
|
|
9966
|
-
|
|
10206
|
+
React35.useEffect(() => {
|
|
9967
10207
|
if (!isOpen || isMobile || highlightedIndex < 0) return;
|
|
9968
10208
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
9969
10209
|
block: "nearest"
|
|
9970
10210
|
});
|
|
9971
10211
|
}, [highlightedIndex, isMobile, isOpen]);
|
|
9972
|
-
|
|
10212
|
+
React35.useEffect(() => {
|
|
9973
10213
|
if (isOpen) return;
|
|
9974
10214
|
setHighlightedIndex(-1);
|
|
9975
10215
|
}, [isOpen]);
|
|
9976
|
-
const focusTrigger =
|
|
10216
|
+
const focusTrigger = React35.useCallback(() => {
|
|
9977
10217
|
triggerRef.current?.focus();
|
|
9978
10218
|
}, []);
|
|
9979
|
-
const handleSelect =
|
|
10219
|
+
const handleSelect = React35.useCallback(
|
|
9980
10220
|
(option) => {
|
|
9981
10221
|
if (option.isDisabled || disabled) return;
|
|
9982
10222
|
onChange(option);
|
|
9983
10223
|
},
|
|
9984
10224
|
[disabled, onChange]
|
|
9985
10225
|
);
|
|
9986
|
-
const openMenu =
|
|
10226
|
+
const openMenu = React35.useCallback(
|
|
9987
10227
|
(targetIndex) => {
|
|
9988
10228
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(options);
|
|
9989
10229
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
9990
10230
|
},
|
|
9991
10231
|
[options, selectedIndex]
|
|
9992
10232
|
);
|
|
9993
|
-
const handleTriggerKeyDown =
|
|
10233
|
+
const handleTriggerKeyDown = React35.useCallback(
|
|
9994
10234
|
(event, onOpen) => {
|
|
9995
10235
|
if (disabled) return;
|
|
9996
10236
|
if (event.key === "ArrowDown") {
|
|
@@ -10015,7 +10255,7 @@ function useDesktopSelect({
|
|
|
10015
10255
|
},
|
|
10016
10256
|
[disabled, openMenu, options, selectedIndex]
|
|
10017
10257
|
);
|
|
10018
|
-
const handleMenuKeyDown =
|
|
10258
|
+
const handleMenuKeyDown = React35.useCallback(
|
|
10019
10259
|
(event, onClose) => {
|
|
10020
10260
|
if (event.key === "Escape") {
|
|
10021
10261
|
event.preventDefault();
|
|
@@ -10065,7 +10305,7 @@ function useDesktopSelect({
|
|
|
10065
10305
|
},
|
|
10066
10306
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
10067
10307
|
);
|
|
10068
|
-
const setOptionRef =
|
|
10308
|
+
const setOptionRef = React35.useCallback(
|
|
10069
10309
|
(index, node) => {
|
|
10070
10310
|
optionRefs.current[index] = node;
|
|
10071
10311
|
},
|
|
@@ -10085,23 +10325,23 @@ function useDesktopSelect({
|
|
|
10085
10325
|
}
|
|
10086
10326
|
|
|
10087
10327
|
// src/airbnb/select/useMobileSelectWheel.ts
|
|
10088
|
-
import * as
|
|
10328
|
+
import * as React36 from "react";
|
|
10089
10329
|
function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
10090
|
-
const [pendingValue, setPendingValue] =
|
|
10330
|
+
const [pendingValue, setPendingValue] = React36.useState(
|
|
10091
10331
|
value ?? null
|
|
10092
10332
|
);
|
|
10093
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
10094
|
-
const mobileListRef =
|
|
10095
|
-
const scrollSettleTimeoutRef =
|
|
10096
|
-
const scrollAnimationFrameRef =
|
|
10097
|
-
const getTargetIndex =
|
|
10333
|
+
const [mobileScrollTop, setMobileScrollTop] = React36.useState(0);
|
|
10334
|
+
const mobileListRef = React36.useRef(null);
|
|
10335
|
+
const scrollSettleTimeoutRef = React36.useRef(null);
|
|
10336
|
+
const scrollAnimationFrameRef = React36.useRef(null);
|
|
10337
|
+
const getTargetIndex = React36.useCallback(
|
|
10098
10338
|
(targetValue) => {
|
|
10099
10339
|
const selectedIndex = getOptionIndex(options, targetValue);
|
|
10100
10340
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(options);
|
|
10101
10341
|
},
|
|
10102
10342
|
[options]
|
|
10103
10343
|
);
|
|
10104
|
-
const syncScrollPosition =
|
|
10344
|
+
const syncScrollPosition = React36.useCallback(
|
|
10105
10345
|
(targetValue, behavior = "instant") => {
|
|
10106
10346
|
const targetIndex = getTargetIndex(targetValue);
|
|
10107
10347
|
if (targetIndex < 0) return;
|
|
@@ -10120,27 +10360,27 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10120
10360
|
},
|
|
10121
10361
|
[getTargetIndex, options]
|
|
10122
10362
|
);
|
|
10123
|
-
const clearScrollSettleTimeout =
|
|
10363
|
+
const clearScrollSettleTimeout = React36.useCallback(() => {
|
|
10124
10364
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
10125
10365
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
10126
10366
|
scrollSettleTimeoutRef.current = null;
|
|
10127
10367
|
}, []);
|
|
10128
|
-
const clearScrollAnimationFrame =
|
|
10368
|
+
const clearScrollAnimationFrame = React36.useCallback(() => {
|
|
10129
10369
|
if (scrollAnimationFrameRef.current === null) return;
|
|
10130
10370
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
10131
10371
|
scrollAnimationFrameRef.current = null;
|
|
10132
10372
|
}, []);
|
|
10133
|
-
|
|
10373
|
+
React36.useEffect(
|
|
10134
10374
|
() => () => {
|
|
10135
10375
|
clearScrollSettleTimeout();
|
|
10136
10376
|
clearScrollAnimationFrame();
|
|
10137
10377
|
},
|
|
10138
10378
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
10139
10379
|
);
|
|
10140
|
-
|
|
10380
|
+
React36.useEffect(() => {
|
|
10141
10381
|
setPendingValue(value ?? null);
|
|
10142
10382
|
}, [value]);
|
|
10143
|
-
|
|
10383
|
+
React36.useLayoutEffect(() => {
|
|
10144
10384
|
if (!isMobile || !isOpen) return;
|
|
10145
10385
|
const frameId = window.requestAnimationFrame(() => {
|
|
10146
10386
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -10149,7 +10389,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10149
10389
|
window.cancelAnimationFrame(frameId);
|
|
10150
10390
|
};
|
|
10151
10391
|
}, [isMobile, isOpen, syncScrollPosition, value]);
|
|
10152
|
-
const settleScroll =
|
|
10392
|
+
const settleScroll = React36.useCallback(() => {
|
|
10153
10393
|
if (!mobileListRef.current) return;
|
|
10154
10394
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
10155
10395
|
const nextOption = options[nextIndex];
|
|
@@ -10161,13 +10401,13 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10161
10401
|
}
|
|
10162
10402
|
setPendingValue(nextOption);
|
|
10163
10403
|
}, [options, pendingValue]);
|
|
10164
|
-
const scheduleScrollSettle =
|
|
10404
|
+
const scheduleScrollSettle = React36.useCallback(() => {
|
|
10165
10405
|
clearScrollSettleTimeout();
|
|
10166
10406
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
10167
10407
|
settleScroll();
|
|
10168
10408
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
10169
10409
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
10170
|
-
const handleScroll =
|
|
10410
|
+
const handleScroll = React36.useCallback(() => {
|
|
10171
10411
|
if (!mobileListRef.current) return;
|
|
10172
10412
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
10173
10413
|
clearScrollAnimationFrame();
|
|
@@ -10177,7 +10417,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10177
10417
|
});
|
|
10178
10418
|
scheduleScrollSettle();
|
|
10179
10419
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
10180
|
-
const focusOptionByIndex =
|
|
10420
|
+
const focusOptionByIndex = React36.useCallback(
|
|
10181
10421
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
10182
10422
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
10183
10423
|
const option = options[index];
|
|
@@ -10195,7 +10435,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10195
10435
|
},
|
|
10196
10436
|
[options, scheduleScrollSettle]
|
|
10197
10437
|
);
|
|
10198
|
-
const handleOptionClick =
|
|
10438
|
+
const handleOptionClick = React36.useCallback(
|
|
10199
10439
|
(option) => {
|
|
10200
10440
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
10201
10441
|
const optionIndex = getOptionIndex(options, option);
|
|
@@ -10204,7 +10444,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10204
10444
|
},
|
|
10205
10445
|
[disabled, focusOptionByIndex, options]
|
|
10206
10446
|
);
|
|
10207
|
-
const moveByStep =
|
|
10447
|
+
const moveByStep = React36.useCallback(
|
|
10208
10448
|
(step) => {
|
|
10209
10449
|
const currentIndex = getOptionIndex(options, pendingValue);
|
|
10210
10450
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex(options) : getLastEnabledOptionIndex(options);
|
|
@@ -10216,7 +10456,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10216
10456
|
},
|
|
10217
10457
|
[focusOptionByIndex, options, pendingValue]
|
|
10218
10458
|
);
|
|
10219
|
-
const moveToBoundary =
|
|
10459
|
+
const moveToBoundary = React36.useCallback(
|
|
10220
10460
|
(boundary) => {
|
|
10221
10461
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex(options) : getLastEnabledOptionIndex(options);
|
|
10222
10462
|
if (targetIndex >= 0) {
|
|
@@ -10225,7 +10465,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10225
10465
|
},
|
|
10226
10466
|
[focusOptionByIndex, options]
|
|
10227
10467
|
);
|
|
10228
|
-
const syncPendingValue =
|
|
10468
|
+
const syncPendingValue = React36.useCallback(
|
|
10229
10469
|
(nextValue) => {
|
|
10230
10470
|
const normalizedValue = nextValue ?? null;
|
|
10231
10471
|
const matchedIndex = getOptionIndex(options, normalizedValue);
|
|
@@ -10253,9 +10493,9 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
10253
10493
|
}
|
|
10254
10494
|
|
|
10255
10495
|
// src/airbnb/select/useSelectIds.ts
|
|
10256
|
-
import * as
|
|
10496
|
+
import * as React37 from "react";
|
|
10257
10497
|
function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
10258
|
-
const reactId =
|
|
10498
|
+
const reactId = React37.useId().replace(/:/g, "");
|
|
10259
10499
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
10260
10500
|
const triggerId = `${baseId}-trigger`;
|
|
10261
10501
|
const labelId = `${baseId}-label`;
|
|
@@ -10265,7 +10505,7 @@ function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
|
10265
10505
|
const listboxId = `${baseId}-listbox`;
|
|
10266
10506
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
10267
10507
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
10268
|
-
const getOptionId2 =
|
|
10508
|
+
const getOptionId2 = React37.useCallback(
|
|
10269
10509
|
(index) => `${baseId}-option-${index}`,
|
|
10270
10510
|
[baseId]
|
|
10271
10511
|
);
|
|
@@ -10282,61 +10522,9 @@ function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
|
10282
10522
|
};
|
|
10283
10523
|
}
|
|
10284
10524
|
|
|
10285
|
-
// src/lib/use-outside-click.ts
|
|
10286
|
-
import { useCallback as useCallback18, useEffect as useEffect17, useRef as useRef16 } from "react";
|
|
10287
|
-
function useOutsideClick(elementRef, onOutsideClick, nested) {
|
|
10288
|
-
const handleOutsideClick = useRef16(onOutsideClick);
|
|
10289
|
-
handleOutsideClick.current = onOutsideClick;
|
|
10290
|
-
const checkNestedElements = useCallback18(
|
|
10291
|
-
(event) => {
|
|
10292
|
-
const checkIsElementClickedBySelector = (selector) => {
|
|
10293
|
-
const nestedElement = getDocument().querySelector(selector);
|
|
10294
|
-
return nestedElement?.contains(event.target);
|
|
10295
|
-
};
|
|
10296
|
-
const checkDataAttribute = () => {
|
|
10297
|
-
const target = event.target;
|
|
10298
|
-
if (!target || !(target instanceof HTMLElement)) {
|
|
10299
|
-
return false;
|
|
10300
|
-
}
|
|
10301
|
-
let current = target;
|
|
10302
|
-
while (current) {
|
|
10303
|
-
if (current.hasAttribute("data-exclude-from-outside-click")) {
|
|
10304
|
-
return true;
|
|
10305
|
-
}
|
|
10306
|
-
current = current.parentElement;
|
|
10307
|
-
}
|
|
10308
|
-
return false;
|
|
10309
|
-
};
|
|
10310
|
-
if (nested) {
|
|
10311
|
-
if (typeof nested === "string") {
|
|
10312
|
-
if (checkIsElementClickedBySelector(nested)) return true;
|
|
10313
|
-
} else {
|
|
10314
|
-
if (nested.some(checkIsElementClickedBySelector)) return true;
|
|
10315
|
-
}
|
|
10316
|
-
}
|
|
10317
|
-
return checkDataAttribute();
|
|
10318
|
-
},
|
|
10319
|
-
[nested]
|
|
10320
|
-
);
|
|
10321
|
-
useEffect17(() => {
|
|
10322
|
-
function handleClickOutside(event) {
|
|
10323
|
-
const isNestedElement = checkNestedElements(event);
|
|
10324
|
-
if (elementRef?.current && !elementRef.current.contains(event.target) && !isNestedElement) {
|
|
10325
|
-
handleOutsideClick.current?.(event);
|
|
10326
|
-
}
|
|
10327
|
-
}
|
|
10328
|
-
getDocument().addEventListener("mousedown", handleClickOutside, true);
|
|
10329
|
-
getDocument().addEventListener("touchstart", handleClickOutside, true);
|
|
10330
|
-
return () => {
|
|
10331
|
-
getDocument().removeEventListener("mousedown", handleClickOutside, true);
|
|
10332
|
-
getDocument().removeEventListener("touchstart", handleClickOutside, true);
|
|
10333
|
-
};
|
|
10334
|
-
}, [checkNestedElements, elementRef]);
|
|
10335
|
-
}
|
|
10336
|
-
|
|
10337
10525
|
// src/airbnb/select/Select.tsx
|
|
10338
10526
|
import { jsx as jsx130, jsxs as jsxs84 } from "react/jsx-runtime";
|
|
10339
|
-
var AirbnbSelect =
|
|
10527
|
+
var AirbnbSelect = React38.forwardRef(function AirbnbSelect2({
|
|
10340
10528
|
options = [],
|
|
10341
10529
|
value,
|
|
10342
10530
|
onChange,
|
|
@@ -10363,8 +10551,8 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10363
10551
|
noOptionsMessage
|
|
10364
10552
|
}, ref) {
|
|
10365
10553
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
10366
|
-
const [isOpen, setIsOpen] =
|
|
10367
|
-
const containerRef =
|
|
10554
|
+
const [isOpen, setIsOpen] = React38.useState(false);
|
|
10555
|
+
const containerRef = React38.useRef(null);
|
|
10368
10556
|
const hasValue = Boolean(value);
|
|
10369
10557
|
const helperText = placeholder ?? label;
|
|
10370
10558
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
@@ -10418,12 +10606,12 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10418
10606
|
const activeMobileIndex = getOptionIndex(options, pendingValue);
|
|
10419
10607
|
const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
|
|
10420
10608
|
useOutsideClick(containerRef, isOpen && !isMobile ? () => setIsOpen(false) : null);
|
|
10421
|
-
|
|
10609
|
+
React38.useEffect(() => {
|
|
10422
10610
|
if (isBlocked) {
|
|
10423
10611
|
setIsOpen(false);
|
|
10424
10612
|
}
|
|
10425
10613
|
}, [isBlocked]);
|
|
10426
|
-
|
|
10614
|
+
React38.useEffect(
|
|
10427
10615
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
10428
10616
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
10429
10617
|
return;
|
|
@@ -10435,7 +10623,7 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10435
10623
|
},
|
|
10436
10624
|
[onChange, options, value]
|
|
10437
10625
|
);
|
|
10438
|
-
const handleMobileOpenChange =
|
|
10626
|
+
const handleMobileOpenChange = React38.useCallback(
|
|
10439
10627
|
(nextOpen) => {
|
|
10440
10628
|
if (isBlocked && nextOpen) return;
|
|
10441
10629
|
setIsOpen(nextOpen);
|
|
@@ -10446,7 +10634,7 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10446
10634
|
},
|
|
10447
10635
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
10448
10636
|
);
|
|
10449
|
-
const handleMobileDone =
|
|
10637
|
+
const handleMobileDone = React38.useCallback(() => {
|
|
10450
10638
|
if (isBlocked) return;
|
|
10451
10639
|
const finalOption = pendingValue;
|
|
10452
10640
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -10455,7 +10643,7 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10455
10643
|
setIsOpen(false);
|
|
10456
10644
|
focusTrigger();
|
|
10457
10645
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
10458
|
-
const handleTriggerClick =
|
|
10646
|
+
const handleTriggerClick = React38.useCallback(() => {
|
|
10459
10647
|
if (isBlocked) return;
|
|
10460
10648
|
setIsOpen((prev) => {
|
|
10461
10649
|
const nextOpen = !prev;
|
|
@@ -10624,7 +10812,7 @@ var AirbnbSelect = React37.forwardRef(function AirbnbSelect2({
|
|
|
10624
10812
|
|
|
10625
10813
|
// src/airbnb/phone-field/PhoneField.tsx
|
|
10626
10814
|
import { jsx as jsx131, jsxs as jsxs85 } from "react/jsx-runtime";
|
|
10627
|
-
var PhoneField =
|
|
10815
|
+
var PhoneField = React39.forwardRef(
|
|
10628
10816
|
({
|
|
10629
10817
|
variant = "default",
|
|
10630
10818
|
label,
|
|
@@ -10648,8 +10836,8 @@ var PhoneField = React38.forwardRef(
|
|
|
10648
10836
|
mobileTitle,
|
|
10649
10837
|
codePlaceholder = "+00"
|
|
10650
10838
|
}, ref) => {
|
|
10651
|
-
const inputId =
|
|
10652
|
-
const codeOptions =
|
|
10839
|
+
const inputId = React39.useId();
|
|
10840
|
+
const codeOptions = React39.useMemo(
|
|
10653
10841
|
() => options.map((option) => ({
|
|
10654
10842
|
value: option.value,
|
|
10655
10843
|
label: `${option.label} (${option.value})`,
|
|
@@ -10657,7 +10845,7 @@ var PhoneField = React38.forwardRef(
|
|
|
10657
10845
|
})),
|
|
10658
10846
|
[options]
|
|
10659
10847
|
);
|
|
10660
|
-
const selectedCodeOption =
|
|
10848
|
+
const selectedCodeOption = React39.useMemo(
|
|
10661
10849
|
() => codeOptions.find((option) => option.value === value?.code) ?? null,
|
|
10662
10850
|
[codeOptions, value?.code]
|
|
10663
10851
|
);
|
|
@@ -10799,11 +10987,11 @@ var PhoneField = React38.forwardRef(
|
|
|
10799
10987
|
PhoneField.displayName = "PhoneField";
|
|
10800
10988
|
|
|
10801
10989
|
// src/airbnb/search-input/SearchInput.tsx
|
|
10802
|
-
import * as
|
|
10990
|
+
import * as React40 from "react";
|
|
10803
10991
|
import { useTranslation as useTranslation23 } from "react-i18next";
|
|
10804
10992
|
import { Search as Search3, X as X8 } from "lucide-react";
|
|
10805
10993
|
import { jsx as jsx132, jsxs as jsxs86 } from "react/jsx-runtime";
|
|
10806
|
-
var AirbnbSearchInput =
|
|
10994
|
+
var AirbnbSearchInput = React40.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
10807
10995
|
const { t } = useTranslation23();
|
|
10808
10996
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
10809
10997
|
return /* @__PURE__ */ jsxs86("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
@@ -10841,28 +11029,10 @@ var AirbnbSearchInput = React39.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
10841
11029
|
AirbnbSearchInput.displayName = "SearchInput";
|
|
10842
11030
|
|
|
10843
11031
|
// src/searchable-select/SearchableSelect.tsx
|
|
10844
|
-
import * as
|
|
11032
|
+
import * as React41 from "react";
|
|
10845
11033
|
import { ChevronDown as ChevronDown3, Search as Search4 } from "lucide-react";
|
|
10846
11034
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
10847
|
-
import { useCallback as
|
|
10848
|
-
|
|
10849
|
-
// src/lib/use-event.ts
|
|
10850
|
-
import { useCallback as useCallback20, useLayoutEffect as useLayoutEffect5, useRef as useRef18 } from "react";
|
|
10851
|
-
function useEvent(fn) {
|
|
10852
|
-
const fnRef = useRef18(fn);
|
|
10853
|
-
useLayoutEffect5(() => {
|
|
10854
|
-
fnRef.current = fn;
|
|
10855
|
-
}, [fn]);
|
|
10856
|
-
const eventCb = useCallback20(
|
|
10857
|
-
(...args) => {
|
|
10858
|
-
return fnRef.current?.apply(null, args);
|
|
10859
|
-
},
|
|
10860
|
-
[fnRef]
|
|
10861
|
-
);
|
|
10862
|
-
return eventCb;
|
|
10863
|
-
}
|
|
10864
|
-
|
|
10865
|
-
// src/searchable-select/SearchableSelect.tsx
|
|
11035
|
+
import { useCallback as useCallback23 } from "react";
|
|
10866
11036
|
import { jsx as jsx133, jsxs as jsxs87 } from "react/jsx-runtime";
|
|
10867
11037
|
var ROW_HEIGHT = 48;
|
|
10868
11038
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
@@ -10904,13 +11074,13 @@ var SearchableSelectInternal = ({
|
|
|
10904
11074
|
loadingMessage
|
|
10905
11075
|
}, ref) => {
|
|
10906
11076
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
10907
|
-
const reactId =
|
|
10908
|
-
const [open, setOpen] =
|
|
10909
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
10910
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
10911
|
-
const containerRef =
|
|
10912
|
-
const triggerRef =
|
|
10913
|
-
const inputRef =
|
|
11077
|
+
const reactId = React41.useId();
|
|
11078
|
+
const [open, setOpen] = React41.useState(false);
|
|
11079
|
+
const [internalSearchValue, setInternalSearchValue] = React41.useState("");
|
|
11080
|
+
const [highlightedIndex, setHighlightedIndex] = React41.useState(-1);
|
|
11081
|
+
const containerRef = React41.useRef(null);
|
|
11082
|
+
const triggerRef = React41.useRef(null);
|
|
11083
|
+
const inputRef = React41.useRef(null);
|
|
10914
11084
|
const listboxId = `${reactId}-listbox`;
|
|
10915
11085
|
const labelId = `${reactId}-label`;
|
|
10916
11086
|
const valueId = `${reactId}-value`;
|
|
@@ -10919,13 +11089,13 @@ var SearchableSelectInternal = ({
|
|
|
10919
11089
|
const searchInputId = `${reactId}-search`;
|
|
10920
11090
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
10921
11091
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
10922
|
-
const visibleOptions =
|
|
11092
|
+
const visibleOptions = React41.useMemo(() => {
|
|
10923
11093
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
10924
11094
|
return options;
|
|
10925
11095
|
}
|
|
10926
11096
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
10927
11097
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
10928
|
-
const selectedIndex =
|
|
11098
|
+
const selectedIndex = React41.useMemo(
|
|
10929
11099
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
10930
11100
|
[value?.value, visibleOptions]
|
|
10931
11101
|
);
|
|
@@ -10937,7 +11107,7 @@ var SearchableSelectInternal = ({
|
|
|
10937
11107
|
const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
|
|
10938
11108
|
useOutsideClick(containerRef, open && !isMobile ? () => closeSelect() : null);
|
|
10939
11109
|
const handleOnOpenChange = useEvent(onOpenChange);
|
|
10940
|
-
const setSelectOpen =
|
|
11110
|
+
const setSelectOpen = useCallback23(
|
|
10941
11111
|
(nextOpen, options2) => {
|
|
10942
11112
|
setOpen(nextOpen);
|
|
10943
11113
|
handleOnOpenChange?.(nextOpen);
|
|
@@ -10947,7 +11117,7 @@ var SearchableSelectInternal = ({
|
|
|
10947
11117
|
},
|
|
10948
11118
|
[handleOnOpenChange]
|
|
10949
11119
|
);
|
|
10950
|
-
|
|
11120
|
+
React41.useEffect(() => {
|
|
10951
11121
|
if (isBlocked) {
|
|
10952
11122
|
setSelectOpen(false);
|
|
10953
11123
|
return;
|
|
@@ -10960,7 +11130,7 @@ var SearchableSelectInternal = ({
|
|
|
10960
11130
|
window.cancelAnimationFrame(frameId);
|
|
10961
11131
|
};
|
|
10962
11132
|
}, [isBlocked, open, setSelectOpen]);
|
|
10963
|
-
|
|
11133
|
+
React41.useEffect(() => {
|
|
10964
11134
|
if (!open) {
|
|
10965
11135
|
setHighlightedIndex(-1);
|
|
10966
11136
|
return;
|
|
@@ -11055,7 +11225,7 @@ var SearchableSelectInternal = ({
|
|
|
11055
11225
|
onOptionHover: setHighlightedIndex
|
|
11056
11226
|
}
|
|
11057
11227
|
);
|
|
11058
|
-
|
|
11228
|
+
React41.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
11059
11229
|
return /* @__PURE__ */ jsxs87(
|
|
11060
11230
|
"div",
|
|
11061
11231
|
{
|
|
@@ -11141,7 +11311,7 @@ var SearchableSelectInternal = ({
|
|
|
11141
11311
|
}
|
|
11142
11312
|
);
|
|
11143
11313
|
};
|
|
11144
|
-
var SearchableSelect =
|
|
11314
|
+
var SearchableSelect = React41.forwardRef(
|
|
11145
11315
|
SearchableSelectInternal
|
|
11146
11316
|
);
|
|
11147
11317
|
function SearchableSelectContent({
|
|
@@ -11168,9 +11338,9 @@ function SearchableSelectContent({
|
|
|
11168
11338
|
onOptionClick,
|
|
11169
11339
|
onOptionHover
|
|
11170
11340
|
}) {
|
|
11171
|
-
const listRef =
|
|
11172
|
-
const lastLoadMoreOptionsLengthRef =
|
|
11173
|
-
const previousHighlightedIndexRef =
|
|
11341
|
+
const listRef = React41.useRef(null);
|
|
11342
|
+
const lastLoadMoreOptionsLengthRef = React41.useRef(null);
|
|
11343
|
+
const previousHighlightedIndexRef = React41.useRef(highlightedIndex);
|
|
11174
11344
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
11175
11345
|
const virtualizer = useVirtualizer({
|
|
11176
11346
|
count: rowCount,
|
|
@@ -11181,7 +11351,7 @@ function SearchableSelectContent({
|
|
|
11181
11351
|
const virtualItems = virtualizer.getVirtualItems();
|
|
11182
11352
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
11183
11353
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
11184
|
-
|
|
11354
|
+
React41.useEffect(() => {
|
|
11185
11355
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
11186
11356
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
11187
11357
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -11189,7 +11359,7 @@ function SearchableSelectContent({
|
|
|
11189
11359
|
onLoadMore?.();
|
|
11190
11360
|
}
|
|
11191
11361
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
11192
|
-
|
|
11362
|
+
React41.useEffect(() => {
|
|
11193
11363
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
11194
11364
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
11195
11365
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -11569,10 +11739,26 @@ export {
|
|
|
11569
11739
|
toggleVariants,
|
|
11570
11740
|
uiKitI18nResources,
|
|
11571
11741
|
uiKitTranslations,
|
|
11742
|
+
useAbortController,
|
|
11743
|
+
useClickEscape,
|
|
11744
|
+
useCombinedRef,
|
|
11745
|
+
useDebounce,
|
|
11746
|
+
useEvent,
|
|
11747
|
+
useHover,
|
|
11748
|
+
useIsMobile,
|
|
11749
|
+
useIsMounted,
|
|
11750
|
+
useModalControls,
|
|
11751
|
+
useOutsideClick,
|
|
11752
|
+
usePrevious,
|
|
11572
11753
|
useRadioOptions,
|
|
11754
|
+
useScreenResize,
|
|
11755
|
+
useScrollFrameIntoView,
|
|
11756
|
+
useScrollToTop,
|
|
11573
11757
|
useSidebar,
|
|
11574
11758
|
useSidebarMenuButton,
|
|
11575
11759
|
useSidebarSafe,
|
|
11760
|
+
useTimeout,
|
|
11761
|
+
useTimer,
|
|
11576
11762
|
useUpdateToast
|
|
11577
11763
|
};
|
|
11578
11764
|
//# sourceMappingURL=index.js.map
|