@chekinapp/ui 0.0.132 → 0.0.133
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 +411 -330
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +411 -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;
|
|
@@ -13619,6 +13633,11 @@ function useSelectState(params) {
|
|
|
13619
13633
|
);
|
|
13620
13634
|
const selectOption = React48.useCallback(
|
|
13621
13635
|
(option) => {
|
|
13636
|
+
console.log("[SC-debug] selectOption called", {
|
|
13637
|
+
value: option.value,
|
|
13638
|
+
isMulti,
|
|
13639
|
+
currentSelectedCount: selectedOptions.length
|
|
13640
|
+
});
|
|
13622
13641
|
if (!isOptionEnabled(option, isOptionDisabled)) return;
|
|
13623
13642
|
if (isMulti) {
|
|
13624
13643
|
const exists = isValueSelected(option);
|
|
@@ -15078,16 +15097,80 @@ var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiS
|
|
|
15078
15097
|
});
|
|
15079
15098
|
|
|
15080
15099
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15081
|
-
var
|
|
15100
|
+
var React59 = __toESM(require("react"), 1);
|
|
15082
15101
|
var import_react_i18next36 = require("react-i18next");
|
|
15083
15102
|
|
|
15103
|
+
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
15104
|
+
var import_jsx_runtime165 = require("react/jsx-runtime");
|
|
15105
|
+
function SelectCheckboxOption(props) {
|
|
15106
|
+
const {
|
|
15107
|
+
option,
|
|
15108
|
+
index,
|
|
15109
|
+
isSelected,
|
|
15110
|
+
isHighlighted,
|
|
15111
|
+
isDisabled,
|
|
15112
|
+
id,
|
|
15113
|
+
onClick,
|
|
15114
|
+
onHover,
|
|
15115
|
+
innerRef
|
|
15116
|
+
} = props;
|
|
15117
|
+
return /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)(
|
|
15118
|
+
"button",
|
|
15119
|
+
{
|
|
15120
|
+
id,
|
|
15121
|
+
ref: innerRef,
|
|
15122
|
+
type: "button",
|
|
15123
|
+
role: "option",
|
|
15124
|
+
"aria-selected": isSelected,
|
|
15125
|
+
"aria-disabled": isDisabled,
|
|
15126
|
+
tabIndex: -1,
|
|
15127
|
+
disabled: isDisabled,
|
|
15128
|
+
onClick: () => onClick(option),
|
|
15129
|
+
onMouseMove: () => onHover(index),
|
|
15130
|
+
className: cn(
|
|
15131
|
+
"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",
|
|
15132
|
+
!isDisabled && "cursor-pointer hover:bg-[var(--chekin-color-surface-pressed)]",
|
|
15133
|
+
isHighlighted && !isDisabled && "bg-[var(--chekin-color-surface-pressed)]",
|
|
15134
|
+
isSelected && "bg-[var(--chekin-color-surface-autocomplete)] font-semibold text-[var(--chekin-color-brand-blue)]",
|
|
15135
|
+
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
15136
|
+
),
|
|
15137
|
+
children: [
|
|
15138
|
+
/* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
|
|
15139
|
+
BaseCheckbox,
|
|
15140
|
+
{
|
|
15141
|
+
checked: isSelected,
|
|
15142
|
+
disabled: isDisabled,
|
|
15143
|
+
size: "s",
|
|
15144
|
+
tabIndex: -1,
|
|
15145
|
+
className: "pointer-events-none shrink-0"
|
|
15146
|
+
}
|
|
15147
|
+
),
|
|
15148
|
+
/* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
15149
|
+
/* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { className: "block break-words", children: option.label }),
|
|
15150
|
+
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 })
|
|
15151
|
+
] })
|
|
15152
|
+
]
|
|
15153
|
+
}
|
|
15154
|
+
);
|
|
15155
|
+
}
|
|
15156
|
+
|
|
15084
15157
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
15158
|
+
var React58 = __toESM(require("react"), 1);
|
|
15085
15159
|
var import_lucide_react48 = require("lucide-react");
|
|
15086
15160
|
var import_react_i18next35 = require("react-i18next");
|
|
15087
|
-
var
|
|
15161
|
+
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
15088
15162
|
function createCountTrigger(opts) {
|
|
15089
|
-
const {
|
|
15163
|
+
const { getValueText, getTotalCount } = opts;
|
|
15090
15164
|
function CountTrigger(props) {
|
|
15165
|
+
const ctDebugRenderCount = React58.useRef(0);
|
|
15166
|
+
ctDebugRenderCount.current += 1;
|
|
15167
|
+
React58.useEffect(() => {
|
|
15168
|
+
console.log("[SC-debug] CountTrigger MOUNTED");
|
|
15169
|
+
return () => {
|
|
15170
|
+
console.log("[SC-debug] CountTrigger UNMOUNTED");
|
|
15171
|
+
};
|
|
15172
|
+
}, []);
|
|
15173
|
+
console.log(`[SC-debug] CountTrigger render #${ctDebugRenderCount.current}`);
|
|
15091
15174
|
const { t } = (0, import_react_i18next35.useTranslation)();
|
|
15092
15175
|
const {
|
|
15093
15176
|
triggerId,
|
|
@@ -15107,12 +15190,14 @@ function createCountTrigger(opts) {
|
|
|
15107
15190
|
onTriggerFocus,
|
|
15108
15191
|
leftIcon
|
|
15109
15192
|
} = props;
|
|
15193
|
+
const valueText = getValueText();
|
|
15194
|
+
const totalCount = getTotalCount();
|
|
15110
15195
|
const count = selectedOptions.length;
|
|
15111
15196
|
const total = totalCount ?? count;
|
|
15112
15197
|
const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
|
|
15113
15198
|
const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
|
|
15114
15199
|
const isEmpty = !hasValue;
|
|
15115
|
-
return /* @__PURE__ */ (0,
|
|
15200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
|
|
15116
15201
|
"button",
|
|
15117
15202
|
{
|
|
15118
15203
|
id: triggerId,
|
|
@@ -15135,9 +15220,9 @@ function createCountTrigger(opts) {
|
|
|
15135
15220
|
loading && "!cursor-progress"
|
|
15136
15221
|
),
|
|
15137
15222
|
children: [
|
|
15138
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
15139
|
-
/* @__PURE__ */ (0,
|
|
15140
|
-
/* @__PURE__ */ (0,
|
|
15223
|
+
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 }) }),
|
|
15224
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
15225
|
+
/* @__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
15226
|
import_lucide_react48.ChevronDown,
|
|
15142
15227
|
{
|
|
15143
15228
|
size: 16,
|
|
@@ -15155,9 +15240,9 @@ function createCountTrigger(opts) {
|
|
|
15155
15240
|
}
|
|
15156
15241
|
|
|
15157
15242
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
15158
|
-
var
|
|
15243
|
+
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
15159
15244
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
15160
|
-
return /* @__PURE__ */ (0,
|
|
15245
|
+
return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
|
|
15161
15246
|
"button",
|
|
15162
15247
|
{
|
|
15163
15248
|
type: "button",
|
|
@@ -15168,7 +15253,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15168
15253
|
disabled && "cursor-default opacity-40"
|
|
15169
15254
|
),
|
|
15170
15255
|
children: [
|
|
15171
|
-
/* @__PURE__ */ (0,
|
|
15256
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
15172
15257
|
BaseCheckbox,
|
|
15173
15258
|
{
|
|
15174
15259
|
checked,
|
|
@@ -15178,20 +15263,20 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15178
15263
|
className: "pointer-events-none shrink-0"
|
|
15179
15264
|
}
|
|
15180
15265
|
),
|
|
15181
|
-
/* @__PURE__ */ (0,
|
|
15266
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "flex-1", children: label })
|
|
15182
15267
|
]
|
|
15183
15268
|
}
|
|
15184
15269
|
);
|
|
15185
15270
|
}
|
|
15186
15271
|
|
|
15187
15272
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15188
|
-
var
|
|
15273
|
+
var import_jsx_runtime168 = require("react/jsx-runtime");
|
|
15189
15274
|
function hasPaginationProps(props) {
|
|
15190
15275
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
|
|
15191
15276
|
}
|
|
15192
15277
|
function makeTriggerSlot(render) {
|
|
15193
15278
|
function CustomTrigger(props) {
|
|
15194
|
-
return /* @__PURE__ */ (0,
|
|
15279
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(import_jsx_runtime168.Fragment, { children: render(props.isOpen, props.onContainerClick) });
|
|
15195
15280
|
}
|
|
15196
15281
|
return CustomTrigger;
|
|
15197
15282
|
}
|
|
@@ -15217,25 +15302,62 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15217
15302
|
const isPaginated = hasPaginationProps(
|
|
15218
15303
|
paginationAndRest
|
|
15219
15304
|
);
|
|
15220
|
-
const
|
|
15305
|
+
const scDebugRenderCount = React59.useRef(0);
|
|
15306
|
+
const scDebugPrevPropsRef = React59.useRef({});
|
|
15307
|
+
scDebugRenderCount.current += 1;
|
|
15308
|
+
{
|
|
15309
|
+
const current = {
|
|
15310
|
+
value,
|
|
15311
|
+
defaultValue,
|
|
15312
|
+
onChange,
|
|
15313
|
+
trigger,
|
|
15314
|
+
userComponents,
|
|
15315
|
+
valueText,
|
|
15316
|
+
filterOption,
|
|
15317
|
+
rawOptions,
|
|
15318
|
+
onSearchChange
|
|
15319
|
+
};
|
|
15320
|
+
const prev = scDebugPrevPropsRef.current;
|
|
15321
|
+
const changed = [];
|
|
15322
|
+
for (const key of Object.keys(current)) {
|
|
15323
|
+
if (prev[key] !== current[key]) changed.push(key);
|
|
15324
|
+
}
|
|
15325
|
+
console.log(
|
|
15326
|
+
`[SC-debug] SelectCheckboxes render #${scDebugRenderCount.current}`,
|
|
15327
|
+
{ changed, isPaginated, isControlled: value !== void 0 }
|
|
15328
|
+
);
|
|
15329
|
+
scDebugPrevPropsRef.current = current;
|
|
15330
|
+
if (scDebugRenderCount.current === 30) {
|
|
15331
|
+
console.warn(
|
|
15332
|
+
"[SC-debug] hit 30 renders of SelectCheckboxes \u2014 opening debugger"
|
|
15333
|
+
);
|
|
15334
|
+
debugger;
|
|
15335
|
+
}
|
|
15336
|
+
}
|
|
15337
|
+
const [inputValue, setInputValue] = React59.useState("");
|
|
15221
15338
|
const isControlled = value !== void 0;
|
|
15222
|
-
const [internalValue, setInternalValue] =
|
|
15339
|
+
const [internalValue, setInternalValue] = React59.useState(
|
|
15223
15340
|
() => defaultValue ?? []
|
|
15224
15341
|
);
|
|
15225
15342
|
const currentValue = isControlled ? value : internalValue;
|
|
15226
|
-
const selected =
|
|
15227
|
-
const handleChange =
|
|
15343
|
+
const selected = React59.useMemo(() => currentValue ?? [], [currentValue]);
|
|
15344
|
+
const handleChange = React59.useCallback(
|
|
15228
15345
|
(next, meta) => {
|
|
15346
|
+
console.log("[SC-debug] handleChange", {
|
|
15347
|
+
action: meta?.action,
|
|
15348
|
+
nextLength: next.length,
|
|
15349
|
+
isControlled
|
|
15350
|
+
});
|
|
15229
15351
|
if (!isControlled) setInternalValue(next);
|
|
15230
15352
|
onChange?.(next, meta);
|
|
15231
15353
|
},
|
|
15232
15354
|
[isControlled, onChange]
|
|
15233
15355
|
);
|
|
15234
|
-
const flatRawOptions =
|
|
15356
|
+
const flatRawOptions = React59.useMemo(
|
|
15235
15357
|
() => flattenGroupedOptions(rawOptions),
|
|
15236
15358
|
[rawOptions]
|
|
15237
15359
|
);
|
|
15238
|
-
const filteredGrouped =
|
|
15360
|
+
const filteredGrouped = React59.useMemo(() => {
|
|
15239
15361
|
const trimmed = inputValue.trim();
|
|
15240
15362
|
if (!trimmed) return rawOptions;
|
|
15241
15363
|
return rawOptions.map((item) => {
|
|
@@ -15246,7 +15368,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15246
15368
|
return filterOption(item, trimmed) ? item : null;
|
|
15247
15369
|
}).filter((item) => item !== null);
|
|
15248
15370
|
}, [rawOptions, inputValue, filterOption]);
|
|
15249
|
-
const filteredFlat =
|
|
15371
|
+
const filteredFlat = React59.useMemo(
|
|
15250
15372
|
() => flattenGroupedOptions(filteredGrouped),
|
|
15251
15373
|
[filteredGrouped]
|
|
15252
15374
|
);
|
|
@@ -15254,7 +15376,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15254
15376
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
15255
15377
|
}, 0);
|
|
15256
15378
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
15257
|
-
const handleToggleAll =
|
|
15379
|
+
const handleToggleAll = React59.useCallback(() => {
|
|
15258
15380
|
if (allVisibleSelected) {
|
|
15259
15381
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
15260
15382
|
handleChange(
|
|
@@ -15269,14 +15391,27 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15269
15391
|
}
|
|
15270
15392
|
handleChange(merged, { action: "select" });
|
|
15271
15393
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
15272
|
-
const
|
|
15394
|
+
const valueTextRef = React59.useRef(valueText);
|
|
15395
|
+
const totalCountRef = React59.useRef(flatRawOptions.length);
|
|
15396
|
+
valueTextRef.current = valueText;
|
|
15397
|
+
totalCountRef.current = flatRawOptions.length;
|
|
15398
|
+
const Control = React59.useMemo(() => {
|
|
15399
|
+
console.log("[SC-debug] (re)creating Control component", { hasCustomTrigger: !!trigger });
|
|
15273
15400
|
if (trigger) return makeTriggerSlot(trigger);
|
|
15274
15401
|
return createCountTrigger({
|
|
15275
|
-
|
|
15276
|
-
|
|
15402
|
+
getValueText: () => valueTextRef.current,
|
|
15403
|
+
getTotalCount: () => totalCountRef.current
|
|
15277
15404
|
});
|
|
15278
|
-
}, [trigger
|
|
15279
|
-
const
|
|
15405
|
+
}, [trigger]);
|
|
15406
|
+
const components = React59.useMemo(
|
|
15407
|
+
() => ({
|
|
15408
|
+
...userComponents,
|
|
15409
|
+
Control,
|
|
15410
|
+
Option: userComponents?.Option ?? SelectCheckboxOption
|
|
15411
|
+
}),
|
|
15412
|
+
[userComponents, Control]
|
|
15413
|
+
);
|
|
15414
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15280
15415
|
SelectAllRow,
|
|
15281
15416
|
{
|
|
15282
15417
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -15284,7 +15419,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15284
15419
|
onToggle: handleToggleAll
|
|
15285
15420
|
}
|
|
15286
15421
|
) : void 0;
|
|
15287
|
-
const handleInputChange =
|
|
15422
|
+
const handleInputChange = React59.useCallback(
|
|
15288
15423
|
(next) => {
|
|
15289
15424
|
setInputValue(next);
|
|
15290
15425
|
onSearchChange?.(next);
|
|
@@ -15296,7 +15431,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15296
15431
|
value: currentValue,
|
|
15297
15432
|
onChange: handleChange,
|
|
15298
15433
|
filterOption: passthroughFilter2,
|
|
15299
|
-
|
|
15434
|
+
components,
|
|
15300
15435
|
closeMenuOnSelect,
|
|
15301
15436
|
searchPosition: searchable ? "dropdown" : "trigger",
|
|
15302
15437
|
searchable,
|
|
@@ -15305,7 +15440,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15305
15440
|
isMulti: true
|
|
15306
15441
|
};
|
|
15307
15442
|
if (isPaginated) {
|
|
15308
|
-
return /* @__PURE__ */ (0,
|
|
15443
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15309
15444
|
InfiniteScrollSelect,
|
|
15310
15445
|
{
|
|
15311
15446
|
ref,
|
|
@@ -15316,7 +15451,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15316
15451
|
}
|
|
15317
15452
|
);
|
|
15318
15453
|
}
|
|
15319
|
-
return /* @__PURE__ */ (0,
|
|
15454
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15320
15455
|
Select,
|
|
15321
15456
|
{
|
|
15322
15457
|
ref,
|
|
@@ -15327,70 +15462,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15327
15462
|
}
|
|
15328
15463
|
);
|
|
15329
15464
|
}
|
|
15330
|
-
var SelectCheckboxes =
|
|
15465
|
+
var SelectCheckboxes = React59.forwardRef(
|
|
15331
15466
|
SelectCheckboxesInternal
|
|
15332
15467
|
);
|
|
15333
15468
|
|
|
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
15469
|
// src/dashboard/textarea/Textarea.tsx
|
|
15389
|
-
var
|
|
15470
|
+
var React61 = __toESM(require("react"), 1);
|
|
15390
15471
|
var import_react_i18next37 = require("react-i18next");
|
|
15391
15472
|
|
|
15392
15473
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15393
|
-
var
|
|
15474
|
+
var React60 = __toESM(require("react"), 1);
|
|
15394
15475
|
var isEmptyValue2 = (value) => {
|
|
15395
15476
|
if (value === void 0 || value === null) return true;
|
|
15396
15477
|
return String(value).length === 0;
|
|
@@ -15409,12 +15490,12 @@ function useTextareaValueState({
|
|
|
15409
15490
|
value,
|
|
15410
15491
|
defaultValue
|
|
15411
15492
|
}) {
|
|
15412
|
-
const textareaRef =
|
|
15493
|
+
const textareaRef = React60.useRef(null);
|
|
15413
15494
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15414
15495
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15415
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15496
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React60.useState(propsAreEmpty);
|
|
15416
15497
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15417
|
-
const setNativeValue =
|
|
15498
|
+
const setNativeValue = React60.useCallback(
|
|
15418
15499
|
(nextValue) => {
|
|
15419
15500
|
if (isControlled) return;
|
|
15420
15501
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15424,14 +15505,14 @@ function useTextareaValueState({
|
|
|
15424
15505
|
},
|
|
15425
15506
|
[isControlled]
|
|
15426
15507
|
);
|
|
15427
|
-
const syncValueState =
|
|
15508
|
+
const syncValueState = React60.useCallback(() => {
|
|
15428
15509
|
if (!textareaRef.current) return;
|
|
15429
15510
|
setNativeValue(textareaRef.current.value);
|
|
15430
15511
|
}, [setNativeValue]);
|
|
15431
|
-
|
|
15512
|
+
React60.useLayoutEffect(() => {
|
|
15432
15513
|
syncValueState();
|
|
15433
15514
|
});
|
|
15434
|
-
|
|
15515
|
+
React60.useEffect(() => {
|
|
15435
15516
|
const textarea = textareaRef.current;
|
|
15436
15517
|
const form = textarea?.form;
|
|
15437
15518
|
if (isControlled || !form) return;
|
|
@@ -15458,7 +15539,7 @@ function useTextareaValueState({
|
|
|
15458
15539
|
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
15459
15540
|
var LINE_HEIGHT = 20;
|
|
15460
15541
|
var VERTICAL_PADDING = 32;
|
|
15461
|
-
var Textarea =
|
|
15542
|
+
var Textarea = React61.forwardRef(function Textarea2({
|
|
15462
15543
|
className,
|
|
15463
15544
|
textareaClassName,
|
|
15464
15545
|
label,
|
|
@@ -15486,12 +15567,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15486
15567
|
}, ref) {
|
|
15487
15568
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15488
15569
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15489
|
-
const reactId =
|
|
15570
|
+
const reactId = React61.useId();
|
|
15490
15571
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15491
15572
|
const { t } = (0, import_react_i18next37.useTranslation)();
|
|
15492
15573
|
const isInvalid = Boolean(invalid || error);
|
|
15493
15574
|
const isBlocked = Boolean(disabled);
|
|
15494
|
-
const resize =
|
|
15575
|
+
const resize = React61.useCallback(() => {
|
|
15495
15576
|
const el = textareaRef.current;
|
|
15496
15577
|
if (!el || !autosize) return;
|
|
15497
15578
|
el.style.height = "auto";
|
|
@@ -15501,7 +15582,7 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15501
15582
|
el.style.height = `${nextHeight}px`;
|
|
15502
15583
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15503
15584
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15504
|
-
|
|
15585
|
+
React61.useLayoutEffect(() => {
|
|
15505
15586
|
resize();
|
|
15506
15587
|
}, [resize, value]);
|
|
15507
15588
|
const handleInput = (event) => {
|
|
@@ -15593,12 +15674,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15593
15674
|
});
|
|
15594
15675
|
|
|
15595
15676
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15596
|
-
var
|
|
15677
|
+
var React63 = __toESM(require("react"), 1);
|
|
15597
15678
|
var import_lucide_react49 = require("lucide-react");
|
|
15598
15679
|
var import_react_i18next38 = require("react-i18next");
|
|
15599
15680
|
|
|
15600
15681
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15601
|
-
var
|
|
15682
|
+
var React62 = __toESM(require("react"), 1);
|
|
15602
15683
|
|
|
15603
15684
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15604
15685
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15749,21 +15830,21 @@ function useDatePickerWheel({
|
|
|
15749
15830
|
minDate,
|
|
15750
15831
|
maxDate
|
|
15751
15832
|
}) {
|
|
15752
|
-
const years =
|
|
15753
|
-
const [draftDate, setDraftDate] =
|
|
15833
|
+
const years = React62.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15834
|
+
const [draftDate, setDraftDate] = React62.useState(
|
|
15754
15835
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15755
15836
|
);
|
|
15756
15837
|
const draftYear = draftDate.getFullYear();
|
|
15757
15838
|
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 =
|
|
15839
|
+
const [monthScrollTop, setMonthScrollTop] = React62.useState(0);
|
|
15840
|
+
const [dayScrollTop, setDayScrollTop] = React62.useState(0);
|
|
15841
|
+
const [yearScrollTop, setYearScrollTop] = React62.useState(0);
|
|
15842
|
+
const monthListRef = React62.useRef(null);
|
|
15843
|
+
const dayListRef = React62.useRef(null);
|
|
15844
|
+
const yearListRef = React62.useRef(null);
|
|
15845
|
+
const settleTimeoutsRef = React62.useRef({});
|
|
15846
|
+
const animationFramesRef = React62.useRef({});
|
|
15847
|
+
const columnRefs = React62.useMemo(
|
|
15767
15848
|
() => ({
|
|
15768
15849
|
month: monthListRef,
|
|
15769
15850
|
day: dayListRef,
|
|
@@ -15771,7 +15852,7 @@ function useDatePickerWheel({
|
|
|
15771
15852
|
}),
|
|
15772
15853
|
[]
|
|
15773
15854
|
);
|
|
15774
|
-
const setColumnScrollTop =
|
|
15855
|
+
const setColumnScrollTop = React62.useCallback(
|
|
15775
15856
|
(column, nextScrollTop) => {
|
|
15776
15857
|
if (column === "month") {
|
|
15777
15858
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15785,19 +15866,19 @@ function useDatePickerWheel({
|
|
|
15785
15866
|
},
|
|
15786
15867
|
[]
|
|
15787
15868
|
);
|
|
15788
|
-
const clearSettleTimeout =
|
|
15869
|
+
const clearSettleTimeout = React62.useCallback((column) => {
|
|
15789
15870
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15790
15871
|
if (timeoutId === void 0) return;
|
|
15791
15872
|
window.clearTimeout(timeoutId);
|
|
15792
15873
|
delete settleTimeoutsRef.current[column];
|
|
15793
15874
|
}, []);
|
|
15794
|
-
const clearAnimationFrame =
|
|
15875
|
+
const clearAnimationFrame = React62.useCallback((column) => {
|
|
15795
15876
|
const frameId = animationFramesRef.current[column];
|
|
15796
15877
|
if (frameId === void 0) return;
|
|
15797
15878
|
window.cancelAnimationFrame(frameId);
|
|
15798
15879
|
delete animationFramesRef.current[column];
|
|
15799
15880
|
}, []);
|
|
15800
|
-
|
|
15881
|
+
React62.useEffect(
|
|
15801
15882
|
() => () => {
|
|
15802
15883
|
["month", "day", "year"].forEach((column) => {
|
|
15803
15884
|
clearSettleTimeout(column);
|
|
@@ -15806,22 +15887,22 @@ function useDatePickerWheel({
|
|
|
15806
15887
|
},
|
|
15807
15888
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15808
15889
|
);
|
|
15809
|
-
|
|
15890
|
+
React62.useEffect(() => {
|
|
15810
15891
|
if (isOpen) return;
|
|
15811
15892
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15812
15893
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15813
|
-
const months =
|
|
15894
|
+
const months = React62.useMemo(
|
|
15814
15895
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15815
15896
|
[draftYear, maxDate, minDate]
|
|
15816
15897
|
);
|
|
15817
|
-
const days =
|
|
15898
|
+
const days = React62.useMemo(
|
|
15818
15899
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15819
15900
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15820
15901
|
);
|
|
15821
15902
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15822
15903
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15823
15904
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15824
|
-
const syncScrollPositions =
|
|
15905
|
+
const syncScrollPositions = React62.useCallback(
|
|
15825
15906
|
(nextDate, behavior = "auto") => {
|
|
15826
15907
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15827
15908
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15845,7 +15926,7 @@ function useDatePickerWheel({
|
|
|
15845
15926
|
},
|
|
15846
15927
|
[maxDate, minDate, years]
|
|
15847
15928
|
);
|
|
15848
|
-
|
|
15929
|
+
React62.useLayoutEffect(() => {
|
|
15849
15930
|
if (!isOpen) return;
|
|
15850
15931
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15851
15932
|
setDraftDate(nextDate);
|
|
@@ -15856,7 +15937,7 @@ function useDatePickerWheel({
|
|
|
15856
15937
|
window.cancelAnimationFrame(frameId);
|
|
15857
15938
|
};
|
|
15858
15939
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15859
|
-
const updateDraftDate =
|
|
15940
|
+
const updateDraftDate = React62.useCallback(
|
|
15860
15941
|
(column, targetIndex, behavior = "smooth") => {
|
|
15861
15942
|
const currentDate = stripTime(draftDate);
|
|
15862
15943
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15901,7 +15982,7 @@ function useDatePickerWheel({
|
|
|
15901
15982
|
},
|
|
15902
15983
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15903
15984
|
);
|
|
15904
|
-
const settleColumnScroll =
|
|
15985
|
+
const settleColumnScroll = React62.useCallback(
|
|
15905
15986
|
(column) => {
|
|
15906
15987
|
const list = columnRefs[column].current;
|
|
15907
15988
|
if (!list) return;
|
|
@@ -15914,7 +15995,7 @@ function useDatePickerWheel({
|
|
|
15914
15995
|
},
|
|
15915
15996
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15916
15997
|
);
|
|
15917
|
-
const scheduleScrollSettle =
|
|
15998
|
+
const scheduleScrollSettle = React62.useCallback(
|
|
15918
15999
|
(column) => {
|
|
15919
16000
|
clearSettleTimeout(column);
|
|
15920
16001
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15923,7 +16004,7 @@ function useDatePickerWheel({
|
|
|
15923
16004
|
},
|
|
15924
16005
|
[clearSettleTimeout, settleColumnScroll]
|
|
15925
16006
|
);
|
|
15926
|
-
const handleColumnScroll =
|
|
16007
|
+
const handleColumnScroll = React62.useCallback(
|
|
15927
16008
|
(column) => {
|
|
15928
16009
|
const list = columnRefs[column].current;
|
|
15929
16010
|
if (!list) return;
|
|
@@ -15937,13 +16018,13 @@ function useDatePickerWheel({
|
|
|
15937
16018
|
},
|
|
15938
16019
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15939
16020
|
);
|
|
15940
|
-
const handleOptionSelect =
|
|
16021
|
+
const handleOptionSelect = React62.useCallback(
|
|
15941
16022
|
(column, targetIndex) => {
|
|
15942
16023
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15943
16024
|
},
|
|
15944
16025
|
[updateDraftDate]
|
|
15945
16026
|
);
|
|
15946
|
-
const focusAdjacentColumn =
|
|
16027
|
+
const focusAdjacentColumn = React62.useCallback(
|
|
15947
16028
|
(column, direction) => {
|
|
15948
16029
|
const order = ["month", "day", "year"];
|
|
15949
16030
|
const currentIndex = order.indexOf(column);
|
|
@@ -15953,7 +16034,7 @@ function useDatePickerWheel({
|
|
|
15953
16034
|
},
|
|
15954
16035
|
[columnRefs]
|
|
15955
16036
|
);
|
|
15956
|
-
const handleColumnKeyDown =
|
|
16037
|
+
const handleColumnKeyDown = React62.useCallback(
|
|
15957
16038
|
(column, event) => {
|
|
15958
16039
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15959
16040
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -16275,7 +16356,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
16275
16356
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
16276
16357
|
return new Date(yearNum, monthIndex, dayNum);
|
|
16277
16358
|
}
|
|
16278
|
-
var Datepicker =
|
|
16359
|
+
var Datepicker = React63.forwardRef(
|
|
16279
16360
|
function Datepicker2({
|
|
16280
16361
|
label,
|
|
16281
16362
|
value,
|
|
@@ -16308,14 +16389,14 @@ var Datepicker = React62.forwardRef(
|
|
|
16308
16389
|
maxDate,
|
|
16309
16390
|
formatValue
|
|
16310
16391
|
}, 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 =
|
|
16392
|
+
const containerRef = React63.useRef(null);
|
|
16393
|
+
const dayInputRef = React63.useRef(null);
|
|
16394
|
+
const monthInputRef = React63.useRef(null);
|
|
16395
|
+
const monthListRef = React63.useRef(null);
|
|
16396
|
+
const yearInputRef = React63.useRef(null);
|
|
16397
|
+
const mobileTriggerRef = React63.useRef(null);
|
|
16398
|
+
const wheelBaseId = React63.useId();
|
|
16399
|
+
const reactId = React63.useId();
|
|
16319
16400
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
16320
16401
|
const dayId = `${baseId}-day`;
|
|
16321
16402
|
const monthId = `${baseId}-month`;
|
|
@@ -16324,38 +16405,38 @@ var Datepicker = React62.forwardRef(
|
|
|
16324
16405
|
const errorId = `${baseId}-error`;
|
|
16325
16406
|
const { t, i18n } = (0, import_react_i18next38.useTranslation)();
|
|
16326
16407
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
16327
|
-
const resolvedMonthLabels =
|
|
16408
|
+
const resolvedMonthLabels = React63.useMemo(
|
|
16328
16409
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
16329
16410
|
[resolvedLocale, monthLabels]
|
|
16330
16411
|
);
|
|
16331
16412
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
16332
16413
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
16333
16414
|
const isControlled = value !== void 0;
|
|
16334
|
-
const initialParts =
|
|
16415
|
+
const initialParts = React63.useMemo(
|
|
16335
16416
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
16336
16417
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16337
16418
|
[]
|
|
16338
16419
|
);
|
|
16339
|
-
const [day, setDay] =
|
|
16340
|
-
const [monthIndex, setMonthIndex] =
|
|
16420
|
+
const [day, setDay] = React63.useState(initialParts.day);
|
|
16421
|
+
const [monthIndex, setMonthIndex] = React63.useState(
|
|
16341
16422
|
initialParts.monthIndex
|
|
16342
16423
|
);
|
|
16343
|
-
const [year, setYear] =
|
|
16344
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
16345
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
16346
|
-
const [focusedField, setFocusedField] =
|
|
16347
|
-
const [monthInputValue, setMonthInputValue] =
|
|
16348
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
16424
|
+
const [year, setYear] = React63.useState(initialParts.year);
|
|
16425
|
+
const [isMonthOpen, setIsMonthOpen] = React63.useState(false);
|
|
16426
|
+
const [isWheelOpen, setIsWheelOpen] = React63.useState(false);
|
|
16427
|
+
const [focusedField, setFocusedField] = React63.useState(null);
|
|
16428
|
+
const [monthInputValue, setMonthInputValue] = React63.useState("");
|
|
16429
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React63.useState(-1);
|
|
16349
16430
|
const isMobile3 = useIsMobile();
|
|
16350
|
-
const emitChangeRef =
|
|
16431
|
+
const emitChangeRef = React63.useRef(() => {
|
|
16351
16432
|
});
|
|
16352
|
-
const dayStateRef =
|
|
16353
|
-
const yearStateRef =
|
|
16354
|
-
const monthIndexRef =
|
|
16433
|
+
const dayStateRef = React63.useRef(day);
|
|
16434
|
+
const yearStateRef = React63.useRef(year);
|
|
16435
|
+
const monthIndexRef = React63.useRef(monthIndex);
|
|
16355
16436
|
dayStateRef.current = day;
|
|
16356
16437
|
yearStateRef.current = year;
|
|
16357
16438
|
monthIndexRef.current = monthIndex;
|
|
16358
|
-
|
|
16439
|
+
React63.useImperativeHandle(
|
|
16359
16440
|
ref,
|
|
16360
16441
|
() => ({
|
|
16361
16442
|
getDayValue: () => dayStateRef.current,
|
|
@@ -16373,27 +16454,27 @@ var Datepicker = React62.forwardRef(
|
|
|
16373
16454
|
}),
|
|
16374
16455
|
[]
|
|
16375
16456
|
);
|
|
16376
|
-
|
|
16457
|
+
React63.useEffect(() => {
|
|
16377
16458
|
if (!isControlled) return;
|
|
16378
16459
|
const next = partsFromDate(value ?? null);
|
|
16379
16460
|
setDay(next.day);
|
|
16380
16461
|
setMonthIndex(next.monthIndex);
|
|
16381
16462
|
setYear(next.year);
|
|
16382
16463
|
}, [isControlled, value]);
|
|
16383
|
-
|
|
16464
|
+
React63.useEffect(() => {
|
|
16384
16465
|
if (focusedField === "month") return;
|
|
16385
16466
|
setMonthInputValue(
|
|
16386
16467
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16387
16468
|
);
|
|
16388
16469
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16389
|
-
const filteredMonths =
|
|
16470
|
+
const filteredMonths = React63.useMemo(() => {
|
|
16390
16471
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16391
16472
|
const query = monthInputValue.trim().toLowerCase();
|
|
16392
16473
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16393
16474
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16394
16475
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16395
16476
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16396
|
-
|
|
16477
|
+
React63.useEffect(() => {
|
|
16397
16478
|
if (!isMonthOpen) {
|
|
16398
16479
|
setMonthHighlightIndex(-1);
|
|
16399
16480
|
return;
|
|
@@ -16414,7 +16495,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16414
16495
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16415
16496
|
const isInvalid = Boolean(invalid || error);
|
|
16416
16497
|
const wrapperWidth = toCssSize(width);
|
|
16417
|
-
const currentDate =
|
|
16498
|
+
const currentDate = React63.useMemo(
|
|
16418
16499
|
() => dateFromParts(day, monthIndex, year),
|
|
16419
16500
|
[day, monthIndex, year]
|
|
16420
16501
|
);
|
|
@@ -16423,7 +16504,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16423
16504
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16424
16505
|
isDisabled: !isMonthOpen || isMobile3
|
|
16425
16506
|
});
|
|
16426
|
-
const emitChange =
|
|
16507
|
+
const emitChange = React63.useCallback(
|
|
16427
16508
|
(nextDay, nextMonth, nextYear) => {
|
|
16428
16509
|
if (!onChange) return;
|
|
16429
16510
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16459,7 +16540,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16459
16540
|
setIsMonthOpen(true);
|
|
16460
16541
|
setMonthHighlightIndex(0);
|
|
16461
16542
|
};
|
|
16462
|
-
const commitMonthInput =
|
|
16543
|
+
const commitMonthInput = React63.useCallback(() => {
|
|
16463
16544
|
const query = monthInputValue.trim().toLowerCase();
|
|
16464
16545
|
if (!query) {
|
|
16465
16546
|
if (monthIndex !== null) {
|
|
@@ -16519,15 +16600,15 @@ var Datepicker = React62.forwardRef(
|
|
|
16519
16600
|
setIsMonthOpen(false);
|
|
16520
16601
|
}
|
|
16521
16602
|
};
|
|
16522
|
-
const focusDayInput =
|
|
16603
|
+
const focusDayInput = React63.useCallback(() => {
|
|
16523
16604
|
if (isBlocked || readOnly) return;
|
|
16524
16605
|
dayInputRef.current?.focus();
|
|
16525
16606
|
}, [isBlocked, readOnly]);
|
|
16526
|
-
const openWheel =
|
|
16607
|
+
const openWheel = React63.useCallback(() => {
|
|
16527
16608
|
if (isBlocked || readOnly) return;
|
|
16528
16609
|
setIsWheelOpen(true);
|
|
16529
16610
|
}, [isBlocked, readOnly]);
|
|
16530
|
-
const closeWheel =
|
|
16611
|
+
const closeWheel = React63.useCallback(() => {
|
|
16531
16612
|
setIsWheelOpen(false);
|
|
16532
16613
|
mobileTriggerRef.current?.focus();
|
|
16533
16614
|
}, []);
|
|
@@ -16539,7 +16620,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16539
16620
|
minDate,
|
|
16540
16621
|
maxDate
|
|
16541
16622
|
});
|
|
16542
|
-
const handleWheelDone =
|
|
16623
|
+
const handleWheelDone = React63.useCallback(() => {
|
|
16543
16624
|
const next = wheel.draftDate;
|
|
16544
16625
|
setDay(String(next.getDate()));
|
|
16545
16626
|
setMonthIndex(next.getMonth());
|
|
@@ -16548,7 +16629,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16548
16629
|
setIsWheelOpen(false);
|
|
16549
16630
|
mobileTriggerRef.current?.focus();
|
|
16550
16631
|
}, [name, onChange, wheel.draftDate]);
|
|
16551
|
-
const defaultFormatValue =
|
|
16632
|
+
const defaultFormatValue = React63.useCallback(
|
|
16552
16633
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16553
16634
|
[resolvedMonthLabels]
|
|
16554
16635
|
);
|
|
@@ -16844,7 +16925,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16844
16925
|
);
|
|
16845
16926
|
|
|
16846
16927
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16847
|
-
var
|
|
16928
|
+
var React67 = __toESM(require("react"), 1);
|
|
16848
16929
|
var import_react_i18next39 = require("react-i18next");
|
|
16849
16930
|
|
|
16850
16931
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16923,7 +17004,7 @@ var createDisabledMatchers = ({
|
|
|
16923
17004
|
};
|
|
16924
17005
|
|
|
16925
17006
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16926
|
-
var
|
|
17007
|
+
var React64 = __toESM(require("react"), 1);
|
|
16927
17008
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16928
17009
|
function useRangeValue({
|
|
16929
17010
|
value: externalValue,
|
|
@@ -16932,10 +17013,10 @@ function useRangeValue({
|
|
|
16932
17013
|
name
|
|
16933
17014
|
}) {
|
|
16934
17015
|
const isControlled = externalValue !== void 0;
|
|
16935
|
-
const [draft, setDraft] =
|
|
17016
|
+
const [draft, setDraft] = React64.useState(
|
|
16936
17017
|
isControlled ? externalValue : defaultValue
|
|
16937
17018
|
);
|
|
16938
|
-
const lastExternalKeyRef =
|
|
17019
|
+
const lastExternalKeyRef = React64.useRef(getRangeKey(externalValue));
|
|
16939
17020
|
if (isControlled) {
|
|
16940
17021
|
const externalKey = getRangeKey(externalValue);
|
|
16941
17022
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16943,7 +17024,7 @@ function useRangeValue({
|
|
|
16943
17024
|
setDraft(externalValue);
|
|
16944
17025
|
}
|
|
16945
17026
|
}
|
|
16946
|
-
const commit =
|
|
17027
|
+
const commit = React64.useCallback(
|
|
16947
17028
|
(next) => {
|
|
16948
17029
|
setDraft(next);
|
|
16949
17030
|
if (next === void 0) {
|
|
@@ -16958,7 +17039,7 @@ function useRangeValue({
|
|
|
16958
17039
|
}
|
|
16959
17040
|
|
|
16960
17041
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16961
|
-
var
|
|
17042
|
+
var React65 = __toESM(require("react"), 1);
|
|
16962
17043
|
|
|
16963
17044
|
// src/dashboard/date-range-picker/utils/inputFormat.ts
|
|
16964
17045
|
function parseDateInputFormat(format2) {
|
|
@@ -17048,18 +17129,18 @@ function useRangeTextInputs({
|
|
|
17048
17129
|
onFromComplete,
|
|
17049
17130
|
onToComplete
|
|
17050
17131
|
}) {
|
|
17051
|
-
const tokens =
|
|
17132
|
+
const tokens = React65.useMemo(
|
|
17052
17133
|
() => parseDateInputFormat(displayFormat),
|
|
17053
17134
|
[displayFormat]
|
|
17054
17135
|
);
|
|
17055
|
-
const maxDigits =
|
|
17056
|
-
const [fromText, setFromText] =
|
|
17057
|
-
const [toText, setToText] =
|
|
17058
|
-
|
|
17136
|
+
const maxDigits = React65.useMemo(() => getMaxDigits(tokens), [tokens]);
|
|
17137
|
+
const [fromText, setFromText] = React65.useState(value?.from ? format2(value.from) : "");
|
|
17138
|
+
const [toText, setToText] = React65.useState(value?.to ? format2(value.to) : "");
|
|
17139
|
+
React65.useEffect(() => {
|
|
17059
17140
|
setFromText(value?.from ? format2(value.from) : "");
|
|
17060
17141
|
setToText(value?.to ? format2(value.to) : "");
|
|
17061
17142
|
}, [format2, value?.from, value?.to]);
|
|
17062
|
-
const handleFromChange =
|
|
17143
|
+
const handleFromChange = React65.useCallback(
|
|
17063
17144
|
(raw) => {
|
|
17064
17145
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
17065
17146
|
const wasComplete = countDigits(fromText) === maxDigits;
|
|
@@ -17071,7 +17152,7 @@ function useRangeTextInputs({
|
|
|
17071
17152
|
},
|
|
17072
17153
|
[fromText, maxDigits, onFromComplete, parse3, tokens]
|
|
17073
17154
|
);
|
|
17074
|
-
const handleToChange =
|
|
17155
|
+
const handleToChange = React65.useCallback(
|
|
17075
17156
|
(raw) => {
|
|
17076
17157
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
17077
17158
|
const wasComplete = countDigits(toText) === maxDigits;
|
|
@@ -17083,7 +17164,7 @@ function useRangeTextInputs({
|
|
|
17083
17164
|
},
|
|
17084
17165
|
[maxDigits, onToComplete, parse3, toText, tokens]
|
|
17085
17166
|
);
|
|
17086
|
-
const handleFromBlur =
|
|
17167
|
+
const handleFromBlur = React65.useCallback(() => {
|
|
17087
17168
|
if (!fromText) {
|
|
17088
17169
|
const next = { from: void 0, to: value?.to };
|
|
17089
17170
|
onCommit(next);
|
|
@@ -17100,7 +17181,7 @@ function useRangeTextInputs({
|
|
|
17100
17181
|
setFromText(value?.from ? format2(value.from) : "");
|
|
17101
17182
|
return void 0;
|
|
17102
17183
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
17103
|
-
const handleToBlur =
|
|
17184
|
+
const handleToBlur = React65.useCallback(() => {
|
|
17104
17185
|
if (!toText) {
|
|
17105
17186
|
const next = { from: value?.from, to: void 0 };
|
|
17106
17187
|
onCommit(next);
|
|
@@ -17129,21 +17210,21 @@ function useRangeTextInputs({
|
|
|
17129
17210
|
}
|
|
17130
17211
|
|
|
17131
17212
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
17132
|
-
var
|
|
17213
|
+
var React66 = __toESM(require("react"), 1);
|
|
17133
17214
|
function useRangeMonthSync(value) {
|
|
17134
|
-
const isPreloadedRef =
|
|
17135
|
-
const [month, setMonth] =
|
|
17136
|
-
|
|
17215
|
+
const isPreloadedRef = React66.useRef(false);
|
|
17216
|
+
const [month, setMonth] = React66.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
17217
|
+
React66.useEffect(() => {
|
|
17137
17218
|
if (value?.from && !isPreloadedRef.current) {
|
|
17138
17219
|
setMonth(value.from);
|
|
17139
17220
|
isPreloadedRef.current = true;
|
|
17140
17221
|
}
|
|
17141
17222
|
}, [value?.from]);
|
|
17142
|
-
const syncMonthToValue =
|
|
17223
|
+
const syncMonthToValue = React66.useCallback((next) => {
|
|
17143
17224
|
isPreloadedRef.current = true;
|
|
17144
17225
|
if (next?.from) setMonth(next.from);
|
|
17145
17226
|
}, []);
|
|
17146
|
-
const resetPreload =
|
|
17227
|
+
const resetPreload = React66.useCallback(() => {
|
|
17147
17228
|
isPreloadedRef.current = false;
|
|
17148
17229
|
}, []);
|
|
17149
17230
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -17403,7 +17484,7 @@ function DateRangePopover({
|
|
|
17403
17484
|
|
|
17404
17485
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17405
17486
|
var import_jsx_runtime176 = require("react/jsx-runtime");
|
|
17406
|
-
var DateRangePicker =
|
|
17487
|
+
var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
17407
17488
|
label,
|
|
17408
17489
|
value: externalValue,
|
|
17409
17490
|
defaultValue,
|
|
@@ -17438,20 +17519,20 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17438
17519
|
components: customComponents,
|
|
17439
17520
|
...dayPickerProps
|
|
17440
17521
|
}, ref) {
|
|
17441
|
-
const containerRef =
|
|
17442
|
-
const fromInputRef =
|
|
17443
|
-
const toInputRef =
|
|
17444
|
-
const reactId =
|
|
17522
|
+
const containerRef = React67.useRef(null);
|
|
17523
|
+
const fromInputRef = React67.useRef(null);
|
|
17524
|
+
const toInputRef = React67.useRef(null);
|
|
17525
|
+
const reactId = React67.useId();
|
|
17445
17526
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17446
17527
|
const fromId = `${baseId}-from`;
|
|
17447
17528
|
const toId = `${baseId}-to`;
|
|
17448
17529
|
const labelId = `${baseId}-label`;
|
|
17449
17530
|
const errorId = `${baseId}-error`;
|
|
17450
|
-
const normalizedValue =
|
|
17531
|
+
const normalizedValue = React67.useMemo(() => {
|
|
17451
17532
|
if (externalValue === void 0) return void 0;
|
|
17452
17533
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17453
17534
|
}, [externalValue]);
|
|
17454
|
-
const normalizedDefaultValue =
|
|
17535
|
+
const normalizedDefaultValue = React67.useMemo(() => {
|
|
17455
17536
|
if (defaultValue === void 0) return void 0;
|
|
17456
17537
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17457
17538
|
}, [defaultValue]);
|
|
@@ -17461,16 +17542,16 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17461
17542
|
onChange,
|
|
17462
17543
|
name
|
|
17463
17544
|
});
|
|
17464
|
-
const normalizedMinDate =
|
|
17465
|
-
const normalizedMaxDate =
|
|
17466
|
-
const formatter =
|
|
17467
|
-
const parser =
|
|
17468
|
-
const closeCalendarRef =
|
|
17545
|
+
const normalizedMinDate = React67.useMemo(() => toDate(minDate), [minDate]);
|
|
17546
|
+
const normalizedMaxDate = React67.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17547
|
+
const formatter = React67.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17548
|
+
const parser = React67.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17549
|
+
const closeCalendarRef = React67.useRef(() => {
|
|
17469
17550
|
});
|
|
17470
|
-
const handleFromComplete =
|
|
17551
|
+
const handleFromComplete = React67.useCallback(() => {
|
|
17471
17552
|
toInputRef.current?.focus();
|
|
17472
17553
|
}, []);
|
|
17473
|
-
const handleToComplete =
|
|
17554
|
+
const handleToComplete = React67.useCallback(() => {
|
|
17474
17555
|
toInputRef.current?.blur();
|
|
17475
17556
|
closeCalendarRef.current();
|
|
17476
17557
|
}, []);
|
|
@@ -17494,9 +17575,9 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17494
17575
|
onToComplete: handleToComplete
|
|
17495
17576
|
});
|
|
17496
17577
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17497
|
-
const [isOpen, setIsOpen] =
|
|
17498
|
-
const [focusedInput, setFocusedInput] =
|
|
17499
|
-
const [autoFocus, setAutoFocus] =
|
|
17578
|
+
const [isOpen, setIsOpen] = React67.useState(false);
|
|
17579
|
+
const [focusedInput, setFocusedInput] = React67.useState(null);
|
|
17580
|
+
const [autoFocus, setAutoFocus] = React67.useState(false);
|
|
17500
17581
|
const isMobile3 = useIsMobile();
|
|
17501
17582
|
const { t } = (0, import_react_i18next39.useTranslation)();
|
|
17502
17583
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17507,14 +17588,14 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17507
17588
|
const isFocused = focusedInput !== null || isOpen;
|
|
17508
17589
|
const wrapperWidth = toCssSize(width);
|
|
17509
17590
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17510
|
-
const closeCalendar =
|
|
17591
|
+
const closeCalendar = React67.useCallback(() => {
|
|
17511
17592
|
setIsOpen(false);
|
|
17512
17593
|
setFocusedInput(null);
|
|
17513
17594
|
setAutoFocus(false);
|
|
17514
17595
|
if (value?.from) setMonth(value.from);
|
|
17515
17596
|
}, [setMonth, value?.from]);
|
|
17516
17597
|
closeCalendarRef.current = closeCalendar;
|
|
17517
|
-
const openCalendar =
|
|
17598
|
+
const openCalendar = React67.useCallback(() => {
|
|
17518
17599
|
if (isBlocked || readOnly) return;
|
|
17519
17600
|
setIsOpen(true);
|
|
17520
17601
|
}, [isBlocked, readOnly]);
|
|
@@ -17523,7 +17604,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17523
17604
|
onOutsideClick: closeCalendar,
|
|
17524
17605
|
isDisabled: !isOpen || isMobile3
|
|
17525
17606
|
});
|
|
17526
|
-
const handlePickerChange =
|
|
17607
|
+
const handlePickerChange = React67.useCallback(
|
|
17527
17608
|
(range, pickedDate) => {
|
|
17528
17609
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17529
17610
|
previous: value,
|
|
@@ -17544,7 +17625,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17544
17625
|
setToText("");
|
|
17545
17626
|
setMonth(/* @__PURE__ */ new Date());
|
|
17546
17627
|
};
|
|
17547
|
-
const disabledMatchers =
|
|
17628
|
+
const disabledMatchers = React67.useMemo(
|
|
17548
17629
|
() => createDisabledMatchers({
|
|
17549
17630
|
minDate: normalizedMinDate,
|
|
17550
17631
|
maxDate: normalizedMaxDate,
|
|
@@ -17563,7 +17644,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17563
17644
|
openCalendar();
|
|
17564
17645
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17565
17646
|
};
|
|
17566
|
-
|
|
17647
|
+
React67.useImperativeHandle(
|
|
17567
17648
|
ref,
|
|
17568
17649
|
() => ({
|
|
17569
17650
|
setDateRange: (range) => {
|
|
@@ -17744,7 +17825,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17744
17825
|
});
|
|
17745
17826
|
|
|
17746
17827
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17747
|
-
var
|
|
17828
|
+
var React68 = __toESM(require("react"), 1);
|
|
17748
17829
|
var import_react_i18next40 = require("react-i18next");
|
|
17749
17830
|
var import_date_fns4 = require("date-fns");
|
|
17750
17831
|
var import_react_day_picker2 = require("react-day-picker");
|
|
@@ -17767,11 +17848,11 @@ function useValidateDates({
|
|
|
17767
17848
|
const { t } = (0, import_react_i18next40.useTranslation)();
|
|
17768
17849
|
const handleError = useEvent(onError);
|
|
17769
17850
|
const handleSuccess = useEvent(onSuccess);
|
|
17770
|
-
const errorFormatter =
|
|
17851
|
+
const errorFormatter = React68.useMemo(
|
|
17771
17852
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17772
17853
|
[displayFormat]
|
|
17773
17854
|
);
|
|
17774
|
-
const validateDates =
|
|
17855
|
+
const validateDates = React68.useCallback(
|
|
17775
17856
|
(dates) => {
|
|
17776
17857
|
const startDate = dates?.from;
|
|
17777
17858
|
const endDate = dates?.to;
|
|
@@ -17821,7 +17902,7 @@ function useValidateDates({
|
|
|
17821
17902
|
}
|
|
17822
17903
|
|
|
17823
17904
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17824
|
-
var
|
|
17905
|
+
var React69 = __toESM(require("react"), 1);
|
|
17825
17906
|
var import_date_fns5 = require("date-fns");
|
|
17826
17907
|
var import_jsx_runtime177 = require("react/jsx-runtime");
|
|
17827
17908
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
@@ -17865,8 +17946,8 @@ var FORMAT_SETTINGS = {
|
|
|
17865
17946
|
},
|
|
17866
17947
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17867
17948
|
};
|
|
17868
|
-
var TimePicker =
|
|
17869
|
-
const resolvedOptions =
|
|
17949
|
+
var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17950
|
+
const resolvedOptions = React69.useMemo(() => {
|
|
17870
17951
|
if (options) return options;
|
|
17871
17952
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17872
17953
|
return buildOptions(settings);
|
|
@@ -17875,14 +17956,14 @@ var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName =
|
|
|
17875
17956
|
});
|
|
17876
17957
|
|
|
17877
17958
|
// src/dashboard/file-input/FileInput.tsx
|
|
17878
|
-
var
|
|
17959
|
+
var React70 = __toESM(require("react"), 1);
|
|
17879
17960
|
var import_lucide_react51 = require("lucide-react");
|
|
17880
17961
|
var import_react_i18next41 = require("react-i18next");
|
|
17881
17962
|
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
17882
17963
|
function defaultDownload(url) {
|
|
17883
17964
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17884
17965
|
}
|
|
17885
|
-
var FileInput =
|
|
17966
|
+
var FileInput = React70.forwardRef(function FileInput2({
|
|
17886
17967
|
label,
|
|
17887
17968
|
value,
|
|
17888
17969
|
onChange,
|
|
@@ -17905,12 +17986,12 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17905
17986
|
width,
|
|
17906
17987
|
downloadLabel
|
|
17907
17988
|
}, ref) {
|
|
17908
|
-
const internalRef =
|
|
17989
|
+
const internalRef = React70.useRef(null);
|
|
17909
17990
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17910
17991
|
const { t } = (0, import_react_i18next41.useTranslation)();
|
|
17911
17992
|
const resolvedLabel = label ?? t("upload_file");
|
|
17912
17993
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17913
|
-
const reactId =
|
|
17994
|
+
const reactId = React70.useId();
|
|
17914
17995
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17915
17996
|
const labelId = `${inputId}-label`;
|
|
17916
17997
|
const errorId = `${inputId}-error`;
|
|
@@ -18047,10 +18128,10 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
18047
18128
|
});
|
|
18048
18129
|
|
|
18049
18130
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
18050
|
-
var
|
|
18131
|
+
var React71 = __toESM(require("react"), 1);
|
|
18051
18132
|
var import_jsx_runtime179 = require("react/jsx-runtime");
|
|
18052
18133
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
18053
|
-
var SelectIconsBox =
|
|
18134
|
+
var SelectIconsBox = React71.forwardRef(
|
|
18054
18135
|
function SelectIconsBox2({
|
|
18055
18136
|
children,
|
|
18056
18137
|
icons,
|
|
@@ -18066,10 +18147,10 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
18066
18147
|
className,
|
|
18067
18148
|
boxClassName
|
|
18068
18149
|
}, ref) {
|
|
18069
|
-
const containerRef =
|
|
18150
|
+
const containerRef = React71.useRef(null);
|
|
18070
18151
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
18071
18152
|
const isControlled = controlledOpen !== void 0;
|
|
18072
|
-
const [internalOpen, setInternalOpen] =
|
|
18153
|
+
const [internalOpen, setInternalOpen] = React71.useState(defaultOpen);
|
|
18073
18154
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
18074
18155
|
const setOpen = (next) => {
|
|
18075
18156
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -18262,15 +18343,15 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18262
18343
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
18263
18344
|
|
|
18264
18345
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18265
|
-
var
|
|
18346
|
+
var React73 = __toESM(require("react"), 1);
|
|
18266
18347
|
var import_lucide_react53 = require("lucide-react");
|
|
18267
18348
|
|
|
18268
18349
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
18269
|
-
var
|
|
18350
|
+
var React72 = __toESM(require("react"), 1);
|
|
18270
18351
|
var import_lucide_react52 = require("lucide-react");
|
|
18271
18352
|
var import_react_i18next42 = require("react-i18next");
|
|
18272
18353
|
var import_jsx_runtime182 = require("react/jsx-runtime");
|
|
18273
|
-
var AirbnbFieldTrigger =
|
|
18354
|
+
var AirbnbFieldTrigger = React72.forwardRef(
|
|
18274
18355
|
({
|
|
18275
18356
|
as = "button",
|
|
18276
18357
|
id,
|
|
@@ -18438,7 +18519,7 @@ AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
|
18438
18519
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18439
18520
|
var import_jsx_runtime183 = require("react/jsx-runtime");
|
|
18440
18521
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18441
|
-
var AirbnbDatePicker =
|
|
18522
|
+
var AirbnbDatePicker = React73.forwardRef(
|
|
18442
18523
|
({
|
|
18443
18524
|
label,
|
|
18444
18525
|
topLabel,
|
|
@@ -18463,24 +18544,24 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18463
18544
|
formatValue = formatDateValue
|
|
18464
18545
|
}, ref) => {
|
|
18465
18546
|
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 =
|
|
18547
|
+
const [isOpen, setIsOpen] = React73.useState(false);
|
|
18548
|
+
const triggerId = React73.useId();
|
|
18549
|
+
const pickerId = React73.useId();
|
|
18550
|
+
const labelId = React73.useId();
|
|
18551
|
+
const valueId = React73.useId();
|
|
18552
|
+
const helperTextId = React73.useId();
|
|
18553
|
+
const errorId = React73.useId();
|
|
18554
|
+
const internalRef = React73.useRef(null);
|
|
18474
18555
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18475
|
-
const monthLabels =
|
|
18476
|
-
const resolvedMinDate =
|
|
18477
|
-
const resolvedMaxDate =
|
|
18478
|
-
const normalizedValue =
|
|
18479
|
-
const normalizedDefaultValue =
|
|
18556
|
+
const monthLabels = React73.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18557
|
+
const resolvedMinDate = React73.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18558
|
+
const resolvedMaxDate = React73.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18559
|
+
const normalizedValue = React73.useMemo(() => normalizeDateValue(value), [value]);
|
|
18560
|
+
const normalizedDefaultValue = React73.useMemo(
|
|
18480
18561
|
() => normalizeDateValue(defaultValue),
|
|
18481
18562
|
[defaultValue]
|
|
18482
18563
|
);
|
|
18483
|
-
const resolvedValue =
|
|
18564
|
+
const resolvedValue = React73.useMemo(
|
|
18484
18565
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18485
18566
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18486
18567
|
);
|
|
@@ -18511,7 +18592,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18511
18592
|
minDate: resolvedMinDate,
|
|
18512
18593
|
maxDate: resolvedMaxDate
|
|
18513
18594
|
});
|
|
18514
|
-
const handleOpenChange =
|
|
18595
|
+
const handleOpenChange = React73.useCallback(
|
|
18515
18596
|
(nextOpen) => {
|
|
18516
18597
|
if (isBlocked && nextOpen) return;
|
|
18517
18598
|
setIsOpen(nextOpen);
|
|
@@ -18521,7 +18602,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18521
18602
|
},
|
|
18522
18603
|
[isBlocked]
|
|
18523
18604
|
);
|
|
18524
|
-
const handleDone =
|
|
18605
|
+
const handleDone = React73.useCallback(() => {
|
|
18525
18606
|
if (isBlocked) return;
|
|
18526
18607
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18527
18608
|
handleOpenChange(false);
|
|
@@ -18533,11 +18614,11 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18533
18614
|
resolvedMaxDate,
|
|
18534
18615
|
resolvedMinDate
|
|
18535
18616
|
]);
|
|
18536
|
-
const handleTriggerClick =
|
|
18617
|
+
const handleTriggerClick = React73.useCallback(() => {
|
|
18537
18618
|
if (isBlocked) return;
|
|
18538
18619
|
setIsOpen(true);
|
|
18539
18620
|
}, [isBlocked]);
|
|
18540
|
-
const handleTriggerKeyDown =
|
|
18621
|
+
const handleTriggerKeyDown = React73.useCallback(
|
|
18541
18622
|
(event) => {
|
|
18542
18623
|
if (isBlocked) return;
|
|
18543
18624
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18547,7 +18628,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18547
18628
|
},
|
|
18548
18629
|
[isBlocked]
|
|
18549
18630
|
);
|
|
18550
|
-
|
|
18631
|
+
React73.useEffect(() => {
|
|
18551
18632
|
if (isBlocked) {
|
|
18552
18633
|
setIsOpen(false);
|
|
18553
18634
|
}
|
|
@@ -18624,12 +18705,12 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18624
18705
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18625
18706
|
|
|
18626
18707
|
// src/airbnb-fields/input/Input.tsx
|
|
18627
|
-
var
|
|
18708
|
+
var React74 = __toESM(require("react"), 1);
|
|
18628
18709
|
var import_lucide_react54 = require("lucide-react");
|
|
18629
18710
|
var import_react_i18next43 = require("react-i18next");
|
|
18630
18711
|
var import_jsx_runtime184 = require("react/jsx-runtime");
|
|
18631
18712
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18632
|
-
var AirbnbInput =
|
|
18713
|
+
var AirbnbInput = React74.forwardRef(
|
|
18633
18714
|
({
|
|
18634
18715
|
label,
|
|
18635
18716
|
topLabel,
|
|
@@ -18658,16 +18739,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18658
18739
|
...props
|
|
18659
18740
|
}, ref) => {
|
|
18660
18741
|
const { t } = (0, import_react_i18next43.useTranslation)();
|
|
18661
|
-
const generatedId =
|
|
18662
|
-
const inputRef =
|
|
18742
|
+
const generatedId = React74.useId();
|
|
18743
|
+
const inputRef = React74.useRef(null);
|
|
18663
18744
|
const inputId = id ?? generatedId;
|
|
18664
18745
|
const fieldId = `${inputId}-field`;
|
|
18665
18746
|
const labelId = `${inputId}-label`;
|
|
18666
18747
|
const errorId = `${inputId}-error`;
|
|
18667
18748
|
const accessibleLabel = placeholder ?? label;
|
|
18668
|
-
const [isFocused, setIsFocused] =
|
|
18669
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18670
|
-
const [currentValue, setCurrentValue] =
|
|
18749
|
+
const [isFocused, setIsFocused] = React74.useState(false);
|
|
18750
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React74.useState(false);
|
|
18751
|
+
const [currentValue, setCurrentValue] = React74.useState(
|
|
18671
18752
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18672
18753
|
);
|
|
18673
18754
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18680,16 +18761,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18680
18761
|
const triggerError = error ?? invalid;
|
|
18681
18762
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18682
18763
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18683
|
-
|
|
18764
|
+
React74.useLayoutEffect(() => {
|
|
18684
18765
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18685
18766
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18686
18767
|
}, [value]);
|
|
18687
|
-
|
|
18768
|
+
React74.useEffect(() => {
|
|
18688
18769
|
if (!isPasswordInput) {
|
|
18689
18770
|
setIsPasswordRevealed(false);
|
|
18690
18771
|
}
|
|
18691
18772
|
}, [isPasswordInput]);
|
|
18692
|
-
const setRefs =
|
|
18773
|
+
const setRefs = React74.useCallback(
|
|
18693
18774
|
(node) => {
|
|
18694
18775
|
inputRef.current = node;
|
|
18695
18776
|
if (node && value == null) {
|
|
@@ -18807,11 +18888,11 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18807
18888
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18808
18889
|
|
|
18809
18890
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18810
|
-
var
|
|
18891
|
+
var React80 = __toESM(require("react"), 1);
|
|
18811
18892
|
var import_lucide_react56 = require("lucide-react");
|
|
18812
18893
|
|
|
18813
18894
|
// src/airbnb-fields/select/Select.tsx
|
|
18814
|
-
var
|
|
18895
|
+
var React79 = __toESM(require("react"), 1);
|
|
18815
18896
|
|
|
18816
18897
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18817
18898
|
var import_jsx_runtime185 = require("react/jsx-runtime");
|
|
@@ -19156,10 +19237,10 @@ function AirbnbSelectMobileContent({
|
|
|
19156
19237
|
}
|
|
19157
19238
|
|
|
19158
19239
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
19159
|
-
var
|
|
19240
|
+
var React75 = __toESM(require("react"), 1);
|
|
19160
19241
|
var import_lucide_react55 = require("lucide-react");
|
|
19161
19242
|
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
19162
|
-
var AirbnbSelectTrigger =
|
|
19243
|
+
var AirbnbSelectTrigger = React75.forwardRef(
|
|
19163
19244
|
({
|
|
19164
19245
|
id,
|
|
19165
19246
|
open,
|
|
@@ -19224,7 +19305,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
|
|
|
19224
19305
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
19225
19306
|
|
|
19226
19307
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
19227
|
-
var
|
|
19308
|
+
var React76 = __toESM(require("react"), 1);
|
|
19228
19309
|
function useDesktopSelect({
|
|
19229
19310
|
isMobile: isMobile3,
|
|
19230
19311
|
isOpen,
|
|
@@ -19233,12 +19314,12 @@ function useDesktopSelect({
|
|
|
19233
19314
|
disabled,
|
|
19234
19315
|
onChange
|
|
19235
19316
|
}) {
|
|
19236
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19237
|
-
const triggerRef =
|
|
19238
|
-
const listRef =
|
|
19239
|
-
const optionRefs =
|
|
19317
|
+
const [highlightedIndex, setHighlightedIndex] = React76.useState(-1);
|
|
19318
|
+
const triggerRef = React76.useRef(null);
|
|
19319
|
+
const listRef = React76.useRef(null);
|
|
19320
|
+
const optionRefs = React76.useRef([]);
|
|
19240
19321
|
const selectedIndex = getOptionIndex2(options, value);
|
|
19241
|
-
|
|
19322
|
+
React76.useEffect(() => {
|
|
19242
19323
|
if (!isOpen || isMobile3) return;
|
|
19243
19324
|
setHighlightedIndex((currentIndex) => {
|
|
19244
19325
|
if (currentIndex >= 0) {
|
|
@@ -19253,34 +19334,34 @@ function useDesktopSelect({
|
|
|
19253
19334
|
window.cancelAnimationFrame(frameId);
|
|
19254
19335
|
};
|
|
19255
19336
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
19256
|
-
|
|
19337
|
+
React76.useEffect(() => {
|
|
19257
19338
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
19258
19339
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
19259
19340
|
block: "nearest"
|
|
19260
19341
|
});
|
|
19261
19342
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
19262
|
-
|
|
19343
|
+
React76.useEffect(() => {
|
|
19263
19344
|
if (isOpen) return;
|
|
19264
19345
|
setHighlightedIndex(-1);
|
|
19265
19346
|
}, [isOpen]);
|
|
19266
|
-
const focusTrigger =
|
|
19347
|
+
const focusTrigger = React76.useCallback(() => {
|
|
19267
19348
|
triggerRef.current?.focus();
|
|
19268
19349
|
}, []);
|
|
19269
|
-
const handleSelect =
|
|
19350
|
+
const handleSelect = React76.useCallback(
|
|
19270
19351
|
(option) => {
|
|
19271
19352
|
if (option.isDisabled || disabled) return;
|
|
19272
19353
|
onChange?.(option);
|
|
19273
19354
|
},
|
|
19274
19355
|
[disabled, onChange]
|
|
19275
19356
|
);
|
|
19276
|
-
const openMenu =
|
|
19357
|
+
const openMenu = React76.useCallback(
|
|
19277
19358
|
(targetIndex) => {
|
|
19278
19359
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19279
19360
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
19280
19361
|
},
|
|
19281
19362
|
[options, selectedIndex]
|
|
19282
19363
|
);
|
|
19283
|
-
const handleTriggerKeyDown =
|
|
19364
|
+
const handleTriggerKeyDown = React76.useCallback(
|
|
19284
19365
|
(event, onOpen) => {
|
|
19285
19366
|
if (disabled) return;
|
|
19286
19367
|
if (event.key === "ArrowDown") {
|
|
@@ -19305,7 +19386,7 @@ function useDesktopSelect({
|
|
|
19305
19386
|
},
|
|
19306
19387
|
[disabled, openMenu, options, selectedIndex]
|
|
19307
19388
|
);
|
|
19308
|
-
const handleMenuKeyDown =
|
|
19389
|
+
const handleMenuKeyDown = React76.useCallback(
|
|
19309
19390
|
(event, onClose) => {
|
|
19310
19391
|
if (event.key === "Escape") {
|
|
19311
19392
|
event.preventDefault();
|
|
@@ -19355,7 +19436,7 @@ function useDesktopSelect({
|
|
|
19355
19436
|
},
|
|
19356
19437
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
19357
19438
|
);
|
|
19358
|
-
const setOptionRef =
|
|
19439
|
+
const setOptionRef = React76.useCallback(
|
|
19359
19440
|
(index, node) => {
|
|
19360
19441
|
optionRefs.current[index] = node;
|
|
19361
19442
|
},
|
|
@@ -19375,23 +19456,23 @@ function useDesktopSelect({
|
|
|
19375
19456
|
}
|
|
19376
19457
|
|
|
19377
19458
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19378
|
-
var
|
|
19459
|
+
var React77 = __toESM(require("react"), 1);
|
|
19379
19460
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19380
|
-
const [pendingValue, setPendingValue] =
|
|
19461
|
+
const [pendingValue, setPendingValue] = React77.useState(
|
|
19381
19462
|
value ?? null
|
|
19382
19463
|
);
|
|
19383
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19384
|
-
const mobileListRef =
|
|
19385
|
-
const scrollSettleTimeoutRef =
|
|
19386
|
-
const scrollAnimationFrameRef =
|
|
19387
|
-
const getTargetIndex =
|
|
19464
|
+
const [mobileScrollTop, setMobileScrollTop] = React77.useState(0);
|
|
19465
|
+
const mobileListRef = React77.useRef(null);
|
|
19466
|
+
const scrollSettleTimeoutRef = React77.useRef(null);
|
|
19467
|
+
const scrollAnimationFrameRef = React77.useRef(null);
|
|
19468
|
+
const getTargetIndex = React77.useCallback(
|
|
19388
19469
|
(targetValue) => {
|
|
19389
19470
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19390
19471
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19391
19472
|
},
|
|
19392
19473
|
[options]
|
|
19393
19474
|
);
|
|
19394
|
-
const syncScrollPosition =
|
|
19475
|
+
const syncScrollPosition = React77.useCallback(
|
|
19395
19476
|
(targetValue, behavior = "instant") => {
|
|
19396
19477
|
const targetIndex = getTargetIndex(targetValue);
|
|
19397
19478
|
if (targetIndex < 0) return;
|
|
@@ -19410,27 +19491,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19410
19491
|
},
|
|
19411
19492
|
[getTargetIndex, options]
|
|
19412
19493
|
);
|
|
19413
|
-
const clearScrollSettleTimeout =
|
|
19494
|
+
const clearScrollSettleTimeout = React77.useCallback(() => {
|
|
19414
19495
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19415
19496
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19416
19497
|
scrollSettleTimeoutRef.current = null;
|
|
19417
19498
|
}, []);
|
|
19418
|
-
const clearScrollAnimationFrame =
|
|
19499
|
+
const clearScrollAnimationFrame = React77.useCallback(() => {
|
|
19419
19500
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19420
19501
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19421
19502
|
scrollAnimationFrameRef.current = null;
|
|
19422
19503
|
}, []);
|
|
19423
|
-
|
|
19504
|
+
React77.useEffect(
|
|
19424
19505
|
() => () => {
|
|
19425
19506
|
clearScrollSettleTimeout();
|
|
19426
19507
|
clearScrollAnimationFrame();
|
|
19427
19508
|
},
|
|
19428
19509
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19429
19510
|
);
|
|
19430
|
-
|
|
19511
|
+
React77.useEffect(() => {
|
|
19431
19512
|
setPendingValue(value ?? null);
|
|
19432
19513
|
}, [value]);
|
|
19433
|
-
|
|
19514
|
+
React77.useLayoutEffect(() => {
|
|
19434
19515
|
if (!isMobile3 || !isOpen) return;
|
|
19435
19516
|
const frameId = window.requestAnimationFrame(() => {
|
|
19436
19517
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19439,7 +19520,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19439
19520
|
window.cancelAnimationFrame(frameId);
|
|
19440
19521
|
};
|
|
19441
19522
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19442
|
-
const settleScroll =
|
|
19523
|
+
const settleScroll = React77.useCallback(() => {
|
|
19443
19524
|
if (!mobileListRef.current) return;
|
|
19444
19525
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19445
19526
|
const nextOption = options[nextIndex];
|
|
@@ -19451,13 +19532,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19451
19532
|
}
|
|
19452
19533
|
setPendingValue(nextOption);
|
|
19453
19534
|
}, [options, pendingValue]);
|
|
19454
|
-
const scheduleScrollSettle =
|
|
19535
|
+
const scheduleScrollSettle = React77.useCallback(() => {
|
|
19455
19536
|
clearScrollSettleTimeout();
|
|
19456
19537
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19457
19538
|
settleScroll();
|
|
19458
19539
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19459
19540
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19460
|
-
const handleScroll =
|
|
19541
|
+
const handleScroll = React77.useCallback(() => {
|
|
19461
19542
|
if (!mobileListRef.current) return;
|
|
19462
19543
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19463
19544
|
clearScrollAnimationFrame();
|
|
@@ -19467,7 +19548,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19467
19548
|
});
|
|
19468
19549
|
scheduleScrollSettle();
|
|
19469
19550
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19470
|
-
const focusOptionByIndex =
|
|
19551
|
+
const focusOptionByIndex = React77.useCallback(
|
|
19471
19552
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19472
19553
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19473
19554
|
const option = options[index];
|
|
@@ -19485,7 +19566,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19485
19566
|
},
|
|
19486
19567
|
[options, scheduleScrollSettle]
|
|
19487
19568
|
);
|
|
19488
|
-
const handleOptionClick =
|
|
19569
|
+
const handleOptionClick = React77.useCallback(
|
|
19489
19570
|
(option) => {
|
|
19490
19571
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19491
19572
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19494,7 +19575,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19494
19575
|
},
|
|
19495
19576
|
[disabled, focusOptionByIndex, options]
|
|
19496
19577
|
);
|
|
19497
|
-
const moveByStep =
|
|
19578
|
+
const moveByStep = React77.useCallback(
|
|
19498
19579
|
(step) => {
|
|
19499
19580
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19500
19581
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19506,7 +19587,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19506
19587
|
},
|
|
19507
19588
|
[focusOptionByIndex, options, pendingValue]
|
|
19508
19589
|
);
|
|
19509
|
-
const moveToBoundary =
|
|
19590
|
+
const moveToBoundary = React77.useCallback(
|
|
19510
19591
|
(boundary) => {
|
|
19511
19592
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19512
19593
|
if (targetIndex >= 0) {
|
|
@@ -19515,7 +19596,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19515
19596
|
},
|
|
19516
19597
|
[focusOptionByIndex, options]
|
|
19517
19598
|
);
|
|
19518
|
-
const syncPendingValue =
|
|
19599
|
+
const syncPendingValue = React77.useCallback(
|
|
19519
19600
|
(nextValue) => {
|
|
19520
19601
|
const normalizedValue = nextValue ?? null;
|
|
19521
19602
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19543,9 +19624,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19543
19624
|
}
|
|
19544
19625
|
|
|
19545
19626
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19546
|
-
var
|
|
19627
|
+
var React78 = __toESM(require("react"), 1);
|
|
19547
19628
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19548
|
-
const reactId =
|
|
19629
|
+
const reactId = React78.useId().replace(/:/g, "");
|
|
19549
19630
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19550
19631
|
const triggerId = `${baseId}-trigger`;
|
|
19551
19632
|
const labelId = `${baseId}-label`;
|
|
@@ -19555,7 +19636,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19555
19636
|
const listboxId = `${baseId}-listbox`;
|
|
19556
19637
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19557
19638
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19558
|
-
const getOptionId2 =
|
|
19639
|
+
const getOptionId2 = React78.useCallback(
|
|
19559
19640
|
(index) => `${baseId}-option-${index}`,
|
|
19560
19641
|
[baseId]
|
|
19561
19642
|
);
|
|
@@ -19574,7 +19655,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19574
19655
|
|
|
19575
19656
|
// src/airbnb-fields/select/Select.tsx
|
|
19576
19657
|
var import_jsx_runtime190 = require("react/jsx-runtime");
|
|
19577
|
-
var AirbnbSelect =
|
|
19658
|
+
var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
19578
19659
|
options = [],
|
|
19579
19660
|
value,
|
|
19580
19661
|
onChange,
|
|
@@ -19601,8 +19682,8 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19601
19682
|
filterOption
|
|
19602
19683
|
}, ref) {
|
|
19603
19684
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19604
|
-
const [isOpen, setIsOpen] =
|
|
19605
|
-
const containerRef =
|
|
19685
|
+
const [isOpen, setIsOpen] = React79.useState(false);
|
|
19686
|
+
const containerRef = React79.useRef(null);
|
|
19606
19687
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19607
19688
|
const hasValue = Boolean(value);
|
|
19608
19689
|
const helperText = placeholder ?? label;
|
|
@@ -19664,12 +19745,12 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19664
19745
|
onOutsideClick: () => setIsOpen(false),
|
|
19665
19746
|
isDisabled: !isOpen || isMobile3
|
|
19666
19747
|
});
|
|
19667
|
-
|
|
19748
|
+
React79.useEffect(() => {
|
|
19668
19749
|
if (isBlocked) {
|
|
19669
19750
|
setIsOpen(false);
|
|
19670
19751
|
}
|
|
19671
19752
|
}, [isBlocked]);
|
|
19672
|
-
|
|
19753
|
+
React79.useEffect(
|
|
19673
19754
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19674
19755
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19675
19756
|
return;
|
|
@@ -19681,7 +19762,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19681
19762
|
},
|
|
19682
19763
|
[onChange, filteredOptions, value]
|
|
19683
19764
|
);
|
|
19684
|
-
const handleMobileOpenChange =
|
|
19765
|
+
const handleMobileOpenChange = React79.useCallback(
|
|
19685
19766
|
(nextOpen) => {
|
|
19686
19767
|
if (isBlocked && nextOpen) return;
|
|
19687
19768
|
setIsOpen(nextOpen);
|
|
@@ -19692,7 +19773,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19692
19773
|
},
|
|
19693
19774
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19694
19775
|
);
|
|
19695
|
-
const handleMobileDone =
|
|
19776
|
+
const handleMobileDone = React79.useCallback(() => {
|
|
19696
19777
|
if (isBlocked) return;
|
|
19697
19778
|
const finalOption = pendingValue;
|
|
19698
19779
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19701,7 +19782,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19701
19782
|
setIsOpen(false);
|
|
19702
19783
|
focusTrigger();
|
|
19703
19784
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19704
|
-
const handleTriggerClick =
|
|
19785
|
+
const handleTriggerClick = React79.useCallback(() => {
|
|
19705
19786
|
if (isBlocked) return;
|
|
19706
19787
|
setIsOpen((prev) => {
|
|
19707
19788
|
const nextOpen = !prev;
|
|
@@ -19873,7 +19954,7 @@ function formatPhoneCodeOptionLabel2(option) {
|
|
|
19873
19954
|
const value = String(option.value);
|
|
19874
19955
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19875
19956
|
}
|
|
19876
|
-
var AirbnbPhoneField =
|
|
19957
|
+
var AirbnbPhoneField = React80.forwardRef(
|
|
19877
19958
|
({
|
|
19878
19959
|
label,
|
|
19879
19960
|
topLabel,
|
|
@@ -19897,9 +19978,9 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19897
19978
|
codePlaceholder = "+00",
|
|
19898
19979
|
defaultCode
|
|
19899
19980
|
}, ref) => {
|
|
19900
|
-
const inputId =
|
|
19981
|
+
const inputId = React80.useId();
|
|
19901
19982
|
const effectiveCode = value?.code || defaultCode || "";
|
|
19902
|
-
const codeOptions =
|
|
19983
|
+
const codeOptions = React80.useMemo(
|
|
19903
19984
|
() => options.map((option) => ({
|
|
19904
19985
|
value: option.value,
|
|
19905
19986
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19907,7 +19988,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19907
19988
|
})),
|
|
19908
19989
|
[options]
|
|
19909
19990
|
);
|
|
19910
|
-
const selectedCodeOption =
|
|
19991
|
+
const selectedCodeOption = React80.useMemo(
|
|
19911
19992
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19912
19993
|
[codeOptions, effectiveCode]
|
|
19913
19994
|
);
|
|
@@ -20043,7 +20124,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20043
20124
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
20044
20125
|
|
|
20045
20126
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
20046
|
-
var
|
|
20127
|
+
var React81 = __toESM(require("react"), 1);
|
|
20047
20128
|
var import_lucide_react57 = require("lucide-react");
|
|
20048
20129
|
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
20049
20130
|
var import_react90 = require("react");
|
|
@@ -20087,13 +20168,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20087
20168
|
loadingMessage
|
|
20088
20169
|
}, ref) => {
|
|
20089
20170
|
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 =
|
|
20171
|
+
const reactId = React81.useId();
|
|
20172
|
+
const [open, setOpen] = React81.useState(false);
|
|
20173
|
+
const [internalSearchValue, setInternalSearchValue] = React81.useState("");
|
|
20174
|
+
const [highlightedIndex, setHighlightedIndex] = React81.useState(-1);
|
|
20175
|
+
const containerRef = React81.useRef(null);
|
|
20176
|
+
const triggerRef = React81.useRef(null);
|
|
20177
|
+
const inputRef = React81.useRef(null);
|
|
20097
20178
|
const listboxId = `${reactId}-listbox`;
|
|
20098
20179
|
const labelId = `${reactId}-label`;
|
|
20099
20180
|
const valueId = `${reactId}-value`;
|
|
@@ -20102,13 +20183,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20102
20183
|
const searchInputId = `${reactId}-search`;
|
|
20103
20184
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
20104
20185
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
20105
|
-
const visibleOptions =
|
|
20186
|
+
const visibleOptions = React81.useMemo(() => {
|
|
20106
20187
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
20107
20188
|
return options;
|
|
20108
20189
|
}
|
|
20109
20190
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
20110
20191
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
20111
|
-
const selectedIndex =
|
|
20192
|
+
const selectedIndex = React81.useMemo(
|
|
20112
20193
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
20113
20194
|
[value?.value, visibleOptions]
|
|
20114
20195
|
);
|
|
@@ -20134,7 +20215,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20134
20215
|
},
|
|
20135
20216
|
[handleOnOpenChange]
|
|
20136
20217
|
);
|
|
20137
|
-
|
|
20218
|
+
React81.useEffect(() => {
|
|
20138
20219
|
if (isBlocked) {
|
|
20139
20220
|
setSelectOpen(false);
|
|
20140
20221
|
return;
|
|
@@ -20147,7 +20228,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20147
20228
|
window.cancelAnimationFrame(frameId);
|
|
20148
20229
|
};
|
|
20149
20230
|
}, [isBlocked, open, setSelectOpen]);
|
|
20150
|
-
|
|
20231
|
+
React81.useEffect(() => {
|
|
20151
20232
|
if (!open) {
|
|
20152
20233
|
setHighlightedIndex(-1);
|
|
20153
20234
|
return;
|
|
@@ -20242,7 +20323,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20242
20323
|
onOptionHover: setHighlightedIndex
|
|
20243
20324
|
}
|
|
20244
20325
|
);
|
|
20245
|
-
|
|
20326
|
+
React81.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
20246
20327
|
return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
20247
20328
|
name && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
20248
20329
|
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
@@ -20320,7 +20401,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20320
20401
|
) : null
|
|
20321
20402
|
] });
|
|
20322
20403
|
};
|
|
20323
|
-
var AirbnbSearchableSelect =
|
|
20404
|
+
var AirbnbSearchableSelect = React81.forwardRef(
|
|
20324
20405
|
AirbnbSearchableSelectInternal
|
|
20325
20406
|
);
|
|
20326
20407
|
function AirbnbSearchableSelectContent({
|
|
@@ -20347,9 +20428,9 @@ function AirbnbSearchableSelectContent({
|
|
|
20347
20428
|
onOptionClick,
|
|
20348
20429
|
onOptionHover
|
|
20349
20430
|
}) {
|
|
20350
|
-
const listRef =
|
|
20351
|
-
const lastLoadMoreOptionsLengthRef =
|
|
20352
|
-
const previousHighlightedIndexRef =
|
|
20431
|
+
const listRef = React81.useRef(null);
|
|
20432
|
+
const lastLoadMoreOptionsLengthRef = React81.useRef(null);
|
|
20433
|
+
const previousHighlightedIndexRef = React81.useRef(highlightedIndex);
|
|
20353
20434
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
20354
20435
|
const virtualizer = (0, import_react_virtual3.useVirtualizer)({
|
|
20355
20436
|
count: rowCount,
|
|
@@ -20360,7 +20441,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20360
20441
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20361
20442
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20362
20443
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20363
|
-
|
|
20444
|
+
React81.useEffect(() => {
|
|
20364
20445
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20365
20446
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20366
20447
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20368,7 +20449,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20368
20449
|
onLoadMore?.();
|
|
20369
20450
|
}
|
|
20370
20451
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20371
|
-
|
|
20452
|
+
React81.useEffect(() => {
|
|
20372
20453
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20373
20454
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20374
20455
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -20486,11 +20567,11 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20486
20567
|
}
|
|
20487
20568
|
|
|
20488
20569
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20489
|
-
var
|
|
20570
|
+
var React82 = __toESM(require("react"), 1);
|
|
20490
20571
|
var import_react_i18next44 = require("react-i18next");
|
|
20491
20572
|
var import_lucide_react58 = require("lucide-react");
|
|
20492
20573
|
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
20493
|
-
var AirbnbSearchInput =
|
|
20574
|
+
var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20494
20575
|
const { t } = (0, import_react_i18next44.useTranslation)();
|
|
20495
20576
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20496
20577
|
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
@@ -20528,11 +20609,11 @@ var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20528
20609
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20529
20610
|
|
|
20530
20611
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20531
|
-
var
|
|
20612
|
+
var React83 = __toESM(require("react"), 1);
|
|
20532
20613
|
var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
|
|
20533
20614
|
var import_lucide_react59 = require("lucide-react");
|
|
20534
20615
|
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
20535
|
-
var AirbnbSwitch =
|
|
20616
|
+
var AirbnbSwitch = React83.forwardRef(
|
|
20536
20617
|
({
|
|
20537
20618
|
className,
|
|
20538
20619
|
value,
|
|
@@ -20546,7 +20627,7 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20546
20627
|
wrapperClassName,
|
|
20547
20628
|
...props
|
|
20548
20629
|
}, ref) => {
|
|
20549
|
-
const generatedId =
|
|
20630
|
+
const generatedId = React83.useId();
|
|
20550
20631
|
const fieldId = id || generatedId;
|
|
20551
20632
|
const switchElement = /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20552
20633
|
SwitchPrimitives2.Root,
|