@chekinapp/ui 0.0.143 → 0.0.144
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 +762 -729
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +16 -1
- package/dist/index.d.ts +16 -1
- package/dist/index.js +699 -667
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -11970,7 +11970,7 @@ function Fieldset({
|
|
|
11970
11970
|
htmlFor,
|
|
11971
11971
|
className: cn(
|
|
11972
11972
|
"block cursor-[inherit] truncate transition-all duration-100 ease-in",
|
|
11973
|
-
raised ? "text-[
|
|
11973
|
+
raised ? "text-[length:var(--field-label-raised-font-size)] font-[var(--field-label-raised-font-weight)]" : "text-[length:var(--field-label-font-size)] font-[var(--field-label-font-weight)]"
|
|
11974
11974
|
),
|
|
11975
11975
|
children: label
|
|
11976
11976
|
}
|
|
@@ -11992,10 +11992,10 @@ function Fieldset({
|
|
|
11992
11992
|
"aria-hidden": "true",
|
|
11993
11993
|
className: cn(
|
|
11994
11994
|
"pointer-events-none absolute -top-[5px] bottom-0 left-0 right-0 m-0 min-w-0 rounded-[6px] border px-[13px] text-left transition-colors duration-75",
|
|
11995
|
-
"border-[var(--
|
|
11996
|
-
isActivated && "border-[var(--
|
|
11997
|
-
isFocused && "border-[var(--
|
|
11998
|
-
invalid && "border-[var(--
|
|
11995
|
+
"border-[var(--field-border)]",
|
|
11996
|
+
isActivated && "border-[var(--field-border-activated)]",
|
|
11997
|
+
isFocused && "border-[var(--field-border-focused)]",
|
|
11998
|
+
invalid && "border-[var(--field-border-invalid)]",
|
|
11999
11999
|
className
|
|
12000
12000
|
),
|
|
12001
12001
|
children: /* @__PURE__ */ jsxs88(
|
|
@@ -12012,8 +12012,8 @@ function Fieldset({
|
|
|
12012
12012
|
"span",
|
|
12013
12013
|
{
|
|
12014
12014
|
className: cn(
|
|
12015
|
-
"visible inline-block px-1 text-[
|
|
12016
|
-
raised ? "font-
|
|
12015
|
+
"visible inline-block px-1 text-[length:var(--field-label-raised-font-size)] opacity-0",
|
|
12016
|
+
raised ? "font-[var(--field-label-raised-font-weight)]" : "font-[var(--field-label-font-weight)]"
|
|
12017
12017
|
),
|
|
12018
12018
|
children: legend || label
|
|
12019
12019
|
}
|
|
@@ -12142,7 +12142,7 @@ var Input = React44.forwardRef(
|
|
|
12142
12142
|
"label",
|
|
12143
12143
|
{
|
|
12144
12144
|
htmlFor: inputId,
|
|
12145
|
-
className: "input__top-label mb-2 block text-[
|
|
12145
|
+
className: "input__top-label mb-2 block text-[length:var(--field-top-label-font-size)] font-[var(--field-top-label-font-weight)] text-[var(--chekin-color-brand-navy)]",
|
|
12146
12146
|
children: topLabel
|
|
12147
12147
|
}
|
|
12148
12148
|
),
|
|
@@ -12303,13 +12303,42 @@ var Input = React44.forwardRef(
|
|
|
12303
12303
|
);
|
|
12304
12304
|
Input.displayName = "Input";
|
|
12305
12305
|
|
|
12306
|
+
// src/dashboard/copy-input/CopyInput.tsx
|
|
12307
|
+
import * as React45 from "react";
|
|
12308
|
+
import { jsx as jsx143 } from "react/jsx-runtime";
|
|
12309
|
+
var CopyInput = React45.forwardRef(
|
|
12310
|
+
({ value = "", copyTooltip, copySize, copyVariant = "ghost", onCopy, ...props }, ref) => {
|
|
12311
|
+
return /* @__PURE__ */ jsx143(
|
|
12312
|
+
Input,
|
|
12313
|
+
{
|
|
12314
|
+
...props,
|
|
12315
|
+
ref,
|
|
12316
|
+
value,
|
|
12317
|
+
readOnly: true,
|
|
12318
|
+
trailingAdornment: /* @__PURE__ */ jsx143("span", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx143(
|
|
12319
|
+
CopyIcon,
|
|
12320
|
+
{
|
|
12321
|
+
textToCopy: value,
|
|
12322
|
+
tooltipText: copyTooltip,
|
|
12323
|
+
size: copySize,
|
|
12324
|
+
variant: copyVariant,
|
|
12325
|
+
onClick: onCopy
|
|
12326
|
+
}
|
|
12327
|
+
) }),
|
|
12328
|
+
inputClassName: cn("pr-12", props.inputClassName)
|
|
12329
|
+
}
|
|
12330
|
+
);
|
|
12331
|
+
}
|
|
12332
|
+
);
|
|
12333
|
+
CopyInput.displayName = "CopyInput";
|
|
12334
|
+
|
|
12306
12335
|
// src/dashboard/phone-input/PhoneInput.tsx
|
|
12307
|
-
import * as
|
|
12336
|
+
import * as React51 from "react";
|
|
12308
12337
|
import { useTranslation as useTranslation33 } from "react-i18next";
|
|
12309
12338
|
|
|
12310
12339
|
// src/dashboard/_select-internals/SelectFieldShell.tsx
|
|
12311
12340
|
import { useTranslation as useTranslation26 } from "react-i18next";
|
|
12312
|
-
import { jsx as
|
|
12341
|
+
import { jsx as jsx144, jsxs as jsxs90 } from "react/jsx-runtime";
|
|
12313
12342
|
var FOCUSABLE_TRIGGER_SELECTOR = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
12314
12343
|
function SelectFieldShell({
|
|
12315
12344
|
containerRef,
|
|
@@ -12353,20 +12382,20 @@ function SelectFieldShell({
|
|
|
12353
12382
|
),
|
|
12354
12383
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
12355
12384
|
children: [
|
|
12356
|
-
name && /* @__PURE__ */
|
|
12385
|
+
name && /* @__PURE__ */ jsx144("input", { type: "hidden", name, value: hiddenValue ?? "" }),
|
|
12357
12386
|
/* @__PURE__ */ jsxs90("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
12358
|
-
topLabel && /* @__PURE__ */
|
|
12387
|
+
topLabel && /* @__PURE__ */ jsx144(
|
|
12359
12388
|
"label",
|
|
12360
12389
|
{
|
|
12361
12390
|
htmlFor: triggerId,
|
|
12362
|
-
className: "mb-2 block text-[
|
|
12391
|
+
className: "mb-2 block text-[length:var(--field-top-label-font-size)] font-[var(--field-top-label-font-weight)] text-[var(--chekin-color-brand-navy)]",
|
|
12363
12392
|
children: topLabel
|
|
12364
12393
|
}
|
|
12365
12394
|
),
|
|
12366
|
-
/* @__PURE__ */
|
|
12367
|
-
!errorMessage && optional && /* @__PURE__ */
|
|
12368
|
-
!errorMessage && helperText && /* @__PURE__ */
|
|
12369
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */
|
|
12395
|
+
/* @__PURE__ */ jsx144("div", { className: "relative w-full", children }),
|
|
12396
|
+
!errorMessage && optional && /* @__PURE__ */ jsx144("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
12397
|
+
!errorMessage && helperText && /* @__PURE__ */ jsx144("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
12398
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx144(
|
|
12370
12399
|
FieldErrorMessage,
|
|
12371
12400
|
{
|
|
12372
12401
|
id: errorId,
|
|
@@ -12382,7 +12411,7 @@ function SelectFieldShell({
|
|
|
12382
12411
|
}
|
|
12383
12412
|
|
|
12384
12413
|
// src/dashboard/_select-internals/SelectMenu.tsx
|
|
12385
|
-
import * as
|
|
12414
|
+
import * as React46 from "react";
|
|
12386
12415
|
import { useTranslation as useTranslation27 } from "react-i18next";
|
|
12387
12416
|
|
|
12388
12417
|
// src/dashboard/_select-internals/utils.ts
|
|
@@ -12477,7 +12506,7 @@ function countriesFilter(option, inputValue) {
|
|
|
12477
12506
|
|
|
12478
12507
|
// src/dashboard/_select-internals/slots/DefaultOption.tsx
|
|
12479
12508
|
import { Check as Check6 } from "lucide-react";
|
|
12480
|
-
import { jsx as
|
|
12509
|
+
import { jsx as jsx145, jsxs as jsxs91 } from "react/jsx-runtime";
|
|
12481
12510
|
function DefaultOption(props) {
|
|
12482
12511
|
const {
|
|
12483
12512
|
option,
|
|
@@ -12520,9 +12549,9 @@ function DefaultOption(props) {
|
|
|
12520
12549
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
12521
12550
|
),
|
|
12522
12551
|
children: [
|
|
12523
|
-
/* @__PURE__ */
|
|
12524
|
-
option.description && /* @__PURE__ */
|
|
12525
|
-
isSelected && /* @__PURE__ */
|
|
12552
|
+
/* @__PURE__ */ jsx145("span", { className: "block min-w-0 break-words", children: labelContent }),
|
|
12553
|
+
option.description && /* @__PURE__ */ jsx145("span", { className: "ml-auto shrink-0 self-center text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description }),
|
|
12554
|
+
isSelected && /* @__PURE__ */ jsx145(
|
|
12526
12555
|
Check6,
|
|
12527
12556
|
{
|
|
12528
12557
|
"aria-hidden": "true",
|
|
@@ -12539,7 +12568,7 @@ function DefaultOption(props) {
|
|
|
12539
12568
|
}
|
|
12540
12569
|
|
|
12541
12570
|
// src/dashboard/_select-internals/SelectMenu.tsx
|
|
12542
|
-
import { jsx as
|
|
12571
|
+
import { jsx as jsx146, jsxs as jsxs92 } from "react/jsx-runtime";
|
|
12543
12572
|
function buildMenuEntries(groupedOptions, options, formatGroupLabel, listboxId) {
|
|
12544
12573
|
if (!groupedOptions || !groupedOptions.some((item) => isOptionGroup(item))) {
|
|
12545
12574
|
return options.map((option, index) => ({
|
|
@@ -12620,11 +12649,11 @@ function SelectMenu({
|
|
|
12620
12649
|
const hasOptions = options.length > 0;
|
|
12621
12650
|
const Option = components?.Option ?? DefaultOption;
|
|
12622
12651
|
const lastIndex = options.length - 1;
|
|
12623
|
-
const selectedList =
|
|
12652
|
+
const selectedList = React46.useMemo(
|
|
12624
12653
|
() => selectedValues ?? (selectedValue ? [selectedValue] : []),
|
|
12625
12654
|
[selectedValues, selectedValue]
|
|
12626
12655
|
);
|
|
12627
|
-
const entries =
|
|
12656
|
+
const entries = React46.useMemo(
|
|
12628
12657
|
() => buildMenuEntries(groupedOptions, options, formatGroupLabel, id),
|
|
12629
12658
|
[groupedOptions, options, formatGroupLabel, id]
|
|
12630
12659
|
);
|
|
@@ -12635,7 +12664,7 @@ function SelectMenu({
|
|
|
12635
12664
|
const optionDisabled = Boolean(
|
|
12636
12665
|
disabled || option.isDisabled || isOptionDisabled?.(option)
|
|
12637
12666
|
);
|
|
12638
|
-
return /* @__PURE__ */
|
|
12667
|
+
return /* @__PURE__ */ jsx146(
|
|
12639
12668
|
Option,
|
|
12640
12669
|
{
|
|
12641
12670
|
id: getOptionId2(flatIndex),
|
|
@@ -12656,8 +12685,8 @@ function SelectMenu({
|
|
|
12656
12685
|
key
|
|
12657
12686
|
);
|
|
12658
12687
|
};
|
|
12659
|
-
const wasAtBottomRef =
|
|
12660
|
-
const handleScroll =
|
|
12688
|
+
const wasAtBottomRef = React46.useRef(false);
|
|
12689
|
+
const handleScroll = React46.useCallback(
|
|
12661
12690
|
(event) => {
|
|
12662
12691
|
if (!onMenuScrollToBottom) return;
|
|
12663
12692
|
const target = event.currentTarget;
|
|
@@ -12688,11 +12717,11 @@ function SelectMenu({
|
|
|
12688
12717
|
menuClassName
|
|
12689
12718
|
),
|
|
12690
12719
|
children: [
|
|
12691
|
-
!hasOptions && (emptyContent ?? /* @__PURE__ */
|
|
12720
|
+
!hasOptions && (emptyContent ?? /* @__PURE__ */ jsx146("div", { className: "px-3 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: emptyMessage })),
|
|
12692
12721
|
entries.map((entry) => {
|
|
12693
12722
|
if (entry.kind === "group") {
|
|
12694
12723
|
return /* @__PURE__ */ jsxs92("div", { role: "group", "aria-labelledby": entry.labelId, children: [
|
|
12695
|
-
/* @__PURE__ */
|
|
12724
|
+
/* @__PURE__ */ jsx146(
|
|
12696
12725
|
"div",
|
|
12697
12726
|
{
|
|
12698
12727
|
id: entry.labelId,
|
|
@@ -12713,7 +12742,7 @@ function SelectMenu({
|
|
|
12713
12742
|
|
|
12714
12743
|
// src/dashboard/_select-internals/SelectMenuPanel.tsx
|
|
12715
12744
|
import { useTranslation as useTranslation28 } from "react-i18next";
|
|
12716
|
-
import { jsx as
|
|
12745
|
+
import { jsx as jsx147, jsxs as jsxs93 } from "react/jsx-runtime";
|
|
12717
12746
|
function SelectMenuPanel({
|
|
12718
12747
|
isOpen,
|
|
12719
12748
|
isMobile: isMobile3,
|
|
@@ -12731,7 +12760,7 @@ function SelectMenuPanel({
|
|
|
12731
12760
|
const fallbackTitle = t("select_option");
|
|
12732
12761
|
const titleText = typeof title === "string" || typeof title === "number" ? String(title) : fallbackTitle;
|
|
12733
12762
|
const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : titleText;
|
|
12734
|
-
return /* @__PURE__ */
|
|
12763
|
+
return /* @__PURE__ */ jsx147(
|
|
12735
12764
|
Drawer,
|
|
12736
12765
|
{
|
|
12737
12766
|
open: isOpen,
|
|
@@ -12745,9 +12774,9 @@ function SelectMenuPanel({
|
|
|
12745
12774
|
lockScroll: false,
|
|
12746
12775
|
className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
|
|
12747
12776
|
children: [
|
|
12748
|
-
/* @__PURE__ */
|
|
12749
|
-
/* @__PURE__ */
|
|
12750
|
-
/* @__PURE__ */
|
|
12777
|
+
/* @__PURE__ */ jsx147(DrawerTitle, { className: "sr-only", children: titleText }),
|
|
12778
|
+
/* @__PURE__ */ jsx147(DrawerDescription, { className: "sr-only", children: descriptionText }),
|
|
12779
|
+
/* @__PURE__ */ jsx147(
|
|
12751
12780
|
"div",
|
|
12752
12781
|
{
|
|
12753
12782
|
className: cn(
|
|
@@ -12763,7 +12792,7 @@ function SelectMenuPanel({
|
|
|
12763
12792
|
}
|
|
12764
12793
|
);
|
|
12765
12794
|
}
|
|
12766
|
-
return /* @__PURE__ */
|
|
12795
|
+
return /* @__PURE__ */ jsx147(
|
|
12767
12796
|
"div",
|
|
12768
12797
|
{
|
|
12769
12798
|
className: cn(
|
|
@@ -12777,7 +12806,7 @@ function SelectMenuPanel({
|
|
|
12777
12806
|
|
|
12778
12807
|
// src/dashboard/_select-internals/SelectSearchInput.tsx
|
|
12779
12808
|
import { Search as Search3 } from "lucide-react";
|
|
12780
|
-
import { jsx as
|
|
12809
|
+
import { jsx as jsx148, jsxs as jsxs94 } from "react/jsx-runtime";
|
|
12781
12810
|
function SelectSearchInput({
|
|
12782
12811
|
inputRef,
|
|
12783
12812
|
value,
|
|
@@ -12787,15 +12816,15 @@ function SelectSearchInput({
|
|
|
12787
12816
|
onChange,
|
|
12788
12817
|
onKeyDown
|
|
12789
12818
|
}) {
|
|
12790
|
-
return /* @__PURE__ */
|
|
12791
|
-
/* @__PURE__ */
|
|
12819
|
+
return /* @__PURE__ */ jsx148("div", { className: "border-b border-[var(--chekin-color-gray-3)] bg-white p-2", children: /* @__PURE__ */ jsxs94("div", { className: "relative", children: [
|
|
12820
|
+
/* @__PURE__ */ jsx148(
|
|
12792
12821
|
Search3,
|
|
12793
12822
|
{
|
|
12794
12823
|
"aria-hidden": "true",
|
|
12795
12824
|
className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--chekin-color-gray-2)]"
|
|
12796
12825
|
}
|
|
12797
12826
|
),
|
|
12798
|
-
/* @__PURE__ */
|
|
12827
|
+
/* @__PURE__ */ jsx148(
|
|
12799
12828
|
"input",
|
|
12800
12829
|
{
|
|
12801
12830
|
ref: inputRef,
|
|
@@ -12815,7 +12844,7 @@ function SelectSearchInput({
|
|
|
12815
12844
|
|
|
12816
12845
|
// src/dashboard/_select-internals/SelectTrigger.tsx
|
|
12817
12846
|
import { ChevronDown as ChevronDown2 } from "lucide-react";
|
|
12818
|
-
import { jsx as
|
|
12847
|
+
import { jsx as jsx149, jsxs as jsxs95 } from "react/jsx-runtime";
|
|
12819
12848
|
function SelectTrigger({
|
|
12820
12849
|
triggerRef,
|
|
12821
12850
|
triggerId,
|
|
@@ -12870,9 +12899,9 @@ function SelectTrigger({
|
|
|
12870
12899
|
loading && "!cursor-progress"
|
|
12871
12900
|
),
|
|
12872
12901
|
children: [
|
|
12873
|
-
leftIcon && /* @__PURE__ */
|
|
12874
|
-
/* @__PURE__ */
|
|
12875
|
-
/* @__PURE__ */
|
|
12902
|
+
leftIcon && /* @__PURE__ */ jsx149("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__ */ jsx149("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
12903
|
+
/* @__PURE__ */ jsx149("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: hasValue ? valueLabel : showPlaceholderWhenIdle || isOpen ? placeholder : null }),
|
|
12904
|
+
/* @__PURE__ */ jsx149("span", { className: "flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: !hideIndicator && /* @__PURE__ */ jsx149(
|
|
12876
12905
|
ChevronDown2,
|
|
12877
12906
|
{
|
|
12878
12907
|
size: 16,
|
|
@@ -12888,9 +12917,9 @@ function SelectTrigger({
|
|
|
12888
12917
|
}
|
|
12889
12918
|
|
|
12890
12919
|
// src/dashboard/_select-internals/ComboboxTrigger.tsx
|
|
12891
|
-
import { SquareX as SquareX2 } from "lucide-react";
|
|
12920
|
+
import { Search as Search4, SquareX as SquareX2 } from "lucide-react";
|
|
12892
12921
|
import { useTranslation as useTranslation29 } from "react-i18next";
|
|
12893
|
-
import { jsx as
|
|
12922
|
+
import { jsx as jsx150, jsxs as jsxs96 } from "react/jsx-runtime";
|
|
12894
12923
|
function ComboboxTrigger({
|
|
12895
12924
|
triggerId,
|
|
12896
12925
|
listboxId,
|
|
@@ -12958,13 +12987,14 @@ function ComboboxTrigger({
|
|
|
12958
12987
|
containerClassName
|
|
12959
12988
|
),
|
|
12960
12989
|
children: [
|
|
12961
|
-
leftIcon && /* @__PURE__ */
|
|
12990
|
+
leftIcon && /* @__PURE__ */ jsx150("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__ */ jsx150("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
12991
|
+
!leftIcon && searchable && (isFocused || isOpen) && /* @__PURE__ */ jsx150("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__ */ jsx150("span", { className: "flex h-full w-10 items-center justify-center", children: /* @__PURE__ */ jsx150(Search4, { size: 16, "aria-hidden": "true" }) }) }),
|
|
12962
12992
|
/* @__PURE__ */ jsxs96(
|
|
12963
12993
|
"div",
|
|
12964
12994
|
{
|
|
12965
12995
|
className: cn(
|
|
12966
12996
|
"flex min-w-0 flex-1 items-center gap-2 py-[10px]",
|
|
12967
|
-
leftIcon ? "pl-10" : "pl-4",
|
|
12997
|
+
leftIcon || searchable && (isFocused || isOpen) ? "pl-10" : "pl-4",
|
|
12968
12998
|
isMulti && "flex-wrap"
|
|
12969
12999
|
),
|
|
12970
13000
|
children: [
|
|
@@ -12978,7 +13008,7 @@ function ComboboxTrigger({
|
|
|
12978
13008
|
!searchable && "sr-only"
|
|
12979
13009
|
),
|
|
12980
13010
|
children: [
|
|
12981
|
-
/* @__PURE__ */
|
|
13011
|
+
/* @__PURE__ */ jsx150(
|
|
12982
13012
|
"span",
|
|
12983
13013
|
{
|
|
12984
13014
|
"aria-hidden": "true",
|
|
@@ -12986,7 +13016,7 @@ function ComboboxTrigger({
|
|
|
12986
13016
|
children: inputMeasureValue
|
|
12987
13017
|
}
|
|
12988
13018
|
),
|
|
12989
|
-
/* @__PURE__ */
|
|
13019
|
+
/* @__PURE__ */ jsx150(
|
|
12990
13020
|
"input",
|
|
12991
13021
|
{
|
|
12992
13022
|
ref: inputRef,
|
|
@@ -13021,17 +13051,17 @@ function ComboboxTrigger({
|
|
|
13021
13051
|
}
|
|
13022
13052
|
),
|
|
13023
13053
|
/* @__PURE__ */ jsxs96("span", { className: "flex h-12 shrink-0 items-center gap-2 self-start pl-2 pr-4 text-[var(--chekin-color-gray-2)]", children: [
|
|
13024
|
-
showClear && /* @__PURE__ */
|
|
13054
|
+
showClear && /* @__PURE__ */ jsx150(
|
|
13025
13055
|
"button",
|
|
13026
13056
|
{
|
|
13027
13057
|
type: "button",
|
|
13028
13058
|
onClick: onClear,
|
|
13029
13059
|
className: "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
|
|
13030
13060
|
"aria-label": clearLabel,
|
|
13031
|
-
children: /* @__PURE__ */
|
|
13061
|
+
children: /* @__PURE__ */ jsx150(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
13032
13062
|
}
|
|
13033
13063
|
),
|
|
13034
|
-
!hideIndicator && /* @__PURE__ */
|
|
13064
|
+
!hideIndicator && /* @__PURE__ */ jsx150(
|
|
13035
13065
|
RotateArrow,
|
|
13036
13066
|
{
|
|
13037
13067
|
shouldRotate: isOpen,
|
|
@@ -13047,14 +13077,14 @@ function ComboboxTrigger({
|
|
|
13047
13077
|
}
|
|
13048
13078
|
|
|
13049
13079
|
// src/dashboard/_select-internals/useSelectIds.ts
|
|
13050
|
-
import * as
|
|
13080
|
+
import * as React47 from "react";
|
|
13051
13081
|
function useSelectIds({
|
|
13052
13082
|
name,
|
|
13053
13083
|
hasValue,
|
|
13054
13084
|
error,
|
|
13055
13085
|
hideErrorMessage
|
|
13056
13086
|
}) {
|
|
13057
|
-
const reactId =
|
|
13087
|
+
const reactId = React47.useId().replace(/:/g, "");
|
|
13058
13088
|
const baseId = name ? `dash-select-${name}` : `dash-select-${reactId}`;
|
|
13059
13089
|
const triggerId = `${baseId}-trigger`;
|
|
13060
13090
|
const labelId = `${baseId}-label`;
|
|
@@ -13064,7 +13094,7 @@ function useSelectIds({
|
|
|
13064
13094
|
const listboxId = `${baseId}-listbox`;
|
|
13065
13095
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
13066
13096
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
13067
|
-
const getOptionId2 =
|
|
13097
|
+
const getOptionId2 = React47.useCallback(
|
|
13068
13098
|
(index) => `${baseId}-option-${index}`,
|
|
13069
13099
|
[baseId]
|
|
13070
13100
|
);
|
|
@@ -13082,7 +13112,7 @@ function useSelectIds({
|
|
|
13082
13112
|
}
|
|
13083
13113
|
|
|
13084
13114
|
// src/dashboard/_select-internals/useSelectMenuState.ts
|
|
13085
|
-
import * as
|
|
13115
|
+
import * as React48 from "react";
|
|
13086
13116
|
function useSelectMenuState({
|
|
13087
13117
|
isBlocked,
|
|
13088
13118
|
isMobile: isMobile3,
|
|
@@ -13090,14 +13120,14 @@ function useSelectMenuState({
|
|
|
13090
13120
|
controlledIsOpen,
|
|
13091
13121
|
onMenuOpenChange
|
|
13092
13122
|
}) {
|
|
13093
|
-
const containerRef =
|
|
13094
|
-
const [internalIsOpen, setInternalIsOpen] =
|
|
13095
|
-
const [hasClosedControlledOpen, setHasClosedControlledOpen] =
|
|
13123
|
+
const containerRef = React48.useRef(null);
|
|
13124
|
+
const [internalIsOpen, setInternalIsOpen] = React48.useState(false);
|
|
13125
|
+
const [hasClosedControlledOpen, setHasClosedControlledOpen] = React48.useState(false);
|
|
13096
13126
|
const isOpen = controlledIsOpen === false ? false : controlledIsOpen === true ? !hasClosedControlledOpen : internalIsOpen;
|
|
13097
|
-
|
|
13127
|
+
React48.useEffect(() => {
|
|
13098
13128
|
if (controlledIsOpen !== true) setHasClosedControlledOpen(false);
|
|
13099
13129
|
}, [controlledIsOpen]);
|
|
13100
|
-
const setIsOpen =
|
|
13130
|
+
const setIsOpen = React48.useCallback(
|
|
13101
13131
|
(next) => {
|
|
13102
13132
|
const value = typeof next === "function" ? next(isOpen) : next;
|
|
13103
13133
|
if (controlledIsOpen === true) setHasClosedControlledOpen(!value);
|
|
@@ -13106,13 +13136,13 @@ function useSelectMenuState({
|
|
|
13106
13136
|
},
|
|
13107
13137
|
[isOpen, controlledIsOpen, onMenuOpenChange]
|
|
13108
13138
|
);
|
|
13109
|
-
const openMenu =
|
|
13139
|
+
const openMenu = React48.useCallback(() => {
|
|
13110
13140
|
setIsOpen(true);
|
|
13111
13141
|
}, [setIsOpen]);
|
|
13112
|
-
const closeMenu =
|
|
13142
|
+
const closeMenu = React48.useCallback(() => {
|
|
13113
13143
|
setIsOpen(false);
|
|
13114
13144
|
}, [setIsOpen]);
|
|
13115
|
-
const toggleMenu =
|
|
13145
|
+
const toggleMenu = React48.useCallback(() => {
|
|
13116
13146
|
if (isBlocked) return;
|
|
13117
13147
|
setIsOpen((prev) => !prev);
|
|
13118
13148
|
}, [isBlocked, setIsOpen]);
|
|
@@ -13124,14 +13154,14 @@ function useSelectMenuState({
|
|
|
13124
13154
|
},
|
|
13125
13155
|
isDisabled: !isOpen || isMobile3
|
|
13126
13156
|
});
|
|
13127
|
-
|
|
13157
|
+
React48.useEffect(() => {
|
|
13128
13158
|
if (isBlocked) setIsOpen(false);
|
|
13129
13159
|
}, [isBlocked, setIsOpen]);
|
|
13130
13160
|
return { containerRef, isOpen, openMenu, closeMenu, toggleMenu, setIsOpen };
|
|
13131
13161
|
}
|
|
13132
13162
|
|
|
13133
13163
|
// src/dashboard/_select-internals/useSelectState.ts
|
|
13134
|
-
import * as
|
|
13164
|
+
import * as React49 from "react";
|
|
13135
13165
|
function resolveValueLabel(option, getValueLabel) {
|
|
13136
13166
|
if (!option) return "";
|
|
13137
13167
|
return getValueLabel?.(option) ?? String(option.label);
|
|
@@ -13167,25 +13197,25 @@ function useSelectState(params) {
|
|
|
13167
13197
|
isSearchInDropdown,
|
|
13168
13198
|
searchable = true
|
|
13169
13199
|
} = params;
|
|
13170
|
-
const inputRef =
|
|
13171
|
-
const mobileSearchInputRef =
|
|
13172
|
-
const listRef =
|
|
13173
|
-
const optionRefs =
|
|
13200
|
+
const inputRef = React49.useRef(null);
|
|
13201
|
+
const mobileSearchInputRef = React49.useRef(null);
|
|
13202
|
+
const listRef = React49.useRef(null);
|
|
13203
|
+
const optionRefs = React49.useRef([]);
|
|
13174
13204
|
const isMobile3 = useIsMobile();
|
|
13175
|
-
const [isFocused, setIsFocused] =
|
|
13176
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
13205
|
+
const [isFocused, setIsFocused] = React49.useState(false);
|
|
13206
|
+
const [highlightedIndex, setHighlightedIndex] = React49.useState(-1);
|
|
13177
13207
|
const singleSelected = isMulti ? void 0 : selectedOptions[0];
|
|
13178
|
-
const valueLabel =
|
|
13208
|
+
const valueLabel = React49.useMemo(
|
|
13179
13209
|
() => resolveValueLabel(singleSelected, getValueLabel),
|
|
13180
13210
|
[singleSelected, getValueLabel]
|
|
13181
13211
|
);
|
|
13182
13212
|
const isSearchOnlyInput = searchable && (isMulti || Boolean(isSearchInDropdown));
|
|
13183
13213
|
const isInputControlled = controlledInputValue !== void 0;
|
|
13184
|
-
const [internalInputValue, setInternalInputValue] =
|
|
13214
|
+
const [internalInputValue, setInternalInputValue] = React49.useState(
|
|
13185
13215
|
searchable && !isSearchOnlyInput ? valueLabel : ""
|
|
13186
13216
|
);
|
|
13187
13217
|
const inputValue = isInputControlled ? controlledInputValue : internalInputValue;
|
|
13188
|
-
const setInputValue =
|
|
13218
|
+
const setInputValue = React49.useCallback(
|
|
13189
13219
|
(next) => {
|
|
13190
13220
|
if (!isInputControlled) setInternalInputValue(next);
|
|
13191
13221
|
},
|
|
@@ -13204,12 +13234,12 @@ function useSelectState(params) {
|
|
|
13204
13234
|
});
|
|
13205
13235
|
const ids = useSelectIds({ name, hasValue, error, hideErrorMessage });
|
|
13206
13236
|
const { listboxId, getOptionId: getOptionId2 } = ids;
|
|
13207
|
-
|
|
13237
|
+
React49.useEffect(() => {
|
|
13208
13238
|
if (!searchable) return;
|
|
13209
13239
|
if (isSearchOnlyInput) return;
|
|
13210
13240
|
if (!isFocused) setInputValue(valueLabel);
|
|
13211
13241
|
}, [valueLabel, isFocused, isSearchOnlyInput, searchable]);
|
|
13212
|
-
|
|
13242
|
+
React49.useEffect(() => {
|
|
13213
13243
|
if (!isSearchOnlyInput) return;
|
|
13214
13244
|
if (!isOpen) {
|
|
13215
13245
|
setInputValue("");
|
|
@@ -13218,11 +13248,11 @@ function useSelectState(params) {
|
|
|
13218
13248
|
}, [isOpen, isSearchOnlyInput]);
|
|
13219
13249
|
const trimmedInput = inputValue.trim();
|
|
13220
13250
|
const isFiltering = searchable && (isSearchOnlyInput ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase());
|
|
13221
|
-
const filteredOptions =
|
|
13251
|
+
const filteredOptions = React49.useMemo(() => {
|
|
13222
13252
|
if (!isFiltering) return options;
|
|
13223
13253
|
return options.filter((option) => filterOption(option, trimmedInput));
|
|
13224
13254
|
}, [options, isFiltering, trimmedInput, filterOption]);
|
|
13225
|
-
const canCreateNewOption =
|
|
13255
|
+
const canCreateNewOption = React49.useMemo(() => {
|
|
13226
13256
|
if (!isCreatable || !trimmedInput) return false;
|
|
13227
13257
|
if (isValidNewOption) {
|
|
13228
13258
|
return isValidNewOption(trimmedInput, selectedOptions, options);
|
|
@@ -13236,7 +13266,7 @@ function useSelectState(params) {
|
|
|
13236
13266
|
);
|
|
13237
13267
|
return !existsInOptions && !existsInSelected;
|
|
13238
13268
|
}, [isCreatable, trimmedInput, isValidNewOption, options, selectedOptions]);
|
|
13239
|
-
|
|
13269
|
+
React49.useEffect(() => {
|
|
13240
13270
|
if (!isOpen || filteredOptions.length === 0) {
|
|
13241
13271
|
setHighlightedIndex(-1);
|
|
13242
13272
|
return;
|
|
@@ -13246,23 +13276,23 @@ function useSelectState(params) {
|
|
|
13246
13276
|
return getFirstEnabledOptionIndex(filteredOptions, isOptionDisabled);
|
|
13247
13277
|
});
|
|
13248
13278
|
}, [isOpen, filteredOptions, isOptionDisabled]);
|
|
13249
|
-
|
|
13279
|
+
React49.useEffect(() => {
|
|
13250
13280
|
if (!isOpen || highlightedIndex < 0) return;
|
|
13251
13281
|
optionRefs.current[highlightedIndex]?.scrollIntoView?.({ block: "nearest" });
|
|
13252
13282
|
}, [highlightedIndex, isOpen]);
|
|
13253
13283
|
const inMenuSearchVisible = searchable && (isMobile3 || Boolean(isSearchInDropdown));
|
|
13254
|
-
|
|
13284
|
+
React49.useEffect(() => {
|
|
13255
13285
|
if (!isOpen || !inMenuSearchVisible) return;
|
|
13256
13286
|
const frame = window.requestAnimationFrame(
|
|
13257
13287
|
() => mobileSearchInputRef.current?.focus()
|
|
13258
13288
|
);
|
|
13259
13289
|
return () => window.cancelAnimationFrame(frame);
|
|
13260
13290
|
}, [isOpen, inMenuSearchVisible]);
|
|
13261
|
-
const isValueSelected =
|
|
13291
|
+
const isValueSelected = React49.useCallback(
|
|
13262
13292
|
(option) => isOptionSelected2(option, selectedOptions),
|
|
13263
13293
|
[isOptionSelected2, selectedOptions]
|
|
13264
13294
|
);
|
|
13265
|
-
const selectOption =
|
|
13295
|
+
const selectOption = React49.useCallback(
|
|
13266
13296
|
(option) => {
|
|
13267
13297
|
if (!isOptionEnabled(option, isOptionDisabled)) return;
|
|
13268
13298
|
if (isMulti) {
|
|
@@ -13298,7 +13328,7 @@ function useSelectState(params) {
|
|
|
13298
13328
|
searchable
|
|
13299
13329
|
]
|
|
13300
13330
|
);
|
|
13301
|
-
const removeOption =
|
|
13331
|
+
const removeOption = React49.useCallback(
|
|
13302
13332
|
(option) => {
|
|
13303
13333
|
if (isBlocked) return;
|
|
13304
13334
|
onSelectionChange(
|
|
@@ -13309,7 +13339,7 @@ function useSelectState(params) {
|
|
|
13309
13339
|
},
|
|
13310
13340
|
[isBlocked, onSelectionChange, selectedOptions]
|
|
13311
13341
|
);
|
|
13312
|
-
const clearSelection =
|
|
13342
|
+
const clearSelection = React49.useCallback(
|
|
13313
13343
|
(event) => {
|
|
13314
13344
|
event?.stopPropagation();
|
|
13315
13345
|
if (isBlocked) return;
|
|
@@ -13319,7 +13349,7 @@ function useSelectState(params) {
|
|
|
13319
13349
|
},
|
|
13320
13350
|
[isBlocked, onSelectionChange]
|
|
13321
13351
|
);
|
|
13322
|
-
const createOption =
|
|
13352
|
+
const createOption = React49.useCallback(() => {
|
|
13323
13353
|
if (!canCreateNewOption) return;
|
|
13324
13354
|
const newOption = onCreateOption?.(trimmedInput) ?? { value: trimmedInput, label: trimmedInput };
|
|
13325
13355
|
if (isMulti) {
|
|
@@ -13349,7 +13379,7 @@ function useSelectState(params) {
|
|
|
13349
13379
|
isSearchInDropdown,
|
|
13350
13380
|
searchable
|
|
13351
13381
|
]);
|
|
13352
|
-
const handleInputChange =
|
|
13382
|
+
const handleInputChange = React49.useCallback(
|
|
13353
13383
|
(event) => {
|
|
13354
13384
|
if (!searchable) return;
|
|
13355
13385
|
const nextValue = event.target.value;
|
|
@@ -13359,7 +13389,7 @@ function useSelectState(params) {
|
|
|
13359
13389
|
},
|
|
13360
13390
|
[isOpen, onInputChange, searchable, setIsOpen, setInputValue]
|
|
13361
13391
|
);
|
|
13362
|
-
const handleInputFocus =
|
|
13392
|
+
const handleInputFocus = React49.useCallback(
|
|
13363
13393
|
(event) => {
|
|
13364
13394
|
if (isBlocked) return;
|
|
13365
13395
|
onFocus?.(event);
|
|
@@ -13371,17 +13401,17 @@ function useSelectState(params) {
|
|
|
13371
13401
|
},
|
|
13372
13402
|
[isBlocked, onFocus, openMenuOnFocus, setIsOpen, searchable, isMulti]
|
|
13373
13403
|
);
|
|
13374
|
-
const handleTriggerFocus =
|
|
13404
|
+
const handleTriggerFocus = React49.useCallback(() => {
|
|
13375
13405
|
if (isBlocked) return;
|
|
13376
13406
|
setIsFocused(true);
|
|
13377
13407
|
if (openMenuOnFocus) setIsOpen(true);
|
|
13378
13408
|
}, [isBlocked, openMenuOnFocus, setIsOpen]);
|
|
13379
|
-
const handleContainerClick =
|
|
13409
|
+
const handleContainerClick = React49.useCallback(() => {
|
|
13380
13410
|
if (isBlocked) return;
|
|
13381
13411
|
inputRef.current?.focus();
|
|
13382
13412
|
setIsOpen(true);
|
|
13383
13413
|
}, [isBlocked, setIsOpen]);
|
|
13384
|
-
const handleBlur =
|
|
13414
|
+
const handleBlur = React49.useCallback(
|
|
13385
13415
|
(event) => {
|
|
13386
13416
|
if (containerRef.current?.contains(event.relatedTarget)) return;
|
|
13387
13417
|
setIsFocused(false);
|
|
@@ -13390,7 +13420,7 @@ function useSelectState(params) {
|
|
|
13390
13420
|
},
|
|
13391
13421
|
[containerRef, isSearchOnlyInput, searchable, valueLabel, onBlur]
|
|
13392
13422
|
);
|
|
13393
|
-
const handleInputKeyDown =
|
|
13423
|
+
const handleInputKeyDown = React49.useCallback(
|
|
13394
13424
|
(event) => {
|
|
13395
13425
|
onKeyDown?.(event);
|
|
13396
13426
|
if (event.defaultPrevented) return;
|
|
@@ -13467,7 +13497,7 @@ function useSelectState(params) {
|
|
|
13467
13497
|
]
|
|
13468
13498
|
);
|
|
13469
13499
|
const isEmpty = !hasValue && !inputValue;
|
|
13470
|
-
|
|
13500
|
+
React49.useDebugValue({ isOpen, isMulti, highlightedIndex, selectedOptions });
|
|
13471
13501
|
return {
|
|
13472
13502
|
// ids
|
|
13473
13503
|
ids,
|
|
@@ -13529,7 +13559,7 @@ function useSelectState(params) {
|
|
|
13529
13559
|
// src/dashboard/_select-internals/slots/DefaultMultiValueChip.tsx
|
|
13530
13560
|
import { X as X10 } from "lucide-react";
|
|
13531
13561
|
import { useTranslation as useTranslation30 } from "react-i18next";
|
|
13532
|
-
import { jsx as
|
|
13562
|
+
import { jsx as jsx151, jsxs as jsxs97 } from "react/jsx-runtime";
|
|
13533
13563
|
function DefaultMultiValueChip({
|
|
13534
13564
|
option,
|
|
13535
13565
|
readOnly,
|
|
@@ -13538,8 +13568,8 @@ function DefaultMultiValueChip({
|
|
|
13538
13568
|
const { t } = useTranslation30();
|
|
13539
13569
|
const labelText = typeof option.label === "string" ? option.label : String(option.value);
|
|
13540
13570
|
return /* @__PURE__ */ jsxs97("span", { className: "inline-flex items-center gap-1 rounded-md border border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-pressed)] py-0.5 pl-2 pr-1 text-[13px] font-medium text-[var(--chekin-color-brand-navy)] transition-colors", children: [
|
|
13541
|
-
/* @__PURE__ */
|
|
13542
|
-
!readOnly && /* @__PURE__ */
|
|
13571
|
+
/* @__PURE__ */ jsx151("span", { className: "whitespace-nowrap leading-5", children: option.label }),
|
|
13572
|
+
!readOnly && /* @__PURE__ */ jsx151(
|
|
13543
13573
|
"button",
|
|
13544
13574
|
{
|
|
13545
13575
|
type: "button",
|
|
@@ -13549,14 +13579,14 @@ function DefaultMultiValueChip({
|
|
|
13549
13579
|
},
|
|
13550
13580
|
className: "flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-transparent p-0 text-[var(--chekin-color-gray-1)] outline-none transition-colors hover:bg-white/70 hover:text-[var(--chekin-color-brand-navy)] focus-visible:ring-2 focus-visible:ring-[var(--chekin-color-brand-blue)]/30",
|
|
13551
13581
|
"aria-label": t("remove_item", { label: labelText }),
|
|
13552
|
-
children: /* @__PURE__ */
|
|
13582
|
+
children: /* @__PURE__ */ jsx151(X10, { size: 12, strokeWidth: 2.5 })
|
|
13553
13583
|
}
|
|
13554
13584
|
)
|
|
13555
13585
|
] });
|
|
13556
13586
|
}
|
|
13557
13587
|
|
|
13558
13588
|
// src/dashboard/_select-internals/slots/DefaultControl.tsx
|
|
13559
|
-
import { jsx as
|
|
13589
|
+
import { jsx as jsx152 } from "react/jsx-runtime";
|
|
13560
13590
|
function DefaultControl(props) {
|
|
13561
13591
|
const {
|
|
13562
13592
|
triggerId,
|
|
@@ -13599,7 +13629,7 @@ function DefaultControl(props) {
|
|
|
13599
13629
|
const Chip = components.MultiValueChip ?? DefaultMultiValueChip;
|
|
13600
13630
|
const showClear = Boolean(clearable) && hasValue && !readOnly && !disabled;
|
|
13601
13631
|
const placeholderText = isMulti ? !hasValue ? placeholder : "" : placeholder;
|
|
13602
|
-
return /* @__PURE__ */
|
|
13632
|
+
return /* @__PURE__ */ jsx152(
|
|
13603
13633
|
ComboboxTrigger,
|
|
13604
13634
|
{
|
|
13605
13635
|
triggerId,
|
|
@@ -13635,7 +13665,7 @@ function DefaultControl(props) {
|
|
|
13635
13665
|
autoFocus,
|
|
13636
13666
|
leftIcon,
|
|
13637
13667
|
searchable,
|
|
13638
|
-
leadingContent: isMulti ? selectedOptions.map((option) => /* @__PURE__ */
|
|
13668
|
+
leadingContent: isMulti ? selectedOptions.map((option) => /* @__PURE__ */ jsx152(
|
|
13639
13669
|
Chip,
|
|
13640
13670
|
{
|
|
13641
13671
|
option,
|
|
@@ -13650,7 +13680,7 @@ function DefaultControl(props) {
|
|
|
13650
13680
|
|
|
13651
13681
|
// src/dashboard/_select-internals/slots/StaticControl.tsx
|
|
13652
13682
|
import { SquareX as SquareX3 } from "lucide-react";
|
|
13653
|
-
import { jsx as
|
|
13683
|
+
import { jsx as jsx153, jsxs as jsxs98 } from "react/jsx-runtime";
|
|
13654
13684
|
function StaticControl(props) {
|
|
13655
13685
|
const {
|
|
13656
13686
|
triggerId,
|
|
@@ -13679,7 +13709,7 @@ function StaticControl(props) {
|
|
|
13679
13709
|
} = props;
|
|
13680
13710
|
const showClear = Boolean(clearable) && hasValue && !readOnly && !disabled;
|
|
13681
13711
|
return /* @__PURE__ */ jsxs98("div", { className: "relative", children: [
|
|
13682
|
-
/* @__PURE__ */
|
|
13712
|
+
/* @__PURE__ */ jsx153(
|
|
13683
13713
|
SelectTrigger,
|
|
13684
13714
|
{
|
|
13685
13715
|
triggerId,
|
|
@@ -13705,21 +13735,21 @@ function StaticControl(props) {
|
|
|
13705
13735
|
onFocus: onTriggerFocus
|
|
13706
13736
|
}
|
|
13707
13737
|
),
|
|
13708
|
-
showClear && /* @__PURE__ */
|
|
13738
|
+
showClear && /* @__PURE__ */ jsx153(
|
|
13709
13739
|
"button",
|
|
13710
13740
|
{
|
|
13711
13741
|
type: "button",
|
|
13712
13742
|
onClick: onClear,
|
|
13713
13743
|
className: "absolute right-9 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
|
|
13714
13744
|
"aria-label": clearLabel,
|
|
13715
|
-
children: /* @__PURE__ */
|
|
13745
|
+
children: /* @__PURE__ */ jsx153(SquareX3, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
13716
13746
|
}
|
|
13717
13747
|
)
|
|
13718
13748
|
] });
|
|
13719
13749
|
}
|
|
13720
13750
|
|
|
13721
13751
|
// src/dashboard/_select-internals/slots/DefaultMenuList.tsx
|
|
13722
|
-
import { jsx as
|
|
13752
|
+
import { jsx as jsx154 } from "react/jsx-runtime";
|
|
13723
13753
|
function DefaultMenuList(props) {
|
|
13724
13754
|
const {
|
|
13725
13755
|
id,
|
|
@@ -13748,7 +13778,7 @@ function DefaultMenuList(props) {
|
|
|
13748
13778
|
groupedOptions,
|
|
13749
13779
|
formatGroupLabel
|
|
13750
13780
|
} = props;
|
|
13751
|
-
return /* @__PURE__ */
|
|
13781
|
+
return /* @__PURE__ */ jsx154(
|
|
13752
13782
|
SelectMenu,
|
|
13753
13783
|
{
|
|
13754
13784
|
id,
|
|
@@ -13783,14 +13813,14 @@ function DefaultMenuList(props) {
|
|
|
13783
13813
|
|
|
13784
13814
|
// src/dashboard/_select-internals/slots/DefaultCreateOption.tsx
|
|
13785
13815
|
import { useTranslation as useTranslation31 } from "react-i18next";
|
|
13786
|
-
import { jsx as
|
|
13816
|
+
import { jsx as jsx155 } from "react/jsx-runtime";
|
|
13787
13817
|
function DefaultCreateOption({
|
|
13788
13818
|
inputValue,
|
|
13789
13819
|
onCreate,
|
|
13790
13820
|
formatCreateLabel
|
|
13791
13821
|
}) {
|
|
13792
13822
|
const { t } = useTranslation31();
|
|
13793
|
-
return /* @__PURE__ */
|
|
13823
|
+
return /* @__PURE__ */ jsx155(
|
|
13794
13824
|
"button",
|
|
13795
13825
|
{
|
|
13796
13826
|
type: "button",
|
|
@@ -13824,7 +13854,7 @@ function mergeComponents(overrides) {
|
|
|
13824
13854
|
}
|
|
13825
13855
|
|
|
13826
13856
|
// src/dashboard/select/Select.tsx
|
|
13827
|
-
import * as
|
|
13857
|
+
import * as React50 from "react";
|
|
13828
13858
|
import { useTranslation as useTranslation32 } from "react-i18next";
|
|
13829
13859
|
|
|
13830
13860
|
// src/dashboard/select/useSetCorrectOptionIfThereIsOnlyValue.ts
|
|
@@ -13843,7 +13873,7 @@ function useSetCorrectOptionIfThereIsOnlyValue({ value, options, onChange, enabl
|
|
|
13843
13873
|
}
|
|
13844
13874
|
|
|
13845
13875
|
// src/dashboard/select/Select.tsx
|
|
13846
|
-
import { jsx as
|
|
13876
|
+
import { jsx as jsx156, jsxs as jsxs99 } from "react/jsx-runtime";
|
|
13847
13877
|
function SelectInternal(props, ref) {
|
|
13848
13878
|
const {
|
|
13849
13879
|
options = [],
|
|
@@ -13901,7 +13931,7 @@ function SelectInternal(props, ref) {
|
|
|
13901
13931
|
const closeMenuOnSelect = isMulti ? props.closeMenuOnSelect ?? false : void 0;
|
|
13902
13932
|
const { t } = useTranslation32();
|
|
13903
13933
|
const isControlled = props.value !== void 0;
|
|
13904
|
-
const [internalValue, setInternalValue] =
|
|
13934
|
+
const [internalValue, setInternalValue] = React50.useState(() => {
|
|
13905
13935
|
if (isMulti) return props.defaultValue ?? [];
|
|
13906
13936
|
return props.defaultValue ?? null;
|
|
13907
13937
|
});
|
|
@@ -13912,11 +13942,11 @@ function SelectInternal(props, ref) {
|
|
|
13912
13942
|
options,
|
|
13913
13943
|
onChange: !isMulti ? props.onChange : void 0
|
|
13914
13944
|
});
|
|
13915
|
-
const selectedOptions =
|
|
13945
|
+
const selectedOptions = React50.useMemo(() => {
|
|
13916
13946
|
if (isMulti) return currentValue ?? [];
|
|
13917
13947
|
return currentValue ? [currentValue] : [];
|
|
13918
13948
|
}, [isMulti, currentValue]);
|
|
13919
|
-
const onSelectionChange =
|
|
13949
|
+
const onSelectionChange = React50.useCallback(
|
|
13920
13950
|
(next, meta) => {
|
|
13921
13951
|
if (isMulti) {
|
|
13922
13952
|
if (!isControlled) setInternalValue(next);
|
|
@@ -13929,7 +13959,7 @@ function SelectInternal(props, ref) {
|
|
|
13929
13959
|
},
|
|
13930
13960
|
[isMulti, isControlled, props.onChange]
|
|
13931
13961
|
);
|
|
13932
|
-
const flatOptions =
|
|
13962
|
+
const flatOptions = React50.useMemo(() => flattenGroupedOptions(options), [options]);
|
|
13933
13963
|
const state = useSelectState({
|
|
13934
13964
|
isMulti,
|
|
13935
13965
|
options: flatOptions,
|
|
@@ -13960,14 +13990,14 @@ function SelectInternal(props, ref) {
|
|
|
13960
13990
|
isSearchInDropdown,
|
|
13961
13991
|
searchable
|
|
13962
13992
|
});
|
|
13963
|
-
const components =
|
|
13993
|
+
const components = React50.useMemo(() => {
|
|
13964
13994
|
const merged = mergeComponents(userComponents);
|
|
13965
13995
|
if ((isSearchInDropdown || !searchable && !isMulti) && !userComponents?.Control) {
|
|
13966
13996
|
return { ...merged, Control: StaticControl };
|
|
13967
13997
|
}
|
|
13968
13998
|
return merged;
|
|
13969
13999
|
}, [userComponents, isSearchInDropdown, searchable, isMulti]);
|
|
13970
|
-
|
|
14000
|
+
React50.useImperativeHandle(
|
|
13971
14001
|
ref,
|
|
13972
14002
|
() => state.containerRef.current
|
|
13973
14003
|
);
|
|
@@ -13975,6 +14005,7 @@ function SelectInternal(props, ref) {
|
|
|
13975
14005
|
const resolvedTitle = label ?? placeholder;
|
|
13976
14006
|
const accessibleLabel = !hasLabel && typeof placeholder === "string" ? placeholder : void 0;
|
|
13977
14007
|
const hasInvalidState = state.hasInvalidState || Boolean(invalid);
|
|
14008
|
+
const hasLeadingIcon = Boolean(leftIcon);
|
|
13978
14009
|
const hiddenValue = isMulti ? selectedOptions.map((item) => String(item.value)).join(",") : selectedOptions[0] ? String(selectedOptions[0].value) : "";
|
|
13979
14010
|
const handleClear = (event) => {
|
|
13980
14011
|
state.clearSelection(event);
|
|
@@ -14000,7 +14031,7 @@ function SelectInternal(props, ref) {
|
|
|
14000
14031
|
hiddenValue,
|
|
14001
14032
|
onBlur: state.handleBlur,
|
|
14002
14033
|
children: [
|
|
14003
|
-
/* @__PURE__ */
|
|
14034
|
+
/* @__PURE__ */ jsx156(
|
|
14004
14035
|
Control,
|
|
14005
14036
|
{
|
|
14006
14037
|
triggerId: state.ids.triggerId,
|
|
@@ -14043,7 +14074,7 @@ function SelectInternal(props, ref) {
|
|
|
14043
14074
|
components
|
|
14044
14075
|
}
|
|
14045
14076
|
),
|
|
14046
|
-
/* @__PURE__ */
|
|
14077
|
+
/* @__PURE__ */ jsx156(
|
|
14047
14078
|
Fieldset,
|
|
14048
14079
|
{
|
|
14049
14080
|
isFocused: state.isFocused || state.isOpen,
|
|
@@ -14059,7 +14090,7 @@ function SelectInternal(props, ref) {
|
|
|
14059
14090
|
label,
|
|
14060
14091
|
tooltip,
|
|
14061
14092
|
onClick: state.handleContainerClick,
|
|
14062
|
-
labelClassName:
|
|
14093
|
+
labelClassName: hasLeadingIcon ? "pl-[28px]" : void 0,
|
|
14063
14094
|
className: fieldsetClassName
|
|
14064
14095
|
}
|
|
14065
14096
|
),
|
|
@@ -14076,7 +14107,7 @@ function SelectInternal(props, ref) {
|
|
|
14076
14107
|
className: dropdownClassName,
|
|
14077
14108
|
drawerClassName,
|
|
14078
14109
|
children: [
|
|
14079
|
-
state.inMenuSearchVisible && /* @__PURE__ */
|
|
14110
|
+
state.inMenuSearchVisible && /* @__PURE__ */ jsx156(
|
|
14080
14111
|
SelectSearchInput,
|
|
14081
14112
|
{
|
|
14082
14113
|
inputRef: state.mobileSearchInputRef,
|
|
@@ -14089,7 +14120,7 @@ function SelectInternal(props, ref) {
|
|
|
14089
14120
|
}
|
|
14090
14121
|
),
|
|
14091
14122
|
menuHeader,
|
|
14092
|
-
/* @__PURE__ */
|
|
14123
|
+
/* @__PURE__ */ jsx156(
|
|
14093
14124
|
MenuList,
|
|
14094
14125
|
{
|
|
14095
14126
|
id: state.ids.listboxId,
|
|
@@ -14117,7 +14148,7 @@ function SelectInternal(props, ref) {
|
|
|
14117
14148
|
formatGroupLabel
|
|
14118
14149
|
}
|
|
14119
14150
|
),
|
|
14120
|
-
state.canCreateNewOption && /* @__PURE__ */
|
|
14151
|
+
state.canCreateNewOption && /* @__PURE__ */ jsx156(
|
|
14121
14152
|
CreateOption,
|
|
14122
14153
|
{
|
|
14123
14154
|
inputValue: state.trimmedInput,
|
|
@@ -14132,7 +14163,7 @@ function SelectInternal(props, ref) {
|
|
|
14132
14163
|
}
|
|
14133
14164
|
);
|
|
14134
14165
|
}
|
|
14135
|
-
var Select =
|
|
14166
|
+
var Select = React50.forwardRef(SelectInternal);
|
|
14136
14167
|
|
|
14137
14168
|
// src/dashboard/phone-input/utils.ts
|
|
14138
14169
|
var PREFIX_REGEX = /^\+/;
|
|
@@ -14202,8 +14233,8 @@ function formatPhoneCodeOptionLabel(option) {
|
|
|
14202
14233
|
}
|
|
14203
14234
|
|
|
14204
14235
|
// src/dashboard/phone-input/PhoneInput.tsx
|
|
14205
|
-
import { jsx as
|
|
14206
|
-
var PhoneInput =
|
|
14236
|
+
import { jsx as jsx157, jsxs as jsxs100 } from "react/jsx-runtime";
|
|
14237
|
+
var PhoneInput = React51.forwardRef(
|
|
14207
14238
|
function PhoneInput2({
|
|
14208
14239
|
options,
|
|
14209
14240
|
value,
|
|
@@ -14236,10 +14267,10 @@ var PhoneInput = React50.forwardRef(
|
|
|
14236
14267
|
defaultNumber
|
|
14237
14268
|
}, ref) {
|
|
14238
14269
|
const { t } = useTranslation33();
|
|
14239
|
-
const groupLabelId =
|
|
14240
|
-
const errorMsgId =
|
|
14241
|
-
const numberInputRef =
|
|
14242
|
-
const [codeSearchValue, setCodeSearchValue] =
|
|
14270
|
+
const groupLabelId = React51.useId();
|
|
14271
|
+
const errorMsgId = React51.useId();
|
|
14272
|
+
const numberInputRef = React51.useRef(null);
|
|
14273
|
+
const [codeSearchValue, setCodeSearchValue] = React51.useState("");
|
|
14243
14274
|
const safeValue = toPhoneValue(value, defaultCode, defaultNumber);
|
|
14244
14275
|
const effectiveCode = safeValue.code || defaultCode || "";
|
|
14245
14276
|
const resolvedLabel = label ?? "";
|
|
@@ -14248,7 +14279,7 @@ var PhoneInput = React50.forwardRef(
|
|
|
14248
14279
|
const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
|
|
14249
14280
|
const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
|
|
14250
14281
|
const combinedValue = effectiveCode || safeValue.number ? `${effectiveCode}${safeValue.number}` : "";
|
|
14251
|
-
const codeOptions =
|
|
14282
|
+
const codeOptions = React51.useMemo(
|
|
14252
14283
|
() => options.map((option) => ({
|
|
14253
14284
|
value: option.value,
|
|
14254
14285
|
label: formatPhoneCodeOptionLabel(option),
|
|
@@ -14257,11 +14288,11 @@ var PhoneInput = React50.forwardRef(
|
|
|
14257
14288
|
})),
|
|
14258
14289
|
[options]
|
|
14259
14290
|
);
|
|
14260
|
-
const selectedCodeOption =
|
|
14291
|
+
const selectedCodeOption = React51.useMemo(
|
|
14261
14292
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
14262
14293
|
[codeOptions, effectiveCode]
|
|
14263
14294
|
);
|
|
14264
|
-
const parsePhoneValue =
|
|
14295
|
+
const parsePhoneValue = React51.useMemo(
|
|
14265
14296
|
() => parsePhoneValueWithOptions(options),
|
|
14266
14297
|
[options]
|
|
14267
14298
|
);
|
|
@@ -14290,17 +14321,17 @@ var PhoneInput = React50.forwardRef(
|
|
|
14290
14321
|
}
|
|
14291
14322
|
emitChange({ code: effectiveCode, number: cleanedNumber });
|
|
14292
14323
|
};
|
|
14293
|
-
const effectiveCodeRef =
|
|
14294
|
-
const numberValueRef =
|
|
14295
|
-
const codeSearchValueRef =
|
|
14296
|
-
const onChangeRef =
|
|
14297
|
-
const nameRef =
|
|
14324
|
+
const effectiveCodeRef = React51.useRef(effectiveCode);
|
|
14325
|
+
const numberValueRef = React51.useRef(safeValue.number);
|
|
14326
|
+
const codeSearchValueRef = React51.useRef(codeSearchValue);
|
|
14327
|
+
const onChangeRef = React51.useRef(onChange);
|
|
14328
|
+
const nameRef = React51.useRef(name);
|
|
14298
14329
|
effectiveCodeRef.current = effectiveCode;
|
|
14299
14330
|
numberValueRef.current = safeValue.number;
|
|
14300
14331
|
codeSearchValueRef.current = codeSearchValue;
|
|
14301
14332
|
onChangeRef.current = onChange;
|
|
14302
14333
|
nameRef.current = name;
|
|
14303
|
-
|
|
14334
|
+
React51.useImperativeHandle(
|
|
14304
14335
|
ref,
|
|
14305
14336
|
() => ({
|
|
14306
14337
|
getCodeSearchValue: () => codeSearchValueRef.current,
|
|
@@ -14327,8 +14358,8 @@ var PhoneInput = React50.forwardRef(
|
|
|
14327
14358
|
className
|
|
14328
14359
|
),
|
|
14329
14360
|
children: [
|
|
14330
|
-
name && /* @__PURE__ */
|
|
14331
|
-
codeName && /* @__PURE__ */
|
|
14361
|
+
name && /* @__PURE__ */ jsx157("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
14362
|
+
codeName && /* @__PURE__ */ jsx157(
|
|
14332
14363
|
"input",
|
|
14333
14364
|
{
|
|
14334
14365
|
type: "hidden",
|
|
@@ -14337,7 +14368,7 @@ var PhoneInput = React50.forwardRef(
|
|
|
14337
14368
|
disabled
|
|
14338
14369
|
}
|
|
14339
14370
|
),
|
|
14340
|
-
numberName && /* @__PURE__ */
|
|
14371
|
+
numberName && /* @__PURE__ */ jsx157(
|
|
14341
14372
|
"input",
|
|
14342
14373
|
{
|
|
14343
14374
|
type: "hidden",
|
|
@@ -14346,11 +14377,11 @@ var PhoneInput = React50.forwardRef(
|
|
|
14346
14377
|
disabled
|
|
14347
14378
|
}
|
|
14348
14379
|
),
|
|
14349
|
-
topLabel && /* @__PURE__ */
|
|
14380
|
+
topLabel && /* @__PURE__ */ jsx157(
|
|
14350
14381
|
"span",
|
|
14351
14382
|
{
|
|
14352
14383
|
id: groupLabelId,
|
|
14353
|
-
className: "mb-2 block text-[
|
|
14384
|
+
className: "mb-2 block text-[length:var(--field-top-label-font-size)] font-[var(--field-top-label-font-weight)] text-[var(--chekin-color-brand-navy)]",
|
|
14354
14385
|
children: topLabel
|
|
14355
14386
|
}
|
|
14356
14387
|
),
|
|
@@ -14361,7 +14392,7 @@ var PhoneInput = React50.forwardRef(
|
|
|
14361
14392
|
"aria-labelledby": topLabel ? groupLabelId : void 0,
|
|
14362
14393
|
className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2",
|
|
14363
14394
|
children: [
|
|
14364
|
-
/* @__PURE__ */
|
|
14395
|
+
/* @__PURE__ */ jsx157(
|
|
14365
14396
|
Select,
|
|
14366
14397
|
{
|
|
14367
14398
|
options: codeOptions,
|
|
@@ -14387,7 +14418,7 @@ var PhoneInput = React50.forwardRef(
|
|
|
14387
14418
|
onBlur: () => onFieldBlur?.("code")
|
|
14388
14419
|
}
|
|
14389
14420
|
),
|
|
14390
|
-
/* @__PURE__ */
|
|
14421
|
+
/* @__PURE__ */ jsx157(
|
|
14391
14422
|
Input,
|
|
14392
14423
|
{
|
|
14393
14424
|
ref: numberInputRef,
|
|
@@ -14423,8 +14454,8 @@ var PhoneInput = React50.forwardRef(
|
|
|
14423
14454
|
]
|
|
14424
14455
|
}
|
|
14425
14456
|
),
|
|
14426
|
-
!errorMessage && optional && /* @__PURE__ */
|
|
14427
|
-
errorMessage && /* @__PURE__ */
|
|
14457
|
+
!errorMessage && optional && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
14458
|
+
errorMessage && /* @__PURE__ */ jsx157(
|
|
14428
14459
|
FieldErrorMessage,
|
|
14429
14460
|
{
|
|
14430
14461
|
id: errorMsgId,
|
|
@@ -14441,41 +14472,41 @@ var PhoneInput = React50.forwardRef(
|
|
|
14441
14472
|
PhoneInput.displayName = "PhoneInput";
|
|
14442
14473
|
|
|
14443
14474
|
// src/dashboard/creatable-select/CreatableSelect.tsx
|
|
14444
|
-
import * as React51 from "react";
|
|
14445
|
-
import { jsx as jsx157 } from "react/jsx-runtime";
|
|
14446
|
-
var CreatableSelect = React51.forwardRef(function CreatableSelect2(props, ref) {
|
|
14447
|
-
return /* @__PURE__ */ jsx157(Select, { ref, ...props, isCreatable: true });
|
|
14448
|
-
});
|
|
14449
|
-
|
|
14450
|
-
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14451
14475
|
import * as React52 from "react";
|
|
14452
14476
|
import { jsx as jsx158 } from "react/jsx-runtime";
|
|
14453
|
-
var
|
|
14454
|
-
return /* @__PURE__ */ jsx158(Select, { ref, ...props,
|
|
14477
|
+
var CreatableSelect = React52.forwardRef(function CreatableSelect2(props, ref) {
|
|
14478
|
+
return /* @__PURE__ */ jsx158(Select, { ref, ...props, isCreatable: true });
|
|
14455
14479
|
});
|
|
14456
14480
|
|
|
14457
|
-
// src/dashboard/
|
|
14481
|
+
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14458
14482
|
import * as React53 from "react";
|
|
14459
14483
|
import { jsx as jsx159 } from "react/jsx-runtime";
|
|
14460
|
-
var
|
|
14461
|
-
return /* @__PURE__ */ jsx159(Select, { ref, ...props, isMulti: true
|
|
14484
|
+
var MultiSelect = React53.forwardRef(function MultiSelect2(props, ref) {
|
|
14485
|
+
return /* @__PURE__ */ jsx159(Select, { ref, ...props, isMulti: true });
|
|
14486
|
+
});
|
|
14487
|
+
|
|
14488
|
+
// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
|
|
14489
|
+
import * as React54 from "react";
|
|
14490
|
+
import { jsx as jsx160 } from "react/jsx-runtime";
|
|
14491
|
+
var CreatableMultiSelect = React54.forwardRef(function CreatableMultiSelect2(props, ref) {
|
|
14492
|
+
return /* @__PURE__ */ jsx160(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
14462
14493
|
});
|
|
14463
14494
|
|
|
14464
14495
|
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14465
|
-
import * as
|
|
14496
|
+
import * as React57 from "react";
|
|
14466
14497
|
|
|
14467
14498
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14468
|
-
import * as
|
|
14499
|
+
import * as React56 from "react";
|
|
14469
14500
|
import { useTranslation as useTranslation34 } from "react-i18next";
|
|
14470
14501
|
import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
|
|
14471
14502
|
|
|
14472
14503
|
// src/dashboard/infinite-scroll-select/InfiniteScrollContext.tsx
|
|
14473
|
-
import * as
|
|
14474
|
-
var InfiniteScrollContext =
|
|
14504
|
+
import * as React55 from "react";
|
|
14505
|
+
var InfiniteScrollContext = React55.createContext(
|
|
14475
14506
|
null
|
|
14476
14507
|
);
|
|
14477
14508
|
function useInfiniteScrollContext() {
|
|
14478
|
-
const ctx =
|
|
14509
|
+
const ctx = React55.useContext(InfiniteScrollContext);
|
|
14479
14510
|
if (!ctx) {
|
|
14480
14511
|
throw new Error(
|
|
14481
14512
|
"useInfiniteScrollContext must be used within an InfiniteScrollContext.Provider"
|
|
@@ -14485,7 +14516,7 @@ function useInfiniteScrollContext() {
|
|
|
14485
14516
|
}
|
|
14486
14517
|
|
|
14487
14518
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14488
|
-
import { jsx as
|
|
14519
|
+
import { jsx as jsx161, jsxs as jsxs101 } from "react/jsx-runtime";
|
|
14489
14520
|
function VirtualMenuList(props) {
|
|
14490
14521
|
const {
|
|
14491
14522
|
id,
|
|
@@ -14520,9 +14551,9 @@ function VirtualMenuList(props) {
|
|
|
14520
14551
|
} = useInfiniteScrollContext();
|
|
14521
14552
|
const Option = components?.Option ?? DefaultOption;
|
|
14522
14553
|
const { t } = useTranslation34();
|
|
14523
|
-
const scrollRef =
|
|
14524
|
-
const lastLoadMoreOptionsLengthRef =
|
|
14525
|
-
const previousHighlightedIndexRef =
|
|
14554
|
+
const scrollRef = React56.useRef(null);
|
|
14555
|
+
const lastLoadMoreOptionsLengthRef = React56.useRef(null);
|
|
14556
|
+
const previousHighlightedIndexRef = React56.useRef(-1);
|
|
14526
14557
|
const showLoaderRow = Boolean(canLoadMore || isLoadingMore);
|
|
14527
14558
|
const itemCount = options.length + (showLoaderRow ? 1 : 0);
|
|
14528
14559
|
const virtualizer = useVirtualizer2({
|
|
@@ -14535,7 +14566,7 @@ function VirtualMenuList(props) {
|
|
|
14535
14566
|
const totalSize = virtualizer.getTotalSize();
|
|
14536
14567
|
const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
|
|
14537
14568
|
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14538
|
-
|
|
14569
|
+
React56.useEffect(() => {
|
|
14539
14570
|
if (!canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14540
14571
|
if (virtualItems.length === 0) return;
|
|
14541
14572
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
@@ -14551,7 +14582,7 @@ function VirtualMenuList(props) {
|
|
|
14551
14582
|
loadMoreItems,
|
|
14552
14583
|
loadMoreThreshold
|
|
14553
14584
|
]);
|
|
14554
|
-
|
|
14585
|
+
React56.useEffect(() => {
|
|
14555
14586
|
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14556
14587
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14557
14588
|
if (highlightedIndex < 0 || !changed) return;
|
|
@@ -14561,8 +14592,8 @@ function VirtualMenuList(props) {
|
|
|
14561
14592
|
const lastOptionIndex = options.length - 1;
|
|
14562
14593
|
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14563
14594
|
const isOptionSelected2 = (option) => isOptionSelectedProp ? isOptionSelectedProp(option, selectedOptions) : selectedOptions.some((s) => s.value === option.value);
|
|
14564
|
-
const wasAtBottomRef =
|
|
14565
|
-
const handleScroll =
|
|
14595
|
+
const wasAtBottomRef = React56.useRef(false);
|
|
14596
|
+
const handleScroll = React56.useCallback(
|
|
14566
14597
|
(event) => {
|
|
14567
14598
|
if (!onMenuScrollToBottom) return;
|
|
14568
14599
|
const target = event.currentTarget;
|
|
@@ -14575,7 +14606,7 @@ function VirtualMenuList(props) {
|
|
|
14575
14606
|
[onMenuScrollToBottom]
|
|
14576
14607
|
);
|
|
14577
14608
|
if (options.length === 0) {
|
|
14578
|
-
return /* @__PURE__ */
|
|
14609
|
+
return /* @__PURE__ */ jsx161("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ jsxs101(
|
|
14579
14610
|
"div",
|
|
14580
14611
|
{
|
|
14581
14612
|
role: "status",
|
|
@@ -14583,8 +14614,8 @@ function VirtualMenuList(props) {
|
|
|
14583
14614
|
"aria-live": "polite",
|
|
14584
14615
|
className: "flex flex-col gap-2",
|
|
14585
14616
|
children: [
|
|
14586
|
-
/* @__PURE__ */
|
|
14587
|
-
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */
|
|
14617
|
+
/* @__PURE__ */ jsx161("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14618
|
+
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx161(
|
|
14588
14619
|
Skeleton,
|
|
14589
14620
|
{
|
|
14590
14621
|
className: "h-10 w-full rounded-md",
|
|
@@ -14594,16 +14625,16 @@ function VirtualMenuList(props) {
|
|
|
14594
14625
|
))
|
|
14595
14626
|
]
|
|
14596
14627
|
}
|
|
14597
|
-
) : /* @__PURE__ */
|
|
14628
|
+
) : /* @__PURE__ */ jsx161("div", { className: "flex min-h-[40px] items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]", children: emptyMessage }) });
|
|
14598
14629
|
}
|
|
14599
|
-
return /* @__PURE__ */
|
|
14630
|
+
return /* @__PURE__ */ jsx161("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: /* @__PURE__ */ jsx161(
|
|
14600
14631
|
"div",
|
|
14601
14632
|
{
|
|
14602
14633
|
ref: scrollRef,
|
|
14603
14634
|
className: cn("overflow-y-auto", menuClassName),
|
|
14604
14635
|
style: { height: `${measuredListHeight}px` },
|
|
14605
14636
|
onScroll: onMenuScrollToBottom ? handleScroll : void 0,
|
|
14606
|
-
children: /* @__PURE__ */
|
|
14637
|
+
children: /* @__PURE__ */ jsx161(
|
|
14607
14638
|
"div",
|
|
14608
14639
|
{
|
|
14609
14640
|
id,
|
|
@@ -14623,7 +14654,7 @@ function VirtualMenuList(props) {
|
|
|
14623
14654
|
disabled || option?.isDisabled || option && isOptionDisabled?.(option)
|
|
14624
14655
|
);
|
|
14625
14656
|
const isLastOption = !isLoaderRow && virtualItem.index === lastOptionIndex && !canLoadMore;
|
|
14626
|
-
return /* @__PURE__ */
|
|
14657
|
+
return /* @__PURE__ */ jsx161(
|
|
14627
14658
|
"div",
|
|
14628
14659
|
{
|
|
14629
14660
|
"data-index": virtualItem.index,
|
|
@@ -14640,8 +14671,8 @@ function VirtualMenuList(props) {
|
|
|
14640
14671
|
"aria-live": "polite",
|
|
14641
14672
|
className: "flex h-full items-center justify-center",
|
|
14642
14673
|
children: [
|
|
14643
|
-
/* @__PURE__ */
|
|
14644
|
-
/* @__PURE__ */
|
|
14674
|
+
/* @__PURE__ */ jsx161("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14675
|
+
/* @__PURE__ */ jsx161(
|
|
14645
14676
|
ThreeDotsLoader,
|
|
14646
14677
|
{
|
|
14647
14678
|
height: 24,
|
|
@@ -14651,7 +14682,7 @@ function VirtualMenuList(props) {
|
|
|
14651
14682
|
)
|
|
14652
14683
|
]
|
|
14653
14684
|
}
|
|
14654
|
-
) : option ? /* @__PURE__ */
|
|
14685
|
+
) : option ? /* @__PURE__ */ jsx161(
|
|
14655
14686
|
Option,
|
|
14656
14687
|
{
|
|
14657
14688
|
id: getOptionId2(virtualItem.index),
|
|
@@ -14681,7 +14712,7 @@ function VirtualMenuList(props) {
|
|
|
14681
14712
|
}
|
|
14682
14713
|
|
|
14683
14714
|
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14684
|
-
import { jsx as
|
|
14715
|
+
import { jsx as jsx162 } from "react/jsx-runtime";
|
|
14685
14716
|
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14686
14717
|
var DEFAULT_LIST_HEIGHT = 322;
|
|
14687
14718
|
var DEFAULT_OVERSCAN = 5;
|
|
@@ -14709,8 +14740,8 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14709
14740
|
const getFullSearchOption = isMulti ? void 0 : getFullSearchOptionProp;
|
|
14710
14741
|
const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
|
|
14711
14742
|
const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
|
|
14712
|
-
const [inputValue, setInputValue] =
|
|
14713
|
-
const filteredOptions =
|
|
14743
|
+
const [inputValue, setInputValue] = React57.useState("");
|
|
14744
|
+
const filteredOptions = React57.useMemo(() => {
|
|
14714
14745
|
const trimmed = inputValue.trim();
|
|
14715
14746
|
const valueLabel = (() => {
|
|
14716
14747
|
if (isMulti) return "";
|
|
@@ -14729,7 +14760,7 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14729
14760
|
}
|
|
14730
14761
|
return list;
|
|
14731
14762
|
}, [rawOptions, inputValue, filterOption, getFullSearchOption, isMulti, rest]);
|
|
14732
|
-
const contextValue =
|
|
14763
|
+
const contextValue = React57.useMemo(
|
|
14733
14764
|
() => ({
|
|
14734
14765
|
canLoadMore,
|
|
14735
14766
|
isLoadingMore,
|
|
@@ -14751,11 +14782,11 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14751
14782
|
loadMoreThreshold
|
|
14752
14783
|
]
|
|
14753
14784
|
);
|
|
14754
|
-
const components =
|
|
14785
|
+
const components = React57.useMemo(
|
|
14755
14786
|
() => ({ ...userComponents, MenuList: VirtualMenuList }),
|
|
14756
14787
|
[userComponents]
|
|
14757
14788
|
);
|
|
14758
|
-
const handleInputChange =
|
|
14789
|
+
const handleInputChange = React57.useCallback(
|
|
14759
14790
|
(value) => {
|
|
14760
14791
|
setInputValue(value);
|
|
14761
14792
|
onSearchChange?.(value);
|
|
@@ -14769,7 +14800,7 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14769
14800
|
components,
|
|
14770
14801
|
onInputChange: handleInputChange
|
|
14771
14802
|
};
|
|
14772
|
-
return /* @__PURE__ */
|
|
14803
|
+
return /* @__PURE__ */ jsx162(InfiniteScrollContext.Provider, { value: contextValue, children: isMulti ? /* @__PURE__ */ jsx162(
|
|
14773
14804
|
Select,
|
|
14774
14805
|
{
|
|
14775
14806
|
ref,
|
|
@@ -14777,7 +14808,7 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14777
14808
|
...selectExtras,
|
|
14778
14809
|
isMulti: true
|
|
14779
14810
|
}
|
|
14780
|
-
) : /* @__PURE__ */
|
|
14811
|
+
) : /* @__PURE__ */ jsx162(
|
|
14781
14812
|
Select,
|
|
14782
14813
|
{
|
|
14783
14814
|
ref,
|
|
@@ -14787,27 +14818,27 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
14787
14818
|
}
|
|
14788
14819
|
) });
|
|
14789
14820
|
}
|
|
14790
|
-
var InfiniteScrollSelect =
|
|
14821
|
+
var InfiniteScrollSelect = React57.forwardRef(
|
|
14791
14822
|
InfiniteScrollSelectInternal
|
|
14792
14823
|
);
|
|
14793
14824
|
|
|
14794
14825
|
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
14795
|
-
import * as
|
|
14796
|
-
import { jsx as
|
|
14797
|
-
var InfiniteScrollMultiSelect =
|
|
14826
|
+
import * as React58 from "react";
|
|
14827
|
+
import { jsx as jsx163 } from "react/jsx-runtime";
|
|
14828
|
+
var InfiniteScrollMultiSelect = React58.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
14798
14829
|
const Forwarded = InfiniteScrollSelect;
|
|
14799
|
-
return /* @__PURE__ */
|
|
14830
|
+
return /* @__PURE__ */ jsx163(Forwarded, { ...props, ref, isMulti: true });
|
|
14800
14831
|
});
|
|
14801
14832
|
|
|
14802
14833
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14803
|
-
import * as
|
|
14834
|
+
import * as React59 from "react";
|
|
14804
14835
|
import { useTranslation as useTranslation36 } from "react-i18next";
|
|
14805
14836
|
|
|
14806
14837
|
// src/dashboard/select-checkboxes/VisualCheckbox.tsx
|
|
14807
14838
|
import { Check as Check7 } from "lucide-react";
|
|
14808
|
-
import { jsx as
|
|
14839
|
+
import { jsx as jsx164 } from "react/jsx-runtime";
|
|
14809
14840
|
function VisualCheckbox({ checked, disabled, className }) {
|
|
14810
|
-
return /* @__PURE__ */
|
|
14841
|
+
return /* @__PURE__ */ jsx164(
|
|
14811
14842
|
"span",
|
|
14812
14843
|
{
|
|
14813
14844
|
"aria-hidden": "true",
|
|
@@ -14818,13 +14849,13 @@ function VisualCheckbox({ checked, disabled, className }) {
|
|
|
14818
14849
|
disabled && "opacity-50",
|
|
14819
14850
|
className
|
|
14820
14851
|
),
|
|
14821
|
-
children: checked && /* @__PURE__ */
|
|
14852
|
+
children: checked && /* @__PURE__ */ jsx164(Check7, { className: "checkbox__icon h-3 w-3" })
|
|
14822
14853
|
}
|
|
14823
14854
|
);
|
|
14824
14855
|
}
|
|
14825
14856
|
|
|
14826
14857
|
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
14827
|
-
import { jsx as
|
|
14858
|
+
import { jsx as jsx165, jsxs as jsxs102 } from "react/jsx-runtime";
|
|
14828
14859
|
function SelectCheckboxOption(props) {
|
|
14829
14860
|
const {
|
|
14830
14861
|
option,
|
|
@@ -14858,10 +14889,10 @@ function SelectCheckboxOption(props) {
|
|
|
14858
14889
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
14859
14890
|
),
|
|
14860
14891
|
children: [
|
|
14861
|
-
/* @__PURE__ */
|
|
14892
|
+
/* @__PURE__ */ jsx165(VisualCheckbox, { checked: isSelected, disabled: isDisabled }),
|
|
14862
14893
|
/* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
14863
|
-
/* @__PURE__ */
|
|
14864
|
-
option.description && /* @__PURE__ */
|
|
14894
|
+
/* @__PURE__ */ jsx165("span", { className: "block break-words", children: option.label }),
|
|
14895
|
+
option.description && /* @__PURE__ */ jsx165("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
14865
14896
|
] })
|
|
14866
14897
|
]
|
|
14867
14898
|
}
|
|
@@ -14871,7 +14902,7 @@ function SelectCheckboxOption(props) {
|
|
|
14871
14902
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
14872
14903
|
import { ChevronDown as ChevronDown3 } from "lucide-react";
|
|
14873
14904
|
import { useTranslation as useTranslation35 } from "react-i18next";
|
|
14874
|
-
import { jsx as
|
|
14905
|
+
import { jsx as jsx166, jsxs as jsxs103 } from "react/jsx-runtime";
|
|
14875
14906
|
function createCountTrigger(opts) {
|
|
14876
14907
|
const { getValueText, getTotalCount } = opts;
|
|
14877
14908
|
function CountTrigger(props) {
|
|
@@ -14924,9 +14955,9 @@ function createCountTrigger(opts) {
|
|
|
14924
14955
|
loading && "!cursor-progress"
|
|
14925
14956
|
),
|
|
14926
14957
|
children: [
|
|
14927
|
-
leftIcon && /* @__PURE__ */
|
|
14928
|
-
/* @__PURE__ */
|
|
14929
|
-
/* @__PURE__ */
|
|
14958
|
+
leftIcon && /* @__PURE__ */ jsx166("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__ */ jsx166("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
14959
|
+
/* @__PURE__ */ jsx166("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
14960
|
+
/* @__PURE__ */ jsx166("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx166(
|
|
14930
14961
|
ChevronDown3,
|
|
14931
14962
|
{
|
|
14932
14963
|
size: 16,
|
|
@@ -14944,7 +14975,7 @@ function createCountTrigger(opts) {
|
|
|
14944
14975
|
}
|
|
14945
14976
|
|
|
14946
14977
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
14947
|
-
import { jsx as
|
|
14978
|
+
import { jsx as jsx167, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
14948
14979
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
14949
14980
|
return /* @__PURE__ */ jsxs104(
|
|
14950
14981
|
"button",
|
|
@@ -14957,21 +14988,21 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
14957
14988
|
disabled && "cursor-default opacity-40"
|
|
14958
14989
|
),
|
|
14959
14990
|
children: [
|
|
14960
|
-
/* @__PURE__ */
|
|
14961
|
-
/* @__PURE__ */
|
|
14991
|
+
/* @__PURE__ */ jsx167(VisualCheckbox, { checked, disabled }),
|
|
14992
|
+
/* @__PURE__ */ jsx167("span", { className: "flex-1", children: label })
|
|
14962
14993
|
]
|
|
14963
14994
|
}
|
|
14964
14995
|
);
|
|
14965
14996
|
}
|
|
14966
14997
|
|
|
14967
14998
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
14968
|
-
import { Fragment as Fragment16, jsx as
|
|
14999
|
+
import { Fragment as Fragment16, jsx as jsx168 } from "react/jsx-runtime";
|
|
14969
15000
|
function hasPaginationProps(props) {
|
|
14970
15001
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
|
|
14971
15002
|
}
|
|
14972
15003
|
function makeTriggerSlot(render) {
|
|
14973
15004
|
function CustomTrigger(props) {
|
|
14974
|
-
return /* @__PURE__ */
|
|
15005
|
+
return /* @__PURE__ */ jsx168(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
|
|
14975
15006
|
}
|
|
14976
15007
|
return CustomTrigger;
|
|
14977
15008
|
}
|
|
@@ -14997,25 +15028,25 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
14997
15028
|
const isPaginated = hasPaginationProps(
|
|
14998
15029
|
paginationAndRest
|
|
14999
15030
|
);
|
|
15000
|
-
const [inputValue, setInputValue] =
|
|
15031
|
+
const [inputValue, setInputValue] = React59.useState("");
|
|
15001
15032
|
const isControlled = value !== void 0;
|
|
15002
|
-
const [internalValue, setInternalValue] =
|
|
15033
|
+
const [internalValue, setInternalValue] = React59.useState(
|
|
15003
15034
|
() => defaultValue ?? []
|
|
15004
15035
|
);
|
|
15005
15036
|
const currentValue = isControlled ? value : internalValue;
|
|
15006
|
-
const selected =
|
|
15007
|
-
const handleChange =
|
|
15037
|
+
const selected = React59.useMemo(() => currentValue ?? [], [currentValue]);
|
|
15038
|
+
const handleChange = React59.useCallback(
|
|
15008
15039
|
(next, meta) => {
|
|
15009
15040
|
if (!isControlled) setInternalValue(next);
|
|
15010
15041
|
onChange?.(next, meta);
|
|
15011
15042
|
},
|
|
15012
15043
|
[isControlled, onChange]
|
|
15013
15044
|
);
|
|
15014
|
-
const flatRawOptions =
|
|
15045
|
+
const flatRawOptions = React59.useMemo(
|
|
15015
15046
|
() => flattenGroupedOptions(rawOptions),
|
|
15016
15047
|
[rawOptions]
|
|
15017
15048
|
);
|
|
15018
|
-
const filteredGrouped =
|
|
15049
|
+
const filteredGrouped = React59.useMemo(() => {
|
|
15019
15050
|
const trimmed = inputValue.trim();
|
|
15020
15051
|
if (!trimmed) return rawOptions;
|
|
15021
15052
|
return rawOptions.map((item) => {
|
|
@@ -15026,7 +15057,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15026
15057
|
return filterOption(item, trimmed) ? item : null;
|
|
15027
15058
|
}).filter((item) => item !== null);
|
|
15028
15059
|
}, [rawOptions, inputValue, filterOption]);
|
|
15029
|
-
const filteredFlat =
|
|
15060
|
+
const filteredFlat = React59.useMemo(
|
|
15030
15061
|
() => flattenGroupedOptions(filteredGrouped),
|
|
15031
15062
|
[filteredGrouped]
|
|
15032
15063
|
);
|
|
@@ -15034,7 +15065,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15034
15065
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
15035
15066
|
}, 0);
|
|
15036
15067
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
15037
|
-
const handleToggleAll =
|
|
15068
|
+
const handleToggleAll = React59.useCallback(() => {
|
|
15038
15069
|
if (allVisibleSelected) {
|
|
15039
15070
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
15040
15071
|
handleChange(
|
|
@@ -15049,18 +15080,18 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15049
15080
|
}
|
|
15050
15081
|
handleChange(merged, { action: "select" });
|
|
15051
15082
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
15052
|
-
const valueTextRef =
|
|
15053
|
-
const totalCountRef =
|
|
15083
|
+
const valueTextRef = React59.useRef(valueText);
|
|
15084
|
+
const totalCountRef = React59.useRef(flatRawOptions.length);
|
|
15054
15085
|
valueTextRef.current = valueText;
|
|
15055
15086
|
totalCountRef.current = flatRawOptions.length;
|
|
15056
|
-
const Control =
|
|
15087
|
+
const Control = React59.useMemo(() => {
|
|
15057
15088
|
if (trigger) return makeTriggerSlot(trigger);
|
|
15058
15089
|
return createCountTrigger({
|
|
15059
15090
|
getValueText: () => valueTextRef.current,
|
|
15060
15091
|
getTotalCount: () => totalCountRef.current
|
|
15061
15092
|
});
|
|
15062
15093
|
}, [trigger]);
|
|
15063
|
-
const components =
|
|
15094
|
+
const components = React59.useMemo(
|
|
15064
15095
|
() => ({
|
|
15065
15096
|
...userComponents,
|
|
15066
15097
|
Control,
|
|
@@ -15068,7 +15099,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15068
15099
|
}),
|
|
15069
15100
|
[userComponents, Control]
|
|
15070
15101
|
);
|
|
15071
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */
|
|
15102
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ jsx168(
|
|
15072
15103
|
SelectAllRow,
|
|
15073
15104
|
{
|
|
15074
15105
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -15076,7 +15107,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15076
15107
|
onToggle: handleToggleAll
|
|
15077
15108
|
}
|
|
15078
15109
|
) : void 0;
|
|
15079
|
-
const handleInputChange =
|
|
15110
|
+
const handleInputChange = React59.useCallback(
|
|
15080
15111
|
(next) => {
|
|
15081
15112
|
setInputValue(next);
|
|
15082
15113
|
onSearchChange?.(next);
|
|
@@ -15097,7 +15128,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15097
15128
|
isMulti: true
|
|
15098
15129
|
};
|
|
15099
15130
|
if (isPaginated) {
|
|
15100
|
-
return /* @__PURE__ */
|
|
15131
|
+
return /* @__PURE__ */ jsx168(
|
|
15101
15132
|
InfiniteScrollSelect,
|
|
15102
15133
|
{
|
|
15103
15134
|
ref,
|
|
@@ -15108,7 +15139,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15108
15139
|
}
|
|
15109
15140
|
);
|
|
15110
15141
|
}
|
|
15111
|
-
return /* @__PURE__ */
|
|
15142
|
+
return /* @__PURE__ */ jsx168(
|
|
15112
15143
|
Select,
|
|
15113
15144
|
{
|
|
15114
15145
|
ref,
|
|
@@ -15119,16 +15150,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15119
15150
|
}
|
|
15120
15151
|
);
|
|
15121
15152
|
}
|
|
15122
|
-
var SelectCheckboxes =
|
|
15153
|
+
var SelectCheckboxes = React59.forwardRef(
|
|
15123
15154
|
SelectCheckboxesInternal
|
|
15124
15155
|
);
|
|
15125
15156
|
|
|
15126
15157
|
// src/dashboard/textarea/Textarea.tsx
|
|
15127
|
-
import * as
|
|
15158
|
+
import * as React61 from "react";
|
|
15128
15159
|
import { useTranslation as useTranslation37 } from "react-i18next";
|
|
15129
15160
|
|
|
15130
15161
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15131
|
-
import * as
|
|
15162
|
+
import * as React60 from "react";
|
|
15132
15163
|
var isEmptyValue2 = (value) => {
|
|
15133
15164
|
if (value === void 0 || value === null) return true;
|
|
15134
15165
|
return String(value).length === 0;
|
|
@@ -15147,12 +15178,12 @@ function useTextareaValueState({
|
|
|
15147
15178
|
value,
|
|
15148
15179
|
defaultValue
|
|
15149
15180
|
}) {
|
|
15150
|
-
const textareaRef =
|
|
15181
|
+
const textareaRef = React60.useRef(null);
|
|
15151
15182
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15152
15183
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15153
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15184
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React60.useState(propsAreEmpty);
|
|
15154
15185
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15155
|
-
const setNativeValue =
|
|
15186
|
+
const setNativeValue = React60.useCallback(
|
|
15156
15187
|
(nextValue) => {
|
|
15157
15188
|
if (isControlled) return;
|
|
15158
15189
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15162,14 +15193,14 @@ function useTextareaValueState({
|
|
|
15162
15193
|
},
|
|
15163
15194
|
[isControlled]
|
|
15164
15195
|
);
|
|
15165
|
-
const syncValueState =
|
|
15196
|
+
const syncValueState = React60.useCallback(() => {
|
|
15166
15197
|
if (!textareaRef.current) return;
|
|
15167
15198
|
setNativeValue(textareaRef.current.value);
|
|
15168
15199
|
}, [setNativeValue]);
|
|
15169
|
-
|
|
15200
|
+
React60.useLayoutEffect(() => {
|
|
15170
15201
|
syncValueState();
|
|
15171
15202
|
});
|
|
15172
|
-
|
|
15203
|
+
React60.useEffect(() => {
|
|
15173
15204
|
const textarea = textareaRef.current;
|
|
15174
15205
|
const form = textarea?.form;
|
|
15175
15206
|
if (isControlled || !form) return;
|
|
@@ -15193,10 +15224,10 @@ function useTextareaValueState({
|
|
|
15193
15224
|
}
|
|
15194
15225
|
|
|
15195
15226
|
// src/dashboard/textarea/Textarea.tsx
|
|
15196
|
-
import { jsx as
|
|
15227
|
+
import { jsx as jsx169, jsxs as jsxs105 } from "react/jsx-runtime";
|
|
15197
15228
|
var LINE_HEIGHT = 20;
|
|
15198
15229
|
var VERTICAL_PADDING = 32;
|
|
15199
|
-
var Textarea =
|
|
15230
|
+
var Textarea = React61.forwardRef(function Textarea2({
|
|
15200
15231
|
className,
|
|
15201
15232
|
textareaClassName,
|
|
15202
15233
|
label,
|
|
@@ -15224,12 +15255,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15224
15255
|
}, ref) {
|
|
15225
15256
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15226
15257
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15227
|
-
const reactId =
|
|
15258
|
+
const reactId = React61.useId();
|
|
15228
15259
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15229
15260
|
const { t } = useTranslation37();
|
|
15230
15261
|
const isInvalid = Boolean(invalid || error);
|
|
15231
15262
|
const isBlocked = Boolean(disabled);
|
|
15232
|
-
const resize =
|
|
15263
|
+
const resize = React61.useCallback(() => {
|
|
15233
15264
|
const el = textareaRef.current;
|
|
15234
15265
|
if (!el || !autosize) return;
|
|
15235
15266
|
el.style.height = "auto";
|
|
@@ -15239,7 +15270,7 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15239
15270
|
el.style.height = `${nextHeight}px`;
|
|
15240
15271
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15241
15272
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15242
|
-
|
|
15273
|
+
React61.useLayoutEffect(() => {
|
|
15243
15274
|
resize();
|
|
15244
15275
|
}, [resize, value]);
|
|
15245
15276
|
const handleInput = (event) => {
|
|
@@ -15276,14 +15307,14 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15276
15307
|
"label",
|
|
15277
15308
|
{
|
|
15278
15309
|
htmlFor: textareaId,
|
|
15279
|
-
className: "mb-2 flex select-none items-center text-[
|
|
15310
|
+
className: "mb-2 flex select-none items-center text-[length:var(--field-label-font-size)] font-[var(--field-label-font-weight)] text-[var(--chekin-color-brand-navy)]",
|
|
15280
15311
|
children: [
|
|
15281
15312
|
label,
|
|
15282
|
-
tooltip && /* @__PURE__ */
|
|
15313
|
+
tooltip && /* @__PURE__ */ jsx169("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx169(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15283
15314
|
]
|
|
15284
15315
|
}
|
|
15285
15316
|
),
|
|
15286
|
-
/* @__PURE__ */
|
|
15317
|
+
/* @__PURE__ */ jsx169(
|
|
15287
15318
|
"textarea",
|
|
15288
15319
|
{
|
|
15289
15320
|
ref: combinedRef,
|
|
@@ -15302,10 +15333,10 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15302
15333
|
onBlur: handleBlur,
|
|
15303
15334
|
className: cn(
|
|
15304
15335
|
"m-0 box-border block w-full resize-none rounded-[6px] border bg-white px-4 py-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100 ease-in-out",
|
|
15305
|
-
"border-[var(--
|
|
15306
|
-
!isBlocked && "focus:border-[var(--
|
|
15307
|
-
isEmpty && "border-[var(--
|
|
15308
|
-
isInvalid && "border-[var(--
|
|
15336
|
+
"border-[var(--field-border)] placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)]",
|
|
15337
|
+
!isBlocked && "focus:border-[var(--field-border-focused)]",
|
|
15338
|
+
isEmpty && "border-[var(--field-border)] bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]",
|
|
15339
|
+
isInvalid && "border-[var(--field-border-invalid)] focus:border-[var(--field-border-invalid)]",
|
|
15309
15340
|
(readOnly || isBlocked) && "cursor-default",
|
|
15310
15341
|
isBlocked && "cursor-not-allowed",
|
|
15311
15342
|
loading && "cursor-progress",
|
|
@@ -15315,7 +15346,7 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15315
15346
|
...textareaProps
|
|
15316
15347
|
}
|
|
15317
15348
|
),
|
|
15318
|
-
error && /* @__PURE__ */
|
|
15349
|
+
error && /* @__PURE__ */ jsx169(
|
|
15319
15350
|
FieldErrorMessage,
|
|
15320
15351
|
{
|
|
15321
15352
|
id: `${textareaId}-error`,
|
|
@@ -15323,20 +15354,20 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15323
15354
|
className: "mt-[1px] text-[14px]"
|
|
15324
15355
|
}
|
|
15325
15356
|
),
|
|
15326
|
-
!error && optional && /* @__PURE__ */
|
|
15327
|
-
!error && helperText && /* @__PURE__ */
|
|
15357
|
+
!error && optional && /* @__PURE__ */ jsx169("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
15358
|
+
!error && helperText && /* @__PURE__ */ jsx169("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15328
15359
|
]
|
|
15329
15360
|
}
|
|
15330
15361
|
);
|
|
15331
15362
|
});
|
|
15332
15363
|
|
|
15333
15364
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15334
|
-
import * as
|
|
15365
|
+
import * as React63 from "react";
|
|
15335
15366
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
15336
15367
|
import { useTranslation as useTranslation38 } from "react-i18next";
|
|
15337
15368
|
|
|
15338
15369
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15339
|
-
import * as
|
|
15370
|
+
import * as React62 from "react";
|
|
15340
15371
|
|
|
15341
15372
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15342
15373
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15487,21 +15518,21 @@ function useDatePickerWheel({
|
|
|
15487
15518
|
minDate,
|
|
15488
15519
|
maxDate
|
|
15489
15520
|
}) {
|
|
15490
|
-
const years =
|
|
15491
|
-
const [draftDate, setDraftDate] =
|
|
15521
|
+
const years = React62.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15522
|
+
const [draftDate, setDraftDate] = React62.useState(
|
|
15492
15523
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15493
15524
|
);
|
|
15494
15525
|
const draftYear = draftDate.getFullYear();
|
|
15495
15526
|
const draftMonth = draftDate.getMonth();
|
|
15496
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15497
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15498
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15499
|
-
const monthListRef =
|
|
15500
|
-
const dayListRef =
|
|
15501
|
-
const yearListRef =
|
|
15502
|
-
const settleTimeoutsRef =
|
|
15503
|
-
const animationFramesRef =
|
|
15504
|
-
const columnRefs =
|
|
15527
|
+
const [monthScrollTop, setMonthScrollTop] = React62.useState(0);
|
|
15528
|
+
const [dayScrollTop, setDayScrollTop] = React62.useState(0);
|
|
15529
|
+
const [yearScrollTop, setYearScrollTop] = React62.useState(0);
|
|
15530
|
+
const monthListRef = React62.useRef(null);
|
|
15531
|
+
const dayListRef = React62.useRef(null);
|
|
15532
|
+
const yearListRef = React62.useRef(null);
|
|
15533
|
+
const settleTimeoutsRef = React62.useRef({});
|
|
15534
|
+
const animationFramesRef = React62.useRef({});
|
|
15535
|
+
const columnRefs = React62.useMemo(
|
|
15505
15536
|
() => ({
|
|
15506
15537
|
month: monthListRef,
|
|
15507
15538
|
day: dayListRef,
|
|
@@ -15509,7 +15540,7 @@ function useDatePickerWheel({
|
|
|
15509
15540
|
}),
|
|
15510
15541
|
[]
|
|
15511
15542
|
);
|
|
15512
|
-
const setColumnScrollTop =
|
|
15543
|
+
const setColumnScrollTop = React62.useCallback(
|
|
15513
15544
|
(column, nextScrollTop) => {
|
|
15514
15545
|
if (column === "month") {
|
|
15515
15546
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15523,19 +15554,19 @@ function useDatePickerWheel({
|
|
|
15523
15554
|
},
|
|
15524
15555
|
[]
|
|
15525
15556
|
);
|
|
15526
|
-
const clearSettleTimeout =
|
|
15557
|
+
const clearSettleTimeout = React62.useCallback((column) => {
|
|
15527
15558
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15528
15559
|
if (timeoutId === void 0) return;
|
|
15529
15560
|
window.clearTimeout(timeoutId);
|
|
15530
15561
|
delete settleTimeoutsRef.current[column];
|
|
15531
15562
|
}, []);
|
|
15532
|
-
const clearAnimationFrame =
|
|
15563
|
+
const clearAnimationFrame = React62.useCallback((column) => {
|
|
15533
15564
|
const frameId = animationFramesRef.current[column];
|
|
15534
15565
|
if (frameId === void 0) return;
|
|
15535
15566
|
window.cancelAnimationFrame(frameId);
|
|
15536
15567
|
delete animationFramesRef.current[column];
|
|
15537
15568
|
}, []);
|
|
15538
|
-
|
|
15569
|
+
React62.useEffect(
|
|
15539
15570
|
() => () => {
|
|
15540
15571
|
["month", "day", "year"].forEach((column) => {
|
|
15541
15572
|
clearSettleTimeout(column);
|
|
@@ -15544,22 +15575,22 @@ function useDatePickerWheel({
|
|
|
15544
15575
|
},
|
|
15545
15576
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15546
15577
|
);
|
|
15547
|
-
|
|
15578
|
+
React62.useEffect(() => {
|
|
15548
15579
|
if (isOpen) return;
|
|
15549
15580
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15550
15581
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15551
|
-
const months =
|
|
15582
|
+
const months = React62.useMemo(
|
|
15552
15583
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15553
15584
|
[draftYear, maxDate, minDate]
|
|
15554
15585
|
);
|
|
15555
|
-
const days =
|
|
15586
|
+
const days = React62.useMemo(
|
|
15556
15587
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15557
15588
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15558
15589
|
);
|
|
15559
15590
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15560
15591
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15561
15592
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15562
|
-
const syncScrollPositions =
|
|
15593
|
+
const syncScrollPositions = React62.useCallback(
|
|
15563
15594
|
(nextDate, behavior = "auto") => {
|
|
15564
15595
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15565
15596
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15583,7 +15614,7 @@ function useDatePickerWheel({
|
|
|
15583
15614
|
},
|
|
15584
15615
|
[maxDate, minDate, years]
|
|
15585
15616
|
);
|
|
15586
|
-
|
|
15617
|
+
React62.useLayoutEffect(() => {
|
|
15587
15618
|
if (!isOpen) return;
|
|
15588
15619
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15589
15620
|
setDraftDate(nextDate);
|
|
@@ -15594,7 +15625,7 @@ function useDatePickerWheel({
|
|
|
15594
15625
|
window.cancelAnimationFrame(frameId);
|
|
15595
15626
|
};
|
|
15596
15627
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15597
|
-
const updateDraftDate =
|
|
15628
|
+
const updateDraftDate = React62.useCallback(
|
|
15598
15629
|
(column, targetIndex, behavior = "smooth") => {
|
|
15599
15630
|
const currentDate = stripTime(draftDate);
|
|
15600
15631
|
const currentYear = currentDate.getFullYear();
|
|
@@ -15639,7 +15670,7 @@ function useDatePickerWheel({
|
|
|
15639
15670
|
},
|
|
15640
15671
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
15641
15672
|
);
|
|
15642
|
-
const settleColumnScroll =
|
|
15673
|
+
const settleColumnScroll = React62.useCallback(
|
|
15643
15674
|
(column) => {
|
|
15644
15675
|
const list = columnRefs[column].current;
|
|
15645
15676
|
if (!list) return;
|
|
@@ -15652,7 +15683,7 @@ function useDatePickerWheel({
|
|
|
15652
15683
|
},
|
|
15653
15684
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
15654
15685
|
);
|
|
15655
|
-
const scheduleScrollSettle =
|
|
15686
|
+
const scheduleScrollSettle = React62.useCallback(
|
|
15656
15687
|
(column) => {
|
|
15657
15688
|
clearSettleTimeout(column);
|
|
15658
15689
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -15661,7 +15692,7 @@ function useDatePickerWheel({
|
|
|
15661
15692
|
},
|
|
15662
15693
|
[clearSettleTimeout, settleColumnScroll]
|
|
15663
15694
|
);
|
|
15664
|
-
const handleColumnScroll =
|
|
15695
|
+
const handleColumnScroll = React62.useCallback(
|
|
15665
15696
|
(column) => {
|
|
15666
15697
|
const list = columnRefs[column].current;
|
|
15667
15698
|
if (!list) return;
|
|
@@ -15675,13 +15706,13 @@ function useDatePickerWheel({
|
|
|
15675
15706
|
},
|
|
15676
15707
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
15677
15708
|
);
|
|
15678
|
-
const handleOptionSelect =
|
|
15709
|
+
const handleOptionSelect = React62.useCallback(
|
|
15679
15710
|
(column, targetIndex) => {
|
|
15680
15711
|
updateDraftDate(column, targetIndex, "smooth");
|
|
15681
15712
|
},
|
|
15682
15713
|
[updateDraftDate]
|
|
15683
15714
|
);
|
|
15684
|
-
const focusAdjacentColumn =
|
|
15715
|
+
const focusAdjacentColumn = React62.useCallback(
|
|
15685
15716
|
(column, direction) => {
|
|
15686
15717
|
const order = ["month", "day", "year"];
|
|
15687
15718
|
const currentIndex = order.indexOf(column);
|
|
@@ -15691,7 +15722,7 @@ function useDatePickerWheel({
|
|
|
15691
15722
|
},
|
|
15692
15723
|
[columnRefs]
|
|
15693
15724
|
);
|
|
15694
|
-
const handleColumnKeyDown =
|
|
15725
|
+
const handleColumnKeyDown = React62.useCallback(
|
|
15695
15726
|
(column, event) => {
|
|
15696
15727
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
15697
15728
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -15757,7 +15788,7 @@ function useDatePickerWheel({
|
|
|
15757
15788
|
}
|
|
15758
15789
|
|
|
15759
15790
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
15760
|
-
import { jsx as
|
|
15791
|
+
import { jsx as jsx170, jsxs as jsxs106 } from "react/jsx-runtime";
|
|
15761
15792
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
15762
15793
|
function AirbnbDatePickerWheelColumn({
|
|
15763
15794
|
id,
|
|
@@ -15771,7 +15802,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15771
15802
|
onOptionSelect,
|
|
15772
15803
|
column
|
|
15773
15804
|
}) {
|
|
15774
|
-
return /* @__PURE__ */
|
|
15805
|
+
return /* @__PURE__ */ jsx170("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs106(
|
|
15775
15806
|
"div",
|
|
15776
15807
|
{
|
|
15777
15808
|
id,
|
|
@@ -15788,14 +15819,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15788
15819
|
WebkitOverflowScrolling: "touch"
|
|
15789
15820
|
},
|
|
15790
15821
|
children: [
|
|
15791
|
-
/* @__PURE__ */
|
|
15822
|
+
/* @__PURE__ */ jsx170("div", { style: { height: `${spacerHeight}px` } }),
|
|
15792
15823
|
items.map((item, index) => {
|
|
15793
15824
|
const { style } = getWheelOptionStyles(
|
|
15794
15825
|
index,
|
|
15795
15826
|
scrollTop,
|
|
15796
15827
|
DATE_PICKER_OPTION_HEIGHT
|
|
15797
15828
|
);
|
|
15798
|
-
return /* @__PURE__ */
|
|
15829
|
+
return /* @__PURE__ */ jsx170(
|
|
15799
15830
|
"button",
|
|
15800
15831
|
{
|
|
15801
15832
|
id: `${id}-option-${index}`,
|
|
@@ -15811,14 +15842,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
15811
15842
|
`${column}-${item}-${index}`
|
|
15812
15843
|
);
|
|
15813
15844
|
}),
|
|
15814
|
-
/* @__PURE__ */
|
|
15845
|
+
/* @__PURE__ */ jsx170("div", { style: { height: `${spacerHeight}px` } })
|
|
15815
15846
|
]
|
|
15816
15847
|
}
|
|
15817
15848
|
) });
|
|
15818
15849
|
}
|
|
15819
15850
|
|
|
15820
15851
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
15821
|
-
import { jsx as
|
|
15852
|
+
import { jsx as jsx171, jsxs as jsxs107 } from "react/jsx-runtime";
|
|
15822
15853
|
function AirbnbDatePickerBody({
|
|
15823
15854
|
baseId,
|
|
15824
15855
|
label,
|
|
@@ -15842,9 +15873,9 @@ function AirbnbDatePickerBody({
|
|
|
15842
15873
|
}) {
|
|
15843
15874
|
return /* @__PURE__ */ jsxs107("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
|
|
15844
15875
|
/* @__PURE__ */ jsxs107("div", { className: "relative overflow-hidden rounded-[24px]", children: [
|
|
15845
|
-
/* @__PURE__ */
|
|
15846
|
-
/* @__PURE__ */
|
|
15847
|
-
/* @__PURE__ */
|
|
15876
|
+
/* @__PURE__ */ jsx171("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" }),
|
|
15877
|
+
/* @__PURE__ */ jsx171("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" }),
|
|
15878
|
+
/* @__PURE__ */ jsx171(
|
|
15848
15879
|
"div",
|
|
15849
15880
|
{
|
|
15850
15881
|
"aria-hidden": true,
|
|
@@ -15852,7 +15883,7 @@ function AirbnbDatePickerBody({
|
|
|
15852
15883
|
}
|
|
15853
15884
|
),
|
|
15854
15885
|
/* @__PURE__ */ jsxs107("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
|
|
15855
|
-
/* @__PURE__ */
|
|
15886
|
+
/* @__PURE__ */ jsx171(
|
|
15856
15887
|
AirbnbDatePickerWheelColumn,
|
|
15857
15888
|
{
|
|
15858
15889
|
id: `${baseId}-month`,
|
|
@@ -15867,7 +15898,7 @@ function AirbnbDatePickerBody({
|
|
|
15867
15898
|
onOptionSelect
|
|
15868
15899
|
}
|
|
15869
15900
|
),
|
|
15870
|
-
/* @__PURE__ */
|
|
15901
|
+
/* @__PURE__ */ jsx171(
|
|
15871
15902
|
AirbnbDatePickerWheelColumn,
|
|
15872
15903
|
{
|
|
15873
15904
|
id: `${baseId}-day`,
|
|
@@ -15882,7 +15913,7 @@ function AirbnbDatePickerBody({
|
|
|
15882
15913
|
onOptionSelect
|
|
15883
15914
|
}
|
|
15884
15915
|
),
|
|
15885
|
-
/* @__PURE__ */
|
|
15916
|
+
/* @__PURE__ */ jsx171(
|
|
15886
15917
|
AirbnbDatePickerWheelColumn,
|
|
15887
15918
|
{
|
|
15888
15919
|
id: `${baseId}-year`,
|
|
@@ -15899,7 +15930,7 @@ function AirbnbDatePickerBody({
|
|
|
15899
15930
|
)
|
|
15900
15931
|
] })
|
|
15901
15932
|
] }),
|
|
15902
|
-
/* @__PURE__ */
|
|
15933
|
+
/* @__PURE__ */ jsx171(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
15903
15934
|
] });
|
|
15904
15935
|
}
|
|
15905
15936
|
function AirbnbDatePickerContent({
|
|
@@ -15927,7 +15958,7 @@ function AirbnbDatePickerContent({
|
|
|
15927
15958
|
onColumnKeyDown,
|
|
15928
15959
|
onOptionSelect
|
|
15929
15960
|
}) {
|
|
15930
|
-
const body = /* @__PURE__ */
|
|
15961
|
+
const body = /* @__PURE__ */ jsx171(
|
|
15931
15962
|
AirbnbDatePickerBody,
|
|
15932
15963
|
{
|
|
15933
15964
|
baseId,
|
|
@@ -15952,27 +15983,27 @@ function AirbnbDatePickerContent({
|
|
|
15952
15983
|
}
|
|
15953
15984
|
);
|
|
15954
15985
|
if (isMobile3) {
|
|
15955
|
-
return /* @__PURE__ */
|
|
15986
|
+
return /* @__PURE__ */ jsx171(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15956
15987
|
DrawerContent,
|
|
15957
15988
|
{
|
|
15958
15989
|
onClose: () => onOpenChange(false),
|
|
15959
15990
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
15960
15991
|
children: [
|
|
15961
|
-
/* @__PURE__ */
|
|
15962
|
-
/* @__PURE__ */
|
|
15992
|
+
/* @__PURE__ */ jsx171(DrawerTitle, { className: "sr-only", children: title }),
|
|
15993
|
+
/* @__PURE__ */ jsx171(DrawerDescription, { className: "sr-only", children: label }),
|
|
15963
15994
|
body
|
|
15964
15995
|
]
|
|
15965
15996
|
}
|
|
15966
15997
|
) });
|
|
15967
15998
|
}
|
|
15968
|
-
return /* @__PURE__ */
|
|
15999
|
+
return /* @__PURE__ */ jsx171(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
|
|
15969
16000
|
DialogContent,
|
|
15970
16001
|
{
|
|
15971
16002
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
15972
16003
|
showCloseButton: false,
|
|
15973
16004
|
children: [
|
|
15974
|
-
/* @__PURE__ */
|
|
15975
|
-
/* @__PURE__ */
|
|
16005
|
+
/* @__PURE__ */ jsx171(DialogTitle, { className: "sr-only", children: title }),
|
|
16006
|
+
/* @__PURE__ */ jsx171(DialogDescription, { className: "sr-only", children: label }),
|
|
15976
16007
|
body
|
|
15977
16008
|
]
|
|
15978
16009
|
}
|
|
@@ -15980,7 +16011,7 @@ function AirbnbDatePickerContent({
|
|
|
15980
16011
|
}
|
|
15981
16012
|
|
|
15982
16013
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15983
|
-
import { jsx as
|
|
16014
|
+
import { jsx as jsx172, jsxs as jsxs108 } from "react/jsx-runtime";
|
|
15984
16015
|
var MONTHS_IN_YEAR2 = 12;
|
|
15985
16016
|
function getMonthLabels2(locale) {
|
|
15986
16017
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -16013,7 +16044,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
16013
16044
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
16014
16045
|
return new Date(yearNum, monthIndex, dayNum);
|
|
16015
16046
|
}
|
|
16016
|
-
var Datepicker =
|
|
16047
|
+
var Datepicker = React63.forwardRef(
|
|
16017
16048
|
function Datepicker2({
|
|
16018
16049
|
label,
|
|
16019
16050
|
value,
|
|
@@ -16046,14 +16077,14 @@ var Datepicker = React62.forwardRef(
|
|
|
16046
16077
|
maxDate,
|
|
16047
16078
|
formatValue
|
|
16048
16079
|
}, ref) {
|
|
16049
|
-
const containerRef =
|
|
16050
|
-
const dayInputRef =
|
|
16051
|
-
const monthInputRef =
|
|
16052
|
-
const monthListRef =
|
|
16053
|
-
const yearInputRef =
|
|
16054
|
-
const mobileTriggerRef =
|
|
16055
|
-
const wheelBaseId =
|
|
16056
|
-
const reactId =
|
|
16080
|
+
const containerRef = React63.useRef(null);
|
|
16081
|
+
const dayInputRef = React63.useRef(null);
|
|
16082
|
+
const monthInputRef = React63.useRef(null);
|
|
16083
|
+
const monthListRef = React63.useRef(null);
|
|
16084
|
+
const yearInputRef = React63.useRef(null);
|
|
16085
|
+
const mobileTriggerRef = React63.useRef(null);
|
|
16086
|
+
const wheelBaseId = React63.useId();
|
|
16087
|
+
const reactId = React63.useId();
|
|
16057
16088
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
16058
16089
|
const dayId = `${baseId}-day`;
|
|
16059
16090
|
const monthId = `${baseId}-month`;
|
|
@@ -16062,38 +16093,38 @@ var Datepicker = React62.forwardRef(
|
|
|
16062
16093
|
const errorId = `${baseId}-error`;
|
|
16063
16094
|
const { t, i18n } = useTranslation38();
|
|
16064
16095
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
16065
|
-
const resolvedMonthLabels =
|
|
16096
|
+
const resolvedMonthLabels = React63.useMemo(
|
|
16066
16097
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
16067
16098
|
[resolvedLocale, monthLabels]
|
|
16068
16099
|
);
|
|
16069
16100
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
16070
16101
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
16071
16102
|
const isControlled = value !== void 0;
|
|
16072
|
-
const initialParts =
|
|
16103
|
+
const initialParts = React63.useMemo(
|
|
16073
16104
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
16074
16105
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16075
16106
|
[]
|
|
16076
16107
|
);
|
|
16077
|
-
const [day, setDay] =
|
|
16078
|
-
const [monthIndex, setMonthIndex] =
|
|
16108
|
+
const [day, setDay] = React63.useState(initialParts.day);
|
|
16109
|
+
const [monthIndex, setMonthIndex] = React63.useState(
|
|
16079
16110
|
initialParts.monthIndex
|
|
16080
16111
|
);
|
|
16081
|
-
const [year, setYear] =
|
|
16082
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
16083
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
16084
|
-
const [focusedField, setFocusedField] =
|
|
16085
|
-
const [monthInputValue, setMonthInputValue] =
|
|
16086
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
16112
|
+
const [year, setYear] = React63.useState(initialParts.year);
|
|
16113
|
+
const [isMonthOpen, setIsMonthOpen] = React63.useState(false);
|
|
16114
|
+
const [isWheelOpen, setIsWheelOpen] = React63.useState(false);
|
|
16115
|
+
const [focusedField, setFocusedField] = React63.useState(null);
|
|
16116
|
+
const [monthInputValue, setMonthInputValue] = React63.useState("");
|
|
16117
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React63.useState(-1);
|
|
16087
16118
|
const isMobile3 = useIsMobile();
|
|
16088
|
-
const emitChangeRef =
|
|
16119
|
+
const emitChangeRef = React63.useRef(() => {
|
|
16089
16120
|
});
|
|
16090
|
-
const dayStateRef =
|
|
16091
|
-
const yearStateRef =
|
|
16092
|
-
const monthIndexRef =
|
|
16121
|
+
const dayStateRef = React63.useRef(day);
|
|
16122
|
+
const yearStateRef = React63.useRef(year);
|
|
16123
|
+
const monthIndexRef = React63.useRef(monthIndex);
|
|
16093
16124
|
dayStateRef.current = day;
|
|
16094
16125
|
yearStateRef.current = year;
|
|
16095
16126
|
monthIndexRef.current = monthIndex;
|
|
16096
|
-
|
|
16127
|
+
React63.useImperativeHandle(
|
|
16097
16128
|
ref,
|
|
16098
16129
|
() => ({
|
|
16099
16130
|
getDayValue: () => dayStateRef.current,
|
|
@@ -16111,27 +16142,27 @@ var Datepicker = React62.forwardRef(
|
|
|
16111
16142
|
}),
|
|
16112
16143
|
[]
|
|
16113
16144
|
);
|
|
16114
|
-
|
|
16145
|
+
React63.useEffect(() => {
|
|
16115
16146
|
if (!isControlled) return;
|
|
16116
16147
|
const next = partsFromDate(value ?? null);
|
|
16117
16148
|
setDay(next.day);
|
|
16118
16149
|
setMonthIndex(next.monthIndex);
|
|
16119
16150
|
setYear(next.year);
|
|
16120
16151
|
}, [isControlled, value]);
|
|
16121
|
-
|
|
16152
|
+
React63.useEffect(() => {
|
|
16122
16153
|
if (focusedField === "month") return;
|
|
16123
16154
|
setMonthInputValue(
|
|
16124
16155
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16125
16156
|
);
|
|
16126
16157
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16127
|
-
const filteredMonths =
|
|
16158
|
+
const filteredMonths = React63.useMemo(() => {
|
|
16128
16159
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16129
16160
|
const query = monthInputValue.trim().toLowerCase();
|
|
16130
16161
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16131
16162
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16132
16163
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16133
16164
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16134
|
-
|
|
16165
|
+
React63.useEffect(() => {
|
|
16135
16166
|
if (!isMonthOpen) {
|
|
16136
16167
|
setMonthHighlightIndex(-1);
|
|
16137
16168
|
return;
|
|
@@ -16152,7 +16183,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16152
16183
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16153
16184
|
const isInvalid = Boolean(invalid || error);
|
|
16154
16185
|
const wrapperWidth = toCssSize(width);
|
|
16155
|
-
const currentDate =
|
|
16186
|
+
const currentDate = React63.useMemo(
|
|
16156
16187
|
() => dateFromParts(day, monthIndex, year),
|
|
16157
16188
|
[day, monthIndex, year]
|
|
16158
16189
|
);
|
|
@@ -16161,7 +16192,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16161
16192
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16162
16193
|
isDisabled: !isMonthOpen || isMobile3
|
|
16163
16194
|
});
|
|
16164
|
-
const emitChange =
|
|
16195
|
+
const emitChange = React63.useCallback(
|
|
16165
16196
|
(nextDay, nextMonth, nextYear) => {
|
|
16166
16197
|
if (!onChange) return;
|
|
16167
16198
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16197,7 +16228,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16197
16228
|
setIsMonthOpen(true);
|
|
16198
16229
|
setMonthHighlightIndex(0);
|
|
16199
16230
|
};
|
|
16200
|
-
const commitMonthInput =
|
|
16231
|
+
const commitMonthInput = React63.useCallback(() => {
|
|
16201
16232
|
const query = monthInputValue.trim().toLowerCase();
|
|
16202
16233
|
if (!query) {
|
|
16203
16234
|
if (monthIndex !== null) {
|
|
@@ -16257,15 +16288,15 @@ var Datepicker = React62.forwardRef(
|
|
|
16257
16288
|
setIsMonthOpen(false);
|
|
16258
16289
|
}
|
|
16259
16290
|
};
|
|
16260
|
-
const focusDayInput =
|
|
16291
|
+
const focusDayInput = React63.useCallback(() => {
|
|
16261
16292
|
if (isBlocked || readOnly) return;
|
|
16262
16293
|
dayInputRef.current?.focus();
|
|
16263
16294
|
}, [isBlocked, readOnly]);
|
|
16264
|
-
const openWheel =
|
|
16295
|
+
const openWheel = React63.useCallback(() => {
|
|
16265
16296
|
if (isBlocked || readOnly) return;
|
|
16266
16297
|
setIsWheelOpen(true);
|
|
16267
16298
|
}, [isBlocked, readOnly]);
|
|
16268
|
-
const closeWheel =
|
|
16299
|
+
const closeWheel = React63.useCallback(() => {
|
|
16269
16300
|
setIsWheelOpen(false);
|
|
16270
16301
|
mobileTriggerRef.current?.focus();
|
|
16271
16302
|
}, []);
|
|
@@ -16277,7 +16308,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16277
16308
|
minDate,
|
|
16278
16309
|
maxDate
|
|
16279
16310
|
});
|
|
16280
|
-
const handleWheelDone =
|
|
16311
|
+
const handleWheelDone = React63.useCallback(() => {
|
|
16281
16312
|
const next = wheel.draftDate;
|
|
16282
16313
|
setDay(String(next.getDate()));
|
|
16283
16314
|
setMonthIndex(next.getMonth());
|
|
@@ -16286,14 +16317,14 @@ var Datepicker = React62.forwardRef(
|
|
|
16286
16317
|
setIsWheelOpen(false);
|
|
16287
16318
|
mobileTriggerRef.current?.focus();
|
|
16288
16319
|
}, [name, onChange, wheel.draftDate]);
|
|
16289
|
-
const defaultFormatValue =
|
|
16320
|
+
const defaultFormatValue = React63.useCallback(
|
|
16290
16321
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16291
16322
|
[resolvedMonthLabels]
|
|
16292
16323
|
);
|
|
16293
16324
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16294
16325
|
const monthListboxId = `${monthId}-listbox`;
|
|
16295
16326
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16296
|
-
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */
|
|
16327
|
+
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ jsx172("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ jsx172(
|
|
16297
16328
|
"ul",
|
|
16298
16329
|
{
|
|
16299
16330
|
ref: monthListRef,
|
|
@@ -16304,7 +16335,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16304
16335
|
children: filteredMonths.map((option, position) => {
|
|
16305
16336
|
const isSelected = option.index === monthIndex;
|
|
16306
16337
|
const isHighlighted = position === monthHighlightIndex;
|
|
16307
|
-
return /* @__PURE__ */
|
|
16338
|
+
return /* @__PURE__ */ jsx172("li", { role: "presentation", children: /* @__PURE__ */ jsx172(
|
|
16308
16339
|
"button",
|
|
16309
16340
|
{
|
|
16310
16341
|
id: getMonthOptionId(option.index),
|
|
@@ -16331,7 +16362,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16331
16362
|
isBlocked && "cursor-not-allowed",
|
|
16332
16363
|
loading && "cursor-progress"
|
|
16333
16364
|
);
|
|
16334
|
-
return /* @__PURE__ */
|
|
16365
|
+
return /* @__PURE__ */ jsx172(
|
|
16335
16366
|
"div",
|
|
16336
16367
|
{
|
|
16337
16368
|
ref: containerRef,
|
|
@@ -16364,8 +16395,8 @@ var Datepicker = React62.forwardRef(
|
|
|
16364
16395
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16365
16396
|
),
|
|
16366
16397
|
children: [
|
|
16367
|
-
/* @__PURE__ */
|
|
16368
|
-
/* @__PURE__ */
|
|
16398
|
+
/* @__PURE__ */ jsx172("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
16399
|
+
/* @__PURE__ */ jsx172("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx172(
|
|
16369
16400
|
ChevronDown4,
|
|
16370
16401
|
{
|
|
16371
16402
|
size: 16,
|
|
@@ -16384,7 +16415,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16384
16415
|
"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)]"
|
|
16385
16416
|
),
|
|
16386
16417
|
children: [
|
|
16387
|
-
/* @__PURE__ */
|
|
16418
|
+
/* @__PURE__ */ jsx172("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx172(
|
|
16388
16419
|
"input",
|
|
16389
16420
|
{
|
|
16390
16421
|
ref: dayInputRef,
|
|
@@ -16414,7 +16445,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16414
16445
|
}
|
|
16415
16446
|
) }),
|
|
16416
16447
|
/* @__PURE__ */ jsxs108("div", { className: "relative flex h-full min-w-0 items-center gap-1 px-2 before:absolute before:inset-y-3 before:left-0 before:w-px before:bg-[var(--chekin-color-gray-3)] before:content-[''] after:absolute after:inset-y-3 after:right-0 after:w-px after:bg-[var(--chekin-color-gray-3)] after:content-[''] sm:px-3", children: [
|
|
16417
|
-
/* @__PURE__ */
|
|
16448
|
+
/* @__PURE__ */ jsx172(
|
|
16418
16449
|
"input",
|
|
16419
16450
|
{
|
|
16420
16451
|
ref: monthInputRef,
|
|
@@ -16460,7 +16491,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16460
16491
|
)
|
|
16461
16492
|
}
|
|
16462
16493
|
),
|
|
16463
|
-
/* @__PURE__ */
|
|
16494
|
+
/* @__PURE__ */ jsx172(
|
|
16464
16495
|
ChevronDown4,
|
|
16465
16496
|
{
|
|
16466
16497
|
size: 14,
|
|
@@ -16477,7 +16508,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16477
16508
|
}
|
|
16478
16509
|
)
|
|
16479
16510
|
] }),
|
|
16480
|
-
/* @__PURE__ */
|
|
16511
|
+
/* @__PURE__ */ jsx172("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx172(
|
|
16481
16512
|
"input",
|
|
16482
16513
|
{
|
|
16483
16514
|
ref: yearInputRef,
|
|
@@ -16509,7 +16540,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16509
16540
|
]
|
|
16510
16541
|
}
|
|
16511
16542
|
),
|
|
16512
|
-
showCoverage && /* @__PURE__ */
|
|
16543
|
+
showCoverage && /* @__PURE__ */ jsx172(
|
|
16513
16544
|
"div",
|
|
16514
16545
|
{
|
|
16515
16546
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16517,7 +16548,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16517
16548
|
"aria-hidden": "true"
|
|
16518
16549
|
}
|
|
16519
16550
|
),
|
|
16520
|
-
/* @__PURE__ */
|
|
16551
|
+
/* @__PURE__ */ jsx172(
|
|
16521
16552
|
Fieldset,
|
|
16522
16553
|
{
|
|
16523
16554
|
isFocused,
|
|
@@ -16535,9 +16566,9 @@ var Datepicker = React62.forwardRef(
|
|
|
16535
16566
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16536
16567
|
}
|
|
16537
16568
|
),
|
|
16538
|
-
isMonthOpen && !isMobile3 && /* @__PURE__ */
|
|
16569
|
+
isMonthOpen && !isMobile3 && /* @__PURE__ */ jsx172("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 })
|
|
16539
16570
|
] }),
|
|
16540
|
-
isMobile3 && /* @__PURE__ */
|
|
16571
|
+
isMobile3 && /* @__PURE__ */ jsx172(
|
|
16541
16572
|
AirbnbDatePickerContent,
|
|
16542
16573
|
{
|
|
16543
16574
|
baseId: wheelBaseId,
|
|
@@ -16565,9 +16596,9 @@ var Datepicker = React62.forwardRef(
|
|
|
16565
16596
|
onOptionSelect: wheel.handleOptionSelect
|
|
16566
16597
|
}
|
|
16567
16598
|
),
|
|
16568
|
-
!error && optional && /* @__PURE__ */
|
|
16569
|
-
!error && helperText && /* @__PURE__ */
|
|
16570
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
16599
|
+
!error && optional && /* @__PURE__ */ jsx172("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
16600
|
+
!error && helperText && /* @__PURE__ */ jsx172("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16601
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx172(
|
|
16571
16602
|
FieldErrorMessage,
|
|
16572
16603
|
{
|
|
16573
16604
|
id: errorId,
|
|
@@ -16582,7 +16613,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16582
16613
|
);
|
|
16583
16614
|
|
|
16584
16615
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16585
|
-
import * as
|
|
16616
|
+
import * as React67 from "react";
|
|
16586
16617
|
import { useTranslation as useTranslation39 } from "react-i18next";
|
|
16587
16618
|
|
|
16588
16619
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -16661,7 +16692,7 @@ var createDisabledMatchers = ({
|
|
|
16661
16692
|
};
|
|
16662
16693
|
|
|
16663
16694
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16664
|
-
import * as
|
|
16695
|
+
import * as React64 from "react";
|
|
16665
16696
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
16666
16697
|
function useRangeValue({
|
|
16667
16698
|
value: externalValue,
|
|
@@ -16670,10 +16701,10 @@ function useRangeValue({
|
|
|
16670
16701
|
name
|
|
16671
16702
|
}) {
|
|
16672
16703
|
const isControlled = externalValue !== void 0;
|
|
16673
|
-
const [draft, setDraft] =
|
|
16704
|
+
const [draft, setDraft] = React64.useState(
|
|
16674
16705
|
isControlled ? externalValue : defaultValue
|
|
16675
16706
|
);
|
|
16676
|
-
const lastExternalKeyRef =
|
|
16707
|
+
const lastExternalKeyRef = React64.useRef(getRangeKey(externalValue));
|
|
16677
16708
|
if (isControlled) {
|
|
16678
16709
|
const externalKey = getRangeKey(externalValue);
|
|
16679
16710
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -16681,7 +16712,7 @@ function useRangeValue({
|
|
|
16681
16712
|
setDraft(externalValue);
|
|
16682
16713
|
}
|
|
16683
16714
|
}
|
|
16684
|
-
const commit =
|
|
16715
|
+
const commit = React64.useCallback(
|
|
16685
16716
|
(next) => {
|
|
16686
16717
|
setDraft(next);
|
|
16687
16718
|
if (next === void 0) {
|
|
@@ -16696,7 +16727,7 @@ function useRangeValue({
|
|
|
16696
16727
|
}
|
|
16697
16728
|
|
|
16698
16729
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16699
|
-
import * as
|
|
16730
|
+
import * as React65 from "react";
|
|
16700
16731
|
|
|
16701
16732
|
// src/dashboard/date-range-picker/utils/inputFormat.ts
|
|
16702
16733
|
function parseDateInputFormat(format2) {
|
|
@@ -16786,18 +16817,18 @@ function useRangeTextInputs({
|
|
|
16786
16817
|
onFromComplete,
|
|
16787
16818
|
onToComplete
|
|
16788
16819
|
}) {
|
|
16789
|
-
const tokens =
|
|
16820
|
+
const tokens = React65.useMemo(
|
|
16790
16821
|
() => parseDateInputFormat(displayFormat),
|
|
16791
16822
|
[displayFormat]
|
|
16792
16823
|
);
|
|
16793
|
-
const maxDigits =
|
|
16794
|
-
const [fromText, setFromText] =
|
|
16795
|
-
const [toText, setToText] =
|
|
16796
|
-
|
|
16824
|
+
const maxDigits = React65.useMemo(() => getMaxDigits(tokens), [tokens]);
|
|
16825
|
+
const [fromText, setFromText] = React65.useState(value?.from ? format2(value.from) : "");
|
|
16826
|
+
const [toText, setToText] = React65.useState(value?.to ? format2(value.to) : "");
|
|
16827
|
+
React65.useEffect(() => {
|
|
16797
16828
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16798
16829
|
setToText(value?.to ? format2(value.to) : "");
|
|
16799
16830
|
}, [format2, value?.from, value?.to]);
|
|
16800
|
-
const handleFromChange =
|
|
16831
|
+
const handleFromChange = React65.useCallback(
|
|
16801
16832
|
(raw) => {
|
|
16802
16833
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16803
16834
|
const wasComplete = countDigits(fromText) === maxDigits;
|
|
@@ -16809,7 +16840,7 @@ function useRangeTextInputs({
|
|
|
16809
16840
|
},
|
|
16810
16841
|
[fromText, maxDigits, onFromComplete, parse3, tokens]
|
|
16811
16842
|
);
|
|
16812
|
-
const handleToChange =
|
|
16843
|
+
const handleToChange = React65.useCallback(
|
|
16813
16844
|
(raw) => {
|
|
16814
16845
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
16815
16846
|
const wasComplete = countDigits(toText) === maxDigits;
|
|
@@ -16821,7 +16852,7 @@ function useRangeTextInputs({
|
|
|
16821
16852
|
},
|
|
16822
16853
|
[maxDigits, onToComplete, parse3, toText, tokens]
|
|
16823
16854
|
);
|
|
16824
|
-
const handleFromBlur =
|
|
16855
|
+
const handleFromBlur = React65.useCallback(() => {
|
|
16825
16856
|
if (!fromText) {
|
|
16826
16857
|
const next = { from: void 0, to: value?.to };
|
|
16827
16858
|
onCommit(next);
|
|
@@ -16838,7 +16869,7 @@ function useRangeTextInputs({
|
|
|
16838
16869
|
setFromText(value?.from ? format2(value.from) : "");
|
|
16839
16870
|
return void 0;
|
|
16840
16871
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
16841
|
-
const handleToBlur =
|
|
16872
|
+
const handleToBlur = React65.useCallback(() => {
|
|
16842
16873
|
if (!toText) {
|
|
16843
16874
|
const next = { from: value?.from, to: void 0 };
|
|
16844
16875
|
onCommit(next);
|
|
@@ -16867,21 +16898,21 @@ function useRangeTextInputs({
|
|
|
16867
16898
|
}
|
|
16868
16899
|
|
|
16869
16900
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16870
|
-
import * as
|
|
16901
|
+
import * as React66 from "react";
|
|
16871
16902
|
function useRangeMonthSync(value) {
|
|
16872
|
-
const isPreloadedRef =
|
|
16873
|
-
const [month, setMonth] =
|
|
16874
|
-
|
|
16903
|
+
const isPreloadedRef = React66.useRef(false);
|
|
16904
|
+
const [month, setMonth] = React66.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16905
|
+
React66.useEffect(() => {
|
|
16875
16906
|
if (value?.from && !isPreloadedRef.current) {
|
|
16876
16907
|
setMonth(value.from);
|
|
16877
16908
|
isPreloadedRef.current = true;
|
|
16878
16909
|
}
|
|
16879
16910
|
}, [value?.from]);
|
|
16880
|
-
const syncMonthToValue =
|
|
16911
|
+
const syncMonthToValue = React66.useCallback((next) => {
|
|
16881
16912
|
isPreloadedRef.current = true;
|
|
16882
16913
|
if (next?.from) setMonth(next.from);
|
|
16883
16914
|
}, []);
|
|
16884
|
-
const resetPreload =
|
|
16915
|
+
const resetPreload = React66.useCallback(() => {
|
|
16885
16916
|
isPreloadedRef.current = false;
|
|
16886
16917
|
}, []);
|
|
16887
16918
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -16907,7 +16938,7 @@ function resolveRangeSelection({
|
|
|
16907
16938
|
|
|
16908
16939
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
16909
16940
|
import { CalendarDays, SquareX as SquareX4 } from "lucide-react";
|
|
16910
|
-
import { jsx as
|
|
16941
|
+
import { jsx as jsx173, jsxs as jsxs109 } from "react/jsx-runtime";
|
|
16911
16942
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
16912
16943
|
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)]";
|
|
16913
16944
|
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";
|
|
@@ -16958,7 +16989,7 @@ function DateRangeInputs({
|
|
|
16958
16989
|
),
|
|
16959
16990
|
onClick: onRowClick,
|
|
16960
16991
|
children: [
|
|
16961
|
-
/* @__PURE__ */
|
|
16992
|
+
/* @__PURE__ */ jsx173(
|
|
16962
16993
|
"input",
|
|
16963
16994
|
{
|
|
16964
16995
|
ref: fromInputRef,
|
|
@@ -16983,7 +17014,7 @@ function DateRangeInputs({
|
|
|
16983
17014
|
)
|
|
16984
17015
|
}
|
|
16985
17016
|
),
|
|
16986
|
-
/* @__PURE__ */
|
|
17017
|
+
/* @__PURE__ */ jsx173(
|
|
16987
17018
|
"span",
|
|
16988
17019
|
{
|
|
16989
17020
|
"aria-hidden": "true",
|
|
@@ -16994,7 +17025,7 @@ function DateRangeInputs({
|
|
|
16994
17025
|
children: "\u2192"
|
|
16995
17026
|
}
|
|
16996
17027
|
),
|
|
16997
|
-
/* @__PURE__ */
|
|
17028
|
+
/* @__PURE__ */ jsx173(
|
|
16998
17029
|
"input",
|
|
16999
17030
|
{
|
|
17000
17031
|
ref: toInputRef,
|
|
@@ -17020,7 +17051,7 @@ function DateRangeInputs({
|
|
|
17020
17051
|
}
|
|
17021
17052
|
),
|
|
17022
17053
|
/* @__PURE__ */ jsxs109("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
17023
|
-
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */
|
|
17054
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx173(
|
|
17024
17055
|
"button",
|
|
17025
17056
|
{
|
|
17026
17057
|
type: "button",
|
|
@@ -17028,10 +17059,10 @@ function DateRangeInputs({
|
|
|
17028
17059
|
onClick: onReset,
|
|
17029
17060
|
className: iconButtonClass,
|
|
17030
17061
|
"aria-label": clearLabel,
|
|
17031
|
-
children: /* @__PURE__ */
|
|
17062
|
+
children: /* @__PURE__ */ jsx173(SquareX4, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17032
17063
|
}
|
|
17033
17064
|
),
|
|
17034
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */
|
|
17065
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx173(
|
|
17035
17066
|
"button",
|
|
17036
17067
|
{
|
|
17037
17068
|
type: "button",
|
|
@@ -17043,7 +17074,7 @@ function DateRangeInputs({
|
|
|
17043
17074
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
17044
17075
|
),
|
|
17045
17076
|
"aria-label": openCalendarLabel,
|
|
17046
|
-
children: /* @__PURE__ */
|
|
17077
|
+
children: /* @__PURE__ */ jsx173(CalendarDays, { size: 18 })
|
|
17047
17078
|
}
|
|
17048
17079
|
)
|
|
17049
17080
|
] })
|
|
@@ -17053,7 +17084,7 @@ function DateRangeInputs({
|
|
|
17053
17084
|
}
|
|
17054
17085
|
|
|
17055
17086
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
17056
|
-
import { jsx as
|
|
17087
|
+
import { jsx as jsx174 } from "react/jsx-runtime";
|
|
17057
17088
|
function DateRangeCalendar({
|
|
17058
17089
|
value,
|
|
17059
17090
|
month,
|
|
@@ -17069,7 +17100,7 @@ function DateRangeCalendar({
|
|
|
17069
17100
|
components,
|
|
17070
17101
|
...dayPickerProps
|
|
17071
17102
|
}) {
|
|
17072
|
-
return /* @__PURE__ */
|
|
17103
|
+
return /* @__PURE__ */ jsx174(
|
|
17073
17104
|
Calendar,
|
|
17074
17105
|
{
|
|
17075
17106
|
mode: "range",
|
|
@@ -17092,7 +17123,7 @@ function DateRangeCalendar({
|
|
|
17092
17123
|
}
|
|
17093
17124
|
|
|
17094
17125
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
17095
|
-
import { jsx as
|
|
17126
|
+
import { jsx as jsx175, jsxs as jsxs110 } from "react/jsx-runtime";
|
|
17096
17127
|
function DateRangePopover({
|
|
17097
17128
|
isOpen,
|
|
17098
17129
|
isMobile: isMobile3,
|
|
@@ -17104,7 +17135,7 @@ function DateRangePopover({
|
|
|
17104
17135
|
}) {
|
|
17105
17136
|
if (!isOpen) return null;
|
|
17106
17137
|
if (isMobile3) {
|
|
17107
|
-
return /* @__PURE__ */
|
|
17138
|
+
return /* @__PURE__ */ jsx175(
|
|
17108
17139
|
Drawer,
|
|
17109
17140
|
{
|
|
17110
17141
|
open: isOpen,
|
|
@@ -17118,16 +17149,16 @@ function DateRangePopover({
|
|
|
17118
17149
|
lockScroll: false,
|
|
17119
17150
|
className: "max-h-[calc(100vh-1rem)]",
|
|
17120
17151
|
children: [
|
|
17121
|
-
/* @__PURE__ */
|
|
17122
|
-
/* @__PURE__ */
|
|
17123
|
-
/* @__PURE__ */
|
|
17152
|
+
/* @__PURE__ */ jsx175(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
17153
|
+
/* @__PURE__ */ jsx175(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
17154
|
+
/* @__PURE__ */ jsx175("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
17124
17155
|
]
|
|
17125
17156
|
}
|
|
17126
17157
|
)
|
|
17127
17158
|
}
|
|
17128
17159
|
);
|
|
17129
17160
|
}
|
|
17130
|
-
return /* @__PURE__ */
|
|
17161
|
+
return /* @__PURE__ */ jsx175(
|
|
17131
17162
|
"div",
|
|
17132
17163
|
{
|
|
17133
17164
|
className: cn(
|
|
@@ -17140,8 +17171,8 @@ function DateRangePopover({
|
|
|
17140
17171
|
}
|
|
17141
17172
|
|
|
17142
17173
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17143
|
-
import { jsx as
|
|
17144
|
-
var DateRangePicker =
|
|
17174
|
+
import { jsx as jsx176, jsxs as jsxs111 } from "react/jsx-runtime";
|
|
17175
|
+
var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
17145
17176
|
label,
|
|
17146
17177
|
value: externalValue,
|
|
17147
17178
|
defaultValue,
|
|
@@ -17176,20 +17207,20 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17176
17207
|
components: customComponents,
|
|
17177
17208
|
...dayPickerProps
|
|
17178
17209
|
}, ref) {
|
|
17179
|
-
const containerRef =
|
|
17180
|
-
const fromInputRef =
|
|
17181
|
-
const toInputRef =
|
|
17182
|
-
const reactId =
|
|
17210
|
+
const containerRef = React67.useRef(null);
|
|
17211
|
+
const fromInputRef = React67.useRef(null);
|
|
17212
|
+
const toInputRef = React67.useRef(null);
|
|
17213
|
+
const reactId = React67.useId();
|
|
17183
17214
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17184
17215
|
const fromId = `${baseId}-from`;
|
|
17185
17216
|
const toId = `${baseId}-to`;
|
|
17186
17217
|
const labelId = `${baseId}-label`;
|
|
17187
17218
|
const errorId = `${baseId}-error`;
|
|
17188
|
-
const normalizedValue =
|
|
17219
|
+
const normalizedValue = React67.useMemo(() => {
|
|
17189
17220
|
if (externalValue === void 0) return void 0;
|
|
17190
17221
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17191
17222
|
}, [externalValue]);
|
|
17192
|
-
const normalizedDefaultValue =
|
|
17223
|
+
const normalizedDefaultValue = React67.useMemo(() => {
|
|
17193
17224
|
if (defaultValue === void 0) return void 0;
|
|
17194
17225
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17195
17226
|
}, [defaultValue]);
|
|
@@ -17199,16 +17230,16 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17199
17230
|
onChange,
|
|
17200
17231
|
name
|
|
17201
17232
|
});
|
|
17202
|
-
const normalizedMinDate =
|
|
17203
|
-
const normalizedMaxDate =
|
|
17204
|
-
const formatter =
|
|
17205
|
-
const parser =
|
|
17206
|
-
const closeCalendarRef =
|
|
17233
|
+
const normalizedMinDate = React67.useMemo(() => toDate(minDate), [minDate]);
|
|
17234
|
+
const normalizedMaxDate = React67.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17235
|
+
const formatter = React67.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17236
|
+
const parser = React67.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17237
|
+
const closeCalendarRef = React67.useRef(() => {
|
|
17207
17238
|
});
|
|
17208
|
-
const handleFromComplete =
|
|
17239
|
+
const handleFromComplete = React67.useCallback(() => {
|
|
17209
17240
|
toInputRef.current?.focus();
|
|
17210
17241
|
}, []);
|
|
17211
|
-
const handleToComplete =
|
|
17242
|
+
const handleToComplete = React67.useCallback(() => {
|
|
17212
17243
|
toInputRef.current?.blur();
|
|
17213
17244
|
closeCalendarRef.current();
|
|
17214
17245
|
}, []);
|
|
@@ -17232,9 +17263,9 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17232
17263
|
onToComplete: handleToComplete
|
|
17233
17264
|
});
|
|
17234
17265
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17235
|
-
const [isOpen, setIsOpen] =
|
|
17236
|
-
const [focusedInput, setFocusedInput] =
|
|
17237
|
-
const [autoFocus, setAutoFocus] =
|
|
17266
|
+
const [isOpen, setIsOpen] = React67.useState(false);
|
|
17267
|
+
const [focusedInput, setFocusedInput] = React67.useState(null);
|
|
17268
|
+
const [autoFocus, setAutoFocus] = React67.useState(false);
|
|
17238
17269
|
const isMobile3 = useIsMobile();
|
|
17239
17270
|
const { t } = useTranslation39();
|
|
17240
17271
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17245,14 +17276,14 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17245
17276
|
const isFocused = focusedInput !== null || isOpen;
|
|
17246
17277
|
const wrapperWidth = toCssSize(width);
|
|
17247
17278
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17248
|
-
const closeCalendar =
|
|
17279
|
+
const closeCalendar = React67.useCallback(() => {
|
|
17249
17280
|
setIsOpen(false);
|
|
17250
17281
|
setFocusedInput(null);
|
|
17251
17282
|
setAutoFocus(false);
|
|
17252
17283
|
if (value?.from) setMonth(value.from);
|
|
17253
17284
|
}, [setMonth, value?.from]);
|
|
17254
17285
|
closeCalendarRef.current = closeCalendar;
|
|
17255
|
-
const openCalendar =
|
|
17286
|
+
const openCalendar = React67.useCallback(() => {
|
|
17256
17287
|
if (isBlocked || readOnly) return;
|
|
17257
17288
|
setIsOpen(true);
|
|
17258
17289
|
}, [isBlocked, readOnly]);
|
|
@@ -17261,7 +17292,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17261
17292
|
onOutsideClick: closeCalendar,
|
|
17262
17293
|
isDisabled: !isOpen || isMobile3
|
|
17263
17294
|
});
|
|
17264
|
-
const handlePickerChange =
|
|
17295
|
+
const handlePickerChange = React67.useCallback(
|
|
17265
17296
|
(range, pickedDate) => {
|
|
17266
17297
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17267
17298
|
previous: value,
|
|
@@ -17282,7 +17313,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17282
17313
|
setToText("");
|
|
17283
17314
|
setMonth(/* @__PURE__ */ new Date());
|
|
17284
17315
|
};
|
|
17285
|
-
const disabledMatchers =
|
|
17316
|
+
const disabledMatchers = React67.useMemo(
|
|
17286
17317
|
() => createDisabledMatchers({
|
|
17287
17318
|
minDate: normalizedMinDate,
|
|
17288
17319
|
maxDate: normalizedMaxDate,
|
|
@@ -17301,7 +17332,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17301
17332
|
openCalendar();
|
|
17302
17333
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17303
17334
|
};
|
|
17304
|
-
|
|
17335
|
+
React67.useImperativeHandle(
|
|
17305
17336
|
ref,
|
|
17306
17337
|
() => ({
|
|
17307
17338
|
setDateRange: (range) => {
|
|
@@ -17324,7 +17355,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17324
17355
|
syncMonthToValue
|
|
17325
17356
|
]
|
|
17326
17357
|
);
|
|
17327
|
-
return /* @__PURE__ */
|
|
17358
|
+
return /* @__PURE__ */ jsx176(
|
|
17328
17359
|
"div",
|
|
17329
17360
|
{
|
|
17330
17361
|
ref: containerRef,
|
|
@@ -17337,7 +17368,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17337
17368
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17338
17369
|
children: /* @__PURE__ */ jsxs111("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
17339
17370
|
/* @__PURE__ */ jsxs111("div", { className: "relative w-full", children: [
|
|
17340
|
-
/* @__PURE__ */
|
|
17371
|
+
/* @__PURE__ */ jsx176(
|
|
17341
17372
|
DateRangeInputs,
|
|
17342
17373
|
{
|
|
17343
17374
|
fromId,
|
|
@@ -17390,7 +17421,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17390
17421
|
onToggleCalendar: toggleCalendar
|
|
17391
17422
|
}
|
|
17392
17423
|
),
|
|
17393
|
-
/* @__PURE__ */
|
|
17424
|
+
/* @__PURE__ */ jsx176(
|
|
17394
17425
|
Fieldset,
|
|
17395
17426
|
{
|
|
17396
17427
|
isFocused,
|
|
@@ -17407,7 +17438,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17407
17438
|
tooltip
|
|
17408
17439
|
}
|
|
17409
17440
|
),
|
|
17410
|
-
/* @__PURE__ */
|
|
17441
|
+
/* @__PURE__ */ jsx176(
|
|
17411
17442
|
DateRangePopover,
|
|
17412
17443
|
{
|
|
17413
17444
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17416,7 +17447,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17416
17447
|
drawerTitle,
|
|
17417
17448
|
drawerDescription,
|
|
17418
17449
|
onClose: closeCalendar,
|
|
17419
|
-
children: /* @__PURE__ */
|
|
17450
|
+
children: /* @__PURE__ */ jsx176(
|
|
17420
17451
|
DateRangeCalendar,
|
|
17421
17452
|
{
|
|
17422
17453
|
value,
|
|
@@ -17437,7 +17468,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17437
17468
|
}
|
|
17438
17469
|
)
|
|
17439
17470
|
] }),
|
|
17440
|
-
/* @__PURE__ */
|
|
17471
|
+
/* @__PURE__ */ jsx176(
|
|
17441
17472
|
DateRangePopover,
|
|
17442
17473
|
{
|
|
17443
17474
|
isOpen: isOpen && isMobile3,
|
|
@@ -17446,7 +17477,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17446
17477
|
drawerTitle,
|
|
17447
17478
|
drawerDescription,
|
|
17448
17479
|
onClose: closeCalendar,
|
|
17449
|
-
children: /* @__PURE__ */
|
|
17480
|
+
children: /* @__PURE__ */ jsx176(
|
|
17450
17481
|
DateRangeCalendar,
|
|
17451
17482
|
{
|
|
17452
17483
|
value,
|
|
@@ -17466,9 +17497,9 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17466
17497
|
)
|
|
17467
17498
|
}
|
|
17468
17499
|
),
|
|
17469
|
-
!error && optional && /* @__PURE__ */
|
|
17470
|
-
!error && helperText && /* @__PURE__ */
|
|
17471
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
17500
|
+
!error && optional && /* @__PURE__ */ jsx176("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17501
|
+
!error && helperText && /* @__PURE__ */ jsx176("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17502
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx176(
|
|
17472
17503
|
FieldErrorMessage,
|
|
17473
17504
|
{
|
|
17474
17505
|
id: errorId,
|
|
@@ -17482,7 +17513,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17482
17513
|
});
|
|
17483
17514
|
|
|
17484
17515
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17485
|
-
import * as
|
|
17516
|
+
import * as React68 from "react";
|
|
17486
17517
|
import { useTranslation as useTranslation40 } from "react-i18next";
|
|
17487
17518
|
import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
|
|
17488
17519
|
import {
|
|
@@ -17508,11 +17539,11 @@ function useValidateDates({
|
|
|
17508
17539
|
const { t } = useTranslation40();
|
|
17509
17540
|
const handleError = useEvent(onError);
|
|
17510
17541
|
const handleSuccess = useEvent(onSuccess);
|
|
17511
|
-
const errorFormatter =
|
|
17542
|
+
const errorFormatter = React68.useMemo(
|
|
17512
17543
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17513
17544
|
[displayFormat]
|
|
17514
17545
|
);
|
|
17515
|
-
const validateDates =
|
|
17546
|
+
const validateDates = React68.useCallback(
|
|
17516
17547
|
(dates) => {
|
|
17517
17548
|
const startDate = dates?.from;
|
|
17518
17549
|
const endDate = dates?.to;
|
|
@@ -17562,9 +17593,9 @@ function useValidateDates({
|
|
|
17562
17593
|
}
|
|
17563
17594
|
|
|
17564
17595
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17565
|
-
import * as
|
|
17596
|
+
import * as React69 from "react";
|
|
17566
17597
|
import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
|
|
17567
|
-
import { jsx as
|
|
17598
|
+
import { jsx as jsx177 } from "react/jsx-runtime";
|
|
17568
17599
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17569
17600
|
function parseTime(value) {
|
|
17570
17601
|
return parse2(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17606,24 +17637,24 @@ var FORMAT_SETTINGS = {
|
|
|
17606
17637
|
},
|
|
17607
17638
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17608
17639
|
};
|
|
17609
|
-
var TimePicker =
|
|
17610
|
-
const resolvedOptions =
|
|
17640
|
+
var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17641
|
+
const resolvedOptions = React69.useMemo(() => {
|
|
17611
17642
|
if (options) return options;
|
|
17612
17643
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17613
17644
|
return buildOptions(settings);
|
|
17614
17645
|
}, [formatName, options, timeSettings]);
|
|
17615
|
-
return /* @__PURE__ */
|
|
17646
|
+
return /* @__PURE__ */ jsx177(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17616
17647
|
});
|
|
17617
17648
|
|
|
17618
17649
|
// src/dashboard/file-input/FileInput.tsx
|
|
17619
|
-
import * as
|
|
17650
|
+
import * as React70 from "react";
|
|
17620
17651
|
import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
|
|
17621
17652
|
import { useTranslation as useTranslation41 } from "react-i18next";
|
|
17622
|
-
import { jsx as
|
|
17653
|
+
import { jsx as jsx178, jsxs as jsxs112 } from "react/jsx-runtime";
|
|
17623
17654
|
function defaultDownload(url) {
|
|
17624
17655
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17625
17656
|
}
|
|
17626
|
-
var FileInput =
|
|
17657
|
+
var FileInput = React70.forwardRef(function FileInput2({
|
|
17627
17658
|
label,
|
|
17628
17659
|
value,
|
|
17629
17660
|
onChange,
|
|
@@ -17646,12 +17677,12 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17646
17677
|
width,
|
|
17647
17678
|
downloadLabel
|
|
17648
17679
|
}, ref) {
|
|
17649
|
-
const internalRef =
|
|
17680
|
+
const internalRef = React70.useRef(null);
|
|
17650
17681
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
17651
17682
|
const { t } = useTranslation41();
|
|
17652
17683
|
const resolvedLabel = label ?? t("upload_file");
|
|
17653
17684
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17654
|
-
const reactId =
|
|
17685
|
+
const reactId = React70.useId();
|
|
17655
17686
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17656
17687
|
const labelId = `${inputId}-label`;
|
|
17657
17688
|
const errorId = `${inputId}-error`;
|
|
@@ -17690,7 +17721,7 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17690
17721
|
),
|
|
17691
17722
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17692
17723
|
children: [
|
|
17693
|
-
/* @__PURE__ */
|
|
17724
|
+
/* @__PURE__ */ jsx178(
|
|
17694
17725
|
"input",
|
|
17695
17726
|
{
|
|
17696
17727
|
ref: inputRef,
|
|
@@ -17730,12 +17761,12 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17730
17761
|
onClick: handleDownload,
|
|
17731
17762
|
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",
|
|
17732
17763
|
children: [
|
|
17733
|
-
/* @__PURE__ */
|
|
17734
|
-
/* @__PURE__ */
|
|
17764
|
+
/* @__PURE__ */ jsx178("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
17765
|
+
/* @__PURE__ */ jsx178(Download, { size: 15 })
|
|
17735
17766
|
]
|
|
17736
17767
|
}
|
|
17737
|
-
) : /* @__PURE__ */
|
|
17738
|
-
/* @__PURE__ */
|
|
17768
|
+
) : /* @__PURE__ */ jsx178("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
17769
|
+
/* @__PURE__ */ jsx178(
|
|
17739
17770
|
"button",
|
|
17740
17771
|
{
|
|
17741
17772
|
type: "button",
|
|
@@ -17743,17 +17774,17 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17743
17774
|
onClick: handleClear,
|
|
17744
17775
|
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]",
|
|
17745
17776
|
"aria-label": t("remove_file"),
|
|
17746
|
-
children: /* @__PURE__ */
|
|
17777
|
+
children: /* @__PURE__ */ jsx178(SquareX5, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17747
17778
|
}
|
|
17748
17779
|
)
|
|
17749
17780
|
]
|
|
17750
17781
|
}
|
|
17751
|
-
) : /* @__PURE__ */
|
|
17752
|
-
/* @__PURE__ */
|
|
17782
|
+
) : /* @__PURE__ */ jsx178("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
17783
|
+
/* @__PURE__ */ jsx178("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx178(Paperclip, { size: 20 }) })
|
|
17753
17784
|
]
|
|
17754
17785
|
}
|
|
17755
17786
|
),
|
|
17756
|
-
/* @__PURE__ */
|
|
17787
|
+
/* @__PURE__ */ jsx178(
|
|
17757
17788
|
Fieldset,
|
|
17758
17789
|
{
|
|
17759
17790
|
isFocused: false,
|
|
@@ -17771,9 +17802,9 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17771
17802
|
}
|
|
17772
17803
|
)
|
|
17773
17804
|
] }),
|
|
17774
|
-
!error && optional && /* @__PURE__ */
|
|
17775
|
-
!error && helperText && /* @__PURE__ */
|
|
17776
|
-
error && !hideErrorMessage && /* @__PURE__ */
|
|
17805
|
+
!error && optional && /* @__PURE__ */ jsx178("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17806
|
+
!error && helperText && /* @__PURE__ */ jsx178("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17807
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx178(
|
|
17777
17808
|
FieldErrorMessage,
|
|
17778
17809
|
{
|
|
17779
17810
|
id: errorId,
|
|
@@ -17788,10 +17819,10 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
17788
17819
|
});
|
|
17789
17820
|
|
|
17790
17821
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17791
|
-
import * as
|
|
17792
|
-
import { jsx as
|
|
17822
|
+
import * as React71 from "react";
|
|
17823
|
+
import { jsx as jsx179, jsxs as jsxs113 } from "react/jsx-runtime";
|
|
17793
17824
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
17794
|
-
var SelectIconsBox =
|
|
17825
|
+
var SelectIconsBox = React71.forwardRef(
|
|
17795
17826
|
function SelectIconsBox2({
|
|
17796
17827
|
children,
|
|
17797
17828
|
icons,
|
|
@@ -17807,10 +17838,10 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
17807
17838
|
className,
|
|
17808
17839
|
boxClassName
|
|
17809
17840
|
}, ref) {
|
|
17810
|
-
const containerRef =
|
|
17841
|
+
const containerRef = React71.useRef(null);
|
|
17811
17842
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
17812
17843
|
const isControlled = controlledOpen !== void 0;
|
|
17813
|
-
const [internalOpen, setInternalOpen] =
|
|
17844
|
+
const [internalOpen, setInternalOpen] = React71.useState(defaultOpen);
|
|
17814
17845
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17815
17846
|
const setOpen = (next) => {
|
|
17816
17847
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -17847,7 +17878,7 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
17847
17878
|
className: cn("relative inline-block outline-none", className),
|
|
17848
17879
|
children: [
|
|
17849
17880
|
children,
|
|
17850
|
-
isOpen && /* @__PURE__ */
|
|
17881
|
+
isOpen && /* @__PURE__ */ jsx179(
|
|
17851
17882
|
"div",
|
|
17852
17883
|
{
|
|
17853
17884
|
className: cn(
|
|
@@ -17858,7 +17889,7 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
17858
17889
|
boxClassName
|
|
17859
17890
|
),
|
|
17860
17891
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
17861
|
-
children: icons.map((iconName) => /* @__PURE__ */
|
|
17892
|
+
children: icons.map((iconName) => /* @__PURE__ */ jsx179(
|
|
17862
17893
|
"button",
|
|
17863
17894
|
{
|
|
17864
17895
|
type: "button",
|
|
@@ -17941,14 +17972,14 @@ function getErrorMessage(error) {
|
|
|
17941
17972
|
|
|
17942
17973
|
// src/lib/toastResponseError.tsx
|
|
17943
17974
|
import i18next from "i18next";
|
|
17944
|
-
import { jsx as
|
|
17975
|
+
import { jsx as jsx180, jsxs as jsxs114 } from "react/jsx-runtime";
|
|
17945
17976
|
function addSupportEmailToMessage(message, prefixText) {
|
|
17946
17977
|
if (typeof message !== "string") {
|
|
17947
17978
|
return message;
|
|
17948
17979
|
}
|
|
17949
17980
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
17950
17981
|
return /* @__PURE__ */ jsxs114("div", { children: [
|
|
17951
|
-
/* @__PURE__ */
|
|
17982
|
+
/* @__PURE__ */ jsx180("div", { children: builtMessage }),
|
|
17952
17983
|
i18next.t("reach_us_at_email")
|
|
17953
17984
|
] });
|
|
17954
17985
|
}
|
|
@@ -17963,13 +17994,13 @@ function toastResponseError(error, options = {}) {
|
|
|
17963
17994
|
}
|
|
17964
17995
|
|
|
17965
17996
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
17966
|
-
import { forwardRef as
|
|
17967
|
-
import { jsx as
|
|
17968
|
-
var LegacyTextarea =
|
|
17997
|
+
import { forwardRef as forwardRef73, useId as useId15 } from "react";
|
|
17998
|
+
import { jsx as jsx181, jsxs as jsxs115 } from "react/jsx-runtime";
|
|
17999
|
+
var LegacyTextarea = forwardRef73(
|
|
17969
18000
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
17970
18001
|
const inputId = useId15();
|
|
17971
18002
|
return /* @__PURE__ */ jsxs115("div", { className: cn("relative", className), children: [
|
|
17972
|
-
/* @__PURE__ */
|
|
18003
|
+
/* @__PURE__ */ jsx181(
|
|
17973
18004
|
"textarea",
|
|
17974
18005
|
{
|
|
17975
18006
|
ref,
|
|
@@ -17985,7 +18016,7 @@ var LegacyTextarea = forwardRef72(
|
|
|
17985
18016
|
...textareaProps
|
|
17986
18017
|
}
|
|
17987
18018
|
),
|
|
17988
|
-
label && /* @__PURE__ */
|
|
18019
|
+
label && /* @__PURE__ */ jsx181(
|
|
17989
18020
|
"label",
|
|
17990
18021
|
{
|
|
17991
18022
|
htmlFor: inputId,
|
|
@@ -18003,15 +18034,15 @@ var LegacyTextarea = forwardRef72(
|
|
|
18003
18034
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
18004
18035
|
|
|
18005
18036
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18006
|
-
import * as
|
|
18037
|
+
import * as React73 from "react";
|
|
18007
18038
|
import { Calendar as Calendar2 } from "lucide-react";
|
|
18008
18039
|
|
|
18009
18040
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
18010
|
-
import * as
|
|
18041
|
+
import * as React72 from "react";
|
|
18011
18042
|
import { Loader2 as Loader24 } from "lucide-react";
|
|
18012
18043
|
import { useTranslation as useTranslation42 } from "react-i18next";
|
|
18013
|
-
import { Fragment as Fragment17, jsx as
|
|
18014
|
-
var AirbnbFieldTrigger =
|
|
18044
|
+
import { Fragment as Fragment17, jsx as jsx182, jsxs as jsxs116 } from "react/jsx-runtime";
|
|
18045
|
+
var AirbnbFieldTrigger = React72.forwardRef(
|
|
18015
18046
|
({
|
|
18016
18047
|
as = "button",
|
|
18017
18048
|
id,
|
|
@@ -18048,13 +18079,13 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18048
18079
|
const visibleLabelText = labelText ?? label;
|
|
18049
18080
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
18050
18081
|
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs116("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
|
|
18051
|
-
/* @__PURE__ */
|
|
18082
|
+
/* @__PURE__ */ jsx182("span", { className: "min-w-0 truncate", children: visibleLabelText }),
|
|
18052
18083
|
optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "text-current opacity-70 lowercase", children: [
|
|
18053
18084
|
"(",
|
|
18054
18085
|
optionalLabel,
|
|
18055
18086
|
")"
|
|
18056
18087
|
] }),
|
|
18057
|
-
tooltip && /* @__PURE__ */
|
|
18088
|
+
tooltip && /* @__PURE__ */ jsx182(
|
|
18058
18089
|
HelpTooltip,
|
|
18059
18090
|
{
|
|
18060
18091
|
content: tooltip,
|
|
@@ -18071,7 +18102,7 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18071
18102
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18072
18103
|
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs116("span", { className: "flex items-center gap-2", children: [
|
|
18073
18104
|
trailingAdornment,
|
|
18074
|
-
loading && /* @__PURE__ */
|
|
18105
|
+
loading && /* @__PURE__ */ jsx182(
|
|
18075
18106
|
Loader24,
|
|
18076
18107
|
{
|
|
18077
18108
|
"aria-hidden": "true",
|
|
@@ -18097,7 +18128,7 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18097
18128
|
contentClassName
|
|
18098
18129
|
),
|
|
18099
18130
|
children: [
|
|
18100
|
-
/* @__PURE__ */
|
|
18131
|
+
/* @__PURE__ */ jsx182(
|
|
18101
18132
|
"span",
|
|
18102
18133
|
{
|
|
18103
18134
|
id: labelId,
|
|
@@ -18110,7 +18141,7 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18110
18141
|
children: animatedLabel
|
|
18111
18142
|
}
|
|
18112
18143
|
),
|
|
18113
|
-
children ? children : hasValue ? /* @__PURE__ */
|
|
18144
|
+
children ? children : hasValue ? /* @__PURE__ */ jsx182(
|
|
18114
18145
|
"span",
|
|
18115
18146
|
{
|
|
18116
18147
|
id: valueId,
|
|
@@ -18121,11 +18152,11 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18121
18152
|
),
|
|
18122
18153
|
children: valueText
|
|
18123
18154
|
}
|
|
18124
|
-
) : /* @__PURE__ */
|
|
18155
|
+
) : /* @__PURE__ */ jsx182("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
18125
18156
|
]
|
|
18126
18157
|
}
|
|
18127
18158
|
),
|
|
18128
|
-
resolvedTrailingAdornment && /* @__PURE__ */
|
|
18159
|
+
resolvedTrailingAdornment && /* @__PURE__ */ jsx182(
|
|
18129
18160
|
"span",
|
|
18130
18161
|
{
|
|
18131
18162
|
"aria-hidden": "true",
|
|
@@ -18135,8 +18166,8 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18135
18166
|
)
|
|
18136
18167
|
] });
|
|
18137
18168
|
return /* @__PURE__ */ jsxs116("div", { className: "w-full", children: [
|
|
18138
|
-
topLabel && /* @__PURE__ */
|
|
18139
|
-
as === "button" ? /* @__PURE__ */
|
|
18169
|
+
topLabel && /* @__PURE__ */ jsx182("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
|
|
18170
|
+
as === "button" ? /* @__PURE__ */ jsx182(
|
|
18140
18171
|
"button",
|
|
18141
18172
|
{
|
|
18142
18173
|
id,
|
|
@@ -18153,7 +18184,7 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18153
18184
|
...props,
|
|
18154
18185
|
children: sharedContent
|
|
18155
18186
|
}
|
|
18156
|
-
) : /* @__PURE__ */
|
|
18187
|
+
) : /* @__PURE__ */ jsx182(
|
|
18157
18188
|
"div",
|
|
18158
18189
|
{
|
|
18159
18190
|
id,
|
|
@@ -18170,16 +18201,16 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18170
18201
|
children: sharedContent
|
|
18171
18202
|
}
|
|
18172
18203
|
),
|
|
18173
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */
|
|
18204
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx182(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
18174
18205
|
] });
|
|
18175
18206
|
}
|
|
18176
18207
|
);
|
|
18177
18208
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
18178
18209
|
|
|
18179
18210
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18180
|
-
import { jsx as
|
|
18211
|
+
import { jsx as jsx183, jsxs as jsxs117 } from "react/jsx-runtime";
|
|
18181
18212
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18182
|
-
var AirbnbDatePicker =
|
|
18213
|
+
var AirbnbDatePicker = React73.forwardRef(
|
|
18183
18214
|
({
|
|
18184
18215
|
label,
|
|
18185
18216
|
topLabel,
|
|
@@ -18204,24 +18235,24 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18204
18235
|
formatValue = formatDateValue
|
|
18205
18236
|
}, ref) => {
|
|
18206
18237
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18207
|
-
const [isOpen, setIsOpen] =
|
|
18208
|
-
const triggerId =
|
|
18209
|
-
const pickerId =
|
|
18210
|
-
const labelId =
|
|
18211
|
-
const valueId =
|
|
18212
|
-
const helperTextId =
|
|
18213
|
-
const errorId =
|
|
18214
|
-
const internalRef =
|
|
18238
|
+
const [isOpen, setIsOpen] = React73.useState(false);
|
|
18239
|
+
const triggerId = React73.useId();
|
|
18240
|
+
const pickerId = React73.useId();
|
|
18241
|
+
const labelId = React73.useId();
|
|
18242
|
+
const valueId = React73.useId();
|
|
18243
|
+
const helperTextId = React73.useId();
|
|
18244
|
+
const errorId = React73.useId();
|
|
18245
|
+
const internalRef = React73.useRef(null);
|
|
18215
18246
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18216
|
-
const monthLabels =
|
|
18217
|
-
const resolvedMinDate =
|
|
18218
|
-
const resolvedMaxDate =
|
|
18219
|
-
const normalizedValue =
|
|
18220
|
-
const normalizedDefaultValue =
|
|
18247
|
+
const monthLabels = React73.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18248
|
+
const resolvedMinDate = React73.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18249
|
+
const resolvedMaxDate = React73.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18250
|
+
const normalizedValue = React73.useMemo(() => normalizeDateValue(value), [value]);
|
|
18251
|
+
const normalizedDefaultValue = React73.useMemo(
|
|
18221
18252
|
() => normalizeDateValue(defaultValue),
|
|
18222
18253
|
[defaultValue]
|
|
18223
18254
|
);
|
|
18224
|
-
const resolvedValue =
|
|
18255
|
+
const resolvedValue = React73.useMemo(
|
|
18225
18256
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18226
18257
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18227
18258
|
);
|
|
@@ -18252,7 +18283,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18252
18283
|
minDate: resolvedMinDate,
|
|
18253
18284
|
maxDate: resolvedMaxDate
|
|
18254
18285
|
});
|
|
18255
|
-
const handleOpenChange =
|
|
18286
|
+
const handleOpenChange = React73.useCallback(
|
|
18256
18287
|
(nextOpen) => {
|
|
18257
18288
|
if (isBlocked && nextOpen) return;
|
|
18258
18289
|
setIsOpen(nextOpen);
|
|
@@ -18262,7 +18293,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18262
18293
|
},
|
|
18263
18294
|
[isBlocked]
|
|
18264
18295
|
);
|
|
18265
|
-
const handleDone =
|
|
18296
|
+
const handleDone = React73.useCallback(() => {
|
|
18266
18297
|
if (isBlocked) return;
|
|
18267
18298
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18268
18299
|
handleOpenChange(false);
|
|
@@ -18274,11 +18305,11 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18274
18305
|
resolvedMaxDate,
|
|
18275
18306
|
resolvedMinDate
|
|
18276
18307
|
]);
|
|
18277
|
-
const handleTriggerClick =
|
|
18308
|
+
const handleTriggerClick = React73.useCallback(() => {
|
|
18278
18309
|
if (isBlocked) return;
|
|
18279
18310
|
setIsOpen(true);
|
|
18280
18311
|
}, [isBlocked]);
|
|
18281
|
-
const handleTriggerKeyDown =
|
|
18312
|
+
const handleTriggerKeyDown = React73.useCallback(
|
|
18282
18313
|
(event) => {
|
|
18283
18314
|
if (isBlocked) return;
|
|
18284
18315
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18288,13 +18319,13 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18288
18319
|
},
|
|
18289
18320
|
[isBlocked]
|
|
18290
18321
|
);
|
|
18291
|
-
|
|
18322
|
+
React73.useEffect(() => {
|
|
18292
18323
|
if (isBlocked) {
|
|
18293
18324
|
setIsOpen(false);
|
|
18294
18325
|
}
|
|
18295
18326
|
}, [isBlocked]);
|
|
18296
18327
|
return /* @__PURE__ */ jsxs117("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
|
|
18297
|
-
name && /* @__PURE__ */
|
|
18328
|
+
name && /* @__PURE__ */ jsx183(
|
|
18298
18329
|
"input",
|
|
18299
18330
|
{
|
|
18300
18331
|
type: "hidden",
|
|
@@ -18302,7 +18333,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18302
18333
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
18303
18334
|
}
|
|
18304
18335
|
),
|
|
18305
|
-
/* @__PURE__ */
|
|
18336
|
+
/* @__PURE__ */ jsx183(
|
|
18306
18337
|
AirbnbFieldTrigger,
|
|
18307
18338
|
{
|
|
18308
18339
|
id: triggerId,
|
|
@@ -18328,10 +18359,10 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18328
18359
|
onClick: handleTriggerClick,
|
|
18329
18360
|
onKeyDown: handleTriggerKeyDown,
|
|
18330
18361
|
onBlur,
|
|
18331
|
-
trailingAdornment: /* @__PURE__ */
|
|
18362
|
+
trailingAdornment: /* @__PURE__ */ jsx183(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18332
18363
|
}
|
|
18333
18364
|
),
|
|
18334
|
-
/* @__PURE__ */
|
|
18365
|
+
/* @__PURE__ */ jsx183(
|
|
18335
18366
|
AirbnbDatePickerContent,
|
|
18336
18367
|
{
|
|
18337
18368
|
baseId: pickerId,
|
|
@@ -18365,12 +18396,12 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18365
18396
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18366
18397
|
|
|
18367
18398
|
// src/airbnb-fields/input/Input.tsx
|
|
18368
|
-
import * as
|
|
18399
|
+
import * as React74 from "react";
|
|
18369
18400
|
import { Eye as Eye2 } from "lucide-react";
|
|
18370
18401
|
import { useTranslation as useTranslation43 } from "react-i18next";
|
|
18371
|
-
import { jsx as
|
|
18402
|
+
import { jsx as jsx184, jsxs as jsxs118 } from "react/jsx-runtime";
|
|
18372
18403
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18373
|
-
var AirbnbInput =
|
|
18404
|
+
var AirbnbInput = React74.forwardRef(
|
|
18374
18405
|
({
|
|
18375
18406
|
label,
|
|
18376
18407
|
topLabel,
|
|
@@ -18399,16 +18430,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18399
18430
|
...props
|
|
18400
18431
|
}, ref) => {
|
|
18401
18432
|
const { t } = useTranslation43();
|
|
18402
|
-
const generatedId =
|
|
18403
|
-
const inputRef =
|
|
18433
|
+
const generatedId = React74.useId();
|
|
18434
|
+
const inputRef = React74.useRef(null);
|
|
18404
18435
|
const inputId = id ?? generatedId;
|
|
18405
18436
|
const fieldId = `${inputId}-field`;
|
|
18406
18437
|
const labelId = `${inputId}-label`;
|
|
18407
18438
|
const errorId = `${inputId}-error`;
|
|
18408
18439
|
const accessibleLabel = placeholder ?? label;
|
|
18409
|
-
const [isFocused, setIsFocused] =
|
|
18410
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18411
|
-
const [currentValue, setCurrentValue] =
|
|
18440
|
+
const [isFocused, setIsFocused] = React74.useState(false);
|
|
18441
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React74.useState(false);
|
|
18442
|
+
const [currentValue, setCurrentValue] = React74.useState(
|
|
18412
18443
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18413
18444
|
);
|
|
18414
18445
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18421,16 +18452,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18421
18452
|
const triggerError = error ?? invalid;
|
|
18422
18453
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18423
18454
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18424
|
-
|
|
18455
|
+
React74.useLayoutEffect(() => {
|
|
18425
18456
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18426
18457
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18427
18458
|
}, [value]);
|
|
18428
|
-
|
|
18459
|
+
React74.useEffect(() => {
|
|
18429
18460
|
if (!isPasswordInput) {
|
|
18430
18461
|
setIsPasswordRevealed(false);
|
|
18431
18462
|
}
|
|
18432
18463
|
}, [isPasswordInput]);
|
|
18433
|
-
const setRefs =
|
|
18464
|
+
const setRefs = React74.useCallback(
|
|
18434
18465
|
(node) => {
|
|
18435
18466
|
inputRef.current = node;
|
|
18436
18467
|
if (node && value == null) {
|
|
@@ -18463,7 +18494,7 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18463
18494
|
const togglePasswordReveal = () => {
|
|
18464
18495
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18465
18496
|
};
|
|
18466
|
-
return /* @__PURE__ */
|
|
18497
|
+
return /* @__PURE__ */ jsx184("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs118(
|
|
18467
18498
|
AirbnbFieldTrigger,
|
|
18468
18499
|
{
|
|
18469
18500
|
as: "div",
|
|
@@ -18492,7 +18523,7 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18492
18523
|
forceLabelText: hasLabelMeta,
|
|
18493
18524
|
hideErrorMessage: !renderErrorMessage,
|
|
18494
18525
|
children: [
|
|
18495
|
-
/* @__PURE__ */
|
|
18526
|
+
/* @__PURE__ */ jsx184(
|
|
18496
18527
|
"input",
|
|
18497
18528
|
{
|
|
18498
18529
|
...props,
|
|
@@ -18522,7 +18553,7 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18522
18553
|
)
|
|
18523
18554
|
}
|
|
18524
18555
|
),
|
|
18525
|
-
shouldShowPasswordReveal && /* @__PURE__ */
|
|
18556
|
+
shouldShowPasswordReveal && /* @__PURE__ */ jsx184(
|
|
18526
18557
|
"button",
|
|
18527
18558
|
{
|
|
18528
18559
|
type: "button",
|
|
@@ -18530,7 +18561,7 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18530
18561
|
disabled: isBlocked,
|
|
18531
18562
|
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",
|
|
18532
18563
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18533
|
-
children: /* @__PURE__ */
|
|
18564
|
+
children: /* @__PURE__ */ jsx184(
|
|
18534
18565
|
Eye2,
|
|
18535
18566
|
{
|
|
18536
18567
|
size: 18,
|
|
@@ -18548,14 +18579,14 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18548
18579
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18549
18580
|
|
|
18550
18581
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18551
|
-
import * as
|
|
18582
|
+
import * as React80 from "react";
|
|
18552
18583
|
import { ChevronDown as ChevronDown6 } from "lucide-react";
|
|
18553
18584
|
|
|
18554
18585
|
// src/airbnb-fields/select/Select.tsx
|
|
18555
|
-
import * as
|
|
18586
|
+
import * as React79 from "react";
|
|
18556
18587
|
|
|
18557
18588
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18558
|
-
import { jsx as
|
|
18589
|
+
import { jsx as jsx185, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
18559
18590
|
function AirbnbSelectDesktopMenu({
|
|
18560
18591
|
id,
|
|
18561
18592
|
options,
|
|
@@ -18587,12 +18618,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18587
18618
|
onKeyDown,
|
|
18588
18619
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18589
18620
|
children: [
|
|
18590
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */
|
|
18621
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx185("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18591
18622
|
options.map((option, index) => {
|
|
18592
18623
|
const isSelected = selectedValue?.value === option.value;
|
|
18593
18624
|
const isHighlighted = index === highlightedIndex;
|
|
18594
18625
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18595
|
-
return /* @__PURE__ */
|
|
18626
|
+
return /* @__PURE__ */ jsx185(
|
|
18596
18627
|
"button",
|
|
18597
18628
|
{
|
|
18598
18629
|
id: getOptionId2(index),
|
|
@@ -18624,7 +18655,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18624
18655
|
}
|
|
18625
18656
|
|
|
18626
18657
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18627
|
-
import { jsx as
|
|
18658
|
+
import { jsx as jsx186 } from "react/jsx-runtime";
|
|
18628
18659
|
function AirbnbSelectDesktopContent({
|
|
18629
18660
|
isOpen,
|
|
18630
18661
|
listboxId,
|
|
@@ -18645,14 +18676,14 @@ function AirbnbSelectDesktopContent({
|
|
|
18645
18676
|
noOptionsMessage
|
|
18646
18677
|
}) {
|
|
18647
18678
|
if (!isOpen) return null;
|
|
18648
|
-
return /* @__PURE__ */
|
|
18679
|
+
return /* @__PURE__ */ jsx186(
|
|
18649
18680
|
"div",
|
|
18650
18681
|
{
|
|
18651
18682
|
className: cn(
|
|
18652
18683
|
"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)]",
|
|
18653
18684
|
dropdownClassName
|
|
18654
18685
|
),
|
|
18655
|
-
children: /* @__PURE__ */
|
|
18686
|
+
children: /* @__PURE__ */ jsx186(
|
|
18656
18687
|
AirbnbSelectDesktopMenu,
|
|
18657
18688
|
{
|
|
18658
18689
|
id: listboxId,
|
|
@@ -18750,7 +18781,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
18750
18781
|
}
|
|
18751
18782
|
|
|
18752
18783
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
18753
|
-
import { jsx as
|
|
18784
|
+
import { jsx as jsx187, jsxs as jsxs120 } from "react/jsx-runtime";
|
|
18754
18785
|
function AirbnbSelectMobileWheel({
|
|
18755
18786
|
id,
|
|
18756
18787
|
options,
|
|
@@ -18781,10 +18812,10 @@ function AirbnbSelectMobileWheel({
|
|
|
18781
18812
|
onKeyDown,
|
|
18782
18813
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
18783
18814
|
children: [
|
|
18784
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */
|
|
18785
|
-
/* @__PURE__ */
|
|
18786
|
-
/* @__PURE__ */
|
|
18787
|
-
/* @__PURE__ */
|
|
18815
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx187("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18816
|
+
/* @__PURE__ */ jsx187("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
18817
|
+
/* @__PURE__ */ jsx187("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
18818
|
+
/* @__PURE__ */ jsx187(
|
|
18788
18819
|
"div",
|
|
18789
18820
|
{
|
|
18790
18821
|
"aria-hidden": true,
|
|
@@ -18809,11 +18840,11 @@ function AirbnbSelectMobileWheel({
|
|
|
18809
18840
|
WebkitOverflowScrolling: "touch"
|
|
18810
18841
|
},
|
|
18811
18842
|
children: [
|
|
18812
|
-
/* @__PURE__ */
|
|
18843
|
+
/* @__PURE__ */ jsx187("div", { style: { height: `${spacerHeight2}px` } }),
|
|
18813
18844
|
options.map((option, index) => {
|
|
18814
18845
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
18815
18846
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18816
|
-
return /* @__PURE__ */
|
|
18847
|
+
return /* @__PURE__ */ jsx187(
|
|
18817
18848
|
"button",
|
|
18818
18849
|
{
|
|
18819
18850
|
id: getOptionId2(index),
|
|
@@ -18834,7 +18865,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18834
18865
|
optionKey
|
|
18835
18866
|
);
|
|
18836
18867
|
}),
|
|
18837
|
-
/* @__PURE__ */
|
|
18868
|
+
/* @__PURE__ */ jsx187("div", { style: { height: `${spacerHeight2}px` } })
|
|
18838
18869
|
]
|
|
18839
18870
|
}
|
|
18840
18871
|
)
|
|
@@ -18844,7 +18875,7 @@ function AirbnbSelectMobileWheel({
|
|
|
18844
18875
|
}
|
|
18845
18876
|
|
|
18846
18877
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
18847
|
-
import { jsx as
|
|
18878
|
+
import { jsx as jsx188, jsxs as jsxs121 } from "react/jsx-runtime";
|
|
18848
18879
|
function AirbnbSelectMobileContent({
|
|
18849
18880
|
open,
|
|
18850
18881
|
onOpenChange,
|
|
@@ -18868,11 +18899,11 @@ function AirbnbSelectMobileContent({
|
|
|
18868
18899
|
getOptionId: getOptionId2,
|
|
18869
18900
|
noOptionsMessage
|
|
18870
18901
|
}) {
|
|
18871
|
-
return /* @__PURE__ */
|
|
18872
|
-
/* @__PURE__ */
|
|
18873
|
-
/* @__PURE__ */
|
|
18902
|
+
return /* @__PURE__ */ jsx188(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs121(DrawerContent, { onClose, lockScroll: false, children: [
|
|
18903
|
+
/* @__PURE__ */ jsx188(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
18904
|
+
/* @__PURE__ */ jsx188(DrawerDescription, { className: "sr-only", children: label }),
|
|
18874
18905
|
/* @__PURE__ */ jsxs121("div", { className: "px-6 pb-4 pt-1", children: [
|
|
18875
|
-
/* @__PURE__ */
|
|
18906
|
+
/* @__PURE__ */ jsx188(
|
|
18876
18907
|
AirbnbSelectMobileWheel,
|
|
18877
18908
|
{
|
|
18878
18909
|
id: listboxId,
|
|
@@ -18891,16 +18922,16 @@ function AirbnbSelectMobileContent({
|
|
|
18891
18922
|
noOptionsMessage
|
|
18892
18923
|
}
|
|
18893
18924
|
),
|
|
18894
|
-
/* @__PURE__ */
|
|
18925
|
+
/* @__PURE__ */ jsx188(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
18895
18926
|
] })
|
|
18896
18927
|
] }) });
|
|
18897
18928
|
}
|
|
18898
18929
|
|
|
18899
18930
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
18900
|
-
import * as
|
|
18931
|
+
import * as React75 from "react";
|
|
18901
18932
|
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
18902
|
-
import { jsx as
|
|
18903
|
-
var AirbnbSelectTrigger =
|
|
18933
|
+
import { jsx as jsx189 } from "react/jsx-runtime";
|
|
18934
|
+
var AirbnbSelectTrigger = React75.forwardRef(
|
|
18904
18935
|
({
|
|
18905
18936
|
id,
|
|
18906
18937
|
open,
|
|
@@ -18924,7 +18955,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
|
|
|
18924
18955
|
onKeyDown,
|
|
18925
18956
|
onBlur
|
|
18926
18957
|
}, ref) => {
|
|
18927
|
-
return /* @__PURE__ */
|
|
18958
|
+
return /* @__PURE__ */ jsx189(
|
|
18928
18959
|
AirbnbFieldTrigger,
|
|
18929
18960
|
{
|
|
18930
18961
|
id,
|
|
@@ -18952,7 +18983,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
|
|
|
18952
18983
|
onClick,
|
|
18953
18984
|
onKeyDown,
|
|
18954
18985
|
onBlur,
|
|
18955
|
-
trailingAdornment: /* @__PURE__ */
|
|
18986
|
+
trailingAdornment: /* @__PURE__ */ jsx189(
|
|
18956
18987
|
ChevronDown5,
|
|
18957
18988
|
{
|
|
18958
18989
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
@@ -18965,7 +18996,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
|
|
|
18965
18996
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
18966
18997
|
|
|
18967
18998
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
18968
|
-
import * as
|
|
18999
|
+
import * as React76 from "react";
|
|
18969
19000
|
function useDesktopSelect({
|
|
18970
19001
|
isMobile: isMobile3,
|
|
18971
19002
|
isOpen,
|
|
@@ -18974,12 +19005,12 @@ function useDesktopSelect({
|
|
|
18974
19005
|
disabled,
|
|
18975
19006
|
onChange
|
|
18976
19007
|
}) {
|
|
18977
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
18978
|
-
const triggerRef =
|
|
18979
|
-
const listRef =
|
|
18980
|
-
const optionRefs =
|
|
19008
|
+
const [highlightedIndex, setHighlightedIndex] = React76.useState(-1);
|
|
19009
|
+
const triggerRef = React76.useRef(null);
|
|
19010
|
+
const listRef = React76.useRef(null);
|
|
19011
|
+
const optionRefs = React76.useRef([]);
|
|
18981
19012
|
const selectedIndex = getOptionIndex2(options, value);
|
|
18982
|
-
|
|
19013
|
+
React76.useEffect(() => {
|
|
18983
19014
|
if (!isOpen || isMobile3) return;
|
|
18984
19015
|
setHighlightedIndex((currentIndex) => {
|
|
18985
19016
|
if (currentIndex >= 0) {
|
|
@@ -18994,34 +19025,34 @@ function useDesktopSelect({
|
|
|
18994
19025
|
window.cancelAnimationFrame(frameId);
|
|
18995
19026
|
};
|
|
18996
19027
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
18997
|
-
|
|
19028
|
+
React76.useEffect(() => {
|
|
18998
19029
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
18999
19030
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
19000
19031
|
block: "nearest"
|
|
19001
19032
|
});
|
|
19002
19033
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
19003
|
-
|
|
19034
|
+
React76.useEffect(() => {
|
|
19004
19035
|
if (isOpen) return;
|
|
19005
19036
|
setHighlightedIndex(-1);
|
|
19006
19037
|
}, [isOpen]);
|
|
19007
|
-
const focusTrigger =
|
|
19038
|
+
const focusTrigger = React76.useCallback(() => {
|
|
19008
19039
|
triggerRef.current?.focus();
|
|
19009
19040
|
}, []);
|
|
19010
|
-
const handleSelect =
|
|
19041
|
+
const handleSelect = React76.useCallback(
|
|
19011
19042
|
(option) => {
|
|
19012
19043
|
if (option.isDisabled || disabled) return;
|
|
19013
19044
|
onChange?.(option);
|
|
19014
19045
|
},
|
|
19015
19046
|
[disabled, onChange]
|
|
19016
19047
|
);
|
|
19017
|
-
const openMenu =
|
|
19048
|
+
const openMenu = React76.useCallback(
|
|
19018
19049
|
(targetIndex) => {
|
|
19019
19050
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19020
19051
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
19021
19052
|
},
|
|
19022
19053
|
[options, selectedIndex]
|
|
19023
19054
|
);
|
|
19024
|
-
const handleTriggerKeyDown =
|
|
19055
|
+
const handleTriggerKeyDown = React76.useCallback(
|
|
19025
19056
|
(event, onOpen) => {
|
|
19026
19057
|
if (disabled) return;
|
|
19027
19058
|
if (event.key === "ArrowDown") {
|
|
@@ -19046,7 +19077,7 @@ function useDesktopSelect({
|
|
|
19046
19077
|
},
|
|
19047
19078
|
[disabled, openMenu, options, selectedIndex]
|
|
19048
19079
|
);
|
|
19049
|
-
const handleMenuKeyDown =
|
|
19080
|
+
const handleMenuKeyDown = React76.useCallback(
|
|
19050
19081
|
(event, onClose) => {
|
|
19051
19082
|
if (event.key === "Escape") {
|
|
19052
19083
|
event.preventDefault();
|
|
@@ -19096,7 +19127,7 @@ function useDesktopSelect({
|
|
|
19096
19127
|
},
|
|
19097
19128
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
19098
19129
|
);
|
|
19099
|
-
const setOptionRef =
|
|
19130
|
+
const setOptionRef = React76.useCallback(
|
|
19100
19131
|
(index, node) => {
|
|
19101
19132
|
optionRefs.current[index] = node;
|
|
19102
19133
|
},
|
|
@@ -19116,23 +19147,23 @@ function useDesktopSelect({
|
|
|
19116
19147
|
}
|
|
19117
19148
|
|
|
19118
19149
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19119
|
-
import * as
|
|
19150
|
+
import * as React77 from "react";
|
|
19120
19151
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19121
|
-
const [pendingValue, setPendingValue] =
|
|
19152
|
+
const [pendingValue, setPendingValue] = React77.useState(
|
|
19122
19153
|
value ?? null
|
|
19123
19154
|
);
|
|
19124
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19125
|
-
const mobileListRef =
|
|
19126
|
-
const scrollSettleTimeoutRef =
|
|
19127
|
-
const scrollAnimationFrameRef =
|
|
19128
|
-
const getTargetIndex =
|
|
19155
|
+
const [mobileScrollTop, setMobileScrollTop] = React77.useState(0);
|
|
19156
|
+
const mobileListRef = React77.useRef(null);
|
|
19157
|
+
const scrollSettleTimeoutRef = React77.useRef(null);
|
|
19158
|
+
const scrollAnimationFrameRef = React77.useRef(null);
|
|
19159
|
+
const getTargetIndex = React77.useCallback(
|
|
19129
19160
|
(targetValue) => {
|
|
19130
19161
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19131
19162
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19132
19163
|
},
|
|
19133
19164
|
[options]
|
|
19134
19165
|
);
|
|
19135
|
-
const syncScrollPosition =
|
|
19166
|
+
const syncScrollPosition = React77.useCallback(
|
|
19136
19167
|
(targetValue, behavior = "instant") => {
|
|
19137
19168
|
const targetIndex = getTargetIndex(targetValue);
|
|
19138
19169
|
if (targetIndex < 0) return;
|
|
@@ -19151,27 +19182,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19151
19182
|
},
|
|
19152
19183
|
[getTargetIndex, options]
|
|
19153
19184
|
);
|
|
19154
|
-
const clearScrollSettleTimeout =
|
|
19185
|
+
const clearScrollSettleTimeout = React77.useCallback(() => {
|
|
19155
19186
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19156
19187
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19157
19188
|
scrollSettleTimeoutRef.current = null;
|
|
19158
19189
|
}, []);
|
|
19159
|
-
const clearScrollAnimationFrame =
|
|
19190
|
+
const clearScrollAnimationFrame = React77.useCallback(() => {
|
|
19160
19191
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19161
19192
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19162
19193
|
scrollAnimationFrameRef.current = null;
|
|
19163
19194
|
}, []);
|
|
19164
|
-
|
|
19195
|
+
React77.useEffect(
|
|
19165
19196
|
() => () => {
|
|
19166
19197
|
clearScrollSettleTimeout();
|
|
19167
19198
|
clearScrollAnimationFrame();
|
|
19168
19199
|
},
|
|
19169
19200
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19170
19201
|
);
|
|
19171
|
-
|
|
19202
|
+
React77.useEffect(() => {
|
|
19172
19203
|
setPendingValue(value ?? null);
|
|
19173
19204
|
}, [value]);
|
|
19174
|
-
|
|
19205
|
+
React77.useLayoutEffect(() => {
|
|
19175
19206
|
if (!isMobile3 || !isOpen) return;
|
|
19176
19207
|
const frameId = window.requestAnimationFrame(() => {
|
|
19177
19208
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19180,7 +19211,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19180
19211
|
window.cancelAnimationFrame(frameId);
|
|
19181
19212
|
};
|
|
19182
19213
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19183
|
-
const settleScroll =
|
|
19214
|
+
const settleScroll = React77.useCallback(() => {
|
|
19184
19215
|
if (!mobileListRef.current) return;
|
|
19185
19216
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19186
19217
|
const nextOption = options[nextIndex];
|
|
@@ -19192,13 +19223,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19192
19223
|
}
|
|
19193
19224
|
setPendingValue(nextOption);
|
|
19194
19225
|
}, [options, pendingValue]);
|
|
19195
|
-
const scheduleScrollSettle =
|
|
19226
|
+
const scheduleScrollSettle = React77.useCallback(() => {
|
|
19196
19227
|
clearScrollSettleTimeout();
|
|
19197
19228
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19198
19229
|
settleScroll();
|
|
19199
19230
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19200
19231
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19201
|
-
const handleScroll =
|
|
19232
|
+
const handleScroll = React77.useCallback(() => {
|
|
19202
19233
|
if (!mobileListRef.current) return;
|
|
19203
19234
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19204
19235
|
clearScrollAnimationFrame();
|
|
@@ -19208,7 +19239,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19208
19239
|
});
|
|
19209
19240
|
scheduleScrollSettle();
|
|
19210
19241
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19211
|
-
const focusOptionByIndex =
|
|
19242
|
+
const focusOptionByIndex = React77.useCallback(
|
|
19212
19243
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19213
19244
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19214
19245
|
const option = options[index];
|
|
@@ -19226,7 +19257,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19226
19257
|
},
|
|
19227
19258
|
[options, scheduleScrollSettle]
|
|
19228
19259
|
);
|
|
19229
|
-
const handleOptionClick =
|
|
19260
|
+
const handleOptionClick = React77.useCallback(
|
|
19230
19261
|
(option) => {
|
|
19231
19262
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19232
19263
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19235,7 +19266,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19235
19266
|
},
|
|
19236
19267
|
[disabled, focusOptionByIndex, options]
|
|
19237
19268
|
);
|
|
19238
|
-
const moveByStep =
|
|
19269
|
+
const moveByStep = React77.useCallback(
|
|
19239
19270
|
(step) => {
|
|
19240
19271
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19241
19272
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19247,7 +19278,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19247
19278
|
},
|
|
19248
19279
|
[focusOptionByIndex, options, pendingValue]
|
|
19249
19280
|
);
|
|
19250
|
-
const moveToBoundary =
|
|
19281
|
+
const moveToBoundary = React77.useCallback(
|
|
19251
19282
|
(boundary) => {
|
|
19252
19283
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19253
19284
|
if (targetIndex >= 0) {
|
|
@@ -19256,7 +19287,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19256
19287
|
},
|
|
19257
19288
|
[focusOptionByIndex, options]
|
|
19258
19289
|
);
|
|
19259
|
-
const syncPendingValue =
|
|
19290
|
+
const syncPendingValue = React77.useCallback(
|
|
19260
19291
|
(nextValue) => {
|
|
19261
19292
|
const normalizedValue = nextValue ?? null;
|
|
19262
19293
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19284,9 +19315,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19284
19315
|
}
|
|
19285
19316
|
|
|
19286
19317
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19287
|
-
import * as
|
|
19318
|
+
import * as React78 from "react";
|
|
19288
19319
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19289
|
-
const reactId =
|
|
19320
|
+
const reactId = React78.useId().replace(/:/g, "");
|
|
19290
19321
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19291
19322
|
const triggerId = `${baseId}-trigger`;
|
|
19292
19323
|
const labelId = `${baseId}-label`;
|
|
@@ -19296,7 +19327,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19296
19327
|
const listboxId = `${baseId}-listbox`;
|
|
19297
19328
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19298
19329
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19299
|
-
const getOptionId2 =
|
|
19330
|
+
const getOptionId2 = React78.useCallback(
|
|
19300
19331
|
(index) => `${baseId}-option-${index}`,
|
|
19301
19332
|
[baseId]
|
|
19302
19333
|
);
|
|
@@ -19314,8 +19345,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19314
19345
|
}
|
|
19315
19346
|
|
|
19316
19347
|
// src/airbnb-fields/select/Select.tsx
|
|
19317
|
-
import { jsx as
|
|
19318
|
-
var AirbnbSelect =
|
|
19348
|
+
import { jsx as jsx190, jsxs as jsxs122 } from "react/jsx-runtime";
|
|
19349
|
+
var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
19319
19350
|
options = [],
|
|
19320
19351
|
value,
|
|
19321
19352
|
onChange,
|
|
@@ -19342,8 +19373,8 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19342
19373
|
filterOption
|
|
19343
19374
|
}, ref) {
|
|
19344
19375
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19345
|
-
const [isOpen, setIsOpen] =
|
|
19346
|
-
const containerRef =
|
|
19376
|
+
const [isOpen, setIsOpen] = React79.useState(false);
|
|
19377
|
+
const containerRef = React79.useRef(null);
|
|
19347
19378
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19348
19379
|
const hasValue = Boolean(value);
|
|
19349
19380
|
const helperText = placeholder ?? label;
|
|
@@ -19405,12 +19436,12 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19405
19436
|
onOutsideClick: () => setIsOpen(false),
|
|
19406
19437
|
isDisabled: !isOpen || isMobile3
|
|
19407
19438
|
});
|
|
19408
|
-
|
|
19439
|
+
React79.useEffect(() => {
|
|
19409
19440
|
if (isBlocked) {
|
|
19410
19441
|
setIsOpen(false);
|
|
19411
19442
|
}
|
|
19412
19443
|
}, [isBlocked]);
|
|
19413
|
-
|
|
19444
|
+
React79.useEffect(
|
|
19414
19445
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19415
19446
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19416
19447
|
return;
|
|
@@ -19422,7 +19453,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19422
19453
|
},
|
|
19423
19454
|
[onChange, filteredOptions, value]
|
|
19424
19455
|
);
|
|
19425
|
-
const handleMobileOpenChange =
|
|
19456
|
+
const handleMobileOpenChange = React79.useCallback(
|
|
19426
19457
|
(nextOpen) => {
|
|
19427
19458
|
if (isBlocked && nextOpen) return;
|
|
19428
19459
|
setIsOpen(nextOpen);
|
|
@@ -19433,7 +19464,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19433
19464
|
},
|
|
19434
19465
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19435
19466
|
);
|
|
19436
|
-
const handleMobileDone =
|
|
19467
|
+
const handleMobileDone = React79.useCallback(() => {
|
|
19437
19468
|
if (isBlocked) return;
|
|
19438
19469
|
const finalOption = pendingValue;
|
|
19439
19470
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19442,7 +19473,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19442
19473
|
setIsOpen(false);
|
|
19443
19474
|
focusTrigger();
|
|
19444
19475
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19445
|
-
const handleTriggerClick =
|
|
19476
|
+
const handleTriggerClick = React79.useCallback(() => {
|
|
19446
19477
|
if (isBlocked) return;
|
|
19447
19478
|
setIsOpen((prev) => {
|
|
19448
19479
|
const nextOpen = !prev;
|
|
@@ -19501,7 +19532,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19501
19532
|
ref: containerRef,
|
|
19502
19533
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19503
19534
|
children: [
|
|
19504
|
-
name && /* @__PURE__ */
|
|
19535
|
+
name && /* @__PURE__ */ jsx190("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19505
19536
|
renderTrigger ? renderTrigger({
|
|
19506
19537
|
id: triggerId,
|
|
19507
19538
|
open: isOpen,
|
|
@@ -19522,7 +19553,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19522
19553
|
onClick: handleTriggerClick,
|
|
19523
19554
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19524
19555
|
onBlur
|
|
19525
|
-
}) : /* @__PURE__ */
|
|
19556
|
+
}) : /* @__PURE__ */ jsx190(
|
|
19526
19557
|
AirbnbSelectTrigger,
|
|
19527
19558
|
{
|
|
19528
19559
|
id: triggerId,
|
|
@@ -19549,7 +19580,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19549
19580
|
onBlur
|
|
19550
19581
|
}
|
|
19551
19582
|
),
|
|
19552
|
-
isMobile3 ? /* @__PURE__ */
|
|
19583
|
+
isMobile3 ? /* @__PURE__ */ jsx190(
|
|
19553
19584
|
AirbnbSelectMobileContent,
|
|
19554
19585
|
{
|
|
19555
19586
|
open: isOpen,
|
|
@@ -19574,7 +19605,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19574
19605
|
getOptionId: getOptionId2,
|
|
19575
19606
|
noOptionsMessage
|
|
19576
19607
|
}
|
|
19577
|
-
) : /* @__PURE__ */
|
|
19608
|
+
) : /* @__PURE__ */ jsx190(
|
|
19578
19609
|
AirbnbSelectDesktopContent,
|
|
19579
19610
|
{
|
|
19580
19611
|
isOpen,
|
|
@@ -19608,13 +19639,13 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19608
19639
|
});
|
|
19609
19640
|
|
|
19610
19641
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19611
|
-
import { jsx as
|
|
19642
|
+
import { jsx as jsx191, jsxs as jsxs123 } from "react/jsx-runtime";
|
|
19612
19643
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19613
19644
|
const label = String(option.label);
|
|
19614
19645
|
const value = String(option.value);
|
|
19615
19646
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19616
19647
|
}
|
|
19617
|
-
var AirbnbPhoneField =
|
|
19648
|
+
var AirbnbPhoneField = React80.forwardRef(
|
|
19618
19649
|
({
|
|
19619
19650
|
label,
|
|
19620
19651
|
topLabel,
|
|
@@ -19638,9 +19669,9 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19638
19669
|
codePlaceholder = "+00",
|
|
19639
19670
|
defaultCode
|
|
19640
19671
|
}, ref) => {
|
|
19641
|
-
const inputId =
|
|
19672
|
+
const inputId = React80.useId();
|
|
19642
19673
|
const effectiveCode = value?.code || defaultCode || "";
|
|
19643
|
-
const codeOptions =
|
|
19674
|
+
const codeOptions = React80.useMemo(
|
|
19644
19675
|
() => options.map((option) => ({
|
|
19645
19676
|
value: option.value,
|
|
19646
19677
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -19648,7 +19679,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19648
19679
|
})),
|
|
19649
19680
|
[options]
|
|
19650
19681
|
);
|
|
19651
|
-
const selectedCodeOption =
|
|
19682
|
+
const selectedCodeOption = React80.useMemo(
|
|
19652
19683
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
19653
19684
|
[codeOptions, effectiveCode]
|
|
19654
19685
|
);
|
|
@@ -19657,8 +19688,8 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19657
19688
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
19658
19689
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
19659
19690
|
return /* @__PURE__ */ jsxs123("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
19660
|
-
name && /* @__PURE__ */
|
|
19661
|
-
codeName && /* @__PURE__ */
|
|
19691
|
+
name && /* @__PURE__ */ jsx191("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
19692
|
+
codeName && /* @__PURE__ */ jsx191(
|
|
19662
19693
|
"input",
|
|
19663
19694
|
{
|
|
19664
19695
|
type: "hidden",
|
|
@@ -19667,7 +19698,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19667
19698
|
disabled
|
|
19668
19699
|
}
|
|
19669
19700
|
),
|
|
19670
|
-
numberName && /* @__PURE__ */
|
|
19701
|
+
numberName && /* @__PURE__ */ jsx191(
|
|
19671
19702
|
"input",
|
|
19672
19703
|
{
|
|
19673
19704
|
type: "hidden",
|
|
@@ -19676,7 +19707,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19676
19707
|
disabled
|
|
19677
19708
|
}
|
|
19678
19709
|
),
|
|
19679
|
-
topLabel && /* @__PURE__ */
|
|
19710
|
+
topLabel && /* @__PURE__ */ jsx191(
|
|
19680
19711
|
"label",
|
|
19681
19712
|
{
|
|
19682
19713
|
htmlFor: inputId,
|
|
@@ -19685,7 +19716,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19685
19716
|
}
|
|
19686
19717
|
),
|
|
19687
19718
|
/* @__PURE__ */ jsxs123("div", { className: "flex items-stretch", children: [
|
|
19688
|
-
/* @__PURE__ */
|
|
19719
|
+
/* @__PURE__ */ jsx191(
|
|
19689
19720
|
AirbnbSelect,
|
|
19690
19721
|
{
|
|
19691
19722
|
ref,
|
|
@@ -19735,8 +19766,8 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19735
19766
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
19736
19767
|
),
|
|
19737
19768
|
children: [
|
|
19738
|
-
/* @__PURE__ */
|
|
19739
|
-
/* @__PURE__ */
|
|
19769
|
+
/* @__PURE__ */ jsx191("span", { children: valueLabel ?? codePlaceholder }),
|
|
19770
|
+
/* @__PURE__ */ jsx191(
|
|
19740
19771
|
ChevronDown6,
|
|
19741
19772
|
{
|
|
19742
19773
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
@@ -19748,7 +19779,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19748
19779
|
)
|
|
19749
19780
|
}
|
|
19750
19781
|
),
|
|
19751
|
-
/* @__PURE__ */
|
|
19782
|
+
/* @__PURE__ */ jsx191(
|
|
19752
19783
|
AirbnbInput,
|
|
19753
19784
|
{
|
|
19754
19785
|
id: inputId,
|
|
@@ -19777,18 +19808,18 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
19777
19808
|
}
|
|
19778
19809
|
)
|
|
19779
19810
|
] }),
|
|
19780
|
-
error && /* @__PURE__ */
|
|
19811
|
+
error && /* @__PURE__ */ jsx191(FieldErrorMessage, { message: error })
|
|
19781
19812
|
] });
|
|
19782
19813
|
}
|
|
19783
19814
|
);
|
|
19784
19815
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
19785
19816
|
|
|
19786
19817
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
19787
|
-
import * as
|
|
19788
|
-
import { ChevronDown as ChevronDown7, Search as
|
|
19818
|
+
import * as React81 from "react";
|
|
19819
|
+
import { ChevronDown as ChevronDown7, Search as Search5 } from "lucide-react";
|
|
19789
19820
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
19790
19821
|
import { useCallback as useCallback57 } from "react";
|
|
19791
|
-
import { jsx as
|
|
19822
|
+
import { jsx as jsx192, jsxs as jsxs124 } from "react/jsx-runtime";
|
|
19792
19823
|
var ROW_HEIGHT = 48;
|
|
19793
19824
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
19794
19825
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -19828,13 +19859,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19828
19859
|
loadingMessage
|
|
19829
19860
|
}, ref) => {
|
|
19830
19861
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19831
|
-
const reactId =
|
|
19832
|
-
const [open, setOpen] =
|
|
19833
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
19834
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19835
|
-
const containerRef =
|
|
19836
|
-
const triggerRef =
|
|
19837
|
-
const inputRef =
|
|
19862
|
+
const reactId = React81.useId();
|
|
19863
|
+
const [open, setOpen] = React81.useState(false);
|
|
19864
|
+
const [internalSearchValue, setInternalSearchValue] = React81.useState("");
|
|
19865
|
+
const [highlightedIndex, setHighlightedIndex] = React81.useState(-1);
|
|
19866
|
+
const containerRef = React81.useRef(null);
|
|
19867
|
+
const triggerRef = React81.useRef(null);
|
|
19868
|
+
const inputRef = React81.useRef(null);
|
|
19838
19869
|
const listboxId = `${reactId}-listbox`;
|
|
19839
19870
|
const labelId = `${reactId}-label`;
|
|
19840
19871
|
const valueId = `${reactId}-value`;
|
|
@@ -19843,13 +19874,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19843
19874
|
const searchInputId = `${reactId}-search`;
|
|
19844
19875
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
19845
19876
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
19846
|
-
const visibleOptions =
|
|
19877
|
+
const visibleOptions = React81.useMemo(() => {
|
|
19847
19878
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
19848
19879
|
return options;
|
|
19849
19880
|
}
|
|
19850
19881
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
19851
19882
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
19852
|
-
const selectedIndex =
|
|
19883
|
+
const selectedIndex = React81.useMemo(
|
|
19853
19884
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
19854
19885
|
[value?.value, visibleOptions]
|
|
19855
19886
|
);
|
|
@@ -19875,7 +19906,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19875
19906
|
},
|
|
19876
19907
|
[handleOnOpenChange]
|
|
19877
19908
|
);
|
|
19878
|
-
|
|
19909
|
+
React81.useEffect(() => {
|
|
19879
19910
|
if (isBlocked) {
|
|
19880
19911
|
setSelectOpen(false);
|
|
19881
19912
|
return;
|
|
@@ -19888,7 +19919,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19888
19919
|
window.cancelAnimationFrame(frameId);
|
|
19889
19920
|
};
|
|
19890
19921
|
}, [isBlocked, open, setSelectOpen]);
|
|
19891
|
-
|
|
19922
|
+
React81.useEffect(() => {
|
|
19892
19923
|
if (!open) {
|
|
19893
19924
|
setHighlightedIndex(-1);
|
|
19894
19925
|
return;
|
|
@@ -19956,7 +19987,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19956
19987
|
}
|
|
19957
19988
|
}
|
|
19958
19989
|
}
|
|
19959
|
-
const content = /* @__PURE__ */
|
|
19990
|
+
const content = /* @__PURE__ */ jsx192(
|
|
19960
19991
|
AirbnbSearchableSelectContent,
|
|
19961
19992
|
{
|
|
19962
19993
|
inputId: searchInputId,
|
|
@@ -19983,10 +20014,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
19983
20014
|
onOptionHover: setHighlightedIndex
|
|
19984
20015
|
}
|
|
19985
20016
|
);
|
|
19986
|
-
|
|
20017
|
+
React81.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
19987
20018
|
return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
19988
|
-
name && /* @__PURE__ */
|
|
19989
|
-
/* @__PURE__ */
|
|
20019
|
+
name && /* @__PURE__ */ jsx192("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
20020
|
+
/* @__PURE__ */ jsx192(
|
|
19990
20021
|
AirbnbFieldTrigger,
|
|
19991
20022
|
{
|
|
19992
20023
|
id: `${reactId}-trigger`,
|
|
@@ -20020,7 +20051,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20020
20051
|
},
|
|
20021
20052
|
onKeyDown: handleTriggerKeyDown,
|
|
20022
20053
|
onBlur,
|
|
20023
|
-
trailingAdornment: /* @__PURE__ */
|
|
20054
|
+
trailingAdornment: /* @__PURE__ */ jsx192(
|
|
20024
20055
|
ChevronDown7,
|
|
20025
20056
|
{
|
|
20026
20057
|
className: cn(
|
|
@@ -20031,7 +20062,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20031
20062
|
)
|
|
20032
20063
|
}
|
|
20033
20064
|
),
|
|
20034
|
-
isMobile3 ? /* @__PURE__ */
|
|
20065
|
+
isMobile3 ? /* @__PURE__ */ jsx192(
|
|
20035
20066
|
Drawer,
|
|
20036
20067
|
{
|
|
20037
20068
|
open,
|
|
@@ -20044,12 +20075,12 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20044
20075
|
closeSelect();
|
|
20045
20076
|
},
|
|
20046
20077
|
children: /* @__PURE__ */ jsxs124(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
20047
|
-
/* @__PURE__ */
|
|
20048
|
-
/* @__PURE__ */
|
|
20049
|
-
/* @__PURE__ */
|
|
20078
|
+
/* @__PURE__ */ jsx192(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
20079
|
+
/* @__PURE__ */ jsx192(DrawerDescription, { className: "sr-only", children: label }),
|
|
20080
|
+
/* @__PURE__ */ jsx192("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
20050
20081
|
] })
|
|
20051
20082
|
}
|
|
20052
|
-
) : open ? /* @__PURE__ */
|
|
20083
|
+
) : open ? /* @__PURE__ */ jsx192(
|
|
20053
20084
|
"div",
|
|
20054
20085
|
{
|
|
20055
20086
|
className: cn(
|
|
@@ -20061,7 +20092,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20061
20092
|
) : null
|
|
20062
20093
|
] });
|
|
20063
20094
|
};
|
|
20064
|
-
var AirbnbSearchableSelect =
|
|
20095
|
+
var AirbnbSearchableSelect = React81.forwardRef(
|
|
20065
20096
|
AirbnbSearchableSelectInternal
|
|
20066
20097
|
);
|
|
20067
20098
|
function AirbnbSearchableSelectContent({
|
|
@@ -20088,9 +20119,9 @@ function AirbnbSearchableSelectContent({
|
|
|
20088
20119
|
onOptionClick,
|
|
20089
20120
|
onOptionHover
|
|
20090
20121
|
}) {
|
|
20091
|
-
const listRef =
|
|
20092
|
-
const lastLoadMoreOptionsLengthRef =
|
|
20093
|
-
const previousHighlightedIndexRef =
|
|
20122
|
+
const listRef = React81.useRef(null);
|
|
20123
|
+
const lastLoadMoreOptionsLengthRef = React81.useRef(null);
|
|
20124
|
+
const previousHighlightedIndexRef = React81.useRef(highlightedIndex);
|
|
20094
20125
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
20095
20126
|
const virtualizer = useVirtualizer3({
|
|
20096
20127
|
count: rowCount,
|
|
@@ -20101,7 +20132,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20101
20132
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20102
20133
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20103
20134
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20104
|
-
|
|
20135
|
+
React81.useEffect(() => {
|
|
20105
20136
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20106
20137
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20107
20138
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20109,7 +20140,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20109
20140
|
onLoadMore?.();
|
|
20110
20141
|
}
|
|
20111
20142
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20112
|
-
|
|
20143
|
+
React81.useEffect(() => {
|
|
20113
20144
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20114
20145
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20115
20146
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
@@ -20118,14 +20149,14 @@ function AirbnbSearchableSelectContent({
|
|
|
20118
20149
|
}, [highlightedIndex, virtualizer]);
|
|
20119
20150
|
return /* @__PURE__ */ jsxs124("div", { className: "p-2", children: [
|
|
20120
20151
|
/* @__PURE__ */ jsxs124("div", { className: "relative mb-2", children: [
|
|
20121
|
-
/* @__PURE__ */
|
|
20122
|
-
|
|
20152
|
+
/* @__PURE__ */ jsx192(
|
|
20153
|
+
Search5,
|
|
20123
20154
|
{
|
|
20124
20155
|
"aria-hidden": "true",
|
|
20125
20156
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
20126
20157
|
}
|
|
20127
20158
|
),
|
|
20128
|
-
/* @__PURE__ */
|
|
20159
|
+
/* @__PURE__ */ jsx192(
|
|
20129
20160
|
"input",
|
|
20130
20161
|
{
|
|
20131
20162
|
id: inputId,
|
|
@@ -20144,7 +20175,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20144
20175
|
}
|
|
20145
20176
|
)
|
|
20146
20177
|
] }),
|
|
20147
|
-
loading && options.length === 0 ? /* @__PURE__ */
|
|
20178
|
+
loading && options.length === 0 ? /* @__PURE__ */ jsx192("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx192("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx192(
|
|
20148
20179
|
"div",
|
|
20149
20180
|
{
|
|
20150
20181
|
id: listboxId,
|
|
@@ -20153,7 +20184,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20153
20184
|
"aria-labelledby": labelId,
|
|
20154
20185
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
20155
20186
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
20156
|
-
children: /* @__PURE__ */
|
|
20187
|
+
children: /* @__PURE__ */ jsx192(
|
|
20157
20188
|
"div",
|
|
20158
20189
|
{
|
|
20159
20190
|
className: "relative w-full",
|
|
@@ -20161,7 +20192,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20161
20192
|
children: virtualItems.map((virtualItem) => {
|
|
20162
20193
|
const option = options[virtualItem.index];
|
|
20163
20194
|
if (!option) {
|
|
20164
|
-
return /* @__PURE__ */
|
|
20195
|
+
return /* @__PURE__ */ jsx192(
|
|
20165
20196
|
"div",
|
|
20166
20197
|
{
|
|
20167
20198
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -20176,7 +20207,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20176
20207
|
}
|
|
20177
20208
|
const isSelected = value?.value === option.value;
|
|
20178
20209
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
20179
|
-
return /* @__PURE__ */
|
|
20210
|
+
return /* @__PURE__ */ jsx192(
|
|
20180
20211
|
"button",
|
|
20181
20212
|
{
|
|
20182
20213
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -20198,7 +20229,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20198
20229
|
height: `${virtualItem.size}px`,
|
|
20199
20230
|
transform: `translateY(${virtualItem.start}px)`
|
|
20200
20231
|
},
|
|
20201
|
-
children: /* @__PURE__ */
|
|
20232
|
+
children: /* @__PURE__ */ jsx192("span", { className: "truncate text-center", children: String(option.label) })
|
|
20202
20233
|
},
|
|
20203
20234
|
`${String(option.value)}-${virtualItem.index}`
|
|
20204
20235
|
);
|
|
@@ -20227,16 +20258,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20227
20258
|
}
|
|
20228
20259
|
|
|
20229
20260
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20230
|
-
import * as
|
|
20261
|
+
import * as React82 from "react";
|
|
20231
20262
|
import { useTranslation as useTranslation44 } from "react-i18next";
|
|
20232
|
-
import { Search as
|
|
20233
|
-
import { jsx as
|
|
20234
|
-
var AirbnbSearchInput =
|
|
20263
|
+
import { Search as Search6, X as X11 } from "lucide-react";
|
|
20264
|
+
import { jsx as jsx193, jsxs as jsxs125 } from "react/jsx-runtime";
|
|
20265
|
+
var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20235
20266
|
const { t } = useTranslation44();
|
|
20236
20267
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20237
20268
|
return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
20238
|
-
/* @__PURE__ */
|
|
20239
|
-
/* @__PURE__ */
|
|
20269
|
+
/* @__PURE__ */ jsx193(Search6, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
|
|
20270
|
+
/* @__PURE__ */ jsx193(
|
|
20240
20271
|
"input",
|
|
20241
20272
|
{
|
|
20242
20273
|
...props,
|
|
@@ -20255,13 +20286,13 @@ var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20255
20286
|
)
|
|
20256
20287
|
}
|
|
20257
20288
|
),
|
|
20258
|
-
onReset && /* @__PURE__ */
|
|
20289
|
+
onReset && /* @__PURE__ */ jsx193(
|
|
20259
20290
|
Button,
|
|
20260
20291
|
{
|
|
20261
20292
|
variant: "ghost",
|
|
20262
20293
|
onClick: onReset,
|
|
20263
20294
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
20264
|
-
children: /* @__PURE__ */
|
|
20295
|
+
children: /* @__PURE__ */ jsx193(X11, { className: "h-5 w-5" })
|
|
20265
20296
|
}
|
|
20266
20297
|
)
|
|
20267
20298
|
] });
|
|
@@ -20269,11 +20300,11 @@ var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20269
20300
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20270
20301
|
|
|
20271
20302
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20272
|
-
import * as
|
|
20303
|
+
import * as React83 from "react";
|
|
20273
20304
|
import * as SwitchPrimitives2 from "@radix-ui/react-switch";
|
|
20274
20305
|
import { Check as Check8 } from "lucide-react";
|
|
20275
|
-
import { Fragment as Fragment18, jsx as
|
|
20276
|
-
var AirbnbSwitch =
|
|
20306
|
+
import { Fragment as Fragment18, jsx as jsx194, jsxs as jsxs126 } from "react/jsx-runtime";
|
|
20307
|
+
var AirbnbSwitch = React83.forwardRef(
|
|
20277
20308
|
({
|
|
20278
20309
|
className,
|
|
20279
20310
|
value,
|
|
@@ -20287,9 +20318,9 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20287
20318
|
wrapperClassName,
|
|
20288
20319
|
...props
|
|
20289
20320
|
}, ref) => {
|
|
20290
|
-
const generatedId =
|
|
20321
|
+
const generatedId = React83.useId();
|
|
20291
20322
|
const fieldId = id || generatedId;
|
|
20292
|
-
const switchElement = /* @__PURE__ */
|
|
20323
|
+
const switchElement = /* @__PURE__ */ jsx194(
|
|
20293
20324
|
SwitchPrimitives2.Root,
|
|
20294
20325
|
{
|
|
20295
20326
|
ref,
|
|
@@ -20309,14 +20340,14 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20309
20340
|
"aria-busy": loading,
|
|
20310
20341
|
"aria-readonly": readOnly,
|
|
20311
20342
|
...props,
|
|
20312
|
-
children: /* @__PURE__ */
|
|
20343
|
+
children: /* @__PURE__ */ jsx194(
|
|
20313
20344
|
SwitchPrimitives2.Thumb,
|
|
20314
20345
|
{
|
|
20315
20346
|
className: cn(
|
|
20316
20347
|
"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",
|
|
20317
20348
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
20318
20349
|
),
|
|
20319
|
-
children: /* @__PURE__ */
|
|
20350
|
+
children: /* @__PURE__ */ jsx194(
|
|
20320
20351
|
Check8,
|
|
20321
20352
|
{
|
|
20322
20353
|
"aria-hidden": "true",
|
|
@@ -20334,7 +20365,7 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20334
20365
|
return /* @__PURE__ */ jsxs126(Fragment18, { children: [
|
|
20335
20366
|
/* @__PURE__ */ jsxs126("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
|
|
20336
20367
|
switchElement,
|
|
20337
|
-
label && /* @__PURE__ */
|
|
20368
|
+
label && /* @__PURE__ */ jsx194(
|
|
20338
20369
|
Label,
|
|
20339
20370
|
{
|
|
20340
20371
|
htmlFor: fieldId,
|
|
@@ -20346,7 +20377,7 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20346
20377
|
}
|
|
20347
20378
|
)
|
|
20348
20379
|
] }),
|
|
20349
|
-
error && /* @__PURE__ */
|
|
20380
|
+
error && /* @__PURE__ */ jsx194(ErrorMessage, { disabled, children: error })
|
|
20350
20381
|
] });
|
|
20351
20382
|
}
|
|
20352
20383
|
);
|
|
@@ -20413,6 +20444,7 @@ export {
|
|
|
20413
20444
|
CommingSoonBadge,
|
|
20414
20445
|
ConfirmationDialog,
|
|
20415
20446
|
CopyIcon,
|
|
20447
|
+
CopyInput,
|
|
20416
20448
|
CopyLinkButton,
|
|
20417
20449
|
CopyString,
|
|
20418
20450
|
Counter,
|