@chekinapp/ui 0.0.132 → 0.0.133
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +411 -330
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +411 -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;
|
|
@@ -13255,6 +13269,11 @@ function useSelectState(params) {
|
|
|
13255
13269
|
);
|
|
13256
13270
|
const selectOption = React48.useCallback(
|
|
13257
13271
|
(option) => {
|
|
13272
|
+
console.log("[SC-debug] selectOption called", {
|
|
13273
|
+
value: option.value,
|
|
13274
|
+
isMulti,
|
|
13275
|
+
currentSelectedCount: selectedOptions.length
|
|
13276
|
+
});
|
|
13258
13277
|
if (!isOptionEnabled(option, isOptionDisabled)) return;
|
|
13259
13278
|
if (isMulti) {
|
|
13260
13279
|
const exists = isValueSelected(option);
|
|
@@ -14714,16 +14733,80 @@ var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiS
|
|
|
14714
14733
|
});
|
|
14715
14734
|
|
|
14716
14735
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14717
|
-
import * as
|
|
14736
|
+
import * as React59 from "react";
|
|
14718
14737
|
import { useTranslation as useTranslation36 } from "react-i18next";
|
|
14719
14738
|
|
|
14739
|
+
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
14740
|
+
import { jsx as jsx163, jsxs as jsxs102 } from "react/jsx-runtime";
|
|
14741
|
+
function SelectCheckboxOption(props) {
|
|
14742
|
+
const {
|
|
14743
|
+
option,
|
|
14744
|
+
index,
|
|
14745
|
+
isSelected,
|
|
14746
|
+
isHighlighted,
|
|
14747
|
+
isDisabled,
|
|
14748
|
+
id,
|
|
14749
|
+
onClick,
|
|
14750
|
+
onHover,
|
|
14751
|
+
innerRef
|
|
14752
|
+
} = props;
|
|
14753
|
+
return /* @__PURE__ */ jsxs102(
|
|
14754
|
+
"button",
|
|
14755
|
+
{
|
|
14756
|
+
id,
|
|
14757
|
+
ref: innerRef,
|
|
14758
|
+
type: "button",
|
|
14759
|
+
role: "option",
|
|
14760
|
+
"aria-selected": isSelected,
|
|
14761
|
+
"aria-disabled": isDisabled,
|
|
14762
|
+
tabIndex: -1,
|
|
14763
|
+
disabled: isDisabled,
|
|
14764
|
+
onClick: () => onClick(option),
|
|
14765
|
+
onMouseMove: () => onHover(index),
|
|
14766
|
+
className: cn(
|
|
14767
|
+
"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",
|
|
14768
|
+
!isDisabled && "cursor-pointer hover:bg-[var(--chekin-color-surface-pressed)]",
|
|
14769
|
+
isHighlighted && !isDisabled && "bg-[var(--chekin-color-surface-pressed)]",
|
|
14770
|
+
isSelected && "bg-[var(--chekin-color-surface-autocomplete)] font-semibold text-[var(--chekin-color-brand-blue)]",
|
|
14771
|
+
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
14772
|
+
),
|
|
14773
|
+
children: [
|
|
14774
|
+
/* @__PURE__ */ jsx163(
|
|
14775
|
+
BaseCheckbox,
|
|
14776
|
+
{
|
|
14777
|
+
checked: isSelected,
|
|
14778
|
+
disabled: isDisabled,
|
|
14779
|
+
size: "s",
|
|
14780
|
+
tabIndex: -1,
|
|
14781
|
+
className: "pointer-events-none shrink-0"
|
|
14782
|
+
}
|
|
14783
|
+
),
|
|
14784
|
+
/* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
14785
|
+
/* @__PURE__ */ jsx163("span", { className: "block break-words", children: option.label }),
|
|
14786
|
+
option.description && /* @__PURE__ */ jsx163("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
14787
|
+
] })
|
|
14788
|
+
]
|
|
14789
|
+
}
|
|
14790
|
+
);
|
|
14791
|
+
}
|
|
14792
|
+
|
|
14720
14793
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
14794
|
+
import * as React58 from "react";
|
|
14721
14795
|
import { ChevronDown as ChevronDown3 } from "lucide-react";
|
|
14722
14796
|
import { useTranslation as useTranslation35 } from "react-i18next";
|
|
14723
|
-
import { jsx as
|
|
14797
|
+
import { jsx as jsx164, jsxs as jsxs103 } from "react/jsx-runtime";
|
|
14724
14798
|
function createCountTrigger(opts) {
|
|
14725
|
-
const {
|
|
14799
|
+
const { getValueText, getTotalCount } = opts;
|
|
14726
14800
|
function CountTrigger(props) {
|
|
14801
|
+
const ctDebugRenderCount = React58.useRef(0);
|
|
14802
|
+
ctDebugRenderCount.current += 1;
|
|
14803
|
+
React58.useEffect(() => {
|
|
14804
|
+
console.log("[SC-debug] CountTrigger MOUNTED");
|
|
14805
|
+
return () => {
|
|
14806
|
+
console.log("[SC-debug] CountTrigger UNMOUNTED");
|
|
14807
|
+
};
|
|
14808
|
+
}, []);
|
|
14809
|
+
console.log(`[SC-debug] CountTrigger render #${ctDebugRenderCount.current}`);
|
|
14727
14810
|
const { t } = useTranslation35();
|
|
14728
14811
|
const {
|
|
14729
14812
|
triggerId,
|
|
@@ -14743,12 +14826,14 @@ function createCountTrigger(opts) {
|
|
|
14743
14826
|
onTriggerFocus,
|
|
14744
14827
|
leftIcon
|
|
14745
14828
|
} = props;
|
|
14829
|
+
const valueText = getValueText();
|
|
14830
|
+
const totalCount = getTotalCount();
|
|
14746
14831
|
const count = selectedOptions.length;
|
|
14747
14832
|
const total = totalCount ?? count;
|
|
14748
14833
|
const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
|
|
14749
14834
|
const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
|
|
14750
14835
|
const isEmpty = !hasValue;
|
|
14751
|
-
return /* @__PURE__ */
|
|
14836
|
+
return /* @__PURE__ */ jsxs103(
|
|
14752
14837
|
"button",
|
|
14753
14838
|
{
|
|
14754
14839
|
id: triggerId,
|
|
@@ -14771,9 +14856,9 @@ function createCountTrigger(opts) {
|
|
|
14771
14856
|
loading && "!cursor-progress"
|
|
14772
14857
|
),
|
|
14773
14858
|
children: [
|
|
14774
|
-
leftIcon && /* @__PURE__ */
|
|
14775
|
-
/* @__PURE__ */
|
|
14776
|
-
/* @__PURE__ */
|
|
14859
|
+
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 }) }),
|
|
14860
|
+
/* @__PURE__ */ jsx164("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
14861
|
+
/* @__PURE__ */ jsx164("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx164(
|
|
14777
14862
|
ChevronDown3,
|
|
14778
14863
|
{
|
|
14779
14864
|
size: 16,
|
|
@@ -14791,9 +14876,9 @@ function createCountTrigger(opts) {
|
|
|
14791
14876
|
}
|
|
14792
14877
|
|
|
14793
14878
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
14794
|
-
import { jsx as
|
|
14879
|
+
import { jsx as jsx165, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
14795
14880
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
14796
|
-
return /* @__PURE__ */
|
|
14881
|
+
return /* @__PURE__ */ jsxs104(
|
|
14797
14882
|
"button",
|
|
14798
14883
|
{
|
|
14799
14884
|
type: "button",
|
|
@@ -14804,7 +14889,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14804
14889
|
disabled && "cursor-default opacity-40"
|
|
14805
14890
|
),
|
|
14806
14891
|
children: [
|
|
14807
|
-
/* @__PURE__ */
|
|
14892
|
+
/* @__PURE__ */ jsx165(
|
|
14808
14893
|
BaseCheckbox,
|
|
14809
14894
|
{
|
|
14810
14895
|
checked,
|
|
@@ -14814,20 +14899,20 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14814
14899
|
className: "pointer-events-none shrink-0"
|
|
14815
14900
|
}
|
|
14816
14901
|
),
|
|
14817
|
-
/* @__PURE__ */
|
|
14902
|
+
/* @__PURE__ */ jsx165("span", { className: "flex-1", children: label })
|
|
14818
14903
|
]
|
|
14819
14904
|
}
|
|
14820
14905
|
);
|
|
14821
14906
|
}
|
|
14822
14907
|
|
|
14823
14908
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14824
|
-
import { Fragment as Fragment16, jsx as
|
|
14909
|
+
import { Fragment as Fragment16, jsx as jsx166 } from "react/jsx-runtime";
|
|
14825
14910
|
function hasPaginationProps(props) {
|
|
14826
14911
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
|
|
14827
14912
|
}
|
|
14828
14913
|
function makeTriggerSlot(render) {
|
|
14829
14914
|
function CustomTrigger(props) {
|
|
14830
|
-
return /* @__PURE__ */
|
|
14915
|
+
return /* @__PURE__ */ jsx166(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
|
|
14831
14916
|
}
|
|
14832
14917
|
return CustomTrigger;
|
|
14833
14918
|
}
|
|
@@ -14853,25 +14938,62 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14853
14938
|
const isPaginated = hasPaginationProps(
|
|
14854
14939
|
paginationAndRest
|
|
14855
14940
|
);
|
|
14856
|
-
const
|
|
14941
|
+
const scDebugRenderCount = React59.useRef(0);
|
|
14942
|
+
const scDebugPrevPropsRef = React59.useRef({});
|
|
14943
|
+
scDebugRenderCount.current += 1;
|
|
14944
|
+
{
|
|
14945
|
+
const current = {
|
|
14946
|
+
value,
|
|
14947
|
+
defaultValue,
|
|
14948
|
+
onChange,
|
|
14949
|
+
trigger,
|
|
14950
|
+
userComponents,
|
|
14951
|
+
valueText,
|
|
14952
|
+
filterOption,
|
|
14953
|
+
rawOptions,
|
|
14954
|
+
onSearchChange
|
|
14955
|
+
};
|
|
14956
|
+
const prev = scDebugPrevPropsRef.current;
|
|
14957
|
+
const changed = [];
|
|
14958
|
+
for (const key of Object.keys(current)) {
|
|
14959
|
+
if (prev[key] !== current[key]) changed.push(key);
|
|
14960
|
+
}
|
|
14961
|
+
console.log(
|
|
14962
|
+
`[SC-debug] SelectCheckboxes render #${scDebugRenderCount.current}`,
|
|
14963
|
+
{ changed, isPaginated, isControlled: value !== void 0 }
|
|
14964
|
+
);
|
|
14965
|
+
scDebugPrevPropsRef.current = current;
|
|
14966
|
+
if (scDebugRenderCount.current === 30) {
|
|
14967
|
+
console.warn(
|
|
14968
|
+
"[SC-debug] hit 30 renders of SelectCheckboxes \u2014 opening debugger"
|
|
14969
|
+
);
|
|
14970
|
+
debugger;
|
|
14971
|
+
}
|
|
14972
|
+
}
|
|
14973
|
+
const [inputValue, setInputValue] = React59.useState("");
|
|
14857
14974
|
const isControlled = value !== void 0;
|
|
14858
|
-
const [internalValue, setInternalValue] =
|
|
14975
|
+
const [internalValue, setInternalValue] = React59.useState(
|
|
14859
14976
|
() => defaultValue ?? []
|
|
14860
14977
|
);
|
|
14861
14978
|
const currentValue = isControlled ? value : internalValue;
|
|
14862
|
-
const selected =
|
|
14863
|
-
const handleChange =
|
|
14979
|
+
const selected = React59.useMemo(() => currentValue ?? [], [currentValue]);
|
|
14980
|
+
const handleChange = React59.useCallback(
|
|
14864
14981
|
(next, meta) => {
|
|
14982
|
+
console.log("[SC-debug] handleChange", {
|
|
14983
|
+
action: meta?.action,
|
|
14984
|
+
nextLength: next.length,
|
|
14985
|
+
isControlled
|
|
14986
|
+
});
|
|
14865
14987
|
if (!isControlled) setInternalValue(next);
|
|
14866
14988
|
onChange?.(next, meta);
|
|
14867
14989
|
},
|
|
14868
14990
|
[isControlled, onChange]
|
|
14869
14991
|
);
|
|
14870
|
-
const flatRawOptions =
|
|
14992
|
+
const flatRawOptions = React59.useMemo(
|
|
14871
14993
|
() => flattenGroupedOptions(rawOptions),
|
|
14872
14994
|
[rawOptions]
|
|
14873
14995
|
);
|
|
14874
|
-
const filteredGrouped =
|
|
14996
|
+
const filteredGrouped = React59.useMemo(() => {
|
|
14875
14997
|
const trimmed = inputValue.trim();
|
|
14876
14998
|
if (!trimmed) return rawOptions;
|
|
14877
14999
|
return rawOptions.map((item) => {
|
|
@@ -14882,7 +15004,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14882
15004
|
return filterOption(item, trimmed) ? item : null;
|
|
14883
15005
|
}).filter((item) => item !== null);
|
|
14884
15006
|
}, [rawOptions, inputValue, filterOption]);
|
|
14885
|
-
const filteredFlat =
|
|
15007
|
+
const filteredFlat = React59.useMemo(
|
|
14886
15008
|
() => flattenGroupedOptions(filteredGrouped),
|
|
14887
15009
|
[filteredGrouped]
|
|
14888
15010
|
);
|
|
@@ -14890,7 +15012,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14890
15012
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
14891
15013
|
}, 0);
|
|
14892
15014
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
14893
|
-
const handleToggleAll =
|
|
15015
|
+
const handleToggleAll = React59.useCallback(() => {
|
|
14894
15016
|
if (allVisibleSelected) {
|
|
14895
15017
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
14896
15018
|
handleChange(
|
|
@@ -14905,14 +15027,27 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14905
15027
|
}
|
|
14906
15028
|
handleChange(merged, { action: "select" });
|
|
14907
15029
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
14908
|
-
const
|
|
15030
|
+
const valueTextRef = React59.useRef(valueText);
|
|
15031
|
+
const totalCountRef = React59.useRef(flatRawOptions.length);
|
|
15032
|
+
valueTextRef.current = valueText;
|
|
15033
|
+
totalCountRef.current = flatRawOptions.length;
|
|
15034
|
+
const Control = React59.useMemo(() => {
|
|
15035
|
+
console.log("[SC-debug] (re)creating Control component", { hasCustomTrigger: !!trigger });
|
|
14909
15036
|
if (trigger) return makeTriggerSlot(trigger);
|
|
14910
15037
|
return createCountTrigger({
|
|
14911
|
-
|
|
14912
|
-
|
|
15038
|
+
getValueText: () => valueTextRef.current,
|
|
15039
|
+
getTotalCount: () => totalCountRef.current
|
|
14913
15040
|
});
|
|
14914
|
-
}, [trigger
|
|
14915
|
-
const
|
|
15041
|
+
}, [trigger]);
|
|
15042
|
+
const components = React59.useMemo(
|
|
15043
|
+
() => ({
|
|
15044
|
+
...userComponents,
|
|
15045
|
+
Control,
|
|
15046
|
+
Option: userComponents?.Option ?? SelectCheckboxOption
|
|
15047
|
+
}),
|
|
15048
|
+
[userComponents, Control]
|
|
15049
|
+
);
|
|
15050
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ jsx166(
|
|
14916
15051
|
SelectAllRow,
|
|
14917
15052
|
{
|
|
14918
15053
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -14920,7 +15055,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14920
15055
|
onToggle: handleToggleAll
|
|
14921
15056
|
}
|
|
14922
15057
|
) : void 0;
|
|
14923
|
-
const handleInputChange =
|
|
15058
|
+
const handleInputChange = React59.useCallback(
|
|
14924
15059
|
(next) => {
|
|
14925
15060
|
setInputValue(next);
|
|
14926
15061
|
onSearchChange?.(next);
|
|
@@ -14932,7 +15067,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14932
15067
|
value: currentValue,
|
|
14933
15068
|
onChange: handleChange,
|
|
14934
15069
|
filterOption: passthroughFilter2,
|
|
14935
|
-
|
|
15070
|
+
components,
|
|
14936
15071
|
closeMenuOnSelect,
|
|
14937
15072
|
searchPosition: searchable ? "dropdown" : "trigger",
|
|
14938
15073
|
searchable,
|
|
@@ -14941,7 +15076,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14941
15076
|
isMulti: true
|
|
14942
15077
|
};
|
|
14943
15078
|
if (isPaginated) {
|
|
14944
|
-
return /* @__PURE__ */
|
|
15079
|
+
return /* @__PURE__ */ jsx166(
|
|
14945
15080
|
InfiniteScrollSelect,
|
|
14946
15081
|
{
|
|
14947
15082
|
ref,
|
|
@@ -14952,7 +15087,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14952
15087
|
}
|
|
14953
15088
|
);
|
|
14954
15089
|
}
|
|
14955
|
-
return /* @__PURE__ */
|
|
15090
|
+
return /* @__PURE__ */ jsx166(
|
|
14956
15091
|
Select,
|
|
14957
15092
|
{
|
|
14958
15093
|
ref,
|
|
@@ -14963,70 +15098,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14963
15098
|
}
|
|
14964
15099
|
);
|
|
14965
15100
|
}
|
|
14966
|
-
var SelectCheckboxes =
|
|
15101
|
+
var SelectCheckboxes = React59.forwardRef(
|
|
14967
15102
|
SelectCheckboxesInternal
|
|
14968
15103
|
);
|
|
14969
15104
|
|
|
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
15105
|
// src/dashboard/textarea/Textarea.tsx
|
|
15025
|
-
import * as
|
|
15106
|
+
import * as React61 from "react";
|
|
15026
15107
|
import { useTranslation as useTranslation37 } from "react-i18next";
|
|
15027
15108
|
|
|
15028
15109
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15029
|
-
import * as
|
|
15110
|
+
import * as React60 from "react";
|
|
15030
15111
|
var isEmptyValue2 = (value) => {
|
|
15031
15112
|
if (value === void 0 || value === null) return true;
|
|
15032
15113
|
return String(value).length === 0;
|
|
@@ -15045,12 +15126,12 @@ function useTextareaValueState({
|
|
|
15045
15126
|
value,
|
|
15046
15127
|
defaultValue
|
|
15047
15128
|
}) {
|
|
15048
|
-
const textareaRef =
|
|
15129
|
+
const textareaRef = React60.useRef(null);
|
|
15049
15130
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15050
15131
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15051
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15132
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React60.useState(propsAreEmpty);
|
|
15052
15133
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15053
|
-
const setNativeValue =
|
|
15134
|
+
const setNativeValue = React60.useCallback(
|
|
15054
15135
|
(nextValue) => {
|
|
15055
15136
|
if (isControlled) return;
|
|
15056
15137
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15060,14 +15141,14 @@ function useTextareaValueState({
|
|
|
15060
15141
|
},
|
|
15061
15142
|
[isControlled]
|
|
15062
15143
|
);
|
|
15063
|
-
const syncValueState =
|
|
15144
|
+
const syncValueState = React60.useCallback(() => {
|
|
15064
15145
|
if (!textareaRef.current) return;
|
|
15065
15146
|
setNativeValue(textareaRef.current.value);
|
|
15066
15147
|
}, [setNativeValue]);
|
|
15067
|
-
|
|
15148
|
+
React60.useLayoutEffect(() => {
|
|
15068
15149
|
syncValueState();
|
|
15069
15150
|
});
|
|
15070
|
-
|
|
15151
|
+
React60.useEffect(() => {
|
|
15071
15152
|
const textarea = textareaRef.current;
|
|
15072
15153
|
const form = textarea?.form;
|
|
15073
15154
|
if (isControlled || !form) return;
|
|
@@ -15094,7 +15175,7 @@ function useTextareaValueState({
|
|
|
15094
15175
|
import { jsx as jsx167, jsxs as jsxs105 } from "react/jsx-runtime";
|
|
15095
15176
|
var LINE_HEIGHT = 20;
|
|
15096
15177
|
var VERTICAL_PADDING = 32;
|
|
15097
|
-
var Textarea =
|
|
15178
|
+
var Textarea = React61.forwardRef(function Textarea2({
|
|
15098
15179
|
className,
|
|
15099
15180
|
textareaClassName,
|
|
15100
15181
|
label,
|
|
@@ -15122,12 +15203,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15122
15203
|
}, ref) {
|
|
15123
15204
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15124
15205
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15125
|
-
const reactId =
|
|
15206
|
+
const reactId = React61.useId();
|
|
15126
15207
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15127
15208
|
const { t } = useTranslation37();
|
|
15128
15209
|
const isInvalid = Boolean(invalid || error);
|
|
15129
15210
|
const isBlocked = Boolean(disabled);
|
|
15130
|
-
const resize =
|
|
15211
|
+
const resize = React61.useCallback(() => {
|
|
15131
15212
|
const el = textareaRef.current;
|
|
15132
15213
|
if (!el || !autosize) return;
|
|
15133
15214
|
el.style.height = "auto";
|
|
@@ -15137,7 +15218,7 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15137
15218
|
el.style.height = `${nextHeight}px`;
|
|
15138
15219
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15139
15220
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15140
|
-
|
|
15221
|
+
React61.useLayoutEffect(() => {
|
|
15141
15222
|
resize();
|
|
15142
15223
|
}, [resize, value]);
|
|
15143
15224
|
const handleInput = (event) => {
|
|
@@ -15229,12 +15310,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15229
15310
|
});
|
|
15230
15311
|
|
|
15231
15312
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15232
|
-
import * as
|
|
15313
|
+
import * as React63 from "react";
|
|
15233
15314
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
15234
15315
|
import { useTranslation as useTranslation38 } from "react-i18next";
|
|
15235
15316
|
|
|
15236
15317
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15237
|
-
import * as
|
|
15318
|
+
import * as React62 from "react";
|
|
15238
15319
|
|
|
15239
15320
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15240
15321
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15385,21 +15466,21 @@ function useDatePickerWheel({
|
|
|
15385
15466
|
minDate,
|
|
15386
15467
|
maxDate
|
|
15387
15468
|
}) {
|
|
15388
|
-
const years =
|
|
15389
|
-
const [draftDate, setDraftDate] =
|
|
15469
|
+
const years = React62.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15470
|
+
const [draftDate, setDraftDate] = React62.useState(
|
|
15390
15471
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15391
15472
|
);
|
|
15392
15473
|
const draftYear = draftDate.getFullYear();
|
|
15393
15474
|
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 =
|
|
15475
|
+
const [monthScrollTop, setMonthScrollTop] = React62.useState(0);
|
|
15476
|
+
const [dayScrollTop, setDayScrollTop] = React62.useState(0);
|
|
15477
|
+
const [yearScrollTop, setYearScrollTop] = React62.useState(0);
|
|
15478
|
+
const monthListRef = React62.useRef(null);
|
|
15479
|
+
const dayListRef = React62.useRef(null);
|
|
15480
|
+
const yearListRef = React62.useRef(null);
|
|
15481
|
+
const settleTimeoutsRef = React62.useRef({});
|
|
15482
|
+
const animationFramesRef = React62.useRef({});
|
|
15483
|
+
const columnRefs = React62.useMemo(
|
|
15403
15484
|
() => ({
|
|
15404
15485
|
month: monthListRef,
|
|
15405
15486
|
day: dayListRef,
|
|
@@ -15407,7 +15488,7 @@ function useDatePickerWheel({
|
|
|
15407
15488
|
}),
|
|
15408
15489
|
[]
|
|
15409
15490
|
);
|
|
15410
|
-
const setColumnScrollTop =
|
|
15491
|
+
const setColumnScrollTop = React62.useCallback(
|
|
15411
15492
|
(column, nextScrollTop) => {
|
|
15412
15493
|
if (column === "month") {
|
|
15413
15494
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15421,19 +15502,19 @@ function useDatePickerWheel({
|
|
|
15421
15502
|
},
|
|
15422
15503
|
[]
|
|
15423
15504
|
);
|
|
15424
|
-
const clearSettleTimeout =
|
|
15505
|
+
const clearSettleTimeout = React62.useCallback((column) => {
|
|
15425
15506
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15426
15507
|
if (timeoutId === void 0) return;
|
|
15427
15508
|
window.clearTimeout(timeoutId);
|
|
15428
15509
|
delete settleTimeoutsRef.current[column];
|
|
15429
15510
|
}, []);
|
|
15430
|
-
const clearAnimationFrame =
|
|
15511
|
+
const clearAnimationFrame = React62.useCallback((column) => {
|
|
15431
15512
|
const frameId = animationFramesRef.current[column];
|
|
15432
15513
|
if (frameId === void 0) return;
|
|
15433
15514
|
window.cancelAnimationFrame(frameId);
|
|
15434
15515
|
delete animationFramesRef.current[column];
|
|
15435
15516
|
}, []);
|
|
15436
|
-
|
|
15517
|
+
React62.useEffect(
|
|
15437
15518
|
() => () => {
|
|
15438
15519
|
["month", "day", "year"].forEach((column) => {
|
|
15439
15520
|
clearSettleTimeout(column);
|
|
@@ -15442,22 +15523,22 @@ function useDatePickerWheel({
|
|
|
15442
15523
|
},
|
|
15443
15524
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15444
15525
|
);
|
|
15445
|
-
|
|
15526
|
+
React62.useEffect(() => {
|
|
15446
15527
|
if (isOpen) return;
|
|
15447
15528
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15448
15529
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15449
|
-
const months =
|
|
15530
|
+
const months = React62.useMemo(
|
|
15450
15531
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15451
15532
|
[draftYear, maxDate, minDate]
|
|
15452
15533
|
);
|
|
15453
|
-
const days =
|
|
15534
|
+
const days = React62.useMemo(
|
|
15454
15535
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15455
15536
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15456
15537
|
);
|
|
15457
15538
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15458
15539
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15459
15540
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15460
|
-
const syncScrollPositions =
|
|
15541
|
+
const syncScrollPositions = React62.useCallback(
|
|
15461
15542
|
(nextDate, behavior = "auto") => {
|
|
15462
15543
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15463
15544
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15481,7 +15562,7 @@ function useDatePickerWheel({
|
|
|
15481
15562
|
},
|
|
15482
15563
|
[maxDate, minDate, years]
|
|
15483
15564
|
);
|
|
15484
|
-
|
|
15565
|
+
React62.useLayoutEffect(() => {
|
|
15485
15566
|
if (!isOpen) return;
|
|
15486
15567
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15487
15568
|
setDraftDate(nextDate);
|
|
@@ -15492,7 +15573,7 @@ function useDatePickerWheel({
|
|
|
15492
15573
|
window.cancelAnimationFrame(frameId);
|
|
15493
15574
|
};
|
|
15494
15575
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15495
|
-
const updateDraftDate =
|
|
15576
|
+
const updateDraftDate = React62.useCallback(
|
|
15496
15577
|
(column, targetIndex, behavior = "smooth") => {
|
|
15497
15578
|
const currentDate = stripTime(draftDate);
|
|
15498
15579
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15537,7 +15618,7 @@ function useDatePickerWheel({
|
|
|
15537
15618
|
},
|
|
15538
15619
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15539
15620
|
);
|
|
15540
|
-
const settleColumnScroll =
|
|
15621
|
+
const settleColumnScroll = React62.useCallback(
|
|
15541
15622
|
(column) => {
|
|
15542
15623
|
const list = columnRefs[column].current;
|
|
15543
15624
|
if (!list) return;
|
|
@@ -15550,7 +15631,7 @@ function useDatePickerWheel({
|
|
|
15550
15631
|
},
|
|
15551
15632
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15552
15633
|
);
|
|
15553
|
-
const scheduleScrollSettle =
|
|
15634
|
+
const scheduleScrollSettle = React62.useCallback(
|
|
15554
15635
|
(column) => {
|
|
15555
15636
|
clearSettleTimeout(column);
|
|
15556
15637
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15559,7 +15640,7 @@ function useDatePickerWheel({
|
|
|
15559
15640
|
},
|
|
15560
15641
|
[clearSettleTimeout, settleColumnScroll]
|
|
15561
15642
|
);
|
|
15562
|
-
const handleColumnScroll =
|
|
15643
|
+
const handleColumnScroll = React62.useCallback(
|
|
15563
15644
|
(column) => {
|
|
15564
15645
|
const list = columnRefs[column].current;
|
|
15565
15646
|
if (!list) return;
|
|
@@ -15573,13 +15654,13 @@ function useDatePickerWheel({
|
|
|
15573
15654
|
},
|
|
15574
15655
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15575
15656
|
);
|
|
15576
|
-
const handleOptionSelect =
|
|
15657
|
+
const handleOptionSelect = React62.useCallback(
|
|
15577
15658
|
(column, targetIndex) => {
|
|
15578
15659
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15579
15660
|
},
|
|
15580
15661
|
[updateDraftDate]
|
|
15581
15662
|
);
|
|
15582
|
-
const focusAdjacentColumn =
|
|
15663
|
+
const focusAdjacentColumn = React62.useCallback(
|
|
15583
15664
|
(column, direction) => {
|
|
15584
15665
|
const order = ["month", "day", "year"];
|
|
15585
15666
|
const currentIndex = order.indexOf(column);
|
|
@@ -15589,7 +15670,7 @@ function useDatePickerWheel({
|
|
|
15589
15670
|
},
|
|
15590
15671
|
[columnRefs]
|
|
15591
15672
|
);
|
|
15592
|
-
const handleColumnKeyDown =
|
|
15673
|
+
const handleColumnKeyDown = React62.useCallback(
|
|
15593
15674
|
(column, event) => {
|
|
15594
15675
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15595
15676
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15911,7 +15992,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
15911
15992
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
15912
15993
|
return new Date(yearNum, monthIndex, dayNum);
|
|
15913
15994
|
}
|
|
15914
|
-
var Datepicker =
|
|
15995
|
+
var Datepicker = React63.forwardRef(
|
|
15915
15996
|
function Datepicker2({
|
|
15916
15997
|
label,
|
|
15917
15998
|
value,
|
|
@@ -15944,14 +16025,14 @@ var Datepicker = React62.forwardRef(
|
|
|
15944
16025
|
maxDate,
|
|
15945
16026
|
formatValue
|
|
15946
16027
|
}, 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 =
|
|
16028
|
+
const containerRef = React63.useRef(null);
|
|
16029
|
+
const dayInputRef = React63.useRef(null);
|
|
16030
|
+
const monthInputRef = React63.useRef(null);
|
|
16031
|
+
const monthListRef = React63.useRef(null);
|
|
16032
|
+
const yearInputRef = React63.useRef(null);
|
|
16033
|
+
const mobileTriggerRef = React63.useRef(null);
|
|
16034
|
+
const wheelBaseId = React63.useId();
|
|
16035
|
+
const reactId = React63.useId();
|
|
15955
16036
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
15956
16037
|
const dayId = `${baseId}-day`;
|
|
15957
16038
|
const monthId = `${baseId}-month`;
|
|
@@ -15960,38 +16041,38 @@ var Datepicker = React62.forwardRef(
|
|
|
15960
16041
|
const errorId = `${baseId}-error`;
|
|
15961
16042
|
const { t, i18n } = useTranslation38();
|
|
15962
16043
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
15963
|
-
const resolvedMonthLabels =
|
|
16044
|
+
const resolvedMonthLabels = React63.useMemo(
|
|
15964
16045
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
15965
16046
|
[resolvedLocale, monthLabels]
|
|
15966
16047
|
);
|
|
15967
16048
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
15968
16049
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
15969
16050
|
const isControlled = value !== void 0;
|
|
15970
|
-
const initialParts =
|
|
16051
|
+
const initialParts = React63.useMemo(
|
|
15971
16052
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
15972
16053
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15973
16054
|
[]
|
|
15974
16055
|
);
|
|
15975
|
-
const [day, setDay] =
|
|
15976
|
-
const [monthIndex, setMonthIndex] =
|
|
16056
|
+
const [day, setDay] = React63.useState(initialParts.day);
|
|
16057
|
+
const [monthIndex, setMonthIndex] = React63.useState(
|
|
15977
16058
|
initialParts.monthIndex
|
|
15978
16059
|
);
|
|
15979
|
-
const [year, setYear] =
|
|
15980
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
15981
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
15982
|
-
const [focusedField, setFocusedField] =
|
|
15983
|
-
const [monthInputValue, setMonthInputValue] =
|
|
15984
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
16060
|
+
const [year, setYear] = React63.useState(initialParts.year);
|
|
16061
|
+
const [isMonthOpen, setIsMonthOpen] = React63.useState(false);
|
|
16062
|
+
const [isWheelOpen, setIsWheelOpen] = React63.useState(false);
|
|
16063
|
+
const [focusedField, setFocusedField] = React63.useState(null);
|
|
16064
|
+
const [monthInputValue, setMonthInputValue] = React63.useState("");
|
|
16065
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React63.useState(-1);
|
|
15985
16066
|
const isMobile3 = useIsMobile();
|
|
15986
|
-
const emitChangeRef =
|
|
16067
|
+
const emitChangeRef = React63.useRef(() => {
|
|
15987
16068
|
});
|
|
15988
|
-
const dayStateRef =
|
|
15989
|
-
const yearStateRef =
|
|
15990
|
-
const monthIndexRef =
|
|
16069
|
+
const dayStateRef = React63.useRef(day);
|
|
16070
|
+
const yearStateRef = React63.useRef(year);
|
|
16071
|
+
const monthIndexRef = React63.useRef(monthIndex);
|
|
15991
16072
|
dayStateRef.current = day;
|
|
15992
16073
|
yearStateRef.current = year;
|
|
15993
16074
|
monthIndexRef.current = monthIndex;
|
|
15994
|
-
|
|
16075
|
+
React63.useImperativeHandle(
|
|
15995
16076
|
ref,
|
|
15996
16077
|
() => ({
|
|
15997
16078
|
getDayValue: () => dayStateRef.current,
|
|
@@ -16009,27 +16090,27 @@ var Datepicker = React62.forwardRef(
|
|
|
16009
16090
|
}),
|
|
16010
16091
|
[]
|
|
16011
16092
|
);
|
|
16012
|
-
|
|
16093
|
+
React63.useEffect(() => {
|
|
16013
16094
|
if (!isControlled) return;
|
|
16014
16095
|
const next = partsFromDate(value ?? null);
|
|
16015
16096
|
setDay(next.day);
|
|
16016
16097
|
setMonthIndex(next.monthIndex);
|
|
16017
16098
|
setYear(next.year);
|
|
16018
16099
|
}, [isControlled, value]);
|
|
16019
|
-
|
|
16100
|
+
React63.useEffect(() => {
|
|
16020
16101
|
if (focusedField === "month") return;
|
|
16021
16102
|
setMonthInputValue(
|
|
16022
16103
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16023
16104
|
);
|
|
16024
16105
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16025
|
-
const filteredMonths =
|
|
16106
|
+
const filteredMonths = React63.useMemo(() => {
|
|
16026
16107
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16027
16108
|
const query = monthInputValue.trim().toLowerCase();
|
|
16028
16109
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16029
16110
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16030
16111
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16031
16112
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16032
|
-
|
|
16113
|
+
React63.useEffect(() => {
|
|
16033
16114
|
if (!isMonthOpen) {
|
|
16034
16115
|
setMonthHighlightIndex(-1);
|
|
16035
16116
|
return;
|
|
@@ -16050,7 +16131,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16050
16131
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16051
16132
|
const isInvalid = Boolean(invalid || error);
|
|
16052
16133
|
const wrapperWidth = toCssSize(width);
|
|
16053
|
-
const currentDate =
|
|
16134
|
+
const currentDate = React63.useMemo(
|
|
16054
16135
|
() => dateFromParts(day, monthIndex, year),
|
|
16055
16136
|
[day, monthIndex, year]
|
|
16056
16137
|
);
|
|
@@ -16059,7 +16140,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16059
16140
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16060
16141
|
isDisabled: !isMonthOpen || isMobile3
|
|
16061
16142
|
});
|
|
16062
|
-
const emitChange =
|
|
16143
|
+
const emitChange = React63.useCallback(
|
|
16063
16144
|
(nextDay, nextMonth, nextYear) => {
|
|
16064
16145
|
if (!onChange) return;
|
|
16065
16146
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16095,7 +16176,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16095
16176
|
setIsMonthOpen(true);
|
|
16096
16177
|
setMonthHighlightIndex(0);
|
|
16097
16178
|
};
|
|
16098
|
-
const commitMonthInput =
|
|
16179
|
+
const commitMonthInput = React63.useCallback(() => {
|
|
16099
16180
|
const query = monthInputValue.trim().toLowerCase();
|
|
16100
16181
|
if (!query) {
|
|
16101
16182
|
if (monthIndex !== null) {
|
|
@@ -16155,15 +16236,15 @@ var Datepicker = React62.forwardRef(
|
|
|
16155
16236
|
setIsMonthOpen(false);
|
|
16156
16237
|
}
|
|
16157
16238
|
};
|
|
16158
|
-
const focusDayInput =
|
|
16239
|
+
const focusDayInput = React63.useCallback(() => {
|
|
16159
16240
|
if (isBlocked || readOnly) return;
|
|
16160
16241
|
dayInputRef.current?.focus();
|
|
16161
16242
|
}, [isBlocked, readOnly]);
|
|
16162
|
-
const openWheel =
|
|
16243
|
+
const openWheel = React63.useCallback(() => {
|
|
16163
16244
|
if (isBlocked || readOnly) return;
|
|
16164
16245
|
setIsWheelOpen(true);
|
|
16165
16246
|
}, [isBlocked, readOnly]);
|
|
16166
|
-
const closeWheel =
|
|
16247
|
+
const closeWheel = React63.useCallback(() => {
|
|
16167
16248
|
setIsWheelOpen(false);
|
|
16168
16249
|
mobileTriggerRef.current?.focus();
|
|
16169
16250
|
}, []);
|
|
@@ -16175,7 +16256,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16175
16256
|
minDate,
|
|
16176
16257
|
maxDate
|
|
16177
16258
|
});
|
|
16178
|
-
const handleWheelDone =
|
|
16259
|
+
const handleWheelDone = React63.useCallback(() => {
|
|
16179
16260
|
const next = wheel.draftDate;
|
|
16180
16261
|
setDay(String(next.getDate()));
|
|
16181
16262
|
setMonthIndex(next.getMonth());
|
|
@@ -16184,7 +16265,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16184
16265
|
setIsWheelOpen(false);
|
|
16185
16266
|
mobileTriggerRef.current?.focus();
|
|
16186
16267
|
}, [name, onChange, wheel.draftDate]);
|
|
16187
|
-
const defaultFormatValue =
|
|
16268
|
+
const defaultFormatValue = React63.useCallback(
|
|
16188
16269
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16189
16270
|
[resolvedMonthLabels]
|
|
16190
16271
|
);
|
|
@@ -16480,7 +16561,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16480
16561
|
);
|
|
16481
16562
|
|
|
16482
16563
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16483
|
-
import * as
|
|
16564
|
+
import * as React67 from "react";
|
|
16484
16565
|
import { useTranslation as useTranslation39 } from "react-i18next";
|
|
16485
16566
|
|
|
16486
16567
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16559,7 +16640,7 @@ var createDisabledMatchers = ({
|
|
|
16559
16640
|
};
|
|
16560
16641
|
|
|
16561
16642
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16562
|
-
import * as
|
|
16643
|
+
import * as React64 from "react";
|
|
16563
16644
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16564
16645
|
function useRangeValue({
|
|
16565
16646
|
value: externalValue,
|
|
@@ -16568,10 +16649,10 @@ function useRangeValue({
|
|
|
16568
16649
|
name
|
|
16569
16650
|
}) {
|
|
16570
16651
|
const isControlled = externalValue !== void 0;
|
|
16571
|
-
const [draft, setDraft] =
|
|
16652
|
+
const [draft, setDraft] = React64.useState(
|
|
16572
16653
|
isControlled ? externalValue : defaultValue
|
|
16573
16654
|
);
|
|
16574
|
-
const lastExternalKeyRef =
|
|
16655
|
+
const lastExternalKeyRef = React64.useRef(getRangeKey(externalValue));
|
|
16575
16656
|
if (isControlled) {
|
|
16576
16657
|
const externalKey = getRangeKey(externalValue);
|
|
16577
16658
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16579,7 +16660,7 @@ function useRangeValue({
|
|
|
16579
16660
|
setDraft(externalValue);
|
|
16580
16661
|
}
|
|
16581
16662
|
}
|
|
16582
|
-
const commit =
|
|
16663
|
+
const commit = React64.useCallback(
|
|
16583
16664
|
(next) => {
|
|
16584
16665
|
setDraft(next);
|
|
16585
16666
|
if (next === void 0) {
|
|
@@ -16594,7 +16675,7 @@ function useRangeValue({
|
|
|
16594
16675
|
}
|
|
16595
16676
|
|
|
16596
16677
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16597
|
-
import * as
|
|
16678
|
+
import * as React65 from "react";
|
|
16598
16679
|
|
|
16599
16680
|
// src/dashboard/date-range-picker/utils/inputFormat.ts
|
|
16600
16681
|
function parseDateInputFormat(format2) {
|
|
@@ -16684,18 +16765,18 @@ function useRangeTextInputs({
|
|
|
16684
16765
|
onFromComplete,
|
|
16685
16766
|
onToComplete
|
|
16686
16767
|
}) {
|
|
16687
|
-
const tokens =
|
|
16768
|
+
const tokens = React65.useMemo(
|
|
16688
16769
|
() => parseDateInputFormat(displayFormat),
|
|
16689
16770
|
[displayFormat]
|
|
16690
16771
|
);
|
|
16691
|
-
const maxDigits =
|
|
16692
|
-
const [fromText, setFromText] =
|
|
16693
|
-
const [toText, setToText] =
|
|
16694
|
-
|
|
16772
|
+
const maxDigits = React65.useMemo(() => getMaxDigits(tokens), [tokens]);
|
|
16773
|
+
const [fromText, setFromText] = React65.useState(value?.from ? format2(value.from) : "");
|
|
16774
|
+
const [toText, setToText] = React65.useState(value?.to ? format2(value.to) : "");
|
|
16775
|
+
React65.useEffect(() => {
|
|
16695
16776
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16696
16777
|
setToText(value?.to ? format2(value.to) : "");
|
|
16697
16778
|
}, [format2, value?.from, value?.to]);
|
|
16698
|
-
const handleFromChange =
|
|
16779
|
+
const handleFromChange = React65.useCallback(
|
|
16699
16780
|
(raw) => {
|
|
16700
16781
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16701
16782
|
const wasComplete = countDigits(fromText) === maxDigits;
|
|
@@ -16707,7 +16788,7 @@ function useRangeTextInputs({
|
|
|
16707
16788
|
},
|
|
16708
16789
|
[fromText, maxDigits, onFromComplete, parse3, tokens]
|
|
16709
16790
|
);
|
|
16710
|
-
const handleToChange =
|
|
16791
|
+
const handleToChange = React65.useCallback(
|
|
16711
16792
|
(raw) => {
|
|
16712
16793
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16713
16794
|
const wasComplete = countDigits(toText) === maxDigits;
|
|
@@ -16719,7 +16800,7 @@ function useRangeTextInputs({
|
|
|
16719
16800
|
},
|
|
16720
16801
|
[maxDigits, onToComplete, parse3, toText, tokens]
|
|
16721
16802
|
);
|
|
16722
|
-
const handleFromBlur =
|
|
16803
|
+
const handleFromBlur = React65.useCallback(() => {
|
|
16723
16804
|
if (!fromText) {
|
|
16724
16805
|
const next = { from: void 0, to: value?.to };
|
|
16725
16806
|
onCommit(next);
|
|
@@ -16736,7 +16817,7 @@ function useRangeTextInputs({
|
|
|
16736
16817
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16737
16818
|
return void 0;
|
|
16738
16819
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16739
|
-
const handleToBlur =
|
|
16820
|
+
const handleToBlur = React65.useCallback(() => {
|
|
16740
16821
|
if (!toText) {
|
|
16741
16822
|
const next = { from: value?.from, to: void 0 };
|
|
16742
16823
|
onCommit(next);
|
|
@@ -16765,21 +16846,21 @@ function useRangeTextInputs({
|
|
|
16765
16846
|
}
|
|
16766
16847
|
|
|
16767
16848
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16768
|
-
import * as
|
|
16849
|
+
import * as React66 from "react";
|
|
16769
16850
|
function useRangeMonthSync(value) {
|
|
16770
|
-
const isPreloadedRef =
|
|
16771
|
-
const [month, setMonth] =
|
|
16772
|
-
|
|
16851
|
+
const isPreloadedRef = React66.useRef(false);
|
|
16852
|
+
const [month, setMonth] = React66.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16853
|
+
React66.useEffect(() => {
|
|
16773
16854
|
if (value?.from && !isPreloadedRef.current) {
|
|
16774
16855
|
setMonth(value.from);
|
|
16775
16856
|
isPreloadedRef.current = true;
|
|
16776
16857
|
}
|
|
16777
16858
|
}, [value?.from]);
|
|
16778
|
-
const syncMonthToValue =
|
|
16859
|
+
const syncMonthToValue = React66.useCallback((next) => {
|
|
16779
16860
|
isPreloadedRef.current = true;
|
|
16780
16861
|
if (next?.from) setMonth(next.from);
|
|
16781
16862
|
}, []);
|
|
16782
|
-
const resetPreload =
|
|
16863
|
+
const resetPreload = React66.useCallback(() => {
|
|
16783
16864
|
isPreloadedRef.current = false;
|
|
16784
16865
|
}, []);
|
|
16785
16866
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -17039,7 +17120,7 @@ function DateRangePopover({
|
|
|
17039
17120
|
|
|
17040
17121
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17041
17122
|
import { jsx as jsx174, jsxs as jsxs111 } from "react/jsx-runtime";
|
|
17042
|
-
var DateRangePicker =
|
|
17123
|
+
var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
17043
17124
|
label,
|
|
17044
17125
|
value: externalValue,
|
|
17045
17126
|
defaultValue,
|
|
@@ -17074,20 +17155,20 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17074
17155
|
components: customComponents,
|
|
17075
17156
|
...dayPickerProps
|
|
17076
17157
|
}, ref) {
|
|
17077
|
-
const containerRef =
|
|
17078
|
-
const fromInputRef =
|
|
17079
|
-
const toInputRef =
|
|
17080
|
-
const reactId =
|
|
17158
|
+
const containerRef = React67.useRef(null);
|
|
17159
|
+
const fromInputRef = React67.useRef(null);
|
|
17160
|
+
const toInputRef = React67.useRef(null);
|
|
17161
|
+
const reactId = React67.useId();
|
|
17081
17162
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17082
17163
|
const fromId = `${baseId}-from`;
|
|
17083
17164
|
const toId = `${baseId}-to`;
|
|
17084
17165
|
const labelId = `${baseId}-label`;
|
|
17085
17166
|
const errorId = `${baseId}-error`;
|
|
17086
|
-
const normalizedValue =
|
|
17167
|
+
const normalizedValue = React67.useMemo(() => {
|
|
17087
17168
|
if (externalValue === void 0) return void 0;
|
|
17088
17169
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17089
17170
|
}, [externalValue]);
|
|
17090
|
-
const normalizedDefaultValue =
|
|
17171
|
+
const normalizedDefaultValue = React67.useMemo(() => {
|
|
17091
17172
|
if (defaultValue === void 0) return void 0;
|
|
17092
17173
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17093
17174
|
}, [defaultValue]);
|
|
@@ -17097,16 +17178,16 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17097
17178
|
onChange,
|
|
17098
17179
|
name
|
|
17099
17180
|
});
|
|
17100
|
-
const normalizedMinDate =
|
|
17101
|
-
const normalizedMaxDate =
|
|
17102
|
-
const formatter =
|
|
17103
|
-
const parser =
|
|
17104
|
-
const closeCalendarRef =
|
|
17181
|
+
const normalizedMinDate = React67.useMemo(() => toDate(minDate), [minDate]);
|
|
17182
|
+
const normalizedMaxDate = React67.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17183
|
+
const formatter = React67.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17184
|
+
const parser = React67.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17185
|
+
const closeCalendarRef = React67.useRef(() => {
|
|
17105
17186
|
});
|
|
17106
|
-
const handleFromComplete =
|
|
17187
|
+
const handleFromComplete = React67.useCallback(() => {
|
|
17107
17188
|
toInputRef.current?.focus();
|
|
17108
17189
|
}, []);
|
|
17109
|
-
const handleToComplete =
|
|
17190
|
+
const handleToComplete = React67.useCallback(() => {
|
|
17110
17191
|
toInputRef.current?.blur();
|
|
17111
17192
|
closeCalendarRef.current();
|
|
17112
17193
|
}, []);
|
|
@@ -17130,9 +17211,9 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17130
17211
|
onToComplete: handleToComplete
|
|
17131
17212
|
});
|
|
17132
17213
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17133
|
-
const [isOpen, setIsOpen] =
|
|
17134
|
-
const [focusedInput, setFocusedInput] =
|
|
17135
|
-
const [autoFocus, setAutoFocus] =
|
|
17214
|
+
const [isOpen, setIsOpen] = React67.useState(false);
|
|
17215
|
+
const [focusedInput, setFocusedInput] = React67.useState(null);
|
|
17216
|
+
const [autoFocus, setAutoFocus] = React67.useState(false);
|
|
17136
17217
|
const isMobile3 = useIsMobile();
|
|
17137
17218
|
const { t } = useTranslation39();
|
|
17138
17219
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17143,14 +17224,14 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17143
17224
|
const isFocused = focusedInput !== null || isOpen;
|
|
17144
17225
|
const wrapperWidth = toCssSize(width);
|
|
17145
17226
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17146
|
-
const closeCalendar =
|
|
17227
|
+
const closeCalendar = React67.useCallback(() => {
|
|
17147
17228
|
setIsOpen(false);
|
|
17148
17229
|
setFocusedInput(null);
|
|
17149
17230
|
setAutoFocus(false);
|
|
17150
17231
|
if (value?.from) setMonth(value.from);
|
|
17151
17232
|
}, [setMonth, value?.from]);
|
|
17152
17233
|
closeCalendarRef.current = closeCalendar;
|
|
17153
|
-
const openCalendar =
|
|
17234
|
+
const openCalendar = React67.useCallback(() => {
|
|
17154
17235
|
if (isBlocked || readOnly) return;
|
|
17155
17236
|
setIsOpen(true);
|
|
17156
17237
|
}, [isBlocked, readOnly]);
|
|
@@ -17159,7 +17240,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17159
17240
|
onOutsideClick: closeCalendar,
|
|
17160
17241
|
isDisabled: !isOpen || isMobile3
|
|
17161
17242
|
});
|
|
17162
|
-
const handlePickerChange =
|
|
17243
|
+
const handlePickerChange = React67.useCallback(
|
|
17163
17244
|
(range, pickedDate) => {
|
|
17164
17245
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17165
17246
|
previous: value,
|
|
@@ -17180,7 +17261,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17180
17261
|
setToText("");
|
|
17181
17262
|
setMonth(/* @__PURE__ */ new Date());
|
|
17182
17263
|
};
|
|
17183
|
-
const disabledMatchers =
|
|
17264
|
+
const disabledMatchers = React67.useMemo(
|
|
17184
17265
|
() => createDisabledMatchers({
|
|
17185
17266
|
minDate: normalizedMinDate,
|
|
17186
17267
|
maxDate: normalizedMaxDate,
|
|
@@ -17199,7 +17280,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17199
17280
|
openCalendar();
|
|
17200
17281
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17201
17282
|
};
|
|
17202
|
-
|
|
17283
|
+
React67.useImperativeHandle(
|
|
17203
17284
|
ref,
|
|
17204
17285
|
() => ({
|
|
17205
17286
|
setDateRange: (range) => {
|
|
@@ -17380,7 +17461,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17380
17461
|
});
|
|
17381
17462
|
|
|
17382
17463
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17383
|
-
import * as
|
|
17464
|
+
import * as React68 from "react";
|
|
17384
17465
|
import { useTranslation as useTranslation40 } from "react-i18next";
|
|
17385
17466
|
import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
|
|
17386
17467
|
import {
|
|
@@ -17406,11 +17487,11 @@ function useValidateDates({
|
|
|
17406
17487
|
const { t } = useTranslation40();
|
|
17407
17488
|
const handleError = useEvent(onError);
|
|
17408
17489
|
const handleSuccess = useEvent(onSuccess);
|
|
17409
|
-
const errorFormatter =
|
|
17490
|
+
const errorFormatter = React68.useMemo(
|
|
17410
17491
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17411
17492
|
[displayFormat]
|
|
17412
17493
|
);
|
|
17413
|
-
const validateDates =
|
|
17494
|
+
const validateDates = React68.useCallback(
|
|
17414
17495
|
(dates) => {
|
|
17415
17496
|
const startDate = dates?.from;
|
|
17416
17497
|
const endDate = dates?.to;
|
|
@@ -17460,7 +17541,7 @@ function useValidateDates({
|
|
|
17460
17541
|
}
|
|
17461
17542
|
|
|
17462
17543
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17463
|
-
import * as
|
|
17544
|
+
import * as React69 from "react";
|
|
17464
17545
|
import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
|
|
17465
17546
|
import { jsx as jsx175 } from "react/jsx-runtime";
|
|
17466
17547
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
@@ -17504,8 +17585,8 @@ var FORMAT_SETTINGS = {
|
|
|
17504
17585
|
},
|
|
17505
17586
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17506
17587
|
};
|
|
17507
|
-
var TimePicker =
|
|
17508
|
-
const resolvedOptions =
|
|
17588
|
+
var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17589
|
+
const resolvedOptions = React69.useMemo(() => {
|
|
17509
17590
|
if (options) return options;
|
|
17510
17591
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17511
17592
|
return buildOptions(settings);
|
|
@@ -17514,14 +17595,14 @@ var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName =
|
|
|
17514
17595
|
});
|
|
17515
17596
|
|
|
17516
17597
|
// src/dashboard/file-input/FileInput.tsx
|
|
17517
|
-
import * as
|
|
17598
|
+
import * as React70 from "react";
|
|
17518
17599
|
import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
|
|
17519
17600
|
import { useTranslation as useTranslation41 } from "react-i18next";
|
|
17520
17601
|
import { jsx as jsx176, jsxs as jsxs112 } from "react/jsx-runtime";
|
|
17521
17602
|
function defaultDownload(url) {
|
|
17522
17603
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17523
17604
|
}
|
|
17524
|
-
var FileInput =
|
|
17605
|
+
var FileInput = React70.forwardRef(function FileInput2({
|
|
17525
17606
|
label,
|
|
17526
17607
|
value,
|
|
17527
17608
|
onChange,
|
|
@@ -17544,12 +17625,12 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17544
17625
|
width,
|
|
17545
17626
|
downloadLabel
|
|
17546
17627
|
}, ref) {
|
|
17547
|
-
const internalRef =
|
|
17628
|
+
const internalRef = React70.useRef(null);
|
|
17548
17629
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17549
17630
|
const { t } = useTranslation41();
|
|
17550
17631
|
const resolvedLabel = label ?? t("upload_file");
|
|
17551
17632
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17552
|
-
const reactId =
|
|
17633
|
+
const reactId = React70.useId();
|
|
17553
17634
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17554
17635
|
const labelId = `${inputId}-label`;
|
|
17555
17636
|
const errorId = `${inputId}-error`;
|
|
@@ -17686,10 +17767,10 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17686
17767
|
});
|
|
17687
17768
|
|
|
17688
17769
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17689
|
-
import * as
|
|
17770
|
+
import * as React71 from "react";
|
|
17690
17771
|
import { jsx as jsx177, jsxs as jsxs113 } from "react/jsx-runtime";
|
|
17691
17772
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17692
|
-
var SelectIconsBox =
|
|
17773
|
+
var SelectIconsBox = React71.forwardRef(
|
|
17693
17774
|
function SelectIconsBox2({
|
|
17694
17775
|
children,
|
|
17695
17776
|
icons,
|
|
@@ -17705,10 +17786,10 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
17705
17786
|
className,
|
|
17706
17787
|
boxClassName
|
|
17707
17788
|
}, ref) {
|
|
17708
|
-
const containerRef =
|
|
17789
|
+
const containerRef = React71.useRef(null);
|
|
17709
17790
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17710
17791
|
const isControlled = controlledOpen !== void 0;
|
|
17711
|
-
const [internalOpen, setInternalOpen] =
|
|
17792
|
+
const [internalOpen, setInternalOpen] = React71.useState(defaultOpen);
|
|
17712
17793
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17713
17794
|
const setOpen = (next) => {
|
|
17714
17795
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17901,15 +17982,15 @@ var LegacyTextarea = forwardRef72(
|
|
|
17901
17982
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
17902
17983
|
|
|
17903
17984
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
17904
|
-
import * as
|
|
17985
|
+
import * as React73 from "react";
|
|
17905
17986
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
17906
17987
|
|
|
17907
17988
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
17908
|
-
import * as
|
|
17989
|
+
import * as React72 from "react";
|
|
17909
17990
|
import { Loader2 as Loader24 } from "lucide-react";
|
|
17910
17991
|
import { useTranslation as useTranslation42 } from "react-i18next";
|
|
17911
17992
|
import { Fragment as Fragment17, jsx as jsx180, jsxs as jsxs116 } from "react/jsx-runtime";
|
|
17912
|
-
var AirbnbFieldTrigger =
|
|
17993
|
+
var AirbnbFieldTrigger = React72.forwardRef(
|
|
17913
17994
|
({
|
|
17914
17995
|
as = "button",
|
|
17915
17996
|
id,
|
|
@@ -18077,7 +18158,7 @@ AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
|
18077
18158
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18078
18159
|
import { jsx as jsx181, jsxs as jsxs117 } from "react/jsx-runtime";
|
|
18079
18160
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18080
|
-
var AirbnbDatePicker =
|
|
18161
|
+
var AirbnbDatePicker = React73.forwardRef(
|
|
18081
18162
|
({
|
|
18082
18163
|
label,
|
|
18083
18164
|
topLabel,
|
|
@@ -18102,24 +18183,24 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18102
18183
|
formatValue = formatDateValue
|
|
18103
18184
|
}, ref) => {
|
|
18104
18185
|
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 =
|
|
18186
|
+
const [isOpen, setIsOpen] = React73.useState(false);
|
|
18187
|
+
const triggerId = React73.useId();
|
|
18188
|
+
const pickerId = React73.useId();
|
|
18189
|
+
const labelId = React73.useId();
|
|
18190
|
+
const valueId = React73.useId();
|
|
18191
|
+
const helperTextId = React73.useId();
|
|
18192
|
+
const errorId = React73.useId();
|
|
18193
|
+
const internalRef = React73.useRef(null);
|
|
18113
18194
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18114
|
-
const monthLabels =
|
|
18115
|
-
const resolvedMinDate =
|
|
18116
|
-
const resolvedMaxDate =
|
|
18117
|
-
const normalizedValue =
|
|
18118
|
-
const normalizedDefaultValue =
|
|
18195
|
+
const monthLabels = React73.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18196
|
+
const resolvedMinDate = React73.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18197
|
+
const resolvedMaxDate = React73.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18198
|
+
const normalizedValue = React73.useMemo(() => normalizeDateValue(value), [value]);
|
|
18199
|
+
const normalizedDefaultValue = React73.useMemo(
|
|
18119
18200
|
() => normalizeDateValue(defaultValue),
|
|
18120
18201
|
[defaultValue]
|
|
18121
18202
|
);
|
|
18122
|
-
const resolvedValue =
|
|
18203
|
+
const resolvedValue = React73.useMemo(
|
|
18123
18204
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18124
18205
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18125
18206
|
);
|
|
@@ -18150,7 +18231,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18150
18231
|
minDate: resolvedMinDate,
|
|
18151
18232
|
maxDate: resolvedMaxDate
|
|
18152
18233
|
});
|
|
18153
|
-
const handleOpenChange =
|
|
18234
|
+
const handleOpenChange = React73.useCallback(
|
|
18154
18235
|
(nextOpen) => {
|
|
18155
18236
|
if (isBlocked && nextOpen) return;
|
|
18156
18237
|
setIsOpen(nextOpen);
|
|
@@ -18160,7 +18241,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18160
18241
|
},
|
|
18161
18242
|
[isBlocked]
|
|
18162
18243
|
);
|
|
18163
|
-
const handleDone =
|
|
18244
|
+
const handleDone = React73.useCallback(() => {
|
|
18164
18245
|
if (isBlocked) return;
|
|
18165
18246
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18166
18247
|
handleOpenChange(false);
|
|
@@ -18172,11 +18253,11 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18172
18253
|
resolvedMaxDate,
|
|
18173
18254
|
resolvedMinDate
|
|
18174
18255
|
]);
|
|
18175
|
-
const handleTriggerClick =
|
|
18256
|
+
const handleTriggerClick = React73.useCallback(() => {
|
|
18176
18257
|
if (isBlocked) return;
|
|
18177
18258
|
setIsOpen(true);
|
|
18178
18259
|
}, [isBlocked]);
|
|
18179
|
-
const handleTriggerKeyDown =
|
|
18260
|
+
const handleTriggerKeyDown = React73.useCallback(
|
|
18180
18261
|
(event) => {
|
|
18181
18262
|
if (isBlocked) return;
|
|
18182
18263
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18186,7 +18267,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18186
18267
|
},
|
|
18187
18268
|
[isBlocked]
|
|
18188
18269
|
);
|
|
18189
|
-
|
|
18270
|
+
React73.useEffect(() => {
|
|
18190
18271
|
if (isBlocked) {
|
|
18191
18272
|
setIsOpen(false);
|
|
18192
18273
|
}
|
|
@@ -18263,12 +18344,12 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18263
18344
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18264
18345
|
|
|
18265
18346
|
// src/airbnb-fields/input/Input.tsx
|
|
18266
|
-
import * as
|
|
18347
|
+
import * as React74 from "react";
|
|
18267
18348
|
import { Eye as Eye2 } from "lucide-react";
|
|
18268
18349
|
import { useTranslation as useTranslation43 } from "react-i18next";
|
|
18269
18350
|
import { jsx as jsx182, jsxs as jsxs118 } from "react/jsx-runtime";
|
|
18270
18351
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18271
|
-
var AirbnbInput =
|
|
18352
|
+
var AirbnbInput = React74.forwardRef(
|
|
18272
18353
|
({
|
|
18273
18354
|
label,
|
|
18274
18355
|
topLabel,
|
|
@@ -18297,16 +18378,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18297
18378
|
...props
|
|
18298
18379
|
}, ref) => {
|
|
18299
18380
|
const { t } = useTranslation43();
|
|
18300
|
-
const generatedId =
|
|
18301
|
-
const inputRef =
|
|
18381
|
+
const generatedId = React74.useId();
|
|
18382
|
+
const inputRef = React74.useRef(null);
|
|
18302
18383
|
const inputId = id ?? generatedId;
|
|
18303
18384
|
const fieldId = `${inputId}-field`;
|
|
18304
18385
|
const labelId = `${inputId}-label`;
|
|
18305
18386
|
const errorId = `${inputId}-error`;
|
|
18306
18387
|
const accessibleLabel = placeholder ?? label;
|
|
18307
|
-
const [isFocused, setIsFocused] =
|
|
18308
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18309
|
-
const [currentValue, setCurrentValue] =
|
|
18388
|
+
const [isFocused, setIsFocused] = React74.useState(false);
|
|
18389
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React74.useState(false);
|
|
18390
|
+
const [currentValue, setCurrentValue] = React74.useState(
|
|
18310
18391
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18311
18392
|
);
|
|
18312
18393
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18319,16 +18400,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18319
18400
|
const triggerError = error ?? invalid;
|
|
18320
18401
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18321
18402
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18322
|
-
|
|
18403
|
+
React74.useLayoutEffect(() => {
|
|
18323
18404
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18324
18405
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18325
18406
|
}, [value]);
|
|
18326
|
-
|
|
18407
|
+
React74.useEffect(() => {
|
|
18327
18408
|
if (!isPasswordInput) {
|
|
18328
18409
|
setIsPasswordRevealed(false);
|
|
18329
18410
|
}
|
|
18330
18411
|
}, [isPasswordInput]);
|
|
18331
|
-
const setRefs =
|
|
18412
|
+
const setRefs = React74.useCallback(
|
|
18332
18413
|
(node) => {
|
|
18333
18414
|
inputRef.current = node;
|
|
18334
18415
|
if (node && value == null) {
|
|
@@ -18446,11 +18527,11 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18446
18527
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18447
18528
|
|
|
18448
18529
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18449
|
-
import * as
|
|
18530
|
+
import * as React80 from "react";
|
|
18450
18531
|
import { ChevronDown as ChevronDown6 } from "lucide-react";
|
|
18451
18532
|
|
|
18452
18533
|
// src/airbnb-fields/select/Select.tsx
|
|
18453
|
-
import * as
|
|
18534
|
+
import * as React79 from "react";
|
|
18454
18535
|
|
|
18455
18536
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18456
18537
|
import { jsx as jsx183, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
@@ -18795,10 +18876,10 @@ function AirbnbSelectMobileContent({
|
|
|
18795
18876
|
}
|
|
18796
18877
|
|
|
18797
18878
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18798
|
-
import * as
|
|
18879
|
+
import * as React75 from "react";
|
|
18799
18880
|
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
18800
18881
|
import { jsx as jsx187 } from "react/jsx-runtime";
|
|
18801
|
-
var AirbnbSelectTrigger =
|
|
18882
|
+
var AirbnbSelectTrigger = React75.forwardRef(
|
|
18802
18883
|
({
|
|
18803
18884
|
id,
|
|
18804
18885
|
open,
|
|
@@ -18863,7 +18944,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
|
|
|
18863
18944
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
18864
18945
|
|
|
18865
18946
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
18866
|
-
import * as
|
|
18947
|
+
import * as React76 from "react";
|
|
18867
18948
|
function useDesktopSelect({
|
|
18868
18949
|
isMobile: isMobile3,
|
|
18869
18950
|
isOpen,
|
|
@@ -18872,12 +18953,12 @@ function useDesktopSelect({
|
|
|
18872
18953
|
disabled,
|
|
18873
18954
|
onChange
|
|
18874
18955
|
}) {
|
|
18875
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
18876
|
-
const triggerRef =
|
|
18877
|
-
const listRef =
|
|
18878
|
-
const optionRefs =
|
|
18956
|
+
const [highlightedIndex, setHighlightedIndex] = React76.useState(-1);
|
|
18957
|
+
const triggerRef = React76.useRef(null);
|
|
18958
|
+
const listRef = React76.useRef(null);
|
|
18959
|
+
const optionRefs = React76.useRef([]);
|
|
18879
18960
|
const selectedIndex = getOptionIndex2(options, value);
|
|
18880
|
-
|
|
18961
|
+
React76.useEffect(() => {
|
|
18881
18962
|
if (!isOpen || isMobile3) return;
|
|
18882
18963
|
setHighlightedIndex((currentIndex) => {
|
|
18883
18964
|
if (currentIndex >= 0) {
|
|
@@ -18892,34 +18973,34 @@ function useDesktopSelect({
|
|
|
18892
18973
|
window.cancelAnimationFrame(frameId);
|
|
18893
18974
|
};
|
|
18894
18975
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
18895
|
-
|
|
18976
|
+
React76.useEffect(() => {
|
|
18896
18977
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
18897
18978
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
18898
18979
|
block: "nearest"
|
|
18899
18980
|
});
|
|
18900
18981
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
18901
|
-
|
|
18982
|
+
React76.useEffect(() => {
|
|
18902
18983
|
if (isOpen) return;
|
|
18903
18984
|
setHighlightedIndex(-1);
|
|
18904
18985
|
}, [isOpen]);
|
|
18905
|
-
const focusTrigger =
|
|
18986
|
+
const focusTrigger = React76.useCallback(() => {
|
|
18906
18987
|
triggerRef.current?.focus();
|
|
18907
18988
|
}, []);
|
|
18908
|
-
const handleSelect =
|
|
18989
|
+
const handleSelect = React76.useCallback(
|
|
18909
18990
|
(option) => {
|
|
18910
18991
|
if (option.isDisabled || disabled) return;
|
|
18911
18992
|
onChange?.(option);
|
|
18912
18993
|
},
|
|
18913
18994
|
[disabled, onChange]
|
|
18914
18995
|
);
|
|
18915
|
-
const openMenu =
|
|
18996
|
+
const openMenu = React76.useCallback(
|
|
18916
18997
|
(targetIndex) => {
|
|
18917
18998
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
18918
18999
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
18919
19000
|
},
|
|
18920
19001
|
[options, selectedIndex]
|
|
18921
19002
|
);
|
|
18922
|
-
const handleTriggerKeyDown =
|
|
19003
|
+
const handleTriggerKeyDown = React76.useCallback(
|
|
18923
19004
|
(event, onOpen) => {
|
|
18924
19005
|
if (disabled) return;
|
|
18925
19006
|
if (event.key === "ArrowDown") {
|
|
@@ -18944,7 +19025,7 @@ function useDesktopSelect({
|
|
|
18944
19025
|
},
|
|
18945
19026
|
[disabled, openMenu, options, selectedIndex]
|
|
18946
19027
|
);
|
|
18947
|
-
const handleMenuKeyDown =
|
|
19028
|
+
const handleMenuKeyDown = React76.useCallback(
|
|
18948
19029
|
(event, onClose) => {
|
|
18949
19030
|
if (event.key === "Escape") {
|
|
18950
19031
|
event.preventDefault();
|
|
@@ -18994,7 +19075,7 @@ function useDesktopSelect({
|
|
|
18994
19075
|
},
|
|
18995
19076
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
18996
19077
|
);
|
|
18997
|
-
const setOptionRef =
|
|
19078
|
+
const setOptionRef = React76.useCallback(
|
|
18998
19079
|
(index, node) => {
|
|
18999
19080
|
optionRefs.current[index] = node;
|
|
19000
19081
|
},
|
|
@@ -19014,23 +19095,23 @@ function useDesktopSelect({
|
|
|
19014
19095
|
}
|
|
19015
19096
|
|
|
19016
19097
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19017
|
-
import * as
|
|
19098
|
+
import * as React77 from "react";
|
|
19018
19099
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19019
|
-
const [pendingValue, setPendingValue] =
|
|
19100
|
+
const [pendingValue, setPendingValue] = React77.useState(
|
|
19020
19101
|
value ?? null
|
|
19021
19102
|
);
|
|
19022
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19023
|
-
const mobileListRef =
|
|
19024
|
-
const scrollSettleTimeoutRef =
|
|
19025
|
-
const scrollAnimationFrameRef =
|
|
19026
|
-
const getTargetIndex =
|
|
19103
|
+
const [mobileScrollTop, setMobileScrollTop] = React77.useState(0);
|
|
19104
|
+
const mobileListRef = React77.useRef(null);
|
|
19105
|
+
const scrollSettleTimeoutRef = React77.useRef(null);
|
|
19106
|
+
const scrollAnimationFrameRef = React77.useRef(null);
|
|
19107
|
+
const getTargetIndex = React77.useCallback(
|
|
19027
19108
|
(targetValue) => {
|
|
19028
19109
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19029
19110
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19030
19111
|
},
|
|
19031
19112
|
[options]
|
|
19032
19113
|
);
|
|
19033
|
-
const syncScrollPosition =
|
|
19114
|
+
const syncScrollPosition = React77.useCallback(
|
|
19034
19115
|
(targetValue, behavior = "instant") => {
|
|
19035
19116
|
const targetIndex = getTargetIndex(targetValue);
|
|
19036
19117
|
if (targetIndex < 0) return;
|
|
@@ -19049,27 +19130,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19049
19130
|
},
|
|
19050
19131
|
[getTargetIndex, options]
|
|
19051
19132
|
);
|
|
19052
|
-
const clearScrollSettleTimeout =
|
|
19133
|
+
const clearScrollSettleTimeout = React77.useCallback(() => {
|
|
19053
19134
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19054
19135
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19055
19136
|
scrollSettleTimeoutRef.current = null;
|
|
19056
19137
|
}, []);
|
|
19057
|
-
const clearScrollAnimationFrame =
|
|
19138
|
+
const clearScrollAnimationFrame = React77.useCallback(() => {
|
|
19058
19139
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19059
19140
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19060
19141
|
scrollAnimationFrameRef.current = null;
|
|
19061
19142
|
}, []);
|
|
19062
|
-
|
|
19143
|
+
React77.useEffect(
|
|
19063
19144
|
() => () => {
|
|
19064
19145
|
clearScrollSettleTimeout();
|
|
19065
19146
|
clearScrollAnimationFrame();
|
|
19066
19147
|
},
|
|
19067
19148
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19068
19149
|
);
|
|
19069
|
-
|
|
19150
|
+
React77.useEffect(() => {
|
|
19070
19151
|
setPendingValue(value ?? null);
|
|
19071
19152
|
}, [value]);
|
|
19072
|
-
|
|
19153
|
+
React77.useLayoutEffect(() => {
|
|
19073
19154
|
if (!isMobile3 || !isOpen) return;
|
|
19074
19155
|
const frameId = window.requestAnimationFrame(() => {
|
|
19075
19156
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19078,7 +19159,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19078
19159
|
window.cancelAnimationFrame(frameId);
|
|
19079
19160
|
};
|
|
19080
19161
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19081
|
-
const settleScroll =
|
|
19162
|
+
const settleScroll = React77.useCallback(() => {
|
|
19082
19163
|
if (!mobileListRef.current) return;
|
|
19083
19164
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19084
19165
|
const nextOption = options[nextIndex];
|
|
@@ -19090,13 +19171,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19090
19171
|
}
|
|
19091
19172
|
setPendingValue(nextOption);
|
|
19092
19173
|
}, [options, pendingValue]);
|
|
19093
|
-
const scheduleScrollSettle =
|
|
19174
|
+
const scheduleScrollSettle = React77.useCallback(() => {
|
|
19094
19175
|
clearScrollSettleTimeout();
|
|
19095
19176
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19096
19177
|
settleScroll();
|
|
19097
19178
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19098
19179
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19099
|
-
const handleScroll =
|
|
19180
|
+
const handleScroll = React77.useCallback(() => {
|
|
19100
19181
|
if (!mobileListRef.current) return;
|
|
19101
19182
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19102
19183
|
clearScrollAnimationFrame();
|
|
@@ -19106,7 +19187,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19106
19187
|
});
|
|
19107
19188
|
scheduleScrollSettle();
|
|
19108
19189
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19109
|
-
const focusOptionByIndex =
|
|
19190
|
+
const focusOptionByIndex = React77.useCallback(
|
|
19110
19191
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19111
19192
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19112
19193
|
const option = options[index];
|
|
@@ -19124,7 +19205,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19124
19205
|
},
|
|
19125
19206
|
[options, scheduleScrollSettle]
|
|
19126
19207
|
);
|
|
19127
|
-
const handleOptionClick =
|
|
19208
|
+
const handleOptionClick = React77.useCallback(
|
|
19128
19209
|
(option) => {
|
|
19129
19210
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19130
19211
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19133,7 +19214,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19133
19214
|
},
|
|
19134
19215
|
[disabled, focusOptionByIndex, options]
|
|
19135
19216
|
);
|
|
19136
|
-
const moveByStep =
|
|
19217
|
+
const moveByStep = React77.useCallback(
|
|
19137
19218
|
(step) => {
|
|
19138
19219
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19139
19220
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19145,7 +19226,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19145
19226
|
},
|
|
19146
19227
|
[focusOptionByIndex, options, pendingValue]
|
|
19147
19228
|
);
|
|
19148
|
-
const moveToBoundary =
|
|
19229
|
+
const moveToBoundary = React77.useCallback(
|
|
19149
19230
|
(boundary) => {
|
|
19150
19231
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19151
19232
|
if (targetIndex >= 0) {
|
|
@@ -19154,7 +19235,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19154
19235
|
},
|
|
19155
19236
|
[focusOptionByIndex, options]
|
|
19156
19237
|
);
|
|
19157
|
-
const syncPendingValue =
|
|
19238
|
+
const syncPendingValue = React77.useCallback(
|
|
19158
19239
|
(nextValue) => {
|
|
19159
19240
|
const normalizedValue = nextValue ?? null;
|
|
19160
19241
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19182,9 +19263,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19182
19263
|
}
|
|
19183
19264
|
|
|
19184
19265
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19185
|
-
import * as
|
|
19266
|
+
import * as React78 from "react";
|
|
19186
19267
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19187
|
-
const reactId =
|
|
19268
|
+
const reactId = React78.useId().replace(/:/g, "");
|
|
19188
19269
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19189
19270
|
const triggerId = `${baseId}-trigger`;
|
|
19190
19271
|
const labelId = `${baseId}-label`;
|
|
@@ -19194,7 +19275,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19194
19275
|
const listboxId = `${baseId}-listbox`;
|
|
19195
19276
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19196
19277
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19197
|
-
const getOptionId2 =
|
|
19278
|
+
const getOptionId2 = React78.useCallback(
|
|
19198
19279
|
(index) => `${baseId}-option-${index}`,
|
|
19199
19280
|
[baseId]
|
|
19200
19281
|
);
|
|
@@ -19213,7 +19294,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19213
19294
|
|
|
19214
19295
|
// src/airbnb-fields/select/Select.tsx
|
|
19215
19296
|
import { jsx as jsx188, jsxs as jsxs122 } from "react/jsx-runtime";
|
|
19216
|
-
var AirbnbSelect =
|
|
19297
|
+
var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
19217
19298
|
options = [],
|
|
19218
19299
|
value,
|
|
19219
19300
|
onChange,
|
|
@@ -19240,8 +19321,8 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19240
19321
|
filterOption
|
|
19241
19322
|
}, ref) {
|
|
19242
19323
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19243
|
-
const [isOpen, setIsOpen] =
|
|
19244
|
-
const containerRef =
|
|
19324
|
+
const [isOpen, setIsOpen] = React79.useState(false);
|
|
19325
|
+
const containerRef = React79.useRef(null);
|
|
19245
19326
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19246
19327
|
const hasValue = Boolean(value);
|
|
19247
19328
|
const helperText = placeholder ?? label;
|
|
@@ -19303,12 +19384,12 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19303
19384
|
onOutsideClick: () => setIsOpen(false),
|
|
19304
19385
|
isDisabled: !isOpen || isMobile3
|
|
19305
19386
|
});
|
|
19306
|
-
|
|
19387
|
+
React79.useEffect(() => {
|
|
19307
19388
|
if (isBlocked) {
|
|
19308
19389
|
setIsOpen(false);
|
|
19309
19390
|
}
|
|
19310
19391
|
}, [isBlocked]);
|
|
19311
|
-
|
|
19392
|
+
React79.useEffect(
|
|
19312
19393
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19313
19394
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19314
19395
|
return;
|
|
@@ -19320,7 +19401,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19320
19401
|
},
|
|
19321
19402
|
[onChange, filteredOptions, value]
|
|
19322
19403
|
);
|
|
19323
|
-
const handleMobileOpenChange =
|
|
19404
|
+
const handleMobileOpenChange = React79.useCallback(
|
|
19324
19405
|
(nextOpen) => {
|
|
19325
19406
|
if (isBlocked && nextOpen) return;
|
|
19326
19407
|
setIsOpen(nextOpen);
|
|
@@ -19331,7 +19412,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19331
19412
|
},
|
|
19332
19413
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19333
19414
|
);
|
|
19334
|
-
const handleMobileDone =
|
|
19415
|
+
const handleMobileDone = React79.useCallback(() => {
|
|
19335
19416
|
if (isBlocked) return;
|
|
19336
19417
|
const finalOption = pendingValue;
|
|
19337
19418
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19340,7 +19421,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19340
19421
|
setIsOpen(false);
|
|
19341
19422
|
focusTrigger();
|
|
19342
19423
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19343
|
-
const handleTriggerClick =
|
|
19424
|
+
const handleTriggerClick = React79.useCallback(() => {
|
|
19344
19425
|
if (isBlocked) return;
|
|
19345
19426
|
setIsOpen((prev) => {
|
|
19346
19427
|
const nextOpen = !prev;
|
|
@@ -19512,7 +19593,7 @@ function formatPhoneCodeOptionLabel2(option) {
|
|
|
19512
19593
|
const value = String(option.value);
|
|
19513
19594
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19514
19595
|
}
|
|
19515
|
-
var AirbnbPhoneField =
|
|
19596
|
+
var AirbnbPhoneField = React80.forwardRef(
|
|
19516
19597
|
({
|
|
19517
19598
|
label,
|
|
19518
19599
|
topLabel,
|
|
@@ -19536,9 +19617,9 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19536
19617
|
codePlaceholder = "+00",
|
|
19537
19618
|
defaultCode
|
|
19538
19619
|
}, ref) => {
|
|
19539
|
-
const inputId =
|
|
19620
|
+
const inputId = React80.useId();
|
|
19540
19621
|
const effectiveCode = value?.code || defaultCode || "";
|
|
19541
|
-
const codeOptions =
|
|
19622
|
+
const codeOptions = React80.useMemo(
|
|
19542
19623
|
() => options.map((option) => ({
|
|
19543
19624
|
value: option.value,
|
|
19544
19625
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19546,7 +19627,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19546
19627
|
})),
|
|
19547
19628
|
[options]
|
|
19548
19629
|
);
|
|
19549
|
-
const selectedCodeOption =
|
|
19630
|
+
const selectedCodeOption = React80.useMemo(
|
|
19550
19631
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19551
19632
|
[codeOptions, effectiveCode]
|
|
19552
19633
|
);
|
|
@@ -19682,7 +19763,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19682
19763
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19683
19764
|
|
|
19684
19765
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19685
|
-
import * as
|
|
19766
|
+
import * as React81 from "react";
|
|
19686
19767
|
import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
|
|
19687
19768
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
19688
19769
|
import { useCallback as useCallback57 } from "react";
|
|
@@ -19726,13 +19807,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19726
19807
|
loadingMessage
|
|
19727
19808
|
}, ref) => {
|
|
19728
19809
|
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 =
|
|
19810
|
+
const reactId = React81.useId();
|
|
19811
|
+
const [open, setOpen] = React81.useState(false);
|
|
19812
|
+
const [internalSearchValue, setInternalSearchValue] = React81.useState("");
|
|
19813
|
+
const [highlightedIndex, setHighlightedIndex] = React81.useState(-1);
|
|
19814
|
+
const containerRef = React81.useRef(null);
|
|
19815
|
+
const triggerRef = React81.useRef(null);
|
|
19816
|
+
const inputRef = React81.useRef(null);
|
|
19736
19817
|
const listboxId = `${reactId}-listbox`;
|
|
19737
19818
|
const labelId = `${reactId}-label`;
|
|
19738
19819
|
const valueId = `${reactId}-value`;
|
|
@@ -19741,13 +19822,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19741
19822
|
const searchInputId = `${reactId}-search`;
|
|
19742
19823
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19743
19824
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19744
|
-
const visibleOptions =
|
|
19825
|
+
const visibleOptions = React81.useMemo(() => {
|
|
19745
19826
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19746
19827
|
return options;
|
|
19747
19828
|
}
|
|
19748
19829
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19749
19830
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19750
|
-
const selectedIndex =
|
|
19831
|
+
const selectedIndex = React81.useMemo(
|
|
19751
19832
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19752
19833
|
[value?.value, visibleOptions]
|
|
19753
19834
|
);
|
|
@@ -19773,7 +19854,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19773
19854
|
},
|
|
19774
19855
|
[handleOnOpenChange]
|
|
19775
19856
|
);
|
|
19776
|
-
|
|
19857
|
+
React81.useEffect(() => {
|
|
19777
19858
|
if (isBlocked) {
|
|
19778
19859
|
setSelectOpen(false);
|
|
19779
19860
|
return;
|
|
@@ -19786,7 +19867,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19786
19867
|
window.cancelAnimationFrame(frameId);
|
|
19787
19868
|
};
|
|
19788
19869
|
}, [isBlocked, open, setSelectOpen]);
|
|
19789
|
-
|
|
19870
|
+
React81.useEffect(() => {
|
|
19790
19871
|
if (!open) {
|
|
19791
19872
|
setHighlightedIndex(-1);
|
|
19792
19873
|
return;
|
|
@@ -19881,7 +19962,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19881
19962
|
onOptionHover: setHighlightedIndex
|
|
19882
19963
|
}
|
|
19883
19964
|
);
|
|
19884
|
-
|
|
19965
|
+
React81.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
19885
19966
|
return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
19886
19967
|
name && /* @__PURE__ */ jsx190("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19887
19968
|
/* @__PURE__ */ jsx190(
|
|
@@ -19959,7 +20040,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19959
20040
|
) : null
|
|
19960
20041
|
] });
|
|
19961
20042
|
};
|
|
19962
|
-
var AirbnbSearchableSelect =
|
|
20043
|
+
var AirbnbSearchableSelect = React81.forwardRef(
|
|
19963
20044
|
AirbnbSearchableSelectInternal
|
|
19964
20045
|
);
|
|
19965
20046
|
function AirbnbSearchableSelectContent({
|
|
@@ -19986,9 +20067,9 @@ function AirbnbSearchableSelectContent({
|
|
|
19986
20067
|
onOptionClick,
|
|
19987
20068
|
onOptionHover
|
|
19988
20069
|
}) {
|
|
19989
|
-
const listRef =
|
|
19990
|
-
const lastLoadMoreOptionsLengthRef =
|
|
19991
|
-
const previousHighlightedIndexRef =
|
|
20070
|
+
const listRef = React81.useRef(null);
|
|
20071
|
+
const lastLoadMoreOptionsLengthRef = React81.useRef(null);
|
|
20072
|
+
const previousHighlightedIndexRef = React81.useRef(highlightedIndex);
|
|
19992
20073
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
19993
20074
|
const virtualizer = useVirtualizer3({
|
|
19994
20075
|
count: rowCount,
|
|
@@ -19999,7 +20080,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19999
20080
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20000
20081
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20001
20082
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20002
|
-
|
|
20083
|
+
React81.useEffect(() => {
|
|
20003
20084
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20004
20085
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20005
20086
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20007,7 +20088,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20007
20088
|
onLoadMore?.();
|
|
20008
20089
|
}
|
|
20009
20090
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20010
|
-
|
|
20091
|
+
React81.useEffect(() => {
|
|
20011
20092
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20012
20093
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20013
20094
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -20125,11 +20206,11 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20125
20206
|
}
|
|
20126
20207
|
|
|
20127
20208
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20128
|
-
import * as
|
|
20209
|
+
import * as React82 from "react";
|
|
20129
20210
|
import { useTranslation as useTranslation44 } from "react-i18next";
|
|
20130
20211
|
import { Search as Search5, X as X11 } from "lucide-react";
|
|
20131
20212
|
import { jsx as jsx191, jsxs as jsxs125 } from "react/jsx-runtime";
|
|
20132
|
-
var AirbnbSearchInput =
|
|
20213
|
+
var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20133
20214
|
const { t } = useTranslation44();
|
|
20134
20215
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20135
20216
|
return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
@@ -20167,11 +20248,11 @@ var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20167
20248
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20168
20249
|
|
|
20169
20250
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20170
|
-
import * as
|
|
20251
|
+
import * as React83 from "react";
|
|
20171
20252
|
import * as SwitchPrimitives2 from "@radix-ui/react-switch";
|
|
20172
20253
|
import { Check as Check7 } from "lucide-react";
|
|
20173
20254
|
import { Fragment as Fragment18, jsx as jsx192, jsxs as jsxs126 } from "react/jsx-runtime";
|
|
20174
|
-
var AirbnbSwitch =
|
|
20255
|
+
var AirbnbSwitch = React83.forwardRef(
|
|
20175
20256
|
({
|
|
20176
20257
|
className,
|
|
20177
20258
|
value,
|
|
@@ -20185,7 +20266,7 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20185
20266
|
wrapperClassName,
|
|
20186
20267
|
...props
|
|
20187
20268
|
}, ref) => {
|
|
20188
|
-
const generatedId =
|
|
20269
|
+
const generatedId = React83.useId();
|
|
20189
20270
|
const fieldId = id || generatedId;
|
|
20190
20271
|
const switchElement = /* @__PURE__ */ jsx192(
|
|
20191
20272
|
SwitchPrimitives2.Root,
|