@chekinapp/ui 0.0.121 → 0.0.122
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +894 -943
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -26
- package/dist/index.d.ts +3 -26
- package/dist/index.js +747 -795
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -12423,11 +12423,8 @@ var Input = React44.forwardRef(
|
|
|
12423
12423
|
Input.displayName = "Input";
|
|
12424
12424
|
|
|
12425
12425
|
// src/dashboard/phone-input/PhoneInput.tsx
|
|
12426
|
-
import * as
|
|
12427
|
-
import { useTranslation as
|
|
12428
|
-
|
|
12429
|
-
// src/dashboard/searching-select/SearchingSelect.tsx
|
|
12430
|
-
import * as React53 from "react";
|
|
12426
|
+
import * as React50 from "react";
|
|
12427
|
+
import { useTranslation as useTranslation34 } from "react-i18next";
|
|
12431
12428
|
|
|
12432
12429
|
// src/dashboard/select/Select.tsx
|
|
12433
12430
|
import * as React49 from "react";
|
|
@@ -14072,21 +14069,254 @@ function SelectInternal(props, ref) {
|
|
|
14072
14069
|
}
|
|
14073
14070
|
var Select = React49.forwardRef(SelectInternal);
|
|
14074
14071
|
|
|
14075
|
-
// src/dashboard/
|
|
14072
|
+
// src/dashboard/phone-input/utils.ts
|
|
14073
|
+
var PREFIX_REGEX = /^\+/;
|
|
14074
|
+
function clearPhoneNumber(value) {
|
|
14075
|
+
return value.replace(/[^0-9]/g, "");
|
|
14076
|
+
}
|
|
14077
|
+
function findPhoneCode(value, codeSet) {
|
|
14078
|
+
const hasPrefix = PREFIX_REGEX.test(value);
|
|
14079
|
+
const maxLength = hasPrefix ? 4 : 3;
|
|
14080
|
+
const minLength = hasPrefix ? 2 : 1;
|
|
14081
|
+
for (let length = minLength; length <= maxLength; length += 1) {
|
|
14082
|
+
const candidate = value.slice(0, length);
|
|
14083
|
+
const normalized = hasPrefix ? candidate : `+${candidate}`;
|
|
14084
|
+
if (codeSet.has(normalized)) {
|
|
14085
|
+
return normalized;
|
|
14086
|
+
}
|
|
14087
|
+
}
|
|
14088
|
+
return void 0;
|
|
14089
|
+
}
|
|
14090
|
+
function parsePhoneValueWithOptions(options) {
|
|
14091
|
+
const codeSet = new Set(options.map((option) => option.value));
|
|
14092
|
+
return (value) => {
|
|
14093
|
+
if (!PREFIX_REGEX.test(value)) {
|
|
14094
|
+
return { code: "", number: value };
|
|
14095
|
+
}
|
|
14096
|
+
const code = findPhoneCode(value, codeSet);
|
|
14097
|
+
if (!code) {
|
|
14098
|
+
return { code: "", number: value };
|
|
14099
|
+
}
|
|
14100
|
+
return {
|
|
14101
|
+
code,
|
|
14102
|
+
number: value.slice(code.length)
|
|
14103
|
+
};
|
|
14104
|
+
};
|
|
14105
|
+
}
|
|
14106
|
+
function findPhoneCodeOption(options, code) {
|
|
14107
|
+
return options.find((option) => option.value === code);
|
|
14108
|
+
}
|
|
14109
|
+
function formatPhoneCodeOptionLabel(option) {
|
|
14110
|
+
const label = String(option.label);
|
|
14111
|
+
const value = String(option.value);
|
|
14112
|
+
return label.includes(value) ? label : `${label} ${value}`;
|
|
14113
|
+
}
|
|
14114
|
+
|
|
14115
|
+
// src/dashboard/phone-input/PhoneInput.tsx
|
|
14116
|
+
import { jsx as jsx157, jsxs as jsxs100 } from "react/jsx-runtime";
|
|
14117
|
+
var EMPTY_VALUE = { code: "", number: "" };
|
|
14118
|
+
var PhoneInput = React50.forwardRef(
|
|
14119
|
+
function PhoneInput2({
|
|
14120
|
+
options,
|
|
14121
|
+
value,
|
|
14122
|
+
onChange,
|
|
14123
|
+
onBlur,
|
|
14124
|
+
name,
|
|
14125
|
+
codeName,
|
|
14126
|
+
numberName,
|
|
14127
|
+
label,
|
|
14128
|
+
topLabel,
|
|
14129
|
+
prefixLabel,
|
|
14130
|
+
placeholder,
|
|
14131
|
+
codePlaceholder = "+00",
|
|
14132
|
+
disabled,
|
|
14133
|
+
loading,
|
|
14134
|
+
readOnly,
|
|
14135
|
+
codeReadOnly,
|
|
14136
|
+
optional,
|
|
14137
|
+
tooltip,
|
|
14138
|
+
error,
|
|
14139
|
+
invalid,
|
|
14140
|
+
className,
|
|
14141
|
+
autoDetectCode = true,
|
|
14142
|
+
searchable = true,
|
|
14143
|
+
defaultCode
|
|
14144
|
+
}, ref) {
|
|
14145
|
+
const { t } = useTranslation34();
|
|
14146
|
+
const safeValue = value ?? EMPTY_VALUE;
|
|
14147
|
+
const effectiveCode = safeValue.code || defaultCode || "";
|
|
14148
|
+
const resolvedLabel = label ?? "";
|
|
14149
|
+
const resolvedPrefixLabel = prefixLabel ?? t("prefix");
|
|
14150
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
14151
|
+
const isCodeBlocked = isBlocked || Boolean(readOnly) || Boolean(codeReadOnly);
|
|
14152
|
+
const hasExternalError = Boolean(error);
|
|
14153
|
+
const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !effectiveCode;
|
|
14154
|
+
const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
|
|
14155
|
+
const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
|
|
14156
|
+
const combinedValue = effectiveCode || safeValue.number ? `${effectiveCode}${safeValue.number}` : "";
|
|
14157
|
+
const codeOptions = React50.useMemo(
|
|
14158
|
+
() => options.map((option) => ({
|
|
14159
|
+
value: option.value,
|
|
14160
|
+
label: formatPhoneCodeOptionLabel(option),
|
|
14161
|
+
data: option.data,
|
|
14162
|
+
isDisabled: option.disabled
|
|
14163
|
+
})),
|
|
14164
|
+
[options]
|
|
14165
|
+
);
|
|
14166
|
+
const selectedCodeOption = React50.useMemo(
|
|
14167
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
14168
|
+
[codeOptions, effectiveCode]
|
|
14169
|
+
);
|
|
14170
|
+
const parsePhoneValue = React50.useMemo(
|
|
14171
|
+
() => parsePhoneValueWithOptions(options),
|
|
14172
|
+
[options]
|
|
14173
|
+
);
|
|
14174
|
+
const emitChange = (next) => {
|
|
14175
|
+
onChange?.(next, name);
|
|
14176
|
+
};
|
|
14177
|
+
const handleCodeChange = (option) => {
|
|
14178
|
+
if (!option) return;
|
|
14179
|
+
emitChange({ code: option.value, number: safeValue.number });
|
|
14180
|
+
};
|
|
14181
|
+
const handleNumberChange = (event) => {
|
|
14182
|
+
if (readOnly || disabled) return;
|
|
14183
|
+
const rawValue = event.target.value;
|
|
14184
|
+
if (!autoDetectCode) {
|
|
14185
|
+
emitChange({ code: effectiveCode, number: clearPhoneNumber(rawValue) });
|
|
14186
|
+
return;
|
|
14187
|
+
}
|
|
14188
|
+
const parsed = parsePhoneValue(rawValue);
|
|
14189
|
+
const cleanedNumber = clearPhoneNumber(parsed.number);
|
|
14190
|
+
if (parsed.code) {
|
|
14191
|
+
emitChange({ code: parsed.code, number: cleanedNumber });
|
|
14192
|
+
return;
|
|
14193
|
+
}
|
|
14194
|
+
emitChange({ code: effectiveCode, number: cleanedNumber });
|
|
14195
|
+
};
|
|
14196
|
+
return /* @__PURE__ */ jsxs100(
|
|
14197
|
+
"div",
|
|
14198
|
+
{
|
|
14199
|
+
className: cn(
|
|
14200
|
+
"relative w-full max-w-[var(--field-max-width,296px)]",
|
|
14201
|
+
disabled && "cursor-not-allowed opacity-50",
|
|
14202
|
+
loading && "cursor-progress",
|
|
14203
|
+
className
|
|
14204
|
+
),
|
|
14205
|
+
children: [
|
|
14206
|
+
name && /* @__PURE__ */ jsx157("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
14207
|
+
codeName && /* @__PURE__ */ jsx157(
|
|
14208
|
+
"input",
|
|
14209
|
+
{
|
|
14210
|
+
type: "hidden",
|
|
14211
|
+
name: codeName,
|
|
14212
|
+
value: effectiveCode,
|
|
14213
|
+
disabled
|
|
14214
|
+
}
|
|
14215
|
+
),
|
|
14216
|
+
numberName && /* @__PURE__ */ jsx157(
|
|
14217
|
+
"input",
|
|
14218
|
+
{
|
|
14219
|
+
type: "hidden",
|
|
14220
|
+
name: numberName,
|
|
14221
|
+
value: safeValue.number,
|
|
14222
|
+
disabled
|
|
14223
|
+
}
|
|
14224
|
+
),
|
|
14225
|
+
topLabel && /* @__PURE__ */ jsx157("label", { className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: topLabel }),
|
|
14226
|
+
/* @__PURE__ */ jsxs100("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2", children: [
|
|
14227
|
+
/* @__PURE__ */ jsx157(
|
|
14228
|
+
Select,
|
|
14229
|
+
{
|
|
14230
|
+
options: codeOptions,
|
|
14231
|
+
value: selectedCodeOption,
|
|
14232
|
+
onChange: handleCodeChange,
|
|
14233
|
+
label: resolvedPrefixLabel,
|
|
14234
|
+
placeholder: codePlaceholder,
|
|
14235
|
+
disabled: isCodeBlocked,
|
|
14236
|
+
loading,
|
|
14237
|
+
invalid: hasInvalidState,
|
|
14238
|
+
hideErrorMessage: true,
|
|
14239
|
+
searchPosition: searchable ? "dropdown" : "trigger",
|
|
14240
|
+
getValueLabel: (option) => option.value,
|
|
14241
|
+
className: "!max-w-none",
|
|
14242
|
+
dropdownClassName: "right-auto w-[280px]"
|
|
14243
|
+
}
|
|
14244
|
+
),
|
|
14245
|
+
/* @__PURE__ */ jsx157(
|
|
14246
|
+
Input,
|
|
14247
|
+
{
|
|
14248
|
+
ref,
|
|
14249
|
+
type: "tel",
|
|
14250
|
+
inputMode: "tel",
|
|
14251
|
+
autoComplete: "tel-national",
|
|
14252
|
+
label: resolvedLabel,
|
|
14253
|
+
value: safeValue.number,
|
|
14254
|
+
placeholder,
|
|
14255
|
+
disabled,
|
|
14256
|
+
readOnly,
|
|
14257
|
+
loading,
|
|
14258
|
+
invalid: hasInvalidState,
|
|
14259
|
+
tooltip,
|
|
14260
|
+
"aria-label": resolvedLabel || name,
|
|
14261
|
+
onChange: handleNumberChange,
|
|
14262
|
+
onBlur,
|
|
14263
|
+
renderErrorMessage: false,
|
|
14264
|
+
wrapperClassName: "!max-w-none"
|
|
14265
|
+
}
|
|
14266
|
+
)
|
|
14267
|
+
] }),
|
|
14268
|
+
!errorMessage && optional && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
14269
|
+
errorMessage && /* @__PURE__ */ jsx157(
|
|
14270
|
+
FieldErrorMessage,
|
|
14271
|
+
{
|
|
14272
|
+
message: errorMessage,
|
|
14273
|
+
"data-testid": name ? `${name}-error` : void 0,
|
|
14274
|
+
className: "mt-[1px] text-[14px]"
|
|
14275
|
+
}
|
|
14276
|
+
)
|
|
14277
|
+
]
|
|
14278
|
+
}
|
|
14279
|
+
);
|
|
14280
|
+
}
|
|
14281
|
+
);
|
|
14282
|
+
PhoneInput.displayName = "PhoneInput";
|
|
14283
|
+
|
|
14284
|
+
// src/dashboard/creatable-select/CreatableSelect.tsx
|
|
14285
|
+
import * as React51 from "react";
|
|
14286
|
+
import { jsx as jsx158 } from "react/jsx-runtime";
|
|
14287
|
+
var CreatableSelect = React51.forwardRef(function CreatableSelect2(props, ref) {
|
|
14288
|
+
return /* @__PURE__ */ jsx158(Select, { ref, ...props, isCreatable: true });
|
|
14289
|
+
});
|
|
14290
|
+
|
|
14291
|
+
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14076
14292
|
import * as React52 from "react";
|
|
14293
|
+
import { jsx as jsx159 } from "react/jsx-runtime";
|
|
14294
|
+
var MultiSelect = React52.forwardRef(function MultiSelect2(props, ref) {
|
|
14295
|
+
return /* @__PURE__ */ jsx159(Select, { ref, ...props, isMulti: true });
|
|
14296
|
+
});
|
|
14297
|
+
|
|
14298
|
+
// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
|
|
14299
|
+
import * as React53 from "react";
|
|
14300
|
+
import { jsx as jsx160 } from "react/jsx-runtime";
|
|
14301
|
+
var CreatableMultiSelect = React53.forwardRef(function CreatableMultiSelect2(props, ref) {
|
|
14302
|
+
return /* @__PURE__ */ jsx160(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
14303
|
+
});
|
|
14304
|
+
|
|
14305
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14306
|
+
import * as React56 from "react";
|
|
14077
14307
|
|
|
14078
14308
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14079
|
-
import * as
|
|
14080
|
-
import { useTranslation as
|
|
14309
|
+
import * as React55 from "react";
|
|
14310
|
+
import { useTranslation as useTranslation35 } from "react-i18next";
|
|
14081
14311
|
import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
|
|
14082
14312
|
|
|
14083
14313
|
// src/dashboard/infinite-scroll-select/InfiniteScrollContext.tsx
|
|
14084
|
-
import * as
|
|
14085
|
-
var InfiniteScrollContext =
|
|
14314
|
+
import * as React54 from "react";
|
|
14315
|
+
var InfiniteScrollContext = React54.createContext(
|
|
14086
14316
|
null
|
|
14087
14317
|
);
|
|
14088
14318
|
function useInfiniteScrollContext() {
|
|
14089
|
-
const ctx =
|
|
14319
|
+
const ctx = React54.useContext(InfiniteScrollContext);
|
|
14090
14320
|
if (!ctx) {
|
|
14091
14321
|
throw new Error(
|
|
14092
14322
|
"useInfiniteScrollContext must be used within an InfiniteScrollContext.Provider"
|
|
@@ -14096,7 +14326,7 @@ function useInfiniteScrollContext() {
|
|
|
14096
14326
|
}
|
|
14097
14327
|
|
|
14098
14328
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14099
|
-
import { jsx as
|
|
14329
|
+
import { jsx as jsx161, jsxs as jsxs101 } from "react/jsx-runtime";
|
|
14100
14330
|
function VirtualMenuList(props) {
|
|
14101
14331
|
const {
|
|
14102
14332
|
id,
|
|
@@ -14130,10 +14360,10 @@ function VirtualMenuList(props) {
|
|
|
14130
14360
|
loadMoreThreshold
|
|
14131
14361
|
} = useInfiniteScrollContext();
|
|
14132
14362
|
const Option = components?.Option ?? DefaultOption;
|
|
14133
|
-
const { t } =
|
|
14134
|
-
const scrollRef =
|
|
14135
|
-
const lastLoadMoreOptionsLengthRef =
|
|
14136
|
-
const previousHighlightedIndexRef =
|
|
14363
|
+
const { t } = useTranslation35();
|
|
14364
|
+
const scrollRef = React55.useRef(null);
|
|
14365
|
+
const lastLoadMoreOptionsLengthRef = React55.useRef(null);
|
|
14366
|
+
const previousHighlightedIndexRef = React55.useRef(-1);
|
|
14137
14367
|
const showLoaderRow = Boolean(canLoadMore || isLoadingMore);
|
|
14138
14368
|
const itemCount = options.length + (showLoaderRow ? 1 : 0);
|
|
14139
14369
|
const virtualizer = useVirtualizer2({
|
|
@@ -14146,7 +14376,7 @@ function VirtualMenuList(props) {
|
|
|
14146
14376
|
const totalSize = virtualizer.getTotalSize();
|
|
14147
14377
|
const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
|
|
14148
14378
|
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14149
|
-
|
|
14379
|
+
React55.useEffect(() => {
|
|
14150
14380
|
if (!canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14151
14381
|
if (virtualItems.length === 0) return;
|
|
14152
14382
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
@@ -14162,7 +14392,7 @@ function VirtualMenuList(props) {
|
|
|
14162
14392
|
loadMoreItems,
|
|
14163
14393
|
loadMoreThreshold
|
|
14164
14394
|
]);
|
|
14165
|
-
|
|
14395
|
+
React55.useEffect(() => {
|
|
14166
14396
|
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14167
14397
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14168
14398
|
if (highlightedIndex < 0 || !changed) return;
|
|
@@ -14172,8 +14402,8 @@ function VirtualMenuList(props) {
|
|
|
14172
14402
|
const lastOptionIndex = options.length - 1;
|
|
14173
14403
|
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14174
14404
|
const isOptionSelected2 = (option) => isOptionSelectedProp ? isOptionSelectedProp(option, selectedOptions) : selectedOptions.some((s) => s.value === option.value);
|
|
14175
|
-
const wasAtBottomRef =
|
|
14176
|
-
const handleScroll =
|
|
14405
|
+
const wasAtBottomRef = React55.useRef(false);
|
|
14406
|
+
const handleScroll = React55.useCallback(
|
|
14177
14407
|
(event) => {
|
|
14178
14408
|
if (!onMenuScrollToBottom) return;
|
|
14179
14409
|
const target = event.currentTarget;
|
|
@@ -14186,7 +14416,7 @@ function VirtualMenuList(props) {
|
|
|
14186
14416
|
[onMenuScrollToBottom]
|
|
14187
14417
|
);
|
|
14188
14418
|
if (options.length === 0) {
|
|
14189
|
-
return /* @__PURE__ */
|
|
14419
|
+
return /* @__PURE__ */ jsx161("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ jsxs101(
|
|
14190
14420
|
"div",
|
|
14191
14421
|
{
|
|
14192
14422
|
role: "status",
|
|
@@ -14194,8 +14424,8 @@ function VirtualMenuList(props) {
|
|
|
14194
14424
|
"aria-live": "polite",
|
|
14195
14425
|
className: "flex flex-col gap-2",
|
|
14196
14426
|
children: [
|
|
14197
|
-
/* @__PURE__ */
|
|
14198
|
-
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */
|
|
14427
|
+
/* @__PURE__ */ jsx161("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14428
|
+
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx161(
|
|
14199
14429
|
Skeleton,
|
|
14200
14430
|
{
|
|
14201
14431
|
className: "h-10 w-full rounded-md",
|
|
@@ -14205,16 +14435,16 @@ function VirtualMenuList(props) {
|
|
|
14205
14435
|
))
|
|
14206
14436
|
]
|
|
14207
14437
|
}
|
|
14208
|
-
) : /* @__PURE__ */
|
|
14438
|
+
) : /* @__PURE__ */ jsx161("div", { className: "flex min-h-[40px] items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]", children: emptyMessage }) });
|
|
14209
14439
|
}
|
|
14210
|
-
return /* @__PURE__ */
|
|
14440
|
+
return /* @__PURE__ */ jsx161("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: /* @__PURE__ */ jsx161(
|
|
14211
14441
|
"div",
|
|
14212
14442
|
{
|
|
14213
14443
|
ref: scrollRef,
|
|
14214
14444
|
className: cn("overflow-y-auto", menuClassName),
|
|
14215
14445
|
style: { height: `${measuredListHeight}px` },
|
|
14216
14446
|
onScroll: onMenuScrollToBottom ? handleScroll : void 0,
|
|
14217
|
-
children: /* @__PURE__ */
|
|
14447
|
+
children: /* @__PURE__ */ jsx161(
|
|
14218
14448
|
"div",
|
|
14219
14449
|
{
|
|
14220
14450
|
id,
|
|
@@ -14234,7 +14464,7 @@ function VirtualMenuList(props) {
|
|
|
14234
14464
|
disabled || option?.isDisabled || option && isOptionDisabled?.(option)
|
|
14235
14465
|
);
|
|
14236
14466
|
const isLastOption = !isLoaderRow && virtualItem.index === lastOptionIndex && !canLoadMore;
|
|
14237
|
-
return /* @__PURE__ */
|
|
14467
|
+
return /* @__PURE__ */ jsx161(
|
|
14238
14468
|
"div",
|
|
14239
14469
|
{
|
|
14240
14470
|
"data-index": virtualItem.index,
|
|
@@ -14243,7 +14473,7 @@ function VirtualMenuList(props) {
|
|
|
14243
14473
|
height: `${virtualItem.size}px`,
|
|
14244
14474
|
transform: `translateY(${virtualItem.start}px)`
|
|
14245
14475
|
},
|
|
14246
|
-
children: isLoaderRow ? /* @__PURE__ */
|
|
14476
|
+
children: isLoaderRow ? /* @__PURE__ */ jsxs101(
|
|
14247
14477
|
"div",
|
|
14248
14478
|
{
|
|
14249
14479
|
role: "status",
|
|
@@ -14251,8 +14481,8 @@ function VirtualMenuList(props) {
|
|
|
14251
14481
|
"aria-live": "polite",
|
|
14252
14482
|
className: "flex h-full items-center justify-center",
|
|
14253
14483
|
children: [
|
|
14254
|
-
/* @__PURE__ */
|
|
14255
|
-
/* @__PURE__ */
|
|
14484
|
+
/* @__PURE__ */ jsx161("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14485
|
+
/* @__PURE__ */ jsx161(
|
|
14256
14486
|
ThreeDotsLoader,
|
|
14257
14487
|
{
|
|
14258
14488
|
height: 24,
|
|
@@ -14262,7 +14492,7 @@ function VirtualMenuList(props) {
|
|
|
14262
14492
|
)
|
|
14263
14493
|
]
|
|
14264
14494
|
}
|
|
14265
|
-
) : option ? /* @__PURE__ */
|
|
14495
|
+
) : option ? /* @__PURE__ */ jsx161(
|
|
14266
14496
|
Option,
|
|
14267
14497
|
{
|
|
14268
14498
|
id: getOptionId2(virtualItem.index),
|
|
@@ -14292,7 +14522,7 @@ function VirtualMenuList(props) {
|
|
|
14292
14522
|
}
|
|
14293
14523
|
|
|
14294
14524
|
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14295
|
-
import { jsx as
|
|
14525
|
+
import { jsx as jsx162 } from "react/jsx-runtime";
|
|
14296
14526
|
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14297
14527
|
var DEFAULT_LIST_HEIGHT = 322;
|
|
14298
14528
|
var DEFAULT_OVERSCAN = 5;
|
|
@@ -14319,8 +14549,8 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14319
14549
|
} = props;
|
|
14320
14550
|
const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
|
|
14321
14551
|
const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
|
|
14322
|
-
const [inputValue, setInputValue] =
|
|
14323
|
-
const filteredOptions =
|
|
14552
|
+
const [inputValue, setInputValue] = React56.useState("");
|
|
14553
|
+
const filteredOptions = React56.useMemo(() => {
|
|
14324
14554
|
const trimmed = inputValue.trim();
|
|
14325
14555
|
const valueLabel = (() => {
|
|
14326
14556
|
if (isMulti) return "";
|
|
@@ -14339,7 +14569,7 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14339
14569
|
}
|
|
14340
14570
|
return list;
|
|
14341
14571
|
}, [rawOptions, inputValue, filterOption, getFullSearchOption, isMulti, rest]);
|
|
14342
|
-
const contextValue =
|
|
14572
|
+
const contextValue = React56.useMemo(
|
|
14343
14573
|
() => ({
|
|
14344
14574
|
canLoadMore,
|
|
14345
14575
|
isLoadingMore,
|
|
@@ -14361,11 +14591,11 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14361
14591
|
loadMoreThreshold
|
|
14362
14592
|
]
|
|
14363
14593
|
);
|
|
14364
|
-
const components =
|
|
14594
|
+
const components = React56.useMemo(
|
|
14365
14595
|
() => ({ ...userComponents, MenuList: VirtualMenuList }),
|
|
14366
14596
|
[userComponents]
|
|
14367
14597
|
);
|
|
14368
|
-
const handleInputChange =
|
|
14598
|
+
const handleInputChange = React56.useCallback(
|
|
14369
14599
|
(value) => {
|
|
14370
14600
|
setInputValue(value);
|
|
14371
14601
|
onSearchChange?.(value);
|
|
@@ -14379,321 +14609,42 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14379
14609
|
components,
|
|
14380
14610
|
onInputChange: handleInputChange
|
|
14381
14611
|
};
|
|
14382
|
-
return /* @__PURE__ */
|
|
14383
|
-
Select,
|
|
14384
|
-
{
|
|
14385
|
-
ref,
|
|
14386
|
-
...rest,
|
|
14387
|
-
...selectExtras,
|
|
14388
|
-
isMulti: true
|
|
14389
|
-
}
|
|
14390
|
-
) : /* @__PURE__ */ jsx158(
|
|
14391
|
-
Select,
|
|
14392
|
-
{
|
|
14393
|
-
ref,
|
|
14394
|
-
...rest,
|
|
14395
|
-
...selectExtras,
|
|
14396
|
-
isMulti: false
|
|
14397
|
-
}
|
|
14398
|
-
) });
|
|
14399
|
-
}
|
|
14400
|
-
var InfiniteScrollSelect = React52.forwardRef(
|
|
14401
|
-
InfiniteScrollSelectInternal
|
|
14402
|
-
);
|
|
14403
|
-
|
|
14404
|
-
// src/dashboard/searching-select/SearchingSelect.tsx
|
|
14405
|
-
import { Fragment as Fragment16, jsx as jsx159 } from "react/jsx-runtime";
|
|
14406
|
-
function makeTriggerSlot(render) {
|
|
14407
|
-
function CustomTrigger(props) {
|
|
14408
|
-
return /* @__PURE__ */ jsx159(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
|
|
14409
|
-
}
|
|
14410
|
-
return CustomTrigger;
|
|
14411
|
-
}
|
|
14412
|
-
function hasPaginationProps(props) {
|
|
14413
|
-
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
|
|
14414
|
-
}
|
|
14415
|
-
function SearchingSelectInternal(props, ref) {
|
|
14416
|
-
const { trigger, components: userComponents, searchable = true, ...rest } = props;
|
|
14417
|
-
const Control = React53.useMemo(() => {
|
|
14418
|
-
if (trigger) return makeTriggerSlot(trigger);
|
|
14419
|
-
return StaticControl;
|
|
14420
|
-
}, [trigger]);
|
|
14421
|
-
const components = React53.useMemo(
|
|
14422
|
-
() => ({ ...userComponents, Control }),
|
|
14423
|
-
[userComponents, Control]
|
|
14424
|
-
);
|
|
14425
|
-
if (hasPaginationProps(
|
|
14426
|
-
rest
|
|
14427
|
-
)) {
|
|
14428
|
-
return /* @__PURE__ */ jsx159(
|
|
14429
|
-
InfiniteScrollSelect,
|
|
14430
|
-
{
|
|
14431
|
-
ref,
|
|
14432
|
-
...rest,
|
|
14433
|
-
components,
|
|
14434
|
-
searchPosition: searchable ? "dropdown" : "trigger"
|
|
14435
|
-
}
|
|
14436
|
-
);
|
|
14437
|
-
}
|
|
14438
|
-
return /* @__PURE__ */ jsx159(
|
|
14439
|
-
Select,
|
|
14440
|
-
{
|
|
14441
|
-
ref,
|
|
14442
|
-
...rest,
|
|
14443
|
-
components,
|
|
14444
|
-
searchPosition: searchable ? "dropdown" : "trigger"
|
|
14445
|
-
}
|
|
14446
|
-
);
|
|
14447
|
-
}
|
|
14448
|
-
var SearchingSelect = React53.forwardRef(
|
|
14449
|
-
SearchingSelectInternal
|
|
14450
|
-
);
|
|
14451
|
-
|
|
14452
|
-
// src/dashboard/phone-input/utils.ts
|
|
14453
|
-
var PREFIX_REGEX = /^\+/;
|
|
14454
|
-
function clearPhoneNumber(value) {
|
|
14455
|
-
return value.replace(/[^0-9]/g, "");
|
|
14456
|
-
}
|
|
14457
|
-
function findPhoneCode(value, codeSet) {
|
|
14458
|
-
const hasPrefix = PREFIX_REGEX.test(value);
|
|
14459
|
-
const maxLength = hasPrefix ? 4 : 3;
|
|
14460
|
-
const minLength = hasPrefix ? 2 : 1;
|
|
14461
|
-
for (let length = minLength; length <= maxLength; length += 1) {
|
|
14462
|
-
const candidate = value.slice(0, length);
|
|
14463
|
-
const normalized = hasPrefix ? candidate : `+${candidate}`;
|
|
14464
|
-
if (codeSet.has(normalized)) {
|
|
14465
|
-
return normalized;
|
|
14466
|
-
}
|
|
14467
|
-
}
|
|
14468
|
-
return void 0;
|
|
14469
|
-
}
|
|
14470
|
-
function parsePhoneValueWithOptions(options) {
|
|
14471
|
-
const codeSet = new Set(options.map((option) => option.value));
|
|
14472
|
-
return (value) => {
|
|
14473
|
-
if (!PREFIX_REGEX.test(value)) {
|
|
14474
|
-
return { code: "", number: value };
|
|
14612
|
+
return /* @__PURE__ */ jsx162(InfiniteScrollContext.Provider, { value: contextValue, children: isMulti ? /* @__PURE__ */ jsx162(
|
|
14613
|
+
Select,
|
|
14614
|
+
{
|
|
14615
|
+
ref,
|
|
14616
|
+
...rest,
|
|
14617
|
+
...selectExtras,
|
|
14618
|
+
isMulti: true
|
|
14475
14619
|
}
|
|
14476
|
-
|
|
14477
|
-
|
|
14478
|
-
|
|
14620
|
+
) : /* @__PURE__ */ jsx162(
|
|
14621
|
+
Select,
|
|
14622
|
+
{
|
|
14623
|
+
ref,
|
|
14624
|
+
...rest,
|
|
14625
|
+
...selectExtras,
|
|
14626
|
+
isMulti: false
|
|
14479
14627
|
}
|
|
14480
|
-
|
|
14481
|
-
code,
|
|
14482
|
-
number: value.slice(code.length)
|
|
14483
|
-
};
|
|
14484
|
-
};
|
|
14485
|
-
}
|
|
14486
|
-
function findPhoneCodeOption(options, code) {
|
|
14487
|
-
return options.find((option) => option.value === code);
|
|
14488
|
-
}
|
|
14489
|
-
function formatPhoneCodeOptionLabel(option) {
|
|
14490
|
-
const label = String(option.label);
|
|
14491
|
-
const value = String(option.value);
|
|
14492
|
-
return label.includes(value) ? label : `${label} ${value}`;
|
|
14628
|
+
) });
|
|
14493
14629
|
}
|
|
14494
|
-
|
|
14495
|
-
|
|
14496
|
-
import { jsx as jsx160, jsxs as jsxs101 } from "react/jsx-runtime";
|
|
14497
|
-
var EMPTY_VALUE = { code: "", number: "" };
|
|
14498
|
-
var PhoneInput = React54.forwardRef(
|
|
14499
|
-
function PhoneInput2({
|
|
14500
|
-
options,
|
|
14501
|
-
value,
|
|
14502
|
-
onChange,
|
|
14503
|
-
onBlur,
|
|
14504
|
-
name,
|
|
14505
|
-
codeName,
|
|
14506
|
-
numberName,
|
|
14507
|
-
label,
|
|
14508
|
-
topLabel,
|
|
14509
|
-
prefixLabel,
|
|
14510
|
-
placeholder,
|
|
14511
|
-
codePlaceholder = "+00",
|
|
14512
|
-
disabled,
|
|
14513
|
-
loading,
|
|
14514
|
-
readOnly,
|
|
14515
|
-
codeReadOnly,
|
|
14516
|
-
optional,
|
|
14517
|
-
tooltip,
|
|
14518
|
-
error,
|
|
14519
|
-
invalid,
|
|
14520
|
-
className,
|
|
14521
|
-
autoDetectCode = true,
|
|
14522
|
-
searchable = true
|
|
14523
|
-
}, ref) {
|
|
14524
|
-
const { t } = useTranslation35();
|
|
14525
|
-
const safeValue = value ?? EMPTY_VALUE;
|
|
14526
|
-
const resolvedLabel = label ?? "";
|
|
14527
|
-
const resolvedPrefixLabel = prefixLabel ?? t("prefix");
|
|
14528
|
-
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
14529
|
-
const isCodeBlocked = isBlocked || Boolean(readOnly) || Boolean(codeReadOnly);
|
|
14530
|
-
const hasExternalError = Boolean(error);
|
|
14531
|
-
const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !safeValue.code;
|
|
14532
|
-
const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
|
|
14533
|
-
const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
|
|
14534
|
-
const combinedValue = safeValue.code || safeValue.number ? `${safeValue.code}${safeValue.number}` : "";
|
|
14535
|
-
const codeOptions = React54.useMemo(
|
|
14536
|
-
() => options.map((option) => ({
|
|
14537
|
-
value: option.value,
|
|
14538
|
-
label: formatPhoneCodeOptionLabel(option),
|
|
14539
|
-
data: option.data,
|
|
14540
|
-
isDisabled: option.disabled
|
|
14541
|
-
})),
|
|
14542
|
-
[options]
|
|
14543
|
-
);
|
|
14544
|
-
const selectedCodeOption = React54.useMemo(
|
|
14545
|
-
() => codeOptions.find((option) => option.value === safeValue.code) ?? null,
|
|
14546
|
-
[codeOptions, safeValue.code]
|
|
14547
|
-
);
|
|
14548
|
-
const parsePhoneValue = React54.useMemo(
|
|
14549
|
-
() => parsePhoneValueWithOptions(options),
|
|
14550
|
-
[options]
|
|
14551
|
-
);
|
|
14552
|
-
const emitChange = (next) => {
|
|
14553
|
-
onChange?.(next, name);
|
|
14554
|
-
};
|
|
14555
|
-
const handleCodeChange = (option) => {
|
|
14556
|
-
if (!option) return;
|
|
14557
|
-
emitChange({ code: option.value, number: safeValue.number });
|
|
14558
|
-
};
|
|
14559
|
-
const handleNumberChange = (event) => {
|
|
14560
|
-
if (readOnly || disabled) return;
|
|
14561
|
-
const rawValue = event.target.value;
|
|
14562
|
-
if (!autoDetectCode) {
|
|
14563
|
-
emitChange({ code: safeValue.code, number: clearPhoneNumber(rawValue) });
|
|
14564
|
-
return;
|
|
14565
|
-
}
|
|
14566
|
-
const parsed = parsePhoneValue(rawValue);
|
|
14567
|
-
const cleanedNumber = clearPhoneNumber(parsed.number);
|
|
14568
|
-
if (parsed.code) {
|
|
14569
|
-
emitChange({ code: parsed.code, number: cleanedNumber });
|
|
14570
|
-
return;
|
|
14571
|
-
}
|
|
14572
|
-
emitChange({ code: safeValue.code, number: cleanedNumber });
|
|
14573
|
-
};
|
|
14574
|
-
return /* @__PURE__ */ jsxs101(
|
|
14575
|
-
"div",
|
|
14576
|
-
{
|
|
14577
|
-
className: cn(
|
|
14578
|
-
"relative w-full max-w-[var(--field-max-width,296px)]",
|
|
14579
|
-
disabled && "cursor-not-allowed opacity-50",
|
|
14580
|
-
loading && "cursor-progress",
|
|
14581
|
-
className
|
|
14582
|
-
),
|
|
14583
|
-
children: [
|
|
14584
|
-
name && /* @__PURE__ */ jsx160("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
14585
|
-
codeName && /* @__PURE__ */ jsx160(
|
|
14586
|
-
"input",
|
|
14587
|
-
{
|
|
14588
|
-
type: "hidden",
|
|
14589
|
-
name: codeName,
|
|
14590
|
-
value: safeValue.code,
|
|
14591
|
-
disabled
|
|
14592
|
-
}
|
|
14593
|
-
),
|
|
14594
|
-
numberName && /* @__PURE__ */ jsx160(
|
|
14595
|
-
"input",
|
|
14596
|
-
{
|
|
14597
|
-
type: "hidden",
|
|
14598
|
-
name: numberName,
|
|
14599
|
-
value: safeValue.number,
|
|
14600
|
-
disabled
|
|
14601
|
-
}
|
|
14602
|
-
),
|
|
14603
|
-
topLabel && /* @__PURE__ */ jsx160("label", { className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: topLabel }),
|
|
14604
|
-
/* @__PURE__ */ jsxs101("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2", children: [
|
|
14605
|
-
/* @__PURE__ */ jsx160(
|
|
14606
|
-
SearchingSelect,
|
|
14607
|
-
{
|
|
14608
|
-
options: codeOptions,
|
|
14609
|
-
value: selectedCodeOption,
|
|
14610
|
-
onChange: handleCodeChange,
|
|
14611
|
-
label: resolvedPrefixLabel,
|
|
14612
|
-
placeholder: codePlaceholder,
|
|
14613
|
-
disabled: isCodeBlocked,
|
|
14614
|
-
loading,
|
|
14615
|
-
invalid: hasInvalidState,
|
|
14616
|
-
hideErrorMessage: true,
|
|
14617
|
-
searchable,
|
|
14618
|
-
getValueLabel: (option) => option.value,
|
|
14619
|
-
className: "!max-w-none",
|
|
14620
|
-
dropdownClassName: "right-auto w-[280px]"
|
|
14621
|
-
}
|
|
14622
|
-
),
|
|
14623
|
-
/* @__PURE__ */ jsx160(
|
|
14624
|
-
Input,
|
|
14625
|
-
{
|
|
14626
|
-
ref,
|
|
14627
|
-
type: "tel",
|
|
14628
|
-
inputMode: "tel",
|
|
14629
|
-
autoComplete: "tel-national",
|
|
14630
|
-
label: resolvedLabel,
|
|
14631
|
-
value: safeValue.number,
|
|
14632
|
-
placeholder,
|
|
14633
|
-
disabled,
|
|
14634
|
-
readOnly,
|
|
14635
|
-
loading,
|
|
14636
|
-
invalid: hasInvalidState,
|
|
14637
|
-
tooltip,
|
|
14638
|
-
"aria-label": resolvedLabel || name,
|
|
14639
|
-
onChange: handleNumberChange,
|
|
14640
|
-
onBlur,
|
|
14641
|
-
renderErrorMessage: false,
|
|
14642
|
-
wrapperClassName: "!max-w-none"
|
|
14643
|
-
}
|
|
14644
|
-
)
|
|
14645
|
-
] }),
|
|
14646
|
-
!errorMessage && optional && /* @__PURE__ */ jsx160("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
14647
|
-
errorMessage && /* @__PURE__ */ jsx160(
|
|
14648
|
-
FieldErrorMessage,
|
|
14649
|
-
{
|
|
14650
|
-
message: errorMessage,
|
|
14651
|
-
"data-testid": name ? `${name}-error` : void 0,
|
|
14652
|
-
className: "mt-[1px] text-[14px]"
|
|
14653
|
-
}
|
|
14654
|
-
)
|
|
14655
|
-
]
|
|
14656
|
-
}
|
|
14657
|
-
);
|
|
14658
|
-
}
|
|
14630
|
+
var InfiniteScrollSelect = React56.forwardRef(
|
|
14631
|
+
InfiniteScrollSelectInternal
|
|
14659
14632
|
);
|
|
14660
|
-
PhoneInput.displayName = "PhoneInput";
|
|
14661
|
-
|
|
14662
|
-
// src/dashboard/creatable-select/CreatableSelect.tsx
|
|
14663
|
-
import * as React55 from "react";
|
|
14664
|
-
import { jsx as jsx161 } from "react/jsx-runtime";
|
|
14665
|
-
var CreatableSelect = React55.forwardRef(function CreatableSelect2(props, ref) {
|
|
14666
|
-
return /* @__PURE__ */ jsx161(Select, { ref, ...props, isCreatable: true });
|
|
14667
|
-
});
|
|
14668
|
-
|
|
14669
|
-
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14670
|
-
import * as React56 from "react";
|
|
14671
|
-
import { jsx as jsx162 } from "react/jsx-runtime";
|
|
14672
|
-
var MultiSelect = React56.forwardRef(function MultiSelect2(props, ref) {
|
|
14673
|
-
return /* @__PURE__ */ jsx162(Select, { ref, ...props, isMulti: true });
|
|
14674
|
-
});
|
|
14675
14633
|
|
|
14676
|
-
// src/dashboard/
|
|
14634
|
+
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
14677
14635
|
import * as React57 from "react";
|
|
14678
14636
|
import { jsx as jsx163 } from "react/jsx-runtime";
|
|
14679
|
-
var
|
|
14680
|
-
return /* @__PURE__ */ jsx163(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
14681
|
-
});
|
|
14682
|
-
|
|
14683
|
-
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
14684
|
-
import * as React58 from "react";
|
|
14685
|
-
import { jsx as jsx164 } from "react/jsx-runtime";
|
|
14686
|
-
var InfiniteScrollMultiSelect = React58.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
14637
|
+
var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
14687
14638
|
const Forwarded = InfiniteScrollSelect;
|
|
14688
|
-
return /* @__PURE__ */
|
|
14639
|
+
return /* @__PURE__ */ jsx163(Forwarded, { ...props, ref, isMulti: true });
|
|
14689
14640
|
});
|
|
14690
14641
|
|
|
14691
14642
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14692
|
-
import * as
|
|
14643
|
+
import * as React58 from "react";
|
|
14693
14644
|
import { useTranslation as useTranslation37 } from "react-i18next";
|
|
14694
14645
|
|
|
14695
14646
|
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
14696
|
-
import { jsx as
|
|
14647
|
+
import { jsx as jsx164, jsxs as jsxs102 } from "react/jsx-runtime";
|
|
14697
14648
|
function SelectCheckboxOption(props) {
|
|
14698
14649
|
const {
|
|
14699
14650
|
option,
|
|
@@ -14727,7 +14678,7 @@ function SelectCheckboxOption(props) {
|
|
|
14727
14678
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
14728
14679
|
),
|
|
14729
14680
|
children: [
|
|
14730
|
-
/* @__PURE__ */
|
|
14681
|
+
/* @__PURE__ */ jsx164(
|
|
14731
14682
|
BaseCheckbox,
|
|
14732
14683
|
{
|
|
14733
14684
|
checked: isSelected,
|
|
@@ -14738,8 +14689,8 @@ function SelectCheckboxOption(props) {
|
|
|
14738
14689
|
}
|
|
14739
14690
|
),
|
|
14740
14691
|
/* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
14741
|
-
/* @__PURE__ */
|
|
14742
|
-
option.description && /* @__PURE__ */
|
|
14692
|
+
/* @__PURE__ */ jsx164("span", { className: "block break-words", children: option.label }),
|
|
14693
|
+
option.description && /* @__PURE__ */ jsx164("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
14743
14694
|
] })
|
|
14744
14695
|
]
|
|
14745
14696
|
}
|
|
@@ -14749,7 +14700,7 @@ function SelectCheckboxOption(props) {
|
|
|
14749
14700
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
14750
14701
|
import { ChevronDown as ChevronDown3 } from "lucide-react";
|
|
14751
14702
|
import { useTranslation as useTranslation36 } from "react-i18next";
|
|
14752
|
-
import { jsx as
|
|
14703
|
+
import { jsx as jsx165, jsxs as jsxs103 } from "react/jsx-runtime";
|
|
14753
14704
|
function createCountTrigger(opts) {
|
|
14754
14705
|
const { valueText, totalCount } = opts;
|
|
14755
14706
|
function CountTrigger(props) {
|
|
@@ -14798,9 +14749,9 @@ function createCountTrigger(opts) {
|
|
|
14798
14749
|
loading && "!cursor-progress"
|
|
14799
14750
|
),
|
|
14800
14751
|
children: [
|
|
14801
|
-
leftIcon && /* @__PURE__ */
|
|
14802
|
-
/* @__PURE__ */
|
|
14803
|
-
/* @__PURE__ */
|
|
14752
|
+
leftIcon && /* @__PURE__ */ jsx165("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__ */ jsx165("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
14753
|
+
/* @__PURE__ */ jsx165("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
14754
|
+
/* @__PURE__ */ jsx165("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx165(
|
|
14804
14755
|
ChevronDown3,
|
|
14805
14756
|
{
|
|
14806
14757
|
size: 16,
|
|
@@ -14818,7 +14769,7 @@ function createCountTrigger(opts) {
|
|
|
14818
14769
|
}
|
|
14819
14770
|
|
|
14820
14771
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
14821
|
-
import { jsx as
|
|
14772
|
+
import { jsx as jsx166, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
14822
14773
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
14823
14774
|
return /* @__PURE__ */ jsxs104(
|
|
14824
14775
|
"button",
|
|
@@ -14831,7 +14782,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14831
14782
|
disabled && "cursor-default opacity-40"
|
|
14832
14783
|
),
|
|
14833
14784
|
children: [
|
|
14834
|
-
/* @__PURE__ */
|
|
14785
|
+
/* @__PURE__ */ jsx166(
|
|
14835
14786
|
BaseCheckbox,
|
|
14836
14787
|
{
|
|
14837
14788
|
checked,
|
|
@@ -14841,20 +14792,20 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14841
14792
|
className: "pointer-events-none shrink-0"
|
|
14842
14793
|
}
|
|
14843
14794
|
),
|
|
14844
|
-
/* @__PURE__ */
|
|
14795
|
+
/* @__PURE__ */ jsx166("span", { className: "flex-1", children: label })
|
|
14845
14796
|
]
|
|
14846
14797
|
}
|
|
14847
14798
|
);
|
|
14848
14799
|
}
|
|
14849
14800
|
|
|
14850
14801
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14851
|
-
import { Fragment as
|
|
14852
|
-
function
|
|
14802
|
+
import { Fragment as Fragment16, jsx as jsx167 } from "react/jsx-runtime";
|
|
14803
|
+
function hasPaginationProps(props) {
|
|
14853
14804
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
|
|
14854
14805
|
}
|
|
14855
|
-
function
|
|
14806
|
+
function makeTriggerSlot(render) {
|
|
14856
14807
|
function CustomTrigger(props) {
|
|
14857
|
-
return /* @__PURE__ */
|
|
14808
|
+
return /* @__PURE__ */ jsx167(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
|
|
14858
14809
|
}
|
|
14859
14810
|
return CustomTrigger;
|
|
14860
14811
|
}
|
|
@@ -14877,28 +14828,28 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14877
14828
|
...paginationAndRest
|
|
14878
14829
|
} = props;
|
|
14879
14830
|
const { t } = useTranslation37();
|
|
14880
|
-
const isPaginated =
|
|
14831
|
+
const isPaginated = hasPaginationProps(
|
|
14881
14832
|
paginationAndRest
|
|
14882
14833
|
);
|
|
14883
|
-
const [inputValue, setInputValue] =
|
|
14834
|
+
const [inputValue, setInputValue] = React58.useState("");
|
|
14884
14835
|
const isControlled = value !== void 0;
|
|
14885
|
-
const [internalValue, setInternalValue] =
|
|
14836
|
+
const [internalValue, setInternalValue] = React58.useState(
|
|
14886
14837
|
() => defaultValue ?? []
|
|
14887
14838
|
);
|
|
14888
14839
|
const currentValue = isControlled ? value : internalValue;
|
|
14889
|
-
const selected =
|
|
14890
|
-
const handleChange =
|
|
14840
|
+
const selected = React58.useMemo(() => currentValue ?? [], [currentValue]);
|
|
14841
|
+
const handleChange = React58.useCallback(
|
|
14891
14842
|
(next, meta) => {
|
|
14892
14843
|
if (!isControlled) setInternalValue(next);
|
|
14893
14844
|
onChange?.(next, meta);
|
|
14894
14845
|
},
|
|
14895
14846
|
[isControlled, onChange]
|
|
14896
14847
|
);
|
|
14897
|
-
const flatRawOptions =
|
|
14848
|
+
const flatRawOptions = React58.useMemo(
|
|
14898
14849
|
() => flattenGroupedOptions(rawOptions),
|
|
14899
14850
|
[rawOptions]
|
|
14900
14851
|
);
|
|
14901
|
-
const filteredGrouped =
|
|
14852
|
+
const filteredGrouped = React58.useMemo(() => {
|
|
14902
14853
|
const trimmed = inputValue.trim();
|
|
14903
14854
|
if (!trimmed) return rawOptions;
|
|
14904
14855
|
return rawOptions.map((item) => {
|
|
@@ -14909,7 +14860,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14909
14860
|
return filterOption(item, trimmed) ? item : null;
|
|
14910
14861
|
}).filter((item) => item !== null);
|
|
14911
14862
|
}, [rawOptions, inputValue, filterOption]);
|
|
14912
|
-
const filteredFlat =
|
|
14863
|
+
const filteredFlat = React58.useMemo(
|
|
14913
14864
|
() => flattenGroupedOptions(filteredGrouped),
|
|
14914
14865
|
[filteredGrouped]
|
|
14915
14866
|
);
|
|
@@ -14917,7 +14868,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14917
14868
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
14918
14869
|
}, 0);
|
|
14919
14870
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
14920
|
-
const handleToggleAll =
|
|
14871
|
+
const handleToggleAll = React58.useCallback(() => {
|
|
14921
14872
|
if (allVisibleSelected) {
|
|
14922
14873
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
14923
14874
|
handleChange(
|
|
@@ -14932,14 +14883,14 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14932
14883
|
}
|
|
14933
14884
|
handleChange(merged, { action: "select" });
|
|
14934
14885
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
14935
|
-
const Control =
|
|
14936
|
-
if (trigger) return
|
|
14886
|
+
const Control = React58.useMemo(() => {
|
|
14887
|
+
if (trigger) return makeTriggerSlot(trigger);
|
|
14937
14888
|
return createCountTrigger({
|
|
14938
14889
|
valueText,
|
|
14939
14890
|
totalCount: flatRawOptions.length
|
|
14940
14891
|
});
|
|
14941
14892
|
}, [trigger, valueText, flatRawOptions.length]);
|
|
14942
|
-
const components =
|
|
14893
|
+
const components = React58.useMemo(
|
|
14943
14894
|
() => ({
|
|
14944
14895
|
...userComponents,
|
|
14945
14896
|
Control,
|
|
@@ -14947,7 +14898,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14947
14898
|
}),
|
|
14948
14899
|
[userComponents, Control]
|
|
14949
14900
|
);
|
|
14950
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */
|
|
14901
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ jsx167(
|
|
14951
14902
|
SelectAllRow,
|
|
14952
14903
|
{
|
|
14953
14904
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -14955,7 +14906,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14955
14906
|
onToggle: handleToggleAll
|
|
14956
14907
|
}
|
|
14957
14908
|
) : void 0;
|
|
14958
|
-
const handleInputChange =
|
|
14909
|
+
const handleInputChange = React58.useCallback(
|
|
14959
14910
|
(next) => {
|
|
14960
14911
|
setInputValue(next);
|
|
14961
14912
|
onSearchChange?.(next);
|
|
@@ -14975,7 +14926,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14975
14926
|
isMulti: true
|
|
14976
14927
|
};
|
|
14977
14928
|
if (isPaginated) {
|
|
14978
|
-
return /* @__PURE__ */
|
|
14929
|
+
return /* @__PURE__ */ jsx167(
|
|
14979
14930
|
InfiniteScrollSelect,
|
|
14980
14931
|
{
|
|
14981
14932
|
ref,
|
|
@@ -14986,7 +14937,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14986
14937
|
}
|
|
14987
14938
|
);
|
|
14988
14939
|
}
|
|
14989
|
-
return /* @__PURE__ */
|
|
14940
|
+
return /* @__PURE__ */ jsx167(
|
|
14990
14941
|
Select,
|
|
14991
14942
|
{
|
|
14992
14943
|
ref,
|
|
@@ -14997,16 +14948,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14997
14948
|
}
|
|
14998
14949
|
);
|
|
14999
14950
|
}
|
|
15000
|
-
var SelectCheckboxes =
|
|
14951
|
+
var SelectCheckboxes = React58.forwardRef(
|
|
15001
14952
|
SelectCheckboxesInternal
|
|
15002
14953
|
);
|
|
15003
14954
|
|
|
15004
14955
|
// src/dashboard/textarea/Textarea.tsx
|
|
15005
|
-
import * as
|
|
14956
|
+
import * as React60 from "react";
|
|
15006
14957
|
import { useTranslation as useTranslation38 } from "react-i18next";
|
|
15007
14958
|
|
|
15008
14959
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15009
|
-
import * as
|
|
14960
|
+
import * as React59 from "react";
|
|
15010
14961
|
var isEmptyValue2 = (value) => {
|
|
15011
14962
|
if (value === void 0 || value === null) return true;
|
|
15012
14963
|
return String(value).length === 0;
|
|
@@ -15025,12 +14976,12 @@ function useTextareaValueState({
|
|
|
15025
14976
|
value,
|
|
15026
14977
|
defaultValue
|
|
15027
14978
|
}) {
|
|
15028
|
-
const textareaRef =
|
|
14979
|
+
const textareaRef = React59.useRef(null);
|
|
15029
14980
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15030
14981
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15031
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
14982
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React59.useState(propsAreEmpty);
|
|
15032
14983
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15033
|
-
const setNativeValue =
|
|
14984
|
+
const setNativeValue = React59.useCallback(
|
|
15034
14985
|
(nextValue) => {
|
|
15035
14986
|
if (isControlled) return;
|
|
15036
14987
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15040,14 +14991,14 @@ function useTextareaValueState({
|
|
|
15040
14991
|
},
|
|
15041
14992
|
[isControlled]
|
|
15042
14993
|
);
|
|
15043
|
-
const syncValueState =
|
|
14994
|
+
const syncValueState = React59.useCallback(() => {
|
|
15044
14995
|
if (!textareaRef.current) return;
|
|
15045
14996
|
setNativeValue(textareaRef.current.value);
|
|
15046
14997
|
}, [setNativeValue]);
|
|
15047
|
-
|
|
14998
|
+
React59.useLayoutEffect(() => {
|
|
15048
14999
|
syncValueState();
|
|
15049
15000
|
});
|
|
15050
|
-
|
|
15001
|
+
React59.useEffect(() => {
|
|
15051
15002
|
const textarea = textareaRef.current;
|
|
15052
15003
|
const form = textarea?.form;
|
|
15053
15004
|
if (isControlled || !form) return;
|
|
@@ -15071,10 +15022,10 @@ function useTextareaValueState({
|
|
|
15071
15022
|
}
|
|
15072
15023
|
|
|
15073
15024
|
// src/dashboard/textarea/Textarea.tsx
|
|
15074
|
-
import { jsx as
|
|
15025
|
+
import { jsx as jsx168, jsxs as jsxs105 } from "react/jsx-runtime";
|
|
15075
15026
|
var LINE_HEIGHT = 20;
|
|
15076
15027
|
var VERTICAL_PADDING = 32;
|
|
15077
|
-
var Textarea =
|
|
15028
|
+
var Textarea = React60.forwardRef(function Textarea2({
|
|
15078
15029
|
className,
|
|
15079
15030
|
textareaClassName,
|
|
15080
15031
|
label,
|
|
@@ -15102,12 +15053,12 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15102
15053
|
}, ref) {
|
|
15103
15054
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15104
15055
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15105
|
-
const reactId =
|
|
15056
|
+
const reactId = React60.useId();
|
|
15106
15057
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15107
15058
|
const { t } = useTranslation38();
|
|
15108
15059
|
const isInvalid = Boolean(invalid || error);
|
|
15109
15060
|
const isBlocked = Boolean(disabled);
|
|
15110
|
-
const resize =
|
|
15061
|
+
const resize = React60.useCallback(() => {
|
|
15111
15062
|
const el = textareaRef.current;
|
|
15112
15063
|
if (!el || !autosize) return;
|
|
15113
15064
|
el.style.height = "auto";
|
|
@@ -15117,7 +15068,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15117
15068
|
el.style.height = `${nextHeight}px`;
|
|
15118
15069
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15119
15070
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15120
|
-
|
|
15071
|
+
React60.useLayoutEffect(() => {
|
|
15121
15072
|
resize();
|
|
15122
15073
|
}, [resize, value]);
|
|
15123
15074
|
const handleInput = (event) => {
|
|
@@ -15157,11 +15108,11 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15157
15108
|
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15158
15109
|
children: [
|
|
15159
15110
|
label,
|
|
15160
|
-
tooltip && /* @__PURE__ */
|
|
15111
|
+
tooltip && /* @__PURE__ */ jsx168("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx168(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15161
15112
|
]
|
|
15162
15113
|
}
|
|
15163
15114
|
),
|
|
15164
|
-
/* @__PURE__ */
|
|
15115
|
+
/* @__PURE__ */ jsx168(
|
|
15165
15116
|
"textarea",
|
|
15166
15117
|
{
|
|
15167
15118
|
ref: combinedRef,
|
|
@@ -15193,7 +15144,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15193
15144
|
...textareaProps
|
|
15194
15145
|
}
|
|
15195
15146
|
),
|
|
15196
|
-
error && /* @__PURE__ */
|
|
15147
|
+
error && /* @__PURE__ */ jsx168(
|
|
15197
15148
|
FieldErrorMessage,
|
|
15198
15149
|
{
|
|
15199
15150
|
id: `${textareaId}-error`,
|
|
@@ -15201,20 +15152,20 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15201
15152
|
className: "mt-[1px] text-[14px]"
|
|
15202
15153
|
}
|
|
15203
15154
|
),
|
|
15204
|
-
!error && optional && /* @__PURE__ */
|
|
15205
|
-
!error && helperText && /* @__PURE__ */
|
|
15155
|
+
!error && optional && /* @__PURE__ */ jsx168("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
15156
|
+
!error && helperText && /* @__PURE__ */ jsx168("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15206
15157
|
]
|
|
15207
15158
|
}
|
|
15208
15159
|
);
|
|
15209
15160
|
});
|
|
15210
15161
|
|
|
15211
15162
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15212
|
-
import * as
|
|
15163
|
+
import * as React62 from "react";
|
|
15213
15164
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
15214
15165
|
import { useTranslation as useTranslation39 } from "react-i18next";
|
|
15215
15166
|
|
|
15216
15167
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15217
|
-
import * as
|
|
15168
|
+
import * as React61 from "react";
|
|
15218
15169
|
|
|
15219
15170
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15220
15171
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15365,21 +15316,21 @@ function useDatePickerWheel({
|
|
|
15365
15316
|
minDate,
|
|
15366
15317
|
maxDate
|
|
15367
15318
|
}) {
|
|
15368
|
-
const years =
|
|
15369
|
-
const [draftDate, setDraftDate] =
|
|
15319
|
+
const years = React61.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15320
|
+
const [draftDate, setDraftDate] = React61.useState(
|
|
15370
15321
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15371
15322
|
);
|
|
15372
15323
|
const draftYear = draftDate.getFullYear();
|
|
15373
15324
|
const draftMonth = draftDate.getMonth();
|
|
15374
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15375
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15376
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15377
|
-
const monthListRef =
|
|
15378
|
-
const dayListRef =
|
|
15379
|
-
const yearListRef =
|
|
15380
|
-
const settleTimeoutsRef =
|
|
15381
|
-
const animationFramesRef =
|
|
15382
|
-
const columnRefs =
|
|
15325
|
+
const [monthScrollTop, setMonthScrollTop] = React61.useState(0);
|
|
15326
|
+
const [dayScrollTop, setDayScrollTop] = React61.useState(0);
|
|
15327
|
+
const [yearScrollTop, setYearScrollTop] = React61.useState(0);
|
|
15328
|
+
const monthListRef = React61.useRef(null);
|
|
15329
|
+
const dayListRef = React61.useRef(null);
|
|
15330
|
+
const yearListRef = React61.useRef(null);
|
|
15331
|
+
const settleTimeoutsRef = React61.useRef({});
|
|
15332
|
+
const animationFramesRef = React61.useRef({});
|
|
15333
|
+
const columnRefs = React61.useMemo(
|
|
15383
15334
|
() => ({
|
|
15384
15335
|
month: monthListRef,
|
|
15385
15336
|
day: dayListRef,
|
|
@@ -15387,7 +15338,7 @@ function useDatePickerWheel({
|
|
|
15387
15338
|
}),
|
|
15388
15339
|
[]
|
|
15389
15340
|
);
|
|
15390
|
-
const setColumnScrollTop =
|
|
15341
|
+
const setColumnScrollTop = React61.useCallback(
|
|
15391
15342
|
(column, nextScrollTop) => {
|
|
15392
15343
|
if (column === "month") {
|
|
15393
15344
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15401,19 +15352,19 @@ function useDatePickerWheel({
|
|
|
15401
15352
|
},
|
|
15402
15353
|
[]
|
|
15403
15354
|
);
|
|
15404
|
-
const clearSettleTimeout =
|
|
15355
|
+
const clearSettleTimeout = React61.useCallback((column) => {
|
|
15405
15356
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15406
15357
|
if (timeoutId === void 0) return;
|
|
15407
15358
|
window.clearTimeout(timeoutId);
|
|
15408
15359
|
delete settleTimeoutsRef.current[column];
|
|
15409
15360
|
}, []);
|
|
15410
|
-
const clearAnimationFrame =
|
|
15361
|
+
const clearAnimationFrame = React61.useCallback((column) => {
|
|
15411
15362
|
const frameId = animationFramesRef.current[column];
|
|
15412
15363
|
if (frameId === void 0) return;
|
|
15413
15364
|
window.cancelAnimationFrame(frameId);
|
|
15414
15365
|
delete animationFramesRef.current[column];
|
|
15415
15366
|
}, []);
|
|
15416
|
-
|
|
15367
|
+
React61.useEffect(
|
|
15417
15368
|
() => () => {
|
|
15418
15369
|
["month", "day", "year"].forEach((column) => {
|
|
15419
15370
|
clearSettleTimeout(column);
|
|
@@ -15422,22 +15373,22 @@ function useDatePickerWheel({
|
|
|
15422
15373
|
},
|
|
15423
15374
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15424
15375
|
);
|
|
15425
|
-
|
|
15376
|
+
React61.useEffect(() => {
|
|
15426
15377
|
if (isOpen) return;
|
|
15427
15378
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15428
15379
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15429
|
-
const months =
|
|
15380
|
+
const months = React61.useMemo(
|
|
15430
15381
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15431
15382
|
[draftYear, maxDate, minDate]
|
|
15432
15383
|
);
|
|
15433
|
-
const days =
|
|
15384
|
+
const days = React61.useMemo(
|
|
15434
15385
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15435
15386
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15436
15387
|
);
|
|
15437
15388
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15438
15389
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15439
15390
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15440
|
-
const syncScrollPositions =
|
|
15391
|
+
const syncScrollPositions = React61.useCallback(
|
|
15441
15392
|
(nextDate, behavior = "auto") => {
|
|
15442
15393
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15443
15394
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15461,7 +15412,7 @@ function useDatePickerWheel({
|
|
|
15461
15412
|
},
|
|
15462
15413
|
[maxDate, minDate, years]
|
|
15463
15414
|
);
|
|
15464
|
-
|
|
15415
|
+
React61.useLayoutEffect(() => {
|
|
15465
15416
|
if (!isOpen) return;
|
|
15466
15417
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15467
15418
|
setDraftDate(nextDate);
|
|
@@ -15472,7 +15423,7 @@ function useDatePickerWheel({
|
|
|
15472
15423
|
window.cancelAnimationFrame(frameId);
|
|
15473
15424
|
};
|
|
15474
15425
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15475
|
-
const updateDraftDate =
|
|
15426
|
+
const updateDraftDate = React61.useCallback(
|
|
15476
15427
|
(column, targetIndex, behavior = "smooth") => {
|
|
15477
15428
|
const currentDate = stripTime(draftDate);
|
|
15478
15429
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15517,7 +15468,7 @@ function useDatePickerWheel({
|
|
|
15517
15468
|
},
|
|
15518
15469
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15519
15470
|
);
|
|
15520
|
-
const settleColumnScroll =
|
|
15471
|
+
const settleColumnScroll = React61.useCallback(
|
|
15521
15472
|
(column) => {
|
|
15522
15473
|
const list = columnRefs[column].current;
|
|
15523
15474
|
if (!list) return;
|
|
@@ -15530,7 +15481,7 @@ function useDatePickerWheel({
|
|
|
15530
15481
|
},
|
|
15531
15482
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15532
15483
|
);
|
|
15533
|
-
const scheduleScrollSettle =
|
|
15484
|
+
const scheduleScrollSettle = React61.useCallback(
|
|
15534
15485
|
(column) => {
|
|
15535
15486
|
clearSettleTimeout(column);
|
|
15536
15487
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15539,7 +15490,7 @@ function useDatePickerWheel({
|
|
|
15539
15490
|
},
|
|
15540
15491
|
[clearSettleTimeout, settleColumnScroll]
|
|
15541
15492
|
);
|
|
15542
|
-
const handleColumnScroll =
|
|
15493
|
+
const handleColumnScroll = React61.useCallback(
|
|
15543
15494
|
(column) => {
|
|
15544
15495
|
const list = columnRefs[column].current;
|
|
15545
15496
|
if (!list) return;
|
|
@@ -15553,13 +15504,13 @@ function useDatePickerWheel({
|
|
|
15553
15504
|
},
|
|
15554
15505
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15555
15506
|
);
|
|
15556
|
-
const handleOptionSelect =
|
|
15507
|
+
const handleOptionSelect = React61.useCallback(
|
|
15557
15508
|
(column, targetIndex) => {
|
|
15558
15509
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15559
15510
|
},
|
|
15560
15511
|
[updateDraftDate]
|
|
15561
15512
|
);
|
|
15562
|
-
const focusAdjacentColumn =
|
|
15513
|
+
const focusAdjacentColumn = React61.useCallback(
|
|
15563
15514
|
(column, direction) => {
|
|
15564
15515
|
const order = ["month", "day", "year"];
|
|
15565
15516
|
const currentIndex = order.indexOf(column);
|
|
@@ -15569,7 +15520,7 @@ function useDatePickerWheel({
|
|
|
15569
15520
|
},
|
|
15570
15521
|
[columnRefs]
|
|
15571
15522
|
);
|
|
15572
|
-
const handleColumnKeyDown =
|
|
15523
|
+
const handleColumnKeyDown = React61.useCallback(
|
|
15573
15524
|
(column, event) => {
|
|
15574
15525
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15575
15526
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15635,7 +15586,7 @@ function useDatePickerWheel({
|
|
|
15635
15586
|
}
|
|
15636
15587
|
|
|
15637
15588
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
15638
|
-
import { jsx as
|
|
15589
|
+
import { jsx as jsx169, jsxs as jsxs106 } from "react/jsx-runtime";
|
|
15639
15590
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
15640
15591
|
function AirbnbDatePickerWheelColumn({
|
|
15641
15592
|
id,
|
|
@@ -15649,7 +15600,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15649
15600
|
onOptionSelect,
|
|
15650
15601
|
column
|
|
15651
15602
|
}) {
|
|
15652
|
-
return /* @__PURE__ */
|
|
15603
|
+
return /* @__PURE__ */ jsx169("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs106(
|
|
15653
15604
|
"div",
|
|
15654
15605
|
{
|
|
15655
15606
|
id,
|
|
@@ -15666,14 +15617,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15666
15617
|
WebkitOverflowScrolling: "touch"
|
|
15667
15618
|
},
|
|
15668
15619
|
children: [
|
|
15669
|
-
/* @__PURE__ */
|
|
15620
|
+
/* @__PURE__ */ jsx169("div", { style: { height: `${spacerHeight}px` } }),
|
|
15670
15621
|
items.map((item, index) => {
|
|
15671
15622
|
const { style } = getWheelOptionStyles(
|
|
15672
15623
|
index,
|
|
15673
15624
|
scrollTop,
|
|
15674
15625
|
DATE_PICKER_OPTION_HEIGHT
|
|
15675
15626
|
);
|
|
15676
|
-
return /* @__PURE__ */
|
|
15627
|
+
return /* @__PURE__ */ jsx169(
|
|
15677
15628
|
"button",
|
|
15678
15629
|
{
|
|
15679
15630
|
id: `${id}-option-${index}`,
|
|
@@ -15689,14 +15640,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15689
15640
|
`${column}-${item}-${index}`
|
|
15690
15641
|
);
|
|
15691
15642
|
}),
|
|
15692
|
-
/* @__PURE__ */
|
|
15643
|
+
/* @__PURE__ */ jsx169("div", { style: { height: `${spacerHeight}px` } })
|
|
15693
15644
|
]
|
|
15694
15645
|
}
|
|
15695
15646
|
) });
|
|
15696
15647
|
}
|
|
15697
15648
|
|
|
15698
15649
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
15699
|
-
import { jsx as
|
|
15650
|
+
import { jsx as jsx170, jsxs as jsxs107 } from "react/jsx-runtime";
|
|
15700
15651
|
function AirbnbDatePickerBody({
|
|
15701
15652
|
baseId,
|
|
15702
15653
|
label,
|
|
@@ -15720,9 +15671,9 @@ function AirbnbDatePickerBody({
|
|
|
15720
15671
|
}) {
|
|
15721
15672
|
return /* @__PURE__ */ jsxs107("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
|
|
15722
15673
|
/* @__PURE__ */ jsxs107("div", { className: "relative overflow-hidden rounded-[24px]", children: [
|
|
15723
|
-
/* @__PURE__ */
|
|
15724
|
-
/* @__PURE__ */
|
|
15725
|
-
/* @__PURE__ */
|
|
15674
|
+
/* @__PURE__ */ jsx170("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" }),
|
|
15675
|
+
/* @__PURE__ */ jsx170("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" }),
|
|
15676
|
+
/* @__PURE__ */ jsx170(
|
|
15726
15677
|
"div",
|
|
15727
15678
|
{
|
|
15728
15679
|
"aria-hidden": true,
|
|
@@ -15730,7 +15681,7 @@ function AirbnbDatePickerBody({
|
|
|
15730
15681
|
}
|
|
15731
15682
|
),
|
|
15732
15683
|
/* @__PURE__ */ jsxs107("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
|
|
15733
|
-
/* @__PURE__ */
|
|
15684
|
+
/* @__PURE__ */ jsx170(
|
|
15734
15685
|
AirbnbDatePickerWheelColumn,
|
|
15735
15686
|
{
|
|
15736
15687
|
id: `${baseId}-month`,
|
|
@@ -15745,7 +15696,7 @@ function AirbnbDatePickerBody({
|
|
|
15745
15696
|
onOptionSelect
|
|
15746
15697
|
}
|
|
15747
15698
|
),
|
|
15748
|
-
/* @__PURE__ */
|
|
15699
|
+
/* @__PURE__ */ jsx170(
|
|
15749
15700
|
AirbnbDatePickerWheelColumn,
|
|
15750
15701
|
{
|
|
15751
15702
|
id: `${baseId}-day`,
|
|
@@ -15760,7 +15711,7 @@ function AirbnbDatePickerBody({
|
|
|
15760
15711
|
onOptionSelect
|
|
15761
15712
|
}
|
|
15762
15713
|
),
|
|
15763
|
-
/* @__PURE__ */
|
|
15714
|
+
/* @__PURE__ */ jsx170(
|
|
15764
15715
|
AirbnbDatePickerWheelColumn,
|
|
15765
15716
|
{
|
|
15766
15717
|
id: `${baseId}-year`,
|
|
@@ -15777,7 +15728,7 @@ function AirbnbDatePickerBody({
|
|
|
15777
15728
|
)
|
|
15778
15729
|
] })
|
|
15779
15730
|
] }),
|
|
15780
|
-
/* @__PURE__ */
|
|
15731
|
+
/* @__PURE__ */ jsx170(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
15781
15732
|
] });
|
|
15782
15733
|
}
|
|
15783
15734
|
function AirbnbDatePickerContent({
|
|
@@ -15805,7 +15756,7 @@ function AirbnbDatePickerContent({
|
|
|
15805
15756
|
onColumnKeyDown,
|
|
15806
15757
|
onOptionSelect
|
|
15807
15758
|
}) {
|
|
15808
|
-
const body = /* @__PURE__ */
|
|
15759
|
+
const body = /* @__PURE__ */ jsx170(
|
|
15809
15760
|
AirbnbDatePickerBody,
|
|
15810
15761
|
{
|
|
15811
15762
|
baseId,
|
|
@@ -15830,27 +15781,27 @@ function AirbnbDatePickerContent({
|
|
|
15830
15781
|
}
|
|
15831
15782
|
);
|
|
15832
15783
|
if (isMobile3) {
|
|
15833
|
-
return /* @__PURE__ */
|
|
15784
|
+
return /* @__PURE__ */ jsx170(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15834
15785
|
DrawerContent,
|
|
15835
15786
|
{
|
|
15836
15787
|
onClose: () => onOpenChange(false),
|
|
15837
15788
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
15838
15789
|
children: [
|
|
15839
|
-
/* @__PURE__ */
|
|
15840
|
-
/* @__PURE__ */
|
|
15790
|
+
/* @__PURE__ */ jsx170(DrawerTitle, { className: "sr-only", children: title }),
|
|
15791
|
+
/* @__PURE__ */ jsx170(DrawerDescription, { className: "sr-only", children: label }),
|
|
15841
15792
|
body
|
|
15842
15793
|
]
|
|
15843
15794
|
}
|
|
15844
15795
|
) });
|
|
15845
15796
|
}
|
|
15846
|
-
return /* @__PURE__ */
|
|
15797
|
+
return /* @__PURE__ */ jsx170(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15847
15798
|
DialogContent,
|
|
15848
15799
|
{
|
|
15849
15800
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
15850
15801
|
showCloseButton: false,
|
|
15851
15802
|
children: [
|
|
15852
|
-
/* @__PURE__ */
|
|
15853
|
-
/* @__PURE__ */
|
|
15803
|
+
/* @__PURE__ */ jsx170(DialogTitle, { className: "sr-only", children: title }),
|
|
15804
|
+
/* @__PURE__ */ jsx170(DialogDescription, { className: "sr-only", children: label }),
|
|
15854
15805
|
body
|
|
15855
15806
|
]
|
|
15856
15807
|
}
|
|
@@ -15858,7 +15809,7 @@ function AirbnbDatePickerContent({
|
|
|
15858
15809
|
}
|
|
15859
15810
|
|
|
15860
15811
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15861
|
-
import { jsx as
|
|
15812
|
+
import { jsx as jsx171, jsxs as jsxs108 } from "react/jsx-runtime";
|
|
15862
15813
|
var MONTHS_IN_YEAR2 = 12;
|
|
15863
15814
|
function getMonthLabels2(locale) {
|
|
15864
15815
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -15891,7 +15842,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
15891
15842
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
15892
15843
|
return new Date(yearNum, monthIndex, dayNum);
|
|
15893
15844
|
}
|
|
15894
|
-
var Datepicker =
|
|
15845
|
+
var Datepicker = React62.forwardRef(
|
|
15895
15846
|
function Datepicker2({
|
|
15896
15847
|
label,
|
|
15897
15848
|
value,
|
|
@@ -15921,14 +15872,14 @@ var Datepicker = React63.forwardRef(
|
|
|
15921
15872
|
maxDate,
|
|
15922
15873
|
formatValue
|
|
15923
15874
|
}, ref) {
|
|
15924
|
-
const containerRef =
|
|
15925
|
-
const dayInputRef =
|
|
15926
|
-
const monthInputRef =
|
|
15927
|
-
const monthListRef =
|
|
15928
|
-
const yearInputRef =
|
|
15929
|
-
const mobileTriggerRef =
|
|
15930
|
-
const wheelBaseId =
|
|
15931
|
-
const reactId =
|
|
15875
|
+
const containerRef = React62.useRef(null);
|
|
15876
|
+
const dayInputRef = React62.useRef(null);
|
|
15877
|
+
const monthInputRef = React62.useRef(null);
|
|
15878
|
+
const monthListRef = React62.useRef(null);
|
|
15879
|
+
const yearInputRef = React62.useRef(null);
|
|
15880
|
+
const mobileTriggerRef = React62.useRef(null);
|
|
15881
|
+
const wheelBaseId = React62.useId();
|
|
15882
|
+
const reactId = React62.useId();
|
|
15932
15883
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
15933
15884
|
const dayId = `${baseId}-day`;
|
|
15934
15885
|
const monthId = `${baseId}-month`;
|
|
@@ -15937,55 +15888,55 @@ var Datepicker = React63.forwardRef(
|
|
|
15937
15888
|
const errorId = `${baseId}-error`;
|
|
15938
15889
|
const { t, i18n } = useTranslation39();
|
|
15939
15890
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
15940
|
-
const resolvedMonthLabels =
|
|
15891
|
+
const resolvedMonthLabels = React62.useMemo(
|
|
15941
15892
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
15942
15893
|
[resolvedLocale, monthLabels]
|
|
15943
15894
|
);
|
|
15944
15895
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
15945
15896
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
15946
15897
|
const isControlled = value !== void 0;
|
|
15947
|
-
const initialParts =
|
|
15898
|
+
const initialParts = React62.useMemo(
|
|
15948
15899
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
15949
15900
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15950
15901
|
[]
|
|
15951
15902
|
);
|
|
15952
|
-
const [day, setDay] =
|
|
15953
|
-
const [monthIndex, setMonthIndex] =
|
|
15903
|
+
const [day, setDay] = React62.useState(initialParts.day);
|
|
15904
|
+
const [monthIndex, setMonthIndex] = React62.useState(
|
|
15954
15905
|
initialParts.monthIndex
|
|
15955
15906
|
);
|
|
15956
|
-
const [year, setYear] =
|
|
15957
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
15958
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
15959
|
-
const [focusedField, setFocusedField] =
|
|
15960
|
-
const [monthInputValue, setMonthInputValue] =
|
|
15961
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
15907
|
+
const [year, setYear] = React62.useState(initialParts.year);
|
|
15908
|
+
const [isMonthOpen, setIsMonthOpen] = React62.useState(false);
|
|
15909
|
+
const [isWheelOpen, setIsWheelOpen] = React62.useState(false);
|
|
15910
|
+
const [focusedField, setFocusedField] = React62.useState(null);
|
|
15911
|
+
const [monthInputValue, setMonthInputValue] = React62.useState("");
|
|
15912
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React62.useState(-1);
|
|
15962
15913
|
const isMobile3 = useIsMobile();
|
|
15963
|
-
|
|
15914
|
+
React62.useImperativeHandle(
|
|
15964
15915
|
ref,
|
|
15965
15916
|
() => dayInputRef.current ?? mobileTriggerRef.current,
|
|
15966
15917
|
[]
|
|
15967
15918
|
);
|
|
15968
|
-
|
|
15919
|
+
React62.useEffect(() => {
|
|
15969
15920
|
if (!isControlled) return;
|
|
15970
15921
|
const next = partsFromDate(value ?? null);
|
|
15971
15922
|
setDay(next.day);
|
|
15972
15923
|
setMonthIndex(next.monthIndex);
|
|
15973
15924
|
setYear(next.year);
|
|
15974
15925
|
}, [isControlled, value]);
|
|
15975
|
-
|
|
15926
|
+
React62.useEffect(() => {
|
|
15976
15927
|
if (focusedField === "month") return;
|
|
15977
15928
|
setMonthInputValue(
|
|
15978
15929
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
15979
15930
|
);
|
|
15980
15931
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
15981
|
-
const filteredMonths =
|
|
15932
|
+
const filteredMonths = React62.useMemo(() => {
|
|
15982
15933
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
15983
15934
|
const query = monthInputValue.trim().toLowerCase();
|
|
15984
15935
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
15985
15936
|
if (!query || monthInputValue === currentLabel) return all;
|
|
15986
15937
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
15987
15938
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
15988
|
-
|
|
15939
|
+
React62.useEffect(() => {
|
|
15989
15940
|
if (!isMonthOpen) {
|
|
15990
15941
|
setMonthHighlightIndex(-1);
|
|
15991
15942
|
return;
|
|
@@ -16006,7 +15957,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16006
15957
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16007
15958
|
const isInvalid = Boolean(invalid || error);
|
|
16008
15959
|
const wrapperWidth = toCssSize(width);
|
|
16009
|
-
const currentDate =
|
|
15960
|
+
const currentDate = React62.useMemo(
|
|
16010
15961
|
() => dateFromParts(day, monthIndex, year),
|
|
16011
15962
|
[day, monthIndex, year]
|
|
16012
15963
|
);
|
|
@@ -16015,7 +15966,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16015
15966
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16016
15967
|
isDisabled: !isMonthOpen || isMobile3
|
|
16017
15968
|
});
|
|
16018
|
-
const emitChange =
|
|
15969
|
+
const emitChange = React62.useCallback(
|
|
16019
15970
|
(nextDay, nextMonth, nextYear) => {
|
|
16020
15971
|
if (!onChange) return;
|
|
16021
15972
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16050,7 +16001,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16050
16001
|
setIsMonthOpen(true);
|
|
16051
16002
|
setMonthHighlightIndex(0);
|
|
16052
16003
|
};
|
|
16053
|
-
const commitMonthInput =
|
|
16004
|
+
const commitMonthInput = React62.useCallback(() => {
|
|
16054
16005
|
const query = monthInputValue.trim().toLowerCase();
|
|
16055
16006
|
if (!query) {
|
|
16056
16007
|
if (monthIndex !== null) {
|
|
@@ -16110,15 +16061,15 @@ var Datepicker = React63.forwardRef(
|
|
|
16110
16061
|
setIsMonthOpen(false);
|
|
16111
16062
|
}
|
|
16112
16063
|
};
|
|
16113
|
-
const focusDayInput =
|
|
16064
|
+
const focusDayInput = React62.useCallback(() => {
|
|
16114
16065
|
if (isBlocked || readOnly) return;
|
|
16115
16066
|
dayInputRef.current?.focus();
|
|
16116
16067
|
}, [isBlocked, readOnly]);
|
|
16117
|
-
const openWheel =
|
|
16068
|
+
const openWheel = React62.useCallback(() => {
|
|
16118
16069
|
if (isBlocked || readOnly) return;
|
|
16119
16070
|
setIsWheelOpen(true);
|
|
16120
16071
|
}, [isBlocked, readOnly]);
|
|
16121
|
-
const closeWheel =
|
|
16072
|
+
const closeWheel = React62.useCallback(() => {
|
|
16122
16073
|
setIsWheelOpen(false);
|
|
16123
16074
|
mobileTriggerRef.current?.focus();
|
|
16124
16075
|
}, []);
|
|
@@ -16130,7 +16081,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16130
16081
|
minDate,
|
|
16131
16082
|
maxDate
|
|
16132
16083
|
});
|
|
16133
|
-
const handleWheelDone =
|
|
16084
|
+
const handleWheelDone = React62.useCallback(() => {
|
|
16134
16085
|
const next = wheel.draftDate;
|
|
16135
16086
|
setDay(String(next.getDate()));
|
|
16136
16087
|
setMonthIndex(next.getMonth());
|
|
@@ -16139,14 +16090,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16139
16090
|
setIsWheelOpen(false);
|
|
16140
16091
|
mobileTriggerRef.current?.focus();
|
|
16141
16092
|
}, [name, onChange, wheel.draftDate]);
|
|
16142
|
-
const defaultFormatValue =
|
|
16093
|
+
const defaultFormatValue = React62.useCallback(
|
|
16143
16094
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16144
16095
|
[resolvedMonthLabels]
|
|
16145
16096
|
);
|
|
16146
16097
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16147
16098
|
const monthListboxId = `${monthId}-listbox`;
|
|
16148
16099
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16149
|
-
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */
|
|
16100
|
+
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ jsx171("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ jsx171(
|
|
16150
16101
|
"ul",
|
|
16151
16102
|
{
|
|
16152
16103
|
ref: monthListRef,
|
|
@@ -16157,7 +16108,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16157
16108
|
children: filteredMonths.map((option, position) => {
|
|
16158
16109
|
const isSelected = option.index === monthIndex;
|
|
16159
16110
|
const isHighlighted = position === monthHighlightIndex;
|
|
16160
|
-
return /* @__PURE__ */
|
|
16111
|
+
return /* @__PURE__ */ jsx171("li", { role: "presentation", children: /* @__PURE__ */ jsx171(
|
|
16161
16112
|
"button",
|
|
16162
16113
|
{
|
|
16163
16114
|
id: getMonthOptionId(option.index),
|
|
@@ -16184,7 +16135,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16184
16135
|
isBlocked && "cursor-not-allowed",
|
|
16185
16136
|
loading && "cursor-progress"
|
|
16186
16137
|
);
|
|
16187
|
-
return /* @__PURE__ */
|
|
16138
|
+
return /* @__PURE__ */ jsx171(
|
|
16188
16139
|
"div",
|
|
16189
16140
|
{
|
|
16190
16141
|
ref: containerRef,
|
|
@@ -16216,8 +16167,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16216
16167
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16217
16168
|
),
|
|
16218
16169
|
children: [
|
|
16219
|
-
/* @__PURE__ */
|
|
16220
|
-
/* @__PURE__ */
|
|
16170
|
+
/* @__PURE__ */ jsx171("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
16171
|
+
/* @__PURE__ */ jsx171("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx171(
|
|
16221
16172
|
ChevronDown4,
|
|
16222
16173
|
{
|
|
16223
16174
|
size: 16,
|
|
@@ -16236,7 +16187,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16236
16187
|
"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)]"
|
|
16237
16188
|
),
|
|
16238
16189
|
children: [
|
|
16239
|
-
/* @__PURE__ */
|
|
16190
|
+
/* @__PURE__ */ jsx171("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx171(
|
|
16240
16191
|
"input",
|
|
16241
16192
|
{
|
|
16242
16193
|
ref: dayInputRef,
|
|
@@ -16259,7 +16210,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16259
16210
|
}
|
|
16260
16211
|
) }),
|
|
16261
16212
|
/* @__PURE__ */ jsxs108("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: [
|
|
16262
|
-
/* @__PURE__ */
|
|
16213
|
+
/* @__PURE__ */ jsx171(
|
|
16263
16214
|
"input",
|
|
16264
16215
|
{
|
|
16265
16216
|
ref: monthInputRef,
|
|
@@ -16302,7 +16253,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16302
16253
|
)
|
|
16303
16254
|
}
|
|
16304
16255
|
),
|
|
16305
|
-
/* @__PURE__ */
|
|
16256
|
+
/* @__PURE__ */ jsx171(
|
|
16306
16257
|
ChevronDown4,
|
|
16307
16258
|
{
|
|
16308
16259
|
size: 14,
|
|
@@ -16319,7 +16270,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16319
16270
|
}
|
|
16320
16271
|
)
|
|
16321
16272
|
] }),
|
|
16322
|
-
/* @__PURE__ */
|
|
16273
|
+
/* @__PURE__ */ jsx171("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx171(
|
|
16323
16274
|
"input",
|
|
16324
16275
|
{
|
|
16325
16276
|
ref: yearInputRef,
|
|
@@ -16344,7 +16295,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16344
16295
|
]
|
|
16345
16296
|
}
|
|
16346
16297
|
),
|
|
16347
|
-
showCoverage && /* @__PURE__ */
|
|
16298
|
+
showCoverage && /* @__PURE__ */ jsx171(
|
|
16348
16299
|
"div",
|
|
16349
16300
|
{
|
|
16350
16301
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16352,7 +16303,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16352
16303
|
"aria-hidden": "true"
|
|
16353
16304
|
}
|
|
16354
16305
|
),
|
|
16355
|
-
/* @__PURE__ */
|
|
16306
|
+
/* @__PURE__ */ jsx171(
|
|
16356
16307
|
Fieldset,
|
|
16357
16308
|
{
|
|
16358
16309
|
isFocused,
|
|
@@ -16370,9 +16321,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16370
16321
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16371
16322
|
}
|
|
16372
16323
|
),
|
|
16373
|
-
isMonthOpen && !isMobile3 && /* @__PURE__ */
|
|
16324
|
+
isMonthOpen && !isMobile3 && /* @__PURE__ */ jsx171("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 })
|
|
16374
16325
|
] }),
|
|
16375
|
-
isMobile3 && /* @__PURE__ */
|
|
16326
|
+
isMobile3 && /* @__PURE__ */ jsx171(
|
|
16376
16327
|
AirbnbDatePickerContent,
|
|
16377
16328
|
{
|
|
16378
16329
|
baseId: wheelBaseId,
|
|
@@ -16400,9 +16351,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16400
16351
|
onOptionSelect: wheel.handleOptionSelect
|
|
16401
16352
|
}
|
|
16402
16353
|
),
|
|
16403
|
-
!error && optional && /* @__PURE__ */
|
|
16404
|
-
!error && helperText && /* @__PURE__ */
|
|
16405
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
16354
|
+
!error && optional && /* @__PURE__ */ jsx171("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
16355
|
+
!error && helperText && /* @__PURE__ */ jsx171("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16356
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx171(
|
|
16406
16357
|
FieldErrorMessage,
|
|
16407
16358
|
{
|
|
16408
16359
|
id: errorId,
|
|
@@ -16417,7 +16368,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16417
16368
|
);
|
|
16418
16369
|
|
|
16419
16370
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16420
|
-
import * as
|
|
16371
|
+
import * as React66 from "react";
|
|
16421
16372
|
import { useTranslation as useTranslation40 } from "react-i18next";
|
|
16422
16373
|
|
|
16423
16374
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16496,7 +16447,7 @@ var createDisabledMatchers = ({
|
|
|
16496
16447
|
};
|
|
16497
16448
|
|
|
16498
16449
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16499
|
-
import * as
|
|
16450
|
+
import * as React63 from "react";
|
|
16500
16451
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16501
16452
|
function useRangeValue({
|
|
16502
16453
|
value: externalValue,
|
|
@@ -16505,10 +16456,10 @@ function useRangeValue({
|
|
|
16505
16456
|
name
|
|
16506
16457
|
}) {
|
|
16507
16458
|
const isControlled = externalValue !== void 0;
|
|
16508
|
-
const [draft, setDraft] =
|
|
16459
|
+
const [draft, setDraft] = React63.useState(
|
|
16509
16460
|
isControlled ? externalValue : defaultValue
|
|
16510
16461
|
);
|
|
16511
|
-
const lastExternalKeyRef =
|
|
16462
|
+
const lastExternalKeyRef = React63.useRef(getRangeKey(externalValue));
|
|
16512
16463
|
if (isControlled) {
|
|
16513
16464
|
const externalKey = getRangeKey(externalValue);
|
|
16514
16465
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16516,7 +16467,7 @@ function useRangeValue({
|
|
|
16516
16467
|
setDraft(externalValue);
|
|
16517
16468
|
}
|
|
16518
16469
|
}
|
|
16519
|
-
const commit =
|
|
16470
|
+
const commit = React63.useCallback(
|
|
16520
16471
|
(next) => {
|
|
16521
16472
|
setDraft(next);
|
|
16522
16473
|
if (next === void 0) {
|
|
@@ -16531,7 +16482,7 @@ function useRangeValue({
|
|
|
16531
16482
|
}
|
|
16532
16483
|
|
|
16533
16484
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16534
|
-
import * as
|
|
16485
|
+
import * as React64 from "react";
|
|
16535
16486
|
function useRangeTextInputs({
|
|
16536
16487
|
value,
|
|
16537
16488
|
format: format2,
|
|
@@ -16539,13 +16490,13 @@ function useRangeTextInputs({
|
|
|
16539
16490
|
onCommit,
|
|
16540
16491
|
onBlur
|
|
16541
16492
|
}) {
|
|
16542
|
-
const [fromText, setFromText] =
|
|
16543
|
-
const [toText, setToText] =
|
|
16544
|
-
|
|
16493
|
+
const [fromText, setFromText] = React64.useState(value?.from ? format2(value.from) : "");
|
|
16494
|
+
const [toText, setToText] = React64.useState(value?.to ? format2(value.to) : "");
|
|
16495
|
+
React64.useEffect(() => {
|
|
16545
16496
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16546
16497
|
setToText(value?.to ? format2(value.to) : "");
|
|
16547
16498
|
}, [format2, value?.from, value?.to]);
|
|
16548
|
-
const handleFromBlur =
|
|
16499
|
+
const handleFromBlur = React64.useCallback(() => {
|
|
16549
16500
|
if (!fromText) {
|
|
16550
16501
|
const next = { from: void 0, to: value?.to };
|
|
16551
16502
|
onCommit(next);
|
|
@@ -16562,7 +16513,7 @@ function useRangeTextInputs({
|
|
|
16562
16513
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16563
16514
|
return void 0;
|
|
16564
16515
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16565
|
-
const handleToBlur =
|
|
16516
|
+
const handleToBlur = React64.useCallback(() => {
|
|
16566
16517
|
if (!toText) {
|
|
16567
16518
|
const next = { from: value?.from, to: void 0 };
|
|
16568
16519
|
onCommit(next);
|
|
@@ -16589,21 +16540,21 @@ function useRangeTextInputs({
|
|
|
16589
16540
|
}
|
|
16590
16541
|
|
|
16591
16542
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16592
|
-
import * as
|
|
16543
|
+
import * as React65 from "react";
|
|
16593
16544
|
function useRangeMonthSync(value) {
|
|
16594
|
-
const isPreloadedRef =
|
|
16595
|
-
const [month, setMonth] =
|
|
16596
|
-
|
|
16545
|
+
const isPreloadedRef = React65.useRef(false);
|
|
16546
|
+
const [month, setMonth] = React65.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16547
|
+
React65.useEffect(() => {
|
|
16597
16548
|
if (value?.from && !isPreloadedRef.current) {
|
|
16598
16549
|
setMonth(value.from);
|
|
16599
16550
|
isPreloadedRef.current = true;
|
|
16600
16551
|
}
|
|
16601
16552
|
}, [value?.from]);
|
|
16602
|
-
const syncMonthToValue =
|
|
16553
|
+
const syncMonthToValue = React65.useCallback((next) => {
|
|
16603
16554
|
isPreloadedRef.current = true;
|
|
16604
16555
|
if (next?.from) setMonth(next.from);
|
|
16605
16556
|
}, []);
|
|
16606
|
-
const resetPreload =
|
|
16557
|
+
const resetPreload = React65.useCallback(() => {
|
|
16607
16558
|
isPreloadedRef.current = false;
|
|
16608
16559
|
}, []);
|
|
16609
16560
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -16629,7 +16580,7 @@ function resolveRangeSelection({
|
|
|
16629
16580
|
|
|
16630
16581
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
16631
16582
|
import { CalendarDays, SquareX as SquareX3 } from "lucide-react";
|
|
16632
|
-
import { jsx as
|
|
16583
|
+
import { jsx as jsx172, jsxs as jsxs109 } from "react/jsx-runtime";
|
|
16633
16584
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
16634
16585
|
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)]";
|
|
16635
16586
|
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";
|
|
@@ -16680,7 +16631,7 @@ function DateRangeInputs({
|
|
|
16680
16631
|
),
|
|
16681
16632
|
onClick: onRowClick,
|
|
16682
16633
|
children: [
|
|
16683
|
-
/* @__PURE__ */
|
|
16634
|
+
/* @__PURE__ */ jsx172(
|
|
16684
16635
|
"input",
|
|
16685
16636
|
{
|
|
16686
16637
|
ref: fromInputRef,
|
|
@@ -16704,7 +16655,7 @@ function DateRangeInputs({
|
|
|
16704
16655
|
)
|
|
16705
16656
|
}
|
|
16706
16657
|
),
|
|
16707
|
-
/* @__PURE__ */
|
|
16658
|
+
/* @__PURE__ */ jsx172(
|
|
16708
16659
|
"span",
|
|
16709
16660
|
{
|
|
16710
16661
|
"aria-hidden": "true",
|
|
@@ -16715,7 +16666,7 @@ function DateRangeInputs({
|
|
|
16715
16666
|
children: "\u2192"
|
|
16716
16667
|
}
|
|
16717
16668
|
),
|
|
16718
|
-
/* @__PURE__ */
|
|
16669
|
+
/* @__PURE__ */ jsx172(
|
|
16719
16670
|
"input",
|
|
16720
16671
|
{
|
|
16721
16672
|
ref: toInputRef,
|
|
@@ -16740,7 +16691,7 @@ function DateRangeInputs({
|
|
|
16740
16691
|
}
|
|
16741
16692
|
),
|
|
16742
16693
|
/* @__PURE__ */ jsxs109("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
16743
|
-
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */
|
|
16694
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx172(
|
|
16744
16695
|
"button",
|
|
16745
16696
|
{
|
|
16746
16697
|
type: "button",
|
|
@@ -16748,10 +16699,10 @@ function DateRangeInputs({
|
|
|
16748
16699
|
onClick: onReset,
|
|
16749
16700
|
className: iconButtonClass,
|
|
16750
16701
|
"aria-label": clearLabel,
|
|
16751
|
-
children: /* @__PURE__ */
|
|
16702
|
+
children: /* @__PURE__ */ jsx172(SquareX3, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
16752
16703
|
}
|
|
16753
16704
|
),
|
|
16754
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */
|
|
16705
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx172(
|
|
16755
16706
|
"button",
|
|
16756
16707
|
{
|
|
16757
16708
|
type: "button",
|
|
@@ -16763,7 +16714,7 @@ function DateRangeInputs({
|
|
|
16763
16714
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
16764
16715
|
),
|
|
16765
16716
|
"aria-label": openCalendarLabel,
|
|
16766
|
-
children: /* @__PURE__ */
|
|
16717
|
+
children: /* @__PURE__ */ jsx172(CalendarDays, { size: 18 })
|
|
16767
16718
|
}
|
|
16768
16719
|
)
|
|
16769
16720
|
] })
|
|
@@ -16773,7 +16724,7 @@ function DateRangeInputs({
|
|
|
16773
16724
|
}
|
|
16774
16725
|
|
|
16775
16726
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
16776
|
-
import { jsx as
|
|
16727
|
+
import { jsx as jsx173 } from "react/jsx-runtime";
|
|
16777
16728
|
function DateRangeCalendar({
|
|
16778
16729
|
value,
|
|
16779
16730
|
month,
|
|
@@ -16789,7 +16740,7 @@ function DateRangeCalendar({
|
|
|
16789
16740
|
components,
|
|
16790
16741
|
...dayPickerProps
|
|
16791
16742
|
}) {
|
|
16792
|
-
return /* @__PURE__ */
|
|
16743
|
+
return /* @__PURE__ */ jsx173(
|
|
16793
16744
|
Calendar,
|
|
16794
16745
|
{
|
|
16795
16746
|
mode: "range",
|
|
@@ -16812,7 +16763,7 @@ function DateRangeCalendar({
|
|
|
16812
16763
|
}
|
|
16813
16764
|
|
|
16814
16765
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
16815
|
-
import { jsx as
|
|
16766
|
+
import { jsx as jsx174, jsxs as jsxs110 } from "react/jsx-runtime";
|
|
16816
16767
|
function DateRangePopover({
|
|
16817
16768
|
isOpen,
|
|
16818
16769
|
isMobile: isMobile3,
|
|
@@ -16824,7 +16775,7 @@ function DateRangePopover({
|
|
|
16824
16775
|
}) {
|
|
16825
16776
|
if (!isOpen) return null;
|
|
16826
16777
|
if (isMobile3) {
|
|
16827
|
-
return /* @__PURE__ */
|
|
16778
|
+
return /* @__PURE__ */ jsx174(
|
|
16828
16779
|
Drawer,
|
|
16829
16780
|
{
|
|
16830
16781
|
open: isOpen,
|
|
@@ -16838,16 +16789,16 @@ function DateRangePopover({
|
|
|
16838
16789
|
lockScroll: false,
|
|
16839
16790
|
className: "max-h-[calc(100vh-1rem)]",
|
|
16840
16791
|
children: [
|
|
16841
|
-
/* @__PURE__ */
|
|
16842
|
-
/* @__PURE__ */
|
|
16843
|
-
/* @__PURE__ */
|
|
16792
|
+
/* @__PURE__ */ jsx174(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
16793
|
+
/* @__PURE__ */ jsx174(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
16794
|
+
/* @__PURE__ */ jsx174("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
16844
16795
|
]
|
|
16845
16796
|
}
|
|
16846
16797
|
)
|
|
16847
16798
|
}
|
|
16848
16799
|
);
|
|
16849
16800
|
}
|
|
16850
|
-
return /* @__PURE__ */
|
|
16801
|
+
return /* @__PURE__ */ jsx174(
|
|
16851
16802
|
"div",
|
|
16852
16803
|
{
|
|
16853
16804
|
className: cn(
|
|
@@ -16860,8 +16811,8 @@ function DateRangePopover({
|
|
|
16860
16811
|
}
|
|
16861
16812
|
|
|
16862
16813
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16863
|
-
import { jsx as
|
|
16864
|
-
var DateRangePicker =
|
|
16814
|
+
import { jsx as jsx175, jsxs as jsxs111 } from "react/jsx-runtime";
|
|
16815
|
+
var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
16865
16816
|
label,
|
|
16866
16817
|
value: externalValue,
|
|
16867
16818
|
defaultValue,
|
|
@@ -16895,20 +16846,20 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16895
16846
|
components: customComponents,
|
|
16896
16847
|
...dayPickerProps
|
|
16897
16848
|
}, ref) {
|
|
16898
|
-
const containerRef =
|
|
16899
|
-
const fromInputRef =
|
|
16900
|
-
const toInputRef =
|
|
16901
|
-
const reactId =
|
|
16849
|
+
const containerRef = React66.useRef(null);
|
|
16850
|
+
const fromInputRef = React66.useRef(null);
|
|
16851
|
+
const toInputRef = React66.useRef(null);
|
|
16852
|
+
const reactId = React66.useId();
|
|
16902
16853
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
16903
16854
|
const fromId = `${baseId}-from`;
|
|
16904
16855
|
const toId = `${baseId}-to`;
|
|
16905
16856
|
const labelId = `${baseId}-label`;
|
|
16906
16857
|
const errorId = `${baseId}-error`;
|
|
16907
|
-
const normalizedValue =
|
|
16858
|
+
const normalizedValue = React66.useMemo(() => {
|
|
16908
16859
|
if (externalValue === void 0) return void 0;
|
|
16909
16860
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
16910
16861
|
}, [externalValue]);
|
|
16911
|
-
const normalizedDefaultValue =
|
|
16862
|
+
const normalizedDefaultValue = React66.useMemo(() => {
|
|
16912
16863
|
if (defaultValue === void 0) return void 0;
|
|
16913
16864
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
16914
16865
|
}, [defaultValue]);
|
|
@@ -16918,10 +16869,10 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16918
16869
|
onChange,
|
|
16919
16870
|
name
|
|
16920
16871
|
});
|
|
16921
|
-
const normalizedMinDate =
|
|
16922
|
-
const normalizedMaxDate =
|
|
16923
|
-
const formatter =
|
|
16924
|
-
const parser =
|
|
16872
|
+
const normalizedMinDate = React66.useMemo(() => toDate(minDate), [minDate]);
|
|
16873
|
+
const normalizedMaxDate = React66.useMemo(() => toDate(maxDate), [maxDate]);
|
|
16874
|
+
const formatter = React66.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
16875
|
+
const parser = React66.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
16925
16876
|
const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
|
|
16926
16877
|
value,
|
|
16927
16878
|
format: formatter,
|
|
@@ -16930,9 +16881,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16930
16881
|
onBlur
|
|
16931
16882
|
});
|
|
16932
16883
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
16933
|
-
const [isOpen, setIsOpen] =
|
|
16934
|
-
const [focusedInput, setFocusedInput] =
|
|
16935
|
-
const [autoFocus, setAutoFocus] =
|
|
16884
|
+
const [isOpen, setIsOpen] = React66.useState(false);
|
|
16885
|
+
const [focusedInput, setFocusedInput] = React66.useState(null);
|
|
16886
|
+
const [autoFocus, setAutoFocus] = React66.useState(false);
|
|
16936
16887
|
const isMobile3 = useIsMobile();
|
|
16937
16888
|
const { t } = useTranslation40();
|
|
16938
16889
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -16943,13 +16894,13 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16943
16894
|
const isFocused = focusedInput !== null || isOpen;
|
|
16944
16895
|
const wrapperWidth = toCssSize(width);
|
|
16945
16896
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
16946
|
-
const closeCalendar =
|
|
16897
|
+
const closeCalendar = React66.useCallback(() => {
|
|
16947
16898
|
setIsOpen(false);
|
|
16948
16899
|
setFocusedInput(null);
|
|
16949
16900
|
setAutoFocus(false);
|
|
16950
16901
|
if (value?.from) setMonth(value.from);
|
|
16951
16902
|
}, [setMonth, value?.from]);
|
|
16952
|
-
const openCalendar =
|
|
16903
|
+
const openCalendar = React66.useCallback(() => {
|
|
16953
16904
|
if (isBlocked || readOnly) return;
|
|
16954
16905
|
setIsOpen(true);
|
|
16955
16906
|
}, [isBlocked, readOnly]);
|
|
@@ -16958,7 +16909,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16958
16909
|
onOutsideClick: closeCalendar,
|
|
16959
16910
|
isDisabled: !isOpen || isMobile3
|
|
16960
16911
|
});
|
|
16961
|
-
const handlePickerChange =
|
|
16912
|
+
const handlePickerChange = React66.useCallback(
|
|
16962
16913
|
(range, pickedDate) => {
|
|
16963
16914
|
const { next, shouldClose } = resolveRangeSelection({
|
|
16964
16915
|
previous: value,
|
|
@@ -16979,7 +16930,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16979
16930
|
setToText("");
|
|
16980
16931
|
setMonth(/* @__PURE__ */ new Date());
|
|
16981
16932
|
};
|
|
16982
|
-
const disabledMatchers =
|
|
16933
|
+
const disabledMatchers = React66.useMemo(
|
|
16983
16934
|
() => createDisabledMatchers({
|
|
16984
16935
|
minDate: normalizedMinDate,
|
|
16985
16936
|
maxDate: normalizedMaxDate,
|
|
@@ -16998,7 +16949,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16998
16949
|
openCalendar();
|
|
16999
16950
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17000
16951
|
};
|
|
17001
|
-
|
|
16952
|
+
React66.useImperativeHandle(
|
|
17002
16953
|
ref,
|
|
17003
16954
|
() => ({
|
|
17004
16955
|
setDateRange: (range) => {
|
|
@@ -17021,7 +16972,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17021
16972
|
syncMonthToValue
|
|
17022
16973
|
]
|
|
17023
16974
|
);
|
|
17024
|
-
return /* @__PURE__ */
|
|
16975
|
+
return /* @__PURE__ */ jsx175(
|
|
17025
16976
|
"div",
|
|
17026
16977
|
{
|
|
17027
16978
|
ref: containerRef,
|
|
@@ -17034,7 +16985,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17034
16985
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17035
16986
|
children: /* @__PURE__ */ jsxs111("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
17036
16987
|
/* @__PURE__ */ jsxs111("div", { className: "relative w-full", children: [
|
|
17037
|
-
/* @__PURE__ */
|
|
16988
|
+
/* @__PURE__ */ jsx175(
|
|
17038
16989
|
DateRangeInputs,
|
|
17039
16990
|
{
|
|
17040
16991
|
fromId,
|
|
@@ -17085,7 +17036,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17085
17036
|
onToggleCalendar: toggleCalendar
|
|
17086
17037
|
}
|
|
17087
17038
|
),
|
|
17088
|
-
/* @__PURE__ */
|
|
17039
|
+
/* @__PURE__ */ jsx175(
|
|
17089
17040
|
Fieldset,
|
|
17090
17041
|
{
|
|
17091
17042
|
isFocused,
|
|
@@ -17102,7 +17053,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17102
17053
|
tooltip
|
|
17103
17054
|
}
|
|
17104
17055
|
),
|
|
17105
|
-
/* @__PURE__ */
|
|
17056
|
+
/* @__PURE__ */ jsx175(
|
|
17106
17057
|
DateRangePopover,
|
|
17107
17058
|
{
|
|
17108
17059
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17111,7 +17062,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17111
17062
|
drawerTitle,
|
|
17112
17063
|
drawerDescription,
|
|
17113
17064
|
onClose: closeCalendar,
|
|
17114
|
-
children: /* @__PURE__ */
|
|
17065
|
+
children: /* @__PURE__ */ jsx175(
|
|
17115
17066
|
DateRangeCalendar,
|
|
17116
17067
|
{
|
|
17117
17068
|
value,
|
|
@@ -17132,7 +17083,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17132
17083
|
}
|
|
17133
17084
|
)
|
|
17134
17085
|
] }),
|
|
17135
|
-
/* @__PURE__ */
|
|
17086
|
+
/* @__PURE__ */ jsx175(
|
|
17136
17087
|
DateRangePopover,
|
|
17137
17088
|
{
|
|
17138
17089
|
isOpen: isOpen && isMobile3,
|
|
@@ -17141,7 +17092,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17141
17092
|
drawerTitle,
|
|
17142
17093
|
drawerDescription,
|
|
17143
17094
|
onClose: closeCalendar,
|
|
17144
|
-
children: /* @__PURE__ */
|
|
17095
|
+
children: /* @__PURE__ */ jsx175(
|
|
17145
17096
|
DateRangeCalendar,
|
|
17146
17097
|
{
|
|
17147
17098
|
value,
|
|
@@ -17161,9 +17112,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17161
17112
|
)
|
|
17162
17113
|
}
|
|
17163
17114
|
),
|
|
17164
|
-
!error && optional && /* @__PURE__ */
|
|
17165
|
-
!error && helperText && /* @__PURE__ */
|
|
17166
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
17115
|
+
!error && optional && /* @__PURE__ */ jsx175("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17116
|
+
!error && helperText && /* @__PURE__ */ jsx175("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17117
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx175(
|
|
17167
17118
|
FieldErrorMessage,
|
|
17168
17119
|
{
|
|
17169
17120
|
id: errorId,
|
|
@@ -17177,7 +17128,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17177
17128
|
});
|
|
17178
17129
|
|
|
17179
17130
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17180
|
-
import * as
|
|
17131
|
+
import * as React67 from "react";
|
|
17181
17132
|
import { useTranslation as useTranslation41 } from "react-i18next";
|
|
17182
17133
|
import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
|
|
17183
17134
|
import {
|
|
@@ -17203,11 +17154,11 @@ function useValidateDates({
|
|
|
17203
17154
|
const { t } = useTranslation41();
|
|
17204
17155
|
const handleError = useEvent(onError);
|
|
17205
17156
|
const handleSuccess = useEvent(onSuccess);
|
|
17206
|
-
const errorFormatter =
|
|
17157
|
+
const errorFormatter = React67.useMemo(
|
|
17207
17158
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17208
17159
|
[displayFormat]
|
|
17209
17160
|
);
|
|
17210
|
-
const validateDates =
|
|
17161
|
+
const validateDates = React67.useCallback(
|
|
17211
17162
|
(dates) => {
|
|
17212
17163
|
const startDate = dates?.from;
|
|
17213
17164
|
const endDate = dates?.to;
|
|
@@ -17257,9 +17208,9 @@ function useValidateDates({
|
|
|
17257
17208
|
}
|
|
17258
17209
|
|
|
17259
17210
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17260
|
-
import * as
|
|
17211
|
+
import * as React68 from "react";
|
|
17261
17212
|
import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
|
|
17262
|
-
import { jsx as
|
|
17213
|
+
import { jsx as jsx176 } from "react/jsx-runtime";
|
|
17263
17214
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17264
17215
|
function parseTime(value) {
|
|
17265
17216
|
return parse2(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17301,24 +17252,24 @@ var FORMAT_SETTINGS = {
|
|
|
17301
17252
|
},
|
|
17302
17253
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17303
17254
|
};
|
|
17304
|
-
var TimePicker =
|
|
17305
|
-
const resolvedOptions =
|
|
17255
|
+
var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17256
|
+
const resolvedOptions = React68.useMemo(() => {
|
|
17306
17257
|
if (options) return options;
|
|
17307
17258
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17308
17259
|
return buildOptions(settings);
|
|
17309
17260
|
}, [formatName, options, timeSettings]);
|
|
17310
|
-
return /* @__PURE__ */
|
|
17261
|
+
return /* @__PURE__ */ jsx176(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17311
17262
|
});
|
|
17312
17263
|
|
|
17313
17264
|
// src/dashboard/file-input/FileInput.tsx
|
|
17314
|
-
import * as
|
|
17265
|
+
import * as React69 from "react";
|
|
17315
17266
|
import { Download, Paperclip, SquareX as SquareX4 } from "lucide-react";
|
|
17316
17267
|
import { useTranslation as useTranslation42 } from "react-i18next";
|
|
17317
|
-
import { jsx as
|
|
17268
|
+
import { jsx as jsx177, jsxs as jsxs112 } from "react/jsx-runtime";
|
|
17318
17269
|
function defaultDownload(url) {
|
|
17319
17270
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17320
17271
|
}
|
|
17321
|
-
var FileInput =
|
|
17272
|
+
var FileInput = React69.forwardRef(function FileInput2({
|
|
17322
17273
|
label,
|
|
17323
17274
|
value,
|
|
17324
17275
|
onChange,
|
|
@@ -17340,12 +17291,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17340
17291
|
width,
|
|
17341
17292
|
downloadLabel
|
|
17342
17293
|
}, ref) {
|
|
17343
|
-
const internalRef =
|
|
17294
|
+
const internalRef = React69.useRef(null);
|
|
17344
17295
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17345
17296
|
const { t } = useTranslation42();
|
|
17346
17297
|
const resolvedLabel = label ?? t("upload_file");
|
|
17347
17298
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17348
|
-
const reactId =
|
|
17299
|
+
const reactId = React69.useId();
|
|
17349
17300
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17350
17301
|
const labelId = `${inputId}-label`;
|
|
17351
17302
|
const errorId = `${inputId}-error`;
|
|
@@ -17384,7 +17335,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17384
17335
|
),
|
|
17385
17336
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17386
17337
|
children: [
|
|
17387
|
-
/* @__PURE__ */
|
|
17338
|
+
/* @__PURE__ */ jsx177(
|
|
17388
17339
|
"input",
|
|
17389
17340
|
{
|
|
17390
17341
|
ref: inputRef,
|
|
@@ -17423,12 +17374,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17423
17374
|
onClick: handleDownload,
|
|
17424
17375
|
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",
|
|
17425
17376
|
children: [
|
|
17426
|
-
/* @__PURE__ */
|
|
17427
|
-
/* @__PURE__ */
|
|
17377
|
+
/* @__PURE__ */ jsx177("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
17378
|
+
/* @__PURE__ */ jsx177(Download, { size: 15 })
|
|
17428
17379
|
]
|
|
17429
17380
|
}
|
|
17430
|
-
) : /* @__PURE__ */
|
|
17431
|
-
/* @__PURE__ */
|
|
17381
|
+
) : /* @__PURE__ */ jsx177("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
17382
|
+
/* @__PURE__ */ jsx177(
|
|
17432
17383
|
"button",
|
|
17433
17384
|
{
|
|
17434
17385
|
type: "button",
|
|
@@ -17436,17 +17387,17 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17436
17387
|
onClick: handleClear,
|
|
17437
17388
|
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]",
|
|
17438
17389
|
"aria-label": t("remove_file"),
|
|
17439
|
-
children: /* @__PURE__ */
|
|
17390
|
+
children: /* @__PURE__ */ jsx177(SquareX4, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17440
17391
|
}
|
|
17441
17392
|
)
|
|
17442
17393
|
]
|
|
17443
17394
|
}
|
|
17444
|
-
) : /* @__PURE__ */
|
|
17445
|
-
/* @__PURE__ */
|
|
17395
|
+
) : /* @__PURE__ */ jsx177("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
17396
|
+
/* @__PURE__ */ jsx177("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx177(Paperclip, { size: 20 }) })
|
|
17446
17397
|
]
|
|
17447
17398
|
}
|
|
17448
17399
|
),
|
|
17449
|
-
/* @__PURE__ */
|
|
17400
|
+
/* @__PURE__ */ jsx177(
|
|
17450
17401
|
Fieldset,
|
|
17451
17402
|
{
|
|
17452
17403
|
isFocused: false,
|
|
@@ -17464,9 +17415,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17464
17415
|
}
|
|
17465
17416
|
)
|
|
17466
17417
|
] }),
|
|
17467
|
-
!error && optional && /* @__PURE__ */
|
|
17468
|
-
!error && helperText && /* @__PURE__ */
|
|
17469
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
17418
|
+
!error && optional && /* @__PURE__ */ jsx177("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17419
|
+
!error && helperText && /* @__PURE__ */ jsx177("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17420
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx177(
|
|
17470
17421
|
FieldErrorMessage,
|
|
17471
17422
|
{
|
|
17472
17423
|
id: errorId,
|
|
@@ -17481,10 +17432,10 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17481
17432
|
});
|
|
17482
17433
|
|
|
17483
17434
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17484
|
-
import * as
|
|
17485
|
-
import { jsx as
|
|
17435
|
+
import * as React70 from "react";
|
|
17436
|
+
import { jsx as jsx178, jsxs as jsxs113 } from "react/jsx-runtime";
|
|
17486
17437
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17487
|
-
var SelectIconsBox =
|
|
17438
|
+
var SelectIconsBox = React70.forwardRef(
|
|
17488
17439
|
function SelectIconsBox2({
|
|
17489
17440
|
children,
|
|
17490
17441
|
icons,
|
|
@@ -17499,10 +17450,10 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17499
17450
|
className,
|
|
17500
17451
|
boxClassName
|
|
17501
17452
|
}, ref) {
|
|
17502
|
-
const containerRef =
|
|
17453
|
+
const containerRef = React70.useRef(null);
|
|
17503
17454
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17504
17455
|
const isControlled = controlledOpen !== void 0;
|
|
17505
|
-
const [internalOpen, setInternalOpen] =
|
|
17456
|
+
const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
|
|
17506
17457
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17507
17458
|
const setOpen = (next) => {
|
|
17508
17459
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17538,7 +17489,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17538
17489
|
className: cn("relative inline-block outline-none", className),
|
|
17539
17490
|
children: [
|
|
17540
17491
|
children,
|
|
17541
|
-
isOpen && /* @__PURE__ */
|
|
17492
|
+
isOpen && /* @__PURE__ */ jsx178(
|
|
17542
17493
|
"div",
|
|
17543
17494
|
{
|
|
17544
17495
|
className: cn(
|
|
@@ -17549,7 +17500,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17549
17500
|
boxClassName
|
|
17550
17501
|
),
|
|
17551
17502
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
17552
|
-
children: icons.map((iconName) => /* @__PURE__ */
|
|
17503
|
+
children: icons.map((iconName) => /* @__PURE__ */ jsx178(
|
|
17553
17504
|
"button",
|
|
17554
17505
|
{
|
|
17555
17506
|
type: "button",
|
|
@@ -17632,14 +17583,14 @@ function getErrorMessage(error) {
|
|
|
17632
17583
|
|
|
17633
17584
|
// src/lib/toastResponseError.tsx
|
|
17634
17585
|
import i18next from "i18next";
|
|
17635
|
-
import { jsx as
|
|
17586
|
+
import { jsx as jsx179, jsxs as jsxs114 } from "react/jsx-runtime";
|
|
17636
17587
|
function addSupportEmailToMessage(message, prefixText) {
|
|
17637
17588
|
if (typeof message !== "string") {
|
|
17638
17589
|
return message;
|
|
17639
17590
|
}
|
|
17640
17591
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
17641
17592
|
return /* @__PURE__ */ jsxs114("div", { children: [
|
|
17642
|
-
/* @__PURE__ */
|
|
17593
|
+
/* @__PURE__ */ jsx179("div", { children: builtMessage }),
|
|
17643
17594
|
i18next.t("reach_us_at_email")
|
|
17644
17595
|
] });
|
|
17645
17596
|
}
|
|
@@ -17654,13 +17605,13 @@ function toastResponseError(error, options = {}) {
|
|
|
17654
17605
|
}
|
|
17655
17606
|
|
|
17656
17607
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
17657
|
-
import { forwardRef as
|
|
17658
|
-
import { jsx as
|
|
17659
|
-
var LegacyTextarea =
|
|
17608
|
+
import { forwardRef as forwardRef73, useId as useId15 } from "react";
|
|
17609
|
+
import { jsx as jsx180, jsxs as jsxs115 } from "react/jsx-runtime";
|
|
17610
|
+
var LegacyTextarea = forwardRef73(
|
|
17660
17611
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
17661
17612
|
const inputId = useId15();
|
|
17662
17613
|
return /* @__PURE__ */ jsxs115("div", { className: cn("relative", className), children: [
|
|
17663
|
-
/* @__PURE__ */
|
|
17614
|
+
/* @__PURE__ */ jsx180(
|
|
17664
17615
|
"textarea",
|
|
17665
17616
|
{
|
|
17666
17617
|
ref,
|
|
@@ -17676,7 +17627,7 @@ var LegacyTextarea = forwardRef74(
|
|
|
17676
17627
|
...textareaProps
|
|
17677
17628
|
}
|
|
17678
17629
|
),
|
|
17679
|
-
label && /* @__PURE__ */
|
|
17630
|
+
label && /* @__PURE__ */ jsx180(
|
|
17680
17631
|
"label",
|
|
17681
17632
|
{
|
|
17682
17633
|
htmlFor: inputId,
|
|
@@ -17694,15 +17645,15 @@ var LegacyTextarea = forwardRef74(
|
|
|
17694
17645
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
17695
17646
|
|
|
17696
17647
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
17697
|
-
import * as
|
|
17648
|
+
import * as React72 from "react";
|
|
17698
17649
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
17699
17650
|
|
|
17700
17651
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
17701
|
-
import * as
|
|
17652
|
+
import * as React71 from "react";
|
|
17702
17653
|
import { Loader2 as Loader24 } from "lucide-react";
|
|
17703
17654
|
import { useTranslation as useTranslation43 } from "react-i18next";
|
|
17704
|
-
import { Fragment as
|
|
17705
|
-
var AirbnbFieldTrigger =
|
|
17655
|
+
import { Fragment as Fragment17, jsx as jsx181, jsxs as jsxs116 } from "react/jsx-runtime";
|
|
17656
|
+
var AirbnbFieldTrigger = React71.forwardRef(
|
|
17706
17657
|
({
|
|
17707
17658
|
as = "button",
|
|
17708
17659
|
id,
|
|
@@ -17739,13 +17690,13 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17739
17690
|
const visibleLabelText = labelText ?? label;
|
|
17740
17691
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
17741
17692
|
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs116("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
|
|
17742
|
-
/* @__PURE__ */
|
|
17693
|
+
/* @__PURE__ */ jsx181("span", { className: "min-w-0 truncate", children: visibleLabelText }),
|
|
17743
17694
|
optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "text-current opacity-70 lowercase", children: [
|
|
17744
17695
|
"(",
|
|
17745
17696
|
optionalLabel,
|
|
17746
17697
|
")"
|
|
17747
17698
|
] }),
|
|
17748
|
-
tooltip && /* @__PURE__ */
|
|
17699
|
+
tooltip && /* @__PURE__ */ jsx181(
|
|
17749
17700
|
HelpTooltip,
|
|
17750
17701
|
{
|
|
17751
17702
|
content: tooltip,
|
|
@@ -17762,7 +17713,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17762
17713
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
17763
17714
|
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs116("span", { className: "flex items-center gap-2", children: [
|
|
17764
17715
|
trailingAdornment,
|
|
17765
|
-
loading && /* @__PURE__ */
|
|
17716
|
+
loading && /* @__PURE__ */ jsx181(
|
|
17766
17717
|
Loader24,
|
|
17767
17718
|
{
|
|
17768
17719
|
"aria-hidden": "true",
|
|
@@ -17778,7 +17729,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17778
17729
|
disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
|
|
17779
17730
|
className
|
|
17780
17731
|
);
|
|
17781
|
-
const sharedContent = /* @__PURE__ */ jsxs116(
|
|
17732
|
+
const sharedContent = /* @__PURE__ */ jsxs116(Fragment17, { children: [
|
|
17782
17733
|
/* @__PURE__ */ jsxs116(
|
|
17783
17734
|
"span",
|
|
17784
17735
|
{
|
|
@@ -17788,7 +17739,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17788
17739
|
contentClassName
|
|
17789
17740
|
),
|
|
17790
17741
|
children: [
|
|
17791
|
-
/* @__PURE__ */
|
|
17742
|
+
/* @__PURE__ */ jsx181(
|
|
17792
17743
|
"span",
|
|
17793
17744
|
{
|
|
17794
17745
|
id: labelId,
|
|
@@ -17801,7 +17752,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17801
17752
|
children: animatedLabel
|
|
17802
17753
|
}
|
|
17803
17754
|
),
|
|
17804
|
-
children ? children : hasValue ? /* @__PURE__ */
|
|
17755
|
+
children ? children : hasValue ? /* @__PURE__ */ jsx181(
|
|
17805
17756
|
"span",
|
|
17806
17757
|
{
|
|
17807
17758
|
id: valueId,
|
|
@@ -17812,11 +17763,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17812
17763
|
),
|
|
17813
17764
|
children: valueText
|
|
17814
17765
|
}
|
|
17815
|
-
) : /* @__PURE__ */
|
|
17766
|
+
) : /* @__PURE__ */ jsx181("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
17816
17767
|
]
|
|
17817
17768
|
}
|
|
17818
17769
|
),
|
|
17819
|
-
resolvedTrailingAdornment && /* @__PURE__ */
|
|
17770
|
+
resolvedTrailingAdornment && /* @__PURE__ */ jsx181(
|
|
17820
17771
|
"span",
|
|
17821
17772
|
{
|
|
17822
17773
|
"aria-hidden": "true",
|
|
@@ -17826,8 +17777,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17826
17777
|
)
|
|
17827
17778
|
] });
|
|
17828
17779
|
return /* @__PURE__ */ jsxs116("div", { className: "w-full", children: [
|
|
17829
|
-
topLabel && /* @__PURE__ */
|
|
17830
|
-
as === "button" ? /* @__PURE__ */
|
|
17780
|
+
topLabel && /* @__PURE__ */ jsx181("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
|
|
17781
|
+
as === "button" ? /* @__PURE__ */ jsx181(
|
|
17831
17782
|
"button",
|
|
17832
17783
|
{
|
|
17833
17784
|
id,
|
|
@@ -17844,7 +17795,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17844
17795
|
...props,
|
|
17845
17796
|
children: sharedContent
|
|
17846
17797
|
}
|
|
17847
|
-
) : /* @__PURE__ */
|
|
17798
|
+
) : /* @__PURE__ */ jsx181(
|
|
17848
17799
|
"div",
|
|
17849
17800
|
{
|
|
17850
17801
|
id,
|
|
@@ -17861,16 +17812,16 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17861
17812
|
children: sharedContent
|
|
17862
17813
|
}
|
|
17863
17814
|
),
|
|
17864
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */
|
|
17815
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx181(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
17865
17816
|
] });
|
|
17866
17817
|
}
|
|
17867
17818
|
);
|
|
17868
17819
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
17869
17820
|
|
|
17870
17821
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
17871
|
-
import { jsx as
|
|
17822
|
+
import { jsx as jsx182, jsxs as jsxs117 } from "react/jsx-runtime";
|
|
17872
17823
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
17873
|
-
var AirbnbDatePicker =
|
|
17824
|
+
var AirbnbDatePicker = React72.forwardRef(
|
|
17874
17825
|
({
|
|
17875
17826
|
label,
|
|
17876
17827
|
topLabel,
|
|
@@ -17895,24 +17846,24 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17895
17846
|
formatValue = formatDateValue
|
|
17896
17847
|
}, ref) => {
|
|
17897
17848
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
17898
|
-
const [isOpen, setIsOpen] =
|
|
17899
|
-
const triggerId =
|
|
17900
|
-
const pickerId =
|
|
17901
|
-
const labelId =
|
|
17902
|
-
const valueId =
|
|
17903
|
-
const helperTextId =
|
|
17904
|
-
const errorId =
|
|
17905
|
-
const internalRef =
|
|
17849
|
+
const [isOpen, setIsOpen] = React72.useState(false);
|
|
17850
|
+
const triggerId = React72.useId();
|
|
17851
|
+
const pickerId = React72.useId();
|
|
17852
|
+
const labelId = React72.useId();
|
|
17853
|
+
const valueId = React72.useId();
|
|
17854
|
+
const helperTextId = React72.useId();
|
|
17855
|
+
const errorId = React72.useId();
|
|
17856
|
+
const internalRef = React72.useRef(null);
|
|
17906
17857
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
17907
|
-
const monthLabels =
|
|
17908
|
-
const resolvedMinDate =
|
|
17909
|
-
const resolvedMaxDate =
|
|
17910
|
-
const normalizedValue =
|
|
17911
|
-
const normalizedDefaultValue =
|
|
17858
|
+
const monthLabels = React72.useMemo(() => getMonthLabels(locale), [locale]);
|
|
17859
|
+
const resolvedMinDate = React72.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
17860
|
+
const resolvedMaxDate = React72.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
17861
|
+
const normalizedValue = React72.useMemo(() => normalizeDateValue(value), [value]);
|
|
17862
|
+
const normalizedDefaultValue = React72.useMemo(
|
|
17912
17863
|
() => normalizeDateValue(defaultValue),
|
|
17913
17864
|
[defaultValue]
|
|
17914
17865
|
);
|
|
17915
|
-
const resolvedValue =
|
|
17866
|
+
const resolvedValue = React72.useMemo(
|
|
17916
17867
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
17917
17868
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
17918
17869
|
);
|
|
@@ -17943,7 +17894,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17943
17894
|
minDate: resolvedMinDate,
|
|
17944
17895
|
maxDate: resolvedMaxDate
|
|
17945
17896
|
});
|
|
17946
|
-
const handleOpenChange =
|
|
17897
|
+
const handleOpenChange = React72.useCallback(
|
|
17947
17898
|
(nextOpen) => {
|
|
17948
17899
|
if (isBlocked && nextOpen) return;
|
|
17949
17900
|
setIsOpen(nextOpen);
|
|
@@ -17953,7 +17904,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17953
17904
|
},
|
|
17954
17905
|
[isBlocked]
|
|
17955
17906
|
);
|
|
17956
|
-
const handleDone =
|
|
17907
|
+
const handleDone = React72.useCallback(() => {
|
|
17957
17908
|
if (isBlocked) return;
|
|
17958
17909
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
17959
17910
|
handleOpenChange(false);
|
|
@@ -17965,11 +17916,11 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17965
17916
|
resolvedMaxDate,
|
|
17966
17917
|
resolvedMinDate
|
|
17967
17918
|
]);
|
|
17968
|
-
const handleTriggerClick =
|
|
17919
|
+
const handleTriggerClick = React72.useCallback(() => {
|
|
17969
17920
|
if (isBlocked) return;
|
|
17970
17921
|
setIsOpen(true);
|
|
17971
17922
|
}, [isBlocked]);
|
|
17972
|
-
const handleTriggerKeyDown =
|
|
17923
|
+
const handleTriggerKeyDown = React72.useCallback(
|
|
17973
17924
|
(event) => {
|
|
17974
17925
|
if (isBlocked) return;
|
|
17975
17926
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -17979,13 +17930,13 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17979
17930
|
},
|
|
17980
17931
|
[isBlocked]
|
|
17981
17932
|
);
|
|
17982
|
-
|
|
17933
|
+
React72.useEffect(() => {
|
|
17983
17934
|
if (isBlocked) {
|
|
17984
17935
|
setIsOpen(false);
|
|
17985
17936
|
}
|
|
17986
17937
|
}, [isBlocked]);
|
|
17987
17938
|
return /* @__PURE__ */ jsxs117("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
|
|
17988
|
-
name && /* @__PURE__ */
|
|
17939
|
+
name && /* @__PURE__ */ jsx182(
|
|
17989
17940
|
"input",
|
|
17990
17941
|
{
|
|
17991
17942
|
type: "hidden",
|
|
@@ -17993,7 +17944,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17993
17944
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
17994
17945
|
}
|
|
17995
17946
|
),
|
|
17996
|
-
/* @__PURE__ */
|
|
17947
|
+
/* @__PURE__ */ jsx182(
|
|
17997
17948
|
AirbnbFieldTrigger,
|
|
17998
17949
|
{
|
|
17999
17950
|
id: triggerId,
|
|
@@ -18019,10 +17970,10 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18019
17970
|
onClick: handleTriggerClick,
|
|
18020
17971
|
onKeyDown: handleTriggerKeyDown,
|
|
18021
17972
|
onBlur,
|
|
18022
|
-
trailingAdornment: /* @__PURE__ */
|
|
17973
|
+
trailingAdornment: /* @__PURE__ */ jsx182(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18023
17974
|
}
|
|
18024
17975
|
),
|
|
18025
|
-
/* @__PURE__ */
|
|
17976
|
+
/* @__PURE__ */ jsx182(
|
|
18026
17977
|
AirbnbDatePickerContent,
|
|
18027
17978
|
{
|
|
18028
17979
|
baseId: pickerId,
|
|
@@ -18056,12 +18007,12 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18056
18007
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18057
18008
|
|
|
18058
18009
|
// src/airbnb-fields/input/Input.tsx
|
|
18059
|
-
import * as
|
|
18010
|
+
import * as React73 from "react";
|
|
18060
18011
|
import { Eye as Eye2 } from "lucide-react";
|
|
18061
18012
|
import { useTranslation as useTranslation44 } from "react-i18next";
|
|
18062
|
-
import { jsx as
|
|
18013
|
+
import { jsx as jsx183, jsxs as jsxs118 } from "react/jsx-runtime";
|
|
18063
18014
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18064
|
-
var AirbnbInput =
|
|
18015
|
+
var AirbnbInput = React73.forwardRef(
|
|
18065
18016
|
({
|
|
18066
18017
|
label,
|
|
18067
18018
|
topLabel,
|
|
@@ -18090,16 +18041,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18090
18041
|
...props
|
|
18091
18042
|
}, ref) => {
|
|
18092
18043
|
const { t } = useTranslation44();
|
|
18093
|
-
const generatedId =
|
|
18094
|
-
const inputRef =
|
|
18044
|
+
const generatedId = React73.useId();
|
|
18045
|
+
const inputRef = React73.useRef(null);
|
|
18095
18046
|
const inputId = id ?? generatedId;
|
|
18096
18047
|
const fieldId = `${inputId}-field`;
|
|
18097
18048
|
const labelId = `${inputId}-label`;
|
|
18098
18049
|
const errorId = `${inputId}-error`;
|
|
18099
18050
|
const accessibleLabel = placeholder ?? label;
|
|
18100
|
-
const [isFocused, setIsFocused] =
|
|
18101
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18102
|
-
const [currentValue, setCurrentValue] =
|
|
18051
|
+
const [isFocused, setIsFocused] = React73.useState(false);
|
|
18052
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React73.useState(false);
|
|
18053
|
+
const [currentValue, setCurrentValue] = React73.useState(
|
|
18103
18054
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18104
18055
|
);
|
|
18105
18056
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18112,16 +18063,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18112
18063
|
const triggerError = error ?? invalid;
|
|
18113
18064
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18114
18065
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18115
|
-
|
|
18066
|
+
React73.useLayoutEffect(() => {
|
|
18116
18067
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18117
18068
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18118
18069
|
}, [value]);
|
|
18119
|
-
|
|
18070
|
+
React73.useEffect(() => {
|
|
18120
18071
|
if (!isPasswordInput) {
|
|
18121
18072
|
setIsPasswordRevealed(false);
|
|
18122
18073
|
}
|
|
18123
18074
|
}, [isPasswordInput]);
|
|
18124
|
-
const setRefs =
|
|
18075
|
+
const setRefs = React73.useCallback(
|
|
18125
18076
|
(node) => {
|
|
18126
18077
|
inputRef.current = node;
|
|
18127
18078
|
if (node && value == null) {
|
|
@@ -18154,7 +18105,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18154
18105
|
const togglePasswordReveal = () => {
|
|
18155
18106
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18156
18107
|
};
|
|
18157
|
-
return /* @__PURE__ */
|
|
18108
|
+
return /* @__PURE__ */ jsx183("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs118(
|
|
18158
18109
|
AirbnbFieldTrigger,
|
|
18159
18110
|
{
|
|
18160
18111
|
as: "div",
|
|
@@ -18183,7 +18134,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18183
18134
|
forceLabelText: hasLabelMeta,
|
|
18184
18135
|
hideErrorMessage: !renderErrorMessage,
|
|
18185
18136
|
children: [
|
|
18186
|
-
/* @__PURE__ */
|
|
18137
|
+
/* @__PURE__ */ jsx183(
|
|
18187
18138
|
"input",
|
|
18188
18139
|
{
|
|
18189
18140
|
...props,
|
|
@@ -18213,7 +18164,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18213
18164
|
)
|
|
18214
18165
|
}
|
|
18215
18166
|
),
|
|
18216
|
-
shouldShowPasswordReveal && /* @__PURE__ */
|
|
18167
|
+
shouldShowPasswordReveal && /* @__PURE__ */ jsx183(
|
|
18217
18168
|
"button",
|
|
18218
18169
|
{
|
|
18219
18170
|
type: "button",
|
|
@@ -18221,7 +18172,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18221
18172
|
disabled: isBlocked,
|
|
18222
18173
|
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",
|
|
18223
18174
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18224
|
-
children: /* @__PURE__ */
|
|
18175
|
+
children: /* @__PURE__ */ jsx183(
|
|
18225
18176
|
Eye2,
|
|
18226
18177
|
{
|
|
18227
18178
|
size: 18,
|
|
@@ -18239,14 +18190,14 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18239
18190
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18240
18191
|
|
|
18241
18192
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18242
|
-
import * as
|
|
18193
|
+
import * as React79 from "react";
|
|
18243
18194
|
import { ChevronDown as ChevronDown6 } from "lucide-react";
|
|
18244
18195
|
|
|
18245
18196
|
// src/airbnb-fields/select/Select.tsx
|
|
18246
|
-
import * as
|
|
18197
|
+
import * as React78 from "react";
|
|
18247
18198
|
|
|
18248
18199
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18249
|
-
import { jsx as
|
|
18200
|
+
import { jsx as jsx184, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
18250
18201
|
function AirbnbSelectDesktopMenu({
|
|
18251
18202
|
id,
|
|
18252
18203
|
options,
|
|
@@ -18278,12 +18229,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18278
18229
|
onKeyDown,
|
|
18279
18230
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18280
18231
|
children: [
|
|
18281
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */
|
|
18232
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx184("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18282
18233
|
options.map((option, index) => {
|
|
18283
18234
|
const isSelected = selectedValue?.value === option.value;
|
|
18284
18235
|
const isHighlighted = index === highlightedIndex;
|
|
18285
18236
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18286
|
-
return /* @__PURE__ */
|
|
18237
|
+
return /* @__PURE__ */ jsx184(
|
|
18287
18238
|
"button",
|
|
18288
18239
|
{
|
|
18289
18240
|
id: getOptionId2(index),
|
|
@@ -18315,7 +18266,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18315
18266
|
}
|
|
18316
18267
|
|
|
18317
18268
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18318
|
-
import { jsx as
|
|
18269
|
+
import { jsx as jsx185 } from "react/jsx-runtime";
|
|
18319
18270
|
function AirbnbSelectDesktopContent({
|
|
18320
18271
|
isOpen,
|
|
18321
18272
|
listboxId,
|
|
@@ -18336,14 +18287,14 @@ function AirbnbSelectDesktopContent({
|
|
|
18336
18287
|
noOptionsMessage
|
|
18337
18288
|
}) {
|
|
18338
18289
|
if (!isOpen) return null;
|
|
18339
|
-
return /* @__PURE__ */
|
|
18290
|
+
return /* @__PURE__ */ jsx185(
|
|
18340
18291
|
"div",
|
|
18341
18292
|
{
|
|
18342
18293
|
className: cn(
|
|
18343
18294
|
"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)]",
|
|
18344
18295
|
dropdownClassName
|
|
18345
18296
|
),
|
|
18346
|
-
children: /* @__PURE__ */
|
|
18297
|
+
children: /* @__PURE__ */ jsx185(
|
|
18347
18298
|
AirbnbSelectDesktopMenu,
|
|
18348
18299
|
{
|
|
18349
18300
|
id: listboxId,
|
|
@@ -18441,7 +18392,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
18441
18392
|
}
|
|
18442
18393
|
|
|
18443
18394
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
18444
|
-
import { jsx as
|
|
18395
|
+
import { jsx as jsx186, jsxs as jsxs120 } from "react/jsx-runtime";
|
|
18445
18396
|
function AirbnbSelectMobileWheel({
|
|
18446
18397
|
id,
|
|
18447
18398
|
options,
|
|
@@ -18472,10 +18423,10 @@ function AirbnbSelectMobileWheel({
|
|
|
18472
18423
|
onKeyDown,
|
|
18473
18424
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
18474
18425
|
children: [
|
|
18475
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */
|
|
18476
|
-
/* @__PURE__ */
|
|
18477
|
-
/* @__PURE__ */
|
|
18478
|
-
/* @__PURE__ */
|
|
18426
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx186("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18427
|
+
/* @__PURE__ */ jsx186("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
18428
|
+
/* @__PURE__ */ jsx186("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
18429
|
+
/* @__PURE__ */ jsx186(
|
|
18479
18430
|
"div",
|
|
18480
18431
|
{
|
|
18481
18432
|
"aria-hidden": true,
|
|
@@ -18500,11 +18451,11 @@ function AirbnbSelectMobileWheel({
|
|
|
18500
18451
|
WebkitOverflowScrolling: "touch"
|
|
18501
18452
|
},
|
|
18502
18453
|
children: [
|
|
18503
|
-
/* @__PURE__ */
|
|
18454
|
+
/* @__PURE__ */ jsx186("div", { style: { height: `${spacerHeight2}px` } }),
|
|
18504
18455
|
options.map((option, index) => {
|
|
18505
18456
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
18506
18457
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18507
|
-
return /* @__PURE__ */
|
|
18458
|
+
return /* @__PURE__ */ jsx186(
|
|
18508
18459
|
"button",
|
|
18509
18460
|
{
|
|
18510
18461
|
id: getOptionId2(index),
|
|
@@ -18525,7 +18476,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18525
18476
|
optionKey
|
|
18526
18477
|
);
|
|
18527
18478
|
}),
|
|
18528
|
-
/* @__PURE__ */
|
|
18479
|
+
/* @__PURE__ */ jsx186("div", { style: { height: `${spacerHeight2}px` } })
|
|
18529
18480
|
]
|
|
18530
18481
|
}
|
|
18531
18482
|
)
|
|
@@ -18535,7 +18486,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18535
18486
|
}
|
|
18536
18487
|
|
|
18537
18488
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
18538
|
-
import { jsx as
|
|
18489
|
+
import { jsx as jsx187, jsxs as jsxs121 } from "react/jsx-runtime";
|
|
18539
18490
|
function AirbnbSelectMobileContent({
|
|
18540
18491
|
open,
|
|
18541
18492
|
onOpenChange,
|
|
@@ -18559,11 +18510,11 @@ function AirbnbSelectMobileContent({
|
|
|
18559
18510
|
getOptionId: getOptionId2,
|
|
18560
18511
|
noOptionsMessage
|
|
18561
18512
|
}) {
|
|
18562
|
-
return /* @__PURE__ */
|
|
18563
|
-
/* @__PURE__ */
|
|
18564
|
-
/* @__PURE__ */
|
|
18513
|
+
return /* @__PURE__ */ jsx187(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs121(DrawerContent, { onClose, lockScroll: false, children: [
|
|
18514
|
+
/* @__PURE__ */ jsx187(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
18515
|
+
/* @__PURE__ */ jsx187(DrawerDescription, { className: "sr-only", children: label }),
|
|
18565
18516
|
/* @__PURE__ */ jsxs121("div", { className: "px-6 pb-4 pt-1", children: [
|
|
18566
|
-
/* @__PURE__ */
|
|
18517
|
+
/* @__PURE__ */ jsx187(
|
|
18567
18518
|
AirbnbSelectMobileWheel,
|
|
18568
18519
|
{
|
|
18569
18520
|
id: listboxId,
|
|
@@ -18582,16 +18533,16 @@ function AirbnbSelectMobileContent({
|
|
|
18582
18533
|
noOptionsMessage
|
|
18583
18534
|
}
|
|
18584
18535
|
),
|
|
18585
|
-
/* @__PURE__ */
|
|
18536
|
+
/* @__PURE__ */ jsx187(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
18586
18537
|
] })
|
|
18587
18538
|
] }) });
|
|
18588
18539
|
}
|
|
18589
18540
|
|
|
18590
18541
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18591
|
-
import * as
|
|
18542
|
+
import * as React74 from "react";
|
|
18592
18543
|
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
18593
|
-
import { jsx as
|
|
18594
|
-
var AirbnbSelectTrigger =
|
|
18544
|
+
import { jsx as jsx188 } from "react/jsx-runtime";
|
|
18545
|
+
var AirbnbSelectTrigger = React74.forwardRef(
|
|
18595
18546
|
({
|
|
18596
18547
|
id,
|
|
18597
18548
|
open,
|
|
@@ -18615,7 +18566,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18615
18566
|
onKeyDown,
|
|
18616
18567
|
onBlur
|
|
18617
18568
|
}, ref) => {
|
|
18618
|
-
return /* @__PURE__ */
|
|
18569
|
+
return /* @__PURE__ */ jsx188(
|
|
18619
18570
|
AirbnbFieldTrigger,
|
|
18620
18571
|
{
|
|
18621
18572
|
id,
|
|
@@ -18643,7 +18594,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18643
18594
|
onClick,
|
|
18644
18595
|
onKeyDown,
|
|
18645
18596
|
onBlur,
|
|
18646
|
-
trailingAdornment: /* @__PURE__ */
|
|
18597
|
+
trailingAdornment: /* @__PURE__ */ jsx188(
|
|
18647
18598
|
ChevronDown5,
|
|
18648
18599
|
{
|
|
18649
18600
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
@@ -18656,7 +18607,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18656
18607
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
18657
18608
|
|
|
18658
18609
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
18659
|
-
import * as
|
|
18610
|
+
import * as React75 from "react";
|
|
18660
18611
|
function useDesktopSelect({
|
|
18661
18612
|
isMobile: isMobile3,
|
|
18662
18613
|
isOpen,
|
|
@@ -18665,12 +18616,12 @@ function useDesktopSelect({
|
|
|
18665
18616
|
disabled,
|
|
18666
18617
|
onChange
|
|
18667
18618
|
}) {
|
|
18668
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
18669
|
-
const triggerRef =
|
|
18670
|
-
const listRef =
|
|
18671
|
-
const optionRefs =
|
|
18619
|
+
const [highlightedIndex, setHighlightedIndex] = React75.useState(-1);
|
|
18620
|
+
const triggerRef = React75.useRef(null);
|
|
18621
|
+
const listRef = React75.useRef(null);
|
|
18622
|
+
const optionRefs = React75.useRef([]);
|
|
18672
18623
|
const selectedIndex = getOptionIndex2(options, value);
|
|
18673
|
-
|
|
18624
|
+
React75.useEffect(() => {
|
|
18674
18625
|
if (!isOpen || isMobile3) return;
|
|
18675
18626
|
setHighlightedIndex((currentIndex) => {
|
|
18676
18627
|
if (currentIndex >= 0) {
|
|
@@ -18685,34 +18636,34 @@ function useDesktopSelect({
|
|
|
18685
18636
|
window.cancelAnimationFrame(frameId);
|
|
18686
18637
|
};
|
|
18687
18638
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
18688
|
-
|
|
18639
|
+
React75.useEffect(() => {
|
|
18689
18640
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
18690
18641
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
18691
18642
|
block: "nearest"
|
|
18692
18643
|
});
|
|
18693
18644
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
18694
|
-
|
|
18645
|
+
React75.useEffect(() => {
|
|
18695
18646
|
if (isOpen) return;
|
|
18696
18647
|
setHighlightedIndex(-1);
|
|
18697
18648
|
}, [isOpen]);
|
|
18698
|
-
const focusTrigger =
|
|
18649
|
+
const focusTrigger = React75.useCallback(() => {
|
|
18699
18650
|
triggerRef.current?.focus();
|
|
18700
18651
|
}, []);
|
|
18701
|
-
const handleSelect =
|
|
18652
|
+
const handleSelect = React75.useCallback(
|
|
18702
18653
|
(option) => {
|
|
18703
18654
|
if (option.isDisabled || disabled) return;
|
|
18704
18655
|
onChange?.(option);
|
|
18705
18656
|
},
|
|
18706
18657
|
[disabled, onChange]
|
|
18707
18658
|
);
|
|
18708
|
-
const openMenu =
|
|
18659
|
+
const openMenu = React75.useCallback(
|
|
18709
18660
|
(targetIndex) => {
|
|
18710
18661
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
18711
18662
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
18712
18663
|
},
|
|
18713
18664
|
[options, selectedIndex]
|
|
18714
18665
|
);
|
|
18715
|
-
const handleTriggerKeyDown =
|
|
18666
|
+
const handleTriggerKeyDown = React75.useCallback(
|
|
18716
18667
|
(event, onOpen) => {
|
|
18717
18668
|
if (disabled) return;
|
|
18718
18669
|
if (event.key === "ArrowDown") {
|
|
@@ -18737,7 +18688,7 @@ function useDesktopSelect({
|
|
|
18737
18688
|
},
|
|
18738
18689
|
[disabled, openMenu, options, selectedIndex]
|
|
18739
18690
|
);
|
|
18740
|
-
const handleMenuKeyDown =
|
|
18691
|
+
const handleMenuKeyDown = React75.useCallback(
|
|
18741
18692
|
(event, onClose) => {
|
|
18742
18693
|
if (event.key === "Escape") {
|
|
18743
18694
|
event.preventDefault();
|
|
@@ -18787,7 +18738,7 @@ function useDesktopSelect({
|
|
|
18787
18738
|
},
|
|
18788
18739
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
18789
18740
|
);
|
|
18790
|
-
const setOptionRef =
|
|
18741
|
+
const setOptionRef = React75.useCallback(
|
|
18791
18742
|
(index, node) => {
|
|
18792
18743
|
optionRefs.current[index] = node;
|
|
18793
18744
|
},
|
|
@@ -18807,23 +18758,23 @@ function useDesktopSelect({
|
|
|
18807
18758
|
}
|
|
18808
18759
|
|
|
18809
18760
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
18810
|
-
import * as
|
|
18761
|
+
import * as React76 from "react";
|
|
18811
18762
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
18812
|
-
const [pendingValue, setPendingValue] =
|
|
18763
|
+
const [pendingValue, setPendingValue] = React76.useState(
|
|
18813
18764
|
value ?? null
|
|
18814
18765
|
);
|
|
18815
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
18816
|
-
const mobileListRef =
|
|
18817
|
-
const scrollSettleTimeoutRef =
|
|
18818
|
-
const scrollAnimationFrameRef =
|
|
18819
|
-
const getTargetIndex =
|
|
18766
|
+
const [mobileScrollTop, setMobileScrollTop] = React76.useState(0);
|
|
18767
|
+
const mobileListRef = React76.useRef(null);
|
|
18768
|
+
const scrollSettleTimeoutRef = React76.useRef(null);
|
|
18769
|
+
const scrollAnimationFrameRef = React76.useRef(null);
|
|
18770
|
+
const getTargetIndex = React76.useCallback(
|
|
18820
18771
|
(targetValue) => {
|
|
18821
18772
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
18822
18773
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
18823
18774
|
},
|
|
18824
18775
|
[options]
|
|
18825
18776
|
);
|
|
18826
|
-
const syncScrollPosition =
|
|
18777
|
+
const syncScrollPosition = React76.useCallback(
|
|
18827
18778
|
(targetValue, behavior = "instant") => {
|
|
18828
18779
|
const targetIndex = getTargetIndex(targetValue);
|
|
18829
18780
|
if (targetIndex < 0) return;
|
|
@@ -18842,27 +18793,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18842
18793
|
},
|
|
18843
18794
|
[getTargetIndex, options]
|
|
18844
18795
|
);
|
|
18845
|
-
const clearScrollSettleTimeout =
|
|
18796
|
+
const clearScrollSettleTimeout = React76.useCallback(() => {
|
|
18846
18797
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
18847
18798
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
18848
18799
|
scrollSettleTimeoutRef.current = null;
|
|
18849
18800
|
}, []);
|
|
18850
|
-
const clearScrollAnimationFrame =
|
|
18801
|
+
const clearScrollAnimationFrame = React76.useCallback(() => {
|
|
18851
18802
|
if (scrollAnimationFrameRef.current === null) return;
|
|
18852
18803
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
18853
18804
|
scrollAnimationFrameRef.current = null;
|
|
18854
18805
|
}, []);
|
|
18855
|
-
|
|
18806
|
+
React76.useEffect(
|
|
18856
18807
|
() => () => {
|
|
18857
18808
|
clearScrollSettleTimeout();
|
|
18858
18809
|
clearScrollAnimationFrame();
|
|
18859
18810
|
},
|
|
18860
18811
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
18861
18812
|
);
|
|
18862
|
-
|
|
18813
|
+
React76.useEffect(() => {
|
|
18863
18814
|
setPendingValue(value ?? null);
|
|
18864
18815
|
}, [value]);
|
|
18865
|
-
|
|
18816
|
+
React76.useLayoutEffect(() => {
|
|
18866
18817
|
if (!isMobile3 || !isOpen) return;
|
|
18867
18818
|
const frameId = window.requestAnimationFrame(() => {
|
|
18868
18819
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -18871,7 +18822,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18871
18822
|
window.cancelAnimationFrame(frameId);
|
|
18872
18823
|
};
|
|
18873
18824
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
18874
|
-
const settleScroll =
|
|
18825
|
+
const settleScroll = React76.useCallback(() => {
|
|
18875
18826
|
if (!mobileListRef.current) return;
|
|
18876
18827
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
18877
18828
|
const nextOption = options[nextIndex];
|
|
@@ -18883,13 +18834,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18883
18834
|
}
|
|
18884
18835
|
setPendingValue(nextOption);
|
|
18885
18836
|
}, [options, pendingValue]);
|
|
18886
|
-
const scheduleScrollSettle =
|
|
18837
|
+
const scheduleScrollSettle = React76.useCallback(() => {
|
|
18887
18838
|
clearScrollSettleTimeout();
|
|
18888
18839
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
18889
18840
|
settleScroll();
|
|
18890
18841
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
18891
18842
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
18892
|
-
const handleScroll =
|
|
18843
|
+
const handleScroll = React76.useCallback(() => {
|
|
18893
18844
|
if (!mobileListRef.current) return;
|
|
18894
18845
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
18895
18846
|
clearScrollAnimationFrame();
|
|
@@ -18899,7 +18850,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18899
18850
|
});
|
|
18900
18851
|
scheduleScrollSettle();
|
|
18901
18852
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
18902
|
-
const focusOptionByIndex =
|
|
18853
|
+
const focusOptionByIndex = React76.useCallback(
|
|
18903
18854
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
18904
18855
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
18905
18856
|
const option = options[index];
|
|
@@ -18917,7 +18868,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18917
18868
|
},
|
|
18918
18869
|
[options, scheduleScrollSettle]
|
|
18919
18870
|
);
|
|
18920
|
-
const handleOptionClick =
|
|
18871
|
+
const handleOptionClick = React76.useCallback(
|
|
18921
18872
|
(option) => {
|
|
18922
18873
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
18923
18874
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -18926,7 +18877,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18926
18877
|
},
|
|
18927
18878
|
[disabled, focusOptionByIndex, options]
|
|
18928
18879
|
);
|
|
18929
|
-
const moveByStep =
|
|
18880
|
+
const moveByStep = React76.useCallback(
|
|
18930
18881
|
(step) => {
|
|
18931
18882
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
18932
18883
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -18938,7 +18889,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18938
18889
|
},
|
|
18939
18890
|
[focusOptionByIndex, options, pendingValue]
|
|
18940
18891
|
);
|
|
18941
|
-
const moveToBoundary =
|
|
18892
|
+
const moveToBoundary = React76.useCallback(
|
|
18942
18893
|
(boundary) => {
|
|
18943
18894
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
18944
18895
|
if (targetIndex >= 0) {
|
|
@@ -18947,7 +18898,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18947
18898
|
},
|
|
18948
18899
|
[focusOptionByIndex, options]
|
|
18949
18900
|
);
|
|
18950
|
-
const syncPendingValue =
|
|
18901
|
+
const syncPendingValue = React76.useCallback(
|
|
18951
18902
|
(nextValue) => {
|
|
18952
18903
|
const normalizedValue = nextValue ?? null;
|
|
18953
18904
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -18975,9 +18926,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18975
18926
|
}
|
|
18976
18927
|
|
|
18977
18928
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
18978
|
-
import * as
|
|
18929
|
+
import * as React77 from "react";
|
|
18979
18930
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
18980
|
-
const reactId =
|
|
18931
|
+
const reactId = React77.useId().replace(/:/g, "");
|
|
18981
18932
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
18982
18933
|
const triggerId = `${baseId}-trigger`;
|
|
18983
18934
|
const labelId = `${baseId}-label`;
|
|
@@ -18987,7 +18938,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
18987
18938
|
const listboxId = `${baseId}-listbox`;
|
|
18988
18939
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
18989
18940
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
18990
|
-
const getOptionId2 =
|
|
18941
|
+
const getOptionId2 = React77.useCallback(
|
|
18991
18942
|
(index) => `${baseId}-option-${index}`,
|
|
18992
18943
|
[baseId]
|
|
18993
18944
|
);
|
|
@@ -19005,8 +18956,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19005
18956
|
}
|
|
19006
18957
|
|
|
19007
18958
|
// src/airbnb-fields/select/Select.tsx
|
|
19008
|
-
import { jsx as
|
|
19009
|
-
var AirbnbSelect =
|
|
18959
|
+
import { jsx as jsx189, jsxs as jsxs122 } from "react/jsx-runtime";
|
|
18960
|
+
var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
19010
18961
|
options = [],
|
|
19011
18962
|
value,
|
|
19012
18963
|
onChange,
|
|
@@ -19033,8 +18984,8 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19033
18984
|
filterOption
|
|
19034
18985
|
}, ref) {
|
|
19035
18986
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19036
|
-
const [isOpen, setIsOpen] =
|
|
19037
|
-
const containerRef =
|
|
18987
|
+
const [isOpen, setIsOpen] = React78.useState(false);
|
|
18988
|
+
const containerRef = React78.useRef(null);
|
|
19038
18989
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19039
18990
|
const hasValue = Boolean(value);
|
|
19040
18991
|
const helperText = placeholder ?? label;
|
|
@@ -19096,12 +19047,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19096
19047
|
onOutsideClick: () => setIsOpen(false),
|
|
19097
19048
|
isDisabled: !isOpen || isMobile3
|
|
19098
19049
|
});
|
|
19099
|
-
|
|
19050
|
+
React78.useEffect(() => {
|
|
19100
19051
|
if (isBlocked) {
|
|
19101
19052
|
setIsOpen(false);
|
|
19102
19053
|
}
|
|
19103
19054
|
}, [isBlocked]);
|
|
19104
|
-
|
|
19055
|
+
React78.useEffect(
|
|
19105
19056
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19106
19057
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19107
19058
|
return;
|
|
@@ -19113,7 +19064,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19113
19064
|
},
|
|
19114
19065
|
[onChange, filteredOptions, value]
|
|
19115
19066
|
);
|
|
19116
|
-
const handleMobileOpenChange =
|
|
19067
|
+
const handleMobileOpenChange = React78.useCallback(
|
|
19117
19068
|
(nextOpen) => {
|
|
19118
19069
|
if (isBlocked && nextOpen) return;
|
|
19119
19070
|
setIsOpen(nextOpen);
|
|
@@ -19124,7 +19075,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19124
19075
|
},
|
|
19125
19076
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19126
19077
|
);
|
|
19127
|
-
const handleMobileDone =
|
|
19078
|
+
const handleMobileDone = React78.useCallback(() => {
|
|
19128
19079
|
if (isBlocked) return;
|
|
19129
19080
|
const finalOption = pendingValue;
|
|
19130
19081
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19133,7 +19084,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19133
19084
|
setIsOpen(false);
|
|
19134
19085
|
focusTrigger();
|
|
19135
19086
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19136
|
-
const handleTriggerClick =
|
|
19087
|
+
const handleTriggerClick = React78.useCallback(() => {
|
|
19137
19088
|
if (isBlocked) return;
|
|
19138
19089
|
setIsOpen((prev) => {
|
|
19139
19090
|
const nextOpen = !prev;
|
|
@@ -19192,7 +19143,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19192
19143
|
ref: containerRef,
|
|
19193
19144
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19194
19145
|
children: [
|
|
19195
|
-
name && /* @__PURE__ */
|
|
19146
|
+
name && /* @__PURE__ */ jsx189("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19196
19147
|
renderTrigger ? renderTrigger({
|
|
19197
19148
|
id: triggerId,
|
|
19198
19149
|
open: isOpen,
|
|
@@ -19213,7 +19164,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19213
19164
|
onClick: handleTriggerClick,
|
|
19214
19165
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19215
19166
|
onBlur
|
|
19216
|
-
}) : /* @__PURE__ */
|
|
19167
|
+
}) : /* @__PURE__ */ jsx189(
|
|
19217
19168
|
AirbnbSelectTrigger,
|
|
19218
19169
|
{
|
|
19219
19170
|
id: triggerId,
|
|
@@ -19240,7 +19191,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19240
19191
|
onBlur
|
|
19241
19192
|
}
|
|
19242
19193
|
),
|
|
19243
|
-
isMobile3 ? /* @__PURE__ */
|
|
19194
|
+
isMobile3 ? /* @__PURE__ */ jsx189(
|
|
19244
19195
|
AirbnbSelectMobileContent,
|
|
19245
19196
|
{
|
|
19246
19197
|
open: isOpen,
|
|
@@ -19265,7 +19216,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19265
19216
|
getOptionId: getOptionId2,
|
|
19266
19217
|
noOptionsMessage
|
|
19267
19218
|
}
|
|
19268
|
-
) : /* @__PURE__ */
|
|
19219
|
+
) : /* @__PURE__ */ jsx189(
|
|
19269
19220
|
AirbnbSelectDesktopContent,
|
|
19270
19221
|
{
|
|
19271
19222
|
isOpen,
|
|
@@ -19299,13 +19250,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19299
19250
|
});
|
|
19300
19251
|
|
|
19301
19252
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19302
|
-
import { jsx as
|
|
19253
|
+
import { jsx as jsx190, jsxs as jsxs123 } from "react/jsx-runtime";
|
|
19303
19254
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19304
19255
|
const label = String(option.label);
|
|
19305
19256
|
const value = String(option.value);
|
|
19306
19257
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19307
19258
|
}
|
|
19308
|
-
var AirbnbPhoneField =
|
|
19259
|
+
var AirbnbPhoneField = React79.forwardRef(
|
|
19309
19260
|
({
|
|
19310
19261
|
label,
|
|
19311
19262
|
topLabel,
|
|
@@ -19326,10 +19277,12 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19326
19277
|
codeName,
|
|
19327
19278
|
numberName,
|
|
19328
19279
|
mobileTitle,
|
|
19329
|
-
codePlaceholder = "+00"
|
|
19280
|
+
codePlaceholder = "+00",
|
|
19281
|
+
defaultCode
|
|
19330
19282
|
}, ref) => {
|
|
19331
|
-
const inputId =
|
|
19332
|
-
const
|
|
19283
|
+
const inputId = React79.useId();
|
|
19284
|
+
const effectiveCode = value?.code || defaultCode || "";
|
|
19285
|
+
const codeOptions = React79.useMemo(
|
|
19333
19286
|
() => options.map((option) => ({
|
|
19334
19287
|
value: option.value,
|
|
19335
19288
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19337,26 +19290,26 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19337
19290
|
})),
|
|
19338
19291
|
[options]
|
|
19339
19292
|
);
|
|
19340
|
-
const selectedCodeOption =
|
|
19341
|
-
() => codeOptions.find((option) => option.value ===
|
|
19342
|
-
[codeOptions,
|
|
19293
|
+
const selectedCodeOption = React79.useMemo(
|
|
19294
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19295
|
+
[codeOptions, effectiveCode]
|
|
19343
19296
|
);
|
|
19344
|
-
const combinedValue =
|
|
19297
|
+
const combinedValue = effectiveCode || value?.number ? `${effectiveCode}${value?.number ?? ""}` : "";
|
|
19345
19298
|
const hasInvalidState = Boolean(error) || Boolean(invalid);
|
|
19346
19299
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
19347
19300
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
19348
19301
|
return /* @__PURE__ */ jsxs123("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
19349
|
-
name && /* @__PURE__ */
|
|
19350
|
-
codeName && /* @__PURE__ */
|
|
19302
|
+
name && /* @__PURE__ */ jsx190("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
19303
|
+
codeName && /* @__PURE__ */ jsx190(
|
|
19351
19304
|
"input",
|
|
19352
19305
|
{
|
|
19353
19306
|
type: "hidden",
|
|
19354
19307
|
name: codeName,
|
|
19355
|
-
value:
|
|
19308
|
+
value: effectiveCode,
|
|
19356
19309
|
disabled
|
|
19357
19310
|
}
|
|
19358
19311
|
),
|
|
19359
|
-
numberName && /* @__PURE__ */
|
|
19312
|
+
numberName && /* @__PURE__ */ jsx190(
|
|
19360
19313
|
"input",
|
|
19361
19314
|
{
|
|
19362
19315
|
type: "hidden",
|
|
@@ -19365,7 +19318,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19365
19318
|
disabled
|
|
19366
19319
|
}
|
|
19367
19320
|
),
|
|
19368
|
-
topLabel && /* @__PURE__ */
|
|
19321
|
+
topLabel && /* @__PURE__ */ jsx190(
|
|
19369
19322
|
"label",
|
|
19370
19323
|
{
|
|
19371
19324
|
htmlFor: inputId,
|
|
@@ -19374,7 +19327,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19374
19327
|
}
|
|
19375
19328
|
),
|
|
19376
19329
|
/* @__PURE__ */ jsxs123("div", { className: "flex items-stretch", children: [
|
|
19377
|
-
/* @__PURE__ */
|
|
19330
|
+
/* @__PURE__ */ jsx190(
|
|
19378
19331
|
AirbnbSelect,
|
|
19379
19332
|
{
|
|
19380
19333
|
ref,
|
|
@@ -19424,8 +19377,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19424
19377
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
19425
19378
|
),
|
|
19426
19379
|
children: [
|
|
19427
|
-
/* @__PURE__ */
|
|
19428
|
-
/* @__PURE__ */
|
|
19380
|
+
/* @__PURE__ */ jsx190("span", { children: valueLabel ?? codePlaceholder }),
|
|
19381
|
+
/* @__PURE__ */ jsx190(
|
|
19429
19382
|
ChevronDown6,
|
|
19430
19383
|
{
|
|
19431
19384
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
@@ -19437,7 +19390,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19437
19390
|
)
|
|
19438
19391
|
}
|
|
19439
19392
|
),
|
|
19440
|
-
/* @__PURE__ */
|
|
19393
|
+
/* @__PURE__ */ jsx190(
|
|
19441
19394
|
AirbnbInput,
|
|
19442
19395
|
{
|
|
19443
19396
|
id: inputId,
|
|
@@ -19459,25 +19412,25 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19459
19412
|
contentClassName: "h-[40px] py-2",
|
|
19460
19413
|
inputClassName: "text-[16px] leading-7",
|
|
19461
19414
|
onChange: (event) => onChange({
|
|
19462
|
-
code:
|
|
19415
|
+
code: effectiveCode,
|
|
19463
19416
|
number: event.target.value
|
|
19464
19417
|
}),
|
|
19465
19418
|
onBlur
|
|
19466
19419
|
}
|
|
19467
19420
|
)
|
|
19468
19421
|
] }),
|
|
19469
|
-
error && /* @__PURE__ */
|
|
19422
|
+
error && /* @__PURE__ */ jsx190(FieldErrorMessage, { message: error })
|
|
19470
19423
|
] });
|
|
19471
19424
|
}
|
|
19472
19425
|
);
|
|
19473
19426
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19474
19427
|
|
|
19475
19428
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19476
|
-
import * as
|
|
19429
|
+
import * as React80 from "react";
|
|
19477
19430
|
import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
|
|
19478
19431
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
19479
19432
|
import { useCallback as useCallback57 } from "react";
|
|
19480
|
-
import { jsx as
|
|
19433
|
+
import { jsx as jsx191, jsxs as jsxs124 } from "react/jsx-runtime";
|
|
19481
19434
|
var ROW_HEIGHT = 48;
|
|
19482
19435
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
19483
19436
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -19517,13 +19470,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19517
19470
|
loadingMessage
|
|
19518
19471
|
}, ref) => {
|
|
19519
19472
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19520
|
-
const reactId =
|
|
19521
|
-
const [open, setOpen] =
|
|
19522
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
19523
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19524
|
-
const containerRef =
|
|
19525
|
-
const triggerRef =
|
|
19526
|
-
const inputRef =
|
|
19473
|
+
const reactId = React80.useId();
|
|
19474
|
+
const [open, setOpen] = React80.useState(false);
|
|
19475
|
+
const [internalSearchValue, setInternalSearchValue] = React80.useState("");
|
|
19476
|
+
const [highlightedIndex, setHighlightedIndex] = React80.useState(-1);
|
|
19477
|
+
const containerRef = React80.useRef(null);
|
|
19478
|
+
const triggerRef = React80.useRef(null);
|
|
19479
|
+
const inputRef = React80.useRef(null);
|
|
19527
19480
|
const listboxId = `${reactId}-listbox`;
|
|
19528
19481
|
const labelId = `${reactId}-label`;
|
|
19529
19482
|
const valueId = `${reactId}-value`;
|
|
@@ -19532,13 +19485,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19532
19485
|
const searchInputId = `${reactId}-search`;
|
|
19533
19486
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19534
19487
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19535
|
-
const visibleOptions =
|
|
19488
|
+
const visibleOptions = React80.useMemo(() => {
|
|
19536
19489
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19537
19490
|
return options;
|
|
19538
19491
|
}
|
|
19539
19492
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19540
19493
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19541
|
-
const selectedIndex =
|
|
19494
|
+
const selectedIndex = React80.useMemo(
|
|
19542
19495
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19543
19496
|
[value?.value, visibleOptions]
|
|
19544
19497
|
);
|
|
@@ -19564,7 +19517,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19564
19517
|
},
|
|
19565
19518
|
[handleOnOpenChange]
|
|
19566
19519
|
);
|
|
19567
|
-
|
|
19520
|
+
React80.useEffect(() => {
|
|
19568
19521
|
if (isBlocked) {
|
|
19569
19522
|
setSelectOpen(false);
|
|
19570
19523
|
return;
|
|
@@ -19577,7 +19530,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19577
19530
|
window.cancelAnimationFrame(frameId);
|
|
19578
19531
|
};
|
|
19579
19532
|
}, [isBlocked, open, setSelectOpen]);
|
|
19580
|
-
|
|
19533
|
+
React80.useEffect(() => {
|
|
19581
19534
|
if (!open) {
|
|
19582
19535
|
setHighlightedIndex(-1);
|
|
19583
19536
|
return;
|
|
@@ -19645,7 +19598,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19645
19598
|
}
|
|
19646
19599
|
}
|
|
19647
19600
|
}
|
|
19648
|
-
const content = /* @__PURE__ */
|
|
19601
|
+
const content = /* @__PURE__ */ jsx191(
|
|
19649
19602
|
AirbnbSearchableSelectContent,
|
|
19650
19603
|
{
|
|
19651
19604
|
inputId: searchInputId,
|
|
@@ -19672,10 +19625,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19672
19625
|
onOptionHover: setHighlightedIndex
|
|
19673
19626
|
}
|
|
19674
19627
|
);
|
|
19675
|
-
|
|
19628
|
+
React80.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
19676
19629
|
return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
19677
|
-
name && /* @__PURE__ */
|
|
19678
|
-
/* @__PURE__ */
|
|
19630
|
+
name && /* @__PURE__ */ jsx191("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19631
|
+
/* @__PURE__ */ jsx191(
|
|
19679
19632
|
AirbnbFieldTrigger,
|
|
19680
19633
|
{
|
|
19681
19634
|
id: `${reactId}-trigger`,
|
|
@@ -19709,7 +19662,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19709
19662
|
},
|
|
19710
19663
|
onKeyDown: handleTriggerKeyDown,
|
|
19711
19664
|
onBlur,
|
|
19712
|
-
trailingAdornment: /* @__PURE__ */
|
|
19665
|
+
trailingAdornment: /* @__PURE__ */ jsx191(
|
|
19713
19666
|
ChevronDown7,
|
|
19714
19667
|
{
|
|
19715
19668
|
className: cn(
|
|
@@ -19720,7 +19673,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19720
19673
|
)
|
|
19721
19674
|
}
|
|
19722
19675
|
),
|
|
19723
|
-
isMobile3 ? /* @__PURE__ */
|
|
19676
|
+
isMobile3 ? /* @__PURE__ */ jsx191(
|
|
19724
19677
|
Drawer,
|
|
19725
19678
|
{
|
|
19726
19679
|
open,
|
|
@@ -19733,12 +19686,12 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19733
19686
|
closeSelect();
|
|
19734
19687
|
},
|
|
19735
19688
|
children: /* @__PURE__ */ jsxs124(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
19736
|
-
/* @__PURE__ */
|
|
19737
|
-
/* @__PURE__ */
|
|
19738
|
-
/* @__PURE__ */
|
|
19689
|
+
/* @__PURE__ */ jsx191(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
19690
|
+
/* @__PURE__ */ jsx191(DrawerDescription, { className: "sr-only", children: label }),
|
|
19691
|
+
/* @__PURE__ */ jsx191("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
19739
19692
|
] })
|
|
19740
19693
|
}
|
|
19741
|
-
) : open ? /* @__PURE__ */
|
|
19694
|
+
) : open ? /* @__PURE__ */ jsx191(
|
|
19742
19695
|
"div",
|
|
19743
19696
|
{
|
|
19744
19697
|
className: cn(
|
|
@@ -19750,7 +19703,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19750
19703
|
) : null
|
|
19751
19704
|
] });
|
|
19752
19705
|
};
|
|
19753
|
-
var AirbnbSearchableSelect =
|
|
19706
|
+
var AirbnbSearchableSelect = React80.forwardRef(
|
|
19754
19707
|
AirbnbSearchableSelectInternal
|
|
19755
19708
|
);
|
|
19756
19709
|
function AirbnbSearchableSelectContent({
|
|
@@ -19777,9 +19730,9 @@ function AirbnbSearchableSelectContent({
|
|
|
19777
19730
|
onOptionClick,
|
|
19778
19731
|
onOptionHover
|
|
19779
19732
|
}) {
|
|
19780
|
-
const listRef =
|
|
19781
|
-
const lastLoadMoreOptionsLengthRef =
|
|
19782
|
-
const previousHighlightedIndexRef =
|
|
19733
|
+
const listRef = React80.useRef(null);
|
|
19734
|
+
const lastLoadMoreOptionsLengthRef = React80.useRef(null);
|
|
19735
|
+
const previousHighlightedIndexRef = React80.useRef(highlightedIndex);
|
|
19783
19736
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
19784
19737
|
const virtualizer = useVirtualizer3({
|
|
19785
19738
|
count: rowCount,
|
|
@@ -19790,7 +19743,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19790
19743
|
const virtualItems = virtualizer.getVirtualItems();
|
|
19791
19744
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
19792
19745
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
19793
|
-
|
|
19746
|
+
React80.useEffect(() => {
|
|
19794
19747
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
19795
19748
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
19796
19749
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -19798,7 +19751,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19798
19751
|
onLoadMore?.();
|
|
19799
19752
|
}
|
|
19800
19753
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
19801
|
-
|
|
19754
|
+
React80.useEffect(() => {
|
|
19802
19755
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
19803
19756
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
19804
19757
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -19807,14 +19760,14 @@ function AirbnbSearchableSelectContent({
|
|
|
19807
19760
|
}, [highlightedIndex, virtualizer]);
|
|
19808
19761
|
return /* @__PURE__ */ jsxs124("div", { className: "p-2", children: [
|
|
19809
19762
|
/* @__PURE__ */ jsxs124("div", { className: "relative mb-2", children: [
|
|
19810
|
-
/* @__PURE__ */
|
|
19763
|
+
/* @__PURE__ */ jsx191(
|
|
19811
19764
|
Search4,
|
|
19812
19765
|
{
|
|
19813
19766
|
"aria-hidden": "true",
|
|
19814
19767
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
19815
19768
|
}
|
|
19816
19769
|
),
|
|
19817
|
-
/* @__PURE__ */
|
|
19770
|
+
/* @__PURE__ */ jsx191(
|
|
19818
19771
|
"input",
|
|
19819
19772
|
{
|
|
19820
19773
|
id: inputId,
|
|
@@ -19833,7 +19786,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19833
19786
|
}
|
|
19834
19787
|
)
|
|
19835
19788
|
] }),
|
|
19836
|
-
loading && options.length === 0 ? /* @__PURE__ */
|
|
19789
|
+
loading && options.length === 0 ? /* @__PURE__ */ jsx191("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx191("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx191(
|
|
19837
19790
|
"div",
|
|
19838
19791
|
{
|
|
19839
19792
|
id: listboxId,
|
|
@@ -19842,7 +19795,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19842
19795
|
"aria-labelledby": labelId,
|
|
19843
19796
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
19844
19797
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
19845
|
-
children: /* @__PURE__ */
|
|
19798
|
+
children: /* @__PURE__ */ jsx191(
|
|
19846
19799
|
"div",
|
|
19847
19800
|
{
|
|
19848
19801
|
className: "relative w-full",
|
|
@@ -19850,7 +19803,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19850
19803
|
children: virtualItems.map((virtualItem) => {
|
|
19851
19804
|
const option = options[virtualItem.index];
|
|
19852
19805
|
if (!option) {
|
|
19853
|
-
return /* @__PURE__ */
|
|
19806
|
+
return /* @__PURE__ */ jsx191(
|
|
19854
19807
|
"div",
|
|
19855
19808
|
{
|
|
19856
19809
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -19865,7 +19818,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19865
19818
|
}
|
|
19866
19819
|
const isSelected = value?.value === option.value;
|
|
19867
19820
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
19868
|
-
return /* @__PURE__ */
|
|
19821
|
+
return /* @__PURE__ */ jsx191(
|
|
19869
19822
|
"button",
|
|
19870
19823
|
{
|
|
19871
19824
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -19887,7 +19840,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19887
19840
|
height: `${virtualItem.size}px`,
|
|
19888
19841
|
transform: `translateY(${virtualItem.start}px)`
|
|
19889
19842
|
},
|
|
19890
|
-
children: /* @__PURE__ */
|
|
19843
|
+
children: /* @__PURE__ */ jsx191("span", { className: "truncate text-center", children: String(option.label) })
|
|
19891
19844
|
},
|
|
19892
19845
|
`${String(option.value)}-${virtualItem.index}`
|
|
19893
19846
|
);
|
|
@@ -19916,16 +19869,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
19916
19869
|
}
|
|
19917
19870
|
|
|
19918
19871
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
19919
|
-
import * as
|
|
19872
|
+
import * as React81 from "react";
|
|
19920
19873
|
import { useTranslation as useTranslation45 } from "react-i18next";
|
|
19921
19874
|
import { Search as Search5, X as X11 } from "lucide-react";
|
|
19922
|
-
import { jsx as
|
|
19923
|
-
var AirbnbSearchInput =
|
|
19875
|
+
import { jsx as jsx192, jsxs as jsxs125 } from "react/jsx-runtime";
|
|
19876
|
+
var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
19924
19877
|
const { t } = useTranslation45();
|
|
19925
19878
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
19926
19879
|
return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
19927
|
-
/* @__PURE__ */
|
|
19928
|
-
/* @__PURE__ */
|
|
19880
|
+
/* @__PURE__ */ jsx192(Search5, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
|
|
19881
|
+
/* @__PURE__ */ jsx192(
|
|
19929
19882
|
"input",
|
|
19930
19883
|
{
|
|
19931
19884
|
...props,
|
|
@@ -19944,13 +19897,13 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
19944
19897
|
)
|
|
19945
19898
|
}
|
|
19946
19899
|
),
|
|
19947
|
-
onReset && /* @__PURE__ */
|
|
19900
|
+
onReset && /* @__PURE__ */ jsx192(
|
|
19948
19901
|
Button,
|
|
19949
19902
|
{
|
|
19950
19903
|
variant: "ghost",
|
|
19951
19904
|
onClick: onReset,
|
|
19952
19905
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
19953
|
-
children: /* @__PURE__ */
|
|
19906
|
+
children: /* @__PURE__ */ jsx192(X11, { className: "h-5 w-5" })
|
|
19954
19907
|
}
|
|
19955
19908
|
)
|
|
19956
19909
|
] });
|
|
@@ -19958,11 +19911,11 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
19958
19911
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
19959
19912
|
|
|
19960
19913
|
// src/airbnb-fields/switch/Switch.tsx
|
|
19961
|
-
import * as
|
|
19914
|
+
import * as React82 from "react";
|
|
19962
19915
|
import * as SwitchPrimitives2 from "@radix-ui/react-switch";
|
|
19963
19916
|
import { Check as Check7 } from "lucide-react";
|
|
19964
|
-
import { Fragment as
|
|
19965
|
-
var AirbnbSwitch =
|
|
19917
|
+
import { Fragment as Fragment18, jsx as jsx193, jsxs as jsxs126 } from "react/jsx-runtime";
|
|
19918
|
+
var AirbnbSwitch = React82.forwardRef(
|
|
19966
19919
|
({
|
|
19967
19920
|
className,
|
|
19968
19921
|
value,
|
|
@@ -19976,9 +19929,9 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
19976
19929
|
wrapperClassName,
|
|
19977
19930
|
...props
|
|
19978
19931
|
}, ref) => {
|
|
19979
|
-
const generatedId =
|
|
19932
|
+
const generatedId = React82.useId();
|
|
19980
19933
|
const fieldId = id || generatedId;
|
|
19981
|
-
const switchElement = /* @__PURE__ */
|
|
19934
|
+
const switchElement = /* @__PURE__ */ jsx193(
|
|
19982
19935
|
SwitchPrimitives2.Root,
|
|
19983
19936
|
{
|
|
19984
19937
|
ref,
|
|
@@ -19998,14 +19951,14 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
19998
19951
|
"aria-busy": loading,
|
|
19999
19952
|
"aria-readonly": readOnly,
|
|
20000
19953
|
...props,
|
|
20001
|
-
children: /* @__PURE__ */
|
|
19954
|
+
children: /* @__PURE__ */ jsx193(
|
|
20002
19955
|
SwitchPrimitives2.Thumb,
|
|
20003
19956
|
{
|
|
20004
19957
|
className: cn(
|
|
20005
19958
|
"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",
|
|
20006
19959
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
20007
19960
|
),
|
|
20008
|
-
children: /* @__PURE__ */
|
|
19961
|
+
children: /* @__PURE__ */ jsx193(
|
|
20009
19962
|
Check7,
|
|
20010
19963
|
{
|
|
20011
19964
|
"aria-hidden": "true",
|
|
@@ -20020,10 +19973,10 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20020
19973
|
if (!label && !error) {
|
|
20021
19974
|
return switchElement;
|
|
20022
19975
|
}
|
|
20023
|
-
return /* @__PURE__ */ jsxs126(
|
|
19976
|
+
return /* @__PURE__ */ jsxs126(Fragment18, { children: [
|
|
20024
19977
|
/* @__PURE__ */ jsxs126("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
|
|
20025
19978
|
switchElement,
|
|
20026
|
-
label && /* @__PURE__ */
|
|
19979
|
+
label && /* @__PURE__ */ jsx193(
|
|
20027
19980
|
Label,
|
|
20028
19981
|
{
|
|
20029
19982
|
htmlFor: fieldId,
|
|
@@ -20035,7 +19988,7 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20035
19988
|
}
|
|
20036
19989
|
)
|
|
20037
19990
|
] }),
|
|
20038
|
-
error && /* @__PURE__ */
|
|
19991
|
+
error && /* @__PURE__ */ jsx193(ErrorMessage, { disabled, children: error })
|
|
20039
19992
|
] });
|
|
20040
19993
|
}
|
|
20041
19994
|
);
|
|
@@ -20243,7 +20196,6 @@ export {
|
|
|
20243
20196
|
ScrollBar,
|
|
20244
20197
|
SearchButton,
|
|
20245
20198
|
SearchInput,
|
|
20246
|
-
SearchingSelect,
|
|
20247
20199
|
Section,
|
|
20248
20200
|
SectionGroup,
|
|
20249
20201
|
SectionTag,
|