@chekinapp/ui 0.0.136 → 0.0.138
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +556 -605
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +534 -584
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.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,11 +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
|
|
15086
|
+
var import_lucide_react48 = require("lucide-react");
|
|
15112
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");
|
|
15113
15107
|
function SelectCheckboxOption(props) {
|
|
15114
15108
|
const {
|
|
15115
15109
|
option,
|
|
@@ -15122,7 +15116,7 @@ function SelectCheckboxOption(props) {
|
|
|
15122
15116
|
onHover,
|
|
15123
15117
|
innerRef
|
|
15124
15118
|
} = props;
|
|
15125
|
-
return /* @__PURE__ */ (0,
|
|
15119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
|
|
15126
15120
|
"button",
|
|
15127
15121
|
{
|
|
15128
15122
|
id,
|
|
@@ -15142,31 +15136,24 @@ function SelectCheckboxOption(props) {
|
|
|
15142
15136
|
isSelected && "bg-[var(--chekin-color-surface-autocomplete)] font-semibold text-[var(--chekin-color-brand-blue)]",
|
|
15143
15137
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
15144
15138
|
),
|
|
15145
|
-
children:
|
|
15146
|
-
/* @__PURE__ */ (0,
|
|
15147
|
-
|
|
15148
|
-
|
|
15139
|
+
children: [
|
|
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 })
|
|
15144
|
+
] })
|
|
15145
|
+
]
|
|
15149
15146
|
}
|
|
15150
15147
|
);
|
|
15151
15148
|
}
|
|
15152
15149
|
|
|
15153
15150
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
15154
|
-
var
|
|
15155
|
-
var import_lucide_react48 = require("lucide-react");
|
|
15151
|
+
var import_lucide_react49 = require("lucide-react");
|
|
15156
15152
|
var import_react_i18next35 = require("react-i18next");
|
|
15157
|
-
var
|
|
15153
|
+
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
15158
15154
|
function createCountTrigger(opts) {
|
|
15159
15155
|
const { getValueText, getTotalCount } = opts;
|
|
15160
15156
|
function CountTrigger(props) {
|
|
15161
|
-
const ctDebugRenderCount = React58.useRef(0);
|
|
15162
|
-
ctDebugRenderCount.current += 1;
|
|
15163
|
-
React58.useEffect(() => {
|
|
15164
|
-
console.log("[SC-debug] CountTrigger MOUNTED");
|
|
15165
|
-
return () => {
|
|
15166
|
-
console.log("[SC-debug] CountTrigger UNMOUNTED");
|
|
15167
|
-
};
|
|
15168
|
-
}, []);
|
|
15169
|
-
console.log(`[SC-debug] CountTrigger render #${ctDebugRenderCount.current}`);
|
|
15170
15157
|
const { t } = (0, import_react_i18next35.useTranslation)();
|
|
15171
15158
|
const {
|
|
15172
15159
|
triggerId,
|
|
@@ -15193,7 +15180,7 @@ function createCountTrigger(opts) {
|
|
|
15193
15180
|
const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
|
|
15194
15181
|
const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
|
|
15195
15182
|
const isEmpty = !hasValue;
|
|
15196
|
-
return /* @__PURE__ */ (0,
|
|
15183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
|
|
15197
15184
|
"button",
|
|
15198
15185
|
{
|
|
15199
15186
|
id: triggerId,
|
|
@@ -15216,10 +15203,10 @@ function createCountTrigger(opts) {
|
|
|
15216
15203
|
loading && "!cursor-progress"
|
|
15217
15204
|
),
|
|
15218
15205
|
children: [
|
|
15219
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
15220
|
-
/* @__PURE__ */ (0,
|
|
15221
|
-
/* @__PURE__ */ (0,
|
|
15222
|
-
|
|
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)(
|
|
15209
|
+
import_lucide_react49.ChevronDown,
|
|
15223
15210
|
{
|
|
15224
15211
|
size: 16,
|
|
15225
15212
|
className: cn(
|
|
@@ -15236,9 +15223,9 @@ function createCountTrigger(opts) {
|
|
|
15236
15223
|
}
|
|
15237
15224
|
|
|
15238
15225
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
15239
|
-
var
|
|
15226
|
+
var import_jsx_runtime168 = require("react/jsx-runtime");
|
|
15240
15227
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
15241
|
-
return /* @__PURE__ */ (0,
|
|
15228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
|
|
15242
15229
|
"button",
|
|
15243
15230
|
{
|
|
15244
15231
|
type: "button",
|
|
@@ -15248,19 +15235,22 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15248
15235
|
"flex w-full items-center gap-3 border-0 border-b border-[#f2f4f8] bg-white px-4 py-[14px] text-left text-[16px] font-bold leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors hover:bg-[var(--chekin-color-surface-pressed)]",
|
|
15249
15236
|
disabled && "cursor-default opacity-40"
|
|
15250
15237
|
),
|
|
15251
|
-
children:
|
|
15238
|
+
children: [
|
|
15239
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)(VisualCheckbox, { checked, disabled }),
|
|
15240
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "flex-1", children: label })
|
|
15241
|
+
]
|
|
15252
15242
|
}
|
|
15253
15243
|
);
|
|
15254
15244
|
}
|
|
15255
15245
|
|
|
15256
15246
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15257
|
-
var
|
|
15247
|
+
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
15258
15248
|
function hasPaginationProps(props) {
|
|
15259
15249
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
|
|
15260
15250
|
}
|
|
15261
15251
|
function makeTriggerSlot(render) {
|
|
15262
15252
|
function CustomTrigger(props) {
|
|
15263
|
-
return /* @__PURE__ */ (0,
|
|
15253
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_jsx_runtime169.Fragment, { children: render(props.isOpen, props.onContainerClick) });
|
|
15264
15254
|
}
|
|
15265
15255
|
return CustomTrigger;
|
|
15266
15256
|
}
|
|
@@ -15286,64 +15276,25 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15286
15276
|
const isPaginated = hasPaginationProps(
|
|
15287
15277
|
paginationAndRest
|
|
15288
15278
|
);
|
|
15289
|
-
const
|
|
15290
|
-
const scDebugPrevPropsRef = React59.useRef({});
|
|
15291
|
-
scDebugRenderCount.current += 1;
|
|
15292
|
-
{
|
|
15293
|
-
const current = {
|
|
15294
|
-
value,
|
|
15295
|
-
defaultValue,
|
|
15296
|
-
onChange,
|
|
15297
|
-
trigger,
|
|
15298
|
-
userComponents,
|
|
15299
|
-
valueText,
|
|
15300
|
-
filterOption,
|
|
15301
|
-
rawOptions,
|
|
15302
|
-
onSearchChange
|
|
15303
|
-
};
|
|
15304
|
-
const prev = scDebugPrevPropsRef.current;
|
|
15305
|
-
const changed = [];
|
|
15306
|
-
for (const key of Object.keys(current)) {
|
|
15307
|
-
if (prev[key] !== current[key]) changed.push(key);
|
|
15308
|
-
}
|
|
15309
|
-
console.log(
|
|
15310
|
-
`[SC-debug] SelectCheckboxes render #${scDebugRenderCount.current}`,
|
|
15311
|
-
{ changed, isPaginated, isControlled: value !== void 0 }
|
|
15312
|
-
);
|
|
15313
|
-
scDebugPrevPropsRef.current = current;
|
|
15314
|
-
if (scDebugRenderCount.current === 30) {
|
|
15315
|
-
console.warn(
|
|
15316
|
-
"[SC-debug] hit 30 renders of SelectCheckboxes \u2014 opening debugger"
|
|
15317
|
-
);
|
|
15318
|
-
debugger;
|
|
15319
|
-
}
|
|
15320
|
-
}
|
|
15321
|
-
const [inputValue, setInputValue] = React59.useState("");
|
|
15279
|
+
const [inputValue, setInputValue] = React58.useState("");
|
|
15322
15280
|
const isControlled = value !== void 0;
|
|
15323
|
-
const [internalValue, setInternalValue] =
|
|
15281
|
+
const [internalValue, setInternalValue] = React58.useState(
|
|
15324
15282
|
() => defaultValue ?? []
|
|
15325
15283
|
);
|
|
15326
15284
|
const currentValue = isControlled ? value : internalValue;
|
|
15327
|
-
const selected =
|
|
15328
|
-
const
|
|
15329
|
-
const handleChange = React59.useCallback(
|
|
15285
|
+
const selected = React58.useMemo(() => currentValue ?? [], [currentValue]);
|
|
15286
|
+
const handleChange = React58.useCallback(
|
|
15330
15287
|
(next, meta) => {
|
|
15331
|
-
scDebugHandleChangeCount.current += 1;
|
|
15332
|
-
console.log(
|
|
15333
|
-
`[SC-debug] handleChange #${scDebugHandleChangeCount.current}`,
|
|
15334
|
-
{ action: meta?.action, nextLength: next.length, isControlled }
|
|
15335
|
-
);
|
|
15336
|
-
console.trace("[SC-debug] handleChange caller stack");
|
|
15337
15288
|
if (!isControlled) setInternalValue(next);
|
|
15338
15289
|
onChange?.(next, meta);
|
|
15339
15290
|
},
|
|
15340
15291
|
[isControlled, onChange]
|
|
15341
15292
|
);
|
|
15342
|
-
const flatRawOptions =
|
|
15293
|
+
const flatRawOptions = React58.useMemo(
|
|
15343
15294
|
() => flattenGroupedOptions(rawOptions),
|
|
15344
15295
|
[rawOptions]
|
|
15345
15296
|
);
|
|
15346
|
-
const filteredGrouped =
|
|
15297
|
+
const filteredGrouped = React58.useMemo(() => {
|
|
15347
15298
|
const trimmed = inputValue.trim();
|
|
15348
15299
|
if (!trimmed) return rawOptions;
|
|
15349
15300
|
return rawOptions.map((item) => {
|
|
@@ -15354,7 +15305,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15354
15305
|
return filterOption(item, trimmed) ? item : null;
|
|
15355
15306
|
}).filter((item) => item !== null);
|
|
15356
15307
|
}, [rawOptions, inputValue, filterOption]);
|
|
15357
|
-
const filteredFlat =
|
|
15308
|
+
const filteredFlat = React58.useMemo(
|
|
15358
15309
|
() => flattenGroupedOptions(filteredGrouped),
|
|
15359
15310
|
[filteredGrouped]
|
|
15360
15311
|
);
|
|
@@ -15362,7 +15313,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15362
15313
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
15363
15314
|
}, 0);
|
|
15364
15315
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
15365
|
-
const handleToggleAll =
|
|
15316
|
+
const handleToggleAll = React58.useCallback(() => {
|
|
15366
15317
|
if (allVisibleSelected) {
|
|
15367
15318
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
15368
15319
|
handleChange(
|
|
@@ -15377,19 +15328,18 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15377
15328
|
}
|
|
15378
15329
|
handleChange(merged, { action: "select" });
|
|
15379
15330
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
15380
|
-
const valueTextRef =
|
|
15381
|
-
const totalCountRef =
|
|
15331
|
+
const valueTextRef = React58.useRef(valueText);
|
|
15332
|
+
const totalCountRef = React58.useRef(flatRawOptions.length);
|
|
15382
15333
|
valueTextRef.current = valueText;
|
|
15383
15334
|
totalCountRef.current = flatRawOptions.length;
|
|
15384
|
-
const Control =
|
|
15385
|
-
console.log("[SC-debug] (re)creating Control component", { hasCustomTrigger: !!trigger });
|
|
15335
|
+
const Control = React58.useMemo(() => {
|
|
15386
15336
|
if (trigger) return makeTriggerSlot(trigger);
|
|
15387
15337
|
return createCountTrigger({
|
|
15388
15338
|
getValueText: () => valueTextRef.current,
|
|
15389
15339
|
getTotalCount: () => totalCountRef.current
|
|
15390
15340
|
});
|
|
15391
15341
|
}, [trigger]);
|
|
15392
|
-
const components =
|
|
15342
|
+
const components = React58.useMemo(
|
|
15393
15343
|
() => ({
|
|
15394
15344
|
...userComponents,
|
|
15395
15345
|
Control,
|
|
@@ -15397,7 +15347,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15397
15347
|
}),
|
|
15398
15348
|
[userComponents, Control]
|
|
15399
15349
|
);
|
|
15400
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0,
|
|
15350
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15401
15351
|
SelectAllRow,
|
|
15402
15352
|
{
|
|
15403
15353
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -15405,7 +15355,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15405
15355
|
onToggle: handleToggleAll
|
|
15406
15356
|
}
|
|
15407
15357
|
) : void 0;
|
|
15408
|
-
const handleInputChange =
|
|
15358
|
+
const handleInputChange = React58.useCallback(
|
|
15409
15359
|
(next) => {
|
|
15410
15360
|
setInputValue(next);
|
|
15411
15361
|
onSearchChange?.(next);
|
|
@@ -15426,7 +15376,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15426
15376
|
isMulti: true
|
|
15427
15377
|
};
|
|
15428
15378
|
if (isPaginated) {
|
|
15429
|
-
return /* @__PURE__ */ (0,
|
|
15379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15430
15380
|
InfiniteScrollSelect,
|
|
15431
15381
|
{
|
|
15432
15382
|
ref,
|
|
@@ -15437,7 +15387,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15437
15387
|
}
|
|
15438
15388
|
);
|
|
15439
15389
|
}
|
|
15440
|
-
return /* @__PURE__ */ (0,
|
|
15390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15441
15391
|
Select,
|
|
15442
15392
|
{
|
|
15443
15393
|
ref,
|
|
@@ -15448,16 +15398,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15448
15398
|
}
|
|
15449
15399
|
);
|
|
15450
15400
|
}
|
|
15451
|
-
var SelectCheckboxes =
|
|
15401
|
+
var SelectCheckboxes = React58.forwardRef(
|
|
15452
15402
|
SelectCheckboxesInternal
|
|
15453
15403
|
);
|
|
15454
15404
|
|
|
15455
15405
|
// src/dashboard/textarea/Textarea.tsx
|
|
15456
|
-
var
|
|
15406
|
+
var React60 = __toESM(require("react"), 1);
|
|
15457
15407
|
var import_react_i18next37 = require("react-i18next");
|
|
15458
15408
|
|
|
15459
15409
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15460
|
-
var
|
|
15410
|
+
var React59 = __toESM(require("react"), 1);
|
|
15461
15411
|
var isEmptyValue2 = (value) => {
|
|
15462
15412
|
if (value === void 0 || value === null) return true;
|
|
15463
15413
|
return String(value).length === 0;
|
|
@@ -15476,12 +15426,12 @@ function useTextareaValueState({
|
|
|
15476
15426
|
value,
|
|
15477
15427
|
defaultValue
|
|
15478
15428
|
}) {
|
|
15479
|
-
const textareaRef =
|
|
15429
|
+
const textareaRef = React59.useRef(null);
|
|
15480
15430
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15481
15431
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15482
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15432
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React59.useState(propsAreEmpty);
|
|
15483
15433
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15484
|
-
const setNativeValue =
|
|
15434
|
+
const setNativeValue = React59.useCallback(
|
|
15485
15435
|
(nextValue) => {
|
|
15486
15436
|
if (isControlled) return;
|
|
15487
15437
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15491,14 +15441,14 @@ function useTextareaValueState({
|
|
|
15491
15441
|
},
|
|
15492
15442
|
[isControlled]
|
|
15493
15443
|
);
|
|
15494
|
-
const syncValueState =
|
|
15444
|
+
const syncValueState = React59.useCallback(() => {
|
|
15495
15445
|
if (!textareaRef.current) return;
|
|
15496
15446
|
setNativeValue(textareaRef.current.value);
|
|
15497
15447
|
}, [setNativeValue]);
|
|
15498
|
-
|
|
15448
|
+
React59.useLayoutEffect(() => {
|
|
15499
15449
|
syncValueState();
|
|
15500
15450
|
});
|
|
15501
|
-
|
|
15451
|
+
React59.useEffect(() => {
|
|
15502
15452
|
const textarea = textareaRef.current;
|
|
15503
15453
|
const form = textarea?.form;
|
|
15504
15454
|
if (isControlled || !form) return;
|
|
@@ -15522,10 +15472,10 @@ function useTextareaValueState({
|
|
|
15522
15472
|
}
|
|
15523
15473
|
|
|
15524
15474
|
// src/dashboard/textarea/Textarea.tsx
|
|
15525
|
-
var
|
|
15475
|
+
var import_jsx_runtime170 = require("react/jsx-runtime");
|
|
15526
15476
|
var LINE_HEIGHT = 20;
|
|
15527
15477
|
var VERTICAL_PADDING = 32;
|
|
15528
|
-
var Textarea =
|
|
15478
|
+
var Textarea = React60.forwardRef(function Textarea2({
|
|
15529
15479
|
className,
|
|
15530
15480
|
textareaClassName,
|
|
15531
15481
|
label,
|
|
@@ -15553,12 +15503,12 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15553
15503
|
}, ref) {
|
|
15554
15504
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15555
15505
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15556
|
-
const reactId =
|
|
15506
|
+
const reactId = React60.useId();
|
|
15557
15507
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15558
15508
|
const { t } = (0, import_react_i18next37.useTranslation)();
|
|
15559
15509
|
const isInvalid = Boolean(invalid || error);
|
|
15560
15510
|
const isBlocked = Boolean(disabled);
|
|
15561
|
-
const resize =
|
|
15511
|
+
const resize = React60.useCallback(() => {
|
|
15562
15512
|
const el = textareaRef.current;
|
|
15563
15513
|
if (!el || !autosize) return;
|
|
15564
15514
|
el.style.height = "auto";
|
|
@@ -15568,7 +15518,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15568
15518
|
el.style.height = `${nextHeight}px`;
|
|
15569
15519
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15570
15520
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15571
|
-
|
|
15521
|
+
React60.useLayoutEffect(() => {
|
|
15572
15522
|
resize();
|
|
15573
15523
|
}, [resize, value]);
|
|
15574
15524
|
const handleInput = (event) => {
|
|
@@ -15591,7 +15541,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15591
15541
|
onBlur?.(event);
|
|
15592
15542
|
syncValueState();
|
|
15593
15543
|
};
|
|
15594
|
-
return /* @__PURE__ */ (0,
|
|
15544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
15595
15545
|
"div",
|
|
15596
15546
|
{
|
|
15597
15547
|
className: cn(
|
|
@@ -15601,18 +15551,18 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15601
15551
|
className
|
|
15602
15552
|
),
|
|
15603
15553
|
children: [
|
|
15604
|
-
label && /* @__PURE__ */ (0,
|
|
15554
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
15605
15555
|
"label",
|
|
15606
15556
|
{
|
|
15607
15557
|
htmlFor: textareaId,
|
|
15608
15558
|
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15609
15559
|
children: [
|
|
15610
15560
|
label,
|
|
15611
|
-
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 }) })
|
|
15612
15562
|
]
|
|
15613
15563
|
}
|
|
15614
15564
|
),
|
|
15615
|
-
/* @__PURE__ */ (0,
|
|
15565
|
+
/* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15616
15566
|
"textarea",
|
|
15617
15567
|
{
|
|
15618
15568
|
ref: combinedRef,
|
|
@@ -15644,7 +15594,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15644
15594
|
...textareaProps
|
|
15645
15595
|
}
|
|
15646
15596
|
),
|
|
15647
|
-
error && /* @__PURE__ */ (0,
|
|
15597
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15648
15598
|
FieldErrorMessage,
|
|
15649
15599
|
{
|
|
15650
15600
|
id: `${textareaId}-error`,
|
|
@@ -15652,20 +15602,20 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15652
15602
|
className: "mt-[1px] text-[14px]"
|
|
15653
15603
|
}
|
|
15654
15604
|
),
|
|
15655
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
15656
|
-
!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 })
|
|
15657
15607
|
]
|
|
15658
15608
|
}
|
|
15659
15609
|
);
|
|
15660
15610
|
});
|
|
15661
15611
|
|
|
15662
15612
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15663
|
-
var
|
|
15664
|
-
var
|
|
15613
|
+
var React62 = __toESM(require("react"), 1);
|
|
15614
|
+
var import_lucide_react50 = require("lucide-react");
|
|
15665
15615
|
var import_react_i18next38 = require("react-i18next");
|
|
15666
15616
|
|
|
15667
15617
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15668
|
-
var
|
|
15618
|
+
var React61 = __toESM(require("react"), 1);
|
|
15669
15619
|
|
|
15670
15620
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15671
15621
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15816,21 +15766,21 @@ function useDatePickerWheel({
|
|
|
15816
15766
|
minDate,
|
|
15817
15767
|
maxDate
|
|
15818
15768
|
}) {
|
|
15819
|
-
const years =
|
|
15820
|
-
const [draftDate, setDraftDate] =
|
|
15769
|
+
const years = React61.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15770
|
+
const [draftDate, setDraftDate] = React61.useState(
|
|
15821
15771
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15822
15772
|
);
|
|
15823
15773
|
const draftYear = draftDate.getFullYear();
|
|
15824
15774
|
const draftMonth = draftDate.getMonth();
|
|
15825
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15826
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15827
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15828
|
-
const monthListRef =
|
|
15829
|
-
const dayListRef =
|
|
15830
|
-
const yearListRef =
|
|
15831
|
-
const settleTimeoutsRef =
|
|
15832
|
-
const animationFramesRef =
|
|
15833
|
-
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(
|
|
15834
15784
|
() => ({
|
|
15835
15785
|
month: monthListRef,
|
|
15836
15786
|
day: dayListRef,
|
|
@@ -15838,7 +15788,7 @@ function useDatePickerWheel({
|
|
|
15838
15788
|
}),
|
|
15839
15789
|
[]
|
|
15840
15790
|
);
|
|
15841
|
-
const setColumnScrollTop =
|
|
15791
|
+
const setColumnScrollTop = React61.useCallback(
|
|
15842
15792
|
(column, nextScrollTop) => {
|
|
15843
15793
|
if (column === "month") {
|
|
15844
15794
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15852,19 +15802,19 @@ function useDatePickerWheel({
|
|
|
15852
15802
|
},
|
|
15853
15803
|
[]
|
|
15854
15804
|
);
|
|
15855
|
-
const clearSettleTimeout =
|
|
15805
|
+
const clearSettleTimeout = React61.useCallback((column) => {
|
|
15856
15806
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15857
15807
|
if (timeoutId === void 0) return;
|
|
15858
15808
|
window.clearTimeout(timeoutId);
|
|
15859
15809
|
delete settleTimeoutsRef.current[column];
|
|
15860
15810
|
}, []);
|
|
15861
|
-
const clearAnimationFrame =
|
|
15811
|
+
const clearAnimationFrame = React61.useCallback((column) => {
|
|
15862
15812
|
const frameId = animationFramesRef.current[column];
|
|
15863
15813
|
if (frameId === void 0) return;
|
|
15864
15814
|
window.cancelAnimationFrame(frameId);
|
|
15865
15815
|
delete animationFramesRef.current[column];
|
|
15866
15816
|
}, []);
|
|
15867
|
-
|
|
15817
|
+
React61.useEffect(
|
|
15868
15818
|
() => () => {
|
|
15869
15819
|
["month", "day", "year"].forEach((column) => {
|
|
15870
15820
|
clearSettleTimeout(column);
|
|
@@ -15873,22 +15823,22 @@ function useDatePickerWheel({
|
|
|
15873
15823
|
},
|
|
15874
15824
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15875
15825
|
);
|
|
15876
|
-
|
|
15826
|
+
React61.useEffect(() => {
|
|
15877
15827
|
if (isOpen) return;
|
|
15878
15828
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15879
15829
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15880
|
-
const months =
|
|
15830
|
+
const months = React61.useMemo(
|
|
15881
15831
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15882
15832
|
[draftYear, maxDate, minDate]
|
|
15883
15833
|
);
|
|
15884
|
-
const days =
|
|
15834
|
+
const days = React61.useMemo(
|
|
15885
15835
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15886
15836
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15887
15837
|
);
|
|
15888
15838
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15889
15839
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15890
15840
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15891
|
-
const syncScrollPositions =
|
|
15841
|
+
const syncScrollPositions = React61.useCallback(
|
|
15892
15842
|
(nextDate, behavior = "auto") => {
|
|
15893
15843
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15894
15844
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15912,7 +15862,7 @@ function useDatePickerWheel({
|
|
|
15912
15862
|
},
|
|
15913
15863
|
[maxDate, minDate, years]
|
|
15914
15864
|
);
|
|
15915
|
-
|
|
15865
|
+
React61.useLayoutEffect(() => {
|
|
15916
15866
|
if (!isOpen) return;
|
|
15917
15867
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15918
15868
|
setDraftDate(nextDate);
|
|
@@ -15923,7 +15873,7 @@ function useDatePickerWheel({
|
|
|
15923
15873
|
window.cancelAnimationFrame(frameId);
|
|
15924
15874
|
};
|
|
15925
15875
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15926
|
-
const updateDraftDate =
|
|
15876
|
+
const updateDraftDate = React61.useCallback(
|
|
15927
15877
|
(column, targetIndex, behavior = "smooth") => {
|
|
15928
15878
|
const currentDate = stripTime(draftDate);
|
|
15929
15879
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15968,7 +15918,7 @@ function useDatePickerWheel({
|
|
|
15968
15918
|
},
|
|
15969
15919
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15970
15920
|
);
|
|
15971
|
-
const settleColumnScroll =
|
|
15921
|
+
const settleColumnScroll = React61.useCallback(
|
|
15972
15922
|
(column) => {
|
|
15973
15923
|
const list = columnRefs[column].current;
|
|
15974
15924
|
if (!list) return;
|
|
@@ -15981,7 +15931,7 @@ function useDatePickerWheel({
|
|
|
15981
15931
|
},
|
|
15982
15932
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15983
15933
|
);
|
|
15984
|
-
const scheduleScrollSettle =
|
|
15934
|
+
const scheduleScrollSettle = React61.useCallback(
|
|
15985
15935
|
(column) => {
|
|
15986
15936
|
clearSettleTimeout(column);
|
|
15987
15937
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15990,7 +15940,7 @@ function useDatePickerWheel({
|
|
|
15990
15940
|
},
|
|
15991
15941
|
[clearSettleTimeout, settleColumnScroll]
|
|
15992
15942
|
);
|
|
15993
|
-
const handleColumnScroll =
|
|
15943
|
+
const handleColumnScroll = React61.useCallback(
|
|
15994
15944
|
(column) => {
|
|
15995
15945
|
const list = columnRefs[column].current;
|
|
15996
15946
|
if (!list) return;
|
|
@@ -16004,13 +15954,13 @@ function useDatePickerWheel({
|
|
|
16004
15954
|
},
|
|
16005
15955
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
16006
15956
|
);
|
|
16007
|
-
const handleOptionSelect =
|
|
15957
|
+
const handleOptionSelect = React61.useCallback(
|
|
16008
15958
|
(column, targetIndex) => {
|
|
16009
15959
|
updateDraftDate(column, targetIndex, "smooth");
|
|
16010
15960
|
},
|
|
16011
15961
|
[updateDraftDate]
|
|
16012
15962
|
);
|
|
16013
|
-
const focusAdjacentColumn =
|
|
15963
|
+
const focusAdjacentColumn = React61.useCallback(
|
|
16014
15964
|
(column, direction) => {
|
|
16015
15965
|
const order = ["month", "day", "year"];
|
|
16016
15966
|
const currentIndex = order.indexOf(column);
|
|
@@ -16020,7 +15970,7 @@ function useDatePickerWheel({
|
|
|
16020
15970
|
},
|
|
16021
15971
|
[columnRefs]
|
|
16022
15972
|
);
|
|
16023
|
-
const handleColumnKeyDown =
|
|
15973
|
+
const handleColumnKeyDown = React61.useCallback(
|
|
16024
15974
|
(column, event) => {
|
|
16025
15975
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
16026
15976
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -16086,7 +16036,7 @@ function useDatePickerWheel({
|
|
|
16086
16036
|
}
|
|
16087
16037
|
|
|
16088
16038
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
16089
|
-
var
|
|
16039
|
+
var import_jsx_runtime171 = require("react/jsx-runtime");
|
|
16090
16040
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
16091
16041
|
function AirbnbDatePickerWheelColumn({
|
|
16092
16042
|
id,
|
|
@@ -16100,7 +16050,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16100
16050
|
onOptionSelect,
|
|
16101
16051
|
column
|
|
16102
16052
|
}) {
|
|
16103
|
-
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)(
|
|
16104
16054
|
"div",
|
|
16105
16055
|
{
|
|
16106
16056
|
id,
|
|
@@ -16117,14 +16067,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16117
16067
|
WebkitOverflowScrolling: "touch"
|
|
16118
16068
|
},
|
|
16119
16069
|
children: [
|
|
16120
|
-
/* @__PURE__ */ (0,
|
|
16070
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { style: { height: `${spacerHeight}px` } }),
|
|
16121
16071
|
items.map((item, index) => {
|
|
16122
16072
|
const { style } = getWheelOptionStyles(
|
|
16123
16073
|
index,
|
|
16124
16074
|
scrollTop,
|
|
16125
16075
|
DATE_PICKER_OPTION_HEIGHT
|
|
16126
16076
|
);
|
|
16127
|
-
return /* @__PURE__ */ (0,
|
|
16077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
16128
16078
|
"button",
|
|
16129
16079
|
{
|
|
16130
16080
|
id: `${id}-option-${index}`,
|
|
@@ -16140,14 +16090,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16140
16090
|
`${column}-${item}-${index}`
|
|
16141
16091
|
);
|
|
16142
16092
|
}),
|
|
16143
|
-
/* @__PURE__ */ (0,
|
|
16093
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { style: { height: `${spacerHeight}px` } })
|
|
16144
16094
|
]
|
|
16145
16095
|
}
|
|
16146
16096
|
) });
|
|
16147
16097
|
}
|
|
16148
16098
|
|
|
16149
16099
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
16150
|
-
var
|
|
16100
|
+
var import_jsx_runtime172 = require("react/jsx-runtime");
|
|
16151
16101
|
function AirbnbDatePickerBody({
|
|
16152
16102
|
baseId,
|
|
16153
16103
|
label,
|
|
@@ -16169,19 +16119,19 @@ function AirbnbDatePickerBody({
|
|
|
16169
16119
|
onOptionSelect,
|
|
16170
16120
|
onDone
|
|
16171
16121
|
}) {
|
|
16172
|
-
return /* @__PURE__ */ (0,
|
|
16173
|
-
/* @__PURE__ */ (0,
|
|
16174
|
-
/* @__PURE__ */ (0,
|
|
16175
|
-
/* @__PURE__ */ (0,
|
|
16176
|
-
/* @__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)(
|
|
16177
16127
|
"div",
|
|
16178
16128
|
{
|
|
16179
16129
|
"aria-hidden": true,
|
|
16180
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]"
|
|
16181
16131
|
}
|
|
16182
16132
|
),
|
|
16183
|
-
/* @__PURE__ */ (0,
|
|
16184
|
-
/* @__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)(
|
|
16185
16135
|
AirbnbDatePickerWheelColumn,
|
|
16186
16136
|
{
|
|
16187
16137
|
id: `${baseId}-month`,
|
|
@@ -16196,7 +16146,7 @@ function AirbnbDatePickerBody({
|
|
|
16196
16146
|
onOptionSelect
|
|
16197
16147
|
}
|
|
16198
16148
|
),
|
|
16199
|
-
/* @__PURE__ */ (0,
|
|
16149
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16200
16150
|
AirbnbDatePickerWheelColumn,
|
|
16201
16151
|
{
|
|
16202
16152
|
id: `${baseId}-day`,
|
|
@@ -16211,7 +16161,7 @@ function AirbnbDatePickerBody({
|
|
|
16211
16161
|
onOptionSelect
|
|
16212
16162
|
}
|
|
16213
16163
|
),
|
|
16214
|
-
/* @__PURE__ */ (0,
|
|
16164
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16215
16165
|
AirbnbDatePickerWheelColumn,
|
|
16216
16166
|
{
|
|
16217
16167
|
id: `${baseId}-year`,
|
|
@@ -16228,7 +16178,7 @@ function AirbnbDatePickerBody({
|
|
|
16228
16178
|
)
|
|
16229
16179
|
] })
|
|
16230
16180
|
] }),
|
|
16231
|
-
/* @__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 })
|
|
16232
16182
|
] });
|
|
16233
16183
|
}
|
|
16234
16184
|
function AirbnbDatePickerContent({
|
|
@@ -16256,7 +16206,7 @@ function AirbnbDatePickerContent({
|
|
|
16256
16206
|
onColumnKeyDown,
|
|
16257
16207
|
onOptionSelect
|
|
16258
16208
|
}) {
|
|
16259
|
-
const body = /* @__PURE__ */ (0,
|
|
16209
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16260
16210
|
AirbnbDatePickerBody,
|
|
16261
16211
|
{
|
|
16262
16212
|
baseId,
|
|
@@ -16281,27 +16231,27 @@ function AirbnbDatePickerContent({
|
|
|
16281
16231
|
}
|
|
16282
16232
|
);
|
|
16283
16233
|
if (isMobile3) {
|
|
16284
|
-
return /* @__PURE__ */ (0,
|
|
16234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16285
16235
|
DrawerContent,
|
|
16286
16236
|
{
|
|
16287
16237
|
onClose: () => onOpenChange(false),
|
|
16288
16238
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
16289
16239
|
children: [
|
|
16290
|
-
/* @__PURE__ */ (0,
|
|
16291
|
-
/* @__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 }),
|
|
16292
16242
|
body
|
|
16293
16243
|
]
|
|
16294
16244
|
}
|
|
16295
16245
|
) });
|
|
16296
16246
|
}
|
|
16297
|
-
return /* @__PURE__ */ (0,
|
|
16247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16298
16248
|
DialogContent,
|
|
16299
16249
|
{
|
|
16300
16250
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
16301
16251
|
showCloseButton: false,
|
|
16302
16252
|
children: [
|
|
16303
|
-
/* @__PURE__ */ (0,
|
|
16304
|
-
/* @__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 }),
|
|
16305
16255
|
body
|
|
16306
16256
|
]
|
|
16307
16257
|
}
|
|
@@ -16309,7 +16259,7 @@ function AirbnbDatePickerContent({
|
|
|
16309
16259
|
}
|
|
16310
16260
|
|
|
16311
16261
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
16312
|
-
var
|
|
16262
|
+
var import_jsx_runtime173 = require("react/jsx-runtime");
|
|
16313
16263
|
var MONTHS_IN_YEAR2 = 12;
|
|
16314
16264
|
function getMonthLabels2(locale) {
|
|
16315
16265
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -16342,7 +16292,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
16342
16292
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
16343
16293
|
return new Date(yearNum, monthIndex, dayNum);
|
|
16344
16294
|
}
|
|
16345
|
-
var Datepicker =
|
|
16295
|
+
var Datepicker = React62.forwardRef(
|
|
16346
16296
|
function Datepicker2({
|
|
16347
16297
|
label,
|
|
16348
16298
|
value,
|
|
@@ -16375,14 +16325,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16375
16325
|
maxDate,
|
|
16376
16326
|
formatValue
|
|
16377
16327
|
}, ref) {
|
|
16378
|
-
const containerRef =
|
|
16379
|
-
const dayInputRef =
|
|
16380
|
-
const monthInputRef =
|
|
16381
|
-
const monthListRef =
|
|
16382
|
-
const yearInputRef =
|
|
16383
|
-
const mobileTriggerRef =
|
|
16384
|
-
const wheelBaseId =
|
|
16385
|
-
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();
|
|
16386
16336
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
16387
16337
|
const dayId = `${baseId}-day`;
|
|
16388
16338
|
const monthId = `${baseId}-month`;
|
|
@@ -16391,38 +16341,38 @@ var Datepicker = React63.forwardRef(
|
|
|
16391
16341
|
const errorId = `${baseId}-error`;
|
|
16392
16342
|
const { t, i18n } = (0, import_react_i18next38.useTranslation)();
|
|
16393
16343
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
16394
|
-
const resolvedMonthLabels =
|
|
16344
|
+
const resolvedMonthLabels = React62.useMemo(
|
|
16395
16345
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
16396
16346
|
[resolvedLocale, monthLabels]
|
|
16397
16347
|
);
|
|
16398
16348
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
16399
16349
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
16400
16350
|
const isControlled = value !== void 0;
|
|
16401
|
-
const initialParts =
|
|
16351
|
+
const initialParts = React62.useMemo(
|
|
16402
16352
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
16403
16353
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16404
16354
|
[]
|
|
16405
16355
|
);
|
|
16406
|
-
const [day, setDay] =
|
|
16407
|
-
const [monthIndex, setMonthIndex] =
|
|
16356
|
+
const [day, setDay] = React62.useState(initialParts.day);
|
|
16357
|
+
const [monthIndex, setMonthIndex] = React62.useState(
|
|
16408
16358
|
initialParts.monthIndex
|
|
16409
16359
|
);
|
|
16410
|
-
const [year, setYear] =
|
|
16411
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
16412
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
16413
|
-
const [focusedField, setFocusedField] =
|
|
16414
|
-
const [monthInputValue, setMonthInputValue] =
|
|
16415
|
-
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);
|
|
16416
16366
|
const isMobile3 = useIsMobile();
|
|
16417
|
-
const emitChangeRef =
|
|
16367
|
+
const emitChangeRef = React62.useRef(() => {
|
|
16418
16368
|
});
|
|
16419
|
-
const dayStateRef =
|
|
16420
|
-
const yearStateRef =
|
|
16421
|
-
const monthIndexRef =
|
|
16369
|
+
const dayStateRef = React62.useRef(day);
|
|
16370
|
+
const yearStateRef = React62.useRef(year);
|
|
16371
|
+
const monthIndexRef = React62.useRef(monthIndex);
|
|
16422
16372
|
dayStateRef.current = day;
|
|
16423
16373
|
yearStateRef.current = year;
|
|
16424
16374
|
monthIndexRef.current = monthIndex;
|
|
16425
|
-
|
|
16375
|
+
React62.useImperativeHandle(
|
|
16426
16376
|
ref,
|
|
16427
16377
|
() => ({
|
|
16428
16378
|
getDayValue: () => dayStateRef.current,
|
|
@@ -16440,27 +16390,27 @@ var Datepicker = React63.forwardRef(
|
|
|
16440
16390
|
}),
|
|
16441
16391
|
[]
|
|
16442
16392
|
);
|
|
16443
|
-
|
|
16393
|
+
React62.useEffect(() => {
|
|
16444
16394
|
if (!isControlled) return;
|
|
16445
16395
|
const next = partsFromDate(value ?? null);
|
|
16446
16396
|
setDay(next.day);
|
|
16447
16397
|
setMonthIndex(next.monthIndex);
|
|
16448
16398
|
setYear(next.year);
|
|
16449
16399
|
}, [isControlled, value]);
|
|
16450
|
-
|
|
16400
|
+
React62.useEffect(() => {
|
|
16451
16401
|
if (focusedField === "month") return;
|
|
16452
16402
|
setMonthInputValue(
|
|
16453
16403
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16454
16404
|
);
|
|
16455
16405
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16456
|
-
const filteredMonths =
|
|
16406
|
+
const filteredMonths = React62.useMemo(() => {
|
|
16457
16407
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16458
16408
|
const query = monthInputValue.trim().toLowerCase();
|
|
16459
16409
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16460
16410
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16461
16411
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16462
16412
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16463
|
-
|
|
16413
|
+
React62.useEffect(() => {
|
|
16464
16414
|
if (!isMonthOpen) {
|
|
16465
16415
|
setMonthHighlightIndex(-1);
|
|
16466
16416
|
return;
|
|
@@ -16481,7 +16431,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16481
16431
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16482
16432
|
const isInvalid = Boolean(invalid || error);
|
|
16483
16433
|
const wrapperWidth = toCssSize(width);
|
|
16484
|
-
const currentDate =
|
|
16434
|
+
const currentDate = React62.useMemo(
|
|
16485
16435
|
() => dateFromParts(day, monthIndex, year),
|
|
16486
16436
|
[day, monthIndex, year]
|
|
16487
16437
|
);
|
|
@@ -16490,7 +16440,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16490
16440
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16491
16441
|
isDisabled: !isMonthOpen || isMobile3
|
|
16492
16442
|
});
|
|
16493
|
-
const emitChange =
|
|
16443
|
+
const emitChange = React62.useCallback(
|
|
16494
16444
|
(nextDay, nextMonth, nextYear) => {
|
|
16495
16445
|
if (!onChange) return;
|
|
16496
16446
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16526,7 +16476,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16526
16476
|
setIsMonthOpen(true);
|
|
16527
16477
|
setMonthHighlightIndex(0);
|
|
16528
16478
|
};
|
|
16529
|
-
const commitMonthInput =
|
|
16479
|
+
const commitMonthInput = React62.useCallback(() => {
|
|
16530
16480
|
const query = monthInputValue.trim().toLowerCase();
|
|
16531
16481
|
if (!query) {
|
|
16532
16482
|
if (monthIndex !== null) {
|
|
@@ -16586,15 +16536,15 @@ var Datepicker = React63.forwardRef(
|
|
|
16586
16536
|
setIsMonthOpen(false);
|
|
16587
16537
|
}
|
|
16588
16538
|
};
|
|
16589
|
-
const focusDayInput =
|
|
16539
|
+
const focusDayInput = React62.useCallback(() => {
|
|
16590
16540
|
if (isBlocked || readOnly) return;
|
|
16591
16541
|
dayInputRef.current?.focus();
|
|
16592
16542
|
}, [isBlocked, readOnly]);
|
|
16593
|
-
const openWheel =
|
|
16543
|
+
const openWheel = React62.useCallback(() => {
|
|
16594
16544
|
if (isBlocked || readOnly) return;
|
|
16595
16545
|
setIsWheelOpen(true);
|
|
16596
16546
|
}, [isBlocked, readOnly]);
|
|
16597
|
-
const closeWheel =
|
|
16547
|
+
const closeWheel = React62.useCallback(() => {
|
|
16598
16548
|
setIsWheelOpen(false);
|
|
16599
16549
|
mobileTriggerRef.current?.focus();
|
|
16600
16550
|
}, []);
|
|
@@ -16606,7 +16556,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16606
16556
|
minDate,
|
|
16607
16557
|
maxDate
|
|
16608
16558
|
});
|
|
16609
|
-
const handleWheelDone =
|
|
16559
|
+
const handleWheelDone = React62.useCallback(() => {
|
|
16610
16560
|
const next = wheel.draftDate;
|
|
16611
16561
|
setDay(String(next.getDate()));
|
|
16612
16562
|
setMonthIndex(next.getMonth());
|
|
@@ -16615,14 +16565,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16615
16565
|
setIsWheelOpen(false);
|
|
16616
16566
|
mobileTriggerRef.current?.focus();
|
|
16617
16567
|
}, [name, onChange, wheel.draftDate]);
|
|
16618
|
-
const defaultFormatValue =
|
|
16568
|
+
const defaultFormatValue = React62.useCallback(
|
|
16619
16569
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16620
16570
|
[resolvedMonthLabels]
|
|
16621
16571
|
);
|
|
16622
16572
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16623
16573
|
const monthListboxId = `${monthId}-listbox`;
|
|
16624
16574
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16625
|
-
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)(
|
|
16626
16576
|
"ul",
|
|
16627
16577
|
{
|
|
16628
16578
|
ref: monthListRef,
|
|
@@ -16633,7 +16583,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16633
16583
|
children: filteredMonths.map((option, position) => {
|
|
16634
16584
|
const isSelected = option.index === monthIndex;
|
|
16635
16585
|
const isHighlighted = position === monthHighlightIndex;
|
|
16636
|
-
return /* @__PURE__ */ (0,
|
|
16586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16637
16587
|
"button",
|
|
16638
16588
|
{
|
|
16639
16589
|
id: getMonthOptionId(option.index),
|
|
@@ -16660,7 +16610,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16660
16610
|
isBlocked && "cursor-not-allowed",
|
|
16661
16611
|
loading && "cursor-progress"
|
|
16662
16612
|
);
|
|
16663
|
-
return /* @__PURE__ */ (0,
|
|
16613
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16664
16614
|
"div",
|
|
16665
16615
|
{
|
|
16666
16616
|
ref: containerRef,
|
|
@@ -16671,9 +16621,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16671
16621
|
className
|
|
16672
16622
|
),
|
|
16673
16623
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16674
|
-
children: /* @__PURE__ */ (0,
|
|
16675
|
-
/* @__PURE__ */ (0,
|
|
16676
|
-
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)(
|
|
16677
16627
|
"button",
|
|
16678
16628
|
{
|
|
16679
16629
|
ref: mobileTriggerRef,
|
|
@@ -16693,9 +16643,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16693
16643
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16694
16644
|
),
|
|
16695
16645
|
children: [
|
|
16696
|
-
/* @__PURE__ */ (0,
|
|
16697
|
-
/* @__PURE__ */ (0,
|
|
16698
|
-
|
|
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,
|
|
16699
16649
|
{
|
|
16700
16650
|
size: 16,
|
|
16701
16651
|
className: cn(
|
|
@@ -16706,14 +16656,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16706
16656
|
) })
|
|
16707
16657
|
]
|
|
16708
16658
|
}
|
|
16709
|
-
) : /* @__PURE__ */ (0,
|
|
16659
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
16710
16660
|
"div",
|
|
16711
16661
|
{
|
|
16712
16662
|
className: cn(
|
|
16713
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)]"
|
|
16714
16664
|
),
|
|
16715
16665
|
children: [
|
|
16716
|
-
/* @__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)(
|
|
16717
16667
|
"input",
|
|
16718
16668
|
{
|
|
16719
16669
|
ref: dayInputRef,
|
|
@@ -16742,8 +16692,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16742
16692
|
className: subInputClass
|
|
16743
16693
|
}
|
|
16744
16694
|
) }),
|
|
16745
|
-
/* @__PURE__ */ (0,
|
|
16746
|
-
/* @__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)(
|
|
16747
16697
|
"input",
|
|
16748
16698
|
{
|
|
16749
16699
|
ref: monthInputRef,
|
|
@@ -16789,8 +16739,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16789
16739
|
)
|
|
16790
16740
|
}
|
|
16791
16741
|
),
|
|
16792
|
-
/* @__PURE__ */ (0,
|
|
16793
|
-
|
|
16742
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16743
|
+
import_lucide_react50.ChevronDown,
|
|
16794
16744
|
{
|
|
16795
16745
|
size: 14,
|
|
16796
16746
|
onMouseDown: (event) => {
|
|
@@ -16806,7 +16756,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16806
16756
|
}
|
|
16807
16757
|
)
|
|
16808
16758
|
] }),
|
|
16809
|
-
/* @__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)(
|
|
16810
16760
|
"input",
|
|
16811
16761
|
{
|
|
16812
16762
|
ref: yearInputRef,
|
|
@@ -16838,7 +16788,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16838
16788
|
]
|
|
16839
16789
|
}
|
|
16840
16790
|
),
|
|
16841
|
-
showCoverage && /* @__PURE__ */ (0,
|
|
16791
|
+
showCoverage && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16842
16792
|
"div",
|
|
16843
16793
|
{
|
|
16844
16794
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16846,7 +16796,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16846
16796
|
"aria-hidden": "true"
|
|
16847
16797
|
}
|
|
16848
16798
|
),
|
|
16849
|
-
/* @__PURE__ */ (0,
|
|
16799
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16850
16800
|
Fieldset,
|
|
16851
16801
|
{
|
|
16852
16802
|
isFocused,
|
|
@@ -16864,9 +16814,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16864
16814
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16865
16815
|
}
|
|
16866
16816
|
),
|
|
16867
|
-
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 })
|
|
16868
16818
|
] }),
|
|
16869
|
-
isMobile3 && /* @__PURE__ */ (0,
|
|
16819
|
+
isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16870
16820
|
AirbnbDatePickerContent,
|
|
16871
16821
|
{
|
|
16872
16822
|
baseId: wheelBaseId,
|
|
@@ -16894,9 +16844,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16894
16844
|
onOptionSelect: wheel.handleOptionSelect
|
|
16895
16845
|
}
|
|
16896
16846
|
),
|
|
16897
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
16898
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
16899
|
-
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)(
|
|
16900
16850
|
FieldErrorMessage,
|
|
16901
16851
|
{
|
|
16902
16852
|
id: errorId,
|
|
@@ -16911,7 +16861,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16911
16861
|
);
|
|
16912
16862
|
|
|
16913
16863
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16914
|
-
var
|
|
16864
|
+
var React66 = __toESM(require("react"), 1);
|
|
16915
16865
|
var import_react_i18next39 = require("react-i18next");
|
|
16916
16866
|
|
|
16917
16867
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16990,7 +16940,7 @@ var createDisabledMatchers = ({
|
|
|
16990
16940
|
};
|
|
16991
16941
|
|
|
16992
16942
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16993
|
-
var
|
|
16943
|
+
var React63 = __toESM(require("react"), 1);
|
|
16994
16944
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16995
16945
|
function useRangeValue({
|
|
16996
16946
|
value: externalValue,
|
|
@@ -16999,10 +16949,10 @@ function useRangeValue({
|
|
|
16999
16949
|
name
|
|
17000
16950
|
}) {
|
|
17001
16951
|
const isControlled = externalValue !== void 0;
|
|
17002
|
-
const [draft, setDraft] =
|
|
16952
|
+
const [draft, setDraft] = React63.useState(
|
|
17003
16953
|
isControlled ? externalValue : defaultValue
|
|
17004
16954
|
);
|
|
17005
|
-
const lastExternalKeyRef =
|
|
16955
|
+
const lastExternalKeyRef = React63.useRef(getRangeKey(externalValue));
|
|
17006
16956
|
if (isControlled) {
|
|
17007
16957
|
const externalKey = getRangeKey(externalValue);
|
|
17008
16958
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -17010,7 +16960,7 @@ function useRangeValue({
|
|
|
17010
16960
|
setDraft(externalValue);
|
|
17011
16961
|
}
|
|
17012
16962
|
}
|
|
17013
|
-
const commit =
|
|
16963
|
+
const commit = React63.useCallback(
|
|
17014
16964
|
(next) => {
|
|
17015
16965
|
setDraft(next);
|
|
17016
16966
|
if (next === void 0) {
|
|
@@ -17025,7 +16975,7 @@ function useRangeValue({
|
|
|
17025
16975
|
}
|
|
17026
16976
|
|
|
17027
16977
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
17028
|
-
var
|
|
16978
|
+
var React64 = __toESM(require("react"), 1);
|
|
17029
16979
|
|
|
17030
16980
|
// src/dashboard/date-range-picker/utils/inputFormat.ts
|
|
17031
16981
|
function parseDateInputFormat(format2) {
|
|
@@ -17115,18 +17065,18 @@ function useRangeTextInputs({
|
|
|
17115
17065
|
onFromComplete,
|
|
17116
17066
|
onToComplete
|
|
17117
17067
|
}) {
|
|
17118
|
-
const tokens =
|
|
17068
|
+
const tokens = React64.useMemo(
|
|
17119
17069
|
() => parseDateInputFormat(displayFormat),
|
|
17120
17070
|
[displayFormat]
|
|
17121
17071
|
);
|
|
17122
|
-
const maxDigits =
|
|
17123
|
-
const [fromText, setFromText] =
|
|
17124
|
-
const [toText, setToText] =
|
|
17125
|
-
|
|
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(() => {
|
|
17126
17076
|
setFromText(value?.from ? format2(value.from) : "");
|
|
17127
17077
|
setToText(value?.to ? format2(value.to) : "");
|
|
17128
17078
|
}, [format2, value?.from, value?.to]);
|
|
17129
|
-
const handleFromChange =
|
|
17079
|
+
const handleFromChange = React64.useCallback(
|
|
17130
17080
|
(raw) => {
|
|
17131
17081
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
17132
17082
|
const wasComplete = countDigits(fromText) === maxDigits;
|
|
@@ -17138,7 +17088,7 @@ function useRangeTextInputs({
|
|
|
17138
17088
|
},
|
|
17139
17089
|
[fromText, maxDigits, onFromComplete, parse3, tokens]
|
|
17140
17090
|
);
|
|
17141
|
-
const handleToChange =
|
|
17091
|
+
const handleToChange = React64.useCallback(
|
|
17142
17092
|
(raw) => {
|
|
17143
17093
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
17144
17094
|
const wasComplete = countDigits(toText) === maxDigits;
|
|
@@ -17150,7 +17100,7 @@ function useRangeTextInputs({
|
|
|
17150
17100
|
},
|
|
17151
17101
|
[maxDigits, onToComplete, parse3, toText, tokens]
|
|
17152
17102
|
);
|
|
17153
|
-
const handleFromBlur =
|
|
17103
|
+
const handleFromBlur = React64.useCallback(() => {
|
|
17154
17104
|
if (!fromText) {
|
|
17155
17105
|
const next = { from: void 0, to: value?.to };
|
|
17156
17106
|
onCommit(next);
|
|
@@ -17167,7 +17117,7 @@ function useRangeTextInputs({
|
|
|
17167
17117
|
setFromText(value?.from ? format2(value.from) : "");
|
|
17168
17118
|
return void 0;
|
|
17169
17119
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
17170
|
-
const handleToBlur =
|
|
17120
|
+
const handleToBlur = React64.useCallback(() => {
|
|
17171
17121
|
if (!toText) {
|
|
17172
17122
|
const next = { from: value?.from, to: void 0 };
|
|
17173
17123
|
onCommit(next);
|
|
@@ -17196,21 +17146,21 @@ function useRangeTextInputs({
|
|
|
17196
17146
|
}
|
|
17197
17147
|
|
|
17198
17148
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
17199
|
-
var
|
|
17149
|
+
var React65 = __toESM(require("react"), 1);
|
|
17200
17150
|
function useRangeMonthSync(value) {
|
|
17201
|
-
const isPreloadedRef =
|
|
17202
|
-
const [month, setMonth] =
|
|
17203
|
-
|
|
17151
|
+
const isPreloadedRef = React65.useRef(false);
|
|
17152
|
+
const [month, setMonth] = React65.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
17153
|
+
React65.useEffect(() => {
|
|
17204
17154
|
if (value?.from && !isPreloadedRef.current) {
|
|
17205
17155
|
setMonth(value.from);
|
|
17206
17156
|
isPreloadedRef.current = true;
|
|
17207
17157
|
}
|
|
17208
17158
|
}, [value?.from]);
|
|
17209
|
-
const syncMonthToValue =
|
|
17159
|
+
const syncMonthToValue = React65.useCallback((next) => {
|
|
17210
17160
|
isPreloadedRef.current = true;
|
|
17211
17161
|
if (next?.from) setMonth(next.from);
|
|
17212
17162
|
}, []);
|
|
17213
|
-
const resetPreload =
|
|
17163
|
+
const resetPreload = React65.useCallback(() => {
|
|
17214
17164
|
isPreloadedRef.current = false;
|
|
17215
17165
|
}, []);
|
|
17216
17166
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -17235,8 +17185,8 @@ function resolveRangeSelection({
|
|
|
17235
17185
|
}
|
|
17236
17186
|
|
|
17237
17187
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
17238
|
-
var
|
|
17239
|
-
var
|
|
17188
|
+
var import_lucide_react51 = require("lucide-react");
|
|
17189
|
+
var import_jsx_runtime174 = require("react/jsx-runtime");
|
|
17240
17190
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
17241
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)]";
|
|
17242
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";
|
|
@@ -17278,7 +17228,7 @@ function DateRangeInputs({
|
|
|
17278
17228
|
isBlocked && "cursor-not-allowed",
|
|
17279
17229
|
loading && "cursor-progress"
|
|
17280
17230
|
);
|
|
17281
|
-
return /* @__PURE__ */ (0,
|
|
17231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
|
|
17282
17232
|
"div",
|
|
17283
17233
|
{
|
|
17284
17234
|
className: cn(
|
|
@@ -17287,7 +17237,7 @@ function DateRangeInputs({
|
|
|
17287
17237
|
),
|
|
17288
17238
|
onClick: onRowClick,
|
|
17289
17239
|
children: [
|
|
17290
|
-
/* @__PURE__ */ (0,
|
|
17240
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17291
17241
|
"input",
|
|
17292
17242
|
{
|
|
17293
17243
|
ref: fromInputRef,
|
|
@@ -17312,7 +17262,7 @@ function DateRangeInputs({
|
|
|
17312
17262
|
)
|
|
17313
17263
|
}
|
|
17314
17264
|
),
|
|
17315
|
-
/* @__PURE__ */ (0,
|
|
17265
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17316
17266
|
"span",
|
|
17317
17267
|
{
|
|
17318
17268
|
"aria-hidden": "true",
|
|
@@ -17323,7 +17273,7 @@ function DateRangeInputs({
|
|
|
17323
17273
|
children: "\u2192"
|
|
17324
17274
|
}
|
|
17325
17275
|
),
|
|
17326
|
-
/* @__PURE__ */ (0,
|
|
17276
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17327
17277
|
"input",
|
|
17328
17278
|
{
|
|
17329
17279
|
ref: toInputRef,
|
|
@@ -17348,8 +17298,8 @@ function DateRangeInputs({
|
|
|
17348
17298
|
)
|
|
17349
17299
|
}
|
|
17350
17300
|
),
|
|
17351
|
-
/* @__PURE__ */ (0,
|
|
17352
|
-
!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)(
|
|
17353
17303
|
"button",
|
|
17354
17304
|
{
|
|
17355
17305
|
type: "button",
|
|
@@ -17357,10 +17307,10 @@ function DateRangeInputs({
|
|
|
17357
17307
|
onClick: onReset,
|
|
17358
17308
|
className: iconButtonClass,
|
|
17359
17309
|
"aria-label": clearLabel,
|
|
17360
|
-
children: /* @__PURE__ */ (0,
|
|
17310
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react51.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17361
17311
|
}
|
|
17362
17312
|
),
|
|
17363
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0,
|
|
17313
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17364
17314
|
"button",
|
|
17365
17315
|
{
|
|
17366
17316
|
type: "button",
|
|
@@ -17372,7 +17322,7 @@ function DateRangeInputs({
|
|
|
17372
17322
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
17373
17323
|
),
|
|
17374
17324
|
"aria-label": openCalendarLabel,
|
|
17375
|
-
children: /* @__PURE__ */ (0,
|
|
17325
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react51.CalendarDays, { size: 18 })
|
|
17376
17326
|
}
|
|
17377
17327
|
)
|
|
17378
17328
|
] })
|
|
@@ -17382,7 +17332,7 @@ function DateRangeInputs({
|
|
|
17382
17332
|
}
|
|
17383
17333
|
|
|
17384
17334
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
17385
|
-
var
|
|
17335
|
+
var import_jsx_runtime175 = require("react/jsx-runtime");
|
|
17386
17336
|
function DateRangeCalendar({
|
|
17387
17337
|
value,
|
|
17388
17338
|
month,
|
|
@@ -17398,7 +17348,7 @@ function DateRangeCalendar({
|
|
|
17398
17348
|
components,
|
|
17399
17349
|
...dayPickerProps
|
|
17400
17350
|
}) {
|
|
17401
|
-
return /* @__PURE__ */ (0,
|
|
17351
|
+
return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17402
17352
|
Calendar,
|
|
17403
17353
|
{
|
|
17404
17354
|
mode: "range",
|
|
@@ -17421,7 +17371,7 @@ function DateRangeCalendar({
|
|
|
17421
17371
|
}
|
|
17422
17372
|
|
|
17423
17373
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
17424
|
-
var
|
|
17374
|
+
var import_jsx_runtime176 = require("react/jsx-runtime");
|
|
17425
17375
|
function DateRangePopover({
|
|
17426
17376
|
isOpen,
|
|
17427
17377
|
isMobile: isMobile3,
|
|
@@ -17433,30 +17383,30 @@ function DateRangePopover({
|
|
|
17433
17383
|
}) {
|
|
17434
17384
|
if (!isOpen) return null;
|
|
17435
17385
|
if (isMobile3) {
|
|
17436
|
-
return /* @__PURE__ */ (0,
|
|
17386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17437
17387
|
Drawer,
|
|
17438
17388
|
{
|
|
17439
17389
|
open: isOpen,
|
|
17440
17390
|
onOpenChange: (next) => {
|
|
17441
17391
|
if (!next) onClose();
|
|
17442
17392
|
},
|
|
17443
|
-
children: /* @__PURE__ */ (0,
|
|
17393
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(
|
|
17444
17394
|
DrawerContent,
|
|
17445
17395
|
{
|
|
17446
17396
|
onClose,
|
|
17447
17397
|
lockScroll: false,
|
|
17448
17398
|
className: "max-h-[calc(100vh-1rem)]",
|
|
17449
17399
|
children: [
|
|
17450
|
-
/* @__PURE__ */ (0,
|
|
17451
|
-
/* @__PURE__ */ (0,
|
|
17452
|
-
/* @__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 })
|
|
17453
17403
|
]
|
|
17454
17404
|
}
|
|
17455
17405
|
)
|
|
17456
17406
|
}
|
|
17457
17407
|
);
|
|
17458
17408
|
}
|
|
17459
|
-
return /* @__PURE__ */ (0,
|
|
17409
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17460
17410
|
"div",
|
|
17461
17411
|
{
|
|
17462
17412
|
className: cn(
|
|
@@ -17469,8 +17419,8 @@ function DateRangePopover({
|
|
|
17469
17419
|
}
|
|
17470
17420
|
|
|
17471
17421
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17472
|
-
var
|
|
17473
|
-
var DateRangePicker =
|
|
17422
|
+
var import_jsx_runtime177 = require("react/jsx-runtime");
|
|
17423
|
+
var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
17474
17424
|
label,
|
|
17475
17425
|
value: externalValue,
|
|
17476
17426
|
defaultValue,
|
|
@@ -17505,20 +17455,20 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17505
17455
|
components: customComponents,
|
|
17506
17456
|
...dayPickerProps
|
|
17507
17457
|
}, ref) {
|
|
17508
|
-
const containerRef =
|
|
17509
|
-
const fromInputRef =
|
|
17510
|
-
const toInputRef =
|
|
17511
|
-
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();
|
|
17512
17462
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17513
17463
|
const fromId = `${baseId}-from`;
|
|
17514
17464
|
const toId = `${baseId}-to`;
|
|
17515
17465
|
const labelId = `${baseId}-label`;
|
|
17516
17466
|
const errorId = `${baseId}-error`;
|
|
17517
|
-
const normalizedValue =
|
|
17467
|
+
const normalizedValue = React66.useMemo(() => {
|
|
17518
17468
|
if (externalValue === void 0) return void 0;
|
|
17519
17469
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17520
17470
|
}, [externalValue]);
|
|
17521
|
-
const normalizedDefaultValue =
|
|
17471
|
+
const normalizedDefaultValue = React66.useMemo(() => {
|
|
17522
17472
|
if (defaultValue === void 0) return void 0;
|
|
17523
17473
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17524
17474
|
}, [defaultValue]);
|
|
@@ -17528,16 +17478,16 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17528
17478
|
onChange,
|
|
17529
17479
|
name
|
|
17530
17480
|
});
|
|
17531
|
-
const normalizedMinDate =
|
|
17532
|
-
const normalizedMaxDate =
|
|
17533
|
-
const formatter =
|
|
17534
|
-
const parser =
|
|
17535
|
-
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(() => {
|
|
17536
17486
|
});
|
|
17537
|
-
const handleFromComplete =
|
|
17487
|
+
const handleFromComplete = React66.useCallback(() => {
|
|
17538
17488
|
toInputRef.current?.focus();
|
|
17539
17489
|
}, []);
|
|
17540
|
-
const handleToComplete =
|
|
17490
|
+
const handleToComplete = React66.useCallback(() => {
|
|
17541
17491
|
toInputRef.current?.blur();
|
|
17542
17492
|
closeCalendarRef.current();
|
|
17543
17493
|
}, []);
|
|
@@ -17561,9 +17511,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17561
17511
|
onToComplete: handleToComplete
|
|
17562
17512
|
});
|
|
17563
17513
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17564
|
-
const [isOpen, setIsOpen] =
|
|
17565
|
-
const [focusedInput, setFocusedInput] =
|
|
17566
|
-
const [autoFocus, setAutoFocus] =
|
|
17514
|
+
const [isOpen, setIsOpen] = React66.useState(false);
|
|
17515
|
+
const [focusedInput, setFocusedInput] = React66.useState(null);
|
|
17516
|
+
const [autoFocus, setAutoFocus] = React66.useState(false);
|
|
17567
17517
|
const isMobile3 = useIsMobile();
|
|
17568
17518
|
const { t } = (0, import_react_i18next39.useTranslation)();
|
|
17569
17519
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17574,14 +17524,14 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17574
17524
|
const isFocused = focusedInput !== null || isOpen;
|
|
17575
17525
|
const wrapperWidth = toCssSize(width);
|
|
17576
17526
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17577
|
-
const closeCalendar =
|
|
17527
|
+
const closeCalendar = React66.useCallback(() => {
|
|
17578
17528
|
setIsOpen(false);
|
|
17579
17529
|
setFocusedInput(null);
|
|
17580
17530
|
setAutoFocus(false);
|
|
17581
17531
|
if (value?.from) setMonth(value.from);
|
|
17582
17532
|
}, [setMonth, value?.from]);
|
|
17583
17533
|
closeCalendarRef.current = closeCalendar;
|
|
17584
|
-
const openCalendar =
|
|
17534
|
+
const openCalendar = React66.useCallback(() => {
|
|
17585
17535
|
if (isBlocked || readOnly) return;
|
|
17586
17536
|
setIsOpen(true);
|
|
17587
17537
|
}, [isBlocked, readOnly]);
|
|
@@ -17590,7 +17540,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17590
17540
|
onOutsideClick: closeCalendar,
|
|
17591
17541
|
isDisabled: !isOpen || isMobile3
|
|
17592
17542
|
});
|
|
17593
|
-
const handlePickerChange =
|
|
17543
|
+
const handlePickerChange = React66.useCallback(
|
|
17594
17544
|
(range, pickedDate) => {
|
|
17595
17545
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17596
17546
|
previous: value,
|
|
@@ -17611,7 +17561,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17611
17561
|
setToText("");
|
|
17612
17562
|
setMonth(/* @__PURE__ */ new Date());
|
|
17613
17563
|
};
|
|
17614
|
-
const disabledMatchers =
|
|
17564
|
+
const disabledMatchers = React66.useMemo(
|
|
17615
17565
|
() => createDisabledMatchers({
|
|
17616
17566
|
minDate: normalizedMinDate,
|
|
17617
17567
|
maxDate: normalizedMaxDate,
|
|
@@ -17630,7 +17580,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17630
17580
|
openCalendar();
|
|
17631
17581
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17632
17582
|
};
|
|
17633
|
-
|
|
17583
|
+
React66.useImperativeHandle(
|
|
17634
17584
|
ref,
|
|
17635
17585
|
() => ({
|
|
17636
17586
|
setDateRange: (range) => {
|
|
@@ -17653,7 +17603,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17653
17603
|
syncMonthToValue
|
|
17654
17604
|
]
|
|
17655
17605
|
);
|
|
17656
|
-
return /* @__PURE__ */ (0,
|
|
17606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17657
17607
|
"div",
|
|
17658
17608
|
{
|
|
17659
17609
|
ref: containerRef,
|
|
@@ -17664,9 +17614,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17664
17614
|
className
|
|
17665
17615
|
),
|
|
17666
17616
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17667
|
-
children: /* @__PURE__ */ (0,
|
|
17668
|
-
/* @__PURE__ */ (0,
|
|
17669
|
-
/* @__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)(
|
|
17670
17620
|
DateRangeInputs,
|
|
17671
17621
|
{
|
|
17672
17622
|
fromId,
|
|
@@ -17719,7 +17669,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17719
17669
|
onToggleCalendar: toggleCalendar
|
|
17720
17670
|
}
|
|
17721
17671
|
),
|
|
17722
|
-
/* @__PURE__ */ (0,
|
|
17672
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17723
17673
|
Fieldset,
|
|
17724
17674
|
{
|
|
17725
17675
|
isFocused,
|
|
@@ -17736,7 +17686,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17736
17686
|
tooltip
|
|
17737
17687
|
}
|
|
17738
17688
|
),
|
|
17739
|
-
/* @__PURE__ */ (0,
|
|
17689
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17740
17690
|
DateRangePopover,
|
|
17741
17691
|
{
|
|
17742
17692
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17745,7 +17695,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17745
17695
|
drawerTitle,
|
|
17746
17696
|
drawerDescription,
|
|
17747
17697
|
onClose: closeCalendar,
|
|
17748
|
-
children: /* @__PURE__ */ (0,
|
|
17698
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17749
17699
|
DateRangeCalendar,
|
|
17750
17700
|
{
|
|
17751
17701
|
value,
|
|
@@ -17766,7 +17716,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17766
17716
|
}
|
|
17767
17717
|
)
|
|
17768
17718
|
] }),
|
|
17769
|
-
/* @__PURE__ */ (0,
|
|
17719
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17770
17720
|
DateRangePopover,
|
|
17771
17721
|
{
|
|
17772
17722
|
isOpen: isOpen && isMobile3,
|
|
@@ -17775,7 +17725,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17775
17725
|
drawerTitle,
|
|
17776
17726
|
drawerDescription,
|
|
17777
17727
|
onClose: closeCalendar,
|
|
17778
|
-
children: /* @__PURE__ */ (0,
|
|
17728
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17779
17729
|
DateRangeCalendar,
|
|
17780
17730
|
{
|
|
17781
17731
|
value,
|
|
@@ -17795,9 +17745,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17795
17745
|
)
|
|
17796
17746
|
}
|
|
17797
17747
|
),
|
|
17798
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
17799
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
17800
|
-
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)(
|
|
17801
17751
|
FieldErrorMessage,
|
|
17802
17752
|
{
|
|
17803
17753
|
id: errorId,
|
|
@@ -17811,7 +17761,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17811
17761
|
});
|
|
17812
17762
|
|
|
17813
17763
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17814
|
-
var
|
|
17764
|
+
var React67 = __toESM(require("react"), 1);
|
|
17815
17765
|
var import_react_i18next40 = require("react-i18next");
|
|
17816
17766
|
var import_date_fns4 = require("date-fns");
|
|
17817
17767
|
var import_react_day_picker2 = require("react-day-picker");
|
|
@@ -17834,11 +17784,11 @@ function useValidateDates({
|
|
|
17834
17784
|
const { t } = (0, import_react_i18next40.useTranslation)();
|
|
17835
17785
|
const handleError = useEvent(onError);
|
|
17836
17786
|
const handleSuccess = useEvent(onSuccess);
|
|
17837
|
-
const errorFormatter =
|
|
17787
|
+
const errorFormatter = React67.useMemo(
|
|
17838
17788
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17839
17789
|
[displayFormat]
|
|
17840
17790
|
);
|
|
17841
|
-
const validateDates =
|
|
17791
|
+
const validateDates = React67.useCallback(
|
|
17842
17792
|
(dates) => {
|
|
17843
17793
|
const startDate = dates?.from;
|
|
17844
17794
|
const endDate = dates?.to;
|
|
@@ -17888,9 +17838,9 @@ function useValidateDates({
|
|
|
17888
17838
|
}
|
|
17889
17839
|
|
|
17890
17840
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17891
|
-
var
|
|
17841
|
+
var React68 = __toESM(require("react"), 1);
|
|
17892
17842
|
var import_date_fns5 = require("date-fns");
|
|
17893
|
-
var
|
|
17843
|
+
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
17894
17844
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17895
17845
|
function parseTime(value) {
|
|
17896
17846
|
return (0, import_date_fns5.parse)(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17932,24 +17882,24 @@ var FORMAT_SETTINGS = {
|
|
|
17932
17882
|
},
|
|
17933
17883
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17934
17884
|
};
|
|
17935
|
-
var TimePicker =
|
|
17936
|
-
const resolvedOptions =
|
|
17885
|
+
var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17886
|
+
const resolvedOptions = React68.useMemo(() => {
|
|
17937
17887
|
if (options) return options;
|
|
17938
17888
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17939
17889
|
return buildOptions(settings);
|
|
17940
17890
|
}, [formatName, options, timeSettings]);
|
|
17941
|
-
return /* @__PURE__ */ (0,
|
|
17891
|
+
return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17942
17892
|
});
|
|
17943
17893
|
|
|
17944
17894
|
// src/dashboard/file-input/FileInput.tsx
|
|
17945
|
-
var
|
|
17946
|
-
var
|
|
17895
|
+
var React69 = __toESM(require("react"), 1);
|
|
17896
|
+
var import_lucide_react52 = require("lucide-react");
|
|
17947
17897
|
var import_react_i18next41 = require("react-i18next");
|
|
17948
|
-
var
|
|
17898
|
+
var import_jsx_runtime179 = require("react/jsx-runtime");
|
|
17949
17899
|
function defaultDownload(url) {
|
|
17950
17900
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17951
17901
|
}
|
|
17952
|
-
var FileInput =
|
|
17902
|
+
var FileInput = React69.forwardRef(function FileInput2({
|
|
17953
17903
|
label,
|
|
17954
17904
|
value,
|
|
17955
17905
|
onChange,
|
|
@@ -17972,12 +17922,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17972
17922
|
width,
|
|
17973
17923
|
downloadLabel
|
|
17974
17924
|
}, ref) {
|
|
17975
|
-
const internalRef =
|
|
17925
|
+
const internalRef = React69.useRef(null);
|
|
17976
17926
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17977
17927
|
const { t } = (0, import_react_i18next41.useTranslation)();
|
|
17978
17928
|
const resolvedLabel = label ?? t("upload_file");
|
|
17979
17929
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17980
|
-
const reactId =
|
|
17930
|
+
const reactId = React69.useId();
|
|
17981
17931
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17982
17932
|
const labelId = `${inputId}-label`;
|
|
17983
17933
|
const errorId = `${inputId}-error`;
|
|
@@ -18003,7 +17953,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18003
17953
|
event.stopPropagation();
|
|
18004
17954
|
if (isUrl) onDownload(value);
|
|
18005
17955
|
};
|
|
18006
|
-
return /* @__PURE__ */ (0,
|
|
17956
|
+
return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
18007
17957
|
"label",
|
|
18008
17958
|
{
|
|
18009
17959
|
htmlFor: inputId,
|
|
@@ -18016,7 +17966,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18016
17966
|
),
|
|
18017
17967
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
18018
17968
|
children: [
|
|
18019
|
-
/* @__PURE__ */ (0,
|
|
17969
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
18020
17970
|
"input",
|
|
18021
17971
|
{
|
|
18022
17972
|
ref: inputRef,
|
|
@@ -18033,9 +17983,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18033
17983
|
"aria-invalid": isInvalid
|
|
18034
17984
|
}
|
|
18035
17985
|
),
|
|
18036
|
-
/* @__PURE__ */ (0,
|
|
18037
|
-
/* @__PURE__ */ (0,
|
|
18038
|
-
/* @__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)(
|
|
18039
17989
|
"div",
|
|
18040
17990
|
{
|
|
18041
17991
|
className: cn(
|
|
@@ -18043,25 +17993,25 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18043
17993
|
isEmpty && "bg-[var(--empty-field-background)]"
|
|
18044
17994
|
),
|
|
18045
17995
|
children: [
|
|
18046
|
-
hasFileChip ? /* @__PURE__ */ (0,
|
|
17996
|
+
hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
18047
17997
|
"div",
|
|
18048
17998
|
{
|
|
18049
17999
|
className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
|
|
18050
18000
|
onClick: (event) => event.preventDefault(),
|
|
18051
18001
|
children: [
|
|
18052
|
-
isUrl ? /* @__PURE__ */ (0,
|
|
18002
|
+
isUrl ? /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
18053
18003
|
"button",
|
|
18054
18004
|
{
|
|
18055
18005
|
type: "button",
|
|
18056
18006
|
onClick: handleDownload,
|
|
18057
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",
|
|
18058
18008
|
children: [
|
|
18059
|
-
/* @__PURE__ */ (0,
|
|
18060
|
-
/* @__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 })
|
|
18061
18011
|
]
|
|
18062
18012
|
}
|
|
18063
|
-
) : /* @__PURE__ */ (0,
|
|
18064
|
-
/* @__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)(
|
|
18065
18015
|
"button",
|
|
18066
18016
|
{
|
|
18067
18017
|
type: "button",
|
|
@@ -18069,17 +18019,17 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18069
18019
|
onClick: handleClear,
|
|
18070
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]",
|
|
18071
18021
|
"aria-label": t("remove_file"),
|
|
18072
|
-
children: /* @__PURE__ */ (0,
|
|
18022
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react52.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
18073
18023
|
}
|
|
18074
18024
|
)
|
|
18075
18025
|
]
|
|
18076
18026
|
}
|
|
18077
|
-
) : /* @__PURE__ */ (0,
|
|
18078
|
-
/* @__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 }) })
|
|
18079
18029
|
]
|
|
18080
18030
|
}
|
|
18081
18031
|
),
|
|
18082
|
-
/* @__PURE__ */ (0,
|
|
18032
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
18083
18033
|
Fieldset,
|
|
18084
18034
|
{
|
|
18085
18035
|
isFocused: false,
|
|
@@ -18097,9 +18047,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18097
18047
|
}
|
|
18098
18048
|
)
|
|
18099
18049
|
] }),
|
|
18100
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
18101
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
18102
|
-
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)(
|
|
18103
18053
|
FieldErrorMessage,
|
|
18104
18054
|
{
|
|
18105
18055
|
id: errorId,
|
|
@@ -18114,10 +18064,10 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
18114
18064
|
});
|
|
18115
18065
|
|
|
18116
18066
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
18117
|
-
var
|
|
18118
|
-
var
|
|
18067
|
+
var React70 = __toESM(require("react"), 1);
|
|
18068
|
+
var import_jsx_runtime180 = require("react/jsx-runtime");
|
|
18119
18069
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
18120
|
-
var SelectIconsBox =
|
|
18070
|
+
var SelectIconsBox = React70.forwardRef(
|
|
18121
18071
|
function SelectIconsBox2({
|
|
18122
18072
|
children,
|
|
18123
18073
|
icons,
|
|
@@ -18133,10 +18083,10 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
18133
18083
|
className,
|
|
18134
18084
|
boxClassName
|
|
18135
18085
|
}, ref) {
|
|
18136
|
-
const containerRef =
|
|
18086
|
+
const containerRef = React70.useRef(null);
|
|
18137
18087
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
18138
18088
|
const isControlled = controlledOpen !== void 0;
|
|
18139
|
-
const [internalOpen, setInternalOpen] =
|
|
18089
|
+
const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
|
|
18140
18090
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
18141
18091
|
const setOpen = (next) => {
|
|
18142
18092
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -18163,7 +18113,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
18163
18113
|
);
|
|
18164
18114
|
focusable?.focus();
|
|
18165
18115
|
};
|
|
18166
|
-
return /* @__PURE__ */ (0,
|
|
18116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
|
|
18167
18117
|
"div",
|
|
18168
18118
|
{
|
|
18169
18119
|
ref: combinedContainerRef,
|
|
@@ -18173,7 +18123,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
18173
18123
|
className: cn("relative inline-block outline-none", className),
|
|
18174
18124
|
children: [
|
|
18175
18125
|
children,
|
|
18176
|
-
isOpen && /* @__PURE__ */ (0,
|
|
18126
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
18177
18127
|
"div",
|
|
18178
18128
|
{
|
|
18179
18129
|
className: cn(
|
|
@@ -18184,7 +18134,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
18184
18134
|
boxClassName
|
|
18185
18135
|
),
|
|
18186
18136
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
18187
|
-
children: icons.map((iconName) => /* @__PURE__ */ (0,
|
|
18137
|
+
children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
18188
18138
|
"button",
|
|
18189
18139
|
{
|
|
18190
18140
|
type: "button",
|
|
@@ -18267,14 +18217,14 @@ function getErrorMessage(error) {
|
|
|
18267
18217
|
|
|
18268
18218
|
// src/lib/toastResponseError.tsx
|
|
18269
18219
|
var import_i18next = __toESM(require("i18next"), 1);
|
|
18270
|
-
var
|
|
18220
|
+
var import_jsx_runtime181 = require("react/jsx-runtime");
|
|
18271
18221
|
function addSupportEmailToMessage(message, prefixText) {
|
|
18272
18222
|
if (typeof message !== "string") {
|
|
18273
18223
|
return message;
|
|
18274
18224
|
}
|
|
18275
18225
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
18276
|
-
return /* @__PURE__ */ (0,
|
|
18277
|
-
/* @__PURE__ */ (0,
|
|
18226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { children: [
|
|
18227
|
+
/* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { children: builtMessage }),
|
|
18278
18228
|
import_i18next.default.t("reach_us_at_email")
|
|
18279
18229
|
] });
|
|
18280
18230
|
}
|
|
@@ -18290,12 +18240,12 @@ function toastResponseError(error, options = {}) {
|
|
|
18290
18240
|
|
|
18291
18241
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
18292
18242
|
var import_react89 = require("react");
|
|
18293
|
-
var
|
|
18243
|
+
var import_jsx_runtime182 = require("react/jsx-runtime");
|
|
18294
18244
|
var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
18295
18245
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
18296
18246
|
const inputId = (0, import_react89.useId)();
|
|
18297
|
-
return /* @__PURE__ */ (0,
|
|
18298
|
-
/* @__PURE__ */ (0,
|
|
18247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: cn("relative", className), children: [
|
|
18248
|
+
/* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
|
|
18299
18249
|
"textarea",
|
|
18300
18250
|
{
|
|
18301
18251
|
ref,
|
|
@@ -18311,7 +18261,7 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18311
18261
|
...textareaProps
|
|
18312
18262
|
}
|
|
18313
18263
|
),
|
|
18314
|
-
label && /* @__PURE__ */ (0,
|
|
18264
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
|
|
18315
18265
|
"label",
|
|
18316
18266
|
{
|
|
18317
18267
|
htmlFor: inputId,
|
|
@@ -18329,15 +18279,15 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18329
18279
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
18330
18280
|
|
|
18331
18281
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18332
|
-
var
|
|
18333
|
-
var
|
|
18282
|
+
var React72 = __toESM(require("react"), 1);
|
|
18283
|
+
var import_lucide_react54 = require("lucide-react");
|
|
18334
18284
|
|
|
18335
18285
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
18336
|
-
var
|
|
18337
|
-
var
|
|
18286
|
+
var React71 = __toESM(require("react"), 1);
|
|
18287
|
+
var import_lucide_react53 = require("lucide-react");
|
|
18338
18288
|
var import_react_i18next42 = require("react-i18next");
|
|
18339
|
-
var
|
|
18340
|
-
var AirbnbFieldTrigger =
|
|
18289
|
+
var import_jsx_runtime183 = require("react/jsx-runtime");
|
|
18290
|
+
var AirbnbFieldTrigger = React71.forwardRef(
|
|
18341
18291
|
({
|
|
18342
18292
|
as = "button",
|
|
18343
18293
|
id,
|
|
@@ -18373,14 +18323,14 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18373
18323
|
const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
|
|
18374
18324
|
const visibleLabelText = labelText ?? label;
|
|
18375
18325
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
18376
|
-
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0,
|
|
18377
|
-
/* @__PURE__ */ (0,
|
|
18378
|
-
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: [
|
|
18379
18329
|
"(",
|
|
18380
18330
|
optionalLabel,
|
|
18381
18331
|
")"
|
|
18382
18332
|
] }),
|
|
18383
|
-
tooltip && /* @__PURE__ */ (0,
|
|
18333
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18384
18334
|
HelpTooltip,
|
|
18385
18335
|
{
|
|
18386
18336
|
content: tooltip,
|
|
@@ -18395,10 +18345,10 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18395
18345
|
const hasInvalidState = Boolean(error);
|
|
18396
18346
|
const errorMessage = typeof error === "string" ? error : void 0;
|
|
18397
18347
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18398
|
-
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: [
|
|
18399
18349
|
trailingAdornment,
|
|
18400
|
-
loading && /* @__PURE__ */ (0,
|
|
18401
|
-
|
|
18350
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18351
|
+
import_lucide_react53.Loader2,
|
|
18402
18352
|
{
|
|
18403
18353
|
"aria-hidden": "true",
|
|
18404
18354
|
className: "h-5 w-5 animate-spin text-[var(--chekin-color-gray-1)]"
|
|
@@ -18413,8 +18363,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18413
18363
|
disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
|
|
18414
18364
|
className
|
|
18415
18365
|
);
|
|
18416
|
-
const sharedContent = /* @__PURE__ */ (0,
|
|
18417
|
-
/* @__PURE__ */ (0,
|
|
18366
|
+
const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(import_jsx_runtime183.Fragment, { children: [
|
|
18367
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(
|
|
18418
18368
|
"span",
|
|
18419
18369
|
{
|
|
18420
18370
|
className: cn(
|
|
@@ -18423,7 +18373,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18423
18373
|
contentClassName
|
|
18424
18374
|
),
|
|
18425
18375
|
children: [
|
|
18426
|
-
/* @__PURE__ */ (0,
|
|
18376
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18427
18377
|
"span",
|
|
18428
18378
|
{
|
|
18429
18379
|
id: labelId,
|
|
@@ -18436,7 +18386,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18436
18386
|
children: animatedLabel
|
|
18437
18387
|
}
|
|
18438
18388
|
),
|
|
18439
|
-
children ? children : hasValue ? /* @__PURE__ */ (0,
|
|
18389
|
+
children ? children : hasValue ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18440
18390
|
"span",
|
|
18441
18391
|
{
|
|
18442
18392
|
id: valueId,
|
|
@@ -18447,11 +18397,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18447
18397
|
),
|
|
18448
18398
|
children: valueText
|
|
18449
18399
|
}
|
|
18450
|
-
) : /* @__PURE__ */ (0,
|
|
18400
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
18451
18401
|
]
|
|
18452
18402
|
}
|
|
18453
18403
|
),
|
|
18454
|
-
resolvedTrailingAdornment && /* @__PURE__ */ (0,
|
|
18404
|
+
resolvedTrailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18455
18405
|
"span",
|
|
18456
18406
|
{
|
|
18457
18407
|
"aria-hidden": "true",
|
|
@@ -18460,9 +18410,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18460
18410
|
}
|
|
18461
18411
|
)
|
|
18462
18412
|
] });
|
|
18463
|
-
return /* @__PURE__ */ (0,
|
|
18464
|
-
topLabel && /* @__PURE__ */ (0,
|
|
18465
|
-
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)(
|
|
18466
18416
|
"button",
|
|
18467
18417
|
{
|
|
18468
18418
|
id,
|
|
@@ -18479,7 +18429,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18479
18429
|
...props,
|
|
18480
18430
|
children: sharedContent
|
|
18481
18431
|
}
|
|
18482
|
-
) : /* @__PURE__ */ (0,
|
|
18432
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18483
18433
|
"div",
|
|
18484
18434
|
{
|
|
18485
18435
|
id,
|
|
@@ -18496,16 +18446,16 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18496
18446
|
children: sharedContent
|
|
18497
18447
|
}
|
|
18498
18448
|
),
|
|
18499
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
18449
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
18500
18450
|
] });
|
|
18501
18451
|
}
|
|
18502
18452
|
);
|
|
18503
18453
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
18504
18454
|
|
|
18505
18455
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18506
|
-
var
|
|
18456
|
+
var import_jsx_runtime184 = require("react/jsx-runtime");
|
|
18507
18457
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18508
|
-
var AirbnbDatePicker =
|
|
18458
|
+
var AirbnbDatePicker = React72.forwardRef(
|
|
18509
18459
|
({
|
|
18510
18460
|
label,
|
|
18511
18461
|
topLabel,
|
|
@@ -18530,24 +18480,24 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18530
18480
|
formatValue = formatDateValue
|
|
18531
18481
|
}, ref) => {
|
|
18532
18482
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18533
|
-
const [isOpen, setIsOpen] =
|
|
18534
|
-
const triggerId =
|
|
18535
|
-
const pickerId =
|
|
18536
|
-
const labelId =
|
|
18537
|
-
const valueId =
|
|
18538
|
-
const helperTextId =
|
|
18539
|
-
const errorId =
|
|
18540
|
-
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);
|
|
18541
18491
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18542
|
-
const monthLabels =
|
|
18543
|
-
const resolvedMinDate =
|
|
18544
|
-
const resolvedMaxDate =
|
|
18545
|
-
const normalizedValue =
|
|
18546
|
-
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(
|
|
18547
18497
|
() => normalizeDateValue(defaultValue),
|
|
18548
18498
|
[defaultValue]
|
|
18549
18499
|
);
|
|
18550
|
-
const resolvedValue =
|
|
18500
|
+
const resolvedValue = React72.useMemo(
|
|
18551
18501
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18552
18502
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18553
18503
|
);
|
|
@@ -18578,7 +18528,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18578
18528
|
minDate: resolvedMinDate,
|
|
18579
18529
|
maxDate: resolvedMaxDate
|
|
18580
18530
|
});
|
|
18581
|
-
const handleOpenChange =
|
|
18531
|
+
const handleOpenChange = React72.useCallback(
|
|
18582
18532
|
(nextOpen) => {
|
|
18583
18533
|
if (isBlocked && nextOpen) return;
|
|
18584
18534
|
setIsOpen(nextOpen);
|
|
@@ -18588,7 +18538,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18588
18538
|
},
|
|
18589
18539
|
[isBlocked]
|
|
18590
18540
|
);
|
|
18591
|
-
const handleDone =
|
|
18541
|
+
const handleDone = React72.useCallback(() => {
|
|
18592
18542
|
if (isBlocked) return;
|
|
18593
18543
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18594
18544
|
handleOpenChange(false);
|
|
@@ -18600,11 +18550,11 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18600
18550
|
resolvedMaxDate,
|
|
18601
18551
|
resolvedMinDate
|
|
18602
18552
|
]);
|
|
18603
|
-
const handleTriggerClick =
|
|
18553
|
+
const handleTriggerClick = React72.useCallback(() => {
|
|
18604
18554
|
if (isBlocked) return;
|
|
18605
18555
|
setIsOpen(true);
|
|
18606
18556
|
}, [isBlocked]);
|
|
18607
|
-
const handleTriggerKeyDown =
|
|
18557
|
+
const handleTriggerKeyDown = React72.useCallback(
|
|
18608
18558
|
(event) => {
|
|
18609
18559
|
if (isBlocked) return;
|
|
18610
18560
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18614,13 +18564,13 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18614
18564
|
},
|
|
18615
18565
|
[isBlocked]
|
|
18616
18566
|
);
|
|
18617
|
-
|
|
18567
|
+
React72.useEffect(() => {
|
|
18618
18568
|
if (isBlocked) {
|
|
18619
18569
|
setIsOpen(false);
|
|
18620
18570
|
}
|
|
18621
18571
|
}, [isBlocked]);
|
|
18622
|
-
return /* @__PURE__ */ (0,
|
|
18623
|
-
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)(
|
|
18624
18574
|
"input",
|
|
18625
18575
|
{
|
|
18626
18576
|
type: "hidden",
|
|
@@ -18628,7 +18578,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18628
18578
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
18629
18579
|
}
|
|
18630
18580
|
),
|
|
18631
|
-
/* @__PURE__ */ (0,
|
|
18581
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18632
18582
|
AirbnbFieldTrigger,
|
|
18633
18583
|
{
|
|
18634
18584
|
id: triggerId,
|
|
@@ -18654,10 +18604,10 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18654
18604
|
onClick: handleTriggerClick,
|
|
18655
18605
|
onKeyDown: handleTriggerKeyDown,
|
|
18656
18606
|
onBlur,
|
|
18657
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
18607
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_lucide_react54.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18658
18608
|
}
|
|
18659
18609
|
),
|
|
18660
|
-
/* @__PURE__ */ (0,
|
|
18610
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18661
18611
|
AirbnbDatePickerContent,
|
|
18662
18612
|
{
|
|
18663
18613
|
baseId: pickerId,
|
|
@@ -18691,12 +18641,12 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18691
18641
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18692
18642
|
|
|
18693
18643
|
// src/airbnb-fields/input/Input.tsx
|
|
18694
|
-
var
|
|
18695
|
-
var
|
|
18644
|
+
var React73 = __toESM(require("react"), 1);
|
|
18645
|
+
var import_lucide_react55 = require("lucide-react");
|
|
18696
18646
|
var import_react_i18next43 = require("react-i18next");
|
|
18697
|
-
var
|
|
18647
|
+
var import_jsx_runtime185 = require("react/jsx-runtime");
|
|
18698
18648
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18699
|
-
var AirbnbInput =
|
|
18649
|
+
var AirbnbInput = React73.forwardRef(
|
|
18700
18650
|
({
|
|
18701
18651
|
label,
|
|
18702
18652
|
topLabel,
|
|
@@ -18725,16 +18675,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18725
18675
|
...props
|
|
18726
18676
|
}, ref) => {
|
|
18727
18677
|
const { t } = (0, import_react_i18next43.useTranslation)();
|
|
18728
|
-
const generatedId =
|
|
18729
|
-
const inputRef =
|
|
18678
|
+
const generatedId = React73.useId();
|
|
18679
|
+
const inputRef = React73.useRef(null);
|
|
18730
18680
|
const inputId = id ?? generatedId;
|
|
18731
18681
|
const fieldId = `${inputId}-field`;
|
|
18732
18682
|
const labelId = `${inputId}-label`;
|
|
18733
18683
|
const errorId = `${inputId}-error`;
|
|
18734
18684
|
const accessibleLabel = placeholder ?? label;
|
|
18735
|
-
const [isFocused, setIsFocused] =
|
|
18736
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18737
|
-
const [currentValue, setCurrentValue] =
|
|
18685
|
+
const [isFocused, setIsFocused] = React73.useState(false);
|
|
18686
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React73.useState(false);
|
|
18687
|
+
const [currentValue, setCurrentValue] = React73.useState(
|
|
18738
18688
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18739
18689
|
);
|
|
18740
18690
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18747,16 +18697,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18747
18697
|
const triggerError = error ?? invalid;
|
|
18748
18698
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18749
18699
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18750
|
-
|
|
18700
|
+
React73.useLayoutEffect(() => {
|
|
18751
18701
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18752
18702
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18753
18703
|
}, [value]);
|
|
18754
|
-
|
|
18704
|
+
React73.useEffect(() => {
|
|
18755
18705
|
if (!isPasswordInput) {
|
|
18756
18706
|
setIsPasswordRevealed(false);
|
|
18757
18707
|
}
|
|
18758
18708
|
}, [isPasswordInput]);
|
|
18759
|
-
const setRefs =
|
|
18709
|
+
const setRefs = React73.useCallback(
|
|
18760
18710
|
(node) => {
|
|
18761
18711
|
inputRef.current = node;
|
|
18762
18712
|
if (node && value == null) {
|
|
@@ -18789,7 +18739,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18789
18739
|
const togglePasswordReveal = () => {
|
|
18790
18740
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18791
18741
|
};
|
|
18792
|
-
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)(
|
|
18793
18743
|
AirbnbFieldTrigger,
|
|
18794
18744
|
{
|
|
18795
18745
|
as: "div",
|
|
@@ -18818,7 +18768,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18818
18768
|
forceLabelText: hasLabelMeta,
|
|
18819
18769
|
hideErrorMessage: !renderErrorMessage,
|
|
18820
18770
|
children: [
|
|
18821
|
-
/* @__PURE__ */ (0,
|
|
18771
|
+
/* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18822
18772
|
"input",
|
|
18823
18773
|
{
|
|
18824
18774
|
...props,
|
|
@@ -18848,7 +18798,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18848
18798
|
)
|
|
18849
18799
|
}
|
|
18850
18800
|
),
|
|
18851
|
-
shouldShowPasswordReveal && /* @__PURE__ */ (0,
|
|
18801
|
+
shouldShowPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18852
18802
|
"button",
|
|
18853
18803
|
{
|
|
18854
18804
|
type: "button",
|
|
@@ -18856,8 +18806,8 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18856
18806
|
disabled: isBlocked,
|
|
18857
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",
|
|
18858
18808
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18859
|
-
children: /* @__PURE__ */ (0,
|
|
18860
|
-
|
|
18809
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18810
|
+
import_lucide_react55.Eye,
|
|
18861
18811
|
{
|
|
18862
18812
|
size: 18,
|
|
18863
18813
|
"aria-hidden": "true",
|
|
@@ -18874,14 +18824,14 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18874
18824
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18875
18825
|
|
|
18876
18826
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18877
|
-
var
|
|
18878
|
-
var
|
|
18827
|
+
var React79 = __toESM(require("react"), 1);
|
|
18828
|
+
var import_lucide_react57 = require("lucide-react");
|
|
18879
18829
|
|
|
18880
18830
|
// src/airbnb-fields/select/Select.tsx
|
|
18881
|
-
var
|
|
18831
|
+
var React78 = __toESM(require("react"), 1);
|
|
18882
18832
|
|
|
18883
18833
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18884
|
-
var
|
|
18834
|
+
var import_jsx_runtime186 = require("react/jsx-runtime");
|
|
18885
18835
|
function AirbnbSelectDesktopMenu({
|
|
18886
18836
|
id,
|
|
18887
18837
|
options,
|
|
@@ -18900,7 +18850,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18900
18850
|
noOptionsMessage
|
|
18901
18851
|
}) {
|
|
18902
18852
|
const emptyMessage = noOptionsMessage?.();
|
|
18903
|
-
return /* @__PURE__ */ (0,
|
|
18853
|
+
return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
|
|
18904
18854
|
"div",
|
|
18905
18855
|
{
|
|
18906
18856
|
id,
|
|
@@ -18913,12 +18863,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18913
18863
|
onKeyDown,
|
|
18914
18864
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18915
18865
|
children: [
|
|
18916
|
-
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,
|
|
18917
18867
|
options.map((option, index) => {
|
|
18918
18868
|
const isSelected = selectedValue?.value === option.value;
|
|
18919
18869
|
const isHighlighted = index === highlightedIndex;
|
|
18920
18870
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18921
|
-
return /* @__PURE__ */ (0,
|
|
18871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
|
|
18922
18872
|
"button",
|
|
18923
18873
|
{
|
|
18924
18874
|
id: getOptionId2(index),
|
|
@@ -18950,7 +18900,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18950
18900
|
}
|
|
18951
18901
|
|
|
18952
18902
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18953
|
-
var
|
|
18903
|
+
var import_jsx_runtime187 = require("react/jsx-runtime");
|
|
18954
18904
|
function AirbnbSelectDesktopContent({
|
|
18955
18905
|
isOpen,
|
|
18956
18906
|
listboxId,
|
|
@@ -18971,14 +18921,14 @@ function AirbnbSelectDesktopContent({
|
|
|
18971
18921
|
noOptionsMessage
|
|
18972
18922
|
}) {
|
|
18973
18923
|
if (!isOpen) return null;
|
|
18974
|
-
return /* @__PURE__ */ (0,
|
|
18924
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
18975
18925
|
"div",
|
|
18976
18926
|
{
|
|
18977
18927
|
className: cn(
|
|
18978
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)]",
|
|
18979
18929
|
dropdownClassName
|
|
18980
18930
|
),
|
|
18981
|
-
children: /* @__PURE__ */ (0,
|
|
18931
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
18982
18932
|
AirbnbSelectDesktopMenu,
|
|
18983
18933
|
{
|
|
18984
18934
|
id: listboxId,
|
|
@@ -19076,7 +19026,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
19076
19026
|
}
|
|
19077
19027
|
|
|
19078
19028
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
19079
|
-
var
|
|
19029
|
+
var import_jsx_runtime188 = require("react/jsx-runtime");
|
|
19080
19030
|
function AirbnbSelectMobileWheel({
|
|
19081
19031
|
id,
|
|
19082
19032
|
options,
|
|
@@ -19095,7 +19045,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19095
19045
|
}) {
|
|
19096
19046
|
const spacerHeight2 = getWheelSpacerHeight();
|
|
19097
19047
|
const emptyMessage = noOptionsMessage?.();
|
|
19098
|
-
return /* @__PURE__ */ (0,
|
|
19048
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
|
|
19099
19049
|
"div",
|
|
19100
19050
|
{
|
|
19101
19051
|
id,
|
|
@@ -19107,10 +19057,10 @@ function AirbnbSelectMobileWheel({
|
|
|
19107
19057
|
onKeyDown,
|
|
19108
19058
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
19109
19059
|
children: [
|
|
19110
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
19111
|
-
/* @__PURE__ */ (0,
|
|
19112
|
-
/* @__PURE__ */ (0,
|
|
19113
|
-
/* @__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)(
|
|
19114
19064
|
"div",
|
|
19115
19065
|
{
|
|
19116
19066
|
"aria-hidden": true,
|
|
@@ -19120,7 +19070,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19120
19070
|
)
|
|
19121
19071
|
}
|
|
19122
19072
|
),
|
|
19123
|
-
/* @__PURE__ */ (0,
|
|
19073
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
|
|
19124
19074
|
"div",
|
|
19125
19075
|
{
|
|
19126
19076
|
ref: listRef,
|
|
@@ -19135,11 +19085,11 @@ function AirbnbSelectMobileWheel({
|
|
|
19135
19085
|
WebkitOverflowScrolling: "touch"
|
|
19136
19086
|
},
|
|
19137
19087
|
children: [
|
|
19138
|
-
/* @__PURE__ */ (0,
|
|
19088
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
|
|
19139
19089
|
options.map((option, index) => {
|
|
19140
19090
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
19141
19091
|
const optionKey = `${String(option.value)}-${index}`;
|
|
19142
|
-
return /* @__PURE__ */ (0,
|
|
19092
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
19143
19093
|
"button",
|
|
19144
19094
|
{
|
|
19145
19095
|
id: getOptionId2(index),
|
|
@@ -19160,7 +19110,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19160
19110
|
optionKey
|
|
19161
19111
|
);
|
|
19162
19112
|
}),
|
|
19163
|
-
/* @__PURE__ */ (0,
|
|
19113
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { style: { height: `${spacerHeight2}px` } })
|
|
19164
19114
|
]
|
|
19165
19115
|
}
|
|
19166
19116
|
)
|
|
@@ -19170,7 +19120,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19170
19120
|
}
|
|
19171
19121
|
|
|
19172
19122
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
19173
|
-
var
|
|
19123
|
+
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
19174
19124
|
function AirbnbSelectMobileContent({
|
|
19175
19125
|
open,
|
|
19176
19126
|
onOpenChange,
|
|
@@ -19194,11 +19144,11 @@ function AirbnbSelectMobileContent({
|
|
|
19194
19144
|
getOptionId: getOptionId2,
|
|
19195
19145
|
noOptionsMessage
|
|
19196
19146
|
}) {
|
|
19197
|
-
return /* @__PURE__ */ (0,
|
|
19198
|
-
/* @__PURE__ */ (0,
|
|
19199
|
-
/* @__PURE__ */ (0,
|
|
19200
|
-
/* @__PURE__ */ (0,
|
|
19201
|
-
/* @__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)(
|
|
19202
19152
|
AirbnbSelectMobileWheel,
|
|
19203
19153
|
{
|
|
19204
19154
|
id: listboxId,
|
|
@@ -19217,16 +19167,16 @@ function AirbnbSelectMobileContent({
|
|
|
19217
19167
|
noOptionsMessage
|
|
19218
19168
|
}
|
|
19219
19169
|
),
|
|
19220
|
-
/* @__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 })
|
|
19221
19171
|
] })
|
|
19222
19172
|
] }) });
|
|
19223
19173
|
}
|
|
19224
19174
|
|
|
19225
19175
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
19226
|
-
var
|
|
19227
|
-
var
|
|
19228
|
-
var
|
|
19229
|
-
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(
|
|
19230
19180
|
({
|
|
19231
19181
|
id,
|
|
19232
19182
|
open,
|
|
@@ -19250,7 +19200,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
19250
19200
|
onKeyDown,
|
|
19251
19201
|
onBlur
|
|
19252
19202
|
}, ref) => {
|
|
19253
|
-
return /* @__PURE__ */ (0,
|
|
19203
|
+
return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
19254
19204
|
AirbnbFieldTrigger,
|
|
19255
19205
|
{
|
|
19256
19206
|
id,
|
|
@@ -19278,8 +19228,8 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
19278
19228
|
onClick,
|
|
19279
19229
|
onKeyDown,
|
|
19280
19230
|
onBlur,
|
|
19281
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
19282
|
-
|
|
19231
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
19232
|
+
import_lucide_react56.ChevronDown,
|
|
19283
19233
|
{
|
|
19284
19234
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
19285
19235
|
}
|
|
@@ -19291,7 +19241,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
19291
19241
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
19292
19242
|
|
|
19293
19243
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
19294
|
-
var
|
|
19244
|
+
var React75 = __toESM(require("react"), 1);
|
|
19295
19245
|
function useDesktopSelect({
|
|
19296
19246
|
isMobile: isMobile3,
|
|
19297
19247
|
isOpen,
|
|
@@ -19300,12 +19250,12 @@ function useDesktopSelect({
|
|
|
19300
19250
|
disabled,
|
|
19301
19251
|
onChange
|
|
19302
19252
|
}) {
|
|
19303
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19304
|
-
const triggerRef =
|
|
19305
|
-
const listRef =
|
|
19306
|
-
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([]);
|
|
19307
19257
|
const selectedIndex = getOptionIndex2(options, value);
|
|
19308
|
-
|
|
19258
|
+
React75.useEffect(() => {
|
|
19309
19259
|
if (!isOpen || isMobile3) return;
|
|
19310
19260
|
setHighlightedIndex((currentIndex) => {
|
|
19311
19261
|
if (currentIndex >= 0) {
|
|
@@ -19320,34 +19270,34 @@ function useDesktopSelect({
|
|
|
19320
19270
|
window.cancelAnimationFrame(frameId);
|
|
19321
19271
|
};
|
|
19322
19272
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
19323
|
-
|
|
19273
|
+
React75.useEffect(() => {
|
|
19324
19274
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
19325
19275
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
19326
19276
|
block: "nearest"
|
|
19327
19277
|
});
|
|
19328
19278
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
19329
|
-
|
|
19279
|
+
React75.useEffect(() => {
|
|
19330
19280
|
if (isOpen) return;
|
|
19331
19281
|
setHighlightedIndex(-1);
|
|
19332
19282
|
}, [isOpen]);
|
|
19333
|
-
const focusTrigger =
|
|
19283
|
+
const focusTrigger = React75.useCallback(() => {
|
|
19334
19284
|
triggerRef.current?.focus();
|
|
19335
19285
|
}, []);
|
|
19336
|
-
const handleSelect =
|
|
19286
|
+
const handleSelect = React75.useCallback(
|
|
19337
19287
|
(option) => {
|
|
19338
19288
|
if (option.isDisabled || disabled) return;
|
|
19339
19289
|
onChange?.(option);
|
|
19340
19290
|
},
|
|
19341
19291
|
[disabled, onChange]
|
|
19342
19292
|
);
|
|
19343
|
-
const openMenu =
|
|
19293
|
+
const openMenu = React75.useCallback(
|
|
19344
19294
|
(targetIndex) => {
|
|
19345
19295
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19346
19296
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
19347
19297
|
},
|
|
19348
19298
|
[options, selectedIndex]
|
|
19349
19299
|
);
|
|
19350
|
-
const handleTriggerKeyDown =
|
|
19300
|
+
const handleTriggerKeyDown = React75.useCallback(
|
|
19351
19301
|
(event, onOpen) => {
|
|
19352
19302
|
if (disabled) return;
|
|
19353
19303
|
if (event.key === "ArrowDown") {
|
|
@@ -19372,7 +19322,7 @@ function useDesktopSelect({
|
|
|
19372
19322
|
},
|
|
19373
19323
|
[disabled, openMenu, options, selectedIndex]
|
|
19374
19324
|
);
|
|
19375
|
-
const handleMenuKeyDown =
|
|
19325
|
+
const handleMenuKeyDown = React75.useCallback(
|
|
19376
19326
|
(event, onClose) => {
|
|
19377
19327
|
if (event.key === "Escape") {
|
|
19378
19328
|
event.preventDefault();
|
|
@@ -19422,7 +19372,7 @@ function useDesktopSelect({
|
|
|
19422
19372
|
},
|
|
19423
19373
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
19424
19374
|
);
|
|
19425
|
-
const setOptionRef =
|
|
19375
|
+
const setOptionRef = React75.useCallback(
|
|
19426
19376
|
(index, node) => {
|
|
19427
19377
|
optionRefs.current[index] = node;
|
|
19428
19378
|
},
|
|
@@ -19442,23 +19392,23 @@ function useDesktopSelect({
|
|
|
19442
19392
|
}
|
|
19443
19393
|
|
|
19444
19394
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19445
|
-
var
|
|
19395
|
+
var React76 = __toESM(require("react"), 1);
|
|
19446
19396
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19447
|
-
const [pendingValue, setPendingValue] =
|
|
19397
|
+
const [pendingValue, setPendingValue] = React76.useState(
|
|
19448
19398
|
value ?? null
|
|
19449
19399
|
);
|
|
19450
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19451
|
-
const mobileListRef =
|
|
19452
|
-
const scrollSettleTimeoutRef =
|
|
19453
|
-
const scrollAnimationFrameRef =
|
|
19454
|
-
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(
|
|
19455
19405
|
(targetValue) => {
|
|
19456
19406
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19457
19407
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19458
19408
|
},
|
|
19459
19409
|
[options]
|
|
19460
19410
|
);
|
|
19461
|
-
const syncScrollPosition =
|
|
19411
|
+
const syncScrollPosition = React76.useCallback(
|
|
19462
19412
|
(targetValue, behavior = "instant") => {
|
|
19463
19413
|
const targetIndex = getTargetIndex(targetValue);
|
|
19464
19414
|
if (targetIndex < 0) return;
|
|
@@ -19477,27 +19427,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19477
19427
|
},
|
|
19478
19428
|
[getTargetIndex, options]
|
|
19479
19429
|
);
|
|
19480
|
-
const clearScrollSettleTimeout =
|
|
19430
|
+
const clearScrollSettleTimeout = React76.useCallback(() => {
|
|
19481
19431
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19482
19432
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19483
19433
|
scrollSettleTimeoutRef.current = null;
|
|
19484
19434
|
}, []);
|
|
19485
|
-
const clearScrollAnimationFrame =
|
|
19435
|
+
const clearScrollAnimationFrame = React76.useCallback(() => {
|
|
19486
19436
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19487
19437
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19488
19438
|
scrollAnimationFrameRef.current = null;
|
|
19489
19439
|
}, []);
|
|
19490
|
-
|
|
19440
|
+
React76.useEffect(
|
|
19491
19441
|
() => () => {
|
|
19492
19442
|
clearScrollSettleTimeout();
|
|
19493
19443
|
clearScrollAnimationFrame();
|
|
19494
19444
|
},
|
|
19495
19445
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19496
19446
|
);
|
|
19497
|
-
|
|
19447
|
+
React76.useEffect(() => {
|
|
19498
19448
|
setPendingValue(value ?? null);
|
|
19499
19449
|
}, [value]);
|
|
19500
|
-
|
|
19450
|
+
React76.useLayoutEffect(() => {
|
|
19501
19451
|
if (!isMobile3 || !isOpen) return;
|
|
19502
19452
|
const frameId = window.requestAnimationFrame(() => {
|
|
19503
19453
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19506,7 +19456,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19506
19456
|
window.cancelAnimationFrame(frameId);
|
|
19507
19457
|
};
|
|
19508
19458
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19509
|
-
const settleScroll =
|
|
19459
|
+
const settleScroll = React76.useCallback(() => {
|
|
19510
19460
|
if (!mobileListRef.current) return;
|
|
19511
19461
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19512
19462
|
const nextOption = options[nextIndex];
|
|
@@ -19518,13 +19468,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19518
19468
|
}
|
|
19519
19469
|
setPendingValue(nextOption);
|
|
19520
19470
|
}, [options, pendingValue]);
|
|
19521
|
-
const scheduleScrollSettle =
|
|
19471
|
+
const scheduleScrollSettle = React76.useCallback(() => {
|
|
19522
19472
|
clearScrollSettleTimeout();
|
|
19523
19473
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19524
19474
|
settleScroll();
|
|
19525
19475
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19526
19476
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19527
|
-
const handleScroll =
|
|
19477
|
+
const handleScroll = React76.useCallback(() => {
|
|
19528
19478
|
if (!mobileListRef.current) return;
|
|
19529
19479
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19530
19480
|
clearScrollAnimationFrame();
|
|
@@ -19534,7 +19484,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19534
19484
|
});
|
|
19535
19485
|
scheduleScrollSettle();
|
|
19536
19486
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19537
|
-
const focusOptionByIndex =
|
|
19487
|
+
const focusOptionByIndex = React76.useCallback(
|
|
19538
19488
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19539
19489
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19540
19490
|
const option = options[index];
|
|
@@ -19552,7 +19502,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19552
19502
|
},
|
|
19553
19503
|
[options, scheduleScrollSettle]
|
|
19554
19504
|
);
|
|
19555
|
-
const handleOptionClick =
|
|
19505
|
+
const handleOptionClick = React76.useCallback(
|
|
19556
19506
|
(option) => {
|
|
19557
19507
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19558
19508
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19561,7 +19511,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19561
19511
|
},
|
|
19562
19512
|
[disabled, focusOptionByIndex, options]
|
|
19563
19513
|
);
|
|
19564
|
-
const moveByStep =
|
|
19514
|
+
const moveByStep = React76.useCallback(
|
|
19565
19515
|
(step) => {
|
|
19566
19516
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19567
19517
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19573,7 +19523,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19573
19523
|
},
|
|
19574
19524
|
[focusOptionByIndex, options, pendingValue]
|
|
19575
19525
|
);
|
|
19576
|
-
const moveToBoundary =
|
|
19526
|
+
const moveToBoundary = React76.useCallback(
|
|
19577
19527
|
(boundary) => {
|
|
19578
19528
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19579
19529
|
if (targetIndex >= 0) {
|
|
@@ -19582,7 +19532,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19582
19532
|
},
|
|
19583
19533
|
[focusOptionByIndex, options]
|
|
19584
19534
|
);
|
|
19585
|
-
const syncPendingValue =
|
|
19535
|
+
const syncPendingValue = React76.useCallback(
|
|
19586
19536
|
(nextValue) => {
|
|
19587
19537
|
const normalizedValue = nextValue ?? null;
|
|
19588
19538
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19610,9 +19560,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19610
19560
|
}
|
|
19611
19561
|
|
|
19612
19562
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19613
|
-
var
|
|
19563
|
+
var React77 = __toESM(require("react"), 1);
|
|
19614
19564
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19615
|
-
const reactId =
|
|
19565
|
+
const reactId = React77.useId().replace(/:/g, "");
|
|
19616
19566
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19617
19567
|
const triggerId = `${baseId}-trigger`;
|
|
19618
19568
|
const labelId = `${baseId}-label`;
|
|
@@ -19622,7 +19572,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19622
19572
|
const listboxId = `${baseId}-listbox`;
|
|
19623
19573
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19624
19574
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19625
|
-
const getOptionId2 =
|
|
19575
|
+
const getOptionId2 = React77.useCallback(
|
|
19626
19576
|
(index) => `${baseId}-option-${index}`,
|
|
19627
19577
|
[baseId]
|
|
19628
19578
|
);
|
|
@@ -19640,8 +19590,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19640
19590
|
}
|
|
19641
19591
|
|
|
19642
19592
|
// src/airbnb-fields/select/Select.tsx
|
|
19643
|
-
var
|
|
19644
|
-
var AirbnbSelect =
|
|
19593
|
+
var import_jsx_runtime191 = require("react/jsx-runtime");
|
|
19594
|
+
var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
19645
19595
|
options = [],
|
|
19646
19596
|
value,
|
|
19647
19597
|
onChange,
|
|
@@ -19668,8 +19618,8 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19668
19618
|
filterOption
|
|
19669
19619
|
}, ref) {
|
|
19670
19620
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19671
|
-
const [isOpen, setIsOpen] =
|
|
19672
|
-
const containerRef =
|
|
19621
|
+
const [isOpen, setIsOpen] = React78.useState(false);
|
|
19622
|
+
const containerRef = React78.useRef(null);
|
|
19673
19623
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19674
19624
|
const hasValue = Boolean(value);
|
|
19675
19625
|
const helperText = placeholder ?? label;
|
|
@@ -19731,12 +19681,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19731
19681
|
onOutsideClick: () => setIsOpen(false),
|
|
19732
19682
|
isDisabled: !isOpen || isMobile3
|
|
19733
19683
|
});
|
|
19734
|
-
|
|
19684
|
+
React78.useEffect(() => {
|
|
19735
19685
|
if (isBlocked) {
|
|
19736
19686
|
setIsOpen(false);
|
|
19737
19687
|
}
|
|
19738
19688
|
}, [isBlocked]);
|
|
19739
|
-
|
|
19689
|
+
React78.useEffect(
|
|
19740
19690
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19741
19691
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19742
19692
|
return;
|
|
@@ -19748,7 +19698,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19748
19698
|
},
|
|
19749
19699
|
[onChange, filteredOptions, value]
|
|
19750
19700
|
);
|
|
19751
|
-
const handleMobileOpenChange =
|
|
19701
|
+
const handleMobileOpenChange = React78.useCallback(
|
|
19752
19702
|
(nextOpen) => {
|
|
19753
19703
|
if (isBlocked && nextOpen) return;
|
|
19754
19704
|
setIsOpen(nextOpen);
|
|
@@ -19759,7 +19709,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19759
19709
|
},
|
|
19760
19710
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19761
19711
|
);
|
|
19762
|
-
const handleMobileDone =
|
|
19712
|
+
const handleMobileDone = React78.useCallback(() => {
|
|
19763
19713
|
if (isBlocked) return;
|
|
19764
19714
|
const finalOption = pendingValue;
|
|
19765
19715
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19768,7 +19718,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19768
19718
|
setIsOpen(false);
|
|
19769
19719
|
focusTrigger();
|
|
19770
19720
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19771
|
-
const handleTriggerClick =
|
|
19721
|
+
const handleTriggerClick = React78.useCallback(() => {
|
|
19772
19722
|
if (isBlocked) return;
|
|
19773
19723
|
setIsOpen((prev) => {
|
|
19774
19724
|
const nextOpen = !prev;
|
|
@@ -19821,13 +19771,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19821
19771
|
handleMobileOpenChange(false);
|
|
19822
19772
|
}
|
|
19823
19773
|
};
|
|
19824
|
-
return /* @__PURE__ */ (0,
|
|
19774
|
+
return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
|
|
19825
19775
|
"div",
|
|
19826
19776
|
{
|
|
19827
19777
|
ref: containerRef,
|
|
19828
19778
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19829
19779
|
children: [
|
|
19830
|
-
name && /* @__PURE__ */ (0,
|
|
19780
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19831
19781
|
renderTrigger ? renderTrigger({
|
|
19832
19782
|
id: triggerId,
|
|
19833
19783
|
open: isOpen,
|
|
@@ -19848,7 +19798,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19848
19798
|
onClick: handleTriggerClick,
|
|
19849
19799
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19850
19800
|
onBlur
|
|
19851
|
-
}) : /* @__PURE__ */ (0,
|
|
19801
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19852
19802
|
AirbnbSelectTrigger,
|
|
19853
19803
|
{
|
|
19854
19804
|
id: triggerId,
|
|
@@ -19875,7 +19825,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19875
19825
|
onBlur
|
|
19876
19826
|
}
|
|
19877
19827
|
),
|
|
19878
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
19828
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19879
19829
|
AirbnbSelectMobileContent,
|
|
19880
19830
|
{
|
|
19881
19831
|
open: isOpen,
|
|
@@ -19900,7 +19850,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19900
19850
|
getOptionId: getOptionId2,
|
|
19901
19851
|
noOptionsMessage
|
|
19902
19852
|
}
|
|
19903
|
-
) : /* @__PURE__ */ (0,
|
|
19853
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19904
19854
|
AirbnbSelectDesktopContent,
|
|
19905
19855
|
{
|
|
19906
19856
|
isOpen,
|
|
@@ -19934,13 +19884,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19934
19884
|
});
|
|
19935
19885
|
|
|
19936
19886
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19937
|
-
var
|
|
19887
|
+
var import_jsx_runtime192 = require("react/jsx-runtime");
|
|
19938
19888
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19939
19889
|
const label = String(option.label);
|
|
19940
19890
|
const value = String(option.value);
|
|
19941
19891
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19942
19892
|
}
|
|
19943
|
-
var AirbnbPhoneField =
|
|
19893
|
+
var AirbnbPhoneField = React79.forwardRef(
|
|
19944
19894
|
({
|
|
19945
19895
|
label,
|
|
19946
19896
|
topLabel,
|
|
@@ -19964,9 +19914,9 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19964
19914
|
codePlaceholder = "+00",
|
|
19965
19915
|
defaultCode
|
|
19966
19916
|
}, ref) => {
|
|
19967
|
-
const inputId =
|
|
19917
|
+
const inputId = React79.useId();
|
|
19968
19918
|
const effectiveCode = value?.code || defaultCode || "";
|
|
19969
|
-
const codeOptions =
|
|
19919
|
+
const codeOptions = React79.useMemo(
|
|
19970
19920
|
() => options.map((option) => ({
|
|
19971
19921
|
value: option.value,
|
|
19972
19922
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19974,7 +19924,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19974
19924
|
})),
|
|
19975
19925
|
[options]
|
|
19976
19926
|
);
|
|
19977
|
-
const selectedCodeOption =
|
|
19927
|
+
const selectedCodeOption = React79.useMemo(
|
|
19978
19928
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19979
19929
|
[codeOptions, effectiveCode]
|
|
19980
19930
|
);
|
|
@@ -19982,9 +19932,9 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19982
19932
|
const hasInvalidState = Boolean(error) || Boolean(invalid);
|
|
19983
19933
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
19984
19934
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
19985
|
-
return /* @__PURE__ */ (0,
|
|
19986
|
-
name && /* @__PURE__ */ (0,
|
|
19987
|
-
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)(
|
|
19988
19938
|
"input",
|
|
19989
19939
|
{
|
|
19990
19940
|
type: "hidden",
|
|
@@ -19993,7 +19943,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19993
19943
|
disabled
|
|
19994
19944
|
}
|
|
19995
19945
|
),
|
|
19996
|
-
numberName && /* @__PURE__ */ (0,
|
|
19946
|
+
numberName && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19997
19947
|
"input",
|
|
19998
19948
|
{
|
|
19999
19949
|
type: "hidden",
|
|
@@ -20002,7 +19952,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20002
19952
|
disabled
|
|
20003
19953
|
}
|
|
20004
19954
|
),
|
|
20005
|
-
topLabel && /* @__PURE__ */ (0,
|
|
19955
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
20006
19956
|
"label",
|
|
20007
19957
|
{
|
|
20008
19958
|
htmlFor: inputId,
|
|
@@ -20010,8 +19960,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20010
19960
|
children: topLabel
|
|
20011
19961
|
}
|
|
20012
19962
|
),
|
|
20013
|
-
/* @__PURE__ */ (0,
|
|
20014
|
-
/* @__PURE__ */ (0,
|
|
19963
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "flex items-stretch", children: [
|
|
19964
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
20015
19965
|
AirbnbSelect,
|
|
20016
19966
|
{
|
|
20017
19967
|
ref,
|
|
@@ -20040,7 +19990,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20040
19990
|
onClick,
|
|
20041
19991
|
onKeyDown,
|
|
20042
19992
|
valueLabel
|
|
20043
|
-
}) => /* @__PURE__ */ (0,
|
|
19993
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
|
|
20044
19994
|
"button",
|
|
20045
19995
|
{
|
|
20046
19996
|
id,
|
|
@@ -20061,9 +20011,9 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20061
20011
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
20062
20012
|
),
|
|
20063
20013
|
children: [
|
|
20064
|
-
/* @__PURE__ */ (0,
|
|
20065
|
-
/* @__PURE__ */ (0,
|
|
20066
|
-
|
|
20014
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)("span", { children: valueLabel ?? codePlaceholder }),
|
|
20015
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
20016
|
+
import_lucide_react57.ChevronDown,
|
|
20067
20017
|
{
|
|
20068
20018
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
20069
20019
|
strokeWidth: 2
|
|
@@ -20074,7 +20024,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20074
20024
|
)
|
|
20075
20025
|
}
|
|
20076
20026
|
),
|
|
20077
|
-
/* @__PURE__ */ (0,
|
|
20027
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
20078
20028
|
AirbnbInput,
|
|
20079
20029
|
{
|
|
20080
20030
|
id: inputId,
|
|
@@ -20103,18 +20053,18 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
20103
20053
|
}
|
|
20104
20054
|
)
|
|
20105
20055
|
] }),
|
|
20106
|
-
error && /* @__PURE__ */ (0,
|
|
20056
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(FieldErrorMessage, { message: error })
|
|
20107
20057
|
] });
|
|
20108
20058
|
}
|
|
20109
20059
|
);
|
|
20110
20060
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
20111
20061
|
|
|
20112
20062
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
20113
|
-
var
|
|
20114
|
-
var
|
|
20063
|
+
var React80 = __toESM(require("react"), 1);
|
|
20064
|
+
var import_lucide_react58 = require("lucide-react");
|
|
20115
20065
|
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
20116
20066
|
var import_react90 = require("react");
|
|
20117
|
-
var
|
|
20067
|
+
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
20118
20068
|
var ROW_HEIGHT = 48;
|
|
20119
20069
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
20120
20070
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -20154,13 +20104,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20154
20104
|
loadingMessage
|
|
20155
20105
|
}, ref) => {
|
|
20156
20106
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
20157
|
-
const reactId =
|
|
20158
|
-
const [open, setOpen] =
|
|
20159
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
20160
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
20161
|
-
const containerRef =
|
|
20162
|
-
const triggerRef =
|
|
20163
|
-
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);
|
|
20164
20114
|
const listboxId = `${reactId}-listbox`;
|
|
20165
20115
|
const labelId = `${reactId}-label`;
|
|
20166
20116
|
const valueId = `${reactId}-value`;
|
|
@@ -20169,13 +20119,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20169
20119
|
const searchInputId = `${reactId}-search`;
|
|
20170
20120
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
20171
20121
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
20172
|
-
const visibleOptions =
|
|
20122
|
+
const visibleOptions = React80.useMemo(() => {
|
|
20173
20123
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
20174
20124
|
return options;
|
|
20175
20125
|
}
|
|
20176
20126
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
20177
20127
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
20178
|
-
const selectedIndex =
|
|
20128
|
+
const selectedIndex = React80.useMemo(
|
|
20179
20129
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
20180
20130
|
[value?.value, visibleOptions]
|
|
20181
20131
|
);
|
|
@@ -20201,7 +20151,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20201
20151
|
},
|
|
20202
20152
|
[handleOnOpenChange]
|
|
20203
20153
|
);
|
|
20204
|
-
|
|
20154
|
+
React80.useEffect(() => {
|
|
20205
20155
|
if (isBlocked) {
|
|
20206
20156
|
setSelectOpen(false);
|
|
20207
20157
|
return;
|
|
@@ -20214,7 +20164,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20214
20164
|
window.cancelAnimationFrame(frameId);
|
|
20215
20165
|
};
|
|
20216
20166
|
}, [isBlocked, open, setSelectOpen]);
|
|
20217
|
-
|
|
20167
|
+
React80.useEffect(() => {
|
|
20218
20168
|
if (!open) {
|
|
20219
20169
|
setHighlightedIndex(-1);
|
|
20220
20170
|
return;
|
|
@@ -20282,7 +20232,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20282
20232
|
}
|
|
20283
20233
|
}
|
|
20284
20234
|
}
|
|
20285
|
-
const content = /* @__PURE__ */ (0,
|
|
20235
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20286
20236
|
AirbnbSearchableSelectContent,
|
|
20287
20237
|
{
|
|
20288
20238
|
inputId: searchInputId,
|
|
@@ -20309,10 +20259,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20309
20259
|
onOptionHover: setHighlightedIndex
|
|
20310
20260
|
}
|
|
20311
20261
|
);
|
|
20312
|
-
|
|
20313
|
-
return /* @__PURE__ */ (0,
|
|
20314
|
-
name && /* @__PURE__ */ (0,
|
|
20315
|
-
/* @__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)(
|
|
20316
20266
|
AirbnbFieldTrigger,
|
|
20317
20267
|
{
|
|
20318
20268
|
id: `${reactId}-trigger`,
|
|
@@ -20346,8 +20296,8 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20346
20296
|
},
|
|
20347
20297
|
onKeyDown: handleTriggerKeyDown,
|
|
20348
20298
|
onBlur,
|
|
20349
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
20350
|
-
|
|
20299
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20300
|
+
import_lucide_react58.ChevronDown,
|
|
20351
20301
|
{
|
|
20352
20302
|
className: cn(
|
|
20353
20303
|
"h-6 w-6 text-[#1F1F1B] transition-transform",
|
|
@@ -20357,7 +20307,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20357
20307
|
)
|
|
20358
20308
|
}
|
|
20359
20309
|
),
|
|
20360
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
20310
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20361
20311
|
Drawer,
|
|
20362
20312
|
{
|
|
20363
20313
|
open,
|
|
@@ -20369,13 +20319,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20369
20319
|
}
|
|
20370
20320
|
closeSelect();
|
|
20371
20321
|
},
|
|
20372
|
-
children: /* @__PURE__ */ (0,
|
|
20373
|
-
/* @__PURE__ */ (0,
|
|
20374
|
-
/* @__PURE__ */ (0,
|
|
20375
|
-
/* @__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 })
|
|
20376
20326
|
] })
|
|
20377
20327
|
}
|
|
20378
|
-
) : open ? /* @__PURE__ */ (0,
|
|
20328
|
+
) : open ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20379
20329
|
"div",
|
|
20380
20330
|
{
|
|
20381
20331
|
className: cn(
|
|
@@ -20387,7 +20337,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20387
20337
|
) : null
|
|
20388
20338
|
] });
|
|
20389
20339
|
};
|
|
20390
|
-
var AirbnbSearchableSelect =
|
|
20340
|
+
var AirbnbSearchableSelect = React80.forwardRef(
|
|
20391
20341
|
AirbnbSearchableSelectInternal
|
|
20392
20342
|
);
|
|
20393
20343
|
function AirbnbSearchableSelectContent({
|
|
@@ -20414,9 +20364,9 @@ function AirbnbSearchableSelectContent({
|
|
|
20414
20364
|
onOptionClick,
|
|
20415
20365
|
onOptionHover
|
|
20416
20366
|
}) {
|
|
20417
|
-
const listRef =
|
|
20418
|
-
const lastLoadMoreOptionsLengthRef =
|
|
20419
|
-
const previousHighlightedIndexRef =
|
|
20367
|
+
const listRef = React80.useRef(null);
|
|
20368
|
+
const lastLoadMoreOptionsLengthRef = React80.useRef(null);
|
|
20369
|
+
const previousHighlightedIndexRef = React80.useRef(highlightedIndex);
|
|
20420
20370
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
20421
20371
|
const virtualizer = (0, import_react_virtual3.useVirtualizer)({
|
|
20422
20372
|
count: rowCount,
|
|
@@ -20427,7 +20377,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20427
20377
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20428
20378
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20429
20379
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20430
|
-
|
|
20380
|
+
React80.useEffect(() => {
|
|
20431
20381
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20432
20382
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20433
20383
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20435,23 +20385,23 @@ function AirbnbSearchableSelectContent({
|
|
|
20435
20385
|
onLoadMore?.();
|
|
20436
20386
|
}
|
|
20437
20387
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20438
|
-
|
|
20388
|
+
React80.useEffect(() => {
|
|
20439
20389
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20440
20390
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20441
20391
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
20442
20392
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
20443
20393
|
}
|
|
20444
20394
|
}, [highlightedIndex, virtualizer]);
|
|
20445
|
-
return /* @__PURE__ */ (0,
|
|
20446
|
-
/* @__PURE__ */ (0,
|
|
20447
|
-
/* @__PURE__ */ (0,
|
|
20448
|
-
|
|
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,
|
|
20449
20399
|
{
|
|
20450
20400
|
"aria-hidden": "true",
|
|
20451
20401
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
20452
20402
|
}
|
|
20453
20403
|
),
|
|
20454
|
-
/* @__PURE__ */ (0,
|
|
20404
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20455
20405
|
"input",
|
|
20456
20406
|
{
|
|
20457
20407
|
id: inputId,
|
|
@@ -20470,7 +20420,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20470
20420
|
}
|
|
20471
20421
|
)
|
|
20472
20422
|
] }),
|
|
20473
|
-
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)(
|
|
20474
20424
|
"div",
|
|
20475
20425
|
{
|
|
20476
20426
|
id: listboxId,
|
|
@@ -20479,7 +20429,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20479
20429
|
"aria-labelledby": labelId,
|
|
20480
20430
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
20481
20431
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
20482
|
-
children: /* @__PURE__ */ (0,
|
|
20432
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20483
20433
|
"div",
|
|
20484
20434
|
{
|
|
20485
20435
|
className: "relative w-full",
|
|
@@ -20487,7 +20437,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20487
20437
|
children: virtualItems.map((virtualItem) => {
|
|
20488
20438
|
const option = options[virtualItem.index];
|
|
20489
20439
|
if (!option) {
|
|
20490
|
-
return /* @__PURE__ */ (0,
|
|
20440
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20491
20441
|
"div",
|
|
20492
20442
|
{
|
|
20493
20443
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -20502,7 +20452,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20502
20452
|
}
|
|
20503
20453
|
const isSelected = value?.value === option.value;
|
|
20504
20454
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
20505
|
-
return /* @__PURE__ */ (0,
|
|
20455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20506
20456
|
"button",
|
|
20507
20457
|
{
|
|
20508
20458
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -20524,7 +20474,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20524
20474
|
height: `${virtualItem.size}px`,
|
|
20525
20475
|
transform: `translateY(${virtualItem.start}px)`
|
|
20526
20476
|
},
|
|
20527
|
-
children: /* @__PURE__ */ (0,
|
|
20477
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("span", { className: "truncate text-center", children: String(option.label) })
|
|
20528
20478
|
},
|
|
20529
20479
|
`${String(option.value)}-${virtualItem.index}`
|
|
20530
20480
|
);
|
|
@@ -20553,16 +20503,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20553
20503
|
}
|
|
20554
20504
|
|
|
20555
20505
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20556
|
-
var
|
|
20506
|
+
var React81 = __toESM(require("react"), 1);
|
|
20557
20507
|
var import_react_i18next44 = require("react-i18next");
|
|
20558
|
-
var
|
|
20559
|
-
var
|
|
20560
|
-
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) => {
|
|
20561
20511
|
const { t } = (0, import_react_i18next44.useTranslation)();
|
|
20562
20512
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20563
|
-
return /* @__PURE__ */ (0,
|
|
20564
|
-
/* @__PURE__ */ (0,
|
|
20565
|
-
/* @__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)(
|
|
20566
20516
|
"input",
|
|
20567
20517
|
{
|
|
20568
20518
|
...props,
|
|
@@ -20581,13 +20531,13 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20581
20531
|
)
|
|
20582
20532
|
}
|
|
20583
20533
|
),
|
|
20584
|
-
onReset && /* @__PURE__ */ (0,
|
|
20534
|
+
onReset && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20585
20535
|
Button,
|
|
20586
20536
|
{
|
|
20587
20537
|
variant: "ghost",
|
|
20588
20538
|
onClick: onReset,
|
|
20589
20539
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
20590
|
-
children: /* @__PURE__ */ (0,
|
|
20540
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_lucide_react59.X, { className: "h-5 w-5" })
|
|
20591
20541
|
}
|
|
20592
20542
|
)
|
|
20593
20543
|
] });
|
|
@@ -20595,11 +20545,11 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20595
20545
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20596
20546
|
|
|
20597
20547
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20598
|
-
var
|
|
20548
|
+
var React82 = __toESM(require("react"), 1);
|
|
20599
20549
|
var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
|
|
20600
|
-
var
|
|
20601
|
-
var
|
|
20602
|
-
var AirbnbSwitch =
|
|
20550
|
+
var import_lucide_react60 = require("lucide-react");
|
|
20551
|
+
var import_jsx_runtime195 = require("react/jsx-runtime");
|
|
20552
|
+
var AirbnbSwitch = React82.forwardRef(
|
|
20603
20553
|
({
|
|
20604
20554
|
className,
|
|
20605
20555
|
value,
|
|
@@ -20613,9 +20563,9 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20613
20563
|
wrapperClassName,
|
|
20614
20564
|
...props
|
|
20615
20565
|
}, ref) => {
|
|
20616
|
-
const generatedId =
|
|
20566
|
+
const generatedId = React82.useId();
|
|
20617
20567
|
const fieldId = id || generatedId;
|
|
20618
|
-
const switchElement = /* @__PURE__ */ (0,
|
|
20568
|
+
const switchElement = /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20619
20569
|
SwitchPrimitives2.Root,
|
|
20620
20570
|
{
|
|
20621
20571
|
ref,
|
|
@@ -20635,15 +20585,15 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20635
20585
|
"aria-busy": loading,
|
|
20636
20586
|
"aria-readonly": readOnly,
|
|
20637
20587
|
...props,
|
|
20638
|
-
children: /* @__PURE__ */ (0,
|
|
20588
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20639
20589
|
SwitchPrimitives2.Thumb,
|
|
20640
20590
|
{
|
|
20641
20591
|
className: cn(
|
|
20642
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",
|
|
20643
20593
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
20644
20594
|
),
|
|
20645
|
-
children: /* @__PURE__ */ (0,
|
|
20646
|
-
|
|
20595
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20596
|
+
import_lucide_react60.Check,
|
|
20647
20597
|
{
|
|
20648
20598
|
"aria-hidden": "true",
|
|
20649
20599
|
className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
|
|
@@ -20657,10 +20607,10 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20657
20607
|
if (!label && !error) {
|
|
20658
20608
|
return switchElement;
|
|
20659
20609
|
}
|
|
20660
|
-
return /* @__PURE__ */ (0,
|
|
20661
|
-
/* @__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: [
|
|
20662
20612
|
switchElement,
|
|
20663
|
-
label && /* @__PURE__ */ (0,
|
|
20613
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20664
20614
|
Label,
|
|
20665
20615
|
{
|
|
20666
20616
|
htmlFor: fieldId,
|
|
@@ -20672,7 +20622,7 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20672
20622
|
}
|
|
20673
20623
|
)
|
|
20674
20624
|
] }),
|
|
20675
|
-
error && /* @__PURE__ */ (0,
|
|
20625
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(ErrorMessage, { disabled, children: error })
|
|
20676
20626
|
] });
|
|
20677
20627
|
}
|
|
20678
20628
|
);
|
|
@@ -20979,6 +20929,7 @@ AirbnbSwitch.displayName = "AirbnbSwitch";
|
|
|
20979
20929
|
VerticalTabs,
|
|
20980
20930
|
VideoModal,
|
|
20981
20931
|
VideoPlayer,
|
|
20932
|
+
VisualCheckbox,
|
|
20982
20933
|
Webcam,
|
|
20983
20934
|
WideButton,
|
|
20984
20935
|
addSupportEmailToMessage,
|