@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.cjs
CHANGED
|
@@ -232,7 +232,6 @@ __export(index_exports, {
|
|
|
232
232
|
ScrollBar: () => ScrollBar,
|
|
233
233
|
SearchButton: () => SearchButton,
|
|
234
234
|
SearchInput: () => SearchInput,
|
|
235
|
-
SearchingSelect: () => SearchingSelect,
|
|
236
235
|
Section: () => Section,
|
|
237
236
|
SectionGroup: () => SectionGroup,
|
|
238
237
|
SectionTag: () => SectionTag,
|
|
@@ -12784,11 +12783,8 @@ var Input = React44.forwardRef(
|
|
|
12784
12783
|
Input.displayName = "Input";
|
|
12785
12784
|
|
|
12786
12785
|
// src/dashboard/phone-input/PhoneInput.tsx
|
|
12787
|
-
var
|
|
12788
|
-
var
|
|
12789
|
-
|
|
12790
|
-
// src/dashboard/searching-select/SearchingSelect.tsx
|
|
12791
|
-
var React53 = __toESM(require("react"), 1);
|
|
12786
|
+
var React50 = __toESM(require("react"), 1);
|
|
12787
|
+
var import_react_i18next34 = require("react-i18next");
|
|
12792
12788
|
|
|
12793
12789
|
// src/dashboard/select/Select.tsx
|
|
12794
12790
|
var React49 = __toESM(require("react"), 1);
|
|
@@ -14433,371 +14429,6 @@ function SelectInternal(props, ref) {
|
|
|
14433
14429
|
}
|
|
14434
14430
|
var Select = React49.forwardRef(SelectInternal);
|
|
14435
14431
|
|
|
14436
|
-
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14437
|
-
var React52 = __toESM(require("react"), 1);
|
|
14438
|
-
|
|
14439
|
-
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14440
|
-
var React51 = __toESM(require("react"), 1);
|
|
14441
|
-
var import_react_i18next34 = require("react-i18next");
|
|
14442
|
-
var import_react_virtual2 = require("@tanstack/react-virtual");
|
|
14443
|
-
|
|
14444
|
-
// src/dashboard/infinite-scroll-select/InfiniteScrollContext.tsx
|
|
14445
|
-
var React50 = __toESM(require("react"), 1);
|
|
14446
|
-
var InfiniteScrollContext = React50.createContext(
|
|
14447
|
-
null
|
|
14448
|
-
);
|
|
14449
|
-
function useInfiniteScrollContext() {
|
|
14450
|
-
const ctx = React50.useContext(InfiniteScrollContext);
|
|
14451
|
-
if (!ctx) {
|
|
14452
|
-
throw new Error(
|
|
14453
|
-
"useInfiniteScrollContext must be used within an InfiniteScrollContext.Provider"
|
|
14454
|
-
);
|
|
14455
|
-
}
|
|
14456
|
-
return ctx;
|
|
14457
|
-
}
|
|
14458
|
-
|
|
14459
|
-
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14460
|
-
var import_jsx_runtime159 = require("react/jsx-runtime");
|
|
14461
|
-
function VirtualMenuList(props) {
|
|
14462
|
-
const {
|
|
14463
|
-
id,
|
|
14464
|
-
labelledBy,
|
|
14465
|
-
describedBy,
|
|
14466
|
-
getOptionId: getOptionId2,
|
|
14467
|
-
options,
|
|
14468
|
-
selectedOptions,
|
|
14469
|
-
isMulti,
|
|
14470
|
-
highlightedIndex,
|
|
14471
|
-
onOptionHover,
|
|
14472
|
-
onOptionClick,
|
|
14473
|
-
disabled,
|
|
14474
|
-
isOptionDisabled,
|
|
14475
|
-
menuClassName,
|
|
14476
|
-
noOptionsMessage,
|
|
14477
|
-
components,
|
|
14478
|
-
inputValue = "",
|
|
14479
|
-
formatOptionLabel,
|
|
14480
|
-
isOptionSelected: isOptionSelectedProp,
|
|
14481
|
-
onMenuScrollToBottom
|
|
14482
|
-
} = props;
|
|
14483
|
-
const {
|
|
14484
|
-
canLoadMore,
|
|
14485
|
-
isLoadingMore,
|
|
14486
|
-
loadMoreItems,
|
|
14487
|
-
loadingMoreText,
|
|
14488
|
-
itemHeight,
|
|
14489
|
-
listHeight,
|
|
14490
|
-
overscan,
|
|
14491
|
-
loadMoreThreshold
|
|
14492
|
-
} = useInfiniteScrollContext();
|
|
14493
|
-
const Option = components?.Option ?? DefaultOption;
|
|
14494
|
-
const { t } = (0, import_react_i18next34.useTranslation)();
|
|
14495
|
-
const scrollRef = React51.useRef(null);
|
|
14496
|
-
const lastLoadMoreOptionsLengthRef = React51.useRef(null);
|
|
14497
|
-
const previousHighlightedIndexRef = React51.useRef(-1);
|
|
14498
|
-
const showLoaderRow = Boolean(canLoadMore || isLoadingMore);
|
|
14499
|
-
const itemCount = options.length + (showLoaderRow ? 1 : 0);
|
|
14500
|
-
const virtualizer = (0, import_react_virtual2.useVirtualizer)({
|
|
14501
|
-
count: itemCount,
|
|
14502
|
-
getScrollElement: () => scrollRef.current,
|
|
14503
|
-
estimateSize: () => itemHeight,
|
|
14504
|
-
overscan
|
|
14505
|
-
});
|
|
14506
|
-
const virtualItems = virtualizer.getVirtualItems();
|
|
14507
|
-
const totalSize = virtualizer.getTotalSize();
|
|
14508
|
-
const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
|
|
14509
|
-
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14510
|
-
React51.useEffect(() => {
|
|
14511
|
-
if (!canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14512
|
-
if (virtualItems.length === 0) return;
|
|
14513
|
-
const lastItem = virtualItems[virtualItems.length - 1];
|
|
14514
|
-
if (!lastItem || lastItem.index < options.length - loadMoreThreshold) return;
|
|
14515
|
-
if (lastLoadMoreOptionsLengthRef.current === options.length) return;
|
|
14516
|
-
lastLoadMoreOptionsLengthRef.current = options.length;
|
|
14517
|
-
loadMoreItems();
|
|
14518
|
-
}, [
|
|
14519
|
-
virtualItems,
|
|
14520
|
-
options.length,
|
|
14521
|
-
canLoadMore,
|
|
14522
|
-
isLoadingMore,
|
|
14523
|
-
loadMoreItems,
|
|
14524
|
-
loadMoreThreshold
|
|
14525
|
-
]);
|
|
14526
|
-
React51.useEffect(() => {
|
|
14527
|
-
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14528
|
-
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14529
|
-
if (highlightedIndex < 0 || !changed) return;
|
|
14530
|
-
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
14531
|
-
}, [highlightedIndex, virtualizer]);
|
|
14532
|
-
const activeOptionId = highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0;
|
|
14533
|
-
const lastOptionIndex = options.length - 1;
|
|
14534
|
-
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14535
|
-
const isOptionSelected2 = (option) => isOptionSelectedProp ? isOptionSelectedProp(option, selectedOptions) : selectedOptions.some((s) => s.value === option.value);
|
|
14536
|
-
const wasAtBottomRef = React51.useRef(false);
|
|
14537
|
-
const handleScroll = React51.useCallback(
|
|
14538
|
-
(event) => {
|
|
14539
|
-
if (!onMenuScrollToBottom) return;
|
|
14540
|
-
const target = event.currentTarget;
|
|
14541
|
-
const atBottom = target.scrollHeight - target.scrollTop - target.clientHeight <= 1;
|
|
14542
|
-
if (atBottom && !wasAtBottomRef.current) {
|
|
14543
|
-
onMenuScrollToBottom(event);
|
|
14544
|
-
}
|
|
14545
|
-
wasAtBottomRef.current = atBottom;
|
|
14546
|
-
},
|
|
14547
|
-
[onMenuScrollToBottom]
|
|
14548
|
-
);
|
|
14549
|
-
if (options.length === 0) {
|
|
14550
|
-
return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
|
|
14551
|
-
"div",
|
|
14552
|
-
{
|
|
14553
|
-
role: "status",
|
|
14554
|
-
"aria-busy": "true",
|
|
14555
|
-
"aria-live": "polite",
|
|
14556
|
-
className: "flex flex-col gap-2",
|
|
14557
|
-
children: [
|
|
14558
|
-
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14559
|
-
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14560
|
-
Skeleton,
|
|
14561
|
-
{
|
|
14562
|
-
className: "h-10 w-full rounded-md",
|
|
14563
|
-
style: { animationDelay: `${index * 120}ms`, opacity: 1 - index * 0.2 }
|
|
14564
|
-
},
|
|
14565
|
-
index
|
|
14566
|
-
))
|
|
14567
|
-
]
|
|
14568
|
-
}
|
|
14569
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "flex min-h-[40px] items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]", children: emptyMessage }) });
|
|
14570
|
-
}
|
|
14571
|
-
return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14572
|
-
"div",
|
|
14573
|
-
{
|
|
14574
|
-
ref: scrollRef,
|
|
14575
|
-
className: cn("overflow-y-auto", menuClassName),
|
|
14576
|
-
style: { height: `${measuredListHeight}px` },
|
|
14577
|
-
onScroll: onMenuScrollToBottom ? handleScroll : void 0,
|
|
14578
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14579
|
-
"div",
|
|
14580
|
-
{
|
|
14581
|
-
id,
|
|
14582
|
-
role: "listbox",
|
|
14583
|
-
tabIndex: -1,
|
|
14584
|
-
"aria-labelledby": labelledBy,
|
|
14585
|
-
"aria-describedby": describedBy,
|
|
14586
|
-
"aria-activedescendant": activeOptionId,
|
|
14587
|
-
className: "relative w-full",
|
|
14588
|
-
style: { height: `${totalSize}px` },
|
|
14589
|
-
children: virtualItems.map((virtualItem) => {
|
|
14590
|
-
const isLoaderRow = virtualItem.index >= options.length;
|
|
14591
|
-
const option = options[virtualItem.index];
|
|
14592
|
-
const isSelected = !isLoaderRow && option ? isOptionSelected2(option) : false;
|
|
14593
|
-
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
14594
|
-
const optionDisabledFlag = Boolean(
|
|
14595
|
-
disabled || option?.isDisabled || option && isOptionDisabled?.(option)
|
|
14596
|
-
);
|
|
14597
|
-
const isLastOption = !isLoaderRow && virtualItem.index === lastOptionIndex && !canLoadMore;
|
|
14598
|
-
return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14599
|
-
"div",
|
|
14600
|
-
{
|
|
14601
|
-
"data-index": virtualItem.index,
|
|
14602
|
-
className: "absolute left-0 top-0 w-full h-full",
|
|
14603
|
-
style: {
|
|
14604
|
-
height: `${virtualItem.size}px`,
|
|
14605
|
-
transform: `translateY(${virtualItem.start}px)`
|
|
14606
|
-
},
|
|
14607
|
-
children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
|
|
14608
|
-
"div",
|
|
14609
|
-
{
|
|
14610
|
-
role: "status",
|
|
14611
|
-
"aria-busy": "true",
|
|
14612
|
-
"aria-live": "polite",
|
|
14613
|
-
className: "flex h-full items-center justify-center",
|
|
14614
|
-
children: [
|
|
14615
|
-
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14616
|
-
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14617
|
-
ThreeDotsLoader,
|
|
14618
|
-
{
|
|
14619
|
-
height: 24,
|
|
14620
|
-
width: 24,
|
|
14621
|
-
color: "var(--chekin-color-brand-blue)"
|
|
14622
|
-
}
|
|
14623
|
-
)
|
|
14624
|
-
]
|
|
14625
|
-
}
|
|
14626
|
-
) : option ? /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14627
|
-
Option,
|
|
14628
|
-
{
|
|
14629
|
-
id: getOptionId2(virtualItem.index),
|
|
14630
|
-
option,
|
|
14631
|
-
index: virtualItem.index,
|
|
14632
|
-
isSelected,
|
|
14633
|
-
isHighlighted,
|
|
14634
|
-
isDisabled: optionDisabledFlag,
|
|
14635
|
-
isLast: isLastOption,
|
|
14636
|
-
isMulti: Boolean(isMulti),
|
|
14637
|
-
onClick: onOptionClick,
|
|
14638
|
-
onHover: onOptionHover,
|
|
14639
|
-
innerRef: () => void 0,
|
|
14640
|
-
inputValue,
|
|
14641
|
-
selectedOptions,
|
|
14642
|
-
formatOptionLabel
|
|
14643
|
-
}
|
|
14644
|
-
) : null
|
|
14645
|
-
},
|
|
14646
|
-
virtualItem.key
|
|
14647
|
-
);
|
|
14648
|
-
})
|
|
14649
|
-
}
|
|
14650
|
-
)
|
|
14651
|
-
}
|
|
14652
|
-
) });
|
|
14653
|
-
}
|
|
14654
|
-
|
|
14655
|
-
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14656
|
-
var import_jsx_runtime160 = require("react/jsx-runtime");
|
|
14657
|
-
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14658
|
-
var DEFAULT_LIST_HEIGHT = 322;
|
|
14659
|
-
var DEFAULT_OVERSCAN = 5;
|
|
14660
|
-
var DEFAULT_LOAD_MORE_THRESHOLD = 5;
|
|
14661
|
-
var passthroughFilter = () => true;
|
|
14662
|
-
function InfiniteScrollSelectInternal(props, ref) {
|
|
14663
|
-
const {
|
|
14664
|
-
options: rawOptions = [],
|
|
14665
|
-
canLoadMore,
|
|
14666
|
-
isLoadingMore,
|
|
14667
|
-
loadMoreItems,
|
|
14668
|
-
loadingMoreText,
|
|
14669
|
-
onSearchChange,
|
|
14670
|
-
itemHeight = DEFAULT_ITEM_HEIGHT,
|
|
14671
|
-
listHeight = DEFAULT_LIST_HEIGHT,
|
|
14672
|
-
overscan = DEFAULT_OVERSCAN,
|
|
14673
|
-
loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD,
|
|
14674
|
-
getFullSearchOption,
|
|
14675
|
-
filterOption: userFilterOption,
|
|
14676
|
-
components: userComponents,
|
|
14677
|
-
onInputChange: userOnInputChange,
|
|
14678
|
-
...rest
|
|
14679
|
-
} = props;
|
|
14680
|
-
const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
|
|
14681
|
-
const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
|
|
14682
|
-
const [inputValue, setInputValue] = React52.useState("");
|
|
14683
|
-
const filteredOptions = React52.useMemo(() => {
|
|
14684
|
-
const trimmed = inputValue.trim();
|
|
14685
|
-
const valueLabel = (() => {
|
|
14686
|
-
if (props.isMulti) return "";
|
|
14687
|
-
const single = props.value;
|
|
14688
|
-
if (!single) return "";
|
|
14689
|
-
return rest.getValueLabel?.(single) ?? String(single.label);
|
|
14690
|
-
})();
|
|
14691
|
-
const isFiltering = trimmed.length > 0 && trimmed.toLowerCase() !== valueLabel.toLowerCase();
|
|
14692
|
-
let list = rawOptions;
|
|
14693
|
-
if (isFiltering) {
|
|
14694
|
-
list = list.filter((option) => filterOption(option, trimmed));
|
|
14695
|
-
}
|
|
14696
|
-
if (getFullSearchOption && trimmed) {
|
|
14697
|
-
const synthetic = getFullSearchOption(trimmed);
|
|
14698
|
-
if (synthetic) list = [synthetic, ...list];
|
|
14699
|
-
}
|
|
14700
|
-
return list;
|
|
14701
|
-
}, [rawOptions, inputValue, filterOption, getFullSearchOption, props, rest]);
|
|
14702
|
-
const contextValue = React52.useMemo(
|
|
14703
|
-
() => ({
|
|
14704
|
-
canLoadMore,
|
|
14705
|
-
isLoadingMore,
|
|
14706
|
-
loadMoreItems,
|
|
14707
|
-
loadingMoreText,
|
|
14708
|
-
itemHeight,
|
|
14709
|
-
listHeight,
|
|
14710
|
-
overscan,
|
|
14711
|
-
loadMoreThreshold
|
|
14712
|
-
}),
|
|
14713
|
-
[
|
|
14714
|
-
canLoadMore,
|
|
14715
|
-
isLoadingMore,
|
|
14716
|
-
loadMoreItems,
|
|
14717
|
-
loadingMoreText,
|
|
14718
|
-
itemHeight,
|
|
14719
|
-
listHeight,
|
|
14720
|
-
overscan,
|
|
14721
|
-
loadMoreThreshold
|
|
14722
|
-
]
|
|
14723
|
-
);
|
|
14724
|
-
const components = React52.useMemo(
|
|
14725
|
-
() => ({ ...userComponents, MenuList: VirtualMenuList }),
|
|
14726
|
-
[userComponents]
|
|
14727
|
-
);
|
|
14728
|
-
const handleInputChange = React52.useCallback(
|
|
14729
|
-
(value) => {
|
|
14730
|
-
setInputValue(value);
|
|
14731
|
-
onSearchChange?.(value);
|
|
14732
|
-
userOnInputChange?.(value);
|
|
14733
|
-
},
|
|
14734
|
-
[onSearchChange, userOnInputChange]
|
|
14735
|
-
);
|
|
14736
|
-
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(InfiniteScrollContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
|
|
14737
|
-
Select,
|
|
14738
|
-
{
|
|
14739
|
-
ref,
|
|
14740
|
-
...rest,
|
|
14741
|
-
isMulti: props.isMulti,
|
|
14742
|
-
options: filteredOptions,
|
|
14743
|
-
filterOption: passthroughFilter,
|
|
14744
|
-
components,
|
|
14745
|
-
onInputChange: handleInputChange
|
|
14746
|
-
}
|
|
14747
|
-
) });
|
|
14748
|
-
}
|
|
14749
|
-
var InfiniteScrollSelect = React52.forwardRef(
|
|
14750
|
-
InfiniteScrollSelectInternal
|
|
14751
|
-
);
|
|
14752
|
-
|
|
14753
|
-
// src/dashboard/searching-select/SearchingSelect.tsx
|
|
14754
|
-
var import_jsx_runtime161 = require("react/jsx-runtime");
|
|
14755
|
-
function makeTriggerSlot(render) {
|
|
14756
|
-
function CustomTrigger(props) {
|
|
14757
|
-
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(import_jsx_runtime161.Fragment, { children: render(props.isOpen, props.onContainerClick) });
|
|
14758
|
-
}
|
|
14759
|
-
return CustomTrigger;
|
|
14760
|
-
}
|
|
14761
|
-
function hasPaginationProps(props) {
|
|
14762
|
-
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
|
|
14763
|
-
}
|
|
14764
|
-
function SearchingSelectInternal(props, ref) {
|
|
14765
|
-
const { trigger, components: userComponents, searchable = true, ...rest } = props;
|
|
14766
|
-
const Control = React53.useMemo(() => {
|
|
14767
|
-
if (trigger) return makeTriggerSlot(trigger);
|
|
14768
|
-
return StaticControl;
|
|
14769
|
-
}, [trigger]);
|
|
14770
|
-
const components = React53.useMemo(
|
|
14771
|
-
() => ({ ...userComponents, Control }),
|
|
14772
|
-
[userComponents, Control]
|
|
14773
|
-
);
|
|
14774
|
-
if (hasPaginationProps(
|
|
14775
|
-
rest
|
|
14776
|
-
)) {
|
|
14777
|
-
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
|
|
14778
|
-
InfiniteScrollSelect,
|
|
14779
|
-
{
|
|
14780
|
-
ref,
|
|
14781
|
-
...rest,
|
|
14782
|
-
components,
|
|
14783
|
-
searchPosition: searchable ? "dropdown" : "trigger"
|
|
14784
|
-
}
|
|
14785
|
-
);
|
|
14786
|
-
}
|
|
14787
|
-
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
|
|
14788
|
-
Select,
|
|
14789
|
-
{
|
|
14790
|
-
ref,
|
|
14791
|
-
...rest,
|
|
14792
|
-
components,
|
|
14793
|
-
searchPosition: searchable ? "dropdown" : "trigger"
|
|
14794
|
-
}
|
|
14795
|
-
);
|
|
14796
|
-
}
|
|
14797
|
-
var SearchingSelect = React53.forwardRef(
|
|
14798
|
-
SearchingSelectInternal
|
|
14799
|
-
);
|
|
14800
|
-
|
|
14801
14432
|
// src/dashboard/phone-input/utils.ts
|
|
14802
14433
|
var PREFIX_REGEX = /^\+/;
|
|
14803
14434
|
function clearPhoneNumber(value) {
|
|
@@ -14842,9 +14473,9 @@ function formatPhoneCodeOptionLabel(option) {
|
|
|
14842
14473
|
}
|
|
14843
14474
|
|
|
14844
14475
|
// src/dashboard/phone-input/PhoneInput.tsx
|
|
14845
|
-
var
|
|
14476
|
+
var import_jsx_runtime159 = require("react/jsx-runtime");
|
|
14846
14477
|
var EMPTY_VALUE = { code: "", number: "" };
|
|
14847
|
-
var PhoneInput =
|
|
14478
|
+
var PhoneInput = React50.forwardRef(
|
|
14848
14479
|
function PhoneInput2({
|
|
14849
14480
|
options,
|
|
14850
14481
|
value,
|
|
@@ -14868,20 +14499,22 @@ var PhoneInput = React54.forwardRef(
|
|
|
14868
14499
|
invalid,
|
|
14869
14500
|
className,
|
|
14870
14501
|
autoDetectCode = true,
|
|
14871
|
-
searchable = true
|
|
14502
|
+
searchable = true,
|
|
14503
|
+
defaultCode
|
|
14872
14504
|
}, ref) {
|
|
14873
|
-
const { t } = (0,
|
|
14505
|
+
const { t } = (0, import_react_i18next34.useTranslation)();
|
|
14874
14506
|
const safeValue = value ?? EMPTY_VALUE;
|
|
14507
|
+
const effectiveCode = safeValue.code || defaultCode || "";
|
|
14875
14508
|
const resolvedLabel = label ?? "";
|
|
14876
14509
|
const resolvedPrefixLabel = prefixLabel ?? t("prefix");
|
|
14877
14510
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
14878
14511
|
const isCodeBlocked = isBlocked || Boolean(readOnly) || Boolean(codeReadOnly);
|
|
14879
14512
|
const hasExternalError = Boolean(error);
|
|
14880
|
-
const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !
|
|
14513
|
+
const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !effectiveCode;
|
|
14881
14514
|
const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
|
|
14882
14515
|
const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
|
|
14883
|
-
const combinedValue =
|
|
14884
|
-
const codeOptions =
|
|
14516
|
+
const combinedValue = effectiveCode || safeValue.number ? `${effectiveCode}${safeValue.number}` : "";
|
|
14517
|
+
const codeOptions = React50.useMemo(
|
|
14885
14518
|
() => options.map((option) => ({
|
|
14886
14519
|
value: option.value,
|
|
14887
14520
|
label: formatPhoneCodeOptionLabel(option),
|
|
@@ -14890,11 +14523,11 @@ var PhoneInput = React54.forwardRef(
|
|
|
14890
14523
|
})),
|
|
14891
14524
|
[options]
|
|
14892
14525
|
);
|
|
14893
|
-
const selectedCodeOption =
|
|
14894
|
-
() => codeOptions.find((option) => option.value ===
|
|
14895
|
-
[codeOptions,
|
|
14526
|
+
const selectedCodeOption = React50.useMemo(
|
|
14527
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
14528
|
+
[codeOptions, effectiveCode]
|
|
14896
14529
|
);
|
|
14897
|
-
const parsePhoneValue =
|
|
14530
|
+
const parsePhoneValue = React50.useMemo(
|
|
14898
14531
|
() => parsePhoneValueWithOptions(options),
|
|
14899
14532
|
[options]
|
|
14900
14533
|
);
|
|
@@ -14909,7 +14542,7 @@ var PhoneInput = React54.forwardRef(
|
|
|
14909
14542
|
if (readOnly || disabled) return;
|
|
14910
14543
|
const rawValue = event.target.value;
|
|
14911
14544
|
if (!autoDetectCode) {
|
|
14912
|
-
emitChange({ code:
|
|
14545
|
+
emitChange({ code: effectiveCode, number: clearPhoneNumber(rawValue) });
|
|
14913
14546
|
return;
|
|
14914
14547
|
}
|
|
14915
14548
|
const parsed = parsePhoneValue(rawValue);
|
|
@@ -14918,9 +14551,9 @@ var PhoneInput = React54.forwardRef(
|
|
|
14918
14551
|
emitChange({ code: parsed.code, number: cleanedNumber });
|
|
14919
14552
|
return;
|
|
14920
14553
|
}
|
|
14921
|
-
emitChange({ code:
|
|
14554
|
+
emitChange({ code: effectiveCode, number: cleanedNumber });
|
|
14922
14555
|
};
|
|
14923
|
-
return /* @__PURE__ */ (0,
|
|
14556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
|
|
14924
14557
|
"div",
|
|
14925
14558
|
{
|
|
14926
14559
|
className: cn(
|
|
@@ -14930,17 +14563,17 @@ var PhoneInput = React54.forwardRef(
|
|
|
14930
14563
|
className
|
|
14931
14564
|
),
|
|
14932
14565
|
children: [
|
|
14933
|
-
name && /* @__PURE__ */ (0,
|
|
14934
|
-
codeName && /* @__PURE__ */ (0,
|
|
14566
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
14567
|
+
codeName && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14935
14568
|
"input",
|
|
14936
14569
|
{
|
|
14937
14570
|
type: "hidden",
|
|
14938
14571
|
name: codeName,
|
|
14939
|
-
value:
|
|
14572
|
+
value: effectiveCode,
|
|
14940
14573
|
disabled
|
|
14941
14574
|
}
|
|
14942
14575
|
),
|
|
14943
|
-
numberName && /* @__PURE__ */ (0,
|
|
14576
|
+
numberName && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14944
14577
|
"input",
|
|
14945
14578
|
{
|
|
14946
14579
|
type: "hidden",
|
|
@@ -14949,10 +14582,10 @@ var PhoneInput = React54.forwardRef(
|
|
|
14949
14582
|
disabled
|
|
14950
14583
|
}
|
|
14951
14584
|
),
|
|
14952
|
-
topLabel && /* @__PURE__ */ (0,
|
|
14953
|
-
/* @__PURE__ */ (0,
|
|
14954
|
-
/* @__PURE__ */ (0,
|
|
14955
|
-
|
|
14585
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("label", { className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: topLabel }),
|
|
14586
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2", children: [
|
|
14587
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14588
|
+
Select,
|
|
14956
14589
|
{
|
|
14957
14590
|
options: codeOptions,
|
|
14958
14591
|
value: selectedCodeOption,
|
|
@@ -14963,13 +14596,13 @@ var PhoneInput = React54.forwardRef(
|
|
|
14963
14596
|
loading,
|
|
14964
14597
|
invalid: hasInvalidState,
|
|
14965
14598
|
hideErrorMessage: true,
|
|
14966
|
-
searchable,
|
|
14599
|
+
searchPosition: searchable ? "dropdown" : "trigger",
|
|
14967
14600
|
getValueLabel: (option) => option.value,
|
|
14968
14601
|
className: "!max-w-none",
|
|
14969
14602
|
dropdownClassName: "right-auto w-[280px]"
|
|
14970
14603
|
}
|
|
14971
14604
|
),
|
|
14972
|
-
/* @__PURE__ */ (0,
|
|
14605
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14973
14606
|
Input,
|
|
14974
14607
|
{
|
|
14975
14608
|
ref,
|
|
@@ -14992,8 +14625,8 @@ var PhoneInput = React54.forwardRef(
|
|
|
14992
14625
|
}
|
|
14993
14626
|
)
|
|
14994
14627
|
] }),
|
|
14995
|
-
!errorMessage && optional && /* @__PURE__ */ (0,
|
|
14996
|
-
errorMessage && /* @__PURE__ */ (0,
|
|
14628
|
+
!errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
14629
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14997
14630
|
FieldErrorMessage,
|
|
14998
14631
|
{
|
|
14999
14632
|
message: errorMessage,
|
|
@@ -15009,40 +14642,369 @@ var PhoneInput = React54.forwardRef(
|
|
|
15009
14642
|
PhoneInput.displayName = "PhoneInput";
|
|
15010
14643
|
|
|
15011
14644
|
// src/dashboard/creatable-select/CreatableSelect.tsx
|
|
14645
|
+
var React51 = __toESM(require("react"), 1);
|
|
14646
|
+
var import_jsx_runtime160 = require("react/jsx-runtime");
|
|
14647
|
+
var CreatableSelect = React51.forwardRef(function CreatableSelect2(props, ref) {
|
|
14648
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Select, { ref, ...props, isCreatable: true });
|
|
14649
|
+
});
|
|
14650
|
+
|
|
14651
|
+
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14652
|
+
var React52 = __toESM(require("react"), 1);
|
|
14653
|
+
var import_jsx_runtime161 = require("react/jsx-runtime");
|
|
14654
|
+
var MultiSelect = React52.forwardRef(function MultiSelect2(props, ref) {
|
|
14655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Select, { ref, ...props, isMulti: true });
|
|
14656
|
+
});
|
|
14657
|
+
|
|
14658
|
+
// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
|
|
14659
|
+
var React53 = __toESM(require("react"), 1);
|
|
14660
|
+
var import_jsx_runtime162 = require("react/jsx-runtime");
|
|
14661
|
+
var CreatableMultiSelect = React53.forwardRef(function CreatableMultiSelect2(props, ref) {
|
|
14662
|
+
return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
14663
|
+
});
|
|
14664
|
+
|
|
14665
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14666
|
+
var React56 = __toESM(require("react"), 1);
|
|
14667
|
+
|
|
14668
|
+
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
15012
14669
|
var React55 = __toESM(require("react"), 1);
|
|
14670
|
+
var import_react_i18next35 = require("react-i18next");
|
|
14671
|
+
var import_react_virtual2 = require("@tanstack/react-virtual");
|
|
14672
|
+
|
|
14673
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollContext.tsx
|
|
14674
|
+
var React54 = __toESM(require("react"), 1);
|
|
14675
|
+
var InfiniteScrollContext = React54.createContext(
|
|
14676
|
+
null
|
|
14677
|
+
);
|
|
14678
|
+
function useInfiniteScrollContext() {
|
|
14679
|
+
const ctx = React54.useContext(InfiniteScrollContext);
|
|
14680
|
+
if (!ctx) {
|
|
14681
|
+
throw new Error(
|
|
14682
|
+
"useInfiniteScrollContext must be used within an InfiniteScrollContext.Provider"
|
|
14683
|
+
);
|
|
14684
|
+
}
|
|
14685
|
+
return ctx;
|
|
14686
|
+
}
|
|
14687
|
+
|
|
14688
|
+
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
15013
14689
|
var import_jsx_runtime163 = require("react/jsx-runtime");
|
|
15014
|
-
|
|
15015
|
-
|
|
15016
|
-
|
|
14690
|
+
function VirtualMenuList(props) {
|
|
14691
|
+
const {
|
|
14692
|
+
id,
|
|
14693
|
+
labelledBy,
|
|
14694
|
+
describedBy,
|
|
14695
|
+
getOptionId: getOptionId2,
|
|
14696
|
+
options,
|
|
14697
|
+
selectedOptions,
|
|
14698
|
+
isMulti,
|
|
14699
|
+
highlightedIndex,
|
|
14700
|
+
onOptionHover,
|
|
14701
|
+
onOptionClick,
|
|
14702
|
+
disabled,
|
|
14703
|
+
isOptionDisabled,
|
|
14704
|
+
menuClassName,
|
|
14705
|
+
noOptionsMessage,
|
|
14706
|
+
components,
|
|
14707
|
+
inputValue = "",
|
|
14708
|
+
formatOptionLabel,
|
|
14709
|
+
isOptionSelected: isOptionSelectedProp,
|
|
14710
|
+
onMenuScrollToBottom
|
|
14711
|
+
} = props;
|
|
14712
|
+
const {
|
|
14713
|
+
canLoadMore,
|
|
14714
|
+
isLoadingMore,
|
|
14715
|
+
loadMoreItems,
|
|
14716
|
+
loadingMoreText,
|
|
14717
|
+
itemHeight,
|
|
14718
|
+
listHeight,
|
|
14719
|
+
overscan,
|
|
14720
|
+
loadMoreThreshold
|
|
14721
|
+
} = useInfiniteScrollContext();
|
|
14722
|
+
const Option = components?.Option ?? DefaultOption;
|
|
14723
|
+
const { t } = (0, import_react_i18next35.useTranslation)();
|
|
14724
|
+
const scrollRef = React55.useRef(null);
|
|
14725
|
+
const lastLoadMoreOptionsLengthRef = React55.useRef(null);
|
|
14726
|
+
const previousHighlightedIndexRef = React55.useRef(-1);
|
|
14727
|
+
const showLoaderRow = Boolean(canLoadMore || isLoadingMore);
|
|
14728
|
+
const itemCount = options.length + (showLoaderRow ? 1 : 0);
|
|
14729
|
+
const virtualizer = (0, import_react_virtual2.useVirtualizer)({
|
|
14730
|
+
count: itemCount,
|
|
14731
|
+
getScrollElement: () => scrollRef.current,
|
|
14732
|
+
estimateSize: () => itemHeight,
|
|
14733
|
+
overscan
|
|
14734
|
+
});
|
|
14735
|
+
const virtualItems = virtualizer.getVirtualItems();
|
|
14736
|
+
const totalSize = virtualizer.getTotalSize();
|
|
14737
|
+
const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
|
|
14738
|
+
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14739
|
+
React55.useEffect(() => {
|
|
14740
|
+
if (!canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14741
|
+
if (virtualItems.length === 0) return;
|
|
14742
|
+
const lastItem = virtualItems[virtualItems.length - 1];
|
|
14743
|
+
if (!lastItem || lastItem.index < options.length - loadMoreThreshold) return;
|
|
14744
|
+
if (lastLoadMoreOptionsLengthRef.current === options.length) return;
|
|
14745
|
+
lastLoadMoreOptionsLengthRef.current = options.length;
|
|
14746
|
+
loadMoreItems();
|
|
14747
|
+
}, [
|
|
14748
|
+
virtualItems,
|
|
14749
|
+
options.length,
|
|
14750
|
+
canLoadMore,
|
|
14751
|
+
isLoadingMore,
|
|
14752
|
+
loadMoreItems,
|
|
14753
|
+
loadMoreThreshold
|
|
14754
|
+
]);
|
|
14755
|
+
React55.useEffect(() => {
|
|
14756
|
+
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14757
|
+
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14758
|
+
if (highlightedIndex < 0 || !changed) return;
|
|
14759
|
+
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
14760
|
+
}, [highlightedIndex, virtualizer]);
|
|
14761
|
+
const activeOptionId = highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0;
|
|
14762
|
+
const lastOptionIndex = options.length - 1;
|
|
14763
|
+
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14764
|
+
const isOptionSelected2 = (option) => isOptionSelectedProp ? isOptionSelectedProp(option, selectedOptions) : selectedOptions.some((s) => s.value === option.value);
|
|
14765
|
+
const wasAtBottomRef = React55.useRef(false);
|
|
14766
|
+
const handleScroll = React55.useCallback(
|
|
14767
|
+
(event) => {
|
|
14768
|
+
if (!onMenuScrollToBottom) return;
|
|
14769
|
+
const target = event.currentTarget;
|
|
14770
|
+
const atBottom = target.scrollHeight - target.scrollTop - target.clientHeight <= 1;
|
|
14771
|
+
if (atBottom && !wasAtBottomRef.current) {
|
|
14772
|
+
onMenuScrollToBottom(event);
|
|
14773
|
+
}
|
|
14774
|
+
wasAtBottomRef.current = atBottom;
|
|
14775
|
+
},
|
|
14776
|
+
[onMenuScrollToBottom]
|
|
14777
|
+
);
|
|
14778
|
+
if (options.length === 0) {
|
|
14779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
|
|
14780
|
+
"div",
|
|
14781
|
+
{
|
|
14782
|
+
role: "status",
|
|
14783
|
+
"aria-busy": "true",
|
|
14784
|
+
"aria-live": "polite",
|
|
14785
|
+
className: "flex flex-col gap-2",
|
|
14786
|
+
children: [
|
|
14787
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14788
|
+
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14789
|
+
Skeleton,
|
|
14790
|
+
{
|
|
14791
|
+
className: "h-10 w-full rounded-md",
|
|
14792
|
+
style: { animationDelay: `${index * 120}ms`, opacity: 1 - index * 0.2 }
|
|
14793
|
+
},
|
|
14794
|
+
index
|
|
14795
|
+
))
|
|
14796
|
+
]
|
|
14797
|
+
}
|
|
14798
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "flex min-h-[40px] items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]", children: emptyMessage }) });
|
|
14799
|
+
}
|
|
14800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14801
|
+
"div",
|
|
14802
|
+
{
|
|
14803
|
+
ref: scrollRef,
|
|
14804
|
+
className: cn("overflow-y-auto", menuClassName),
|
|
14805
|
+
style: { height: `${measuredListHeight}px` },
|
|
14806
|
+
onScroll: onMenuScrollToBottom ? handleScroll : void 0,
|
|
14807
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14808
|
+
"div",
|
|
14809
|
+
{
|
|
14810
|
+
id,
|
|
14811
|
+
role: "listbox",
|
|
14812
|
+
tabIndex: -1,
|
|
14813
|
+
"aria-labelledby": labelledBy,
|
|
14814
|
+
"aria-describedby": describedBy,
|
|
14815
|
+
"aria-activedescendant": activeOptionId,
|
|
14816
|
+
className: "relative w-full",
|
|
14817
|
+
style: { height: `${totalSize}px` },
|
|
14818
|
+
children: virtualItems.map((virtualItem) => {
|
|
14819
|
+
const isLoaderRow = virtualItem.index >= options.length;
|
|
14820
|
+
const option = options[virtualItem.index];
|
|
14821
|
+
const isSelected = !isLoaderRow && option ? isOptionSelected2(option) : false;
|
|
14822
|
+
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
14823
|
+
const optionDisabledFlag = Boolean(
|
|
14824
|
+
disabled || option?.isDisabled || option && isOptionDisabled?.(option)
|
|
14825
|
+
);
|
|
14826
|
+
const isLastOption = !isLoaderRow && virtualItem.index === lastOptionIndex && !canLoadMore;
|
|
14827
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14828
|
+
"div",
|
|
14829
|
+
{
|
|
14830
|
+
"data-index": virtualItem.index,
|
|
14831
|
+
className: "absolute left-0 top-0 w-full h-full",
|
|
14832
|
+
style: {
|
|
14833
|
+
height: `${virtualItem.size}px`,
|
|
14834
|
+
transform: `translateY(${virtualItem.start}px)`
|
|
14835
|
+
},
|
|
14836
|
+
children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
|
|
14837
|
+
"div",
|
|
14838
|
+
{
|
|
14839
|
+
role: "status",
|
|
14840
|
+
"aria-busy": "true",
|
|
14841
|
+
"aria-live": "polite",
|
|
14842
|
+
className: "flex h-full items-center justify-center",
|
|
14843
|
+
children: [
|
|
14844
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14845
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14846
|
+
ThreeDotsLoader,
|
|
14847
|
+
{
|
|
14848
|
+
height: 24,
|
|
14849
|
+
width: 24,
|
|
14850
|
+
color: "var(--chekin-color-brand-blue)"
|
|
14851
|
+
}
|
|
14852
|
+
)
|
|
14853
|
+
]
|
|
14854
|
+
}
|
|
14855
|
+
) : option ? /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14856
|
+
Option,
|
|
14857
|
+
{
|
|
14858
|
+
id: getOptionId2(virtualItem.index),
|
|
14859
|
+
option,
|
|
14860
|
+
index: virtualItem.index,
|
|
14861
|
+
isSelected,
|
|
14862
|
+
isHighlighted,
|
|
14863
|
+
isDisabled: optionDisabledFlag,
|
|
14864
|
+
isLast: isLastOption,
|
|
14865
|
+
isMulti: Boolean(isMulti),
|
|
14866
|
+
onClick: onOptionClick,
|
|
14867
|
+
onHover: onOptionHover,
|
|
14868
|
+
innerRef: () => void 0,
|
|
14869
|
+
inputValue,
|
|
14870
|
+
selectedOptions,
|
|
14871
|
+
formatOptionLabel
|
|
14872
|
+
}
|
|
14873
|
+
) : null
|
|
14874
|
+
},
|
|
14875
|
+
virtualItem.key
|
|
14876
|
+
);
|
|
14877
|
+
})
|
|
14878
|
+
}
|
|
14879
|
+
)
|
|
14880
|
+
}
|
|
14881
|
+
) });
|
|
14882
|
+
}
|
|
15017
14883
|
|
|
15018
|
-
// src/dashboard/
|
|
15019
|
-
var React56 = __toESM(require("react"), 1);
|
|
14884
|
+
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
15020
14885
|
var import_jsx_runtime164 = require("react/jsx-runtime");
|
|
15021
|
-
var
|
|
15022
|
-
|
|
15023
|
-
|
|
14886
|
+
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14887
|
+
var DEFAULT_LIST_HEIGHT = 322;
|
|
14888
|
+
var DEFAULT_OVERSCAN = 5;
|
|
14889
|
+
var DEFAULT_LOAD_MORE_THRESHOLD = 5;
|
|
14890
|
+
var passthroughFilter = () => true;
|
|
14891
|
+
function InfiniteScrollSelectInternal(props, ref) {
|
|
14892
|
+
const {
|
|
14893
|
+
options: rawOptions = [],
|
|
14894
|
+
canLoadMore,
|
|
14895
|
+
isLoadingMore,
|
|
14896
|
+
loadMoreItems,
|
|
14897
|
+
loadingMoreText,
|
|
14898
|
+
onSearchChange,
|
|
14899
|
+
itemHeight = DEFAULT_ITEM_HEIGHT,
|
|
14900
|
+
listHeight = DEFAULT_LIST_HEIGHT,
|
|
14901
|
+
overscan = DEFAULT_OVERSCAN,
|
|
14902
|
+
loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD,
|
|
14903
|
+
getFullSearchOption,
|
|
14904
|
+
filterOption: userFilterOption,
|
|
14905
|
+
components: userComponents,
|
|
14906
|
+
onInputChange: userOnInputChange,
|
|
14907
|
+
isMulti = false,
|
|
14908
|
+
...rest
|
|
14909
|
+
} = props;
|
|
14910
|
+
const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
|
|
14911
|
+
const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
|
|
14912
|
+
const [inputValue, setInputValue] = React56.useState("");
|
|
14913
|
+
const filteredOptions = React56.useMemo(() => {
|
|
14914
|
+
const trimmed = inputValue.trim();
|
|
14915
|
+
const valueLabel = (() => {
|
|
14916
|
+
if (isMulti) return "";
|
|
14917
|
+
const single = rest.value;
|
|
14918
|
+
if (!single) return "";
|
|
14919
|
+
return rest.getValueLabel?.(single) ?? String(single.label);
|
|
14920
|
+
})();
|
|
14921
|
+
const isFiltering = trimmed.length > 0 && trimmed.toLowerCase() !== valueLabel.toLowerCase();
|
|
14922
|
+
let list = rawOptions;
|
|
14923
|
+
if (isFiltering) {
|
|
14924
|
+
list = list.filter((option) => filterOption(option, trimmed));
|
|
14925
|
+
}
|
|
14926
|
+
if (getFullSearchOption && trimmed) {
|
|
14927
|
+
const synthetic = getFullSearchOption(trimmed);
|
|
14928
|
+
if (synthetic) list = [synthetic, ...list];
|
|
14929
|
+
}
|
|
14930
|
+
return list;
|
|
14931
|
+
}, [rawOptions, inputValue, filterOption, getFullSearchOption, isMulti, rest]);
|
|
14932
|
+
const contextValue = React56.useMemo(
|
|
14933
|
+
() => ({
|
|
14934
|
+
canLoadMore,
|
|
14935
|
+
isLoadingMore,
|
|
14936
|
+
loadMoreItems,
|
|
14937
|
+
loadingMoreText,
|
|
14938
|
+
itemHeight,
|
|
14939
|
+
listHeight,
|
|
14940
|
+
overscan,
|
|
14941
|
+
loadMoreThreshold
|
|
14942
|
+
}),
|
|
14943
|
+
[
|
|
14944
|
+
canLoadMore,
|
|
14945
|
+
isLoadingMore,
|
|
14946
|
+
loadMoreItems,
|
|
14947
|
+
loadingMoreText,
|
|
14948
|
+
itemHeight,
|
|
14949
|
+
listHeight,
|
|
14950
|
+
overscan,
|
|
14951
|
+
loadMoreThreshold
|
|
14952
|
+
]
|
|
14953
|
+
);
|
|
14954
|
+
const components = React56.useMemo(
|
|
14955
|
+
() => ({ ...userComponents, MenuList: VirtualMenuList }),
|
|
14956
|
+
[userComponents]
|
|
14957
|
+
);
|
|
14958
|
+
const handleInputChange = React56.useCallback(
|
|
14959
|
+
(value) => {
|
|
14960
|
+
setInputValue(value);
|
|
14961
|
+
onSearchChange?.(value);
|
|
14962
|
+
userOnInputChange?.(value);
|
|
14963
|
+
},
|
|
14964
|
+
[onSearchChange, userOnInputChange]
|
|
14965
|
+
);
|
|
14966
|
+
const selectExtras = {
|
|
14967
|
+
options: filteredOptions,
|
|
14968
|
+
filterOption: passthroughFilter,
|
|
14969
|
+
components,
|
|
14970
|
+
onInputChange: handleInputChange
|
|
14971
|
+
};
|
|
14972
|
+
return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(InfiniteScrollContext.Provider, { value: contextValue, children: isMulti ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
14973
|
+
Select,
|
|
14974
|
+
{
|
|
14975
|
+
ref,
|
|
14976
|
+
...rest,
|
|
14977
|
+
...selectExtras,
|
|
14978
|
+
isMulti: true
|
|
14979
|
+
}
|
|
14980
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
14981
|
+
Select,
|
|
14982
|
+
{
|
|
14983
|
+
ref,
|
|
14984
|
+
...rest,
|
|
14985
|
+
...selectExtras,
|
|
14986
|
+
isMulti: false
|
|
14987
|
+
}
|
|
14988
|
+
) });
|
|
14989
|
+
}
|
|
14990
|
+
var InfiniteScrollSelect = React56.forwardRef(
|
|
14991
|
+
InfiniteScrollSelectInternal
|
|
14992
|
+
);
|
|
15024
14993
|
|
|
15025
|
-
// src/dashboard/
|
|
14994
|
+
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
15026
14995
|
var React57 = __toESM(require("react"), 1);
|
|
15027
14996
|
var import_jsx_runtime165 = require("react/jsx-runtime");
|
|
15028
|
-
var
|
|
15029
|
-
return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
15030
|
-
});
|
|
15031
|
-
|
|
15032
|
-
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
15033
|
-
var React58 = __toESM(require("react"), 1);
|
|
15034
|
-
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
15035
|
-
var InfiniteScrollMultiSelect = React58.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
14997
|
+
var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
15036
14998
|
const Forwarded = InfiniteScrollSelect;
|
|
15037
|
-
return /* @__PURE__ */ (0,
|
|
14999
|
+
return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(Forwarded, { ...props, ref, isMulti: true });
|
|
15038
15000
|
});
|
|
15039
15001
|
|
|
15040
15002
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15041
|
-
var
|
|
15003
|
+
var React58 = __toESM(require("react"), 1);
|
|
15042
15004
|
var import_react_i18next37 = require("react-i18next");
|
|
15043
15005
|
|
|
15044
15006
|
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
15045
|
-
var
|
|
15007
|
+
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
15046
15008
|
function SelectCheckboxOption(props) {
|
|
15047
15009
|
const {
|
|
15048
15010
|
option,
|
|
@@ -15055,7 +15017,7 @@ function SelectCheckboxOption(props) {
|
|
|
15055
15017
|
onHover,
|
|
15056
15018
|
innerRef
|
|
15057
15019
|
} = props;
|
|
15058
|
-
return /* @__PURE__ */ (0,
|
|
15020
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
|
|
15059
15021
|
"button",
|
|
15060
15022
|
{
|
|
15061
15023
|
id,
|
|
@@ -15076,7 +15038,7 @@ function SelectCheckboxOption(props) {
|
|
|
15076
15038
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
15077
15039
|
),
|
|
15078
15040
|
children: [
|
|
15079
|
-
/* @__PURE__ */ (0,
|
|
15041
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
|
|
15080
15042
|
BaseCheckbox,
|
|
15081
15043
|
{
|
|
15082
15044
|
checked: isSelected,
|
|
@@ -15086,9 +15048,9 @@ function SelectCheckboxOption(props) {
|
|
|
15086
15048
|
className: "pointer-events-none shrink-0"
|
|
15087
15049
|
}
|
|
15088
15050
|
),
|
|
15089
|
-
/* @__PURE__ */ (0,
|
|
15090
|
-
/* @__PURE__ */ (0,
|
|
15091
|
-
option.description && /* @__PURE__ */ (0,
|
|
15051
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
15052
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "block break-words", children: option.label }),
|
|
15053
|
+
option.description && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
15092
15054
|
] })
|
|
15093
15055
|
]
|
|
15094
15056
|
}
|
|
@@ -15098,7 +15060,7 @@ function SelectCheckboxOption(props) {
|
|
|
15098
15060
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
15099
15061
|
var import_lucide_react48 = require("lucide-react");
|
|
15100
15062
|
var import_react_i18next36 = require("react-i18next");
|
|
15101
|
-
var
|
|
15063
|
+
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
15102
15064
|
function createCountTrigger(opts) {
|
|
15103
15065
|
const { valueText, totalCount } = opts;
|
|
15104
15066
|
function CountTrigger(props) {
|
|
@@ -15125,7 +15087,7 @@ function createCountTrigger(opts) {
|
|
|
15125
15087
|
const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
|
|
15126
15088
|
const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
|
|
15127
15089
|
const isEmpty = !hasValue;
|
|
15128
|
-
return /* @__PURE__ */ (0,
|
|
15090
|
+
return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
|
|
15129
15091
|
"button",
|
|
15130
15092
|
{
|
|
15131
15093
|
id: triggerId,
|
|
@@ -15147,9 +15109,9 @@ function createCountTrigger(opts) {
|
|
|
15147
15109
|
loading && "!cursor-progress"
|
|
15148
15110
|
),
|
|
15149
15111
|
children: [
|
|
15150
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
15151
|
-
/* @__PURE__ */ (0,
|
|
15152
|
-
/* @__PURE__ */ (0,
|
|
15112
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
15113
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
15114
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
15153
15115
|
import_lucide_react48.ChevronDown,
|
|
15154
15116
|
{
|
|
15155
15117
|
size: 16,
|
|
@@ -15167,9 +15129,9 @@ function createCountTrigger(opts) {
|
|
|
15167
15129
|
}
|
|
15168
15130
|
|
|
15169
15131
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
15170
|
-
var
|
|
15132
|
+
var import_jsx_runtime168 = require("react/jsx-runtime");
|
|
15171
15133
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
15172
|
-
return /* @__PURE__ */ (0,
|
|
15134
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
|
|
15173
15135
|
"button",
|
|
15174
15136
|
{
|
|
15175
15137
|
type: "button",
|
|
@@ -15180,7 +15142,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15180
15142
|
disabled && "cursor-default opacity-40"
|
|
15181
15143
|
),
|
|
15182
15144
|
children: [
|
|
15183
|
-
/* @__PURE__ */ (0,
|
|
15145
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15184
15146
|
BaseCheckbox,
|
|
15185
15147
|
{
|
|
15186
15148
|
checked,
|
|
@@ -15190,20 +15152,20 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15190
15152
|
className: "pointer-events-none shrink-0"
|
|
15191
15153
|
}
|
|
15192
15154
|
),
|
|
15193
|
-
/* @__PURE__ */ (0,
|
|
15155
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "flex-1", children: label })
|
|
15194
15156
|
]
|
|
15195
15157
|
}
|
|
15196
15158
|
);
|
|
15197
15159
|
}
|
|
15198
15160
|
|
|
15199
15161
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15200
|
-
var
|
|
15201
|
-
function
|
|
15162
|
+
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
15163
|
+
function hasPaginationProps(props) {
|
|
15202
15164
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
|
|
15203
15165
|
}
|
|
15204
|
-
function
|
|
15166
|
+
function makeTriggerSlot(render) {
|
|
15205
15167
|
function CustomTrigger(props) {
|
|
15206
|
-
return /* @__PURE__ */ (0,
|
|
15168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_jsx_runtime169.Fragment, { children: render(props.isOpen, props.onContainerClick) });
|
|
15207
15169
|
}
|
|
15208
15170
|
return CustomTrigger;
|
|
15209
15171
|
}
|
|
@@ -15226,28 +15188,28 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15226
15188
|
...paginationAndRest
|
|
15227
15189
|
} = props;
|
|
15228
15190
|
const { t } = (0, import_react_i18next37.useTranslation)();
|
|
15229
|
-
const isPaginated =
|
|
15191
|
+
const isPaginated = hasPaginationProps(
|
|
15230
15192
|
paginationAndRest
|
|
15231
15193
|
);
|
|
15232
|
-
const [inputValue, setInputValue] =
|
|
15194
|
+
const [inputValue, setInputValue] = React58.useState("");
|
|
15233
15195
|
const isControlled = value !== void 0;
|
|
15234
|
-
const [internalValue, setInternalValue] =
|
|
15196
|
+
const [internalValue, setInternalValue] = React58.useState(
|
|
15235
15197
|
() => defaultValue ?? []
|
|
15236
15198
|
);
|
|
15237
15199
|
const currentValue = isControlled ? value : internalValue;
|
|
15238
|
-
const selected =
|
|
15239
|
-
const handleChange =
|
|
15200
|
+
const selected = React58.useMemo(() => currentValue ?? [], [currentValue]);
|
|
15201
|
+
const handleChange = React58.useCallback(
|
|
15240
15202
|
(next, meta) => {
|
|
15241
15203
|
if (!isControlled) setInternalValue(next);
|
|
15242
15204
|
onChange?.(next, meta);
|
|
15243
15205
|
},
|
|
15244
15206
|
[isControlled, onChange]
|
|
15245
15207
|
);
|
|
15246
|
-
const flatRawOptions =
|
|
15208
|
+
const flatRawOptions = React58.useMemo(
|
|
15247
15209
|
() => flattenGroupedOptions(rawOptions),
|
|
15248
15210
|
[rawOptions]
|
|
15249
15211
|
);
|
|
15250
|
-
const filteredGrouped =
|
|
15212
|
+
const filteredGrouped = React58.useMemo(() => {
|
|
15251
15213
|
const trimmed = inputValue.trim();
|
|
15252
15214
|
if (!trimmed) return rawOptions;
|
|
15253
15215
|
return rawOptions.map((item) => {
|
|
@@ -15258,7 +15220,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15258
15220
|
return filterOption(item, trimmed) ? item : null;
|
|
15259
15221
|
}).filter((item) => item !== null);
|
|
15260
15222
|
}, [rawOptions, inputValue, filterOption]);
|
|
15261
|
-
const filteredFlat =
|
|
15223
|
+
const filteredFlat = React58.useMemo(
|
|
15262
15224
|
() => flattenGroupedOptions(filteredGrouped),
|
|
15263
15225
|
[filteredGrouped]
|
|
15264
15226
|
);
|
|
@@ -15266,7 +15228,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15266
15228
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
15267
15229
|
}, 0);
|
|
15268
15230
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
15269
|
-
const handleToggleAll =
|
|
15231
|
+
const handleToggleAll = React58.useCallback(() => {
|
|
15270
15232
|
if (allVisibleSelected) {
|
|
15271
15233
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
15272
15234
|
handleChange(
|
|
@@ -15281,14 +15243,14 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15281
15243
|
}
|
|
15282
15244
|
handleChange(merged, { action: "select" });
|
|
15283
15245
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
15284
|
-
const Control =
|
|
15285
|
-
if (trigger) return
|
|
15246
|
+
const Control = React58.useMemo(() => {
|
|
15247
|
+
if (trigger) return makeTriggerSlot(trigger);
|
|
15286
15248
|
return createCountTrigger({
|
|
15287
15249
|
valueText,
|
|
15288
15250
|
totalCount: flatRawOptions.length
|
|
15289
15251
|
});
|
|
15290
15252
|
}, [trigger, valueText, flatRawOptions.length]);
|
|
15291
|
-
const components =
|
|
15253
|
+
const components = React58.useMemo(
|
|
15292
15254
|
() => ({
|
|
15293
15255
|
...userComponents,
|
|
15294
15256
|
Control,
|
|
@@ -15296,7 +15258,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15296
15258
|
}),
|
|
15297
15259
|
[userComponents, Control]
|
|
15298
15260
|
);
|
|
15299
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0,
|
|
15261
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15300
15262
|
SelectAllRow,
|
|
15301
15263
|
{
|
|
15302
15264
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -15304,7 +15266,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15304
15266
|
onToggle: handleToggleAll
|
|
15305
15267
|
}
|
|
15306
15268
|
) : void 0;
|
|
15307
|
-
const handleInputChange =
|
|
15269
|
+
const handleInputChange = React58.useCallback(
|
|
15308
15270
|
(next) => {
|
|
15309
15271
|
setInputValue(next);
|
|
15310
15272
|
onSearchChange?.(next);
|
|
@@ -15324,7 +15286,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15324
15286
|
isMulti: true
|
|
15325
15287
|
};
|
|
15326
15288
|
if (isPaginated) {
|
|
15327
|
-
return /* @__PURE__ */ (0,
|
|
15289
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15328
15290
|
InfiniteScrollSelect,
|
|
15329
15291
|
{
|
|
15330
15292
|
ref,
|
|
@@ -15335,7 +15297,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15335
15297
|
}
|
|
15336
15298
|
);
|
|
15337
15299
|
}
|
|
15338
|
-
return /* @__PURE__ */ (0,
|
|
15300
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
15339
15301
|
Select,
|
|
15340
15302
|
{
|
|
15341
15303
|
ref,
|
|
@@ -15346,16 +15308,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15346
15308
|
}
|
|
15347
15309
|
);
|
|
15348
15310
|
}
|
|
15349
|
-
var SelectCheckboxes =
|
|
15311
|
+
var SelectCheckboxes = React58.forwardRef(
|
|
15350
15312
|
SelectCheckboxesInternal
|
|
15351
15313
|
);
|
|
15352
15314
|
|
|
15353
15315
|
// src/dashboard/textarea/Textarea.tsx
|
|
15354
|
-
var
|
|
15316
|
+
var React60 = __toESM(require("react"), 1);
|
|
15355
15317
|
var import_react_i18next38 = require("react-i18next");
|
|
15356
15318
|
|
|
15357
15319
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15358
|
-
var
|
|
15320
|
+
var React59 = __toESM(require("react"), 1);
|
|
15359
15321
|
var isEmptyValue2 = (value) => {
|
|
15360
15322
|
if (value === void 0 || value === null) return true;
|
|
15361
15323
|
return String(value).length === 0;
|
|
@@ -15374,12 +15336,12 @@ function useTextareaValueState({
|
|
|
15374
15336
|
value,
|
|
15375
15337
|
defaultValue
|
|
15376
15338
|
}) {
|
|
15377
|
-
const textareaRef =
|
|
15339
|
+
const textareaRef = React59.useRef(null);
|
|
15378
15340
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15379
15341
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15380
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15342
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React59.useState(propsAreEmpty);
|
|
15381
15343
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15382
|
-
const setNativeValue =
|
|
15344
|
+
const setNativeValue = React59.useCallback(
|
|
15383
15345
|
(nextValue) => {
|
|
15384
15346
|
if (isControlled) return;
|
|
15385
15347
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15389,14 +15351,14 @@ function useTextareaValueState({
|
|
|
15389
15351
|
},
|
|
15390
15352
|
[isControlled]
|
|
15391
15353
|
);
|
|
15392
|
-
const syncValueState =
|
|
15354
|
+
const syncValueState = React59.useCallback(() => {
|
|
15393
15355
|
if (!textareaRef.current) return;
|
|
15394
15356
|
setNativeValue(textareaRef.current.value);
|
|
15395
15357
|
}, [setNativeValue]);
|
|
15396
|
-
|
|
15358
|
+
React59.useLayoutEffect(() => {
|
|
15397
15359
|
syncValueState();
|
|
15398
15360
|
});
|
|
15399
|
-
|
|
15361
|
+
React59.useEffect(() => {
|
|
15400
15362
|
const textarea = textareaRef.current;
|
|
15401
15363
|
const form = textarea?.form;
|
|
15402
15364
|
if (isControlled || !form) return;
|
|
@@ -15420,10 +15382,10 @@ function useTextareaValueState({
|
|
|
15420
15382
|
}
|
|
15421
15383
|
|
|
15422
15384
|
// src/dashboard/textarea/Textarea.tsx
|
|
15423
|
-
var
|
|
15385
|
+
var import_jsx_runtime170 = require("react/jsx-runtime");
|
|
15424
15386
|
var LINE_HEIGHT = 20;
|
|
15425
15387
|
var VERTICAL_PADDING = 32;
|
|
15426
|
-
var Textarea =
|
|
15388
|
+
var Textarea = React60.forwardRef(function Textarea2({
|
|
15427
15389
|
className,
|
|
15428
15390
|
textareaClassName,
|
|
15429
15391
|
label,
|
|
@@ -15451,12 +15413,12 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15451
15413
|
}, ref) {
|
|
15452
15414
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15453
15415
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15454
|
-
const reactId =
|
|
15416
|
+
const reactId = React60.useId();
|
|
15455
15417
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15456
15418
|
const { t } = (0, import_react_i18next38.useTranslation)();
|
|
15457
15419
|
const isInvalid = Boolean(invalid || error);
|
|
15458
15420
|
const isBlocked = Boolean(disabled);
|
|
15459
|
-
const resize =
|
|
15421
|
+
const resize = React60.useCallback(() => {
|
|
15460
15422
|
const el = textareaRef.current;
|
|
15461
15423
|
if (!el || !autosize) return;
|
|
15462
15424
|
el.style.height = "auto";
|
|
@@ -15466,7 +15428,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15466
15428
|
el.style.height = `${nextHeight}px`;
|
|
15467
15429
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15468
15430
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15469
|
-
|
|
15431
|
+
React60.useLayoutEffect(() => {
|
|
15470
15432
|
resize();
|
|
15471
15433
|
}, [resize, value]);
|
|
15472
15434
|
const handleInput = (event) => {
|
|
@@ -15489,7 +15451,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15489
15451
|
onBlur?.(event);
|
|
15490
15452
|
syncValueState();
|
|
15491
15453
|
};
|
|
15492
|
-
return /* @__PURE__ */ (0,
|
|
15454
|
+
return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
15493
15455
|
"div",
|
|
15494
15456
|
{
|
|
15495
15457
|
className: cn(
|
|
@@ -15499,18 +15461,18 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15499
15461
|
className
|
|
15500
15462
|
),
|
|
15501
15463
|
children: [
|
|
15502
|
-
label && /* @__PURE__ */ (0,
|
|
15464
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
15503
15465
|
"label",
|
|
15504
15466
|
{
|
|
15505
15467
|
htmlFor: textareaId,
|
|
15506
15468
|
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15507
15469
|
children: [
|
|
15508
15470
|
label,
|
|
15509
|
-
tooltip && /* @__PURE__ */ (0,
|
|
15471
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15510
15472
|
]
|
|
15511
15473
|
}
|
|
15512
15474
|
),
|
|
15513
|
-
/* @__PURE__ */ (0,
|
|
15475
|
+
/* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15514
15476
|
"textarea",
|
|
15515
15477
|
{
|
|
15516
15478
|
ref: combinedRef,
|
|
@@ -15542,7 +15504,7 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15542
15504
|
...textareaProps
|
|
15543
15505
|
}
|
|
15544
15506
|
),
|
|
15545
|
-
error && /* @__PURE__ */ (0,
|
|
15507
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15546
15508
|
FieldErrorMessage,
|
|
15547
15509
|
{
|
|
15548
15510
|
id: `${textareaId}-error`,
|
|
@@ -15550,20 +15512,20 @@ var Textarea = React61.forwardRef(function Textarea2({
|
|
|
15550
15512
|
className: "mt-[1px] text-[14px]"
|
|
15551
15513
|
}
|
|
15552
15514
|
),
|
|
15553
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
15554
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
15515
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
15516
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15555
15517
|
]
|
|
15556
15518
|
}
|
|
15557
15519
|
);
|
|
15558
15520
|
});
|
|
15559
15521
|
|
|
15560
15522
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15561
|
-
var
|
|
15523
|
+
var React62 = __toESM(require("react"), 1);
|
|
15562
15524
|
var import_lucide_react49 = require("lucide-react");
|
|
15563
15525
|
var import_react_i18next39 = require("react-i18next");
|
|
15564
15526
|
|
|
15565
15527
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15566
|
-
var
|
|
15528
|
+
var React61 = __toESM(require("react"), 1);
|
|
15567
15529
|
|
|
15568
15530
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15569
15531
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15714,21 +15676,21 @@ function useDatePickerWheel({
|
|
|
15714
15676
|
minDate,
|
|
15715
15677
|
maxDate
|
|
15716
15678
|
}) {
|
|
15717
|
-
const years =
|
|
15718
|
-
const [draftDate, setDraftDate] =
|
|
15679
|
+
const years = React61.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15680
|
+
const [draftDate, setDraftDate] = React61.useState(
|
|
15719
15681
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15720
15682
|
);
|
|
15721
15683
|
const draftYear = draftDate.getFullYear();
|
|
15722
15684
|
const draftMonth = draftDate.getMonth();
|
|
15723
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15724
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15725
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15726
|
-
const monthListRef =
|
|
15727
|
-
const dayListRef =
|
|
15728
|
-
const yearListRef =
|
|
15729
|
-
const settleTimeoutsRef =
|
|
15730
|
-
const animationFramesRef =
|
|
15731
|
-
const columnRefs =
|
|
15685
|
+
const [monthScrollTop, setMonthScrollTop] = React61.useState(0);
|
|
15686
|
+
const [dayScrollTop, setDayScrollTop] = React61.useState(0);
|
|
15687
|
+
const [yearScrollTop, setYearScrollTop] = React61.useState(0);
|
|
15688
|
+
const monthListRef = React61.useRef(null);
|
|
15689
|
+
const dayListRef = React61.useRef(null);
|
|
15690
|
+
const yearListRef = React61.useRef(null);
|
|
15691
|
+
const settleTimeoutsRef = React61.useRef({});
|
|
15692
|
+
const animationFramesRef = React61.useRef({});
|
|
15693
|
+
const columnRefs = React61.useMemo(
|
|
15732
15694
|
() => ({
|
|
15733
15695
|
month: monthListRef,
|
|
15734
15696
|
day: dayListRef,
|
|
@@ -15736,7 +15698,7 @@ function useDatePickerWheel({
|
|
|
15736
15698
|
}),
|
|
15737
15699
|
[]
|
|
15738
15700
|
);
|
|
15739
|
-
const setColumnScrollTop =
|
|
15701
|
+
const setColumnScrollTop = React61.useCallback(
|
|
15740
15702
|
(column, nextScrollTop) => {
|
|
15741
15703
|
if (column === "month") {
|
|
15742
15704
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15750,19 +15712,19 @@ function useDatePickerWheel({
|
|
|
15750
15712
|
},
|
|
15751
15713
|
[]
|
|
15752
15714
|
);
|
|
15753
|
-
const clearSettleTimeout =
|
|
15715
|
+
const clearSettleTimeout = React61.useCallback((column) => {
|
|
15754
15716
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15755
15717
|
if (timeoutId === void 0) return;
|
|
15756
15718
|
window.clearTimeout(timeoutId);
|
|
15757
15719
|
delete settleTimeoutsRef.current[column];
|
|
15758
15720
|
}, []);
|
|
15759
|
-
const clearAnimationFrame =
|
|
15721
|
+
const clearAnimationFrame = React61.useCallback((column) => {
|
|
15760
15722
|
const frameId = animationFramesRef.current[column];
|
|
15761
15723
|
if (frameId === void 0) return;
|
|
15762
15724
|
window.cancelAnimationFrame(frameId);
|
|
15763
15725
|
delete animationFramesRef.current[column];
|
|
15764
15726
|
}, []);
|
|
15765
|
-
|
|
15727
|
+
React61.useEffect(
|
|
15766
15728
|
() => () => {
|
|
15767
15729
|
["month", "day", "year"].forEach((column) => {
|
|
15768
15730
|
clearSettleTimeout(column);
|
|
@@ -15771,22 +15733,22 @@ function useDatePickerWheel({
|
|
|
15771
15733
|
},
|
|
15772
15734
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15773
15735
|
);
|
|
15774
|
-
|
|
15736
|
+
React61.useEffect(() => {
|
|
15775
15737
|
if (isOpen) return;
|
|
15776
15738
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15777
15739
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15778
|
-
const months =
|
|
15740
|
+
const months = React61.useMemo(
|
|
15779
15741
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15780
15742
|
[draftYear, maxDate, minDate]
|
|
15781
15743
|
);
|
|
15782
|
-
const days =
|
|
15744
|
+
const days = React61.useMemo(
|
|
15783
15745
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15784
15746
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15785
15747
|
);
|
|
15786
15748
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15787
15749
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15788
15750
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15789
|
-
const syncScrollPositions =
|
|
15751
|
+
const syncScrollPositions = React61.useCallback(
|
|
15790
15752
|
(nextDate, behavior = "auto") => {
|
|
15791
15753
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15792
15754
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15810,7 +15772,7 @@ function useDatePickerWheel({
|
|
|
15810
15772
|
},
|
|
15811
15773
|
[maxDate, minDate, years]
|
|
15812
15774
|
);
|
|
15813
|
-
|
|
15775
|
+
React61.useLayoutEffect(() => {
|
|
15814
15776
|
if (!isOpen) return;
|
|
15815
15777
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15816
15778
|
setDraftDate(nextDate);
|
|
@@ -15821,7 +15783,7 @@ function useDatePickerWheel({
|
|
|
15821
15783
|
window.cancelAnimationFrame(frameId);
|
|
15822
15784
|
};
|
|
15823
15785
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15824
|
-
const updateDraftDate =
|
|
15786
|
+
const updateDraftDate = React61.useCallback(
|
|
15825
15787
|
(column, targetIndex, behavior = "smooth") => {
|
|
15826
15788
|
const currentDate = stripTime(draftDate);
|
|
15827
15789
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15866,7 +15828,7 @@ function useDatePickerWheel({
|
|
|
15866
15828
|
},
|
|
15867
15829
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15868
15830
|
);
|
|
15869
|
-
const settleColumnScroll =
|
|
15831
|
+
const settleColumnScroll = React61.useCallback(
|
|
15870
15832
|
(column) => {
|
|
15871
15833
|
const list = columnRefs[column].current;
|
|
15872
15834
|
if (!list) return;
|
|
@@ -15879,7 +15841,7 @@ function useDatePickerWheel({
|
|
|
15879
15841
|
},
|
|
15880
15842
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15881
15843
|
);
|
|
15882
|
-
const scheduleScrollSettle =
|
|
15844
|
+
const scheduleScrollSettle = React61.useCallback(
|
|
15883
15845
|
(column) => {
|
|
15884
15846
|
clearSettleTimeout(column);
|
|
15885
15847
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15888,7 +15850,7 @@ function useDatePickerWheel({
|
|
|
15888
15850
|
},
|
|
15889
15851
|
[clearSettleTimeout, settleColumnScroll]
|
|
15890
15852
|
);
|
|
15891
|
-
const handleColumnScroll =
|
|
15853
|
+
const handleColumnScroll = React61.useCallback(
|
|
15892
15854
|
(column) => {
|
|
15893
15855
|
const list = columnRefs[column].current;
|
|
15894
15856
|
if (!list) return;
|
|
@@ -15902,13 +15864,13 @@ function useDatePickerWheel({
|
|
|
15902
15864
|
},
|
|
15903
15865
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15904
15866
|
);
|
|
15905
|
-
const handleOptionSelect =
|
|
15867
|
+
const handleOptionSelect = React61.useCallback(
|
|
15906
15868
|
(column, targetIndex) => {
|
|
15907
15869
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15908
15870
|
},
|
|
15909
15871
|
[updateDraftDate]
|
|
15910
15872
|
);
|
|
15911
|
-
const focusAdjacentColumn =
|
|
15873
|
+
const focusAdjacentColumn = React61.useCallback(
|
|
15912
15874
|
(column, direction) => {
|
|
15913
15875
|
const order = ["month", "day", "year"];
|
|
15914
15876
|
const currentIndex = order.indexOf(column);
|
|
@@ -15918,7 +15880,7 @@ function useDatePickerWheel({
|
|
|
15918
15880
|
},
|
|
15919
15881
|
[columnRefs]
|
|
15920
15882
|
);
|
|
15921
|
-
const handleColumnKeyDown =
|
|
15883
|
+
const handleColumnKeyDown = React61.useCallback(
|
|
15922
15884
|
(column, event) => {
|
|
15923
15885
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15924
15886
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15984,7 +15946,7 @@ function useDatePickerWheel({
|
|
|
15984
15946
|
}
|
|
15985
15947
|
|
|
15986
15948
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
15987
|
-
var
|
|
15949
|
+
var import_jsx_runtime171 = require("react/jsx-runtime");
|
|
15988
15950
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
15989
15951
|
function AirbnbDatePickerWheelColumn({
|
|
15990
15952
|
id,
|
|
@@ -15998,7 +15960,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15998
15960
|
onOptionSelect,
|
|
15999
15961
|
column
|
|
16000
15962
|
}) {
|
|
16001
|
-
return /* @__PURE__ */ (0,
|
|
15963
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(
|
|
16002
15964
|
"div",
|
|
16003
15965
|
{
|
|
16004
15966
|
id,
|
|
@@ -16015,14 +15977,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16015
15977
|
WebkitOverflowScrolling: "touch"
|
|
16016
15978
|
},
|
|
16017
15979
|
children: [
|
|
16018
|
-
/* @__PURE__ */ (0,
|
|
15980
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { style: { height: `${spacerHeight}px` } }),
|
|
16019
15981
|
items.map((item, index) => {
|
|
16020
15982
|
const { style } = getWheelOptionStyles(
|
|
16021
15983
|
index,
|
|
16022
15984
|
scrollTop,
|
|
16023
15985
|
DATE_PICKER_OPTION_HEIGHT
|
|
16024
15986
|
);
|
|
16025
|
-
return /* @__PURE__ */ (0,
|
|
15987
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
16026
15988
|
"button",
|
|
16027
15989
|
{
|
|
16028
15990
|
id: `${id}-option-${index}`,
|
|
@@ -16038,14 +16000,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16038
16000
|
`${column}-${item}-${index}`
|
|
16039
16001
|
);
|
|
16040
16002
|
}),
|
|
16041
|
-
/* @__PURE__ */ (0,
|
|
16003
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { style: { height: `${spacerHeight}px` } })
|
|
16042
16004
|
]
|
|
16043
16005
|
}
|
|
16044
16006
|
) });
|
|
16045
16007
|
}
|
|
16046
16008
|
|
|
16047
16009
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
16048
|
-
var
|
|
16010
|
+
var import_jsx_runtime172 = require("react/jsx-runtime");
|
|
16049
16011
|
function AirbnbDatePickerBody({
|
|
16050
16012
|
baseId,
|
|
16051
16013
|
label,
|
|
@@ -16067,19 +16029,19 @@ function AirbnbDatePickerBody({
|
|
|
16067
16029
|
onOptionSelect,
|
|
16068
16030
|
onDone
|
|
16069
16031
|
}) {
|
|
16070
|
-
return /* @__PURE__ */ (0,
|
|
16071
|
-
/* @__PURE__ */ (0,
|
|
16072
|
-
/* @__PURE__ */ (0,
|
|
16073
|
-
/* @__PURE__ */ (0,
|
|
16074
|
-
/* @__PURE__ */ (0,
|
|
16032
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
|
|
16033
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "relative overflow-hidden rounded-[24px]", children: [
|
|
16034
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
16035
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
16036
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16075
16037
|
"div",
|
|
16076
16038
|
{
|
|
16077
16039
|
"aria-hidden": true,
|
|
16078
16040
|
className: "pointer-events-none absolute inset-x-0 top-1/2 z-0 h-8 -translate-y-1/2 rounded-[12px] bg-black/[0.04]"
|
|
16079
16041
|
}
|
|
16080
16042
|
),
|
|
16081
|
-
/* @__PURE__ */ (0,
|
|
16082
|
-
/* @__PURE__ */ (0,
|
|
16043
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
|
|
16044
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16083
16045
|
AirbnbDatePickerWheelColumn,
|
|
16084
16046
|
{
|
|
16085
16047
|
id: `${baseId}-month`,
|
|
@@ -16094,7 +16056,7 @@ function AirbnbDatePickerBody({
|
|
|
16094
16056
|
onOptionSelect
|
|
16095
16057
|
}
|
|
16096
16058
|
),
|
|
16097
|
-
/* @__PURE__ */ (0,
|
|
16059
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16098
16060
|
AirbnbDatePickerWheelColumn,
|
|
16099
16061
|
{
|
|
16100
16062
|
id: `${baseId}-day`,
|
|
@@ -16109,7 +16071,7 @@ function AirbnbDatePickerBody({
|
|
|
16109
16071
|
onOptionSelect
|
|
16110
16072
|
}
|
|
16111
16073
|
),
|
|
16112
|
-
/* @__PURE__ */ (0,
|
|
16074
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16113
16075
|
AirbnbDatePickerWheelColumn,
|
|
16114
16076
|
{
|
|
16115
16077
|
id: `${baseId}-year`,
|
|
@@ -16126,7 +16088,7 @@ function AirbnbDatePickerBody({
|
|
|
16126
16088
|
)
|
|
16127
16089
|
] })
|
|
16128
16090
|
] }),
|
|
16129
|
-
/* @__PURE__ */ (0,
|
|
16091
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
16130
16092
|
] });
|
|
16131
16093
|
}
|
|
16132
16094
|
function AirbnbDatePickerContent({
|
|
@@ -16154,7 +16116,7 @@ function AirbnbDatePickerContent({
|
|
|
16154
16116
|
onColumnKeyDown,
|
|
16155
16117
|
onOptionSelect
|
|
16156
16118
|
}) {
|
|
16157
|
-
const body = /* @__PURE__ */ (0,
|
|
16119
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16158
16120
|
AirbnbDatePickerBody,
|
|
16159
16121
|
{
|
|
16160
16122
|
baseId,
|
|
@@ -16179,27 +16141,27 @@ function AirbnbDatePickerContent({
|
|
|
16179
16141
|
}
|
|
16180
16142
|
);
|
|
16181
16143
|
if (isMobile3) {
|
|
16182
|
-
return /* @__PURE__ */ (0,
|
|
16144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16183
16145
|
DrawerContent,
|
|
16184
16146
|
{
|
|
16185
16147
|
onClose: () => onOpenChange(false),
|
|
16186
16148
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
16187
16149
|
children: [
|
|
16188
|
-
/* @__PURE__ */ (0,
|
|
16189
|
-
/* @__PURE__ */ (0,
|
|
16150
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DrawerTitle, { className: "sr-only", children: title }),
|
|
16151
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
16190
16152
|
body
|
|
16191
16153
|
]
|
|
16192
16154
|
}
|
|
16193
16155
|
) });
|
|
16194
16156
|
}
|
|
16195
|
-
return /* @__PURE__ */ (0,
|
|
16157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16196
16158
|
DialogContent,
|
|
16197
16159
|
{
|
|
16198
16160
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
16199
16161
|
showCloseButton: false,
|
|
16200
16162
|
children: [
|
|
16201
|
-
/* @__PURE__ */ (0,
|
|
16202
|
-
/* @__PURE__ */ (0,
|
|
16163
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DialogTitle, { className: "sr-only", children: title }),
|
|
16164
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(DialogDescription, { className: "sr-only", children: label }),
|
|
16203
16165
|
body
|
|
16204
16166
|
]
|
|
16205
16167
|
}
|
|
@@ -16207,7 +16169,7 @@ function AirbnbDatePickerContent({
|
|
|
16207
16169
|
}
|
|
16208
16170
|
|
|
16209
16171
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
16210
|
-
var
|
|
16172
|
+
var import_jsx_runtime173 = require("react/jsx-runtime");
|
|
16211
16173
|
var MONTHS_IN_YEAR2 = 12;
|
|
16212
16174
|
function getMonthLabels2(locale) {
|
|
16213
16175
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -16240,7 +16202,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
16240
16202
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
16241
16203
|
return new Date(yearNum, monthIndex, dayNum);
|
|
16242
16204
|
}
|
|
16243
|
-
var Datepicker =
|
|
16205
|
+
var Datepicker = React62.forwardRef(
|
|
16244
16206
|
function Datepicker2({
|
|
16245
16207
|
label,
|
|
16246
16208
|
value,
|
|
@@ -16270,14 +16232,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16270
16232
|
maxDate,
|
|
16271
16233
|
formatValue
|
|
16272
16234
|
}, ref) {
|
|
16273
|
-
const containerRef =
|
|
16274
|
-
const dayInputRef =
|
|
16275
|
-
const monthInputRef =
|
|
16276
|
-
const monthListRef =
|
|
16277
|
-
const yearInputRef =
|
|
16278
|
-
const mobileTriggerRef =
|
|
16279
|
-
const wheelBaseId =
|
|
16280
|
-
const reactId =
|
|
16235
|
+
const containerRef = React62.useRef(null);
|
|
16236
|
+
const dayInputRef = React62.useRef(null);
|
|
16237
|
+
const monthInputRef = React62.useRef(null);
|
|
16238
|
+
const monthListRef = React62.useRef(null);
|
|
16239
|
+
const yearInputRef = React62.useRef(null);
|
|
16240
|
+
const mobileTriggerRef = React62.useRef(null);
|
|
16241
|
+
const wheelBaseId = React62.useId();
|
|
16242
|
+
const reactId = React62.useId();
|
|
16281
16243
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
16282
16244
|
const dayId = `${baseId}-day`;
|
|
16283
16245
|
const monthId = `${baseId}-month`;
|
|
@@ -16286,55 +16248,55 @@ var Datepicker = React63.forwardRef(
|
|
|
16286
16248
|
const errorId = `${baseId}-error`;
|
|
16287
16249
|
const { t, i18n } = (0, import_react_i18next39.useTranslation)();
|
|
16288
16250
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
16289
|
-
const resolvedMonthLabels =
|
|
16251
|
+
const resolvedMonthLabels = React62.useMemo(
|
|
16290
16252
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
16291
16253
|
[resolvedLocale, monthLabels]
|
|
16292
16254
|
);
|
|
16293
16255
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
16294
16256
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
16295
16257
|
const isControlled = value !== void 0;
|
|
16296
|
-
const initialParts =
|
|
16258
|
+
const initialParts = React62.useMemo(
|
|
16297
16259
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
16298
16260
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16299
16261
|
[]
|
|
16300
16262
|
);
|
|
16301
|
-
const [day, setDay] =
|
|
16302
|
-
const [monthIndex, setMonthIndex] =
|
|
16263
|
+
const [day, setDay] = React62.useState(initialParts.day);
|
|
16264
|
+
const [monthIndex, setMonthIndex] = React62.useState(
|
|
16303
16265
|
initialParts.monthIndex
|
|
16304
16266
|
);
|
|
16305
|
-
const [year, setYear] =
|
|
16306
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
16307
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
16308
|
-
const [focusedField, setFocusedField] =
|
|
16309
|
-
const [monthInputValue, setMonthInputValue] =
|
|
16310
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
16267
|
+
const [year, setYear] = React62.useState(initialParts.year);
|
|
16268
|
+
const [isMonthOpen, setIsMonthOpen] = React62.useState(false);
|
|
16269
|
+
const [isWheelOpen, setIsWheelOpen] = React62.useState(false);
|
|
16270
|
+
const [focusedField, setFocusedField] = React62.useState(null);
|
|
16271
|
+
const [monthInputValue, setMonthInputValue] = React62.useState("");
|
|
16272
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React62.useState(-1);
|
|
16311
16273
|
const isMobile3 = useIsMobile();
|
|
16312
|
-
|
|
16274
|
+
React62.useImperativeHandle(
|
|
16313
16275
|
ref,
|
|
16314
16276
|
() => dayInputRef.current ?? mobileTriggerRef.current,
|
|
16315
16277
|
[]
|
|
16316
16278
|
);
|
|
16317
|
-
|
|
16279
|
+
React62.useEffect(() => {
|
|
16318
16280
|
if (!isControlled) return;
|
|
16319
16281
|
const next = partsFromDate(value ?? null);
|
|
16320
16282
|
setDay(next.day);
|
|
16321
16283
|
setMonthIndex(next.monthIndex);
|
|
16322
16284
|
setYear(next.year);
|
|
16323
16285
|
}, [isControlled, value]);
|
|
16324
|
-
|
|
16286
|
+
React62.useEffect(() => {
|
|
16325
16287
|
if (focusedField === "month") return;
|
|
16326
16288
|
setMonthInputValue(
|
|
16327
16289
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16328
16290
|
);
|
|
16329
16291
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16330
|
-
const filteredMonths =
|
|
16292
|
+
const filteredMonths = React62.useMemo(() => {
|
|
16331
16293
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16332
16294
|
const query = monthInputValue.trim().toLowerCase();
|
|
16333
16295
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16334
16296
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16335
16297
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16336
16298
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16337
|
-
|
|
16299
|
+
React62.useEffect(() => {
|
|
16338
16300
|
if (!isMonthOpen) {
|
|
16339
16301
|
setMonthHighlightIndex(-1);
|
|
16340
16302
|
return;
|
|
@@ -16355,7 +16317,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16355
16317
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16356
16318
|
const isInvalid = Boolean(invalid || error);
|
|
16357
16319
|
const wrapperWidth = toCssSize(width);
|
|
16358
|
-
const currentDate =
|
|
16320
|
+
const currentDate = React62.useMemo(
|
|
16359
16321
|
() => dateFromParts(day, monthIndex, year),
|
|
16360
16322
|
[day, monthIndex, year]
|
|
16361
16323
|
);
|
|
@@ -16364,7 +16326,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16364
16326
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16365
16327
|
isDisabled: !isMonthOpen || isMobile3
|
|
16366
16328
|
});
|
|
16367
|
-
const emitChange =
|
|
16329
|
+
const emitChange = React62.useCallback(
|
|
16368
16330
|
(nextDay, nextMonth, nextYear) => {
|
|
16369
16331
|
if (!onChange) return;
|
|
16370
16332
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16399,7 +16361,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16399
16361
|
setIsMonthOpen(true);
|
|
16400
16362
|
setMonthHighlightIndex(0);
|
|
16401
16363
|
};
|
|
16402
|
-
const commitMonthInput =
|
|
16364
|
+
const commitMonthInput = React62.useCallback(() => {
|
|
16403
16365
|
const query = monthInputValue.trim().toLowerCase();
|
|
16404
16366
|
if (!query) {
|
|
16405
16367
|
if (monthIndex !== null) {
|
|
@@ -16459,15 +16421,15 @@ var Datepicker = React63.forwardRef(
|
|
|
16459
16421
|
setIsMonthOpen(false);
|
|
16460
16422
|
}
|
|
16461
16423
|
};
|
|
16462
|
-
const focusDayInput =
|
|
16424
|
+
const focusDayInput = React62.useCallback(() => {
|
|
16463
16425
|
if (isBlocked || readOnly) return;
|
|
16464
16426
|
dayInputRef.current?.focus();
|
|
16465
16427
|
}, [isBlocked, readOnly]);
|
|
16466
|
-
const openWheel =
|
|
16428
|
+
const openWheel = React62.useCallback(() => {
|
|
16467
16429
|
if (isBlocked || readOnly) return;
|
|
16468
16430
|
setIsWheelOpen(true);
|
|
16469
16431
|
}, [isBlocked, readOnly]);
|
|
16470
|
-
const closeWheel =
|
|
16432
|
+
const closeWheel = React62.useCallback(() => {
|
|
16471
16433
|
setIsWheelOpen(false);
|
|
16472
16434
|
mobileTriggerRef.current?.focus();
|
|
16473
16435
|
}, []);
|
|
@@ -16479,7 +16441,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16479
16441
|
minDate,
|
|
16480
16442
|
maxDate
|
|
16481
16443
|
});
|
|
16482
|
-
const handleWheelDone =
|
|
16444
|
+
const handleWheelDone = React62.useCallback(() => {
|
|
16483
16445
|
const next = wheel.draftDate;
|
|
16484
16446
|
setDay(String(next.getDate()));
|
|
16485
16447
|
setMonthIndex(next.getMonth());
|
|
@@ -16488,14 +16450,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16488
16450
|
setIsWheelOpen(false);
|
|
16489
16451
|
mobileTriggerRef.current?.focus();
|
|
16490
16452
|
}, [name, onChange, wheel.draftDate]);
|
|
16491
|
-
const defaultFormatValue =
|
|
16453
|
+
const defaultFormatValue = React62.useCallback(
|
|
16492
16454
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16493
16455
|
[resolvedMonthLabels]
|
|
16494
16456
|
);
|
|
16495
16457
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16496
16458
|
const monthListboxId = `${monthId}-listbox`;
|
|
16497
16459
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16498
|
-
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0,
|
|
16460
|
+
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16499
16461
|
"ul",
|
|
16500
16462
|
{
|
|
16501
16463
|
ref: monthListRef,
|
|
@@ -16506,7 +16468,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16506
16468
|
children: filteredMonths.map((option, position) => {
|
|
16507
16469
|
const isSelected = option.index === monthIndex;
|
|
16508
16470
|
const isHighlighted = position === monthHighlightIndex;
|
|
16509
|
-
return /* @__PURE__ */ (0,
|
|
16471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16510
16472
|
"button",
|
|
16511
16473
|
{
|
|
16512
16474
|
id: getMonthOptionId(option.index),
|
|
@@ -16533,7 +16495,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16533
16495
|
isBlocked && "cursor-not-allowed",
|
|
16534
16496
|
loading && "cursor-progress"
|
|
16535
16497
|
);
|
|
16536
|
-
return /* @__PURE__ */ (0,
|
|
16498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16537
16499
|
"div",
|
|
16538
16500
|
{
|
|
16539
16501
|
ref: containerRef,
|
|
@@ -16544,9 +16506,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16544
16506
|
className
|
|
16545
16507
|
),
|
|
16546
16508
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16547
|
-
children: /* @__PURE__ */ (0,
|
|
16548
|
-
/* @__PURE__ */ (0,
|
|
16549
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
16509
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
16510
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative w-full", children: [
|
|
16511
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
16550
16512
|
"button",
|
|
16551
16513
|
{
|
|
16552
16514
|
ref: mobileTriggerRef,
|
|
@@ -16565,8 +16527,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16565
16527
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16566
16528
|
),
|
|
16567
16529
|
children: [
|
|
16568
|
-
/* @__PURE__ */ (0,
|
|
16569
|
-
/* @__PURE__ */ (0,
|
|
16530
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
16531
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16570
16532
|
import_lucide_react49.ChevronDown,
|
|
16571
16533
|
{
|
|
16572
16534
|
size: 16,
|
|
@@ -16578,14 +16540,14 @@ var Datepicker = React63.forwardRef(
|
|
|
16578
16540
|
) })
|
|
16579
16541
|
]
|
|
16580
16542
|
}
|
|
16581
|
-
) : /* @__PURE__ */ (0,
|
|
16543
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
16582
16544
|
"div",
|
|
16583
16545
|
{
|
|
16584
16546
|
className: cn(
|
|
16585
16547
|
"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)]"
|
|
16586
16548
|
),
|
|
16587
16549
|
children: [
|
|
16588
|
-
/* @__PURE__ */ (0,
|
|
16550
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16589
16551
|
"input",
|
|
16590
16552
|
{
|
|
16591
16553
|
ref: dayInputRef,
|
|
@@ -16607,8 +16569,8 @@ var Datepicker = React63.forwardRef(
|
|
|
16607
16569
|
className: subInputClass
|
|
16608
16570
|
}
|
|
16609
16571
|
) }),
|
|
16610
|
-
/* @__PURE__ */ (0,
|
|
16611
|
-
/* @__PURE__ */ (0,
|
|
16572
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative flex h-full min-w-0 items-center gap-1 px-2 before:absolute before:inset-y-3 before:left-0 before:w-px before:bg-[var(--chekin-color-gray-3)] before:content-[''] after:absolute after:inset-y-3 after:right-0 after:w-px after:bg-[var(--chekin-color-gray-3)] after:content-[''] sm:px-3", children: [
|
|
16573
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16612
16574
|
"input",
|
|
16613
16575
|
{
|
|
16614
16576
|
ref: monthInputRef,
|
|
@@ -16651,7 +16613,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16651
16613
|
)
|
|
16652
16614
|
}
|
|
16653
16615
|
),
|
|
16654
|
-
/* @__PURE__ */ (0,
|
|
16616
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16655
16617
|
import_lucide_react49.ChevronDown,
|
|
16656
16618
|
{
|
|
16657
16619
|
size: 14,
|
|
@@ -16668,7 +16630,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16668
16630
|
}
|
|
16669
16631
|
)
|
|
16670
16632
|
] }),
|
|
16671
|
-
/* @__PURE__ */ (0,
|
|
16633
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16672
16634
|
"input",
|
|
16673
16635
|
{
|
|
16674
16636
|
ref: yearInputRef,
|
|
@@ -16693,7 +16655,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16693
16655
|
]
|
|
16694
16656
|
}
|
|
16695
16657
|
),
|
|
16696
|
-
showCoverage && /* @__PURE__ */ (0,
|
|
16658
|
+
showCoverage && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16697
16659
|
"div",
|
|
16698
16660
|
{
|
|
16699
16661
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16701,7 +16663,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16701
16663
|
"aria-hidden": "true"
|
|
16702
16664
|
}
|
|
16703
16665
|
),
|
|
16704
|
-
/* @__PURE__ */ (0,
|
|
16666
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16705
16667
|
Fieldset,
|
|
16706
16668
|
{
|
|
16707
16669
|
isFocused,
|
|
@@ -16719,9 +16681,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16719
16681
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16720
16682
|
}
|
|
16721
16683
|
),
|
|
16722
|
-
isMonthOpen && !isMobile3 && /* @__PURE__ */ (0,
|
|
16684
|
+
isMonthOpen && !isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "absolute left-0 right-0 top-full z-30 mx-auto mt-1 w-full max-w-[260px] overflow-hidden rounded-md bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)] sm:left-1/2 sm:right-auto sm:-translate-x-1/2", children: monthPanelContent })
|
|
16723
16685
|
] }),
|
|
16724
|
-
isMobile3 && /* @__PURE__ */ (0,
|
|
16686
|
+
isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16725
16687
|
AirbnbDatePickerContent,
|
|
16726
16688
|
{
|
|
16727
16689
|
baseId: wheelBaseId,
|
|
@@ -16749,9 +16711,9 @@ var Datepicker = React63.forwardRef(
|
|
|
16749
16711
|
onOptionSelect: wheel.handleOptionSelect
|
|
16750
16712
|
}
|
|
16751
16713
|
),
|
|
16752
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
16753
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
16754
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
16714
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
16715
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16716
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16755
16717
|
FieldErrorMessage,
|
|
16756
16718
|
{
|
|
16757
16719
|
id: errorId,
|
|
@@ -16766,7 +16728,7 @@ var Datepicker = React63.forwardRef(
|
|
|
16766
16728
|
);
|
|
16767
16729
|
|
|
16768
16730
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16769
|
-
var
|
|
16731
|
+
var React66 = __toESM(require("react"), 1);
|
|
16770
16732
|
var import_react_i18next40 = require("react-i18next");
|
|
16771
16733
|
|
|
16772
16734
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16845,7 +16807,7 @@ var createDisabledMatchers = ({
|
|
|
16845
16807
|
};
|
|
16846
16808
|
|
|
16847
16809
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16848
|
-
var
|
|
16810
|
+
var React63 = __toESM(require("react"), 1);
|
|
16849
16811
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16850
16812
|
function useRangeValue({
|
|
16851
16813
|
value: externalValue,
|
|
@@ -16854,10 +16816,10 @@ function useRangeValue({
|
|
|
16854
16816
|
name
|
|
16855
16817
|
}) {
|
|
16856
16818
|
const isControlled = externalValue !== void 0;
|
|
16857
|
-
const [draft, setDraft] =
|
|
16819
|
+
const [draft, setDraft] = React63.useState(
|
|
16858
16820
|
isControlled ? externalValue : defaultValue
|
|
16859
16821
|
);
|
|
16860
|
-
const lastExternalKeyRef =
|
|
16822
|
+
const lastExternalKeyRef = React63.useRef(getRangeKey(externalValue));
|
|
16861
16823
|
if (isControlled) {
|
|
16862
16824
|
const externalKey = getRangeKey(externalValue);
|
|
16863
16825
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16865,7 +16827,7 @@ function useRangeValue({
|
|
|
16865
16827
|
setDraft(externalValue);
|
|
16866
16828
|
}
|
|
16867
16829
|
}
|
|
16868
|
-
const commit =
|
|
16830
|
+
const commit = React63.useCallback(
|
|
16869
16831
|
(next) => {
|
|
16870
16832
|
setDraft(next);
|
|
16871
16833
|
if (next === void 0) {
|
|
@@ -16880,7 +16842,7 @@ function useRangeValue({
|
|
|
16880
16842
|
}
|
|
16881
16843
|
|
|
16882
16844
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16883
|
-
var
|
|
16845
|
+
var React64 = __toESM(require("react"), 1);
|
|
16884
16846
|
function useRangeTextInputs({
|
|
16885
16847
|
value,
|
|
16886
16848
|
format: format2,
|
|
@@ -16888,13 +16850,13 @@ function useRangeTextInputs({
|
|
|
16888
16850
|
onCommit,
|
|
16889
16851
|
onBlur
|
|
16890
16852
|
}) {
|
|
16891
|
-
const [fromText, setFromText] =
|
|
16892
|
-
const [toText, setToText] =
|
|
16893
|
-
|
|
16853
|
+
const [fromText, setFromText] = React64.useState(value?.from ? format2(value.from) : "");
|
|
16854
|
+
const [toText, setToText] = React64.useState(value?.to ? format2(value.to) : "");
|
|
16855
|
+
React64.useEffect(() => {
|
|
16894
16856
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16895
16857
|
setToText(value?.to ? format2(value.to) : "");
|
|
16896
16858
|
}, [format2, value?.from, value?.to]);
|
|
16897
|
-
const handleFromBlur =
|
|
16859
|
+
const handleFromBlur = React64.useCallback(() => {
|
|
16898
16860
|
if (!fromText) {
|
|
16899
16861
|
const next = { from: void 0, to: value?.to };
|
|
16900
16862
|
onCommit(next);
|
|
@@ -16911,7 +16873,7 @@ function useRangeTextInputs({
|
|
|
16911
16873
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16912
16874
|
return void 0;
|
|
16913
16875
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16914
|
-
const handleToBlur =
|
|
16876
|
+
const handleToBlur = React64.useCallback(() => {
|
|
16915
16877
|
if (!toText) {
|
|
16916
16878
|
const next = { from: value?.from, to: void 0 };
|
|
16917
16879
|
onCommit(next);
|
|
@@ -16938,21 +16900,21 @@ function useRangeTextInputs({
|
|
|
16938
16900
|
}
|
|
16939
16901
|
|
|
16940
16902
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16941
|
-
var
|
|
16903
|
+
var React65 = __toESM(require("react"), 1);
|
|
16942
16904
|
function useRangeMonthSync(value) {
|
|
16943
|
-
const isPreloadedRef =
|
|
16944
|
-
const [month, setMonth] =
|
|
16945
|
-
|
|
16905
|
+
const isPreloadedRef = React65.useRef(false);
|
|
16906
|
+
const [month, setMonth] = React65.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16907
|
+
React65.useEffect(() => {
|
|
16946
16908
|
if (value?.from && !isPreloadedRef.current) {
|
|
16947
16909
|
setMonth(value.from);
|
|
16948
16910
|
isPreloadedRef.current = true;
|
|
16949
16911
|
}
|
|
16950
16912
|
}, [value?.from]);
|
|
16951
|
-
const syncMonthToValue =
|
|
16913
|
+
const syncMonthToValue = React65.useCallback((next) => {
|
|
16952
16914
|
isPreloadedRef.current = true;
|
|
16953
16915
|
if (next?.from) setMonth(next.from);
|
|
16954
16916
|
}, []);
|
|
16955
|
-
const resetPreload =
|
|
16917
|
+
const resetPreload = React65.useCallback(() => {
|
|
16956
16918
|
isPreloadedRef.current = false;
|
|
16957
16919
|
}, []);
|
|
16958
16920
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -16978,7 +16940,7 @@ function resolveRangeSelection({
|
|
|
16978
16940
|
|
|
16979
16941
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
16980
16942
|
var import_lucide_react50 = require("lucide-react");
|
|
16981
|
-
var
|
|
16943
|
+
var import_jsx_runtime174 = require("react/jsx-runtime");
|
|
16982
16944
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
16983
16945
|
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)]";
|
|
16984
16946
|
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";
|
|
@@ -17020,7 +16982,7 @@ function DateRangeInputs({
|
|
|
17020
16982
|
isBlocked && "cursor-not-allowed",
|
|
17021
16983
|
loading && "cursor-progress"
|
|
17022
16984
|
);
|
|
17023
|
-
return /* @__PURE__ */ (0,
|
|
16985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
|
|
17024
16986
|
"div",
|
|
17025
16987
|
{
|
|
17026
16988
|
className: cn(
|
|
@@ -17029,7 +16991,7 @@ function DateRangeInputs({
|
|
|
17029
16991
|
),
|
|
17030
16992
|
onClick: onRowClick,
|
|
17031
16993
|
children: [
|
|
17032
|
-
/* @__PURE__ */ (0,
|
|
16994
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17033
16995
|
"input",
|
|
17034
16996
|
{
|
|
17035
16997
|
ref: fromInputRef,
|
|
@@ -17053,7 +17015,7 @@ function DateRangeInputs({
|
|
|
17053
17015
|
)
|
|
17054
17016
|
}
|
|
17055
17017
|
),
|
|
17056
|
-
/* @__PURE__ */ (0,
|
|
17018
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17057
17019
|
"span",
|
|
17058
17020
|
{
|
|
17059
17021
|
"aria-hidden": "true",
|
|
@@ -17064,7 +17026,7 @@ function DateRangeInputs({
|
|
|
17064
17026
|
children: "\u2192"
|
|
17065
17027
|
}
|
|
17066
17028
|
),
|
|
17067
|
-
/* @__PURE__ */ (0,
|
|
17029
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17068
17030
|
"input",
|
|
17069
17031
|
{
|
|
17070
17032
|
ref: toInputRef,
|
|
@@ -17088,8 +17050,8 @@ function DateRangeInputs({
|
|
|
17088
17050
|
)
|
|
17089
17051
|
}
|
|
17090
17052
|
),
|
|
17091
|
-
/* @__PURE__ */ (0,
|
|
17092
|
-
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0,
|
|
17053
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
17054
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17093
17055
|
"button",
|
|
17094
17056
|
{
|
|
17095
17057
|
type: "button",
|
|
@@ -17097,10 +17059,10 @@ function DateRangeInputs({
|
|
|
17097
17059
|
onClick: onReset,
|
|
17098
17060
|
className: iconButtonClass,
|
|
17099
17061
|
"aria-label": clearLabel,
|
|
17100
|
-
children: /* @__PURE__ */ (0,
|
|
17062
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react50.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17101
17063
|
}
|
|
17102
17064
|
),
|
|
17103
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0,
|
|
17065
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
17104
17066
|
"button",
|
|
17105
17067
|
{
|
|
17106
17068
|
type: "button",
|
|
@@ -17112,7 +17074,7 @@ function DateRangeInputs({
|
|
|
17112
17074
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
17113
17075
|
),
|
|
17114
17076
|
"aria-label": openCalendarLabel,
|
|
17115
|
-
children: /* @__PURE__ */ (0,
|
|
17077
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react50.CalendarDays, { size: 18 })
|
|
17116
17078
|
}
|
|
17117
17079
|
)
|
|
17118
17080
|
] })
|
|
@@ -17122,7 +17084,7 @@ function DateRangeInputs({
|
|
|
17122
17084
|
}
|
|
17123
17085
|
|
|
17124
17086
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
17125
|
-
var
|
|
17087
|
+
var import_jsx_runtime175 = require("react/jsx-runtime");
|
|
17126
17088
|
function DateRangeCalendar({
|
|
17127
17089
|
value,
|
|
17128
17090
|
month,
|
|
@@ -17138,7 +17100,7 @@ function DateRangeCalendar({
|
|
|
17138
17100
|
components,
|
|
17139
17101
|
...dayPickerProps
|
|
17140
17102
|
}) {
|
|
17141
|
-
return /* @__PURE__ */ (0,
|
|
17103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17142
17104
|
Calendar,
|
|
17143
17105
|
{
|
|
17144
17106
|
mode: "range",
|
|
@@ -17161,7 +17123,7 @@ function DateRangeCalendar({
|
|
|
17161
17123
|
}
|
|
17162
17124
|
|
|
17163
17125
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
17164
|
-
var
|
|
17126
|
+
var import_jsx_runtime176 = require("react/jsx-runtime");
|
|
17165
17127
|
function DateRangePopover({
|
|
17166
17128
|
isOpen,
|
|
17167
17129
|
isMobile: isMobile3,
|
|
@@ -17173,30 +17135,30 @@ function DateRangePopover({
|
|
|
17173
17135
|
}) {
|
|
17174
17136
|
if (!isOpen) return null;
|
|
17175
17137
|
if (isMobile3) {
|
|
17176
|
-
return /* @__PURE__ */ (0,
|
|
17138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17177
17139
|
Drawer,
|
|
17178
17140
|
{
|
|
17179
17141
|
open: isOpen,
|
|
17180
17142
|
onOpenChange: (next) => {
|
|
17181
17143
|
if (!next) onClose();
|
|
17182
17144
|
},
|
|
17183
|
-
children: /* @__PURE__ */ (0,
|
|
17145
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(
|
|
17184
17146
|
DrawerContent,
|
|
17185
17147
|
{
|
|
17186
17148
|
onClose,
|
|
17187
17149
|
lockScroll: false,
|
|
17188
17150
|
className: "max-h-[calc(100vh-1rem)]",
|
|
17189
17151
|
children: [
|
|
17190
|
-
/* @__PURE__ */ (0,
|
|
17191
|
-
/* @__PURE__ */ (0,
|
|
17192
|
-
/* @__PURE__ */ (0,
|
|
17152
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
17153
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
17154
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
17193
17155
|
]
|
|
17194
17156
|
}
|
|
17195
17157
|
)
|
|
17196
17158
|
}
|
|
17197
17159
|
);
|
|
17198
17160
|
}
|
|
17199
|
-
return /* @__PURE__ */ (0,
|
|
17161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17200
17162
|
"div",
|
|
17201
17163
|
{
|
|
17202
17164
|
className: cn(
|
|
@@ -17209,8 +17171,8 @@ function DateRangePopover({
|
|
|
17209
17171
|
}
|
|
17210
17172
|
|
|
17211
17173
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17212
|
-
var
|
|
17213
|
-
var DateRangePicker =
|
|
17174
|
+
var import_jsx_runtime177 = require("react/jsx-runtime");
|
|
17175
|
+
var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
17214
17176
|
label,
|
|
17215
17177
|
value: externalValue,
|
|
17216
17178
|
defaultValue,
|
|
@@ -17244,20 +17206,20 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17244
17206
|
components: customComponents,
|
|
17245
17207
|
...dayPickerProps
|
|
17246
17208
|
}, ref) {
|
|
17247
|
-
const containerRef =
|
|
17248
|
-
const fromInputRef =
|
|
17249
|
-
const toInputRef =
|
|
17250
|
-
const reactId =
|
|
17209
|
+
const containerRef = React66.useRef(null);
|
|
17210
|
+
const fromInputRef = React66.useRef(null);
|
|
17211
|
+
const toInputRef = React66.useRef(null);
|
|
17212
|
+
const reactId = React66.useId();
|
|
17251
17213
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17252
17214
|
const fromId = `${baseId}-from`;
|
|
17253
17215
|
const toId = `${baseId}-to`;
|
|
17254
17216
|
const labelId = `${baseId}-label`;
|
|
17255
17217
|
const errorId = `${baseId}-error`;
|
|
17256
|
-
const normalizedValue =
|
|
17218
|
+
const normalizedValue = React66.useMemo(() => {
|
|
17257
17219
|
if (externalValue === void 0) return void 0;
|
|
17258
17220
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17259
17221
|
}, [externalValue]);
|
|
17260
|
-
const normalizedDefaultValue =
|
|
17222
|
+
const normalizedDefaultValue = React66.useMemo(() => {
|
|
17261
17223
|
if (defaultValue === void 0) return void 0;
|
|
17262
17224
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17263
17225
|
}, [defaultValue]);
|
|
@@ -17267,10 +17229,10 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17267
17229
|
onChange,
|
|
17268
17230
|
name
|
|
17269
17231
|
});
|
|
17270
|
-
const normalizedMinDate =
|
|
17271
|
-
const normalizedMaxDate =
|
|
17272
|
-
const formatter =
|
|
17273
|
-
const parser =
|
|
17232
|
+
const normalizedMinDate = React66.useMemo(() => toDate(minDate), [minDate]);
|
|
17233
|
+
const normalizedMaxDate = React66.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17234
|
+
const formatter = React66.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17235
|
+
const parser = React66.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17274
17236
|
const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
|
|
17275
17237
|
value,
|
|
17276
17238
|
format: formatter,
|
|
@@ -17279,9 +17241,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17279
17241
|
onBlur
|
|
17280
17242
|
});
|
|
17281
17243
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17282
|
-
const [isOpen, setIsOpen] =
|
|
17283
|
-
const [focusedInput, setFocusedInput] =
|
|
17284
|
-
const [autoFocus, setAutoFocus] =
|
|
17244
|
+
const [isOpen, setIsOpen] = React66.useState(false);
|
|
17245
|
+
const [focusedInput, setFocusedInput] = React66.useState(null);
|
|
17246
|
+
const [autoFocus, setAutoFocus] = React66.useState(false);
|
|
17285
17247
|
const isMobile3 = useIsMobile();
|
|
17286
17248
|
const { t } = (0, import_react_i18next40.useTranslation)();
|
|
17287
17249
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17292,13 +17254,13 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17292
17254
|
const isFocused = focusedInput !== null || isOpen;
|
|
17293
17255
|
const wrapperWidth = toCssSize(width);
|
|
17294
17256
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17295
|
-
const closeCalendar =
|
|
17257
|
+
const closeCalendar = React66.useCallback(() => {
|
|
17296
17258
|
setIsOpen(false);
|
|
17297
17259
|
setFocusedInput(null);
|
|
17298
17260
|
setAutoFocus(false);
|
|
17299
17261
|
if (value?.from) setMonth(value.from);
|
|
17300
17262
|
}, [setMonth, value?.from]);
|
|
17301
|
-
const openCalendar =
|
|
17263
|
+
const openCalendar = React66.useCallback(() => {
|
|
17302
17264
|
if (isBlocked || readOnly) return;
|
|
17303
17265
|
setIsOpen(true);
|
|
17304
17266
|
}, [isBlocked, readOnly]);
|
|
@@ -17307,7 +17269,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17307
17269
|
onOutsideClick: closeCalendar,
|
|
17308
17270
|
isDisabled: !isOpen || isMobile3
|
|
17309
17271
|
});
|
|
17310
|
-
const handlePickerChange =
|
|
17272
|
+
const handlePickerChange = React66.useCallback(
|
|
17311
17273
|
(range, pickedDate) => {
|
|
17312
17274
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17313
17275
|
previous: value,
|
|
@@ -17328,7 +17290,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17328
17290
|
setToText("");
|
|
17329
17291
|
setMonth(/* @__PURE__ */ new Date());
|
|
17330
17292
|
};
|
|
17331
|
-
const disabledMatchers =
|
|
17293
|
+
const disabledMatchers = React66.useMemo(
|
|
17332
17294
|
() => createDisabledMatchers({
|
|
17333
17295
|
minDate: normalizedMinDate,
|
|
17334
17296
|
maxDate: normalizedMaxDate,
|
|
@@ -17347,7 +17309,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17347
17309
|
openCalendar();
|
|
17348
17310
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17349
17311
|
};
|
|
17350
|
-
|
|
17312
|
+
React66.useImperativeHandle(
|
|
17351
17313
|
ref,
|
|
17352
17314
|
() => ({
|
|
17353
17315
|
setDateRange: (range) => {
|
|
@@ -17370,7 +17332,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17370
17332
|
syncMonthToValue
|
|
17371
17333
|
]
|
|
17372
17334
|
);
|
|
17373
|
-
return /* @__PURE__ */ (0,
|
|
17335
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17374
17336
|
"div",
|
|
17375
17337
|
{
|
|
17376
17338
|
ref: containerRef,
|
|
@@ -17381,9 +17343,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17381
17343
|
className
|
|
17382
17344
|
),
|
|
17383
17345
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17384
|
-
children: /* @__PURE__ */ (0,
|
|
17385
|
-
/* @__PURE__ */ (0,
|
|
17386
|
-
/* @__PURE__ */ (0,
|
|
17346
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
17347
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: "relative w-full", children: [
|
|
17348
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17387
17349
|
DateRangeInputs,
|
|
17388
17350
|
{
|
|
17389
17351
|
fromId,
|
|
@@ -17434,7 +17396,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17434
17396
|
onToggleCalendar: toggleCalendar
|
|
17435
17397
|
}
|
|
17436
17398
|
),
|
|
17437
|
-
/* @__PURE__ */ (0,
|
|
17399
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17438
17400
|
Fieldset,
|
|
17439
17401
|
{
|
|
17440
17402
|
isFocused,
|
|
@@ -17451,7 +17413,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17451
17413
|
tooltip
|
|
17452
17414
|
}
|
|
17453
17415
|
),
|
|
17454
|
-
/* @__PURE__ */ (0,
|
|
17416
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17455
17417
|
DateRangePopover,
|
|
17456
17418
|
{
|
|
17457
17419
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17460,7 +17422,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17460
17422
|
drawerTitle,
|
|
17461
17423
|
drawerDescription,
|
|
17462
17424
|
onClose: closeCalendar,
|
|
17463
|
-
children: /* @__PURE__ */ (0,
|
|
17425
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17464
17426
|
DateRangeCalendar,
|
|
17465
17427
|
{
|
|
17466
17428
|
value,
|
|
@@ -17481,7 +17443,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17481
17443
|
}
|
|
17482
17444
|
)
|
|
17483
17445
|
] }),
|
|
17484
|
-
/* @__PURE__ */ (0,
|
|
17446
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17485
17447
|
DateRangePopover,
|
|
17486
17448
|
{
|
|
17487
17449
|
isOpen: isOpen && isMobile3,
|
|
@@ -17490,7 +17452,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17490
17452
|
drawerTitle,
|
|
17491
17453
|
drawerDescription,
|
|
17492
17454
|
onClose: closeCalendar,
|
|
17493
|
-
children: /* @__PURE__ */ (0,
|
|
17455
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17494
17456
|
DateRangeCalendar,
|
|
17495
17457
|
{
|
|
17496
17458
|
value,
|
|
@@ -17510,9 +17472,9 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17510
17472
|
)
|
|
17511
17473
|
}
|
|
17512
17474
|
),
|
|
17513
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
17514
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
17515
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
17475
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17476
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17477
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17516
17478
|
FieldErrorMessage,
|
|
17517
17479
|
{
|
|
17518
17480
|
id: errorId,
|
|
@@ -17526,7 +17488,7 @@ var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
|
17526
17488
|
});
|
|
17527
17489
|
|
|
17528
17490
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17529
|
-
var
|
|
17491
|
+
var React67 = __toESM(require("react"), 1);
|
|
17530
17492
|
var import_react_i18next41 = require("react-i18next");
|
|
17531
17493
|
var import_date_fns4 = require("date-fns");
|
|
17532
17494
|
var import_react_day_picker2 = require("react-day-picker");
|
|
@@ -17549,11 +17511,11 @@ function useValidateDates({
|
|
|
17549
17511
|
const { t } = (0, import_react_i18next41.useTranslation)();
|
|
17550
17512
|
const handleError = useEvent(onError);
|
|
17551
17513
|
const handleSuccess = useEvent(onSuccess);
|
|
17552
|
-
const errorFormatter =
|
|
17514
|
+
const errorFormatter = React67.useMemo(
|
|
17553
17515
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17554
17516
|
[displayFormat]
|
|
17555
17517
|
);
|
|
17556
|
-
const validateDates =
|
|
17518
|
+
const validateDates = React67.useCallback(
|
|
17557
17519
|
(dates) => {
|
|
17558
17520
|
const startDate = dates?.from;
|
|
17559
17521
|
const endDate = dates?.to;
|
|
@@ -17603,9 +17565,9 @@ function useValidateDates({
|
|
|
17603
17565
|
}
|
|
17604
17566
|
|
|
17605
17567
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17606
|
-
var
|
|
17568
|
+
var React68 = __toESM(require("react"), 1);
|
|
17607
17569
|
var import_date_fns5 = require("date-fns");
|
|
17608
|
-
var
|
|
17570
|
+
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
17609
17571
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17610
17572
|
function parseTime(value) {
|
|
17611
17573
|
return (0, import_date_fns5.parse)(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17647,24 +17609,24 @@ var FORMAT_SETTINGS = {
|
|
|
17647
17609
|
},
|
|
17648
17610
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17649
17611
|
};
|
|
17650
|
-
var TimePicker =
|
|
17651
|
-
const resolvedOptions =
|
|
17612
|
+
var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17613
|
+
const resolvedOptions = React68.useMemo(() => {
|
|
17652
17614
|
if (options) return options;
|
|
17653
17615
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17654
17616
|
return buildOptions(settings);
|
|
17655
17617
|
}, [formatName, options, timeSettings]);
|
|
17656
|
-
return /* @__PURE__ */ (0,
|
|
17618
|
+
return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17657
17619
|
});
|
|
17658
17620
|
|
|
17659
17621
|
// src/dashboard/file-input/FileInput.tsx
|
|
17660
|
-
var
|
|
17622
|
+
var React69 = __toESM(require("react"), 1);
|
|
17661
17623
|
var import_lucide_react51 = require("lucide-react");
|
|
17662
17624
|
var import_react_i18next42 = require("react-i18next");
|
|
17663
|
-
var
|
|
17625
|
+
var import_jsx_runtime179 = require("react/jsx-runtime");
|
|
17664
17626
|
function defaultDownload(url) {
|
|
17665
17627
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17666
17628
|
}
|
|
17667
|
-
var FileInput =
|
|
17629
|
+
var FileInput = React69.forwardRef(function FileInput2({
|
|
17668
17630
|
label,
|
|
17669
17631
|
value,
|
|
17670
17632
|
onChange,
|
|
@@ -17686,12 +17648,12 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17686
17648
|
width,
|
|
17687
17649
|
downloadLabel
|
|
17688
17650
|
}, ref) {
|
|
17689
|
-
const internalRef =
|
|
17651
|
+
const internalRef = React69.useRef(null);
|
|
17690
17652
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17691
17653
|
const { t } = (0, import_react_i18next42.useTranslation)();
|
|
17692
17654
|
const resolvedLabel = label ?? t("upload_file");
|
|
17693
17655
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17694
|
-
const reactId =
|
|
17656
|
+
const reactId = React69.useId();
|
|
17695
17657
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17696
17658
|
const labelId = `${inputId}-label`;
|
|
17697
17659
|
const errorId = `${inputId}-error`;
|
|
@@ -17717,7 +17679,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17717
17679
|
event.stopPropagation();
|
|
17718
17680
|
if (isUrl) onDownload(value);
|
|
17719
17681
|
};
|
|
17720
|
-
return /* @__PURE__ */ (0,
|
|
17682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17721
17683
|
"label",
|
|
17722
17684
|
{
|
|
17723
17685
|
htmlFor: inputId,
|
|
@@ -17730,7 +17692,7 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17730
17692
|
),
|
|
17731
17693
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17732
17694
|
children: [
|
|
17733
|
-
/* @__PURE__ */ (0,
|
|
17695
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17734
17696
|
"input",
|
|
17735
17697
|
{
|
|
17736
17698
|
ref: inputRef,
|
|
@@ -17746,9 +17708,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17746
17708
|
"aria-invalid": isInvalid
|
|
17747
17709
|
}
|
|
17748
17710
|
),
|
|
17749
|
-
/* @__PURE__ */ (0,
|
|
17750
|
-
/* @__PURE__ */ (0,
|
|
17751
|
-
/* @__PURE__ */ (0,
|
|
17711
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "relative w-full", children: [
|
|
17712
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "relative w-full", children: [
|
|
17713
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17752
17714
|
"div",
|
|
17753
17715
|
{
|
|
17754
17716
|
className: cn(
|
|
@@ -17756,25 +17718,25 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17756
17718
|
isEmpty && "bg-[var(--empty-field-background)]"
|
|
17757
17719
|
),
|
|
17758
17720
|
children: [
|
|
17759
|
-
hasFileChip ? /* @__PURE__ */ (0,
|
|
17721
|
+
hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17760
17722
|
"div",
|
|
17761
17723
|
{
|
|
17762
17724
|
className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
|
|
17763
17725
|
onClick: (event) => event.preventDefault(),
|
|
17764
17726
|
children: [
|
|
17765
|
-
isUrl ? /* @__PURE__ */ (0,
|
|
17727
|
+
isUrl ? /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
|
|
17766
17728
|
"button",
|
|
17767
17729
|
{
|
|
17768
17730
|
type: "button",
|
|
17769
17731
|
onClick: handleDownload,
|
|
17770
17732
|
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",
|
|
17771
17733
|
children: [
|
|
17772
|
-
/* @__PURE__ */ (0,
|
|
17773
|
-
/* @__PURE__ */ (0,
|
|
17734
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
17735
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react51.Download, { size: 15 })
|
|
17774
17736
|
]
|
|
17775
17737
|
}
|
|
17776
|
-
) : /* @__PURE__ */ (0,
|
|
17777
|
-
/* @__PURE__ */ (0,
|
|
17738
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
17739
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17778
17740
|
"button",
|
|
17779
17741
|
{
|
|
17780
17742
|
type: "button",
|
|
@@ -17782,17 +17744,17 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17782
17744
|
onClick: handleClear,
|
|
17783
17745
|
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]",
|
|
17784
17746
|
"aria-label": t("remove_file"),
|
|
17785
|
-
children: /* @__PURE__ */ (0,
|
|
17747
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react51.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17786
17748
|
}
|
|
17787
17749
|
)
|
|
17788
17750
|
]
|
|
17789
17751
|
}
|
|
17790
|
-
) : /* @__PURE__ */ (0,
|
|
17791
|
-
/* @__PURE__ */ (0,
|
|
17752
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
17753
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react51.Paperclip, { size: 20 }) })
|
|
17792
17754
|
]
|
|
17793
17755
|
}
|
|
17794
17756
|
),
|
|
17795
|
-
/* @__PURE__ */ (0,
|
|
17757
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17796
17758
|
Fieldset,
|
|
17797
17759
|
{
|
|
17798
17760
|
isFocused: false,
|
|
@@ -17810,9 +17772,9 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17810
17772
|
}
|
|
17811
17773
|
)
|
|
17812
17774
|
] }),
|
|
17813
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
17814
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
17815
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
17775
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17776
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17777
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
|
|
17816
17778
|
FieldErrorMessage,
|
|
17817
17779
|
{
|
|
17818
17780
|
id: errorId,
|
|
@@ -17827,10 +17789,10 @@ var FileInput = React70.forwardRef(function FileInput2({
|
|
|
17827
17789
|
});
|
|
17828
17790
|
|
|
17829
17791
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17830
|
-
var
|
|
17831
|
-
var
|
|
17792
|
+
var React70 = __toESM(require("react"), 1);
|
|
17793
|
+
var import_jsx_runtime180 = require("react/jsx-runtime");
|
|
17832
17794
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17833
|
-
var SelectIconsBox =
|
|
17795
|
+
var SelectIconsBox = React70.forwardRef(
|
|
17834
17796
|
function SelectIconsBox2({
|
|
17835
17797
|
children,
|
|
17836
17798
|
icons,
|
|
@@ -17845,10 +17807,10 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17845
17807
|
className,
|
|
17846
17808
|
boxClassName
|
|
17847
17809
|
}, ref) {
|
|
17848
|
-
const containerRef =
|
|
17810
|
+
const containerRef = React70.useRef(null);
|
|
17849
17811
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17850
17812
|
const isControlled = controlledOpen !== void 0;
|
|
17851
|
-
const [internalOpen, setInternalOpen] =
|
|
17813
|
+
const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
|
|
17852
17814
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17853
17815
|
const setOpen = (next) => {
|
|
17854
17816
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17874,7 +17836,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17874
17836
|
);
|
|
17875
17837
|
focusable?.focus();
|
|
17876
17838
|
};
|
|
17877
|
-
return /* @__PURE__ */ (0,
|
|
17839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
|
|
17878
17840
|
"div",
|
|
17879
17841
|
{
|
|
17880
17842
|
ref: combinedContainerRef,
|
|
@@ -17884,7 +17846,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17884
17846
|
className: cn("relative inline-block outline-none", className),
|
|
17885
17847
|
children: [
|
|
17886
17848
|
children,
|
|
17887
|
-
isOpen && /* @__PURE__ */ (0,
|
|
17849
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
17888
17850
|
"div",
|
|
17889
17851
|
{
|
|
17890
17852
|
className: cn(
|
|
@@ -17895,7 +17857,7 @@ var SelectIconsBox = React71.forwardRef(
|
|
|
17895
17857
|
boxClassName
|
|
17896
17858
|
),
|
|
17897
17859
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
17898
|
-
children: icons.map((iconName) => /* @__PURE__ */ (0,
|
|
17860
|
+
children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
17899
17861
|
"button",
|
|
17900
17862
|
{
|
|
17901
17863
|
type: "button",
|
|
@@ -17978,14 +17940,14 @@ function getErrorMessage(error) {
|
|
|
17978
17940
|
|
|
17979
17941
|
// src/lib/toastResponseError.tsx
|
|
17980
17942
|
var import_i18next = __toESM(require("i18next"), 1);
|
|
17981
|
-
var
|
|
17943
|
+
var import_jsx_runtime181 = require("react/jsx-runtime");
|
|
17982
17944
|
function addSupportEmailToMessage(message, prefixText) {
|
|
17983
17945
|
if (typeof message !== "string") {
|
|
17984
17946
|
return message;
|
|
17985
17947
|
}
|
|
17986
17948
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
17987
|
-
return /* @__PURE__ */ (0,
|
|
17988
|
-
/* @__PURE__ */ (0,
|
|
17949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { children: [
|
|
17950
|
+
/* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { children: builtMessage }),
|
|
17989
17951
|
import_i18next.default.t("reach_us_at_email")
|
|
17990
17952
|
] });
|
|
17991
17953
|
}
|
|
@@ -18001,12 +17963,12 @@ function toastResponseError(error, options = {}) {
|
|
|
18001
17963
|
|
|
18002
17964
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
18003
17965
|
var import_react89 = require("react");
|
|
18004
|
-
var
|
|
17966
|
+
var import_jsx_runtime182 = require("react/jsx-runtime");
|
|
18005
17967
|
var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
18006
17968
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
18007
17969
|
const inputId = (0, import_react89.useId)();
|
|
18008
|
-
return /* @__PURE__ */ (0,
|
|
18009
|
-
/* @__PURE__ */ (0,
|
|
17970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: cn("relative", className), children: [
|
|
17971
|
+
/* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
|
|
18010
17972
|
"textarea",
|
|
18011
17973
|
{
|
|
18012
17974
|
ref,
|
|
@@ -18022,7 +17984,7 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18022
17984
|
...textareaProps
|
|
18023
17985
|
}
|
|
18024
17986
|
),
|
|
18025
|
-
label && /* @__PURE__ */ (0,
|
|
17987
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
|
|
18026
17988
|
"label",
|
|
18027
17989
|
{
|
|
18028
17990
|
htmlFor: inputId,
|
|
@@ -18040,15 +18002,15 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18040
18002
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
18041
18003
|
|
|
18042
18004
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18043
|
-
var
|
|
18005
|
+
var React72 = __toESM(require("react"), 1);
|
|
18044
18006
|
var import_lucide_react53 = require("lucide-react");
|
|
18045
18007
|
|
|
18046
18008
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
18047
|
-
var
|
|
18009
|
+
var React71 = __toESM(require("react"), 1);
|
|
18048
18010
|
var import_lucide_react52 = require("lucide-react");
|
|
18049
18011
|
var import_react_i18next43 = require("react-i18next");
|
|
18050
|
-
var
|
|
18051
|
-
var AirbnbFieldTrigger =
|
|
18012
|
+
var import_jsx_runtime183 = require("react/jsx-runtime");
|
|
18013
|
+
var AirbnbFieldTrigger = React71.forwardRef(
|
|
18052
18014
|
({
|
|
18053
18015
|
as = "button",
|
|
18054
18016
|
id,
|
|
@@ -18084,14 +18046,14 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18084
18046
|
const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
|
|
18085
18047
|
const visibleLabelText = labelText ?? label;
|
|
18086
18048
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
18087
|
-
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0,
|
|
18088
|
-
/* @__PURE__ */ (0,
|
|
18089
|
-
optionalLabel && /* @__PURE__ */ (0,
|
|
18049
|
+
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
|
|
18050
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsx)("span", { className: "min-w-0 truncate", children: visibleLabelText }),
|
|
18051
|
+
optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "text-current opacity-70 lowercase", children: [
|
|
18090
18052
|
"(",
|
|
18091
18053
|
optionalLabel,
|
|
18092
18054
|
")"
|
|
18093
18055
|
] }),
|
|
18094
|
-
tooltip && /* @__PURE__ */ (0,
|
|
18056
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18095
18057
|
HelpTooltip,
|
|
18096
18058
|
{
|
|
18097
18059
|
content: tooltip,
|
|
@@ -18106,9 +18068,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18106
18068
|
const hasInvalidState = Boolean(error);
|
|
18107
18069
|
const errorMessage = typeof error === "string" ? error : void 0;
|
|
18108
18070
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18109
|
-
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0,
|
|
18071
|
+
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "flex items-center gap-2", children: [
|
|
18110
18072
|
trailingAdornment,
|
|
18111
|
-
loading && /* @__PURE__ */ (0,
|
|
18073
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18112
18074
|
import_lucide_react52.Loader2,
|
|
18113
18075
|
{
|
|
18114
18076
|
"aria-hidden": "true",
|
|
@@ -18124,8 +18086,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18124
18086
|
disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
|
|
18125
18087
|
className
|
|
18126
18088
|
);
|
|
18127
|
-
const sharedContent = /* @__PURE__ */ (0,
|
|
18128
|
-
/* @__PURE__ */ (0,
|
|
18089
|
+
const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(import_jsx_runtime183.Fragment, { children: [
|
|
18090
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(
|
|
18129
18091
|
"span",
|
|
18130
18092
|
{
|
|
18131
18093
|
className: cn(
|
|
@@ -18134,7 +18096,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18134
18096
|
contentClassName
|
|
18135
18097
|
),
|
|
18136
18098
|
children: [
|
|
18137
|
-
/* @__PURE__ */ (0,
|
|
18099
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18138
18100
|
"span",
|
|
18139
18101
|
{
|
|
18140
18102
|
id: labelId,
|
|
@@ -18147,7 +18109,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18147
18109
|
children: animatedLabel
|
|
18148
18110
|
}
|
|
18149
18111
|
),
|
|
18150
|
-
children ? children : hasValue ? /* @__PURE__ */ (0,
|
|
18112
|
+
children ? children : hasValue ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18151
18113
|
"span",
|
|
18152
18114
|
{
|
|
18153
18115
|
id: valueId,
|
|
@@ -18158,11 +18120,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18158
18120
|
),
|
|
18159
18121
|
children: valueText
|
|
18160
18122
|
}
|
|
18161
|
-
) : /* @__PURE__ */ (0,
|
|
18123
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
18162
18124
|
]
|
|
18163
18125
|
}
|
|
18164
18126
|
),
|
|
18165
|
-
resolvedTrailingAdornment && /* @__PURE__ */ (0,
|
|
18127
|
+
resolvedTrailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18166
18128
|
"span",
|
|
18167
18129
|
{
|
|
18168
18130
|
"aria-hidden": "true",
|
|
@@ -18171,9 +18133,9 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18171
18133
|
}
|
|
18172
18134
|
)
|
|
18173
18135
|
] });
|
|
18174
|
-
return /* @__PURE__ */ (0,
|
|
18175
|
-
topLabel && /* @__PURE__ */ (0,
|
|
18176
|
-
as === "button" ? /* @__PURE__ */ (0,
|
|
18136
|
+
return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { className: "w-full", children: [
|
|
18137
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
|
|
18138
|
+
as === "button" ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18177
18139
|
"button",
|
|
18178
18140
|
{
|
|
18179
18141
|
id,
|
|
@@ -18190,7 +18152,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18190
18152
|
...props,
|
|
18191
18153
|
children: sharedContent
|
|
18192
18154
|
}
|
|
18193
|
-
) : /* @__PURE__ */ (0,
|
|
18155
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18194
18156
|
"div",
|
|
18195
18157
|
{
|
|
18196
18158
|
id,
|
|
@@ -18207,16 +18169,16 @@ var AirbnbFieldTrigger = React72.forwardRef(
|
|
|
18207
18169
|
children: sharedContent
|
|
18208
18170
|
}
|
|
18209
18171
|
),
|
|
18210
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
18172
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
18211
18173
|
] });
|
|
18212
18174
|
}
|
|
18213
18175
|
);
|
|
18214
18176
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
18215
18177
|
|
|
18216
18178
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18217
|
-
var
|
|
18179
|
+
var import_jsx_runtime184 = require("react/jsx-runtime");
|
|
18218
18180
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18219
|
-
var AirbnbDatePicker =
|
|
18181
|
+
var AirbnbDatePicker = React72.forwardRef(
|
|
18220
18182
|
({
|
|
18221
18183
|
label,
|
|
18222
18184
|
topLabel,
|
|
@@ -18241,24 +18203,24 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18241
18203
|
formatValue = formatDateValue
|
|
18242
18204
|
}, ref) => {
|
|
18243
18205
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18244
|
-
const [isOpen, setIsOpen] =
|
|
18245
|
-
const triggerId =
|
|
18246
|
-
const pickerId =
|
|
18247
|
-
const labelId =
|
|
18248
|
-
const valueId =
|
|
18249
|
-
const helperTextId =
|
|
18250
|
-
const errorId =
|
|
18251
|
-
const internalRef =
|
|
18206
|
+
const [isOpen, setIsOpen] = React72.useState(false);
|
|
18207
|
+
const triggerId = React72.useId();
|
|
18208
|
+
const pickerId = React72.useId();
|
|
18209
|
+
const labelId = React72.useId();
|
|
18210
|
+
const valueId = React72.useId();
|
|
18211
|
+
const helperTextId = React72.useId();
|
|
18212
|
+
const errorId = React72.useId();
|
|
18213
|
+
const internalRef = React72.useRef(null);
|
|
18252
18214
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18253
|
-
const monthLabels =
|
|
18254
|
-
const resolvedMinDate =
|
|
18255
|
-
const resolvedMaxDate =
|
|
18256
|
-
const normalizedValue =
|
|
18257
|
-
const normalizedDefaultValue =
|
|
18215
|
+
const monthLabels = React72.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18216
|
+
const resolvedMinDate = React72.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18217
|
+
const resolvedMaxDate = React72.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18218
|
+
const normalizedValue = React72.useMemo(() => normalizeDateValue(value), [value]);
|
|
18219
|
+
const normalizedDefaultValue = React72.useMemo(
|
|
18258
18220
|
() => normalizeDateValue(defaultValue),
|
|
18259
18221
|
[defaultValue]
|
|
18260
18222
|
);
|
|
18261
|
-
const resolvedValue =
|
|
18223
|
+
const resolvedValue = React72.useMemo(
|
|
18262
18224
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18263
18225
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18264
18226
|
);
|
|
@@ -18289,7 +18251,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18289
18251
|
minDate: resolvedMinDate,
|
|
18290
18252
|
maxDate: resolvedMaxDate
|
|
18291
18253
|
});
|
|
18292
|
-
const handleOpenChange =
|
|
18254
|
+
const handleOpenChange = React72.useCallback(
|
|
18293
18255
|
(nextOpen) => {
|
|
18294
18256
|
if (isBlocked && nextOpen) return;
|
|
18295
18257
|
setIsOpen(nextOpen);
|
|
@@ -18299,7 +18261,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18299
18261
|
},
|
|
18300
18262
|
[isBlocked]
|
|
18301
18263
|
);
|
|
18302
|
-
const handleDone =
|
|
18264
|
+
const handleDone = React72.useCallback(() => {
|
|
18303
18265
|
if (isBlocked) return;
|
|
18304
18266
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18305
18267
|
handleOpenChange(false);
|
|
@@ -18311,11 +18273,11 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18311
18273
|
resolvedMaxDate,
|
|
18312
18274
|
resolvedMinDate
|
|
18313
18275
|
]);
|
|
18314
|
-
const handleTriggerClick =
|
|
18276
|
+
const handleTriggerClick = React72.useCallback(() => {
|
|
18315
18277
|
if (isBlocked) return;
|
|
18316
18278
|
setIsOpen(true);
|
|
18317
18279
|
}, [isBlocked]);
|
|
18318
|
-
const handleTriggerKeyDown =
|
|
18280
|
+
const handleTriggerKeyDown = React72.useCallback(
|
|
18319
18281
|
(event) => {
|
|
18320
18282
|
if (isBlocked) return;
|
|
18321
18283
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18325,13 +18287,13 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18325
18287
|
},
|
|
18326
18288
|
[isBlocked]
|
|
18327
18289
|
);
|
|
18328
|
-
|
|
18290
|
+
React72.useEffect(() => {
|
|
18329
18291
|
if (isBlocked) {
|
|
18330
18292
|
setIsOpen(false);
|
|
18331
18293
|
}
|
|
18332
18294
|
}, [isBlocked]);
|
|
18333
|
-
return /* @__PURE__ */ (0,
|
|
18334
|
-
name && /* @__PURE__ */ (0,
|
|
18295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
|
|
18296
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18335
18297
|
"input",
|
|
18336
18298
|
{
|
|
18337
18299
|
type: "hidden",
|
|
@@ -18339,7 +18301,7 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18339
18301
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
18340
18302
|
}
|
|
18341
18303
|
),
|
|
18342
|
-
/* @__PURE__ */ (0,
|
|
18304
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18343
18305
|
AirbnbFieldTrigger,
|
|
18344
18306
|
{
|
|
18345
18307
|
id: triggerId,
|
|
@@ -18365,10 +18327,10 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18365
18327
|
onClick: handleTriggerClick,
|
|
18366
18328
|
onKeyDown: handleTriggerKeyDown,
|
|
18367
18329
|
onBlur,
|
|
18368
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
18330
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_lucide_react53.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18369
18331
|
}
|
|
18370
18332
|
),
|
|
18371
|
-
/* @__PURE__ */ (0,
|
|
18333
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18372
18334
|
AirbnbDatePickerContent,
|
|
18373
18335
|
{
|
|
18374
18336
|
baseId: pickerId,
|
|
@@ -18402,12 +18364,12 @@ var AirbnbDatePicker = React73.forwardRef(
|
|
|
18402
18364
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18403
18365
|
|
|
18404
18366
|
// src/airbnb-fields/input/Input.tsx
|
|
18405
|
-
var
|
|
18367
|
+
var React73 = __toESM(require("react"), 1);
|
|
18406
18368
|
var import_lucide_react54 = require("lucide-react");
|
|
18407
18369
|
var import_react_i18next44 = require("react-i18next");
|
|
18408
|
-
var
|
|
18370
|
+
var import_jsx_runtime185 = require("react/jsx-runtime");
|
|
18409
18371
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18410
|
-
var AirbnbInput =
|
|
18372
|
+
var AirbnbInput = React73.forwardRef(
|
|
18411
18373
|
({
|
|
18412
18374
|
label,
|
|
18413
18375
|
topLabel,
|
|
@@ -18436,16 +18398,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18436
18398
|
...props
|
|
18437
18399
|
}, ref) => {
|
|
18438
18400
|
const { t } = (0, import_react_i18next44.useTranslation)();
|
|
18439
|
-
const generatedId =
|
|
18440
|
-
const inputRef =
|
|
18401
|
+
const generatedId = React73.useId();
|
|
18402
|
+
const inputRef = React73.useRef(null);
|
|
18441
18403
|
const inputId = id ?? generatedId;
|
|
18442
18404
|
const fieldId = `${inputId}-field`;
|
|
18443
18405
|
const labelId = `${inputId}-label`;
|
|
18444
18406
|
const errorId = `${inputId}-error`;
|
|
18445
18407
|
const accessibleLabel = placeholder ?? label;
|
|
18446
|
-
const [isFocused, setIsFocused] =
|
|
18447
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18448
|
-
const [currentValue, setCurrentValue] =
|
|
18408
|
+
const [isFocused, setIsFocused] = React73.useState(false);
|
|
18409
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React73.useState(false);
|
|
18410
|
+
const [currentValue, setCurrentValue] = React73.useState(
|
|
18449
18411
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18450
18412
|
);
|
|
18451
18413
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18458,16 +18420,16 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18458
18420
|
const triggerError = error ?? invalid;
|
|
18459
18421
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18460
18422
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18461
|
-
|
|
18423
|
+
React73.useLayoutEffect(() => {
|
|
18462
18424
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18463
18425
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18464
18426
|
}, [value]);
|
|
18465
|
-
|
|
18427
|
+
React73.useEffect(() => {
|
|
18466
18428
|
if (!isPasswordInput) {
|
|
18467
18429
|
setIsPasswordRevealed(false);
|
|
18468
18430
|
}
|
|
18469
18431
|
}, [isPasswordInput]);
|
|
18470
|
-
const setRefs =
|
|
18432
|
+
const setRefs = React73.useCallback(
|
|
18471
18433
|
(node) => {
|
|
18472
18434
|
inputRef.current = node;
|
|
18473
18435
|
if (node && value == null) {
|
|
@@ -18500,7 +18462,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18500
18462
|
const togglePasswordReveal = () => {
|
|
18501
18463
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18502
18464
|
};
|
|
18503
|
-
return /* @__PURE__ */ (0,
|
|
18465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
|
|
18504
18466
|
AirbnbFieldTrigger,
|
|
18505
18467
|
{
|
|
18506
18468
|
as: "div",
|
|
@@ -18529,7 +18491,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18529
18491
|
forceLabelText: hasLabelMeta,
|
|
18530
18492
|
hideErrorMessage: !renderErrorMessage,
|
|
18531
18493
|
children: [
|
|
18532
|
-
/* @__PURE__ */ (0,
|
|
18494
|
+
/* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18533
18495
|
"input",
|
|
18534
18496
|
{
|
|
18535
18497
|
...props,
|
|
@@ -18559,7 +18521,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18559
18521
|
)
|
|
18560
18522
|
}
|
|
18561
18523
|
),
|
|
18562
|
-
shouldShowPasswordReveal && /* @__PURE__ */ (0,
|
|
18524
|
+
shouldShowPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18563
18525
|
"button",
|
|
18564
18526
|
{
|
|
18565
18527
|
type: "button",
|
|
@@ -18567,7 +18529,7 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18567
18529
|
disabled: isBlocked,
|
|
18568
18530
|
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",
|
|
18569
18531
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18570
|
-
children: /* @__PURE__ */ (0,
|
|
18532
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18571
18533
|
import_lucide_react54.Eye,
|
|
18572
18534
|
{
|
|
18573
18535
|
size: 18,
|
|
@@ -18585,14 +18547,14 @@ var AirbnbInput = React74.forwardRef(
|
|
|
18585
18547
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18586
18548
|
|
|
18587
18549
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18588
|
-
var
|
|
18550
|
+
var React79 = __toESM(require("react"), 1);
|
|
18589
18551
|
var import_lucide_react56 = require("lucide-react");
|
|
18590
18552
|
|
|
18591
18553
|
// src/airbnb-fields/select/Select.tsx
|
|
18592
|
-
var
|
|
18554
|
+
var React78 = __toESM(require("react"), 1);
|
|
18593
18555
|
|
|
18594
18556
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18595
|
-
var
|
|
18557
|
+
var import_jsx_runtime186 = require("react/jsx-runtime");
|
|
18596
18558
|
function AirbnbSelectDesktopMenu({
|
|
18597
18559
|
id,
|
|
18598
18560
|
options,
|
|
@@ -18611,7 +18573,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18611
18573
|
noOptionsMessage
|
|
18612
18574
|
}) {
|
|
18613
18575
|
const emptyMessage = noOptionsMessage?.();
|
|
18614
|
-
return /* @__PURE__ */ (0,
|
|
18576
|
+
return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
|
|
18615
18577
|
"div",
|
|
18616
18578
|
{
|
|
18617
18579
|
id,
|
|
@@ -18624,12 +18586,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18624
18586
|
onKeyDown,
|
|
18625
18587
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18626
18588
|
children: [
|
|
18627
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
18589
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18628
18590
|
options.map((option, index) => {
|
|
18629
18591
|
const isSelected = selectedValue?.value === option.value;
|
|
18630
18592
|
const isHighlighted = index === highlightedIndex;
|
|
18631
18593
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18632
|
-
return /* @__PURE__ */ (0,
|
|
18594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
|
|
18633
18595
|
"button",
|
|
18634
18596
|
{
|
|
18635
18597
|
id: getOptionId2(index),
|
|
@@ -18661,7 +18623,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18661
18623
|
}
|
|
18662
18624
|
|
|
18663
18625
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18664
|
-
var
|
|
18626
|
+
var import_jsx_runtime187 = require("react/jsx-runtime");
|
|
18665
18627
|
function AirbnbSelectDesktopContent({
|
|
18666
18628
|
isOpen,
|
|
18667
18629
|
listboxId,
|
|
@@ -18682,14 +18644,14 @@ function AirbnbSelectDesktopContent({
|
|
|
18682
18644
|
noOptionsMessage
|
|
18683
18645
|
}) {
|
|
18684
18646
|
if (!isOpen) return null;
|
|
18685
|
-
return /* @__PURE__ */ (0,
|
|
18647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
18686
18648
|
"div",
|
|
18687
18649
|
{
|
|
18688
18650
|
className: cn(
|
|
18689
18651
|
"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)]",
|
|
18690
18652
|
dropdownClassName
|
|
18691
18653
|
),
|
|
18692
|
-
children: /* @__PURE__ */ (0,
|
|
18654
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
18693
18655
|
AirbnbSelectDesktopMenu,
|
|
18694
18656
|
{
|
|
18695
18657
|
id: listboxId,
|
|
@@ -18787,7 +18749,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
18787
18749
|
}
|
|
18788
18750
|
|
|
18789
18751
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
18790
|
-
var
|
|
18752
|
+
var import_jsx_runtime188 = require("react/jsx-runtime");
|
|
18791
18753
|
function AirbnbSelectMobileWheel({
|
|
18792
18754
|
id,
|
|
18793
18755
|
options,
|
|
@@ -18806,7 +18768,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18806
18768
|
}) {
|
|
18807
18769
|
const spacerHeight2 = getWheelSpacerHeight();
|
|
18808
18770
|
const emptyMessage = noOptionsMessage?.();
|
|
18809
|
-
return /* @__PURE__ */ (0,
|
|
18771
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
|
|
18810
18772
|
"div",
|
|
18811
18773
|
{
|
|
18812
18774
|
id,
|
|
@@ -18818,10 +18780,10 @@ function AirbnbSelectMobileWheel({
|
|
|
18818
18780
|
onKeyDown,
|
|
18819
18781
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
18820
18782
|
children: [
|
|
18821
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
18822
|
-
/* @__PURE__ */ (0,
|
|
18823
|
-
/* @__PURE__ */ (0,
|
|
18824
|
-
/* @__PURE__ */ (0,
|
|
18783
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18784
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
18785
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
18786
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
18825
18787
|
"div",
|
|
18826
18788
|
{
|
|
18827
18789
|
"aria-hidden": true,
|
|
@@ -18831,7 +18793,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18831
18793
|
)
|
|
18832
18794
|
}
|
|
18833
18795
|
),
|
|
18834
|
-
/* @__PURE__ */ (0,
|
|
18796
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
|
|
18835
18797
|
"div",
|
|
18836
18798
|
{
|
|
18837
18799
|
ref: listRef,
|
|
@@ -18846,11 +18808,11 @@ function AirbnbSelectMobileWheel({
|
|
|
18846
18808
|
WebkitOverflowScrolling: "touch"
|
|
18847
18809
|
},
|
|
18848
18810
|
children: [
|
|
18849
|
-
/* @__PURE__ */ (0,
|
|
18811
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
|
|
18850
18812
|
options.map((option, index) => {
|
|
18851
18813
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
18852
18814
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18853
|
-
return /* @__PURE__ */ (0,
|
|
18815
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
18854
18816
|
"button",
|
|
18855
18817
|
{
|
|
18856
18818
|
id: getOptionId2(index),
|
|
@@ -18871,7 +18833,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18871
18833
|
optionKey
|
|
18872
18834
|
);
|
|
18873
18835
|
}),
|
|
18874
|
-
/* @__PURE__ */ (0,
|
|
18836
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { style: { height: `${spacerHeight2}px` } })
|
|
18875
18837
|
]
|
|
18876
18838
|
}
|
|
18877
18839
|
)
|
|
@@ -18881,7 +18843,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18881
18843
|
}
|
|
18882
18844
|
|
|
18883
18845
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
18884
|
-
var
|
|
18846
|
+
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
18885
18847
|
function AirbnbSelectMobileContent({
|
|
18886
18848
|
open,
|
|
18887
18849
|
onOpenChange,
|
|
@@ -18905,11 +18867,11 @@ function AirbnbSelectMobileContent({
|
|
|
18905
18867
|
getOptionId: getOptionId2,
|
|
18906
18868
|
noOptionsMessage
|
|
18907
18869
|
}) {
|
|
18908
|
-
return /* @__PURE__ */ (0,
|
|
18909
|
-
/* @__PURE__ */ (0,
|
|
18910
|
-
/* @__PURE__ */ (0,
|
|
18911
|
-
/* @__PURE__ */ (0,
|
|
18912
|
-
/* @__PURE__ */ (0,
|
|
18870
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
|
|
18871
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
18872
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
18873
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
|
|
18874
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
18913
18875
|
AirbnbSelectMobileWheel,
|
|
18914
18876
|
{
|
|
18915
18877
|
id: listboxId,
|
|
@@ -18928,16 +18890,16 @@ function AirbnbSelectMobileContent({
|
|
|
18928
18890
|
noOptionsMessage
|
|
18929
18891
|
}
|
|
18930
18892
|
),
|
|
18931
|
-
/* @__PURE__ */ (0,
|
|
18893
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
18932
18894
|
] })
|
|
18933
18895
|
] }) });
|
|
18934
18896
|
}
|
|
18935
18897
|
|
|
18936
18898
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18937
|
-
var
|
|
18899
|
+
var React74 = __toESM(require("react"), 1);
|
|
18938
18900
|
var import_lucide_react55 = require("lucide-react");
|
|
18939
|
-
var
|
|
18940
|
-
var AirbnbSelectTrigger =
|
|
18901
|
+
var import_jsx_runtime190 = require("react/jsx-runtime");
|
|
18902
|
+
var AirbnbSelectTrigger = React74.forwardRef(
|
|
18941
18903
|
({
|
|
18942
18904
|
id,
|
|
18943
18905
|
open,
|
|
@@ -18961,7 +18923,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18961
18923
|
onKeyDown,
|
|
18962
18924
|
onBlur
|
|
18963
18925
|
}, ref) => {
|
|
18964
|
-
return /* @__PURE__ */ (0,
|
|
18926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
18965
18927
|
AirbnbFieldTrigger,
|
|
18966
18928
|
{
|
|
18967
18929
|
id,
|
|
@@ -18989,7 +18951,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
18989
18951
|
onClick,
|
|
18990
18952
|
onKeyDown,
|
|
18991
18953
|
onBlur,
|
|
18992
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
18954
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
18993
18955
|
import_lucide_react55.ChevronDown,
|
|
18994
18956
|
{
|
|
18995
18957
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
@@ -19002,7 +18964,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
|
|
|
19002
18964
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
19003
18965
|
|
|
19004
18966
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
19005
|
-
var
|
|
18967
|
+
var React75 = __toESM(require("react"), 1);
|
|
19006
18968
|
function useDesktopSelect({
|
|
19007
18969
|
isMobile: isMobile3,
|
|
19008
18970
|
isOpen,
|
|
@@ -19011,12 +18973,12 @@ function useDesktopSelect({
|
|
|
19011
18973
|
disabled,
|
|
19012
18974
|
onChange
|
|
19013
18975
|
}) {
|
|
19014
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19015
|
-
const triggerRef =
|
|
19016
|
-
const listRef =
|
|
19017
|
-
const optionRefs =
|
|
18976
|
+
const [highlightedIndex, setHighlightedIndex] = React75.useState(-1);
|
|
18977
|
+
const triggerRef = React75.useRef(null);
|
|
18978
|
+
const listRef = React75.useRef(null);
|
|
18979
|
+
const optionRefs = React75.useRef([]);
|
|
19018
18980
|
const selectedIndex = getOptionIndex2(options, value);
|
|
19019
|
-
|
|
18981
|
+
React75.useEffect(() => {
|
|
19020
18982
|
if (!isOpen || isMobile3) return;
|
|
19021
18983
|
setHighlightedIndex((currentIndex) => {
|
|
19022
18984
|
if (currentIndex >= 0) {
|
|
@@ -19031,34 +18993,34 @@ function useDesktopSelect({
|
|
|
19031
18993
|
window.cancelAnimationFrame(frameId);
|
|
19032
18994
|
};
|
|
19033
18995
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
19034
|
-
|
|
18996
|
+
React75.useEffect(() => {
|
|
19035
18997
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
19036
18998
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
19037
18999
|
block: "nearest"
|
|
19038
19000
|
});
|
|
19039
19001
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
19040
|
-
|
|
19002
|
+
React75.useEffect(() => {
|
|
19041
19003
|
if (isOpen) return;
|
|
19042
19004
|
setHighlightedIndex(-1);
|
|
19043
19005
|
}, [isOpen]);
|
|
19044
|
-
const focusTrigger =
|
|
19006
|
+
const focusTrigger = React75.useCallback(() => {
|
|
19045
19007
|
triggerRef.current?.focus();
|
|
19046
19008
|
}, []);
|
|
19047
|
-
const handleSelect =
|
|
19009
|
+
const handleSelect = React75.useCallback(
|
|
19048
19010
|
(option) => {
|
|
19049
19011
|
if (option.isDisabled || disabled) return;
|
|
19050
19012
|
onChange?.(option);
|
|
19051
19013
|
},
|
|
19052
19014
|
[disabled, onChange]
|
|
19053
19015
|
);
|
|
19054
|
-
const openMenu =
|
|
19016
|
+
const openMenu = React75.useCallback(
|
|
19055
19017
|
(targetIndex) => {
|
|
19056
19018
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19057
19019
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
19058
19020
|
},
|
|
19059
19021
|
[options, selectedIndex]
|
|
19060
19022
|
);
|
|
19061
|
-
const handleTriggerKeyDown =
|
|
19023
|
+
const handleTriggerKeyDown = React75.useCallback(
|
|
19062
19024
|
(event, onOpen) => {
|
|
19063
19025
|
if (disabled) return;
|
|
19064
19026
|
if (event.key === "ArrowDown") {
|
|
@@ -19083,7 +19045,7 @@ function useDesktopSelect({
|
|
|
19083
19045
|
},
|
|
19084
19046
|
[disabled, openMenu, options, selectedIndex]
|
|
19085
19047
|
);
|
|
19086
|
-
const handleMenuKeyDown =
|
|
19048
|
+
const handleMenuKeyDown = React75.useCallback(
|
|
19087
19049
|
(event, onClose) => {
|
|
19088
19050
|
if (event.key === "Escape") {
|
|
19089
19051
|
event.preventDefault();
|
|
@@ -19133,7 +19095,7 @@ function useDesktopSelect({
|
|
|
19133
19095
|
},
|
|
19134
19096
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
19135
19097
|
);
|
|
19136
|
-
const setOptionRef =
|
|
19098
|
+
const setOptionRef = React75.useCallback(
|
|
19137
19099
|
(index, node) => {
|
|
19138
19100
|
optionRefs.current[index] = node;
|
|
19139
19101
|
},
|
|
@@ -19153,23 +19115,23 @@ function useDesktopSelect({
|
|
|
19153
19115
|
}
|
|
19154
19116
|
|
|
19155
19117
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19156
|
-
var
|
|
19118
|
+
var React76 = __toESM(require("react"), 1);
|
|
19157
19119
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19158
|
-
const [pendingValue, setPendingValue] =
|
|
19120
|
+
const [pendingValue, setPendingValue] = React76.useState(
|
|
19159
19121
|
value ?? null
|
|
19160
19122
|
);
|
|
19161
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19162
|
-
const mobileListRef =
|
|
19163
|
-
const scrollSettleTimeoutRef =
|
|
19164
|
-
const scrollAnimationFrameRef =
|
|
19165
|
-
const getTargetIndex =
|
|
19123
|
+
const [mobileScrollTop, setMobileScrollTop] = React76.useState(0);
|
|
19124
|
+
const mobileListRef = React76.useRef(null);
|
|
19125
|
+
const scrollSettleTimeoutRef = React76.useRef(null);
|
|
19126
|
+
const scrollAnimationFrameRef = React76.useRef(null);
|
|
19127
|
+
const getTargetIndex = React76.useCallback(
|
|
19166
19128
|
(targetValue) => {
|
|
19167
19129
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19168
19130
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19169
19131
|
},
|
|
19170
19132
|
[options]
|
|
19171
19133
|
);
|
|
19172
|
-
const syncScrollPosition =
|
|
19134
|
+
const syncScrollPosition = React76.useCallback(
|
|
19173
19135
|
(targetValue, behavior = "instant") => {
|
|
19174
19136
|
const targetIndex = getTargetIndex(targetValue);
|
|
19175
19137
|
if (targetIndex < 0) return;
|
|
@@ -19188,27 +19150,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19188
19150
|
},
|
|
19189
19151
|
[getTargetIndex, options]
|
|
19190
19152
|
);
|
|
19191
|
-
const clearScrollSettleTimeout =
|
|
19153
|
+
const clearScrollSettleTimeout = React76.useCallback(() => {
|
|
19192
19154
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19193
19155
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19194
19156
|
scrollSettleTimeoutRef.current = null;
|
|
19195
19157
|
}, []);
|
|
19196
|
-
const clearScrollAnimationFrame =
|
|
19158
|
+
const clearScrollAnimationFrame = React76.useCallback(() => {
|
|
19197
19159
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19198
19160
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19199
19161
|
scrollAnimationFrameRef.current = null;
|
|
19200
19162
|
}, []);
|
|
19201
|
-
|
|
19163
|
+
React76.useEffect(
|
|
19202
19164
|
() => () => {
|
|
19203
19165
|
clearScrollSettleTimeout();
|
|
19204
19166
|
clearScrollAnimationFrame();
|
|
19205
19167
|
},
|
|
19206
19168
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19207
19169
|
);
|
|
19208
|
-
|
|
19170
|
+
React76.useEffect(() => {
|
|
19209
19171
|
setPendingValue(value ?? null);
|
|
19210
19172
|
}, [value]);
|
|
19211
|
-
|
|
19173
|
+
React76.useLayoutEffect(() => {
|
|
19212
19174
|
if (!isMobile3 || !isOpen) return;
|
|
19213
19175
|
const frameId = window.requestAnimationFrame(() => {
|
|
19214
19176
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19217,7 +19179,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19217
19179
|
window.cancelAnimationFrame(frameId);
|
|
19218
19180
|
};
|
|
19219
19181
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19220
|
-
const settleScroll =
|
|
19182
|
+
const settleScroll = React76.useCallback(() => {
|
|
19221
19183
|
if (!mobileListRef.current) return;
|
|
19222
19184
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19223
19185
|
const nextOption = options[nextIndex];
|
|
@@ -19229,13 +19191,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19229
19191
|
}
|
|
19230
19192
|
setPendingValue(nextOption);
|
|
19231
19193
|
}, [options, pendingValue]);
|
|
19232
|
-
const scheduleScrollSettle =
|
|
19194
|
+
const scheduleScrollSettle = React76.useCallback(() => {
|
|
19233
19195
|
clearScrollSettleTimeout();
|
|
19234
19196
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19235
19197
|
settleScroll();
|
|
19236
19198
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19237
19199
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19238
|
-
const handleScroll =
|
|
19200
|
+
const handleScroll = React76.useCallback(() => {
|
|
19239
19201
|
if (!mobileListRef.current) return;
|
|
19240
19202
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19241
19203
|
clearScrollAnimationFrame();
|
|
@@ -19245,7 +19207,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19245
19207
|
});
|
|
19246
19208
|
scheduleScrollSettle();
|
|
19247
19209
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19248
|
-
const focusOptionByIndex =
|
|
19210
|
+
const focusOptionByIndex = React76.useCallback(
|
|
19249
19211
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19250
19212
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19251
19213
|
const option = options[index];
|
|
@@ -19263,7 +19225,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19263
19225
|
},
|
|
19264
19226
|
[options, scheduleScrollSettle]
|
|
19265
19227
|
);
|
|
19266
|
-
const handleOptionClick =
|
|
19228
|
+
const handleOptionClick = React76.useCallback(
|
|
19267
19229
|
(option) => {
|
|
19268
19230
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19269
19231
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19272,7 +19234,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19272
19234
|
},
|
|
19273
19235
|
[disabled, focusOptionByIndex, options]
|
|
19274
19236
|
);
|
|
19275
|
-
const moveByStep =
|
|
19237
|
+
const moveByStep = React76.useCallback(
|
|
19276
19238
|
(step) => {
|
|
19277
19239
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19278
19240
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19284,7 +19246,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19284
19246
|
},
|
|
19285
19247
|
[focusOptionByIndex, options, pendingValue]
|
|
19286
19248
|
);
|
|
19287
|
-
const moveToBoundary =
|
|
19249
|
+
const moveToBoundary = React76.useCallback(
|
|
19288
19250
|
(boundary) => {
|
|
19289
19251
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19290
19252
|
if (targetIndex >= 0) {
|
|
@@ -19293,7 +19255,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19293
19255
|
},
|
|
19294
19256
|
[focusOptionByIndex, options]
|
|
19295
19257
|
);
|
|
19296
|
-
const syncPendingValue =
|
|
19258
|
+
const syncPendingValue = React76.useCallback(
|
|
19297
19259
|
(nextValue) => {
|
|
19298
19260
|
const normalizedValue = nextValue ?? null;
|
|
19299
19261
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19321,9 +19283,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19321
19283
|
}
|
|
19322
19284
|
|
|
19323
19285
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19324
|
-
var
|
|
19286
|
+
var React77 = __toESM(require("react"), 1);
|
|
19325
19287
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19326
|
-
const reactId =
|
|
19288
|
+
const reactId = React77.useId().replace(/:/g, "");
|
|
19327
19289
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19328
19290
|
const triggerId = `${baseId}-trigger`;
|
|
19329
19291
|
const labelId = `${baseId}-label`;
|
|
@@ -19333,7 +19295,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19333
19295
|
const listboxId = `${baseId}-listbox`;
|
|
19334
19296
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19335
19297
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19336
|
-
const getOptionId2 =
|
|
19298
|
+
const getOptionId2 = React77.useCallback(
|
|
19337
19299
|
(index) => `${baseId}-option-${index}`,
|
|
19338
19300
|
[baseId]
|
|
19339
19301
|
);
|
|
@@ -19351,8 +19313,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19351
19313
|
}
|
|
19352
19314
|
|
|
19353
19315
|
// src/airbnb-fields/select/Select.tsx
|
|
19354
|
-
var
|
|
19355
|
-
var AirbnbSelect =
|
|
19316
|
+
var import_jsx_runtime191 = require("react/jsx-runtime");
|
|
19317
|
+
var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
19356
19318
|
options = [],
|
|
19357
19319
|
value,
|
|
19358
19320
|
onChange,
|
|
@@ -19379,8 +19341,8 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19379
19341
|
filterOption
|
|
19380
19342
|
}, ref) {
|
|
19381
19343
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19382
|
-
const [isOpen, setIsOpen] =
|
|
19383
|
-
const containerRef =
|
|
19344
|
+
const [isOpen, setIsOpen] = React78.useState(false);
|
|
19345
|
+
const containerRef = React78.useRef(null);
|
|
19384
19346
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19385
19347
|
const hasValue = Boolean(value);
|
|
19386
19348
|
const helperText = placeholder ?? label;
|
|
@@ -19442,12 +19404,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19442
19404
|
onOutsideClick: () => setIsOpen(false),
|
|
19443
19405
|
isDisabled: !isOpen || isMobile3
|
|
19444
19406
|
});
|
|
19445
|
-
|
|
19407
|
+
React78.useEffect(() => {
|
|
19446
19408
|
if (isBlocked) {
|
|
19447
19409
|
setIsOpen(false);
|
|
19448
19410
|
}
|
|
19449
19411
|
}, [isBlocked]);
|
|
19450
|
-
|
|
19412
|
+
React78.useEffect(
|
|
19451
19413
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19452
19414
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19453
19415
|
return;
|
|
@@ -19459,7 +19421,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19459
19421
|
},
|
|
19460
19422
|
[onChange, filteredOptions, value]
|
|
19461
19423
|
);
|
|
19462
|
-
const handleMobileOpenChange =
|
|
19424
|
+
const handleMobileOpenChange = React78.useCallback(
|
|
19463
19425
|
(nextOpen) => {
|
|
19464
19426
|
if (isBlocked && nextOpen) return;
|
|
19465
19427
|
setIsOpen(nextOpen);
|
|
@@ -19470,7 +19432,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19470
19432
|
},
|
|
19471
19433
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19472
19434
|
);
|
|
19473
|
-
const handleMobileDone =
|
|
19435
|
+
const handleMobileDone = React78.useCallback(() => {
|
|
19474
19436
|
if (isBlocked) return;
|
|
19475
19437
|
const finalOption = pendingValue;
|
|
19476
19438
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19479,7 +19441,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19479
19441
|
setIsOpen(false);
|
|
19480
19442
|
focusTrigger();
|
|
19481
19443
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19482
|
-
const handleTriggerClick =
|
|
19444
|
+
const handleTriggerClick = React78.useCallback(() => {
|
|
19483
19445
|
if (isBlocked) return;
|
|
19484
19446
|
setIsOpen((prev) => {
|
|
19485
19447
|
const nextOpen = !prev;
|
|
@@ -19532,13 +19494,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19532
19494
|
handleMobileOpenChange(false);
|
|
19533
19495
|
}
|
|
19534
19496
|
};
|
|
19535
|
-
return /* @__PURE__ */ (0,
|
|
19497
|
+
return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
|
|
19536
19498
|
"div",
|
|
19537
19499
|
{
|
|
19538
19500
|
ref: containerRef,
|
|
19539
19501
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19540
19502
|
children: [
|
|
19541
|
-
name && /* @__PURE__ */ (0,
|
|
19503
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19542
19504
|
renderTrigger ? renderTrigger({
|
|
19543
19505
|
id: triggerId,
|
|
19544
19506
|
open: isOpen,
|
|
@@ -19559,7 +19521,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19559
19521
|
onClick: handleTriggerClick,
|
|
19560
19522
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19561
19523
|
onBlur
|
|
19562
|
-
}) : /* @__PURE__ */ (0,
|
|
19524
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19563
19525
|
AirbnbSelectTrigger,
|
|
19564
19526
|
{
|
|
19565
19527
|
id: triggerId,
|
|
@@ -19586,7 +19548,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19586
19548
|
onBlur
|
|
19587
19549
|
}
|
|
19588
19550
|
),
|
|
19589
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
19551
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19590
19552
|
AirbnbSelectMobileContent,
|
|
19591
19553
|
{
|
|
19592
19554
|
open: isOpen,
|
|
@@ -19611,7 +19573,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19611
19573
|
getOptionId: getOptionId2,
|
|
19612
19574
|
noOptionsMessage
|
|
19613
19575
|
}
|
|
19614
|
-
) : /* @__PURE__ */ (0,
|
|
19576
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19615
19577
|
AirbnbSelectDesktopContent,
|
|
19616
19578
|
{
|
|
19617
19579
|
isOpen,
|
|
@@ -19645,13 +19607,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
|
19645
19607
|
});
|
|
19646
19608
|
|
|
19647
19609
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19648
|
-
var
|
|
19610
|
+
var import_jsx_runtime192 = require("react/jsx-runtime");
|
|
19649
19611
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19650
19612
|
const label = String(option.label);
|
|
19651
19613
|
const value = String(option.value);
|
|
19652
19614
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19653
19615
|
}
|
|
19654
|
-
var AirbnbPhoneField =
|
|
19616
|
+
var AirbnbPhoneField = React79.forwardRef(
|
|
19655
19617
|
({
|
|
19656
19618
|
label,
|
|
19657
19619
|
topLabel,
|
|
@@ -19672,10 +19634,12 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19672
19634
|
codeName,
|
|
19673
19635
|
numberName,
|
|
19674
19636
|
mobileTitle,
|
|
19675
|
-
codePlaceholder = "+00"
|
|
19637
|
+
codePlaceholder = "+00",
|
|
19638
|
+
defaultCode
|
|
19676
19639
|
}, ref) => {
|
|
19677
|
-
const inputId =
|
|
19678
|
-
const
|
|
19640
|
+
const inputId = React79.useId();
|
|
19641
|
+
const effectiveCode = value?.code || defaultCode || "";
|
|
19642
|
+
const codeOptions = React79.useMemo(
|
|
19679
19643
|
() => options.map((option) => ({
|
|
19680
19644
|
value: option.value,
|
|
19681
19645
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19683,26 +19647,26 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19683
19647
|
})),
|
|
19684
19648
|
[options]
|
|
19685
19649
|
);
|
|
19686
|
-
const selectedCodeOption =
|
|
19687
|
-
() => codeOptions.find((option) => option.value ===
|
|
19688
|
-
[codeOptions,
|
|
19650
|
+
const selectedCodeOption = React79.useMemo(
|
|
19651
|
+
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19652
|
+
[codeOptions, effectiveCode]
|
|
19689
19653
|
);
|
|
19690
|
-
const combinedValue =
|
|
19654
|
+
const combinedValue = effectiveCode || value?.number ? `${effectiveCode}${value?.number ?? ""}` : "";
|
|
19691
19655
|
const hasInvalidState = Boolean(error) || Boolean(invalid);
|
|
19692
19656
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
19693
19657
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
19694
|
-
return /* @__PURE__ */ (0,
|
|
19695
|
-
name && /* @__PURE__ */ (0,
|
|
19696
|
-
codeName && /* @__PURE__ */ (0,
|
|
19658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
19659
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
19660
|
+
codeName && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19697
19661
|
"input",
|
|
19698
19662
|
{
|
|
19699
19663
|
type: "hidden",
|
|
19700
19664
|
name: codeName,
|
|
19701
|
-
value:
|
|
19665
|
+
value: effectiveCode,
|
|
19702
19666
|
disabled
|
|
19703
19667
|
}
|
|
19704
19668
|
),
|
|
19705
|
-
numberName && /* @__PURE__ */ (0,
|
|
19669
|
+
numberName && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19706
19670
|
"input",
|
|
19707
19671
|
{
|
|
19708
19672
|
type: "hidden",
|
|
@@ -19711,7 +19675,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19711
19675
|
disabled
|
|
19712
19676
|
}
|
|
19713
19677
|
),
|
|
19714
|
-
topLabel && /* @__PURE__ */ (0,
|
|
19678
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19715
19679
|
"label",
|
|
19716
19680
|
{
|
|
19717
19681
|
htmlFor: inputId,
|
|
@@ -19719,8 +19683,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19719
19683
|
children: topLabel
|
|
19720
19684
|
}
|
|
19721
19685
|
),
|
|
19722
|
-
/* @__PURE__ */ (0,
|
|
19723
|
-
/* @__PURE__ */ (0,
|
|
19686
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "flex items-stretch", children: [
|
|
19687
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19724
19688
|
AirbnbSelect,
|
|
19725
19689
|
{
|
|
19726
19690
|
ref,
|
|
@@ -19749,7 +19713,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19749
19713
|
onClick,
|
|
19750
19714
|
onKeyDown,
|
|
19751
19715
|
valueLabel
|
|
19752
|
-
}) => /* @__PURE__ */ (0,
|
|
19716
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
|
|
19753
19717
|
"button",
|
|
19754
19718
|
{
|
|
19755
19719
|
id,
|
|
@@ -19770,8 +19734,8 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19770
19734
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
19771
19735
|
),
|
|
19772
19736
|
children: [
|
|
19773
|
-
/* @__PURE__ */ (0,
|
|
19774
|
-
/* @__PURE__ */ (0,
|
|
19737
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)("span", { children: valueLabel ?? codePlaceholder }),
|
|
19738
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19775
19739
|
import_lucide_react56.ChevronDown,
|
|
19776
19740
|
{
|
|
19777
19741
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
@@ -19783,7 +19747,7 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19783
19747
|
)
|
|
19784
19748
|
}
|
|
19785
19749
|
),
|
|
19786
|
-
/* @__PURE__ */ (0,
|
|
19750
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19787
19751
|
AirbnbInput,
|
|
19788
19752
|
{
|
|
19789
19753
|
id: inputId,
|
|
@@ -19805,25 +19769,25 @@ var AirbnbPhoneField = React80.forwardRef(
|
|
|
19805
19769
|
contentClassName: "h-[40px] py-2",
|
|
19806
19770
|
inputClassName: "text-[16px] leading-7",
|
|
19807
19771
|
onChange: (event) => onChange({
|
|
19808
|
-
code:
|
|
19772
|
+
code: effectiveCode,
|
|
19809
19773
|
number: event.target.value
|
|
19810
19774
|
}),
|
|
19811
19775
|
onBlur
|
|
19812
19776
|
}
|
|
19813
19777
|
)
|
|
19814
19778
|
] }),
|
|
19815
|
-
error && /* @__PURE__ */ (0,
|
|
19779
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(FieldErrorMessage, { message: error })
|
|
19816
19780
|
] });
|
|
19817
19781
|
}
|
|
19818
19782
|
);
|
|
19819
19783
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19820
19784
|
|
|
19821
19785
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19822
|
-
var
|
|
19786
|
+
var React80 = __toESM(require("react"), 1);
|
|
19823
19787
|
var import_lucide_react57 = require("lucide-react");
|
|
19824
19788
|
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
19825
19789
|
var import_react90 = require("react");
|
|
19826
|
-
var
|
|
19790
|
+
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
19827
19791
|
var ROW_HEIGHT = 48;
|
|
19828
19792
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
19829
19793
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -19863,13 +19827,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19863
19827
|
loadingMessage
|
|
19864
19828
|
}, ref) => {
|
|
19865
19829
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19866
|
-
const reactId =
|
|
19867
|
-
const [open, setOpen] =
|
|
19868
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
19869
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19870
|
-
const containerRef =
|
|
19871
|
-
const triggerRef =
|
|
19872
|
-
const inputRef =
|
|
19830
|
+
const reactId = React80.useId();
|
|
19831
|
+
const [open, setOpen] = React80.useState(false);
|
|
19832
|
+
const [internalSearchValue, setInternalSearchValue] = React80.useState("");
|
|
19833
|
+
const [highlightedIndex, setHighlightedIndex] = React80.useState(-1);
|
|
19834
|
+
const containerRef = React80.useRef(null);
|
|
19835
|
+
const triggerRef = React80.useRef(null);
|
|
19836
|
+
const inputRef = React80.useRef(null);
|
|
19873
19837
|
const listboxId = `${reactId}-listbox`;
|
|
19874
19838
|
const labelId = `${reactId}-label`;
|
|
19875
19839
|
const valueId = `${reactId}-value`;
|
|
@@ -19878,13 +19842,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19878
19842
|
const searchInputId = `${reactId}-search`;
|
|
19879
19843
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19880
19844
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19881
|
-
const visibleOptions =
|
|
19845
|
+
const visibleOptions = React80.useMemo(() => {
|
|
19882
19846
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19883
19847
|
return options;
|
|
19884
19848
|
}
|
|
19885
19849
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19886
19850
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19887
|
-
const selectedIndex =
|
|
19851
|
+
const selectedIndex = React80.useMemo(
|
|
19888
19852
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19889
19853
|
[value?.value, visibleOptions]
|
|
19890
19854
|
);
|
|
@@ -19910,7 +19874,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19910
19874
|
},
|
|
19911
19875
|
[handleOnOpenChange]
|
|
19912
19876
|
);
|
|
19913
|
-
|
|
19877
|
+
React80.useEffect(() => {
|
|
19914
19878
|
if (isBlocked) {
|
|
19915
19879
|
setSelectOpen(false);
|
|
19916
19880
|
return;
|
|
@@ -19923,7 +19887,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19923
19887
|
window.cancelAnimationFrame(frameId);
|
|
19924
19888
|
};
|
|
19925
19889
|
}, [isBlocked, open, setSelectOpen]);
|
|
19926
|
-
|
|
19890
|
+
React80.useEffect(() => {
|
|
19927
19891
|
if (!open) {
|
|
19928
19892
|
setHighlightedIndex(-1);
|
|
19929
19893
|
return;
|
|
@@ -19991,7 +19955,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19991
19955
|
}
|
|
19992
19956
|
}
|
|
19993
19957
|
}
|
|
19994
|
-
const content = /* @__PURE__ */ (0,
|
|
19958
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
19995
19959
|
AirbnbSearchableSelectContent,
|
|
19996
19960
|
{
|
|
19997
19961
|
inputId: searchInputId,
|
|
@@ -20018,10 +19982,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20018
19982
|
onOptionHover: setHighlightedIndex
|
|
20019
19983
|
}
|
|
20020
19984
|
);
|
|
20021
|
-
|
|
20022
|
-
return /* @__PURE__ */ (0,
|
|
20023
|
-
name && /* @__PURE__ */ (0,
|
|
20024
|
-
/* @__PURE__ */ (0,
|
|
19985
|
+
React80.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
19986
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
19987
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19988
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20025
19989
|
AirbnbFieldTrigger,
|
|
20026
19990
|
{
|
|
20027
19991
|
id: `${reactId}-trigger`,
|
|
@@ -20055,7 +20019,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20055
20019
|
},
|
|
20056
20020
|
onKeyDown: handleTriggerKeyDown,
|
|
20057
20021
|
onBlur,
|
|
20058
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
20022
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20059
20023
|
import_lucide_react57.ChevronDown,
|
|
20060
20024
|
{
|
|
20061
20025
|
className: cn(
|
|
@@ -20066,7 +20030,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20066
20030
|
)
|
|
20067
20031
|
}
|
|
20068
20032
|
),
|
|
20069
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
20033
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20070
20034
|
Drawer,
|
|
20071
20035
|
{
|
|
20072
20036
|
open,
|
|
@@ -20078,13 +20042,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20078
20042
|
}
|
|
20079
20043
|
closeSelect();
|
|
20080
20044
|
},
|
|
20081
|
-
children: /* @__PURE__ */ (0,
|
|
20082
|
-
/* @__PURE__ */ (0,
|
|
20083
|
-
/* @__PURE__ */ (0,
|
|
20084
|
-
/* @__PURE__ */ (0,
|
|
20045
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
20046
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
20047
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
20048
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
20085
20049
|
] })
|
|
20086
20050
|
}
|
|
20087
|
-
) : open ? /* @__PURE__ */ (0,
|
|
20051
|
+
) : open ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20088
20052
|
"div",
|
|
20089
20053
|
{
|
|
20090
20054
|
className: cn(
|
|
@@ -20096,7 +20060,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20096
20060
|
) : null
|
|
20097
20061
|
] });
|
|
20098
20062
|
};
|
|
20099
|
-
var AirbnbSearchableSelect =
|
|
20063
|
+
var AirbnbSearchableSelect = React80.forwardRef(
|
|
20100
20064
|
AirbnbSearchableSelectInternal
|
|
20101
20065
|
);
|
|
20102
20066
|
function AirbnbSearchableSelectContent({
|
|
@@ -20123,9 +20087,9 @@ function AirbnbSearchableSelectContent({
|
|
|
20123
20087
|
onOptionClick,
|
|
20124
20088
|
onOptionHover
|
|
20125
20089
|
}) {
|
|
20126
|
-
const listRef =
|
|
20127
|
-
const lastLoadMoreOptionsLengthRef =
|
|
20128
|
-
const previousHighlightedIndexRef =
|
|
20090
|
+
const listRef = React80.useRef(null);
|
|
20091
|
+
const lastLoadMoreOptionsLengthRef = React80.useRef(null);
|
|
20092
|
+
const previousHighlightedIndexRef = React80.useRef(highlightedIndex);
|
|
20129
20093
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
20130
20094
|
const virtualizer = (0, import_react_virtual3.useVirtualizer)({
|
|
20131
20095
|
count: rowCount,
|
|
@@ -20136,7 +20100,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20136
20100
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20137
20101
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20138
20102
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20139
|
-
|
|
20103
|
+
React80.useEffect(() => {
|
|
20140
20104
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20141
20105
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20142
20106
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20144,23 +20108,23 @@ function AirbnbSearchableSelectContent({
|
|
|
20144
20108
|
onLoadMore?.();
|
|
20145
20109
|
}
|
|
20146
20110
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20147
|
-
|
|
20111
|
+
React80.useEffect(() => {
|
|
20148
20112
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20149
20113
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20150
20114
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
20151
20115
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
20152
20116
|
}
|
|
20153
20117
|
}, [highlightedIndex, virtualizer]);
|
|
20154
|
-
return /* @__PURE__ */ (0,
|
|
20155
|
-
/* @__PURE__ */ (0,
|
|
20156
|
-
/* @__PURE__ */ (0,
|
|
20118
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "p-2", children: [
|
|
20119
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "relative mb-2", children: [
|
|
20120
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20157
20121
|
import_lucide_react57.Search,
|
|
20158
20122
|
{
|
|
20159
20123
|
"aria-hidden": "true",
|
|
20160
20124
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
20161
20125
|
}
|
|
20162
20126
|
),
|
|
20163
|
-
/* @__PURE__ */ (0,
|
|
20127
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20164
20128
|
"input",
|
|
20165
20129
|
{
|
|
20166
20130
|
id: inputId,
|
|
@@ -20179,7 +20143,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20179
20143
|
}
|
|
20180
20144
|
)
|
|
20181
20145
|
] }),
|
|
20182
|
-
loading && options.length === 0 ? /* @__PURE__ */ (0,
|
|
20146
|
+
loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20183
20147
|
"div",
|
|
20184
20148
|
{
|
|
20185
20149
|
id: listboxId,
|
|
@@ -20188,7 +20152,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20188
20152
|
"aria-labelledby": labelId,
|
|
20189
20153
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
20190
20154
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
20191
|
-
children: /* @__PURE__ */ (0,
|
|
20155
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20192
20156
|
"div",
|
|
20193
20157
|
{
|
|
20194
20158
|
className: "relative w-full",
|
|
@@ -20196,7 +20160,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20196
20160
|
children: virtualItems.map((virtualItem) => {
|
|
20197
20161
|
const option = options[virtualItem.index];
|
|
20198
20162
|
if (!option) {
|
|
20199
|
-
return /* @__PURE__ */ (0,
|
|
20163
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20200
20164
|
"div",
|
|
20201
20165
|
{
|
|
20202
20166
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -20211,7 +20175,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20211
20175
|
}
|
|
20212
20176
|
const isSelected = value?.value === option.value;
|
|
20213
20177
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
20214
|
-
return /* @__PURE__ */ (0,
|
|
20178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20215
20179
|
"button",
|
|
20216
20180
|
{
|
|
20217
20181
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -20233,7 +20197,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20233
20197
|
height: `${virtualItem.size}px`,
|
|
20234
20198
|
transform: `translateY(${virtualItem.start}px)`
|
|
20235
20199
|
},
|
|
20236
|
-
children: /* @__PURE__ */ (0,
|
|
20200
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("span", { className: "truncate text-center", children: String(option.label) })
|
|
20237
20201
|
},
|
|
20238
20202
|
`${String(option.value)}-${virtualItem.index}`
|
|
20239
20203
|
);
|
|
@@ -20262,16 +20226,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20262
20226
|
}
|
|
20263
20227
|
|
|
20264
20228
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20265
|
-
var
|
|
20229
|
+
var React81 = __toESM(require("react"), 1);
|
|
20266
20230
|
var import_react_i18next45 = require("react-i18next");
|
|
20267
20231
|
var import_lucide_react58 = require("lucide-react");
|
|
20268
|
-
var
|
|
20269
|
-
var AirbnbSearchInput =
|
|
20232
|
+
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
20233
|
+
var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20270
20234
|
const { t } = (0, import_react_i18next45.useTranslation)();
|
|
20271
20235
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20272
|
-
return /* @__PURE__ */ (0,
|
|
20273
|
-
/* @__PURE__ */ (0,
|
|
20274
|
-
/* @__PURE__ */ (0,
|
|
20236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
20237
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_lucide_react58.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
|
|
20238
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20275
20239
|
"input",
|
|
20276
20240
|
{
|
|
20277
20241
|
...props,
|
|
@@ -20290,13 +20254,13 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20290
20254
|
)
|
|
20291
20255
|
}
|
|
20292
20256
|
),
|
|
20293
|
-
onReset && /* @__PURE__ */ (0,
|
|
20257
|
+
onReset && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20294
20258
|
Button,
|
|
20295
20259
|
{
|
|
20296
20260
|
variant: "ghost",
|
|
20297
20261
|
onClick: onReset,
|
|
20298
20262
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
20299
|
-
children: /* @__PURE__ */ (0,
|
|
20263
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_lucide_react58.X, { className: "h-5 w-5" })
|
|
20300
20264
|
}
|
|
20301
20265
|
)
|
|
20302
20266
|
] });
|
|
@@ -20304,11 +20268,11 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20304
20268
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20305
20269
|
|
|
20306
20270
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20307
|
-
var
|
|
20271
|
+
var React82 = __toESM(require("react"), 1);
|
|
20308
20272
|
var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
|
|
20309
20273
|
var import_lucide_react59 = require("lucide-react");
|
|
20310
|
-
var
|
|
20311
|
-
var AirbnbSwitch =
|
|
20274
|
+
var import_jsx_runtime195 = require("react/jsx-runtime");
|
|
20275
|
+
var AirbnbSwitch = React82.forwardRef(
|
|
20312
20276
|
({
|
|
20313
20277
|
className,
|
|
20314
20278
|
value,
|
|
@@ -20322,9 +20286,9 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20322
20286
|
wrapperClassName,
|
|
20323
20287
|
...props
|
|
20324
20288
|
}, ref) => {
|
|
20325
|
-
const generatedId =
|
|
20289
|
+
const generatedId = React82.useId();
|
|
20326
20290
|
const fieldId = id || generatedId;
|
|
20327
|
-
const switchElement = /* @__PURE__ */ (0,
|
|
20291
|
+
const switchElement = /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20328
20292
|
SwitchPrimitives2.Root,
|
|
20329
20293
|
{
|
|
20330
20294
|
ref,
|
|
@@ -20344,14 +20308,14 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20344
20308
|
"aria-busy": loading,
|
|
20345
20309
|
"aria-readonly": readOnly,
|
|
20346
20310
|
...props,
|
|
20347
|
-
children: /* @__PURE__ */ (0,
|
|
20311
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20348
20312
|
SwitchPrimitives2.Thumb,
|
|
20349
20313
|
{
|
|
20350
20314
|
className: cn(
|
|
20351
20315
|
"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",
|
|
20352
20316
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
20353
20317
|
),
|
|
20354
|
-
children: /* @__PURE__ */ (0,
|
|
20318
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20355
20319
|
import_lucide_react59.Check,
|
|
20356
20320
|
{
|
|
20357
20321
|
"aria-hidden": "true",
|
|
@@ -20366,10 +20330,10 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20366
20330
|
if (!label && !error) {
|
|
20367
20331
|
return switchElement;
|
|
20368
20332
|
}
|
|
20369
|
-
return /* @__PURE__ */ (0,
|
|
20370
|
-
/* @__PURE__ */ (0,
|
|
20333
|
+
return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(import_jsx_runtime195.Fragment, { children: [
|
|
20334
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
|
|
20371
20335
|
switchElement,
|
|
20372
|
-
label && /* @__PURE__ */ (0,
|
|
20336
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20373
20337
|
Label,
|
|
20374
20338
|
{
|
|
20375
20339
|
htmlFor: fieldId,
|
|
@@ -20381,7 +20345,7 @@ var AirbnbSwitch = React83.forwardRef(
|
|
|
20381
20345
|
}
|
|
20382
20346
|
)
|
|
20383
20347
|
] }),
|
|
20384
|
-
error && /* @__PURE__ */ (0,
|
|
20348
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(ErrorMessage, { disabled, children: error })
|
|
20385
20349
|
] });
|
|
20386
20350
|
}
|
|
20387
20351
|
);
|
|
@@ -20590,7 +20554,6 @@ AirbnbSwitch.displayName = "AirbnbSwitch";
|
|
|
20590
20554
|
ScrollBar,
|
|
20591
20555
|
SearchButton,
|
|
20592
20556
|
SearchInput,
|
|
20593
|
-
SearchingSelect,
|
|
20594
20557
|
Section,
|
|
20595
20558
|
SectionGroup,
|
|
20596
20559
|
SectionTag,
|