@chekinapp/ui 0.0.132 → 0.0.134
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 +421 -330
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +421 -330
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -13227,7 +13227,21 @@ function useSelectState(params) {
|
|
|
13227
13227
|
);
|
|
13228
13228
|
return !existsInOptions && !existsInSelected;
|
|
13229
13229
|
}, [isCreatable, trimmedInput, isValidNewOption, options, selectedOptions]);
|
|
13230
|
+
const sssDebugHighlightCount = React48.useRef(0);
|
|
13230
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
|
+
}
|
|
13231
13245
|
if (!isOpen || filteredOptions.length === 0) {
|
|
13232
13246
|
setHighlightedIndex(-1);
|
|
13233
13247
|
return;
|
|
@@ -13253,8 +13267,21 @@ function useSelectState(params) {
|
|
|
13253
13267
|
(option) => isOptionSelected2(option, selectedOptions),
|
|
13254
13268
|
[isOptionSelected2, selectedOptions]
|
|
13255
13269
|
);
|
|
13270
|
+
const sssDebugSelectOptionCount = React48.useRef(0);
|
|
13256
13271
|
const selectOption = React48.useCallback(
|
|
13257
13272
|
(option) => {
|
|
13273
|
+
sssDebugSelectOptionCount.current += 1;
|
|
13274
|
+
console.log(
|
|
13275
|
+
`[SC-debug] selectOption #${sssDebugSelectOptionCount.current}`,
|
|
13276
|
+
{ value: option.value, isMulti, currentSelectedCount: selectedOptions.length }
|
|
13277
|
+
);
|
|
13278
|
+
console.trace("[SC-debug] selectOption caller stack");
|
|
13279
|
+
if (sssDebugSelectOptionCount.current === 5) {
|
|
13280
|
+
console.warn(
|
|
13281
|
+
"[SC-debug] selectOption fired 5x \u2014 pausing. Step out to see the caller."
|
|
13282
|
+
);
|
|
13283
|
+
debugger;
|
|
13284
|
+
}
|
|
13258
13285
|
if (!isOptionEnabled(option, isOptionDisabled)) return;
|
|
13259
13286
|
if (isMulti) {
|
|
13260
13287
|
const exists = isValueSelected(option);
|
|
@@ -14714,16 +14741,80 @@ var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiS
|
|
|
14714
14741
|
});
|
|
14715
14742
|
|
|
14716
14743
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14717
|
-
import * as
|
|
14744
|
+
import * as React59 from "react";
|
|
14718
14745
|
import { useTranslation as useTranslation36 } from "react-i18next";
|
|
14719
14746
|
|
|
14747
|
+
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
14748
|
+
import { jsx as jsx163, jsxs as jsxs102 } from "react/jsx-runtime";
|
|
14749
|
+
function SelectCheckboxOption(props) {
|
|
14750
|
+
const {
|
|
14751
|
+
option,
|
|
14752
|
+
index,
|
|
14753
|
+
isSelected,
|
|
14754
|
+
isHighlighted,
|
|
14755
|
+
isDisabled,
|
|
14756
|
+
id,
|
|
14757
|
+
onClick,
|
|
14758
|
+
onHover,
|
|
14759
|
+
innerRef
|
|
14760
|
+
} = props;
|
|
14761
|
+
return /* @__PURE__ */ jsxs102(
|
|
14762
|
+
"button",
|
|
14763
|
+
{
|
|
14764
|
+
id,
|
|
14765
|
+
ref: innerRef,
|
|
14766
|
+
type: "button",
|
|
14767
|
+
role: "option",
|
|
14768
|
+
"aria-selected": isSelected,
|
|
14769
|
+
"aria-disabled": isDisabled,
|
|
14770
|
+
tabIndex: -1,
|
|
14771
|
+
disabled: isDisabled,
|
|
14772
|
+
onClick: () => onClick(option),
|
|
14773
|
+
onMouseMove: () => onHover(index),
|
|
14774
|
+
className: cn(
|
|
14775
|
+
"flex w-full items-center gap-3 rounded-md border-0 bg-transparent px-3 py-2 text-left text-[15px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100",
|
|
14776
|
+
!isDisabled && "cursor-pointer hover:bg-[var(--chekin-color-surface-pressed)]",
|
|
14777
|
+
isHighlighted && !isDisabled && "bg-[var(--chekin-color-surface-pressed)]",
|
|
14778
|
+
isSelected && "bg-[var(--chekin-color-surface-autocomplete)] font-semibold text-[var(--chekin-color-brand-blue)]",
|
|
14779
|
+
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
14780
|
+
),
|
|
14781
|
+
children: [
|
|
14782
|
+
/* @__PURE__ */ jsx163(
|
|
14783
|
+
BaseCheckbox,
|
|
14784
|
+
{
|
|
14785
|
+
checked: isSelected,
|
|
14786
|
+
disabled: isDisabled,
|
|
14787
|
+
size: "s",
|
|
14788
|
+
tabIndex: -1,
|
|
14789
|
+
className: "pointer-events-none shrink-0"
|
|
14790
|
+
}
|
|
14791
|
+
),
|
|
14792
|
+
/* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
14793
|
+
/* @__PURE__ */ jsx163("span", { className: "block break-words", children: option.label }),
|
|
14794
|
+
option.description && /* @__PURE__ */ jsx163("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
14795
|
+
] })
|
|
14796
|
+
]
|
|
14797
|
+
}
|
|
14798
|
+
);
|
|
14799
|
+
}
|
|
14800
|
+
|
|
14720
14801
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
14802
|
+
import * as React58 from "react";
|
|
14721
14803
|
import { ChevronDown as ChevronDown3 } from "lucide-react";
|
|
14722
14804
|
import { useTranslation as useTranslation35 } from "react-i18next";
|
|
14723
|
-
import { jsx as
|
|
14805
|
+
import { jsx as jsx164, jsxs as jsxs103 } from "react/jsx-runtime";
|
|
14724
14806
|
function createCountTrigger(opts) {
|
|
14725
|
-
const {
|
|
14807
|
+
const { getValueText, getTotalCount } = opts;
|
|
14726
14808
|
function CountTrigger(props) {
|
|
14809
|
+
const ctDebugRenderCount = React58.useRef(0);
|
|
14810
|
+
ctDebugRenderCount.current += 1;
|
|
14811
|
+
React58.useEffect(() => {
|
|
14812
|
+
console.log("[SC-debug] CountTrigger MOUNTED");
|
|
14813
|
+
return () => {
|
|
14814
|
+
console.log("[SC-debug] CountTrigger UNMOUNTED");
|
|
14815
|
+
};
|
|
14816
|
+
}, []);
|
|
14817
|
+
console.log(`[SC-debug] CountTrigger render #${ctDebugRenderCount.current}`);
|
|
14727
14818
|
const { t } = useTranslation35();
|
|
14728
14819
|
const {
|
|
14729
14820
|
triggerId,
|
|
@@ -14743,12 +14834,14 @@ function createCountTrigger(opts) {
|
|
|
14743
14834
|
onTriggerFocus,
|
|
14744
14835
|
leftIcon
|
|
14745
14836
|
} = props;
|
|
14837
|
+
const valueText = getValueText();
|
|
14838
|
+
const totalCount = getTotalCount();
|
|
14746
14839
|
const count = selectedOptions.length;
|
|
14747
14840
|
const total = totalCount ?? count;
|
|
14748
14841
|
const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
|
|
14749
14842
|
const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
|
|
14750
14843
|
const isEmpty = !hasValue;
|
|
14751
|
-
return /* @__PURE__ */
|
|
14844
|
+
return /* @__PURE__ */ jsxs103(
|
|
14752
14845
|
"button",
|
|
14753
14846
|
{
|
|
14754
14847
|
id: triggerId,
|
|
@@ -14771,9 +14864,9 @@ function createCountTrigger(opts) {
|
|
|
14771
14864
|
loading && "!cursor-progress"
|
|
14772
14865
|
),
|
|
14773
14866
|
children: [
|
|
14774
|
-
leftIcon && /* @__PURE__ */
|
|
14775
|
-
/* @__PURE__ */
|
|
14776
|
-
/* @__PURE__ */
|
|
14867
|
+
leftIcon && /* @__PURE__ */ jsx164("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx164("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
14868
|
+
/* @__PURE__ */ jsx164("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
14869
|
+
/* @__PURE__ */ jsx164("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx164(
|
|
14777
14870
|
ChevronDown3,
|
|
14778
14871
|
{
|
|
14779
14872
|
size: 16,
|
|
@@ -14791,9 +14884,9 @@ function createCountTrigger(opts) {
|
|
|
14791
14884
|
}
|
|
14792
14885
|
|
|
14793
14886
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
14794
|
-
import { jsx as
|
|
14887
|
+
import { jsx as jsx165, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
14795
14888
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
14796
|
-
return /* @__PURE__ */
|
|
14889
|
+
return /* @__PURE__ */ jsxs104(
|
|
14797
14890
|
"button",
|
|
14798
14891
|
{
|
|
14799
14892
|
type: "button",
|
|
@@ -14804,7 +14897,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14804
14897
|
disabled && "cursor-default opacity-40"
|
|
14805
14898
|
),
|
|
14806
14899
|
children: [
|
|
14807
|
-
/* @__PURE__ */
|
|
14900
|
+
/* @__PURE__ */ jsx165(
|
|
14808
14901
|
BaseCheckbox,
|
|
14809
14902
|
{
|
|
14810
14903
|
checked,
|
|
@@ -14814,20 +14907,20 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14814
14907
|
className: "pointer-events-none shrink-0"
|
|
14815
14908
|
}
|
|
14816
14909
|
),
|
|
14817
|
-
/* @__PURE__ */
|
|
14910
|
+
/* @__PURE__ */ jsx165("span", { className: "flex-1", children: label })
|
|
14818
14911
|
]
|
|
14819
14912
|
}
|
|
14820
14913
|
);
|
|
14821
14914
|
}
|
|
14822
14915
|
|
|
14823
14916
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14824
|
-
import { Fragment as Fragment16, jsx as
|
|
14917
|
+
import { Fragment as Fragment16, jsx as jsx166 } from "react/jsx-runtime";
|
|
14825
14918
|
function hasPaginationProps(props) {
|
|
14826
14919
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
|
|
14827
14920
|
}
|
|
14828
14921
|
function makeTriggerSlot(render) {
|
|
14829
14922
|
function CustomTrigger(props) {
|
|
14830
|
-
return /* @__PURE__ */
|
|
14923
|
+
return /* @__PURE__ */ jsx166(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
|
|
14831
14924
|
}
|
|
14832
14925
|
return CustomTrigger;
|
|
14833
14926
|
}
|
|
@@ -14853,25 +14946,64 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14853
14946
|
const isPaginated = hasPaginationProps(
|
|
14854
14947
|
paginationAndRest
|
|
14855
14948
|
);
|
|
14856
|
-
const
|
|
14949
|
+
const scDebugRenderCount = React59.useRef(0);
|
|
14950
|
+
const scDebugPrevPropsRef = React59.useRef({});
|
|
14951
|
+
scDebugRenderCount.current += 1;
|
|
14952
|
+
{
|
|
14953
|
+
const current = {
|
|
14954
|
+
value,
|
|
14955
|
+
defaultValue,
|
|
14956
|
+
onChange,
|
|
14957
|
+
trigger,
|
|
14958
|
+
userComponents,
|
|
14959
|
+
valueText,
|
|
14960
|
+
filterOption,
|
|
14961
|
+
rawOptions,
|
|
14962
|
+
onSearchChange
|
|
14963
|
+
};
|
|
14964
|
+
const prev = scDebugPrevPropsRef.current;
|
|
14965
|
+
const changed = [];
|
|
14966
|
+
for (const key of Object.keys(current)) {
|
|
14967
|
+
if (prev[key] !== current[key]) changed.push(key);
|
|
14968
|
+
}
|
|
14969
|
+
console.log(
|
|
14970
|
+
`[SC-debug] SelectCheckboxes render #${scDebugRenderCount.current}`,
|
|
14971
|
+
{ changed, isPaginated, isControlled: value !== void 0 }
|
|
14972
|
+
);
|
|
14973
|
+
scDebugPrevPropsRef.current = current;
|
|
14974
|
+
if (scDebugRenderCount.current === 30) {
|
|
14975
|
+
console.warn(
|
|
14976
|
+
"[SC-debug] hit 30 renders of SelectCheckboxes \u2014 opening debugger"
|
|
14977
|
+
);
|
|
14978
|
+
debugger;
|
|
14979
|
+
}
|
|
14980
|
+
}
|
|
14981
|
+
const [inputValue, setInputValue] = React59.useState("");
|
|
14857
14982
|
const isControlled = value !== void 0;
|
|
14858
|
-
const [internalValue, setInternalValue] =
|
|
14983
|
+
const [internalValue, setInternalValue] = React59.useState(
|
|
14859
14984
|
() => defaultValue ?? []
|
|
14860
14985
|
);
|
|
14861
14986
|
const currentValue = isControlled ? value : internalValue;
|
|
14862
|
-
const selected =
|
|
14863
|
-
const
|
|
14987
|
+
const selected = React59.useMemo(() => currentValue ?? [], [currentValue]);
|
|
14988
|
+
const scDebugHandleChangeCount = React59.useRef(0);
|
|
14989
|
+
const handleChange = React59.useCallback(
|
|
14864
14990
|
(next, meta) => {
|
|
14991
|
+
scDebugHandleChangeCount.current += 1;
|
|
14992
|
+
console.log(
|
|
14993
|
+
`[SC-debug] handleChange #${scDebugHandleChangeCount.current}`,
|
|
14994
|
+
{ action: meta?.action, nextLength: next.length, isControlled }
|
|
14995
|
+
);
|
|
14996
|
+
console.trace("[SC-debug] handleChange caller stack");
|
|
14865
14997
|
if (!isControlled) setInternalValue(next);
|
|
14866
14998
|
onChange?.(next, meta);
|
|
14867
14999
|
},
|
|
14868
15000
|
[isControlled, onChange]
|
|
14869
15001
|
);
|
|
14870
|
-
const flatRawOptions =
|
|
15002
|
+
const flatRawOptions = React59.useMemo(
|
|
14871
15003
|
() => flattenGroupedOptions(rawOptions),
|
|
14872
15004
|
[rawOptions]
|
|
14873
15005
|
);
|
|
14874
|
-
const filteredGrouped =
|
|
15006
|
+
const filteredGrouped = React59.useMemo(() => {
|
|
14875
15007
|
const trimmed = inputValue.trim();
|
|
14876
15008
|
if (!trimmed) return rawOptions;
|
|
14877
15009
|
return rawOptions.map((item) => {
|
|
@@ -14882,7 +15014,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14882
15014
|
return filterOption(item, trimmed) ? item : null;
|
|
14883
15015
|
}).filter((item) => item !== null);
|
|
14884
15016
|
}, [rawOptions, inputValue, filterOption]);
|
|
14885
|
-
const filteredFlat =
|
|
15017
|
+
const filteredFlat = React59.useMemo(
|
|
14886
15018
|
() => flattenGroupedOptions(filteredGrouped),
|
|
14887
15019
|
[filteredGrouped]
|
|
14888
15020
|
);
|
|
@@ -14890,7 +15022,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14890
15022
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
14891
15023
|
}, 0);
|
|
14892
15024
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
14893
|
-
const handleToggleAll =
|
|
15025
|
+
const handleToggleAll = React59.useCallback(() => {
|
|
14894
15026
|
if (allVisibleSelected) {
|
|
14895
15027
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
14896
15028
|
handleChange(
|
|
@@ -14905,14 +15037,27 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14905
15037
|
}
|
|
14906
15038
|
handleChange(merged, { action: "select" });
|
|
14907
15039
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
14908
|
-
const
|
|
15040
|
+
const valueTextRef = React59.useRef(valueText);
|
|
15041
|
+
const totalCountRef = React59.useRef(flatRawOptions.length);
|
|
15042
|
+
valueTextRef.current = valueText;
|
|
15043
|
+
totalCountRef.current = flatRawOptions.length;
|
|
15044
|
+
const Control = React59.useMemo(() => {
|
|
15045
|
+
console.log("[SC-debug] (re)creating Control component", { hasCustomTrigger: !!trigger });
|
|
14909
15046
|
if (trigger) return makeTriggerSlot(trigger);
|
|
14910
15047
|
return createCountTrigger({
|
|
14911
|
-
|
|
14912
|
-
|
|
15048
|
+
getValueText: () => valueTextRef.current,
|
|
15049
|
+
getTotalCount: () => totalCountRef.current
|
|
14913
15050
|
});
|
|
14914
|
-
}, [trigger
|
|
14915
|
-
const
|
|
15051
|
+
}, [trigger]);
|
|
15052
|
+
const components = React59.useMemo(
|
|
15053
|
+
() => ({
|
|
15054
|
+
...userComponents,
|
|
15055
|
+
Control,
|
|
15056
|
+
Option: userComponents?.Option ?? SelectCheckboxOption
|
|
15057
|
+
}),
|
|
15058
|
+
[userComponents, Control]
|
|
15059
|
+
);
|
|
15060
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ jsx166(
|
|
14916
15061
|
SelectAllRow,
|
|
14917
15062
|
{
|
|
14918
15063
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -14920,7 +15065,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14920
15065
|
onToggle: handleToggleAll
|
|
14921
15066
|
}
|
|
14922
15067
|
) : void 0;
|
|
14923
|
-
const handleInputChange =
|
|
15068
|
+
const handleInputChange = React59.useCallback(
|
|
14924
15069
|
(next) => {
|
|
14925
15070
|
setInputValue(next);
|
|
14926
15071
|
onSearchChange?.(next);
|
|
@@ -14932,7 +15077,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14932
15077
|
value: currentValue,
|
|
14933
15078
|
onChange: handleChange,
|
|
14934
15079
|
filterOption: passthroughFilter2,
|
|
14935
|
-
|
|
15080
|
+
components,
|
|
14936
15081
|
closeMenuOnSelect,
|
|
14937
15082
|
searchPosition: searchable ? "dropdown" : "trigger",
|
|
14938
15083
|
searchable,
|
|
@@ -14941,7 +15086,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14941
15086
|
isMulti: true
|
|
14942
15087
|
};
|
|
14943
15088
|
if (isPaginated) {
|
|
14944
|
-
return /* @__PURE__ */
|
|
15089
|
+
return /* @__PURE__ */ jsx166(
|
|
14945
15090
|
InfiniteScrollSelect,
|
|
14946
15091
|
{
|
|
14947
15092
|
ref,
|
|
@@ -14952,7 +15097,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14952
15097
|
}
|
|
14953
15098
|
);
|
|
14954
15099
|
}
|
|
14955
|
-
return /* @__PURE__ */
|
|
15100
|
+
return /* @__PURE__ */ jsx166(
|
|
14956
15101
|
Select,
|
|
14957
15102
|
{
|
|
14958
15103
|
ref,
|
|
@@ -14963,70 +15108,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14963
15108
|
}
|
|
14964
15109
|
);
|
|
14965
15110
|
}
|
|
14966
|
-
var SelectCheckboxes =
|
|
15111
|
+
var SelectCheckboxes = React59.forwardRef(
|
|
14967
15112
|
SelectCheckboxesInternal
|
|
14968
15113
|
);
|
|
14969
15114
|
|
|
14970
|
-
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
14971
|
-
import { jsx as jsx166, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
14972
|
-
function SelectCheckboxOption(props) {
|
|
14973
|
-
const {
|
|
14974
|
-
option,
|
|
14975
|
-
index,
|
|
14976
|
-
isSelected,
|
|
14977
|
-
isHighlighted,
|
|
14978
|
-
isDisabled,
|
|
14979
|
-
id,
|
|
14980
|
-
onClick,
|
|
14981
|
-
onHover,
|
|
14982
|
-
innerRef
|
|
14983
|
-
} = props;
|
|
14984
|
-
return /* @__PURE__ */ jsxs104(
|
|
14985
|
-
"button",
|
|
14986
|
-
{
|
|
14987
|
-
id,
|
|
14988
|
-
ref: innerRef,
|
|
14989
|
-
type: "button",
|
|
14990
|
-
role: "option",
|
|
14991
|
-
"aria-selected": isSelected,
|
|
14992
|
-
"aria-disabled": isDisabled,
|
|
14993
|
-
tabIndex: -1,
|
|
14994
|
-
disabled: isDisabled,
|
|
14995
|
-
onClick: () => onClick(option),
|
|
14996
|
-
onMouseMove: () => onHover(index),
|
|
14997
|
-
className: cn(
|
|
14998
|
-
"flex w-full items-center gap-3 rounded-md border-0 bg-transparent px-3 py-2 text-left text-[15px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100",
|
|
14999
|
-
!isDisabled && "cursor-pointer hover:bg-[var(--chekin-color-surface-pressed)]",
|
|
15000
|
-
isHighlighted && !isDisabled && "bg-[var(--chekin-color-surface-pressed)]",
|
|
15001
|
-
isSelected && "bg-[var(--chekin-color-surface-autocomplete)] font-semibold text-[var(--chekin-color-brand-blue)]",
|
|
15002
|
-
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
15003
|
-
),
|
|
15004
|
-
children: [
|
|
15005
|
-
/* @__PURE__ */ jsx166(
|
|
15006
|
-
BaseCheckbox,
|
|
15007
|
-
{
|
|
15008
|
-
checked: isSelected,
|
|
15009
|
-
disabled: isDisabled,
|
|
15010
|
-
size: "s",
|
|
15011
|
-
tabIndex: -1,
|
|
15012
|
-
className: "pointer-events-none shrink-0"
|
|
15013
|
-
}
|
|
15014
|
-
),
|
|
15015
|
-
/* @__PURE__ */ jsxs104("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
15016
|
-
/* @__PURE__ */ jsx166("span", { className: "block break-words", children: option.label }),
|
|
15017
|
-
option.description && /* @__PURE__ */ jsx166("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
15018
|
-
] })
|
|
15019
|
-
]
|
|
15020
|
-
}
|
|
15021
|
-
);
|
|
15022
|
-
}
|
|
15023
|
-
|
|
15024
15115
|
// src/dashboard/textarea/Textarea.tsx
|
|
15025
|
-
import * as
|
|
15116
|
+
import * as React61 from "react";
|
|
15026
15117
|
import { useTranslation as useTranslation37 } from "react-i18next";
|
|
15027
15118
|
|
|
15028
15119
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15029
|
-
import * as
|
|
15120
|
+
import * as React60 from "react";
|
|
15030
15121
|
var isEmptyValue2 = (value) => {
|
|
15031
15122
|
if (value === void 0 || value === null) return true;
|
|
15032
15123
|
return String(value).length === 0;
|
|
@@ -15045,12 +15136,12 @@ function useTextareaValueState({
|
|
|
15045
15136
|
value,
|
|
15046
15137
|
defaultValue
|
|
15047
15138
|
}) {
|
|
15048
|
-
const textareaRef =
|
|
15139
|
+
const textareaRef = React60.useRef(null);
|
|
15049
15140
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15050
15141
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15051
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15142
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React60.useState(propsAreEmpty);
|
|
15052
15143
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15053
|
-
const setNativeValue =
|
|
15144
|
+
const setNativeValue = React60.useCallback(
|
|
15054
15145
|
(nextValue) => {
|
|
15055
15146
|
if (isControlled) return;
|
|
15056
15147
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15060,14 +15151,14 @@ function useTextareaValueState({
|
|
|
15060
15151
|
},
|
|
15061
15152
|
[isControlled]
|
|
15062
15153
|
);
|
|
15063
|
-
const syncValueState =
|
|
15154
|
+
const syncValueState = React60.useCallback(() => {
|
|
15064
15155
|
if (!textareaRef.current) return;
|
|
15065
15156
|
setNativeValue(textareaRef.current.value);
|
|
15066
15157
|
}, [setNativeValue]);
|
|
15067
|
-
|
|
15158
|
+
React60.useLayoutEffect(() => {
|
|
15068
15159
|
syncValueState();
|
|
15069
15160
|
});
|
|
15070
|
-
|
|
15161
|
+
React60.useEffect(() => {
|
|
15071
15162
|
const textarea = textareaRef.current;
|
|
15072
15163
|
const form = textarea?.form;
|
|
15073
15164
|
if (isControlled || !form) return;
|
|
@@ -15094,7 +15185,7 @@ function useTextareaValueState({
|
|
|
15094
15185
|
import { jsx as jsx167, jsxs as jsxs105 } from "react/jsx-runtime";
|
|
15095
15186
|
var LINE_HEIGHT = 20;
|
|
15096
15187
|
var VERTICAL_PADDING = 32;
|
|
15097
|
-
var Textarea =
|
|
15188
|
+
var Textarea = React61.forwardRef(function Textarea2({
|
|
15098
15189
|
className,
|
|
15099
15190
|
textareaClassName,
|
|
15100
15191
|
label,
|
|
@@ -15122,12 +15213,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15122
15213
|
}, ref) {
|
|
15123
15214
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15124
15215
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15125
|
-
const reactId =
|
|
15216
|
+
const reactId = React61.useId();
|
|
15126
15217
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15127
15218
|
const { t } = useTranslation37();
|
|
15128
15219
|
const isInvalid = Boolean(invalid || error);
|
|
15129
15220
|
const isBlocked = Boolean(disabled);
|
|
15130
|
-
const resize =
|
|
15221
|
+
const resize = React61.useCallback(() => {
|
|
15131
15222
|
const el = textareaRef.current;
|
|
15132
15223
|
if (!el || !autosize) return;
|
|
15133
15224
|
el.style.height = "auto";
|
|
@@ -15137,7 +15228,7 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15137
15228
|
el.style.height = `${nextHeight}px`;
|
|
15138
15229
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15139
15230
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15140
|
-
|
|
15231
|
+
React61.useLayoutEffect(() => {
|
|
15141
15232
|
resize();
|
|
15142
15233
|
}, [resize, value]);
|
|
15143
15234
|
const handleInput = (event) => {
|
|
@@ -15229,12 +15320,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15229
15320
|
});
|
|
15230
15321
|
|
|
15231
15322
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15232
|
-
import * as
|
|
15323
|
+
import * as React63 from "react";
|
|
15233
15324
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
15234
15325
|
import { useTranslation as useTranslation38 } from "react-i18next";
|
|
15235
15326
|
|
|
15236
15327
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15237
|
-
import * as
|
|
15328
|
+
import * as React62 from "react";
|
|
15238
15329
|
|
|
15239
15330
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15240
15331
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15385,21 +15476,21 @@ function useDatePickerWheel({
|
|
|
15385
15476
|
minDate,
|
|
15386
15477
|
maxDate
|
|
15387
15478
|
}) {
|
|
15388
|
-
const years =
|
|
15389
|
-
const [draftDate, setDraftDate] =
|
|
15479
|
+
const years = React62.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15480
|
+
const [draftDate, setDraftDate] = React62.useState(
|
|
15390
15481
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15391
15482
|
);
|
|
15392
15483
|
const draftYear = draftDate.getFullYear();
|
|
15393
15484
|
const draftMonth = draftDate.getMonth();
|
|
15394
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15395
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15396
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15397
|
-
const monthListRef =
|
|
15398
|
-
const dayListRef =
|
|
15399
|
-
const yearListRef =
|
|
15400
|
-
const settleTimeoutsRef =
|
|
15401
|
-
const animationFramesRef =
|
|
15402
|
-
const columnRefs =
|
|
15485
|
+
const [monthScrollTop, setMonthScrollTop] = React62.useState(0);
|
|
15486
|
+
const [dayScrollTop, setDayScrollTop] = React62.useState(0);
|
|
15487
|
+
const [yearScrollTop, setYearScrollTop] = React62.useState(0);
|
|
15488
|
+
const monthListRef = React62.useRef(null);
|
|
15489
|
+
const dayListRef = React62.useRef(null);
|
|
15490
|
+
const yearListRef = React62.useRef(null);
|
|
15491
|
+
const settleTimeoutsRef = React62.useRef({});
|
|
15492
|
+
const animationFramesRef = React62.useRef({});
|
|
15493
|
+
const columnRefs = React62.useMemo(
|
|
15403
15494
|
() => ({
|
|
15404
15495
|
month: monthListRef,
|
|
15405
15496
|
day: dayListRef,
|
|
@@ -15407,7 +15498,7 @@ function useDatePickerWheel({
|
|
|
15407
15498
|
}),
|
|
15408
15499
|
[]
|
|
15409
15500
|
);
|
|
15410
|
-
const setColumnScrollTop =
|
|
15501
|
+
const setColumnScrollTop = React62.useCallback(
|
|
15411
15502
|
(column, nextScrollTop) => {
|
|
15412
15503
|
if (column === "month") {
|
|
15413
15504
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15421,19 +15512,19 @@ function useDatePickerWheel({
|
|
|
15421
15512
|
},
|
|
15422
15513
|
[]
|
|
15423
15514
|
);
|
|
15424
|
-
const clearSettleTimeout =
|
|
15515
|
+
const clearSettleTimeout = React62.useCallback((column) => {
|
|
15425
15516
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15426
15517
|
if (timeoutId === void 0) return;
|
|
15427
15518
|
window.clearTimeout(timeoutId);
|
|
15428
15519
|
delete settleTimeoutsRef.current[column];
|
|
15429
15520
|
}, []);
|
|
15430
|
-
const clearAnimationFrame =
|
|
15521
|
+
const clearAnimationFrame = React62.useCallback((column) => {
|
|
15431
15522
|
const frameId = animationFramesRef.current[column];
|
|
15432
15523
|
if (frameId === void 0) return;
|
|
15433
15524
|
window.cancelAnimationFrame(frameId);
|
|
15434
15525
|
delete animationFramesRef.current[column];
|
|
15435
15526
|
}, []);
|
|
15436
|
-
|
|
15527
|
+
React62.useEffect(
|
|
15437
15528
|
() => () => {
|
|
15438
15529
|
["month", "day", "year"].forEach((column) => {
|
|
15439
15530
|
clearSettleTimeout(column);
|
|
@@ -15442,22 +15533,22 @@ function useDatePickerWheel({
|
|
|
15442
15533
|
},
|
|
15443
15534
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15444
15535
|
);
|
|
15445
|
-
|
|
15536
|
+
React62.useEffect(() => {
|
|
15446
15537
|
if (isOpen) return;
|
|
15447
15538
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15448
15539
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15449
|
-
const months =
|
|
15540
|
+
const months = React62.useMemo(
|
|
15450
15541
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15451
15542
|
[draftYear, maxDate, minDate]
|
|
15452
15543
|
);
|
|
15453
|
-
const days =
|
|
15544
|
+
const days = React62.useMemo(
|
|
15454
15545
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15455
15546
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15456
15547
|
);
|
|
15457
15548
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15458
15549
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15459
15550
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15460
|
-
const syncScrollPositions =
|
|
15551
|
+
const syncScrollPositions = React62.useCallback(
|
|
15461
15552
|
(nextDate, behavior = "auto") => {
|
|
15462
15553
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15463
15554
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15481,7 +15572,7 @@ function useDatePickerWheel({
|
|
|
15481
15572
|
},
|
|
15482
15573
|
[maxDate, minDate, years]
|
|
15483
15574
|
);
|
|
15484
|
-
|
|
15575
|
+
React62.useLayoutEffect(() => {
|
|
15485
15576
|
if (!isOpen) return;
|
|
15486
15577
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15487
15578
|
setDraftDate(nextDate);
|
|
@@ -15492,7 +15583,7 @@ function useDatePickerWheel({
|
|
|
15492
15583
|
window.cancelAnimationFrame(frameId);
|
|
15493
15584
|
};
|
|
15494
15585
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15495
|
-
const updateDraftDate =
|
|
15586
|
+
const updateDraftDate = React62.useCallback(
|
|
15496
15587
|
(column, targetIndex, behavior = "smooth") => {
|
|
15497
15588
|
const currentDate = stripTime(draftDate);
|
|
15498
15589
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15537,7 +15628,7 @@ function useDatePickerWheel({
|
|
|
15537
15628
|
},
|
|
15538
15629
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15539
15630
|
);
|
|
15540
|
-
const settleColumnScroll =
|
|
15631
|
+
const settleColumnScroll = React62.useCallback(
|
|
15541
15632
|
(column) => {
|
|
15542
15633
|
const list = columnRefs[column].current;
|
|
15543
15634
|
if (!list) return;
|
|
@@ -15550,7 +15641,7 @@ function useDatePickerWheel({
|
|
|
15550
15641
|
},
|
|
15551
15642
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15552
15643
|
);
|
|
15553
|
-
const scheduleScrollSettle =
|
|
15644
|
+
const scheduleScrollSettle = React62.useCallback(
|
|
15554
15645
|
(column) => {
|
|
15555
15646
|
clearSettleTimeout(column);
|
|
15556
15647
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15559,7 +15650,7 @@ function useDatePickerWheel({
|
|
|
15559
15650
|
},
|
|
15560
15651
|
[clearSettleTimeout, settleColumnScroll]
|
|
15561
15652
|
);
|
|
15562
|
-
const handleColumnScroll =
|
|
15653
|
+
const handleColumnScroll = React62.useCallback(
|
|
15563
15654
|
(column) => {
|
|
15564
15655
|
const list = columnRefs[column].current;
|
|
15565
15656
|
if (!list) return;
|
|
@@ -15573,13 +15664,13 @@ function useDatePickerWheel({
|
|
|
15573
15664
|
},
|
|
15574
15665
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15575
15666
|
);
|
|
15576
|
-
const handleOptionSelect =
|
|
15667
|
+
const handleOptionSelect = React62.useCallback(
|
|
15577
15668
|
(column, targetIndex) => {
|
|
15578
15669
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15579
15670
|
},
|
|
15580
15671
|
[updateDraftDate]
|
|
15581
15672
|
);
|
|
15582
|
-
const focusAdjacentColumn =
|
|
15673
|
+
const focusAdjacentColumn = React62.useCallback(
|
|
15583
15674
|
(column, direction) => {
|
|
15584
15675
|
const order = ["month", "day", "year"];
|
|
15585
15676
|
const currentIndex = order.indexOf(column);
|
|
@@ -15589,7 +15680,7 @@ function useDatePickerWheel({
|
|
|
15589
15680
|
},
|
|
15590
15681
|
[columnRefs]
|
|
15591
15682
|
);
|
|
15592
|
-
const handleColumnKeyDown =
|
|
15683
|
+
const handleColumnKeyDown = React62.useCallback(
|
|
15593
15684
|
(column, event) => {
|
|
15594
15685
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15595
15686
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15911,7 +16002,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
15911
16002
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
15912
16003
|
return new Date(yearNum, monthIndex, dayNum);
|
|
15913
16004
|
}
|
|
15914
|
-
var Datepicker =
|
|
16005
|
+
var Datepicker = React63.forwardRef(
|
|
15915
16006
|
function Datepicker2({
|
|
15916
16007
|
label,
|
|
15917
16008
|
value,
|
|
@@ -15944,14 +16035,14 @@ var Datepicker = React62.forwardRef(
|
|
|
15944
16035
|
maxDate,
|
|
15945
16036
|
formatValue
|
|
15946
16037
|
}, ref) {
|
|
15947
|
-
const containerRef =
|
|
15948
|
-
const dayInputRef =
|
|
15949
|
-
const monthInputRef =
|
|
15950
|
-
const monthListRef =
|
|
15951
|
-
const yearInputRef =
|
|
15952
|
-
const mobileTriggerRef =
|
|
15953
|
-
const wheelBaseId =
|
|
15954
|
-
const reactId =
|
|
16038
|
+
const containerRef = React63.useRef(null);
|
|
16039
|
+
const dayInputRef = React63.useRef(null);
|
|
16040
|
+
const monthInputRef = React63.useRef(null);
|
|
16041
|
+
const monthListRef = React63.useRef(null);
|
|
16042
|
+
const yearInputRef = React63.useRef(null);
|
|
16043
|
+
const mobileTriggerRef = React63.useRef(null);
|
|
16044
|
+
const wheelBaseId = React63.useId();
|
|
16045
|
+
const reactId = React63.useId();
|
|
15955
16046
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
15956
16047
|
const dayId = `${baseId}-day`;
|
|
15957
16048
|
const monthId = `${baseId}-month`;
|
|
@@ -15960,38 +16051,38 @@ var Datepicker = React62.forwardRef(
|
|
|
15960
16051
|
const errorId = `${baseId}-error`;
|
|
15961
16052
|
const { t, i18n } = useTranslation38();
|
|
15962
16053
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
15963
|
-
const resolvedMonthLabels =
|
|
16054
|
+
const resolvedMonthLabels = React63.useMemo(
|
|
15964
16055
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
15965
16056
|
[resolvedLocale, monthLabels]
|
|
15966
16057
|
);
|
|
15967
16058
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
15968
16059
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
15969
16060
|
const isControlled = value !== void 0;
|
|
15970
|
-
const initialParts =
|
|
16061
|
+
const initialParts = React63.useMemo(
|
|
15971
16062
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
15972
16063
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15973
16064
|
[]
|
|
15974
16065
|
);
|
|
15975
|
-
const [day, setDay] =
|
|
15976
|
-
const [monthIndex, setMonthIndex] =
|
|
16066
|
+
const [day, setDay] = React63.useState(initialParts.day);
|
|
16067
|
+
const [monthIndex, setMonthIndex] = React63.useState(
|
|
15977
16068
|
initialParts.monthIndex
|
|
15978
16069
|
);
|
|
15979
|
-
const [year, setYear] =
|
|
15980
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
15981
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
15982
|
-
const [focusedField, setFocusedField] =
|
|
15983
|
-
const [monthInputValue, setMonthInputValue] =
|
|
15984
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
16070
|
+
const [year, setYear] = React63.useState(initialParts.year);
|
|
16071
|
+
const [isMonthOpen, setIsMonthOpen] = React63.useState(false);
|
|
16072
|
+
const [isWheelOpen, setIsWheelOpen] = React63.useState(false);
|
|
16073
|
+
const [focusedField, setFocusedField] = React63.useState(null);
|
|
16074
|
+
const [monthInputValue, setMonthInputValue] = React63.useState("");
|
|
16075
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React63.useState(-1);
|
|
15985
16076
|
const isMobile3 = useIsMobile();
|
|
15986
|
-
const emitChangeRef =
|
|
16077
|
+
const emitChangeRef = React63.useRef(() => {
|
|
15987
16078
|
});
|
|
15988
|
-
const dayStateRef =
|
|
15989
|
-
const yearStateRef =
|
|
15990
|
-
const monthIndexRef =
|
|
16079
|
+
const dayStateRef = React63.useRef(day);
|
|
16080
|
+
const yearStateRef = React63.useRef(year);
|
|
16081
|
+
const monthIndexRef = React63.useRef(monthIndex);
|
|
15991
16082
|
dayStateRef.current = day;
|
|
15992
16083
|
yearStateRef.current = year;
|
|
15993
16084
|
monthIndexRef.current = monthIndex;
|
|
15994
|
-
|
|
16085
|
+
React63.useImperativeHandle(
|
|
15995
16086
|
ref,
|
|
15996
16087
|
() => ({
|
|
15997
16088
|
getDayValue: () => dayStateRef.current,
|
|
@@ -16009,27 +16100,27 @@ var Datepicker = React62.forwardRef(
|
|
|
16009
16100
|
}),
|
|
16010
16101
|
[]
|
|
16011
16102
|
);
|
|
16012
|
-
|
|
16103
|
+
React63.useEffect(() => {
|
|
16013
16104
|
if (!isControlled) return;
|
|
16014
16105
|
const next = partsFromDate(value ?? null);
|
|
16015
16106
|
setDay(next.day);
|
|
16016
16107
|
setMonthIndex(next.monthIndex);
|
|
16017
16108
|
setYear(next.year);
|
|
16018
16109
|
}, [isControlled, value]);
|
|
16019
|
-
|
|
16110
|
+
React63.useEffect(() => {
|
|
16020
16111
|
if (focusedField === "month") return;
|
|
16021
16112
|
setMonthInputValue(
|
|
16022
16113
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16023
16114
|
);
|
|
16024
16115
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16025
|
-
const filteredMonths =
|
|
16116
|
+
const filteredMonths = React63.useMemo(() => {
|
|
16026
16117
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16027
16118
|
const query = monthInputValue.trim().toLowerCase();
|
|
16028
16119
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16029
16120
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16030
16121
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16031
16122
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16032
|
-
|
|
16123
|
+
React63.useEffect(() => {
|
|
16033
16124
|
if (!isMonthOpen) {
|
|
16034
16125
|
setMonthHighlightIndex(-1);
|
|
16035
16126
|
return;
|
|
@@ -16050,7 +16141,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16050
16141
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16051
16142
|
const isInvalid = Boolean(invalid || error);
|
|
16052
16143
|
const wrapperWidth = toCssSize(width);
|
|
16053
|
-
const currentDate =
|
|
16144
|
+
const currentDate = React63.useMemo(
|
|
16054
16145
|
() => dateFromParts(day, monthIndex, year),
|
|
16055
16146
|
[day, monthIndex, year]
|
|
16056
16147
|
);
|
|
@@ -16059,7 +16150,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16059
16150
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16060
16151
|
isDisabled: !isMonthOpen || isMobile3
|
|
16061
16152
|
});
|
|
16062
|
-
const emitChange =
|
|
16153
|
+
const emitChange = React63.useCallback(
|
|
16063
16154
|
(nextDay, nextMonth, nextYear) => {
|
|
16064
16155
|
if (!onChange) return;
|
|
16065
16156
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16095,7 +16186,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16095
16186
|
setIsMonthOpen(true);
|
|
16096
16187
|
setMonthHighlightIndex(0);
|
|
16097
16188
|
};
|
|
16098
|
-
const commitMonthInput =
|
|
16189
|
+
const commitMonthInput = React63.useCallback(() => {
|
|
16099
16190
|
const query = monthInputValue.trim().toLowerCase();
|
|
16100
16191
|
if (!query) {
|
|
16101
16192
|
if (monthIndex !== null) {
|
|
@@ -16155,15 +16246,15 @@ var Datepicker = React62.forwardRef(
|
|
|
16155
16246
|
setIsMonthOpen(false);
|
|
16156
16247
|
}
|
|
16157
16248
|
};
|
|
16158
|
-
const focusDayInput =
|
|
16249
|
+
const focusDayInput = React63.useCallback(() => {
|
|
16159
16250
|
if (isBlocked || readOnly) return;
|
|
16160
16251
|
dayInputRef.current?.focus();
|
|
16161
16252
|
}, [isBlocked, readOnly]);
|
|
16162
|
-
const openWheel =
|
|
16253
|
+
const openWheel = React63.useCallback(() => {
|
|
16163
16254
|
if (isBlocked || readOnly) return;
|
|
16164
16255
|
setIsWheelOpen(true);
|
|
16165
16256
|
}, [isBlocked, readOnly]);
|
|
16166
|
-
const closeWheel =
|
|
16257
|
+
const closeWheel = React63.useCallback(() => {
|
|
16167
16258
|
setIsWheelOpen(false);
|
|
16168
16259
|
mobileTriggerRef.current?.focus();
|
|
16169
16260
|
}, []);
|
|
@@ -16175,7 +16266,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16175
16266
|
minDate,
|
|
16176
16267
|
maxDate
|
|
16177
16268
|
});
|
|
16178
|
-
const handleWheelDone =
|
|
16269
|
+
const handleWheelDone = React63.useCallback(() => {
|
|
16179
16270
|
const next = wheel.draftDate;
|
|
16180
16271
|
setDay(String(next.getDate()));
|
|
16181
16272
|
setMonthIndex(next.getMonth());
|
|
@@ -16184,7 +16275,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16184
16275
|
setIsWheelOpen(false);
|
|
16185
16276
|
mobileTriggerRef.current?.focus();
|
|
16186
16277
|
}, [name, onChange, wheel.draftDate]);
|
|
16187
|
-
const defaultFormatValue =
|
|
16278
|
+
const defaultFormatValue = React63.useCallback(
|
|
16188
16279
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16189
16280
|
[resolvedMonthLabels]
|
|
16190
16281
|
);
|
|
@@ -16480,7 +16571,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16480
16571
|
);
|
|
16481
16572
|
|
|
16482
16573
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16483
|
-
import * as
|
|
16574
|
+
import * as React67 from "react";
|
|
16484
16575
|
import { useTranslation as useTranslation39 } from "react-i18next";
|
|
16485
16576
|
|
|
16486
16577
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16559,7 +16650,7 @@ var createDisabledMatchers = ({
|
|
|
16559
16650
|
};
|
|
16560
16651
|
|
|
16561
16652
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16562
|
-
import * as
|
|
16653
|
+
import * as React64 from "react";
|
|
16563
16654
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16564
16655
|
function useRangeValue({
|
|
16565
16656
|
value: externalValue,
|
|
@@ -16568,10 +16659,10 @@ function useRangeValue({
|
|
|
16568
16659
|
name
|
|
16569
16660
|
}) {
|
|
16570
16661
|
const isControlled = externalValue !== void 0;
|
|
16571
|
-
const [draft, setDraft] =
|
|
16662
|
+
const [draft, setDraft] = React64.useState(
|
|
16572
16663
|
isControlled ? externalValue : defaultValue
|
|
16573
16664
|
);
|
|
16574
|
-
const lastExternalKeyRef =
|
|
16665
|
+
const lastExternalKeyRef = React64.useRef(getRangeKey(externalValue));
|
|
16575
16666
|
if (isControlled) {
|
|
16576
16667
|
const externalKey = getRangeKey(externalValue);
|
|
16577
16668
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16579,7 +16670,7 @@ function useRangeValue({
|
|
|
16579
16670
|
setDraft(externalValue);
|
|
16580
16671
|
}
|
|
16581
16672
|
}
|
|
16582
|
-
const commit =
|
|
16673
|
+
const commit = React64.useCallback(
|
|
16583
16674
|
(next) => {
|
|
16584
16675
|
setDraft(next);
|
|
16585
16676
|
if (next === void 0) {
|
|
@@ -16594,7 +16685,7 @@ function useRangeValue({
|
|
|
16594
16685
|
}
|
|
16595
16686
|
|
|
16596
16687
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16597
|
-
import * as
|
|
16688
|
+
import * as React65 from "react";
|
|
16598
16689
|
|
|
16599
16690
|
// src/dashboard/date-range-picker/utils/inputFormat.ts
|
|
16600
16691
|
function parseDateInputFormat(format2) {
|
|
@@ -16684,18 +16775,18 @@ function useRangeTextInputs({
|
|
|
16684
16775
|
onFromComplete,
|
|
16685
16776
|
onToComplete
|
|
16686
16777
|
}) {
|
|
16687
|
-
const tokens =
|
|
16778
|
+
const tokens = React65.useMemo(
|
|
16688
16779
|
() => parseDateInputFormat(displayFormat),
|
|
16689
16780
|
[displayFormat]
|
|
16690
16781
|
);
|
|
16691
|
-
const maxDigits =
|
|
16692
|
-
const [fromText, setFromText] =
|
|
16693
|
-
const [toText, setToText] =
|
|
16694
|
-
|
|
16782
|
+
const maxDigits = React65.useMemo(() => getMaxDigits(tokens), [tokens]);
|
|
16783
|
+
const [fromText, setFromText] = React65.useState(value?.from ? format2(value.from) : "");
|
|
16784
|
+
const [toText, setToText] = React65.useState(value?.to ? format2(value.to) : "");
|
|
16785
|
+
React65.useEffect(() => {
|
|
16695
16786
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16696
16787
|
setToText(value?.to ? format2(value.to) : "");
|
|
16697
16788
|
}, [format2, value?.from, value?.to]);
|
|
16698
|
-
const handleFromChange =
|
|
16789
|
+
const handleFromChange = React65.useCallback(
|
|
16699
16790
|
(raw) => {
|
|
16700
16791
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16701
16792
|
const wasComplete = countDigits(fromText) === maxDigits;
|
|
@@ -16707,7 +16798,7 @@ function useRangeTextInputs({
|
|
|
16707
16798
|
},
|
|
16708
16799
|
[fromText, maxDigits, onFromComplete, parse3, tokens]
|
|
16709
16800
|
);
|
|
16710
|
-
const handleToChange =
|
|
16801
|
+
const handleToChange = React65.useCallback(
|
|
16711
16802
|
(raw) => {
|
|
16712
16803
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16713
16804
|
const wasComplete = countDigits(toText) === maxDigits;
|
|
@@ -16719,7 +16810,7 @@ function useRangeTextInputs({
|
|
|
16719
16810
|
},
|
|
16720
16811
|
[maxDigits, onToComplete, parse3, toText, tokens]
|
|
16721
16812
|
);
|
|
16722
|
-
const handleFromBlur =
|
|
16813
|
+
const handleFromBlur = React65.useCallback(() => {
|
|
16723
16814
|
if (!fromText) {
|
|
16724
16815
|
const next = { from: void 0, to: value?.to };
|
|
16725
16816
|
onCommit(next);
|
|
@@ -16736,7 +16827,7 @@ function useRangeTextInputs({
|
|
|
16736
16827
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16737
16828
|
return void 0;
|
|
16738
16829
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16739
|
-
const handleToBlur =
|
|
16830
|
+
const handleToBlur = React65.useCallback(() => {
|
|
16740
16831
|
if (!toText) {
|
|
16741
16832
|
const next = { from: value?.from, to: void 0 };
|
|
16742
16833
|
onCommit(next);
|
|
@@ -16765,21 +16856,21 @@ function useRangeTextInputs({
|
|
|
16765
16856
|
}
|
|
16766
16857
|
|
|
16767
16858
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16768
|
-
import * as
|
|
16859
|
+
import * as React66 from "react";
|
|
16769
16860
|
function useRangeMonthSync(value) {
|
|
16770
|
-
const isPreloadedRef =
|
|
16771
|
-
const [month, setMonth] =
|
|
16772
|
-
|
|
16861
|
+
const isPreloadedRef = React66.useRef(false);
|
|
16862
|
+
const [month, setMonth] = React66.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16863
|
+
React66.useEffect(() => {
|
|
16773
16864
|
if (value?.from && !isPreloadedRef.current) {
|
|
16774
16865
|
setMonth(value.from);
|
|
16775
16866
|
isPreloadedRef.current = true;
|
|
16776
16867
|
}
|
|
16777
16868
|
}, [value?.from]);
|
|
16778
|
-
const syncMonthToValue =
|
|
16869
|
+
const syncMonthToValue = React66.useCallback((next) => {
|
|
16779
16870
|
isPreloadedRef.current = true;
|
|
16780
16871
|
if (next?.from) setMonth(next.from);
|
|
16781
16872
|
}, []);
|
|
16782
|
-
const resetPreload =
|
|
16873
|
+
const resetPreload = React66.useCallback(() => {
|
|
16783
16874
|
isPreloadedRef.current = false;
|
|
16784
16875
|
}, []);
|
|
16785
16876
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -17039,7 +17130,7 @@ function DateRangePopover({
|
|
|
17039
17130
|
|
|
17040
17131
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17041
17132
|
import { jsx as jsx174, jsxs as jsxs111 } from "react/jsx-runtime";
|
|
17042
|
-
var DateRangePicker =
|
|
17133
|
+
var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
17043
17134
|
label,
|
|
17044
17135
|
value: externalValue,
|
|
17045
17136
|
defaultValue,
|
|
@@ -17074,20 +17165,20 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17074
17165
|
components: customComponents,
|
|
17075
17166
|
...dayPickerProps
|
|
17076
17167
|
}, ref) {
|
|
17077
|
-
const containerRef =
|
|
17078
|
-
const fromInputRef =
|
|
17079
|
-
const toInputRef =
|
|
17080
|
-
const reactId =
|
|
17168
|
+
const containerRef = React67.useRef(null);
|
|
17169
|
+
const fromInputRef = React67.useRef(null);
|
|
17170
|
+
const toInputRef = React67.useRef(null);
|
|
17171
|
+
const reactId = React67.useId();
|
|
17081
17172
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17082
17173
|
const fromId = `${baseId}-from`;
|
|
17083
17174
|
const toId = `${baseId}-to`;
|
|
17084
17175
|
const labelId = `${baseId}-label`;
|
|
17085
17176
|
const errorId = `${baseId}-error`;
|
|
17086
|
-
const normalizedValue =
|
|
17177
|
+
const normalizedValue = React67.useMemo(() => {
|
|
17087
17178
|
if (externalValue === void 0) return void 0;
|
|
17088
17179
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17089
17180
|
}, [externalValue]);
|
|
17090
|
-
const normalizedDefaultValue =
|
|
17181
|
+
const normalizedDefaultValue = React67.useMemo(() => {
|
|
17091
17182
|
if (defaultValue === void 0) return void 0;
|
|
17092
17183
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17093
17184
|
}, [defaultValue]);
|
|
@@ -17097,16 +17188,16 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17097
17188
|
onChange,
|
|
17098
17189
|
name
|
|
17099
17190
|
});
|
|
17100
|
-
const normalizedMinDate =
|
|
17101
|
-
const normalizedMaxDate =
|
|
17102
|
-
const formatter =
|
|
17103
|
-
const parser =
|
|
17104
|
-
const closeCalendarRef =
|
|
17191
|
+
const normalizedMinDate = React67.useMemo(() => toDate(minDate), [minDate]);
|
|
17192
|
+
const normalizedMaxDate = React67.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17193
|
+
const formatter = React67.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17194
|
+
const parser = React67.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17195
|
+
const closeCalendarRef = React67.useRef(() => {
|
|
17105
17196
|
});
|
|
17106
|
-
const handleFromComplete =
|
|
17197
|
+
const handleFromComplete = React67.useCallback(() => {
|
|
17107
17198
|
toInputRef.current?.focus();
|
|
17108
17199
|
}, []);
|
|
17109
|
-
const handleToComplete =
|
|
17200
|
+
const handleToComplete = React67.useCallback(() => {
|
|
17110
17201
|
toInputRef.current?.blur();
|
|
17111
17202
|
closeCalendarRef.current();
|
|
17112
17203
|
}, []);
|
|
@@ -17130,9 +17221,9 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17130
17221
|
onToComplete: handleToComplete
|
|
17131
17222
|
});
|
|
17132
17223
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17133
|
-
const [isOpen, setIsOpen] =
|
|
17134
|
-
const [focusedInput, setFocusedInput] =
|
|
17135
|
-
const [autoFocus, setAutoFocus] =
|
|
17224
|
+
const [isOpen, setIsOpen] = React67.useState(false);
|
|
17225
|
+
const [focusedInput, setFocusedInput] = React67.useState(null);
|
|
17226
|
+
const [autoFocus, setAutoFocus] = React67.useState(false);
|
|
17136
17227
|
const isMobile3 = useIsMobile();
|
|
17137
17228
|
const { t } = useTranslation39();
|
|
17138
17229
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17143,14 +17234,14 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17143
17234
|
const isFocused = focusedInput !== null || isOpen;
|
|
17144
17235
|
const wrapperWidth = toCssSize(width);
|
|
17145
17236
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17146
|
-
const closeCalendar =
|
|
17237
|
+
const closeCalendar = React67.useCallback(() => {
|
|
17147
17238
|
setIsOpen(false);
|
|
17148
17239
|
setFocusedInput(null);
|
|
17149
17240
|
setAutoFocus(false);
|
|
17150
17241
|
if (value?.from) setMonth(value.from);
|
|
17151
17242
|
}, [setMonth, value?.from]);
|
|
17152
17243
|
closeCalendarRef.current = closeCalendar;
|
|
17153
|
-
const openCalendar =
|
|
17244
|
+
const openCalendar = React67.useCallback(() => {
|
|
17154
17245
|
if (isBlocked || readOnly) return;
|
|
17155
17246
|
setIsOpen(true);
|
|
17156
17247
|
}, [isBlocked, readOnly]);
|
|
@@ -17159,7 +17250,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17159
17250
|
onOutsideClick: closeCalendar,
|
|
17160
17251
|
isDisabled: !isOpen || isMobile3
|
|
17161
17252
|
});
|
|
17162
|
-
const handlePickerChange =
|
|
17253
|
+
const handlePickerChange = React67.useCallback(
|
|
17163
17254
|
(range, pickedDate) => {
|
|
17164
17255
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17165
17256
|
previous: value,
|
|
@@ -17180,7 +17271,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17180
17271
|
setToText("");
|
|
17181
17272
|
setMonth(/* @__PURE__ */ new Date());
|
|
17182
17273
|
};
|
|
17183
|
-
const disabledMatchers =
|
|
17274
|
+
const disabledMatchers = React67.useMemo(
|
|
17184
17275
|
() => createDisabledMatchers({
|
|
17185
17276
|
minDate: normalizedMinDate,
|
|
17186
17277
|
maxDate: normalizedMaxDate,
|
|
@@ -17199,7 +17290,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17199
17290
|
openCalendar();
|
|
17200
17291
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17201
17292
|
};
|
|
17202
|
-
|
|
17293
|
+
React67.useImperativeHandle(
|
|
17203
17294
|
ref,
|
|
17204
17295
|
() => ({
|
|
17205
17296
|
setDateRange: (range) => {
|
|
@@ -17380,7 +17471,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17380
17471
|
});
|
|
17381
17472
|
|
|
17382
17473
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17383
|
-
import * as
|
|
17474
|
+
import * as React68 from "react";
|
|
17384
17475
|
import { useTranslation as useTranslation40 } from "react-i18next";
|
|
17385
17476
|
import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
|
|
17386
17477
|
import {
|
|
@@ -17406,11 +17497,11 @@ function useValidateDates({
|
|
|
17406
17497
|
const { t } = useTranslation40();
|
|
17407
17498
|
const handleError = useEvent(onError);
|
|
17408
17499
|
const handleSuccess = useEvent(onSuccess);
|
|
17409
|
-
const errorFormatter =
|
|
17500
|
+
const errorFormatter = React68.useMemo(
|
|
17410
17501
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17411
17502
|
[displayFormat]
|
|
17412
17503
|
);
|
|
17413
|
-
const validateDates =
|
|
17504
|
+
const validateDates = React68.useCallback(
|
|
17414
17505
|
(dates) => {
|
|
17415
17506
|
const startDate = dates?.from;
|
|
17416
17507
|
const endDate = dates?.to;
|
|
@@ -17460,7 +17551,7 @@ function useValidateDates({
|
|
|
17460
17551
|
}
|
|
17461
17552
|
|
|
17462
17553
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17463
|
-
import * as
|
|
17554
|
+
import * as React69 from "react";
|
|
17464
17555
|
import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
|
|
17465
17556
|
import { jsx as jsx175 } from "react/jsx-runtime";
|
|
17466
17557
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
@@ -17504,8 +17595,8 @@ var FORMAT_SETTINGS = {
|
|
|
17504
17595
|
},
|
|
17505
17596
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17506
17597
|
};
|
|
17507
|
-
var TimePicker =
|
|
17508
|
-
const resolvedOptions =
|
|
17598
|
+
var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17599
|
+
const resolvedOptions = React69.useMemo(() => {
|
|
17509
17600
|
if (options) return options;
|
|
17510
17601
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17511
17602
|
return buildOptions(settings);
|
|
@@ -17514,14 +17605,14 @@ var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName =
|
|
|
17514
17605
|
});
|
|
17515
17606
|
|
|
17516
17607
|
// src/dashboard/file-input/FileInput.tsx
|
|
17517
|
-
import * as
|
|
17608
|
+
import * as React70 from "react";
|
|
17518
17609
|
import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
|
|
17519
17610
|
import { useTranslation as useTranslation41 } from "react-i18next";
|
|
17520
17611
|
import { jsx as jsx176, jsxs as jsxs112 } from "react/jsx-runtime";
|
|
17521
17612
|
function defaultDownload(url) {
|
|
17522
17613
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17523
17614
|
}
|
|
17524
|
-
var FileInput =
|
|
17615
|
+
var FileInput = React70.forwardRef(function FileInput2({
|
|
17525
17616
|
label,
|
|
17526
17617
|
value,
|
|
17527
17618
|
onChange,
|
|
@@ -17544,12 +17635,12 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17544
17635
|
width,
|
|
17545
17636
|
downloadLabel
|
|
17546
17637
|
}, ref) {
|
|
17547
|
-
const internalRef =
|
|
17638
|
+
const internalRef = React70.useRef(null);
|
|
17548
17639
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17549
17640
|
const { t } = useTranslation41();
|
|
17550
17641
|
const resolvedLabel = label ?? t("upload_file");
|
|
17551
17642
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17552
|
-
const reactId =
|
|
17643
|
+
const reactId = React70.useId();
|
|
17553
17644
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17554
17645
|
const labelId = `${inputId}-label`;
|
|
17555
17646
|
const errorId = `${inputId}-error`;
|
|
@@ -17686,10 +17777,10 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17686
17777
|
});
|
|
17687
17778
|
|
|
17688
17779
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17689
|
-
import * as
|
|
17780
|
+
import * as React71 from "react";
|
|
17690
17781
|
import { jsx as jsx177, jsxs as jsxs113 } from "react/jsx-runtime";
|
|
17691
17782
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17692
|
-
var SelectIconsBox =
|
|
17783
|
+
var SelectIconsBox = React71.forwardRef(
|
|
17693
17784
|
function SelectIconsBox2({
|
|
17694
17785
|
children,
|
|
17695
17786
|
icons,
|
|
@@ -17705,10 +17796,10 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
17705
17796
|
className,
|
|
17706
17797
|
boxClassName
|
|
17707
17798
|
}, ref) {
|
|
17708
|
-
const containerRef =
|
|
17799
|
+
const containerRef = React71.useRef(null);
|
|
17709
17800
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17710
17801
|
const isControlled = controlledOpen !== void 0;
|
|
17711
|
-
const [internalOpen, setInternalOpen] =
|
|
17802
|
+
const [internalOpen, setInternalOpen] = React71.useState(defaultOpen);
|
|
17712
17803
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17713
17804
|
const setOpen = (next) => {
|
|
17714
17805
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17901,15 +17992,15 @@ var LegacyTextarea = forwardRef72(
|
|
|
17901
17992
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
17902
17993
|
|
|
17903
17994
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
17904
|
-
import * as
|
|
17995
|
+
import * as React73 from "react";
|
|
17905
17996
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
17906
17997
|
|
|
17907
17998
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
17908
|
-
import * as
|
|
17999
|
+
import * as React72 from "react";
|
|
17909
18000
|
import { Loader2 as Loader24 } from "lucide-react";
|
|
17910
18001
|
import { useTranslation as useTranslation42 } from "react-i18next";
|
|
17911
18002
|
import { Fragment as Fragment17, jsx as jsx180, jsxs as jsxs116 } from "react/jsx-runtime";
|
|
17912
|
-
var AirbnbFieldTrigger =
|
|
18003
|
+
var AirbnbFieldTrigger = React72.forwardRef(
|
|
17913
18004
|
({
|
|
17914
18005
|
as = "button",
|
|
17915
18006
|
id,
|
|
@@ -18077,7 +18168,7 @@ AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
|
18077
18168
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18078
18169
|
import { jsx as jsx181, jsxs as jsxs117 } from "react/jsx-runtime";
|
|
18079
18170
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18080
|
-
var AirbnbDatePicker =
|
|
18171
|
+
var AirbnbDatePicker = React73.forwardRef(
|
|
18081
18172
|
({
|
|
18082
18173
|
label,
|
|
18083
18174
|
topLabel,
|
|
@@ -18102,24 +18193,24 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18102
18193
|
formatValue = formatDateValue
|
|
18103
18194
|
}, ref) => {
|
|
18104
18195
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18105
|
-
const [isOpen, setIsOpen] =
|
|
18106
|
-
const triggerId =
|
|
18107
|
-
const pickerId =
|
|
18108
|
-
const labelId =
|
|
18109
|
-
const valueId =
|
|
18110
|
-
const helperTextId =
|
|
18111
|
-
const errorId =
|
|
18112
|
-
const internalRef =
|
|
18196
|
+
const [isOpen, setIsOpen] = React73.useState(false);
|
|
18197
|
+
const triggerId = React73.useId();
|
|
18198
|
+
const pickerId = React73.useId();
|
|
18199
|
+
const labelId = React73.useId();
|
|
18200
|
+
const valueId = React73.useId();
|
|
18201
|
+
const helperTextId = React73.useId();
|
|
18202
|
+
const errorId = React73.useId();
|
|
18203
|
+
const internalRef = React73.useRef(null);
|
|
18113
18204
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18114
|
-
const monthLabels =
|
|
18115
|
-
const resolvedMinDate =
|
|
18116
|
-
const resolvedMaxDate =
|
|
18117
|
-
const normalizedValue =
|
|
18118
|
-
const normalizedDefaultValue =
|
|
18205
|
+
const monthLabels = React73.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18206
|
+
const resolvedMinDate = React73.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18207
|
+
const resolvedMaxDate = React73.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18208
|
+
const normalizedValue = React73.useMemo(() => normalizeDateValue(value), [value]);
|
|
18209
|
+
const normalizedDefaultValue = React73.useMemo(
|
|
18119
18210
|
() => normalizeDateValue(defaultValue),
|
|
18120
18211
|
[defaultValue]
|
|
18121
18212
|
);
|
|
18122
|
-
const resolvedValue =
|
|
18213
|
+
const resolvedValue = React73.useMemo(
|
|
18123
18214
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18124
18215
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18125
18216
|
);
|
|
@@ -18150,7 +18241,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18150
18241
|
minDate: resolvedMinDate,
|
|
18151
18242
|
maxDate: resolvedMaxDate
|
|
18152
18243
|
});
|
|
18153
|
-
const handleOpenChange =
|
|
18244
|
+
const handleOpenChange = React73.useCallback(
|
|
18154
18245
|
(nextOpen) => {
|
|
18155
18246
|
if (isBlocked && nextOpen) return;
|
|
18156
18247
|
setIsOpen(nextOpen);
|
|
@@ -18160,7 +18251,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18160
18251
|
},
|
|
18161
18252
|
[isBlocked]
|
|
18162
18253
|
);
|
|
18163
|
-
const handleDone =
|
|
18254
|
+
const handleDone = React73.useCallback(() => {
|
|
18164
18255
|
if (isBlocked) return;
|
|
18165
18256
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18166
18257
|
handleOpenChange(false);
|
|
@@ -18172,11 +18263,11 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18172
18263
|
resolvedMaxDate,
|
|
18173
18264
|
resolvedMinDate
|
|
18174
18265
|
]);
|
|
18175
|
-
const handleTriggerClick =
|
|
18266
|
+
const handleTriggerClick = React73.useCallback(() => {
|
|
18176
18267
|
if (isBlocked) return;
|
|
18177
18268
|
setIsOpen(true);
|
|
18178
18269
|
}, [isBlocked]);
|
|
18179
|
-
const handleTriggerKeyDown =
|
|
18270
|
+
const handleTriggerKeyDown = React73.useCallback(
|
|
18180
18271
|
(event) => {
|
|
18181
18272
|
if (isBlocked) return;
|
|
18182
18273
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18186,7 +18277,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18186
18277
|
},
|
|
18187
18278
|
[isBlocked]
|
|
18188
18279
|
);
|
|
18189
|
-
|
|
18280
|
+
React73.useEffect(() => {
|
|
18190
18281
|
if (isBlocked) {
|
|
18191
18282
|
setIsOpen(false);
|
|
18192
18283
|
}
|
|
@@ -18263,12 +18354,12 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18263
18354
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18264
18355
|
|
|
18265
18356
|
// src/airbnb-fields/input/Input.tsx
|
|
18266
|
-
import * as
|
|
18357
|
+
import * as React74 from "react";
|
|
18267
18358
|
import { Eye as Eye2 } from "lucide-react";
|
|
18268
18359
|
import { useTranslation as useTranslation43 } from "react-i18next";
|
|
18269
18360
|
import { jsx as jsx182, jsxs as jsxs118 } from "react/jsx-runtime";
|
|
18270
18361
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18271
|
-
var AirbnbInput =
|
|
18362
|
+
var AirbnbInput = React74.forwardRef(
|
|
18272
18363
|
({
|
|
18273
18364
|
label,
|
|
18274
18365
|
topLabel,
|
|
@@ -18297,16 +18388,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18297
18388
|
...props
|
|
18298
18389
|
}, ref) => {
|
|
18299
18390
|
const { t } = useTranslation43();
|
|
18300
|
-
const generatedId =
|
|
18301
|
-
const inputRef =
|
|
18391
|
+
const generatedId = React74.useId();
|
|
18392
|
+
const inputRef = React74.useRef(null);
|
|
18302
18393
|
const inputId = id ?? generatedId;
|
|
18303
18394
|
const fieldId = `${inputId}-field`;
|
|
18304
18395
|
const labelId = `${inputId}-label`;
|
|
18305
18396
|
const errorId = `${inputId}-error`;
|
|
18306
18397
|
const accessibleLabel = placeholder ?? label;
|
|
18307
|
-
const [isFocused, setIsFocused] =
|
|
18308
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18309
|
-
const [currentValue, setCurrentValue] =
|
|
18398
|
+
const [isFocused, setIsFocused] = React74.useState(false);
|
|
18399
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React74.useState(false);
|
|
18400
|
+
const [currentValue, setCurrentValue] = React74.useState(
|
|
18310
18401
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18311
18402
|
);
|
|
18312
18403
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18319,16 +18410,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18319
18410
|
const triggerError = error ?? invalid;
|
|
18320
18411
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18321
18412
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18322
|
-
|
|
18413
|
+
React74.useLayoutEffect(() => {
|
|
18323
18414
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18324
18415
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18325
18416
|
}, [value]);
|
|
18326
|
-
|
|
18417
|
+
React74.useEffect(() => {
|
|
18327
18418
|
if (!isPasswordInput) {
|
|
18328
18419
|
setIsPasswordRevealed(false);
|
|
18329
18420
|
}
|
|
18330
18421
|
}, [isPasswordInput]);
|
|
18331
|
-
const setRefs =
|
|
18422
|
+
const setRefs = React74.useCallback(
|
|
18332
18423
|
(node) => {
|
|
18333
18424
|
inputRef.current = node;
|
|
18334
18425
|
if (node && value == null) {
|
|
@@ -18446,11 +18537,11 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18446
18537
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18447
18538
|
|
|
18448
18539
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18449
|
-
import * as
|
|
18540
|
+
import * as React80 from "react";
|
|
18450
18541
|
import { ChevronDown as ChevronDown6 } from "lucide-react";
|
|
18451
18542
|
|
|
18452
18543
|
// src/airbnb-fields/select/Select.tsx
|
|
18453
|
-
import * as
|
|
18544
|
+
import * as React79 from "react";
|
|
18454
18545
|
|
|
18455
18546
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18456
18547
|
import { jsx as jsx183, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
@@ -18795,10 +18886,10 @@ function AirbnbSelectMobileContent({
|
|
|
18795
18886
|
}
|
|
18796
18887
|
|
|
18797
18888
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18798
|
-
import * as
|
|
18889
|
+
import * as React75 from "react";
|
|
18799
18890
|
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
18800
18891
|
import { jsx as jsx187 } from "react/jsx-runtime";
|
|
18801
|
-
var AirbnbSelectTrigger =
|
|
18892
|
+
var AirbnbSelectTrigger = React75.forwardRef(
|
|
18802
18893
|
({
|
|
18803
18894
|
id,
|
|
18804
18895
|
open,
|
|
@@ -18863,7 +18954,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
|
|
|
18863
18954
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
18864
18955
|
|
|
18865
18956
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
18866
|
-
import * as
|
|
18957
|
+
import * as React76 from "react";
|
|
18867
18958
|
function useDesktopSelect({
|
|
18868
18959
|
isMobile: isMobile3,
|
|
18869
18960
|
isOpen,
|
|
@@ -18872,12 +18963,12 @@ function useDesktopSelect({
|
|
|
18872
18963
|
disabled,
|
|
18873
18964
|
onChange
|
|
18874
18965
|
}) {
|
|
18875
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
18876
|
-
const triggerRef =
|
|
18877
|
-
const listRef =
|
|
18878
|
-
const optionRefs =
|
|
18966
|
+
const [highlightedIndex, setHighlightedIndex] = React76.useState(-1);
|
|
18967
|
+
const triggerRef = React76.useRef(null);
|
|
18968
|
+
const listRef = React76.useRef(null);
|
|
18969
|
+
const optionRefs = React76.useRef([]);
|
|
18879
18970
|
const selectedIndex = getOptionIndex2(options, value);
|
|
18880
|
-
|
|
18971
|
+
React76.useEffect(() => {
|
|
18881
18972
|
if (!isOpen || isMobile3) return;
|
|
18882
18973
|
setHighlightedIndex((currentIndex) => {
|
|
18883
18974
|
if (currentIndex >= 0) {
|
|
@@ -18892,34 +18983,34 @@ function useDesktopSelect({
|
|
|
18892
18983
|
window.cancelAnimationFrame(frameId);
|
|
18893
18984
|
};
|
|
18894
18985
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
18895
|
-
|
|
18986
|
+
React76.useEffect(() => {
|
|
18896
18987
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
18897
18988
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
18898
18989
|
block: "nearest"
|
|
18899
18990
|
});
|
|
18900
18991
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
18901
|
-
|
|
18992
|
+
React76.useEffect(() => {
|
|
18902
18993
|
if (isOpen) return;
|
|
18903
18994
|
setHighlightedIndex(-1);
|
|
18904
18995
|
}, [isOpen]);
|
|
18905
|
-
const focusTrigger =
|
|
18996
|
+
const focusTrigger = React76.useCallback(() => {
|
|
18906
18997
|
triggerRef.current?.focus();
|
|
18907
18998
|
}, []);
|
|
18908
|
-
const handleSelect =
|
|
18999
|
+
const handleSelect = React76.useCallback(
|
|
18909
19000
|
(option) => {
|
|
18910
19001
|
if (option.isDisabled || disabled) return;
|
|
18911
19002
|
onChange?.(option);
|
|
18912
19003
|
},
|
|
18913
19004
|
[disabled, onChange]
|
|
18914
19005
|
);
|
|
18915
|
-
const openMenu =
|
|
19006
|
+
const openMenu = React76.useCallback(
|
|
18916
19007
|
(targetIndex) => {
|
|
18917
19008
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
18918
19009
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
18919
19010
|
},
|
|
18920
19011
|
[options, selectedIndex]
|
|
18921
19012
|
);
|
|
18922
|
-
const handleTriggerKeyDown =
|
|
19013
|
+
const handleTriggerKeyDown = React76.useCallback(
|
|
18923
19014
|
(event, onOpen) => {
|
|
18924
19015
|
if (disabled) return;
|
|
18925
19016
|
if (event.key === "ArrowDown") {
|
|
@@ -18944,7 +19035,7 @@ function useDesktopSelect({
|
|
|
18944
19035
|
},
|
|
18945
19036
|
[disabled, openMenu, options, selectedIndex]
|
|
18946
19037
|
);
|
|
18947
|
-
const handleMenuKeyDown =
|
|
19038
|
+
const handleMenuKeyDown = React76.useCallback(
|
|
18948
19039
|
(event, onClose) => {
|
|
18949
19040
|
if (event.key === "Escape") {
|
|
18950
19041
|
event.preventDefault();
|
|
@@ -18994,7 +19085,7 @@ function useDesktopSelect({
|
|
|
18994
19085
|
},
|
|
18995
19086
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
18996
19087
|
);
|
|
18997
|
-
const setOptionRef =
|
|
19088
|
+
const setOptionRef = React76.useCallback(
|
|
18998
19089
|
(index, node) => {
|
|
18999
19090
|
optionRefs.current[index] = node;
|
|
19000
19091
|
},
|
|
@@ -19014,23 +19105,23 @@ function useDesktopSelect({
|
|
|
19014
19105
|
}
|
|
19015
19106
|
|
|
19016
19107
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19017
|
-
import * as
|
|
19108
|
+
import * as React77 from "react";
|
|
19018
19109
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19019
|
-
const [pendingValue, setPendingValue] =
|
|
19110
|
+
const [pendingValue, setPendingValue] = React77.useState(
|
|
19020
19111
|
value ?? null
|
|
19021
19112
|
);
|
|
19022
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19023
|
-
const mobileListRef =
|
|
19024
|
-
const scrollSettleTimeoutRef =
|
|
19025
|
-
const scrollAnimationFrameRef =
|
|
19026
|
-
const getTargetIndex =
|
|
19113
|
+
const [mobileScrollTop, setMobileScrollTop] = React77.useState(0);
|
|
19114
|
+
const mobileListRef = React77.useRef(null);
|
|
19115
|
+
const scrollSettleTimeoutRef = React77.useRef(null);
|
|
19116
|
+
const scrollAnimationFrameRef = React77.useRef(null);
|
|
19117
|
+
const getTargetIndex = React77.useCallback(
|
|
19027
19118
|
(targetValue) => {
|
|
19028
19119
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19029
19120
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19030
19121
|
},
|
|
19031
19122
|
[options]
|
|
19032
19123
|
);
|
|
19033
|
-
const syncScrollPosition =
|
|
19124
|
+
const syncScrollPosition = React77.useCallback(
|
|
19034
19125
|
(targetValue, behavior = "instant") => {
|
|
19035
19126
|
const targetIndex = getTargetIndex(targetValue);
|
|
19036
19127
|
if (targetIndex < 0) return;
|
|
@@ -19049,27 +19140,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19049
19140
|
},
|
|
19050
19141
|
[getTargetIndex, options]
|
|
19051
19142
|
);
|
|
19052
|
-
const clearScrollSettleTimeout =
|
|
19143
|
+
const clearScrollSettleTimeout = React77.useCallback(() => {
|
|
19053
19144
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19054
19145
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19055
19146
|
scrollSettleTimeoutRef.current = null;
|
|
19056
19147
|
}, []);
|
|
19057
|
-
const clearScrollAnimationFrame =
|
|
19148
|
+
const clearScrollAnimationFrame = React77.useCallback(() => {
|
|
19058
19149
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19059
19150
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19060
19151
|
scrollAnimationFrameRef.current = null;
|
|
19061
19152
|
}, []);
|
|
19062
|
-
|
|
19153
|
+
React77.useEffect(
|
|
19063
19154
|
() => () => {
|
|
19064
19155
|
clearScrollSettleTimeout();
|
|
19065
19156
|
clearScrollAnimationFrame();
|
|
19066
19157
|
},
|
|
19067
19158
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19068
19159
|
);
|
|
19069
|
-
|
|
19160
|
+
React77.useEffect(() => {
|
|
19070
19161
|
setPendingValue(value ?? null);
|
|
19071
19162
|
}, [value]);
|
|
19072
|
-
|
|
19163
|
+
React77.useLayoutEffect(() => {
|
|
19073
19164
|
if (!isMobile3 || !isOpen) return;
|
|
19074
19165
|
const frameId = window.requestAnimationFrame(() => {
|
|
19075
19166
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19078,7 +19169,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19078
19169
|
window.cancelAnimationFrame(frameId);
|
|
19079
19170
|
};
|
|
19080
19171
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19081
|
-
const settleScroll =
|
|
19172
|
+
const settleScroll = React77.useCallback(() => {
|
|
19082
19173
|
if (!mobileListRef.current) return;
|
|
19083
19174
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19084
19175
|
const nextOption = options[nextIndex];
|
|
@@ -19090,13 +19181,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19090
19181
|
}
|
|
19091
19182
|
setPendingValue(nextOption);
|
|
19092
19183
|
}, [options, pendingValue]);
|
|
19093
|
-
const scheduleScrollSettle =
|
|
19184
|
+
const scheduleScrollSettle = React77.useCallback(() => {
|
|
19094
19185
|
clearScrollSettleTimeout();
|
|
19095
19186
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19096
19187
|
settleScroll();
|
|
19097
19188
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19098
19189
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19099
|
-
const handleScroll =
|
|
19190
|
+
const handleScroll = React77.useCallback(() => {
|
|
19100
19191
|
if (!mobileListRef.current) return;
|
|
19101
19192
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19102
19193
|
clearScrollAnimationFrame();
|
|
@@ -19106,7 +19197,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19106
19197
|
});
|
|
19107
19198
|
scheduleScrollSettle();
|
|
19108
19199
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19109
|
-
const focusOptionByIndex =
|
|
19200
|
+
const focusOptionByIndex = React77.useCallback(
|
|
19110
19201
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19111
19202
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19112
19203
|
const option = options[index];
|
|
@@ -19124,7 +19215,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19124
19215
|
},
|
|
19125
19216
|
[options, scheduleScrollSettle]
|
|
19126
19217
|
);
|
|
19127
|
-
const handleOptionClick =
|
|
19218
|
+
const handleOptionClick = React77.useCallback(
|
|
19128
19219
|
(option) => {
|
|
19129
19220
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19130
19221
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19133,7 +19224,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19133
19224
|
},
|
|
19134
19225
|
[disabled, focusOptionByIndex, options]
|
|
19135
19226
|
);
|
|
19136
|
-
const moveByStep =
|
|
19227
|
+
const moveByStep = React77.useCallback(
|
|
19137
19228
|
(step) => {
|
|
19138
19229
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19139
19230
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19145,7 +19236,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19145
19236
|
},
|
|
19146
19237
|
[focusOptionByIndex, options, pendingValue]
|
|
19147
19238
|
);
|
|
19148
|
-
const moveToBoundary =
|
|
19239
|
+
const moveToBoundary = React77.useCallback(
|
|
19149
19240
|
(boundary) => {
|
|
19150
19241
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19151
19242
|
if (targetIndex >= 0) {
|
|
@@ -19154,7 +19245,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19154
19245
|
},
|
|
19155
19246
|
[focusOptionByIndex, options]
|
|
19156
19247
|
);
|
|
19157
|
-
const syncPendingValue =
|
|
19248
|
+
const syncPendingValue = React77.useCallback(
|
|
19158
19249
|
(nextValue) => {
|
|
19159
19250
|
const normalizedValue = nextValue ?? null;
|
|
19160
19251
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19182,9 +19273,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19182
19273
|
}
|
|
19183
19274
|
|
|
19184
19275
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19185
|
-
import * as
|
|
19276
|
+
import * as React78 from "react";
|
|
19186
19277
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19187
|
-
const reactId =
|
|
19278
|
+
const reactId = React78.useId().replace(/:/g, "");
|
|
19188
19279
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19189
19280
|
const triggerId = `${baseId}-trigger`;
|
|
19190
19281
|
const labelId = `${baseId}-label`;
|
|
@@ -19194,7 +19285,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19194
19285
|
const listboxId = `${baseId}-listbox`;
|
|
19195
19286
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19196
19287
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19197
|
-
const getOptionId2 =
|
|
19288
|
+
const getOptionId2 = React78.useCallback(
|
|
19198
19289
|
(index) => `${baseId}-option-${index}`,
|
|
19199
19290
|
[baseId]
|
|
19200
19291
|
);
|
|
@@ -19213,7 +19304,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19213
19304
|
|
|
19214
19305
|
// src/airbnb-fields/select/Select.tsx
|
|
19215
19306
|
import { jsx as jsx188, jsxs as jsxs122 } from "react/jsx-runtime";
|
|
19216
|
-
var AirbnbSelect =
|
|
19307
|
+
var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
19217
19308
|
options = [],
|
|
19218
19309
|
value,
|
|
19219
19310
|
onChange,
|
|
@@ -19240,8 +19331,8 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19240
19331
|
filterOption
|
|
19241
19332
|
}, ref) {
|
|
19242
19333
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19243
|
-
const [isOpen, setIsOpen] =
|
|
19244
|
-
const containerRef =
|
|
19334
|
+
const [isOpen, setIsOpen] = React79.useState(false);
|
|
19335
|
+
const containerRef = React79.useRef(null);
|
|
19245
19336
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19246
19337
|
const hasValue = Boolean(value);
|
|
19247
19338
|
const helperText = placeholder ?? label;
|
|
@@ -19303,12 +19394,12 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19303
19394
|
onOutsideClick: () => setIsOpen(false),
|
|
19304
19395
|
isDisabled: !isOpen || isMobile3
|
|
19305
19396
|
});
|
|
19306
|
-
|
|
19397
|
+
React79.useEffect(() => {
|
|
19307
19398
|
if (isBlocked) {
|
|
19308
19399
|
setIsOpen(false);
|
|
19309
19400
|
}
|
|
19310
19401
|
}, [isBlocked]);
|
|
19311
|
-
|
|
19402
|
+
React79.useEffect(
|
|
19312
19403
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19313
19404
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19314
19405
|
return;
|
|
@@ -19320,7 +19411,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19320
19411
|
},
|
|
19321
19412
|
[onChange, filteredOptions, value]
|
|
19322
19413
|
);
|
|
19323
|
-
const handleMobileOpenChange =
|
|
19414
|
+
const handleMobileOpenChange = React79.useCallback(
|
|
19324
19415
|
(nextOpen) => {
|
|
19325
19416
|
if (isBlocked && nextOpen) return;
|
|
19326
19417
|
setIsOpen(nextOpen);
|
|
@@ -19331,7 +19422,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19331
19422
|
},
|
|
19332
19423
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19333
19424
|
);
|
|
19334
|
-
const handleMobileDone =
|
|
19425
|
+
const handleMobileDone = React79.useCallback(() => {
|
|
19335
19426
|
if (isBlocked) return;
|
|
19336
19427
|
const finalOption = pendingValue;
|
|
19337
19428
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19340,7 +19431,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19340
19431
|
setIsOpen(false);
|
|
19341
19432
|
focusTrigger();
|
|
19342
19433
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19343
|
-
const handleTriggerClick =
|
|
19434
|
+
const handleTriggerClick = React79.useCallback(() => {
|
|
19344
19435
|
if (isBlocked) return;
|
|
19345
19436
|
setIsOpen((prev) => {
|
|
19346
19437
|
const nextOpen = !prev;
|
|
@@ -19512,7 +19603,7 @@ function formatPhoneCodeOptionLabel2(option) {
|
|
|
19512
19603
|
const value = String(option.value);
|
|
19513
19604
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19514
19605
|
}
|
|
19515
|
-
var AirbnbPhoneField =
|
|
19606
|
+
var AirbnbPhoneField = React80.forwardRef(
|
|
19516
19607
|
({
|
|
19517
19608
|
label,
|
|
19518
19609
|
topLabel,
|
|
@@ -19536,9 +19627,9 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19536
19627
|
codePlaceholder = "+00",
|
|
19537
19628
|
defaultCode
|
|
19538
19629
|
}, ref) => {
|
|
19539
|
-
const inputId =
|
|
19630
|
+
const inputId = React80.useId();
|
|
19540
19631
|
const effectiveCode = value?.code || defaultCode || "";
|
|
19541
|
-
const codeOptions =
|
|
19632
|
+
const codeOptions = React80.useMemo(
|
|
19542
19633
|
() => options.map((option) => ({
|
|
19543
19634
|
value: option.value,
|
|
19544
19635
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19546,7 +19637,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19546
19637
|
})),
|
|
19547
19638
|
[options]
|
|
19548
19639
|
);
|
|
19549
|
-
const selectedCodeOption =
|
|
19640
|
+
const selectedCodeOption = React80.useMemo(
|
|
19550
19641
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19551
19642
|
[codeOptions, effectiveCode]
|
|
19552
19643
|
);
|
|
@@ -19682,7 +19773,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19682
19773
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19683
19774
|
|
|
19684
19775
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19685
|
-
import * as
|
|
19776
|
+
import * as React81 from "react";
|
|
19686
19777
|
import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
|
|
19687
19778
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
19688
19779
|
import { useCallback as useCallback57 } from "react";
|
|
@@ -19726,13 +19817,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19726
19817
|
loadingMessage
|
|
19727
19818
|
}, ref) => {
|
|
19728
19819
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19729
|
-
const reactId =
|
|
19730
|
-
const [open, setOpen] =
|
|
19731
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
19732
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19733
|
-
const containerRef =
|
|
19734
|
-
const triggerRef =
|
|
19735
|
-
const inputRef =
|
|
19820
|
+
const reactId = React81.useId();
|
|
19821
|
+
const [open, setOpen] = React81.useState(false);
|
|
19822
|
+
const [internalSearchValue, setInternalSearchValue] = React81.useState("");
|
|
19823
|
+
const [highlightedIndex, setHighlightedIndex] = React81.useState(-1);
|
|
19824
|
+
const containerRef = React81.useRef(null);
|
|
19825
|
+
const triggerRef = React81.useRef(null);
|
|
19826
|
+
const inputRef = React81.useRef(null);
|
|
19736
19827
|
const listboxId = `${reactId}-listbox`;
|
|
19737
19828
|
const labelId = `${reactId}-label`;
|
|
19738
19829
|
const valueId = `${reactId}-value`;
|
|
@@ -19741,13 +19832,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19741
19832
|
const searchInputId = `${reactId}-search`;
|
|
19742
19833
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19743
19834
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19744
|
-
const visibleOptions =
|
|
19835
|
+
const visibleOptions = React81.useMemo(() => {
|
|
19745
19836
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19746
19837
|
return options;
|
|
19747
19838
|
}
|
|
19748
19839
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19749
19840
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19750
|
-
const selectedIndex =
|
|
19841
|
+
const selectedIndex = React81.useMemo(
|
|
19751
19842
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19752
19843
|
[value?.value, visibleOptions]
|
|
19753
19844
|
);
|
|
@@ -19773,7 +19864,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19773
19864
|
},
|
|
19774
19865
|
[handleOnOpenChange]
|
|
19775
19866
|
);
|
|
19776
|
-
|
|
19867
|
+
React81.useEffect(() => {
|
|
19777
19868
|
if (isBlocked) {
|
|
19778
19869
|
setSelectOpen(false);
|
|
19779
19870
|
return;
|
|
@@ -19786,7 +19877,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19786
19877
|
window.cancelAnimationFrame(frameId);
|
|
19787
19878
|
};
|
|
19788
19879
|
}, [isBlocked, open, setSelectOpen]);
|
|
19789
|
-
|
|
19880
|
+
React81.useEffect(() => {
|
|
19790
19881
|
if (!open) {
|
|
19791
19882
|
setHighlightedIndex(-1);
|
|
19792
19883
|
return;
|
|
@@ -19881,7 +19972,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19881
19972
|
onOptionHover: setHighlightedIndex
|
|
19882
19973
|
}
|
|
19883
19974
|
);
|
|
19884
|
-
|
|
19975
|
+
React81.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
19885
19976
|
return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
19886
19977
|
name && /* @__PURE__ */ jsx190("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19887
19978
|
/* @__PURE__ */ jsx190(
|
|
@@ -19959,7 +20050,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19959
20050
|
) : null
|
|
19960
20051
|
] });
|
|
19961
20052
|
};
|
|
19962
|
-
var AirbnbSearchableSelect =
|
|
20053
|
+
var AirbnbSearchableSelect = React81.forwardRef(
|
|
19963
20054
|
AirbnbSearchableSelectInternal
|
|
19964
20055
|
);
|
|
19965
20056
|
function AirbnbSearchableSelectContent({
|
|
@@ -19986,9 +20077,9 @@ function AirbnbSearchableSelectContent({
|
|
|
19986
20077
|
onOptionClick,
|
|
19987
20078
|
onOptionHover
|
|
19988
20079
|
}) {
|
|
19989
|
-
const listRef =
|
|
19990
|
-
const lastLoadMoreOptionsLengthRef =
|
|
19991
|
-
const previousHighlightedIndexRef =
|
|
20080
|
+
const listRef = React81.useRef(null);
|
|
20081
|
+
const lastLoadMoreOptionsLengthRef = React81.useRef(null);
|
|
20082
|
+
const previousHighlightedIndexRef = React81.useRef(highlightedIndex);
|
|
19992
20083
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
19993
20084
|
const virtualizer = useVirtualizer3({
|
|
19994
20085
|
count: rowCount,
|
|
@@ -19999,7 +20090,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19999
20090
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20000
20091
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20001
20092
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20002
|
-
|
|
20093
|
+
React81.useEffect(() => {
|
|
20003
20094
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20004
20095
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20005
20096
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20007,7 +20098,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20007
20098
|
onLoadMore?.();
|
|
20008
20099
|
}
|
|
20009
20100
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20010
|
-
|
|
20101
|
+
React81.useEffect(() => {
|
|
20011
20102
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20012
20103
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20013
20104
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -20125,11 +20216,11 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20125
20216
|
}
|
|
20126
20217
|
|
|
20127
20218
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20128
|
-
import * as
|
|
20219
|
+
import * as React82 from "react";
|
|
20129
20220
|
import { useTranslation as useTranslation44 } from "react-i18next";
|
|
20130
20221
|
import { Search as Search5, X as X11 } from "lucide-react";
|
|
20131
20222
|
import { jsx as jsx191, jsxs as jsxs125 } from "react/jsx-runtime";
|
|
20132
|
-
var AirbnbSearchInput =
|
|
20223
|
+
var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20133
20224
|
const { t } = useTranslation44();
|
|
20134
20225
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20135
20226
|
return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
@@ -20167,11 +20258,11 @@ var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20167
20258
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20168
20259
|
|
|
20169
20260
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20170
|
-
import * as
|
|
20261
|
+
import * as React83 from "react";
|
|
20171
20262
|
import * as SwitchPrimitives2 from "@radix-ui/react-switch";
|
|
20172
20263
|
import { Check as Check7 } from "lucide-react";
|
|
20173
20264
|
import { Fragment as Fragment18, jsx as jsx192, jsxs as jsxs126 } from "react/jsx-runtime";
|
|
20174
|
-
var AirbnbSwitch =
|
|
20265
|
+
var AirbnbSwitch = React83.forwardRef(
|
|
20175
20266
|
({
|
|
20176
20267
|
className,
|
|
20177
20268
|
value,
|
|
@@ -20185,7 +20276,7 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20185
20276
|
wrapperClassName,
|
|
20186
20277
|
...props
|
|
20187
20278
|
}, ref) => {
|
|
20188
|
-
const generatedId =
|
|
20279
|
+
const generatedId = React83.useId();
|
|
20189
20280
|
const fieldId = id || generatedId;
|
|
20190
20281
|
const switchElement = /* @__PURE__ */ jsx192(
|
|
20191
20282
|
SwitchPrimitives2.Root,
|