@chekinapp/ui 0.0.51 → 0.0.53
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 +310 -233
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +331 -255
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2040,7 +2040,7 @@ function DataTable({ columns, data }) {
|
|
|
2040
2040
|
}
|
|
2041
2041
|
|
|
2042
2042
|
// src/dialog/Dialog.tsx
|
|
2043
|
-
import * as
|
|
2043
|
+
import * as React13 from "react";
|
|
2044
2044
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
2045
2045
|
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
|
|
2046
2046
|
import { XIcon } from "lucide-react";
|
|
@@ -2668,6 +2668,77 @@ function useKeyDown(key, cb, options) {
|
|
|
2668
2668
|
}, [handleKeyDown, enabled]);
|
|
2669
2669
|
}
|
|
2670
2670
|
|
|
2671
|
+
// src/hooks/use-iframe-focus-trap-fallback.ts
|
|
2672
|
+
import * as React12 from "react";
|
|
2673
|
+
var IFRAME_FOCUSABLE_SELECTOR = [
|
|
2674
|
+
"a[href]",
|
|
2675
|
+
"area[href]",
|
|
2676
|
+
'input:not([disabled]):not([type="hidden"])',
|
|
2677
|
+
"select:not([disabled])",
|
|
2678
|
+
"textarea:not([disabled])",
|
|
2679
|
+
"button:not([disabled])",
|
|
2680
|
+
"iframe",
|
|
2681
|
+
"object",
|
|
2682
|
+
"embed",
|
|
2683
|
+
'[contenteditable="true"]',
|
|
2684
|
+
'[tabindex]:not([tabindex="-1"])'
|
|
2685
|
+
].join(",");
|
|
2686
|
+
function getFocusableElements(container) {
|
|
2687
|
+
const ownerDocument = container.ownerDocument;
|
|
2688
|
+
const HTMLElementConstructor = ownerDocument.defaultView?.HTMLElement ?? HTMLElement;
|
|
2689
|
+
return Array.from(
|
|
2690
|
+
container.querySelectorAll(IFRAME_FOCUSABLE_SELECTOR)
|
|
2691
|
+
).filter((element) => {
|
|
2692
|
+
if (!(element instanceof HTMLElementConstructor)) {
|
|
2693
|
+
return false;
|
|
2694
|
+
}
|
|
2695
|
+
if (element.tabIndex < 0 || element.hidden || element.getAttribute("aria-hidden")) {
|
|
2696
|
+
return false;
|
|
2697
|
+
}
|
|
2698
|
+
return element.getClientRects().length > 0 || element === ownerDocument.activeElement;
|
|
2699
|
+
});
|
|
2700
|
+
}
|
|
2701
|
+
function useIframeFocusTrapFallback(contentRef, onKeyDown) {
|
|
2702
|
+
return React12.useCallback(
|
|
2703
|
+
(event) => {
|
|
2704
|
+
onKeyDown?.(event);
|
|
2705
|
+
if (event.defaultPrevented || event.key !== "Tab") {
|
|
2706
|
+
return;
|
|
2707
|
+
}
|
|
2708
|
+
const contentNode = contentRef.current;
|
|
2709
|
+
if (!contentNode || !window.chekinCustomDocument || contentNode.ownerDocument !== window.chekinCustomDocument) {
|
|
2710
|
+
return;
|
|
2711
|
+
}
|
|
2712
|
+
const focusableElements = getFocusableElements(contentNode);
|
|
2713
|
+
if (!focusableElements.length) {
|
|
2714
|
+
event.preventDefault();
|
|
2715
|
+
contentNode.focus();
|
|
2716
|
+
return;
|
|
2717
|
+
}
|
|
2718
|
+
const firstFocusableElement = focusableElements[0];
|
|
2719
|
+
const lastFocusableElement = focusableElements[focusableElements.length - 1];
|
|
2720
|
+
const activeElement = contentNode.ownerDocument.activeElement;
|
|
2721
|
+
if (focusableElements.length === 1) {
|
|
2722
|
+
event.preventDefault();
|
|
2723
|
+
firstFocusableElement.focus();
|
|
2724
|
+
return;
|
|
2725
|
+
}
|
|
2726
|
+
if (event.shiftKey) {
|
|
2727
|
+
if (activeElement === firstFocusableElement || activeElement === contentNode) {
|
|
2728
|
+
event.preventDefault();
|
|
2729
|
+
lastFocusableElement.focus();
|
|
2730
|
+
}
|
|
2731
|
+
return;
|
|
2732
|
+
}
|
|
2733
|
+
if (activeElement === lastFocusableElement) {
|
|
2734
|
+
event.preventDefault();
|
|
2735
|
+
firstFocusableElement.focus();
|
|
2736
|
+
}
|
|
2737
|
+
},
|
|
2738
|
+
[contentRef, onKeyDown]
|
|
2739
|
+
);
|
|
2740
|
+
}
|
|
2741
|
+
|
|
2671
2742
|
// src/hooks/use-reset-after-request-status.ts
|
|
2672
2743
|
import { useEffect as useEffect16, useRef as useRef9 } from "react";
|
|
2673
2744
|
var ResetStatusTimeoutMs = 2e3;
|
|
@@ -2758,7 +2829,7 @@ function useIsFormTouched({
|
|
|
2758
2829
|
// src/dialog/Dialog.tsx
|
|
2759
2830
|
import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2760
2831
|
function useIframeTitleFix(titleRef) {
|
|
2761
|
-
|
|
2832
|
+
React13.useEffect(() => {
|
|
2762
2833
|
if (!window.chekinCustomDocument) {
|
|
2763
2834
|
return;
|
|
2764
2835
|
}
|
|
@@ -2787,7 +2858,7 @@ function DialogClose({ ...props }) {
|
|
|
2787
2858
|
}
|
|
2788
2859
|
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";
|
|
2789
2860
|
var scrollableOverlayClasses = "fixed inset-0 z-50 flex flex-col items-center overflow-y-auto overscroll-none pb-[19px] pt-[20px]";
|
|
2790
|
-
var DialogOverlay =
|
|
2861
|
+
var DialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
|
|
2791
2862
|
DialogPrimitive.Overlay,
|
|
2792
2863
|
{
|
|
2793
2864
|
ref,
|
|
@@ -2799,7 +2870,7 @@ var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
2799
2870
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
2800
2871
|
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";
|
|
2801
2872
|
var dialogCloseButtonClasses = "absolute right-4 top-4 flex size-6 items-center justify-center 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";
|
|
2802
|
-
var DialogContent =
|
|
2873
|
+
var DialogContent = React13.forwardRef(
|
|
2803
2874
|
({
|
|
2804
2875
|
className,
|
|
2805
2876
|
showCloseButton = true,
|
|
@@ -2809,13 +2880,17 @@ var DialogContent = React12.forwardRef(
|
|
|
2809
2880
|
overlayClassName,
|
|
2810
2881
|
...props
|
|
2811
2882
|
}, ref) => {
|
|
2883
|
+
const contentRef = React13.useRef(null);
|
|
2884
|
+
const combinedRef = useCombinedRef(contentRef, ref);
|
|
2885
|
+
const handleKeyDown = useIframeFocusTrapFallback(contentRef, props.onKeyDown);
|
|
2812
2886
|
const contentElement = /* @__PURE__ */ jsxs22(
|
|
2813
2887
|
DialogPrimitive.Content,
|
|
2814
2888
|
{
|
|
2815
|
-
ref,
|
|
2889
|
+
ref: combinedRef,
|
|
2816
2890
|
"data-slot": "dialog-content",
|
|
2817
2891
|
className: cn(dialogContentClasses, className),
|
|
2818
2892
|
...props,
|
|
2893
|
+
onKeyDown: handleKeyDown,
|
|
2819
2894
|
children: [
|
|
2820
2895
|
children,
|
|
2821
2896
|
showCloseButton && /* @__PURE__ */ jsxs22(
|
|
@@ -2875,8 +2950,8 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx29(
|
|
|
2875
2950
|
}
|
|
2876
2951
|
);
|
|
2877
2952
|
DialogFooter.displayName = "DialogFooter";
|
|
2878
|
-
var DialogTitle =
|
|
2879
|
-
const titleRef =
|
|
2953
|
+
var DialogTitle = React13.forwardRef(({ className, ...props }, ref) => {
|
|
2954
|
+
const titleRef = React13.useRef(null);
|
|
2880
2955
|
const combinedRef = useCombinedRef(titleRef, ref);
|
|
2881
2956
|
useIframeTitleFix(titleRef);
|
|
2882
2957
|
return /* @__PURE__ */ jsx29(
|
|
@@ -2890,7 +2965,7 @@ var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => {
|
|
|
2890
2965
|
);
|
|
2891
2966
|
});
|
|
2892
2967
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
2893
|
-
var DialogDescription =
|
|
2968
|
+
var DialogDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
|
|
2894
2969
|
DialogPrimitive.Description,
|
|
2895
2970
|
{
|
|
2896
2971
|
ref,
|
|
@@ -2952,9 +3027,9 @@ function ConfirmationDialog({
|
|
|
2952
3027
|
}
|
|
2953
3028
|
|
|
2954
3029
|
// src/default-select-trigger/DefaultSelectTrigger.tsx
|
|
2955
|
-
import * as
|
|
3030
|
+
import * as React14 from "react";
|
|
2956
3031
|
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
2957
|
-
var DefaultSelectTrigger =
|
|
3032
|
+
var DefaultSelectTrigger = React14.forwardRef(
|
|
2958
3033
|
({
|
|
2959
3034
|
className,
|
|
2960
3035
|
disabled,
|
|
@@ -3027,7 +3102,7 @@ function DownloadEntryFormsButton({
|
|
|
3027
3102
|
import { useState as useState12 } from "react";
|
|
3028
3103
|
|
|
3029
3104
|
// src/dropdown-menu/DropdownMenu.tsx
|
|
3030
|
-
import * as
|
|
3105
|
+
import * as React15 from "react";
|
|
3031
3106
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
3032
3107
|
import { Check as Check6, ChevronRight as ChevronRight3, Circle } from "lucide-react";
|
|
3033
3108
|
|
|
@@ -3079,7 +3154,7 @@ function DropdownMenuRadioGroup({
|
|
|
3079
3154
|
}) {
|
|
3080
3155
|
return /* @__PURE__ */ jsx34(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
|
|
3081
3156
|
}
|
|
3082
|
-
var DropdownMenuSubTrigger =
|
|
3157
|
+
var DropdownMenuSubTrigger = React15.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
|
|
3083
3158
|
DropdownMenuPrimitive.SubTrigger,
|
|
3084
3159
|
{
|
|
3085
3160
|
ref,
|
|
@@ -3101,7 +3176,7 @@ var DropdownMenuSubTrigger = React14.forwardRef(({ className, inset, children, .
|
|
|
3101
3176
|
}
|
|
3102
3177
|
));
|
|
3103
3178
|
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
|
|
3104
|
-
var DropdownMenuSubContent =
|
|
3179
|
+
var DropdownMenuSubContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
3105
3180
|
DropdownMenuPrimitive.SubContent,
|
|
3106
3181
|
{
|
|
3107
3182
|
ref,
|
|
@@ -3119,7 +3194,7 @@ var DropdownMenuSubContent = React14.forwardRef(({ className, ...props }, ref) =
|
|
|
3119
3194
|
}
|
|
3120
3195
|
));
|
|
3121
3196
|
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
|
|
3122
|
-
var DropdownMenuContent =
|
|
3197
|
+
var DropdownMenuContent = React15.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => /* @__PURE__ */ jsx34(DropdownMenuPrimitive.Portal, { container: container || getCustomContainer(), children: /* @__PURE__ */ jsx34(
|
|
3123
3198
|
DropdownMenuPrimitive.Content,
|
|
3124
3199
|
{
|
|
3125
3200
|
ref,
|
|
@@ -3141,7 +3216,7 @@ var DropdownMenuContent = React14.forwardRef(({ className, sideOffset = 4, conta
|
|
|
3141
3216
|
}
|
|
3142
3217
|
) }));
|
|
3143
3218
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
|
3144
|
-
var DropdownMenuItem =
|
|
3219
|
+
var DropdownMenuItem = React15.forwardRef(({ className, children, inset, active, leftSlot, ...props }, ref) => /* @__PURE__ */ jsxs26(
|
|
3145
3220
|
DropdownMenuPrimitive.Item,
|
|
3146
3221
|
{
|
|
3147
3222
|
ref,
|
|
@@ -3166,7 +3241,7 @@ var DropdownMenuItem = React14.forwardRef(({ className, children, inset, active,
|
|
|
3166
3241
|
}
|
|
3167
3242
|
));
|
|
3168
3243
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
|
3169
|
-
var DropdownMenuCheckboxItem =
|
|
3244
|
+
var DropdownMenuCheckboxItem = React15.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs26(
|
|
3170
3245
|
DropdownMenuPrimitive.CheckboxItem,
|
|
3171
3246
|
{
|
|
3172
3247
|
ref,
|
|
@@ -3186,7 +3261,7 @@ var DropdownMenuCheckboxItem = React14.forwardRef(({ className, children, checke
|
|
|
3186
3261
|
}
|
|
3187
3262
|
));
|
|
3188
3263
|
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
|
|
3189
|
-
var DropdownMenuRadioItem =
|
|
3264
|
+
var DropdownMenuRadioItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
|
|
3190
3265
|
DropdownMenuPrimitive.RadioItem,
|
|
3191
3266
|
{
|
|
3192
3267
|
ref,
|
|
@@ -3205,7 +3280,7 @@ var DropdownMenuRadioItem = React14.forwardRef(({ className, children, ...props
|
|
|
3205
3280
|
}
|
|
3206
3281
|
));
|
|
3207
3282
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
|
3208
|
-
var DropdownMenuLabel =
|
|
3283
|
+
var DropdownMenuLabel = React15.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
3209
3284
|
DropdownMenuPrimitive.Label,
|
|
3210
3285
|
{
|
|
3211
3286
|
ref,
|
|
@@ -3218,7 +3293,7 @@ var DropdownMenuLabel = React14.forwardRef(({ className, inset, ...props }, ref)
|
|
|
3218
3293
|
}
|
|
3219
3294
|
));
|
|
3220
3295
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
|
3221
|
-
var DropdownMenuSeparator =
|
|
3296
|
+
var DropdownMenuSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
3222
3297
|
DropdownMenuPrimitive.Separator,
|
|
3223
3298
|
{
|
|
3224
3299
|
ref,
|
|
@@ -3607,9 +3682,9 @@ function EmptySectionPlaceholder({
|
|
|
3607
3682
|
}
|
|
3608
3683
|
|
|
3609
3684
|
// src/external-link/ExternalLink.tsx
|
|
3610
|
-
import * as
|
|
3685
|
+
import * as React16 from "react";
|
|
3611
3686
|
import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3612
|
-
var ExternalLink =
|
|
3687
|
+
var ExternalLink = React16.forwardRef(
|
|
3613
3688
|
({ className, children, showIcon = true, target = "_blank", rel, ...props }, ref) => /* @__PURE__ */ jsxs31(
|
|
3614
3689
|
"a",
|
|
3615
3690
|
{
|
|
@@ -3655,7 +3730,7 @@ import { useTranslation as useTranslation10 } from "react-i18next";
|
|
|
3655
3730
|
import { Play as Play3 } from "lucide-react";
|
|
3656
3731
|
|
|
3657
3732
|
// src/switch/Switch.tsx
|
|
3658
|
-
import * as
|
|
3733
|
+
import * as React17 from "react";
|
|
3659
3734
|
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
3660
3735
|
import { cva as cva7 } from "class-variance-authority";
|
|
3661
3736
|
import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
@@ -3697,9 +3772,9 @@ var switchThumbVariants = cva7(
|
|
|
3697
3772
|
}
|
|
3698
3773
|
}
|
|
3699
3774
|
);
|
|
3700
|
-
var Switch =
|
|
3775
|
+
var Switch = React17.forwardRef(
|
|
3701
3776
|
({ className, size, readOnly, loading, onChange, value, id, label, error, ...props }, ref) => {
|
|
3702
|
-
const generatedId =
|
|
3777
|
+
const generatedId = React17.useId();
|
|
3703
3778
|
const fieldId = id || generatedId;
|
|
3704
3779
|
const switchElement = /* @__PURE__ */ jsx48(
|
|
3705
3780
|
SwitchPrimitives.Root,
|
|
@@ -4105,7 +4180,7 @@ function FeatureCard({
|
|
|
4105
4180
|
// src/file-input-button/FileInputButton.tsx
|
|
4106
4181
|
import {
|
|
4107
4182
|
forwardRef as forwardRef22,
|
|
4108
|
-
useCallback as
|
|
4183
|
+
useCallback as useCallback11
|
|
4109
4184
|
} from "react";
|
|
4110
4185
|
import { Upload } from "lucide-react";
|
|
4111
4186
|
import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
@@ -4121,7 +4196,7 @@ var FileInputButton = forwardRef22(
|
|
|
4121
4196
|
size = "default",
|
|
4122
4197
|
...props
|
|
4123
4198
|
}, ref) => {
|
|
4124
|
-
const handleChange =
|
|
4199
|
+
const handleChange = useCallback11(
|
|
4125
4200
|
(event) => {
|
|
4126
4201
|
onChange?.(event);
|
|
4127
4202
|
event.target.value = "";
|
|
@@ -4363,7 +4438,7 @@ var FreeTextField = forwardRef23(
|
|
|
4363
4438
|
FreeTextField.displayName = "FreeTextField";
|
|
4364
4439
|
|
|
4365
4440
|
// src/framed-icon/FramedIcon.tsx
|
|
4366
|
-
import * as
|
|
4441
|
+
import * as React18 from "react";
|
|
4367
4442
|
import { cva as cva8 } from "class-variance-authority";
|
|
4368
4443
|
import { jsx as jsx57 } from "react/jsx-runtime";
|
|
4369
4444
|
var framedIconVariants = cva8("inline-flex items-center justify-center shrink-0", {
|
|
@@ -4387,7 +4462,7 @@ var framedIconVariants = cva8("inline-flex items-center justify-center shrink-0"
|
|
|
4387
4462
|
},
|
|
4388
4463
|
defaultVariants: { size: "m", shape: "rounded", tone: "info" }
|
|
4389
4464
|
});
|
|
4390
|
-
var FramedIcon =
|
|
4465
|
+
var FramedIcon = React18.forwardRef(
|
|
4391
4466
|
({ className, size, shape, tone, children, ...props }, ref) => /* @__PURE__ */ jsx57(
|
|
4392
4467
|
"span",
|
|
4393
4468
|
{
|
|
@@ -4549,7 +4624,7 @@ var IconRegistry = class {
|
|
|
4549
4624
|
var RegistryIcon = Icon;
|
|
4550
4625
|
|
|
4551
4626
|
// src/icon-button/IconButton.tsx
|
|
4552
|
-
import * as
|
|
4627
|
+
import * as React19 from "react";
|
|
4553
4628
|
import { cva as cva9 } from "class-variance-authority";
|
|
4554
4629
|
import { jsx as jsx61 } from "react/jsx-runtime";
|
|
4555
4630
|
var iconButtonVariants = cva9(
|
|
@@ -4580,7 +4655,7 @@ var iconButtonVariants = cva9(
|
|
|
4580
4655
|
defaultVariants: { size: "m", shape: "rounded", variant: "secondary" }
|
|
4581
4656
|
}
|
|
4582
4657
|
);
|
|
4583
|
-
var IconButton =
|
|
4658
|
+
var IconButton = React19.forwardRef(
|
|
4584
4659
|
({ className, size, shape, variant, label, children, type = "button", ...props }, ref) => /* @__PURE__ */ jsx61(
|
|
4585
4660
|
"button",
|
|
4586
4661
|
{
|
|
@@ -4635,9 +4710,9 @@ function Image2({
|
|
|
4635
4710
|
}
|
|
4636
4711
|
|
|
4637
4712
|
// src/input/Input.tsx
|
|
4638
|
-
import * as
|
|
4713
|
+
import * as React20 from "react";
|
|
4639
4714
|
import { jsx as jsx64 } from "react/jsx-runtime";
|
|
4640
|
-
var Input =
|
|
4715
|
+
var Input = React20.forwardRef(
|
|
4641
4716
|
({ className, type, readOnly, ...props }, ref) => /* @__PURE__ */ jsx64(
|
|
4642
4717
|
"input",
|
|
4643
4718
|
{
|
|
@@ -4661,7 +4736,7 @@ var Input = React19.forwardRef(
|
|
|
4661
4736
|
Input.displayName = "Input";
|
|
4662
4737
|
|
|
4663
4738
|
// src/input-otp/InputOTP.tsx
|
|
4664
|
-
import * as
|
|
4739
|
+
import * as React21 from "react";
|
|
4665
4740
|
|
|
4666
4741
|
// src/input-otp/InputOTPContext.ts
|
|
4667
4742
|
import { createContext, useContext } from "react";
|
|
@@ -4679,7 +4754,7 @@ function extractDigits(str) {
|
|
|
4679
4754
|
}
|
|
4680
4755
|
|
|
4681
4756
|
// src/input-otp/useInputOTP.ts
|
|
4682
|
-
import { useCallback as
|
|
4757
|
+
import { useCallback as useCallback12, useEffect as useEffect19, useMemo as useMemo3, useRef as useRef13, useState as useState16 } from "react";
|
|
4683
4758
|
function useInputOTP({
|
|
4684
4759
|
maxLength,
|
|
4685
4760
|
value,
|
|
@@ -4704,7 +4779,7 @@ function useInputOTP({
|
|
|
4704
4779
|
return nextSlots;
|
|
4705
4780
|
}, [value, maxLength]);
|
|
4706
4781
|
slotsRef.current = slots;
|
|
4707
|
-
const emitValue =
|
|
4782
|
+
const emitValue = useCallback12(
|
|
4708
4783
|
(newSlots) => {
|
|
4709
4784
|
let lastFilledIndex = -1;
|
|
4710
4785
|
for (let index = newSlots.length - 1; index >= 0; index -= 1) {
|
|
@@ -4730,7 +4805,7 @@ function useInputOTP({
|
|
|
4730
4805
|
inputRefs.current[0].focus();
|
|
4731
4806
|
}
|
|
4732
4807
|
}, [autoFocus]);
|
|
4733
|
-
const handleContainerFocusIn =
|
|
4808
|
+
const handleContainerFocusIn = useCallback12((event) => {
|
|
4734
4809
|
clearTimeout(blurTimeoutRef.current);
|
|
4735
4810
|
const target = event.target;
|
|
4736
4811
|
const slotIndex = inputRefs.current.indexOf(target);
|
|
@@ -4738,7 +4813,7 @@ function useInputOTP({
|
|
|
4738
4813
|
setActiveIndex(slotIndex);
|
|
4739
4814
|
}
|
|
4740
4815
|
}, []);
|
|
4741
|
-
const handleContainerFocusOut =
|
|
4816
|
+
const handleContainerFocusOut = useCallback12(() => {
|
|
4742
4817
|
clearTimeout(blurTimeoutRef.current);
|
|
4743
4818
|
blurTimeoutRef.current = setTimeout(() => {
|
|
4744
4819
|
if (!containerRef.current?.contains(document.activeElement)) {
|
|
@@ -4747,7 +4822,7 @@ function useInputOTP({
|
|
|
4747
4822
|
}, 0);
|
|
4748
4823
|
}, []);
|
|
4749
4824
|
useEffect19(() => () => clearTimeout(blurTimeoutRef.current), []);
|
|
4750
|
-
const handleDigitInput =
|
|
4825
|
+
const handleDigitInput = useCallback12(
|
|
4751
4826
|
(index, digit) => {
|
|
4752
4827
|
if (!DIGIT_REGEX.test(digit)) return;
|
|
4753
4828
|
const newSlots = [...slotsRef.current];
|
|
@@ -4761,7 +4836,7 @@ function useInputOTP({
|
|
|
4761
4836
|
},
|
|
4762
4837
|
[maxLength, emitValue]
|
|
4763
4838
|
);
|
|
4764
|
-
const handleDelete =
|
|
4839
|
+
const handleDelete = useCallback12(
|
|
4765
4840
|
(index) => {
|
|
4766
4841
|
const newSlots = [...slotsRef.current];
|
|
4767
4842
|
if (newSlots[index]) {
|
|
@@ -4776,7 +4851,7 @@ function useInputOTP({
|
|
|
4776
4851
|
},
|
|
4777
4852
|
[emitValue]
|
|
4778
4853
|
);
|
|
4779
|
-
const handlePaste =
|
|
4854
|
+
const handlePaste = useCallback12(
|
|
4780
4855
|
(text) => {
|
|
4781
4856
|
const digits = extractDigits(text).slice(0, maxLength);
|
|
4782
4857
|
if (digits.length > 0) {
|
|
@@ -4826,7 +4901,7 @@ function useInputOTP({
|
|
|
4826
4901
|
|
|
4827
4902
|
// src/input-otp/useInputOTPSlot.ts
|
|
4828
4903
|
import {
|
|
4829
|
-
useCallback as
|
|
4904
|
+
useCallback as useCallback13
|
|
4830
4905
|
} from "react";
|
|
4831
4906
|
function useInputOTPSlot(index) {
|
|
4832
4907
|
const {
|
|
@@ -4897,13 +4972,13 @@ function useInputOTPSlot(index) {
|
|
|
4897
4972
|
event.preventDefault();
|
|
4898
4973
|
handlePaste(event.clipboardData.getData("text/plain"));
|
|
4899
4974
|
};
|
|
4900
|
-
const setInputRef =
|
|
4975
|
+
const setInputRef = useCallback13(
|
|
4901
4976
|
(element) => {
|
|
4902
4977
|
inputRefs.current[index] = element;
|
|
4903
4978
|
},
|
|
4904
4979
|
[index, inputRefs]
|
|
4905
4980
|
);
|
|
4906
|
-
const focusSlot =
|
|
4981
|
+
const focusSlot = useCallback13(() => {
|
|
4907
4982
|
inputRefs.current[index]?.focus();
|
|
4908
4983
|
}, [index, inputRefs]);
|
|
4909
4984
|
return {
|
|
@@ -4946,11 +5021,11 @@ function InputOTP({
|
|
|
4946
5021
|
}
|
|
4947
5022
|
) });
|
|
4948
5023
|
}
|
|
4949
|
-
var InputOTPGroup =
|
|
5024
|
+
var InputOTPGroup = React21.forwardRef(
|
|
4950
5025
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx65("div", { ref, className: cn("flex items-center", className), ...props })
|
|
4951
5026
|
);
|
|
4952
5027
|
InputOTPGroup.displayName = "InputOTPGroup";
|
|
4953
|
-
var InputOTPSlot =
|
|
5028
|
+
var InputOTPSlot = React21.forwardRef(
|
|
4954
5029
|
({ index, className, ...props }, ref) => {
|
|
4955
5030
|
const {
|
|
4956
5031
|
char,
|
|
@@ -4999,7 +5074,7 @@ var InputOTPSlot = React20.forwardRef(
|
|
|
4999
5074
|
}
|
|
5000
5075
|
);
|
|
5001
5076
|
InputOTPSlot.displayName = "InputOTPSlot";
|
|
5002
|
-
var InputOTPSeparator =
|
|
5077
|
+
var InputOTPSeparator = React21.forwardRef(
|
|
5003
5078
|
(props, ref) => /* @__PURE__ */ jsx65("div", { ref, role: "separator", ...props })
|
|
5004
5079
|
);
|
|
5005
5080
|
InputOTPSeparator.displayName = "InputOTPSeparator";
|
|
@@ -5954,7 +6029,7 @@ Modal.displayName = "Modal";
|
|
|
5954
6029
|
import { memo as memo4 } from "react";
|
|
5955
6030
|
|
|
5956
6031
|
// src/circular-loader/CircularLoader.tsx
|
|
5957
|
-
import
|
|
6032
|
+
import React22 from "react";
|
|
5958
6033
|
import { jsx as jsx74, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
5959
6034
|
var loaderSizePixels = {
|
|
5960
6035
|
sm: 16,
|
|
@@ -5966,7 +6041,7 @@ var labelSizeClassName = {
|
|
|
5966
6041
|
md: "text-sm",
|
|
5967
6042
|
lg: "text-base"
|
|
5968
6043
|
};
|
|
5969
|
-
var CircularLoader =
|
|
6044
|
+
var CircularLoader = React22.memo(
|
|
5970
6045
|
({
|
|
5971
6046
|
visible = true,
|
|
5972
6047
|
size = "md",
|
|
@@ -6117,7 +6192,7 @@ import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight4, ChevronsLef
|
|
|
6117
6192
|
import { forwardRef as forwardRef33, useId as useId5, useState as useState19 } from "react";
|
|
6118
6193
|
|
|
6119
6194
|
// src/select/components.tsx
|
|
6120
|
-
import * as
|
|
6195
|
+
import * as React23 from "react";
|
|
6121
6196
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
6122
6197
|
import { CheckIcon as CheckIcon2, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
|
6123
6198
|
import { jsx as jsx77, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
@@ -6129,7 +6204,7 @@ var selectSizeClassNames = {
|
|
|
6129
6204
|
sm: "text-sm",
|
|
6130
6205
|
md: "text-base"
|
|
6131
6206
|
};
|
|
6132
|
-
var SelectTrigger =
|
|
6207
|
+
var SelectTrigger = React23.forwardRef(({ className, children, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxs49(
|
|
6133
6208
|
SelectPrimitive.Trigger,
|
|
6134
6209
|
{
|
|
6135
6210
|
ref,
|
|
@@ -6156,7 +6231,7 @@ var SelectTrigger = React22.forwardRef(({ className, children, size = "sm", ...p
|
|
|
6156
6231
|
}
|
|
6157
6232
|
));
|
|
6158
6233
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
6159
|
-
var SelectScrollUpButton =
|
|
6234
|
+
var SelectScrollUpButton = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx77(
|
|
6160
6235
|
SelectPrimitive.ScrollUpButton,
|
|
6161
6236
|
{
|
|
6162
6237
|
ref,
|
|
@@ -6166,7 +6241,7 @@ var SelectScrollUpButton = React22.forwardRef(({ className, ...props }, ref) =>
|
|
|
6166
6241
|
}
|
|
6167
6242
|
));
|
|
6168
6243
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
6169
|
-
var SelectScrollDownButton =
|
|
6244
|
+
var SelectScrollDownButton = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx77(
|
|
6170
6245
|
SelectPrimitive.ScrollDownButton,
|
|
6171
6246
|
{
|
|
6172
6247
|
ref,
|
|
@@ -6176,7 +6251,7 @@ var SelectScrollDownButton = React22.forwardRef(({ className, ...props }, ref) =
|
|
|
6176
6251
|
}
|
|
6177
6252
|
));
|
|
6178
6253
|
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
6179
|
-
var SelectContent =
|
|
6254
|
+
var SelectContent = React23.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx77(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs49(
|
|
6180
6255
|
SelectPrimitive.Content,
|
|
6181
6256
|
{
|
|
6182
6257
|
ref,
|
|
@@ -6210,7 +6285,7 @@ var SelectContent = React22.forwardRef(({ className, children, position = "poppe
|
|
|
6210
6285
|
}
|
|
6211
6286
|
) }));
|
|
6212
6287
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
6213
|
-
var SelectLabel =
|
|
6288
|
+
var SelectLabel = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx77(
|
|
6214
6289
|
SelectPrimitive.Label,
|
|
6215
6290
|
{
|
|
6216
6291
|
ref,
|
|
@@ -6222,7 +6297,7 @@ var SelectLabel = React22.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
6222
6297
|
}
|
|
6223
6298
|
));
|
|
6224
6299
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
6225
|
-
var SelectItem =
|
|
6300
|
+
var SelectItem = React23.forwardRef(({ className, children, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxs49(
|
|
6226
6301
|
SelectPrimitive.Item,
|
|
6227
6302
|
{
|
|
6228
6303
|
ref,
|
|
@@ -6242,7 +6317,7 @@ var SelectItem = React22.forwardRef(({ className, children, size = "sm", ...prop
|
|
|
6242
6317
|
}
|
|
6243
6318
|
));
|
|
6244
6319
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
6245
|
-
var SelectSeparator =
|
|
6320
|
+
var SelectSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx77(
|
|
6246
6321
|
SelectPrimitive.Separator,
|
|
6247
6322
|
{
|
|
6248
6323
|
ref,
|
|
@@ -6405,7 +6480,7 @@ var MultiSelect = forwardRef34(MultiSelectInner);
|
|
|
6405
6480
|
|
|
6406
6481
|
// src/select/InfinitySelect.tsx
|
|
6407
6482
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
6408
|
-
import { useCallback as
|
|
6483
|
+
import { useCallback as useCallback14, useEffect as useEffect20, useId as useId7, useRef as useRef15, useState as useState21 } from "react";
|
|
6409
6484
|
import { jsx as jsx80, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
6410
6485
|
function InfinitySelect({
|
|
6411
6486
|
label,
|
|
@@ -6429,7 +6504,7 @@ function InfinitySelect({
|
|
|
6429
6504
|
estimateSize: () => itemHeight,
|
|
6430
6505
|
overscan: 5
|
|
6431
6506
|
});
|
|
6432
|
-
const loadMore =
|
|
6507
|
+
const loadMore = useCallback14(() => {
|
|
6433
6508
|
if (hasNextPage && !isFetchingNextPage) {
|
|
6434
6509
|
fetchNextPage();
|
|
6435
6510
|
}
|
|
@@ -6652,7 +6727,7 @@ function Pagination({
|
|
|
6652
6727
|
}
|
|
6653
6728
|
|
|
6654
6729
|
// src/popover/Popover.tsx
|
|
6655
|
-
import * as
|
|
6730
|
+
import * as React24 from "react";
|
|
6656
6731
|
import * as RadixPopover from "@radix-ui/react-popover";
|
|
6657
6732
|
import { jsx as jsx82 } from "react/jsx-runtime";
|
|
6658
6733
|
var Popover = RadixPopover.Root;
|
|
@@ -6660,7 +6735,7 @@ var PopoverTrigger = RadixPopover.Trigger;
|
|
|
6660
6735
|
var PopoverAnchor = RadixPopover.Anchor;
|
|
6661
6736
|
var PopoverPortal = RadixPopover.Portal;
|
|
6662
6737
|
var PopoverClose = RadixPopover.Close;
|
|
6663
|
-
var PopoverContent =
|
|
6738
|
+
var PopoverContent = React24.forwardRef(({ className, sideOffset = 4, align = "center", ...props }, ref) => /* @__PURE__ */ jsx82(RadixPopover.Portal, { children: /* @__PURE__ */ jsx82(
|
|
6664
6739
|
RadixPopover.Content,
|
|
6665
6740
|
{
|
|
6666
6741
|
ref,
|
|
@@ -6750,11 +6825,11 @@ function PopoverWithTooltip({
|
|
|
6750
6825
|
import { forwardRef as forwardRef37 } from "react";
|
|
6751
6826
|
|
|
6752
6827
|
// src/radio-group/RadioGroup.tsx
|
|
6753
|
-
import * as
|
|
6828
|
+
import * as React25 from "react";
|
|
6754
6829
|
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
6755
6830
|
import { Circle as Circle2 } from "lucide-react";
|
|
6756
6831
|
import { jsx as jsx84 } from "react/jsx-runtime";
|
|
6757
|
-
var RadioGroup2 =
|
|
6832
|
+
var RadioGroup2 = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx84(
|
|
6758
6833
|
RadioGroupPrimitive.Root,
|
|
6759
6834
|
{
|
|
6760
6835
|
ref,
|
|
@@ -6763,7 +6838,7 @@ var RadioGroup2 = React24.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
6763
6838
|
}
|
|
6764
6839
|
));
|
|
6765
6840
|
RadioGroup2.displayName = RadioGroupPrimitive.Root.displayName;
|
|
6766
|
-
var RadioGroupItem =
|
|
6841
|
+
var RadioGroupItem = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx84(
|
|
6767
6842
|
RadioGroupPrimitive.Item,
|
|
6768
6843
|
{
|
|
6769
6844
|
ref,
|
|
@@ -6780,11 +6855,11 @@ var RadioGroupItem = React24.forwardRef(({ className, ...props }, ref) => /* @__
|
|
|
6780
6855
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
6781
6856
|
|
|
6782
6857
|
// src/radio/useRadioOptions.ts
|
|
6783
|
-
import { useCallback as
|
|
6858
|
+
import { useCallback as useCallback15, useState as useState22 } from "react";
|
|
6784
6859
|
function useRadioOptions({ options, defaultValue, onChange }) {
|
|
6785
6860
|
const initialValue = (typeof defaultValue === "string" ? options.find((option) => option.value === defaultValue) : defaultValue) || "";
|
|
6786
6861
|
const [selectedValue, setSelectedValue] = useState22(initialValue);
|
|
6787
|
-
const handleValueChange =
|
|
6862
|
+
const handleValueChange = useCallback15(
|
|
6788
6863
|
(value) => {
|
|
6789
6864
|
setSelectedValue(value);
|
|
6790
6865
|
const selectedOption = options.find((option) => option.value === value) || "";
|
|
@@ -6984,7 +7059,7 @@ function RatingRadioGroup({
|
|
|
6984
7059
|
}
|
|
6985
7060
|
|
|
6986
7061
|
// src/rating-stars/RatingStars.tsx
|
|
6987
|
-
import * as
|
|
7062
|
+
import * as React26 from "react";
|
|
6988
7063
|
import { Star as Star2 } from "lucide-react";
|
|
6989
7064
|
import { useTranslation as useTranslation17 } from "react-i18next";
|
|
6990
7065
|
import { jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
@@ -7004,7 +7079,7 @@ function RatingStars({
|
|
|
7004
7079
|
const { t } = useTranslation17();
|
|
7005
7080
|
const normalizedRating = Math.max(0, Math.min(maxRating, rating));
|
|
7006
7081
|
const stars = Array.from({ length: maxRating }, (_, index) => index + 1);
|
|
7007
|
-
const componentId =
|
|
7082
|
+
const componentId = React26.useId();
|
|
7008
7083
|
const decimal = normalizedRating - Math.floor(normalizedRating);
|
|
7009
7084
|
const partialStarIndex = decimal > 0 ? Math.ceil(normalizedRating) : -1;
|
|
7010
7085
|
const gradientId = `star-gradient-${componentId.replace(/:/g, "")}`;
|
|
@@ -7604,7 +7679,7 @@ function SheetDescription({
|
|
|
7604
7679
|
}
|
|
7605
7680
|
|
|
7606
7681
|
// src/sidebar/Sidebar.tsx
|
|
7607
|
-
import * as
|
|
7682
|
+
import * as React27 from "react";
|
|
7608
7683
|
import { Slot as Slot4 } from "@radix-ui/react-slot";
|
|
7609
7684
|
import { cva as cva11 } from "class-variance-authority";
|
|
7610
7685
|
import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon } from "lucide-react";
|
|
@@ -7697,7 +7772,7 @@ var SIDEBAR_COOKIE_NAME_DEFAULT = "sidebar_state";
|
|
|
7697
7772
|
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
7698
7773
|
var SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
7699
7774
|
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
7700
|
-
var SidebarProvider =
|
|
7775
|
+
var SidebarProvider = React27.forwardRef(
|
|
7701
7776
|
({
|
|
7702
7777
|
defaultOpen = true,
|
|
7703
7778
|
open: openProp,
|
|
@@ -7709,10 +7784,10 @@ var SidebarProvider = React26.forwardRef(
|
|
|
7709
7784
|
...props
|
|
7710
7785
|
}, ref) => {
|
|
7711
7786
|
const isMobile = useIsMobile({ breakpoint: 641 });
|
|
7712
|
-
const [openMobile, setOpenMobile] =
|
|
7713
|
-
const [_open, _setOpen] =
|
|
7787
|
+
const [openMobile, setOpenMobile] = React27.useState(false);
|
|
7788
|
+
const [_open, _setOpen] = React27.useState(defaultOpen);
|
|
7714
7789
|
const open = openProp ?? _open;
|
|
7715
|
-
const setOpen =
|
|
7790
|
+
const setOpen = React27.useCallback(
|
|
7716
7791
|
(value) => {
|
|
7717
7792
|
const openState = typeof value === "function" ? value(open) : value;
|
|
7718
7793
|
if (setOpenProp) {
|
|
@@ -7724,10 +7799,10 @@ var SidebarProvider = React26.forwardRef(
|
|
|
7724
7799
|
},
|
|
7725
7800
|
[setOpenProp, open, stateName]
|
|
7726
7801
|
);
|
|
7727
|
-
const toggleSidebar =
|
|
7802
|
+
const toggleSidebar = React27.useCallback(() => {
|
|
7728
7803
|
return isMobile ? setOpenMobile((value) => !value) : setOpen((value) => !value);
|
|
7729
7804
|
}, [isMobile, setOpen]);
|
|
7730
|
-
|
|
7805
|
+
React27.useEffect(() => {
|
|
7731
7806
|
const handleKeyDown = (event) => {
|
|
7732
7807
|
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
7733
7808
|
event.preventDefault();
|
|
@@ -7738,7 +7813,7 @@ var SidebarProvider = React26.forwardRef(
|
|
|
7738
7813
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
7739
7814
|
}, [toggleSidebar]);
|
|
7740
7815
|
const state = open ? "expanded" : "collapsed";
|
|
7741
|
-
const contextValue =
|
|
7816
|
+
const contextValue = React27.useMemo(
|
|
7742
7817
|
() => ({
|
|
7743
7818
|
state,
|
|
7744
7819
|
open,
|
|
@@ -7763,7 +7838,7 @@ var SidebarProvider = React26.forwardRef(
|
|
|
7763
7838
|
}
|
|
7764
7839
|
);
|
|
7765
7840
|
SidebarProvider.displayName = "SidebarProvider";
|
|
7766
|
-
var Sidebar =
|
|
7841
|
+
var Sidebar = React27.forwardRef(
|
|
7767
7842
|
({
|
|
7768
7843
|
side = "left",
|
|
7769
7844
|
variant = "sidebar",
|
|
@@ -7857,7 +7932,7 @@ var Sidebar = React26.forwardRef(
|
|
|
7857
7932
|
}
|
|
7858
7933
|
);
|
|
7859
7934
|
Sidebar.displayName = "Sidebar";
|
|
7860
|
-
var SidebarTrigger =
|
|
7935
|
+
var SidebarTrigger = React27.forwardRef(({ className, onClick, icon, ...props }, ref) => {
|
|
7861
7936
|
const { toggleSidebar, open, isMobile, openMobile } = useSidebar();
|
|
7862
7937
|
return /* @__PURE__ */ jsxs65(
|
|
7863
7938
|
Button,
|
|
@@ -7884,7 +7959,7 @@ var SidebarTrigger = React26.forwardRef(({ className, onClick, icon, ...props },
|
|
|
7884
7959
|
);
|
|
7885
7960
|
});
|
|
7886
7961
|
SidebarTrigger.displayName = "SidebarTrigger";
|
|
7887
|
-
var SidebarRail =
|
|
7962
|
+
var SidebarRail = React27.forwardRef(
|
|
7888
7963
|
({ className, ...props }, ref) => {
|
|
7889
7964
|
const { toggleSidebar } = useSidebar();
|
|
7890
7965
|
return /* @__PURE__ */ jsx101(
|
|
@@ -7910,7 +7985,7 @@ var SidebarRail = React26.forwardRef(
|
|
|
7910
7985
|
}
|
|
7911
7986
|
);
|
|
7912
7987
|
SidebarRail.displayName = "SidebarRail";
|
|
7913
|
-
var SidebarInset =
|
|
7988
|
+
var SidebarInset = React27.forwardRef(
|
|
7914
7989
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx101(
|
|
7915
7990
|
"main",
|
|
7916
7991
|
{
|
|
@@ -7925,7 +8000,7 @@ var SidebarInset = React26.forwardRef(
|
|
|
7925
8000
|
)
|
|
7926
8001
|
);
|
|
7927
8002
|
SidebarInset.displayName = "SidebarInset";
|
|
7928
|
-
var SidebarInput =
|
|
8003
|
+
var SidebarInput = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx101(
|
|
7929
8004
|
Input,
|
|
7930
8005
|
{
|
|
7931
8006
|
ref,
|
|
@@ -7935,7 +8010,7 @@ var SidebarInput = React26.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
7935
8010
|
}
|
|
7936
8011
|
));
|
|
7937
8012
|
SidebarInput.displayName = "SidebarInput";
|
|
7938
|
-
var SidebarHeader =
|
|
8013
|
+
var SidebarHeader = React27.forwardRef(
|
|
7939
8014
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx101(
|
|
7940
8015
|
"div",
|
|
7941
8016
|
{
|
|
@@ -7947,7 +8022,7 @@ var SidebarHeader = React26.forwardRef(
|
|
|
7947
8022
|
)
|
|
7948
8023
|
);
|
|
7949
8024
|
SidebarHeader.displayName = "SidebarHeader";
|
|
7950
|
-
var SidebarFooter =
|
|
8025
|
+
var SidebarFooter = React27.forwardRef(
|
|
7951
8026
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx101(
|
|
7952
8027
|
"div",
|
|
7953
8028
|
{
|
|
@@ -7959,7 +8034,7 @@ var SidebarFooter = React26.forwardRef(
|
|
|
7959
8034
|
)
|
|
7960
8035
|
);
|
|
7961
8036
|
SidebarFooter.displayName = "SidebarFooter";
|
|
7962
|
-
var SidebarSeparator =
|
|
8037
|
+
var SidebarSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx101(
|
|
7963
8038
|
Separator3,
|
|
7964
8039
|
{
|
|
7965
8040
|
ref,
|
|
@@ -7969,7 +8044,7 @@ var SidebarSeparator = React26.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
7969
8044
|
}
|
|
7970
8045
|
));
|
|
7971
8046
|
SidebarSeparator.displayName = "SidebarSeparator";
|
|
7972
|
-
var SidebarContent =
|
|
8047
|
+
var SidebarContent = React27.forwardRef(
|
|
7973
8048
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx101(
|
|
7974
8049
|
"div",
|
|
7975
8050
|
{
|
|
@@ -7984,7 +8059,7 @@ var SidebarContent = React26.forwardRef(
|
|
|
7984
8059
|
)
|
|
7985
8060
|
);
|
|
7986
8061
|
SidebarContent.displayName = "SidebarContent";
|
|
7987
|
-
var SidebarGroup =
|
|
8062
|
+
var SidebarGroup = React27.forwardRef(
|
|
7988
8063
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx101(
|
|
7989
8064
|
"div",
|
|
7990
8065
|
{
|
|
@@ -7996,7 +8071,7 @@ var SidebarGroup = React26.forwardRef(
|
|
|
7996
8071
|
)
|
|
7997
8072
|
);
|
|
7998
8073
|
SidebarGroup.displayName = "SidebarGroup";
|
|
7999
|
-
var SidebarGroupLabel =
|
|
8074
|
+
var SidebarGroupLabel = React27.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
8000
8075
|
const Comp = asChild ? Slot4 : "div";
|
|
8001
8076
|
return /* @__PURE__ */ jsx101(
|
|
8002
8077
|
Comp,
|
|
@@ -8013,7 +8088,7 @@ var SidebarGroupLabel = React26.forwardRef(({ className, asChild = false, ...pro
|
|
|
8013
8088
|
);
|
|
8014
8089
|
});
|
|
8015
8090
|
SidebarGroupLabel.displayName = "SidebarGroupLabel";
|
|
8016
|
-
var SidebarGroupAction =
|
|
8091
|
+
var SidebarGroupAction = React27.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
8017
8092
|
const Comp = asChild ? Slot4 : "button";
|
|
8018
8093
|
return /* @__PURE__ */ jsx101(
|
|
8019
8094
|
Comp,
|
|
@@ -8029,7 +8104,7 @@ var SidebarGroupAction = React26.forwardRef(({ className, asChild = false, ...pr
|
|
|
8029
8104
|
);
|
|
8030
8105
|
});
|
|
8031
8106
|
SidebarGroupAction.displayName = "SidebarGroupAction";
|
|
8032
|
-
var SidebarGroupContent =
|
|
8107
|
+
var SidebarGroupContent = React27.forwardRef(
|
|
8033
8108
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx101(
|
|
8034
8109
|
"div",
|
|
8035
8110
|
{
|
|
@@ -8041,7 +8116,7 @@ var SidebarGroupContent = React26.forwardRef(
|
|
|
8041
8116
|
)
|
|
8042
8117
|
);
|
|
8043
8118
|
SidebarGroupContent.displayName = "SidebarGroupContent";
|
|
8044
|
-
var SidebarMenu =
|
|
8119
|
+
var SidebarMenu = React27.forwardRef(
|
|
8045
8120
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx101(
|
|
8046
8121
|
"ul",
|
|
8047
8122
|
{
|
|
@@ -8053,7 +8128,7 @@ var SidebarMenu = React26.forwardRef(
|
|
|
8053
8128
|
)
|
|
8054
8129
|
);
|
|
8055
8130
|
SidebarMenu.displayName = "SidebarMenu";
|
|
8056
|
-
var SidebarMenuItem =
|
|
8131
|
+
var SidebarMenuItem = React27.forwardRef(
|
|
8057
8132
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx101(
|
|
8058
8133
|
"li",
|
|
8059
8134
|
{
|
|
@@ -8085,7 +8160,7 @@ var sidebarMenuButtonVariants = cva11(
|
|
|
8085
8160
|
}
|
|
8086
8161
|
}
|
|
8087
8162
|
);
|
|
8088
|
-
var SidebarMenuButton =
|
|
8163
|
+
var SidebarMenuButton = React27.forwardRef(
|
|
8089
8164
|
({
|
|
8090
8165
|
asChild = false,
|
|
8091
8166
|
isActive = false,
|
|
@@ -8131,7 +8206,7 @@ var SidebarMenuButton = React26.forwardRef(
|
|
|
8131
8206
|
}
|
|
8132
8207
|
);
|
|
8133
8208
|
SidebarMenuButton.displayName = "SidebarMenuButton";
|
|
8134
|
-
var SidebarMenuAction =
|
|
8209
|
+
var SidebarMenuAction = React27.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
|
8135
8210
|
const Comp = asChild ? Slot4 : "button";
|
|
8136
8211
|
return /* @__PURE__ */ jsx101(
|
|
8137
8212
|
Comp,
|
|
@@ -8148,7 +8223,7 @@ var SidebarMenuAction = React26.forwardRef(({ className, asChild = false, showOn
|
|
|
8148
8223
|
);
|
|
8149
8224
|
});
|
|
8150
8225
|
SidebarMenuAction.displayName = "SidebarMenuAction";
|
|
8151
|
-
var SidebarMenuBadge =
|
|
8226
|
+
var SidebarMenuBadge = React27.forwardRef(
|
|
8152
8227
|
({ className, ...props }, ref) => {
|
|
8153
8228
|
const { open, isMobile, openMobile } = useSidebar();
|
|
8154
8229
|
const isOpen = isMobile ? openMobile : open;
|
|
@@ -8168,8 +8243,8 @@ var SidebarMenuBadge = React26.forwardRef(
|
|
|
8168
8243
|
}
|
|
8169
8244
|
);
|
|
8170
8245
|
SidebarMenuBadge.displayName = "SidebarMenuBadge";
|
|
8171
|
-
var SidebarMenuSkeleton =
|
|
8172
|
-
const width =
|
|
8246
|
+
var SidebarMenuSkeleton = React27.forwardRef(({ className, showIcon = false, ...props }, ref) => {
|
|
8247
|
+
const width = React27.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
|
|
8173
8248
|
return /* @__PURE__ */ jsxs65(
|
|
8174
8249
|
"div",
|
|
8175
8250
|
{
|
|
@@ -8192,7 +8267,7 @@ var SidebarMenuSkeleton = React26.forwardRef(({ className, showIcon = false, ...
|
|
|
8192
8267
|
);
|
|
8193
8268
|
});
|
|
8194
8269
|
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
|
|
8195
|
-
var SidebarMenuSub =
|
|
8270
|
+
var SidebarMenuSub = React27.forwardRef(
|
|
8196
8271
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx101(
|
|
8197
8272
|
"ul",
|
|
8198
8273
|
{
|
|
@@ -8207,7 +8282,7 @@ var SidebarMenuSub = React26.forwardRef(
|
|
|
8207
8282
|
)
|
|
8208
8283
|
);
|
|
8209
8284
|
SidebarMenuSub.displayName = "SidebarMenuSub";
|
|
8210
|
-
var SidebarMenuSubItem =
|
|
8285
|
+
var SidebarMenuSubItem = React27.forwardRef(
|
|
8211
8286
|
({ ...props }, ref) => /* @__PURE__ */ jsx101("li", { ref, ...props })
|
|
8212
8287
|
);
|
|
8213
8288
|
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
|
|
@@ -8231,7 +8306,7 @@ var sidebarMenuSubButtonVariants = cva11(
|
|
|
8231
8306
|
}
|
|
8232
8307
|
}
|
|
8233
8308
|
);
|
|
8234
|
-
var SidebarMenuSubButton =
|
|
8309
|
+
var SidebarMenuSubButton = React27.forwardRef(
|
|
8235
8310
|
({
|
|
8236
8311
|
asChild = false,
|
|
8237
8312
|
isActive,
|
|
@@ -8550,9 +8625,9 @@ SwitchBlocksInternal.displayName = "SwitchBlocks";
|
|
|
8550
8625
|
var SwitchBlocks = memo6(SwitchBlocksInternal);
|
|
8551
8626
|
|
|
8552
8627
|
// src/switch-group/SwitchGroup.tsx
|
|
8553
|
-
import * as
|
|
8628
|
+
import * as React28 from "react";
|
|
8554
8629
|
import { jsx as jsx108, jsxs as jsxs70 } from "react/jsx-runtime";
|
|
8555
|
-
var SwitchGroup =
|
|
8630
|
+
var SwitchGroup = React28.forwardRef(
|
|
8556
8631
|
({ options, value = [], onChange, disabled = false, className, error, ...props }, ref) => {
|
|
8557
8632
|
const handleOptionChange = (optionValue, checked) => {
|
|
8558
8633
|
if (!onChange) return;
|
|
@@ -8806,11 +8881,11 @@ var TASK_VARIANTS = {
|
|
|
8806
8881
|
import { Toaster, toast as toast2 } from "sonner";
|
|
8807
8882
|
|
|
8808
8883
|
// src/toaster/useUpdateToast.ts
|
|
8809
|
-
import { useCallback as
|
|
8884
|
+
import { useCallback as useCallback17, useRef as useRef16 } from "react";
|
|
8810
8885
|
import { toast } from "sonner";
|
|
8811
8886
|
function useUpdateToast({ id }) {
|
|
8812
8887
|
const toastIdRef = useRef16("");
|
|
8813
|
-
const getToastOptions =
|
|
8888
|
+
const getToastOptions = useCallback17(
|
|
8814
8889
|
(options) => ({
|
|
8815
8890
|
id: toastIdRef.current,
|
|
8816
8891
|
dismissible: false,
|
|
@@ -8842,7 +8917,7 @@ function useUpdateToast({ id }) {
|
|
|
8842
8917
|
}
|
|
8843
8918
|
|
|
8844
8919
|
// src/toggle-group/ToggleGroup.tsx
|
|
8845
|
-
import * as
|
|
8920
|
+
import * as React29 from "react";
|
|
8846
8921
|
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
8847
8922
|
|
|
8848
8923
|
// src/toggle-group/style.ts
|
|
@@ -8876,12 +8951,12 @@ var toggleVariants = cva13(
|
|
|
8876
8951
|
|
|
8877
8952
|
// src/toggle-group/ToggleGroup.tsx
|
|
8878
8953
|
import { jsx as jsx113, jsxs as jsxs74 } from "react/jsx-runtime";
|
|
8879
|
-
var ToggleGroupContext =
|
|
8954
|
+
var ToggleGroupContext = React29.createContext({
|
|
8880
8955
|
size: "default",
|
|
8881
8956
|
variant: "default",
|
|
8882
8957
|
theme: "default"
|
|
8883
8958
|
});
|
|
8884
|
-
var ToggleGroup =
|
|
8959
|
+
var ToggleGroup = React29.forwardRef(({ className, variant, size, theme, children, ...props }, ref) => {
|
|
8885
8960
|
const isTabVariant = variant === "tab";
|
|
8886
8961
|
return /* @__PURE__ */ jsx113(
|
|
8887
8962
|
ToggleGroupPrimitive.Root,
|
|
@@ -8898,8 +8973,8 @@ var ToggleGroup = React28.forwardRef(({ className, variant, size, theme, childre
|
|
|
8898
8973
|
);
|
|
8899
8974
|
});
|
|
8900
8975
|
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
|
8901
|
-
var ToggleGroupItem =
|
|
8902
|
-
const context =
|
|
8976
|
+
var ToggleGroupItem = React29.forwardRef(({ className, children, variant, size, theme, ...props }, ref) => {
|
|
8977
|
+
const context = React29.useContext(ToggleGroupContext);
|
|
8903
8978
|
const resolvedVariant = context.variant || variant;
|
|
8904
8979
|
const isTabVariant = resolvedVariant === "tab";
|
|
8905
8980
|
return /* @__PURE__ */ jsx113(
|
|
@@ -9052,7 +9127,7 @@ function TogglesInternal({
|
|
|
9052
9127
|
var Toggles = forwardRef45(TogglesInternal);
|
|
9053
9128
|
|
|
9054
9129
|
// src/text-field/TextField.tsx
|
|
9055
|
-
import * as
|
|
9130
|
+
import * as React30 from "react";
|
|
9056
9131
|
import * as LabelPrimitive2 from "@radix-ui/react-label";
|
|
9057
9132
|
import { cva as cva14 } from "class-variance-authority";
|
|
9058
9133
|
import { useTranslation as useTranslation22 } from "react-i18next";
|
|
@@ -9168,7 +9243,7 @@ var floatingLabelClasses = [
|
|
|
9168
9243
|
"peer-focus:to-[var(--text-field-bg-filled)]",
|
|
9169
9244
|
"peer-focus:to-50%"
|
|
9170
9245
|
];
|
|
9171
|
-
var TextField =
|
|
9246
|
+
var TextField = React30.forwardRef(
|
|
9172
9247
|
({
|
|
9173
9248
|
className,
|
|
9174
9249
|
wrapperClassName,
|
|
@@ -9187,7 +9262,7 @@ var TextField = React29.forwardRef(
|
|
|
9187
9262
|
}, ref) => {
|
|
9188
9263
|
const { t } = useTranslation22();
|
|
9189
9264
|
const hasError = Boolean(error);
|
|
9190
|
-
const autoId =
|
|
9265
|
+
const autoId = React30.useId();
|
|
9191
9266
|
const inputId = props.id || autoId;
|
|
9192
9267
|
const inputClasses = cn(
|
|
9193
9268
|
inputVariants({ variant, error: hasError, readOnly: Boolean(readOnly) }),
|
|
@@ -9448,11 +9523,11 @@ function WideButton({ className, disabled, ...props }) {
|
|
|
9448
9523
|
}
|
|
9449
9524
|
|
|
9450
9525
|
// src/datepicker/DatePicker.tsx
|
|
9451
|
-
import * as
|
|
9526
|
+
import * as React34 from "react";
|
|
9452
9527
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
9453
9528
|
|
|
9454
9529
|
// src/drawer/Drawer.tsx
|
|
9455
|
-
import * as
|
|
9530
|
+
import * as React31 from "react";
|
|
9456
9531
|
import * as DialogPrimitive2 from "@radix-ui/react-dialog";
|
|
9457
9532
|
import Draggable from "react-draggable";
|
|
9458
9533
|
import { jsx as jsx123, jsxs as jsxs80 } from "react/jsx-runtime";
|
|
@@ -9470,7 +9545,7 @@ function DrawerPortal({ ...props }) {
|
|
|
9470
9545
|
function DrawerClose({ ...props }) {
|
|
9471
9546
|
return /* @__PURE__ */ jsx123(DialogPrimitive2.Close, { "data-slot": "drawer-close", ...props });
|
|
9472
9547
|
}
|
|
9473
|
-
var DrawerOverlay =
|
|
9548
|
+
var DrawerOverlay = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx123(
|
|
9474
9549
|
DialogPrimitive2.Overlay,
|
|
9475
9550
|
{
|
|
9476
9551
|
ref,
|
|
@@ -9484,7 +9559,7 @@ var DrawerOverlay = React30.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
9484
9559
|
));
|
|
9485
9560
|
DrawerOverlay.displayName = DialogPrimitive2.Overlay.displayName;
|
|
9486
9561
|
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";
|
|
9487
|
-
var DrawerContent =
|
|
9562
|
+
var DrawerContent = React31.forwardRef(
|
|
9488
9563
|
({
|
|
9489
9564
|
className,
|
|
9490
9565
|
children,
|
|
@@ -9496,19 +9571,19 @@ var DrawerContent = React30.forwardRef(
|
|
|
9496
9571
|
...props
|
|
9497
9572
|
}, ref) => {
|
|
9498
9573
|
const finalContainer = container || getCustomContainer() || void 0;
|
|
9499
|
-
const nodeRef =
|
|
9500
|
-
const [dragOffsetY, setDragOffsetY] =
|
|
9574
|
+
const nodeRef = React31.useRef(null);
|
|
9575
|
+
const [dragOffsetY, setDragOffsetY] = React31.useState(0);
|
|
9501
9576
|
const overlayOpacity = Math.max(
|
|
9502
9577
|
DRAWER_MIN_OVERLAY_OPACITY,
|
|
9503
9578
|
1 - dragOffsetY / (DRAWER_CLOSE_THRESHOLD * 2)
|
|
9504
9579
|
);
|
|
9505
|
-
const handleDrag =
|
|
9580
|
+
const handleDrag = React31.useCallback(
|
|
9506
9581
|
(_event, data) => {
|
|
9507
9582
|
setDragOffsetY(Math.max(0, data.y));
|
|
9508
9583
|
},
|
|
9509
9584
|
[]
|
|
9510
9585
|
);
|
|
9511
|
-
const handleStop =
|
|
9586
|
+
const handleStop = React31.useCallback(
|
|
9512
9587
|
(_event, data) => {
|
|
9513
9588
|
if (data.y > DRAWER_CLOSE_THRESHOLD) {
|
|
9514
9589
|
setDragOffsetY(0);
|
|
@@ -9599,7 +9674,7 @@ var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx123(
|
|
|
9599
9674
|
DrawerHeader.displayName = "DrawerHeader";
|
|
9600
9675
|
var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx123("div", { className: cn("flex flex-col gap-2 p-5", className), ...props });
|
|
9601
9676
|
DrawerFooter.displayName = "DrawerFooter";
|
|
9602
|
-
var DrawerTitle =
|
|
9677
|
+
var DrawerTitle = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx123(
|
|
9603
9678
|
DialogPrimitive2.Title,
|
|
9604
9679
|
{
|
|
9605
9680
|
ref,
|
|
@@ -9609,7 +9684,7 @@ var DrawerTitle = React30.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
9609
9684
|
}
|
|
9610
9685
|
));
|
|
9611
9686
|
DrawerTitle.displayName = DialogPrimitive2.Title.displayName;
|
|
9612
|
-
var DrawerDescription =
|
|
9687
|
+
var DrawerDescription = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx123(
|
|
9613
9688
|
DialogPrimitive2.Description,
|
|
9614
9689
|
{
|
|
9615
9690
|
ref,
|
|
@@ -9621,7 +9696,7 @@ var DrawerDescription = React30.forwardRef(({ className, ...props }, ref) => /*
|
|
|
9621
9696
|
DrawerDescription.displayName = DialogPrimitive2.Description.displayName;
|
|
9622
9697
|
|
|
9623
9698
|
// src/datepicker/useDatePickerWheel.ts
|
|
9624
|
-
import * as
|
|
9699
|
+
import * as React32 from "react";
|
|
9625
9700
|
|
|
9626
9701
|
// src/datepicker/datePicker.utils.ts
|
|
9627
9702
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -9772,21 +9847,21 @@ function useDatePickerWheel({
|
|
|
9772
9847
|
minDate,
|
|
9773
9848
|
maxDate
|
|
9774
9849
|
}) {
|
|
9775
|
-
const years =
|
|
9776
|
-
const [draftDate, setDraftDate] =
|
|
9850
|
+
const years = React32.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
9851
|
+
const [draftDate, setDraftDate] = React32.useState(
|
|
9777
9852
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
9778
9853
|
);
|
|
9779
9854
|
const draftYear = draftDate.getFullYear();
|
|
9780
9855
|
const draftMonth = draftDate.getMonth();
|
|
9781
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
9782
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
9783
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
9784
|
-
const monthListRef =
|
|
9785
|
-
const dayListRef =
|
|
9786
|
-
const yearListRef =
|
|
9787
|
-
const settleTimeoutsRef =
|
|
9788
|
-
const animationFramesRef =
|
|
9789
|
-
const columnRefs =
|
|
9856
|
+
const [monthScrollTop, setMonthScrollTop] = React32.useState(0);
|
|
9857
|
+
const [dayScrollTop, setDayScrollTop] = React32.useState(0);
|
|
9858
|
+
const [yearScrollTop, setYearScrollTop] = React32.useState(0);
|
|
9859
|
+
const monthListRef = React32.useRef(null);
|
|
9860
|
+
const dayListRef = React32.useRef(null);
|
|
9861
|
+
const yearListRef = React32.useRef(null);
|
|
9862
|
+
const settleTimeoutsRef = React32.useRef({});
|
|
9863
|
+
const animationFramesRef = React32.useRef({});
|
|
9864
|
+
const columnRefs = React32.useMemo(
|
|
9790
9865
|
() => ({
|
|
9791
9866
|
month: monthListRef,
|
|
9792
9867
|
day: dayListRef,
|
|
@@ -9794,7 +9869,7 @@ function useDatePickerWheel({
|
|
|
9794
9869
|
}),
|
|
9795
9870
|
[]
|
|
9796
9871
|
);
|
|
9797
|
-
const setColumnScrollTop =
|
|
9872
|
+
const setColumnScrollTop = React32.useCallback(
|
|
9798
9873
|
(column, nextScrollTop) => {
|
|
9799
9874
|
if (column === "month") {
|
|
9800
9875
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -9808,19 +9883,19 @@ function useDatePickerWheel({
|
|
|
9808
9883
|
},
|
|
9809
9884
|
[]
|
|
9810
9885
|
);
|
|
9811
|
-
const clearSettleTimeout =
|
|
9886
|
+
const clearSettleTimeout = React32.useCallback((column) => {
|
|
9812
9887
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
9813
9888
|
if (timeoutId === void 0) return;
|
|
9814
9889
|
window.clearTimeout(timeoutId);
|
|
9815
9890
|
delete settleTimeoutsRef.current[column];
|
|
9816
9891
|
}, []);
|
|
9817
|
-
const clearAnimationFrame =
|
|
9892
|
+
const clearAnimationFrame = React32.useCallback((column) => {
|
|
9818
9893
|
const frameId = animationFramesRef.current[column];
|
|
9819
9894
|
if (frameId === void 0) return;
|
|
9820
9895
|
window.cancelAnimationFrame(frameId);
|
|
9821
9896
|
delete animationFramesRef.current[column];
|
|
9822
9897
|
}, []);
|
|
9823
|
-
|
|
9898
|
+
React32.useEffect(
|
|
9824
9899
|
() => () => {
|
|
9825
9900
|
["month", "day", "year"].forEach((column) => {
|
|
9826
9901
|
clearSettleTimeout(column);
|
|
@@ -9829,22 +9904,22 @@ function useDatePickerWheel({
|
|
|
9829
9904
|
},
|
|
9830
9905
|
[clearAnimationFrame, clearSettleTimeout]
|
|
9831
9906
|
);
|
|
9832
|
-
|
|
9907
|
+
React32.useEffect(() => {
|
|
9833
9908
|
if (isOpen) return;
|
|
9834
9909
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
9835
9910
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
9836
|
-
const months =
|
|
9911
|
+
const months = React32.useMemo(
|
|
9837
9912
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
9838
9913
|
[draftYear, maxDate, minDate]
|
|
9839
9914
|
);
|
|
9840
|
-
const days =
|
|
9915
|
+
const days = React32.useMemo(
|
|
9841
9916
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
9842
9917
|
[draftMonth, draftYear, maxDate, minDate]
|
|
9843
9918
|
);
|
|
9844
9919
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
9845
9920
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
9846
9921
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
9847
|
-
const syncScrollPositions =
|
|
9922
|
+
const syncScrollPositions = React32.useCallback(
|
|
9848
9923
|
(nextDate, behavior = "auto") => {
|
|
9849
9924
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
9850
9925
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -9868,7 +9943,7 @@ function useDatePickerWheel({
|
|
|
9868
9943
|
},
|
|
9869
9944
|
[maxDate, minDate, years]
|
|
9870
9945
|
);
|
|
9871
|
-
|
|
9946
|
+
React32.useLayoutEffect(() => {
|
|
9872
9947
|
if (!isOpen) return;
|
|
9873
9948
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
9874
9949
|
setDraftDate(nextDate);
|
|
@@ -9879,7 +9954,7 @@ function useDatePickerWheel({
|
|
|
9879
9954
|
window.cancelAnimationFrame(frameId);
|
|
9880
9955
|
};
|
|
9881
9956
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
9882
|
-
const updateDraftDate =
|
|
9957
|
+
const updateDraftDate = React32.useCallback(
|
|
9883
9958
|
(column, targetIndex, behavior = "smooth") => {
|
|
9884
9959
|
const currentDate = stripTime(draftDate);
|
|
9885
9960
|
const currentYear = currentDate.getFullYear();
|
|
@@ -9924,7 +9999,7 @@ function useDatePickerWheel({
|
|
|
9924
9999
|
},
|
|
9925
10000
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
9926
10001
|
);
|
|
9927
|
-
const settleColumnScroll =
|
|
10002
|
+
const settleColumnScroll = React32.useCallback(
|
|
9928
10003
|
(column) => {
|
|
9929
10004
|
const list = columnRefs[column].current;
|
|
9930
10005
|
if (!list) return;
|
|
@@ -9937,7 +10012,7 @@ function useDatePickerWheel({
|
|
|
9937
10012
|
},
|
|
9938
10013
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
9939
10014
|
);
|
|
9940
|
-
const scheduleScrollSettle =
|
|
10015
|
+
const scheduleScrollSettle = React32.useCallback(
|
|
9941
10016
|
(column) => {
|
|
9942
10017
|
clearSettleTimeout(column);
|
|
9943
10018
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -9946,7 +10021,7 @@ function useDatePickerWheel({
|
|
|
9946
10021
|
},
|
|
9947
10022
|
[clearSettleTimeout, settleColumnScroll]
|
|
9948
10023
|
);
|
|
9949
|
-
const handleColumnScroll =
|
|
10024
|
+
const handleColumnScroll = React32.useCallback(
|
|
9950
10025
|
(column) => {
|
|
9951
10026
|
const list = columnRefs[column].current;
|
|
9952
10027
|
if (!list) return;
|
|
@@ -9960,13 +10035,13 @@ function useDatePickerWheel({
|
|
|
9960
10035
|
},
|
|
9961
10036
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
9962
10037
|
);
|
|
9963
|
-
const handleOptionSelect =
|
|
10038
|
+
const handleOptionSelect = React32.useCallback(
|
|
9964
10039
|
(column, targetIndex) => {
|
|
9965
10040
|
updateDraftDate(column, targetIndex, "smooth");
|
|
9966
10041
|
},
|
|
9967
10042
|
[updateDraftDate]
|
|
9968
10043
|
);
|
|
9969
|
-
const focusAdjacentColumn =
|
|
10044
|
+
const focusAdjacentColumn = React32.useCallback(
|
|
9970
10045
|
(column, direction) => {
|
|
9971
10046
|
const order = ["month", "day", "year"];
|
|
9972
10047
|
const currentIndex = order.indexOf(column);
|
|
@@ -9976,7 +10051,7 @@ function useDatePickerWheel({
|
|
|
9976
10051
|
},
|
|
9977
10052
|
[columnRefs]
|
|
9978
10053
|
);
|
|
9979
|
-
const handleColumnKeyDown =
|
|
10054
|
+
const handleColumnKeyDown = React32.useCallback(
|
|
9980
10055
|
(column, event) => {
|
|
9981
10056
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
9982
10057
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -10280,7 +10355,7 @@ var DEVICE = {
|
|
|
10280
10355
|
};
|
|
10281
10356
|
|
|
10282
10357
|
// src/field-trigger/FieldTrigger.tsx
|
|
10283
|
-
import * as
|
|
10358
|
+
import * as React33 from "react";
|
|
10284
10359
|
import { Loader2 as Loader24 } from "lucide-react";
|
|
10285
10360
|
import { useTranslation as useTranslation23 } from "react-i18next";
|
|
10286
10361
|
|
|
@@ -10324,7 +10399,7 @@ function FieldErrorMessage({
|
|
|
10324
10399
|
|
|
10325
10400
|
// src/field-trigger/FieldTrigger.tsx
|
|
10326
10401
|
import { Fragment as Fragment12, jsx as jsx127, jsxs as jsxs84 } from "react/jsx-runtime";
|
|
10327
|
-
var FieldTrigger =
|
|
10402
|
+
var FieldTrigger = React33.forwardRef(
|
|
10328
10403
|
({
|
|
10329
10404
|
as = "button",
|
|
10330
10405
|
variant = "airbnb",
|
|
@@ -10497,7 +10572,7 @@ FieldTrigger.displayName = "FieldTrigger";
|
|
|
10497
10572
|
// src/datepicker/DatePicker.tsx
|
|
10498
10573
|
import { jsx as jsx128, jsxs as jsxs85 } from "react/jsx-runtime";
|
|
10499
10574
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
10500
|
-
var DatePicker =
|
|
10575
|
+
var DatePicker = React34.forwardRef(
|
|
10501
10576
|
({
|
|
10502
10577
|
variant = "default",
|
|
10503
10578
|
label,
|
|
@@ -10523,24 +10598,24 @@ var DatePicker = React33.forwardRef(
|
|
|
10523
10598
|
formatValue = formatDateValue
|
|
10524
10599
|
}, ref) => {
|
|
10525
10600
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
10526
|
-
const [isOpen, setIsOpen] =
|
|
10527
|
-
const triggerId =
|
|
10528
|
-
const pickerId =
|
|
10529
|
-
const labelId =
|
|
10530
|
-
const valueId =
|
|
10531
|
-
const helperTextId =
|
|
10532
|
-
const errorId =
|
|
10533
|
-
const internalRef =
|
|
10601
|
+
const [isOpen, setIsOpen] = React34.useState(false);
|
|
10602
|
+
const triggerId = React34.useId();
|
|
10603
|
+
const pickerId = React34.useId();
|
|
10604
|
+
const labelId = React34.useId();
|
|
10605
|
+
const valueId = React34.useId();
|
|
10606
|
+
const helperTextId = React34.useId();
|
|
10607
|
+
const errorId = React34.useId();
|
|
10608
|
+
const internalRef = React34.useRef(null);
|
|
10534
10609
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
10535
|
-
const monthLabels =
|
|
10536
|
-
const resolvedMinDate =
|
|
10537
|
-
const resolvedMaxDate =
|
|
10538
|
-
const normalizedValue =
|
|
10539
|
-
const normalizedDefaultValue =
|
|
10610
|
+
const monthLabels = React34.useMemo(() => getMonthLabels(locale), [locale]);
|
|
10611
|
+
const resolvedMinDate = React34.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
10612
|
+
const resolvedMaxDate = React34.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
10613
|
+
const normalizedValue = React34.useMemo(() => normalizeDateValue(value), [value]);
|
|
10614
|
+
const normalizedDefaultValue = React34.useMemo(
|
|
10540
10615
|
() => normalizeDateValue(defaultValue),
|
|
10541
10616
|
[defaultValue]
|
|
10542
10617
|
);
|
|
10543
|
-
const resolvedValue =
|
|
10618
|
+
const resolvedValue = React34.useMemo(
|
|
10544
10619
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
10545
10620
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
10546
10621
|
);
|
|
@@ -10571,7 +10646,7 @@ var DatePicker = React33.forwardRef(
|
|
|
10571
10646
|
minDate: resolvedMinDate,
|
|
10572
10647
|
maxDate: resolvedMaxDate
|
|
10573
10648
|
});
|
|
10574
|
-
const handleOpenChange =
|
|
10649
|
+
const handleOpenChange = React34.useCallback(
|
|
10575
10650
|
(nextOpen) => {
|
|
10576
10651
|
if (isBlocked && nextOpen) return;
|
|
10577
10652
|
setIsOpen(nextOpen);
|
|
@@ -10581,7 +10656,7 @@ var DatePicker = React33.forwardRef(
|
|
|
10581
10656
|
},
|
|
10582
10657
|
[isBlocked]
|
|
10583
10658
|
);
|
|
10584
|
-
const handleDone =
|
|
10659
|
+
const handleDone = React34.useCallback(() => {
|
|
10585
10660
|
if (isBlocked) return;
|
|
10586
10661
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
10587
10662
|
handleOpenChange(false);
|
|
@@ -10593,11 +10668,11 @@ var DatePicker = React33.forwardRef(
|
|
|
10593
10668
|
resolvedMaxDate,
|
|
10594
10669
|
resolvedMinDate
|
|
10595
10670
|
]);
|
|
10596
|
-
const handleTriggerClick =
|
|
10671
|
+
const handleTriggerClick = React34.useCallback(() => {
|
|
10597
10672
|
if (isBlocked) return;
|
|
10598
10673
|
setIsOpen(true);
|
|
10599
10674
|
}, [isBlocked]);
|
|
10600
|
-
const handleTriggerKeyDown =
|
|
10675
|
+
const handleTriggerKeyDown = React34.useCallback(
|
|
10601
10676
|
(event) => {
|
|
10602
10677
|
if (isBlocked) return;
|
|
10603
10678
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -10607,7 +10682,7 @@ var DatePicker = React33.forwardRef(
|
|
|
10607
10682
|
},
|
|
10608
10683
|
[isBlocked]
|
|
10609
10684
|
);
|
|
10610
|
-
|
|
10685
|
+
React34.useEffect(() => {
|
|
10611
10686
|
if (isBlocked) {
|
|
10612
10687
|
setIsOpen(false);
|
|
10613
10688
|
}
|
|
@@ -10789,10 +10864,10 @@ function ResponsiveSheet({
|
|
|
10789
10864
|
}
|
|
10790
10865
|
|
|
10791
10866
|
// src/airbnb/input/Input.tsx
|
|
10792
|
-
import * as
|
|
10867
|
+
import * as React35 from "react";
|
|
10793
10868
|
import { jsx as jsx130 } from "react/jsx-runtime";
|
|
10794
10869
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
10795
|
-
var AirbnbInput =
|
|
10870
|
+
var AirbnbInput = React35.forwardRef(
|
|
10796
10871
|
({
|
|
10797
10872
|
variant = "default",
|
|
10798
10873
|
label,
|
|
@@ -10821,15 +10896,15 @@ var AirbnbInput = React34.forwardRef(
|
|
|
10821
10896
|
placeholder,
|
|
10822
10897
|
...props
|
|
10823
10898
|
}, ref) => {
|
|
10824
|
-
const generatedId =
|
|
10825
|
-
const inputRef =
|
|
10899
|
+
const generatedId = React35.useId();
|
|
10900
|
+
const inputRef = React35.useRef(null);
|
|
10826
10901
|
const inputId = id ?? generatedId;
|
|
10827
10902
|
const fieldId = `${inputId}-field`;
|
|
10828
10903
|
const labelId = `${inputId}-label`;
|
|
10829
10904
|
const errorId = `${inputId}-error`;
|
|
10830
10905
|
const accessibleLabel = placeholder ?? label;
|
|
10831
|
-
const [isFocused, setIsFocused] =
|
|
10832
|
-
const [currentValue, setCurrentValue] =
|
|
10906
|
+
const [isFocused, setIsFocused] = React35.useState(false);
|
|
10907
|
+
const [currentValue, setCurrentValue] = React35.useState(
|
|
10833
10908
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
10834
10909
|
);
|
|
10835
10910
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -10839,11 +10914,11 @@ var AirbnbInput = React34.forwardRef(
|
|
|
10839
10914
|
const triggerError = error ?? invalid;
|
|
10840
10915
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
10841
10916
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
10842
|
-
|
|
10917
|
+
React35.useLayoutEffect(() => {
|
|
10843
10918
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
10844
10919
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
10845
10920
|
}, [value]);
|
|
10846
|
-
const setRefs =
|
|
10921
|
+
const setRefs = React35.useCallback(
|
|
10847
10922
|
(node) => {
|
|
10848
10923
|
inputRef.current = node;
|
|
10849
10924
|
if (node && value == null) {
|
|
@@ -10941,11 +11016,11 @@ var AirbnbInput = React34.forwardRef(
|
|
|
10941
11016
|
AirbnbInput.displayName = "Input";
|
|
10942
11017
|
|
|
10943
11018
|
// src/airbnb/phone-field/PhoneField.tsx
|
|
10944
|
-
import * as
|
|
11019
|
+
import * as React41 from "react";
|
|
10945
11020
|
import { ChevronDown as ChevronDown2 } from "lucide-react";
|
|
10946
11021
|
|
|
10947
11022
|
// src/airbnb/select/Select.tsx
|
|
10948
|
-
import * as
|
|
11023
|
+
import * as React40 from "react";
|
|
10949
11024
|
|
|
10950
11025
|
// src/airbnb/select/SelectDesktopMenu.tsx
|
|
10951
11026
|
import { jsx as jsx131, jsxs as jsxs87 } from "react/jsx-runtime";
|
|
@@ -11290,10 +11365,10 @@ function SelectMobileContent({
|
|
|
11290
11365
|
}
|
|
11291
11366
|
|
|
11292
11367
|
// src/airbnb/select/SelectTrigger.tsx
|
|
11293
|
-
import * as
|
|
11368
|
+
import * as React36 from "react";
|
|
11294
11369
|
import { ChevronDown } from "lucide-react";
|
|
11295
11370
|
import { jsx as jsx135 } from "react/jsx-runtime";
|
|
11296
|
-
var SelectTrigger2 =
|
|
11371
|
+
var SelectTrigger2 = React36.forwardRef(
|
|
11297
11372
|
({
|
|
11298
11373
|
id,
|
|
11299
11374
|
open,
|
|
@@ -11360,7 +11435,7 @@ var SelectTrigger2 = React35.forwardRef(
|
|
|
11360
11435
|
SelectTrigger2.displayName = "SelectTrigger";
|
|
11361
11436
|
|
|
11362
11437
|
// src/airbnb/select/useDesktopSelect.ts
|
|
11363
|
-
import * as
|
|
11438
|
+
import * as React37 from "react";
|
|
11364
11439
|
function useDesktopSelect({
|
|
11365
11440
|
isMobile,
|
|
11366
11441
|
isOpen,
|
|
@@ -11369,12 +11444,12 @@ function useDesktopSelect({
|
|
|
11369
11444
|
disabled,
|
|
11370
11445
|
onChange
|
|
11371
11446
|
}) {
|
|
11372
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
11373
|
-
const triggerRef =
|
|
11374
|
-
const listRef =
|
|
11375
|
-
const optionRefs =
|
|
11447
|
+
const [highlightedIndex, setHighlightedIndex] = React37.useState(-1);
|
|
11448
|
+
const triggerRef = React37.useRef(null);
|
|
11449
|
+
const listRef = React37.useRef(null);
|
|
11450
|
+
const optionRefs = React37.useRef([]);
|
|
11376
11451
|
const selectedIndex = getOptionIndex(options, value);
|
|
11377
|
-
|
|
11452
|
+
React37.useEffect(() => {
|
|
11378
11453
|
if (!isOpen || isMobile) return;
|
|
11379
11454
|
setHighlightedIndex((currentIndex) => {
|
|
11380
11455
|
if (currentIndex >= 0) {
|
|
@@ -11389,34 +11464,34 @@ function useDesktopSelect({
|
|
|
11389
11464
|
window.cancelAnimationFrame(frameId);
|
|
11390
11465
|
};
|
|
11391
11466
|
}, [isMobile, isOpen, options, selectedIndex]);
|
|
11392
|
-
|
|
11467
|
+
React37.useEffect(() => {
|
|
11393
11468
|
if (!isOpen || isMobile || highlightedIndex < 0) return;
|
|
11394
11469
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
11395
11470
|
block: "nearest"
|
|
11396
11471
|
});
|
|
11397
11472
|
}, [highlightedIndex, isMobile, isOpen]);
|
|
11398
|
-
|
|
11473
|
+
React37.useEffect(() => {
|
|
11399
11474
|
if (isOpen) return;
|
|
11400
11475
|
setHighlightedIndex(-1);
|
|
11401
11476
|
}, [isOpen]);
|
|
11402
|
-
const focusTrigger =
|
|
11477
|
+
const focusTrigger = React37.useCallback(() => {
|
|
11403
11478
|
triggerRef.current?.focus();
|
|
11404
11479
|
}, []);
|
|
11405
|
-
const handleSelect =
|
|
11480
|
+
const handleSelect = React37.useCallback(
|
|
11406
11481
|
(option) => {
|
|
11407
11482
|
if (option.isDisabled || disabled) return;
|
|
11408
11483
|
onChange(option);
|
|
11409
11484
|
},
|
|
11410
11485
|
[disabled, onChange]
|
|
11411
11486
|
);
|
|
11412
|
-
const openMenu =
|
|
11487
|
+
const openMenu = React37.useCallback(
|
|
11413
11488
|
(targetIndex) => {
|
|
11414
11489
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(options);
|
|
11415
11490
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
11416
11491
|
},
|
|
11417
11492
|
[options, selectedIndex]
|
|
11418
11493
|
);
|
|
11419
|
-
const handleTriggerKeyDown =
|
|
11494
|
+
const handleTriggerKeyDown = React37.useCallback(
|
|
11420
11495
|
(event, onOpen) => {
|
|
11421
11496
|
if (disabled) return;
|
|
11422
11497
|
if (event.key === "ArrowDown") {
|
|
@@ -11441,7 +11516,7 @@ function useDesktopSelect({
|
|
|
11441
11516
|
},
|
|
11442
11517
|
[disabled, openMenu, options, selectedIndex]
|
|
11443
11518
|
);
|
|
11444
|
-
const handleMenuKeyDown =
|
|
11519
|
+
const handleMenuKeyDown = React37.useCallback(
|
|
11445
11520
|
(event, onClose) => {
|
|
11446
11521
|
if (event.key === "Escape") {
|
|
11447
11522
|
event.preventDefault();
|
|
@@ -11491,7 +11566,7 @@ function useDesktopSelect({
|
|
|
11491
11566
|
},
|
|
11492
11567
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
11493
11568
|
);
|
|
11494
|
-
const setOptionRef =
|
|
11569
|
+
const setOptionRef = React37.useCallback(
|
|
11495
11570
|
(index, node) => {
|
|
11496
11571
|
optionRefs.current[index] = node;
|
|
11497
11572
|
},
|
|
@@ -11511,23 +11586,23 @@ function useDesktopSelect({
|
|
|
11511
11586
|
}
|
|
11512
11587
|
|
|
11513
11588
|
// src/airbnb/select/useMobileSelectWheel.ts
|
|
11514
|
-
import * as
|
|
11589
|
+
import * as React38 from "react";
|
|
11515
11590
|
function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
11516
|
-
const [pendingValue, setPendingValue] =
|
|
11591
|
+
const [pendingValue, setPendingValue] = React38.useState(
|
|
11517
11592
|
value ?? null
|
|
11518
11593
|
);
|
|
11519
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
11520
|
-
const mobileListRef =
|
|
11521
|
-
const scrollSettleTimeoutRef =
|
|
11522
|
-
const scrollAnimationFrameRef =
|
|
11523
|
-
const getTargetIndex =
|
|
11594
|
+
const [mobileScrollTop, setMobileScrollTop] = React38.useState(0);
|
|
11595
|
+
const mobileListRef = React38.useRef(null);
|
|
11596
|
+
const scrollSettleTimeoutRef = React38.useRef(null);
|
|
11597
|
+
const scrollAnimationFrameRef = React38.useRef(null);
|
|
11598
|
+
const getTargetIndex = React38.useCallback(
|
|
11524
11599
|
(targetValue) => {
|
|
11525
11600
|
const selectedIndex = getOptionIndex(options, targetValue);
|
|
11526
11601
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(options);
|
|
11527
11602
|
},
|
|
11528
11603
|
[options]
|
|
11529
11604
|
);
|
|
11530
|
-
const syncScrollPosition =
|
|
11605
|
+
const syncScrollPosition = React38.useCallback(
|
|
11531
11606
|
(targetValue, behavior = "instant") => {
|
|
11532
11607
|
const targetIndex = getTargetIndex(targetValue);
|
|
11533
11608
|
if (targetIndex < 0) return;
|
|
@@ -11546,27 +11621,27 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11546
11621
|
},
|
|
11547
11622
|
[getTargetIndex, options]
|
|
11548
11623
|
);
|
|
11549
|
-
const clearScrollSettleTimeout =
|
|
11624
|
+
const clearScrollSettleTimeout = React38.useCallback(() => {
|
|
11550
11625
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
11551
11626
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
11552
11627
|
scrollSettleTimeoutRef.current = null;
|
|
11553
11628
|
}, []);
|
|
11554
|
-
const clearScrollAnimationFrame =
|
|
11629
|
+
const clearScrollAnimationFrame = React38.useCallback(() => {
|
|
11555
11630
|
if (scrollAnimationFrameRef.current === null) return;
|
|
11556
11631
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
11557
11632
|
scrollAnimationFrameRef.current = null;
|
|
11558
11633
|
}, []);
|
|
11559
|
-
|
|
11634
|
+
React38.useEffect(
|
|
11560
11635
|
() => () => {
|
|
11561
11636
|
clearScrollSettleTimeout();
|
|
11562
11637
|
clearScrollAnimationFrame();
|
|
11563
11638
|
},
|
|
11564
11639
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
11565
11640
|
);
|
|
11566
|
-
|
|
11641
|
+
React38.useEffect(() => {
|
|
11567
11642
|
setPendingValue(value ?? null);
|
|
11568
11643
|
}, [value]);
|
|
11569
|
-
|
|
11644
|
+
React38.useLayoutEffect(() => {
|
|
11570
11645
|
if (!isMobile || !isOpen) return;
|
|
11571
11646
|
const frameId = window.requestAnimationFrame(() => {
|
|
11572
11647
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -11575,7 +11650,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11575
11650
|
window.cancelAnimationFrame(frameId);
|
|
11576
11651
|
};
|
|
11577
11652
|
}, [isMobile, isOpen, syncScrollPosition, value]);
|
|
11578
|
-
const settleScroll =
|
|
11653
|
+
const settleScroll = React38.useCallback(() => {
|
|
11579
11654
|
if (!mobileListRef.current) return;
|
|
11580
11655
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
11581
11656
|
const nextOption = options[nextIndex];
|
|
@@ -11587,13 +11662,13 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11587
11662
|
}
|
|
11588
11663
|
setPendingValue(nextOption);
|
|
11589
11664
|
}, [options, pendingValue]);
|
|
11590
|
-
const scheduleScrollSettle =
|
|
11665
|
+
const scheduleScrollSettle = React38.useCallback(() => {
|
|
11591
11666
|
clearScrollSettleTimeout();
|
|
11592
11667
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
11593
11668
|
settleScroll();
|
|
11594
11669
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
11595
11670
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
11596
|
-
const handleScroll =
|
|
11671
|
+
const handleScroll = React38.useCallback(() => {
|
|
11597
11672
|
if (!mobileListRef.current) return;
|
|
11598
11673
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
11599
11674
|
clearScrollAnimationFrame();
|
|
@@ -11603,7 +11678,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11603
11678
|
});
|
|
11604
11679
|
scheduleScrollSettle();
|
|
11605
11680
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
11606
|
-
const focusOptionByIndex =
|
|
11681
|
+
const focusOptionByIndex = React38.useCallback(
|
|
11607
11682
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
11608
11683
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
11609
11684
|
const option = options[index];
|
|
@@ -11621,7 +11696,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11621
11696
|
},
|
|
11622
11697
|
[options, scheduleScrollSettle]
|
|
11623
11698
|
);
|
|
11624
|
-
const handleOptionClick =
|
|
11699
|
+
const handleOptionClick = React38.useCallback(
|
|
11625
11700
|
(option) => {
|
|
11626
11701
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
11627
11702
|
const optionIndex = getOptionIndex(options, option);
|
|
@@ -11630,7 +11705,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11630
11705
|
},
|
|
11631
11706
|
[disabled, focusOptionByIndex, options]
|
|
11632
11707
|
);
|
|
11633
|
-
const moveByStep =
|
|
11708
|
+
const moveByStep = React38.useCallback(
|
|
11634
11709
|
(step) => {
|
|
11635
11710
|
const currentIndex = getOptionIndex(options, pendingValue);
|
|
11636
11711
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex(options) : getLastEnabledOptionIndex(options);
|
|
@@ -11642,7 +11717,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11642
11717
|
},
|
|
11643
11718
|
[focusOptionByIndex, options, pendingValue]
|
|
11644
11719
|
);
|
|
11645
|
-
const moveToBoundary =
|
|
11720
|
+
const moveToBoundary = React38.useCallback(
|
|
11646
11721
|
(boundary) => {
|
|
11647
11722
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex(options) : getLastEnabledOptionIndex(options);
|
|
11648
11723
|
if (targetIndex >= 0) {
|
|
@@ -11651,7 +11726,7 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11651
11726
|
},
|
|
11652
11727
|
[focusOptionByIndex, options]
|
|
11653
11728
|
);
|
|
11654
|
-
const syncPendingValue =
|
|
11729
|
+
const syncPendingValue = React38.useCallback(
|
|
11655
11730
|
(nextValue) => {
|
|
11656
11731
|
const normalizedValue = nextValue ?? null;
|
|
11657
11732
|
const matchedIndex = getOptionIndex(options, normalizedValue);
|
|
@@ -11679,9 +11754,9 @@ function useMobileSelectWheel({ isMobile, isOpen, options, value, disabled }) {
|
|
|
11679
11754
|
}
|
|
11680
11755
|
|
|
11681
11756
|
// src/airbnb/select/useSelectIds.ts
|
|
11682
|
-
import * as
|
|
11757
|
+
import * as React39 from "react";
|
|
11683
11758
|
function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
11684
|
-
const reactId =
|
|
11759
|
+
const reactId = React39.useId().replace(/:/g, "");
|
|
11685
11760
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
11686
11761
|
const triggerId = `${baseId}-trigger`;
|
|
11687
11762
|
const labelId = `${baseId}-label`;
|
|
@@ -11691,7 +11766,7 @@ function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
|
11691
11766
|
const listboxId = `${baseId}-listbox`;
|
|
11692
11767
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
11693
11768
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
11694
|
-
const getOptionId2 =
|
|
11769
|
+
const getOptionId2 = React39.useCallback(
|
|
11695
11770
|
(index) => `${baseId}-option-${index}`,
|
|
11696
11771
|
[baseId]
|
|
11697
11772
|
);
|
|
@@ -11710,7 +11785,7 @@ function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
|
11710
11785
|
|
|
11711
11786
|
// src/airbnb/select/Select.tsx
|
|
11712
11787
|
import { jsx as jsx136, jsxs as jsxs90 } from "react/jsx-runtime";
|
|
11713
|
-
var AirbnbSelect =
|
|
11788
|
+
var AirbnbSelect = React40.forwardRef(function AirbnbSelect2({
|
|
11714
11789
|
options = [],
|
|
11715
11790
|
value,
|
|
11716
11791
|
onChange,
|
|
@@ -11737,8 +11812,8 @@ var AirbnbSelect = React39.forwardRef(function AirbnbSelect2({
|
|
|
11737
11812
|
noOptionsMessage
|
|
11738
11813
|
}, ref) {
|
|
11739
11814
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
11740
|
-
const [isOpen, setIsOpen] =
|
|
11741
|
-
const containerRef =
|
|
11815
|
+
const [isOpen, setIsOpen] = React40.useState(false);
|
|
11816
|
+
const containerRef = React40.useRef(null);
|
|
11742
11817
|
const hasValue = Boolean(value);
|
|
11743
11818
|
const helperText = placeholder ?? label;
|
|
11744
11819
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
@@ -11796,12 +11871,12 @@ var AirbnbSelect = React39.forwardRef(function AirbnbSelect2({
|
|
|
11796
11871
|
onOutsideClick: () => setIsOpen(false),
|
|
11797
11872
|
isDisabled: !isOpen || isMobile
|
|
11798
11873
|
});
|
|
11799
|
-
|
|
11874
|
+
React40.useEffect(() => {
|
|
11800
11875
|
if (isBlocked) {
|
|
11801
11876
|
setIsOpen(false);
|
|
11802
11877
|
}
|
|
11803
11878
|
}, [isBlocked]);
|
|
11804
|
-
|
|
11879
|
+
React40.useEffect(
|
|
11805
11880
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
11806
11881
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
11807
11882
|
return;
|
|
@@ -11813,7 +11888,7 @@ var AirbnbSelect = React39.forwardRef(function AirbnbSelect2({
|
|
|
11813
11888
|
},
|
|
11814
11889
|
[onChange, options, value]
|
|
11815
11890
|
);
|
|
11816
|
-
const handleMobileOpenChange =
|
|
11891
|
+
const handleMobileOpenChange = React40.useCallback(
|
|
11817
11892
|
(nextOpen) => {
|
|
11818
11893
|
if (isBlocked && nextOpen) return;
|
|
11819
11894
|
setIsOpen(nextOpen);
|
|
@@ -11824,7 +11899,7 @@ var AirbnbSelect = React39.forwardRef(function AirbnbSelect2({
|
|
|
11824
11899
|
},
|
|
11825
11900
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
11826
11901
|
);
|
|
11827
|
-
const handleMobileDone =
|
|
11902
|
+
const handleMobileDone = React40.useCallback(() => {
|
|
11828
11903
|
if (isBlocked) return;
|
|
11829
11904
|
const finalOption = pendingValue;
|
|
11830
11905
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -11833,7 +11908,7 @@ var AirbnbSelect = React39.forwardRef(function AirbnbSelect2({
|
|
|
11833
11908
|
setIsOpen(false);
|
|
11834
11909
|
focusTrigger();
|
|
11835
11910
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
11836
|
-
const handleTriggerClick =
|
|
11911
|
+
const handleTriggerClick = React40.useCallback(() => {
|
|
11837
11912
|
if (isBlocked) return;
|
|
11838
11913
|
setIsOpen((prev) => {
|
|
11839
11914
|
const nextOpen = !prev;
|
|
@@ -12007,7 +12082,7 @@ function formatPhoneCodeOptionLabel(option) {
|
|
|
12007
12082
|
const value = String(option.value);
|
|
12008
12083
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
12009
12084
|
}
|
|
12010
|
-
var PhoneField =
|
|
12085
|
+
var PhoneField = React41.forwardRef(
|
|
12011
12086
|
({
|
|
12012
12087
|
variant = "default",
|
|
12013
12088
|
label,
|
|
@@ -12031,8 +12106,8 @@ var PhoneField = React40.forwardRef(
|
|
|
12031
12106
|
mobileTitle,
|
|
12032
12107
|
codePlaceholder = "+00"
|
|
12033
12108
|
}, ref) => {
|
|
12034
|
-
const inputId =
|
|
12035
|
-
const codeOptions =
|
|
12109
|
+
const inputId = React41.useId();
|
|
12110
|
+
const codeOptions = React41.useMemo(
|
|
12036
12111
|
() => options.map((option) => ({
|
|
12037
12112
|
value: option.value,
|
|
12038
12113
|
label: formatPhoneCodeOptionLabel(option),
|
|
@@ -12040,7 +12115,7 @@ var PhoneField = React40.forwardRef(
|
|
|
12040
12115
|
})),
|
|
12041
12116
|
[options]
|
|
12042
12117
|
);
|
|
12043
|
-
const selectedCodeOption =
|
|
12118
|
+
const selectedCodeOption = React41.useMemo(
|
|
12044
12119
|
() => codeOptions.find((option) => option.value === value?.code) ?? null,
|
|
12045
12120
|
[codeOptions, value?.code]
|
|
12046
12121
|
);
|
|
@@ -12182,11 +12257,11 @@ var PhoneField = React40.forwardRef(
|
|
|
12182
12257
|
PhoneField.displayName = "PhoneField";
|
|
12183
12258
|
|
|
12184
12259
|
// src/airbnb/search-input/SearchInput.tsx
|
|
12185
|
-
import * as
|
|
12260
|
+
import * as React42 from "react";
|
|
12186
12261
|
import { useTranslation as useTranslation24 } from "react-i18next";
|
|
12187
12262
|
import { Search as Search3, X as X8 } from "lucide-react";
|
|
12188
12263
|
import { jsx as jsx138, jsxs as jsxs92 } from "react/jsx-runtime";
|
|
12189
|
-
var AirbnbSearchInput =
|
|
12264
|
+
var AirbnbSearchInput = React42.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
12190
12265
|
const { t } = useTranslation24();
|
|
12191
12266
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
12192
12267
|
return /* @__PURE__ */ jsxs92("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
@@ -12224,10 +12299,10 @@ var AirbnbSearchInput = React41.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
12224
12299
|
AirbnbSearchInput.displayName = "SearchInput";
|
|
12225
12300
|
|
|
12226
12301
|
// src/searchable-select/SearchableSelect.tsx
|
|
12227
|
-
import * as
|
|
12302
|
+
import * as React43 from "react";
|
|
12228
12303
|
import { ChevronDown as ChevronDown3, Search as Search4 } from "lucide-react";
|
|
12229
12304
|
import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
|
|
12230
|
-
import { useCallback as
|
|
12305
|
+
import { useCallback as useCallback26 } from "react";
|
|
12231
12306
|
import { jsx as jsx139, jsxs as jsxs93 } from "react/jsx-runtime";
|
|
12232
12307
|
var ROW_HEIGHT = 48;
|
|
12233
12308
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
@@ -12269,13 +12344,13 @@ var SearchableSelectInternal = ({
|
|
|
12269
12344
|
loadingMessage
|
|
12270
12345
|
}, ref) => {
|
|
12271
12346
|
const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
|
|
12272
|
-
const reactId =
|
|
12273
|
-
const [open, setOpen] =
|
|
12274
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
12275
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
12276
|
-
const containerRef =
|
|
12277
|
-
const triggerRef =
|
|
12278
|
-
const inputRef =
|
|
12347
|
+
const reactId = React43.useId();
|
|
12348
|
+
const [open, setOpen] = React43.useState(false);
|
|
12349
|
+
const [internalSearchValue, setInternalSearchValue] = React43.useState("");
|
|
12350
|
+
const [highlightedIndex, setHighlightedIndex] = React43.useState(-1);
|
|
12351
|
+
const containerRef = React43.useRef(null);
|
|
12352
|
+
const triggerRef = React43.useRef(null);
|
|
12353
|
+
const inputRef = React43.useRef(null);
|
|
12279
12354
|
const listboxId = `${reactId}-listbox`;
|
|
12280
12355
|
const labelId = `${reactId}-label`;
|
|
12281
12356
|
const valueId = `${reactId}-value`;
|
|
@@ -12284,13 +12359,13 @@ var SearchableSelectInternal = ({
|
|
|
12284
12359
|
const searchInputId = `${reactId}-search`;
|
|
12285
12360
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
12286
12361
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
12287
|
-
const visibleOptions =
|
|
12362
|
+
const visibleOptions = React43.useMemo(() => {
|
|
12288
12363
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
12289
12364
|
return options;
|
|
12290
12365
|
}
|
|
12291
12366
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
12292
12367
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
12293
|
-
const selectedIndex =
|
|
12368
|
+
const selectedIndex = React43.useMemo(
|
|
12294
12369
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
12295
12370
|
[value?.value, visibleOptions]
|
|
12296
12371
|
);
|
|
@@ -12306,7 +12381,7 @@ var SearchableSelectInternal = ({
|
|
|
12306
12381
|
isDisabled: !open || isMobile
|
|
12307
12382
|
});
|
|
12308
12383
|
const handleOnOpenChange = useEvent(onOpenChange);
|
|
12309
|
-
const setSelectOpen =
|
|
12384
|
+
const setSelectOpen = useCallback26(
|
|
12310
12385
|
(nextOpen, options2) => {
|
|
12311
12386
|
setOpen(nextOpen);
|
|
12312
12387
|
handleOnOpenChange?.(nextOpen);
|
|
@@ -12316,7 +12391,7 @@ var SearchableSelectInternal = ({
|
|
|
12316
12391
|
},
|
|
12317
12392
|
[handleOnOpenChange]
|
|
12318
12393
|
);
|
|
12319
|
-
|
|
12394
|
+
React43.useEffect(() => {
|
|
12320
12395
|
if (isBlocked) {
|
|
12321
12396
|
setSelectOpen(false);
|
|
12322
12397
|
return;
|
|
@@ -12329,7 +12404,7 @@ var SearchableSelectInternal = ({
|
|
|
12329
12404
|
window.cancelAnimationFrame(frameId);
|
|
12330
12405
|
};
|
|
12331
12406
|
}, [isBlocked, open, setSelectOpen]);
|
|
12332
|
-
|
|
12407
|
+
React43.useEffect(() => {
|
|
12333
12408
|
if (!open) {
|
|
12334
12409
|
setHighlightedIndex(-1);
|
|
12335
12410
|
return;
|
|
@@ -12424,7 +12499,7 @@ var SearchableSelectInternal = ({
|
|
|
12424
12499
|
onOptionHover: setHighlightedIndex
|
|
12425
12500
|
}
|
|
12426
12501
|
);
|
|
12427
|
-
|
|
12502
|
+
React43.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
12428
12503
|
return /* @__PURE__ */ jsxs93("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
12429
12504
|
name && /* @__PURE__ */ jsx139("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
12430
12505
|
/* @__PURE__ */ jsx139(
|
|
@@ -12503,7 +12578,7 @@ var SearchableSelectInternal = ({
|
|
|
12503
12578
|
) : null
|
|
12504
12579
|
] });
|
|
12505
12580
|
};
|
|
12506
|
-
var SearchableSelect =
|
|
12581
|
+
var SearchableSelect = React43.forwardRef(
|
|
12507
12582
|
SearchableSelectInternal
|
|
12508
12583
|
);
|
|
12509
12584
|
function SearchableSelectContent({
|
|
@@ -12530,9 +12605,9 @@ function SearchableSelectContent({
|
|
|
12530
12605
|
onOptionClick,
|
|
12531
12606
|
onOptionHover
|
|
12532
12607
|
}) {
|
|
12533
|
-
const listRef =
|
|
12534
|
-
const lastLoadMoreOptionsLengthRef =
|
|
12535
|
-
const previousHighlightedIndexRef =
|
|
12608
|
+
const listRef = React43.useRef(null);
|
|
12609
|
+
const lastLoadMoreOptionsLengthRef = React43.useRef(null);
|
|
12610
|
+
const previousHighlightedIndexRef = React43.useRef(highlightedIndex);
|
|
12536
12611
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
12537
12612
|
const virtualizer = useVirtualizer2({
|
|
12538
12613
|
count: rowCount,
|
|
@@ -12543,7 +12618,7 @@ function SearchableSelectContent({
|
|
|
12543
12618
|
const virtualItems = virtualizer.getVirtualItems();
|
|
12544
12619
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
12545
12620
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
12546
|
-
|
|
12621
|
+
React43.useEffect(() => {
|
|
12547
12622
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
12548
12623
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
12549
12624
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -12551,7 +12626,7 @@ function SearchableSelectContent({
|
|
|
12551
12626
|
onLoadMore?.();
|
|
12552
12627
|
}
|
|
12553
12628
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
12554
|
-
|
|
12629
|
+
React43.useEffect(() => {
|
|
12555
12630
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
12556
12631
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
12557
12632
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -12956,6 +13031,7 @@ export {
|
|
|
12956
13031
|
useDebouncedFunction,
|
|
12957
13032
|
useEvent,
|
|
12958
13033
|
useHover,
|
|
13034
|
+
useIframeFocusTrapFallback,
|
|
12959
13035
|
useIsFormTouched,
|
|
12960
13036
|
useIsMobile,
|
|
12961
13037
|
useIsMounted,
|