@chekinapp/ui 0.0.137 → 0.0.138
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +548 -629
- 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 +480 -562
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -330,6 +330,7 @@ __export(index_exports, {
|
|
|
330
330
|
VerticalTabs: () => VerticalTabs,
|
|
331
331
|
VideoModal: () => VideoModal,
|
|
332
332
|
VideoPlayer: () => VideoPlayer,
|
|
333
|
+
VisualCheckbox: () => VisualCheckbox,
|
|
333
334
|
Webcam: () => Webcam,
|
|
334
335
|
WideButton: () => WideButton,
|
|
335
336
|
addSupportEmailToMessage: () => addSupportEmailToMessage,
|
|
@@ -13591,21 +13592,7 @@ function useSelectState(params) {
|
|
|
13591
13592
|
);
|
|
13592
13593
|
return !existsInOptions && !existsInSelected;
|
|
13593
13594
|
}, [isCreatable, trimmedInput, isValidNewOption, options, selectedOptions]);
|
|
13594
|
-
const sssDebugHighlightCount = React48.useRef(0);
|
|
13595
13595
|
React48.useEffect(() => {
|
|
13596
|
-
sssDebugHighlightCount.current += 1;
|
|
13597
|
-
console.log(
|
|
13598
|
-
`[SC-debug] highlight effect run #${sssDebugHighlightCount.current}`,
|
|
13599
|
-
{
|
|
13600
|
-
isOpen,
|
|
13601
|
-
filteredOptionsLength: filteredOptions.length,
|
|
13602
|
-
isOptionDisabledStable: typeof isOptionDisabled
|
|
13603
|
-
}
|
|
13604
|
-
);
|
|
13605
|
-
if (sssDebugHighlightCount.current === 30) {
|
|
13606
|
-
console.warn("[SC-debug] highlight effect ran 30x \u2014 opening debugger");
|
|
13607
|
-
debugger;
|
|
13608
|
-
}
|
|
13609
13596
|
if (!isOpen || filteredOptions.length === 0) {
|
|
13610
13597
|
setHighlightedIndex(-1);
|
|
13611
13598
|
return;
|
|
@@ -13631,21 +13618,8 @@ function useSelectState(params) {
|
|
|
13631
13618
|
(option) => isOptionSelected2(option, selectedOptions),
|
|
13632
13619
|
[isOptionSelected2, selectedOptions]
|
|
13633
13620
|
);
|
|
13634
|
-
const sssDebugSelectOptionCount = React48.useRef(0);
|
|
13635
13621
|
const selectOption = React48.useCallback(
|
|
13636
13622
|
(option) => {
|
|
13637
|
-
sssDebugSelectOptionCount.current += 1;
|
|
13638
|
-
console.log(
|
|
13639
|
-
`[SC-debug] selectOption #${sssDebugSelectOptionCount.current}`,
|
|
13640
|
-
{ value: option.value, isMulti, currentSelectedCount: selectedOptions.length }
|
|
13641
|
-
);
|
|
13642
|
-
console.trace("[SC-debug] selectOption caller stack");
|
|
13643
|
-
if (sssDebugSelectOptionCount.current === 5) {
|
|
13644
|
-
console.warn(
|
|
13645
|
-
"[SC-debug] selectOption fired 5x \u2014 pausing. Step out to see the caller."
|
|
13646
|
-
);
|
|
13647
|
-
debugger;
|
|
13648
|
-
}
|
|
13649
13623
|
if (!isOptionEnabled(option, isOptionDisabled)) return;
|
|
13650
13624
|
if (isMulti) {
|
|
13651
13625
|
const exists = isValueSelected(option);
|
|
@@ -15105,12 +15079,31 @@ var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiS
|
|
|
15105
15079
|
});
|
|
15106
15080
|
|
|
15107
15081
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15108
|
-
var
|
|
15082
|
+
var React58 = __toESM(require("react"), 1);
|
|
15109
15083
|
var import_react_i18next36 = require("react-i18next");
|
|
15110
15084
|
|
|
15111
|
-
// src/dashboard/select-checkboxes/
|
|
15085
|
+
// src/dashboard/select-checkboxes/VisualCheckbox.tsx
|
|
15112
15086
|
var import_lucide_react48 = require("lucide-react");
|
|
15113
15087
|
var import_jsx_runtime165 = require("react/jsx-runtime");
|
|
15088
|
+
function VisualCheckbox({ checked, disabled, className }) {
|
|
15089
|
+
return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
|
|
15090
|
+
"span",
|
|
15091
|
+
{
|
|
15092
|
+
"aria-hidden": "true",
|
|
15093
|
+
"data-state": checked ? "checked" : "unchecked",
|
|
15094
|
+
className: cn(
|
|
15095
|
+
"checkbox__control pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-solid",
|
|
15096
|
+
checked ? "border-[var(--checkbox-checked-border)] bg-[var(--checkbox-checked-bg)] text-[var(--checkbox-check-color)]" : "border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]",
|
|
15097
|
+
disabled && "opacity-50",
|
|
15098
|
+
className
|
|
15099
|
+
),
|
|
15100
|
+
children: checked && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_lucide_react48.Check, { className: "checkbox__icon h-3 w-3" })
|
|
15101
|
+
}
|
|
15102
|
+
);
|
|
15103
|
+
}
|
|
15104
|
+
|
|
15105
|
+
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
15106
|
+
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
15114
15107
|
function SelectCheckboxOption(props) {
|
|
15115
15108
|
const {
|
|
15116
15109
|
option,
|
|
@@ -15123,7 +15116,7 @@ function SelectCheckboxOption(props) {
|
|
|
15123
15116
|
onHover,
|
|
15124
15117
|
innerRef
|
|
15125
15118
|
} = props;
|
|
15126
|
-
return /* @__PURE__ */ (0,
|
|
15119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
|
|
15127
15120
|
"button",
|
|
15128
15121
|
{
|
|
15129
15122
|
id,
|
|
@@ -15144,22 +15137,10 @@ function SelectCheckboxOption(props) {
|
|
|
15144
15137
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
15145
15138
|
),
|
|
15146
15139
|
children: [
|
|
15147
|
-
/* @__PURE__ */ (0,
|
|
15148
|
-
|
|
15149
|
-
{
|
|
15150
|
-
|
|
15151
|
-
"data-state": isSelected ? "checked" : "unchecked",
|
|
15152
|
-
className: cn(
|
|
15153
|
-
"checkbox__control pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-solid",
|
|
15154
|
-
isSelected ? "border-[var(--checkbox-checked-border)] bg-[var(--checkbox-checked-bg)] text-[var(--checkbox-check-color)]" : "border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]",
|
|
15155
|
-
isDisabled && "opacity-50"
|
|
15156
|
-
),
|
|
15157
|
-
children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_lucide_react48.Check, { className: "checkbox__icon h-3 w-3" })
|
|
15158
|
-
}
|
|
15159
|
-
),
|
|
15160
|
-
/* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
15161
|
-
/* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { className: "block break-words", children: option.label }),
|
|
15162
|
-
option.description && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
15140
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)(VisualCheckbox, { checked: isSelected, disabled: isDisabled }),
|
|
15141
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
15142
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "block break-words", children: option.label }),
|
|
15143
|
+
option.description && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
15163
15144
|
] })
|
|
15164
15145
|
]
|
|
15165
15146
|
}
|
|
@@ -15167,22 +15148,12 @@ function SelectCheckboxOption(props) {
|
|
|
15167
15148
|
}
|
|
15168
15149
|
|
|
15169
15150
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
15170
|
-
var React58 = __toESM(require("react"), 1);
|
|
15171
15151
|
var import_lucide_react49 = require("lucide-react");
|
|
15172
15152
|
var import_react_i18next35 = require("react-i18next");
|
|
15173
|
-
var
|
|
15153
|
+
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
15174
15154
|
function createCountTrigger(opts) {
|
|
15175
15155
|
const { getValueText, getTotalCount } = opts;
|
|
15176
15156
|
function CountTrigger(props) {
|
|
15177
|
-
const ctDebugRenderCount = React58.useRef(0);
|
|
15178
|
-
ctDebugRenderCount.current += 1;
|
|
15179
|
-
React58.useEffect(() => {
|
|
15180
|
-
console.log("[SC-debug] CountTrigger MOUNTED");
|
|
15181
|
-
return () => {
|
|
15182
|
-
console.log("[SC-debug] CountTrigger UNMOUNTED");
|
|
15183
|
-
};
|
|
15184
|
-
}, []);
|
|
15185
|
-
console.log(`[SC-debug] CountTrigger render #${ctDebugRenderCount.current}`);
|
|
15186
15157
|
const { t } = (0, import_react_i18next35.useTranslation)();
|
|
15187
15158
|
const {
|
|
15188
15159
|
triggerId,
|
|
@@ -15209,7 +15180,7 @@ function createCountTrigger(opts) {
|
|
|
15209
15180
|
const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
|
|
15210
15181
|
const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
|
|
15211
15182
|
const isEmpty = !hasValue;
|
|
15212
|
-
return /* @__PURE__ */ (0,
|
|
15183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
|
|
15213
15184
|
"button",
|
|
15214
15185
|
{
|
|
15215
15186
|
id: triggerId,
|
|
@@ -15232,9 +15203,9 @@ function createCountTrigger(opts) {
|
|
|
15232
15203
|
loading && "!cursor-progress"
|
|
15233
15204
|
),
|
|
15234
15205
|
children: [
|
|
15235
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
15236
|
-
/* @__PURE__ */ (0,
|
|
15237
|
-
/* @__PURE__ */ (0,
|
|
15206
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("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__ */ (0, import_jsx_runtime167.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
15207
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
15208
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
15238
15209
|
import_lucide_react49.ChevronDown,
|
|
15239
15210
|
{
|
|
15240
15211
|
size: 16,
|
|
@@ -15252,10 +15223,9 @@ function createCountTrigger(opts) {
|
|
|
15252
15223
|
}
|
|
15253
15224
|
|
|
15254
15225
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
15255
|
-
var
|
|
15256
|
-
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
15226
|
+
var import_jsx_runtime168 = require("react/jsx-runtime");
|
|
15257
15227
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
15258
|
-
return /* @__PURE__ */ (0,
|
|
15228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
|
|
15259
15229
|
"button",
|
|
15260
15230
|
{
|
|
15261
15231
|
type: "button",
|
|
@@ -15266,33 +15236,21 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15266
15236
|
disabled && "cursor-default opacity-40"
|
|
15267
15237
|
),
|
|
15268
15238
|
children: [
|
|
15269
|
-
/* @__PURE__ */ (0,
|
|
15270
|
-
|
|
15271
|
-
{
|
|
15272
|
-
"aria-hidden": "true",
|
|
15273
|
-
"data-state": checked ? "checked" : "unchecked",
|
|
15274
|
-
className: cn(
|
|
15275
|
-
"checkbox__control pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-solid",
|
|
15276
|
-
checked ? "border-[var(--checkbox-checked-border)] bg-[var(--checkbox-checked-bg)] text-[var(--checkbox-check-color)]" : "border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]",
|
|
15277
|
-
disabled && "opacity-50"
|
|
15278
|
-
),
|
|
15279
|
-
children: checked && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_lucide_react50.Check, { className: "checkbox__icon h-3 w-3" })
|
|
15280
|
-
}
|
|
15281
|
-
),
|
|
15282
|
-
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "flex-1", children: label })
|
|
15239
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)(VisualCheckbox, { checked, disabled }),
|
|
15240
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "flex-1", children: label })
|
|
15283
15241
|
]
|
|
15284
15242
|
}
|
|
15285
15243
|
);
|
|
15286
15244
|
}
|
|
15287
15245
|
|
|
15288
15246
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15289
|
-
var
|
|
15247
|
+
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
15290
15248
|
function hasPaginationProps(props) {
|
|
15291
15249
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
|
|
15292
15250
|
}
|
|
15293
15251
|
function makeTriggerSlot(render) {
|
|
15294
15252
|
function CustomTrigger(props) {
|
|
15295
|
-
return /* @__PURE__ */ (0,
|
|
15253
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_jsx_runtime169.Fragment, { children: render(props.isOpen, props.onContainerClick) });
|
|
15296
15254
|
}
|
|
15297
15255
|
return CustomTrigger;
|
|
15298
15256
|
}
|
|
@@ -15318,64 +15276,25 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15318
15276
|
const isPaginated = hasPaginationProps(
|
|
15319
15277
|
paginationAndRest
|
|
15320
15278
|
);
|
|
15321
|
-
const
|
|
15322
|
-
const scDebugPrevPropsRef = React59.useRef({});
|
|
15323
|
-
scDebugRenderCount.current += 1;
|
|
15324
|
-
{
|
|
15325
|
-
const current = {
|
|
15326
|
-
value,
|
|
15327
|
-
defaultValue,
|
|
15328
|
-
onChange,
|
|
15329
|
-
trigger,
|
|
15330
|
-
userComponents,
|
|
15331
|
-
valueText,
|
|
15332
|
-
filterOption,
|
|
15333
|
-
rawOptions,
|
|
15334
|
-
onSearchChange
|
|
15335
|
-
};
|
|
15336
|
-
const prev = scDebugPrevPropsRef.current;
|
|
15337
|
-
const changed = [];
|
|
15338
|
-
for (const key of Object.keys(current)) {
|
|
15339
|
-
if (prev[key] !== current[key]) changed.push(key);
|
|
15340
|
-
}
|
|
15341
|
-
console.log(
|
|
15342
|
-
`[SC-debug] SelectCheckboxes render #${scDebugRenderCount.current}`,
|
|
15343
|
-
{ changed, isPaginated, isControlled: value !== void 0 }
|
|
15344
|
-
);
|
|
15345
|
-
scDebugPrevPropsRef.current = current;
|
|
15346
|
-
if (scDebugRenderCount.current === 30) {
|
|
15347
|
-
console.warn(
|
|
15348
|
-
"[SC-debug] hit 30 renders of SelectCheckboxes \u2014 opening debugger"
|
|
15349
|
-
);
|
|
15350
|
-
debugger;
|
|
15351
|
-
}
|
|
15352
|
-
}
|
|
15353
|
-
const [inputValue, setInputValue] = React59.useState("");
|
|
15279
|
+
const [inputValue, setInputValue] = React58.useState("");
|
|
15354
15280
|
const isControlled = value !== void 0;
|
|
15355
|
-
const [internalValue, setInternalValue] =
|
|
15281
|
+
const [internalValue, setInternalValue] = React58.useState(
|
|
15356
15282
|
() => defaultValue ?? []
|
|
15357
15283
|
);
|
|
15358
15284
|
const currentValue = isControlled ? value : internalValue;
|
|
15359
|
-
const selected =
|
|
15360
|
-
const
|
|
15361
|
-
const handleChange = React59.useCallback(
|
|
15285
|
+
const selected = React58.useMemo(() => currentValue ?? [], [currentValue]);
|
|
15286
|
+
const handleChange = React58.useCallback(
|
|
15362
15287
|
(next, meta) => {
|
|
15363
|
-
scDebugHandleChangeCount.current += 1;
|
|
15364
|
-
console.log(
|
|
15365
|
-
`[SC-debug] handleChange #${scDebugHandleChangeCount.current}`,
|
|
15366
|
-
{ action: meta?.action, nextLength: next.length, isControlled }
|
|
15367
|
-
);
|
|
15368
|
-
console.trace("[SC-debug] handleChange caller stack");
|
|
15369
15288
|
if (!isControlled) setInternalValue(next);
|
|
15370
15289
|
onChange?.(next, meta);
|
|
15371
15290
|
},
|
|
15372
15291
|
[isControlled, onChange]
|
|
15373
15292
|
);
|
|
15374
|
-
const flatRawOptions =
|
|
15293
|
+
const flatRawOptions = React58.useMemo(
|
|
15375
15294
|
() => flattenGroupedOptions(rawOptions),
|
|
15376
15295
|
[rawOptions]
|
|
15377
15296
|
);
|
|
15378
|
-
const filteredGrouped =
|
|
15297
|
+
const filteredGrouped = React58.useMemo(() => {
|
|
15379
15298
|
const trimmed = inputValue.trim();
|
|
15380
15299
|
if (!trimmed) return rawOptions;
|
|
15381
15300
|
return rawOptions.map((item) => {
|
|
@@ -15386,7 +15305,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15386
15305
|
return filterOption(item, trimmed) ? item : null;
|
|
15387
15306
|
}).filter((item) => item !== null);
|
|
15388
15307
|
}, [rawOptions, inputValue, filterOption]);
|
|
15389
|
-
const filteredFlat =
|
|
15308
|
+
const filteredFlat = React58.useMemo(
|
|
15390
15309
|
() => flattenGroupedOptions(filteredGrouped),
|
|
15391
15310
|
[filteredGrouped]
|
|
15392
15311
|
);
|
|
@@ -15394,7 +15313,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15394
15313
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
15395
15314
|
}, 0);
|
|
15396
15315
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
15397
|
-
const handleToggleAll =
|
|
15316
|
+
const handleToggleAll = React58.useCallback(() => {
|
|
15398
15317
|
if (allVisibleSelected) {
|
|
15399
15318
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
15400
15319
|
handleChange(
|
|
@@ -15409,19 +15328,18 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15409
15328
|
}
|
|
15410
15329
|
handleChange(merged, { action: "select" });
|
|
15411
15330
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
15412
|
-
const valueTextRef =
|
|
15413
|
-
const totalCountRef =
|
|
15331
|
+
const valueTextRef = React58.useRef(valueText);
|
|
15332
|
+
const totalCountRef = React58.useRef(flatRawOptions.length);
|
|
15414
15333
|
valueTextRef.current = valueText;
|
|
15415
15334
|
totalCountRef.current = flatRawOptions.length;
|
|
15416
|
-
const Control =
|
|
15417
|
-
console.log("[SC-debug] (re)creating Control component", { hasCustomTrigger: !!trigger });
|
|
15335
|
+
const Control = React58.useMemo(() => {
|
|
15418
15336
|
if (trigger) return makeTriggerSlot(trigger);
|
|
15419
15337
|
return createCountTrigger({
|
|
15420
15338
|
getValueText: () => valueTextRef.current,
|
|
15421
15339
|
getTotalCount: () => totalCountRef.current
|
|
15422
15340
|
});
|
|
15423
15341
|
}, [trigger]);
|
|
15424
|
-
const components =
|
|
15342
|
+
const components = React58.useMemo(
|
|
15425
15343
|
() => ({
|
|
15426
15344
|
...userComponents,
|
|
15427
15345
|
Control,
|
|
@@ -15429,7 +15347,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15429
15347
|
}),
|
|
15430
15348
|
[userComponents, Control]
|
|
15431
15349
|
);
|
|
15432
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0,
|
|
15350
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15433
15351
|
SelectAllRow,
|
|
15434
15352
|
{
|
|
15435
15353
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -15437,7 +15355,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15437
15355
|
onToggle: handleToggleAll
|
|
15438
15356
|
}
|
|
15439
15357
|
) : void 0;
|
|
15440
|
-
const handleInputChange =
|
|
15358
|
+
const handleInputChange = React58.useCallback(
|
|
15441
15359
|
(next) => {
|
|
15442
15360
|
setInputValue(next);
|
|
15443
15361
|
onSearchChange?.(next);
|
|
@@ -15458,7 +15376,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15458
15376
|
isMulti: true
|
|
15459
15377
|
};
|
|
15460
15378
|
if (isPaginated) {
|
|
15461
|
-
return /* @__PURE__ */ (0,
|
|
15379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15462
15380
|
InfiniteScrollSelect,
|
|
15463
15381
|
{
|
|
15464
15382
|
ref,
|
|
@@ -15469,7 +15387,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15469
15387
|
}
|
|
15470
15388
|
);
|
|
15471
15389
|
}
|
|
15472
|
-
return /* @__PURE__ */ (0,
|
|
15390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15473
15391
|
Select,
|
|
15474
15392
|
{
|
|
15475
15393
|
ref,
|
|
@@ -15480,16 +15398,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15480
15398
|
}
|
|
15481
15399
|
);
|
|
15482
15400
|
}
|
|
15483
|
-
var SelectCheckboxes =
|
|
15401
|
+
var SelectCheckboxes = React58.forwardRef(
|
|
15484
15402
|
SelectCheckboxesInternal
|
|
15485
15403
|
);
|
|
15486
15404
|
|
|
15487
15405
|
// src/dashboard/textarea/Textarea.tsx
|
|
15488
|
-
var
|
|
15406
|
+
var React60 = __toESM(require("react"), 1);
|
|
15489
15407
|
var import_react_i18next37 = require("react-i18next");
|
|
15490
15408
|
|
|
15491
15409
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15492
|
-
var
|
|
15410
|
+
var React59 = __toESM(require("react"), 1);
|
|
15493
15411
|
var isEmptyValue2 = (value) => {
|
|
15494
15412
|
if (value === void 0 || value === null) return true;
|
|
15495
15413
|
return String(value).length === 0;
|
|
@@ -15508,12 +15426,12 @@ function useTextareaValueState({
|
|
|
15508
15426
|
value,
|
|
15509
15427
|
defaultValue
|
|
15510
15428
|
}) {
|
|
15511
|
-
const textareaRef =
|
|
15429
|
+
const textareaRef = React59.useRef(null);
|
|
15512
15430
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15513
15431
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15514
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15432
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React59.useState(propsAreEmpty);
|
|
15515
15433
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15516
|
-
const setNativeValue =
|
|
15434
|
+
const setNativeValue = React59.useCallback(
|
|
15517
15435
|
(nextValue) => {
|
|
15518
15436
|
if (isControlled) return;
|
|
15519
15437
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15523,14 +15441,14 @@ function useTextareaValueState({
|
|
|
15523
15441
|
},
|
|
15524
15442
|
[isControlled]
|
|
15525
15443
|
);
|
|
15526
|
-
const syncValueState =
|
|
15444
|
+
const syncValueState = React59.useCallback(() => {
|
|
15527
15445
|
if (!textareaRef.current) return;
|
|
15528
15446
|
setNativeValue(textareaRef.current.value);
|
|
15529
15447
|
}, [setNativeValue]);
|
|
15530
|
-
|
|
15448
|
+
React59.useLayoutEffect(() => {
|
|
15531
15449
|
syncValueState();
|
|
15532
15450
|
});
|
|
15533
|
-
|
|
15451
|
+
React59.useEffect(() => {
|
|
15534
15452
|
const textarea = textareaRef.current;
|
|
15535
15453
|
const form = textarea?.form;
|
|
15536
15454
|
if (isControlled || !form) return;
|
|
@@ -15554,10 +15472,10 @@ function useTextareaValueState({
|
|
|
15554
15472
|
}
|
|
15555
15473
|
|
|
15556
15474
|
// src/dashboard/textarea/Textarea.tsx
|
|
15557
|
-
var
|
|
15475
|
+
var import_jsx_runtime170 = require("react/jsx-runtime");
|
|
15558
15476
|
var LINE_HEIGHT = 20;
|
|
15559
15477
|
var VERTICAL_PADDING = 32;
|
|
15560
|
-
var Textarea =
|
|
15478
|
+
var Textarea = React60.forwardRef(function Textarea2({
|
|
15561
15479
|
className,
|
|
15562
15480
|
textareaClassName,
|
|
15563
15481
|
label,
|
|
@@ -15585,12 +15503,12 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15585
15503
|
}, ref) {
|
|
15586
15504
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15587
15505
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15588
|
-
const reactId =
|
|
15506
|
+
const reactId = React60.useId();
|
|
15589
15507
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15590
15508
|
const { t } = (0, import_react_i18next37.useTranslation)();
|
|
15591
15509
|
const isInvalid = Boolean(invalid || error);
|
|
15592
15510
|
const isBlocked = Boolean(disabled);
|
|
15593
|
-
const resize =
|
|
15511
|
+
const resize = React60.useCallback(() => {
|
|
15594
15512
|
const el = textareaRef.current;
|
|
15595
15513
|
if (!el || !autosize) return;
|
|
15596
15514
|
el.style.height = "auto";
|
|
@@ -15600,7 +15518,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15600
15518
|
el.style.height = `${nextHeight}px`;
|
|
15601
15519
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15602
15520
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15603
|
-
|
|
15521
|
+
React60.useLayoutEffect(() => {
|
|
15604
15522
|
resize();
|
|
15605
15523
|
}, [resize, value]);
|
|
15606
15524
|
const handleInput = (event) => {
|
|
@@ -15623,7 +15541,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15623
15541
|
onBlur?.(event);
|
|
15624
15542
|
syncValueState();
|
|
15625
15543
|
};
|
|
15626
|
-
return /* @__PURE__ */ (0,
|
|
15544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
15627
15545
|
"div",
|
|
15628
15546
|
{
|
|
15629
15547
|
className: cn(
|
|
@@ -15633,18 +15551,18 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15633
15551
|
className
|
|
15634
15552
|
),
|
|
15635
15553
|
children: [
|
|
15636
|
-
label && /* @__PURE__ */ (0,
|
|
15554
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
15637
15555
|
"label",
|
|
15638
15556
|
{
|
|
15639
15557
|
htmlFor: textareaId,
|
|
15640
15558
|
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15641
15559
|
children: [
|
|
15642
15560
|
label,
|
|
15643
|
-
tooltip && /* @__PURE__ */ (0,
|
|
15561
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15644
15562
|
]
|
|
15645
15563
|
}
|
|
15646
15564
|
),
|
|
15647
|
-
/* @__PURE__ */ (0,
|
|
15565
|
+
/* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15648
15566
|
"textarea",
|
|
15649
15567
|
{
|
|
15650
15568
|
ref: combinedRef,
|
|
@@ -15676,7 +15594,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15676
15594
|
...textareaProps
|
|
15677
15595
|
}
|
|
15678
15596
|
),
|
|
15679
|
-
error && /* @__PURE__ */ (0,
|
|
15597
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15680
15598
|
FieldErrorMessage,
|
|
15681
15599
|
{
|
|
15682
15600
|
id: `${textareaId}-error`,
|
|
@@ -15684,20 +15602,20 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15684
15602
|
className: "mt-[1px] text-[14px]"
|
|
15685
15603
|
}
|
|
15686
15604
|
),
|
|
15687
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
15688
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
15605
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
15606
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15689
15607
|
]
|
|
15690
15608
|
}
|
|
15691
15609
|
);
|
|
15692
15610
|
});
|
|
15693
15611
|
|
|
15694
15612
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15695
|
-
var
|
|
15696
|
-
var
|
|
15613
|
+
var React62 = __toESM(require("react"), 1);
|
|
15614
|
+
var import_lucide_react50 = require("lucide-react");
|
|
15697
15615
|
var import_react_i18next38 = require("react-i18next");
|
|
15698
15616
|
|
|
15699
15617
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15700
|
-
var
|
|
15618
|
+
var React61 = __toESM(require("react"), 1);
|
|
15701
15619
|
|
|
15702
15620
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15703
15621
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15848,21 +15766,21 @@ function useDatePickerWheel({
|
|
|
15848
15766
|
minDate,
|
|
15849
15767
|
maxDate
|
|
15850
15768
|
}) {
|
|
15851
|
-
const years =
|
|
15852
|
-
const [draftDate, setDraftDate] =
|
|
15769
|
+
const years = React61.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15770
|
+
const [draftDate, setDraftDate] = React61.useState(
|
|
15853
15771
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15854
15772
|
);
|
|
15855
15773
|
const draftYear = draftDate.getFullYear();
|
|
15856
15774
|
const draftMonth = draftDate.getMonth();
|
|
15857
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15858
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15859
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15860
|
-
const monthListRef =
|
|
15861
|
-
const dayListRef =
|
|
15862
|
-
const yearListRef =
|
|
15863
|
-
const settleTimeoutsRef =
|
|
15864
|
-
const animationFramesRef =
|
|
15865
|
-
const columnRefs =
|
|
15775
|
+
const [monthScrollTop, setMonthScrollTop] = React61.useState(0);
|
|
15776
|
+
const [dayScrollTop, setDayScrollTop] = React61.useState(0);
|
|
15777
|
+
const [yearScrollTop, setYearScrollTop] = React61.useState(0);
|
|
15778
|
+
const monthListRef = React61.useRef(null);
|
|
15779
|
+
const dayListRef = React61.useRef(null);
|
|
15780
|
+
const yearListRef = React61.useRef(null);
|
|
15781
|
+
const settleTimeoutsRef = React61.useRef({});
|
|
15782
|
+
const animationFramesRef = React61.useRef({});
|
|
15783
|
+
const columnRefs = React61.useMemo(
|
|
15866
15784
|
() => ({
|
|
15867
15785
|
month: monthListRef,
|
|
15868
15786
|
day: dayListRef,
|
|
@@ -15870,7 +15788,7 @@ function useDatePickerWheel({
|
|
|
15870
15788
|
}),
|
|
15871
15789
|
[]
|
|
15872
15790
|
);
|
|
15873
|
-
const setColumnScrollTop =
|
|
15791
|
+
const setColumnScrollTop = React61.useCallback(
|
|
15874
15792
|
(column, nextScrollTop) => {
|
|
15875
15793
|
if (column === "month") {
|
|
15876
15794
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15884,19 +15802,19 @@ function useDatePickerWheel({
|
|
|
15884
15802
|
},
|
|
15885
15803
|
[]
|
|
15886
15804
|
);
|
|
15887
|
-
const clearSettleTimeout =
|
|
15805
|
+
const clearSettleTimeout = React61.useCallback((column) => {
|
|
15888
15806
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15889
15807
|
if (timeoutId === void 0) return;
|
|
15890
15808
|
window.clearTimeout(timeoutId);
|
|
15891
15809
|
delete settleTimeoutsRef.current[column];
|
|
15892
15810
|
}, []);
|
|
15893
|
-
const clearAnimationFrame =
|
|
15811
|
+
const clearAnimationFrame = React61.useCallback((column) => {
|
|
15894
15812
|
const frameId = animationFramesRef.current[column];
|
|
15895
15813
|
if (frameId === void 0) return;
|
|
15896
15814
|
window.cancelAnimationFrame(frameId);
|
|
15897
15815
|
delete animationFramesRef.current[column];
|
|
15898
15816
|
}, []);
|
|
15899
|
-
|
|
15817
|
+
React61.useEffect(
|
|
15900
15818
|
() => () => {
|
|
15901
15819
|
["month", "day", "year"].forEach((column) => {
|
|
15902
15820
|
clearSettleTimeout(column);
|
|
@@ -15905,22 +15823,22 @@ function useDatePickerWheel({
|
|
|
15905
15823
|
},
|
|
15906
15824
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15907
15825
|
);
|
|
15908
|
-
|
|
15826
|
+
React61.useEffect(() => {
|
|
15909
15827
|
if (isOpen) return;
|
|
15910
15828
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15911
15829
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15912
|
-
const months =
|
|
15830
|
+
const months = React61.useMemo(
|
|
15913
15831
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15914
15832
|
[draftYear, maxDate, minDate]
|
|
15915
15833
|
);
|
|
15916
|
-
const days =
|
|
15834
|
+
const days = React61.useMemo(
|
|
15917
15835
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15918
15836
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15919
15837
|
);
|
|
15920
15838
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15921
15839
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15922
15840
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15923
|
-
const syncScrollPositions =
|
|
15841
|
+
const syncScrollPositions = React61.useCallback(
|
|
15924
15842
|
(nextDate, behavior = "auto") => {
|
|
15925
15843
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15926
15844
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15944,7 +15862,7 @@ function useDatePickerWheel({
|
|
|
15944
15862
|
},
|
|
15945
15863
|
[maxDate, minDate, years]
|
|
15946
15864
|
);
|
|
15947
|
-
|
|
15865
|
+
React61.useLayoutEffect(() => {
|
|
15948
15866
|
if (!isOpen) return;
|
|
15949
15867
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15950
15868
|
setDraftDate(nextDate);
|
|
@@ -15955,7 +15873,7 @@ function useDatePickerWheel({
|
|
|
15955
15873
|
window.cancelAnimationFrame(frameId);
|
|
15956
15874
|
};
|
|
15957
15875
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15958
|
-
const updateDraftDate =
|
|
15876
|
+
const updateDraftDate = React61.useCallback(
|
|
15959
15877
|
(column, targetIndex, behavior = "smooth") => {
|
|
15960
15878
|
const currentDate = stripTime(draftDate);
|
|
15961
15879
|
const currentYear = currentDate.getFullYear();
|
|
@@ -16000,7 +15918,7 @@ function useDatePickerWheel({
|
|
|
16000
15918
|
},
|
|
16001
15919
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
16002
15920
|
);
|
|
16003
|
-
const settleColumnScroll =
|
|
15921
|
+
const settleColumnScroll = React61.useCallback(
|
|
16004
15922
|
(column) => {
|
|
16005
15923
|
const list = columnRefs[column].current;
|
|
16006
15924
|
if (!list) return;
|
|
@@ -16013,7 +15931,7 @@ function useDatePickerWheel({
|
|
|
16013
15931
|
},
|
|
16014
15932
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
16015
15933
|
);
|
|
16016
|
-
const scheduleScrollSettle =
|
|
15934
|
+
const scheduleScrollSettle = React61.useCallback(
|
|
16017
15935
|
(column) => {
|
|
16018
15936
|
clearSettleTimeout(column);
|
|
16019
15937
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -16022,7 +15940,7 @@ function useDatePickerWheel({
|
|
|
16022
15940
|
},
|
|
16023
15941
|
[clearSettleTimeout, settleColumnScroll]
|
|
16024
15942
|
);
|
|
16025
|
-
const handleColumnScroll =
|
|
15943
|
+
const handleColumnScroll = React61.useCallback(
|
|
16026
15944
|
(column) => {
|
|
16027
15945
|
const list = columnRefs[column].current;
|
|
16028
15946
|
if (!list) return;
|
|
@@ -16036,13 +15954,13 @@ function useDatePickerWheel({
|
|
|
16036
15954
|
},
|
|
16037
15955
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
16038
15956
|
);
|
|
16039
|
-
const handleOptionSelect =
|
|
15957
|
+
const handleOptionSelect = React61.useCallback(
|
|
16040
15958
|
(column, targetIndex) => {
|
|
16041
15959
|
updateDraftDate(column, targetIndex, "smooth");
|
|
16042
15960
|
},
|
|
16043
15961
|
[updateDraftDate]
|
|
16044
15962
|
);
|
|
16045
|
-
const focusAdjacentColumn =
|
|
15963
|
+
const focusAdjacentColumn = React61.useCallback(
|
|
16046
15964
|
(column, direction) => {
|
|
16047
15965
|
const order = ["month", "day", "year"];
|
|
16048
15966
|
const currentIndex = order.indexOf(column);
|
|
@@ -16052,7 +15970,7 @@ function useDatePickerWheel({
|
|
|
16052
15970
|
},
|
|
16053
15971
|
[columnRefs]
|
|
16054
15972
|
);
|
|
16055
|
-
const handleColumnKeyDown =
|
|
15973
|
+
const handleColumnKeyDown = React61.useCallback(
|
|
16056
15974
|
(column, event) => {
|
|
16057
15975
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
16058
15976
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -16118,7 +16036,7 @@ function useDatePickerWheel({
|
|
|
16118
16036
|
}
|
|
16119
16037
|
|
|
16120
16038
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
16121
|
-
var
|
|
16039
|
+
var import_jsx_runtime171 = require("react/jsx-runtime");
|
|
16122
16040
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
16123
16041
|
function AirbnbDatePickerWheelColumn({
|
|
16124
16042
|
id,
|
|
@@ -16132,7 +16050,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16132
16050
|
onOptionSelect,
|
|
16133
16051
|
column
|
|
16134
16052
|
}) {
|
|
16135
|
-
return /* @__PURE__ */ (0,
|
|
16053
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(
|
|
16136
16054
|
"div",
|
|
16137
16055
|
{
|
|
16138
16056
|
id,
|
|
@@ -16149,14 +16067,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16149
16067
|
WebkitOverflowScrolling: "touch"
|
|
16150
16068
|
},
|
|
16151
16069
|
children: [
|
|
16152
|
-
/* @__PURE__ */ (0,
|
|
16070
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { style: { height: `${spacerHeight}px` } }),
|
|
16153
16071
|
items.map((item, index) => {
|
|
16154
16072
|
const { style } = getWheelOptionStyles(
|
|
16155
16073
|
index,
|
|
16156
16074
|
scrollTop,
|
|
16157
16075
|
DATE_PICKER_OPTION_HEIGHT
|
|
16158
16076
|
);
|
|
16159
|
-
return /* @__PURE__ */ (0,
|
|
16077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
16160
16078
|
"button",
|
|
16161
16079
|
{
|
|
16162
16080
|
id: `${id}-option-${index}`,
|
|
@@ -16172,14 +16090,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16172
16090
|
`${column}-${item}-${index}`
|
|
16173
16091
|
);
|
|
16174
16092
|
}),
|
|
16175
|
-
/* @__PURE__ */ (0,
|
|
16093
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { style: { height: `${spacerHeight}px` } })
|
|
16176
16094
|
]
|
|
16177
16095
|
}
|
|
16178
16096
|
) });
|
|
16179
16097
|
}
|
|
16180
16098
|
|
|
16181
16099
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
16182
|
-
var
|
|
16100
|
+
var import_jsx_runtime172 = require("react/jsx-runtime");
|
|
16183
16101
|
function AirbnbDatePickerBody({
|
|
16184
16102
|
baseId,
|
|
16185
16103
|
label,
|
|
@@ -16201,19 +16119,19 @@ function AirbnbDatePickerBody({
|
|
|
16201
16119
|
onOptionSelect,
|
|
16202
16120
|
onDone
|
|
16203
16121
|
}) {
|
|
16204
|
-
return /* @__PURE__ */ (0,
|
|
16205
|
-
/* @__PURE__ */ (0,
|
|
16206
|
-
/* @__PURE__ */ (0,
|
|
16207
|
-
/* @__PURE__ */ (0,
|
|
16208
|
-
/* @__PURE__ */ (0,
|
|
16122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
|
|
16123
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "relative overflow-hidden rounded-[24px]", children: [
|
|
16124
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)("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" }),
|
|
16125
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)("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" }),
|
|
16126
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16209
16127
|
"div",
|
|
16210
16128
|
{
|
|
16211
16129
|
"aria-hidden": true,
|
|
16212
16130
|
className: "pointer-events-none absolute inset-x-0 top-1/2 z-0 h-8 -translate-y-1/2 rounded-[12px] bg-black/[0.04]"
|
|
16213
16131
|
}
|
|
16214
16132
|
),
|
|
16215
|
-
/* @__PURE__ */ (0,
|
|
16216
|
-
/* @__PURE__ */ (0,
|
|
16133
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
|
|
16134
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16217
16135
|
AirbnbDatePickerWheelColumn,
|
|
16218
16136
|
{
|
|
16219
16137
|
id: `${baseId}-month`,
|
|
@@ -16228,7 +16146,7 @@ function AirbnbDatePickerBody({
|
|
|
16228
16146
|
onOptionSelect
|
|
16229
16147
|
}
|
|
16230
16148
|
),
|
|
16231
|
-
/* @__PURE__ */ (0,
|
|
16149
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16232
16150
|
AirbnbDatePickerWheelColumn,
|
|
16233
16151
|
{
|
|
16234
16152
|
id: `${baseId}-day`,
|
|
@@ -16243,7 +16161,7 @@ function AirbnbDatePickerBody({
|
|
|
16243
16161
|
onOptionSelect
|
|
16244
16162
|
}
|
|
16245
16163
|
),
|
|
16246
|
-
/* @__PURE__ */ (0,
|
|
16164
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16247
16165
|
AirbnbDatePickerWheelColumn,
|
|
16248
16166
|
{
|
|
16249
16167
|
id: `${baseId}-year`,
|
|
@@ -16260,7 +16178,7 @@ function AirbnbDatePickerBody({
|
|
|
16260
16178
|
)
|
|
16261
16179
|
] })
|
|
16262
16180
|
] }),
|
|
16263
|
-
/* @__PURE__ */ (0,
|
|
16181
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
16264
16182
|
] });
|
|
16265
16183
|
}
|
|
16266
16184
|
function AirbnbDatePickerContent({
|
|
@@ -16288,7 +16206,7 @@ function AirbnbDatePickerContent({
|
|
|
16288
16206
|
onColumnKeyDown,
|
|
16289
16207
|
onOptionSelect
|
|
16290
16208
|
}) {
|
|
16291
|
-
const body = /* @__PURE__ */ (0,
|
|
16209
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16292
16210
|
AirbnbDatePickerBody,
|
|
16293
16211
|
{
|
|
16294
16212
|
baseId,
|
|
@@ -16313,27 +16231,27 @@ function AirbnbDatePickerContent({
|
|
|
16313
16231
|
}
|
|
16314
16232
|
);
|
|
16315
16233
|
if (isMobile3) {
|
|
16316
|
-
return /* @__PURE__ */ (0,
|
|
16234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16317
16235
|
DrawerContent,
|
|
16318
16236
|
{
|
|
16319
16237
|
onClose: () => onOpenChange(false),
|
|
16320
16238
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
16321
16239
|
children: [
|
|
16322
|
-
/* @__PURE__ */ (0,
|
|
16323
|
-
/* @__PURE__ */ (0,
|
|
16240
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DrawerTitle, { className: "sr-only", children: title }),
|
|
16241
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
16324
16242
|
body
|
|
16325
16243
|
]
|
|
16326
16244
|
}
|
|
16327
16245
|
) });
|
|
16328
16246
|
}
|
|
16329
|
-
return /* @__PURE__ */ (0,
|
|
16247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16330
16248
|
DialogContent,
|
|
16331
16249
|
{
|
|
16332
16250
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
16333
16251
|
showCloseButton: false,
|
|
16334
16252
|
children: [
|
|
16335
|
-
/* @__PURE__ */ (0,
|
|
16336
|
-
/* @__PURE__ */ (0,
|
|
16253
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DialogTitle, { className: "sr-only", children: title }),
|
|
16254
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DialogDescription, { className: "sr-only", children: label }),
|
|
16337
16255
|
body
|
|
16338
16256
|
]
|
|
16339
16257
|
}
|
|
@@ -16341,7 +16259,7 @@ function AirbnbDatePickerContent({
|
|
|
16341
16259
|
}
|
|
16342
16260
|
|
|
16343
16261
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
16344
|
-
var
|
|
16262
|
+
var import_jsx_runtime173 = require("react/jsx-runtime");
|
|
16345
16263
|
var MONTHS_IN_YEAR2 = 12;
|
|
16346
16264
|
function getMonthLabels2(locale) {
|
|
16347
16265
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -16374,7 +16292,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
16374
16292
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
16375
16293
|
return new Date(yearNum, monthIndex, dayNum);
|
|
16376
16294
|
}
|
|
16377
|
-
var Datepicker =
|
|
16295
|
+
var Datepicker = React62.forwardRef(
|
|
16378
16296
|
function Datepicker2({
|
|
16379
16297
|
label,
|
|
16380
16298
|
value,
|
|
@@ -16407,14 +16325,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16407
16325
|
maxDate,
|
|
16408
16326
|
formatValue
|
|
16409
16327
|
}, ref) {
|
|
16410
|
-
const containerRef =
|
|
16411
|
-
const dayInputRef =
|
|
16412
|
-
const monthInputRef =
|
|
16413
|
-
const monthListRef =
|
|
16414
|
-
const yearInputRef =
|
|
16415
|
-
const mobileTriggerRef =
|
|
16416
|
-
const wheelBaseId =
|
|
16417
|
-
const reactId =
|
|
16328
|
+
const containerRef = React62.useRef(null);
|
|
16329
|
+
const dayInputRef = React62.useRef(null);
|
|
16330
|
+
const monthInputRef = React62.useRef(null);
|
|
16331
|
+
const monthListRef = React62.useRef(null);
|
|
16332
|
+
const yearInputRef = React62.useRef(null);
|
|
16333
|
+
const mobileTriggerRef = React62.useRef(null);
|
|
16334
|
+
const wheelBaseId = React62.useId();
|
|
16335
|
+
const reactId = React62.useId();
|
|
16418
16336
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
16419
16337
|
const dayId = `${baseId}-day`;
|
|
16420
16338
|
const monthId = `${baseId}-month`;
|
|
@@ -16423,38 +16341,38 @@ var Datepicker = React63.forwardRef(
|
|
|
16423
16341
|
const errorId = `${baseId}-error`;
|
|
16424
16342
|
const { t, i18n } = (0, import_react_i18next38.useTranslation)();
|
|
16425
16343
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
16426
|
-
const resolvedMonthLabels =
|
|
16344
|
+
const resolvedMonthLabels = React62.useMemo(
|
|
16427
16345
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
16428
16346
|
[resolvedLocale, monthLabels]
|
|
16429
16347
|
);
|
|
16430
16348
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
16431
16349
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
16432
16350
|
const isControlled = value !== void 0;
|
|
16433
|
-
const initialParts =
|
|
16351
|
+
const initialParts = React62.useMemo(
|
|
16434
16352
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
16435
16353
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16436
16354
|
[]
|
|
16437
16355
|
);
|
|
16438
|
-
const [day, setDay] =
|
|
16439
|
-
const [monthIndex, setMonthIndex] =
|
|
16356
|
+
const [day, setDay] = React62.useState(initialParts.day);
|
|
16357
|
+
const [monthIndex, setMonthIndex] = React62.useState(
|
|
16440
16358
|
initialParts.monthIndex
|
|
16441
16359
|
);
|
|
16442
|
-
const [year, setYear] =
|
|
16443
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
16444
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
16445
|
-
const [focusedField, setFocusedField] =
|
|
16446
|
-
const [monthInputValue, setMonthInputValue] =
|
|
16447
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
16360
|
+
const [year, setYear] = React62.useState(initialParts.year);
|
|
16361
|
+
const [isMonthOpen, setIsMonthOpen] = React62.useState(false);
|
|
16362
|
+
const [isWheelOpen, setIsWheelOpen] = React62.useState(false);
|
|
16363
|
+
const [focusedField, setFocusedField] = React62.useState(null);
|
|
16364
|
+
const [monthInputValue, setMonthInputValue] = React62.useState("");
|
|
16365
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React62.useState(-1);
|
|
16448
16366
|
const isMobile3 = useIsMobile();
|
|
16449
|
-
const emitChangeRef =
|
|
16367
|
+
const emitChangeRef = React62.useRef(() => {
|
|
16450
16368
|
});
|
|
16451
|
-
const dayStateRef =
|
|
16452
|
-
const yearStateRef =
|
|
16453
|
-
const monthIndexRef =
|
|
16369
|
+
const dayStateRef = React62.useRef(day);
|
|
16370
|
+
const yearStateRef = React62.useRef(year);
|
|
16371
|
+
const monthIndexRef = React62.useRef(monthIndex);
|
|
16454
16372
|
dayStateRef.current = day;
|
|
16455
16373
|
yearStateRef.current = year;
|
|
16456
16374
|
monthIndexRef.current = monthIndex;
|
|
16457
|
-
|
|
16375
|
+
React62.useImperativeHandle(
|
|
16458
16376
|
ref,
|
|
16459
16377
|
() => ({
|
|
16460
16378
|
getDayValue: () => dayStateRef.current,
|
|
@@ -16472,27 +16390,27 @@ var Datepicker = React63.forwardRef(
|
|
|
16472
16390
|
}),
|
|
16473
16391
|
[]
|
|
16474
16392
|
);
|
|
16475
|
-
|
|
16393
|
+
React62.useEffect(() => {
|
|
16476
16394
|
if (!isControlled) return;
|
|
16477
16395
|
const next = partsFromDate(value ?? null);
|
|
16478
16396
|
setDay(next.day);
|
|
16479
16397
|
setMonthIndex(next.monthIndex);
|
|
16480
16398
|
setYear(next.year);
|
|
16481
16399
|
}, [isControlled, value]);
|
|
16482
|
-
|
|
16400
|
+
React62.useEffect(() => {
|
|
16483
16401
|
if (focusedField === "month") return;
|
|
16484
16402
|
setMonthInputValue(
|
|
16485
16403
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16486
16404
|
);
|
|
16487
16405
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16488
|
-
const filteredMonths =
|
|
16406
|
+
const filteredMonths = React62.useMemo(() => {
|
|
16489
16407
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16490
16408
|
const query = monthInputValue.trim().toLowerCase();
|
|
16491
16409
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16492
16410
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16493
16411
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16494
16412
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16495
|
-
|
|
16413
|
+
React62.useEffect(() => {
|
|
16496
16414
|
if (!isMonthOpen) {
|
|
16497
16415
|
setMonthHighlightIndex(-1);
|
|
16498
16416
|
return;
|
|
@@ -16513,7 +16431,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16513
16431
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16514
16432
|
const isInvalid = Boolean(invalid || error);
|
|
16515
16433
|
const wrapperWidth = toCssSize(width);
|
|
16516
|
-
const currentDate =
|
|
16434
|
+
const currentDate = React62.useMemo(
|
|
16517
16435
|
() => dateFromParts(day, monthIndex, year),
|
|
16518
16436
|
[day, monthIndex, year]
|
|
16519
16437
|
);
|
|
@@ -16522,7 +16440,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16522
16440
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16523
16441
|
isDisabled: !isMonthOpen || isMobile3
|
|
16524
16442
|
});
|
|
16525
|
-
const emitChange =
|
|
16443
|
+
const emitChange = React62.useCallback(
|
|
16526
16444
|
(nextDay, nextMonth, nextYear) => {
|
|
16527
16445
|
if (!onChange) return;
|
|
16528
16446
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16558,7 +16476,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16558
16476
|
setIsMonthOpen(true);
|
|
16559
16477
|
setMonthHighlightIndex(0);
|
|
16560
16478
|
};
|
|
16561
|
-
const commitMonthInput =
|
|
16479
|
+
const commitMonthInput = React62.useCallback(() => {
|
|
16562
16480
|
const query = monthInputValue.trim().toLowerCase();
|
|
16563
16481
|
if (!query) {
|
|
16564
16482
|
if (monthIndex !== null) {
|
|
@@ -16618,15 +16536,15 @@ var Datepicker = React63.forwardRef(
|
|
|
16618
16536
|
setIsMonthOpen(false);
|
|
16619
16537
|
}
|
|
16620
16538
|
};
|
|
16621
|
-
const focusDayInput =
|
|
16539
|
+
const focusDayInput = React62.useCallback(() => {
|
|
16622
16540
|
if (isBlocked || readOnly) return;
|
|
16623
16541
|
dayInputRef.current?.focus();
|
|
16624
16542
|
}, [isBlocked, readOnly]);
|
|
16625
|
-
const openWheel =
|
|
16543
|
+
const openWheel = React62.useCallback(() => {
|
|
16626
16544
|
if (isBlocked || readOnly) return;
|
|
16627
16545
|
setIsWheelOpen(true);
|
|
16628
16546
|
}, [isBlocked, readOnly]);
|
|
16629
|
-
const closeWheel =
|
|
16547
|
+
const closeWheel = React62.useCallback(() => {
|
|
16630
16548
|
setIsWheelOpen(false);
|
|
16631
16549
|
mobileTriggerRef.current?.focus();
|
|
16632
16550
|
}, []);
|
|
@@ -16638,7 +16556,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16638
16556
|
minDate,
|
|
16639
16557
|
maxDate
|
|
16640
16558
|
});
|
|
16641
|
-
const handleWheelDone =
|
|
16559
|
+
const handleWheelDone = React62.useCallback(() => {
|
|
16642
16560
|
const next = wheel.draftDate;
|
|
16643
16561
|
setDay(String(next.getDate()));
|
|
16644
16562
|
setMonthIndex(next.getMonth());
|
|
@@ -16647,14 +16565,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16647
16565
|
setIsWheelOpen(false);
|
|
16648
16566
|
mobileTriggerRef.current?.focus();
|
|
16649
16567
|
}, [name, onChange, wheel.draftDate]);
|
|
16650
|
-
const defaultFormatValue =
|
|
16568
|
+
const defaultFormatValue = React62.useCallback(
|
|
16651
16569
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16652
16570
|
[resolvedMonthLabels]
|
|
16653
16571
|
);
|
|
16654
16572
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16655
16573
|
const monthListboxId = `${monthId}-listbox`;
|
|
16656
16574
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16657
|
-
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0,
|
|
16575
|
+
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16658
16576
|
"ul",
|
|
16659
16577
|
{
|
|
16660
16578
|
ref: monthListRef,
|
|
@@ -16665,7 +16583,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16665
16583
|
children: filteredMonths.map((option, position) => {
|
|
16666
16584
|
const isSelected = option.index === monthIndex;
|
|
16667
16585
|
const isHighlighted = position === monthHighlightIndex;
|
|
16668
|
-
return /* @__PURE__ */ (0,
|
|
16586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16669
16587
|
"button",
|
|
16670
16588
|
{
|
|
16671
16589
|
id: getMonthOptionId(option.index),
|
|
@@ -16692,7 +16610,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16692
16610
|
isBlocked && "cursor-not-allowed",
|
|
16693
16611
|
loading && "cursor-progress"
|
|
16694
16612
|
);
|
|
16695
|
-
return /* @__PURE__ */ (0,
|
|
16613
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16696
16614
|
"div",
|
|
16697
16615
|
{
|
|
16698
16616
|
ref: containerRef,
|
|
@@ -16703,9 +16621,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16703
16621
|
className
|
|
16704
16622
|
),
|
|
16705
16623
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16706
|
-
children: /* @__PURE__ */ (0,
|
|
16707
|
-
/* @__PURE__ */ (0,
|
|
16708
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
16624
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
16625
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative w-full", children: [
|
|
16626
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
16709
16627
|
"button",
|
|
16710
16628
|
{
|
|
16711
16629
|
ref: mobileTriggerRef,
|
|
@@ -16725,9 +16643,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16725
16643
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16726
16644
|
),
|
|
16727
16645
|
children: [
|
|
16728
|
-
/* @__PURE__ */ (0,
|
|
16729
|
-
/* @__PURE__ */ (0,
|
|
16730
|
-
|
|
16646
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
16647
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16648
|
+
import_lucide_react50.ChevronDown,
|
|
16731
16649
|
{
|
|
16732
16650
|
size: 16,
|
|
16733
16651
|
className: cn(
|
|
@@ -16738,14 +16656,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16738
16656
|
) })
|
|
16739
16657
|
]
|
|
16740
16658
|
}
|
|
16741
|
-
) : /* @__PURE__ */ (0,
|
|
16659
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
16742
16660
|
"div",
|
|
16743
16661
|
{
|
|
16744
16662
|
className: cn(
|
|
16745
16663
|
"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)]"
|
|
16746
16664
|
),
|
|
16747
16665
|
children: [
|
|
16748
|
-
/* @__PURE__ */ (0,
|
|
16666
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16749
16667
|
"input",
|
|
16750
16668
|
{
|
|
16751
16669
|
ref: dayInputRef,
|
|
@@ -16774,8 +16692,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16774
16692
|
className: subInputClass
|
|
16775
16693
|
}
|
|
16776
16694
|
) }),
|
|
16777
|
-
/* @__PURE__ */ (0,
|
|
16778
|
-
/* @__PURE__ */ (0,
|
|
16695
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("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: [
|
|
16696
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16779
16697
|
"input",
|
|
16780
16698
|
{
|
|
16781
16699
|
ref: monthInputRef,
|
|
@@ -16821,8 +16739,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16821
16739
|
)
|
|
16822
16740
|
}
|
|
16823
16741
|
),
|
|
16824
|
-
/* @__PURE__ */ (0,
|
|
16825
|
-
|
|
16742
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16743
|
+
import_lucide_react50.ChevronDown,
|
|
16826
16744
|
{
|
|
16827
16745
|
size: 14,
|
|
16828
16746
|
onMouseDown: (event) => {
|
|
@@ -16838,7 +16756,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16838
16756
|
}
|
|
16839
16757
|
)
|
|
16840
16758
|
] }),
|
|
16841
|
-
/* @__PURE__ */ (0,
|
|
16759
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16842
16760
|
"input",
|
|
16843
16761
|
{
|
|
16844
16762
|
ref: yearInputRef,
|
|
@@ -16870,7 +16788,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16870
16788
|
]
|
|
16871
16789
|
}
|
|
16872
16790
|
),
|
|
16873
|
-
showCoverage && /* @__PURE__ */ (0,
|
|
16791
|
+
showCoverage && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16874
16792
|
"div",
|
|
16875
16793
|
{
|
|
16876
16794
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16878,7 +16796,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16878
16796
|
"aria-hidden": "true"
|
|
16879
16797
|
}
|
|
16880
16798
|
),
|
|
16881
|
-
/* @__PURE__ */ (0,
|
|
16799
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16882
16800
|
Fieldset,
|
|
16883
16801
|
{
|
|
16884
16802
|
isFocused,
|
|
@@ -16896,9 +16814,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16896
16814
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16897
16815
|
}
|
|
16898
16816
|
),
|
|
16899
|
-
isMonthOpen && !isMobile3 && /* @__PURE__ */ (0,
|
|
16817
|
+
isMonthOpen && !isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("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 })
|
|
16900
16818
|
] }),
|
|
16901
|
-
isMobile3 && /* @__PURE__ */ (0,
|
|
16819
|
+
isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16902
16820
|
AirbnbDatePickerContent,
|
|
16903
16821
|
{
|
|
16904
16822
|
baseId: wheelBaseId,
|
|
@@ -16926,9 +16844,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16926
16844
|
onOptionSelect: wheel.handleOptionSelect
|
|
16927
16845
|
}
|
|
16928
16846
|
),
|
|
16929
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
16930
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
16931
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
16847
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
16848
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16849
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16932
16850
|
FieldErrorMessage,
|
|
16933
16851
|
{
|
|
16934
16852
|
id: errorId,
|
|
@@ -16943,7 +16861,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16943
16861
|
);
|
|
16944
16862
|
|
|
16945
16863
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16946
|
-
var
|
|
16864
|
+
var React66 = __toESM(require("react"), 1);
|
|
16947
16865
|
var import_react_i18next39 = require("react-i18next");
|
|
16948
16866
|
|
|
16949
16867
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -17022,7 +16940,7 @@ var createDisabledMatchers = ({
|
|
|
17022
16940
|
};
|
|
17023
16941
|
|
|
17024
16942
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
17025
|
-
var
|
|
16943
|
+
var React63 = __toESM(require("react"), 1);
|
|
17026
16944
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
17027
16945
|
function useRangeValue({
|
|
17028
16946
|
value: externalValue,
|
|
@@ -17031,10 +16949,10 @@ function useRangeValue({
|
|
|
17031
16949
|
name
|
|
17032
16950
|
}) {
|
|
17033
16951
|
const isControlled = externalValue !== void 0;
|
|
17034
|
-
const [draft, setDraft] =
|
|
16952
|
+
const [draft, setDraft] = React63.useState(
|
|
17035
16953
|
isControlled ? externalValue : defaultValue
|
|
17036
16954
|
);
|
|
17037
|
-
const lastExternalKeyRef =
|
|
16955
|
+
const lastExternalKeyRef = React63.useRef(getRangeKey(externalValue));
|
|
17038
16956
|
if (isControlled) {
|
|
17039
16957
|
const externalKey = getRangeKey(externalValue);
|
|
17040
16958
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -17042,7 +16960,7 @@ function useRangeValue({
|
|
|
17042
16960
|
setDraft(externalValue);
|
|
17043
16961
|
}
|
|
17044
16962
|
}
|
|
17045
|
-
const commit =
|
|
16963
|
+
const commit = React63.useCallback(
|
|
17046
16964
|
(next) => {
|
|
17047
16965
|
setDraft(next);
|
|
17048
16966
|
if (next === void 0) {
|
|
@@ -17057,7 +16975,7 @@ function useRangeValue({
|
|
|
17057
16975
|
}
|
|
17058
16976
|
|
|
17059
16977
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
17060
|
-
var
|
|
16978
|
+
var React64 = __toESM(require("react"), 1);
|
|
17061
16979
|
|
|
17062
16980
|
// src/dashboard/date-range-picker/utils/inputFormat.ts
|
|
17063
16981
|
function parseDateInputFormat(format2) {
|
|
@@ -17147,18 +17065,18 @@ function useRangeTextInputs({
|
|
|
17147
17065
|
onFromComplete,
|
|
17148
17066
|
onToComplete
|
|
17149
17067
|
}) {
|
|
17150
|
-
const tokens =
|
|
17068
|
+
const tokens = React64.useMemo(
|
|
17151
17069
|
() => parseDateInputFormat(displayFormat),
|
|
17152
17070
|
[displayFormat]
|
|
17153
17071
|
);
|
|
17154
|
-
const maxDigits =
|
|
17155
|
-
const [fromText, setFromText] =
|
|
17156
|
-
const [toText, setToText] =
|
|
17157
|
-
|
|
17072
|
+
const maxDigits = React64.useMemo(() => getMaxDigits(tokens), [tokens]);
|
|
17073
|
+
const [fromText, setFromText] = React64.useState(value?.from ? format2(value.from) : "");
|
|
17074
|
+
const [toText, setToText] = React64.useState(value?.to ? format2(value.to) : "");
|
|
17075
|
+
React64.useEffect(() => {
|
|
17158
17076
|
setFromText(value?.from ? format2(value.from) : "");
|
|
17159
17077
|
setToText(value?.to ? format2(value.to) : "");
|
|
17160
17078
|
}, [format2, value?.from, value?.to]);
|
|
17161
|
-
const handleFromChange =
|
|
17079
|
+
const handleFromChange = React64.useCallback(
|
|
17162
17080
|
(raw) => {
|
|
17163
17081
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
17164
17082
|
const wasComplete = countDigits(fromText) === maxDigits;
|
|
@@ -17170,7 +17088,7 @@ function useRangeTextInputs({
|
|
|
17170
17088
|
},
|
|
17171
17089
|
[fromText, maxDigits, onFromComplete, parse3, tokens]
|
|
17172
17090
|
);
|
|
17173
|
-
const handleToChange =
|
|
17091
|
+
const handleToChange = React64.useCallback(
|
|
17174
17092
|
(raw) => {
|
|
17175
17093
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
17176
17094
|
const wasComplete = countDigits(toText) === maxDigits;
|
|
@@ -17182,7 +17100,7 @@ function useRangeTextInputs({
|
|
|
17182
17100
|
},
|
|
17183
17101
|
[maxDigits, onToComplete, parse3, toText, tokens]
|
|
17184
17102
|
);
|
|
17185
|
-
const handleFromBlur =
|
|
17103
|
+
const handleFromBlur = React64.useCallback(() => {
|
|
17186
17104
|
if (!fromText) {
|
|
17187
17105
|
const next = { from: void 0, to: value?.to };
|
|
17188
17106
|
onCommit(next);
|
|
@@ -17199,7 +17117,7 @@ function useRangeTextInputs({
|
|
|
17199
17117
|
setFromText(value?.from ? format2(value.from) : "");
|
|
17200
17118
|
return void 0;
|
|
17201
17119
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
17202
|
-
const handleToBlur =
|
|
17120
|
+
const handleToBlur = React64.useCallback(() => {
|
|
17203
17121
|
if (!toText) {
|
|
17204
17122
|
const next = { from: value?.from, to: void 0 };
|
|
17205
17123
|
onCommit(next);
|
|
@@ -17228,21 +17146,21 @@ function useRangeTextInputs({
|
|
|
17228
17146
|
}
|
|
17229
17147
|
|
|
17230
17148
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
17231
|
-
var
|
|
17149
|
+
var React65 = __toESM(require("react"), 1);
|
|
17232
17150
|
function useRangeMonthSync(value) {
|
|
17233
|
-
const isPreloadedRef =
|
|
17234
|
-
const [month, setMonth] =
|
|
17235
|
-
|
|
17151
|
+
const isPreloadedRef = React65.useRef(false);
|
|
17152
|
+
const [month, setMonth] = React65.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
17153
|
+
React65.useEffect(() => {
|
|
17236
17154
|
if (value?.from && !isPreloadedRef.current) {
|
|
17237
17155
|
setMonth(value.from);
|
|
17238
17156
|
isPreloadedRef.current = true;
|
|
17239
17157
|
}
|
|
17240
17158
|
}, [value?.from]);
|
|
17241
|
-
const syncMonthToValue =
|
|
17159
|
+
const syncMonthToValue = React65.useCallback((next) => {
|
|
17242
17160
|
isPreloadedRef.current = true;
|
|
17243
17161
|
if (next?.from) setMonth(next.from);
|
|
17244
17162
|
}, []);
|
|
17245
|
-
const resetPreload =
|
|
17163
|
+
const resetPreload = React65.useCallback(() => {
|
|
17246
17164
|
isPreloadedRef.current = false;
|
|
17247
17165
|
}, []);
|
|
17248
17166
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -17267,8 +17185,8 @@ function resolveRangeSelection({
|
|
|
17267
17185
|
}
|
|
17268
17186
|
|
|
17269
17187
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
17270
|
-
var
|
|
17271
|
-
var
|
|
17188
|
+
var import_lucide_react51 = require("lucide-react");
|
|
17189
|
+
var import_jsx_runtime174 = require("react/jsx-runtime");
|
|
17272
17190
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
17273
17191
|
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)]";
|
|
17274
17192
|
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";
|
|
@@ -17310,7 +17228,7 @@ function DateRangeInputs({
|
|
|
17310
17228
|
isBlocked && "cursor-not-allowed",
|
|
17311
17229
|
loading && "cursor-progress"
|
|
17312
17230
|
);
|
|
17313
|
-
return /* @__PURE__ */ (0,
|
|
17231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
|
|
17314
17232
|
"div",
|
|
17315
17233
|
{
|
|
17316
17234
|
className: cn(
|
|
@@ -17319,7 +17237,7 @@ function DateRangeInputs({
|
|
|
17319
17237
|
),
|
|
17320
17238
|
onClick: onRowClick,
|
|
17321
17239
|
children: [
|
|
17322
|
-
/* @__PURE__ */ (0,
|
|
17240
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17323
17241
|
"input",
|
|
17324
17242
|
{
|
|
17325
17243
|
ref: fromInputRef,
|
|
@@ -17344,7 +17262,7 @@ function DateRangeInputs({
|
|
|
17344
17262
|
)
|
|
17345
17263
|
}
|
|
17346
17264
|
),
|
|
17347
|
-
/* @__PURE__ */ (0,
|
|
17265
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17348
17266
|
"span",
|
|
17349
17267
|
{
|
|
17350
17268
|
"aria-hidden": "true",
|
|
@@ -17355,7 +17273,7 @@ function DateRangeInputs({
|
|
|
17355
17273
|
children: "\u2192"
|
|
17356
17274
|
}
|
|
17357
17275
|
),
|
|
17358
|
-
/* @__PURE__ */ (0,
|
|
17276
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17359
17277
|
"input",
|
|
17360
17278
|
{
|
|
17361
17279
|
ref: toInputRef,
|
|
@@ -17380,8 +17298,8 @@ function DateRangeInputs({
|
|
|
17380
17298
|
)
|
|
17381
17299
|
}
|
|
17382
17300
|
),
|
|
17383
|
-
/* @__PURE__ */ (0,
|
|
17384
|
-
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0,
|
|
17301
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
17302
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17385
17303
|
"button",
|
|
17386
17304
|
{
|
|
17387
17305
|
type: "button",
|
|
@@ -17389,10 +17307,10 @@ function DateRangeInputs({
|
|
|
17389
17307
|
onClick: onReset,
|
|
17390
17308
|
className: iconButtonClass,
|
|
17391
17309
|
"aria-label": clearLabel,
|
|
17392
|
-
children: /* @__PURE__ */ (0,
|
|
17310
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react51.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17393
17311
|
}
|
|
17394
17312
|
),
|
|
17395
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0,
|
|
17313
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17396
17314
|
"button",
|
|
17397
17315
|
{
|
|
17398
17316
|
type: "button",
|
|
@@ -17404,7 +17322,7 @@ function DateRangeInputs({
|
|
|
17404
17322
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
17405
17323
|
),
|
|
17406
17324
|
"aria-label": openCalendarLabel,
|
|
17407
|
-
children: /* @__PURE__ */ (0,
|
|
17325
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react51.CalendarDays, { size: 18 })
|
|
17408
17326
|
}
|
|
17409
17327
|
)
|
|
17410
17328
|
] })
|
|
@@ -17414,7 +17332,7 @@ function DateRangeInputs({
|
|
|
17414
17332
|
}
|
|
17415
17333
|
|
|
17416
17334
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
17417
|
-
var
|
|
17335
|
+
var import_jsx_runtime175 = require("react/jsx-runtime");
|
|
17418
17336
|
function DateRangeCalendar({
|
|
17419
17337
|
value,
|
|
17420
17338
|
month,
|
|
@@ -17430,7 +17348,7 @@ function DateRangeCalendar({
|
|
|
17430
17348
|
components,
|
|
17431
17349
|
...dayPickerProps
|
|
17432
17350
|
}) {
|
|
17433
|
-
return /* @__PURE__ */ (0,
|
|
17351
|
+
return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17434
17352
|
Calendar,
|
|
17435
17353
|
{
|
|
17436
17354
|
mode: "range",
|
|
@@ -17453,7 +17371,7 @@ function DateRangeCalendar({
|
|
|
17453
17371
|
}
|
|
17454
17372
|
|
|
17455
17373
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
17456
|
-
var
|
|
17374
|
+
var import_jsx_runtime176 = require("react/jsx-runtime");
|
|
17457
17375
|
function DateRangePopover({
|
|
17458
17376
|
isOpen,
|
|
17459
17377
|
isMobile: isMobile3,
|
|
@@ -17465,30 +17383,30 @@ function DateRangePopover({
|
|
|
17465
17383
|
}) {
|
|
17466
17384
|
if (!isOpen) return null;
|
|
17467
17385
|
if (isMobile3) {
|
|
17468
|
-
return /* @__PURE__ */ (0,
|
|
17386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17469
17387
|
Drawer,
|
|
17470
17388
|
{
|
|
17471
17389
|
open: isOpen,
|
|
17472
17390
|
onOpenChange: (next) => {
|
|
17473
17391
|
if (!next) onClose();
|
|
17474
17392
|
},
|
|
17475
|
-
children: /* @__PURE__ */ (0,
|
|
17393
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(
|
|
17476
17394
|
DrawerContent,
|
|
17477
17395
|
{
|
|
17478
17396
|
onClose,
|
|
17479
17397
|
lockScroll: false,
|
|
17480
17398
|
className: "max-h-[calc(100vh-1rem)]",
|
|
17481
17399
|
children: [
|
|
17482
|
-
/* @__PURE__ */ (0,
|
|
17483
|
-
/* @__PURE__ */ (0,
|
|
17484
|
-
/* @__PURE__ */ (0,
|
|
17400
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
17401
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
17402
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
17485
17403
|
]
|
|
17486
17404
|
}
|
|
17487
17405
|
)
|
|
17488
17406
|
}
|
|
17489
17407
|
);
|
|
17490
17408
|
}
|
|
17491
|
-
return /* @__PURE__ */ (0,
|
|
17409
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17492
17410
|
"div",
|
|
17493
17411
|
{
|
|
17494
17412
|
className: cn(
|
|
@@ -17501,8 +17419,8 @@ function DateRangePopover({
|
|
|
17501
17419
|
}
|
|
17502
17420
|
|
|
17503
17421
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17504
|
-
var
|
|
17505
|
-
var DateRangePicker =
|
|
17422
|
+
var import_jsx_runtime177 = require("react/jsx-runtime");
|
|
17423
|
+
var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
17506
17424
|
label,
|
|
17507
17425
|
value: externalValue,
|
|
17508
17426
|
defaultValue,
|
|
@@ -17537,20 +17455,20 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17537
17455
|
components: customComponents,
|
|
17538
17456
|
...dayPickerProps
|
|
17539
17457
|
}, ref) {
|
|
17540
|
-
const containerRef =
|
|
17541
|
-
const fromInputRef =
|
|
17542
|
-
const toInputRef =
|
|
17543
|
-
const reactId =
|
|
17458
|
+
const containerRef = React66.useRef(null);
|
|
17459
|
+
const fromInputRef = React66.useRef(null);
|
|
17460
|
+
const toInputRef = React66.useRef(null);
|
|
17461
|
+
const reactId = React66.useId();
|
|
17544
17462
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17545
17463
|
const fromId = `${baseId}-from`;
|
|
17546
17464
|
const toId = `${baseId}-to`;
|
|
17547
17465
|
const labelId = `${baseId}-label`;
|
|
17548
17466
|
const errorId = `${baseId}-error`;
|
|
17549
|
-
const normalizedValue =
|
|
17467
|
+
const normalizedValue = React66.useMemo(() => {
|
|
17550
17468
|
if (externalValue === void 0) return void 0;
|
|
17551
17469
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17552
17470
|
}, [externalValue]);
|
|
17553
|
-
const normalizedDefaultValue =
|
|
17471
|
+
const normalizedDefaultValue = React66.useMemo(() => {
|
|
17554
17472
|
if (defaultValue === void 0) return void 0;
|
|
17555
17473
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17556
17474
|
}, [defaultValue]);
|
|
@@ -17560,16 +17478,16 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17560
17478
|
onChange,
|
|
17561
17479
|
name
|
|
17562
17480
|
});
|
|
17563
|
-
const normalizedMinDate =
|
|
17564
|
-
const normalizedMaxDate =
|
|
17565
|
-
const formatter =
|
|
17566
|
-
const parser =
|
|
17567
|
-
const closeCalendarRef =
|
|
17481
|
+
const normalizedMinDate = React66.useMemo(() => toDate(minDate), [minDate]);
|
|
17482
|
+
const normalizedMaxDate = React66.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17483
|
+
const formatter = React66.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17484
|
+
const parser = React66.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17485
|
+
const closeCalendarRef = React66.useRef(() => {
|
|
17568
17486
|
});
|
|
17569
|
-
const handleFromComplete =
|
|
17487
|
+
const handleFromComplete = React66.useCallback(() => {
|
|
17570
17488
|
toInputRef.current?.focus();
|
|
17571
17489
|
}, []);
|
|
17572
|
-
const handleToComplete =
|
|
17490
|
+
const handleToComplete = React66.useCallback(() => {
|
|
17573
17491
|
toInputRef.current?.blur();
|
|
17574
17492
|
closeCalendarRef.current();
|
|
17575
17493
|
}, []);
|
|
@@ -17593,9 +17511,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17593
17511
|
onToComplete: handleToComplete
|
|
17594
17512
|
});
|
|
17595
17513
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17596
|
-
const [isOpen, setIsOpen] =
|
|
17597
|
-
const [focusedInput, setFocusedInput] =
|
|
17598
|
-
const [autoFocus, setAutoFocus] =
|
|
17514
|
+
const [isOpen, setIsOpen] = React66.useState(false);
|
|
17515
|
+
const [focusedInput, setFocusedInput] = React66.useState(null);
|
|
17516
|
+
const [autoFocus, setAutoFocus] = React66.useState(false);
|
|
17599
17517
|
const isMobile3 = useIsMobile();
|
|
17600
17518
|
const { t } = (0, import_react_i18next39.useTranslation)();
|
|
17601
17519
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17606,14 +17524,14 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17606
17524
|
const isFocused = focusedInput !== null || isOpen;
|
|
17607
17525
|
const wrapperWidth = toCssSize(width);
|
|
17608
17526
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17609
|
-
const closeCalendar =
|
|
17527
|
+
const closeCalendar = React66.useCallback(() => {
|
|
17610
17528
|
setIsOpen(false);
|
|
17611
17529
|
setFocusedInput(null);
|
|
17612
17530
|
setAutoFocus(false);
|
|
17613
17531
|
if (value?.from) setMonth(value.from);
|
|
17614
17532
|
}, [setMonth, value?.from]);
|
|
17615
17533
|
closeCalendarRef.current = closeCalendar;
|
|
17616
|
-
const openCalendar =
|
|
17534
|
+
const openCalendar = React66.useCallback(() => {
|
|
17617
17535
|
if (isBlocked || readOnly) return;
|
|
17618
17536
|
setIsOpen(true);
|
|
17619
17537
|
}, [isBlocked, readOnly]);
|
|
@@ -17622,7 +17540,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17622
17540
|
onOutsideClick: closeCalendar,
|
|
17623
17541
|
isDisabled: !isOpen || isMobile3
|
|
17624
17542
|
});
|
|
17625
|
-
const handlePickerChange =
|
|
17543
|
+
const handlePickerChange = React66.useCallback(
|
|
17626
17544
|
(range, pickedDate) => {
|
|
17627
17545
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17628
17546
|
previous: value,
|
|
@@ -17643,7 +17561,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17643
17561
|
setToText("");
|
|
17644
17562
|
setMonth(/* @__PURE__ */ new Date());
|
|
17645
17563
|
};
|
|
17646
|
-
const disabledMatchers =
|
|
17564
|
+
const disabledMatchers = React66.useMemo(
|
|
17647
17565
|
() => createDisabledMatchers({
|
|
17648
17566
|
minDate: normalizedMinDate,
|
|
17649
17567
|
maxDate: normalizedMaxDate,
|
|
@@ -17662,7 +17580,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17662
17580
|
openCalendar();
|
|
17663
17581
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17664
17582
|
};
|
|
17665
|
-
|
|
17583
|
+
React66.useImperativeHandle(
|
|
17666
17584
|
ref,
|
|
17667
17585
|
() => ({
|
|
17668
17586
|
setDateRange: (range) => {
|
|
@@ -17685,7 +17603,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17685
17603
|
syncMonthToValue
|
|
17686
17604
|
]
|
|
17687
17605
|
);
|
|
17688
|
-
return /* @__PURE__ */ (0,
|
|
17606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17689
17607
|
"div",
|
|
17690
17608
|
{
|
|
17691
17609
|
ref: containerRef,
|
|
@@ -17696,9 +17614,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17696
17614
|
className
|
|
17697
17615
|
),
|
|
17698
17616
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17699
|
-
children: /* @__PURE__ */ (0,
|
|
17700
|
-
/* @__PURE__ */ (0,
|
|
17701
|
-
/* @__PURE__ */ (0,
|
|
17617
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
17618
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: "relative w-full", children: [
|
|
17619
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17702
17620
|
DateRangeInputs,
|
|
17703
17621
|
{
|
|
17704
17622
|
fromId,
|
|
@@ -17751,7 +17669,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17751
17669
|
onToggleCalendar: toggleCalendar
|
|
17752
17670
|
}
|
|
17753
17671
|
),
|
|
17754
|
-
/* @__PURE__ */ (0,
|
|
17672
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17755
17673
|
Fieldset,
|
|
17756
17674
|
{
|
|
17757
17675
|
isFocused,
|
|
@@ -17768,7 +17686,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17768
17686
|
tooltip
|
|
17769
17687
|
}
|
|
17770
17688
|
),
|
|
17771
|
-
/* @__PURE__ */ (0,
|
|
17689
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17772
17690
|
DateRangePopover,
|
|
17773
17691
|
{
|
|
17774
17692
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17777,7 +17695,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17777
17695
|
drawerTitle,
|
|
17778
17696
|
drawerDescription,
|
|
17779
17697
|
onClose: closeCalendar,
|
|
17780
|
-
children: /* @__PURE__ */ (0,
|
|
17698
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17781
17699
|
DateRangeCalendar,
|
|
17782
17700
|
{
|
|
17783
17701
|
value,
|
|
@@ -17798,7 +17716,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17798
17716
|
}
|
|
17799
17717
|
)
|
|
17800
17718
|
] }),
|
|
17801
|
-
/* @__PURE__ */ (0,
|
|
17719
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17802
17720
|
DateRangePopover,
|
|
17803
17721
|
{
|
|
17804
17722
|
isOpen: isOpen && isMobile3,
|
|
@@ -17807,7 +17725,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17807
17725
|
drawerTitle,
|
|
17808
17726
|
drawerDescription,
|
|
17809
17727
|
onClose: closeCalendar,
|
|
17810
|
-
children: /* @__PURE__ */ (0,
|
|
17728
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17811
17729
|
DateRangeCalendar,
|
|
17812
17730
|
{
|
|
17813
17731
|
value,
|
|
@@ -17827,9 +17745,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17827
17745
|
)
|
|
17828
17746
|
}
|
|
17829
17747
|
),
|
|
17830
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
17831
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
17832
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
17748
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17749
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17750
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17833
17751
|
FieldErrorMessage,
|
|
17834
17752
|
{
|
|
17835
17753
|
id: errorId,
|
|
@@ -17843,7 +17761,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17843
17761
|
});
|
|
17844
17762
|
|
|
17845
17763
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17846
|
-
var
|
|
17764
|
+
var React67 = __toESM(require("react"), 1);
|
|
17847
17765
|
var import_react_i18next40 = require("react-i18next");
|
|
17848
17766
|
var import_date_fns4 = require("date-fns");
|
|
17849
17767
|
var import_react_day_picker2 = require("react-day-picker");
|
|
@@ -17866,11 +17784,11 @@ function useValidateDates({
|
|
|
17866
17784
|
const { t } = (0, import_react_i18next40.useTranslation)();
|
|
17867
17785
|
const handleError = useEvent(onError);
|
|
17868
17786
|
const handleSuccess = useEvent(onSuccess);
|
|
17869
|
-
const errorFormatter =
|
|
17787
|
+
const errorFormatter = React67.useMemo(
|
|
17870
17788
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17871
17789
|
[displayFormat]
|
|
17872
17790
|
);
|
|
17873
|
-
const validateDates =
|
|
17791
|
+
const validateDates = React67.useCallback(
|
|
17874
17792
|
(dates) => {
|
|
17875
17793
|
const startDate = dates?.from;
|
|
17876
17794
|
const endDate = dates?.to;
|
|
@@ -17920,9 +17838,9 @@ function useValidateDates({
|
|
|
17920
17838
|
}
|
|
17921
17839
|
|
|
17922
17840
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17923
|
-
var
|
|
17841
|
+
var React68 = __toESM(require("react"), 1);
|
|
17924
17842
|
var import_date_fns5 = require("date-fns");
|
|
17925
|
-
var
|
|
17843
|
+
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
17926
17844
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17927
17845
|
function parseTime(value) {
|
|
17928
17846
|
return (0, import_date_fns5.parse)(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17964,24 +17882,24 @@ var FORMAT_SETTINGS = {
|
|
|
17964
17882
|
},
|
|
17965
17883
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17966
17884
|
};
|
|
17967
|
-
var TimePicker =
|
|
17968
|
-
const resolvedOptions =
|
|
17885
|
+
var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17886
|
+
const resolvedOptions = React68.useMemo(() => {
|
|
17969
17887
|
if (options) return options;
|
|
17970
17888
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17971
17889
|
return buildOptions(settings);
|
|
17972
17890
|
}, [formatName, options, timeSettings]);
|
|
17973
|
-
return /* @__PURE__ */ (0,
|
|
17891
|
+
return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17974
17892
|
});
|
|
17975
17893
|
|
|
17976
17894
|
// src/dashboard/file-input/FileInput.tsx
|
|
17977
|
-
var
|
|
17978
|
-
var
|
|
17895
|
+
var React69 = __toESM(require("react"), 1);
|
|
17896
|
+
var import_lucide_react52 = require("lucide-react");
|
|
17979
17897
|
var import_react_i18next41 = require("react-i18next");
|
|
17980
|
-
var
|
|
17898
|
+
var import_jsx_runtime179 = require("react/jsx-runtime");
|
|
17981
17899
|
function defaultDownload(url) {
|
|
17982
17900
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17983
17901
|
}
|
|
17984
|
-
var FileInput =
|
|
17902
|
+
var FileInput = React69.forwardRef(function FileInput2({
|
|
17985
17903
|
label,
|
|
17986
17904
|
value,
|
|
17987
17905
|
onChange,
|
|
@@ -18004,12 +17922,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18004
17922
|
width,
|
|
18005
17923
|
downloadLabel
|
|
18006
17924
|
}, ref) {
|
|
18007
|
-
const internalRef =
|
|
17925
|
+
const internalRef = React69.useRef(null);
|
|
18008
17926
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
18009
17927
|
const { t } = (0, import_react_i18next41.useTranslation)();
|
|
18010
17928
|
const resolvedLabel = label ?? t("upload_file");
|
|
18011
17929
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
18012
|
-
const reactId =
|
|
17930
|
+
const reactId = React69.useId();
|
|
18013
17931
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
18014
17932
|
const labelId = `${inputId}-label`;
|
|
18015
17933
|
const errorId = `${inputId}-error`;
|
|
@@ -18035,7 +17953,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18035
17953
|
event.stopPropagation();
|
|
18036
17954
|
if (isUrl) onDownload(value);
|
|
18037
17955
|
};
|
|
18038
|
-
return /* @__PURE__ */ (0,
|
|
17956
|
+
return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
18039
17957
|
"label",
|
|
18040
17958
|
{
|
|
18041
17959
|
htmlFor: inputId,
|
|
@@ -18048,7 +17966,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18048
17966
|
),
|
|
18049
17967
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
18050
17968
|
children: [
|
|
18051
|
-
/* @__PURE__ */ (0,
|
|
17969
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
18052
17970
|
"input",
|
|
18053
17971
|
{
|
|
18054
17972
|
ref: inputRef,
|
|
@@ -18065,9 +17983,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18065
17983
|
"aria-invalid": isInvalid
|
|
18066
17984
|
}
|
|
18067
17985
|
),
|
|
18068
|
-
/* @__PURE__ */ (0,
|
|
18069
|
-
/* @__PURE__ */ (0,
|
|
18070
|
-
/* @__PURE__ */ (0,
|
|
17986
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "relative w-full", children: [
|
|
17987
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "relative w-full", children: [
|
|
17988
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
18071
17989
|
"div",
|
|
18072
17990
|
{
|
|
18073
17991
|
className: cn(
|
|
@@ -18075,25 +17993,25 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18075
17993
|
isEmpty && "bg-[var(--empty-field-background)]"
|
|
18076
17994
|
),
|
|
18077
17995
|
children: [
|
|
18078
|
-
hasFileChip ? /* @__PURE__ */ (0,
|
|
17996
|
+
hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
18079
17997
|
"div",
|
|
18080
17998
|
{
|
|
18081
17999
|
className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
|
|
18082
18000
|
onClick: (event) => event.preventDefault(),
|
|
18083
18001
|
children: [
|
|
18084
|
-
isUrl ? /* @__PURE__ */ (0,
|
|
18002
|
+
isUrl ? /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
18085
18003
|
"button",
|
|
18086
18004
|
{
|
|
18087
18005
|
type: "button",
|
|
18088
18006
|
onClick: handleDownload,
|
|
18089
18007
|
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",
|
|
18090
18008
|
children: [
|
|
18091
|
-
/* @__PURE__ */ (0,
|
|
18092
|
-
/* @__PURE__ */ (0,
|
|
18009
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
18010
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react52.Download, { size: 15 })
|
|
18093
18011
|
]
|
|
18094
18012
|
}
|
|
18095
|
-
) : /* @__PURE__ */ (0,
|
|
18096
|
-
/* @__PURE__ */ (0,
|
|
18013
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
18014
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
18097
18015
|
"button",
|
|
18098
18016
|
{
|
|
18099
18017
|
type: "button",
|
|
@@ -18101,17 +18019,17 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18101
18019
|
onClick: handleClear,
|
|
18102
18020
|
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]",
|
|
18103
18021
|
"aria-label": t("remove_file"),
|
|
18104
|
-
children: /* @__PURE__ */ (0,
|
|
18022
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react52.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
18105
18023
|
}
|
|
18106
18024
|
)
|
|
18107
18025
|
]
|
|
18108
18026
|
}
|
|
18109
|
-
) : /* @__PURE__ */ (0,
|
|
18110
|
-
/* @__PURE__ */ (0,
|
|
18027
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
18028
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react52.Paperclip, { size: 20 }) })
|
|
18111
18029
|
]
|
|
18112
18030
|
}
|
|
18113
18031
|
),
|
|
18114
|
-
/* @__PURE__ */ (0,
|
|
18032
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
18115
18033
|
Fieldset,
|
|
18116
18034
|
{
|
|
18117
18035
|
isFocused: false,
|
|
@@ -18129,9 +18047,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18129
18047
|
}
|
|
18130
18048
|
)
|
|
18131
18049
|
] }),
|
|
18132
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
18133
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
18134
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
18050
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
18051
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
18052
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
18135
18053
|
FieldErrorMessage,
|
|
18136
18054
|
{
|
|
18137
18055
|
id: errorId,
|
|
@@ -18146,10 +18064,10 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18146
18064
|
});
|
|
18147
18065
|
|
|
18148
18066
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
18149
|
-
var
|
|
18150
|
-
var
|
|
18067
|
+
var React70 = __toESM(require("react"), 1);
|
|
18068
|
+
var import_jsx_runtime180 = require("react/jsx-runtime");
|
|
18151
18069
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
18152
|
-
var SelectIconsBox =
|
|
18070
|
+
var SelectIconsBox = React70.forwardRef(
|
|
18153
18071
|
function SelectIconsBox2({
|
|
18154
18072
|
children,
|
|
18155
18073
|
icons,
|
|
@@ -18165,10 +18083,10 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
18165
18083
|
className,
|
|
18166
18084
|
boxClassName
|
|
18167
18085
|
}, ref) {
|
|
18168
|
-
const containerRef =
|
|
18086
|
+
const containerRef = React70.useRef(null);
|
|
18169
18087
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
18170
18088
|
const isControlled = controlledOpen !== void 0;
|
|
18171
|
-
const [internalOpen, setInternalOpen] =
|
|
18089
|
+
const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
|
|
18172
18090
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
18173
18091
|
const setOpen = (next) => {
|
|
18174
18092
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -18195,7 +18113,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
18195
18113
|
);
|
|
18196
18114
|
focusable?.focus();
|
|
18197
18115
|
};
|
|
18198
|
-
return /* @__PURE__ */ (0,
|
|
18116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
|
|
18199
18117
|
"div",
|
|
18200
18118
|
{
|
|
18201
18119
|
ref: combinedContainerRef,
|
|
@@ -18205,7 +18123,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
18205
18123
|
className: cn("relative inline-block outline-none", className),
|
|
18206
18124
|
children: [
|
|
18207
18125
|
children,
|
|
18208
|
-
isOpen && /* @__PURE__ */ (0,
|
|
18126
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
18209
18127
|
"div",
|
|
18210
18128
|
{
|
|
18211
18129
|
className: cn(
|
|
@@ -18216,7 +18134,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
18216
18134
|
boxClassName
|
|
18217
18135
|
),
|
|
18218
18136
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
18219
|
-
children: icons.map((iconName) => /* @__PURE__ */ (0,
|
|
18137
|
+
children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
18220
18138
|
"button",
|
|
18221
18139
|
{
|
|
18222
18140
|
type: "button",
|
|
@@ -18299,14 +18217,14 @@ function getErrorMessage(error) {
|
|
|
18299
18217
|
|
|
18300
18218
|
// src/lib/toastResponseError.tsx
|
|
18301
18219
|
var import_i18next = __toESM(require("i18next"), 1);
|
|
18302
|
-
var
|
|
18220
|
+
var import_jsx_runtime181 = require("react/jsx-runtime");
|
|
18303
18221
|
function addSupportEmailToMessage(message, prefixText) {
|
|
18304
18222
|
if (typeof message !== "string") {
|
|
18305
18223
|
return message;
|
|
18306
18224
|
}
|
|
18307
18225
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
18308
|
-
return /* @__PURE__ */ (0,
|
|
18309
|
-
/* @__PURE__ */ (0,
|
|
18226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { children: [
|
|
18227
|
+
/* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { children: builtMessage }),
|
|
18310
18228
|
import_i18next.default.t("reach_us_at_email")
|
|
18311
18229
|
] });
|
|
18312
18230
|
}
|
|
@@ -18322,12 +18240,12 @@ function toastResponseError(error, options = {}) {
|
|
|
18322
18240
|
|
|
18323
18241
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
18324
18242
|
var import_react89 = require("react");
|
|
18325
|
-
var
|
|
18243
|
+
var import_jsx_runtime182 = require("react/jsx-runtime");
|
|
18326
18244
|
var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
18327
18245
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
18328
18246
|
const inputId = (0, import_react89.useId)();
|
|
18329
|
-
return /* @__PURE__ */ (0,
|
|
18330
|
-
/* @__PURE__ */ (0,
|
|
18247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: cn("relative", className), children: [
|
|
18248
|
+
/* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
|
|
18331
18249
|
"textarea",
|
|
18332
18250
|
{
|
|
18333
18251
|
ref,
|
|
@@ -18343,7 +18261,7 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18343
18261
|
...textareaProps
|
|
18344
18262
|
}
|
|
18345
18263
|
),
|
|
18346
|
-
label && /* @__PURE__ */ (0,
|
|
18264
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
|
|
18347
18265
|
"label",
|
|
18348
18266
|
{
|
|
18349
18267
|
htmlFor: inputId,
|
|
@@ -18361,15 +18279,15 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18361
18279
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
18362
18280
|
|
|
18363
18281
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18364
|
-
var React73 = __toESM(require("react"), 1);
|
|
18365
|
-
var import_lucide_react55 = require("lucide-react");
|
|
18366
|
-
|
|
18367
|
-
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
18368
18282
|
var React72 = __toESM(require("react"), 1);
|
|
18369
18283
|
var import_lucide_react54 = require("lucide-react");
|
|
18284
|
+
|
|
18285
|
+
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
18286
|
+
var React71 = __toESM(require("react"), 1);
|
|
18287
|
+
var import_lucide_react53 = require("lucide-react");
|
|
18370
18288
|
var import_react_i18next42 = require("react-i18next");
|
|
18371
|
-
var
|
|
18372
|
-
var AirbnbFieldTrigger =
|
|
18289
|
+
var import_jsx_runtime183 = require("react/jsx-runtime");
|
|
18290
|
+
var AirbnbFieldTrigger = React71.forwardRef(
|
|
18373
18291
|
({
|
|
18374
18292
|
as = "button",
|
|
18375
18293
|
id,
|
|
@@ -18405,14 +18323,14 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18405
18323
|
const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
|
|
18406
18324
|
const visibleLabelText = labelText ?? label;
|
|
18407
18325
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
18408
|
-
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0,
|
|
18409
|
-
/* @__PURE__ */ (0,
|
|
18410
|
-
optionalLabel && /* @__PURE__ */ (0,
|
|
18326
|
+
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
|
|
18327
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsx)("span", { className: "min-w-0 truncate", children: visibleLabelText }),
|
|
18328
|
+
optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "text-current opacity-70 lowercase", children: [
|
|
18411
18329
|
"(",
|
|
18412
18330
|
optionalLabel,
|
|
18413
18331
|
")"
|
|
18414
18332
|
] }),
|
|
18415
|
-
tooltip && /* @__PURE__ */ (0,
|
|
18333
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18416
18334
|
HelpTooltip,
|
|
18417
18335
|
{
|
|
18418
18336
|
content: tooltip,
|
|
@@ -18427,10 +18345,10 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18427
18345
|
const hasInvalidState = Boolean(error);
|
|
18428
18346
|
const errorMessage = typeof error === "string" ? error : void 0;
|
|
18429
18347
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18430
|
-
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0,
|
|
18348
|
+
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "flex items-center gap-2", children: [
|
|
18431
18349
|
trailingAdornment,
|
|
18432
|
-
loading && /* @__PURE__ */ (0,
|
|
18433
|
-
|
|
18350
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18351
|
+
import_lucide_react53.Loader2,
|
|
18434
18352
|
{
|
|
18435
18353
|
"aria-hidden": "true",
|
|
18436
18354
|
className: "h-5 w-5 animate-spin text-[var(--chekin-color-gray-1)]"
|
|
@@ -18445,8 +18363,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18445
18363
|
disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
|
|
18446
18364
|
className
|
|
18447
18365
|
);
|
|
18448
|
-
const sharedContent = /* @__PURE__ */ (0,
|
|
18449
|
-
/* @__PURE__ */ (0,
|
|
18366
|
+
const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(import_jsx_runtime183.Fragment, { children: [
|
|
18367
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(
|
|
18450
18368
|
"span",
|
|
18451
18369
|
{
|
|
18452
18370
|
className: cn(
|
|
@@ -18455,7 +18373,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18455
18373
|
contentClassName
|
|
18456
18374
|
),
|
|
18457
18375
|
children: [
|
|
18458
|
-
/* @__PURE__ */ (0,
|
|
18376
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18459
18377
|
"span",
|
|
18460
18378
|
{
|
|
18461
18379
|
id: labelId,
|
|
@@ -18468,7 +18386,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18468
18386
|
children: animatedLabel
|
|
18469
18387
|
}
|
|
18470
18388
|
),
|
|
18471
|
-
children ? children : hasValue ? /* @__PURE__ */ (0,
|
|
18389
|
+
children ? children : hasValue ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18472
18390
|
"span",
|
|
18473
18391
|
{
|
|
18474
18392
|
id: valueId,
|
|
@@ -18479,11 +18397,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18479
18397
|
),
|
|
18480
18398
|
children: valueText
|
|
18481
18399
|
}
|
|
18482
|
-
) : /* @__PURE__ */ (0,
|
|
18400
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
18483
18401
|
]
|
|
18484
18402
|
}
|
|
18485
18403
|
),
|
|
18486
|
-
resolvedTrailingAdornment && /* @__PURE__ */ (0,
|
|
18404
|
+
resolvedTrailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18487
18405
|
"span",
|
|
18488
18406
|
{
|
|
18489
18407
|
"aria-hidden": "true",
|
|
@@ -18492,9 +18410,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18492
18410
|
}
|
|
18493
18411
|
)
|
|
18494
18412
|
] });
|
|
18495
|
-
return /* @__PURE__ */ (0,
|
|
18496
|
-
topLabel && /* @__PURE__ */ (0,
|
|
18497
|
-
as === "button" ? /* @__PURE__ */ (0,
|
|
18413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { className: "w-full", children: [
|
|
18414
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
|
|
18415
|
+
as === "button" ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18498
18416
|
"button",
|
|
18499
18417
|
{
|
|
18500
18418
|
id,
|
|
@@ -18511,7 +18429,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18511
18429
|
...props,
|
|
18512
18430
|
children: sharedContent
|
|
18513
18431
|
}
|
|
18514
|
-
) : /* @__PURE__ */ (0,
|
|
18432
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18515
18433
|
"div",
|
|
18516
18434
|
{
|
|
18517
18435
|
id,
|
|
@@ -18528,16 +18446,16 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18528
18446
|
children: sharedContent
|
|
18529
18447
|
}
|
|
18530
18448
|
),
|
|
18531
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
18449
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
18532
18450
|
] });
|
|
18533
18451
|
}
|
|
18534
18452
|
);
|
|
18535
18453
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
18536
18454
|
|
|
18537
18455
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18538
|
-
var
|
|
18456
|
+
var import_jsx_runtime184 = require("react/jsx-runtime");
|
|
18539
18457
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18540
|
-
var AirbnbDatePicker =
|
|
18458
|
+
var AirbnbDatePicker = React72.forwardRef(
|
|
18541
18459
|
({
|
|
18542
18460
|
label,
|
|
18543
18461
|
topLabel,
|
|
@@ -18562,24 +18480,24 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18562
18480
|
formatValue = formatDateValue
|
|
18563
18481
|
}, ref) => {
|
|
18564
18482
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18565
|
-
const [isOpen, setIsOpen] =
|
|
18566
|
-
const triggerId =
|
|
18567
|
-
const pickerId =
|
|
18568
|
-
const labelId =
|
|
18569
|
-
const valueId =
|
|
18570
|
-
const helperTextId =
|
|
18571
|
-
const errorId =
|
|
18572
|
-
const internalRef =
|
|
18483
|
+
const [isOpen, setIsOpen] = React72.useState(false);
|
|
18484
|
+
const triggerId = React72.useId();
|
|
18485
|
+
const pickerId = React72.useId();
|
|
18486
|
+
const labelId = React72.useId();
|
|
18487
|
+
const valueId = React72.useId();
|
|
18488
|
+
const helperTextId = React72.useId();
|
|
18489
|
+
const errorId = React72.useId();
|
|
18490
|
+
const internalRef = React72.useRef(null);
|
|
18573
18491
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18574
|
-
const monthLabels =
|
|
18575
|
-
const resolvedMinDate =
|
|
18576
|
-
const resolvedMaxDate =
|
|
18577
|
-
const normalizedValue =
|
|
18578
|
-
const normalizedDefaultValue =
|
|
18492
|
+
const monthLabels = React72.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18493
|
+
const resolvedMinDate = React72.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18494
|
+
const resolvedMaxDate = React72.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18495
|
+
const normalizedValue = React72.useMemo(() => normalizeDateValue(value), [value]);
|
|
18496
|
+
const normalizedDefaultValue = React72.useMemo(
|
|
18579
18497
|
() => normalizeDateValue(defaultValue),
|
|
18580
18498
|
[defaultValue]
|
|
18581
18499
|
);
|
|
18582
|
-
const resolvedValue =
|
|
18500
|
+
const resolvedValue = React72.useMemo(
|
|
18583
18501
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18584
18502
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18585
18503
|
);
|
|
@@ -18610,7 +18528,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18610
18528
|
minDate: resolvedMinDate,
|
|
18611
18529
|
maxDate: resolvedMaxDate
|
|
18612
18530
|
});
|
|
18613
|
-
const handleOpenChange =
|
|
18531
|
+
const handleOpenChange = React72.useCallback(
|
|
18614
18532
|
(nextOpen) => {
|
|
18615
18533
|
if (isBlocked && nextOpen) return;
|
|
18616
18534
|
setIsOpen(nextOpen);
|
|
@@ -18620,7 +18538,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18620
18538
|
},
|
|
18621
18539
|
[isBlocked]
|
|
18622
18540
|
);
|
|
18623
|
-
const handleDone =
|
|
18541
|
+
const handleDone = React72.useCallback(() => {
|
|
18624
18542
|
if (isBlocked) return;
|
|
18625
18543
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18626
18544
|
handleOpenChange(false);
|
|
@@ -18632,11 +18550,11 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18632
18550
|
resolvedMaxDate,
|
|
18633
18551
|
resolvedMinDate
|
|
18634
18552
|
]);
|
|
18635
|
-
const handleTriggerClick =
|
|
18553
|
+
const handleTriggerClick = React72.useCallback(() => {
|
|
18636
18554
|
if (isBlocked) return;
|
|
18637
18555
|
setIsOpen(true);
|
|
18638
18556
|
}, [isBlocked]);
|
|
18639
|
-
const handleTriggerKeyDown =
|
|
18557
|
+
const handleTriggerKeyDown = React72.useCallback(
|
|
18640
18558
|
(event) => {
|
|
18641
18559
|
if (isBlocked) return;
|
|
18642
18560
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18646,13 +18564,13 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18646
18564
|
},
|
|
18647
18565
|
[isBlocked]
|
|
18648
18566
|
);
|
|
18649
|
-
|
|
18567
|
+
React72.useEffect(() => {
|
|
18650
18568
|
if (isBlocked) {
|
|
18651
18569
|
setIsOpen(false);
|
|
18652
18570
|
}
|
|
18653
18571
|
}, [isBlocked]);
|
|
18654
|
-
return /* @__PURE__ */ (0,
|
|
18655
|
-
name && /* @__PURE__ */ (0,
|
|
18572
|
+
return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
|
|
18573
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18656
18574
|
"input",
|
|
18657
18575
|
{
|
|
18658
18576
|
type: "hidden",
|
|
@@ -18660,7 +18578,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18660
18578
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
18661
18579
|
}
|
|
18662
18580
|
),
|
|
18663
|
-
/* @__PURE__ */ (0,
|
|
18581
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18664
18582
|
AirbnbFieldTrigger,
|
|
18665
18583
|
{
|
|
18666
18584
|
id: triggerId,
|
|
@@ -18686,10 +18604,10 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18686
18604
|
onClick: handleTriggerClick,
|
|
18687
18605
|
onKeyDown: handleTriggerKeyDown,
|
|
18688
18606
|
onBlur,
|
|
18689
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
18607
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_lucide_react54.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18690
18608
|
}
|
|
18691
18609
|
),
|
|
18692
|
-
/* @__PURE__ */ (0,
|
|
18610
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18693
18611
|
AirbnbDatePickerContent,
|
|
18694
18612
|
{
|
|
18695
18613
|
baseId: pickerId,
|
|
@@ -18723,12 +18641,12 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18723
18641
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18724
18642
|
|
|
18725
18643
|
// src/airbnb-fields/input/Input.tsx
|
|
18726
|
-
var
|
|
18727
|
-
var
|
|
18644
|
+
var React73 = __toESM(require("react"), 1);
|
|
18645
|
+
var import_lucide_react55 = require("lucide-react");
|
|
18728
18646
|
var import_react_i18next43 = require("react-i18next");
|
|
18729
|
-
var
|
|
18647
|
+
var import_jsx_runtime185 = require("react/jsx-runtime");
|
|
18730
18648
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18731
|
-
var AirbnbInput =
|
|
18649
|
+
var AirbnbInput = React73.forwardRef(
|
|
18732
18650
|
({
|
|
18733
18651
|
label,
|
|
18734
18652
|
topLabel,
|
|
@@ -18757,16 +18675,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18757
18675
|
...props
|
|
18758
18676
|
}, ref) => {
|
|
18759
18677
|
const { t } = (0, import_react_i18next43.useTranslation)();
|
|
18760
|
-
const generatedId =
|
|
18761
|
-
const inputRef =
|
|
18678
|
+
const generatedId = React73.useId();
|
|
18679
|
+
const inputRef = React73.useRef(null);
|
|
18762
18680
|
const inputId = id ?? generatedId;
|
|
18763
18681
|
const fieldId = `${inputId}-field`;
|
|
18764
18682
|
const labelId = `${inputId}-label`;
|
|
18765
18683
|
const errorId = `${inputId}-error`;
|
|
18766
18684
|
const accessibleLabel = placeholder ?? label;
|
|
18767
|
-
const [isFocused, setIsFocused] =
|
|
18768
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18769
|
-
const [currentValue, setCurrentValue] =
|
|
18685
|
+
const [isFocused, setIsFocused] = React73.useState(false);
|
|
18686
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React73.useState(false);
|
|
18687
|
+
const [currentValue, setCurrentValue] = React73.useState(
|
|
18770
18688
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18771
18689
|
);
|
|
18772
18690
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18779,16 +18697,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18779
18697
|
const triggerError = error ?? invalid;
|
|
18780
18698
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18781
18699
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18782
|
-
|
|
18700
|
+
React73.useLayoutEffect(() => {
|
|
18783
18701
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18784
18702
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18785
18703
|
}, [value]);
|
|
18786
|
-
|
|
18704
|
+
React73.useEffect(() => {
|
|
18787
18705
|
if (!isPasswordInput) {
|
|
18788
18706
|
setIsPasswordRevealed(false);
|
|
18789
18707
|
}
|
|
18790
18708
|
}, [isPasswordInput]);
|
|
18791
|
-
const setRefs =
|
|
18709
|
+
const setRefs = React73.useCallback(
|
|
18792
18710
|
(node) => {
|
|
18793
18711
|
inputRef.current = node;
|
|
18794
18712
|
if (node && value == null) {
|
|
@@ -18821,7 +18739,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18821
18739
|
const togglePasswordReveal = () => {
|
|
18822
18740
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18823
18741
|
};
|
|
18824
|
-
return /* @__PURE__ */ (0,
|
|
18742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
|
|
18825
18743
|
AirbnbFieldTrigger,
|
|
18826
18744
|
{
|
|
18827
18745
|
as: "div",
|
|
@@ -18850,7 +18768,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18850
18768
|
forceLabelText: hasLabelMeta,
|
|
18851
18769
|
hideErrorMessage: !renderErrorMessage,
|
|
18852
18770
|
children: [
|
|
18853
|
-
/* @__PURE__ */ (0,
|
|
18771
|
+
/* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18854
18772
|
"input",
|
|
18855
18773
|
{
|
|
18856
18774
|
...props,
|
|
@@ -18880,7 +18798,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18880
18798
|
)
|
|
18881
18799
|
}
|
|
18882
18800
|
),
|
|
18883
|
-
shouldShowPasswordReveal && /* @__PURE__ */ (0,
|
|
18801
|
+
shouldShowPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18884
18802
|
"button",
|
|
18885
18803
|
{
|
|
18886
18804
|
type: "button",
|
|
@@ -18888,8 +18806,8 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18888
18806
|
disabled: isBlocked,
|
|
18889
18807
|
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",
|
|
18890
18808
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18891
|
-
children: /* @__PURE__ */ (0,
|
|
18892
|
-
|
|
18809
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18810
|
+
import_lucide_react55.Eye,
|
|
18893
18811
|
{
|
|
18894
18812
|
size: 18,
|
|
18895
18813
|
"aria-hidden": "true",
|
|
@@ -18906,14 +18824,14 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18906
18824
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18907
18825
|
|
|
18908
18826
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18909
|
-
var
|
|
18910
|
-
var
|
|
18827
|
+
var React79 = __toESM(require("react"), 1);
|
|
18828
|
+
var import_lucide_react57 = require("lucide-react");
|
|
18911
18829
|
|
|
18912
18830
|
// src/airbnb-fields/select/Select.tsx
|
|
18913
|
-
var
|
|
18831
|
+
var React78 = __toESM(require("react"), 1);
|
|
18914
18832
|
|
|
18915
18833
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18916
|
-
var
|
|
18834
|
+
var import_jsx_runtime186 = require("react/jsx-runtime");
|
|
18917
18835
|
function AirbnbSelectDesktopMenu({
|
|
18918
18836
|
id,
|
|
18919
18837
|
options,
|
|
@@ -18932,7 +18850,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18932
18850
|
noOptionsMessage
|
|
18933
18851
|
}) {
|
|
18934
18852
|
const emptyMessage = noOptionsMessage?.();
|
|
18935
|
-
return /* @__PURE__ */ (0,
|
|
18853
|
+
return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
|
|
18936
18854
|
"div",
|
|
18937
18855
|
{
|
|
18938
18856
|
id,
|
|
@@ -18945,12 +18863,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18945
18863
|
onKeyDown,
|
|
18946
18864
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18947
18865
|
children: [
|
|
18948
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
18866
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18949
18867
|
options.map((option, index) => {
|
|
18950
18868
|
const isSelected = selectedValue?.value === option.value;
|
|
18951
18869
|
const isHighlighted = index === highlightedIndex;
|
|
18952
18870
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18953
|
-
return /* @__PURE__ */ (0,
|
|
18871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
|
|
18954
18872
|
"button",
|
|
18955
18873
|
{
|
|
18956
18874
|
id: getOptionId2(index),
|
|
@@ -18982,7 +18900,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18982
18900
|
}
|
|
18983
18901
|
|
|
18984
18902
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18985
|
-
var
|
|
18903
|
+
var import_jsx_runtime187 = require("react/jsx-runtime");
|
|
18986
18904
|
function AirbnbSelectDesktopContent({
|
|
18987
18905
|
isOpen,
|
|
18988
18906
|
listboxId,
|
|
@@ -19003,14 +18921,14 @@ function AirbnbSelectDesktopContent({
|
|
|
19003
18921
|
noOptionsMessage
|
|
19004
18922
|
}) {
|
|
19005
18923
|
if (!isOpen) return null;
|
|
19006
|
-
return /* @__PURE__ */ (0,
|
|
18924
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
19007
18925
|
"div",
|
|
19008
18926
|
{
|
|
19009
18927
|
className: cn(
|
|
19010
18928
|
"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)]",
|
|
19011
18929
|
dropdownClassName
|
|
19012
18930
|
),
|
|
19013
|
-
children: /* @__PURE__ */ (0,
|
|
18931
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
19014
18932
|
AirbnbSelectDesktopMenu,
|
|
19015
18933
|
{
|
|
19016
18934
|
id: listboxId,
|
|
@@ -19108,7 +19026,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
19108
19026
|
}
|
|
19109
19027
|
|
|
19110
19028
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
19111
|
-
var
|
|
19029
|
+
var import_jsx_runtime188 = require("react/jsx-runtime");
|
|
19112
19030
|
function AirbnbSelectMobileWheel({
|
|
19113
19031
|
id,
|
|
19114
19032
|
options,
|
|
@@ -19127,7 +19045,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19127
19045
|
}) {
|
|
19128
19046
|
const spacerHeight2 = getWheelSpacerHeight();
|
|
19129
19047
|
const emptyMessage = noOptionsMessage?.();
|
|
19130
|
-
return /* @__PURE__ */ (0,
|
|
19048
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
|
|
19131
19049
|
"div",
|
|
19132
19050
|
{
|
|
19133
19051
|
id,
|
|
@@ -19139,10 +19057,10 @@ function AirbnbSelectMobileWheel({
|
|
|
19139
19057
|
onKeyDown,
|
|
19140
19058
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
19141
19059
|
children: [
|
|
19142
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
19143
|
-
/* @__PURE__ */ (0,
|
|
19144
|
-
/* @__PURE__ */ (0,
|
|
19145
|
-
/* @__PURE__ */ (0,
|
|
19060
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
19061
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
19062
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
19063
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
19146
19064
|
"div",
|
|
19147
19065
|
{
|
|
19148
19066
|
"aria-hidden": true,
|
|
@@ -19152,7 +19070,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19152
19070
|
)
|
|
19153
19071
|
}
|
|
19154
19072
|
),
|
|
19155
|
-
/* @__PURE__ */ (0,
|
|
19073
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
|
|
19156
19074
|
"div",
|
|
19157
19075
|
{
|
|
19158
19076
|
ref: listRef,
|
|
@@ -19167,11 +19085,11 @@ function AirbnbSelectMobileWheel({
|
|
|
19167
19085
|
WebkitOverflowScrolling: "touch"
|
|
19168
19086
|
},
|
|
19169
19087
|
children: [
|
|
19170
|
-
/* @__PURE__ */ (0,
|
|
19088
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
|
|
19171
19089
|
options.map((option, index) => {
|
|
19172
19090
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
19173
19091
|
const optionKey = `${String(option.value)}-${index}`;
|
|
19174
|
-
return /* @__PURE__ */ (0,
|
|
19092
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
19175
19093
|
"button",
|
|
19176
19094
|
{
|
|
19177
19095
|
id: getOptionId2(index),
|
|
@@ -19192,7 +19110,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19192
19110
|
optionKey
|
|
19193
19111
|
);
|
|
19194
19112
|
}),
|
|
19195
|
-
/* @__PURE__ */ (0,
|
|
19113
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { style: { height: `${spacerHeight2}px` } })
|
|
19196
19114
|
]
|
|
19197
19115
|
}
|
|
19198
19116
|
)
|
|
@@ -19202,7 +19120,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19202
19120
|
}
|
|
19203
19121
|
|
|
19204
19122
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
19205
|
-
var
|
|
19123
|
+
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
19206
19124
|
function AirbnbSelectMobileContent({
|
|
19207
19125
|
open,
|
|
19208
19126
|
onOpenChange,
|
|
@@ -19226,11 +19144,11 @@ function AirbnbSelectMobileContent({
|
|
|
19226
19144
|
getOptionId: getOptionId2,
|
|
19227
19145
|
noOptionsMessage
|
|
19228
19146
|
}) {
|
|
19229
|
-
return /* @__PURE__ */ (0,
|
|
19230
|
-
/* @__PURE__ */ (0,
|
|
19231
|
-
/* @__PURE__ */ (0,
|
|
19232
|
-
/* @__PURE__ */ (0,
|
|
19233
|
-
/* @__PURE__ */ (0,
|
|
19147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
|
|
19148
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
19149
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
19150
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
|
|
19151
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
19234
19152
|
AirbnbSelectMobileWheel,
|
|
19235
19153
|
{
|
|
19236
19154
|
id: listboxId,
|
|
@@ -19249,16 +19167,16 @@ function AirbnbSelectMobileContent({
|
|
|
19249
19167
|
noOptionsMessage
|
|
19250
19168
|
}
|
|
19251
19169
|
),
|
|
19252
|
-
/* @__PURE__ */ (0,
|
|
19170
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
19253
19171
|
] })
|
|
19254
19172
|
] }) });
|
|
19255
19173
|
}
|
|
19256
19174
|
|
|
19257
19175
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
19258
|
-
var
|
|
19259
|
-
var
|
|
19260
|
-
var
|
|
19261
|
-
var AirbnbSelectTrigger =
|
|
19176
|
+
var React74 = __toESM(require("react"), 1);
|
|
19177
|
+
var import_lucide_react56 = require("lucide-react");
|
|
19178
|
+
var import_jsx_runtime190 = require("react/jsx-runtime");
|
|
19179
|
+
var AirbnbSelectTrigger = React74.forwardRef(
|
|
19262
19180
|
({
|
|
19263
19181
|
id,
|
|
19264
19182
|
open,
|
|
@@ -19282,7 +19200,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
19282
19200
|
onKeyDown,
|
|
19283
19201
|
onBlur
|
|
19284
19202
|
}, ref) => {
|
|
19285
|
-
return /* @__PURE__ */ (0,
|
|
19203
|
+
return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
19286
19204
|
AirbnbFieldTrigger,
|
|
19287
19205
|
{
|
|
19288
19206
|
id,
|
|
@@ -19310,8 +19228,8 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
19310
19228
|
onClick,
|
|
19311
19229
|
onKeyDown,
|
|
19312
19230
|
onBlur,
|
|
19313
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
19314
|
-
|
|
19231
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
19232
|
+
import_lucide_react56.ChevronDown,
|
|
19315
19233
|
{
|
|
19316
19234
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
19317
19235
|
}
|
|
@@ -19323,7 +19241,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
19323
19241
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
19324
19242
|
|
|
19325
19243
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
19326
|
-
var
|
|
19244
|
+
var React75 = __toESM(require("react"), 1);
|
|
19327
19245
|
function useDesktopSelect({
|
|
19328
19246
|
isMobile: isMobile3,
|
|
19329
19247
|
isOpen,
|
|
@@ -19332,12 +19250,12 @@ function useDesktopSelect({
|
|
|
19332
19250
|
disabled,
|
|
19333
19251
|
onChange
|
|
19334
19252
|
}) {
|
|
19335
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19336
|
-
const triggerRef =
|
|
19337
|
-
const listRef =
|
|
19338
|
-
const optionRefs =
|
|
19253
|
+
const [highlightedIndex, setHighlightedIndex] = React75.useState(-1);
|
|
19254
|
+
const triggerRef = React75.useRef(null);
|
|
19255
|
+
const listRef = React75.useRef(null);
|
|
19256
|
+
const optionRefs = React75.useRef([]);
|
|
19339
19257
|
const selectedIndex = getOptionIndex2(options, value);
|
|
19340
|
-
|
|
19258
|
+
React75.useEffect(() => {
|
|
19341
19259
|
if (!isOpen || isMobile3) return;
|
|
19342
19260
|
setHighlightedIndex((currentIndex) => {
|
|
19343
19261
|
if (currentIndex >= 0) {
|
|
@@ -19352,34 +19270,34 @@ function useDesktopSelect({
|
|
|
19352
19270
|
window.cancelAnimationFrame(frameId);
|
|
19353
19271
|
};
|
|
19354
19272
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
19355
|
-
|
|
19273
|
+
React75.useEffect(() => {
|
|
19356
19274
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
19357
19275
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
19358
19276
|
block: "nearest"
|
|
19359
19277
|
});
|
|
19360
19278
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
19361
|
-
|
|
19279
|
+
React75.useEffect(() => {
|
|
19362
19280
|
if (isOpen) return;
|
|
19363
19281
|
setHighlightedIndex(-1);
|
|
19364
19282
|
}, [isOpen]);
|
|
19365
|
-
const focusTrigger =
|
|
19283
|
+
const focusTrigger = React75.useCallback(() => {
|
|
19366
19284
|
triggerRef.current?.focus();
|
|
19367
19285
|
}, []);
|
|
19368
|
-
const handleSelect =
|
|
19286
|
+
const handleSelect = React75.useCallback(
|
|
19369
19287
|
(option) => {
|
|
19370
19288
|
if (option.isDisabled || disabled) return;
|
|
19371
19289
|
onChange?.(option);
|
|
19372
19290
|
},
|
|
19373
19291
|
[disabled, onChange]
|
|
19374
19292
|
);
|
|
19375
|
-
const openMenu =
|
|
19293
|
+
const openMenu = React75.useCallback(
|
|
19376
19294
|
(targetIndex) => {
|
|
19377
19295
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19378
19296
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
19379
19297
|
},
|
|
19380
19298
|
[options, selectedIndex]
|
|
19381
19299
|
);
|
|
19382
|
-
const handleTriggerKeyDown =
|
|
19300
|
+
const handleTriggerKeyDown = React75.useCallback(
|
|
19383
19301
|
(event, onOpen) => {
|
|
19384
19302
|
if (disabled) return;
|
|
19385
19303
|
if (event.key === "ArrowDown") {
|
|
@@ -19404,7 +19322,7 @@ function useDesktopSelect({
|
|
|
19404
19322
|
},
|
|
19405
19323
|
[disabled, openMenu, options, selectedIndex]
|
|
19406
19324
|
);
|
|
19407
|
-
const handleMenuKeyDown =
|
|
19325
|
+
const handleMenuKeyDown = React75.useCallback(
|
|
19408
19326
|
(event, onClose) => {
|
|
19409
19327
|
if (event.key === "Escape") {
|
|
19410
19328
|
event.preventDefault();
|
|
@@ -19454,7 +19372,7 @@ function useDesktopSelect({
|
|
|
19454
19372
|
},
|
|
19455
19373
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
19456
19374
|
);
|
|
19457
|
-
const setOptionRef =
|
|
19375
|
+
const setOptionRef = React75.useCallback(
|
|
19458
19376
|
(index, node) => {
|
|
19459
19377
|
optionRefs.current[index] = node;
|
|
19460
19378
|
},
|
|
@@ -19474,23 +19392,23 @@ function useDesktopSelect({
|
|
|
19474
19392
|
}
|
|
19475
19393
|
|
|
19476
19394
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19477
|
-
var
|
|
19395
|
+
var React76 = __toESM(require("react"), 1);
|
|
19478
19396
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19479
|
-
const [pendingValue, setPendingValue] =
|
|
19397
|
+
const [pendingValue, setPendingValue] = React76.useState(
|
|
19480
19398
|
value ?? null
|
|
19481
19399
|
);
|
|
19482
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19483
|
-
const mobileListRef =
|
|
19484
|
-
const scrollSettleTimeoutRef =
|
|
19485
|
-
const scrollAnimationFrameRef =
|
|
19486
|
-
const getTargetIndex =
|
|
19400
|
+
const [mobileScrollTop, setMobileScrollTop] = React76.useState(0);
|
|
19401
|
+
const mobileListRef = React76.useRef(null);
|
|
19402
|
+
const scrollSettleTimeoutRef = React76.useRef(null);
|
|
19403
|
+
const scrollAnimationFrameRef = React76.useRef(null);
|
|
19404
|
+
const getTargetIndex = React76.useCallback(
|
|
19487
19405
|
(targetValue) => {
|
|
19488
19406
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19489
19407
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19490
19408
|
},
|
|
19491
19409
|
[options]
|
|
19492
19410
|
);
|
|
19493
|
-
const syncScrollPosition =
|
|
19411
|
+
const syncScrollPosition = React76.useCallback(
|
|
19494
19412
|
(targetValue, behavior = "instant") => {
|
|
19495
19413
|
const targetIndex = getTargetIndex(targetValue);
|
|
19496
19414
|
if (targetIndex < 0) return;
|
|
@@ -19509,27 +19427,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19509
19427
|
},
|
|
19510
19428
|
[getTargetIndex, options]
|
|
19511
19429
|
);
|
|
19512
|
-
const clearScrollSettleTimeout =
|
|
19430
|
+
const clearScrollSettleTimeout = React76.useCallback(() => {
|
|
19513
19431
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19514
19432
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19515
19433
|
scrollSettleTimeoutRef.current = null;
|
|
19516
19434
|
}, []);
|
|
19517
|
-
const clearScrollAnimationFrame =
|
|
19435
|
+
const clearScrollAnimationFrame = React76.useCallback(() => {
|
|
19518
19436
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19519
19437
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19520
19438
|
scrollAnimationFrameRef.current = null;
|
|
19521
19439
|
}, []);
|
|
19522
|
-
|
|
19440
|
+
React76.useEffect(
|
|
19523
19441
|
() => () => {
|
|
19524
19442
|
clearScrollSettleTimeout();
|
|
19525
19443
|
clearScrollAnimationFrame();
|
|
19526
19444
|
},
|
|
19527
19445
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19528
19446
|
);
|
|
19529
|
-
|
|
19447
|
+
React76.useEffect(() => {
|
|
19530
19448
|
setPendingValue(value ?? null);
|
|
19531
19449
|
}, [value]);
|
|
19532
|
-
|
|
19450
|
+
React76.useLayoutEffect(() => {
|
|
19533
19451
|
if (!isMobile3 || !isOpen) return;
|
|
19534
19452
|
const frameId = window.requestAnimationFrame(() => {
|
|
19535
19453
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19538,7 +19456,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19538
19456
|
window.cancelAnimationFrame(frameId);
|
|
19539
19457
|
};
|
|
19540
19458
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19541
|
-
const settleScroll =
|
|
19459
|
+
const settleScroll = React76.useCallback(() => {
|
|
19542
19460
|
if (!mobileListRef.current) return;
|
|
19543
19461
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19544
19462
|
const nextOption = options[nextIndex];
|
|
@@ -19550,13 +19468,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19550
19468
|
}
|
|
19551
19469
|
setPendingValue(nextOption);
|
|
19552
19470
|
}, [options, pendingValue]);
|
|
19553
|
-
const scheduleScrollSettle =
|
|
19471
|
+
const scheduleScrollSettle = React76.useCallback(() => {
|
|
19554
19472
|
clearScrollSettleTimeout();
|
|
19555
19473
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19556
19474
|
settleScroll();
|
|
19557
19475
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19558
19476
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19559
|
-
const handleScroll =
|
|
19477
|
+
const handleScroll = React76.useCallback(() => {
|
|
19560
19478
|
if (!mobileListRef.current) return;
|
|
19561
19479
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19562
19480
|
clearScrollAnimationFrame();
|
|
@@ -19566,7 +19484,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19566
19484
|
});
|
|
19567
19485
|
scheduleScrollSettle();
|
|
19568
19486
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19569
|
-
const focusOptionByIndex =
|
|
19487
|
+
const focusOptionByIndex = React76.useCallback(
|
|
19570
19488
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19571
19489
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19572
19490
|
const option = options[index];
|
|
@@ -19584,7 +19502,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19584
19502
|
},
|
|
19585
19503
|
[options, scheduleScrollSettle]
|
|
19586
19504
|
);
|
|
19587
|
-
const handleOptionClick =
|
|
19505
|
+
const handleOptionClick = React76.useCallback(
|
|
19588
19506
|
(option) => {
|
|
19589
19507
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19590
19508
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19593,7 +19511,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19593
19511
|
},
|
|
19594
19512
|
[disabled, focusOptionByIndex, options]
|
|
19595
19513
|
);
|
|
19596
|
-
const moveByStep =
|
|
19514
|
+
const moveByStep = React76.useCallback(
|
|
19597
19515
|
(step) => {
|
|
19598
19516
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19599
19517
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19605,7 +19523,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19605
19523
|
},
|
|
19606
19524
|
[focusOptionByIndex, options, pendingValue]
|
|
19607
19525
|
);
|
|
19608
|
-
const moveToBoundary =
|
|
19526
|
+
const moveToBoundary = React76.useCallback(
|
|
19609
19527
|
(boundary) => {
|
|
19610
19528
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19611
19529
|
if (targetIndex >= 0) {
|
|
@@ -19614,7 +19532,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19614
19532
|
},
|
|
19615
19533
|
[focusOptionByIndex, options]
|
|
19616
19534
|
);
|
|
19617
|
-
const syncPendingValue =
|
|
19535
|
+
const syncPendingValue = React76.useCallback(
|
|
19618
19536
|
(nextValue) => {
|
|
19619
19537
|
const normalizedValue = nextValue ?? null;
|
|
19620
19538
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19642,9 +19560,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19642
19560
|
}
|
|
19643
19561
|
|
|
19644
19562
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19645
|
-
var
|
|
19563
|
+
var React77 = __toESM(require("react"), 1);
|
|
19646
19564
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19647
|
-
const reactId =
|
|
19565
|
+
const reactId = React77.useId().replace(/:/g, "");
|
|
19648
19566
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19649
19567
|
const triggerId = `${baseId}-trigger`;
|
|
19650
19568
|
const labelId = `${baseId}-label`;
|
|
@@ -19654,7 +19572,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19654
19572
|
const listboxId = `${baseId}-listbox`;
|
|
19655
19573
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19656
19574
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19657
|
-
const getOptionId2 =
|
|
19575
|
+
const getOptionId2 = React77.useCallback(
|
|
19658
19576
|
(index) => `${baseId}-option-${index}`,
|
|
19659
19577
|
[baseId]
|
|
19660
19578
|
);
|
|
@@ -19672,8 +19590,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19672
19590
|
}
|
|
19673
19591
|
|
|
19674
19592
|
// src/airbnb-fields/select/Select.tsx
|
|
19675
|
-
var
|
|
19676
|
-
var AirbnbSelect =
|
|
19593
|
+
var import_jsx_runtime191 = require("react/jsx-runtime");
|
|
19594
|
+
var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
19677
19595
|
options = [],
|
|
19678
19596
|
value,
|
|
19679
19597
|
onChange,
|
|
@@ -19700,8 +19618,8 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19700
19618
|
filterOption
|
|
19701
19619
|
}, ref) {
|
|
19702
19620
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19703
|
-
const [isOpen, setIsOpen] =
|
|
19704
|
-
const containerRef =
|
|
19621
|
+
const [isOpen, setIsOpen] = React78.useState(false);
|
|
19622
|
+
const containerRef = React78.useRef(null);
|
|
19705
19623
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19706
19624
|
const hasValue = Boolean(value);
|
|
19707
19625
|
const helperText = placeholder ?? label;
|
|
@@ -19763,12 +19681,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19763
19681
|
onOutsideClick: () => setIsOpen(false),
|
|
19764
19682
|
isDisabled: !isOpen || isMobile3
|
|
19765
19683
|
});
|
|
19766
|
-
|
|
19684
|
+
React78.useEffect(() => {
|
|
19767
19685
|
if (isBlocked) {
|
|
19768
19686
|
setIsOpen(false);
|
|
19769
19687
|
}
|
|
19770
19688
|
}, [isBlocked]);
|
|
19771
|
-
|
|
19689
|
+
React78.useEffect(
|
|
19772
19690
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19773
19691
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19774
19692
|
return;
|
|
@@ -19780,7 +19698,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19780
19698
|
},
|
|
19781
19699
|
[onChange, filteredOptions, value]
|
|
19782
19700
|
);
|
|
19783
|
-
const handleMobileOpenChange =
|
|
19701
|
+
const handleMobileOpenChange = React78.useCallback(
|
|
19784
19702
|
(nextOpen) => {
|
|
19785
19703
|
if (isBlocked && nextOpen) return;
|
|
19786
19704
|
setIsOpen(nextOpen);
|
|
@@ -19791,7 +19709,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19791
19709
|
},
|
|
19792
19710
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19793
19711
|
);
|
|
19794
|
-
const handleMobileDone =
|
|
19712
|
+
const handleMobileDone = React78.useCallback(() => {
|
|
19795
19713
|
if (isBlocked) return;
|
|
19796
19714
|
const finalOption = pendingValue;
|
|
19797
19715
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19800,7 +19718,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19800
19718
|
setIsOpen(false);
|
|
19801
19719
|
focusTrigger();
|
|
19802
19720
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19803
|
-
const handleTriggerClick =
|
|
19721
|
+
const handleTriggerClick = React78.useCallback(() => {
|
|
19804
19722
|
if (isBlocked) return;
|
|
19805
19723
|
setIsOpen((prev) => {
|
|
19806
19724
|
const nextOpen = !prev;
|
|
@@ -19853,13 +19771,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19853
19771
|
handleMobileOpenChange(false);
|
|
19854
19772
|
}
|
|
19855
19773
|
};
|
|
19856
|
-
return /* @__PURE__ */ (0,
|
|
19774
|
+
return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
|
|
19857
19775
|
"div",
|
|
19858
19776
|
{
|
|
19859
19777
|
ref: containerRef,
|
|
19860
19778
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19861
19779
|
children: [
|
|
19862
|
-
name && /* @__PURE__ */ (0,
|
|
19780
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19863
19781
|
renderTrigger ? renderTrigger({
|
|
19864
19782
|
id: triggerId,
|
|
19865
19783
|
open: isOpen,
|
|
@@ -19880,7 +19798,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19880
19798
|
onClick: handleTriggerClick,
|
|
19881
19799
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19882
19800
|
onBlur
|
|
19883
|
-
}) : /* @__PURE__ */ (0,
|
|
19801
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19884
19802
|
AirbnbSelectTrigger,
|
|
19885
19803
|
{
|
|
19886
19804
|
id: triggerId,
|
|
@@ -19907,7 +19825,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19907
19825
|
onBlur
|
|
19908
19826
|
}
|
|
19909
19827
|
),
|
|
19910
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
19828
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19911
19829
|
AirbnbSelectMobileContent,
|
|
19912
19830
|
{
|
|
19913
19831
|
open: isOpen,
|
|
@@ -19932,7 +19850,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19932
19850
|
getOptionId: getOptionId2,
|
|
19933
19851
|
noOptionsMessage
|
|
19934
19852
|
}
|
|
19935
|
-
) : /* @__PURE__ */ (0,
|
|
19853
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19936
19854
|
AirbnbSelectDesktopContent,
|
|
19937
19855
|
{
|
|
19938
19856
|
isOpen,
|
|
@@ -19966,13 +19884,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19966
19884
|
});
|
|
19967
19885
|
|
|
19968
19886
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19969
|
-
var
|
|
19887
|
+
var import_jsx_runtime192 = require("react/jsx-runtime");
|
|
19970
19888
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19971
19889
|
const label = String(option.label);
|
|
19972
19890
|
const value = String(option.value);
|
|
19973
19891
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19974
19892
|
}
|
|
19975
|
-
var AirbnbPhoneField =
|
|
19893
|
+
var AirbnbPhoneField = React79.forwardRef(
|
|
19976
19894
|
({
|
|
19977
19895
|
label,
|
|
19978
19896
|
topLabel,
|
|
@@ -19996,9 +19914,9 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19996
19914
|
codePlaceholder = "+00",
|
|
19997
19915
|
defaultCode
|
|
19998
19916
|
}, ref) => {
|
|
19999
|
-
const inputId =
|
|
19917
|
+
const inputId = React79.useId();
|
|
20000
19918
|
const effectiveCode = value?.code || defaultCode || "";
|
|
20001
|
-
const codeOptions =
|
|
19919
|
+
const codeOptions = React79.useMemo(
|
|
20002
19920
|
() => options.map((option) => ({
|
|
20003
19921
|
value: option.value,
|
|
20004
19922
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -20006,7 +19924,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20006
19924
|
})),
|
|
20007
19925
|
[options]
|
|
20008
19926
|
);
|
|
20009
|
-
const selectedCodeOption =
|
|
19927
|
+
const selectedCodeOption = React79.useMemo(
|
|
20010
19928
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
20011
19929
|
[codeOptions, effectiveCode]
|
|
20012
19930
|
);
|
|
@@ -20014,9 +19932,9 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20014
19932
|
const hasInvalidState = Boolean(error) || Boolean(invalid);
|
|
20015
19933
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
20016
19934
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
20017
|
-
return /* @__PURE__ */ (0,
|
|
20018
|
-
name && /* @__PURE__ */ (0,
|
|
20019
|
-
codeName && /* @__PURE__ */ (0,
|
|
19935
|
+
return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
19936
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
19937
|
+
codeName && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
20020
19938
|
"input",
|
|
20021
19939
|
{
|
|
20022
19940
|
type: "hidden",
|
|
@@ -20025,7 +19943,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20025
19943
|
disabled
|
|
20026
19944
|
}
|
|
20027
19945
|
),
|
|
20028
|
-
numberName && /* @__PURE__ */ (0,
|
|
19946
|
+
numberName && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
20029
19947
|
"input",
|
|
20030
19948
|
{
|
|
20031
19949
|
type: "hidden",
|
|
@@ -20034,7 +19952,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20034
19952
|
disabled
|
|
20035
19953
|
}
|
|
20036
19954
|
),
|
|
20037
|
-
topLabel && /* @__PURE__ */ (0,
|
|
19955
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
20038
19956
|
"label",
|
|
20039
19957
|
{
|
|
20040
19958
|
htmlFor: inputId,
|
|
@@ -20042,8 +19960,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20042
19960
|
children: topLabel
|
|
20043
19961
|
}
|
|
20044
19962
|
),
|
|
20045
|
-
/* @__PURE__ */ (0,
|
|
20046
|
-
/* @__PURE__ */ (0,
|
|
19963
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "flex items-stretch", children: [
|
|
19964
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
20047
19965
|
AirbnbSelect,
|
|
20048
19966
|
{
|
|
20049
19967
|
ref,
|
|
@@ -20072,7 +19990,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20072
19990
|
onClick,
|
|
20073
19991
|
onKeyDown,
|
|
20074
19992
|
valueLabel
|
|
20075
|
-
}) => /* @__PURE__ */ (0,
|
|
19993
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
|
|
20076
19994
|
"button",
|
|
20077
19995
|
{
|
|
20078
19996
|
id,
|
|
@@ -20093,9 +20011,9 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20093
20011
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
20094
20012
|
),
|
|
20095
20013
|
children: [
|
|
20096
|
-
/* @__PURE__ */ (0,
|
|
20097
|
-
/* @__PURE__ */ (0,
|
|
20098
|
-
|
|
20014
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)("span", { children: valueLabel ?? codePlaceholder }),
|
|
20015
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
20016
|
+
import_lucide_react57.ChevronDown,
|
|
20099
20017
|
{
|
|
20100
20018
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
20101
20019
|
strokeWidth: 2
|
|
@@ -20106,7 +20024,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20106
20024
|
)
|
|
20107
20025
|
}
|
|
20108
20026
|
),
|
|
20109
|
-
/* @__PURE__ */ (0,
|
|
20027
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
20110
20028
|
AirbnbInput,
|
|
20111
20029
|
{
|
|
20112
20030
|
id: inputId,
|
|
@@ -20135,18 +20053,18 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20135
20053
|
}
|
|
20136
20054
|
)
|
|
20137
20055
|
] }),
|
|
20138
|
-
error && /* @__PURE__ */ (0,
|
|
20056
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(FieldErrorMessage, { message: error })
|
|
20139
20057
|
] });
|
|
20140
20058
|
}
|
|
20141
20059
|
);
|
|
20142
20060
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
20143
20061
|
|
|
20144
20062
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
20145
|
-
var
|
|
20146
|
-
var
|
|
20063
|
+
var React80 = __toESM(require("react"), 1);
|
|
20064
|
+
var import_lucide_react58 = require("lucide-react");
|
|
20147
20065
|
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
20148
20066
|
var import_react90 = require("react");
|
|
20149
|
-
var
|
|
20067
|
+
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
20150
20068
|
var ROW_HEIGHT = 48;
|
|
20151
20069
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
20152
20070
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -20186,13 +20104,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20186
20104
|
loadingMessage
|
|
20187
20105
|
}, ref) => {
|
|
20188
20106
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
20189
|
-
const reactId =
|
|
20190
|
-
const [open, setOpen] =
|
|
20191
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
20192
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
20193
|
-
const containerRef =
|
|
20194
|
-
const triggerRef =
|
|
20195
|
-
const inputRef =
|
|
20107
|
+
const reactId = React80.useId();
|
|
20108
|
+
const [open, setOpen] = React80.useState(false);
|
|
20109
|
+
const [internalSearchValue, setInternalSearchValue] = React80.useState("");
|
|
20110
|
+
const [highlightedIndex, setHighlightedIndex] = React80.useState(-1);
|
|
20111
|
+
const containerRef = React80.useRef(null);
|
|
20112
|
+
const triggerRef = React80.useRef(null);
|
|
20113
|
+
const inputRef = React80.useRef(null);
|
|
20196
20114
|
const listboxId = `${reactId}-listbox`;
|
|
20197
20115
|
const labelId = `${reactId}-label`;
|
|
20198
20116
|
const valueId = `${reactId}-value`;
|
|
@@ -20201,13 +20119,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20201
20119
|
const searchInputId = `${reactId}-search`;
|
|
20202
20120
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
20203
20121
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
20204
|
-
const visibleOptions =
|
|
20122
|
+
const visibleOptions = React80.useMemo(() => {
|
|
20205
20123
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
20206
20124
|
return options;
|
|
20207
20125
|
}
|
|
20208
20126
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
20209
20127
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
20210
|
-
const selectedIndex =
|
|
20128
|
+
const selectedIndex = React80.useMemo(
|
|
20211
20129
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
20212
20130
|
[value?.value, visibleOptions]
|
|
20213
20131
|
);
|
|
@@ -20233,7 +20151,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20233
20151
|
},
|
|
20234
20152
|
[handleOnOpenChange]
|
|
20235
20153
|
);
|
|
20236
|
-
|
|
20154
|
+
React80.useEffect(() => {
|
|
20237
20155
|
if (isBlocked) {
|
|
20238
20156
|
setSelectOpen(false);
|
|
20239
20157
|
return;
|
|
@@ -20246,7 +20164,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20246
20164
|
window.cancelAnimationFrame(frameId);
|
|
20247
20165
|
};
|
|
20248
20166
|
}, [isBlocked, open, setSelectOpen]);
|
|
20249
|
-
|
|
20167
|
+
React80.useEffect(() => {
|
|
20250
20168
|
if (!open) {
|
|
20251
20169
|
setHighlightedIndex(-1);
|
|
20252
20170
|
return;
|
|
@@ -20314,7 +20232,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20314
20232
|
}
|
|
20315
20233
|
}
|
|
20316
20234
|
}
|
|
20317
|
-
const content = /* @__PURE__ */ (0,
|
|
20235
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20318
20236
|
AirbnbSearchableSelectContent,
|
|
20319
20237
|
{
|
|
20320
20238
|
inputId: searchInputId,
|
|
@@ -20341,10 +20259,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20341
20259
|
onOptionHover: setHighlightedIndex
|
|
20342
20260
|
}
|
|
20343
20261
|
);
|
|
20344
|
-
|
|
20345
|
-
return /* @__PURE__ */ (0,
|
|
20346
|
-
name && /* @__PURE__ */ (0,
|
|
20347
|
-
/* @__PURE__ */ (0,
|
|
20262
|
+
React80.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
20263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
20264
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
20265
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20348
20266
|
AirbnbFieldTrigger,
|
|
20349
20267
|
{
|
|
20350
20268
|
id: `${reactId}-trigger`,
|
|
@@ -20378,8 +20296,8 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20378
20296
|
},
|
|
20379
20297
|
onKeyDown: handleTriggerKeyDown,
|
|
20380
20298
|
onBlur,
|
|
20381
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
20382
|
-
|
|
20299
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20300
|
+
import_lucide_react58.ChevronDown,
|
|
20383
20301
|
{
|
|
20384
20302
|
className: cn(
|
|
20385
20303
|
"h-6 w-6 text-[#1F1F1B] transition-transform",
|
|
@@ -20389,7 +20307,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20389
20307
|
)
|
|
20390
20308
|
}
|
|
20391
20309
|
),
|
|
20392
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
20310
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20393
20311
|
Drawer,
|
|
20394
20312
|
{
|
|
20395
20313
|
open,
|
|
@@ -20401,13 +20319,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20401
20319
|
}
|
|
20402
20320
|
closeSelect();
|
|
20403
20321
|
},
|
|
20404
|
-
children: /* @__PURE__ */ (0,
|
|
20405
|
-
/* @__PURE__ */ (0,
|
|
20406
|
-
/* @__PURE__ */ (0,
|
|
20407
|
-
/* @__PURE__ */ (0,
|
|
20322
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
20323
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
20324
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
20325
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
20408
20326
|
] })
|
|
20409
20327
|
}
|
|
20410
|
-
) : open ? /* @__PURE__ */ (0,
|
|
20328
|
+
) : open ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20411
20329
|
"div",
|
|
20412
20330
|
{
|
|
20413
20331
|
className: cn(
|
|
@@ -20419,7 +20337,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20419
20337
|
) : null
|
|
20420
20338
|
] });
|
|
20421
20339
|
};
|
|
20422
|
-
var AirbnbSearchableSelect =
|
|
20340
|
+
var AirbnbSearchableSelect = React80.forwardRef(
|
|
20423
20341
|
AirbnbSearchableSelectInternal
|
|
20424
20342
|
);
|
|
20425
20343
|
function AirbnbSearchableSelectContent({
|
|
@@ -20446,9 +20364,9 @@ function AirbnbSearchableSelectContent({
|
|
|
20446
20364
|
onOptionClick,
|
|
20447
20365
|
onOptionHover
|
|
20448
20366
|
}) {
|
|
20449
|
-
const listRef =
|
|
20450
|
-
const lastLoadMoreOptionsLengthRef =
|
|
20451
|
-
const previousHighlightedIndexRef =
|
|
20367
|
+
const listRef = React80.useRef(null);
|
|
20368
|
+
const lastLoadMoreOptionsLengthRef = React80.useRef(null);
|
|
20369
|
+
const previousHighlightedIndexRef = React80.useRef(highlightedIndex);
|
|
20452
20370
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
20453
20371
|
const virtualizer = (0, import_react_virtual3.useVirtualizer)({
|
|
20454
20372
|
count: rowCount,
|
|
@@ -20459,7 +20377,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20459
20377
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20460
20378
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20461
20379
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20462
|
-
|
|
20380
|
+
React80.useEffect(() => {
|
|
20463
20381
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20464
20382
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20465
20383
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20467,23 +20385,23 @@ function AirbnbSearchableSelectContent({
|
|
|
20467
20385
|
onLoadMore?.();
|
|
20468
20386
|
}
|
|
20469
20387
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20470
|
-
|
|
20388
|
+
React80.useEffect(() => {
|
|
20471
20389
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20472
20390
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20473
20391
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
20474
20392
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
20475
20393
|
}
|
|
20476
20394
|
}, [highlightedIndex, virtualizer]);
|
|
20477
|
-
return /* @__PURE__ */ (0,
|
|
20478
|
-
/* @__PURE__ */ (0,
|
|
20479
|
-
/* @__PURE__ */ (0,
|
|
20480
|
-
|
|
20395
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "p-2", children: [
|
|
20396
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "relative mb-2", children: [
|
|
20397
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20398
|
+
import_lucide_react58.Search,
|
|
20481
20399
|
{
|
|
20482
20400
|
"aria-hidden": "true",
|
|
20483
20401
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
20484
20402
|
}
|
|
20485
20403
|
),
|
|
20486
|
-
/* @__PURE__ */ (0,
|
|
20404
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20487
20405
|
"input",
|
|
20488
20406
|
{
|
|
20489
20407
|
id: inputId,
|
|
@@ -20502,7 +20420,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20502
20420
|
}
|
|
20503
20421
|
)
|
|
20504
20422
|
] }),
|
|
20505
|
-
loading && options.length === 0 ? /* @__PURE__ */ (0,
|
|
20423
|
+
loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20506
20424
|
"div",
|
|
20507
20425
|
{
|
|
20508
20426
|
id: listboxId,
|
|
@@ -20511,7 +20429,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20511
20429
|
"aria-labelledby": labelId,
|
|
20512
20430
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
20513
20431
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
20514
|
-
children: /* @__PURE__ */ (0,
|
|
20432
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20515
20433
|
"div",
|
|
20516
20434
|
{
|
|
20517
20435
|
className: "relative w-full",
|
|
@@ -20519,7 +20437,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20519
20437
|
children: virtualItems.map((virtualItem) => {
|
|
20520
20438
|
const option = options[virtualItem.index];
|
|
20521
20439
|
if (!option) {
|
|
20522
|
-
return /* @__PURE__ */ (0,
|
|
20440
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20523
20441
|
"div",
|
|
20524
20442
|
{
|
|
20525
20443
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -20534,7 +20452,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20534
20452
|
}
|
|
20535
20453
|
const isSelected = value?.value === option.value;
|
|
20536
20454
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
20537
|
-
return /* @__PURE__ */ (0,
|
|
20455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20538
20456
|
"button",
|
|
20539
20457
|
{
|
|
20540
20458
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -20556,7 +20474,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20556
20474
|
height: `${virtualItem.size}px`,
|
|
20557
20475
|
transform: `translateY(${virtualItem.start}px)`
|
|
20558
20476
|
},
|
|
20559
|
-
children: /* @__PURE__ */ (0,
|
|
20477
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("span", { className: "truncate text-center", children: String(option.label) })
|
|
20560
20478
|
},
|
|
20561
20479
|
`${String(option.value)}-${virtualItem.index}`
|
|
20562
20480
|
);
|
|
@@ -20585,16 +20503,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20585
20503
|
}
|
|
20586
20504
|
|
|
20587
20505
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20588
|
-
var
|
|
20506
|
+
var React81 = __toESM(require("react"), 1);
|
|
20589
20507
|
var import_react_i18next44 = require("react-i18next");
|
|
20590
|
-
var
|
|
20591
|
-
var
|
|
20592
|
-
var AirbnbSearchInput =
|
|
20508
|
+
var import_lucide_react59 = require("lucide-react");
|
|
20509
|
+
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
20510
|
+
var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20593
20511
|
const { t } = (0, import_react_i18next44.useTranslation)();
|
|
20594
20512
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20595
|
-
return /* @__PURE__ */ (0,
|
|
20596
|
-
/* @__PURE__ */ (0,
|
|
20597
|
-
/* @__PURE__ */ (0,
|
|
20513
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
20514
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_lucide_react59.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
|
|
20515
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20598
20516
|
"input",
|
|
20599
20517
|
{
|
|
20600
20518
|
...props,
|
|
@@ -20613,13 +20531,13 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20613
20531
|
)
|
|
20614
20532
|
}
|
|
20615
20533
|
),
|
|
20616
|
-
onReset && /* @__PURE__ */ (0,
|
|
20534
|
+
onReset && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20617
20535
|
Button,
|
|
20618
20536
|
{
|
|
20619
20537
|
variant: "ghost",
|
|
20620
20538
|
onClick: onReset,
|
|
20621
20539
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
20622
|
-
children: /* @__PURE__ */ (0,
|
|
20540
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_lucide_react59.X, { className: "h-5 w-5" })
|
|
20623
20541
|
}
|
|
20624
20542
|
)
|
|
20625
20543
|
] });
|
|
@@ -20627,11 +20545,11 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20627
20545
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20628
20546
|
|
|
20629
20547
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20630
|
-
var
|
|
20548
|
+
var React82 = __toESM(require("react"), 1);
|
|
20631
20549
|
var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
|
|
20632
|
-
var
|
|
20633
|
-
var
|
|
20634
|
-
var AirbnbSwitch =
|
|
20550
|
+
var import_lucide_react60 = require("lucide-react");
|
|
20551
|
+
var import_jsx_runtime195 = require("react/jsx-runtime");
|
|
20552
|
+
var AirbnbSwitch = React82.forwardRef(
|
|
20635
20553
|
({
|
|
20636
20554
|
className,
|
|
20637
20555
|
value,
|
|
@@ -20645,9 +20563,9 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20645
20563
|
wrapperClassName,
|
|
20646
20564
|
...props
|
|
20647
20565
|
}, ref) => {
|
|
20648
|
-
const generatedId =
|
|
20566
|
+
const generatedId = React82.useId();
|
|
20649
20567
|
const fieldId = id || generatedId;
|
|
20650
|
-
const switchElement = /* @__PURE__ */ (0,
|
|
20568
|
+
const switchElement = /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20651
20569
|
SwitchPrimitives2.Root,
|
|
20652
20570
|
{
|
|
20653
20571
|
ref,
|
|
@@ -20667,15 +20585,15 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20667
20585
|
"aria-busy": loading,
|
|
20668
20586
|
"aria-readonly": readOnly,
|
|
20669
20587
|
...props,
|
|
20670
|
-
children: /* @__PURE__ */ (0,
|
|
20588
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20671
20589
|
SwitchPrimitives2.Thumb,
|
|
20672
20590
|
{
|
|
20673
20591
|
className: cn(
|
|
20674
20592
|
"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",
|
|
20675
20593
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
20676
20594
|
),
|
|
20677
|
-
children: /* @__PURE__ */ (0,
|
|
20678
|
-
|
|
20595
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20596
|
+
import_lucide_react60.Check,
|
|
20679
20597
|
{
|
|
20680
20598
|
"aria-hidden": "true",
|
|
20681
20599
|
className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
|
|
@@ -20689,10 +20607,10 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20689
20607
|
if (!label && !error) {
|
|
20690
20608
|
return switchElement;
|
|
20691
20609
|
}
|
|
20692
|
-
return /* @__PURE__ */ (0,
|
|
20693
|
-
/* @__PURE__ */ (0,
|
|
20610
|
+
return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(import_jsx_runtime195.Fragment, { children: [
|
|
20611
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
|
|
20694
20612
|
switchElement,
|
|
20695
|
-
label && /* @__PURE__ */ (0,
|
|
20613
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20696
20614
|
Label,
|
|
20697
20615
|
{
|
|
20698
20616
|
htmlFor: fieldId,
|
|
@@ -20704,7 +20622,7 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20704
20622
|
}
|
|
20705
20623
|
)
|
|
20706
20624
|
] }),
|
|
20707
|
-
error && /* @__PURE__ */ (0,
|
|
20625
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(ErrorMessage, { disabled, children: error })
|
|
20708
20626
|
] });
|
|
20709
20627
|
}
|
|
20710
20628
|
);
|
|
@@ -21011,6 +20929,7 @@ AirbnbSwitch.displayName = "AirbnbSwitch";
|
|
|
21011
20929
|
VerticalTabs,
|
|
21012
20930
|
VideoModal,
|
|
21013
20931
|
VideoPlayer,
|
|
20932
|
+
VisualCheckbox,
|
|
21014
20933
|
Webcam,
|
|
21015
20934
|
WideButton,
|
|
21016
20935
|
addSupportEmailToMessage,
|