@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.js
CHANGED
|
@@ -11973,10 +11973,75 @@ function ResponsiveDropdown({
|
|
|
11973
11973
|
}
|
|
11974
11974
|
|
|
11975
11975
|
// src/dashboard/input/Input.tsx
|
|
11976
|
-
import * as
|
|
11976
|
+
import * as React44 from "react";
|
|
11977
11977
|
import { Eye, Minus as Minus4, Plus as Plus3, X as X9 } from "lucide-react";
|
|
11978
11978
|
import { useTranslation as useTranslation26 } from "react-i18next";
|
|
11979
11979
|
|
|
11980
|
+
// src/dashboard/input/useInputValueState.ts
|
|
11981
|
+
import * as React43 from "react";
|
|
11982
|
+
var isEmptyValue = (value) => {
|
|
11983
|
+
if (value === void 0 || value === null) return true;
|
|
11984
|
+
return String(value).length === 0;
|
|
11985
|
+
};
|
|
11986
|
+
var getInputEmptyState = ({
|
|
11987
|
+
empty,
|
|
11988
|
+
defaultValue,
|
|
11989
|
+
value
|
|
11990
|
+
}) => {
|
|
11991
|
+
if (typeof empty !== "undefined") return empty;
|
|
11992
|
+
if (typeof value !== "undefined") return isEmptyValue(value);
|
|
11993
|
+
return isEmptyValue(defaultValue);
|
|
11994
|
+
};
|
|
11995
|
+
function useInputValueState({
|
|
11996
|
+
empty,
|
|
11997
|
+
value,
|
|
11998
|
+
defaultValue
|
|
11999
|
+
}) {
|
|
12000
|
+
const inputRef = React43.useRef(null);
|
|
12001
|
+
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
12002
|
+
const propsAreEmpty = getInputEmptyState({ empty, value, defaultValue });
|
|
12003
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React43.useState(propsAreEmpty);
|
|
12004
|
+
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
12005
|
+
const setNativeValue = React43.useCallback(
|
|
12006
|
+
(nextValue) => {
|
|
12007
|
+
if (isControlled) return;
|
|
12008
|
+
const nextIsEmpty = nextValue.length === 0;
|
|
12009
|
+
setNativeIsEmpty(
|
|
12010
|
+
(prevIsEmpty) => prevIsEmpty === nextIsEmpty ? prevIsEmpty : nextIsEmpty
|
|
12011
|
+
);
|
|
12012
|
+
},
|
|
12013
|
+
[isControlled]
|
|
12014
|
+
);
|
|
12015
|
+
const syncValueState = React43.useCallback(() => {
|
|
12016
|
+
if (!inputRef.current) return;
|
|
12017
|
+
setNativeValue(inputRef.current.value);
|
|
12018
|
+
}, [setNativeValue]);
|
|
12019
|
+
React43.useLayoutEffect(() => {
|
|
12020
|
+
syncValueState();
|
|
12021
|
+
});
|
|
12022
|
+
React43.useEffect(() => {
|
|
12023
|
+
const input = inputRef.current;
|
|
12024
|
+
const form = input?.form;
|
|
12025
|
+
if (isControlled || !form) return;
|
|
12026
|
+
const handleReset = () => {
|
|
12027
|
+
if (typeof window !== "undefined" && window.requestAnimationFrame) {
|
|
12028
|
+
window.requestAnimationFrame(syncValueState);
|
|
12029
|
+
return;
|
|
12030
|
+
}
|
|
12031
|
+
globalThis.setTimeout(syncValueState, 0);
|
|
12032
|
+
};
|
|
12033
|
+
form.addEventListener("reset", handleReset);
|
|
12034
|
+
return () => form.removeEventListener("reset", handleReset);
|
|
12035
|
+
}, [isControlled, syncValueState]);
|
|
12036
|
+
return {
|
|
12037
|
+
inputRef,
|
|
12038
|
+
isControlled,
|
|
12039
|
+
isEmpty,
|
|
12040
|
+
setNativeValue,
|
|
12041
|
+
syncValueState
|
|
12042
|
+
};
|
|
12043
|
+
}
|
|
12044
|
+
|
|
11980
12045
|
// src/dashboard/_fieldset/Fieldset.tsx
|
|
11981
12046
|
import { Fragment as Fragment15, jsx as jsx142, jsxs as jsxs89 } from "react/jsx-runtime";
|
|
11982
12047
|
function Fieldset({
|
|
@@ -12072,17 +12137,7 @@ function Fieldset({
|
|
|
12072
12137
|
|
|
12073
12138
|
// src/dashboard/input/Input.tsx
|
|
12074
12139
|
import { jsx as jsx143, jsxs as jsxs90 } from "react/jsx-runtime";
|
|
12075
|
-
var
|
|
12076
|
-
empty,
|
|
12077
|
-
defaultValue,
|
|
12078
|
-
value
|
|
12079
|
-
}) => {
|
|
12080
|
-
if (typeof empty !== "undefined") return empty;
|
|
12081
|
-
if (value === 0 || defaultValue === 0) return false;
|
|
12082
|
-
return !value && !defaultValue;
|
|
12083
|
-
};
|
|
12084
|
-
var checkInputValueIfEmpty = (value) => value.length === 0;
|
|
12085
|
-
var Input = React43.forwardRef(
|
|
12140
|
+
var Input = React44.forwardRef(
|
|
12086
12141
|
({
|
|
12087
12142
|
value,
|
|
12088
12143
|
defaultValue,
|
|
@@ -12120,18 +12175,18 @@ var Input = React43.forwardRef(
|
|
|
12120
12175
|
renderErrorMessage = true,
|
|
12121
12176
|
...props
|
|
12122
12177
|
}, ref) => {
|
|
12123
|
-
const generatedId =
|
|
12178
|
+
const generatedId = React44.useId();
|
|
12124
12179
|
const inputId = id ?? name ?? generatedId;
|
|
12125
12180
|
const errorId = `${inputId}-error`;
|
|
12126
12181
|
const { t } = useTranslation26();
|
|
12127
|
-
const
|
|
12128
|
-
|
|
12129
|
-
|
|
12130
|
-
|
|
12131
|
-
|
|
12132
|
-
const [
|
|
12133
|
-
const [
|
|
12134
|
-
const
|
|
12182
|
+
const { inputRef, isControlled, isEmpty, setNativeValue, syncValueState } = useInputValueState({
|
|
12183
|
+
empty,
|
|
12184
|
+
value,
|
|
12185
|
+
defaultValue
|
|
12186
|
+
});
|
|
12187
|
+
const [inputType, setInputType] = React44.useState(type);
|
|
12188
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React44.useState(false);
|
|
12189
|
+
const [isFocused, setIsFocused] = React44.useState(false);
|
|
12135
12190
|
const combinedInputRef = useCombinedRef(inputRef, ref);
|
|
12136
12191
|
const prevInputType = usePrevious(inputType);
|
|
12137
12192
|
const isPasswordReveal = (prevInputType === "password" || type === "password") && !isEmpty;
|
|
@@ -12146,13 +12201,13 @@ var Input = React43.forwardRef(
|
|
|
12146
12201
|
setIsPasswordRevealed(true);
|
|
12147
12202
|
}
|
|
12148
12203
|
};
|
|
12149
|
-
|
|
12204
|
+
React44.useEffect(() => {
|
|
12150
12205
|
setInputType(type);
|
|
12151
12206
|
}, [type]);
|
|
12152
12207
|
const handleChange = (event) => {
|
|
12153
12208
|
if (readOnly || disabled) return;
|
|
12154
|
-
if (!
|
|
12155
|
-
|
|
12209
|
+
if (!isControlled) {
|
|
12210
|
+
setNativeValue(event.currentTarget.value);
|
|
12156
12211
|
}
|
|
12157
12212
|
onChange?.(event);
|
|
12158
12213
|
};
|
|
@@ -12163,10 +12218,12 @@ var Input = React43.forwardRef(
|
|
|
12163
12218
|
const handleFocus = (event) => {
|
|
12164
12219
|
if (readOnly || disabled) return;
|
|
12165
12220
|
onFocus?.(event);
|
|
12221
|
+
syncValueState();
|
|
12166
12222
|
setIsFocused(true);
|
|
12167
12223
|
};
|
|
12168
12224
|
const handleBlur = (event) => {
|
|
12169
12225
|
onBlur?.(event);
|
|
12226
|
+
syncValueState();
|
|
12170
12227
|
setIsFocused(false);
|
|
12171
12228
|
};
|
|
12172
12229
|
const showRightPaddingForReset = Boolean(onReset);
|
|
@@ -12343,7 +12400,7 @@ var Input = React43.forwardRef(
|
|
|
12343
12400
|
Input.displayName = "Input";
|
|
12344
12401
|
|
|
12345
12402
|
// src/dashboard/select/Select.tsx
|
|
12346
|
-
import * as
|
|
12403
|
+
import * as React48 from "react";
|
|
12347
12404
|
import { useTranslation as useTranslation30 } from "react-i18next";
|
|
12348
12405
|
|
|
12349
12406
|
// src/dashboard/_select-internals/SelectFieldShell.tsx
|
|
@@ -12694,14 +12751,14 @@ function SelectTrigger({
|
|
|
12694
12751
|
}
|
|
12695
12752
|
|
|
12696
12753
|
// src/dashboard/_select-internals/useSelectIds.ts
|
|
12697
|
-
import * as
|
|
12754
|
+
import * as React45 from "react";
|
|
12698
12755
|
function useSelectIds({
|
|
12699
12756
|
name,
|
|
12700
12757
|
hasValue,
|
|
12701
12758
|
error,
|
|
12702
12759
|
hideErrorMessage
|
|
12703
12760
|
}) {
|
|
12704
|
-
const reactId =
|
|
12761
|
+
const reactId = React45.useId().replace(/:/g, "");
|
|
12705
12762
|
const baseId = name ? `dash-select-${name}` : `dash-select-${reactId}`;
|
|
12706
12763
|
const triggerId = `${baseId}-trigger`;
|
|
12707
12764
|
const labelId = `${baseId}-label`;
|
|
@@ -12711,7 +12768,7 @@ function useSelectIds({
|
|
|
12711
12768
|
const listboxId = `${baseId}-listbox`;
|
|
12712
12769
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
12713
12770
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
12714
|
-
const getOptionId2 =
|
|
12771
|
+
const getOptionId2 = React45.useCallback(
|
|
12715
12772
|
(index) => `${baseId}-option-${index}`,
|
|
12716
12773
|
[baseId]
|
|
12717
12774
|
);
|
|
@@ -12729,21 +12786,21 @@ function useSelectIds({
|
|
|
12729
12786
|
}
|
|
12730
12787
|
|
|
12731
12788
|
// src/dashboard/_select-internals/useSelectMenuState.ts
|
|
12732
|
-
import * as
|
|
12789
|
+
import * as React46 from "react";
|
|
12733
12790
|
function useSelectMenuState({
|
|
12734
12791
|
isBlocked,
|
|
12735
12792
|
isMobile: isMobile3,
|
|
12736
12793
|
onOutsideClick
|
|
12737
12794
|
}) {
|
|
12738
|
-
const containerRef =
|
|
12739
|
-
const [isOpen, setIsOpen] =
|
|
12740
|
-
const openMenu =
|
|
12795
|
+
const containerRef = React46.useRef(null);
|
|
12796
|
+
const [isOpen, setIsOpen] = React46.useState(false);
|
|
12797
|
+
const openMenu = React46.useCallback(() => {
|
|
12741
12798
|
setIsOpen(true);
|
|
12742
12799
|
}, []);
|
|
12743
|
-
const closeMenu =
|
|
12800
|
+
const closeMenu = React46.useCallback(() => {
|
|
12744
12801
|
setIsOpen(false);
|
|
12745
12802
|
}, []);
|
|
12746
|
-
const toggleMenu =
|
|
12803
|
+
const toggleMenu = React46.useCallback(() => {
|
|
12747
12804
|
if (isBlocked) return;
|
|
12748
12805
|
setIsOpen((prev) => !prev);
|
|
12749
12806
|
}, [isBlocked]);
|
|
@@ -12755,25 +12812,25 @@ function useSelectMenuState({
|
|
|
12755
12812
|
},
|
|
12756
12813
|
isDisabled: !isOpen || isMobile3
|
|
12757
12814
|
});
|
|
12758
|
-
|
|
12815
|
+
React46.useEffect(() => {
|
|
12759
12816
|
if (isBlocked) setIsOpen(false);
|
|
12760
12817
|
}, [isBlocked]);
|
|
12761
12818
|
return { containerRef, isOpen, openMenu, closeMenu, toggleMenu, setIsOpen };
|
|
12762
12819
|
}
|
|
12763
12820
|
|
|
12764
12821
|
// src/dashboard/_select-internals/useSelectSearch.ts
|
|
12765
|
-
import * as
|
|
12822
|
+
import * as React47 from "react";
|
|
12766
12823
|
function useSelectSearch({
|
|
12767
12824
|
options,
|
|
12768
12825
|
searchable = true,
|
|
12769
12826
|
filterOption = defaultFilterOption
|
|
12770
12827
|
}) {
|
|
12771
|
-
const [searchValue, setSearchValue] =
|
|
12772
|
-
const filteredOptions =
|
|
12828
|
+
const [searchValue, setSearchValue] = React47.useState("");
|
|
12829
|
+
const filteredOptions = React47.useMemo(() => {
|
|
12773
12830
|
if (!searchable || !searchValue) return options;
|
|
12774
12831
|
return options.filter((option) => filterOption(option, searchValue));
|
|
12775
12832
|
}, [options, searchable, searchValue, filterOption]);
|
|
12776
|
-
const clearSearch =
|
|
12833
|
+
const clearSearch = React47.useCallback(() => setSearchValue(""), []);
|
|
12777
12834
|
return { searchValue, setSearchValue, filteredOptions, clearSearch };
|
|
12778
12835
|
}
|
|
12779
12836
|
|
|
@@ -12807,11 +12864,11 @@ function SelectInternal({
|
|
|
12807
12864
|
filterOption,
|
|
12808
12865
|
helperText
|
|
12809
12866
|
}, ref) {
|
|
12810
|
-
const triggerRef =
|
|
12811
|
-
const searchInputRef =
|
|
12812
|
-
const listRef =
|
|
12813
|
-
const optionRefs =
|
|
12814
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
12867
|
+
const triggerRef = React48.useRef(null);
|
|
12868
|
+
const searchInputRef = React48.useRef(null);
|
|
12869
|
+
const listRef = React48.useRef(null);
|
|
12870
|
+
const optionRefs = React48.useRef([]);
|
|
12871
|
+
const [highlightedIndex, setHighlightedIndex] = React48.useState(-1);
|
|
12815
12872
|
const isMobile3 = useIsMobile();
|
|
12816
12873
|
const { t } = useTranslation30();
|
|
12817
12874
|
const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
|
|
@@ -12831,8 +12888,8 @@ function SelectInternal({
|
|
|
12831
12888
|
searchable,
|
|
12832
12889
|
filterOption
|
|
12833
12890
|
});
|
|
12834
|
-
|
|
12835
|
-
|
|
12891
|
+
React48.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
12892
|
+
React48.useEffect(() => {
|
|
12836
12893
|
if (!isOpen) {
|
|
12837
12894
|
setSearchValue("");
|
|
12838
12895
|
setHighlightedIndex(-1);
|
|
@@ -12847,11 +12904,11 @@ function SelectInternal({
|
|
|
12847
12904
|
return () => window.cancelAnimationFrame(frame);
|
|
12848
12905
|
}
|
|
12849
12906
|
}, [isOpen, filteredOptions, searchable, value, setSearchValue]);
|
|
12850
|
-
|
|
12907
|
+
React48.useEffect(() => {
|
|
12851
12908
|
if (!isOpen || highlightedIndex < 0) return;
|
|
12852
12909
|
optionRefs.current[highlightedIndex]?.scrollIntoView({ block: "nearest" });
|
|
12853
12910
|
}, [highlightedIndex, isOpen]);
|
|
12854
|
-
|
|
12911
|
+
React48.useEffect(
|
|
12855
12912
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
12856
12913
|
if (value?.value === void 0 || value.value === null || value.label !== "")
|
|
12857
12914
|
return;
|
|
@@ -13009,12 +13066,12 @@ function SelectInternal({
|
|
|
13009
13066
|
}
|
|
13010
13067
|
);
|
|
13011
13068
|
}
|
|
13012
|
-
var Select =
|
|
13069
|
+
var Select = React48.forwardRef(
|
|
13013
13070
|
SelectInternal
|
|
13014
13071
|
);
|
|
13015
13072
|
|
|
13016
13073
|
// src/dashboard/multi-select/MultiSelect.tsx
|
|
13017
|
-
import * as
|
|
13074
|
+
import * as React49 from "react";
|
|
13018
13075
|
import { Search as Search4, SquareX as SquareX3 } from "lucide-react";
|
|
13019
13076
|
import { useTranslation as useTranslation32 } from "react-i18next";
|
|
13020
13077
|
|
|
@@ -13082,15 +13139,15 @@ function MultiSelectInternal({
|
|
|
13082
13139
|
formatCreateLabel = (input) => `Create "${input}"`,
|
|
13083
13140
|
isValidNewOption
|
|
13084
13141
|
}, ref) {
|
|
13085
|
-
const inputRef =
|
|
13086
|
-
const mobileSearchInputRef =
|
|
13087
|
-
const listRef =
|
|
13088
|
-
const optionRefs =
|
|
13089
|
-
const [isFocused, setIsFocused] =
|
|
13090
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
13142
|
+
const inputRef = React49.useRef(null);
|
|
13143
|
+
const mobileSearchInputRef = React49.useRef(null);
|
|
13144
|
+
const listRef = React49.useRef(null);
|
|
13145
|
+
const optionRefs = React49.useRef([]);
|
|
13146
|
+
const [isFocused, setIsFocused] = React49.useState(false);
|
|
13147
|
+
const [highlightedIndex, setHighlightedIndex] = React49.useState(-1);
|
|
13091
13148
|
const isMobile3 = useIsMobile();
|
|
13092
13149
|
const { t } = useTranslation32();
|
|
13093
|
-
const selectedValues =
|
|
13150
|
+
const selectedValues = React49.useMemo(() => value ?? [], [value]);
|
|
13094
13151
|
const hasValue = selectedValues.length > 0;
|
|
13095
13152
|
const isEmpty = !hasValue;
|
|
13096
13153
|
const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
|
|
@@ -13108,7 +13165,7 @@ function MultiSelectInternal({
|
|
|
13108
13165
|
filterOption
|
|
13109
13166
|
});
|
|
13110
13167
|
const trimmedSearch = searchValue.trim();
|
|
13111
|
-
const canCreateNewOption =
|
|
13168
|
+
const canCreateNewOption = React49.useMemo(() => {
|
|
13112
13169
|
if (!isCreatable || !trimmedSearch) return false;
|
|
13113
13170
|
if (isValidNewOption) return isValidNewOption(trimmedSearch, selectedValues, options);
|
|
13114
13171
|
const lower = trimmedSearch.toLowerCase();
|
|
@@ -13120,17 +13177,17 @@ function MultiSelectInternal({
|
|
|
13120
13177
|
);
|
|
13121
13178
|
return !existsInOptions && !existsInSelected;
|
|
13122
13179
|
}, [isCreatable, trimmedSearch, isValidNewOption, options, selectedValues]);
|
|
13123
|
-
|
|
13180
|
+
React49.useImperativeHandle(
|
|
13124
13181
|
ref,
|
|
13125
13182
|
() => containerRef.current
|
|
13126
13183
|
);
|
|
13127
|
-
|
|
13184
|
+
React49.useEffect(() => {
|
|
13128
13185
|
if (!isOpen) {
|
|
13129
13186
|
clearSearch();
|
|
13130
13187
|
setHighlightedIndex(-1);
|
|
13131
13188
|
}
|
|
13132
13189
|
}, [isOpen, clearSearch]);
|
|
13133
|
-
|
|
13190
|
+
React49.useEffect(() => {
|
|
13134
13191
|
if (!isOpen || filteredOptions.length === 0) {
|
|
13135
13192
|
setHighlightedIndex(-1);
|
|
13136
13193
|
return;
|
|
@@ -13140,7 +13197,7 @@ function MultiSelectInternal({
|
|
|
13140
13197
|
return getFirstEnabledOptionIndex(filteredOptions);
|
|
13141
13198
|
});
|
|
13142
13199
|
}, [isOpen, filteredOptions]);
|
|
13143
|
-
|
|
13200
|
+
React49.useEffect(() => {
|
|
13144
13201
|
if (!isOpen || !isMobile3) return;
|
|
13145
13202
|
const frame = window.requestAnimationFrame(
|
|
13146
13203
|
() => mobileSearchInputRef.current?.focus()
|
|
@@ -13174,7 +13231,7 @@ function MultiSelectInternal({
|
|
|
13174
13231
|
onChange([]);
|
|
13175
13232
|
inputRef.current?.focus();
|
|
13176
13233
|
};
|
|
13177
|
-
const createOption =
|
|
13234
|
+
const createOption = React49.useCallback(() => {
|
|
13178
13235
|
if (!canCreateNewOption) return;
|
|
13179
13236
|
const newOption = onCreateOption?.(trimmedSearch) ?? { value: trimmedSearch, label: trimmedSearch };
|
|
13180
13237
|
onChange([...selectedValues, newOption]);
|
|
@@ -13285,7 +13342,7 @@ function MultiSelectInternal({
|
|
|
13285
13342
|
),
|
|
13286
13343
|
children: [
|
|
13287
13344
|
selectedValues.map(
|
|
13288
|
-
(option) => renderChip ? /* @__PURE__ */ jsx151(
|
|
13345
|
+
(option) => renderChip ? /* @__PURE__ */ jsx151(React49.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ jsx151(
|
|
13289
13346
|
MultiSelectChip,
|
|
13290
13347
|
{
|
|
13291
13348
|
option,
|
|
@@ -13452,21 +13509,21 @@ function MultiSelectInternal({
|
|
|
13452
13509
|
}
|
|
13453
13510
|
);
|
|
13454
13511
|
}
|
|
13455
|
-
var MultiSelect =
|
|
13512
|
+
var MultiSelect = React49.forwardRef(
|
|
13456
13513
|
MultiSelectInternal
|
|
13457
13514
|
);
|
|
13458
13515
|
|
|
13459
13516
|
// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
|
|
13460
|
-
import * as
|
|
13517
|
+
import * as React50 from "react";
|
|
13461
13518
|
import { jsx as jsx152 } from "react/jsx-runtime";
|
|
13462
|
-
var CreatableMultiSelect =
|
|
13519
|
+
var CreatableMultiSelect = React50.forwardRef(
|
|
13463
13520
|
function CreatableMultiSelect2(props, ref) {
|
|
13464
13521
|
return /* @__PURE__ */ jsx152(MultiSelect, { ref, ...props, isCreatable: true });
|
|
13465
13522
|
}
|
|
13466
13523
|
);
|
|
13467
13524
|
|
|
13468
13525
|
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
13469
|
-
import * as
|
|
13526
|
+
import * as React51 from "react";
|
|
13470
13527
|
import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
|
|
13471
13528
|
import { useTranslation as useTranslation33 } from "react-i18next";
|
|
13472
13529
|
|
|
@@ -13604,12 +13661,12 @@ function InfiniteScrollSelectInternal({
|
|
|
13604
13661
|
overscan = DEFAULT_OVERSCAN,
|
|
13605
13662
|
loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD
|
|
13606
13663
|
}, ref) {
|
|
13607
|
-
const triggerRef =
|
|
13608
|
-
const searchInputRef =
|
|
13609
|
-
const scrollRef =
|
|
13610
|
-
const previousHighlightedIndexRef =
|
|
13611
|
-
const lastLoadMoreOptionsLengthRef =
|
|
13612
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
13664
|
+
const triggerRef = React51.useRef(null);
|
|
13665
|
+
const searchInputRef = React51.useRef(null);
|
|
13666
|
+
const scrollRef = React51.useRef(null);
|
|
13667
|
+
const previousHighlightedIndexRef = React51.useRef(-1);
|
|
13668
|
+
const lastLoadMoreOptionsLengthRef = React51.useRef(null);
|
|
13669
|
+
const [highlightedIndex, setHighlightedIndex] = React51.useState(-1);
|
|
13613
13670
|
const isMobile3 = useIsMobile();
|
|
13614
13671
|
const { t } = useTranslation33();
|
|
13615
13672
|
const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
|
|
@@ -13637,15 +13694,15 @@ function InfiniteScrollSelectInternal({
|
|
|
13637
13694
|
estimateSize: () => itemHeight,
|
|
13638
13695
|
overscan
|
|
13639
13696
|
});
|
|
13640
|
-
|
|
13641
|
-
|
|
13697
|
+
React51.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
13698
|
+
React51.useEffect(() => {
|
|
13642
13699
|
if (isOpen) return;
|
|
13643
13700
|
setSearchValue("");
|
|
13644
13701
|
setHighlightedIndex(-1);
|
|
13645
13702
|
previousHighlightedIndexRef.current = -1;
|
|
13646
13703
|
lastLoadMoreOptionsLengthRef.current = null;
|
|
13647
13704
|
}, [isOpen, setSearchValue]);
|
|
13648
|
-
|
|
13705
|
+
React51.useEffect(() => {
|
|
13649
13706
|
if (!isOpen) return;
|
|
13650
13707
|
setHighlightedIndex((current) => {
|
|
13651
13708
|
const option = current >= 0 ? filteredOptions[current] : void 0;
|
|
@@ -13654,13 +13711,13 @@ function InfiniteScrollSelectInternal({
|
|
|
13654
13711
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(filteredOptions);
|
|
13655
13712
|
});
|
|
13656
13713
|
}, [isOpen, filteredOptions, value]);
|
|
13657
|
-
|
|
13714
|
+
React51.useEffect(() => {
|
|
13658
13715
|
if (!isOpen || !searchable) return;
|
|
13659
13716
|
const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
|
|
13660
13717
|
return () => window.cancelAnimationFrame(frame);
|
|
13661
13718
|
}, [isOpen, searchable]);
|
|
13662
13719
|
const virtualItems = virtualizer.getVirtualItems();
|
|
13663
|
-
|
|
13720
|
+
React51.useEffect(() => {
|
|
13664
13721
|
if (!isOpen || !canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
13665
13722
|
if (virtualItems.length === 0) return;
|
|
13666
13723
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
@@ -13677,7 +13734,7 @@ function InfiniteScrollSelectInternal({
|
|
|
13677
13734
|
loadMoreThreshold,
|
|
13678
13735
|
virtualItems
|
|
13679
13736
|
]);
|
|
13680
|
-
|
|
13737
|
+
React51.useEffect(() => {
|
|
13681
13738
|
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
13682
13739
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
13683
13740
|
if (!isOpen || highlightedIndex < 0 || !changed) return;
|
|
@@ -13846,12 +13903,12 @@ function InfiniteScrollSelectInternal({
|
|
|
13846
13903
|
}
|
|
13847
13904
|
);
|
|
13848
13905
|
}
|
|
13849
|
-
var InfiniteScrollSelect =
|
|
13906
|
+
var InfiniteScrollSelect = React51.forwardRef(
|
|
13850
13907
|
InfiniteScrollSelectInternal
|
|
13851
13908
|
);
|
|
13852
13909
|
|
|
13853
13910
|
// src/dashboard/textarea/Textarea.tsx
|
|
13854
|
-
import * as
|
|
13911
|
+
import * as React52 from "react";
|
|
13855
13912
|
import { useTranslation as useTranslation34 } from "react-i18next";
|
|
13856
13913
|
import { jsx as jsx155, jsxs as jsxs101 } from "react/jsx-runtime";
|
|
13857
13914
|
var LINE_HEIGHT = 20;
|
|
@@ -13861,7 +13918,7 @@ function getEmptyState(empty, value, defaultValue) {
|
|
|
13861
13918
|
if (value !== void 0) return !String(value);
|
|
13862
13919
|
return !defaultValue;
|
|
13863
13920
|
}
|
|
13864
|
-
var Textarea =
|
|
13921
|
+
var Textarea = React52.forwardRef(
|
|
13865
13922
|
function Textarea2({
|
|
13866
13923
|
className,
|
|
13867
13924
|
textareaClassName,
|
|
@@ -13885,15 +13942,15 @@ var Textarea = React51.forwardRef(
|
|
|
13885
13942
|
onInput,
|
|
13886
13943
|
...textareaProps
|
|
13887
13944
|
}, ref) {
|
|
13888
|
-
const innerRef =
|
|
13945
|
+
const innerRef = React52.useRef(null);
|
|
13889
13946
|
const combinedRef = useCombinedRef(ref, innerRef);
|
|
13890
|
-
const reactId =
|
|
13947
|
+
const reactId = React52.useId();
|
|
13891
13948
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
13892
13949
|
const { t } = useTranslation34();
|
|
13893
13950
|
const isInvalid = Boolean(invalid || error);
|
|
13894
13951
|
const isEmpty = getEmptyState(empty, value, defaultValue);
|
|
13895
13952
|
const isBlocked = Boolean(disabled);
|
|
13896
|
-
const resize =
|
|
13953
|
+
const resize = React52.useCallback(() => {
|
|
13897
13954
|
const el = innerRef.current;
|
|
13898
13955
|
if (!el || !autosize) return;
|
|
13899
13956
|
el.style.height = "auto";
|
|
@@ -13903,7 +13960,7 @@ var Textarea = React51.forwardRef(
|
|
|
13903
13960
|
el.style.height = `${nextHeight}px`;
|
|
13904
13961
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
13905
13962
|
}, [autosize, maxRows, minRows]);
|
|
13906
|
-
|
|
13963
|
+
React52.useLayoutEffect(() => {
|
|
13907
13964
|
resize();
|
|
13908
13965
|
}, [resize, value]);
|
|
13909
13966
|
const handleInput = (event) => {
|
|
@@ -13977,12 +14034,12 @@ var Textarea = React51.forwardRef(
|
|
|
13977
14034
|
);
|
|
13978
14035
|
|
|
13979
14036
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
13980
|
-
import * as
|
|
14037
|
+
import * as React54 from "react";
|
|
13981
14038
|
import { ChevronDown as ChevronDown3 } from "lucide-react";
|
|
13982
14039
|
import { useTranslation as useTranslation35 } from "react-i18next";
|
|
13983
14040
|
|
|
13984
14041
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
13985
|
-
import * as
|
|
14042
|
+
import * as React53 from "react";
|
|
13986
14043
|
|
|
13987
14044
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
13988
14045
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -14133,21 +14190,21 @@ function useDatePickerWheel({
|
|
|
14133
14190
|
minDate,
|
|
14134
14191
|
maxDate
|
|
14135
14192
|
}) {
|
|
14136
|
-
const years =
|
|
14137
|
-
const [draftDate, setDraftDate] =
|
|
14193
|
+
const years = React53.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
14194
|
+
const [draftDate, setDraftDate] = React53.useState(
|
|
14138
14195
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
14139
14196
|
);
|
|
14140
14197
|
const draftYear = draftDate.getFullYear();
|
|
14141
14198
|
const draftMonth = draftDate.getMonth();
|
|
14142
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
14143
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
14144
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
14145
|
-
const monthListRef =
|
|
14146
|
-
const dayListRef =
|
|
14147
|
-
const yearListRef =
|
|
14148
|
-
const settleTimeoutsRef =
|
|
14149
|
-
const animationFramesRef =
|
|
14150
|
-
const columnRefs =
|
|
14199
|
+
const [monthScrollTop, setMonthScrollTop] = React53.useState(0);
|
|
14200
|
+
const [dayScrollTop, setDayScrollTop] = React53.useState(0);
|
|
14201
|
+
const [yearScrollTop, setYearScrollTop] = React53.useState(0);
|
|
14202
|
+
const monthListRef = React53.useRef(null);
|
|
14203
|
+
const dayListRef = React53.useRef(null);
|
|
14204
|
+
const yearListRef = React53.useRef(null);
|
|
14205
|
+
const settleTimeoutsRef = React53.useRef({});
|
|
14206
|
+
const animationFramesRef = React53.useRef({});
|
|
14207
|
+
const columnRefs = React53.useMemo(
|
|
14151
14208
|
() => ({
|
|
14152
14209
|
month: monthListRef,
|
|
14153
14210
|
day: dayListRef,
|
|
@@ -14155,7 +14212,7 @@ function useDatePickerWheel({
|
|
|
14155
14212
|
}),
|
|
14156
14213
|
[]
|
|
14157
14214
|
);
|
|
14158
|
-
const setColumnScrollTop =
|
|
14215
|
+
const setColumnScrollTop = React53.useCallback(
|
|
14159
14216
|
(column, nextScrollTop) => {
|
|
14160
14217
|
if (column === "month") {
|
|
14161
14218
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -14169,19 +14226,19 @@ function useDatePickerWheel({
|
|
|
14169
14226
|
},
|
|
14170
14227
|
[]
|
|
14171
14228
|
);
|
|
14172
|
-
const clearSettleTimeout =
|
|
14229
|
+
const clearSettleTimeout = React53.useCallback((column) => {
|
|
14173
14230
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
14174
14231
|
if (timeoutId === void 0) return;
|
|
14175
14232
|
window.clearTimeout(timeoutId);
|
|
14176
14233
|
delete settleTimeoutsRef.current[column];
|
|
14177
14234
|
}, []);
|
|
14178
|
-
const clearAnimationFrame =
|
|
14235
|
+
const clearAnimationFrame = React53.useCallback((column) => {
|
|
14179
14236
|
const frameId = animationFramesRef.current[column];
|
|
14180
14237
|
if (frameId === void 0) return;
|
|
14181
14238
|
window.cancelAnimationFrame(frameId);
|
|
14182
14239
|
delete animationFramesRef.current[column];
|
|
14183
14240
|
}, []);
|
|
14184
|
-
|
|
14241
|
+
React53.useEffect(
|
|
14185
14242
|
() => () => {
|
|
14186
14243
|
["month", "day", "year"].forEach((column) => {
|
|
14187
14244
|
clearSettleTimeout(column);
|
|
@@ -14190,22 +14247,22 @@ function useDatePickerWheel({
|
|
|
14190
14247
|
},
|
|
14191
14248
|
[clearAnimationFrame, clearSettleTimeout]
|
|
14192
14249
|
);
|
|
14193
|
-
|
|
14250
|
+
React53.useEffect(() => {
|
|
14194
14251
|
if (isOpen) return;
|
|
14195
14252
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
14196
14253
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
14197
|
-
const months =
|
|
14254
|
+
const months = React53.useMemo(
|
|
14198
14255
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
14199
14256
|
[draftYear, maxDate, minDate]
|
|
14200
14257
|
);
|
|
14201
|
-
const days =
|
|
14258
|
+
const days = React53.useMemo(
|
|
14202
14259
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
14203
14260
|
[draftMonth, draftYear, maxDate, minDate]
|
|
14204
14261
|
);
|
|
14205
14262
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
14206
14263
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
14207
14264
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
14208
|
-
const syncScrollPositions =
|
|
14265
|
+
const syncScrollPositions = React53.useCallback(
|
|
14209
14266
|
(nextDate, behavior = "auto") => {
|
|
14210
14267
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
14211
14268
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -14229,7 +14286,7 @@ function useDatePickerWheel({
|
|
|
14229
14286
|
},
|
|
14230
14287
|
[maxDate, minDate, years]
|
|
14231
14288
|
);
|
|
14232
|
-
|
|
14289
|
+
React53.useLayoutEffect(() => {
|
|
14233
14290
|
if (!isOpen) return;
|
|
14234
14291
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
14235
14292
|
setDraftDate(nextDate);
|
|
@@ -14240,7 +14297,7 @@ function useDatePickerWheel({
|
|
|
14240
14297
|
window.cancelAnimationFrame(frameId);
|
|
14241
14298
|
};
|
|
14242
14299
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
14243
|
-
const updateDraftDate =
|
|
14300
|
+
const updateDraftDate = React53.useCallback(
|
|
14244
14301
|
(column, targetIndex, behavior = "smooth") => {
|
|
14245
14302
|
const currentDate = stripTime(draftDate);
|
|
14246
14303
|
const currentYear = currentDate.getFullYear();
|
|
@@ -14285,7 +14342,7 @@ function useDatePickerWheel({
|
|
|
14285
14342
|
},
|
|
14286
14343
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
14287
14344
|
);
|
|
14288
|
-
const settleColumnScroll =
|
|
14345
|
+
const settleColumnScroll = React53.useCallback(
|
|
14289
14346
|
(column) => {
|
|
14290
14347
|
const list = columnRefs[column].current;
|
|
14291
14348
|
if (!list) return;
|
|
@@ -14298,7 +14355,7 @@ function useDatePickerWheel({
|
|
|
14298
14355
|
},
|
|
14299
14356
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
14300
14357
|
);
|
|
14301
|
-
const scheduleScrollSettle =
|
|
14358
|
+
const scheduleScrollSettle = React53.useCallback(
|
|
14302
14359
|
(column) => {
|
|
14303
14360
|
clearSettleTimeout(column);
|
|
14304
14361
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -14307,7 +14364,7 @@ function useDatePickerWheel({
|
|
|
14307
14364
|
},
|
|
14308
14365
|
[clearSettleTimeout, settleColumnScroll]
|
|
14309
14366
|
);
|
|
14310
|
-
const handleColumnScroll =
|
|
14367
|
+
const handleColumnScroll = React53.useCallback(
|
|
14311
14368
|
(column) => {
|
|
14312
14369
|
const list = columnRefs[column].current;
|
|
14313
14370
|
if (!list) return;
|
|
@@ -14321,13 +14378,13 @@ function useDatePickerWheel({
|
|
|
14321
14378
|
},
|
|
14322
14379
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
14323
14380
|
);
|
|
14324
|
-
const handleOptionSelect =
|
|
14381
|
+
const handleOptionSelect = React53.useCallback(
|
|
14325
14382
|
(column, targetIndex) => {
|
|
14326
14383
|
updateDraftDate(column, targetIndex, "smooth");
|
|
14327
14384
|
},
|
|
14328
14385
|
[updateDraftDate]
|
|
14329
14386
|
);
|
|
14330
|
-
const focusAdjacentColumn =
|
|
14387
|
+
const focusAdjacentColumn = React53.useCallback(
|
|
14331
14388
|
(column, direction) => {
|
|
14332
14389
|
const order = ["month", "day", "year"];
|
|
14333
14390
|
const currentIndex = order.indexOf(column);
|
|
@@ -14337,7 +14394,7 @@ function useDatePickerWheel({
|
|
|
14337
14394
|
},
|
|
14338
14395
|
[columnRefs]
|
|
14339
14396
|
);
|
|
14340
|
-
const handleColumnKeyDown =
|
|
14397
|
+
const handleColumnKeyDown = React53.useCallback(
|
|
14341
14398
|
(column, event) => {
|
|
14342
14399
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
14343
14400
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -14659,7 +14716,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
14659
14716
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
14660
14717
|
return new Date(yearNum, monthIndex, dayNum);
|
|
14661
14718
|
}
|
|
14662
|
-
var Datepicker =
|
|
14719
|
+
var Datepicker = React54.forwardRef(
|
|
14663
14720
|
function Datepicker2({
|
|
14664
14721
|
label,
|
|
14665
14722
|
value,
|
|
@@ -14689,14 +14746,14 @@ var Datepicker = React53.forwardRef(
|
|
|
14689
14746
|
maxDate,
|
|
14690
14747
|
formatValue
|
|
14691
14748
|
}, ref) {
|
|
14692
|
-
const containerRef =
|
|
14693
|
-
const dayInputRef =
|
|
14694
|
-
const monthInputRef =
|
|
14695
|
-
const monthListRef =
|
|
14696
|
-
const yearInputRef =
|
|
14697
|
-
const mobileTriggerRef =
|
|
14698
|
-
const wheelBaseId =
|
|
14699
|
-
const reactId =
|
|
14749
|
+
const containerRef = React54.useRef(null);
|
|
14750
|
+
const dayInputRef = React54.useRef(null);
|
|
14751
|
+
const monthInputRef = React54.useRef(null);
|
|
14752
|
+
const monthListRef = React54.useRef(null);
|
|
14753
|
+
const yearInputRef = React54.useRef(null);
|
|
14754
|
+
const mobileTriggerRef = React54.useRef(null);
|
|
14755
|
+
const wheelBaseId = React54.useId();
|
|
14756
|
+
const reactId = React54.useId();
|
|
14700
14757
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
14701
14758
|
const dayId = `${baseId}-day`;
|
|
14702
14759
|
const monthId = `${baseId}-month`;
|
|
@@ -14704,51 +14761,51 @@ var Datepicker = React53.forwardRef(
|
|
|
14704
14761
|
const labelId = `${baseId}-label`;
|
|
14705
14762
|
const errorId = `${baseId}-error`;
|
|
14706
14763
|
const { t } = useTranslation35();
|
|
14707
|
-
const resolvedMonthLabels =
|
|
14764
|
+
const resolvedMonthLabels = React54.useMemo(
|
|
14708
14765
|
() => monthLabels ?? getMonthLabels2(locale),
|
|
14709
14766
|
[locale, monthLabels]
|
|
14710
14767
|
);
|
|
14711
14768
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
14712
14769
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
14713
14770
|
const isControlled = value !== void 0;
|
|
14714
|
-
const initialParts =
|
|
14771
|
+
const initialParts = React54.useMemo(
|
|
14715
14772
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
14716
14773
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14717
14774
|
[]
|
|
14718
14775
|
);
|
|
14719
|
-
const [day, setDay] =
|
|
14720
|
-
const [monthIndex, setMonthIndex] =
|
|
14776
|
+
const [day, setDay] = React54.useState(initialParts.day);
|
|
14777
|
+
const [monthIndex, setMonthIndex] = React54.useState(
|
|
14721
14778
|
initialParts.monthIndex
|
|
14722
14779
|
);
|
|
14723
|
-
const [year, setYear] =
|
|
14724
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
14725
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
14726
|
-
const [focusedField, setFocusedField] =
|
|
14727
|
-
const [monthInputValue, setMonthInputValue] =
|
|
14728
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
14780
|
+
const [year, setYear] = React54.useState(initialParts.year);
|
|
14781
|
+
const [isMonthOpen, setIsMonthOpen] = React54.useState(false);
|
|
14782
|
+
const [isWheelOpen, setIsWheelOpen] = React54.useState(false);
|
|
14783
|
+
const [focusedField, setFocusedField] = React54.useState(null);
|
|
14784
|
+
const [monthInputValue, setMonthInputValue] = React54.useState("");
|
|
14785
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React54.useState(-1);
|
|
14729
14786
|
const isMobile3 = useIsMobile();
|
|
14730
|
-
|
|
14731
|
-
|
|
14787
|
+
React54.useImperativeHandle(ref, () => dayInputRef.current, []);
|
|
14788
|
+
React54.useEffect(() => {
|
|
14732
14789
|
if (!isControlled) return;
|
|
14733
14790
|
const next = partsFromDate(value ?? null);
|
|
14734
14791
|
setDay(next.day);
|
|
14735
14792
|
setMonthIndex(next.monthIndex);
|
|
14736
14793
|
setYear(next.year);
|
|
14737
14794
|
}, [isControlled, value]);
|
|
14738
|
-
|
|
14795
|
+
React54.useEffect(() => {
|
|
14739
14796
|
if (focusedField === "month") return;
|
|
14740
14797
|
setMonthInputValue(
|
|
14741
14798
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
14742
14799
|
);
|
|
14743
14800
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
14744
|
-
const filteredMonths =
|
|
14801
|
+
const filteredMonths = React54.useMemo(() => {
|
|
14745
14802
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
14746
14803
|
const query = monthInputValue.trim().toLowerCase();
|
|
14747
14804
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
14748
14805
|
if (!query || monthInputValue === currentLabel) return all;
|
|
14749
14806
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
14750
14807
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
14751
|
-
|
|
14808
|
+
React54.useEffect(() => {
|
|
14752
14809
|
if (!isMonthOpen) {
|
|
14753
14810
|
setMonthHighlightIndex(-1);
|
|
14754
14811
|
return;
|
|
@@ -14769,7 +14826,7 @@ var Datepicker = React53.forwardRef(
|
|
|
14769
14826
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
14770
14827
|
const isInvalid = Boolean(invalid || error);
|
|
14771
14828
|
const wrapperWidth = toCssSize(width);
|
|
14772
|
-
const currentDate =
|
|
14829
|
+
const currentDate = React54.useMemo(
|
|
14773
14830
|
() => dateFromParts(day, monthIndex, year),
|
|
14774
14831
|
[day, monthIndex, year]
|
|
14775
14832
|
);
|
|
@@ -14778,7 +14835,7 @@ var Datepicker = React53.forwardRef(
|
|
|
14778
14835
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
14779
14836
|
isDisabled: !isMonthOpen || isMobile3
|
|
14780
14837
|
});
|
|
14781
|
-
const emitChange =
|
|
14838
|
+
const emitChange = React54.useCallback(
|
|
14782
14839
|
(nextDay, nextMonth, nextYear) => {
|
|
14783
14840
|
if (!onChange) return;
|
|
14784
14841
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -14813,7 +14870,7 @@ var Datepicker = React53.forwardRef(
|
|
|
14813
14870
|
setIsMonthOpen(true);
|
|
14814
14871
|
setMonthHighlightIndex(0);
|
|
14815
14872
|
};
|
|
14816
|
-
const commitMonthInput =
|
|
14873
|
+
const commitMonthInput = React54.useCallback(() => {
|
|
14817
14874
|
const query = monthInputValue.trim().toLowerCase();
|
|
14818
14875
|
if (!query) {
|
|
14819
14876
|
if (monthIndex !== null) {
|
|
@@ -14873,15 +14930,15 @@ var Datepicker = React53.forwardRef(
|
|
|
14873
14930
|
setIsMonthOpen(false);
|
|
14874
14931
|
}
|
|
14875
14932
|
};
|
|
14876
|
-
const focusDayInput =
|
|
14933
|
+
const focusDayInput = React54.useCallback(() => {
|
|
14877
14934
|
if (isBlocked || readOnly) return;
|
|
14878
14935
|
dayInputRef.current?.focus();
|
|
14879
14936
|
}, [isBlocked, readOnly]);
|
|
14880
|
-
const openWheel =
|
|
14937
|
+
const openWheel = React54.useCallback(() => {
|
|
14881
14938
|
if (isBlocked || readOnly) return;
|
|
14882
14939
|
setIsWheelOpen(true);
|
|
14883
14940
|
}, [isBlocked, readOnly]);
|
|
14884
|
-
const closeWheel =
|
|
14941
|
+
const closeWheel = React54.useCallback(() => {
|
|
14885
14942
|
setIsWheelOpen(false);
|
|
14886
14943
|
mobileTriggerRef.current?.focus();
|
|
14887
14944
|
}, []);
|
|
@@ -14893,7 +14950,7 @@ var Datepicker = React53.forwardRef(
|
|
|
14893
14950
|
minDate,
|
|
14894
14951
|
maxDate
|
|
14895
14952
|
});
|
|
14896
|
-
const handleWheelDone =
|
|
14953
|
+
const handleWheelDone = React54.useCallback(() => {
|
|
14897
14954
|
const next = wheel.draftDate;
|
|
14898
14955
|
setDay(String(next.getDate()));
|
|
14899
14956
|
setMonthIndex(next.getMonth());
|
|
@@ -14902,7 +14959,7 @@ var Datepicker = React53.forwardRef(
|
|
|
14902
14959
|
setIsWheelOpen(false);
|
|
14903
14960
|
mobileTriggerRef.current?.focus();
|
|
14904
14961
|
}, [name, onChange, wheel.draftDate]);
|
|
14905
|
-
const defaultFormatValue =
|
|
14962
|
+
const defaultFormatValue = React54.useCallback(
|
|
14906
14963
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
14907
14964
|
[resolvedMonthLabels]
|
|
14908
14965
|
);
|
|
@@ -15193,7 +15250,7 @@ var Datepicker = React53.forwardRef(
|
|
|
15193
15250
|
);
|
|
15194
15251
|
|
|
15195
15252
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
15196
|
-
import * as
|
|
15253
|
+
import * as React58 from "react";
|
|
15197
15254
|
import { useTranslation as useTranslation36 } from "react-i18next";
|
|
15198
15255
|
|
|
15199
15256
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -15272,7 +15329,7 @@ var createDisabledMatchers = ({
|
|
|
15272
15329
|
};
|
|
15273
15330
|
|
|
15274
15331
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
15275
|
-
import * as
|
|
15332
|
+
import * as React55 from "react";
|
|
15276
15333
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
15277
15334
|
function useRangeValue({
|
|
15278
15335
|
value: externalValue,
|
|
@@ -15281,10 +15338,10 @@ function useRangeValue({
|
|
|
15281
15338
|
name
|
|
15282
15339
|
}) {
|
|
15283
15340
|
const isControlled = externalValue !== void 0;
|
|
15284
|
-
const [draft, setDraft] =
|
|
15341
|
+
const [draft, setDraft] = React55.useState(
|
|
15285
15342
|
isControlled ? externalValue : defaultValue
|
|
15286
15343
|
);
|
|
15287
|
-
const lastExternalKeyRef =
|
|
15344
|
+
const lastExternalKeyRef = React55.useRef(getRangeKey(externalValue));
|
|
15288
15345
|
if (isControlled) {
|
|
15289
15346
|
const externalKey = getRangeKey(externalValue);
|
|
15290
15347
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -15292,7 +15349,7 @@ function useRangeValue({
|
|
|
15292
15349
|
setDraft(externalValue);
|
|
15293
15350
|
}
|
|
15294
15351
|
}
|
|
15295
|
-
const commit =
|
|
15352
|
+
const commit = React55.useCallback(
|
|
15296
15353
|
(next) => {
|
|
15297
15354
|
setDraft(next);
|
|
15298
15355
|
if (next === void 0) {
|
|
@@ -15307,7 +15364,7 @@ function useRangeValue({
|
|
|
15307
15364
|
}
|
|
15308
15365
|
|
|
15309
15366
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
15310
|
-
import * as
|
|
15367
|
+
import * as React56 from "react";
|
|
15311
15368
|
function useRangeTextInputs({
|
|
15312
15369
|
value,
|
|
15313
15370
|
format: format2,
|
|
@@ -15315,13 +15372,13 @@ function useRangeTextInputs({
|
|
|
15315
15372
|
onCommit,
|
|
15316
15373
|
onBlur
|
|
15317
15374
|
}) {
|
|
15318
|
-
const [fromText, setFromText] =
|
|
15319
|
-
const [toText, setToText] =
|
|
15320
|
-
|
|
15375
|
+
const [fromText, setFromText] = React56.useState(value?.from ? format2(value.from) : "");
|
|
15376
|
+
const [toText, setToText] = React56.useState(value?.to ? format2(value.to) : "");
|
|
15377
|
+
React56.useEffect(() => {
|
|
15321
15378
|
setFromText(value?.from ? format2(value.from) : "");
|
|
15322
15379
|
setToText(value?.to ? format2(value.to) : "");
|
|
15323
15380
|
}, [format2, value?.from, value?.to]);
|
|
15324
|
-
const handleFromBlur =
|
|
15381
|
+
const handleFromBlur = React56.useCallback(() => {
|
|
15325
15382
|
if (!fromText) {
|
|
15326
15383
|
const next = { from: void 0, to: value?.to };
|
|
15327
15384
|
onCommit(next);
|
|
@@ -15338,7 +15395,7 @@ function useRangeTextInputs({
|
|
|
15338
15395
|
setFromText(value?.from ? format2(value.from) : "");
|
|
15339
15396
|
return void 0;
|
|
15340
15397
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
15341
|
-
const handleToBlur =
|
|
15398
|
+
const handleToBlur = React56.useCallback(() => {
|
|
15342
15399
|
if (!toText) {
|
|
15343
15400
|
const next = { from: value?.from, to: void 0 };
|
|
15344
15401
|
onCommit(next);
|
|
@@ -15365,21 +15422,21 @@ function useRangeTextInputs({
|
|
|
15365
15422
|
}
|
|
15366
15423
|
|
|
15367
15424
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
15368
|
-
import * as
|
|
15425
|
+
import * as React57 from "react";
|
|
15369
15426
|
function useRangeMonthSync(value) {
|
|
15370
|
-
const isPreloadedRef =
|
|
15371
|
-
const [month, setMonth] =
|
|
15372
|
-
|
|
15427
|
+
const isPreloadedRef = React57.useRef(false);
|
|
15428
|
+
const [month, setMonth] = React57.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
15429
|
+
React57.useEffect(() => {
|
|
15373
15430
|
if (value?.from && !isPreloadedRef.current) {
|
|
15374
15431
|
setMonth(value.from);
|
|
15375
15432
|
isPreloadedRef.current = true;
|
|
15376
15433
|
}
|
|
15377
15434
|
}, [value?.from]);
|
|
15378
|
-
const syncMonthToValue =
|
|
15435
|
+
const syncMonthToValue = React57.useCallback((next) => {
|
|
15379
15436
|
isPreloadedRef.current = true;
|
|
15380
15437
|
if (next?.from) setMonth(next.from);
|
|
15381
15438
|
}, []);
|
|
15382
|
-
const resetPreload =
|
|
15439
|
+
const resetPreload = React57.useCallback(() => {
|
|
15383
15440
|
isPreloadedRef.current = false;
|
|
15384
15441
|
}, []);
|
|
15385
15442
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -15638,7 +15695,7 @@ function DateRangePopover({
|
|
|
15638
15695
|
|
|
15639
15696
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
15640
15697
|
import { jsx as jsx162, jsxs as jsxs107 } from "react/jsx-runtime";
|
|
15641
|
-
var DateRangePicker =
|
|
15698
|
+
var DateRangePicker = React58.forwardRef(function DateRangePicker2({
|
|
15642
15699
|
label,
|
|
15643
15700
|
value: externalValue,
|
|
15644
15701
|
defaultValue,
|
|
@@ -15672,20 +15729,20 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
15672
15729
|
components: customComponents,
|
|
15673
15730
|
...dayPickerProps
|
|
15674
15731
|
}, ref) {
|
|
15675
|
-
const containerRef =
|
|
15676
|
-
const fromInputRef =
|
|
15677
|
-
const toInputRef =
|
|
15678
|
-
const reactId =
|
|
15732
|
+
const containerRef = React58.useRef(null);
|
|
15733
|
+
const fromInputRef = React58.useRef(null);
|
|
15734
|
+
const toInputRef = React58.useRef(null);
|
|
15735
|
+
const reactId = React58.useId();
|
|
15679
15736
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
15680
15737
|
const fromId = `${baseId}-from`;
|
|
15681
15738
|
const toId = `${baseId}-to`;
|
|
15682
15739
|
const labelId = `${baseId}-label`;
|
|
15683
15740
|
const errorId = `${baseId}-error`;
|
|
15684
|
-
const normalizedValue =
|
|
15741
|
+
const normalizedValue = React58.useMemo(() => {
|
|
15685
15742
|
if (externalValue === void 0) return void 0;
|
|
15686
15743
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
15687
15744
|
}, [externalValue]);
|
|
15688
|
-
const normalizedDefaultValue =
|
|
15745
|
+
const normalizedDefaultValue = React58.useMemo(() => {
|
|
15689
15746
|
if (defaultValue === void 0) return void 0;
|
|
15690
15747
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
15691
15748
|
}, [defaultValue]);
|
|
@@ -15695,10 +15752,10 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
15695
15752
|
onChange,
|
|
15696
15753
|
name
|
|
15697
15754
|
});
|
|
15698
|
-
const normalizedMinDate =
|
|
15699
|
-
const normalizedMaxDate =
|
|
15700
|
-
const formatter =
|
|
15701
|
-
const parser =
|
|
15755
|
+
const normalizedMinDate = React58.useMemo(() => toDate(minDate), [minDate]);
|
|
15756
|
+
const normalizedMaxDate = React58.useMemo(() => toDate(maxDate), [maxDate]);
|
|
15757
|
+
const formatter = React58.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
15758
|
+
const parser = React58.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
15702
15759
|
const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
|
|
15703
15760
|
value,
|
|
15704
15761
|
format: formatter,
|
|
@@ -15707,9 +15764,9 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
15707
15764
|
onBlur
|
|
15708
15765
|
});
|
|
15709
15766
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
15710
|
-
const [isOpen, setIsOpen] =
|
|
15711
|
-
const [focusedInput, setFocusedInput] =
|
|
15712
|
-
const [autoFocus, setAutoFocus] =
|
|
15767
|
+
const [isOpen, setIsOpen] = React58.useState(false);
|
|
15768
|
+
const [focusedInput, setFocusedInput] = React58.useState(null);
|
|
15769
|
+
const [autoFocus, setAutoFocus] = React58.useState(false);
|
|
15713
15770
|
const isMobile3 = useIsMobile();
|
|
15714
15771
|
const { t } = useTranslation36();
|
|
15715
15772
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -15720,13 +15777,13 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
15720
15777
|
const isFocused = focusedInput !== null || isOpen;
|
|
15721
15778
|
const wrapperWidth = toCssSize(width);
|
|
15722
15779
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
15723
|
-
const closeCalendar =
|
|
15780
|
+
const closeCalendar = React58.useCallback(() => {
|
|
15724
15781
|
setIsOpen(false);
|
|
15725
15782
|
setFocusedInput(null);
|
|
15726
15783
|
setAutoFocus(false);
|
|
15727
15784
|
if (value?.from) setMonth(value.from);
|
|
15728
15785
|
}, [setMonth, value?.from]);
|
|
15729
|
-
const openCalendar =
|
|
15786
|
+
const openCalendar = React58.useCallback(() => {
|
|
15730
15787
|
if (isBlocked || readOnly) return;
|
|
15731
15788
|
setIsOpen(true);
|
|
15732
15789
|
}, [isBlocked, readOnly]);
|
|
@@ -15735,7 +15792,7 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
15735
15792
|
onOutsideClick: closeCalendar,
|
|
15736
15793
|
isDisabled: !isOpen || isMobile3
|
|
15737
15794
|
});
|
|
15738
|
-
const handlePickerChange =
|
|
15795
|
+
const handlePickerChange = React58.useCallback(
|
|
15739
15796
|
(range, pickedDate) => {
|
|
15740
15797
|
const { next, shouldClose } = resolveRangeSelection({
|
|
15741
15798
|
previous: value,
|
|
@@ -15756,7 +15813,7 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
15756
15813
|
setToText("");
|
|
15757
15814
|
setMonth(/* @__PURE__ */ new Date());
|
|
15758
15815
|
};
|
|
15759
|
-
const disabledMatchers =
|
|
15816
|
+
const disabledMatchers = React58.useMemo(
|
|
15760
15817
|
() => createDisabledMatchers({
|
|
15761
15818
|
minDate: normalizedMinDate,
|
|
15762
15819
|
maxDate: normalizedMaxDate,
|
|
@@ -15775,7 +15832,7 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
15775
15832
|
openCalendar();
|
|
15776
15833
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
15777
15834
|
};
|
|
15778
|
-
|
|
15835
|
+
React58.useImperativeHandle(
|
|
15779
15836
|
ref,
|
|
15780
15837
|
() => ({
|
|
15781
15838
|
setDateRange: (range) => {
|
|
@@ -15954,7 +16011,7 @@ var DateRangePicker = React57.forwardRef(function DateRangePicker2({
|
|
|
15954
16011
|
});
|
|
15955
16012
|
|
|
15956
16013
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
15957
|
-
import * as
|
|
16014
|
+
import * as React59 from "react";
|
|
15958
16015
|
import { useTranslation as useTranslation37 } from "react-i18next";
|
|
15959
16016
|
import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
|
|
15960
16017
|
import {
|
|
@@ -15980,11 +16037,11 @@ function useValidateDates({
|
|
|
15980
16037
|
const { t } = useTranslation37();
|
|
15981
16038
|
const handleError = useEvent(onError);
|
|
15982
16039
|
const handleSuccess = useEvent(onSuccess);
|
|
15983
|
-
const errorFormatter =
|
|
16040
|
+
const errorFormatter = React59.useMemo(
|
|
15984
16041
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
15985
16042
|
[displayFormat]
|
|
15986
16043
|
);
|
|
15987
|
-
const validateDates =
|
|
16044
|
+
const validateDates = React59.useCallback(
|
|
15988
16045
|
(dates) => {
|
|
15989
16046
|
const startDate = dates?.from;
|
|
15990
16047
|
const endDate = dates?.to;
|
|
@@ -16034,7 +16091,7 @@ function useValidateDates({
|
|
|
16034
16091
|
}
|
|
16035
16092
|
|
|
16036
16093
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
16037
|
-
import * as
|
|
16094
|
+
import * as React60 from "react";
|
|
16038
16095
|
import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
|
|
16039
16096
|
import { jsx as jsx163 } from "react/jsx-runtime";
|
|
16040
16097
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
@@ -16078,9 +16135,9 @@ var FORMAT_SETTINGS = {
|
|
|
16078
16135
|
},
|
|
16079
16136
|
hours: { intervalUnit: "H", interval: 1, minTime: "00:00", maxTime: "23:00" }
|
|
16080
16137
|
};
|
|
16081
|
-
var TimePicker =
|
|
16138
|
+
var TimePicker = React60.forwardRef(
|
|
16082
16139
|
function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
16083
|
-
const resolvedOptions =
|
|
16140
|
+
const resolvedOptions = React60.useMemo(() => {
|
|
16084
16141
|
if (options) return options;
|
|
16085
16142
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
16086
16143
|
return buildOptions(settings);
|
|
@@ -16090,14 +16147,14 @@ var TimePicker = React59.forwardRef(
|
|
|
16090
16147
|
);
|
|
16091
16148
|
|
|
16092
16149
|
// src/dashboard/file-input/FileInput.tsx
|
|
16093
|
-
import * as
|
|
16150
|
+
import * as React61 from "react";
|
|
16094
16151
|
import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
|
|
16095
16152
|
import { useTranslation as useTranslation38 } from "react-i18next";
|
|
16096
16153
|
import { jsx as jsx164, jsxs as jsxs108 } from "react/jsx-runtime";
|
|
16097
16154
|
function defaultDownload(url) {
|
|
16098
16155
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
16099
16156
|
}
|
|
16100
|
-
var FileInput =
|
|
16157
|
+
var FileInput = React61.forwardRef(
|
|
16101
16158
|
function FileInput2({
|
|
16102
16159
|
label,
|
|
16103
16160
|
value,
|
|
@@ -16120,12 +16177,12 @@ var FileInput = React60.forwardRef(
|
|
|
16120
16177
|
width,
|
|
16121
16178
|
downloadLabel
|
|
16122
16179
|
}, ref) {
|
|
16123
|
-
const internalRef =
|
|
16180
|
+
const internalRef = React61.useRef(null);
|
|
16124
16181
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
16125
16182
|
const { t } = useTranslation38();
|
|
16126
16183
|
const resolvedLabel = label ?? t("upload_file");
|
|
16127
16184
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
16128
|
-
const reactId =
|
|
16185
|
+
const reactId = React61.useId();
|
|
16129
16186
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
16130
16187
|
const labelId = `${inputId}-label`;
|
|
16131
16188
|
const errorId = `${inputId}-error`;
|
|
@@ -16265,7 +16322,7 @@ var FileInput = React60.forwardRef(
|
|
|
16265
16322
|
);
|
|
16266
16323
|
|
|
16267
16324
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
16268
|
-
import * as
|
|
16325
|
+
import * as React62 from "react";
|
|
16269
16326
|
import { jsx as jsx165, jsxs as jsxs109 } from "react/jsx-runtime";
|
|
16270
16327
|
function SelectIconsBox({
|
|
16271
16328
|
children,
|
|
@@ -16281,9 +16338,9 @@ function SelectIconsBox({
|
|
|
16281
16338
|
className,
|
|
16282
16339
|
boxClassName
|
|
16283
16340
|
}) {
|
|
16284
|
-
const containerRef =
|
|
16341
|
+
const containerRef = React62.useRef(null);
|
|
16285
16342
|
const isControlled = controlledOpen !== void 0;
|
|
16286
|
-
const [internalOpen, setInternalOpen] =
|
|
16343
|
+
const [internalOpen, setInternalOpen] = React62.useState(defaultOpen);
|
|
16287
16344
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
16288
16345
|
const setOpen = (next) => {
|
|
16289
16346
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -16464,15 +16521,15 @@ var LegacyTextarea = forwardRef68(
|
|
|
16464
16521
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
16465
16522
|
|
|
16466
16523
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
16467
|
-
import * as
|
|
16524
|
+
import * as React64 from "react";
|
|
16468
16525
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
16469
16526
|
|
|
16470
16527
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
16471
|
-
import * as
|
|
16528
|
+
import * as React63 from "react";
|
|
16472
16529
|
import { Loader2 as Loader24 } from "lucide-react";
|
|
16473
16530
|
import { useTranslation as useTranslation39 } from "react-i18next";
|
|
16474
16531
|
import { Fragment as Fragment17, jsx as jsx168, jsxs as jsxs112 } from "react/jsx-runtime";
|
|
16475
|
-
var AirbnbFieldTrigger =
|
|
16532
|
+
var AirbnbFieldTrigger = React63.forwardRef(
|
|
16476
16533
|
({
|
|
16477
16534
|
as = "button",
|
|
16478
16535
|
variant = "airbnb",
|
|
@@ -16645,7 +16702,7 @@ AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
|
16645
16702
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
16646
16703
|
import { jsx as jsx169, jsxs as jsxs113 } from "react/jsx-runtime";
|
|
16647
16704
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
16648
|
-
var AirbnbDatePicker =
|
|
16705
|
+
var AirbnbDatePicker = React64.forwardRef(
|
|
16649
16706
|
({
|
|
16650
16707
|
variant = "default",
|
|
16651
16708
|
label,
|
|
@@ -16671,24 +16728,24 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
16671
16728
|
formatValue = formatDateValue
|
|
16672
16729
|
}, ref) => {
|
|
16673
16730
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
16674
|
-
const [isOpen, setIsOpen] =
|
|
16675
|
-
const triggerId =
|
|
16676
|
-
const pickerId =
|
|
16677
|
-
const labelId =
|
|
16678
|
-
const valueId =
|
|
16679
|
-
const helperTextId =
|
|
16680
|
-
const errorId =
|
|
16681
|
-
const internalRef =
|
|
16731
|
+
const [isOpen, setIsOpen] = React64.useState(false);
|
|
16732
|
+
const triggerId = React64.useId();
|
|
16733
|
+
const pickerId = React64.useId();
|
|
16734
|
+
const labelId = React64.useId();
|
|
16735
|
+
const valueId = React64.useId();
|
|
16736
|
+
const helperTextId = React64.useId();
|
|
16737
|
+
const errorId = React64.useId();
|
|
16738
|
+
const internalRef = React64.useRef(null);
|
|
16682
16739
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
16683
|
-
const monthLabels =
|
|
16684
|
-
const resolvedMinDate =
|
|
16685
|
-
const resolvedMaxDate =
|
|
16686
|
-
const normalizedValue =
|
|
16687
|
-
const normalizedDefaultValue =
|
|
16740
|
+
const monthLabels = React64.useMemo(() => getMonthLabels(locale), [locale]);
|
|
16741
|
+
const resolvedMinDate = React64.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
16742
|
+
const resolvedMaxDate = React64.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
16743
|
+
const normalizedValue = React64.useMemo(() => normalizeDateValue(value), [value]);
|
|
16744
|
+
const normalizedDefaultValue = React64.useMemo(
|
|
16688
16745
|
() => normalizeDateValue(defaultValue),
|
|
16689
16746
|
[defaultValue]
|
|
16690
16747
|
);
|
|
16691
|
-
const resolvedValue =
|
|
16748
|
+
const resolvedValue = React64.useMemo(
|
|
16692
16749
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
16693
16750
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
16694
16751
|
);
|
|
@@ -16719,7 +16776,7 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
16719
16776
|
minDate: resolvedMinDate,
|
|
16720
16777
|
maxDate: resolvedMaxDate
|
|
16721
16778
|
});
|
|
16722
|
-
const handleOpenChange =
|
|
16779
|
+
const handleOpenChange = React64.useCallback(
|
|
16723
16780
|
(nextOpen) => {
|
|
16724
16781
|
if (isBlocked && nextOpen) return;
|
|
16725
16782
|
setIsOpen(nextOpen);
|
|
@@ -16729,7 +16786,7 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
16729
16786
|
},
|
|
16730
16787
|
[isBlocked]
|
|
16731
16788
|
);
|
|
16732
|
-
const handleDone =
|
|
16789
|
+
const handleDone = React64.useCallback(() => {
|
|
16733
16790
|
if (isBlocked) return;
|
|
16734
16791
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
16735
16792
|
handleOpenChange(false);
|
|
@@ -16741,11 +16798,11 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
16741
16798
|
resolvedMaxDate,
|
|
16742
16799
|
resolvedMinDate
|
|
16743
16800
|
]);
|
|
16744
|
-
const handleTriggerClick =
|
|
16801
|
+
const handleTriggerClick = React64.useCallback(() => {
|
|
16745
16802
|
if (isBlocked) return;
|
|
16746
16803
|
setIsOpen(true);
|
|
16747
16804
|
}, [isBlocked]);
|
|
16748
|
-
const handleTriggerKeyDown =
|
|
16805
|
+
const handleTriggerKeyDown = React64.useCallback(
|
|
16749
16806
|
(event) => {
|
|
16750
16807
|
if (isBlocked) return;
|
|
16751
16808
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -16755,7 +16812,7 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
16755
16812
|
},
|
|
16756
16813
|
[isBlocked]
|
|
16757
16814
|
);
|
|
16758
|
-
|
|
16815
|
+
React64.useEffect(() => {
|
|
16759
16816
|
if (isBlocked) {
|
|
16760
16817
|
setIsOpen(false);
|
|
16761
16818
|
}
|
|
@@ -16833,10 +16890,10 @@ var AirbnbDatePicker = React63.forwardRef(
|
|
|
16833
16890
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
16834
16891
|
|
|
16835
16892
|
// src/airbnb-fields/input/Input.tsx
|
|
16836
|
-
import * as
|
|
16893
|
+
import * as React65 from "react";
|
|
16837
16894
|
import { jsx as jsx170 } from "react/jsx-runtime";
|
|
16838
16895
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
16839
|
-
var AirbnbInput =
|
|
16896
|
+
var AirbnbInput = React65.forwardRef(
|
|
16840
16897
|
({
|
|
16841
16898
|
variant = "default",
|
|
16842
16899
|
label,
|
|
@@ -16865,15 +16922,15 @@ var AirbnbInput = React64.forwardRef(
|
|
|
16865
16922
|
placeholder,
|
|
16866
16923
|
...props
|
|
16867
16924
|
}, ref) => {
|
|
16868
|
-
const generatedId =
|
|
16869
|
-
const inputRef =
|
|
16925
|
+
const generatedId = React65.useId();
|
|
16926
|
+
const inputRef = React65.useRef(null);
|
|
16870
16927
|
const inputId = id ?? generatedId;
|
|
16871
16928
|
const fieldId = `${inputId}-field`;
|
|
16872
16929
|
const labelId = `${inputId}-label`;
|
|
16873
16930
|
const errorId = `${inputId}-error`;
|
|
16874
16931
|
const accessibleLabel = placeholder ?? label;
|
|
16875
|
-
const [isFocused, setIsFocused] =
|
|
16876
|
-
const [currentValue, setCurrentValue] =
|
|
16932
|
+
const [isFocused, setIsFocused] = React65.useState(false);
|
|
16933
|
+
const [currentValue, setCurrentValue] = React65.useState(
|
|
16877
16934
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
16878
16935
|
);
|
|
16879
16936
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -16883,11 +16940,11 @@ var AirbnbInput = React64.forwardRef(
|
|
|
16883
16940
|
const triggerError = error ?? invalid;
|
|
16884
16941
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
16885
16942
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
16886
|
-
|
|
16943
|
+
React65.useLayoutEffect(() => {
|
|
16887
16944
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
16888
16945
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
16889
16946
|
}, [value]);
|
|
16890
|
-
const setRefs =
|
|
16947
|
+
const setRefs = React65.useCallback(
|
|
16891
16948
|
(node) => {
|
|
16892
16949
|
inputRef.current = node;
|
|
16893
16950
|
if (node && value == null) {
|
|
@@ -16985,11 +17042,11 @@ var AirbnbInput = React64.forwardRef(
|
|
|
16985
17042
|
AirbnbInput.displayName = "AirbnbInput";
|
|
16986
17043
|
|
|
16987
17044
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
16988
|
-
import * as
|
|
17045
|
+
import * as React71 from "react";
|
|
16989
17046
|
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
16990
17047
|
|
|
16991
17048
|
// src/airbnb-fields/select/Select.tsx
|
|
16992
|
-
import * as
|
|
17049
|
+
import * as React70 from "react";
|
|
16993
17050
|
|
|
16994
17051
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
16995
17052
|
import { jsx as jsx171, jsxs as jsxs114 } from "react/jsx-runtime";
|
|
@@ -17334,10 +17391,10 @@ function AirbnbSelectMobileContent({
|
|
|
17334
17391
|
}
|
|
17335
17392
|
|
|
17336
17393
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
17337
|
-
import * as
|
|
17394
|
+
import * as React66 from "react";
|
|
17338
17395
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
17339
17396
|
import { jsx as jsx175 } from "react/jsx-runtime";
|
|
17340
|
-
var AirbnbSelectTrigger =
|
|
17397
|
+
var AirbnbSelectTrigger = React66.forwardRef(
|
|
17341
17398
|
({
|
|
17342
17399
|
id,
|
|
17343
17400
|
open,
|
|
@@ -17404,7 +17461,7 @@ var AirbnbSelectTrigger = React65.forwardRef(
|
|
|
17404
17461
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
17405
17462
|
|
|
17406
17463
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
17407
|
-
import * as
|
|
17464
|
+
import * as React67 from "react";
|
|
17408
17465
|
function useDesktopSelect({
|
|
17409
17466
|
isMobile: isMobile3,
|
|
17410
17467
|
isOpen,
|
|
@@ -17413,12 +17470,12 @@ function useDesktopSelect({
|
|
|
17413
17470
|
disabled,
|
|
17414
17471
|
onChange
|
|
17415
17472
|
}) {
|
|
17416
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
17417
|
-
const triggerRef =
|
|
17418
|
-
const listRef =
|
|
17419
|
-
const optionRefs =
|
|
17473
|
+
const [highlightedIndex, setHighlightedIndex] = React67.useState(-1);
|
|
17474
|
+
const triggerRef = React67.useRef(null);
|
|
17475
|
+
const listRef = React67.useRef(null);
|
|
17476
|
+
const optionRefs = React67.useRef([]);
|
|
17420
17477
|
const selectedIndex = getOptionIndex2(options, value);
|
|
17421
|
-
|
|
17478
|
+
React67.useEffect(() => {
|
|
17422
17479
|
if (!isOpen || isMobile3) return;
|
|
17423
17480
|
setHighlightedIndex((currentIndex) => {
|
|
17424
17481
|
if (currentIndex >= 0) {
|
|
@@ -17433,34 +17490,34 @@ function useDesktopSelect({
|
|
|
17433
17490
|
window.cancelAnimationFrame(frameId);
|
|
17434
17491
|
};
|
|
17435
17492
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
17436
|
-
|
|
17493
|
+
React67.useEffect(() => {
|
|
17437
17494
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
17438
17495
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
17439
17496
|
block: "nearest"
|
|
17440
17497
|
});
|
|
17441
17498
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
17442
|
-
|
|
17499
|
+
React67.useEffect(() => {
|
|
17443
17500
|
if (isOpen) return;
|
|
17444
17501
|
setHighlightedIndex(-1);
|
|
17445
17502
|
}, [isOpen]);
|
|
17446
|
-
const focusTrigger =
|
|
17503
|
+
const focusTrigger = React67.useCallback(() => {
|
|
17447
17504
|
triggerRef.current?.focus();
|
|
17448
17505
|
}, []);
|
|
17449
|
-
const handleSelect =
|
|
17506
|
+
const handleSelect = React67.useCallback(
|
|
17450
17507
|
(option) => {
|
|
17451
17508
|
if (option.isDisabled || disabled) return;
|
|
17452
17509
|
onChange(option);
|
|
17453
17510
|
},
|
|
17454
17511
|
[disabled, onChange]
|
|
17455
17512
|
);
|
|
17456
|
-
const openMenu =
|
|
17513
|
+
const openMenu = React67.useCallback(
|
|
17457
17514
|
(targetIndex) => {
|
|
17458
17515
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
17459
17516
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
17460
17517
|
},
|
|
17461
17518
|
[options, selectedIndex]
|
|
17462
17519
|
);
|
|
17463
|
-
const handleTriggerKeyDown =
|
|
17520
|
+
const handleTriggerKeyDown = React67.useCallback(
|
|
17464
17521
|
(event, onOpen) => {
|
|
17465
17522
|
if (disabled) return;
|
|
17466
17523
|
if (event.key === "ArrowDown") {
|
|
@@ -17485,7 +17542,7 @@ function useDesktopSelect({
|
|
|
17485
17542
|
},
|
|
17486
17543
|
[disabled, openMenu, options, selectedIndex]
|
|
17487
17544
|
);
|
|
17488
|
-
const handleMenuKeyDown =
|
|
17545
|
+
const handleMenuKeyDown = React67.useCallback(
|
|
17489
17546
|
(event, onClose) => {
|
|
17490
17547
|
if (event.key === "Escape") {
|
|
17491
17548
|
event.preventDefault();
|
|
@@ -17535,7 +17592,7 @@ function useDesktopSelect({
|
|
|
17535
17592
|
},
|
|
17536
17593
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
17537
17594
|
);
|
|
17538
|
-
const setOptionRef =
|
|
17595
|
+
const setOptionRef = React67.useCallback(
|
|
17539
17596
|
(index, node) => {
|
|
17540
17597
|
optionRefs.current[index] = node;
|
|
17541
17598
|
},
|
|
@@ -17555,23 +17612,23 @@ function useDesktopSelect({
|
|
|
17555
17612
|
}
|
|
17556
17613
|
|
|
17557
17614
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
17558
|
-
import * as
|
|
17615
|
+
import * as React68 from "react";
|
|
17559
17616
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
17560
|
-
const [pendingValue, setPendingValue] =
|
|
17617
|
+
const [pendingValue, setPendingValue] = React68.useState(
|
|
17561
17618
|
value ?? null
|
|
17562
17619
|
);
|
|
17563
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
17564
|
-
const mobileListRef =
|
|
17565
|
-
const scrollSettleTimeoutRef =
|
|
17566
|
-
const scrollAnimationFrameRef =
|
|
17567
|
-
const getTargetIndex =
|
|
17620
|
+
const [mobileScrollTop, setMobileScrollTop] = React68.useState(0);
|
|
17621
|
+
const mobileListRef = React68.useRef(null);
|
|
17622
|
+
const scrollSettleTimeoutRef = React68.useRef(null);
|
|
17623
|
+
const scrollAnimationFrameRef = React68.useRef(null);
|
|
17624
|
+
const getTargetIndex = React68.useCallback(
|
|
17568
17625
|
(targetValue) => {
|
|
17569
17626
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
17570
17627
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
17571
17628
|
},
|
|
17572
17629
|
[options]
|
|
17573
17630
|
);
|
|
17574
|
-
const syncScrollPosition =
|
|
17631
|
+
const syncScrollPosition = React68.useCallback(
|
|
17575
17632
|
(targetValue, behavior = "instant") => {
|
|
17576
17633
|
const targetIndex = getTargetIndex(targetValue);
|
|
17577
17634
|
if (targetIndex < 0) return;
|
|
@@ -17590,27 +17647,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17590
17647
|
},
|
|
17591
17648
|
[getTargetIndex, options]
|
|
17592
17649
|
);
|
|
17593
|
-
const clearScrollSettleTimeout =
|
|
17650
|
+
const clearScrollSettleTimeout = React68.useCallback(() => {
|
|
17594
17651
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
17595
17652
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
17596
17653
|
scrollSettleTimeoutRef.current = null;
|
|
17597
17654
|
}, []);
|
|
17598
|
-
const clearScrollAnimationFrame =
|
|
17655
|
+
const clearScrollAnimationFrame = React68.useCallback(() => {
|
|
17599
17656
|
if (scrollAnimationFrameRef.current === null) return;
|
|
17600
17657
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
17601
17658
|
scrollAnimationFrameRef.current = null;
|
|
17602
17659
|
}, []);
|
|
17603
|
-
|
|
17660
|
+
React68.useEffect(
|
|
17604
17661
|
() => () => {
|
|
17605
17662
|
clearScrollSettleTimeout();
|
|
17606
17663
|
clearScrollAnimationFrame();
|
|
17607
17664
|
},
|
|
17608
17665
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
17609
17666
|
);
|
|
17610
|
-
|
|
17667
|
+
React68.useEffect(() => {
|
|
17611
17668
|
setPendingValue(value ?? null);
|
|
17612
17669
|
}, [value]);
|
|
17613
|
-
|
|
17670
|
+
React68.useLayoutEffect(() => {
|
|
17614
17671
|
if (!isMobile3 || !isOpen) return;
|
|
17615
17672
|
const frameId = window.requestAnimationFrame(() => {
|
|
17616
17673
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -17619,7 +17676,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17619
17676
|
window.cancelAnimationFrame(frameId);
|
|
17620
17677
|
};
|
|
17621
17678
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
17622
|
-
const settleScroll =
|
|
17679
|
+
const settleScroll = React68.useCallback(() => {
|
|
17623
17680
|
if (!mobileListRef.current) return;
|
|
17624
17681
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
17625
17682
|
const nextOption = options[nextIndex];
|
|
@@ -17631,13 +17688,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17631
17688
|
}
|
|
17632
17689
|
setPendingValue(nextOption);
|
|
17633
17690
|
}, [options, pendingValue]);
|
|
17634
|
-
const scheduleScrollSettle =
|
|
17691
|
+
const scheduleScrollSettle = React68.useCallback(() => {
|
|
17635
17692
|
clearScrollSettleTimeout();
|
|
17636
17693
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
17637
17694
|
settleScroll();
|
|
17638
17695
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
17639
17696
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
17640
|
-
const handleScroll =
|
|
17697
|
+
const handleScroll = React68.useCallback(() => {
|
|
17641
17698
|
if (!mobileListRef.current) return;
|
|
17642
17699
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
17643
17700
|
clearScrollAnimationFrame();
|
|
@@ -17647,7 +17704,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17647
17704
|
});
|
|
17648
17705
|
scheduleScrollSettle();
|
|
17649
17706
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
17650
|
-
const focusOptionByIndex =
|
|
17707
|
+
const focusOptionByIndex = React68.useCallback(
|
|
17651
17708
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
17652
17709
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
17653
17710
|
const option = options[index];
|
|
@@ -17665,7 +17722,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17665
17722
|
},
|
|
17666
17723
|
[options, scheduleScrollSettle]
|
|
17667
17724
|
);
|
|
17668
|
-
const handleOptionClick =
|
|
17725
|
+
const handleOptionClick = React68.useCallback(
|
|
17669
17726
|
(option) => {
|
|
17670
17727
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
17671
17728
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -17674,7 +17731,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17674
17731
|
},
|
|
17675
17732
|
[disabled, focusOptionByIndex, options]
|
|
17676
17733
|
);
|
|
17677
|
-
const moveByStep =
|
|
17734
|
+
const moveByStep = React68.useCallback(
|
|
17678
17735
|
(step) => {
|
|
17679
17736
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
17680
17737
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -17686,7 +17743,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17686
17743
|
},
|
|
17687
17744
|
[focusOptionByIndex, options, pendingValue]
|
|
17688
17745
|
);
|
|
17689
|
-
const moveToBoundary =
|
|
17746
|
+
const moveToBoundary = React68.useCallback(
|
|
17690
17747
|
(boundary) => {
|
|
17691
17748
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
17692
17749
|
if (targetIndex >= 0) {
|
|
@@ -17695,7 +17752,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17695
17752
|
},
|
|
17696
17753
|
[focusOptionByIndex, options]
|
|
17697
17754
|
);
|
|
17698
|
-
const syncPendingValue =
|
|
17755
|
+
const syncPendingValue = React68.useCallback(
|
|
17699
17756
|
(nextValue) => {
|
|
17700
17757
|
const normalizedValue = nextValue ?? null;
|
|
17701
17758
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -17723,9 +17780,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
17723
17780
|
}
|
|
17724
17781
|
|
|
17725
17782
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
17726
|
-
import * as
|
|
17783
|
+
import * as React69 from "react";
|
|
17727
17784
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
17728
|
-
const reactId =
|
|
17785
|
+
const reactId = React69.useId().replace(/:/g, "");
|
|
17729
17786
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
17730
17787
|
const triggerId = `${baseId}-trigger`;
|
|
17731
17788
|
const labelId = `${baseId}-label`;
|
|
@@ -17735,7 +17792,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
17735
17792
|
const listboxId = `${baseId}-listbox`;
|
|
17736
17793
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
17737
17794
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
17738
|
-
const getOptionId2 =
|
|
17795
|
+
const getOptionId2 = React69.useCallback(
|
|
17739
17796
|
(index) => `${baseId}-option-${index}`,
|
|
17740
17797
|
[baseId]
|
|
17741
17798
|
);
|
|
@@ -17754,7 +17811,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
17754
17811
|
|
|
17755
17812
|
// src/airbnb-fields/select/Select.tsx
|
|
17756
17813
|
import { jsx as jsx176, jsxs as jsxs117 } from "react/jsx-runtime";
|
|
17757
|
-
var AirbnbSelect =
|
|
17814
|
+
var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
|
|
17758
17815
|
options = [],
|
|
17759
17816
|
value,
|
|
17760
17817
|
onChange,
|
|
@@ -17781,8 +17838,8 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
|
|
|
17781
17838
|
noOptionsMessage
|
|
17782
17839
|
}, ref) {
|
|
17783
17840
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
17784
|
-
const [isOpen, setIsOpen] =
|
|
17785
|
-
const containerRef =
|
|
17841
|
+
const [isOpen, setIsOpen] = React70.useState(false);
|
|
17842
|
+
const containerRef = React70.useRef(null);
|
|
17786
17843
|
const hasValue = Boolean(value);
|
|
17787
17844
|
const helperText = placeholder ?? label;
|
|
17788
17845
|
const shouldDescribeHelperText = !hasValue && helperText !== label;
|
|
@@ -17843,12 +17900,12 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
|
|
|
17843
17900
|
onOutsideClick: () => setIsOpen(false),
|
|
17844
17901
|
isDisabled: !isOpen || isMobile3
|
|
17845
17902
|
});
|
|
17846
|
-
|
|
17903
|
+
React70.useEffect(() => {
|
|
17847
17904
|
if (isBlocked) {
|
|
17848
17905
|
setIsOpen(false);
|
|
17849
17906
|
}
|
|
17850
17907
|
}, [isBlocked]);
|
|
17851
|
-
|
|
17908
|
+
React70.useEffect(
|
|
17852
17909
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
17853
17910
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
17854
17911
|
return;
|
|
@@ -17860,7 +17917,7 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
|
|
|
17860
17917
|
},
|
|
17861
17918
|
[onChange, options, value]
|
|
17862
17919
|
);
|
|
17863
|
-
const handleMobileOpenChange =
|
|
17920
|
+
const handleMobileOpenChange = React70.useCallback(
|
|
17864
17921
|
(nextOpen) => {
|
|
17865
17922
|
if (isBlocked && nextOpen) return;
|
|
17866
17923
|
setIsOpen(nextOpen);
|
|
@@ -17871,7 +17928,7 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
|
|
|
17871
17928
|
},
|
|
17872
17929
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
17873
17930
|
);
|
|
17874
|
-
const handleMobileDone =
|
|
17931
|
+
const handleMobileDone = React70.useCallback(() => {
|
|
17875
17932
|
if (isBlocked) return;
|
|
17876
17933
|
const finalOption = pendingValue;
|
|
17877
17934
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -17880,7 +17937,7 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
|
|
|
17880
17937
|
setIsOpen(false);
|
|
17881
17938
|
focusTrigger();
|
|
17882
17939
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
17883
|
-
const handleTriggerClick =
|
|
17940
|
+
const handleTriggerClick = React70.useCallback(() => {
|
|
17884
17941
|
if (isBlocked) return;
|
|
17885
17942
|
setIsOpen((prev) => {
|
|
17886
17943
|
const nextOpen = !prev;
|
|
@@ -18054,7 +18111,7 @@ function formatPhoneCodeOptionLabel(option) {
|
|
|
18054
18111
|
const value = String(option.value);
|
|
18055
18112
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
18056
18113
|
}
|
|
18057
|
-
var AirbnbPhoneField =
|
|
18114
|
+
var AirbnbPhoneField = React71.forwardRef(
|
|
18058
18115
|
({
|
|
18059
18116
|
variant = "default",
|
|
18060
18117
|
label,
|
|
@@ -18078,8 +18135,8 @@ var AirbnbPhoneField = React70.forwardRef(
|
|
|
18078
18135
|
mobileTitle,
|
|
18079
18136
|
codePlaceholder = "+00"
|
|
18080
18137
|
}, ref) => {
|
|
18081
|
-
const inputId =
|
|
18082
|
-
const codeOptions =
|
|
18138
|
+
const inputId = React71.useId();
|
|
18139
|
+
const codeOptions = React71.useMemo(
|
|
18083
18140
|
() => options.map((option) => ({
|
|
18084
18141
|
value: option.value,
|
|
18085
18142
|
label: formatPhoneCodeOptionLabel(option),
|
|
@@ -18087,7 +18144,7 @@ var AirbnbPhoneField = React70.forwardRef(
|
|
|
18087
18144
|
})),
|
|
18088
18145
|
[options]
|
|
18089
18146
|
);
|
|
18090
|
-
const selectedCodeOption =
|
|
18147
|
+
const selectedCodeOption = React71.useMemo(
|
|
18091
18148
|
() => codeOptions.find((option) => option.value === value?.code) ?? null,
|
|
18092
18149
|
[codeOptions, value?.code]
|
|
18093
18150
|
);
|
|
@@ -18229,10 +18286,10 @@ var AirbnbPhoneField = React70.forwardRef(
|
|
|
18229
18286
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
18230
18287
|
|
|
18231
18288
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
18232
|
-
import * as
|
|
18289
|
+
import * as React72 from "react";
|
|
18233
18290
|
import { ChevronDown as ChevronDown6, Search as Search5 } from "lucide-react";
|
|
18234
18291
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
18235
|
-
import { useCallback as
|
|
18292
|
+
import { useCallback as useCallback52 } from "react";
|
|
18236
18293
|
import { jsx as jsx178, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
18237
18294
|
var ROW_HEIGHT = 48;
|
|
18238
18295
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
@@ -18274,13 +18331,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18274
18331
|
loadingMessage
|
|
18275
18332
|
}, ref) => {
|
|
18276
18333
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18277
|
-
const reactId =
|
|
18278
|
-
const [open, setOpen] =
|
|
18279
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
18280
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
18281
|
-
const containerRef =
|
|
18282
|
-
const triggerRef =
|
|
18283
|
-
const inputRef =
|
|
18334
|
+
const reactId = React72.useId();
|
|
18335
|
+
const [open, setOpen] = React72.useState(false);
|
|
18336
|
+
const [internalSearchValue, setInternalSearchValue] = React72.useState("");
|
|
18337
|
+
const [highlightedIndex, setHighlightedIndex] = React72.useState(-1);
|
|
18338
|
+
const containerRef = React72.useRef(null);
|
|
18339
|
+
const triggerRef = React72.useRef(null);
|
|
18340
|
+
const inputRef = React72.useRef(null);
|
|
18284
18341
|
const listboxId = `${reactId}-listbox`;
|
|
18285
18342
|
const labelId = `${reactId}-label`;
|
|
18286
18343
|
const valueId = `${reactId}-value`;
|
|
@@ -18289,13 +18346,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18289
18346
|
const searchInputId = `${reactId}-search`;
|
|
18290
18347
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
18291
18348
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
18292
|
-
const visibleOptions =
|
|
18349
|
+
const visibleOptions = React72.useMemo(() => {
|
|
18293
18350
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
18294
18351
|
return options;
|
|
18295
18352
|
}
|
|
18296
18353
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
18297
18354
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
18298
|
-
const selectedIndex =
|
|
18355
|
+
const selectedIndex = React72.useMemo(
|
|
18299
18356
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
18300
18357
|
[value?.value, visibleOptions]
|
|
18301
18358
|
);
|
|
@@ -18311,7 +18368,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18311
18368
|
isDisabled: !open || isMobile3
|
|
18312
18369
|
});
|
|
18313
18370
|
const handleOnOpenChange = useEvent(onOpenChange);
|
|
18314
|
-
const setSelectOpen =
|
|
18371
|
+
const setSelectOpen = useCallback52(
|
|
18315
18372
|
(nextOpen, options2) => {
|
|
18316
18373
|
setOpen(nextOpen);
|
|
18317
18374
|
handleOnOpenChange?.(nextOpen);
|
|
@@ -18321,7 +18378,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18321
18378
|
},
|
|
18322
18379
|
[handleOnOpenChange]
|
|
18323
18380
|
);
|
|
18324
|
-
|
|
18381
|
+
React72.useEffect(() => {
|
|
18325
18382
|
if (isBlocked) {
|
|
18326
18383
|
setSelectOpen(false);
|
|
18327
18384
|
return;
|
|
@@ -18334,7 +18391,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18334
18391
|
window.cancelAnimationFrame(frameId);
|
|
18335
18392
|
};
|
|
18336
18393
|
}, [isBlocked, open, setSelectOpen]);
|
|
18337
|
-
|
|
18394
|
+
React72.useEffect(() => {
|
|
18338
18395
|
if (!open) {
|
|
18339
18396
|
setHighlightedIndex(-1);
|
|
18340
18397
|
return;
|
|
@@ -18429,7 +18486,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18429
18486
|
onOptionHover: setHighlightedIndex
|
|
18430
18487
|
}
|
|
18431
18488
|
);
|
|
18432
|
-
|
|
18489
|
+
React72.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
18433
18490
|
return /* @__PURE__ */ jsxs119("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
18434
18491
|
name && /* @__PURE__ */ jsx178("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
18435
18492
|
/* @__PURE__ */ jsx178(
|
|
@@ -18508,7 +18565,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
18508
18565
|
) : null
|
|
18509
18566
|
] });
|
|
18510
18567
|
};
|
|
18511
|
-
var AirbnbSearchableSelect =
|
|
18568
|
+
var AirbnbSearchableSelect = React72.forwardRef(
|
|
18512
18569
|
AirbnbSearchableSelectInternal
|
|
18513
18570
|
);
|
|
18514
18571
|
function AirbnbSearchableSelectContent({
|
|
@@ -18535,9 +18592,9 @@ function AirbnbSearchableSelectContent({
|
|
|
18535
18592
|
onOptionClick,
|
|
18536
18593
|
onOptionHover
|
|
18537
18594
|
}) {
|
|
18538
|
-
const listRef =
|
|
18539
|
-
const lastLoadMoreOptionsLengthRef =
|
|
18540
|
-
const previousHighlightedIndexRef =
|
|
18595
|
+
const listRef = React72.useRef(null);
|
|
18596
|
+
const lastLoadMoreOptionsLengthRef = React72.useRef(null);
|
|
18597
|
+
const previousHighlightedIndexRef = React72.useRef(highlightedIndex);
|
|
18541
18598
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
18542
18599
|
const virtualizer = useVirtualizer3({
|
|
18543
18600
|
count: rowCount,
|
|
@@ -18548,7 +18605,7 @@ function AirbnbSearchableSelectContent({
|
|
|
18548
18605
|
const virtualItems = virtualizer.getVirtualItems();
|
|
18549
18606
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
18550
18607
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
18551
|
-
|
|
18608
|
+
React72.useEffect(() => {
|
|
18552
18609
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
18553
18610
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
18554
18611
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -18556,7 +18613,7 @@ function AirbnbSearchableSelectContent({
|
|
|
18556
18613
|
onLoadMore?.();
|
|
18557
18614
|
}
|
|
18558
18615
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
18559
|
-
|
|
18616
|
+
React72.useEffect(() => {
|
|
18560
18617
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
18561
18618
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
18562
18619
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -18674,11 +18731,11 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
18674
18731
|
}
|
|
18675
18732
|
|
|
18676
18733
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
18677
|
-
import * as
|
|
18734
|
+
import * as React73 from "react";
|
|
18678
18735
|
import { useTranslation as useTranslation40 } from "react-i18next";
|
|
18679
18736
|
import { Search as Search6, X as X10 } from "lucide-react";
|
|
18680
18737
|
import { jsx as jsx179, jsxs as jsxs120 } from "react/jsx-runtime";
|
|
18681
|
-
var AirbnbSearchInput =
|
|
18738
|
+
var AirbnbSearchInput = React73.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
18682
18739
|
const { t } = useTranslation40();
|
|
18683
18740
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
18684
18741
|
return /* @__PURE__ */ jsxs120("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|