@chekinapp/ui 0.0.136 → 0.0.138
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 +556 -605
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +534 -584
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -13227,21 +13227,7 @@ function useSelectState(params) {
|
|
|
13227
13227
|
);
|
|
13228
13228
|
return !existsInOptions && !existsInSelected;
|
|
13229
13229
|
}, [isCreatable, trimmedInput, isValidNewOption, options, selectedOptions]);
|
|
13230
|
-
const sssDebugHighlightCount = React48.useRef(0);
|
|
13231
13230
|
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
|
-
}
|
|
13245
13231
|
if (!isOpen || filteredOptions.length === 0) {
|
|
13246
13232
|
setHighlightedIndex(-1);
|
|
13247
13233
|
return;
|
|
@@ -13267,21 +13253,8 @@ function useSelectState(params) {
|
|
|
13267
13253
|
(option) => isOptionSelected2(option, selectedOptions),
|
|
13268
13254
|
[isOptionSelected2, selectedOptions]
|
|
13269
13255
|
);
|
|
13270
|
-
const sssDebugSelectOptionCount = React48.useRef(0);
|
|
13271
13256
|
const selectOption = React48.useCallback(
|
|
13272
13257
|
(option) => {
|
|
13273
|
-
sssDebugSelectOptionCount.current += 1;
|
|
13274
|
-
console.log(
|
|
13275
|
-
`[SC-debug] selectOption #${sssDebugSelectOptionCount.current}`,
|
|
13276
|
-
{ value: option.value, isMulti, currentSelectedCount: selectedOptions.length }
|
|
13277
|
-
);
|
|
13278
|
-
console.trace("[SC-debug] selectOption caller stack");
|
|
13279
|
-
if (sssDebugSelectOptionCount.current === 5) {
|
|
13280
|
-
console.warn(
|
|
13281
|
-
"[SC-debug] selectOption fired 5x \u2014 pausing. Step out to see the caller."
|
|
13282
|
-
);
|
|
13283
|
-
debugger;
|
|
13284
|
-
}
|
|
13285
13258
|
if (!isOptionEnabled(option, isOptionDisabled)) return;
|
|
13286
13259
|
if (isMulti) {
|
|
13287
13260
|
const exists = isValueSelected(option);
|
|
@@ -14741,11 +14714,31 @@ var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiS
|
|
|
14741
14714
|
});
|
|
14742
14715
|
|
|
14743
14716
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14744
|
-
import * as
|
|
14717
|
+
import * as React58 from "react";
|
|
14745
14718
|
import { useTranslation as useTranslation36 } from "react-i18next";
|
|
14746
14719
|
|
|
14720
|
+
// src/dashboard/select-checkboxes/VisualCheckbox.tsx
|
|
14721
|
+
import { Check as Check7 } from "lucide-react";
|
|
14722
|
+
import { jsx as jsx163 } from "react/jsx-runtime";
|
|
14723
|
+
function VisualCheckbox({ checked, disabled, className }) {
|
|
14724
|
+
return /* @__PURE__ */ jsx163(
|
|
14725
|
+
"span",
|
|
14726
|
+
{
|
|
14727
|
+
"aria-hidden": "true",
|
|
14728
|
+
"data-state": checked ? "checked" : "unchecked",
|
|
14729
|
+
className: cn(
|
|
14730
|
+
"checkbox__control pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-solid",
|
|
14731
|
+
checked ? "border-[var(--checkbox-checked-border)] bg-[var(--checkbox-checked-bg)] text-[var(--checkbox-check-color)]" : "border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]",
|
|
14732
|
+
disabled && "opacity-50",
|
|
14733
|
+
className
|
|
14734
|
+
),
|
|
14735
|
+
children: checked && /* @__PURE__ */ jsx163(Check7, { className: "checkbox__icon h-3 w-3" })
|
|
14736
|
+
}
|
|
14737
|
+
);
|
|
14738
|
+
}
|
|
14739
|
+
|
|
14747
14740
|
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
14748
|
-
import { jsx as
|
|
14741
|
+
import { jsx as jsx164, jsxs as jsxs102 } from "react/jsx-runtime";
|
|
14749
14742
|
function SelectCheckboxOption(props) {
|
|
14750
14743
|
const {
|
|
14751
14744
|
option,
|
|
@@ -14758,7 +14751,7 @@ function SelectCheckboxOption(props) {
|
|
|
14758
14751
|
onHover,
|
|
14759
14752
|
innerRef
|
|
14760
14753
|
} = props;
|
|
14761
|
-
return /* @__PURE__ */
|
|
14754
|
+
return /* @__PURE__ */ jsxs102(
|
|
14762
14755
|
"button",
|
|
14763
14756
|
{
|
|
14764
14757
|
id,
|
|
@@ -14778,31 +14771,24 @@ function SelectCheckboxOption(props) {
|
|
|
14778
14771
|
isSelected && "bg-[var(--chekin-color-surface-autocomplete)] font-semibold text-[var(--chekin-color-brand-blue)]",
|
|
14779
14772
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
14780
14773
|
),
|
|
14781
|
-
children:
|
|
14782
|
-
/* @__PURE__ */
|
|
14783
|
-
|
|
14784
|
-
|
|
14774
|
+
children: [
|
|
14775
|
+
/* @__PURE__ */ jsx164(VisualCheckbox, { checked: isSelected, disabled: isDisabled }),
|
|
14776
|
+
/* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
14777
|
+
/* @__PURE__ */ jsx164("span", { className: "block break-words", children: option.label }),
|
|
14778
|
+
option.description && /* @__PURE__ */ jsx164("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
14779
|
+
] })
|
|
14780
|
+
]
|
|
14785
14781
|
}
|
|
14786
14782
|
);
|
|
14787
14783
|
}
|
|
14788
14784
|
|
|
14789
14785
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
14790
|
-
import * as React58 from "react";
|
|
14791
14786
|
import { ChevronDown as ChevronDown3 } from "lucide-react";
|
|
14792
14787
|
import { useTranslation as useTranslation35 } from "react-i18next";
|
|
14793
|
-
import { jsx as
|
|
14788
|
+
import { jsx as jsx165, jsxs as jsxs103 } from "react/jsx-runtime";
|
|
14794
14789
|
function createCountTrigger(opts) {
|
|
14795
14790
|
const { getValueText, getTotalCount } = opts;
|
|
14796
14791
|
function CountTrigger(props) {
|
|
14797
|
-
const ctDebugRenderCount = React58.useRef(0);
|
|
14798
|
-
ctDebugRenderCount.current += 1;
|
|
14799
|
-
React58.useEffect(() => {
|
|
14800
|
-
console.log("[SC-debug] CountTrigger MOUNTED");
|
|
14801
|
-
return () => {
|
|
14802
|
-
console.log("[SC-debug] CountTrigger UNMOUNTED");
|
|
14803
|
-
};
|
|
14804
|
-
}, []);
|
|
14805
|
-
console.log(`[SC-debug] CountTrigger render #${ctDebugRenderCount.current}`);
|
|
14806
14792
|
const { t } = useTranslation35();
|
|
14807
14793
|
const {
|
|
14808
14794
|
triggerId,
|
|
@@ -14852,9 +14838,9 @@ function createCountTrigger(opts) {
|
|
|
14852
14838
|
loading && "!cursor-progress"
|
|
14853
14839
|
),
|
|
14854
14840
|
children: [
|
|
14855
|
-
leftIcon && /* @__PURE__ */
|
|
14856
|
-
/* @__PURE__ */
|
|
14857
|
-
/* @__PURE__ */
|
|
14841
|
+
leftIcon && /* @__PURE__ */ jsx165("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__ */ jsx165("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
14842
|
+
/* @__PURE__ */ jsx165("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
14843
|
+
/* @__PURE__ */ jsx165("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx165(
|
|
14858
14844
|
ChevronDown3,
|
|
14859
14845
|
{
|
|
14860
14846
|
size: 16,
|
|
@@ -14872,9 +14858,9 @@ function createCountTrigger(opts) {
|
|
|
14872
14858
|
}
|
|
14873
14859
|
|
|
14874
14860
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
14875
|
-
import { jsx as
|
|
14861
|
+
import { jsx as jsx166, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
14876
14862
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
14877
|
-
return /* @__PURE__ */
|
|
14863
|
+
return /* @__PURE__ */ jsxs104(
|
|
14878
14864
|
"button",
|
|
14879
14865
|
{
|
|
14880
14866
|
type: "button",
|
|
@@ -14884,19 +14870,22 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14884
14870
|
"flex w-full items-center gap-3 border-0 border-b border-[#f2f4f8] bg-white px-4 py-[14px] text-left text-[16px] font-bold leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors hover:bg-[var(--chekin-color-surface-pressed)]",
|
|
14885
14871
|
disabled && "cursor-default opacity-40"
|
|
14886
14872
|
),
|
|
14887
|
-
children:
|
|
14873
|
+
children: [
|
|
14874
|
+
/* @__PURE__ */ jsx166(VisualCheckbox, { checked, disabled }),
|
|
14875
|
+
/* @__PURE__ */ jsx166("span", { className: "flex-1", children: label })
|
|
14876
|
+
]
|
|
14888
14877
|
}
|
|
14889
14878
|
);
|
|
14890
14879
|
}
|
|
14891
14880
|
|
|
14892
14881
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14893
|
-
import { Fragment as Fragment16, jsx as
|
|
14882
|
+
import { Fragment as Fragment16, jsx as jsx167 } from "react/jsx-runtime";
|
|
14894
14883
|
function hasPaginationProps(props) {
|
|
14895
14884
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
|
|
14896
14885
|
}
|
|
14897
14886
|
function makeTriggerSlot(render) {
|
|
14898
14887
|
function CustomTrigger(props) {
|
|
14899
|
-
return /* @__PURE__ */
|
|
14888
|
+
return /* @__PURE__ */ jsx167(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
|
|
14900
14889
|
}
|
|
14901
14890
|
return CustomTrigger;
|
|
14902
14891
|
}
|
|
@@ -14922,64 +14911,25 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14922
14911
|
const isPaginated = hasPaginationProps(
|
|
14923
14912
|
paginationAndRest
|
|
14924
14913
|
);
|
|
14925
|
-
const
|
|
14926
|
-
const scDebugPrevPropsRef = React59.useRef({});
|
|
14927
|
-
scDebugRenderCount.current += 1;
|
|
14928
|
-
{
|
|
14929
|
-
const current = {
|
|
14930
|
-
value,
|
|
14931
|
-
defaultValue,
|
|
14932
|
-
onChange,
|
|
14933
|
-
trigger,
|
|
14934
|
-
userComponents,
|
|
14935
|
-
valueText,
|
|
14936
|
-
filterOption,
|
|
14937
|
-
rawOptions,
|
|
14938
|
-
onSearchChange
|
|
14939
|
-
};
|
|
14940
|
-
const prev = scDebugPrevPropsRef.current;
|
|
14941
|
-
const changed = [];
|
|
14942
|
-
for (const key of Object.keys(current)) {
|
|
14943
|
-
if (prev[key] !== current[key]) changed.push(key);
|
|
14944
|
-
}
|
|
14945
|
-
console.log(
|
|
14946
|
-
`[SC-debug] SelectCheckboxes render #${scDebugRenderCount.current}`,
|
|
14947
|
-
{ changed, isPaginated, isControlled: value !== void 0 }
|
|
14948
|
-
);
|
|
14949
|
-
scDebugPrevPropsRef.current = current;
|
|
14950
|
-
if (scDebugRenderCount.current === 30) {
|
|
14951
|
-
console.warn(
|
|
14952
|
-
"[SC-debug] hit 30 renders of SelectCheckboxes \u2014 opening debugger"
|
|
14953
|
-
);
|
|
14954
|
-
debugger;
|
|
14955
|
-
}
|
|
14956
|
-
}
|
|
14957
|
-
const [inputValue, setInputValue] = React59.useState("");
|
|
14914
|
+
const [inputValue, setInputValue] = React58.useState("");
|
|
14958
14915
|
const isControlled = value !== void 0;
|
|
14959
|
-
const [internalValue, setInternalValue] =
|
|
14916
|
+
const [internalValue, setInternalValue] = React58.useState(
|
|
14960
14917
|
() => defaultValue ?? []
|
|
14961
14918
|
);
|
|
14962
14919
|
const currentValue = isControlled ? value : internalValue;
|
|
14963
|
-
const selected =
|
|
14964
|
-
const
|
|
14965
|
-
const handleChange = React59.useCallback(
|
|
14920
|
+
const selected = React58.useMemo(() => currentValue ?? [], [currentValue]);
|
|
14921
|
+
const handleChange = React58.useCallback(
|
|
14966
14922
|
(next, meta) => {
|
|
14967
|
-
scDebugHandleChangeCount.current += 1;
|
|
14968
|
-
console.log(
|
|
14969
|
-
`[SC-debug] handleChange #${scDebugHandleChangeCount.current}`,
|
|
14970
|
-
{ action: meta?.action, nextLength: next.length, isControlled }
|
|
14971
|
-
);
|
|
14972
|
-
console.trace("[SC-debug] handleChange caller stack");
|
|
14973
14923
|
if (!isControlled) setInternalValue(next);
|
|
14974
14924
|
onChange?.(next, meta);
|
|
14975
14925
|
},
|
|
14976
14926
|
[isControlled, onChange]
|
|
14977
14927
|
);
|
|
14978
|
-
const flatRawOptions =
|
|
14928
|
+
const flatRawOptions = React58.useMemo(
|
|
14979
14929
|
() => flattenGroupedOptions(rawOptions),
|
|
14980
14930
|
[rawOptions]
|
|
14981
14931
|
);
|
|
14982
|
-
const filteredGrouped =
|
|
14932
|
+
const filteredGrouped = React58.useMemo(() => {
|
|
14983
14933
|
const trimmed = inputValue.trim();
|
|
14984
14934
|
if (!trimmed) return rawOptions;
|
|
14985
14935
|
return rawOptions.map((item) => {
|
|
@@ -14990,7 +14940,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14990
14940
|
return filterOption(item, trimmed) ? item : null;
|
|
14991
14941
|
}).filter((item) => item !== null);
|
|
14992
14942
|
}, [rawOptions, inputValue, filterOption]);
|
|
14993
|
-
const filteredFlat =
|
|
14943
|
+
const filteredFlat = React58.useMemo(
|
|
14994
14944
|
() => flattenGroupedOptions(filteredGrouped),
|
|
14995
14945
|
[filteredGrouped]
|
|
14996
14946
|
);
|
|
@@ -14998,7 +14948,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14998
14948
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
14999
14949
|
}, 0);
|
|
15000
14950
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
15001
|
-
const handleToggleAll =
|
|
14951
|
+
const handleToggleAll = React58.useCallback(() => {
|
|
15002
14952
|
if (allVisibleSelected) {
|
|
15003
14953
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
15004
14954
|
handleChange(
|
|
@@ -15013,19 +14963,18 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15013
14963
|
}
|
|
15014
14964
|
handleChange(merged, { action: "select" });
|
|
15015
14965
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
15016
|
-
const valueTextRef =
|
|
15017
|
-
const totalCountRef =
|
|
14966
|
+
const valueTextRef = React58.useRef(valueText);
|
|
14967
|
+
const totalCountRef = React58.useRef(flatRawOptions.length);
|
|
15018
14968
|
valueTextRef.current = valueText;
|
|
15019
14969
|
totalCountRef.current = flatRawOptions.length;
|
|
15020
|
-
const Control =
|
|
15021
|
-
console.log("[SC-debug] (re)creating Control component", { hasCustomTrigger: !!trigger });
|
|
14970
|
+
const Control = React58.useMemo(() => {
|
|
15022
14971
|
if (trigger) return makeTriggerSlot(trigger);
|
|
15023
14972
|
return createCountTrigger({
|
|
15024
14973
|
getValueText: () => valueTextRef.current,
|
|
15025
14974
|
getTotalCount: () => totalCountRef.current
|
|
15026
14975
|
});
|
|
15027
14976
|
}, [trigger]);
|
|
15028
|
-
const components =
|
|
14977
|
+
const components = React58.useMemo(
|
|
15029
14978
|
() => ({
|
|
15030
14979
|
...userComponents,
|
|
15031
14980
|
Control,
|
|
@@ -15033,7 +14982,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15033
14982
|
}),
|
|
15034
14983
|
[userComponents, Control]
|
|
15035
14984
|
);
|
|
15036
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */
|
|
14985
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ jsx167(
|
|
15037
14986
|
SelectAllRow,
|
|
15038
14987
|
{
|
|
15039
14988
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -15041,7 +14990,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15041
14990
|
onToggle: handleToggleAll
|
|
15042
14991
|
}
|
|
15043
14992
|
) : void 0;
|
|
15044
|
-
const handleInputChange =
|
|
14993
|
+
const handleInputChange = React58.useCallback(
|
|
15045
14994
|
(next) => {
|
|
15046
14995
|
setInputValue(next);
|
|
15047
14996
|
onSearchChange?.(next);
|
|
@@ -15062,7 +15011,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15062
15011
|
isMulti: true
|
|
15063
15012
|
};
|
|
15064
15013
|
if (isPaginated) {
|
|
15065
|
-
return /* @__PURE__ */
|
|
15014
|
+
return /* @__PURE__ */ jsx167(
|
|
15066
15015
|
InfiniteScrollSelect,
|
|
15067
15016
|
{
|
|
15068
15017
|
ref,
|
|
@@ -15073,7 +15022,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15073
15022
|
}
|
|
15074
15023
|
);
|
|
15075
15024
|
}
|
|
15076
|
-
return /* @__PURE__ */
|
|
15025
|
+
return /* @__PURE__ */ jsx167(
|
|
15077
15026
|
Select,
|
|
15078
15027
|
{
|
|
15079
15028
|
ref,
|
|
@@ -15084,16 +15033,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15084
15033
|
}
|
|
15085
15034
|
);
|
|
15086
15035
|
}
|
|
15087
|
-
var SelectCheckboxes =
|
|
15036
|
+
var SelectCheckboxes = React58.forwardRef(
|
|
15088
15037
|
SelectCheckboxesInternal
|
|
15089
15038
|
);
|
|
15090
15039
|
|
|
15091
15040
|
// src/dashboard/textarea/Textarea.tsx
|
|
15092
|
-
import * as
|
|
15041
|
+
import * as React60 from "react";
|
|
15093
15042
|
import { useTranslation as useTranslation37 } from "react-i18next";
|
|
15094
15043
|
|
|
15095
15044
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15096
|
-
import * as
|
|
15045
|
+
import * as React59 from "react";
|
|
15097
15046
|
var isEmptyValue2 = (value) => {
|
|
15098
15047
|
if (value === void 0 || value === null) return true;
|
|
15099
15048
|
return String(value).length === 0;
|
|
@@ -15112,12 +15061,12 @@ function useTextareaValueState({
|
|
|
15112
15061
|
value,
|
|
15113
15062
|
defaultValue
|
|
15114
15063
|
}) {
|
|
15115
|
-
const textareaRef =
|
|
15064
|
+
const textareaRef = React59.useRef(null);
|
|
15116
15065
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15117
15066
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15118
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15067
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React59.useState(propsAreEmpty);
|
|
15119
15068
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15120
|
-
const setNativeValue =
|
|
15069
|
+
const setNativeValue = React59.useCallback(
|
|
15121
15070
|
(nextValue) => {
|
|
15122
15071
|
if (isControlled) return;
|
|
15123
15072
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15127,14 +15076,14 @@ function useTextareaValueState({
|
|
|
15127
15076
|
},
|
|
15128
15077
|
[isControlled]
|
|
15129
15078
|
);
|
|
15130
|
-
const syncValueState =
|
|
15079
|
+
const syncValueState = React59.useCallback(() => {
|
|
15131
15080
|
if (!textareaRef.current) return;
|
|
15132
15081
|
setNativeValue(textareaRef.current.value);
|
|
15133
15082
|
}, [setNativeValue]);
|
|
15134
|
-
|
|
15083
|
+
React59.useLayoutEffect(() => {
|
|
15135
15084
|
syncValueState();
|
|
15136
15085
|
});
|
|
15137
|
-
|
|
15086
|
+
React59.useEffect(() => {
|
|
15138
15087
|
const textarea = textareaRef.current;
|
|
15139
15088
|
const form = textarea?.form;
|
|
15140
15089
|
if (isControlled || !form) return;
|
|
@@ -15158,10 +15107,10 @@ function useTextareaValueState({
|
|
|
15158
15107
|
}
|
|
15159
15108
|
|
|
15160
15109
|
// src/dashboard/textarea/Textarea.tsx
|
|
15161
|
-
import { jsx as
|
|
15110
|
+
import { jsx as jsx168, jsxs as jsxs105 } from "react/jsx-runtime";
|
|
15162
15111
|
var LINE_HEIGHT = 20;
|
|
15163
15112
|
var VERTICAL_PADDING = 32;
|
|
15164
|
-
var Textarea =
|
|
15113
|
+
var Textarea = React60.forwardRef(function Textarea2({
|
|
15165
15114
|
className,
|
|
15166
15115
|
textareaClassName,
|
|
15167
15116
|
label,
|
|
@@ -15189,12 +15138,12 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15189
15138
|
}, ref) {
|
|
15190
15139
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15191
15140
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15192
|
-
const reactId =
|
|
15141
|
+
const reactId = React60.useId();
|
|
15193
15142
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15194
15143
|
const { t } = useTranslation37();
|
|
15195
15144
|
const isInvalid = Boolean(invalid || error);
|
|
15196
15145
|
const isBlocked = Boolean(disabled);
|
|
15197
|
-
const resize =
|
|
15146
|
+
const resize = React60.useCallback(() => {
|
|
15198
15147
|
const el = textareaRef.current;
|
|
15199
15148
|
if (!el || !autosize) return;
|
|
15200
15149
|
el.style.height = "auto";
|
|
@@ -15204,7 +15153,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15204
15153
|
el.style.height = `${nextHeight}px`;
|
|
15205
15154
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15206
15155
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15207
|
-
|
|
15156
|
+
React60.useLayoutEffect(() => {
|
|
15208
15157
|
resize();
|
|
15209
15158
|
}, [resize, value]);
|
|
15210
15159
|
const handleInput = (event) => {
|
|
@@ -15227,7 +15176,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15227
15176
|
onBlur?.(event);
|
|
15228
15177
|
syncValueState();
|
|
15229
15178
|
};
|
|
15230
|
-
return /* @__PURE__ */
|
|
15179
|
+
return /* @__PURE__ */ jsxs105(
|
|
15231
15180
|
"div",
|
|
15232
15181
|
{
|
|
15233
15182
|
className: cn(
|
|
@@ -15237,18 +15186,18 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15237
15186
|
className
|
|
15238
15187
|
),
|
|
15239
15188
|
children: [
|
|
15240
|
-
label && /* @__PURE__ */
|
|
15189
|
+
label && /* @__PURE__ */ jsxs105(
|
|
15241
15190
|
"label",
|
|
15242
15191
|
{
|
|
15243
15192
|
htmlFor: textareaId,
|
|
15244
15193
|
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15245
15194
|
children: [
|
|
15246
15195
|
label,
|
|
15247
|
-
tooltip && /* @__PURE__ */
|
|
15196
|
+
tooltip && /* @__PURE__ */ jsx168("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx168(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15248
15197
|
]
|
|
15249
15198
|
}
|
|
15250
15199
|
),
|
|
15251
|
-
/* @__PURE__ */
|
|
15200
|
+
/* @__PURE__ */ jsx168(
|
|
15252
15201
|
"textarea",
|
|
15253
15202
|
{
|
|
15254
15203
|
ref: combinedRef,
|
|
@@ -15280,7 +15229,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15280
15229
|
...textareaProps
|
|
15281
15230
|
}
|
|
15282
15231
|
),
|
|
15283
|
-
error && /* @__PURE__ */
|
|
15232
|
+
error && /* @__PURE__ */ jsx168(
|
|
15284
15233
|
FieldErrorMessage,
|
|
15285
15234
|
{
|
|
15286
15235
|
id: `${textareaId}-error`,
|
|
@@ -15288,20 +15237,20 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15288
15237
|
className: "mt-[1px] text-[14px]"
|
|
15289
15238
|
}
|
|
15290
15239
|
),
|
|
15291
|
-
!error && optional && /* @__PURE__ */
|
|
15292
|
-
!error && helperText && /* @__PURE__ */
|
|
15240
|
+
!error && optional && /* @__PURE__ */ jsx168("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
15241
|
+
!error && helperText && /* @__PURE__ */ jsx168("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15293
15242
|
]
|
|
15294
15243
|
}
|
|
15295
15244
|
);
|
|
15296
15245
|
});
|
|
15297
15246
|
|
|
15298
15247
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15299
|
-
import * as
|
|
15248
|
+
import * as React62 from "react";
|
|
15300
15249
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
15301
15250
|
import { useTranslation as useTranslation38 } from "react-i18next";
|
|
15302
15251
|
|
|
15303
15252
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15304
|
-
import * as
|
|
15253
|
+
import * as React61 from "react";
|
|
15305
15254
|
|
|
15306
15255
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15307
15256
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15452,21 +15401,21 @@ function useDatePickerWheel({
|
|
|
15452
15401
|
minDate,
|
|
15453
15402
|
maxDate
|
|
15454
15403
|
}) {
|
|
15455
|
-
const years =
|
|
15456
|
-
const [draftDate, setDraftDate] =
|
|
15404
|
+
const years = React61.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15405
|
+
const [draftDate, setDraftDate] = React61.useState(
|
|
15457
15406
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15458
15407
|
);
|
|
15459
15408
|
const draftYear = draftDate.getFullYear();
|
|
15460
15409
|
const draftMonth = draftDate.getMonth();
|
|
15461
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15462
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15463
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15464
|
-
const monthListRef =
|
|
15465
|
-
const dayListRef =
|
|
15466
|
-
const yearListRef =
|
|
15467
|
-
const settleTimeoutsRef =
|
|
15468
|
-
const animationFramesRef =
|
|
15469
|
-
const columnRefs =
|
|
15410
|
+
const [monthScrollTop, setMonthScrollTop] = React61.useState(0);
|
|
15411
|
+
const [dayScrollTop, setDayScrollTop] = React61.useState(0);
|
|
15412
|
+
const [yearScrollTop, setYearScrollTop] = React61.useState(0);
|
|
15413
|
+
const monthListRef = React61.useRef(null);
|
|
15414
|
+
const dayListRef = React61.useRef(null);
|
|
15415
|
+
const yearListRef = React61.useRef(null);
|
|
15416
|
+
const settleTimeoutsRef = React61.useRef({});
|
|
15417
|
+
const animationFramesRef = React61.useRef({});
|
|
15418
|
+
const columnRefs = React61.useMemo(
|
|
15470
15419
|
() => ({
|
|
15471
15420
|
month: monthListRef,
|
|
15472
15421
|
day: dayListRef,
|
|
@@ -15474,7 +15423,7 @@ function useDatePickerWheel({
|
|
|
15474
15423
|
}),
|
|
15475
15424
|
[]
|
|
15476
15425
|
);
|
|
15477
|
-
const setColumnScrollTop =
|
|
15426
|
+
const setColumnScrollTop = React61.useCallback(
|
|
15478
15427
|
(column, nextScrollTop) => {
|
|
15479
15428
|
if (column === "month") {
|
|
15480
15429
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15488,19 +15437,19 @@ function useDatePickerWheel({
|
|
|
15488
15437
|
},
|
|
15489
15438
|
[]
|
|
15490
15439
|
);
|
|
15491
|
-
const clearSettleTimeout =
|
|
15440
|
+
const clearSettleTimeout = React61.useCallback((column) => {
|
|
15492
15441
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15493
15442
|
if (timeoutId === void 0) return;
|
|
15494
15443
|
window.clearTimeout(timeoutId);
|
|
15495
15444
|
delete settleTimeoutsRef.current[column];
|
|
15496
15445
|
}, []);
|
|
15497
|
-
const clearAnimationFrame =
|
|
15446
|
+
const clearAnimationFrame = React61.useCallback((column) => {
|
|
15498
15447
|
const frameId = animationFramesRef.current[column];
|
|
15499
15448
|
if (frameId === void 0) return;
|
|
15500
15449
|
window.cancelAnimationFrame(frameId);
|
|
15501
15450
|
delete animationFramesRef.current[column];
|
|
15502
15451
|
}, []);
|
|
15503
|
-
|
|
15452
|
+
React61.useEffect(
|
|
15504
15453
|
() => () => {
|
|
15505
15454
|
["month", "day", "year"].forEach((column) => {
|
|
15506
15455
|
clearSettleTimeout(column);
|
|
@@ -15509,22 +15458,22 @@ function useDatePickerWheel({
|
|
|
15509
15458
|
},
|
|
15510
15459
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15511
15460
|
);
|
|
15512
|
-
|
|
15461
|
+
React61.useEffect(() => {
|
|
15513
15462
|
if (isOpen) return;
|
|
15514
15463
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15515
15464
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15516
|
-
const months =
|
|
15465
|
+
const months = React61.useMemo(
|
|
15517
15466
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15518
15467
|
[draftYear, maxDate, minDate]
|
|
15519
15468
|
);
|
|
15520
|
-
const days =
|
|
15469
|
+
const days = React61.useMemo(
|
|
15521
15470
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15522
15471
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15523
15472
|
);
|
|
15524
15473
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15525
15474
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15526
15475
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15527
|
-
const syncScrollPositions =
|
|
15476
|
+
const syncScrollPositions = React61.useCallback(
|
|
15528
15477
|
(nextDate, behavior = "auto") => {
|
|
15529
15478
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15530
15479
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15548,7 +15497,7 @@ function useDatePickerWheel({
|
|
|
15548
15497
|
},
|
|
15549
15498
|
[maxDate, minDate, years]
|
|
15550
15499
|
);
|
|
15551
|
-
|
|
15500
|
+
React61.useLayoutEffect(() => {
|
|
15552
15501
|
if (!isOpen) return;
|
|
15553
15502
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15554
15503
|
setDraftDate(nextDate);
|
|
@@ -15559,7 +15508,7 @@ function useDatePickerWheel({
|
|
|
15559
15508
|
window.cancelAnimationFrame(frameId);
|
|
15560
15509
|
};
|
|
15561
15510
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15562
|
-
const updateDraftDate =
|
|
15511
|
+
const updateDraftDate = React61.useCallback(
|
|
15563
15512
|
(column, targetIndex, behavior = "smooth") => {
|
|
15564
15513
|
const currentDate = stripTime(draftDate);
|
|
15565
15514
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15604,7 +15553,7 @@ function useDatePickerWheel({
|
|
|
15604
15553
|
},
|
|
15605
15554
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15606
15555
|
);
|
|
15607
|
-
const settleColumnScroll =
|
|
15556
|
+
const settleColumnScroll = React61.useCallback(
|
|
15608
15557
|
(column) => {
|
|
15609
15558
|
const list = columnRefs[column].current;
|
|
15610
15559
|
if (!list) return;
|
|
@@ -15617,7 +15566,7 @@ function useDatePickerWheel({
|
|
|
15617
15566
|
},
|
|
15618
15567
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15619
15568
|
);
|
|
15620
|
-
const scheduleScrollSettle =
|
|
15569
|
+
const scheduleScrollSettle = React61.useCallback(
|
|
15621
15570
|
(column) => {
|
|
15622
15571
|
clearSettleTimeout(column);
|
|
15623
15572
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15626,7 +15575,7 @@ function useDatePickerWheel({
|
|
|
15626
15575
|
},
|
|
15627
15576
|
[clearSettleTimeout, settleColumnScroll]
|
|
15628
15577
|
);
|
|
15629
|
-
const handleColumnScroll =
|
|
15578
|
+
const handleColumnScroll = React61.useCallback(
|
|
15630
15579
|
(column) => {
|
|
15631
15580
|
const list = columnRefs[column].current;
|
|
15632
15581
|
if (!list) return;
|
|
@@ -15640,13 +15589,13 @@ function useDatePickerWheel({
|
|
|
15640
15589
|
},
|
|
15641
15590
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15642
15591
|
);
|
|
15643
|
-
const handleOptionSelect =
|
|
15592
|
+
const handleOptionSelect = React61.useCallback(
|
|
15644
15593
|
(column, targetIndex) => {
|
|
15645
15594
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15646
15595
|
},
|
|
15647
15596
|
[updateDraftDate]
|
|
15648
15597
|
);
|
|
15649
|
-
const focusAdjacentColumn =
|
|
15598
|
+
const focusAdjacentColumn = React61.useCallback(
|
|
15650
15599
|
(column, direction) => {
|
|
15651
15600
|
const order = ["month", "day", "year"];
|
|
15652
15601
|
const currentIndex = order.indexOf(column);
|
|
@@ -15656,7 +15605,7 @@ function useDatePickerWheel({
|
|
|
15656
15605
|
},
|
|
15657
15606
|
[columnRefs]
|
|
15658
15607
|
);
|
|
15659
|
-
const handleColumnKeyDown =
|
|
15608
|
+
const handleColumnKeyDown = React61.useCallback(
|
|
15660
15609
|
(column, event) => {
|
|
15661
15610
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15662
15611
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15722,7 +15671,7 @@ function useDatePickerWheel({
|
|
|
15722
15671
|
}
|
|
15723
15672
|
|
|
15724
15673
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
15725
|
-
import { jsx as
|
|
15674
|
+
import { jsx as jsx169, jsxs as jsxs106 } from "react/jsx-runtime";
|
|
15726
15675
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
15727
15676
|
function AirbnbDatePickerWheelColumn({
|
|
15728
15677
|
id,
|
|
@@ -15736,7 +15685,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15736
15685
|
onOptionSelect,
|
|
15737
15686
|
column
|
|
15738
15687
|
}) {
|
|
15739
|
-
return /* @__PURE__ */
|
|
15688
|
+
return /* @__PURE__ */ jsx169("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs106(
|
|
15740
15689
|
"div",
|
|
15741
15690
|
{
|
|
15742
15691
|
id,
|
|
@@ -15753,14 +15702,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15753
15702
|
WebkitOverflowScrolling: "touch"
|
|
15754
15703
|
},
|
|
15755
15704
|
children: [
|
|
15756
|
-
/* @__PURE__ */
|
|
15705
|
+
/* @__PURE__ */ jsx169("div", { style: { height: `${spacerHeight}px` } }),
|
|
15757
15706
|
items.map((item, index) => {
|
|
15758
15707
|
const { style } = getWheelOptionStyles(
|
|
15759
15708
|
index,
|
|
15760
15709
|
scrollTop,
|
|
15761
15710
|
DATE_PICKER_OPTION_HEIGHT
|
|
15762
15711
|
);
|
|
15763
|
-
return /* @__PURE__ */
|
|
15712
|
+
return /* @__PURE__ */ jsx169(
|
|
15764
15713
|
"button",
|
|
15765
15714
|
{
|
|
15766
15715
|
id: `${id}-option-${index}`,
|
|
@@ -15776,14 +15725,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15776
15725
|
`${column}-${item}-${index}`
|
|
15777
15726
|
);
|
|
15778
15727
|
}),
|
|
15779
|
-
/* @__PURE__ */
|
|
15728
|
+
/* @__PURE__ */ jsx169("div", { style: { height: `${spacerHeight}px` } })
|
|
15780
15729
|
]
|
|
15781
15730
|
}
|
|
15782
15731
|
) });
|
|
15783
15732
|
}
|
|
15784
15733
|
|
|
15785
15734
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
15786
|
-
import { jsx as
|
|
15735
|
+
import { jsx as jsx170, jsxs as jsxs107 } from "react/jsx-runtime";
|
|
15787
15736
|
function AirbnbDatePickerBody({
|
|
15788
15737
|
baseId,
|
|
15789
15738
|
label,
|
|
@@ -15805,19 +15754,19 @@ function AirbnbDatePickerBody({
|
|
|
15805
15754
|
onOptionSelect,
|
|
15806
15755
|
onDone
|
|
15807
15756
|
}) {
|
|
15808
|
-
return /* @__PURE__ */
|
|
15809
|
-
/* @__PURE__ */
|
|
15810
|
-
/* @__PURE__ */
|
|
15811
|
-
/* @__PURE__ */
|
|
15812
|
-
/* @__PURE__ */
|
|
15757
|
+
return /* @__PURE__ */ jsxs107("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
|
|
15758
|
+
/* @__PURE__ */ jsxs107("div", { className: "relative overflow-hidden rounded-[24px]", children: [
|
|
15759
|
+
/* @__PURE__ */ jsx170("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
15760
|
+
/* @__PURE__ */ jsx170("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
15761
|
+
/* @__PURE__ */ jsx170(
|
|
15813
15762
|
"div",
|
|
15814
15763
|
{
|
|
15815
15764
|
"aria-hidden": true,
|
|
15816
15765
|
className: "pointer-events-none absolute inset-x-0 top-1/2 z-0 h-8 -translate-y-1/2 rounded-[12px] bg-black/[0.04]"
|
|
15817
15766
|
}
|
|
15818
15767
|
),
|
|
15819
|
-
/* @__PURE__ */
|
|
15820
|
-
/* @__PURE__ */
|
|
15768
|
+
/* @__PURE__ */ jsxs107("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
|
|
15769
|
+
/* @__PURE__ */ jsx170(
|
|
15821
15770
|
AirbnbDatePickerWheelColumn,
|
|
15822
15771
|
{
|
|
15823
15772
|
id: `${baseId}-month`,
|
|
@@ -15832,7 +15781,7 @@ function AirbnbDatePickerBody({
|
|
|
15832
15781
|
onOptionSelect
|
|
15833
15782
|
}
|
|
15834
15783
|
),
|
|
15835
|
-
/* @__PURE__ */
|
|
15784
|
+
/* @__PURE__ */ jsx170(
|
|
15836
15785
|
AirbnbDatePickerWheelColumn,
|
|
15837
15786
|
{
|
|
15838
15787
|
id: `${baseId}-day`,
|
|
@@ -15847,7 +15796,7 @@ function AirbnbDatePickerBody({
|
|
|
15847
15796
|
onOptionSelect
|
|
15848
15797
|
}
|
|
15849
15798
|
),
|
|
15850
|
-
/* @__PURE__ */
|
|
15799
|
+
/* @__PURE__ */ jsx170(
|
|
15851
15800
|
AirbnbDatePickerWheelColumn,
|
|
15852
15801
|
{
|
|
15853
15802
|
id: `${baseId}-year`,
|
|
@@ -15864,7 +15813,7 @@ function AirbnbDatePickerBody({
|
|
|
15864
15813
|
)
|
|
15865
15814
|
] })
|
|
15866
15815
|
] }),
|
|
15867
|
-
/* @__PURE__ */
|
|
15816
|
+
/* @__PURE__ */ jsx170(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
15868
15817
|
] });
|
|
15869
15818
|
}
|
|
15870
15819
|
function AirbnbDatePickerContent({
|
|
@@ -15892,7 +15841,7 @@ function AirbnbDatePickerContent({
|
|
|
15892
15841
|
onColumnKeyDown,
|
|
15893
15842
|
onOptionSelect
|
|
15894
15843
|
}) {
|
|
15895
|
-
const body = /* @__PURE__ */
|
|
15844
|
+
const body = /* @__PURE__ */ jsx170(
|
|
15896
15845
|
AirbnbDatePickerBody,
|
|
15897
15846
|
{
|
|
15898
15847
|
baseId,
|
|
@@ -15917,27 +15866,27 @@ function AirbnbDatePickerContent({
|
|
|
15917
15866
|
}
|
|
15918
15867
|
);
|
|
15919
15868
|
if (isMobile3) {
|
|
15920
|
-
return /* @__PURE__ */
|
|
15869
|
+
return /* @__PURE__ */ jsx170(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15921
15870
|
DrawerContent,
|
|
15922
15871
|
{
|
|
15923
15872
|
onClose: () => onOpenChange(false),
|
|
15924
15873
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
15925
15874
|
children: [
|
|
15926
|
-
/* @__PURE__ */
|
|
15927
|
-
/* @__PURE__ */
|
|
15875
|
+
/* @__PURE__ */ jsx170(DrawerTitle, { className: "sr-only", children: title }),
|
|
15876
|
+
/* @__PURE__ */ jsx170(DrawerDescription, { className: "sr-only", children: label }),
|
|
15928
15877
|
body
|
|
15929
15878
|
]
|
|
15930
15879
|
}
|
|
15931
15880
|
) });
|
|
15932
15881
|
}
|
|
15933
|
-
return /* @__PURE__ */
|
|
15882
|
+
return /* @__PURE__ */ jsx170(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15934
15883
|
DialogContent,
|
|
15935
15884
|
{
|
|
15936
15885
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
15937
15886
|
showCloseButton: false,
|
|
15938
15887
|
children: [
|
|
15939
|
-
/* @__PURE__ */
|
|
15940
|
-
/* @__PURE__ */
|
|
15888
|
+
/* @__PURE__ */ jsx170(DialogTitle, { className: "sr-only", children: title }),
|
|
15889
|
+
/* @__PURE__ */ jsx170(DialogDescription, { className: "sr-only", children: label }),
|
|
15941
15890
|
body
|
|
15942
15891
|
]
|
|
15943
15892
|
}
|
|
@@ -15945,7 +15894,7 @@ function AirbnbDatePickerContent({
|
|
|
15945
15894
|
}
|
|
15946
15895
|
|
|
15947
15896
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15948
|
-
import { jsx as
|
|
15897
|
+
import { jsx as jsx171, jsxs as jsxs108 } from "react/jsx-runtime";
|
|
15949
15898
|
var MONTHS_IN_YEAR2 = 12;
|
|
15950
15899
|
function getMonthLabels2(locale) {
|
|
15951
15900
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -15978,7 +15927,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
15978
15927
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
15979
15928
|
return new Date(yearNum, monthIndex, dayNum);
|
|
15980
15929
|
}
|
|
15981
|
-
var Datepicker =
|
|
15930
|
+
var Datepicker = React62.forwardRef(
|
|
15982
15931
|
function Datepicker2({
|
|
15983
15932
|
label,
|
|
15984
15933
|
value,
|
|
@@ -16011,14 +15960,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16011
15960
|
maxDate,
|
|
16012
15961
|
formatValue
|
|
16013
15962
|
}, ref) {
|
|
16014
|
-
const containerRef =
|
|
16015
|
-
const dayInputRef =
|
|
16016
|
-
const monthInputRef =
|
|
16017
|
-
const monthListRef =
|
|
16018
|
-
const yearInputRef =
|
|
16019
|
-
const mobileTriggerRef =
|
|
16020
|
-
const wheelBaseId =
|
|
16021
|
-
const reactId =
|
|
15963
|
+
const containerRef = React62.useRef(null);
|
|
15964
|
+
const dayInputRef = React62.useRef(null);
|
|
15965
|
+
const monthInputRef = React62.useRef(null);
|
|
15966
|
+
const monthListRef = React62.useRef(null);
|
|
15967
|
+
const yearInputRef = React62.useRef(null);
|
|
15968
|
+
const mobileTriggerRef = React62.useRef(null);
|
|
15969
|
+
const wheelBaseId = React62.useId();
|
|
15970
|
+
const reactId = React62.useId();
|
|
16022
15971
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
16023
15972
|
const dayId = `${baseId}-day`;
|
|
16024
15973
|
const monthId = `${baseId}-month`;
|
|
@@ -16027,38 +15976,38 @@ var Datepicker = React63.forwardRef(
|
|
|
16027
15976
|
const errorId = `${baseId}-error`;
|
|
16028
15977
|
const { t, i18n } = useTranslation38();
|
|
16029
15978
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
16030
|
-
const resolvedMonthLabels =
|
|
15979
|
+
const resolvedMonthLabels = React62.useMemo(
|
|
16031
15980
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
16032
15981
|
[resolvedLocale, monthLabels]
|
|
16033
15982
|
);
|
|
16034
15983
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
16035
15984
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
16036
15985
|
const isControlled = value !== void 0;
|
|
16037
|
-
const initialParts =
|
|
15986
|
+
const initialParts = React62.useMemo(
|
|
16038
15987
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
16039
15988
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16040
15989
|
[]
|
|
16041
15990
|
);
|
|
16042
|
-
const [day, setDay] =
|
|
16043
|
-
const [monthIndex, setMonthIndex] =
|
|
15991
|
+
const [day, setDay] = React62.useState(initialParts.day);
|
|
15992
|
+
const [monthIndex, setMonthIndex] = React62.useState(
|
|
16044
15993
|
initialParts.monthIndex
|
|
16045
15994
|
);
|
|
16046
|
-
const [year, setYear] =
|
|
16047
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
16048
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
16049
|
-
const [focusedField, setFocusedField] =
|
|
16050
|
-
const [monthInputValue, setMonthInputValue] =
|
|
16051
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
15995
|
+
const [year, setYear] = React62.useState(initialParts.year);
|
|
15996
|
+
const [isMonthOpen, setIsMonthOpen] = React62.useState(false);
|
|
15997
|
+
const [isWheelOpen, setIsWheelOpen] = React62.useState(false);
|
|
15998
|
+
const [focusedField, setFocusedField] = React62.useState(null);
|
|
15999
|
+
const [monthInputValue, setMonthInputValue] = React62.useState("");
|
|
16000
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React62.useState(-1);
|
|
16052
16001
|
const isMobile3 = useIsMobile();
|
|
16053
|
-
const emitChangeRef =
|
|
16002
|
+
const emitChangeRef = React62.useRef(() => {
|
|
16054
16003
|
});
|
|
16055
|
-
const dayStateRef =
|
|
16056
|
-
const yearStateRef =
|
|
16057
|
-
const monthIndexRef =
|
|
16004
|
+
const dayStateRef = React62.useRef(day);
|
|
16005
|
+
const yearStateRef = React62.useRef(year);
|
|
16006
|
+
const monthIndexRef = React62.useRef(monthIndex);
|
|
16058
16007
|
dayStateRef.current = day;
|
|
16059
16008
|
yearStateRef.current = year;
|
|
16060
16009
|
monthIndexRef.current = monthIndex;
|
|
16061
|
-
|
|
16010
|
+
React62.useImperativeHandle(
|
|
16062
16011
|
ref,
|
|
16063
16012
|
() => ({
|
|
16064
16013
|
getDayValue: () => dayStateRef.current,
|
|
@@ -16076,27 +16025,27 @@ var Datepicker = React63.forwardRef(
|
|
|
16076
16025
|
}),
|
|
16077
16026
|
[]
|
|
16078
16027
|
);
|
|
16079
|
-
|
|
16028
|
+
React62.useEffect(() => {
|
|
16080
16029
|
if (!isControlled) return;
|
|
16081
16030
|
const next = partsFromDate(value ?? null);
|
|
16082
16031
|
setDay(next.day);
|
|
16083
16032
|
setMonthIndex(next.monthIndex);
|
|
16084
16033
|
setYear(next.year);
|
|
16085
16034
|
}, [isControlled, value]);
|
|
16086
|
-
|
|
16035
|
+
React62.useEffect(() => {
|
|
16087
16036
|
if (focusedField === "month") return;
|
|
16088
16037
|
setMonthInputValue(
|
|
16089
16038
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16090
16039
|
);
|
|
16091
16040
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16092
|
-
const filteredMonths =
|
|
16041
|
+
const filteredMonths = React62.useMemo(() => {
|
|
16093
16042
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16094
16043
|
const query = monthInputValue.trim().toLowerCase();
|
|
16095
16044
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16096
16045
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16097
16046
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16098
16047
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16099
|
-
|
|
16048
|
+
React62.useEffect(() => {
|
|
16100
16049
|
if (!isMonthOpen) {
|
|
16101
16050
|
setMonthHighlightIndex(-1);
|
|
16102
16051
|
return;
|
|
@@ -16117,7 +16066,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16117
16066
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16118
16067
|
const isInvalid = Boolean(invalid || error);
|
|
16119
16068
|
const wrapperWidth = toCssSize(width);
|
|
16120
|
-
const currentDate =
|
|
16069
|
+
const currentDate = React62.useMemo(
|
|
16121
16070
|
() => dateFromParts(day, monthIndex, year),
|
|
16122
16071
|
[day, monthIndex, year]
|
|
16123
16072
|
);
|
|
@@ -16126,7 +16075,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16126
16075
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16127
16076
|
isDisabled: !isMonthOpen || isMobile3
|
|
16128
16077
|
});
|
|
16129
|
-
const emitChange =
|
|
16078
|
+
const emitChange = React62.useCallback(
|
|
16130
16079
|
(nextDay, nextMonth, nextYear) => {
|
|
16131
16080
|
if (!onChange) return;
|
|
16132
16081
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16162,7 +16111,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16162
16111
|
setIsMonthOpen(true);
|
|
16163
16112
|
setMonthHighlightIndex(0);
|
|
16164
16113
|
};
|
|
16165
|
-
const commitMonthInput =
|
|
16114
|
+
const commitMonthInput = React62.useCallback(() => {
|
|
16166
16115
|
const query = monthInputValue.trim().toLowerCase();
|
|
16167
16116
|
if (!query) {
|
|
16168
16117
|
if (monthIndex !== null) {
|
|
@@ -16222,15 +16171,15 @@ var Datepicker = React63.forwardRef(
|
|
|
16222
16171
|
setIsMonthOpen(false);
|
|
16223
16172
|
}
|
|
16224
16173
|
};
|
|
16225
|
-
const focusDayInput =
|
|
16174
|
+
const focusDayInput = React62.useCallback(() => {
|
|
16226
16175
|
if (isBlocked || readOnly) return;
|
|
16227
16176
|
dayInputRef.current?.focus();
|
|
16228
16177
|
}, [isBlocked, readOnly]);
|
|
16229
|
-
const openWheel =
|
|
16178
|
+
const openWheel = React62.useCallback(() => {
|
|
16230
16179
|
if (isBlocked || readOnly) return;
|
|
16231
16180
|
setIsWheelOpen(true);
|
|
16232
16181
|
}, [isBlocked, readOnly]);
|
|
16233
|
-
const closeWheel =
|
|
16182
|
+
const closeWheel = React62.useCallback(() => {
|
|
16234
16183
|
setIsWheelOpen(false);
|
|
16235
16184
|
mobileTriggerRef.current?.focus();
|
|
16236
16185
|
}, []);
|
|
@@ -16242,7 +16191,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16242
16191
|
minDate,
|
|
16243
16192
|
maxDate
|
|
16244
16193
|
});
|
|
16245
|
-
const handleWheelDone =
|
|
16194
|
+
const handleWheelDone = React62.useCallback(() => {
|
|
16246
16195
|
const next = wheel.draftDate;
|
|
16247
16196
|
setDay(String(next.getDate()));
|
|
16248
16197
|
setMonthIndex(next.getMonth());
|
|
@@ -16251,14 +16200,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16251
16200
|
setIsWheelOpen(false);
|
|
16252
16201
|
mobileTriggerRef.current?.focus();
|
|
16253
16202
|
}, [name, onChange, wheel.draftDate]);
|
|
16254
|
-
const defaultFormatValue =
|
|
16203
|
+
const defaultFormatValue = React62.useCallback(
|
|
16255
16204
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16256
16205
|
[resolvedMonthLabels]
|
|
16257
16206
|
);
|
|
16258
16207
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16259
16208
|
const monthListboxId = `${monthId}-listbox`;
|
|
16260
16209
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16261
|
-
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */
|
|
16210
|
+
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ jsx171("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ jsx171(
|
|
16262
16211
|
"ul",
|
|
16263
16212
|
{
|
|
16264
16213
|
ref: monthListRef,
|
|
@@ -16269,7 +16218,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16269
16218
|
children: filteredMonths.map((option, position) => {
|
|
16270
16219
|
const isSelected = option.index === monthIndex;
|
|
16271
16220
|
const isHighlighted = position === monthHighlightIndex;
|
|
16272
|
-
return /* @__PURE__ */
|
|
16221
|
+
return /* @__PURE__ */ jsx171("li", { role: "presentation", children: /* @__PURE__ */ jsx171(
|
|
16273
16222
|
"button",
|
|
16274
16223
|
{
|
|
16275
16224
|
id: getMonthOptionId(option.index),
|
|
@@ -16296,7 +16245,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16296
16245
|
isBlocked && "cursor-not-allowed",
|
|
16297
16246
|
loading && "cursor-progress"
|
|
16298
16247
|
);
|
|
16299
|
-
return /* @__PURE__ */
|
|
16248
|
+
return /* @__PURE__ */ jsx171(
|
|
16300
16249
|
"div",
|
|
16301
16250
|
{
|
|
16302
16251
|
ref: containerRef,
|
|
@@ -16307,9 +16256,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16307
16256
|
className
|
|
16308
16257
|
),
|
|
16309
16258
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16310
|
-
children: /* @__PURE__ */
|
|
16311
|
-
/* @__PURE__ */
|
|
16312
|
-
isMobile3 ? /* @__PURE__ */
|
|
16259
|
+
children: /* @__PURE__ */ jsxs108("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
16260
|
+
/* @__PURE__ */ jsxs108("div", { className: "relative w-full", children: [
|
|
16261
|
+
isMobile3 ? /* @__PURE__ */ jsxs108(
|
|
16313
16262
|
"button",
|
|
16314
16263
|
{
|
|
16315
16264
|
ref: mobileTriggerRef,
|
|
@@ -16329,8 +16278,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16329
16278
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16330
16279
|
),
|
|
16331
16280
|
children: [
|
|
16332
|
-
/* @__PURE__ */
|
|
16333
|
-
/* @__PURE__ */
|
|
16281
|
+
/* @__PURE__ */ jsx171("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
16282
|
+
/* @__PURE__ */ jsx171("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx171(
|
|
16334
16283
|
ChevronDown4,
|
|
16335
16284
|
{
|
|
16336
16285
|
size: 16,
|
|
@@ -16342,14 +16291,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16342
16291
|
) })
|
|
16343
16292
|
]
|
|
16344
16293
|
}
|
|
16345
|
-
) : /* @__PURE__ */
|
|
16294
|
+
) : /* @__PURE__ */ jsxs108(
|
|
16346
16295
|
"div",
|
|
16347
16296
|
{
|
|
16348
16297
|
className: cn(
|
|
16349
16298
|
"relative box-border grid h-12 w-full grid-cols-[minmax(0,1fr)_minmax(96px,140px)_minmax(0,1fr)] items-center rounded-[6px] text-[16px] font-medium text-[var(--chekin-color-brand-navy)]"
|
|
16350
16299
|
),
|
|
16351
16300
|
children: [
|
|
16352
|
-
/* @__PURE__ */
|
|
16301
|
+
/* @__PURE__ */ jsx171("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx171(
|
|
16353
16302
|
"input",
|
|
16354
16303
|
{
|
|
16355
16304
|
ref: dayInputRef,
|
|
@@ -16378,8 +16327,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16378
16327
|
className: subInputClass
|
|
16379
16328
|
}
|
|
16380
16329
|
) }),
|
|
16381
|
-
/* @__PURE__ */
|
|
16382
|
-
/* @__PURE__ */
|
|
16330
|
+
/* @__PURE__ */ jsxs108("div", { className: "relative flex h-full min-w-0 items-center gap-1 px-2 before:absolute before:inset-y-3 before:left-0 before:w-px before:bg-[var(--chekin-color-gray-3)] before:content-[''] after:absolute after:inset-y-3 after:right-0 after:w-px after:bg-[var(--chekin-color-gray-3)] after:content-[''] sm:px-3", children: [
|
|
16331
|
+
/* @__PURE__ */ jsx171(
|
|
16383
16332
|
"input",
|
|
16384
16333
|
{
|
|
16385
16334
|
ref: monthInputRef,
|
|
@@ -16425,7 +16374,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16425
16374
|
)
|
|
16426
16375
|
}
|
|
16427
16376
|
),
|
|
16428
|
-
/* @__PURE__ */
|
|
16377
|
+
/* @__PURE__ */ jsx171(
|
|
16429
16378
|
ChevronDown4,
|
|
16430
16379
|
{
|
|
16431
16380
|
size: 14,
|
|
@@ -16442,7 +16391,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16442
16391
|
}
|
|
16443
16392
|
)
|
|
16444
16393
|
] }),
|
|
16445
|
-
/* @__PURE__ */
|
|
16394
|
+
/* @__PURE__ */ jsx171("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx171(
|
|
16446
16395
|
"input",
|
|
16447
16396
|
{
|
|
16448
16397
|
ref: yearInputRef,
|
|
@@ -16474,7 +16423,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16474
16423
|
]
|
|
16475
16424
|
}
|
|
16476
16425
|
),
|
|
16477
|
-
showCoverage && /* @__PURE__ */
|
|
16426
|
+
showCoverage && /* @__PURE__ */ jsx171(
|
|
16478
16427
|
"div",
|
|
16479
16428
|
{
|
|
16480
16429
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16482,7 +16431,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16482
16431
|
"aria-hidden": "true"
|
|
16483
16432
|
}
|
|
16484
16433
|
),
|
|
16485
|
-
/* @__PURE__ */
|
|
16434
|
+
/* @__PURE__ */ jsx171(
|
|
16486
16435
|
Fieldset,
|
|
16487
16436
|
{
|
|
16488
16437
|
isFocused,
|
|
@@ -16500,9 +16449,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16500
16449
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16501
16450
|
}
|
|
16502
16451
|
),
|
|
16503
|
-
isMonthOpen && !isMobile3 && /* @__PURE__ */
|
|
16452
|
+
isMonthOpen && !isMobile3 && /* @__PURE__ */ jsx171("div", { className: "absolute left-0 right-0 top-full z-30 mx-auto mt-1 w-full max-w-[260px] overflow-hidden rounded-md bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)] sm:left-1/2 sm:right-auto sm:-translate-x-1/2", children: monthPanelContent })
|
|
16504
16453
|
] }),
|
|
16505
|
-
isMobile3 && /* @__PURE__ */
|
|
16454
|
+
isMobile3 && /* @__PURE__ */ jsx171(
|
|
16506
16455
|
AirbnbDatePickerContent,
|
|
16507
16456
|
{
|
|
16508
16457
|
baseId: wheelBaseId,
|
|
@@ -16530,9 +16479,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16530
16479
|
onOptionSelect: wheel.handleOptionSelect
|
|
16531
16480
|
}
|
|
16532
16481
|
),
|
|
16533
|
-
!error && optional && /* @__PURE__ */
|
|
16534
|
-
!error && helperText && /* @__PURE__ */
|
|
16535
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
16482
|
+
!error && optional && /* @__PURE__ */ jsx171("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
16483
|
+
!error && helperText && /* @__PURE__ */ jsx171("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16484
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx171(
|
|
16536
16485
|
FieldErrorMessage,
|
|
16537
16486
|
{
|
|
16538
16487
|
id: errorId,
|
|
@@ -16547,7 +16496,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16547
16496
|
);
|
|
16548
16497
|
|
|
16549
16498
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16550
|
-
import * as
|
|
16499
|
+
import * as React66 from "react";
|
|
16551
16500
|
import { useTranslation as useTranslation39 } from "react-i18next";
|
|
16552
16501
|
|
|
16553
16502
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16626,7 +16575,7 @@ var createDisabledMatchers = ({
|
|
|
16626
16575
|
};
|
|
16627
16576
|
|
|
16628
16577
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16629
|
-
import * as
|
|
16578
|
+
import * as React63 from "react";
|
|
16630
16579
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16631
16580
|
function useRangeValue({
|
|
16632
16581
|
value: externalValue,
|
|
@@ -16635,10 +16584,10 @@ function useRangeValue({
|
|
|
16635
16584
|
name
|
|
16636
16585
|
}) {
|
|
16637
16586
|
const isControlled = externalValue !== void 0;
|
|
16638
|
-
const [draft, setDraft] =
|
|
16587
|
+
const [draft, setDraft] = React63.useState(
|
|
16639
16588
|
isControlled ? externalValue : defaultValue
|
|
16640
16589
|
);
|
|
16641
|
-
const lastExternalKeyRef =
|
|
16590
|
+
const lastExternalKeyRef = React63.useRef(getRangeKey(externalValue));
|
|
16642
16591
|
if (isControlled) {
|
|
16643
16592
|
const externalKey = getRangeKey(externalValue);
|
|
16644
16593
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16646,7 +16595,7 @@ function useRangeValue({
|
|
|
16646
16595
|
setDraft(externalValue);
|
|
16647
16596
|
}
|
|
16648
16597
|
}
|
|
16649
|
-
const commit =
|
|
16598
|
+
const commit = React63.useCallback(
|
|
16650
16599
|
(next) => {
|
|
16651
16600
|
setDraft(next);
|
|
16652
16601
|
if (next === void 0) {
|
|
@@ -16661,7 +16610,7 @@ function useRangeValue({
|
|
|
16661
16610
|
}
|
|
16662
16611
|
|
|
16663
16612
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16664
|
-
import * as
|
|
16613
|
+
import * as React64 from "react";
|
|
16665
16614
|
|
|
16666
16615
|
// src/dashboard/date-range-picker/utils/inputFormat.ts
|
|
16667
16616
|
function parseDateInputFormat(format2) {
|
|
@@ -16751,18 +16700,18 @@ function useRangeTextInputs({
|
|
|
16751
16700
|
onFromComplete,
|
|
16752
16701
|
onToComplete
|
|
16753
16702
|
}) {
|
|
16754
|
-
const tokens =
|
|
16703
|
+
const tokens = React64.useMemo(
|
|
16755
16704
|
() => parseDateInputFormat(displayFormat),
|
|
16756
16705
|
[displayFormat]
|
|
16757
16706
|
);
|
|
16758
|
-
const maxDigits =
|
|
16759
|
-
const [fromText, setFromText] =
|
|
16760
|
-
const [toText, setToText] =
|
|
16761
|
-
|
|
16707
|
+
const maxDigits = React64.useMemo(() => getMaxDigits(tokens), [tokens]);
|
|
16708
|
+
const [fromText, setFromText] = React64.useState(value?.from ? format2(value.from) : "");
|
|
16709
|
+
const [toText, setToText] = React64.useState(value?.to ? format2(value.to) : "");
|
|
16710
|
+
React64.useEffect(() => {
|
|
16762
16711
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16763
16712
|
setToText(value?.to ? format2(value.to) : "");
|
|
16764
16713
|
}, [format2, value?.from, value?.to]);
|
|
16765
|
-
const handleFromChange =
|
|
16714
|
+
const handleFromChange = React64.useCallback(
|
|
16766
16715
|
(raw) => {
|
|
16767
16716
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16768
16717
|
const wasComplete = countDigits(fromText) === maxDigits;
|
|
@@ -16774,7 +16723,7 @@ function useRangeTextInputs({
|
|
|
16774
16723
|
},
|
|
16775
16724
|
[fromText, maxDigits, onFromComplete, parse3, tokens]
|
|
16776
16725
|
);
|
|
16777
|
-
const handleToChange =
|
|
16726
|
+
const handleToChange = React64.useCallback(
|
|
16778
16727
|
(raw) => {
|
|
16779
16728
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16780
16729
|
const wasComplete = countDigits(toText) === maxDigits;
|
|
@@ -16786,7 +16735,7 @@ function useRangeTextInputs({
|
|
|
16786
16735
|
},
|
|
16787
16736
|
[maxDigits, onToComplete, parse3, toText, tokens]
|
|
16788
16737
|
);
|
|
16789
|
-
const handleFromBlur =
|
|
16738
|
+
const handleFromBlur = React64.useCallback(() => {
|
|
16790
16739
|
if (!fromText) {
|
|
16791
16740
|
const next = { from: void 0, to: value?.to };
|
|
16792
16741
|
onCommit(next);
|
|
@@ -16803,7 +16752,7 @@ function useRangeTextInputs({
|
|
|
16803
16752
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16804
16753
|
return void 0;
|
|
16805
16754
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16806
|
-
const handleToBlur =
|
|
16755
|
+
const handleToBlur = React64.useCallback(() => {
|
|
16807
16756
|
if (!toText) {
|
|
16808
16757
|
const next = { from: value?.from, to: void 0 };
|
|
16809
16758
|
onCommit(next);
|
|
@@ -16832,21 +16781,21 @@ function useRangeTextInputs({
|
|
|
16832
16781
|
}
|
|
16833
16782
|
|
|
16834
16783
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16835
|
-
import * as
|
|
16784
|
+
import * as React65 from "react";
|
|
16836
16785
|
function useRangeMonthSync(value) {
|
|
16837
|
-
const isPreloadedRef =
|
|
16838
|
-
const [month, setMonth] =
|
|
16839
|
-
|
|
16786
|
+
const isPreloadedRef = React65.useRef(false);
|
|
16787
|
+
const [month, setMonth] = React65.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16788
|
+
React65.useEffect(() => {
|
|
16840
16789
|
if (value?.from && !isPreloadedRef.current) {
|
|
16841
16790
|
setMonth(value.from);
|
|
16842
16791
|
isPreloadedRef.current = true;
|
|
16843
16792
|
}
|
|
16844
16793
|
}, [value?.from]);
|
|
16845
|
-
const syncMonthToValue =
|
|
16794
|
+
const syncMonthToValue = React65.useCallback((next) => {
|
|
16846
16795
|
isPreloadedRef.current = true;
|
|
16847
16796
|
if (next?.from) setMonth(next.from);
|
|
16848
16797
|
}, []);
|
|
16849
|
-
const resetPreload =
|
|
16798
|
+
const resetPreload = React65.useCallback(() => {
|
|
16850
16799
|
isPreloadedRef.current = false;
|
|
16851
16800
|
}, []);
|
|
16852
16801
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -16872,7 +16821,7 @@ function resolveRangeSelection({
|
|
|
16872
16821
|
|
|
16873
16822
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
16874
16823
|
import { CalendarDays, SquareX as SquareX4 } from "lucide-react";
|
|
16875
|
-
import { jsx as
|
|
16824
|
+
import { jsx as jsx172, jsxs as jsxs109 } from "react/jsx-runtime";
|
|
16876
16825
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
16877
16826
|
var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]";
|
|
16878
16827
|
var iconButtonClass = "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734] disabled:cursor-not-allowed";
|
|
@@ -16914,7 +16863,7 @@ function DateRangeInputs({
|
|
|
16914
16863
|
isBlocked && "cursor-not-allowed",
|
|
16915
16864
|
loading && "cursor-progress"
|
|
16916
16865
|
);
|
|
16917
|
-
return /* @__PURE__ */
|
|
16866
|
+
return /* @__PURE__ */ jsxs109(
|
|
16918
16867
|
"div",
|
|
16919
16868
|
{
|
|
16920
16869
|
className: cn(
|
|
@@ -16923,7 +16872,7 @@ function DateRangeInputs({
|
|
|
16923
16872
|
),
|
|
16924
16873
|
onClick: onRowClick,
|
|
16925
16874
|
children: [
|
|
16926
|
-
/* @__PURE__ */
|
|
16875
|
+
/* @__PURE__ */ jsx172(
|
|
16927
16876
|
"input",
|
|
16928
16877
|
{
|
|
16929
16878
|
ref: fromInputRef,
|
|
@@ -16948,7 +16897,7 @@ function DateRangeInputs({
|
|
|
16948
16897
|
)
|
|
16949
16898
|
}
|
|
16950
16899
|
),
|
|
16951
|
-
/* @__PURE__ */
|
|
16900
|
+
/* @__PURE__ */ jsx172(
|
|
16952
16901
|
"span",
|
|
16953
16902
|
{
|
|
16954
16903
|
"aria-hidden": "true",
|
|
@@ -16959,7 +16908,7 @@ function DateRangeInputs({
|
|
|
16959
16908
|
children: "\u2192"
|
|
16960
16909
|
}
|
|
16961
16910
|
),
|
|
16962
|
-
/* @__PURE__ */
|
|
16911
|
+
/* @__PURE__ */ jsx172(
|
|
16963
16912
|
"input",
|
|
16964
16913
|
{
|
|
16965
16914
|
ref: toInputRef,
|
|
@@ -16984,8 +16933,8 @@ function DateRangeInputs({
|
|
|
16984
16933
|
)
|
|
16985
16934
|
}
|
|
16986
16935
|
),
|
|
16987
|
-
/* @__PURE__ */
|
|
16988
|
-
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */
|
|
16936
|
+
/* @__PURE__ */ jsxs109("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
16937
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx172(
|
|
16989
16938
|
"button",
|
|
16990
16939
|
{
|
|
16991
16940
|
type: "button",
|
|
@@ -16993,10 +16942,10 @@ function DateRangeInputs({
|
|
|
16993
16942
|
onClick: onReset,
|
|
16994
16943
|
className: iconButtonClass,
|
|
16995
16944
|
"aria-label": clearLabel,
|
|
16996
|
-
children: /* @__PURE__ */
|
|
16945
|
+
children: /* @__PURE__ */ jsx172(SquareX4, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
16997
16946
|
}
|
|
16998
16947
|
),
|
|
16999
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */
|
|
16948
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx172(
|
|
17000
16949
|
"button",
|
|
17001
16950
|
{
|
|
17002
16951
|
type: "button",
|
|
@@ -17008,7 +16957,7 @@ function DateRangeInputs({
|
|
|
17008
16957
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
17009
16958
|
),
|
|
17010
16959
|
"aria-label": openCalendarLabel,
|
|
17011
|
-
children: /* @__PURE__ */
|
|
16960
|
+
children: /* @__PURE__ */ jsx172(CalendarDays, { size: 18 })
|
|
17012
16961
|
}
|
|
17013
16962
|
)
|
|
17014
16963
|
] })
|
|
@@ -17018,7 +16967,7 @@ function DateRangeInputs({
|
|
|
17018
16967
|
}
|
|
17019
16968
|
|
|
17020
16969
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
17021
|
-
import { jsx as
|
|
16970
|
+
import { jsx as jsx173 } from "react/jsx-runtime";
|
|
17022
16971
|
function DateRangeCalendar({
|
|
17023
16972
|
value,
|
|
17024
16973
|
month,
|
|
@@ -17034,7 +16983,7 @@ function DateRangeCalendar({
|
|
|
17034
16983
|
components,
|
|
17035
16984
|
...dayPickerProps
|
|
17036
16985
|
}) {
|
|
17037
|
-
return /* @__PURE__ */
|
|
16986
|
+
return /* @__PURE__ */ jsx173(
|
|
17038
16987
|
Calendar,
|
|
17039
16988
|
{
|
|
17040
16989
|
mode: "range",
|
|
@@ -17057,7 +17006,7 @@ function DateRangeCalendar({
|
|
|
17057
17006
|
}
|
|
17058
17007
|
|
|
17059
17008
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
17060
|
-
import { jsx as
|
|
17009
|
+
import { jsx as jsx174, jsxs as jsxs110 } from "react/jsx-runtime";
|
|
17061
17010
|
function DateRangePopover({
|
|
17062
17011
|
isOpen,
|
|
17063
17012
|
isMobile: isMobile3,
|
|
@@ -17069,30 +17018,30 @@ function DateRangePopover({
|
|
|
17069
17018
|
}) {
|
|
17070
17019
|
if (!isOpen) return null;
|
|
17071
17020
|
if (isMobile3) {
|
|
17072
|
-
return /* @__PURE__ */
|
|
17021
|
+
return /* @__PURE__ */ jsx174(
|
|
17073
17022
|
Drawer,
|
|
17074
17023
|
{
|
|
17075
17024
|
open: isOpen,
|
|
17076
17025
|
onOpenChange: (next) => {
|
|
17077
17026
|
if (!next) onClose();
|
|
17078
17027
|
},
|
|
17079
|
-
children: /* @__PURE__ */
|
|
17028
|
+
children: /* @__PURE__ */ jsxs110(
|
|
17080
17029
|
DrawerContent,
|
|
17081
17030
|
{
|
|
17082
17031
|
onClose,
|
|
17083
17032
|
lockScroll: false,
|
|
17084
17033
|
className: "max-h-[calc(100vh-1rem)]",
|
|
17085
17034
|
children: [
|
|
17086
|
-
/* @__PURE__ */
|
|
17087
|
-
/* @__PURE__ */
|
|
17088
|
-
/* @__PURE__ */
|
|
17035
|
+
/* @__PURE__ */ jsx174(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
17036
|
+
/* @__PURE__ */ jsx174(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
17037
|
+
/* @__PURE__ */ jsx174("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
17089
17038
|
]
|
|
17090
17039
|
}
|
|
17091
17040
|
)
|
|
17092
17041
|
}
|
|
17093
17042
|
);
|
|
17094
17043
|
}
|
|
17095
|
-
return /* @__PURE__ */
|
|
17044
|
+
return /* @__PURE__ */ jsx174(
|
|
17096
17045
|
"div",
|
|
17097
17046
|
{
|
|
17098
17047
|
className: cn(
|
|
@@ -17105,8 +17054,8 @@ function DateRangePopover({
|
|
|
17105
17054
|
}
|
|
17106
17055
|
|
|
17107
17056
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17108
|
-
import { jsx as
|
|
17109
|
-
var DateRangePicker =
|
|
17057
|
+
import { jsx as jsx175, jsxs as jsxs111 } from "react/jsx-runtime";
|
|
17058
|
+
var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
17110
17059
|
label,
|
|
17111
17060
|
value: externalValue,
|
|
17112
17061
|
defaultValue,
|
|
@@ -17141,20 +17090,20 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17141
17090
|
components: customComponents,
|
|
17142
17091
|
...dayPickerProps
|
|
17143
17092
|
}, ref) {
|
|
17144
|
-
const containerRef =
|
|
17145
|
-
const fromInputRef =
|
|
17146
|
-
const toInputRef =
|
|
17147
|
-
const reactId =
|
|
17093
|
+
const containerRef = React66.useRef(null);
|
|
17094
|
+
const fromInputRef = React66.useRef(null);
|
|
17095
|
+
const toInputRef = React66.useRef(null);
|
|
17096
|
+
const reactId = React66.useId();
|
|
17148
17097
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17149
17098
|
const fromId = `${baseId}-from`;
|
|
17150
17099
|
const toId = `${baseId}-to`;
|
|
17151
17100
|
const labelId = `${baseId}-label`;
|
|
17152
17101
|
const errorId = `${baseId}-error`;
|
|
17153
|
-
const normalizedValue =
|
|
17102
|
+
const normalizedValue = React66.useMemo(() => {
|
|
17154
17103
|
if (externalValue === void 0) return void 0;
|
|
17155
17104
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17156
17105
|
}, [externalValue]);
|
|
17157
|
-
const normalizedDefaultValue =
|
|
17106
|
+
const normalizedDefaultValue = React66.useMemo(() => {
|
|
17158
17107
|
if (defaultValue === void 0) return void 0;
|
|
17159
17108
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17160
17109
|
}, [defaultValue]);
|
|
@@ -17164,16 +17113,16 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17164
17113
|
onChange,
|
|
17165
17114
|
name
|
|
17166
17115
|
});
|
|
17167
|
-
const normalizedMinDate =
|
|
17168
|
-
const normalizedMaxDate =
|
|
17169
|
-
const formatter =
|
|
17170
|
-
const parser =
|
|
17171
|
-
const closeCalendarRef =
|
|
17116
|
+
const normalizedMinDate = React66.useMemo(() => toDate(minDate), [minDate]);
|
|
17117
|
+
const normalizedMaxDate = React66.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17118
|
+
const formatter = React66.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17119
|
+
const parser = React66.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17120
|
+
const closeCalendarRef = React66.useRef(() => {
|
|
17172
17121
|
});
|
|
17173
|
-
const handleFromComplete =
|
|
17122
|
+
const handleFromComplete = React66.useCallback(() => {
|
|
17174
17123
|
toInputRef.current?.focus();
|
|
17175
17124
|
}, []);
|
|
17176
|
-
const handleToComplete =
|
|
17125
|
+
const handleToComplete = React66.useCallback(() => {
|
|
17177
17126
|
toInputRef.current?.blur();
|
|
17178
17127
|
closeCalendarRef.current();
|
|
17179
17128
|
}, []);
|
|
@@ -17197,9 +17146,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17197
17146
|
onToComplete: handleToComplete
|
|
17198
17147
|
});
|
|
17199
17148
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17200
|
-
const [isOpen, setIsOpen] =
|
|
17201
|
-
const [focusedInput, setFocusedInput] =
|
|
17202
|
-
const [autoFocus, setAutoFocus] =
|
|
17149
|
+
const [isOpen, setIsOpen] = React66.useState(false);
|
|
17150
|
+
const [focusedInput, setFocusedInput] = React66.useState(null);
|
|
17151
|
+
const [autoFocus, setAutoFocus] = React66.useState(false);
|
|
17203
17152
|
const isMobile3 = useIsMobile();
|
|
17204
17153
|
const { t } = useTranslation39();
|
|
17205
17154
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17210,14 +17159,14 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17210
17159
|
const isFocused = focusedInput !== null || isOpen;
|
|
17211
17160
|
const wrapperWidth = toCssSize(width);
|
|
17212
17161
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17213
|
-
const closeCalendar =
|
|
17162
|
+
const closeCalendar = React66.useCallback(() => {
|
|
17214
17163
|
setIsOpen(false);
|
|
17215
17164
|
setFocusedInput(null);
|
|
17216
17165
|
setAutoFocus(false);
|
|
17217
17166
|
if (value?.from) setMonth(value.from);
|
|
17218
17167
|
}, [setMonth, value?.from]);
|
|
17219
17168
|
closeCalendarRef.current = closeCalendar;
|
|
17220
|
-
const openCalendar =
|
|
17169
|
+
const openCalendar = React66.useCallback(() => {
|
|
17221
17170
|
if (isBlocked || readOnly) return;
|
|
17222
17171
|
setIsOpen(true);
|
|
17223
17172
|
}, [isBlocked, readOnly]);
|
|
@@ -17226,7 +17175,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17226
17175
|
onOutsideClick: closeCalendar,
|
|
17227
17176
|
isDisabled: !isOpen || isMobile3
|
|
17228
17177
|
});
|
|
17229
|
-
const handlePickerChange =
|
|
17178
|
+
const handlePickerChange = React66.useCallback(
|
|
17230
17179
|
(range, pickedDate) => {
|
|
17231
17180
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17232
17181
|
previous: value,
|
|
@@ -17247,7 +17196,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17247
17196
|
setToText("");
|
|
17248
17197
|
setMonth(/* @__PURE__ */ new Date());
|
|
17249
17198
|
};
|
|
17250
|
-
const disabledMatchers =
|
|
17199
|
+
const disabledMatchers = React66.useMemo(
|
|
17251
17200
|
() => createDisabledMatchers({
|
|
17252
17201
|
minDate: normalizedMinDate,
|
|
17253
17202
|
maxDate: normalizedMaxDate,
|
|
@@ -17266,7 +17215,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17266
17215
|
openCalendar();
|
|
17267
17216
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17268
17217
|
};
|
|
17269
|
-
|
|
17218
|
+
React66.useImperativeHandle(
|
|
17270
17219
|
ref,
|
|
17271
17220
|
() => ({
|
|
17272
17221
|
setDateRange: (range) => {
|
|
@@ -17289,7 +17238,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17289
17238
|
syncMonthToValue
|
|
17290
17239
|
]
|
|
17291
17240
|
);
|
|
17292
|
-
return /* @__PURE__ */
|
|
17241
|
+
return /* @__PURE__ */ jsx175(
|
|
17293
17242
|
"div",
|
|
17294
17243
|
{
|
|
17295
17244
|
ref: containerRef,
|
|
@@ -17300,9 +17249,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17300
17249
|
className
|
|
17301
17250
|
),
|
|
17302
17251
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17303
|
-
children: /* @__PURE__ */
|
|
17304
|
-
/* @__PURE__ */
|
|
17305
|
-
/* @__PURE__ */
|
|
17252
|
+
children: /* @__PURE__ */ jsxs111("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
17253
|
+
/* @__PURE__ */ jsxs111("div", { className: "relative w-full", children: [
|
|
17254
|
+
/* @__PURE__ */ jsx175(
|
|
17306
17255
|
DateRangeInputs,
|
|
17307
17256
|
{
|
|
17308
17257
|
fromId,
|
|
@@ -17355,7 +17304,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17355
17304
|
onToggleCalendar: toggleCalendar
|
|
17356
17305
|
}
|
|
17357
17306
|
),
|
|
17358
|
-
/* @__PURE__ */
|
|
17307
|
+
/* @__PURE__ */ jsx175(
|
|
17359
17308
|
Fieldset,
|
|
17360
17309
|
{
|
|
17361
17310
|
isFocused,
|
|
@@ -17372,7 +17321,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17372
17321
|
tooltip
|
|
17373
17322
|
}
|
|
17374
17323
|
),
|
|
17375
|
-
/* @__PURE__ */
|
|
17324
|
+
/* @__PURE__ */ jsx175(
|
|
17376
17325
|
DateRangePopover,
|
|
17377
17326
|
{
|
|
17378
17327
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17381,7 +17330,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17381
17330
|
drawerTitle,
|
|
17382
17331
|
drawerDescription,
|
|
17383
17332
|
onClose: closeCalendar,
|
|
17384
|
-
children: /* @__PURE__ */
|
|
17333
|
+
children: /* @__PURE__ */ jsx175(
|
|
17385
17334
|
DateRangeCalendar,
|
|
17386
17335
|
{
|
|
17387
17336
|
value,
|
|
@@ -17402,7 +17351,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17402
17351
|
}
|
|
17403
17352
|
)
|
|
17404
17353
|
] }),
|
|
17405
|
-
/* @__PURE__ */
|
|
17354
|
+
/* @__PURE__ */ jsx175(
|
|
17406
17355
|
DateRangePopover,
|
|
17407
17356
|
{
|
|
17408
17357
|
isOpen: isOpen && isMobile3,
|
|
@@ -17411,7 +17360,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17411
17360
|
drawerTitle,
|
|
17412
17361
|
drawerDescription,
|
|
17413
17362
|
onClose: closeCalendar,
|
|
17414
|
-
children: /* @__PURE__ */
|
|
17363
|
+
children: /* @__PURE__ */ jsx175(
|
|
17415
17364
|
DateRangeCalendar,
|
|
17416
17365
|
{
|
|
17417
17366
|
value,
|
|
@@ -17431,9 +17380,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17431
17380
|
)
|
|
17432
17381
|
}
|
|
17433
17382
|
),
|
|
17434
|
-
!error && optional && /* @__PURE__ */
|
|
17435
|
-
!error && helperText && /* @__PURE__ */
|
|
17436
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
17383
|
+
!error && optional && /* @__PURE__ */ jsx175("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17384
|
+
!error && helperText && /* @__PURE__ */ jsx175("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17385
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx175(
|
|
17437
17386
|
FieldErrorMessage,
|
|
17438
17387
|
{
|
|
17439
17388
|
id: errorId,
|
|
@@ -17447,7 +17396,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17447
17396
|
});
|
|
17448
17397
|
|
|
17449
17398
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17450
|
-
import * as
|
|
17399
|
+
import * as React67 from "react";
|
|
17451
17400
|
import { useTranslation as useTranslation40 } from "react-i18next";
|
|
17452
17401
|
import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
|
|
17453
17402
|
import {
|
|
@@ -17473,11 +17422,11 @@ function useValidateDates({
|
|
|
17473
17422
|
const { t } = useTranslation40();
|
|
17474
17423
|
const handleError = useEvent(onError);
|
|
17475
17424
|
const handleSuccess = useEvent(onSuccess);
|
|
17476
|
-
const errorFormatter =
|
|
17425
|
+
const errorFormatter = React67.useMemo(
|
|
17477
17426
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17478
17427
|
[displayFormat]
|
|
17479
17428
|
);
|
|
17480
|
-
const validateDates =
|
|
17429
|
+
const validateDates = React67.useCallback(
|
|
17481
17430
|
(dates) => {
|
|
17482
17431
|
const startDate = dates?.from;
|
|
17483
17432
|
const endDate = dates?.to;
|
|
@@ -17527,9 +17476,9 @@ function useValidateDates({
|
|
|
17527
17476
|
}
|
|
17528
17477
|
|
|
17529
17478
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17530
|
-
import * as
|
|
17479
|
+
import * as React68 from "react";
|
|
17531
17480
|
import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
|
|
17532
|
-
import { jsx as
|
|
17481
|
+
import { jsx as jsx176 } from "react/jsx-runtime";
|
|
17533
17482
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17534
17483
|
function parseTime(value) {
|
|
17535
17484
|
return parse2(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17571,24 +17520,24 @@ var FORMAT_SETTINGS = {
|
|
|
17571
17520
|
},
|
|
17572
17521
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17573
17522
|
};
|
|
17574
|
-
var TimePicker =
|
|
17575
|
-
const resolvedOptions =
|
|
17523
|
+
var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17524
|
+
const resolvedOptions = React68.useMemo(() => {
|
|
17576
17525
|
if (options) return options;
|
|
17577
17526
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17578
17527
|
return buildOptions(settings);
|
|
17579
17528
|
}, [formatName, options, timeSettings]);
|
|
17580
|
-
return /* @__PURE__ */
|
|
17529
|
+
return /* @__PURE__ */ jsx176(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17581
17530
|
});
|
|
17582
17531
|
|
|
17583
17532
|
// src/dashboard/file-input/FileInput.tsx
|
|
17584
|
-
import * as
|
|
17533
|
+
import * as React69 from "react";
|
|
17585
17534
|
import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
|
|
17586
17535
|
import { useTranslation as useTranslation41 } from "react-i18next";
|
|
17587
|
-
import { jsx as
|
|
17536
|
+
import { jsx as jsx177, jsxs as jsxs112 } from "react/jsx-runtime";
|
|
17588
17537
|
function defaultDownload(url) {
|
|
17589
17538
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17590
17539
|
}
|
|
17591
|
-
var FileInput =
|
|
17540
|
+
var FileInput = React69.forwardRef(function FileInput2({
|
|
17592
17541
|
label,
|
|
17593
17542
|
value,
|
|
17594
17543
|
onChange,
|
|
@@ -17611,12 +17560,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17611
17560
|
width,
|
|
17612
17561
|
downloadLabel
|
|
17613
17562
|
}, ref) {
|
|
17614
|
-
const internalRef =
|
|
17563
|
+
const internalRef = React69.useRef(null);
|
|
17615
17564
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17616
17565
|
const { t } = useTranslation41();
|
|
17617
17566
|
const resolvedLabel = label ?? t("upload_file");
|
|
17618
17567
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17619
|
-
const reactId =
|
|
17568
|
+
const reactId = React69.useId();
|
|
17620
17569
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17621
17570
|
const labelId = `${inputId}-label`;
|
|
17622
17571
|
const errorId = `${inputId}-error`;
|
|
@@ -17642,7 +17591,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17642
17591
|
event.stopPropagation();
|
|
17643
17592
|
if (isUrl) onDownload(value);
|
|
17644
17593
|
};
|
|
17645
|
-
return /* @__PURE__ */
|
|
17594
|
+
return /* @__PURE__ */ jsxs112(
|
|
17646
17595
|
"label",
|
|
17647
17596
|
{
|
|
17648
17597
|
htmlFor: inputId,
|
|
@@ -17655,7 +17604,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17655
17604
|
),
|
|
17656
17605
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17657
17606
|
children: [
|
|
17658
|
-
/* @__PURE__ */
|
|
17607
|
+
/* @__PURE__ */ jsx177(
|
|
17659
17608
|
"input",
|
|
17660
17609
|
{
|
|
17661
17610
|
ref: inputRef,
|
|
@@ -17672,9 +17621,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17672
17621
|
"aria-invalid": isInvalid
|
|
17673
17622
|
}
|
|
17674
17623
|
),
|
|
17675
|
-
/* @__PURE__ */
|
|
17676
|
-
/* @__PURE__ */
|
|
17677
|
-
/* @__PURE__ */
|
|
17624
|
+
/* @__PURE__ */ jsxs112("div", { className: "relative w-full", children: [
|
|
17625
|
+
/* @__PURE__ */ jsxs112("div", { className: "relative w-full", children: [
|
|
17626
|
+
/* @__PURE__ */ jsxs112(
|
|
17678
17627
|
"div",
|
|
17679
17628
|
{
|
|
17680
17629
|
className: cn(
|
|
@@ -17682,25 +17631,25 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17682
17631
|
isEmpty && "bg-[var(--empty-field-background)]"
|
|
17683
17632
|
),
|
|
17684
17633
|
children: [
|
|
17685
|
-
hasFileChip ? /* @__PURE__ */
|
|
17634
|
+
hasFileChip ? /* @__PURE__ */ jsxs112(
|
|
17686
17635
|
"div",
|
|
17687
17636
|
{
|
|
17688
17637
|
className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
|
|
17689
17638
|
onClick: (event) => event.preventDefault(),
|
|
17690
17639
|
children: [
|
|
17691
|
-
isUrl ? /* @__PURE__ */
|
|
17640
|
+
isUrl ? /* @__PURE__ */ jsxs112(
|
|
17692
17641
|
"button",
|
|
17693
17642
|
{
|
|
17694
17643
|
type: "button",
|
|
17695
17644
|
onClick: handleDownload,
|
|
17696
17645
|
className: "inline-flex items-center gap-[7px] truncate border-0 bg-transparent p-0 text-[14px] font-medium text-[var(--chekin-color-brand-navy)] outline-none",
|
|
17697
17646
|
children: [
|
|
17698
|
-
/* @__PURE__ */
|
|
17699
|
-
/* @__PURE__ */
|
|
17647
|
+
/* @__PURE__ */ jsx177("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
17648
|
+
/* @__PURE__ */ jsx177(Download, { size: 15 })
|
|
17700
17649
|
]
|
|
17701
17650
|
}
|
|
17702
|
-
) : /* @__PURE__ */
|
|
17703
|
-
/* @__PURE__ */
|
|
17651
|
+
) : /* @__PURE__ */ jsx177("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
17652
|
+
/* @__PURE__ */ jsx177(
|
|
17704
17653
|
"button",
|
|
17705
17654
|
{
|
|
17706
17655
|
type: "button",
|
|
@@ -17708,17 +17657,17 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17708
17657
|
onClick: handleClear,
|
|
17709
17658
|
className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734]",
|
|
17710
17659
|
"aria-label": t("remove_file"),
|
|
17711
|
-
children: /* @__PURE__ */
|
|
17660
|
+
children: /* @__PURE__ */ jsx177(SquareX5, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17712
17661
|
}
|
|
17713
17662
|
)
|
|
17714
17663
|
]
|
|
17715
17664
|
}
|
|
17716
|
-
) : /* @__PURE__ */
|
|
17717
|
-
/* @__PURE__ */
|
|
17665
|
+
) : /* @__PURE__ */ jsx177("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
17666
|
+
/* @__PURE__ */ jsx177("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx177(Paperclip, { size: 20 }) })
|
|
17718
17667
|
]
|
|
17719
17668
|
}
|
|
17720
17669
|
),
|
|
17721
|
-
/* @__PURE__ */
|
|
17670
|
+
/* @__PURE__ */ jsx177(
|
|
17722
17671
|
Fieldset,
|
|
17723
17672
|
{
|
|
17724
17673
|
isFocused: false,
|
|
@@ -17736,9 +17685,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17736
17685
|
}
|
|
17737
17686
|
)
|
|
17738
17687
|
] }),
|
|
17739
|
-
!error && optional && /* @__PURE__ */
|
|
17740
|
-
!error && helperText && /* @__PURE__ */
|
|
17741
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
17688
|
+
!error && optional && /* @__PURE__ */ jsx177("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17689
|
+
!error && helperText && /* @__PURE__ */ jsx177("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17690
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx177(
|
|
17742
17691
|
FieldErrorMessage,
|
|
17743
17692
|
{
|
|
17744
17693
|
id: errorId,
|
|
@@ -17753,10 +17702,10 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17753
17702
|
});
|
|
17754
17703
|
|
|
17755
17704
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17756
|
-
import * as
|
|
17757
|
-
import { jsx as
|
|
17705
|
+
import * as React70 from "react";
|
|
17706
|
+
import { jsx as jsx178, jsxs as jsxs113 } from "react/jsx-runtime";
|
|
17758
17707
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17759
|
-
var SelectIconsBox =
|
|
17708
|
+
var SelectIconsBox = React70.forwardRef(
|
|
17760
17709
|
function SelectIconsBox2({
|
|
17761
17710
|
children,
|
|
17762
17711
|
icons,
|
|
@@ -17772,10 +17721,10 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17772
17721
|
className,
|
|
17773
17722
|
boxClassName
|
|
17774
17723
|
}, ref) {
|
|
17775
|
-
const containerRef =
|
|
17724
|
+
const containerRef = React70.useRef(null);
|
|
17776
17725
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17777
17726
|
const isControlled = controlledOpen !== void 0;
|
|
17778
|
-
const [internalOpen, setInternalOpen] =
|
|
17727
|
+
const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
|
|
17779
17728
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17780
17729
|
const setOpen = (next) => {
|
|
17781
17730
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17802,7 +17751,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17802
17751
|
);
|
|
17803
17752
|
focusable?.focus();
|
|
17804
17753
|
};
|
|
17805
|
-
return /* @__PURE__ */
|
|
17754
|
+
return /* @__PURE__ */ jsxs113(
|
|
17806
17755
|
"div",
|
|
17807
17756
|
{
|
|
17808
17757
|
ref: combinedContainerRef,
|
|
@@ -17812,7 +17761,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17812
17761
|
className: cn("relative inline-block outline-none", className),
|
|
17813
17762
|
children: [
|
|
17814
17763
|
children,
|
|
17815
|
-
isOpen && /* @__PURE__ */
|
|
17764
|
+
isOpen && /* @__PURE__ */ jsx178(
|
|
17816
17765
|
"div",
|
|
17817
17766
|
{
|
|
17818
17767
|
className: cn(
|
|
@@ -17823,7 +17772,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17823
17772
|
boxClassName
|
|
17824
17773
|
),
|
|
17825
17774
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
17826
|
-
children: icons.map((iconName) => /* @__PURE__ */
|
|
17775
|
+
children: icons.map((iconName) => /* @__PURE__ */ jsx178(
|
|
17827
17776
|
"button",
|
|
17828
17777
|
{
|
|
17829
17778
|
type: "button",
|
|
@@ -17906,14 +17855,14 @@ function getErrorMessage(error) {
|
|
|
17906
17855
|
|
|
17907
17856
|
// src/lib/toastResponseError.tsx
|
|
17908
17857
|
import i18next from "i18next";
|
|
17909
|
-
import { jsx as
|
|
17858
|
+
import { jsx as jsx179, jsxs as jsxs114 } from "react/jsx-runtime";
|
|
17910
17859
|
function addSupportEmailToMessage(message, prefixText) {
|
|
17911
17860
|
if (typeof message !== "string") {
|
|
17912
17861
|
return message;
|
|
17913
17862
|
}
|
|
17914
17863
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
17915
|
-
return /* @__PURE__ */
|
|
17916
|
-
/* @__PURE__ */
|
|
17864
|
+
return /* @__PURE__ */ jsxs114("div", { children: [
|
|
17865
|
+
/* @__PURE__ */ jsx179("div", { children: builtMessage }),
|
|
17917
17866
|
i18next.t("reach_us_at_email")
|
|
17918
17867
|
] });
|
|
17919
17868
|
}
|
|
@@ -17929,12 +17878,12 @@ function toastResponseError(error, options = {}) {
|
|
|
17929
17878
|
|
|
17930
17879
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
17931
17880
|
import { forwardRef as forwardRef72, useId as useId15 } from "react";
|
|
17932
|
-
import { jsx as
|
|
17881
|
+
import { jsx as jsx180, jsxs as jsxs115 } from "react/jsx-runtime";
|
|
17933
17882
|
var LegacyTextarea = forwardRef72(
|
|
17934
17883
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
17935
17884
|
const inputId = useId15();
|
|
17936
|
-
return /* @__PURE__ */
|
|
17937
|
-
/* @__PURE__ */
|
|
17885
|
+
return /* @__PURE__ */ jsxs115("div", { className: cn("relative", className), children: [
|
|
17886
|
+
/* @__PURE__ */ jsx180(
|
|
17938
17887
|
"textarea",
|
|
17939
17888
|
{
|
|
17940
17889
|
ref,
|
|
@@ -17950,7 +17899,7 @@ var LegacyTextarea = forwardRef72(
|
|
|
17950
17899
|
...textareaProps
|
|
17951
17900
|
}
|
|
17952
17901
|
),
|
|
17953
|
-
label && /* @__PURE__ */
|
|
17902
|
+
label && /* @__PURE__ */ jsx180(
|
|
17954
17903
|
"label",
|
|
17955
17904
|
{
|
|
17956
17905
|
htmlFor: inputId,
|
|
@@ -17968,15 +17917,15 @@ var LegacyTextarea = forwardRef72(
|
|
|
17968
17917
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
17969
17918
|
|
|
17970
17919
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
17971
|
-
import * as
|
|
17920
|
+
import * as React72 from "react";
|
|
17972
17921
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
17973
17922
|
|
|
17974
17923
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
17975
|
-
import * as
|
|
17924
|
+
import * as React71 from "react";
|
|
17976
17925
|
import { Loader2 as Loader24 } from "lucide-react";
|
|
17977
17926
|
import { useTranslation as useTranslation42 } from "react-i18next";
|
|
17978
|
-
import { Fragment as Fragment17, jsx as
|
|
17979
|
-
var AirbnbFieldTrigger =
|
|
17927
|
+
import { Fragment as Fragment17, jsx as jsx181, jsxs as jsxs116 } from "react/jsx-runtime";
|
|
17928
|
+
var AirbnbFieldTrigger = React71.forwardRef(
|
|
17980
17929
|
({
|
|
17981
17930
|
as = "button",
|
|
17982
17931
|
id,
|
|
@@ -18012,14 +17961,14 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18012
17961
|
const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
|
|
18013
17962
|
const visibleLabelText = labelText ?? label;
|
|
18014
17963
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
18015
|
-
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */
|
|
18016
|
-
/* @__PURE__ */
|
|
18017
|
-
optionalLabel && /* @__PURE__ */
|
|
17964
|
+
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs116("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
|
|
17965
|
+
/* @__PURE__ */ jsx181("span", { className: "min-w-0 truncate", children: visibleLabelText }),
|
|
17966
|
+
optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "text-current opacity-70 lowercase", children: [
|
|
18018
17967
|
"(",
|
|
18019
17968
|
optionalLabel,
|
|
18020
17969
|
")"
|
|
18021
17970
|
] }),
|
|
18022
|
-
tooltip && /* @__PURE__ */
|
|
17971
|
+
tooltip && /* @__PURE__ */ jsx181(
|
|
18023
17972
|
HelpTooltip,
|
|
18024
17973
|
{
|
|
18025
17974
|
content: tooltip,
|
|
@@ -18034,9 +17983,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18034
17983
|
const hasInvalidState = Boolean(error);
|
|
18035
17984
|
const errorMessage = typeof error === "string" ? error : void 0;
|
|
18036
17985
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18037
|
-
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */
|
|
17986
|
+
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs116("span", { className: "flex items-center gap-2", children: [
|
|
18038
17987
|
trailingAdornment,
|
|
18039
|
-
loading && /* @__PURE__ */
|
|
17988
|
+
loading && /* @__PURE__ */ jsx181(
|
|
18040
17989
|
Loader24,
|
|
18041
17990
|
{
|
|
18042
17991
|
"aria-hidden": "true",
|
|
@@ -18052,8 +18001,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18052
18001
|
disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
|
|
18053
18002
|
className
|
|
18054
18003
|
);
|
|
18055
|
-
const sharedContent = /* @__PURE__ */
|
|
18056
|
-
/* @__PURE__ */
|
|
18004
|
+
const sharedContent = /* @__PURE__ */ jsxs116(Fragment17, { children: [
|
|
18005
|
+
/* @__PURE__ */ jsxs116(
|
|
18057
18006
|
"span",
|
|
18058
18007
|
{
|
|
18059
18008
|
className: cn(
|
|
@@ -18062,7 +18011,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18062
18011
|
contentClassName
|
|
18063
18012
|
),
|
|
18064
18013
|
children: [
|
|
18065
|
-
/* @__PURE__ */
|
|
18014
|
+
/* @__PURE__ */ jsx181(
|
|
18066
18015
|
"span",
|
|
18067
18016
|
{
|
|
18068
18017
|
id: labelId,
|
|
@@ -18075,7 +18024,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18075
18024
|
children: animatedLabel
|
|
18076
18025
|
}
|
|
18077
18026
|
),
|
|
18078
|
-
children ? children : hasValue ? /* @__PURE__ */
|
|
18027
|
+
children ? children : hasValue ? /* @__PURE__ */ jsx181(
|
|
18079
18028
|
"span",
|
|
18080
18029
|
{
|
|
18081
18030
|
id: valueId,
|
|
@@ -18086,11 +18035,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18086
18035
|
),
|
|
18087
18036
|
children: valueText
|
|
18088
18037
|
}
|
|
18089
|
-
) : /* @__PURE__ */
|
|
18038
|
+
) : /* @__PURE__ */ jsx181("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
18090
18039
|
]
|
|
18091
18040
|
}
|
|
18092
18041
|
),
|
|
18093
|
-
resolvedTrailingAdornment && /* @__PURE__ */
|
|
18042
|
+
resolvedTrailingAdornment && /* @__PURE__ */ jsx181(
|
|
18094
18043
|
"span",
|
|
18095
18044
|
{
|
|
18096
18045
|
"aria-hidden": "true",
|
|
@@ -18099,9 +18048,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18099
18048
|
}
|
|
18100
18049
|
)
|
|
18101
18050
|
] });
|
|
18102
|
-
return /* @__PURE__ */
|
|
18103
|
-
topLabel && /* @__PURE__ */
|
|
18104
|
-
as === "button" ? /* @__PURE__ */
|
|
18051
|
+
return /* @__PURE__ */ jsxs116("div", { className: "w-full", children: [
|
|
18052
|
+
topLabel && /* @__PURE__ */ jsx181("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
|
|
18053
|
+
as === "button" ? /* @__PURE__ */ jsx181(
|
|
18105
18054
|
"button",
|
|
18106
18055
|
{
|
|
18107
18056
|
id,
|
|
@@ -18118,7 +18067,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18118
18067
|
...props,
|
|
18119
18068
|
children: sharedContent
|
|
18120
18069
|
}
|
|
18121
|
-
) : /* @__PURE__ */
|
|
18070
|
+
) : /* @__PURE__ */ jsx181(
|
|
18122
18071
|
"div",
|
|
18123
18072
|
{
|
|
18124
18073
|
id,
|
|
@@ -18135,16 +18084,16 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18135
18084
|
children: sharedContent
|
|
18136
18085
|
}
|
|
18137
18086
|
),
|
|
18138
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */
|
|
18087
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx181(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
18139
18088
|
] });
|
|
18140
18089
|
}
|
|
18141
18090
|
);
|
|
18142
18091
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
18143
18092
|
|
|
18144
18093
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18145
|
-
import { jsx as
|
|
18094
|
+
import { jsx as jsx182, jsxs as jsxs117 } from "react/jsx-runtime";
|
|
18146
18095
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18147
|
-
var AirbnbDatePicker =
|
|
18096
|
+
var AirbnbDatePicker = React72.forwardRef(
|
|
18148
18097
|
({
|
|
18149
18098
|
label,
|
|
18150
18099
|
topLabel,
|
|
@@ -18169,24 +18118,24 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18169
18118
|
formatValue = formatDateValue
|
|
18170
18119
|
}, ref) => {
|
|
18171
18120
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18172
|
-
const [isOpen, setIsOpen] =
|
|
18173
|
-
const triggerId =
|
|
18174
|
-
const pickerId =
|
|
18175
|
-
const labelId =
|
|
18176
|
-
const valueId =
|
|
18177
|
-
const helperTextId =
|
|
18178
|
-
const errorId =
|
|
18179
|
-
const internalRef =
|
|
18121
|
+
const [isOpen, setIsOpen] = React72.useState(false);
|
|
18122
|
+
const triggerId = React72.useId();
|
|
18123
|
+
const pickerId = React72.useId();
|
|
18124
|
+
const labelId = React72.useId();
|
|
18125
|
+
const valueId = React72.useId();
|
|
18126
|
+
const helperTextId = React72.useId();
|
|
18127
|
+
const errorId = React72.useId();
|
|
18128
|
+
const internalRef = React72.useRef(null);
|
|
18180
18129
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18181
|
-
const monthLabels =
|
|
18182
|
-
const resolvedMinDate =
|
|
18183
|
-
const resolvedMaxDate =
|
|
18184
|
-
const normalizedValue =
|
|
18185
|
-
const normalizedDefaultValue =
|
|
18130
|
+
const monthLabels = React72.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18131
|
+
const resolvedMinDate = React72.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18132
|
+
const resolvedMaxDate = React72.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18133
|
+
const normalizedValue = React72.useMemo(() => normalizeDateValue(value), [value]);
|
|
18134
|
+
const normalizedDefaultValue = React72.useMemo(
|
|
18186
18135
|
() => normalizeDateValue(defaultValue),
|
|
18187
18136
|
[defaultValue]
|
|
18188
18137
|
);
|
|
18189
|
-
const resolvedValue =
|
|
18138
|
+
const resolvedValue = React72.useMemo(
|
|
18190
18139
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18191
18140
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18192
18141
|
);
|
|
@@ -18217,7 +18166,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18217
18166
|
minDate: resolvedMinDate,
|
|
18218
18167
|
maxDate: resolvedMaxDate
|
|
18219
18168
|
});
|
|
18220
|
-
const handleOpenChange =
|
|
18169
|
+
const handleOpenChange = React72.useCallback(
|
|
18221
18170
|
(nextOpen) => {
|
|
18222
18171
|
if (isBlocked && nextOpen) return;
|
|
18223
18172
|
setIsOpen(nextOpen);
|
|
@@ -18227,7 +18176,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18227
18176
|
},
|
|
18228
18177
|
[isBlocked]
|
|
18229
18178
|
);
|
|
18230
|
-
const handleDone =
|
|
18179
|
+
const handleDone = React72.useCallback(() => {
|
|
18231
18180
|
if (isBlocked) return;
|
|
18232
18181
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18233
18182
|
handleOpenChange(false);
|
|
@@ -18239,11 +18188,11 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18239
18188
|
resolvedMaxDate,
|
|
18240
18189
|
resolvedMinDate
|
|
18241
18190
|
]);
|
|
18242
|
-
const handleTriggerClick =
|
|
18191
|
+
const handleTriggerClick = React72.useCallback(() => {
|
|
18243
18192
|
if (isBlocked) return;
|
|
18244
18193
|
setIsOpen(true);
|
|
18245
18194
|
}, [isBlocked]);
|
|
18246
|
-
const handleTriggerKeyDown =
|
|
18195
|
+
const handleTriggerKeyDown = React72.useCallback(
|
|
18247
18196
|
(event) => {
|
|
18248
18197
|
if (isBlocked) return;
|
|
18249
18198
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18253,13 +18202,13 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18253
18202
|
},
|
|
18254
18203
|
[isBlocked]
|
|
18255
18204
|
);
|
|
18256
|
-
|
|
18205
|
+
React72.useEffect(() => {
|
|
18257
18206
|
if (isBlocked) {
|
|
18258
18207
|
setIsOpen(false);
|
|
18259
18208
|
}
|
|
18260
18209
|
}, [isBlocked]);
|
|
18261
|
-
return /* @__PURE__ */
|
|
18262
|
-
name && /* @__PURE__ */
|
|
18210
|
+
return /* @__PURE__ */ jsxs117("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
|
|
18211
|
+
name && /* @__PURE__ */ jsx182(
|
|
18263
18212
|
"input",
|
|
18264
18213
|
{
|
|
18265
18214
|
type: "hidden",
|
|
@@ -18267,7 +18216,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18267
18216
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
18268
18217
|
}
|
|
18269
18218
|
),
|
|
18270
|
-
/* @__PURE__ */
|
|
18219
|
+
/* @__PURE__ */ jsx182(
|
|
18271
18220
|
AirbnbFieldTrigger,
|
|
18272
18221
|
{
|
|
18273
18222
|
id: triggerId,
|
|
@@ -18293,10 +18242,10 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18293
18242
|
onClick: handleTriggerClick,
|
|
18294
18243
|
onKeyDown: handleTriggerKeyDown,
|
|
18295
18244
|
onBlur,
|
|
18296
|
-
trailingAdornment: /* @__PURE__ */
|
|
18245
|
+
trailingAdornment: /* @__PURE__ */ jsx182(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18297
18246
|
}
|
|
18298
18247
|
),
|
|
18299
|
-
/* @__PURE__ */
|
|
18248
|
+
/* @__PURE__ */ jsx182(
|
|
18300
18249
|
AirbnbDatePickerContent,
|
|
18301
18250
|
{
|
|
18302
18251
|
baseId: pickerId,
|
|
@@ -18330,12 +18279,12 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18330
18279
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18331
18280
|
|
|
18332
18281
|
// src/airbnb-fields/input/Input.tsx
|
|
18333
|
-
import * as
|
|
18282
|
+
import * as React73 from "react";
|
|
18334
18283
|
import { Eye as Eye2 } from "lucide-react";
|
|
18335
18284
|
import { useTranslation as useTranslation43 } from "react-i18next";
|
|
18336
|
-
import { jsx as
|
|
18285
|
+
import { jsx as jsx183, jsxs as jsxs118 } from "react/jsx-runtime";
|
|
18337
18286
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18338
|
-
var AirbnbInput =
|
|
18287
|
+
var AirbnbInput = React73.forwardRef(
|
|
18339
18288
|
({
|
|
18340
18289
|
label,
|
|
18341
18290
|
topLabel,
|
|
@@ -18364,16 +18313,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18364
18313
|
...props
|
|
18365
18314
|
}, ref) => {
|
|
18366
18315
|
const { t } = useTranslation43();
|
|
18367
|
-
const generatedId =
|
|
18368
|
-
const inputRef =
|
|
18316
|
+
const generatedId = React73.useId();
|
|
18317
|
+
const inputRef = React73.useRef(null);
|
|
18369
18318
|
const inputId = id ?? generatedId;
|
|
18370
18319
|
const fieldId = `${inputId}-field`;
|
|
18371
18320
|
const labelId = `${inputId}-label`;
|
|
18372
18321
|
const errorId = `${inputId}-error`;
|
|
18373
18322
|
const accessibleLabel = placeholder ?? label;
|
|
18374
|
-
const [isFocused, setIsFocused] =
|
|
18375
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18376
|
-
const [currentValue, setCurrentValue] =
|
|
18323
|
+
const [isFocused, setIsFocused] = React73.useState(false);
|
|
18324
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React73.useState(false);
|
|
18325
|
+
const [currentValue, setCurrentValue] = React73.useState(
|
|
18377
18326
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18378
18327
|
);
|
|
18379
18328
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18386,16 +18335,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18386
18335
|
const triggerError = error ?? invalid;
|
|
18387
18336
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18388
18337
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18389
|
-
|
|
18338
|
+
React73.useLayoutEffect(() => {
|
|
18390
18339
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18391
18340
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18392
18341
|
}, [value]);
|
|
18393
|
-
|
|
18342
|
+
React73.useEffect(() => {
|
|
18394
18343
|
if (!isPasswordInput) {
|
|
18395
18344
|
setIsPasswordRevealed(false);
|
|
18396
18345
|
}
|
|
18397
18346
|
}, [isPasswordInput]);
|
|
18398
|
-
const setRefs =
|
|
18347
|
+
const setRefs = React73.useCallback(
|
|
18399
18348
|
(node) => {
|
|
18400
18349
|
inputRef.current = node;
|
|
18401
18350
|
if (node && value == null) {
|
|
@@ -18428,7 +18377,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18428
18377
|
const togglePasswordReveal = () => {
|
|
18429
18378
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18430
18379
|
};
|
|
18431
|
-
return /* @__PURE__ */
|
|
18380
|
+
return /* @__PURE__ */ jsx183("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs118(
|
|
18432
18381
|
AirbnbFieldTrigger,
|
|
18433
18382
|
{
|
|
18434
18383
|
as: "div",
|
|
@@ -18457,7 +18406,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18457
18406
|
forceLabelText: hasLabelMeta,
|
|
18458
18407
|
hideErrorMessage: !renderErrorMessage,
|
|
18459
18408
|
children: [
|
|
18460
|
-
/* @__PURE__ */
|
|
18409
|
+
/* @__PURE__ */ jsx183(
|
|
18461
18410
|
"input",
|
|
18462
18411
|
{
|
|
18463
18412
|
...props,
|
|
@@ -18487,7 +18436,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18487
18436
|
)
|
|
18488
18437
|
}
|
|
18489
18438
|
),
|
|
18490
|
-
shouldShowPasswordReveal && /* @__PURE__ */
|
|
18439
|
+
shouldShowPasswordReveal && /* @__PURE__ */ jsx183(
|
|
18491
18440
|
"button",
|
|
18492
18441
|
{
|
|
18493
18442
|
type: "button",
|
|
@@ -18495,7 +18444,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18495
18444
|
disabled: isBlocked,
|
|
18496
18445
|
className: "absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[#7A8399] hover:text-[#1F1F1B] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
|
|
18497
18446
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18498
|
-
children: /* @__PURE__ */
|
|
18447
|
+
children: /* @__PURE__ */ jsx183(
|
|
18499
18448
|
Eye2,
|
|
18500
18449
|
{
|
|
18501
18450
|
size: 18,
|
|
@@ -18513,14 +18462,14 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18513
18462
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18514
18463
|
|
|
18515
18464
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18516
|
-
import * as
|
|
18465
|
+
import * as React79 from "react";
|
|
18517
18466
|
import { ChevronDown as ChevronDown6 } from "lucide-react";
|
|
18518
18467
|
|
|
18519
18468
|
// src/airbnb-fields/select/Select.tsx
|
|
18520
|
-
import * as
|
|
18469
|
+
import * as React78 from "react";
|
|
18521
18470
|
|
|
18522
18471
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18523
|
-
import { jsx as
|
|
18472
|
+
import { jsx as jsx184, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
18524
18473
|
function AirbnbSelectDesktopMenu({
|
|
18525
18474
|
id,
|
|
18526
18475
|
options,
|
|
@@ -18539,7 +18488,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18539
18488
|
noOptionsMessage
|
|
18540
18489
|
}) {
|
|
18541
18490
|
const emptyMessage = noOptionsMessage?.();
|
|
18542
|
-
return /* @__PURE__ */
|
|
18491
|
+
return /* @__PURE__ */ jsxs119(
|
|
18543
18492
|
"div",
|
|
18544
18493
|
{
|
|
18545
18494
|
id,
|
|
@@ -18552,12 +18501,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18552
18501
|
onKeyDown,
|
|
18553
18502
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18554
18503
|
children: [
|
|
18555
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */
|
|
18504
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx184("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18556
18505
|
options.map((option, index) => {
|
|
18557
18506
|
const isSelected = selectedValue?.value === option.value;
|
|
18558
18507
|
const isHighlighted = index === highlightedIndex;
|
|
18559
18508
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18560
|
-
return /* @__PURE__ */
|
|
18509
|
+
return /* @__PURE__ */ jsx184(
|
|
18561
18510
|
"button",
|
|
18562
18511
|
{
|
|
18563
18512
|
id: getOptionId2(index),
|
|
@@ -18589,7 +18538,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18589
18538
|
}
|
|
18590
18539
|
|
|
18591
18540
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18592
|
-
import { jsx as
|
|
18541
|
+
import { jsx as jsx185 } from "react/jsx-runtime";
|
|
18593
18542
|
function AirbnbSelectDesktopContent({
|
|
18594
18543
|
isOpen,
|
|
18595
18544
|
listboxId,
|
|
@@ -18610,14 +18559,14 @@ function AirbnbSelectDesktopContent({
|
|
|
18610
18559
|
noOptionsMessage
|
|
18611
18560
|
}) {
|
|
18612
18561
|
if (!isOpen) return null;
|
|
18613
|
-
return /* @__PURE__ */
|
|
18562
|
+
return /* @__PURE__ */ jsx185(
|
|
18614
18563
|
"div",
|
|
18615
18564
|
{
|
|
18616
18565
|
className: cn(
|
|
18617
18566
|
"absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[#DEDAD2] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
|
|
18618
18567
|
dropdownClassName
|
|
18619
18568
|
),
|
|
18620
|
-
children: /* @__PURE__ */
|
|
18569
|
+
children: /* @__PURE__ */ jsx185(
|
|
18621
18570
|
AirbnbSelectDesktopMenu,
|
|
18622
18571
|
{
|
|
18623
18572
|
id: listboxId,
|
|
@@ -18715,7 +18664,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
18715
18664
|
}
|
|
18716
18665
|
|
|
18717
18666
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
18718
|
-
import { jsx as
|
|
18667
|
+
import { jsx as jsx186, jsxs as jsxs120 } from "react/jsx-runtime";
|
|
18719
18668
|
function AirbnbSelectMobileWheel({
|
|
18720
18669
|
id,
|
|
18721
18670
|
options,
|
|
@@ -18734,7 +18683,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18734
18683
|
}) {
|
|
18735
18684
|
const spacerHeight2 = getWheelSpacerHeight();
|
|
18736
18685
|
const emptyMessage = noOptionsMessage?.();
|
|
18737
|
-
return /* @__PURE__ */
|
|
18686
|
+
return /* @__PURE__ */ jsxs120(
|
|
18738
18687
|
"div",
|
|
18739
18688
|
{
|
|
18740
18689
|
id,
|
|
@@ -18746,10 +18695,10 @@ function AirbnbSelectMobileWheel({
|
|
|
18746
18695
|
onKeyDown,
|
|
18747
18696
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
18748
18697
|
children: [
|
|
18749
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */
|
|
18750
|
-
/* @__PURE__ */
|
|
18751
|
-
/* @__PURE__ */
|
|
18752
|
-
/* @__PURE__ */
|
|
18698
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx186("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18699
|
+
/* @__PURE__ */ jsx186("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
18700
|
+
/* @__PURE__ */ jsx186("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
18701
|
+
/* @__PURE__ */ jsx186(
|
|
18753
18702
|
"div",
|
|
18754
18703
|
{
|
|
18755
18704
|
"aria-hidden": true,
|
|
@@ -18759,7 +18708,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18759
18708
|
)
|
|
18760
18709
|
}
|
|
18761
18710
|
),
|
|
18762
|
-
/* @__PURE__ */
|
|
18711
|
+
/* @__PURE__ */ jsxs120(
|
|
18763
18712
|
"div",
|
|
18764
18713
|
{
|
|
18765
18714
|
ref: listRef,
|
|
@@ -18774,11 +18723,11 @@ function AirbnbSelectMobileWheel({
|
|
|
18774
18723
|
WebkitOverflowScrolling: "touch"
|
|
18775
18724
|
},
|
|
18776
18725
|
children: [
|
|
18777
|
-
/* @__PURE__ */
|
|
18726
|
+
/* @__PURE__ */ jsx186("div", { style: { height: `${spacerHeight2}px` } }),
|
|
18778
18727
|
options.map((option, index) => {
|
|
18779
18728
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
18780
18729
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18781
|
-
return /* @__PURE__ */
|
|
18730
|
+
return /* @__PURE__ */ jsx186(
|
|
18782
18731
|
"button",
|
|
18783
18732
|
{
|
|
18784
18733
|
id: getOptionId2(index),
|
|
@@ -18799,7 +18748,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18799
18748
|
optionKey
|
|
18800
18749
|
);
|
|
18801
18750
|
}),
|
|
18802
|
-
/* @__PURE__ */
|
|
18751
|
+
/* @__PURE__ */ jsx186("div", { style: { height: `${spacerHeight2}px` } })
|
|
18803
18752
|
]
|
|
18804
18753
|
}
|
|
18805
18754
|
)
|
|
@@ -18809,7 +18758,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18809
18758
|
}
|
|
18810
18759
|
|
|
18811
18760
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
18812
|
-
import { jsx as
|
|
18761
|
+
import { jsx as jsx187, jsxs as jsxs121 } from "react/jsx-runtime";
|
|
18813
18762
|
function AirbnbSelectMobileContent({
|
|
18814
18763
|
open,
|
|
18815
18764
|
onOpenChange,
|
|
@@ -18833,11 +18782,11 @@ function AirbnbSelectMobileContent({
|
|
|
18833
18782
|
getOptionId: getOptionId2,
|
|
18834
18783
|
noOptionsMessage
|
|
18835
18784
|
}) {
|
|
18836
|
-
return /* @__PURE__ */
|
|
18837
|
-
/* @__PURE__ */
|
|
18838
|
-
/* @__PURE__ */
|
|
18839
|
-
/* @__PURE__ */
|
|
18840
|
-
/* @__PURE__ */
|
|
18785
|
+
return /* @__PURE__ */ jsx187(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs121(DrawerContent, { onClose, lockScroll: false, children: [
|
|
18786
|
+
/* @__PURE__ */ jsx187(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
18787
|
+
/* @__PURE__ */ jsx187(DrawerDescription, { className: "sr-only", children: label }),
|
|
18788
|
+
/* @__PURE__ */ jsxs121("div", { className: "px-6 pb-4 pt-1", children: [
|
|
18789
|
+
/* @__PURE__ */ jsx187(
|
|
18841
18790
|
AirbnbSelectMobileWheel,
|
|
18842
18791
|
{
|
|
18843
18792
|
id: listboxId,
|
|
@@ -18856,16 +18805,16 @@ function AirbnbSelectMobileContent({
|
|
|
18856
18805
|
noOptionsMessage
|
|
18857
18806
|
}
|
|
18858
18807
|
),
|
|
18859
|
-
/* @__PURE__ */
|
|
18808
|
+
/* @__PURE__ */ jsx187(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
18860
18809
|
] })
|
|
18861
18810
|
] }) });
|
|
18862
18811
|
}
|
|
18863
18812
|
|
|
18864
18813
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18865
|
-
import * as
|
|
18814
|
+
import * as React74 from "react";
|
|
18866
18815
|
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
18867
|
-
import { jsx as
|
|
18868
|
-
var AirbnbSelectTrigger =
|
|
18816
|
+
import { jsx as jsx188 } from "react/jsx-runtime";
|
|
18817
|
+
var AirbnbSelectTrigger = React74.forwardRef(
|
|
18869
18818
|
({
|
|
18870
18819
|
id,
|
|
18871
18820
|
open,
|
|
@@ -18889,7 +18838,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18889
18838
|
onKeyDown,
|
|
18890
18839
|
onBlur
|
|
18891
18840
|
}, ref) => {
|
|
18892
|
-
return /* @__PURE__ */
|
|
18841
|
+
return /* @__PURE__ */ jsx188(
|
|
18893
18842
|
AirbnbFieldTrigger,
|
|
18894
18843
|
{
|
|
18895
18844
|
id,
|
|
@@ -18917,7 +18866,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18917
18866
|
onClick,
|
|
18918
18867
|
onKeyDown,
|
|
18919
18868
|
onBlur,
|
|
18920
|
-
trailingAdornment: /* @__PURE__ */
|
|
18869
|
+
trailingAdornment: /* @__PURE__ */ jsx188(
|
|
18921
18870
|
ChevronDown5,
|
|
18922
18871
|
{
|
|
18923
18872
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
@@ -18930,7 +18879,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18930
18879
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
18931
18880
|
|
|
18932
18881
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
18933
|
-
import * as
|
|
18882
|
+
import * as React75 from "react";
|
|
18934
18883
|
function useDesktopSelect({
|
|
18935
18884
|
isMobile: isMobile3,
|
|
18936
18885
|
isOpen,
|
|
@@ -18939,12 +18888,12 @@ function useDesktopSelect({
|
|
|
18939
18888
|
disabled,
|
|
18940
18889
|
onChange
|
|
18941
18890
|
}) {
|
|
18942
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
18943
|
-
const triggerRef =
|
|
18944
|
-
const listRef =
|
|
18945
|
-
const optionRefs =
|
|
18891
|
+
const [highlightedIndex, setHighlightedIndex] = React75.useState(-1);
|
|
18892
|
+
const triggerRef = React75.useRef(null);
|
|
18893
|
+
const listRef = React75.useRef(null);
|
|
18894
|
+
const optionRefs = React75.useRef([]);
|
|
18946
18895
|
const selectedIndex = getOptionIndex2(options, value);
|
|
18947
|
-
|
|
18896
|
+
React75.useEffect(() => {
|
|
18948
18897
|
if (!isOpen || isMobile3) return;
|
|
18949
18898
|
setHighlightedIndex((currentIndex) => {
|
|
18950
18899
|
if (currentIndex >= 0) {
|
|
@@ -18959,34 +18908,34 @@ function useDesktopSelect({
|
|
|
18959
18908
|
window.cancelAnimationFrame(frameId);
|
|
18960
18909
|
};
|
|
18961
18910
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
18962
|
-
|
|
18911
|
+
React75.useEffect(() => {
|
|
18963
18912
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
18964
18913
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
18965
18914
|
block: "nearest"
|
|
18966
18915
|
});
|
|
18967
18916
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
18968
|
-
|
|
18917
|
+
React75.useEffect(() => {
|
|
18969
18918
|
if (isOpen) return;
|
|
18970
18919
|
setHighlightedIndex(-1);
|
|
18971
18920
|
}, [isOpen]);
|
|
18972
|
-
const focusTrigger =
|
|
18921
|
+
const focusTrigger = React75.useCallback(() => {
|
|
18973
18922
|
triggerRef.current?.focus();
|
|
18974
18923
|
}, []);
|
|
18975
|
-
const handleSelect =
|
|
18924
|
+
const handleSelect = React75.useCallback(
|
|
18976
18925
|
(option) => {
|
|
18977
18926
|
if (option.isDisabled || disabled) return;
|
|
18978
18927
|
onChange?.(option);
|
|
18979
18928
|
},
|
|
18980
18929
|
[disabled, onChange]
|
|
18981
18930
|
);
|
|
18982
|
-
const openMenu =
|
|
18931
|
+
const openMenu = React75.useCallback(
|
|
18983
18932
|
(targetIndex) => {
|
|
18984
18933
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
18985
18934
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
18986
18935
|
},
|
|
18987
18936
|
[options, selectedIndex]
|
|
18988
18937
|
);
|
|
18989
|
-
const handleTriggerKeyDown =
|
|
18938
|
+
const handleTriggerKeyDown = React75.useCallback(
|
|
18990
18939
|
(event, onOpen) => {
|
|
18991
18940
|
if (disabled) return;
|
|
18992
18941
|
if (event.key === "ArrowDown") {
|
|
@@ -19011,7 +18960,7 @@ function useDesktopSelect({
|
|
|
19011
18960
|
},
|
|
19012
18961
|
[disabled, openMenu, options, selectedIndex]
|
|
19013
18962
|
);
|
|
19014
|
-
const handleMenuKeyDown =
|
|
18963
|
+
const handleMenuKeyDown = React75.useCallback(
|
|
19015
18964
|
(event, onClose) => {
|
|
19016
18965
|
if (event.key === "Escape") {
|
|
19017
18966
|
event.preventDefault();
|
|
@@ -19061,7 +19010,7 @@ function useDesktopSelect({
|
|
|
19061
19010
|
},
|
|
19062
19011
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
19063
19012
|
);
|
|
19064
|
-
const setOptionRef =
|
|
19013
|
+
const setOptionRef = React75.useCallback(
|
|
19065
19014
|
(index, node) => {
|
|
19066
19015
|
optionRefs.current[index] = node;
|
|
19067
19016
|
},
|
|
@@ -19081,23 +19030,23 @@ function useDesktopSelect({
|
|
|
19081
19030
|
}
|
|
19082
19031
|
|
|
19083
19032
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19084
|
-
import * as
|
|
19033
|
+
import * as React76 from "react";
|
|
19085
19034
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19086
|
-
const [pendingValue, setPendingValue] =
|
|
19035
|
+
const [pendingValue, setPendingValue] = React76.useState(
|
|
19087
19036
|
value ?? null
|
|
19088
19037
|
);
|
|
19089
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19090
|
-
const mobileListRef =
|
|
19091
|
-
const scrollSettleTimeoutRef =
|
|
19092
|
-
const scrollAnimationFrameRef =
|
|
19093
|
-
const getTargetIndex =
|
|
19038
|
+
const [mobileScrollTop, setMobileScrollTop] = React76.useState(0);
|
|
19039
|
+
const mobileListRef = React76.useRef(null);
|
|
19040
|
+
const scrollSettleTimeoutRef = React76.useRef(null);
|
|
19041
|
+
const scrollAnimationFrameRef = React76.useRef(null);
|
|
19042
|
+
const getTargetIndex = React76.useCallback(
|
|
19094
19043
|
(targetValue) => {
|
|
19095
19044
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19096
19045
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19097
19046
|
},
|
|
19098
19047
|
[options]
|
|
19099
19048
|
);
|
|
19100
|
-
const syncScrollPosition =
|
|
19049
|
+
const syncScrollPosition = React76.useCallback(
|
|
19101
19050
|
(targetValue, behavior = "instant") => {
|
|
19102
19051
|
const targetIndex = getTargetIndex(targetValue);
|
|
19103
19052
|
if (targetIndex < 0) return;
|
|
@@ -19116,27 +19065,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19116
19065
|
},
|
|
19117
19066
|
[getTargetIndex, options]
|
|
19118
19067
|
);
|
|
19119
|
-
const clearScrollSettleTimeout =
|
|
19068
|
+
const clearScrollSettleTimeout = React76.useCallback(() => {
|
|
19120
19069
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19121
19070
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19122
19071
|
scrollSettleTimeoutRef.current = null;
|
|
19123
19072
|
}, []);
|
|
19124
|
-
const clearScrollAnimationFrame =
|
|
19073
|
+
const clearScrollAnimationFrame = React76.useCallback(() => {
|
|
19125
19074
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19126
19075
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19127
19076
|
scrollAnimationFrameRef.current = null;
|
|
19128
19077
|
}, []);
|
|
19129
|
-
|
|
19078
|
+
React76.useEffect(
|
|
19130
19079
|
() => () => {
|
|
19131
19080
|
clearScrollSettleTimeout();
|
|
19132
19081
|
clearScrollAnimationFrame();
|
|
19133
19082
|
},
|
|
19134
19083
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19135
19084
|
);
|
|
19136
|
-
|
|
19085
|
+
React76.useEffect(() => {
|
|
19137
19086
|
setPendingValue(value ?? null);
|
|
19138
19087
|
}, [value]);
|
|
19139
|
-
|
|
19088
|
+
React76.useLayoutEffect(() => {
|
|
19140
19089
|
if (!isMobile3 || !isOpen) return;
|
|
19141
19090
|
const frameId = window.requestAnimationFrame(() => {
|
|
19142
19091
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19145,7 +19094,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19145
19094
|
window.cancelAnimationFrame(frameId);
|
|
19146
19095
|
};
|
|
19147
19096
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19148
|
-
const settleScroll =
|
|
19097
|
+
const settleScroll = React76.useCallback(() => {
|
|
19149
19098
|
if (!mobileListRef.current) return;
|
|
19150
19099
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19151
19100
|
const nextOption = options[nextIndex];
|
|
@@ -19157,13 +19106,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19157
19106
|
}
|
|
19158
19107
|
setPendingValue(nextOption);
|
|
19159
19108
|
}, [options, pendingValue]);
|
|
19160
|
-
const scheduleScrollSettle =
|
|
19109
|
+
const scheduleScrollSettle = React76.useCallback(() => {
|
|
19161
19110
|
clearScrollSettleTimeout();
|
|
19162
19111
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19163
19112
|
settleScroll();
|
|
19164
19113
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19165
19114
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19166
|
-
const handleScroll =
|
|
19115
|
+
const handleScroll = React76.useCallback(() => {
|
|
19167
19116
|
if (!mobileListRef.current) return;
|
|
19168
19117
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19169
19118
|
clearScrollAnimationFrame();
|
|
@@ -19173,7 +19122,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19173
19122
|
});
|
|
19174
19123
|
scheduleScrollSettle();
|
|
19175
19124
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19176
|
-
const focusOptionByIndex =
|
|
19125
|
+
const focusOptionByIndex = React76.useCallback(
|
|
19177
19126
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19178
19127
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19179
19128
|
const option = options[index];
|
|
@@ -19191,7 +19140,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19191
19140
|
},
|
|
19192
19141
|
[options, scheduleScrollSettle]
|
|
19193
19142
|
);
|
|
19194
|
-
const handleOptionClick =
|
|
19143
|
+
const handleOptionClick = React76.useCallback(
|
|
19195
19144
|
(option) => {
|
|
19196
19145
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19197
19146
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19200,7 +19149,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19200
19149
|
},
|
|
19201
19150
|
[disabled, focusOptionByIndex, options]
|
|
19202
19151
|
);
|
|
19203
|
-
const moveByStep =
|
|
19152
|
+
const moveByStep = React76.useCallback(
|
|
19204
19153
|
(step) => {
|
|
19205
19154
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19206
19155
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19212,7 +19161,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19212
19161
|
},
|
|
19213
19162
|
[focusOptionByIndex, options, pendingValue]
|
|
19214
19163
|
);
|
|
19215
|
-
const moveToBoundary =
|
|
19164
|
+
const moveToBoundary = React76.useCallback(
|
|
19216
19165
|
(boundary) => {
|
|
19217
19166
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19218
19167
|
if (targetIndex >= 0) {
|
|
@@ -19221,7 +19170,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19221
19170
|
},
|
|
19222
19171
|
[focusOptionByIndex, options]
|
|
19223
19172
|
);
|
|
19224
|
-
const syncPendingValue =
|
|
19173
|
+
const syncPendingValue = React76.useCallback(
|
|
19225
19174
|
(nextValue) => {
|
|
19226
19175
|
const normalizedValue = nextValue ?? null;
|
|
19227
19176
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19249,9 +19198,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19249
19198
|
}
|
|
19250
19199
|
|
|
19251
19200
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19252
|
-
import * as
|
|
19201
|
+
import * as React77 from "react";
|
|
19253
19202
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19254
|
-
const reactId =
|
|
19203
|
+
const reactId = React77.useId().replace(/:/g, "");
|
|
19255
19204
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19256
19205
|
const triggerId = `${baseId}-trigger`;
|
|
19257
19206
|
const labelId = `${baseId}-label`;
|
|
@@ -19261,7 +19210,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19261
19210
|
const listboxId = `${baseId}-listbox`;
|
|
19262
19211
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19263
19212
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19264
|
-
const getOptionId2 =
|
|
19213
|
+
const getOptionId2 = React77.useCallback(
|
|
19265
19214
|
(index) => `${baseId}-option-${index}`,
|
|
19266
19215
|
[baseId]
|
|
19267
19216
|
);
|
|
@@ -19279,8 +19228,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19279
19228
|
}
|
|
19280
19229
|
|
|
19281
19230
|
// src/airbnb-fields/select/Select.tsx
|
|
19282
|
-
import { jsx as
|
|
19283
|
-
var AirbnbSelect =
|
|
19231
|
+
import { jsx as jsx189, jsxs as jsxs122 } from "react/jsx-runtime";
|
|
19232
|
+
var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
19284
19233
|
options = [],
|
|
19285
19234
|
value,
|
|
19286
19235
|
onChange,
|
|
@@ -19307,8 +19256,8 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19307
19256
|
filterOption
|
|
19308
19257
|
}, ref) {
|
|
19309
19258
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19310
|
-
const [isOpen, setIsOpen] =
|
|
19311
|
-
const containerRef =
|
|
19259
|
+
const [isOpen, setIsOpen] = React78.useState(false);
|
|
19260
|
+
const containerRef = React78.useRef(null);
|
|
19312
19261
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19313
19262
|
const hasValue = Boolean(value);
|
|
19314
19263
|
const helperText = placeholder ?? label;
|
|
@@ -19370,12 +19319,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19370
19319
|
onOutsideClick: () => setIsOpen(false),
|
|
19371
19320
|
isDisabled: !isOpen || isMobile3
|
|
19372
19321
|
});
|
|
19373
|
-
|
|
19322
|
+
React78.useEffect(() => {
|
|
19374
19323
|
if (isBlocked) {
|
|
19375
19324
|
setIsOpen(false);
|
|
19376
19325
|
}
|
|
19377
19326
|
}, [isBlocked]);
|
|
19378
|
-
|
|
19327
|
+
React78.useEffect(
|
|
19379
19328
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19380
19329
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19381
19330
|
return;
|
|
@@ -19387,7 +19336,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19387
19336
|
},
|
|
19388
19337
|
[onChange, filteredOptions, value]
|
|
19389
19338
|
);
|
|
19390
|
-
const handleMobileOpenChange =
|
|
19339
|
+
const handleMobileOpenChange = React78.useCallback(
|
|
19391
19340
|
(nextOpen) => {
|
|
19392
19341
|
if (isBlocked && nextOpen) return;
|
|
19393
19342
|
setIsOpen(nextOpen);
|
|
@@ -19398,7 +19347,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19398
19347
|
},
|
|
19399
19348
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19400
19349
|
);
|
|
19401
|
-
const handleMobileDone =
|
|
19350
|
+
const handleMobileDone = React78.useCallback(() => {
|
|
19402
19351
|
if (isBlocked) return;
|
|
19403
19352
|
const finalOption = pendingValue;
|
|
19404
19353
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19407,7 +19356,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19407
19356
|
setIsOpen(false);
|
|
19408
19357
|
focusTrigger();
|
|
19409
19358
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19410
|
-
const handleTriggerClick =
|
|
19359
|
+
const handleTriggerClick = React78.useCallback(() => {
|
|
19411
19360
|
if (isBlocked) return;
|
|
19412
19361
|
setIsOpen((prev) => {
|
|
19413
19362
|
const nextOpen = !prev;
|
|
@@ -19460,13 +19409,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19460
19409
|
handleMobileOpenChange(false);
|
|
19461
19410
|
}
|
|
19462
19411
|
};
|
|
19463
|
-
return /* @__PURE__ */
|
|
19412
|
+
return /* @__PURE__ */ jsxs122(
|
|
19464
19413
|
"div",
|
|
19465
19414
|
{
|
|
19466
19415
|
ref: containerRef,
|
|
19467
19416
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19468
19417
|
children: [
|
|
19469
|
-
name && /* @__PURE__ */
|
|
19418
|
+
name && /* @__PURE__ */ jsx189("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19470
19419
|
renderTrigger ? renderTrigger({
|
|
19471
19420
|
id: triggerId,
|
|
19472
19421
|
open: isOpen,
|
|
@@ -19487,7 +19436,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19487
19436
|
onClick: handleTriggerClick,
|
|
19488
19437
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19489
19438
|
onBlur
|
|
19490
|
-
}) : /* @__PURE__ */
|
|
19439
|
+
}) : /* @__PURE__ */ jsx189(
|
|
19491
19440
|
AirbnbSelectTrigger,
|
|
19492
19441
|
{
|
|
19493
19442
|
id: triggerId,
|
|
@@ -19514,7 +19463,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19514
19463
|
onBlur
|
|
19515
19464
|
}
|
|
19516
19465
|
),
|
|
19517
|
-
isMobile3 ? /* @__PURE__ */
|
|
19466
|
+
isMobile3 ? /* @__PURE__ */ jsx189(
|
|
19518
19467
|
AirbnbSelectMobileContent,
|
|
19519
19468
|
{
|
|
19520
19469
|
open: isOpen,
|
|
@@ -19539,7 +19488,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19539
19488
|
getOptionId: getOptionId2,
|
|
19540
19489
|
noOptionsMessage
|
|
19541
19490
|
}
|
|
19542
|
-
) : /* @__PURE__ */
|
|
19491
|
+
) : /* @__PURE__ */ jsx189(
|
|
19543
19492
|
AirbnbSelectDesktopContent,
|
|
19544
19493
|
{
|
|
19545
19494
|
isOpen,
|
|
@@ -19573,13 +19522,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19573
19522
|
});
|
|
19574
19523
|
|
|
19575
19524
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19576
|
-
import { jsx as
|
|
19525
|
+
import { jsx as jsx190, jsxs as jsxs123 } from "react/jsx-runtime";
|
|
19577
19526
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19578
19527
|
const label = String(option.label);
|
|
19579
19528
|
const value = String(option.value);
|
|
19580
19529
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19581
19530
|
}
|
|
19582
|
-
var AirbnbPhoneField =
|
|
19531
|
+
var AirbnbPhoneField = React79.forwardRef(
|
|
19583
19532
|
({
|
|
19584
19533
|
label,
|
|
19585
19534
|
topLabel,
|
|
@@ -19603,9 +19552,9 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19603
19552
|
codePlaceholder = "+00",
|
|
19604
19553
|
defaultCode
|
|
19605
19554
|
}, ref) => {
|
|
19606
|
-
const inputId =
|
|
19555
|
+
const inputId = React79.useId();
|
|
19607
19556
|
const effectiveCode = value?.code || defaultCode || "";
|
|
19608
|
-
const codeOptions =
|
|
19557
|
+
const codeOptions = React79.useMemo(
|
|
19609
19558
|
() => options.map((option) => ({
|
|
19610
19559
|
value: option.value,
|
|
19611
19560
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19613,7 +19562,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19613
19562
|
})),
|
|
19614
19563
|
[options]
|
|
19615
19564
|
);
|
|
19616
|
-
const selectedCodeOption =
|
|
19565
|
+
const selectedCodeOption = React79.useMemo(
|
|
19617
19566
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19618
19567
|
[codeOptions, effectiveCode]
|
|
19619
19568
|
);
|
|
@@ -19621,9 +19570,9 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19621
19570
|
const hasInvalidState = Boolean(error) || Boolean(invalid);
|
|
19622
19571
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
19623
19572
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
19624
|
-
return /* @__PURE__ */
|
|
19625
|
-
name && /* @__PURE__ */
|
|
19626
|
-
codeName && /* @__PURE__ */
|
|
19573
|
+
return /* @__PURE__ */ jsxs123("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
19574
|
+
name && /* @__PURE__ */ jsx190("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
19575
|
+
codeName && /* @__PURE__ */ jsx190(
|
|
19627
19576
|
"input",
|
|
19628
19577
|
{
|
|
19629
19578
|
type: "hidden",
|
|
@@ -19632,7 +19581,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19632
19581
|
disabled
|
|
19633
19582
|
}
|
|
19634
19583
|
),
|
|
19635
|
-
numberName && /* @__PURE__ */
|
|
19584
|
+
numberName && /* @__PURE__ */ jsx190(
|
|
19636
19585
|
"input",
|
|
19637
19586
|
{
|
|
19638
19587
|
type: "hidden",
|
|
@@ -19641,7 +19590,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19641
19590
|
disabled
|
|
19642
19591
|
}
|
|
19643
19592
|
),
|
|
19644
|
-
topLabel && /* @__PURE__ */
|
|
19593
|
+
topLabel && /* @__PURE__ */ jsx190(
|
|
19645
19594
|
"label",
|
|
19646
19595
|
{
|
|
19647
19596
|
htmlFor: inputId,
|
|
@@ -19649,8 +19598,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19649
19598
|
children: topLabel
|
|
19650
19599
|
}
|
|
19651
19600
|
),
|
|
19652
|
-
/* @__PURE__ */
|
|
19653
|
-
/* @__PURE__ */
|
|
19601
|
+
/* @__PURE__ */ jsxs123("div", { className: "flex items-stretch", children: [
|
|
19602
|
+
/* @__PURE__ */ jsx190(
|
|
19654
19603
|
AirbnbSelect,
|
|
19655
19604
|
{
|
|
19656
19605
|
ref,
|
|
@@ -19679,7 +19628,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19679
19628
|
onClick,
|
|
19680
19629
|
onKeyDown,
|
|
19681
19630
|
valueLabel
|
|
19682
|
-
}) => /* @__PURE__ */
|
|
19631
|
+
}) => /* @__PURE__ */ jsxs123(
|
|
19683
19632
|
"button",
|
|
19684
19633
|
{
|
|
19685
19634
|
id,
|
|
@@ -19700,8 +19649,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19700
19649
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
19701
19650
|
),
|
|
19702
19651
|
children: [
|
|
19703
|
-
/* @__PURE__ */
|
|
19704
|
-
/* @__PURE__ */
|
|
19652
|
+
/* @__PURE__ */ jsx190("span", { children: valueLabel ?? codePlaceholder }),
|
|
19653
|
+
/* @__PURE__ */ jsx190(
|
|
19705
19654
|
ChevronDown6,
|
|
19706
19655
|
{
|
|
19707
19656
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
@@ -19713,7 +19662,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19713
19662
|
)
|
|
19714
19663
|
}
|
|
19715
19664
|
),
|
|
19716
|
-
/* @__PURE__ */
|
|
19665
|
+
/* @__PURE__ */ jsx190(
|
|
19717
19666
|
AirbnbInput,
|
|
19718
19667
|
{
|
|
19719
19668
|
id: inputId,
|
|
@@ -19742,18 +19691,18 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19742
19691
|
}
|
|
19743
19692
|
)
|
|
19744
19693
|
] }),
|
|
19745
|
-
error && /* @__PURE__ */
|
|
19694
|
+
error && /* @__PURE__ */ jsx190(FieldErrorMessage, { message: error })
|
|
19746
19695
|
] });
|
|
19747
19696
|
}
|
|
19748
19697
|
);
|
|
19749
19698
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19750
19699
|
|
|
19751
19700
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19752
|
-
import * as
|
|
19701
|
+
import * as React80 from "react";
|
|
19753
19702
|
import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
|
|
19754
19703
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
19755
19704
|
import { useCallback as useCallback57 } from "react";
|
|
19756
|
-
import { jsx as
|
|
19705
|
+
import { jsx as jsx191, jsxs as jsxs124 } from "react/jsx-runtime";
|
|
19757
19706
|
var ROW_HEIGHT = 48;
|
|
19758
19707
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
19759
19708
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -19793,13 +19742,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19793
19742
|
loadingMessage
|
|
19794
19743
|
}, ref) => {
|
|
19795
19744
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19796
|
-
const reactId =
|
|
19797
|
-
const [open, setOpen] =
|
|
19798
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
19799
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19800
|
-
const containerRef =
|
|
19801
|
-
const triggerRef =
|
|
19802
|
-
const inputRef =
|
|
19745
|
+
const reactId = React80.useId();
|
|
19746
|
+
const [open, setOpen] = React80.useState(false);
|
|
19747
|
+
const [internalSearchValue, setInternalSearchValue] = React80.useState("");
|
|
19748
|
+
const [highlightedIndex, setHighlightedIndex] = React80.useState(-1);
|
|
19749
|
+
const containerRef = React80.useRef(null);
|
|
19750
|
+
const triggerRef = React80.useRef(null);
|
|
19751
|
+
const inputRef = React80.useRef(null);
|
|
19803
19752
|
const listboxId = `${reactId}-listbox`;
|
|
19804
19753
|
const labelId = `${reactId}-label`;
|
|
19805
19754
|
const valueId = `${reactId}-value`;
|
|
@@ -19808,13 +19757,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19808
19757
|
const searchInputId = `${reactId}-search`;
|
|
19809
19758
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19810
19759
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19811
|
-
const visibleOptions =
|
|
19760
|
+
const visibleOptions = React80.useMemo(() => {
|
|
19812
19761
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19813
19762
|
return options;
|
|
19814
19763
|
}
|
|
19815
19764
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19816
19765
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19817
|
-
const selectedIndex =
|
|
19766
|
+
const selectedIndex = React80.useMemo(
|
|
19818
19767
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19819
19768
|
[value?.value, visibleOptions]
|
|
19820
19769
|
);
|
|
@@ -19840,7 +19789,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19840
19789
|
},
|
|
19841
19790
|
[handleOnOpenChange]
|
|
19842
19791
|
);
|
|
19843
|
-
|
|
19792
|
+
React80.useEffect(() => {
|
|
19844
19793
|
if (isBlocked) {
|
|
19845
19794
|
setSelectOpen(false);
|
|
19846
19795
|
return;
|
|
@@ -19853,7 +19802,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19853
19802
|
window.cancelAnimationFrame(frameId);
|
|
19854
19803
|
};
|
|
19855
19804
|
}, [isBlocked, open, setSelectOpen]);
|
|
19856
|
-
|
|
19805
|
+
React80.useEffect(() => {
|
|
19857
19806
|
if (!open) {
|
|
19858
19807
|
setHighlightedIndex(-1);
|
|
19859
19808
|
return;
|
|
@@ -19921,7 +19870,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19921
19870
|
}
|
|
19922
19871
|
}
|
|
19923
19872
|
}
|
|
19924
|
-
const content = /* @__PURE__ */
|
|
19873
|
+
const content = /* @__PURE__ */ jsx191(
|
|
19925
19874
|
AirbnbSearchableSelectContent,
|
|
19926
19875
|
{
|
|
19927
19876
|
inputId: searchInputId,
|
|
@@ -19948,10 +19897,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19948
19897
|
onOptionHover: setHighlightedIndex
|
|
19949
19898
|
}
|
|
19950
19899
|
);
|
|
19951
|
-
|
|
19952
|
-
return /* @__PURE__ */
|
|
19953
|
-
name && /* @__PURE__ */
|
|
19954
|
-
/* @__PURE__ */
|
|
19900
|
+
React80.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
19901
|
+
return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
19902
|
+
name && /* @__PURE__ */ jsx191("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19903
|
+
/* @__PURE__ */ jsx191(
|
|
19955
19904
|
AirbnbFieldTrigger,
|
|
19956
19905
|
{
|
|
19957
19906
|
id: `${reactId}-trigger`,
|
|
@@ -19985,7 +19934,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19985
19934
|
},
|
|
19986
19935
|
onKeyDown: handleTriggerKeyDown,
|
|
19987
19936
|
onBlur,
|
|
19988
|
-
trailingAdornment: /* @__PURE__ */
|
|
19937
|
+
trailingAdornment: /* @__PURE__ */ jsx191(
|
|
19989
19938
|
ChevronDown7,
|
|
19990
19939
|
{
|
|
19991
19940
|
className: cn(
|
|
@@ -19996,7 +19945,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19996
19945
|
)
|
|
19997
19946
|
}
|
|
19998
19947
|
),
|
|
19999
|
-
isMobile3 ? /* @__PURE__ */
|
|
19948
|
+
isMobile3 ? /* @__PURE__ */ jsx191(
|
|
20000
19949
|
Drawer,
|
|
20001
19950
|
{
|
|
20002
19951
|
open,
|
|
@@ -20008,13 +19957,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20008
19957
|
}
|
|
20009
19958
|
closeSelect();
|
|
20010
19959
|
},
|
|
20011
|
-
children: /* @__PURE__ */
|
|
20012
|
-
/* @__PURE__ */
|
|
20013
|
-
/* @__PURE__ */
|
|
20014
|
-
/* @__PURE__ */
|
|
19960
|
+
children: /* @__PURE__ */ jsxs124(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
19961
|
+
/* @__PURE__ */ jsx191(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
19962
|
+
/* @__PURE__ */ jsx191(DrawerDescription, { className: "sr-only", children: label }),
|
|
19963
|
+
/* @__PURE__ */ jsx191("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
20015
19964
|
] })
|
|
20016
19965
|
}
|
|
20017
|
-
) : open ? /* @__PURE__ */
|
|
19966
|
+
) : open ? /* @__PURE__ */ jsx191(
|
|
20018
19967
|
"div",
|
|
20019
19968
|
{
|
|
20020
19969
|
className: cn(
|
|
@@ -20026,7 +19975,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20026
19975
|
) : null
|
|
20027
19976
|
] });
|
|
20028
19977
|
};
|
|
20029
|
-
var AirbnbSearchableSelect =
|
|
19978
|
+
var AirbnbSearchableSelect = React80.forwardRef(
|
|
20030
19979
|
AirbnbSearchableSelectInternal
|
|
20031
19980
|
);
|
|
20032
19981
|
function AirbnbSearchableSelectContent({
|
|
@@ -20053,9 +20002,9 @@ function AirbnbSearchableSelectContent({
|
|
|
20053
20002
|
onOptionClick,
|
|
20054
20003
|
onOptionHover
|
|
20055
20004
|
}) {
|
|
20056
|
-
const listRef =
|
|
20057
|
-
const lastLoadMoreOptionsLengthRef =
|
|
20058
|
-
const previousHighlightedIndexRef =
|
|
20005
|
+
const listRef = React80.useRef(null);
|
|
20006
|
+
const lastLoadMoreOptionsLengthRef = React80.useRef(null);
|
|
20007
|
+
const previousHighlightedIndexRef = React80.useRef(highlightedIndex);
|
|
20059
20008
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
20060
20009
|
const virtualizer = useVirtualizer3({
|
|
20061
20010
|
count: rowCount,
|
|
@@ -20066,7 +20015,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20066
20015
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20067
20016
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20068
20017
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20069
|
-
|
|
20018
|
+
React80.useEffect(() => {
|
|
20070
20019
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20071
20020
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20072
20021
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20074,23 +20023,23 @@ function AirbnbSearchableSelectContent({
|
|
|
20074
20023
|
onLoadMore?.();
|
|
20075
20024
|
}
|
|
20076
20025
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20077
|
-
|
|
20026
|
+
React80.useEffect(() => {
|
|
20078
20027
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20079
20028
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20080
20029
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
20081
20030
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
20082
20031
|
}
|
|
20083
20032
|
}, [highlightedIndex, virtualizer]);
|
|
20084
|
-
return /* @__PURE__ */
|
|
20085
|
-
/* @__PURE__ */
|
|
20086
|
-
/* @__PURE__ */
|
|
20033
|
+
return /* @__PURE__ */ jsxs124("div", { className: "p-2", children: [
|
|
20034
|
+
/* @__PURE__ */ jsxs124("div", { className: "relative mb-2", children: [
|
|
20035
|
+
/* @__PURE__ */ jsx191(
|
|
20087
20036
|
Search4,
|
|
20088
20037
|
{
|
|
20089
20038
|
"aria-hidden": "true",
|
|
20090
20039
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
20091
20040
|
}
|
|
20092
20041
|
),
|
|
20093
|
-
/* @__PURE__ */
|
|
20042
|
+
/* @__PURE__ */ jsx191(
|
|
20094
20043
|
"input",
|
|
20095
20044
|
{
|
|
20096
20045
|
id: inputId,
|
|
@@ -20109,7 +20058,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20109
20058
|
}
|
|
20110
20059
|
)
|
|
20111
20060
|
] }),
|
|
20112
|
-
loading && options.length === 0 ? /* @__PURE__ */
|
|
20061
|
+
loading && options.length === 0 ? /* @__PURE__ */ jsx191("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx191("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx191(
|
|
20113
20062
|
"div",
|
|
20114
20063
|
{
|
|
20115
20064
|
id: listboxId,
|
|
@@ -20118,7 +20067,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20118
20067
|
"aria-labelledby": labelId,
|
|
20119
20068
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
20120
20069
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
20121
|
-
children: /* @__PURE__ */
|
|
20070
|
+
children: /* @__PURE__ */ jsx191(
|
|
20122
20071
|
"div",
|
|
20123
20072
|
{
|
|
20124
20073
|
className: "relative w-full",
|
|
@@ -20126,7 +20075,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20126
20075
|
children: virtualItems.map((virtualItem) => {
|
|
20127
20076
|
const option = options[virtualItem.index];
|
|
20128
20077
|
if (!option) {
|
|
20129
|
-
return /* @__PURE__ */
|
|
20078
|
+
return /* @__PURE__ */ jsx191(
|
|
20130
20079
|
"div",
|
|
20131
20080
|
{
|
|
20132
20081
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -20141,7 +20090,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20141
20090
|
}
|
|
20142
20091
|
const isSelected = value?.value === option.value;
|
|
20143
20092
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
20144
|
-
return /* @__PURE__ */
|
|
20093
|
+
return /* @__PURE__ */ jsx191(
|
|
20145
20094
|
"button",
|
|
20146
20095
|
{
|
|
20147
20096
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -20163,7 +20112,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20163
20112
|
height: `${virtualItem.size}px`,
|
|
20164
20113
|
transform: `translateY(${virtualItem.start}px)`
|
|
20165
20114
|
},
|
|
20166
|
-
children: /* @__PURE__ */
|
|
20115
|
+
children: /* @__PURE__ */ jsx191("span", { className: "truncate text-center", children: String(option.label) })
|
|
20167
20116
|
},
|
|
20168
20117
|
`${String(option.value)}-${virtualItem.index}`
|
|
20169
20118
|
);
|
|
@@ -20192,16 +20141,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20192
20141
|
}
|
|
20193
20142
|
|
|
20194
20143
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20195
|
-
import * as
|
|
20144
|
+
import * as React81 from "react";
|
|
20196
20145
|
import { useTranslation as useTranslation44 } from "react-i18next";
|
|
20197
20146
|
import { Search as Search5, X as X11 } from "lucide-react";
|
|
20198
|
-
import { jsx as
|
|
20199
|
-
var AirbnbSearchInput =
|
|
20147
|
+
import { jsx as jsx192, jsxs as jsxs125 } from "react/jsx-runtime";
|
|
20148
|
+
var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20200
20149
|
const { t } = useTranslation44();
|
|
20201
20150
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20202
|
-
return /* @__PURE__ */
|
|
20203
|
-
/* @__PURE__ */
|
|
20204
|
-
/* @__PURE__ */
|
|
20151
|
+
return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
20152
|
+
/* @__PURE__ */ jsx192(Search5, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
|
|
20153
|
+
/* @__PURE__ */ jsx192(
|
|
20205
20154
|
"input",
|
|
20206
20155
|
{
|
|
20207
20156
|
...props,
|
|
@@ -20220,13 +20169,13 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20220
20169
|
)
|
|
20221
20170
|
}
|
|
20222
20171
|
),
|
|
20223
|
-
onReset && /* @__PURE__ */
|
|
20172
|
+
onReset && /* @__PURE__ */ jsx192(
|
|
20224
20173
|
Button,
|
|
20225
20174
|
{
|
|
20226
20175
|
variant: "ghost",
|
|
20227
20176
|
onClick: onReset,
|
|
20228
20177
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
20229
|
-
children: /* @__PURE__ */
|
|
20178
|
+
children: /* @__PURE__ */ jsx192(X11, { className: "h-5 w-5" })
|
|
20230
20179
|
}
|
|
20231
20180
|
)
|
|
20232
20181
|
] });
|
|
@@ -20234,11 +20183,11 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20234
20183
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20235
20184
|
|
|
20236
20185
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20237
|
-
import * as
|
|
20186
|
+
import * as React82 from "react";
|
|
20238
20187
|
import * as SwitchPrimitives2 from "@radix-ui/react-switch";
|
|
20239
|
-
import { Check as
|
|
20240
|
-
import { Fragment as Fragment18, jsx as
|
|
20241
|
-
var AirbnbSwitch =
|
|
20188
|
+
import { Check as Check8 } from "lucide-react";
|
|
20189
|
+
import { Fragment as Fragment18, jsx as jsx193, jsxs as jsxs126 } from "react/jsx-runtime";
|
|
20190
|
+
var AirbnbSwitch = React82.forwardRef(
|
|
20242
20191
|
({
|
|
20243
20192
|
className,
|
|
20244
20193
|
value,
|
|
@@ -20252,9 +20201,9 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20252
20201
|
wrapperClassName,
|
|
20253
20202
|
...props
|
|
20254
20203
|
}, ref) => {
|
|
20255
|
-
const generatedId =
|
|
20204
|
+
const generatedId = React82.useId();
|
|
20256
20205
|
const fieldId = id || generatedId;
|
|
20257
|
-
const switchElement = /* @__PURE__ */
|
|
20206
|
+
const switchElement = /* @__PURE__ */ jsx193(
|
|
20258
20207
|
SwitchPrimitives2.Root,
|
|
20259
20208
|
{
|
|
20260
20209
|
ref,
|
|
@@ -20274,15 +20223,15 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20274
20223
|
"aria-busy": loading,
|
|
20275
20224
|
"aria-readonly": readOnly,
|
|
20276
20225
|
...props,
|
|
20277
|
-
children: /* @__PURE__ */
|
|
20226
|
+
children: /* @__PURE__ */ jsx193(
|
|
20278
20227
|
SwitchPrimitives2.Thumb,
|
|
20279
20228
|
{
|
|
20280
20229
|
className: cn(
|
|
20281
20230
|
"flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.22)] transition-transform duration-200",
|
|
20282
20231
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
20283
20232
|
),
|
|
20284
|
-
children: /* @__PURE__ */
|
|
20285
|
-
|
|
20233
|
+
children: /* @__PURE__ */ jsx193(
|
|
20234
|
+
Check8,
|
|
20286
20235
|
{
|
|
20287
20236
|
"aria-hidden": "true",
|
|
20288
20237
|
className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
|
|
@@ -20296,10 +20245,10 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20296
20245
|
if (!label && !error) {
|
|
20297
20246
|
return switchElement;
|
|
20298
20247
|
}
|
|
20299
|
-
return /* @__PURE__ */
|
|
20300
|
-
/* @__PURE__ */
|
|
20248
|
+
return /* @__PURE__ */ jsxs126(Fragment18, { children: [
|
|
20249
|
+
/* @__PURE__ */ jsxs126("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
|
|
20301
20250
|
switchElement,
|
|
20302
|
-
label && /* @__PURE__ */
|
|
20251
|
+
label && /* @__PURE__ */ jsx193(
|
|
20303
20252
|
Label,
|
|
20304
20253
|
{
|
|
20305
20254
|
htmlFor: fieldId,
|
|
@@ -20311,7 +20260,7 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20311
20260
|
}
|
|
20312
20261
|
)
|
|
20313
20262
|
] }),
|
|
20314
|
-
error && /* @__PURE__ */
|
|
20263
|
+
error && /* @__PURE__ */ jsx193(ErrorMessage, { disabled, children: error })
|
|
20315
20264
|
] });
|
|
20316
20265
|
}
|
|
20317
20266
|
);
|
|
@@ -20617,6 +20566,7 @@ export {
|
|
|
20617
20566
|
VerticalTabs,
|
|
20618
20567
|
VideoModal,
|
|
20619
20568
|
VideoPlayer,
|
|
20569
|
+
VisualCheckbox,
|
|
20620
20570
|
Webcam,
|
|
20621
20571
|
WideButton,
|
|
20622
20572
|
addSupportEmailToMessage,
|