@chekinapp/ui 0.0.131 → 0.0.133
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 +437 -359
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +350 -272
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -7786,7 +7786,6 @@ var SectionTagColors = /* @__PURE__ */ ((SectionTagColors2) => {
|
|
|
7786
7786
|
|
|
7787
7787
|
// src/section/Section.tsx
|
|
7788
7788
|
import { forwardRef as forwardRef38 } from "react";
|
|
7789
|
-
import { CircleHelp } from "lucide-react";
|
|
7790
7789
|
import { useTranslation as useTranslation15 } from "react-i18next";
|
|
7791
7790
|
|
|
7792
7791
|
// src/section/constants.ts
|
|
@@ -7799,16 +7798,17 @@ var SubSectionSize = /* @__PURE__ */ ((SubSectionSize2) => {
|
|
|
7799
7798
|
// src/section/Section.tsx
|
|
7800
7799
|
import { jsx as jsx98, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
7801
7800
|
function TooltipInfo({ content, className }) {
|
|
7802
|
-
return /* @__PURE__ */ jsx98(
|
|
7803
|
-
|
|
7801
|
+
return /* @__PURE__ */ jsx98(
|
|
7802
|
+
HelpTooltip,
|
|
7804
7803
|
{
|
|
7805
|
-
|
|
7806
|
-
|
|
7804
|
+
side: "right",
|
|
7805
|
+
content,
|
|
7806
|
+
contentClassName: "max-w-64",
|
|
7807
|
+
className: cn("text-[var(--chekin-color-gray-1)]", className),
|
|
7807
7808
|
onClick: (event) => event.stopPropagation(),
|
|
7808
|
-
|
|
7809
|
-
children: /* @__PURE__ */ jsx98(CircleHelp, { className: "h-4 w-4" })
|
|
7809
|
+
label: typeof content === "string" ? content : "More information"
|
|
7810
7810
|
}
|
|
7811
|
-
)
|
|
7811
|
+
);
|
|
7812
7812
|
}
|
|
7813
7813
|
var Section = forwardRef38(
|
|
7814
7814
|
({
|
|
@@ -12150,7 +12150,11 @@ var Input = React44.forwardRef(
|
|
|
12150
12150
|
/* @__PURE__ */ jsxs89(
|
|
12151
12151
|
"div",
|
|
12152
12152
|
{
|
|
12153
|
-
className: cn(
|
|
12153
|
+
className: cn(
|
|
12154
|
+
"input__content relative w-full cursor-text",
|
|
12155
|
+
readOnly && !disabled && !loading && "cursor-default",
|
|
12156
|
+
contentClassName
|
|
12157
|
+
),
|
|
12154
12158
|
children: [
|
|
12155
12159
|
/* @__PURE__ */ jsx142(
|
|
12156
12160
|
Fieldset,
|
|
@@ -12205,7 +12209,8 @@ var Input = React44.forwardRef(
|
|
|
12205
12209
|
isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
|
|
12206
12210
|
isEmpty && "text-[var(--chekin-color-gray-1)]",
|
|
12207
12211
|
inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
|
|
12208
|
-
|
|
12212
|
+
disabled && "cursor-not-allowed",
|
|
12213
|
+
readOnly && !disabled && !loading && "cursor-default",
|
|
12209
12214
|
loading && "cursor-progress",
|
|
12210
12215
|
leftIcon && "pl-10",
|
|
12211
12216
|
(showRightPaddingForReset || showRightPaddingForReveal) && "pr-10",
|
|
@@ -13222,7 +13227,21 @@ function useSelectState(params) {
|
|
|
13222
13227
|
);
|
|
13223
13228
|
return !existsInOptions && !existsInSelected;
|
|
13224
13229
|
}, [isCreatable, trimmedInput, isValidNewOption, options, selectedOptions]);
|
|
13230
|
+
const sssDebugHighlightCount = React48.useRef(0);
|
|
13225
13231
|
React48.useEffect(() => {
|
|
13232
|
+
sssDebugHighlightCount.current += 1;
|
|
13233
|
+
console.log(
|
|
13234
|
+
`[SC-debug] highlight effect run #${sssDebugHighlightCount.current}`,
|
|
13235
|
+
{
|
|
13236
|
+
isOpen,
|
|
13237
|
+
filteredOptionsLength: filteredOptions.length,
|
|
13238
|
+
isOptionDisabledStable: typeof isOptionDisabled
|
|
13239
|
+
}
|
|
13240
|
+
);
|
|
13241
|
+
if (sssDebugHighlightCount.current === 30) {
|
|
13242
|
+
console.warn("[SC-debug] highlight effect ran 30x \u2014 opening debugger");
|
|
13243
|
+
debugger;
|
|
13244
|
+
}
|
|
13226
13245
|
if (!isOpen || filteredOptions.length === 0) {
|
|
13227
13246
|
setHighlightedIndex(-1);
|
|
13228
13247
|
return;
|
|
@@ -13250,6 +13269,11 @@ function useSelectState(params) {
|
|
|
13250
13269
|
);
|
|
13251
13270
|
const selectOption = React48.useCallback(
|
|
13252
13271
|
(option) => {
|
|
13272
|
+
console.log("[SC-debug] selectOption called", {
|
|
13273
|
+
value: option.value,
|
|
13274
|
+
isMulti,
|
|
13275
|
+
currentSelectedCount: selectedOptions.length
|
|
13276
|
+
});
|
|
13253
13277
|
if (!isOptionEnabled(option, isOptionDisabled)) return;
|
|
13254
13278
|
if (isMulti) {
|
|
13255
13279
|
const exists = isValueSelected(option);
|
|
@@ -14709,7 +14733,7 @@ var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiS
|
|
|
14709
14733
|
});
|
|
14710
14734
|
|
|
14711
14735
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14712
|
-
import * as
|
|
14736
|
+
import * as React59 from "react";
|
|
14713
14737
|
import { useTranslation as useTranslation36 } from "react-i18next";
|
|
14714
14738
|
|
|
14715
14739
|
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
@@ -14767,12 +14791,22 @@ function SelectCheckboxOption(props) {
|
|
|
14767
14791
|
}
|
|
14768
14792
|
|
|
14769
14793
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
14794
|
+
import * as React58 from "react";
|
|
14770
14795
|
import { ChevronDown as ChevronDown3 } from "lucide-react";
|
|
14771
14796
|
import { useTranslation as useTranslation35 } from "react-i18next";
|
|
14772
14797
|
import { jsx as jsx164, jsxs as jsxs103 } from "react/jsx-runtime";
|
|
14773
14798
|
function createCountTrigger(opts) {
|
|
14774
|
-
const {
|
|
14799
|
+
const { getValueText, getTotalCount } = opts;
|
|
14775
14800
|
function CountTrigger(props) {
|
|
14801
|
+
const ctDebugRenderCount = React58.useRef(0);
|
|
14802
|
+
ctDebugRenderCount.current += 1;
|
|
14803
|
+
React58.useEffect(() => {
|
|
14804
|
+
console.log("[SC-debug] CountTrigger MOUNTED");
|
|
14805
|
+
return () => {
|
|
14806
|
+
console.log("[SC-debug] CountTrigger UNMOUNTED");
|
|
14807
|
+
};
|
|
14808
|
+
}, []);
|
|
14809
|
+
console.log(`[SC-debug] CountTrigger render #${ctDebugRenderCount.current}`);
|
|
14776
14810
|
const { t } = useTranslation35();
|
|
14777
14811
|
const {
|
|
14778
14812
|
triggerId,
|
|
@@ -14792,6 +14826,8 @@ function createCountTrigger(opts) {
|
|
|
14792
14826
|
onTriggerFocus,
|
|
14793
14827
|
leftIcon
|
|
14794
14828
|
} = props;
|
|
14829
|
+
const valueText = getValueText();
|
|
14830
|
+
const totalCount = getTotalCount();
|
|
14795
14831
|
const count = selectedOptions.length;
|
|
14796
14832
|
const total = totalCount ?? count;
|
|
14797
14833
|
const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
|
|
@@ -14902,25 +14938,62 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14902
14938
|
const isPaginated = hasPaginationProps(
|
|
14903
14939
|
paginationAndRest
|
|
14904
14940
|
);
|
|
14905
|
-
const
|
|
14941
|
+
const scDebugRenderCount = React59.useRef(0);
|
|
14942
|
+
const scDebugPrevPropsRef = React59.useRef({});
|
|
14943
|
+
scDebugRenderCount.current += 1;
|
|
14944
|
+
{
|
|
14945
|
+
const current = {
|
|
14946
|
+
value,
|
|
14947
|
+
defaultValue,
|
|
14948
|
+
onChange,
|
|
14949
|
+
trigger,
|
|
14950
|
+
userComponents,
|
|
14951
|
+
valueText,
|
|
14952
|
+
filterOption,
|
|
14953
|
+
rawOptions,
|
|
14954
|
+
onSearchChange
|
|
14955
|
+
};
|
|
14956
|
+
const prev = scDebugPrevPropsRef.current;
|
|
14957
|
+
const changed = [];
|
|
14958
|
+
for (const key of Object.keys(current)) {
|
|
14959
|
+
if (prev[key] !== current[key]) changed.push(key);
|
|
14960
|
+
}
|
|
14961
|
+
console.log(
|
|
14962
|
+
`[SC-debug] SelectCheckboxes render #${scDebugRenderCount.current}`,
|
|
14963
|
+
{ changed, isPaginated, isControlled: value !== void 0 }
|
|
14964
|
+
);
|
|
14965
|
+
scDebugPrevPropsRef.current = current;
|
|
14966
|
+
if (scDebugRenderCount.current === 30) {
|
|
14967
|
+
console.warn(
|
|
14968
|
+
"[SC-debug] hit 30 renders of SelectCheckboxes \u2014 opening debugger"
|
|
14969
|
+
);
|
|
14970
|
+
debugger;
|
|
14971
|
+
}
|
|
14972
|
+
}
|
|
14973
|
+
const [inputValue, setInputValue] = React59.useState("");
|
|
14906
14974
|
const isControlled = value !== void 0;
|
|
14907
|
-
const [internalValue, setInternalValue] =
|
|
14975
|
+
const [internalValue, setInternalValue] = React59.useState(
|
|
14908
14976
|
() => defaultValue ?? []
|
|
14909
14977
|
);
|
|
14910
14978
|
const currentValue = isControlled ? value : internalValue;
|
|
14911
|
-
const selected =
|
|
14912
|
-
const handleChange =
|
|
14979
|
+
const selected = React59.useMemo(() => currentValue ?? [], [currentValue]);
|
|
14980
|
+
const handleChange = React59.useCallback(
|
|
14913
14981
|
(next, meta) => {
|
|
14982
|
+
console.log("[SC-debug] handleChange", {
|
|
14983
|
+
action: meta?.action,
|
|
14984
|
+
nextLength: next.length,
|
|
14985
|
+
isControlled
|
|
14986
|
+
});
|
|
14914
14987
|
if (!isControlled) setInternalValue(next);
|
|
14915
14988
|
onChange?.(next, meta);
|
|
14916
14989
|
},
|
|
14917
14990
|
[isControlled, onChange]
|
|
14918
14991
|
);
|
|
14919
|
-
const flatRawOptions =
|
|
14992
|
+
const flatRawOptions = React59.useMemo(
|
|
14920
14993
|
() => flattenGroupedOptions(rawOptions),
|
|
14921
14994
|
[rawOptions]
|
|
14922
14995
|
);
|
|
14923
|
-
const filteredGrouped =
|
|
14996
|
+
const filteredGrouped = React59.useMemo(() => {
|
|
14924
14997
|
const trimmed = inputValue.trim();
|
|
14925
14998
|
if (!trimmed) return rawOptions;
|
|
14926
14999
|
return rawOptions.map((item) => {
|
|
@@ -14931,7 +15004,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14931
15004
|
return filterOption(item, trimmed) ? item : null;
|
|
14932
15005
|
}).filter((item) => item !== null);
|
|
14933
15006
|
}, [rawOptions, inputValue, filterOption]);
|
|
14934
|
-
const filteredFlat =
|
|
15007
|
+
const filteredFlat = React59.useMemo(
|
|
14935
15008
|
() => flattenGroupedOptions(filteredGrouped),
|
|
14936
15009
|
[filteredGrouped]
|
|
14937
15010
|
);
|
|
@@ -14939,7 +15012,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14939
15012
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
14940
15013
|
}, 0);
|
|
14941
15014
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
14942
|
-
const handleToggleAll =
|
|
15015
|
+
const handleToggleAll = React59.useCallback(() => {
|
|
14943
15016
|
if (allVisibleSelected) {
|
|
14944
15017
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
14945
15018
|
handleChange(
|
|
@@ -14954,14 +15027,19 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14954
15027
|
}
|
|
14955
15028
|
handleChange(merged, { action: "select" });
|
|
14956
15029
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
14957
|
-
const
|
|
15030
|
+
const valueTextRef = React59.useRef(valueText);
|
|
15031
|
+
const totalCountRef = React59.useRef(flatRawOptions.length);
|
|
15032
|
+
valueTextRef.current = valueText;
|
|
15033
|
+
totalCountRef.current = flatRawOptions.length;
|
|
15034
|
+
const Control = React59.useMemo(() => {
|
|
15035
|
+
console.log("[SC-debug] (re)creating Control component", { hasCustomTrigger: !!trigger });
|
|
14958
15036
|
if (trigger) return makeTriggerSlot(trigger);
|
|
14959
15037
|
return createCountTrigger({
|
|
14960
|
-
|
|
14961
|
-
|
|
15038
|
+
getValueText: () => valueTextRef.current,
|
|
15039
|
+
getTotalCount: () => totalCountRef.current
|
|
14962
15040
|
});
|
|
14963
|
-
}, [trigger
|
|
14964
|
-
const components =
|
|
15041
|
+
}, [trigger]);
|
|
15042
|
+
const components = React59.useMemo(
|
|
14965
15043
|
() => ({
|
|
14966
15044
|
...userComponents,
|
|
14967
15045
|
Control,
|
|
@@ -14977,7 +15055,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14977
15055
|
onToggle: handleToggleAll
|
|
14978
15056
|
}
|
|
14979
15057
|
) : void 0;
|
|
14980
|
-
const handleInputChange =
|
|
15058
|
+
const handleInputChange = React59.useCallback(
|
|
14981
15059
|
(next) => {
|
|
14982
15060
|
setInputValue(next);
|
|
14983
15061
|
onSearchChange?.(next);
|
|
@@ -15020,16 +15098,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15020
15098
|
}
|
|
15021
15099
|
);
|
|
15022
15100
|
}
|
|
15023
|
-
var SelectCheckboxes =
|
|
15101
|
+
var SelectCheckboxes = React59.forwardRef(
|
|
15024
15102
|
SelectCheckboxesInternal
|
|
15025
15103
|
);
|
|
15026
15104
|
|
|
15027
15105
|
// src/dashboard/textarea/Textarea.tsx
|
|
15028
|
-
import * as
|
|
15106
|
+
import * as React61 from "react";
|
|
15029
15107
|
import { useTranslation as useTranslation37 } from "react-i18next";
|
|
15030
15108
|
|
|
15031
15109
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15032
|
-
import * as
|
|
15110
|
+
import * as React60 from "react";
|
|
15033
15111
|
var isEmptyValue2 = (value) => {
|
|
15034
15112
|
if (value === void 0 || value === null) return true;
|
|
15035
15113
|
return String(value).length === 0;
|
|
@@ -15048,12 +15126,12 @@ function useTextareaValueState({
|
|
|
15048
15126
|
value,
|
|
15049
15127
|
defaultValue
|
|
15050
15128
|
}) {
|
|
15051
|
-
const textareaRef =
|
|
15129
|
+
const textareaRef = React60.useRef(null);
|
|
15052
15130
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15053
15131
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15054
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15132
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React60.useState(propsAreEmpty);
|
|
15055
15133
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15056
|
-
const setNativeValue =
|
|
15134
|
+
const setNativeValue = React60.useCallback(
|
|
15057
15135
|
(nextValue) => {
|
|
15058
15136
|
if (isControlled) return;
|
|
15059
15137
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15063,14 +15141,14 @@ function useTextareaValueState({
|
|
|
15063
15141
|
},
|
|
15064
15142
|
[isControlled]
|
|
15065
15143
|
);
|
|
15066
|
-
const syncValueState =
|
|
15144
|
+
const syncValueState = React60.useCallback(() => {
|
|
15067
15145
|
if (!textareaRef.current) return;
|
|
15068
15146
|
setNativeValue(textareaRef.current.value);
|
|
15069
15147
|
}, [setNativeValue]);
|
|
15070
|
-
|
|
15148
|
+
React60.useLayoutEffect(() => {
|
|
15071
15149
|
syncValueState();
|
|
15072
15150
|
});
|
|
15073
|
-
|
|
15151
|
+
React60.useEffect(() => {
|
|
15074
15152
|
const textarea = textareaRef.current;
|
|
15075
15153
|
const form = textarea?.form;
|
|
15076
15154
|
if (isControlled || !form) return;
|
|
@@ -15097,7 +15175,7 @@ function useTextareaValueState({
|
|
|
15097
15175
|
import { jsx as jsx167, jsxs as jsxs105 } from "react/jsx-runtime";
|
|
15098
15176
|
var LINE_HEIGHT = 20;
|
|
15099
15177
|
var VERTICAL_PADDING = 32;
|
|
15100
|
-
var Textarea =
|
|
15178
|
+
var Textarea = React61.forwardRef(function Textarea2({
|
|
15101
15179
|
className,
|
|
15102
15180
|
textareaClassName,
|
|
15103
15181
|
label,
|
|
@@ -15125,12 +15203,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15125
15203
|
}, ref) {
|
|
15126
15204
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15127
15205
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15128
|
-
const reactId =
|
|
15206
|
+
const reactId = React61.useId();
|
|
15129
15207
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15130
15208
|
const { t } = useTranslation37();
|
|
15131
15209
|
const isInvalid = Boolean(invalid || error);
|
|
15132
15210
|
const isBlocked = Boolean(disabled);
|
|
15133
|
-
const resize =
|
|
15211
|
+
const resize = React61.useCallback(() => {
|
|
15134
15212
|
const el = textareaRef.current;
|
|
15135
15213
|
if (!el || !autosize) return;
|
|
15136
15214
|
el.style.height = "auto";
|
|
@@ -15140,7 +15218,7 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15140
15218
|
el.style.height = `${nextHeight}px`;
|
|
15141
15219
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15142
15220
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15143
|
-
|
|
15221
|
+
React61.useLayoutEffect(() => {
|
|
15144
15222
|
resize();
|
|
15145
15223
|
}, [resize, value]);
|
|
15146
15224
|
const handleInput = (event) => {
|
|
@@ -15232,12 +15310,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15232
15310
|
});
|
|
15233
15311
|
|
|
15234
15312
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15235
|
-
import * as
|
|
15313
|
+
import * as React63 from "react";
|
|
15236
15314
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
15237
15315
|
import { useTranslation as useTranslation38 } from "react-i18next";
|
|
15238
15316
|
|
|
15239
15317
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15240
|
-
import * as
|
|
15318
|
+
import * as React62 from "react";
|
|
15241
15319
|
|
|
15242
15320
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15243
15321
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15388,21 +15466,21 @@ function useDatePickerWheel({
|
|
|
15388
15466
|
minDate,
|
|
15389
15467
|
maxDate
|
|
15390
15468
|
}) {
|
|
15391
|
-
const years =
|
|
15392
|
-
const [draftDate, setDraftDate] =
|
|
15469
|
+
const years = React62.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15470
|
+
const [draftDate, setDraftDate] = React62.useState(
|
|
15393
15471
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15394
15472
|
);
|
|
15395
15473
|
const draftYear = draftDate.getFullYear();
|
|
15396
15474
|
const draftMonth = draftDate.getMonth();
|
|
15397
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15398
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15399
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15400
|
-
const monthListRef =
|
|
15401
|
-
const dayListRef =
|
|
15402
|
-
const yearListRef =
|
|
15403
|
-
const settleTimeoutsRef =
|
|
15404
|
-
const animationFramesRef =
|
|
15405
|
-
const columnRefs =
|
|
15475
|
+
const [monthScrollTop, setMonthScrollTop] = React62.useState(0);
|
|
15476
|
+
const [dayScrollTop, setDayScrollTop] = React62.useState(0);
|
|
15477
|
+
const [yearScrollTop, setYearScrollTop] = React62.useState(0);
|
|
15478
|
+
const monthListRef = React62.useRef(null);
|
|
15479
|
+
const dayListRef = React62.useRef(null);
|
|
15480
|
+
const yearListRef = React62.useRef(null);
|
|
15481
|
+
const settleTimeoutsRef = React62.useRef({});
|
|
15482
|
+
const animationFramesRef = React62.useRef({});
|
|
15483
|
+
const columnRefs = React62.useMemo(
|
|
15406
15484
|
() => ({
|
|
15407
15485
|
month: monthListRef,
|
|
15408
15486
|
day: dayListRef,
|
|
@@ -15410,7 +15488,7 @@ function useDatePickerWheel({
|
|
|
15410
15488
|
}),
|
|
15411
15489
|
[]
|
|
15412
15490
|
);
|
|
15413
|
-
const setColumnScrollTop =
|
|
15491
|
+
const setColumnScrollTop = React62.useCallback(
|
|
15414
15492
|
(column, nextScrollTop) => {
|
|
15415
15493
|
if (column === "month") {
|
|
15416
15494
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15424,19 +15502,19 @@ function useDatePickerWheel({
|
|
|
15424
15502
|
},
|
|
15425
15503
|
[]
|
|
15426
15504
|
);
|
|
15427
|
-
const clearSettleTimeout =
|
|
15505
|
+
const clearSettleTimeout = React62.useCallback((column) => {
|
|
15428
15506
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15429
15507
|
if (timeoutId === void 0) return;
|
|
15430
15508
|
window.clearTimeout(timeoutId);
|
|
15431
15509
|
delete settleTimeoutsRef.current[column];
|
|
15432
15510
|
}, []);
|
|
15433
|
-
const clearAnimationFrame =
|
|
15511
|
+
const clearAnimationFrame = React62.useCallback((column) => {
|
|
15434
15512
|
const frameId = animationFramesRef.current[column];
|
|
15435
15513
|
if (frameId === void 0) return;
|
|
15436
15514
|
window.cancelAnimationFrame(frameId);
|
|
15437
15515
|
delete animationFramesRef.current[column];
|
|
15438
15516
|
}, []);
|
|
15439
|
-
|
|
15517
|
+
React62.useEffect(
|
|
15440
15518
|
() => () => {
|
|
15441
15519
|
["month", "day", "year"].forEach((column) => {
|
|
15442
15520
|
clearSettleTimeout(column);
|
|
@@ -15445,22 +15523,22 @@ function useDatePickerWheel({
|
|
|
15445
15523
|
},
|
|
15446
15524
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15447
15525
|
);
|
|
15448
|
-
|
|
15526
|
+
React62.useEffect(() => {
|
|
15449
15527
|
if (isOpen) return;
|
|
15450
15528
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15451
15529
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15452
|
-
const months =
|
|
15530
|
+
const months = React62.useMemo(
|
|
15453
15531
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15454
15532
|
[draftYear, maxDate, minDate]
|
|
15455
15533
|
);
|
|
15456
|
-
const days =
|
|
15534
|
+
const days = React62.useMemo(
|
|
15457
15535
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15458
15536
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15459
15537
|
);
|
|
15460
15538
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15461
15539
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15462
15540
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15463
|
-
const syncScrollPositions =
|
|
15541
|
+
const syncScrollPositions = React62.useCallback(
|
|
15464
15542
|
(nextDate, behavior = "auto") => {
|
|
15465
15543
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15466
15544
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15484,7 +15562,7 @@ function useDatePickerWheel({
|
|
|
15484
15562
|
},
|
|
15485
15563
|
[maxDate, minDate, years]
|
|
15486
15564
|
);
|
|
15487
|
-
|
|
15565
|
+
React62.useLayoutEffect(() => {
|
|
15488
15566
|
if (!isOpen) return;
|
|
15489
15567
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15490
15568
|
setDraftDate(nextDate);
|
|
@@ -15495,7 +15573,7 @@ function useDatePickerWheel({
|
|
|
15495
15573
|
window.cancelAnimationFrame(frameId);
|
|
15496
15574
|
};
|
|
15497
15575
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15498
|
-
const updateDraftDate =
|
|
15576
|
+
const updateDraftDate = React62.useCallback(
|
|
15499
15577
|
(column, targetIndex, behavior = "smooth") => {
|
|
15500
15578
|
const currentDate = stripTime(draftDate);
|
|
15501
15579
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15540,7 +15618,7 @@ function useDatePickerWheel({
|
|
|
15540
15618
|
},
|
|
15541
15619
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15542
15620
|
);
|
|
15543
|
-
const settleColumnScroll =
|
|
15621
|
+
const settleColumnScroll = React62.useCallback(
|
|
15544
15622
|
(column) => {
|
|
15545
15623
|
const list = columnRefs[column].current;
|
|
15546
15624
|
if (!list) return;
|
|
@@ -15553,7 +15631,7 @@ function useDatePickerWheel({
|
|
|
15553
15631
|
},
|
|
15554
15632
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15555
15633
|
);
|
|
15556
|
-
const scheduleScrollSettle =
|
|
15634
|
+
const scheduleScrollSettle = React62.useCallback(
|
|
15557
15635
|
(column) => {
|
|
15558
15636
|
clearSettleTimeout(column);
|
|
15559
15637
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15562,7 +15640,7 @@ function useDatePickerWheel({
|
|
|
15562
15640
|
},
|
|
15563
15641
|
[clearSettleTimeout, settleColumnScroll]
|
|
15564
15642
|
);
|
|
15565
|
-
const handleColumnScroll =
|
|
15643
|
+
const handleColumnScroll = React62.useCallback(
|
|
15566
15644
|
(column) => {
|
|
15567
15645
|
const list = columnRefs[column].current;
|
|
15568
15646
|
if (!list) return;
|
|
@@ -15576,13 +15654,13 @@ function useDatePickerWheel({
|
|
|
15576
15654
|
},
|
|
15577
15655
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15578
15656
|
);
|
|
15579
|
-
const handleOptionSelect =
|
|
15657
|
+
const handleOptionSelect = React62.useCallback(
|
|
15580
15658
|
(column, targetIndex) => {
|
|
15581
15659
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15582
15660
|
},
|
|
15583
15661
|
[updateDraftDate]
|
|
15584
15662
|
);
|
|
15585
|
-
const focusAdjacentColumn =
|
|
15663
|
+
const focusAdjacentColumn = React62.useCallback(
|
|
15586
15664
|
(column, direction) => {
|
|
15587
15665
|
const order = ["month", "day", "year"];
|
|
15588
15666
|
const currentIndex = order.indexOf(column);
|
|
@@ -15592,7 +15670,7 @@ function useDatePickerWheel({
|
|
|
15592
15670
|
},
|
|
15593
15671
|
[columnRefs]
|
|
15594
15672
|
);
|
|
15595
|
-
const handleColumnKeyDown =
|
|
15673
|
+
const handleColumnKeyDown = React62.useCallback(
|
|
15596
15674
|
(column, event) => {
|
|
15597
15675
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15598
15676
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15914,7 +15992,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
15914
15992
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
15915
15993
|
return new Date(yearNum, monthIndex, dayNum);
|
|
15916
15994
|
}
|
|
15917
|
-
var Datepicker =
|
|
15995
|
+
var Datepicker = React63.forwardRef(
|
|
15918
15996
|
function Datepicker2({
|
|
15919
15997
|
label,
|
|
15920
15998
|
value,
|
|
@@ -15947,14 +16025,14 @@ var Datepicker = React62.forwardRef(
|
|
|
15947
16025
|
maxDate,
|
|
15948
16026
|
formatValue
|
|
15949
16027
|
}, ref) {
|
|
15950
|
-
const containerRef =
|
|
15951
|
-
const dayInputRef =
|
|
15952
|
-
const monthInputRef =
|
|
15953
|
-
const monthListRef =
|
|
15954
|
-
const yearInputRef =
|
|
15955
|
-
const mobileTriggerRef =
|
|
15956
|
-
const wheelBaseId =
|
|
15957
|
-
const reactId =
|
|
16028
|
+
const containerRef = React63.useRef(null);
|
|
16029
|
+
const dayInputRef = React63.useRef(null);
|
|
16030
|
+
const monthInputRef = React63.useRef(null);
|
|
16031
|
+
const monthListRef = React63.useRef(null);
|
|
16032
|
+
const yearInputRef = React63.useRef(null);
|
|
16033
|
+
const mobileTriggerRef = React63.useRef(null);
|
|
16034
|
+
const wheelBaseId = React63.useId();
|
|
16035
|
+
const reactId = React63.useId();
|
|
15958
16036
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
15959
16037
|
const dayId = `${baseId}-day`;
|
|
15960
16038
|
const monthId = `${baseId}-month`;
|
|
@@ -15963,38 +16041,38 @@ var Datepicker = React62.forwardRef(
|
|
|
15963
16041
|
const errorId = `${baseId}-error`;
|
|
15964
16042
|
const { t, i18n } = useTranslation38();
|
|
15965
16043
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
15966
|
-
const resolvedMonthLabels =
|
|
16044
|
+
const resolvedMonthLabels = React63.useMemo(
|
|
15967
16045
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
15968
16046
|
[resolvedLocale, monthLabels]
|
|
15969
16047
|
);
|
|
15970
16048
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
15971
16049
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
15972
16050
|
const isControlled = value !== void 0;
|
|
15973
|
-
const initialParts =
|
|
16051
|
+
const initialParts = React63.useMemo(
|
|
15974
16052
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
15975
16053
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15976
16054
|
[]
|
|
15977
16055
|
);
|
|
15978
|
-
const [day, setDay] =
|
|
15979
|
-
const [monthIndex, setMonthIndex] =
|
|
16056
|
+
const [day, setDay] = React63.useState(initialParts.day);
|
|
16057
|
+
const [monthIndex, setMonthIndex] = React63.useState(
|
|
15980
16058
|
initialParts.monthIndex
|
|
15981
16059
|
);
|
|
15982
|
-
const [year, setYear] =
|
|
15983
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
15984
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
15985
|
-
const [focusedField, setFocusedField] =
|
|
15986
|
-
const [monthInputValue, setMonthInputValue] =
|
|
15987
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
16060
|
+
const [year, setYear] = React63.useState(initialParts.year);
|
|
16061
|
+
const [isMonthOpen, setIsMonthOpen] = React63.useState(false);
|
|
16062
|
+
const [isWheelOpen, setIsWheelOpen] = React63.useState(false);
|
|
16063
|
+
const [focusedField, setFocusedField] = React63.useState(null);
|
|
16064
|
+
const [monthInputValue, setMonthInputValue] = React63.useState("");
|
|
16065
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React63.useState(-1);
|
|
15988
16066
|
const isMobile3 = useIsMobile();
|
|
15989
|
-
const emitChangeRef =
|
|
16067
|
+
const emitChangeRef = React63.useRef(() => {
|
|
15990
16068
|
});
|
|
15991
|
-
const dayStateRef =
|
|
15992
|
-
const yearStateRef =
|
|
15993
|
-
const monthIndexRef =
|
|
16069
|
+
const dayStateRef = React63.useRef(day);
|
|
16070
|
+
const yearStateRef = React63.useRef(year);
|
|
16071
|
+
const monthIndexRef = React63.useRef(monthIndex);
|
|
15994
16072
|
dayStateRef.current = day;
|
|
15995
16073
|
yearStateRef.current = year;
|
|
15996
16074
|
monthIndexRef.current = monthIndex;
|
|
15997
|
-
|
|
16075
|
+
React63.useImperativeHandle(
|
|
15998
16076
|
ref,
|
|
15999
16077
|
() => ({
|
|
16000
16078
|
getDayValue: () => dayStateRef.current,
|
|
@@ -16012,27 +16090,27 @@ var Datepicker = React62.forwardRef(
|
|
|
16012
16090
|
}),
|
|
16013
16091
|
[]
|
|
16014
16092
|
);
|
|
16015
|
-
|
|
16093
|
+
React63.useEffect(() => {
|
|
16016
16094
|
if (!isControlled) return;
|
|
16017
16095
|
const next = partsFromDate(value ?? null);
|
|
16018
16096
|
setDay(next.day);
|
|
16019
16097
|
setMonthIndex(next.monthIndex);
|
|
16020
16098
|
setYear(next.year);
|
|
16021
16099
|
}, [isControlled, value]);
|
|
16022
|
-
|
|
16100
|
+
React63.useEffect(() => {
|
|
16023
16101
|
if (focusedField === "month") return;
|
|
16024
16102
|
setMonthInputValue(
|
|
16025
16103
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16026
16104
|
);
|
|
16027
16105
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16028
|
-
const filteredMonths =
|
|
16106
|
+
const filteredMonths = React63.useMemo(() => {
|
|
16029
16107
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16030
16108
|
const query = monthInputValue.trim().toLowerCase();
|
|
16031
16109
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16032
16110
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16033
16111
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16034
16112
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16035
|
-
|
|
16113
|
+
React63.useEffect(() => {
|
|
16036
16114
|
if (!isMonthOpen) {
|
|
16037
16115
|
setMonthHighlightIndex(-1);
|
|
16038
16116
|
return;
|
|
@@ -16053,7 +16131,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16053
16131
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16054
16132
|
const isInvalid = Boolean(invalid || error);
|
|
16055
16133
|
const wrapperWidth = toCssSize(width);
|
|
16056
|
-
const currentDate =
|
|
16134
|
+
const currentDate = React63.useMemo(
|
|
16057
16135
|
() => dateFromParts(day, monthIndex, year),
|
|
16058
16136
|
[day, monthIndex, year]
|
|
16059
16137
|
);
|
|
@@ -16062,7 +16140,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16062
16140
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16063
16141
|
isDisabled: !isMonthOpen || isMobile3
|
|
16064
16142
|
});
|
|
16065
|
-
const emitChange =
|
|
16143
|
+
const emitChange = React63.useCallback(
|
|
16066
16144
|
(nextDay, nextMonth, nextYear) => {
|
|
16067
16145
|
if (!onChange) return;
|
|
16068
16146
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16098,7 +16176,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16098
16176
|
setIsMonthOpen(true);
|
|
16099
16177
|
setMonthHighlightIndex(0);
|
|
16100
16178
|
};
|
|
16101
|
-
const commitMonthInput =
|
|
16179
|
+
const commitMonthInput = React63.useCallback(() => {
|
|
16102
16180
|
const query = monthInputValue.trim().toLowerCase();
|
|
16103
16181
|
if (!query) {
|
|
16104
16182
|
if (monthIndex !== null) {
|
|
@@ -16158,15 +16236,15 @@ var Datepicker = React62.forwardRef(
|
|
|
16158
16236
|
setIsMonthOpen(false);
|
|
16159
16237
|
}
|
|
16160
16238
|
};
|
|
16161
|
-
const focusDayInput =
|
|
16239
|
+
const focusDayInput = React63.useCallback(() => {
|
|
16162
16240
|
if (isBlocked || readOnly) return;
|
|
16163
16241
|
dayInputRef.current?.focus();
|
|
16164
16242
|
}, [isBlocked, readOnly]);
|
|
16165
|
-
const openWheel =
|
|
16243
|
+
const openWheel = React63.useCallback(() => {
|
|
16166
16244
|
if (isBlocked || readOnly) return;
|
|
16167
16245
|
setIsWheelOpen(true);
|
|
16168
16246
|
}, [isBlocked, readOnly]);
|
|
16169
|
-
const closeWheel =
|
|
16247
|
+
const closeWheel = React63.useCallback(() => {
|
|
16170
16248
|
setIsWheelOpen(false);
|
|
16171
16249
|
mobileTriggerRef.current?.focus();
|
|
16172
16250
|
}, []);
|
|
@@ -16178,7 +16256,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16178
16256
|
minDate,
|
|
16179
16257
|
maxDate
|
|
16180
16258
|
});
|
|
16181
|
-
const handleWheelDone =
|
|
16259
|
+
const handleWheelDone = React63.useCallback(() => {
|
|
16182
16260
|
const next = wheel.draftDate;
|
|
16183
16261
|
setDay(String(next.getDate()));
|
|
16184
16262
|
setMonthIndex(next.getMonth());
|
|
@@ -16187,7 +16265,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16187
16265
|
setIsWheelOpen(false);
|
|
16188
16266
|
mobileTriggerRef.current?.focus();
|
|
16189
16267
|
}, [name, onChange, wheel.draftDate]);
|
|
16190
|
-
const defaultFormatValue =
|
|
16268
|
+
const defaultFormatValue = React63.useCallback(
|
|
16191
16269
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16192
16270
|
[resolvedMonthLabels]
|
|
16193
16271
|
);
|
|
@@ -16483,7 +16561,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16483
16561
|
);
|
|
16484
16562
|
|
|
16485
16563
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16486
|
-
import * as
|
|
16564
|
+
import * as React67 from "react";
|
|
16487
16565
|
import { useTranslation as useTranslation39 } from "react-i18next";
|
|
16488
16566
|
|
|
16489
16567
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16562,7 +16640,7 @@ var createDisabledMatchers = ({
|
|
|
16562
16640
|
};
|
|
16563
16641
|
|
|
16564
16642
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16565
|
-
import * as
|
|
16643
|
+
import * as React64 from "react";
|
|
16566
16644
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16567
16645
|
function useRangeValue({
|
|
16568
16646
|
value: externalValue,
|
|
@@ -16571,10 +16649,10 @@ function useRangeValue({
|
|
|
16571
16649
|
name
|
|
16572
16650
|
}) {
|
|
16573
16651
|
const isControlled = externalValue !== void 0;
|
|
16574
|
-
const [draft, setDraft] =
|
|
16652
|
+
const [draft, setDraft] = React64.useState(
|
|
16575
16653
|
isControlled ? externalValue : defaultValue
|
|
16576
16654
|
);
|
|
16577
|
-
const lastExternalKeyRef =
|
|
16655
|
+
const lastExternalKeyRef = React64.useRef(getRangeKey(externalValue));
|
|
16578
16656
|
if (isControlled) {
|
|
16579
16657
|
const externalKey = getRangeKey(externalValue);
|
|
16580
16658
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16582,7 +16660,7 @@ function useRangeValue({
|
|
|
16582
16660
|
setDraft(externalValue);
|
|
16583
16661
|
}
|
|
16584
16662
|
}
|
|
16585
|
-
const commit =
|
|
16663
|
+
const commit = React64.useCallback(
|
|
16586
16664
|
(next) => {
|
|
16587
16665
|
setDraft(next);
|
|
16588
16666
|
if (next === void 0) {
|
|
@@ -16597,7 +16675,7 @@ function useRangeValue({
|
|
|
16597
16675
|
}
|
|
16598
16676
|
|
|
16599
16677
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16600
|
-
import * as
|
|
16678
|
+
import * as React65 from "react";
|
|
16601
16679
|
|
|
16602
16680
|
// src/dashboard/date-range-picker/utils/inputFormat.ts
|
|
16603
16681
|
function parseDateInputFormat(format2) {
|
|
@@ -16687,18 +16765,18 @@ function useRangeTextInputs({
|
|
|
16687
16765
|
onFromComplete,
|
|
16688
16766
|
onToComplete
|
|
16689
16767
|
}) {
|
|
16690
|
-
const tokens =
|
|
16768
|
+
const tokens = React65.useMemo(
|
|
16691
16769
|
() => parseDateInputFormat(displayFormat),
|
|
16692
16770
|
[displayFormat]
|
|
16693
16771
|
);
|
|
16694
|
-
const maxDigits =
|
|
16695
|
-
const [fromText, setFromText] =
|
|
16696
|
-
const [toText, setToText] =
|
|
16697
|
-
|
|
16772
|
+
const maxDigits = React65.useMemo(() => getMaxDigits(tokens), [tokens]);
|
|
16773
|
+
const [fromText, setFromText] = React65.useState(value?.from ? format2(value.from) : "");
|
|
16774
|
+
const [toText, setToText] = React65.useState(value?.to ? format2(value.to) : "");
|
|
16775
|
+
React65.useEffect(() => {
|
|
16698
16776
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16699
16777
|
setToText(value?.to ? format2(value.to) : "");
|
|
16700
16778
|
}, [format2, value?.from, value?.to]);
|
|
16701
|
-
const handleFromChange =
|
|
16779
|
+
const handleFromChange = React65.useCallback(
|
|
16702
16780
|
(raw) => {
|
|
16703
16781
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16704
16782
|
const wasComplete = countDigits(fromText) === maxDigits;
|
|
@@ -16710,7 +16788,7 @@ function useRangeTextInputs({
|
|
|
16710
16788
|
},
|
|
16711
16789
|
[fromText, maxDigits, onFromComplete, parse3, tokens]
|
|
16712
16790
|
);
|
|
16713
|
-
const handleToChange =
|
|
16791
|
+
const handleToChange = React65.useCallback(
|
|
16714
16792
|
(raw) => {
|
|
16715
16793
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16716
16794
|
const wasComplete = countDigits(toText) === maxDigits;
|
|
@@ -16722,7 +16800,7 @@ function useRangeTextInputs({
|
|
|
16722
16800
|
},
|
|
16723
16801
|
[maxDigits, onToComplete, parse3, toText, tokens]
|
|
16724
16802
|
);
|
|
16725
|
-
const handleFromBlur =
|
|
16803
|
+
const handleFromBlur = React65.useCallback(() => {
|
|
16726
16804
|
if (!fromText) {
|
|
16727
16805
|
const next = { from: void 0, to: value?.to };
|
|
16728
16806
|
onCommit(next);
|
|
@@ -16739,7 +16817,7 @@ function useRangeTextInputs({
|
|
|
16739
16817
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16740
16818
|
return void 0;
|
|
16741
16819
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16742
|
-
const handleToBlur =
|
|
16820
|
+
const handleToBlur = React65.useCallback(() => {
|
|
16743
16821
|
if (!toText) {
|
|
16744
16822
|
const next = { from: value?.from, to: void 0 };
|
|
16745
16823
|
onCommit(next);
|
|
@@ -16768,21 +16846,21 @@ function useRangeTextInputs({
|
|
|
16768
16846
|
}
|
|
16769
16847
|
|
|
16770
16848
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16771
|
-
import * as
|
|
16849
|
+
import * as React66 from "react";
|
|
16772
16850
|
function useRangeMonthSync(value) {
|
|
16773
|
-
const isPreloadedRef =
|
|
16774
|
-
const [month, setMonth] =
|
|
16775
|
-
|
|
16851
|
+
const isPreloadedRef = React66.useRef(false);
|
|
16852
|
+
const [month, setMonth] = React66.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16853
|
+
React66.useEffect(() => {
|
|
16776
16854
|
if (value?.from && !isPreloadedRef.current) {
|
|
16777
16855
|
setMonth(value.from);
|
|
16778
16856
|
isPreloadedRef.current = true;
|
|
16779
16857
|
}
|
|
16780
16858
|
}, [value?.from]);
|
|
16781
|
-
const syncMonthToValue =
|
|
16859
|
+
const syncMonthToValue = React66.useCallback((next) => {
|
|
16782
16860
|
isPreloadedRef.current = true;
|
|
16783
16861
|
if (next?.from) setMonth(next.from);
|
|
16784
16862
|
}, []);
|
|
16785
|
-
const resetPreload =
|
|
16863
|
+
const resetPreload = React66.useCallback(() => {
|
|
16786
16864
|
isPreloadedRef.current = false;
|
|
16787
16865
|
}, []);
|
|
16788
16866
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -17042,7 +17120,7 @@ function DateRangePopover({
|
|
|
17042
17120
|
|
|
17043
17121
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17044
17122
|
import { jsx as jsx174, jsxs as jsxs111 } from "react/jsx-runtime";
|
|
17045
|
-
var DateRangePicker =
|
|
17123
|
+
var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
17046
17124
|
label,
|
|
17047
17125
|
value: externalValue,
|
|
17048
17126
|
defaultValue,
|
|
@@ -17077,20 +17155,20 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17077
17155
|
components: customComponents,
|
|
17078
17156
|
...dayPickerProps
|
|
17079
17157
|
}, ref) {
|
|
17080
|
-
const containerRef =
|
|
17081
|
-
const fromInputRef =
|
|
17082
|
-
const toInputRef =
|
|
17083
|
-
const reactId =
|
|
17158
|
+
const containerRef = React67.useRef(null);
|
|
17159
|
+
const fromInputRef = React67.useRef(null);
|
|
17160
|
+
const toInputRef = React67.useRef(null);
|
|
17161
|
+
const reactId = React67.useId();
|
|
17084
17162
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17085
17163
|
const fromId = `${baseId}-from`;
|
|
17086
17164
|
const toId = `${baseId}-to`;
|
|
17087
17165
|
const labelId = `${baseId}-label`;
|
|
17088
17166
|
const errorId = `${baseId}-error`;
|
|
17089
|
-
const normalizedValue =
|
|
17167
|
+
const normalizedValue = React67.useMemo(() => {
|
|
17090
17168
|
if (externalValue === void 0) return void 0;
|
|
17091
17169
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17092
17170
|
}, [externalValue]);
|
|
17093
|
-
const normalizedDefaultValue =
|
|
17171
|
+
const normalizedDefaultValue = React67.useMemo(() => {
|
|
17094
17172
|
if (defaultValue === void 0) return void 0;
|
|
17095
17173
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17096
17174
|
}, [defaultValue]);
|
|
@@ -17100,16 +17178,16 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17100
17178
|
onChange,
|
|
17101
17179
|
name
|
|
17102
17180
|
});
|
|
17103
|
-
const normalizedMinDate =
|
|
17104
|
-
const normalizedMaxDate =
|
|
17105
|
-
const formatter =
|
|
17106
|
-
const parser =
|
|
17107
|
-
const closeCalendarRef =
|
|
17181
|
+
const normalizedMinDate = React67.useMemo(() => toDate(minDate), [minDate]);
|
|
17182
|
+
const normalizedMaxDate = React67.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17183
|
+
const formatter = React67.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17184
|
+
const parser = React67.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17185
|
+
const closeCalendarRef = React67.useRef(() => {
|
|
17108
17186
|
});
|
|
17109
|
-
const handleFromComplete =
|
|
17187
|
+
const handleFromComplete = React67.useCallback(() => {
|
|
17110
17188
|
toInputRef.current?.focus();
|
|
17111
17189
|
}, []);
|
|
17112
|
-
const handleToComplete =
|
|
17190
|
+
const handleToComplete = React67.useCallback(() => {
|
|
17113
17191
|
toInputRef.current?.blur();
|
|
17114
17192
|
closeCalendarRef.current();
|
|
17115
17193
|
}, []);
|
|
@@ -17133,9 +17211,9 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17133
17211
|
onToComplete: handleToComplete
|
|
17134
17212
|
});
|
|
17135
17213
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17136
|
-
const [isOpen, setIsOpen] =
|
|
17137
|
-
const [focusedInput, setFocusedInput] =
|
|
17138
|
-
const [autoFocus, setAutoFocus] =
|
|
17214
|
+
const [isOpen, setIsOpen] = React67.useState(false);
|
|
17215
|
+
const [focusedInput, setFocusedInput] = React67.useState(null);
|
|
17216
|
+
const [autoFocus, setAutoFocus] = React67.useState(false);
|
|
17139
17217
|
const isMobile3 = useIsMobile();
|
|
17140
17218
|
const { t } = useTranslation39();
|
|
17141
17219
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17146,14 +17224,14 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17146
17224
|
const isFocused = focusedInput !== null || isOpen;
|
|
17147
17225
|
const wrapperWidth = toCssSize(width);
|
|
17148
17226
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17149
|
-
const closeCalendar =
|
|
17227
|
+
const closeCalendar = React67.useCallback(() => {
|
|
17150
17228
|
setIsOpen(false);
|
|
17151
17229
|
setFocusedInput(null);
|
|
17152
17230
|
setAutoFocus(false);
|
|
17153
17231
|
if (value?.from) setMonth(value.from);
|
|
17154
17232
|
}, [setMonth, value?.from]);
|
|
17155
17233
|
closeCalendarRef.current = closeCalendar;
|
|
17156
|
-
const openCalendar =
|
|
17234
|
+
const openCalendar = React67.useCallback(() => {
|
|
17157
17235
|
if (isBlocked || readOnly) return;
|
|
17158
17236
|
setIsOpen(true);
|
|
17159
17237
|
}, [isBlocked, readOnly]);
|
|
@@ -17162,7 +17240,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17162
17240
|
onOutsideClick: closeCalendar,
|
|
17163
17241
|
isDisabled: !isOpen || isMobile3
|
|
17164
17242
|
});
|
|
17165
|
-
const handlePickerChange =
|
|
17243
|
+
const handlePickerChange = React67.useCallback(
|
|
17166
17244
|
(range, pickedDate) => {
|
|
17167
17245
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17168
17246
|
previous: value,
|
|
@@ -17183,7 +17261,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17183
17261
|
setToText("");
|
|
17184
17262
|
setMonth(/* @__PURE__ */ new Date());
|
|
17185
17263
|
};
|
|
17186
|
-
const disabledMatchers =
|
|
17264
|
+
const disabledMatchers = React67.useMemo(
|
|
17187
17265
|
() => createDisabledMatchers({
|
|
17188
17266
|
minDate: normalizedMinDate,
|
|
17189
17267
|
maxDate: normalizedMaxDate,
|
|
@@ -17202,7 +17280,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17202
17280
|
openCalendar();
|
|
17203
17281
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17204
17282
|
};
|
|
17205
|
-
|
|
17283
|
+
React67.useImperativeHandle(
|
|
17206
17284
|
ref,
|
|
17207
17285
|
() => ({
|
|
17208
17286
|
setDateRange: (range) => {
|
|
@@ -17383,7 +17461,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17383
17461
|
});
|
|
17384
17462
|
|
|
17385
17463
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17386
|
-
import * as
|
|
17464
|
+
import * as React68 from "react";
|
|
17387
17465
|
import { useTranslation as useTranslation40 } from "react-i18next";
|
|
17388
17466
|
import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
|
|
17389
17467
|
import {
|
|
@@ -17409,11 +17487,11 @@ function useValidateDates({
|
|
|
17409
17487
|
const { t } = useTranslation40();
|
|
17410
17488
|
const handleError = useEvent(onError);
|
|
17411
17489
|
const handleSuccess = useEvent(onSuccess);
|
|
17412
|
-
const errorFormatter =
|
|
17490
|
+
const errorFormatter = React68.useMemo(
|
|
17413
17491
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17414
17492
|
[displayFormat]
|
|
17415
17493
|
);
|
|
17416
|
-
const validateDates =
|
|
17494
|
+
const validateDates = React68.useCallback(
|
|
17417
17495
|
(dates) => {
|
|
17418
17496
|
const startDate = dates?.from;
|
|
17419
17497
|
const endDate = dates?.to;
|
|
@@ -17463,7 +17541,7 @@ function useValidateDates({
|
|
|
17463
17541
|
}
|
|
17464
17542
|
|
|
17465
17543
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17466
|
-
import * as
|
|
17544
|
+
import * as React69 from "react";
|
|
17467
17545
|
import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
|
|
17468
17546
|
import { jsx as jsx175 } from "react/jsx-runtime";
|
|
17469
17547
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
@@ -17507,8 +17585,8 @@ var FORMAT_SETTINGS = {
|
|
|
17507
17585
|
},
|
|
17508
17586
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17509
17587
|
};
|
|
17510
|
-
var TimePicker =
|
|
17511
|
-
const resolvedOptions =
|
|
17588
|
+
var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17589
|
+
const resolvedOptions = React69.useMemo(() => {
|
|
17512
17590
|
if (options) return options;
|
|
17513
17591
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17514
17592
|
return buildOptions(settings);
|
|
@@ -17517,14 +17595,14 @@ var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName =
|
|
|
17517
17595
|
});
|
|
17518
17596
|
|
|
17519
17597
|
// src/dashboard/file-input/FileInput.tsx
|
|
17520
|
-
import * as
|
|
17598
|
+
import * as React70 from "react";
|
|
17521
17599
|
import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
|
|
17522
17600
|
import { useTranslation as useTranslation41 } from "react-i18next";
|
|
17523
17601
|
import { jsx as jsx176, jsxs as jsxs112 } from "react/jsx-runtime";
|
|
17524
17602
|
function defaultDownload(url) {
|
|
17525
17603
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17526
17604
|
}
|
|
17527
|
-
var FileInput =
|
|
17605
|
+
var FileInput = React70.forwardRef(function FileInput2({
|
|
17528
17606
|
label,
|
|
17529
17607
|
value,
|
|
17530
17608
|
onChange,
|
|
@@ -17547,12 +17625,12 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17547
17625
|
width,
|
|
17548
17626
|
downloadLabel
|
|
17549
17627
|
}, ref) {
|
|
17550
|
-
const internalRef =
|
|
17628
|
+
const internalRef = React70.useRef(null);
|
|
17551
17629
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17552
17630
|
const { t } = useTranslation41();
|
|
17553
17631
|
const resolvedLabel = label ?? t("upload_file");
|
|
17554
17632
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17555
|
-
const reactId =
|
|
17633
|
+
const reactId = React70.useId();
|
|
17556
17634
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17557
17635
|
const labelId = `${inputId}-label`;
|
|
17558
17636
|
const errorId = `${inputId}-error`;
|
|
@@ -17689,10 +17767,10 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17689
17767
|
});
|
|
17690
17768
|
|
|
17691
17769
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17692
|
-
import * as
|
|
17770
|
+
import * as React71 from "react";
|
|
17693
17771
|
import { jsx as jsx177, jsxs as jsxs113 } from "react/jsx-runtime";
|
|
17694
17772
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17695
|
-
var SelectIconsBox =
|
|
17773
|
+
var SelectIconsBox = React71.forwardRef(
|
|
17696
17774
|
function SelectIconsBox2({
|
|
17697
17775
|
children,
|
|
17698
17776
|
icons,
|
|
@@ -17708,10 +17786,10 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
17708
17786
|
className,
|
|
17709
17787
|
boxClassName
|
|
17710
17788
|
}, ref) {
|
|
17711
|
-
const containerRef =
|
|
17789
|
+
const containerRef = React71.useRef(null);
|
|
17712
17790
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17713
17791
|
const isControlled = controlledOpen !== void 0;
|
|
17714
|
-
const [internalOpen, setInternalOpen] =
|
|
17792
|
+
const [internalOpen, setInternalOpen] = React71.useState(defaultOpen);
|
|
17715
17793
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17716
17794
|
const setOpen = (next) => {
|
|
17717
17795
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17904,15 +17982,15 @@ var LegacyTextarea = forwardRef72(
|
|
|
17904
17982
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
17905
17983
|
|
|
17906
17984
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
17907
|
-
import * as
|
|
17985
|
+
import * as React73 from "react";
|
|
17908
17986
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
17909
17987
|
|
|
17910
17988
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
17911
|
-
import * as
|
|
17989
|
+
import * as React72 from "react";
|
|
17912
17990
|
import { Loader2 as Loader24 } from "lucide-react";
|
|
17913
17991
|
import { useTranslation as useTranslation42 } from "react-i18next";
|
|
17914
17992
|
import { Fragment as Fragment17, jsx as jsx180, jsxs as jsxs116 } from "react/jsx-runtime";
|
|
17915
|
-
var AirbnbFieldTrigger =
|
|
17993
|
+
var AirbnbFieldTrigger = React72.forwardRef(
|
|
17916
17994
|
({
|
|
17917
17995
|
as = "button",
|
|
17918
17996
|
id,
|
|
@@ -18080,7 +18158,7 @@ AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
|
18080
18158
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18081
18159
|
import { jsx as jsx181, jsxs as jsxs117 } from "react/jsx-runtime";
|
|
18082
18160
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18083
|
-
var AirbnbDatePicker =
|
|
18161
|
+
var AirbnbDatePicker = React73.forwardRef(
|
|
18084
18162
|
({
|
|
18085
18163
|
label,
|
|
18086
18164
|
topLabel,
|
|
@@ -18105,24 +18183,24 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18105
18183
|
formatValue = formatDateValue
|
|
18106
18184
|
}, ref) => {
|
|
18107
18185
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18108
|
-
const [isOpen, setIsOpen] =
|
|
18109
|
-
const triggerId =
|
|
18110
|
-
const pickerId =
|
|
18111
|
-
const labelId =
|
|
18112
|
-
const valueId =
|
|
18113
|
-
const helperTextId =
|
|
18114
|
-
const errorId =
|
|
18115
|
-
const internalRef =
|
|
18186
|
+
const [isOpen, setIsOpen] = React73.useState(false);
|
|
18187
|
+
const triggerId = React73.useId();
|
|
18188
|
+
const pickerId = React73.useId();
|
|
18189
|
+
const labelId = React73.useId();
|
|
18190
|
+
const valueId = React73.useId();
|
|
18191
|
+
const helperTextId = React73.useId();
|
|
18192
|
+
const errorId = React73.useId();
|
|
18193
|
+
const internalRef = React73.useRef(null);
|
|
18116
18194
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18117
|
-
const monthLabels =
|
|
18118
|
-
const resolvedMinDate =
|
|
18119
|
-
const resolvedMaxDate =
|
|
18120
|
-
const normalizedValue =
|
|
18121
|
-
const normalizedDefaultValue =
|
|
18195
|
+
const monthLabels = React73.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18196
|
+
const resolvedMinDate = React73.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18197
|
+
const resolvedMaxDate = React73.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18198
|
+
const normalizedValue = React73.useMemo(() => normalizeDateValue(value), [value]);
|
|
18199
|
+
const normalizedDefaultValue = React73.useMemo(
|
|
18122
18200
|
() => normalizeDateValue(defaultValue),
|
|
18123
18201
|
[defaultValue]
|
|
18124
18202
|
);
|
|
18125
|
-
const resolvedValue =
|
|
18203
|
+
const resolvedValue = React73.useMemo(
|
|
18126
18204
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18127
18205
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18128
18206
|
);
|
|
@@ -18153,7 +18231,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18153
18231
|
minDate: resolvedMinDate,
|
|
18154
18232
|
maxDate: resolvedMaxDate
|
|
18155
18233
|
});
|
|
18156
|
-
const handleOpenChange =
|
|
18234
|
+
const handleOpenChange = React73.useCallback(
|
|
18157
18235
|
(nextOpen) => {
|
|
18158
18236
|
if (isBlocked && nextOpen) return;
|
|
18159
18237
|
setIsOpen(nextOpen);
|
|
@@ -18163,7 +18241,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18163
18241
|
},
|
|
18164
18242
|
[isBlocked]
|
|
18165
18243
|
);
|
|
18166
|
-
const handleDone =
|
|
18244
|
+
const handleDone = React73.useCallback(() => {
|
|
18167
18245
|
if (isBlocked) return;
|
|
18168
18246
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18169
18247
|
handleOpenChange(false);
|
|
@@ -18175,11 +18253,11 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18175
18253
|
resolvedMaxDate,
|
|
18176
18254
|
resolvedMinDate
|
|
18177
18255
|
]);
|
|
18178
|
-
const handleTriggerClick =
|
|
18256
|
+
const handleTriggerClick = React73.useCallback(() => {
|
|
18179
18257
|
if (isBlocked) return;
|
|
18180
18258
|
setIsOpen(true);
|
|
18181
18259
|
}, [isBlocked]);
|
|
18182
|
-
const handleTriggerKeyDown =
|
|
18260
|
+
const handleTriggerKeyDown = React73.useCallback(
|
|
18183
18261
|
(event) => {
|
|
18184
18262
|
if (isBlocked) return;
|
|
18185
18263
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18189,7 +18267,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18189
18267
|
},
|
|
18190
18268
|
[isBlocked]
|
|
18191
18269
|
);
|
|
18192
|
-
|
|
18270
|
+
React73.useEffect(() => {
|
|
18193
18271
|
if (isBlocked) {
|
|
18194
18272
|
setIsOpen(false);
|
|
18195
18273
|
}
|
|
@@ -18266,12 +18344,12 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18266
18344
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18267
18345
|
|
|
18268
18346
|
// src/airbnb-fields/input/Input.tsx
|
|
18269
|
-
import * as
|
|
18347
|
+
import * as React74 from "react";
|
|
18270
18348
|
import { Eye as Eye2 } from "lucide-react";
|
|
18271
18349
|
import { useTranslation as useTranslation43 } from "react-i18next";
|
|
18272
18350
|
import { jsx as jsx182, jsxs as jsxs118 } from "react/jsx-runtime";
|
|
18273
18351
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18274
|
-
var AirbnbInput =
|
|
18352
|
+
var AirbnbInput = React74.forwardRef(
|
|
18275
18353
|
({
|
|
18276
18354
|
label,
|
|
18277
18355
|
topLabel,
|
|
@@ -18300,16 +18378,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18300
18378
|
...props
|
|
18301
18379
|
}, ref) => {
|
|
18302
18380
|
const { t } = useTranslation43();
|
|
18303
|
-
const generatedId =
|
|
18304
|
-
const inputRef =
|
|
18381
|
+
const generatedId = React74.useId();
|
|
18382
|
+
const inputRef = React74.useRef(null);
|
|
18305
18383
|
const inputId = id ?? generatedId;
|
|
18306
18384
|
const fieldId = `${inputId}-field`;
|
|
18307
18385
|
const labelId = `${inputId}-label`;
|
|
18308
18386
|
const errorId = `${inputId}-error`;
|
|
18309
18387
|
const accessibleLabel = placeholder ?? label;
|
|
18310
|
-
const [isFocused, setIsFocused] =
|
|
18311
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18312
|
-
const [currentValue, setCurrentValue] =
|
|
18388
|
+
const [isFocused, setIsFocused] = React74.useState(false);
|
|
18389
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React74.useState(false);
|
|
18390
|
+
const [currentValue, setCurrentValue] = React74.useState(
|
|
18313
18391
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18314
18392
|
);
|
|
18315
18393
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18322,16 +18400,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18322
18400
|
const triggerError = error ?? invalid;
|
|
18323
18401
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18324
18402
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18325
|
-
|
|
18403
|
+
React74.useLayoutEffect(() => {
|
|
18326
18404
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18327
18405
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18328
18406
|
}, [value]);
|
|
18329
|
-
|
|
18407
|
+
React74.useEffect(() => {
|
|
18330
18408
|
if (!isPasswordInput) {
|
|
18331
18409
|
setIsPasswordRevealed(false);
|
|
18332
18410
|
}
|
|
18333
18411
|
}, [isPasswordInput]);
|
|
18334
|
-
const setRefs =
|
|
18412
|
+
const setRefs = React74.useCallback(
|
|
18335
18413
|
(node) => {
|
|
18336
18414
|
inputRef.current = node;
|
|
18337
18415
|
if (node && value == null) {
|
|
@@ -18449,11 +18527,11 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18449
18527
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18450
18528
|
|
|
18451
18529
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18452
|
-
import * as
|
|
18530
|
+
import * as React80 from "react";
|
|
18453
18531
|
import { ChevronDown as ChevronDown6 } from "lucide-react";
|
|
18454
18532
|
|
|
18455
18533
|
// src/airbnb-fields/select/Select.tsx
|
|
18456
|
-
import * as
|
|
18534
|
+
import * as React79 from "react";
|
|
18457
18535
|
|
|
18458
18536
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18459
18537
|
import { jsx as jsx183, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
@@ -18798,10 +18876,10 @@ function AirbnbSelectMobileContent({
|
|
|
18798
18876
|
}
|
|
18799
18877
|
|
|
18800
18878
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18801
|
-
import * as
|
|
18879
|
+
import * as React75 from "react";
|
|
18802
18880
|
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
18803
18881
|
import { jsx as jsx187 } from "react/jsx-runtime";
|
|
18804
|
-
var AirbnbSelectTrigger =
|
|
18882
|
+
var AirbnbSelectTrigger = React75.forwardRef(
|
|
18805
18883
|
({
|
|
18806
18884
|
id,
|
|
18807
18885
|
open,
|
|
@@ -18866,7 +18944,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
|
|
|
18866
18944
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
18867
18945
|
|
|
18868
18946
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
18869
|
-
import * as
|
|
18947
|
+
import * as React76 from "react";
|
|
18870
18948
|
function useDesktopSelect({
|
|
18871
18949
|
isMobile: isMobile3,
|
|
18872
18950
|
isOpen,
|
|
@@ -18875,12 +18953,12 @@ function useDesktopSelect({
|
|
|
18875
18953
|
disabled,
|
|
18876
18954
|
onChange
|
|
18877
18955
|
}) {
|
|
18878
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
18879
|
-
const triggerRef =
|
|
18880
|
-
const listRef =
|
|
18881
|
-
const optionRefs =
|
|
18956
|
+
const [highlightedIndex, setHighlightedIndex] = React76.useState(-1);
|
|
18957
|
+
const triggerRef = React76.useRef(null);
|
|
18958
|
+
const listRef = React76.useRef(null);
|
|
18959
|
+
const optionRefs = React76.useRef([]);
|
|
18882
18960
|
const selectedIndex = getOptionIndex2(options, value);
|
|
18883
|
-
|
|
18961
|
+
React76.useEffect(() => {
|
|
18884
18962
|
if (!isOpen || isMobile3) return;
|
|
18885
18963
|
setHighlightedIndex((currentIndex) => {
|
|
18886
18964
|
if (currentIndex >= 0) {
|
|
@@ -18895,34 +18973,34 @@ function useDesktopSelect({
|
|
|
18895
18973
|
window.cancelAnimationFrame(frameId);
|
|
18896
18974
|
};
|
|
18897
18975
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
18898
|
-
|
|
18976
|
+
React76.useEffect(() => {
|
|
18899
18977
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
18900
18978
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
18901
18979
|
block: "nearest"
|
|
18902
18980
|
});
|
|
18903
18981
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
18904
|
-
|
|
18982
|
+
React76.useEffect(() => {
|
|
18905
18983
|
if (isOpen) return;
|
|
18906
18984
|
setHighlightedIndex(-1);
|
|
18907
18985
|
}, [isOpen]);
|
|
18908
|
-
const focusTrigger =
|
|
18986
|
+
const focusTrigger = React76.useCallback(() => {
|
|
18909
18987
|
triggerRef.current?.focus();
|
|
18910
18988
|
}, []);
|
|
18911
|
-
const handleSelect =
|
|
18989
|
+
const handleSelect = React76.useCallback(
|
|
18912
18990
|
(option) => {
|
|
18913
18991
|
if (option.isDisabled || disabled) return;
|
|
18914
18992
|
onChange?.(option);
|
|
18915
18993
|
},
|
|
18916
18994
|
[disabled, onChange]
|
|
18917
18995
|
);
|
|
18918
|
-
const openMenu =
|
|
18996
|
+
const openMenu = React76.useCallback(
|
|
18919
18997
|
(targetIndex) => {
|
|
18920
18998
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
18921
18999
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
18922
19000
|
},
|
|
18923
19001
|
[options, selectedIndex]
|
|
18924
19002
|
);
|
|
18925
|
-
const handleTriggerKeyDown =
|
|
19003
|
+
const handleTriggerKeyDown = React76.useCallback(
|
|
18926
19004
|
(event, onOpen) => {
|
|
18927
19005
|
if (disabled) return;
|
|
18928
19006
|
if (event.key === "ArrowDown") {
|
|
@@ -18947,7 +19025,7 @@ function useDesktopSelect({
|
|
|
18947
19025
|
},
|
|
18948
19026
|
[disabled, openMenu, options, selectedIndex]
|
|
18949
19027
|
);
|
|
18950
|
-
const handleMenuKeyDown =
|
|
19028
|
+
const handleMenuKeyDown = React76.useCallback(
|
|
18951
19029
|
(event, onClose) => {
|
|
18952
19030
|
if (event.key === "Escape") {
|
|
18953
19031
|
event.preventDefault();
|
|
@@ -18997,7 +19075,7 @@ function useDesktopSelect({
|
|
|
18997
19075
|
},
|
|
18998
19076
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
18999
19077
|
);
|
|
19000
|
-
const setOptionRef =
|
|
19078
|
+
const setOptionRef = React76.useCallback(
|
|
19001
19079
|
(index, node) => {
|
|
19002
19080
|
optionRefs.current[index] = node;
|
|
19003
19081
|
},
|
|
@@ -19017,23 +19095,23 @@ function useDesktopSelect({
|
|
|
19017
19095
|
}
|
|
19018
19096
|
|
|
19019
19097
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19020
|
-
import * as
|
|
19098
|
+
import * as React77 from "react";
|
|
19021
19099
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19022
|
-
const [pendingValue, setPendingValue] =
|
|
19100
|
+
const [pendingValue, setPendingValue] = React77.useState(
|
|
19023
19101
|
value ?? null
|
|
19024
19102
|
);
|
|
19025
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19026
|
-
const mobileListRef =
|
|
19027
|
-
const scrollSettleTimeoutRef =
|
|
19028
|
-
const scrollAnimationFrameRef =
|
|
19029
|
-
const getTargetIndex =
|
|
19103
|
+
const [mobileScrollTop, setMobileScrollTop] = React77.useState(0);
|
|
19104
|
+
const mobileListRef = React77.useRef(null);
|
|
19105
|
+
const scrollSettleTimeoutRef = React77.useRef(null);
|
|
19106
|
+
const scrollAnimationFrameRef = React77.useRef(null);
|
|
19107
|
+
const getTargetIndex = React77.useCallback(
|
|
19030
19108
|
(targetValue) => {
|
|
19031
19109
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19032
19110
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19033
19111
|
},
|
|
19034
19112
|
[options]
|
|
19035
19113
|
);
|
|
19036
|
-
const syncScrollPosition =
|
|
19114
|
+
const syncScrollPosition = React77.useCallback(
|
|
19037
19115
|
(targetValue, behavior = "instant") => {
|
|
19038
19116
|
const targetIndex = getTargetIndex(targetValue);
|
|
19039
19117
|
if (targetIndex < 0) return;
|
|
@@ -19052,27 +19130,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19052
19130
|
},
|
|
19053
19131
|
[getTargetIndex, options]
|
|
19054
19132
|
);
|
|
19055
|
-
const clearScrollSettleTimeout =
|
|
19133
|
+
const clearScrollSettleTimeout = React77.useCallback(() => {
|
|
19056
19134
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19057
19135
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19058
19136
|
scrollSettleTimeoutRef.current = null;
|
|
19059
19137
|
}, []);
|
|
19060
|
-
const clearScrollAnimationFrame =
|
|
19138
|
+
const clearScrollAnimationFrame = React77.useCallback(() => {
|
|
19061
19139
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19062
19140
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19063
19141
|
scrollAnimationFrameRef.current = null;
|
|
19064
19142
|
}, []);
|
|
19065
|
-
|
|
19143
|
+
React77.useEffect(
|
|
19066
19144
|
() => () => {
|
|
19067
19145
|
clearScrollSettleTimeout();
|
|
19068
19146
|
clearScrollAnimationFrame();
|
|
19069
19147
|
},
|
|
19070
19148
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19071
19149
|
);
|
|
19072
|
-
|
|
19150
|
+
React77.useEffect(() => {
|
|
19073
19151
|
setPendingValue(value ?? null);
|
|
19074
19152
|
}, [value]);
|
|
19075
|
-
|
|
19153
|
+
React77.useLayoutEffect(() => {
|
|
19076
19154
|
if (!isMobile3 || !isOpen) return;
|
|
19077
19155
|
const frameId = window.requestAnimationFrame(() => {
|
|
19078
19156
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19081,7 +19159,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19081
19159
|
window.cancelAnimationFrame(frameId);
|
|
19082
19160
|
};
|
|
19083
19161
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19084
|
-
const settleScroll =
|
|
19162
|
+
const settleScroll = React77.useCallback(() => {
|
|
19085
19163
|
if (!mobileListRef.current) return;
|
|
19086
19164
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19087
19165
|
const nextOption = options[nextIndex];
|
|
@@ -19093,13 +19171,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19093
19171
|
}
|
|
19094
19172
|
setPendingValue(nextOption);
|
|
19095
19173
|
}, [options, pendingValue]);
|
|
19096
|
-
const scheduleScrollSettle =
|
|
19174
|
+
const scheduleScrollSettle = React77.useCallback(() => {
|
|
19097
19175
|
clearScrollSettleTimeout();
|
|
19098
19176
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19099
19177
|
settleScroll();
|
|
19100
19178
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19101
19179
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19102
|
-
const handleScroll =
|
|
19180
|
+
const handleScroll = React77.useCallback(() => {
|
|
19103
19181
|
if (!mobileListRef.current) return;
|
|
19104
19182
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19105
19183
|
clearScrollAnimationFrame();
|
|
@@ -19109,7 +19187,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19109
19187
|
});
|
|
19110
19188
|
scheduleScrollSettle();
|
|
19111
19189
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19112
|
-
const focusOptionByIndex =
|
|
19190
|
+
const focusOptionByIndex = React77.useCallback(
|
|
19113
19191
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19114
19192
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19115
19193
|
const option = options[index];
|
|
@@ -19127,7 +19205,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19127
19205
|
},
|
|
19128
19206
|
[options, scheduleScrollSettle]
|
|
19129
19207
|
);
|
|
19130
|
-
const handleOptionClick =
|
|
19208
|
+
const handleOptionClick = React77.useCallback(
|
|
19131
19209
|
(option) => {
|
|
19132
19210
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19133
19211
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19136,7 +19214,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19136
19214
|
},
|
|
19137
19215
|
[disabled, focusOptionByIndex, options]
|
|
19138
19216
|
);
|
|
19139
|
-
const moveByStep =
|
|
19217
|
+
const moveByStep = React77.useCallback(
|
|
19140
19218
|
(step) => {
|
|
19141
19219
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19142
19220
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19148,7 +19226,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19148
19226
|
},
|
|
19149
19227
|
[focusOptionByIndex, options, pendingValue]
|
|
19150
19228
|
);
|
|
19151
|
-
const moveToBoundary =
|
|
19229
|
+
const moveToBoundary = React77.useCallback(
|
|
19152
19230
|
(boundary) => {
|
|
19153
19231
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19154
19232
|
if (targetIndex >= 0) {
|
|
@@ -19157,7 +19235,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19157
19235
|
},
|
|
19158
19236
|
[focusOptionByIndex, options]
|
|
19159
19237
|
);
|
|
19160
|
-
const syncPendingValue =
|
|
19238
|
+
const syncPendingValue = React77.useCallback(
|
|
19161
19239
|
(nextValue) => {
|
|
19162
19240
|
const normalizedValue = nextValue ?? null;
|
|
19163
19241
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19185,9 +19263,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19185
19263
|
}
|
|
19186
19264
|
|
|
19187
19265
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19188
|
-
import * as
|
|
19266
|
+
import * as React78 from "react";
|
|
19189
19267
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19190
|
-
const reactId =
|
|
19268
|
+
const reactId = React78.useId().replace(/:/g, "");
|
|
19191
19269
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19192
19270
|
const triggerId = `${baseId}-trigger`;
|
|
19193
19271
|
const labelId = `${baseId}-label`;
|
|
@@ -19197,7 +19275,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19197
19275
|
const listboxId = `${baseId}-listbox`;
|
|
19198
19276
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19199
19277
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19200
|
-
const getOptionId2 =
|
|
19278
|
+
const getOptionId2 = React78.useCallback(
|
|
19201
19279
|
(index) => `${baseId}-option-${index}`,
|
|
19202
19280
|
[baseId]
|
|
19203
19281
|
);
|
|
@@ -19216,7 +19294,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19216
19294
|
|
|
19217
19295
|
// src/airbnb-fields/select/Select.tsx
|
|
19218
19296
|
import { jsx as jsx188, jsxs as jsxs122 } from "react/jsx-runtime";
|
|
19219
|
-
var AirbnbSelect =
|
|
19297
|
+
var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
19220
19298
|
options = [],
|
|
19221
19299
|
value,
|
|
19222
19300
|
onChange,
|
|
@@ -19243,8 +19321,8 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19243
19321
|
filterOption
|
|
19244
19322
|
}, ref) {
|
|
19245
19323
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19246
|
-
const [isOpen, setIsOpen] =
|
|
19247
|
-
const containerRef =
|
|
19324
|
+
const [isOpen, setIsOpen] = React79.useState(false);
|
|
19325
|
+
const containerRef = React79.useRef(null);
|
|
19248
19326
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19249
19327
|
const hasValue = Boolean(value);
|
|
19250
19328
|
const helperText = placeholder ?? label;
|
|
@@ -19306,12 +19384,12 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19306
19384
|
onOutsideClick: () => setIsOpen(false),
|
|
19307
19385
|
isDisabled: !isOpen || isMobile3
|
|
19308
19386
|
});
|
|
19309
|
-
|
|
19387
|
+
React79.useEffect(() => {
|
|
19310
19388
|
if (isBlocked) {
|
|
19311
19389
|
setIsOpen(false);
|
|
19312
19390
|
}
|
|
19313
19391
|
}, [isBlocked]);
|
|
19314
|
-
|
|
19392
|
+
React79.useEffect(
|
|
19315
19393
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19316
19394
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19317
19395
|
return;
|
|
@@ -19323,7 +19401,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19323
19401
|
},
|
|
19324
19402
|
[onChange, filteredOptions, value]
|
|
19325
19403
|
);
|
|
19326
|
-
const handleMobileOpenChange =
|
|
19404
|
+
const handleMobileOpenChange = React79.useCallback(
|
|
19327
19405
|
(nextOpen) => {
|
|
19328
19406
|
if (isBlocked && nextOpen) return;
|
|
19329
19407
|
setIsOpen(nextOpen);
|
|
@@ -19334,7 +19412,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19334
19412
|
},
|
|
19335
19413
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19336
19414
|
);
|
|
19337
|
-
const handleMobileDone =
|
|
19415
|
+
const handleMobileDone = React79.useCallback(() => {
|
|
19338
19416
|
if (isBlocked) return;
|
|
19339
19417
|
const finalOption = pendingValue;
|
|
19340
19418
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19343,7 +19421,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19343
19421
|
setIsOpen(false);
|
|
19344
19422
|
focusTrigger();
|
|
19345
19423
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19346
|
-
const handleTriggerClick =
|
|
19424
|
+
const handleTriggerClick = React79.useCallback(() => {
|
|
19347
19425
|
if (isBlocked) return;
|
|
19348
19426
|
setIsOpen((prev) => {
|
|
19349
19427
|
const nextOpen = !prev;
|
|
@@ -19515,7 +19593,7 @@ function formatPhoneCodeOptionLabel2(option) {
|
|
|
19515
19593
|
const value = String(option.value);
|
|
19516
19594
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19517
19595
|
}
|
|
19518
|
-
var AirbnbPhoneField =
|
|
19596
|
+
var AirbnbPhoneField = React80.forwardRef(
|
|
19519
19597
|
({
|
|
19520
19598
|
label,
|
|
19521
19599
|
topLabel,
|
|
@@ -19539,9 +19617,9 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19539
19617
|
codePlaceholder = "+00",
|
|
19540
19618
|
defaultCode
|
|
19541
19619
|
}, ref) => {
|
|
19542
|
-
const inputId =
|
|
19620
|
+
const inputId = React80.useId();
|
|
19543
19621
|
const effectiveCode = value?.code || defaultCode || "";
|
|
19544
|
-
const codeOptions =
|
|
19622
|
+
const codeOptions = React80.useMemo(
|
|
19545
19623
|
() => options.map((option) => ({
|
|
19546
19624
|
value: option.value,
|
|
19547
19625
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19549,7 +19627,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19549
19627
|
})),
|
|
19550
19628
|
[options]
|
|
19551
19629
|
);
|
|
19552
|
-
const selectedCodeOption =
|
|
19630
|
+
const selectedCodeOption = React80.useMemo(
|
|
19553
19631
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19554
19632
|
[codeOptions, effectiveCode]
|
|
19555
19633
|
);
|
|
@@ -19685,7 +19763,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19685
19763
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19686
19764
|
|
|
19687
19765
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19688
|
-
import * as
|
|
19766
|
+
import * as React81 from "react";
|
|
19689
19767
|
import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
|
|
19690
19768
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
19691
19769
|
import { useCallback as useCallback57 } from "react";
|
|
@@ -19729,13 +19807,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19729
19807
|
loadingMessage
|
|
19730
19808
|
}, ref) => {
|
|
19731
19809
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19732
|
-
const reactId =
|
|
19733
|
-
const [open, setOpen] =
|
|
19734
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
19735
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19736
|
-
const containerRef =
|
|
19737
|
-
const triggerRef =
|
|
19738
|
-
const inputRef =
|
|
19810
|
+
const reactId = React81.useId();
|
|
19811
|
+
const [open, setOpen] = React81.useState(false);
|
|
19812
|
+
const [internalSearchValue, setInternalSearchValue] = React81.useState("");
|
|
19813
|
+
const [highlightedIndex, setHighlightedIndex] = React81.useState(-1);
|
|
19814
|
+
const containerRef = React81.useRef(null);
|
|
19815
|
+
const triggerRef = React81.useRef(null);
|
|
19816
|
+
const inputRef = React81.useRef(null);
|
|
19739
19817
|
const listboxId = `${reactId}-listbox`;
|
|
19740
19818
|
const labelId = `${reactId}-label`;
|
|
19741
19819
|
const valueId = `${reactId}-value`;
|
|
@@ -19744,13 +19822,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19744
19822
|
const searchInputId = `${reactId}-search`;
|
|
19745
19823
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19746
19824
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19747
|
-
const visibleOptions =
|
|
19825
|
+
const visibleOptions = React81.useMemo(() => {
|
|
19748
19826
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19749
19827
|
return options;
|
|
19750
19828
|
}
|
|
19751
19829
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19752
19830
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19753
|
-
const selectedIndex =
|
|
19831
|
+
const selectedIndex = React81.useMemo(
|
|
19754
19832
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19755
19833
|
[value?.value, visibleOptions]
|
|
19756
19834
|
);
|
|
@@ -19776,7 +19854,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19776
19854
|
},
|
|
19777
19855
|
[handleOnOpenChange]
|
|
19778
19856
|
);
|
|
19779
|
-
|
|
19857
|
+
React81.useEffect(() => {
|
|
19780
19858
|
if (isBlocked) {
|
|
19781
19859
|
setSelectOpen(false);
|
|
19782
19860
|
return;
|
|
@@ -19789,7 +19867,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19789
19867
|
window.cancelAnimationFrame(frameId);
|
|
19790
19868
|
};
|
|
19791
19869
|
}, [isBlocked, open, setSelectOpen]);
|
|
19792
|
-
|
|
19870
|
+
React81.useEffect(() => {
|
|
19793
19871
|
if (!open) {
|
|
19794
19872
|
setHighlightedIndex(-1);
|
|
19795
19873
|
return;
|
|
@@ -19884,7 +19962,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19884
19962
|
onOptionHover: setHighlightedIndex
|
|
19885
19963
|
}
|
|
19886
19964
|
);
|
|
19887
|
-
|
|
19965
|
+
React81.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
19888
19966
|
return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
19889
19967
|
name && /* @__PURE__ */ jsx190("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19890
19968
|
/* @__PURE__ */ jsx190(
|
|
@@ -19962,7 +20040,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19962
20040
|
) : null
|
|
19963
20041
|
] });
|
|
19964
20042
|
};
|
|
19965
|
-
var AirbnbSearchableSelect =
|
|
20043
|
+
var AirbnbSearchableSelect = React81.forwardRef(
|
|
19966
20044
|
AirbnbSearchableSelectInternal
|
|
19967
20045
|
);
|
|
19968
20046
|
function AirbnbSearchableSelectContent({
|
|
@@ -19989,9 +20067,9 @@ function AirbnbSearchableSelectContent({
|
|
|
19989
20067
|
onOptionClick,
|
|
19990
20068
|
onOptionHover
|
|
19991
20069
|
}) {
|
|
19992
|
-
const listRef =
|
|
19993
|
-
const lastLoadMoreOptionsLengthRef =
|
|
19994
|
-
const previousHighlightedIndexRef =
|
|
20070
|
+
const listRef = React81.useRef(null);
|
|
20071
|
+
const lastLoadMoreOptionsLengthRef = React81.useRef(null);
|
|
20072
|
+
const previousHighlightedIndexRef = React81.useRef(highlightedIndex);
|
|
19995
20073
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
19996
20074
|
const virtualizer = useVirtualizer3({
|
|
19997
20075
|
count: rowCount,
|
|
@@ -20002,7 +20080,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20002
20080
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20003
20081
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20004
20082
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20005
|
-
|
|
20083
|
+
React81.useEffect(() => {
|
|
20006
20084
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20007
20085
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20008
20086
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20010,7 +20088,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20010
20088
|
onLoadMore?.();
|
|
20011
20089
|
}
|
|
20012
20090
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20013
|
-
|
|
20091
|
+
React81.useEffect(() => {
|
|
20014
20092
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20015
20093
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20016
20094
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -20128,11 +20206,11 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20128
20206
|
}
|
|
20129
20207
|
|
|
20130
20208
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20131
|
-
import * as
|
|
20209
|
+
import * as React82 from "react";
|
|
20132
20210
|
import { useTranslation as useTranslation44 } from "react-i18next";
|
|
20133
20211
|
import { Search as Search5, X as X11 } from "lucide-react";
|
|
20134
20212
|
import { jsx as jsx191, jsxs as jsxs125 } from "react/jsx-runtime";
|
|
20135
|
-
var AirbnbSearchInput =
|
|
20213
|
+
var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20136
20214
|
const { t } = useTranslation44();
|
|
20137
20215
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20138
20216
|
return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
@@ -20170,11 +20248,11 @@ var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20170
20248
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20171
20249
|
|
|
20172
20250
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20173
|
-
import * as
|
|
20251
|
+
import * as React83 from "react";
|
|
20174
20252
|
import * as SwitchPrimitives2 from "@radix-ui/react-switch";
|
|
20175
20253
|
import { Check as Check7 } from "lucide-react";
|
|
20176
20254
|
import { Fragment as Fragment18, jsx as jsx192, jsxs as jsxs126 } from "react/jsx-runtime";
|
|
20177
|
-
var AirbnbSwitch =
|
|
20255
|
+
var AirbnbSwitch = React83.forwardRef(
|
|
20178
20256
|
({
|
|
20179
20257
|
className,
|
|
20180
20258
|
value,
|
|
@@ -20188,7 +20266,7 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20188
20266
|
wrapperClassName,
|
|
20189
20267
|
...props
|
|
20190
20268
|
}, ref) => {
|
|
20191
|
-
const generatedId =
|
|
20269
|
+
const generatedId = React83.useId();
|
|
20192
20270
|
const fieldId = id || generatedId;
|
|
20193
20271
|
const switchElement = /* @__PURE__ */ jsx192(
|
|
20194
20272
|
SwitchPrimitives2.Root,
|