@chekinapp/ui 0.0.108 → 0.0.109
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 +360 -303
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +362 -305
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -12321,10 +12321,75 @@ function ResponsiveDropdown({
|
|
|
12321
12321
|
}
|
|
12322
12322
|
|
|
12323
12323
|
// src/dashboard/input/Input.tsx
|
|
12324
|
-
var
|
|
12324
|
+
var React44 = __toESM(require("react"), 1);
|
|
12325
12325
|
var import_lucide_react42 = require("lucide-react");
|
|
12326
12326
|
var import_react_i18next26 = require("react-i18next");
|
|
12327
12327
|
|
|
12328
|
+
// src/dashboard/input/useInputValueState.ts
|
|
12329
|
+
var React43 = __toESM(require("react"), 1);
|
|
12330
|
+
var isEmptyValue = (value) => {
|
|
12331
|
+
if (value === void 0 || value === null) return true;
|
|
12332
|
+
return String(value).length === 0;
|
|
12333
|
+
};
|
|
12334
|
+
var getInputEmptyState = ({
|
|
12335
|
+
empty,
|
|
12336
|
+
defaultValue,
|
|
12337
|
+
value
|
|
12338
|
+
}) => {
|
|
12339
|
+
if (typeof empty !== "undefined") return empty;
|
|
12340
|
+
if (typeof value !== "undefined") return isEmptyValue(value);
|
|
12341
|
+
return isEmptyValue(defaultValue);
|
|
12342
|
+
};
|
|
12343
|
+
function useInputValueState({
|
|
12344
|
+
empty,
|
|
12345
|
+
value,
|
|
12346
|
+
defaultValue
|
|
12347
|
+
}) {
|
|
12348
|
+
const inputRef = React43.useRef(null);
|
|
12349
|
+
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
12350
|
+
const propsAreEmpty = getInputEmptyState({ empty, value, defaultValue });
|
|
12351
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React43.useState(propsAreEmpty);
|
|
12352
|
+
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
12353
|
+
const setNativeValue = React43.useCallback(
|
|
12354
|
+
(nextValue) => {
|
|
12355
|
+
if (isControlled) return;
|
|
12356
|
+
const nextIsEmpty = nextValue.length === 0;
|
|
12357
|
+
setNativeIsEmpty(
|
|
12358
|
+
(prevIsEmpty) => prevIsEmpty === nextIsEmpty ? prevIsEmpty : nextIsEmpty
|
|
12359
|
+
);
|
|
12360
|
+
},
|
|
12361
|
+
[isControlled]
|
|
12362
|
+
);
|
|
12363
|
+
const syncValueState = React43.useCallback(() => {
|
|
12364
|
+
if (!inputRef.current) return;
|
|
12365
|
+
setNativeValue(inputRef.current.value);
|
|
12366
|
+
}, [setNativeValue]);
|
|
12367
|
+
React43.useLayoutEffect(() => {
|
|
12368
|
+
syncValueState();
|
|
12369
|
+
});
|
|
12370
|
+
React43.useEffect(() => {
|
|
12371
|
+
const input = inputRef.current;
|
|
12372
|
+
const form = input?.form;
|
|
12373
|
+
if (isControlled || !form) return;
|
|
12374
|
+
const handleReset = () => {
|
|
12375
|
+
if (typeof window !== "undefined" && window.requestAnimationFrame) {
|
|
12376
|
+
window.requestAnimationFrame(syncValueState);
|
|
12377
|
+
return;
|
|
12378
|
+
}
|
|
12379
|
+
globalThis.setTimeout(syncValueState, 0);
|
|
12380
|
+
};
|
|
12381
|
+
form.addEventListener("reset", handleReset);
|
|
12382
|
+
return () => form.removeEventListener("reset", handleReset);
|
|
12383
|
+
}, [isControlled, syncValueState]);
|
|
12384
|
+
return {
|
|
12385
|
+
inputRef,
|
|
12386
|
+
isControlled,
|
|
12387
|
+
isEmpty,
|
|
12388
|
+
setNativeValue,
|
|
12389
|
+
syncValueState
|
|
12390
|
+
};
|
|
12391
|
+
}
|
|
12392
|
+
|
|
12328
12393
|
// src/dashboard/_fieldset/Fieldset.tsx
|
|
12329
12394
|
var import_jsx_runtime144 = require("react/jsx-runtime");
|
|
12330
12395
|
function Fieldset({
|
|
@@ -12420,17 +12485,7 @@ function Fieldset({
|
|
|
12420
12485
|
|
|
12421
12486
|
// src/dashboard/input/Input.tsx
|
|
12422
12487
|
var import_jsx_runtime145 = require("react/jsx-runtime");
|
|
12423
|
-
var
|
|
12424
|
-
empty,
|
|
12425
|
-
defaultValue,
|
|
12426
|
-
value
|
|
12427
|
-
}) => {
|
|
12428
|
-
if (typeof empty !== "undefined") return empty;
|
|
12429
|
-
if (value === 0 || defaultValue === 0) return false;
|
|
12430
|
-
return !value && !defaultValue;
|
|
12431
|
-
};
|
|
12432
|
-
var checkInputValueIfEmpty = (value) => value.length === 0;
|
|
12433
|
-
var Input = React43.forwardRef(
|
|
12488
|
+
var Input = React44.forwardRef(
|
|
12434
12489
|
({
|
|
12435
12490
|
value,
|
|
12436
12491
|
defaultValue,
|
|
@@ -12468,18 +12523,18 @@ var Input = React43.forwardRef(
|
|
|
12468
12523
|
renderErrorMessage = true,
|
|
12469
12524
|
...props
|
|
12470
12525
|
}, ref) => {
|
|
12471
|
-
const generatedId =
|
|
12526
|
+
const generatedId = React44.useId();
|
|
12472
12527
|
const inputId = id ?? name ?? generatedId;
|
|
12473
12528
|
const errorId = `${inputId}-error`;
|
|
12474
12529
|
const { t } = (0, import_react_i18next26.useTranslation)();
|
|
12475
|
-
const
|
|
12476
|
-
|
|
12477
|
-
|
|
12478
|
-
|
|
12479
|
-
|
|
12480
|
-
const [
|
|
12481
|
-
const [
|
|
12482
|
-
const
|
|
12530
|
+
const { inputRef, isControlled, isEmpty, setNativeValue, syncValueState } = useInputValueState({
|
|
12531
|
+
empty,
|
|
12532
|
+
value,
|
|
12533
|
+
defaultValue
|
|
12534
|
+
});
|
|
12535
|
+
const [inputType, setInputType] = React44.useState(type);
|
|
12536
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React44.useState(false);
|
|
12537
|
+
const [isFocused, setIsFocused] = React44.useState(false);
|
|
12483
12538
|
const combinedInputRef = useCombinedRef(inputRef, ref);
|
|
12484
12539
|
const prevInputType = usePrevious(inputType);
|
|
12485
12540
|
const isPasswordReveal = (prevInputType === "password" || type === "password") && !isEmpty;
|
|
@@ -12494,13 +12549,13 @@ var Input = React43.forwardRef(
|
|
|
12494
12549
|
setIsPasswordRevealed(true);
|
|
12495
12550
|
}
|
|
12496
12551
|
};
|
|
12497
|
-
|
|
12552
|
+
React44.useEffect(() => {
|
|
12498
12553
|
setInputType(type);
|
|
12499
12554
|
}, [type]);
|
|
12500
12555
|
const handleChange = (event) => {
|
|
12501
12556
|
if (readOnly || disabled) return;
|
|
12502
|
-
if (!
|
|
12503
|
-
|
|
12557
|
+
if (!isControlled) {
|
|
12558
|
+
setNativeValue(event.currentTarget.value);
|
|
12504
12559
|
}
|
|
12505
12560
|
onChange?.(event);
|
|
12506
12561
|
};
|
|
@@ -12511,10 +12566,12 @@ var Input = React43.forwardRef(
|
|
|
12511
12566
|
const handleFocus = (event) => {
|
|
12512
12567
|
if (readOnly || disabled) return;
|
|
12513
12568
|
onFocus?.(event);
|
|
12569
|
+
syncValueState();
|
|
12514
12570
|
setIsFocused(true);
|
|
12515
12571
|
};
|
|
12516
12572
|
const handleBlur = (event) => {
|
|
12517
12573
|
onBlur?.(event);
|
|
12574
|
+
syncValueState();
|
|
12518
12575
|
setIsFocused(false);
|
|
12519
12576
|
};
|
|
12520
12577
|
const showRightPaddingForReset = Boolean(onReset);
|
|
@@ -12691,7 +12748,7 @@ var Input = React43.forwardRef(
|
|
|
12691
12748
|
Input.displayName = "Input";
|
|
12692
12749
|
|
|
12693
12750
|
// src/dashboard/select/Select.tsx
|
|
12694
|
-
var
|
|
12751
|
+
var React48 = __toESM(require("react"), 1);
|
|
12695
12752
|
var import_react_i18next30 = require("react-i18next");
|
|
12696
12753
|
|
|
12697
12754
|
// src/dashboard/_select-internals/SelectFieldShell.tsx
|
|
@@ -13042,14 +13099,14 @@ function SelectTrigger({
|
|
|
13042
13099
|
}
|
|
13043
13100
|
|
|
13044
13101
|
// src/dashboard/_select-internals/useSelectIds.ts
|
|
13045
|
-
var
|
|
13102
|
+
var React45 = __toESM(require("react"), 1);
|
|
13046
13103
|
function useSelectIds({
|
|
13047
13104
|
name,
|
|
13048
13105
|
hasValue,
|
|
13049
13106
|
error,
|
|
13050
13107
|
hideErrorMessage
|
|
13051
13108
|
}) {
|
|
13052
|
-
const reactId =
|
|
13109
|
+
const reactId = React45.useId().replace(/:/g, "");
|
|
13053
13110
|
const baseId = name ? `dash-select-${name}` : `dash-select-${reactId}`;
|
|
13054
13111
|
const triggerId = `${baseId}-trigger`;
|
|
13055
13112
|
const labelId = `${baseId}-label`;
|
|
@@ -13059,7 +13116,7 @@ function useSelectIds({
|
|
|
13059
13116
|
const listboxId = `${baseId}-listbox`;
|
|
13060
13117
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
13061
13118
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
13062
|
-
const getOptionId2 =
|
|
13119
|
+
const getOptionId2 = React45.useCallback(
|
|
13063
13120
|
(index) => `${baseId}-option-${index}`,
|
|
13064
13121
|
[baseId]
|
|
13065
13122
|
);
|
|
@@ -13077,21 +13134,21 @@ function useSelectIds({
|
|
|
13077
13134
|
}
|
|
13078
13135
|
|
|
13079
13136
|
// src/dashboard/_select-internals/useSelectMenuState.ts
|
|
13080
|
-
var
|
|
13137
|
+
var React46 = __toESM(require("react"), 1);
|
|
13081
13138
|
function useSelectMenuState({
|
|
13082
13139
|
isBlocked,
|
|
13083
13140
|
isMobile: isMobile3,
|
|
13084
13141
|
onOutsideClick
|
|
13085
13142
|
}) {
|
|
13086
|
-
const containerRef =
|
|
13087
|
-
const [isOpen, setIsOpen] =
|
|
13088
|
-
const openMenu =
|
|
13143
|
+
const containerRef = React46.useRef(null);
|
|
13144
|
+
const [isOpen, setIsOpen] = React46.useState(false);
|
|
13145
|
+
const openMenu = React46.useCallback(() => {
|
|
13089
13146
|
setIsOpen(true);
|
|
13090
13147
|
}, []);
|
|
13091
|
-
const closeMenu =
|
|
13148
|
+
const closeMenu = React46.useCallback(() => {
|
|
13092
13149
|
setIsOpen(false);
|
|
13093
13150
|
}, []);
|
|
13094
|
-
const toggleMenu =
|
|
13151
|
+
const toggleMenu = React46.useCallback(() => {
|
|
13095
13152
|
if (isBlocked) return;
|
|
13096
13153
|
setIsOpen((prev) => !prev);
|
|
13097
13154
|
}, [isBlocked]);
|
|
@@ -13103,25 +13160,25 @@ function useSelectMenuState({
|
|
|
13103
13160
|
},
|
|
13104
13161
|
isDisabled: !isOpen || isMobile3
|
|
13105
13162
|
});
|
|
13106
|
-
|
|
13163
|
+
React46.useEffect(() => {
|
|
13107
13164
|
if (isBlocked) setIsOpen(false);
|
|
13108
13165
|
}, [isBlocked]);
|
|
13109
13166
|
return { containerRef, isOpen, openMenu, closeMenu, toggleMenu, setIsOpen };
|
|
13110
13167
|
}
|
|
13111
13168
|
|
|
13112
13169
|
// src/dashboard/_select-internals/useSelectSearch.ts
|
|
13113
|
-
var
|
|
13170
|
+
var React47 = __toESM(require("react"), 1);
|
|
13114
13171
|
function useSelectSearch({
|
|
13115
13172
|
options,
|
|
13116
13173
|
searchable = true,
|
|
13117
13174
|
filterOption = defaultFilterOption
|
|
13118
13175
|
}) {
|
|
13119
|
-
const [searchValue, setSearchValue] =
|
|
13120
|
-
const filteredOptions =
|
|
13176
|
+
const [searchValue, setSearchValue] = React47.useState("");
|
|
13177
|
+
const filteredOptions = React47.useMemo(() => {
|
|
13121
13178
|
if (!searchable || !searchValue) return options;
|
|
13122
13179
|
return options.filter((option) => filterOption(option, searchValue));
|
|
13123
13180
|
}, [options, searchable, searchValue, filterOption]);
|
|
13124
|
-
const clearSearch =
|
|
13181
|
+
const clearSearch = React47.useCallback(() => setSearchValue(""), []);
|
|
13125
13182
|
return { searchValue, setSearchValue, filteredOptions, clearSearch };
|
|
13126
13183
|
}
|
|
13127
13184
|
|
|
@@ -13155,11 +13212,11 @@ function SelectInternal({
|
|
|
13155
13212
|
filterOption,
|
|
13156
13213
|
helperText
|
|
13157
13214
|
}, ref) {
|
|
13158
|
-
const triggerRef =
|
|
13159
|
-
const searchInputRef =
|
|
13160
|
-
const listRef =
|
|
13161
|
-
const optionRefs =
|
|
13162
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
13215
|
+
const triggerRef = React48.useRef(null);
|
|
13216
|
+
const searchInputRef = React48.useRef(null);
|
|
13217
|
+
const listRef = React48.useRef(null);
|
|
13218
|
+
const optionRefs = React48.useRef([]);
|
|
13219
|
+
const [highlightedIndex, setHighlightedIndex] = React48.useState(-1);
|
|
13163
13220
|
const isMobile3 = useIsMobile();
|
|
13164
13221
|
const { t } = (0, import_react_i18next30.useTranslation)();
|
|
13165
13222
|
const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
|
|
@@ -13179,8 +13236,8 @@ function SelectInternal({
|
|
|
13179
13236
|
searchable,
|
|
13180
13237
|
filterOption
|
|
13181
13238
|
});
|
|
13182
|
-
|
|
13183
|
-
|
|
13239
|
+
React48.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
13240
|
+
React48.useEffect(() => {
|
|
13184
13241
|
if (!isOpen) {
|
|
13185
13242
|
setSearchValue("");
|
|
13186
13243
|
setHighlightedIndex(-1);
|
|
@@ -13195,11 +13252,11 @@ function SelectInternal({
|
|
|
13195
13252
|
return () => window.cancelAnimationFrame(frame);
|
|
13196
13253
|
}
|
|
13197
13254
|
}, [isOpen, filteredOptions, searchable, value, setSearchValue]);
|
|
13198
|
-
|
|
13255
|
+
React48.useEffect(() => {
|
|
13199
13256
|
if (!isOpen || highlightedIndex < 0) return;
|
|
13200
13257
|
optionRefs.current[highlightedIndex]?.scrollIntoView({ block: "nearest" });
|
|
13201
13258
|
}, [highlightedIndex, isOpen]);
|
|
13202
|
-
|
|
13259
|
+
React48.useEffect(
|
|
13203
13260
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
13204
13261
|
if (value?.value === void 0 || value.value === null || value.label !== "")
|
|
13205
13262
|
return;
|
|
@@ -13357,12 +13414,12 @@ function SelectInternal({
|
|
|
13357
13414
|
}
|
|
13358
13415
|
);
|
|
13359
13416
|
}
|
|
13360
|
-
var Select =
|
|
13417
|
+
var Select = React48.forwardRef(
|
|
13361
13418
|
SelectInternal
|
|
13362
13419
|
);
|
|
13363
13420
|
|
|
13364
13421
|
// src/dashboard/multi-select/MultiSelect.tsx
|
|
13365
|
-
var
|
|
13422
|
+
var React49 = __toESM(require("react"), 1);
|
|
13366
13423
|
var import_lucide_react46 = require("lucide-react");
|
|
13367
13424
|
var import_react_i18next32 = require("react-i18next");
|
|
13368
13425
|
|
|
@@ -13430,15 +13487,15 @@ function MultiSelectInternal({
|
|
|
13430
13487
|
formatCreateLabel = (input) => `Create "${input}"`,
|
|
13431
13488
|
isValidNewOption
|
|
13432
13489
|
}, ref) {
|
|
13433
|
-
const inputRef =
|
|
13434
|
-
const mobileSearchInputRef =
|
|
13435
|
-
const listRef =
|
|
13436
|
-
const optionRefs =
|
|
13437
|
-
const [isFocused, setIsFocused] =
|
|
13438
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
13490
|
+
const inputRef = React49.useRef(null);
|
|
13491
|
+
const mobileSearchInputRef = React49.useRef(null);
|
|
13492
|
+
const listRef = React49.useRef(null);
|
|
13493
|
+
const optionRefs = React49.useRef([]);
|
|
13494
|
+
const [isFocused, setIsFocused] = React49.useState(false);
|
|
13495
|
+
const [highlightedIndex, setHighlightedIndex] = React49.useState(-1);
|
|
13439
13496
|
const isMobile3 = useIsMobile();
|
|
13440
13497
|
const { t } = (0, import_react_i18next32.useTranslation)();
|
|
13441
|
-
const selectedValues =
|
|
13498
|
+
const selectedValues = React49.useMemo(() => value ?? [], [value]);
|
|
13442
13499
|
const hasValue = selectedValues.length > 0;
|
|
13443
13500
|
const isEmpty = !hasValue;
|
|
13444
13501
|
const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
|
|
@@ -13456,7 +13513,7 @@ function MultiSelectInternal({
|
|
|
13456
13513
|
filterOption
|
|
13457
13514
|
});
|
|
13458
13515
|
const trimmedSearch = searchValue.trim();
|
|
13459
|
-
const canCreateNewOption =
|
|
13516
|
+
const canCreateNewOption = React49.useMemo(() => {
|
|
13460
13517
|
if (!isCreatable || !trimmedSearch) return false;
|
|
13461
13518
|
if (isValidNewOption) return isValidNewOption(trimmedSearch, selectedValues, options);
|
|
13462
13519
|
const lower = trimmedSearch.toLowerCase();
|
|
@@ -13468,17 +13525,17 @@ function MultiSelectInternal({
|
|
|
13468
13525
|
);
|
|
13469
13526
|
return !existsInOptions && !existsInSelected;
|
|
13470
13527
|
}, [isCreatable, trimmedSearch, isValidNewOption, options, selectedValues]);
|
|
13471
|
-
|
|
13528
|
+
React49.useImperativeHandle(
|
|
13472
13529
|
ref,
|
|
13473
13530
|
() => containerRef.current
|
|
13474
13531
|
);
|
|
13475
|
-
|
|
13532
|
+
React49.useEffect(() => {
|
|
13476
13533
|
if (!isOpen) {
|
|
13477
13534
|
clearSearch();
|
|
13478
13535
|
setHighlightedIndex(-1);
|
|
13479
13536
|
}
|
|
13480
13537
|
}, [isOpen, clearSearch]);
|
|
13481
|
-
|
|
13538
|
+
React49.useEffect(() => {
|
|
13482
13539
|
if (!isOpen || filteredOptions.length === 0) {
|
|
13483
13540
|
setHighlightedIndex(-1);
|
|
13484
13541
|
return;
|
|
@@ -13488,7 +13545,7 @@ function MultiSelectInternal({
|
|
|
13488
13545
|
return getFirstEnabledOptionIndex(filteredOptions);
|
|
13489
13546
|
});
|
|
13490
13547
|
}, [isOpen, filteredOptions]);
|
|
13491
|
-
|
|
13548
|
+
React49.useEffect(() => {
|
|
13492
13549
|
if (!isOpen || !isMobile3) return;
|
|
13493
13550
|
const frame = window.requestAnimationFrame(
|
|
13494
13551
|
() => mobileSearchInputRef.current?.focus()
|
|
@@ -13522,7 +13579,7 @@ function MultiSelectInternal({
|
|
|
13522
13579
|
onChange([]);
|
|
13523
13580
|
inputRef.current?.focus();
|
|
13524
13581
|
};
|
|
13525
|
-
const createOption =
|
|
13582
|
+
const createOption = React49.useCallback(() => {
|
|
13526
13583
|
if (!canCreateNewOption) return;
|
|
13527
13584
|
const newOption = onCreateOption?.(trimmedSearch) ?? { value: trimmedSearch, label: trimmedSearch };
|
|
13528
13585
|
onChange([...selectedValues, newOption]);
|
|
@@ -13633,7 +13690,7 @@ function MultiSelectInternal({
|
|
|
13633
13690
|
),
|
|
13634
13691
|
children: [
|
|
13635
13692
|
selectedValues.map(
|
|
13636
|
-
(option) => renderChip ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
|
|
13693
|
+
(option) => renderChip ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(React49.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
|
|
13637
13694
|
MultiSelectChip,
|
|
13638
13695
|
{
|
|
13639
13696
|
option,
|
|
@@ -13800,21 +13857,21 @@ function MultiSelectInternal({
|
|
|
13800
13857
|
}
|
|
13801
13858
|
);
|
|
13802
13859
|
}
|
|
13803
|
-
var MultiSelect =
|
|
13860
|
+
var MultiSelect = React49.forwardRef(
|
|
13804
13861
|
MultiSelectInternal
|
|
13805
13862
|
);
|
|
13806
13863
|
|
|
13807
13864
|
// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
|
|
13808
|
-
var
|
|
13865
|
+
var React50 = __toESM(require("react"), 1);
|
|
13809
13866
|
var import_jsx_runtime154 = require("react/jsx-runtime");
|
|
13810
|
-
var CreatableMultiSelect =
|
|
13867
|
+
var CreatableMultiSelect = React50.forwardRef(
|
|
13811
13868
|
function CreatableMultiSelect2(props, ref) {
|
|
13812
13869
|
return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(MultiSelect, { ref, ...props, isCreatable: true });
|
|
13813
13870
|
}
|
|
13814
13871
|
);
|
|
13815
13872
|
|
|
13816
13873
|
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
13817
|
-
var
|
|
13874
|
+
var React51 = __toESM(require("react"), 1);
|
|
13818
13875
|
var import_react_virtual2 = require("@tanstack/react-virtual");
|
|
13819
13876
|
var import_react_i18next33 = require("react-i18next");
|
|
13820
13877
|
|
|
@@ -13952,12 +14009,12 @@ function InfiniteScrollSelectInternal({
|
|
|
13952
14009
|
overscan = DEFAULT_OVERSCAN,
|
|
13953
14010
|
loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD
|
|
13954
14011
|
}, ref) {
|
|
13955
|
-
const triggerRef =
|
|
13956
|
-
const searchInputRef =
|
|
13957
|
-
const scrollRef =
|
|
13958
|
-
const previousHighlightedIndexRef =
|
|
13959
|
-
const lastLoadMoreOptionsLengthRef =
|
|
13960
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
14012
|
+
const triggerRef = React51.useRef(null);
|
|
14013
|
+
const searchInputRef = React51.useRef(null);
|
|
14014
|
+
const scrollRef = React51.useRef(null);
|
|
14015
|
+
const previousHighlightedIndexRef = React51.useRef(-1);
|
|
14016
|
+
const lastLoadMoreOptionsLengthRef = React51.useRef(null);
|
|
14017
|
+
const [highlightedIndex, setHighlightedIndex] = React51.useState(-1);
|
|
13961
14018
|
const isMobile3 = useIsMobile();
|
|
13962
14019
|
const { t } = (0, import_react_i18next33.useTranslation)();
|
|
13963
14020
|
const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
|
|
@@ -13985,15 +14042,15 @@ function InfiniteScrollSelectInternal({
|
|
|
13985
14042
|
estimateSize: () => itemHeight,
|
|
13986
14043
|
overscan
|
|
13987
14044
|
});
|
|
13988
|
-
|
|
13989
|
-
|
|
14045
|
+
React51.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
14046
|
+
React51.useEffect(() => {
|
|
13990
14047
|
if (isOpen) return;
|
|
13991
14048
|
setSearchValue("");
|
|
13992
14049
|
setHighlightedIndex(-1);
|
|
13993
14050
|
previousHighlightedIndexRef.current = -1;
|
|
13994
14051
|
lastLoadMoreOptionsLengthRef.current = null;
|
|
13995
14052
|
}, [isOpen, setSearchValue]);
|
|
13996
|
-
|
|
14053
|
+
React51.useEffect(() => {
|
|
13997
14054
|
if (!isOpen) return;
|
|
13998
14055
|
setHighlightedIndex((current) => {
|
|
13999
14056
|
const option = current >= 0 ? filteredOptions[current] : void 0;
|
|
@@ -14002,13 +14059,13 @@ function InfiniteScrollSelectInternal({
|
|
|
14002
14059
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(filteredOptions);
|
|
14003
14060
|
});
|
|
14004
14061
|
}, [isOpen, filteredOptions, value]);
|
|
14005
|
-
|
|
14062
|
+
React51.useEffect(() => {
|
|
14006
14063
|
if (!isOpen || !searchable) return;
|
|
14007
14064
|
const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
|
|
14008
14065
|
return () => window.cancelAnimationFrame(frame);
|
|
14009
14066
|
}, [isOpen, searchable]);
|
|
14010
14067
|
const virtualItems = virtualizer.getVirtualItems();
|
|
14011
|
-
|
|
14068
|
+
React51.useEffect(() => {
|
|
14012
14069
|
if (!isOpen || !canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14013
14070
|
if (virtualItems.length === 0) return;
|
|
14014
14071
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
@@ -14025,7 +14082,7 @@ function InfiniteScrollSelectInternal({
|
|
|
14025
14082
|
loadMoreThreshold,
|
|
14026
14083
|
virtualItems
|
|
14027
14084
|
]);
|
|
14028
|
-
|
|
14085
|
+
React51.useEffect(() => {
|
|
14029
14086
|
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14030
14087
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14031
14088
|
if (!isOpen || highlightedIndex < 0 || !changed) return;
|
|
@@ -14194,12 +14251,12 @@ function InfiniteScrollSelectInternal({
|
|
|
14194
14251
|
}
|
|
14195
14252
|
);
|
|
14196
14253
|
}
|
|
14197
|
-
var InfiniteScrollSelect =
|
|
14254
|
+
var InfiniteScrollSelect = React51.forwardRef(
|
|
14198
14255
|
InfiniteScrollSelectInternal
|
|
14199
14256
|
);
|
|
14200
14257
|
|
|
14201
14258
|
// src/dashboard/textarea/Textarea.tsx
|
|
14202
|
-
var
|
|
14259
|
+
var React52 = __toESM(require("react"), 1);
|
|
14203
14260
|
var import_react_i18next34 = require("react-i18next");
|
|
14204
14261
|
var import_jsx_runtime157 = require("react/jsx-runtime");
|
|
14205
14262
|
var LINE_HEIGHT = 20;
|
|
@@ -14209,7 +14266,7 @@ function getEmptyState(empty, value, defaultValue) {
|
|
|
14209
14266
|
if (value !== void 0) return !String(value);
|
|
14210
14267
|
return !defaultValue;
|
|
14211
14268
|
}
|
|
14212
|
-
var Textarea =
|
|
14269
|
+
var Textarea = React52.forwardRef(
|
|
14213
14270
|
function Textarea2({
|
|
14214
14271
|
className,
|
|
14215
14272
|
textareaClassName,
|
|
@@ -14233,15 +14290,15 @@ var Textarea = React51.forwardRef(
|
|
|
14233
14290
|
onInput,
|
|
14234
14291
|
...textareaProps
|
|
14235
14292
|
}, ref) {
|
|
14236
|
-
const innerRef =
|
|
14293
|
+
const innerRef = React52.useRef(null);
|
|
14237
14294
|
const combinedRef = useCombinedRef(ref, innerRef);
|
|
14238
|
-
const reactId =
|
|
14295
|
+
const reactId = React52.useId();
|
|
14239
14296
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
14240
14297
|
const { t } = (0, import_react_i18next34.useTranslation)();
|
|
14241
14298
|
const isInvalid = Boolean(invalid || error);
|
|
14242
14299
|
const isEmpty = getEmptyState(empty, value, defaultValue);
|
|
14243
14300
|
const isBlocked = Boolean(disabled);
|
|
14244
|
-
const resize =
|
|
14301
|
+
const resize = React52.useCallback(() => {
|
|
14245
14302
|
const el = innerRef.current;
|
|
14246
14303
|
if (!el || !autosize) return;
|
|
14247
14304
|
el.style.height = "auto";
|
|
@@ -14251,7 +14308,7 @@ var Textarea = React51.forwardRef(
|
|
|
14251
14308
|
el.style.height = `${nextHeight}px`;
|
|
14252
14309
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
14253
14310
|
}, [autosize, maxRows, minRows]);
|
|
14254
|
-
|
|
14311
|
+
React52.useLayoutEffect(() => {
|
|
14255
14312
|
resize();
|
|
14256
14313
|
}, [resize, value]);
|
|
14257
14314
|
const handleInput = (event) => {
|
|
@@ -14325,12 +14382,12 @@ var Textarea = React51.forwardRef(
|
|
|
14325
14382
|
);
|
|
14326
14383
|
|
|
14327
14384
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
14328
|
-
var
|
|
14385
|
+
var React54 = __toESM(require("react"), 1);
|
|
14329
14386
|
var import_lucide_react47 = require("lucide-react");
|
|
14330
14387
|
var import_react_i18next35 = require("react-i18next");
|
|
14331
14388
|
|
|
14332
14389
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
14333
|
-
var
|
|
14390
|
+
var React53 = __toESM(require("react"), 1);
|
|
14334
14391
|
|
|
14335
14392
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
14336
14393
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -14481,21 +14538,21 @@ function useDatePickerWheel({
|
|
|
14481
14538
|
minDate,
|
|
14482
14539
|
maxDate
|
|
14483
14540
|
}) {
|
|
14484
|
-
const years =
|
|
14485
|
-
const [draftDate, setDraftDate] =
|
|
14541
|
+
const years = React53.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
14542
|
+
const [draftDate, setDraftDate] = React53.useState(
|
|
14486
14543
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
14487
14544
|
);
|
|
14488
14545
|
const draftYear = draftDate.getFullYear();
|
|
14489
14546
|
const draftMonth = draftDate.getMonth();
|
|
14490
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
14491
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
14492
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
14493
|
-
const monthListRef =
|
|
14494
|
-
const dayListRef =
|
|
14495
|
-
const yearListRef =
|
|
14496
|
-
const settleTimeoutsRef =
|
|
14497
|
-
const animationFramesRef =
|
|
14498
|
-
const columnRefs =
|
|
14547
|
+
const [monthScrollTop, setMonthScrollTop] = React53.useState(0);
|
|
14548
|
+
const [dayScrollTop, setDayScrollTop] = React53.useState(0);
|
|
14549
|
+
const [yearScrollTop, setYearScrollTop] = React53.useState(0);
|
|
14550
|
+
const monthListRef = React53.useRef(null);
|
|
14551
|
+
const dayListRef = React53.useRef(null);
|
|
14552
|
+
const yearListRef = React53.useRef(null);
|
|
14553
|
+
const settleTimeoutsRef = React53.useRef({});
|
|
14554
|
+
const animationFramesRef = React53.useRef({});
|
|
14555
|
+
const columnRefs = React53.useMemo(
|
|
14499
14556
|
() => ({
|
|
14500
14557
|
month: monthListRef,
|
|
14501
14558
|
day: dayListRef,
|
|
@@ -14503,7 +14560,7 @@ function useDatePickerWheel({
|
|
|
14503
14560
|
}),
|
|
14504
14561
|
[]
|
|
14505
14562
|
);
|
|
14506
|
-
const setColumnScrollTop =
|
|
14563
|
+
const setColumnScrollTop = React53.useCallback(
|
|
14507
14564
|
(column, nextScrollTop) => {
|
|
14508
14565
|
if (column === "month") {
|
|
14509
14566
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -14517,19 +14574,19 @@ function useDatePickerWheel({
|
|
|
14517
14574
|
},
|
|
14518
14575
|
[]
|
|
14519
14576
|
);
|
|
14520
|
-
const clearSettleTimeout =
|
|
14577
|
+
const clearSettleTimeout = React53.useCallback((column) => {
|
|
14521
14578
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
14522
14579
|
if (timeoutId === void 0) return;
|
|
14523
14580
|
window.clearTimeout(timeoutId);
|
|
14524
14581
|
delete settleTimeoutsRef.current[column];
|
|
14525
14582
|
}, []);
|
|
14526
|
-
const clearAnimationFrame =
|
|
14583
|
+
const clearAnimationFrame = React53.useCallback((column) => {
|
|
14527
14584
|
const frameId = animationFramesRef.current[column];
|
|
14528
14585
|
if (frameId === void 0) return;
|
|
14529
14586
|
window.cancelAnimationFrame(frameId);
|
|
14530
14587
|
delete animationFramesRef.current[column];
|
|
14531
14588
|
}, []);
|
|
14532
|
-
|
|
14589
|
+
React53.useEffect(
|
|
14533
14590
|
() => () => {
|
|
14534
14591
|
["month", "day", "year"].forEach((column) => {
|
|
14535
14592
|
clearSettleTimeout(column);
|
|
@@ -14538,22 +14595,22 @@ function useDatePickerWheel({
|
|
|
14538
14595
|
},
|
|
14539
14596
|
[clearAnimationFrame, clearSettleTimeout]
|
|
14540
14597
|
);
|
|
14541
|
-
|
|
14598
|
+
React53.useEffect(() => {
|
|
14542
14599
|
if (isOpen) return;
|
|
14543
14600
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
14544
14601
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
14545
|
-
const months =
|
|
14602
|
+
const months = React53.useMemo(
|
|
14546
14603
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
14547
14604
|
[draftYear, maxDate, minDate]
|
|
14548
14605
|
);
|
|
14549
|
-
const days =
|
|
14606
|
+
const days = React53.useMemo(
|
|
14550
14607
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
14551
14608
|
[draftMonth, draftYear, maxDate, minDate]
|
|
14552
14609
|
);
|
|
14553
14610
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
14554
14611
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
14555
14612
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
14556
|
-
const syncScrollPositions =
|
|
14613
|
+
const syncScrollPositions = React53.useCallback(
|
|
14557
14614
|
(nextDate, behavior = "auto") => {
|
|
14558
14615
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
14559
14616
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -14577,7 +14634,7 @@ function useDatePickerWheel({
|
|
|
14577
14634
|
},
|
|
14578
14635
|
[maxDate, minDate, years]
|
|
14579
14636
|
);
|
|
14580
|
-
|
|
14637
|
+
React53.useLayoutEffect(() => {
|
|
14581
14638
|
if (!isOpen) return;
|
|
14582
14639
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
14583
14640
|
setDraftDate(nextDate);
|
|
@@ -14588,7 +14645,7 @@ function useDatePickerWheel({
|
|
|
14588
14645
|
window.cancelAnimationFrame(frameId);
|
|
14589
14646
|
};
|
|
14590
14647
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
14591
|
-
const updateDraftDate =
|
|
14648
|
+
const updateDraftDate = React53.useCallback(
|
|
14592
14649
|
(column, targetIndex, behavior = "smooth") => {
|
|
14593
14650
|
const currentDate = stripTime(draftDate);
|
|
14594
14651
|
const currentYear = currentDate.getFullYear();
|
|
@@ -14633,7 +14690,7 @@ function useDatePickerWheel({
|
|
|
14633
14690
|
},
|
|
14634
14691
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
14635
14692
|
);
|
|
14636
|
-
const settleColumnScroll =
|
|
14693
|
+
const settleColumnScroll = React53.useCallback(
|
|
14637
14694
|
(column) => {
|
|
14638
14695
|
const list = columnRefs[column].current;
|
|
14639
14696
|
if (!list) return;
|
|
@@ -14646,7 +14703,7 @@ function useDatePickerWheel({
|
|
|
14646
14703
|
},
|
|
14647
14704
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
14648
14705
|
);
|
|
14649
|
-
const scheduleScrollSettle =
|
|
14706
|
+
const scheduleScrollSettle = React53.useCallback(
|
|
14650
14707
|
(column) => {
|
|
14651
14708
|
clearSettleTimeout(column);
|
|
14652
14709
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -14655,7 +14712,7 @@ function useDatePickerWheel({
|
|
|
14655
14712
|
},
|
|
14656
14713
|
[clearSettleTimeout, settleColumnScroll]
|
|
14657
14714
|
);
|
|
14658
|
-
const handleColumnScroll =
|
|
14715
|
+
const handleColumnScroll = React53.useCallback(
|
|
14659
14716
|
(column) => {
|
|
14660
14717
|
const list = columnRefs[column].current;
|
|
14661
14718
|
if (!list) return;
|
|
@@ -14669,13 +14726,13 @@ function useDatePickerWheel({
|
|
|
14669
14726
|
},
|
|
14670
14727
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
14671
14728
|
);
|
|
14672
|
-
const handleOptionSelect =
|
|
14729
|
+
const handleOptionSelect = React53.useCallback(
|
|
14673
14730
|
(column, targetIndex) => {
|
|
14674
14731
|
updateDraftDate(column, targetIndex, "smooth");
|
|
14675
14732
|
},
|
|
14676
14733
|
[updateDraftDate]
|
|
14677
14734
|
);
|
|
14678
|
-
const focusAdjacentColumn =
|
|
14735
|
+
const focusAdjacentColumn = React53.useCallback(
|
|
14679
14736
|
(column, direction) => {
|
|
14680
14737
|
const order = ["month", "day", "year"];
|
|
14681
14738
|
const currentIndex = order.indexOf(column);
|
|
@@ -14685,7 +14742,7 @@ function useDatePickerWheel({
|
|
|
14685
14742
|
},
|
|
14686
14743
|
[columnRefs]
|
|
14687
14744
|
);
|
|
14688
|
-
const handleColumnKeyDown =
|
|
14745
|
+
const handleColumnKeyDown = React53.useCallback(
|
|
14689
14746
|
(column, event) => {
|
|
14690
14747
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
14691
14748
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15007,7 +15064,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
15007
15064
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
15008
15065
|
return new Date(yearNum, monthIndex, dayNum);
|
|
15009
15066
|
}
|
|
15010
|
-
var Datepicker =
|
|
15067
|
+
var Datepicker = React54.forwardRef(
|
|
15011
15068
|
function Datepicker2({
|
|
15012
15069
|
label,
|
|
15013
15070
|
value,
|
|
@@ -15037,14 +15094,14 @@ var Datepicker = React53.forwardRef(
|
|
|
15037
15094
|
maxDate,
|
|
15038
15095
|
formatValue
|
|
15039
15096
|
}, ref) {
|
|
15040
|
-
const containerRef =
|
|
15041
|
-
const dayInputRef =
|
|
15042
|
-
const monthInputRef =
|
|
15043
|
-
const monthListRef =
|
|
15044
|
-
const yearInputRef =
|
|
15045
|
-
const mobileTriggerRef =
|
|
15046
|
-
const wheelBaseId =
|
|
15047
|
-
const reactId =
|
|
15097
|
+
const containerRef = React54.useRef(null);
|
|
15098
|
+
const dayInputRef = React54.useRef(null);
|
|
15099
|
+
const monthInputRef = React54.useRef(null);
|
|
15100
|
+
const monthListRef = React54.useRef(null);
|
|
15101
|
+
const yearInputRef = React54.useRef(null);
|
|
15102
|
+
const mobileTriggerRef = React54.useRef(null);
|
|
15103
|
+
const wheelBaseId = React54.useId();
|
|
15104
|
+
const reactId = React54.useId();
|
|
15048
15105
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
15049
15106
|
const dayId = `${baseId}-day`;
|
|
15050
15107
|
const monthId = `${baseId}-month`;
|
|
@@ -15052,51 +15109,51 @@ var Datepicker = React53.forwardRef(
|
|
|
15052
15109
|
const labelId = `${baseId}-label`;
|
|
15053
15110
|
const errorId = `${baseId}-error`;
|
|
15054
15111
|
const { t } = (0, import_react_i18next35.useTranslation)();
|
|
15055
|
-
const resolvedMonthLabels =
|
|
15112
|
+
const resolvedMonthLabels = React54.useMemo(
|
|
15056
15113
|
() => monthLabels ?? getMonthLabels2(locale),
|
|
15057
15114
|
[locale, monthLabels]
|
|
15058
15115
|
);
|
|
15059
15116
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
15060
15117
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
15061
15118
|
const isControlled = value !== void 0;
|
|
15062
|
-
const initialParts =
|
|
15119
|
+
const initialParts = React54.useMemo(
|
|
15063
15120
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
15064
15121
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15065
15122
|
[]
|
|
15066
15123
|
);
|
|
15067
|
-
const [day, setDay] =
|
|
15068
|
-
const [monthIndex, setMonthIndex] =
|
|
15124
|
+
const [day, setDay] = React54.useState(initialParts.day);
|
|
15125
|
+
const [monthIndex, setMonthIndex] = React54.useState(
|
|
15069
15126
|
initialParts.monthIndex
|
|
15070
15127
|
);
|
|
15071
|
-
const [year, setYear] =
|
|
15072
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
15073
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
15074
|
-
const [focusedField, setFocusedField] =
|
|
15075
|
-
const [monthInputValue, setMonthInputValue] =
|
|
15076
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
15128
|
+
const [year, setYear] = React54.useState(initialParts.year);
|
|
15129
|
+
const [isMonthOpen, setIsMonthOpen] = React54.useState(false);
|
|
15130
|
+
const [isWheelOpen, setIsWheelOpen] = React54.useState(false);
|
|
15131
|
+
const [focusedField, setFocusedField] = React54.useState(null);
|
|
15132
|
+
const [monthInputValue, setMonthInputValue] = React54.useState("");
|
|
15133
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React54.useState(-1);
|
|
15077
15134
|
const isMobile3 = useIsMobile();
|
|
15078
|
-
|
|
15079
|
-
|
|
15135
|
+
React54.useImperativeHandle(ref, () => dayInputRef.current, []);
|
|
15136
|
+
React54.useEffect(() => {
|
|
15080
15137
|
if (!isControlled) return;
|
|
15081
15138
|
const next = partsFromDate(value ?? null);
|
|
15082
15139
|
setDay(next.day);
|
|
15083
15140
|
setMonthIndex(next.monthIndex);
|
|
15084
15141
|
setYear(next.year);
|
|
15085
15142
|
}, [isControlled, value]);
|
|
15086
|
-
|
|
15143
|
+
React54.useEffect(() => {
|
|
15087
15144
|
if (focusedField === "month") return;
|
|
15088
15145
|
setMonthInputValue(
|
|
15089
15146
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
15090
15147
|
);
|
|
15091
15148
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
15092
|
-
const filteredMonths =
|
|
15149
|
+
const filteredMonths = React54.useMemo(() => {
|
|
15093
15150
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
15094
15151
|
const query = monthInputValue.trim().toLowerCase();
|
|
15095
15152
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
15096
15153
|
if (!query || monthInputValue === currentLabel) return all;
|
|
15097
15154
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
15098
15155
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
15099
|
-
|
|
15156
|
+
React54.useEffect(() => {
|
|
15100
15157
|
if (!isMonthOpen) {
|
|
15101
15158
|
setMonthHighlightIndex(-1);
|
|
15102
15159
|
return;
|
|
@@ -15117,7 +15174,7 @@ var Datepicker = React53.forwardRef(
|
|
|
15117
15174
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
15118
15175
|
const isInvalid = Boolean(invalid || error);
|
|
15119
15176
|
const wrapperWidth = toCssSize(width);
|
|
15120
|
-
const currentDate =
|
|
15177
|
+
const currentDate = React54.useMemo(
|
|
15121
15178
|
() => dateFromParts(day, monthIndex, year),
|
|
15122
15179
|
[day, monthIndex, year]
|
|
15123
15180
|
);
|
|
@@ -15126,7 +15183,7 @@ var Datepicker = React53.forwardRef(
|
|
|
15126
15183
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
15127
15184
|
isDisabled: !isMonthOpen || isMobile3
|
|
15128
15185
|
});
|
|
15129
|
-
const emitChange =
|
|
15186
|
+
const emitChange = React54.useCallback(
|
|
15130
15187
|
(nextDay, nextMonth, nextYear) => {
|
|
15131
15188
|
if (!onChange) return;
|
|
15132
15189
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -15161,7 +15218,7 @@ var Datepicker = React53.forwardRef(
|
|
|
15161
15218
|
setIsMonthOpen(true);
|
|
15162
15219
|
setMonthHighlightIndex(0);
|
|
15163
15220
|
};
|
|
15164
|
-
const commitMonthInput =
|
|
15221
|
+
const commitMonthInput = React54.useCallback(() => {
|
|
15165
15222
|
const query = monthInputValue.trim().toLowerCase();
|
|
15166
15223
|
if (!query) {
|
|
15167
15224
|
if (monthIndex !== null) {
|
|
@@ -15221,15 +15278,15 @@ var Datepicker = React53.forwardRef(
|
|
|
15221
15278
|
setIsMonthOpen(false);
|
|
15222
15279
|
}
|
|
15223
15280
|
};
|
|
15224
|
-
const focusDayInput =
|
|
15281
|
+
const focusDayInput = React54.useCallback(() => {
|
|
15225
15282
|
if (isBlocked || readOnly) return;
|
|
15226
15283
|
dayInputRef.current?.focus();
|
|
15227
15284
|
}, [isBlocked, readOnly]);
|
|
15228
|
-
const openWheel =
|
|
15285
|
+
const openWheel = React54.useCallback(() => {
|
|
15229
15286
|
if (isBlocked || readOnly) return;
|
|
15230
15287
|
setIsWheelOpen(true);
|
|
15231
15288
|
}, [isBlocked, readOnly]);
|
|
15232
|
-
const closeWheel =
|
|
15289
|
+
const closeWheel = React54.useCallback(() => {
|
|
15233
15290
|
setIsWheelOpen(false);
|
|
15234
15291
|
mobileTriggerRef.current?.focus();
|
|
15235
15292
|
}, []);
|
|
@@ -15241,7 +15298,7 @@ var Datepicker = React53.forwardRef(
|
|
|
15241
15298
|
minDate,
|
|
15242
15299
|
maxDate
|
|
15243
15300
|
});
|
|
15244
|
-
const handleWheelDone =
|
|
15301
|
+
const handleWheelDone = React54.useCallback(() => {
|
|
15245
15302
|
const next = wheel.draftDate;
|
|
15246
15303
|
setDay(String(next.getDate()));
|
|
15247
15304
|
setMonthIndex(next.getMonth());
|
|
@@ -15250,7 +15307,7 @@ var Datepicker = React53.forwardRef(
|
|
|
15250
15307
|
setIsWheelOpen(false);
|
|
15251
15308
|
mobileTriggerRef.current?.focus();
|
|
15252
15309
|
}, [name, onChange, wheel.draftDate]);
|
|
15253
|
-
const defaultFormatValue =
|
|
15310
|
+
const defaultFormatValue = React54.useCallback(
|
|
15254
15311
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
15255
15312
|
[resolvedMonthLabels]
|
|
15256
15313
|
);
|
|
@@ -15541,7 +15598,7 @@ var Datepicker = React53.forwardRef(
|
|
|
15541
15598
|
);
|
|
15542
15599
|
|
|
15543
15600
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
15544
|
-
var
|
|
15601
|
+
var React58 = __toESM(require("react"), 1);
|
|
15545
15602
|
var import_react_i18next36 = require("react-i18next");
|
|
15546
15603
|
|
|
15547
15604
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -15620,7 +15677,7 @@ var createDisabledMatchers = ({
|
|
|
15620
15677
|
};
|
|
15621
15678
|
|
|
15622
15679
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
15623
|
-
var
|
|
15680
|
+
var React55 = __toESM(require("react"), 1);
|
|
15624
15681
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
15625
15682
|
function useRangeValue({
|
|
15626
15683
|
value: externalValue,
|
|
@@ -15629,10 +15686,10 @@ function useRangeValue({
|
|
|
15629
15686
|
name
|
|
15630
15687
|
}) {
|
|
15631
15688
|
const isControlled = externalValue !== void 0;
|
|
15632
|
-
const [draft, setDraft] =
|
|
15689
|
+
const [draft, setDraft] = React55.useState(
|
|
15633
15690
|
isControlled ? externalValue : defaultValue
|
|
15634
15691
|
);
|
|
15635
|
-
const lastExternalKeyRef =
|
|
15692
|
+
const lastExternalKeyRef = React55.useRef(getRangeKey(externalValue));
|
|
15636
15693
|
if (isControlled) {
|
|
15637
15694
|
const externalKey = getRangeKey(externalValue);
|
|
15638
15695
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -15640,7 +15697,7 @@ function useRangeValue({
|
|
|
15640
15697
|
setDraft(externalValue);
|
|
15641
15698
|
}
|
|
15642
15699
|
}
|
|
15643
|
-
const commit =
|
|
15700
|
+
const commit = React55.useCallback(
|
|
15644
15701
|
(next) => {
|
|
15645
15702
|
setDraft(next);
|
|
15646
15703
|
if (next === void 0) {
|
|
@@ -15655,7 +15712,7 @@ function useRangeValue({
|
|
|
15655
15712
|
}
|
|
15656
15713
|
|
|
15657
15714
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
15658
|
-
var
|
|
15715
|
+
var React56 = __toESM(require("react"), 1);
|
|
15659
15716
|
function useRangeTextInputs({
|
|
15660
15717
|
value,
|
|
15661
15718
|
format: format2,
|
|
@@ -15663,13 +15720,13 @@ function useRangeTextInputs({
|
|
|
15663
15720
|
onCommit,
|
|
15664
15721
|
onBlur
|
|
15665
15722
|
}) {
|
|
15666
|
-
const [fromText, setFromText] =
|
|
15667
|
-
const [toText, setToText] =
|
|
15668
|
-
|
|
15723
|
+
const [fromText, setFromText] = React56.useState(value?.from ? format2(value.from) : "");
|
|
15724
|
+
const [toText, setToText] = React56.useState(value?.to ? format2(value.to) : "");
|
|
15725
|
+
React56.useEffect(() => {
|
|
15669
15726
|
setFromText(value?.from ? format2(value.from) : "");
|
|
15670
15727
|
setToText(value?.to ? format2(value.to) : "");
|
|
15671
15728
|
}, [format2, value?.from, value?.to]);
|
|
15672
|
-
const handleFromBlur =
|
|
15729
|
+
const handleFromBlur = React56.useCallback(() => {
|
|
15673
15730
|
if (!fromText) {
|
|
15674
15731
|
const next = { from: void 0, to: value?.to };
|
|
15675
15732
|
onCommit(next);
|
|
@@ -15686,7 +15743,7 @@ function useRangeTextInputs({
|
|
|
15686
15743
|
setFromText(value?.from ? format2(value.from) : "");
|
|
15687
15744
|
return void 0;
|
|
15688
15745
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
15689
|
-
const handleToBlur =
|
|
15746
|
+
const handleToBlur = React56.useCallback(() => {
|
|
15690
15747
|
if (!toText) {
|
|
15691
15748
|
const next = { from: value?.from, to: void 0 };
|
|
15692
15749
|
onCommit(next);
|
|
@@ -15713,21 +15770,21 @@ function useRangeTextInputs({
|
|
|
15713
15770
|
}
|
|
15714
15771
|
|
|
15715
15772
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
15716
|
-
var
|
|
15773
|
+
var React57 = __toESM(require("react"), 1);
|
|
15717
15774
|
function useRangeMonthSync(value) {
|
|
15718
|
-
const isPreloadedRef =
|
|
15719
|
-
const [month, setMonth] =
|
|
15720
|
-
|
|
15775
|
+
const isPreloadedRef = React57.useRef(false);
|
|
15776
|
+
const [month, setMonth] = React57.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
15777
|
+
React57.useEffect(() => {
|
|
15721
15778
|
if (value?.from && !isPreloadedRef.current) {
|
|
15722
15779
|
setMonth(value.from);
|
|
15723
15780
|
isPreloadedRef.current = true;
|
|
15724
15781
|
}
|
|
15725
15782
|
}, [value?.from]);
|
|
15726
|
-
const syncMonthToValue =
|
|
15783
|
+
const syncMonthToValue = React57.useCallback((next) => {
|
|
15727
15784
|
isPreloadedRef.current = true;
|
|
15728
15785
|
if (next?.from) setMonth(next.from);
|
|
15729
15786
|
}, []);
|
|
15730
|
-
const resetPreload =
|
|
15787
|
+
const resetPreload = React57.useCallback(() => {
|
|
15731
15788
|
isPreloadedRef.current = false;
|
|
15732
15789
|
}, []);
|
|
15733
15790
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -15986,7 +16043,7 @@ function DateRangePopover({
|
|
|
15986
16043
|
|
|
15987
16044
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
15988
16045
|
var import_jsx_runtime164 = require("react/jsx-runtime");
|
|
15989
|
-
var DateRangePicker =
|
|
16046
|
+
var DateRangePicker = React58.forwardRef(function DateRangePicker2({
|
|
15990
16047
|
label,
|
|
15991
16048
|
value: externalValue,
|
|
15992
16049
|
defaultValue,
|
|
@@ -16020,20 +16077,20 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
16020
16077
|
components: customComponents,
|
|
16021
16078
|
...dayPickerProps
|
|
16022
16079
|
}, ref) {
|
|
16023
|
-
const containerRef =
|
|
16024
|
-
const fromInputRef =
|
|
16025
|
-
const toInputRef =
|
|
16026
|
-
const reactId =
|
|
16080
|
+
const containerRef = React58.useRef(null);
|
|
16081
|
+
const fromInputRef = React58.useRef(null);
|
|
16082
|
+
const toInputRef = React58.useRef(null);
|
|
16083
|
+
const reactId = React58.useId();
|
|
16027
16084
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
16028
16085
|
const fromId = `${baseId}-from`;
|
|
16029
16086
|
const toId = `${baseId}-to`;
|
|
16030
16087
|
const labelId = `${baseId}-label`;
|
|
16031
16088
|
const errorId = `${baseId}-error`;
|
|
16032
|
-
const normalizedValue =
|
|
16089
|
+
const normalizedValue = React58.useMemo(() => {
|
|
16033
16090
|
if (externalValue === void 0) return void 0;
|
|
16034
16091
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
16035
16092
|
}, [externalValue]);
|
|
16036
|
-
const normalizedDefaultValue =
|
|
16093
|
+
const normalizedDefaultValue = React58.useMemo(() => {
|
|
16037
16094
|
if (defaultValue === void 0) return void 0;
|
|
16038
16095
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
16039
16096
|
}, [defaultValue]);
|
|
@@ -16043,10 +16100,10 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
16043
16100
|
onChange,
|
|
16044
16101
|
name
|
|
16045
16102
|
});
|
|
16046
|
-
const normalizedMinDate =
|
|
16047
|
-
const normalizedMaxDate =
|
|
16048
|
-
const formatter =
|
|
16049
|
-
const parser =
|
|
16103
|
+
const normalizedMinDate = React58.useMemo(() => toDate(minDate), [minDate]);
|
|
16104
|
+
const normalizedMaxDate = React58.useMemo(() => toDate(maxDate), [maxDate]);
|
|
16105
|
+
const formatter = React58.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
16106
|
+
const parser = React58.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
16050
16107
|
const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
|
|
16051
16108
|
value,
|
|
16052
16109
|
format: formatter,
|
|
@@ -16055,9 +16112,9 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
16055
16112
|
onBlur
|
|
16056
16113
|
});
|
|
16057
16114
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
16058
|
-
const [isOpen, setIsOpen] =
|
|
16059
|
-
const [focusedInput, setFocusedInput] =
|
|
16060
|
-
const [autoFocus, setAutoFocus] =
|
|
16115
|
+
const [isOpen, setIsOpen] = React58.useState(false);
|
|
16116
|
+
const [focusedInput, setFocusedInput] = React58.useState(null);
|
|
16117
|
+
const [autoFocus, setAutoFocus] = React58.useState(false);
|
|
16061
16118
|
const isMobile3 = useIsMobile();
|
|
16062
16119
|
const { t } = (0, import_react_i18next36.useTranslation)();
|
|
16063
16120
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -16068,13 +16125,13 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
16068
16125
|
const isFocused = focusedInput !== null || isOpen;
|
|
16069
16126
|
const wrapperWidth = toCssSize(width);
|
|
16070
16127
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
16071
|
-
const closeCalendar =
|
|
16128
|
+
const closeCalendar = React58.useCallback(() => {
|
|
16072
16129
|
setIsOpen(false);
|
|
16073
16130
|
setFocusedInput(null);
|
|
16074
16131
|
setAutoFocus(false);
|
|
16075
16132
|
if (value?.from) setMonth(value.from);
|
|
16076
16133
|
}, [setMonth, value?.from]);
|
|
16077
|
-
const openCalendar =
|
|
16134
|
+
const openCalendar = React58.useCallback(() => {
|
|
16078
16135
|
if (isBlocked || readOnly) return;
|
|
16079
16136
|
setIsOpen(true);
|
|
16080
16137
|
}, [isBlocked, readOnly]);
|
|
@@ -16083,7 +16140,7 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
16083
16140
|
onOutsideClick: closeCalendar,
|
|
16084
16141
|
isDisabled: !isOpen || isMobile3
|
|
16085
16142
|
});
|
|
16086
|
-
const handlePickerChange =
|
|
16143
|
+
const handlePickerChange = React58.useCallback(
|
|
16087
16144
|
(range, pickedDate) => {
|
|
16088
16145
|
const { next, shouldClose } = resolveRangeSelection({
|
|
16089
16146
|
previous: value,
|
|
@@ -16104,7 +16161,7 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
16104
16161
|
setToText("");
|
|
16105
16162
|
setMonth(/* @__PURE__ */ new Date());
|
|
16106
16163
|
};
|
|
16107
|
-
const disabledMatchers =
|
|
16164
|
+
const disabledMatchers = React58.useMemo(
|
|
16108
16165
|
() => createDisabledMatchers({
|
|
16109
16166
|
minDate: normalizedMinDate,
|
|
16110
16167
|
maxDate: normalizedMaxDate,
|
|
@@ -16123,7 +16180,7 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
16123
16180
|
openCalendar();
|
|
16124
16181
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
16125
16182
|
};
|
|
16126
|
-
|
|
16183
|
+
React58.useImperativeHandle(
|
|
16127
16184
|
ref,
|
|
16128
16185
|
() => ({
|
|
16129
16186
|
setDateRange: (range) => {
|
|
@@ -16302,7 +16359,7 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
16302
16359
|
});
|
|
16303
16360
|
|
|
16304
16361
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
16305
|
-
var
|
|
16362
|
+
var React59 = __toESM(require("react"), 1);
|
|
16306
16363
|
var import_react_i18next37 = require("react-i18next");
|
|
16307
16364
|
var import_date_fns4 = require("date-fns");
|
|
16308
16365
|
var import_react_day_picker2 = require("react-day-picker");
|
|
@@ -16325,11 +16382,11 @@ function useValidateDates({
|
|
|
16325
16382
|
const { t } = (0, import_react_i18next37.useTranslation)();
|
|
16326
16383
|
const handleError = useEvent(onError);
|
|
16327
16384
|
const handleSuccess = useEvent(onSuccess);
|
|
16328
|
-
const errorFormatter =
|
|
16385
|
+
const errorFormatter = React59.useMemo(
|
|
16329
16386
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
16330
16387
|
[displayFormat]
|
|
16331
16388
|
);
|
|
16332
|
-
const validateDates =
|
|
16389
|
+
const validateDates = React59.useCallback(
|
|
16333
16390
|
(dates) => {
|
|
16334
16391
|
const startDate = dates?.from;
|
|
16335
16392
|
const endDate = dates?.to;
|
|
@@ -16379,7 +16436,7 @@ function useValidateDates({
|
|
|
16379
16436
|
}
|
|
16380
16437
|
|
|
16381
16438
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
16382
|
-
var
|
|
16439
|
+
var React60 = __toESM(require("react"), 1);
|
|
16383
16440
|
var import_date_fns5 = require("date-fns");
|
|
16384
16441
|
var import_jsx_runtime165 = require("react/jsx-runtime");
|
|
16385
16442
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
@@ -16423,9 +16480,9 @@ var FORMAT_SETTINGS = {
|
|
|
16423
16480
|
},
|
|
16424
16481
|
hours: { intervalUnit: "H", interval: 1, minTime: "00:00", maxTime: "23:00" }
|
|
16425
16482
|
};
|
|
16426
|
-
var TimePicker =
|
|
16483
|
+
var TimePicker = React60.forwardRef(
|
|
16427
16484
|
function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
16428
|
-
const resolvedOptions =
|
|
16485
|
+
const resolvedOptions = React60.useMemo(() => {
|
|
16429
16486
|
if (options) return options;
|
|
16430
16487
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
16431
16488
|
return buildOptions(settings);
|
|
@@ -16435,14 +16492,14 @@ var TimePicker = React59.forwardRef(
|
|
|
16435
16492
|
);
|
|
16436
16493
|
|
|
16437
16494
|
// src/dashboard/file-input/FileInput.tsx
|
|
16438
|
-
var
|
|
16495
|
+
var React61 = __toESM(require("react"), 1);
|
|
16439
16496
|
var import_lucide_react49 = require("lucide-react");
|
|
16440
16497
|
var import_react_i18next38 = require("react-i18next");
|
|
16441
16498
|
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
16442
16499
|
function defaultDownload(url) {
|
|
16443
16500
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
16444
16501
|
}
|
|
16445
|
-
var FileInput =
|
|
16502
|
+
var FileInput = React61.forwardRef(
|
|
16446
16503
|
function FileInput2({
|
|
16447
16504
|
label,
|
|
16448
16505
|
value,
|
|
@@ -16465,12 +16522,12 @@ var FileInput = React60.forwardRef(
|
|
|
16465
16522
|
width,
|
|
16466
16523
|
downloadLabel
|
|
16467
16524
|
}, ref) {
|
|
16468
|
-
const internalRef =
|
|
16525
|
+
const internalRef = React61.useRef(null);
|
|
16469
16526
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
16470
16527
|
const { t } = (0, import_react_i18next38.useTranslation)();
|
|
16471
16528
|
const resolvedLabel = label ?? t("upload_file");
|
|
16472
16529
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
16473
|
-
const reactId =
|
|
16530
|
+
const reactId = React61.useId();
|
|
16474
16531
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
16475
16532
|
const labelId = `${inputId}-label`;
|
|
16476
16533
|
const errorId = `${inputId}-error`;
|
|
@@ -16610,7 +16667,7 @@ var FileInput = React60.forwardRef(
|
|
|
16610
16667
|
);
|
|
16611
16668
|
|
|
16612
16669
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
16613
|
-
var
|
|
16670
|
+
var React62 = __toESM(require("react"), 1);
|
|
16614
16671
|
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
16615
16672
|
function SelectIconsBox({
|
|
16616
16673
|
children,
|
|
@@ -16626,9 +16683,9 @@ function SelectIconsBox({
|
|
|
16626
16683
|
className,
|
|
16627
16684
|
boxClassName
|
|
16628
16685
|
}) {
|
|
16629
|
-
const containerRef =
|
|
16686
|
+
const containerRef = React62.useRef(null);
|
|
16630
16687
|
const isControlled = controlledOpen !== void 0;
|
|
16631
|
-
const [internalOpen, setInternalOpen] =
|
|
16688
|
+
const [internalOpen, setInternalOpen] = React62.useState(defaultOpen);
|
|
16632
16689
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
16633
16690
|
const setOpen = (next) => {
|
|
16634
16691
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -16809,15 +16866,15 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
16809
16866
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
16810
16867
|
|
|
16811
16868
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
16812
|
-
var
|
|
16869
|
+
var React64 = __toESM(require("react"), 1);
|
|
16813
16870
|
var import_lucide_react51 = require("lucide-react");
|
|
16814
16871
|
|
|
16815
16872
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
16816
|
-
var
|
|
16873
|
+
var React63 = __toESM(require("react"), 1);
|
|
16817
16874
|
var import_lucide_react50 = require("lucide-react");
|
|
16818
16875
|
var import_react_i18next39 = require("react-i18next");
|
|
16819
16876
|
var import_jsx_runtime170 = require("react/jsx-runtime");
|
|
16820
|
-
var AirbnbFieldTrigger =
|
|
16877
|
+
var AirbnbFieldTrigger = React63.forwardRef(
|
|
16821
16878
|
({
|
|
16822
16879
|
as = "button",
|
|
16823
16880
|
variant = "airbnb",
|
|
@@ -16990,7 +17047,7 @@ AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
|
16990
17047
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
16991
17048
|
var import_jsx_runtime171 = require("react/jsx-runtime");
|
|
16992
17049
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
16993
|
-
var AirbnbDatePicker =
|
|
17050
|
+
var AirbnbDatePicker = React64.forwardRef(
|
|
16994
17051
|
({
|
|
16995
17052
|
variant = "default",
|
|
16996
17053
|
label,
|
|
@@ -17016,24 +17073,24 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
17016
17073
|
formatValue = formatDateValue
|
|
17017
17074
|
}, ref) => {
|
|
17018
17075
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
17019
|
-
const [isOpen, setIsOpen] =
|
|
17020
|
-
const triggerId =
|
|
17021
|
-
const pickerId =
|
|
17022
|
-
const labelId =
|
|
17023
|
-
const valueId =
|
|
17024
|
-
const helperTextId =
|
|
17025
|
-
const errorId =
|
|
17026
|
-
const internalRef =
|
|
17076
|
+
const [isOpen, setIsOpen] = React64.useState(false);
|
|
17077
|
+
const triggerId = React64.useId();
|
|
17078
|
+
const pickerId = React64.useId();
|
|
17079
|
+
const labelId = React64.useId();
|
|
17080
|
+
const valueId = React64.useId();
|
|
17081
|
+
const helperTextId = React64.useId();
|
|
17082
|
+
const errorId = React64.useId();
|
|
17083
|
+
const internalRef = React64.useRef(null);
|
|
17027
17084
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
17028
|
-
const monthLabels =
|
|
17029
|
-
const resolvedMinDate =
|
|
17030
|
-
const resolvedMaxDate =
|
|
17031
|
-
const normalizedValue =
|
|
17032
|
-
const normalizedDefaultValue =
|
|
17085
|
+
const monthLabels = React64.useMemo(() => getMonthLabels(locale), [locale]);
|
|
17086
|
+
const resolvedMinDate = React64.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
17087
|
+
const resolvedMaxDate = React64.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
17088
|
+
const normalizedValue = React64.useMemo(() => normalizeDateValue(value), [value]);
|
|
17089
|
+
const normalizedDefaultValue = React64.useMemo(
|
|
17033
17090
|
() => normalizeDateValue(defaultValue),
|
|
17034
17091
|
[defaultValue]
|
|
17035
17092
|
);
|
|
17036
|
-
const resolvedValue =
|
|
17093
|
+
const resolvedValue = React64.useMemo(
|
|
17037
17094
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
17038
17095
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
17039
17096
|
);
|
|
@@ -17064,7 +17121,7 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
17064
17121
|
minDate: resolvedMinDate,
|
|
17065
17122
|
maxDate: resolvedMaxDate
|
|
17066
17123
|
});
|
|
17067
|
-
const handleOpenChange =
|
|
17124
|
+
const handleOpenChange = React64.useCallback(
|
|
17068
17125
|
(nextOpen) => {
|
|
17069
17126
|
if (isBlocked && nextOpen) return;
|
|
17070
17127
|
setIsOpen(nextOpen);
|
|
@@ -17074,7 +17131,7 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
17074
17131
|
},
|
|
17075
17132
|
[isBlocked]
|
|
17076
17133
|
);
|
|
17077
|
-
const handleDone =
|
|
17134
|
+
const handleDone = React64.useCallback(() => {
|
|
17078
17135
|
if (isBlocked) return;
|
|
17079
17136
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
17080
17137
|
handleOpenChange(false);
|
|
@@ -17086,11 +17143,11 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
17086
17143
|
resolvedMaxDate,
|
|
17087
17144
|
resolvedMinDate
|
|
17088
17145
|
]);
|
|
17089
|
-
const handleTriggerClick =
|
|
17146
|
+
const handleTriggerClick = React64.useCallback(() => {
|
|
17090
17147
|
if (isBlocked) return;
|
|
17091
17148
|
setIsOpen(true);
|
|
17092
17149
|
}, [isBlocked]);
|
|
17093
|
-
const handleTriggerKeyDown =
|
|
17150
|
+
const handleTriggerKeyDown = React64.useCallback(
|
|
17094
17151
|
(event) => {
|
|
17095
17152
|
if (isBlocked) return;
|
|
17096
17153
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -17100,7 +17157,7 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
17100
17157
|
},
|
|
17101
17158
|
[isBlocked]
|
|
17102
17159
|
);
|
|
17103
|
-
|
|
17160
|
+
React64.useEffect(() => {
|
|
17104
17161
|
if (isBlocked) {
|
|
17105
17162
|
setIsOpen(false);
|
|
17106
17163
|
}
|
|
@@ -17178,10 +17235,10 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
17178
17235
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
17179
17236
|
|
|
17180
17237
|
// src/airbnb-fields/input/Input.tsx
|
|
17181
|
-
var
|
|
17238
|
+
var React65 = __toESM(require("react"), 1);
|
|
17182
17239
|
var import_jsx_runtime172 = require("react/jsx-runtime");
|
|
17183
17240
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
17184
|
-
var AirbnbInput =
|
|
17241
|
+
var AirbnbInput = React65.forwardRef(
|
|
17185
17242
|
({
|
|
17186
17243
|
variant = "default",
|
|
17187
17244
|
label,
|
|
@@ -17210,15 +17267,15 @@ var AirbnbInput = React64.forwardRef(
|
|
|
17210
17267
|
placeholder,
|
|
17211
17268
|
...props
|
|
17212
17269
|
}, ref) => {
|
|
17213
|
-
const generatedId =
|
|
17214
|
-
const inputRef =
|
|
17270
|
+
const generatedId = React65.useId();
|
|
17271
|
+
const inputRef = React65.useRef(null);
|
|
17215
17272
|
const inputId = id ?? generatedId;
|
|
17216
17273
|
const fieldId = `${inputId}-field`;
|
|
17217
17274
|
const labelId = `${inputId}-label`;
|
|
17218
17275
|
const errorId = `${inputId}-error`;
|
|
17219
17276
|
const accessibleLabel = placeholder ?? label;
|
|
17220
|
-
const [isFocused, setIsFocused] =
|
|
17221
|
-
const [currentValue, setCurrentValue] =
|
|
17277
|
+
const [isFocused, setIsFocused] = React65.useState(false);
|
|
17278
|
+
const [currentValue, setCurrentValue] = React65.useState(
|
|
17222
17279
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
17223
17280
|
);
|
|
17224
17281
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -17228,11 +17285,11 @@ var AirbnbInput = React64.forwardRef(
|
|
|
17228
17285
|
const triggerError = error ?? invalid;
|
|
17229
17286
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
17230
17287
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
17231
|
-
|
|
17288
|
+
React65.useLayoutEffect(() => {
|
|
17232
17289
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
17233
17290
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
17234
17291
|
}, [value]);
|
|
17235
|
-
const setRefs =
|
|
17292
|
+
const setRefs = React65.useCallback(
|
|
17236
17293
|
(node) => {
|
|
17237
17294
|
inputRef.current = node;
|
|
17238
17295
|
if (node && value == null) {
|
|
@@ -17330,11 +17387,11 @@ var AirbnbInput = React64.forwardRef(
|
|
|
17330
17387
|
AirbnbInput.displayName = "AirbnbInput";
|
|
17331
17388
|
|
|
17332
17389
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
17333
|
-
var
|
|
17390
|
+
var React71 = __toESM(require("react"), 1);
|
|
17334
17391
|
var import_lucide_react53 = require("lucide-react");
|
|
17335
17392
|
|
|
17336
17393
|
// src/airbnb-fields/select/Select.tsx
|
|
17337
|
-
var
|
|
17394
|
+
var React70 = __toESM(require("react"), 1);
|
|
17338
17395
|
|
|
17339
17396
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
17340
17397
|
var import_jsx_runtime173 = require("react/jsx-runtime");
|
|
@@ -17679,10 +17736,10 @@ function AirbnbSelectMobileContent({
|
|
|
17679
17736
|
}
|
|
17680
17737
|
|
|
17681
17738
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
17682
|
-
var
|
|
17739
|
+
var React66 = __toESM(require("react"), 1);
|
|
17683
17740
|
var import_lucide_react52 = require("lucide-react");
|
|
17684
17741
|
var import_jsx_runtime177 = require("react/jsx-runtime");
|
|
17685
|
-
var AirbnbSelectTrigger =
|
|
17742
|
+
var AirbnbSelectTrigger = React66.forwardRef(
|
|
17686
17743
|
({
|
|
17687
17744
|
id,
|
|
17688
17745
|
open,
|
|
@@ -17749,7 +17806,7 @@ var AirbnbSelectTrigger = React65.forwardRef(
|
|
|
17749
17806
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
17750
17807
|
|
|
17751
17808
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
17752
|
-
var
|
|
17809
|
+
var React67 = __toESM(require("react"), 1);
|
|
17753
17810
|
function useDesktopSelect({
|
|
17754
17811
|
isMobile: isMobile3,
|
|
17755
17812
|
isOpen,
|
|
@@ -17758,12 +17815,12 @@ function useDesktopSelect({
|
|
|
17758
17815
|
disabled,
|
|
17759
17816
|
onChange
|
|
17760
17817
|
}) {
|
|
17761
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
17762
|
-
const triggerRef =
|
|
17763
|
-
const listRef =
|
|
17764
|
-
const optionRefs =
|
|
17818
|
+
const [highlightedIndex, setHighlightedIndex] = React67.useState(-1);
|
|
17819
|
+
const triggerRef = React67.useRef(null);
|
|
17820
|
+
const listRef = React67.useRef(null);
|
|
17821
|
+
const optionRefs = React67.useRef([]);
|
|
17765
17822
|
const selectedIndex = getOptionIndex2(options, value);
|
|
17766
|
-
|
|
17823
|
+
React67.useEffect(() => {
|
|
17767
17824
|
if (!isOpen || isMobile3) return;
|
|
17768
17825
|
setHighlightedIndex((currentIndex) => {
|
|
17769
17826
|
if (currentIndex >= 0) {
|
|
@@ -17778,34 +17835,34 @@ function useDesktopSelect({
|
|
|
17778
17835
|
window.cancelAnimationFrame(frameId);
|
|
17779
17836
|
};
|
|
17780
17837
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
17781
|
-
|
|
17838
|
+
React67.useEffect(() => {
|
|
17782
17839
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
17783
17840
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
17784
17841
|
block: "nearest"
|
|
17785
17842
|
});
|
|
17786
17843
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
17787
|
-
|
|
17844
|
+
React67.useEffect(() => {
|
|
17788
17845
|
if (isOpen) return;
|
|
17789
17846
|
setHighlightedIndex(-1);
|
|
17790
17847
|
}, [isOpen]);
|
|
17791
|
-
const focusTrigger =
|
|
17848
|
+
const focusTrigger = React67.useCallback(() => {
|
|
17792
17849
|
triggerRef.current?.focus();
|
|
17793
17850
|
}, []);
|
|
17794
|
-
const handleSelect =
|
|
17851
|
+
const handleSelect = React67.useCallback(
|
|
17795
17852
|
(option) => {
|
|
17796
17853
|
if (option.isDisabled || disabled) return;
|
|
17797
17854
|
onChange(option);
|
|
17798
17855
|
},
|
|
17799
17856
|
[disabled, onChange]
|
|
17800
17857
|
);
|
|
17801
|
-
const openMenu =
|
|
17858
|
+
const openMenu = React67.useCallback(
|
|
17802
17859
|
(targetIndex) => {
|
|
17803
17860
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
17804
17861
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
17805
17862
|
},
|
|
17806
17863
|
[options, selectedIndex]
|
|
17807
17864
|
);
|
|
17808
|
-
const handleTriggerKeyDown =
|
|
17865
|
+
const handleTriggerKeyDown = React67.useCallback(
|
|
17809
17866
|
(event, onOpen) => {
|
|
17810
17867
|
if (disabled) return;
|
|
17811
17868
|
if (event.key === "ArrowDown") {
|
|
@@ -17830,7 +17887,7 @@ function useDesktopSelect({
|
|
|
17830
17887
|
},
|
|
17831
17888
|
[disabled, openMenu, options, selectedIndex]
|
|
17832
17889
|
);
|
|
17833
|
-
const handleMenuKeyDown =
|
|
17890
|
+
const handleMenuKeyDown = React67.useCallback(
|
|
17834
17891
|
(event, onClose) => {
|
|
17835
17892
|
if (event.key === "Escape") {
|
|
17836
17893
|
event.preventDefault();
|
|
@@ -17880,7 +17937,7 @@ function useDesktopSelect({
|
|
|
17880
17937
|
},
|
|
17881
17938
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
17882
17939
|
);
|
|
17883
|
-
const setOptionRef =
|
|
17940
|
+
const setOptionRef = React67.useCallback(
|
|
17884
17941
|
(index, node) => {
|
|
17885
17942
|
optionRefs.current[index] = node;
|
|
17886
17943
|
},
|
|
@@ -17900,23 +17957,23 @@ function useDesktopSelect({
|
|
|
17900
17957
|
}
|
|
17901
17958
|
|
|
17902
17959
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
17903
|
-
var
|
|
17960
|
+
var React68 = __toESM(require("react"), 1);
|
|
17904
17961
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
17905
|
-
const [pendingValue, setPendingValue] =
|
|
17962
|
+
const [pendingValue, setPendingValue] = React68.useState(
|
|
17906
17963
|
value ?? null
|
|
17907
17964
|
);
|
|
17908
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
17909
|
-
const mobileListRef =
|
|
17910
|
-
const scrollSettleTimeoutRef =
|
|
17911
|
-
const scrollAnimationFrameRef =
|
|
17912
|
-
const getTargetIndex =
|
|
17965
|
+
const [mobileScrollTop, setMobileScrollTop] = React68.useState(0);
|
|
17966
|
+
const mobileListRef = React68.useRef(null);
|
|
17967
|
+
const scrollSettleTimeoutRef = React68.useRef(null);
|
|
17968
|
+
const scrollAnimationFrameRef = React68.useRef(null);
|
|
17969
|
+
const getTargetIndex = React68.useCallback(
|
|
17913
17970
|
(targetValue) => {
|
|
17914
17971
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
17915
17972
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
17916
17973
|
},
|
|
17917
17974
|
[options]
|
|
17918
17975
|
);
|
|
17919
|
-
const syncScrollPosition =
|
|
17976
|
+
const syncScrollPosition = React68.useCallback(
|
|
17920
17977
|
(targetValue, behavior = "instant") => {
|
|
17921
17978
|
const targetIndex = getTargetIndex(targetValue);
|
|
17922
17979
|
if (targetIndex < 0) return;
|
|
@@ -17935,27 +17992,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17935
17992
|
},
|
|
17936
17993
|
[getTargetIndex, options]
|
|
17937
17994
|
);
|
|
17938
|
-
const clearScrollSettleTimeout =
|
|
17995
|
+
const clearScrollSettleTimeout = React68.useCallback(() => {
|
|
17939
17996
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
17940
17997
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
17941
17998
|
scrollSettleTimeoutRef.current = null;
|
|
17942
17999
|
}, []);
|
|
17943
|
-
const clearScrollAnimationFrame =
|
|
18000
|
+
const clearScrollAnimationFrame = React68.useCallback(() => {
|
|
17944
18001
|
if (scrollAnimationFrameRef.current === null) return;
|
|
17945
18002
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
17946
18003
|
scrollAnimationFrameRef.current = null;
|
|
17947
18004
|
}, []);
|
|
17948
|
-
|
|
18005
|
+
React68.useEffect(
|
|
17949
18006
|
() => () => {
|
|
17950
18007
|
clearScrollSettleTimeout();
|
|
17951
18008
|
clearScrollAnimationFrame();
|
|
17952
18009
|
},
|
|
17953
18010
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
17954
18011
|
);
|
|
17955
|
-
|
|
18012
|
+
React68.useEffect(() => {
|
|
17956
18013
|
setPendingValue(value ?? null);
|
|
17957
18014
|
}, [value]);
|
|
17958
|
-
|
|
18015
|
+
React68.useLayoutEffect(() => {
|
|
17959
18016
|
if (!isMobile3 || !isOpen) return;
|
|
17960
18017
|
const frameId = window.requestAnimationFrame(() => {
|
|
17961
18018
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -17964,7 +18021,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17964
18021
|
window.cancelAnimationFrame(frameId);
|
|
17965
18022
|
};
|
|
17966
18023
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
17967
|
-
const settleScroll =
|
|
18024
|
+
const settleScroll = React68.useCallback(() => {
|
|
17968
18025
|
if (!mobileListRef.current) return;
|
|
17969
18026
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
17970
18027
|
const nextOption = options[nextIndex];
|
|
@@ -17976,13 +18033,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17976
18033
|
}
|
|
17977
18034
|
setPendingValue(nextOption);
|
|
17978
18035
|
}, [options, pendingValue]);
|
|
17979
|
-
const scheduleScrollSettle =
|
|
18036
|
+
const scheduleScrollSettle = React68.useCallback(() => {
|
|
17980
18037
|
clearScrollSettleTimeout();
|
|
17981
18038
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
17982
18039
|
settleScroll();
|
|
17983
18040
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
17984
18041
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
17985
|
-
const handleScroll =
|
|
18042
|
+
const handleScroll = React68.useCallback(() => {
|
|
17986
18043
|
if (!mobileListRef.current) return;
|
|
17987
18044
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
17988
18045
|
clearScrollAnimationFrame();
|
|
@@ -17992,7 +18049,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17992
18049
|
});
|
|
17993
18050
|
scheduleScrollSettle();
|
|
17994
18051
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
17995
|
-
const focusOptionByIndex =
|
|
18052
|
+
const focusOptionByIndex = React68.useCallback(
|
|
17996
18053
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
17997
18054
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
17998
18055
|
const option = options[index];
|
|
@@ -18010,7 +18067,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18010
18067
|
},
|
|
18011
18068
|
[options, scheduleScrollSettle]
|
|
18012
18069
|
);
|
|
18013
|
-
const handleOptionClick =
|
|
18070
|
+
const handleOptionClick = React68.useCallback(
|
|
18014
18071
|
(option) => {
|
|
18015
18072
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
18016
18073
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -18019,7 +18076,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18019
18076
|
},
|
|
18020
18077
|
[disabled, focusOptionByIndex, options]
|
|
18021
18078
|
);
|
|
18022
|
-
const moveByStep =
|
|
18079
|
+
const moveByStep = React68.useCallback(
|
|
18023
18080
|
(step) => {
|
|
18024
18081
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
18025
18082
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -18031,7 +18088,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18031
18088
|
},
|
|
18032
18089
|
[focusOptionByIndex, options, pendingValue]
|
|
18033
18090
|
);
|
|
18034
|
-
const moveToBoundary =
|
|
18091
|
+
const moveToBoundary = React68.useCallback(
|
|
18035
18092
|
(boundary) => {
|
|
18036
18093
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
18037
18094
|
if (targetIndex >= 0) {
|
|
@@ -18040,7 +18097,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18040
18097
|
},
|
|
18041
18098
|
[focusOptionByIndex, options]
|
|
18042
18099
|
);
|
|
18043
|
-
const syncPendingValue =
|
|
18100
|
+
const syncPendingValue = React68.useCallback(
|
|
18044
18101
|
(nextValue) => {
|
|
18045
18102
|
const normalizedValue = nextValue ?? null;
|
|
18046
18103
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -18068,9 +18125,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18068
18125
|
}
|
|
18069
18126
|
|
|
18070
18127
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
18071
|
-
var
|
|
18128
|
+
var React69 = __toESM(require("react"), 1);
|
|
18072
18129
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
18073
|
-
const reactId =
|
|
18130
|
+
const reactId = React69.useId().replace(/:/g, "");
|
|
18074
18131
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
18075
18132
|
const triggerId = `${baseId}-trigger`;
|
|
18076
18133
|
const labelId = `${baseId}-label`;
|
|
@@ -18080,7 +18137,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
18080
18137
|
const listboxId = `${baseId}-listbox`;
|
|
18081
18138
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
18082
18139
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
18083
|
-
const getOptionId2 =
|
|
18140
|
+
const getOptionId2 = React69.useCallback(
|
|
18084
18141
|
(index) => `${baseId}-option-${index}`,
|
|
18085
18142
|
[baseId]
|
|
18086
18143
|
);
|
|
@@ -18099,7 +18156,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
18099
18156
|
|
|
18100
18157
|
// src/airbnb-fields/select/Select.tsx
|
|
18101
18158
|
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
18102
|
-
var AirbnbSelect =
|
|
18159
|
+
var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
|
|
18103
18160
|
options = [],
|
|
18104
18161
|
value,
|
|
18105
18162
|
onChange,
|
|
@@ -18126,8 +18183,8 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
|
|
|
18126
18183
|
noOptionsMessage
|
|
18127
18184
|
}, ref) {
|
|
18128
18185
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18129
|
-
const [isOpen, setIsOpen] =
|
|
18130
|
-
const containerRef =
|
|
18186
|
+
const [isOpen, setIsOpen] = React70.useState(false);
|
|
18187
|
+
const containerRef = React70.useRef(null);
|
|
18131
18188
|
const hasValue = Boolean(value);
|
|
18132
18189
|
const helperText = placeholder ?? label;
|
|
18133
18190
|
const shouldDescribeHelperText = !hasValue && helperText !== label;
|
|
@@ -18188,12 +18245,12 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
|
|
|
18188
18245
|
onOutsideClick: () => setIsOpen(false),
|
|
18189
18246
|
isDisabled: !isOpen || isMobile3
|
|
18190
18247
|
});
|
|
18191
|
-
|
|
18248
|
+
React70.useEffect(() => {
|
|
18192
18249
|
if (isBlocked) {
|
|
18193
18250
|
setIsOpen(false);
|
|
18194
18251
|
}
|
|
18195
18252
|
}, [isBlocked]);
|
|
18196
|
-
|
|
18253
|
+
React70.useEffect(
|
|
18197
18254
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
18198
18255
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
18199
18256
|
return;
|
|
@@ -18205,7 +18262,7 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
|
|
|
18205
18262
|
},
|
|
18206
18263
|
[onChange, options, value]
|
|
18207
18264
|
);
|
|
18208
|
-
const handleMobileOpenChange =
|
|
18265
|
+
const handleMobileOpenChange = React70.useCallback(
|
|
18209
18266
|
(nextOpen) => {
|
|
18210
18267
|
if (isBlocked && nextOpen) return;
|
|
18211
18268
|
setIsOpen(nextOpen);
|
|
@@ -18216,7 +18273,7 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
|
|
|
18216
18273
|
},
|
|
18217
18274
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
18218
18275
|
);
|
|
18219
|
-
const handleMobileDone =
|
|
18276
|
+
const handleMobileDone = React70.useCallback(() => {
|
|
18220
18277
|
if (isBlocked) return;
|
|
18221
18278
|
const finalOption = pendingValue;
|
|
18222
18279
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -18225,7 +18282,7 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
|
|
|
18225
18282
|
setIsOpen(false);
|
|
18226
18283
|
focusTrigger();
|
|
18227
18284
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
18228
|
-
const handleTriggerClick =
|
|
18285
|
+
const handleTriggerClick = React70.useCallback(() => {
|
|
18229
18286
|
if (isBlocked) return;
|
|
18230
18287
|
setIsOpen((prev) => {
|
|
18231
18288
|
const nextOpen = !prev;
|
|
@@ -18399,7 +18456,7 @@ function formatPhoneCodeOptionLabel(option) {
|
|
|
18399
18456
|
const value = String(option.value);
|
|
18400
18457
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
18401
18458
|
}
|
|
18402
|
-
var AirbnbPhoneField =
|
|
18459
|
+
var AirbnbPhoneField = React71.forwardRef(
|
|
18403
18460
|
({
|
|
18404
18461
|
variant = "default",
|
|
18405
18462
|
label,
|
|
@@ -18423,8 +18480,8 @@ var AirbnbPhoneField = React70.forwardRef(
|
|
|
18423
18480
|
mobileTitle,
|
|
18424
18481
|
codePlaceholder = "+00"
|
|
18425
18482
|
}, ref) => {
|
|
18426
|
-
const inputId =
|
|
18427
|
-
const codeOptions =
|
|
18483
|
+
const inputId = React71.useId();
|
|
18484
|
+
const codeOptions = React71.useMemo(
|
|
18428
18485
|
() => options.map((option) => ({
|
|
18429
18486
|
value: option.value,
|
|
18430
18487
|
label: formatPhoneCodeOptionLabel(option),
|
|
@@ -18432,7 +18489,7 @@ var AirbnbPhoneField = React70.forwardRef(
|
|
|
18432
18489
|
})),
|
|
18433
18490
|
[options]
|
|
18434
18491
|
);
|
|
18435
|
-
const selectedCodeOption =
|
|
18492
|
+
const selectedCodeOption = React71.useMemo(
|
|
18436
18493
|
() => codeOptions.find((option) => option.value === value?.code) ?? null,
|
|
18437
18494
|
[codeOptions, value?.code]
|
|
18438
18495
|
);
|
|
@@ -18574,7 +18631,7 @@ var AirbnbPhoneField = React70.forwardRef(
|
|
|
18574
18631
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
18575
18632
|
|
|
18576
18633
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
18577
|
-
var
|
|
18634
|
+
var React72 = __toESM(require("react"), 1);
|
|
18578
18635
|
var import_lucide_react54 = require("lucide-react");
|
|
18579
18636
|
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
18580
18637
|
var import_react90 = require("react");
|
|
@@ -18619,13 +18676,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18619
18676
|
loadingMessage
|
|
18620
18677
|
}, ref) => {
|
|
18621
18678
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18622
|
-
const reactId =
|
|
18623
|
-
const [open, setOpen] =
|
|
18624
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
18625
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
18626
|
-
const containerRef =
|
|
18627
|
-
const triggerRef =
|
|
18628
|
-
const inputRef =
|
|
18679
|
+
const reactId = React72.useId();
|
|
18680
|
+
const [open, setOpen] = React72.useState(false);
|
|
18681
|
+
const [internalSearchValue, setInternalSearchValue] = React72.useState("");
|
|
18682
|
+
const [highlightedIndex, setHighlightedIndex] = React72.useState(-1);
|
|
18683
|
+
const containerRef = React72.useRef(null);
|
|
18684
|
+
const triggerRef = React72.useRef(null);
|
|
18685
|
+
const inputRef = React72.useRef(null);
|
|
18629
18686
|
const listboxId = `${reactId}-listbox`;
|
|
18630
18687
|
const labelId = `${reactId}-label`;
|
|
18631
18688
|
const valueId = `${reactId}-value`;
|
|
@@ -18634,13 +18691,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18634
18691
|
const searchInputId = `${reactId}-search`;
|
|
18635
18692
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
18636
18693
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
18637
|
-
const visibleOptions =
|
|
18694
|
+
const visibleOptions = React72.useMemo(() => {
|
|
18638
18695
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
18639
18696
|
return options;
|
|
18640
18697
|
}
|
|
18641
18698
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
18642
18699
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
18643
|
-
const selectedIndex =
|
|
18700
|
+
const selectedIndex = React72.useMemo(
|
|
18644
18701
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
18645
18702
|
[value?.value, visibleOptions]
|
|
18646
18703
|
);
|
|
@@ -18666,7 +18723,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18666
18723
|
},
|
|
18667
18724
|
[handleOnOpenChange]
|
|
18668
18725
|
);
|
|
18669
|
-
|
|
18726
|
+
React72.useEffect(() => {
|
|
18670
18727
|
if (isBlocked) {
|
|
18671
18728
|
setSelectOpen(false);
|
|
18672
18729
|
return;
|
|
@@ -18679,7 +18736,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18679
18736
|
window.cancelAnimationFrame(frameId);
|
|
18680
18737
|
};
|
|
18681
18738
|
}, [isBlocked, open, setSelectOpen]);
|
|
18682
|
-
|
|
18739
|
+
React72.useEffect(() => {
|
|
18683
18740
|
if (!open) {
|
|
18684
18741
|
setHighlightedIndex(-1);
|
|
18685
18742
|
return;
|
|
@@ -18774,7 +18831,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18774
18831
|
onOptionHover: setHighlightedIndex
|
|
18775
18832
|
}
|
|
18776
18833
|
);
|
|
18777
|
-
|
|
18834
|
+
React72.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
18778
18835
|
return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
18779
18836
|
name && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
18780
18837
|
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
@@ -18853,7 +18910,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18853
18910
|
) : null
|
|
18854
18911
|
] });
|
|
18855
18912
|
};
|
|
18856
|
-
var AirbnbSearchableSelect =
|
|
18913
|
+
var AirbnbSearchableSelect = React72.forwardRef(
|
|
18857
18914
|
AirbnbSearchableSelectInternal
|
|
18858
18915
|
);
|
|
18859
18916
|
function AirbnbSearchableSelectContent({
|
|
@@ -18880,9 +18937,9 @@ function AirbnbSearchableSelectContent({
|
|
|
18880
18937
|
onOptionClick,
|
|
18881
18938
|
onOptionHover
|
|
18882
18939
|
}) {
|
|
18883
|
-
const listRef =
|
|
18884
|
-
const lastLoadMoreOptionsLengthRef =
|
|
18885
|
-
const previousHighlightedIndexRef =
|
|
18940
|
+
const listRef = React72.useRef(null);
|
|
18941
|
+
const lastLoadMoreOptionsLengthRef = React72.useRef(null);
|
|
18942
|
+
const previousHighlightedIndexRef = React72.useRef(highlightedIndex);
|
|
18886
18943
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
18887
18944
|
const virtualizer = (0, import_react_virtual3.useVirtualizer)({
|
|
18888
18945
|
count: rowCount,
|
|
@@ -18893,7 +18950,7 @@ function AirbnbSearchableSelectContent({
|
|
|
18893
18950
|
const virtualItems = virtualizer.getVirtualItems();
|
|
18894
18951
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
18895
18952
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
18896
|
-
|
|
18953
|
+
React72.useEffect(() => {
|
|
18897
18954
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
18898
18955
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
18899
18956
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -18901,7 +18958,7 @@ function AirbnbSearchableSelectContent({
|
|
|
18901
18958
|
onLoadMore?.();
|
|
18902
18959
|
}
|
|
18903
18960
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
18904
|
-
|
|
18961
|
+
React72.useEffect(() => {
|
|
18905
18962
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
18906
18963
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
18907
18964
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -19019,11 +19076,11 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
19019
19076
|
}
|
|
19020
19077
|
|
|
19021
19078
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
19022
|
-
var
|
|
19079
|
+
var React73 = __toESM(require("react"), 1);
|
|
19023
19080
|
var import_react_i18next40 = require("react-i18next");
|
|
19024
19081
|
var import_lucide_react55 = require("lucide-react");
|
|
19025
19082
|
var import_jsx_runtime181 = require("react/jsx-runtime");
|
|
19026
|
-
var AirbnbSearchInput =
|
|
19083
|
+
var AirbnbSearchInput = React73.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
19027
19084
|
const { t } = (0, import_react_i18next40.useTranslation)();
|
|
19028
19085
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
19029
19086
|
return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|