@chekinapp/ui 0.0.86 → 0.0.87
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 +622 -520
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +26 -2
- package/dist/index.d.ts +26 -2
- package/dist/index.js +622 -521
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -203,6 +203,7 @@ __export(index_exports, {
|
|
|
203
203
|
RatingProgress: () => RatingProgress,
|
|
204
204
|
RatingRadioGroup: () => RatingRadioGroup,
|
|
205
205
|
RatingStars: () => RatingStars,
|
|
206
|
+
ResponsiveDropdown: () => ResponsiveDropdown,
|
|
206
207
|
ResponsiveSheet: () => ResponsiveSheet,
|
|
207
208
|
RotateArrow: () => RotateArrow,
|
|
208
209
|
ScrollArea: () => ScrollArea,
|
|
@@ -3784,7 +3785,7 @@ var DialogContent = React15.forwardRef(
|
|
|
3784
3785
|
]
|
|
3785
3786
|
}
|
|
3786
3787
|
);
|
|
3787
|
-
const portalContainer = container || (
|
|
3788
|
+
const portalContainer = container || getCustomContainer();
|
|
3788
3789
|
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DialogPortal, { "data-slot": "dialog-portal", container: portalContainer, children: lockScroll ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3789
3790
|
DialogOverlay,
|
|
3790
3791
|
{
|
|
@@ -6107,8 +6108,8 @@ function Modal({
|
|
|
6107
6108
|
onClose,
|
|
6108
6109
|
children,
|
|
6109
6110
|
withCloseButton = true,
|
|
6110
|
-
closeOnDocumentClick =
|
|
6111
|
-
closeOnEscape =
|
|
6111
|
+
closeOnDocumentClick = false,
|
|
6112
|
+
closeOnEscape = false,
|
|
6112
6113
|
scrollableOverlay,
|
|
6113
6114
|
className,
|
|
6114
6115
|
title,
|
|
@@ -6117,6 +6118,7 @@ function Modal({
|
|
|
6117
6118
|
iconSrc,
|
|
6118
6119
|
iconAlt,
|
|
6119
6120
|
iconProps = { width: 84 },
|
|
6121
|
+
iconClassName,
|
|
6120
6122
|
buttons,
|
|
6121
6123
|
lockScroll = true,
|
|
6122
6124
|
container,
|
|
@@ -6162,7 +6164,7 @@ function Modal({
|
|
|
6162
6164
|
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react18.X, { className: "h-5 w-5" })
|
|
6163
6165
|
}
|
|
6164
6166
|
),
|
|
6165
|
-
(icon || iconSrc || iconProps?.src) && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "modal__icon mx-auto mt-4 select-none", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("img", { src: iconSrc, alt: iconAlt ?? "", ...iconProps }) }),
|
|
6167
|
+
(icon || iconSrc || iconProps?.src) && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: cn("modal__icon mx-auto mt-4 select-none", iconClassName), children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("img", { src: iconSrc, alt: iconAlt ?? "", ...iconProps }) }),
|
|
6166
6168
|
title ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DialogTitle, { className: cn("modal__title", "px-6 text-lg font-bold"), children: title }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DialogVisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DialogTitle, { children: "Dialog" }) }),
|
|
6167
6169
|
text && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DialogDescription, { className: cn("modal__text", "text-base"), children: text }),
|
|
6168
6170
|
children,
|
|
@@ -12306,11 +12308,110 @@ function ResponsiveSheet({
|
|
|
12306
12308
|
) });
|
|
12307
12309
|
}
|
|
12308
12310
|
|
|
12309
|
-
// src/
|
|
12311
|
+
// src/responsive-dropdown/ResponsiveDropdown.tsx
|
|
12310
12312
|
var React46 = __toESM(require("react"), 1);
|
|
12311
12313
|
var import_jsx_runtime145 = require("react/jsx-runtime");
|
|
12314
|
+
function ResponsiveDropdown({
|
|
12315
|
+
trigger,
|
|
12316
|
+
options,
|
|
12317
|
+
children,
|
|
12318
|
+
side,
|
|
12319
|
+
align,
|
|
12320
|
+
disabled,
|
|
12321
|
+
title,
|
|
12322
|
+
className,
|
|
12323
|
+
dropdownClassName,
|
|
12324
|
+
drawerClassName
|
|
12325
|
+
}) {
|
|
12326
|
+
const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
|
|
12327
|
+
const isMobileMode = isMobile2 && isMobileModalModeAvailable();
|
|
12328
|
+
const [open, setOpen] = React46.useState(false);
|
|
12329
|
+
const visibleOptions = options?.filter((option) => !option.hidden) ?? [];
|
|
12330
|
+
const renderTrigger = (isOpen) => typeof trigger === "function" ? trigger(isOpen) : trigger;
|
|
12331
|
+
const handleOpenChange = (nextOpen) => {
|
|
12332
|
+
if (disabled) {
|
|
12333
|
+
return;
|
|
12334
|
+
}
|
|
12335
|
+
setOpen(nextOpen);
|
|
12336
|
+
};
|
|
12337
|
+
const handleOptionClick = (option) => (event) => {
|
|
12338
|
+
if (disabled || option.disabled) {
|
|
12339
|
+
return;
|
|
12340
|
+
}
|
|
12341
|
+
option.onClick?.(event);
|
|
12342
|
+
setOpen(false);
|
|
12343
|
+
};
|
|
12344
|
+
if (isMobileMode) {
|
|
12345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_jsx_runtime145.Fragment, { children: [
|
|
12346
|
+
/* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
|
|
12347
|
+
"div",
|
|
12348
|
+
{
|
|
12349
|
+
className: "responsive-dropdown__mobile-trigger",
|
|
12350
|
+
onClick: () => handleOpenChange(true),
|
|
12351
|
+
children: renderTrigger(open)
|
|
12352
|
+
}
|
|
12353
|
+
),
|
|
12354
|
+
/* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
|
|
12355
|
+
DrawerContent,
|
|
12356
|
+
{
|
|
12357
|
+
onClose: () => setOpen(false),
|
|
12358
|
+
lockScroll: false,
|
|
12359
|
+
className: cn("px-0 pb-2", className, drawerClassName),
|
|
12360
|
+
children: [
|
|
12361
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(DrawerTitle, { className: "sr-only", children: title }) : null,
|
|
12362
|
+
/* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("div", { className: "flex flex-col", children: [
|
|
12363
|
+
visibleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
|
|
12364
|
+
"div",
|
|
12365
|
+
{
|
|
12366
|
+
role: "button",
|
|
12367
|
+
tabIndex: 0,
|
|
12368
|
+
"aria-disabled": option.disabled,
|
|
12369
|
+
onClick: handleOptionClick(option),
|
|
12370
|
+
className: cn(
|
|
12371
|
+
"cursor-pointer px-5 py-3 text-base font-medium text-[var(--chekin-color-brand-navy)] outline-none hover:bg-gray-50",
|
|
12372
|
+
option.disabled && "pointer-events-none opacity-50"
|
|
12373
|
+
),
|
|
12374
|
+
children: option.label
|
|
12375
|
+
},
|
|
12376
|
+
option.id
|
|
12377
|
+
)),
|
|
12378
|
+
children
|
|
12379
|
+
] })
|
|
12380
|
+
]
|
|
12381
|
+
}
|
|
12382
|
+
) })
|
|
12383
|
+
] });
|
|
12384
|
+
}
|
|
12385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(DropdownMenu, { open, onOpenChange: handleOpenChange, children: [
|
|
12386
|
+
/* @__PURE__ */ (0, import_jsx_runtime145.jsx)(DropdownMenuTrigger, { asChild: true, disabled, children: renderTrigger(open) }),
|
|
12387
|
+
/* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
|
|
12388
|
+
DropdownMenuContent,
|
|
12389
|
+
{
|
|
12390
|
+
side,
|
|
12391
|
+
align,
|
|
12392
|
+
className: cn("min-w-[295px]", className, dropdownClassName),
|
|
12393
|
+
children: [
|
|
12394
|
+
visibleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
|
|
12395
|
+
DropdownMenuItem,
|
|
12396
|
+
{
|
|
12397
|
+
disabled: option.disabled,
|
|
12398
|
+
onClick: handleOptionClick(option),
|
|
12399
|
+
children: option.label
|
|
12400
|
+
},
|
|
12401
|
+
option.id
|
|
12402
|
+
)),
|
|
12403
|
+
children
|
|
12404
|
+
]
|
|
12405
|
+
}
|
|
12406
|
+
)
|
|
12407
|
+
] });
|
|
12408
|
+
}
|
|
12409
|
+
|
|
12410
|
+
// src/airbnb/input/Input.tsx
|
|
12411
|
+
var React47 = __toESM(require("react"), 1);
|
|
12412
|
+
var import_jsx_runtime146 = require("react/jsx-runtime");
|
|
12312
12413
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
12313
|
-
var AirbnbInput =
|
|
12414
|
+
var AirbnbInput = React47.forwardRef(
|
|
12314
12415
|
({
|
|
12315
12416
|
variant = "default",
|
|
12316
12417
|
label,
|
|
@@ -12339,15 +12440,15 @@ var AirbnbInput = React46.forwardRef(
|
|
|
12339
12440
|
placeholder,
|
|
12340
12441
|
...props
|
|
12341
12442
|
}, ref) => {
|
|
12342
|
-
const generatedId =
|
|
12343
|
-
const inputRef =
|
|
12443
|
+
const generatedId = React47.useId();
|
|
12444
|
+
const inputRef = React47.useRef(null);
|
|
12344
12445
|
const inputId = id ?? generatedId;
|
|
12345
12446
|
const fieldId = `${inputId}-field`;
|
|
12346
12447
|
const labelId = `${inputId}-label`;
|
|
12347
12448
|
const errorId = `${inputId}-error`;
|
|
12348
12449
|
const accessibleLabel = placeholder ?? label;
|
|
12349
|
-
const [isFocused, setIsFocused] =
|
|
12350
|
-
const [currentValue, setCurrentValue] =
|
|
12450
|
+
const [isFocused, setIsFocused] = React47.useState(false);
|
|
12451
|
+
const [currentValue, setCurrentValue] = React47.useState(
|
|
12351
12452
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
12352
12453
|
);
|
|
12353
12454
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -12357,11 +12458,11 @@ var AirbnbInput = React46.forwardRef(
|
|
|
12357
12458
|
const triggerError = error ?? invalid;
|
|
12358
12459
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
12359
12460
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
12360
|
-
|
|
12461
|
+
React47.useLayoutEffect(() => {
|
|
12361
12462
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
12362
12463
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
12363
12464
|
}, [value]);
|
|
12364
|
-
const setRefs =
|
|
12465
|
+
const setRefs = React47.useCallback(
|
|
12365
12466
|
(node) => {
|
|
12366
12467
|
inputRef.current = node;
|
|
12367
12468
|
if (node && value == null) {
|
|
@@ -12391,7 +12492,7 @@ var AirbnbInput = React46.forwardRef(
|
|
|
12391
12492
|
setIsFocused(false);
|
|
12392
12493
|
onBlur?.(event);
|
|
12393
12494
|
};
|
|
12394
|
-
return /* @__PURE__ */ (0,
|
|
12495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
|
|
12395
12496
|
FieldTrigger,
|
|
12396
12497
|
{
|
|
12397
12498
|
as: "div",
|
|
@@ -12423,7 +12524,7 @@ var AirbnbInput = React46.forwardRef(
|
|
|
12423
12524
|
forceFloatingLabel: shouldShowLabel,
|
|
12424
12525
|
forceLabelText: hasLabelMeta,
|
|
12425
12526
|
hideErrorMessage: !renderErrorMessage,
|
|
12426
|
-
children: /* @__PURE__ */ (0,
|
|
12527
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
|
|
12427
12528
|
"input",
|
|
12428
12529
|
{
|
|
12429
12530
|
...props,
|
|
@@ -12459,14 +12560,14 @@ var AirbnbInput = React46.forwardRef(
|
|
|
12459
12560
|
AirbnbInput.displayName = "Input";
|
|
12460
12561
|
|
|
12461
12562
|
// src/airbnb/phone-field/PhoneField.tsx
|
|
12462
|
-
var
|
|
12563
|
+
var React53 = __toESM(require("react"), 1);
|
|
12463
12564
|
var import_lucide_react43 = require("lucide-react");
|
|
12464
12565
|
|
|
12465
12566
|
// src/airbnb/select/Select.tsx
|
|
12466
|
-
var
|
|
12567
|
+
var React52 = __toESM(require("react"), 1);
|
|
12467
12568
|
|
|
12468
12569
|
// src/airbnb/select/SelectDesktopMenu.tsx
|
|
12469
|
-
var
|
|
12570
|
+
var import_jsx_runtime147 = require("react/jsx-runtime");
|
|
12470
12571
|
function SelectDesktopMenu({
|
|
12471
12572
|
id,
|
|
12472
12573
|
options,
|
|
@@ -12485,7 +12586,7 @@ function SelectDesktopMenu({
|
|
|
12485
12586
|
noOptionsMessage
|
|
12486
12587
|
}) {
|
|
12487
12588
|
const emptyMessage = noOptionsMessage?.();
|
|
12488
|
-
return /* @__PURE__ */ (0,
|
|
12589
|
+
return /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
|
|
12489
12590
|
"div",
|
|
12490
12591
|
{
|
|
12491
12592
|
id,
|
|
@@ -12498,12 +12599,12 @@ function SelectDesktopMenu({
|
|
|
12498
12599
|
onKeyDown,
|
|
12499
12600
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
12500
12601
|
children: [
|
|
12501
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
12602
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
12502
12603
|
options.map((option, index) => {
|
|
12503
12604
|
const isSelected = selectedValue?.value === option.value;
|
|
12504
12605
|
const isHighlighted = index === highlightedIndex;
|
|
12505
12606
|
const optionKey = `${String(option.value)}-${index}`;
|
|
12506
|
-
return /* @__PURE__ */ (0,
|
|
12607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
|
|
12507
12608
|
"button",
|
|
12508
12609
|
{
|
|
12509
12610
|
id: getOptionId2(index),
|
|
@@ -12535,7 +12636,7 @@ function SelectDesktopMenu({
|
|
|
12535
12636
|
}
|
|
12536
12637
|
|
|
12537
12638
|
// src/airbnb/select/SelectDesktopContent.tsx
|
|
12538
|
-
var
|
|
12639
|
+
var import_jsx_runtime148 = require("react/jsx-runtime");
|
|
12539
12640
|
function SelectDesktopContent({
|
|
12540
12641
|
isOpen,
|
|
12541
12642
|
listboxId,
|
|
@@ -12556,14 +12657,14 @@ function SelectDesktopContent({
|
|
|
12556
12657
|
noOptionsMessage
|
|
12557
12658
|
}) {
|
|
12558
12659
|
if (!isOpen) return null;
|
|
12559
|
-
return /* @__PURE__ */ (0,
|
|
12660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
|
|
12560
12661
|
"div",
|
|
12561
12662
|
{
|
|
12562
12663
|
className: cn(
|
|
12563
12664
|
"absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[#DEDAD2] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
|
|
12564
12665
|
dropdownClassName
|
|
12565
12666
|
),
|
|
12566
|
-
children: /* @__PURE__ */ (0,
|
|
12667
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
|
|
12567
12668
|
SelectDesktopMenu,
|
|
12568
12669
|
{
|
|
12569
12670
|
id: listboxId,
|
|
@@ -12661,7 +12762,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
12661
12762
|
}
|
|
12662
12763
|
|
|
12663
12764
|
// src/airbnb/select/SelectMobileWheel.tsx
|
|
12664
|
-
var
|
|
12765
|
+
var import_jsx_runtime149 = require("react/jsx-runtime");
|
|
12665
12766
|
function SelectMobileWheel({
|
|
12666
12767
|
id,
|
|
12667
12768
|
options,
|
|
@@ -12680,7 +12781,7 @@ function SelectMobileWheel({
|
|
|
12680
12781
|
}) {
|
|
12681
12782
|
const spacerHeight2 = getWheelSpacerHeight();
|
|
12682
12783
|
const emptyMessage = noOptionsMessage?.();
|
|
12683
|
-
return /* @__PURE__ */ (0,
|
|
12784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)(
|
|
12684
12785
|
"div",
|
|
12685
12786
|
{
|
|
12686
12787
|
id,
|
|
@@ -12692,10 +12793,10 @@ function SelectMobileWheel({
|
|
|
12692
12793
|
onKeyDown,
|
|
12693
12794
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
12694
12795
|
children: [
|
|
12695
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
12696
|
-
/* @__PURE__ */ (0,
|
|
12697
|
-
/* @__PURE__ */ (0,
|
|
12698
|
-
/* @__PURE__ */ (0,
|
|
12796
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
12797
|
+
/* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
12798
|
+
/* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
12799
|
+
/* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
|
|
12699
12800
|
"div",
|
|
12700
12801
|
{
|
|
12701
12802
|
"aria-hidden": true,
|
|
@@ -12705,7 +12806,7 @@ function SelectMobileWheel({
|
|
|
12705
12806
|
)
|
|
12706
12807
|
}
|
|
12707
12808
|
),
|
|
12708
|
-
/* @__PURE__ */ (0,
|
|
12809
|
+
/* @__PURE__ */ (0, import_jsx_runtime149.jsxs)(
|
|
12709
12810
|
"div",
|
|
12710
12811
|
{
|
|
12711
12812
|
ref: listRef,
|
|
@@ -12720,11 +12821,11 @@ function SelectMobileWheel({
|
|
|
12720
12821
|
WebkitOverflowScrolling: "touch"
|
|
12721
12822
|
},
|
|
12722
12823
|
children: [
|
|
12723
|
-
/* @__PURE__ */ (0,
|
|
12824
|
+
/* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
|
|
12724
12825
|
options.map((option, index) => {
|
|
12725
12826
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
12726
12827
|
const optionKey = `${String(option.value)}-${index}`;
|
|
12727
|
-
return /* @__PURE__ */ (0,
|
|
12828
|
+
return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
|
|
12728
12829
|
"button",
|
|
12729
12830
|
{
|
|
12730
12831
|
id: getOptionId2(index),
|
|
@@ -12745,7 +12846,7 @@ function SelectMobileWheel({
|
|
|
12745
12846
|
optionKey
|
|
12746
12847
|
);
|
|
12747
12848
|
}),
|
|
12748
|
-
/* @__PURE__ */ (0,
|
|
12849
|
+
/* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { style: { height: `${spacerHeight2}px` } })
|
|
12749
12850
|
]
|
|
12750
12851
|
}
|
|
12751
12852
|
)
|
|
@@ -12755,7 +12856,7 @@ function SelectMobileWheel({
|
|
|
12755
12856
|
}
|
|
12756
12857
|
|
|
12757
12858
|
// src/airbnb/select/SelectMobileContent.tsx
|
|
12758
|
-
var
|
|
12859
|
+
var import_jsx_runtime150 = require("react/jsx-runtime");
|
|
12759
12860
|
function SelectMobileContent({
|
|
12760
12861
|
open,
|
|
12761
12862
|
onOpenChange,
|
|
@@ -12779,11 +12880,11 @@ function SelectMobileContent({
|
|
|
12779
12880
|
getOptionId: getOptionId2,
|
|
12780
12881
|
noOptionsMessage
|
|
12781
12882
|
}) {
|
|
12782
|
-
return /* @__PURE__ */ (0,
|
|
12783
|
-
/* @__PURE__ */ (0,
|
|
12784
|
-
/* @__PURE__ */ (0,
|
|
12785
|
-
/* @__PURE__ */ (0,
|
|
12786
|
-
/* @__PURE__ */ (0,
|
|
12883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
|
|
12884
|
+
/* @__PURE__ */ (0, import_jsx_runtime150.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
12885
|
+
/* @__PURE__ */ (0, import_jsx_runtime150.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
12886
|
+
/* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
|
|
12887
|
+
/* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
|
|
12787
12888
|
SelectMobileWheel,
|
|
12788
12889
|
{
|
|
12789
12890
|
id: listboxId,
|
|
@@ -12802,16 +12903,16 @@ function SelectMobileContent({
|
|
|
12802
12903
|
noOptionsMessage
|
|
12803
12904
|
}
|
|
12804
12905
|
),
|
|
12805
|
-
/* @__PURE__ */ (0,
|
|
12906
|
+
/* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
12806
12907
|
] })
|
|
12807
12908
|
] }) });
|
|
12808
12909
|
}
|
|
12809
12910
|
|
|
12810
12911
|
// src/airbnb/select/SelectTrigger.tsx
|
|
12811
|
-
var
|
|
12912
|
+
var React48 = __toESM(require("react"), 1);
|
|
12812
12913
|
var import_lucide_react42 = require("lucide-react");
|
|
12813
|
-
var
|
|
12814
|
-
var SelectTrigger2 =
|
|
12914
|
+
var import_jsx_runtime151 = require("react/jsx-runtime");
|
|
12915
|
+
var SelectTrigger2 = React48.forwardRef(
|
|
12815
12916
|
({
|
|
12816
12917
|
id,
|
|
12817
12918
|
open,
|
|
@@ -12836,7 +12937,7 @@ var SelectTrigger2 = React47.forwardRef(
|
|
|
12836
12937
|
onKeyDown,
|
|
12837
12938
|
onBlur
|
|
12838
12939
|
}, ref) => {
|
|
12839
|
-
return /* @__PURE__ */ (0,
|
|
12940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
|
|
12840
12941
|
FieldTrigger,
|
|
12841
12942
|
{
|
|
12842
12943
|
id,
|
|
@@ -12865,7 +12966,7 @@ var SelectTrigger2 = React47.forwardRef(
|
|
|
12865
12966
|
onClick,
|
|
12866
12967
|
onKeyDown,
|
|
12867
12968
|
onBlur,
|
|
12868
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
12969
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
|
|
12869
12970
|
import_lucide_react42.ChevronDown,
|
|
12870
12971
|
{
|
|
12871
12972
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
@@ -12878,7 +12979,7 @@ var SelectTrigger2 = React47.forwardRef(
|
|
|
12878
12979
|
SelectTrigger2.displayName = "SelectTrigger";
|
|
12879
12980
|
|
|
12880
12981
|
// src/airbnb/select/useDesktopSelect.ts
|
|
12881
|
-
var
|
|
12982
|
+
var React49 = __toESM(require("react"), 1);
|
|
12882
12983
|
function useDesktopSelect({
|
|
12883
12984
|
isMobile: isMobile2,
|
|
12884
12985
|
isOpen,
|
|
@@ -12887,12 +12988,12 @@ function useDesktopSelect({
|
|
|
12887
12988
|
disabled,
|
|
12888
12989
|
onChange
|
|
12889
12990
|
}) {
|
|
12890
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
12891
|
-
const triggerRef =
|
|
12892
|
-
const listRef =
|
|
12893
|
-
const optionRefs =
|
|
12991
|
+
const [highlightedIndex, setHighlightedIndex] = React49.useState(-1);
|
|
12992
|
+
const triggerRef = React49.useRef(null);
|
|
12993
|
+
const listRef = React49.useRef(null);
|
|
12994
|
+
const optionRefs = React49.useRef([]);
|
|
12894
12995
|
const selectedIndex = getOptionIndex(options, value);
|
|
12895
|
-
|
|
12996
|
+
React49.useEffect(() => {
|
|
12896
12997
|
if (!isOpen || isMobile2) return;
|
|
12897
12998
|
setHighlightedIndex((currentIndex) => {
|
|
12898
12999
|
if (currentIndex >= 0) {
|
|
@@ -12907,34 +13008,34 @@ function useDesktopSelect({
|
|
|
12907
13008
|
window.cancelAnimationFrame(frameId);
|
|
12908
13009
|
};
|
|
12909
13010
|
}, [isMobile2, isOpen, options, selectedIndex]);
|
|
12910
|
-
|
|
13011
|
+
React49.useEffect(() => {
|
|
12911
13012
|
if (!isOpen || isMobile2 || highlightedIndex < 0) return;
|
|
12912
13013
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
12913
13014
|
block: "nearest"
|
|
12914
13015
|
});
|
|
12915
13016
|
}, [highlightedIndex, isMobile2, isOpen]);
|
|
12916
|
-
|
|
13017
|
+
React49.useEffect(() => {
|
|
12917
13018
|
if (isOpen) return;
|
|
12918
13019
|
setHighlightedIndex(-1);
|
|
12919
13020
|
}, [isOpen]);
|
|
12920
|
-
const focusTrigger =
|
|
13021
|
+
const focusTrigger = React49.useCallback(() => {
|
|
12921
13022
|
triggerRef.current?.focus();
|
|
12922
13023
|
}, []);
|
|
12923
|
-
const handleSelect =
|
|
13024
|
+
const handleSelect = React49.useCallback(
|
|
12924
13025
|
(option) => {
|
|
12925
13026
|
if (option.isDisabled || disabled) return;
|
|
12926
13027
|
onChange(option);
|
|
12927
13028
|
},
|
|
12928
13029
|
[disabled, onChange]
|
|
12929
13030
|
);
|
|
12930
|
-
const openMenu =
|
|
13031
|
+
const openMenu = React49.useCallback(
|
|
12931
13032
|
(targetIndex) => {
|
|
12932
13033
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(options);
|
|
12933
13034
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
12934
13035
|
},
|
|
12935
13036
|
[options, selectedIndex]
|
|
12936
13037
|
);
|
|
12937
|
-
const handleTriggerKeyDown =
|
|
13038
|
+
const handleTriggerKeyDown = React49.useCallback(
|
|
12938
13039
|
(event, onOpen) => {
|
|
12939
13040
|
if (disabled) return;
|
|
12940
13041
|
if (event.key === "ArrowDown") {
|
|
@@ -12959,7 +13060,7 @@ function useDesktopSelect({
|
|
|
12959
13060
|
},
|
|
12960
13061
|
[disabled, openMenu, options, selectedIndex]
|
|
12961
13062
|
);
|
|
12962
|
-
const handleMenuKeyDown =
|
|
13063
|
+
const handleMenuKeyDown = React49.useCallback(
|
|
12963
13064
|
(event, onClose) => {
|
|
12964
13065
|
if (event.key === "Escape") {
|
|
12965
13066
|
event.preventDefault();
|
|
@@ -13009,7 +13110,7 @@ function useDesktopSelect({
|
|
|
13009
13110
|
},
|
|
13010
13111
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
13011
13112
|
);
|
|
13012
|
-
const setOptionRef =
|
|
13113
|
+
const setOptionRef = React49.useCallback(
|
|
13013
13114
|
(index, node) => {
|
|
13014
13115
|
optionRefs.current[index] = node;
|
|
13015
13116
|
},
|
|
@@ -13029,23 +13130,23 @@ function useDesktopSelect({
|
|
|
13029
13130
|
}
|
|
13030
13131
|
|
|
13031
13132
|
// src/airbnb/select/useMobileSelectWheel.ts
|
|
13032
|
-
var
|
|
13133
|
+
var React50 = __toESM(require("react"), 1);
|
|
13033
13134
|
function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, disabled }) {
|
|
13034
|
-
const [pendingValue, setPendingValue] =
|
|
13135
|
+
const [pendingValue, setPendingValue] = React50.useState(
|
|
13035
13136
|
value ?? null
|
|
13036
13137
|
);
|
|
13037
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
13038
|
-
const mobileListRef =
|
|
13039
|
-
const scrollSettleTimeoutRef =
|
|
13040
|
-
const scrollAnimationFrameRef =
|
|
13041
|
-
const getTargetIndex =
|
|
13138
|
+
const [mobileScrollTop, setMobileScrollTop] = React50.useState(0);
|
|
13139
|
+
const mobileListRef = React50.useRef(null);
|
|
13140
|
+
const scrollSettleTimeoutRef = React50.useRef(null);
|
|
13141
|
+
const scrollAnimationFrameRef = React50.useRef(null);
|
|
13142
|
+
const getTargetIndex = React50.useCallback(
|
|
13042
13143
|
(targetValue) => {
|
|
13043
13144
|
const selectedIndex = getOptionIndex(options, targetValue);
|
|
13044
13145
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(options);
|
|
13045
13146
|
},
|
|
13046
13147
|
[options]
|
|
13047
13148
|
);
|
|
13048
|
-
const syncScrollPosition =
|
|
13149
|
+
const syncScrollPosition = React50.useCallback(
|
|
13049
13150
|
(targetValue, behavior = "instant") => {
|
|
13050
13151
|
const targetIndex = getTargetIndex(targetValue);
|
|
13051
13152
|
if (targetIndex < 0) return;
|
|
@@ -13064,27 +13165,27 @@ function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, dis
|
|
|
13064
13165
|
},
|
|
13065
13166
|
[getTargetIndex, options]
|
|
13066
13167
|
);
|
|
13067
|
-
const clearScrollSettleTimeout =
|
|
13168
|
+
const clearScrollSettleTimeout = React50.useCallback(() => {
|
|
13068
13169
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
13069
13170
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
13070
13171
|
scrollSettleTimeoutRef.current = null;
|
|
13071
13172
|
}, []);
|
|
13072
|
-
const clearScrollAnimationFrame =
|
|
13173
|
+
const clearScrollAnimationFrame = React50.useCallback(() => {
|
|
13073
13174
|
if (scrollAnimationFrameRef.current === null) return;
|
|
13074
13175
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
13075
13176
|
scrollAnimationFrameRef.current = null;
|
|
13076
13177
|
}, []);
|
|
13077
|
-
|
|
13178
|
+
React50.useEffect(
|
|
13078
13179
|
() => () => {
|
|
13079
13180
|
clearScrollSettleTimeout();
|
|
13080
13181
|
clearScrollAnimationFrame();
|
|
13081
13182
|
},
|
|
13082
13183
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
13083
13184
|
);
|
|
13084
|
-
|
|
13185
|
+
React50.useEffect(() => {
|
|
13085
13186
|
setPendingValue(value ?? null);
|
|
13086
13187
|
}, [value]);
|
|
13087
|
-
|
|
13188
|
+
React50.useLayoutEffect(() => {
|
|
13088
13189
|
if (!isMobile2 || !isOpen) return;
|
|
13089
13190
|
const frameId = window.requestAnimationFrame(() => {
|
|
13090
13191
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -13093,7 +13194,7 @@ function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, dis
|
|
|
13093
13194
|
window.cancelAnimationFrame(frameId);
|
|
13094
13195
|
};
|
|
13095
13196
|
}, [isMobile2, isOpen, syncScrollPosition, value]);
|
|
13096
|
-
const settleScroll =
|
|
13197
|
+
const settleScroll = React50.useCallback(() => {
|
|
13097
13198
|
if (!mobileListRef.current) return;
|
|
13098
13199
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
13099
13200
|
const nextOption = options[nextIndex];
|
|
@@ -13105,13 +13206,13 @@ function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, dis
|
|
|
13105
13206
|
}
|
|
13106
13207
|
setPendingValue(nextOption);
|
|
13107
13208
|
}, [options, pendingValue]);
|
|
13108
|
-
const scheduleScrollSettle =
|
|
13209
|
+
const scheduleScrollSettle = React50.useCallback(() => {
|
|
13109
13210
|
clearScrollSettleTimeout();
|
|
13110
13211
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
13111
13212
|
settleScroll();
|
|
13112
13213
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
13113
13214
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
13114
|
-
const handleScroll =
|
|
13215
|
+
const handleScroll = React50.useCallback(() => {
|
|
13115
13216
|
if (!mobileListRef.current) return;
|
|
13116
13217
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
13117
13218
|
clearScrollAnimationFrame();
|
|
@@ -13121,7 +13222,7 @@ function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, dis
|
|
|
13121
13222
|
});
|
|
13122
13223
|
scheduleScrollSettle();
|
|
13123
13224
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
13124
|
-
const focusOptionByIndex =
|
|
13225
|
+
const focusOptionByIndex = React50.useCallback(
|
|
13125
13226
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
13126
13227
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
13127
13228
|
const option = options[index];
|
|
@@ -13139,7 +13240,7 @@ function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, dis
|
|
|
13139
13240
|
},
|
|
13140
13241
|
[options, scheduleScrollSettle]
|
|
13141
13242
|
);
|
|
13142
|
-
const handleOptionClick =
|
|
13243
|
+
const handleOptionClick = React50.useCallback(
|
|
13143
13244
|
(option) => {
|
|
13144
13245
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
13145
13246
|
const optionIndex = getOptionIndex(options, option);
|
|
@@ -13148,7 +13249,7 @@ function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, dis
|
|
|
13148
13249
|
},
|
|
13149
13250
|
[disabled, focusOptionByIndex, options]
|
|
13150
13251
|
);
|
|
13151
|
-
const moveByStep =
|
|
13252
|
+
const moveByStep = React50.useCallback(
|
|
13152
13253
|
(step) => {
|
|
13153
13254
|
const currentIndex = getOptionIndex(options, pendingValue);
|
|
13154
13255
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex(options) : getLastEnabledOptionIndex(options);
|
|
@@ -13160,7 +13261,7 @@ function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, dis
|
|
|
13160
13261
|
},
|
|
13161
13262
|
[focusOptionByIndex, options, pendingValue]
|
|
13162
13263
|
);
|
|
13163
|
-
const moveToBoundary =
|
|
13264
|
+
const moveToBoundary = React50.useCallback(
|
|
13164
13265
|
(boundary) => {
|
|
13165
13266
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex(options) : getLastEnabledOptionIndex(options);
|
|
13166
13267
|
if (targetIndex >= 0) {
|
|
@@ -13169,7 +13270,7 @@ function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, dis
|
|
|
13169
13270
|
},
|
|
13170
13271
|
[focusOptionByIndex, options]
|
|
13171
13272
|
);
|
|
13172
|
-
const syncPendingValue =
|
|
13273
|
+
const syncPendingValue = React50.useCallback(
|
|
13173
13274
|
(nextValue) => {
|
|
13174
13275
|
const normalizedValue = nextValue ?? null;
|
|
13175
13276
|
const matchedIndex = getOptionIndex(options, normalizedValue);
|
|
@@ -13197,9 +13298,9 @@ function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, dis
|
|
|
13197
13298
|
}
|
|
13198
13299
|
|
|
13199
13300
|
// src/airbnb/select/useSelectIds.ts
|
|
13200
|
-
var
|
|
13301
|
+
var React51 = __toESM(require("react"), 1);
|
|
13201
13302
|
function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
13202
|
-
const reactId =
|
|
13303
|
+
const reactId = React51.useId().replace(/:/g, "");
|
|
13203
13304
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
13204
13305
|
const triggerId = `${baseId}-trigger`;
|
|
13205
13306
|
const labelId = `${baseId}-label`;
|
|
@@ -13209,7 +13310,7 @@ function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
|
13209
13310
|
const listboxId = `${baseId}-listbox`;
|
|
13210
13311
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
13211
13312
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
13212
|
-
const getOptionId2 =
|
|
13313
|
+
const getOptionId2 = React51.useCallback(
|
|
13213
13314
|
(index) => `${baseId}-option-${index}`,
|
|
13214
13315
|
[baseId]
|
|
13215
13316
|
);
|
|
@@ -13227,8 +13328,8 @@ function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
|
|
|
13227
13328
|
}
|
|
13228
13329
|
|
|
13229
13330
|
// src/airbnb/select/Select.tsx
|
|
13230
|
-
var
|
|
13231
|
-
var AirbnbSelect =
|
|
13331
|
+
var import_jsx_runtime152 = require("react/jsx-runtime");
|
|
13332
|
+
var AirbnbSelect = React52.forwardRef(function AirbnbSelect2({
|
|
13232
13333
|
options = [],
|
|
13233
13334
|
value,
|
|
13234
13335
|
onChange,
|
|
@@ -13255,8 +13356,8 @@ var AirbnbSelect = React51.forwardRef(function AirbnbSelect2({
|
|
|
13255
13356
|
noOptionsMessage
|
|
13256
13357
|
}, ref) {
|
|
13257
13358
|
const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
|
|
13258
|
-
const [isOpen, setIsOpen] =
|
|
13259
|
-
const containerRef =
|
|
13359
|
+
const [isOpen, setIsOpen] = React52.useState(false);
|
|
13360
|
+
const containerRef = React52.useRef(null);
|
|
13260
13361
|
const hasValue = Boolean(value);
|
|
13261
13362
|
const helperText = placeholder ?? label;
|
|
13262
13363
|
const shouldDescribeHelperText = !hasValue && helperText !== label;
|
|
@@ -13317,12 +13418,12 @@ var AirbnbSelect = React51.forwardRef(function AirbnbSelect2({
|
|
|
13317
13418
|
onOutsideClick: () => setIsOpen(false),
|
|
13318
13419
|
isDisabled: !isOpen || isMobile2
|
|
13319
13420
|
});
|
|
13320
|
-
|
|
13421
|
+
React52.useEffect(() => {
|
|
13321
13422
|
if (isBlocked) {
|
|
13322
13423
|
setIsOpen(false);
|
|
13323
13424
|
}
|
|
13324
13425
|
}, [isBlocked]);
|
|
13325
|
-
|
|
13426
|
+
React52.useEffect(
|
|
13326
13427
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
13327
13428
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
13328
13429
|
return;
|
|
@@ -13334,7 +13435,7 @@ var AirbnbSelect = React51.forwardRef(function AirbnbSelect2({
|
|
|
13334
13435
|
},
|
|
13335
13436
|
[onChange, options, value]
|
|
13336
13437
|
);
|
|
13337
|
-
const handleMobileOpenChange =
|
|
13438
|
+
const handleMobileOpenChange = React52.useCallback(
|
|
13338
13439
|
(nextOpen) => {
|
|
13339
13440
|
if (isBlocked && nextOpen) return;
|
|
13340
13441
|
setIsOpen(nextOpen);
|
|
@@ -13345,7 +13446,7 @@ var AirbnbSelect = React51.forwardRef(function AirbnbSelect2({
|
|
|
13345
13446
|
},
|
|
13346
13447
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
13347
13448
|
);
|
|
13348
|
-
const handleMobileDone =
|
|
13449
|
+
const handleMobileDone = React52.useCallback(() => {
|
|
13349
13450
|
if (isBlocked) return;
|
|
13350
13451
|
const finalOption = pendingValue;
|
|
13351
13452
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -13354,7 +13455,7 @@ var AirbnbSelect = React51.forwardRef(function AirbnbSelect2({
|
|
|
13354
13455
|
setIsOpen(false);
|
|
13355
13456
|
focusTrigger();
|
|
13356
13457
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
13357
|
-
const handleTriggerClick =
|
|
13458
|
+
const handleTriggerClick = React52.useCallback(() => {
|
|
13358
13459
|
if (isBlocked) return;
|
|
13359
13460
|
setIsOpen((prev) => {
|
|
13360
13461
|
const nextOpen = !prev;
|
|
@@ -13407,13 +13508,13 @@ var AirbnbSelect = React51.forwardRef(function AirbnbSelect2({
|
|
|
13407
13508
|
handleMobileOpenChange(false);
|
|
13408
13509
|
}
|
|
13409
13510
|
};
|
|
13410
|
-
return /* @__PURE__ */ (0,
|
|
13511
|
+
return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
|
|
13411
13512
|
"div",
|
|
13412
13513
|
{
|
|
13413
13514
|
ref: containerRef,
|
|
13414
13515
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
13415
13516
|
children: [
|
|
13416
|
-
name && /* @__PURE__ */ (0,
|
|
13517
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
13417
13518
|
renderTrigger ? renderTrigger({
|
|
13418
13519
|
id: triggerId,
|
|
13419
13520
|
open: isOpen,
|
|
@@ -13435,7 +13536,7 @@ var AirbnbSelect = React51.forwardRef(function AirbnbSelect2({
|
|
|
13435
13536
|
onClick: handleTriggerClick,
|
|
13436
13537
|
onKeyDown: handleRootTriggerKeyDown,
|
|
13437
13538
|
onBlur
|
|
13438
|
-
}) : /* @__PURE__ */ (0,
|
|
13539
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
|
|
13439
13540
|
SelectTrigger2,
|
|
13440
13541
|
{
|
|
13441
13542
|
id: triggerId,
|
|
@@ -13463,7 +13564,7 @@ var AirbnbSelect = React51.forwardRef(function AirbnbSelect2({
|
|
|
13463
13564
|
onBlur
|
|
13464
13565
|
}
|
|
13465
13566
|
),
|
|
13466
|
-
isMobile2 ? /* @__PURE__ */ (0,
|
|
13567
|
+
isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
|
|
13467
13568
|
SelectMobileContent,
|
|
13468
13569
|
{
|
|
13469
13570
|
open: isOpen,
|
|
@@ -13488,7 +13589,7 @@ var AirbnbSelect = React51.forwardRef(function AirbnbSelect2({
|
|
|
13488
13589
|
getOptionId: getOptionId2,
|
|
13489
13590
|
noOptionsMessage
|
|
13490
13591
|
}
|
|
13491
|
-
) : /* @__PURE__ */ (0,
|
|
13592
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
|
|
13492
13593
|
SelectDesktopContent,
|
|
13493
13594
|
{
|
|
13494
13595
|
isOpen,
|
|
@@ -13522,13 +13623,13 @@ var AirbnbSelect = React51.forwardRef(function AirbnbSelect2({
|
|
|
13522
13623
|
});
|
|
13523
13624
|
|
|
13524
13625
|
// src/airbnb/phone-field/PhoneField.tsx
|
|
13525
|
-
var
|
|
13626
|
+
var import_jsx_runtime153 = require("react/jsx-runtime");
|
|
13526
13627
|
function formatPhoneCodeOptionLabel(option) {
|
|
13527
13628
|
const label = String(option.label);
|
|
13528
13629
|
const value = String(option.value);
|
|
13529
13630
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
13530
13631
|
}
|
|
13531
|
-
var PhoneField =
|
|
13632
|
+
var PhoneField = React53.forwardRef(
|
|
13532
13633
|
({
|
|
13533
13634
|
variant = "default",
|
|
13534
13635
|
label,
|
|
@@ -13552,8 +13653,8 @@ var PhoneField = React52.forwardRef(
|
|
|
13552
13653
|
mobileTitle,
|
|
13553
13654
|
codePlaceholder = "+00"
|
|
13554
13655
|
}, ref) => {
|
|
13555
|
-
const inputId =
|
|
13556
|
-
const codeOptions =
|
|
13656
|
+
const inputId = React53.useId();
|
|
13657
|
+
const codeOptions = React53.useMemo(
|
|
13557
13658
|
() => options.map((option) => ({
|
|
13558
13659
|
value: option.value,
|
|
13559
13660
|
label: formatPhoneCodeOptionLabel(option),
|
|
@@ -13561,7 +13662,7 @@ var PhoneField = React52.forwardRef(
|
|
|
13561
13662
|
})),
|
|
13562
13663
|
[options]
|
|
13563
13664
|
);
|
|
13564
|
-
const selectedCodeOption =
|
|
13665
|
+
const selectedCodeOption = React53.useMemo(
|
|
13565
13666
|
() => codeOptions.find((option) => option.value === value?.code) ?? null,
|
|
13566
13667
|
[codeOptions, value?.code]
|
|
13567
13668
|
);
|
|
@@ -13569,9 +13670,9 @@ var PhoneField = React52.forwardRef(
|
|
|
13569
13670
|
const hasInvalidState = Boolean(error) || Boolean(invalid);
|
|
13570
13671
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
13571
13672
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
13572
|
-
return /* @__PURE__ */ (0,
|
|
13573
|
-
name && /* @__PURE__ */ (0,
|
|
13574
|
-
codeName && /* @__PURE__ */ (0,
|
|
13673
|
+
return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
13674
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
13675
|
+
codeName && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
|
|
13575
13676
|
"input",
|
|
13576
13677
|
{
|
|
13577
13678
|
type: "hidden",
|
|
@@ -13580,7 +13681,7 @@ var PhoneField = React52.forwardRef(
|
|
|
13580
13681
|
disabled
|
|
13581
13682
|
}
|
|
13582
13683
|
),
|
|
13583
|
-
numberName && /* @__PURE__ */ (0,
|
|
13684
|
+
numberName && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
|
|
13584
13685
|
"input",
|
|
13585
13686
|
{
|
|
13586
13687
|
type: "hidden",
|
|
@@ -13589,7 +13690,7 @@ var PhoneField = React52.forwardRef(
|
|
|
13589
13690
|
disabled
|
|
13590
13691
|
}
|
|
13591
13692
|
),
|
|
13592
|
-
topLabel && /* @__PURE__ */ (0,
|
|
13693
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
|
|
13593
13694
|
"label",
|
|
13594
13695
|
{
|
|
13595
13696
|
htmlFor: inputId,
|
|
@@ -13597,8 +13698,8 @@ var PhoneField = React52.forwardRef(
|
|
|
13597
13698
|
children: topLabel
|
|
13598
13699
|
}
|
|
13599
13700
|
),
|
|
13600
|
-
/* @__PURE__ */ (0,
|
|
13601
|
-
/* @__PURE__ */ (0,
|
|
13701
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex items-stretch", children: [
|
|
13702
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
|
|
13602
13703
|
AirbnbSelect,
|
|
13603
13704
|
{
|
|
13604
13705
|
ref,
|
|
@@ -13629,7 +13730,7 @@ var PhoneField = React52.forwardRef(
|
|
|
13629
13730
|
onClick,
|
|
13630
13731
|
onKeyDown,
|
|
13631
13732
|
valueLabel
|
|
13632
|
-
}) => /* @__PURE__ */ (0,
|
|
13733
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
|
|
13633
13734
|
"button",
|
|
13634
13735
|
{
|
|
13635
13736
|
id,
|
|
@@ -13651,8 +13752,8 @@ var PhoneField = React52.forwardRef(
|
|
|
13651
13752
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
13652
13753
|
),
|
|
13653
13754
|
children: [
|
|
13654
|
-
/* @__PURE__ */ (0,
|
|
13655
|
-
/* @__PURE__ */ (0,
|
|
13755
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { children: valueLabel ?? codePlaceholder }),
|
|
13756
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
|
|
13656
13757
|
import_lucide_react43.ChevronDown,
|
|
13657
13758
|
{
|
|
13658
13759
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
@@ -13664,7 +13765,7 @@ var PhoneField = React52.forwardRef(
|
|
|
13664
13765
|
)
|
|
13665
13766
|
}
|
|
13666
13767
|
),
|
|
13667
|
-
/* @__PURE__ */ (0,
|
|
13768
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
|
|
13668
13769
|
AirbnbInput,
|
|
13669
13770
|
{
|
|
13670
13771
|
id: inputId,
|
|
@@ -13696,23 +13797,23 @@ var PhoneField = React52.forwardRef(
|
|
|
13696
13797
|
}
|
|
13697
13798
|
)
|
|
13698
13799
|
] }),
|
|
13699
|
-
error && /* @__PURE__ */ (0,
|
|
13800
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(FieldErrorMessage, { message: error })
|
|
13700
13801
|
] });
|
|
13701
13802
|
}
|
|
13702
13803
|
);
|
|
13703
13804
|
PhoneField.displayName = "PhoneField";
|
|
13704
13805
|
|
|
13705
13806
|
// src/airbnb/search-input/SearchInput.tsx
|
|
13706
|
-
var
|
|
13807
|
+
var React54 = __toESM(require("react"), 1);
|
|
13707
13808
|
var import_react_i18next25 = require("react-i18next");
|
|
13708
13809
|
var import_lucide_react44 = require("lucide-react");
|
|
13709
|
-
var
|
|
13710
|
-
var AirbnbSearchInput =
|
|
13810
|
+
var import_jsx_runtime154 = require("react/jsx-runtime");
|
|
13811
|
+
var AirbnbSearchInput = React54.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
13711
13812
|
const { t } = (0, import_react_i18next25.useTranslation)();
|
|
13712
13813
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
13713
|
-
return /* @__PURE__ */ (0,
|
|
13714
|
-
/* @__PURE__ */ (0,
|
|
13715
|
-
/* @__PURE__ */ (0,
|
|
13814
|
+
return /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
13815
|
+
/* @__PURE__ */ (0, import_jsx_runtime154.jsx)(import_lucide_react44.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
|
|
13816
|
+
/* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
|
|
13716
13817
|
"input",
|
|
13717
13818
|
{
|
|
13718
13819
|
...props,
|
|
@@ -13731,13 +13832,13 @@ var AirbnbSearchInput = React53.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
13731
13832
|
)
|
|
13732
13833
|
}
|
|
13733
13834
|
),
|
|
13734
|
-
onReset && /* @__PURE__ */ (0,
|
|
13835
|
+
onReset && /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
|
|
13735
13836
|
Button,
|
|
13736
13837
|
{
|
|
13737
13838
|
variant: "ghost",
|
|
13738
13839
|
onClick: onReset,
|
|
13739
13840
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
13740
|
-
children: /* @__PURE__ */ (0,
|
|
13841
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(import_lucide_react44.X, { className: "h-5 w-5" })
|
|
13741
13842
|
}
|
|
13742
13843
|
)
|
|
13743
13844
|
] });
|
|
@@ -13745,12 +13846,12 @@ var AirbnbSearchInput = React53.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
13745
13846
|
AirbnbSearchInput.displayName = "SearchInput";
|
|
13746
13847
|
|
|
13747
13848
|
// src/dashboard/input/Input.tsx
|
|
13748
|
-
var
|
|
13849
|
+
var React55 = __toESM(require("react"), 1);
|
|
13749
13850
|
var import_lucide_react45 = require("lucide-react");
|
|
13750
13851
|
var import_react_i18next26 = require("react-i18next");
|
|
13751
13852
|
|
|
13752
13853
|
// src/dashboard/_fieldset/Fieldset.tsx
|
|
13753
|
-
var
|
|
13854
|
+
var import_jsx_runtime155 = require("react/jsx-runtime");
|
|
13754
13855
|
function Fieldset({
|
|
13755
13856
|
isActivated,
|
|
13756
13857
|
isFocused,
|
|
@@ -13770,8 +13871,8 @@ function Fieldset({
|
|
|
13770
13871
|
}) {
|
|
13771
13872
|
const showLegendText = Boolean(legend || typeof label === "string");
|
|
13772
13873
|
const raised = !isEmpty || isFocused;
|
|
13773
|
-
return /* @__PURE__ */ (0,
|
|
13774
|
-
/* @__PURE__ */ (0,
|
|
13874
|
+
return /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(import_jsx_runtime155.Fragment, { children: [
|
|
13875
|
+
/* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(
|
|
13775
13876
|
"div",
|
|
13776
13877
|
{
|
|
13777
13878
|
onClick,
|
|
@@ -13787,7 +13888,7 @@ function Fieldset({
|
|
|
13787
13888
|
labelClassName
|
|
13788
13889
|
),
|
|
13789
13890
|
children: [
|
|
13790
|
-
/* @__PURE__ */ (0,
|
|
13891
|
+
/* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
|
|
13791
13892
|
"label",
|
|
13792
13893
|
{
|
|
13793
13894
|
id: labelId,
|
|
@@ -13799,7 +13900,7 @@ function Fieldset({
|
|
|
13799
13900
|
children: label
|
|
13800
13901
|
}
|
|
13801
13902
|
),
|
|
13802
|
-
tooltip && /* @__PURE__ */ (0,
|
|
13903
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
|
|
13803
13904
|
HelpTooltip,
|
|
13804
13905
|
{
|
|
13805
13906
|
content: tooltip,
|
|
@@ -13810,7 +13911,7 @@ function Fieldset({
|
|
|
13810
13911
|
]
|
|
13811
13912
|
}
|
|
13812
13913
|
),
|
|
13813
|
-
/* @__PURE__ */ (0,
|
|
13914
|
+
/* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
|
|
13814
13915
|
"fieldset",
|
|
13815
13916
|
{
|
|
13816
13917
|
"aria-hidden": "true",
|
|
@@ -13822,7 +13923,7 @@ function Fieldset({
|
|
|
13822
13923
|
invalid && "border-[var(--error-message-color)]",
|
|
13823
13924
|
className
|
|
13824
13925
|
),
|
|
13825
|
-
children: /* @__PURE__ */ (0,
|
|
13926
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(
|
|
13826
13927
|
"legend",
|
|
13827
13928
|
{
|
|
13828
13929
|
className: cn(
|
|
@@ -13832,8 +13933,8 @@ function Fieldset({
|
|
|
13832
13933
|
!label && "w-0"
|
|
13833
13934
|
),
|
|
13834
13935
|
children: [
|
|
13835
|
-
showLegendText && /* @__PURE__ */ (0,
|
|
13836
|
-
tooltip && /* @__PURE__ */ (0,
|
|
13936
|
+
showLegendText && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "visible inline-block pr-[6px] text-[14px] font-medium opacity-0", children: legend || label }),
|
|
13937
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "visible inline-block w-[20px] opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "inline-block h-4 w-4" }) })
|
|
13837
13938
|
]
|
|
13838
13939
|
}
|
|
13839
13940
|
)
|
|
@@ -13843,7 +13944,7 @@ function Fieldset({
|
|
|
13843
13944
|
}
|
|
13844
13945
|
|
|
13845
13946
|
// src/dashboard/input/Input.tsx
|
|
13846
|
-
var
|
|
13947
|
+
var import_jsx_runtime156 = require("react/jsx-runtime");
|
|
13847
13948
|
var checkIfEmpty = ({
|
|
13848
13949
|
empty,
|
|
13849
13950
|
defaultValue,
|
|
@@ -13853,7 +13954,7 @@ var checkIfEmpty = ({
|
|
|
13853
13954
|
if (value === 0 || defaultValue === 0) return false;
|
|
13854
13955
|
return !value && !defaultValue;
|
|
13855
13956
|
};
|
|
13856
|
-
var DashboardInput =
|
|
13957
|
+
var DashboardInput = React55.forwardRef(
|
|
13857
13958
|
({
|
|
13858
13959
|
value,
|
|
13859
13960
|
defaultValue,
|
|
@@ -13892,14 +13993,14 @@ var DashboardInput = React54.forwardRef(
|
|
|
13892
13993
|
renderErrorMessage = true,
|
|
13893
13994
|
...props
|
|
13894
13995
|
}, ref) => {
|
|
13895
|
-
const generatedId =
|
|
13996
|
+
const generatedId = React55.useId();
|
|
13896
13997
|
const inputId = id ?? name ?? generatedId;
|
|
13897
13998
|
const errorId = `${inputId}-error`;
|
|
13898
13999
|
const { t } = (0, import_react_i18next26.useTranslation)();
|
|
13899
14000
|
const isEmpty = checkIfEmpty({ empty, value, defaultValue });
|
|
13900
|
-
const [inputType, setInputType] =
|
|
13901
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
13902
|
-
const [isFocused, setIsFocused] =
|
|
14001
|
+
const [inputType, setInputType] = React55.useState(type);
|
|
14002
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React55.useState(false);
|
|
14003
|
+
const [isFocused, setIsFocused] = React55.useState(false);
|
|
13903
14004
|
const prevInputType = usePrevious(inputType);
|
|
13904
14005
|
const isPasswordReveal = (prevInputType === "password" || type === "password") && !isEmpty;
|
|
13905
14006
|
const hasInvalidState = Boolean(invalid) || Boolean(error) && error !== "NONE";
|
|
@@ -13914,7 +14015,7 @@ var DashboardInput = React54.forwardRef(
|
|
|
13914
14015
|
setIsPasswordRevealed(true);
|
|
13915
14016
|
}
|
|
13916
14017
|
};
|
|
13917
|
-
|
|
14018
|
+
React55.useEffect(() => {
|
|
13918
14019
|
setInputType(type);
|
|
13919
14020
|
}, [type]);
|
|
13920
14021
|
const handleChange = (event) => {
|
|
@@ -13936,7 +14037,7 @@ var DashboardInput = React54.forwardRef(
|
|
|
13936
14037
|
};
|
|
13937
14038
|
const showRightPaddingForReset = Boolean(onReset);
|
|
13938
14039
|
const showRightPaddingForReveal = isPasswordReveal;
|
|
13939
|
-
return /* @__PURE__ */ (0,
|
|
14040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
|
|
13940
14041
|
"div",
|
|
13941
14042
|
{
|
|
13942
14043
|
className: cn(
|
|
@@ -13948,7 +14049,7 @@ var DashboardInput = React54.forwardRef(
|
|
|
13948
14049
|
),
|
|
13949
14050
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
13950
14051
|
children: [
|
|
13951
|
-
topLabel && /* @__PURE__ */ (0,
|
|
14052
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
|
|
13952
14053
|
"label",
|
|
13953
14054
|
{
|
|
13954
14055
|
htmlFor: inputId,
|
|
@@ -13956,7 +14057,7 @@ var DashboardInput = React54.forwardRef(
|
|
|
13956
14057
|
children: topLabel
|
|
13957
14058
|
}
|
|
13958
14059
|
),
|
|
13959
|
-
/* @__PURE__ */ (0,
|
|
14060
|
+
/* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
|
|
13960
14061
|
"div",
|
|
13961
14062
|
{
|
|
13962
14063
|
className: cn(
|
|
@@ -13965,8 +14066,8 @@ var DashboardInput = React54.forwardRef(
|
|
|
13965
14066
|
fieldClassName
|
|
13966
14067
|
),
|
|
13967
14068
|
children: [
|
|
13968
|
-
/* @__PURE__ */ (0,
|
|
13969
|
-
/* @__PURE__ */ (0,
|
|
14069
|
+
/* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { className: cn("relative w-full cursor-text", contentClassName), children: [
|
|
14070
|
+
/* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
|
|
13970
14071
|
Fieldset,
|
|
13971
14072
|
{
|
|
13972
14073
|
isFocused: isFocused && !readOnly,
|
|
@@ -13987,8 +14088,8 @@ var DashboardInput = React54.forwardRef(
|
|
|
13987
14088
|
})
|
|
13988
14089
|
}
|
|
13989
14090
|
),
|
|
13990
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
13991
|
-
/* @__PURE__ */ (0,
|
|
14091
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
14092
|
+
/* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
|
|
13992
14093
|
"input",
|
|
13993
14094
|
{
|
|
13994
14095
|
...props,
|
|
@@ -14025,9 +14126,9 @@ var DashboardInput = React54.forwardRef(
|
|
|
14025
14126
|
)
|
|
14026
14127
|
}
|
|
14027
14128
|
),
|
|
14028
|
-
sign && /* @__PURE__ */ (0,
|
|
14029
|
-
trailingAdornment && /* @__PURE__ */ (0,
|
|
14030
|
-
onReset && !isEmpty && /* @__PURE__ */ (0,
|
|
14129
|
+
sign && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center text-[18px] font-medium leading-6 text-[var(--chekin-color-brand-navy)]", children: sign }),
|
|
14130
|
+
trailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
|
|
14131
|
+
onReset && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
|
|
14031
14132
|
"button",
|
|
14032
14133
|
{
|
|
14033
14134
|
type: "button",
|
|
@@ -14035,17 +14136,17 @@ var DashboardInput = React54.forwardRef(
|
|
|
14035
14136
|
disabled,
|
|
14036
14137
|
className: "absolute right-0 top-0 flex h-full w-10 items-center justify-center border-0 bg-transparent p-0 text-[#9696b9] hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
|
|
14037
14138
|
"aria-label": "Reset",
|
|
14038
|
-
children: /* @__PURE__ */ (0,
|
|
14139
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_lucide_react45.X, { size: 14 })
|
|
14039
14140
|
}
|
|
14040
14141
|
),
|
|
14041
|
-
isPasswordReveal && /* @__PURE__ */ (0,
|
|
14142
|
+
isPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
|
|
14042
14143
|
"button",
|
|
14043
14144
|
{
|
|
14044
14145
|
type: "button",
|
|
14045
14146
|
onClick: togglePasswordReveal,
|
|
14046
14147
|
className: "absolute right-[14px] top-[18px] flex h-[13px] w-[21px] cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:opacity-85",
|
|
14047
14148
|
"aria-label": isPasswordRevealed ? "Hide password" : "Show password",
|
|
14048
|
-
children: /* @__PURE__ */ (0,
|
|
14149
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
|
|
14049
14150
|
import_lucide_react45.Eye,
|
|
14050
14151
|
{
|
|
14051
14152
|
size: 20,
|
|
@@ -14057,32 +14158,32 @@ var DashboardInput = React54.forwardRef(
|
|
|
14057
14158
|
}
|
|
14058
14159
|
)
|
|
14059
14160
|
] }),
|
|
14060
|
-
type === "number" && showNumberButtons && /* @__PURE__ */ (0,
|
|
14061
|
-
/* @__PURE__ */ (0,
|
|
14161
|
+
type === "number" && showNumberButtons && /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { className: "absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
|
|
14162
|
+
/* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
|
|
14062
14163
|
"button",
|
|
14063
14164
|
{
|
|
14064
14165
|
type: "button",
|
|
14065
14166
|
onClick: onDecrement,
|
|
14066
14167
|
className: "mr-2 inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
|
|
14067
14168
|
"aria-label": "Decrement",
|
|
14068
|
-
children: /* @__PURE__ */ (0,
|
|
14169
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_lucide_react45.Minus, { size: 16, strokeWidth: 3, "aria-hidden": true })
|
|
14069
14170
|
}
|
|
14070
14171
|
),
|
|
14071
|
-
/* @__PURE__ */ (0,
|
|
14172
|
+
/* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
|
|
14072
14173
|
"button",
|
|
14073
14174
|
{
|
|
14074
14175
|
type: "button",
|
|
14075
14176
|
onClick: onIncrement,
|
|
14076
14177
|
className: "inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
|
|
14077
14178
|
"aria-label": "Increment",
|
|
14078
|
-
children: /* @__PURE__ */ (0,
|
|
14179
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_lucide_react45.Plus, { size: 16, strokeWidth: 3, "aria-hidden": true })
|
|
14079
14180
|
}
|
|
14080
14181
|
)
|
|
14081
14182
|
] })
|
|
14082
14183
|
]
|
|
14083
14184
|
}
|
|
14084
14185
|
),
|
|
14085
|
-
!errorMessage && optional && /* @__PURE__ */ (0,
|
|
14186
|
+
!errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
|
|
14086
14187
|
"span",
|
|
14087
14188
|
{
|
|
14088
14189
|
"data-testid": `${name}-optional`,
|
|
@@ -14090,8 +14191,8 @@ var DashboardInput = React54.forwardRef(
|
|
|
14090
14191
|
children: typeof optional === "string" ? optional : t("optional")
|
|
14091
14192
|
}
|
|
14092
14193
|
),
|
|
14093
|
-
!errorMessage && helperText && /* @__PURE__ */ (0,
|
|
14094
|
-
errorMessage && renderErrorMessage && /* @__PURE__ */ (0,
|
|
14194
|
+
!errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
14195
|
+
errorMessage && renderErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
|
|
14095
14196
|
FieldErrorMessage,
|
|
14096
14197
|
{
|
|
14097
14198
|
id: errorId,
|
|
@@ -14109,12 +14210,12 @@ var DashboardInput = React54.forwardRef(
|
|
|
14109
14210
|
DashboardInput.displayName = "DashboardInput";
|
|
14110
14211
|
|
|
14111
14212
|
// src/dashboard/select/Select.tsx
|
|
14112
|
-
var
|
|
14213
|
+
var React59 = __toESM(require("react"), 1);
|
|
14113
14214
|
var import_react_i18next30 = require("react-i18next");
|
|
14114
14215
|
|
|
14115
14216
|
// src/dashboard/_select-internals/SelectFieldShell.tsx
|
|
14116
14217
|
var import_react_i18next27 = require("react-i18next");
|
|
14117
|
-
var
|
|
14218
|
+
var import_jsx_runtime157 = require("react/jsx-runtime");
|
|
14118
14219
|
function SelectFieldShell({
|
|
14119
14220
|
containerRef,
|
|
14120
14221
|
className,
|
|
@@ -14135,7 +14236,7 @@ function SelectFieldShell({
|
|
|
14135
14236
|
}) {
|
|
14136
14237
|
const { t } = (0, import_react_i18next27.useTranslation)();
|
|
14137
14238
|
const wrapperWidth = toCssSize(width);
|
|
14138
|
-
return /* @__PURE__ */ (0,
|
|
14239
|
+
return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
|
|
14139
14240
|
"div",
|
|
14140
14241
|
{
|
|
14141
14242
|
ref: containerRef,
|
|
@@ -14148,9 +14249,9 @@ function SelectFieldShell({
|
|
|
14148
14249
|
),
|
|
14149
14250
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
14150
14251
|
children: [
|
|
14151
|
-
name && /* @__PURE__ */ (0,
|
|
14152
|
-
/* @__PURE__ */ (0,
|
|
14153
|
-
topLabel && /* @__PURE__ */ (0,
|
|
14252
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("input", { type: "hidden", name, value: hiddenValue ?? "" }),
|
|
14253
|
+
/* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
|
|
14254
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
|
|
14154
14255
|
"label",
|
|
14155
14256
|
{
|
|
14156
14257
|
htmlFor: triggerId,
|
|
@@ -14158,10 +14259,10 @@ function SelectFieldShell({
|
|
|
14158
14259
|
children: topLabel
|
|
14159
14260
|
}
|
|
14160
14261
|
),
|
|
14161
|
-
/* @__PURE__ */ (0,
|
|
14162
|
-
!errorMessage && optional && /* @__PURE__ */ (0,
|
|
14163
|
-
!errorMessage && helperText && /* @__PURE__ */ (0,
|
|
14164
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
14262
|
+
/* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "relative w-full", children }),
|
|
14263
|
+
!errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
14264
|
+
!errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
14265
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
|
|
14165
14266
|
FieldErrorMessage,
|
|
14166
14267
|
{
|
|
14167
14268
|
id: errorId,
|
|
@@ -14207,7 +14308,7 @@ function isOptionSelected(option, selectedValue, selectedValues) {
|
|
|
14207
14308
|
}
|
|
14208
14309
|
|
|
14209
14310
|
// src/dashboard/_select-internals/SelectMenu.tsx
|
|
14210
|
-
var
|
|
14311
|
+
var import_jsx_runtime158 = require("react/jsx-runtime");
|
|
14211
14312
|
function SelectMenu({
|
|
14212
14313
|
id,
|
|
14213
14314
|
options,
|
|
@@ -14232,7 +14333,7 @@ function SelectMenu({
|
|
|
14232
14333
|
const { t } = (0, import_react_i18next28.useTranslation)();
|
|
14233
14334
|
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14234
14335
|
const hasOptions = options.length > 0;
|
|
14235
|
-
return /* @__PURE__ */ (0,
|
|
14336
|
+
return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
|
|
14236
14337
|
"div",
|
|
14237
14338
|
{
|
|
14238
14339
|
id,
|
|
@@ -14249,13 +14350,13 @@ function SelectMenu({
|
|
|
14249
14350
|
menuClassName
|
|
14250
14351
|
),
|
|
14251
14352
|
children: [
|
|
14252
|
-
!hasOptions && (emptyContent ?? /* @__PURE__ */ (0,
|
|
14353
|
+
!hasOptions && (emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage })),
|
|
14253
14354
|
options.map((option, index) => {
|
|
14254
14355
|
const isSelected = isOptionSelected(option, selectedValue, selectedValues);
|
|
14255
14356
|
const isHighlighted = index === highlightedIndex;
|
|
14256
14357
|
const optionKey = `${String(option.value)}-${index}`;
|
|
14257
14358
|
const isOptionDisabled = Boolean(disabled || option.isDisabled);
|
|
14258
|
-
return /* @__PURE__ */ (0,
|
|
14359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
|
|
14259
14360
|
"button",
|
|
14260
14361
|
{
|
|
14261
14362
|
id: getOptionId2(index),
|
|
@@ -14278,8 +14379,8 @@ function SelectMenu({
|
|
|
14278
14379
|
isOptionDisabled && "cursor-default opacity-30"
|
|
14279
14380
|
),
|
|
14280
14381
|
children: [
|
|
14281
|
-
/* @__PURE__ */ (0,
|
|
14282
|
-
option.description && /* @__PURE__ */ (0,
|
|
14382
|
+
/* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "block break-words", children: option.label }),
|
|
14383
|
+
option.description && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
|
|
14283
14384
|
]
|
|
14284
14385
|
},
|
|
14285
14386
|
optionKey
|
|
@@ -14293,7 +14394,7 @@ function SelectMenu({
|
|
|
14293
14394
|
|
|
14294
14395
|
// src/dashboard/_select-internals/SelectMenuPanel.tsx
|
|
14295
14396
|
var import_react_i18next29 = require("react-i18next");
|
|
14296
|
-
var
|
|
14397
|
+
var import_jsx_runtime159 = require("react/jsx-runtime");
|
|
14297
14398
|
function SelectMenuPanel({
|
|
14298
14399
|
isOpen,
|
|
14299
14400
|
isMobile: isMobile2,
|
|
@@ -14311,23 +14412,23 @@ function SelectMenuPanel({
|
|
|
14311
14412
|
const fallbackTitle = t("select_option");
|
|
14312
14413
|
const titleText = typeof title === "string" || typeof title === "number" ? String(title) : fallbackTitle;
|
|
14313
14414
|
const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : titleText;
|
|
14314
|
-
return /* @__PURE__ */ (0,
|
|
14415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14315
14416
|
Drawer,
|
|
14316
14417
|
{
|
|
14317
14418
|
open: isOpen,
|
|
14318
14419
|
onOpenChange: (next) => {
|
|
14319
14420
|
if (!next) onClose();
|
|
14320
14421
|
},
|
|
14321
|
-
children: /* @__PURE__ */ (0,
|
|
14422
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
|
|
14322
14423
|
DrawerContent,
|
|
14323
14424
|
{
|
|
14324
14425
|
onClose,
|
|
14325
14426
|
lockScroll: false,
|
|
14326
14427
|
className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
|
|
14327
14428
|
children: [
|
|
14328
|
-
/* @__PURE__ */ (0,
|
|
14329
|
-
/* @__PURE__ */ (0,
|
|
14330
|
-
/* @__PURE__ */ (0,
|
|
14429
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(DrawerTitle, { className: "sr-only", children: titleText }),
|
|
14430
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(DrawerDescription, { className: "sr-only", children: descriptionText }),
|
|
14431
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14331
14432
|
"div",
|
|
14332
14433
|
{
|
|
14333
14434
|
className: cn(
|
|
@@ -14343,7 +14444,7 @@ function SelectMenuPanel({
|
|
|
14343
14444
|
}
|
|
14344
14445
|
);
|
|
14345
14446
|
}
|
|
14346
|
-
return /* @__PURE__ */ (0,
|
|
14447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14347
14448
|
"div",
|
|
14348
14449
|
{
|
|
14349
14450
|
className: cn(
|
|
@@ -14356,7 +14457,7 @@ function SelectMenuPanel({
|
|
|
14356
14457
|
}
|
|
14357
14458
|
|
|
14358
14459
|
// src/dashboard/_select-internals/SelectSearchInput.tsx
|
|
14359
|
-
var
|
|
14460
|
+
var import_jsx_runtime160 = require("react/jsx-runtime");
|
|
14360
14461
|
function SelectSearchInput({
|
|
14361
14462
|
inputRef,
|
|
14362
14463
|
value,
|
|
@@ -14366,7 +14467,7 @@ function SelectSearchInput({
|
|
|
14366
14467
|
onChange,
|
|
14367
14468
|
onKeyDown
|
|
14368
14469
|
}) {
|
|
14369
|
-
return /* @__PURE__ */ (0,
|
|
14470
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
|
|
14370
14471
|
"input",
|
|
14371
14472
|
{
|
|
14372
14473
|
ref: inputRef,
|
|
@@ -14385,7 +14486,7 @@ function SelectSearchInput({
|
|
|
14385
14486
|
|
|
14386
14487
|
// src/dashboard/_select-internals/SelectTrigger.tsx
|
|
14387
14488
|
var import_lucide_react46 = require("lucide-react");
|
|
14388
|
-
var
|
|
14489
|
+
var import_jsx_runtime161 = require("react/jsx-runtime");
|
|
14389
14490
|
function SelectTrigger3({
|
|
14390
14491
|
triggerRef,
|
|
14391
14492
|
triggerId,
|
|
@@ -14406,7 +14507,7 @@ function SelectTrigger3({
|
|
|
14406
14507
|
onBlur
|
|
14407
14508
|
}) {
|
|
14408
14509
|
const isEmpty = !hasValue;
|
|
14409
|
-
return /* @__PURE__ */ (0,
|
|
14510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
|
|
14410
14511
|
"button",
|
|
14411
14512
|
{
|
|
14412
14513
|
id: triggerId,
|
|
@@ -14430,10 +14531,10 @@ function SelectTrigger3({
|
|
|
14430
14531
|
loading && "cursor-progress"
|
|
14431
14532
|
),
|
|
14432
14533
|
children: [
|
|
14433
|
-
/* @__PURE__ */ (0,
|
|
14434
|
-
/* @__PURE__ */ (0,
|
|
14435
|
-
loading && /* @__PURE__ */ (0,
|
|
14436
|
-
/* @__PURE__ */ (0,
|
|
14534
|
+
/* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
|
|
14535
|
+
/* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
14536
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
14537
|
+
/* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
|
|
14437
14538
|
import_lucide_react46.ChevronDown,
|
|
14438
14539
|
{
|
|
14439
14540
|
size: 16,
|
|
@@ -14450,14 +14551,14 @@ function SelectTrigger3({
|
|
|
14450
14551
|
}
|
|
14451
14552
|
|
|
14452
14553
|
// src/dashboard/_select-internals/useSelectIds.ts
|
|
14453
|
-
var
|
|
14554
|
+
var React56 = __toESM(require("react"), 1);
|
|
14454
14555
|
function useSelectIds2({
|
|
14455
14556
|
name,
|
|
14456
14557
|
hasValue,
|
|
14457
14558
|
error,
|
|
14458
14559
|
hideErrorMessage
|
|
14459
14560
|
}) {
|
|
14460
|
-
const reactId =
|
|
14561
|
+
const reactId = React56.useId().replace(/:/g, "");
|
|
14461
14562
|
const baseId = name ? `dash-select-${name}` : `dash-select-${reactId}`;
|
|
14462
14563
|
const triggerId = `${baseId}-trigger`;
|
|
14463
14564
|
const labelId = `${baseId}-label`;
|
|
@@ -14467,7 +14568,7 @@ function useSelectIds2({
|
|
|
14467
14568
|
const listboxId = `${baseId}-listbox`;
|
|
14468
14569
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
14469
14570
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
14470
|
-
const getOptionId2 =
|
|
14571
|
+
const getOptionId2 = React56.useCallback(
|
|
14471
14572
|
(index) => `${baseId}-option-${index}`,
|
|
14472
14573
|
[baseId]
|
|
14473
14574
|
);
|
|
@@ -14485,21 +14586,21 @@ function useSelectIds2({
|
|
|
14485
14586
|
}
|
|
14486
14587
|
|
|
14487
14588
|
// src/dashboard/_select-internals/useSelectMenuState.ts
|
|
14488
|
-
var
|
|
14589
|
+
var React57 = __toESM(require("react"), 1);
|
|
14489
14590
|
function useSelectMenuState({
|
|
14490
14591
|
isBlocked,
|
|
14491
14592
|
isMobile: isMobile2,
|
|
14492
14593
|
onOutsideClick
|
|
14493
14594
|
}) {
|
|
14494
|
-
const containerRef =
|
|
14495
|
-
const [isOpen, setIsOpen] =
|
|
14496
|
-
const openMenu =
|
|
14595
|
+
const containerRef = React57.useRef(null);
|
|
14596
|
+
const [isOpen, setIsOpen] = React57.useState(false);
|
|
14597
|
+
const openMenu = React57.useCallback(() => {
|
|
14497
14598
|
setIsOpen(true);
|
|
14498
14599
|
}, []);
|
|
14499
|
-
const closeMenu =
|
|
14600
|
+
const closeMenu = React57.useCallback(() => {
|
|
14500
14601
|
setIsOpen(false);
|
|
14501
14602
|
}, []);
|
|
14502
|
-
const toggleMenu =
|
|
14603
|
+
const toggleMenu = React57.useCallback(() => {
|
|
14503
14604
|
if (isBlocked) return;
|
|
14504
14605
|
setIsOpen((prev) => !prev);
|
|
14505
14606
|
}, [isBlocked]);
|
|
@@ -14511,30 +14612,30 @@ function useSelectMenuState({
|
|
|
14511
14612
|
},
|
|
14512
14613
|
isDisabled: !isOpen || isMobile2
|
|
14513
14614
|
});
|
|
14514
|
-
|
|
14615
|
+
React57.useEffect(() => {
|
|
14515
14616
|
if (isBlocked) setIsOpen(false);
|
|
14516
14617
|
}, [isBlocked]);
|
|
14517
14618
|
return { containerRef, isOpen, openMenu, closeMenu, toggleMenu, setIsOpen };
|
|
14518
14619
|
}
|
|
14519
14620
|
|
|
14520
14621
|
// src/dashboard/_select-internals/useSelectSearch.ts
|
|
14521
|
-
var
|
|
14622
|
+
var React58 = __toESM(require("react"), 1);
|
|
14522
14623
|
function useSelectSearch({
|
|
14523
14624
|
options,
|
|
14524
14625
|
searchable = true,
|
|
14525
14626
|
filterOption = defaultFilterOption
|
|
14526
14627
|
}) {
|
|
14527
|
-
const [searchValue, setSearchValue] =
|
|
14528
|
-
const filteredOptions =
|
|
14628
|
+
const [searchValue, setSearchValue] = React58.useState("");
|
|
14629
|
+
const filteredOptions = React58.useMemo(() => {
|
|
14529
14630
|
if (!searchable || !searchValue) return options;
|
|
14530
14631
|
return options.filter((option) => filterOption(option, searchValue));
|
|
14531
14632
|
}, [options, searchable, searchValue, filterOption]);
|
|
14532
|
-
const clearSearch =
|
|
14633
|
+
const clearSearch = React58.useCallback(() => setSearchValue(""), []);
|
|
14533
14634
|
return { searchValue, setSearchValue, filteredOptions, clearSearch };
|
|
14534
14635
|
}
|
|
14535
14636
|
|
|
14536
14637
|
// src/dashboard/select/Select.tsx
|
|
14537
|
-
var
|
|
14638
|
+
var import_jsx_runtime162 = require("react/jsx-runtime");
|
|
14538
14639
|
function DashboardSelectInternal({
|
|
14539
14640
|
options = [],
|
|
14540
14641
|
value,
|
|
@@ -14563,11 +14664,11 @@ function DashboardSelectInternal({
|
|
|
14563
14664
|
filterOption,
|
|
14564
14665
|
helperText
|
|
14565
14666
|
}, ref) {
|
|
14566
|
-
const triggerRef =
|
|
14567
|
-
const searchInputRef =
|
|
14568
|
-
const listRef =
|
|
14569
|
-
const optionRefs =
|
|
14570
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
14667
|
+
const triggerRef = React59.useRef(null);
|
|
14668
|
+
const searchInputRef = React59.useRef(null);
|
|
14669
|
+
const listRef = React59.useRef(null);
|
|
14670
|
+
const optionRefs = React59.useRef([]);
|
|
14671
|
+
const [highlightedIndex, setHighlightedIndex] = React59.useState(-1);
|
|
14571
14672
|
const isMobile2 = useIsMobile();
|
|
14572
14673
|
const { t } = (0, import_react_i18next30.useTranslation)();
|
|
14573
14674
|
const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
|
|
@@ -14587,8 +14688,8 @@ function DashboardSelectInternal({
|
|
|
14587
14688
|
searchable,
|
|
14588
14689
|
filterOption
|
|
14589
14690
|
});
|
|
14590
|
-
|
|
14591
|
-
|
|
14691
|
+
React59.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
14692
|
+
React59.useEffect(() => {
|
|
14592
14693
|
if (!isOpen) {
|
|
14593
14694
|
setSearchValue("");
|
|
14594
14695
|
setHighlightedIndex(-1);
|
|
@@ -14603,11 +14704,11 @@ function DashboardSelectInternal({
|
|
|
14603
14704
|
return () => window.cancelAnimationFrame(frame);
|
|
14604
14705
|
}
|
|
14605
14706
|
}, [isOpen, filteredOptions, searchable, value, setSearchValue]);
|
|
14606
|
-
|
|
14707
|
+
React59.useEffect(() => {
|
|
14607
14708
|
if (!isOpen || highlightedIndex < 0) return;
|
|
14608
14709
|
optionRefs.current[highlightedIndex]?.scrollIntoView({ block: "nearest" });
|
|
14609
14710
|
}, [highlightedIndex, isOpen]);
|
|
14610
|
-
|
|
14711
|
+
React59.useEffect(
|
|
14611
14712
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
14612
14713
|
if (value?.value === void 0 || value.value === null || value.label !== "")
|
|
14613
14714
|
return;
|
|
@@ -14658,7 +14759,7 @@ function DashboardSelectInternal({
|
|
|
14658
14759
|
setIsOpen(false);
|
|
14659
14760
|
}
|
|
14660
14761
|
};
|
|
14661
|
-
return /* @__PURE__ */ (0,
|
|
14762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
|
|
14662
14763
|
SelectFieldShell,
|
|
14663
14764
|
{
|
|
14664
14765
|
containerRef,
|
|
@@ -14676,7 +14777,7 @@ function DashboardSelectInternal({
|
|
|
14676
14777
|
name,
|
|
14677
14778
|
hiddenValue: value ? String(value.value) : "",
|
|
14678
14779
|
children: [
|
|
14679
|
-
/* @__PURE__ */ (0,
|
|
14780
|
+
/* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
14680
14781
|
SelectTrigger3,
|
|
14681
14782
|
{
|
|
14682
14783
|
triggerRef,
|
|
@@ -14698,7 +14799,7 @@ function DashboardSelectInternal({
|
|
|
14698
14799
|
onBlur
|
|
14699
14800
|
}
|
|
14700
14801
|
),
|
|
14701
|
-
/* @__PURE__ */ (0,
|
|
14802
|
+
/* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
14702
14803
|
Fieldset,
|
|
14703
14804
|
{
|
|
14704
14805
|
isFocused: isOpen,
|
|
@@ -14715,7 +14816,7 @@ function DashboardSelectInternal({
|
|
|
14715
14816
|
onClick: !isBlocked ? toggleMenu : void 0
|
|
14716
14817
|
}
|
|
14717
14818
|
),
|
|
14718
|
-
/* @__PURE__ */ (0,
|
|
14819
|
+
/* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
|
|
14719
14820
|
SelectMenuPanel,
|
|
14720
14821
|
{
|
|
14721
14822
|
isOpen,
|
|
@@ -14725,7 +14826,7 @@ function DashboardSelectInternal({
|
|
|
14725
14826
|
className: dropdownClassName,
|
|
14726
14827
|
drawerClassName,
|
|
14727
14828
|
children: [
|
|
14728
|
-
searchable && /* @__PURE__ */ (0,
|
|
14829
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
14729
14830
|
SelectSearchInput,
|
|
14730
14831
|
{
|
|
14731
14832
|
inputRef: searchInputRef,
|
|
@@ -14737,7 +14838,7 @@ function DashboardSelectInternal({
|
|
|
14737
14838
|
onKeyDown: handleSearchKeyDown
|
|
14738
14839
|
}
|
|
14739
14840
|
),
|
|
14740
|
-
/* @__PURE__ */ (0,
|
|
14841
|
+
/* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
14741
14842
|
SelectMenu,
|
|
14742
14843
|
{
|
|
14743
14844
|
id: listboxId,
|
|
@@ -14765,19 +14866,19 @@ function DashboardSelectInternal({
|
|
|
14765
14866
|
}
|
|
14766
14867
|
);
|
|
14767
14868
|
}
|
|
14768
|
-
var DashboardSelect =
|
|
14869
|
+
var DashboardSelect = React59.forwardRef(
|
|
14769
14870
|
DashboardSelectInternal
|
|
14770
14871
|
);
|
|
14771
14872
|
|
|
14772
14873
|
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14773
|
-
var
|
|
14874
|
+
var React60 = __toESM(require("react"), 1);
|
|
14774
14875
|
var import_lucide_react48 = require("lucide-react");
|
|
14775
14876
|
var import_react_i18next32 = require("react-i18next");
|
|
14776
14877
|
|
|
14777
14878
|
// src/dashboard/multi-select/MultiSelectChip.tsx
|
|
14778
14879
|
var import_lucide_react47 = require("lucide-react");
|
|
14779
14880
|
var import_react_i18next31 = require("react-i18next");
|
|
14780
|
-
var
|
|
14881
|
+
var import_jsx_runtime163 = require("react/jsx-runtime");
|
|
14781
14882
|
function MultiSelectChip({
|
|
14782
14883
|
option,
|
|
14783
14884
|
readOnly,
|
|
@@ -14785,9 +14886,9 @@ function MultiSelectChip({
|
|
|
14785
14886
|
}) {
|
|
14786
14887
|
const { t } = (0, import_react_i18next31.useTranslation)();
|
|
14787
14888
|
const labelText = typeof option.label === "string" ? option.label : String(option.value);
|
|
14788
|
-
return /* @__PURE__ */ (0,
|
|
14789
|
-
/* @__PURE__ */ (0,
|
|
14790
|
-
!readOnly && /* @__PURE__ */ (0,
|
|
14889
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("span", { className: "inline-flex items-center gap-2 rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] py-[2px] pl-[10px] pr-1 text-[12px] font-medium text-[var(--chekin-color-brand-navy)]", children: [
|
|
14890
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
|
|
14891
|
+
!readOnly && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14791
14892
|
"button",
|
|
14792
14893
|
{
|
|
14793
14894
|
type: "button",
|
|
@@ -14797,14 +14898,14 @@ function MultiSelectChip({
|
|
|
14797
14898
|
},
|
|
14798
14899
|
className: "flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
|
|
14799
14900
|
"aria-label": t("remove_item", { label: labelText }),
|
|
14800
|
-
children: /* @__PURE__ */ (0,
|
|
14901
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_lucide_react47.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
14801
14902
|
}
|
|
14802
14903
|
)
|
|
14803
14904
|
] });
|
|
14804
14905
|
}
|
|
14805
14906
|
|
|
14806
14907
|
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14807
|
-
var
|
|
14908
|
+
var import_jsx_runtime164 = require("react/jsx-runtime");
|
|
14808
14909
|
var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
|
|
14809
14910
|
function DashboardMultiSelectInternal({
|
|
14810
14911
|
options = [],
|
|
@@ -14838,15 +14939,15 @@ function DashboardMultiSelectInternal({
|
|
|
14838
14939
|
formatCreateLabel = (input) => `Create "${input}"`,
|
|
14839
14940
|
isValidNewOption
|
|
14840
14941
|
}, ref) {
|
|
14841
|
-
const inputRef =
|
|
14842
|
-
const mobileSearchInputRef =
|
|
14843
|
-
const listRef =
|
|
14844
|
-
const optionRefs =
|
|
14845
|
-
const [isFocused, setIsFocused] =
|
|
14846
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
14942
|
+
const inputRef = React60.useRef(null);
|
|
14943
|
+
const mobileSearchInputRef = React60.useRef(null);
|
|
14944
|
+
const listRef = React60.useRef(null);
|
|
14945
|
+
const optionRefs = React60.useRef([]);
|
|
14946
|
+
const [isFocused, setIsFocused] = React60.useState(false);
|
|
14947
|
+
const [highlightedIndex, setHighlightedIndex] = React60.useState(-1);
|
|
14847
14948
|
const isMobile2 = useIsMobile();
|
|
14848
14949
|
const { t } = (0, import_react_i18next32.useTranslation)();
|
|
14849
|
-
const selectedValues =
|
|
14950
|
+
const selectedValues = React60.useMemo(() => value ?? [], [value]);
|
|
14850
14951
|
const hasValue = selectedValues.length > 0;
|
|
14851
14952
|
const isEmpty = !hasValue;
|
|
14852
14953
|
const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
|
|
@@ -14864,7 +14965,7 @@ function DashboardMultiSelectInternal({
|
|
|
14864
14965
|
filterOption
|
|
14865
14966
|
});
|
|
14866
14967
|
const trimmedSearch = searchValue.trim();
|
|
14867
|
-
const canCreateNewOption =
|
|
14968
|
+
const canCreateNewOption = React60.useMemo(() => {
|
|
14868
14969
|
if (!isCreatable || !trimmedSearch) return false;
|
|
14869
14970
|
if (isValidNewOption) return isValidNewOption(trimmedSearch, selectedValues, options);
|
|
14870
14971
|
const lower = trimmedSearch.toLowerCase();
|
|
@@ -14876,17 +14977,17 @@ function DashboardMultiSelectInternal({
|
|
|
14876
14977
|
);
|
|
14877
14978
|
return !existsInOptions && !existsInSelected;
|
|
14878
14979
|
}, [isCreatable, trimmedSearch, isValidNewOption, options, selectedValues]);
|
|
14879
|
-
|
|
14980
|
+
React60.useImperativeHandle(
|
|
14880
14981
|
ref,
|
|
14881
14982
|
() => containerRef.current
|
|
14882
14983
|
);
|
|
14883
|
-
|
|
14984
|
+
React60.useEffect(() => {
|
|
14884
14985
|
if (!isOpen) {
|
|
14885
14986
|
clearSearch();
|
|
14886
14987
|
setHighlightedIndex(-1);
|
|
14887
14988
|
}
|
|
14888
14989
|
}, [isOpen, clearSearch]);
|
|
14889
|
-
|
|
14990
|
+
React60.useEffect(() => {
|
|
14890
14991
|
if (!isOpen || filteredOptions.length === 0) {
|
|
14891
14992
|
setHighlightedIndex(-1);
|
|
14892
14993
|
return;
|
|
@@ -14896,7 +14997,7 @@ function DashboardMultiSelectInternal({
|
|
|
14896
14997
|
return getFirstEnabledOptionIndex2(filteredOptions);
|
|
14897
14998
|
});
|
|
14898
14999
|
}, [isOpen, filteredOptions]);
|
|
14899
|
-
|
|
15000
|
+
React60.useEffect(() => {
|
|
14900
15001
|
if (!isOpen || !isMobile2) return;
|
|
14901
15002
|
const frame = window.requestAnimationFrame(
|
|
14902
15003
|
() => mobileSearchInputRef.current?.focus()
|
|
@@ -14930,7 +15031,7 @@ function DashboardMultiSelectInternal({
|
|
|
14930
15031
|
onChange([]);
|
|
14931
15032
|
inputRef.current?.focus();
|
|
14932
15033
|
};
|
|
14933
|
-
const createOption =
|
|
15034
|
+
const createOption = React60.useCallback(() => {
|
|
14934
15035
|
if (!canCreateNewOption) return;
|
|
14935
15036
|
const newOption = onCreateOption?.(trimmedSearch) ?? { value: trimmedSearch, label: trimmedSearch };
|
|
14936
15037
|
onChange([...selectedValues, newOption]);
|
|
@@ -14999,7 +15100,7 @@ function DashboardMultiSelectInternal({
|
|
|
14999
15100
|
setIsFocused(false);
|
|
15000
15101
|
onBlur?.(event);
|
|
15001
15102
|
};
|
|
15002
|
-
return /* @__PURE__ */ (0,
|
|
15103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
|
|
15003
15104
|
SelectFieldShell,
|
|
15004
15105
|
{
|
|
15005
15106
|
containerRef,
|
|
@@ -15018,7 +15119,7 @@ function DashboardMultiSelectInternal({
|
|
|
15018
15119
|
hiddenValue: selectedValues.map((item) => String(item.value)).join(","),
|
|
15019
15120
|
onBlur: handleInputBlur,
|
|
15020
15121
|
children: [
|
|
15021
|
-
/* @__PURE__ */ (0,
|
|
15122
|
+
/* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
|
|
15022
15123
|
"div",
|
|
15023
15124
|
{
|
|
15024
15125
|
id: triggerId,
|
|
@@ -15041,7 +15142,7 @@ function DashboardMultiSelectInternal({
|
|
|
15041
15142
|
),
|
|
15042
15143
|
children: [
|
|
15043
15144
|
selectedValues.map(
|
|
15044
|
-
(option) => renderChip ? /* @__PURE__ */ (0,
|
|
15145
|
+
(option) => renderChip ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(React60.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15045
15146
|
MultiSelectChip,
|
|
15046
15147
|
{
|
|
15047
15148
|
option,
|
|
@@ -15051,7 +15152,7 @@ function DashboardMultiSelectInternal({
|
|
|
15051
15152
|
String(option.value)
|
|
15052
15153
|
)
|
|
15053
15154
|
),
|
|
15054
|
-
/* @__PURE__ */ (0,
|
|
15155
|
+
/* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15055
15156
|
"input",
|
|
15056
15157
|
{
|
|
15057
15158
|
ref: inputRef,
|
|
@@ -15080,9 +15181,9 @@ function DashboardMultiSelectInternal({
|
|
|
15080
15181
|
"aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0
|
|
15081
15182
|
}
|
|
15082
15183
|
),
|
|
15083
|
-
/* @__PURE__ */ (0,
|
|
15084
|
-
loading && /* @__PURE__ */ (0,
|
|
15085
|
-
hasValue && !readOnly && /* @__PURE__ */ (0,
|
|
15184
|
+
/* @__PURE__ */ (0, import_jsx_runtime164.jsxs)("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
15185
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
15186
|
+
hasValue && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15086
15187
|
"button",
|
|
15087
15188
|
{
|
|
15088
15189
|
type: "button",
|
|
@@ -15092,10 +15193,10 @@ function DashboardMultiSelectInternal({
|
|
|
15092
15193
|
},
|
|
15093
15194
|
className: "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
|
|
15094
15195
|
"aria-label": t("clear_all"),
|
|
15095
|
-
children: /* @__PURE__ */ (0,
|
|
15196
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
15096
15197
|
}
|
|
15097
15198
|
),
|
|
15098
|
-
/* @__PURE__ */ (0,
|
|
15199
|
+
/* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15099
15200
|
RotateArrow,
|
|
15100
15201
|
{
|
|
15101
15202
|
shouldRotate: isOpen,
|
|
@@ -15108,7 +15209,7 @@ function DashboardMultiSelectInternal({
|
|
|
15108
15209
|
]
|
|
15109
15210
|
}
|
|
15110
15211
|
),
|
|
15111
|
-
/* @__PURE__ */ (0,
|
|
15212
|
+
/* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15112
15213
|
Fieldset,
|
|
15113
15214
|
{
|
|
15114
15215
|
isFocused: isFocused || isOpen,
|
|
@@ -15126,7 +15227,7 @@ function DashboardMultiSelectInternal({
|
|
|
15126
15227
|
onClick: handleContainerClick
|
|
15127
15228
|
}
|
|
15128
15229
|
),
|
|
15129
|
-
/* @__PURE__ */ (0,
|
|
15230
|
+
/* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
|
|
15130
15231
|
SelectMenuPanel,
|
|
15131
15232
|
{
|
|
15132
15233
|
isOpen,
|
|
@@ -15139,7 +15240,7 @@ function DashboardMultiSelectInternal({
|
|
|
15139
15240
|
className: dropdownClassName,
|
|
15140
15241
|
drawerClassName,
|
|
15141
15242
|
children: [
|
|
15142
|
-
isMobile2 && /* @__PURE__ */ (0,
|
|
15243
|
+
isMobile2 && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15143
15244
|
"input",
|
|
15144
15245
|
{
|
|
15145
15246
|
ref: mobileSearchInputRef,
|
|
@@ -15154,7 +15255,7 @@ function DashboardMultiSelectInternal({
|
|
|
15154
15255
|
className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-3 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
|
|
15155
15256
|
}
|
|
15156
15257
|
) }),
|
|
15157
|
-
/* @__PURE__ */ (0,
|
|
15258
|
+
/* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15158
15259
|
SelectMenu,
|
|
15159
15260
|
{
|
|
15160
15261
|
id: listboxId,
|
|
@@ -15176,7 +15277,7 @@ function DashboardMultiSelectInternal({
|
|
|
15176
15277
|
isMulti: true
|
|
15177
15278
|
}
|
|
15178
15279
|
),
|
|
15179
|
-
canCreateNewOption && /* @__PURE__ */ (0,
|
|
15280
|
+
canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15180
15281
|
"button",
|
|
15181
15282
|
{
|
|
15182
15283
|
type: "button",
|
|
@@ -15192,26 +15293,26 @@ function DashboardMultiSelectInternal({
|
|
|
15192
15293
|
}
|
|
15193
15294
|
);
|
|
15194
15295
|
}
|
|
15195
|
-
var DashboardMultiSelect =
|
|
15296
|
+
var DashboardMultiSelect = React60.forwardRef(
|
|
15196
15297
|
DashboardMultiSelectInternal
|
|
15197
15298
|
);
|
|
15198
15299
|
|
|
15199
15300
|
// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
|
|
15200
|
-
var
|
|
15201
|
-
var
|
|
15202
|
-
var DashboardCreatableMultiSelect =
|
|
15301
|
+
var React61 = __toESM(require("react"), 1);
|
|
15302
|
+
var import_jsx_runtime165 = require("react/jsx-runtime");
|
|
15303
|
+
var DashboardCreatableMultiSelect = React61.forwardRef(
|
|
15203
15304
|
function DashboardCreatableMultiSelect2(props, ref) {
|
|
15204
|
-
return /* @__PURE__ */ (0,
|
|
15305
|
+
return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(DashboardMultiSelect, { ref, ...props, isCreatable: true });
|
|
15205
15306
|
}
|
|
15206
15307
|
);
|
|
15207
15308
|
|
|
15208
15309
|
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
15209
|
-
var
|
|
15310
|
+
var React62 = __toESM(require("react"), 1);
|
|
15210
15311
|
var import_react_virtual2 = require("@tanstack/react-virtual");
|
|
15211
15312
|
var import_react_i18next33 = require("react-i18next");
|
|
15212
15313
|
|
|
15213
15314
|
// src/dashboard/infinite-scroll-select/InfiniteScrollList.tsx
|
|
15214
|
-
var
|
|
15315
|
+
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
15215
15316
|
function InfiniteScrollList({
|
|
15216
15317
|
scrollRef,
|
|
15217
15318
|
listboxId,
|
|
@@ -15232,13 +15333,13 @@ function InfiniteScrollList({
|
|
|
15232
15333
|
onHighlight
|
|
15233
15334
|
}) {
|
|
15234
15335
|
const virtualItems = virtualizer.getVirtualItems();
|
|
15235
|
-
return /* @__PURE__ */ (0,
|
|
15336
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
|
|
15236
15337
|
"div",
|
|
15237
15338
|
{
|
|
15238
15339
|
ref: scrollRef,
|
|
15239
15340
|
className: cn("overflow-y-auto", menuClassName),
|
|
15240
15341
|
style: { height: `${height}px` },
|
|
15241
|
-
children: /* @__PURE__ */ (0,
|
|
15342
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
|
|
15242
15343
|
"div",
|
|
15243
15344
|
{
|
|
15244
15345
|
id: listboxId,
|
|
@@ -15255,7 +15356,7 @@ function InfiniteScrollList({
|
|
|
15255
15356
|
const isSelected = !isLoaderRow && option ? option.value === value?.value : false;
|
|
15256
15357
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
15257
15358
|
const isOptionDisabled = Boolean(isBlocked || option?.isDisabled);
|
|
15258
|
-
return /* @__PURE__ */ (0,
|
|
15359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
|
|
15259
15360
|
"div",
|
|
15260
15361
|
{
|
|
15261
15362
|
"data-index": virtualItem.index,
|
|
@@ -15264,10 +15365,10 @@ function InfiniteScrollList({
|
|
|
15264
15365
|
height: `${virtualItem.size}px`,
|
|
15265
15366
|
transform: `translateY(${virtualItem.start}px)`
|
|
15266
15367
|
},
|
|
15267
|
-
children: isLoaderRow ? /* @__PURE__ */ (0,
|
|
15268
|
-
/* @__PURE__ */ (0,
|
|
15269
|
-
/* @__PURE__ */ (0,
|
|
15270
|
-
] }) : /* @__PURE__ */ (0,
|
|
15368
|
+
children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
|
|
15369
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)(ThreeDotsLoader, { height: 36, width: 36 }),
|
|
15370
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { children: loadingMoreText })
|
|
15371
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
|
|
15271
15372
|
"button",
|
|
15272
15373
|
{
|
|
15273
15374
|
id: getOptionId2(virtualItem.index),
|
|
@@ -15286,8 +15387,8 @@ function InfiniteScrollList({
|
|
|
15286
15387
|
isOptionDisabled && "cursor-default opacity-30"
|
|
15287
15388
|
),
|
|
15288
15389
|
children: [
|
|
15289
|
-
/* @__PURE__ */ (0,
|
|
15290
|
-
option?.description && /* @__PURE__ */ (0,
|
|
15390
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "block break-words", children: option?.label }),
|
|
15391
|
+
option?.description && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
|
|
15291
15392
|
]
|
|
15292
15393
|
}
|
|
15293
15394
|
)
|
|
@@ -15302,7 +15403,7 @@ function InfiniteScrollList({
|
|
|
15302
15403
|
}
|
|
15303
15404
|
|
|
15304
15405
|
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
15305
|
-
var
|
|
15406
|
+
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
15306
15407
|
var DEFAULT_ITEM_HEIGHT = 60;
|
|
15307
15408
|
var DEFAULT_LIST_HEIGHT = 322;
|
|
15308
15409
|
var DEFAULT_OVERSCAN = 5;
|
|
@@ -15344,12 +15445,12 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15344
15445
|
overscan = DEFAULT_OVERSCAN,
|
|
15345
15446
|
loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD
|
|
15346
15447
|
}, ref) {
|
|
15347
|
-
const triggerRef =
|
|
15348
|
-
const searchInputRef =
|
|
15349
|
-
const scrollRef =
|
|
15350
|
-
const previousHighlightedIndexRef =
|
|
15351
|
-
const lastLoadMoreOptionsLengthRef =
|
|
15352
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
15448
|
+
const triggerRef = React62.useRef(null);
|
|
15449
|
+
const searchInputRef = React62.useRef(null);
|
|
15450
|
+
const scrollRef = React62.useRef(null);
|
|
15451
|
+
const previousHighlightedIndexRef = React62.useRef(-1);
|
|
15452
|
+
const lastLoadMoreOptionsLengthRef = React62.useRef(null);
|
|
15453
|
+
const [highlightedIndex, setHighlightedIndex] = React62.useState(-1);
|
|
15353
15454
|
const isMobile2 = useIsMobile();
|
|
15354
15455
|
const { t } = (0, import_react_i18next33.useTranslation)();
|
|
15355
15456
|
const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
|
|
@@ -15377,15 +15478,15 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15377
15478
|
estimateSize: () => itemHeight,
|
|
15378
15479
|
overscan
|
|
15379
15480
|
});
|
|
15380
|
-
|
|
15381
|
-
|
|
15481
|
+
React62.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
15482
|
+
React62.useEffect(() => {
|
|
15382
15483
|
if (isOpen) return;
|
|
15383
15484
|
setSearchValue("");
|
|
15384
15485
|
setHighlightedIndex(-1);
|
|
15385
15486
|
previousHighlightedIndexRef.current = -1;
|
|
15386
15487
|
lastLoadMoreOptionsLengthRef.current = null;
|
|
15387
15488
|
}, [isOpen, setSearchValue]);
|
|
15388
|
-
|
|
15489
|
+
React62.useEffect(() => {
|
|
15389
15490
|
if (!isOpen) return;
|
|
15390
15491
|
setHighlightedIndex((current) => {
|
|
15391
15492
|
const option = current >= 0 ? filteredOptions[current] : void 0;
|
|
@@ -15394,13 +15495,13 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15394
15495
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(filteredOptions);
|
|
15395
15496
|
});
|
|
15396
15497
|
}, [isOpen, filteredOptions, value]);
|
|
15397
|
-
|
|
15498
|
+
React62.useEffect(() => {
|
|
15398
15499
|
if (!isOpen || !searchable) return;
|
|
15399
15500
|
const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
|
|
15400
15501
|
return () => window.cancelAnimationFrame(frame);
|
|
15401
15502
|
}, [isOpen, searchable]);
|
|
15402
15503
|
const virtualItems = virtualizer.getVirtualItems();
|
|
15403
|
-
|
|
15504
|
+
React62.useEffect(() => {
|
|
15404
15505
|
if (!isOpen || !canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
15405
15506
|
if (virtualItems.length === 0) return;
|
|
15406
15507
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
@@ -15417,7 +15518,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15417
15518
|
loadMoreThreshold,
|
|
15418
15519
|
virtualItems
|
|
15419
15520
|
]);
|
|
15420
|
-
|
|
15521
|
+
React62.useEffect(() => {
|
|
15421
15522
|
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
15422
15523
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
15423
15524
|
if (!isOpen || highlightedIndex < 0 || !changed) return;
|
|
@@ -15475,7 +15576,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15475
15576
|
const totalSize = virtualizer.getTotalSize();
|
|
15476
15577
|
const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
|
|
15477
15578
|
const activeOptionId = highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0;
|
|
15478
|
-
return /* @__PURE__ */ (0,
|
|
15579
|
+
return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
|
|
15479
15580
|
SelectFieldShell,
|
|
15480
15581
|
{
|
|
15481
15582
|
containerRef,
|
|
@@ -15493,7 +15594,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15493
15594
|
name,
|
|
15494
15595
|
hiddenValue: value ? String(value.value) : "",
|
|
15495
15596
|
children: [
|
|
15496
|
-
/* @__PURE__ */ (0,
|
|
15597
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
15497
15598
|
SelectTrigger3,
|
|
15498
15599
|
{
|
|
15499
15600
|
triggerRef,
|
|
@@ -15515,7 +15616,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15515
15616
|
onBlur
|
|
15516
15617
|
}
|
|
15517
15618
|
),
|
|
15518
|
-
/* @__PURE__ */ (0,
|
|
15619
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
15519
15620
|
Fieldset,
|
|
15520
15621
|
{
|
|
15521
15622
|
isFocused: isOpen,
|
|
@@ -15532,7 +15633,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15532
15633
|
onClick: !isBlocked ? toggleMenu : void 0
|
|
15533
15634
|
}
|
|
15534
15635
|
),
|
|
15535
|
-
/* @__PURE__ */ (0,
|
|
15636
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
|
|
15536
15637
|
SelectMenuPanel,
|
|
15537
15638
|
{
|
|
15538
15639
|
isOpen,
|
|
@@ -15542,7 +15643,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15542
15643
|
className: dropdownClassName,
|
|
15543
15644
|
drawerClassName,
|
|
15544
15645
|
children: [
|
|
15545
|
-
searchable && /* @__PURE__ */ (0,
|
|
15646
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
15546
15647
|
SelectSearchInput,
|
|
15547
15648
|
{
|
|
15548
15649
|
inputRef: searchInputRef,
|
|
@@ -15554,10 +15655,10 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15554
15655
|
onKeyDown: handleSearchKeyDown
|
|
15555
15656
|
}
|
|
15556
15657
|
),
|
|
15557
|
-
filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ (0,
|
|
15558
|
-
/* @__PURE__ */ (0,
|
|
15559
|
-
/* @__PURE__ */ (0,
|
|
15560
|
-
] }) : filteredOptions.length === 0 ? /* @__PURE__ */ (0,
|
|
15658
|
+
filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { className: "flex items-center justify-center gap-2 px-4 py-[20px] text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
|
|
15659
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
15660
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { children: resolvedLoadingMoreText })
|
|
15661
|
+
] }) : filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? t("no_options") }) : /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
15561
15662
|
InfiniteScrollList,
|
|
15562
15663
|
{
|
|
15563
15664
|
scrollRef,
|
|
@@ -15586,14 +15687,14 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15586
15687
|
}
|
|
15587
15688
|
);
|
|
15588
15689
|
}
|
|
15589
|
-
var DashboardInfiniteScrollSelect =
|
|
15690
|
+
var DashboardInfiniteScrollSelect = React62.forwardRef(
|
|
15590
15691
|
DashboardInfiniteScrollSelectInternal
|
|
15591
15692
|
);
|
|
15592
15693
|
|
|
15593
15694
|
// src/dashboard/textarea/Textarea.tsx
|
|
15594
|
-
var
|
|
15695
|
+
var React63 = __toESM(require("react"), 1);
|
|
15595
15696
|
var import_react_i18next34 = require("react-i18next");
|
|
15596
|
-
var
|
|
15697
|
+
var import_jsx_runtime168 = require("react/jsx-runtime");
|
|
15597
15698
|
var LINE_HEIGHT = 20;
|
|
15598
15699
|
var VERTICAL_PADDING = 32;
|
|
15599
15700
|
function getEmptyState(empty, value, defaultValue) {
|
|
@@ -15601,7 +15702,7 @@ function getEmptyState(empty, value, defaultValue) {
|
|
|
15601
15702
|
if (value !== void 0) return !String(value);
|
|
15602
15703
|
return !defaultValue;
|
|
15603
15704
|
}
|
|
15604
|
-
var DashboardTextarea =
|
|
15705
|
+
var DashboardTextarea = React63.forwardRef(
|
|
15605
15706
|
function DashboardTextarea2({
|
|
15606
15707
|
className,
|
|
15607
15708
|
textareaClassName,
|
|
@@ -15625,15 +15726,15 @@ var DashboardTextarea = React62.forwardRef(
|
|
|
15625
15726
|
onInput,
|
|
15626
15727
|
...textareaProps
|
|
15627
15728
|
}, ref) {
|
|
15628
|
-
const innerRef =
|
|
15729
|
+
const innerRef = React63.useRef(null);
|
|
15629
15730
|
const combinedRef = useCombinedRef(ref, innerRef);
|
|
15630
|
-
const reactId =
|
|
15731
|
+
const reactId = React63.useId();
|
|
15631
15732
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15632
15733
|
const { t } = (0, import_react_i18next34.useTranslation)();
|
|
15633
15734
|
const isInvalid = Boolean(invalid || error);
|
|
15634
15735
|
const isEmpty = getEmptyState(empty, value, defaultValue);
|
|
15635
15736
|
const isBlocked = Boolean(disabled);
|
|
15636
|
-
const resize =
|
|
15737
|
+
const resize = React63.useCallback(() => {
|
|
15637
15738
|
const el = innerRef.current;
|
|
15638
15739
|
if (!el || !autosize) return;
|
|
15639
15740
|
el.style.height = "auto";
|
|
@@ -15643,14 +15744,14 @@ var DashboardTextarea = React62.forwardRef(
|
|
|
15643
15744
|
el.style.height = `${nextHeight}px`;
|
|
15644
15745
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15645
15746
|
}, [autosize, maxRows, minRows]);
|
|
15646
|
-
|
|
15747
|
+
React63.useLayoutEffect(() => {
|
|
15647
15748
|
resize();
|
|
15648
15749
|
}, [resize, value]);
|
|
15649
15750
|
const handleInput = (event) => {
|
|
15650
15751
|
resize();
|
|
15651
15752
|
onInput?.(event);
|
|
15652
15753
|
};
|
|
15653
|
-
return /* @__PURE__ */ (0,
|
|
15754
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
|
|
15654
15755
|
"div",
|
|
15655
15756
|
{
|
|
15656
15757
|
className: cn(
|
|
@@ -15660,18 +15761,18 @@ var DashboardTextarea = React62.forwardRef(
|
|
|
15660
15761
|
className
|
|
15661
15762
|
),
|
|
15662
15763
|
children: [
|
|
15663
|
-
label && /* @__PURE__ */ (0,
|
|
15764
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
|
|
15664
15765
|
"label",
|
|
15665
15766
|
{
|
|
15666
15767
|
htmlFor: textareaId,
|
|
15667
15768
|
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15668
15769
|
children: [
|
|
15669
15770
|
label,
|
|
15670
|
-
tooltip && /* @__PURE__ */ (0,
|
|
15771
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15671
15772
|
]
|
|
15672
15773
|
}
|
|
15673
15774
|
),
|
|
15674
|
-
/* @__PURE__ */ (0,
|
|
15775
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15675
15776
|
"textarea",
|
|
15676
15777
|
{
|
|
15677
15778
|
ref: combinedRef,
|
|
@@ -15700,7 +15801,7 @@ var DashboardTextarea = React62.forwardRef(
|
|
|
15700
15801
|
...textareaProps
|
|
15701
15802
|
}
|
|
15702
15803
|
),
|
|
15703
|
-
error && /* @__PURE__ */ (0,
|
|
15804
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15704
15805
|
FieldErrorMessage,
|
|
15705
15806
|
{
|
|
15706
15807
|
id: `${textareaId}-error`,
|
|
@@ -15708,8 +15809,8 @@ var DashboardTextarea = React62.forwardRef(
|
|
|
15708
15809
|
className: "mt-[1px] text-[14px]"
|
|
15709
15810
|
}
|
|
15710
15811
|
),
|
|
15711
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
15712
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
15812
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
15813
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15713
15814
|
]
|
|
15714
15815
|
}
|
|
15715
15816
|
);
|
|
@@ -15717,10 +15818,10 @@ var DashboardTextarea = React62.forwardRef(
|
|
|
15717
15818
|
);
|
|
15718
15819
|
|
|
15719
15820
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15720
|
-
var
|
|
15821
|
+
var React64 = __toESM(require("react"), 1);
|
|
15721
15822
|
var import_lucide_react49 = require("lucide-react");
|
|
15722
15823
|
var import_react_i18next35 = require("react-i18next");
|
|
15723
|
-
var
|
|
15824
|
+
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
15724
15825
|
var MONTHS_IN_YEAR2 = 12;
|
|
15725
15826
|
var DEFAULT_MIN_DATE2 = new Date(1920, 0, 1);
|
|
15726
15827
|
function getMonthLabels2(locale) {
|
|
@@ -15754,7 +15855,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
15754
15855
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
15755
15856
|
return new Date(yearNum, monthIndex, dayNum);
|
|
15756
15857
|
}
|
|
15757
|
-
var DashboardDatepicker =
|
|
15858
|
+
var DashboardDatepicker = React64.forwardRef(
|
|
15758
15859
|
function DashboardDatepicker2({
|
|
15759
15860
|
label,
|
|
15760
15861
|
value,
|
|
@@ -15784,14 +15885,14 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
15784
15885
|
maxDate,
|
|
15785
15886
|
formatValue
|
|
15786
15887
|
}, ref) {
|
|
15787
|
-
const containerRef =
|
|
15788
|
-
const dayInputRef =
|
|
15789
|
-
const monthInputRef =
|
|
15790
|
-
const monthListRef =
|
|
15791
|
-
const yearInputRef =
|
|
15792
|
-
const mobileTriggerRef =
|
|
15793
|
-
const wheelBaseId =
|
|
15794
|
-
const reactId =
|
|
15888
|
+
const containerRef = React64.useRef(null);
|
|
15889
|
+
const dayInputRef = React64.useRef(null);
|
|
15890
|
+
const monthInputRef = React64.useRef(null);
|
|
15891
|
+
const monthListRef = React64.useRef(null);
|
|
15892
|
+
const yearInputRef = React64.useRef(null);
|
|
15893
|
+
const mobileTriggerRef = React64.useRef(null);
|
|
15894
|
+
const wheelBaseId = React64.useId();
|
|
15895
|
+
const reactId = React64.useId();
|
|
15795
15896
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
15796
15897
|
const dayId = `${baseId}-day`;
|
|
15797
15898
|
const monthId = `${baseId}-month`;
|
|
@@ -15799,51 +15900,51 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
15799
15900
|
const labelId = `${baseId}-label`;
|
|
15800
15901
|
const errorId = `${baseId}-error`;
|
|
15801
15902
|
const { t } = (0, import_react_i18next35.useTranslation)();
|
|
15802
|
-
const resolvedMonthLabels =
|
|
15903
|
+
const resolvedMonthLabels = React64.useMemo(
|
|
15803
15904
|
() => monthLabels ?? getMonthLabels2(locale),
|
|
15804
15905
|
[locale, monthLabels]
|
|
15805
15906
|
);
|
|
15806
15907
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
15807
15908
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
15808
15909
|
const isControlled = value !== void 0;
|
|
15809
|
-
const initialParts =
|
|
15910
|
+
const initialParts = React64.useMemo(
|
|
15810
15911
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
15811
15912
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15812
15913
|
[]
|
|
15813
15914
|
);
|
|
15814
|
-
const [day, setDay] =
|
|
15815
|
-
const [monthIndex, setMonthIndex] =
|
|
15915
|
+
const [day, setDay] = React64.useState(initialParts.day);
|
|
15916
|
+
const [monthIndex, setMonthIndex] = React64.useState(
|
|
15816
15917
|
initialParts.monthIndex
|
|
15817
15918
|
);
|
|
15818
|
-
const [year, setYear] =
|
|
15819
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
15820
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
15821
|
-
const [focusedField, setFocusedField] =
|
|
15822
|
-
const [monthInputValue, setMonthInputValue] =
|
|
15823
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
15919
|
+
const [year, setYear] = React64.useState(initialParts.year);
|
|
15920
|
+
const [isMonthOpen, setIsMonthOpen] = React64.useState(false);
|
|
15921
|
+
const [isWheelOpen, setIsWheelOpen] = React64.useState(false);
|
|
15922
|
+
const [focusedField, setFocusedField] = React64.useState(null);
|
|
15923
|
+
const [monthInputValue, setMonthInputValue] = React64.useState("");
|
|
15924
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React64.useState(-1);
|
|
15824
15925
|
const isMobile2 = useIsMobile();
|
|
15825
|
-
|
|
15826
|
-
|
|
15926
|
+
React64.useImperativeHandle(ref, () => dayInputRef.current, []);
|
|
15927
|
+
React64.useEffect(() => {
|
|
15827
15928
|
if (!isControlled) return;
|
|
15828
15929
|
const next = partsFromDate(value ?? null);
|
|
15829
15930
|
setDay(next.day);
|
|
15830
15931
|
setMonthIndex(next.monthIndex);
|
|
15831
15932
|
setYear(next.year);
|
|
15832
15933
|
}, [isControlled, value]);
|
|
15833
|
-
|
|
15934
|
+
React64.useEffect(() => {
|
|
15834
15935
|
if (focusedField === "month") return;
|
|
15835
15936
|
setMonthInputValue(
|
|
15836
15937
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
15837
15938
|
);
|
|
15838
15939
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
15839
|
-
const filteredMonths =
|
|
15940
|
+
const filteredMonths = React64.useMemo(() => {
|
|
15840
15941
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
15841
15942
|
const query = monthInputValue.trim().toLowerCase();
|
|
15842
15943
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
15843
15944
|
if (!query || monthInputValue === currentLabel) return all;
|
|
15844
15945
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
15845
15946
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
15846
|
-
|
|
15947
|
+
React64.useEffect(() => {
|
|
15847
15948
|
if (!isMonthOpen) {
|
|
15848
15949
|
setMonthHighlightIndex(-1);
|
|
15849
15950
|
return;
|
|
@@ -15864,7 +15965,7 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
15864
15965
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
15865
15966
|
const isInvalid = Boolean(invalid || error);
|
|
15866
15967
|
const wrapperWidth = toCssSize(width);
|
|
15867
|
-
const currentDate =
|
|
15968
|
+
const currentDate = React64.useMemo(
|
|
15868
15969
|
() => dateFromParts(day, monthIndex, year),
|
|
15869
15970
|
[day, monthIndex, year]
|
|
15870
15971
|
);
|
|
@@ -15873,7 +15974,7 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
15873
15974
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
15874
15975
|
isDisabled: !isMonthOpen || isMobile2
|
|
15875
15976
|
});
|
|
15876
|
-
const emitChange =
|
|
15977
|
+
const emitChange = React64.useCallback(
|
|
15877
15978
|
(nextDay, nextMonth, nextYear) => {
|
|
15878
15979
|
if (!onChange) return;
|
|
15879
15980
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -15908,7 +16009,7 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
15908
16009
|
setIsMonthOpen(true);
|
|
15909
16010
|
setMonthHighlightIndex(0);
|
|
15910
16011
|
};
|
|
15911
|
-
const commitMonthInput =
|
|
16012
|
+
const commitMonthInput = React64.useCallback(() => {
|
|
15912
16013
|
const query = monthInputValue.trim().toLowerCase();
|
|
15913
16014
|
if (!query) {
|
|
15914
16015
|
if (monthIndex !== null) {
|
|
@@ -15968,15 +16069,15 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
15968
16069
|
setIsMonthOpen(false);
|
|
15969
16070
|
}
|
|
15970
16071
|
};
|
|
15971
|
-
const focusDayInput =
|
|
16072
|
+
const focusDayInput = React64.useCallback(() => {
|
|
15972
16073
|
if (isBlocked || readOnly) return;
|
|
15973
16074
|
dayInputRef.current?.focus();
|
|
15974
16075
|
}, [isBlocked, readOnly]);
|
|
15975
|
-
const openWheel =
|
|
16076
|
+
const openWheel = React64.useCallback(() => {
|
|
15976
16077
|
if (isBlocked || readOnly) return;
|
|
15977
16078
|
setIsWheelOpen(true);
|
|
15978
16079
|
}, [isBlocked, readOnly]);
|
|
15979
|
-
const closeWheel =
|
|
16080
|
+
const closeWheel = React64.useCallback(() => {
|
|
15980
16081
|
setIsWheelOpen(false);
|
|
15981
16082
|
mobileTriggerRef.current?.focus();
|
|
15982
16083
|
}, []);
|
|
@@ -15989,7 +16090,7 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
15989
16090
|
minDate,
|
|
15990
16091
|
maxDate
|
|
15991
16092
|
});
|
|
15992
|
-
const handleWheelDone =
|
|
16093
|
+
const handleWheelDone = React64.useCallback(() => {
|
|
15993
16094
|
const next = wheel.draftDate;
|
|
15994
16095
|
setDay(String(next.getDate()));
|
|
15995
16096
|
setMonthIndex(next.getMonth());
|
|
@@ -15998,14 +16099,14 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
15998
16099
|
setIsWheelOpen(false);
|
|
15999
16100
|
mobileTriggerRef.current?.focus();
|
|
16000
16101
|
}, [name, onChange, wheel.draftDate]);
|
|
16001
|
-
const defaultFormatValue =
|
|
16102
|
+
const defaultFormatValue = React64.useCallback(
|
|
16002
16103
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16003
16104
|
[resolvedMonthLabels]
|
|
16004
16105
|
);
|
|
16005
16106
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16006
16107
|
const monthListboxId = `${monthId}-listbox`;
|
|
16007
16108
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16008
|
-
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0,
|
|
16109
|
+
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16009
16110
|
"ul",
|
|
16010
16111
|
{
|
|
16011
16112
|
ref: monthListRef,
|
|
@@ -16016,7 +16117,7 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16016
16117
|
children: filteredMonths.map((option, position) => {
|
|
16017
16118
|
const isSelected = option.index === monthIndex;
|
|
16018
16119
|
const isHighlighted = position === monthHighlightIndex;
|
|
16019
|
-
return /* @__PURE__ */ (0,
|
|
16120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16020
16121
|
"button",
|
|
16021
16122
|
{
|
|
16022
16123
|
id: getMonthOptionId(option.index),
|
|
@@ -16043,7 +16144,7 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16043
16144
|
isBlocked && "cursor-not-allowed",
|
|
16044
16145
|
loading && "cursor-progress"
|
|
16045
16146
|
);
|
|
16046
|
-
return /* @__PURE__ */ (0,
|
|
16147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16047
16148
|
"div",
|
|
16048
16149
|
{
|
|
16049
16150
|
ref: containerRef,
|
|
@@ -16054,9 +16155,9 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16054
16155
|
className
|
|
16055
16156
|
),
|
|
16056
16157
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16057
|
-
children: /* @__PURE__ */ (0,
|
|
16058
|
-
/* @__PURE__ */ (0,
|
|
16059
|
-
isMobile2 ? /* @__PURE__ */ (0,
|
|
16158
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
|
|
16159
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "relative w-full", children: [
|
|
16160
|
+
isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
|
|
16060
16161
|
"button",
|
|
16061
16162
|
{
|
|
16062
16163
|
ref: mobileTriggerRef,
|
|
@@ -16075,10 +16176,10 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16075
16176
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16076
16177
|
),
|
|
16077
16178
|
children: [
|
|
16078
|
-
/* @__PURE__ */ (0,
|
|
16079
|
-
/* @__PURE__ */ (0,
|
|
16080
|
-
loading && /* @__PURE__ */ (0,
|
|
16081
|
-
/* @__PURE__ */ (0,
|
|
16179
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
16180
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
16181
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
16182
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16082
16183
|
import_lucide_react49.ChevronDown,
|
|
16083
16184
|
{
|
|
16084
16185
|
size: 16,
|
|
@@ -16091,14 +16192,14 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16091
16192
|
] })
|
|
16092
16193
|
]
|
|
16093
16194
|
}
|
|
16094
|
-
) : /* @__PURE__ */ (0,
|
|
16195
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
|
|
16095
16196
|
"div",
|
|
16096
16197
|
{
|
|
16097
16198
|
className: cn(
|
|
16098
16199
|
"relative box-border grid h-12 w-full grid-cols-[minmax(0,1fr)_minmax(96px,140px)_minmax(0,1fr)] items-center rounded-[6px] text-[16px] font-medium text-[var(--chekin-color-brand-navy)]"
|
|
16099
16200
|
),
|
|
16100
16201
|
children: [
|
|
16101
|
-
/* @__PURE__ */ (0,
|
|
16202
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16102
16203
|
"input",
|
|
16103
16204
|
{
|
|
16104
16205
|
ref: dayInputRef,
|
|
@@ -16120,8 +16221,8 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16120
16221
|
className: subInputClass
|
|
16121
16222
|
}
|
|
16122
16223
|
) }),
|
|
16123
|
-
/* @__PURE__ */ (0,
|
|
16124
|
-
/* @__PURE__ */ (0,
|
|
16224
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "relative flex h-full min-w-0 items-center gap-1 border-x border-[var(--chekin-color-gray-3)] px-2 sm:px-3", children: [
|
|
16225
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16125
16226
|
"input",
|
|
16126
16227
|
{
|
|
16127
16228
|
ref: monthInputRef,
|
|
@@ -16164,7 +16265,7 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16164
16265
|
)
|
|
16165
16266
|
}
|
|
16166
16267
|
),
|
|
16167
|
-
/* @__PURE__ */ (0,
|
|
16268
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16168
16269
|
import_lucide_react49.ChevronDown,
|
|
16169
16270
|
{
|
|
16170
16271
|
size: 14,
|
|
@@ -16181,8 +16282,8 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16181
16282
|
}
|
|
16182
16283
|
)
|
|
16183
16284
|
] }),
|
|
16184
|
-
/* @__PURE__ */ (0,
|
|
16185
|
-
/* @__PURE__ */ (0,
|
|
16285
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
|
|
16286
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16186
16287
|
"input",
|
|
16187
16288
|
{
|
|
16188
16289
|
ref: yearInputRef,
|
|
@@ -16204,7 +16305,7 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16204
16305
|
className: subInputClass
|
|
16205
16306
|
}
|
|
16206
16307
|
),
|
|
16207
|
-
loading && /* @__PURE__ */ (0,
|
|
16308
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16208
16309
|
ThreeDotsLoader,
|
|
16209
16310
|
{
|
|
16210
16311
|
height: 18,
|
|
@@ -16216,7 +16317,7 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16216
16317
|
]
|
|
16217
16318
|
}
|
|
16218
16319
|
),
|
|
16219
|
-
showCoverage && /* @__PURE__ */ (0,
|
|
16320
|
+
showCoverage && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16220
16321
|
"div",
|
|
16221
16322
|
{
|
|
16222
16323
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--chekin-color-surface-input-empty)]",
|
|
@@ -16224,7 +16325,7 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16224
16325
|
"aria-hidden": "true"
|
|
16225
16326
|
}
|
|
16226
16327
|
),
|
|
16227
|
-
/* @__PURE__ */ (0,
|
|
16328
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16228
16329
|
Fieldset,
|
|
16229
16330
|
{
|
|
16230
16331
|
isFocused,
|
|
@@ -16242,9 +16343,9 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16242
16343
|
onClick: isMobile2 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16243
16344
|
}
|
|
16244
16345
|
),
|
|
16245
|
-
isMonthOpen && !isMobile2 && /* @__PURE__ */ (0,
|
|
16346
|
+
isMonthOpen && !isMobile2 && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { className: "absolute left-0 right-0 top-full z-30 mx-auto mt-1 w-full max-w-[260px] overflow-hidden rounded-md bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)] sm:left-1/2 sm:right-auto sm:-translate-x-1/2", children: monthPanelContent })
|
|
16246
16347
|
] }),
|
|
16247
|
-
isMobile2 && /* @__PURE__ */ (0,
|
|
16348
|
+
isMobile2 && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16248
16349
|
DatePickerContent,
|
|
16249
16350
|
{
|
|
16250
16351
|
baseId: wheelBaseId,
|
|
@@ -16272,9 +16373,9 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16272
16373
|
onOptionSelect: wheel.handleOptionSelect
|
|
16273
16374
|
}
|
|
16274
16375
|
),
|
|
16275
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
16276
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
16277
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
16376
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
16377
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16378
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
16278
16379
|
FieldErrorMessage,
|
|
16279
16380
|
{
|
|
16280
16381
|
id: errorId,
|
|
@@ -16289,7 +16390,7 @@ var DashboardDatepicker = React63.forwardRef(
|
|
|
16289
16390
|
);
|
|
16290
16391
|
|
|
16291
16392
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16292
|
-
var
|
|
16393
|
+
var React68 = __toESM(require("react"), 1);
|
|
16293
16394
|
var import_react_i18next36 = require("react-i18next");
|
|
16294
16395
|
|
|
16295
16396
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16368,7 +16469,7 @@ var createDisabledMatchers = ({
|
|
|
16368
16469
|
};
|
|
16369
16470
|
|
|
16370
16471
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16371
|
-
var
|
|
16472
|
+
var React65 = __toESM(require("react"), 1);
|
|
16372
16473
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16373
16474
|
function useRangeValue({
|
|
16374
16475
|
value: externalValue,
|
|
@@ -16377,10 +16478,10 @@ function useRangeValue({
|
|
|
16377
16478
|
name
|
|
16378
16479
|
}) {
|
|
16379
16480
|
const isControlled = externalValue !== void 0;
|
|
16380
|
-
const [draft, setDraft] =
|
|
16481
|
+
const [draft, setDraft] = React65.useState(
|
|
16381
16482
|
isControlled ? externalValue : defaultValue
|
|
16382
16483
|
);
|
|
16383
|
-
const lastExternalKeyRef =
|
|
16484
|
+
const lastExternalKeyRef = React65.useRef(getRangeKey(externalValue));
|
|
16384
16485
|
if (isControlled) {
|
|
16385
16486
|
const externalKey = getRangeKey(externalValue);
|
|
16386
16487
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16388,7 +16489,7 @@ function useRangeValue({
|
|
|
16388
16489
|
setDraft(externalValue);
|
|
16389
16490
|
}
|
|
16390
16491
|
}
|
|
16391
|
-
const commit =
|
|
16492
|
+
const commit = React65.useCallback(
|
|
16392
16493
|
(next) => {
|
|
16393
16494
|
setDraft(next);
|
|
16394
16495
|
if (next === void 0) {
|
|
@@ -16403,7 +16504,7 @@ function useRangeValue({
|
|
|
16403
16504
|
}
|
|
16404
16505
|
|
|
16405
16506
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16406
|
-
var
|
|
16507
|
+
var React66 = __toESM(require("react"), 1);
|
|
16407
16508
|
function useRangeTextInputs({
|
|
16408
16509
|
value,
|
|
16409
16510
|
format: format2,
|
|
@@ -16411,13 +16512,13 @@ function useRangeTextInputs({
|
|
|
16411
16512
|
onCommit,
|
|
16412
16513
|
onBlur
|
|
16413
16514
|
}) {
|
|
16414
|
-
const [fromText, setFromText] =
|
|
16415
|
-
const [toText, setToText] =
|
|
16416
|
-
|
|
16515
|
+
const [fromText, setFromText] = React66.useState(value?.from ? format2(value.from) : "");
|
|
16516
|
+
const [toText, setToText] = React66.useState(value?.to ? format2(value.to) : "");
|
|
16517
|
+
React66.useEffect(() => {
|
|
16417
16518
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16418
16519
|
setToText(value?.to ? format2(value.to) : "");
|
|
16419
16520
|
}, [format2, value?.from, value?.to]);
|
|
16420
|
-
const handleFromBlur =
|
|
16521
|
+
const handleFromBlur = React66.useCallback(() => {
|
|
16421
16522
|
if (!fromText) {
|
|
16422
16523
|
const next = { from: void 0, to: value?.to };
|
|
16423
16524
|
onCommit(next);
|
|
@@ -16434,7 +16535,7 @@ function useRangeTextInputs({
|
|
|
16434
16535
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16435
16536
|
return void 0;
|
|
16436
16537
|
}, [format2, fromText, onBlur, onCommit, parse3, value?.from, value?.to]);
|
|
16437
|
-
const handleToBlur =
|
|
16538
|
+
const handleToBlur = React66.useCallback(() => {
|
|
16438
16539
|
if (!toText) {
|
|
16439
16540
|
const next = { from: value?.from, to: void 0 };
|
|
16440
16541
|
onCommit(next);
|
|
@@ -16461,21 +16562,21 @@ function useRangeTextInputs({
|
|
|
16461
16562
|
}
|
|
16462
16563
|
|
|
16463
16564
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16464
|
-
var
|
|
16565
|
+
var React67 = __toESM(require("react"), 1);
|
|
16465
16566
|
function useRangeMonthSync(value) {
|
|
16466
|
-
const isPreloadedRef =
|
|
16467
|
-
const [month, setMonth] =
|
|
16468
|
-
|
|
16567
|
+
const isPreloadedRef = React67.useRef(false);
|
|
16568
|
+
const [month, setMonth] = React67.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16569
|
+
React67.useEffect(() => {
|
|
16469
16570
|
if (value?.from && !isPreloadedRef.current) {
|
|
16470
16571
|
setMonth(value.from);
|
|
16471
16572
|
isPreloadedRef.current = true;
|
|
16472
16573
|
}
|
|
16473
16574
|
}, [value?.from]);
|
|
16474
|
-
const syncMonthToValue =
|
|
16575
|
+
const syncMonthToValue = React67.useCallback((next) => {
|
|
16475
16576
|
isPreloadedRef.current = true;
|
|
16476
16577
|
if (next?.from) setMonth(next.from);
|
|
16477
16578
|
}, []);
|
|
16478
|
-
const resetPreload =
|
|
16579
|
+
const resetPreload = React67.useCallback(() => {
|
|
16479
16580
|
isPreloadedRef.current = false;
|
|
16480
16581
|
}, []);
|
|
16481
16582
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -16501,7 +16602,7 @@ function resolveRangeSelection({
|
|
|
16501
16602
|
|
|
16502
16603
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
16503
16604
|
var import_lucide_react50 = require("lucide-react");
|
|
16504
|
-
var
|
|
16605
|
+
var import_jsx_runtime170 = require("react/jsx-runtime");
|
|
16505
16606
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
16506
16607
|
var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]";
|
|
16507
16608
|
var iconButtonClass = "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734] disabled:cursor-not-allowed";
|
|
@@ -16543,7 +16644,7 @@ function DateRangeInputs({
|
|
|
16543
16644
|
isBlocked && "cursor-not-allowed",
|
|
16544
16645
|
loading && "cursor-progress"
|
|
16545
16646
|
);
|
|
16546
|
-
return /* @__PURE__ */ (0,
|
|
16647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
16547
16648
|
"div",
|
|
16548
16649
|
{
|
|
16549
16650
|
className: cn(
|
|
@@ -16552,7 +16653,7 @@ function DateRangeInputs({
|
|
|
16552
16653
|
),
|
|
16553
16654
|
onClick: onRowClick,
|
|
16554
16655
|
children: [
|
|
16555
|
-
/* @__PURE__ */ (0,
|
|
16656
|
+
/* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
16556
16657
|
"input",
|
|
16557
16658
|
{
|
|
16558
16659
|
ref: fromInputRef,
|
|
@@ -16576,7 +16677,7 @@ function DateRangeInputs({
|
|
|
16576
16677
|
)
|
|
16577
16678
|
}
|
|
16578
16679
|
),
|
|
16579
|
-
/* @__PURE__ */ (0,
|
|
16680
|
+
/* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
16580
16681
|
"span",
|
|
16581
16682
|
{
|
|
16582
16683
|
"aria-hidden": "true",
|
|
@@ -16587,7 +16688,7 @@ function DateRangeInputs({
|
|
|
16587
16688
|
children: "\u2192"
|
|
16588
16689
|
}
|
|
16589
16690
|
),
|
|
16590
|
-
/* @__PURE__ */ (0,
|
|
16691
|
+
/* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
16591
16692
|
"input",
|
|
16592
16693
|
{
|
|
16593
16694
|
ref: toInputRef,
|
|
@@ -16611,9 +16712,9 @@ function DateRangeInputs({
|
|
|
16611
16712
|
)
|
|
16612
16713
|
}
|
|
16613
16714
|
),
|
|
16614
|
-
/* @__PURE__ */ (0,
|
|
16615
|
-
loading && /* @__PURE__ */ (0,
|
|
16616
|
-
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0,
|
|
16715
|
+
/* @__PURE__ */ (0, import_jsx_runtime170.jsxs)("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
16716
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
16717
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
16617
16718
|
"button",
|
|
16618
16719
|
{
|
|
16619
16720
|
type: "button",
|
|
@@ -16621,10 +16722,10 @@ function DateRangeInputs({
|
|
|
16621
16722
|
onClick: onReset,
|
|
16622
16723
|
className: iconButtonClass,
|
|
16623
16724
|
"aria-label": clearLabel,
|
|
16624
|
-
children: /* @__PURE__ */ (0,
|
|
16725
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_lucide_react50.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
16625
16726
|
}
|
|
16626
16727
|
),
|
|
16627
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0,
|
|
16728
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
16628
16729
|
"button",
|
|
16629
16730
|
{
|
|
16630
16731
|
type: "button",
|
|
@@ -16636,7 +16737,7 @@ function DateRangeInputs({
|
|
|
16636
16737
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
16637
16738
|
),
|
|
16638
16739
|
"aria-label": openCalendarLabel,
|
|
16639
|
-
children: /* @__PURE__ */ (0,
|
|
16740
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_lucide_react50.CalendarDays, { size: 18 })
|
|
16640
16741
|
}
|
|
16641
16742
|
)
|
|
16642
16743
|
] })
|
|
@@ -16646,7 +16747,7 @@ function DateRangeInputs({
|
|
|
16646
16747
|
}
|
|
16647
16748
|
|
|
16648
16749
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
16649
|
-
var
|
|
16750
|
+
var import_jsx_runtime171 = require("react/jsx-runtime");
|
|
16650
16751
|
function DateRangeCalendar({
|
|
16651
16752
|
value,
|
|
16652
16753
|
month,
|
|
@@ -16662,7 +16763,7 @@ function DateRangeCalendar({
|
|
|
16662
16763
|
components,
|
|
16663
16764
|
...dayPickerProps
|
|
16664
16765
|
}) {
|
|
16665
|
-
return /* @__PURE__ */ (0,
|
|
16766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
16666
16767
|
Calendar,
|
|
16667
16768
|
{
|
|
16668
16769
|
mode: "range",
|
|
@@ -16685,7 +16786,7 @@ function DateRangeCalendar({
|
|
|
16685
16786
|
}
|
|
16686
16787
|
|
|
16687
16788
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
16688
|
-
var
|
|
16789
|
+
var import_jsx_runtime172 = require("react/jsx-runtime");
|
|
16689
16790
|
function DateRangePopover({
|
|
16690
16791
|
isOpen,
|
|
16691
16792
|
isMobile: isMobile2,
|
|
@@ -16697,30 +16798,30 @@ function DateRangePopover({
|
|
|
16697
16798
|
}) {
|
|
16698
16799
|
if (!isOpen) return null;
|
|
16699
16800
|
if (isMobile2) {
|
|
16700
|
-
return /* @__PURE__ */ (0,
|
|
16801
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16701
16802
|
Drawer,
|
|
16702
16803
|
{
|
|
16703
16804
|
open: isOpen,
|
|
16704
16805
|
onOpenChange: (next) => {
|
|
16705
16806
|
if (!next) onClose();
|
|
16706
16807
|
},
|
|
16707
|
-
children: /* @__PURE__ */ (0,
|
|
16808
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16708
16809
|
DrawerContent,
|
|
16709
16810
|
{
|
|
16710
16811
|
onClose,
|
|
16711
16812
|
lockScroll: false,
|
|
16712
16813
|
className: "max-h-[calc(100vh-1rem)]",
|
|
16713
16814
|
children: [
|
|
16714
|
-
/* @__PURE__ */ (0,
|
|
16715
|
-
/* @__PURE__ */ (0,
|
|
16716
|
-
/* @__PURE__ */ (0,
|
|
16815
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
16816
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
16817
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
16717
16818
|
]
|
|
16718
16819
|
}
|
|
16719
16820
|
)
|
|
16720
16821
|
}
|
|
16721
16822
|
);
|
|
16722
16823
|
}
|
|
16723
|
-
return /* @__PURE__ */ (0,
|
|
16824
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16724
16825
|
"div",
|
|
16725
16826
|
{
|
|
16726
16827
|
className: cn(
|
|
@@ -16733,8 +16834,8 @@ function DateRangePopover({
|
|
|
16733
16834
|
}
|
|
16734
16835
|
|
|
16735
16836
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16736
|
-
var
|
|
16737
|
-
var DashboardDateRangePicker =
|
|
16837
|
+
var import_jsx_runtime173 = require("react/jsx-runtime");
|
|
16838
|
+
var DashboardDateRangePicker = React68.forwardRef(function DashboardDateRangePicker2({
|
|
16738
16839
|
label,
|
|
16739
16840
|
value: externalValue,
|
|
16740
16841
|
defaultValue,
|
|
@@ -16768,20 +16869,20 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16768
16869
|
components: customComponents,
|
|
16769
16870
|
...dayPickerProps
|
|
16770
16871
|
}, ref) {
|
|
16771
|
-
const containerRef =
|
|
16772
|
-
const fromInputRef =
|
|
16773
|
-
const toInputRef =
|
|
16774
|
-
const reactId =
|
|
16872
|
+
const containerRef = React68.useRef(null);
|
|
16873
|
+
const fromInputRef = React68.useRef(null);
|
|
16874
|
+
const toInputRef = React68.useRef(null);
|
|
16875
|
+
const reactId = React68.useId();
|
|
16775
16876
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
16776
16877
|
const fromId = `${baseId}-from`;
|
|
16777
16878
|
const toId = `${baseId}-to`;
|
|
16778
16879
|
const labelId = `${baseId}-label`;
|
|
16779
16880
|
const errorId = `${baseId}-error`;
|
|
16780
|
-
const normalizedValue =
|
|
16881
|
+
const normalizedValue = React68.useMemo(() => {
|
|
16781
16882
|
if (externalValue === void 0) return void 0;
|
|
16782
16883
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
16783
16884
|
}, [externalValue]);
|
|
16784
|
-
const normalizedDefaultValue =
|
|
16885
|
+
const normalizedDefaultValue = React68.useMemo(() => {
|
|
16785
16886
|
if (defaultValue === void 0) return void 0;
|
|
16786
16887
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
16787
16888
|
}, [defaultValue]);
|
|
@@ -16791,10 +16892,10 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16791
16892
|
onChange,
|
|
16792
16893
|
name
|
|
16793
16894
|
});
|
|
16794
|
-
const normalizedMinDate =
|
|
16795
|
-
const normalizedMaxDate =
|
|
16796
|
-
const formatter =
|
|
16797
|
-
const parser =
|
|
16895
|
+
const normalizedMinDate = React68.useMemo(() => toDate(minDate), [minDate]);
|
|
16896
|
+
const normalizedMaxDate = React68.useMemo(() => toDate(maxDate), [maxDate]);
|
|
16897
|
+
const formatter = React68.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
16898
|
+
const parser = React68.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
16798
16899
|
const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
|
|
16799
16900
|
value,
|
|
16800
16901
|
format: formatter,
|
|
@@ -16803,9 +16904,9 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16803
16904
|
onBlur
|
|
16804
16905
|
});
|
|
16805
16906
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
16806
|
-
const [isOpen, setIsOpen] =
|
|
16807
|
-
const [focusedInput, setFocusedInput] =
|
|
16808
|
-
const [autoFocus, setAutoFocus] =
|
|
16907
|
+
const [isOpen, setIsOpen] = React68.useState(false);
|
|
16908
|
+
const [focusedInput, setFocusedInput] = React68.useState(null);
|
|
16909
|
+
const [autoFocus, setAutoFocus] = React68.useState(false);
|
|
16809
16910
|
const isMobile2 = useIsMobile();
|
|
16810
16911
|
const { t } = (0, import_react_i18next36.useTranslation)();
|
|
16811
16912
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -16816,13 +16917,13 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16816
16917
|
const isFocused = focusedInput !== null || isOpen;
|
|
16817
16918
|
const wrapperWidth = toCssSize(width);
|
|
16818
16919
|
const monthsToShow = numberOfMonths ?? (isMobile2 ? 1 : 2);
|
|
16819
|
-
const closeCalendar =
|
|
16920
|
+
const closeCalendar = React68.useCallback(() => {
|
|
16820
16921
|
setIsOpen(false);
|
|
16821
16922
|
setFocusedInput(null);
|
|
16822
16923
|
setAutoFocus(false);
|
|
16823
16924
|
if (value?.from) setMonth(value.from);
|
|
16824
16925
|
}, [setMonth, value?.from]);
|
|
16825
|
-
const openCalendar =
|
|
16926
|
+
const openCalendar = React68.useCallback(() => {
|
|
16826
16927
|
if (isBlocked || readOnly) return;
|
|
16827
16928
|
setIsOpen(true);
|
|
16828
16929
|
}, [isBlocked, readOnly]);
|
|
@@ -16831,7 +16932,7 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16831
16932
|
onOutsideClick: closeCalendar,
|
|
16832
16933
|
isDisabled: !isOpen || isMobile2
|
|
16833
16934
|
});
|
|
16834
|
-
const handlePickerChange =
|
|
16935
|
+
const handlePickerChange = React68.useCallback(
|
|
16835
16936
|
(range, pickedDate) => {
|
|
16836
16937
|
const { next, shouldClose } = resolveRangeSelection({
|
|
16837
16938
|
previous: value,
|
|
@@ -16852,7 +16953,7 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16852
16953
|
setToText("");
|
|
16853
16954
|
setMonth(/* @__PURE__ */ new Date());
|
|
16854
16955
|
};
|
|
16855
|
-
const disabledMatchers =
|
|
16956
|
+
const disabledMatchers = React68.useMemo(
|
|
16856
16957
|
() => createDisabledMatchers({
|
|
16857
16958
|
minDate: normalizedMinDate,
|
|
16858
16959
|
maxDate: normalizedMaxDate,
|
|
@@ -16871,7 +16972,7 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16871
16972
|
openCalendar();
|
|
16872
16973
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
16873
16974
|
};
|
|
16874
|
-
|
|
16975
|
+
React68.useImperativeHandle(
|
|
16875
16976
|
ref,
|
|
16876
16977
|
() => ({
|
|
16877
16978
|
setDateRange: (range) => {
|
|
@@ -16894,7 +16995,7 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16894
16995
|
syncMonthToValue
|
|
16895
16996
|
]
|
|
16896
16997
|
);
|
|
16897
|
-
return /* @__PURE__ */ (0,
|
|
16998
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16898
16999
|
"div",
|
|
16899
17000
|
{
|
|
16900
17001
|
ref: containerRef,
|
|
@@ -16905,9 +17006,9 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16905
17006
|
className
|
|
16906
17007
|
),
|
|
16907
17008
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16908
|
-
children: /* @__PURE__ */ (0,
|
|
16909
|
-
/* @__PURE__ */ (0,
|
|
16910
|
-
/* @__PURE__ */ (0,
|
|
17009
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
|
|
17010
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative w-full", children: [
|
|
17011
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16911
17012
|
DateRangeInputs,
|
|
16912
17013
|
{
|
|
16913
17014
|
fromId,
|
|
@@ -16958,7 +17059,7 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16958
17059
|
onToggleCalendar: toggleCalendar
|
|
16959
17060
|
}
|
|
16960
17061
|
),
|
|
16961
|
-
/* @__PURE__ */ (0,
|
|
17062
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16962
17063
|
Fieldset,
|
|
16963
17064
|
{
|
|
16964
17065
|
isFocused,
|
|
@@ -16975,7 +17076,7 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16975
17076
|
tooltip
|
|
16976
17077
|
}
|
|
16977
17078
|
),
|
|
16978
|
-
/* @__PURE__ */ (0,
|
|
17079
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16979
17080
|
DateRangePopover,
|
|
16980
17081
|
{
|
|
16981
17082
|
isOpen: isOpen && !isMobile2,
|
|
@@ -16984,7 +17085,7 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
16984
17085
|
drawerTitle,
|
|
16985
17086
|
drawerDescription,
|
|
16986
17087
|
onClose: closeCalendar,
|
|
16987
|
-
children: /* @__PURE__ */ (0,
|
|
17088
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16988
17089
|
DateRangeCalendar,
|
|
16989
17090
|
{
|
|
16990
17091
|
value,
|
|
@@ -17005,7 +17106,7 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
17005
17106
|
}
|
|
17006
17107
|
)
|
|
17007
17108
|
] }),
|
|
17008
|
-
/* @__PURE__ */ (0,
|
|
17109
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
17009
17110
|
DateRangePopover,
|
|
17010
17111
|
{
|
|
17011
17112
|
isOpen: isOpen && isMobile2,
|
|
@@ -17014,7 +17115,7 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
17014
17115
|
drawerTitle,
|
|
17015
17116
|
drawerDescription,
|
|
17016
17117
|
onClose: closeCalendar,
|
|
17017
|
-
children: /* @__PURE__ */ (0,
|
|
17118
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
17018
17119
|
DateRangeCalendar,
|
|
17019
17120
|
{
|
|
17020
17121
|
value,
|
|
@@ -17034,9 +17135,9 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
17034
17135
|
)
|
|
17035
17136
|
}
|
|
17036
17137
|
),
|
|
17037
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
17038
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
17039
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
17138
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17139
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17140
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
17040
17141
|
FieldErrorMessage,
|
|
17041
17142
|
{
|
|
17042
17143
|
id: errorId,
|
|
@@ -17050,7 +17151,7 @@ var DashboardDateRangePicker = React67.forwardRef(function DashboardDateRangePic
|
|
|
17050
17151
|
});
|
|
17051
17152
|
|
|
17052
17153
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17053
|
-
var
|
|
17154
|
+
var React69 = __toESM(require("react"), 1);
|
|
17054
17155
|
var import_react_i18next37 = require("react-i18next");
|
|
17055
17156
|
var import_date_fns4 = require("date-fns");
|
|
17056
17157
|
var import_react_day_picker2 = require("react-day-picker");
|
|
@@ -17073,11 +17174,11 @@ function useValidateDates({
|
|
|
17073
17174
|
const { t } = (0, import_react_i18next37.useTranslation)();
|
|
17074
17175
|
const handleError = useEvent(onError);
|
|
17075
17176
|
const handleSuccess = useEvent(onSuccess);
|
|
17076
|
-
const errorFormatter =
|
|
17177
|
+
const errorFormatter = React69.useMemo(
|
|
17077
17178
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17078
17179
|
[displayFormat]
|
|
17079
17180
|
);
|
|
17080
|
-
const validateDates =
|
|
17181
|
+
const validateDates = React69.useCallback(
|
|
17081
17182
|
(dates) => {
|
|
17082
17183
|
const startDate = dates?.from;
|
|
17083
17184
|
const endDate = dates?.to;
|
|
@@ -17127,9 +17228,9 @@ function useValidateDates({
|
|
|
17127
17228
|
}
|
|
17128
17229
|
|
|
17129
17230
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17130
|
-
var
|
|
17231
|
+
var React70 = __toESM(require("react"), 1);
|
|
17131
17232
|
var import_date_fns5 = require("date-fns");
|
|
17132
|
-
var
|
|
17233
|
+
var import_jsx_runtime174 = require("react/jsx-runtime");
|
|
17133
17234
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17134
17235
|
function parseTime(value) {
|
|
17135
17236
|
return (0, import_date_fns5.parse)(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17171,22 +17272,22 @@ var FORMAT_SETTINGS = {
|
|
|
17171
17272
|
},
|
|
17172
17273
|
hours: { intervalUnit: "H", interval: 1, minTime: "00:00", maxTime: "23:00" }
|
|
17173
17274
|
};
|
|
17174
|
-
var DashboardTimePicker =
|
|
17275
|
+
var DashboardTimePicker = React70.forwardRef(
|
|
17175
17276
|
function DashboardTimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17176
|
-
const resolvedOptions =
|
|
17277
|
+
const resolvedOptions = React70.useMemo(() => {
|
|
17177
17278
|
if (options) return options;
|
|
17178
17279
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17179
17280
|
return buildOptions(settings);
|
|
17180
17281
|
}, [formatName, options, timeSettings]);
|
|
17181
|
-
return /* @__PURE__ */ (0,
|
|
17282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(DashboardSelect, { ref, ...selectProps, options: resolvedOptions });
|
|
17182
17283
|
}
|
|
17183
17284
|
);
|
|
17184
17285
|
|
|
17185
17286
|
// src/dashboard/file-input/FileInput.tsx
|
|
17186
|
-
var
|
|
17287
|
+
var React71 = __toESM(require("react"), 1);
|
|
17187
17288
|
var import_lucide_react51 = require("lucide-react");
|
|
17188
17289
|
var import_react_i18next38 = require("react-i18next");
|
|
17189
|
-
var
|
|
17290
|
+
var import_jsx_runtime175 = require("react/jsx-runtime");
|
|
17190
17291
|
function defaultFileNameFromUrl(url) {
|
|
17191
17292
|
try {
|
|
17192
17293
|
const parsed = new URL(url);
|
|
@@ -17199,7 +17300,7 @@ function defaultFileNameFromUrl(url) {
|
|
|
17199
17300
|
function defaultDownload(url) {
|
|
17200
17301
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17201
17302
|
}
|
|
17202
|
-
var DashboardFileInput =
|
|
17303
|
+
var DashboardFileInput = React71.forwardRef(
|
|
17203
17304
|
function DashboardFileInput2({
|
|
17204
17305
|
label,
|
|
17205
17306
|
value,
|
|
@@ -17223,12 +17324,12 @@ var DashboardFileInput = React70.forwardRef(
|
|
|
17223
17324
|
downloadLabel,
|
|
17224
17325
|
fileNameFromUrl = defaultFileNameFromUrl
|
|
17225
17326
|
}, ref) {
|
|
17226
|
-
const internalRef =
|
|
17327
|
+
const internalRef = React71.useRef(null);
|
|
17227
17328
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17228
17329
|
const { t } = (0, import_react_i18next38.useTranslation)();
|
|
17229
17330
|
const resolvedLabel = label ?? t("upload_file");
|
|
17230
17331
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17231
|
-
const reactId =
|
|
17332
|
+
const reactId = React71.useId();
|
|
17232
17333
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17233
17334
|
const labelId = `${inputId}-label`;
|
|
17234
17335
|
const errorId = `${inputId}-error`;
|
|
@@ -17254,7 +17355,7 @@ var DashboardFileInput = React70.forwardRef(
|
|
|
17254
17355
|
event.stopPropagation();
|
|
17255
17356
|
if (isUrl) onDownload(value);
|
|
17256
17357
|
};
|
|
17257
|
-
return /* @__PURE__ */ (0,
|
|
17358
|
+
return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(
|
|
17258
17359
|
"label",
|
|
17259
17360
|
{
|
|
17260
17361
|
htmlFor: inputId,
|
|
@@ -17267,7 +17368,7 @@ var DashboardFileInput = React70.forwardRef(
|
|
|
17267
17368
|
),
|
|
17268
17369
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17269
17370
|
children: [
|
|
17270
|
-
/* @__PURE__ */ (0,
|
|
17371
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17271
17372
|
"input",
|
|
17272
17373
|
{
|
|
17273
17374
|
ref: inputRef,
|
|
@@ -17283,9 +17384,9 @@ var DashboardFileInput = React70.forwardRef(
|
|
|
17283
17384
|
"aria-invalid": isInvalid
|
|
17284
17385
|
}
|
|
17285
17386
|
),
|
|
17286
|
-
/* @__PURE__ */ (0,
|
|
17287
|
-
/* @__PURE__ */ (0,
|
|
17288
|
-
/* @__PURE__ */ (0,
|
|
17387
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
|
|
17388
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "relative w-full", children: [
|
|
17389
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(
|
|
17289
17390
|
"div",
|
|
17290
17391
|
{
|
|
17291
17392
|
className: cn(
|
|
@@ -17293,25 +17394,25 @@ var DashboardFileInput = React70.forwardRef(
|
|
|
17293
17394
|
isEmpty && "bg-[var(--chekin-color-surface-input-empty)]"
|
|
17294
17395
|
),
|
|
17295
17396
|
children: [
|
|
17296
|
-
hasFileChip ? /* @__PURE__ */ (0,
|
|
17397
|
+
hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(
|
|
17297
17398
|
"div",
|
|
17298
17399
|
{
|
|
17299
17400
|
className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
|
|
17300
17401
|
onClick: (event) => event.preventDefault(),
|
|
17301
17402
|
children: [
|
|
17302
|
-
isUrl ? /* @__PURE__ */ (0,
|
|
17403
|
+
isUrl ? /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(
|
|
17303
17404
|
"button",
|
|
17304
17405
|
{
|
|
17305
17406
|
type: "button",
|
|
17306
17407
|
onClick: handleDownload,
|
|
17307
17408
|
className: "inline-flex items-center gap-[7px] truncate border-0 bg-transparent p-0 text-[14px] font-medium text-[var(--chekin-color-brand-navy)] outline-none",
|
|
17308
17409
|
children: [
|
|
17309
|
-
/* @__PURE__ */ (0,
|
|
17310
|
-
/* @__PURE__ */ (0,
|
|
17410
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
17411
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsx)(import_lucide_react51.Download, { size: 15 })
|
|
17311
17412
|
]
|
|
17312
17413
|
}
|
|
17313
|
-
) : /* @__PURE__ */ (0,
|
|
17314
|
-
/* @__PURE__ */ (0,
|
|
17414
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
17415
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17315
17416
|
"button",
|
|
17316
17417
|
{
|
|
17317
17418
|
type: "button",
|
|
@@ -17319,20 +17420,20 @@ var DashboardFileInput = React70.forwardRef(
|
|
|
17319
17420
|
onClick: handleClear,
|
|
17320
17421
|
className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734]",
|
|
17321
17422
|
"aria-label": t("remove_file"),
|
|
17322
|
-
children: /* @__PURE__ */ (0,
|
|
17423
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(import_lucide_react51.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17323
17424
|
}
|
|
17324
17425
|
)
|
|
17325
17426
|
]
|
|
17326
17427
|
}
|
|
17327
|
-
) : /* @__PURE__ */ (0,
|
|
17328
|
-
/* @__PURE__ */ (0,
|
|
17329
|
-
loading && /* @__PURE__ */ (0,
|
|
17330
|
-
/* @__PURE__ */ (0,
|
|
17428
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
17429
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
17430
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
17431
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsx)(import_lucide_react51.Paperclip, { size: 20 })
|
|
17331
17432
|
] })
|
|
17332
17433
|
]
|
|
17333
17434
|
}
|
|
17334
17435
|
),
|
|
17335
|
-
/* @__PURE__ */ (0,
|
|
17436
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17336
17437
|
Fieldset,
|
|
17337
17438
|
{
|
|
17338
17439
|
isFocused: false,
|
|
@@ -17350,9 +17451,9 @@ var DashboardFileInput = React70.forwardRef(
|
|
|
17350
17451
|
}
|
|
17351
17452
|
)
|
|
17352
17453
|
] }),
|
|
17353
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
17354
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
17355
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
17454
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17455
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17456
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17356
17457
|
FieldErrorMessage,
|
|
17357
17458
|
{
|
|
17358
17459
|
id: errorId,
|
|
@@ -17368,8 +17469,8 @@ var DashboardFileInput = React70.forwardRef(
|
|
|
17368
17469
|
);
|
|
17369
17470
|
|
|
17370
17471
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17371
|
-
var
|
|
17372
|
-
var
|
|
17472
|
+
var React72 = __toESM(require("react"), 1);
|
|
17473
|
+
var import_jsx_runtime176 = require("react/jsx-runtime");
|
|
17373
17474
|
function DashboardSelectIconsBox({
|
|
17374
17475
|
children,
|
|
17375
17476
|
icons,
|
|
@@ -17384,9 +17485,9 @@ function DashboardSelectIconsBox({
|
|
|
17384
17485
|
className,
|
|
17385
17486
|
boxClassName
|
|
17386
17487
|
}) {
|
|
17387
|
-
const containerRef =
|
|
17488
|
+
const containerRef = React72.useRef(null);
|
|
17388
17489
|
const isControlled = controlledOpen !== void 0;
|
|
17389
|
-
const [internalOpen, setInternalOpen] =
|
|
17490
|
+
const [internalOpen, setInternalOpen] = React72.useState(defaultOpen);
|
|
17390
17491
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17391
17492
|
const setOpen = (next) => {
|
|
17392
17493
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17405,7 +17506,7 @@ function DashboardSelectIconsBox({
|
|
|
17405
17506
|
onSelect(iconName);
|
|
17406
17507
|
setOpen(false);
|
|
17407
17508
|
};
|
|
17408
|
-
return /* @__PURE__ */ (0,
|
|
17509
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(
|
|
17409
17510
|
"div",
|
|
17410
17511
|
{
|
|
17411
17512
|
ref: containerRef,
|
|
@@ -17413,7 +17514,7 @@ function DashboardSelectIconsBox({
|
|
|
17413
17514
|
className: cn("relative inline-block", className),
|
|
17414
17515
|
children: [
|
|
17415
17516
|
children,
|
|
17416
|
-
isOpen && /* @__PURE__ */ (0,
|
|
17517
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17417
17518
|
"div",
|
|
17418
17519
|
{
|
|
17419
17520
|
className: cn(
|
|
@@ -17424,7 +17525,7 @@ function DashboardSelectIconsBox({
|
|
|
17424
17525
|
boxClassName
|
|
17425
17526
|
),
|
|
17426
17527
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
17427
|
-
children: icons.map((iconName) => /* @__PURE__ */ (0,
|
|
17528
|
+
children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17428
17529
|
"button",
|
|
17429
17530
|
{
|
|
17430
17531
|
type: "button",
|
|
@@ -17444,11 +17545,11 @@ function DashboardSelectIconsBox({
|
|
|
17444
17545
|
}
|
|
17445
17546
|
|
|
17446
17547
|
// src/searchable-select/SearchableSelect.tsx
|
|
17447
|
-
var
|
|
17548
|
+
var React73 = __toESM(require("react"), 1);
|
|
17448
17549
|
var import_lucide_react52 = require("lucide-react");
|
|
17449
17550
|
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
17450
17551
|
var import_react82 = require("react");
|
|
17451
|
-
var
|
|
17552
|
+
var import_jsx_runtime177 = require("react/jsx-runtime");
|
|
17452
17553
|
var ROW_HEIGHT = 48;
|
|
17453
17554
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
17454
17555
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -17489,13 +17590,13 @@ var SearchableSelectInternal = ({
|
|
|
17489
17590
|
loadingMessage
|
|
17490
17591
|
}, ref) => {
|
|
17491
17592
|
const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
|
|
17492
|
-
const reactId =
|
|
17493
|
-
const [open, setOpen] =
|
|
17494
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
17495
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
17496
|
-
const containerRef =
|
|
17497
|
-
const triggerRef =
|
|
17498
|
-
const inputRef =
|
|
17593
|
+
const reactId = React73.useId();
|
|
17594
|
+
const [open, setOpen] = React73.useState(false);
|
|
17595
|
+
const [internalSearchValue, setInternalSearchValue] = React73.useState("");
|
|
17596
|
+
const [highlightedIndex, setHighlightedIndex] = React73.useState(-1);
|
|
17597
|
+
const containerRef = React73.useRef(null);
|
|
17598
|
+
const triggerRef = React73.useRef(null);
|
|
17599
|
+
const inputRef = React73.useRef(null);
|
|
17499
17600
|
const listboxId = `${reactId}-listbox`;
|
|
17500
17601
|
const labelId = `${reactId}-label`;
|
|
17501
17602
|
const valueId = `${reactId}-value`;
|
|
@@ -17504,13 +17605,13 @@ var SearchableSelectInternal = ({
|
|
|
17504
17605
|
const searchInputId = `${reactId}-search`;
|
|
17505
17606
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
17506
17607
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
17507
|
-
const visibleOptions =
|
|
17608
|
+
const visibleOptions = React73.useMemo(() => {
|
|
17508
17609
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
17509
17610
|
return options;
|
|
17510
17611
|
}
|
|
17511
17612
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
17512
17613
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
17513
|
-
const selectedIndex =
|
|
17614
|
+
const selectedIndex = React73.useMemo(
|
|
17514
17615
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
17515
17616
|
[value?.value, visibleOptions]
|
|
17516
17617
|
);
|
|
@@ -17536,7 +17637,7 @@ var SearchableSelectInternal = ({
|
|
|
17536
17637
|
},
|
|
17537
17638
|
[handleOnOpenChange]
|
|
17538
17639
|
);
|
|
17539
|
-
|
|
17640
|
+
React73.useEffect(() => {
|
|
17540
17641
|
if (isBlocked) {
|
|
17541
17642
|
setSelectOpen(false);
|
|
17542
17643
|
return;
|
|
@@ -17549,7 +17650,7 @@ var SearchableSelectInternal = ({
|
|
|
17549
17650
|
window.cancelAnimationFrame(frameId);
|
|
17550
17651
|
};
|
|
17551
17652
|
}, [isBlocked, open, setSelectOpen]);
|
|
17552
|
-
|
|
17653
|
+
React73.useEffect(() => {
|
|
17553
17654
|
if (!open) {
|
|
17554
17655
|
setHighlightedIndex(-1);
|
|
17555
17656
|
return;
|
|
@@ -17617,7 +17718,7 @@ var SearchableSelectInternal = ({
|
|
|
17617
17718
|
}
|
|
17618
17719
|
}
|
|
17619
17720
|
}
|
|
17620
|
-
const content = /* @__PURE__ */ (0,
|
|
17721
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17621
17722
|
SearchableSelectContent,
|
|
17622
17723
|
{
|
|
17623
17724
|
inputId: searchInputId,
|
|
@@ -17644,10 +17745,10 @@ var SearchableSelectInternal = ({
|
|
|
17644
17745
|
onOptionHover: setHighlightedIndex
|
|
17645
17746
|
}
|
|
17646
17747
|
);
|
|
17647
|
-
|
|
17648
|
-
return /* @__PURE__ */ (0,
|
|
17649
|
-
name && /* @__PURE__ */ (0,
|
|
17650
|
-
/* @__PURE__ */ (0,
|
|
17748
|
+
React73.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
17749
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
17750
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
17751
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17651
17752
|
FieldTrigger,
|
|
17652
17753
|
{
|
|
17653
17754
|
id: `${reactId}-trigger`,
|
|
@@ -17682,7 +17783,7 @@ var SearchableSelectInternal = ({
|
|
|
17682
17783
|
},
|
|
17683
17784
|
onKeyDown: handleTriggerKeyDown,
|
|
17684
17785
|
onBlur,
|
|
17685
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
17786
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17686
17787
|
import_lucide_react52.ChevronDown,
|
|
17687
17788
|
{
|
|
17688
17789
|
className: cn(
|
|
@@ -17693,7 +17794,7 @@ var SearchableSelectInternal = ({
|
|
|
17693
17794
|
)
|
|
17694
17795
|
}
|
|
17695
17796
|
),
|
|
17696
|
-
isMobile2 ? /* @__PURE__ */ (0,
|
|
17797
|
+
isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17697
17798
|
Drawer,
|
|
17698
17799
|
{
|
|
17699
17800
|
open,
|
|
@@ -17705,13 +17806,13 @@ var SearchableSelectInternal = ({
|
|
|
17705
17806
|
}
|
|
17706
17807
|
closeSelect();
|
|
17707
17808
|
},
|
|
17708
|
-
children: /* @__PURE__ */ (0,
|
|
17709
|
-
/* @__PURE__ */ (0,
|
|
17710
|
-
/* @__PURE__ */ (0,
|
|
17711
|
-
/* @__PURE__ */ (0,
|
|
17809
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
17810
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
17811
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
17812
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
17712
17813
|
] })
|
|
17713
17814
|
}
|
|
17714
|
-
) : open ? /* @__PURE__ */ (0,
|
|
17815
|
+
) : open ? /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17715
17816
|
"div",
|
|
17716
17817
|
{
|
|
17717
17818
|
className: cn(
|
|
@@ -17723,7 +17824,7 @@ var SearchableSelectInternal = ({
|
|
|
17723
17824
|
) : null
|
|
17724
17825
|
] });
|
|
17725
17826
|
};
|
|
17726
|
-
var SearchableSelect =
|
|
17827
|
+
var SearchableSelect = React73.forwardRef(
|
|
17727
17828
|
SearchableSelectInternal
|
|
17728
17829
|
);
|
|
17729
17830
|
function SearchableSelectContent({
|
|
@@ -17750,9 +17851,9 @@ function SearchableSelectContent({
|
|
|
17750
17851
|
onOptionClick,
|
|
17751
17852
|
onOptionHover
|
|
17752
17853
|
}) {
|
|
17753
|
-
const listRef =
|
|
17754
|
-
const lastLoadMoreOptionsLengthRef =
|
|
17755
|
-
const previousHighlightedIndexRef =
|
|
17854
|
+
const listRef = React73.useRef(null);
|
|
17855
|
+
const lastLoadMoreOptionsLengthRef = React73.useRef(null);
|
|
17856
|
+
const previousHighlightedIndexRef = React73.useRef(highlightedIndex);
|
|
17756
17857
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
17757
17858
|
const virtualizer = (0, import_react_virtual3.useVirtualizer)({
|
|
17758
17859
|
count: rowCount,
|
|
@@ -17763,7 +17864,7 @@ function SearchableSelectContent({
|
|
|
17763
17864
|
const virtualItems = virtualizer.getVirtualItems();
|
|
17764
17865
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
17765
17866
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
17766
|
-
|
|
17867
|
+
React73.useEffect(() => {
|
|
17767
17868
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
17768
17869
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
17769
17870
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -17771,23 +17872,23 @@ function SearchableSelectContent({
|
|
|
17771
17872
|
onLoadMore?.();
|
|
17772
17873
|
}
|
|
17773
17874
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
17774
|
-
|
|
17875
|
+
React73.useEffect(() => {
|
|
17775
17876
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
17776
17877
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
17777
17878
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
17778
17879
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
17779
17880
|
}
|
|
17780
17881
|
}, [highlightedIndex, virtualizer]);
|
|
17781
|
-
return /* @__PURE__ */ (0,
|
|
17782
|
-
/* @__PURE__ */ (0,
|
|
17783
|
-
/* @__PURE__ */ (0,
|
|
17882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: "p-2", children: [
|
|
17883
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: "relative mb-2", children: [
|
|
17884
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17784
17885
|
import_lucide_react52.Search,
|
|
17785
17886
|
{
|
|
17786
17887
|
"aria-hidden": "true",
|
|
17787
17888
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
17788
17889
|
}
|
|
17789
17890
|
),
|
|
17790
|
-
/* @__PURE__ */ (0,
|
|
17891
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17791
17892
|
"input",
|
|
17792
17893
|
{
|
|
17793
17894
|
id: inputId,
|
|
@@ -17806,7 +17907,7 @@ function SearchableSelectContent({
|
|
|
17806
17907
|
}
|
|
17807
17908
|
)
|
|
17808
17909
|
] }),
|
|
17809
|
-
loading && options.length === 0 ? /* @__PURE__ */ (0,
|
|
17910
|
+
loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17810
17911
|
"div",
|
|
17811
17912
|
{
|
|
17812
17913
|
id: listboxId,
|
|
@@ -17815,7 +17916,7 @@ function SearchableSelectContent({
|
|
|
17815
17916
|
"aria-labelledby": labelId,
|
|
17816
17917
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
17817
17918
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
17818
|
-
children: /* @__PURE__ */ (0,
|
|
17919
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17819
17920
|
"div",
|
|
17820
17921
|
{
|
|
17821
17922
|
className: "relative w-full",
|
|
@@ -17823,7 +17924,7 @@ function SearchableSelectContent({
|
|
|
17823
17924
|
children: virtualItems.map((virtualItem) => {
|
|
17824
17925
|
const option = options[virtualItem.index];
|
|
17825
17926
|
if (!option) {
|
|
17826
|
-
return /* @__PURE__ */ (0,
|
|
17927
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17827
17928
|
"div",
|
|
17828
17929
|
{
|
|
17829
17930
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -17838,7 +17939,7 @@ function SearchableSelectContent({
|
|
|
17838
17939
|
}
|
|
17839
17940
|
const isSelected = value?.value === option.value;
|
|
17840
17941
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
17841
|
-
return /* @__PURE__ */ (0,
|
|
17942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17842
17943
|
"button",
|
|
17843
17944
|
{
|
|
17844
17945
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -17860,7 +17961,7 @@ function SearchableSelectContent({
|
|
|
17860
17961
|
height: `${virtualItem.size}px`,
|
|
17861
17962
|
transform: `translateY(${virtualItem.start}px)`
|
|
17862
17963
|
},
|
|
17863
|
-
children: /* @__PURE__ */ (0,
|
|
17964
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("span", { className: "truncate text-center", children: String(option.label) })
|
|
17864
17965
|
},
|
|
17865
17966
|
`${String(option.value)}-${virtualItem.index}`
|
|
17866
17967
|
);
|
|
@@ -17950,14 +18051,14 @@ function getErrorMessage(error) {
|
|
|
17950
18051
|
|
|
17951
18052
|
// src/lib/toastResponseError.tsx
|
|
17952
18053
|
var import_i18next = __toESM(require("i18next"), 1);
|
|
17953
|
-
var
|
|
18054
|
+
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
17954
18055
|
function addSupportEmailToMessage(message, prefixText) {
|
|
17955
18056
|
if (typeof message !== "string") {
|
|
17956
18057
|
return message;
|
|
17957
18058
|
}
|
|
17958
18059
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
17959
|
-
return /* @__PURE__ */ (0,
|
|
17960
|
-
/* @__PURE__ */ (0,
|
|
18060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { children: [
|
|
18061
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { children: builtMessage }),
|
|
17961
18062
|
import_i18next.default.t("reach_us_at_email")
|
|
17962
18063
|
] });
|
|
17963
18064
|
}
|
|
@@ -18145,6 +18246,7 @@ function toastResponseError(error, options = {}) {
|
|
|
18145
18246
|
RatingProgress,
|
|
18146
18247
|
RatingRadioGroup,
|
|
18147
18248
|
RatingStars,
|
|
18249
|
+
ResponsiveDropdown,
|
|
18148
18250
|
ResponsiveSheet,
|
|
18149
18251
|
RotateArrow,
|
|
18150
18252
|
ScrollArea,
|