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