@chekinapp/ui 0.0.121 → 0.0.122
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 +894 -943
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -26
- package/dist/index.d.ts +3 -26
- package/dist/index.js +747 -795
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -232,7 +232,6 @@ __export(index_exports, {
|
|
|
232
232
|
ScrollBar: () => ScrollBar,
|
|
233
233
|
SearchButton: () => SearchButton,
|
|
234
234
|
SearchInput: () => SearchInput,
|
|
235
|
-
SearchingSelect: () => SearchingSelect,
|
|
236
235
|
Section: () => Section,
|
|
237
236
|
SectionGroup: () => SectionGroup,
|
|
238
237
|
SectionTag: () => SectionTag,
|
|
@@ -12784,11 +12783,8 @@ var Input = React44.forwardRef(
|
|
|
12784
12783
|
Input.displayName = "Input";
|
|
12785
12784
|
|
|
12786
12785
|
// src/dashboard/phone-input/PhoneInput.tsx
|
|
12787
|
-
var
|
|
12788
|
-
var
|
|
12789
|
-
|
|
12790
|
-
// src/dashboard/searching-select/SearchingSelect.tsx
|
|
12791
|
-
var React53 = __toESM(require("react"), 1);
|
|
12786
|
+
var React50 = __toESM(require("react"), 1);
|
|
12787
|
+
var import_react_i18next34 = require("react-i18next");
|
|
12792
12788
|
|
|
12793
12789
|
// src/dashboard/select/Select.tsx
|
|
12794
12790
|
var React49 = __toESM(require("react"), 1);
|
|
@@ -14433,21 +14429,254 @@ function SelectInternal(props, ref) {
|
|
|
14433
14429
|
}
|
|
14434
14430
|
var Select = React49.forwardRef(SelectInternal);
|
|
14435
14431
|
|
|
14436
|
-
// src/dashboard/
|
|
14432
|
+
// src/dashboard/phone-input/utils.ts
|
|
14433
|
+
var PREFIX_REGEX = /^\+/;
|
|
14434
|
+
function clearPhoneNumber(value) {
|
|
14435
|
+
return value.replace(/[^0-9]/g, "");
|
|
14436
|
+
}
|
|
14437
|
+
function findPhoneCode(value, codeSet) {
|
|
14438
|
+
const hasPrefix = PREFIX_REGEX.test(value);
|
|
14439
|
+
const maxLength = hasPrefix ? 4 : 3;
|
|
14440
|
+
const minLength = hasPrefix ? 2 : 1;
|
|
14441
|
+
for (let length = minLength; length <= maxLength; length += 1) {
|
|
14442
|
+
const candidate = value.slice(0, length);
|
|
14443
|
+
const normalized = hasPrefix ? candidate : `+${candidate}`;
|
|
14444
|
+
if (codeSet.has(normalized)) {
|
|
14445
|
+
return normalized;
|
|
14446
|
+
}
|
|
14447
|
+
}
|
|
14448
|
+
return void 0;
|
|
14449
|
+
}
|
|
14450
|
+
function parsePhoneValueWithOptions(options) {
|
|
14451
|
+
const codeSet = new Set(options.map((option) => option.value));
|
|
14452
|
+
return (value) => {
|
|
14453
|
+
if (!PREFIX_REGEX.test(value)) {
|
|
14454
|
+
return { code: "", number: value };
|
|
14455
|
+
}
|
|
14456
|
+
const code = findPhoneCode(value, codeSet);
|
|
14457
|
+
if (!code) {
|
|
14458
|
+
return { code: "", number: value };
|
|
14459
|
+
}
|
|
14460
|
+
return {
|
|
14461
|
+
code,
|
|
14462
|
+
number: value.slice(code.length)
|
|
14463
|
+
};
|
|
14464
|
+
};
|
|
14465
|
+
}
|
|
14466
|
+
function findPhoneCodeOption(options, code) {
|
|
14467
|
+
return options.find((option) => option.value === code);
|
|
14468
|
+
}
|
|
14469
|
+
function formatPhoneCodeOptionLabel(option) {
|
|
14470
|
+
const label = String(option.label);
|
|
14471
|
+
const value = String(option.value);
|
|
14472
|
+
return label.includes(value) ? label : `${label} ${value}`;
|
|
14473
|
+
}
|
|
14474
|
+
|
|
14475
|
+
// src/dashboard/phone-input/PhoneInput.tsx
|
|
14476
|
+
var import_jsx_runtime159 = require("react/jsx-runtime");
|
|
14477
|
+
var EMPTY_VALUE = { code: "", number: "" };
|
|
14478
|
+
var PhoneInput = React50.forwardRef(
|
|
14479
|
+
function PhoneInput2({
|
|
14480
|
+
options,
|
|
14481
|
+
value,
|
|
14482
|
+
onChange,
|
|
14483
|
+
onBlur,
|
|
14484
|
+
name,
|
|
14485
|
+
codeName,
|
|
14486
|
+
numberName,
|
|
14487
|
+
label,
|
|
14488
|
+
topLabel,
|
|
14489
|
+
prefixLabel,
|
|
14490
|
+
placeholder,
|
|
14491
|
+
codePlaceholder = "+00",
|
|
14492
|
+
disabled,
|
|
14493
|
+
loading,
|
|
14494
|
+
readOnly,
|
|
14495
|
+
codeReadOnly,
|
|
14496
|
+
optional,
|
|
14497
|
+
tooltip,
|
|
14498
|
+
error,
|
|
14499
|
+
invalid,
|
|
14500
|
+
className,
|
|
14501
|
+
autoDetectCode = true,
|
|
14502
|
+
searchable = true,
|
|
14503
|
+
defaultCode
|
|
14504
|
+
}, ref) {
|
|
14505
|
+
const { t } = (0, import_react_i18next34.useTranslation)();
|
|
14506
|
+
const safeValue = value ?? EMPTY_VALUE;
|
|
14507
|
+
const effectiveCode = safeValue.code || defaultCode || "";
|
|
14508
|
+
const resolvedLabel = label ?? "";
|
|
14509
|
+
const resolvedPrefixLabel = prefixLabel ?? t("prefix");
|
|
14510
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
14511
|
+
const isCodeBlocked = isBlocked || Boolean(readOnly) || Boolean(codeReadOnly);
|
|
14512
|
+
const hasExternalError = Boolean(error);
|
|
14513
|
+
const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !effectiveCode;
|
|
14514
|
+
const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
|
|
14515
|
+
const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
|
|
14516
|
+
const combinedValue = effectiveCode || safeValue.number ? `${effectiveCode}${safeValue.number}` : "";
|
|
14517
|
+
const codeOptions = React50.useMemo(
|
|
14518
|
+
() => options.map((option) => ({
|
|
14519
|
+
value: option.value,
|
|
14520
|
+
label: formatPhoneCodeOptionLabel(option),
|
|
14521
|
+
data: option.data,
|
|
14522
|
+
isDisabled: option.disabled
|
|
14523
|
+
})),
|
|
14524
|
+
[options]
|
|
14525
|
+
);
|
|
14526
|
+
const selectedCodeOption = React50.useMemo(
|
|
14527
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
14528
|
+
[codeOptions, effectiveCode]
|
|
14529
|
+
);
|
|
14530
|
+
const parsePhoneValue = React50.useMemo(
|
|
14531
|
+
() => parsePhoneValueWithOptions(options),
|
|
14532
|
+
[options]
|
|
14533
|
+
);
|
|
14534
|
+
const emitChange = (next) => {
|
|
14535
|
+
onChange?.(next, name);
|
|
14536
|
+
};
|
|
14537
|
+
const handleCodeChange = (option) => {
|
|
14538
|
+
if (!option) return;
|
|
14539
|
+
emitChange({ code: option.value, number: safeValue.number });
|
|
14540
|
+
};
|
|
14541
|
+
const handleNumberChange = (event) => {
|
|
14542
|
+
if (readOnly || disabled) return;
|
|
14543
|
+
const rawValue = event.target.value;
|
|
14544
|
+
if (!autoDetectCode) {
|
|
14545
|
+
emitChange({ code: effectiveCode, number: clearPhoneNumber(rawValue) });
|
|
14546
|
+
return;
|
|
14547
|
+
}
|
|
14548
|
+
const parsed = parsePhoneValue(rawValue);
|
|
14549
|
+
const cleanedNumber = clearPhoneNumber(parsed.number);
|
|
14550
|
+
if (parsed.code) {
|
|
14551
|
+
emitChange({ code: parsed.code, number: cleanedNumber });
|
|
14552
|
+
return;
|
|
14553
|
+
}
|
|
14554
|
+
emitChange({ code: effectiveCode, number: cleanedNumber });
|
|
14555
|
+
};
|
|
14556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
|
|
14557
|
+
"div",
|
|
14558
|
+
{
|
|
14559
|
+
className: cn(
|
|
14560
|
+
"relative w-full max-w-[var(--field-max-width,296px)]",
|
|
14561
|
+
disabled && "cursor-not-allowed opacity-50",
|
|
14562
|
+
loading && "cursor-progress",
|
|
14563
|
+
className
|
|
14564
|
+
),
|
|
14565
|
+
children: [
|
|
14566
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
14567
|
+
codeName && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14568
|
+
"input",
|
|
14569
|
+
{
|
|
14570
|
+
type: "hidden",
|
|
14571
|
+
name: codeName,
|
|
14572
|
+
value: effectiveCode,
|
|
14573
|
+
disabled
|
|
14574
|
+
}
|
|
14575
|
+
),
|
|
14576
|
+
numberName && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14577
|
+
"input",
|
|
14578
|
+
{
|
|
14579
|
+
type: "hidden",
|
|
14580
|
+
name: numberName,
|
|
14581
|
+
value: safeValue.number,
|
|
14582
|
+
disabled
|
|
14583
|
+
}
|
|
14584
|
+
),
|
|
14585
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("label", { className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: topLabel }),
|
|
14586
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2", children: [
|
|
14587
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14588
|
+
Select,
|
|
14589
|
+
{
|
|
14590
|
+
options: codeOptions,
|
|
14591
|
+
value: selectedCodeOption,
|
|
14592
|
+
onChange: handleCodeChange,
|
|
14593
|
+
label: resolvedPrefixLabel,
|
|
14594
|
+
placeholder: codePlaceholder,
|
|
14595
|
+
disabled: isCodeBlocked,
|
|
14596
|
+
loading,
|
|
14597
|
+
invalid: hasInvalidState,
|
|
14598
|
+
hideErrorMessage: true,
|
|
14599
|
+
searchPosition: searchable ? "dropdown" : "trigger",
|
|
14600
|
+
getValueLabel: (option) => option.value,
|
|
14601
|
+
className: "!max-w-none",
|
|
14602
|
+
dropdownClassName: "right-auto w-[280px]"
|
|
14603
|
+
}
|
|
14604
|
+
),
|
|
14605
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14606
|
+
Input,
|
|
14607
|
+
{
|
|
14608
|
+
ref,
|
|
14609
|
+
type: "tel",
|
|
14610
|
+
inputMode: "tel",
|
|
14611
|
+
autoComplete: "tel-national",
|
|
14612
|
+
label: resolvedLabel,
|
|
14613
|
+
value: safeValue.number,
|
|
14614
|
+
placeholder,
|
|
14615
|
+
disabled,
|
|
14616
|
+
readOnly,
|
|
14617
|
+
loading,
|
|
14618
|
+
invalid: hasInvalidState,
|
|
14619
|
+
tooltip,
|
|
14620
|
+
"aria-label": resolvedLabel || name,
|
|
14621
|
+
onChange: handleNumberChange,
|
|
14622
|
+
onBlur,
|
|
14623
|
+
renderErrorMessage: false,
|
|
14624
|
+
wrapperClassName: "!max-w-none"
|
|
14625
|
+
}
|
|
14626
|
+
)
|
|
14627
|
+
] }),
|
|
14628
|
+
!errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime159.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") }),
|
|
14629
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14630
|
+
FieldErrorMessage,
|
|
14631
|
+
{
|
|
14632
|
+
message: errorMessage,
|
|
14633
|
+
"data-testid": name ? `${name}-error` : void 0,
|
|
14634
|
+
className: "mt-[1px] text-[14px]"
|
|
14635
|
+
}
|
|
14636
|
+
)
|
|
14637
|
+
]
|
|
14638
|
+
}
|
|
14639
|
+
);
|
|
14640
|
+
}
|
|
14641
|
+
);
|
|
14642
|
+
PhoneInput.displayName = "PhoneInput";
|
|
14643
|
+
|
|
14644
|
+
// src/dashboard/creatable-select/CreatableSelect.tsx
|
|
14645
|
+
var React51 = __toESM(require("react"), 1);
|
|
14646
|
+
var import_jsx_runtime160 = require("react/jsx-runtime");
|
|
14647
|
+
var CreatableSelect = React51.forwardRef(function CreatableSelect2(props, ref) {
|
|
14648
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Select, { ref, ...props, isCreatable: true });
|
|
14649
|
+
});
|
|
14650
|
+
|
|
14651
|
+
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14437
14652
|
var React52 = __toESM(require("react"), 1);
|
|
14653
|
+
var import_jsx_runtime161 = require("react/jsx-runtime");
|
|
14654
|
+
var MultiSelect = React52.forwardRef(function MultiSelect2(props, ref) {
|
|
14655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Select, { ref, ...props, isMulti: true });
|
|
14656
|
+
});
|
|
14657
|
+
|
|
14658
|
+
// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
|
|
14659
|
+
var React53 = __toESM(require("react"), 1);
|
|
14660
|
+
var import_jsx_runtime162 = require("react/jsx-runtime");
|
|
14661
|
+
var CreatableMultiSelect = React53.forwardRef(function CreatableMultiSelect2(props, ref) {
|
|
14662
|
+
return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
14663
|
+
});
|
|
14664
|
+
|
|
14665
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14666
|
+
var React56 = __toESM(require("react"), 1);
|
|
14438
14667
|
|
|
14439
14668
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14440
|
-
var
|
|
14441
|
-
var
|
|
14669
|
+
var React55 = __toESM(require("react"), 1);
|
|
14670
|
+
var import_react_i18next35 = require("react-i18next");
|
|
14442
14671
|
var import_react_virtual2 = require("@tanstack/react-virtual");
|
|
14443
14672
|
|
|
14444
14673
|
// src/dashboard/infinite-scroll-select/InfiniteScrollContext.tsx
|
|
14445
|
-
var
|
|
14446
|
-
var InfiniteScrollContext =
|
|
14674
|
+
var React54 = __toESM(require("react"), 1);
|
|
14675
|
+
var InfiniteScrollContext = React54.createContext(
|
|
14447
14676
|
null
|
|
14448
14677
|
);
|
|
14449
14678
|
function useInfiniteScrollContext() {
|
|
14450
|
-
const ctx =
|
|
14679
|
+
const ctx = React54.useContext(InfiniteScrollContext);
|
|
14451
14680
|
if (!ctx) {
|
|
14452
14681
|
throw new Error(
|
|
14453
14682
|
"useInfiniteScrollContext must be used within an InfiniteScrollContext.Provider"
|
|
@@ -14457,7 +14686,7 @@ function useInfiniteScrollContext() {
|
|
|
14457
14686
|
}
|
|
14458
14687
|
|
|
14459
14688
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14460
|
-
var
|
|
14689
|
+
var import_jsx_runtime163 = require("react/jsx-runtime");
|
|
14461
14690
|
function VirtualMenuList(props) {
|
|
14462
14691
|
const {
|
|
14463
14692
|
id,
|
|
@@ -14491,10 +14720,10 @@ function VirtualMenuList(props) {
|
|
|
14491
14720
|
loadMoreThreshold
|
|
14492
14721
|
} = useInfiniteScrollContext();
|
|
14493
14722
|
const Option = components?.Option ?? DefaultOption;
|
|
14494
|
-
const { t } = (0,
|
|
14495
|
-
const scrollRef =
|
|
14496
|
-
const lastLoadMoreOptionsLengthRef =
|
|
14497
|
-
const previousHighlightedIndexRef =
|
|
14723
|
+
const { t } = (0, import_react_i18next35.useTranslation)();
|
|
14724
|
+
const scrollRef = React55.useRef(null);
|
|
14725
|
+
const lastLoadMoreOptionsLengthRef = React55.useRef(null);
|
|
14726
|
+
const previousHighlightedIndexRef = React55.useRef(-1);
|
|
14498
14727
|
const showLoaderRow = Boolean(canLoadMore || isLoadingMore);
|
|
14499
14728
|
const itemCount = options.length + (showLoaderRow ? 1 : 0);
|
|
14500
14729
|
const virtualizer = (0, import_react_virtual2.useVirtualizer)({
|
|
@@ -14507,7 +14736,7 @@ function VirtualMenuList(props) {
|
|
|
14507
14736
|
const totalSize = virtualizer.getTotalSize();
|
|
14508
14737
|
const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
|
|
14509
14738
|
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14510
|
-
|
|
14739
|
+
React55.useEffect(() => {
|
|
14511
14740
|
if (!canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14512
14741
|
if (virtualItems.length === 0) return;
|
|
14513
14742
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
@@ -14523,7 +14752,7 @@ function VirtualMenuList(props) {
|
|
|
14523
14752
|
loadMoreItems,
|
|
14524
14753
|
loadMoreThreshold
|
|
14525
14754
|
]);
|
|
14526
|
-
|
|
14755
|
+
React55.useEffect(() => {
|
|
14527
14756
|
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14528
14757
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14529
14758
|
if (highlightedIndex < 0 || !changed) return;
|
|
@@ -14533,8 +14762,8 @@ function VirtualMenuList(props) {
|
|
|
14533
14762
|
const lastOptionIndex = options.length - 1;
|
|
14534
14763
|
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14535
14764
|
const isOptionSelected2 = (option) => isOptionSelectedProp ? isOptionSelectedProp(option, selectedOptions) : selectedOptions.some((s) => s.value === option.value);
|
|
14536
|
-
const wasAtBottomRef =
|
|
14537
|
-
const handleScroll =
|
|
14765
|
+
const wasAtBottomRef = React55.useRef(false);
|
|
14766
|
+
const handleScroll = React55.useCallback(
|
|
14538
14767
|
(event) => {
|
|
14539
14768
|
if (!onMenuScrollToBottom) return;
|
|
14540
14769
|
const target = event.currentTarget;
|
|
@@ -14547,7 +14776,7 @@ function VirtualMenuList(props) {
|
|
|
14547
14776
|
[onMenuScrollToBottom]
|
|
14548
14777
|
);
|
|
14549
14778
|
if (options.length === 0) {
|
|
14550
|
-
return /* @__PURE__ */ (0,
|
|
14779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
|
|
14551
14780
|
"div",
|
|
14552
14781
|
{
|
|
14553
14782
|
role: "status",
|
|
@@ -14555,8 +14784,8 @@ function VirtualMenuList(props) {
|
|
|
14555
14784
|
"aria-live": "polite",
|
|
14556
14785
|
className: "flex flex-col gap-2",
|
|
14557
14786
|
children: [
|
|
14558
|
-
/* @__PURE__ */ (0,
|
|
14559
|
-
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0,
|
|
14787
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14788
|
+
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14560
14789
|
Skeleton,
|
|
14561
14790
|
{
|
|
14562
14791
|
className: "h-10 w-full rounded-md",
|
|
@@ -14566,16 +14795,16 @@ function VirtualMenuList(props) {
|
|
|
14566
14795
|
))
|
|
14567
14796
|
]
|
|
14568
14797
|
}
|
|
14569
|
-
) : /* @__PURE__ */ (0,
|
|
14798
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "flex min-h-[40px] items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]", children: emptyMessage }) });
|
|
14570
14799
|
}
|
|
14571
|
-
return /* @__PURE__ */ (0,
|
|
14800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14572
14801
|
"div",
|
|
14573
14802
|
{
|
|
14574
14803
|
ref: scrollRef,
|
|
14575
14804
|
className: cn("overflow-y-auto", menuClassName),
|
|
14576
14805
|
style: { height: `${measuredListHeight}px` },
|
|
14577
14806
|
onScroll: onMenuScrollToBottom ? handleScroll : void 0,
|
|
14578
|
-
children: /* @__PURE__ */ (0,
|
|
14807
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14579
14808
|
"div",
|
|
14580
14809
|
{
|
|
14581
14810
|
id,
|
|
@@ -14595,7 +14824,7 @@ function VirtualMenuList(props) {
|
|
|
14595
14824
|
disabled || option?.isDisabled || option && isOptionDisabled?.(option)
|
|
14596
14825
|
);
|
|
14597
14826
|
const isLastOption = !isLoaderRow && virtualItem.index === lastOptionIndex && !canLoadMore;
|
|
14598
|
-
return /* @__PURE__ */ (0,
|
|
14827
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14599
14828
|
"div",
|
|
14600
14829
|
{
|
|
14601
14830
|
"data-index": virtualItem.index,
|
|
@@ -14604,7 +14833,7 @@ function VirtualMenuList(props) {
|
|
|
14604
14833
|
height: `${virtualItem.size}px`,
|
|
14605
14834
|
transform: `translateY(${virtualItem.start}px)`
|
|
14606
14835
|
},
|
|
14607
|
-
children: isLoaderRow ? /* @__PURE__ */ (0,
|
|
14836
|
+
children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
|
|
14608
14837
|
"div",
|
|
14609
14838
|
{
|
|
14610
14839
|
role: "status",
|
|
@@ -14612,8 +14841,8 @@ function VirtualMenuList(props) {
|
|
|
14612
14841
|
"aria-live": "polite",
|
|
14613
14842
|
className: "flex h-full items-center justify-center",
|
|
14614
14843
|
children: [
|
|
14615
|
-
/* @__PURE__ */ (0,
|
|
14616
|
-
/* @__PURE__ */ (0,
|
|
14844
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14845
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14617
14846
|
ThreeDotsLoader,
|
|
14618
14847
|
{
|
|
14619
14848
|
height: 24,
|
|
@@ -14623,7 +14852,7 @@ function VirtualMenuList(props) {
|
|
|
14623
14852
|
)
|
|
14624
14853
|
]
|
|
14625
14854
|
}
|
|
14626
|
-
) : option ? /* @__PURE__ */ (0,
|
|
14855
|
+
) : option ? /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14627
14856
|
Option,
|
|
14628
14857
|
{
|
|
14629
14858
|
id: getOptionId2(virtualItem.index),
|
|
@@ -14635,426 +14864,147 @@ function VirtualMenuList(props) {
|
|
|
14635
14864
|
isLast: isLastOption,
|
|
14636
14865
|
isMulti: Boolean(isMulti),
|
|
14637
14866
|
onClick: onOptionClick,
|
|
14638
|
-
onHover: onOptionHover,
|
|
14639
|
-
innerRef: () => void 0,
|
|
14640
|
-
inputValue,
|
|
14641
|
-
selectedOptions,
|
|
14642
|
-
formatOptionLabel
|
|
14643
|
-
}
|
|
14644
|
-
) : null
|
|
14645
|
-
},
|
|
14646
|
-
virtualItem.key
|
|
14647
|
-
);
|
|
14648
|
-
})
|
|
14649
|
-
}
|
|
14650
|
-
)
|
|
14651
|
-
}
|
|
14652
|
-
) });
|
|
14653
|
-
}
|
|
14654
|
-
|
|
14655
|
-
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14656
|
-
var import_jsx_runtime160 = require("react/jsx-runtime");
|
|
14657
|
-
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14658
|
-
var DEFAULT_LIST_HEIGHT = 322;
|
|
14659
|
-
var DEFAULT_OVERSCAN = 5;
|
|
14660
|
-
var DEFAULT_LOAD_MORE_THRESHOLD = 5;
|
|
14661
|
-
var passthroughFilter = () => true;
|
|
14662
|
-
function InfiniteScrollSelectInternal(props, ref) {
|
|
14663
|
-
const {
|
|
14664
|
-
options: rawOptions = [],
|
|
14665
|
-
canLoadMore,
|
|
14666
|
-
isLoadingMore,
|
|
14667
|
-
loadMoreItems,
|
|
14668
|
-
loadingMoreText,
|
|
14669
|
-
onSearchChange,
|
|
14670
|
-
itemHeight = DEFAULT_ITEM_HEIGHT,
|
|
14671
|
-
listHeight = DEFAULT_LIST_HEIGHT,
|
|
14672
|
-
overscan = DEFAULT_OVERSCAN,
|
|
14673
|
-
loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD,
|
|
14674
|
-
getFullSearchOption,
|
|
14675
|
-
filterOption: userFilterOption,
|
|
14676
|
-
components: userComponents,
|
|
14677
|
-
onInputChange: userOnInputChange,
|
|
14678
|
-
isMulti = false,
|
|
14679
|
-
...rest
|
|
14680
|
-
} = props;
|
|
14681
|
-
const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
|
|
14682
|
-
const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
|
|
14683
|
-
const [inputValue, setInputValue] = React52.useState("");
|
|
14684
|
-
const filteredOptions = React52.useMemo(() => {
|
|
14685
|
-
const trimmed = inputValue.trim();
|
|
14686
|
-
const valueLabel = (() => {
|
|
14687
|
-
if (isMulti) return "";
|
|
14688
|
-
const single = rest.value;
|
|
14689
|
-
if (!single) return "";
|
|
14690
|
-
return rest.getValueLabel?.(single) ?? String(single.label);
|
|
14691
|
-
})();
|
|
14692
|
-
const isFiltering = trimmed.length > 0 && trimmed.toLowerCase() !== valueLabel.toLowerCase();
|
|
14693
|
-
let list = rawOptions;
|
|
14694
|
-
if (isFiltering) {
|
|
14695
|
-
list = list.filter((option) => filterOption(option, trimmed));
|
|
14696
|
-
}
|
|
14697
|
-
if (getFullSearchOption && trimmed) {
|
|
14698
|
-
const synthetic = getFullSearchOption(trimmed);
|
|
14699
|
-
if (synthetic) list = [synthetic, ...list];
|
|
14700
|
-
}
|
|
14701
|
-
return list;
|
|
14702
|
-
}, [rawOptions, inputValue, filterOption, getFullSearchOption, isMulti, rest]);
|
|
14703
|
-
const contextValue = React52.useMemo(
|
|
14704
|
-
() => ({
|
|
14705
|
-
canLoadMore,
|
|
14706
|
-
isLoadingMore,
|
|
14707
|
-
loadMoreItems,
|
|
14708
|
-
loadingMoreText,
|
|
14709
|
-
itemHeight,
|
|
14710
|
-
listHeight,
|
|
14711
|
-
overscan,
|
|
14712
|
-
loadMoreThreshold
|
|
14713
|
-
}),
|
|
14714
|
-
[
|
|
14715
|
-
canLoadMore,
|
|
14716
|
-
isLoadingMore,
|
|
14717
|
-
loadMoreItems,
|
|
14718
|
-
loadingMoreText,
|
|
14719
|
-
itemHeight,
|
|
14720
|
-
listHeight,
|
|
14721
|
-
overscan,
|
|
14722
|
-
loadMoreThreshold
|
|
14723
|
-
]
|
|
14724
|
-
);
|
|
14725
|
-
const components = React52.useMemo(
|
|
14726
|
-
() => ({ ...userComponents, MenuList: VirtualMenuList }),
|
|
14727
|
-
[userComponents]
|
|
14728
|
-
);
|
|
14729
|
-
const handleInputChange = React52.useCallback(
|
|
14730
|
-
(value) => {
|
|
14731
|
-
setInputValue(value);
|
|
14732
|
-
onSearchChange?.(value);
|
|
14733
|
-
userOnInputChange?.(value);
|
|
14734
|
-
},
|
|
14735
|
-
[onSearchChange, userOnInputChange]
|
|
14736
|
-
);
|
|
14737
|
-
const selectExtras = {
|
|
14738
|
-
options: filteredOptions,
|
|
14739
|
-
filterOption: passthroughFilter,
|
|
14740
|
-
components,
|
|
14741
|
-
onInputChange: handleInputChange
|
|
14742
|
-
};
|
|
14743
|
-
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(InfiniteScrollContext.Provider, { value: contextValue, children: isMulti ? /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
|
|
14744
|
-
Select,
|
|
14745
|
-
{
|
|
14746
|
-
ref,
|
|
14747
|
-
...rest,
|
|
14748
|
-
...selectExtras,
|
|
14749
|
-
isMulti: true
|
|
14750
|
-
}
|
|
14751
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
|
|
14752
|
-
Select,
|
|
14753
|
-
{
|
|
14754
|
-
ref,
|
|
14755
|
-
...rest,
|
|
14756
|
-
...selectExtras,
|
|
14757
|
-
isMulti: false
|
|
14758
|
-
}
|
|
14759
|
-
) });
|
|
14760
|
-
}
|
|
14761
|
-
var InfiniteScrollSelect = React52.forwardRef(
|
|
14762
|
-
InfiniteScrollSelectInternal
|
|
14763
|
-
);
|
|
14764
|
-
|
|
14765
|
-
// src/dashboard/searching-select/SearchingSelect.tsx
|
|
14766
|
-
var import_jsx_runtime161 = require("react/jsx-runtime");
|
|
14767
|
-
function makeTriggerSlot(render) {
|
|
14768
|
-
function CustomTrigger(props) {
|
|
14769
|
-
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(import_jsx_runtime161.Fragment, { children: render(props.isOpen, props.onContainerClick) });
|
|
14770
|
-
}
|
|
14771
|
-
return CustomTrigger;
|
|
14772
|
-
}
|
|
14773
|
-
function hasPaginationProps(props) {
|
|
14774
|
-
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
|
|
14775
|
-
}
|
|
14776
|
-
function SearchingSelectInternal(props, ref) {
|
|
14777
|
-
const { trigger, components: userComponents, searchable = true, ...rest } = props;
|
|
14778
|
-
const Control = React53.useMemo(() => {
|
|
14779
|
-
if (trigger) return makeTriggerSlot(trigger);
|
|
14780
|
-
return StaticControl;
|
|
14781
|
-
}, [trigger]);
|
|
14782
|
-
const components = React53.useMemo(
|
|
14783
|
-
() => ({ ...userComponents, Control }),
|
|
14784
|
-
[userComponents, Control]
|
|
14785
|
-
);
|
|
14786
|
-
if (hasPaginationProps(
|
|
14787
|
-
rest
|
|
14788
|
-
)) {
|
|
14789
|
-
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
|
|
14790
|
-
InfiniteScrollSelect,
|
|
14791
|
-
{
|
|
14792
|
-
ref,
|
|
14793
|
-
...rest,
|
|
14794
|
-
components,
|
|
14795
|
-
searchPosition: searchable ? "dropdown" : "trigger"
|
|
14796
|
-
}
|
|
14797
|
-
);
|
|
14798
|
-
}
|
|
14799
|
-
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
|
|
14800
|
-
Select,
|
|
14801
|
-
{
|
|
14802
|
-
ref,
|
|
14803
|
-
...rest,
|
|
14804
|
-
components,
|
|
14805
|
-
searchPosition: searchable ? "dropdown" : "trigger"
|
|
14806
|
-
}
|
|
14807
|
-
);
|
|
14808
|
-
}
|
|
14809
|
-
var SearchingSelect = React53.forwardRef(
|
|
14810
|
-
SearchingSelectInternal
|
|
14811
|
-
);
|
|
14812
|
-
|
|
14813
|
-
// src/dashboard/phone-input/utils.ts
|
|
14814
|
-
var PREFIX_REGEX = /^\+/;
|
|
14815
|
-
function clearPhoneNumber(value) {
|
|
14816
|
-
return value.replace(/[^0-9]/g, "");
|
|
14817
|
-
}
|
|
14818
|
-
function findPhoneCode(value, codeSet) {
|
|
14819
|
-
const hasPrefix = PREFIX_REGEX.test(value);
|
|
14820
|
-
const maxLength = hasPrefix ? 4 : 3;
|
|
14821
|
-
const minLength = hasPrefix ? 2 : 1;
|
|
14822
|
-
for (let length = minLength; length <= maxLength; length += 1) {
|
|
14823
|
-
const candidate = value.slice(0, length);
|
|
14824
|
-
const normalized = hasPrefix ? candidate : `+${candidate}`;
|
|
14825
|
-
if (codeSet.has(normalized)) {
|
|
14826
|
-
return normalized;
|
|
14827
|
-
}
|
|
14828
|
-
}
|
|
14829
|
-
return void 0;
|
|
14830
|
-
}
|
|
14831
|
-
function parsePhoneValueWithOptions(options) {
|
|
14832
|
-
const codeSet = new Set(options.map((option) => option.value));
|
|
14833
|
-
return (value) => {
|
|
14834
|
-
if (!PREFIX_REGEX.test(value)) {
|
|
14835
|
-
return { code: "", number: value };
|
|
14836
|
-
}
|
|
14837
|
-
const code = findPhoneCode(value, codeSet);
|
|
14838
|
-
if (!code) {
|
|
14839
|
-
return { code: "", number: value };
|
|
14840
|
-
}
|
|
14841
|
-
return {
|
|
14842
|
-
code,
|
|
14843
|
-
number: value.slice(code.length)
|
|
14844
|
-
};
|
|
14845
|
-
};
|
|
14846
|
-
}
|
|
14847
|
-
function findPhoneCodeOption(options, code) {
|
|
14848
|
-
return options.find((option) => option.value === code);
|
|
14849
|
-
}
|
|
14850
|
-
function formatPhoneCodeOptionLabel(option) {
|
|
14851
|
-
const label = String(option.label);
|
|
14852
|
-
const value = String(option.value);
|
|
14853
|
-
return label.includes(value) ? label : `${label} ${value}`;
|
|
14854
|
-
}
|
|
14855
|
-
|
|
14856
|
-
// src/dashboard/phone-input/PhoneInput.tsx
|
|
14857
|
-
var import_jsx_runtime162 = require("react/jsx-runtime");
|
|
14858
|
-
var EMPTY_VALUE = { code: "", number: "" };
|
|
14859
|
-
var PhoneInput = React54.forwardRef(
|
|
14860
|
-
function PhoneInput2({
|
|
14861
|
-
options,
|
|
14862
|
-
value,
|
|
14863
|
-
onChange,
|
|
14864
|
-
onBlur,
|
|
14865
|
-
name,
|
|
14866
|
-
codeName,
|
|
14867
|
-
numberName,
|
|
14868
|
-
label,
|
|
14869
|
-
topLabel,
|
|
14870
|
-
prefixLabel,
|
|
14871
|
-
placeholder,
|
|
14872
|
-
codePlaceholder = "+00",
|
|
14873
|
-
disabled,
|
|
14874
|
-
loading,
|
|
14875
|
-
readOnly,
|
|
14876
|
-
codeReadOnly,
|
|
14877
|
-
optional,
|
|
14878
|
-
tooltip,
|
|
14879
|
-
error,
|
|
14880
|
-
invalid,
|
|
14881
|
-
className,
|
|
14882
|
-
autoDetectCode = true,
|
|
14883
|
-
searchable = true
|
|
14884
|
-
}, ref) {
|
|
14885
|
-
const { t } = (0, import_react_i18next35.useTranslation)();
|
|
14886
|
-
const safeValue = value ?? EMPTY_VALUE;
|
|
14887
|
-
const resolvedLabel = label ?? "";
|
|
14888
|
-
const resolvedPrefixLabel = prefixLabel ?? t("prefix");
|
|
14889
|
-
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
14890
|
-
const isCodeBlocked = isBlocked || Boolean(readOnly) || Boolean(codeReadOnly);
|
|
14891
|
-
const hasExternalError = Boolean(error);
|
|
14892
|
-
const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !safeValue.code;
|
|
14893
|
-
const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
|
|
14894
|
-
const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
|
|
14895
|
-
const combinedValue = safeValue.code || safeValue.number ? `${safeValue.code}${safeValue.number}` : "";
|
|
14896
|
-
const codeOptions = React54.useMemo(
|
|
14897
|
-
() => options.map((option) => ({
|
|
14898
|
-
value: option.value,
|
|
14899
|
-
label: formatPhoneCodeOptionLabel(option),
|
|
14900
|
-
data: option.data,
|
|
14901
|
-
isDisabled: option.disabled
|
|
14902
|
-
})),
|
|
14903
|
-
[options]
|
|
14904
|
-
);
|
|
14905
|
-
const selectedCodeOption = React54.useMemo(
|
|
14906
|
-
() => codeOptions.find((option) => option.value === safeValue.code) ?? null,
|
|
14907
|
-
[codeOptions, safeValue.code]
|
|
14908
|
-
);
|
|
14909
|
-
const parsePhoneValue = React54.useMemo(
|
|
14910
|
-
() => parsePhoneValueWithOptions(options),
|
|
14911
|
-
[options]
|
|
14912
|
-
);
|
|
14913
|
-
const emitChange = (next) => {
|
|
14914
|
-
onChange?.(next, name);
|
|
14915
|
-
};
|
|
14916
|
-
const handleCodeChange = (option) => {
|
|
14917
|
-
if (!option) return;
|
|
14918
|
-
emitChange({ code: option.value, number: safeValue.number });
|
|
14919
|
-
};
|
|
14920
|
-
const handleNumberChange = (event) => {
|
|
14921
|
-
if (readOnly || disabled) return;
|
|
14922
|
-
const rawValue = event.target.value;
|
|
14923
|
-
if (!autoDetectCode) {
|
|
14924
|
-
emitChange({ code: safeValue.code, number: clearPhoneNumber(rawValue) });
|
|
14925
|
-
return;
|
|
14926
|
-
}
|
|
14927
|
-
const parsed = parsePhoneValue(rawValue);
|
|
14928
|
-
const cleanedNumber = clearPhoneNumber(parsed.number);
|
|
14929
|
-
if (parsed.code) {
|
|
14930
|
-
emitChange({ code: parsed.code, number: cleanedNumber });
|
|
14931
|
-
return;
|
|
14932
|
-
}
|
|
14933
|
-
emitChange({ code: safeValue.code, number: cleanedNumber });
|
|
14934
|
-
};
|
|
14935
|
-
return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
|
|
14936
|
-
"div",
|
|
14937
|
-
{
|
|
14938
|
-
className: cn(
|
|
14939
|
-
"relative w-full max-w-[var(--field-max-width,296px)]",
|
|
14940
|
-
disabled && "cursor-not-allowed opacity-50",
|
|
14941
|
-
loading && "cursor-progress",
|
|
14942
|
-
className
|
|
14943
|
-
),
|
|
14944
|
-
children: [
|
|
14945
|
-
name && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
14946
|
-
codeName && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
14947
|
-
"input",
|
|
14948
|
-
{
|
|
14949
|
-
type: "hidden",
|
|
14950
|
-
name: codeName,
|
|
14951
|
-
value: safeValue.code,
|
|
14952
|
-
disabled
|
|
14953
|
-
}
|
|
14954
|
-
),
|
|
14955
|
-
numberName && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
14956
|
-
"input",
|
|
14957
|
-
{
|
|
14958
|
-
type: "hidden",
|
|
14959
|
-
name: numberName,
|
|
14960
|
-
value: safeValue.number,
|
|
14961
|
-
disabled
|
|
14962
|
-
}
|
|
14963
|
-
),
|
|
14964
|
-
topLabel && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("label", { className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: topLabel }),
|
|
14965
|
-
/* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2", children: [
|
|
14966
|
-
/* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
14967
|
-
SearchingSelect,
|
|
14968
|
-
{
|
|
14969
|
-
options: codeOptions,
|
|
14970
|
-
value: selectedCodeOption,
|
|
14971
|
-
onChange: handleCodeChange,
|
|
14972
|
-
label: resolvedPrefixLabel,
|
|
14973
|
-
placeholder: codePlaceholder,
|
|
14974
|
-
disabled: isCodeBlocked,
|
|
14975
|
-
loading,
|
|
14976
|
-
invalid: hasInvalidState,
|
|
14977
|
-
hideErrorMessage: true,
|
|
14978
|
-
searchable,
|
|
14979
|
-
getValueLabel: (option) => option.value,
|
|
14980
|
-
className: "!max-w-none",
|
|
14981
|
-
dropdownClassName: "right-auto w-[280px]"
|
|
14982
|
-
}
|
|
14983
|
-
),
|
|
14984
|
-
/* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
14985
|
-
Input,
|
|
14986
|
-
{
|
|
14987
|
-
ref,
|
|
14988
|
-
type: "tel",
|
|
14989
|
-
inputMode: "tel",
|
|
14990
|
-
autoComplete: "tel-national",
|
|
14991
|
-
label: resolvedLabel,
|
|
14992
|
-
value: safeValue.number,
|
|
14993
|
-
placeholder,
|
|
14994
|
-
disabled,
|
|
14995
|
-
readOnly,
|
|
14996
|
-
loading,
|
|
14997
|
-
invalid: hasInvalidState,
|
|
14998
|
-
tooltip,
|
|
14999
|
-
"aria-label": resolvedLabel || name,
|
|
15000
|
-
onChange: handleNumberChange,
|
|
15001
|
-
onBlur,
|
|
15002
|
-
renderErrorMessage: false,
|
|
15003
|
-
wrapperClassName: "!max-w-none"
|
|
15004
|
-
}
|
|
15005
|
-
)
|
|
15006
|
-
] }),
|
|
15007
|
-
!errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime162.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") }),
|
|
15008
|
-
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
15009
|
-
FieldErrorMessage,
|
|
15010
|
-
{
|
|
15011
|
-
message: errorMessage,
|
|
15012
|
-
"data-testid": name ? `${name}-error` : void 0,
|
|
15013
|
-
className: "mt-[1px] text-[14px]"
|
|
15014
|
-
}
|
|
15015
|
-
)
|
|
15016
|
-
]
|
|
15017
|
-
}
|
|
15018
|
-
);
|
|
15019
|
-
}
|
|
15020
|
-
);
|
|
15021
|
-
PhoneInput.displayName = "PhoneInput";
|
|
15022
|
-
|
|
15023
|
-
// src/dashboard/creatable-select/CreatableSelect.tsx
|
|
15024
|
-
var React55 = __toESM(require("react"), 1);
|
|
15025
|
-
var import_jsx_runtime163 = require("react/jsx-runtime");
|
|
15026
|
-
var CreatableSelect = React55.forwardRef(function CreatableSelect2(props, ref) {
|
|
15027
|
-
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Select, { ref, ...props, isCreatable: true });
|
|
15028
|
-
});
|
|
14867
|
+
onHover: onOptionHover,
|
|
14868
|
+
innerRef: () => void 0,
|
|
14869
|
+
inputValue,
|
|
14870
|
+
selectedOptions,
|
|
14871
|
+
formatOptionLabel
|
|
14872
|
+
}
|
|
14873
|
+
) : null
|
|
14874
|
+
},
|
|
14875
|
+
virtualItem.key
|
|
14876
|
+
);
|
|
14877
|
+
})
|
|
14878
|
+
}
|
|
14879
|
+
)
|
|
14880
|
+
}
|
|
14881
|
+
) });
|
|
14882
|
+
}
|
|
15029
14883
|
|
|
15030
|
-
// src/dashboard/
|
|
15031
|
-
var React56 = __toESM(require("react"), 1);
|
|
14884
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
15032
14885
|
var import_jsx_runtime164 = require("react/jsx-runtime");
|
|
15033
|
-
var
|
|
15034
|
-
|
|
15035
|
-
|
|
14886
|
+
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14887
|
+
var DEFAULT_LIST_HEIGHT = 322;
|
|
14888
|
+
var DEFAULT_OVERSCAN = 5;
|
|
14889
|
+
var DEFAULT_LOAD_MORE_THRESHOLD = 5;
|
|
14890
|
+
var passthroughFilter = () => true;
|
|
14891
|
+
function InfiniteScrollSelectInternal(props, ref) {
|
|
14892
|
+
const {
|
|
14893
|
+
options: rawOptions = [],
|
|
14894
|
+
canLoadMore,
|
|
14895
|
+
isLoadingMore,
|
|
14896
|
+
loadMoreItems,
|
|
14897
|
+
loadingMoreText,
|
|
14898
|
+
onSearchChange,
|
|
14899
|
+
itemHeight = DEFAULT_ITEM_HEIGHT,
|
|
14900
|
+
listHeight = DEFAULT_LIST_HEIGHT,
|
|
14901
|
+
overscan = DEFAULT_OVERSCAN,
|
|
14902
|
+
loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD,
|
|
14903
|
+
getFullSearchOption,
|
|
14904
|
+
filterOption: userFilterOption,
|
|
14905
|
+
components: userComponents,
|
|
14906
|
+
onInputChange: userOnInputChange,
|
|
14907
|
+
isMulti = false,
|
|
14908
|
+
...rest
|
|
14909
|
+
} = props;
|
|
14910
|
+
const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
|
|
14911
|
+
const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
|
|
14912
|
+
const [inputValue, setInputValue] = React56.useState("");
|
|
14913
|
+
const filteredOptions = React56.useMemo(() => {
|
|
14914
|
+
const trimmed = inputValue.trim();
|
|
14915
|
+
const valueLabel = (() => {
|
|
14916
|
+
if (isMulti) return "";
|
|
14917
|
+
const single = rest.value;
|
|
14918
|
+
if (!single) return "";
|
|
14919
|
+
return rest.getValueLabel?.(single) ?? String(single.label);
|
|
14920
|
+
})();
|
|
14921
|
+
const isFiltering = trimmed.length > 0 && trimmed.toLowerCase() !== valueLabel.toLowerCase();
|
|
14922
|
+
let list = rawOptions;
|
|
14923
|
+
if (isFiltering) {
|
|
14924
|
+
list = list.filter((option) => filterOption(option, trimmed));
|
|
14925
|
+
}
|
|
14926
|
+
if (getFullSearchOption && trimmed) {
|
|
14927
|
+
const synthetic = getFullSearchOption(trimmed);
|
|
14928
|
+
if (synthetic) list = [synthetic, ...list];
|
|
14929
|
+
}
|
|
14930
|
+
return list;
|
|
14931
|
+
}, [rawOptions, inputValue, filterOption, getFullSearchOption, isMulti, rest]);
|
|
14932
|
+
const contextValue = React56.useMemo(
|
|
14933
|
+
() => ({
|
|
14934
|
+
canLoadMore,
|
|
14935
|
+
isLoadingMore,
|
|
14936
|
+
loadMoreItems,
|
|
14937
|
+
loadingMoreText,
|
|
14938
|
+
itemHeight,
|
|
14939
|
+
listHeight,
|
|
14940
|
+
overscan,
|
|
14941
|
+
loadMoreThreshold
|
|
14942
|
+
}),
|
|
14943
|
+
[
|
|
14944
|
+
canLoadMore,
|
|
14945
|
+
isLoadingMore,
|
|
14946
|
+
loadMoreItems,
|
|
14947
|
+
loadingMoreText,
|
|
14948
|
+
itemHeight,
|
|
14949
|
+
listHeight,
|
|
14950
|
+
overscan,
|
|
14951
|
+
loadMoreThreshold
|
|
14952
|
+
]
|
|
14953
|
+
);
|
|
14954
|
+
const components = React56.useMemo(
|
|
14955
|
+
() => ({ ...userComponents, MenuList: VirtualMenuList }),
|
|
14956
|
+
[userComponents]
|
|
14957
|
+
);
|
|
14958
|
+
const handleInputChange = React56.useCallback(
|
|
14959
|
+
(value) => {
|
|
14960
|
+
setInputValue(value);
|
|
14961
|
+
onSearchChange?.(value);
|
|
14962
|
+
userOnInputChange?.(value);
|
|
14963
|
+
},
|
|
14964
|
+
[onSearchChange, userOnInputChange]
|
|
14965
|
+
);
|
|
14966
|
+
const selectExtras = {
|
|
14967
|
+
options: filteredOptions,
|
|
14968
|
+
filterOption: passthroughFilter,
|
|
14969
|
+
components,
|
|
14970
|
+
onInputChange: handleInputChange
|
|
14971
|
+
};
|
|
14972
|
+
return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(InfiniteScrollContext.Provider, { value: contextValue, children: isMulti ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
14973
|
+
Select,
|
|
14974
|
+
{
|
|
14975
|
+
ref,
|
|
14976
|
+
...rest,
|
|
14977
|
+
...selectExtras,
|
|
14978
|
+
isMulti: true
|
|
14979
|
+
}
|
|
14980
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
14981
|
+
Select,
|
|
14982
|
+
{
|
|
14983
|
+
ref,
|
|
14984
|
+
...rest,
|
|
14985
|
+
...selectExtras,
|
|
14986
|
+
isMulti: false
|
|
14987
|
+
}
|
|
14988
|
+
) });
|
|
14989
|
+
}
|
|
14990
|
+
var InfiniteScrollSelect = React56.forwardRef(
|
|
14991
|
+
InfiniteScrollSelectInternal
|
|
14992
|
+
);
|
|
15036
14993
|
|
|
15037
|
-
// src/dashboard/
|
|
14994
|
+
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
15038
14995
|
var React57 = __toESM(require("react"), 1);
|
|
15039
14996
|
var import_jsx_runtime165 = require("react/jsx-runtime");
|
|
15040
|
-
var
|
|
15041
|
-
return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
15042
|
-
});
|
|
15043
|
-
|
|
15044
|
-
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
15045
|
-
var React58 = __toESM(require("react"), 1);
|
|
15046
|
-
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
15047
|
-
var InfiniteScrollMultiSelect = React58.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
14997
|
+
var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
15048
14998
|
const Forwarded = InfiniteScrollSelect;
|
|
15049
|
-
return /* @__PURE__ */ (0,
|
|
14999
|
+
return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(Forwarded, { ...props, ref, isMulti: true });
|
|
15050
15000
|
});
|
|
15051
15001
|
|
|
15052
15002
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15053
|
-
var
|
|
15003
|
+
var React58 = __toESM(require("react"), 1);
|
|
15054
15004
|
var import_react_i18next37 = require("react-i18next");
|
|
15055
15005
|
|
|
15056
15006
|
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
15057
|
-
var
|
|
15007
|
+
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
15058
15008
|
function SelectCheckboxOption(props) {
|
|
15059
15009
|
const {
|
|
15060
15010
|
option,
|
|
@@ -15067,7 +15017,7 @@ function SelectCheckboxOption(props) {
|
|
|
15067
15017
|
onHover,
|
|
15068
15018
|
innerRef
|
|
15069
15019
|
} = props;
|
|
15070
|
-
return /* @__PURE__ */ (0,
|
|
15020
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
|
|
15071
15021
|
"button",
|
|
15072
15022
|
{
|
|
15073
15023
|
id,
|
|
@@ -15088,7 +15038,7 @@ function SelectCheckboxOption(props) {
|
|
|
15088
15038
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
15089
15039
|
),
|
|
15090
15040
|
children: [
|
|
15091
|
-
/* @__PURE__ */ (0,
|
|
15041
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
|
|
15092
15042
|
BaseCheckbox,
|
|
15093
15043
|
{
|
|
15094
15044
|
checked: isSelected,
|
|
@@ -15098,9 +15048,9 @@ function SelectCheckboxOption(props) {
|
|
|
15098
15048
|
className: "pointer-events-none shrink-0"
|
|
15099
15049
|
}
|
|
15100
15050
|
),
|
|
15101
|
-
/* @__PURE__ */ (0,
|
|
15102
|
-
/* @__PURE__ */ (0,
|
|
15103
|
-
option.description && /* @__PURE__ */ (0,
|
|
15051
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
15052
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "block break-words", children: option.label }),
|
|
15053
|
+
option.description && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
15104
15054
|
] })
|
|
15105
15055
|
]
|
|
15106
15056
|
}
|
|
@@ -15110,7 +15060,7 @@ function SelectCheckboxOption(props) {
|
|
|
15110
15060
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
15111
15061
|
var import_lucide_react48 = require("lucide-react");
|
|
15112
15062
|
var import_react_i18next36 = require("react-i18next");
|
|
15113
|
-
var
|
|
15063
|
+
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
15114
15064
|
function createCountTrigger(opts) {
|
|
15115
15065
|
const { valueText, totalCount } = opts;
|
|
15116
15066
|
function CountTrigger(props) {
|
|
@@ -15137,7 +15087,7 @@ function createCountTrigger(opts) {
|
|
|
15137
15087
|
const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
|
|
15138
15088
|
const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
|
|
15139
15089
|
const isEmpty = !hasValue;
|
|
15140
|
-
return /* @__PURE__ */ (0,
|
|
15090
|
+
return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
|
|
15141
15091
|
"button",
|
|
15142
15092
|
{
|
|
15143
15093
|
id: triggerId,
|
|
@@ -15159,9 +15109,9 @@ function createCountTrigger(opts) {
|
|
|
15159
15109
|
loading && "!cursor-progress"
|
|
15160
15110
|
),
|
|
15161
15111
|
children: [
|
|
15162
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
15163
|
-
/* @__PURE__ */ (0,
|
|
15164
|
-
/* @__PURE__ */ (0,
|
|
15112
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime167.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_runtime167.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
15113
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
15114
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
15165
15115
|
import_lucide_react48.ChevronDown,
|
|
15166
15116
|
{
|
|
15167
15117
|
size: 16,
|
|
@@ -15179,9 +15129,9 @@ function createCountTrigger(opts) {
|
|
|
15179
15129
|
}
|
|
15180
15130
|
|
|
15181
15131
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
15182
|
-
var
|
|
15132
|
+
var import_jsx_runtime168 = require("react/jsx-runtime");
|
|
15183
15133
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
15184
|
-
return /* @__PURE__ */ (0,
|
|
15134
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
|
|
15185
15135
|
"button",
|
|
15186
15136
|
{
|
|
15187
15137
|
type: "button",
|
|
@@ -15192,7 +15142,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15192
15142
|
disabled && "cursor-default opacity-40"
|
|
15193
15143
|
),
|
|
15194
15144
|
children: [
|
|
15195
|
-
/* @__PURE__ */ (0,
|
|
15145
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15196
15146
|
BaseCheckbox,
|
|
15197
15147
|
{
|
|
15198
15148
|
checked,
|
|
@@ -15202,20 +15152,20 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15202
15152
|
className: "pointer-events-none shrink-0"
|
|
15203
15153
|
}
|
|
15204
15154
|
),
|
|
15205
|
-
/* @__PURE__ */ (0,
|
|
15155
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "flex-1", children: label })
|
|
15206
15156
|
]
|
|
15207
15157
|
}
|
|
15208
15158
|
);
|
|
15209
15159
|
}
|
|
15210
15160
|
|
|
15211
15161
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15212
|
-
var
|
|
15213
|
-
function
|
|
15162
|
+
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
15163
|
+
function hasPaginationProps(props) {
|
|
15214
15164
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
|
|
15215
15165
|
}
|
|
15216
|
-
function
|
|
15166
|
+
function makeTriggerSlot(render) {
|
|
15217
15167
|
function CustomTrigger(props) {
|
|
15218
|
-
return /* @__PURE__ */ (0,
|
|
15168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_jsx_runtime169.Fragment, { children: render(props.isOpen, props.onContainerClick) });
|
|
15219
15169
|
}
|
|
15220
15170
|
return CustomTrigger;
|
|
15221
15171
|
}
|
|
@@ -15238,28 +15188,28 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15238
15188
|
...paginationAndRest
|
|
15239
15189
|
} = props;
|
|
15240
15190
|
const { t } = (0, import_react_i18next37.useTranslation)();
|
|
15241
|
-
const isPaginated =
|
|
15191
|
+
const isPaginated = hasPaginationProps(
|
|
15242
15192
|
paginationAndRest
|
|
15243
15193
|
);
|
|
15244
|
-
const [inputValue, setInputValue] =
|
|
15194
|
+
const [inputValue, setInputValue] = React58.useState("");
|
|
15245
15195
|
const isControlled = value !== void 0;
|
|
15246
|
-
const [internalValue, setInternalValue] =
|
|
15196
|
+
const [internalValue, setInternalValue] = React58.useState(
|
|
15247
15197
|
() => defaultValue ?? []
|
|
15248
15198
|
);
|
|
15249
15199
|
const currentValue = isControlled ? value : internalValue;
|
|
15250
|
-
const selected =
|
|
15251
|
-
const handleChange =
|
|
15200
|
+
const selected = React58.useMemo(() => currentValue ?? [], [currentValue]);
|
|
15201
|
+
const handleChange = React58.useCallback(
|
|
15252
15202
|
(next, meta) => {
|
|
15253
15203
|
if (!isControlled) setInternalValue(next);
|
|
15254
15204
|
onChange?.(next, meta);
|
|
15255
15205
|
},
|
|
15256
15206
|
[isControlled, onChange]
|
|
15257
15207
|
);
|
|
15258
|
-
const flatRawOptions =
|
|
15208
|
+
const flatRawOptions = React58.useMemo(
|
|
15259
15209
|
() => flattenGroupedOptions(rawOptions),
|
|
15260
15210
|
[rawOptions]
|
|
15261
15211
|
);
|
|
15262
|
-
const filteredGrouped =
|
|
15212
|
+
const filteredGrouped = React58.useMemo(() => {
|
|
15263
15213
|
const trimmed = inputValue.trim();
|
|
15264
15214
|
if (!trimmed) return rawOptions;
|
|
15265
15215
|
return rawOptions.map((item) => {
|
|
@@ -15270,7 +15220,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15270
15220
|
return filterOption(item, trimmed) ? item : null;
|
|
15271
15221
|
}).filter((item) => item !== null);
|
|
15272
15222
|
}, [rawOptions, inputValue, filterOption]);
|
|
15273
|
-
const filteredFlat =
|
|
15223
|
+
const filteredFlat = React58.useMemo(
|
|
15274
15224
|
() => flattenGroupedOptions(filteredGrouped),
|
|
15275
15225
|
[filteredGrouped]
|
|
15276
15226
|
);
|
|
@@ -15278,7 +15228,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15278
15228
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
15279
15229
|
}, 0);
|
|
15280
15230
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
15281
|
-
const handleToggleAll =
|
|
15231
|
+
const handleToggleAll = React58.useCallback(() => {
|
|
15282
15232
|
if (allVisibleSelected) {
|
|
15283
15233
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
15284
15234
|
handleChange(
|
|
@@ -15293,14 +15243,14 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15293
15243
|
}
|
|
15294
15244
|
handleChange(merged, { action: "select" });
|
|
15295
15245
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
15296
|
-
const Control =
|
|
15297
|
-
if (trigger) return
|
|
15246
|
+
const Control = React58.useMemo(() => {
|
|
15247
|
+
if (trigger) return makeTriggerSlot(trigger);
|
|
15298
15248
|
return createCountTrigger({
|
|
15299
15249
|
valueText,
|
|
15300
15250
|
totalCount: flatRawOptions.length
|
|
15301
15251
|
});
|
|
15302
15252
|
}, [trigger, valueText, flatRawOptions.length]);
|
|
15303
|
-
const components =
|
|
15253
|
+
const components = React58.useMemo(
|
|
15304
15254
|
() => ({
|
|
15305
15255
|
...userComponents,
|
|
15306
15256
|
Control,
|
|
@@ -15308,7 +15258,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15308
15258
|
}),
|
|
15309
15259
|
[userComponents, Control]
|
|
15310
15260
|
);
|
|
15311
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0,
|
|
15261
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15312
15262
|
SelectAllRow,
|
|
15313
15263
|
{
|
|
15314
15264
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -15316,7 +15266,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15316
15266
|
onToggle: handleToggleAll
|
|
15317
15267
|
}
|
|
15318
15268
|
) : void 0;
|
|
15319
|
-
const handleInputChange =
|
|
15269
|
+
const handleInputChange = React58.useCallback(
|
|
15320
15270
|
(next) => {
|
|
15321
15271
|
setInputValue(next);
|
|
15322
15272
|
onSearchChange?.(next);
|
|
@@ -15336,7 +15286,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15336
15286
|
isMulti: true
|
|
15337
15287
|
};
|
|
15338
15288
|
if (isPaginated) {
|
|
15339
|
-
return /* @__PURE__ */ (0,
|
|
15289
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15340
15290
|
InfiniteScrollSelect,
|
|
15341
15291
|
{
|
|
15342
15292
|
ref,
|
|
@@ -15347,7 +15297,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15347
15297
|
}
|
|
15348
15298
|
);
|
|
15349
15299
|
}
|
|
15350
|
-
return /* @__PURE__ */ (0,
|
|
15300
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15351
15301
|
Select,
|
|
15352
15302
|
{
|
|
15353
15303
|
ref,
|
|
@@ -15358,16 +15308,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15358
15308
|
}
|
|
15359
15309
|
);
|
|
15360
15310
|
}
|
|
15361
|
-
var SelectCheckboxes =
|
|
15311
|
+
var SelectCheckboxes = React58.forwardRef(
|
|
15362
15312
|
SelectCheckboxesInternal
|
|
15363
15313
|
);
|
|
15364
15314
|
|
|
15365
15315
|
// src/dashboard/textarea/Textarea.tsx
|
|
15366
|
-
var
|
|
15316
|
+
var React60 = __toESM(require("react"), 1);
|
|
15367
15317
|
var import_react_i18next38 = require("react-i18next");
|
|
15368
15318
|
|
|
15369
15319
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15370
|
-
var
|
|
15320
|
+
var React59 = __toESM(require("react"), 1);
|
|
15371
15321
|
var isEmptyValue2 = (value) => {
|
|
15372
15322
|
if (value === void 0 || value === null) return true;
|
|
15373
15323
|
return String(value).length === 0;
|
|
@@ -15386,12 +15336,12 @@ function useTextareaValueState({
|
|
|
15386
15336
|
value,
|
|
15387
15337
|
defaultValue
|
|
15388
15338
|
}) {
|
|
15389
|
-
const textareaRef =
|
|
15339
|
+
const textareaRef = React59.useRef(null);
|
|
15390
15340
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15391
15341
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15392
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15342
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React59.useState(propsAreEmpty);
|
|
15393
15343
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15394
|
-
const setNativeValue =
|
|
15344
|
+
const setNativeValue = React59.useCallback(
|
|
15395
15345
|
(nextValue) => {
|
|
15396
15346
|
if (isControlled) return;
|
|
15397
15347
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15401,14 +15351,14 @@ function useTextareaValueState({
|
|
|
15401
15351
|
},
|
|
15402
15352
|
[isControlled]
|
|
15403
15353
|
);
|
|
15404
|
-
const syncValueState =
|
|
15354
|
+
const syncValueState = React59.useCallback(() => {
|
|
15405
15355
|
if (!textareaRef.current) return;
|
|
15406
15356
|
setNativeValue(textareaRef.current.value);
|
|
15407
15357
|
}, [setNativeValue]);
|
|
15408
|
-
|
|
15358
|
+
React59.useLayoutEffect(() => {
|
|
15409
15359
|
syncValueState();
|
|
15410
15360
|
});
|
|
15411
|
-
|
|
15361
|
+
React59.useEffect(() => {
|
|
15412
15362
|
const textarea = textareaRef.current;
|
|
15413
15363
|
const form = textarea?.form;
|
|
15414
15364
|
if (isControlled || !form) return;
|
|
@@ -15432,10 +15382,10 @@ function useTextareaValueState({
|
|
|
15432
15382
|
}
|
|
15433
15383
|
|
|
15434
15384
|
// src/dashboard/textarea/Textarea.tsx
|
|
15435
|
-
var
|
|
15385
|
+
var import_jsx_runtime170 = require("react/jsx-runtime");
|
|
15436
15386
|
var LINE_HEIGHT = 20;
|
|
15437
15387
|
var VERTICAL_PADDING = 32;
|
|
15438
|
-
var Textarea =
|
|
15388
|
+
var Textarea = React60.forwardRef(function Textarea2({
|
|
15439
15389
|
className,
|
|
15440
15390
|
textareaClassName,
|
|
15441
15391
|
label,
|
|
@@ -15463,12 +15413,12 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15463
15413
|
}, ref) {
|
|
15464
15414
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15465
15415
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15466
|
-
const reactId =
|
|
15416
|
+
const reactId = React60.useId();
|
|
15467
15417
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15468
15418
|
const { t } = (0, import_react_i18next38.useTranslation)();
|
|
15469
15419
|
const isInvalid = Boolean(invalid || error);
|
|
15470
15420
|
const isBlocked = Boolean(disabled);
|
|
15471
|
-
const resize =
|
|
15421
|
+
const resize = React60.useCallback(() => {
|
|
15472
15422
|
const el = textareaRef.current;
|
|
15473
15423
|
if (!el || !autosize) return;
|
|
15474
15424
|
el.style.height = "auto";
|
|
@@ -15478,7 +15428,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15478
15428
|
el.style.height = `${nextHeight}px`;
|
|
15479
15429
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15480
15430
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15481
|
-
|
|
15431
|
+
React60.useLayoutEffect(() => {
|
|
15482
15432
|
resize();
|
|
15483
15433
|
}, [resize, value]);
|
|
15484
15434
|
const handleInput = (event) => {
|
|
@@ -15501,7 +15451,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15501
15451
|
onBlur?.(event);
|
|
15502
15452
|
syncValueState();
|
|
15503
15453
|
};
|
|
15504
|
-
return /* @__PURE__ */ (0,
|
|
15454
|
+
return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
15505
15455
|
"div",
|
|
15506
15456
|
{
|
|
15507
15457
|
className: cn(
|
|
@@ -15511,18 +15461,18 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15511
15461
|
className
|
|
15512
15462
|
),
|
|
15513
15463
|
children: [
|
|
15514
|
-
label && /* @__PURE__ */ (0,
|
|
15464
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
15515
15465
|
"label",
|
|
15516
15466
|
{
|
|
15517
15467
|
htmlFor: textareaId,
|
|
15518
15468
|
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15519
15469
|
children: [
|
|
15520
15470
|
label,
|
|
15521
|
-
tooltip && /* @__PURE__ */ (0,
|
|
15471
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15522
15472
|
]
|
|
15523
15473
|
}
|
|
15524
15474
|
),
|
|
15525
|
-
/* @__PURE__ */ (0,
|
|
15475
|
+
/* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15526
15476
|
"textarea",
|
|
15527
15477
|
{
|
|
15528
15478
|
ref: combinedRef,
|
|
@@ -15554,7 +15504,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15554
15504
|
...textareaProps
|
|
15555
15505
|
}
|
|
15556
15506
|
),
|
|
15557
|
-
error && /* @__PURE__ */ (0,
|
|
15507
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15558
15508
|
FieldErrorMessage,
|
|
15559
15509
|
{
|
|
15560
15510
|
id: `${textareaId}-error`,
|
|
@@ -15562,20 +15512,20 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15562
15512
|
className: "mt-[1px] text-[14px]"
|
|
15563
15513
|
}
|
|
15564
15514
|
),
|
|
15565
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
15566
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
15515
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime170.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") }),
|
|
15516
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15567
15517
|
]
|
|
15568
15518
|
}
|
|
15569
15519
|
);
|
|
15570
15520
|
});
|
|
15571
15521
|
|
|
15572
15522
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15573
|
-
var
|
|
15523
|
+
var React62 = __toESM(require("react"), 1);
|
|
15574
15524
|
var import_lucide_react49 = require("lucide-react");
|
|
15575
15525
|
var import_react_i18next39 = require("react-i18next");
|
|
15576
15526
|
|
|
15577
15527
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15578
|
-
var
|
|
15528
|
+
var React61 = __toESM(require("react"), 1);
|
|
15579
15529
|
|
|
15580
15530
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15581
15531
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15726,21 +15676,21 @@ function useDatePickerWheel({
|
|
|
15726
15676
|
minDate,
|
|
15727
15677
|
maxDate
|
|
15728
15678
|
}) {
|
|
15729
|
-
const years =
|
|
15730
|
-
const [draftDate, setDraftDate] =
|
|
15679
|
+
const years = React61.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15680
|
+
const [draftDate, setDraftDate] = React61.useState(
|
|
15731
15681
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15732
15682
|
);
|
|
15733
15683
|
const draftYear = draftDate.getFullYear();
|
|
15734
15684
|
const draftMonth = draftDate.getMonth();
|
|
15735
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15736
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15737
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15738
|
-
const monthListRef =
|
|
15739
|
-
const dayListRef =
|
|
15740
|
-
const yearListRef =
|
|
15741
|
-
const settleTimeoutsRef =
|
|
15742
|
-
const animationFramesRef =
|
|
15743
|
-
const columnRefs =
|
|
15685
|
+
const [monthScrollTop, setMonthScrollTop] = React61.useState(0);
|
|
15686
|
+
const [dayScrollTop, setDayScrollTop] = React61.useState(0);
|
|
15687
|
+
const [yearScrollTop, setYearScrollTop] = React61.useState(0);
|
|
15688
|
+
const monthListRef = React61.useRef(null);
|
|
15689
|
+
const dayListRef = React61.useRef(null);
|
|
15690
|
+
const yearListRef = React61.useRef(null);
|
|
15691
|
+
const settleTimeoutsRef = React61.useRef({});
|
|
15692
|
+
const animationFramesRef = React61.useRef({});
|
|
15693
|
+
const columnRefs = React61.useMemo(
|
|
15744
15694
|
() => ({
|
|
15745
15695
|
month: monthListRef,
|
|
15746
15696
|
day: dayListRef,
|
|
@@ -15748,7 +15698,7 @@ function useDatePickerWheel({
|
|
|
15748
15698
|
}),
|
|
15749
15699
|
[]
|
|
15750
15700
|
);
|
|
15751
|
-
const setColumnScrollTop =
|
|
15701
|
+
const setColumnScrollTop = React61.useCallback(
|
|
15752
15702
|
(column, nextScrollTop) => {
|
|
15753
15703
|
if (column === "month") {
|
|
15754
15704
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15762,19 +15712,19 @@ function useDatePickerWheel({
|
|
|
15762
15712
|
},
|
|
15763
15713
|
[]
|
|
15764
15714
|
);
|
|
15765
|
-
const clearSettleTimeout =
|
|
15715
|
+
const clearSettleTimeout = React61.useCallback((column) => {
|
|
15766
15716
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15767
15717
|
if (timeoutId === void 0) return;
|
|
15768
15718
|
window.clearTimeout(timeoutId);
|
|
15769
15719
|
delete settleTimeoutsRef.current[column];
|
|
15770
15720
|
}, []);
|
|
15771
|
-
const clearAnimationFrame =
|
|
15721
|
+
const clearAnimationFrame = React61.useCallback((column) => {
|
|
15772
15722
|
const frameId = animationFramesRef.current[column];
|
|
15773
15723
|
if (frameId === void 0) return;
|
|
15774
15724
|
window.cancelAnimationFrame(frameId);
|
|
15775
15725
|
delete animationFramesRef.current[column];
|
|
15776
15726
|
}, []);
|
|
15777
|
-
|
|
15727
|
+
React61.useEffect(
|
|
15778
15728
|
() => () => {
|
|
15779
15729
|
["month", "day", "year"].forEach((column) => {
|
|
15780
15730
|
clearSettleTimeout(column);
|
|
@@ -15783,22 +15733,22 @@ function useDatePickerWheel({
|
|
|
15783
15733
|
},
|
|
15784
15734
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15785
15735
|
);
|
|
15786
|
-
|
|
15736
|
+
React61.useEffect(() => {
|
|
15787
15737
|
if (isOpen) return;
|
|
15788
15738
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15789
15739
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15790
|
-
const months =
|
|
15740
|
+
const months = React61.useMemo(
|
|
15791
15741
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15792
15742
|
[draftYear, maxDate, minDate]
|
|
15793
15743
|
);
|
|
15794
|
-
const days =
|
|
15744
|
+
const days = React61.useMemo(
|
|
15795
15745
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15796
15746
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15797
15747
|
);
|
|
15798
15748
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15799
15749
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15800
15750
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15801
|
-
const syncScrollPositions =
|
|
15751
|
+
const syncScrollPositions = React61.useCallback(
|
|
15802
15752
|
(nextDate, behavior = "auto") => {
|
|
15803
15753
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15804
15754
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15822,7 +15772,7 @@ function useDatePickerWheel({
|
|
|
15822
15772
|
},
|
|
15823
15773
|
[maxDate, minDate, years]
|
|
15824
15774
|
);
|
|
15825
|
-
|
|
15775
|
+
React61.useLayoutEffect(() => {
|
|
15826
15776
|
if (!isOpen) return;
|
|
15827
15777
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15828
15778
|
setDraftDate(nextDate);
|
|
@@ -15833,7 +15783,7 @@ function useDatePickerWheel({
|
|
|
15833
15783
|
window.cancelAnimationFrame(frameId);
|
|
15834
15784
|
};
|
|
15835
15785
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15836
|
-
const updateDraftDate =
|
|
15786
|
+
const updateDraftDate = React61.useCallback(
|
|
15837
15787
|
(column, targetIndex, behavior = "smooth") => {
|
|
15838
15788
|
const currentDate = stripTime(draftDate);
|
|
15839
15789
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15878,7 +15828,7 @@ function useDatePickerWheel({
|
|
|
15878
15828
|
},
|
|
15879
15829
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15880
15830
|
);
|
|
15881
|
-
const settleColumnScroll =
|
|
15831
|
+
const settleColumnScroll = React61.useCallback(
|
|
15882
15832
|
(column) => {
|
|
15883
15833
|
const list = columnRefs[column].current;
|
|
15884
15834
|
if (!list) return;
|
|
@@ -15891,7 +15841,7 @@ function useDatePickerWheel({
|
|
|
15891
15841
|
},
|
|
15892
15842
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15893
15843
|
);
|
|
15894
|
-
const scheduleScrollSettle =
|
|
15844
|
+
const scheduleScrollSettle = React61.useCallback(
|
|
15895
15845
|
(column) => {
|
|
15896
15846
|
clearSettleTimeout(column);
|
|
15897
15847
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15900,7 +15850,7 @@ function useDatePickerWheel({
|
|
|
15900
15850
|
},
|
|
15901
15851
|
[clearSettleTimeout, settleColumnScroll]
|
|
15902
15852
|
);
|
|
15903
|
-
const handleColumnScroll =
|
|
15853
|
+
const handleColumnScroll = React61.useCallback(
|
|
15904
15854
|
(column) => {
|
|
15905
15855
|
const list = columnRefs[column].current;
|
|
15906
15856
|
if (!list) return;
|
|
@@ -15914,13 +15864,13 @@ function useDatePickerWheel({
|
|
|
15914
15864
|
},
|
|
15915
15865
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15916
15866
|
);
|
|
15917
|
-
const handleOptionSelect =
|
|
15867
|
+
const handleOptionSelect = React61.useCallback(
|
|
15918
15868
|
(column, targetIndex) => {
|
|
15919
15869
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15920
15870
|
},
|
|
15921
15871
|
[updateDraftDate]
|
|
15922
15872
|
);
|
|
15923
|
-
const focusAdjacentColumn =
|
|
15873
|
+
const focusAdjacentColumn = React61.useCallback(
|
|
15924
15874
|
(column, direction) => {
|
|
15925
15875
|
const order = ["month", "day", "year"];
|
|
15926
15876
|
const currentIndex = order.indexOf(column);
|
|
@@ -15930,7 +15880,7 @@ function useDatePickerWheel({
|
|
|
15930
15880
|
},
|
|
15931
15881
|
[columnRefs]
|
|
15932
15882
|
);
|
|
15933
|
-
const handleColumnKeyDown =
|
|
15883
|
+
const handleColumnKeyDown = React61.useCallback(
|
|
15934
15884
|
(column, event) => {
|
|
15935
15885
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15936
15886
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15996,7 +15946,7 @@ function useDatePickerWheel({
|
|
|
15996
15946
|
}
|
|
15997
15947
|
|
|
15998
15948
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
15999
|
-
var
|
|
15949
|
+
var import_jsx_runtime171 = require("react/jsx-runtime");
|
|
16000
15950
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
16001
15951
|
function AirbnbDatePickerWheelColumn({
|
|
16002
15952
|
id,
|
|
@@ -16010,7 +15960,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16010
15960
|
onOptionSelect,
|
|
16011
15961
|
column
|
|
16012
15962
|
}) {
|
|
16013
|
-
return /* @__PURE__ */ (0,
|
|
15963
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(
|
|
16014
15964
|
"div",
|
|
16015
15965
|
{
|
|
16016
15966
|
id,
|
|
@@ -16027,14 +15977,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16027
15977
|
WebkitOverflowScrolling: "touch"
|
|
16028
15978
|
},
|
|
16029
15979
|
children: [
|
|
16030
|
-
/* @__PURE__ */ (0,
|
|
15980
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { style: { height: `${spacerHeight}px` } }),
|
|
16031
15981
|
items.map((item, index) => {
|
|
16032
15982
|
const { style } = getWheelOptionStyles(
|
|
16033
15983
|
index,
|
|
16034
15984
|
scrollTop,
|
|
16035
15985
|
DATE_PICKER_OPTION_HEIGHT
|
|
16036
15986
|
);
|
|
16037
|
-
return /* @__PURE__ */ (0,
|
|
15987
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
16038
15988
|
"button",
|
|
16039
15989
|
{
|
|
16040
15990
|
id: `${id}-option-${index}`,
|
|
@@ -16050,14 +16000,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16050
16000
|
`${column}-${item}-${index}`
|
|
16051
16001
|
);
|
|
16052
16002
|
}),
|
|
16053
|
-
/* @__PURE__ */ (0,
|
|
16003
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { style: { height: `${spacerHeight}px` } })
|
|
16054
16004
|
]
|
|
16055
16005
|
}
|
|
16056
16006
|
) });
|
|
16057
16007
|
}
|
|
16058
16008
|
|
|
16059
16009
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
16060
|
-
var
|
|
16010
|
+
var import_jsx_runtime172 = require("react/jsx-runtime");
|
|
16061
16011
|
function AirbnbDatePickerBody({
|
|
16062
16012
|
baseId,
|
|
16063
16013
|
label,
|
|
@@ -16079,19 +16029,19 @@ function AirbnbDatePickerBody({
|
|
|
16079
16029
|
onOptionSelect,
|
|
16080
16030
|
onDone
|
|
16081
16031
|
}) {
|
|
16082
|
-
return /* @__PURE__ */ (0,
|
|
16083
|
-
/* @__PURE__ */ (0,
|
|
16084
|
-
/* @__PURE__ */ (0,
|
|
16085
|
-
/* @__PURE__ */ (0,
|
|
16086
|
-
/* @__PURE__ */ (0,
|
|
16032
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
|
|
16033
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "relative overflow-hidden rounded-[24px]", children: [
|
|
16034
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
16035
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
16036
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16087
16037
|
"div",
|
|
16088
16038
|
{
|
|
16089
16039
|
"aria-hidden": true,
|
|
16090
16040
|
className: "pointer-events-none absolute inset-x-0 top-1/2 z-0 h-8 -translate-y-1/2 rounded-[12px] bg-black/[0.04]"
|
|
16091
16041
|
}
|
|
16092
16042
|
),
|
|
16093
|
-
/* @__PURE__ */ (0,
|
|
16094
|
-
/* @__PURE__ */ (0,
|
|
16043
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
|
|
16044
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16095
16045
|
AirbnbDatePickerWheelColumn,
|
|
16096
16046
|
{
|
|
16097
16047
|
id: `${baseId}-month`,
|
|
@@ -16106,7 +16056,7 @@ function AirbnbDatePickerBody({
|
|
|
16106
16056
|
onOptionSelect
|
|
16107
16057
|
}
|
|
16108
16058
|
),
|
|
16109
|
-
/* @__PURE__ */ (0,
|
|
16059
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16110
16060
|
AirbnbDatePickerWheelColumn,
|
|
16111
16061
|
{
|
|
16112
16062
|
id: `${baseId}-day`,
|
|
@@ -16121,7 +16071,7 @@ function AirbnbDatePickerBody({
|
|
|
16121
16071
|
onOptionSelect
|
|
16122
16072
|
}
|
|
16123
16073
|
),
|
|
16124
|
-
/* @__PURE__ */ (0,
|
|
16074
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16125
16075
|
AirbnbDatePickerWheelColumn,
|
|
16126
16076
|
{
|
|
16127
16077
|
id: `${baseId}-year`,
|
|
@@ -16138,7 +16088,7 @@ function AirbnbDatePickerBody({
|
|
|
16138
16088
|
)
|
|
16139
16089
|
] })
|
|
16140
16090
|
] }),
|
|
16141
|
-
/* @__PURE__ */ (0,
|
|
16091
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
16142
16092
|
] });
|
|
16143
16093
|
}
|
|
16144
16094
|
function AirbnbDatePickerContent({
|
|
@@ -16166,7 +16116,7 @@ function AirbnbDatePickerContent({
|
|
|
16166
16116
|
onColumnKeyDown,
|
|
16167
16117
|
onOptionSelect
|
|
16168
16118
|
}) {
|
|
16169
|
-
const body = /* @__PURE__ */ (0,
|
|
16119
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16170
16120
|
AirbnbDatePickerBody,
|
|
16171
16121
|
{
|
|
16172
16122
|
baseId,
|
|
@@ -16191,27 +16141,27 @@ function AirbnbDatePickerContent({
|
|
|
16191
16141
|
}
|
|
16192
16142
|
);
|
|
16193
16143
|
if (isMobile3) {
|
|
16194
|
-
return /* @__PURE__ */ (0,
|
|
16144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16195
16145
|
DrawerContent,
|
|
16196
16146
|
{
|
|
16197
16147
|
onClose: () => onOpenChange(false),
|
|
16198
16148
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
16199
16149
|
children: [
|
|
16200
|
-
/* @__PURE__ */ (0,
|
|
16201
|
-
/* @__PURE__ */ (0,
|
|
16150
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DrawerTitle, { className: "sr-only", children: title }),
|
|
16151
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
16202
16152
|
body
|
|
16203
16153
|
]
|
|
16204
16154
|
}
|
|
16205
16155
|
) });
|
|
16206
16156
|
}
|
|
16207
|
-
return /* @__PURE__ */ (0,
|
|
16157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16208
16158
|
DialogContent,
|
|
16209
16159
|
{
|
|
16210
16160
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
16211
16161
|
showCloseButton: false,
|
|
16212
16162
|
children: [
|
|
16213
|
-
/* @__PURE__ */ (0,
|
|
16214
|
-
/* @__PURE__ */ (0,
|
|
16163
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DialogTitle, { className: "sr-only", children: title }),
|
|
16164
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DialogDescription, { className: "sr-only", children: label }),
|
|
16215
16165
|
body
|
|
16216
16166
|
]
|
|
16217
16167
|
}
|
|
@@ -16219,7 +16169,7 @@ function AirbnbDatePickerContent({
|
|
|
16219
16169
|
}
|
|
16220
16170
|
|
|
16221
16171
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
16222
|
-
var
|
|
16172
|
+
var import_jsx_runtime173 = require("react/jsx-runtime");
|
|
16223
16173
|
var MONTHS_IN_YEAR2 = 12;
|
|
16224
16174
|
function getMonthLabels2(locale) {
|
|
16225
16175
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -16252,7 +16202,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
16252
16202
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
16253
16203
|
return new Date(yearNum, monthIndex, dayNum);
|
|
16254
16204
|
}
|
|
16255
|
-
var Datepicker =
|
|
16205
|
+
var Datepicker = React62.forwardRef(
|
|
16256
16206
|
function Datepicker2({
|
|
16257
16207
|
label,
|
|
16258
16208
|
value,
|
|
@@ -16282,14 +16232,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16282
16232
|
maxDate,
|
|
16283
16233
|
formatValue
|
|
16284
16234
|
}, ref) {
|
|
16285
|
-
const containerRef =
|
|
16286
|
-
const dayInputRef =
|
|
16287
|
-
const monthInputRef =
|
|
16288
|
-
const monthListRef =
|
|
16289
|
-
const yearInputRef =
|
|
16290
|
-
const mobileTriggerRef =
|
|
16291
|
-
const wheelBaseId =
|
|
16292
|
-
const reactId =
|
|
16235
|
+
const containerRef = React62.useRef(null);
|
|
16236
|
+
const dayInputRef = React62.useRef(null);
|
|
16237
|
+
const monthInputRef = React62.useRef(null);
|
|
16238
|
+
const monthListRef = React62.useRef(null);
|
|
16239
|
+
const yearInputRef = React62.useRef(null);
|
|
16240
|
+
const mobileTriggerRef = React62.useRef(null);
|
|
16241
|
+
const wheelBaseId = React62.useId();
|
|
16242
|
+
const reactId = React62.useId();
|
|
16293
16243
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
16294
16244
|
const dayId = `${baseId}-day`;
|
|
16295
16245
|
const monthId = `${baseId}-month`;
|
|
@@ -16298,55 +16248,55 @@ var Datepicker = React63.forwardRef(
|
|
|
16298
16248
|
const errorId = `${baseId}-error`;
|
|
16299
16249
|
const { t, i18n } = (0, import_react_i18next39.useTranslation)();
|
|
16300
16250
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
16301
|
-
const resolvedMonthLabels =
|
|
16251
|
+
const resolvedMonthLabels = React62.useMemo(
|
|
16302
16252
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
16303
16253
|
[resolvedLocale, monthLabels]
|
|
16304
16254
|
);
|
|
16305
16255
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
16306
16256
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
16307
16257
|
const isControlled = value !== void 0;
|
|
16308
|
-
const initialParts =
|
|
16258
|
+
const initialParts = React62.useMemo(
|
|
16309
16259
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
16310
16260
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16311
16261
|
[]
|
|
16312
16262
|
);
|
|
16313
|
-
const [day, setDay] =
|
|
16314
|
-
const [monthIndex, setMonthIndex] =
|
|
16263
|
+
const [day, setDay] = React62.useState(initialParts.day);
|
|
16264
|
+
const [monthIndex, setMonthIndex] = React62.useState(
|
|
16315
16265
|
initialParts.monthIndex
|
|
16316
16266
|
);
|
|
16317
|
-
const [year, setYear] =
|
|
16318
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
16319
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
16320
|
-
const [focusedField, setFocusedField] =
|
|
16321
|
-
const [monthInputValue, setMonthInputValue] =
|
|
16322
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
16267
|
+
const [year, setYear] = React62.useState(initialParts.year);
|
|
16268
|
+
const [isMonthOpen, setIsMonthOpen] = React62.useState(false);
|
|
16269
|
+
const [isWheelOpen, setIsWheelOpen] = React62.useState(false);
|
|
16270
|
+
const [focusedField, setFocusedField] = React62.useState(null);
|
|
16271
|
+
const [monthInputValue, setMonthInputValue] = React62.useState("");
|
|
16272
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React62.useState(-1);
|
|
16323
16273
|
const isMobile3 = useIsMobile();
|
|
16324
|
-
|
|
16274
|
+
React62.useImperativeHandle(
|
|
16325
16275
|
ref,
|
|
16326
16276
|
() => dayInputRef.current ?? mobileTriggerRef.current,
|
|
16327
16277
|
[]
|
|
16328
16278
|
);
|
|
16329
|
-
|
|
16279
|
+
React62.useEffect(() => {
|
|
16330
16280
|
if (!isControlled) return;
|
|
16331
16281
|
const next = partsFromDate(value ?? null);
|
|
16332
16282
|
setDay(next.day);
|
|
16333
16283
|
setMonthIndex(next.monthIndex);
|
|
16334
16284
|
setYear(next.year);
|
|
16335
16285
|
}, [isControlled, value]);
|
|
16336
|
-
|
|
16286
|
+
React62.useEffect(() => {
|
|
16337
16287
|
if (focusedField === "month") return;
|
|
16338
16288
|
setMonthInputValue(
|
|
16339
16289
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16340
16290
|
);
|
|
16341
16291
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16342
|
-
const filteredMonths =
|
|
16292
|
+
const filteredMonths = React62.useMemo(() => {
|
|
16343
16293
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16344
16294
|
const query = monthInputValue.trim().toLowerCase();
|
|
16345
16295
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16346
16296
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16347
16297
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16348
16298
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16349
|
-
|
|
16299
|
+
React62.useEffect(() => {
|
|
16350
16300
|
if (!isMonthOpen) {
|
|
16351
16301
|
setMonthHighlightIndex(-1);
|
|
16352
16302
|
return;
|
|
@@ -16367,7 +16317,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16367
16317
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16368
16318
|
const isInvalid = Boolean(invalid || error);
|
|
16369
16319
|
const wrapperWidth = toCssSize(width);
|
|
16370
|
-
const currentDate =
|
|
16320
|
+
const currentDate = React62.useMemo(
|
|
16371
16321
|
() => dateFromParts(day, monthIndex, year),
|
|
16372
16322
|
[day, monthIndex, year]
|
|
16373
16323
|
);
|
|
@@ -16376,7 +16326,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16376
16326
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16377
16327
|
isDisabled: !isMonthOpen || isMobile3
|
|
16378
16328
|
});
|
|
16379
|
-
const emitChange =
|
|
16329
|
+
const emitChange = React62.useCallback(
|
|
16380
16330
|
(nextDay, nextMonth, nextYear) => {
|
|
16381
16331
|
if (!onChange) return;
|
|
16382
16332
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16411,7 +16361,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16411
16361
|
setIsMonthOpen(true);
|
|
16412
16362
|
setMonthHighlightIndex(0);
|
|
16413
16363
|
};
|
|
16414
|
-
const commitMonthInput =
|
|
16364
|
+
const commitMonthInput = React62.useCallback(() => {
|
|
16415
16365
|
const query = monthInputValue.trim().toLowerCase();
|
|
16416
16366
|
if (!query) {
|
|
16417
16367
|
if (monthIndex !== null) {
|
|
@@ -16471,15 +16421,15 @@ var Datepicker = React63.forwardRef(
|
|
|
16471
16421
|
setIsMonthOpen(false);
|
|
16472
16422
|
}
|
|
16473
16423
|
};
|
|
16474
|
-
const focusDayInput =
|
|
16424
|
+
const focusDayInput = React62.useCallback(() => {
|
|
16475
16425
|
if (isBlocked || readOnly) return;
|
|
16476
16426
|
dayInputRef.current?.focus();
|
|
16477
16427
|
}, [isBlocked, readOnly]);
|
|
16478
|
-
const openWheel =
|
|
16428
|
+
const openWheel = React62.useCallback(() => {
|
|
16479
16429
|
if (isBlocked || readOnly) return;
|
|
16480
16430
|
setIsWheelOpen(true);
|
|
16481
16431
|
}, [isBlocked, readOnly]);
|
|
16482
|
-
const closeWheel =
|
|
16432
|
+
const closeWheel = React62.useCallback(() => {
|
|
16483
16433
|
setIsWheelOpen(false);
|
|
16484
16434
|
mobileTriggerRef.current?.focus();
|
|
16485
16435
|
}, []);
|
|
@@ -16491,7 +16441,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16491
16441
|
minDate,
|
|
16492
16442
|
maxDate
|
|
16493
16443
|
});
|
|
16494
|
-
const handleWheelDone =
|
|
16444
|
+
const handleWheelDone = React62.useCallback(() => {
|
|
16495
16445
|
const next = wheel.draftDate;
|
|
16496
16446
|
setDay(String(next.getDate()));
|
|
16497
16447
|
setMonthIndex(next.getMonth());
|
|
@@ -16500,14 +16450,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16500
16450
|
setIsWheelOpen(false);
|
|
16501
16451
|
mobileTriggerRef.current?.focus();
|
|
16502
16452
|
}, [name, onChange, wheel.draftDate]);
|
|
16503
|
-
const defaultFormatValue =
|
|
16453
|
+
const defaultFormatValue = React62.useCallback(
|
|
16504
16454
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16505
16455
|
[resolvedMonthLabels]
|
|
16506
16456
|
);
|
|
16507
16457
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16508
16458
|
const monthListboxId = `${monthId}-listbox`;
|
|
16509
16459
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16510
|
-
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0,
|
|
16460
|
+
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime173.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_runtime173.jsx)(
|
|
16511
16461
|
"ul",
|
|
16512
16462
|
{
|
|
16513
16463
|
ref: monthListRef,
|
|
@@ -16518,7 +16468,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16518
16468
|
children: filteredMonths.map((option, position) => {
|
|
16519
16469
|
const isSelected = option.index === monthIndex;
|
|
16520
16470
|
const isHighlighted = position === monthHighlightIndex;
|
|
16521
|
-
return /* @__PURE__ */ (0,
|
|
16471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16522
16472
|
"button",
|
|
16523
16473
|
{
|
|
16524
16474
|
id: getMonthOptionId(option.index),
|
|
@@ -16545,7 +16495,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16545
16495
|
isBlocked && "cursor-not-allowed",
|
|
16546
16496
|
loading && "cursor-progress"
|
|
16547
16497
|
);
|
|
16548
|
-
return /* @__PURE__ */ (0,
|
|
16498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16549
16499
|
"div",
|
|
16550
16500
|
{
|
|
16551
16501
|
ref: containerRef,
|
|
@@ -16556,9 +16506,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16556
16506
|
className
|
|
16557
16507
|
),
|
|
16558
16508
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16559
|
-
children: /* @__PURE__ */ (0,
|
|
16560
|
-
/* @__PURE__ */ (0,
|
|
16561
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
16509
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
16510
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative w-full", children: [
|
|
16511
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
16562
16512
|
"button",
|
|
16563
16513
|
{
|
|
16564
16514
|
ref: mobileTriggerRef,
|
|
@@ -16577,8 +16527,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16577
16527
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16578
16528
|
),
|
|
16579
16529
|
children: [
|
|
16580
|
-
/* @__PURE__ */ (0,
|
|
16581
|
-
/* @__PURE__ */ (0,
|
|
16530
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
16531
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16582
16532
|
import_lucide_react49.ChevronDown,
|
|
16583
16533
|
{
|
|
16584
16534
|
size: 16,
|
|
@@ -16590,14 +16540,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16590
16540
|
) })
|
|
16591
16541
|
]
|
|
16592
16542
|
}
|
|
16593
|
-
) : /* @__PURE__ */ (0,
|
|
16543
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
16594
16544
|
"div",
|
|
16595
16545
|
{
|
|
16596
16546
|
className: cn(
|
|
16597
16547
|
"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)]"
|
|
16598
16548
|
),
|
|
16599
16549
|
children: [
|
|
16600
|
-
/* @__PURE__ */ (0,
|
|
16550
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16601
16551
|
"input",
|
|
16602
16552
|
{
|
|
16603
16553
|
ref: dayInputRef,
|
|
@@ -16619,8 +16569,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16619
16569
|
className: subInputClass
|
|
16620
16570
|
}
|
|
16621
16571
|
) }),
|
|
16622
|
-
/* @__PURE__ */ (0,
|
|
16623
|
-
/* @__PURE__ */ (0,
|
|
16572
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative flex h-full min-w-0 items-center gap-1 px-2 before:absolute before:inset-y-3 before:left-0 before:w-px before:bg-[var(--chekin-color-gray-3)] before:content-[''] after:absolute after:inset-y-3 after:right-0 after:w-px after:bg-[var(--chekin-color-gray-3)] after:content-[''] sm:px-3", children: [
|
|
16573
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16624
16574
|
"input",
|
|
16625
16575
|
{
|
|
16626
16576
|
ref: monthInputRef,
|
|
@@ -16663,7 +16613,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16663
16613
|
)
|
|
16664
16614
|
}
|
|
16665
16615
|
),
|
|
16666
|
-
/* @__PURE__ */ (0,
|
|
16616
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16667
16617
|
import_lucide_react49.ChevronDown,
|
|
16668
16618
|
{
|
|
16669
16619
|
size: 14,
|
|
@@ -16680,7 +16630,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16680
16630
|
}
|
|
16681
16631
|
)
|
|
16682
16632
|
] }),
|
|
16683
|
-
/* @__PURE__ */ (0,
|
|
16633
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16684
16634
|
"input",
|
|
16685
16635
|
{
|
|
16686
16636
|
ref: yearInputRef,
|
|
@@ -16705,7 +16655,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16705
16655
|
]
|
|
16706
16656
|
}
|
|
16707
16657
|
),
|
|
16708
|
-
showCoverage && /* @__PURE__ */ (0,
|
|
16658
|
+
showCoverage && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16709
16659
|
"div",
|
|
16710
16660
|
{
|
|
16711
16661
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16713,7 +16663,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16713
16663
|
"aria-hidden": "true"
|
|
16714
16664
|
}
|
|
16715
16665
|
),
|
|
16716
|
-
/* @__PURE__ */ (0,
|
|
16666
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16717
16667
|
Fieldset,
|
|
16718
16668
|
{
|
|
16719
16669
|
isFocused,
|
|
@@ -16731,9 +16681,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16731
16681
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16732
16682
|
}
|
|
16733
16683
|
),
|
|
16734
|
-
isMonthOpen && !isMobile3 && /* @__PURE__ */ (0,
|
|
16684
|
+
isMonthOpen && !isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime173.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 })
|
|
16735
16685
|
] }),
|
|
16736
|
-
isMobile3 && /* @__PURE__ */ (0,
|
|
16686
|
+
isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16737
16687
|
AirbnbDatePickerContent,
|
|
16738
16688
|
{
|
|
16739
16689
|
baseId: wheelBaseId,
|
|
@@ -16761,9 +16711,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16761
16711
|
onOptionSelect: wheel.handleOptionSelect
|
|
16762
16712
|
}
|
|
16763
16713
|
),
|
|
16764
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
16765
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
16766
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
16714
|
+
!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") }),
|
|
16715
|
+
!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 }),
|
|
16716
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16767
16717
|
FieldErrorMessage,
|
|
16768
16718
|
{
|
|
16769
16719
|
id: errorId,
|
|
@@ -16778,7 +16728,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16778
16728
|
);
|
|
16779
16729
|
|
|
16780
16730
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16781
|
-
var
|
|
16731
|
+
var React66 = __toESM(require("react"), 1);
|
|
16782
16732
|
var import_react_i18next40 = require("react-i18next");
|
|
16783
16733
|
|
|
16784
16734
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16857,7 +16807,7 @@ var createDisabledMatchers = ({
|
|
|
16857
16807
|
};
|
|
16858
16808
|
|
|
16859
16809
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16860
|
-
var
|
|
16810
|
+
var React63 = __toESM(require("react"), 1);
|
|
16861
16811
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16862
16812
|
function useRangeValue({
|
|
16863
16813
|
value: externalValue,
|
|
@@ -16866,10 +16816,10 @@ function useRangeValue({
|
|
|
16866
16816
|
name
|
|
16867
16817
|
}) {
|
|
16868
16818
|
const isControlled = externalValue !== void 0;
|
|
16869
|
-
const [draft, setDraft] =
|
|
16819
|
+
const [draft, setDraft] = React63.useState(
|
|
16870
16820
|
isControlled ? externalValue : defaultValue
|
|
16871
16821
|
);
|
|
16872
|
-
const lastExternalKeyRef =
|
|
16822
|
+
const lastExternalKeyRef = React63.useRef(getRangeKey(externalValue));
|
|
16873
16823
|
if (isControlled) {
|
|
16874
16824
|
const externalKey = getRangeKey(externalValue);
|
|
16875
16825
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16877,7 +16827,7 @@ function useRangeValue({
|
|
|
16877
16827
|
setDraft(externalValue);
|
|
16878
16828
|
}
|
|
16879
16829
|
}
|
|
16880
|
-
const commit =
|
|
16830
|
+
const commit = React63.useCallback(
|
|
16881
16831
|
(next) => {
|
|
16882
16832
|
setDraft(next);
|
|
16883
16833
|
if (next === void 0) {
|
|
@@ -16892,7 +16842,7 @@ function useRangeValue({
|
|
|
16892
16842
|
}
|
|
16893
16843
|
|
|
16894
16844
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16895
|
-
var
|
|
16845
|
+
var React64 = __toESM(require("react"), 1);
|
|
16896
16846
|
function useRangeTextInputs({
|
|
16897
16847
|
value,
|
|
16898
16848
|
format: format2,
|
|
@@ -16900,13 +16850,13 @@ function useRangeTextInputs({
|
|
|
16900
16850
|
onCommit,
|
|
16901
16851
|
onBlur
|
|
16902
16852
|
}) {
|
|
16903
|
-
const [fromText, setFromText] =
|
|
16904
|
-
const [toText, setToText] =
|
|
16905
|
-
|
|
16853
|
+
const [fromText, setFromText] = React64.useState(value?.from ? format2(value.from) : "");
|
|
16854
|
+
const [toText, setToText] = React64.useState(value?.to ? format2(value.to) : "");
|
|
16855
|
+
React64.useEffect(() => {
|
|
16906
16856
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16907
16857
|
setToText(value?.to ? format2(value.to) : "");
|
|
16908
16858
|
}, [format2, value?.from, value?.to]);
|
|
16909
|
-
const handleFromBlur =
|
|
16859
|
+
const handleFromBlur = React64.useCallback(() => {
|
|
16910
16860
|
if (!fromText) {
|
|
16911
16861
|
const next = { from: void 0, to: value?.to };
|
|
16912
16862
|
onCommit(next);
|
|
@@ -16923,7 +16873,7 @@ function useRangeTextInputs({
|
|
|
16923
16873
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16924
16874
|
return void 0;
|
|
16925
16875
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16926
|
-
const handleToBlur =
|
|
16876
|
+
const handleToBlur = React64.useCallback(() => {
|
|
16927
16877
|
if (!toText) {
|
|
16928
16878
|
const next = { from: value?.from, to: void 0 };
|
|
16929
16879
|
onCommit(next);
|
|
@@ -16950,21 +16900,21 @@ function useRangeTextInputs({
|
|
|
16950
16900
|
}
|
|
16951
16901
|
|
|
16952
16902
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16953
|
-
var
|
|
16903
|
+
var React65 = __toESM(require("react"), 1);
|
|
16954
16904
|
function useRangeMonthSync(value) {
|
|
16955
|
-
const isPreloadedRef =
|
|
16956
|
-
const [month, setMonth] =
|
|
16957
|
-
|
|
16905
|
+
const isPreloadedRef = React65.useRef(false);
|
|
16906
|
+
const [month, setMonth] = React65.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16907
|
+
React65.useEffect(() => {
|
|
16958
16908
|
if (value?.from && !isPreloadedRef.current) {
|
|
16959
16909
|
setMonth(value.from);
|
|
16960
16910
|
isPreloadedRef.current = true;
|
|
16961
16911
|
}
|
|
16962
16912
|
}, [value?.from]);
|
|
16963
|
-
const syncMonthToValue =
|
|
16913
|
+
const syncMonthToValue = React65.useCallback((next) => {
|
|
16964
16914
|
isPreloadedRef.current = true;
|
|
16965
16915
|
if (next?.from) setMonth(next.from);
|
|
16966
16916
|
}, []);
|
|
16967
|
-
const resetPreload =
|
|
16917
|
+
const resetPreload = React65.useCallback(() => {
|
|
16968
16918
|
isPreloadedRef.current = false;
|
|
16969
16919
|
}, []);
|
|
16970
16920
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -16990,7 +16940,7 @@ function resolveRangeSelection({
|
|
|
16990
16940
|
|
|
16991
16941
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
16992
16942
|
var import_lucide_react50 = require("lucide-react");
|
|
16993
|
-
var
|
|
16943
|
+
var import_jsx_runtime174 = require("react/jsx-runtime");
|
|
16994
16944
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
16995
16945
|
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)]";
|
|
16996
16946
|
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";
|
|
@@ -17032,7 +16982,7 @@ function DateRangeInputs({
|
|
|
17032
16982
|
isBlocked && "cursor-not-allowed",
|
|
17033
16983
|
loading && "cursor-progress"
|
|
17034
16984
|
);
|
|
17035
|
-
return /* @__PURE__ */ (0,
|
|
16985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
|
|
17036
16986
|
"div",
|
|
17037
16987
|
{
|
|
17038
16988
|
className: cn(
|
|
@@ -17041,7 +16991,7 @@ function DateRangeInputs({
|
|
|
17041
16991
|
),
|
|
17042
16992
|
onClick: onRowClick,
|
|
17043
16993
|
children: [
|
|
17044
|
-
/* @__PURE__ */ (0,
|
|
16994
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17045
16995
|
"input",
|
|
17046
16996
|
{
|
|
17047
16997
|
ref: fromInputRef,
|
|
@@ -17065,7 +17015,7 @@ function DateRangeInputs({
|
|
|
17065
17015
|
)
|
|
17066
17016
|
}
|
|
17067
17017
|
),
|
|
17068
|
-
/* @__PURE__ */ (0,
|
|
17018
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17069
17019
|
"span",
|
|
17070
17020
|
{
|
|
17071
17021
|
"aria-hidden": "true",
|
|
@@ -17076,7 +17026,7 @@ function DateRangeInputs({
|
|
|
17076
17026
|
children: "\u2192"
|
|
17077
17027
|
}
|
|
17078
17028
|
),
|
|
17079
|
-
/* @__PURE__ */ (0,
|
|
17029
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17080
17030
|
"input",
|
|
17081
17031
|
{
|
|
17082
17032
|
ref: toInputRef,
|
|
@@ -17100,8 +17050,8 @@ function DateRangeInputs({
|
|
|
17100
17050
|
)
|
|
17101
17051
|
}
|
|
17102
17052
|
),
|
|
17103
|
-
/* @__PURE__ */ (0,
|
|
17104
|
-
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0,
|
|
17053
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
17054
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17105
17055
|
"button",
|
|
17106
17056
|
{
|
|
17107
17057
|
type: "button",
|
|
@@ -17109,10 +17059,10 @@ function DateRangeInputs({
|
|
|
17109
17059
|
onClick: onReset,
|
|
17110
17060
|
className: iconButtonClass,
|
|
17111
17061
|
"aria-label": clearLabel,
|
|
17112
|
-
children: /* @__PURE__ */ (0,
|
|
17062
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react50.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17113
17063
|
}
|
|
17114
17064
|
),
|
|
17115
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0,
|
|
17065
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17116
17066
|
"button",
|
|
17117
17067
|
{
|
|
17118
17068
|
type: "button",
|
|
@@ -17124,7 +17074,7 @@ function DateRangeInputs({
|
|
|
17124
17074
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
17125
17075
|
),
|
|
17126
17076
|
"aria-label": openCalendarLabel,
|
|
17127
|
-
children: /* @__PURE__ */ (0,
|
|
17077
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react50.CalendarDays, { size: 18 })
|
|
17128
17078
|
}
|
|
17129
17079
|
)
|
|
17130
17080
|
] })
|
|
@@ -17134,7 +17084,7 @@ function DateRangeInputs({
|
|
|
17134
17084
|
}
|
|
17135
17085
|
|
|
17136
17086
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
17137
|
-
var
|
|
17087
|
+
var import_jsx_runtime175 = require("react/jsx-runtime");
|
|
17138
17088
|
function DateRangeCalendar({
|
|
17139
17089
|
value,
|
|
17140
17090
|
month,
|
|
@@ -17150,7 +17100,7 @@ function DateRangeCalendar({
|
|
|
17150
17100
|
components,
|
|
17151
17101
|
...dayPickerProps
|
|
17152
17102
|
}) {
|
|
17153
|
-
return /* @__PURE__ */ (0,
|
|
17103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17154
17104
|
Calendar,
|
|
17155
17105
|
{
|
|
17156
17106
|
mode: "range",
|
|
@@ -17173,7 +17123,7 @@ function DateRangeCalendar({
|
|
|
17173
17123
|
}
|
|
17174
17124
|
|
|
17175
17125
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
17176
|
-
var
|
|
17126
|
+
var import_jsx_runtime176 = require("react/jsx-runtime");
|
|
17177
17127
|
function DateRangePopover({
|
|
17178
17128
|
isOpen,
|
|
17179
17129
|
isMobile: isMobile3,
|
|
@@ -17185,30 +17135,30 @@ function DateRangePopover({
|
|
|
17185
17135
|
}) {
|
|
17186
17136
|
if (!isOpen) return null;
|
|
17187
17137
|
if (isMobile3) {
|
|
17188
|
-
return /* @__PURE__ */ (0,
|
|
17138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17189
17139
|
Drawer,
|
|
17190
17140
|
{
|
|
17191
17141
|
open: isOpen,
|
|
17192
17142
|
onOpenChange: (next) => {
|
|
17193
17143
|
if (!next) onClose();
|
|
17194
17144
|
},
|
|
17195
|
-
children: /* @__PURE__ */ (0,
|
|
17145
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(
|
|
17196
17146
|
DrawerContent,
|
|
17197
17147
|
{
|
|
17198
17148
|
onClose,
|
|
17199
17149
|
lockScroll: false,
|
|
17200
17150
|
className: "max-h-[calc(100vh-1rem)]",
|
|
17201
17151
|
children: [
|
|
17202
|
-
/* @__PURE__ */ (0,
|
|
17203
|
-
/* @__PURE__ */ (0,
|
|
17204
|
-
/* @__PURE__ */ (0,
|
|
17152
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
17153
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
17154
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
17205
17155
|
]
|
|
17206
17156
|
}
|
|
17207
17157
|
)
|
|
17208
17158
|
}
|
|
17209
17159
|
);
|
|
17210
17160
|
}
|
|
17211
|
-
return /* @__PURE__ */ (0,
|
|
17161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17212
17162
|
"div",
|
|
17213
17163
|
{
|
|
17214
17164
|
className: cn(
|
|
@@ -17221,8 +17171,8 @@ function DateRangePopover({
|
|
|
17221
17171
|
}
|
|
17222
17172
|
|
|
17223
17173
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17224
|
-
var
|
|
17225
|
-
var DateRangePicker =
|
|
17174
|
+
var import_jsx_runtime177 = require("react/jsx-runtime");
|
|
17175
|
+
var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
17226
17176
|
label,
|
|
17227
17177
|
value: externalValue,
|
|
17228
17178
|
defaultValue,
|
|
@@ -17256,20 +17206,20 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17256
17206
|
components: customComponents,
|
|
17257
17207
|
...dayPickerProps
|
|
17258
17208
|
}, ref) {
|
|
17259
|
-
const containerRef =
|
|
17260
|
-
const fromInputRef =
|
|
17261
|
-
const toInputRef =
|
|
17262
|
-
const reactId =
|
|
17209
|
+
const containerRef = React66.useRef(null);
|
|
17210
|
+
const fromInputRef = React66.useRef(null);
|
|
17211
|
+
const toInputRef = React66.useRef(null);
|
|
17212
|
+
const reactId = React66.useId();
|
|
17263
17213
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17264
17214
|
const fromId = `${baseId}-from`;
|
|
17265
17215
|
const toId = `${baseId}-to`;
|
|
17266
17216
|
const labelId = `${baseId}-label`;
|
|
17267
17217
|
const errorId = `${baseId}-error`;
|
|
17268
|
-
const normalizedValue =
|
|
17218
|
+
const normalizedValue = React66.useMemo(() => {
|
|
17269
17219
|
if (externalValue === void 0) return void 0;
|
|
17270
17220
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17271
17221
|
}, [externalValue]);
|
|
17272
|
-
const normalizedDefaultValue =
|
|
17222
|
+
const normalizedDefaultValue = React66.useMemo(() => {
|
|
17273
17223
|
if (defaultValue === void 0) return void 0;
|
|
17274
17224
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17275
17225
|
}, [defaultValue]);
|
|
@@ -17279,10 +17229,10 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17279
17229
|
onChange,
|
|
17280
17230
|
name
|
|
17281
17231
|
});
|
|
17282
|
-
const normalizedMinDate =
|
|
17283
|
-
const normalizedMaxDate =
|
|
17284
|
-
const formatter =
|
|
17285
|
-
const parser =
|
|
17232
|
+
const normalizedMinDate = React66.useMemo(() => toDate(minDate), [minDate]);
|
|
17233
|
+
const normalizedMaxDate = React66.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17234
|
+
const formatter = React66.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17235
|
+
const parser = React66.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17286
17236
|
const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
|
|
17287
17237
|
value,
|
|
17288
17238
|
format: formatter,
|
|
@@ -17291,9 +17241,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17291
17241
|
onBlur
|
|
17292
17242
|
});
|
|
17293
17243
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17294
|
-
const [isOpen, setIsOpen] =
|
|
17295
|
-
const [focusedInput, setFocusedInput] =
|
|
17296
|
-
const [autoFocus, setAutoFocus] =
|
|
17244
|
+
const [isOpen, setIsOpen] = React66.useState(false);
|
|
17245
|
+
const [focusedInput, setFocusedInput] = React66.useState(null);
|
|
17246
|
+
const [autoFocus, setAutoFocus] = React66.useState(false);
|
|
17297
17247
|
const isMobile3 = useIsMobile();
|
|
17298
17248
|
const { t } = (0, import_react_i18next40.useTranslation)();
|
|
17299
17249
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17304,13 +17254,13 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17304
17254
|
const isFocused = focusedInput !== null || isOpen;
|
|
17305
17255
|
const wrapperWidth = toCssSize(width);
|
|
17306
17256
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17307
|
-
const closeCalendar =
|
|
17257
|
+
const closeCalendar = React66.useCallback(() => {
|
|
17308
17258
|
setIsOpen(false);
|
|
17309
17259
|
setFocusedInput(null);
|
|
17310
17260
|
setAutoFocus(false);
|
|
17311
17261
|
if (value?.from) setMonth(value.from);
|
|
17312
17262
|
}, [setMonth, value?.from]);
|
|
17313
|
-
const openCalendar =
|
|
17263
|
+
const openCalendar = React66.useCallback(() => {
|
|
17314
17264
|
if (isBlocked || readOnly) return;
|
|
17315
17265
|
setIsOpen(true);
|
|
17316
17266
|
}, [isBlocked, readOnly]);
|
|
@@ -17319,7 +17269,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17319
17269
|
onOutsideClick: closeCalendar,
|
|
17320
17270
|
isDisabled: !isOpen || isMobile3
|
|
17321
17271
|
});
|
|
17322
|
-
const handlePickerChange =
|
|
17272
|
+
const handlePickerChange = React66.useCallback(
|
|
17323
17273
|
(range, pickedDate) => {
|
|
17324
17274
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17325
17275
|
previous: value,
|
|
@@ -17340,7 +17290,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17340
17290
|
setToText("");
|
|
17341
17291
|
setMonth(/* @__PURE__ */ new Date());
|
|
17342
17292
|
};
|
|
17343
|
-
const disabledMatchers =
|
|
17293
|
+
const disabledMatchers = React66.useMemo(
|
|
17344
17294
|
() => createDisabledMatchers({
|
|
17345
17295
|
minDate: normalizedMinDate,
|
|
17346
17296
|
maxDate: normalizedMaxDate,
|
|
@@ -17359,7 +17309,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17359
17309
|
openCalendar();
|
|
17360
17310
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17361
17311
|
};
|
|
17362
|
-
|
|
17312
|
+
React66.useImperativeHandle(
|
|
17363
17313
|
ref,
|
|
17364
17314
|
() => ({
|
|
17365
17315
|
setDateRange: (range) => {
|
|
@@ -17382,7 +17332,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17382
17332
|
syncMonthToValue
|
|
17383
17333
|
]
|
|
17384
17334
|
);
|
|
17385
|
-
return /* @__PURE__ */ (0,
|
|
17335
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17386
17336
|
"div",
|
|
17387
17337
|
{
|
|
17388
17338
|
ref: containerRef,
|
|
@@ -17393,9 +17343,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17393
17343
|
className
|
|
17394
17344
|
),
|
|
17395
17345
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17396
|
-
children: /* @__PURE__ */ (0,
|
|
17397
|
-
/* @__PURE__ */ (0,
|
|
17398
|
-
/* @__PURE__ */ (0,
|
|
17346
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
17347
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: "relative w-full", children: [
|
|
17348
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17399
17349
|
DateRangeInputs,
|
|
17400
17350
|
{
|
|
17401
17351
|
fromId,
|
|
@@ -17446,7 +17396,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17446
17396
|
onToggleCalendar: toggleCalendar
|
|
17447
17397
|
}
|
|
17448
17398
|
),
|
|
17449
|
-
/* @__PURE__ */ (0,
|
|
17399
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17450
17400
|
Fieldset,
|
|
17451
17401
|
{
|
|
17452
17402
|
isFocused,
|
|
@@ -17463,7 +17413,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17463
17413
|
tooltip
|
|
17464
17414
|
}
|
|
17465
17415
|
),
|
|
17466
|
-
/* @__PURE__ */ (0,
|
|
17416
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17467
17417
|
DateRangePopover,
|
|
17468
17418
|
{
|
|
17469
17419
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17472,7 +17422,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17472
17422
|
drawerTitle,
|
|
17473
17423
|
drawerDescription,
|
|
17474
17424
|
onClose: closeCalendar,
|
|
17475
|
-
children: /* @__PURE__ */ (0,
|
|
17425
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17476
17426
|
DateRangeCalendar,
|
|
17477
17427
|
{
|
|
17478
17428
|
value,
|
|
@@ -17493,7 +17443,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17493
17443
|
}
|
|
17494
17444
|
)
|
|
17495
17445
|
] }),
|
|
17496
|
-
/* @__PURE__ */ (0,
|
|
17446
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17497
17447
|
DateRangePopover,
|
|
17498
17448
|
{
|
|
17499
17449
|
isOpen: isOpen && isMobile3,
|
|
@@ -17502,7 +17452,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17502
17452
|
drawerTitle,
|
|
17503
17453
|
drawerDescription,
|
|
17504
17454
|
onClose: closeCalendar,
|
|
17505
|
-
children: /* @__PURE__ */ (0,
|
|
17455
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17506
17456
|
DateRangeCalendar,
|
|
17507
17457
|
{
|
|
17508
17458
|
value,
|
|
@@ -17522,9 +17472,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17522
17472
|
)
|
|
17523
17473
|
}
|
|
17524
17474
|
),
|
|
17525
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
17526
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
17527
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
17475
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime177.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") }),
|
|
17476
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17477
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17528
17478
|
FieldErrorMessage,
|
|
17529
17479
|
{
|
|
17530
17480
|
id: errorId,
|
|
@@ -17538,7 +17488,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17538
17488
|
});
|
|
17539
17489
|
|
|
17540
17490
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17541
|
-
var
|
|
17491
|
+
var React67 = __toESM(require("react"), 1);
|
|
17542
17492
|
var import_react_i18next41 = require("react-i18next");
|
|
17543
17493
|
var import_date_fns4 = require("date-fns");
|
|
17544
17494
|
var import_react_day_picker2 = require("react-day-picker");
|
|
@@ -17561,11 +17511,11 @@ function useValidateDates({
|
|
|
17561
17511
|
const { t } = (0, import_react_i18next41.useTranslation)();
|
|
17562
17512
|
const handleError = useEvent(onError);
|
|
17563
17513
|
const handleSuccess = useEvent(onSuccess);
|
|
17564
|
-
const errorFormatter =
|
|
17514
|
+
const errorFormatter = React67.useMemo(
|
|
17565
17515
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17566
17516
|
[displayFormat]
|
|
17567
17517
|
);
|
|
17568
|
-
const validateDates =
|
|
17518
|
+
const validateDates = React67.useCallback(
|
|
17569
17519
|
(dates) => {
|
|
17570
17520
|
const startDate = dates?.from;
|
|
17571
17521
|
const endDate = dates?.to;
|
|
@@ -17615,9 +17565,9 @@ function useValidateDates({
|
|
|
17615
17565
|
}
|
|
17616
17566
|
|
|
17617
17567
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17618
|
-
var
|
|
17568
|
+
var React68 = __toESM(require("react"), 1);
|
|
17619
17569
|
var import_date_fns5 = require("date-fns");
|
|
17620
|
-
var
|
|
17570
|
+
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
17621
17571
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17622
17572
|
function parseTime(value) {
|
|
17623
17573
|
return (0, import_date_fns5.parse)(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17659,24 +17609,24 @@ var FORMAT_SETTINGS = {
|
|
|
17659
17609
|
},
|
|
17660
17610
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17661
17611
|
};
|
|
17662
|
-
var TimePicker =
|
|
17663
|
-
const resolvedOptions =
|
|
17612
|
+
var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17613
|
+
const resolvedOptions = React68.useMemo(() => {
|
|
17664
17614
|
if (options) return options;
|
|
17665
17615
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17666
17616
|
return buildOptions(settings);
|
|
17667
17617
|
}, [formatName, options, timeSettings]);
|
|
17668
|
-
return /* @__PURE__ */ (0,
|
|
17618
|
+
return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17669
17619
|
});
|
|
17670
17620
|
|
|
17671
17621
|
// src/dashboard/file-input/FileInput.tsx
|
|
17672
|
-
var
|
|
17622
|
+
var React69 = __toESM(require("react"), 1);
|
|
17673
17623
|
var import_lucide_react51 = require("lucide-react");
|
|
17674
17624
|
var import_react_i18next42 = require("react-i18next");
|
|
17675
|
-
var
|
|
17625
|
+
var import_jsx_runtime179 = require("react/jsx-runtime");
|
|
17676
17626
|
function defaultDownload(url) {
|
|
17677
17627
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17678
17628
|
}
|
|
17679
|
-
var FileInput =
|
|
17629
|
+
var FileInput = React69.forwardRef(function FileInput2({
|
|
17680
17630
|
label,
|
|
17681
17631
|
value,
|
|
17682
17632
|
onChange,
|
|
@@ -17698,12 +17648,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17698
17648
|
width,
|
|
17699
17649
|
downloadLabel
|
|
17700
17650
|
}, ref) {
|
|
17701
|
-
const internalRef =
|
|
17651
|
+
const internalRef = React69.useRef(null);
|
|
17702
17652
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17703
17653
|
const { t } = (0, import_react_i18next42.useTranslation)();
|
|
17704
17654
|
const resolvedLabel = label ?? t("upload_file");
|
|
17705
17655
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17706
|
-
const reactId =
|
|
17656
|
+
const reactId = React69.useId();
|
|
17707
17657
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17708
17658
|
const labelId = `${inputId}-label`;
|
|
17709
17659
|
const errorId = `${inputId}-error`;
|
|
@@ -17729,7 +17679,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17729
17679
|
event.stopPropagation();
|
|
17730
17680
|
if (isUrl) onDownload(value);
|
|
17731
17681
|
};
|
|
17732
|
-
return /* @__PURE__ */ (0,
|
|
17682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17733
17683
|
"label",
|
|
17734
17684
|
{
|
|
17735
17685
|
htmlFor: inputId,
|
|
@@ -17742,7 +17692,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17742
17692
|
),
|
|
17743
17693
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17744
17694
|
children: [
|
|
17745
|
-
/* @__PURE__ */ (0,
|
|
17695
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17746
17696
|
"input",
|
|
17747
17697
|
{
|
|
17748
17698
|
ref: inputRef,
|
|
@@ -17758,9 +17708,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17758
17708
|
"aria-invalid": isInvalid
|
|
17759
17709
|
}
|
|
17760
17710
|
),
|
|
17761
|
-
/* @__PURE__ */ (0,
|
|
17762
|
-
/* @__PURE__ */ (0,
|
|
17763
|
-
/* @__PURE__ */ (0,
|
|
17711
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "relative w-full", children: [
|
|
17712
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "relative w-full", children: [
|
|
17713
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17764
17714
|
"div",
|
|
17765
17715
|
{
|
|
17766
17716
|
className: cn(
|
|
@@ -17768,25 +17718,25 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17768
17718
|
isEmpty && "bg-[var(--empty-field-background)]"
|
|
17769
17719
|
),
|
|
17770
17720
|
children: [
|
|
17771
|
-
hasFileChip ? /* @__PURE__ */ (0,
|
|
17721
|
+
hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17772
17722
|
"div",
|
|
17773
17723
|
{
|
|
17774
17724
|
className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
|
|
17775
17725
|
onClick: (event) => event.preventDefault(),
|
|
17776
17726
|
children: [
|
|
17777
|
-
isUrl ? /* @__PURE__ */ (0,
|
|
17727
|
+
isUrl ? /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17778
17728
|
"button",
|
|
17779
17729
|
{
|
|
17780
17730
|
type: "button",
|
|
17781
17731
|
onClick: handleDownload,
|
|
17782
17732
|
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",
|
|
17783
17733
|
children: [
|
|
17784
|
-
/* @__PURE__ */ (0,
|
|
17785
|
-
/* @__PURE__ */ (0,
|
|
17734
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
17735
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react51.Download, { size: 15 })
|
|
17786
17736
|
]
|
|
17787
17737
|
}
|
|
17788
|
-
) : /* @__PURE__ */ (0,
|
|
17789
|
-
/* @__PURE__ */ (0,
|
|
17738
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
17739
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17790
17740
|
"button",
|
|
17791
17741
|
{
|
|
17792
17742
|
type: "button",
|
|
@@ -17794,17 +17744,17 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17794
17744
|
onClick: handleClear,
|
|
17795
17745
|
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]",
|
|
17796
17746
|
"aria-label": t("remove_file"),
|
|
17797
|
-
children: /* @__PURE__ */ (0,
|
|
17747
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react51.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17798
17748
|
}
|
|
17799
17749
|
)
|
|
17800
17750
|
]
|
|
17801
17751
|
}
|
|
17802
|
-
) : /* @__PURE__ */ (0,
|
|
17803
|
-
/* @__PURE__ */ (0,
|
|
17752
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
17753
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react51.Paperclip, { size: 20 }) })
|
|
17804
17754
|
]
|
|
17805
17755
|
}
|
|
17806
17756
|
),
|
|
17807
|
-
/* @__PURE__ */ (0,
|
|
17757
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17808
17758
|
Fieldset,
|
|
17809
17759
|
{
|
|
17810
17760
|
isFocused: false,
|
|
@@ -17822,9 +17772,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17822
17772
|
}
|
|
17823
17773
|
)
|
|
17824
17774
|
] }),
|
|
17825
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
17826
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
17827
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
17775
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime179.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") }),
|
|
17776
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17777
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17828
17778
|
FieldErrorMessage,
|
|
17829
17779
|
{
|
|
17830
17780
|
id: errorId,
|
|
@@ -17839,10 +17789,10 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17839
17789
|
});
|
|
17840
17790
|
|
|
17841
17791
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17842
|
-
var
|
|
17843
|
-
var
|
|
17792
|
+
var React70 = __toESM(require("react"), 1);
|
|
17793
|
+
var import_jsx_runtime180 = require("react/jsx-runtime");
|
|
17844
17794
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17845
|
-
var SelectIconsBox =
|
|
17795
|
+
var SelectIconsBox = React70.forwardRef(
|
|
17846
17796
|
function SelectIconsBox2({
|
|
17847
17797
|
children,
|
|
17848
17798
|
icons,
|
|
@@ -17857,10 +17807,10 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17857
17807
|
className,
|
|
17858
17808
|
boxClassName
|
|
17859
17809
|
}, ref) {
|
|
17860
|
-
const containerRef =
|
|
17810
|
+
const containerRef = React70.useRef(null);
|
|
17861
17811
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17862
17812
|
const isControlled = controlledOpen !== void 0;
|
|
17863
|
-
const [internalOpen, setInternalOpen] =
|
|
17813
|
+
const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
|
|
17864
17814
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17865
17815
|
const setOpen = (next) => {
|
|
17866
17816
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17886,7 +17836,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17886
17836
|
);
|
|
17887
17837
|
focusable?.focus();
|
|
17888
17838
|
};
|
|
17889
|
-
return /* @__PURE__ */ (0,
|
|
17839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
|
|
17890
17840
|
"div",
|
|
17891
17841
|
{
|
|
17892
17842
|
ref: combinedContainerRef,
|
|
@@ -17896,7 +17846,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17896
17846
|
className: cn("relative inline-block outline-none", className),
|
|
17897
17847
|
children: [
|
|
17898
17848
|
children,
|
|
17899
|
-
isOpen && /* @__PURE__ */ (0,
|
|
17849
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
17900
17850
|
"div",
|
|
17901
17851
|
{
|
|
17902
17852
|
className: cn(
|
|
@@ -17907,7 +17857,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17907
17857
|
boxClassName
|
|
17908
17858
|
),
|
|
17909
17859
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
17910
|
-
children: icons.map((iconName) => /* @__PURE__ */ (0,
|
|
17860
|
+
children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
17911
17861
|
"button",
|
|
17912
17862
|
{
|
|
17913
17863
|
type: "button",
|
|
@@ -17990,14 +17940,14 @@ function getErrorMessage(error) {
|
|
|
17990
17940
|
|
|
17991
17941
|
// src/lib/toastResponseError.tsx
|
|
17992
17942
|
var import_i18next = __toESM(require("i18next"), 1);
|
|
17993
|
-
var
|
|
17943
|
+
var import_jsx_runtime181 = require("react/jsx-runtime");
|
|
17994
17944
|
function addSupportEmailToMessage(message, prefixText) {
|
|
17995
17945
|
if (typeof message !== "string") {
|
|
17996
17946
|
return message;
|
|
17997
17947
|
}
|
|
17998
17948
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
17999
|
-
return /* @__PURE__ */ (0,
|
|
18000
|
-
/* @__PURE__ */ (0,
|
|
17949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { children: [
|
|
17950
|
+
/* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { children: builtMessage }),
|
|
18001
17951
|
import_i18next.default.t("reach_us_at_email")
|
|
18002
17952
|
] });
|
|
18003
17953
|
}
|
|
@@ -18013,12 +17963,12 @@ function toastResponseError(error, options = {}) {
|
|
|
18013
17963
|
|
|
18014
17964
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
18015
17965
|
var import_react89 = require("react");
|
|
18016
|
-
var
|
|
17966
|
+
var import_jsx_runtime182 = require("react/jsx-runtime");
|
|
18017
17967
|
var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
18018
17968
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
18019
17969
|
const inputId = (0, import_react89.useId)();
|
|
18020
|
-
return /* @__PURE__ */ (0,
|
|
18021
|
-
/* @__PURE__ */ (0,
|
|
17970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: cn("relative", className), children: [
|
|
17971
|
+
/* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
|
|
18022
17972
|
"textarea",
|
|
18023
17973
|
{
|
|
18024
17974
|
ref,
|
|
@@ -18034,7 +17984,7 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18034
17984
|
...textareaProps
|
|
18035
17985
|
}
|
|
18036
17986
|
),
|
|
18037
|
-
label && /* @__PURE__ */ (0,
|
|
17987
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
|
|
18038
17988
|
"label",
|
|
18039
17989
|
{
|
|
18040
17990
|
htmlFor: inputId,
|
|
@@ -18052,15 +18002,15 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18052
18002
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
18053
18003
|
|
|
18054
18004
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18055
|
-
var
|
|
18005
|
+
var React72 = __toESM(require("react"), 1);
|
|
18056
18006
|
var import_lucide_react53 = require("lucide-react");
|
|
18057
18007
|
|
|
18058
18008
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
18059
|
-
var
|
|
18009
|
+
var React71 = __toESM(require("react"), 1);
|
|
18060
18010
|
var import_lucide_react52 = require("lucide-react");
|
|
18061
18011
|
var import_react_i18next43 = require("react-i18next");
|
|
18062
|
-
var
|
|
18063
|
-
var AirbnbFieldTrigger =
|
|
18012
|
+
var import_jsx_runtime183 = require("react/jsx-runtime");
|
|
18013
|
+
var AirbnbFieldTrigger = React71.forwardRef(
|
|
18064
18014
|
({
|
|
18065
18015
|
as = "button",
|
|
18066
18016
|
id,
|
|
@@ -18096,14 +18046,14 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18096
18046
|
const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
|
|
18097
18047
|
const visibleLabelText = labelText ?? label;
|
|
18098
18048
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
18099
|
-
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0,
|
|
18100
|
-
/* @__PURE__ */ (0,
|
|
18101
|
-
optionalLabel && /* @__PURE__ */ (0,
|
|
18049
|
+
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
|
|
18050
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsx)("span", { className: "min-w-0 truncate", children: visibleLabelText }),
|
|
18051
|
+
optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "text-current opacity-70 lowercase", children: [
|
|
18102
18052
|
"(",
|
|
18103
18053
|
optionalLabel,
|
|
18104
18054
|
")"
|
|
18105
18055
|
] }),
|
|
18106
|
-
tooltip && /* @__PURE__ */ (0,
|
|
18056
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18107
18057
|
HelpTooltip,
|
|
18108
18058
|
{
|
|
18109
18059
|
content: tooltip,
|
|
@@ -18118,9 +18068,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18118
18068
|
const hasInvalidState = Boolean(error);
|
|
18119
18069
|
const errorMessage = typeof error === "string" ? error : void 0;
|
|
18120
18070
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18121
|
-
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0,
|
|
18071
|
+
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "flex items-center gap-2", children: [
|
|
18122
18072
|
trailingAdornment,
|
|
18123
|
-
loading && /* @__PURE__ */ (0,
|
|
18073
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18124
18074
|
import_lucide_react52.Loader2,
|
|
18125
18075
|
{
|
|
18126
18076
|
"aria-hidden": "true",
|
|
@@ -18136,8 +18086,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18136
18086
|
disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
|
|
18137
18087
|
className
|
|
18138
18088
|
);
|
|
18139
|
-
const sharedContent = /* @__PURE__ */ (0,
|
|
18140
|
-
/* @__PURE__ */ (0,
|
|
18089
|
+
const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(import_jsx_runtime183.Fragment, { children: [
|
|
18090
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(
|
|
18141
18091
|
"span",
|
|
18142
18092
|
{
|
|
18143
18093
|
className: cn(
|
|
@@ -18146,7 +18096,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18146
18096
|
contentClassName
|
|
18147
18097
|
),
|
|
18148
18098
|
children: [
|
|
18149
|
-
/* @__PURE__ */ (0,
|
|
18099
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18150
18100
|
"span",
|
|
18151
18101
|
{
|
|
18152
18102
|
id: labelId,
|
|
@@ -18159,7 +18109,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18159
18109
|
children: animatedLabel
|
|
18160
18110
|
}
|
|
18161
18111
|
),
|
|
18162
|
-
children ? children : hasValue ? /* @__PURE__ */ (0,
|
|
18112
|
+
children ? children : hasValue ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18163
18113
|
"span",
|
|
18164
18114
|
{
|
|
18165
18115
|
id: valueId,
|
|
@@ -18170,11 +18120,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18170
18120
|
),
|
|
18171
18121
|
children: valueText
|
|
18172
18122
|
}
|
|
18173
|
-
) : /* @__PURE__ */ (0,
|
|
18123
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
18174
18124
|
]
|
|
18175
18125
|
}
|
|
18176
18126
|
),
|
|
18177
|
-
resolvedTrailingAdornment && /* @__PURE__ */ (0,
|
|
18127
|
+
resolvedTrailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18178
18128
|
"span",
|
|
18179
18129
|
{
|
|
18180
18130
|
"aria-hidden": "true",
|
|
@@ -18183,9 +18133,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18183
18133
|
}
|
|
18184
18134
|
)
|
|
18185
18135
|
] });
|
|
18186
|
-
return /* @__PURE__ */ (0,
|
|
18187
|
-
topLabel && /* @__PURE__ */ (0,
|
|
18188
|
-
as === "button" ? /* @__PURE__ */ (0,
|
|
18136
|
+
return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { className: "w-full", children: [
|
|
18137
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
|
|
18138
|
+
as === "button" ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18189
18139
|
"button",
|
|
18190
18140
|
{
|
|
18191
18141
|
id,
|
|
@@ -18202,7 +18152,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18202
18152
|
...props,
|
|
18203
18153
|
children: sharedContent
|
|
18204
18154
|
}
|
|
18205
|
-
) : /* @__PURE__ */ (0,
|
|
18155
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18206
18156
|
"div",
|
|
18207
18157
|
{
|
|
18208
18158
|
id,
|
|
@@ -18219,16 +18169,16 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18219
18169
|
children: sharedContent
|
|
18220
18170
|
}
|
|
18221
18171
|
),
|
|
18222
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
18172
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
18223
18173
|
] });
|
|
18224
18174
|
}
|
|
18225
18175
|
);
|
|
18226
18176
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
18227
18177
|
|
|
18228
18178
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18229
|
-
var
|
|
18179
|
+
var import_jsx_runtime184 = require("react/jsx-runtime");
|
|
18230
18180
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18231
|
-
var AirbnbDatePicker =
|
|
18181
|
+
var AirbnbDatePicker = React72.forwardRef(
|
|
18232
18182
|
({
|
|
18233
18183
|
label,
|
|
18234
18184
|
topLabel,
|
|
@@ -18253,24 +18203,24 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18253
18203
|
formatValue = formatDateValue
|
|
18254
18204
|
}, ref) => {
|
|
18255
18205
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18256
|
-
const [isOpen, setIsOpen] =
|
|
18257
|
-
const triggerId =
|
|
18258
|
-
const pickerId =
|
|
18259
|
-
const labelId =
|
|
18260
|
-
const valueId =
|
|
18261
|
-
const helperTextId =
|
|
18262
|
-
const errorId =
|
|
18263
|
-
const internalRef =
|
|
18206
|
+
const [isOpen, setIsOpen] = React72.useState(false);
|
|
18207
|
+
const triggerId = React72.useId();
|
|
18208
|
+
const pickerId = React72.useId();
|
|
18209
|
+
const labelId = React72.useId();
|
|
18210
|
+
const valueId = React72.useId();
|
|
18211
|
+
const helperTextId = React72.useId();
|
|
18212
|
+
const errorId = React72.useId();
|
|
18213
|
+
const internalRef = React72.useRef(null);
|
|
18264
18214
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18265
|
-
const monthLabels =
|
|
18266
|
-
const resolvedMinDate =
|
|
18267
|
-
const resolvedMaxDate =
|
|
18268
|
-
const normalizedValue =
|
|
18269
|
-
const normalizedDefaultValue =
|
|
18215
|
+
const monthLabels = React72.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18216
|
+
const resolvedMinDate = React72.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18217
|
+
const resolvedMaxDate = React72.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18218
|
+
const normalizedValue = React72.useMemo(() => normalizeDateValue(value), [value]);
|
|
18219
|
+
const normalizedDefaultValue = React72.useMemo(
|
|
18270
18220
|
() => normalizeDateValue(defaultValue),
|
|
18271
18221
|
[defaultValue]
|
|
18272
18222
|
);
|
|
18273
|
-
const resolvedValue =
|
|
18223
|
+
const resolvedValue = React72.useMemo(
|
|
18274
18224
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18275
18225
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18276
18226
|
);
|
|
@@ -18301,7 +18251,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18301
18251
|
minDate: resolvedMinDate,
|
|
18302
18252
|
maxDate: resolvedMaxDate
|
|
18303
18253
|
});
|
|
18304
|
-
const handleOpenChange =
|
|
18254
|
+
const handleOpenChange = React72.useCallback(
|
|
18305
18255
|
(nextOpen) => {
|
|
18306
18256
|
if (isBlocked && nextOpen) return;
|
|
18307
18257
|
setIsOpen(nextOpen);
|
|
@@ -18311,7 +18261,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18311
18261
|
},
|
|
18312
18262
|
[isBlocked]
|
|
18313
18263
|
);
|
|
18314
|
-
const handleDone =
|
|
18264
|
+
const handleDone = React72.useCallback(() => {
|
|
18315
18265
|
if (isBlocked) return;
|
|
18316
18266
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18317
18267
|
handleOpenChange(false);
|
|
@@ -18323,11 +18273,11 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18323
18273
|
resolvedMaxDate,
|
|
18324
18274
|
resolvedMinDate
|
|
18325
18275
|
]);
|
|
18326
|
-
const handleTriggerClick =
|
|
18276
|
+
const handleTriggerClick = React72.useCallback(() => {
|
|
18327
18277
|
if (isBlocked) return;
|
|
18328
18278
|
setIsOpen(true);
|
|
18329
18279
|
}, [isBlocked]);
|
|
18330
|
-
const handleTriggerKeyDown =
|
|
18280
|
+
const handleTriggerKeyDown = React72.useCallback(
|
|
18331
18281
|
(event) => {
|
|
18332
18282
|
if (isBlocked) return;
|
|
18333
18283
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18337,13 +18287,13 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18337
18287
|
},
|
|
18338
18288
|
[isBlocked]
|
|
18339
18289
|
);
|
|
18340
|
-
|
|
18290
|
+
React72.useEffect(() => {
|
|
18341
18291
|
if (isBlocked) {
|
|
18342
18292
|
setIsOpen(false);
|
|
18343
18293
|
}
|
|
18344
18294
|
}, [isBlocked]);
|
|
18345
|
-
return /* @__PURE__ */ (0,
|
|
18346
|
-
name && /* @__PURE__ */ (0,
|
|
18295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
|
|
18296
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18347
18297
|
"input",
|
|
18348
18298
|
{
|
|
18349
18299
|
type: "hidden",
|
|
@@ -18351,7 +18301,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18351
18301
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
18352
18302
|
}
|
|
18353
18303
|
),
|
|
18354
|
-
/* @__PURE__ */ (0,
|
|
18304
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18355
18305
|
AirbnbFieldTrigger,
|
|
18356
18306
|
{
|
|
18357
18307
|
id: triggerId,
|
|
@@ -18377,10 +18327,10 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18377
18327
|
onClick: handleTriggerClick,
|
|
18378
18328
|
onKeyDown: handleTriggerKeyDown,
|
|
18379
18329
|
onBlur,
|
|
18380
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
18330
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_lucide_react53.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18381
18331
|
}
|
|
18382
18332
|
),
|
|
18383
|
-
/* @__PURE__ */ (0,
|
|
18333
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18384
18334
|
AirbnbDatePickerContent,
|
|
18385
18335
|
{
|
|
18386
18336
|
baseId: pickerId,
|
|
@@ -18414,12 +18364,12 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18414
18364
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18415
18365
|
|
|
18416
18366
|
// src/airbnb-fields/input/Input.tsx
|
|
18417
|
-
var
|
|
18367
|
+
var React73 = __toESM(require("react"), 1);
|
|
18418
18368
|
var import_lucide_react54 = require("lucide-react");
|
|
18419
18369
|
var import_react_i18next44 = require("react-i18next");
|
|
18420
|
-
var
|
|
18370
|
+
var import_jsx_runtime185 = require("react/jsx-runtime");
|
|
18421
18371
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18422
|
-
var AirbnbInput =
|
|
18372
|
+
var AirbnbInput = React73.forwardRef(
|
|
18423
18373
|
({
|
|
18424
18374
|
label,
|
|
18425
18375
|
topLabel,
|
|
@@ -18448,16 +18398,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18448
18398
|
...props
|
|
18449
18399
|
}, ref) => {
|
|
18450
18400
|
const { t } = (0, import_react_i18next44.useTranslation)();
|
|
18451
|
-
const generatedId =
|
|
18452
|
-
const inputRef =
|
|
18401
|
+
const generatedId = React73.useId();
|
|
18402
|
+
const inputRef = React73.useRef(null);
|
|
18453
18403
|
const inputId = id ?? generatedId;
|
|
18454
18404
|
const fieldId = `${inputId}-field`;
|
|
18455
18405
|
const labelId = `${inputId}-label`;
|
|
18456
18406
|
const errorId = `${inputId}-error`;
|
|
18457
18407
|
const accessibleLabel = placeholder ?? label;
|
|
18458
|
-
const [isFocused, setIsFocused] =
|
|
18459
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18460
|
-
const [currentValue, setCurrentValue] =
|
|
18408
|
+
const [isFocused, setIsFocused] = React73.useState(false);
|
|
18409
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React73.useState(false);
|
|
18410
|
+
const [currentValue, setCurrentValue] = React73.useState(
|
|
18461
18411
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18462
18412
|
);
|
|
18463
18413
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18470,16 +18420,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18470
18420
|
const triggerError = error ?? invalid;
|
|
18471
18421
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18472
18422
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18473
|
-
|
|
18423
|
+
React73.useLayoutEffect(() => {
|
|
18474
18424
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18475
18425
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18476
18426
|
}, [value]);
|
|
18477
|
-
|
|
18427
|
+
React73.useEffect(() => {
|
|
18478
18428
|
if (!isPasswordInput) {
|
|
18479
18429
|
setIsPasswordRevealed(false);
|
|
18480
18430
|
}
|
|
18481
18431
|
}, [isPasswordInput]);
|
|
18482
|
-
const setRefs =
|
|
18432
|
+
const setRefs = React73.useCallback(
|
|
18483
18433
|
(node) => {
|
|
18484
18434
|
inputRef.current = node;
|
|
18485
18435
|
if (node && value == null) {
|
|
@@ -18512,7 +18462,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18512
18462
|
const togglePasswordReveal = () => {
|
|
18513
18463
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18514
18464
|
};
|
|
18515
|
-
return /* @__PURE__ */ (0,
|
|
18465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
|
|
18516
18466
|
AirbnbFieldTrigger,
|
|
18517
18467
|
{
|
|
18518
18468
|
as: "div",
|
|
@@ -18541,7 +18491,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18541
18491
|
forceLabelText: hasLabelMeta,
|
|
18542
18492
|
hideErrorMessage: !renderErrorMessage,
|
|
18543
18493
|
children: [
|
|
18544
|
-
/* @__PURE__ */ (0,
|
|
18494
|
+
/* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18545
18495
|
"input",
|
|
18546
18496
|
{
|
|
18547
18497
|
...props,
|
|
@@ -18571,7 +18521,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18571
18521
|
)
|
|
18572
18522
|
}
|
|
18573
18523
|
),
|
|
18574
|
-
shouldShowPasswordReveal && /* @__PURE__ */ (0,
|
|
18524
|
+
shouldShowPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18575
18525
|
"button",
|
|
18576
18526
|
{
|
|
18577
18527
|
type: "button",
|
|
@@ -18579,7 +18529,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18579
18529
|
disabled: isBlocked,
|
|
18580
18530
|
className: "absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[#7A8399] hover:text-[#1F1F1B] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
|
|
18581
18531
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18582
|
-
children: /* @__PURE__ */ (0,
|
|
18532
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18583
18533
|
import_lucide_react54.Eye,
|
|
18584
18534
|
{
|
|
18585
18535
|
size: 18,
|
|
@@ -18597,14 +18547,14 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18597
18547
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18598
18548
|
|
|
18599
18549
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18600
|
-
var
|
|
18550
|
+
var React79 = __toESM(require("react"), 1);
|
|
18601
18551
|
var import_lucide_react56 = require("lucide-react");
|
|
18602
18552
|
|
|
18603
18553
|
// src/airbnb-fields/select/Select.tsx
|
|
18604
|
-
var
|
|
18554
|
+
var React78 = __toESM(require("react"), 1);
|
|
18605
18555
|
|
|
18606
18556
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18607
|
-
var
|
|
18557
|
+
var import_jsx_runtime186 = require("react/jsx-runtime");
|
|
18608
18558
|
function AirbnbSelectDesktopMenu({
|
|
18609
18559
|
id,
|
|
18610
18560
|
options,
|
|
@@ -18623,7 +18573,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18623
18573
|
noOptionsMessage
|
|
18624
18574
|
}) {
|
|
18625
18575
|
const emptyMessage = noOptionsMessage?.();
|
|
18626
|
-
return /* @__PURE__ */ (0,
|
|
18576
|
+
return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
|
|
18627
18577
|
"div",
|
|
18628
18578
|
{
|
|
18629
18579
|
id,
|
|
@@ -18636,12 +18586,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18636
18586
|
onKeyDown,
|
|
18637
18587
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18638
18588
|
children: [
|
|
18639
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
18589
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18640
18590
|
options.map((option, index) => {
|
|
18641
18591
|
const isSelected = selectedValue?.value === option.value;
|
|
18642
18592
|
const isHighlighted = index === highlightedIndex;
|
|
18643
18593
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18644
|
-
return /* @__PURE__ */ (0,
|
|
18594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
|
|
18645
18595
|
"button",
|
|
18646
18596
|
{
|
|
18647
18597
|
id: getOptionId2(index),
|
|
@@ -18673,7 +18623,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18673
18623
|
}
|
|
18674
18624
|
|
|
18675
18625
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18676
|
-
var
|
|
18626
|
+
var import_jsx_runtime187 = require("react/jsx-runtime");
|
|
18677
18627
|
function AirbnbSelectDesktopContent({
|
|
18678
18628
|
isOpen,
|
|
18679
18629
|
listboxId,
|
|
@@ -18694,14 +18644,14 @@ function AirbnbSelectDesktopContent({
|
|
|
18694
18644
|
noOptionsMessage
|
|
18695
18645
|
}) {
|
|
18696
18646
|
if (!isOpen) return null;
|
|
18697
|
-
return /* @__PURE__ */ (0,
|
|
18647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
18698
18648
|
"div",
|
|
18699
18649
|
{
|
|
18700
18650
|
className: cn(
|
|
18701
18651
|
"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)]",
|
|
18702
18652
|
dropdownClassName
|
|
18703
18653
|
),
|
|
18704
|
-
children: /* @__PURE__ */ (0,
|
|
18654
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
18705
18655
|
AirbnbSelectDesktopMenu,
|
|
18706
18656
|
{
|
|
18707
18657
|
id: listboxId,
|
|
@@ -18799,7 +18749,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
18799
18749
|
}
|
|
18800
18750
|
|
|
18801
18751
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
18802
|
-
var
|
|
18752
|
+
var import_jsx_runtime188 = require("react/jsx-runtime");
|
|
18803
18753
|
function AirbnbSelectMobileWheel({
|
|
18804
18754
|
id,
|
|
18805
18755
|
options,
|
|
@@ -18818,7 +18768,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18818
18768
|
}) {
|
|
18819
18769
|
const spacerHeight2 = getWheelSpacerHeight();
|
|
18820
18770
|
const emptyMessage = noOptionsMessage?.();
|
|
18821
|
-
return /* @__PURE__ */ (0,
|
|
18771
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
|
|
18822
18772
|
"div",
|
|
18823
18773
|
{
|
|
18824
18774
|
id,
|
|
@@ -18830,10 +18780,10 @@ function AirbnbSelectMobileWheel({
|
|
|
18830
18780
|
onKeyDown,
|
|
18831
18781
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
18832
18782
|
children: [
|
|
18833
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
18834
|
-
/* @__PURE__ */ (0,
|
|
18835
|
-
/* @__PURE__ */ (0,
|
|
18836
|
-
/* @__PURE__ */ (0,
|
|
18783
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18784
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.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" }),
|
|
18785
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.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" }),
|
|
18786
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
18837
18787
|
"div",
|
|
18838
18788
|
{
|
|
18839
18789
|
"aria-hidden": true,
|
|
@@ -18843,7 +18793,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18843
18793
|
)
|
|
18844
18794
|
}
|
|
18845
18795
|
),
|
|
18846
|
-
/* @__PURE__ */ (0,
|
|
18796
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
|
|
18847
18797
|
"div",
|
|
18848
18798
|
{
|
|
18849
18799
|
ref: listRef,
|
|
@@ -18858,11 +18808,11 @@ function AirbnbSelectMobileWheel({
|
|
|
18858
18808
|
WebkitOverflowScrolling: "touch"
|
|
18859
18809
|
},
|
|
18860
18810
|
children: [
|
|
18861
|
-
/* @__PURE__ */ (0,
|
|
18811
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
|
|
18862
18812
|
options.map((option, index) => {
|
|
18863
18813
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
18864
18814
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18865
|
-
return /* @__PURE__ */ (0,
|
|
18815
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
18866
18816
|
"button",
|
|
18867
18817
|
{
|
|
18868
18818
|
id: getOptionId2(index),
|
|
@@ -18883,7 +18833,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18883
18833
|
optionKey
|
|
18884
18834
|
);
|
|
18885
18835
|
}),
|
|
18886
|
-
/* @__PURE__ */ (0,
|
|
18836
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { style: { height: `${spacerHeight2}px` } })
|
|
18887
18837
|
]
|
|
18888
18838
|
}
|
|
18889
18839
|
)
|
|
@@ -18893,7 +18843,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18893
18843
|
}
|
|
18894
18844
|
|
|
18895
18845
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
18896
|
-
var
|
|
18846
|
+
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
18897
18847
|
function AirbnbSelectMobileContent({
|
|
18898
18848
|
open,
|
|
18899
18849
|
onOpenChange,
|
|
@@ -18917,11 +18867,11 @@ function AirbnbSelectMobileContent({
|
|
|
18917
18867
|
getOptionId: getOptionId2,
|
|
18918
18868
|
noOptionsMessage
|
|
18919
18869
|
}) {
|
|
18920
|
-
return /* @__PURE__ */ (0,
|
|
18921
|
-
/* @__PURE__ */ (0,
|
|
18922
|
-
/* @__PURE__ */ (0,
|
|
18923
|
-
/* @__PURE__ */ (0,
|
|
18924
|
-
/* @__PURE__ */ (0,
|
|
18870
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
|
|
18871
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
18872
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
18873
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
|
|
18874
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
18925
18875
|
AirbnbSelectMobileWheel,
|
|
18926
18876
|
{
|
|
18927
18877
|
id: listboxId,
|
|
@@ -18940,16 +18890,16 @@ function AirbnbSelectMobileContent({
|
|
|
18940
18890
|
noOptionsMessage
|
|
18941
18891
|
}
|
|
18942
18892
|
),
|
|
18943
|
-
/* @__PURE__ */ (0,
|
|
18893
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
18944
18894
|
] })
|
|
18945
18895
|
] }) });
|
|
18946
18896
|
}
|
|
18947
18897
|
|
|
18948
18898
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18949
|
-
var
|
|
18899
|
+
var React74 = __toESM(require("react"), 1);
|
|
18950
18900
|
var import_lucide_react55 = require("lucide-react");
|
|
18951
|
-
var
|
|
18952
|
-
var AirbnbSelectTrigger =
|
|
18901
|
+
var import_jsx_runtime190 = require("react/jsx-runtime");
|
|
18902
|
+
var AirbnbSelectTrigger = React74.forwardRef(
|
|
18953
18903
|
({
|
|
18954
18904
|
id,
|
|
18955
18905
|
open,
|
|
@@ -18973,7 +18923,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18973
18923
|
onKeyDown,
|
|
18974
18924
|
onBlur
|
|
18975
18925
|
}, ref) => {
|
|
18976
|
-
return /* @__PURE__ */ (0,
|
|
18926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
18977
18927
|
AirbnbFieldTrigger,
|
|
18978
18928
|
{
|
|
18979
18929
|
id,
|
|
@@ -19001,7 +18951,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
19001
18951
|
onClick,
|
|
19002
18952
|
onKeyDown,
|
|
19003
18953
|
onBlur,
|
|
19004
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
18954
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
19005
18955
|
import_lucide_react55.ChevronDown,
|
|
19006
18956
|
{
|
|
19007
18957
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
@@ -19014,7 +18964,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
19014
18964
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
19015
18965
|
|
|
19016
18966
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
19017
|
-
var
|
|
18967
|
+
var React75 = __toESM(require("react"), 1);
|
|
19018
18968
|
function useDesktopSelect({
|
|
19019
18969
|
isMobile: isMobile3,
|
|
19020
18970
|
isOpen,
|
|
@@ -19023,12 +18973,12 @@ function useDesktopSelect({
|
|
|
19023
18973
|
disabled,
|
|
19024
18974
|
onChange
|
|
19025
18975
|
}) {
|
|
19026
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19027
|
-
const triggerRef =
|
|
19028
|
-
const listRef =
|
|
19029
|
-
const optionRefs =
|
|
18976
|
+
const [highlightedIndex, setHighlightedIndex] = React75.useState(-1);
|
|
18977
|
+
const triggerRef = React75.useRef(null);
|
|
18978
|
+
const listRef = React75.useRef(null);
|
|
18979
|
+
const optionRefs = React75.useRef([]);
|
|
19030
18980
|
const selectedIndex = getOptionIndex2(options, value);
|
|
19031
|
-
|
|
18981
|
+
React75.useEffect(() => {
|
|
19032
18982
|
if (!isOpen || isMobile3) return;
|
|
19033
18983
|
setHighlightedIndex((currentIndex) => {
|
|
19034
18984
|
if (currentIndex >= 0) {
|
|
@@ -19043,34 +18993,34 @@ function useDesktopSelect({
|
|
|
19043
18993
|
window.cancelAnimationFrame(frameId);
|
|
19044
18994
|
};
|
|
19045
18995
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
19046
|
-
|
|
18996
|
+
React75.useEffect(() => {
|
|
19047
18997
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
19048
18998
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
19049
18999
|
block: "nearest"
|
|
19050
19000
|
});
|
|
19051
19001
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
19052
|
-
|
|
19002
|
+
React75.useEffect(() => {
|
|
19053
19003
|
if (isOpen) return;
|
|
19054
19004
|
setHighlightedIndex(-1);
|
|
19055
19005
|
}, [isOpen]);
|
|
19056
|
-
const focusTrigger =
|
|
19006
|
+
const focusTrigger = React75.useCallback(() => {
|
|
19057
19007
|
triggerRef.current?.focus();
|
|
19058
19008
|
}, []);
|
|
19059
|
-
const handleSelect =
|
|
19009
|
+
const handleSelect = React75.useCallback(
|
|
19060
19010
|
(option) => {
|
|
19061
19011
|
if (option.isDisabled || disabled) return;
|
|
19062
19012
|
onChange?.(option);
|
|
19063
19013
|
},
|
|
19064
19014
|
[disabled, onChange]
|
|
19065
19015
|
);
|
|
19066
|
-
const openMenu =
|
|
19016
|
+
const openMenu = React75.useCallback(
|
|
19067
19017
|
(targetIndex) => {
|
|
19068
19018
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19069
19019
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
19070
19020
|
},
|
|
19071
19021
|
[options, selectedIndex]
|
|
19072
19022
|
);
|
|
19073
|
-
const handleTriggerKeyDown =
|
|
19023
|
+
const handleTriggerKeyDown = React75.useCallback(
|
|
19074
19024
|
(event, onOpen) => {
|
|
19075
19025
|
if (disabled) return;
|
|
19076
19026
|
if (event.key === "ArrowDown") {
|
|
@@ -19095,7 +19045,7 @@ function useDesktopSelect({
|
|
|
19095
19045
|
},
|
|
19096
19046
|
[disabled, openMenu, options, selectedIndex]
|
|
19097
19047
|
);
|
|
19098
|
-
const handleMenuKeyDown =
|
|
19048
|
+
const handleMenuKeyDown = React75.useCallback(
|
|
19099
19049
|
(event, onClose) => {
|
|
19100
19050
|
if (event.key === "Escape") {
|
|
19101
19051
|
event.preventDefault();
|
|
@@ -19145,7 +19095,7 @@ function useDesktopSelect({
|
|
|
19145
19095
|
},
|
|
19146
19096
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
19147
19097
|
);
|
|
19148
|
-
const setOptionRef =
|
|
19098
|
+
const setOptionRef = React75.useCallback(
|
|
19149
19099
|
(index, node) => {
|
|
19150
19100
|
optionRefs.current[index] = node;
|
|
19151
19101
|
},
|
|
@@ -19165,23 +19115,23 @@ function useDesktopSelect({
|
|
|
19165
19115
|
}
|
|
19166
19116
|
|
|
19167
19117
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19168
|
-
var
|
|
19118
|
+
var React76 = __toESM(require("react"), 1);
|
|
19169
19119
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19170
|
-
const [pendingValue, setPendingValue] =
|
|
19120
|
+
const [pendingValue, setPendingValue] = React76.useState(
|
|
19171
19121
|
value ?? null
|
|
19172
19122
|
);
|
|
19173
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19174
|
-
const mobileListRef =
|
|
19175
|
-
const scrollSettleTimeoutRef =
|
|
19176
|
-
const scrollAnimationFrameRef =
|
|
19177
|
-
const getTargetIndex =
|
|
19123
|
+
const [mobileScrollTop, setMobileScrollTop] = React76.useState(0);
|
|
19124
|
+
const mobileListRef = React76.useRef(null);
|
|
19125
|
+
const scrollSettleTimeoutRef = React76.useRef(null);
|
|
19126
|
+
const scrollAnimationFrameRef = React76.useRef(null);
|
|
19127
|
+
const getTargetIndex = React76.useCallback(
|
|
19178
19128
|
(targetValue) => {
|
|
19179
19129
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19180
19130
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19181
19131
|
},
|
|
19182
19132
|
[options]
|
|
19183
19133
|
);
|
|
19184
|
-
const syncScrollPosition =
|
|
19134
|
+
const syncScrollPosition = React76.useCallback(
|
|
19185
19135
|
(targetValue, behavior = "instant") => {
|
|
19186
19136
|
const targetIndex = getTargetIndex(targetValue);
|
|
19187
19137
|
if (targetIndex < 0) return;
|
|
@@ -19200,27 +19150,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19200
19150
|
},
|
|
19201
19151
|
[getTargetIndex, options]
|
|
19202
19152
|
);
|
|
19203
|
-
const clearScrollSettleTimeout =
|
|
19153
|
+
const clearScrollSettleTimeout = React76.useCallback(() => {
|
|
19204
19154
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19205
19155
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19206
19156
|
scrollSettleTimeoutRef.current = null;
|
|
19207
19157
|
}, []);
|
|
19208
|
-
const clearScrollAnimationFrame =
|
|
19158
|
+
const clearScrollAnimationFrame = React76.useCallback(() => {
|
|
19209
19159
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19210
19160
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19211
19161
|
scrollAnimationFrameRef.current = null;
|
|
19212
19162
|
}, []);
|
|
19213
|
-
|
|
19163
|
+
React76.useEffect(
|
|
19214
19164
|
() => () => {
|
|
19215
19165
|
clearScrollSettleTimeout();
|
|
19216
19166
|
clearScrollAnimationFrame();
|
|
19217
19167
|
},
|
|
19218
19168
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19219
19169
|
);
|
|
19220
|
-
|
|
19170
|
+
React76.useEffect(() => {
|
|
19221
19171
|
setPendingValue(value ?? null);
|
|
19222
19172
|
}, [value]);
|
|
19223
|
-
|
|
19173
|
+
React76.useLayoutEffect(() => {
|
|
19224
19174
|
if (!isMobile3 || !isOpen) return;
|
|
19225
19175
|
const frameId = window.requestAnimationFrame(() => {
|
|
19226
19176
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19229,7 +19179,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19229
19179
|
window.cancelAnimationFrame(frameId);
|
|
19230
19180
|
};
|
|
19231
19181
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19232
|
-
const settleScroll =
|
|
19182
|
+
const settleScroll = React76.useCallback(() => {
|
|
19233
19183
|
if (!mobileListRef.current) return;
|
|
19234
19184
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19235
19185
|
const nextOption = options[nextIndex];
|
|
@@ -19241,13 +19191,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19241
19191
|
}
|
|
19242
19192
|
setPendingValue(nextOption);
|
|
19243
19193
|
}, [options, pendingValue]);
|
|
19244
|
-
const scheduleScrollSettle =
|
|
19194
|
+
const scheduleScrollSettle = React76.useCallback(() => {
|
|
19245
19195
|
clearScrollSettleTimeout();
|
|
19246
19196
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19247
19197
|
settleScroll();
|
|
19248
19198
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19249
19199
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19250
|
-
const handleScroll =
|
|
19200
|
+
const handleScroll = React76.useCallback(() => {
|
|
19251
19201
|
if (!mobileListRef.current) return;
|
|
19252
19202
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19253
19203
|
clearScrollAnimationFrame();
|
|
@@ -19257,7 +19207,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19257
19207
|
});
|
|
19258
19208
|
scheduleScrollSettle();
|
|
19259
19209
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19260
|
-
const focusOptionByIndex =
|
|
19210
|
+
const focusOptionByIndex = React76.useCallback(
|
|
19261
19211
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19262
19212
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19263
19213
|
const option = options[index];
|
|
@@ -19275,7 +19225,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19275
19225
|
},
|
|
19276
19226
|
[options, scheduleScrollSettle]
|
|
19277
19227
|
);
|
|
19278
|
-
const handleOptionClick =
|
|
19228
|
+
const handleOptionClick = React76.useCallback(
|
|
19279
19229
|
(option) => {
|
|
19280
19230
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19281
19231
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19284,7 +19234,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19284
19234
|
},
|
|
19285
19235
|
[disabled, focusOptionByIndex, options]
|
|
19286
19236
|
);
|
|
19287
|
-
const moveByStep =
|
|
19237
|
+
const moveByStep = React76.useCallback(
|
|
19288
19238
|
(step) => {
|
|
19289
19239
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19290
19240
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19296,7 +19246,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19296
19246
|
},
|
|
19297
19247
|
[focusOptionByIndex, options, pendingValue]
|
|
19298
19248
|
);
|
|
19299
|
-
const moveToBoundary =
|
|
19249
|
+
const moveToBoundary = React76.useCallback(
|
|
19300
19250
|
(boundary) => {
|
|
19301
19251
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19302
19252
|
if (targetIndex >= 0) {
|
|
@@ -19305,7 +19255,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19305
19255
|
},
|
|
19306
19256
|
[focusOptionByIndex, options]
|
|
19307
19257
|
);
|
|
19308
|
-
const syncPendingValue =
|
|
19258
|
+
const syncPendingValue = React76.useCallback(
|
|
19309
19259
|
(nextValue) => {
|
|
19310
19260
|
const normalizedValue = nextValue ?? null;
|
|
19311
19261
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19333,9 +19283,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19333
19283
|
}
|
|
19334
19284
|
|
|
19335
19285
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19336
|
-
var
|
|
19286
|
+
var React77 = __toESM(require("react"), 1);
|
|
19337
19287
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19338
|
-
const reactId =
|
|
19288
|
+
const reactId = React77.useId().replace(/:/g, "");
|
|
19339
19289
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19340
19290
|
const triggerId = `${baseId}-trigger`;
|
|
19341
19291
|
const labelId = `${baseId}-label`;
|
|
@@ -19345,7 +19295,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19345
19295
|
const listboxId = `${baseId}-listbox`;
|
|
19346
19296
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19347
19297
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19348
|
-
const getOptionId2 =
|
|
19298
|
+
const getOptionId2 = React77.useCallback(
|
|
19349
19299
|
(index) => `${baseId}-option-${index}`,
|
|
19350
19300
|
[baseId]
|
|
19351
19301
|
);
|
|
@@ -19363,8 +19313,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19363
19313
|
}
|
|
19364
19314
|
|
|
19365
19315
|
// src/airbnb-fields/select/Select.tsx
|
|
19366
|
-
var
|
|
19367
|
-
var AirbnbSelect =
|
|
19316
|
+
var import_jsx_runtime191 = require("react/jsx-runtime");
|
|
19317
|
+
var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
19368
19318
|
options = [],
|
|
19369
19319
|
value,
|
|
19370
19320
|
onChange,
|
|
@@ -19391,8 +19341,8 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19391
19341
|
filterOption
|
|
19392
19342
|
}, ref) {
|
|
19393
19343
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19394
|
-
const [isOpen, setIsOpen] =
|
|
19395
|
-
const containerRef =
|
|
19344
|
+
const [isOpen, setIsOpen] = React78.useState(false);
|
|
19345
|
+
const containerRef = React78.useRef(null);
|
|
19396
19346
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19397
19347
|
const hasValue = Boolean(value);
|
|
19398
19348
|
const helperText = placeholder ?? label;
|
|
@@ -19454,12 +19404,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19454
19404
|
onOutsideClick: () => setIsOpen(false),
|
|
19455
19405
|
isDisabled: !isOpen || isMobile3
|
|
19456
19406
|
});
|
|
19457
|
-
|
|
19407
|
+
React78.useEffect(() => {
|
|
19458
19408
|
if (isBlocked) {
|
|
19459
19409
|
setIsOpen(false);
|
|
19460
19410
|
}
|
|
19461
19411
|
}, [isBlocked]);
|
|
19462
|
-
|
|
19412
|
+
React78.useEffect(
|
|
19463
19413
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19464
19414
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19465
19415
|
return;
|
|
@@ -19471,7 +19421,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19471
19421
|
},
|
|
19472
19422
|
[onChange, filteredOptions, value]
|
|
19473
19423
|
);
|
|
19474
|
-
const handleMobileOpenChange =
|
|
19424
|
+
const handleMobileOpenChange = React78.useCallback(
|
|
19475
19425
|
(nextOpen) => {
|
|
19476
19426
|
if (isBlocked && nextOpen) return;
|
|
19477
19427
|
setIsOpen(nextOpen);
|
|
@@ -19482,7 +19432,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19482
19432
|
},
|
|
19483
19433
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19484
19434
|
);
|
|
19485
|
-
const handleMobileDone =
|
|
19435
|
+
const handleMobileDone = React78.useCallback(() => {
|
|
19486
19436
|
if (isBlocked) return;
|
|
19487
19437
|
const finalOption = pendingValue;
|
|
19488
19438
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19491,7 +19441,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19491
19441
|
setIsOpen(false);
|
|
19492
19442
|
focusTrigger();
|
|
19493
19443
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19494
|
-
const handleTriggerClick =
|
|
19444
|
+
const handleTriggerClick = React78.useCallback(() => {
|
|
19495
19445
|
if (isBlocked) return;
|
|
19496
19446
|
setIsOpen((prev) => {
|
|
19497
19447
|
const nextOpen = !prev;
|
|
@@ -19544,13 +19494,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19544
19494
|
handleMobileOpenChange(false);
|
|
19545
19495
|
}
|
|
19546
19496
|
};
|
|
19547
|
-
return /* @__PURE__ */ (0,
|
|
19497
|
+
return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
|
|
19548
19498
|
"div",
|
|
19549
19499
|
{
|
|
19550
19500
|
ref: containerRef,
|
|
19551
19501
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19552
19502
|
children: [
|
|
19553
|
-
name && /* @__PURE__ */ (0,
|
|
19503
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19554
19504
|
renderTrigger ? renderTrigger({
|
|
19555
19505
|
id: triggerId,
|
|
19556
19506
|
open: isOpen,
|
|
@@ -19571,7 +19521,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19571
19521
|
onClick: handleTriggerClick,
|
|
19572
19522
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19573
19523
|
onBlur
|
|
19574
|
-
}) : /* @__PURE__ */ (0,
|
|
19524
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19575
19525
|
AirbnbSelectTrigger,
|
|
19576
19526
|
{
|
|
19577
19527
|
id: triggerId,
|
|
@@ -19598,7 +19548,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19598
19548
|
onBlur
|
|
19599
19549
|
}
|
|
19600
19550
|
),
|
|
19601
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
19551
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19602
19552
|
AirbnbSelectMobileContent,
|
|
19603
19553
|
{
|
|
19604
19554
|
open: isOpen,
|
|
@@ -19623,7 +19573,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19623
19573
|
getOptionId: getOptionId2,
|
|
19624
19574
|
noOptionsMessage
|
|
19625
19575
|
}
|
|
19626
|
-
) : /* @__PURE__ */ (0,
|
|
19576
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19627
19577
|
AirbnbSelectDesktopContent,
|
|
19628
19578
|
{
|
|
19629
19579
|
isOpen,
|
|
@@ -19657,13 +19607,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19657
19607
|
});
|
|
19658
19608
|
|
|
19659
19609
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19660
|
-
var
|
|
19610
|
+
var import_jsx_runtime192 = require("react/jsx-runtime");
|
|
19661
19611
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19662
19612
|
const label = String(option.label);
|
|
19663
19613
|
const value = String(option.value);
|
|
19664
19614
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19665
19615
|
}
|
|
19666
|
-
var AirbnbPhoneField =
|
|
19616
|
+
var AirbnbPhoneField = React79.forwardRef(
|
|
19667
19617
|
({
|
|
19668
19618
|
label,
|
|
19669
19619
|
topLabel,
|
|
@@ -19684,10 +19634,12 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19684
19634
|
codeName,
|
|
19685
19635
|
numberName,
|
|
19686
19636
|
mobileTitle,
|
|
19687
|
-
codePlaceholder = "+00"
|
|
19637
|
+
codePlaceholder = "+00",
|
|
19638
|
+
defaultCode
|
|
19688
19639
|
}, ref) => {
|
|
19689
|
-
const inputId =
|
|
19690
|
-
const
|
|
19640
|
+
const inputId = React79.useId();
|
|
19641
|
+
const effectiveCode = value?.code || defaultCode || "";
|
|
19642
|
+
const codeOptions = React79.useMemo(
|
|
19691
19643
|
() => options.map((option) => ({
|
|
19692
19644
|
value: option.value,
|
|
19693
19645
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19695,26 +19647,26 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19695
19647
|
})),
|
|
19696
19648
|
[options]
|
|
19697
19649
|
);
|
|
19698
|
-
const selectedCodeOption =
|
|
19699
|
-
() => codeOptions.find((option) => option.value ===
|
|
19700
|
-
[codeOptions,
|
|
19650
|
+
const selectedCodeOption = React79.useMemo(
|
|
19651
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19652
|
+
[codeOptions, effectiveCode]
|
|
19701
19653
|
);
|
|
19702
|
-
const combinedValue =
|
|
19654
|
+
const combinedValue = effectiveCode || value?.number ? `${effectiveCode}${value?.number ?? ""}` : "";
|
|
19703
19655
|
const hasInvalidState = Boolean(error) || Boolean(invalid);
|
|
19704
19656
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
19705
19657
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
19706
|
-
return /* @__PURE__ */ (0,
|
|
19707
|
-
name && /* @__PURE__ */ (0,
|
|
19708
|
-
codeName && /* @__PURE__ */ (0,
|
|
19658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
19659
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
19660
|
+
codeName && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19709
19661
|
"input",
|
|
19710
19662
|
{
|
|
19711
19663
|
type: "hidden",
|
|
19712
19664
|
name: codeName,
|
|
19713
|
-
value:
|
|
19665
|
+
value: effectiveCode,
|
|
19714
19666
|
disabled
|
|
19715
19667
|
}
|
|
19716
19668
|
),
|
|
19717
|
-
numberName && /* @__PURE__ */ (0,
|
|
19669
|
+
numberName && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19718
19670
|
"input",
|
|
19719
19671
|
{
|
|
19720
19672
|
type: "hidden",
|
|
@@ -19723,7 +19675,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19723
19675
|
disabled
|
|
19724
19676
|
}
|
|
19725
19677
|
),
|
|
19726
|
-
topLabel && /* @__PURE__ */ (0,
|
|
19678
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19727
19679
|
"label",
|
|
19728
19680
|
{
|
|
19729
19681
|
htmlFor: inputId,
|
|
@@ -19731,8 +19683,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19731
19683
|
children: topLabel
|
|
19732
19684
|
}
|
|
19733
19685
|
),
|
|
19734
|
-
/* @__PURE__ */ (0,
|
|
19735
|
-
/* @__PURE__ */ (0,
|
|
19686
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "flex items-stretch", children: [
|
|
19687
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19736
19688
|
AirbnbSelect,
|
|
19737
19689
|
{
|
|
19738
19690
|
ref,
|
|
@@ -19761,7 +19713,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19761
19713
|
onClick,
|
|
19762
19714
|
onKeyDown,
|
|
19763
19715
|
valueLabel
|
|
19764
|
-
}) => /* @__PURE__ */ (0,
|
|
19716
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
|
|
19765
19717
|
"button",
|
|
19766
19718
|
{
|
|
19767
19719
|
id,
|
|
@@ -19782,8 +19734,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19782
19734
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
19783
19735
|
),
|
|
19784
19736
|
children: [
|
|
19785
|
-
/* @__PURE__ */ (0,
|
|
19786
|
-
/* @__PURE__ */ (0,
|
|
19737
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)("span", { children: valueLabel ?? codePlaceholder }),
|
|
19738
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19787
19739
|
import_lucide_react56.ChevronDown,
|
|
19788
19740
|
{
|
|
19789
19741
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
@@ -19795,7 +19747,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19795
19747
|
)
|
|
19796
19748
|
}
|
|
19797
19749
|
),
|
|
19798
|
-
/* @__PURE__ */ (0,
|
|
19750
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19799
19751
|
AirbnbInput,
|
|
19800
19752
|
{
|
|
19801
19753
|
id: inputId,
|
|
@@ -19817,25 +19769,25 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19817
19769
|
contentClassName: "h-[40px] py-2",
|
|
19818
19770
|
inputClassName: "text-[16px] leading-7",
|
|
19819
19771
|
onChange: (event) => onChange({
|
|
19820
|
-
code:
|
|
19772
|
+
code: effectiveCode,
|
|
19821
19773
|
number: event.target.value
|
|
19822
19774
|
}),
|
|
19823
19775
|
onBlur
|
|
19824
19776
|
}
|
|
19825
19777
|
)
|
|
19826
19778
|
] }),
|
|
19827
|
-
error && /* @__PURE__ */ (0,
|
|
19779
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(FieldErrorMessage, { message: error })
|
|
19828
19780
|
] });
|
|
19829
19781
|
}
|
|
19830
19782
|
);
|
|
19831
19783
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19832
19784
|
|
|
19833
19785
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19834
|
-
var
|
|
19786
|
+
var React80 = __toESM(require("react"), 1);
|
|
19835
19787
|
var import_lucide_react57 = require("lucide-react");
|
|
19836
19788
|
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
19837
19789
|
var import_react90 = require("react");
|
|
19838
|
-
var
|
|
19790
|
+
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
19839
19791
|
var ROW_HEIGHT = 48;
|
|
19840
19792
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
19841
19793
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -19875,13 +19827,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19875
19827
|
loadingMessage
|
|
19876
19828
|
}, ref) => {
|
|
19877
19829
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19878
|
-
const reactId =
|
|
19879
|
-
const [open, setOpen] =
|
|
19880
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
19881
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19882
|
-
const containerRef =
|
|
19883
|
-
const triggerRef =
|
|
19884
|
-
const inputRef =
|
|
19830
|
+
const reactId = React80.useId();
|
|
19831
|
+
const [open, setOpen] = React80.useState(false);
|
|
19832
|
+
const [internalSearchValue, setInternalSearchValue] = React80.useState("");
|
|
19833
|
+
const [highlightedIndex, setHighlightedIndex] = React80.useState(-1);
|
|
19834
|
+
const containerRef = React80.useRef(null);
|
|
19835
|
+
const triggerRef = React80.useRef(null);
|
|
19836
|
+
const inputRef = React80.useRef(null);
|
|
19885
19837
|
const listboxId = `${reactId}-listbox`;
|
|
19886
19838
|
const labelId = `${reactId}-label`;
|
|
19887
19839
|
const valueId = `${reactId}-value`;
|
|
@@ -19890,13 +19842,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19890
19842
|
const searchInputId = `${reactId}-search`;
|
|
19891
19843
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19892
19844
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19893
|
-
const visibleOptions =
|
|
19845
|
+
const visibleOptions = React80.useMemo(() => {
|
|
19894
19846
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19895
19847
|
return options;
|
|
19896
19848
|
}
|
|
19897
19849
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19898
19850
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19899
|
-
const selectedIndex =
|
|
19851
|
+
const selectedIndex = React80.useMemo(
|
|
19900
19852
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19901
19853
|
[value?.value, visibleOptions]
|
|
19902
19854
|
);
|
|
@@ -19922,7 +19874,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19922
19874
|
},
|
|
19923
19875
|
[handleOnOpenChange]
|
|
19924
19876
|
);
|
|
19925
|
-
|
|
19877
|
+
React80.useEffect(() => {
|
|
19926
19878
|
if (isBlocked) {
|
|
19927
19879
|
setSelectOpen(false);
|
|
19928
19880
|
return;
|
|
@@ -19935,7 +19887,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19935
19887
|
window.cancelAnimationFrame(frameId);
|
|
19936
19888
|
};
|
|
19937
19889
|
}, [isBlocked, open, setSelectOpen]);
|
|
19938
|
-
|
|
19890
|
+
React80.useEffect(() => {
|
|
19939
19891
|
if (!open) {
|
|
19940
19892
|
setHighlightedIndex(-1);
|
|
19941
19893
|
return;
|
|
@@ -20003,7 +19955,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20003
19955
|
}
|
|
20004
19956
|
}
|
|
20005
19957
|
}
|
|
20006
|
-
const content = /* @__PURE__ */ (0,
|
|
19958
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20007
19959
|
AirbnbSearchableSelectContent,
|
|
20008
19960
|
{
|
|
20009
19961
|
inputId: searchInputId,
|
|
@@ -20030,10 +19982,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20030
19982
|
onOptionHover: setHighlightedIndex
|
|
20031
19983
|
}
|
|
20032
19984
|
);
|
|
20033
|
-
|
|
20034
|
-
return /* @__PURE__ */ (0,
|
|
20035
|
-
name && /* @__PURE__ */ (0,
|
|
20036
|
-
/* @__PURE__ */ (0,
|
|
19985
|
+
React80.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
19986
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
19987
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19988
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20037
19989
|
AirbnbFieldTrigger,
|
|
20038
19990
|
{
|
|
20039
19991
|
id: `${reactId}-trigger`,
|
|
@@ -20067,7 +20019,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20067
20019
|
},
|
|
20068
20020
|
onKeyDown: handleTriggerKeyDown,
|
|
20069
20021
|
onBlur,
|
|
20070
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
20022
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20071
20023
|
import_lucide_react57.ChevronDown,
|
|
20072
20024
|
{
|
|
20073
20025
|
className: cn(
|
|
@@ -20078,7 +20030,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20078
20030
|
)
|
|
20079
20031
|
}
|
|
20080
20032
|
),
|
|
20081
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
20033
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20082
20034
|
Drawer,
|
|
20083
20035
|
{
|
|
20084
20036
|
open,
|
|
@@ -20090,13 +20042,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20090
20042
|
}
|
|
20091
20043
|
closeSelect();
|
|
20092
20044
|
},
|
|
20093
|
-
children: /* @__PURE__ */ (0,
|
|
20094
|
-
/* @__PURE__ */ (0,
|
|
20095
|
-
/* @__PURE__ */ (0,
|
|
20096
|
-
/* @__PURE__ */ (0,
|
|
20045
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
20046
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
20047
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
20048
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
20097
20049
|
] })
|
|
20098
20050
|
}
|
|
20099
|
-
) : open ? /* @__PURE__ */ (0,
|
|
20051
|
+
) : open ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20100
20052
|
"div",
|
|
20101
20053
|
{
|
|
20102
20054
|
className: cn(
|
|
@@ -20108,7 +20060,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20108
20060
|
) : null
|
|
20109
20061
|
] });
|
|
20110
20062
|
};
|
|
20111
|
-
var AirbnbSearchableSelect =
|
|
20063
|
+
var AirbnbSearchableSelect = React80.forwardRef(
|
|
20112
20064
|
AirbnbSearchableSelectInternal
|
|
20113
20065
|
);
|
|
20114
20066
|
function AirbnbSearchableSelectContent({
|
|
@@ -20135,9 +20087,9 @@ function AirbnbSearchableSelectContent({
|
|
|
20135
20087
|
onOptionClick,
|
|
20136
20088
|
onOptionHover
|
|
20137
20089
|
}) {
|
|
20138
|
-
const listRef =
|
|
20139
|
-
const lastLoadMoreOptionsLengthRef =
|
|
20140
|
-
const previousHighlightedIndexRef =
|
|
20090
|
+
const listRef = React80.useRef(null);
|
|
20091
|
+
const lastLoadMoreOptionsLengthRef = React80.useRef(null);
|
|
20092
|
+
const previousHighlightedIndexRef = React80.useRef(highlightedIndex);
|
|
20141
20093
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
20142
20094
|
const virtualizer = (0, import_react_virtual3.useVirtualizer)({
|
|
20143
20095
|
count: rowCount,
|
|
@@ -20148,7 +20100,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20148
20100
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20149
20101
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20150
20102
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20151
|
-
|
|
20103
|
+
React80.useEffect(() => {
|
|
20152
20104
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20153
20105
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20154
20106
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20156,23 +20108,23 @@ function AirbnbSearchableSelectContent({
|
|
|
20156
20108
|
onLoadMore?.();
|
|
20157
20109
|
}
|
|
20158
20110
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20159
|
-
|
|
20111
|
+
React80.useEffect(() => {
|
|
20160
20112
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20161
20113
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20162
20114
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
20163
20115
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
20164
20116
|
}
|
|
20165
20117
|
}, [highlightedIndex, virtualizer]);
|
|
20166
|
-
return /* @__PURE__ */ (0,
|
|
20167
|
-
/* @__PURE__ */ (0,
|
|
20168
|
-
/* @__PURE__ */ (0,
|
|
20118
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "p-2", children: [
|
|
20119
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "relative mb-2", children: [
|
|
20120
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20169
20121
|
import_lucide_react57.Search,
|
|
20170
20122
|
{
|
|
20171
20123
|
"aria-hidden": "true",
|
|
20172
20124
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
20173
20125
|
}
|
|
20174
20126
|
),
|
|
20175
|
-
/* @__PURE__ */ (0,
|
|
20127
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20176
20128
|
"input",
|
|
20177
20129
|
{
|
|
20178
20130
|
id: inputId,
|
|
@@ -20191,7 +20143,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20191
20143
|
}
|
|
20192
20144
|
)
|
|
20193
20145
|
] }),
|
|
20194
|
-
loading && options.length === 0 ? /* @__PURE__ */ (0,
|
|
20146
|
+
loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20195
20147
|
"div",
|
|
20196
20148
|
{
|
|
20197
20149
|
id: listboxId,
|
|
@@ -20200,7 +20152,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20200
20152
|
"aria-labelledby": labelId,
|
|
20201
20153
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
20202
20154
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
20203
|
-
children: /* @__PURE__ */ (0,
|
|
20155
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20204
20156
|
"div",
|
|
20205
20157
|
{
|
|
20206
20158
|
className: "relative w-full",
|
|
@@ -20208,7 +20160,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20208
20160
|
children: virtualItems.map((virtualItem) => {
|
|
20209
20161
|
const option = options[virtualItem.index];
|
|
20210
20162
|
if (!option) {
|
|
20211
|
-
return /* @__PURE__ */ (0,
|
|
20163
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20212
20164
|
"div",
|
|
20213
20165
|
{
|
|
20214
20166
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -20223,7 +20175,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20223
20175
|
}
|
|
20224
20176
|
const isSelected = value?.value === option.value;
|
|
20225
20177
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
20226
|
-
return /* @__PURE__ */ (0,
|
|
20178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20227
20179
|
"button",
|
|
20228
20180
|
{
|
|
20229
20181
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -20245,7 +20197,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20245
20197
|
height: `${virtualItem.size}px`,
|
|
20246
20198
|
transform: `translateY(${virtualItem.start}px)`
|
|
20247
20199
|
},
|
|
20248
|
-
children: /* @__PURE__ */ (0,
|
|
20200
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("span", { className: "truncate text-center", children: String(option.label) })
|
|
20249
20201
|
},
|
|
20250
20202
|
`${String(option.value)}-${virtualItem.index}`
|
|
20251
20203
|
);
|
|
@@ -20274,16 +20226,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20274
20226
|
}
|
|
20275
20227
|
|
|
20276
20228
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20277
|
-
var
|
|
20229
|
+
var React81 = __toESM(require("react"), 1);
|
|
20278
20230
|
var import_react_i18next45 = require("react-i18next");
|
|
20279
20231
|
var import_lucide_react58 = require("lucide-react");
|
|
20280
|
-
var
|
|
20281
|
-
var AirbnbSearchInput =
|
|
20232
|
+
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
20233
|
+
var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20282
20234
|
const { t } = (0, import_react_i18next45.useTranslation)();
|
|
20283
20235
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20284
|
-
return /* @__PURE__ */ (0,
|
|
20285
|
-
/* @__PURE__ */ (0,
|
|
20286
|
-
/* @__PURE__ */ (0,
|
|
20236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
20237
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_lucide_react58.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
|
|
20238
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20287
20239
|
"input",
|
|
20288
20240
|
{
|
|
20289
20241
|
...props,
|
|
@@ -20302,13 +20254,13 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20302
20254
|
)
|
|
20303
20255
|
}
|
|
20304
20256
|
),
|
|
20305
|
-
onReset && /* @__PURE__ */ (0,
|
|
20257
|
+
onReset && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20306
20258
|
Button,
|
|
20307
20259
|
{
|
|
20308
20260
|
variant: "ghost",
|
|
20309
20261
|
onClick: onReset,
|
|
20310
20262
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
20311
|
-
children: /* @__PURE__ */ (0,
|
|
20263
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_lucide_react58.X, { className: "h-5 w-5" })
|
|
20312
20264
|
}
|
|
20313
20265
|
)
|
|
20314
20266
|
] });
|
|
@@ -20316,11 +20268,11 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20316
20268
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20317
20269
|
|
|
20318
20270
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20319
|
-
var
|
|
20271
|
+
var React82 = __toESM(require("react"), 1);
|
|
20320
20272
|
var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
|
|
20321
20273
|
var import_lucide_react59 = require("lucide-react");
|
|
20322
|
-
var
|
|
20323
|
-
var AirbnbSwitch =
|
|
20274
|
+
var import_jsx_runtime195 = require("react/jsx-runtime");
|
|
20275
|
+
var AirbnbSwitch = React82.forwardRef(
|
|
20324
20276
|
({
|
|
20325
20277
|
className,
|
|
20326
20278
|
value,
|
|
@@ -20334,9 +20286,9 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20334
20286
|
wrapperClassName,
|
|
20335
20287
|
...props
|
|
20336
20288
|
}, ref) => {
|
|
20337
|
-
const generatedId =
|
|
20289
|
+
const generatedId = React82.useId();
|
|
20338
20290
|
const fieldId = id || generatedId;
|
|
20339
|
-
const switchElement = /* @__PURE__ */ (0,
|
|
20291
|
+
const switchElement = /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20340
20292
|
SwitchPrimitives2.Root,
|
|
20341
20293
|
{
|
|
20342
20294
|
ref,
|
|
@@ -20356,14 +20308,14 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20356
20308
|
"aria-busy": loading,
|
|
20357
20309
|
"aria-readonly": readOnly,
|
|
20358
20310
|
...props,
|
|
20359
|
-
children: /* @__PURE__ */ (0,
|
|
20311
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20360
20312
|
SwitchPrimitives2.Thumb,
|
|
20361
20313
|
{
|
|
20362
20314
|
className: cn(
|
|
20363
20315
|
"flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.22)] transition-transform duration-200",
|
|
20364
20316
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
20365
20317
|
),
|
|
20366
|
-
children: /* @__PURE__ */ (0,
|
|
20318
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20367
20319
|
import_lucide_react59.Check,
|
|
20368
20320
|
{
|
|
20369
20321
|
"aria-hidden": "true",
|
|
@@ -20378,10 +20330,10 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20378
20330
|
if (!label && !error) {
|
|
20379
20331
|
return switchElement;
|
|
20380
20332
|
}
|
|
20381
|
-
return /* @__PURE__ */ (0,
|
|
20382
|
-
/* @__PURE__ */ (0,
|
|
20333
|
+
return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(import_jsx_runtime195.Fragment, { children: [
|
|
20334
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
|
|
20383
20335
|
switchElement,
|
|
20384
|
-
label && /* @__PURE__ */ (0,
|
|
20336
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20385
20337
|
Label,
|
|
20386
20338
|
{
|
|
20387
20339
|
htmlFor: fieldId,
|
|
@@ -20393,7 +20345,7 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20393
20345
|
}
|
|
20394
20346
|
)
|
|
20395
20347
|
] }),
|
|
20396
|
-
error && /* @__PURE__ */ (0,
|
|
20348
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(ErrorMessage, { disabled, children: error })
|
|
20397
20349
|
] });
|
|
20398
20350
|
}
|
|
20399
20351
|
);
|
|
@@ -20602,7 +20554,6 @@ AirbnbSwitch.displayName = "AirbnbSwitch";
|
|
|
20602
20554
|
ScrollBar,
|
|
20603
20555
|
SearchButton,
|
|
20604
20556
|
SearchInput,
|
|
20605
|
-
SearchingSelect,
|
|
20606
20557
|
Section,
|
|
20607
20558
|
SectionGroup,
|
|
20608
20559
|
SectionTag,
|