@chekinapp/ui 0.0.121 → 0.0.123
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 +936 -958
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -26
- package/dist/index.d.ts +4 -26
- package/dist/index.js +787 -808
- 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);
|
|
@@ -13581,7 +13577,10 @@ function useSelectState(params) {
|
|
|
13581
13577
|
() => resolveValueLabel(singleSelected, getValueLabel),
|
|
13582
13578
|
[singleSelected, getValueLabel]
|
|
13583
13579
|
);
|
|
13584
|
-
const
|
|
13580
|
+
const isSearchOnlyInput = isMulti || Boolean(isSearchInDropdown);
|
|
13581
|
+
const [inputValue, setInputValue] = React48.useState(
|
|
13582
|
+
isSearchOnlyInput ? "" : valueLabel
|
|
13583
|
+
);
|
|
13585
13584
|
const hasValue = selectedOptions.length > 0;
|
|
13586
13585
|
const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
|
|
13587
13586
|
const hasInvalidState = Boolean(error);
|
|
@@ -13596,18 +13595,18 @@ function useSelectState(params) {
|
|
|
13596
13595
|
const ids = useSelectIds({ name, hasValue, error, hideErrorMessage });
|
|
13597
13596
|
const { listboxId, getOptionId: getOptionId2 } = ids;
|
|
13598
13597
|
React48.useEffect(() => {
|
|
13599
|
-
if (
|
|
13598
|
+
if (isSearchOnlyInput) return;
|
|
13600
13599
|
if (!isFocused) setInputValue(valueLabel);
|
|
13601
|
-
}, [valueLabel, isFocused,
|
|
13600
|
+
}, [valueLabel, isFocused, isSearchOnlyInput]);
|
|
13602
13601
|
React48.useEffect(() => {
|
|
13603
|
-
if (!
|
|
13602
|
+
if (!isSearchOnlyInput) return;
|
|
13604
13603
|
if (!isOpen) {
|
|
13605
13604
|
setInputValue("");
|
|
13606
13605
|
setHighlightedIndex(-1);
|
|
13607
13606
|
}
|
|
13608
|
-
}, [isOpen,
|
|
13607
|
+
}, [isOpen, isSearchOnlyInput]);
|
|
13609
13608
|
const trimmedInput = inputValue.trim();
|
|
13610
|
-
const isFiltering =
|
|
13609
|
+
const isFiltering = isSearchOnlyInput ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase();
|
|
13611
13610
|
const filteredOptions = React48.useMemo(() => {
|
|
13612
13611
|
if (!isFiltering) return options;
|
|
13613
13612
|
return options.filter((option) => filterOption(option, trimmedInput));
|
|
@@ -13668,7 +13667,7 @@ function useSelectState(params) {
|
|
|
13668
13667
|
return;
|
|
13669
13668
|
}
|
|
13670
13669
|
onSelectionChange([option], { action: "select" });
|
|
13671
|
-
setInputValue(resolveValueLabel(option, getValueLabel));
|
|
13670
|
+
setInputValue(isSearchInDropdown ? "" : resolveValueLabel(option, getValueLabel));
|
|
13672
13671
|
setIsOpen(false);
|
|
13673
13672
|
setIsFocused(false);
|
|
13674
13673
|
inputRef.current?.blur();
|
|
@@ -13681,7 +13680,8 @@ function useSelectState(params) {
|
|
|
13681
13680
|
onSelectionChange,
|
|
13682
13681
|
closeMenuOnSelect,
|
|
13683
13682
|
setIsOpen,
|
|
13684
|
-
getValueLabel
|
|
13683
|
+
getValueLabel,
|
|
13684
|
+
isSearchInDropdown
|
|
13685
13685
|
]
|
|
13686
13686
|
);
|
|
13687
13687
|
const removeOption = React48.useCallback(
|
|
@@ -13716,7 +13716,7 @@ function useSelectState(params) {
|
|
|
13716
13716
|
return;
|
|
13717
13717
|
}
|
|
13718
13718
|
onSelectionChange([newOption], { action: "create" });
|
|
13719
|
-
setInputValue(resolveValueLabel(newOption, getValueLabel));
|
|
13719
|
+
setInputValue(isSearchInDropdown ? "" : resolveValueLabel(newOption, getValueLabel));
|
|
13720
13720
|
setIsOpen(false);
|
|
13721
13721
|
setIsFocused(false);
|
|
13722
13722
|
inputRef.current?.blur();
|
|
@@ -13729,7 +13729,8 @@ function useSelectState(params) {
|
|
|
13729
13729
|
selectedOptions,
|
|
13730
13730
|
closeMenuOnSelect,
|
|
13731
13731
|
setIsOpen,
|
|
13732
|
-
getValueLabel
|
|
13732
|
+
getValueLabel,
|
|
13733
|
+
isSearchInDropdown
|
|
13733
13734
|
]);
|
|
13734
13735
|
const handleInputChange = React48.useCallback(
|
|
13735
13736
|
(event) => {
|
|
@@ -13755,10 +13756,10 @@ function useSelectState(params) {
|
|
|
13755
13756
|
(event) => {
|
|
13756
13757
|
if (containerRef.current?.contains(event.relatedTarget)) return;
|
|
13757
13758
|
setIsFocused(false);
|
|
13758
|
-
if (!
|
|
13759
|
+
if (!isSearchOnlyInput) setInputValue(valueLabel);
|
|
13759
13760
|
onBlur?.(event);
|
|
13760
13761
|
},
|
|
13761
|
-
[containerRef,
|
|
13762
|
+
[containerRef, isSearchOnlyInput, valueLabel, onBlur]
|
|
13762
13763
|
);
|
|
13763
13764
|
const handleInputKeyDown = React48.useCallback(
|
|
13764
13765
|
(event) => {
|
|
@@ -13812,7 +13813,7 @@ function useSelectState(params) {
|
|
|
13812
13813
|
}
|
|
13813
13814
|
if (event.key === "Escape") {
|
|
13814
13815
|
event.preventDefault();
|
|
13815
|
-
if (!
|
|
13816
|
+
if (!isSearchOnlyInput) setInputValue(valueLabel);
|
|
13816
13817
|
setIsOpen(false);
|
|
13817
13818
|
inputRef.current?.blur();
|
|
13818
13819
|
}
|
|
@@ -13820,6 +13821,7 @@ function useSelectState(params) {
|
|
|
13820
13821
|
[
|
|
13821
13822
|
onKeyDown,
|
|
13822
13823
|
isMulti,
|
|
13824
|
+
isSearchOnlyInput,
|
|
13823
13825
|
inputValue,
|
|
13824
13826
|
selectedOptions,
|
|
13825
13827
|
onSelectionChange,
|
|
@@ -14157,6 +14159,21 @@ function mergeComponents(overrides) {
|
|
|
14157
14159
|
};
|
|
14158
14160
|
}
|
|
14159
14161
|
|
|
14162
|
+
// src/dashboard/select/useSetCorrectOptionIfThereIsOnlyValue.ts
|
|
14163
|
+
var import_react89 = require("react");
|
|
14164
|
+
function useSetCorrectOptionIfThereIsOnlyValue({ value, options, onChange, enabled = true }) {
|
|
14165
|
+
(0, import_react89.useEffect)(() => {
|
|
14166
|
+
if (!enabled || !value || !onChange || !options?.length) return;
|
|
14167
|
+
if (value.value === void 0 || value.value === null) return;
|
|
14168
|
+
if (value.label !== "NONE" && value.label !== "") return;
|
|
14169
|
+
const validOption = flattenGroupedOptions(options).find(
|
|
14170
|
+
(option) => option.value === value.value
|
|
14171
|
+
);
|
|
14172
|
+
if (!validOption) return;
|
|
14173
|
+
onChange({ ...validOption, isPrefilled: true }, { action: "select" });
|
|
14174
|
+
}, [enabled, onChange, options, value]);
|
|
14175
|
+
}
|
|
14176
|
+
|
|
14160
14177
|
// src/dashboard/select/Select.tsx
|
|
14161
14178
|
var import_jsx_runtime158 = require("react/jsx-runtime");
|
|
14162
14179
|
function SelectInternal(props, ref) {
|
|
@@ -14217,6 +14234,12 @@ function SelectInternal(props, ref) {
|
|
|
14217
14234
|
return props.defaultValue ?? null;
|
|
14218
14235
|
});
|
|
14219
14236
|
const currentValue = isControlled ? props.value : internalValue;
|
|
14237
|
+
useSetCorrectOptionIfThereIsOnlyValue({
|
|
14238
|
+
enabled: !isMulti,
|
|
14239
|
+
value: !isMulti ? props.value : void 0,
|
|
14240
|
+
options,
|
|
14241
|
+
onChange: !isMulti ? props.onChange : void 0
|
|
14242
|
+
});
|
|
14220
14243
|
const selectedOptions = React49.useMemo(() => {
|
|
14221
14244
|
if (isMulti) return currentValue ?? [];
|
|
14222
14245
|
return currentValue ? [currentValue] : [];
|
|
@@ -14433,21 +14456,254 @@ function SelectInternal(props, ref) {
|
|
|
14433
14456
|
}
|
|
14434
14457
|
var Select = React49.forwardRef(SelectInternal);
|
|
14435
14458
|
|
|
14436
|
-
// src/dashboard/
|
|
14459
|
+
// src/dashboard/phone-input/utils.ts
|
|
14460
|
+
var PREFIX_REGEX = /^\+/;
|
|
14461
|
+
function clearPhoneNumber(value) {
|
|
14462
|
+
return value.replace(/[^0-9]/g, "");
|
|
14463
|
+
}
|
|
14464
|
+
function findPhoneCode(value, codeSet) {
|
|
14465
|
+
const hasPrefix = PREFIX_REGEX.test(value);
|
|
14466
|
+
const maxLength = hasPrefix ? 4 : 3;
|
|
14467
|
+
const minLength = hasPrefix ? 2 : 1;
|
|
14468
|
+
for (let length = minLength; length <= maxLength; length += 1) {
|
|
14469
|
+
const candidate = value.slice(0, length);
|
|
14470
|
+
const normalized = hasPrefix ? candidate : `+${candidate}`;
|
|
14471
|
+
if (codeSet.has(normalized)) {
|
|
14472
|
+
return normalized;
|
|
14473
|
+
}
|
|
14474
|
+
}
|
|
14475
|
+
return void 0;
|
|
14476
|
+
}
|
|
14477
|
+
function parsePhoneValueWithOptions(options) {
|
|
14478
|
+
const codeSet = new Set(options.map((option) => option.value));
|
|
14479
|
+
return (value) => {
|
|
14480
|
+
if (!PREFIX_REGEX.test(value)) {
|
|
14481
|
+
return { code: "", number: value };
|
|
14482
|
+
}
|
|
14483
|
+
const code = findPhoneCode(value, codeSet);
|
|
14484
|
+
if (!code) {
|
|
14485
|
+
return { code: "", number: value };
|
|
14486
|
+
}
|
|
14487
|
+
return {
|
|
14488
|
+
code,
|
|
14489
|
+
number: value.slice(code.length)
|
|
14490
|
+
};
|
|
14491
|
+
};
|
|
14492
|
+
}
|
|
14493
|
+
function findPhoneCodeOption(options, code) {
|
|
14494
|
+
return options.find((option) => option.value === code);
|
|
14495
|
+
}
|
|
14496
|
+
function formatPhoneCodeOptionLabel(option) {
|
|
14497
|
+
const label = String(option.label);
|
|
14498
|
+
const value = String(option.value);
|
|
14499
|
+
return label.includes(value) ? label : `${label} ${value}`;
|
|
14500
|
+
}
|
|
14501
|
+
|
|
14502
|
+
// src/dashboard/phone-input/PhoneInput.tsx
|
|
14503
|
+
var import_jsx_runtime159 = require("react/jsx-runtime");
|
|
14504
|
+
var EMPTY_VALUE = { code: "", number: "" };
|
|
14505
|
+
var PhoneInput = React50.forwardRef(
|
|
14506
|
+
function PhoneInput2({
|
|
14507
|
+
options,
|
|
14508
|
+
value,
|
|
14509
|
+
onChange,
|
|
14510
|
+
onBlur,
|
|
14511
|
+
name,
|
|
14512
|
+
codeName,
|
|
14513
|
+
numberName,
|
|
14514
|
+
label,
|
|
14515
|
+
topLabel,
|
|
14516
|
+
prefixLabel,
|
|
14517
|
+
placeholder,
|
|
14518
|
+
codePlaceholder = "+00",
|
|
14519
|
+
disabled,
|
|
14520
|
+
loading,
|
|
14521
|
+
readOnly,
|
|
14522
|
+
codeReadOnly,
|
|
14523
|
+
optional,
|
|
14524
|
+
tooltip,
|
|
14525
|
+
error,
|
|
14526
|
+
invalid,
|
|
14527
|
+
className,
|
|
14528
|
+
autoDetectCode = true,
|
|
14529
|
+
searchable = true,
|
|
14530
|
+
defaultCode
|
|
14531
|
+
}, ref) {
|
|
14532
|
+
const { t } = (0, import_react_i18next34.useTranslation)();
|
|
14533
|
+
const safeValue = value ?? EMPTY_VALUE;
|
|
14534
|
+
const effectiveCode = safeValue.code || defaultCode || "";
|
|
14535
|
+
const resolvedLabel = label ?? "";
|
|
14536
|
+
const resolvedPrefixLabel = prefixLabel ?? t("prefix");
|
|
14537
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
14538
|
+
const isCodeBlocked = isBlocked || Boolean(readOnly) || Boolean(codeReadOnly);
|
|
14539
|
+
const hasExternalError = Boolean(error);
|
|
14540
|
+
const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !effectiveCode;
|
|
14541
|
+
const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
|
|
14542
|
+
const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
|
|
14543
|
+
const combinedValue = effectiveCode || safeValue.number ? `${effectiveCode}${safeValue.number}` : "";
|
|
14544
|
+
const codeOptions = React50.useMemo(
|
|
14545
|
+
() => options.map((option) => ({
|
|
14546
|
+
value: option.value,
|
|
14547
|
+
label: formatPhoneCodeOptionLabel(option),
|
|
14548
|
+
data: option.data,
|
|
14549
|
+
isDisabled: option.disabled
|
|
14550
|
+
})),
|
|
14551
|
+
[options]
|
|
14552
|
+
);
|
|
14553
|
+
const selectedCodeOption = React50.useMemo(
|
|
14554
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
14555
|
+
[codeOptions, effectiveCode]
|
|
14556
|
+
);
|
|
14557
|
+
const parsePhoneValue = React50.useMemo(
|
|
14558
|
+
() => parsePhoneValueWithOptions(options),
|
|
14559
|
+
[options]
|
|
14560
|
+
);
|
|
14561
|
+
const emitChange = (next) => {
|
|
14562
|
+
onChange?.(next, name);
|
|
14563
|
+
};
|
|
14564
|
+
const handleCodeChange = (option) => {
|
|
14565
|
+
if (!option) return;
|
|
14566
|
+
emitChange({ code: option.value, number: safeValue.number });
|
|
14567
|
+
};
|
|
14568
|
+
const handleNumberChange = (event) => {
|
|
14569
|
+
if (readOnly || disabled) return;
|
|
14570
|
+
const rawValue = event.target.value;
|
|
14571
|
+
if (!autoDetectCode) {
|
|
14572
|
+
emitChange({ code: effectiveCode, number: clearPhoneNumber(rawValue) });
|
|
14573
|
+
return;
|
|
14574
|
+
}
|
|
14575
|
+
const parsed = parsePhoneValue(rawValue);
|
|
14576
|
+
const cleanedNumber = clearPhoneNumber(parsed.number);
|
|
14577
|
+
if (parsed.code) {
|
|
14578
|
+
emitChange({ code: parsed.code, number: cleanedNumber });
|
|
14579
|
+
return;
|
|
14580
|
+
}
|
|
14581
|
+
emitChange({ code: effectiveCode, number: cleanedNumber });
|
|
14582
|
+
};
|
|
14583
|
+
return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
|
|
14584
|
+
"div",
|
|
14585
|
+
{
|
|
14586
|
+
className: cn(
|
|
14587
|
+
"relative w-full max-w-[var(--field-max-width,296px)]",
|
|
14588
|
+
disabled && "cursor-not-allowed opacity-50",
|
|
14589
|
+
loading && "cursor-progress",
|
|
14590
|
+
className
|
|
14591
|
+
),
|
|
14592
|
+
children: [
|
|
14593
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
14594
|
+
codeName && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14595
|
+
"input",
|
|
14596
|
+
{
|
|
14597
|
+
type: "hidden",
|
|
14598
|
+
name: codeName,
|
|
14599
|
+
value: effectiveCode,
|
|
14600
|
+
disabled
|
|
14601
|
+
}
|
|
14602
|
+
),
|
|
14603
|
+
numberName && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14604
|
+
"input",
|
|
14605
|
+
{
|
|
14606
|
+
type: "hidden",
|
|
14607
|
+
name: numberName,
|
|
14608
|
+
value: safeValue.number,
|
|
14609
|
+
disabled
|
|
14610
|
+
}
|
|
14611
|
+
),
|
|
14612
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("label", { className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: topLabel }),
|
|
14613
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2", children: [
|
|
14614
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14615
|
+
Select,
|
|
14616
|
+
{
|
|
14617
|
+
options: codeOptions,
|
|
14618
|
+
value: selectedCodeOption,
|
|
14619
|
+
onChange: handleCodeChange,
|
|
14620
|
+
label: resolvedPrefixLabel,
|
|
14621
|
+
placeholder: codePlaceholder,
|
|
14622
|
+
disabled: isCodeBlocked,
|
|
14623
|
+
loading,
|
|
14624
|
+
invalid: hasInvalidState,
|
|
14625
|
+
hideErrorMessage: true,
|
|
14626
|
+
searchPosition: searchable ? "dropdown" : "trigger",
|
|
14627
|
+
getValueLabel: (option) => option.value,
|
|
14628
|
+
className: "!max-w-none",
|
|
14629
|
+
dropdownClassName: "right-auto w-[280px]"
|
|
14630
|
+
}
|
|
14631
|
+
),
|
|
14632
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14633
|
+
Input,
|
|
14634
|
+
{
|
|
14635
|
+
ref,
|
|
14636
|
+
type: "tel",
|
|
14637
|
+
inputMode: "tel",
|
|
14638
|
+
autoComplete: "tel-national",
|
|
14639
|
+
label: resolvedLabel,
|
|
14640
|
+
value: safeValue.number,
|
|
14641
|
+
placeholder,
|
|
14642
|
+
disabled,
|
|
14643
|
+
readOnly,
|
|
14644
|
+
loading,
|
|
14645
|
+
invalid: hasInvalidState,
|
|
14646
|
+
tooltip,
|
|
14647
|
+
"aria-label": resolvedLabel || name,
|
|
14648
|
+
onChange: handleNumberChange,
|
|
14649
|
+
onBlur,
|
|
14650
|
+
renderErrorMessage: false,
|
|
14651
|
+
wrapperClassName: "!max-w-none"
|
|
14652
|
+
}
|
|
14653
|
+
)
|
|
14654
|
+
] }),
|
|
14655
|
+
!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") }),
|
|
14656
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14657
|
+
FieldErrorMessage,
|
|
14658
|
+
{
|
|
14659
|
+
message: errorMessage,
|
|
14660
|
+
"data-testid": name ? `${name}-error` : void 0,
|
|
14661
|
+
className: "mt-[1px] text-[14px]"
|
|
14662
|
+
}
|
|
14663
|
+
)
|
|
14664
|
+
]
|
|
14665
|
+
}
|
|
14666
|
+
);
|
|
14667
|
+
}
|
|
14668
|
+
);
|
|
14669
|
+
PhoneInput.displayName = "PhoneInput";
|
|
14670
|
+
|
|
14671
|
+
// src/dashboard/creatable-select/CreatableSelect.tsx
|
|
14672
|
+
var React51 = __toESM(require("react"), 1);
|
|
14673
|
+
var import_jsx_runtime160 = require("react/jsx-runtime");
|
|
14674
|
+
var CreatableSelect = React51.forwardRef(function CreatableSelect2(props, ref) {
|
|
14675
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Select, { ref, ...props, isCreatable: true });
|
|
14676
|
+
});
|
|
14677
|
+
|
|
14678
|
+
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14437
14679
|
var React52 = __toESM(require("react"), 1);
|
|
14680
|
+
var import_jsx_runtime161 = require("react/jsx-runtime");
|
|
14681
|
+
var MultiSelect = React52.forwardRef(function MultiSelect2(props, ref) {
|
|
14682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Select, { ref, ...props, isMulti: true });
|
|
14683
|
+
});
|
|
14684
|
+
|
|
14685
|
+
// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
|
|
14686
|
+
var React53 = __toESM(require("react"), 1);
|
|
14687
|
+
var import_jsx_runtime162 = require("react/jsx-runtime");
|
|
14688
|
+
var CreatableMultiSelect = React53.forwardRef(function CreatableMultiSelect2(props, ref) {
|
|
14689
|
+
return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
14690
|
+
});
|
|
14691
|
+
|
|
14692
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14693
|
+
var React56 = __toESM(require("react"), 1);
|
|
14438
14694
|
|
|
14439
14695
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14440
|
-
var
|
|
14441
|
-
var
|
|
14696
|
+
var React55 = __toESM(require("react"), 1);
|
|
14697
|
+
var import_react_i18next35 = require("react-i18next");
|
|
14442
14698
|
var import_react_virtual2 = require("@tanstack/react-virtual");
|
|
14443
14699
|
|
|
14444
14700
|
// src/dashboard/infinite-scroll-select/InfiniteScrollContext.tsx
|
|
14445
|
-
var
|
|
14446
|
-
var InfiniteScrollContext =
|
|
14701
|
+
var React54 = __toESM(require("react"), 1);
|
|
14702
|
+
var InfiniteScrollContext = React54.createContext(
|
|
14447
14703
|
null
|
|
14448
14704
|
);
|
|
14449
14705
|
function useInfiniteScrollContext() {
|
|
14450
|
-
const ctx =
|
|
14706
|
+
const ctx = React54.useContext(InfiniteScrollContext);
|
|
14451
14707
|
if (!ctx) {
|
|
14452
14708
|
throw new Error(
|
|
14453
14709
|
"useInfiniteScrollContext must be used within an InfiniteScrollContext.Provider"
|
|
@@ -14457,7 +14713,7 @@ function useInfiniteScrollContext() {
|
|
|
14457
14713
|
}
|
|
14458
14714
|
|
|
14459
14715
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14460
|
-
var
|
|
14716
|
+
var import_jsx_runtime163 = require("react/jsx-runtime");
|
|
14461
14717
|
function VirtualMenuList(props) {
|
|
14462
14718
|
const {
|
|
14463
14719
|
id,
|
|
@@ -14491,10 +14747,10 @@ function VirtualMenuList(props) {
|
|
|
14491
14747
|
loadMoreThreshold
|
|
14492
14748
|
} = useInfiniteScrollContext();
|
|
14493
14749
|
const Option = components?.Option ?? DefaultOption;
|
|
14494
|
-
const { t } = (0,
|
|
14495
|
-
const scrollRef =
|
|
14496
|
-
const lastLoadMoreOptionsLengthRef =
|
|
14497
|
-
const previousHighlightedIndexRef =
|
|
14750
|
+
const { t } = (0, import_react_i18next35.useTranslation)();
|
|
14751
|
+
const scrollRef = React55.useRef(null);
|
|
14752
|
+
const lastLoadMoreOptionsLengthRef = React55.useRef(null);
|
|
14753
|
+
const previousHighlightedIndexRef = React55.useRef(-1);
|
|
14498
14754
|
const showLoaderRow = Boolean(canLoadMore || isLoadingMore);
|
|
14499
14755
|
const itemCount = options.length + (showLoaderRow ? 1 : 0);
|
|
14500
14756
|
const virtualizer = (0, import_react_virtual2.useVirtualizer)({
|
|
@@ -14507,7 +14763,7 @@ function VirtualMenuList(props) {
|
|
|
14507
14763
|
const totalSize = virtualizer.getTotalSize();
|
|
14508
14764
|
const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
|
|
14509
14765
|
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14510
|
-
|
|
14766
|
+
React55.useEffect(() => {
|
|
14511
14767
|
if (!canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14512
14768
|
if (virtualItems.length === 0) return;
|
|
14513
14769
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
@@ -14523,7 +14779,7 @@ function VirtualMenuList(props) {
|
|
|
14523
14779
|
loadMoreItems,
|
|
14524
14780
|
loadMoreThreshold
|
|
14525
14781
|
]);
|
|
14526
|
-
|
|
14782
|
+
React55.useEffect(() => {
|
|
14527
14783
|
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14528
14784
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14529
14785
|
if (highlightedIndex < 0 || !changed) return;
|
|
@@ -14533,8 +14789,8 @@ function VirtualMenuList(props) {
|
|
|
14533
14789
|
const lastOptionIndex = options.length - 1;
|
|
14534
14790
|
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14535
14791
|
const isOptionSelected2 = (option) => isOptionSelectedProp ? isOptionSelectedProp(option, selectedOptions) : selectedOptions.some((s) => s.value === option.value);
|
|
14536
|
-
const wasAtBottomRef =
|
|
14537
|
-
const handleScroll =
|
|
14792
|
+
const wasAtBottomRef = React55.useRef(false);
|
|
14793
|
+
const handleScroll = React55.useCallback(
|
|
14538
14794
|
(event) => {
|
|
14539
14795
|
if (!onMenuScrollToBottom) return;
|
|
14540
14796
|
const target = event.currentTarget;
|
|
@@ -14547,7 +14803,7 @@ function VirtualMenuList(props) {
|
|
|
14547
14803
|
[onMenuScrollToBottom]
|
|
14548
14804
|
);
|
|
14549
14805
|
if (options.length === 0) {
|
|
14550
|
-
return /* @__PURE__ */ (0,
|
|
14806
|
+
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
14807
|
"div",
|
|
14552
14808
|
{
|
|
14553
14809
|
role: "status",
|
|
@@ -14555,8 +14811,8 @@ function VirtualMenuList(props) {
|
|
|
14555
14811
|
"aria-live": "polite",
|
|
14556
14812
|
className: "flex flex-col gap-2",
|
|
14557
14813
|
children: [
|
|
14558
|
-
/* @__PURE__ */ (0,
|
|
14559
|
-
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0,
|
|
14814
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14815
|
+
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14560
14816
|
Skeleton,
|
|
14561
14817
|
{
|
|
14562
14818
|
className: "h-10 w-full rounded-md",
|
|
@@ -14566,16 +14822,16 @@ function VirtualMenuList(props) {
|
|
|
14566
14822
|
))
|
|
14567
14823
|
]
|
|
14568
14824
|
}
|
|
14569
|
-
) : /* @__PURE__ */ (0,
|
|
14825
|
+
) : /* @__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
14826
|
}
|
|
14571
|
-
return /* @__PURE__ */ (0,
|
|
14827
|
+
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
14828
|
"div",
|
|
14573
14829
|
{
|
|
14574
14830
|
ref: scrollRef,
|
|
14575
14831
|
className: cn("overflow-y-auto", menuClassName),
|
|
14576
14832
|
style: { height: `${measuredListHeight}px` },
|
|
14577
14833
|
onScroll: onMenuScrollToBottom ? handleScroll : void 0,
|
|
14578
|
-
children: /* @__PURE__ */ (0,
|
|
14834
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14579
14835
|
"div",
|
|
14580
14836
|
{
|
|
14581
14837
|
id,
|
|
@@ -14595,7 +14851,7 @@ function VirtualMenuList(props) {
|
|
|
14595
14851
|
disabled || option?.isDisabled || option && isOptionDisabled?.(option)
|
|
14596
14852
|
);
|
|
14597
14853
|
const isLastOption = !isLoaderRow && virtualItem.index === lastOptionIndex && !canLoadMore;
|
|
14598
|
-
return /* @__PURE__ */ (0,
|
|
14854
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14599
14855
|
"div",
|
|
14600
14856
|
{
|
|
14601
14857
|
"data-index": virtualItem.index,
|
|
@@ -14604,7 +14860,7 @@ function VirtualMenuList(props) {
|
|
|
14604
14860
|
height: `${virtualItem.size}px`,
|
|
14605
14861
|
transform: `translateY(${virtualItem.start}px)`
|
|
14606
14862
|
},
|
|
14607
|
-
children: isLoaderRow ? /* @__PURE__ */ (0,
|
|
14863
|
+
children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
|
|
14608
14864
|
"div",
|
|
14609
14865
|
{
|
|
14610
14866
|
role: "status",
|
|
@@ -14612,8 +14868,8 @@ function VirtualMenuList(props) {
|
|
|
14612
14868
|
"aria-live": "polite",
|
|
14613
14869
|
className: "flex h-full items-center justify-center",
|
|
14614
14870
|
children: [
|
|
14615
|
-
/* @__PURE__ */ (0,
|
|
14616
|
-
/* @__PURE__ */ (0,
|
|
14871
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14872
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14617
14873
|
ThreeDotsLoader,
|
|
14618
14874
|
{
|
|
14619
14875
|
height: 24,
|
|
@@ -14623,7 +14879,7 @@ function VirtualMenuList(props) {
|
|
|
14623
14879
|
)
|
|
14624
14880
|
]
|
|
14625
14881
|
}
|
|
14626
|
-
) : option ? /* @__PURE__ */ (0,
|
|
14882
|
+
) : option ? /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14627
14883
|
Option,
|
|
14628
14884
|
{
|
|
14629
14885
|
id: getOptionId2(virtualItem.index),
|
|
@@ -14638,423 +14894,144 @@ function VirtualMenuList(props) {
|
|
|
14638
14894
|
onHover: onOptionHover,
|
|
14639
14895
|
innerRef: () => void 0,
|
|
14640
14896
|
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
|
-
});
|
|
14897
|
+
selectedOptions,
|
|
14898
|
+
formatOptionLabel
|
|
14899
|
+
}
|
|
14900
|
+
) : null
|
|
14901
|
+
},
|
|
14902
|
+
virtualItem.key
|
|
14903
|
+
);
|
|
14904
|
+
})
|
|
14905
|
+
}
|
|
14906
|
+
)
|
|
14907
|
+
}
|
|
14908
|
+
) });
|
|
14909
|
+
}
|
|
15029
14910
|
|
|
15030
|
-
// src/dashboard/
|
|
15031
|
-
var React56 = __toESM(require("react"), 1);
|
|
14911
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
15032
14912
|
var import_jsx_runtime164 = require("react/jsx-runtime");
|
|
15033
|
-
var
|
|
15034
|
-
|
|
15035
|
-
|
|
14913
|
+
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14914
|
+
var DEFAULT_LIST_HEIGHT = 322;
|
|
14915
|
+
var DEFAULT_OVERSCAN = 5;
|
|
14916
|
+
var DEFAULT_LOAD_MORE_THRESHOLD = 5;
|
|
14917
|
+
var passthroughFilter = () => true;
|
|
14918
|
+
function InfiniteScrollSelectInternal(props, ref) {
|
|
14919
|
+
const {
|
|
14920
|
+
options: rawOptions = [],
|
|
14921
|
+
canLoadMore,
|
|
14922
|
+
isLoadingMore,
|
|
14923
|
+
loadMoreItems,
|
|
14924
|
+
loadingMoreText,
|
|
14925
|
+
onSearchChange,
|
|
14926
|
+
itemHeight = DEFAULT_ITEM_HEIGHT,
|
|
14927
|
+
listHeight = DEFAULT_LIST_HEIGHT,
|
|
14928
|
+
overscan = DEFAULT_OVERSCAN,
|
|
14929
|
+
loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD,
|
|
14930
|
+
getFullSearchOption,
|
|
14931
|
+
filterOption: userFilterOption,
|
|
14932
|
+
components: userComponents,
|
|
14933
|
+
onInputChange: userOnInputChange,
|
|
14934
|
+
isMulti = false,
|
|
14935
|
+
...rest
|
|
14936
|
+
} = props;
|
|
14937
|
+
const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
|
|
14938
|
+
const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
|
|
14939
|
+
const [inputValue, setInputValue] = React56.useState("");
|
|
14940
|
+
const filteredOptions = React56.useMemo(() => {
|
|
14941
|
+
const trimmed = inputValue.trim();
|
|
14942
|
+
const valueLabel = (() => {
|
|
14943
|
+
if (isMulti) return "";
|
|
14944
|
+
const single = rest.value;
|
|
14945
|
+
if (!single) return "";
|
|
14946
|
+
return rest.getValueLabel?.(single) ?? String(single.label);
|
|
14947
|
+
})();
|
|
14948
|
+
const isFiltering = trimmed.length > 0 && trimmed.toLowerCase() !== valueLabel.toLowerCase();
|
|
14949
|
+
let list = rawOptions;
|
|
14950
|
+
if (isFiltering) {
|
|
14951
|
+
list = list.filter((option) => filterOption(option, trimmed));
|
|
14952
|
+
}
|
|
14953
|
+
if (getFullSearchOption && trimmed) {
|
|
14954
|
+
const synthetic = getFullSearchOption(trimmed);
|
|
14955
|
+
if (synthetic) list = [synthetic, ...list];
|
|
14956
|
+
}
|
|
14957
|
+
return list;
|
|
14958
|
+
}, [rawOptions, inputValue, filterOption, getFullSearchOption, isMulti, rest]);
|
|
14959
|
+
const contextValue = React56.useMemo(
|
|
14960
|
+
() => ({
|
|
14961
|
+
canLoadMore,
|
|
14962
|
+
isLoadingMore,
|
|
14963
|
+
loadMoreItems,
|
|
14964
|
+
loadingMoreText,
|
|
14965
|
+
itemHeight,
|
|
14966
|
+
listHeight,
|
|
14967
|
+
overscan,
|
|
14968
|
+
loadMoreThreshold
|
|
14969
|
+
}),
|
|
14970
|
+
[
|
|
14971
|
+
canLoadMore,
|
|
14972
|
+
isLoadingMore,
|
|
14973
|
+
loadMoreItems,
|
|
14974
|
+
loadingMoreText,
|
|
14975
|
+
itemHeight,
|
|
14976
|
+
listHeight,
|
|
14977
|
+
overscan,
|
|
14978
|
+
loadMoreThreshold
|
|
14979
|
+
]
|
|
14980
|
+
);
|
|
14981
|
+
const components = React56.useMemo(
|
|
14982
|
+
() => ({ ...userComponents, MenuList: VirtualMenuList }),
|
|
14983
|
+
[userComponents]
|
|
14984
|
+
);
|
|
14985
|
+
const handleInputChange = React56.useCallback(
|
|
14986
|
+
(value) => {
|
|
14987
|
+
setInputValue(value);
|
|
14988
|
+
onSearchChange?.(value);
|
|
14989
|
+
userOnInputChange?.(value);
|
|
14990
|
+
},
|
|
14991
|
+
[onSearchChange, userOnInputChange]
|
|
14992
|
+
);
|
|
14993
|
+
const selectExtras = {
|
|
14994
|
+
options: filteredOptions,
|
|
14995
|
+
filterOption: passthroughFilter,
|
|
14996
|
+
components,
|
|
14997
|
+
onInputChange: handleInputChange
|
|
14998
|
+
};
|
|
14999
|
+
return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(InfiniteScrollContext.Provider, { value: contextValue, children: isMulti ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15000
|
+
Select,
|
|
15001
|
+
{
|
|
15002
|
+
ref,
|
|
15003
|
+
...rest,
|
|
15004
|
+
...selectExtras,
|
|
15005
|
+
isMulti: true
|
|
15006
|
+
}
|
|
15007
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15008
|
+
Select,
|
|
15009
|
+
{
|
|
15010
|
+
ref,
|
|
15011
|
+
...rest,
|
|
15012
|
+
...selectExtras,
|
|
15013
|
+
isMulti: false
|
|
15014
|
+
}
|
|
15015
|
+
) });
|
|
15016
|
+
}
|
|
15017
|
+
var InfiniteScrollSelect = React56.forwardRef(
|
|
15018
|
+
InfiniteScrollSelectInternal
|
|
15019
|
+
);
|
|
15036
15020
|
|
|
15037
|
-
// src/dashboard/
|
|
15021
|
+
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
15038
15022
|
var React57 = __toESM(require("react"), 1);
|
|
15039
15023
|
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) {
|
|
15024
|
+
var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
15048
15025
|
const Forwarded = InfiniteScrollSelect;
|
|
15049
|
-
return /* @__PURE__ */ (0,
|
|
15026
|
+
return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(Forwarded, { ...props, ref, isMulti: true });
|
|
15050
15027
|
});
|
|
15051
15028
|
|
|
15052
15029
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15053
|
-
var
|
|
15030
|
+
var React58 = __toESM(require("react"), 1);
|
|
15054
15031
|
var import_react_i18next37 = require("react-i18next");
|
|
15055
15032
|
|
|
15056
15033
|
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
15057
|
-
var
|
|
15034
|
+
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
15058
15035
|
function SelectCheckboxOption(props) {
|
|
15059
15036
|
const {
|
|
15060
15037
|
option,
|
|
@@ -15067,7 +15044,7 @@ function SelectCheckboxOption(props) {
|
|
|
15067
15044
|
onHover,
|
|
15068
15045
|
innerRef
|
|
15069
15046
|
} = props;
|
|
15070
|
-
return /* @__PURE__ */ (0,
|
|
15047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
|
|
15071
15048
|
"button",
|
|
15072
15049
|
{
|
|
15073
15050
|
id,
|
|
@@ -15088,7 +15065,7 @@ function SelectCheckboxOption(props) {
|
|
|
15088
15065
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
15089
15066
|
),
|
|
15090
15067
|
children: [
|
|
15091
|
-
/* @__PURE__ */ (0,
|
|
15068
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
|
|
15092
15069
|
BaseCheckbox,
|
|
15093
15070
|
{
|
|
15094
15071
|
checked: isSelected,
|
|
@@ -15098,9 +15075,9 @@ function SelectCheckboxOption(props) {
|
|
|
15098
15075
|
className: "pointer-events-none shrink-0"
|
|
15099
15076
|
}
|
|
15100
15077
|
),
|
|
15101
|
-
/* @__PURE__ */ (0,
|
|
15102
|
-
/* @__PURE__ */ (0,
|
|
15103
|
-
option.description && /* @__PURE__ */ (0,
|
|
15078
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
15079
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "block break-words", children: option.label }),
|
|
15080
|
+
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
15081
|
] })
|
|
15105
15082
|
]
|
|
15106
15083
|
}
|
|
@@ -15110,7 +15087,7 @@ function SelectCheckboxOption(props) {
|
|
|
15110
15087
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
15111
15088
|
var import_lucide_react48 = require("lucide-react");
|
|
15112
15089
|
var import_react_i18next36 = require("react-i18next");
|
|
15113
|
-
var
|
|
15090
|
+
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
15114
15091
|
function createCountTrigger(opts) {
|
|
15115
15092
|
const { valueText, totalCount } = opts;
|
|
15116
15093
|
function CountTrigger(props) {
|
|
@@ -15137,7 +15114,7 @@ function createCountTrigger(opts) {
|
|
|
15137
15114
|
const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
|
|
15138
15115
|
const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
|
|
15139
15116
|
const isEmpty = !hasValue;
|
|
15140
|
-
return /* @__PURE__ */ (0,
|
|
15117
|
+
return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
|
|
15141
15118
|
"button",
|
|
15142
15119
|
{
|
|
15143
15120
|
id: triggerId,
|
|
@@ -15159,9 +15136,9 @@ function createCountTrigger(opts) {
|
|
|
15159
15136
|
loading && "!cursor-progress"
|
|
15160
15137
|
),
|
|
15161
15138
|
children: [
|
|
15162
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
15163
|
-
/* @__PURE__ */ (0,
|
|
15164
|
-
/* @__PURE__ */ (0,
|
|
15139
|
+
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 }) }),
|
|
15140
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
15141
|
+
/* @__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
15142
|
import_lucide_react48.ChevronDown,
|
|
15166
15143
|
{
|
|
15167
15144
|
size: 16,
|
|
@@ -15179,9 +15156,9 @@ function createCountTrigger(opts) {
|
|
|
15179
15156
|
}
|
|
15180
15157
|
|
|
15181
15158
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
15182
|
-
var
|
|
15159
|
+
var import_jsx_runtime168 = require("react/jsx-runtime");
|
|
15183
15160
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
15184
|
-
return /* @__PURE__ */ (0,
|
|
15161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
|
|
15185
15162
|
"button",
|
|
15186
15163
|
{
|
|
15187
15164
|
type: "button",
|
|
@@ -15192,7 +15169,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15192
15169
|
disabled && "cursor-default opacity-40"
|
|
15193
15170
|
),
|
|
15194
15171
|
children: [
|
|
15195
|
-
/* @__PURE__ */ (0,
|
|
15172
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15196
15173
|
BaseCheckbox,
|
|
15197
15174
|
{
|
|
15198
15175
|
checked,
|
|
@@ -15202,20 +15179,20 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15202
15179
|
className: "pointer-events-none shrink-0"
|
|
15203
15180
|
}
|
|
15204
15181
|
),
|
|
15205
|
-
/* @__PURE__ */ (0,
|
|
15182
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "flex-1", children: label })
|
|
15206
15183
|
]
|
|
15207
15184
|
}
|
|
15208
15185
|
);
|
|
15209
15186
|
}
|
|
15210
15187
|
|
|
15211
15188
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15212
|
-
var
|
|
15213
|
-
function
|
|
15189
|
+
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
15190
|
+
function hasPaginationProps(props) {
|
|
15214
15191
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
|
|
15215
15192
|
}
|
|
15216
|
-
function
|
|
15193
|
+
function makeTriggerSlot(render) {
|
|
15217
15194
|
function CustomTrigger(props) {
|
|
15218
|
-
return /* @__PURE__ */ (0,
|
|
15195
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_jsx_runtime169.Fragment, { children: render(props.isOpen, props.onContainerClick) });
|
|
15219
15196
|
}
|
|
15220
15197
|
return CustomTrigger;
|
|
15221
15198
|
}
|
|
@@ -15238,28 +15215,28 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15238
15215
|
...paginationAndRest
|
|
15239
15216
|
} = props;
|
|
15240
15217
|
const { t } = (0, import_react_i18next37.useTranslation)();
|
|
15241
|
-
const isPaginated =
|
|
15218
|
+
const isPaginated = hasPaginationProps(
|
|
15242
15219
|
paginationAndRest
|
|
15243
15220
|
);
|
|
15244
|
-
const [inputValue, setInputValue] =
|
|
15221
|
+
const [inputValue, setInputValue] = React58.useState("");
|
|
15245
15222
|
const isControlled = value !== void 0;
|
|
15246
|
-
const [internalValue, setInternalValue] =
|
|
15223
|
+
const [internalValue, setInternalValue] = React58.useState(
|
|
15247
15224
|
() => defaultValue ?? []
|
|
15248
15225
|
);
|
|
15249
15226
|
const currentValue = isControlled ? value : internalValue;
|
|
15250
|
-
const selected =
|
|
15251
|
-
const handleChange =
|
|
15227
|
+
const selected = React58.useMemo(() => currentValue ?? [], [currentValue]);
|
|
15228
|
+
const handleChange = React58.useCallback(
|
|
15252
15229
|
(next, meta) => {
|
|
15253
15230
|
if (!isControlled) setInternalValue(next);
|
|
15254
15231
|
onChange?.(next, meta);
|
|
15255
15232
|
},
|
|
15256
15233
|
[isControlled, onChange]
|
|
15257
15234
|
);
|
|
15258
|
-
const flatRawOptions =
|
|
15235
|
+
const flatRawOptions = React58.useMemo(
|
|
15259
15236
|
() => flattenGroupedOptions(rawOptions),
|
|
15260
15237
|
[rawOptions]
|
|
15261
15238
|
);
|
|
15262
|
-
const filteredGrouped =
|
|
15239
|
+
const filteredGrouped = React58.useMemo(() => {
|
|
15263
15240
|
const trimmed = inputValue.trim();
|
|
15264
15241
|
if (!trimmed) return rawOptions;
|
|
15265
15242
|
return rawOptions.map((item) => {
|
|
@@ -15270,7 +15247,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15270
15247
|
return filterOption(item, trimmed) ? item : null;
|
|
15271
15248
|
}).filter((item) => item !== null);
|
|
15272
15249
|
}, [rawOptions, inputValue, filterOption]);
|
|
15273
|
-
const filteredFlat =
|
|
15250
|
+
const filteredFlat = React58.useMemo(
|
|
15274
15251
|
() => flattenGroupedOptions(filteredGrouped),
|
|
15275
15252
|
[filteredGrouped]
|
|
15276
15253
|
);
|
|
@@ -15278,7 +15255,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15278
15255
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
15279
15256
|
}, 0);
|
|
15280
15257
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
15281
|
-
const handleToggleAll =
|
|
15258
|
+
const handleToggleAll = React58.useCallback(() => {
|
|
15282
15259
|
if (allVisibleSelected) {
|
|
15283
15260
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
15284
15261
|
handleChange(
|
|
@@ -15293,14 +15270,14 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15293
15270
|
}
|
|
15294
15271
|
handleChange(merged, { action: "select" });
|
|
15295
15272
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
15296
|
-
const Control =
|
|
15297
|
-
if (trigger) return
|
|
15273
|
+
const Control = React58.useMemo(() => {
|
|
15274
|
+
if (trigger) return makeTriggerSlot(trigger);
|
|
15298
15275
|
return createCountTrigger({
|
|
15299
15276
|
valueText,
|
|
15300
15277
|
totalCount: flatRawOptions.length
|
|
15301
15278
|
});
|
|
15302
15279
|
}, [trigger, valueText, flatRawOptions.length]);
|
|
15303
|
-
const components =
|
|
15280
|
+
const components = React58.useMemo(
|
|
15304
15281
|
() => ({
|
|
15305
15282
|
...userComponents,
|
|
15306
15283
|
Control,
|
|
@@ -15308,7 +15285,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15308
15285
|
}),
|
|
15309
15286
|
[userComponents, Control]
|
|
15310
15287
|
);
|
|
15311
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0,
|
|
15288
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15312
15289
|
SelectAllRow,
|
|
15313
15290
|
{
|
|
15314
15291
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -15316,7 +15293,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15316
15293
|
onToggle: handleToggleAll
|
|
15317
15294
|
}
|
|
15318
15295
|
) : void 0;
|
|
15319
|
-
const handleInputChange =
|
|
15296
|
+
const handleInputChange = React58.useCallback(
|
|
15320
15297
|
(next) => {
|
|
15321
15298
|
setInputValue(next);
|
|
15322
15299
|
onSearchChange?.(next);
|
|
@@ -15336,7 +15313,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15336
15313
|
isMulti: true
|
|
15337
15314
|
};
|
|
15338
15315
|
if (isPaginated) {
|
|
15339
|
-
return /* @__PURE__ */ (0,
|
|
15316
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15340
15317
|
InfiniteScrollSelect,
|
|
15341
15318
|
{
|
|
15342
15319
|
ref,
|
|
@@ -15347,7 +15324,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15347
15324
|
}
|
|
15348
15325
|
);
|
|
15349
15326
|
}
|
|
15350
|
-
return /* @__PURE__ */ (0,
|
|
15327
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15351
15328
|
Select,
|
|
15352
15329
|
{
|
|
15353
15330
|
ref,
|
|
@@ -15358,16 +15335,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15358
15335
|
}
|
|
15359
15336
|
);
|
|
15360
15337
|
}
|
|
15361
|
-
var SelectCheckboxes =
|
|
15338
|
+
var SelectCheckboxes = React58.forwardRef(
|
|
15362
15339
|
SelectCheckboxesInternal
|
|
15363
15340
|
);
|
|
15364
15341
|
|
|
15365
15342
|
// src/dashboard/textarea/Textarea.tsx
|
|
15366
|
-
var
|
|
15343
|
+
var React60 = __toESM(require("react"), 1);
|
|
15367
15344
|
var import_react_i18next38 = require("react-i18next");
|
|
15368
15345
|
|
|
15369
15346
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15370
|
-
var
|
|
15347
|
+
var React59 = __toESM(require("react"), 1);
|
|
15371
15348
|
var isEmptyValue2 = (value) => {
|
|
15372
15349
|
if (value === void 0 || value === null) return true;
|
|
15373
15350
|
return String(value).length === 0;
|
|
@@ -15386,12 +15363,12 @@ function useTextareaValueState({
|
|
|
15386
15363
|
value,
|
|
15387
15364
|
defaultValue
|
|
15388
15365
|
}) {
|
|
15389
|
-
const textareaRef =
|
|
15366
|
+
const textareaRef = React59.useRef(null);
|
|
15390
15367
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15391
15368
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15392
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15369
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React59.useState(propsAreEmpty);
|
|
15393
15370
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15394
|
-
const setNativeValue =
|
|
15371
|
+
const setNativeValue = React59.useCallback(
|
|
15395
15372
|
(nextValue) => {
|
|
15396
15373
|
if (isControlled) return;
|
|
15397
15374
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15401,14 +15378,14 @@ function useTextareaValueState({
|
|
|
15401
15378
|
},
|
|
15402
15379
|
[isControlled]
|
|
15403
15380
|
);
|
|
15404
|
-
const syncValueState =
|
|
15381
|
+
const syncValueState = React59.useCallback(() => {
|
|
15405
15382
|
if (!textareaRef.current) return;
|
|
15406
15383
|
setNativeValue(textareaRef.current.value);
|
|
15407
15384
|
}, [setNativeValue]);
|
|
15408
|
-
|
|
15385
|
+
React59.useLayoutEffect(() => {
|
|
15409
15386
|
syncValueState();
|
|
15410
15387
|
});
|
|
15411
|
-
|
|
15388
|
+
React59.useEffect(() => {
|
|
15412
15389
|
const textarea = textareaRef.current;
|
|
15413
15390
|
const form = textarea?.form;
|
|
15414
15391
|
if (isControlled || !form) return;
|
|
@@ -15432,10 +15409,10 @@ function useTextareaValueState({
|
|
|
15432
15409
|
}
|
|
15433
15410
|
|
|
15434
15411
|
// src/dashboard/textarea/Textarea.tsx
|
|
15435
|
-
var
|
|
15412
|
+
var import_jsx_runtime170 = require("react/jsx-runtime");
|
|
15436
15413
|
var LINE_HEIGHT = 20;
|
|
15437
15414
|
var VERTICAL_PADDING = 32;
|
|
15438
|
-
var Textarea =
|
|
15415
|
+
var Textarea = React60.forwardRef(function Textarea2({
|
|
15439
15416
|
className,
|
|
15440
15417
|
textareaClassName,
|
|
15441
15418
|
label,
|
|
@@ -15463,12 +15440,12 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15463
15440
|
}, ref) {
|
|
15464
15441
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15465
15442
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15466
|
-
const reactId =
|
|
15443
|
+
const reactId = React60.useId();
|
|
15467
15444
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15468
15445
|
const { t } = (0, import_react_i18next38.useTranslation)();
|
|
15469
15446
|
const isInvalid = Boolean(invalid || error);
|
|
15470
15447
|
const isBlocked = Boolean(disabled);
|
|
15471
|
-
const resize =
|
|
15448
|
+
const resize = React60.useCallback(() => {
|
|
15472
15449
|
const el = textareaRef.current;
|
|
15473
15450
|
if (!el || !autosize) return;
|
|
15474
15451
|
el.style.height = "auto";
|
|
@@ -15478,7 +15455,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15478
15455
|
el.style.height = `${nextHeight}px`;
|
|
15479
15456
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15480
15457
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15481
|
-
|
|
15458
|
+
React60.useLayoutEffect(() => {
|
|
15482
15459
|
resize();
|
|
15483
15460
|
}, [resize, value]);
|
|
15484
15461
|
const handleInput = (event) => {
|
|
@@ -15501,7 +15478,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15501
15478
|
onBlur?.(event);
|
|
15502
15479
|
syncValueState();
|
|
15503
15480
|
};
|
|
15504
|
-
return /* @__PURE__ */ (0,
|
|
15481
|
+
return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
15505
15482
|
"div",
|
|
15506
15483
|
{
|
|
15507
15484
|
className: cn(
|
|
@@ -15511,18 +15488,18 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15511
15488
|
className
|
|
15512
15489
|
),
|
|
15513
15490
|
children: [
|
|
15514
|
-
label && /* @__PURE__ */ (0,
|
|
15491
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
15515
15492
|
"label",
|
|
15516
15493
|
{
|
|
15517
15494
|
htmlFor: textareaId,
|
|
15518
15495
|
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15519
15496
|
children: [
|
|
15520
15497
|
label,
|
|
15521
|
-
tooltip && /* @__PURE__ */ (0,
|
|
15498
|
+
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
15499
|
]
|
|
15523
15500
|
}
|
|
15524
15501
|
),
|
|
15525
|
-
/* @__PURE__ */ (0,
|
|
15502
|
+
/* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15526
15503
|
"textarea",
|
|
15527
15504
|
{
|
|
15528
15505
|
ref: combinedRef,
|
|
@@ -15554,7 +15531,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15554
15531
|
...textareaProps
|
|
15555
15532
|
}
|
|
15556
15533
|
),
|
|
15557
|
-
error && /* @__PURE__ */ (0,
|
|
15534
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15558
15535
|
FieldErrorMessage,
|
|
15559
15536
|
{
|
|
15560
15537
|
id: `${textareaId}-error`,
|
|
@@ -15562,20 +15539,20 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15562
15539
|
className: "mt-[1px] text-[14px]"
|
|
15563
15540
|
}
|
|
15564
15541
|
),
|
|
15565
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
15566
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
15542
|
+
!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") }),
|
|
15543
|
+
!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
15544
|
]
|
|
15568
15545
|
}
|
|
15569
15546
|
);
|
|
15570
15547
|
});
|
|
15571
15548
|
|
|
15572
15549
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15573
|
-
var
|
|
15550
|
+
var React62 = __toESM(require("react"), 1);
|
|
15574
15551
|
var import_lucide_react49 = require("lucide-react");
|
|
15575
15552
|
var import_react_i18next39 = require("react-i18next");
|
|
15576
15553
|
|
|
15577
15554
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15578
|
-
var
|
|
15555
|
+
var React61 = __toESM(require("react"), 1);
|
|
15579
15556
|
|
|
15580
15557
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15581
15558
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15726,21 +15703,21 @@ function useDatePickerWheel({
|
|
|
15726
15703
|
minDate,
|
|
15727
15704
|
maxDate
|
|
15728
15705
|
}) {
|
|
15729
|
-
const years =
|
|
15730
|
-
const [draftDate, setDraftDate] =
|
|
15706
|
+
const years = React61.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15707
|
+
const [draftDate, setDraftDate] = React61.useState(
|
|
15731
15708
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15732
15709
|
);
|
|
15733
15710
|
const draftYear = draftDate.getFullYear();
|
|
15734
15711
|
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 =
|
|
15712
|
+
const [monthScrollTop, setMonthScrollTop] = React61.useState(0);
|
|
15713
|
+
const [dayScrollTop, setDayScrollTop] = React61.useState(0);
|
|
15714
|
+
const [yearScrollTop, setYearScrollTop] = React61.useState(0);
|
|
15715
|
+
const monthListRef = React61.useRef(null);
|
|
15716
|
+
const dayListRef = React61.useRef(null);
|
|
15717
|
+
const yearListRef = React61.useRef(null);
|
|
15718
|
+
const settleTimeoutsRef = React61.useRef({});
|
|
15719
|
+
const animationFramesRef = React61.useRef({});
|
|
15720
|
+
const columnRefs = React61.useMemo(
|
|
15744
15721
|
() => ({
|
|
15745
15722
|
month: monthListRef,
|
|
15746
15723
|
day: dayListRef,
|
|
@@ -15748,7 +15725,7 @@ function useDatePickerWheel({
|
|
|
15748
15725
|
}),
|
|
15749
15726
|
[]
|
|
15750
15727
|
);
|
|
15751
|
-
const setColumnScrollTop =
|
|
15728
|
+
const setColumnScrollTop = React61.useCallback(
|
|
15752
15729
|
(column, nextScrollTop) => {
|
|
15753
15730
|
if (column === "month") {
|
|
15754
15731
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15762,19 +15739,19 @@ function useDatePickerWheel({
|
|
|
15762
15739
|
},
|
|
15763
15740
|
[]
|
|
15764
15741
|
);
|
|
15765
|
-
const clearSettleTimeout =
|
|
15742
|
+
const clearSettleTimeout = React61.useCallback((column) => {
|
|
15766
15743
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15767
15744
|
if (timeoutId === void 0) return;
|
|
15768
15745
|
window.clearTimeout(timeoutId);
|
|
15769
15746
|
delete settleTimeoutsRef.current[column];
|
|
15770
15747
|
}, []);
|
|
15771
|
-
const clearAnimationFrame =
|
|
15748
|
+
const clearAnimationFrame = React61.useCallback((column) => {
|
|
15772
15749
|
const frameId = animationFramesRef.current[column];
|
|
15773
15750
|
if (frameId === void 0) return;
|
|
15774
15751
|
window.cancelAnimationFrame(frameId);
|
|
15775
15752
|
delete animationFramesRef.current[column];
|
|
15776
15753
|
}, []);
|
|
15777
|
-
|
|
15754
|
+
React61.useEffect(
|
|
15778
15755
|
() => () => {
|
|
15779
15756
|
["month", "day", "year"].forEach((column) => {
|
|
15780
15757
|
clearSettleTimeout(column);
|
|
@@ -15783,22 +15760,22 @@ function useDatePickerWheel({
|
|
|
15783
15760
|
},
|
|
15784
15761
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15785
15762
|
);
|
|
15786
|
-
|
|
15763
|
+
React61.useEffect(() => {
|
|
15787
15764
|
if (isOpen) return;
|
|
15788
15765
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15789
15766
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15790
|
-
const months =
|
|
15767
|
+
const months = React61.useMemo(
|
|
15791
15768
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15792
15769
|
[draftYear, maxDate, minDate]
|
|
15793
15770
|
);
|
|
15794
|
-
const days =
|
|
15771
|
+
const days = React61.useMemo(
|
|
15795
15772
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15796
15773
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15797
15774
|
);
|
|
15798
15775
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15799
15776
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15800
15777
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15801
|
-
const syncScrollPositions =
|
|
15778
|
+
const syncScrollPositions = React61.useCallback(
|
|
15802
15779
|
(nextDate, behavior = "auto") => {
|
|
15803
15780
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15804
15781
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15822,7 +15799,7 @@ function useDatePickerWheel({
|
|
|
15822
15799
|
},
|
|
15823
15800
|
[maxDate, minDate, years]
|
|
15824
15801
|
);
|
|
15825
|
-
|
|
15802
|
+
React61.useLayoutEffect(() => {
|
|
15826
15803
|
if (!isOpen) return;
|
|
15827
15804
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15828
15805
|
setDraftDate(nextDate);
|
|
@@ -15833,7 +15810,7 @@ function useDatePickerWheel({
|
|
|
15833
15810
|
window.cancelAnimationFrame(frameId);
|
|
15834
15811
|
};
|
|
15835
15812
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15836
|
-
const updateDraftDate =
|
|
15813
|
+
const updateDraftDate = React61.useCallback(
|
|
15837
15814
|
(column, targetIndex, behavior = "smooth") => {
|
|
15838
15815
|
const currentDate = stripTime(draftDate);
|
|
15839
15816
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15878,7 +15855,7 @@ function useDatePickerWheel({
|
|
|
15878
15855
|
},
|
|
15879
15856
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15880
15857
|
);
|
|
15881
|
-
const settleColumnScroll =
|
|
15858
|
+
const settleColumnScroll = React61.useCallback(
|
|
15882
15859
|
(column) => {
|
|
15883
15860
|
const list = columnRefs[column].current;
|
|
15884
15861
|
if (!list) return;
|
|
@@ -15891,7 +15868,7 @@ function useDatePickerWheel({
|
|
|
15891
15868
|
},
|
|
15892
15869
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15893
15870
|
);
|
|
15894
|
-
const scheduleScrollSettle =
|
|
15871
|
+
const scheduleScrollSettle = React61.useCallback(
|
|
15895
15872
|
(column) => {
|
|
15896
15873
|
clearSettleTimeout(column);
|
|
15897
15874
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15900,7 +15877,7 @@ function useDatePickerWheel({
|
|
|
15900
15877
|
},
|
|
15901
15878
|
[clearSettleTimeout, settleColumnScroll]
|
|
15902
15879
|
);
|
|
15903
|
-
const handleColumnScroll =
|
|
15880
|
+
const handleColumnScroll = React61.useCallback(
|
|
15904
15881
|
(column) => {
|
|
15905
15882
|
const list = columnRefs[column].current;
|
|
15906
15883
|
if (!list) return;
|
|
@@ -15914,13 +15891,13 @@ function useDatePickerWheel({
|
|
|
15914
15891
|
},
|
|
15915
15892
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15916
15893
|
);
|
|
15917
|
-
const handleOptionSelect =
|
|
15894
|
+
const handleOptionSelect = React61.useCallback(
|
|
15918
15895
|
(column, targetIndex) => {
|
|
15919
15896
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15920
15897
|
},
|
|
15921
15898
|
[updateDraftDate]
|
|
15922
15899
|
);
|
|
15923
|
-
const focusAdjacentColumn =
|
|
15900
|
+
const focusAdjacentColumn = React61.useCallback(
|
|
15924
15901
|
(column, direction) => {
|
|
15925
15902
|
const order = ["month", "day", "year"];
|
|
15926
15903
|
const currentIndex = order.indexOf(column);
|
|
@@ -15930,7 +15907,7 @@ function useDatePickerWheel({
|
|
|
15930
15907
|
},
|
|
15931
15908
|
[columnRefs]
|
|
15932
15909
|
);
|
|
15933
|
-
const handleColumnKeyDown =
|
|
15910
|
+
const handleColumnKeyDown = React61.useCallback(
|
|
15934
15911
|
(column, event) => {
|
|
15935
15912
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15936
15913
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15996,7 +15973,7 @@ function useDatePickerWheel({
|
|
|
15996
15973
|
}
|
|
15997
15974
|
|
|
15998
15975
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
15999
|
-
var
|
|
15976
|
+
var import_jsx_runtime171 = require("react/jsx-runtime");
|
|
16000
15977
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
16001
15978
|
function AirbnbDatePickerWheelColumn({
|
|
16002
15979
|
id,
|
|
@@ -16010,7 +15987,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16010
15987
|
onOptionSelect,
|
|
16011
15988
|
column
|
|
16012
15989
|
}) {
|
|
16013
|
-
return /* @__PURE__ */ (0,
|
|
15990
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(
|
|
16014
15991
|
"div",
|
|
16015
15992
|
{
|
|
16016
15993
|
id,
|
|
@@ -16027,14 +16004,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16027
16004
|
WebkitOverflowScrolling: "touch"
|
|
16028
16005
|
},
|
|
16029
16006
|
children: [
|
|
16030
|
-
/* @__PURE__ */ (0,
|
|
16007
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { style: { height: `${spacerHeight}px` } }),
|
|
16031
16008
|
items.map((item, index) => {
|
|
16032
16009
|
const { style } = getWheelOptionStyles(
|
|
16033
16010
|
index,
|
|
16034
16011
|
scrollTop,
|
|
16035
16012
|
DATE_PICKER_OPTION_HEIGHT
|
|
16036
16013
|
);
|
|
16037
|
-
return /* @__PURE__ */ (0,
|
|
16014
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
16038
16015
|
"button",
|
|
16039
16016
|
{
|
|
16040
16017
|
id: `${id}-option-${index}`,
|
|
@@ -16050,14 +16027,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16050
16027
|
`${column}-${item}-${index}`
|
|
16051
16028
|
);
|
|
16052
16029
|
}),
|
|
16053
|
-
/* @__PURE__ */ (0,
|
|
16030
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { style: { height: `${spacerHeight}px` } })
|
|
16054
16031
|
]
|
|
16055
16032
|
}
|
|
16056
16033
|
) });
|
|
16057
16034
|
}
|
|
16058
16035
|
|
|
16059
16036
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
16060
|
-
var
|
|
16037
|
+
var import_jsx_runtime172 = require("react/jsx-runtime");
|
|
16061
16038
|
function AirbnbDatePickerBody({
|
|
16062
16039
|
baseId,
|
|
16063
16040
|
label,
|
|
@@ -16079,19 +16056,19 @@ function AirbnbDatePickerBody({
|
|
|
16079
16056
|
onOptionSelect,
|
|
16080
16057
|
onDone
|
|
16081
16058
|
}) {
|
|
16082
|
-
return /* @__PURE__ */ (0,
|
|
16083
|
-
/* @__PURE__ */ (0,
|
|
16084
|
-
/* @__PURE__ */ (0,
|
|
16085
|
-
/* @__PURE__ */ (0,
|
|
16086
|
-
/* @__PURE__ */ (0,
|
|
16059
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
|
|
16060
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "relative overflow-hidden rounded-[24px]", children: [
|
|
16061
|
+
/* @__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" }),
|
|
16062
|
+
/* @__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" }),
|
|
16063
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16087
16064
|
"div",
|
|
16088
16065
|
{
|
|
16089
16066
|
"aria-hidden": true,
|
|
16090
16067
|
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
16068
|
}
|
|
16092
16069
|
),
|
|
16093
|
-
/* @__PURE__ */ (0,
|
|
16094
|
-
/* @__PURE__ */ (0,
|
|
16070
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
|
|
16071
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16095
16072
|
AirbnbDatePickerWheelColumn,
|
|
16096
16073
|
{
|
|
16097
16074
|
id: `${baseId}-month`,
|
|
@@ -16106,7 +16083,7 @@ function AirbnbDatePickerBody({
|
|
|
16106
16083
|
onOptionSelect
|
|
16107
16084
|
}
|
|
16108
16085
|
),
|
|
16109
|
-
/* @__PURE__ */ (0,
|
|
16086
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16110
16087
|
AirbnbDatePickerWheelColumn,
|
|
16111
16088
|
{
|
|
16112
16089
|
id: `${baseId}-day`,
|
|
@@ -16121,7 +16098,7 @@ function AirbnbDatePickerBody({
|
|
|
16121
16098
|
onOptionSelect
|
|
16122
16099
|
}
|
|
16123
16100
|
),
|
|
16124
|
-
/* @__PURE__ */ (0,
|
|
16101
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16125
16102
|
AirbnbDatePickerWheelColumn,
|
|
16126
16103
|
{
|
|
16127
16104
|
id: `${baseId}-year`,
|
|
@@ -16138,7 +16115,7 @@ function AirbnbDatePickerBody({
|
|
|
16138
16115
|
)
|
|
16139
16116
|
] })
|
|
16140
16117
|
] }),
|
|
16141
|
-
/* @__PURE__ */ (0,
|
|
16118
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
16142
16119
|
] });
|
|
16143
16120
|
}
|
|
16144
16121
|
function AirbnbDatePickerContent({
|
|
@@ -16166,7 +16143,7 @@ function AirbnbDatePickerContent({
|
|
|
16166
16143
|
onColumnKeyDown,
|
|
16167
16144
|
onOptionSelect
|
|
16168
16145
|
}) {
|
|
16169
|
-
const body = /* @__PURE__ */ (0,
|
|
16146
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16170
16147
|
AirbnbDatePickerBody,
|
|
16171
16148
|
{
|
|
16172
16149
|
baseId,
|
|
@@ -16191,27 +16168,27 @@ function AirbnbDatePickerContent({
|
|
|
16191
16168
|
}
|
|
16192
16169
|
);
|
|
16193
16170
|
if (isMobile3) {
|
|
16194
|
-
return /* @__PURE__ */ (0,
|
|
16171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16195
16172
|
DrawerContent,
|
|
16196
16173
|
{
|
|
16197
16174
|
onClose: () => onOpenChange(false),
|
|
16198
16175
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
16199
16176
|
children: [
|
|
16200
|
-
/* @__PURE__ */ (0,
|
|
16201
|
-
/* @__PURE__ */ (0,
|
|
16177
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DrawerTitle, { className: "sr-only", children: title }),
|
|
16178
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
16202
16179
|
body
|
|
16203
16180
|
]
|
|
16204
16181
|
}
|
|
16205
16182
|
) });
|
|
16206
16183
|
}
|
|
16207
|
-
return /* @__PURE__ */ (0,
|
|
16184
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16208
16185
|
DialogContent,
|
|
16209
16186
|
{
|
|
16210
16187
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
16211
16188
|
showCloseButton: false,
|
|
16212
16189
|
children: [
|
|
16213
|
-
/* @__PURE__ */ (0,
|
|
16214
|
-
/* @__PURE__ */ (0,
|
|
16190
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DialogTitle, { className: "sr-only", children: title }),
|
|
16191
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DialogDescription, { className: "sr-only", children: label }),
|
|
16215
16192
|
body
|
|
16216
16193
|
]
|
|
16217
16194
|
}
|
|
@@ -16219,7 +16196,7 @@ function AirbnbDatePickerContent({
|
|
|
16219
16196
|
}
|
|
16220
16197
|
|
|
16221
16198
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
16222
|
-
var
|
|
16199
|
+
var import_jsx_runtime173 = require("react/jsx-runtime");
|
|
16223
16200
|
var MONTHS_IN_YEAR2 = 12;
|
|
16224
16201
|
function getMonthLabels2(locale) {
|
|
16225
16202
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -16252,7 +16229,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
16252
16229
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
16253
16230
|
return new Date(yearNum, monthIndex, dayNum);
|
|
16254
16231
|
}
|
|
16255
|
-
var Datepicker =
|
|
16232
|
+
var Datepicker = React62.forwardRef(
|
|
16256
16233
|
function Datepicker2({
|
|
16257
16234
|
label,
|
|
16258
16235
|
value,
|
|
@@ -16282,14 +16259,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16282
16259
|
maxDate,
|
|
16283
16260
|
formatValue
|
|
16284
16261
|
}, 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 =
|
|
16262
|
+
const containerRef = React62.useRef(null);
|
|
16263
|
+
const dayInputRef = React62.useRef(null);
|
|
16264
|
+
const monthInputRef = React62.useRef(null);
|
|
16265
|
+
const monthListRef = React62.useRef(null);
|
|
16266
|
+
const yearInputRef = React62.useRef(null);
|
|
16267
|
+
const mobileTriggerRef = React62.useRef(null);
|
|
16268
|
+
const wheelBaseId = React62.useId();
|
|
16269
|
+
const reactId = React62.useId();
|
|
16293
16270
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
16294
16271
|
const dayId = `${baseId}-day`;
|
|
16295
16272
|
const monthId = `${baseId}-month`;
|
|
@@ -16298,55 +16275,55 @@ var Datepicker = React63.forwardRef(
|
|
|
16298
16275
|
const errorId = `${baseId}-error`;
|
|
16299
16276
|
const { t, i18n } = (0, import_react_i18next39.useTranslation)();
|
|
16300
16277
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
16301
|
-
const resolvedMonthLabels =
|
|
16278
|
+
const resolvedMonthLabels = React62.useMemo(
|
|
16302
16279
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
16303
16280
|
[resolvedLocale, monthLabels]
|
|
16304
16281
|
);
|
|
16305
16282
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
16306
16283
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
16307
16284
|
const isControlled = value !== void 0;
|
|
16308
|
-
const initialParts =
|
|
16285
|
+
const initialParts = React62.useMemo(
|
|
16309
16286
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
16310
16287
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16311
16288
|
[]
|
|
16312
16289
|
);
|
|
16313
|
-
const [day, setDay] =
|
|
16314
|
-
const [monthIndex, setMonthIndex] =
|
|
16290
|
+
const [day, setDay] = React62.useState(initialParts.day);
|
|
16291
|
+
const [monthIndex, setMonthIndex] = React62.useState(
|
|
16315
16292
|
initialParts.monthIndex
|
|
16316
16293
|
);
|
|
16317
|
-
const [year, setYear] =
|
|
16318
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
16319
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
16320
|
-
const [focusedField, setFocusedField] =
|
|
16321
|
-
const [monthInputValue, setMonthInputValue] =
|
|
16322
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
16294
|
+
const [year, setYear] = React62.useState(initialParts.year);
|
|
16295
|
+
const [isMonthOpen, setIsMonthOpen] = React62.useState(false);
|
|
16296
|
+
const [isWheelOpen, setIsWheelOpen] = React62.useState(false);
|
|
16297
|
+
const [focusedField, setFocusedField] = React62.useState(null);
|
|
16298
|
+
const [monthInputValue, setMonthInputValue] = React62.useState("");
|
|
16299
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React62.useState(-1);
|
|
16323
16300
|
const isMobile3 = useIsMobile();
|
|
16324
|
-
|
|
16301
|
+
React62.useImperativeHandle(
|
|
16325
16302
|
ref,
|
|
16326
16303
|
() => dayInputRef.current ?? mobileTriggerRef.current,
|
|
16327
16304
|
[]
|
|
16328
16305
|
);
|
|
16329
|
-
|
|
16306
|
+
React62.useEffect(() => {
|
|
16330
16307
|
if (!isControlled) return;
|
|
16331
16308
|
const next = partsFromDate(value ?? null);
|
|
16332
16309
|
setDay(next.day);
|
|
16333
16310
|
setMonthIndex(next.monthIndex);
|
|
16334
16311
|
setYear(next.year);
|
|
16335
16312
|
}, [isControlled, value]);
|
|
16336
|
-
|
|
16313
|
+
React62.useEffect(() => {
|
|
16337
16314
|
if (focusedField === "month") return;
|
|
16338
16315
|
setMonthInputValue(
|
|
16339
16316
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16340
16317
|
);
|
|
16341
16318
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16342
|
-
const filteredMonths =
|
|
16319
|
+
const filteredMonths = React62.useMemo(() => {
|
|
16343
16320
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16344
16321
|
const query = monthInputValue.trim().toLowerCase();
|
|
16345
16322
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16346
16323
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16347
16324
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16348
16325
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16349
|
-
|
|
16326
|
+
React62.useEffect(() => {
|
|
16350
16327
|
if (!isMonthOpen) {
|
|
16351
16328
|
setMonthHighlightIndex(-1);
|
|
16352
16329
|
return;
|
|
@@ -16367,7 +16344,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16367
16344
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16368
16345
|
const isInvalid = Boolean(invalid || error);
|
|
16369
16346
|
const wrapperWidth = toCssSize(width);
|
|
16370
|
-
const currentDate =
|
|
16347
|
+
const currentDate = React62.useMemo(
|
|
16371
16348
|
() => dateFromParts(day, monthIndex, year),
|
|
16372
16349
|
[day, monthIndex, year]
|
|
16373
16350
|
);
|
|
@@ -16376,7 +16353,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16376
16353
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16377
16354
|
isDisabled: !isMonthOpen || isMobile3
|
|
16378
16355
|
});
|
|
16379
|
-
const emitChange =
|
|
16356
|
+
const emitChange = React62.useCallback(
|
|
16380
16357
|
(nextDay, nextMonth, nextYear) => {
|
|
16381
16358
|
if (!onChange) return;
|
|
16382
16359
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16411,7 +16388,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16411
16388
|
setIsMonthOpen(true);
|
|
16412
16389
|
setMonthHighlightIndex(0);
|
|
16413
16390
|
};
|
|
16414
|
-
const commitMonthInput =
|
|
16391
|
+
const commitMonthInput = React62.useCallback(() => {
|
|
16415
16392
|
const query = monthInputValue.trim().toLowerCase();
|
|
16416
16393
|
if (!query) {
|
|
16417
16394
|
if (monthIndex !== null) {
|
|
@@ -16471,15 +16448,15 @@ var Datepicker = React63.forwardRef(
|
|
|
16471
16448
|
setIsMonthOpen(false);
|
|
16472
16449
|
}
|
|
16473
16450
|
};
|
|
16474
|
-
const focusDayInput =
|
|
16451
|
+
const focusDayInput = React62.useCallback(() => {
|
|
16475
16452
|
if (isBlocked || readOnly) return;
|
|
16476
16453
|
dayInputRef.current?.focus();
|
|
16477
16454
|
}, [isBlocked, readOnly]);
|
|
16478
|
-
const openWheel =
|
|
16455
|
+
const openWheel = React62.useCallback(() => {
|
|
16479
16456
|
if (isBlocked || readOnly) return;
|
|
16480
16457
|
setIsWheelOpen(true);
|
|
16481
16458
|
}, [isBlocked, readOnly]);
|
|
16482
|
-
const closeWheel =
|
|
16459
|
+
const closeWheel = React62.useCallback(() => {
|
|
16483
16460
|
setIsWheelOpen(false);
|
|
16484
16461
|
mobileTriggerRef.current?.focus();
|
|
16485
16462
|
}, []);
|
|
@@ -16491,7 +16468,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16491
16468
|
minDate,
|
|
16492
16469
|
maxDate
|
|
16493
16470
|
});
|
|
16494
|
-
const handleWheelDone =
|
|
16471
|
+
const handleWheelDone = React62.useCallback(() => {
|
|
16495
16472
|
const next = wheel.draftDate;
|
|
16496
16473
|
setDay(String(next.getDate()));
|
|
16497
16474
|
setMonthIndex(next.getMonth());
|
|
@@ -16500,14 +16477,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16500
16477
|
setIsWheelOpen(false);
|
|
16501
16478
|
mobileTriggerRef.current?.focus();
|
|
16502
16479
|
}, [name, onChange, wheel.draftDate]);
|
|
16503
|
-
const defaultFormatValue =
|
|
16480
|
+
const defaultFormatValue = React62.useCallback(
|
|
16504
16481
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16505
16482
|
[resolvedMonthLabels]
|
|
16506
16483
|
);
|
|
16507
16484
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16508
16485
|
const monthListboxId = `${monthId}-listbox`;
|
|
16509
16486
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16510
|
-
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0,
|
|
16487
|
+
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
16488
|
"ul",
|
|
16512
16489
|
{
|
|
16513
16490
|
ref: monthListRef,
|
|
@@ -16518,7 +16495,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16518
16495
|
children: filteredMonths.map((option, position) => {
|
|
16519
16496
|
const isSelected = option.index === monthIndex;
|
|
16520
16497
|
const isHighlighted = position === monthHighlightIndex;
|
|
16521
|
-
return /* @__PURE__ */ (0,
|
|
16498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16522
16499
|
"button",
|
|
16523
16500
|
{
|
|
16524
16501
|
id: getMonthOptionId(option.index),
|
|
@@ -16545,7 +16522,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16545
16522
|
isBlocked && "cursor-not-allowed",
|
|
16546
16523
|
loading && "cursor-progress"
|
|
16547
16524
|
);
|
|
16548
|
-
return /* @__PURE__ */ (0,
|
|
16525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16549
16526
|
"div",
|
|
16550
16527
|
{
|
|
16551
16528
|
ref: containerRef,
|
|
@@ -16556,9 +16533,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16556
16533
|
className
|
|
16557
16534
|
),
|
|
16558
16535
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16559
|
-
children: /* @__PURE__ */ (0,
|
|
16560
|
-
/* @__PURE__ */ (0,
|
|
16561
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
16536
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
16537
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative w-full", children: [
|
|
16538
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
16562
16539
|
"button",
|
|
16563
16540
|
{
|
|
16564
16541
|
ref: mobileTriggerRef,
|
|
@@ -16577,8 +16554,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16577
16554
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16578
16555
|
),
|
|
16579
16556
|
children: [
|
|
16580
|
-
/* @__PURE__ */ (0,
|
|
16581
|
-
/* @__PURE__ */ (0,
|
|
16557
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
16558
|
+
/* @__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
16559
|
import_lucide_react49.ChevronDown,
|
|
16583
16560
|
{
|
|
16584
16561
|
size: 16,
|
|
@@ -16590,14 +16567,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16590
16567
|
) })
|
|
16591
16568
|
]
|
|
16592
16569
|
}
|
|
16593
|
-
) : /* @__PURE__ */ (0,
|
|
16570
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
16594
16571
|
"div",
|
|
16595
16572
|
{
|
|
16596
16573
|
className: cn(
|
|
16597
16574
|
"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
16575
|
),
|
|
16599
16576
|
children: [
|
|
16600
|
-
/* @__PURE__ */ (0,
|
|
16577
|
+
/* @__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
16578
|
"input",
|
|
16602
16579
|
{
|
|
16603
16580
|
ref: dayInputRef,
|
|
@@ -16619,8 +16596,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16619
16596
|
className: subInputClass
|
|
16620
16597
|
}
|
|
16621
16598
|
) }),
|
|
16622
|
-
/* @__PURE__ */ (0,
|
|
16623
|
-
/* @__PURE__ */ (0,
|
|
16599
|
+
/* @__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: [
|
|
16600
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16624
16601
|
"input",
|
|
16625
16602
|
{
|
|
16626
16603
|
ref: monthInputRef,
|
|
@@ -16663,7 +16640,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16663
16640
|
)
|
|
16664
16641
|
}
|
|
16665
16642
|
),
|
|
16666
|
-
/* @__PURE__ */ (0,
|
|
16643
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16667
16644
|
import_lucide_react49.ChevronDown,
|
|
16668
16645
|
{
|
|
16669
16646
|
size: 14,
|
|
@@ -16680,7 +16657,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16680
16657
|
}
|
|
16681
16658
|
)
|
|
16682
16659
|
] }),
|
|
16683
|
-
/* @__PURE__ */ (0,
|
|
16660
|
+
/* @__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
16661
|
"input",
|
|
16685
16662
|
{
|
|
16686
16663
|
ref: yearInputRef,
|
|
@@ -16705,7 +16682,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16705
16682
|
]
|
|
16706
16683
|
}
|
|
16707
16684
|
),
|
|
16708
|
-
showCoverage && /* @__PURE__ */ (0,
|
|
16685
|
+
showCoverage && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16709
16686
|
"div",
|
|
16710
16687
|
{
|
|
16711
16688
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16713,7 +16690,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16713
16690
|
"aria-hidden": "true"
|
|
16714
16691
|
}
|
|
16715
16692
|
),
|
|
16716
|
-
/* @__PURE__ */ (0,
|
|
16693
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16717
16694
|
Fieldset,
|
|
16718
16695
|
{
|
|
16719
16696
|
isFocused,
|
|
@@ -16731,9 +16708,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16731
16708
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16732
16709
|
}
|
|
16733
16710
|
),
|
|
16734
|
-
isMonthOpen && !isMobile3 && /* @__PURE__ */ (0,
|
|
16711
|
+
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
16712
|
] }),
|
|
16736
|
-
isMobile3 && /* @__PURE__ */ (0,
|
|
16713
|
+
isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16737
16714
|
AirbnbDatePickerContent,
|
|
16738
16715
|
{
|
|
16739
16716
|
baseId: wheelBaseId,
|
|
@@ -16761,9 +16738,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16761
16738
|
onOptionSelect: wheel.handleOptionSelect
|
|
16762
16739
|
}
|
|
16763
16740
|
),
|
|
16764
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
16765
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
16766
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
16741
|
+
!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") }),
|
|
16742
|
+
!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 }),
|
|
16743
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16767
16744
|
FieldErrorMessage,
|
|
16768
16745
|
{
|
|
16769
16746
|
id: errorId,
|
|
@@ -16778,7 +16755,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16778
16755
|
);
|
|
16779
16756
|
|
|
16780
16757
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16781
|
-
var
|
|
16758
|
+
var React66 = __toESM(require("react"), 1);
|
|
16782
16759
|
var import_react_i18next40 = require("react-i18next");
|
|
16783
16760
|
|
|
16784
16761
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16857,7 +16834,7 @@ var createDisabledMatchers = ({
|
|
|
16857
16834
|
};
|
|
16858
16835
|
|
|
16859
16836
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16860
|
-
var
|
|
16837
|
+
var React63 = __toESM(require("react"), 1);
|
|
16861
16838
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16862
16839
|
function useRangeValue({
|
|
16863
16840
|
value: externalValue,
|
|
@@ -16866,10 +16843,10 @@ function useRangeValue({
|
|
|
16866
16843
|
name
|
|
16867
16844
|
}) {
|
|
16868
16845
|
const isControlled = externalValue !== void 0;
|
|
16869
|
-
const [draft, setDraft] =
|
|
16846
|
+
const [draft, setDraft] = React63.useState(
|
|
16870
16847
|
isControlled ? externalValue : defaultValue
|
|
16871
16848
|
);
|
|
16872
|
-
const lastExternalKeyRef =
|
|
16849
|
+
const lastExternalKeyRef = React63.useRef(getRangeKey(externalValue));
|
|
16873
16850
|
if (isControlled) {
|
|
16874
16851
|
const externalKey = getRangeKey(externalValue);
|
|
16875
16852
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16877,7 +16854,7 @@ function useRangeValue({
|
|
|
16877
16854
|
setDraft(externalValue);
|
|
16878
16855
|
}
|
|
16879
16856
|
}
|
|
16880
|
-
const commit =
|
|
16857
|
+
const commit = React63.useCallback(
|
|
16881
16858
|
(next) => {
|
|
16882
16859
|
setDraft(next);
|
|
16883
16860
|
if (next === void 0) {
|
|
@@ -16892,7 +16869,7 @@ function useRangeValue({
|
|
|
16892
16869
|
}
|
|
16893
16870
|
|
|
16894
16871
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16895
|
-
var
|
|
16872
|
+
var React64 = __toESM(require("react"), 1);
|
|
16896
16873
|
function useRangeTextInputs({
|
|
16897
16874
|
value,
|
|
16898
16875
|
format: format2,
|
|
@@ -16900,13 +16877,13 @@ function useRangeTextInputs({
|
|
|
16900
16877
|
onCommit,
|
|
16901
16878
|
onBlur
|
|
16902
16879
|
}) {
|
|
16903
|
-
const [fromText, setFromText] =
|
|
16904
|
-
const [toText, setToText] =
|
|
16905
|
-
|
|
16880
|
+
const [fromText, setFromText] = React64.useState(value?.from ? format2(value.from) : "");
|
|
16881
|
+
const [toText, setToText] = React64.useState(value?.to ? format2(value.to) : "");
|
|
16882
|
+
React64.useEffect(() => {
|
|
16906
16883
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16907
16884
|
setToText(value?.to ? format2(value.to) : "");
|
|
16908
16885
|
}, [format2, value?.from, value?.to]);
|
|
16909
|
-
const handleFromBlur =
|
|
16886
|
+
const handleFromBlur = React64.useCallback(() => {
|
|
16910
16887
|
if (!fromText) {
|
|
16911
16888
|
const next = { from: void 0, to: value?.to };
|
|
16912
16889
|
onCommit(next);
|
|
@@ -16923,7 +16900,7 @@ function useRangeTextInputs({
|
|
|
16923
16900
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16924
16901
|
return void 0;
|
|
16925
16902
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16926
|
-
const handleToBlur =
|
|
16903
|
+
const handleToBlur = React64.useCallback(() => {
|
|
16927
16904
|
if (!toText) {
|
|
16928
16905
|
const next = { from: value?.from, to: void 0 };
|
|
16929
16906
|
onCommit(next);
|
|
@@ -16950,21 +16927,21 @@ function useRangeTextInputs({
|
|
|
16950
16927
|
}
|
|
16951
16928
|
|
|
16952
16929
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16953
|
-
var
|
|
16930
|
+
var React65 = __toESM(require("react"), 1);
|
|
16954
16931
|
function useRangeMonthSync(value) {
|
|
16955
|
-
const isPreloadedRef =
|
|
16956
|
-
const [month, setMonth] =
|
|
16957
|
-
|
|
16932
|
+
const isPreloadedRef = React65.useRef(false);
|
|
16933
|
+
const [month, setMonth] = React65.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16934
|
+
React65.useEffect(() => {
|
|
16958
16935
|
if (value?.from && !isPreloadedRef.current) {
|
|
16959
16936
|
setMonth(value.from);
|
|
16960
16937
|
isPreloadedRef.current = true;
|
|
16961
16938
|
}
|
|
16962
16939
|
}, [value?.from]);
|
|
16963
|
-
const syncMonthToValue =
|
|
16940
|
+
const syncMonthToValue = React65.useCallback((next) => {
|
|
16964
16941
|
isPreloadedRef.current = true;
|
|
16965
16942
|
if (next?.from) setMonth(next.from);
|
|
16966
16943
|
}, []);
|
|
16967
|
-
const resetPreload =
|
|
16944
|
+
const resetPreload = React65.useCallback(() => {
|
|
16968
16945
|
isPreloadedRef.current = false;
|
|
16969
16946
|
}, []);
|
|
16970
16947
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -16990,7 +16967,7 @@ function resolveRangeSelection({
|
|
|
16990
16967
|
|
|
16991
16968
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
16992
16969
|
var import_lucide_react50 = require("lucide-react");
|
|
16993
|
-
var
|
|
16970
|
+
var import_jsx_runtime174 = require("react/jsx-runtime");
|
|
16994
16971
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
16995
16972
|
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
16973
|
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 +17009,7 @@ function DateRangeInputs({
|
|
|
17032
17009
|
isBlocked && "cursor-not-allowed",
|
|
17033
17010
|
loading && "cursor-progress"
|
|
17034
17011
|
);
|
|
17035
|
-
return /* @__PURE__ */ (0,
|
|
17012
|
+
return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
|
|
17036
17013
|
"div",
|
|
17037
17014
|
{
|
|
17038
17015
|
className: cn(
|
|
@@ -17041,7 +17018,7 @@ function DateRangeInputs({
|
|
|
17041
17018
|
),
|
|
17042
17019
|
onClick: onRowClick,
|
|
17043
17020
|
children: [
|
|
17044
|
-
/* @__PURE__ */ (0,
|
|
17021
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17045
17022
|
"input",
|
|
17046
17023
|
{
|
|
17047
17024
|
ref: fromInputRef,
|
|
@@ -17065,7 +17042,7 @@ function DateRangeInputs({
|
|
|
17065
17042
|
)
|
|
17066
17043
|
}
|
|
17067
17044
|
),
|
|
17068
|
-
/* @__PURE__ */ (0,
|
|
17045
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17069
17046
|
"span",
|
|
17070
17047
|
{
|
|
17071
17048
|
"aria-hidden": "true",
|
|
@@ -17076,7 +17053,7 @@ function DateRangeInputs({
|
|
|
17076
17053
|
children: "\u2192"
|
|
17077
17054
|
}
|
|
17078
17055
|
),
|
|
17079
|
-
/* @__PURE__ */ (0,
|
|
17056
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17080
17057
|
"input",
|
|
17081
17058
|
{
|
|
17082
17059
|
ref: toInputRef,
|
|
@@ -17100,8 +17077,8 @@ function DateRangeInputs({
|
|
|
17100
17077
|
)
|
|
17101
17078
|
}
|
|
17102
17079
|
),
|
|
17103
|
-
/* @__PURE__ */ (0,
|
|
17104
|
-
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0,
|
|
17080
|
+
/* @__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: [
|
|
17081
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17105
17082
|
"button",
|
|
17106
17083
|
{
|
|
17107
17084
|
type: "button",
|
|
@@ -17109,10 +17086,10 @@ function DateRangeInputs({
|
|
|
17109
17086
|
onClick: onReset,
|
|
17110
17087
|
className: iconButtonClass,
|
|
17111
17088
|
"aria-label": clearLabel,
|
|
17112
|
-
children: /* @__PURE__ */ (0,
|
|
17089
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react50.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17113
17090
|
}
|
|
17114
17091
|
),
|
|
17115
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0,
|
|
17092
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17116
17093
|
"button",
|
|
17117
17094
|
{
|
|
17118
17095
|
type: "button",
|
|
@@ -17124,7 +17101,7 @@ function DateRangeInputs({
|
|
|
17124
17101
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
17125
17102
|
),
|
|
17126
17103
|
"aria-label": openCalendarLabel,
|
|
17127
|
-
children: /* @__PURE__ */ (0,
|
|
17104
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react50.CalendarDays, { size: 18 })
|
|
17128
17105
|
}
|
|
17129
17106
|
)
|
|
17130
17107
|
] })
|
|
@@ -17134,7 +17111,7 @@ function DateRangeInputs({
|
|
|
17134
17111
|
}
|
|
17135
17112
|
|
|
17136
17113
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
17137
|
-
var
|
|
17114
|
+
var import_jsx_runtime175 = require("react/jsx-runtime");
|
|
17138
17115
|
function DateRangeCalendar({
|
|
17139
17116
|
value,
|
|
17140
17117
|
month,
|
|
@@ -17150,7 +17127,7 @@ function DateRangeCalendar({
|
|
|
17150
17127
|
components,
|
|
17151
17128
|
...dayPickerProps
|
|
17152
17129
|
}) {
|
|
17153
|
-
return /* @__PURE__ */ (0,
|
|
17130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17154
17131
|
Calendar,
|
|
17155
17132
|
{
|
|
17156
17133
|
mode: "range",
|
|
@@ -17173,7 +17150,7 @@ function DateRangeCalendar({
|
|
|
17173
17150
|
}
|
|
17174
17151
|
|
|
17175
17152
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
17176
|
-
var
|
|
17153
|
+
var import_jsx_runtime176 = require("react/jsx-runtime");
|
|
17177
17154
|
function DateRangePopover({
|
|
17178
17155
|
isOpen,
|
|
17179
17156
|
isMobile: isMobile3,
|
|
@@ -17185,30 +17162,30 @@ function DateRangePopover({
|
|
|
17185
17162
|
}) {
|
|
17186
17163
|
if (!isOpen) return null;
|
|
17187
17164
|
if (isMobile3) {
|
|
17188
|
-
return /* @__PURE__ */ (0,
|
|
17165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17189
17166
|
Drawer,
|
|
17190
17167
|
{
|
|
17191
17168
|
open: isOpen,
|
|
17192
17169
|
onOpenChange: (next) => {
|
|
17193
17170
|
if (!next) onClose();
|
|
17194
17171
|
},
|
|
17195
|
-
children: /* @__PURE__ */ (0,
|
|
17172
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(
|
|
17196
17173
|
DrawerContent,
|
|
17197
17174
|
{
|
|
17198
17175
|
onClose,
|
|
17199
17176
|
lockScroll: false,
|
|
17200
17177
|
className: "max-h-[calc(100vh-1rem)]",
|
|
17201
17178
|
children: [
|
|
17202
|
-
/* @__PURE__ */ (0,
|
|
17203
|
-
/* @__PURE__ */ (0,
|
|
17204
|
-
/* @__PURE__ */ (0,
|
|
17179
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
17180
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
17181
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
17205
17182
|
]
|
|
17206
17183
|
}
|
|
17207
17184
|
)
|
|
17208
17185
|
}
|
|
17209
17186
|
);
|
|
17210
17187
|
}
|
|
17211
|
-
return /* @__PURE__ */ (0,
|
|
17188
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17212
17189
|
"div",
|
|
17213
17190
|
{
|
|
17214
17191
|
className: cn(
|
|
@@ -17221,8 +17198,8 @@ function DateRangePopover({
|
|
|
17221
17198
|
}
|
|
17222
17199
|
|
|
17223
17200
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17224
|
-
var
|
|
17225
|
-
var DateRangePicker =
|
|
17201
|
+
var import_jsx_runtime177 = require("react/jsx-runtime");
|
|
17202
|
+
var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
17226
17203
|
label,
|
|
17227
17204
|
value: externalValue,
|
|
17228
17205
|
defaultValue,
|
|
@@ -17256,20 +17233,20 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17256
17233
|
components: customComponents,
|
|
17257
17234
|
...dayPickerProps
|
|
17258
17235
|
}, ref) {
|
|
17259
|
-
const containerRef =
|
|
17260
|
-
const fromInputRef =
|
|
17261
|
-
const toInputRef =
|
|
17262
|
-
const reactId =
|
|
17236
|
+
const containerRef = React66.useRef(null);
|
|
17237
|
+
const fromInputRef = React66.useRef(null);
|
|
17238
|
+
const toInputRef = React66.useRef(null);
|
|
17239
|
+
const reactId = React66.useId();
|
|
17263
17240
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17264
17241
|
const fromId = `${baseId}-from`;
|
|
17265
17242
|
const toId = `${baseId}-to`;
|
|
17266
17243
|
const labelId = `${baseId}-label`;
|
|
17267
17244
|
const errorId = `${baseId}-error`;
|
|
17268
|
-
const normalizedValue =
|
|
17245
|
+
const normalizedValue = React66.useMemo(() => {
|
|
17269
17246
|
if (externalValue === void 0) return void 0;
|
|
17270
17247
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17271
17248
|
}, [externalValue]);
|
|
17272
|
-
const normalizedDefaultValue =
|
|
17249
|
+
const normalizedDefaultValue = React66.useMemo(() => {
|
|
17273
17250
|
if (defaultValue === void 0) return void 0;
|
|
17274
17251
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17275
17252
|
}, [defaultValue]);
|
|
@@ -17279,10 +17256,10 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17279
17256
|
onChange,
|
|
17280
17257
|
name
|
|
17281
17258
|
});
|
|
17282
|
-
const normalizedMinDate =
|
|
17283
|
-
const normalizedMaxDate =
|
|
17284
|
-
const formatter =
|
|
17285
|
-
const parser =
|
|
17259
|
+
const normalizedMinDate = React66.useMemo(() => toDate(minDate), [minDate]);
|
|
17260
|
+
const normalizedMaxDate = React66.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17261
|
+
const formatter = React66.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17262
|
+
const parser = React66.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17286
17263
|
const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
|
|
17287
17264
|
value,
|
|
17288
17265
|
format: formatter,
|
|
@@ -17291,9 +17268,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17291
17268
|
onBlur
|
|
17292
17269
|
});
|
|
17293
17270
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17294
|
-
const [isOpen, setIsOpen] =
|
|
17295
|
-
const [focusedInput, setFocusedInput] =
|
|
17296
|
-
const [autoFocus, setAutoFocus] =
|
|
17271
|
+
const [isOpen, setIsOpen] = React66.useState(false);
|
|
17272
|
+
const [focusedInput, setFocusedInput] = React66.useState(null);
|
|
17273
|
+
const [autoFocus, setAutoFocus] = React66.useState(false);
|
|
17297
17274
|
const isMobile3 = useIsMobile();
|
|
17298
17275
|
const { t } = (0, import_react_i18next40.useTranslation)();
|
|
17299
17276
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17304,13 +17281,13 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17304
17281
|
const isFocused = focusedInput !== null || isOpen;
|
|
17305
17282
|
const wrapperWidth = toCssSize(width);
|
|
17306
17283
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17307
|
-
const closeCalendar =
|
|
17284
|
+
const closeCalendar = React66.useCallback(() => {
|
|
17308
17285
|
setIsOpen(false);
|
|
17309
17286
|
setFocusedInput(null);
|
|
17310
17287
|
setAutoFocus(false);
|
|
17311
17288
|
if (value?.from) setMonth(value.from);
|
|
17312
17289
|
}, [setMonth, value?.from]);
|
|
17313
|
-
const openCalendar =
|
|
17290
|
+
const openCalendar = React66.useCallback(() => {
|
|
17314
17291
|
if (isBlocked || readOnly) return;
|
|
17315
17292
|
setIsOpen(true);
|
|
17316
17293
|
}, [isBlocked, readOnly]);
|
|
@@ -17319,7 +17296,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17319
17296
|
onOutsideClick: closeCalendar,
|
|
17320
17297
|
isDisabled: !isOpen || isMobile3
|
|
17321
17298
|
});
|
|
17322
|
-
const handlePickerChange =
|
|
17299
|
+
const handlePickerChange = React66.useCallback(
|
|
17323
17300
|
(range, pickedDate) => {
|
|
17324
17301
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17325
17302
|
previous: value,
|
|
@@ -17340,7 +17317,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17340
17317
|
setToText("");
|
|
17341
17318
|
setMonth(/* @__PURE__ */ new Date());
|
|
17342
17319
|
};
|
|
17343
|
-
const disabledMatchers =
|
|
17320
|
+
const disabledMatchers = React66.useMemo(
|
|
17344
17321
|
() => createDisabledMatchers({
|
|
17345
17322
|
minDate: normalizedMinDate,
|
|
17346
17323
|
maxDate: normalizedMaxDate,
|
|
@@ -17359,7 +17336,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17359
17336
|
openCalendar();
|
|
17360
17337
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17361
17338
|
};
|
|
17362
|
-
|
|
17339
|
+
React66.useImperativeHandle(
|
|
17363
17340
|
ref,
|
|
17364
17341
|
() => ({
|
|
17365
17342
|
setDateRange: (range) => {
|
|
@@ -17382,7 +17359,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17382
17359
|
syncMonthToValue
|
|
17383
17360
|
]
|
|
17384
17361
|
);
|
|
17385
|
-
return /* @__PURE__ */ (0,
|
|
17362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17386
17363
|
"div",
|
|
17387
17364
|
{
|
|
17388
17365
|
ref: containerRef,
|
|
@@ -17393,9 +17370,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17393
17370
|
className
|
|
17394
17371
|
),
|
|
17395
17372
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17396
|
-
children: /* @__PURE__ */ (0,
|
|
17397
|
-
/* @__PURE__ */ (0,
|
|
17398
|
-
/* @__PURE__ */ (0,
|
|
17373
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
17374
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: "relative w-full", children: [
|
|
17375
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17399
17376
|
DateRangeInputs,
|
|
17400
17377
|
{
|
|
17401
17378
|
fromId,
|
|
@@ -17446,7 +17423,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17446
17423
|
onToggleCalendar: toggleCalendar
|
|
17447
17424
|
}
|
|
17448
17425
|
),
|
|
17449
|
-
/* @__PURE__ */ (0,
|
|
17426
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17450
17427
|
Fieldset,
|
|
17451
17428
|
{
|
|
17452
17429
|
isFocused,
|
|
@@ -17463,7 +17440,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17463
17440
|
tooltip
|
|
17464
17441
|
}
|
|
17465
17442
|
),
|
|
17466
|
-
/* @__PURE__ */ (0,
|
|
17443
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17467
17444
|
DateRangePopover,
|
|
17468
17445
|
{
|
|
17469
17446
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17472,7 +17449,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17472
17449
|
drawerTitle,
|
|
17473
17450
|
drawerDescription,
|
|
17474
17451
|
onClose: closeCalendar,
|
|
17475
|
-
children: /* @__PURE__ */ (0,
|
|
17452
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17476
17453
|
DateRangeCalendar,
|
|
17477
17454
|
{
|
|
17478
17455
|
value,
|
|
@@ -17493,7 +17470,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17493
17470
|
}
|
|
17494
17471
|
)
|
|
17495
17472
|
] }),
|
|
17496
|
-
/* @__PURE__ */ (0,
|
|
17473
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17497
17474
|
DateRangePopover,
|
|
17498
17475
|
{
|
|
17499
17476
|
isOpen: isOpen && isMobile3,
|
|
@@ -17502,7 +17479,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17502
17479
|
drawerTitle,
|
|
17503
17480
|
drawerDescription,
|
|
17504
17481
|
onClose: closeCalendar,
|
|
17505
|
-
children: /* @__PURE__ */ (0,
|
|
17482
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17506
17483
|
DateRangeCalendar,
|
|
17507
17484
|
{
|
|
17508
17485
|
value,
|
|
@@ -17522,9 +17499,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17522
17499
|
)
|
|
17523
17500
|
}
|
|
17524
17501
|
),
|
|
17525
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
17526
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
17527
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
17502
|
+
!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") }),
|
|
17503
|
+
!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 }),
|
|
17504
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17528
17505
|
FieldErrorMessage,
|
|
17529
17506
|
{
|
|
17530
17507
|
id: errorId,
|
|
@@ -17538,7 +17515,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17538
17515
|
});
|
|
17539
17516
|
|
|
17540
17517
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17541
|
-
var
|
|
17518
|
+
var React67 = __toESM(require("react"), 1);
|
|
17542
17519
|
var import_react_i18next41 = require("react-i18next");
|
|
17543
17520
|
var import_date_fns4 = require("date-fns");
|
|
17544
17521
|
var import_react_day_picker2 = require("react-day-picker");
|
|
@@ -17561,11 +17538,11 @@ function useValidateDates({
|
|
|
17561
17538
|
const { t } = (0, import_react_i18next41.useTranslation)();
|
|
17562
17539
|
const handleError = useEvent(onError);
|
|
17563
17540
|
const handleSuccess = useEvent(onSuccess);
|
|
17564
|
-
const errorFormatter =
|
|
17541
|
+
const errorFormatter = React67.useMemo(
|
|
17565
17542
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17566
17543
|
[displayFormat]
|
|
17567
17544
|
);
|
|
17568
|
-
const validateDates =
|
|
17545
|
+
const validateDates = React67.useCallback(
|
|
17569
17546
|
(dates) => {
|
|
17570
17547
|
const startDate = dates?.from;
|
|
17571
17548
|
const endDate = dates?.to;
|
|
@@ -17615,9 +17592,9 @@ function useValidateDates({
|
|
|
17615
17592
|
}
|
|
17616
17593
|
|
|
17617
17594
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17618
|
-
var
|
|
17595
|
+
var React68 = __toESM(require("react"), 1);
|
|
17619
17596
|
var import_date_fns5 = require("date-fns");
|
|
17620
|
-
var
|
|
17597
|
+
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
17621
17598
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17622
17599
|
function parseTime(value) {
|
|
17623
17600
|
return (0, import_date_fns5.parse)(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17659,24 +17636,24 @@ var FORMAT_SETTINGS = {
|
|
|
17659
17636
|
},
|
|
17660
17637
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17661
17638
|
};
|
|
17662
|
-
var TimePicker =
|
|
17663
|
-
const resolvedOptions =
|
|
17639
|
+
var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17640
|
+
const resolvedOptions = React68.useMemo(() => {
|
|
17664
17641
|
if (options) return options;
|
|
17665
17642
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17666
17643
|
return buildOptions(settings);
|
|
17667
17644
|
}, [formatName, options, timeSettings]);
|
|
17668
|
-
return /* @__PURE__ */ (0,
|
|
17645
|
+
return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17669
17646
|
});
|
|
17670
17647
|
|
|
17671
17648
|
// src/dashboard/file-input/FileInput.tsx
|
|
17672
|
-
var
|
|
17649
|
+
var React69 = __toESM(require("react"), 1);
|
|
17673
17650
|
var import_lucide_react51 = require("lucide-react");
|
|
17674
17651
|
var import_react_i18next42 = require("react-i18next");
|
|
17675
|
-
var
|
|
17652
|
+
var import_jsx_runtime179 = require("react/jsx-runtime");
|
|
17676
17653
|
function defaultDownload(url) {
|
|
17677
17654
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17678
17655
|
}
|
|
17679
|
-
var FileInput =
|
|
17656
|
+
var FileInput = React69.forwardRef(function FileInput2({
|
|
17680
17657
|
label,
|
|
17681
17658
|
value,
|
|
17682
17659
|
onChange,
|
|
@@ -17698,12 +17675,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17698
17675
|
width,
|
|
17699
17676
|
downloadLabel
|
|
17700
17677
|
}, ref) {
|
|
17701
|
-
const internalRef =
|
|
17678
|
+
const internalRef = React69.useRef(null);
|
|
17702
17679
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17703
17680
|
const { t } = (0, import_react_i18next42.useTranslation)();
|
|
17704
17681
|
const resolvedLabel = label ?? t("upload_file");
|
|
17705
17682
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17706
|
-
const reactId =
|
|
17683
|
+
const reactId = React69.useId();
|
|
17707
17684
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17708
17685
|
const labelId = `${inputId}-label`;
|
|
17709
17686
|
const errorId = `${inputId}-error`;
|
|
@@ -17729,7 +17706,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17729
17706
|
event.stopPropagation();
|
|
17730
17707
|
if (isUrl) onDownload(value);
|
|
17731
17708
|
};
|
|
17732
|
-
return /* @__PURE__ */ (0,
|
|
17709
|
+
return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17733
17710
|
"label",
|
|
17734
17711
|
{
|
|
17735
17712
|
htmlFor: inputId,
|
|
@@ -17742,7 +17719,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17742
17719
|
),
|
|
17743
17720
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17744
17721
|
children: [
|
|
17745
|
-
/* @__PURE__ */ (0,
|
|
17722
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17746
17723
|
"input",
|
|
17747
17724
|
{
|
|
17748
17725
|
ref: inputRef,
|
|
@@ -17758,9 +17735,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17758
17735
|
"aria-invalid": isInvalid
|
|
17759
17736
|
}
|
|
17760
17737
|
),
|
|
17761
|
-
/* @__PURE__ */ (0,
|
|
17762
|
-
/* @__PURE__ */ (0,
|
|
17763
|
-
/* @__PURE__ */ (0,
|
|
17738
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "relative w-full", children: [
|
|
17739
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "relative w-full", children: [
|
|
17740
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17764
17741
|
"div",
|
|
17765
17742
|
{
|
|
17766
17743
|
className: cn(
|
|
@@ -17768,25 +17745,25 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17768
17745
|
isEmpty && "bg-[var(--empty-field-background)]"
|
|
17769
17746
|
),
|
|
17770
17747
|
children: [
|
|
17771
|
-
hasFileChip ? /* @__PURE__ */ (0,
|
|
17748
|
+
hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17772
17749
|
"div",
|
|
17773
17750
|
{
|
|
17774
17751
|
className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
|
|
17775
17752
|
onClick: (event) => event.preventDefault(),
|
|
17776
17753
|
children: [
|
|
17777
|
-
isUrl ? /* @__PURE__ */ (0,
|
|
17754
|
+
isUrl ? /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17778
17755
|
"button",
|
|
17779
17756
|
{
|
|
17780
17757
|
type: "button",
|
|
17781
17758
|
onClick: handleDownload,
|
|
17782
17759
|
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
17760
|
children: [
|
|
17784
|
-
/* @__PURE__ */ (0,
|
|
17785
|
-
/* @__PURE__ */ (0,
|
|
17761
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
17762
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react51.Download, { size: 15 })
|
|
17786
17763
|
]
|
|
17787
17764
|
}
|
|
17788
|
-
) : /* @__PURE__ */ (0,
|
|
17789
|
-
/* @__PURE__ */ (0,
|
|
17765
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
17766
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17790
17767
|
"button",
|
|
17791
17768
|
{
|
|
17792
17769
|
type: "button",
|
|
@@ -17794,17 +17771,17 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17794
17771
|
onClick: handleClear,
|
|
17795
17772
|
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
17773
|
"aria-label": t("remove_file"),
|
|
17797
|
-
children: /* @__PURE__ */ (0,
|
|
17774
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react51.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17798
17775
|
}
|
|
17799
17776
|
)
|
|
17800
17777
|
]
|
|
17801
17778
|
}
|
|
17802
|
-
) : /* @__PURE__ */ (0,
|
|
17803
|
-
/* @__PURE__ */ (0,
|
|
17779
|
+
) : /* @__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 ?? "" }),
|
|
17780
|
+
/* @__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
17781
|
]
|
|
17805
17782
|
}
|
|
17806
17783
|
),
|
|
17807
|
-
/* @__PURE__ */ (0,
|
|
17784
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17808
17785
|
Fieldset,
|
|
17809
17786
|
{
|
|
17810
17787
|
isFocused: false,
|
|
@@ -17822,9 +17799,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17822
17799
|
}
|
|
17823
17800
|
)
|
|
17824
17801
|
] }),
|
|
17825
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
17826
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
17827
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
17802
|
+
!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") }),
|
|
17803
|
+
!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 }),
|
|
17804
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17828
17805
|
FieldErrorMessage,
|
|
17829
17806
|
{
|
|
17830
17807
|
id: errorId,
|
|
@@ -17839,10 +17816,10 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17839
17816
|
});
|
|
17840
17817
|
|
|
17841
17818
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17842
|
-
var
|
|
17843
|
-
var
|
|
17819
|
+
var React70 = __toESM(require("react"), 1);
|
|
17820
|
+
var import_jsx_runtime180 = require("react/jsx-runtime");
|
|
17844
17821
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17845
|
-
var SelectIconsBox =
|
|
17822
|
+
var SelectIconsBox = React70.forwardRef(
|
|
17846
17823
|
function SelectIconsBox2({
|
|
17847
17824
|
children,
|
|
17848
17825
|
icons,
|
|
@@ -17857,10 +17834,10 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17857
17834
|
className,
|
|
17858
17835
|
boxClassName
|
|
17859
17836
|
}, ref) {
|
|
17860
|
-
const containerRef =
|
|
17837
|
+
const containerRef = React70.useRef(null);
|
|
17861
17838
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17862
17839
|
const isControlled = controlledOpen !== void 0;
|
|
17863
|
-
const [internalOpen, setInternalOpen] =
|
|
17840
|
+
const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
|
|
17864
17841
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17865
17842
|
const setOpen = (next) => {
|
|
17866
17843
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17886,7 +17863,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17886
17863
|
);
|
|
17887
17864
|
focusable?.focus();
|
|
17888
17865
|
};
|
|
17889
|
-
return /* @__PURE__ */ (0,
|
|
17866
|
+
return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
|
|
17890
17867
|
"div",
|
|
17891
17868
|
{
|
|
17892
17869
|
ref: combinedContainerRef,
|
|
@@ -17896,7 +17873,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17896
17873
|
className: cn("relative inline-block outline-none", className),
|
|
17897
17874
|
children: [
|
|
17898
17875
|
children,
|
|
17899
|
-
isOpen && /* @__PURE__ */ (0,
|
|
17876
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
17900
17877
|
"div",
|
|
17901
17878
|
{
|
|
17902
17879
|
className: cn(
|
|
@@ -17907,7 +17884,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17907
17884
|
boxClassName
|
|
17908
17885
|
),
|
|
17909
17886
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
17910
|
-
children: icons.map((iconName) => /* @__PURE__ */ (0,
|
|
17887
|
+
children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
17911
17888
|
"button",
|
|
17912
17889
|
{
|
|
17913
17890
|
type: "button",
|
|
@@ -17990,14 +17967,14 @@ function getErrorMessage(error) {
|
|
|
17990
17967
|
|
|
17991
17968
|
// src/lib/toastResponseError.tsx
|
|
17992
17969
|
var import_i18next = __toESM(require("i18next"), 1);
|
|
17993
|
-
var
|
|
17970
|
+
var import_jsx_runtime181 = require("react/jsx-runtime");
|
|
17994
17971
|
function addSupportEmailToMessage(message, prefixText) {
|
|
17995
17972
|
if (typeof message !== "string") {
|
|
17996
17973
|
return message;
|
|
17997
17974
|
}
|
|
17998
17975
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
17999
|
-
return /* @__PURE__ */ (0,
|
|
18000
|
-
/* @__PURE__ */ (0,
|
|
17976
|
+
return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { children: [
|
|
17977
|
+
/* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { children: builtMessage }),
|
|
18001
17978
|
import_i18next.default.t("reach_us_at_email")
|
|
18002
17979
|
] });
|
|
18003
17980
|
}
|
|
@@ -18012,13 +17989,13 @@ function toastResponseError(error, options = {}) {
|
|
|
18012
17989
|
}
|
|
18013
17990
|
|
|
18014
17991
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
18015
|
-
var
|
|
18016
|
-
var
|
|
18017
|
-
var LegacyTextarea = (0,
|
|
17992
|
+
var import_react90 = require("react");
|
|
17993
|
+
var import_jsx_runtime182 = require("react/jsx-runtime");
|
|
17994
|
+
var LegacyTextarea = (0, import_react90.forwardRef)(
|
|
18018
17995
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
18019
|
-
const inputId = (0,
|
|
18020
|
-
return /* @__PURE__ */ (0,
|
|
18021
|
-
/* @__PURE__ */ (0,
|
|
17996
|
+
const inputId = (0, import_react90.useId)();
|
|
17997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: cn("relative", className), children: [
|
|
17998
|
+
/* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
|
|
18022
17999
|
"textarea",
|
|
18023
18000
|
{
|
|
18024
18001
|
ref,
|
|
@@ -18034,7 +18011,7 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18034
18011
|
...textareaProps
|
|
18035
18012
|
}
|
|
18036
18013
|
),
|
|
18037
|
-
label && /* @__PURE__ */ (0,
|
|
18014
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
|
|
18038
18015
|
"label",
|
|
18039
18016
|
{
|
|
18040
18017
|
htmlFor: inputId,
|
|
@@ -18052,15 +18029,15 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18052
18029
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
18053
18030
|
|
|
18054
18031
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18055
|
-
var
|
|
18032
|
+
var React72 = __toESM(require("react"), 1);
|
|
18056
18033
|
var import_lucide_react53 = require("lucide-react");
|
|
18057
18034
|
|
|
18058
18035
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
18059
|
-
var
|
|
18036
|
+
var React71 = __toESM(require("react"), 1);
|
|
18060
18037
|
var import_lucide_react52 = require("lucide-react");
|
|
18061
18038
|
var import_react_i18next43 = require("react-i18next");
|
|
18062
|
-
var
|
|
18063
|
-
var AirbnbFieldTrigger =
|
|
18039
|
+
var import_jsx_runtime183 = require("react/jsx-runtime");
|
|
18040
|
+
var AirbnbFieldTrigger = React71.forwardRef(
|
|
18064
18041
|
({
|
|
18065
18042
|
as = "button",
|
|
18066
18043
|
id,
|
|
@@ -18096,14 +18073,14 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18096
18073
|
const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
|
|
18097
18074
|
const visibleLabelText = labelText ?? label;
|
|
18098
18075
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
18099
|
-
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0,
|
|
18100
|
-
/* @__PURE__ */ (0,
|
|
18101
|
-
optionalLabel && /* @__PURE__ */ (0,
|
|
18076
|
+
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: [
|
|
18077
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsx)("span", { className: "min-w-0 truncate", children: visibleLabelText }),
|
|
18078
|
+
optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "text-current opacity-70 lowercase", children: [
|
|
18102
18079
|
"(",
|
|
18103
18080
|
optionalLabel,
|
|
18104
18081
|
")"
|
|
18105
18082
|
] }),
|
|
18106
|
-
tooltip && /* @__PURE__ */ (0,
|
|
18083
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18107
18084
|
HelpTooltip,
|
|
18108
18085
|
{
|
|
18109
18086
|
content: tooltip,
|
|
@@ -18118,9 +18095,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18118
18095
|
const hasInvalidState = Boolean(error);
|
|
18119
18096
|
const errorMessage = typeof error === "string" ? error : void 0;
|
|
18120
18097
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18121
|
-
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0,
|
|
18098
|
+
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "flex items-center gap-2", children: [
|
|
18122
18099
|
trailingAdornment,
|
|
18123
|
-
loading && /* @__PURE__ */ (0,
|
|
18100
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18124
18101
|
import_lucide_react52.Loader2,
|
|
18125
18102
|
{
|
|
18126
18103
|
"aria-hidden": "true",
|
|
@@ -18136,8 +18113,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18136
18113
|
disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
|
|
18137
18114
|
className
|
|
18138
18115
|
);
|
|
18139
|
-
const sharedContent = /* @__PURE__ */ (0,
|
|
18140
|
-
/* @__PURE__ */ (0,
|
|
18116
|
+
const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(import_jsx_runtime183.Fragment, { children: [
|
|
18117
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(
|
|
18141
18118
|
"span",
|
|
18142
18119
|
{
|
|
18143
18120
|
className: cn(
|
|
@@ -18146,7 +18123,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18146
18123
|
contentClassName
|
|
18147
18124
|
),
|
|
18148
18125
|
children: [
|
|
18149
|
-
/* @__PURE__ */ (0,
|
|
18126
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18150
18127
|
"span",
|
|
18151
18128
|
{
|
|
18152
18129
|
id: labelId,
|
|
@@ -18159,7 +18136,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18159
18136
|
children: animatedLabel
|
|
18160
18137
|
}
|
|
18161
18138
|
),
|
|
18162
|
-
children ? children : hasValue ? /* @__PURE__ */ (0,
|
|
18139
|
+
children ? children : hasValue ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18163
18140
|
"span",
|
|
18164
18141
|
{
|
|
18165
18142
|
id: valueId,
|
|
@@ -18170,11 +18147,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18170
18147
|
),
|
|
18171
18148
|
children: valueText
|
|
18172
18149
|
}
|
|
18173
|
-
) : /* @__PURE__ */ (0,
|
|
18150
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
18174
18151
|
]
|
|
18175
18152
|
}
|
|
18176
18153
|
),
|
|
18177
|
-
resolvedTrailingAdornment && /* @__PURE__ */ (0,
|
|
18154
|
+
resolvedTrailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18178
18155
|
"span",
|
|
18179
18156
|
{
|
|
18180
18157
|
"aria-hidden": "true",
|
|
@@ -18183,9 +18160,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18183
18160
|
}
|
|
18184
18161
|
)
|
|
18185
18162
|
] });
|
|
18186
|
-
return /* @__PURE__ */ (0,
|
|
18187
|
-
topLabel && /* @__PURE__ */ (0,
|
|
18188
|
-
as === "button" ? /* @__PURE__ */ (0,
|
|
18163
|
+
return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { className: "w-full", children: [
|
|
18164
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
|
|
18165
|
+
as === "button" ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18189
18166
|
"button",
|
|
18190
18167
|
{
|
|
18191
18168
|
id,
|
|
@@ -18202,7 +18179,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18202
18179
|
...props,
|
|
18203
18180
|
children: sharedContent
|
|
18204
18181
|
}
|
|
18205
|
-
) : /* @__PURE__ */ (0,
|
|
18182
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18206
18183
|
"div",
|
|
18207
18184
|
{
|
|
18208
18185
|
id,
|
|
@@ -18219,16 +18196,16 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18219
18196
|
children: sharedContent
|
|
18220
18197
|
}
|
|
18221
18198
|
),
|
|
18222
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
18199
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
18223
18200
|
] });
|
|
18224
18201
|
}
|
|
18225
18202
|
);
|
|
18226
18203
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
18227
18204
|
|
|
18228
18205
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18229
|
-
var
|
|
18206
|
+
var import_jsx_runtime184 = require("react/jsx-runtime");
|
|
18230
18207
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18231
|
-
var AirbnbDatePicker =
|
|
18208
|
+
var AirbnbDatePicker = React72.forwardRef(
|
|
18232
18209
|
({
|
|
18233
18210
|
label,
|
|
18234
18211
|
topLabel,
|
|
@@ -18253,24 +18230,24 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18253
18230
|
formatValue = formatDateValue
|
|
18254
18231
|
}, ref) => {
|
|
18255
18232
|
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 =
|
|
18233
|
+
const [isOpen, setIsOpen] = React72.useState(false);
|
|
18234
|
+
const triggerId = React72.useId();
|
|
18235
|
+
const pickerId = React72.useId();
|
|
18236
|
+
const labelId = React72.useId();
|
|
18237
|
+
const valueId = React72.useId();
|
|
18238
|
+
const helperTextId = React72.useId();
|
|
18239
|
+
const errorId = React72.useId();
|
|
18240
|
+
const internalRef = React72.useRef(null);
|
|
18264
18241
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18265
|
-
const monthLabels =
|
|
18266
|
-
const resolvedMinDate =
|
|
18267
|
-
const resolvedMaxDate =
|
|
18268
|
-
const normalizedValue =
|
|
18269
|
-
const normalizedDefaultValue =
|
|
18242
|
+
const monthLabels = React72.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18243
|
+
const resolvedMinDate = React72.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18244
|
+
const resolvedMaxDate = React72.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18245
|
+
const normalizedValue = React72.useMemo(() => normalizeDateValue(value), [value]);
|
|
18246
|
+
const normalizedDefaultValue = React72.useMemo(
|
|
18270
18247
|
() => normalizeDateValue(defaultValue),
|
|
18271
18248
|
[defaultValue]
|
|
18272
18249
|
);
|
|
18273
|
-
const resolvedValue =
|
|
18250
|
+
const resolvedValue = React72.useMemo(
|
|
18274
18251
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18275
18252
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18276
18253
|
);
|
|
@@ -18301,7 +18278,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18301
18278
|
minDate: resolvedMinDate,
|
|
18302
18279
|
maxDate: resolvedMaxDate
|
|
18303
18280
|
});
|
|
18304
|
-
const handleOpenChange =
|
|
18281
|
+
const handleOpenChange = React72.useCallback(
|
|
18305
18282
|
(nextOpen) => {
|
|
18306
18283
|
if (isBlocked && nextOpen) return;
|
|
18307
18284
|
setIsOpen(nextOpen);
|
|
@@ -18311,7 +18288,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18311
18288
|
},
|
|
18312
18289
|
[isBlocked]
|
|
18313
18290
|
);
|
|
18314
|
-
const handleDone =
|
|
18291
|
+
const handleDone = React72.useCallback(() => {
|
|
18315
18292
|
if (isBlocked) return;
|
|
18316
18293
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18317
18294
|
handleOpenChange(false);
|
|
@@ -18323,11 +18300,11 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18323
18300
|
resolvedMaxDate,
|
|
18324
18301
|
resolvedMinDate
|
|
18325
18302
|
]);
|
|
18326
|
-
const handleTriggerClick =
|
|
18303
|
+
const handleTriggerClick = React72.useCallback(() => {
|
|
18327
18304
|
if (isBlocked) return;
|
|
18328
18305
|
setIsOpen(true);
|
|
18329
18306
|
}, [isBlocked]);
|
|
18330
|
-
const handleTriggerKeyDown =
|
|
18307
|
+
const handleTriggerKeyDown = React72.useCallback(
|
|
18331
18308
|
(event) => {
|
|
18332
18309
|
if (isBlocked) return;
|
|
18333
18310
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18337,13 +18314,13 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18337
18314
|
},
|
|
18338
18315
|
[isBlocked]
|
|
18339
18316
|
);
|
|
18340
|
-
|
|
18317
|
+
React72.useEffect(() => {
|
|
18341
18318
|
if (isBlocked) {
|
|
18342
18319
|
setIsOpen(false);
|
|
18343
18320
|
}
|
|
18344
18321
|
}, [isBlocked]);
|
|
18345
|
-
return /* @__PURE__ */ (0,
|
|
18346
|
-
name && /* @__PURE__ */ (0,
|
|
18322
|
+
return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
|
|
18323
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18347
18324
|
"input",
|
|
18348
18325
|
{
|
|
18349
18326
|
type: "hidden",
|
|
@@ -18351,7 +18328,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18351
18328
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
18352
18329
|
}
|
|
18353
18330
|
),
|
|
18354
|
-
/* @__PURE__ */ (0,
|
|
18331
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18355
18332
|
AirbnbFieldTrigger,
|
|
18356
18333
|
{
|
|
18357
18334
|
id: triggerId,
|
|
@@ -18377,10 +18354,10 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18377
18354
|
onClick: handleTriggerClick,
|
|
18378
18355
|
onKeyDown: handleTriggerKeyDown,
|
|
18379
18356
|
onBlur,
|
|
18380
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
18357
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_lucide_react53.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18381
18358
|
}
|
|
18382
18359
|
),
|
|
18383
|
-
/* @__PURE__ */ (0,
|
|
18360
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18384
18361
|
AirbnbDatePickerContent,
|
|
18385
18362
|
{
|
|
18386
18363
|
baseId: pickerId,
|
|
@@ -18414,12 +18391,12 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18414
18391
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18415
18392
|
|
|
18416
18393
|
// src/airbnb-fields/input/Input.tsx
|
|
18417
|
-
var
|
|
18394
|
+
var React73 = __toESM(require("react"), 1);
|
|
18418
18395
|
var import_lucide_react54 = require("lucide-react");
|
|
18419
18396
|
var import_react_i18next44 = require("react-i18next");
|
|
18420
|
-
var
|
|
18397
|
+
var import_jsx_runtime185 = require("react/jsx-runtime");
|
|
18421
18398
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18422
|
-
var AirbnbInput =
|
|
18399
|
+
var AirbnbInput = React73.forwardRef(
|
|
18423
18400
|
({
|
|
18424
18401
|
label,
|
|
18425
18402
|
topLabel,
|
|
@@ -18448,16 +18425,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18448
18425
|
...props
|
|
18449
18426
|
}, ref) => {
|
|
18450
18427
|
const { t } = (0, import_react_i18next44.useTranslation)();
|
|
18451
|
-
const generatedId =
|
|
18452
|
-
const inputRef =
|
|
18428
|
+
const generatedId = React73.useId();
|
|
18429
|
+
const inputRef = React73.useRef(null);
|
|
18453
18430
|
const inputId = id ?? generatedId;
|
|
18454
18431
|
const fieldId = `${inputId}-field`;
|
|
18455
18432
|
const labelId = `${inputId}-label`;
|
|
18456
18433
|
const errorId = `${inputId}-error`;
|
|
18457
18434
|
const accessibleLabel = placeholder ?? label;
|
|
18458
|
-
const [isFocused, setIsFocused] =
|
|
18459
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18460
|
-
const [currentValue, setCurrentValue] =
|
|
18435
|
+
const [isFocused, setIsFocused] = React73.useState(false);
|
|
18436
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React73.useState(false);
|
|
18437
|
+
const [currentValue, setCurrentValue] = React73.useState(
|
|
18461
18438
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18462
18439
|
);
|
|
18463
18440
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18470,16 +18447,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18470
18447
|
const triggerError = error ?? invalid;
|
|
18471
18448
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18472
18449
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18473
|
-
|
|
18450
|
+
React73.useLayoutEffect(() => {
|
|
18474
18451
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18475
18452
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18476
18453
|
}, [value]);
|
|
18477
|
-
|
|
18454
|
+
React73.useEffect(() => {
|
|
18478
18455
|
if (!isPasswordInput) {
|
|
18479
18456
|
setIsPasswordRevealed(false);
|
|
18480
18457
|
}
|
|
18481
18458
|
}, [isPasswordInput]);
|
|
18482
|
-
const setRefs =
|
|
18459
|
+
const setRefs = React73.useCallback(
|
|
18483
18460
|
(node) => {
|
|
18484
18461
|
inputRef.current = node;
|
|
18485
18462
|
if (node && value == null) {
|
|
@@ -18512,7 +18489,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18512
18489
|
const togglePasswordReveal = () => {
|
|
18513
18490
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18514
18491
|
};
|
|
18515
|
-
return /* @__PURE__ */ (0,
|
|
18492
|
+
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
18493
|
AirbnbFieldTrigger,
|
|
18517
18494
|
{
|
|
18518
18495
|
as: "div",
|
|
@@ -18541,7 +18518,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18541
18518
|
forceLabelText: hasLabelMeta,
|
|
18542
18519
|
hideErrorMessage: !renderErrorMessage,
|
|
18543
18520
|
children: [
|
|
18544
|
-
/* @__PURE__ */ (0,
|
|
18521
|
+
/* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18545
18522
|
"input",
|
|
18546
18523
|
{
|
|
18547
18524
|
...props,
|
|
@@ -18571,7 +18548,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18571
18548
|
)
|
|
18572
18549
|
}
|
|
18573
18550
|
),
|
|
18574
|
-
shouldShowPasswordReveal && /* @__PURE__ */ (0,
|
|
18551
|
+
shouldShowPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18575
18552
|
"button",
|
|
18576
18553
|
{
|
|
18577
18554
|
type: "button",
|
|
@@ -18579,7 +18556,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18579
18556
|
disabled: isBlocked,
|
|
18580
18557
|
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
18558
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18582
|
-
children: /* @__PURE__ */ (0,
|
|
18559
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18583
18560
|
import_lucide_react54.Eye,
|
|
18584
18561
|
{
|
|
18585
18562
|
size: 18,
|
|
@@ -18597,14 +18574,14 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18597
18574
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18598
18575
|
|
|
18599
18576
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18600
|
-
var
|
|
18577
|
+
var React79 = __toESM(require("react"), 1);
|
|
18601
18578
|
var import_lucide_react56 = require("lucide-react");
|
|
18602
18579
|
|
|
18603
18580
|
// src/airbnb-fields/select/Select.tsx
|
|
18604
|
-
var
|
|
18581
|
+
var React78 = __toESM(require("react"), 1);
|
|
18605
18582
|
|
|
18606
18583
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18607
|
-
var
|
|
18584
|
+
var import_jsx_runtime186 = require("react/jsx-runtime");
|
|
18608
18585
|
function AirbnbSelectDesktopMenu({
|
|
18609
18586
|
id,
|
|
18610
18587
|
options,
|
|
@@ -18623,7 +18600,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18623
18600
|
noOptionsMessage
|
|
18624
18601
|
}) {
|
|
18625
18602
|
const emptyMessage = noOptionsMessage?.();
|
|
18626
|
-
return /* @__PURE__ */ (0,
|
|
18603
|
+
return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
|
|
18627
18604
|
"div",
|
|
18628
18605
|
{
|
|
18629
18606
|
id,
|
|
@@ -18636,12 +18613,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18636
18613
|
onKeyDown,
|
|
18637
18614
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18638
18615
|
children: [
|
|
18639
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
18616
|
+
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
18617
|
options.map((option, index) => {
|
|
18641
18618
|
const isSelected = selectedValue?.value === option.value;
|
|
18642
18619
|
const isHighlighted = index === highlightedIndex;
|
|
18643
18620
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18644
|
-
return /* @__PURE__ */ (0,
|
|
18621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
|
|
18645
18622
|
"button",
|
|
18646
18623
|
{
|
|
18647
18624
|
id: getOptionId2(index),
|
|
@@ -18673,7 +18650,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18673
18650
|
}
|
|
18674
18651
|
|
|
18675
18652
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18676
|
-
var
|
|
18653
|
+
var import_jsx_runtime187 = require("react/jsx-runtime");
|
|
18677
18654
|
function AirbnbSelectDesktopContent({
|
|
18678
18655
|
isOpen,
|
|
18679
18656
|
listboxId,
|
|
@@ -18694,14 +18671,14 @@ function AirbnbSelectDesktopContent({
|
|
|
18694
18671
|
noOptionsMessage
|
|
18695
18672
|
}) {
|
|
18696
18673
|
if (!isOpen) return null;
|
|
18697
|
-
return /* @__PURE__ */ (0,
|
|
18674
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
18698
18675
|
"div",
|
|
18699
18676
|
{
|
|
18700
18677
|
className: cn(
|
|
18701
18678
|
"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
18679
|
dropdownClassName
|
|
18703
18680
|
),
|
|
18704
|
-
children: /* @__PURE__ */ (0,
|
|
18681
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
18705
18682
|
AirbnbSelectDesktopMenu,
|
|
18706
18683
|
{
|
|
18707
18684
|
id: listboxId,
|
|
@@ -18799,7 +18776,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
18799
18776
|
}
|
|
18800
18777
|
|
|
18801
18778
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
18802
|
-
var
|
|
18779
|
+
var import_jsx_runtime188 = require("react/jsx-runtime");
|
|
18803
18780
|
function AirbnbSelectMobileWheel({
|
|
18804
18781
|
id,
|
|
18805
18782
|
options,
|
|
@@ -18818,7 +18795,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18818
18795
|
}) {
|
|
18819
18796
|
const spacerHeight2 = getWheelSpacerHeight();
|
|
18820
18797
|
const emptyMessage = noOptionsMessage?.();
|
|
18821
|
-
return /* @__PURE__ */ (0,
|
|
18798
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
|
|
18822
18799
|
"div",
|
|
18823
18800
|
{
|
|
18824
18801
|
id,
|
|
@@ -18830,10 +18807,10 @@ function AirbnbSelectMobileWheel({
|
|
|
18830
18807
|
onKeyDown,
|
|
18831
18808
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
18832
18809
|
children: [
|
|
18833
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
18834
|
-
/* @__PURE__ */ (0,
|
|
18835
|
-
/* @__PURE__ */ (0,
|
|
18836
|
-
/* @__PURE__ */ (0,
|
|
18810
|
+
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,
|
|
18811
|
+
/* @__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" }),
|
|
18812
|
+
/* @__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" }),
|
|
18813
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
18837
18814
|
"div",
|
|
18838
18815
|
{
|
|
18839
18816
|
"aria-hidden": true,
|
|
@@ -18843,7 +18820,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18843
18820
|
)
|
|
18844
18821
|
}
|
|
18845
18822
|
),
|
|
18846
|
-
/* @__PURE__ */ (0,
|
|
18823
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
|
|
18847
18824
|
"div",
|
|
18848
18825
|
{
|
|
18849
18826
|
ref: listRef,
|
|
@@ -18858,11 +18835,11 @@ function AirbnbSelectMobileWheel({
|
|
|
18858
18835
|
WebkitOverflowScrolling: "touch"
|
|
18859
18836
|
},
|
|
18860
18837
|
children: [
|
|
18861
|
-
/* @__PURE__ */ (0,
|
|
18838
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
|
|
18862
18839
|
options.map((option, index) => {
|
|
18863
18840
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
18864
18841
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18865
|
-
return /* @__PURE__ */ (0,
|
|
18842
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
18866
18843
|
"button",
|
|
18867
18844
|
{
|
|
18868
18845
|
id: getOptionId2(index),
|
|
@@ -18883,7 +18860,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18883
18860
|
optionKey
|
|
18884
18861
|
);
|
|
18885
18862
|
}),
|
|
18886
|
-
/* @__PURE__ */ (0,
|
|
18863
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { style: { height: `${spacerHeight2}px` } })
|
|
18887
18864
|
]
|
|
18888
18865
|
}
|
|
18889
18866
|
)
|
|
@@ -18893,7 +18870,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18893
18870
|
}
|
|
18894
18871
|
|
|
18895
18872
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
18896
|
-
var
|
|
18873
|
+
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
18897
18874
|
function AirbnbSelectMobileContent({
|
|
18898
18875
|
open,
|
|
18899
18876
|
onOpenChange,
|
|
@@ -18917,11 +18894,11 @@ function AirbnbSelectMobileContent({
|
|
|
18917
18894
|
getOptionId: getOptionId2,
|
|
18918
18895
|
noOptionsMessage
|
|
18919
18896
|
}) {
|
|
18920
|
-
return /* @__PURE__ */ (0,
|
|
18921
|
-
/* @__PURE__ */ (0,
|
|
18922
|
-
/* @__PURE__ */ (0,
|
|
18923
|
-
/* @__PURE__ */ (0,
|
|
18924
|
-
/* @__PURE__ */ (0,
|
|
18897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
|
|
18898
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
18899
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
18900
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
|
|
18901
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
18925
18902
|
AirbnbSelectMobileWheel,
|
|
18926
18903
|
{
|
|
18927
18904
|
id: listboxId,
|
|
@@ -18940,16 +18917,16 @@ function AirbnbSelectMobileContent({
|
|
|
18940
18917
|
noOptionsMessage
|
|
18941
18918
|
}
|
|
18942
18919
|
),
|
|
18943
|
-
/* @__PURE__ */ (0,
|
|
18920
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
18944
18921
|
] })
|
|
18945
18922
|
] }) });
|
|
18946
18923
|
}
|
|
18947
18924
|
|
|
18948
18925
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18949
|
-
var
|
|
18926
|
+
var React74 = __toESM(require("react"), 1);
|
|
18950
18927
|
var import_lucide_react55 = require("lucide-react");
|
|
18951
|
-
var
|
|
18952
|
-
var AirbnbSelectTrigger =
|
|
18928
|
+
var import_jsx_runtime190 = require("react/jsx-runtime");
|
|
18929
|
+
var AirbnbSelectTrigger = React74.forwardRef(
|
|
18953
18930
|
({
|
|
18954
18931
|
id,
|
|
18955
18932
|
open,
|
|
@@ -18973,7 +18950,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18973
18950
|
onKeyDown,
|
|
18974
18951
|
onBlur
|
|
18975
18952
|
}, ref) => {
|
|
18976
|
-
return /* @__PURE__ */ (0,
|
|
18953
|
+
return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
18977
18954
|
AirbnbFieldTrigger,
|
|
18978
18955
|
{
|
|
18979
18956
|
id,
|
|
@@ -19001,7 +18978,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
19001
18978
|
onClick,
|
|
19002
18979
|
onKeyDown,
|
|
19003
18980
|
onBlur,
|
|
19004
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
18981
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
19005
18982
|
import_lucide_react55.ChevronDown,
|
|
19006
18983
|
{
|
|
19007
18984
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
@@ -19014,7 +18991,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
19014
18991
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
19015
18992
|
|
|
19016
18993
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
19017
|
-
var
|
|
18994
|
+
var React75 = __toESM(require("react"), 1);
|
|
19018
18995
|
function useDesktopSelect({
|
|
19019
18996
|
isMobile: isMobile3,
|
|
19020
18997
|
isOpen,
|
|
@@ -19023,12 +19000,12 @@ function useDesktopSelect({
|
|
|
19023
19000
|
disabled,
|
|
19024
19001
|
onChange
|
|
19025
19002
|
}) {
|
|
19026
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19027
|
-
const triggerRef =
|
|
19028
|
-
const listRef =
|
|
19029
|
-
const optionRefs =
|
|
19003
|
+
const [highlightedIndex, setHighlightedIndex] = React75.useState(-1);
|
|
19004
|
+
const triggerRef = React75.useRef(null);
|
|
19005
|
+
const listRef = React75.useRef(null);
|
|
19006
|
+
const optionRefs = React75.useRef([]);
|
|
19030
19007
|
const selectedIndex = getOptionIndex2(options, value);
|
|
19031
|
-
|
|
19008
|
+
React75.useEffect(() => {
|
|
19032
19009
|
if (!isOpen || isMobile3) return;
|
|
19033
19010
|
setHighlightedIndex((currentIndex) => {
|
|
19034
19011
|
if (currentIndex >= 0) {
|
|
@@ -19043,34 +19020,34 @@ function useDesktopSelect({
|
|
|
19043
19020
|
window.cancelAnimationFrame(frameId);
|
|
19044
19021
|
};
|
|
19045
19022
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
19046
|
-
|
|
19023
|
+
React75.useEffect(() => {
|
|
19047
19024
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
19048
19025
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
19049
19026
|
block: "nearest"
|
|
19050
19027
|
});
|
|
19051
19028
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
19052
|
-
|
|
19029
|
+
React75.useEffect(() => {
|
|
19053
19030
|
if (isOpen) return;
|
|
19054
19031
|
setHighlightedIndex(-1);
|
|
19055
19032
|
}, [isOpen]);
|
|
19056
|
-
const focusTrigger =
|
|
19033
|
+
const focusTrigger = React75.useCallback(() => {
|
|
19057
19034
|
triggerRef.current?.focus();
|
|
19058
19035
|
}, []);
|
|
19059
|
-
const handleSelect =
|
|
19036
|
+
const handleSelect = React75.useCallback(
|
|
19060
19037
|
(option) => {
|
|
19061
19038
|
if (option.isDisabled || disabled) return;
|
|
19062
19039
|
onChange?.(option);
|
|
19063
19040
|
},
|
|
19064
19041
|
[disabled, onChange]
|
|
19065
19042
|
);
|
|
19066
|
-
const openMenu =
|
|
19043
|
+
const openMenu = React75.useCallback(
|
|
19067
19044
|
(targetIndex) => {
|
|
19068
19045
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19069
19046
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
19070
19047
|
},
|
|
19071
19048
|
[options, selectedIndex]
|
|
19072
19049
|
);
|
|
19073
|
-
const handleTriggerKeyDown =
|
|
19050
|
+
const handleTriggerKeyDown = React75.useCallback(
|
|
19074
19051
|
(event, onOpen) => {
|
|
19075
19052
|
if (disabled) return;
|
|
19076
19053
|
if (event.key === "ArrowDown") {
|
|
@@ -19095,7 +19072,7 @@ function useDesktopSelect({
|
|
|
19095
19072
|
},
|
|
19096
19073
|
[disabled, openMenu, options, selectedIndex]
|
|
19097
19074
|
);
|
|
19098
|
-
const handleMenuKeyDown =
|
|
19075
|
+
const handleMenuKeyDown = React75.useCallback(
|
|
19099
19076
|
(event, onClose) => {
|
|
19100
19077
|
if (event.key === "Escape") {
|
|
19101
19078
|
event.preventDefault();
|
|
@@ -19145,7 +19122,7 @@ function useDesktopSelect({
|
|
|
19145
19122
|
},
|
|
19146
19123
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
19147
19124
|
);
|
|
19148
|
-
const setOptionRef =
|
|
19125
|
+
const setOptionRef = React75.useCallback(
|
|
19149
19126
|
(index, node) => {
|
|
19150
19127
|
optionRefs.current[index] = node;
|
|
19151
19128
|
},
|
|
@@ -19165,23 +19142,23 @@ function useDesktopSelect({
|
|
|
19165
19142
|
}
|
|
19166
19143
|
|
|
19167
19144
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19168
|
-
var
|
|
19145
|
+
var React76 = __toESM(require("react"), 1);
|
|
19169
19146
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19170
|
-
const [pendingValue, setPendingValue] =
|
|
19147
|
+
const [pendingValue, setPendingValue] = React76.useState(
|
|
19171
19148
|
value ?? null
|
|
19172
19149
|
);
|
|
19173
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19174
|
-
const mobileListRef =
|
|
19175
|
-
const scrollSettleTimeoutRef =
|
|
19176
|
-
const scrollAnimationFrameRef =
|
|
19177
|
-
const getTargetIndex =
|
|
19150
|
+
const [mobileScrollTop, setMobileScrollTop] = React76.useState(0);
|
|
19151
|
+
const mobileListRef = React76.useRef(null);
|
|
19152
|
+
const scrollSettleTimeoutRef = React76.useRef(null);
|
|
19153
|
+
const scrollAnimationFrameRef = React76.useRef(null);
|
|
19154
|
+
const getTargetIndex = React76.useCallback(
|
|
19178
19155
|
(targetValue) => {
|
|
19179
19156
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19180
19157
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19181
19158
|
},
|
|
19182
19159
|
[options]
|
|
19183
19160
|
);
|
|
19184
|
-
const syncScrollPosition =
|
|
19161
|
+
const syncScrollPosition = React76.useCallback(
|
|
19185
19162
|
(targetValue, behavior = "instant") => {
|
|
19186
19163
|
const targetIndex = getTargetIndex(targetValue);
|
|
19187
19164
|
if (targetIndex < 0) return;
|
|
@@ -19200,27 +19177,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19200
19177
|
},
|
|
19201
19178
|
[getTargetIndex, options]
|
|
19202
19179
|
);
|
|
19203
|
-
const clearScrollSettleTimeout =
|
|
19180
|
+
const clearScrollSettleTimeout = React76.useCallback(() => {
|
|
19204
19181
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19205
19182
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19206
19183
|
scrollSettleTimeoutRef.current = null;
|
|
19207
19184
|
}, []);
|
|
19208
|
-
const clearScrollAnimationFrame =
|
|
19185
|
+
const clearScrollAnimationFrame = React76.useCallback(() => {
|
|
19209
19186
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19210
19187
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19211
19188
|
scrollAnimationFrameRef.current = null;
|
|
19212
19189
|
}, []);
|
|
19213
|
-
|
|
19190
|
+
React76.useEffect(
|
|
19214
19191
|
() => () => {
|
|
19215
19192
|
clearScrollSettleTimeout();
|
|
19216
19193
|
clearScrollAnimationFrame();
|
|
19217
19194
|
},
|
|
19218
19195
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19219
19196
|
);
|
|
19220
|
-
|
|
19197
|
+
React76.useEffect(() => {
|
|
19221
19198
|
setPendingValue(value ?? null);
|
|
19222
19199
|
}, [value]);
|
|
19223
|
-
|
|
19200
|
+
React76.useLayoutEffect(() => {
|
|
19224
19201
|
if (!isMobile3 || !isOpen) return;
|
|
19225
19202
|
const frameId = window.requestAnimationFrame(() => {
|
|
19226
19203
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19229,7 +19206,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19229
19206
|
window.cancelAnimationFrame(frameId);
|
|
19230
19207
|
};
|
|
19231
19208
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19232
|
-
const settleScroll =
|
|
19209
|
+
const settleScroll = React76.useCallback(() => {
|
|
19233
19210
|
if (!mobileListRef.current) return;
|
|
19234
19211
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19235
19212
|
const nextOption = options[nextIndex];
|
|
@@ -19241,13 +19218,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19241
19218
|
}
|
|
19242
19219
|
setPendingValue(nextOption);
|
|
19243
19220
|
}, [options, pendingValue]);
|
|
19244
|
-
const scheduleScrollSettle =
|
|
19221
|
+
const scheduleScrollSettle = React76.useCallback(() => {
|
|
19245
19222
|
clearScrollSettleTimeout();
|
|
19246
19223
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19247
19224
|
settleScroll();
|
|
19248
19225
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19249
19226
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19250
|
-
const handleScroll =
|
|
19227
|
+
const handleScroll = React76.useCallback(() => {
|
|
19251
19228
|
if (!mobileListRef.current) return;
|
|
19252
19229
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19253
19230
|
clearScrollAnimationFrame();
|
|
@@ -19257,7 +19234,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19257
19234
|
});
|
|
19258
19235
|
scheduleScrollSettle();
|
|
19259
19236
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19260
|
-
const focusOptionByIndex =
|
|
19237
|
+
const focusOptionByIndex = React76.useCallback(
|
|
19261
19238
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19262
19239
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19263
19240
|
const option = options[index];
|
|
@@ -19275,7 +19252,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19275
19252
|
},
|
|
19276
19253
|
[options, scheduleScrollSettle]
|
|
19277
19254
|
);
|
|
19278
|
-
const handleOptionClick =
|
|
19255
|
+
const handleOptionClick = React76.useCallback(
|
|
19279
19256
|
(option) => {
|
|
19280
19257
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19281
19258
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19284,7 +19261,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19284
19261
|
},
|
|
19285
19262
|
[disabled, focusOptionByIndex, options]
|
|
19286
19263
|
);
|
|
19287
|
-
const moveByStep =
|
|
19264
|
+
const moveByStep = React76.useCallback(
|
|
19288
19265
|
(step) => {
|
|
19289
19266
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19290
19267
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19296,7 +19273,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19296
19273
|
},
|
|
19297
19274
|
[focusOptionByIndex, options, pendingValue]
|
|
19298
19275
|
);
|
|
19299
|
-
const moveToBoundary =
|
|
19276
|
+
const moveToBoundary = React76.useCallback(
|
|
19300
19277
|
(boundary) => {
|
|
19301
19278
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19302
19279
|
if (targetIndex >= 0) {
|
|
@@ -19305,7 +19282,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19305
19282
|
},
|
|
19306
19283
|
[focusOptionByIndex, options]
|
|
19307
19284
|
);
|
|
19308
|
-
const syncPendingValue =
|
|
19285
|
+
const syncPendingValue = React76.useCallback(
|
|
19309
19286
|
(nextValue) => {
|
|
19310
19287
|
const normalizedValue = nextValue ?? null;
|
|
19311
19288
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19333,9 +19310,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19333
19310
|
}
|
|
19334
19311
|
|
|
19335
19312
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19336
|
-
var
|
|
19313
|
+
var React77 = __toESM(require("react"), 1);
|
|
19337
19314
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19338
|
-
const reactId =
|
|
19315
|
+
const reactId = React77.useId().replace(/:/g, "");
|
|
19339
19316
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19340
19317
|
const triggerId = `${baseId}-trigger`;
|
|
19341
19318
|
const labelId = `${baseId}-label`;
|
|
@@ -19345,7 +19322,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19345
19322
|
const listboxId = `${baseId}-listbox`;
|
|
19346
19323
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19347
19324
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19348
|
-
const getOptionId2 =
|
|
19325
|
+
const getOptionId2 = React77.useCallback(
|
|
19349
19326
|
(index) => `${baseId}-option-${index}`,
|
|
19350
19327
|
[baseId]
|
|
19351
19328
|
);
|
|
@@ -19363,8 +19340,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19363
19340
|
}
|
|
19364
19341
|
|
|
19365
19342
|
// src/airbnb-fields/select/Select.tsx
|
|
19366
|
-
var
|
|
19367
|
-
var AirbnbSelect =
|
|
19343
|
+
var import_jsx_runtime191 = require("react/jsx-runtime");
|
|
19344
|
+
var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
19368
19345
|
options = [],
|
|
19369
19346
|
value,
|
|
19370
19347
|
onChange,
|
|
@@ -19391,8 +19368,8 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19391
19368
|
filterOption
|
|
19392
19369
|
}, ref) {
|
|
19393
19370
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19394
|
-
const [isOpen, setIsOpen] =
|
|
19395
|
-
const containerRef =
|
|
19371
|
+
const [isOpen, setIsOpen] = React78.useState(false);
|
|
19372
|
+
const containerRef = React78.useRef(null);
|
|
19396
19373
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19397
19374
|
const hasValue = Boolean(value);
|
|
19398
19375
|
const helperText = placeholder ?? label;
|
|
@@ -19454,12 +19431,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19454
19431
|
onOutsideClick: () => setIsOpen(false),
|
|
19455
19432
|
isDisabled: !isOpen || isMobile3
|
|
19456
19433
|
});
|
|
19457
|
-
|
|
19434
|
+
React78.useEffect(() => {
|
|
19458
19435
|
if (isBlocked) {
|
|
19459
19436
|
setIsOpen(false);
|
|
19460
19437
|
}
|
|
19461
19438
|
}, [isBlocked]);
|
|
19462
|
-
|
|
19439
|
+
React78.useEffect(
|
|
19463
19440
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19464
19441
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19465
19442
|
return;
|
|
@@ -19471,7 +19448,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19471
19448
|
},
|
|
19472
19449
|
[onChange, filteredOptions, value]
|
|
19473
19450
|
);
|
|
19474
|
-
const handleMobileOpenChange =
|
|
19451
|
+
const handleMobileOpenChange = React78.useCallback(
|
|
19475
19452
|
(nextOpen) => {
|
|
19476
19453
|
if (isBlocked && nextOpen) return;
|
|
19477
19454
|
setIsOpen(nextOpen);
|
|
@@ -19482,7 +19459,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19482
19459
|
},
|
|
19483
19460
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19484
19461
|
);
|
|
19485
|
-
const handleMobileDone =
|
|
19462
|
+
const handleMobileDone = React78.useCallback(() => {
|
|
19486
19463
|
if (isBlocked) return;
|
|
19487
19464
|
const finalOption = pendingValue;
|
|
19488
19465
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19491,7 +19468,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19491
19468
|
setIsOpen(false);
|
|
19492
19469
|
focusTrigger();
|
|
19493
19470
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19494
|
-
const handleTriggerClick =
|
|
19471
|
+
const handleTriggerClick = React78.useCallback(() => {
|
|
19495
19472
|
if (isBlocked) return;
|
|
19496
19473
|
setIsOpen((prev) => {
|
|
19497
19474
|
const nextOpen = !prev;
|
|
@@ -19544,13 +19521,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19544
19521
|
handleMobileOpenChange(false);
|
|
19545
19522
|
}
|
|
19546
19523
|
};
|
|
19547
|
-
return /* @__PURE__ */ (0,
|
|
19524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
|
|
19548
19525
|
"div",
|
|
19549
19526
|
{
|
|
19550
19527
|
ref: containerRef,
|
|
19551
19528
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19552
19529
|
children: [
|
|
19553
|
-
name && /* @__PURE__ */ (0,
|
|
19530
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19554
19531
|
renderTrigger ? renderTrigger({
|
|
19555
19532
|
id: triggerId,
|
|
19556
19533
|
open: isOpen,
|
|
@@ -19571,7 +19548,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19571
19548
|
onClick: handleTriggerClick,
|
|
19572
19549
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19573
19550
|
onBlur
|
|
19574
|
-
}) : /* @__PURE__ */ (0,
|
|
19551
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19575
19552
|
AirbnbSelectTrigger,
|
|
19576
19553
|
{
|
|
19577
19554
|
id: triggerId,
|
|
@@ -19598,7 +19575,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19598
19575
|
onBlur
|
|
19599
19576
|
}
|
|
19600
19577
|
),
|
|
19601
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
19578
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19602
19579
|
AirbnbSelectMobileContent,
|
|
19603
19580
|
{
|
|
19604
19581
|
open: isOpen,
|
|
@@ -19623,7 +19600,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19623
19600
|
getOptionId: getOptionId2,
|
|
19624
19601
|
noOptionsMessage
|
|
19625
19602
|
}
|
|
19626
|
-
) : /* @__PURE__ */ (0,
|
|
19603
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19627
19604
|
AirbnbSelectDesktopContent,
|
|
19628
19605
|
{
|
|
19629
19606
|
isOpen,
|
|
@@ -19657,13 +19634,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19657
19634
|
});
|
|
19658
19635
|
|
|
19659
19636
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19660
|
-
var
|
|
19637
|
+
var import_jsx_runtime192 = require("react/jsx-runtime");
|
|
19661
19638
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19662
19639
|
const label = String(option.label);
|
|
19663
19640
|
const value = String(option.value);
|
|
19664
19641
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19665
19642
|
}
|
|
19666
|
-
var AirbnbPhoneField =
|
|
19643
|
+
var AirbnbPhoneField = React79.forwardRef(
|
|
19667
19644
|
({
|
|
19668
19645
|
label,
|
|
19669
19646
|
topLabel,
|
|
@@ -19684,10 +19661,12 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19684
19661
|
codeName,
|
|
19685
19662
|
numberName,
|
|
19686
19663
|
mobileTitle,
|
|
19687
|
-
codePlaceholder = "+00"
|
|
19664
|
+
codePlaceholder = "+00",
|
|
19665
|
+
defaultCode
|
|
19688
19666
|
}, ref) => {
|
|
19689
|
-
const inputId =
|
|
19690
|
-
const
|
|
19667
|
+
const inputId = React79.useId();
|
|
19668
|
+
const effectiveCode = value?.code || defaultCode || "";
|
|
19669
|
+
const codeOptions = React79.useMemo(
|
|
19691
19670
|
() => options.map((option) => ({
|
|
19692
19671
|
value: option.value,
|
|
19693
19672
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19695,26 +19674,26 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19695
19674
|
})),
|
|
19696
19675
|
[options]
|
|
19697
19676
|
);
|
|
19698
|
-
const selectedCodeOption =
|
|
19699
|
-
() => codeOptions.find((option) => option.value ===
|
|
19700
|
-
[codeOptions,
|
|
19677
|
+
const selectedCodeOption = React79.useMemo(
|
|
19678
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19679
|
+
[codeOptions, effectiveCode]
|
|
19701
19680
|
);
|
|
19702
|
-
const combinedValue =
|
|
19681
|
+
const combinedValue = effectiveCode || value?.number ? `${effectiveCode}${value?.number ?? ""}` : "";
|
|
19703
19682
|
const hasInvalidState = Boolean(error) || Boolean(invalid);
|
|
19704
19683
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
19705
19684
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
19706
|
-
return /* @__PURE__ */ (0,
|
|
19707
|
-
name && /* @__PURE__ */ (0,
|
|
19708
|
-
codeName && /* @__PURE__ */ (0,
|
|
19685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
19686
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
19687
|
+
codeName && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19709
19688
|
"input",
|
|
19710
19689
|
{
|
|
19711
19690
|
type: "hidden",
|
|
19712
19691
|
name: codeName,
|
|
19713
|
-
value:
|
|
19692
|
+
value: effectiveCode,
|
|
19714
19693
|
disabled
|
|
19715
19694
|
}
|
|
19716
19695
|
),
|
|
19717
|
-
numberName && /* @__PURE__ */ (0,
|
|
19696
|
+
numberName && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19718
19697
|
"input",
|
|
19719
19698
|
{
|
|
19720
19699
|
type: "hidden",
|
|
@@ -19723,7 +19702,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19723
19702
|
disabled
|
|
19724
19703
|
}
|
|
19725
19704
|
),
|
|
19726
|
-
topLabel && /* @__PURE__ */ (0,
|
|
19705
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19727
19706
|
"label",
|
|
19728
19707
|
{
|
|
19729
19708
|
htmlFor: inputId,
|
|
@@ -19731,8 +19710,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19731
19710
|
children: topLabel
|
|
19732
19711
|
}
|
|
19733
19712
|
),
|
|
19734
|
-
/* @__PURE__ */ (0,
|
|
19735
|
-
/* @__PURE__ */ (0,
|
|
19713
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "flex items-stretch", children: [
|
|
19714
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19736
19715
|
AirbnbSelect,
|
|
19737
19716
|
{
|
|
19738
19717
|
ref,
|
|
@@ -19761,7 +19740,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19761
19740
|
onClick,
|
|
19762
19741
|
onKeyDown,
|
|
19763
19742
|
valueLabel
|
|
19764
|
-
}) => /* @__PURE__ */ (0,
|
|
19743
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
|
|
19765
19744
|
"button",
|
|
19766
19745
|
{
|
|
19767
19746
|
id,
|
|
@@ -19782,8 +19761,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19782
19761
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
19783
19762
|
),
|
|
19784
19763
|
children: [
|
|
19785
|
-
/* @__PURE__ */ (0,
|
|
19786
|
-
/* @__PURE__ */ (0,
|
|
19764
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)("span", { children: valueLabel ?? codePlaceholder }),
|
|
19765
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19787
19766
|
import_lucide_react56.ChevronDown,
|
|
19788
19767
|
{
|
|
19789
19768
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
@@ -19795,7 +19774,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19795
19774
|
)
|
|
19796
19775
|
}
|
|
19797
19776
|
),
|
|
19798
|
-
/* @__PURE__ */ (0,
|
|
19777
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19799
19778
|
AirbnbInput,
|
|
19800
19779
|
{
|
|
19801
19780
|
id: inputId,
|
|
@@ -19817,25 +19796,25 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19817
19796
|
contentClassName: "h-[40px] py-2",
|
|
19818
19797
|
inputClassName: "text-[16px] leading-7",
|
|
19819
19798
|
onChange: (event) => onChange({
|
|
19820
|
-
code:
|
|
19799
|
+
code: effectiveCode,
|
|
19821
19800
|
number: event.target.value
|
|
19822
19801
|
}),
|
|
19823
19802
|
onBlur
|
|
19824
19803
|
}
|
|
19825
19804
|
)
|
|
19826
19805
|
] }),
|
|
19827
|
-
error && /* @__PURE__ */ (0,
|
|
19806
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(FieldErrorMessage, { message: error })
|
|
19828
19807
|
] });
|
|
19829
19808
|
}
|
|
19830
19809
|
);
|
|
19831
19810
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19832
19811
|
|
|
19833
19812
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19834
|
-
var
|
|
19813
|
+
var React80 = __toESM(require("react"), 1);
|
|
19835
19814
|
var import_lucide_react57 = require("lucide-react");
|
|
19836
19815
|
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
19837
|
-
var
|
|
19838
|
-
var
|
|
19816
|
+
var import_react91 = require("react");
|
|
19817
|
+
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
19839
19818
|
var ROW_HEIGHT = 48;
|
|
19840
19819
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
19841
19820
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -19875,13 +19854,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19875
19854
|
loadingMessage
|
|
19876
19855
|
}, ref) => {
|
|
19877
19856
|
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 =
|
|
19857
|
+
const reactId = React80.useId();
|
|
19858
|
+
const [open, setOpen] = React80.useState(false);
|
|
19859
|
+
const [internalSearchValue, setInternalSearchValue] = React80.useState("");
|
|
19860
|
+
const [highlightedIndex, setHighlightedIndex] = React80.useState(-1);
|
|
19861
|
+
const containerRef = React80.useRef(null);
|
|
19862
|
+
const triggerRef = React80.useRef(null);
|
|
19863
|
+
const inputRef = React80.useRef(null);
|
|
19885
19864
|
const listboxId = `${reactId}-listbox`;
|
|
19886
19865
|
const labelId = `${reactId}-label`;
|
|
19887
19866
|
const valueId = `${reactId}-value`;
|
|
@@ -19890,13 +19869,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19890
19869
|
const searchInputId = `${reactId}-search`;
|
|
19891
19870
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19892
19871
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19893
|
-
const visibleOptions =
|
|
19872
|
+
const visibleOptions = React80.useMemo(() => {
|
|
19894
19873
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19895
19874
|
return options;
|
|
19896
19875
|
}
|
|
19897
19876
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19898
19877
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19899
|
-
const selectedIndex =
|
|
19878
|
+
const selectedIndex = React80.useMemo(
|
|
19900
19879
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19901
19880
|
[value?.value, visibleOptions]
|
|
19902
19881
|
);
|
|
@@ -19912,7 +19891,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19912
19891
|
isDisabled: !open || isMobile3
|
|
19913
19892
|
});
|
|
19914
19893
|
const handleOnOpenChange = useEvent(onOpenChange);
|
|
19915
|
-
const setSelectOpen = (0,
|
|
19894
|
+
const setSelectOpen = (0, import_react91.useCallback)(
|
|
19916
19895
|
(nextOpen, options2) => {
|
|
19917
19896
|
setOpen(nextOpen);
|
|
19918
19897
|
handleOnOpenChange?.(nextOpen);
|
|
@@ -19922,7 +19901,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19922
19901
|
},
|
|
19923
19902
|
[handleOnOpenChange]
|
|
19924
19903
|
);
|
|
19925
|
-
|
|
19904
|
+
React80.useEffect(() => {
|
|
19926
19905
|
if (isBlocked) {
|
|
19927
19906
|
setSelectOpen(false);
|
|
19928
19907
|
return;
|
|
@@ -19935,7 +19914,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19935
19914
|
window.cancelAnimationFrame(frameId);
|
|
19936
19915
|
};
|
|
19937
19916
|
}, [isBlocked, open, setSelectOpen]);
|
|
19938
|
-
|
|
19917
|
+
React80.useEffect(() => {
|
|
19939
19918
|
if (!open) {
|
|
19940
19919
|
setHighlightedIndex(-1);
|
|
19941
19920
|
return;
|
|
@@ -20003,7 +19982,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20003
19982
|
}
|
|
20004
19983
|
}
|
|
20005
19984
|
}
|
|
20006
|
-
const content = /* @__PURE__ */ (0,
|
|
19985
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20007
19986
|
AirbnbSearchableSelectContent,
|
|
20008
19987
|
{
|
|
20009
19988
|
inputId: searchInputId,
|
|
@@ -20030,10 +20009,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20030
20009
|
onOptionHover: setHighlightedIndex
|
|
20031
20010
|
}
|
|
20032
20011
|
);
|
|
20033
|
-
|
|
20034
|
-
return /* @__PURE__ */ (0,
|
|
20035
|
-
name && /* @__PURE__ */ (0,
|
|
20036
|
-
/* @__PURE__ */ (0,
|
|
20012
|
+
React80.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
20013
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
20014
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
20015
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20037
20016
|
AirbnbFieldTrigger,
|
|
20038
20017
|
{
|
|
20039
20018
|
id: `${reactId}-trigger`,
|
|
@@ -20067,7 +20046,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20067
20046
|
},
|
|
20068
20047
|
onKeyDown: handleTriggerKeyDown,
|
|
20069
20048
|
onBlur,
|
|
20070
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
20049
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20071
20050
|
import_lucide_react57.ChevronDown,
|
|
20072
20051
|
{
|
|
20073
20052
|
className: cn(
|
|
@@ -20078,7 +20057,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20078
20057
|
)
|
|
20079
20058
|
}
|
|
20080
20059
|
),
|
|
20081
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
20060
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20082
20061
|
Drawer,
|
|
20083
20062
|
{
|
|
20084
20063
|
open,
|
|
@@ -20090,13 +20069,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20090
20069
|
}
|
|
20091
20070
|
closeSelect();
|
|
20092
20071
|
},
|
|
20093
|
-
children: /* @__PURE__ */ (0,
|
|
20094
|
-
/* @__PURE__ */ (0,
|
|
20095
|
-
/* @__PURE__ */ (0,
|
|
20096
|
-
/* @__PURE__ */ (0,
|
|
20072
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
20073
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
20074
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
20075
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
20097
20076
|
] })
|
|
20098
20077
|
}
|
|
20099
|
-
) : open ? /* @__PURE__ */ (0,
|
|
20078
|
+
) : open ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20100
20079
|
"div",
|
|
20101
20080
|
{
|
|
20102
20081
|
className: cn(
|
|
@@ -20108,7 +20087,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20108
20087
|
) : null
|
|
20109
20088
|
] });
|
|
20110
20089
|
};
|
|
20111
|
-
var AirbnbSearchableSelect =
|
|
20090
|
+
var AirbnbSearchableSelect = React80.forwardRef(
|
|
20112
20091
|
AirbnbSearchableSelectInternal
|
|
20113
20092
|
);
|
|
20114
20093
|
function AirbnbSearchableSelectContent({
|
|
@@ -20135,9 +20114,9 @@ function AirbnbSearchableSelectContent({
|
|
|
20135
20114
|
onOptionClick,
|
|
20136
20115
|
onOptionHover
|
|
20137
20116
|
}) {
|
|
20138
|
-
const listRef =
|
|
20139
|
-
const lastLoadMoreOptionsLengthRef =
|
|
20140
|
-
const previousHighlightedIndexRef =
|
|
20117
|
+
const listRef = React80.useRef(null);
|
|
20118
|
+
const lastLoadMoreOptionsLengthRef = React80.useRef(null);
|
|
20119
|
+
const previousHighlightedIndexRef = React80.useRef(highlightedIndex);
|
|
20141
20120
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
20142
20121
|
const virtualizer = (0, import_react_virtual3.useVirtualizer)({
|
|
20143
20122
|
count: rowCount,
|
|
@@ -20148,7 +20127,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20148
20127
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20149
20128
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20150
20129
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20151
|
-
|
|
20130
|
+
React80.useEffect(() => {
|
|
20152
20131
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20153
20132
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20154
20133
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20156,23 +20135,23 @@ function AirbnbSearchableSelectContent({
|
|
|
20156
20135
|
onLoadMore?.();
|
|
20157
20136
|
}
|
|
20158
20137
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20159
|
-
|
|
20138
|
+
React80.useEffect(() => {
|
|
20160
20139
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20161
20140
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20162
20141
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
20163
20142
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
20164
20143
|
}
|
|
20165
20144
|
}, [highlightedIndex, virtualizer]);
|
|
20166
|
-
return /* @__PURE__ */ (0,
|
|
20167
|
-
/* @__PURE__ */ (0,
|
|
20168
|
-
/* @__PURE__ */ (0,
|
|
20145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "p-2", children: [
|
|
20146
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "relative mb-2", children: [
|
|
20147
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20169
20148
|
import_lucide_react57.Search,
|
|
20170
20149
|
{
|
|
20171
20150
|
"aria-hidden": "true",
|
|
20172
20151
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
20173
20152
|
}
|
|
20174
20153
|
),
|
|
20175
|
-
/* @__PURE__ */ (0,
|
|
20154
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20176
20155
|
"input",
|
|
20177
20156
|
{
|
|
20178
20157
|
id: inputId,
|
|
@@ -20191,7 +20170,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20191
20170
|
}
|
|
20192
20171
|
)
|
|
20193
20172
|
] }),
|
|
20194
|
-
loading && options.length === 0 ? /* @__PURE__ */ (0,
|
|
20173
|
+
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
20174
|
"div",
|
|
20196
20175
|
{
|
|
20197
20176
|
id: listboxId,
|
|
@@ -20200,7 +20179,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20200
20179
|
"aria-labelledby": labelId,
|
|
20201
20180
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
20202
20181
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
20203
|
-
children: /* @__PURE__ */ (0,
|
|
20182
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20204
20183
|
"div",
|
|
20205
20184
|
{
|
|
20206
20185
|
className: "relative w-full",
|
|
@@ -20208,7 +20187,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20208
20187
|
children: virtualItems.map((virtualItem) => {
|
|
20209
20188
|
const option = options[virtualItem.index];
|
|
20210
20189
|
if (!option) {
|
|
20211
|
-
return /* @__PURE__ */ (0,
|
|
20190
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20212
20191
|
"div",
|
|
20213
20192
|
{
|
|
20214
20193
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -20223,7 +20202,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20223
20202
|
}
|
|
20224
20203
|
const isSelected = value?.value === option.value;
|
|
20225
20204
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
20226
|
-
return /* @__PURE__ */ (0,
|
|
20205
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20227
20206
|
"button",
|
|
20228
20207
|
{
|
|
20229
20208
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -20245,7 +20224,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20245
20224
|
height: `${virtualItem.size}px`,
|
|
20246
20225
|
transform: `translateY(${virtualItem.start}px)`
|
|
20247
20226
|
},
|
|
20248
|
-
children: /* @__PURE__ */ (0,
|
|
20227
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("span", { className: "truncate text-center", children: String(option.label) })
|
|
20249
20228
|
},
|
|
20250
20229
|
`${String(option.value)}-${virtualItem.index}`
|
|
20251
20230
|
);
|
|
@@ -20274,16 +20253,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20274
20253
|
}
|
|
20275
20254
|
|
|
20276
20255
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20277
|
-
var
|
|
20256
|
+
var React81 = __toESM(require("react"), 1);
|
|
20278
20257
|
var import_react_i18next45 = require("react-i18next");
|
|
20279
20258
|
var import_lucide_react58 = require("lucide-react");
|
|
20280
|
-
var
|
|
20281
|
-
var AirbnbSearchInput =
|
|
20259
|
+
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
20260
|
+
var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20282
20261
|
const { t } = (0, import_react_i18next45.useTranslation)();
|
|
20283
20262
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20284
|
-
return /* @__PURE__ */ (0,
|
|
20285
|
-
/* @__PURE__ */ (0,
|
|
20286
|
-
/* @__PURE__ */ (0,
|
|
20263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
20264
|
+
/* @__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]" }),
|
|
20265
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20287
20266
|
"input",
|
|
20288
20267
|
{
|
|
20289
20268
|
...props,
|
|
@@ -20302,13 +20281,13 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20302
20281
|
)
|
|
20303
20282
|
}
|
|
20304
20283
|
),
|
|
20305
|
-
onReset && /* @__PURE__ */ (0,
|
|
20284
|
+
onReset && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20306
20285
|
Button,
|
|
20307
20286
|
{
|
|
20308
20287
|
variant: "ghost",
|
|
20309
20288
|
onClick: onReset,
|
|
20310
20289
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
20311
|
-
children: /* @__PURE__ */ (0,
|
|
20290
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_lucide_react58.X, { className: "h-5 w-5" })
|
|
20312
20291
|
}
|
|
20313
20292
|
)
|
|
20314
20293
|
] });
|
|
@@ -20316,11 +20295,11 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20316
20295
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20317
20296
|
|
|
20318
20297
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20319
|
-
var
|
|
20298
|
+
var React82 = __toESM(require("react"), 1);
|
|
20320
20299
|
var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
|
|
20321
20300
|
var import_lucide_react59 = require("lucide-react");
|
|
20322
|
-
var
|
|
20323
|
-
var AirbnbSwitch =
|
|
20301
|
+
var import_jsx_runtime195 = require("react/jsx-runtime");
|
|
20302
|
+
var AirbnbSwitch = React82.forwardRef(
|
|
20324
20303
|
({
|
|
20325
20304
|
className,
|
|
20326
20305
|
value,
|
|
@@ -20334,9 +20313,9 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20334
20313
|
wrapperClassName,
|
|
20335
20314
|
...props
|
|
20336
20315
|
}, ref) => {
|
|
20337
|
-
const generatedId =
|
|
20316
|
+
const generatedId = React82.useId();
|
|
20338
20317
|
const fieldId = id || generatedId;
|
|
20339
|
-
const switchElement = /* @__PURE__ */ (0,
|
|
20318
|
+
const switchElement = /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20340
20319
|
SwitchPrimitives2.Root,
|
|
20341
20320
|
{
|
|
20342
20321
|
ref,
|
|
@@ -20356,14 +20335,14 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20356
20335
|
"aria-busy": loading,
|
|
20357
20336
|
"aria-readonly": readOnly,
|
|
20358
20337
|
...props,
|
|
20359
|
-
children: /* @__PURE__ */ (0,
|
|
20338
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20360
20339
|
SwitchPrimitives2.Thumb,
|
|
20361
20340
|
{
|
|
20362
20341
|
className: cn(
|
|
20363
20342
|
"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
20343
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
20365
20344
|
),
|
|
20366
|
-
children: /* @__PURE__ */ (0,
|
|
20345
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20367
20346
|
import_lucide_react59.Check,
|
|
20368
20347
|
{
|
|
20369
20348
|
"aria-hidden": "true",
|
|
@@ -20378,10 +20357,10 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20378
20357
|
if (!label && !error) {
|
|
20379
20358
|
return switchElement;
|
|
20380
20359
|
}
|
|
20381
|
-
return /* @__PURE__ */ (0,
|
|
20382
|
-
/* @__PURE__ */ (0,
|
|
20360
|
+
return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(import_jsx_runtime195.Fragment, { children: [
|
|
20361
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
|
|
20383
20362
|
switchElement,
|
|
20384
|
-
label && /* @__PURE__ */ (0,
|
|
20363
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20385
20364
|
Label,
|
|
20386
20365
|
{
|
|
20387
20366
|
htmlFor: fieldId,
|
|
@@ -20393,7 +20372,7 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20393
20372
|
}
|
|
20394
20373
|
)
|
|
20395
20374
|
] }),
|
|
20396
|
-
error && /* @__PURE__ */ (0,
|
|
20375
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(ErrorMessage, { disabled, children: error })
|
|
20397
20376
|
] });
|
|
20398
20377
|
}
|
|
20399
20378
|
);
|
|
@@ -20602,7 +20581,6 @@ AirbnbSwitch.displayName = "AirbnbSwitch";
|
|
|
20602
20581
|
ScrollBar,
|
|
20603
20582
|
SearchButton,
|
|
20604
20583
|
SearchInput,
|
|
20605
|
-
SearchingSelect,
|
|
20606
20584
|
Section,
|
|
20607
20585
|
SectionGroup,
|
|
20608
20586
|
SectionTag,
|