@chekinapp/ui 0.0.120 → 0.0.122
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 +883 -920
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +10 -37
- package/dist/index.d.ts +10 -37
- package/dist/index.js +844 -880
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -12423,11 +12423,8 @@ var Input = React44.forwardRef(
|
|
|
12423
12423
|
Input.displayName = "Input";
|
|
12424
12424
|
|
|
12425
12425
|
// src/dashboard/phone-input/PhoneInput.tsx
|
|
12426
|
-
import * as
|
|
12427
|
-
import { useTranslation as
|
|
12428
|
-
|
|
12429
|
-
// src/dashboard/searching-select/SearchingSelect.tsx
|
|
12430
|
-
import * as React53 from "react";
|
|
12426
|
+
import * as React50 from "react";
|
|
12427
|
+
import { useTranslation as useTranslation34 } from "react-i18next";
|
|
12431
12428
|
|
|
12432
12429
|
// src/dashboard/select/Select.tsx
|
|
12433
12430
|
import * as React49 from "react";
|
|
@@ -14072,371 +14069,6 @@ function SelectInternal(props, ref) {
|
|
|
14072
14069
|
}
|
|
14073
14070
|
var Select = React49.forwardRef(SelectInternal);
|
|
14074
14071
|
|
|
14075
|
-
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14076
|
-
import * as React52 from "react";
|
|
14077
|
-
|
|
14078
|
-
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14079
|
-
import * as React51 from "react";
|
|
14080
|
-
import { useTranslation as useTranslation34 } from "react-i18next";
|
|
14081
|
-
import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
|
|
14082
|
-
|
|
14083
|
-
// src/dashboard/infinite-scroll-select/InfiniteScrollContext.tsx
|
|
14084
|
-
import * as React50 from "react";
|
|
14085
|
-
var InfiniteScrollContext = React50.createContext(
|
|
14086
|
-
null
|
|
14087
|
-
);
|
|
14088
|
-
function useInfiniteScrollContext() {
|
|
14089
|
-
const ctx = React50.useContext(InfiniteScrollContext);
|
|
14090
|
-
if (!ctx) {
|
|
14091
|
-
throw new Error(
|
|
14092
|
-
"useInfiniteScrollContext must be used within an InfiniteScrollContext.Provider"
|
|
14093
|
-
);
|
|
14094
|
-
}
|
|
14095
|
-
return ctx;
|
|
14096
|
-
}
|
|
14097
|
-
|
|
14098
|
-
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14099
|
-
import { jsx as jsx157, jsxs as jsxs100 } from "react/jsx-runtime";
|
|
14100
|
-
function VirtualMenuList(props) {
|
|
14101
|
-
const {
|
|
14102
|
-
id,
|
|
14103
|
-
labelledBy,
|
|
14104
|
-
describedBy,
|
|
14105
|
-
getOptionId: getOptionId2,
|
|
14106
|
-
options,
|
|
14107
|
-
selectedOptions,
|
|
14108
|
-
isMulti,
|
|
14109
|
-
highlightedIndex,
|
|
14110
|
-
onOptionHover,
|
|
14111
|
-
onOptionClick,
|
|
14112
|
-
disabled,
|
|
14113
|
-
isOptionDisabled,
|
|
14114
|
-
menuClassName,
|
|
14115
|
-
noOptionsMessage,
|
|
14116
|
-
components,
|
|
14117
|
-
inputValue = "",
|
|
14118
|
-
formatOptionLabel,
|
|
14119
|
-
isOptionSelected: isOptionSelectedProp,
|
|
14120
|
-
onMenuScrollToBottom
|
|
14121
|
-
} = props;
|
|
14122
|
-
const {
|
|
14123
|
-
canLoadMore,
|
|
14124
|
-
isLoadingMore,
|
|
14125
|
-
loadMoreItems,
|
|
14126
|
-
loadingMoreText,
|
|
14127
|
-
itemHeight,
|
|
14128
|
-
listHeight,
|
|
14129
|
-
overscan,
|
|
14130
|
-
loadMoreThreshold
|
|
14131
|
-
} = useInfiniteScrollContext();
|
|
14132
|
-
const Option = components?.Option ?? DefaultOption;
|
|
14133
|
-
const { t } = useTranslation34();
|
|
14134
|
-
const scrollRef = React51.useRef(null);
|
|
14135
|
-
const lastLoadMoreOptionsLengthRef = React51.useRef(null);
|
|
14136
|
-
const previousHighlightedIndexRef = React51.useRef(-1);
|
|
14137
|
-
const showLoaderRow = Boolean(canLoadMore || isLoadingMore);
|
|
14138
|
-
const itemCount = options.length + (showLoaderRow ? 1 : 0);
|
|
14139
|
-
const virtualizer = useVirtualizer2({
|
|
14140
|
-
count: itemCount,
|
|
14141
|
-
getScrollElement: () => scrollRef.current,
|
|
14142
|
-
estimateSize: () => itemHeight,
|
|
14143
|
-
overscan
|
|
14144
|
-
});
|
|
14145
|
-
const virtualItems = virtualizer.getVirtualItems();
|
|
14146
|
-
const totalSize = virtualizer.getTotalSize();
|
|
14147
|
-
const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
|
|
14148
|
-
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14149
|
-
React51.useEffect(() => {
|
|
14150
|
-
if (!canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14151
|
-
if (virtualItems.length === 0) return;
|
|
14152
|
-
const lastItem = virtualItems[virtualItems.length - 1];
|
|
14153
|
-
if (!lastItem || lastItem.index < options.length - loadMoreThreshold) return;
|
|
14154
|
-
if (lastLoadMoreOptionsLengthRef.current === options.length) return;
|
|
14155
|
-
lastLoadMoreOptionsLengthRef.current = options.length;
|
|
14156
|
-
loadMoreItems();
|
|
14157
|
-
}, [
|
|
14158
|
-
virtualItems,
|
|
14159
|
-
options.length,
|
|
14160
|
-
canLoadMore,
|
|
14161
|
-
isLoadingMore,
|
|
14162
|
-
loadMoreItems,
|
|
14163
|
-
loadMoreThreshold
|
|
14164
|
-
]);
|
|
14165
|
-
React51.useEffect(() => {
|
|
14166
|
-
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14167
|
-
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14168
|
-
if (highlightedIndex < 0 || !changed) return;
|
|
14169
|
-
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
14170
|
-
}, [highlightedIndex, virtualizer]);
|
|
14171
|
-
const activeOptionId = highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0;
|
|
14172
|
-
const lastOptionIndex = options.length - 1;
|
|
14173
|
-
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14174
|
-
const isOptionSelected2 = (option) => isOptionSelectedProp ? isOptionSelectedProp(option, selectedOptions) : selectedOptions.some((s) => s.value === option.value);
|
|
14175
|
-
const wasAtBottomRef = React51.useRef(false);
|
|
14176
|
-
const handleScroll = React51.useCallback(
|
|
14177
|
-
(event) => {
|
|
14178
|
-
if (!onMenuScrollToBottom) return;
|
|
14179
|
-
const target = event.currentTarget;
|
|
14180
|
-
const atBottom = target.scrollHeight - target.scrollTop - target.clientHeight <= 1;
|
|
14181
|
-
if (atBottom && !wasAtBottomRef.current) {
|
|
14182
|
-
onMenuScrollToBottom(event);
|
|
14183
|
-
}
|
|
14184
|
-
wasAtBottomRef.current = atBottom;
|
|
14185
|
-
},
|
|
14186
|
-
[onMenuScrollToBottom]
|
|
14187
|
-
);
|
|
14188
|
-
if (options.length === 0) {
|
|
14189
|
-
return /* @__PURE__ */ jsx157("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ jsxs100(
|
|
14190
|
-
"div",
|
|
14191
|
-
{
|
|
14192
|
-
role: "status",
|
|
14193
|
-
"aria-busy": "true",
|
|
14194
|
-
"aria-live": "polite",
|
|
14195
|
-
className: "flex flex-col gap-2",
|
|
14196
|
-
children: [
|
|
14197
|
-
/* @__PURE__ */ jsx157("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14198
|
-
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx157(
|
|
14199
|
-
Skeleton,
|
|
14200
|
-
{
|
|
14201
|
-
className: "h-10 w-full rounded-md",
|
|
14202
|
-
style: { animationDelay: `${index * 120}ms`, opacity: 1 - index * 0.2 }
|
|
14203
|
-
},
|
|
14204
|
-
index
|
|
14205
|
-
))
|
|
14206
|
-
]
|
|
14207
|
-
}
|
|
14208
|
-
) : /* @__PURE__ */ jsx157("div", { className: "flex min-h-[40px] items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]", children: emptyMessage }) });
|
|
14209
|
-
}
|
|
14210
|
-
return /* @__PURE__ */ jsx157("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: /* @__PURE__ */ jsx157(
|
|
14211
|
-
"div",
|
|
14212
|
-
{
|
|
14213
|
-
ref: scrollRef,
|
|
14214
|
-
className: cn("overflow-y-auto", menuClassName),
|
|
14215
|
-
style: { height: `${measuredListHeight}px` },
|
|
14216
|
-
onScroll: onMenuScrollToBottom ? handleScroll : void 0,
|
|
14217
|
-
children: /* @__PURE__ */ jsx157(
|
|
14218
|
-
"div",
|
|
14219
|
-
{
|
|
14220
|
-
id,
|
|
14221
|
-
role: "listbox",
|
|
14222
|
-
tabIndex: -1,
|
|
14223
|
-
"aria-labelledby": labelledBy,
|
|
14224
|
-
"aria-describedby": describedBy,
|
|
14225
|
-
"aria-activedescendant": activeOptionId,
|
|
14226
|
-
className: "relative w-full",
|
|
14227
|
-
style: { height: `${totalSize}px` },
|
|
14228
|
-
children: virtualItems.map((virtualItem) => {
|
|
14229
|
-
const isLoaderRow = virtualItem.index >= options.length;
|
|
14230
|
-
const option = options[virtualItem.index];
|
|
14231
|
-
const isSelected = !isLoaderRow && option ? isOptionSelected2(option) : false;
|
|
14232
|
-
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
14233
|
-
const optionDisabledFlag = Boolean(
|
|
14234
|
-
disabled || option?.isDisabled || option && isOptionDisabled?.(option)
|
|
14235
|
-
);
|
|
14236
|
-
const isLastOption = !isLoaderRow && virtualItem.index === lastOptionIndex && !canLoadMore;
|
|
14237
|
-
return /* @__PURE__ */ jsx157(
|
|
14238
|
-
"div",
|
|
14239
|
-
{
|
|
14240
|
-
"data-index": virtualItem.index,
|
|
14241
|
-
className: "absolute left-0 top-0 w-full h-full",
|
|
14242
|
-
style: {
|
|
14243
|
-
height: `${virtualItem.size}px`,
|
|
14244
|
-
transform: `translateY(${virtualItem.start}px)`
|
|
14245
|
-
},
|
|
14246
|
-
children: isLoaderRow ? /* @__PURE__ */ jsxs100(
|
|
14247
|
-
"div",
|
|
14248
|
-
{
|
|
14249
|
-
role: "status",
|
|
14250
|
-
"aria-busy": "true",
|
|
14251
|
-
"aria-live": "polite",
|
|
14252
|
-
className: "flex h-full items-center justify-center",
|
|
14253
|
-
children: [
|
|
14254
|
-
/* @__PURE__ */ jsx157("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14255
|
-
/* @__PURE__ */ jsx157(
|
|
14256
|
-
ThreeDotsLoader,
|
|
14257
|
-
{
|
|
14258
|
-
height: 24,
|
|
14259
|
-
width: 24,
|
|
14260
|
-
color: "var(--chekin-color-brand-blue)"
|
|
14261
|
-
}
|
|
14262
|
-
)
|
|
14263
|
-
]
|
|
14264
|
-
}
|
|
14265
|
-
) : option ? /* @__PURE__ */ jsx157(
|
|
14266
|
-
Option,
|
|
14267
|
-
{
|
|
14268
|
-
id: getOptionId2(virtualItem.index),
|
|
14269
|
-
option,
|
|
14270
|
-
index: virtualItem.index,
|
|
14271
|
-
isSelected,
|
|
14272
|
-
isHighlighted,
|
|
14273
|
-
isDisabled: optionDisabledFlag,
|
|
14274
|
-
isLast: isLastOption,
|
|
14275
|
-
isMulti: Boolean(isMulti),
|
|
14276
|
-
onClick: onOptionClick,
|
|
14277
|
-
onHover: onOptionHover,
|
|
14278
|
-
innerRef: () => void 0,
|
|
14279
|
-
inputValue,
|
|
14280
|
-
selectedOptions,
|
|
14281
|
-
formatOptionLabel
|
|
14282
|
-
}
|
|
14283
|
-
) : null
|
|
14284
|
-
},
|
|
14285
|
-
virtualItem.key
|
|
14286
|
-
);
|
|
14287
|
-
})
|
|
14288
|
-
}
|
|
14289
|
-
)
|
|
14290
|
-
}
|
|
14291
|
-
) });
|
|
14292
|
-
}
|
|
14293
|
-
|
|
14294
|
-
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14295
|
-
import { jsx as jsx158 } from "react/jsx-runtime";
|
|
14296
|
-
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14297
|
-
var DEFAULT_LIST_HEIGHT = 322;
|
|
14298
|
-
var DEFAULT_OVERSCAN = 5;
|
|
14299
|
-
var DEFAULT_LOAD_MORE_THRESHOLD = 5;
|
|
14300
|
-
var passthroughFilter = () => true;
|
|
14301
|
-
function InfiniteScrollSelectInternal(props, ref) {
|
|
14302
|
-
const {
|
|
14303
|
-
options: rawOptions = [],
|
|
14304
|
-
canLoadMore,
|
|
14305
|
-
isLoadingMore,
|
|
14306
|
-
loadMoreItems,
|
|
14307
|
-
loadingMoreText,
|
|
14308
|
-
onSearchChange,
|
|
14309
|
-
itemHeight = DEFAULT_ITEM_HEIGHT,
|
|
14310
|
-
listHeight = DEFAULT_LIST_HEIGHT,
|
|
14311
|
-
overscan = DEFAULT_OVERSCAN,
|
|
14312
|
-
loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD,
|
|
14313
|
-
getFullSearchOption,
|
|
14314
|
-
filterOption: userFilterOption,
|
|
14315
|
-
components: userComponents,
|
|
14316
|
-
onInputChange: userOnInputChange,
|
|
14317
|
-
...rest
|
|
14318
|
-
} = props;
|
|
14319
|
-
const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
|
|
14320
|
-
const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
|
|
14321
|
-
const [inputValue, setInputValue] = React52.useState("");
|
|
14322
|
-
const filteredOptions = React52.useMemo(() => {
|
|
14323
|
-
const trimmed = inputValue.trim();
|
|
14324
|
-
const valueLabel = (() => {
|
|
14325
|
-
if (props.isMulti) return "";
|
|
14326
|
-
const single = props.value;
|
|
14327
|
-
if (!single) return "";
|
|
14328
|
-
return rest.getValueLabel?.(single) ?? String(single.label);
|
|
14329
|
-
})();
|
|
14330
|
-
const isFiltering = trimmed.length > 0 && trimmed.toLowerCase() !== valueLabel.toLowerCase();
|
|
14331
|
-
let list = rawOptions;
|
|
14332
|
-
if (isFiltering) {
|
|
14333
|
-
list = list.filter((option) => filterOption(option, trimmed));
|
|
14334
|
-
}
|
|
14335
|
-
if (getFullSearchOption && trimmed) {
|
|
14336
|
-
const synthetic = getFullSearchOption(trimmed);
|
|
14337
|
-
if (synthetic) list = [synthetic, ...list];
|
|
14338
|
-
}
|
|
14339
|
-
return list;
|
|
14340
|
-
}, [rawOptions, inputValue, filterOption, getFullSearchOption, props, rest]);
|
|
14341
|
-
const contextValue = React52.useMemo(
|
|
14342
|
-
() => ({
|
|
14343
|
-
canLoadMore,
|
|
14344
|
-
isLoadingMore,
|
|
14345
|
-
loadMoreItems,
|
|
14346
|
-
loadingMoreText,
|
|
14347
|
-
itemHeight,
|
|
14348
|
-
listHeight,
|
|
14349
|
-
overscan,
|
|
14350
|
-
loadMoreThreshold
|
|
14351
|
-
}),
|
|
14352
|
-
[
|
|
14353
|
-
canLoadMore,
|
|
14354
|
-
isLoadingMore,
|
|
14355
|
-
loadMoreItems,
|
|
14356
|
-
loadingMoreText,
|
|
14357
|
-
itemHeight,
|
|
14358
|
-
listHeight,
|
|
14359
|
-
overscan,
|
|
14360
|
-
loadMoreThreshold
|
|
14361
|
-
]
|
|
14362
|
-
);
|
|
14363
|
-
const components = React52.useMemo(
|
|
14364
|
-
() => ({ ...userComponents, MenuList: VirtualMenuList }),
|
|
14365
|
-
[userComponents]
|
|
14366
|
-
);
|
|
14367
|
-
const handleInputChange = React52.useCallback(
|
|
14368
|
-
(value) => {
|
|
14369
|
-
setInputValue(value);
|
|
14370
|
-
onSearchChange?.(value);
|
|
14371
|
-
userOnInputChange?.(value);
|
|
14372
|
-
},
|
|
14373
|
-
[onSearchChange, userOnInputChange]
|
|
14374
|
-
);
|
|
14375
|
-
return /* @__PURE__ */ jsx158(InfiniteScrollContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx158(
|
|
14376
|
-
Select,
|
|
14377
|
-
{
|
|
14378
|
-
ref,
|
|
14379
|
-
...rest,
|
|
14380
|
-
isMulti: props.isMulti,
|
|
14381
|
-
options: filteredOptions,
|
|
14382
|
-
filterOption: passthroughFilter,
|
|
14383
|
-
components,
|
|
14384
|
-
onInputChange: handleInputChange
|
|
14385
|
-
}
|
|
14386
|
-
) });
|
|
14387
|
-
}
|
|
14388
|
-
var InfiniteScrollSelect = React52.forwardRef(
|
|
14389
|
-
InfiniteScrollSelectInternal
|
|
14390
|
-
);
|
|
14391
|
-
|
|
14392
|
-
// src/dashboard/searching-select/SearchingSelect.tsx
|
|
14393
|
-
import { Fragment as Fragment16, jsx as jsx159 } from "react/jsx-runtime";
|
|
14394
|
-
function makeTriggerSlot(render) {
|
|
14395
|
-
function CustomTrigger(props) {
|
|
14396
|
-
return /* @__PURE__ */ jsx159(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
|
|
14397
|
-
}
|
|
14398
|
-
return CustomTrigger;
|
|
14399
|
-
}
|
|
14400
|
-
function hasPaginationProps(props) {
|
|
14401
|
-
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
|
|
14402
|
-
}
|
|
14403
|
-
function SearchingSelectInternal(props, ref) {
|
|
14404
|
-
const { trigger, components: userComponents, searchable = true, ...rest } = props;
|
|
14405
|
-
const Control = React53.useMemo(() => {
|
|
14406
|
-
if (trigger) return makeTriggerSlot(trigger);
|
|
14407
|
-
return StaticControl;
|
|
14408
|
-
}, [trigger]);
|
|
14409
|
-
const components = React53.useMemo(
|
|
14410
|
-
() => ({ ...userComponents, Control }),
|
|
14411
|
-
[userComponents, Control]
|
|
14412
|
-
);
|
|
14413
|
-
if (hasPaginationProps(
|
|
14414
|
-
rest
|
|
14415
|
-
)) {
|
|
14416
|
-
return /* @__PURE__ */ jsx159(
|
|
14417
|
-
InfiniteScrollSelect,
|
|
14418
|
-
{
|
|
14419
|
-
ref,
|
|
14420
|
-
...rest,
|
|
14421
|
-
components,
|
|
14422
|
-
searchPosition: searchable ? "dropdown" : "trigger"
|
|
14423
|
-
}
|
|
14424
|
-
);
|
|
14425
|
-
}
|
|
14426
|
-
return /* @__PURE__ */ jsx159(
|
|
14427
|
-
Select,
|
|
14428
|
-
{
|
|
14429
|
-
ref,
|
|
14430
|
-
...rest,
|
|
14431
|
-
components,
|
|
14432
|
-
searchPosition: searchable ? "dropdown" : "trigger"
|
|
14433
|
-
}
|
|
14434
|
-
);
|
|
14435
|
-
}
|
|
14436
|
-
var SearchingSelect = React53.forwardRef(
|
|
14437
|
-
SearchingSelectInternal
|
|
14438
|
-
);
|
|
14439
|
-
|
|
14440
14072
|
// src/dashboard/phone-input/utils.ts
|
|
14441
14073
|
var PREFIX_REGEX = /^\+/;
|
|
14442
14074
|
function clearPhoneNumber(value) {
|
|
@@ -14481,9 +14113,9 @@ function formatPhoneCodeOptionLabel(option) {
|
|
|
14481
14113
|
}
|
|
14482
14114
|
|
|
14483
14115
|
// src/dashboard/phone-input/PhoneInput.tsx
|
|
14484
|
-
import { jsx as
|
|
14116
|
+
import { jsx as jsx157, jsxs as jsxs100 } from "react/jsx-runtime";
|
|
14485
14117
|
var EMPTY_VALUE = { code: "", number: "" };
|
|
14486
|
-
var PhoneInput =
|
|
14118
|
+
var PhoneInput = React50.forwardRef(
|
|
14487
14119
|
function PhoneInput2({
|
|
14488
14120
|
options,
|
|
14489
14121
|
value,
|
|
@@ -14507,20 +14139,22 @@ var PhoneInput = React54.forwardRef(
|
|
|
14507
14139
|
invalid,
|
|
14508
14140
|
className,
|
|
14509
14141
|
autoDetectCode = true,
|
|
14510
|
-
searchable = true
|
|
14142
|
+
searchable = true,
|
|
14143
|
+
defaultCode
|
|
14511
14144
|
}, ref) {
|
|
14512
|
-
const { t } =
|
|
14145
|
+
const { t } = useTranslation34();
|
|
14513
14146
|
const safeValue = value ?? EMPTY_VALUE;
|
|
14147
|
+
const effectiveCode = safeValue.code || defaultCode || "";
|
|
14514
14148
|
const resolvedLabel = label ?? "";
|
|
14515
14149
|
const resolvedPrefixLabel = prefixLabel ?? t("prefix");
|
|
14516
14150
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
14517
14151
|
const isCodeBlocked = isBlocked || Boolean(readOnly) || Boolean(codeReadOnly);
|
|
14518
14152
|
const hasExternalError = Boolean(error);
|
|
14519
|
-
const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !
|
|
14153
|
+
const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !effectiveCode;
|
|
14520
14154
|
const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
|
|
14521
14155
|
const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
|
|
14522
|
-
const combinedValue =
|
|
14523
|
-
const codeOptions =
|
|
14156
|
+
const combinedValue = effectiveCode || safeValue.number ? `${effectiveCode}${safeValue.number}` : "";
|
|
14157
|
+
const codeOptions = React50.useMemo(
|
|
14524
14158
|
() => options.map((option) => ({
|
|
14525
14159
|
value: option.value,
|
|
14526
14160
|
label: formatPhoneCodeOptionLabel(option),
|
|
@@ -14529,11 +14163,11 @@ var PhoneInput = React54.forwardRef(
|
|
|
14529
14163
|
})),
|
|
14530
14164
|
[options]
|
|
14531
14165
|
);
|
|
14532
|
-
const selectedCodeOption =
|
|
14533
|
-
() => codeOptions.find((option) => option.value ===
|
|
14534
|
-
[codeOptions,
|
|
14166
|
+
const selectedCodeOption = React50.useMemo(
|
|
14167
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
14168
|
+
[codeOptions, effectiveCode]
|
|
14535
14169
|
);
|
|
14536
|
-
const parsePhoneValue =
|
|
14170
|
+
const parsePhoneValue = React50.useMemo(
|
|
14537
14171
|
() => parsePhoneValueWithOptions(options),
|
|
14538
14172
|
[options]
|
|
14539
14173
|
);
|
|
@@ -14548,7 +14182,7 @@ var PhoneInput = React54.forwardRef(
|
|
|
14548
14182
|
if (readOnly || disabled) return;
|
|
14549
14183
|
const rawValue = event.target.value;
|
|
14550
14184
|
if (!autoDetectCode) {
|
|
14551
|
-
emitChange({ code:
|
|
14185
|
+
emitChange({ code: effectiveCode, number: clearPhoneNumber(rawValue) });
|
|
14552
14186
|
return;
|
|
14553
14187
|
}
|
|
14554
14188
|
const parsed = parsePhoneValue(rawValue);
|
|
@@ -14557,9 +14191,9 @@ var PhoneInput = React54.forwardRef(
|
|
|
14557
14191
|
emitChange({ code: parsed.code, number: cleanedNumber });
|
|
14558
14192
|
return;
|
|
14559
14193
|
}
|
|
14560
|
-
emitChange({ code:
|
|
14194
|
+
emitChange({ code: effectiveCode, number: cleanedNumber });
|
|
14561
14195
|
};
|
|
14562
|
-
return /* @__PURE__ */
|
|
14196
|
+
return /* @__PURE__ */ jsxs100(
|
|
14563
14197
|
"div",
|
|
14564
14198
|
{
|
|
14565
14199
|
className: cn(
|
|
@@ -14569,17 +14203,17 @@ var PhoneInput = React54.forwardRef(
|
|
|
14569
14203
|
className
|
|
14570
14204
|
),
|
|
14571
14205
|
children: [
|
|
14572
|
-
name && /* @__PURE__ */
|
|
14573
|
-
codeName && /* @__PURE__ */
|
|
14206
|
+
name && /* @__PURE__ */ jsx157("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
14207
|
+
codeName && /* @__PURE__ */ jsx157(
|
|
14574
14208
|
"input",
|
|
14575
14209
|
{
|
|
14576
14210
|
type: "hidden",
|
|
14577
14211
|
name: codeName,
|
|
14578
|
-
value:
|
|
14212
|
+
value: effectiveCode,
|
|
14579
14213
|
disabled
|
|
14580
14214
|
}
|
|
14581
14215
|
),
|
|
14582
|
-
numberName && /* @__PURE__ */
|
|
14216
|
+
numberName && /* @__PURE__ */ jsx157(
|
|
14583
14217
|
"input",
|
|
14584
14218
|
{
|
|
14585
14219
|
type: "hidden",
|
|
@@ -14588,10 +14222,10 @@ var PhoneInput = React54.forwardRef(
|
|
|
14588
14222
|
disabled
|
|
14589
14223
|
}
|
|
14590
14224
|
),
|
|
14591
|
-
topLabel && /* @__PURE__ */
|
|
14592
|
-
/* @__PURE__ */
|
|
14593
|
-
/* @__PURE__ */
|
|
14594
|
-
|
|
14225
|
+
topLabel && /* @__PURE__ */ jsx157("label", { className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: topLabel }),
|
|
14226
|
+
/* @__PURE__ */ jsxs100("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2", children: [
|
|
14227
|
+
/* @__PURE__ */ jsx157(
|
|
14228
|
+
Select,
|
|
14595
14229
|
{
|
|
14596
14230
|
options: codeOptions,
|
|
14597
14231
|
value: selectedCodeOption,
|
|
@@ -14602,13 +14236,13 @@ var PhoneInput = React54.forwardRef(
|
|
|
14602
14236
|
loading,
|
|
14603
14237
|
invalid: hasInvalidState,
|
|
14604
14238
|
hideErrorMessage: true,
|
|
14605
|
-
searchable,
|
|
14239
|
+
searchPosition: searchable ? "dropdown" : "trigger",
|
|
14606
14240
|
getValueLabel: (option) => option.value,
|
|
14607
14241
|
className: "!max-w-none",
|
|
14608
14242
|
dropdownClassName: "right-auto w-[280px]"
|
|
14609
14243
|
}
|
|
14610
14244
|
),
|
|
14611
|
-
/* @__PURE__ */
|
|
14245
|
+
/* @__PURE__ */ jsx157(
|
|
14612
14246
|
Input,
|
|
14613
14247
|
{
|
|
14614
14248
|
ref,
|
|
@@ -14631,8 +14265,8 @@ var PhoneInput = React54.forwardRef(
|
|
|
14631
14265
|
}
|
|
14632
14266
|
)
|
|
14633
14267
|
] }),
|
|
14634
|
-
!errorMessage && optional && /* @__PURE__ */
|
|
14635
|
-
errorMessage && /* @__PURE__ */
|
|
14268
|
+
!errorMessage && optional && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
14269
|
+
errorMessage && /* @__PURE__ */ jsx157(
|
|
14636
14270
|
FieldErrorMessage,
|
|
14637
14271
|
{
|
|
14638
14272
|
message: errorMessage,
|
|
@@ -14642,46 +14276,375 @@ var PhoneInput = React54.forwardRef(
|
|
|
14642
14276
|
)
|
|
14643
14277
|
]
|
|
14644
14278
|
}
|
|
14645
|
-
);
|
|
14279
|
+
);
|
|
14280
|
+
}
|
|
14281
|
+
);
|
|
14282
|
+
PhoneInput.displayName = "PhoneInput";
|
|
14283
|
+
|
|
14284
|
+
// src/dashboard/creatable-select/CreatableSelect.tsx
|
|
14285
|
+
import * as React51 from "react";
|
|
14286
|
+
import { jsx as jsx158 } from "react/jsx-runtime";
|
|
14287
|
+
var CreatableSelect = React51.forwardRef(function CreatableSelect2(props, ref) {
|
|
14288
|
+
return /* @__PURE__ */ jsx158(Select, { ref, ...props, isCreatable: true });
|
|
14289
|
+
});
|
|
14290
|
+
|
|
14291
|
+
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14292
|
+
import * as React52 from "react";
|
|
14293
|
+
import { jsx as jsx159 } from "react/jsx-runtime";
|
|
14294
|
+
var MultiSelect = React52.forwardRef(function MultiSelect2(props, ref) {
|
|
14295
|
+
return /* @__PURE__ */ jsx159(Select, { ref, ...props, isMulti: true });
|
|
14296
|
+
});
|
|
14297
|
+
|
|
14298
|
+
// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
|
|
14299
|
+
import * as React53 from "react";
|
|
14300
|
+
import { jsx as jsx160 } from "react/jsx-runtime";
|
|
14301
|
+
var CreatableMultiSelect = React53.forwardRef(function CreatableMultiSelect2(props, ref) {
|
|
14302
|
+
return /* @__PURE__ */ jsx160(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
14303
|
+
});
|
|
14304
|
+
|
|
14305
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14306
|
+
import * as React56 from "react";
|
|
14307
|
+
|
|
14308
|
+
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14309
|
+
import * as React55 from "react";
|
|
14310
|
+
import { useTranslation as useTranslation35 } from "react-i18next";
|
|
14311
|
+
import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
|
|
14312
|
+
|
|
14313
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollContext.tsx
|
|
14314
|
+
import * as React54 from "react";
|
|
14315
|
+
var InfiniteScrollContext = React54.createContext(
|
|
14316
|
+
null
|
|
14317
|
+
);
|
|
14318
|
+
function useInfiniteScrollContext() {
|
|
14319
|
+
const ctx = React54.useContext(InfiniteScrollContext);
|
|
14320
|
+
if (!ctx) {
|
|
14321
|
+
throw new Error(
|
|
14322
|
+
"useInfiniteScrollContext must be used within an InfiniteScrollContext.Provider"
|
|
14323
|
+
);
|
|
14324
|
+
}
|
|
14325
|
+
return ctx;
|
|
14326
|
+
}
|
|
14327
|
+
|
|
14328
|
+
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14329
|
+
import { jsx as jsx161, jsxs as jsxs101 } from "react/jsx-runtime";
|
|
14330
|
+
function VirtualMenuList(props) {
|
|
14331
|
+
const {
|
|
14332
|
+
id,
|
|
14333
|
+
labelledBy,
|
|
14334
|
+
describedBy,
|
|
14335
|
+
getOptionId: getOptionId2,
|
|
14336
|
+
options,
|
|
14337
|
+
selectedOptions,
|
|
14338
|
+
isMulti,
|
|
14339
|
+
highlightedIndex,
|
|
14340
|
+
onOptionHover,
|
|
14341
|
+
onOptionClick,
|
|
14342
|
+
disabled,
|
|
14343
|
+
isOptionDisabled,
|
|
14344
|
+
menuClassName,
|
|
14345
|
+
noOptionsMessage,
|
|
14346
|
+
components,
|
|
14347
|
+
inputValue = "",
|
|
14348
|
+
formatOptionLabel,
|
|
14349
|
+
isOptionSelected: isOptionSelectedProp,
|
|
14350
|
+
onMenuScrollToBottom
|
|
14351
|
+
} = props;
|
|
14352
|
+
const {
|
|
14353
|
+
canLoadMore,
|
|
14354
|
+
isLoadingMore,
|
|
14355
|
+
loadMoreItems,
|
|
14356
|
+
loadingMoreText,
|
|
14357
|
+
itemHeight,
|
|
14358
|
+
listHeight,
|
|
14359
|
+
overscan,
|
|
14360
|
+
loadMoreThreshold
|
|
14361
|
+
} = useInfiniteScrollContext();
|
|
14362
|
+
const Option = components?.Option ?? DefaultOption;
|
|
14363
|
+
const { t } = useTranslation35();
|
|
14364
|
+
const scrollRef = React55.useRef(null);
|
|
14365
|
+
const lastLoadMoreOptionsLengthRef = React55.useRef(null);
|
|
14366
|
+
const previousHighlightedIndexRef = React55.useRef(-1);
|
|
14367
|
+
const showLoaderRow = Boolean(canLoadMore || isLoadingMore);
|
|
14368
|
+
const itemCount = options.length + (showLoaderRow ? 1 : 0);
|
|
14369
|
+
const virtualizer = useVirtualizer2({
|
|
14370
|
+
count: itemCount,
|
|
14371
|
+
getScrollElement: () => scrollRef.current,
|
|
14372
|
+
estimateSize: () => itemHeight,
|
|
14373
|
+
overscan
|
|
14374
|
+
});
|
|
14375
|
+
const virtualItems = virtualizer.getVirtualItems();
|
|
14376
|
+
const totalSize = virtualizer.getTotalSize();
|
|
14377
|
+
const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
|
|
14378
|
+
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14379
|
+
React55.useEffect(() => {
|
|
14380
|
+
if (!canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14381
|
+
if (virtualItems.length === 0) return;
|
|
14382
|
+
const lastItem = virtualItems[virtualItems.length - 1];
|
|
14383
|
+
if (!lastItem || lastItem.index < options.length - loadMoreThreshold) return;
|
|
14384
|
+
if (lastLoadMoreOptionsLengthRef.current === options.length) return;
|
|
14385
|
+
lastLoadMoreOptionsLengthRef.current = options.length;
|
|
14386
|
+
loadMoreItems();
|
|
14387
|
+
}, [
|
|
14388
|
+
virtualItems,
|
|
14389
|
+
options.length,
|
|
14390
|
+
canLoadMore,
|
|
14391
|
+
isLoadingMore,
|
|
14392
|
+
loadMoreItems,
|
|
14393
|
+
loadMoreThreshold
|
|
14394
|
+
]);
|
|
14395
|
+
React55.useEffect(() => {
|
|
14396
|
+
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14397
|
+
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14398
|
+
if (highlightedIndex < 0 || !changed) return;
|
|
14399
|
+
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
14400
|
+
}, [highlightedIndex, virtualizer]);
|
|
14401
|
+
const activeOptionId = highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0;
|
|
14402
|
+
const lastOptionIndex = options.length - 1;
|
|
14403
|
+
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14404
|
+
const isOptionSelected2 = (option) => isOptionSelectedProp ? isOptionSelectedProp(option, selectedOptions) : selectedOptions.some((s) => s.value === option.value);
|
|
14405
|
+
const wasAtBottomRef = React55.useRef(false);
|
|
14406
|
+
const handleScroll = React55.useCallback(
|
|
14407
|
+
(event) => {
|
|
14408
|
+
if (!onMenuScrollToBottom) return;
|
|
14409
|
+
const target = event.currentTarget;
|
|
14410
|
+
const atBottom = target.scrollHeight - target.scrollTop - target.clientHeight <= 1;
|
|
14411
|
+
if (atBottom && !wasAtBottomRef.current) {
|
|
14412
|
+
onMenuScrollToBottom(event);
|
|
14413
|
+
}
|
|
14414
|
+
wasAtBottomRef.current = atBottom;
|
|
14415
|
+
},
|
|
14416
|
+
[onMenuScrollToBottom]
|
|
14417
|
+
);
|
|
14418
|
+
if (options.length === 0) {
|
|
14419
|
+
return /* @__PURE__ */ jsx161("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ jsxs101(
|
|
14420
|
+
"div",
|
|
14421
|
+
{
|
|
14422
|
+
role: "status",
|
|
14423
|
+
"aria-busy": "true",
|
|
14424
|
+
"aria-live": "polite",
|
|
14425
|
+
className: "flex flex-col gap-2",
|
|
14426
|
+
children: [
|
|
14427
|
+
/* @__PURE__ */ jsx161("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14428
|
+
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx161(
|
|
14429
|
+
Skeleton,
|
|
14430
|
+
{
|
|
14431
|
+
className: "h-10 w-full rounded-md",
|
|
14432
|
+
style: { animationDelay: `${index * 120}ms`, opacity: 1 - index * 0.2 }
|
|
14433
|
+
},
|
|
14434
|
+
index
|
|
14435
|
+
))
|
|
14436
|
+
]
|
|
14437
|
+
}
|
|
14438
|
+
) : /* @__PURE__ */ jsx161("div", { className: "flex min-h-[40px] items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]", children: emptyMessage }) });
|
|
14646
14439
|
}
|
|
14647
|
-
|
|
14648
|
-
|
|
14649
|
-
|
|
14650
|
-
|
|
14651
|
-
|
|
14652
|
-
|
|
14653
|
-
|
|
14654
|
-
|
|
14655
|
-
|
|
14440
|
+
return /* @__PURE__ */ jsx161("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: /* @__PURE__ */ jsx161(
|
|
14441
|
+
"div",
|
|
14442
|
+
{
|
|
14443
|
+
ref: scrollRef,
|
|
14444
|
+
className: cn("overflow-y-auto", menuClassName),
|
|
14445
|
+
style: { height: `${measuredListHeight}px` },
|
|
14446
|
+
onScroll: onMenuScrollToBottom ? handleScroll : void 0,
|
|
14447
|
+
children: /* @__PURE__ */ jsx161(
|
|
14448
|
+
"div",
|
|
14449
|
+
{
|
|
14450
|
+
id,
|
|
14451
|
+
role: "listbox",
|
|
14452
|
+
tabIndex: -1,
|
|
14453
|
+
"aria-labelledby": labelledBy,
|
|
14454
|
+
"aria-describedby": describedBy,
|
|
14455
|
+
"aria-activedescendant": activeOptionId,
|
|
14456
|
+
className: "relative w-full",
|
|
14457
|
+
style: { height: `${totalSize}px` },
|
|
14458
|
+
children: virtualItems.map((virtualItem) => {
|
|
14459
|
+
const isLoaderRow = virtualItem.index >= options.length;
|
|
14460
|
+
const option = options[virtualItem.index];
|
|
14461
|
+
const isSelected = !isLoaderRow && option ? isOptionSelected2(option) : false;
|
|
14462
|
+
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
14463
|
+
const optionDisabledFlag = Boolean(
|
|
14464
|
+
disabled || option?.isDisabled || option && isOptionDisabled?.(option)
|
|
14465
|
+
);
|
|
14466
|
+
const isLastOption = !isLoaderRow && virtualItem.index === lastOptionIndex && !canLoadMore;
|
|
14467
|
+
return /* @__PURE__ */ jsx161(
|
|
14468
|
+
"div",
|
|
14469
|
+
{
|
|
14470
|
+
"data-index": virtualItem.index,
|
|
14471
|
+
className: "absolute left-0 top-0 w-full h-full",
|
|
14472
|
+
style: {
|
|
14473
|
+
height: `${virtualItem.size}px`,
|
|
14474
|
+
transform: `translateY(${virtualItem.start}px)`
|
|
14475
|
+
},
|
|
14476
|
+
children: isLoaderRow ? /* @__PURE__ */ jsxs101(
|
|
14477
|
+
"div",
|
|
14478
|
+
{
|
|
14479
|
+
role: "status",
|
|
14480
|
+
"aria-busy": "true",
|
|
14481
|
+
"aria-live": "polite",
|
|
14482
|
+
className: "flex h-full items-center justify-center",
|
|
14483
|
+
children: [
|
|
14484
|
+
/* @__PURE__ */ jsx161("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14485
|
+
/* @__PURE__ */ jsx161(
|
|
14486
|
+
ThreeDotsLoader,
|
|
14487
|
+
{
|
|
14488
|
+
height: 24,
|
|
14489
|
+
width: 24,
|
|
14490
|
+
color: "var(--chekin-color-brand-blue)"
|
|
14491
|
+
}
|
|
14492
|
+
)
|
|
14493
|
+
]
|
|
14494
|
+
}
|
|
14495
|
+
) : option ? /* @__PURE__ */ jsx161(
|
|
14496
|
+
Option,
|
|
14497
|
+
{
|
|
14498
|
+
id: getOptionId2(virtualItem.index),
|
|
14499
|
+
option,
|
|
14500
|
+
index: virtualItem.index,
|
|
14501
|
+
isSelected,
|
|
14502
|
+
isHighlighted,
|
|
14503
|
+
isDisabled: optionDisabledFlag,
|
|
14504
|
+
isLast: isLastOption,
|
|
14505
|
+
isMulti: Boolean(isMulti),
|
|
14506
|
+
onClick: onOptionClick,
|
|
14507
|
+
onHover: onOptionHover,
|
|
14508
|
+
innerRef: () => void 0,
|
|
14509
|
+
inputValue,
|
|
14510
|
+
selectedOptions,
|
|
14511
|
+
formatOptionLabel
|
|
14512
|
+
}
|
|
14513
|
+
) : null
|
|
14514
|
+
},
|
|
14515
|
+
virtualItem.key
|
|
14516
|
+
);
|
|
14517
|
+
})
|
|
14518
|
+
}
|
|
14519
|
+
)
|
|
14520
|
+
}
|
|
14521
|
+
) });
|
|
14522
|
+
}
|
|
14656
14523
|
|
|
14657
|
-
// src/dashboard/
|
|
14658
|
-
import * as React56 from "react";
|
|
14524
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14659
14525
|
import { jsx as jsx162 } from "react/jsx-runtime";
|
|
14660
|
-
var
|
|
14661
|
-
|
|
14662
|
-
|
|
14526
|
+
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14527
|
+
var DEFAULT_LIST_HEIGHT = 322;
|
|
14528
|
+
var DEFAULT_OVERSCAN = 5;
|
|
14529
|
+
var DEFAULT_LOAD_MORE_THRESHOLD = 5;
|
|
14530
|
+
var passthroughFilter = () => true;
|
|
14531
|
+
function InfiniteScrollSelectInternal(props, ref) {
|
|
14532
|
+
const {
|
|
14533
|
+
options: rawOptions = [],
|
|
14534
|
+
canLoadMore,
|
|
14535
|
+
isLoadingMore,
|
|
14536
|
+
loadMoreItems,
|
|
14537
|
+
loadingMoreText,
|
|
14538
|
+
onSearchChange,
|
|
14539
|
+
itemHeight = DEFAULT_ITEM_HEIGHT,
|
|
14540
|
+
listHeight = DEFAULT_LIST_HEIGHT,
|
|
14541
|
+
overscan = DEFAULT_OVERSCAN,
|
|
14542
|
+
loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD,
|
|
14543
|
+
getFullSearchOption,
|
|
14544
|
+
filterOption: userFilterOption,
|
|
14545
|
+
components: userComponents,
|
|
14546
|
+
onInputChange: userOnInputChange,
|
|
14547
|
+
isMulti = false,
|
|
14548
|
+
...rest
|
|
14549
|
+
} = props;
|
|
14550
|
+
const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
|
|
14551
|
+
const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
|
|
14552
|
+
const [inputValue, setInputValue] = React56.useState("");
|
|
14553
|
+
const filteredOptions = React56.useMemo(() => {
|
|
14554
|
+
const trimmed = inputValue.trim();
|
|
14555
|
+
const valueLabel = (() => {
|
|
14556
|
+
if (isMulti) return "";
|
|
14557
|
+
const single = rest.value;
|
|
14558
|
+
if (!single) return "";
|
|
14559
|
+
return rest.getValueLabel?.(single) ?? String(single.label);
|
|
14560
|
+
})();
|
|
14561
|
+
const isFiltering = trimmed.length > 0 && trimmed.toLowerCase() !== valueLabel.toLowerCase();
|
|
14562
|
+
let list = rawOptions;
|
|
14563
|
+
if (isFiltering) {
|
|
14564
|
+
list = list.filter((option) => filterOption(option, trimmed));
|
|
14565
|
+
}
|
|
14566
|
+
if (getFullSearchOption && trimmed) {
|
|
14567
|
+
const synthetic = getFullSearchOption(trimmed);
|
|
14568
|
+
if (synthetic) list = [synthetic, ...list];
|
|
14569
|
+
}
|
|
14570
|
+
return list;
|
|
14571
|
+
}, [rawOptions, inputValue, filterOption, getFullSearchOption, isMulti, rest]);
|
|
14572
|
+
const contextValue = React56.useMemo(
|
|
14573
|
+
() => ({
|
|
14574
|
+
canLoadMore,
|
|
14575
|
+
isLoadingMore,
|
|
14576
|
+
loadMoreItems,
|
|
14577
|
+
loadingMoreText,
|
|
14578
|
+
itemHeight,
|
|
14579
|
+
listHeight,
|
|
14580
|
+
overscan,
|
|
14581
|
+
loadMoreThreshold
|
|
14582
|
+
}),
|
|
14583
|
+
[
|
|
14584
|
+
canLoadMore,
|
|
14585
|
+
isLoadingMore,
|
|
14586
|
+
loadMoreItems,
|
|
14587
|
+
loadingMoreText,
|
|
14588
|
+
itemHeight,
|
|
14589
|
+
listHeight,
|
|
14590
|
+
overscan,
|
|
14591
|
+
loadMoreThreshold
|
|
14592
|
+
]
|
|
14593
|
+
);
|
|
14594
|
+
const components = React56.useMemo(
|
|
14595
|
+
() => ({ ...userComponents, MenuList: VirtualMenuList }),
|
|
14596
|
+
[userComponents]
|
|
14597
|
+
);
|
|
14598
|
+
const handleInputChange = React56.useCallback(
|
|
14599
|
+
(value) => {
|
|
14600
|
+
setInputValue(value);
|
|
14601
|
+
onSearchChange?.(value);
|
|
14602
|
+
userOnInputChange?.(value);
|
|
14603
|
+
},
|
|
14604
|
+
[onSearchChange, userOnInputChange]
|
|
14605
|
+
);
|
|
14606
|
+
const selectExtras = {
|
|
14607
|
+
options: filteredOptions,
|
|
14608
|
+
filterOption: passthroughFilter,
|
|
14609
|
+
components,
|
|
14610
|
+
onInputChange: handleInputChange
|
|
14611
|
+
};
|
|
14612
|
+
return /* @__PURE__ */ jsx162(InfiniteScrollContext.Provider, { value: contextValue, children: isMulti ? /* @__PURE__ */ jsx162(
|
|
14613
|
+
Select,
|
|
14614
|
+
{
|
|
14615
|
+
ref,
|
|
14616
|
+
...rest,
|
|
14617
|
+
...selectExtras,
|
|
14618
|
+
isMulti: true
|
|
14619
|
+
}
|
|
14620
|
+
) : /* @__PURE__ */ jsx162(
|
|
14621
|
+
Select,
|
|
14622
|
+
{
|
|
14623
|
+
ref,
|
|
14624
|
+
...rest,
|
|
14625
|
+
...selectExtras,
|
|
14626
|
+
isMulti: false
|
|
14627
|
+
}
|
|
14628
|
+
) });
|
|
14629
|
+
}
|
|
14630
|
+
var InfiniteScrollSelect = React56.forwardRef(
|
|
14631
|
+
InfiniteScrollSelectInternal
|
|
14632
|
+
);
|
|
14663
14633
|
|
|
14664
|
-
// src/dashboard/
|
|
14634
|
+
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
14665
14635
|
import * as React57 from "react";
|
|
14666
14636
|
import { jsx as jsx163 } from "react/jsx-runtime";
|
|
14667
|
-
var
|
|
14668
|
-
return /* @__PURE__ */ jsx163(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
14669
|
-
});
|
|
14670
|
-
|
|
14671
|
-
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
14672
|
-
import * as React58 from "react";
|
|
14673
|
-
import { jsx as jsx164 } from "react/jsx-runtime";
|
|
14674
|
-
var InfiniteScrollMultiSelect = React58.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
14637
|
+
var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
14675
14638
|
const Forwarded = InfiniteScrollSelect;
|
|
14676
|
-
return /* @__PURE__ */
|
|
14639
|
+
return /* @__PURE__ */ jsx163(Forwarded, { ...props, ref, isMulti: true });
|
|
14677
14640
|
});
|
|
14678
14641
|
|
|
14679
14642
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14680
|
-
import * as
|
|
14643
|
+
import * as React58 from "react";
|
|
14681
14644
|
import { useTranslation as useTranslation37 } from "react-i18next";
|
|
14682
14645
|
|
|
14683
14646
|
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
14684
|
-
import { jsx as
|
|
14647
|
+
import { jsx as jsx164, jsxs as jsxs102 } from "react/jsx-runtime";
|
|
14685
14648
|
function SelectCheckboxOption(props) {
|
|
14686
14649
|
const {
|
|
14687
14650
|
option,
|
|
@@ -14715,7 +14678,7 @@ function SelectCheckboxOption(props) {
|
|
|
14715
14678
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
14716
14679
|
),
|
|
14717
14680
|
children: [
|
|
14718
|
-
/* @__PURE__ */
|
|
14681
|
+
/* @__PURE__ */ jsx164(
|
|
14719
14682
|
BaseCheckbox,
|
|
14720
14683
|
{
|
|
14721
14684
|
checked: isSelected,
|
|
@@ -14726,8 +14689,8 @@ function SelectCheckboxOption(props) {
|
|
|
14726
14689
|
}
|
|
14727
14690
|
),
|
|
14728
14691
|
/* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
14729
|
-
/* @__PURE__ */
|
|
14730
|
-
option.description && /* @__PURE__ */
|
|
14692
|
+
/* @__PURE__ */ jsx164("span", { className: "block break-words", children: option.label }),
|
|
14693
|
+
option.description && /* @__PURE__ */ jsx164("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
14731
14694
|
] })
|
|
14732
14695
|
]
|
|
14733
14696
|
}
|
|
@@ -14737,7 +14700,7 @@ function SelectCheckboxOption(props) {
|
|
|
14737
14700
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
14738
14701
|
import { ChevronDown as ChevronDown3 } from "lucide-react";
|
|
14739
14702
|
import { useTranslation as useTranslation36 } from "react-i18next";
|
|
14740
|
-
import { jsx as
|
|
14703
|
+
import { jsx as jsx165, jsxs as jsxs103 } from "react/jsx-runtime";
|
|
14741
14704
|
function createCountTrigger(opts) {
|
|
14742
14705
|
const { valueText, totalCount } = opts;
|
|
14743
14706
|
function CountTrigger(props) {
|
|
@@ -14786,9 +14749,9 @@ function createCountTrigger(opts) {
|
|
|
14786
14749
|
loading && "!cursor-progress"
|
|
14787
14750
|
),
|
|
14788
14751
|
children: [
|
|
14789
|
-
leftIcon && /* @__PURE__ */
|
|
14790
|
-
/* @__PURE__ */
|
|
14791
|
-
/* @__PURE__ */
|
|
14752
|
+
leftIcon && /* @__PURE__ */ jsx165("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx165("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
14753
|
+
/* @__PURE__ */ jsx165("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
14754
|
+
/* @__PURE__ */ jsx165("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx165(
|
|
14792
14755
|
ChevronDown3,
|
|
14793
14756
|
{
|
|
14794
14757
|
size: 16,
|
|
@@ -14806,7 +14769,7 @@ function createCountTrigger(opts) {
|
|
|
14806
14769
|
}
|
|
14807
14770
|
|
|
14808
14771
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
14809
|
-
import { jsx as
|
|
14772
|
+
import { jsx as jsx166, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
14810
14773
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
14811
14774
|
return /* @__PURE__ */ jsxs104(
|
|
14812
14775
|
"button",
|
|
@@ -14819,7 +14782,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14819
14782
|
disabled && "cursor-default opacity-40"
|
|
14820
14783
|
),
|
|
14821
14784
|
children: [
|
|
14822
|
-
/* @__PURE__ */
|
|
14785
|
+
/* @__PURE__ */ jsx166(
|
|
14823
14786
|
BaseCheckbox,
|
|
14824
14787
|
{
|
|
14825
14788
|
checked,
|
|
@@ -14829,20 +14792,20 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14829
14792
|
className: "pointer-events-none shrink-0"
|
|
14830
14793
|
}
|
|
14831
14794
|
),
|
|
14832
|
-
/* @__PURE__ */
|
|
14795
|
+
/* @__PURE__ */ jsx166("span", { className: "flex-1", children: label })
|
|
14833
14796
|
]
|
|
14834
14797
|
}
|
|
14835
14798
|
);
|
|
14836
14799
|
}
|
|
14837
14800
|
|
|
14838
14801
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14839
|
-
import { Fragment as
|
|
14840
|
-
function
|
|
14802
|
+
import { Fragment as Fragment16, jsx as jsx167 } from "react/jsx-runtime";
|
|
14803
|
+
function hasPaginationProps(props) {
|
|
14841
14804
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
|
|
14842
14805
|
}
|
|
14843
|
-
function
|
|
14806
|
+
function makeTriggerSlot(render) {
|
|
14844
14807
|
function CustomTrigger(props) {
|
|
14845
|
-
return /* @__PURE__ */
|
|
14808
|
+
return /* @__PURE__ */ jsx167(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
|
|
14846
14809
|
}
|
|
14847
14810
|
return CustomTrigger;
|
|
14848
14811
|
}
|
|
@@ -14865,28 +14828,28 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14865
14828
|
...paginationAndRest
|
|
14866
14829
|
} = props;
|
|
14867
14830
|
const { t } = useTranslation37();
|
|
14868
|
-
const isPaginated =
|
|
14831
|
+
const isPaginated = hasPaginationProps(
|
|
14869
14832
|
paginationAndRest
|
|
14870
14833
|
);
|
|
14871
|
-
const [inputValue, setInputValue] =
|
|
14834
|
+
const [inputValue, setInputValue] = React58.useState("");
|
|
14872
14835
|
const isControlled = value !== void 0;
|
|
14873
|
-
const [internalValue, setInternalValue] =
|
|
14836
|
+
const [internalValue, setInternalValue] = React58.useState(
|
|
14874
14837
|
() => defaultValue ?? []
|
|
14875
14838
|
);
|
|
14876
14839
|
const currentValue = isControlled ? value : internalValue;
|
|
14877
|
-
const selected =
|
|
14878
|
-
const handleChange =
|
|
14840
|
+
const selected = React58.useMemo(() => currentValue ?? [], [currentValue]);
|
|
14841
|
+
const handleChange = React58.useCallback(
|
|
14879
14842
|
(next, meta) => {
|
|
14880
14843
|
if (!isControlled) setInternalValue(next);
|
|
14881
14844
|
onChange?.(next, meta);
|
|
14882
14845
|
},
|
|
14883
14846
|
[isControlled, onChange]
|
|
14884
14847
|
);
|
|
14885
|
-
const flatRawOptions =
|
|
14848
|
+
const flatRawOptions = React58.useMemo(
|
|
14886
14849
|
() => flattenGroupedOptions(rawOptions),
|
|
14887
14850
|
[rawOptions]
|
|
14888
14851
|
);
|
|
14889
|
-
const filteredGrouped =
|
|
14852
|
+
const filteredGrouped = React58.useMemo(() => {
|
|
14890
14853
|
const trimmed = inputValue.trim();
|
|
14891
14854
|
if (!trimmed) return rawOptions;
|
|
14892
14855
|
return rawOptions.map((item) => {
|
|
@@ -14897,7 +14860,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14897
14860
|
return filterOption(item, trimmed) ? item : null;
|
|
14898
14861
|
}).filter((item) => item !== null);
|
|
14899
14862
|
}, [rawOptions, inputValue, filterOption]);
|
|
14900
|
-
const filteredFlat =
|
|
14863
|
+
const filteredFlat = React58.useMemo(
|
|
14901
14864
|
() => flattenGroupedOptions(filteredGrouped),
|
|
14902
14865
|
[filteredGrouped]
|
|
14903
14866
|
);
|
|
@@ -14905,7 +14868,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14905
14868
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
14906
14869
|
}, 0);
|
|
14907
14870
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
14908
|
-
const handleToggleAll =
|
|
14871
|
+
const handleToggleAll = React58.useCallback(() => {
|
|
14909
14872
|
if (allVisibleSelected) {
|
|
14910
14873
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
14911
14874
|
handleChange(
|
|
@@ -14920,14 +14883,14 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14920
14883
|
}
|
|
14921
14884
|
handleChange(merged, { action: "select" });
|
|
14922
14885
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
14923
|
-
const Control =
|
|
14924
|
-
if (trigger) return
|
|
14886
|
+
const Control = React58.useMemo(() => {
|
|
14887
|
+
if (trigger) return makeTriggerSlot(trigger);
|
|
14925
14888
|
return createCountTrigger({
|
|
14926
14889
|
valueText,
|
|
14927
14890
|
totalCount: flatRawOptions.length
|
|
14928
14891
|
});
|
|
14929
14892
|
}, [trigger, valueText, flatRawOptions.length]);
|
|
14930
|
-
const components =
|
|
14893
|
+
const components = React58.useMemo(
|
|
14931
14894
|
() => ({
|
|
14932
14895
|
...userComponents,
|
|
14933
14896
|
Control,
|
|
@@ -14935,7 +14898,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14935
14898
|
}),
|
|
14936
14899
|
[userComponents, Control]
|
|
14937
14900
|
);
|
|
14938
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */
|
|
14901
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ jsx167(
|
|
14939
14902
|
SelectAllRow,
|
|
14940
14903
|
{
|
|
14941
14904
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -14943,7 +14906,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14943
14906
|
onToggle: handleToggleAll
|
|
14944
14907
|
}
|
|
14945
14908
|
) : void 0;
|
|
14946
|
-
const handleInputChange =
|
|
14909
|
+
const handleInputChange = React58.useCallback(
|
|
14947
14910
|
(next) => {
|
|
14948
14911
|
setInputValue(next);
|
|
14949
14912
|
onSearchChange?.(next);
|
|
@@ -14963,7 +14926,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14963
14926
|
isMulti: true
|
|
14964
14927
|
};
|
|
14965
14928
|
if (isPaginated) {
|
|
14966
|
-
return /* @__PURE__ */
|
|
14929
|
+
return /* @__PURE__ */ jsx167(
|
|
14967
14930
|
InfiniteScrollSelect,
|
|
14968
14931
|
{
|
|
14969
14932
|
ref,
|
|
@@ -14974,7 +14937,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14974
14937
|
}
|
|
14975
14938
|
);
|
|
14976
14939
|
}
|
|
14977
|
-
return /* @__PURE__ */
|
|
14940
|
+
return /* @__PURE__ */ jsx167(
|
|
14978
14941
|
Select,
|
|
14979
14942
|
{
|
|
14980
14943
|
ref,
|
|
@@ -14985,16 +14948,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14985
14948
|
}
|
|
14986
14949
|
);
|
|
14987
14950
|
}
|
|
14988
|
-
var SelectCheckboxes =
|
|
14951
|
+
var SelectCheckboxes = React58.forwardRef(
|
|
14989
14952
|
SelectCheckboxesInternal
|
|
14990
14953
|
);
|
|
14991
14954
|
|
|
14992
14955
|
// src/dashboard/textarea/Textarea.tsx
|
|
14993
|
-
import * as
|
|
14956
|
+
import * as React60 from "react";
|
|
14994
14957
|
import { useTranslation as useTranslation38 } from "react-i18next";
|
|
14995
14958
|
|
|
14996
14959
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
14997
|
-
import * as
|
|
14960
|
+
import * as React59 from "react";
|
|
14998
14961
|
var isEmptyValue2 = (value) => {
|
|
14999
14962
|
if (value === void 0 || value === null) return true;
|
|
15000
14963
|
return String(value).length === 0;
|
|
@@ -15013,12 +14976,12 @@ function useTextareaValueState({
|
|
|
15013
14976
|
value,
|
|
15014
14977
|
defaultValue
|
|
15015
14978
|
}) {
|
|
15016
|
-
const textareaRef =
|
|
14979
|
+
const textareaRef = React59.useRef(null);
|
|
15017
14980
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15018
14981
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15019
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
14982
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React59.useState(propsAreEmpty);
|
|
15020
14983
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15021
|
-
const setNativeValue =
|
|
14984
|
+
const setNativeValue = React59.useCallback(
|
|
15022
14985
|
(nextValue) => {
|
|
15023
14986
|
if (isControlled) return;
|
|
15024
14987
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15028,14 +14991,14 @@ function useTextareaValueState({
|
|
|
15028
14991
|
},
|
|
15029
14992
|
[isControlled]
|
|
15030
14993
|
);
|
|
15031
|
-
const syncValueState =
|
|
14994
|
+
const syncValueState = React59.useCallback(() => {
|
|
15032
14995
|
if (!textareaRef.current) return;
|
|
15033
14996
|
setNativeValue(textareaRef.current.value);
|
|
15034
14997
|
}, [setNativeValue]);
|
|
15035
|
-
|
|
14998
|
+
React59.useLayoutEffect(() => {
|
|
15036
14999
|
syncValueState();
|
|
15037
15000
|
});
|
|
15038
|
-
|
|
15001
|
+
React59.useEffect(() => {
|
|
15039
15002
|
const textarea = textareaRef.current;
|
|
15040
15003
|
const form = textarea?.form;
|
|
15041
15004
|
if (isControlled || !form) return;
|
|
@@ -15059,10 +15022,10 @@ function useTextareaValueState({
|
|
|
15059
15022
|
}
|
|
15060
15023
|
|
|
15061
15024
|
// src/dashboard/textarea/Textarea.tsx
|
|
15062
|
-
import { jsx as
|
|
15025
|
+
import { jsx as jsx168, jsxs as jsxs105 } from "react/jsx-runtime";
|
|
15063
15026
|
var LINE_HEIGHT = 20;
|
|
15064
15027
|
var VERTICAL_PADDING = 32;
|
|
15065
|
-
var Textarea =
|
|
15028
|
+
var Textarea = React60.forwardRef(function Textarea2({
|
|
15066
15029
|
className,
|
|
15067
15030
|
textareaClassName,
|
|
15068
15031
|
label,
|
|
@@ -15090,12 +15053,12 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15090
15053
|
}, ref) {
|
|
15091
15054
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15092
15055
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15093
|
-
const reactId =
|
|
15056
|
+
const reactId = React60.useId();
|
|
15094
15057
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15095
15058
|
const { t } = useTranslation38();
|
|
15096
15059
|
const isInvalid = Boolean(invalid || error);
|
|
15097
15060
|
const isBlocked = Boolean(disabled);
|
|
15098
|
-
const resize =
|
|
15061
|
+
const resize = React60.useCallback(() => {
|
|
15099
15062
|
const el = textareaRef.current;
|
|
15100
15063
|
if (!el || !autosize) return;
|
|
15101
15064
|
el.style.height = "auto";
|
|
@@ -15105,7 +15068,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15105
15068
|
el.style.height = `${nextHeight}px`;
|
|
15106
15069
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15107
15070
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15108
|
-
|
|
15071
|
+
React60.useLayoutEffect(() => {
|
|
15109
15072
|
resize();
|
|
15110
15073
|
}, [resize, value]);
|
|
15111
15074
|
const handleInput = (event) => {
|
|
@@ -15145,11 +15108,11 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15145
15108
|
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15146
15109
|
children: [
|
|
15147
15110
|
label,
|
|
15148
|
-
tooltip && /* @__PURE__ */
|
|
15111
|
+
tooltip && /* @__PURE__ */ jsx168("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx168(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15149
15112
|
]
|
|
15150
15113
|
}
|
|
15151
15114
|
),
|
|
15152
|
-
/* @__PURE__ */
|
|
15115
|
+
/* @__PURE__ */ jsx168(
|
|
15153
15116
|
"textarea",
|
|
15154
15117
|
{
|
|
15155
15118
|
ref: combinedRef,
|
|
@@ -15181,7 +15144,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15181
15144
|
...textareaProps
|
|
15182
15145
|
}
|
|
15183
15146
|
),
|
|
15184
|
-
error && /* @__PURE__ */
|
|
15147
|
+
error && /* @__PURE__ */ jsx168(
|
|
15185
15148
|
FieldErrorMessage,
|
|
15186
15149
|
{
|
|
15187
15150
|
id: `${textareaId}-error`,
|
|
@@ -15189,20 +15152,20 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15189
15152
|
className: "mt-[1px] text-[14px]"
|
|
15190
15153
|
}
|
|
15191
15154
|
),
|
|
15192
|
-
!error && optional && /* @__PURE__ */
|
|
15193
|
-
!error && helperText && /* @__PURE__ */
|
|
15155
|
+
!error && optional && /* @__PURE__ */ jsx168("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
15156
|
+
!error && helperText && /* @__PURE__ */ jsx168("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15194
15157
|
]
|
|
15195
15158
|
}
|
|
15196
15159
|
);
|
|
15197
15160
|
});
|
|
15198
15161
|
|
|
15199
15162
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15200
|
-
import * as
|
|
15163
|
+
import * as React62 from "react";
|
|
15201
15164
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
15202
15165
|
import { useTranslation as useTranslation39 } from "react-i18next";
|
|
15203
15166
|
|
|
15204
15167
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15205
|
-
import * as
|
|
15168
|
+
import * as React61 from "react";
|
|
15206
15169
|
|
|
15207
15170
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15208
15171
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15353,21 +15316,21 @@ function useDatePickerWheel({
|
|
|
15353
15316
|
minDate,
|
|
15354
15317
|
maxDate
|
|
15355
15318
|
}) {
|
|
15356
|
-
const years =
|
|
15357
|
-
const [draftDate, setDraftDate] =
|
|
15319
|
+
const years = React61.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15320
|
+
const [draftDate, setDraftDate] = React61.useState(
|
|
15358
15321
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15359
15322
|
);
|
|
15360
15323
|
const draftYear = draftDate.getFullYear();
|
|
15361
15324
|
const draftMonth = draftDate.getMonth();
|
|
15362
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15363
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15364
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15365
|
-
const monthListRef =
|
|
15366
|
-
const dayListRef =
|
|
15367
|
-
const yearListRef =
|
|
15368
|
-
const settleTimeoutsRef =
|
|
15369
|
-
const animationFramesRef =
|
|
15370
|
-
const columnRefs =
|
|
15325
|
+
const [monthScrollTop, setMonthScrollTop] = React61.useState(0);
|
|
15326
|
+
const [dayScrollTop, setDayScrollTop] = React61.useState(0);
|
|
15327
|
+
const [yearScrollTop, setYearScrollTop] = React61.useState(0);
|
|
15328
|
+
const monthListRef = React61.useRef(null);
|
|
15329
|
+
const dayListRef = React61.useRef(null);
|
|
15330
|
+
const yearListRef = React61.useRef(null);
|
|
15331
|
+
const settleTimeoutsRef = React61.useRef({});
|
|
15332
|
+
const animationFramesRef = React61.useRef({});
|
|
15333
|
+
const columnRefs = React61.useMemo(
|
|
15371
15334
|
() => ({
|
|
15372
15335
|
month: monthListRef,
|
|
15373
15336
|
day: dayListRef,
|
|
@@ -15375,7 +15338,7 @@ function useDatePickerWheel({
|
|
|
15375
15338
|
}),
|
|
15376
15339
|
[]
|
|
15377
15340
|
);
|
|
15378
|
-
const setColumnScrollTop =
|
|
15341
|
+
const setColumnScrollTop = React61.useCallback(
|
|
15379
15342
|
(column, nextScrollTop) => {
|
|
15380
15343
|
if (column === "month") {
|
|
15381
15344
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15389,19 +15352,19 @@ function useDatePickerWheel({
|
|
|
15389
15352
|
},
|
|
15390
15353
|
[]
|
|
15391
15354
|
);
|
|
15392
|
-
const clearSettleTimeout =
|
|
15355
|
+
const clearSettleTimeout = React61.useCallback((column) => {
|
|
15393
15356
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15394
15357
|
if (timeoutId === void 0) return;
|
|
15395
15358
|
window.clearTimeout(timeoutId);
|
|
15396
15359
|
delete settleTimeoutsRef.current[column];
|
|
15397
15360
|
}, []);
|
|
15398
|
-
const clearAnimationFrame =
|
|
15361
|
+
const clearAnimationFrame = React61.useCallback((column) => {
|
|
15399
15362
|
const frameId = animationFramesRef.current[column];
|
|
15400
15363
|
if (frameId === void 0) return;
|
|
15401
15364
|
window.cancelAnimationFrame(frameId);
|
|
15402
15365
|
delete animationFramesRef.current[column];
|
|
15403
15366
|
}, []);
|
|
15404
|
-
|
|
15367
|
+
React61.useEffect(
|
|
15405
15368
|
() => () => {
|
|
15406
15369
|
["month", "day", "year"].forEach((column) => {
|
|
15407
15370
|
clearSettleTimeout(column);
|
|
@@ -15410,22 +15373,22 @@ function useDatePickerWheel({
|
|
|
15410
15373
|
},
|
|
15411
15374
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15412
15375
|
);
|
|
15413
|
-
|
|
15376
|
+
React61.useEffect(() => {
|
|
15414
15377
|
if (isOpen) return;
|
|
15415
15378
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15416
15379
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15417
|
-
const months =
|
|
15380
|
+
const months = React61.useMemo(
|
|
15418
15381
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15419
15382
|
[draftYear, maxDate, minDate]
|
|
15420
15383
|
);
|
|
15421
|
-
const days =
|
|
15384
|
+
const days = React61.useMemo(
|
|
15422
15385
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15423
15386
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15424
15387
|
);
|
|
15425
15388
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15426
15389
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15427
15390
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15428
|
-
const syncScrollPositions =
|
|
15391
|
+
const syncScrollPositions = React61.useCallback(
|
|
15429
15392
|
(nextDate, behavior = "auto") => {
|
|
15430
15393
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15431
15394
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15449,7 +15412,7 @@ function useDatePickerWheel({
|
|
|
15449
15412
|
},
|
|
15450
15413
|
[maxDate, minDate, years]
|
|
15451
15414
|
);
|
|
15452
|
-
|
|
15415
|
+
React61.useLayoutEffect(() => {
|
|
15453
15416
|
if (!isOpen) return;
|
|
15454
15417
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15455
15418
|
setDraftDate(nextDate);
|
|
@@ -15460,7 +15423,7 @@ function useDatePickerWheel({
|
|
|
15460
15423
|
window.cancelAnimationFrame(frameId);
|
|
15461
15424
|
};
|
|
15462
15425
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15463
|
-
const updateDraftDate =
|
|
15426
|
+
const updateDraftDate = React61.useCallback(
|
|
15464
15427
|
(column, targetIndex, behavior = "smooth") => {
|
|
15465
15428
|
const currentDate = stripTime(draftDate);
|
|
15466
15429
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15505,7 +15468,7 @@ function useDatePickerWheel({
|
|
|
15505
15468
|
},
|
|
15506
15469
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15507
15470
|
);
|
|
15508
|
-
const settleColumnScroll =
|
|
15471
|
+
const settleColumnScroll = React61.useCallback(
|
|
15509
15472
|
(column) => {
|
|
15510
15473
|
const list = columnRefs[column].current;
|
|
15511
15474
|
if (!list) return;
|
|
@@ -15518,7 +15481,7 @@ function useDatePickerWheel({
|
|
|
15518
15481
|
},
|
|
15519
15482
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15520
15483
|
);
|
|
15521
|
-
const scheduleScrollSettle =
|
|
15484
|
+
const scheduleScrollSettle = React61.useCallback(
|
|
15522
15485
|
(column) => {
|
|
15523
15486
|
clearSettleTimeout(column);
|
|
15524
15487
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15527,7 +15490,7 @@ function useDatePickerWheel({
|
|
|
15527
15490
|
},
|
|
15528
15491
|
[clearSettleTimeout, settleColumnScroll]
|
|
15529
15492
|
);
|
|
15530
|
-
const handleColumnScroll =
|
|
15493
|
+
const handleColumnScroll = React61.useCallback(
|
|
15531
15494
|
(column) => {
|
|
15532
15495
|
const list = columnRefs[column].current;
|
|
15533
15496
|
if (!list) return;
|
|
@@ -15541,13 +15504,13 @@ function useDatePickerWheel({
|
|
|
15541
15504
|
},
|
|
15542
15505
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15543
15506
|
);
|
|
15544
|
-
const handleOptionSelect =
|
|
15507
|
+
const handleOptionSelect = React61.useCallback(
|
|
15545
15508
|
(column, targetIndex) => {
|
|
15546
15509
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15547
15510
|
},
|
|
15548
15511
|
[updateDraftDate]
|
|
15549
15512
|
);
|
|
15550
|
-
const focusAdjacentColumn =
|
|
15513
|
+
const focusAdjacentColumn = React61.useCallback(
|
|
15551
15514
|
(column, direction) => {
|
|
15552
15515
|
const order = ["month", "day", "year"];
|
|
15553
15516
|
const currentIndex = order.indexOf(column);
|
|
@@ -15557,7 +15520,7 @@ function useDatePickerWheel({
|
|
|
15557
15520
|
},
|
|
15558
15521
|
[columnRefs]
|
|
15559
15522
|
);
|
|
15560
|
-
const handleColumnKeyDown =
|
|
15523
|
+
const handleColumnKeyDown = React61.useCallback(
|
|
15561
15524
|
(column, event) => {
|
|
15562
15525
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15563
15526
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15623,7 +15586,7 @@ function useDatePickerWheel({
|
|
|
15623
15586
|
}
|
|
15624
15587
|
|
|
15625
15588
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
15626
|
-
import { jsx as
|
|
15589
|
+
import { jsx as jsx169, jsxs as jsxs106 } from "react/jsx-runtime";
|
|
15627
15590
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
15628
15591
|
function AirbnbDatePickerWheelColumn({
|
|
15629
15592
|
id,
|
|
@@ -15637,7 +15600,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15637
15600
|
onOptionSelect,
|
|
15638
15601
|
column
|
|
15639
15602
|
}) {
|
|
15640
|
-
return /* @__PURE__ */
|
|
15603
|
+
return /* @__PURE__ */ jsx169("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs106(
|
|
15641
15604
|
"div",
|
|
15642
15605
|
{
|
|
15643
15606
|
id,
|
|
@@ -15654,14 +15617,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15654
15617
|
WebkitOverflowScrolling: "touch"
|
|
15655
15618
|
},
|
|
15656
15619
|
children: [
|
|
15657
|
-
/* @__PURE__ */
|
|
15620
|
+
/* @__PURE__ */ jsx169("div", { style: { height: `${spacerHeight}px` } }),
|
|
15658
15621
|
items.map((item, index) => {
|
|
15659
15622
|
const { style } = getWheelOptionStyles(
|
|
15660
15623
|
index,
|
|
15661
15624
|
scrollTop,
|
|
15662
15625
|
DATE_PICKER_OPTION_HEIGHT
|
|
15663
15626
|
);
|
|
15664
|
-
return /* @__PURE__ */
|
|
15627
|
+
return /* @__PURE__ */ jsx169(
|
|
15665
15628
|
"button",
|
|
15666
15629
|
{
|
|
15667
15630
|
id: `${id}-option-${index}`,
|
|
@@ -15677,14 +15640,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15677
15640
|
`${column}-${item}-${index}`
|
|
15678
15641
|
);
|
|
15679
15642
|
}),
|
|
15680
|
-
/* @__PURE__ */
|
|
15643
|
+
/* @__PURE__ */ jsx169("div", { style: { height: `${spacerHeight}px` } })
|
|
15681
15644
|
]
|
|
15682
15645
|
}
|
|
15683
15646
|
) });
|
|
15684
15647
|
}
|
|
15685
15648
|
|
|
15686
15649
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
15687
|
-
import { jsx as
|
|
15650
|
+
import { jsx as jsx170, jsxs as jsxs107 } from "react/jsx-runtime";
|
|
15688
15651
|
function AirbnbDatePickerBody({
|
|
15689
15652
|
baseId,
|
|
15690
15653
|
label,
|
|
@@ -15708,9 +15671,9 @@ function AirbnbDatePickerBody({
|
|
|
15708
15671
|
}) {
|
|
15709
15672
|
return /* @__PURE__ */ jsxs107("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
|
|
15710
15673
|
/* @__PURE__ */ jsxs107("div", { className: "relative overflow-hidden rounded-[24px]", children: [
|
|
15711
|
-
/* @__PURE__ */
|
|
15712
|
-
/* @__PURE__ */
|
|
15713
|
-
/* @__PURE__ */
|
|
15674
|
+
/* @__PURE__ */ jsx170("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
15675
|
+
/* @__PURE__ */ jsx170("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
15676
|
+
/* @__PURE__ */ jsx170(
|
|
15714
15677
|
"div",
|
|
15715
15678
|
{
|
|
15716
15679
|
"aria-hidden": true,
|
|
@@ -15718,7 +15681,7 @@ function AirbnbDatePickerBody({
|
|
|
15718
15681
|
}
|
|
15719
15682
|
),
|
|
15720
15683
|
/* @__PURE__ */ jsxs107("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
|
|
15721
|
-
/* @__PURE__ */
|
|
15684
|
+
/* @__PURE__ */ jsx170(
|
|
15722
15685
|
AirbnbDatePickerWheelColumn,
|
|
15723
15686
|
{
|
|
15724
15687
|
id: `${baseId}-month`,
|
|
@@ -15733,7 +15696,7 @@ function AirbnbDatePickerBody({
|
|
|
15733
15696
|
onOptionSelect
|
|
15734
15697
|
}
|
|
15735
15698
|
),
|
|
15736
|
-
/* @__PURE__ */
|
|
15699
|
+
/* @__PURE__ */ jsx170(
|
|
15737
15700
|
AirbnbDatePickerWheelColumn,
|
|
15738
15701
|
{
|
|
15739
15702
|
id: `${baseId}-day`,
|
|
@@ -15748,7 +15711,7 @@ function AirbnbDatePickerBody({
|
|
|
15748
15711
|
onOptionSelect
|
|
15749
15712
|
}
|
|
15750
15713
|
),
|
|
15751
|
-
/* @__PURE__ */
|
|
15714
|
+
/* @__PURE__ */ jsx170(
|
|
15752
15715
|
AirbnbDatePickerWheelColumn,
|
|
15753
15716
|
{
|
|
15754
15717
|
id: `${baseId}-year`,
|
|
@@ -15765,7 +15728,7 @@ function AirbnbDatePickerBody({
|
|
|
15765
15728
|
)
|
|
15766
15729
|
] })
|
|
15767
15730
|
] }),
|
|
15768
|
-
/* @__PURE__ */
|
|
15731
|
+
/* @__PURE__ */ jsx170(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
15769
15732
|
] });
|
|
15770
15733
|
}
|
|
15771
15734
|
function AirbnbDatePickerContent({
|
|
@@ -15793,7 +15756,7 @@ function AirbnbDatePickerContent({
|
|
|
15793
15756
|
onColumnKeyDown,
|
|
15794
15757
|
onOptionSelect
|
|
15795
15758
|
}) {
|
|
15796
|
-
const body = /* @__PURE__ */
|
|
15759
|
+
const body = /* @__PURE__ */ jsx170(
|
|
15797
15760
|
AirbnbDatePickerBody,
|
|
15798
15761
|
{
|
|
15799
15762
|
baseId,
|
|
@@ -15818,27 +15781,27 @@ function AirbnbDatePickerContent({
|
|
|
15818
15781
|
}
|
|
15819
15782
|
);
|
|
15820
15783
|
if (isMobile3) {
|
|
15821
|
-
return /* @__PURE__ */
|
|
15784
|
+
return /* @__PURE__ */ jsx170(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15822
15785
|
DrawerContent,
|
|
15823
15786
|
{
|
|
15824
15787
|
onClose: () => onOpenChange(false),
|
|
15825
15788
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
15826
15789
|
children: [
|
|
15827
|
-
/* @__PURE__ */
|
|
15828
|
-
/* @__PURE__ */
|
|
15790
|
+
/* @__PURE__ */ jsx170(DrawerTitle, { className: "sr-only", children: title }),
|
|
15791
|
+
/* @__PURE__ */ jsx170(DrawerDescription, { className: "sr-only", children: label }),
|
|
15829
15792
|
body
|
|
15830
15793
|
]
|
|
15831
15794
|
}
|
|
15832
15795
|
) });
|
|
15833
15796
|
}
|
|
15834
|
-
return /* @__PURE__ */
|
|
15797
|
+
return /* @__PURE__ */ jsx170(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15835
15798
|
DialogContent,
|
|
15836
15799
|
{
|
|
15837
15800
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
15838
15801
|
showCloseButton: false,
|
|
15839
15802
|
children: [
|
|
15840
|
-
/* @__PURE__ */
|
|
15841
|
-
/* @__PURE__ */
|
|
15803
|
+
/* @__PURE__ */ jsx170(DialogTitle, { className: "sr-only", children: title }),
|
|
15804
|
+
/* @__PURE__ */ jsx170(DialogDescription, { className: "sr-only", children: label }),
|
|
15842
15805
|
body
|
|
15843
15806
|
]
|
|
15844
15807
|
}
|
|
@@ -15846,7 +15809,7 @@ function AirbnbDatePickerContent({
|
|
|
15846
15809
|
}
|
|
15847
15810
|
|
|
15848
15811
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15849
|
-
import { jsx as
|
|
15812
|
+
import { jsx as jsx171, jsxs as jsxs108 } from "react/jsx-runtime";
|
|
15850
15813
|
var MONTHS_IN_YEAR2 = 12;
|
|
15851
15814
|
function getMonthLabels2(locale) {
|
|
15852
15815
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -15879,7 +15842,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
15879
15842
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
15880
15843
|
return new Date(yearNum, monthIndex, dayNum);
|
|
15881
15844
|
}
|
|
15882
|
-
var Datepicker =
|
|
15845
|
+
var Datepicker = React62.forwardRef(
|
|
15883
15846
|
function Datepicker2({
|
|
15884
15847
|
label,
|
|
15885
15848
|
value,
|
|
@@ -15909,14 +15872,14 @@ var Datepicker = React63.forwardRef(
|
|
|
15909
15872
|
maxDate,
|
|
15910
15873
|
formatValue
|
|
15911
15874
|
}, ref) {
|
|
15912
|
-
const containerRef =
|
|
15913
|
-
const dayInputRef =
|
|
15914
|
-
const monthInputRef =
|
|
15915
|
-
const monthListRef =
|
|
15916
|
-
const yearInputRef =
|
|
15917
|
-
const mobileTriggerRef =
|
|
15918
|
-
const wheelBaseId =
|
|
15919
|
-
const reactId =
|
|
15875
|
+
const containerRef = React62.useRef(null);
|
|
15876
|
+
const dayInputRef = React62.useRef(null);
|
|
15877
|
+
const monthInputRef = React62.useRef(null);
|
|
15878
|
+
const monthListRef = React62.useRef(null);
|
|
15879
|
+
const yearInputRef = React62.useRef(null);
|
|
15880
|
+
const mobileTriggerRef = React62.useRef(null);
|
|
15881
|
+
const wheelBaseId = React62.useId();
|
|
15882
|
+
const reactId = React62.useId();
|
|
15920
15883
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
15921
15884
|
const dayId = `${baseId}-day`;
|
|
15922
15885
|
const monthId = `${baseId}-month`;
|
|
@@ -15925,55 +15888,55 @@ var Datepicker = React63.forwardRef(
|
|
|
15925
15888
|
const errorId = `${baseId}-error`;
|
|
15926
15889
|
const { t, i18n } = useTranslation39();
|
|
15927
15890
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
15928
|
-
const resolvedMonthLabels =
|
|
15891
|
+
const resolvedMonthLabels = React62.useMemo(
|
|
15929
15892
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
15930
15893
|
[resolvedLocale, monthLabels]
|
|
15931
15894
|
);
|
|
15932
15895
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
15933
15896
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
15934
15897
|
const isControlled = value !== void 0;
|
|
15935
|
-
const initialParts =
|
|
15898
|
+
const initialParts = React62.useMemo(
|
|
15936
15899
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
15937
15900
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15938
15901
|
[]
|
|
15939
15902
|
);
|
|
15940
|
-
const [day, setDay] =
|
|
15941
|
-
const [monthIndex, setMonthIndex] =
|
|
15903
|
+
const [day, setDay] = React62.useState(initialParts.day);
|
|
15904
|
+
const [monthIndex, setMonthIndex] = React62.useState(
|
|
15942
15905
|
initialParts.monthIndex
|
|
15943
15906
|
);
|
|
15944
|
-
const [year, setYear] =
|
|
15945
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
15946
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
15947
|
-
const [focusedField, setFocusedField] =
|
|
15948
|
-
const [monthInputValue, setMonthInputValue] =
|
|
15949
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
15907
|
+
const [year, setYear] = React62.useState(initialParts.year);
|
|
15908
|
+
const [isMonthOpen, setIsMonthOpen] = React62.useState(false);
|
|
15909
|
+
const [isWheelOpen, setIsWheelOpen] = React62.useState(false);
|
|
15910
|
+
const [focusedField, setFocusedField] = React62.useState(null);
|
|
15911
|
+
const [monthInputValue, setMonthInputValue] = React62.useState("");
|
|
15912
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React62.useState(-1);
|
|
15950
15913
|
const isMobile3 = useIsMobile();
|
|
15951
|
-
|
|
15914
|
+
React62.useImperativeHandle(
|
|
15952
15915
|
ref,
|
|
15953
15916
|
() => dayInputRef.current ?? mobileTriggerRef.current,
|
|
15954
15917
|
[]
|
|
15955
15918
|
);
|
|
15956
|
-
|
|
15919
|
+
React62.useEffect(() => {
|
|
15957
15920
|
if (!isControlled) return;
|
|
15958
15921
|
const next = partsFromDate(value ?? null);
|
|
15959
15922
|
setDay(next.day);
|
|
15960
15923
|
setMonthIndex(next.monthIndex);
|
|
15961
15924
|
setYear(next.year);
|
|
15962
15925
|
}, [isControlled, value]);
|
|
15963
|
-
|
|
15926
|
+
React62.useEffect(() => {
|
|
15964
15927
|
if (focusedField === "month") return;
|
|
15965
15928
|
setMonthInputValue(
|
|
15966
15929
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
15967
15930
|
);
|
|
15968
15931
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
15969
|
-
const filteredMonths =
|
|
15932
|
+
const filteredMonths = React62.useMemo(() => {
|
|
15970
15933
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
15971
15934
|
const query = monthInputValue.trim().toLowerCase();
|
|
15972
15935
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
15973
15936
|
if (!query || monthInputValue === currentLabel) return all;
|
|
15974
15937
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
15975
15938
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
15976
|
-
|
|
15939
|
+
React62.useEffect(() => {
|
|
15977
15940
|
if (!isMonthOpen) {
|
|
15978
15941
|
setMonthHighlightIndex(-1);
|
|
15979
15942
|
return;
|
|
@@ -15994,7 +15957,7 @@ var Datepicker = React63.forwardRef(
|
|
|
15994
15957
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
15995
15958
|
const isInvalid = Boolean(invalid || error);
|
|
15996
15959
|
const wrapperWidth = toCssSize(width);
|
|
15997
|
-
const currentDate =
|
|
15960
|
+
const currentDate = React62.useMemo(
|
|
15998
15961
|
() => dateFromParts(day, monthIndex, year),
|
|
15999
15962
|
[day, monthIndex, year]
|
|
16000
15963
|
);
|
|
@@ -16003,7 +15966,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16003
15966
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16004
15967
|
isDisabled: !isMonthOpen || isMobile3
|
|
16005
15968
|
});
|
|
16006
|
-
const emitChange =
|
|
15969
|
+
const emitChange = React62.useCallback(
|
|
16007
15970
|
(nextDay, nextMonth, nextYear) => {
|
|
16008
15971
|
if (!onChange) return;
|
|
16009
15972
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16038,7 +16001,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16038
16001
|
setIsMonthOpen(true);
|
|
16039
16002
|
setMonthHighlightIndex(0);
|
|
16040
16003
|
};
|
|
16041
|
-
const commitMonthInput =
|
|
16004
|
+
const commitMonthInput = React62.useCallback(() => {
|
|
16042
16005
|
const query = monthInputValue.trim().toLowerCase();
|
|
16043
16006
|
if (!query) {
|
|
16044
16007
|
if (monthIndex !== null) {
|
|
@@ -16098,15 +16061,15 @@ var Datepicker = React63.forwardRef(
|
|
|
16098
16061
|
setIsMonthOpen(false);
|
|
16099
16062
|
}
|
|
16100
16063
|
};
|
|
16101
|
-
const focusDayInput =
|
|
16064
|
+
const focusDayInput = React62.useCallback(() => {
|
|
16102
16065
|
if (isBlocked || readOnly) return;
|
|
16103
16066
|
dayInputRef.current?.focus();
|
|
16104
16067
|
}, [isBlocked, readOnly]);
|
|
16105
|
-
const openWheel =
|
|
16068
|
+
const openWheel = React62.useCallback(() => {
|
|
16106
16069
|
if (isBlocked || readOnly) return;
|
|
16107
16070
|
setIsWheelOpen(true);
|
|
16108
16071
|
}, [isBlocked, readOnly]);
|
|
16109
|
-
const closeWheel =
|
|
16072
|
+
const closeWheel = React62.useCallback(() => {
|
|
16110
16073
|
setIsWheelOpen(false);
|
|
16111
16074
|
mobileTriggerRef.current?.focus();
|
|
16112
16075
|
}, []);
|
|
@@ -16118,7 +16081,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16118
16081
|
minDate,
|
|
16119
16082
|
maxDate
|
|
16120
16083
|
});
|
|
16121
|
-
const handleWheelDone =
|
|
16084
|
+
const handleWheelDone = React62.useCallback(() => {
|
|
16122
16085
|
const next = wheel.draftDate;
|
|
16123
16086
|
setDay(String(next.getDate()));
|
|
16124
16087
|
setMonthIndex(next.getMonth());
|
|
@@ -16127,14 +16090,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16127
16090
|
setIsWheelOpen(false);
|
|
16128
16091
|
mobileTriggerRef.current?.focus();
|
|
16129
16092
|
}, [name, onChange, wheel.draftDate]);
|
|
16130
|
-
const defaultFormatValue =
|
|
16093
|
+
const defaultFormatValue = React62.useCallback(
|
|
16131
16094
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16132
16095
|
[resolvedMonthLabels]
|
|
16133
16096
|
);
|
|
16134
16097
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16135
16098
|
const monthListboxId = `${monthId}-listbox`;
|
|
16136
16099
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16137
|
-
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */
|
|
16100
|
+
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ jsx171("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ jsx171(
|
|
16138
16101
|
"ul",
|
|
16139
16102
|
{
|
|
16140
16103
|
ref: monthListRef,
|
|
@@ -16145,7 +16108,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16145
16108
|
children: filteredMonths.map((option, position) => {
|
|
16146
16109
|
const isSelected = option.index === monthIndex;
|
|
16147
16110
|
const isHighlighted = position === monthHighlightIndex;
|
|
16148
|
-
return /* @__PURE__ */
|
|
16111
|
+
return /* @__PURE__ */ jsx171("li", { role: "presentation", children: /* @__PURE__ */ jsx171(
|
|
16149
16112
|
"button",
|
|
16150
16113
|
{
|
|
16151
16114
|
id: getMonthOptionId(option.index),
|
|
@@ -16172,7 +16135,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16172
16135
|
isBlocked && "cursor-not-allowed",
|
|
16173
16136
|
loading && "cursor-progress"
|
|
16174
16137
|
);
|
|
16175
|
-
return /* @__PURE__ */
|
|
16138
|
+
return /* @__PURE__ */ jsx171(
|
|
16176
16139
|
"div",
|
|
16177
16140
|
{
|
|
16178
16141
|
ref: containerRef,
|
|
@@ -16204,8 +16167,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16204
16167
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16205
16168
|
),
|
|
16206
16169
|
children: [
|
|
16207
|
-
/* @__PURE__ */
|
|
16208
|
-
/* @__PURE__ */
|
|
16170
|
+
/* @__PURE__ */ jsx171("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
16171
|
+
/* @__PURE__ */ jsx171("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx171(
|
|
16209
16172
|
ChevronDown4,
|
|
16210
16173
|
{
|
|
16211
16174
|
size: 16,
|
|
@@ -16224,7 +16187,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16224
16187
|
"relative box-border grid h-12 w-full grid-cols-[minmax(0,1fr)_minmax(96px,140px)_minmax(0,1fr)] items-center rounded-[6px] text-[16px] font-medium text-[var(--chekin-color-brand-navy)]"
|
|
16225
16188
|
),
|
|
16226
16189
|
children: [
|
|
16227
|
-
/* @__PURE__ */
|
|
16190
|
+
/* @__PURE__ */ jsx171("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx171(
|
|
16228
16191
|
"input",
|
|
16229
16192
|
{
|
|
16230
16193
|
ref: dayInputRef,
|
|
@@ -16247,7 +16210,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16247
16210
|
}
|
|
16248
16211
|
) }),
|
|
16249
16212
|
/* @__PURE__ */ jsxs108("div", { className: "relative flex h-full min-w-0 items-center gap-1 px-2 before:absolute before:inset-y-3 before:left-0 before:w-px before:bg-[var(--chekin-color-gray-3)] before:content-[''] after:absolute after:inset-y-3 after:right-0 after:w-px after:bg-[var(--chekin-color-gray-3)] after:content-[''] sm:px-3", children: [
|
|
16250
|
-
/* @__PURE__ */
|
|
16213
|
+
/* @__PURE__ */ jsx171(
|
|
16251
16214
|
"input",
|
|
16252
16215
|
{
|
|
16253
16216
|
ref: monthInputRef,
|
|
@@ -16290,7 +16253,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16290
16253
|
)
|
|
16291
16254
|
}
|
|
16292
16255
|
),
|
|
16293
|
-
/* @__PURE__ */
|
|
16256
|
+
/* @__PURE__ */ jsx171(
|
|
16294
16257
|
ChevronDown4,
|
|
16295
16258
|
{
|
|
16296
16259
|
size: 14,
|
|
@@ -16307,7 +16270,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16307
16270
|
}
|
|
16308
16271
|
)
|
|
16309
16272
|
] }),
|
|
16310
|
-
/* @__PURE__ */
|
|
16273
|
+
/* @__PURE__ */ jsx171("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx171(
|
|
16311
16274
|
"input",
|
|
16312
16275
|
{
|
|
16313
16276
|
ref: yearInputRef,
|
|
@@ -16332,7 +16295,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16332
16295
|
]
|
|
16333
16296
|
}
|
|
16334
16297
|
),
|
|
16335
|
-
showCoverage && /* @__PURE__ */
|
|
16298
|
+
showCoverage && /* @__PURE__ */ jsx171(
|
|
16336
16299
|
"div",
|
|
16337
16300
|
{
|
|
16338
16301
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16340,7 +16303,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16340
16303
|
"aria-hidden": "true"
|
|
16341
16304
|
}
|
|
16342
16305
|
),
|
|
16343
|
-
/* @__PURE__ */
|
|
16306
|
+
/* @__PURE__ */ jsx171(
|
|
16344
16307
|
Fieldset,
|
|
16345
16308
|
{
|
|
16346
16309
|
isFocused,
|
|
@@ -16358,9 +16321,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16358
16321
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16359
16322
|
}
|
|
16360
16323
|
),
|
|
16361
|
-
isMonthOpen && !isMobile3 && /* @__PURE__ */
|
|
16324
|
+
isMonthOpen && !isMobile3 && /* @__PURE__ */ jsx171("div", { className: "absolute left-0 right-0 top-full z-30 mx-auto mt-1 w-full max-w-[260px] overflow-hidden rounded-md bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)] sm:left-1/2 sm:right-auto sm:-translate-x-1/2", children: monthPanelContent })
|
|
16362
16325
|
] }),
|
|
16363
|
-
isMobile3 && /* @__PURE__ */
|
|
16326
|
+
isMobile3 && /* @__PURE__ */ jsx171(
|
|
16364
16327
|
AirbnbDatePickerContent,
|
|
16365
16328
|
{
|
|
16366
16329
|
baseId: wheelBaseId,
|
|
@@ -16388,9 +16351,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16388
16351
|
onOptionSelect: wheel.handleOptionSelect
|
|
16389
16352
|
}
|
|
16390
16353
|
),
|
|
16391
|
-
!error && optional && /* @__PURE__ */
|
|
16392
|
-
!error && helperText && /* @__PURE__ */
|
|
16393
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
16354
|
+
!error && optional && /* @__PURE__ */ jsx171("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
16355
|
+
!error && helperText && /* @__PURE__ */ jsx171("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16356
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx171(
|
|
16394
16357
|
FieldErrorMessage,
|
|
16395
16358
|
{
|
|
16396
16359
|
id: errorId,
|
|
@@ -16405,7 +16368,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16405
16368
|
);
|
|
16406
16369
|
|
|
16407
16370
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16408
|
-
import * as
|
|
16371
|
+
import * as React66 from "react";
|
|
16409
16372
|
import { useTranslation as useTranslation40 } from "react-i18next";
|
|
16410
16373
|
|
|
16411
16374
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16484,7 +16447,7 @@ var createDisabledMatchers = ({
|
|
|
16484
16447
|
};
|
|
16485
16448
|
|
|
16486
16449
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16487
|
-
import * as
|
|
16450
|
+
import * as React63 from "react";
|
|
16488
16451
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16489
16452
|
function useRangeValue({
|
|
16490
16453
|
value: externalValue,
|
|
@@ -16493,10 +16456,10 @@ function useRangeValue({
|
|
|
16493
16456
|
name
|
|
16494
16457
|
}) {
|
|
16495
16458
|
const isControlled = externalValue !== void 0;
|
|
16496
|
-
const [draft, setDraft] =
|
|
16459
|
+
const [draft, setDraft] = React63.useState(
|
|
16497
16460
|
isControlled ? externalValue : defaultValue
|
|
16498
16461
|
);
|
|
16499
|
-
const lastExternalKeyRef =
|
|
16462
|
+
const lastExternalKeyRef = React63.useRef(getRangeKey(externalValue));
|
|
16500
16463
|
if (isControlled) {
|
|
16501
16464
|
const externalKey = getRangeKey(externalValue);
|
|
16502
16465
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16504,7 +16467,7 @@ function useRangeValue({
|
|
|
16504
16467
|
setDraft(externalValue);
|
|
16505
16468
|
}
|
|
16506
16469
|
}
|
|
16507
|
-
const commit =
|
|
16470
|
+
const commit = React63.useCallback(
|
|
16508
16471
|
(next) => {
|
|
16509
16472
|
setDraft(next);
|
|
16510
16473
|
if (next === void 0) {
|
|
@@ -16519,7 +16482,7 @@ function useRangeValue({
|
|
|
16519
16482
|
}
|
|
16520
16483
|
|
|
16521
16484
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16522
|
-
import * as
|
|
16485
|
+
import * as React64 from "react";
|
|
16523
16486
|
function useRangeTextInputs({
|
|
16524
16487
|
value,
|
|
16525
16488
|
format: format2,
|
|
@@ -16527,13 +16490,13 @@ function useRangeTextInputs({
|
|
|
16527
16490
|
onCommit,
|
|
16528
16491
|
onBlur
|
|
16529
16492
|
}) {
|
|
16530
|
-
const [fromText, setFromText] =
|
|
16531
|
-
const [toText, setToText] =
|
|
16532
|
-
|
|
16493
|
+
const [fromText, setFromText] = React64.useState(value?.from ? format2(value.from) : "");
|
|
16494
|
+
const [toText, setToText] = React64.useState(value?.to ? format2(value.to) : "");
|
|
16495
|
+
React64.useEffect(() => {
|
|
16533
16496
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16534
16497
|
setToText(value?.to ? format2(value.to) : "");
|
|
16535
16498
|
}, [format2, value?.from, value?.to]);
|
|
16536
|
-
const handleFromBlur =
|
|
16499
|
+
const handleFromBlur = React64.useCallback(() => {
|
|
16537
16500
|
if (!fromText) {
|
|
16538
16501
|
const next = { from: void 0, to: value?.to };
|
|
16539
16502
|
onCommit(next);
|
|
@@ -16550,7 +16513,7 @@ function useRangeTextInputs({
|
|
|
16550
16513
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16551
16514
|
return void 0;
|
|
16552
16515
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16553
|
-
const handleToBlur =
|
|
16516
|
+
const handleToBlur = React64.useCallback(() => {
|
|
16554
16517
|
if (!toText) {
|
|
16555
16518
|
const next = { from: value?.from, to: void 0 };
|
|
16556
16519
|
onCommit(next);
|
|
@@ -16577,21 +16540,21 @@ function useRangeTextInputs({
|
|
|
16577
16540
|
}
|
|
16578
16541
|
|
|
16579
16542
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16580
|
-
import * as
|
|
16543
|
+
import * as React65 from "react";
|
|
16581
16544
|
function useRangeMonthSync(value) {
|
|
16582
|
-
const isPreloadedRef =
|
|
16583
|
-
const [month, setMonth] =
|
|
16584
|
-
|
|
16545
|
+
const isPreloadedRef = React65.useRef(false);
|
|
16546
|
+
const [month, setMonth] = React65.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16547
|
+
React65.useEffect(() => {
|
|
16585
16548
|
if (value?.from && !isPreloadedRef.current) {
|
|
16586
16549
|
setMonth(value.from);
|
|
16587
16550
|
isPreloadedRef.current = true;
|
|
16588
16551
|
}
|
|
16589
16552
|
}, [value?.from]);
|
|
16590
|
-
const syncMonthToValue =
|
|
16553
|
+
const syncMonthToValue = React65.useCallback((next) => {
|
|
16591
16554
|
isPreloadedRef.current = true;
|
|
16592
16555
|
if (next?.from) setMonth(next.from);
|
|
16593
16556
|
}, []);
|
|
16594
|
-
const resetPreload =
|
|
16557
|
+
const resetPreload = React65.useCallback(() => {
|
|
16595
16558
|
isPreloadedRef.current = false;
|
|
16596
16559
|
}, []);
|
|
16597
16560
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -16617,7 +16580,7 @@ function resolveRangeSelection({
|
|
|
16617
16580
|
|
|
16618
16581
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
16619
16582
|
import { CalendarDays, SquareX as SquareX3 } from "lucide-react";
|
|
16620
|
-
import { jsx as
|
|
16583
|
+
import { jsx as jsx172, jsxs as jsxs109 } from "react/jsx-runtime";
|
|
16621
16584
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
16622
16585
|
var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]";
|
|
16623
16586
|
var iconButtonClass = "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734] disabled:cursor-not-allowed";
|
|
@@ -16668,7 +16631,7 @@ function DateRangeInputs({
|
|
|
16668
16631
|
),
|
|
16669
16632
|
onClick: onRowClick,
|
|
16670
16633
|
children: [
|
|
16671
|
-
/* @__PURE__ */
|
|
16634
|
+
/* @__PURE__ */ jsx172(
|
|
16672
16635
|
"input",
|
|
16673
16636
|
{
|
|
16674
16637
|
ref: fromInputRef,
|
|
@@ -16692,7 +16655,7 @@ function DateRangeInputs({
|
|
|
16692
16655
|
)
|
|
16693
16656
|
}
|
|
16694
16657
|
),
|
|
16695
|
-
/* @__PURE__ */
|
|
16658
|
+
/* @__PURE__ */ jsx172(
|
|
16696
16659
|
"span",
|
|
16697
16660
|
{
|
|
16698
16661
|
"aria-hidden": "true",
|
|
@@ -16703,7 +16666,7 @@ function DateRangeInputs({
|
|
|
16703
16666
|
children: "\u2192"
|
|
16704
16667
|
}
|
|
16705
16668
|
),
|
|
16706
|
-
/* @__PURE__ */
|
|
16669
|
+
/* @__PURE__ */ jsx172(
|
|
16707
16670
|
"input",
|
|
16708
16671
|
{
|
|
16709
16672
|
ref: toInputRef,
|
|
@@ -16728,7 +16691,7 @@ function DateRangeInputs({
|
|
|
16728
16691
|
}
|
|
16729
16692
|
),
|
|
16730
16693
|
/* @__PURE__ */ jsxs109("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
16731
|
-
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */
|
|
16694
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx172(
|
|
16732
16695
|
"button",
|
|
16733
16696
|
{
|
|
16734
16697
|
type: "button",
|
|
@@ -16736,10 +16699,10 @@ function DateRangeInputs({
|
|
|
16736
16699
|
onClick: onReset,
|
|
16737
16700
|
className: iconButtonClass,
|
|
16738
16701
|
"aria-label": clearLabel,
|
|
16739
|
-
children: /* @__PURE__ */
|
|
16702
|
+
children: /* @__PURE__ */ jsx172(SquareX3, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
16740
16703
|
}
|
|
16741
16704
|
),
|
|
16742
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */
|
|
16705
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx172(
|
|
16743
16706
|
"button",
|
|
16744
16707
|
{
|
|
16745
16708
|
type: "button",
|
|
@@ -16751,7 +16714,7 @@ function DateRangeInputs({
|
|
|
16751
16714
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
16752
16715
|
),
|
|
16753
16716
|
"aria-label": openCalendarLabel,
|
|
16754
|
-
children: /* @__PURE__ */
|
|
16717
|
+
children: /* @__PURE__ */ jsx172(CalendarDays, { size: 18 })
|
|
16755
16718
|
}
|
|
16756
16719
|
)
|
|
16757
16720
|
] })
|
|
@@ -16761,7 +16724,7 @@ function DateRangeInputs({
|
|
|
16761
16724
|
}
|
|
16762
16725
|
|
|
16763
16726
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
16764
|
-
import { jsx as
|
|
16727
|
+
import { jsx as jsx173 } from "react/jsx-runtime";
|
|
16765
16728
|
function DateRangeCalendar({
|
|
16766
16729
|
value,
|
|
16767
16730
|
month,
|
|
@@ -16777,7 +16740,7 @@ function DateRangeCalendar({
|
|
|
16777
16740
|
components,
|
|
16778
16741
|
...dayPickerProps
|
|
16779
16742
|
}) {
|
|
16780
|
-
return /* @__PURE__ */
|
|
16743
|
+
return /* @__PURE__ */ jsx173(
|
|
16781
16744
|
Calendar,
|
|
16782
16745
|
{
|
|
16783
16746
|
mode: "range",
|
|
@@ -16800,7 +16763,7 @@ function DateRangeCalendar({
|
|
|
16800
16763
|
}
|
|
16801
16764
|
|
|
16802
16765
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
16803
|
-
import { jsx as
|
|
16766
|
+
import { jsx as jsx174, jsxs as jsxs110 } from "react/jsx-runtime";
|
|
16804
16767
|
function DateRangePopover({
|
|
16805
16768
|
isOpen,
|
|
16806
16769
|
isMobile: isMobile3,
|
|
@@ -16812,7 +16775,7 @@ function DateRangePopover({
|
|
|
16812
16775
|
}) {
|
|
16813
16776
|
if (!isOpen) return null;
|
|
16814
16777
|
if (isMobile3) {
|
|
16815
|
-
return /* @__PURE__ */
|
|
16778
|
+
return /* @__PURE__ */ jsx174(
|
|
16816
16779
|
Drawer,
|
|
16817
16780
|
{
|
|
16818
16781
|
open: isOpen,
|
|
@@ -16826,16 +16789,16 @@ function DateRangePopover({
|
|
|
16826
16789
|
lockScroll: false,
|
|
16827
16790
|
className: "max-h-[calc(100vh-1rem)]",
|
|
16828
16791
|
children: [
|
|
16829
|
-
/* @__PURE__ */
|
|
16830
|
-
/* @__PURE__ */
|
|
16831
|
-
/* @__PURE__ */
|
|
16792
|
+
/* @__PURE__ */ jsx174(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
16793
|
+
/* @__PURE__ */ jsx174(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
16794
|
+
/* @__PURE__ */ jsx174("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
16832
16795
|
]
|
|
16833
16796
|
}
|
|
16834
16797
|
)
|
|
16835
16798
|
}
|
|
16836
16799
|
);
|
|
16837
16800
|
}
|
|
16838
|
-
return /* @__PURE__ */
|
|
16801
|
+
return /* @__PURE__ */ jsx174(
|
|
16839
16802
|
"div",
|
|
16840
16803
|
{
|
|
16841
16804
|
className: cn(
|
|
@@ -16848,8 +16811,8 @@ function DateRangePopover({
|
|
|
16848
16811
|
}
|
|
16849
16812
|
|
|
16850
16813
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16851
|
-
import { jsx as
|
|
16852
|
-
var DateRangePicker =
|
|
16814
|
+
import { jsx as jsx175, jsxs as jsxs111 } from "react/jsx-runtime";
|
|
16815
|
+
var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
16853
16816
|
label,
|
|
16854
16817
|
value: externalValue,
|
|
16855
16818
|
defaultValue,
|
|
@@ -16883,20 +16846,20 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16883
16846
|
components: customComponents,
|
|
16884
16847
|
...dayPickerProps
|
|
16885
16848
|
}, ref) {
|
|
16886
|
-
const containerRef =
|
|
16887
|
-
const fromInputRef =
|
|
16888
|
-
const toInputRef =
|
|
16889
|
-
const reactId =
|
|
16849
|
+
const containerRef = React66.useRef(null);
|
|
16850
|
+
const fromInputRef = React66.useRef(null);
|
|
16851
|
+
const toInputRef = React66.useRef(null);
|
|
16852
|
+
const reactId = React66.useId();
|
|
16890
16853
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
16891
16854
|
const fromId = `${baseId}-from`;
|
|
16892
16855
|
const toId = `${baseId}-to`;
|
|
16893
16856
|
const labelId = `${baseId}-label`;
|
|
16894
16857
|
const errorId = `${baseId}-error`;
|
|
16895
|
-
const normalizedValue =
|
|
16858
|
+
const normalizedValue = React66.useMemo(() => {
|
|
16896
16859
|
if (externalValue === void 0) return void 0;
|
|
16897
16860
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
16898
16861
|
}, [externalValue]);
|
|
16899
|
-
const normalizedDefaultValue =
|
|
16862
|
+
const normalizedDefaultValue = React66.useMemo(() => {
|
|
16900
16863
|
if (defaultValue === void 0) return void 0;
|
|
16901
16864
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
16902
16865
|
}, [defaultValue]);
|
|
@@ -16906,10 +16869,10 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16906
16869
|
onChange,
|
|
16907
16870
|
name
|
|
16908
16871
|
});
|
|
16909
|
-
const normalizedMinDate =
|
|
16910
|
-
const normalizedMaxDate =
|
|
16911
|
-
const formatter =
|
|
16912
|
-
const parser =
|
|
16872
|
+
const normalizedMinDate = React66.useMemo(() => toDate(minDate), [minDate]);
|
|
16873
|
+
const normalizedMaxDate = React66.useMemo(() => toDate(maxDate), [maxDate]);
|
|
16874
|
+
const formatter = React66.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
16875
|
+
const parser = React66.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
16913
16876
|
const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
|
|
16914
16877
|
value,
|
|
16915
16878
|
format: formatter,
|
|
@@ -16918,9 +16881,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16918
16881
|
onBlur
|
|
16919
16882
|
});
|
|
16920
16883
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
16921
|
-
const [isOpen, setIsOpen] =
|
|
16922
|
-
const [focusedInput, setFocusedInput] =
|
|
16923
|
-
const [autoFocus, setAutoFocus] =
|
|
16884
|
+
const [isOpen, setIsOpen] = React66.useState(false);
|
|
16885
|
+
const [focusedInput, setFocusedInput] = React66.useState(null);
|
|
16886
|
+
const [autoFocus, setAutoFocus] = React66.useState(false);
|
|
16924
16887
|
const isMobile3 = useIsMobile();
|
|
16925
16888
|
const { t } = useTranslation40();
|
|
16926
16889
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -16931,13 +16894,13 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16931
16894
|
const isFocused = focusedInput !== null || isOpen;
|
|
16932
16895
|
const wrapperWidth = toCssSize(width);
|
|
16933
16896
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
16934
|
-
const closeCalendar =
|
|
16897
|
+
const closeCalendar = React66.useCallback(() => {
|
|
16935
16898
|
setIsOpen(false);
|
|
16936
16899
|
setFocusedInput(null);
|
|
16937
16900
|
setAutoFocus(false);
|
|
16938
16901
|
if (value?.from) setMonth(value.from);
|
|
16939
16902
|
}, [setMonth, value?.from]);
|
|
16940
|
-
const openCalendar =
|
|
16903
|
+
const openCalendar = React66.useCallback(() => {
|
|
16941
16904
|
if (isBlocked || readOnly) return;
|
|
16942
16905
|
setIsOpen(true);
|
|
16943
16906
|
}, [isBlocked, readOnly]);
|
|
@@ -16946,7 +16909,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16946
16909
|
onOutsideClick: closeCalendar,
|
|
16947
16910
|
isDisabled: !isOpen || isMobile3
|
|
16948
16911
|
});
|
|
16949
|
-
const handlePickerChange =
|
|
16912
|
+
const handlePickerChange = React66.useCallback(
|
|
16950
16913
|
(range, pickedDate) => {
|
|
16951
16914
|
const { next, shouldClose } = resolveRangeSelection({
|
|
16952
16915
|
previous: value,
|
|
@@ -16967,7 +16930,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16967
16930
|
setToText("");
|
|
16968
16931
|
setMonth(/* @__PURE__ */ new Date());
|
|
16969
16932
|
};
|
|
16970
|
-
const disabledMatchers =
|
|
16933
|
+
const disabledMatchers = React66.useMemo(
|
|
16971
16934
|
() => createDisabledMatchers({
|
|
16972
16935
|
minDate: normalizedMinDate,
|
|
16973
16936
|
maxDate: normalizedMaxDate,
|
|
@@ -16986,7 +16949,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
16986
16949
|
openCalendar();
|
|
16987
16950
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
16988
16951
|
};
|
|
16989
|
-
|
|
16952
|
+
React66.useImperativeHandle(
|
|
16990
16953
|
ref,
|
|
16991
16954
|
() => ({
|
|
16992
16955
|
setDateRange: (range) => {
|
|
@@ -17009,7 +16972,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17009
16972
|
syncMonthToValue
|
|
17010
16973
|
]
|
|
17011
16974
|
);
|
|
17012
|
-
return /* @__PURE__ */
|
|
16975
|
+
return /* @__PURE__ */ jsx175(
|
|
17013
16976
|
"div",
|
|
17014
16977
|
{
|
|
17015
16978
|
ref: containerRef,
|
|
@@ -17022,7 +16985,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17022
16985
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17023
16986
|
children: /* @__PURE__ */ jsxs111("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
17024
16987
|
/* @__PURE__ */ jsxs111("div", { className: "relative w-full", children: [
|
|
17025
|
-
/* @__PURE__ */
|
|
16988
|
+
/* @__PURE__ */ jsx175(
|
|
17026
16989
|
DateRangeInputs,
|
|
17027
16990
|
{
|
|
17028
16991
|
fromId,
|
|
@@ -17073,7 +17036,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17073
17036
|
onToggleCalendar: toggleCalendar
|
|
17074
17037
|
}
|
|
17075
17038
|
),
|
|
17076
|
-
/* @__PURE__ */
|
|
17039
|
+
/* @__PURE__ */ jsx175(
|
|
17077
17040
|
Fieldset,
|
|
17078
17041
|
{
|
|
17079
17042
|
isFocused,
|
|
@@ -17090,7 +17053,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17090
17053
|
tooltip
|
|
17091
17054
|
}
|
|
17092
17055
|
),
|
|
17093
|
-
/* @__PURE__ */
|
|
17056
|
+
/* @__PURE__ */ jsx175(
|
|
17094
17057
|
DateRangePopover,
|
|
17095
17058
|
{
|
|
17096
17059
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17099,7 +17062,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17099
17062
|
drawerTitle,
|
|
17100
17063
|
drawerDescription,
|
|
17101
17064
|
onClose: closeCalendar,
|
|
17102
|
-
children: /* @__PURE__ */
|
|
17065
|
+
children: /* @__PURE__ */ jsx175(
|
|
17103
17066
|
DateRangeCalendar,
|
|
17104
17067
|
{
|
|
17105
17068
|
value,
|
|
@@ -17120,7 +17083,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17120
17083
|
}
|
|
17121
17084
|
)
|
|
17122
17085
|
] }),
|
|
17123
|
-
/* @__PURE__ */
|
|
17086
|
+
/* @__PURE__ */ jsx175(
|
|
17124
17087
|
DateRangePopover,
|
|
17125
17088
|
{
|
|
17126
17089
|
isOpen: isOpen && isMobile3,
|
|
@@ -17129,7 +17092,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17129
17092
|
drawerTitle,
|
|
17130
17093
|
drawerDescription,
|
|
17131
17094
|
onClose: closeCalendar,
|
|
17132
|
-
children: /* @__PURE__ */
|
|
17095
|
+
children: /* @__PURE__ */ jsx175(
|
|
17133
17096
|
DateRangeCalendar,
|
|
17134
17097
|
{
|
|
17135
17098
|
value,
|
|
@@ -17149,9 +17112,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17149
17112
|
)
|
|
17150
17113
|
}
|
|
17151
17114
|
),
|
|
17152
|
-
!error && optional && /* @__PURE__ */
|
|
17153
|
-
!error && helperText && /* @__PURE__ */
|
|
17154
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
17115
|
+
!error && optional && /* @__PURE__ */ jsx175("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17116
|
+
!error && helperText && /* @__PURE__ */ jsx175("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17117
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx175(
|
|
17155
17118
|
FieldErrorMessage,
|
|
17156
17119
|
{
|
|
17157
17120
|
id: errorId,
|
|
@@ -17165,7 +17128,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17165
17128
|
});
|
|
17166
17129
|
|
|
17167
17130
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17168
|
-
import * as
|
|
17131
|
+
import * as React67 from "react";
|
|
17169
17132
|
import { useTranslation as useTranslation41 } from "react-i18next";
|
|
17170
17133
|
import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
|
|
17171
17134
|
import {
|
|
@@ -17191,11 +17154,11 @@ function useValidateDates({
|
|
|
17191
17154
|
const { t } = useTranslation41();
|
|
17192
17155
|
const handleError = useEvent(onError);
|
|
17193
17156
|
const handleSuccess = useEvent(onSuccess);
|
|
17194
|
-
const errorFormatter =
|
|
17157
|
+
const errorFormatter = React67.useMemo(
|
|
17195
17158
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17196
17159
|
[displayFormat]
|
|
17197
17160
|
);
|
|
17198
|
-
const validateDates =
|
|
17161
|
+
const validateDates = React67.useCallback(
|
|
17199
17162
|
(dates) => {
|
|
17200
17163
|
const startDate = dates?.from;
|
|
17201
17164
|
const endDate = dates?.to;
|
|
@@ -17245,9 +17208,9 @@ function useValidateDates({
|
|
|
17245
17208
|
}
|
|
17246
17209
|
|
|
17247
17210
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17248
|
-
import * as
|
|
17211
|
+
import * as React68 from "react";
|
|
17249
17212
|
import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
|
|
17250
|
-
import { jsx as
|
|
17213
|
+
import { jsx as jsx176 } from "react/jsx-runtime";
|
|
17251
17214
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17252
17215
|
function parseTime(value) {
|
|
17253
17216
|
return parse2(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17289,24 +17252,24 @@ var FORMAT_SETTINGS = {
|
|
|
17289
17252
|
},
|
|
17290
17253
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17291
17254
|
};
|
|
17292
|
-
var TimePicker =
|
|
17293
|
-
const resolvedOptions =
|
|
17255
|
+
var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17256
|
+
const resolvedOptions = React68.useMemo(() => {
|
|
17294
17257
|
if (options) return options;
|
|
17295
17258
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17296
17259
|
return buildOptions(settings);
|
|
17297
17260
|
}, [formatName, options, timeSettings]);
|
|
17298
|
-
return /* @__PURE__ */
|
|
17261
|
+
return /* @__PURE__ */ jsx176(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17299
17262
|
});
|
|
17300
17263
|
|
|
17301
17264
|
// src/dashboard/file-input/FileInput.tsx
|
|
17302
|
-
import * as
|
|
17265
|
+
import * as React69 from "react";
|
|
17303
17266
|
import { Download, Paperclip, SquareX as SquareX4 } from "lucide-react";
|
|
17304
17267
|
import { useTranslation as useTranslation42 } from "react-i18next";
|
|
17305
|
-
import { jsx as
|
|
17268
|
+
import { jsx as jsx177, jsxs as jsxs112 } from "react/jsx-runtime";
|
|
17306
17269
|
function defaultDownload(url) {
|
|
17307
17270
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17308
17271
|
}
|
|
17309
|
-
var FileInput =
|
|
17272
|
+
var FileInput = React69.forwardRef(function FileInput2({
|
|
17310
17273
|
label,
|
|
17311
17274
|
value,
|
|
17312
17275
|
onChange,
|
|
@@ -17328,12 +17291,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17328
17291
|
width,
|
|
17329
17292
|
downloadLabel
|
|
17330
17293
|
}, ref) {
|
|
17331
|
-
const internalRef =
|
|
17294
|
+
const internalRef = React69.useRef(null);
|
|
17332
17295
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17333
17296
|
const { t } = useTranslation42();
|
|
17334
17297
|
const resolvedLabel = label ?? t("upload_file");
|
|
17335
17298
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17336
|
-
const reactId =
|
|
17299
|
+
const reactId = React69.useId();
|
|
17337
17300
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17338
17301
|
const labelId = `${inputId}-label`;
|
|
17339
17302
|
const errorId = `${inputId}-error`;
|
|
@@ -17372,7 +17335,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17372
17335
|
),
|
|
17373
17336
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17374
17337
|
children: [
|
|
17375
|
-
/* @__PURE__ */
|
|
17338
|
+
/* @__PURE__ */ jsx177(
|
|
17376
17339
|
"input",
|
|
17377
17340
|
{
|
|
17378
17341
|
ref: inputRef,
|
|
@@ -17411,12 +17374,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17411
17374
|
onClick: handleDownload,
|
|
17412
17375
|
className: "inline-flex items-center gap-[7px] truncate border-0 bg-transparent p-0 text-[14px] font-medium text-[var(--chekin-color-brand-navy)] outline-none",
|
|
17413
17376
|
children: [
|
|
17414
|
-
/* @__PURE__ */
|
|
17415
|
-
/* @__PURE__ */
|
|
17377
|
+
/* @__PURE__ */ jsx177("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
17378
|
+
/* @__PURE__ */ jsx177(Download, { size: 15 })
|
|
17416
17379
|
]
|
|
17417
17380
|
}
|
|
17418
|
-
) : /* @__PURE__ */
|
|
17419
|
-
/* @__PURE__ */
|
|
17381
|
+
) : /* @__PURE__ */ jsx177("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
17382
|
+
/* @__PURE__ */ jsx177(
|
|
17420
17383
|
"button",
|
|
17421
17384
|
{
|
|
17422
17385
|
type: "button",
|
|
@@ -17424,17 +17387,17 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17424
17387
|
onClick: handleClear,
|
|
17425
17388
|
className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734]",
|
|
17426
17389
|
"aria-label": t("remove_file"),
|
|
17427
|
-
children: /* @__PURE__ */
|
|
17390
|
+
children: /* @__PURE__ */ jsx177(SquareX4, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17428
17391
|
}
|
|
17429
17392
|
)
|
|
17430
17393
|
]
|
|
17431
17394
|
}
|
|
17432
|
-
) : /* @__PURE__ */
|
|
17433
|
-
/* @__PURE__ */
|
|
17395
|
+
) : /* @__PURE__ */ jsx177("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
17396
|
+
/* @__PURE__ */ jsx177("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx177(Paperclip, { size: 20 }) })
|
|
17434
17397
|
]
|
|
17435
17398
|
}
|
|
17436
17399
|
),
|
|
17437
|
-
/* @__PURE__ */
|
|
17400
|
+
/* @__PURE__ */ jsx177(
|
|
17438
17401
|
Fieldset,
|
|
17439
17402
|
{
|
|
17440
17403
|
isFocused: false,
|
|
@@ -17452,9 +17415,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17452
17415
|
}
|
|
17453
17416
|
)
|
|
17454
17417
|
] }),
|
|
17455
|
-
!error && optional && /* @__PURE__ */
|
|
17456
|
-
!error && helperText && /* @__PURE__ */
|
|
17457
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
17418
|
+
!error && optional && /* @__PURE__ */ jsx177("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17419
|
+
!error && helperText && /* @__PURE__ */ jsx177("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17420
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx177(
|
|
17458
17421
|
FieldErrorMessage,
|
|
17459
17422
|
{
|
|
17460
17423
|
id: errorId,
|
|
@@ -17469,10 +17432,10 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17469
17432
|
});
|
|
17470
17433
|
|
|
17471
17434
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17472
|
-
import * as
|
|
17473
|
-
import { jsx as
|
|
17435
|
+
import * as React70 from "react";
|
|
17436
|
+
import { jsx as jsx178, jsxs as jsxs113 } from "react/jsx-runtime";
|
|
17474
17437
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17475
|
-
var SelectIconsBox =
|
|
17438
|
+
var SelectIconsBox = React70.forwardRef(
|
|
17476
17439
|
function SelectIconsBox2({
|
|
17477
17440
|
children,
|
|
17478
17441
|
icons,
|
|
@@ -17487,10 +17450,10 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17487
17450
|
className,
|
|
17488
17451
|
boxClassName
|
|
17489
17452
|
}, ref) {
|
|
17490
|
-
const containerRef =
|
|
17453
|
+
const containerRef = React70.useRef(null);
|
|
17491
17454
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17492
17455
|
const isControlled = controlledOpen !== void 0;
|
|
17493
|
-
const [internalOpen, setInternalOpen] =
|
|
17456
|
+
const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
|
|
17494
17457
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17495
17458
|
const setOpen = (next) => {
|
|
17496
17459
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17526,7 +17489,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17526
17489
|
className: cn("relative inline-block outline-none", className),
|
|
17527
17490
|
children: [
|
|
17528
17491
|
children,
|
|
17529
|
-
isOpen && /* @__PURE__ */
|
|
17492
|
+
isOpen && /* @__PURE__ */ jsx178(
|
|
17530
17493
|
"div",
|
|
17531
17494
|
{
|
|
17532
17495
|
className: cn(
|
|
@@ -17537,7 +17500,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17537
17500
|
boxClassName
|
|
17538
17501
|
),
|
|
17539
17502
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
17540
|
-
children: icons.map((iconName) => /* @__PURE__ */
|
|
17503
|
+
children: icons.map((iconName) => /* @__PURE__ */ jsx178(
|
|
17541
17504
|
"button",
|
|
17542
17505
|
{
|
|
17543
17506
|
type: "button",
|
|
@@ -17620,14 +17583,14 @@ function getErrorMessage(error) {
|
|
|
17620
17583
|
|
|
17621
17584
|
// src/lib/toastResponseError.tsx
|
|
17622
17585
|
import i18next from "i18next";
|
|
17623
|
-
import { jsx as
|
|
17586
|
+
import { jsx as jsx179, jsxs as jsxs114 } from "react/jsx-runtime";
|
|
17624
17587
|
function addSupportEmailToMessage(message, prefixText) {
|
|
17625
17588
|
if (typeof message !== "string") {
|
|
17626
17589
|
return message;
|
|
17627
17590
|
}
|
|
17628
17591
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
17629
17592
|
return /* @__PURE__ */ jsxs114("div", { children: [
|
|
17630
|
-
/* @__PURE__ */
|
|
17593
|
+
/* @__PURE__ */ jsx179("div", { children: builtMessage }),
|
|
17631
17594
|
i18next.t("reach_us_at_email")
|
|
17632
17595
|
] });
|
|
17633
17596
|
}
|
|
@@ -17642,13 +17605,13 @@ function toastResponseError(error, options = {}) {
|
|
|
17642
17605
|
}
|
|
17643
17606
|
|
|
17644
17607
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
17645
|
-
import { forwardRef as
|
|
17646
|
-
import { jsx as
|
|
17647
|
-
var LegacyTextarea =
|
|
17608
|
+
import { forwardRef as forwardRef73, useId as useId15 } from "react";
|
|
17609
|
+
import { jsx as jsx180, jsxs as jsxs115 } from "react/jsx-runtime";
|
|
17610
|
+
var LegacyTextarea = forwardRef73(
|
|
17648
17611
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
17649
17612
|
const inputId = useId15();
|
|
17650
17613
|
return /* @__PURE__ */ jsxs115("div", { className: cn("relative", className), children: [
|
|
17651
|
-
/* @__PURE__ */
|
|
17614
|
+
/* @__PURE__ */ jsx180(
|
|
17652
17615
|
"textarea",
|
|
17653
17616
|
{
|
|
17654
17617
|
ref,
|
|
@@ -17664,7 +17627,7 @@ var LegacyTextarea = forwardRef74(
|
|
|
17664
17627
|
...textareaProps
|
|
17665
17628
|
}
|
|
17666
17629
|
),
|
|
17667
|
-
label && /* @__PURE__ */
|
|
17630
|
+
label && /* @__PURE__ */ jsx180(
|
|
17668
17631
|
"label",
|
|
17669
17632
|
{
|
|
17670
17633
|
htmlFor: inputId,
|
|
@@ -17682,15 +17645,15 @@ var LegacyTextarea = forwardRef74(
|
|
|
17682
17645
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
17683
17646
|
|
|
17684
17647
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
17685
|
-
import * as
|
|
17648
|
+
import * as React72 from "react";
|
|
17686
17649
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
17687
17650
|
|
|
17688
17651
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
17689
|
-
import * as
|
|
17652
|
+
import * as React71 from "react";
|
|
17690
17653
|
import { Loader2 as Loader24 } from "lucide-react";
|
|
17691
17654
|
import { useTranslation as useTranslation43 } from "react-i18next";
|
|
17692
|
-
import { Fragment as
|
|
17693
|
-
var AirbnbFieldTrigger =
|
|
17655
|
+
import { Fragment as Fragment17, jsx as jsx181, jsxs as jsxs116 } from "react/jsx-runtime";
|
|
17656
|
+
var AirbnbFieldTrigger = React71.forwardRef(
|
|
17694
17657
|
({
|
|
17695
17658
|
as = "button",
|
|
17696
17659
|
id,
|
|
@@ -17727,13 +17690,13 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17727
17690
|
const visibleLabelText = labelText ?? label;
|
|
17728
17691
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
17729
17692
|
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs116("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
|
|
17730
|
-
/* @__PURE__ */
|
|
17693
|
+
/* @__PURE__ */ jsx181("span", { className: "min-w-0 truncate", children: visibleLabelText }),
|
|
17731
17694
|
optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "text-current opacity-70 lowercase", children: [
|
|
17732
17695
|
"(",
|
|
17733
17696
|
optionalLabel,
|
|
17734
17697
|
")"
|
|
17735
17698
|
] }),
|
|
17736
|
-
tooltip && /* @__PURE__ */
|
|
17699
|
+
tooltip && /* @__PURE__ */ jsx181(
|
|
17737
17700
|
HelpTooltip,
|
|
17738
17701
|
{
|
|
17739
17702
|
content: tooltip,
|
|
@@ -17750,7 +17713,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17750
17713
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
17751
17714
|
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs116("span", { className: "flex items-center gap-2", children: [
|
|
17752
17715
|
trailingAdornment,
|
|
17753
|
-
loading && /* @__PURE__ */
|
|
17716
|
+
loading && /* @__PURE__ */ jsx181(
|
|
17754
17717
|
Loader24,
|
|
17755
17718
|
{
|
|
17756
17719
|
"aria-hidden": "true",
|
|
@@ -17766,7 +17729,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17766
17729
|
disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
|
|
17767
17730
|
className
|
|
17768
17731
|
);
|
|
17769
|
-
const sharedContent = /* @__PURE__ */ jsxs116(
|
|
17732
|
+
const sharedContent = /* @__PURE__ */ jsxs116(Fragment17, { children: [
|
|
17770
17733
|
/* @__PURE__ */ jsxs116(
|
|
17771
17734
|
"span",
|
|
17772
17735
|
{
|
|
@@ -17776,7 +17739,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17776
17739
|
contentClassName
|
|
17777
17740
|
),
|
|
17778
17741
|
children: [
|
|
17779
|
-
/* @__PURE__ */
|
|
17742
|
+
/* @__PURE__ */ jsx181(
|
|
17780
17743
|
"span",
|
|
17781
17744
|
{
|
|
17782
17745
|
id: labelId,
|
|
@@ -17789,7 +17752,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17789
17752
|
children: animatedLabel
|
|
17790
17753
|
}
|
|
17791
17754
|
),
|
|
17792
|
-
children ? children : hasValue ? /* @__PURE__ */
|
|
17755
|
+
children ? children : hasValue ? /* @__PURE__ */ jsx181(
|
|
17793
17756
|
"span",
|
|
17794
17757
|
{
|
|
17795
17758
|
id: valueId,
|
|
@@ -17800,11 +17763,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17800
17763
|
),
|
|
17801
17764
|
children: valueText
|
|
17802
17765
|
}
|
|
17803
|
-
) : /* @__PURE__ */
|
|
17766
|
+
) : /* @__PURE__ */ jsx181("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
17804
17767
|
]
|
|
17805
17768
|
}
|
|
17806
17769
|
),
|
|
17807
|
-
resolvedTrailingAdornment && /* @__PURE__ */
|
|
17770
|
+
resolvedTrailingAdornment && /* @__PURE__ */ jsx181(
|
|
17808
17771
|
"span",
|
|
17809
17772
|
{
|
|
17810
17773
|
"aria-hidden": "true",
|
|
@@ -17814,8 +17777,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17814
17777
|
)
|
|
17815
17778
|
] });
|
|
17816
17779
|
return /* @__PURE__ */ jsxs116("div", { className: "w-full", children: [
|
|
17817
|
-
topLabel && /* @__PURE__ */
|
|
17818
|
-
as === "button" ? /* @__PURE__ */
|
|
17780
|
+
topLabel && /* @__PURE__ */ jsx181("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
|
|
17781
|
+
as === "button" ? /* @__PURE__ */ jsx181(
|
|
17819
17782
|
"button",
|
|
17820
17783
|
{
|
|
17821
17784
|
id,
|
|
@@ -17832,7 +17795,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17832
17795
|
...props,
|
|
17833
17796
|
children: sharedContent
|
|
17834
17797
|
}
|
|
17835
|
-
) : /* @__PURE__ */
|
|
17798
|
+
) : /* @__PURE__ */ jsx181(
|
|
17836
17799
|
"div",
|
|
17837
17800
|
{
|
|
17838
17801
|
id,
|
|
@@ -17849,16 +17812,16 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
17849
17812
|
children: sharedContent
|
|
17850
17813
|
}
|
|
17851
17814
|
),
|
|
17852
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */
|
|
17815
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx181(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
17853
17816
|
] });
|
|
17854
17817
|
}
|
|
17855
17818
|
);
|
|
17856
17819
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
17857
17820
|
|
|
17858
17821
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
17859
|
-
import { jsx as
|
|
17822
|
+
import { jsx as jsx182, jsxs as jsxs117 } from "react/jsx-runtime";
|
|
17860
17823
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
17861
|
-
var AirbnbDatePicker =
|
|
17824
|
+
var AirbnbDatePicker = React72.forwardRef(
|
|
17862
17825
|
({
|
|
17863
17826
|
label,
|
|
17864
17827
|
topLabel,
|
|
@@ -17883,24 +17846,24 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17883
17846
|
formatValue = formatDateValue
|
|
17884
17847
|
}, ref) => {
|
|
17885
17848
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
17886
|
-
const [isOpen, setIsOpen] =
|
|
17887
|
-
const triggerId =
|
|
17888
|
-
const pickerId =
|
|
17889
|
-
const labelId =
|
|
17890
|
-
const valueId =
|
|
17891
|
-
const helperTextId =
|
|
17892
|
-
const errorId =
|
|
17893
|
-
const internalRef =
|
|
17849
|
+
const [isOpen, setIsOpen] = React72.useState(false);
|
|
17850
|
+
const triggerId = React72.useId();
|
|
17851
|
+
const pickerId = React72.useId();
|
|
17852
|
+
const labelId = React72.useId();
|
|
17853
|
+
const valueId = React72.useId();
|
|
17854
|
+
const helperTextId = React72.useId();
|
|
17855
|
+
const errorId = React72.useId();
|
|
17856
|
+
const internalRef = React72.useRef(null);
|
|
17894
17857
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
17895
|
-
const monthLabels =
|
|
17896
|
-
const resolvedMinDate =
|
|
17897
|
-
const resolvedMaxDate =
|
|
17898
|
-
const normalizedValue =
|
|
17899
|
-
const normalizedDefaultValue =
|
|
17858
|
+
const monthLabels = React72.useMemo(() => getMonthLabels(locale), [locale]);
|
|
17859
|
+
const resolvedMinDate = React72.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
17860
|
+
const resolvedMaxDate = React72.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
17861
|
+
const normalizedValue = React72.useMemo(() => normalizeDateValue(value), [value]);
|
|
17862
|
+
const normalizedDefaultValue = React72.useMemo(
|
|
17900
17863
|
() => normalizeDateValue(defaultValue),
|
|
17901
17864
|
[defaultValue]
|
|
17902
17865
|
);
|
|
17903
|
-
const resolvedValue =
|
|
17866
|
+
const resolvedValue = React72.useMemo(
|
|
17904
17867
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
17905
17868
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
17906
17869
|
);
|
|
@@ -17931,7 +17894,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17931
17894
|
minDate: resolvedMinDate,
|
|
17932
17895
|
maxDate: resolvedMaxDate
|
|
17933
17896
|
});
|
|
17934
|
-
const handleOpenChange =
|
|
17897
|
+
const handleOpenChange = React72.useCallback(
|
|
17935
17898
|
(nextOpen) => {
|
|
17936
17899
|
if (isBlocked && nextOpen) return;
|
|
17937
17900
|
setIsOpen(nextOpen);
|
|
@@ -17941,7 +17904,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17941
17904
|
},
|
|
17942
17905
|
[isBlocked]
|
|
17943
17906
|
);
|
|
17944
|
-
const handleDone =
|
|
17907
|
+
const handleDone = React72.useCallback(() => {
|
|
17945
17908
|
if (isBlocked) return;
|
|
17946
17909
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
17947
17910
|
handleOpenChange(false);
|
|
@@ -17953,11 +17916,11 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17953
17916
|
resolvedMaxDate,
|
|
17954
17917
|
resolvedMinDate
|
|
17955
17918
|
]);
|
|
17956
|
-
const handleTriggerClick =
|
|
17919
|
+
const handleTriggerClick = React72.useCallback(() => {
|
|
17957
17920
|
if (isBlocked) return;
|
|
17958
17921
|
setIsOpen(true);
|
|
17959
17922
|
}, [isBlocked]);
|
|
17960
|
-
const handleTriggerKeyDown =
|
|
17923
|
+
const handleTriggerKeyDown = React72.useCallback(
|
|
17961
17924
|
(event) => {
|
|
17962
17925
|
if (isBlocked) return;
|
|
17963
17926
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -17967,13 +17930,13 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17967
17930
|
},
|
|
17968
17931
|
[isBlocked]
|
|
17969
17932
|
);
|
|
17970
|
-
|
|
17933
|
+
React72.useEffect(() => {
|
|
17971
17934
|
if (isBlocked) {
|
|
17972
17935
|
setIsOpen(false);
|
|
17973
17936
|
}
|
|
17974
17937
|
}, [isBlocked]);
|
|
17975
17938
|
return /* @__PURE__ */ jsxs117("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
|
|
17976
|
-
name && /* @__PURE__ */
|
|
17939
|
+
name && /* @__PURE__ */ jsx182(
|
|
17977
17940
|
"input",
|
|
17978
17941
|
{
|
|
17979
17942
|
type: "hidden",
|
|
@@ -17981,7 +17944,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
17981
17944
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
17982
17945
|
}
|
|
17983
17946
|
),
|
|
17984
|
-
/* @__PURE__ */
|
|
17947
|
+
/* @__PURE__ */ jsx182(
|
|
17985
17948
|
AirbnbFieldTrigger,
|
|
17986
17949
|
{
|
|
17987
17950
|
id: triggerId,
|
|
@@ -18007,10 +17970,10 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18007
17970
|
onClick: handleTriggerClick,
|
|
18008
17971
|
onKeyDown: handleTriggerKeyDown,
|
|
18009
17972
|
onBlur,
|
|
18010
|
-
trailingAdornment: /* @__PURE__ */
|
|
17973
|
+
trailingAdornment: /* @__PURE__ */ jsx182(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18011
17974
|
}
|
|
18012
17975
|
),
|
|
18013
|
-
/* @__PURE__ */
|
|
17976
|
+
/* @__PURE__ */ jsx182(
|
|
18014
17977
|
AirbnbDatePickerContent,
|
|
18015
17978
|
{
|
|
18016
17979
|
baseId: pickerId,
|
|
@@ -18044,12 +18007,12 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18044
18007
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18045
18008
|
|
|
18046
18009
|
// src/airbnb-fields/input/Input.tsx
|
|
18047
|
-
import * as
|
|
18010
|
+
import * as React73 from "react";
|
|
18048
18011
|
import { Eye as Eye2 } from "lucide-react";
|
|
18049
18012
|
import { useTranslation as useTranslation44 } from "react-i18next";
|
|
18050
|
-
import { jsx as
|
|
18013
|
+
import { jsx as jsx183, jsxs as jsxs118 } from "react/jsx-runtime";
|
|
18051
18014
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18052
|
-
var AirbnbInput =
|
|
18015
|
+
var AirbnbInput = React73.forwardRef(
|
|
18053
18016
|
({
|
|
18054
18017
|
label,
|
|
18055
18018
|
topLabel,
|
|
@@ -18078,16 +18041,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18078
18041
|
...props
|
|
18079
18042
|
}, ref) => {
|
|
18080
18043
|
const { t } = useTranslation44();
|
|
18081
|
-
const generatedId =
|
|
18082
|
-
const inputRef =
|
|
18044
|
+
const generatedId = React73.useId();
|
|
18045
|
+
const inputRef = React73.useRef(null);
|
|
18083
18046
|
const inputId = id ?? generatedId;
|
|
18084
18047
|
const fieldId = `${inputId}-field`;
|
|
18085
18048
|
const labelId = `${inputId}-label`;
|
|
18086
18049
|
const errorId = `${inputId}-error`;
|
|
18087
18050
|
const accessibleLabel = placeholder ?? label;
|
|
18088
|
-
const [isFocused, setIsFocused] =
|
|
18089
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18090
|
-
const [currentValue, setCurrentValue] =
|
|
18051
|
+
const [isFocused, setIsFocused] = React73.useState(false);
|
|
18052
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React73.useState(false);
|
|
18053
|
+
const [currentValue, setCurrentValue] = React73.useState(
|
|
18091
18054
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18092
18055
|
);
|
|
18093
18056
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18100,16 +18063,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18100
18063
|
const triggerError = error ?? invalid;
|
|
18101
18064
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18102
18065
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18103
|
-
|
|
18066
|
+
React73.useLayoutEffect(() => {
|
|
18104
18067
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18105
18068
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18106
18069
|
}, [value]);
|
|
18107
|
-
|
|
18070
|
+
React73.useEffect(() => {
|
|
18108
18071
|
if (!isPasswordInput) {
|
|
18109
18072
|
setIsPasswordRevealed(false);
|
|
18110
18073
|
}
|
|
18111
18074
|
}, [isPasswordInput]);
|
|
18112
|
-
const setRefs =
|
|
18075
|
+
const setRefs = React73.useCallback(
|
|
18113
18076
|
(node) => {
|
|
18114
18077
|
inputRef.current = node;
|
|
18115
18078
|
if (node && value == null) {
|
|
@@ -18142,7 +18105,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18142
18105
|
const togglePasswordReveal = () => {
|
|
18143
18106
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18144
18107
|
};
|
|
18145
|
-
return /* @__PURE__ */
|
|
18108
|
+
return /* @__PURE__ */ jsx183("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs118(
|
|
18146
18109
|
AirbnbFieldTrigger,
|
|
18147
18110
|
{
|
|
18148
18111
|
as: "div",
|
|
@@ -18171,7 +18134,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18171
18134
|
forceLabelText: hasLabelMeta,
|
|
18172
18135
|
hideErrorMessage: !renderErrorMessage,
|
|
18173
18136
|
children: [
|
|
18174
|
-
/* @__PURE__ */
|
|
18137
|
+
/* @__PURE__ */ jsx183(
|
|
18175
18138
|
"input",
|
|
18176
18139
|
{
|
|
18177
18140
|
...props,
|
|
@@ -18201,7 +18164,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18201
18164
|
)
|
|
18202
18165
|
}
|
|
18203
18166
|
),
|
|
18204
|
-
shouldShowPasswordReveal && /* @__PURE__ */
|
|
18167
|
+
shouldShowPasswordReveal && /* @__PURE__ */ jsx183(
|
|
18205
18168
|
"button",
|
|
18206
18169
|
{
|
|
18207
18170
|
type: "button",
|
|
@@ -18209,7 +18172,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18209
18172
|
disabled: isBlocked,
|
|
18210
18173
|
className: "absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[#7A8399] hover:text-[#1F1F1B] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
|
|
18211
18174
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18212
|
-
children: /* @__PURE__ */
|
|
18175
|
+
children: /* @__PURE__ */ jsx183(
|
|
18213
18176
|
Eye2,
|
|
18214
18177
|
{
|
|
18215
18178
|
size: 18,
|
|
@@ -18227,14 +18190,14 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18227
18190
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18228
18191
|
|
|
18229
18192
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18230
|
-
import * as
|
|
18193
|
+
import * as React79 from "react";
|
|
18231
18194
|
import { ChevronDown as ChevronDown6 } from "lucide-react";
|
|
18232
18195
|
|
|
18233
18196
|
// src/airbnb-fields/select/Select.tsx
|
|
18234
|
-
import * as
|
|
18197
|
+
import * as React78 from "react";
|
|
18235
18198
|
|
|
18236
18199
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18237
|
-
import { jsx as
|
|
18200
|
+
import { jsx as jsx184, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
18238
18201
|
function AirbnbSelectDesktopMenu({
|
|
18239
18202
|
id,
|
|
18240
18203
|
options,
|
|
@@ -18266,12 +18229,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18266
18229
|
onKeyDown,
|
|
18267
18230
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18268
18231
|
children: [
|
|
18269
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */
|
|
18232
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx184("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18270
18233
|
options.map((option, index) => {
|
|
18271
18234
|
const isSelected = selectedValue?.value === option.value;
|
|
18272
18235
|
const isHighlighted = index === highlightedIndex;
|
|
18273
18236
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18274
|
-
return /* @__PURE__ */
|
|
18237
|
+
return /* @__PURE__ */ jsx184(
|
|
18275
18238
|
"button",
|
|
18276
18239
|
{
|
|
18277
18240
|
id: getOptionId2(index),
|
|
@@ -18303,7 +18266,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18303
18266
|
}
|
|
18304
18267
|
|
|
18305
18268
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18306
|
-
import { jsx as
|
|
18269
|
+
import { jsx as jsx185 } from "react/jsx-runtime";
|
|
18307
18270
|
function AirbnbSelectDesktopContent({
|
|
18308
18271
|
isOpen,
|
|
18309
18272
|
listboxId,
|
|
@@ -18324,14 +18287,14 @@ function AirbnbSelectDesktopContent({
|
|
|
18324
18287
|
noOptionsMessage
|
|
18325
18288
|
}) {
|
|
18326
18289
|
if (!isOpen) return null;
|
|
18327
|
-
return /* @__PURE__ */
|
|
18290
|
+
return /* @__PURE__ */ jsx185(
|
|
18328
18291
|
"div",
|
|
18329
18292
|
{
|
|
18330
18293
|
className: cn(
|
|
18331
18294
|
"absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[#DEDAD2] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
|
|
18332
18295
|
dropdownClassName
|
|
18333
18296
|
),
|
|
18334
|
-
children: /* @__PURE__ */
|
|
18297
|
+
children: /* @__PURE__ */ jsx185(
|
|
18335
18298
|
AirbnbSelectDesktopMenu,
|
|
18336
18299
|
{
|
|
18337
18300
|
id: listboxId,
|
|
@@ -18429,7 +18392,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
18429
18392
|
}
|
|
18430
18393
|
|
|
18431
18394
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
18432
|
-
import { jsx as
|
|
18395
|
+
import { jsx as jsx186, jsxs as jsxs120 } from "react/jsx-runtime";
|
|
18433
18396
|
function AirbnbSelectMobileWheel({
|
|
18434
18397
|
id,
|
|
18435
18398
|
options,
|
|
@@ -18460,10 +18423,10 @@ function AirbnbSelectMobileWheel({
|
|
|
18460
18423
|
onKeyDown,
|
|
18461
18424
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
18462
18425
|
children: [
|
|
18463
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */
|
|
18464
|
-
/* @__PURE__ */
|
|
18465
|
-
/* @__PURE__ */
|
|
18466
|
-
/* @__PURE__ */
|
|
18426
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx186("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18427
|
+
/* @__PURE__ */ jsx186("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
18428
|
+
/* @__PURE__ */ jsx186("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
18429
|
+
/* @__PURE__ */ jsx186(
|
|
18467
18430
|
"div",
|
|
18468
18431
|
{
|
|
18469
18432
|
"aria-hidden": true,
|
|
@@ -18488,11 +18451,11 @@ function AirbnbSelectMobileWheel({
|
|
|
18488
18451
|
WebkitOverflowScrolling: "touch"
|
|
18489
18452
|
},
|
|
18490
18453
|
children: [
|
|
18491
|
-
/* @__PURE__ */
|
|
18454
|
+
/* @__PURE__ */ jsx186("div", { style: { height: `${spacerHeight2}px` } }),
|
|
18492
18455
|
options.map((option, index) => {
|
|
18493
18456
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
18494
18457
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18495
|
-
return /* @__PURE__ */
|
|
18458
|
+
return /* @__PURE__ */ jsx186(
|
|
18496
18459
|
"button",
|
|
18497
18460
|
{
|
|
18498
18461
|
id: getOptionId2(index),
|
|
@@ -18513,7 +18476,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18513
18476
|
optionKey
|
|
18514
18477
|
);
|
|
18515
18478
|
}),
|
|
18516
|
-
/* @__PURE__ */
|
|
18479
|
+
/* @__PURE__ */ jsx186("div", { style: { height: `${spacerHeight2}px` } })
|
|
18517
18480
|
]
|
|
18518
18481
|
}
|
|
18519
18482
|
)
|
|
@@ -18523,7 +18486,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18523
18486
|
}
|
|
18524
18487
|
|
|
18525
18488
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
18526
|
-
import { jsx as
|
|
18489
|
+
import { jsx as jsx187, jsxs as jsxs121 } from "react/jsx-runtime";
|
|
18527
18490
|
function AirbnbSelectMobileContent({
|
|
18528
18491
|
open,
|
|
18529
18492
|
onOpenChange,
|
|
@@ -18547,11 +18510,11 @@ function AirbnbSelectMobileContent({
|
|
|
18547
18510
|
getOptionId: getOptionId2,
|
|
18548
18511
|
noOptionsMessage
|
|
18549
18512
|
}) {
|
|
18550
|
-
return /* @__PURE__ */
|
|
18551
|
-
/* @__PURE__ */
|
|
18552
|
-
/* @__PURE__ */
|
|
18513
|
+
return /* @__PURE__ */ jsx187(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs121(DrawerContent, { onClose, lockScroll: false, children: [
|
|
18514
|
+
/* @__PURE__ */ jsx187(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
18515
|
+
/* @__PURE__ */ jsx187(DrawerDescription, { className: "sr-only", children: label }),
|
|
18553
18516
|
/* @__PURE__ */ jsxs121("div", { className: "px-6 pb-4 pt-1", children: [
|
|
18554
|
-
/* @__PURE__ */
|
|
18517
|
+
/* @__PURE__ */ jsx187(
|
|
18555
18518
|
AirbnbSelectMobileWheel,
|
|
18556
18519
|
{
|
|
18557
18520
|
id: listboxId,
|
|
@@ -18570,16 +18533,16 @@ function AirbnbSelectMobileContent({
|
|
|
18570
18533
|
noOptionsMessage
|
|
18571
18534
|
}
|
|
18572
18535
|
),
|
|
18573
|
-
/* @__PURE__ */
|
|
18536
|
+
/* @__PURE__ */ jsx187(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
18574
18537
|
] })
|
|
18575
18538
|
] }) });
|
|
18576
18539
|
}
|
|
18577
18540
|
|
|
18578
18541
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18579
|
-
import * as
|
|
18542
|
+
import * as React74 from "react";
|
|
18580
18543
|
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
18581
|
-
import { jsx as
|
|
18582
|
-
var AirbnbSelectTrigger =
|
|
18544
|
+
import { jsx as jsx188 } from "react/jsx-runtime";
|
|
18545
|
+
var AirbnbSelectTrigger = React74.forwardRef(
|
|
18583
18546
|
({
|
|
18584
18547
|
id,
|
|
18585
18548
|
open,
|
|
@@ -18603,7 +18566,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18603
18566
|
onKeyDown,
|
|
18604
18567
|
onBlur
|
|
18605
18568
|
}, ref) => {
|
|
18606
|
-
return /* @__PURE__ */
|
|
18569
|
+
return /* @__PURE__ */ jsx188(
|
|
18607
18570
|
AirbnbFieldTrigger,
|
|
18608
18571
|
{
|
|
18609
18572
|
id,
|
|
@@ -18631,7 +18594,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18631
18594
|
onClick,
|
|
18632
18595
|
onKeyDown,
|
|
18633
18596
|
onBlur,
|
|
18634
|
-
trailingAdornment: /* @__PURE__ */
|
|
18597
|
+
trailingAdornment: /* @__PURE__ */ jsx188(
|
|
18635
18598
|
ChevronDown5,
|
|
18636
18599
|
{
|
|
18637
18600
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
@@ -18644,7 +18607,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18644
18607
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
18645
18608
|
|
|
18646
18609
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
18647
|
-
import * as
|
|
18610
|
+
import * as React75 from "react";
|
|
18648
18611
|
function useDesktopSelect({
|
|
18649
18612
|
isMobile: isMobile3,
|
|
18650
18613
|
isOpen,
|
|
@@ -18653,12 +18616,12 @@ function useDesktopSelect({
|
|
|
18653
18616
|
disabled,
|
|
18654
18617
|
onChange
|
|
18655
18618
|
}) {
|
|
18656
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
18657
|
-
const triggerRef =
|
|
18658
|
-
const listRef =
|
|
18659
|
-
const optionRefs =
|
|
18619
|
+
const [highlightedIndex, setHighlightedIndex] = React75.useState(-1);
|
|
18620
|
+
const triggerRef = React75.useRef(null);
|
|
18621
|
+
const listRef = React75.useRef(null);
|
|
18622
|
+
const optionRefs = React75.useRef([]);
|
|
18660
18623
|
const selectedIndex = getOptionIndex2(options, value);
|
|
18661
|
-
|
|
18624
|
+
React75.useEffect(() => {
|
|
18662
18625
|
if (!isOpen || isMobile3) return;
|
|
18663
18626
|
setHighlightedIndex((currentIndex) => {
|
|
18664
18627
|
if (currentIndex >= 0) {
|
|
@@ -18673,34 +18636,34 @@ function useDesktopSelect({
|
|
|
18673
18636
|
window.cancelAnimationFrame(frameId);
|
|
18674
18637
|
};
|
|
18675
18638
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
18676
|
-
|
|
18639
|
+
React75.useEffect(() => {
|
|
18677
18640
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
18678
18641
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
18679
18642
|
block: "nearest"
|
|
18680
18643
|
});
|
|
18681
18644
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
18682
|
-
|
|
18645
|
+
React75.useEffect(() => {
|
|
18683
18646
|
if (isOpen) return;
|
|
18684
18647
|
setHighlightedIndex(-1);
|
|
18685
18648
|
}, [isOpen]);
|
|
18686
|
-
const focusTrigger =
|
|
18649
|
+
const focusTrigger = React75.useCallback(() => {
|
|
18687
18650
|
triggerRef.current?.focus();
|
|
18688
18651
|
}, []);
|
|
18689
|
-
const handleSelect =
|
|
18652
|
+
const handleSelect = React75.useCallback(
|
|
18690
18653
|
(option) => {
|
|
18691
18654
|
if (option.isDisabled || disabled) return;
|
|
18692
18655
|
onChange?.(option);
|
|
18693
18656
|
},
|
|
18694
18657
|
[disabled, onChange]
|
|
18695
18658
|
);
|
|
18696
|
-
const openMenu =
|
|
18659
|
+
const openMenu = React75.useCallback(
|
|
18697
18660
|
(targetIndex) => {
|
|
18698
18661
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
18699
18662
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
18700
18663
|
},
|
|
18701
18664
|
[options, selectedIndex]
|
|
18702
18665
|
);
|
|
18703
|
-
const handleTriggerKeyDown =
|
|
18666
|
+
const handleTriggerKeyDown = React75.useCallback(
|
|
18704
18667
|
(event, onOpen) => {
|
|
18705
18668
|
if (disabled) return;
|
|
18706
18669
|
if (event.key === "ArrowDown") {
|
|
@@ -18725,7 +18688,7 @@ function useDesktopSelect({
|
|
|
18725
18688
|
},
|
|
18726
18689
|
[disabled, openMenu, options, selectedIndex]
|
|
18727
18690
|
);
|
|
18728
|
-
const handleMenuKeyDown =
|
|
18691
|
+
const handleMenuKeyDown = React75.useCallback(
|
|
18729
18692
|
(event, onClose) => {
|
|
18730
18693
|
if (event.key === "Escape") {
|
|
18731
18694
|
event.preventDefault();
|
|
@@ -18775,7 +18738,7 @@ function useDesktopSelect({
|
|
|
18775
18738
|
},
|
|
18776
18739
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
18777
18740
|
);
|
|
18778
|
-
const setOptionRef =
|
|
18741
|
+
const setOptionRef = React75.useCallback(
|
|
18779
18742
|
(index, node) => {
|
|
18780
18743
|
optionRefs.current[index] = node;
|
|
18781
18744
|
},
|
|
@@ -18795,23 +18758,23 @@ function useDesktopSelect({
|
|
|
18795
18758
|
}
|
|
18796
18759
|
|
|
18797
18760
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
18798
|
-
import * as
|
|
18761
|
+
import * as React76 from "react";
|
|
18799
18762
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
18800
|
-
const [pendingValue, setPendingValue] =
|
|
18763
|
+
const [pendingValue, setPendingValue] = React76.useState(
|
|
18801
18764
|
value ?? null
|
|
18802
18765
|
);
|
|
18803
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
18804
|
-
const mobileListRef =
|
|
18805
|
-
const scrollSettleTimeoutRef =
|
|
18806
|
-
const scrollAnimationFrameRef =
|
|
18807
|
-
const getTargetIndex =
|
|
18766
|
+
const [mobileScrollTop, setMobileScrollTop] = React76.useState(0);
|
|
18767
|
+
const mobileListRef = React76.useRef(null);
|
|
18768
|
+
const scrollSettleTimeoutRef = React76.useRef(null);
|
|
18769
|
+
const scrollAnimationFrameRef = React76.useRef(null);
|
|
18770
|
+
const getTargetIndex = React76.useCallback(
|
|
18808
18771
|
(targetValue) => {
|
|
18809
18772
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
18810
18773
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
18811
18774
|
},
|
|
18812
18775
|
[options]
|
|
18813
18776
|
);
|
|
18814
|
-
const syncScrollPosition =
|
|
18777
|
+
const syncScrollPosition = React76.useCallback(
|
|
18815
18778
|
(targetValue, behavior = "instant") => {
|
|
18816
18779
|
const targetIndex = getTargetIndex(targetValue);
|
|
18817
18780
|
if (targetIndex < 0) return;
|
|
@@ -18830,27 +18793,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18830
18793
|
},
|
|
18831
18794
|
[getTargetIndex, options]
|
|
18832
18795
|
);
|
|
18833
|
-
const clearScrollSettleTimeout =
|
|
18796
|
+
const clearScrollSettleTimeout = React76.useCallback(() => {
|
|
18834
18797
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
18835
18798
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
18836
18799
|
scrollSettleTimeoutRef.current = null;
|
|
18837
18800
|
}, []);
|
|
18838
|
-
const clearScrollAnimationFrame =
|
|
18801
|
+
const clearScrollAnimationFrame = React76.useCallback(() => {
|
|
18839
18802
|
if (scrollAnimationFrameRef.current === null) return;
|
|
18840
18803
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
18841
18804
|
scrollAnimationFrameRef.current = null;
|
|
18842
18805
|
}, []);
|
|
18843
|
-
|
|
18806
|
+
React76.useEffect(
|
|
18844
18807
|
() => () => {
|
|
18845
18808
|
clearScrollSettleTimeout();
|
|
18846
18809
|
clearScrollAnimationFrame();
|
|
18847
18810
|
},
|
|
18848
18811
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
18849
18812
|
);
|
|
18850
|
-
|
|
18813
|
+
React76.useEffect(() => {
|
|
18851
18814
|
setPendingValue(value ?? null);
|
|
18852
18815
|
}, [value]);
|
|
18853
|
-
|
|
18816
|
+
React76.useLayoutEffect(() => {
|
|
18854
18817
|
if (!isMobile3 || !isOpen) return;
|
|
18855
18818
|
const frameId = window.requestAnimationFrame(() => {
|
|
18856
18819
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -18859,7 +18822,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18859
18822
|
window.cancelAnimationFrame(frameId);
|
|
18860
18823
|
};
|
|
18861
18824
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
18862
|
-
const settleScroll =
|
|
18825
|
+
const settleScroll = React76.useCallback(() => {
|
|
18863
18826
|
if (!mobileListRef.current) return;
|
|
18864
18827
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
18865
18828
|
const nextOption = options[nextIndex];
|
|
@@ -18871,13 +18834,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18871
18834
|
}
|
|
18872
18835
|
setPendingValue(nextOption);
|
|
18873
18836
|
}, [options, pendingValue]);
|
|
18874
|
-
const scheduleScrollSettle =
|
|
18837
|
+
const scheduleScrollSettle = React76.useCallback(() => {
|
|
18875
18838
|
clearScrollSettleTimeout();
|
|
18876
18839
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
18877
18840
|
settleScroll();
|
|
18878
18841
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
18879
18842
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
18880
|
-
const handleScroll =
|
|
18843
|
+
const handleScroll = React76.useCallback(() => {
|
|
18881
18844
|
if (!mobileListRef.current) return;
|
|
18882
18845
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
18883
18846
|
clearScrollAnimationFrame();
|
|
@@ -18887,7 +18850,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18887
18850
|
});
|
|
18888
18851
|
scheduleScrollSettle();
|
|
18889
18852
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
18890
|
-
const focusOptionByIndex =
|
|
18853
|
+
const focusOptionByIndex = React76.useCallback(
|
|
18891
18854
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
18892
18855
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
18893
18856
|
const option = options[index];
|
|
@@ -18905,7 +18868,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18905
18868
|
},
|
|
18906
18869
|
[options, scheduleScrollSettle]
|
|
18907
18870
|
);
|
|
18908
|
-
const handleOptionClick =
|
|
18871
|
+
const handleOptionClick = React76.useCallback(
|
|
18909
18872
|
(option) => {
|
|
18910
18873
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
18911
18874
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -18914,7 +18877,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18914
18877
|
},
|
|
18915
18878
|
[disabled, focusOptionByIndex, options]
|
|
18916
18879
|
);
|
|
18917
|
-
const moveByStep =
|
|
18880
|
+
const moveByStep = React76.useCallback(
|
|
18918
18881
|
(step) => {
|
|
18919
18882
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
18920
18883
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -18926,7 +18889,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18926
18889
|
},
|
|
18927
18890
|
[focusOptionByIndex, options, pendingValue]
|
|
18928
18891
|
);
|
|
18929
|
-
const moveToBoundary =
|
|
18892
|
+
const moveToBoundary = React76.useCallback(
|
|
18930
18893
|
(boundary) => {
|
|
18931
18894
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
18932
18895
|
if (targetIndex >= 0) {
|
|
@@ -18935,7 +18898,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18935
18898
|
},
|
|
18936
18899
|
[focusOptionByIndex, options]
|
|
18937
18900
|
);
|
|
18938
|
-
const syncPendingValue =
|
|
18901
|
+
const syncPendingValue = React76.useCallback(
|
|
18939
18902
|
(nextValue) => {
|
|
18940
18903
|
const normalizedValue = nextValue ?? null;
|
|
18941
18904
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -18963,9 +18926,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
18963
18926
|
}
|
|
18964
18927
|
|
|
18965
18928
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
18966
|
-
import * as
|
|
18929
|
+
import * as React77 from "react";
|
|
18967
18930
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
18968
|
-
const reactId =
|
|
18931
|
+
const reactId = React77.useId().replace(/:/g, "");
|
|
18969
18932
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
18970
18933
|
const triggerId = `${baseId}-trigger`;
|
|
18971
18934
|
const labelId = `${baseId}-label`;
|
|
@@ -18975,7 +18938,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
18975
18938
|
const listboxId = `${baseId}-listbox`;
|
|
18976
18939
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
18977
18940
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
18978
|
-
const getOptionId2 =
|
|
18941
|
+
const getOptionId2 = React77.useCallback(
|
|
18979
18942
|
(index) => `${baseId}-option-${index}`,
|
|
18980
18943
|
[baseId]
|
|
18981
18944
|
);
|
|
@@ -18993,8 +18956,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
18993
18956
|
}
|
|
18994
18957
|
|
|
18995
18958
|
// src/airbnb-fields/select/Select.tsx
|
|
18996
|
-
import { jsx as
|
|
18997
|
-
var AirbnbSelect =
|
|
18959
|
+
import { jsx as jsx189, jsxs as jsxs122 } from "react/jsx-runtime";
|
|
18960
|
+
var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
18998
18961
|
options = [],
|
|
18999
18962
|
value,
|
|
19000
18963
|
onChange,
|
|
@@ -19021,8 +18984,8 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19021
18984
|
filterOption
|
|
19022
18985
|
}, ref) {
|
|
19023
18986
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19024
|
-
const [isOpen, setIsOpen] =
|
|
19025
|
-
const containerRef =
|
|
18987
|
+
const [isOpen, setIsOpen] = React78.useState(false);
|
|
18988
|
+
const containerRef = React78.useRef(null);
|
|
19026
18989
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19027
18990
|
const hasValue = Boolean(value);
|
|
19028
18991
|
const helperText = placeholder ?? label;
|
|
@@ -19084,12 +19047,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19084
19047
|
onOutsideClick: () => setIsOpen(false),
|
|
19085
19048
|
isDisabled: !isOpen || isMobile3
|
|
19086
19049
|
});
|
|
19087
|
-
|
|
19050
|
+
React78.useEffect(() => {
|
|
19088
19051
|
if (isBlocked) {
|
|
19089
19052
|
setIsOpen(false);
|
|
19090
19053
|
}
|
|
19091
19054
|
}, [isBlocked]);
|
|
19092
|
-
|
|
19055
|
+
React78.useEffect(
|
|
19093
19056
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19094
19057
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19095
19058
|
return;
|
|
@@ -19101,7 +19064,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19101
19064
|
},
|
|
19102
19065
|
[onChange, filteredOptions, value]
|
|
19103
19066
|
);
|
|
19104
|
-
const handleMobileOpenChange =
|
|
19067
|
+
const handleMobileOpenChange = React78.useCallback(
|
|
19105
19068
|
(nextOpen) => {
|
|
19106
19069
|
if (isBlocked && nextOpen) return;
|
|
19107
19070
|
setIsOpen(nextOpen);
|
|
@@ -19112,7 +19075,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19112
19075
|
},
|
|
19113
19076
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19114
19077
|
);
|
|
19115
|
-
const handleMobileDone =
|
|
19078
|
+
const handleMobileDone = React78.useCallback(() => {
|
|
19116
19079
|
if (isBlocked) return;
|
|
19117
19080
|
const finalOption = pendingValue;
|
|
19118
19081
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19121,7 +19084,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19121
19084
|
setIsOpen(false);
|
|
19122
19085
|
focusTrigger();
|
|
19123
19086
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19124
|
-
const handleTriggerClick =
|
|
19087
|
+
const handleTriggerClick = React78.useCallback(() => {
|
|
19125
19088
|
if (isBlocked) return;
|
|
19126
19089
|
setIsOpen((prev) => {
|
|
19127
19090
|
const nextOpen = !prev;
|
|
@@ -19180,7 +19143,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19180
19143
|
ref: containerRef,
|
|
19181
19144
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19182
19145
|
children: [
|
|
19183
|
-
name && /* @__PURE__ */
|
|
19146
|
+
name && /* @__PURE__ */ jsx189("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19184
19147
|
renderTrigger ? renderTrigger({
|
|
19185
19148
|
id: triggerId,
|
|
19186
19149
|
open: isOpen,
|
|
@@ -19201,7 +19164,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19201
19164
|
onClick: handleTriggerClick,
|
|
19202
19165
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19203
19166
|
onBlur
|
|
19204
|
-
}) : /* @__PURE__ */
|
|
19167
|
+
}) : /* @__PURE__ */ jsx189(
|
|
19205
19168
|
AirbnbSelectTrigger,
|
|
19206
19169
|
{
|
|
19207
19170
|
id: triggerId,
|
|
@@ -19228,7 +19191,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19228
19191
|
onBlur
|
|
19229
19192
|
}
|
|
19230
19193
|
),
|
|
19231
|
-
isMobile3 ? /* @__PURE__ */
|
|
19194
|
+
isMobile3 ? /* @__PURE__ */ jsx189(
|
|
19232
19195
|
AirbnbSelectMobileContent,
|
|
19233
19196
|
{
|
|
19234
19197
|
open: isOpen,
|
|
@@ -19253,7 +19216,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19253
19216
|
getOptionId: getOptionId2,
|
|
19254
19217
|
noOptionsMessage
|
|
19255
19218
|
}
|
|
19256
|
-
) : /* @__PURE__ */
|
|
19219
|
+
) : /* @__PURE__ */ jsx189(
|
|
19257
19220
|
AirbnbSelectDesktopContent,
|
|
19258
19221
|
{
|
|
19259
19222
|
isOpen,
|
|
@@ -19287,13 +19250,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19287
19250
|
});
|
|
19288
19251
|
|
|
19289
19252
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19290
|
-
import { jsx as
|
|
19253
|
+
import { jsx as jsx190, jsxs as jsxs123 } from "react/jsx-runtime";
|
|
19291
19254
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19292
19255
|
const label = String(option.label);
|
|
19293
19256
|
const value = String(option.value);
|
|
19294
19257
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19295
19258
|
}
|
|
19296
|
-
var AirbnbPhoneField =
|
|
19259
|
+
var AirbnbPhoneField = React79.forwardRef(
|
|
19297
19260
|
({
|
|
19298
19261
|
label,
|
|
19299
19262
|
topLabel,
|
|
@@ -19314,10 +19277,12 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19314
19277
|
codeName,
|
|
19315
19278
|
numberName,
|
|
19316
19279
|
mobileTitle,
|
|
19317
|
-
codePlaceholder = "+00"
|
|
19280
|
+
codePlaceholder = "+00",
|
|
19281
|
+
defaultCode
|
|
19318
19282
|
}, ref) => {
|
|
19319
|
-
const inputId =
|
|
19320
|
-
const
|
|
19283
|
+
const inputId = React79.useId();
|
|
19284
|
+
const effectiveCode = value?.code || defaultCode || "";
|
|
19285
|
+
const codeOptions = React79.useMemo(
|
|
19321
19286
|
() => options.map((option) => ({
|
|
19322
19287
|
value: option.value,
|
|
19323
19288
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19325,26 +19290,26 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19325
19290
|
})),
|
|
19326
19291
|
[options]
|
|
19327
19292
|
);
|
|
19328
|
-
const selectedCodeOption =
|
|
19329
|
-
() => codeOptions.find((option) => option.value ===
|
|
19330
|
-
[codeOptions,
|
|
19293
|
+
const selectedCodeOption = React79.useMemo(
|
|
19294
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19295
|
+
[codeOptions, effectiveCode]
|
|
19331
19296
|
);
|
|
19332
|
-
const combinedValue =
|
|
19297
|
+
const combinedValue = effectiveCode || value?.number ? `${effectiveCode}${value?.number ?? ""}` : "";
|
|
19333
19298
|
const hasInvalidState = Boolean(error) || Boolean(invalid);
|
|
19334
19299
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
19335
19300
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
19336
19301
|
return /* @__PURE__ */ jsxs123("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
19337
|
-
name && /* @__PURE__ */
|
|
19338
|
-
codeName && /* @__PURE__ */
|
|
19302
|
+
name && /* @__PURE__ */ jsx190("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
19303
|
+
codeName && /* @__PURE__ */ jsx190(
|
|
19339
19304
|
"input",
|
|
19340
19305
|
{
|
|
19341
19306
|
type: "hidden",
|
|
19342
19307
|
name: codeName,
|
|
19343
|
-
value:
|
|
19308
|
+
value: effectiveCode,
|
|
19344
19309
|
disabled
|
|
19345
19310
|
}
|
|
19346
19311
|
),
|
|
19347
|
-
numberName && /* @__PURE__ */
|
|
19312
|
+
numberName && /* @__PURE__ */ jsx190(
|
|
19348
19313
|
"input",
|
|
19349
19314
|
{
|
|
19350
19315
|
type: "hidden",
|
|
@@ -19353,7 +19318,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19353
19318
|
disabled
|
|
19354
19319
|
}
|
|
19355
19320
|
),
|
|
19356
|
-
topLabel && /* @__PURE__ */
|
|
19321
|
+
topLabel && /* @__PURE__ */ jsx190(
|
|
19357
19322
|
"label",
|
|
19358
19323
|
{
|
|
19359
19324
|
htmlFor: inputId,
|
|
@@ -19362,7 +19327,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19362
19327
|
}
|
|
19363
19328
|
),
|
|
19364
19329
|
/* @__PURE__ */ jsxs123("div", { className: "flex items-stretch", children: [
|
|
19365
|
-
/* @__PURE__ */
|
|
19330
|
+
/* @__PURE__ */ jsx190(
|
|
19366
19331
|
AirbnbSelect,
|
|
19367
19332
|
{
|
|
19368
19333
|
ref,
|
|
@@ -19412,8 +19377,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19412
19377
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
19413
19378
|
),
|
|
19414
19379
|
children: [
|
|
19415
|
-
/* @__PURE__ */
|
|
19416
|
-
/* @__PURE__ */
|
|
19380
|
+
/* @__PURE__ */ jsx190("span", { children: valueLabel ?? codePlaceholder }),
|
|
19381
|
+
/* @__PURE__ */ jsx190(
|
|
19417
19382
|
ChevronDown6,
|
|
19418
19383
|
{
|
|
19419
19384
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
@@ -19425,7 +19390,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19425
19390
|
)
|
|
19426
19391
|
}
|
|
19427
19392
|
),
|
|
19428
|
-
/* @__PURE__ */
|
|
19393
|
+
/* @__PURE__ */ jsx190(
|
|
19429
19394
|
AirbnbInput,
|
|
19430
19395
|
{
|
|
19431
19396
|
id: inputId,
|
|
@@ -19447,25 +19412,25 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19447
19412
|
contentClassName: "h-[40px] py-2",
|
|
19448
19413
|
inputClassName: "text-[16px] leading-7",
|
|
19449
19414
|
onChange: (event) => onChange({
|
|
19450
|
-
code:
|
|
19415
|
+
code: effectiveCode,
|
|
19451
19416
|
number: event.target.value
|
|
19452
19417
|
}),
|
|
19453
19418
|
onBlur
|
|
19454
19419
|
}
|
|
19455
19420
|
)
|
|
19456
19421
|
] }),
|
|
19457
|
-
error && /* @__PURE__ */
|
|
19422
|
+
error && /* @__PURE__ */ jsx190(FieldErrorMessage, { message: error })
|
|
19458
19423
|
] });
|
|
19459
19424
|
}
|
|
19460
19425
|
);
|
|
19461
19426
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19462
19427
|
|
|
19463
19428
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19464
|
-
import * as
|
|
19429
|
+
import * as React80 from "react";
|
|
19465
19430
|
import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
|
|
19466
19431
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
19467
19432
|
import { useCallback as useCallback57 } from "react";
|
|
19468
|
-
import { jsx as
|
|
19433
|
+
import { jsx as jsx191, jsxs as jsxs124 } from "react/jsx-runtime";
|
|
19469
19434
|
var ROW_HEIGHT = 48;
|
|
19470
19435
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
19471
19436
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -19505,13 +19470,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19505
19470
|
loadingMessage
|
|
19506
19471
|
}, ref) => {
|
|
19507
19472
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19508
|
-
const reactId =
|
|
19509
|
-
const [open, setOpen] =
|
|
19510
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
19511
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19512
|
-
const containerRef =
|
|
19513
|
-
const triggerRef =
|
|
19514
|
-
const inputRef =
|
|
19473
|
+
const reactId = React80.useId();
|
|
19474
|
+
const [open, setOpen] = React80.useState(false);
|
|
19475
|
+
const [internalSearchValue, setInternalSearchValue] = React80.useState("");
|
|
19476
|
+
const [highlightedIndex, setHighlightedIndex] = React80.useState(-1);
|
|
19477
|
+
const containerRef = React80.useRef(null);
|
|
19478
|
+
const triggerRef = React80.useRef(null);
|
|
19479
|
+
const inputRef = React80.useRef(null);
|
|
19515
19480
|
const listboxId = `${reactId}-listbox`;
|
|
19516
19481
|
const labelId = `${reactId}-label`;
|
|
19517
19482
|
const valueId = `${reactId}-value`;
|
|
@@ -19520,13 +19485,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19520
19485
|
const searchInputId = `${reactId}-search`;
|
|
19521
19486
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19522
19487
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19523
|
-
const visibleOptions =
|
|
19488
|
+
const visibleOptions = React80.useMemo(() => {
|
|
19524
19489
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19525
19490
|
return options;
|
|
19526
19491
|
}
|
|
19527
19492
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19528
19493
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19529
|
-
const selectedIndex =
|
|
19494
|
+
const selectedIndex = React80.useMemo(
|
|
19530
19495
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19531
19496
|
[value?.value, visibleOptions]
|
|
19532
19497
|
);
|
|
@@ -19552,7 +19517,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19552
19517
|
},
|
|
19553
19518
|
[handleOnOpenChange]
|
|
19554
19519
|
);
|
|
19555
|
-
|
|
19520
|
+
React80.useEffect(() => {
|
|
19556
19521
|
if (isBlocked) {
|
|
19557
19522
|
setSelectOpen(false);
|
|
19558
19523
|
return;
|
|
@@ -19565,7 +19530,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19565
19530
|
window.cancelAnimationFrame(frameId);
|
|
19566
19531
|
};
|
|
19567
19532
|
}, [isBlocked, open, setSelectOpen]);
|
|
19568
|
-
|
|
19533
|
+
React80.useEffect(() => {
|
|
19569
19534
|
if (!open) {
|
|
19570
19535
|
setHighlightedIndex(-1);
|
|
19571
19536
|
return;
|
|
@@ -19633,7 +19598,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19633
19598
|
}
|
|
19634
19599
|
}
|
|
19635
19600
|
}
|
|
19636
|
-
const content = /* @__PURE__ */
|
|
19601
|
+
const content = /* @__PURE__ */ jsx191(
|
|
19637
19602
|
AirbnbSearchableSelectContent,
|
|
19638
19603
|
{
|
|
19639
19604
|
inputId: searchInputId,
|
|
@@ -19660,10 +19625,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19660
19625
|
onOptionHover: setHighlightedIndex
|
|
19661
19626
|
}
|
|
19662
19627
|
);
|
|
19663
|
-
|
|
19628
|
+
React80.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
19664
19629
|
return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
19665
|
-
name && /* @__PURE__ */
|
|
19666
|
-
/* @__PURE__ */
|
|
19630
|
+
name && /* @__PURE__ */ jsx191("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19631
|
+
/* @__PURE__ */ jsx191(
|
|
19667
19632
|
AirbnbFieldTrigger,
|
|
19668
19633
|
{
|
|
19669
19634
|
id: `${reactId}-trigger`,
|
|
@@ -19697,7 +19662,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19697
19662
|
},
|
|
19698
19663
|
onKeyDown: handleTriggerKeyDown,
|
|
19699
19664
|
onBlur,
|
|
19700
|
-
trailingAdornment: /* @__PURE__ */
|
|
19665
|
+
trailingAdornment: /* @__PURE__ */ jsx191(
|
|
19701
19666
|
ChevronDown7,
|
|
19702
19667
|
{
|
|
19703
19668
|
className: cn(
|
|
@@ -19708,7 +19673,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19708
19673
|
)
|
|
19709
19674
|
}
|
|
19710
19675
|
),
|
|
19711
|
-
isMobile3 ? /* @__PURE__ */
|
|
19676
|
+
isMobile3 ? /* @__PURE__ */ jsx191(
|
|
19712
19677
|
Drawer,
|
|
19713
19678
|
{
|
|
19714
19679
|
open,
|
|
@@ -19721,12 +19686,12 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19721
19686
|
closeSelect();
|
|
19722
19687
|
},
|
|
19723
19688
|
children: /* @__PURE__ */ jsxs124(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
19724
|
-
/* @__PURE__ */
|
|
19725
|
-
/* @__PURE__ */
|
|
19726
|
-
/* @__PURE__ */
|
|
19689
|
+
/* @__PURE__ */ jsx191(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
19690
|
+
/* @__PURE__ */ jsx191(DrawerDescription, { className: "sr-only", children: label }),
|
|
19691
|
+
/* @__PURE__ */ jsx191("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
19727
19692
|
] })
|
|
19728
19693
|
}
|
|
19729
|
-
) : open ? /* @__PURE__ */
|
|
19694
|
+
) : open ? /* @__PURE__ */ jsx191(
|
|
19730
19695
|
"div",
|
|
19731
19696
|
{
|
|
19732
19697
|
className: cn(
|
|
@@ -19738,7 +19703,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19738
19703
|
) : null
|
|
19739
19704
|
] });
|
|
19740
19705
|
};
|
|
19741
|
-
var AirbnbSearchableSelect =
|
|
19706
|
+
var AirbnbSearchableSelect = React80.forwardRef(
|
|
19742
19707
|
AirbnbSearchableSelectInternal
|
|
19743
19708
|
);
|
|
19744
19709
|
function AirbnbSearchableSelectContent({
|
|
@@ -19765,9 +19730,9 @@ function AirbnbSearchableSelectContent({
|
|
|
19765
19730
|
onOptionClick,
|
|
19766
19731
|
onOptionHover
|
|
19767
19732
|
}) {
|
|
19768
|
-
const listRef =
|
|
19769
|
-
const lastLoadMoreOptionsLengthRef =
|
|
19770
|
-
const previousHighlightedIndexRef =
|
|
19733
|
+
const listRef = React80.useRef(null);
|
|
19734
|
+
const lastLoadMoreOptionsLengthRef = React80.useRef(null);
|
|
19735
|
+
const previousHighlightedIndexRef = React80.useRef(highlightedIndex);
|
|
19771
19736
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
19772
19737
|
const virtualizer = useVirtualizer3({
|
|
19773
19738
|
count: rowCount,
|
|
@@ -19778,7 +19743,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19778
19743
|
const virtualItems = virtualizer.getVirtualItems();
|
|
19779
19744
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
19780
19745
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
19781
|
-
|
|
19746
|
+
React80.useEffect(() => {
|
|
19782
19747
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
19783
19748
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
19784
19749
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -19786,7 +19751,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19786
19751
|
onLoadMore?.();
|
|
19787
19752
|
}
|
|
19788
19753
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
19789
|
-
|
|
19754
|
+
React80.useEffect(() => {
|
|
19790
19755
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
19791
19756
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
19792
19757
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -19795,14 +19760,14 @@ function AirbnbSearchableSelectContent({
|
|
|
19795
19760
|
}, [highlightedIndex, virtualizer]);
|
|
19796
19761
|
return /* @__PURE__ */ jsxs124("div", { className: "p-2", children: [
|
|
19797
19762
|
/* @__PURE__ */ jsxs124("div", { className: "relative mb-2", children: [
|
|
19798
|
-
/* @__PURE__ */
|
|
19763
|
+
/* @__PURE__ */ jsx191(
|
|
19799
19764
|
Search4,
|
|
19800
19765
|
{
|
|
19801
19766
|
"aria-hidden": "true",
|
|
19802
19767
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
19803
19768
|
}
|
|
19804
19769
|
),
|
|
19805
|
-
/* @__PURE__ */
|
|
19770
|
+
/* @__PURE__ */ jsx191(
|
|
19806
19771
|
"input",
|
|
19807
19772
|
{
|
|
19808
19773
|
id: inputId,
|
|
@@ -19821,7 +19786,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19821
19786
|
}
|
|
19822
19787
|
)
|
|
19823
19788
|
] }),
|
|
19824
|
-
loading && options.length === 0 ? /* @__PURE__ */
|
|
19789
|
+
loading && options.length === 0 ? /* @__PURE__ */ jsx191("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx191("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx191(
|
|
19825
19790
|
"div",
|
|
19826
19791
|
{
|
|
19827
19792
|
id: listboxId,
|
|
@@ -19830,7 +19795,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19830
19795
|
"aria-labelledby": labelId,
|
|
19831
19796
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
19832
19797
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
19833
|
-
children: /* @__PURE__ */
|
|
19798
|
+
children: /* @__PURE__ */ jsx191(
|
|
19834
19799
|
"div",
|
|
19835
19800
|
{
|
|
19836
19801
|
className: "relative w-full",
|
|
@@ -19838,7 +19803,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19838
19803
|
children: virtualItems.map((virtualItem) => {
|
|
19839
19804
|
const option = options[virtualItem.index];
|
|
19840
19805
|
if (!option) {
|
|
19841
|
-
return /* @__PURE__ */
|
|
19806
|
+
return /* @__PURE__ */ jsx191(
|
|
19842
19807
|
"div",
|
|
19843
19808
|
{
|
|
19844
19809
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -19853,7 +19818,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19853
19818
|
}
|
|
19854
19819
|
const isSelected = value?.value === option.value;
|
|
19855
19820
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
19856
|
-
return /* @__PURE__ */
|
|
19821
|
+
return /* @__PURE__ */ jsx191(
|
|
19857
19822
|
"button",
|
|
19858
19823
|
{
|
|
19859
19824
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -19875,7 +19840,7 @@ function AirbnbSearchableSelectContent({
|
|
|
19875
19840
|
height: `${virtualItem.size}px`,
|
|
19876
19841
|
transform: `translateY(${virtualItem.start}px)`
|
|
19877
19842
|
},
|
|
19878
|
-
children: /* @__PURE__ */
|
|
19843
|
+
children: /* @__PURE__ */ jsx191("span", { className: "truncate text-center", children: String(option.label) })
|
|
19879
19844
|
},
|
|
19880
19845
|
`${String(option.value)}-${virtualItem.index}`
|
|
19881
19846
|
);
|
|
@@ -19904,16 +19869,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
19904
19869
|
}
|
|
19905
19870
|
|
|
19906
19871
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
19907
|
-
import * as
|
|
19872
|
+
import * as React81 from "react";
|
|
19908
19873
|
import { useTranslation as useTranslation45 } from "react-i18next";
|
|
19909
19874
|
import { Search as Search5, X as X11 } from "lucide-react";
|
|
19910
|
-
import { jsx as
|
|
19911
|
-
var AirbnbSearchInput =
|
|
19875
|
+
import { jsx as jsx192, jsxs as jsxs125 } from "react/jsx-runtime";
|
|
19876
|
+
var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
19912
19877
|
const { t } = useTranslation45();
|
|
19913
19878
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
19914
19879
|
return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
19915
|
-
/* @__PURE__ */
|
|
19916
|
-
/* @__PURE__ */
|
|
19880
|
+
/* @__PURE__ */ jsx192(Search5, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
|
|
19881
|
+
/* @__PURE__ */ jsx192(
|
|
19917
19882
|
"input",
|
|
19918
19883
|
{
|
|
19919
19884
|
...props,
|
|
@@ -19932,13 +19897,13 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
19932
19897
|
)
|
|
19933
19898
|
}
|
|
19934
19899
|
),
|
|
19935
|
-
onReset && /* @__PURE__ */
|
|
19900
|
+
onReset && /* @__PURE__ */ jsx192(
|
|
19936
19901
|
Button,
|
|
19937
19902
|
{
|
|
19938
19903
|
variant: "ghost",
|
|
19939
19904
|
onClick: onReset,
|
|
19940
19905
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
19941
|
-
children: /* @__PURE__ */
|
|
19906
|
+
children: /* @__PURE__ */ jsx192(X11, { className: "h-5 w-5" })
|
|
19942
19907
|
}
|
|
19943
19908
|
)
|
|
19944
19909
|
] });
|
|
@@ -19946,11 +19911,11 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
19946
19911
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
19947
19912
|
|
|
19948
19913
|
// src/airbnb-fields/switch/Switch.tsx
|
|
19949
|
-
import * as
|
|
19914
|
+
import * as React82 from "react";
|
|
19950
19915
|
import * as SwitchPrimitives2 from "@radix-ui/react-switch";
|
|
19951
19916
|
import { Check as Check7 } from "lucide-react";
|
|
19952
|
-
import { Fragment as
|
|
19953
|
-
var AirbnbSwitch =
|
|
19917
|
+
import { Fragment as Fragment18, jsx as jsx193, jsxs as jsxs126 } from "react/jsx-runtime";
|
|
19918
|
+
var AirbnbSwitch = React82.forwardRef(
|
|
19954
19919
|
({
|
|
19955
19920
|
className,
|
|
19956
19921
|
value,
|
|
@@ -19964,9 +19929,9 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
19964
19929
|
wrapperClassName,
|
|
19965
19930
|
...props
|
|
19966
19931
|
}, ref) => {
|
|
19967
|
-
const generatedId =
|
|
19932
|
+
const generatedId = React82.useId();
|
|
19968
19933
|
const fieldId = id || generatedId;
|
|
19969
|
-
const switchElement = /* @__PURE__ */
|
|
19934
|
+
const switchElement = /* @__PURE__ */ jsx193(
|
|
19970
19935
|
SwitchPrimitives2.Root,
|
|
19971
19936
|
{
|
|
19972
19937
|
ref,
|
|
@@ -19986,14 +19951,14 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
19986
19951
|
"aria-busy": loading,
|
|
19987
19952
|
"aria-readonly": readOnly,
|
|
19988
19953
|
...props,
|
|
19989
|
-
children: /* @__PURE__ */
|
|
19954
|
+
children: /* @__PURE__ */ jsx193(
|
|
19990
19955
|
SwitchPrimitives2.Thumb,
|
|
19991
19956
|
{
|
|
19992
19957
|
className: cn(
|
|
19993
19958
|
"flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.22)] transition-transform duration-200",
|
|
19994
19959
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
19995
19960
|
),
|
|
19996
|
-
children: /* @__PURE__ */
|
|
19961
|
+
children: /* @__PURE__ */ jsx193(
|
|
19997
19962
|
Check7,
|
|
19998
19963
|
{
|
|
19999
19964
|
"aria-hidden": "true",
|
|
@@ -20008,10 +19973,10 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20008
19973
|
if (!label && !error) {
|
|
20009
19974
|
return switchElement;
|
|
20010
19975
|
}
|
|
20011
|
-
return /* @__PURE__ */ jsxs126(
|
|
19976
|
+
return /* @__PURE__ */ jsxs126(Fragment18, { children: [
|
|
20012
19977
|
/* @__PURE__ */ jsxs126("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
|
|
20013
19978
|
switchElement,
|
|
20014
|
-
label && /* @__PURE__ */
|
|
19979
|
+
label && /* @__PURE__ */ jsx193(
|
|
20015
19980
|
Label,
|
|
20016
19981
|
{
|
|
20017
19982
|
htmlFor: fieldId,
|
|
@@ -20023,7 +19988,7 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20023
19988
|
}
|
|
20024
19989
|
)
|
|
20025
19990
|
] }),
|
|
20026
|
-
error && /* @__PURE__ */
|
|
19991
|
+
error && /* @__PURE__ */ jsx193(ErrorMessage, { disabled, children: error })
|
|
20027
19992
|
] });
|
|
20028
19993
|
}
|
|
20029
19994
|
);
|
|
@@ -20231,7 +20196,6 @@ export {
|
|
|
20231
20196
|
ScrollBar,
|
|
20232
20197
|
SearchButton,
|
|
20233
20198
|
SearchInput,
|
|
20234
|
-
SearchingSelect,
|
|
20235
20199
|
Section,
|
|
20236
20200
|
SectionGroup,
|
|
20237
20201
|
SectionTag,
|