@chekinapp/ui 0.0.132 → 0.0.134
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 +421 -330
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +421 -330
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -13591,7 +13591,21 @@ function useSelectState(params) {
|
|
|
13591
13591
|
);
|
|
13592
13592
|
return !existsInOptions && !existsInSelected;
|
|
13593
13593
|
}, [isCreatable, trimmedInput, isValidNewOption, options, selectedOptions]);
|
|
13594
|
+
const sssDebugHighlightCount = React48.useRef(0);
|
|
13594
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
|
+
}
|
|
13595
13609
|
if (!isOpen || filteredOptions.length === 0) {
|
|
13596
13610
|
setHighlightedIndex(-1);
|
|
13597
13611
|
return;
|
|
@@ -13617,8 +13631,21 @@ function useSelectState(params) {
|
|
|
13617
13631
|
(option) => isOptionSelected2(option, selectedOptions),
|
|
13618
13632
|
[isOptionSelected2, selectedOptions]
|
|
13619
13633
|
);
|
|
13634
|
+
const sssDebugSelectOptionCount = React48.useRef(0);
|
|
13620
13635
|
const selectOption = React48.useCallback(
|
|
13621
13636
|
(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
|
+
}
|
|
13622
13649
|
if (!isOptionEnabled(option, isOptionDisabled)) return;
|
|
13623
13650
|
if (isMulti) {
|
|
13624
13651
|
const exists = isValueSelected(option);
|
|
@@ -15078,16 +15105,80 @@ var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiS
|
|
|
15078
15105
|
});
|
|
15079
15106
|
|
|
15080
15107
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15081
|
-
var
|
|
15108
|
+
var React59 = __toESM(require("react"), 1);
|
|
15082
15109
|
var import_react_i18next36 = require("react-i18next");
|
|
15083
15110
|
|
|
15111
|
+
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
15112
|
+
var import_jsx_runtime165 = require("react/jsx-runtime");
|
|
15113
|
+
function SelectCheckboxOption(props) {
|
|
15114
|
+
const {
|
|
15115
|
+
option,
|
|
15116
|
+
index,
|
|
15117
|
+
isSelected,
|
|
15118
|
+
isHighlighted,
|
|
15119
|
+
isDisabled,
|
|
15120
|
+
id,
|
|
15121
|
+
onClick,
|
|
15122
|
+
onHover,
|
|
15123
|
+
innerRef
|
|
15124
|
+
} = props;
|
|
15125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)(
|
|
15126
|
+
"button",
|
|
15127
|
+
{
|
|
15128
|
+
id,
|
|
15129
|
+
ref: innerRef,
|
|
15130
|
+
type: "button",
|
|
15131
|
+
role: "option",
|
|
15132
|
+
"aria-selected": isSelected,
|
|
15133
|
+
"aria-disabled": isDisabled,
|
|
15134
|
+
tabIndex: -1,
|
|
15135
|
+
disabled: isDisabled,
|
|
15136
|
+
onClick: () => onClick(option),
|
|
15137
|
+
onMouseMove: () => onHover(index),
|
|
15138
|
+
className: cn(
|
|
15139
|
+
"flex w-full items-center gap-3 rounded-md border-0 bg-transparent px-3 py-2 text-left text-[15px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100",
|
|
15140
|
+
!isDisabled && "cursor-pointer hover:bg-[var(--chekin-color-surface-pressed)]",
|
|
15141
|
+
isHighlighted && !isDisabled && "bg-[var(--chekin-color-surface-pressed)]",
|
|
15142
|
+
isSelected && "bg-[var(--chekin-color-surface-autocomplete)] font-semibold text-[var(--chekin-color-brand-blue)]",
|
|
15143
|
+
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
15144
|
+
),
|
|
15145
|
+
children: [
|
|
15146
|
+
/* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
|
|
15147
|
+
BaseCheckbox,
|
|
15148
|
+
{
|
|
15149
|
+
checked: isSelected,
|
|
15150
|
+
disabled: isDisabled,
|
|
15151
|
+
size: "s",
|
|
15152
|
+
tabIndex: -1,
|
|
15153
|
+
className: "pointer-events-none shrink-0"
|
|
15154
|
+
}
|
|
15155
|
+
),
|
|
15156
|
+
/* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
15157
|
+
/* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { className: "block break-words", children: option.label }),
|
|
15158
|
+
option.description && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
15159
|
+
] })
|
|
15160
|
+
]
|
|
15161
|
+
}
|
|
15162
|
+
);
|
|
15163
|
+
}
|
|
15164
|
+
|
|
15084
15165
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
15166
|
+
var React58 = __toESM(require("react"), 1);
|
|
15085
15167
|
var import_lucide_react48 = require("lucide-react");
|
|
15086
15168
|
var import_react_i18next35 = require("react-i18next");
|
|
15087
|
-
var
|
|
15169
|
+
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
15088
15170
|
function createCountTrigger(opts) {
|
|
15089
|
-
const {
|
|
15171
|
+
const { getValueText, getTotalCount } = opts;
|
|
15090
15172
|
function CountTrigger(props) {
|
|
15173
|
+
const ctDebugRenderCount = React58.useRef(0);
|
|
15174
|
+
ctDebugRenderCount.current += 1;
|
|
15175
|
+
React58.useEffect(() => {
|
|
15176
|
+
console.log("[SC-debug] CountTrigger MOUNTED");
|
|
15177
|
+
return () => {
|
|
15178
|
+
console.log("[SC-debug] CountTrigger UNMOUNTED");
|
|
15179
|
+
};
|
|
15180
|
+
}, []);
|
|
15181
|
+
console.log(`[SC-debug] CountTrigger render #${ctDebugRenderCount.current}`);
|
|
15091
15182
|
const { t } = (0, import_react_i18next35.useTranslation)();
|
|
15092
15183
|
const {
|
|
15093
15184
|
triggerId,
|
|
@@ -15107,12 +15198,14 @@ function createCountTrigger(opts) {
|
|
|
15107
15198
|
onTriggerFocus,
|
|
15108
15199
|
leftIcon
|
|
15109
15200
|
} = props;
|
|
15201
|
+
const valueText = getValueText();
|
|
15202
|
+
const totalCount = getTotalCount();
|
|
15110
15203
|
const count = selectedOptions.length;
|
|
15111
15204
|
const total = totalCount ?? count;
|
|
15112
15205
|
const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
|
|
15113
15206
|
const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
|
|
15114
15207
|
const isEmpty = !hasValue;
|
|
15115
|
-
return /* @__PURE__ */ (0,
|
|
15208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
|
|
15116
15209
|
"button",
|
|
15117
15210
|
{
|
|
15118
15211
|
id: triggerId,
|
|
@@ -15135,9 +15228,9 @@ function createCountTrigger(opts) {
|
|
|
15135
15228
|
loading && "!cursor-progress"
|
|
15136
15229
|
),
|
|
15137
15230
|
children: [
|
|
15138
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
15139
|
-
/* @__PURE__ */ (0,
|
|
15140
|
-
/* @__PURE__ */ (0,
|
|
15231
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime166.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_runtime166.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
15232
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
15233
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
|
|
15141
15234
|
import_lucide_react48.ChevronDown,
|
|
15142
15235
|
{
|
|
15143
15236
|
size: 16,
|
|
@@ -15155,9 +15248,9 @@ function createCountTrigger(opts) {
|
|
|
15155
15248
|
}
|
|
15156
15249
|
|
|
15157
15250
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
15158
|
-
var
|
|
15251
|
+
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
15159
15252
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
15160
|
-
return /* @__PURE__ */ (0,
|
|
15253
|
+
return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
|
|
15161
15254
|
"button",
|
|
15162
15255
|
{
|
|
15163
15256
|
type: "button",
|
|
@@ -15168,7 +15261,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15168
15261
|
disabled && "cursor-default opacity-40"
|
|
15169
15262
|
),
|
|
15170
15263
|
children: [
|
|
15171
|
-
/* @__PURE__ */ (0,
|
|
15264
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
15172
15265
|
BaseCheckbox,
|
|
15173
15266
|
{
|
|
15174
15267
|
checked,
|
|
@@ -15178,20 +15271,20 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15178
15271
|
className: "pointer-events-none shrink-0"
|
|
15179
15272
|
}
|
|
15180
15273
|
),
|
|
15181
|
-
/* @__PURE__ */ (0,
|
|
15274
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "flex-1", children: label })
|
|
15182
15275
|
]
|
|
15183
15276
|
}
|
|
15184
15277
|
);
|
|
15185
15278
|
}
|
|
15186
15279
|
|
|
15187
15280
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15188
|
-
var
|
|
15281
|
+
var import_jsx_runtime168 = require("react/jsx-runtime");
|
|
15189
15282
|
function hasPaginationProps(props) {
|
|
15190
15283
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
|
|
15191
15284
|
}
|
|
15192
15285
|
function makeTriggerSlot(render) {
|
|
15193
15286
|
function CustomTrigger(props) {
|
|
15194
|
-
return /* @__PURE__ */ (0,
|
|
15287
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(import_jsx_runtime168.Fragment, { children: render(props.isOpen, props.onContainerClick) });
|
|
15195
15288
|
}
|
|
15196
15289
|
return CustomTrigger;
|
|
15197
15290
|
}
|
|
@@ -15217,25 +15310,64 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15217
15310
|
const isPaginated = hasPaginationProps(
|
|
15218
15311
|
paginationAndRest
|
|
15219
15312
|
);
|
|
15220
|
-
const
|
|
15313
|
+
const scDebugRenderCount = React59.useRef(0);
|
|
15314
|
+
const scDebugPrevPropsRef = React59.useRef({});
|
|
15315
|
+
scDebugRenderCount.current += 1;
|
|
15316
|
+
{
|
|
15317
|
+
const current = {
|
|
15318
|
+
value,
|
|
15319
|
+
defaultValue,
|
|
15320
|
+
onChange,
|
|
15321
|
+
trigger,
|
|
15322
|
+
userComponents,
|
|
15323
|
+
valueText,
|
|
15324
|
+
filterOption,
|
|
15325
|
+
rawOptions,
|
|
15326
|
+
onSearchChange
|
|
15327
|
+
};
|
|
15328
|
+
const prev = scDebugPrevPropsRef.current;
|
|
15329
|
+
const changed = [];
|
|
15330
|
+
for (const key of Object.keys(current)) {
|
|
15331
|
+
if (prev[key] !== current[key]) changed.push(key);
|
|
15332
|
+
}
|
|
15333
|
+
console.log(
|
|
15334
|
+
`[SC-debug] SelectCheckboxes render #${scDebugRenderCount.current}`,
|
|
15335
|
+
{ changed, isPaginated, isControlled: value !== void 0 }
|
|
15336
|
+
);
|
|
15337
|
+
scDebugPrevPropsRef.current = current;
|
|
15338
|
+
if (scDebugRenderCount.current === 30) {
|
|
15339
|
+
console.warn(
|
|
15340
|
+
"[SC-debug] hit 30 renders of SelectCheckboxes \u2014 opening debugger"
|
|
15341
|
+
);
|
|
15342
|
+
debugger;
|
|
15343
|
+
}
|
|
15344
|
+
}
|
|
15345
|
+
const [inputValue, setInputValue] = React59.useState("");
|
|
15221
15346
|
const isControlled = value !== void 0;
|
|
15222
|
-
const [internalValue, setInternalValue] =
|
|
15347
|
+
const [internalValue, setInternalValue] = React59.useState(
|
|
15223
15348
|
() => defaultValue ?? []
|
|
15224
15349
|
);
|
|
15225
15350
|
const currentValue = isControlled ? value : internalValue;
|
|
15226
|
-
const selected =
|
|
15227
|
-
const
|
|
15351
|
+
const selected = React59.useMemo(() => currentValue ?? [], [currentValue]);
|
|
15352
|
+
const scDebugHandleChangeCount = React59.useRef(0);
|
|
15353
|
+
const handleChange = React59.useCallback(
|
|
15228
15354
|
(next, meta) => {
|
|
15355
|
+
scDebugHandleChangeCount.current += 1;
|
|
15356
|
+
console.log(
|
|
15357
|
+
`[SC-debug] handleChange #${scDebugHandleChangeCount.current}`,
|
|
15358
|
+
{ action: meta?.action, nextLength: next.length, isControlled }
|
|
15359
|
+
);
|
|
15360
|
+
console.trace("[SC-debug] handleChange caller stack");
|
|
15229
15361
|
if (!isControlled) setInternalValue(next);
|
|
15230
15362
|
onChange?.(next, meta);
|
|
15231
15363
|
},
|
|
15232
15364
|
[isControlled, onChange]
|
|
15233
15365
|
);
|
|
15234
|
-
const flatRawOptions =
|
|
15366
|
+
const flatRawOptions = React59.useMemo(
|
|
15235
15367
|
() => flattenGroupedOptions(rawOptions),
|
|
15236
15368
|
[rawOptions]
|
|
15237
15369
|
);
|
|
15238
|
-
const filteredGrouped =
|
|
15370
|
+
const filteredGrouped = React59.useMemo(() => {
|
|
15239
15371
|
const trimmed = inputValue.trim();
|
|
15240
15372
|
if (!trimmed) return rawOptions;
|
|
15241
15373
|
return rawOptions.map((item) => {
|
|
@@ -15246,7 +15378,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15246
15378
|
return filterOption(item, trimmed) ? item : null;
|
|
15247
15379
|
}).filter((item) => item !== null);
|
|
15248
15380
|
}, [rawOptions, inputValue, filterOption]);
|
|
15249
|
-
const filteredFlat =
|
|
15381
|
+
const filteredFlat = React59.useMemo(
|
|
15250
15382
|
() => flattenGroupedOptions(filteredGrouped),
|
|
15251
15383
|
[filteredGrouped]
|
|
15252
15384
|
);
|
|
@@ -15254,7 +15386,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15254
15386
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
15255
15387
|
}, 0);
|
|
15256
15388
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
15257
|
-
const handleToggleAll =
|
|
15389
|
+
const handleToggleAll = React59.useCallback(() => {
|
|
15258
15390
|
if (allVisibleSelected) {
|
|
15259
15391
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
15260
15392
|
handleChange(
|
|
@@ -15269,14 +15401,27 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15269
15401
|
}
|
|
15270
15402
|
handleChange(merged, { action: "select" });
|
|
15271
15403
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
15272
|
-
const
|
|
15404
|
+
const valueTextRef = React59.useRef(valueText);
|
|
15405
|
+
const totalCountRef = React59.useRef(flatRawOptions.length);
|
|
15406
|
+
valueTextRef.current = valueText;
|
|
15407
|
+
totalCountRef.current = flatRawOptions.length;
|
|
15408
|
+
const Control = React59.useMemo(() => {
|
|
15409
|
+
console.log("[SC-debug] (re)creating Control component", { hasCustomTrigger: !!trigger });
|
|
15273
15410
|
if (trigger) return makeTriggerSlot(trigger);
|
|
15274
15411
|
return createCountTrigger({
|
|
15275
|
-
|
|
15276
|
-
|
|
15412
|
+
getValueText: () => valueTextRef.current,
|
|
15413
|
+
getTotalCount: () => totalCountRef.current
|
|
15277
15414
|
});
|
|
15278
|
-
}, [trigger
|
|
15279
|
-
const
|
|
15415
|
+
}, [trigger]);
|
|
15416
|
+
const components = React59.useMemo(
|
|
15417
|
+
() => ({
|
|
15418
|
+
...userComponents,
|
|
15419
|
+
Control,
|
|
15420
|
+
Option: userComponents?.Option ?? SelectCheckboxOption
|
|
15421
|
+
}),
|
|
15422
|
+
[userComponents, Control]
|
|
15423
|
+
);
|
|
15424
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15280
15425
|
SelectAllRow,
|
|
15281
15426
|
{
|
|
15282
15427
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -15284,7 +15429,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15284
15429
|
onToggle: handleToggleAll
|
|
15285
15430
|
}
|
|
15286
15431
|
) : void 0;
|
|
15287
|
-
const handleInputChange =
|
|
15432
|
+
const handleInputChange = React59.useCallback(
|
|
15288
15433
|
(next) => {
|
|
15289
15434
|
setInputValue(next);
|
|
15290
15435
|
onSearchChange?.(next);
|
|
@@ -15296,7 +15441,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15296
15441
|
value: currentValue,
|
|
15297
15442
|
onChange: handleChange,
|
|
15298
15443
|
filterOption: passthroughFilter2,
|
|
15299
|
-
|
|
15444
|
+
components,
|
|
15300
15445
|
closeMenuOnSelect,
|
|
15301
15446
|
searchPosition: searchable ? "dropdown" : "trigger",
|
|
15302
15447
|
searchable,
|
|
@@ -15305,7 +15450,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15305
15450
|
isMulti: true
|
|
15306
15451
|
};
|
|
15307
15452
|
if (isPaginated) {
|
|
15308
|
-
return /* @__PURE__ */ (0,
|
|
15453
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15309
15454
|
InfiniteScrollSelect,
|
|
15310
15455
|
{
|
|
15311
15456
|
ref,
|
|
@@ -15316,7 +15461,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15316
15461
|
}
|
|
15317
15462
|
);
|
|
15318
15463
|
}
|
|
15319
|
-
return /* @__PURE__ */ (0,
|
|
15464
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15320
15465
|
Select,
|
|
15321
15466
|
{
|
|
15322
15467
|
ref,
|
|
@@ -15327,70 +15472,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15327
15472
|
}
|
|
15328
15473
|
);
|
|
15329
15474
|
}
|
|
15330
|
-
var SelectCheckboxes =
|
|
15475
|
+
var SelectCheckboxes = React59.forwardRef(
|
|
15331
15476
|
SelectCheckboxesInternal
|
|
15332
15477
|
);
|
|
15333
15478
|
|
|
15334
|
-
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
15335
|
-
var import_jsx_runtime168 = require("react/jsx-runtime");
|
|
15336
|
-
function SelectCheckboxOption(props) {
|
|
15337
|
-
const {
|
|
15338
|
-
option,
|
|
15339
|
-
index,
|
|
15340
|
-
isSelected,
|
|
15341
|
-
isHighlighted,
|
|
15342
|
-
isDisabled,
|
|
15343
|
-
id,
|
|
15344
|
-
onClick,
|
|
15345
|
-
onHover,
|
|
15346
|
-
innerRef
|
|
15347
|
-
} = props;
|
|
15348
|
-
return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
|
|
15349
|
-
"button",
|
|
15350
|
-
{
|
|
15351
|
-
id,
|
|
15352
|
-
ref: innerRef,
|
|
15353
|
-
type: "button",
|
|
15354
|
-
role: "option",
|
|
15355
|
-
"aria-selected": isSelected,
|
|
15356
|
-
"aria-disabled": isDisabled,
|
|
15357
|
-
tabIndex: -1,
|
|
15358
|
-
disabled: isDisabled,
|
|
15359
|
-
onClick: () => onClick(option),
|
|
15360
|
-
onMouseMove: () => onHover(index),
|
|
15361
|
-
className: cn(
|
|
15362
|
-
"flex w-full items-center gap-3 rounded-md border-0 bg-transparent px-3 py-2 text-left text-[15px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100",
|
|
15363
|
-
!isDisabled && "cursor-pointer hover:bg-[var(--chekin-color-surface-pressed)]",
|
|
15364
|
-
isHighlighted && !isDisabled && "bg-[var(--chekin-color-surface-pressed)]",
|
|
15365
|
-
isSelected && "bg-[var(--chekin-color-surface-autocomplete)] font-semibold text-[var(--chekin-color-brand-blue)]",
|
|
15366
|
-
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
15367
|
-
),
|
|
15368
|
-
children: [
|
|
15369
|
-
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15370
|
-
BaseCheckbox,
|
|
15371
|
-
{
|
|
15372
|
-
checked: isSelected,
|
|
15373
|
-
disabled: isDisabled,
|
|
15374
|
-
size: "s",
|
|
15375
|
-
tabIndex: -1,
|
|
15376
|
-
className: "pointer-events-none shrink-0"
|
|
15377
|
-
}
|
|
15378
|
-
),
|
|
15379
|
-
/* @__PURE__ */ (0, import_jsx_runtime168.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
15380
|
-
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "block break-words", children: option.label }),
|
|
15381
|
-
option.description && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
15382
|
-
] })
|
|
15383
|
-
]
|
|
15384
|
-
}
|
|
15385
|
-
);
|
|
15386
|
-
}
|
|
15387
|
-
|
|
15388
15479
|
// src/dashboard/textarea/Textarea.tsx
|
|
15389
|
-
var
|
|
15480
|
+
var React61 = __toESM(require("react"), 1);
|
|
15390
15481
|
var import_react_i18next37 = require("react-i18next");
|
|
15391
15482
|
|
|
15392
15483
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15393
|
-
var
|
|
15484
|
+
var React60 = __toESM(require("react"), 1);
|
|
15394
15485
|
var isEmptyValue2 = (value) => {
|
|
15395
15486
|
if (value === void 0 || value === null) return true;
|
|
15396
15487
|
return String(value).length === 0;
|
|
@@ -15409,12 +15500,12 @@ function useTextareaValueState({
|
|
|
15409
15500
|
value,
|
|
15410
15501
|
defaultValue
|
|
15411
15502
|
}) {
|
|
15412
|
-
const textareaRef =
|
|
15503
|
+
const textareaRef = React60.useRef(null);
|
|
15413
15504
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15414
15505
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15415
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15506
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React60.useState(propsAreEmpty);
|
|
15416
15507
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15417
|
-
const setNativeValue =
|
|
15508
|
+
const setNativeValue = React60.useCallback(
|
|
15418
15509
|
(nextValue) => {
|
|
15419
15510
|
if (isControlled) return;
|
|
15420
15511
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15424,14 +15515,14 @@ function useTextareaValueState({
|
|
|
15424
15515
|
},
|
|
15425
15516
|
[isControlled]
|
|
15426
15517
|
);
|
|
15427
|
-
const syncValueState =
|
|
15518
|
+
const syncValueState = React60.useCallback(() => {
|
|
15428
15519
|
if (!textareaRef.current) return;
|
|
15429
15520
|
setNativeValue(textareaRef.current.value);
|
|
15430
15521
|
}, [setNativeValue]);
|
|
15431
|
-
|
|
15522
|
+
React60.useLayoutEffect(() => {
|
|
15432
15523
|
syncValueState();
|
|
15433
15524
|
});
|
|
15434
|
-
|
|
15525
|
+
React60.useEffect(() => {
|
|
15435
15526
|
const textarea = textareaRef.current;
|
|
15436
15527
|
const form = textarea?.form;
|
|
15437
15528
|
if (isControlled || !form) return;
|
|
@@ -15458,7 +15549,7 @@ function useTextareaValueState({
|
|
|
15458
15549
|
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
15459
15550
|
var LINE_HEIGHT = 20;
|
|
15460
15551
|
var VERTICAL_PADDING = 32;
|
|
15461
|
-
var Textarea =
|
|
15552
|
+
var Textarea = React61.forwardRef(function Textarea2({
|
|
15462
15553
|
className,
|
|
15463
15554
|
textareaClassName,
|
|
15464
15555
|
label,
|
|
@@ -15486,12 +15577,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15486
15577
|
}, ref) {
|
|
15487
15578
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15488
15579
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15489
|
-
const reactId =
|
|
15580
|
+
const reactId = React61.useId();
|
|
15490
15581
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15491
15582
|
const { t } = (0, import_react_i18next37.useTranslation)();
|
|
15492
15583
|
const isInvalid = Boolean(invalid || error);
|
|
15493
15584
|
const isBlocked = Boolean(disabled);
|
|
15494
|
-
const resize =
|
|
15585
|
+
const resize = React61.useCallback(() => {
|
|
15495
15586
|
const el = textareaRef.current;
|
|
15496
15587
|
if (!el || !autosize) return;
|
|
15497
15588
|
el.style.height = "auto";
|
|
@@ -15501,7 +15592,7 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15501
15592
|
el.style.height = `${nextHeight}px`;
|
|
15502
15593
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15503
15594
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15504
|
-
|
|
15595
|
+
React61.useLayoutEffect(() => {
|
|
15505
15596
|
resize();
|
|
15506
15597
|
}, [resize, value]);
|
|
15507
15598
|
const handleInput = (event) => {
|
|
@@ -15593,12 +15684,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15593
15684
|
});
|
|
15594
15685
|
|
|
15595
15686
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15596
|
-
var
|
|
15687
|
+
var React63 = __toESM(require("react"), 1);
|
|
15597
15688
|
var import_lucide_react49 = require("lucide-react");
|
|
15598
15689
|
var import_react_i18next38 = require("react-i18next");
|
|
15599
15690
|
|
|
15600
15691
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15601
|
-
var
|
|
15692
|
+
var React62 = __toESM(require("react"), 1);
|
|
15602
15693
|
|
|
15603
15694
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15604
15695
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15749,21 +15840,21 @@ function useDatePickerWheel({
|
|
|
15749
15840
|
minDate,
|
|
15750
15841
|
maxDate
|
|
15751
15842
|
}) {
|
|
15752
|
-
const years =
|
|
15753
|
-
const [draftDate, setDraftDate] =
|
|
15843
|
+
const years = React62.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15844
|
+
const [draftDate, setDraftDate] = React62.useState(
|
|
15754
15845
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15755
15846
|
);
|
|
15756
15847
|
const draftYear = draftDate.getFullYear();
|
|
15757
15848
|
const draftMonth = draftDate.getMonth();
|
|
15758
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15759
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15760
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15761
|
-
const monthListRef =
|
|
15762
|
-
const dayListRef =
|
|
15763
|
-
const yearListRef =
|
|
15764
|
-
const settleTimeoutsRef =
|
|
15765
|
-
const animationFramesRef =
|
|
15766
|
-
const columnRefs =
|
|
15849
|
+
const [monthScrollTop, setMonthScrollTop] = React62.useState(0);
|
|
15850
|
+
const [dayScrollTop, setDayScrollTop] = React62.useState(0);
|
|
15851
|
+
const [yearScrollTop, setYearScrollTop] = React62.useState(0);
|
|
15852
|
+
const monthListRef = React62.useRef(null);
|
|
15853
|
+
const dayListRef = React62.useRef(null);
|
|
15854
|
+
const yearListRef = React62.useRef(null);
|
|
15855
|
+
const settleTimeoutsRef = React62.useRef({});
|
|
15856
|
+
const animationFramesRef = React62.useRef({});
|
|
15857
|
+
const columnRefs = React62.useMemo(
|
|
15767
15858
|
() => ({
|
|
15768
15859
|
month: monthListRef,
|
|
15769
15860
|
day: dayListRef,
|
|
@@ -15771,7 +15862,7 @@ function useDatePickerWheel({
|
|
|
15771
15862
|
}),
|
|
15772
15863
|
[]
|
|
15773
15864
|
);
|
|
15774
|
-
const setColumnScrollTop =
|
|
15865
|
+
const setColumnScrollTop = React62.useCallback(
|
|
15775
15866
|
(column, nextScrollTop) => {
|
|
15776
15867
|
if (column === "month") {
|
|
15777
15868
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15785,19 +15876,19 @@ function useDatePickerWheel({
|
|
|
15785
15876
|
},
|
|
15786
15877
|
[]
|
|
15787
15878
|
);
|
|
15788
|
-
const clearSettleTimeout =
|
|
15879
|
+
const clearSettleTimeout = React62.useCallback((column) => {
|
|
15789
15880
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15790
15881
|
if (timeoutId === void 0) return;
|
|
15791
15882
|
window.clearTimeout(timeoutId);
|
|
15792
15883
|
delete settleTimeoutsRef.current[column];
|
|
15793
15884
|
}, []);
|
|
15794
|
-
const clearAnimationFrame =
|
|
15885
|
+
const clearAnimationFrame = React62.useCallback((column) => {
|
|
15795
15886
|
const frameId = animationFramesRef.current[column];
|
|
15796
15887
|
if (frameId === void 0) return;
|
|
15797
15888
|
window.cancelAnimationFrame(frameId);
|
|
15798
15889
|
delete animationFramesRef.current[column];
|
|
15799
15890
|
}, []);
|
|
15800
|
-
|
|
15891
|
+
React62.useEffect(
|
|
15801
15892
|
() => () => {
|
|
15802
15893
|
["month", "day", "year"].forEach((column) => {
|
|
15803
15894
|
clearSettleTimeout(column);
|
|
@@ -15806,22 +15897,22 @@ function useDatePickerWheel({
|
|
|
15806
15897
|
},
|
|
15807
15898
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15808
15899
|
);
|
|
15809
|
-
|
|
15900
|
+
React62.useEffect(() => {
|
|
15810
15901
|
if (isOpen) return;
|
|
15811
15902
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15812
15903
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15813
|
-
const months =
|
|
15904
|
+
const months = React62.useMemo(
|
|
15814
15905
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15815
15906
|
[draftYear, maxDate, minDate]
|
|
15816
15907
|
);
|
|
15817
|
-
const days =
|
|
15908
|
+
const days = React62.useMemo(
|
|
15818
15909
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15819
15910
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15820
15911
|
);
|
|
15821
15912
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15822
15913
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15823
15914
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15824
|
-
const syncScrollPositions =
|
|
15915
|
+
const syncScrollPositions = React62.useCallback(
|
|
15825
15916
|
(nextDate, behavior = "auto") => {
|
|
15826
15917
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15827
15918
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15845,7 +15936,7 @@ function useDatePickerWheel({
|
|
|
15845
15936
|
},
|
|
15846
15937
|
[maxDate, minDate, years]
|
|
15847
15938
|
);
|
|
15848
|
-
|
|
15939
|
+
React62.useLayoutEffect(() => {
|
|
15849
15940
|
if (!isOpen) return;
|
|
15850
15941
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15851
15942
|
setDraftDate(nextDate);
|
|
@@ -15856,7 +15947,7 @@ function useDatePickerWheel({
|
|
|
15856
15947
|
window.cancelAnimationFrame(frameId);
|
|
15857
15948
|
};
|
|
15858
15949
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15859
|
-
const updateDraftDate =
|
|
15950
|
+
const updateDraftDate = React62.useCallback(
|
|
15860
15951
|
(column, targetIndex, behavior = "smooth") => {
|
|
15861
15952
|
const currentDate = stripTime(draftDate);
|
|
15862
15953
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15901,7 +15992,7 @@ function useDatePickerWheel({
|
|
|
15901
15992
|
},
|
|
15902
15993
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15903
15994
|
);
|
|
15904
|
-
const settleColumnScroll =
|
|
15995
|
+
const settleColumnScroll = React62.useCallback(
|
|
15905
15996
|
(column) => {
|
|
15906
15997
|
const list = columnRefs[column].current;
|
|
15907
15998
|
if (!list) return;
|
|
@@ -15914,7 +16005,7 @@ function useDatePickerWheel({
|
|
|
15914
16005
|
},
|
|
15915
16006
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15916
16007
|
);
|
|
15917
|
-
const scheduleScrollSettle =
|
|
16008
|
+
const scheduleScrollSettle = React62.useCallback(
|
|
15918
16009
|
(column) => {
|
|
15919
16010
|
clearSettleTimeout(column);
|
|
15920
16011
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15923,7 +16014,7 @@ function useDatePickerWheel({
|
|
|
15923
16014
|
},
|
|
15924
16015
|
[clearSettleTimeout, settleColumnScroll]
|
|
15925
16016
|
);
|
|
15926
|
-
const handleColumnScroll =
|
|
16017
|
+
const handleColumnScroll = React62.useCallback(
|
|
15927
16018
|
(column) => {
|
|
15928
16019
|
const list = columnRefs[column].current;
|
|
15929
16020
|
if (!list) return;
|
|
@@ -15937,13 +16028,13 @@ function useDatePickerWheel({
|
|
|
15937
16028
|
},
|
|
15938
16029
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15939
16030
|
);
|
|
15940
|
-
const handleOptionSelect =
|
|
16031
|
+
const handleOptionSelect = React62.useCallback(
|
|
15941
16032
|
(column, targetIndex) => {
|
|
15942
16033
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15943
16034
|
},
|
|
15944
16035
|
[updateDraftDate]
|
|
15945
16036
|
);
|
|
15946
|
-
const focusAdjacentColumn =
|
|
16037
|
+
const focusAdjacentColumn = React62.useCallback(
|
|
15947
16038
|
(column, direction) => {
|
|
15948
16039
|
const order = ["month", "day", "year"];
|
|
15949
16040
|
const currentIndex = order.indexOf(column);
|
|
@@ -15953,7 +16044,7 @@ function useDatePickerWheel({
|
|
|
15953
16044
|
},
|
|
15954
16045
|
[columnRefs]
|
|
15955
16046
|
);
|
|
15956
|
-
const handleColumnKeyDown =
|
|
16047
|
+
const handleColumnKeyDown = React62.useCallback(
|
|
15957
16048
|
(column, event) => {
|
|
15958
16049
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15959
16050
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -16275,7 +16366,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
16275
16366
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
16276
16367
|
return new Date(yearNum, monthIndex, dayNum);
|
|
16277
16368
|
}
|
|
16278
|
-
var Datepicker =
|
|
16369
|
+
var Datepicker = React63.forwardRef(
|
|
16279
16370
|
function Datepicker2({
|
|
16280
16371
|
label,
|
|
16281
16372
|
value,
|
|
@@ -16308,14 +16399,14 @@ var Datepicker = React62.forwardRef(
|
|
|
16308
16399
|
maxDate,
|
|
16309
16400
|
formatValue
|
|
16310
16401
|
}, ref) {
|
|
16311
|
-
const containerRef =
|
|
16312
|
-
const dayInputRef =
|
|
16313
|
-
const monthInputRef =
|
|
16314
|
-
const monthListRef =
|
|
16315
|
-
const yearInputRef =
|
|
16316
|
-
const mobileTriggerRef =
|
|
16317
|
-
const wheelBaseId =
|
|
16318
|
-
const reactId =
|
|
16402
|
+
const containerRef = React63.useRef(null);
|
|
16403
|
+
const dayInputRef = React63.useRef(null);
|
|
16404
|
+
const monthInputRef = React63.useRef(null);
|
|
16405
|
+
const monthListRef = React63.useRef(null);
|
|
16406
|
+
const yearInputRef = React63.useRef(null);
|
|
16407
|
+
const mobileTriggerRef = React63.useRef(null);
|
|
16408
|
+
const wheelBaseId = React63.useId();
|
|
16409
|
+
const reactId = React63.useId();
|
|
16319
16410
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
16320
16411
|
const dayId = `${baseId}-day`;
|
|
16321
16412
|
const monthId = `${baseId}-month`;
|
|
@@ -16324,38 +16415,38 @@ var Datepicker = React62.forwardRef(
|
|
|
16324
16415
|
const errorId = `${baseId}-error`;
|
|
16325
16416
|
const { t, i18n } = (0, import_react_i18next38.useTranslation)();
|
|
16326
16417
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
16327
|
-
const resolvedMonthLabels =
|
|
16418
|
+
const resolvedMonthLabels = React63.useMemo(
|
|
16328
16419
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
16329
16420
|
[resolvedLocale, monthLabels]
|
|
16330
16421
|
);
|
|
16331
16422
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
16332
16423
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
16333
16424
|
const isControlled = value !== void 0;
|
|
16334
|
-
const initialParts =
|
|
16425
|
+
const initialParts = React63.useMemo(
|
|
16335
16426
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
16336
16427
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16337
16428
|
[]
|
|
16338
16429
|
);
|
|
16339
|
-
const [day, setDay] =
|
|
16340
|
-
const [monthIndex, setMonthIndex] =
|
|
16430
|
+
const [day, setDay] = React63.useState(initialParts.day);
|
|
16431
|
+
const [monthIndex, setMonthIndex] = React63.useState(
|
|
16341
16432
|
initialParts.monthIndex
|
|
16342
16433
|
);
|
|
16343
|
-
const [year, setYear] =
|
|
16344
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
16345
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
16346
|
-
const [focusedField, setFocusedField] =
|
|
16347
|
-
const [monthInputValue, setMonthInputValue] =
|
|
16348
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
16434
|
+
const [year, setYear] = React63.useState(initialParts.year);
|
|
16435
|
+
const [isMonthOpen, setIsMonthOpen] = React63.useState(false);
|
|
16436
|
+
const [isWheelOpen, setIsWheelOpen] = React63.useState(false);
|
|
16437
|
+
const [focusedField, setFocusedField] = React63.useState(null);
|
|
16438
|
+
const [monthInputValue, setMonthInputValue] = React63.useState("");
|
|
16439
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React63.useState(-1);
|
|
16349
16440
|
const isMobile3 = useIsMobile();
|
|
16350
|
-
const emitChangeRef =
|
|
16441
|
+
const emitChangeRef = React63.useRef(() => {
|
|
16351
16442
|
});
|
|
16352
|
-
const dayStateRef =
|
|
16353
|
-
const yearStateRef =
|
|
16354
|
-
const monthIndexRef =
|
|
16443
|
+
const dayStateRef = React63.useRef(day);
|
|
16444
|
+
const yearStateRef = React63.useRef(year);
|
|
16445
|
+
const monthIndexRef = React63.useRef(monthIndex);
|
|
16355
16446
|
dayStateRef.current = day;
|
|
16356
16447
|
yearStateRef.current = year;
|
|
16357
16448
|
monthIndexRef.current = monthIndex;
|
|
16358
|
-
|
|
16449
|
+
React63.useImperativeHandle(
|
|
16359
16450
|
ref,
|
|
16360
16451
|
() => ({
|
|
16361
16452
|
getDayValue: () => dayStateRef.current,
|
|
@@ -16373,27 +16464,27 @@ var Datepicker = React62.forwardRef(
|
|
|
16373
16464
|
}),
|
|
16374
16465
|
[]
|
|
16375
16466
|
);
|
|
16376
|
-
|
|
16467
|
+
React63.useEffect(() => {
|
|
16377
16468
|
if (!isControlled) return;
|
|
16378
16469
|
const next = partsFromDate(value ?? null);
|
|
16379
16470
|
setDay(next.day);
|
|
16380
16471
|
setMonthIndex(next.monthIndex);
|
|
16381
16472
|
setYear(next.year);
|
|
16382
16473
|
}, [isControlled, value]);
|
|
16383
|
-
|
|
16474
|
+
React63.useEffect(() => {
|
|
16384
16475
|
if (focusedField === "month") return;
|
|
16385
16476
|
setMonthInputValue(
|
|
16386
16477
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16387
16478
|
);
|
|
16388
16479
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16389
|
-
const filteredMonths =
|
|
16480
|
+
const filteredMonths = React63.useMemo(() => {
|
|
16390
16481
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16391
16482
|
const query = monthInputValue.trim().toLowerCase();
|
|
16392
16483
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16393
16484
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16394
16485
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16395
16486
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16396
|
-
|
|
16487
|
+
React63.useEffect(() => {
|
|
16397
16488
|
if (!isMonthOpen) {
|
|
16398
16489
|
setMonthHighlightIndex(-1);
|
|
16399
16490
|
return;
|
|
@@ -16414,7 +16505,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16414
16505
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16415
16506
|
const isInvalid = Boolean(invalid || error);
|
|
16416
16507
|
const wrapperWidth = toCssSize(width);
|
|
16417
|
-
const currentDate =
|
|
16508
|
+
const currentDate = React63.useMemo(
|
|
16418
16509
|
() => dateFromParts(day, monthIndex, year),
|
|
16419
16510
|
[day, monthIndex, year]
|
|
16420
16511
|
);
|
|
@@ -16423,7 +16514,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16423
16514
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16424
16515
|
isDisabled: !isMonthOpen || isMobile3
|
|
16425
16516
|
});
|
|
16426
|
-
const emitChange =
|
|
16517
|
+
const emitChange = React63.useCallback(
|
|
16427
16518
|
(nextDay, nextMonth, nextYear) => {
|
|
16428
16519
|
if (!onChange) return;
|
|
16429
16520
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16459,7 +16550,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16459
16550
|
setIsMonthOpen(true);
|
|
16460
16551
|
setMonthHighlightIndex(0);
|
|
16461
16552
|
};
|
|
16462
|
-
const commitMonthInput =
|
|
16553
|
+
const commitMonthInput = React63.useCallback(() => {
|
|
16463
16554
|
const query = monthInputValue.trim().toLowerCase();
|
|
16464
16555
|
if (!query) {
|
|
16465
16556
|
if (monthIndex !== null) {
|
|
@@ -16519,15 +16610,15 @@ var Datepicker = React62.forwardRef(
|
|
|
16519
16610
|
setIsMonthOpen(false);
|
|
16520
16611
|
}
|
|
16521
16612
|
};
|
|
16522
|
-
const focusDayInput =
|
|
16613
|
+
const focusDayInput = React63.useCallback(() => {
|
|
16523
16614
|
if (isBlocked || readOnly) return;
|
|
16524
16615
|
dayInputRef.current?.focus();
|
|
16525
16616
|
}, [isBlocked, readOnly]);
|
|
16526
|
-
const openWheel =
|
|
16617
|
+
const openWheel = React63.useCallback(() => {
|
|
16527
16618
|
if (isBlocked || readOnly) return;
|
|
16528
16619
|
setIsWheelOpen(true);
|
|
16529
16620
|
}, [isBlocked, readOnly]);
|
|
16530
|
-
const closeWheel =
|
|
16621
|
+
const closeWheel = React63.useCallback(() => {
|
|
16531
16622
|
setIsWheelOpen(false);
|
|
16532
16623
|
mobileTriggerRef.current?.focus();
|
|
16533
16624
|
}, []);
|
|
@@ -16539,7 +16630,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16539
16630
|
minDate,
|
|
16540
16631
|
maxDate
|
|
16541
16632
|
});
|
|
16542
|
-
const handleWheelDone =
|
|
16633
|
+
const handleWheelDone = React63.useCallback(() => {
|
|
16543
16634
|
const next = wheel.draftDate;
|
|
16544
16635
|
setDay(String(next.getDate()));
|
|
16545
16636
|
setMonthIndex(next.getMonth());
|
|
@@ -16548,7 +16639,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16548
16639
|
setIsWheelOpen(false);
|
|
16549
16640
|
mobileTriggerRef.current?.focus();
|
|
16550
16641
|
}, [name, onChange, wheel.draftDate]);
|
|
16551
|
-
const defaultFormatValue =
|
|
16642
|
+
const defaultFormatValue = React63.useCallback(
|
|
16552
16643
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16553
16644
|
[resolvedMonthLabels]
|
|
16554
16645
|
);
|
|
@@ -16844,7 +16935,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16844
16935
|
);
|
|
16845
16936
|
|
|
16846
16937
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16847
|
-
var
|
|
16938
|
+
var React67 = __toESM(require("react"), 1);
|
|
16848
16939
|
var import_react_i18next39 = require("react-i18next");
|
|
16849
16940
|
|
|
16850
16941
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16923,7 +17014,7 @@ var createDisabledMatchers = ({
|
|
|
16923
17014
|
};
|
|
16924
17015
|
|
|
16925
17016
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16926
|
-
var
|
|
17017
|
+
var React64 = __toESM(require("react"), 1);
|
|
16927
17018
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16928
17019
|
function useRangeValue({
|
|
16929
17020
|
value: externalValue,
|
|
@@ -16932,10 +17023,10 @@ function useRangeValue({
|
|
|
16932
17023
|
name
|
|
16933
17024
|
}) {
|
|
16934
17025
|
const isControlled = externalValue !== void 0;
|
|
16935
|
-
const [draft, setDraft] =
|
|
17026
|
+
const [draft, setDraft] = React64.useState(
|
|
16936
17027
|
isControlled ? externalValue : defaultValue
|
|
16937
17028
|
);
|
|
16938
|
-
const lastExternalKeyRef =
|
|
17029
|
+
const lastExternalKeyRef = React64.useRef(getRangeKey(externalValue));
|
|
16939
17030
|
if (isControlled) {
|
|
16940
17031
|
const externalKey = getRangeKey(externalValue);
|
|
16941
17032
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16943,7 +17034,7 @@ function useRangeValue({
|
|
|
16943
17034
|
setDraft(externalValue);
|
|
16944
17035
|
}
|
|
16945
17036
|
}
|
|
16946
|
-
const commit =
|
|
17037
|
+
const commit = React64.useCallback(
|
|
16947
17038
|
(next) => {
|
|
16948
17039
|
setDraft(next);
|
|
16949
17040
|
if (next === void 0) {
|
|
@@ -16958,7 +17049,7 @@ function useRangeValue({
|
|
|
16958
17049
|
}
|
|
16959
17050
|
|
|
16960
17051
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16961
|
-
var
|
|
17052
|
+
var React65 = __toESM(require("react"), 1);
|
|
16962
17053
|
|
|
16963
17054
|
// src/dashboard/date-range-picker/utils/inputFormat.ts
|
|
16964
17055
|
function parseDateInputFormat(format2) {
|
|
@@ -17048,18 +17139,18 @@ function useRangeTextInputs({
|
|
|
17048
17139
|
onFromComplete,
|
|
17049
17140
|
onToComplete
|
|
17050
17141
|
}) {
|
|
17051
|
-
const tokens =
|
|
17142
|
+
const tokens = React65.useMemo(
|
|
17052
17143
|
() => parseDateInputFormat(displayFormat),
|
|
17053
17144
|
[displayFormat]
|
|
17054
17145
|
);
|
|
17055
|
-
const maxDigits =
|
|
17056
|
-
const [fromText, setFromText] =
|
|
17057
|
-
const [toText, setToText] =
|
|
17058
|
-
|
|
17146
|
+
const maxDigits = React65.useMemo(() => getMaxDigits(tokens), [tokens]);
|
|
17147
|
+
const [fromText, setFromText] = React65.useState(value?.from ? format2(value.from) : "");
|
|
17148
|
+
const [toText, setToText] = React65.useState(value?.to ? format2(value.to) : "");
|
|
17149
|
+
React65.useEffect(() => {
|
|
17059
17150
|
setFromText(value?.from ? format2(value.from) : "");
|
|
17060
17151
|
setToText(value?.to ? format2(value.to) : "");
|
|
17061
17152
|
}, [format2, value?.from, value?.to]);
|
|
17062
|
-
const handleFromChange =
|
|
17153
|
+
const handleFromChange = React65.useCallback(
|
|
17063
17154
|
(raw) => {
|
|
17064
17155
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
17065
17156
|
const wasComplete = countDigits(fromText) === maxDigits;
|
|
@@ -17071,7 +17162,7 @@ function useRangeTextInputs({
|
|
|
17071
17162
|
},
|
|
17072
17163
|
[fromText, maxDigits, onFromComplete, parse3, tokens]
|
|
17073
17164
|
);
|
|
17074
|
-
const handleToChange =
|
|
17165
|
+
const handleToChange = React65.useCallback(
|
|
17075
17166
|
(raw) => {
|
|
17076
17167
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
17077
17168
|
const wasComplete = countDigits(toText) === maxDigits;
|
|
@@ -17083,7 +17174,7 @@ function useRangeTextInputs({
|
|
|
17083
17174
|
},
|
|
17084
17175
|
[maxDigits, onToComplete, parse3, toText, tokens]
|
|
17085
17176
|
);
|
|
17086
|
-
const handleFromBlur =
|
|
17177
|
+
const handleFromBlur = React65.useCallback(() => {
|
|
17087
17178
|
if (!fromText) {
|
|
17088
17179
|
const next = { from: void 0, to: value?.to };
|
|
17089
17180
|
onCommit(next);
|
|
@@ -17100,7 +17191,7 @@ function useRangeTextInputs({
|
|
|
17100
17191
|
setFromText(value?.from ? format2(value.from) : "");
|
|
17101
17192
|
return void 0;
|
|
17102
17193
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
17103
|
-
const handleToBlur =
|
|
17194
|
+
const handleToBlur = React65.useCallback(() => {
|
|
17104
17195
|
if (!toText) {
|
|
17105
17196
|
const next = { from: value?.from, to: void 0 };
|
|
17106
17197
|
onCommit(next);
|
|
@@ -17129,21 +17220,21 @@ function useRangeTextInputs({
|
|
|
17129
17220
|
}
|
|
17130
17221
|
|
|
17131
17222
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
17132
|
-
var
|
|
17223
|
+
var React66 = __toESM(require("react"), 1);
|
|
17133
17224
|
function useRangeMonthSync(value) {
|
|
17134
|
-
const isPreloadedRef =
|
|
17135
|
-
const [month, setMonth] =
|
|
17136
|
-
|
|
17225
|
+
const isPreloadedRef = React66.useRef(false);
|
|
17226
|
+
const [month, setMonth] = React66.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
17227
|
+
React66.useEffect(() => {
|
|
17137
17228
|
if (value?.from && !isPreloadedRef.current) {
|
|
17138
17229
|
setMonth(value.from);
|
|
17139
17230
|
isPreloadedRef.current = true;
|
|
17140
17231
|
}
|
|
17141
17232
|
}, [value?.from]);
|
|
17142
|
-
const syncMonthToValue =
|
|
17233
|
+
const syncMonthToValue = React66.useCallback((next) => {
|
|
17143
17234
|
isPreloadedRef.current = true;
|
|
17144
17235
|
if (next?.from) setMonth(next.from);
|
|
17145
17236
|
}, []);
|
|
17146
|
-
const resetPreload =
|
|
17237
|
+
const resetPreload = React66.useCallback(() => {
|
|
17147
17238
|
isPreloadedRef.current = false;
|
|
17148
17239
|
}, []);
|
|
17149
17240
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -17403,7 +17494,7 @@ function DateRangePopover({
|
|
|
17403
17494
|
|
|
17404
17495
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17405
17496
|
var import_jsx_runtime176 = require("react/jsx-runtime");
|
|
17406
|
-
var DateRangePicker =
|
|
17497
|
+
var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
17407
17498
|
label,
|
|
17408
17499
|
value: externalValue,
|
|
17409
17500
|
defaultValue,
|
|
@@ -17438,20 +17529,20 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17438
17529
|
components: customComponents,
|
|
17439
17530
|
...dayPickerProps
|
|
17440
17531
|
}, ref) {
|
|
17441
|
-
const containerRef =
|
|
17442
|
-
const fromInputRef =
|
|
17443
|
-
const toInputRef =
|
|
17444
|
-
const reactId =
|
|
17532
|
+
const containerRef = React67.useRef(null);
|
|
17533
|
+
const fromInputRef = React67.useRef(null);
|
|
17534
|
+
const toInputRef = React67.useRef(null);
|
|
17535
|
+
const reactId = React67.useId();
|
|
17445
17536
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17446
17537
|
const fromId = `${baseId}-from`;
|
|
17447
17538
|
const toId = `${baseId}-to`;
|
|
17448
17539
|
const labelId = `${baseId}-label`;
|
|
17449
17540
|
const errorId = `${baseId}-error`;
|
|
17450
|
-
const normalizedValue =
|
|
17541
|
+
const normalizedValue = React67.useMemo(() => {
|
|
17451
17542
|
if (externalValue === void 0) return void 0;
|
|
17452
17543
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17453
17544
|
}, [externalValue]);
|
|
17454
|
-
const normalizedDefaultValue =
|
|
17545
|
+
const normalizedDefaultValue = React67.useMemo(() => {
|
|
17455
17546
|
if (defaultValue === void 0) return void 0;
|
|
17456
17547
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17457
17548
|
}, [defaultValue]);
|
|
@@ -17461,16 +17552,16 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17461
17552
|
onChange,
|
|
17462
17553
|
name
|
|
17463
17554
|
});
|
|
17464
|
-
const normalizedMinDate =
|
|
17465
|
-
const normalizedMaxDate =
|
|
17466
|
-
const formatter =
|
|
17467
|
-
const parser =
|
|
17468
|
-
const closeCalendarRef =
|
|
17555
|
+
const normalizedMinDate = React67.useMemo(() => toDate(minDate), [minDate]);
|
|
17556
|
+
const normalizedMaxDate = React67.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17557
|
+
const formatter = React67.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17558
|
+
const parser = React67.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17559
|
+
const closeCalendarRef = React67.useRef(() => {
|
|
17469
17560
|
});
|
|
17470
|
-
const handleFromComplete =
|
|
17561
|
+
const handleFromComplete = React67.useCallback(() => {
|
|
17471
17562
|
toInputRef.current?.focus();
|
|
17472
17563
|
}, []);
|
|
17473
|
-
const handleToComplete =
|
|
17564
|
+
const handleToComplete = React67.useCallback(() => {
|
|
17474
17565
|
toInputRef.current?.blur();
|
|
17475
17566
|
closeCalendarRef.current();
|
|
17476
17567
|
}, []);
|
|
@@ -17494,9 +17585,9 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17494
17585
|
onToComplete: handleToComplete
|
|
17495
17586
|
});
|
|
17496
17587
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17497
|
-
const [isOpen, setIsOpen] =
|
|
17498
|
-
const [focusedInput, setFocusedInput] =
|
|
17499
|
-
const [autoFocus, setAutoFocus] =
|
|
17588
|
+
const [isOpen, setIsOpen] = React67.useState(false);
|
|
17589
|
+
const [focusedInput, setFocusedInput] = React67.useState(null);
|
|
17590
|
+
const [autoFocus, setAutoFocus] = React67.useState(false);
|
|
17500
17591
|
const isMobile3 = useIsMobile();
|
|
17501
17592
|
const { t } = (0, import_react_i18next39.useTranslation)();
|
|
17502
17593
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17507,14 +17598,14 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17507
17598
|
const isFocused = focusedInput !== null || isOpen;
|
|
17508
17599
|
const wrapperWidth = toCssSize(width);
|
|
17509
17600
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17510
|
-
const closeCalendar =
|
|
17601
|
+
const closeCalendar = React67.useCallback(() => {
|
|
17511
17602
|
setIsOpen(false);
|
|
17512
17603
|
setFocusedInput(null);
|
|
17513
17604
|
setAutoFocus(false);
|
|
17514
17605
|
if (value?.from) setMonth(value.from);
|
|
17515
17606
|
}, [setMonth, value?.from]);
|
|
17516
17607
|
closeCalendarRef.current = closeCalendar;
|
|
17517
|
-
const openCalendar =
|
|
17608
|
+
const openCalendar = React67.useCallback(() => {
|
|
17518
17609
|
if (isBlocked || readOnly) return;
|
|
17519
17610
|
setIsOpen(true);
|
|
17520
17611
|
}, [isBlocked, readOnly]);
|
|
@@ -17523,7 +17614,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17523
17614
|
onOutsideClick: closeCalendar,
|
|
17524
17615
|
isDisabled: !isOpen || isMobile3
|
|
17525
17616
|
});
|
|
17526
|
-
const handlePickerChange =
|
|
17617
|
+
const handlePickerChange = React67.useCallback(
|
|
17527
17618
|
(range, pickedDate) => {
|
|
17528
17619
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17529
17620
|
previous: value,
|
|
@@ -17544,7 +17635,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17544
17635
|
setToText("");
|
|
17545
17636
|
setMonth(/* @__PURE__ */ new Date());
|
|
17546
17637
|
};
|
|
17547
|
-
const disabledMatchers =
|
|
17638
|
+
const disabledMatchers = React67.useMemo(
|
|
17548
17639
|
() => createDisabledMatchers({
|
|
17549
17640
|
minDate: normalizedMinDate,
|
|
17550
17641
|
maxDate: normalizedMaxDate,
|
|
@@ -17563,7 +17654,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17563
17654
|
openCalendar();
|
|
17564
17655
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17565
17656
|
};
|
|
17566
|
-
|
|
17657
|
+
React67.useImperativeHandle(
|
|
17567
17658
|
ref,
|
|
17568
17659
|
() => ({
|
|
17569
17660
|
setDateRange: (range) => {
|
|
@@ -17744,7 +17835,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17744
17835
|
});
|
|
17745
17836
|
|
|
17746
17837
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17747
|
-
var
|
|
17838
|
+
var React68 = __toESM(require("react"), 1);
|
|
17748
17839
|
var import_react_i18next40 = require("react-i18next");
|
|
17749
17840
|
var import_date_fns4 = require("date-fns");
|
|
17750
17841
|
var import_react_day_picker2 = require("react-day-picker");
|
|
@@ -17767,11 +17858,11 @@ function useValidateDates({
|
|
|
17767
17858
|
const { t } = (0, import_react_i18next40.useTranslation)();
|
|
17768
17859
|
const handleError = useEvent(onError);
|
|
17769
17860
|
const handleSuccess = useEvent(onSuccess);
|
|
17770
|
-
const errorFormatter =
|
|
17861
|
+
const errorFormatter = React68.useMemo(
|
|
17771
17862
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17772
17863
|
[displayFormat]
|
|
17773
17864
|
);
|
|
17774
|
-
const validateDates =
|
|
17865
|
+
const validateDates = React68.useCallback(
|
|
17775
17866
|
(dates) => {
|
|
17776
17867
|
const startDate = dates?.from;
|
|
17777
17868
|
const endDate = dates?.to;
|
|
@@ -17821,7 +17912,7 @@ function useValidateDates({
|
|
|
17821
17912
|
}
|
|
17822
17913
|
|
|
17823
17914
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17824
|
-
var
|
|
17915
|
+
var React69 = __toESM(require("react"), 1);
|
|
17825
17916
|
var import_date_fns5 = require("date-fns");
|
|
17826
17917
|
var import_jsx_runtime177 = require("react/jsx-runtime");
|
|
17827
17918
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
@@ -17865,8 +17956,8 @@ var FORMAT_SETTINGS = {
|
|
|
17865
17956
|
},
|
|
17866
17957
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17867
17958
|
};
|
|
17868
|
-
var TimePicker =
|
|
17869
|
-
const resolvedOptions =
|
|
17959
|
+
var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17960
|
+
const resolvedOptions = React69.useMemo(() => {
|
|
17870
17961
|
if (options) return options;
|
|
17871
17962
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17872
17963
|
return buildOptions(settings);
|
|
@@ -17875,14 +17966,14 @@ var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName =
|
|
|
17875
17966
|
});
|
|
17876
17967
|
|
|
17877
17968
|
// src/dashboard/file-input/FileInput.tsx
|
|
17878
|
-
var
|
|
17969
|
+
var React70 = __toESM(require("react"), 1);
|
|
17879
17970
|
var import_lucide_react51 = require("lucide-react");
|
|
17880
17971
|
var import_react_i18next41 = require("react-i18next");
|
|
17881
17972
|
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
17882
17973
|
function defaultDownload(url) {
|
|
17883
17974
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17884
17975
|
}
|
|
17885
|
-
var FileInput =
|
|
17976
|
+
var FileInput = React70.forwardRef(function FileInput2({
|
|
17886
17977
|
label,
|
|
17887
17978
|
value,
|
|
17888
17979
|
onChange,
|
|
@@ -17905,12 +17996,12 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17905
17996
|
width,
|
|
17906
17997
|
downloadLabel
|
|
17907
17998
|
}, ref) {
|
|
17908
|
-
const internalRef =
|
|
17999
|
+
const internalRef = React70.useRef(null);
|
|
17909
18000
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17910
18001
|
const { t } = (0, import_react_i18next41.useTranslation)();
|
|
17911
18002
|
const resolvedLabel = label ?? t("upload_file");
|
|
17912
18003
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17913
|
-
const reactId =
|
|
18004
|
+
const reactId = React70.useId();
|
|
17914
18005
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17915
18006
|
const labelId = `${inputId}-label`;
|
|
17916
18007
|
const errorId = `${inputId}-error`;
|
|
@@ -18047,10 +18138,10 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
18047
18138
|
});
|
|
18048
18139
|
|
|
18049
18140
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
18050
|
-
var
|
|
18141
|
+
var React71 = __toESM(require("react"), 1);
|
|
18051
18142
|
var import_jsx_runtime179 = require("react/jsx-runtime");
|
|
18052
18143
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
18053
|
-
var SelectIconsBox =
|
|
18144
|
+
var SelectIconsBox = React71.forwardRef(
|
|
18054
18145
|
function SelectIconsBox2({
|
|
18055
18146
|
children,
|
|
18056
18147
|
icons,
|
|
@@ -18066,10 +18157,10 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
18066
18157
|
className,
|
|
18067
18158
|
boxClassName
|
|
18068
18159
|
}, ref) {
|
|
18069
|
-
const containerRef =
|
|
18160
|
+
const containerRef = React71.useRef(null);
|
|
18070
18161
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
18071
18162
|
const isControlled = controlledOpen !== void 0;
|
|
18072
|
-
const [internalOpen, setInternalOpen] =
|
|
18163
|
+
const [internalOpen, setInternalOpen] = React71.useState(defaultOpen);
|
|
18073
18164
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
18074
18165
|
const setOpen = (next) => {
|
|
18075
18166
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -18262,15 +18353,15 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18262
18353
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
18263
18354
|
|
|
18264
18355
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18265
|
-
var
|
|
18356
|
+
var React73 = __toESM(require("react"), 1);
|
|
18266
18357
|
var import_lucide_react53 = require("lucide-react");
|
|
18267
18358
|
|
|
18268
18359
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
18269
|
-
var
|
|
18360
|
+
var React72 = __toESM(require("react"), 1);
|
|
18270
18361
|
var import_lucide_react52 = require("lucide-react");
|
|
18271
18362
|
var import_react_i18next42 = require("react-i18next");
|
|
18272
18363
|
var import_jsx_runtime182 = require("react/jsx-runtime");
|
|
18273
|
-
var AirbnbFieldTrigger =
|
|
18364
|
+
var AirbnbFieldTrigger = React72.forwardRef(
|
|
18274
18365
|
({
|
|
18275
18366
|
as = "button",
|
|
18276
18367
|
id,
|
|
@@ -18438,7 +18529,7 @@ AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
|
18438
18529
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18439
18530
|
var import_jsx_runtime183 = require("react/jsx-runtime");
|
|
18440
18531
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18441
|
-
var AirbnbDatePicker =
|
|
18532
|
+
var AirbnbDatePicker = React73.forwardRef(
|
|
18442
18533
|
({
|
|
18443
18534
|
label,
|
|
18444
18535
|
topLabel,
|
|
@@ -18463,24 +18554,24 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18463
18554
|
formatValue = formatDateValue
|
|
18464
18555
|
}, ref) => {
|
|
18465
18556
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18466
|
-
const [isOpen, setIsOpen] =
|
|
18467
|
-
const triggerId =
|
|
18468
|
-
const pickerId =
|
|
18469
|
-
const labelId =
|
|
18470
|
-
const valueId =
|
|
18471
|
-
const helperTextId =
|
|
18472
|
-
const errorId =
|
|
18473
|
-
const internalRef =
|
|
18557
|
+
const [isOpen, setIsOpen] = React73.useState(false);
|
|
18558
|
+
const triggerId = React73.useId();
|
|
18559
|
+
const pickerId = React73.useId();
|
|
18560
|
+
const labelId = React73.useId();
|
|
18561
|
+
const valueId = React73.useId();
|
|
18562
|
+
const helperTextId = React73.useId();
|
|
18563
|
+
const errorId = React73.useId();
|
|
18564
|
+
const internalRef = React73.useRef(null);
|
|
18474
18565
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18475
|
-
const monthLabels =
|
|
18476
|
-
const resolvedMinDate =
|
|
18477
|
-
const resolvedMaxDate =
|
|
18478
|
-
const normalizedValue =
|
|
18479
|
-
const normalizedDefaultValue =
|
|
18566
|
+
const monthLabels = React73.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18567
|
+
const resolvedMinDate = React73.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18568
|
+
const resolvedMaxDate = React73.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18569
|
+
const normalizedValue = React73.useMemo(() => normalizeDateValue(value), [value]);
|
|
18570
|
+
const normalizedDefaultValue = React73.useMemo(
|
|
18480
18571
|
() => normalizeDateValue(defaultValue),
|
|
18481
18572
|
[defaultValue]
|
|
18482
18573
|
);
|
|
18483
|
-
const resolvedValue =
|
|
18574
|
+
const resolvedValue = React73.useMemo(
|
|
18484
18575
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18485
18576
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18486
18577
|
);
|
|
@@ -18511,7 +18602,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18511
18602
|
minDate: resolvedMinDate,
|
|
18512
18603
|
maxDate: resolvedMaxDate
|
|
18513
18604
|
});
|
|
18514
|
-
const handleOpenChange =
|
|
18605
|
+
const handleOpenChange = React73.useCallback(
|
|
18515
18606
|
(nextOpen) => {
|
|
18516
18607
|
if (isBlocked && nextOpen) return;
|
|
18517
18608
|
setIsOpen(nextOpen);
|
|
@@ -18521,7 +18612,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18521
18612
|
},
|
|
18522
18613
|
[isBlocked]
|
|
18523
18614
|
);
|
|
18524
|
-
const handleDone =
|
|
18615
|
+
const handleDone = React73.useCallback(() => {
|
|
18525
18616
|
if (isBlocked) return;
|
|
18526
18617
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18527
18618
|
handleOpenChange(false);
|
|
@@ -18533,11 +18624,11 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18533
18624
|
resolvedMaxDate,
|
|
18534
18625
|
resolvedMinDate
|
|
18535
18626
|
]);
|
|
18536
|
-
const handleTriggerClick =
|
|
18627
|
+
const handleTriggerClick = React73.useCallback(() => {
|
|
18537
18628
|
if (isBlocked) return;
|
|
18538
18629
|
setIsOpen(true);
|
|
18539
18630
|
}, [isBlocked]);
|
|
18540
|
-
const handleTriggerKeyDown =
|
|
18631
|
+
const handleTriggerKeyDown = React73.useCallback(
|
|
18541
18632
|
(event) => {
|
|
18542
18633
|
if (isBlocked) return;
|
|
18543
18634
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18547,7 +18638,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18547
18638
|
},
|
|
18548
18639
|
[isBlocked]
|
|
18549
18640
|
);
|
|
18550
|
-
|
|
18641
|
+
React73.useEffect(() => {
|
|
18551
18642
|
if (isBlocked) {
|
|
18552
18643
|
setIsOpen(false);
|
|
18553
18644
|
}
|
|
@@ -18624,12 +18715,12 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18624
18715
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18625
18716
|
|
|
18626
18717
|
// src/airbnb-fields/input/Input.tsx
|
|
18627
|
-
var
|
|
18718
|
+
var React74 = __toESM(require("react"), 1);
|
|
18628
18719
|
var import_lucide_react54 = require("lucide-react");
|
|
18629
18720
|
var import_react_i18next43 = require("react-i18next");
|
|
18630
18721
|
var import_jsx_runtime184 = require("react/jsx-runtime");
|
|
18631
18722
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18632
|
-
var AirbnbInput =
|
|
18723
|
+
var AirbnbInput = React74.forwardRef(
|
|
18633
18724
|
({
|
|
18634
18725
|
label,
|
|
18635
18726
|
topLabel,
|
|
@@ -18658,16 +18749,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18658
18749
|
...props
|
|
18659
18750
|
}, ref) => {
|
|
18660
18751
|
const { t } = (0, import_react_i18next43.useTranslation)();
|
|
18661
|
-
const generatedId =
|
|
18662
|
-
const inputRef =
|
|
18752
|
+
const generatedId = React74.useId();
|
|
18753
|
+
const inputRef = React74.useRef(null);
|
|
18663
18754
|
const inputId = id ?? generatedId;
|
|
18664
18755
|
const fieldId = `${inputId}-field`;
|
|
18665
18756
|
const labelId = `${inputId}-label`;
|
|
18666
18757
|
const errorId = `${inputId}-error`;
|
|
18667
18758
|
const accessibleLabel = placeholder ?? label;
|
|
18668
|
-
const [isFocused, setIsFocused] =
|
|
18669
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18670
|
-
const [currentValue, setCurrentValue] =
|
|
18759
|
+
const [isFocused, setIsFocused] = React74.useState(false);
|
|
18760
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React74.useState(false);
|
|
18761
|
+
const [currentValue, setCurrentValue] = React74.useState(
|
|
18671
18762
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18672
18763
|
);
|
|
18673
18764
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18680,16 +18771,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18680
18771
|
const triggerError = error ?? invalid;
|
|
18681
18772
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18682
18773
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18683
|
-
|
|
18774
|
+
React74.useLayoutEffect(() => {
|
|
18684
18775
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18685
18776
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18686
18777
|
}, [value]);
|
|
18687
|
-
|
|
18778
|
+
React74.useEffect(() => {
|
|
18688
18779
|
if (!isPasswordInput) {
|
|
18689
18780
|
setIsPasswordRevealed(false);
|
|
18690
18781
|
}
|
|
18691
18782
|
}, [isPasswordInput]);
|
|
18692
|
-
const setRefs =
|
|
18783
|
+
const setRefs = React74.useCallback(
|
|
18693
18784
|
(node) => {
|
|
18694
18785
|
inputRef.current = node;
|
|
18695
18786
|
if (node && value == null) {
|
|
@@ -18807,11 +18898,11 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18807
18898
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18808
18899
|
|
|
18809
18900
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18810
|
-
var
|
|
18901
|
+
var React80 = __toESM(require("react"), 1);
|
|
18811
18902
|
var import_lucide_react56 = require("lucide-react");
|
|
18812
18903
|
|
|
18813
18904
|
// src/airbnb-fields/select/Select.tsx
|
|
18814
|
-
var
|
|
18905
|
+
var React79 = __toESM(require("react"), 1);
|
|
18815
18906
|
|
|
18816
18907
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18817
18908
|
var import_jsx_runtime185 = require("react/jsx-runtime");
|
|
@@ -19156,10 +19247,10 @@ function AirbnbSelectMobileContent({
|
|
|
19156
19247
|
}
|
|
19157
19248
|
|
|
19158
19249
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
19159
|
-
var
|
|
19250
|
+
var React75 = __toESM(require("react"), 1);
|
|
19160
19251
|
var import_lucide_react55 = require("lucide-react");
|
|
19161
19252
|
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
19162
|
-
var AirbnbSelectTrigger =
|
|
19253
|
+
var AirbnbSelectTrigger = React75.forwardRef(
|
|
19163
19254
|
({
|
|
19164
19255
|
id,
|
|
19165
19256
|
open,
|
|
@@ -19224,7 +19315,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
|
|
|
19224
19315
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
19225
19316
|
|
|
19226
19317
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
19227
|
-
var
|
|
19318
|
+
var React76 = __toESM(require("react"), 1);
|
|
19228
19319
|
function useDesktopSelect({
|
|
19229
19320
|
isMobile: isMobile3,
|
|
19230
19321
|
isOpen,
|
|
@@ -19233,12 +19324,12 @@ function useDesktopSelect({
|
|
|
19233
19324
|
disabled,
|
|
19234
19325
|
onChange
|
|
19235
19326
|
}) {
|
|
19236
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19237
|
-
const triggerRef =
|
|
19238
|
-
const listRef =
|
|
19239
|
-
const optionRefs =
|
|
19327
|
+
const [highlightedIndex, setHighlightedIndex] = React76.useState(-1);
|
|
19328
|
+
const triggerRef = React76.useRef(null);
|
|
19329
|
+
const listRef = React76.useRef(null);
|
|
19330
|
+
const optionRefs = React76.useRef([]);
|
|
19240
19331
|
const selectedIndex = getOptionIndex2(options, value);
|
|
19241
|
-
|
|
19332
|
+
React76.useEffect(() => {
|
|
19242
19333
|
if (!isOpen || isMobile3) return;
|
|
19243
19334
|
setHighlightedIndex((currentIndex) => {
|
|
19244
19335
|
if (currentIndex >= 0) {
|
|
@@ -19253,34 +19344,34 @@ function useDesktopSelect({
|
|
|
19253
19344
|
window.cancelAnimationFrame(frameId);
|
|
19254
19345
|
};
|
|
19255
19346
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
19256
|
-
|
|
19347
|
+
React76.useEffect(() => {
|
|
19257
19348
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
19258
19349
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
19259
19350
|
block: "nearest"
|
|
19260
19351
|
});
|
|
19261
19352
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
19262
|
-
|
|
19353
|
+
React76.useEffect(() => {
|
|
19263
19354
|
if (isOpen) return;
|
|
19264
19355
|
setHighlightedIndex(-1);
|
|
19265
19356
|
}, [isOpen]);
|
|
19266
|
-
const focusTrigger =
|
|
19357
|
+
const focusTrigger = React76.useCallback(() => {
|
|
19267
19358
|
triggerRef.current?.focus();
|
|
19268
19359
|
}, []);
|
|
19269
|
-
const handleSelect =
|
|
19360
|
+
const handleSelect = React76.useCallback(
|
|
19270
19361
|
(option) => {
|
|
19271
19362
|
if (option.isDisabled || disabled) return;
|
|
19272
19363
|
onChange?.(option);
|
|
19273
19364
|
},
|
|
19274
19365
|
[disabled, onChange]
|
|
19275
19366
|
);
|
|
19276
|
-
const openMenu =
|
|
19367
|
+
const openMenu = React76.useCallback(
|
|
19277
19368
|
(targetIndex) => {
|
|
19278
19369
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19279
19370
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
19280
19371
|
},
|
|
19281
19372
|
[options, selectedIndex]
|
|
19282
19373
|
);
|
|
19283
|
-
const handleTriggerKeyDown =
|
|
19374
|
+
const handleTriggerKeyDown = React76.useCallback(
|
|
19284
19375
|
(event, onOpen) => {
|
|
19285
19376
|
if (disabled) return;
|
|
19286
19377
|
if (event.key === "ArrowDown") {
|
|
@@ -19305,7 +19396,7 @@ function useDesktopSelect({
|
|
|
19305
19396
|
},
|
|
19306
19397
|
[disabled, openMenu, options, selectedIndex]
|
|
19307
19398
|
);
|
|
19308
|
-
const handleMenuKeyDown =
|
|
19399
|
+
const handleMenuKeyDown = React76.useCallback(
|
|
19309
19400
|
(event, onClose) => {
|
|
19310
19401
|
if (event.key === "Escape") {
|
|
19311
19402
|
event.preventDefault();
|
|
@@ -19355,7 +19446,7 @@ function useDesktopSelect({
|
|
|
19355
19446
|
},
|
|
19356
19447
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
19357
19448
|
);
|
|
19358
|
-
const setOptionRef =
|
|
19449
|
+
const setOptionRef = React76.useCallback(
|
|
19359
19450
|
(index, node) => {
|
|
19360
19451
|
optionRefs.current[index] = node;
|
|
19361
19452
|
},
|
|
@@ -19375,23 +19466,23 @@ function useDesktopSelect({
|
|
|
19375
19466
|
}
|
|
19376
19467
|
|
|
19377
19468
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19378
|
-
var
|
|
19469
|
+
var React77 = __toESM(require("react"), 1);
|
|
19379
19470
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19380
|
-
const [pendingValue, setPendingValue] =
|
|
19471
|
+
const [pendingValue, setPendingValue] = React77.useState(
|
|
19381
19472
|
value ?? null
|
|
19382
19473
|
);
|
|
19383
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19384
|
-
const mobileListRef =
|
|
19385
|
-
const scrollSettleTimeoutRef =
|
|
19386
|
-
const scrollAnimationFrameRef =
|
|
19387
|
-
const getTargetIndex =
|
|
19474
|
+
const [mobileScrollTop, setMobileScrollTop] = React77.useState(0);
|
|
19475
|
+
const mobileListRef = React77.useRef(null);
|
|
19476
|
+
const scrollSettleTimeoutRef = React77.useRef(null);
|
|
19477
|
+
const scrollAnimationFrameRef = React77.useRef(null);
|
|
19478
|
+
const getTargetIndex = React77.useCallback(
|
|
19388
19479
|
(targetValue) => {
|
|
19389
19480
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19390
19481
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19391
19482
|
},
|
|
19392
19483
|
[options]
|
|
19393
19484
|
);
|
|
19394
|
-
const syncScrollPosition =
|
|
19485
|
+
const syncScrollPosition = React77.useCallback(
|
|
19395
19486
|
(targetValue, behavior = "instant") => {
|
|
19396
19487
|
const targetIndex = getTargetIndex(targetValue);
|
|
19397
19488
|
if (targetIndex < 0) return;
|
|
@@ -19410,27 +19501,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19410
19501
|
},
|
|
19411
19502
|
[getTargetIndex, options]
|
|
19412
19503
|
);
|
|
19413
|
-
const clearScrollSettleTimeout =
|
|
19504
|
+
const clearScrollSettleTimeout = React77.useCallback(() => {
|
|
19414
19505
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19415
19506
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19416
19507
|
scrollSettleTimeoutRef.current = null;
|
|
19417
19508
|
}, []);
|
|
19418
|
-
const clearScrollAnimationFrame =
|
|
19509
|
+
const clearScrollAnimationFrame = React77.useCallback(() => {
|
|
19419
19510
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19420
19511
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19421
19512
|
scrollAnimationFrameRef.current = null;
|
|
19422
19513
|
}, []);
|
|
19423
|
-
|
|
19514
|
+
React77.useEffect(
|
|
19424
19515
|
() => () => {
|
|
19425
19516
|
clearScrollSettleTimeout();
|
|
19426
19517
|
clearScrollAnimationFrame();
|
|
19427
19518
|
},
|
|
19428
19519
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19429
19520
|
);
|
|
19430
|
-
|
|
19521
|
+
React77.useEffect(() => {
|
|
19431
19522
|
setPendingValue(value ?? null);
|
|
19432
19523
|
}, [value]);
|
|
19433
|
-
|
|
19524
|
+
React77.useLayoutEffect(() => {
|
|
19434
19525
|
if (!isMobile3 || !isOpen) return;
|
|
19435
19526
|
const frameId = window.requestAnimationFrame(() => {
|
|
19436
19527
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19439,7 +19530,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19439
19530
|
window.cancelAnimationFrame(frameId);
|
|
19440
19531
|
};
|
|
19441
19532
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19442
|
-
const settleScroll =
|
|
19533
|
+
const settleScroll = React77.useCallback(() => {
|
|
19443
19534
|
if (!mobileListRef.current) return;
|
|
19444
19535
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19445
19536
|
const nextOption = options[nextIndex];
|
|
@@ -19451,13 +19542,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19451
19542
|
}
|
|
19452
19543
|
setPendingValue(nextOption);
|
|
19453
19544
|
}, [options, pendingValue]);
|
|
19454
|
-
const scheduleScrollSettle =
|
|
19545
|
+
const scheduleScrollSettle = React77.useCallback(() => {
|
|
19455
19546
|
clearScrollSettleTimeout();
|
|
19456
19547
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19457
19548
|
settleScroll();
|
|
19458
19549
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19459
19550
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19460
|
-
const handleScroll =
|
|
19551
|
+
const handleScroll = React77.useCallback(() => {
|
|
19461
19552
|
if (!mobileListRef.current) return;
|
|
19462
19553
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19463
19554
|
clearScrollAnimationFrame();
|
|
@@ -19467,7 +19558,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19467
19558
|
});
|
|
19468
19559
|
scheduleScrollSettle();
|
|
19469
19560
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19470
|
-
const focusOptionByIndex =
|
|
19561
|
+
const focusOptionByIndex = React77.useCallback(
|
|
19471
19562
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19472
19563
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19473
19564
|
const option = options[index];
|
|
@@ -19485,7 +19576,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19485
19576
|
},
|
|
19486
19577
|
[options, scheduleScrollSettle]
|
|
19487
19578
|
);
|
|
19488
|
-
const handleOptionClick =
|
|
19579
|
+
const handleOptionClick = React77.useCallback(
|
|
19489
19580
|
(option) => {
|
|
19490
19581
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19491
19582
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19494,7 +19585,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19494
19585
|
},
|
|
19495
19586
|
[disabled, focusOptionByIndex, options]
|
|
19496
19587
|
);
|
|
19497
|
-
const moveByStep =
|
|
19588
|
+
const moveByStep = React77.useCallback(
|
|
19498
19589
|
(step) => {
|
|
19499
19590
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19500
19591
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19506,7 +19597,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19506
19597
|
},
|
|
19507
19598
|
[focusOptionByIndex, options, pendingValue]
|
|
19508
19599
|
);
|
|
19509
|
-
const moveToBoundary =
|
|
19600
|
+
const moveToBoundary = React77.useCallback(
|
|
19510
19601
|
(boundary) => {
|
|
19511
19602
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19512
19603
|
if (targetIndex >= 0) {
|
|
@@ -19515,7 +19606,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19515
19606
|
},
|
|
19516
19607
|
[focusOptionByIndex, options]
|
|
19517
19608
|
);
|
|
19518
|
-
const syncPendingValue =
|
|
19609
|
+
const syncPendingValue = React77.useCallback(
|
|
19519
19610
|
(nextValue) => {
|
|
19520
19611
|
const normalizedValue = nextValue ?? null;
|
|
19521
19612
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19543,9 +19634,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19543
19634
|
}
|
|
19544
19635
|
|
|
19545
19636
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19546
|
-
var
|
|
19637
|
+
var React78 = __toESM(require("react"), 1);
|
|
19547
19638
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19548
|
-
const reactId =
|
|
19639
|
+
const reactId = React78.useId().replace(/:/g, "");
|
|
19549
19640
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19550
19641
|
const triggerId = `${baseId}-trigger`;
|
|
19551
19642
|
const labelId = `${baseId}-label`;
|
|
@@ -19555,7 +19646,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19555
19646
|
const listboxId = `${baseId}-listbox`;
|
|
19556
19647
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19557
19648
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19558
|
-
const getOptionId2 =
|
|
19649
|
+
const getOptionId2 = React78.useCallback(
|
|
19559
19650
|
(index) => `${baseId}-option-${index}`,
|
|
19560
19651
|
[baseId]
|
|
19561
19652
|
);
|
|
@@ -19574,7 +19665,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19574
19665
|
|
|
19575
19666
|
// src/airbnb-fields/select/Select.tsx
|
|
19576
19667
|
var import_jsx_runtime190 = require("react/jsx-runtime");
|
|
19577
|
-
var AirbnbSelect =
|
|
19668
|
+
var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
19578
19669
|
options = [],
|
|
19579
19670
|
value,
|
|
19580
19671
|
onChange,
|
|
@@ -19601,8 +19692,8 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19601
19692
|
filterOption
|
|
19602
19693
|
}, ref) {
|
|
19603
19694
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19604
|
-
const [isOpen, setIsOpen] =
|
|
19605
|
-
const containerRef =
|
|
19695
|
+
const [isOpen, setIsOpen] = React79.useState(false);
|
|
19696
|
+
const containerRef = React79.useRef(null);
|
|
19606
19697
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19607
19698
|
const hasValue = Boolean(value);
|
|
19608
19699
|
const helperText = placeholder ?? label;
|
|
@@ -19664,12 +19755,12 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19664
19755
|
onOutsideClick: () => setIsOpen(false),
|
|
19665
19756
|
isDisabled: !isOpen || isMobile3
|
|
19666
19757
|
});
|
|
19667
|
-
|
|
19758
|
+
React79.useEffect(() => {
|
|
19668
19759
|
if (isBlocked) {
|
|
19669
19760
|
setIsOpen(false);
|
|
19670
19761
|
}
|
|
19671
19762
|
}, [isBlocked]);
|
|
19672
|
-
|
|
19763
|
+
React79.useEffect(
|
|
19673
19764
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19674
19765
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19675
19766
|
return;
|
|
@@ -19681,7 +19772,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19681
19772
|
},
|
|
19682
19773
|
[onChange, filteredOptions, value]
|
|
19683
19774
|
);
|
|
19684
|
-
const handleMobileOpenChange =
|
|
19775
|
+
const handleMobileOpenChange = React79.useCallback(
|
|
19685
19776
|
(nextOpen) => {
|
|
19686
19777
|
if (isBlocked && nextOpen) return;
|
|
19687
19778
|
setIsOpen(nextOpen);
|
|
@@ -19692,7 +19783,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19692
19783
|
},
|
|
19693
19784
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19694
19785
|
);
|
|
19695
|
-
const handleMobileDone =
|
|
19786
|
+
const handleMobileDone = React79.useCallback(() => {
|
|
19696
19787
|
if (isBlocked) return;
|
|
19697
19788
|
const finalOption = pendingValue;
|
|
19698
19789
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19701,7 +19792,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19701
19792
|
setIsOpen(false);
|
|
19702
19793
|
focusTrigger();
|
|
19703
19794
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19704
|
-
const handleTriggerClick =
|
|
19795
|
+
const handleTriggerClick = React79.useCallback(() => {
|
|
19705
19796
|
if (isBlocked) return;
|
|
19706
19797
|
setIsOpen((prev) => {
|
|
19707
19798
|
const nextOpen = !prev;
|
|
@@ -19873,7 +19964,7 @@ function formatPhoneCodeOptionLabel2(option) {
|
|
|
19873
19964
|
const value = String(option.value);
|
|
19874
19965
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19875
19966
|
}
|
|
19876
|
-
var AirbnbPhoneField =
|
|
19967
|
+
var AirbnbPhoneField = React80.forwardRef(
|
|
19877
19968
|
({
|
|
19878
19969
|
label,
|
|
19879
19970
|
topLabel,
|
|
@@ -19897,9 +19988,9 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19897
19988
|
codePlaceholder = "+00",
|
|
19898
19989
|
defaultCode
|
|
19899
19990
|
}, ref) => {
|
|
19900
|
-
const inputId =
|
|
19991
|
+
const inputId = React80.useId();
|
|
19901
19992
|
const effectiveCode = value?.code || defaultCode || "";
|
|
19902
|
-
const codeOptions =
|
|
19993
|
+
const codeOptions = React80.useMemo(
|
|
19903
19994
|
() => options.map((option) => ({
|
|
19904
19995
|
value: option.value,
|
|
19905
19996
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19907,7 +19998,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19907
19998
|
})),
|
|
19908
19999
|
[options]
|
|
19909
20000
|
);
|
|
19910
|
-
const selectedCodeOption =
|
|
20001
|
+
const selectedCodeOption = React80.useMemo(
|
|
19911
20002
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19912
20003
|
[codeOptions, effectiveCode]
|
|
19913
20004
|
);
|
|
@@ -20043,7 +20134,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20043
20134
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
20044
20135
|
|
|
20045
20136
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
20046
|
-
var
|
|
20137
|
+
var React81 = __toESM(require("react"), 1);
|
|
20047
20138
|
var import_lucide_react57 = require("lucide-react");
|
|
20048
20139
|
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
20049
20140
|
var import_react90 = require("react");
|
|
@@ -20087,13 +20178,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20087
20178
|
loadingMessage
|
|
20088
20179
|
}, ref) => {
|
|
20089
20180
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
20090
|
-
const reactId =
|
|
20091
|
-
const [open, setOpen] =
|
|
20092
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
20093
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
20094
|
-
const containerRef =
|
|
20095
|
-
const triggerRef =
|
|
20096
|
-
const inputRef =
|
|
20181
|
+
const reactId = React81.useId();
|
|
20182
|
+
const [open, setOpen] = React81.useState(false);
|
|
20183
|
+
const [internalSearchValue, setInternalSearchValue] = React81.useState("");
|
|
20184
|
+
const [highlightedIndex, setHighlightedIndex] = React81.useState(-1);
|
|
20185
|
+
const containerRef = React81.useRef(null);
|
|
20186
|
+
const triggerRef = React81.useRef(null);
|
|
20187
|
+
const inputRef = React81.useRef(null);
|
|
20097
20188
|
const listboxId = `${reactId}-listbox`;
|
|
20098
20189
|
const labelId = `${reactId}-label`;
|
|
20099
20190
|
const valueId = `${reactId}-value`;
|
|
@@ -20102,13 +20193,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20102
20193
|
const searchInputId = `${reactId}-search`;
|
|
20103
20194
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
20104
20195
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
20105
|
-
const visibleOptions =
|
|
20196
|
+
const visibleOptions = React81.useMemo(() => {
|
|
20106
20197
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
20107
20198
|
return options;
|
|
20108
20199
|
}
|
|
20109
20200
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
20110
20201
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
20111
|
-
const selectedIndex =
|
|
20202
|
+
const selectedIndex = React81.useMemo(
|
|
20112
20203
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
20113
20204
|
[value?.value, visibleOptions]
|
|
20114
20205
|
);
|
|
@@ -20134,7 +20225,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20134
20225
|
},
|
|
20135
20226
|
[handleOnOpenChange]
|
|
20136
20227
|
);
|
|
20137
|
-
|
|
20228
|
+
React81.useEffect(() => {
|
|
20138
20229
|
if (isBlocked) {
|
|
20139
20230
|
setSelectOpen(false);
|
|
20140
20231
|
return;
|
|
@@ -20147,7 +20238,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20147
20238
|
window.cancelAnimationFrame(frameId);
|
|
20148
20239
|
};
|
|
20149
20240
|
}, [isBlocked, open, setSelectOpen]);
|
|
20150
|
-
|
|
20241
|
+
React81.useEffect(() => {
|
|
20151
20242
|
if (!open) {
|
|
20152
20243
|
setHighlightedIndex(-1);
|
|
20153
20244
|
return;
|
|
@@ -20242,7 +20333,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20242
20333
|
onOptionHover: setHighlightedIndex
|
|
20243
20334
|
}
|
|
20244
20335
|
);
|
|
20245
|
-
|
|
20336
|
+
React81.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
20246
20337
|
return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
20247
20338
|
name && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
20248
20339
|
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
@@ -20320,7 +20411,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20320
20411
|
) : null
|
|
20321
20412
|
] });
|
|
20322
20413
|
};
|
|
20323
|
-
var AirbnbSearchableSelect =
|
|
20414
|
+
var AirbnbSearchableSelect = React81.forwardRef(
|
|
20324
20415
|
AirbnbSearchableSelectInternal
|
|
20325
20416
|
);
|
|
20326
20417
|
function AirbnbSearchableSelectContent({
|
|
@@ -20347,9 +20438,9 @@ function AirbnbSearchableSelectContent({
|
|
|
20347
20438
|
onOptionClick,
|
|
20348
20439
|
onOptionHover
|
|
20349
20440
|
}) {
|
|
20350
|
-
const listRef =
|
|
20351
|
-
const lastLoadMoreOptionsLengthRef =
|
|
20352
|
-
const previousHighlightedIndexRef =
|
|
20441
|
+
const listRef = React81.useRef(null);
|
|
20442
|
+
const lastLoadMoreOptionsLengthRef = React81.useRef(null);
|
|
20443
|
+
const previousHighlightedIndexRef = React81.useRef(highlightedIndex);
|
|
20353
20444
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
20354
20445
|
const virtualizer = (0, import_react_virtual3.useVirtualizer)({
|
|
20355
20446
|
count: rowCount,
|
|
@@ -20360,7 +20451,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20360
20451
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20361
20452
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20362
20453
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20363
|
-
|
|
20454
|
+
React81.useEffect(() => {
|
|
20364
20455
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20365
20456
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20366
20457
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20368,7 +20459,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20368
20459
|
onLoadMore?.();
|
|
20369
20460
|
}
|
|
20370
20461
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20371
|
-
|
|
20462
|
+
React81.useEffect(() => {
|
|
20372
20463
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20373
20464
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20374
20465
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -20486,11 +20577,11 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20486
20577
|
}
|
|
20487
20578
|
|
|
20488
20579
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20489
|
-
var
|
|
20580
|
+
var React82 = __toESM(require("react"), 1);
|
|
20490
20581
|
var import_react_i18next44 = require("react-i18next");
|
|
20491
20582
|
var import_lucide_react58 = require("lucide-react");
|
|
20492
20583
|
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
20493
|
-
var AirbnbSearchInput =
|
|
20584
|
+
var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20494
20585
|
const { t } = (0, import_react_i18next44.useTranslation)();
|
|
20495
20586
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20496
20587
|
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
@@ -20528,11 +20619,11 @@ var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20528
20619
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20529
20620
|
|
|
20530
20621
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20531
|
-
var
|
|
20622
|
+
var React83 = __toESM(require("react"), 1);
|
|
20532
20623
|
var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
|
|
20533
20624
|
var import_lucide_react59 = require("lucide-react");
|
|
20534
20625
|
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
20535
|
-
var AirbnbSwitch =
|
|
20626
|
+
var AirbnbSwitch = React83.forwardRef(
|
|
20536
20627
|
({
|
|
20537
20628
|
className,
|
|
20538
20629
|
value,
|
|
@@ -20546,7 +20637,7 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20546
20637
|
wrapperClassName,
|
|
20547
20638
|
...props
|
|
20548
20639
|
}, ref) => {
|
|
20549
|
-
const generatedId =
|
|
20640
|
+
const generatedId = React83.useId();
|
|
20550
20641
|
const fieldId = id || generatedId;
|
|
20551
20642
|
const switchElement = /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20552
20643
|
SwitchPrimitives2.Root,
|