@chekinapp/ui 0.0.121 → 0.0.123
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +936 -958
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -26
- package/dist/index.d.ts +4 -26
- package/dist/index.js +787 -808
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.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";
|
|
@@ -13220,7 +13217,10 @@ function useSelectState(params) {
|
|
|
13220
13217
|
() => resolveValueLabel(singleSelected, getValueLabel),
|
|
13221
13218
|
[singleSelected, getValueLabel]
|
|
13222
13219
|
);
|
|
13223
|
-
const
|
|
13220
|
+
const isSearchOnlyInput = isMulti || Boolean(isSearchInDropdown);
|
|
13221
|
+
const [inputValue, setInputValue] = React48.useState(
|
|
13222
|
+
isSearchOnlyInput ? "" : valueLabel
|
|
13223
|
+
);
|
|
13224
13224
|
const hasValue = selectedOptions.length > 0;
|
|
13225
13225
|
const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
|
|
13226
13226
|
const hasInvalidState = Boolean(error);
|
|
@@ -13235,18 +13235,18 @@ function useSelectState(params) {
|
|
|
13235
13235
|
const ids = useSelectIds({ name, hasValue, error, hideErrorMessage });
|
|
13236
13236
|
const { listboxId, getOptionId: getOptionId2 } = ids;
|
|
13237
13237
|
React48.useEffect(() => {
|
|
13238
|
-
if (
|
|
13238
|
+
if (isSearchOnlyInput) return;
|
|
13239
13239
|
if (!isFocused) setInputValue(valueLabel);
|
|
13240
|
-
}, [valueLabel, isFocused,
|
|
13240
|
+
}, [valueLabel, isFocused, isSearchOnlyInput]);
|
|
13241
13241
|
React48.useEffect(() => {
|
|
13242
|
-
if (!
|
|
13242
|
+
if (!isSearchOnlyInput) return;
|
|
13243
13243
|
if (!isOpen) {
|
|
13244
13244
|
setInputValue("");
|
|
13245
13245
|
setHighlightedIndex(-1);
|
|
13246
13246
|
}
|
|
13247
|
-
}, [isOpen,
|
|
13247
|
+
}, [isOpen, isSearchOnlyInput]);
|
|
13248
13248
|
const trimmedInput = inputValue.trim();
|
|
13249
|
-
const isFiltering =
|
|
13249
|
+
const isFiltering = isSearchOnlyInput ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase();
|
|
13250
13250
|
const filteredOptions = React48.useMemo(() => {
|
|
13251
13251
|
if (!isFiltering) return options;
|
|
13252
13252
|
return options.filter((option) => filterOption(option, trimmedInput));
|
|
@@ -13307,7 +13307,7 @@ function useSelectState(params) {
|
|
|
13307
13307
|
return;
|
|
13308
13308
|
}
|
|
13309
13309
|
onSelectionChange([option], { action: "select" });
|
|
13310
|
-
setInputValue(resolveValueLabel(option, getValueLabel));
|
|
13310
|
+
setInputValue(isSearchInDropdown ? "" : resolveValueLabel(option, getValueLabel));
|
|
13311
13311
|
setIsOpen(false);
|
|
13312
13312
|
setIsFocused(false);
|
|
13313
13313
|
inputRef.current?.blur();
|
|
@@ -13320,7 +13320,8 @@ function useSelectState(params) {
|
|
|
13320
13320
|
onSelectionChange,
|
|
13321
13321
|
closeMenuOnSelect,
|
|
13322
13322
|
setIsOpen,
|
|
13323
|
-
getValueLabel
|
|
13323
|
+
getValueLabel,
|
|
13324
|
+
isSearchInDropdown
|
|
13324
13325
|
]
|
|
13325
13326
|
);
|
|
13326
13327
|
const removeOption = React48.useCallback(
|
|
@@ -13355,7 +13356,7 @@ function useSelectState(params) {
|
|
|
13355
13356
|
return;
|
|
13356
13357
|
}
|
|
13357
13358
|
onSelectionChange([newOption], { action: "create" });
|
|
13358
|
-
setInputValue(resolveValueLabel(newOption, getValueLabel));
|
|
13359
|
+
setInputValue(isSearchInDropdown ? "" : resolveValueLabel(newOption, getValueLabel));
|
|
13359
13360
|
setIsOpen(false);
|
|
13360
13361
|
setIsFocused(false);
|
|
13361
13362
|
inputRef.current?.blur();
|
|
@@ -13368,7 +13369,8 @@ function useSelectState(params) {
|
|
|
13368
13369
|
selectedOptions,
|
|
13369
13370
|
closeMenuOnSelect,
|
|
13370
13371
|
setIsOpen,
|
|
13371
|
-
getValueLabel
|
|
13372
|
+
getValueLabel,
|
|
13373
|
+
isSearchInDropdown
|
|
13372
13374
|
]);
|
|
13373
13375
|
const handleInputChange = React48.useCallback(
|
|
13374
13376
|
(event) => {
|
|
@@ -13394,10 +13396,10 @@ function useSelectState(params) {
|
|
|
13394
13396
|
(event) => {
|
|
13395
13397
|
if (containerRef.current?.contains(event.relatedTarget)) return;
|
|
13396
13398
|
setIsFocused(false);
|
|
13397
|
-
if (!
|
|
13399
|
+
if (!isSearchOnlyInput) setInputValue(valueLabel);
|
|
13398
13400
|
onBlur?.(event);
|
|
13399
13401
|
},
|
|
13400
|
-
[containerRef,
|
|
13402
|
+
[containerRef, isSearchOnlyInput, valueLabel, onBlur]
|
|
13401
13403
|
);
|
|
13402
13404
|
const handleInputKeyDown = React48.useCallback(
|
|
13403
13405
|
(event) => {
|
|
@@ -13451,7 +13453,7 @@ function useSelectState(params) {
|
|
|
13451
13453
|
}
|
|
13452
13454
|
if (event.key === "Escape") {
|
|
13453
13455
|
event.preventDefault();
|
|
13454
|
-
if (!
|
|
13456
|
+
if (!isSearchOnlyInput) setInputValue(valueLabel);
|
|
13455
13457
|
setIsOpen(false);
|
|
13456
13458
|
inputRef.current?.blur();
|
|
13457
13459
|
}
|
|
@@ -13459,6 +13461,7 @@ function useSelectState(params) {
|
|
|
13459
13461
|
[
|
|
13460
13462
|
onKeyDown,
|
|
13461
13463
|
isMulti,
|
|
13464
|
+
isSearchOnlyInput,
|
|
13462
13465
|
inputValue,
|
|
13463
13466
|
selectedOptions,
|
|
13464
13467
|
onSelectionChange,
|
|
@@ -13796,6 +13799,21 @@ function mergeComponents(overrides) {
|
|
|
13796
13799
|
};
|
|
13797
13800
|
}
|
|
13798
13801
|
|
|
13802
|
+
// src/dashboard/select/useSetCorrectOptionIfThereIsOnlyValue.ts
|
|
13803
|
+
import { useEffect as useEffect39 } from "react";
|
|
13804
|
+
function useSetCorrectOptionIfThereIsOnlyValue({ value, options, onChange, enabled = true }) {
|
|
13805
|
+
useEffect39(() => {
|
|
13806
|
+
if (!enabled || !value || !onChange || !options?.length) return;
|
|
13807
|
+
if (value.value === void 0 || value.value === null) return;
|
|
13808
|
+
if (value.label !== "NONE" && value.label !== "") return;
|
|
13809
|
+
const validOption = flattenGroupedOptions(options).find(
|
|
13810
|
+
(option) => option.value === value.value
|
|
13811
|
+
);
|
|
13812
|
+
if (!validOption) return;
|
|
13813
|
+
onChange({ ...validOption, isPrefilled: true }, { action: "select" });
|
|
13814
|
+
}, [enabled, onChange, options, value]);
|
|
13815
|
+
}
|
|
13816
|
+
|
|
13799
13817
|
// src/dashboard/select/Select.tsx
|
|
13800
13818
|
import { jsx as jsx156, jsxs as jsxs99 } from "react/jsx-runtime";
|
|
13801
13819
|
function SelectInternal(props, ref) {
|
|
@@ -13856,6 +13874,12 @@ function SelectInternal(props, ref) {
|
|
|
13856
13874
|
return props.defaultValue ?? null;
|
|
13857
13875
|
});
|
|
13858
13876
|
const currentValue = isControlled ? props.value : internalValue;
|
|
13877
|
+
useSetCorrectOptionIfThereIsOnlyValue({
|
|
13878
|
+
enabled: !isMulti,
|
|
13879
|
+
value: !isMulti ? props.value : void 0,
|
|
13880
|
+
options,
|
|
13881
|
+
onChange: !isMulti ? props.onChange : void 0
|
|
13882
|
+
});
|
|
13859
13883
|
const selectedOptions = React49.useMemo(() => {
|
|
13860
13884
|
if (isMulti) return currentValue ?? [];
|
|
13861
13885
|
return currentValue ? [currentValue] : [];
|
|
@@ -14072,21 +14096,254 @@ function SelectInternal(props, ref) {
|
|
|
14072
14096
|
}
|
|
14073
14097
|
var Select = React49.forwardRef(SelectInternal);
|
|
14074
14098
|
|
|
14075
|
-
// src/dashboard/
|
|
14099
|
+
// src/dashboard/phone-input/utils.ts
|
|
14100
|
+
var PREFIX_REGEX = /^\+/;
|
|
14101
|
+
function clearPhoneNumber(value) {
|
|
14102
|
+
return value.replace(/[^0-9]/g, "");
|
|
14103
|
+
}
|
|
14104
|
+
function findPhoneCode(value, codeSet) {
|
|
14105
|
+
const hasPrefix = PREFIX_REGEX.test(value);
|
|
14106
|
+
const maxLength = hasPrefix ? 4 : 3;
|
|
14107
|
+
const minLength = hasPrefix ? 2 : 1;
|
|
14108
|
+
for (let length = minLength; length <= maxLength; length += 1) {
|
|
14109
|
+
const candidate = value.slice(0, length);
|
|
14110
|
+
const normalized = hasPrefix ? candidate : `+${candidate}`;
|
|
14111
|
+
if (codeSet.has(normalized)) {
|
|
14112
|
+
return normalized;
|
|
14113
|
+
}
|
|
14114
|
+
}
|
|
14115
|
+
return void 0;
|
|
14116
|
+
}
|
|
14117
|
+
function parsePhoneValueWithOptions(options) {
|
|
14118
|
+
const codeSet = new Set(options.map((option) => option.value));
|
|
14119
|
+
return (value) => {
|
|
14120
|
+
if (!PREFIX_REGEX.test(value)) {
|
|
14121
|
+
return { code: "", number: value };
|
|
14122
|
+
}
|
|
14123
|
+
const code = findPhoneCode(value, codeSet);
|
|
14124
|
+
if (!code) {
|
|
14125
|
+
return { code: "", number: value };
|
|
14126
|
+
}
|
|
14127
|
+
return {
|
|
14128
|
+
code,
|
|
14129
|
+
number: value.slice(code.length)
|
|
14130
|
+
};
|
|
14131
|
+
};
|
|
14132
|
+
}
|
|
14133
|
+
function findPhoneCodeOption(options, code) {
|
|
14134
|
+
return options.find((option) => option.value === code);
|
|
14135
|
+
}
|
|
14136
|
+
function formatPhoneCodeOptionLabel(option) {
|
|
14137
|
+
const label = String(option.label);
|
|
14138
|
+
const value = String(option.value);
|
|
14139
|
+
return label.includes(value) ? label : `${label} ${value}`;
|
|
14140
|
+
}
|
|
14141
|
+
|
|
14142
|
+
// src/dashboard/phone-input/PhoneInput.tsx
|
|
14143
|
+
import { jsx as jsx157, jsxs as jsxs100 } from "react/jsx-runtime";
|
|
14144
|
+
var EMPTY_VALUE = { code: "", number: "" };
|
|
14145
|
+
var PhoneInput = React50.forwardRef(
|
|
14146
|
+
function PhoneInput2({
|
|
14147
|
+
options,
|
|
14148
|
+
value,
|
|
14149
|
+
onChange,
|
|
14150
|
+
onBlur,
|
|
14151
|
+
name,
|
|
14152
|
+
codeName,
|
|
14153
|
+
numberName,
|
|
14154
|
+
label,
|
|
14155
|
+
topLabel,
|
|
14156
|
+
prefixLabel,
|
|
14157
|
+
placeholder,
|
|
14158
|
+
codePlaceholder = "+00",
|
|
14159
|
+
disabled,
|
|
14160
|
+
loading,
|
|
14161
|
+
readOnly,
|
|
14162
|
+
codeReadOnly,
|
|
14163
|
+
optional,
|
|
14164
|
+
tooltip,
|
|
14165
|
+
error,
|
|
14166
|
+
invalid,
|
|
14167
|
+
className,
|
|
14168
|
+
autoDetectCode = true,
|
|
14169
|
+
searchable = true,
|
|
14170
|
+
defaultCode
|
|
14171
|
+
}, ref) {
|
|
14172
|
+
const { t } = useTranslation34();
|
|
14173
|
+
const safeValue = value ?? EMPTY_VALUE;
|
|
14174
|
+
const effectiveCode = safeValue.code || defaultCode || "";
|
|
14175
|
+
const resolvedLabel = label ?? "";
|
|
14176
|
+
const resolvedPrefixLabel = prefixLabel ?? t("prefix");
|
|
14177
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
14178
|
+
const isCodeBlocked = isBlocked || Boolean(readOnly) || Boolean(codeReadOnly);
|
|
14179
|
+
const hasExternalError = Boolean(error);
|
|
14180
|
+
const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !effectiveCode;
|
|
14181
|
+
const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
|
|
14182
|
+
const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
|
|
14183
|
+
const combinedValue = effectiveCode || safeValue.number ? `${effectiveCode}${safeValue.number}` : "";
|
|
14184
|
+
const codeOptions = React50.useMemo(
|
|
14185
|
+
() => options.map((option) => ({
|
|
14186
|
+
value: option.value,
|
|
14187
|
+
label: formatPhoneCodeOptionLabel(option),
|
|
14188
|
+
data: option.data,
|
|
14189
|
+
isDisabled: option.disabled
|
|
14190
|
+
})),
|
|
14191
|
+
[options]
|
|
14192
|
+
);
|
|
14193
|
+
const selectedCodeOption = React50.useMemo(
|
|
14194
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
14195
|
+
[codeOptions, effectiveCode]
|
|
14196
|
+
);
|
|
14197
|
+
const parsePhoneValue = React50.useMemo(
|
|
14198
|
+
() => parsePhoneValueWithOptions(options),
|
|
14199
|
+
[options]
|
|
14200
|
+
);
|
|
14201
|
+
const emitChange = (next) => {
|
|
14202
|
+
onChange?.(next, name);
|
|
14203
|
+
};
|
|
14204
|
+
const handleCodeChange = (option) => {
|
|
14205
|
+
if (!option) return;
|
|
14206
|
+
emitChange({ code: option.value, number: safeValue.number });
|
|
14207
|
+
};
|
|
14208
|
+
const handleNumberChange = (event) => {
|
|
14209
|
+
if (readOnly || disabled) return;
|
|
14210
|
+
const rawValue = event.target.value;
|
|
14211
|
+
if (!autoDetectCode) {
|
|
14212
|
+
emitChange({ code: effectiveCode, number: clearPhoneNumber(rawValue) });
|
|
14213
|
+
return;
|
|
14214
|
+
}
|
|
14215
|
+
const parsed = parsePhoneValue(rawValue);
|
|
14216
|
+
const cleanedNumber = clearPhoneNumber(parsed.number);
|
|
14217
|
+
if (parsed.code) {
|
|
14218
|
+
emitChange({ code: parsed.code, number: cleanedNumber });
|
|
14219
|
+
return;
|
|
14220
|
+
}
|
|
14221
|
+
emitChange({ code: effectiveCode, number: cleanedNumber });
|
|
14222
|
+
};
|
|
14223
|
+
return /* @__PURE__ */ jsxs100(
|
|
14224
|
+
"div",
|
|
14225
|
+
{
|
|
14226
|
+
className: cn(
|
|
14227
|
+
"relative w-full max-w-[var(--field-max-width,296px)]",
|
|
14228
|
+
disabled && "cursor-not-allowed opacity-50",
|
|
14229
|
+
loading && "cursor-progress",
|
|
14230
|
+
className
|
|
14231
|
+
),
|
|
14232
|
+
children: [
|
|
14233
|
+
name && /* @__PURE__ */ jsx157("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
14234
|
+
codeName && /* @__PURE__ */ jsx157(
|
|
14235
|
+
"input",
|
|
14236
|
+
{
|
|
14237
|
+
type: "hidden",
|
|
14238
|
+
name: codeName,
|
|
14239
|
+
value: effectiveCode,
|
|
14240
|
+
disabled
|
|
14241
|
+
}
|
|
14242
|
+
),
|
|
14243
|
+
numberName && /* @__PURE__ */ jsx157(
|
|
14244
|
+
"input",
|
|
14245
|
+
{
|
|
14246
|
+
type: "hidden",
|
|
14247
|
+
name: numberName,
|
|
14248
|
+
value: safeValue.number,
|
|
14249
|
+
disabled
|
|
14250
|
+
}
|
|
14251
|
+
),
|
|
14252
|
+
topLabel && /* @__PURE__ */ jsx157("label", { className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: topLabel }),
|
|
14253
|
+
/* @__PURE__ */ jsxs100("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2", children: [
|
|
14254
|
+
/* @__PURE__ */ jsx157(
|
|
14255
|
+
Select,
|
|
14256
|
+
{
|
|
14257
|
+
options: codeOptions,
|
|
14258
|
+
value: selectedCodeOption,
|
|
14259
|
+
onChange: handleCodeChange,
|
|
14260
|
+
label: resolvedPrefixLabel,
|
|
14261
|
+
placeholder: codePlaceholder,
|
|
14262
|
+
disabled: isCodeBlocked,
|
|
14263
|
+
loading,
|
|
14264
|
+
invalid: hasInvalidState,
|
|
14265
|
+
hideErrorMessage: true,
|
|
14266
|
+
searchPosition: searchable ? "dropdown" : "trigger",
|
|
14267
|
+
getValueLabel: (option) => option.value,
|
|
14268
|
+
className: "!max-w-none",
|
|
14269
|
+
dropdownClassName: "right-auto w-[280px]"
|
|
14270
|
+
}
|
|
14271
|
+
),
|
|
14272
|
+
/* @__PURE__ */ jsx157(
|
|
14273
|
+
Input,
|
|
14274
|
+
{
|
|
14275
|
+
ref,
|
|
14276
|
+
type: "tel",
|
|
14277
|
+
inputMode: "tel",
|
|
14278
|
+
autoComplete: "tel-national",
|
|
14279
|
+
label: resolvedLabel,
|
|
14280
|
+
value: safeValue.number,
|
|
14281
|
+
placeholder,
|
|
14282
|
+
disabled,
|
|
14283
|
+
readOnly,
|
|
14284
|
+
loading,
|
|
14285
|
+
invalid: hasInvalidState,
|
|
14286
|
+
tooltip,
|
|
14287
|
+
"aria-label": resolvedLabel || name,
|
|
14288
|
+
onChange: handleNumberChange,
|
|
14289
|
+
onBlur,
|
|
14290
|
+
renderErrorMessage: false,
|
|
14291
|
+
wrapperClassName: "!max-w-none"
|
|
14292
|
+
}
|
|
14293
|
+
)
|
|
14294
|
+
] }),
|
|
14295
|
+
!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") }),
|
|
14296
|
+
errorMessage && /* @__PURE__ */ jsx157(
|
|
14297
|
+
FieldErrorMessage,
|
|
14298
|
+
{
|
|
14299
|
+
message: errorMessage,
|
|
14300
|
+
"data-testid": name ? `${name}-error` : void 0,
|
|
14301
|
+
className: "mt-[1px] text-[14px]"
|
|
14302
|
+
}
|
|
14303
|
+
)
|
|
14304
|
+
]
|
|
14305
|
+
}
|
|
14306
|
+
);
|
|
14307
|
+
}
|
|
14308
|
+
);
|
|
14309
|
+
PhoneInput.displayName = "PhoneInput";
|
|
14310
|
+
|
|
14311
|
+
// src/dashboard/creatable-select/CreatableSelect.tsx
|
|
14312
|
+
import * as React51 from "react";
|
|
14313
|
+
import { jsx as jsx158 } from "react/jsx-runtime";
|
|
14314
|
+
var CreatableSelect = React51.forwardRef(function CreatableSelect2(props, ref) {
|
|
14315
|
+
return /* @__PURE__ */ jsx158(Select, { ref, ...props, isCreatable: true });
|
|
14316
|
+
});
|
|
14317
|
+
|
|
14318
|
+
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14076
14319
|
import * as React52 from "react";
|
|
14320
|
+
import { jsx as jsx159 } from "react/jsx-runtime";
|
|
14321
|
+
var MultiSelect = React52.forwardRef(function MultiSelect2(props, ref) {
|
|
14322
|
+
return /* @__PURE__ */ jsx159(Select, { ref, ...props, isMulti: true });
|
|
14323
|
+
});
|
|
14324
|
+
|
|
14325
|
+
// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
|
|
14326
|
+
import * as React53 from "react";
|
|
14327
|
+
import { jsx as jsx160 } from "react/jsx-runtime";
|
|
14328
|
+
var CreatableMultiSelect = React53.forwardRef(function CreatableMultiSelect2(props, ref) {
|
|
14329
|
+
return /* @__PURE__ */ jsx160(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
14330
|
+
});
|
|
14331
|
+
|
|
14332
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14333
|
+
import * as React56 from "react";
|
|
14077
14334
|
|
|
14078
14335
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14079
|
-
import * as
|
|
14080
|
-
import { useTranslation as
|
|
14336
|
+
import * as React55 from "react";
|
|
14337
|
+
import { useTranslation as useTranslation35 } from "react-i18next";
|
|
14081
14338
|
import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
|
|
14082
14339
|
|
|
14083
14340
|
// src/dashboard/infinite-scroll-select/InfiniteScrollContext.tsx
|
|
14084
|
-
import * as
|
|
14085
|
-
var InfiniteScrollContext =
|
|
14341
|
+
import * as React54 from "react";
|
|
14342
|
+
var InfiniteScrollContext = React54.createContext(
|
|
14086
14343
|
null
|
|
14087
14344
|
);
|
|
14088
14345
|
function useInfiniteScrollContext() {
|
|
14089
|
-
const ctx =
|
|
14346
|
+
const ctx = React54.useContext(InfiniteScrollContext);
|
|
14090
14347
|
if (!ctx) {
|
|
14091
14348
|
throw new Error(
|
|
14092
14349
|
"useInfiniteScrollContext must be used within an InfiniteScrollContext.Provider"
|
|
@@ -14096,7 +14353,7 @@ function useInfiniteScrollContext() {
|
|
|
14096
14353
|
}
|
|
14097
14354
|
|
|
14098
14355
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14099
|
-
import { jsx as
|
|
14356
|
+
import { jsx as jsx161, jsxs as jsxs101 } from "react/jsx-runtime";
|
|
14100
14357
|
function VirtualMenuList(props) {
|
|
14101
14358
|
const {
|
|
14102
14359
|
id,
|
|
@@ -14130,10 +14387,10 @@ function VirtualMenuList(props) {
|
|
|
14130
14387
|
loadMoreThreshold
|
|
14131
14388
|
} = useInfiniteScrollContext();
|
|
14132
14389
|
const Option = components?.Option ?? DefaultOption;
|
|
14133
|
-
const { t } =
|
|
14134
|
-
const scrollRef =
|
|
14135
|
-
const lastLoadMoreOptionsLengthRef =
|
|
14136
|
-
const previousHighlightedIndexRef =
|
|
14390
|
+
const { t } = useTranslation35();
|
|
14391
|
+
const scrollRef = React55.useRef(null);
|
|
14392
|
+
const lastLoadMoreOptionsLengthRef = React55.useRef(null);
|
|
14393
|
+
const previousHighlightedIndexRef = React55.useRef(-1);
|
|
14137
14394
|
const showLoaderRow = Boolean(canLoadMore || isLoadingMore);
|
|
14138
14395
|
const itemCount = options.length + (showLoaderRow ? 1 : 0);
|
|
14139
14396
|
const virtualizer = useVirtualizer2({
|
|
@@ -14146,7 +14403,7 @@ function VirtualMenuList(props) {
|
|
|
14146
14403
|
const totalSize = virtualizer.getTotalSize();
|
|
14147
14404
|
const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
|
|
14148
14405
|
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14149
|
-
|
|
14406
|
+
React55.useEffect(() => {
|
|
14150
14407
|
if (!canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14151
14408
|
if (virtualItems.length === 0) return;
|
|
14152
14409
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
@@ -14162,7 +14419,7 @@ function VirtualMenuList(props) {
|
|
|
14162
14419
|
loadMoreItems,
|
|
14163
14420
|
loadMoreThreshold
|
|
14164
14421
|
]);
|
|
14165
|
-
|
|
14422
|
+
React55.useEffect(() => {
|
|
14166
14423
|
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14167
14424
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14168
14425
|
if (highlightedIndex < 0 || !changed) return;
|
|
@@ -14172,8 +14429,8 @@ function VirtualMenuList(props) {
|
|
|
14172
14429
|
const lastOptionIndex = options.length - 1;
|
|
14173
14430
|
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14174
14431
|
const isOptionSelected2 = (option) => isOptionSelectedProp ? isOptionSelectedProp(option, selectedOptions) : selectedOptions.some((s) => s.value === option.value);
|
|
14175
|
-
const wasAtBottomRef =
|
|
14176
|
-
const handleScroll =
|
|
14432
|
+
const wasAtBottomRef = React55.useRef(false);
|
|
14433
|
+
const handleScroll = React55.useCallback(
|
|
14177
14434
|
(event) => {
|
|
14178
14435
|
if (!onMenuScrollToBottom) return;
|
|
14179
14436
|
const target = event.currentTarget;
|
|
@@ -14186,7 +14443,7 @@ function VirtualMenuList(props) {
|
|
|
14186
14443
|
[onMenuScrollToBottom]
|
|
14187
14444
|
);
|
|
14188
14445
|
if (options.length === 0) {
|
|
14189
|
-
return /* @__PURE__ */
|
|
14446
|
+
return /* @__PURE__ */ jsx161("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ jsxs101(
|
|
14190
14447
|
"div",
|
|
14191
14448
|
{
|
|
14192
14449
|
role: "status",
|
|
@@ -14194,8 +14451,8 @@ function VirtualMenuList(props) {
|
|
|
14194
14451
|
"aria-live": "polite",
|
|
14195
14452
|
className: "flex flex-col gap-2",
|
|
14196
14453
|
children: [
|
|
14197
|
-
/* @__PURE__ */
|
|
14198
|
-
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */
|
|
14454
|
+
/* @__PURE__ */ jsx161("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14455
|
+
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx161(
|
|
14199
14456
|
Skeleton,
|
|
14200
14457
|
{
|
|
14201
14458
|
className: "h-10 w-full rounded-md",
|
|
@@ -14205,16 +14462,16 @@ function VirtualMenuList(props) {
|
|
|
14205
14462
|
))
|
|
14206
14463
|
]
|
|
14207
14464
|
}
|
|
14208
|
-
) : /* @__PURE__ */
|
|
14465
|
+
) : /* @__PURE__ */ jsx161("div", { className: "flex min-h-[40px] items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]", children: emptyMessage }) });
|
|
14209
14466
|
}
|
|
14210
|
-
return /* @__PURE__ */
|
|
14467
|
+
return /* @__PURE__ */ jsx161("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: /* @__PURE__ */ jsx161(
|
|
14211
14468
|
"div",
|
|
14212
14469
|
{
|
|
14213
14470
|
ref: scrollRef,
|
|
14214
14471
|
className: cn("overflow-y-auto", menuClassName),
|
|
14215
14472
|
style: { height: `${measuredListHeight}px` },
|
|
14216
14473
|
onScroll: onMenuScrollToBottom ? handleScroll : void 0,
|
|
14217
|
-
children: /* @__PURE__ */
|
|
14474
|
+
children: /* @__PURE__ */ jsx161(
|
|
14218
14475
|
"div",
|
|
14219
14476
|
{
|
|
14220
14477
|
id,
|
|
@@ -14234,7 +14491,7 @@ function VirtualMenuList(props) {
|
|
|
14234
14491
|
disabled || option?.isDisabled || option && isOptionDisabled?.(option)
|
|
14235
14492
|
);
|
|
14236
14493
|
const isLastOption = !isLoaderRow && virtualItem.index === lastOptionIndex && !canLoadMore;
|
|
14237
|
-
return /* @__PURE__ */
|
|
14494
|
+
return /* @__PURE__ */ jsx161(
|
|
14238
14495
|
"div",
|
|
14239
14496
|
{
|
|
14240
14497
|
"data-index": virtualItem.index,
|
|
@@ -14243,7 +14500,7 @@ function VirtualMenuList(props) {
|
|
|
14243
14500
|
height: `${virtualItem.size}px`,
|
|
14244
14501
|
transform: `translateY(${virtualItem.start}px)`
|
|
14245
14502
|
},
|
|
14246
|
-
children: isLoaderRow ? /* @__PURE__ */
|
|
14503
|
+
children: isLoaderRow ? /* @__PURE__ */ jsxs101(
|
|
14247
14504
|
"div",
|
|
14248
14505
|
{
|
|
14249
14506
|
role: "status",
|
|
@@ -14251,8 +14508,8 @@ function VirtualMenuList(props) {
|
|
|
14251
14508
|
"aria-live": "polite",
|
|
14252
14509
|
className: "flex h-full items-center justify-center",
|
|
14253
14510
|
children: [
|
|
14254
|
-
/* @__PURE__ */
|
|
14255
|
-
/* @__PURE__ */
|
|
14511
|
+
/* @__PURE__ */ jsx161("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14512
|
+
/* @__PURE__ */ jsx161(
|
|
14256
14513
|
ThreeDotsLoader,
|
|
14257
14514
|
{
|
|
14258
14515
|
height: 24,
|
|
@@ -14262,7 +14519,7 @@ function VirtualMenuList(props) {
|
|
|
14262
14519
|
)
|
|
14263
14520
|
]
|
|
14264
14521
|
}
|
|
14265
|
-
) : option ? /* @__PURE__ */
|
|
14522
|
+
) : option ? /* @__PURE__ */ jsx161(
|
|
14266
14523
|
Option,
|
|
14267
14524
|
{
|
|
14268
14525
|
id: getOptionId2(virtualItem.index),
|
|
@@ -14292,7 +14549,7 @@ function VirtualMenuList(props) {
|
|
|
14292
14549
|
}
|
|
14293
14550
|
|
|
14294
14551
|
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14295
|
-
import { jsx as
|
|
14552
|
+
import { jsx as jsx162 } from "react/jsx-runtime";
|
|
14296
14553
|
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14297
14554
|
var DEFAULT_LIST_HEIGHT = 322;
|
|
14298
14555
|
var DEFAULT_OVERSCAN = 5;
|
|
@@ -14319,8 +14576,8 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14319
14576
|
} = props;
|
|
14320
14577
|
const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
|
|
14321
14578
|
const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
|
|
14322
|
-
const [inputValue, setInputValue] =
|
|
14323
|
-
const filteredOptions =
|
|
14579
|
+
const [inputValue, setInputValue] = React56.useState("");
|
|
14580
|
+
const filteredOptions = React56.useMemo(() => {
|
|
14324
14581
|
const trimmed = inputValue.trim();
|
|
14325
14582
|
const valueLabel = (() => {
|
|
14326
14583
|
if (isMulti) return "";
|
|
@@ -14339,7 +14596,7 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14339
14596
|
}
|
|
14340
14597
|
return list;
|
|
14341
14598
|
}, [rawOptions, inputValue, filterOption, getFullSearchOption, isMulti, rest]);
|
|
14342
|
-
const contextValue =
|
|
14599
|
+
const contextValue = React56.useMemo(
|
|
14343
14600
|
() => ({
|
|
14344
14601
|
canLoadMore,
|
|
14345
14602
|
isLoadingMore,
|
|
@@ -14361,11 +14618,11 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14361
14618
|
loadMoreThreshold
|
|
14362
14619
|
]
|
|
14363
14620
|
);
|
|
14364
|
-
const components =
|
|
14621
|
+
const components = React56.useMemo(
|
|
14365
14622
|
() => ({ ...userComponents, MenuList: VirtualMenuList }),
|
|
14366
14623
|
[userComponents]
|
|
14367
14624
|
);
|
|
14368
|
-
const handleInputChange =
|
|
14625
|
+
const handleInputChange = React56.useCallback(
|
|
14369
14626
|
(value) => {
|
|
14370
14627
|
setInputValue(value);
|
|
14371
14628
|
onSearchChange?.(value);
|
|
@@ -14379,321 +14636,42 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14379
14636
|
components,
|
|
14380
14637
|
onInputChange: handleInputChange
|
|
14381
14638
|
};
|
|
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 };
|
|
14639
|
+
return /* @__PURE__ */ jsx162(InfiniteScrollContext.Provider, { value: contextValue, children: isMulti ? /* @__PURE__ */ jsx162(
|
|
14640
|
+
Select,
|
|
14641
|
+
{
|
|
14642
|
+
ref,
|
|
14643
|
+
...rest,
|
|
14644
|
+
...selectExtras,
|
|
14645
|
+
isMulti: true
|
|
14475
14646
|
}
|
|
14476
|
-
|
|
14477
|
-
|
|
14478
|
-
|
|
14647
|
+
) : /* @__PURE__ */ jsx162(
|
|
14648
|
+
Select,
|
|
14649
|
+
{
|
|
14650
|
+
ref,
|
|
14651
|
+
...rest,
|
|
14652
|
+
...selectExtras,
|
|
14653
|
+
isMulti: false
|
|
14479
14654
|
}
|
|
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}`;
|
|
14655
|
+
) });
|
|
14493
14656
|
}
|
|
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
|
-
}
|
|
14657
|
+
var InfiniteScrollSelect = React56.forwardRef(
|
|
14658
|
+
InfiniteScrollSelectInternal
|
|
14659
14659
|
);
|
|
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
14660
|
|
|
14676
|
-
// src/dashboard/
|
|
14661
|
+
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
14677
14662
|
import * as React57 from "react";
|
|
14678
14663
|
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) {
|
|
14664
|
+
var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
14687
14665
|
const Forwarded = InfiniteScrollSelect;
|
|
14688
|
-
return /* @__PURE__ */
|
|
14666
|
+
return /* @__PURE__ */ jsx163(Forwarded, { ...props, ref, isMulti: true });
|
|
14689
14667
|
});
|
|
14690
14668
|
|
|
14691
14669
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14692
|
-
import * as
|
|
14670
|
+
import * as React58 from "react";
|
|
14693
14671
|
import { useTranslation as useTranslation37 } from "react-i18next";
|
|
14694
14672
|
|
|
14695
14673
|
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
14696
|
-
import { jsx as
|
|
14674
|
+
import { jsx as jsx164, jsxs as jsxs102 } from "react/jsx-runtime";
|
|
14697
14675
|
function SelectCheckboxOption(props) {
|
|
14698
14676
|
const {
|
|
14699
14677
|
option,
|
|
@@ -14727,7 +14705,7 @@ function SelectCheckboxOption(props) {
|
|
|
14727
14705
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
14728
14706
|
),
|
|
14729
14707
|
children: [
|
|
14730
|
-
/* @__PURE__ */
|
|
14708
|
+
/* @__PURE__ */ jsx164(
|
|
14731
14709
|
BaseCheckbox,
|
|
14732
14710
|
{
|
|
14733
14711
|
checked: isSelected,
|
|
@@ -14738,8 +14716,8 @@ function SelectCheckboxOption(props) {
|
|
|
14738
14716
|
}
|
|
14739
14717
|
),
|
|
14740
14718
|
/* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
14741
|
-
/* @__PURE__ */
|
|
14742
|
-
option.description && /* @__PURE__ */
|
|
14719
|
+
/* @__PURE__ */ jsx164("span", { className: "block break-words", children: option.label }),
|
|
14720
|
+
option.description && /* @__PURE__ */ jsx164("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
14743
14721
|
] })
|
|
14744
14722
|
]
|
|
14745
14723
|
}
|
|
@@ -14749,7 +14727,7 @@ function SelectCheckboxOption(props) {
|
|
|
14749
14727
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
14750
14728
|
import { ChevronDown as ChevronDown3 } from "lucide-react";
|
|
14751
14729
|
import { useTranslation as useTranslation36 } from "react-i18next";
|
|
14752
|
-
import { jsx as
|
|
14730
|
+
import { jsx as jsx165, jsxs as jsxs103 } from "react/jsx-runtime";
|
|
14753
14731
|
function createCountTrigger(opts) {
|
|
14754
14732
|
const { valueText, totalCount } = opts;
|
|
14755
14733
|
function CountTrigger(props) {
|
|
@@ -14798,9 +14776,9 @@ function createCountTrigger(opts) {
|
|
|
14798
14776
|
loading && "!cursor-progress"
|
|
14799
14777
|
),
|
|
14800
14778
|
children: [
|
|
14801
|
-
leftIcon && /* @__PURE__ */
|
|
14802
|
-
/* @__PURE__ */
|
|
14803
|
-
/* @__PURE__ */
|
|
14779
|
+
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 }) }),
|
|
14780
|
+
/* @__PURE__ */ jsx165("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
14781
|
+
/* @__PURE__ */ jsx165("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx165(
|
|
14804
14782
|
ChevronDown3,
|
|
14805
14783
|
{
|
|
14806
14784
|
size: 16,
|
|
@@ -14818,7 +14796,7 @@ function createCountTrigger(opts) {
|
|
|
14818
14796
|
}
|
|
14819
14797
|
|
|
14820
14798
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
14821
|
-
import { jsx as
|
|
14799
|
+
import { jsx as jsx166, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
14822
14800
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
14823
14801
|
return /* @__PURE__ */ jsxs104(
|
|
14824
14802
|
"button",
|
|
@@ -14831,7 +14809,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14831
14809
|
disabled && "cursor-default opacity-40"
|
|
14832
14810
|
),
|
|
14833
14811
|
children: [
|
|
14834
|
-
/* @__PURE__ */
|
|
14812
|
+
/* @__PURE__ */ jsx166(
|
|
14835
14813
|
BaseCheckbox,
|
|
14836
14814
|
{
|
|
14837
14815
|
checked,
|
|
@@ -14841,20 +14819,20 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14841
14819
|
className: "pointer-events-none shrink-0"
|
|
14842
14820
|
}
|
|
14843
14821
|
),
|
|
14844
|
-
/* @__PURE__ */
|
|
14822
|
+
/* @__PURE__ */ jsx166("span", { className: "flex-1", children: label })
|
|
14845
14823
|
]
|
|
14846
14824
|
}
|
|
14847
14825
|
);
|
|
14848
14826
|
}
|
|
14849
14827
|
|
|
14850
14828
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14851
|
-
import { Fragment as
|
|
14852
|
-
function
|
|
14829
|
+
import { Fragment as Fragment16, jsx as jsx167 } from "react/jsx-runtime";
|
|
14830
|
+
function hasPaginationProps(props) {
|
|
14853
14831
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
|
|
14854
14832
|
}
|
|
14855
|
-
function
|
|
14833
|
+
function makeTriggerSlot(render) {
|
|
14856
14834
|
function CustomTrigger(props) {
|
|
14857
|
-
return /* @__PURE__ */
|
|
14835
|
+
return /* @__PURE__ */ jsx167(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
|
|
14858
14836
|
}
|
|
14859
14837
|
return CustomTrigger;
|
|
14860
14838
|
}
|
|
@@ -14877,28 +14855,28 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14877
14855
|
...paginationAndRest
|
|
14878
14856
|
} = props;
|
|
14879
14857
|
const { t } = useTranslation37();
|
|
14880
|
-
const isPaginated =
|
|
14858
|
+
const isPaginated = hasPaginationProps(
|
|
14881
14859
|
paginationAndRest
|
|
14882
14860
|
);
|
|
14883
|
-
const [inputValue, setInputValue] =
|
|
14861
|
+
const [inputValue, setInputValue] = React58.useState("");
|
|
14884
14862
|
const isControlled = value !== void 0;
|
|
14885
|
-
const [internalValue, setInternalValue] =
|
|
14863
|
+
const [internalValue, setInternalValue] = React58.useState(
|
|
14886
14864
|
() => defaultValue ?? []
|
|
14887
14865
|
);
|
|
14888
14866
|
const currentValue = isControlled ? value : internalValue;
|
|
14889
|
-
const selected =
|
|
14890
|
-
const handleChange =
|
|
14867
|
+
const selected = React58.useMemo(() => currentValue ?? [], [currentValue]);
|
|
14868
|
+
const handleChange = React58.useCallback(
|
|
14891
14869
|
(next, meta) => {
|
|
14892
14870
|
if (!isControlled) setInternalValue(next);
|
|
14893
14871
|
onChange?.(next, meta);
|
|
14894
14872
|
},
|
|
14895
14873
|
[isControlled, onChange]
|
|
14896
14874
|
);
|
|
14897
|
-
const flatRawOptions =
|
|
14875
|
+
const flatRawOptions = React58.useMemo(
|
|
14898
14876
|
() => flattenGroupedOptions(rawOptions),
|
|
14899
14877
|
[rawOptions]
|
|
14900
14878
|
);
|
|
14901
|
-
const filteredGrouped =
|
|
14879
|
+
const filteredGrouped = React58.useMemo(() => {
|
|
14902
14880
|
const trimmed = inputValue.trim();
|
|
14903
14881
|
if (!trimmed) return rawOptions;
|
|
14904
14882
|
return rawOptions.map((item) => {
|
|
@@ -14909,7 +14887,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14909
14887
|
return filterOption(item, trimmed) ? item : null;
|
|
14910
14888
|
}).filter((item) => item !== null);
|
|
14911
14889
|
}, [rawOptions, inputValue, filterOption]);
|
|
14912
|
-
const filteredFlat =
|
|
14890
|
+
const filteredFlat = React58.useMemo(
|
|
14913
14891
|
() => flattenGroupedOptions(filteredGrouped),
|
|
14914
14892
|
[filteredGrouped]
|
|
14915
14893
|
);
|
|
@@ -14917,7 +14895,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14917
14895
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
14918
14896
|
}, 0);
|
|
14919
14897
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
14920
|
-
const handleToggleAll =
|
|
14898
|
+
const handleToggleAll = React58.useCallback(() => {
|
|
14921
14899
|
if (allVisibleSelected) {
|
|
14922
14900
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
14923
14901
|
handleChange(
|
|
@@ -14932,14 +14910,14 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14932
14910
|
}
|
|
14933
14911
|
handleChange(merged, { action: "select" });
|
|
14934
14912
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
14935
|
-
const Control =
|
|
14936
|
-
if (trigger) return
|
|
14913
|
+
const Control = React58.useMemo(() => {
|
|
14914
|
+
if (trigger) return makeTriggerSlot(trigger);
|
|
14937
14915
|
return createCountTrigger({
|
|
14938
14916
|
valueText,
|
|
14939
14917
|
totalCount: flatRawOptions.length
|
|
14940
14918
|
});
|
|
14941
14919
|
}, [trigger, valueText, flatRawOptions.length]);
|
|
14942
|
-
const components =
|
|
14920
|
+
const components = React58.useMemo(
|
|
14943
14921
|
() => ({
|
|
14944
14922
|
...userComponents,
|
|
14945
14923
|
Control,
|
|
@@ -14947,7 +14925,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14947
14925
|
}),
|
|
14948
14926
|
[userComponents, Control]
|
|
14949
14927
|
);
|
|
14950
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */
|
|
14928
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ jsx167(
|
|
14951
14929
|
SelectAllRow,
|
|
14952
14930
|
{
|
|
14953
14931
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -14955,7 +14933,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14955
14933
|
onToggle: handleToggleAll
|
|
14956
14934
|
}
|
|
14957
14935
|
) : void 0;
|
|
14958
|
-
const handleInputChange =
|
|
14936
|
+
const handleInputChange = React58.useCallback(
|
|
14959
14937
|
(next) => {
|
|
14960
14938
|
setInputValue(next);
|
|
14961
14939
|
onSearchChange?.(next);
|
|
@@ -14975,7 +14953,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14975
14953
|
isMulti: true
|
|
14976
14954
|
};
|
|
14977
14955
|
if (isPaginated) {
|
|
14978
|
-
return /* @__PURE__ */
|
|
14956
|
+
return /* @__PURE__ */ jsx167(
|
|
14979
14957
|
InfiniteScrollSelect,
|
|
14980
14958
|
{
|
|
14981
14959
|
ref,
|
|
@@ -14986,7 +14964,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14986
14964
|
}
|
|
14987
14965
|
);
|
|
14988
14966
|
}
|
|
14989
|
-
return /* @__PURE__ */
|
|
14967
|
+
return /* @__PURE__ */ jsx167(
|
|
14990
14968
|
Select,
|
|
14991
14969
|
{
|
|
14992
14970
|
ref,
|
|
@@ -14997,16 +14975,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14997
14975
|
}
|
|
14998
14976
|
);
|
|
14999
14977
|
}
|
|
15000
|
-
var SelectCheckboxes =
|
|
14978
|
+
var SelectCheckboxes = React58.forwardRef(
|
|
15001
14979
|
SelectCheckboxesInternal
|
|
15002
14980
|
);
|
|
15003
14981
|
|
|
15004
14982
|
// src/dashboard/textarea/Textarea.tsx
|
|
15005
|
-
import * as
|
|
14983
|
+
import * as React60 from "react";
|
|
15006
14984
|
import { useTranslation as useTranslation38 } from "react-i18next";
|
|
15007
14985
|
|
|
15008
14986
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15009
|
-
import * as
|
|
14987
|
+
import * as React59 from "react";
|
|
15010
14988
|
var isEmptyValue2 = (value) => {
|
|
15011
14989
|
if (value === void 0 || value === null) return true;
|
|
15012
14990
|
return String(value).length === 0;
|
|
@@ -15025,12 +15003,12 @@ function useTextareaValueState({
|
|
|
15025
15003
|
value,
|
|
15026
15004
|
defaultValue
|
|
15027
15005
|
}) {
|
|
15028
|
-
const textareaRef =
|
|
15006
|
+
const textareaRef = React59.useRef(null);
|
|
15029
15007
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15030
15008
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15031
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15009
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React59.useState(propsAreEmpty);
|
|
15032
15010
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15033
|
-
const setNativeValue =
|
|
15011
|
+
const setNativeValue = React59.useCallback(
|
|
15034
15012
|
(nextValue) => {
|
|
15035
15013
|
if (isControlled) return;
|
|
15036
15014
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15040,14 +15018,14 @@ function useTextareaValueState({
|
|
|
15040
15018
|
},
|
|
15041
15019
|
[isControlled]
|
|
15042
15020
|
);
|
|
15043
|
-
const syncValueState =
|
|
15021
|
+
const syncValueState = React59.useCallback(() => {
|
|
15044
15022
|
if (!textareaRef.current) return;
|
|
15045
15023
|
setNativeValue(textareaRef.current.value);
|
|
15046
15024
|
}, [setNativeValue]);
|
|
15047
|
-
|
|
15025
|
+
React59.useLayoutEffect(() => {
|
|
15048
15026
|
syncValueState();
|
|
15049
15027
|
});
|
|
15050
|
-
|
|
15028
|
+
React59.useEffect(() => {
|
|
15051
15029
|
const textarea = textareaRef.current;
|
|
15052
15030
|
const form = textarea?.form;
|
|
15053
15031
|
if (isControlled || !form) return;
|
|
@@ -15071,10 +15049,10 @@ function useTextareaValueState({
|
|
|
15071
15049
|
}
|
|
15072
15050
|
|
|
15073
15051
|
// src/dashboard/textarea/Textarea.tsx
|
|
15074
|
-
import { jsx as
|
|
15052
|
+
import { jsx as jsx168, jsxs as jsxs105 } from "react/jsx-runtime";
|
|
15075
15053
|
var LINE_HEIGHT = 20;
|
|
15076
15054
|
var VERTICAL_PADDING = 32;
|
|
15077
|
-
var Textarea =
|
|
15055
|
+
var Textarea = React60.forwardRef(function Textarea2({
|
|
15078
15056
|
className,
|
|
15079
15057
|
textareaClassName,
|
|
15080
15058
|
label,
|
|
@@ -15102,12 +15080,12 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15102
15080
|
}, ref) {
|
|
15103
15081
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15104
15082
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15105
|
-
const reactId =
|
|
15083
|
+
const reactId = React60.useId();
|
|
15106
15084
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15107
15085
|
const { t } = useTranslation38();
|
|
15108
15086
|
const isInvalid = Boolean(invalid || error);
|
|
15109
15087
|
const isBlocked = Boolean(disabled);
|
|
15110
|
-
const resize =
|
|
15088
|
+
const resize = React60.useCallback(() => {
|
|
15111
15089
|
const el = textareaRef.current;
|
|
15112
15090
|
if (!el || !autosize) return;
|
|
15113
15091
|
el.style.height = "auto";
|
|
@@ -15117,7 +15095,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15117
15095
|
el.style.height = `${nextHeight}px`;
|
|
15118
15096
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15119
15097
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15120
|
-
|
|
15098
|
+
React60.useLayoutEffect(() => {
|
|
15121
15099
|
resize();
|
|
15122
15100
|
}, [resize, value]);
|
|
15123
15101
|
const handleInput = (event) => {
|
|
@@ -15157,11 +15135,11 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15157
15135
|
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15158
15136
|
children: [
|
|
15159
15137
|
label,
|
|
15160
|
-
tooltip && /* @__PURE__ */
|
|
15138
|
+
tooltip && /* @__PURE__ */ jsx168("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx168(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15161
15139
|
]
|
|
15162
15140
|
}
|
|
15163
15141
|
),
|
|
15164
|
-
/* @__PURE__ */
|
|
15142
|
+
/* @__PURE__ */ jsx168(
|
|
15165
15143
|
"textarea",
|
|
15166
15144
|
{
|
|
15167
15145
|
ref: combinedRef,
|
|
@@ -15193,7 +15171,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15193
15171
|
...textareaProps
|
|
15194
15172
|
}
|
|
15195
15173
|
),
|
|
15196
|
-
error && /* @__PURE__ */
|
|
15174
|
+
error && /* @__PURE__ */ jsx168(
|
|
15197
15175
|
FieldErrorMessage,
|
|
15198
15176
|
{
|
|
15199
15177
|
id: `${textareaId}-error`,
|
|
@@ -15201,20 +15179,20 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15201
15179
|
className: "mt-[1px] text-[14px]"
|
|
15202
15180
|
}
|
|
15203
15181
|
),
|
|
15204
|
-
!error && optional && /* @__PURE__ */
|
|
15205
|
-
!error && helperText && /* @__PURE__ */
|
|
15182
|
+
!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") }),
|
|
15183
|
+
!error && helperText && /* @__PURE__ */ jsx168("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15206
15184
|
]
|
|
15207
15185
|
}
|
|
15208
15186
|
);
|
|
15209
15187
|
});
|
|
15210
15188
|
|
|
15211
15189
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15212
|
-
import * as
|
|
15190
|
+
import * as React62 from "react";
|
|
15213
15191
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
15214
15192
|
import { useTranslation as useTranslation39 } from "react-i18next";
|
|
15215
15193
|
|
|
15216
15194
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15217
|
-
import * as
|
|
15195
|
+
import * as React61 from "react";
|
|
15218
15196
|
|
|
15219
15197
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15220
15198
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15365,21 +15343,21 @@ function useDatePickerWheel({
|
|
|
15365
15343
|
minDate,
|
|
15366
15344
|
maxDate
|
|
15367
15345
|
}) {
|
|
15368
|
-
const years =
|
|
15369
|
-
const [draftDate, setDraftDate] =
|
|
15346
|
+
const years = React61.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15347
|
+
const [draftDate, setDraftDate] = React61.useState(
|
|
15370
15348
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15371
15349
|
);
|
|
15372
15350
|
const draftYear = draftDate.getFullYear();
|
|
15373
15351
|
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 =
|
|
15352
|
+
const [monthScrollTop, setMonthScrollTop] = React61.useState(0);
|
|
15353
|
+
const [dayScrollTop, setDayScrollTop] = React61.useState(0);
|
|
15354
|
+
const [yearScrollTop, setYearScrollTop] = React61.useState(0);
|
|
15355
|
+
const monthListRef = React61.useRef(null);
|
|
15356
|
+
const dayListRef = React61.useRef(null);
|
|
15357
|
+
const yearListRef = React61.useRef(null);
|
|
15358
|
+
const settleTimeoutsRef = React61.useRef({});
|
|
15359
|
+
const animationFramesRef = React61.useRef({});
|
|
15360
|
+
const columnRefs = React61.useMemo(
|
|
15383
15361
|
() => ({
|
|
15384
15362
|
month: monthListRef,
|
|
15385
15363
|
day: dayListRef,
|
|
@@ -15387,7 +15365,7 @@ function useDatePickerWheel({
|
|
|
15387
15365
|
}),
|
|
15388
15366
|
[]
|
|
15389
15367
|
);
|
|
15390
|
-
const setColumnScrollTop =
|
|
15368
|
+
const setColumnScrollTop = React61.useCallback(
|
|
15391
15369
|
(column, nextScrollTop) => {
|
|
15392
15370
|
if (column === "month") {
|
|
15393
15371
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15401,19 +15379,19 @@ function useDatePickerWheel({
|
|
|
15401
15379
|
},
|
|
15402
15380
|
[]
|
|
15403
15381
|
);
|
|
15404
|
-
const clearSettleTimeout =
|
|
15382
|
+
const clearSettleTimeout = React61.useCallback((column) => {
|
|
15405
15383
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15406
15384
|
if (timeoutId === void 0) return;
|
|
15407
15385
|
window.clearTimeout(timeoutId);
|
|
15408
15386
|
delete settleTimeoutsRef.current[column];
|
|
15409
15387
|
}, []);
|
|
15410
|
-
const clearAnimationFrame =
|
|
15388
|
+
const clearAnimationFrame = React61.useCallback((column) => {
|
|
15411
15389
|
const frameId = animationFramesRef.current[column];
|
|
15412
15390
|
if (frameId === void 0) return;
|
|
15413
15391
|
window.cancelAnimationFrame(frameId);
|
|
15414
15392
|
delete animationFramesRef.current[column];
|
|
15415
15393
|
}, []);
|
|
15416
|
-
|
|
15394
|
+
React61.useEffect(
|
|
15417
15395
|
() => () => {
|
|
15418
15396
|
["month", "day", "year"].forEach((column) => {
|
|
15419
15397
|
clearSettleTimeout(column);
|
|
@@ -15422,22 +15400,22 @@ function useDatePickerWheel({
|
|
|
15422
15400
|
},
|
|
15423
15401
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15424
15402
|
);
|
|
15425
|
-
|
|
15403
|
+
React61.useEffect(() => {
|
|
15426
15404
|
if (isOpen) return;
|
|
15427
15405
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15428
15406
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15429
|
-
const months =
|
|
15407
|
+
const months = React61.useMemo(
|
|
15430
15408
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15431
15409
|
[draftYear, maxDate, minDate]
|
|
15432
15410
|
);
|
|
15433
|
-
const days =
|
|
15411
|
+
const days = React61.useMemo(
|
|
15434
15412
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15435
15413
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15436
15414
|
);
|
|
15437
15415
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15438
15416
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15439
15417
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15440
|
-
const syncScrollPositions =
|
|
15418
|
+
const syncScrollPositions = React61.useCallback(
|
|
15441
15419
|
(nextDate, behavior = "auto") => {
|
|
15442
15420
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15443
15421
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15461,7 +15439,7 @@ function useDatePickerWheel({
|
|
|
15461
15439
|
},
|
|
15462
15440
|
[maxDate, minDate, years]
|
|
15463
15441
|
);
|
|
15464
|
-
|
|
15442
|
+
React61.useLayoutEffect(() => {
|
|
15465
15443
|
if (!isOpen) return;
|
|
15466
15444
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15467
15445
|
setDraftDate(nextDate);
|
|
@@ -15472,7 +15450,7 @@ function useDatePickerWheel({
|
|
|
15472
15450
|
window.cancelAnimationFrame(frameId);
|
|
15473
15451
|
};
|
|
15474
15452
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15475
|
-
const updateDraftDate =
|
|
15453
|
+
const updateDraftDate = React61.useCallback(
|
|
15476
15454
|
(column, targetIndex, behavior = "smooth") => {
|
|
15477
15455
|
const currentDate = stripTime(draftDate);
|
|
15478
15456
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15517,7 +15495,7 @@ function useDatePickerWheel({
|
|
|
15517
15495
|
},
|
|
15518
15496
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15519
15497
|
);
|
|
15520
|
-
const settleColumnScroll =
|
|
15498
|
+
const settleColumnScroll = React61.useCallback(
|
|
15521
15499
|
(column) => {
|
|
15522
15500
|
const list = columnRefs[column].current;
|
|
15523
15501
|
if (!list) return;
|
|
@@ -15530,7 +15508,7 @@ function useDatePickerWheel({
|
|
|
15530
15508
|
},
|
|
15531
15509
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15532
15510
|
);
|
|
15533
|
-
const scheduleScrollSettle =
|
|
15511
|
+
const scheduleScrollSettle = React61.useCallback(
|
|
15534
15512
|
(column) => {
|
|
15535
15513
|
clearSettleTimeout(column);
|
|
15536
15514
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15539,7 +15517,7 @@ function useDatePickerWheel({
|
|
|
15539
15517
|
},
|
|
15540
15518
|
[clearSettleTimeout, settleColumnScroll]
|
|
15541
15519
|
);
|
|
15542
|
-
const handleColumnScroll =
|
|
15520
|
+
const handleColumnScroll = React61.useCallback(
|
|
15543
15521
|
(column) => {
|
|
15544
15522
|
const list = columnRefs[column].current;
|
|
15545
15523
|
if (!list) return;
|
|
@@ -15553,13 +15531,13 @@ function useDatePickerWheel({
|
|
|
15553
15531
|
},
|
|
15554
15532
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15555
15533
|
);
|
|
15556
|
-
const handleOptionSelect =
|
|
15534
|
+
const handleOptionSelect = React61.useCallback(
|
|
15557
15535
|
(column, targetIndex) => {
|
|
15558
15536
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15559
15537
|
},
|
|
15560
15538
|
[updateDraftDate]
|
|
15561
15539
|
);
|
|
15562
|
-
const focusAdjacentColumn =
|
|
15540
|
+
const focusAdjacentColumn = React61.useCallback(
|
|
15563
15541
|
(column, direction) => {
|
|
15564
15542
|
const order = ["month", "day", "year"];
|
|
15565
15543
|
const currentIndex = order.indexOf(column);
|
|
@@ -15569,7 +15547,7 @@ function useDatePickerWheel({
|
|
|
15569
15547
|
},
|
|
15570
15548
|
[columnRefs]
|
|
15571
15549
|
);
|
|
15572
|
-
const handleColumnKeyDown =
|
|
15550
|
+
const handleColumnKeyDown = React61.useCallback(
|
|
15573
15551
|
(column, event) => {
|
|
15574
15552
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15575
15553
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15635,7 +15613,7 @@ function useDatePickerWheel({
|
|
|
15635
15613
|
}
|
|
15636
15614
|
|
|
15637
15615
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
15638
|
-
import { jsx as
|
|
15616
|
+
import { jsx as jsx169, jsxs as jsxs106 } from "react/jsx-runtime";
|
|
15639
15617
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
15640
15618
|
function AirbnbDatePickerWheelColumn({
|
|
15641
15619
|
id,
|
|
@@ -15649,7 +15627,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15649
15627
|
onOptionSelect,
|
|
15650
15628
|
column
|
|
15651
15629
|
}) {
|
|
15652
|
-
return /* @__PURE__ */
|
|
15630
|
+
return /* @__PURE__ */ jsx169("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs106(
|
|
15653
15631
|
"div",
|
|
15654
15632
|
{
|
|
15655
15633
|
id,
|
|
@@ -15666,14 +15644,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15666
15644
|
WebkitOverflowScrolling: "touch"
|
|
15667
15645
|
},
|
|
15668
15646
|
children: [
|
|
15669
|
-
/* @__PURE__ */
|
|
15647
|
+
/* @__PURE__ */ jsx169("div", { style: { height: `${spacerHeight}px` } }),
|
|
15670
15648
|
items.map((item, index) => {
|
|
15671
15649
|
const { style } = getWheelOptionStyles(
|
|
15672
15650
|
index,
|
|
15673
15651
|
scrollTop,
|
|
15674
15652
|
DATE_PICKER_OPTION_HEIGHT
|
|
15675
15653
|
);
|
|
15676
|
-
return /* @__PURE__ */
|
|
15654
|
+
return /* @__PURE__ */ jsx169(
|
|
15677
15655
|
"button",
|
|
15678
15656
|
{
|
|
15679
15657
|
id: `${id}-option-${index}`,
|
|
@@ -15689,14 +15667,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15689
15667
|
`${column}-${item}-${index}`
|
|
15690
15668
|
);
|
|
15691
15669
|
}),
|
|
15692
|
-
/* @__PURE__ */
|
|
15670
|
+
/* @__PURE__ */ jsx169("div", { style: { height: `${spacerHeight}px` } })
|
|
15693
15671
|
]
|
|
15694
15672
|
}
|
|
15695
15673
|
) });
|
|
15696
15674
|
}
|
|
15697
15675
|
|
|
15698
15676
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
15699
|
-
import { jsx as
|
|
15677
|
+
import { jsx as jsx170, jsxs as jsxs107 } from "react/jsx-runtime";
|
|
15700
15678
|
function AirbnbDatePickerBody({
|
|
15701
15679
|
baseId,
|
|
15702
15680
|
label,
|
|
@@ -15720,9 +15698,9 @@ function AirbnbDatePickerBody({
|
|
|
15720
15698
|
}) {
|
|
15721
15699
|
return /* @__PURE__ */ jsxs107("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
|
|
15722
15700
|
/* @__PURE__ */ jsxs107("div", { className: "relative overflow-hidden rounded-[24px]", children: [
|
|
15723
|
-
/* @__PURE__ */
|
|
15724
|
-
/* @__PURE__ */
|
|
15725
|
-
/* @__PURE__ */
|
|
15701
|
+
/* @__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" }),
|
|
15702
|
+
/* @__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" }),
|
|
15703
|
+
/* @__PURE__ */ jsx170(
|
|
15726
15704
|
"div",
|
|
15727
15705
|
{
|
|
15728
15706
|
"aria-hidden": true,
|
|
@@ -15730,7 +15708,7 @@ function AirbnbDatePickerBody({
|
|
|
15730
15708
|
}
|
|
15731
15709
|
),
|
|
15732
15710
|
/* @__PURE__ */ jsxs107("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
|
|
15733
|
-
/* @__PURE__ */
|
|
15711
|
+
/* @__PURE__ */ jsx170(
|
|
15734
15712
|
AirbnbDatePickerWheelColumn,
|
|
15735
15713
|
{
|
|
15736
15714
|
id: `${baseId}-month`,
|
|
@@ -15745,7 +15723,7 @@ function AirbnbDatePickerBody({
|
|
|
15745
15723
|
onOptionSelect
|
|
15746
15724
|
}
|
|
15747
15725
|
),
|
|
15748
|
-
/* @__PURE__ */
|
|
15726
|
+
/* @__PURE__ */ jsx170(
|
|
15749
15727
|
AirbnbDatePickerWheelColumn,
|
|
15750
15728
|
{
|
|
15751
15729
|
id: `${baseId}-day`,
|
|
@@ -15760,7 +15738,7 @@ function AirbnbDatePickerBody({
|
|
|
15760
15738
|
onOptionSelect
|
|
15761
15739
|
}
|
|
15762
15740
|
),
|
|
15763
|
-
/* @__PURE__ */
|
|
15741
|
+
/* @__PURE__ */ jsx170(
|
|
15764
15742
|
AirbnbDatePickerWheelColumn,
|
|
15765
15743
|
{
|
|
15766
15744
|
id: `${baseId}-year`,
|
|
@@ -15777,7 +15755,7 @@ function AirbnbDatePickerBody({
|
|
|
15777
15755
|
)
|
|
15778
15756
|
] })
|
|
15779
15757
|
] }),
|
|
15780
|
-
/* @__PURE__ */
|
|
15758
|
+
/* @__PURE__ */ jsx170(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
15781
15759
|
] });
|
|
15782
15760
|
}
|
|
15783
15761
|
function AirbnbDatePickerContent({
|
|
@@ -15805,7 +15783,7 @@ function AirbnbDatePickerContent({
|
|
|
15805
15783
|
onColumnKeyDown,
|
|
15806
15784
|
onOptionSelect
|
|
15807
15785
|
}) {
|
|
15808
|
-
const body = /* @__PURE__ */
|
|
15786
|
+
const body = /* @__PURE__ */ jsx170(
|
|
15809
15787
|
AirbnbDatePickerBody,
|
|
15810
15788
|
{
|
|
15811
15789
|
baseId,
|
|
@@ -15830,27 +15808,27 @@ function AirbnbDatePickerContent({
|
|
|
15830
15808
|
}
|
|
15831
15809
|
);
|
|
15832
15810
|
if (isMobile3) {
|
|
15833
|
-
return /* @__PURE__ */
|
|
15811
|
+
return /* @__PURE__ */ jsx170(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15834
15812
|
DrawerContent,
|
|
15835
15813
|
{
|
|
15836
15814
|
onClose: () => onOpenChange(false),
|
|
15837
15815
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
15838
15816
|
children: [
|
|
15839
|
-
/* @__PURE__ */
|
|
15840
|
-
/* @__PURE__ */
|
|
15817
|
+
/* @__PURE__ */ jsx170(DrawerTitle, { className: "sr-only", children: title }),
|
|
15818
|
+
/* @__PURE__ */ jsx170(DrawerDescription, { className: "sr-only", children: label }),
|
|
15841
15819
|
body
|
|
15842
15820
|
]
|
|
15843
15821
|
}
|
|
15844
15822
|
) });
|
|
15845
15823
|
}
|
|
15846
|
-
return /* @__PURE__ */
|
|
15824
|
+
return /* @__PURE__ */ jsx170(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15847
15825
|
DialogContent,
|
|
15848
15826
|
{
|
|
15849
15827
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
15850
15828
|
showCloseButton: false,
|
|
15851
15829
|
children: [
|
|
15852
|
-
/* @__PURE__ */
|
|
15853
|
-
/* @__PURE__ */
|
|
15830
|
+
/* @__PURE__ */ jsx170(DialogTitle, { className: "sr-only", children: title }),
|
|
15831
|
+
/* @__PURE__ */ jsx170(DialogDescription, { className: "sr-only", children: label }),
|
|
15854
15832
|
body
|
|
15855
15833
|
]
|
|
15856
15834
|
}
|
|
@@ -15858,7 +15836,7 @@ function AirbnbDatePickerContent({
|
|
|
15858
15836
|
}
|
|
15859
15837
|
|
|
15860
15838
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15861
|
-
import { jsx as
|
|
15839
|
+
import { jsx as jsx171, jsxs as jsxs108 } from "react/jsx-runtime";
|
|
15862
15840
|
var MONTHS_IN_YEAR2 = 12;
|
|
15863
15841
|
function getMonthLabels2(locale) {
|
|
15864
15842
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -15891,7 +15869,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
15891
15869
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
15892
15870
|
return new Date(yearNum, monthIndex, dayNum);
|
|
15893
15871
|
}
|
|
15894
|
-
var Datepicker =
|
|
15872
|
+
var Datepicker = React62.forwardRef(
|
|
15895
15873
|
function Datepicker2({
|
|
15896
15874
|
label,
|
|
15897
15875
|
value,
|
|
@@ -15921,14 +15899,14 @@ var Datepicker = React63.forwardRef(
|
|
|
15921
15899
|
maxDate,
|
|
15922
15900
|
formatValue
|
|
15923
15901
|
}, 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 =
|
|
15902
|
+
const containerRef = React62.useRef(null);
|
|
15903
|
+
const dayInputRef = React62.useRef(null);
|
|
15904
|
+
const monthInputRef = React62.useRef(null);
|
|
15905
|
+
const monthListRef = React62.useRef(null);
|
|
15906
|
+
const yearInputRef = React62.useRef(null);
|
|
15907
|
+
const mobileTriggerRef = React62.useRef(null);
|
|
15908
|
+
const wheelBaseId = React62.useId();
|
|
15909
|
+
const reactId = React62.useId();
|
|
15932
15910
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
15933
15911
|
const dayId = `${baseId}-day`;
|
|
15934
15912
|
const monthId = `${baseId}-month`;
|
|
@@ -15937,55 +15915,55 @@ var Datepicker = React63.forwardRef(
|
|
|
15937
15915
|
const errorId = `${baseId}-error`;
|
|
15938
15916
|
const { t, i18n } = useTranslation39();
|
|
15939
15917
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
15940
|
-
const resolvedMonthLabels =
|
|
15918
|
+
const resolvedMonthLabels = React62.useMemo(
|
|
15941
15919
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
15942
15920
|
[resolvedLocale, monthLabels]
|
|
15943
15921
|
);
|
|
15944
15922
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
15945
15923
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
15946
15924
|
const isControlled = value !== void 0;
|
|
15947
|
-
const initialParts =
|
|
15925
|
+
const initialParts = React62.useMemo(
|
|
15948
15926
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
15949
15927
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15950
15928
|
[]
|
|
15951
15929
|
);
|
|
15952
|
-
const [day, setDay] =
|
|
15953
|
-
const [monthIndex, setMonthIndex] =
|
|
15930
|
+
const [day, setDay] = React62.useState(initialParts.day);
|
|
15931
|
+
const [monthIndex, setMonthIndex] = React62.useState(
|
|
15954
15932
|
initialParts.monthIndex
|
|
15955
15933
|
);
|
|
15956
|
-
const [year, setYear] =
|
|
15957
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
15958
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
15959
|
-
const [focusedField, setFocusedField] =
|
|
15960
|
-
const [monthInputValue, setMonthInputValue] =
|
|
15961
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
15934
|
+
const [year, setYear] = React62.useState(initialParts.year);
|
|
15935
|
+
const [isMonthOpen, setIsMonthOpen] = React62.useState(false);
|
|
15936
|
+
const [isWheelOpen, setIsWheelOpen] = React62.useState(false);
|
|
15937
|
+
const [focusedField, setFocusedField] = React62.useState(null);
|
|
15938
|
+
const [monthInputValue, setMonthInputValue] = React62.useState("");
|
|
15939
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React62.useState(-1);
|
|
15962
15940
|
const isMobile3 = useIsMobile();
|
|
15963
|
-
|
|
15941
|
+
React62.useImperativeHandle(
|
|
15964
15942
|
ref,
|
|
15965
15943
|
() => dayInputRef.current ?? mobileTriggerRef.current,
|
|
15966
15944
|
[]
|
|
15967
15945
|
);
|
|
15968
|
-
|
|
15946
|
+
React62.useEffect(() => {
|
|
15969
15947
|
if (!isControlled) return;
|
|
15970
15948
|
const next = partsFromDate(value ?? null);
|
|
15971
15949
|
setDay(next.day);
|
|
15972
15950
|
setMonthIndex(next.monthIndex);
|
|
15973
15951
|
setYear(next.year);
|
|
15974
15952
|
}, [isControlled, value]);
|
|
15975
|
-
|
|
15953
|
+
React62.useEffect(() => {
|
|
15976
15954
|
if (focusedField === "month") return;
|
|
15977
15955
|
setMonthInputValue(
|
|
15978
15956
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
15979
15957
|
);
|
|
15980
15958
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
15981
|
-
const filteredMonths =
|
|
15959
|
+
const filteredMonths = React62.useMemo(() => {
|
|
15982
15960
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
15983
15961
|
const query = monthInputValue.trim().toLowerCase();
|
|
15984
15962
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
15985
15963
|
if (!query || monthInputValue === currentLabel) return all;
|
|
15986
15964
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
15987
15965
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
15988
|
-
|
|
15966
|
+
React62.useEffect(() => {
|
|
15989
15967
|
if (!isMonthOpen) {
|
|
15990
15968
|
setMonthHighlightIndex(-1);
|
|
15991
15969
|
return;
|
|
@@ -16006,7 +15984,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16006
15984
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16007
15985
|
const isInvalid = Boolean(invalid || error);
|
|
16008
15986
|
const wrapperWidth = toCssSize(width);
|
|
16009
|
-
const currentDate =
|
|
15987
|
+
const currentDate = React62.useMemo(
|
|
16010
15988
|
() => dateFromParts(day, monthIndex, year),
|
|
16011
15989
|
[day, monthIndex, year]
|
|
16012
15990
|
);
|
|
@@ -16015,7 +15993,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16015
15993
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16016
15994
|
isDisabled: !isMonthOpen || isMobile3
|
|
16017
15995
|
});
|
|
16018
|
-
const emitChange =
|
|
15996
|
+
const emitChange = React62.useCallback(
|
|
16019
15997
|
(nextDay, nextMonth, nextYear) => {
|
|
16020
15998
|
if (!onChange) return;
|
|
16021
15999
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16050,7 +16028,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16050
16028
|
setIsMonthOpen(true);
|
|
16051
16029
|
setMonthHighlightIndex(0);
|
|
16052
16030
|
};
|
|
16053
|
-
const commitMonthInput =
|
|
16031
|
+
const commitMonthInput = React62.useCallback(() => {
|
|
16054
16032
|
const query = monthInputValue.trim().toLowerCase();
|
|
16055
16033
|
if (!query) {
|
|
16056
16034
|
if (monthIndex !== null) {
|
|
@@ -16110,15 +16088,15 @@ var Datepicker = React63.forwardRef(
|
|
|
16110
16088
|
setIsMonthOpen(false);
|
|
16111
16089
|
}
|
|
16112
16090
|
};
|
|
16113
|
-
const focusDayInput =
|
|
16091
|
+
const focusDayInput = React62.useCallback(() => {
|
|
16114
16092
|
if (isBlocked || readOnly) return;
|
|
16115
16093
|
dayInputRef.current?.focus();
|
|
16116
16094
|
}, [isBlocked, readOnly]);
|
|
16117
|
-
const openWheel =
|
|
16095
|
+
const openWheel = React62.useCallback(() => {
|
|
16118
16096
|
if (isBlocked || readOnly) return;
|
|
16119
16097
|
setIsWheelOpen(true);
|
|
16120
16098
|
}, [isBlocked, readOnly]);
|
|
16121
|
-
const closeWheel =
|
|
16099
|
+
const closeWheel = React62.useCallback(() => {
|
|
16122
16100
|
setIsWheelOpen(false);
|
|
16123
16101
|
mobileTriggerRef.current?.focus();
|
|
16124
16102
|
}, []);
|
|
@@ -16130,7 +16108,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16130
16108
|
minDate,
|
|
16131
16109
|
maxDate
|
|
16132
16110
|
});
|
|
16133
|
-
const handleWheelDone =
|
|
16111
|
+
const handleWheelDone = React62.useCallback(() => {
|
|
16134
16112
|
const next = wheel.draftDate;
|
|
16135
16113
|
setDay(String(next.getDate()));
|
|
16136
16114
|
setMonthIndex(next.getMonth());
|
|
@@ -16139,14 +16117,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16139
16117
|
setIsWheelOpen(false);
|
|
16140
16118
|
mobileTriggerRef.current?.focus();
|
|
16141
16119
|
}, [name, onChange, wheel.draftDate]);
|
|
16142
|
-
const defaultFormatValue =
|
|
16120
|
+
const defaultFormatValue = React62.useCallback(
|
|
16143
16121
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16144
16122
|
[resolvedMonthLabels]
|
|
16145
16123
|
);
|
|
16146
16124
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16147
16125
|
const monthListboxId = `${monthId}-listbox`;
|
|
16148
16126
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16149
|
-
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */
|
|
16127
|
+
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
16128
|
"ul",
|
|
16151
16129
|
{
|
|
16152
16130
|
ref: monthListRef,
|
|
@@ -16157,7 +16135,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16157
16135
|
children: filteredMonths.map((option, position) => {
|
|
16158
16136
|
const isSelected = option.index === monthIndex;
|
|
16159
16137
|
const isHighlighted = position === monthHighlightIndex;
|
|
16160
|
-
return /* @__PURE__ */
|
|
16138
|
+
return /* @__PURE__ */ jsx171("li", { role: "presentation", children: /* @__PURE__ */ jsx171(
|
|
16161
16139
|
"button",
|
|
16162
16140
|
{
|
|
16163
16141
|
id: getMonthOptionId(option.index),
|
|
@@ -16184,7 +16162,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16184
16162
|
isBlocked && "cursor-not-allowed",
|
|
16185
16163
|
loading && "cursor-progress"
|
|
16186
16164
|
);
|
|
16187
|
-
return /* @__PURE__ */
|
|
16165
|
+
return /* @__PURE__ */ jsx171(
|
|
16188
16166
|
"div",
|
|
16189
16167
|
{
|
|
16190
16168
|
ref: containerRef,
|
|
@@ -16216,8 +16194,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16216
16194
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16217
16195
|
),
|
|
16218
16196
|
children: [
|
|
16219
|
-
/* @__PURE__ */
|
|
16220
|
-
/* @__PURE__ */
|
|
16197
|
+
/* @__PURE__ */ jsx171("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
16198
|
+
/* @__PURE__ */ jsx171("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx171(
|
|
16221
16199
|
ChevronDown4,
|
|
16222
16200
|
{
|
|
16223
16201
|
size: 16,
|
|
@@ -16236,7 +16214,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16236
16214
|
"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
16215
|
),
|
|
16238
16216
|
children: [
|
|
16239
|
-
/* @__PURE__ */
|
|
16217
|
+
/* @__PURE__ */ jsx171("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx171(
|
|
16240
16218
|
"input",
|
|
16241
16219
|
{
|
|
16242
16220
|
ref: dayInputRef,
|
|
@@ -16259,7 +16237,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16259
16237
|
}
|
|
16260
16238
|
) }),
|
|
16261
16239
|
/* @__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__ */
|
|
16240
|
+
/* @__PURE__ */ jsx171(
|
|
16263
16241
|
"input",
|
|
16264
16242
|
{
|
|
16265
16243
|
ref: monthInputRef,
|
|
@@ -16302,7 +16280,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16302
16280
|
)
|
|
16303
16281
|
}
|
|
16304
16282
|
),
|
|
16305
|
-
/* @__PURE__ */
|
|
16283
|
+
/* @__PURE__ */ jsx171(
|
|
16306
16284
|
ChevronDown4,
|
|
16307
16285
|
{
|
|
16308
16286
|
size: 14,
|
|
@@ -16319,7 +16297,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16319
16297
|
}
|
|
16320
16298
|
)
|
|
16321
16299
|
] }),
|
|
16322
|
-
/* @__PURE__ */
|
|
16300
|
+
/* @__PURE__ */ jsx171("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx171(
|
|
16323
16301
|
"input",
|
|
16324
16302
|
{
|
|
16325
16303
|
ref: yearInputRef,
|
|
@@ -16344,7 +16322,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16344
16322
|
]
|
|
16345
16323
|
}
|
|
16346
16324
|
),
|
|
16347
|
-
showCoverage && /* @__PURE__ */
|
|
16325
|
+
showCoverage && /* @__PURE__ */ jsx171(
|
|
16348
16326
|
"div",
|
|
16349
16327
|
{
|
|
16350
16328
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16352,7 +16330,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16352
16330
|
"aria-hidden": "true"
|
|
16353
16331
|
}
|
|
16354
16332
|
),
|
|
16355
|
-
/* @__PURE__ */
|
|
16333
|
+
/* @__PURE__ */ jsx171(
|
|
16356
16334
|
Fieldset,
|
|
16357
16335
|
{
|
|
16358
16336
|
isFocused,
|
|
@@ -16370,9 +16348,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16370
16348
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16371
16349
|
}
|
|
16372
16350
|
),
|
|
16373
|
-
isMonthOpen && !isMobile3 && /* @__PURE__ */
|
|
16351
|
+
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
16352
|
] }),
|
|
16375
|
-
isMobile3 && /* @__PURE__ */
|
|
16353
|
+
isMobile3 && /* @__PURE__ */ jsx171(
|
|
16376
16354
|
AirbnbDatePickerContent,
|
|
16377
16355
|
{
|
|
16378
16356
|
baseId: wheelBaseId,
|
|
@@ -16400,9 +16378,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16400
16378
|
onOptionSelect: wheel.handleOptionSelect
|
|
16401
16379
|
}
|
|
16402
16380
|
),
|
|
16403
|
-
!error && optional && /* @__PURE__ */
|
|
16404
|
-
!error && helperText && /* @__PURE__ */
|
|
16405
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
16381
|
+
!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") }),
|
|
16382
|
+
!error && helperText && /* @__PURE__ */ jsx171("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16383
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx171(
|
|
16406
16384
|
FieldErrorMessage,
|
|
16407
16385
|
{
|
|
16408
16386
|
id: errorId,
|
|
@@ -16417,7 +16395,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16417
16395
|
);
|
|
16418
16396
|
|
|
16419
16397
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16420
|
-
import * as
|
|
16398
|
+
import * as React66 from "react";
|
|
16421
16399
|
import { useTranslation as useTranslation40 } from "react-i18next";
|
|
16422
16400
|
|
|
16423
16401
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16496,7 +16474,7 @@ var createDisabledMatchers = ({
|
|
|
16496
16474
|
};
|
|
16497
16475
|
|
|
16498
16476
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16499
|
-
import * as
|
|
16477
|
+
import * as React63 from "react";
|
|
16500
16478
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16501
16479
|
function useRangeValue({
|
|
16502
16480
|
value: externalValue,
|
|
@@ -16505,10 +16483,10 @@ function useRangeValue({
|
|
|
16505
16483
|
name
|
|
16506
16484
|
}) {
|
|
16507
16485
|
const isControlled = externalValue !== void 0;
|
|
16508
|
-
const [draft, setDraft] =
|
|
16486
|
+
const [draft, setDraft] = React63.useState(
|
|
16509
16487
|
isControlled ? externalValue : defaultValue
|
|
16510
16488
|
);
|
|
16511
|
-
const lastExternalKeyRef =
|
|
16489
|
+
const lastExternalKeyRef = React63.useRef(getRangeKey(externalValue));
|
|
16512
16490
|
if (isControlled) {
|
|
16513
16491
|
const externalKey = getRangeKey(externalValue);
|
|
16514
16492
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16516,7 +16494,7 @@ function useRangeValue({
|
|
|
16516
16494
|
setDraft(externalValue);
|
|
16517
16495
|
}
|
|
16518
16496
|
}
|
|
16519
|
-
const commit =
|
|
16497
|
+
const commit = React63.useCallback(
|
|
16520
16498
|
(next) => {
|
|
16521
16499
|
setDraft(next);
|
|
16522
16500
|
if (next === void 0) {
|
|
@@ -16531,7 +16509,7 @@ function useRangeValue({
|
|
|
16531
16509
|
}
|
|
16532
16510
|
|
|
16533
16511
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16534
|
-
import * as
|
|
16512
|
+
import * as React64 from "react";
|
|
16535
16513
|
function useRangeTextInputs({
|
|
16536
16514
|
value,
|
|
16537
16515
|
format: format2,
|
|
@@ -16539,13 +16517,13 @@ function useRangeTextInputs({
|
|
|
16539
16517
|
onCommit,
|
|
16540
16518
|
onBlur
|
|
16541
16519
|
}) {
|
|
16542
|
-
const [fromText, setFromText] =
|
|
16543
|
-
const [toText, setToText] =
|
|
16544
|
-
|
|
16520
|
+
const [fromText, setFromText] = React64.useState(value?.from ? format2(value.from) : "");
|
|
16521
|
+
const [toText, setToText] = React64.useState(value?.to ? format2(value.to) : "");
|
|
16522
|
+
React64.useEffect(() => {
|
|
16545
16523
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16546
16524
|
setToText(value?.to ? format2(value.to) : "");
|
|
16547
16525
|
}, [format2, value?.from, value?.to]);
|
|
16548
|
-
const handleFromBlur =
|
|
16526
|
+
const handleFromBlur = React64.useCallback(() => {
|
|
16549
16527
|
if (!fromText) {
|
|
16550
16528
|
const next = { from: void 0, to: value?.to };
|
|
16551
16529
|
onCommit(next);
|
|
@@ -16562,7 +16540,7 @@ function useRangeTextInputs({
|
|
|
16562
16540
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16563
16541
|
return void 0;
|
|
16564
16542
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16565
|
-
const handleToBlur =
|
|
16543
|
+
const handleToBlur = React64.useCallback(() => {
|
|
16566
16544
|
if (!toText) {
|
|
16567
16545
|
const next = { from: value?.from, to: void 0 };
|
|
16568
16546
|
onCommit(next);
|
|
@@ -16589,21 +16567,21 @@ function useRangeTextInputs({
|
|
|
16589
16567
|
}
|
|
16590
16568
|
|
|
16591
16569
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16592
|
-
import * as
|
|
16570
|
+
import * as React65 from "react";
|
|
16593
16571
|
function useRangeMonthSync(value) {
|
|
16594
|
-
const isPreloadedRef =
|
|
16595
|
-
const [month, setMonth] =
|
|
16596
|
-
|
|
16572
|
+
const isPreloadedRef = React65.useRef(false);
|
|
16573
|
+
const [month, setMonth] = React65.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16574
|
+
React65.useEffect(() => {
|
|
16597
16575
|
if (value?.from && !isPreloadedRef.current) {
|
|
16598
16576
|
setMonth(value.from);
|
|
16599
16577
|
isPreloadedRef.current = true;
|
|
16600
16578
|
}
|
|
16601
16579
|
}, [value?.from]);
|
|
16602
|
-
const syncMonthToValue =
|
|
16580
|
+
const syncMonthToValue = React65.useCallback((next) => {
|
|
16603
16581
|
isPreloadedRef.current = true;
|
|
16604
16582
|
if (next?.from) setMonth(next.from);
|
|
16605
16583
|
}, []);
|
|
16606
|
-
const resetPreload =
|
|
16584
|
+
const resetPreload = React65.useCallback(() => {
|
|
16607
16585
|
isPreloadedRef.current = false;
|
|
16608
16586
|
}, []);
|
|
16609
16587
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -16629,7 +16607,7 @@ function resolveRangeSelection({
|
|
|
16629
16607
|
|
|
16630
16608
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
16631
16609
|
import { CalendarDays, SquareX as SquareX3 } from "lucide-react";
|
|
16632
|
-
import { jsx as
|
|
16610
|
+
import { jsx as jsx172, jsxs as jsxs109 } from "react/jsx-runtime";
|
|
16633
16611
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
16634
16612
|
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
16613
|
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 +16658,7 @@ function DateRangeInputs({
|
|
|
16680
16658
|
),
|
|
16681
16659
|
onClick: onRowClick,
|
|
16682
16660
|
children: [
|
|
16683
|
-
/* @__PURE__ */
|
|
16661
|
+
/* @__PURE__ */ jsx172(
|
|
16684
16662
|
"input",
|
|
16685
16663
|
{
|
|
16686
16664
|
ref: fromInputRef,
|
|
@@ -16704,7 +16682,7 @@ function DateRangeInputs({
|
|
|
16704
16682
|
)
|
|
16705
16683
|
}
|
|
16706
16684
|
),
|
|
16707
|
-
/* @__PURE__ */
|
|
16685
|
+
/* @__PURE__ */ jsx172(
|
|
16708
16686
|
"span",
|
|
16709
16687
|
{
|
|
16710
16688
|
"aria-hidden": "true",
|
|
@@ -16715,7 +16693,7 @@ function DateRangeInputs({
|
|
|
16715
16693
|
children: "\u2192"
|
|
16716
16694
|
}
|
|
16717
16695
|
),
|
|
16718
|
-
/* @__PURE__ */
|
|
16696
|
+
/* @__PURE__ */ jsx172(
|
|
16719
16697
|
"input",
|
|
16720
16698
|
{
|
|
16721
16699
|
ref: toInputRef,
|
|
@@ -16740,7 +16718,7 @@ function DateRangeInputs({
|
|
|
16740
16718
|
}
|
|
16741
16719
|
),
|
|
16742
16720
|
/* @__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__ */
|
|
16721
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx172(
|
|
16744
16722
|
"button",
|
|
16745
16723
|
{
|
|
16746
16724
|
type: "button",
|
|
@@ -16748,10 +16726,10 @@ function DateRangeInputs({
|
|
|
16748
16726
|
onClick: onReset,
|
|
16749
16727
|
className: iconButtonClass,
|
|
16750
16728
|
"aria-label": clearLabel,
|
|
16751
|
-
children: /* @__PURE__ */
|
|
16729
|
+
children: /* @__PURE__ */ jsx172(SquareX3, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
16752
16730
|
}
|
|
16753
16731
|
),
|
|
16754
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */
|
|
16732
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx172(
|
|
16755
16733
|
"button",
|
|
16756
16734
|
{
|
|
16757
16735
|
type: "button",
|
|
@@ -16763,7 +16741,7 @@ function DateRangeInputs({
|
|
|
16763
16741
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
16764
16742
|
),
|
|
16765
16743
|
"aria-label": openCalendarLabel,
|
|
16766
|
-
children: /* @__PURE__ */
|
|
16744
|
+
children: /* @__PURE__ */ jsx172(CalendarDays, { size: 18 })
|
|
16767
16745
|
}
|
|
16768
16746
|
)
|
|
16769
16747
|
] })
|
|
@@ -16773,7 +16751,7 @@ function DateRangeInputs({
|
|
|
16773
16751
|
}
|
|
16774
16752
|
|
|
16775
16753
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
16776
|
-
import { jsx as
|
|
16754
|
+
import { jsx as jsx173 } from "react/jsx-runtime";
|
|
16777
16755
|
function DateRangeCalendar({
|
|
16778
16756
|
value,
|
|
16779
16757
|
month,
|
|
@@ -16789,7 +16767,7 @@ function DateRangeCalendar({
|
|
|
16789
16767
|
components,
|
|
16790
16768
|
...dayPickerProps
|
|
16791
16769
|
}) {
|
|
16792
|
-
return /* @__PURE__ */
|
|
16770
|
+
return /* @__PURE__ */ jsx173(
|
|
16793
16771
|
Calendar,
|
|
16794
16772
|
{
|
|
16795
16773
|
mode: "range",
|
|
@@ -16812,7 +16790,7 @@ function DateRangeCalendar({
|
|
|
16812
16790
|
}
|
|
16813
16791
|
|
|
16814
16792
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
16815
|
-
import { jsx as
|
|
16793
|
+
import { jsx as jsx174, jsxs as jsxs110 } from "react/jsx-runtime";
|
|
16816
16794
|
function DateRangePopover({
|
|
16817
16795
|
isOpen,
|
|
16818
16796
|
isMobile: isMobile3,
|
|
@@ -16824,7 +16802,7 @@ function DateRangePopover({
|
|
|
16824
16802
|
}) {
|
|
16825
16803
|
if (!isOpen) return null;
|
|
16826
16804
|
if (isMobile3) {
|
|
16827
|
-
return /* @__PURE__ */
|
|
16805
|
+
return /* @__PURE__ */ jsx174(
|
|
16828
16806
|
Drawer,
|
|
16829
16807
|
{
|
|
16830
16808
|
open: isOpen,
|
|
@@ -16838,16 +16816,16 @@ function DateRangePopover({
|
|
|
16838
16816
|
lockScroll: false,
|
|
16839
16817
|
className: "max-h-[calc(100vh-1rem)]",
|
|
16840
16818
|
children: [
|
|
16841
|
-
/* @__PURE__ */
|
|
16842
|
-
/* @__PURE__ */
|
|
16843
|
-
/* @__PURE__ */
|
|
16819
|
+
/* @__PURE__ */ jsx174(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
16820
|
+
/* @__PURE__ */ jsx174(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
16821
|
+
/* @__PURE__ */ jsx174("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
16844
16822
|
]
|
|
16845
16823
|
}
|
|
16846
16824
|
)
|
|
16847
16825
|
}
|
|
16848
16826
|
);
|
|
16849
16827
|
}
|
|
16850
|
-
return /* @__PURE__ */
|
|
16828
|
+
return /* @__PURE__ */ jsx174(
|
|
16851
16829
|
"div",
|
|
16852
16830
|
{
|
|
16853
16831
|
className: cn(
|
|
@@ -16860,8 +16838,8 @@ function DateRangePopover({
|
|
|
16860
16838
|
}
|
|
16861
16839
|
|
|
16862
16840
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16863
|
-
import { jsx as
|
|
16864
|
-
var DateRangePicker =
|
|
16841
|
+
import { jsx as jsx175, jsxs as jsxs111 } from "react/jsx-runtime";
|
|
16842
|
+
var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
16865
16843
|
label,
|
|
16866
16844
|
value: externalValue,
|
|
16867
16845
|
defaultValue,
|
|
@@ -16895,20 +16873,20 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16895
16873
|
components: customComponents,
|
|
16896
16874
|
...dayPickerProps
|
|
16897
16875
|
}, ref) {
|
|
16898
|
-
const containerRef =
|
|
16899
|
-
const fromInputRef =
|
|
16900
|
-
const toInputRef =
|
|
16901
|
-
const reactId =
|
|
16876
|
+
const containerRef = React66.useRef(null);
|
|
16877
|
+
const fromInputRef = React66.useRef(null);
|
|
16878
|
+
const toInputRef = React66.useRef(null);
|
|
16879
|
+
const reactId = React66.useId();
|
|
16902
16880
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
16903
16881
|
const fromId = `${baseId}-from`;
|
|
16904
16882
|
const toId = `${baseId}-to`;
|
|
16905
16883
|
const labelId = `${baseId}-label`;
|
|
16906
16884
|
const errorId = `${baseId}-error`;
|
|
16907
|
-
const normalizedValue =
|
|
16885
|
+
const normalizedValue = React66.useMemo(() => {
|
|
16908
16886
|
if (externalValue === void 0) return void 0;
|
|
16909
16887
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
16910
16888
|
}, [externalValue]);
|
|
16911
|
-
const normalizedDefaultValue =
|
|
16889
|
+
const normalizedDefaultValue = React66.useMemo(() => {
|
|
16912
16890
|
if (defaultValue === void 0) return void 0;
|
|
16913
16891
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
16914
16892
|
}, [defaultValue]);
|
|
@@ -16918,10 +16896,10 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16918
16896
|
onChange,
|
|
16919
16897
|
name
|
|
16920
16898
|
});
|
|
16921
|
-
const normalizedMinDate =
|
|
16922
|
-
const normalizedMaxDate =
|
|
16923
|
-
const formatter =
|
|
16924
|
-
const parser =
|
|
16899
|
+
const normalizedMinDate = React66.useMemo(() => toDate(minDate), [minDate]);
|
|
16900
|
+
const normalizedMaxDate = React66.useMemo(() => toDate(maxDate), [maxDate]);
|
|
16901
|
+
const formatter = React66.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
16902
|
+
const parser = React66.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
16925
16903
|
const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
|
|
16926
16904
|
value,
|
|
16927
16905
|
format: formatter,
|
|
@@ -16930,9 +16908,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16930
16908
|
onBlur
|
|
16931
16909
|
});
|
|
16932
16910
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
16933
|
-
const [isOpen, setIsOpen] =
|
|
16934
|
-
const [focusedInput, setFocusedInput] =
|
|
16935
|
-
const [autoFocus, setAutoFocus] =
|
|
16911
|
+
const [isOpen, setIsOpen] = React66.useState(false);
|
|
16912
|
+
const [focusedInput, setFocusedInput] = React66.useState(null);
|
|
16913
|
+
const [autoFocus, setAutoFocus] = React66.useState(false);
|
|
16936
16914
|
const isMobile3 = useIsMobile();
|
|
16937
16915
|
const { t } = useTranslation40();
|
|
16938
16916
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -16943,13 +16921,13 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16943
16921
|
const isFocused = focusedInput !== null || isOpen;
|
|
16944
16922
|
const wrapperWidth = toCssSize(width);
|
|
16945
16923
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
16946
|
-
const closeCalendar =
|
|
16924
|
+
const closeCalendar = React66.useCallback(() => {
|
|
16947
16925
|
setIsOpen(false);
|
|
16948
16926
|
setFocusedInput(null);
|
|
16949
16927
|
setAutoFocus(false);
|
|
16950
16928
|
if (value?.from) setMonth(value.from);
|
|
16951
16929
|
}, [setMonth, value?.from]);
|
|
16952
|
-
const openCalendar =
|
|
16930
|
+
const openCalendar = React66.useCallback(() => {
|
|
16953
16931
|
if (isBlocked || readOnly) return;
|
|
16954
16932
|
setIsOpen(true);
|
|
16955
16933
|
}, [isBlocked, readOnly]);
|
|
@@ -16958,7 +16936,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16958
16936
|
onOutsideClick: closeCalendar,
|
|
16959
16937
|
isDisabled: !isOpen || isMobile3
|
|
16960
16938
|
});
|
|
16961
|
-
const handlePickerChange =
|
|
16939
|
+
const handlePickerChange = React66.useCallback(
|
|
16962
16940
|
(range, pickedDate) => {
|
|
16963
16941
|
const { next, shouldClose } = resolveRangeSelection({
|
|
16964
16942
|
previous: value,
|
|
@@ -16979,7 +16957,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16979
16957
|
setToText("");
|
|
16980
16958
|
setMonth(/* @__PURE__ */ new Date());
|
|
16981
16959
|
};
|
|
16982
|
-
const disabledMatchers =
|
|
16960
|
+
const disabledMatchers = React66.useMemo(
|
|
16983
16961
|
() => createDisabledMatchers({
|
|
16984
16962
|
minDate: normalizedMinDate,
|
|
16985
16963
|
maxDate: normalizedMaxDate,
|
|
@@ -16998,7 +16976,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16998
16976
|
openCalendar();
|
|
16999
16977
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17000
16978
|
};
|
|
17001
|
-
|
|
16979
|
+
React66.useImperativeHandle(
|
|
17002
16980
|
ref,
|
|
17003
16981
|
() => ({
|
|
17004
16982
|
setDateRange: (range) => {
|
|
@@ -17021,7 +16999,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17021
16999
|
syncMonthToValue
|
|
17022
17000
|
]
|
|
17023
17001
|
);
|
|
17024
|
-
return /* @__PURE__ */
|
|
17002
|
+
return /* @__PURE__ */ jsx175(
|
|
17025
17003
|
"div",
|
|
17026
17004
|
{
|
|
17027
17005
|
ref: containerRef,
|
|
@@ -17034,7 +17012,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17034
17012
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17035
17013
|
children: /* @__PURE__ */ jsxs111("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
17036
17014
|
/* @__PURE__ */ jsxs111("div", { className: "relative w-full", children: [
|
|
17037
|
-
/* @__PURE__ */
|
|
17015
|
+
/* @__PURE__ */ jsx175(
|
|
17038
17016
|
DateRangeInputs,
|
|
17039
17017
|
{
|
|
17040
17018
|
fromId,
|
|
@@ -17085,7 +17063,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17085
17063
|
onToggleCalendar: toggleCalendar
|
|
17086
17064
|
}
|
|
17087
17065
|
),
|
|
17088
|
-
/* @__PURE__ */
|
|
17066
|
+
/* @__PURE__ */ jsx175(
|
|
17089
17067
|
Fieldset,
|
|
17090
17068
|
{
|
|
17091
17069
|
isFocused,
|
|
@@ -17102,7 +17080,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17102
17080
|
tooltip
|
|
17103
17081
|
}
|
|
17104
17082
|
),
|
|
17105
|
-
/* @__PURE__ */
|
|
17083
|
+
/* @__PURE__ */ jsx175(
|
|
17106
17084
|
DateRangePopover,
|
|
17107
17085
|
{
|
|
17108
17086
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17111,7 +17089,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17111
17089
|
drawerTitle,
|
|
17112
17090
|
drawerDescription,
|
|
17113
17091
|
onClose: closeCalendar,
|
|
17114
|
-
children: /* @__PURE__ */
|
|
17092
|
+
children: /* @__PURE__ */ jsx175(
|
|
17115
17093
|
DateRangeCalendar,
|
|
17116
17094
|
{
|
|
17117
17095
|
value,
|
|
@@ -17132,7 +17110,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17132
17110
|
}
|
|
17133
17111
|
)
|
|
17134
17112
|
] }),
|
|
17135
|
-
/* @__PURE__ */
|
|
17113
|
+
/* @__PURE__ */ jsx175(
|
|
17136
17114
|
DateRangePopover,
|
|
17137
17115
|
{
|
|
17138
17116
|
isOpen: isOpen && isMobile3,
|
|
@@ -17141,7 +17119,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17141
17119
|
drawerTitle,
|
|
17142
17120
|
drawerDescription,
|
|
17143
17121
|
onClose: closeCalendar,
|
|
17144
|
-
children: /* @__PURE__ */
|
|
17122
|
+
children: /* @__PURE__ */ jsx175(
|
|
17145
17123
|
DateRangeCalendar,
|
|
17146
17124
|
{
|
|
17147
17125
|
value,
|
|
@@ -17161,9 +17139,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17161
17139
|
)
|
|
17162
17140
|
}
|
|
17163
17141
|
),
|
|
17164
|
-
!error && optional && /* @__PURE__ */
|
|
17165
|
-
!error && helperText && /* @__PURE__ */
|
|
17166
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
17142
|
+
!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") }),
|
|
17143
|
+
!error && helperText && /* @__PURE__ */ jsx175("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17144
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx175(
|
|
17167
17145
|
FieldErrorMessage,
|
|
17168
17146
|
{
|
|
17169
17147
|
id: errorId,
|
|
@@ -17177,7 +17155,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17177
17155
|
});
|
|
17178
17156
|
|
|
17179
17157
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17180
|
-
import * as
|
|
17158
|
+
import * as React67 from "react";
|
|
17181
17159
|
import { useTranslation as useTranslation41 } from "react-i18next";
|
|
17182
17160
|
import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
|
|
17183
17161
|
import {
|
|
@@ -17203,11 +17181,11 @@ function useValidateDates({
|
|
|
17203
17181
|
const { t } = useTranslation41();
|
|
17204
17182
|
const handleError = useEvent(onError);
|
|
17205
17183
|
const handleSuccess = useEvent(onSuccess);
|
|
17206
|
-
const errorFormatter =
|
|
17184
|
+
const errorFormatter = React67.useMemo(
|
|
17207
17185
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17208
17186
|
[displayFormat]
|
|
17209
17187
|
);
|
|
17210
|
-
const validateDates =
|
|
17188
|
+
const validateDates = React67.useCallback(
|
|
17211
17189
|
(dates) => {
|
|
17212
17190
|
const startDate = dates?.from;
|
|
17213
17191
|
const endDate = dates?.to;
|
|
@@ -17257,9 +17235,9 @@ function useValidateDates({
|
|
|
17257
17235
|
}
|
|
17258
17236
|
|
|
17259
17237
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17260
|
-
import * as
|
|
17238
|
+
import * as React68 from "react";
|
|
17261
17239
|
import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
|
|
17262
|
-
import { jsx as
|
|
17240
|
+
import { jsx as jsx176 } from "react/jsx-runtime";
|
|
17263
17241
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17264
17242
|
function parseTime(value) {
|
|
17265
17243
|
return parse2(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17301,24 +17279,24 @@ var FORMAT_SETTINGS = {
|
|
|
17301
17279
|
},
|
|
17302
17280
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17303
17281
|
};
|
|
17304
|
-
var TimePicker =
|
|
17305
|
-
const resolvedOptions =
|
|
17282
|
+
var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17283
|
+
const resolvedOptions = React68.useMemo(() => {
|
|
17306
17284
|
if (options) return options;
|
|
17307
17285
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17308
17286
|
return buildOptions(settings);
|
|
17309
17287
|
}, [formatName, options, timeSettings]);
|
|
17310
|
-
return /* @__PURE__ */
|
|
17288
|
+
return /* @__PURE__ */ jsx176(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17311
17289
|
});
|
|
17312
17290
|
|
|
17313
17291
|
// src/dashboard/file-input/FileInput.tsx
|
|
17314
|
-
import * as
|
|
17292
|
+
import * as React69 from "react";
|
|
17315
17293
|
import { Download, Paperclip, SquareX as SquareX4 } from "lucide-react";
|
|
17316
17294
|
import { useTranslation as useTranslation42 } from "react-i18next";
|
|
17317
|
-
import { jsx as
|
|
17295
|
+
import { jsx as jsx177, jsxs as jsxs112 } from "react/jsx-runtime";
|
|
17318
17296
|
function defaultDownload(url) {
|
|
17319
17297
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17320
17298
|
}
|
|
17321
|
-
var FileInput =
|
|
17299
|
+
var FileInput = React69.forwardRef(function FileInput2({
|
|
17322
17300
|
label,
|
|
17323
17301
|
value,
|
|
17324
17302
|
onChange,
|
|
@@ -17340,12 +17318,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17340
17318
|
width,
|
|
17341
17319
|
downloadLabel
|
|
17342
17320
|
}, ref) {
|
|
17343
|
-
const internalRef =
|
|
17321
|
+
const internalRef = React69.useRef(null);
|
|
17344
17322
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17345
17323
|
const { t } = useTranslation42();
|
|
17346
17324
|
const resolvedLabel = label ?? t("upload_file");
|
|
17347
17325
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17348
|
-
const reactId =
|
|
17326
|
+
const reactId = React69.useId();
|
|
17349
17327
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17350
17328
|
const labelId = `${inputId}-label`;
|
|
17351
17329
|
const errorId = `${inputId}-error`;
|
|
@@ -17384,7 +17362,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17384
17362
|
),
|
|
17385
17363
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17386
17364
|
children: [
|
|
17387
|
-
/* @__PURE__ */
|
|
17365
|
+
/* @__PURE__ */ jsx177(
|
|
17388
17366
|
"input",
|
|
17389
17367
|
{
|
|
17390
17368
|
ref: inputRef,
|
|
@@ -17423,12 +17401,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17423
17401
|
onClick: handleDownload,
|
|
17424
17402
|
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
17403
|
children: [
|
|
17426
|
-
/* @__PURE__ */
|
|
17427
|
-
/* @__PURE__ */
|
|
17404
|
+
/* @__PURE__ */ jsx177("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
17405
|
+
/* @__PURE__ */ jsx177(Download, { size: 15 })
|
|
17428
17406
|
]
|
|
17429
17407
|
}
|
|
17430
|
-
) : /* @__PURE__ */
|
|
17431
|
-
/* @__PURE__ */
|
|
17408
|
+
) : /* @__PURE__ */ jsx177("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
17409
|
+
/* @__PURE__ */ jsx177(
|
|
17432
17410
|
"button",
|
|
17433
17411
|
{
|
|
17434
17412
|
type: "button",
|
|
@@ -17436,17 +17414,17 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17436
17414
|
onClick: handleClear,
|
|
17437
17415
|
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
17416
|
"aria-label": t("remove_file"),
|
|
17439
|
-
children: /* @__PURE__ */
|
|
17417
|
+
children: /* @__PURE__ */ jsx177(SquareX4, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17440
17418
|
}
|
|
17441
17419
|
)
|
|
17442
17420
|
]
|
|
17443
17421
|
}
|
|
17444
|
-
) : /* @__PURE__ */
|
|
17445
|
-
/* @__PURE__ */
|
|
17422
|
+
) : /* @__PURE__ */ jsx177("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
17423
|
+
/* @__PURE__ */ jsx177("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx177(Paperclip, { size: 20 }) })
|
|
17446
17424
|
]
|
|
17447
17425
|
}
|
|
17448
17426
|
),
|
|
17449
|
-
/* @__PURE__ */
|
|
17427
|
+
/* @__PURE__ */ jsx177(
|
|
17450
17428
|
Fieldset,
|
|
17451
17429
|
{
|
|
17452
17430
|
isFocused: false,
|
|
@@ -17464,9 +17442,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17464
17442
|
}
|
|
17465
17443
|
)
|
|
17466
17444
|
] }),
|
|
17467
|
-
!error && optional && /* @__PURE__ */
|
|
17468
|
-
!error && helperText && /* @__PURE__ */
|
|
17469
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
17445
|
+
!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") }),
|
|
17446
|
+
!error && helperText && /* @__PURE__ */ jsx177("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17447
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx177(
|
|
17470
17448
|
FieldErrorMessage,
|
|
17471
17449
|
{
|
|
17472
17450
|
id: errorId,
|
|
@@ -17481,10 +17459,10 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17481
17459
|
});
|
|
17482
17460
|
|
|
17483
17461
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17484
|
-
import * as
|
|
17485
|
-
import { jsx as
|
|
17462
|
+
import * as React70 from "react";
|
|
17463
|
+
import { jsx as jsx178, jsxs as jsxs113 } from "react/jsx-runtime";
|
|
17486
17464
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17487
|
-
var SelectIconsBox =
|
|
17465
|
+
var SelectIconsBox = React70.forwardRef(
|
|
17488
17466
|
function SelectIconsBox2({
|
|
17489
17467
|
children,
|
|
17490
17468
|
icons,
|
|
@@ -17499,10 +17477,10 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17499
17477
|
className,
|
|
17500
17478
|
boxClassName
|
|
17501
17479
|
}, ref) {
|
|
17502
|
-
const containerRef =
|
|
17480
|
+
const containerRef = React70.useRef(null);
|
|
17503
17481
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17504
17482
|
const isControlled = controlledOpen !== void 0;
|
|
17505
|
-
const [internalOpen, setInternalOpen] =
|
|
17483
|
+
const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
|
|
17506
17484
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17507
17485
|
const setOpen = (next) => {
|
|
17508
17486
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17538,7 +17516,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17538
17516
|
className: cn("relative inline-block outline-none", className),
|
|
17539
17517
|
children: [
|
|
17540
17518
|
children,
|
|
17541
|
-
isOpen && /* @__PURE__ */
|
|
17519
|
+
isOpen && /* @__PURE__ */ jsx178(
|
|
17542
17520
|
"div",
|
|
17543
17521
|
{
|
|
17544
17522
|
className: cn(
|
|
@@ -17549,7 +17527,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17549
17527
|
boxClassName
|
|
17550
17528
|
),
|
|
17551
17529
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
17552
|
-
children: icons.map((iconName) => /* @__PURE__ */
|
|
17530
|
+
children: icons.map((iconName) => /* @__PURE__ */ jsx178(
|
|
17553
17531
|
"button",
|
|
17554
17532
|
{
|
|
17555
17533
|
type: "button",
|
|
@@ -17632,14 +17610,14 @@ function getErrorMessage(error) {
|
|
|
17632
17610
|
|
|
17633
17611
|
// src/lib/toastResponseError.tsx
|
|
17634
17612
|
import i18next from "i18next";
|
|
17635
|
-
import { jsx as
|
|
17613
|
+
import { jsx as jsx179, jsxs as jsxs114 } from "react/jsx-runtime";
|
|
17636
17614
|
function addSupportEmailToMessage(message, prefixText) {
|
|
17637
17615
|
if (typeof message !== "string") {
|
|
17638
17616
|
return message;
|
|
17639
17617
|
}
|
|
17640
17618
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
17641
17619
|
return /* @__PURE__ */ jsxs114("div", { children: [
|
|
17642
|
-
/* @__PURE__ */
|
|
17620
|
+
/* @__PURE__ */ jsx179("div", { children: builtMessage }),
|
|
17643
17621
|
i18next.t("reach_us_at_email")
|
|
17644
17622
|
] });
|
|
17645
17623
|
}
|
|
@@ -17654,13 +17632,13 @@ function toastResponseError(error, options = {}) {
|
|
|
17654
17632
|
}
|
|
17655
17633
|
|
|
17656
17634
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
17657
|
-
import { forwardRef as
|
|
17658
|
-
import { jsx as
|
|
17659
|
-
var LegacyTextarea =
|
|
17635
|
+
import { forwardRef as forwardRef73, useId as useId15 } from "react";
|
|
17636
|
+
import { jsx as jsx180, jsxs as jsxs115 } from "react/jsx-runtime";
|
|
17637
|
+
var LegacyTextarea = forwardRef73(
|
|
17660
17638
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
17661
17639
|
const inputId = useId15();
|
|
17662
17640
|
return /* @__PURE__ */ jsxs115("div", { className: cn("relative", className), children: [
|
|
17663
|
-
/* @__PURE__ */
|
|
17641
|
+
/* @__PURE__ */ jsx180(
|
|
17664
17642
|
"textarea",
|
|
17665
17643
|
{
|
|
17666
17644
|
ref,
|
|
@@ -17676,7 +17654,7 @@ var LegacyTextarea = forwardRef74(
|
|
|
17676
17654
|
...textareaProps
|
|
17677
17655
|
}
|
|
17678
17656
|
),
|
|
17679
|
-
label && /* @__PURE__ */
|
|
17657
|
+
label && /* @__PURE__ */ jsx180(
|
|
17680
17658
|
"label",
|
|
17681
17659
|
{
|
|
17682
17660
|
htmlFor: inputId,
|
|
@@ -17694,15 +17672,15 @@ var LegacyTextarea = forwardRef74(
|
|
|
17694
17672
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
17695
17673
|
|
|
17696
17674
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
17697
|
-
import * as
|
|
17675
|
+
import * as React72 from "react";
|
|
17698
17676
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
17699
17677
|
|
|
17700
17678
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
17701
|
-
import * as
|
|
17679
|
+
import * as React71 from "react";
|
|
17702
17680
|
import { Loader2 as Loader24 } from "lucide-react";
|
|
17703
17681
|
import { useTranslation as useTranslation43 } from "react-i18next";
|
|
17704
|
-
import { Fragment as
|
|
17705
|
-
var AirbnbFieldTrigger =
|
|
17682
|
+
import { Fragment as Fragment17, jsx as jsx181, jsxs as jsxs116 } from "react/jsx-runtime";
|
|
17683
|
+
var AirbnbFieldTrigger = React71.forwardRef(
|
|
17706
17684
|
({
|
|
17707
17685
|
as = "button",
|
|
17708
17686
|
id,
|
|
@@ -17739,13 +17717,13 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17739
17717
|
const visibleLabelText = labelText ?? label;
|
|
17740
17718
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
17741
17719
|
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs116("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
|
|
17742
|
-
/* @__PURE__ */
|
|
17720
|
+
/* @__PURE__ */ jsx181("span", { className: "min-w-0 truncate", children: visibleLabelText }),
|
|
17743
17721
|
optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "text-current opacity-70 lowercase", children: [
|
|
17744
17722
|
"(",
|
|
17745
17723
|
optionalLabel,
|
|
17746
17724
|
")"
|
|
17747
17725
|
] }),
|
|
17748
|
-
tooltip && /* @__PURE__ */
|
|
17726
|
+
tooltip && /* @__PURE__ */ jsx181(
|
|
17749
17727
|
HelpTooltip,
|
|
17750
17728
|
{
|
|
17751
17729
|
content: tooltip,
|
|
@@ -17762,7 +17740,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17762
17740
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
17763
17741
|
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs116("span", { className: "flex items-center gap-2", children: [
|
|
17764
17742
|
trailingAdornment,
|
|
17765
|
-
loading && /* @__PURE__ */
|
|
17743
|
+
loading && /* @__PURE__ */ jsx181(
|
|
17766
17744
|
Loader24,
|
|
17767
17745
|
{
|
|
17768
17746
|
"aria-hidden": "true",
|
|
@@ -17778,7 +17756,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17778
17756
|
disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
|
|
17779
17757
|
className
|
|
17780
17758
|
);
|
|
17781
|
-
const sharedContent = /* @__PURE__ */ jsxs116(
|
|
17759
|
+
const sharedContent = /* @__PURE__ */ jsxs116(Fragment17, { children: [
|
|
17782
17760
|
/* @__PURE__ */ jsxs116(
|
|
17783
17761
|
"span",
|
|
17784
17762
|
{
|
|
@@ -17788,7 +17766,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17788
17766
|
contentClassName
|
|
17789
17767
|
),
|
|
17790
17768
|
children: [
|
|
17791
|
-
/* @__PURE__ */
|
|
17769
|
+
/* @__PURE__ */ jsx181(
|
|
17792
17770
|
"span",
|
|
17793
17771
|
{
|
|
17794
17772
|
id: labelId,
|
|
@@ -17801,7 +17779,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17801
17779
|
children: animatedLabel
|
|
17802
17780
|
}
|
|
17803
17781
|
),
|
|
17804
|
-
children ? children : hasValue ? /* @__PURE__ */
|
|
17782
|
+
children ? children : hasValue ? /* @__PURE__ */ jsx181(
|
|
17805
17783
|
"span",
|
|
17806
17784
|
{
|
|
17807
17785
|
id: valueId,
|
|
@@ -17812,11 +17790,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17812
17790
|
),
|
|
17813
17791
|
children: valueText
|
|
17814
17792
|
}
|
|
17815
|
-
) : /* @__PURE__ */
|
|
17793
|
+
) : /* @__PURE__ */ jsx181("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
17816
17794
|
]
|
|
17817
17795
|
}
|
|
17818
17796
|
),
|
|
17819
|
-
resolvedTrailingAdornment && /* @__PURE__ */
|
|
17797
|
+
resolvedTrailingAdornment && /* @__PURE__ */ jsx181(
|
|
17820
17798
|
"span",
|
|
17821
17799
|
{
|
|
17822
17800
|
"aria-hidden": "true",
|
|
@@ -17826,8 +17804,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17826
17804
|
)
|
|
17827
17805
|
] });
|
|
17828
17806
|
return /* @__PURE__ */ jsxs116("div", { className: "w-full", children: [
|
|
17829
|
-
topLabel && /* @__PURE__ */
|
|
17830
|
-
as === "button" ? /* @__PURE__ */
|
|
17807
|
+
topLabel && /* @__PURE__ */ jsx181("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
|
|
17808
|
+
as === "button" ? /* @__PURE__ */ jsx181(
|
|
17831
17809
|
"button",
|
|
17832
17810
|
{
|
|
17833
17811
|
id,
|
|
@@ -17844,7 +17822,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17844
17822
|
...props,
|
|
17845
17823
|
children: sharedContent
|
|
17846
17824
|
}
|
|
17847
|
-
) : /* @__PURE__ */
|
|
17825
|
+
) : /* @__PURE__ */ jsx181(
|
|
17848
17826
|
"div",
|
|
17849
17827
|
{
|
|
17850
17828
|
id,
|
|
@@ -17861,16 +17839,16 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17861
17839
|
children: sharedContent
|
|
17862
17840
|
}
|
|
17863
17841
|
),
|
|
17864
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */
|
|
17842
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx181(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
17865
17843
|
] });
|
|
17866
17844
|
}
|
|
17867
17845
|
);
|
|
17868
17846
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
17869
17847
|
|
|
17870
17848
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
17871
|
-
import { jsx as
|
|
17849
|
+
import { jsx as jsx182, jsxs as jsxs117 } from "react/jsx-runtime";
|
|
17872
17850
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
17873
|
-
var AirbnbDatePicker =
|
|
17851
|
+
var AirbnbDatePicker = React72.forwardRef(
|
|
17874
17852
|
({
|
|
17875
17853
|
label,
|
|
17876
17854
|
topLabel,
|
|
@@ -17895,24 +17873,24 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17895
17873
|
formatValue = formatDateValue
|
|
17896
17874
|
}, ref) => {
|
|
17897
17875
|
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 =
|
|
17876
|
+
const [isOpen, setIsOpen] = React72.useState(false);
|
|
17877
|
+
const triggerId = React72.useId();
|
|
17878
|
+
const pickerId = React72.useId();
|
|
17879
|
+
const labelId = React72.useId();
|
|
17880
|
+
const valueId = React72.useId();
|
|
17881
|
+
const helperTextId = React72.useId();
|
|
17882
|
+
const errorId = React72.useId();
|
|
17883
|
+
const internalRef = React72.useRef(null);
|
|
17906
17884
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
17907
|
-
const monthLabels =
|
|
17908
|
-
const resolvedMinDate =
|
|
17909
|
-
const resolvedMaxDate =
|
|
17910
|
-
const normalizedValue =
|
|
17911
|
-
const normalizedDefaultValue =
|
|
17885
|
+
const monthLabels = React72.useMemo(() => getMonthLabels(locale), [locale]);
|
|
17886
|
+
const resolvedMinDate = React72.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
17887
|
+
const resolvedMaxDate = React72.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
17888
|
+
const normalizedValue = React72.useMemo(() => normalizeDateValue(value), [value]);
|
|
17889
|
+
const normalizedDefaultValue = React72.useMemo(
|
|
17912
17890
|
() => normalizeDateValue(defaultValue),
|
|
17913
17891
|
[defaultValue]
|
|
17914
17892
|
);
|
|
17915
|
-
const resolvedValue =
|
|
17893
|
+
const resolvedValue = React72.useMemo(
|
|
17916
17894
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
17917
17895
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
17918
17896
|
);
|
|
@@ -17943,7 +17921,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17943
17921
|
minDate: resolvedMinDate,
|
|
17944
17922
|
maxDate: resolvedMaxDate
|
|
17945
17923
|
});
|
|
17946
|
-
const handleOpenChange =
|
|
17924
|
+
const handleOpenChange = React72.useCallback(
|
|
17947
17925
|
(nextOpen) => {
|
|
17948
17926
|
if (isBlocked && nextOpen) return;
|
|
17949
17927
|
setIsOpen(nextOpen);
|
|
@@ -17953,7 +17931,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17953
17931
|
},
|
|
17954
17932
|
[isBlocked]
|
|
17955
17933
|
);
|
|
17956
|
-
const handleDone =
|
|
17934
|
+
const handleDone = React72.useCallback(() => {
|
|
17957
17935
|
if (isBlocked) return;
|
|
17958
17936
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
17959
17937
|
handleOpenChange(false);
|
|
@@ -17965,11 +17943,11 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17965
17943
|
resolvedMaxDate,
|
|
17966
17944
|
resolvedMinDate
|
|
17967
17945
|
]);
|
|
17968
|
-
const handleTriggerClick =
|
|
17946
|
+
const handleTriggerClick = React72.useCallback(() => {
|
|
17969
17947
|
if (isBlocked) return;
|
|
17970
17948
|
setIsOpen(true);
|
|
17971
17949
|
}, [isBlocked]);
|
|
17972
|
-
const handleTriggerKeyDown =
|
|
17950
|
+
const handleTriggerKeyDown = React72.useCallback(
|
|
17973
17951
|
(event) => {
|
|
17974
17952
|
if (isBlocked) return;
|
|
17975
17953
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -17979,13 +17957,13 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17979
17957
|
},
|
|
17980
17958
|
[isBlocked]
|
|
17981
17959
|
);
|
|
17982
|
-
|
|
17960
|
+
React72.useEffect(() => {
|
|
17983
17961
|
if (isBlocked) {
|
|
17984
17962
|
setIsOpen(false);
|
|
17985
17963
|
}
|
|
17986
17964
|
}, [isBlocked]);
|
|
17987
17965
|
return /* @__PURE__ */ jsxs117("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
|
|
17988
|
-
name && /* @__PURE__ */
|
|
17966
|
+
name && /* @__PURE__ */ jsx182(
|
|
17989
17967
|
"input",
|
|
17990
17968
|
{
|
|
17991
17969
|
type: "hidden",
|
|
@@ -17993,7 +17971,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17993
17971
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
17994
17972
|
}
|
|
17995
17973
|
),
|
|
17996
|
-
/* @__PURE__ */
|
|
17974
|
+
/* @__PURE__ */ jsx182(
|
|
17997
17975
|
AirbnbFieldTrigger,
|
|
17998
17976
|
{
|
|
17999
17977
|
id: triggerId,
|
|
@@ -18019,10 +17997,10 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18019
17997
|
onClick: handleTriggerClick,
|
|
18020
17998
|
onKeyDown: handleTriggerKeyDown,
|
|
18021
17999
|
onBlur,
|
|
18022
|
-
trailingAdornment: /* @__PURE__ */
|
|
18000
|
+
trailingAdornment: /* @__PURE__ */ jsx182(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18023
18001
|
}
|
|
18024
18002
|
),
|
|
18025
|
-
/* @__PURE__ */
|
|
18003
|
+
/* @__PURE__ */ jsx182(
|
|
18026
18004
|
AirbnbDatePickerContent,
|
|
18027
18005
|
{
|
|
18028
18006
|
baseId: pickerId,
|
|
@@ -18056,12 +18034,12 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18056
18034
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18057
18035
|
|
|
18058
18036
|
// src/airbnb-fields/input/Input.tsx
|
|
18059
|
-
import * as
|
|
18037
|
+
import * as React73 from "react";
|
|
18060
18038
|
import { Eye as Eye2 } from "lucide-react";
|
|
18061
18039
|
import { useTranslation as useTranslation44 } from "react-i18next";
|
|
18062
|
-
import { jsx as
|
|
18040
|
+
import { jsx as jsx183, jsxs as jsxs118 } from "react/jsx-runtime";
|
|
18063
18041
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18064
|
-
var AirbnbInput =
|
|
18042
|
+
var AirbnbInput = React73.forwardRef(
|
|
18065
18043
|
({
|
|
18066
18044
|
label,
|
|
18067
18045
|
topLabel,
|
|
@@ -18090,16 +18068,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18090
18068
|
...props
|
|
18091
18069
|
}, ref) => {
|
|
18092
18070
|
const { t } = useTranslation44();
|
|
18093
|
-
const generatedId =
|
|
18094
|
-
const inputRef =
|
|
18071
|
+
const generatedId = React73.useId();
|
|
18072
|
+
const inputRef = React73.useRef(null);
|
|
18095
18073
|
const inputId = id ?? generatedId;
|
|
18096
18074
|
const fieldId = `${inputId}-field`;
|
|
18097
18075
|
const labelId = `${inputId}-label`;
|
|
18098
18076
|
const errorId = `${inputId}-error`;
|
|
18099
18077
|
const accessibleLabel = placeholder ?? label;
|
|
18100
|
-
const [isFocused, setIsFocused] =
|
|
18101
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18102
|
-
const [currentValue, setCurrentValue] =
|
|
18078
|
+
const [isFocused, setIsFocused] = React73.useState(false);
|
|
18079
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React73.useState(false);
|
|
18080
|
+
const [currentValue, setCurrentValue] = React73.useState(
|
|
18103
18081
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18104
18082
|
);
|
|
18105
18083
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18112,16 +18090,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18112
18090
|
const triggerError = error ?? invalid;
|
|
18113
18091
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18114
18092
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18115
|
-
|
|
18093
|
+
React73.useLayoutEffect(() => {
|
|
18116
18094
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18117
18095
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18118
18096
|
}, [value]);
|
|
18119
|
-
|
|
18097
|
+
React73.useEffect(() => {
|
|
18120
18098
|
if (!isPasswordInput) {
|
|
18121
18099
|
setIsPasswordRevealed(false);
|
|
18122
18100
|
}
|
|
18123
18101
|
}, [isPasswordInput]);
|
|
18124
|
-
const setRefs =
|
|
18102
|
+
const setRefs = React73.useCallback(
|
|
18125
18103
|
(node) => {
|
|
18126
18104
|
inputRef.current = node;
|
|
18127
18105
|
if (node && value == null) {
|
|
@@ -18154,7 +18132,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18154
18132
|
const togglePasswordReveal = () => {
|
|
18155
18133
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18156
18134
|
};
|
|
18157
|
-
return /* @__PURE__ */
|
|
18135
|
+
return /* @__PURE__ */ jsx183("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs118(
|
|
18158
18136
|
AirbnbFieldTrigger,
|
|
18159
18137
|
{
|
|
18160
18138
|
as: "div",
|
|
@@ -18183,7 +18161,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18183
18161
|
forceLabelText: hasLabelMeta,
|
|
18184
18162
|
hideErrorMessage: !renderErrorMessage,
|
|
18185
18163
|
children: [
|
|
18186
|
-
/* @__PURE__ */
|
|
18164
|
+
/* @__PURE__ */ jsx183(
|
|
18187
18165
|
"input",
|
|
18188
18166
|
{
|
|
18189
18167
|
...props,
|
|
@@ -18213,7 +18191,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18213
18191
|
)
|
|
18214
18192
|
}
|
|
18215
18193
|
),
|
|
18216
|
-
shouldShowPasswordReveal && /* @__PURE__ */
|
|
18194
|
+
shouldShowPasswordReveal && /* @__PURE__ */ jsx183(
|
|
18217
18195
|
"button",
|
|
18218
18196
|
{
|
|
18219
18197
|
type: "button",
|
|
@@ -18221,7 +18199,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18221
18199
|
disabled: isBlocked,
|
|
18222
18200
|
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
18201
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18224
|
-
children: /* @__PURE__ */
|
|
18202
|
+
children: /* @__PURE__ */ jsx183(
|
|
18225
18203
|
Eye2,
|
|
18226
18204
|
{
|
|
18227
18205
|
size: 18,
|
|
@@ -18239,14 +18217,14 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18239
18217
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18240
18218
|
|
|
18241
18219
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18242
|
-
import * as
|
|
18220
|
+
import * as React79 from "react";
|
|
18243
18221
|
import { ChevronDown as ChevronDown6 } from "lucide-react";
|
|
18244
18222
|
|
|
18245
18223
|
// src/airbnb-fields/select/Select.tsx
|
|
18246
|
-
import * as
|
|
18224
|
+
import * as React78 from "react";
|
|
18247
18225
|
|
|
18248
18226
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18249
|
-
import { jsx as
|
|
18227
|
+
import { jsx as jsx184, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
18250
18228
|
function AirbnbSelectDesktopMenu({
|
|
18251
18229
|
id,
|
|
18252
18230
|
options,
|
|
@@ -18278,12 +18256,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18278
18256
|
onKeyDown,
|
|
18279
18257
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18280
18258
|
children: [
|
|
18281
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */
|
|
18259
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx184("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18282
18260
|
options.map((option, index) => {
|
|
18283
18261
|
const isSelected = selectedValue?.value === option.value;
|
|
18284
18262
|
const isHighlighted = index === highlightedIndex;
|
|
18285
18263
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18286
|
-
return /* @__PURE__ */
|
|
18264
|
+
return /* @__PURE__ */ jsx184(
|
|
18287
18265
|
"button",
|
|
18288
18266
|
{
|
|
18289
18267
|
id: getOptionId2(index),
|
|
@@ -18315,7 +18293,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18315
18293
|
}
|
|
18316
18294
|
|
|
18317
18295
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18318
|
-
import { jsx as
|
|
18296
|
+
import { jsx as jsx185 } from "react/jsx-runtime";
|
|
18319
18297
|
function AirbnbSelectDesktopContent({
|
|
18320
18298
|
isOpen,
|
|
18321
18299
|
listboxId,
|
|
@@ -18336,14 +18314,14 @@ function AirbnbSelectDesktopContent({
|
|
|
18336
18314
|
noOptionsMessage
|
|
18337
18315
|
}) {
|
|
18338
18316
|
if (!isOpen) return null;
|
|
18339
|
-
return /* @__PURE__ */
|
|
18317
|
+
return /* @__PURE__ */ jsx185(
|
|
18340
18318
|
"div",
|
|
18341
18319
|
{
|
|
18342
18320
|
className: cn(
|
|
18343
18321
|
"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
18322
|
dropdownClassName
|
|
18345
18323
|
),
|
|
18346
|
-
children: /* @__PURE__ */
|
|
18324
|
+
children: /* @__PURE__ */ jsx185(
|
|
18347
18325
|
AirbnbSelectDesktopMenu,
|
|
18348
18326
|
{
|
|
18349
18327
|
id: listboxId,
|
|
@@ -18441,7 +18419,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
18441
18419
|
}
|
|
18442
18420
|
|
|
18443
18421
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
18444
|
-
import { jsx as
|
|
18422
|
+
import { jsx as jsx186, jsxs as jsxs120 } from "react/jsx-runtime";
|
|
18445
18423
|
function AirbnbSelectMobileWheel({
|
|
18446
18424
|
id,
|
|
18447
18425
|
options,
|
|
@@ -18472,10 +18450,10 @@ function AirbnbSelectMobileWheel({
|
|
|
18472
18450
|
onKeyDown,
|
|
18473
18451
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
18474
18452
|
children: [
|
|
18475
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */
|
|
18476
|
-
/* @__PURE__ */
|
|
18477
|
-
/* @__PURE__ */
|
|
18478
|
-
/* @__PURE__ */
|
|
18453
|
+
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,
|
|
18454
|
+
/* @__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" }),
|
|
18455
|
+
/* @__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" }),
|
|
18456
|
+
/* @__PURE__ */ jsx186(
|
|
18479
18457
|
"div",
|
|
18480
18458
|
{
|
|
18481
18459
|
"aria-hidden": true,
|
|
@@ -18500,11 +18478,11 @@ function AirbnbSelectMobileWheel({
|
|
|
18500
18478
|
WebkitOverflowScrolling: "touch"
|
|
18501
18479
|
},
|
|
18502
18480
|
children: [
|
|
18503
|
-
/* @__PURE__ */
|
|
18481
|
+
/* @__PURE__ */ jsx186("div", { style: { height: `${spacerHeight2}px` } }),
|
|
18504
18482
|
options.map((option, index) => {
|
|
18505
18483
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
18506
18484
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18507
|
-
return /* @__PURE__ */
|
|
18485
|
+
return /* @__PURE__ */ jsx186(
|
|
18508
18486
|
"button",
|
|
18509
18487
|
{
|
|
18510
18488
|
id: getOptionId2(index),
|
|
@@ -18525,7 +18503,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18525
18503
|
optionKey
|
|
18526
18504
|
);
|
|
18527
18505
|
}),
|
|
18528
|
-
/* @__PURE__ */
|
|
18506
|
+
/* @__PURE__ */ jsx186("div", { style: { height: `${spacerHeight2}px` } })
|
|
18529
18507
|
]
|
|
18530
18508
|
}
|
|
18531
18509
|
)
|
|
@@ -18535,7 +18513,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18535
18513
|
}
|
|
18536
18514
|
|
|
18537
18515
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
18538
|
-
import { jsx as
|
|
18516
|
+
import { jsx as jsx187, jsxs as jsxs121 } from "react/jsx-runtime";
|
|
18539
18517
|
function AirbnbSelectMobileContent({
|
|
18540
18518
|
open,
|
|
18541
18519
|
onOpenChange,
|
|
@@ -18559,11 +18537,11 @@ function AirbnbSelectMobileContent({
|
|
|
18559
18537
|
getOptionId: getOptionId2,
|
|
18560
18538
|
noOptionsMessage
|
|
18561
18539
|
}) {
|
|
18562
|
-
return /* @__PURE__ */
|
|
18563
|
-
/* @__PURE__ */
|
|
18564
|
-
/* @__PURE__ */
|
|
18540
|
+
return /* @__PURE__ */ jsx187(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs121(DrawerContent, { onClose, lockScroll: false, children: [
|
|
18541
|
+
/* @__PURE__ */ jsx187(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
18542
|
+
/* @__PURE__ */ jsx187(DrawerDescription, { className: "sr-only", children: label }),
|
|
18565
18543
|
/* @__PURE__ */ jsxs121("div", { className: "px-6 pb-4 pt-1", children: [
|
|
18566
|
-
/* @__PURE__ */
|
|
18544
|
+
/* @__PURE__ */ jsx187(
|
|
18567
18545
|
AirbnbSelectMobileWheel,
|
|
18568
18546
|
{
|
|
18569
18547
|
id: listboxId,
|
|
@@ -18582,16 +18560,16 @@ function AirbnbSelectMobileContent({
|
|
|
18582
18560
|
noOptionsMessage
|
|
18583
18561
|
}
|
|
18584
18562
|
),
|
|
18585
|
-
/* @__PURE__ */
|
|
18563
|
+
/* @__PURE__ */ jsx187(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
18586
18564
|
] })
|
|
18587
18565
|
] }) });
|
|
18588
18566
|
}
|
|
18589
18567
|
|
|
18590
18568
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18591
|
-
import * as
|
|
18569
|
+
import * as React74 from "react";
|
|
18592
18570
|
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
18593
|
-
import { jsx as
|
|
18594
|
-
var AirbnbSelectTrigger =
|
|
18571
|
+
import { jsx as jsx188 } from "react/jsx-runtime";
|
|
18572
|
+
var AirbnbSelectTrigger = React74.forwardRef(
|
|
18595
18573
|
({
|
|
18596
18574
|
id,
|
|
18597
18575
|
open,
|
|
@@ -18615,7 +18593,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18615
18593
|
onKeyDown,
|
|
18616
18594
|
onBlur
|
|
18617
18595
|
}, ref) => {
|
|
18618
|
-
return /* @__PURE__ */
|
|
18596
|
+
return /* @__PURE__ */ jsx188(
|
|
18619
18597
|
AirbnbFieldTrigger,
|
|
18620
18598
|
{
|
|
18621
18599
|
id,
|
|
@@ -18643,7 +18621,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18643
18621
|
onClick,
|
|
18644
18622
|
onKeyDown,
|
|
18645
18623
|
onBlur,
|
|
18646
|
-
trailingAdornment: /* @__PURE__ */
|
|
18624
|
+
trailingAdornment: /* @__PURE__ */ jsx188(
|
|
18647
18625
|
ChevronDown5,
|
|
18648
18626
|
{
|
|
18649
18627
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
@@ -18656,7 +18634,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18656
18634
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
18657
18635
|
|
|
18658
18636
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
18659
|
-
import * as
|
|
18637
|
+
import * as React75 from "react";
|
|
18660
18638
|
function useDesktopSelect({
|
|
18661
18639
|
isMobile: isMobile3,
|
|
18662
18640
|
isOpen,
|
|
@@ -18665,12 +18643,12 @@ function useDesktopSelect({
|
|
|
18665
18643
|
disabled,
|
|
18666
18644
|
onChange
|
|
18667
18645
|
}) {
|
|
18668
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
18669
|
-
const triggerRef =
|
|
18670
|
-
const listRef =
|
|
18671
|
-
const optionRefs =
|
|
18646
|
+
const [highlightedIndex, setHighlightedIndex] = React75.useState(-1);
|
|
18647
|
+
const triggerRef = React75.useRef(null);
|
|
18648
|
+
const listRef = React75.useRef(null);
|
|
18649
|
+
const optionRefs = React75.useRef([]);
|
|
18672
18650
|
const selectedIndex = getOptionIndex2(options, value);
|
|
18673
|
-
|
|
18651
|
+
React75.useEffect(() => {
|
|
18674
18652
|
if (!isOpen || isMobile3) return;
|
|
18675
18653
|
setHighlightedIndex((currentIndex) => {
|
|
18676
18654
|
if (currentIndex >= 0) {
|
|
@@ -18685,34 +18663,34 @@ function useDesktopSelect({
|
|
|
18685
18663
|
window.cancelAnimationFrame(frameId);
|
|
18686
18664
|
};
|
|
18687
18665
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
18688
|
-
|
|
18666
|
+
React75.useEffect(() => {
|
|
18689
18667
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
18690
18668
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
18691
18669
|
block: "nearest"
|
|
18692
18670
|
});
|
|
18693
18671
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
18694
|
-
|
|
18672
|
+
React75.useEffect(() => {
|
|
18695
18673
|
if (isOpen) return;
|
|
18696
18674
|
setHighlightedIndex(-1);
|
|
18697
18675
|
}, [isOpen]);
|
|
18698
|
-
const focusTrigger =
|
|
18676
|
+
const focusTrigger = React75.useCallback(() => {
|
|
18699
18677
|
triggerRef.current?.focus();
|
|
18700
18678
|
}, []);
|
|
18701
|
-
const handleSelect =
|
|
18679
|
+
const handleSelect = React75.useCallback(
|
|
18702
18680
|
(option) => {
|
|
18703
18681
|
if (option.isDisabled || disabled) return;
|
|
18704
18682
|
onChange?.(option);
|
|
18705
18683
|
},
|
|
18706
18684
|
[disabled, onChange]
|
|
18707
18685
|
);
|
|
18708
|
-
const openMenu =
|
|
18686
|
+
const openMenu = React75.useCallback(
|
|
18709
18687
|
(targetIndex) => {
|
|
18710
18688
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
18711
18689
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
18712
18690
|
},
|
|
18713
18691
|
[options, selectedIndex]
|
|
18714
18692
|
);
|
|
18715
|
-
const handleTriggerKeyDown =
|
|
18693
|
+
const handleTriggerKeyDown = React75.useCallback(
|
|
18716
18694
|
(event, onOpen) => {
|
|
18717
18695
|
if (disabled) return;
|
|
18718
18696
|
if (event.key === "ArrowDown") {
|
|
@@ -18737,7 +18715,7 @@ function useDesktopSelect({
|
|
|
18737
18715
|
},
|
|
18738
18716
|
[disabled, openMenu, options, selectedIndex]
|
|
18739
18717
|
);
|
|
18740
|
-
const handleMenuKeyDown =
|
|
18718
|
+
const handleMenuKeyDown = React75.useCallback(
|
|
18741
18719
|
(event, onClose) => {
|
|
18742
18720
|
if (event.key === "Escape") {
|
|
18743
18721
|
event.preventDefault();
|
|
@@ -18787,7 +18765,7 @@ function useDesktopSelect({
|
|
|
18787
18765
|
},
|
|
18788
18766
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
18789
18767
|
);
|
|
18790
|
-
const setOptionRef =
|
|
18768
|
+
const setOptionRef = React75.useCallback(
|
|
18791
18769
|
(index, node) => {
|
|
18792
18770
|
optionRefs.current[index] = node;
|
|
18793
18771
|
},
|
|
@@ -18807,23 +18785,23 @@ function useDesktopSelect({
|
|
|
18807
18785
|
}
|
|
18808
18786
|
|
|
18809
18787
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
18810
|
-
import * as
|
|
18788
|
+
import * as React76 from "react";
|
|
18811
18789
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
18812
|
-
const [pendingValue, setPendingValue] =
|
|
18790
|
+
const [pendingValue, setPendingValue] = React76.useState(
|
|
18813
18791
|
value ?? null
|
|
18814
18792
|
);
|
|
18815
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
18816
|
-
const mobileListRef =
|
|
18817
|
-
const scrollSettleTimeoutRef =
|
|
18818
|
-
const scrollAnimationFrameRef =
|
|
18819
|
-
const getTargetIndex =
|
|
18793
|
+
const [mobileScrollTop, setMobileScrollTop] = React76.useState(0);
|
|
18794
|
+
const mobileListRef = React76.useRef(null);
|
|
18795
|
+
const scrollSettleTimeoutRef = React76.useRef(null);
|
|
18796
|
+
const scrollAnimationFrameRef = React76.useRef(null);
|
|
18797
|
+
const getTargetIndex = React76.useCallback(
|
|
18820
18798
|
(targetValue) => {
|
|
18821
18799
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
18822
18800
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
18823
18801
|
},
|
|
18824
18802
|
[options]
|
|
18825
18803
|
);
|
|
18826
|
-
const syncScrollPosition =
|
|
18804
|
+
const syncScrollPosition = React76.useCallback(
|
|
18827
18805
|
(targetValue, behavior = "instant") => {
|
|
18828
18806
|
const targetIndex = getTargetIndex(targetValue);
|
|
18829
18807
|
if (targetIndex < 0) return;
|
|
@@ -18842,27 +18820,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18842
18820
|
},
|
|
18843
18821
|
[getTargetIndex, options]
|
|
18844
18822
|
);
|
|
18845
|
-
const clearScrollSettleTimeout =
|
|
18823
|
+
const clearScrollSettleTimeout = React76.useCallback(() => {
|
|
18846
18824
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
18847
18825
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
18848
18826
|
scrollSettleTimeoutRef.current = null;
|
|
18849
18827
|
}, []);
|
|
18850
|
-
const clearScrollAnimationFrame =
|
|
18828
|
+
const clearScrollAnimationFrame = React76.useCallback(() => {
|
|
18851
18829
|
if (scrollAnimationFrameRef.current === null) return;
|
|
18852
18830
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
18853
18831
|
scrollAnimationFrameRef.current = null;
|
|
18854
18832
|
}, []);
|
|
18855
|
-
|
|
18833
|
+
React76.useEffect(
|
|
18856
18834
|
() => () => {
|
|
18857
18835
|
clearScrollSettleTimeout();
|
|
18858
18836
|
clearScrollAnimationFrame();
|
|
18859
18837
|
},
|
|
18860
18838
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
18861
18839
|
);
|
|
18862
|
-
|
|
18840
|
+
React76.useEffect(() => {
|
|
18863
18841
|
setPendingValue(value ?? null);
|
|
18864
18842
|
}, [value]);
|
|
18865
|
-
|
|
18843
|
+
React76.useLayoutEffect(() => {
|
|
18866
18844
|
if (!isMobile3 || !isOpen) return;
|
|
18867
18845
|
const frameId = window.requestAnimationFrame(() => {
|
|
18868
18846
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -18871,7 +18849,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18871
18849
|
window.cancelAnimationFrame(frameId);
|
|
18872
18850
|
};
|
|
18873
18851
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
18874
|
-
const settleScroll =
|
|
18852
|
+
const settleScroll = React76.useCallback(() => {
|
|
18875
18853
|
if (!mobileListRef.current) return;
|
|
18876
18854
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
18877
18855
|
const nextOption = options[nextIndex];
|
|
@@ -18883,13 +18861,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18883
18861
|
}
|
|
18884
18862
|
setPendingValue(nextOption);
|
|
18885
18863
|
}, [options, pendingValue]);
|
|
18886
|
-
const scheduleScrollSettle =
|
|
18864
|
+
const scheduleScrollSettle = React76.useCallback(() => {
|
|
18887
18865
|
clearScrollSettleTimeout();
|
|
18888
18866
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
18889
18867
|
settleScroll();
|
|
18890
18868
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
18891
18869
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
18892
|
-
const handleScroll =
|
|
18870
|
+
const handleScroll = React76.useCallback(() => {
|
|
18893
18871
|
if (!mobileListRef.current) return;
|
|
18894
18872
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
18895
18873
|
clearScrollAnimationFrame();
|
|
@@ -18899,7 +18877,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18899
18877
|
});
|
|
18900
18878
|
scheduleScrollSettle();
|
|
18901
18879
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
18902
|
-
const focusOptionByIndex =
|
|
18880
|
+
const focusOptionByIndex = React76.useCallback(
|
|
18903
18881
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
18904
18882
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
18905
18883
|
const option = options[index];
|
|
@@ -18917,7 +18895,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18917
18895
|
},
|
|
18918
18896
|
[options, scheduleScrollSettle]
|
|
18919
18897
|
);
|
|
18920
|
-
const handleOptionClick =
|
|
18898
|
+
const handleOptionClick = React76.useCallback(
|
|
18921
18899
|
(option) => {
|
|
18922
18900
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
18923
18901
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -18926,7 +18904,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18926
18904
|
},
|
|
18927
18905
|
[disabled, focusOptionByIndex, options]
|
|
18928
18906
|
);
|
|
18929
|
-
const moveByStep =
|
|
18907
|
+
const moveByStep = React76.useCallback(
|
|
18930
18908
|
(step) => {
|
|
18931
18909
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
18932
18910
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -18938,7 +18916,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18938
18916
|
},
|
|
18939
18917
|
[focusOptionByIndex, options, pendingValue]
|
|
18940
18918
|
);
|
|
18941
|
-
const moveToBoundary =
|
|
18919
|
+
const moveToBoundary = React76.useCallback(
|
|
18942
18920
|
(boundary) => {
|
|
18943
18921
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
18944
18922
|
if (targetIndex >= 0) {
|
|
@@ -18947,7 +18925,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18947
18925
|
},
|
|
18948
18926
|
[focusOptionByIndex, options]
|
|
18949
18927
|
);
|
|
18950
|
-
const syncPendingValue =
|
|
18928
|
+
const syncPendingValue = React76.useCallback(
|
|
18951
18929
|
(nextValue) => {
|
|
18952
18930
|
const normalizedValue = nextValue ?? null;
|
|
18953
18931
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -18975,9 +18953,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18975
18953
|
}
|
|
18976
18954
|
|
|
18977
18955
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
18978
|
-
import * as
|
|
18956
|
+
import * as React77 from "react";
|
|
18979
18957
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
18980
|
-
const reactId =
|
|
18958
|
+
const reactId = React77.useId().replace(/:/g, "");
|
|
18981
18959
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
18982
18960
|
const triggerId = `${baseId}-trigger`;
|
|
18983
18961
|
const labelId = `${baseId}-label`;
|
|
@@ -18987,7 +18965,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
18987
18965
|
const listboxId = `${baseId}-listbox`;
|
|
18988
18966
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
18989
18967
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
18990
|
-
const getOptionId2 =
|
|
18968
|
+
const getOptionId2 = React77.useCallback(
|
|
18991
18969
|
(index) => `${baseId}-option-${index}`,
|
|
18992
18970
|
[baseId]
|
|
18993
18971
|
);
|
|
@@ -19005,8 +18983,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19005
18983
|
}
|
|
19006
18984
|
|
|
19007
18985
|
// src/airbnb-fields/select/Select.tsx
|
|
19008
|
-
import { jsx as
|
|
19009
|
-
var AirbnbSelect =
|
|
18986
|
+
import { jsx as jsx189, jsxs as jsxs122 } from "react/jsx-runtime";
|
|
18987
|
+
var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
19010
18988
|
options = [],
|
|
19011
18989
|
value,
|
|
19012
18990
|
onChange,
|
|
@@ -19033,8 +19011,8 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19033
19011
|
filterOption
|
|
19034
19012
|
}, ref) {
|
|
19035
19013
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19036
|
-
const [isOpen, setIsOpen] =
|
|
19037
|
-
const containerRef =
|
|
19014
|
+
const [isOpen, setIsOpen] = React78.useState(false);
|
|
19015
|
+
const containerRef = React78.useRef(null);
|
|
19038
19016
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19039
19017
|
const hasValue = Boolean(value);
|
|
19040
19018
|
const helperText = placeholder ?? label;
|
|
@@ -19096,12 +19074,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19096
19074
|
onOutsideClick: () => setIsOpen(false),
|
|
19097
19075
|
isDisabled: !isOpen || isMobile3
|
|
19098
19076
|
});
|
|
19099
|
-
|
|
19077
|
+
React78.useEffect(() => {
|
|
19100
19078
|
if (isBlocked) {
|
|
19101
19079
|
setIsOpen(false);
|
|
19102
19080
|
}
|
|
19103
19081
|
}, [isBlocked]);
|
|
19104
|
-
|
|
19082
|
+
React78.useEffect(
|
|
19105
19083
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19106
19084
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19107
19085
|
return;
|
|
@@ -19113,7 +19091,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19113
19091
|
},
|
|
19114
19092
|
[onChange, filteredOptions, value]
|
|
19115
19093
|
);
|
|
19116
|
-
const handleMobileOpenChange =
|
|
19094
|
+
const handleMobileOpenChange = React78.useCallback(
|
|
19117
19095
|
(nextOpen) => {
|
|
19118
19096
|
if (isBlocked && nextOpen) return;
|
|
19119
19097
|
setIsOpen(nextOpen);
|
|
@@ -19124,7 +19102,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19124
19102
|
},
|
|
19125
19103
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19126
19104
|
);
|
|
19127
|
-
const handleMobileDone =
|
|
19105
|
+
const handleMobileDone = React78.useCallback(() => {
|
|
19128
19106
|
if (isBlocked) return;
|
|
19129
19107
|
const finalOption = pendingValue;
|
|
19130
19108
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19133,7 +19111,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19133
19111
|
setIsOpen(false);
|
|
19134
19112
|
focusTrigger();
|
|
19135
19113
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19136
|
-
const handleTriggerClick =
|
|
19114
|
+
const handleTriggerClick = React78.useCallback(() => {
|
|
19137
19115
|
if (isBlocked) return;
|
|
19138
19116
|
setIsOpen((prev) => {
|
|
19139
19117
|
const nextOpen = !prev;
|
|
@@ -19192,7 +19170,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19192
19170
|
ref: containerRef,
|
|
19193
19171
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19194
19172
|
children: [
|
|
19195
|
-
name && /* @__PURE__ */
|
|
19173
|
+
name && /* @__PURE__ */ jsx189("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19196
19174
|
renderTrigger ? renderTrigger({
|
|
19197
19175
|
id: triggerId,
|
|
19198
19176
|
open: isOpen,
|
|
@@ -19213,7 +19191,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19213
19191
|
onClick: handleTriggerClick,
|
|
19214
19192
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19215
19193
|
onBlur
|
|
19216
|
-
}) : /* @__PURE__ */
|
|
19194
|
+
}) : /* @__PURE__ */ jsx189(
|
|
19217
19195
|
AirbnbSelectTrigger,
|
|
19218
19196
|
{
|
|
19219
19197
|
id: triggerId,
|
|
@@ -19240,7 +19218,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19240
19218
|
onBlur
|
|
19241
19219
|
}
|
|
19242
19220
|
),
|
|
19243
|
-
isMobile3 ? /* @__PURE__ */
|
|
19221
|
+
isMobile3 ? /* @__PURE__ */ jsx189(
|
|
19244
19222
|
AirbnbSelectMobileContent,
|
|
19245
19223
|
{
|
|
19246
19224
|
open: isOpen,
|
|
@@ -19265,7 +19243,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19265
19243
|
getOptionId: getOptionId2,
|
|
19266
19244
|
noOptionsMessage
|
|
19267
19245
|
}
|
|
19268
|
-
) : /* @__PURE__ */
|
|
19246
|
+
) : /* @__PURE__ */ jsx189(
|
|
19269
19247
|
AirbnbSelectDesktopContent,
|
|
19270
19248
|
{
|
|
19271
19249
|
isOpen,
|
|
@@ -19299,13 +19277,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19299
19277
|
});
|
|
19300
19278
|
|
|
19301
19279
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19302
|
-
import { jsx as
|
|
19280
|
+
import { jsx as jsx190, jsxs as jsxs123 } from "react/jsx-runtime";
|
|
19303
19281
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19304
19282
|
const label = String(option.label);
|
|
19305
19283
|
const value = String(option.value);
|
|
19306
19284
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19307
19285
|
}
|
|
19308
|
-
var AirbnbPhoneField =
|
|
19286
|
+
var AirbnbPhoneField = React79.forwardRef(
|
|
19309
19287
|
({
|
|
19310
19288
|
label,
|
|
19311
19289
|
topLabel,
|
|
@@ -19326,10 +19304,12 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19326
19304
|
codeName,
|
|
19327
19305
|
numberName,
|
|
19328
19306
|
mobileTitle,
|
|
19329
|
-
codePlaceholder = "+00"
|
|
19307
|
+
codePlaceholder = "+00",
|
|
19308
|
+
defaultCode
|
|
19330
19309
|
}, ref) => {
|
|
19331
|
-
const inputId =
|
|
19332
|
-
const
|
|
19310
|
+
const inputId = React79.useId();
|
|
19311
|
+
const effectiveCode = value?.code || defaultCode || "";
|
|
19312
|
+
const codeOptions = React79.useMemo(
|
|
19333
19313
|
() => options.map((option) => ({
|
|
19334
19314
|
value: option.value,
|
|
19335
19315
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19337,26 +19317,26 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19337
19317
|
})),
|
|
19338
19318
|
[options]
|
|
19339
19319
|
);
|
|
19340
|
-
const selectedCodeOption =
|
|
19341
|
-
() => codeOptions.find((option) => option.value ===
|
|
19342
|
-
[codeOptions,
|
|
19320
|
+
const selectedCodeOption = React79.useMemo(
|
|
19321
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19322
|
+
[codeOptions, effectiveCode]
|
|
19343
19323
|
);
|
|
19344
|
-
const combinedValue =
|
|
19324
|
+
const combinedValue = effectiveCode || value?.number ? `${effectiveCode}${value?.number ?? ""}` : "";
|
|
19345
19325
|
const hasInvalidState = Boolean(error) || Boolean(invalid);
|
|
19346
19326
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
19347
19327
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
19348
19328
|
return /* @__PURE__ */ jsxs123("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
19349
|
-
name && /* @__PURE__ */
|
|
19350
|
-
codeName && /* @__PURE__ */
|
|
19329
|
+
name && /* @__PURE__ */ jsx190("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
19330
|
+
codeName && /* @__PURE__ */ jsx190(
|
|
19351
19331
|
"input",
|
|
19352
19332
|
{
|
|
19353
19333
|
type: "hidden",
|
|
19354
19334
|
name: codeName,
|
|
19355
|
-
value:
|
|
19335
|
+
value: effectiveCode,
|
|
19356
19336
|
disabled
|
|
19357
19337
|
}
|
|
19358
19338
|
),
|
|
19359
|
-
numberName && /* @__PURE__ */
|
|
19339
|
+
numberName && /* @__PURE__ */ jsx190(
|
|
19360
19340
|
"input",
|
|
19361
19341
|
{
|
|
19362
19342
|
type: "hidden",
|
|
@@ -19365,7 +19345,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19365
19345
|
disabled
|
|
19366
19346
|
}
|
|
19367
19347
|
),
|
|
19368
|
-
topLabel && /* @__PURE__ */
|
|
19348
|
+
topLabel && /* @__PURE__ */ jsx190(
|
|
19369
19349
|
"label",
|
|
19370
19350
|
{
|
|
19371
19351
|
htmlFor: inputId,
|
|
@@ -19374,7 +19354,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19374
19354
|
}
|
|
19375
19355
|
),
|
|
19376
19356
|
/* @__PURE__ */ jsxs123("div", { className: "flex items-stretch", children: [
|
|
19377
|
-
/* @__PURE__ */
|
|
19357
|
+
/* @__PURE__ */ jsx190(
|
|
19378
19358
|
AirbnbSelect,
|
|
19379
19359
|
{
|
|
19380
19360
|
ref,
|
|
@@ -19424,8 +19404,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19424
19404
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
19425
19405
|
),
|
|
19426
19406
|
children: [
|
|
19427
|
-
/* @__PURE__ */
|
|
19428
|
-
/* @__PURE__ */
|
|
19407
|
+
/* @__PURE__ */ jsx190("span", { children: valueLabel ?? codePlaceholder }),
|
|
19408
|
+
/* @__PURE__ */ jsx190(
|
|
19429
19409
|
ChevronDown6,
|
|
19430
19410
|
{
|
|
19431
19411
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
@@ -19437,7 +19417,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19437
19417
|
)
|
|
19438
19418
|
}
|
|
19439
19419
|
),
|
|
19440
|
-
/* @__PURE__ */
|
|
19420
|
+
/* @__PURE__ */ jsx190(
|
|
19441
19421
|
AirbnbInput,
|
|
19442
19422
|
{
|
|
19443
19423
|
id: inputId,
|
|
@@ -19459,25 +19439,25 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19459
19439
|
contentClassName: "h-[40px] py-2",
|
|
19460
19440
|
inputClassName: "text-[16px] leading-7",
|
|
19461
19441
|
onChange: (event) => onChange({
|
|
19462
|
-
code:
|
|
19442
|
+
code: effectiveCode,
|
|
19463
19443
|
number: event.target.value
|
|
19464
19444
|
}),
|
|
19465
19445
|
onBlur
|
|
19466
19446
|
}
|
|
19467
19447
|
)
|
|
19468
19448
|
] }),
|
|
19469
|
-
error && /* @__PURE__ */
|
|
19449
|
+
error && /* @__PURE__ */ jsx190(FieldErrorMessage, { message: error })
|
|
19470
19450
|
] });
|
|
19471
19451
|
}
|
|
19472
19452
|
);
|
|
19473
19453
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19474
19454
|
|
|
19475
19455
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19476
|
-
import * as
|
|
19456
|
+
import * as React80 from "react";
|
|
19477
19457
|
import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
|
|
19478
19458
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
19479
19459
|
import { useCallback as useCallback57 } from "react";
|
|
19480
|
-
import { jsx as
|
|
19460
|
+
import { jsx as jsx191, jsxs as jsxs124 } from "react/jsx-runtime";
|
|
19481
19461
|
var ROW_HEIGHT = 48;
|
|
19482
19462
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
19483
19463
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -19517,13 +19497,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19517
19497
|
loadingMessage
|
|
19518
19498
|
}, ref) => {
|
|
19519
19499
|
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 =
|
|
19500
|
+
const reactId = React80.useId();
|
|
19501
|
+
const [open, setOpen] = React80.useState(false);
|
|
19502
|
+
const [internalSearchValue, setInternalSearchValue] = React80.useState("");
|
|
19503
|
+
const [highlightedIndex, setHighlightedIndex] = React80.useState(-1);
|
|
19504
|
+
const containerRef = React80.useRef(null);
|
|
19505
|
+
const triggerRef = React80.useRef(null);
|
|
19506
|
+
const inputRef = React80.useRef(null);
|
|
19527
19507
|
const listboxId = `${reactId}-listbox`;
|
|
19528
19508
|
const labelId = `${reactId}-label`;
|
|
19529
19509
|
const valueId = `${reactId}-value`;
|
|
@@ -19532,13 +19512,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19532
19512
|
const searchInputId = `${reactId}-search`;
|
|
19533
19513
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19534
19514
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19535
|
-
const visibleOptions =
|
|
19515
|
+
const visibleOptions = React80.useMemo(() => {
|
|
19536
19516
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19537
19517
|
return options;
|
|
19538
19518
|
}
|
|
19539
19519
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19540
19520
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19541
|
-
const selectedIndex =
|
|
19521
|
+
const selectedIndex = React80.useMemo(
|
|
19542
19522
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19543
19523
|
[value?.value, visibleOptions]
|
|
19544
19524
|
);
|
|
@@ -19564,7 +19544,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19564
19544
|
},
|
|
19565
19545
|
[handleOnOpenChange]
|
|
19566
19546
|
);
|
|
19567
|
-
|
|
19547
|
+
React80.useEffect(() => {
|
|
19568
19548
|
if (isBlocked) {
|
|
19569
19549
|
setSelectOpen(false);
|
|
19570
19550
|
return;
|
|
@@ -19577,7 +19557,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19577
19557
|
window.cancelAnimationFrame(frameId);
|
|
19578
19558
|
};
|
|
19579
19559
|
}, [isBlocked, open, setSelectOpen]);
|
|
19580
|
-
|
|
19560
|
+
React80.useEffect(() => {
|
|
19581
19561
|
if (!open) {
|
|
19582
19562
|
setHighlightedIndex(-1);
|
|
19583
19563
|
return;
|
|
@@ -19645,7 +19625,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19645
19625
|
}
|
|
19646
19626
|
}
|
|
19647
19627
|
}
|
|
19648
|
-
const content = /* @__PURE__ */
|
|
19628
|
+
const content = /* @__PURE__ */ jsx191(
|
|
19649
19629
|
AirbnbSearchableSelectContent,
|
|
19650
19630
|
{
|
|
19651
19631
|
inputId: searchInputId,
|
|
@@ -19672,10 +19652,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19672
19652
|
onOptionHover: setHighlightedIndex
|
|
19673
19653
|
}
|
|
19674
19654
|
);
|
|
19675
|
-
|
|
19655
|
+
React80.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
19676
19656
|
return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
19677
|
-
name && /* @__PURE__ */
|
|
19678
|
-
/* @__PURE__ */
|
|
19657
|
+
name && /* @__PURE__ */ jsx191("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19658
|
+
/* @__PURE__ */ jsx191(
|
|
19679
19659
|
AirbnbFieldTrigger,
|
|
19680
19660
|
{
|
|
19681
19661
|
id: `${reactId}-trigger`,
|
|
@@ -19709,7 +19689,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19709
19689
|
},
|
|
19710
19690
|
onKeyDown: handleTriggerKeyDown,
|
|
19711
19691
|
onBlur,
|
|
19712
|
-
trailingAdornment: /* @__PURE__ */
|
|
19692
|
+
trailingAdornment: /* @__PURE__ */ jsx191(
|
|
19713
19693
|
ChevronDown7,
|
|
19714
19694
|
{
|
|
19715
19695
|
className: cn(
|
|
@@ -19720,7 +19700,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19720
19700
|
)
|
|
19721
19701
|
}
|
|
19722
19702
|
),
|
|
19723
|
-
isMobile3 ? /* @__PURE__ */
|
|
19703
|
+
isMobile3 ? /* @__PURE__ */ jsx191(
|
|
19724
19704
|
Drawer,
|
|
19725
19705
|
{
|
|
19726
19706
|
open,
|
|
@@ -19733,12 +19713,12 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19733
19713
|
closeSelect();
|
|
19734
19714
|
},
|
|
19735
19715
|
children: /* @__PURE__ */ jsxs124(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
19736
|
-
/* @__PURE__ */
|
|
19737
|
-
/* @__PURE__ */
|
|
19738
|
-
/* @__PURE__ */
|
|
19716
|
+
/* @__PURE__ */ jsx191(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
19717
|
+
/* @__PURE__ */ jsx191(DrawerDescription, { className: "sr-only", children: label }),
|
|
19718
|
+
/* @__PURE__ */ jsx191("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
19739
19719
|
] })
|
|
19740
19720
|
}
|
|
19741
|
-
) : open ? /* @__PURE__ */
|
|
19721
|
+
) : open ? /* @__PURE__ */ jsx191(
|
|
19742
19722
|
"div",
|
|
19743
19723
|
{
|
|
19744
19724
|
className: cn(
|
|
@@ -19750,7 +19730,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19750
19730
|
) : null
|
|
19751
19731
|
] });
|
|
19752
19732
|
};
|
|
19753
|
-
var AirbnbSearchableSelect =
|
|
19733
|
+
var AirbnbSearchableSelect = React80.forwardRef(
|
|
19754
19734
|
AirbnbSearchableSelectInternal
|
|
19755
19735
|
);
|
|
19756
19736
|
function AirbnbSearchableSelectContent({
|
|
@@ -19777,9 +19757,9 @@ function AirbnbSearchableSelectContent({
|
|
|
19777
19757
|
onOptionClick,
|
|
19778
19758
|
onOptionHover
|
|
19779
19759
|
}) {
|
|
19780
|
-
const listRef =
|
|
19781
|
-
const lastLoadMoreOptionsLengthRef =
|
|
19782
|
-
const previousHighlightedIndexRef =
|
|
19760
|
+
const listRef = React80.useRef(null);
|
|
19761
|
+
const lastLoadMoreOptionsLengthRef = React80.useRef(null);
|
|
19762
|
+
const previousHighlightedIndexRef = React80.useRef(highlightedIndex);
|
|
19783
19763
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
19784
19764
|
const virtualizer = useVirtualizer3({
|
|
19785
19765
|
count: rowCount,
|
|
@@ -19790,7 +19770,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19790
19770
|
const virtualItems = virtualizer.getVirtualItems();
|
|
19791
19771
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
19792
19772
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
19793
|
-
|
|
19773
|
+
React80.useEffect(() => {
|
|
19794
19774
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
19795
19775
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
19796
19776
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -19798,7 +19778,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19798
19778
|
onLoadMore?.();
|
|
19799
19779
|
}
|
|
19800
19780
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
19801
|
-
|
|
19781
|
+
React80.useEffect(() => {
|
|
19802
19782
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
19803
19783
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
19804
19784
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -19807,14 +19787,14 @@ function AirbnbSearchableSelectContent({
|
|
|
19807
19787
|
}, [highlightedIndex, virtualizer]);
|
|
19808
19788
|
return /* @__PURE__ */ jsxs124("div", { className: "p-2", children: [
|
|
19809
19789
|
/* @__PURE__ */ jsxs124("div", { className: "relative mb-2", children: [
|
|
19810
|
-
/* @__PURE__ */
|
|
19790
|
+
/* @__PURE__ */ jsx191(
|
|
19811
19791
|
Search4,
|
|
19812
19792
|
{
|
|
19813
19793
|
"aria-hidden": "true",
|
|
19814
19794
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
19815
19795
|
}
|
|
19816
19796
|
),
|
|
19817
|
-
/* @__PURE__ */
|
|
19797
|
+
/* @__PURE__ */ jsx191(
|
|
19818
19798
|
"input",
|
|
19819
19799
|
{
|
|
19820
19800
|
id: inputId,
|
|
@@ -19833,7 +19813,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19833
19813
|
}
|
|
19834
19814
|
)
|
|
19835
19815
|
] }),
|
|
19836
|
-
loading && options.length === 0 ? /* @__PURE__ */
|
|
19816
|
+
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
19817
|
"div",
|
|
19838
19818
|
{
|
|
19839
19819
|
id: listboxId,
|
|
@@ -19842,7 +19822,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19842
19822
|
"aria-labelledby": labelId,
|
|
19843
19823
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
19844
19824
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
19845
|
-
children: /* @__PURE__ */
|
|
19825
|
+
children: /* @__PURE__ */ jsx191(
|
|
19846
19826
|
"div",
|
|
19847
19827
|
{
|
|
19848
19828
|
className: "relative w-full",
|
|
@@ -19850,7 +19830,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19850
19830
|
children: virtualItems.map((virtualItem) => {
|
|
19851
19831
|
const option = options[virtualItem.index];
|
|
19852
19832
|
if (!option) {
|
|
19853
|
-
return /* @__PURE__ */
|
|
19833
|
+
return /* @__PURE__ */ jsx191(
|
|
19854
19834
|
"div",
|
|
19855
19835
|
{
|
|
19856
19836
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -19865,7 +19845,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19865
19845
|
}
|
|
19866
19846
|
const isSelected = value?.value === option.value;
|
|
19867
19847
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
19868
|
-
return /* @__PURE__ */
|
|
19848
|
+
return /* @__PURE__ */ jsx191(
|
|
19869
19849
|
"button",
|
|
19870
19850
|
{
|
|
19871
19851
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -19887,7 +19867,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19887
19867
|
height: `${virtualItem.size}px`,
|
|
19888
19868
|
transform: `translateY(${virtualItem.start}px)`
|
|
19889
19869
|
},
|
|
19890
|
-
children: /* @__PURE__ */
|
|
19870
|
+
children: /* @__PURE__ */ jsx191("span", { className: "truncate text-center", children: String(option.label) })
|
|
19891
19871
|
},
|
|
19892
19872
|
`${String(option.value)}-${virtualItem.index}`
|
|
19893
19873
|
);
|
|
@@ -19916,16 +19896,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
19916
19896
|
}
|
|
19917
19897
|
|
|
19918
19898
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
19919
|
-
import * as
|
|
19899
|
+
import * as React81 from "react";
|
|
19920
19900
|
import { useTranslation as useTranslation45 } from "react-i18next";
|
|
19921
19901
|
import { Search as Search5, X as X11 } from "lucide-react";
|
|
19922
|
-
import { jsx as
|
|
19923
|
-
var AirbnbSearchInput =
|
|
19902
|
+
import { jsx as jsx192, jsxs as jsxs125 } from "react/jsx-runtime";
|
|
19903
|
+
var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
19924
19904
|
const { t } = useTranslation45();
|
|
19925
19905
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
19926
19906
|
return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
19927
|
-
/* @__PURE__ */
|
|
19928
|
-
/* @__PURE__ */
|
|
19907
|
+
/* @__PURE__ */ jsx192(Search5, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
|
|
19908
|
+
/* @__PURE__ */ jsx192(
|
|
19929
19909
|
"input",
|
|
19930
19910
|
{
|
|
19931
19911
|
...props,
|
|
@@ -19944,13 +19924,13 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
19944
19924
|
)
|
|
19945
19925
|
}
|
|
19946
19926
|
),
|
|
19947
|
-
onReset && /* @__PURE__ */
|
|
19927
|
+
onReset && /* @__PURE__ */ jsx192(
|
|
19948
19928
|
Button,
|
|
19949
19929
|
{
|
|
19950
19930
|
variant: "ghost",
|
|
19951
19931
|
onClick: onReset,
|
|
19952
19932
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
19953
|
-
children: /* @__PURE__ */
|
|
19933
|
+
children: /* @__PURE__ */ jsx192(X11, { className: "h-5 w-5" })
|
|
19954
19934
|
}
|
|
19955
19935
|
)
|
|
19956
19936
|
] });
|
|
@@ -19958,11 +19938,11 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
19958
19938
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
19959
19939
|
|
|
19960
19940
|
// src/airbnb-fields/switch/Switch.tsx
|
|
19961
|
-
import * as
|
|
19941
|
+
import * as React82 from "react";
|
|
19962
19942
|
import * as SwitchPrimitives2 from "@radix-ui/react-switch";
|
|
19963
19943
|
import { Check as Check7 } from "lucide-react";
|
|
19964
|
-
import { Fragment as
|
|
19965
|
-
var AirbnbSwitch =
|
|
19944
|
+
import { Fragment as Fragment18, jsx as jsx193, jsxs as jsxs126 } from "react/jsx-runtime";
|
|
19945
|
+
var AirbnbSwitch = React82.forwardRef(
|
|
19966
19946
|
({
|
|
19967
19947
|
className,
|
|
19968
19948
|
value,
|
|
@@ -19976,9 +19956,9 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
19976
19956
|
wrapperClassName,
|
|
19977
19957
|
...props
|
|
19978
19958
|
}, ref) => {
|
|
19979
|
-
const generatedId =
|
|
19959
|
+
const generatedId = React82.useId();
|
|
19980
19960
|
const fieldId = id || generatedId;
|
|
19981
|
-
const switchElement = /* @__PURE__ */
|
|
19961
|
+
const switchElement = /* @__PURE__ */ jsx193(
|
|
19982
19962
|
SwitchPrimitives2.Root,
|
|
19983
19963
|
{
|
|
19984
19964
|
ref,
|
|
@@ -19998,14 +19978,14 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
19998
19978
|
"aria-busy": loading,
|
|
19999
19979
|
"aria-readonly": readOnly,
|
|
20000
19980
|
...props,
|
|
20001
|
-
children: /* @__PURE__ */
|
|
19981
|
+
children: /* @__PURE__ */ jsx193(
|
|
20002
19982
|
SwitchPrimitives2.Thumb,
|
|
20003
19983
|
{
|
|
20004
19984
|
className: cn(
|
|
20005
19985
|
"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
19986
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
20007
19987
|
),
|
|
20008
|
-
children: /* @__PURE__ */
|
|
19988
|
+
children: /* @__PURE__ */ jsx193(
|
|
20009
19989
|
Check7,
|
|
20010
19990
|
{
|
|
20011
19991
|
"aria-hidden": "true",
|
|
@@ -20020,10 +20000,10 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20020
20000
|
if (!label && !error) {
|
|
20021
20001
|
return switchElement;
|
|
20022
20002
|
}
|
|
20023
|
-
return /* @__PURE__ */ jsxs126(
|
|
20003
|
+
return /* @__PURE__ */ jsxs126(Fragment18, { children: [
|
|
20024
20004
|
/* @__PURE__ */ jsxs126("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
|
|
20025
20005
|
switchElement,
|
|
20026
|
-
label && /* @__PURE__ */
|
|
20006
|
+
label && /* @__PURE__ */ jsx193(
|
|
20027
20007
|
Label,
|
|
20028
20008
|
{
|
|
20029
20009
|
htmlFor: fieldId,
|
|
@@ -20035,7 +20015,7 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20035
20015
|
}
|
|
20036
20016
|
)
|
|
20037
20017
|
] }),
|
|
20038
|
-
error && /* @__PURE__ */
|
|
20018
|
+
error && /* @__PURE__ */ jsx193(ErrorMessage, { disabled, children: error })
|
|
20039
20019
|
] });
|
|
20040
20020
|
}
|
|
20041
20021
|
);
|
|
@@ -20243,7 +20223,6 @@ export {
|
|
|
20243
20223
|
ScrollBar,
|
|
20244
20224
|
SearchButton,
|
|
20245
20225
|
SearchInput,
|
|
20246
|
-
SearchingSelect,
|
|
20247
20226
|
Section,
|
|
20248
20227
|
SectionGroup,
|
|
20249
20228
|
SectionTag,
|