@chekinapp/ui 0.0.137 → 0.0.139
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 +551 -632
- 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 +483 -565
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -12973,8 +12973,8 @@ function ComboboxTrigger({
|
|
|
12973
12973
|
"span",
|
|
12974
12974
|
{
|
|
12975
12975
|
className: cn(
|
|
12976
|
-
"grid min-w-0 max-w-full
|
|
12977
|
-
isMulti
|
|
12976
|
+
"grid min-w-0 max-w-full",
|
|
12977
|
+
isMulti ? "w-min flex-none min-w-[40px]" : "w-full overflow-hidden",
|
|
12978
12978
|
!searchable && "sr-only"
|
|
12979
12979
|
),
|
|
12980
12980
|
children: [
|
|
@@ -13006,7 +13006,7 @@ function ComboboxTrigger({
|
|
|
13006
13006
|
"aria-activedescendant": activeOptionId,
|
|
13007
13007
|
className: cn(
|
|
13008
13008
|
"col-start-1 row-start-1 m-0 box-border w-full min-w-0 border-0 bg-transparent p-0 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
|
|
13009
|
-
isMulti
|
|
13009
|
+
isMulti ? "min-w-[40px]" : "text-ellipsis",
|
|
13010
13010
|
readOnly && !disabled && !loading && "cursor-default",
|
|
13011
13011
|
disabled && !loading && "cursor-not-allowed",
|
|
13012
13012
|
loading && "!cursor-progress",
|
|
@@ -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,12 +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
|
|
|
14747
|
-
// src/dashboard/select-checkboxes/
|
|
14720
|
+
// src/dashboard/select-checkboxes/VisualCheckbox.tsx
|
|
14748
14721
|
import { Check as Check7 } from "lucide-react";
|
|
14749
|
-
import { jsx as jsx163
|
|
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
|
+
|
|
14740
|
+
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
14741
|
+
import { jsx as jsx164, jsxs as jsxs102 } from "react/jsx-runtime";
|
|
14750
14742
|
function SelectCheckboxOption(props) {
|
|
14751
14743
|
const {
|
|
14752
14744
|
option,
|
|
@@ -14780,22 +14772,10 @@ function SelectCheckboxOption(props) {
|
|
|
14780
14772
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
14781
14773
|
),
|
|
14782
14774
|
children: [
|
|
14783
|
-
/* @__PURE__ */
|
|
14784
|
-
"span",
|
|
14785
|
-
{
|
|
14786
|
-
"aria-hidden": "true",
|
|
14787
|
-
"data-state": isSelected ? "checked" : "unchecked",
|
|
14788
|
-
className: cn(
|
|
14789
|
-
"checkbox__control pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-solid",
|
|
14790
|
-
isSelected ? "border-[var(--checkbox-checked-border)] bg-[var(--checkbox-checked-bg)] text-[var(--checkbox-check-color)]" : "border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]",
|
|
14791
|
-
isDisabled && "opacity-50"
|
|
14792
|
-
),
|
|
14793
|
-
children: isSelected && /* @__PURE__ */ jsx163(Check7, { className: "checkbox__icon h-3 w-3" })
|
|
14794
|
-
}
|
|
14795
|
-
),
|
|
14775
|
+
/* @__PURE__ */ jsx164(VisualCheckbox, { checked: isSelected, disabled: isDisabled }),
|
|
14796
14776
|
/* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
14797
|
-
/* @__PURE__ */
|
|
14798
|
-
option.description && /* @__PURE__ */
|
|
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 })
|
|
14799
14779
|
] })
|
|
14800
14780
|
]
|
|
14801
14781
|
}
|
|
@@ -14803,22 +14783,12 @@ function SelectCheckboxOption(props) {
|
|
|
14803
14783
|
}
|
|
14804
14784
|
|
|
14805
14785
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
14806
|
-
import * as React58 from "react";
|
|
14807
14786
|
import { ChevronDown as ChevronDown3 } from "lucide-react";
|
|
14808
14787
|
import { useTranslation as useTranslation35 } from "react-i18next";
|
|
14809
|
-
import { jsx as
|
|
14788
|
+
import { jsx as jsx165, jsxs as jsxs103 } from "react/jsx-runtime";
|
|
14810
14789
|
function createCountTrigger(opts) {
|
|
14811
14790
|
const { getValueText, getTotalCount } = opts;
|
|
14812
14791
|
function CountTrigger(props) {
|
|
14813
|
-
const ctDebugRenderCount = React58.useRef(0);
|
|
14814
|
-
ctDebugRenderCount.current += 1;
|
|
14815
|
-
React58.useEffect(() => {
|
|
14816
|
-
console.log("[SC-debug] CountTrigger MOUNTED");
|
|
14817
|
-
return () => {
|
|
14818
|
-
console.log("[SC-debug] CountTrigger UNMOUNTED");
|
|
14819
|
-
};
|
|
14820
|
-
}, []);
|
|
14821
|
-
console.log(`[SC-debug] CountTrigger render #${ctDebugRenderCount.current}`);
|
|
14822
14792
|
const { t } = useTranslation35();
|
|
14823
14793
|
const {
|
|
14824
14794
|
triggerId,
|
|
@@ -14868,9 +14838,9 @@ function createCountTrigger(opts) {
|
|
|
14868
14838
|
loading && "!cursor-progress"
|
|
14869
14839
|
),
|
|
14870
14840
|
children: [
|
|
14871
|
-
leftIcon && /* @__PURE__ */
|
|
14872
|
-
/* @__PURE__ */
|
|
14873
|
-
/* @__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(
|
|
14874
14844
|
ChevronDown3,
|
|
14875
14845
|
{
|
|
14876
14846
|
size: 16,
|
|
@@ -14888,8 +14858,7 @@ function createCountTrigger(opts) {
|
|
|
14888
14858
|
}
|
|
14889
14859
|
|
|
14890
14860
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
14891
|
-
import {
|
|
14892
|
-
import { jsx as jsx165, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
14861
|
+
import { jsx as jsx166, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
14893
14862
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
14894
14863
|
return /* @__PURE__ */ jsxs104(
|
|
14895
14864
|
"button",
|
|
@@ -14902,33 +14871,21 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14902
14871
|
disabled && "cursor-default opacity-40"
|
|
14903
14872
|
),
|
|
14904
14873
|
children: [
|
|
14905
|
-
/* @__PURE__ */
|
|
14906
|
-
|
|
14907
|
-
{
|
|
14908
|
-
"aria-hidden": "true",
|
|
14909
|
-
"data-state": checked ? "checked" : "unchecked",
|
|
14910
|
-
className: cn(
|
|
14911
|
-
"checkbox__control pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-solid",
|
|
14912
|
-
checked ? "border-[var(--checkbox-checked-border)] bg-[var(--checkbox-checked-bg)] text-[var(--checkbox-check-color)]" : "border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]",
|
|
14913
|
-
disabled && "opacity-50"
|
|
14914
|
-
),
|
|
14915
|
-
children: checked && /* @__PURE__ */ jsx165(Check8, { className: "checkbox__icon h-3 w-3" })
|
|
14916
|
-
}
|
|
14917
|
-
),
|
|
14918
|
-
/* @__PURE__ */ jsx165("span", { className: "flex-1", children: label })
|
|
14874
|
+
/* @__PURE__ */ jsx166(VisualCheckbox, { checked, disabled }),
|
|
14875
|
+
/* @__PURE__ */ jsx166("span", { className: "flex-1", children: label })
|
|
14919
14876
|
]
|
|
14920
14877
|
}
|
|
14921
14878
|
);
|
|
14922
14879
|
}
|
|
14923
14880
|
|
|
14924
14881
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14925
|
-
import { Fragment as Fragment16, jsx as
|
|
14882
|
+
import { Fragment as Fragment16, jsx as jsx167 } from "react/jsx-runtime";
|
|
14926
14883
|
function hasPaginationProps(props) {
|
|
14927
14884
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
|
|
14928
14885
|
}
|
|
14929
14886
|
function makeTriggerSlot(render) {
|
|
14930
14887
|
function CustomTrigger(props) {
|
|
14931
|
-
return /* @__PURE__ */
|
|
14888
|
+
return /* @__PURE__ */ jsx167(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
|
|
14932
14889
|
}
|
|
14933
14890
|
return CustomTrigger;
|
|
14934
14891
|
}
|
|
@@ -14954,64 +14911,25 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14954
14911
|
const isPaginated = hasPaginationProps(
|
|
14955
14912
|
paginationAndRest
|
|
14956
14913
|
);
|
|
14957
|
-
const
|
|
14958
|
-
const scDebugPrevPropsRef = React59.useRef({});
|
|
14959
|
-
scDebugRenderCount.current += 1;
|
|
14960
|
-
{
|
|
14961
|
-
const current = {
|
|
14962
|
-
value,
|
|
14963
|
-
defaultValue,
|
|
14964
|
-
onChange,
|
|
14965
|
-
trigger,
|
|
14966
|
-
userComponents,
|
|
14967
|
-
valueText,
|
|
14968
|
-
filterOption,
|
|
14969
|
-
rawOptions,
|
|
14970
|
-
onSearchChange
|
|
14971
|
-
};
|
|
14972
|
-
const prev = scDebugPrevPropsRef.current;
|
|
14973
|
-
const changed = [];
|
|
14974
|
-
for (const key of Object.keys(current)) {
|
|
14975
|
-
if (prev[key] !== current[key]) changed.push(key);
|
|
14976
|
-
}
|
|
14977
|
-
console.log(
|
|
14978
|
-
`[SC-debug] SelectCheckboxes render #${scDebugRenderCount.current}`,
|
|
14979
|
-
{ changed, isPaginated, isControlled: value !== void 0 }
|
|
14980
|
-
);
|
|
14981
|
-
scDebugPrevPropsRef.current = current;
|
|
14982
|
-
if (scDebugRenderCount.current === 30) {
|
|
14983
|
-
console.warn(
|
|
14984
|
-
"[SC-debug] hit 30 renders of SelectCheckboxes \u2014 opening debugger"
|
|
14985
|
-
);
|
|
14986
|
-
debugger;
|
|
14987
|
-
}
|
|
14988
|
-
}
|
|
14989
|
-
const [inputValue, setInputValue] = React59.useState("");
|
|
14914
|
+
const [inputValue, setInputValue] = React58.useState("");
|
|
14990
14915
|
const isControlled = value !== void 0;
|
|
14991
|
-
const [internalValue, setInternalValue] =
|
|
14916
|
+
const [internalValue, setInternalValue] = React58.useState(
|
|
14992
14917
|
() => defaultValue ?? []
|
|
14993
14918
|
);
|
|
14994
14919
|
const currentValue = isControlled ? value : internalValue;
|
|
14995
|
-
const selected =
|
|
14996
|
-
const
|
|
14997
|
-
const handleChange = React59.useCallback(
|
|
14920
|
+
const selected = React58.useMemo(() => currentValue ?? [], [currentValue]);
|
|
14921
|
+
const handleChange = React58.useCallback(
|
|
14998
14922
|
(next, meta) => {
|
|
14999
|
-
scDebugHandleChangeCount.current += 1;
|
|
15000
|
-
console.log(
|
|
15001
|
-
`[SC-debug] handleChange #${scDebugHandleChangeCount.current}`,
|
|
15002
|
-
{ action: meta?.action, nextLength: next.length, isControlled }
|
|
15003
|
-
);
|
|
15004
|
-
console.trace("[SC-debug] handleChange caller stack");
|
|
15005
14923
|
if (!isControlled) setInternalValue(next);
|
|
15006
14924
|
onChange?.(next, meta);
|
|
15007
14925
|
},
|
|
15008
14926
|
[isControlled, onChange]
|
|
15009
14927
|
);
|
|
15010
|
-
const flatRawOptions =
|
|
14928
|
+
const flatRawOptions = React58.useMemo(
|
|
15011
14929
|
() => flattenGroupedOptions(rawOptions),
|
|
15012
14930
|
[rawOptions]
|
|
15013
14931
|
);
|
|
15014
|
-
const filteredGrouped =
|
|
14932
|
+
const filteredGrouped = React58.useMemo(() => {
|
|
15015
14933
|
const trimmed = inputValue.trim();
|
|
15016
14934
|
if (!trimmed) return rawOptions;
|
|
15017
14935
|
return rawOptions.map((item) => {
|
|
@@ -15022,7 +14940,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15022
14940
|
return filterOption(item, trimmed) ? item : null;
|
|
15023
14941
|
}).filter((item) => item !== null);
|
|
15024
14942
|
}, [rawOptions, inputValue, filterOption]);
|
|
15025
|
-
const filteredFlat =
|
|
14943
|
+
const filteredFlat = React58.useMemo(
|
|
15026
14944
|
() => flattenGroupedOptions(filteredGrouped),
|
|
15027
14945
|
[filteredGrouped]
|
|
15028
14946
|
);
|
|
@@ -15030,7 +14948,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15030
14948
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
15031
14949
|
}, 0);
|
|
15032
14950
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
15033
|
-
const handleToggleAll =
|
|
14951
|
+
const handleToggleAll = React58.useCallback(() => {
|
|
15034
14952
|
if (allVisibleSelected) {
|
|
15035
14953
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
15036
14954
|
handleChange(
|
|
@@ -15045,19 +14963,18 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15045
14963
|
}
|
|
15046
14964
|
handleChange(merged, { action: "select" });
|
|
15047
14965
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
15048
|
-
const valueTextRef =
|
|
15049
|
-
const totalCountRef =
|
|
14966
|
+
const valueTextRef = React58.useRef(valueText);
|
|
14967
|
+
const totalCountRef = React58.useRef(flatRawOptions.length);
|
|
15050
14968
|
valueTextRef.current = valueText;
|
|
15051
14969
|
totalCountRef.current = flatRawOptions.length;
|
|
15052
|
-
const Control =
|
|
15053
|
-
console.log("[SC-debug] (re)creating Control component", { hasCustomTrigger: !!trigger });
|
|
14970
|
+
const Control = React58.useMemo(() => {
|
|
15054
14971
|
if (trigger) return makeTriggerSlot(trigger);
|
|
15055
14972
|
return createCountTrigger({
|
|
15056
14973
|
getValueText: () => valueTextRef.current,
|
|
15057
14974
|
getTotalCount: () => totalCountRef.current
|
|
15058
14975
|
});
|
|
15059
14976
|
}, [trigger]);
|
|
15060
|
-
const components =
|
|
14977
|
+
const components = React58.useMemo(
|
|
15061
14978
|
() => ({
|
|
15062
14979
|
...userComponents,
|
|
15063
14980
|
Control,
|
|
@@ -15065,7 +14982,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15065
14982
|
}),
|
|
15066
14983
|
[userComponents, Control]
|
|
15067
14984
|
);
|
|
15068
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */
|
|
14985
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ jsx167(
|
|
15069
14986
|
SelectAllRow,
|
|
15070
14987
|
{
|
|
15071
14988
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -15073,7 +14990,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15073
14990
|
onToggle: handleToggleAll
|
|
15074
14991
|
}
|
|
15075
14992
|
) : void 0;
|
|
15076
|
-
const handleInputChange =
|
|
14993
|
+
const handleInputChange = React58.useCallback(
|
|
15077
14994
|
(next) => {
|
|
15078
14995
|
setInputValue(next);
|
|
15079
14996
|
onSearchChange?.(next);
|
|
@@ -15094,7 +15011,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15094
15011
|
isMulti: true
|
|
15095
15012
|
};
|
|
15096
15013
|
if (isPaginated) {
|
|
15097
|
-
return /* @__PURE__ */
|
|
15014
|
+
return /* @__PURE__ */ jsx167(
|
|
15098
15015
|
InfiniteScrollSelect,
|
|
15099
15016
|
{
|
|
15100
15017
|
ref,
|
|
@@ -15105,7 +15022,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15105
15022
|
}
|
|
15106
15023
|
);
|
|
15107
15024
|
}
|
|
15108
|
-
return /* @__PURE__ */
|
|
15025
|
+
return /* @__PURE__ */ jsx167(
|
|
15109
15026
|
Select,
|
|
15110
15027
|
{
|
|
15111
15028
|
ref,
|
|
@@ -15116,16 +15033,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15116
15033
|
}
|
|
15117
15034
|
);
|
|
15118
15035
|
}
|
|
15119
|
-
var SelectCheckboxes =
|
|
15036
|
+
var SelectCheckboxes = React58.forwardRef(
|
|
15120
15037
|
SelectCheckboxesInternal
|
|
15121
15038
|
);
|
|
15122
15039
|
|
|
15123
15040
|
// src/dashboard/textarea/Textarea.tsx
|
|
15124
|
-
import * as
|
|
15041
|
+
import * as React60 from "react";
|
|
15125
15042
|
import { useTranslation as useTranslation37 } from "react-i18next";
|
|
15126
15043
|
|
|
15127
15044
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15128
|
-
import * as
|
|
15045
|
+
import * as React59 from "react";
|
|
15129
15046
|
var isEmptyValue2 = (value) => {
|
|
15130
15047
|
if (value === void 0 || value === null) return true;
|
|
15131
15048
|
return String(value).length === 0;
|
|
@@ -15144,12 +15061,12 @@ function useTextareaValueState({
|
|
|
15144
15061
|
value,
|
|
15145
15062
|
defaultValue
|
|
15146
15063
|
}) {
|
|
15147
|
-
const textareaRef =
|
|
15064
|
+
const textareaRef = React59.useRef(null);
|
|
15148
15065
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15149
15066
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15150
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15067
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React59.useState(propsAreEmpty);
|
|
15151
15068
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15152
|
-
const setNativeValue =
|
|
15069
|
+
const setNativeValue = React59.useCallback(
|
|
15153
15070
|
(nextValue) => {
|
|
15154
15071
|
if (isControlled) return;
|
|
15155
15072
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15159,14 +15076,14 @@ function useTextareaValueState({
|
|
|
15159
15076
|
},
|
|
15160
15077
|
[isControlled]
|
|
15161
15078
|
);
|
|
15162
|
-
const syncValueState =
|
|
15079
|
+
const syncValueState = React59.useCallback(() => {
|
|
15163
15080
|
if (!textareaRef.current) return;
|
|
15164
15081
|
setNativeValue(textareaRef.current.value);
|
|
15165
15082
|
}, [setNativeValue]);
|
|
15166
|
-
|
|
15083
|
+
React59.useLayoutEffect(() => {
|
|
15167
15084
|
syncValueState();
|
|
15168
15085
|
});
|
|
15169
|
-
|
|
15086
|
+
React59.useEffect(() => {
|
|
15170
15087
|
const textarea = textareaRef.current;
|
|
15171
15088
|
const form = textarea?.form;
|
|
15172
15089
|
if (isControlled || !form) return;
|
|
@@ -15190,10 +15107,10 @@ function useTextareaValueState({
|
|
|
15190
15107
|
}
|
|
15191
15108
|
|
|
15192
15109
|
// src/dashboard/textarea/Textarea.tsx
|
|
15193
|
-
import { jsx as
|
|
15110
|
+
import { jsx as jsx168, jsxs as jsxs105 } from "react/jsx-runtime";
|
|
15194
15111
|
var LINE_HEIGHT = 20;
|
|
15195
15112
|
var VERTICAL_PADDING = 32;
|
|
15196
|
-
var Textarea =
|
|
15113
|
+
var Textarea = React60.forwardRef(function Textarea2({
|
|
15197
15114
|
className,
|
|
15198
15115
|
textareaClassName,
|
|
15199
15116
|
label,
|
|
@@ -15221,12 +15138,12 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15221
15138
|
}, ref) {
|
|
15222
15139
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15223
15140
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15224
|
-
const reactId =
|
|
15141
|
+
const reactId = React60.useId();
|
|
15225
15142
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15226
15143
|
const { t } = useTranslation37();
|
|
15227
15144
|
const isInvalid = Boolean(invalid || error);
|
|
15228
15145
|
const isBlocked = Boolean(disabled);
|
|
15229
|
-
const resize =
|
|
15146
|
+
const resize = React60.useCallback(() => {
|
|
15230
15147
|
const el = textareaRef.current;
|
|
15231
15148
|
if (!el || !autosize) return;
|
|
15232
15149
|
el.style.height = "auto";
|
|
@@ -15236,7 +15153,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15236
15153
|
el.style.height = `${nextHeight}px`;
|
|
15237
15154
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15238
15155
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15239
|
-
|
|
15156
|
+
React60.useLayoutEffect(() => {
|
|
15240
15157
|
resize();
|
|
15241
15158
|
}, [resize, value]);
|
|
15242
15159
|
const handleInput = (event) => {
|
|
@@ -15276,11 +15193,11 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15276
15193
|
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15277
15194
|
children: [
|
|
15278
15195
|
label,
|
|
15279
|
-
tooltip && /* @__PURE__ */
|
|
15196
|
+
tooltip && /* @__PURE__ */ jsx168("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx168(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15280
15197
|
]
|
|
15281
15198
|
}
|
|
15282
15199
|
),
|
|
15283
|
-
/* @__PURE__ */
|
|
15200
|
+
/* @__PURE__ */ jsx168(
|
|
15284
15201
|
"textarea",
|
|
15285
15202
|
{
|
|
15286
15203
|
ref: combinedRef,
|
|
@@ -15312,7 +15229,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15312
15229
|
...textareaProps
|
|
15313
15230
|
}
|
|
15314
15231
|
),
|
|
15315
|
-
error && /* @__PURE__ */
|
|
15232
|
+
error && /* @__PURE__ */ jsx168(
|
|
15316
15233
|
FieldErrorMessage,
|
|
15317
15234
|
{
|
|
15318
15235
|
id: `${textareaId}-error`,
|
|
@@ -15320,20 +15237,20 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15320
15237
|
className: "mt-[1px] text-[14px]"
|
|
15321
15238
|
}
|
|
15322
15239
|
),
|
|
15323
|
-
!error && optional && /* @__PURE__ */
|
|
15324
|
-
!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 })
|
|
15325
15242
|
]
|
|
15326
15243
|
}
|
|
15327
15244
|
);
|
|
15328
15245
|
});
|
|
15329
15246
|
|
|
15330
15247
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15331
|
-
import * as
|
|
15248
|
+
import * as React62 from "react";
|
|
15332
15249
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
15333
15250
|
import { useTranslation as useTranslation38 } from "react-i18next";
|
|
15334
15251
|
|
|
15335
15252
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15336
|
-
import * as
|
|
15253
|
+
import * as React61 from "react";
|
|
15337
15254
|
|
|
15338
15255
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15339
15256
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15484,21 +15401,21 @@ function useDatePickerWheel({
|
|
|
15484
15401
|
minDate,
|
|
15485
15402
|
maxDate
|
|
15486
15403
|
}) {
|
|
15487
|
-
const years =
|
|
15488
|
-
const [draftDate, setDraftDate] =
|
|
15404
|
+
const years = React61.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15405
|
+
const [draftDate, setDraftDate] = React61.useState(
|
|
15489
15406
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15490
15407
|
);
|
|
15491
15408
|
const draftYear = draftDate.getFullYear();
|
|
15492
15409
|
const draftMonth = draftDate.getMonth();
|
|
15493
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15494
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15495
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15496
|
-
const monthListRef =
|
|
15497
|
-
const dayListRef =
|
|
15498
|
-
const yearListRef =
|
|
15499
|
-
const settleTimeoutsRef =
|
|
15500
|
-
const animationFramesRef =
|
|
15501
|
-
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(
|
|
15502
15419
|
() => ({
|
|
15503
15420
|
month: monthListRef,
|
|
15504
15421
|
day: dayListRef,
|
|
@@ -15506,7 +15423,7 @@ function useDatePickerWheel({
|
|
|
15506
15423
|
}),
|
|
15507
15424
|
[]
|
|
15508
15425
|
);
|
|
15509
|
-
const setColumnScrollTop =
|
|
15426
|
+
const setColumnScrollTop = React61.useCallback(
|
|
15510
15427
|
(column, nextScrollTop) => {
|
|
15511
15428
|
if (column === "month") {
|
|
15512
15429
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15520,19 +15437,19 @@ function useDatePickerWheel({
|
|
|
15520
15437
|
},
|
|
15521
15438
|
[]
|
|
15522
15439
|
);
|
|
15523
|
-
const clearSettleTimeout =
|
|
15440
|
+
const clearSettleTimeout = React61.useCallback((column) => {
|
|
15524
15441
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15525
15442
|
if (timeoutId === void 0) return;
|
|
15526
15443
|
window.clearTimeout(timeoutId);
|
|
15527
15444
|
delete settleTimeoutsRef.current[column];
|
|
15528
15445
|
}, []);
|
|
15529
|
-
const clearAnimationFrame =
|
|
15446
|
+
const clearAnimationFrame = React61.useCallback((column) => {
|
|
15530
15447
|
const frameId = animationFramesRef.current[column];
|
|
15531
15448
|
if (frameId === void 0) return;
|
|
15532
15449
|
window.cancelAnimationFrame(frameId);
|
|
15533
15450
|
delete animationFramesRef.current[column];
|
|
15534
15451
|
}, []);
|
|
15535
|
-
|
|
15452
|
+
React61.useEffect(
|
|
15536
15453
|
() => () => {
|
|
15537
15454
|
["month", "day", "year"].forEach((column) => {
|
|
15538
15455
|
clearSettleTimeout(column);
|
|
@@ -15541,22 +15458,22 @@ function useDatePickerWheel({
|
|
|
15541
15458
|
},
|
|
15542
15459
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15543
15460
|
);
|
|
15544
|
-
|
|
15461
|
+
React61.useEffect(() => {
|
|
15545
15462
|
if (isOpen) return;
|
|
15546
15463
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15547
15464
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15548
|
-
const months =
|
|
15465
|
+
const months = React61.useMemo(
|
|
15549
15466
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15550
15467
|
[draftYear, maxDate, minDate]
|
|
15551
15468
|
);
|
|
15552
|
-
const days =
|
|
15469
|
+
const days = React61.useMemo(
|
|
15553
15470
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15554
15471
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15555
15472
|
);
|
|
15556
15473
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15557
15474
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15558
15475
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15559
|
-
const syncScrollPositions =
|
|
15476
|
+
const syncScrollPositions = React61.useCallback(
|
|
15560
15477
|
(nextDate, behavior = "auto") => {
|
|
15561
15478
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15562
15479
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15580,7 +15497,7 @@ function useDatePickerWheel({
|
|
|
15580
15497
|
},
|
|
15581
15498
|
[maxDate, minDate, years]
|
|
15582
15499
|
);
|
|
15583
|
-
|
|
15500
|
+
React61.useLayoutEffect(() => {
|
|
15584
15501
|
if (!isOpen) return;
|
|
15585
15502
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15586
15503
|
setDraftDate(nextDate);
|
|
@@ -15591,7 +15508,7 @@ function useDatePickerWheel({
|
|
|
15591
15508
|
window.cancelAnimationFrame(frameId);
|
|
15592
15509
|
};
|
|
15593
15510
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15594
|
-
const updateDraftDate =
|
|
15511
|
+
const updateDraftDate = React61.useCallback(
|
|
15595
15512
|
(column, targetIndex, behavior = "smooth") => {
|
|
15596
15513
|
const currentDate = stripTime(draftDate);
|
|
15597
15514
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15636,7 +15553,7 @@ function useDatePickerWheel({
|
|
|
15636
15553
|
},
|
|
15637
15554
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15638
15555
|
);
|
|
15639
|
-
const settleColumnScroll =
|
|
15556
|
+
const settleColumnScroll = React61.useCallback(
|
|
15640
15557
|
(column) => {
|
|
15641
15558
|
const list = columnRefs[column].current;
|
|
15642
15559
|
if (!list) return;
|
|
@@ -15649,7 +15566,7 @@ function useDatePickerWheel({
|
|
|
15649
15566
|
},
|
|
15650
15567
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15651
15568
|
);
|
|
15652
|
-
const scheduleScrollSettle =
|
|
15569
|
+
const scheduleScrollSettle = React61.useCallback(
|
|
15653
15570
|
(column) => {
|
|
15654
15571
|
clearSettleTimeout(column);
|
|
15655
15572
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15658,7 +15575,7 @@ function useDatePickerWheel({
|
|
|
15658
15575
|
},
|
|
15659
15576
|
[clearSettleTimeout, settleColumnScroll]
|
|
15660
15577
|
);
|
|
15661
|
-
const handleColumnScroll =
|
|
15578
|
+
const handleColumnScroll = React61.useCallback(
|
|
15662
15579
|
(column) => {
|
|
15663
15580
|
const list = columnRefs[column].current;
|
|
15664
15581
|
if (!list) return;
|
|
@@ -15672,13 +15589,13 @@ function useDatePickerWheel({
|
|
|
15672
15589
|
},
|
|
15673
15590
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15674
15591
|
);
|
|
15675
|
-
const handleOptionSelect =
|
|
15592
|
+
const handleOptionSelect = React61.useCallback(
|
|
15676
15593
|
(column, targetIndex) => {
|
|
15677
15594
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15678
15595
|
},
|
|
15679
15596
|
[updateDraftDate]
|
|
15680
15597
|
);
|
|
15681
|
-
const focusAdjacentColumn =
|
|
15598
|
+
const focusAdjacentColumn = React61.useCallback(
|
|
15682
15599
|
(column, direction) => {
|
|
15683
15600
|
const order = ["month", "day", "year"];
|
|
15684
15601
|
const currentIndex = order.indexOf(column);
|
|
@@ -15688,7 +15605,7 @@ function useDatePickerWheel({
|
|
|
15688
15605
|
},
|
|
15689
15606
|
[columnRefs]
|
|
15690
15607
|
);
|
|
15691
|
-
const handleColumnKeyDown =
|
|
15608
|
+
const handleColumnKeyDown = React61.useCallback(
|
|
15692
15609
|
(column, event) => {
|
|
15693
15610
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15694
15611
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15754,7 +15671,7 @@ function useDatePickerWheel({
|
|
|
15754
15671
|
}
|
|
15755
15672
|
|
|
15756
15673
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
15757
|
-
import { jsx as
|
|
15674
|
+
import { jsx as jsx169, jsxs as jsxs106 } from "react/jsx-runtime";
|
|
15758
15675
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
15759
15676
|
function AirbnbDatePickerWheelColumn({
|
|
15760
15677
|
id,
|
|
@@ -15768,7 +15685,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15768
15685
|
onOptionSelect,
|
|
15769
15686
|
column
|
|
15770
15687
|
}) {
|
|
15771
|
-
return /* @__PURE__ */
|
|
15688
|
+
return /* @__PURE__ */ jsx169("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs106(
|
|
15772
15689
|
"div",
|
|
15773
15690
|
{
|
|
15774
15691
|
id,
|
|
@@ -15785,14 +15702,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15785
15702
|
WebkitOverflowScrolling: "touch"
|
|
15786
15703
|
},
|
|
15787
15704
|
children: [
|
|
15788
|
-
/* @__PURE__ */
|
|
15705
|
+
/* @__PURE__ */ jsx169("div", { style: { height: `${spacerHeight}px` } }),
|
|
15789
15706
|
items.map((item, index) => {
|
|
15790
15707
|
const { style } = getWheelOptionStyles(
|
|
15791
15708
|
index,
|
|
15792
15709
|
scrollTop,
|
|
15793
15710
|
DATE_PICKER_OPTION_HEIGHT
|
|
15794
15711
|
);
|
|
15795
|
-
return /* @__PURE__ */
|
|
15712
|
+
return /* @__PURE__ */ jsx169(
|
|
15796
15713
|
"button",
|
|
15797
15714
|
{
|
|
15798
15715
|
id: `${id}-option-${index}`,
|
|
@@ -15808,14 +15725,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15808
15725
|
`${column}-${item}-${index}`
|
|
15809
15726
|
);
|
|
15810
15727
|
}),
|
|
15811
|
-
/* @__PURE__ */
|
|
15728
|
+
/* @__PURE__ */ jsx169("div", { style: { height: `${spacerHeight}px` } })
|
|
15812
15729
|
]
|
|
15813
15730
|
}
|
|
15814
15731
|
) });
|
|
15815
15732
|
}
|
|
15816
15733
|
|
|
15817
15734
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
15818
|
-
import { jsx as
|
|
15735
|
+
import { jsx as jsx170, jsxs as jsxs107 } from "react/jsx-runtime";
|
|
15819
15736
|
function AirbnbDatePickerBody({
|
|
15820
15737
|
baseId,
|
|
15821
15738
|
label,
|
|
@@ -15839,9 +15756,9 @@ function AirbnbDatePickerBody({
|
|
|
15839
15756
|
}) {
|
|
15840
15757
|
return /* @__PURE__ */ jsxs107("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
|
|
15841
15758
|
/* @__PURE__ */ jsxs107("div", { className: "relative overflow-hidden rounded-[24px]", children: [
|
|
15842
|
-
/* @__PURE__ */
|
|
15843
|
-
/* @__PURE__ */
|
|
15844
|
-
/* @__PURE__ */
|
|
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(
|
|
15845
15762
|
"div",
|
|
15846
15763
|
{
|
|
15847
15764
|
"aria-hidden": true,
|
|
@@ -15849,7 +15766,7 @@ function AirbnbDatePickerBody({
|
|
|
15849
15766
|
}
|
|
15850
15767
|
),
|
|
15851
15768
|
/* @__PURE__ */ jsxs107("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
|
|
15852
|
-
/* @__PURE__ */
|
|
15769
|
+
/* @__PURE__ */ jsx170(
|
|
15853
15770
|
AirbnbDatePickerWheelColumn,
|
|
15854
15771
|
{
|
|
15855
15772
|
id: `${baseId}-month`,
|
|
@@ -15864,7 +15781,7 @@ function AirbnbDatePickerBody({
|
|
|
15864
15781
|
onOptionSelect
|
|
15865
15782
|
}
|
|
15866
15783
|
),
|
|
15867
|
-
/* @__PURE__ */
|
|
15784
|
+
/* @__PURE__ */ jsx170(
|
|
15868
15785
|
AirbnbDatePickerWheelColumn,
|
|
15869
15786
|
{
|
|
15870
15787
|
id: `${baseId}-day`,
|
|
@@ -15879,7 +15796,7 @@ function AirbnbDatePickerBody({
|
|
|
15879
15796
|
onOptionSelect
|
|
15880
15797
|
}
|
|
15881
15798
|
),
|
|
15882
|
-
/* @__PURE__ */
|
|
15799
|
+
/* @__PURE__ */ jsx170(
|
|
15883
15800
|
AirbnbDatePickerWheelColumn,
|
|
15884
15801
|
{
|
|
15885
15802
|
id: `${baseId}-year`,
|
|
@@ -15896,7 +15813,7 @@ function AirbnbDatePickerBody({
|
|
|
15896
15813
|
)
|
|
15897
15814
|
] })
|
|
15898
15815
|
] }),
|
|
15899
|
-
/* @__PURE__ */
|
|
15816
|
+
/* @__PURE__ */ jsx170(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
15900
15817
|
] });
|
|
15901
15818
|
}
|
|
15902
15819
|
function AirbnbDatePickerContent({
|
|
@@ -15924,7 +15841,7 @@ function AirbnbDatePickerContent({
|
|
|
15924
15841
|
onColumnKeyDown,
|
|
15925
15842
|
onOptionSelect
|
|
15926
15843
|
}) {
|
|
15927
|
-
const body = /* @__PURE__ */
|
|
15844
|
+
const body = /* @__PURE__ */ jsx170(
|
|
15928
15845
|
AirbnbDatePickerBody,
|
|
15929
15846
|
{
|
|
15930
15847
|
baseId,
|
|
@@ -15949,27 +15866,27 @@ function AirbnbDatePickerContent({
|
|
|
15949
15866
|
}
|
|
15950
15867
|
);
|
|
15951
15868
|
if (isMobile3) {
|
|
15952
|
-
return /* @__PURE__ */
|
|
15869
|
+
return /* @__PURE__ */ jsx170(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15953
15870
|
DrawerContent,
|
|
15954
15871
|
{
|
|
15955
15872
|
onClose: () => onOpenChange(false),
|
|
15956
15873
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
15957
15874
|
children: [
|
|
15958
|
-
/* @__PURE__ */
|
|
15959
|
-
/* @__PURE__ */
|
|
15875
|
+
/* @__PURE__ */ jsx170(DrawerTitle, { className: "sr-only", children: title }),
|
|
15876
|
+
/* @__PURE__ */ jsx170(DrawerDescription, { className: "sr-only", children: label }),
|
|
15960
15877
|
body
|
|
15961
15878
|
]
|
|
15962
15879
|
}
|
|
15963
15880
|
) });
|
|
15964
15881
|
}
|
|
15965
|
-
return /* @__PURE__ */
|
|
15882
|
+
return /* @__PURE__ */ jsx170(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15966
15883
|
DialogContent,
|
|
15967
15884
|
{
|
|
15968
15885
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
15969
15886
|
showCloseButton: false,
|
|
15970
15887
|
children: [
|
|
15971
|
-
/* @__PURE__ */
|
|
15972
|
-
/* @__PURE__ */
|
|
15888
|
+
/* @__PURE__ */ jsx170(DialogTitle, { className: "sr-only", children: title }),
|
|
15889
|
+
/* @__PURE__ */ jsx170(DialogDescription, { className: "sr-only", children: label }),
|
|
15973
15890
|
body
|
|
15974
15891
|
]
|
|
15975
15892
|
}
|
|
@@ -15977,7 +15894,7 @@ function AirbnbDatePickerContent({
|
|
|
15977
15894
|
}
|
|
15978
15895
|
|
|
15979
15896
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15980
|
-
import { jsx as
|
|
15897
|
+
import { jsx as jsx171, jsxs as jsxs108 } from "react/jsx-runtime";
|
|
15981
15898
|
var MONTHS_IN_YEAR2 = 12;
|
|
15982
15899
|
function getMonthLabels2(locale) {
|
|
15983
15900
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -16010,7 +15927,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
16010
15927
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
16011
15928
|
return new Date(yearNum, monthIndex, dayNum);
|
|
16012
15929
|
}
|
|
16013
|
-
var Datepicker =
|
|
15930
|
+
var Datepicker = React62.forwardRef(
|
|
16014
15931
|
function Datepicker2({
|
|
16015
15932
|
label,
|
|
16016
15933
|
value,
|
|
@@ -16043,14 +15960,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16043
15960
|
maxDate,
|
|
16044
15961
|
formatValue
|
|
16045
15962
|
}, ref) {
|
|
16046
|
-
const containerRef =
|
|
16047
|
-
const dayInputRef =
|
|
16048
|
-
const monthInputRef =
|
|
16049
|
-
const monthListRef =
|
|
16050
|
-
const yearInputRef =
|
|
16051
|
-
const mobileTriggerRef =
|
|
16052
|
-
const wheelBaseId =
|
|
16053
|
-
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();
|
|
16054
15971
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
16055
15972
|
const dayId = `${baseId}-day`;
|
|
16056
15973
|
const monthId = `${baseId}-month`;
|
|
@@ -16059,38 +15976,38 @@ var Datepicker = React63.forwardRef(
|
|
|
16059
15976
|
const errorId = `${baseId}-error`;
|
|
16060
15977
|
const { t, i18n } = useTranslation38();
|
|
16061
15978
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
16062
|
-
const resolvedMonthLabels =
|
|
15979
|
+
const resolvedMonthLabels = React62.useMemo(
|
|
16063
15980
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
16064
15981
|
[resolvedLocale, monthLabels]
|
|
16065
15982
|
);
|
|
16066
15983
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
16067
15984
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
16068
15985
|
const isControlled = value !== void 0;
|
|
16069
|
-
const initialParts =
|
|
15986
|
+
const initialParts = React62.useMemo(
|
|
16070
15987
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
16071
15988
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16072
15989
|
[]
|
|
16073
15990
|
);
|
|
16074
|
-
const [day, setDay] =
|
|
16075
|
-
const [monthIndex, setMonthIndex] =
|
|
15991
|
+
const [day, setDay] = React62.useState(initialParts.day);
|
|
15992
|
+
const [monthIndex, setMonthIndex] = React62.useState(
|
|
16076
15993
|
initialParts.monthIndex
|
|
16077
15994
|
);
|
|
16078
|
-
const [year, setYear] =
|
|
16079
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
16080
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
16081
|
-
const [focusedField, setFocusedField] =
|
|
16082
|
-
const [monthInputValue, setMonthInputValue] =
|
|
16083
|
-
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);
|
|
16084
16001
|
const isMobile3 = useIsMobile();
|
|
16085
|
-
const emitChangeRef =
|
|
16002
|
+
const emitChangeRef = React62.useRef(() => {
|
|
16086
16003
|
});
|
|
16087
|
-
const dayStateRef =
|
|
16088
|
-
const yearStateRef =
|
|
16089
|
-
const monthIndexRef =
|
|
16004
|
+
const dayStateRef = React62.useRef(day);
|
|
16005
|
+
const yearStateRef = React62.useRef(year);
|
|
16006
|
+
const monthIndexRef = React62.useRef(monthIndex);
|
|
16090
16007
|
dayStateRef.current = day;
|
|
16091
16008
|
yearStateRef.current = year;
|
|
16092
16009
|
monthIndexRef.current = monthIndex;
|
|
16093
|
-
|
|
16010
|
+
React62.useImperativeHandle(
|
|
16094
16011
|
ref,
|
|
16095
16012
|
() => ({
|
|
16096
16013
|
getDayValue: () => dayStateRef.current,
|
|
@@ -16108,27 +16025,27 @@ var Datepicker = React63.forwardRef(
|
|
|
16108
16025
|
}),
|
|
16109
16026
|
[]
|
|
16110
16027
|
);
|
|
16111
|
-
|
|
16028
|
+
React62.useEffect(() => {
|
|
16112
16029
|
if (!isControlled) return;
|
|
16113
16030
|
const next = partsFromDate(value ?? null);
|
|
16114
16031
|
setDay(next.day);
|
|
16115
16032
|
setMonthIndex(next.monthIndex);
|
|
16116
16033
|
setYear(next.year);
|
|
16117
16034
|
}, [isControlled, value]);
|
|
16118
|
-
|
|
16035
|
+
React62.useEffect(() => {
|
|
16119
16036
|
if (focusedField === "month") return;
|
|
16120
16037
|
setMonthInputValue(
|
|
16121
16038
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16122
16039
|
);
|
|
16123
16040
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16124
|
-
const filteredMonths =
|
|
16041
|
+
const filteredMonths = React62.useMemo(() => {
|
|
16125
16042
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16126
16043
|
const query = monthInputValue.trim().toLowerCase();
|
|
16127
16044
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16128
16045
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16129
16046
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16130
16047
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16131
|
-
|
|
16048
|
+
React62.useEffect(() => {
|
|
16132
16049
|
if (!isMonthOpen) {
|
|
16133
16050
|
setMonthHighlightIndex(-1);
|
|
16134
16051
|
return;
|
|
@@ -16149,7 +16066,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16149
16066
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16150
16067
|
const isInvalid = Boolean(invalid || error);
|
|
16151
16068
|
const wrapperWidth = toCssSize(width);
|
|
16152
|
-
const currentDate =
|
|
16069
|
+
const currentDate = React62.useMemo(
|
|
16153
16070
|
() => dateFromParts(day, monthIndex, year),
|
|
16154
16071
|
[day, monthIndex, year]
|
|
16155
16072
|
);
|
|
@@ -16158,7 +16075,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16158
16075
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16159
16076
|
isDisabled: !isMonthOpen || isMobile3
|
|
16160
16077
|
});
|
|
16161
|
-
const emitChange =
|
|
16078
|
+
const emitChange = React62.useCallback(
|
|
16162
16079
|
(nextDay, nextMonth, nextYear) => {
|
|
16163
16080
|
if (!onChange) return;
|
|
16164
16081
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16194,7 +16111,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16194
16111
|
setIsMonthOpen(true);
|
|
16195
16112
|
setMonthHighlightIndex(0);
|
|
16196
16113
|
};
|
|
16197
|
-
const commitMonthInput =
|
|
16114
|
+
const commitMonthInput = React62.useCallback(() => {
|
|
16198
16115
|
const query = monthInputValue.trim().toLowerCase();
|
|
16199
16116
|
if (!query) {
|
|
16200
16117
|
if (monthIndex !== null) {
|
|
@@ -16254,15 +16171,15 @@ var Datepicker = React63.forwardRef(
|
|
|
16254
16171
|
setIsMonthOpen(false);
|
|
16255
16172
|
}
|
|
16256
16173
|
};
|
|
16257
|
-
const focusDayInput =
|
|
16174
|
+
const focusDayInput = React62.useCallback(() => {
|
|
16258
16175
|
if (isBlocked || readOnly) return;
|
|
16259
16176
|
dayInputRef.current?.focus();
|
|
16260
16177
|
}, [isBlocked, readOnly]);
|
|
16261
|
-
const openWheel =
|
|
16178
|
+
const openWheel = React62.useCallback(() => {
|
|
16262
16179
|
if (isBlocked || readOnly) return;
|
|
16263
16180
|
setIsWheelOpen(true);
|
|
16264
16181
|
}, [isBlocked, readOnly]);
|
|
16265
|
-
const closeWheel =
|
|
16182
|
+
const closeWheel = React62.useCallback(() => {
|
|
16266
16183
|
setIsWheelOpen(false);
|
|
16267
16184
|
mobileTriggerRef.current?.focus();
|
|
16268
16185
|
}, []);
|
|
@@ -16274,7 +16191,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16274
16191
|
minDate,
|
|
16275
16192
|
maxDate
|
|
16276
16193
|
});
|
|
16277
|
-
const handleWheelDone =
|
|
16194
|
+
const handleWheelDone = React62.useCallback(() => {
|
|
16278
16195
|
const next = wheel.draftDate;
|
|
16279
16196
|
setDay(String(next.getDate()));
|
|
16280
16197
|
setMonthIndex(next.getMonth());
|
|
@@ -16283,14 +16200,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16283
16200
|
setIsWheelOpen(false);
|
|
16284
16201
|
mobileTriggerRef.current?.focus();
|
|
16285
16202
|
}, [name, onChange, wheel.draftDate]);
|
|
16286
|
-
const defaultFormatValue =
|
|
16203
|
+
const defaultFormatValue = React62.useCallback(
|
|
16287
16204
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16288
16205
|
[resolvedMonthLabels]
|
|
16289
16206
|
);
|
|
16290
16207
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16291
16208
|
const monthListboxId = `${monthId}-listbox`;
|
|
16292
16209
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16293
|
-
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(
|
|
16294
16211
|
"ul",
|
|
16295
16212
|
{
|
|
16296
16213
|
ref: monthListRef,
|
|
@@ -16301,7 +16218,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16301
16218
|
children: filteredMonths.map((option, position) => {
|
|
16302
16219
|
const isSelected = option.index === monthIndex;
|
|
16303
16220
|
const isHighlighted = position === monthHighlightIndex;
|
|
16304
|
-
return /* @__PURE__ */
|
|
16221
|
+
return /* @__PURE__ */ jsx171("li", { role: "presentation", children: /* @__PURE__ */ jsx171(
|
|
16305
16222
|
"button",
|
|
16306
16223
|
{
|
|
16307
16224
|
id: getMonthOptionId(option.index),
|
|
@@ -16328,7 +16245,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16328
16245
|
isBlocked && "cursor-not-allowed",
|
|
16329
16246
|
loading && "cursor-progress"
|
|
16330
16247
|
);
|
|
16331
|
-
return /* @__PURE__ */
|
|
16248
|
+
return /* @__PURE__ */ jsx171(
|
|
16332
16249
|
"div",
|
|
16333
16250
|
{
|
|
16334
16251
|
ref: containerRef,
|
|
@@ -16361,8 +16278,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16361
16278
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16362
16279
|
),
|
|
16363
16280
|
children: [
|
|
16364
|
-
/* @__PURE__ */
|
|
16365
|
-
/* @__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(
|
|
16366
16283
|
ChevronDown4,
|
|
16367
16284
|
{
|
|
16368
16285
|
size: 16,
|
|
@@ -16381,7 +16298,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16381
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)]"
|
|
16382
16299
|
),
|
|
16383
16300
|
children: [
|
|
16384
|
-
/* @__PURE__ */
|
|
16301
|
+
/* @__PURE__ */ jsx171("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx171(
|
|
16385
16302
|
"input",
|
|
16386
16303
|
{
|
|
16387
16304
|
ref: dayInputRef,
|
|
@@ -16411,7 +16328,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16411
16328
|
}
|
|
16412
16329
|
) }),
|
|
16413
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: [
|
|
16414
|
-
/* @__PURE__ */
|
|
16331
|
+
/* @__PURE__ */ jsx171(
|
|
16415
16332
|
"input",
|
|
16416
16333
|
{
|
|
16417
16334
|
ref: monthInputRef,
|
|
@@ -16457,7 +16374,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16457
16374
|
)
|
|
16458
16375
|
}
|
|
16459
16376
|
),
|
|
16460
|
-
/* @__PURE__ */
|
|
16377
|
+
/* @__PURE__ */ jsx171(
|
|
16461
16378
|
ChevronDown4,
|
|
16462
16379
|
{
|
|
16463
16380
|
size: 14,
|
|
@@ -16474,7 +16391,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16474
16391
|
}
|
|
16475
16392
|
)
|
|
16476
16393
|
] }),
|
|
16477
|
-
/* @__PURE__ */
|
|
16394
|
+
/* @__PURE__ */ jsx171("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx171(
|
|
16478
16395
|
"input",
|
|
16479
16396
|
{
|
|
16480
16397
|
ref: yearInputRef,
|
|
@@ -16506,7 +16423,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16506
16423
|
]
|
|
16507
16424
|
}
|
|
16508
16425
|
),
|
|
16509
|
-
showCoverage && /* @__PURE__ */
|
|
16426
|
+
showCoverage && /* @__PURE__ */ jsx171(
|
|
16510
16427
|
"div",
|
|
16511
16428
|
{
|
|
16512
16429
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16514,7 +16431,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16514
16431
|
"aria-hidden": "true"
|
|
16515
16432
|
}
|
|
16516
16433
|
),
|
|
16517
|
-
/* @__PURE__ */
|
|
16434
|
+
/* @__PURE__ */ jsx171(
|
|
16518
16435
|
Fieldset,
|
|
16519
16436
|
{
|
|
16520
16437
|
isFocused,
|
|
@@ -16532,9 +16449,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16532
16449
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16533
16450
|
}
|
|
16534
16451
|
),
|
|
16535
|
-
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 })
|
|
16536
16453
|
] }),
|
|
16537
|
-
isMobile3 && /* @__PURE__ */
|
|
16454
|
+
isMobile3 && /* @__PURE__ */ jsx171(
|
|
16538
16455
|
AirbnbDatePickerContent,
|
|
16539
16456
|
{
|
|
16540
16457
|
baseId: wheelBaseId,
|
|
@@ -16562,9 +16479,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16562
16479
|
onOptionSelect: wheel.handleOptionSelect
|
|
16563
16480
|
}
|
|
16564
16481
|
),
|
|
16565
|
-
!error && optional && /* @__PURE__ */
|
|
16566
|
-
!error && helperText && /* @__PURE__ */
|
|
16567
|
-
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(
|
|
16568
16485
|
FieldErrorMessage,
|
|
16569
16486
|
{
|
|
16570
16487
|
id: errorId,
|
|
@@ -16579,7 +16496,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16579
16496
|
);
|
|
16580
16497
|
|
|
16581
16498
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16582
|
-
import * as
|
|
16499
|
+
import * as React66 from "react";
|
|
16583
16500
|
import { useTranslation as useTranslation39 } from "react-i18next";
|
|
16584
16501
|
|
|
16585
16502
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16658,7 +16575,7 @@ var createDisabledMatchers = ({
|
|
|
16658
16575
|
};
|
|
16659
16576
|
|
|
16660
16577
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16661
|
-
import * as
|
|
16578
|
+
import * as React63 from "react";
|
|
16662
16579
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16663
16580
|
function useRangeValue({
|
|
16664
16581
|
value: externalValue,
|
|
@@ -16667,10 +16584,10 @@ function useRangeValue({
|
|
|
16667
16584
|
name
|
|
16668
16585
|
}) {
|
|
16669
16586
|
const isControlled = externalValue !== void 0;
|
|
16670
|
-
const [draft, setDraft] =
|
|
16587
|
+
const [draft, setDraft] = React63.useState(
|
|
16671
16588
|
isControlled ? externalValue : defaultValue
|
|
16672
16589
|
);
|
|
16673
|
-
const lastExternalKeyRef =
|
|
16590
|
+
const lastExternalKeyRef = React63.useRef(getRangeKey(externalValue));
|
|
16674
16591
|
if (isControlled) {
|
|
16675
16592
|
const externalKey = getRangeKey(externalValue);
|
|
16676
16593
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16678,7 +16595,7 @@ function useRangeValue({
|
|
|
16678
16595
|
setDraft(externalValue);
|
|
16679
16596
|
}
|
|
16680
16597
|
}
|
|
16681
|
-
const commit =
|
|
16598
|
+
const commit = React63.useCallback(
|
|
16682
16599
|
(next) => {
|
|
16683
16600
|
setDraft(next);
|
|
16684
16601
|
if (next === void 0) {
|
|
@@ -16693,7 +16610,7 @@ function useRangeValue({
|
|
|
16693
16610
|
}
|
|
16694
16611
|
|
|
16695
16612
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16696
|
-
import * as
|
|
16613
|
+
import * as React64 from "react";
|
|
16697
16614
|
|
|
16698
16615
|
// src/dashboard/date-range-picker/utils/inputFormat.ts
|
|
16699
16616
|
function parseDateInputFormat(format2) {
|
|
@@ -16783,18 +16700,18 @@ function useRangeTextInputs({
|
|
|
16783
16700
|
onFromComplete,
|
|
16784
16701
|
onToComplete
|
|
16785
16702
|
}) {
|
|
16786
|
-
const tokens =
|
|
16703
|
+
const tokens = React64.useMemo(
|
|
16787
16704
|
() => parseDateInputFormat(displayFormat),
|
|
16788
16705
|
[displayFormat]
|
|
16789
16706
|
);
|
|
16790
|
-
const maxDigits =
|
|
16791
|
-
const [fromText, setFromText] =
|
|
16792
|
-
const [toText, setToText] =
|
|
16793
|
-
|
|
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(() => {
|
|
16794
16711
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16795
16712
|
setToText(value?.to ? format2(value.to) : "");
|
|
16796
16713
|
}, [format2, value?.from, value?.to]);
|
|
16797
|
-
const handleFromChange =
|
|
16714
|
+
const handleFromChange = React64.useCallback(
|
|
16798
16715
|
(raw) => {
|
|
16799
16716
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16800
16717
|
const wasComplete = countDigits(fromText) === maxDigits;
|
|
@@ -16806,7 +16723,7 @@ function useRangeTextInputs({
|
|
|
16806
16723
|
},
|
|
16807
16724
|
[fromText, maxDigits, onFromComplete, parse3, tokens]
|
|
16808
16725
|
);
|
|
16809
|
-
const handleToChange =
|
|
16726
|
+
const handleToChange = React64.useCallback(
|
|
16810
16727
|
(raw) => {
|
|
16811
16728
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16812
16729
|
const wasComplete = countDigits(toText) === maxDigits;
|
|
@@ -16818,7 +16735,7 @@ function useRangeTextInputs({
|
|
|
16818
16735
|
},
|
|
16819
16736
|
[maxDigits, onToComplete, parse3, toText, tokens]
|
|
16820
16737
|
);
|
|
16821
|
-
const handleFromBlur =
|
|
16738
|
+
const handleFromBlur = React64.useCallback(() => {
|
|
16822
16739
|
if (!fromText) {
|
|
16823
16740
|
const next = { from: void 0, to: value?.to };
|
|
16824
16741
|
onCommit(next);
|
|
@@ -16835,7 +16752,7 @@ function useRangeTextInputs({
|
|
|
16835
16752
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16836
16753
|
return void 0;
|
|
16837
16754
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16838
|
-
const handleToBlur =
|
|
16755
|
+
const handleToBlur = React64.useCallback(() => {
|
|
16839
16756
|
if (!toText) {
|
|
16840
16757
|
const next = { from: value?.from, to: void 0 };
|
|
16841
16758
|
onCommit(next);
|
|
@@ -16864,21 +16781,21 @@ function useRangeTextInputs({
|
|
|
16864
16781
|
}
|
|
16865
16782
|
|
|
16866
16783
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16867
|
-
import * as
|
|
16784
|
+
import * as React65 from "react";
|
|
16868
16785
|
function useRangeMonthSync(value) {
|
|
16869
|
-
const isPreloadedRef =
|
|
16870
|
-
const [month, setMonth] =
|
|
16871
|
-
|
|
16786
|
+
const isPreloadedRef = React65.useRef(false);
|
|
16787
|
+
const [month, setMonth] = React65.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16788
|
+
React65.useEffect(() => {
|
|
16872
16789
|
if (value?.from && !isPreloadedRef.current) {
|
|
16873
16790
|
setMonth(value.from);
|
|
16874
16791
|
isPreloadedRef.current = true;
|
|
16875
16792
|
}
|
|
16876
16793
|
}, [value?.from]);
|
|
16877
|
-
const syncMonthToValue =
|
|
16794
|
+
const syncMonthToValue = React65.useCallback((next) => {
|
|
16878
16795
|
isPreloadedRef.current = true;
|
|
16879
16796
|
if (next?.from) setMonth(next.from);
|
|
16880
16797
|
}, []);
|
|
16881
|
-
const resetPreload =
|
|
16798
|
+
const resetPreload = React65.useCallback(() => {
|
|
16882
16799
|
isPreloadedRef.current = false;
|
|
16883
16800
|
}, []);
|
|
16884
16801
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -16904,7 +16821,7 @@ function resolveRangeSelection({
|
|
|
16904
16821
|
|
|
16905
16822
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
16906
16823
|
import { CalendarDays, SquareX as SquareX4 } from "lucide-react";
|
|
16907
|
-
import { jsx as
|
|
16824
|
+
import { jsx as jsx172, jsxs as jsxs109 } from "react/jsx-runtime";
|
|
16908
16825
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
16909
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)]";
|
|
16910
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";
|
|
@@ -16955,7 +16872,7 @@ function DateRangeInputs({
|
|
|
16955
16872
|
),
|
|
16956
16873
|
onClick: onRowClick,
|
|
16957
16874
|
children: [
|
|
16958
|
-
/* @__PURE__ */
|
|
16875
|
+
/* @__PURE__ */ jsx172(
|
|
16959
16876
|
"input",
|
|
16960
16877
|
{
|
|
16961
16878
|
ref: fromInputRef,
|
|
@@ -16980,7 +16897,7 @@ function DateRangeInputs({
|
|
|
16980
16897
|
)
|
|
16981
16898
|
}
|
|
16982
16899
|
),
|
|
16983
|
-
/* @__PURE__ */
|
|
16900
|
+
/* @__PURE__ */ jsx172(
|
|
16984
16901
|
"span",
|
|
16985
16902
|
{
|
|
16986
16903
|
"aria-hidden": "true",
|
|
@@ -16991,7 +16908,7 @@ function DateRangeInputs({
|
|
|
16991
16908
|
children: "\u2192"
|
|
16992
16909
|
}
|
|
16993
16910
|
),
|
|
16994
|
-
/* @__PURE__ */
|
|
16911
|
+
/* @__PURE__ */ jsx172(
|
|
16995
16912
|
"input",
|
|
16996
16913
|
{
|
|
16997
16914
|
ref: toInputRef,
|
|
@@ -17017,7 +16934,7 @@ function DateRangeInputs({
|
|
|
17017
16934
|
}
|
|
17018
16935
|
),
|
|
17019
16936
|
/* @__PURE__ */ jsxs109("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
17020
|
-
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */
|
|
16937
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx172(
|
|
17021
16938
|
"button",
|
|
17022
16939
|
{
|
|
17023
16940
|
type: "button",
|
|
@@ -17025,10 +16942,10 @@ function DateRangeInputs({
|
|
|
17025
16942
|
onClick: onReset,
|
|
17026
16943
|
className: iconButtonClass,
|
|
17027
16944
|
"aria-label": clearLabel,
|
|
17028
|
-
children: /* @__PURE__ */
|
|
16945
|
+
children: /* @__PURE__ */ jsx172(SquareX4, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17029
16946
|
}
|
|
17030
16947
|
),
|
|
17031
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */
|
|
16948
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx172(
|
|
17032
16949
|
"button",
|
|
17033
16950
|
{
|
|
17034
16951
|
type: "button",
|
|
@@ -17040,7 +16957,7 @@ function DateRangeInputs({
|
|
|
17040
16957
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
17041
16958
|
),
|
|
17042
16959
|
"aria-label": openCalendarLabel,
|
|
17043
|
-
children: /* @__PURE__ */
|
|
16960
|
+
children: /* @__PURE__ */ jsx172(CalendarDays, { size: 18 })
|
|
17044
16961
|
}
|
|
17045
16962
|
)
|
|
17046
16963
|
] })
|
|
@@ -17050,7 +16967,7 @@ function DateRangeInputs({
|
|
|
17050
16967
|
}
|
|
17051
16968
|
|
|
17052
16969
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
17053
|
-
import { jsx as
|
|
16970
|
+
import { jsx as jsx173 } from "react/jsx-runtime";
|
|
17054
16971
|
function DateRangeCalendar({
|
|
17055
16972
|
value,
|
|
17056
16973
|
month,
|
|
@@ -17066,7 +16983,7 @@ function DateRangeCalendar({
|
|
|
17066
16983
|
components,
|
|
17067
16984
|
...dayPickerProps
|
|
17068
16985
|
}) {
|
|
17069
|
-
return /* @__PURE__ */
|
|
16986
|
+
return /* @__PURE__ */ jsx173(
|
|
17070
16987
|
Calendar,
|
|
17071
16988
|
{
|
|
17072
16989
|
mode: "range",
|
|
@@ -17089,7 +17006,7 @@ function DateRangeCalendar({
|
|
|
17089
17006
|
}
|
|
17090
17007
|
|
|
17091
17008
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
17092
|
-
import { jsx as
|
|
17009
|
+
import { jsx as jsx174, jsxs as jsxs110 } from "react/jsx-runtime";
|
|
17093
17010
|
function DateRangePopover({
|
|
17094
17011
|
isOpen,
|
|
17095
17012
|
isMobile: isMobile3,
|
|
@@ -17101,7 +17018,7 @@ function DateRangePopover({
|
|
|
17101
17018
|
}) {
|
|
17102
17019
|
if (!isOpen) return null;
|
|
17103
17020
|
if (isMobile3) {
|
|
17104
|
-
return /* @__PURE__ */
|
|
17021
|
+
return /* @__PURE__ */ jsx174(
|
|
17105
17022
|
Drawer,
|
|
17106
17023
|
{
|
|
17107
17024
|
open: isOpen,
|
|
@@ -17115,16 +17032,16 @@ function DateRangePopover({
|
|
|
17115
17032
|
lockScroll: false,
|
|
17116
17033
|
className: "max-h-[calc(100vh-1rem)]",
|
|
17117
17034
|
children: [
|
|
17118
|
-
/* @__PURE__ */
|
|
17119
|
-
/* @__PURE__ */
|
|
17120
|
-
/* @__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 })
|
|
17121
17038
|
]
|
|
17122
17039
|
}
|
|
17123
17040
|
)
|
|
17124
17041
|
}
|
|
17125
17042
|
);
|
|
17126
17043
|
}
|
|
17127
|
-
return /* @__PURE__ */
|
|
17044
|
+
return /* @__PURE__ */ jsx174(
|
|
17128
17045
|
"div",
|
|
17129
17046
|
{
|
|
17130
17047
|
className: cn(
|
|
@@ -17137,8 +17054,8 @@ function DateRangePopover({
|
|
|
17137
17054
|
}
|
|
17138
17055
|
|
|
17139
17056
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17140
|
-
import { jsx as
|
|
17141
|
-
var DateRangePicker =
|
|
17057
|
+
import { jsx as jsx175, jsxs as jsxs111 } from "react/jsx-runtime";
|
|
17058
|
+
var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
17142
17059
|
label,
|
|
17143
17060
|
value: externalValue,
|
|
17144
17061
|
defaultValue,
|
|
@@ -17173,20 +17090,20 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17173
17090
|
components: customComponents,
|
|
17174
17091
|
...dayPickerProps
|
|
17175
17092
|
}, ref) {
|
|
17176
|
-
const containerRef =
|
|
17177
|
-
const fromInputRef =
|
|
17178
|
-
const toInputRef =
|
|
17179
|
-
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();
|
|
17180
17097
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17181
17098
|
const fromId = `${baseId}-from`;
|
|
17182
17099
|
const toId = `${baseId}-to`;
|
|
17183
17100
|
const labelId = `${baseId}-label`;
|
|
17184
17101
|
const errorId = `${baseId}-error`;
|
|
17185
|
-
const normalizedValue =
|
|
17102
|
+
const normalizedValue = React66.useMemo(() => {
|
|
17186
17103
|
if (externalValue === void 0) return void 0;
|
|
17187
17104
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17188
17105
|
}, [externalValue]);
|
|
17189
|
-
const normalizedDefaultValue =
|
|
17106
|
+
const normalizedDefaultValue = React66.useMemo(() => {
|
|
17190
17107
|
if (defaultValue === void 0) return void 0;
|
|
17191
17108
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17192
17109
|
}, [defaultValue]);
|
|
@@ -17196,16 +17113,16 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17196
17113
|
onChange,
|
|
17197
17114
|
name
|
|
17198
17115
|
});
|
|
17199
|
-
const normalizedMinDate =
|
|
17200
|
-
const normalizedMaxDate =
|
|
17201
|
-
const formatter =
|
|
17202
|
-
const parser =
|
|
17203
|
-
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(() => {
|
|
17204
17121
|
});
|
|
17205
|
-
const handleFromComplete =
|
|
17122
|
+
const handleFromComplete = React66.useCallback(() => {
|
|
17206
17123
|
toInputRef.current?.focus();
|
|
17207
17124
|
}, []);
|
|
17208
|
-
const handleToComplete =
|
|
17125
|
+
const handleToComplete = React66.useCallback(() => {
|
|
17209
17126
|
toInputRef.current?.blur();
|
|
17210
17127
|
closeCalendarRef.current();
|
|
17211
17128
|
}, []);
|
|
@@ -17229,9 +17146,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17229
17146
|
onToComplete: handleToComplete
|
|
17230
17147
|
});
|
|
17231
17148
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17232
|
-
const [isOpen, setIsOpen] =
|
|
17233
|
-
const [focusedInput, setFocusedInput] =
|
|
17234
|
-
const [autoFocus, setAutoFocus] =
|
|
17149
|
+
const [isOpen, setIsOpen] = React66.useState(false);
|
|
17150
|
+
const [focusedInput, setFocusedInput] = React66.useState(null);
|
|
17151
|
+
const [autoFocus, setAutoFocus] = React66.useState(false);
|
|
17235
17152
|
const isMobile3 = useIsMobile();
|
|
17236
17153
|
const { t } = useTranslation39();
|
|
17237
17154
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17242,14 +17159,14 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17242
17159
|
const isFocused = focusedInput !== null || isOpen;
|
|
17243
17160
|
const wrapperWidth = toCssSize(width);
|
|
17244
17161
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17245
|
-
const closeCalendar =
|
|
17162
|
+
const closeCalendar = React66.useCallback(() => {
|
|
17246
17163
|
setIsOpen(false);
|
|
17247
17164
|
setFocusedInput(null);
|
|
17248
17165
|
setAutoFocus(false);
|
|
17249
17166
|
if (value?.from) setMonth(value.from);
|
|
17250
17167
|
}, [setMonth, value?.from]);
|
|
17251
17168
|
closeCalendarRef.current = closeCalendar;
|
|
17252
|
-
const openCalendar =
|
|
17169
|
+
const openCalendar = React66.useCallback(() => {
|
|
17253
17170
|
if (isBlocked || readOnly) return;
|
|
17254
17171
|
setIsOpen(true);
|
|
17255
17172
|
}, [isBlocked, readOnly]);
|
|
@@ -17258,7 +17175,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17258
17175
|
onOutsideClick: closeCalendar,
|
|
17259
17176
|
isDisabled: !isOpen || isMobile3
|
|
17260
17177
|
});
|
|
17261
|
-
const handlePickerChange =
|
|
17178
|
+
const handlePickerChange = React66.useCallback(
|
|
17262
17179
|
(range, pickedDate) => {
|
|
17263
17180
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17264
17181
|
previous: value,
|
|
@@ -17279,7 +17196,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17279
17196
|
setToText("");
|
|
17280
17197
|
setMonth(/* @__PURE__ */ new Date());
|
|
17281
17198
|
};
|
|
17282
|
-
const disabledMatchers =
|
|
17199
|
+
const disabledMatchers = React66.useMemo(
|
|
17283
17200
|
() => createDisabledMatchers({
|
|
17284
17201
|
minDate: normalizedMinDate,
|
|
17285
17202
|
maxDate: normalizedMaxDate,
|
|
@@ -17298,7 +17215,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17298
17215
|
openCalendar();
|
|
17299
17216
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17300
17217
|
};
|
|
17301
|
-
|
|
17218
|
+
React66.useImperativeHandle(
|
|
17302
17219
|
ref,
|
|
17303
17220
|
() => ({
|
|
17304
17221
|
setDateRange: (range) => {
|
|
@@ -17321,7 +17238,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17321
17238
|
syncMonthToValue
|
|
17322
17239
|
]
|
|
17323
17240
|
);
|
|
17324
|
-
return /* @__PURE__ */
|
|
17241
|
+
return /* @__PURE__ */ jsx175(
|
|
17325
17242
|
"div",
|
|
17326
17243
|
{
|
|
17327
17244
|
ref: containerRef,
|
|
@@ -17334,7 +17251,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17334
17251
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17335
17252
|
children: /* @__PURE__ */ jsxs111("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
17336
17253
|
/* @__PURE__ */ jsxs111("div", { className: "relative w-full", children: [
|
|
17337
|
-
/* @__PURE__ */
|
|
17254
|
+
/* @__PURE__ */ jsx175(
|
|
17338
17255
|
DateRangeInputs,
|
|
17339
17256
|
{
|
|
17340
17257
|
fromId,
|
|
@@ -17387,7 +17304,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17387
17304
|
onToggleCalendar: toggleCalendar
|
|
17388
17305
|
}
|
|
17389
17306
|
),
|
|
17390
|
-
/* @__PURE__ */
|
|
17307
|
+
/* @__PURE__ */ jsx175(
|
|
17391
17308
|
Fieldset,
|
|
17392
17309
|
{
|
|
17393
17310
|
isFocused,
|
|
@@ -17404,7 +17321,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17404
17321
|
tooltip
|
|
17405
17322
|
}
|
|
17406
17323
|
),
|
|
17407
|
-
/* @__PURE__ */
|
|
17324
|
+
/* @__PURE__ */ jsx175(
|
|
17408
17325
|
DateRangePopover,
|
|
17409
17326
|
{
|
|
17410
17327
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17413,7 +17330,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17413
17330
|
drawerTitle,
|
|
17414
17331
|
drawerDescription,
|
|
17415
17332
|
onClose: closeCalendar,
|
|
17416
|
-
children: /* @__PURE__ */
|
|
17333
|
+
children: /* @__PURE__ */ jsx175(
|
|
17417
17334
|
DateRangeCalendar,
|
|
17418
17335
|
{
|
|
17419
17336
|
value,
|
|
@@ -17434,7 +17351,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17434
17351
|
}
|
|
17435
17352
|
)
|
|
17436
17353
|
] }),
|
|
17437
|
-
/* @__PURE__ */
|
|
17354
|
+
/* @__PURE__ */ jsx175(
|
|
17438
17355
|
DateRangePopover,
|
|
17439
17356
|
{
|
|
17440
17357
|
isOpen: isOpen && isMobile3,
|
|
@@ -17443,7 +17360,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17443
17360
|
drawerTitle,
|
|
17444
17361
|
drawerDescription,
|
|
17445
17362
|
onClose: closeCalendar,
|
|
17446
|
-
children: /* @__PURE__ */
|
|
17363
|
+
children: /* @__PURE__ */ jsx175(
|
|
17447
17364
|
DateRangeCalendar,
|
|
17448
17365
|
{
|
|
17449
17366
|
value,
|
|
@@ -17463,9 +17380,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17463
17380
|
)
|
|
17464
17381
|
}
|
|
17465
17382
|
),
|
|
17466
|
-
!error && optional && /* @__PURE__ */
|
|
17467
|
-
!error && helperText && /* @__PURE__ */
|
|
17468
|
-
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(
|
|
17469
17386
|
FieldErrorMessage,
|
|
17470
17387
|
{
|
|
17471
17388
|
id: errorId,
|
|
@@ -17479,7 +17396,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17479
17396
|
});
|
|
17480
17397
|
|
|
17481
17398
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17482
|
-
import * as
|
|
17399
|
+
import * as React67 from "react";
|
|
17483
17400
|
import { useTranslation as useTranslation40 } from "react-i18next";
|
|
17484
17401
|
import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
|
|
17485
17402
|
import {
|
|
@@ -17505,11 +17422,11 @@ function useValidateDates({
|
|
|
17505
17422
|
const { t } = useTranslation40();
|
|
17506
17423
|
const handleError = useEvent(onError);
|
|
17507
17424
|
const handleSuccess = useEvent(onSuccess);
|
|
17508
|
-
const errorFormatter =
|
|
17425
|
+
const errorFormatter = React67.useMemo(
|
|
17509
17426
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17510
17427
|
[displayFormat]
|
|
17511
17428
|
);
|
|
17512
|
-
const validateDates =
|
|
17429
|
+
const validateDates = React67.useCallback(
|
|
17513
17430
|
(dates) => {
|
|
17514
17431
|
const startDate = dates?.from;
|
|
17515
17432
|
const endDate = dates?.to;
|
|
@@ -17559,9 +17476,9 @@ function useValidateDates({
|
|
|
17559
17476
|
}
|
|
17560
17477
|
|
|
17561
17478
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17562
|
-
import * as
|
|
17479
|
+
import * as React68 from "react";
|
|
17563
17480
|
import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
|
|
17564
|
-
import { jsx as
|
|
17481
|
+
import { jsx as jsx176 } from "react/jsx-runtime";
|
|
17565
17482
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17566
17483
|
function parseTime(value) {
|
|
17567
17484
|
return parse2(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17603,24 +17520,24 @@ var FORMAT_SETTINGS = {
|
|
|
17603
17520
|
},
|
|
17604
17521
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17605
17522
|
};
|
|
17606
|
-
var TimePicker =
|
|
17607
|
-
const resolvedOptions =
|
|
17523
|
+
var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17524
|
+
const resolvedOptions = React68.useMemo(() => {
|
|
17608
17525
|
if (options) return options;
|
|
17609
17526
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17610
17527
|
return buildOptions(settings);
|
|
17611
17528
|
}, [formatName, options, timeSettings]);
|
|
17612
|
-
return /* @__PURE__ */
|
|
17529
|
+
return /* @__PURE__ */ jsx176(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17613
17530
|
});
|
|
17614
17531
|
|
|
17615
17532
|
// src/dashboard/file-input/FileInput.tsx
|
|
17616
|
-
import * as
|
|
17533
|
+
import * as React69 from "react";
|
|
17617
17534
|
import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
|
|
17618
17535
|
import { useTranslation as useTranslation41 } from "react-i18next";
|
|
17619
|
-
import { jsx as
|
|
17536
|
+
import { jsx as jsx177, jsxs as jsxs112 } from "react/jsx-runtime";
|
|
17620
17537
|
function defaultDownload(url) {
|
|
17621
17538
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17622
17539
|
}
|
|
17623
|
-
var FileInput =
|
|
17540
|
+
var FileInput = React69.forwardRef(function FileInput2({
|
|
17624
17541
|
label,
|
|
17625
17542
|
value,
|
|
17626
17543
|
onChange,
|
|
@@ -17643,12 +17560,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17643
17560
|
width,
|
|
17644
17561
|
downloadLabel
|
|
17645
17562
|
}, ref) {
|
|
17646
|
-
const internalRef =
|
|
17563
|
+
const internalRef = React69.useRef(null);
|
|
17647
17564
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17648
17565
|
const { t } = useTranslation41();
|
|
17649
17566
|
const resolvedLabel = label ?? t("upload_file");
|
|
17650
17567
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17651
|
-
const reactId =
|
|
17568
|
+
const reactId = React69.useId();
|
|
17652
17569
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17653
17570
|
const labelId = `${inputId}-label`;
|
|
17654
17571
|
const errorId = `${inputId}-error`;
|
|
@@ -17687,7 +17604,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17687
17604
|
),
|
|
17688
17605
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17689
17606
|
children: [
|
|
17690
|
-
/* @__PURE__ */
|
|
17607
|
+
/* @__PURE__ */ jsx177(
|
|
17691
17608
|
"input",
|
|
17692
17609
|
{
|
|
17693
17610
|
ref: inputRef,
|
|
@@ -17727,12 +17644,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17727
17644
|
onClick: handleDownload,
|
|
17728
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",
|
|
17729
17646
|
children: [
|
|
17730
|
-
/* @__PURE__ */
|
|
17731
|
-
/* @__PURE__ */
|
|
17647
|
+
/* @__PURE__ */ jsx177("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
17648
|
+
/* @__PURE__ */ jsx177(Download, { size: 15 })
|
|
17732
17649
|
]
|
|
17733
17650
|
}
|
|
17734
|
-
) : /* @__PURE__ */
|
|
17735
|
-
/* @__PURE__ */
|
|
17651
|
+
) : /* @__PURE__ */ jsx177("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
17652
|
+
/* @__PURE__ */ jsx177(
|
|
17736
17653
|
"button",
|
|
17737
17654
|
{
|
|
17738
17655
|
type: "button",
|
|
@@ -17740,17 +17657,17 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17740
17657
|
onClick: handleClear,
|
|
17741
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]",
|
|
17742
17659
|
"aria-label": t("remove_file"),
|
|
17743
|
-
children: /* @__PURE__ */
|
|
17660
|
+
children: /* @__PURE__ */ jsx177(SquareX5, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17744
17661
|
}
|
|
17745
17662
|
)
|
|
17746
17663
|
]
|
|
17747
17664
|
}
|
|
17748
|
-
) : /* @__PURE__ */
|
|
17749
|
-
/* @__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 }) })
|
|
17750
17667
|
]
|
|
17751
17668
|
}
|
|
17752
17669
|
),
|
|
17753
|
-
/* @__PURE__ */
|
|
17670
|
+
/* @__PURE__ */ jsx177(
|
|
17754
17671
|
Fieldset,
|
|
17755
17672
|
{
|
|
17756
17673
|
isFocused: false,
|
|
@@ -17768,9 +17685,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17768
17685
|
}
|
|
17769
17686
|
)
|
|
17770
17687
|
] }),
|
|
17771
|
-
!error && optional && /* @__PURE__ */
|
|
17772
|
-
!error && helperText && /* @__PURE__ */
|
|
17773
|
-
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(
|
|
17774
17691
|
FieldErrorMessage,
|
|
17775
17692
|
{
|
|
17776
17693
|
id: errorId,
|
|
@@ -17785,10 +17702,10 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17785
17702
|
});
|
|
17786
17703
|
|
|
17787
17704
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17788
|
-
import * as
|
|
17789
|
-
import { jsx as
|
|
17705
|
+
import * as React70 from "react";
|
|
17706
|
+
import { jsx as jsx178, jsxs as jsxs113 } from "react/jsx-runtime";
|
|
17790
17707
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17791
|
-
var SelectIconsBox =
|
|
17708
|
+
var SelectIconsBox = React70.forwardRef(
|
|
17792
17709
|
function SelectIconsBox2({
|
|
17793
17710
|
children,
|
|
17794
17711
|
icons,
|
|
@@ -17804,10 +17721,10 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17804
17721
|
className,
|
|
17805
17722
|
boxClassName
|
|
17806
17723
|
}, ref) {
|
|
17807
|
-
const containerRef =
|
|
17724
|
+
const containerRef = React70.useRef(null);
|
|
17808
17725
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17809
17726
|
const isControlled = controlledOpen !== void 0;
|
|
17810
|
-
const [internalOpen, setInternalOpen] =
|
|
17727
|
+
const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
|
|
17811
17728
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17812
17729
|
const setOpen = (next) => {
|
|
17813
17730
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17844,7 +17761,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17844
17761
|
className: cn("relative inline-block outline-none", className),
|
|
17845
17762
|
children: [
|
|
17846
17763
|
children,
|
|
17847
|
-
isOpen && /* @__PURE__ */
|
|
17764
|
+
isOpen && /* @__PURE__ */ jsx178(
|
|
17848
17765
|
"div",
|
|
17849
17766
|
{
|
|
17850
17767
|
className: cn(
|
|
@@ -17855,7 +17772,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17855
17772
|
boxClassName
|
|
17856
17773
|
),
|
|
17857
17774
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
17858
|
-
children: icons.map((iconName) => /* @__PURE__ */
|
|
17775
|
+
children: icons.map((iconName) => /* @__PURE__ */ jsx178(
|
|
17859
17776
|
"button",
|
|
17860
17777
|
{
|
|
17861
17778
|
type: "button",
|
|
@@ -17938,14 +17855,14 @@ function getErrorMessage(error) {
|
|
|
17938
17855
|
|
|
17939
17856
|
// src/lib/toastResponseError.tsx
|
|
17940
17857
|
import i18next from "i18next";
|
|
17941
|
-
import { jsx as
|
|
17858
|
+
import { jsx as jsx179, jsxs as jsxs114 } from "react/jsx-runtime";
|
|
17942
17859
|
function addSupportEmailToMessage(message, prefixText) {
|
|
17943
17860
|
if (typeof message !== "string") {
|
|
17944
17861
|
return message;
|
|
17945
17862
|
}
|
|
17946
17863
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
17947
17864
|
return /* @__PURE__ */ jsxs114("div", { children: [
|
|
17948
|
-
/* @__PURE__ */
|
|
17865
|
+
/* @__PURE__ */ jsx179("div", { children: builtMessage }),
|
|
17949
17866
|
i18next.t("reach_us_at_email")
|
|
17950
17867
|
] });
|
|
17951
17868
|
}
|
|
@@ -17961,12 +17878,12 @@ function toastResponseError(error, options = {}) {
|
|
|
17961
17878
|
|
|
17962
17879
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
17963
17880
|
import { forwardRef as forwardRef72, useId as useId15 } from "react";
|
|
17964
|
-
import { jsx as
|
|
17881
|
+
import { jsx as jsx180, jsxs as jsxs115 } from "react/jsx-runtime";
|
|
17965
17882
|
var LegacyTextarea = forwardRef72(
|
|
17966
17883
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
17967
17884
|
const inputId = useId15();
|
|
17968
17885
|
return /* @__PURE__ */ jsxs115("div", { className: cn("relative", className), children: [
|
|
17969
|
-
/* @__PURE__ */
|
|
17886
|
+
/* @__PURE__ */ jsx180(
|
|
17970
17887
|
"textarea",
|
|
17971
17888
|
{
|
|
17972
17889
|
ref,
|
|
@@ -17982,7 +17899,7 @@ var LegacyTextarea = forwardRef72(
|
|
|
17982
17899
|
...textareaProps
|
|
17983
17900
|
}
|
|
17984
17901
|
),
|
|
17985
|
-
label && /* @__PURE__ */
|
|
17902
|
+
label && /* @__PURE__ */ jsx180(
|
|
17986
17903
|
"label",
|
|
17987
17904
|
{
|
|
17988
17905
|
htmlFor: inputId,
|
|
@@ -18000,15 +17917,15 @@ var LegacyTextarea = forwardRef72(
|
|
|
18000
17917
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
18001
17918
|
|
|
18002
17919
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18003
|
-
import * as
|
|
17920
|
+
import * as React72 from "react";
|
|
18004
17921
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
18005
17922
|
|
|
18006
17923
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
18007
|
-
import * as
|
|
17924
|
+
import * as React71 from "react";
|
|
18008
17925
|
import { Loader2 as Loader24 } from "lucide-react";
|
|
18009
17926
|
import { useTranslation as useTranslation42 } from "react-i18next";
|
|
18010
|
-
import { Fragment as Fragment17, jsx as
|
|
18011
|
-
var AirbnbFieldTrigger =
|
|
17927
|
+
import { Fragment as Fragment17, jsx as jsx181, jsxs as jsxs116 } from "react/jsx-runtime";
|
|
17928
|
+
var AirbnbFieldTrigger = React71.forwardRef(
|
|
18012
17929
|
({
|
|
18013
17930
|
as = "button",
|
|
18014
17931
|
id,
|
|
@@ -18045,13 +17962,13 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18045
17962
|
const visibleLabelText = labelText ?? label;
|
|
18046
17963
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
18047
17964
|
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs116("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
|
|
18048
|
-
/* @__PURE__ */
|
|
17965
|
+
/* @__PURE__ */ jsx181("span", { className: "min-w-0 truncate", children: visibleLabelText }),
|
|
18049
17966
|
optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "text-current opacity-70 lowercase", children: [
|
|
18050
17967
|
"(",
|
|
18051
17968
|
optionalLabel,
|
|
18052
17969
|
")"
|
|
18053
17970
|
] }),
|
|
18054
|
-
tooltip && /* @__PURE__ */
|
|
17971
|
+
tooltip && /* @__PURE__ */ jsx181(
|
|
18055
17972
|
HelpTooltip,
|
|
18056
17973
|
{
|
|
18057
17974
|
content: tooltip,
|
|
@@ -18068,7 +17985,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18068
17985
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18069
17986
|
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs116("span", { className: "flex items-center gap-2", children: [
|
|
18070
17987
|
trailingAdornment,
|
|
18071
|
-
loading && /* @__PURE__ */
|
|
17988
|
+
loading && /* @__PURE__ */ jsx181(
|
|
18072
17989
|
Loader24,
|
|
18073
17990
|
{
|
|
18074
17991
|
"aria-hidden": "true",
|
|
@@ -18094,7 +18011,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18094
18011
|
contentClassName
|
|
18095
18012
|
),
|
|
18096
18013
|
children: [
|
|
18097
|
-
/* @__PURE__ */
|
|
18014
|
+
/* @__PURE__ */ jsx181(
|
|
18098
18015
|
"span",
|
|
18099
18016
|
{
|
|
18100
18017
|
id: labelId,
|
|
@@ -18107,7 +18024,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18107
18024
|
children: animatedLabel
|
|
18108
18025
|
}
|
|
18109
18026
|
),
|
|
18110
|
-
children ? children : hasValue ? /* @__PURE__ */
|
|
18027
|
+
children ? children : hasValue ? /* @__PURE__ */ jsx181(
|
|
18111
18028
|
"span",
|
|
18112
18029
|
{
|
|
18113
18030
|
id: valueId,
|
|
@@ -18118,11 +18035,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18118
18035
|
),
|
|
18119
18036
|
children: valueText
|
|
18120
18037
|
}
|
|
18121
|
-
) : /* @__PURE__ */
|
|
18038
|
+
) : /* @__PURE__ */ jsx181("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
18122
18039
|
]
|
|
18123
18040
|
}
|
|
18124
18041
|
),
|
|
18125
|
-
resolvedTrailingAdornment && /* @__PURE__ */
|
|
18042
|
+
resolvedTrailingAdornment && /* @__PURE__ */ jsx181(
|
|
18126
18043
|
"span",
|
|
18127
18044
|
{
|
|
18128
18045
|
"aria-hidden": "true",
|
|
@@ -18132,8 +18049,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18132
18049
|
)
|
|
18133
18050
|
] });
|
|
18134
18051
|
return /* @__PURE__ */ jsxs116("div", { className: "w-full", children: [
|
|
18135
|
-
topLabel && /* @__PURE__ */
|
|
18136
|
-
as === "button" ? /* @__PURE__ */
|
|
18052
|
+
topLabel && /* @__PURE__ */ jsx181("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
|
|
18053
|
+
as === "button" ? /* @__PURE__ */ jsx181(
|
|
18137
18054
|
"button",
|
|
18138
18055
|
{
|
|
18139
18056
|
id,
|
|
@@ -18150,7 +18067,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18150
18067
|
...props,
|
|
18151
18068
|
children: sharedContent
|
|
18152
18069
|
}
|
|
18153
|
-
) : /* @__PURE__ */
|
|
18070
|
+
) : /* @__PURE__ */ jsx181(
|
|
18154
18071
|
"div",
|
|
18155
18072
|
{
|
|
18156
18073
|
id,
|
|
@@ -18167,16 +18084,16 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18167
18084
|
children: sharedContent
|
|
18168
18085
|
}
|
|
18169
18086
|
),
|
|
18170
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */
|
|
18087
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx181(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
18171
18088
|
] });
|
|
18172
18089
|
}
|
|
18173
18090
|
);
|
|
18174
18091
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
18175
18092
|
|
|
18176
18093
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18177
|
-
import { jsx as
|
|
18094
|
+
import { jsx as jsx182, jsxs as jsxs117 } from "react/jsx-runtime";
|
|
18178
18095
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18179
|
-
var AirbnbDatePicker =
|
|
18096
|
+
var AirbnbDatePicker = React72.forwardRef(
|
|
18180
18097
|
({
|
|
18181
18098
|
label,
|
|
18182
18099
|
topLabel,
|
|
@@ -18201,24 +18118,24 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18201
18118
|
formatValue = formatDateValue
|
|
18202
18119
|
}, ref) => {
|
|
18203
18120
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18204
|
-
const [isOpen, setIsOpen] =
|
|
18205
|
-
const triggerId =
|
|
18206
|
-
const pickerId =
|
|
18207
|
-
const labelId =
|
|
18208
|
-
const valueId =
|
|
18209
|
-
const helperTextId =
|
|
18210
|
-
const errorId =
|
|
18211
|
-
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);
|
|
18212
18129
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18213
|
-
const monthLabels =
|
|
18214
|
-
const resolvedMinDate =
|
|
18215
|
-
const resolvedMaxDate =
|
|
18216
|
-
const normalizedValue =
|
|
18217
|
-
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(
|
|
18218
18135
|
() => normalizeDateValue(defaultValue),
|
|
18219
18136
|
[defaultValue]
|
|
18220
18137
|
);
|
|
18221
|
-
const resolvedValue =
|
|
18138
|
+
const resolvedValue = React72.useMemo(
|
|
18222
18139
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18223
18140
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18224
18141
|
);
|
|
@@ -18249,7 +18166,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18249
18166
|
minDate: resolvedMinDate,
|
|
18250
18167
|
maxDate: resolvedMaxDate
|
|
18251
18168
|
});
|
|
18252
|
-
const handleOpenChange =
|
|
18169
|
+
const handleOpenChange = React72.useCallback(
|
|
18253
18170
|
(nextOpen) => {
|
|
18254
18171
|
if (isBlocked && nextOpen) return;
|
|
18255
18172
|
setIsOpen(nextOpen);
|
|
@@ -18259,7 +18176,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18259
18176
|
},
|
|
18260
18177
|
[isBlocked]
|
|
18261
18178
|
);
|
|
18262
|
-
const handleDone =
|
|
18179
|
+
const handleDone = React72.useCallback(() => {
|
|
18263
18180
|
if (isBlocked) return;
|
|
18264
18181
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18265
18182
|
handleOpenChange(false);
|
|
@@ -18271,11 +18188,11 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18271
18188
|
resolvedMaxDate,
|
|
18272
18189
|
resolvedMinDate
|
|
18273
18190
|
]);
|
|
18274
|
-
const handleTriggerClick =
|
|
18191
|
+
const handleTriggerClick = React72.useCallback(() => {
|
|
18275
18192
|
if (isBlocked) return;
|
|
18276
18193
|
setIsOpen(true);
|
|
18277
18194
|
}, [isBlocked]);
|
|
18278
|
-
const handleTriggerKeyDown =
|
|
18195
|
+
const handleTriggerKeyDown = React72.useCallback(
|
|
18279
18196
|
(event) => {
|
|
18280
18197
|
if (isBlocked) return;
|
|
18281
18198
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18285,13 +18202,13 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18285
18202
|
},
|
|
18286
18203
|
[isBlocked]
|
|
18287
18204
|
);
|
|
18288
|
-
|
|
18205
|
+
React72.useEffect(() => {
|
|
18289
18206
|
if (isBlocked) {
|
|
18290
18207
|
setIsOpen(false);
|
|
18291
18208
|
}
|
|
18292
18209
|
}, [isBlocked]);
|
|
18293
18210
|
return /* @__PURE__ */ jsxs117("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
|
|
18294
|
-
name && /* @__PURE__ */
|
|
18211
|
+
name && /* @__PURE__ */ jsx182(
|
|
18295
18212
|
"input",
|
|
18296
18213
|
{
|
|
18297
18214
|
type: "hidden",
|
|
@@ -18299,7 +18216,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18299
18216
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
18300
18217
|
}
|
|
18301
18218
|
),
|
|
18302
|
-
/* @__PURE__ */
|
|
18219
|
+
/* @__PURE__ */ jsx182(
|
|
18303
18220
|
AirbnbFieldTrigger,
|
|
18304
18221
|
{
|
|
18305
18222
|
id: triggerId,
|
|
@@ -18325,10 +18242,10 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18325
18242
|
onClick: handleTriggerClick,
|
|
18326
18243
|
onKeyDown: handleTriggerKeyDown,
|
|
18327
18244
|
onBlur,
|
|
18328
|
-
trailingAdornment: /* @__PURE__ */
|
|
18245
|
+
trailingAdornment: /* @__PURE__ */ jsx182(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18329
18246
|
}
|
|
18330
18247
|
),
|
|
18331
|
-
/* @__PURE__ */
|
|
18248
|
+
/* @__PURE__ */ jsx182(
|
|
18332
18249
|
AirbnbDatePickerContent,
|
|
18333
18250
|
{
|
|
18334
18251
|
baseId: pickerId,
|
|
@@ -18362,12 +18279,12 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18362
18279
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18363
18280
|
|
|
18364
18281
|
// src/airbnb-fields/input/Input.tsx
|
|
18365
|
-
import * as
|
|
18282
|
+
import * as React73 from "react";
|
|
18366
18283
|
import { Eye as Eye2 } from "lucide-react";
|
|
18367
18284
|
import { useTranslation as useTranslation43 } from "react-i18next";
|
|
18368
|
-
import { jsx as
|
|
18285
|
+
import { jsx as jsx183, jsxs as jsxs118 } from "react/jsx-runtime";
|
|
18369
18286
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18370
|
-
var AirbnbInput =
|
|
18287
|
+
var AirbnbInput = React73.forwardRef(
|
|
18371
18288
|
({
|
|
18372
18289
|
label,
|
|
18373
18290
|
topLabel,
|
|
@@ -18396,16 +18313,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18396
18313
|
...props
|
|
18397
18314
|
}, ref) => {
|
|
18398
18315
|
const { t } = useTranslation43();
|
|
18399
|
-
const generatedId =
|
|
18400
|
-
const inputRef =
|
|
18316
|
+
const generatedId = React73.useId();
|
|
18317
|
+
const inputRef = React73.useRef(null);
|
|
18401
18318
|
const inputId = id ?? generatedId;
|
|
18402
18319
|
const fieldId = `${inputId}-field`;
|
|
18403
18320
|
const labelId = `${inputId}-label`;
|
|
18404
18321
|
const errorId = `${inputId}-error`;
|
|
18405
18322
|
const accessibleLabel = placeholder ?? label;
|
|
18406
|
-
const [isFocused, setIsFocused] =
|
|
18407
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18408
|
-
const [currentValue, setCurrentValue] =
|
|
18323
|
+
const [isFocused, setIsFocused] = React73.useState(false);
|
|
18324
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React73.useState(false);
|
|
18325
|
+
const [currentValue, setCurrentValue] = React73.useState(
|
|
18409
18326
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18410
18327
|
);
|
|
18411
18328
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18418,16 +18335,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18418
18335
|
const triggerError = error ?? invalid;
|
|
18419
18336
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18420
18337
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18421
|
-
|
|
18338
|
+
React73.useLayoutEffect(() => {
|
|
18422
18339
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18423
18340
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18424
18341
|
}, [value]);
|
|
18425
|
-
|
|
18342
|
+
React73.useEffect(() => {
|
|
18426
18343
|
if (!isPasswordInput) {
|
|
18427
18344
|
setIsPasswordRevealed(false);
|
|
18428
18345
|
}
|
|
18429
18346
|
}, [isPasswordInput]);
|
|
18430
|
-
const setRefs =
|
|
18347
|
+
const setRefs = React73.useCallback(
|
|
18431
18348
|
(node) => {
|
|
18432
18349
|
inputRef.current = node;
|
|
18433
18350
|
if (node && value == null) {
|
|
@@ -18460,7 +18377,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18460
18377
|
const togglePasswordReveal = () => {
|
|
18461
18378
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18462
18379
|
};
|
|
18463
|
-
return /* @__PURE__ */
|
|
18380
|
+
return /* @__PURE__ */ jsx183("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs118(
|
|
18464
18381
|
AirbnbFieldTrigger,
|
|
18465
18382
|
{
|
|
18466
18383
|
as: "div",
|
|
@@ -18489,7 +18406,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18489
18406
|
forceLabelText: hasLabelMeta,
|
|
18490
18407
|
hideErrorMessage: !renderErrorMessage,
|
|
18491
18408
|
children: [
|
|
18492
|
-
/* @__PURE__ */
|
|
18409
|
+
/* @__PURE__ */ jsx183(
|
|
18493
18410
|
"input",
|
|
18494
18411
|
{
|
|
18495
18412
|
...props,
|
|
@@ -18519,7 +18436,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18519
18436
|
)
|
|
18520
18437
|
}
|
|
18521
18438
|
),
|
|
18522
|
-
shouldShowPasswordReveal && /* @__PURE__ */
|
|
18439
|
+
shouldShowPasswordReveal && /* @__PURE__ */ jsx183(
|
|
18523
18440
|
"button",
|
|
18524
18441
|
{
|
|
18525
18442
|
type: "button",
|
|
@@ -18527,7 +18444,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18527
18444
|
disabled: isBlocked,
|
|
18528
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",
|
|
18529
18446
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18530
|
-
children: /* @__PURE__ */
|
|
18447
|
+
children: /* @__PURE__ */ jsx183(
|
|
18531
18448
|
Eye2,
|
|
18532
18449
|
{
|
|
18533
18450
|
size: 18,
|
|
@@ -18545,14 +18462,14 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18545
18462
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18546
18463
|
|
|
18547
18464
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18548
|
-
import * as
|
|
18465
|
+
import * as React79 from "react";
|
|
18549
18466
|
import { ChevronDown as ChevronDown6 } from "lucide-react";
|
|
18550
18467
|
|
|
18551
18468
|
// src/airbnb-fields/select/Select.tsx
|
|
18552
|
-
import * as
|
|
18469
|
+
import * as React78 from "react";
|
|
18553
18470
|
|
|
18554
18471
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18555
|
-
import { jsx as
|
|
18472
|
+
import { jsx as jsx184, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
18556
18473
|
function AirbnbSelectDesktopMenu({
|
|
18557
18474
|
id,
|
|
18558
18475
|
options,
|
|
@@ -18584,12 +18501,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18584
18501
|
onKeyDown,
|
|
18585
18502
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18586
18503
|
children: [
|
|
18587
|
-
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,
|
|
18588
18505
|
options.map((option, index) => {
|
|
18589
18506
|
const isSelected = selectedValue?.value === option.value;
|
|
18590
18507
|
const isHighlighted = index === highlightedIndex;
|
|
18591
18508
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18592
|
-
return /* @__PURE__ */
|
|
18509
|
+
return /* @__PURE__ */ jsx184(
|
|
18593
18510
|
"button",
|
|
18594
18511
|
{
|
|
18595
18512
|
id: getOptionId2(index),
|
|
@@ -18621,7 +18538,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18621
18538
|
}
|
|
18622
18539
|
|
|
18623
18540
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18624
|
-
import { jsx as
|
|
18541
|
+
import { jsx as jsx185 } from "react/jsx-runtime";
|
|
18625
18542
|
function AirbnbSelectDesktopContent({
|
|
18626
18543
|
isOpen,
|
|
18627
18544
|
listboxId,
|
|
@@ -18642,14 +18559,14 @@ function AirbnbSelectDesktopContent({
|
|
|
18642
18559
|
noOptionsMessage
|
|
18643
18560
|
}) {
|
|
18644
18561
|
if (!isOpen) return null;
|
|
18645
|
-
return /* @__PURE__ */
|
|
18562
|
+
return /* @__PURE__ */ jsx185(
|
|
18646
18563
|
"div",
|
|
18647
18564
|
{
|
|
18648
18565
|
className: cn(
|
|
18649
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)]",
|
|
18650
18567
|
dropdownClassName
|
|
18651
18568
|
),
|
|
18652
|
-
children: /* @__PURE__ */
|
|
18569
|
+
children: /* @__PURE__ */ jsx185(
|
|
18653
18570
|
AirbnbSelectDesktopMenu,
|
|
18654
18571
|
{
|
|
18655
18572
|
id: listboxId,
|
|
@@ -18747,7 +18664,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
18747
18664
|
}
|
|
18748
18665
|
|
|
18749
18666
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
18750
|
-
import { jsx as
|
|
18667
|
+
import { jsx as jsx186, jsxs as jsxs120 } from "react/jsx-runtime";
|
|
18751
18668
|
function AirbnbSelectMobileWheel({
|
|
18752
18669
|
id,
|
|
18753
18670
|
options,
|
|
@@ -18778,10 +18695,10 @@ function AirbnbSelectMobileWheel({
|
|
|
18778
18695
|
onKeyDown,
|
|
18779
18696
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
18780
18697
|
children: [
|
|
18781
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */
|
|
18782
|
-
/* @__PURE__ */
|
|
18783
|
-
/* @__PURE__ */
|
|
18784
|
-
/* @__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(
|
|
18785
18702
|
"div",
|
|
18786
18703
|
{
|
|
18787
18704
|
"aria-hidden": true,
|
|
@@ -18806,11 +18723,11 @@ function AirbnbSelectMobileWheel({
|
|
|
18806
18723
|
WebkitOverflowScrolling: "touch"
|
|
18807
18724
|
},
|
|
18808
18725
|
children: [
|
|
18809
|
-
/* @__PURE__ */
|
|
18726
|
+
/* @__PURE__ */ jsx186("div", { style: { height: `${spacerHeight2}px` } }),
|
|
18810
18727
|
options.map((option, index) => {
|
|
18811
18728
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
18812
18729
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18813
|
-
return /* @__PURE__ */
|
|
18730
|
+
return /* @__PURE__ */ jsx186(
|
|
18814
18731
|
"button",
|
|
18815
18732
|
{
|
|
18816
18733
|
id: getOptionId2(index),
|
|
@@ -18831,7 +18748,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18831
18748
|
optionKey
|
|
18832
18749
|
);
|
|
18833
18750
|
}),
|
|
18834
|
-
/* @__PURE__ */
|
|
18751
|
+
/* @__PURE__ */ jsx186("div", { style: { height: `${spacerHeight2}px` } })
|
|
18835
18752
|
]
|
|
18836
18753
|
}
|
|
18837
18754
|
)
|
|
@@ -18841,7 +18758,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18841
18758
|
}
|
|
18842
18759
|
|
|
18843
18760
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
18844
|
-
import { jsx as
|
|
18761
|
+
import { jsx as jsx187, jsxs as jsxs121 } from "react/jsx-runtime";
|
|
18845
18762
|
function AirbnbSelectMobileContent({
|
|
18846
18763
|
open,
|
|
18847
18764
|
onOpenChange,
|
|
@@ -18865,11 +18782,11 @@ function AirbnbSelectMobileContent({
|
|
|
18865
18782
|
getOptionId: getOptionId2,
|
|
18866
18783
|
noOptionsMessage
|
|
18867
18784
|
}) {
|
|
18868
|
-
return /* @__PURE__ */
|
|
18869
|
-
/* @__PURE__ */
|
|
18870
|
-
/* @__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 }),
|
|
18871
18788
|
/* @__PURE__ */ jsxs121("div", { className: "px-6 pb-4 pt-1", children: [
|
|
18872
|
-
/* @__PURE__ */
|
|
18789
|
+
/* @__PURE__ */ jsx187(
|
|
18873
18790
|
AirbnbSelectMobileWheel,
|
|
18874
18791
|
{
|
|
18875
18792
|
id: listboxId,
|
|
@@ -18888,16 +18805,16 @@ function AirbnbSelectMobileContent({
|
|
|
18888
18805
|
noOptionsMessage
|
|
18889
18806
|
}
|
|
18890
18807
|
),
|
|
18891
|
-
/* @__PURE__ */
|
|
18808
|
+
/* @__PURE__ */ jsx187(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
18892
18809
|
] })
|
|
18893
18810
|
] }) });
|
|
18894
18811
|
}
|
|
18895
18812
|
|
|
18896
18813
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18897
|
-
import * as
|
|
18814
|
+
import * as React74 from "react";
|
|
18898
18815
|
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
18899
|
-
import { jsx as
|
|
18900
|
-
var AirbnbSelectTrigger =
|
|
18816
|
+
import { jsx as jsx188 } from "react/jsx-runtime";
|
|
18817
|
+
var AirbnbSelectTrigger = React74.forwardRef(
|
|
18901
18818
|
({
|
|
18902
18819
|
id,
|
|
18903
18820
|
open,
|
|
@@ -18921,7 +18838,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18921
18838
|
onKeyDown,
|
|
18922
18839
|
onBlur
|
|
18923
18840
|
}, ref) => {
|
|
18924
|
-
return /* @__PURE__ */
|
|
18841
|
+
return /* @__PURE__ */ jsx188(
|
|
18925
18842
|
AirbnbFieldTrigger,
|
|
18926
18843
|
{
|
|
18927
18844
|
id,
|
|
@@ -18949,7 +18866,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18949
18866
|
onClick,
|
|
18950
18867
|
onKeyDown,
|
|
18951
18868
|
onBlur,
|
|
18952
|
-
trailingAdornment: /* @__PURE__ */
|
|
18869
|
+
trailingAdornment: /* @__PURE__ */ jsx188(
|
|
18953
18870
|
ChevronDown5,
|
|
18954
18871
|
{
|
|
18955
18872
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
@@ -18962,7 +18879,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18962
18879
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
18963
18880
|
|
|
18964
18881
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
18965
|
-
import * as
|
|
18882
|
+
import * as React75 from "react";
|
|
18966
18883
|
function useDesktopSelect({
|
|
18967
18884
|
isMobile: isMobile3,
|
|
18968
18885
|
isOpen,
|
|
@@ -18971,12 +18888,12 @@ function useDesktopSelect({
|
|
|
18971
18888
|
disabled,
|
|
18972
18889
|
onChange
|
|
18973
18890
|
}) {
|
|
18974
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
18975
|
-
const triggerRef =
|
|
18976
|
-
const listRef =
|
|
18977
|
-
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([]);
|
|
18978
18895
|
const selectedIndex = getOptionIndex2(options, value);
|
|
18979
|
-
|
|
18896
|
+
React75.useEffect(() => {
|
|
18980
18897
|
if (!isOpen || isMobile3) return;
|
|
18981
18898
|
setHighlightedIndex((currentIndex) => {
|
|
18982
18899
|
if (currentIndex >= 0) {
|
|
@@ -18991,34 +18908,34 @@ function useDesktopSelect({
|
|
|
18991
18908
|
window.cancelAnimationFrame(frameId);
|
|
18992
18909
|
};
|
|
18993
18910
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
18994
|
-
|
|
18911
|
+
React75.useEffect(() => {
|
|
18995
18912
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
18996
18913
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
18997
18914
|
block: "nearest"
|
|
18998
18915
|
});
|
|
18999
18916
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
19000
|
-
|
|
18917
|
+
React75.useEffect(() => {
|
|
19001
18918
|
if (isOpen) return;
|
|
19002
18919
|
setHighlightedIndex(-1);
|
|
19003
18920
|
}, [isOpen]);
|
|
19004
|
-
const focusTrigger =
|
|
18921
|
+
const focusTrigger = React75.useCallback(() => {
|
|
19005
18922
|
triggerRef.current?.focus();
|
|
19006
18923
|
}, []);
|
|
19007
|
-
const handleSelect =
|
|
18924
|
+
const handleSelect = React75.useCallback(
|
|
19008
18925
|
(option) => {
|
|
19009
18926
|
if (option.isDisabled || disabled) return;
|
|
19010
18927
|
onChange?.(option);
|
|
19011
18928
|
},
|
|
19012
18929
|
[disabled, onChange]
|
|
19013
18930
|
);
|
|
19014
|
-
const openMenu =
|
|
18931
|
+
const openMenu = React75.useCallback(
|
|
19015
18932
|
(targetIndex) => {
|
|
19016
18933
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19017
18934
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
19018
18935
|
},
|
|
19019
18936
|
[options, selectedIndex]
|
|
19020
18937
|
);
|
|
19021
|
-
const handleTriggerKeyDown =
|
|
18938
|
+
const handleTriggerKeyDown = React75.useCallback(
|
|
19022
18939
|
(event, onOpen) => {
|
|
19023
18940
|
if (disabled) return;
|
|
19024
18941
|
if (event.key === "ArrowDown") {
|
|
@@ -19043,7 +18960,7 @@ function useDesktopSelect({
|
|
|
19043
18960
|
},
|
|
19044
18961
|
[disabled, openMenu, options, selectedIndex]
|
|
19045
18962
|
);
|
|
19046
|
-
const handleMenuKeyDown =
|
|
18963
|
+
const handleMenuKeyDown = React75.useCallback(
|
|
19047
18964
|
(event, onClose) => {
|
|
19048
18965
|
if (event.key === "Escape") {
|
|
19049
18966
|
event.preventDefault();
|
|
@@ -19093,7 +19010,7 @@ function useDesktopSelect({
|
|
|
19093
19010
|
},
|
|
19094
19011
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
19095
19012
|
);
|
|
19096
|
-
const setOptionRef =
|
|
19013
|
+
const setOptionRef = React75.useCallback(
|
|
19097
19014
|
(index, node) => {
|
|
19098
19015
|
optionRefs.current[index] = node;
|
|
19099
19016
|
},
|
|
@@ -19113,23 +19030,23 @@ function useDesktopSelect({
|
|
|
19113
19030
|
}
|
|
19114
19031
|
|
|
19115
19032
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19116
|
-
import * as
|
|
19033
|
+
import * as React76 from "react";
|
|
19117
19034
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19118
|
-
const [pendingValue, setPendingValue] =
|
|
19035
|
+
const [pendingValue, setPendingValue] = React76.useState(
|
|
19119
19036
|
value ?? null
|
|
19120
19037
|
);
|
|
19121
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19122
|
-
const mobileListRef =
|
|
19123
|
-
const scrollSettleTimeoutRef =
|
|
19124
|
-
const scrollAnimationFrameRef =
|
|
19125
|
-
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(
|
|
19126
19043
|
(targetValue) => {
|
|
19127
19044
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19128
19045
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19129
19046
|
},
|
|
19130
19047
|
[options]
|
|
19131
19048
|
);
|
|
19132
|
-
const syncScrollPosition =
|
|
19049
|
+
const syncScrollPosition = React76.useCallback(
|
|
19133
19050
|
(targetValue, behavior = "instant") => {
|
|
19134
19051
|
const targetIndex = getTargetIndex(targetValue);
|
|
19135
19052
|
if (targetIndex < 0) return;
|
|
@@ -19148,27 +19065,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19148
19065
|
},
|
|
19149
19066
|
[getTargetIndex, options]
|
|
19150
19067
|
);
|
|
19151
|
-
const clearScrollSettleTimeout =
|
|
19068
|
+
const clearScrollSettleTimeout = React76.useCallback(() => {
|
|
19152
19069
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19153
19070
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19154
19071
|
scrollSettleTimeoutRef.current = null;
|
|
19155
19072
|
}, []);
|
|
19156
|
-
const clearScrollAnimationFrame =
|
|
19073
|
+
const clearScrollAnimationFrame = React76.useCallback(() => {
|
|
19157
19074
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19158
19075
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19159
19076
|
scrollAnimationFrameRef.current = null;
|
|
19160
19077
|
}, []);
|
|
19161
|
-
|
|
19078
|
+
React76.useEffect(
|
|
19162
19079
|
() => () => {
|
|
19163
19080
|
clearScrollSettleTimeout();
|
|
19164
19081
|
clearScrollAnimationFrame();
|
|
19165
19082
|
},
|
|
19166
19083
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19167
19084
|
);
|
|
19168
|
-
|
|
19085
|
+
React76.useEffect(() => {
|
|
19169
19086
|
setPendingValue(value ?? null);
|
|
19170
19087
|
}, [value]);
|
|
19171
|
-
|
|
19088
|
+
React76.useLayoutEffect(() => {
|
|
19172
19089
|
if (!isMobile3 || !isOpen) return;
|
|
19173
19090
|
const frameId = window.requestAnimationFrame(() => {
|
|
19174
19091
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19177,7 +19094,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19177
19094
|
window.cancelAnimationFrame(frameId);
|
|
19178
19095
|
};
|
|
19179
19096
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19180
|
-
const settleScroll =
|
|
19097
|
+
const settleScroll = React76.useCallback(() => {
|
|
19181
19098
|
if (!mobileListRef.current) return;
|
|
19182
19099
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19183
19100
|
const nextOption = options[nextIndex];
|
|
@@ -19189,13 +19106,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19189
19106
|
}
|
|
19190
19107
|
setPendingValue(nextOption);
|
|
19191
19108
|
}, [options, pendingValue]);
|
|
19192
|
-
const scheduleScrollSettle =
|
|
19109
|
+
const scheduleScrollSettle = React76.useCallback(() => {
|
|
19193
19110
|
clearScrollSettleTimeout();
|
|
19194
19111
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19195
19112
|
settleScroll();
|
|
19196
19113
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19197
19114
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19198
|
-
const handleScroll =
|
|
19115
|
+
const handleScroll = React76.useCallback(() => {
|
|
19199
19116
|
if (!mobileListRef.current) return;
|
|
19200
19117
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19201
19118
|
clearScrollAnimationFrame();
|
|
@@ -19205,7 +19122,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19205
19122
|
});
|
|
19206
19123
|
scheduleScrollSettle();
|
|
19207
19124
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19208
|
-
const focusOptionByIndex =
|
|
19125
|
+
const focusOptionByIndex = React76.useCallback(
|
|
19209
19126
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19210
19127
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19211
19128
|
const option = options[index];
|
|
@@ -19223,7 +19140,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19223
19140
|
},
|
|
19224
19141
|
[options, scheduleScrollSettle]
|
|
19225
19142
|
);
|
|
19226
|
-
const handleOptionClick =
|
|
19143
|
+
const handleOptionClick = React76.useCallback(
|
|
19227
19144
|
(option) => {
|
|
19228
19145
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19229
19146
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19232,7 +19149,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19232
19149
|
},
|
|
19233
19150
|
[disabled, focusOptionByIndex, options]
|
|
19234
19151
|
);
|
|
19235
|
-
const moveByStep =
|
|
19152
|
+
const moveByStep = React76.useCallback(
|
|
19236
19153
|
(step) => {
|
|
19237
19154
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19238
19155
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19244,7 +19161,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19244
19161
|
},
|
|
19245
19162
|
[focusOptionByIndex, options, pendingValue]
|
|
19246
19163
|
);
|
|
19247
|
-
const moveToBoundary =
|
|
19164
|
+
const moveToBoundary = React76.useCallback(
|
|
19248
19165
|
(boundary) => {
|
|
19249
19166
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19250
19167
|
if (targetIndex >= 0) {
|
|
@@ -19253,7 +19170,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19253
19170
|
},
|
|
19254
19171
|
[focusOptionByIndex, options]
|
|
19255
19172
|
);
|
|
19256
|
-
const syncPendingValue =
|
|
19173
|
+
const syncPendingValue = React76.useCallback(
|
|
19257
19174
|
(nextValue) => {
|
|
19258
19175
|
const normalizedValue = nextValue ?? null;
|
|
19259
19176
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19281,9 +19198,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19281
19198
|
}
|
|
19282
19199
|
|
|
19283
19200
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19284
|
-
import * as
|
|
19201
|
+
import * as React77 from "react";
|
|
19285
19202
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19286
|
-
const reactId =
|
|
19203
|
+
const reactId = React77.useId().replace(/:/g, "");
|
|
19287
19204
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19288
19205
|
const triggerId = `${baseId}-trigger`;
|
|
19289
19206
|
const labelId = `${baseId}-label`;
|
|
@@ -19293,7 +19210,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19293
19210
|
const listboxId = `${baseId}-listbox`;
|
|
19294
19211
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19295
19212
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19296
|
-
const getOptionId2 =
|
|
19213
|
+
const getOptionId2 = React77.useCallback(
|
|
19297
19214
|
(index) => `${baseId}-option-${index}`,
|
|
19298
19215
|
[baseId]
|
|
19299
19216
|
);
|
|
@@ -19311,8 +19228,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19311
19228
|
}
|
|
19312
19229
|
|
|
19313
19230
|
// src/airbnb-fields/select/Select.tsx
|
|
19314
|
-
import { jsx as
|
|
19315
|
-
var AirbnbSelect =
|
|
19231
|
+
import { jsx as jsx189, jsxs as jsxs122 } from "react/jsx-runtime";
|
|
19232
|
+
var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
19316
19233
|
options = [],
|
|
19317
19234
|
value,
|
|
19318
19235
|
onChange,
|
|
@@ -19339,8 +19256,8 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19339
19256
|
filterOption
|
|
19340
19257
|
}, ref) {
|
|
19341
19258
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19342
|
-
const [isOpen, setIsOpen] =
|
|
19343
|
-
const containerRef =
|
|
19259
|
+
const [isOpen, setIsOpen] = React78.useState(false);
|
|
19260
|
+
const containerRef = React78.useRef(null);
|
|
19344
19261
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19345
19262
|
const hasValue = Boolean(value);
|
|
19346
19263
|
const helperText = placeholder ?? label;
|
|
@@ -19402,12 +19319,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19402
19319
|
onOutsideClick: () => setIsOpen(false),
|
|
19403
19320
|
isDisabled: !isOpen || isMobile3
|
|
19404
19321
|
});
|
|
19405
|
-
|
|
19322
|
+
React78.useEffect(() => {
|
|
19406
19323
|
if (isBlocked) {
|
|
19407
19324
|
setIsOpen(false);
|
|
19408
19325
|
}
|
|
19409
19326
|
}, [isBlocked]);
|
|
19410
|
-
|
|
19327
|
+
React78.useEffect(
|
|
19411
19328
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19412
19329
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19413
19330
|
return;
|
|
@@ -19419,7 +19336,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19419
19336
|
},
|
|
19420
19337
|
[onChange, filteredOptions, value]
|
|
19421
19338
|
);
|
|
19422
|
-
const handleMobileOpenChange =
|
|
19339
|
+
const handleMobileOpenChange = React78.useCallback(
|
|
19423
19340
|
(nextOpen) => {
|
|
19424
19341
|
if (isBlocked && nextOpen) return;
|
|
19425
19342
|
setIsOpen(nextOpen);
|
|
@@ -19430,7 +19347,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19430
19347
|
},
|
|
19431
19348
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19432
19349
|
);
|
|
19433
|
-
const handleMobileDone =
|
|
19350
|
+
const handleMobileDone = React78.useCallback(() => {
|
|
19434
19351
|
if (isBlocked) return;
|
|
19435
19352
|
const finalOption = pendingValue;
|
|
19436
19353
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19439,7 +19356,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19439
19356
|
setIsOpen(false);
|
|
19440
19357
|
focusTrigger();
|
|
19441
19358
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19442
|
-
const handleTriggerClick =
|
|
19359
|
+
const handleTriggerClick = React78.useCallback(() => {
|
|
19443
19360
|
if (isBlocked) return;
|
|
19444
19361
|
setIsOpen((prev) => {
|
|
19445
19362
|
const nextOpen = !prev;
|
|
@@ -19498,7 +19415,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19498
19415
|
ref: containerRef,
|
|
19499
19416
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19500
19417
|
children: [
|
|
19501
|
-
name && /* @__PURE__ */
|
|
19418
|
+
name && /* @__PURE__ */ jsx189("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19502
19419
|
renderTrigger ? renderTrigger({
|
|
19503
19420
|
id: triggerId,
|
|
19504
19421
|
open: isOpen,
|
|
@@ -19519,7 +19436,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19519
19436
|
onClick: handleTriggerClick,
|
|
19520
19437
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19521
19438
|
onBlur
|
|
19522
|
-
}) : /* @__PURE__ */
|
|
19439
|
+
}) : /* @__PURE__ */ jsx189(
|
|
19523
19440
|
AirbnbSelectTrigger,
|
|
19524
19441
|
{
|
|
19525
19442
|
id: triggerId,
|
|
@@ -19546,7 +19463,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19546
19463
|
onBlur
|
|
19547
19464
|
}
|
|
19548
19465
|
),
|
|
19549
|
-
isMobile3 ? /* @__PURE__ */
|
|
19466
|
+
isMobile3 ? /* @__PURE__ */ jsx189(
|
|
19550
19467
|
AirbnbSelectMobileContent,
|
|
19551
19468
|
{
|
|
19552
19469
|
open: isOpen,
|
|
@@ -19571,7 +19488,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19571
19488
|
getOptionId: getOptionId2,
|
|
19572
19489
|
noOptionsMessage
|
|
19573
19490
|
}
|
|
19574
|
-
) : /* @__PURE__ */
|
|
19491
|
+
) : /* @__PURE__ */ jsx189(
|
|
19575
19492
|
AirbnbSelectDesktopContent,
|
|
19576
19493
|
{
|
|
19577
19494
|
isOpen,
|
|
@@ -19605,13 +19522,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19605
19522
|
});
|
|
19606
19523
|
|
|
19607
19524
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19608
|
-
import { jsx as
|
|
19525
|
+
import { jsx as jsx190, jsxs as jsxs123 } from "react/jsx-runtime";
|
|
19609
19526
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19610
19527
|
const label = String(option.label);
|
|
19611
19528
|
const value = String(option.value);
|
|
19612
19529
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19613
19530
|
}
|
|
19614
|
-
var AirbnbPhoneField =
|
|
19531
|
+
var AirbnbPhoneField = React79.forwardRef(
|
|
19615
19532
|
({
|
|
19616
19533
|
label,
|
|
19617
19534
|
topLabel,
|
|
@@ -19635,9 +19552,9 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19635
19552
|
codePlaceholder = "+00",
|
|
19636
19553
|
defaultCode
|
|
19637
19554
|
}, ref) => {
|
|
19638
|
-
const inputId =
|
|
19555
|
+
const inputId = React79.useId();
|
|
19639
19556
|
const effectiveCode = value?.code || defaultCode || "";
|
|
19640
|
-
const codeOptions =
|
|
19557
|
+
const codeOptions = React79.useMemo(
|
|
19641
19558
|
() => options.map((option) => ({
|
|
19642
19559
|
value: option.value,
|
|
19643
19560
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19645,7 +19562,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19645
19562
|
})),
|
|
19646
19563
|
[options]
|
|
19647
19564
|
);
|
|
19648
|
-
const selectedCodeOption =
|
|
19565
|
+
const selectedCodeOption = React79.useMemo(
|
|
19649
19566
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19650
19567
|
[codeOptions, effectiveCode]
|
|
19651
19568
|
);
|
|
@@ -19654,8 +19571,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19654
19571
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
19655
19572
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
19656
19573
|
return /* @__PURE__ */ jsxs123("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
19657
|
-
name && /* @__PURE__ */
|
|
19658
|
-
codeName && /* @__PURE__ */
|
|
19574
|
+
name && /* @__PURE__ */ jsx190("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
19575
|
+
codeName && /* @__PURE__ */ jsx190(
|
|
19659
19576
|
"input",
|
|
19660
19577
|
{
|
|
19661
19578
|
type: "hidden",
|
|
@@ -19664,7 +19581,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19664
19581
|
disabled
|
|
19665
19582
|
}
|
|
19666
19583
|
),
|
|
19667
|
-
numberName && /* @__PURE__ */
|
|
19584
|
+
numberName && /* @__PURE__ */ jsx190(
|
|
19668
19585
|
"input",
|
|
19669
19586
|
{
|
|
19670
19587
|
type: "hidden",
|
|
@@ -19673,7 +19590,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19673
19590
|
disabled
|
|
19674
19591
|
}
|
|
19675
19592
|
),
|
|
19676
|
-
topLabel && /* @__PURE__ */
|
|
19593
|
+
topLabel && /* @__PURE__ */ jsx190(
|
|
19677
19594
|
"label",
|
|
19678
19595
|
{
|
|
19679
19596
|
htmlFor: inputId,
|
|
@@ -19682,7 +19599,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19682
19599
|
}
|
|
19683
19600
|
),
|
|
19684
19601
|
/* @__PURE__ */ jsxs123("div", { className: "flex items-stretch", children: [
|
|
19685
|
-
/* @__PURE__ */
|
|
19602
|
+
/* @__PURE__ */ jsx190(
|
|
19686
19603
|
AirbnbSelect,
|
|
19687
19604
|
{
|
|
19688
19605
|
ref,
|
|
@@ -19732,8 +19649,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19732
19649
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
19733
19650
|
),
|
|
19734
19651
|
children: [
|
|
19735
|
-
/* @__PURE__ */
|
|
19736
|
-
/* @__PURE__ */
|
|
19652
|
+
/* @__PURE__ */ jsx190("span", { children: valueLabel ?? codePlaceholder }),
|
|
19653
|
+
/* @__PURE__ */ jsx190(
|
|
19737
19654
|
ChevronDown6,
|
|
19738
19655
|
{
|
|
19739
19656
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
@@ -19745,7 +19662,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19745
19662
|
)
|
|
19746
19663
|
}
|
|
19747
19664
|
),
|
|
19748
|
-
/* @__PURE__ */
|
|
19665
|
+
/* @__PURE__ */ jsx190(
|
|
19749
19666
|
AirbnbInput,
|
|
19750
19667
|
{
|
|
19751
19668
|
id: inputId,
|
|
@@ -19774,18 +19691,18 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19774
19691
|
}
|
|
19775
19692
|
)
|
|
19776
19693
|
] }),
|
|
19777
|
-
error && /* @__PURE__ */
|
|
19694
|
+
error && /* @__PURE__ */ jsx190(FieldErrorMessage, { message: error })
|
|
19778
19695
|
] });
|
|
19779
19696
|
}
|
|
19780
19697
|
);
|
|
19781
19698
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19782
19699
|
|
|
19783
19700
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19784
|
-
import * as
|
|
19701
|
+
import * as React80 from "react";
|
|
19785
19702
|
import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
|
|
19786
19703
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
19787
19704
|
import { useCallback as useCallback57 } from "react";
|
|
19788
|
-
import { jsx as
|
|
19705
|
+
import { jsx as jsx191, jsxs as jsxs124 } from "react/jsx-runtime";
|
|
19789
19706
|
var ROW_HEIGHT = 48;
|
|
19790
19707
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
19791
19708
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -19825,13 +19742,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19825
19742
|
loadingMessage
|
|
19826
19743
|
}, ref) => {
|
|
19827
19744
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19828
|
-
const reactId =
|
|
19829
|
-
const [open, setOpen] =
|
|
19830
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
19831
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19832
|
-
const containerRef =
|
|
19833
|
-
const triggerRef =
|
|
19834
|
-
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);
|
|
19835
19752
|
const listboxId = `${reactId}-listbox`;
|
|
19836
19753
|
const labelId = `${reactId}-label`;
|
|
19837
19754
|
const valueId = `${reactId}-value`;
|
|
@@ -19840,13 +19757,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19840
19757
|
const searchInputId = `${reactId}-search`;
|
|
19841
19758
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19842
19759
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19843
|
-
const visibleOptions =
|
|
19760
|
+
const visibleOptions = React80.useMemo(() => {
|
|
19844
19761
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19845
19762
|
return options;
|
|
19846
19763
|
}
|
|
19847
19764
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19848
19765
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19849
|
-
const selectedIndex =
|
|
19766
|
+
const selectedIndex = React80.useMemo(
|
|
19850
19767
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19851
19768
|
[value?.value, visibleOptions]
|
|
19852
19769
|
);
|
|
@@ -19872,7 +19789,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19872
19789
|
},
|
|
19873
19790
|
[handleOnOpenChange]
|
|
19874
19791
|
);
|
|
19875
|
-
|
|
19792
|
+
React80.useEffect(() => {
|
|
19876
19793
|
if (isBlocked) {
|
|
19877
19794
|
setSelectOpen(false);
|
|
19878
19795
|
return;
|
|
@@ -19885,7 +19802,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19885
19802
|
window.cancelAnimationFrame(frameId);
|
|
19886
19803
|
};
|
|
19887
19804
|
}, [isBlocked, open, setSelectOpen]);
|
|
19888
|
-
|
|
19805
|
+
React80.useEffect(() => {
|
|
19889
19806
|
if (!open) {
|
|
19890
19807
|
setHighlightedIndex(-1);
|
|
19891
19808
|
return;
|
|
@@ -19953,7 +19870,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19953
19870
|
}
|
|
19954
19871
|
}
|
|
19955
19872
|
}
|
|
19956
|
-
const content = /* @__PURE__ */
|
|
19873
|
+
const content = /* @__PURE__ */ jsx191(
|
|
19957
19874
|
AirbnbSearchableSelectContent,
|
|
19958
19875
|
{
|
|
19959
19876
|
inputId: searchInputId,
|
|
@@ -19980,10 +19897,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19980
19897
|
onOptionHover: setHighlightedIndex
|
|
19981
19898
|
}
|
|
19982
19899
|
);
|
|
19983
|
-
|
|
19900
|
+
React80.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
19984
19901
|
return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
19985
|
-
name && /* @__PURE__ */
|
|
19986
|
-
/* @__PURE__ */
|
|
19902
|
+
name && /* @__PURE__ */ jsx191("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19903
|
+
/* @__PURE__ */ jsx191(
|
|
19987
19904
|
AirbnbFieldTrigger,
|
|
19988
19905
|
{
|
|
19989
19906
|
id: `${reactId}-trigger`,
|
|
@@ -20017,7 +19934,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20017
19934
|
},
|
|
20018
19935
|
onKeyDown: handleTriggerKeyDown,
|
|
20019
19936
|
onBlur,
|
|
20020
|
-
trailingAdornment: /* @__PURE__ */
|
|
19937
|
+
trailingAdornment: /* @__PURE__ */ jsx191(
|
|
20021
19938
|
ChevronDown7,
|
|
20022
19939
|
{
|
|
20023
19940
|
className: cn(
|
|
@@ -20028,7 +19945,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20028
19945
|
)
|
|
20029
19946
|
}
|
|
20030
19947
|
),
|
|
20031
|
-
isMobile3 ? /* @__PURE__ */
|
|
19948
|
+
isMobile3 ? /* @__PURE__ */ jsx191(
|
|
20032
19949
|
Drawer,
|
|
20033
19950
|
{
|
|
20034
19951
|
open,
|
|
@@ -20041,12 +19958,12 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20041
19958
|
closeSelect();
|
|
20042
19959
|
},
|
|
20043
19960
|
children: /* @__PURE__ */ jsxs124(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
20044
|
-
/* @__PURE__ */
|
|
20045
|
-
/* @__PURE__ */
|
|
20046
|
-
/* @__PURE__ */
|
|
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 })
|
|
20047
19964
|
] })
|
|
20048
19965
|
}
|
|
20049
|
-
) : open ? /* @__PURE__ */
|
|
19966
|
+
) : open ? /* @__PURE__ */ jsx191(
|
|
20050
19967
|
"div",
|
|
20051
19968
|
{
|
|
20052
19969
|
className: cn(
|
|
@@ -20058,7 +19975,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20058
19975
|
) : null
|
|
20059
19976
|
] });
|
|
20060
19977
|
};
|
|
20061
|
-
var AirbnbSearchableSelect =
|
|
19978
|
+
var AirbnbSearchableSelect = React80.forwardRef(
|
|
20062
19979
|
AirbnbSearchableSelectInternal
|
|
20063
19980
|
);
|
|
20064
19981
|
function AirbnbSearchableSelectContent({
|
|
@@ -20085,9 +20002,9 @@ function AirbnbSearchableSelectContent({
|
|
|
20085
20002
|
onOptionClick,
|
|
20086
20003
|
onOptionHover
|
|
20087
20004
|
}) {
|
|
20088
|
-
const listRef =
|
|
20089
|
-
const lastLoadMoreOptionsLengthRef =
|
|
20090
|
-
const previousHighlightedIndexRef =
|
|
20005
|
+
const listRef = React80.useRef(null);
|
|
20006
|
+
const lastLoadMoreOptionsLengthRef = React80.useRef(null);
|
|
20007
|
+
const previousHighlightedIndexRef = React80.useRef(highlightedIndex);
|
|
20091
20008
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
20092
20009
|
const virtualizer = useVirtualizer3({
|
|
20093
20010
|
count: rowCount,
|
|
@@ -20098,7 +20015,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20098
20015
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20099
20016
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20100
20017
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20101
|
-
|
|
20018
|
+
React80.useEffect(() => {
|
|
20102
20019
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20103
20020
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20104
20021
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20106,7 +20023,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20106
20023
|
onLoadMore?.();
|
|
20107
20024
|
}
|
|
20108
20025
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20109
|
-
|
|
20026
|
+
React80.useEffect(() => {
|
|
20110
20027
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20111
20028
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20112
20029
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -20115,14 +20032,14 @@ function AirbnbSearchableSelectContent({
|
|
|
20115
20032
|
}, [highlightedIndex, virtualizer]);
|
|
20116
20033
|
return /* @__PURE__ */ jsxs124("div", { className: "p-2", children: [
|
|
20117
20034
|
/* @__PURE__ */ jsxs124("div", { className: "relative mb-2", children: [
|
|
20118
|
-
/* @__PURE__ */
|
|
20035
|
+
/* @__PURE__ */ jsx191(
|
|
20119
20036
|
Search4,
|
|
20120
20037
|
{
|
|
20121
20038
|
"aria-hidden": "true",
|
|
20122
20039
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
20123
20040
|
}
|
|
20124
20041
|
),
|
|
20125
|
-
/* @__PURE__ */
|
|
20042
|
+
/* @__PURE__ */ jsx191(
|
|
20126
20043
|
"input",
|
|
20127
20044
|
{
|
|
20128
20045
|
id: inputId,
|
|
@@ -20141,7 +20058,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20141
20058
|
}
|
|
20142
20059
|
)
|
|
20143
20060
|
] }),
|
|
20144
|
-
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(
|
|
20145
20062
|
"div",
|
|
20146
20063
|
{
|
|
20147
20064
|
id: listboxId,
|
|
@@ -20150,7 +20067,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20150
20067
|
"aria-labelledby": labelId,
|
|
20151
20068
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
20152
20069
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
20153
|
-
children: /* @__PURE__ */
|
|
20070
|
+
children: /* @__PURE__ */ jsx191(
|
|
20154
20071
|
"div",
|
|
20155
20072
|
{
|
|
20156
20073
|
className: "relative w-full",
|
|
@@ -20158,7 +20075,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20158
20075
|
children: virtualItems.map((virtualItem) => {
|
|
20159
20076
|
const option = options[virtualItem.index];
|
|
20160
20077
|
if (!option) {
|
|
20161
|
-
return /* @__PURE__ */
|
|
20078
|
+
return /* @__PURE__ */ jsx191(
|
|
20162
20079
|
"div",
|
|
20163
20080
|
{
|
|
20164
20081
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -20173,7 +20090,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20173
20090
|
}
|
|
20174
20091
|
const isSelected = value?.value === option.value;
|
|
20175
20092
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
20176
|
-
return /* @__PURE__ */
|
|
20093
|
+
return /* @__PURE__ */ jsx191(
|
|
20177
20094
|
"button",
|
|
20178
20095
|
{
|
|
20179
20096
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -20195,7 +20112,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20195
20112
|
height: `${virtualItem.size}px`,
|
|
20196
20113
|
transform: `translateY(${virtualItem.start}px)`
|
|
20197
20114
|
},
|
|
20198
|
-
children: /* @__PURE__ */
|
|
20115
|
+
children: /* @__PURE__ */ jsx191("span", { className: "truncate text-center", children: String(option.label) })
|
|
20199
20116
|
},
|
|
20200
20117
|
`${String(option.value)}-${virtualItem.index}`
|
|
20201
20118
|
);
|
|
@@ -20224,16 +20141,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20224
20141
|
}
|
|
20225
20142
|
|
|
20226
20143
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20227
|
-
import * as
|
|
20144
|
+
import * as React81 from "react";
|
|
20228
20145
|
import { useTranslation as useTranslation44 } from "react-i18next";
|
|
20229
20146
|
import { Search as Search5, X as X11 } from "lucide-react";
|
|
20230
|
-
import { jsx as
|
|
20231
|
-
var AirbnbSearchInput =
|
|
20147
|
+
import { jsx as jsx192, jsxs as jsxs125 } from "react/jsx-runtime";
|
|
20148
|
+
var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20232
20149
|
const { t } = useTranslation44();
|
|
20233
20150
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20234
20151
|
return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
20235
|
-
/* @__PURE__ */
|
|
20236
|
-
/* @__PURE__ */
|
|
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(
|
|
20237
20154
|
"input",
|
|
20238
20155
|
{
|
|
20239
20156
|
...props,
|
|
@@ -20252,13 +20169,13 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20252
20169
|
)
|
|
20253
20170
|
}
|
|
20254
20171
|
),
|
|
20255
|
-
onReset && /* @__PURE__ */
|
|
20172
|
+
onReset && /* @__PURE__ */ jsx192(
|
|
20256
20173
|
Button,
|
|
20257
20174
|
{
|
|
20258
20175
|
variant: "ghost",
|
|
20259
20176
|
onClick: onReset,
|
|
20260
20177
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
20261
|
-
children: /* @__PURE__ */
|
|
20178
|
+
children: /* @__PURE__ */ jsx192(X11, { className: "h-5 w-5" })
|
|
20262
20179
|
}
|
|
20263
20180
|
)
|
|
20264
20181
|
] });
|
|
@@ -20266,11 +20183,11 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20266
20183
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20267
20184
|
|
|
20268
20185
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20269
|
-
import * as
|
|
20186
|
+
import * as React82 from "react";
|
|
20270
20187
|
import * as SwitchPrimitives2 from "@radix-ui/react-switch";
|
|
20271
|
-
import { Check as
|
|
20272
|
-
import { Fragment as Fragment18, jsx as
|
|
20273
|
-
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(
|
|
20274
20191
|
({
|
|
20275
20192
|
className,
|
|
20276
20193
|
value,
|
|
@@ -20284,9 +20201,9 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20284
20201
|
wrapperClassName,
|
|
20285
20202
|
...props
|
|
20286
20203
|
}, ref) => {
|
|
20287
|
-
const generatedId =
|
|
20204
|
+
const generatedId = React82.useId();
|
|
20288
20205
|
const fieldId = id || generatedId;
|
|
20289
|
-
const switchElement = /* @__PURE__ */
|
|
20206
|
+
const switchElement = /* @__PURE__ */ jsx193(
|
|
20290
20207
|
SwitchPrimitives2.Root,
|
|
20291
20208
|
{
|
|
20292
20209
|
ref,
|
|
@@ -20306,15 +20223,15 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20306
20223
|
"aria-busy": loading,
|
|
20307
20224
|
"aria-readonly": readOnly,
|
|
20308
20225
|
...props,
|
|
20309
|
-
children: /* @__PURE__ */
|
|
20226
|
+
children: /* @__PURE__ */ jsx193(
|
|
20310
20227
|
SwitchPrimitives2.Thumb,
|
|
20311
20228
|
{
|
|
20312
20229
|
className: cn(
|
|
20313
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",
|
|
20314
20231
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
20315
20232
|
),
|
|
20316
|
-
children: /* @__PURE__ */
|
|
20317
|
-
|
|
20233
|
+
children: /* @__PURE__ */ jsx193(
|
|
20234
|
+
Check8,
|
|
20318
20235
|
{
|
|
20319
20236
|
"aria-hidden": "true",
|
|
20320
20237
|
className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
|
|
@@ -20331,7 +20248,7 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20331
20248
|
return /* @__PURE__ */ jsxs126(Fragment18, { children: [
|
|
20332
20249
|
/* @__PURE__ */ jsxs126("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
|
|
20333
20250
|
switchElement,
|
|
20334
|
-
label && /* @__PURE__ */
|
|
20251
|
+
label && /* @__PURE__ */ jsx193(
|
|
20335
20252
|
Label,
|
|
20336
20253
|
{
|
|
20337
20254
|
htmlFor: fieldId,
|
|
@@ -20343,7 +20260,7 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20343
20260
|
}
|
|
20344
20261
|
)
|
|
20345
20262
|
] }),
|
|
20346
|
-
error && /* @__PURE__ */
|
|
20263
|
+
error && /* @__PURE__ */ jsx193(ErrorMessage, { disabled, children: error })
|
|
20347
20264
|
] });
|
|
20348
20265
|
}
|
|
20349
20266
|
);
|
|
@@ -20649,6 +20566,7 @@ export {
|
|
|
20649
20566
|
VerticalTabs,
|
|
20650
20567
|
VideoModal,
|
|
20651
20568
|
VideoPlayer,
|
|
20569
|
+
VisualCheckbox,
|
|
20652
20570
|
Webcam,
|
|
20653
20571
|
WideButton,
|
|
20654
20572
|
addSupportEmailToMessage,
|