@chekinapp/ui 0.0.143 → 0.0.145
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.cjs
CHANGED
|
@@ -91,6 +91,7 @@ __export(index_exports, {
|
|
|
91
91
|
CommingSoonBadge: () => CommingSoonBadge,
|
|
92
92
|
ConfirmationDialog: () => ConfirmationDialog,
|
|
93
93
|
CopyIcon: () => CopyIcon,
|
|
94
|
+
CopyInput: () => CopyInput,
|
|
94
95
|
CopyLinkButton: () => CopyLinkButton,
|
|
95
96
|
CopyString: () => CopyString,
|
|
96
97
|
Counter: () => Counter,
|
|
@@ -12335,7 +12336,7 @@ function Fieldset({
|
|
|
12335
12336
|
htmlFor,
|
|
12336
12337
|
className: cn(
|
|
12337
12338
|
"block cursor-[inherit] truncate transition-all duration-100 ease-in",
|
|
12338
|
-
raised ? "text-[
|
|
12339
|
+
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)]"
|
|
12339
12340
|
),
|
|
12340
12341
|
children: label
|
|
12341
12342
|
}
|
|
@@ -12357,10 +12358,10 @@ function Fieldset({
|
|
|
12357
12358
|
"aria-hidden": "true",
|
|
12358
12359
|
className: cn(
|
|
12359
12360
|
"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",
|
|
12360
|
-
"border-[var(--
|
|
12361
|
-
isActivated && "border-[var(--
|
|
12362
|
-
isFocused && "border-[var(--
|
|
12363
|
-
invalid && "border-[var(--
|
|
12361
|
+
"border-[var(--field-border)]",
|
|
12362
|
+
isActivated && "border-[var(--field-border-activated)]",
|
|
12363
|
+
isFocused && "border-[var(--field-border-focused)]",
|
|
12364
|
+
invalid && "border-[var(--field-border-invalid)]",
|
|
12364
12365
|
className
|
|
12365
12366
|
),
|
|
12366
12367
|
children: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
|
|
@@ -12377,8 +12378,8 @@ function Fieldset({
|
|
|
12377
12378
|
"span",
|
|
12378
12379
|
{
|
|
12379
12380
|
className: cn(
|
|
12380
|
-
"visible inline-block px-1 text-[
|
|
12381
|
-
raised ? "font-
|
|
12381
|
+
"visible inline-block px-1 text-[length:var(--field-label-raised-font-size)] opacity-0",
|
|
12382
|
+
raised ? "font-[var(--field-label-raised-font-weight)]" : "font-[var(--field-label-font-weight)]"
|
|
12382
12383
|
),
|
|
12383
12384
|
children: legend || label
|
|
12384
12385
|
}
|
|
@@ -12507,7 +12508,7 @@ var Input = React44.forwardRef(
|
|
|
12507
12508
|
"label",
|
|
12508
12509
|
{
|
|
12509
12510
|
htmlFor: inputId,
|
|
12510
|
-
className: "input__top-label mb-2 block text-[
|
|
12511
|
+
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)]",
|
|
12511
12512
|
children: topLabel
|
|
12512
12513
|
}
|
|
12513
12514
|
),
|
|
@@ -12668,13 +12669,42 @@ var Input = React44.forwardRef(
|
|
|
12668
12669
|
);
|
|
12669
12670
|
Input.displayName = "Input";
|
|
12670
12671
|
|
|
12672
|
+
// src/dashboard/copy-input/CopyInput.tsx
|
|
12673
|
+
var React45 = __toESM(require("react"), 1);
|
|
12674
|
+
var import_jsx_runtime145 = require("react/jsx-runtime");
|
|
12675
|
+
var CopyInput = React45.forwardRef(
|
|
12676
|
+
({ value = "", copyTooltip, copySize, copyVariant = "ghost", onCopy, ...props }, ref) => {
|
|
12677
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
|
|
12678
|
+
Input,
|
|
12679
|
+
{
|
|
12680
|
+
...props,
|
|
12681
|
+
ref,
|
|
12682
|
+
value,
|
|
12683
|
+
readOnly: true,
|
|
12684
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("span", { className: "pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
|
|
12685
|
+
CopyIcon,
|
|
12686
|
+
{
|
|
12687
|
+
textToCopy: value,
|
|
12688
|
+
tooltipText: copyTooltip,
|
|
12689
|
+
size: copySize,
|
|
12690
|
+
variant: copyVariant,
|
|
12691
|
+
onClick: onCopy
|
|
12692
|
+
}
|
|
12693
|
+
) }),
|
|
12694
|
+
inputClassName: cn("pr-12", props.inputClassName)
|
|
12695
|
+
}
|
|
12696
|
+
);
|
|
12697
|
+
}
|
|
12698
|
+
);
|
|
12699
|
+
CopyInput.displayName = "CopyInput";
|
|
12700
|
+
|
|
12671
12701
|
// src/dashboard/phone-input/PhoneInput.tsx
|
|
12672
|
-
var
|
|
12702
|
+
var React51 = __toESM(require("react"), 1);
|
|
12673
12703
|
var import_react_i18next33 = require("react-i18next");
|
|
12674
12704
|
|
|
12675
12705
|
// src/dashboard/_select-internals/SelectFieldShell.tsx
|
|
12676
12706
|
var import_react_i18next26 = require("react-i18next");
|
|
12677
|
-
var
|
|
12707
|
+
var import_jsx_runtime146 = require("react/jsx-runtime");
|
|
12678
12708
|
var FOCUSABLE_TRIGGER_SELECTOR = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
12679
12709
|
function SelectFieldShell({
|
|
12680
12710
|
containerRef,
|
|
@@ -12703,7 +12733,7 @@ function SelectFieldShell({
|
|
|
12703
12733
|
);
|
|
12704
12734
|
focusable?.focus();
|
|
12705
12735
|
};
|
|
12706
|
-
return /* @__PURE__ */ (0,
|
|
12736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
|
|
12707
12737
|
"div",
|
|
12708
12738
|
{
|
|
12709
12739
|
ref: containerRef,
|
|
@@ -12718,20 +12748,20 @@ function SelectFieldShell({
|
|
|
12718
12748
|
),
|
|
12719
12749
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
12720
12750
|
children: [
|
|
12721
|
-
name && /* @__PURE__ */ (0,
|
|
12722
|
-
/* @__PURE__ */ (0,
|
|
12723
|
-
topLabel && /* @__PURE__ */ (0,
|
|
12751
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("input", { type: "hidden", name, value: hiddenValue ?? "" }),
|
|
12752
|
+
/* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
12753
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
|
|
12724
12754
|
"label",
|
|
12725
12755
|
{
|
|
12726
12756
|
htmlFor: triggerId,
|
|
12727
|
-
className: "mb-2 block text-[
|
|
12757
|
+
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)]",
|
|
12728
12758
|
children: topLabel
|
|
12729
12759
|
}
|
|
12730
12760
|
),
|
|
12731
|
-
/* @__PURE__ */ (0,
|
|
12732
|
-
!errorMessage && optional && /* @__PURE__ */ (0,
|
|
12733
|
-
!errorMessage && helperText && /* @__PURE__ */ (0,
|
|
12734
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
12761
|
+
/* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: "relative w-full", children }),
|
|
12762
|
+
!errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
12763
|
+
!errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
12764
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
|
|
12735
12765
|
FieldErrorMessage,
|
|
12736
12766
|
{
|
|
12737
12767
|
id: errorId,
|
|
@@ -12747,7 +12777,7 @@ function SelectFieldShell({
|
|
|
12747
12777
|
}
|
|
12748
12778
|
|
|
12749
12779
|
// src/dashboard/_select-internals/SelectMenu.tsx
|
|
12750
|
-
var
|
|
12780
|
+
var React46 = __toESM(require("react"), 1);
|
|
12751
12781
|
var import_react_i18next27 = require("react-i18next");
|
|
12752
12782
|
|
|
12753
12783
|
// src/dashboard/_select-internals/utils.ts
|
|
@@ -12842,7 +12872,7 @@ function countriesFilter(option, inputValue) {
|
|
|
12842
12872
|
|
|
12843
12873
|
// src/dashboard/_select-internals/slots/DefaultOption.tsx
|
|
12844
12874
|
var import_lucide_react42 = require("lucide-react");
|
|
12845
|
-
var
|
|
12875
|
+
var import_jsx_runtime147 = require("react/jsx-runtime");
|
|
12846
12876
|
function DefaultOption(props) {
|
|
12847
12877
|
const {
|
|
12848
12878
|
option,
|
|
@@ -12864,7 +12894,7 @@ function DefaultOption(props) {
|
|
|
12864
12894
|
inputValue,
|
|
12865
12895
|
selectValue: selectedOptions
|
|
12866
12896
|
}) : option.label;
|
|
12867
|
-
return /* @__PURE__ */ (0,
|
|
12897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
|
|
12868
12898
|
"button",
|
|
12869
12899
|
{
|
|
12870
12900
|
id,
|
|
@@ -12885,9 +12915,9 @@ function DefaultOption(props) {
|
|
|
12885
12915
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
12886
12916
|
),
|
|
12887
12917
|
children: [
|
|
12888
|
-
/* @__PURE__ */ (0,
|
|
12889
|
-
option.description && /* @__PURE__ */ (0,
|
|
12890
|
-
isSelected && /* @__PURE__ */ (0,
|
|
12918
|
+
/* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "block min-w-0 break-words", children: labelContent }),
|
|
12919
|
+
option.description && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "ml-auto shrink-0 self-center text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description }),
|
|
12920
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
|
|
12891
12921
|
import_lucide_react42.Check,
|
|
12892
12922
|
{
|
|
12893
12923
|
"aria-hidden": "true",
|
|
@@ -12904,7 +12934,7 @@ function DefaultOption(props) {
|
|
|
12904
12934
|
}
|
|
12905
12935
|
|
|
12906
12936
|
// src/dashboard/_select-internals/SelectMenu.tsx
|
|
12907
|
-
var
|
|
12937
|
+
var import_jsx_runtime148 = require("react/jsx-runtime");
|
|
12908
12938
|
function buildMenuEntries(groupedOptions, options, formatGroupLabel, listboxId) {
|
|
12909
12939
|
if (!groupedOptions || !groupedOptions.some((item) => isOptionGroup(item))) {
|
|
12910
12940
|
return options.map((option, index) => ({
|
|
@@ -12985,11 +13015,11 @@ function SelectMenu({
|
|
|
12985
13015
|
const hasOptions = options.length > 0;
|
|
12986
13016
|
const Option = components?.Option ?? DefaultOption;
|
|
12987
13017
|
const lastIndex = options.length - 1;
|
|
12988
|
-
const selectedList =
|
|
13018
|
+
const selectedList = React46.useMemo(
|
|
12989
13019
|
() => selectedValues ?? (selectedValue ? [selectedValue] : []),
|
|
12990
13020
|
[selectedValues, selectedValue]
|
|
12991
13021
|
);
|
|
12992
|
-
const entries =
|
|
13022
|
+
const entries = React46.useMemo(
|
|
12993
13023
|
() => buildMenuEntries(groupedOptions, options, formatGroupLabel, id),
|
|
12994
13024
|
[groupedOptions, options, formatGroupLabel, id]
|
|
12995
13025
|
);
|
|
@@ -13000,7 +13030,7 @@ function SelectMenu({
|
|
|
13000
13030
|
const optionDisabled = Boolean(
|
|
13001
13031
|
disabled || option.isDisabled || isOptionDisabled?.(option)
|
|
13002
13032
|
);
|
|
13003
|
-
return /* @__PURE__ */ (0,
|
|
13033
|
+
return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
|
|
13004
13034
|
Option,
|
|
13005
13035
|
{
|
|
13006
13036
|
id: getOptionId2(flatIndex),
|
|
@@ -13021,8 +13051,8 @@ function SelectMenu({
|
|
|
13021
13051
|
key
|
|
13022
13052
|
);
|
|
13023
13053
|
};
|
|
13024
|
-
const wasAtBottomRef =
|
|
13025
|
-
const handleScroll =
|
|
13054
|
+
const wasAtBottomRef = React46.useRef(false);
|
|
13055
|
+
const handleScroll = React46.useCallback(
|
|
13026
13056
|
(event) => {
|
|
13027
13057
|
if (!onMenuScrollToBottom) return;
|
|
13028
13058
|
const target = event.currentTarget;
|
|
@@ -13034,7 +13064,7 @@ function SelectMenu({
|
|
|
13034
13064
|
},
|
|
13035
13065
|
[onMenuScrollToBottom]
|
|
13036
13066
|
);
|
|
13037
|
-
return /* @__PURE__ */ (0,
|
|
13067
|
+
return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
|
|
13038
13068
|
"div",
|
|
13039
13069
|
{
|
|
13040
13070
|
id,
|
|
@@ -13053,11 +13083,11 @@ function SelectMenu({
|
|
|
13053
13083
|
menuClassName
|
|
13054
13084
|
),
|
|
13055
13085
|
children: [
|
|
13056
|
-
!hasOptions && (emptyContent ?? /* @__PURE__ */ (0,
|
|
13086
|
+
!hasOptions && (emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "px-3 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: emptyMessage })),
|
|
13057
13087
|
entries.map((entry) => {
|
|
13058
13088
|
if (entry.kind === "group") {
|
|
13059
|
-
return /* @__PURE__ */ (0,
|
|
13060
|
-
/* @__PURE__ */ (0,
|
|
13089
|
+
return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { role: "group", "aria-labelledby": entry.labelId, children: [
|
|
13090
|
+
/* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
|
|
13061
13091
|
"div",
|
|
13062
13092
|
{
|
|
13063
13093
|
id: entry.labelId,
|
|
@@ -13078,7 +13108,7 @@ function SelectMenu({
|
|
|
13078
13108
|
|
|
13079
13109
|
// src/dashboard/_select-internals/SelectMenuPanel.tsx
|
|
13080
13110
|
var import_react_i18next28 = require("react-i18next");
|
|
13081
|
-
var
|
|
13111
|
+
var import_jsx_runtime149 = require("react/jsx-runtime");
|
|
13082
13112
|
function SelectMenuPanel({
|
|
13083
13113
|
isOpen,
|
|
13084
13114
|
isMobile: isMobile3,
|
|
@@ -13096,23 +13126,23 @@ function SelectMenuPanel({
|
|
|
13096
13126
|
const fallbackTitle = t("select_option");
|
|
13097
13127
|
const titleText = typeof title === "string" || typeof title === "number" ? String(title) : fallbackTitle;
|
|
13098
13128
|
const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : titleText;
|
|
13099
|
-
return /* @__PURE__ */ (0,
|
|
13129
|
+
return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
|
|
13100
13130
|
Drawer,
|
|
13101
13131
|
{
|
|
13102
13132
|
open: isOpen,
|
|
13103
13133
|
onOpenChange: (next) => {
|
|
13104
13134
|
if (!next) onClose();
|
|
13105
13135
|
},
|
|
13106
|
-
children: /* @__PURE__ */ (0,
|
|
13136
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)(
|
|
13107
13137
|
DrawerContent,
|
|
13108
13138
|
{
|
|
13109
13139
|
onClose,
|
|
13110
13140
|
lockScroll: false,
|
|
13111
13141
|
className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
|
|
13112
13142
|
children: [
|
|
13113
|
-
/* @__PURE__ */ (0,
|
|
13114
|
-
/* @__PURE__ */ (0,
|
|
13115
|
-
/* @__PURE__ */ (0,
|
|
13143
|
+
/* @__PURE__ */ (0, import_jsx_runtime149.jsx)(DrawerTitle, { className: "sr-only", children: titleText }),
|
|
13144
|
+
/* @__PURE__ */ (0, import_jsx_runtime149.jsx)(DrawerDescription, { className: "sr-only", children: descriptionText }),
|
|
13145
|
+
/* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
|
|
13116
13146
|
"div",
|
|
13117
13147
|
{
|
|
13118
13148
|
className: cn(
|
|
@@ -13128,7 +13158,7 @@ function SelectMenuPanel({
|
|
|
13128
13158
|
}
|
|
13129
13159
|
);
|
|
13130
13160
|
}
|
|
13131
|
-
return /* @__PURE__ */ (0,
|
|
13161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
|
|
13132
13162
|
"div",
|
|
13133
13163
|
{
|
|
13134
13164
|
className: cn(
|
|
@@ -13142,7 +13172,7 @@ function SelectMenuPanel({
|
|
|
13142
13172
|
|
|
13143
13173
|
// src/dashboard/_select-internals/SelectSearchInput.tsx
|
|
13144
13174
|
var import_lucide_react43 = require("lucide-react");
|
|
13145
|
-
var
|
|
13175
|
+
var import_jsx_runtime150 = require("react/jsx-runtime");
|
|
13146
13176
|
function SelectSearchInput({
|
|
13147
13177
|
inputRef,
|
|
13148
13178
|
value,
|
|
@@ -13152,15 +13182,15 @@ function SelectSearchInput({
|
|
|
13152
13182
|
onChange,
|
|
13153
13183
|
onKeyDown
|
|
13154
13184
|
}) {
|
|
13155
|
-
return /* @__PURE__ */ (0,
|
|
13156
|
-
/* @__PURE__ */ (0,
|
|
13185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { className: "border-b border-[var(--chekin-color-gray-3)] bg-white p-2", children: /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "relative", children: [
|
|
13186
|
+
/* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
|
|
13157
13187
|
import_lucide_react43.Search,
|
|
13158
13188
|
{
|
|
13159
13189
|
"aria-hidden": "true",
|
|
13160
13190
|
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)]"
|
|
13161
13191
|
}
|
|
13162
13192
|
),
|
|
13163
|
-
/* @__PURE__ */ (0,
|
|
13193
|
+
/* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
|
|
13164
13194
|
"input",
|
|
13165
13195
|
{
|
|
13166
13196
|
ref: inputRef,
|
|
@@ -13180,7 +13210,7 @@ function SelectSearchInput({
|
|
|
13180
13210
|
|
|
13181
13211
|
// src/dashboard/_select-internals/SelectTrigger.tsx
|
|
13182
13212
|
var import_lucide_react44 = require("lucide-react");
|
|
13183
|
-
var
|
|
13213
|
+
var import_jsx_runtime151 = require("react/jsx-runtime");
|
|
13184
13214
|
function SelectTrigger({
|
|
13185
13215
|
triggerRef,
|
|
13186
13216
|
triggerId,
|
|
@@ -13207,7 +13237,7 @@ function SelectTrigger({
|
|
|
13207
13237
|
onFocus
|
|
13208
13238
|
}) {
|
|
13209
13239
|
const isEmpty = !hasValue;
|
|
13210
|
-
return /* @__PURE__ */ (0,
|
|
13240
|
+
return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)(
|
|
13211
13241
|
"button",
|
|
13212
13242
|
{
|
|
13213
13243
|
id: triggerId,
|
|
@@ -13235,9 +13265,9 @@ function SelectTrigger({
|
|
|
13235
13265
|
loading && "!cursor-progress"
|
|
13236
13266
|
),
|
|
13237
13267
|
children: [
|
|
13238
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
13239
|
-
/* @__PURE__ */ (0,
|
|
13240
|
-
/* @__PURE__ */ (0,
|
|
13268
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
13269
|
+
/* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: hasValue ? valueLabel : showPlaceholderWhenIdle || isOpen ? placeholder : null }),
|
|
13270
|
+
/* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: "flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
|
|
13241
13271
|
import_lucide_react44.ChevronDown,
|
|
13242
13272
|
{
|
|
13243
13273
|
size: 16,
|
|
@@ -13255,7 +13285,7 @@ function SelectTrigger({
|
|
|
13255
13285
|
// src/dashboard/_select-internals/ComboboxTrigger.tsx
|
|
13256
13286
|
var import_lucide_react45 = require("lucide-react");
|
|
13257
13287
|
var import_react_i18next29 = require("react-i18next");
|
|
13258
|
-
var
|
|
13288
|
+
var import_jsx_runtime152 = require("react/jsx-runtime");
|
|
13259
13289
|
function ComboboxTrigger({
|
|
13260
13290
|
triggerId,
|
|
13261
13291
|
listboxId,
|
|
@@ -13299,7 +13329,7 @@ function ComboboxTrigger({
|
|
|
13299
13329
|
const visiblePlaceholder = searchable && (showPlaceholderWhenIdle || isFocused || isOpen) ? resolvedPlaceholder : "";
|
|
13300
13330
|
const inputMeasureValue = inputValue || visiblePlaceholder || " ";
|
|
13301
13331
|
const activeOptionId = isOpen && highlightedIndex !== void 0 && highlightedIndex >= 0 && getOptionId2 ? getOptionId2(highlightedIndex) : void 0;
|
|
13302
|
-
return /* @__PURE__ */ (0,
|
|
13332
|
+
return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
|
|
13303
13333
|
"div",
|
|
13304
13334
|
{
|
|
13305
13335
|
role: "combobox",
|
|
@@ -13323,18 +13353,19 @@ function ComboboxTrigger({
|
|
|
13323
13353
|
containerClassName
|
|
13324
13354
|
),
|
|
13325
13355
|
children: [
|
|
13326
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
13327
|
-
/* @__PURE__ */ (0,
|
|
13356
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
13357
|
+
!leftIcon && searchable && (isFocused || isOpen) && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_lucide_react45.Search, { size: 16, "aria-hidden": "true" }) }) }),
|
|
13358
|
+
/* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
|
|
13328
13359
|
"div",
|
|
13329
13360
|
{
|
|
13330
13361
|
className: cn(
|
|
13331
13362
|
"flex min-w-0 flex-1 items-center gap-2 py-[10px]",
|
|
13332
|
-
leftIcon ? "pl-10" : "pl-4",
|
|
13363
|
+
leftIcon || searchable && (isFocused || isOpen) ? "pl-10" : "pl-4",
|
|
13333
13364
|
isMulti && "flex-wrap"
|
|
13334
13365
|
),
|
|
13335
13366
|
children: [
|
|
13336
13367
|
leadingContent,
|
|
13337
|
-
/* @__PURE__ */ (0,
|
|
13368
|
+
/* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
|
|
13338
13369
|
"span",
|
|
13339
13370
|
{
|
|
13340
13371
|
className: cn(
|
|
@@ -13343,7 +13374,7 @@ function ComboboxTrigger({
|
|
|
13343
13374
|
!searchable && "sr-only"
|
|
13344
13375
|
),
|
|
13345
13376
|
children: [
|
|
13346
|
-
/* @__PURE__ */ (0,
|
|
13377
|
+
/* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
|
|
13347
13378
|
"span",
|
|
13348
13379
|
{
|
|
13349
13380
|
"aria-hidden": "true",
|
|
@@ -13351,7 +13382,7 @@ function ComboboxTrigger({
|
|
|
13351
13382
|
children: inputMeasureValue
|
|
13352
13383
|
}
|
|
13353
13384
|
),
|
|
13354
|
-
/* @__PURE__ */ (0,
|
|
13385
|
+
/* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
|
|
13355
13386
|
"input",
|
|
13356
13387
|
{
|
|
13357
13388
|
ref: inputRef,
|
|
@@ -13385,18 +13416,18 @@ function ComboboxTrigger({
|
|
|
13385
13416
|
]
|
|
13386
13417
|
}
|
|
13387
13418
|
),
|
|
13388
|
-
/* @__PURE__ */ (0,
|
|
13389
|
-
showClear && /* @__PURE__ */ (0,
|
|
13419
|
+
/* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("span", { className: "flex h-12 shrink-0 items-center gap-2 self-start pl-2 pr-4 text-[var(--chekin-color-gray-2)]", children: [
|
|
13420
|
+
showClear && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
|
|
13390
13421
|
"button",
|
|
13391
13422
|
{
|
|
13392
13423
|
type: "button",
|
|
13393
13424
|
onClick: onClear,
|
|
13394
13425
|
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]",
|
|
13395
13426
|
"aria-label": clearLabel,
|
|
13396
|
-
children: /* @__PURE__ */ (0,
|
|
13427
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_lucide_react45.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
13397
13428
|
}
|
|
13398
13429
|
),
|
|
13399
|
-
!hideIndicator && /* @__PURE__ */ (0,
|
|
13430
|
+
!hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
|
|
13400
13431
|
RotateArrow,
|
|
13401
13432
|
{
|
|
13402
13433
|
shouldRotate: isOpen,
|
|
@@ -13412,14 +13443,14 @@ function ComboboxTrigger({
|
|
|
13412
13443
|
}
|
|
13413
13444
|
|
|
13414
13445
|
// src/dashboard/_select-internals/useSelectIds.ts
|
|
13415
|
-
var
|
|
13446
|
+
var React47 = __toESM(require("react"), 1);
|
|
13416
13447
|
function useSelectIds({
|
|
13417
13448
|
name,
|
|
13418
13449
|
hasValue,
|
|
13419
13450
|
error,
|
|
13420
13451
|
hideErrorMessage
|
|
13421
13452
|
}) {
|
|
13422
|
-
const reactId =
|
|
13453
|
+
const reactId = React47.useId().replace(/:/g, "");
|
|
13423
13454
|
const baseId = name ? `dash-select-${name}` : `dash-select-${reactId}`;
|
|
13424
13455
|
const triggerId = `${baseId}-trigger`;
|
|
13425
13456
|
const labelId = `${baseId}-label`;
|
|
@@ -13429,7 +13460,7 @@ function useSelectIds({
|
|
|
13429
13460
|
const listboxId = `${baseId}-listbox`;
|
|
13430
13461
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
13431
13462
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
13432
|
-
const getOptionId2 =
|
|
13463
|
+
const getOptionId2 = React47.useCallback(
|
|
13433
13464
|
(index) => `${baseId}-option-${index}`,
|
|
13434
13465
|
[baseId]
|
|
13435
13466
|
);
|
|
@@ -13447,7 +13478,7 @@ function useSelectIds({
|
|
|
13447
13478
|
}
|
|
13448
13479
|
|
|
13449
13480
|
// src/dashboard/_select-internals/useSelectMenuState.ts
|
|
13450
|
-
var
|
|
13481
|
+
var React48 = __toESM(require("react"), 1);
|
|
13451
13482
|
function useSelectMenuState({
|
|
13452
13483
|
isBlocked,
|
|
13453
13484
|
isMobile: isMobile3,
|
|
@@ -13455,14 +13486,14 @@ function useSelectMenuState({
|
|
|
13455
13486
|
controlledIsOpen,
|
|
13456
13487
|
onMenuOpenChange
|
|
13457
13488
|
}) {
|
|
13458
|
-
const containerRef =
|
|
13459
|
-
const [internalIsOpen, setInternalIsOpen] =
|
|
13460
|
-
const [hasClosedControlledOpen, setHasClosedControlledOpen] =
|
|
13489
|
+
const containerRef = React48.useRef(null);
|
|
13490
|
+
const [internalIsOpen, setInternalIsOpen] = React48.useState(false);
|
|
13491
|
+
const [hasClosedControlledOpen, setHasClosedControlledOpen] = React48.useState(false);
|
|
13461
13492
|
const isOpen = controlledIsOpen === false ? false : controlledIsOpen === true ? !hasClosedControlledOpen : internalIsOpen;
|
|
13462
|
-
|
|
13493
|
+
React48.useEffect(() => {
|
|
13463
13494
|
if (controlledIsOpen !== true) setHasClosedControlledOpen(false);
|
|
13464
13495
|
}, [controlledIsOpen]);
|
|
13465
|
-
const setIsOpen =
|
|
13496
|
+
const setIsOpen = React48.useCallback(
|
|
13466
13497
|
(next) => {
|
|
13467
13498
|
const value = typeof next === "function" ? next(isOpen) : next;
|
|
13468
13499
|
if (controlledIsOpen === true) setHasClosedControlledOpen(!value);
|
|
@@ -13471,13 +13502,13 @@ function useSelectMenuState({
|
|
|
13471
13502
|
},
|
|
13472
13503
|
[isOpen, controlledIsOpen, onMenuOpenChange]
|
|
13473
13504
|
);
|
|
13474
|
-
const openMenu =
|
|
13505
|
+
const openMenu = React48.useCallback(() => {
|
|
13475
13506
|
setIsOpen(true);
|
|
13476
13507
|
}, [setIsOpen]);
|
|
13477
|
-
const closeMenu =
|
|
13508
|
+
const closeMenu = React48.useCallback(() => {
|
|
13478
13509
|
setIsOpen(false);
|
|
13479
13510
|
}, [setIsOpen]);
|
|
13480
|
-
const toggleMenu =
|
|
13511
|
+
const toggleMenu = React48.useCallback(() => {
|
|
13481
13512
|
if (isBlocked) return;
|
|
13482
13513
|
setIsOpen((prev) => !prev);
|
|
13483
13514
|
}, [isBlocked, setIsOpen]);
|
|
@@ -13489,14 +13520,14 @@ function useSelectMenuState({
|
|
|
13489
13520
|
},
|
|
13490
13521
|
isDisabled: !isOpen || isMobile3
|
|
13491
13522
|
});
|
|
13492
|
-
|
|
13523
|
+
React48.useEffect(() => {
|
|
13493
13524
|
if (isBlocked) setIsOpen(false);
|
|
13494
13525
|
}, [isBlocked, setIsOpen]);
|
|
13495
13526
|
return { containerRef, isOpen, openMenu, closeMenu, toggleMenu, setIsOpen };
|
|
13496
13527
|
}
|
|
13497
13528
|
|
|
13498
13529
|
// src/dashboard/_select-internals/useSelectState.ts
|
|
13499
|
-
var
|
|
13530
|
+
var React49 = __toESM(require("react"), 1);
|
|
13500
13531
|
function resolveValueLabel(option, getValueLabel) {
|
|
13501
13532
|
if (!option) return "";
|
|
13502
13533
|
return getValueLabel?.(option) ?? String(option.label);
|
|
@@ -13532,25 +13563,25 @@ function useSelectState(params) {
|
|
|
13532
13563
|
isSearchInDropdown,
|
|
13533
13564
|
searchable = true
|
|
13534
13565
|
} = params;
|
|
13535
|
-
const inputRef =
|
|
13536
|
-
const mobileSearchInputRef =
|
|
13537
|
-
const listRef =
|
|
13538
|
-
const optionRefs =
|
|
13566
|
+
const inputRef = React49.useRef(null);
|
|
13567
|
+
const mobileSearchInputRef = React49.useRef(null);
|
|
13568
|
+
const listRef = React49.useRef(null);
|
|
13569
|
+
const optionRefs = React49.useRef([]);
|
|
13539
13570
|
const isMobile3 = useIsMobile();
|
|
13540
|
-
const [isFocused, setIsFocused] =
|
|
13541
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
13571
|
+
const [isFocused, setIsFocused] = React49.useState(false);
|
|
13572
|
+
const [highlightedIndex, setHighlightedIndex] = React49.useState(-1);
|
|
13542
13573
|
const singleSelected = isMulti ? void 0 : selectedOptions[0];
|
|
13543
|
-
const valueLabel =
|
|
13574
|
+
const valueLabel = React49.useMemo(
|
|
13544
13575
|
() => resolveValueLabel(singleSelected, getValueLabel),
|
|
13545
13576
|
[singleSelected, getValueLabel]
|
|
13546
13577
|
);
|
|
13547
13578
|
const isSearchOnlyInput = searchable && (isMulti || Boolean(isSearchInDropdown));
|
|
13548
13579
|
const isInputControlled = controlledInputValue !== void 0;
|
|
13549
|
-
const [internalInputValue, setInternalInputValue] =
|
|
13580
|
+
const [internalInputValue, setInternalInputValue] = React49.useState(
|
|
13550
13581
|
searchable && !isSearchOnlyInput ? valueLabel : ""
|
|
13551
13582
|
);
|
|
13552
13583
|
const inputValue = isInputControlled ? controlledInputValue : internalInputValue;
|
|
13553
|
-
const setInputValue =
|
|
13584
|
+
const setInputValue = React49.useCallback(
|
|
13554
13585
|
(next) => {
|
|
13555
13586
|
if (!isInputControlled) setInternalInputValue(next);
|
|
13556
13587
|
},
|
|
@@ -13569,12 +13600,12 @@ function useSelectState(params) {
|
|
|
13569
13600
|
});
|
|
13570
13601
|
const ids = useSelectIds({ name, hasValue, error, hideErrorMessage });
|
|
13571
13602
|
const { listboxId, getOptionId: getOptionId2 } = ids;
|
|
13572
|
-
|
|
13603
|
+
React49.useEffect(() => {
|
|
13573
13604
|
if (!searchable) return;
|
|
13574
13605
|
if (isSearchOnlyInput) return;
|
|
13575
13606
|
if (!isFocused) setInputValue(valueLabel);
|
|
13576
13607
|
}, [valueLabel, isFocused, isSearchOnlyInput, searchable]);
|
|
13577
|
-
|
|
13608
|
+
React49.useEffect(() => {
|
|
13578
13609
|
if (!isSearchOnlyInput) return;
|
|
13579
13610
|
if (!isOpen) {
|
|
13580
13611
|
setInputValue("");
|
|
@@ -13583,11 +13614,11 @@ function useSelectState(params) {
|
|
|
13583
13614
|
}, [isOpen, isSearchOnlyInput]);
|
|
13584
13615
|
const trimmedInput = inputValue.trim();
|
|
13585
13616
|
const isFiltering = searchable && (isSearchOnlyInput ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase());
|
|
13586
|
-
const filteredOptions =
|
|
13617
|
+
const filteredOptions = React49.useMemo(() => {
|
|
13587
13618
|
if (!isFiltering) return options;
|
|
13588
13619
|
return options.filter((option) => filterOption(option, trimmedInput));
|
|
13589
13620
|
}, [options, isFiltering, trimmedInput, filterOption]);
|
|
13590
|
-
const canCreateNewOption =
|
|
13621
|
+
const canCreateNewOption = React49.useMemo(() => {
|
|
13591
13622
|
if (!isCreatable || !trimmedInput) return false;
|
|
13592
13623
|
if (isValidNewOption) {
|
|
13593
13624
|
return isValidNewOption(trimmedInput, selectedOptions, options);
|
|
@@ -13601,7 +13632,7 @@ function useSelectState(params) {
|
|
|
13601
13632
|
);
|
|
13602
13633
|
return !existsInOptions && !existsInSelected;
|
|
13603
13634
|
}, [isCreatable, trimmedInput, isValidNewOption, options, selectedOptions]);
|
|
13604
|
-
|
|
13635
|
+
React49.useEffect(() => {
|
|
13605
13636
|
if (!isOpen || filteredOptions.length === 0) {
|
|
13606
13637
|
setHighlightedIndex(-1);
|
|
13607
13638
|
return;
|
|
@@ -13611,23 +13642,23 @@ function useSelectState(params) {
|
|
|
13611
13642
|
return getFirstEnabledOptionIndex(filteredOptions, isOptionDisabled);
|
|
13612
13643
|
});
|
|
13613
13644
|
}, [isOpen, filteredOptions, isOptionDisabled]);
|
|
13614
|
-
|
|
13645
|
+
React49.useEffect(() => {
|
|
13615
13646
|
if (!isOpen || highlightedIndex < 0) return;
|
|
13616
13647
|
optionRefs.current[highlightedIndex]?.scrollIntoView?.({ block: "nearest" });
|
|
13617
13648
|
}, [highlightedIndex, isOpen]);
|
|
13618
13649
|
const inMenuSearchVisible = searchable && (isMobile3 || Boolean(isSearchInDropdown));
|
|
13619
|
-
|
|
13650
|
+
React49.useEffect(() => {
|
|
13620
13651
|
if (!isOpen || !inMenuSearchVisible) return;
|
|
13621
13652
|
const frame = window.requestAnimationFrame(
|
|
13622
13653
|
() => mobileSearchInputRef.current?.focus()
|
|
13623
13654
|
);
|
|
13624
13655
|
return () => window.cancelAnimationFrame(frame);
|
|
13625
13656
|
}, [isOpen, inMenuSearchVisible]);
|
|
13626
|
-
const isValueSelected =
|
|
13657
|
+
const isValueSelected = React49.useCallback(
|
|
13627
13658
|
(option) => isOptionSelected2(option, selectedOptions),
|
|
13628
13659
|
[isOptionSelected2, selectedOptions]
|
|
13629
13660
|
);
|
|
13630
|
-
const selectOption =
|
|
13661
|
+
const selectOption = React49.useCallback(
|
|
13631
13662
|
(option) => {
|
|
13632
13663
|
if (!isOptionEnabled(option, isOptionDisabled)) return;
|
|
13633
13664
|
if (isMulti) {
|
|
@@ -13663,7 +13694,7 @@ function useSelectState(params) {
|
|
|
13663
13694
|
searchable
|
|
13664
13695
|
]
|
|
13665
13696
|
);
|
|
13666
|
-
const removeOption =
|
|
13697
|
+
const removeOption = React49.useCallback(
|
|
13667
13698
|
(option) => {
|
|
13668
13699
|
if (isBlocked) return;
|
|
13669
13700
|
onSelectionChange(
|
|
@@ -13674,7 +13705,7 @@ function useSelectState(params) {
|
|
|
13674
13705
|
},
|
|
13675
13706
|
[isBlocked, onSelectionChange, selectedOptions]
|
|
13676
13707
|
);
|
|
13677
|
-
const clearSelection =
|
|
13708
|
+
const clearSelection = React49.useCallback(
|
|
13678
13709
|
(event) => {
|
|
13679
13710
|
event?.stopPropagation();
|
|
13680
13711
|
if (isBlocked) return;
|
|
@@ -13684,7 +13715,7 @@ function useSelectState(params) {
|
|
|
13684
13715
|
},
|
|
13685
13716
|
[isBlocked, onSelectionChange]
|
|
13686
13717
|
);
|
|
13687
|
-
const createOption =
|
|
13718
|
+
const createOption = React49.useCallback(() => {
|
|
13688
13719
|
if (!canCreateNewOption) return;
|
|
13689
13720
|
const newOption = onCreateOption?.(trimmedInput) ?? { value: trimmedInput, label: trimmedInput };
|
|
13690
13721
|
if (isMulti) {
|
|
@@ -13714,7 +13745,7 @@ function useSelectState(params) {
|
|
|
13714
13745
|
isSearchInDropdown,
|
|
13715
13746
|
searchable
|
|
13716
13747
|
]);
|
|
13717
|
-
const handleInputChange =
|
|
13748
|
+
const handleInputChange = React49.useCallback(
|
|
13718
13749
|
(event) => {
|
|
13719
13750
|
if (!searchable) return;
|
|
13720
13751
|
const nextValue = event.target.value;
|
|
@@ -13724,7 +13755,7 @@ function useSelectState(params) {
|
|
|
13724
13755
|
},
|
|
13725
13756
|
[isOpen, onInputChange, searchable, setIsOpen, setInputValue]
|
|
13726
13757
|
);
|
|
13727
|
-
const handleInputFocus =
|
|
13758
|
+
const handleInputFocus = React49.useCallback(
|
|
13728
13759
|
(event) => {
|
|
13729
13760
|
if (isBlocked) return;
|
|
13730
13761
|
onFocus?.(event);
|
|
@@ -13736,17 +13767,17 @@ function useSelectState(params) {
|
|
|
13736
13767
|
},
|
|
13737
13768
|
[isBlocked, onFocus, openMenuOnFocus, setIsOpen, searchable, isMulti]
|
|
13738
13769
|
);
|
|
13739
|
-
const handleTriggerFocus =
|
|
13770
|
+
const handleTriggerFocus = React49.useCallback(() => {
|
|
13740
13771
|
if (isBlocked) return;
|
|
13741
13772
|
setIsFocused(true);
|
|
13742
13773
|
if (openMenuOnFocus) setIsOpen(true);
|
|
13743
13774
|
}, [isBlocked, openMenuOnFocus, setIsOpen]);
|
|
13744
|
-
const handleContainerClick =
|
|
13775
|
+
const handleContainerClick = React49.useCallback(() => {
|
|
13745
13776
|
if (isBlocked) return;
|
|
13746
13777
|
inputRef.current?.focus();
|
|
13747
13778
|
setIsOpen(true);
|
|
13748
13779
|
}, [isBlocked, setIsOpen]);
|
|
13749
|
-
const handleBlur =
|
|
13780
|
+
const handleBlur = React49.useCallback(
|
|
13750
13781
|
(event) => {
|
|
13751
13782
|
if (containerRef.current?.contains(event.relatedTarget)) return;
|
|
13752
13783
|
setIsFocused(false);
|
|
@@ -13755,7 +13786,7 @@ function useSelectState(params) {
|
|
|
13755
13786
|
},
|
|
13756
13787
|
[containerRef, isSearchOnlyInput, searchable, valueLabel, onBlur]
|
|
13757
13788
|
);
|
|
13758
|
-
const handleInputKeyDown =
|
|
13789
|
+
const handleInputKeyDown = React49.useCallback(
|
|
13759
13790
|
(event) => {
|
|
13760
13791
|
onKeyDown?.(event);
|
|
13761
13792
|
if (event.defaultPrevented) return;
|
|
@@ -13832,7 +13863,7 @@ function useSelectState(params) {
|
|
|
13832
13863
|
]
|
|
13833
13864
|
);
|
|
13834
13865
|
const isEmpty = !hasValue && !inputValue;
|
|
13835
|
-
|
|
13866
|
+
React49.useDebugValue({ isOpen, isMulti, highlightedIndex, selectedOptions });
|
|
13836
13867
|
return {
|
|
13837
13868
|
// ids
|
|
13838
13869
|
ids,
|
|
@@ -13894,7 +13925,7 @@ function useSelectState(params) {
|
|
|
13894
13925
|
// src/dashboard/_select-internals/slots/DefaultMultiValueChip.tsx
|
|
13895
13926
|
var import_lucide_react46 = require("lucide-react");
|
|
13896
13927
|
var import_react_i18next30 = require("react-i18next");
|
|
13897
|
-
var
|
|
13928
|
+
var import_jsx_runtime153 = require("react/jsx-runtime");
|
|
13898
13929
|
function DefaultMultiValueChip({
|
|
13899
13930
|
option,
|
|
13900
13931
|
readOnly,
|
|
@@ -13902,9 +13933,9 @@ function DefaultMultiValueChip({
|
|
|
13902
13933
|
}) {
|
|
13903
13934
|
const { t } = (0, import_react_i18next30.useTranslation)();
|
|
13904
13935
|
const labelText = typeof option.label === "string" ? option.label : String(option.value);
|
|
13905
|
-
return /* @__PURE__ */ (0,
|
|
13906
|
-
/* @__PURE__ */ (0,
|
|
13907
|
-
!readOnly && /* @__PURE__ */ (0,
|
|
13936
|
+
return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("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: [
|
|
13937
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "whitespace-nowrap leading-5", children: option.label }),
|
|
13938
|
+
!readOnly && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
|
|
13908
13939
|
"button",
|
|
13909
13940
|
{
|
|
13910
13941
|
type: "button",
|
|
@@ -13914,14 +13945,14 @@ function DefaultMultiValueChip({
|
|
|
13914
13945
|
},
|
|
13915
13946
|
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",
|
|
13916
13947
|
"aria-label": t("remove_item", { label: labelText }),
|
|
13917
|
-
children: /* @__PURE__ */ (0,
|
|
13948
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(import_lucide_react46.X, { size: 12, strokeWidth: 2.5 })
|
|
13918
13949
|
}
|
|
13919
13950
|
)
|
|
13920
13951
|
] });
|
|
13921
13952
|
}
|
|
13922
13953
|
|
|
13923
13954
|
// src/dashboard/_select-internals/slots/DefaultControl.tsx
|
|
13924
|
-
var
|
|
13955
|
+
var import_jsx_runtime154 = require("react/jsx-runtime");
|
|
13925
13956
|
function DefaultControl(props) {
|
|
13926
13957
|
const {
|
|
13927
13958
|
triggerId,
|
|
@@ -13964,7 +13995,7 @@ function DefaultControl(props) {
|
|
|
13964
13995
|
const Chip = components.MultiValueChip ?? DefaultMultiValueChip;
|
|
13965
13996
|
const showClear = Boolean(clearable) && hasValue && !readOnly && !disabled;
|
|
13966
13997
|
const placeholderText = isMulti ? !hasValue ? placeholder : "" : placeholder;
|
|
13967
|
-
return /* @__PURE__ */ (0,
|
|
13998
|
+
return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
|
|
13968
13999
|
ComboboxTrigger,
|
|
13969
14000
|
{
|
|
13970
14001
|
triggerId,
|
|
@@ -14000,7 +14031,7 @@ function DefaultControl(props) {
|
|
|
14000
14031
|
autoFocus,
|
|
14001
14032
|
leftIcon,
|
|
14002
14033
|
searchable,
|
|
14003
|
-
leadingContent: isMulti ? selectedOptions.map((option) => /* @__PURE__ */ (0,
|
|
14034
|
+
leadingContent: isMulti ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
|
|
14004
14035
|
Chip,
|
|
14005
14036
|
{
|
|
14006
14037
|
option,
|
|
@@ -14015,7 +14046,7 @@ function DefaultControl(props) {
|
|
|
14015
14046
|
|
|
14016
14047
|
// src/dashboard/_select-internals/slots/StaticControl.tsx
|
|
14017
14048
|
var import_lucide_react47 = require("lucide-react");
|
|
14018
|
-
var
|
|
14049
|
+
var import_jsx_runtime155 = require("react/jsx-runtime");
|
|
14019
14050
|
function StaticControl(props) {
|
|
14020
14051
|
const {
|
|
14021
14052
|
triggerId,
|
|
@@ -14043,8 +14074,8 @@ function StaticControl(props) {
|
|
|
14043
14074
|
leftIcon
|
|
14044
14075
|
} = props;
|
|
14045
14076
|
const showClear = Boolean(clearable) && hasValue && !readOnly && !disabled;
|
|
14046
|
-
return /* @__PURE__ */ (0,
|
|
14047
|
-
/* @__PURE__ */ (0,
|
|
14077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { className: "relative", children: [
|
|
14078
|
+
/* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
|
|
14048
14079
|
SelectTrigger,
|
|
14049
14080
|
{
|
|
14050
14081
|
triggerId,
|
|
@@ -14070,21 +14101,21 @@ function StaticControl(props) {
|
|
|
14070
14101
|
onFocus: onTriggerFocus
|
|
14071
14102
|
}
|
|
14072
14103
|
),
|
|
14073
|
-
showClear && /* @__PURE__ */ (0,
|
|
14104
|
+
showClear && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
|
|
14074
14105
|
"button",
|
|
14075
14106
|
{
|
|
14076
14107
|
type: "button",
|
|
14077
14108
|
onClick: onClear,
|
|
14078
14109
|
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]",
|
|
14079
14110
|
"aria-label": clearLabel,
|
|
14080
|
-
children: /* @__PURE__ */ (0,
|
|
14111
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_lucide_react47.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
14081
14112
|
}
|
|
14082
14113
|
)
|
|
14083
14114
|
] });
|
|
14084
14115
|
}
|
|
14085
14116
|
|
|
14086
14117
|
// src/dashboard/_select-internals/slots/DefaultMenuList.tsx
|
|
14087
|
-
var
|
|
14118
|
+
var import_jsx_runtime156 = require("react/jsx-runtime");
|
|
14088
14119
|
function DefaultMenuList(props) {
|
|
14089
14120
|
const {
|
|
14090
14121
|
id,
|
|
@@ -14113,7 +14144,7 @@ function DefaultMenuList(props) {
|
|
|
14113
14144
|
groupedOptions,
|
|
14114
14145
|
formatGroupLabel
|
|
14115
14146
|
} = props;
|
|
14116
|
-
return /* @__PURE__ */ (0,
|
|
14147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
|
|
14117
14148
|
SelectMenu,
|
|
14118
14149
|
{
|
|
14119
14150
|
id,
|
|
@@ -14148,14 +14179,14 @@ function DefaultMenuList(props) {
|
|
|
14148
14179
|
|
|
14149
14180
|
// src/dashboard/_select-internals/slots/DefaultCreateOption.tsx
|
|
14150
14181
|
var import_react_i18next31 = require("react-i18next");
|
|
14151
|
-
var
|
|
14182
|
+
var import_jsx_runtime157 = require("react/jsx-runtime");
|
|
14152
14183
|
function DefaultCreateOption({
|
|
14153
14184
|
inputValue,
|
|
14154
14185
|
onCreate,
|
|
14155
14186
|
formatCreateLabel
|
|
14156
14187
|
}) {
|
|
14157
14188
|
const { t } = (0, import_react_i18next31.useTranslation)();
|
|
14158
|
-
return /* @__PURE__ */ (0,
|
|
14189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
|
|
14159
14190
|
"button",
|
|
14160
14191
|
{
|
|
14161
14192
|
type: "button",
|
|
@@ -14189,7 +14220,7 @@ function mergeComponents(overrides) {
|
|
|
14189
14220
|
}
|
|
14190
14221
|
|
|
14191
14222
|
// src/dashboard/select/Select.tsx
|
|
14192
|
-
var
|
|
14223
|
+
var React50 = __toESM(require("react"), 1);
|
|
14193
14224
|
var import_react_i18next32 = require("react-i18next");
|
|
14194
14225
|
|
|
14195
14226
|
// src/dashboard/select/useSetCorrectOptionIfThereIsOnlyValue.ts
|
|
@@ -14208,7 +14239,7 @@ function useSetCorrectOptionIfThereIsOnlyValue({ value, options, onChange, enabl
|
|
|
14208
14239
|
}
|
|
14209
14240
|
|
|
14210
14241
|
// src/dashboard/select/Select.tsx
|
|
14211
|
-
var
|
|
14242
|
+
var import_jsx_runtime158 = require("react/jsx-runtime");
|
|
14212
14243
|
function SelectInternal(props, ref) {
|
|
14213
14244
|
const {
|
|
14214
14245
|
options = [],
|
|
@@ -14266,7 +14297,7 @@ function SelectInternal(props, ref) {
|
|
|
14266
14297
|
const closeMenuOnSelect = isMulti ? props.closeMenuOnSelect ?? false : void 0;
|
|
14267
14298
|
const { t } = (0, import_react_i18next32.useTranslation)();
|
|
14268
14299
|
const isControlled = props.value !== void 0;
|
|
14269
|
-
const [internalValue, setInternalValue] =
|
|
14300
|
+
const [internalValue, setInternalValue] = React50.useState(() => {
|
|
14270
14301
|
if (isMulti) return props.defaultValue ?? [];
|
|
14271
14302
|
return props.defaultValue ?? null;
|
|
14272
14303
|
});
|
|
@@ -14277,11 +14308,11 @@ function SelectInternal(props, ref) {
|
|
|
14277
14308
|
options,
|
|
14278
14309
|
onChange: !isMulti ? props.onChange : void 0
|
|
14279
14310
|
});
|
|
14280
|
-
const selectedOptions =
|
|
14311
|
+
const selectedOptions = React50.useMemo(() => {
|
|
14281
14312
|
if (isMulti) return currentValue ?? [];
|
|
14282
14313
|
return currentValue ? [currentValue] : [];
|
|
14283
14314
|
}, [isMulti, currentValue]);
|
|
14284
|
-
const onSelectionChange =
|
|
14315
|
+
const onSelectionChange = React50.useCallback(
|
|
14285
14316
|
(next, meta) => {
|
|
14286
14317
|
if (isMulti) {
|
|
14287
14318
|
if (!isControlled) setInternalValue(next);
|
|
@@ -14294,7 +14325,7 @@ function SelectInternal(props, ref) {
|
|
|
14294
14325
|
},
|
|
14295
14326
|
[isMulti, isControlled, props.onChange]
|
|
14296
14327
|
);
|
|
14297
|
-
const flatOptions =
|
|
14328
|
+
const flatOptions = React50.useMemo(() => flattenGroupedOptions(options), [options]);
|
|
14298
14329
|
const state = useSelectState({
|
|
14299
14330
|
isMulti,
|
|
14300
14331
|
options: flatOptions,
|
|
@@ -14325,14 +14356,14 @@ function SelectInternal(props, ref) {
|
|
|
14325
14356
|
isSearchInDropdown,
|
|
14326
14357
|
searchable
|
|
14327
14358
|
});
|
|
14328
|
-
const components =
|
|
14359
|
+
const components = React50.useMemo(() => {
|
|
14329
14360
|
const merged = mergeComponents(userComponents);
|
|
14330
14361
|
if ((isSearchInDropdown || !searchable && !isMulti) && !userComponents?.Control) {
|
|
14331
14362
|
return { ...merged, Control: StaticControl };
|
|
14332
14363
|
}
|
|
14333
14364
|
return merged;
|
|
14334
14365
|
}, [userComponents, isSearchInDropdown, searchable, isMulti]);
|
|
14335
|
-
|
|
14366
|
+
React50.useImperativeHandle(
|
|
14336
14367
|
ref,
|
|
14337
14368
|
() => state.containerRef.current
|
|
14338
14369
|
);
|
|
@@ -14340,13 +14371,14 @@ function SelectInternal(props, ref) {
|
|
|
14340
14371
|
const resolvedTitle = label ?? placeholder;
|
|
14341
14372
|
const accessibleLabel = !hasLabel && typeof placeholder === "string" ? placeholder : void 0;
|
|
14342
14373
|
const hasInvalidState = state.hasInvalidState || Boolean(invalid);
|
|
14374
|
+
const hasLeadingIcon = Boolean(leftIcon);
|
|
14343
14375
|
const hiddenValue = isMulti ? selectedOptions.map((item) => String(item.value)).join(",") : selectedOptions[0] ? String(selectedOptions[0].value) : "";
|
|
14344
14376
|
const handleClear = (event) => {
|
|
14345
14377
|
state.clearSelection(event);
|
|
14346
14378
|
onReset?.();
|
|
14347
14379
|
};
|
|
14348
14380
|
const { Control, MenuList, CreateOption } = components;
|
|
14349
|
-
return /* @__PURE__ */ (0,
|
|
14381
|
+
return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
|
|
14350
14382
|
SelectFieldShell,
|
|
14351
14383
|
{
|
|
14352
14384
|
containerRef: state.containerRef,
|
|
@@ -14365,7 +14397,7 @@ function SelectInternal(props, ref) {
|
|
|
14365
14397
|
hiddenValue,
|
|
14366
14398
|
onBlur: state.handleBlur,
|
|
14367
14399
|
children: [
|
|
14368
|
-
/* @__PURE__ */ (0,
|
|
14400
|
+
/* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
|
|
14369
14401
|
Control,
|
|
14370
14402
|
{
|
|
14371
14403
|
triggerId: state.ids.triggerId,
|
|
@@ -14408,7 +14440,7 @@ function SelectInternal(props, ref) {
|
|
|
14408
14440
|
components
|
|
14409
14441
|
}
|
|
14410
14442
|
),
|
|
14411
|
-
/* @__PURE__ */ (0,
|
|
14443
|
+
/* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
|
|
14412
14444
|
Fieldset,
|
|
14413
14445
|
{
|
|
14414
14446
|
isFocused: state.isFocused || state.isOpen,
|
|
@@ -14424,11 +14456,11 @@ function SelectInternal(props, ref) {
|
|
|
14424
14456
|
label,
|
|
14425
14457
|
tooltip,
|
|
14426
14458
|
onClick: state.handleContainerClick,
|
|
14427
|
-
labelClassName:
|
|
14459
|
+
labelClassName: hasLeadingIcon ? "pl-[28px]" : void 0,
|
|
14428
14460
|
className: fieldsetClassName
|
|
14429
14461
|
}
|
|
14430
14462
|
),
|
|
14431
|
-
/* @__PURE__ */ (0,
|
|
14463
|
+
/* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
|
|
14432
14464
|
SelectMenuPanel,
|
|
14433
14465
|
{
|
|
14434
14466
|
isOpen: state.isOpen,
|
|
@@ -14441,7 +14473,7 @@ function SelectInternal(props, ref) {
|
|
|
14441
14473
|
className: dropdownClassName,
|
|
14442
14474
|
drawerClassName,
|
|
14443
14475
|
children: [
|
|
14444
|
-
state.inMenuSearchVisible && /* @__PURE__ */ (0,
|
|
14476
|
+
state.inMenuSearchVisible && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
|
|
14445
14477
|
SelectSearchInput,
|
|
14446
14478
|
{
|
|
14447
14479
|
inputRef: state.mobileSearchInputRef,
|
|
@@ -14454,7 +14486,7 @@ function SelectInternal(props, ref) {
|
|
|
14454
14486
|
}
|
|
14455
14487
|
),
|
|
14456
14488
|
menuHeader,
|
|
14457
|
-
/* @__PURE__ */ (0,
|
|
14489
|
+
/* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
|
|
14458
14490
|
MenuList,
|
|
14459
14491
|
{
|
|
14460
14492
|
id: state.ids.listboxId,
|
|
@@ -14482,7 +14514,7 @@ function SelectInternal(props, ref) {
|
|
|
14482
14514
|
formatGroupLabel
|
|
14483
14515
|
}
|
|
14484
14516
|
),
|
|
14485
|
-
state.canCreateNewOption && /* @__PURE__ */ (0,
|
|
14517
|
+
state.canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
|
|
14486
14518
|
CreateOption,
|
|
14487
14519
|
{
|
|
14488
14520
|
inputValue: state.trimmedInput,
|
|
@@ -14497,7 +14529,7 @@ function SelectInternal(props, ref) {
|
|
|
14497
14529
|
}
|
|
14498
14530
|
);
|
|
14499
14531
|
}
|
|
14500
|
-
var Select =
|
|
14532
|
+
var Select = React50.forwardRef(SelectInternal);
|
|
14501
14533
|
|
|
14502
14534
|
// src/dashboard/phone-input/utils.ts
|
|
14503
14535
|
var PREFIX_REGEX = /^\+/;
|
|
@@ -14567,8 +14599,8 @@ function formatPhoneCodeOptionLabel(option) {
|
|
|
14567
14599
|
}
|
|
14568
14600
|
|
|
14569
14601
|
// src/dashboard/phone-input/PhoneInput.tsx
|
|
14570
|
-
var
|
|
14571
|
-
var PhoneInput =
|
|
14602
|
+
var import_jsx_runtime159 = require("react/jsx-runtime");
|
|
14603
|
+
var PhoneInput = React51.forwardRef(
|
|
14572
14604
|
function PhoneInput2({
|
|
14573
14605
|
options,
|
|
14574
14606
|
value,
|
|
@@ -14601,10 +14633,10 @@ var PhoneInput = React50.forwardRef(
|
|
|
14601
14633
|
defaultNumber
|
|
14602
14634
|
}, ref) {
|
|
14603
14635
|
const { t } = (0, import_react_i18next33.useTranslation)();
|
|
14604
|
-
const groupLabelId =
|
|
14605
|
-
const errorMsgId =
|
|
14606
|
-
const numberInputRef =
|
|
14607
|
-
const [codeSearchValue, setCodeSearchValue] =
|
|
14636
|
+
const groupLabelId = React51.useId();
|
|
14637
|
+
const errorMsgId = React51.useId();
|
|
14638
|
+
const numberInputRef = React51.useRef(null);
|
|
14639
|
+
const [codeSearchValue, setCodeSearchValue] = React51.useState("");
|
|
14608
14640
|
const safeValue = toPhoneValue(value, defaultCode, defaultNumber);
|
|
14609
14641
|
const effectiveCode = safeValue.code || defaultCode || "";
|
|
14610
14642
|
const resolvedLabel = label ?? "";
|
|
@@ -14613,7 +14645,7 @@ var PhoneInput = React50.forwardRef(
|
|
|
14613
14645
|
const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
|
|
14614
14646
|
const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
|
|
14615
14647
|
const combinedValue = effectiveCode || safeValue.number ? `${effectiveCode}${safeValue.number}` : "";
|
|
14616
|
-
const codeOptions =
|
|
14648
|
+
const codeOptions = React51.useMemo(
|
|
14617
14649
|
() => options.map((option) => ({
|
|
14618
14650
|
value: option.value,
|
|
14619
14651
|
label: formatPhoneCodeOptionLabel(option),
|
|
@@ -14622,11 +14654,11 @@ var PhoneInput = React50.forwardRef(
|
|
|
14622
14654
|
})),
|
|
14623
14655
|
[options]
|
|
14624
14656
|
);
|
|
14625
|
-
const selectedCodeOption =
|
|
14657
|
+
const selectedCodeOption = React51.useMemo(
|
|
14626
14658
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
14627
14659
|
[codeOptions, effectiveCode]
|
|
14628
14660
|
);
|
|
14629
|
-
const parsePhoneValue =
|
|
14661
|
+
const parsePhoneValue = React51.useMemo(
|
|
14630
14662
|
() => parsePhoneValueWithOptions(options),
|
|
14631
14663
|
[options]
|
|
14632
14664
|
);
|
|
@@ -14655,17 +14687,17 @@ var PhoneInput = React50.forwardRef(
|
|
|
14655
14687
|
}
|
|
14656
14688
|
emitChange({ code: effectiveCode, number: cleanedNumber });
|
|
14657
14689
|
};
|
|
14658
|
-
const effectiveCodeRef =
|
|
14659
|
-
const numberValueRef =
|
|
14660
|
-
const codeSearchValueRef =
|
|
14661
|
-
const onChangeRef =
|
|
14662
|
-
const nameRef =
|
|
14690
|
+
const effectiveCodeRef = React51.useRef(effectiveCode);
|
|
14691
|
+
const numberValueRef = React51.useRef(safeValue.number);
|
|
14692
|
+
const codeSearchValueRef = React51.useRef(codeSearchValue);
|
|
14693
|
+
const onChangeRef = React51.useRef(onChange);
|
|
14694
|
+
const nameRef = React51.useRef(name);
|
|
14663
14695
|
effectiveCodeRef.current = effectiveCode;
|
|
14664
14696
|
numberValueRef.current = safeValue.number;
|
|
14665
14697
|
codeSearchValueRef.current = codeSearchValue;
|
|
14666
14698
|
onChangeRef.current = onChange;
|
|
14667
14699
|
nameRef.current = name;
|
|
14668
|
-
|
|
14700
|
+
React51.useImperativeHandle(
|
|
14669
14701
|
ref,
|
|
14670
14702
|
() => ({
|
|
14671
14703
|
getCodeSearchValue: () => codeSearchValueRef.current,
|
|
@@ -14682,7 +14714,7 @@ var PhoneInput = React50.forwardRef(
|
|
|
14682
14714
|
}),
|
|
14683
14715
|
[]
|
|
14684
14716
|
);
|
|
14685
|
-
return /* @__PURE__ */ (0,
|
|
14717
|
+
return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
|
|
14686
14718
|
"div",
|
|
14687
14719
|
{
|
|
14688
14720
|
className: cn(
|
|
@@ -14692,8 +14724,8 @@ var PhoneInput = React50.forwardRef(
|
|
|
14692
14724
|
className
|
|
14693
14725
|
),
|
|
14694
14726
|
children: [
|
|
14695
|
-
name && /* @__PURE__ */ (0,
|
|
14696
|
-
codeName && /* @__PURE__ */ (0,
|
|
14727
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
14728
|
+
codeName && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14697
14729
|
"input",
|
|
14698
14730
|
{
|
|
14699
14731
|
type: "hidden",
|
|
@@ -14702,7 +14734,7 @@ var PhoneInput = React50.forwardRef(
|
|
|
14702
14734
|
disabled
|
|
14703
14735
|
}
|
|
14704
14736
|
),
|
|
14705
|
-
numberName && /* @__PURE__ */ (0,
|
|
14737
|
+
numberName && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14706
14738
|
"input",
|
|
14707
14739
|
{
|
|
14708
14740
|
type: "hidden",
|
|
@@ -14711,22 +14743,22 @@ var PhoneInput = React50.forwardRef(
|
|
|
14711
14743
|
disabled
|
|
14712
14744
|
}
|
|
14713
14745
|
),
|
|
14714
|
-
topLabel && /* @__PURE__ */ (0,
|
|
14746
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14715
14747
|
"span",
|
|
14716
14748
|
{
|
|
14717
14749
|
id: groupLabelId,
|
|
14718
|
-
className: "mb-2 block text-[
|
|
14750
|
+
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)]",
|
|
14719
14751
|
children: topLabel
|
|
14720
14752
|
}
|
|
14721
14753
|
),
|
|
14722
|
-
/* @__PURE__ */ (0,
|
|
14754
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
|
|
14723
14755
|
"div",
|
|
14724
14756
|
{
|
|
14725
14757
|
role: "group",
|
|
14726
14758
|
"aria-labelledby": topLabel ? groupLabelId : void 0,
|
|
14727
14759
|
className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2",
|
|
14728
14760
|
children: [
|
|
14729
|
-
/* @__PURE__ */ (0,
|
|
14761
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14730
14762
|
Select,
|
|
14731
14763
|
{
|
|
14732
14764
|
options: codeOptions,
|
|
@@ -14752,7 +14784,7 @@ var PhoneInput = React50.forwardRef(
|
|
|
14752
14784
|
onBlur: () => onFieldBlur?.("code")
|
|
14753
14785
|
}
|
|
14754
14786
|
),
|
|
14755
|
-
/* @__PURE__ */ (0,
|
|
14787
|
+
/* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14756
14788
|
Input,
|
|
14757
14789
|
{
|
|
14758
14790
|
ref: numberInputRef,
|
|
@@ -14788,8 +14820,8 @@ var PhoneInput = React50.forwardRef(
|
|
|
14788
14820
|
]
|
|
14789
14821
|
}
|
|
14790
14822
|
),
|
|
14791
|
-
!errorMessage && optional && /* @__PURE__ */ (0,
|
|
14792
|
-
errorMessage && /* @__PURE__ */ (0,
|
|
14823
|
+
!errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
14824
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14793
14825
|
FieldErrorMessage,
|
|
14794
14826
|
{
|
|
14795
14827
|
id: errorMsgId,
|
|
@@ -14806,41 +14838,41 @@ var PhoneInput = React50.forwardRef(
|
|
|
14806
14838
|
PhoneInput.displayName = "PhoneInput";
|
|
14807
14839
|
|
|
14808
14840
|
// src/dashboard/creatable-select/CreatableSelect.tsx
|
|
14809
|
-
var React51 = __toESM(require("react"), 1);
|
|
14810
|
-
var import_jsx_runtime159 = require("react/jsx-runtime");
|
|
14811
|
-
var CreatableSelect = React51.forwardRef(function CreatableSelect2(props, ref) {
|
|
14812
|
-
return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Select, { ref, ...props, isCreatable: true });
|
|
14813
|
-
});
|
|
14814
|
-
|
|
14815
|
-
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14816
14841
|
var React52 = __toESM(require("react"), 1);
|
|
14817
14842
|
var import_jsx_runtime160 = require("react/jsx-runtime");
|
|
14818
|
-
var
|
|
14819
|
-
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Select, { ref, ...props,
|
|
14843
|
+
var CreatableSelect = React52.forwardRef(function CreatableSelect2(props, ref) {
|
|
14844
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Select, { ref, ...props, isCreatable: true });
|
|
14820
14845
|
});
|
|
14821
14846
|
|
|
14822
|
-
// src/dashboard/
|
|
14847
|
+
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14823
14848
|
var React53 = __toESM(require("react"), 1);
|
|
14824
14849
|
var import_jsx_runtime161 = require("react/jsx-runtime");
|
|
14825
|
-
var
|
|
14826
|
-
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Select, { ref, ...props, isMulti: true
|
|
14850
|
+
var MultiSelect = React53.forwardRef(function MultiSelect2(props, ref) {
|
|
14851
|
+
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Select, { ref, ...props, isMulti: true });
|
|
14852
|
+
});
|
|
14853
|
+
|
|
14854
|
+
// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
|
|
14855
|
+
var React54 = __toESM(require("react"), 1);
|
|
14856
|
+
var import_jsx_runtime162 = require("react/jsx-runtime");
|
|
14857
|
+
var CreatableMultiSelect = React54.forwardRef(function CreatableMultiSelect2(props, ref) {
|
|
14858
|
+
return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Select, { ref, ...props, isMulti: true, isCreatable: true });
|
|
14827
14859
|
});
|
|
14828
14860
|
|
|
14829
14861
|
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
14830
|
-
var
|
|
14862
|
+
var React57 = __toESM(require("react"), 1);
|
|
14831
14863
|
|
|
14832
14864
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14833
|
-
var
|
|
14865
|
+
var React56 = __toESM(require("react"), 1);
|
|
14834
14866
|
var import_react_i18next34 = require("react-i18next");
|
|
14835
14867
|
var import_react_virtual2 = require("@tanstack/react-virtual");
|
|
14836
14868
|
|
|
14837
14869
|
// src/dashboard/infinite-scroll-select/InfiniteScrollContext.tsx
|
|
14838
|
-
var
|
|
14839
|
-
var InfiniteScrollContext =
|
|
14870
|
+
var React55 = __toESM(require("react"), 1);
|
|
14871
|
+
var InfiniteScrollContext = React55.createContext(
|
|
14840
14872
|
null
|
|
14841
14873
|
);
|
|
14842
14874
|
function useInfiniteScrollContext() {
|
|
14843
|
-
const ctx =
|
|
14875
|
+
const ctx = React55.useContext(InfiniteScrollContext);
|
|
14844
14876
|
if (!ctx) {
|
|
14845
14877
|
throw new Error(
|
|
14846
14878
|
"useInfiniteScrollContext must be used within an InfiniteScrollContext.Provider"
|
|
@@ -14850,7 +14882,7 @@ function useInfiniteScrollContext() {
|
|
|
14850
14882
|
}
|
|
14851
14883
|
|
|
14852
14884
|
// src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
|
|
14853
|
-
var
|
|
14885
|
+
var import_jsx_runtime163 = require("react/jsx-runtime");
|
|
14854
14886
|
function VirtualMenuList(props) {
|
|
14855
14887
|
const {
|
|
14856
14888
|
id,
|
|
@@ -14885,9 +14917,9 @@ function VirtualMenuList(props) {
|
|
|
14885
14917
|
} = useInfiniteScrollContext();
|
|
14886
14918
|
const Option = components?.Option ?? DefaultOption;
|
|
14887
14919
|
const { t } = (0, import_react_i18next34.useTranslation)();
|
|
14888
|
-
const scrollRef =
|
|
14889
|
-
const lastLoadMoreOptionsLengthRef =
|
|
14890
|
-
const previousHighlightedIndexRef =
|
|
14920
|
+
const scrollRef = React56.useRef(null);
|
|
14921
|
+
const lastLoadMoreOptionsLengthRef = React56.useRef(null);
|
|
14922
|
+
const previousHighlightedIndexRef = React56.useRef(-1);
|
|
14891
14923
|
const showLoaderRow = Boolean(canLoadMore || isLoadingMore);
|
|
14892
14924
|
const itemCount = options.length + (showLoaderRow ? 1 : 0);
|
|
14893
14925
|
const virtualizer = (0, import_react_virtual2.useVirtualizer)({
|
|
@@ -14900,7 +14932,7 @@ function VirtualMenuList(props) {
|
|
|
14900
14932
|
const totalSize = virtualizer.getTotalSize();
|
|
14901
14933
|
const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
|
|
14902
14934
|
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14903
|
-
|
|
14935
|
+
React56.useEffect(() => {
|
|
14904
14936
|
if (!canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14905
14937
|
if (virtualItems.length === 0) return;
|
|
14906
14938
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
@@ -14916,7 +14948,7 @@ function VirtualMenuList(props) {
|
|
|
14916
14948
|
loadMoreItems,
|
|
14917
14949
|
loadMoreThreshold
|
|
14918
14950
|
]);
|
|
14919
|
-
|
|
14951
|
+
React56.useEffect(() => {
|
|
14920
14952
|
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14921
14953
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14922
14954
|
if (highlightedIndex < 0 || !changed) return;
|
|
@@ -14926,8 +14958,8 @@ function VirtualMenuList(props) {
|
|
|
14926
14958
|
const lastOptionIndex = options.length - 1;
|
|
14927
14959
|
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14928
14960
|
const isOptionSelected2 = (option) => isOptionSelectedProp ? isOptionSelectedProp(option, selectedOptions) : selectedOptions.some((s) => s.value === option.value);
|
|
14929
|
-
const wasAtBottomRef =
|
|
14930
|
-
const handleScroll =
|
|
14961
|
+
const wasAtBottomRef = React56.useRef(false);
|
|
14962
|
+
const handleScroll = React56.useCallback(
|
|
14931
14963
|
(event) => {
|
|
14932
14964
|
if (!onMenuScrollToBottom) return;
|
|
14933
14965
|
const target = event.currentTarget;
|
|
@@ -14940,7 +14972,7 @@ function VirtualMenuList(props) {
|
|
|
14940
14972
|
[onMenuScrollToBottom]
|
|
14941
14973
|
);
|
|
14942
14974
|
if (options.length === 0) {
|
|
14943
|
-
return /* @__PURE__ */ (0,
|
|
14975
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
|
|
14944
14976
|
"div",
|
|
14945
14977
|
{
|
|
14946
14978
|
role: "status",
|
|
@@ -14948,8 +14980,8 @@ function VirtualMenuList(props) {
|
|
|
14948
14980
|
"aria-live": "polite",
|
|
14949
14981
|
className: "flex flex-col gap-2",
|
|
14950
14982
|
children: [
|
|
14951
|
-
/* @__PURE__ */ (0,
|
|
14952
|
-
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0,
|
|
14983
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
14984
|
+
Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14953
14985
|
Skeleton,
|
|
14954
14986
|
{
|
|
14955
14987
|
className: "h-10 w-full rounded-md",
|
|
@@ -14959,16 +14991,16 @@ function VirtualMenuList(props) {
|
|
|
14959
14991
|
))
|
|
14960
14992
|
]
|
|
14961
14993
|
}
|
|
14962
|
-
) : /* @__PURE__ */ (0,
|
|
14994
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "flex min-h-[40px] items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]", children: emptyMessage }) });
|
|
14963
14995
|
}
|
|
14964
|
-
return /* @__PURE__ */ (0,
|
|
14996
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14965
14997
|
"div",
|
|
14966
14998
|
{
|
|
14967
14999
|
ref: scrollRef,
|
|
14968
15000
|
className: cn("overflow-y-auto", menuClassName),
|
|
14969
15001
|
style: { height: `${measuredListHeight}px` },
|
|
14970
15002
|
onScroll: onMenuScrollToBottom ? handleScroll : void 0,
|
|
14971
|
-
children: /* @__PURE__ */ (0,
|
|
15003
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14972
15004
|
"div",
|
|
14973
15005
|
{
|
|
14974
15006
|
id,
|
|
@@ -14988,7 +15020,7 @@ function VirtualMenuList(props) {
|
|
|
14988
15020
|
disabled || option?.isDisabled || option && isOptionDisabled?.(option)
|
|
14989
15021
|
);
|
|
14990
15022
|
const isLastOption = !isLoaderRow && virtualItem.index === lastOptionIndex && !canLoadMore;
|
|
14991
|
-
return /* @__PURE__ */ (0,
|
|
15023
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
14992
15024
|
"div",
|
|
14993
15025
|
{
|
|
14994
15026
|
"data-index": virtualItem.index,
|
|
@@ -14997,7 +15029,7 @@ function VirtualMenuList(props) {
|
|
|
14997
15029
|
height: `${virtualItem.size}px`,
|
|
14998
15030
|
transform: `translateY(${virtualItem.start}px)`
|
|
14999
15031
|
},
|
|
15000
|
-
children: isLoaderRow ? /* @__PURE__ */ (0,
|
|
15032
|
+
children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
|
|
15001
15033
|
"div",
|
|
15002
15034
|
{
|
|
15003
15035
|
role: "status",
|
|
@@ -15005,8 +15037,8 @@ function VirtualMenuList(props) {
|
|
|
15005
15037
|
"aria-live": "polite",
|
|
15006
15038
|
className: "flex h-full items-center justify-center",
|
|
15007
15039
|
children: [
|
|
15008
|
-
/* @__PURE__ */ (0,
|
|
15009
|
-
/* @__PURE__ */ (0,
|
|
15040
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "sr-only", children: resolvedLoadingMoreText }),
|
|
15041
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
15010
15042
|
ThreeDotsLoader,
|
|
15011
15043
|
{
|
|
15012
15044
|
height: 24,
|
|
@@ -15016,7 +15048,7 @@ function VirtualMenuList(props) {
|
|
|
15016
15048
|
)
|
|
15017
15049
|
]
|
|
15018
15050
|
}
|
|
15019
|
-
) : option ? /* @__PURE__ */ (0,
|
|
15051
|
+
) : option ? /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
15020
15052
|
Option,
|
|
15021
15053
|
{
|
|
15022
15054
|
id: getOptionId2(virtualItem.index),
|
|
@@ -15046,7 +15078,7 @@ function VirtualMenuList(props) {
|
|
|
15046
15078
|
}
|
|
15047
15079
|
|
|
15048
15080
|
// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
|
|
15049
|
-
var
|
|
15081
|
+
var import_jsx_runtime164 = require("react/jsx-runtime");
|
|
15050
15082
|
var DEFAULT_ITEM_HEIGHT = 60;
|
|
15051
15083
|
var DEFAULT_LIST_HEIGHT = 322;
|
|
15052
15084
|
var DEFAULT_OVERSCAN = 5;
|
|
@@ -15074,8 +15106,8 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
15074
15106
|
const getFullSearchOption = isMulti ? void 0 : getFullSearchOptionProp;
|
|
15075
15107
|
const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
|
|
15076
15108
|
const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
|
|
15077
|
-
const [inputValue, setInputValue] =
|
|
15078
|
-
const filteredOptions =
|
|
15109
|
+
const [inputValue, setInputValue] = React57.useState("");
|
|
15110
|
+
const filteredOptions = React57.useMemo(() => {
|
|
15079
15111
|
const trimmed = inputValue.trim();
|
|
15080
15112
|
const valueLabel = (() => {
|
|
15081
15113
|
if (isMulti) return "";
|
|
@@ -15094,7 +15126,7 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
15094
15126
|
}
|
|
15095
15127
|
return list;
|
|
15096
15128
|
}, [rawOptions, inputValue, filterOption, getFullSearchOption, isMulti, rest]);
|
|
15097
|
-
const contextValue =
|
|
15129
|
+
const contextValue = React57.useMemo(
|
|
15098
15130
|
() => ({
|
|
15099
15131
|
canLoadMore,
|
|
15100
15132
|
isLoadingMore,
|
|
@@ -15116,11 +15148,11 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
15116
15148
|
loadMoreThreshold
|
|
15117
15149
|
]
|
|
15118
15150
|
);
|
|
15119
|
-
const components =
|
|
15151
|
+
const components = React57.useMemo(
|
|
15120
15152
|
() => ({ ...userComponents, MenuList: VirtualMenuList }),
|
|
15121
15153
|
[userComponents]
|
|
15122
15154
|
);
|
|
15123
|
-
const handleInputChange =
|
|
15155
|
+
const handleInputChange = React57.useCallback(
|
|
15124
15156
|
(value) => {
|
|
15125
15157
|
setInputValue(value);
|
|
15126
15158
|
onSearchChange?.(value);
|
|
@@ -15134,7 +15166,7 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
15134
15166
|
components,
|
|
15135
15167
|
onInputChange: handleInputChange
|
|
15136
15168
|
};
|
|
15137
|
-
return /* @__PURE__ */ (0,
|
|
15169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(InfiniteScrollContext.Provider, { value: contextValue, children: isMulti ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15138
15170
|
Select,
|
|
15139
15171
|
{
|
|
15140
15172
|
ref,
|
|
@@ -15142,7 +15174,7 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
15142
15174
|
...selectExtras,
|
|
15143
15175
|
isMulti: true
|
|
15144
15176
|
}
|
|
15145
|
-
) : /* @__PURE__ */ (0,
|
|
15177
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
15146
15178
|
Select,
|
|
15147
15179
|
{
|
|
15148
15180
|
ref,
|
|
@@ -15152,27 +15184,27 @@ function InfiniteScrollSelectInternal(props, ref) {
|
|
|
15152
15184
|
}
|
|
15153
15185
|
) });
|
|
15154
15186
|
}
|
|
15155
|
-
var InfiniteScrollSelect =
|
|
15187
|
+
var InfiniteScrollSelect = React57.forwardRef(
|
|
15156
15188
|
InfiniteScrollSelectInternal
|
|
15157
15189
|
);
|
|
15158
15190
|
|
|
15159
15191
|
// src/dashboard/infinite-scroll-multi-select/InfiniteScrollMultiSelect.tsx
|
|
15160
|
-
var
|
|
15161
|
-
var
|
|
15162
|
-
var InfiniteScrollMultiSelect =
|
|
15192
|
+
var React58 = __toESM(require("react"), 1);
|
|
15193
|
+
var import_jsx_runtime165 = require("react/jsx-runtime");
|
|
15194
|
+
var InfiniteScrollMultiSelect = React58.forwardRef(function InfiniteScrollMultiSelect2(props, ref) {
|
|
15163
15195
|
const Forwarded = InfiniteScrollSelect;
|
|
15164
|
-
return /* @__PURE__ */ (0,
|
|
15196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(Forwarded, { ...props, ref, isMulti: true });
|
|
15165
15197
|
});
|
|
15166
15198
|
|
|
15167
15199
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15168
|
-
var
|
|
15200
|
+
var React59 = __toESM(require("react"), 1);
|
|
15169
15201
|
var import_react_i18next36 = require("react-i18next");
|
|
15170
15202
|
|
|
15171
15203
|
// src/dashboard/select-checkboxes/VisualCheckbox.tsx
|
|
15172
15204
|
var import_lucide_react48 = require("lucide-react");
|
|
15173
|
-
var
|
|
15205
|
+
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
15174
15206
|
function VisualCheckbox({ checked, disabled, className }) {
|
|
15175
|
-
return /* @__PURE__ */ (0,
|
|
15207
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
|
|
15176
15208
|
"span",
|
|
15177
15209
|
{
|
|
15178
15210
|
"aria-hidden": "true",
|
|
@@ -15183,13 +15215,13 @@ function VisualCheckbox({ checked, disabled, className }) {
|
|
|
15183
15215
|
disabled && "opacity-50",
|
|
15184
15216
|
className
|
|
15185
15217
|
),
|
|
15186
|
-
children: checked && /* @__PURE__ */ (0,
|
|
15218
|
+
children: checked && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_lucide_react48.Check, { className: "checkbox__icon h-3 w-3" })
|
|
15187
15219
|
}
|
|
15188
15220
|
);
|
|
15189
15221
|
}
|
|
15190
15222
|
|
|
15191
15223
|
// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
|
|
15192
|
-
var
|
|
15224
|
+
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
15193
15225
|
function SelectCheckboxOption(props) {
|
|
15194
15226
|
const {
|
|
15195
15227
|
option,
|
|
@@ -15202,7 +15234,7 @@ function SelectCheckboxOption(props) {
|
|
|
15202
15234
|
onHover,
|
|
15203
15235
|
innerRef
|
|
15204
15236
|
} = props;
|
|
15205
|
-
return /* @__PURE__ */ (0,
|
|
15237
|
+
return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
|
|
15206
15238
|
"button",
|
|
15207
15239
|
{
|
|
15208
15240
|
id,
|
|
@@ -15223,10 +15255,10 @@ function SelectCheckboxOption(props) {
|
|
|
15223
15255
|
isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
|
|
15224
15256
|
),
|
|
15225
15257
|
children: [
|
|
15226
|
-
/* @__PURE__ */ (0,
|
|
15227
|
-
/* @__PURE__ */ (0,
|
|
15228
|
-
/* @__PURE__ */ (0,
|
|
15229
|
-
option.description && /* @__PURE__ */ (0,
|
|
15258
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)(VisualCheckbox, { checked: isSelected, disabled: isDisabled }),
|
|
15259
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
|
|
15260
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "block break-words", children: option.label }),
|
|
15261
|
+
option.description && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
|
|
15230
15262
|
] })
|
|
15231
15263
|
]
|
|
15232
15264
|
}
|
|
@@ -15236,7 +15268,7 @@ function SelectCheckboxOption(props) {
|
|
|
15236
15268
|
// src/dashboard/select-checkboxes/CountTrigger.tsx
|
|
15237
15269
|
var import_lucide_react49 = require("lucide-react");
|
|
15238
15270
|
var import_react_i18next35 = require("react-i18next");
|
|
15239
|
-
var
|
|
15271
|
+
var import_jsx_runtime168 = require("react/jsx-runtime");
|
|
15240
15272
|
function createCountTrigger(opts) {
|
|
15241
15273
|
const { getValueText, getTotalCount } = opts;
|
|
15242
15274
|
function CountTrigger(props) {
|
|
@@ -15266,7 +15298,7 @@ function createCountTrigger(opts) {
|
|
|
15266
15298
|
const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
|
|
15267
15299
|
const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
|
|
15268
15300
|
const isEmpty = !hasValue;
|
|
15269
|
-
return /* @__PURE__ */ (0,
|
|
15301
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
|
|
15270
15302
|
"button",
|
|
15271
15303
|
{
|
|
15272
15304
|
id: triggerId,
|
|
@@ -15289,9 +15321,9 @@ function createCountTrigger(opts) {
|
|
|
15289
15321
|
loading && "!cursor-progress"
|
|
15290
15322
|
),
|
|
15291
15323
|
children: [
|
|
15292
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
15293
|
-
/* @__PURE__ */ (0,
|
|
15294
|
-
/* @__PURE__ */ (0,
|
|
15324
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
|
|
15325
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
|
|
15326
|
+
/* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
|
|
15295
15327
|
import_lucide_react49.ChevronDown,
|
|
15296
15328
|
{
|
|
15297
15329
|
size: 16,
|
|
@@ -15309,9 +15341,9 @@ function createCountTrigger(opts) {
|
|
|
15309
15341
|
}
|
|
15310
15342
|
|
|
15311
15343
|
// src/dashboard/select-checkboxes/SelectAllRow.tsx
|
|
15312
|
-
var
|
|
15344
|
+
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
15313
15345
|
function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
15314
|
-
return /* @__PURE__ */ (0,
|
|
15346
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
|
|
15315
15347
|
"button",
|
|
15316
15348
|
{
|
|
15317
15349
|
type: "button",
|
|
@@ -15322,21 +15354,21 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
|
|
|
15322
15354
|
disabled && "cursor-default opacity-40"
|
|
15323
15355
|
),
|
|
15324
15356
|
children: [
|
|
15325
|
-
/* @__PURE__ */ (0,
|
|
15326
|
-
/* @__PURE__ */ (0,
|
|
15357
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(VisualCheckbox, { checked, disabled }),
|
|
15358
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "flex-1", children: label })
|
|
15327
15359
|
]
|
|
15328
15360
|
}
|
|
15329
15361
|
);
|
|
15330
15362
|
}
|
|
15331
15363
|
|
|
15332
15364
|
// src/dashboard/select-checkboxes/SelectCheckboxes.tsx
|
|
15333
|
-
var
|
|
15365
|
+
var import_jsx_runtime170 = require("react/jsx-runtime");
|
|
15334
15366
|
function hasPaginationProps(props) {
|
|
15335
15367
|
return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
|
|
15336
15368
|
}
|
|
15337
15369
|
function makeTriggerSlot(render) {
|
|
15338
15370
|
function CustomTrigger(props) {
|
|
15339
|
-
return /* @__PURE__ */ (0,
|
|
15371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_jsx_runtime170.Fragment, { children: render(props.isOpen, props.onContainerClick) });
|
|
15340
15372
|
}
|
|
15341
15373
|
return CustomTrigger;
|
|
15342
15374
|
}
|
|
@@ -15362,25 +15394,25 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15362
15394
|
const isPaginated = hasPaginationProps(
|
|
15363
15395
|
paginationAndRest
|
|
15364
15396
|
);
|
|
15365
|
-
const [inputValue, setInputValue] =
|
|
15397
|
+
const [inputValue, setInputValue] = React59.useState("");
|
|
15366
15398
|
const isControlled = value !== void 0;
|
|
15367
|
-
const [internalValue, setInternalValue] =
|
|
15399
|
+
const [internalValue, setInternalValue] = React59.useState(
|
|
15368
15400
|
() => defaultValue ?? []
|
|
15369
15401
|
);
|
|
15370
15402
|
const currentValue = isControlled ? value : internalValue;
|
|
15371
|
-
const selected =
|
|
15372
|
-
const handleChange =
|
|
15403
|
+
const selected = React59.useMemo(() => currentValue ?? [], [currentValue]);
|
|
15404
|
+
const handleChange = React59.useCallback(
|
|
15373
15405
|
(next, meta) => {
|
|
15374
15406
|
if (!isControlled) setInternalValue(next);
|
|
15375
15407
|
onChange?.(next, meta);
|
|
15376
15408
|
},
|
|
15377
15409
|
[isControlled, onChange]
|
|
15378
15410
|
);
|
|
15379
|
-
const flatRawOptions =
|
|
15411
|
+
const flatRawOptions = React59.useMemo(
|
|
15380
15412
|
() => flattenGroupedOptions(rawOptions),
|
|
15381
15413
|
[rawOptions]
|
|
15382
15414
|
);
|
|
15383
|
-
const filteredGrouped =
|
|
15415
|
+
const filteredGrouped = React59.useMemo(() => {
|
|
15384
15416
|
const trimmed = inputValue.trim();
|
|
15385
15417
|
if (!trimmed) return rawOptions;
|
|
15386
15418
|
return rawOptions.map((item) => {
|
|
@@ -15391,7 +15423,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15391
15423
|
return filterOption(item, trimmed) ? item : null;
|
|
15392
15424
|
}).filter((item) => item !== null);
|
|
15393
15425
|
}, [rawOptions, inputValue, filterOption]);
|
|
15394
|
-
const filteredFlat =
|
|
15426
|
+
const filteredFlat = React59.useMemo(
|
|
15395
15427
|
() => flattenGroupedOptions(filteredGrouped),
|
|
15396
15428
|
[filteredGrouped]
|
|
15397
15429
|
);
|
|
@@ -15399,7 +15431,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15399
15431
|
return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
|
|
15400
15432
|
}, 0);
|
|
15401
15433
|
const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
|
|
15402
|
-
const handleToggleAll =
|
|
15434
|
+
const handleToggleAll = React59.useCallback(() => {
|
|
15403
15435
|
if (allVisibleSelected) {
|
|
15404
15436
|
const visibleValues = new Set(filteredFlat.map((option) => option.value));
|
|
15405
15437
|
handleChange(
|
|
@@ -15414,18 +15446,18 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15414
15446
|
}
|
|
15415
15447
|
handleChange(merged, { action: "select" });
|
|
15416
15448
|
}, [allVisibleSelected, filteredFlat, handleChange, selected]);
|
|
15417
|
-
const valueTextRef =
|
|
15418
|
-
const totalCountRef =
|
|
15449
|
+
const valueTextRef = React59.useRef(valueText);
|
|
15450
|
+
const totalCountRef = React59.useRef(flatRawOptions.length);
|
|
15419
15451
|
valueTextRef.current = valueText;
|
|
15420
15452
|
totalCountRef.current = flatRawOptions.length;
|
|
15421
|
-
const Control =
|
|
15453
|
+
const Control = React59.useMemo(() => {
|
|
15422
15454
|
if (trigger) return makeTriggerSlot(trigger);
|
|
15423
15455
|
return createCountTrigger({
|
|
15424
15456
|
getValueText: () => valueTextRef.current,
|
|
15425
15457
|
getTotalCount: () => totalCountRef.current
|
|
15426
15458
|
});
|
|
15427
15459
|
}, [trigger]);
|
|
15428
|
-
const components =
|
|
15460
|
+
const components = React59.useMemo(
|
|
15429
15461
|
() => ({
|
|
15430
15462
|
...userComponents,
|
|
15431
15463
|
Control,
|
|
@@ -15433,7 +15465,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15433
15465
|
}),
|
|
15434
15466
|
[userComponents, Control]
|
|
15435
15467
|
);
|
|
15436
|
-
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0,
|
|
15468
|
+
const menuHeader = allowSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15437
15469
|
SelectAllRow,
|
|
15438
15470
|
{
|
|
15439
15471
|
label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
|
|
@@ -15441,7 +15473,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15441
15473
|
onToggle: handleToggleAll
|
|
15442
15474
|
}
|
|
15443
15475
|
) : void 0;
|
|
15444
|
-
const handleInputChange =
|
|
15476
|
+
const handleInputChange = React59.useCallback(
|
|
15445
15477
|
(next) => {
|
|
15446
15478
|
setInputValue(next);
|
|
15447
15479
|
onSearchChange?.(next);
|
|
@@ -15462,7 +15494,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15462
15494
|
isMulti: true
|
|
15463
15495
|
};
|
|
15464
15496
|
if (isPaginated) {
|
|
15465
|
-
return /* @__PURE__ */ (0,
|
|
15497
|
+
return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15466
15498
|
InfiniteScrollSelect,
|
|
15467
15499
|
{
|
|
15468
15500
|
ref,
|
|
@@ -15473,7 +15505,7 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15473
15505
|
}
|
|
15474
15506
|
);
|
|
15475
15507
|
}
|
|
15476
|
-
return /* @__PURE__ */ (0,
|
|
15508
|
+
return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
15477
15509
|
Select,
|
|
15478
15510
|
{
|
|
15479
15511
|
ref,
|
|
@@ -15484,16 +15516,16 @@ function SelectCheckboxesInternal(props, ref) {
|
|
|
15484
15516
|
}
|
|
15485
15517
|
);
|
|
15486
15518
|
}
|
|
15487
|
-
var SelectCheckboxes =
|
|
15519
|
+
var SelectCheckboxes = React59.forwardRef(
|
|
15488
15520
|
SelectCheckboxesInternal
|
|
15489
15521
|
);
|
|
15490
15522
|
|
|
15491
15523
|
// src/dashboard/textarea/Textarea.tsx
|
|
15492
|
-
var
|
|
15524
|
+
var React61 = __toESM(require("react"), 1);
|
|
15493
15525
|
var import_react_i18next37 = require("react-i18next");
|
|
15494
15526
|
|
|
15495
15527
|
// src/dashboard/textarea/useTextareaValueState.ts
|
|
15496
|
-
var
|
|
15528
|
+
var React60 = __toESM(require("react"), 1);
|
|
15497
15529
|
var isEmptyValue2 = (value) => {
|
|
15498
15530
|
if (value === void 0 || value === null) return true;
|
|
15499
15531
|
return String(value).length === 0;
|
|
@@ -15512,12 +15544,12 @@ function useTextareaValueState({
|
|
|
15512
15544
|
value,
|
|
15513
15545
|
defaultValue
|
|
15514
15546
|
}) {
|
|
15515
|
-
const textareaRef =
|
|
15547
|
+
const textareaRef = React60.useRef(null);
|
|
15516
15548
|
const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
|
|
15517
15549
|
const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
|
|
15518
|
-
const [nativeIsEmpty, setNativeIsEmpty] =
|
|
15550
|
+
const [nativeIsEmpty, setNativeIsEmpty] = React60.useState(propsAreEmpty);
|
|
15519
15551
|
const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
|
|
15520
|
-
const setNativeValue =
|
|
15552
|
+
const setNativeValue = React60.useCallback(
|
|
15521
15553
|
(nextValue) => {
|
|
15522
15554
|
if (isControlled) return;
|
|
15523
15555
|
const nextIsEmpty = nextValue.length === 0;
|
|
@@ -15527,14 +15559,14 @@ function useTextareaValueState({
|
|
|
15527
15559
|
},
|
|
15528
15560
|
[isControlled]
|
|
15529
15561
|
);
|
|
15530
|
-
const syncValueState =
|
|
15562
|
+
const syncValueState = React60.useCallback(() => {
|
|
15531
15563
|
if (!textareaRef.current) return;
|
|
15532
15564
|
setNativeValue(textareaRef.current.value);
|
|
15533
15565
|
}, [setNativeValue]);
|
|
15534
|
-
|
|
15566
|
+
React60.useLayoutEffect(() => {
|
|
15535
15567
|
syncValueState();
|
|
15536
15568
|
});
|
|
15537
|
-
|
|
15569
|
+
React60.useEffect(() => {
|
|
15538
15570
|
const textarea = textareaRef.current;
|
|
15539
15571
|
const form = textarea?.form;
|
|
15540
15572
|
if (isControlled || !form) return;
|
|
@@ -15558,10 +15590,10 @@ function useTextareaValueState({
|
|
|
15558
15590
|
}
|
|
15559
15591
|
|
|
15560
15592
|
// src/dashboard/textarea/Textarea.tsx
|
|
15561
|
-
var
|
|
15593
|
+
var import_jsx_runtime171 = require("react/jsx-runtime");
|
|
15562
15594
|
var LINE_HEIGHT = 20;
|
|
15563
15595
|
var VERTICAL_PADDING = 32;
|
|
15564
|
-
var Textarea =
|
|
15596
|
+
var Textarea = React61.forwardRef(function Textarea2({
|
|
15565
15597
|
className,
|
|
15566
15598
|
textareaClassName,
|
|
15567
15599
|
label,
|
|
@@ -15589,12 +15621,12 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15589
15621
|
}, ref) {
|
|
15590
15622
|
const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
|
|
15591
15623
|
const combinedRef = useCombinedRef(ref, textareaRef);
|
|
15592
|
-
const reactId =
|
|
15624
|
+
const reactId = React61.useId();
|
|
15593
15625
|
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15594
15626
|
const { t } = (0, import_react_i18next37.useTranslation)();
|
|
15595
15627
|
const isInvalid = Boolean(invalid || error);
|
|
15596
15628
|
const isBlocked = Boolean(disabled);
|
|
15597
|
-
const resize =
|
|
15629
|
+
const resize = React61.useCallback(() => {
|
|
15598
15630
|
const el = textareaRef.current;
|
|
15599
15631
|
if (!el || !autosize) return;
|
|
15600
15632
|
el.style.height = "auto";
|
|
@@ -15604,7 +15636,7 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15604
15636
|
el.style.height = `${nextHeight}px`;
|
|
15605
15637
|
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15606
15638
|
}, [autosize, maxRows, minRows, textareaRef]);
|
|
15607
|
-
|
|
15639
|
+
React61.useLayoutEffect(() => {
|
|
15608
15640
|
resize();
|
|
15609
15641
|
}, [resize, value]);
|
|
15610
15642
|
const handleInput = (event) => {
|
|
@@ -15627,7 +15659,7 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15627
15659
|
onBlur?.(event);
|
|
15628
15660
|
syncValueState();
|
|
15629
15661
|
};
|
|
15630
|
-
return /* @__PURE__ */ (0,
|
|
15662
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(
|
|
15631
15663
|
"div",
|
|
15632
15664
|
{
|
|
15633
15665
|
className: cn(
|
|
@@ -15637,18 +15669,18 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15637
15669
|
className
|
|
15638
15670
|
),
|
|
15639
15671
|
children: [
|
|
15640
|
-
label && /* @__PURE__ */ (0,
|
|
15672
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(
|
|
15641
15673
|
"label",
|
|
15642
15674
|
{
|
|
15643
15675
|
htmlFor: textareaId,
|
|
15644
|
-
className: "mb-2 flex select-none items-center text-[
|
|
15676
|
+
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)]",
|
|
15645
15677
|
children: [
|
|
15646
15678
|
label,
|
|
15647
|
-
tooltip && /* @__PURE__ */ (0,
|
|
15679
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15648
15680
|
]
|
|
15649
15681
|
}
|
|
15650
15682
|
),
|
|
15651
|
-
/* @__PURE__ */ (0,
|
|
15683
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
15652
15684
|
"textarea",
|
|
15653
15685
|
{
|
|
15654
15686
|
ref: combinedRef,
|
|
@@ -15667,10 +15699,10 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15667
15699
|
onBlur: handleBlur,
|
|
15668
15700
|
className: cn(
|
|
15669
15701
|
"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",
|
|
15670
|
-
"border-[var(--
|
|
15671
|
-
!isBlocked && "focus:border-[var(--
|
|
15672
|
-
isEmpty && "border-[var(--
|
|
15673
|
-
isInvalid && "border-[var(--
|
|
15702
|
+
"border-[var(--field-border)] placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)]",
|
|
15703
|
+
!isBlocked && "focus:border-[var(--field-border-focused)]",
|
|
15704
|
+
isEmpty && "border-[var(--field-border)] bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]",
|
|
15705
|
+
isInvalid && "border-[var(--field-border-invalid)] focus:border-[var(--field-border-invalid)]",
|
|
15674
15706
|
(readOnly || isBlocked) && "cursor-default",
|
|
15675
15707
|
isBlocked && "cursor-not-allowed",
|
|
15676
15708
|
loading && "cursor-progress",
|
|
@@ -15680,7 +15712,7 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15680
15712
|
...textareaProps
|
|
15681
15713
|
}
|
|
15682
15714
|
),
|
|
15683
|
-
error && /* @__PURE__ */ (0,
|
|
15715
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
15684
15716
|
FieldErrorMessage,
|
|
15685
15717
|
{
|
|
15686
15718
|
id: `${textareaId}-error`,
|
|
@@ -15688,20 +15720,20 @@ var Textarea = React60.forwardRef(function Textarea2({
|
|
|
15688
15720
|
className: "mt-[1px] text-[14px]"
|
|
15689
15721
|
}
|
|
15690
15722
|
),
|
|
15691
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
15692
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
15723
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
15724
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15693
15725
|
]
|
|
15694
15726
|
}
|
|
15695
15727
|
);
|
|
15696
15728
|
});
|
|
15697
15729
|
|
|
15698
15730
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
15699
|
-
var
|
|
15731
|
+
var React63 = __toESM(require("react"), 1);
|
|
15700
15732
|
var import_lucide_react50 = require("lucide-react");
|
|
15701
15733
|
var import_react_i18next38 = require("react-i18next");
|
|
15702
15734
|
|
|
15703
15735
|
// src/airbnb-fields/datepicker/useDatePickerWheel.ts
|
|
15704
|
-
var
|
|
15736
|
+
var React62 = __toESM(require("react"), 1);
|
|
15705
15737
|
|
|
15706
15738
|
// src/airbnb-fields/datepicker/datePicker.utils.ts
|
|
15707
15739
|
var DISPLAY_PAD_LENGTH = 2;
|
|
@@ -15852,21 +15884,21 @@ function useDatePickerWheel({
|
|
|
15852
15884
|
minDate,
|
|
15853
15885
|
maxDate
|
|
15854
15886
|
}) {
|
|
15855
|
-
const years =
|
|
15856
|
-
const [draftDate, setDraftDate] =
|
|
15887
|
+
const years = React62.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
|
|
15888
|
+
const [draftDate, setDraftDate] = React62.useState(
|
|
15857
15889
|
() => resolveInitialDate({ value, defaultValue, minDate, maxDate })
|
|
15858
15890
|
);
|
|
15859
15891
|
const draftYear = draftDate.getFullYear();
|
|
15860
15892
|
const draftMonth = draftDate.getMonth();
|
|
15861
|
-
const [monthScrollTop, setMonthScrollTop] =
|
|
15862
|
-
const [dayScrollTop, setDayScrollTop] =
|
|
15863
|
-
const [yearScrollTop, setYearScrollTop] =
|
|
15864
|
-
const monthListRef =
|
|
15865
|
-
const dayListRef =
|
|
15866
|
-
const yearListRef =
|
|
15867
|
-
const settleTimeoutsRef =
|
|
15868
|
-
const animationFramesRef =
|
|
15869
|
-
const columnRefs =
|
|
15893
|
+
const [monthScrollTop, setMonthScrollTop] = React62.useState(0);
|
|
15894
|
+
const [dayScrollTop, setDayScrollTop] = React62.useState(0);
|
|
15895
|
+
const [yearScrollTop, setYearScrollTop] = React62.useState(0);
|
|
15896
|
+
const monthListRef = React62.useRef(null);
|
|
15897
|
+
const dayListRef = React62.useRef(null);
|
|
15898
|
+
const yearListRef = React62.useRef(null);
|
|
15899
|
+
const settleTimeoutsRef = React62.useRef({});
|
|
15900
|
+
const animationFramesRef = React62.useRef({});
|
|
15901
|
+
const columnRefs = React62.useMemo(
|
|
15870
15902
|
() => ({
|
|
15871
15903
|
month: monthListRef,
|
|
15872
15904
|
day: dayListRef,
|
|
@@ -15874,7 +15906,7 @@ function useDatePickerWheel({
|
|
|
15874
15906
|
}),
|
|
15875
15907
|
[]
|
|
15876
15908
|
);
|
|
15877
|
-
const setColumnScrollTop =
|
|
15909
|
+
const setColumnScrollTop = React62.useCallback(
|
|
15878
15910
|
(column, nextScrollTop) => {
|
|
15879
15911
|
if (column === "month") {
|
|
15880
15912
|
setMonthScrollTop(nextScrollTop);
|
|
@@ -15888,19 +15920,19 @@ function useDatePickerWheel({
|
|
|
15888
15920
|
},
|
|
15889
15921
|
[]
|
|
15890
15922
|
);
|
|
15891
|
-
const clearSettleTimeout =
|
|
15923
|
+
const clearSettleTimeout = React62.useCallback((column) => {
|
|
15892
15924
|
const timeoutId = settleTimeoutsRef.current[column];
|
|
15893
15925
|
if (timeoutId === void 0) return;
|
|
15894
15926
|
window.clearTimeout(timeoutId);
|
|
15895
15927
|
delete settleTimeoutsRef.current[column];
|
|
15896
15928
|
}, []);
|
|
15897
|
-
const clearAnimationFrame =
|
|
15929
|
+
const clearAnimationFrame = React62.useCallback((column) => {
|
|
15898
15930
|
const frameId = animationFramesRef.current[column];
|
|
15899
15931
|
if (frameId === void 0) return;
|
|
15900
15932
|
window.cancelAnimationFrame(frameId);
|
|
15901
15933
|
delete animationFramesRef.current[column];
|
|
15902
15934
|
}, []);
|
|
15903
|
-
|
|
15935
|
+
React62.useEffect(
|
|
15904
15936
|
() => () => {
|
|
15905
15937
|
["month", "day", "year"].forEach((column) => {
|
|
15906
15938
|
clearSettleTimeout(column);
|
|
@@ -15909,22 +15941,22 @@ function useDatePickerWheel({
|
|
|
15909
15941
|
},
|
|
15910
15942
|
[clearAnimationFrame, clearSettleTimeout]
|
|
15911
15943
|
);
|
|
15912
|
-
|
|
15944
|
+
React62.useEffect(() => {
|
|
15913
15945
|
if (isOpen) return;
|
|
15914
15946
|
setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
|
|
15915
15947
|
}, [defaultValue, isOpen, maxDate, minDate, value]);
|
|
15916
|
-
const months =
|
|
15948
|
+
const months = React62.useMemo(
|
|
15917
15949
|
() => getAllowedMonths(draftYear, minDate, maxDate),
|
|
15918
15950
|
[draftYear, maxDate, minDate]
|
|
15919
15951
|
);
|
|
15920
|
-
const days =
|
|
15952
|
+
const days = React62.useMemo(
|
|
15921
15953
|
() => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
|
|
15922
15954
|
[draftMonth, draftYear, maxDate, minDate]
|
|
15923
15955
|
);
|
|
15924
15956
|
const monthIndex = months.findIndex((month) => month === draftMonth);
|
|
15925
15957
|
const dayIndex = days.findIndex((day) => day === draftDate.getDate());
|
|
15926
15958
|
const yearIndex = years.findIndex((year) => year === draftYear);
|
|
15927
|
-
const syncScrollPositions =
|
|
15959
|
+
const syncScrollPositions = React62.useCallback(
|
|
15928
15960
|
(nextDate, behavior = "auto") => {
|
|
15929
15961
|
const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
|
|
15930
15962
|
const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
|
|
@@ -15948,7 +15980,7 @@ function useDatePickerWheel({
|
|
|
15948
15980
|
},
|
|
15949
15981
|
[maxDate, minDate, years]
|
|
15950
15982
|
);
|
|
15951
|
-
|
|
15983
|
+
React62.useLayoutEffect(() => {
|
|
15952
15984
|
if (!isOpen) return;
|
|
15953
15985
|
const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
|
|
15954
15986
|
setDraftDate(nextDate);
|
|
@@ -15959,7 +15991,7 @@ function useDatePickerWheel({
|
|
|
15959
15991
|
window.cancelAnimationFrame(frameId);
|
|
15960
15992
|
};
|
|
15961
15993
|
}, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
|
|
15962
|
-
const updateDraftDate =
|
|
15994
|
+
const updateDraftDate = React62.useCallback(
|
|
15963
15995
|
(column, targetIndex, behavior = "smooth") => {
|
|
15964
15996
|
const currentDate = stripTime(draftDate);
|
|
15965
15997
|
const currentYear = currentDate.getFullYear();
|
|
@@ -16004,7 +16036,7 @@ function useDatePickerWheel({
|
|
|
16004
16036
|
},
|
|
16005
16037
|
[days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
|
|
16006
16038
|
);
|
|
16007
|
-
const settleColumnScroll =
|
|
16039
|
+
const settleColumnScroll = React62.useCallback(
|
|
16008
16040
|
(column) => {
|
|
16009
16041
|
const list = columnRefs[column].current;
|
|
16010
16042
|
if (!list) return;
|
|
@@ -16017,7 +16049,7 @@ function useDatePickerWheel({
|
|
|
16017
16049
|
},
|
|
16018
16050
|
[columnRefs, days.length, months.length, updateDraftDate, years.length]
|
|
16019
16051
|
);
|
|
16020
|
-
const scheduleScrollSettle =
|
|
16052
|
+
const scheduleScrollSettle = React62.useCallback(
|
|
16021
16053
|
(column) => {
|
|
16022
16054
|
clearSettleTimeout(column);
|
|
16023
16055
|
settleTimeoutsRef.current[column] = window.setTimeout(() => {
|
|
@@ -16026,7 +16058,7 @@ function useDatePickerWheel({
|
|
|
16026
16058
|
},
|
|
16027
16059
|
[clearSettleTimeout, settleColumnScroll]
|
|
16028
16060
|
);
|
|
16029
|
-
const handleColumnScroll =
|
|
16061
|
+
const handleColumnScroll = React62.useCallback(
|
|
16030
16062
|
(column) => {
|
|
16031
16063
|
const list = columnRefs[column].current;
|
|
16032
16064
|
if (!list) return;
|
|
@@ -16040,13 +16072,13 @@ function useDatePickerWheel({
|
|
|
16040
16072
|
},
|
|
16041
16073
|
[clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
|
|
16042
16074
|
);
|
|
16043
|
-
const handleOptionSelect =
|
|
16075
|
+
const handleOptionSelect = React62.useCallback(
|
|
16044
16076
|
(column, targetIndex) => {
|
|
16045
16077
|
updateDraftDate(column, targetIndex, "smooth");
|
|
16046
16078
|
},
|
|
16047
16079
|
[updateDraftDate]
|
|
16048
16080
|
);
|
|
16049
|
-
const focusAdjacentColumn =
|
|
16081
|
+
const focusAdjacentColumn = React62.useCallback(
|
|
16050
16082
|
(column, direction) => {
|
|
16051
16083
|
const order = ["month", "day", "year"];
|
|
16052
16084
|
const currentIndex = order.indexOf(column);
|
|
@@ -16056,7 +16088,7 @@ function useDatePickerWheel({
|
|
|
16056
16088
|
},
|
|
16057
16089
|
[columnRefs]
|
|
16058
16090
|
);
|
|
16059
|
-
const handleColumnKeyDown =
|
|
16091
|
+
const handleColumnKeyDown = React62.useCallback(
|
|
16060
16092
|
(column, event) => {
|
|
16061
16093
|
const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
|
|
16062
16094
|
const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
|
|
@@ -16122,7 +16154,7 @@ function useDatePickerWheel({
|
|
|
16122
16154
|
}
|
|
16123
16155
|
|
|
16124
16156
|
// src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
|
|
16125
|
-
var
|
|
16157
|
+
var import_jsx_runtime172 = require("react/jsx-runtime");
|
|
16126
16158
|
var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
|
|
16127
16159
|
function AirbnbDatePickerWheelColumn({
|
|
16128
16160
|
id,
|
|
@@ -16136,7 +16168,7 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16136
16168
|
onOptionSelect,
|
|
16137
16169
|
column
|
|
16138
16170
|
}) {
|
|
16139
|
-
return /* @__PURE__ */ (0,
|
|
16171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
16140
16172
|
"div",
|
|
16141
16173
|
{
|
|
16142
16174
|
id,
|
|
@@ -16153,14 +16185,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16153
16185
|
WebkitOverflowScrolling: "touch"
|
|
16154
16186
|
},
|
|
16155
16187
|
children: [
|
|
16156
|
-
/* @__PURE__ */ (0,
|
|
16188
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { style: { height: `${spacerHeight}px` } }),
|
|
16157
16189
|
items.map((item, index) => {
|
|
16158
16190
|
const { style } = getWheelOptionStyles(
|
|
16159
16191
|
index,
|
|
16160
16192
|
scrollTop,
|
|
16161
16193
|
DATE_PICKER_OPTION_HEIGHT
|
|
16162
16194
|
);
|
|
16163
|
-
return /* @__PURE__ */ (0,
|
|
16195
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
16164
16196
|
"button",
|
|
16165
16197
|
{
|
|
16166
16198
|
id: `${id}-option-${index}`,
|
|
@@ -16176,14 +16208,14 @@ function AirbnbDatePickerWheelColumn({
|
|
|
16176
16208
|
`${column}-${item}-${index}`
|
|
16177
16209
|
);
|
|
16178
16210
|
}),
|
|
16179
|
-
/* @__PURE__ */ (0,
|
|
16211
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { style: { height: `${spacerHeight}px` } })
|
|
16180
16212
|
]
|
|
16181
16213
|
}
|
|
16182
16214
|
) });
|
|
16183
16215
|
}
|
|
16184
16216
|
|
|
16185
16217
|
// src/airbnb-fields/datepicker/DatePickerContent.tsx
|
|
16186
|
-
var
|
|
16218
|
+
var import_jsx_runtime173 = require("react/jsx-runtime");
|
|
16187
16219
|
function AirbnbDatePickerBody({
|
|
16188
16220
|
baseId,
|
|
16189
16221
|
label,
|
|
@@ -16205,19 +16237,19 @@ function AirbnbDatePickerBody({
|
|
|
16205
16237
|
onOptionSelect,
|
|
16206
16238
|
onDone
|
|
16207
16239
|
}) {
|
|
16208
|
-
return /* @__PURE__ */ (0,
|
|
16209
|
-
/* @__PURE__ */ (0,
|
|
16210
|
-
/* @__PURE__ */ (0,
|
|
16211
|
-
/* @__PURE__ */ (0,
|
|
16212
|
-
/* @__PURE__ */ (0,
|
|
16240
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
|
|
16241
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative overflow-hidden rounded-[24px]", children: [
|
|
16242
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
16243
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
16244
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16213
16245
|
"div",
|
|
16214
16246
|
{
|
|
16215
16247
|
"aria-hidden": true,
|
|
16216
16248
|
className: "pointer-events-none absolute inset-x-0 top-1/2 z-0 h-8 -translate-y-1/2 rounded-[12px] bg-black/[0.04]"
|
|
16217
16249
|
}
|
|
16218
16250
|
),
|
|
16219
|
-
/* @__PURE__ */ (0,
|
|
16220
|
-
/* @__PURE__ */ (0,
|
|
16251
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
|
|
16252
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16221
16253
|
AirbnbDatePickerWheelColumn,
|
|
16222
16254
|
{
|
|
16223
16255
|
id: `${baseId}-month`,
|
|
@@ -16232,7 +16264,7 @@ function AirbnbDatePickerBody({
|
|
|
16232
16264
|
onOptionSelect
|
|
16233
16265
|
}
|
|
16234
16266
|
),
|
|
16235
|
-
/* @__PURE__ */ (0,
|
|
16267
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16236
16268
|
AirbnbDatePickerWheelColumn,
|
|
16237
16269
|
{
|
|
16238
16270
|
id: `${baseId}-day`,
|
|
@@ -16247,7 +16279,7 @@ function AirbnbDatePickerBody({
|
|
|
16247
16279
|
onOptionSelect
|
|
16248
16280
|
}
|
|
16249
16281
|
),
|
|
16250
|
-
/* @__PURE__ */ (0,
|
|
16282
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16251
16283
|
AirbnbDatePickerWheelColumn,
|
|
16252
16284
|
{
|
|
16253
16285
|
id: `${baseId}-year`,
|
|
@@ -16264,7 +16296,7 @@ function AirbnbDatePickerBody({
|
|
|
16264
16296
|
)
|
|
16265
16297
|
] })
|
|
16266
16298
|
] }),
|
|
16267
|
-
/* @__PURE__ */ (0,
|
|
16299
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
16268
16300
|
] });
|
|
16269
16301
|
}
|
|
16270
16302
|
function AirbnbDatePickerContent({
|
|
@@ -16292,7 +16324,7 @@ function AirbnbDatePickerContent({
|
|
|
16292
16324
|
onColumnKeyDown,
|
|
16293
16325
|
onOptionSelect
|
|
16294
16326
|
}) {
|
|
16295
|
-
const body = /* @__PURE__ */ (0,
|
|
16327
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
16296
16328
|
AirbnbDatePickerBody,
|
|
16297
16329
|
{
|
|
16298
16330
|
baseId,
|
|
@@ -16317,27 +16349,27 @@ function AirbnbDatePickerContent({
|
|
|
16317
16349
|
}
|
|
16318
16350
|
);
|
|
16319
16351
|
if (isMobile3) {
|
|
16320
|
-
return /* @__PURE__ */ (0,
|
|
16352
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
16321
16353
|
DrawerContent,
|
|
16322
16354
|
{
|
|
16323
16355
|
onClose: () => onOpenChange(false),
|
|
16324
16356
|
className: "rounded-none rounded-t-[32px] border-0 p-0",
|
|
16325
16357
|
children: [
|
|
16326
|
-
/* @__PURE__ */ (0,
|
|
16327
|
-
/* @__PURE__ */ (0,
|
|
16358
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(DrawerTitle, { className: "sr-only", children: title }),
|
|
16359
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
16328
16360
|
body
|
|
16329
16361
|
]
|
|
16330
16362
|
}
|
|
16331
16363
|
) });
|
|
16332
16364
|
}
|
|
16333
|
-
return /* @__PURE__ */ (0,
|
|
16365
|
+
return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
|
|
16334
16366
|
DialogContent,
|
|
16335
16367
|
{
|
|
16336
16368
|
className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
|
|
16337
16369
|
showCloseButton: false,
|
|
16338
16370
|
children: [
|
|
16339
|
-
/* @__PURE__ */ (0,
|
|
16340
|
-
/* @__PURE__ */ (0,
|
|
16371
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(DialogTitle, { className: "sr-only", children: title }),
|
|
16372
|
+
/* @__PURE__ */ (0, import_jsx_runtime173.jsx)(DialogDescription, { className: "sr-only", children: label }),
|
|
16341
16373
|
body
|
|
16342
16374
|
]
|
|
16343
16375
|
}
|
|
@@ -16345,7 +16377,7 @@ function AirbnbDatePickerContent({
|
|
|
16345
16377
|
}
|
|
16346
16378
|
|
|
16347
16379
|
// src/dashboard/datepicker/Datepicker.tsx
|
|
16348
|
-
var
|
|
16380
|
+
var import_jsx_runtime174 = require("react/jsx-runtime");
|
|
16349
16381
|
var MONTHS_IN_YEAR2 = 12;
|
|
16350
16382
|
function getMonthLabels2(locale) {
|
|
16351
16383
|
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
@@ -16378,7 +16410,7 @@ function dateFromParts(day, monthIndex, year) {
|
|
|
16378
16410
|
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
16379
16411
|
return new Date(yearNum, monthIndex, dayNum);
|
|
16380
16412
|
}
|
|
16381
|
-
var Datepicker =
|
|
16413
|
+
var Datepicker = React63.forwardRef(
|
|
16382
16414
|
function Datepicker2({
|
|
16383
16415
|
label,
|
|
16384
16416
|
value,
|
|
@@ -16411,14 +16443,14 @@ var Datepicker = React62.forwardRef(
|
|
|
16411
16443
|
maxDate,
|
|
16412
16444
|
formatValue
|
|
16413
16445
|
}, ref) {
|
|
16414
|
-
const containerRef =
|
|
16415
|
-
const dayInputRef =
|
|
16416
|
-
const monthInputRef =
|
|
16417
|
-
const monthListRef =
|
|
16418
|
-
const yearInputRef =
|
|
16419
|
-
const mobileTriggerRef =
|
|
16420
|
-
const wheelBaseId =
|
|
16421
|
-
const reactId =
|
|
16446
|
+
const containerRef = React63.useRef(null);
|
|
16447
|
+
const dayInputRef = React63.useRef(null);
|
|
16448
|
+
const monthInputRef = React63.useRef(null);
|
|
16449
|
+
const monthListRef = React63.useRef(null);
|
|
16450
|
+
const yearInputRef = React63.useRef(null);
|
|
16451
|
+
const mobileTriggerRef = React63.useRef(null);
|
|
16452
|
+
const wheelBaseId = React63.useId();
|
|
16453
|
+
const reactId = React63.useId();
|
|
16422
16454
|
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
16423
16455
|
const dayId = `${baseId}-day`;
|
|
16424
16456
|
const monthId = `${baseId}-month`;
|
|
@@ -16427,38 +16459,38 @@ var Datepicker = React62.forwardRef(
|
|
|
16427
16459
|
const errorId = `${baseId}-error`;
|
|
16428
16460
|
const { t, i18n } = (0, import_react_i18next38.useTranslation)();
|
|
16429
16461
|
const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
|
|
16430
|
-
const resolvedMonthLabels =
|
|
16462
|
+
const resolvedMonthLabels = React63.useMemo(
|
|
16431
16463
|
() => monthLabels ?? getMonthLabels2(resolvedLocale),
|
|
16432
16464
|
[resolvedLocale, monthLabels]
|
|
16433
16465
|
);
|
|
16434
16466
|
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
16435
16467
|
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
16436
16468
|
const isControlled = value !== void 0;
|
|
16437
|
-
const initialParts =
|
|
16469
|
+
const initialParts = React63.useMemo(
|
|
16438
16470
|
() => partsFromDate(value ?? defaultValue ?? null),
|
|
16439
16471
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16440
16472
|
[]
|
|
16441
16473
|
);
|
|
16442
|
-
const [day, setDay] =
|
|
16443
|
-
const [monthIndex, setMonthIndex] =
|
|
16474
|
+
const [day, setDay] = React63.useState(initialParts.day);
|
|
16475
|
+
const [monthIndex, setMonthIndex] = React63.useState(
|
|
16444
16476
|
initialParts.monthIndex
|
|
16445
16477
|
);
|
|
16446
|
-
const [year, setYear] =
|
|
16447
|
-
const [isMonthOpen, setIsMonthOpen] =
|
|
16448
|
-
const [isWheelOpen, setIsWheelOpen] =
|
|
16449
|
-
const [focusedField, setFocusedField] =
|
|
16450
|
-
const [monthInputValue, setMonthInputValue] =
|
|
16451
|
-
const [monthHighlightIndex, setMonthHighlightIndex] =
|
|
16478
|
+
const [year, setYear] = React63.useState(initialParts.year);
|
|
16479
|
+
const [isMonthOpen, setIsMonthOpen] = React63.useState(false);
|
|
16480
|
+
const [isWheelOpen, setIsWheelOpen] = React63.useState(false);
|
|
16481
|
+
const [focusedField, setFocusedField] = React63.useState(null);
|
|
16482
|
+
const [monthInputValue, setMonthInputValue] = React63.useState("");
|
|
16483
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React63.useState(-1);
|
|
16452
16484
|
const isMobile3 = useIsMobile();
|
|
16453
|
-
const emitChangeRef =
|
|
16485
|
+
const emitChangeRef = React63.useRef(() => {
|
|
16454
16486
|
});
|
|
16455
|
-
const dayStateRef =
|
|
16456
|
-
const yearStateRef =
|
|
16457
|
-
const monthIndexRef =
|
|
16487
|
+
const dayStateRef = React63.useRef(day);
|
|
16488
|
+
const yearStateRef = React63.useRef(year);
|
|
16489
|
+
const monthIndexRef = React63.useRef(monthIndex);
|
|
16458
16490
|
dayStateRef.current = day;
|
|
16459
16491
|
yearStateRef.current = year;
|
|
16460
16492
|
monthIndexRef.current = monthIndex;
|
|
16461
|
-
|
|
16493
|
+
React63.useImperativeHandle(
|
|
16462
16494
|
ref,
|
|
16463
16495
|
() => ({
|
|
16464
16496
|
getDayValue: () => dayStateRef.current,
|
|
@@ -16476,27 +16508,27 @@ var Datepicker = React62.forwardRef(
|
|
|
16476
16508
|
}),
|
|
16477
16509
|
[]
|
|
16478
16510
|
);
|
|
16479
|
-
|
|
16511
|
+
React63.useEffect(() => {
|
|
16480
16512
|
if (!isControlled) return;
|
|
16481
16513
|
const next = partsFromDate(value ?? null);
|
|
16482
16514
|
setDay(next.day);
|
|
16483
16515
|
setMonthIndex(next.monthIndex);
|
|
16484
16516
|
setYear(next.year);
|
|
16485
16517
|
}, [isControlled, value]);
|
|
16486
|
-
|
|
16518
|
+
React63.useEffect(() => {
|
|
16487
16519
|
if (focusedField === "month") return;
|
|
16488
16520
|
setMonthInputValue(
|
|
16489
16521
|
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
16490
16522
|
);
|
|
16491
16523
|
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
16492
|
-
const filteredMonths =
|
|
16524
|
+
const filteredMonths = React63.useMemo(() => {
|
|
16493
16525
|
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
16494
16526
|
const query = monthInputValue.trim().toLowerCase();
|
|
16495
16527
|
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
16496
16528
|
if (!query || monthInputValue === currentLabel) return all;
|
|
16497
16529
|
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
16498
16530
|
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
16499
|
-
|
|
16531
|
+
React63.useEffect(() => {
|
|
16500
16532
|
if (!isMonthOpen) {
|
|
16501
16533
|
setMonthHighlightIndex(-1);
|
|
16502
16534
|
return;
|
|
@@ -16517,7 +16549,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16517
16549
|
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
16518
16550
|
const isInvalid = Boolean(invalid || error);
|
|
16519
16551
|
const wrapperWidth = toCssSize(width);
|
|
16520
|
-
const currentDate =
|
|
16552
|
+
const currentDate = React63.useMemo(
|
|
16521
16553
|
() => dateFromParts(day, monthIndex, year),
|
|
16522
16554
|
[day, monthIndex, year]
|
|
16523
16555
|
);
|
|
@@ -16526,7 +16558,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16526
16558
|
onOutsideClick: () => setIsMonthOpen(false),
|
|
16527
16559
|
isDisabled: !isMonthOpen || isMobile3
|
|
16528
16560
|
});
|
|
16529
|
-
const emitChange =
|
|
16561
|
+
const emitChange = React63.useCallback(
|
|
16530
16562
|
(nextDay, nextMonth, nextYear) => {
|
|
16531
16563
|
if (!onChange) return;
|
|
16532
16564
|
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
@@ -16562,7 +16594,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16562
16594
|
setIsMonthOpen(true);
|
|
16563
16595
|
setMonthHighlightIndex(0);
|
|
16564
16596
|
};
|
|
16565
|
-
const commitMonthInput =
|
|
16597
|
+
const commitMonthInput = React63.useCallback(() => {
|
|
16566
16598
|
const query = monthInputValue.trim().toLowerCase();
|
|
16567
16599
|
if (!query) {
|
|
16568
16600
|
if (monthIndex !== null) {
|
|
@@ -16622,15 +16654,15 @@ var Datepicker = React62.forwardRef(
|
|
|
16622
16654
|
setIsMonthOpen(false);
|
|
16623
16655
|
}
|
|
16624
16656
|
};
|
|
16625
|
-
const focusDayInput =
|
|
16657
|
+
const focusDayInput = React63.useCallback(() => {
|
|
16626
16658
|
if (isBlocked || readOnly) return;
|
|
16627
16659
|
dayInputRef.current?.focus();
|
|
16628
16660
|
}, [isBlocked, readOnly]);
|
|
16629
|
-
const openWheel =
|
|
16661
|
+
const openWheel = React63.useCallback(() => {
|
|
16630
16662
|
if (isBlocked || readOnly) return;
|
|
16631
16663
|
setIsWheelOpen(true);
|
|
16632
16664
|
}, [isBlocked, readOnly]);
|
|
16633
|
-
const closeWheel =
|
|
16665
|
+
const closeWheel = React63.useCallback(() => {
|
|
16634
16666
|
setIsWheelOpen(false);
|
|
16635
16667
|
mobileTriggerRef.current?.focus();
|
|
16636
16668
|
}, []);
|
|
@@ -16642,7 +16674,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16642
16674
|
minDate,
|
|
16643
16675
|
maxDate
|
|
16644
16676
|
});
|
|
16645
|
-
const handleWheelDone =
|
|
16677
|
+
const handleWheelDone = React63.useCallback(() => {
|
|
16646
16678
|
const next = wheel.draftDate;
|
|
16647
16679
|
setDay(String(next.getDate()));
|
|
16648
16680
|
setMonthIndex(next.getMonth());
|
|
@@ -16651,14 +16683,14 @@ var Datepicker = React62.forwardRef(
|
|
|
16651
16683
|
setIsWheelOpen(false);
|
|
16652
16684
|
mobileTriggerRef.current?.focus();
|
|
16653
16685
|
}, [name, onChange, wheel.draftDate]);
|
|
16654
|
-
const defaultFormatValue =
|
|
16686
|
+
const defaultFormatValue = React63.useCallback(
|
|
16655
16687
|
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
16656
16688
|
[resolvedMonthLabels]
|
|
16657
16689
|
);
|
|
16658
16690
|
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
16659
16691
|
const monthListboxId = `${monthId}-listbox`;
|
|
16660
16692
|
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
16661
|
-
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0,
|
|
16693
|
+
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16662
16694
|
"ul",
|
|
16663
16695
|
{
|
|
16664
16696
|
ref: monthListRef,
|
|
@@ -16669,7 +16701,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16669
16701
|
children: filteredMonths.map((option, position) => {
|
|
16670
16702
|
const isSelected = option.index === monthIndex;
|
|
16671
16703
|
const isHighlighted = position === monthHighlightIndex;
|
|
16672
|
-
return /* @__PURE__ */ (0,
|
|
16704
|
+
return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16673
16705
|
"button",
|
|
16674
16706
|
{
|
|
16675
16707
|
id: getMonthOptionId(option.index),
|
|
@@ -16696,7 +16728,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16696
16728
|
isBlocked && "cursor-not-allowed",
|
|
16697
16729
|
loading && "cursor-progress"
|
|
16698
16730
|
);
|
|
16699
|
-
return /* @__PURE__ */ (0,
|
|
16731
|
+
return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16700
16732
|
"div",
|
|
16701
16733
|
{
|
|
16702
16734
|
ref: containerRef,
|
|
@@ -16707,9 +16739,9 @@ var Datepicker = React62.forwardRef(
|
|
|
16707
16739
|
className
|
|
16708
16740
|
),
|
|
16709
16741
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16710
|
-
children: /* @__PURE__ */ (0,
|
|
16711
|
-
/* @__PURE__ */ (0,
|
|
16712
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
16742
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
16743
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "relative w-full", children: [
|
|
16744
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
|
|
16713
16745
|
"button",
|
|
16714
16746
|
{
|
|
16715
16747
|
ref: mobileTriggerRef,
|
|
@@ -16729,8 +16761,8 @@ var Datepicker = React62.forwardRef(
|
|
|
16729
16761
|
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
16730
16762
|
),
|
|
16731
16763
|
children: [
|
|
16732
|
-
/* @__PURE__ */ (0,
|
|
16733
|
-
/* @__PURE__ */ (0,
|
|
16764
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
16765
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16734
16766
|
import_lucide_react50.ChevronDown,
|
|
16735
16767
|
{
|
|
16736
16768
|
size: 16,
|
|
@@ -16742,14 +16774,14 @@ var Datepicker = React62.forwardRef(
|
|
|
16742
16774
|
) })
|
|
16743
16775
|
]
|
|
16744
16776
|
}
|
|
16745
|
-
) : /* @__PURE__ */ (0,
|
|
16777
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
|
|
16746
16778
|
"div",
|
|
16747
16779
|
{
|
|
16748
16780
|
className: cn(
|
|
16749
16781
|
"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)]"
|
|
16750
16782
|
),
|
|
16751
16783
|
children: [
|
|
16752
|
-
/* @__PURE__ */ (0,
|
|
16784
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16753
16785
|
"input",
|
|
16754
16786
|
{
|
|
16755
16787
|
ref: dayInputRef,
|
|
@@ -16778,8 +16810,8 @@ var Datepicker = React62.forwardRef(
|
|
|
16778
16810
|
className: subInputClass
|
|
16779
16811
|
}
|
|
16780
16812
|
) }),
|
|
16781
|
-
/* @__PURE__ */ (0,
|
|
16782
|
-
/* @__PURE__ */ (0,
|
|
16813
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "relative flex h-full min-w-0 items-center gap-1 px-2 before:absolute before:inset-y-3 before:left-0 before:w-px before:bg-[var(--chekin-color-gray-3)] before:content-[''] after:absolute after:inset-y-3 after:right-0 after:w-px after:bg-[var(--chekin-color-gray-3)] after:content-[''] sm:px-3", children: [
|
|
16814
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16783
16815
|
"input",
|
|
16784
16816
|
{
|
|
16785
16817
|
ref: monthInputRef,
|
|
@@ -16825,7 +16857,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16825
16857
|
)
|
|
16826
16858
|
}
|
|
16827
16859
|
),
|
|
16828
|
-
/* @__PURE__ */ (0,
|
|
16860
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16829
16861
|
import_lucide_react50.ChevronDown,
|
|
16830
16862
|
{
|
|
16831
16863
|
size: 14,
|
|
@@ -16842,7 +16874,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16842
16874
|
}
|
|
16843
16875
|
)
|
|
16844
16876
|
] }),
|
|
16845
|
-
/* @__PURE__ */ (0,
|
|
16877
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16846
16878
|
"input",
|
|
16847
16879
|
{
|
|
16848
16880
|
ref: yearInputRef,
|
|
@@ -16874,7 +16906,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16874
16906
|
]
|
|
16875
16907
|
}
|
|
16876
16908
|
),
|
|
16877
|
-
showCoverage && /* @__PURE__ */ (0,
|
|
16909
|
+
showCoverage && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16878
16910
|
"div",
|
|
16879
16911
|
{
|
|
16880
16912
|
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
|
|
@@ -16882,7 +16914,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16882
16914
|
"aria-hidden": "true"
|
|
16883
16915
|
}
|
|
16884
16916
|
),
|
|
16885
|
-
/* @__PURE__ */ (0,
|
|
16917
|
+
/* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16886
16918
|
Fieldset,
|
|
16887
16919
|
{
|
|
16888
16920
|
isFocused,
|
|
@@ -16900,9 +16932,9 @@ var Datepicker = React62.forwardRef(
|
|
|
16900
16932
|
onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16901
16933
|
}
|
|
16902
16934
|
),
|
|
16903
|
-
isMonthOpen && !isMobile3 && /* @__PURE__ */ (0,
|
|
16935
|
+
isMonthOpen && !isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "absolute left-0 right-0 top-full z-30 mx-auto mt-1 w-full max-w-[260px] overflow-hidden rounded-md bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)] sm:left-1/2 sm:right-auto sm:-translate-x-1/2", children: monthPanelContent })
|
|
16904
16936
|
] }),
|
|
16905
|
-
isMobile3 && /* @__PURE__ */ (0,
|
|
16937
|
+
isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16906
16938
|
AirbnbDatePickerContent,
|
|
16907
16939
|
{
|
|
16908
16940
|
baseId: wheelBaseId,
|
|
@@ -16930,9 +16962,9 @@ var Datepicker = React62.forwardRef(
|
|
|
16930
16962
|
onOptionSelect: wheel.handleOptionSelect
|
|
16931
16963
|
}
|
|
16932
16964
|
),
|
|
16933
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
16934
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
16935
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
16965
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
16966
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16967
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
16936
16968
|
FieldErrorMessage,
|
|
16937
16969
|
{
|
|
16938
16970
|
id: errorId,
|
|
@@ -16947,7 +16979,7 @@ var Datepicker = React62.forwardRef(
|
|
|
16947
16979
|
);
|
|
16948
16980
|
|
|
16949
16981
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16950
|
-
var
|
|
16982
|
+
var React67 = __toESM(require("react"), 1);
|
|
16951
16983
|
var import_react_i18next39 = require("react-i18next");
|
|
16952
16984
|
|
|
16953
16985
|
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
@@ -17026,7 +17058,7 @@ var createDisabledMatchers = ({
|
|
|
17026
17058
|
};
|
|
17027
17059
|
|
|
17028
17060
|
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
17029
|
-
var
|
|
17061
|
+
var React64 = __toESM(require("react"), 1);
|
|
17030
17062
|
var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
|
|
17031
17063
|
function useRangeValue({
|
|
17032
17064
|
value: externalValue,
|
|
@@ -17035,10 +17067,10 @@ function useRangeValue({
|
|
|
17035
17067
|
name
|
|
17036
17068
|
}) {
|
|
17037
17069
|
const isControlled = externalValue !== void 0;
|
|
17038
|
-
const [draft, setDraft] =
|
|
17070
|
+
const [draft, setDraft] = React64.useState(
|
|
17039
17071
|
isControlled ? externalValue : defaultValue
|
|
17040
17072
|
);
|
|
17041
|
-
const lastExternalKeyRef =
|
|
17073
|
+
const lastExternalKeyRef = React64.useRef(getRangeKey(externalValue));
|
|
17042
17074
|
if (isControlled) {
|
|
17043
17075
|
const externalKey = getRangeKey(externalValue);
|
|
17044
17076
|
if (externalKey !== lastExternalKeyRef.current) {
|
|
@@ -17046,7 +17078,7 @@ function useRangeValue({
|
|
|
17046
17078
|
setDraft(externalValue);
|
|
17047
17079
|
}
|
|
17048
17080
|
}
|
|
17049
|
-
const commit =
|
|
17081
|
+
const commit = React64.useCallback(
|
|
17050
17082
|
(next) => {
|
|
17051
17083
|
setDraft(next);
|
|
17052
17084
|
if (next === void 0) {
|
|
@@ -17061,7 +17093,7 @@ function useRangeValue({
|
|
|
17061
17093
|
}
|
|
17062
17094
|
|
|
17063
17095
|
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
17064
|
-
var
|
|
17096
|
+
var React65 = __toESM(require("react"), 1);
|
|
17065
17097
|
|
|
17066
17098
|
// src/dashboard/date-range-picker/utils/inputFormat.ts
|
|
17067
17099
|
function parseDateInputFormat(format2) {
|
|
@@ -17151,18 +17183,18 @@ function useRangeTextInputs({
|
|
|
17151
17183
|
onFromComplete,
|
|
17152
17184
|
onToComplete
|
|
17153
17185
|
}) {
|
|
17154
|
-
const tokens =
|
|
17186
|
+
const tokens = React65.useMemo(
|
|
17155
17187
|
() => parseDateInputFormat(displayFormat),
|
|
17156
17188
|
[displayFormat]
|
|
17157
17189
|
);
|
|
17158
|
-
const maxDigits =
|
|
17159
|
-
const [fromText, setFromText] =
|
|
17160
|
-
const [toText, setToText] =
|
|
17161
|
-
|
|
17190
|
+
const maxDigits = React65.useMemo(() => getMaxDigits(tokens), [tokens]);
|
|
17191
|
+
const [fromText, setFromText] = React65.useState(value?.from ? format2(value.from) : "");
|
|
17192
|
+
const [toText, setToText] = React65.useState(value?.to ? format2(value.to) : "");
|
|
17193
|
+
React65.useEffect(() => {
|
|
17162
17194
|
setFromText(value?.from ? format2(value.from) : "");
|
|
17163
17195
|
setToText(value?.to ? format2(value.to) : "");
|
|
17164
17196
|
}, [format2, value?.from, value?.to]);
|
|
17165
|
-
const handleFromChange =
|
|
17197
|
+
const handleFromChange = React65.useCallback(
|
|
17166
17198
|
(raw) => {
|
|
17167
17199
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
17168
17200
|
const wasComplete = countDigits(fromText) === maxDigits;
|
|
@@ -17174,7 +17206,7 @@ function useRangeTextInputs({
|
|
|
17174
17206
|
},
|
|
17175
17207
|
[fromText, maxDigits, onFromComplete, parse3, tokens]
|
|
17176
17208
|
);
|
|
17177
|
-
const handleToChange =
|
|
17209
|
+
const handleToChange = React65.useCallback(
|
|
17178
17210
|
(raw) => {
|
|
17179
17211
|
const formatted = autoFormatDateInput(raw, tokens);
|
|
17180
17212
|
const wasComplete = countDigits(toText) === maxDigits;
|
|
@@ -17186,7 +17218,7 @@ function useRangeTextInputs({
|
|
|
17186
17218
|
},
|
|
17187
17219
|
[maxDigits, onToComplete, parse3, toText, tokens]
|
|
17188
17220
|
);
|
|
17189
|
-
const handleFromBlur =
|
|
17221
|
+
const handleFromBlur = React65.useCallback(() => {
|
|
17190
17222
|
if (!fromText) {
|
|
17191
17223
|
const next = { from: void 0, to: value?.to };
|
|
17192
17224
|
onCommit(next);
|
|
@@ -17203,7 +17235,7 @@ function useRangeTextInputs({
|
|
|
17203
17235
|
setFromText(value?.from ? format2(value.from) : "");
|
|
17204
17236
|
return void 0;
|
|
17205
17237
|
}, [format2, fromText, onBlur, onCommit, parse3, value]);
|
|
17206
|
-
const handleToBlur =
|
|
17238
|
+
const handleToBlur = React65.useCallback(() => {
|
|
17207
17239
|
if (!toText) {
|
|
17208
17240
|
const next = { from: value?.from, to: void 0 };
|
|
17209
17241
|
onCommit(next);
|
|
@@ -17232,21 +17264,21 @@ function useRangeTextInputs({
|
|
|
17232
17264
|
}
|
|
17233
17265
|
|
|
17234
17266
|
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
17235
|
-
var
|
|
17267
|
+
var React66 = __toESM(require("react"), 1);
|
|
17236
17268
|
function useRangeMonthSync(value) {
|
|
17237
|
-
const isPreloadedRef =
|
|
17238
|
-
const [month, setMonth] =
|
|
17239
|
-
|
|
17269
|
+
const isPreloadedRef = React66.useRef(false);
|
|
17270
|
+
const [month, setMonth] = React66.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
17271
|
+
React66.useEffect(() => {
|
|
17240
17272
|
if (value?.from && !isPreloadedRef.current) {
|
|
17241
17273
|
setMonth(value.from);
|
|
17242
17274
|
isPreloadedRef.current = true;
|
|
17243
17275
|
}
|
|
17244
17276
|
}, [value?.from]);
|
|
17245
|
-
const syncMonthToValue =
|
|
17277
|
+
const syncMonthToValue = React66.useCallback((next) => {
|
|
17246
17278
|
isPreloadedRef.current = true;
|
|
17247
17279
|
if (next?.from) setMonth(next.from);
|
|
17248
17280
|
}, []);
|
|
17249
|
-
const resetPreload =
|
|
17281
|
+
const resetPreload = React66.useCallback(() => {
|
|
17250
17282
|
isPreloadedRef.current = false;
|
|
17251
17283
|
}, []);
|
|
17252
17284
|
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
@@ -17272,7 +17304,7 @@ function resolveRangeSelection({
|
|
|
17272
17304
|
|
|
17273
17305
|
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
17274
17306
|
var import_lucide_react51 = require("lucide-react");
|
|
17275
|
-
var
|
|
17307
|
+
var import_jsx_runtime175 = require("react/jsx-runtime");
|
|
17276
17308
|
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
17277
17309
|
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)]";
|
|
17278
17310
|
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";
|
|
@@ -17314,7 +17346,7 @@ function DateRangeInputs({
|
|
|
17314
17346
|
isBlocked && "cursor-not-allowed",
|
|
17315
17347
|
loading && "cursor-progress"
|
|
17316
17348
|
);
|
|
17317
|
-
return /* @__PURE__ */ (0,
|
|
17349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(
|
|
17318
17350
|
"div",
|
|
17319
17351
|
{
|
|
17320
17352
|
className: cn(
|
|
@@ -17323,7 +17355,7 @@ function DateRangeInputs({
|
|
|
17323
17355
|
),
|
|
17324
17356
|
onClick: onRowClick,
|
|
17325
17357
|
children: [
|
|
17326
|
-
/* @__PURE__ */ (0,
|
|
17358
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17327
17359
|
"input",
|
|
17328
17360
|
{
|
|
17329
17361
|
ref: fromInputRef,
|
|
@@ -17348,7 +17380,7 @@ function DateRangeInputs({
|
|
|
17348
17380
|
)
|
|
17349
17381
|
}
|
|
17350
17382
|
),
|
|
17351
|
-
/* @__PURE__ */ (0,
|
|
17383
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17352
17384
|
"span",
|
|
17353
17385
|
{
|
|
17354
17386
|
"aria-hidden": "true",
|
|
@@ -17359,7 +17391,7 @@ function DateRangeInputs({
|
|
|
17359
17391
|
children: "\u2192"
|
|
17360
17392
|
}
|
|
17361
17393
|
),
|
|
17362
|
-
/* @__PURE__ */ (0,
|
|
17394
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17363
17395
|
"input",
|
|
17364
17396
|
{
|
|
17365
17397
|
ref: toInputRef,
|
|
@@ -17384,8 +17416,8 @@ function DateRangeInputs({
|
|
|
17384
17416
|
)
|
|
17385
17417
|
}
|
|
17386
17418
|
),
|
|
17387
|
-
/* @__PURE__ */ (0,
|
|
17388
|
-
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0,
|
|
17419
|
+
/* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
17420
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17389
17421
|
"button",
|
|
17390
17422
|
{
|
|
17391
17423
|
type: "button",
|
|
@@ -17393,10 +17425,10 @@ function DateRangeInputs({
|
|
|
17393
17425
|
onClick: onReset,
|
|
17394
17426
|
className: iconButtonClass,
|
|
17395
17427
|
"aria-label": clearLabel,
|
|
17396
|
-
children: /* @__PURE__ */ (0,
|
|
17428
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(import_lucide_react51.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
17397
17429
|
}
|
|
17398
17430
|
),
|
|
17399
|
-
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0,
|
|
17431
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
17400
17432
|
"button",
|
|
17401
17433
|
{
|
|
17402
17434
|
type: "button",
|
|
@@ -17408,7 +17440,7 @@ function DateRangeInputs({
|
|
|
17408
17440
|
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
17409
17441
|
),
|
|
17410
17442
|
"aria-label": openCalendarLabel,
|
|
17411
|
-
children: /* @__PURE__ */ (0,
|
|
17443
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(import_lucide_react51.CalendarDays, { size: 18 })
|
|
17412
17444
|
}
|
|
17413
17445
|
)
|
|
17414
17446
|
] })
|
|
@@ -17418,7 +17450,7 @@ function DateRangeInputs({
|
|
|
17418
17450
|
}
|
|
17419
17451
|
|
|
17420
17452
|
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
17421
|
-
var
|
|
17453
|
+
var import_jsx_runtime176 = require("react/jsx-runtime");
|
|
17422
17454
|
function DateRangeCalendar({
|
|
17423
17455
|
value,
|
|
17424
17456
|
month,
|
|
@@ -17434,7 +17466,7 @@ function DateRangeCalendar({
|
|
|
17434
17466
|
components,
|
|
17435
17467
|
...dayPickerProps
|
|
17436
17468
|
}) {
|
|
17437
|
-
return /* @__PURE__ */ (0,
|
|
17469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
|
|
17438
17470
|
Calendar,
|
|
17439
17471
|
{
|
|
17440
17472
|
mode: "range",
|
|
@@ -17457,7 +17489,7 @@ function DateRangeCalendar({
|
|
|
17457
17489
|
}
|
|
17458
17490
|
|
|
17459
17491
|
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
17460
|
-
var
|
|
17492
|
+
var import_jsx_runtime177 = require("react/jsx-runtime");
|
|
17461
17493
|
function DateRangePopover({
|
|
17462
17494
|
isOpen,
|
|
17463
17495
|
isMobile: isMobile3,
|
|
@@ -17469,30 +17501,30 @@ function DateRangePopover({
|
|
|
17469
17501
|
}) {
|
|
17470
17502
|
if (!isOpen) return null;
|
|
17471
17503
|
if (isMobile3) {
|
|
17472
|
-
return /* @__PURE__ */ (0,
|
|
17504
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17473
17505
|
Drawer,
|
|
17474
17506
|
{
|
|
17475
17507
|
open: isOpen,
|
|
17476
17508
|
onOpenChange: (next) => {
|
|
17477
17509
|
if (!next) onClose();
|
|
17478
17510
|
},
|
|
17479
|
-
children: /* @__PURE__ */ (0,
|
|
17511
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(
|
|
17480
17512
|
DrawerContent,
|
|
17481
17513
|
{
|
|
17482
17514
|
onClose,
|
|
17483
17515
|
lockScroll: false,
|
|
17484
17516
|
className: "max-h-[calc(100vh-1rem)]",
|
|
17485
17517
|
children: [
|
|
17486
|
-
/* @__PURE__ */ (0,
|
|
17487
|
-
/* @__PURE__ */ (0,
|
|
17488
|
-
/* @__PURE__ */ (0,
|
|
17518
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
17519
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
17520
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
17489
17521
|
]
|
|
17490
17522
|
}
|
|
17491
17523
|
)
|
|
17492
17524
|
}
|
|
17493
17525
|
);
|
|
17494
17526
|
}
|
|
17495
|
-
return /* @__PURE__ */ (0,
|
|
17527
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
|
|
17496
17528
|
"div",
|
|
17497
17529
|
{
|
|
17498
17530
|
className: cn(
|
|
@@ -17505,8 +17537,8 @@ function DateRangePopover({
|
|
|
17505
17537
|
}
|
|
17506
17538
|
|
|
17507
17539
|
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
17508
|
-
var
|
|
17509
|
-
var DateRangePicker =
|
|
17540
|
+
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
17541
|
+
var DateRangePicker = React67.forwardRef(function DateRangePicker2({
|
|
17510
17542
|
label,
|
|
17511
17543
|
value: externalValue,
|
|
17512
17544
|
defaultValue,
|
|
@@ -17541,20 +17573,20 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17541
17573
|
components: customComponents,
|
|
17542
17574
|
...dayPickerProps
|
|
17543
17575
|
}, ref) {
|
|
17544
|
-
const containerRef =
|
|
17545
|
-
const fromInputRef =
|
|
17546
|
-
const toInputRef =
|
|
17547
|
-
const reactId =
|
|
17576
|
+
const containerRef = React67.useRef(null);
|
|
17577
|
+
const fromInputRef = React67.useRef(null);
|
|
17578
|
+
const toInputRef = React67.useRef(null);
|
|
17579
|
+
const reactId = React67.useId();
|
|
17548
17580
|
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
17549
17581
|
const fromId = `${baseId}-from`;
|
|
17550
17582
|
const toId = `${baseId}-to`;
|
|
17551
17583
|
const labelId = `${baseId}-label`;
|
|
17552
17584
|
const errorId = `${baseId}-error`;
|
|
17553
|
-
const normalizedValue =
|
|
17585
|
+
const normalizedValue = React67.useMemo(() => {
|
|
17554
17586
|
if (externalValue === void 0) return void 0;
|
|
17555
17587
|
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
17556
17588
|
}, [externalValue]);
|
|
17557
|
-
const normalizedDefaultValue =
|
|
17589
|
+
const normalizedDefaultValue = React67.useMemo(() => {
|
|
17558
17590
|
if (defaultValue === void 0) return void 0;
|
|
17559
17591
|
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
17560
17592
|
}, [defaultValue]);
|
|
@@ -17564,16 +17596,16 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17564
17596
|
onChange,
|
|
17565
17597
|
name
|
|
17566
17598
|
});
|
|
17567
|
-
const normalizedMinDate =
|
|
17568
|
-
const normalizedMaxDate =
|
|
17569
|
-
const formatter =
|
|
17570
|
-
const parser =
|
|
17571
|
-
const closeCalendarRef =
|
|
17599
|
+
const normalizedMinDate = React67.useMemo(() => toDate(minDate), [minDate]);
|
|
17600
|
+
const normalizedMaxDate = React67.useMemo(() => toDate(maxDate), [maxDate]);
|
|
17601
|
+
const formatter = React67.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
17602
|
+
const parser = React67.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
17603
|
+
const closeCalendarRef = React67.useRef(() => {
|
|
17572
17604
|
});
|
|
17573
|
-
const handleFromComplete =
|
|
17605
|
+
const handleFromComplete = React67.useCallback(() => {
|
|
17574
17606
|
toInputRef.current?.focus();
|
|
17575
17607
|
}, []);
|
|
17576
|
-
const handleToComplete =
|
|
17608
|
+
const handleToComplete = React67.useCallback(() => {
|
|
17577
17609
|
toInputRef.current?.blur();
|
|
17578
17610
|
closeCalendarRef.current();
|
|
17579
17611
|
}, []);
|
|
@@ -17597,9 +17629,9 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17597
17629
|
onToComplete: handleToComplete
|
|
17598
17630
|
});
|
|
17599
17631
|
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
17600
|
-
const [isOpen, setIsOpen] =
|
|
17601
|
-
const [focusedInput, setFocusedInput] =
|
|
17602
|
-
const [autoFocus, setAutoFocus] =
|
|
17632
|
+
const [isOpen, setIsOpen] = React67.useState(false);
|
|
17633
|
+
const [focusedInput, setFocusedInput] = React67.useState(null);
|
|
17634
|
+
const [autoFocus, setAutoFocus] = React67.useState(false);
|
|
17603
17635
|
const isMobile3 = useIsMobile();
|
|
17604
17636
|
const { t } = (0, import_react_i18next39.useTranslation)();
|
|
17605
17637
|
const drawerTitle = label ?? t("select_dates");
|
|
@@ -17610,14 +17642,14 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17610
17642
|
const isFocused = focusedInput !== null || isOpen;
|
|
17611
17643
|
const wrapperWidth = toCssSize(width);
|
|
17612
17644
|
const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
|
|
17613
|
-
const closeCalendar =
|
|
17645
|
+
const closeCalendar = React67.useCallback(() => {
|
|
17614
17646
|
setIsOpen(false);
|
|
17615
17647
|
setFocusedInput(null);
|
|
17616
17648
|
setAutoFocus(false);
|
|
17617
17649
|
if (value?.from) setMonth(value.from);
|
|
17618
17650
|
}, [setMonth, value?.from]);
|
|
17619
17651
|
closeCalendarRef.current = closeCalendar;
|
|
17620
|
-
const openCalendar =
|
|
17652
|
+
const openCalendar = React67.useCallback(() => {
|
|
17621
17653
|
if (isBlocked || readOnly) return;
|
|
17622
17654
|
setIsOpen(true);
|
|
17623
17655
|
}, [isBlocked, readOnly]);
|
|
@@ -17626,7 +17658,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17626
17658
|
onOutsideClick: closeCalendar,
|
|
17627
17659
|
isDisabled: !isOpen || isMobile3
|
|
17628
17660
|
});
|
|
17629
|
-
const handlePickerChange =
|
|
17661
|
+
const handlePickerChange = React67.useCallback(
|
|
17630
17662
|
(range, pickedDate) => {
|
|
17631
17663
|
const { next, shouldClose } = resolveRangeSelection({
|
|
17632
17664
|
previous: value,
|
|
@@ -17647,7 +17679,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17647
17679
|
setToText("");
|
|
17648
17680
|
setMonth(/* @__PURE__ */ new Date());
|
|
17649
17681
|
};
|
|
17650
|
-
const disabledMatchers =
|
|
17682
|
+
const disabledMatchers = React67.useMemo(
|
|
17651
17683
|
() => createDisabledMatchers({
|
|
17652
17684
|
minDate: normalizedMinDate,
|
|
17653
17685
|
maxDate: normalizedMaxDate,
|
|
@@ -17666,7 +17698,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17666
17698
|
openCalendar();
|
|
17667
17699
|
if (autoFocusOnOpen) setAutoFocus(true);
|
|
17668
17700
|
};
|
|
17669
|
-
|
|
17701
|
+
React67.useImperativeHandle(
|
|
17670
17702
|
ref,
|
|
17671
17703
|
() => ({
|
|
17672
17704
|
setDateRange: (range) => {
|
|
@@ -17689,7 +17721,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17689
17721
|
syncMonthToValue
|
|
17690
17722
|
]
|
|
17691
17723
|
);
|
|
17692
|
-
return /* @__PURE__ */ (0,
|
|
17724
|
+
return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
17693
17725
|
"div",
|
|
17694
17726
|
{
|
|
17695
17727
|
ref: containerRef,
|
|
@@ -17700,9 +17732,9 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17700
17732
|
className
|
|
17701
17733
|
),
|
|
17702
17734
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17703
|
-
children: /* @__PURE__ */ (0,
|
|
17704
|
-
/* @__PURE__ */ (0,
|
|
17705
|
-
/* @__PURE__ */ (0,
|
|
17735
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
|
|
17736
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { className: "relative w-full", children: [
|
|
17737
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
17706
17738
|
DateRangeInputs,
|
|
17707
17739
|
{
|
|
17708
17740
|
fromId,
|
|
@@ -17755,7 +17787,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17755
17787
|
onToggleCalendar: toggleCalendar
|
|
17756
17788
|
}
|
|
17757
17789
|
),
|
|
17758
|
-
/* @__PURE__ */ (0,
|
|
17790
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
17759
17791
|
Fieldset,
|
|
17760
17792
|
{
|
|
17761
17793
|
isFocused,
|
|
@@ -17772,7 +17804,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17772
17804
|
tooltip
|
|
17773
17805
|
}
|
|
17774
17806
|
),
|
|
17775
|
-
/* @__PURE__ */ (0,
|
|
17807
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
17776
17808
|
DateRangePopover,
|
|
17777
17809
|
{
|
|
17778
17810
|
isOpen: isOpen && !isMobile3,
|
|
@@ -17781,7 +17813,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17781
17813
|
drawerTitle,
|
|
17782
17814
|
drawerDescription,
|
|
17783
17815
|
onClose: closeCalendar,
|
|
17784
|
-
children: /* @__PURE__ */ (0,
|
|
17816
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
17785
17817
|
DateRangeCalendar,
|
|
17786
17818
|
{
|
|
17787
17819
|
value,
|
|
@@ -17802,7 +17834,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17802
17834
|
}
|
|
17803
17835
|
)
|
|
17804
17836
|
] }),
|
|
17805
|
-
/* @__PURE__ */ (0,
|
|
17837
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
17806
17838
|
DateRangePopover,
|
|
17807
17839
|
{
|
|
17808
17840
|
isOpen: isOpen && isMobile3,
|
|
@@ -17811,7 +17843,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17811
17843
|
drawerTitle,
|
|
17812
17844
|
drawerDescription,
|
|
17813
17845
|
onClose: closeCalendar,
|
|
17814
|
-
children: /* @__PURE__ */ (0,
|
|
17846
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
17815
17847
|
DateRangeCalendar,
|
|
17816
17848
|
{
|
|
17817
17849
|
value,
|
|
@@ -17831,9 +17863,9 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17831
17863
|
)
|
|
17832
17864
|
}
|
|
17833
17865
|
),
|
|
17834
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
17835
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
17836
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
17866
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
17867
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17868
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
17837
17869
|
FieldErrorMessage,
|
|
17838
17870
|
{
|
|
17839
17871
|
id: errorId,
|
|
@@ -17847,7 +17879,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
|
|
|
17847
17879
|
});
|
|
17848
17880
|
|
|
17849
17881
|
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
17850
|
-
var
|
|
17882
|
+
var React68 = __toESM(require("react"), 1);
|
|
17851
17883
|
var import_react_i18next40 = require("react-i18next");
|
|
17852
17884
|
var import_date_fns4 = require("date-fns");
|
|
17853
17885
|
var import_react_day_picker2 = require("react-day-picker");
|
|
@@ -17870,11 +17902,11 @@ function useValidateDates({
|
|
|
17870
17902
|
const { t } = (0, import_react_i18next40.useTranslation)();
|
|
17871
17903
|
const handleError = useEvent(onError);
|
|
17872
17904
|
const handleSuccess = useEvent(onSuccess);
|
|
17873
|
-
const errorFormatter =
|
|
17905
|
+
const errorFormatter = React68.useMemo(
|
|
17874
17906
|
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
17875
17907
|
[displayFormat]
|
|
17876
17908
|
);
|
|
17877
|
-
const validateDates =
|
|
17909
|
+
const validateDates = React68.useCallback(
|
|
17878
17910
|
(dates) => {
|
|
17879
17911
|
const startDate = dates?.from;
|
|
17880
17912
|
const endDate = dates?.to;
|
|
@@ -17924,9 +17956,9 @@ function useValidateDates({
|
|
|
17924
17956
|
}
|
|
17925
17957
|
|
|
17926
17958
|
// src/dashboard/time-picker/TimePicker.tsx
|
|
17927
|
-
var
|
|
17959
|
+
var React69 = __toESM(require("react"), 1);
|
|
17928
17960
|
var import_date_fns5 = require("date-fns");
|
|
17929
|
-
var
|
|
17961
|
+
var import_jsx_runtime179 = require("react/jsx-runtime");
|
|
17930
17962
|
var SHORT_TIME_FORMAT = "HH:mm";
|
|
17931
17963
|
function parseTime(value) {
|
|
17932
17964
|
return (0, import_date_fns5.parse)(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
@@ -17968,24 +18000,24 @@ var FORMAT_SETTINGS = {
|
|
|
17968
18000
|
},
|
|
17969
18001
|
hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
|
|
17970
18002
|
};
|
|
17971
|
-
var TimePicker =
|
|
17972
|
-
const resolvedOptions =
|
|
18003
|
+
var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
18004
|
+
const resolvedOptions = React69.useMemo(() => {
|
|
17973
18005
|
if (options) return options;
|
|
17974
18006
|
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17975
18007
|
return buildOptions(settings);
|
|
17976
18008
|
}, [formatName, options, timeSettings]);
|
|
17977
|
-
return /* @__PURE__ */ (0,
|
|
18009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Select, { ref, ...selectProps, options: resolvedOptions });
|
|
17978
18010
|
});
|
|
17979
18011
|
|
|
17980
18012
|
// src/dashboard/file-input/FileInput.tsx
|
|
17981
|
-
var
|
|
18013
|
+
var React70 = __toESM(require("react"), 1);
|
|
17982
18014
|
var import_lucide_react52 = require("lucide-react");
|
|
17983
18015
|
var import_react_i18next41 = require("react-i18next");
|
|
17984
|
-
var
|
|
18016
|
+
var import_jsx_runtime180 = require("react/jsx-runtime");
|
|
17985
18017
|
function defaultDownload(url) {
|
|
17986
18018
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
17987
18019
|
}
|
|
17988
|
-
var FileInput =
|
|
18020
|
+
var FileInput = React70.forwardRef(function FileInput2({
|
|
17989
18021
|
label,
|
|
17990
18022
|
value,
|
|
17991
18023
|
onChange,
|
|
@@ -18008,12 +18040,12 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
18008
18040
|
width,
|
|
18009
18041
|
downloadLabel
|
|
18010
18042
|
}, ref) {
|
|
18011
|
-
const internalRef =
|
|
18043
|
+
const internalRef = React70.useRef(null);
|
|
18012
18044
|
const inputRef = useCombinedRef(ref, internalRef);
|
|
18013
18045
|
const { t } = (0, import_react_i18next41.useTranslation)();
|
|
18014
18046
|
const resolvedLabel = label ?? t("upload_file");
|
|
18015
18047
|
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
18016
|
-
const reactId =
|
|
18048
|
+
const reactId = React70.useId();
|
|
18017
18049
|
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
18018
18050
|
const labelId = `${inputId}-label`;
|
|
18019
18051
|
const errorId = `${inputId}-error`;
|
|
@@ -18039,7 +18071,7 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
18039
18071
|
event.stopPropagation();
|
|
18040
18072
|
if (isUrl) onDownload(value);
|
|
18041
18073
|
};
|
|
18042
|
-
return /* @__PURE__ */ (0,
|
|
18074
|
+
return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
|
|
18043
18075
|
"label",
|
|
18044
18076
|
{
|
|
18045
18077
|
htmlFor: inputId,
|
|
@@ -18052,7 +18084,7 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
18052
18084
|
),
|
|
18053
18085
|
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
18054
18086
|
children: [
|
|
18055
|
-
/* @__PURE__ */ (0,
|
|
18087
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
18056
18088
|
"input",
|
|
18057
18089
|
{
|
|
18058
18090
|
ref: inputRef,
|
|
@@ -18069,9 +18101,9 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
18069
18101
|
"aria-invalid": isInvalid
|
|
18070
18102
|
}
|
|
18071
18103
|
),
|
|
18072
|
-
/* @__PURE__ */ (0,
|
|
18073
|
-
/* @__PURE__ */ (0,
|
|
18074
|
-
/* @__PURE__ */ (0,
|
|
18104
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { className: "relative w-full", children: [
|
|
18105
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { className: "relative w-full", children: [
|
|
18106
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
|
|
18075
18107
|
"div",
|
|
18076
18108
|
{
|
|
18077
18109
|
className: cn(
|
|
@@ -18079,25 +18111,25 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
18079
18111
|
isEmpty && "bg-[var(--empty-field-background)]"
|
|
18080
18112
|
),
|
|
18081
18113
|
children: [
|
|
18082
|
-
hasFileChip ? /* @__PURE__ */ (0,
|
|
18114
|
+
hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
|
|
18083
18115
|
"div",
|
|
18084
18116
|
{
|
|
18085
18117
|
className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
|
|
18086
18118
|
onClick: (event) => event.preventDefault(),
|
|
18087
18119
|
children: [
|
|
18088
|
-
isUrl ? /* @__PURE__ */ (0,
|
|
18120
|
+
isUrl ? /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
|
|
18089
18121
|
"button",
|
|
18090
18122
|
{
|
|
18091
18123
|
type: "button",
|
|
18092
18124
|
onClick: handleDownload,
|
|
18093
18125
|
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",
|
|
18094
18126
|
children: [
|
|
18095
|
-
/* @__PURE__ */ (0,
|
|
18096
|
-
/* @__PURE__ */ (0,
|
|
18127
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
18128
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react52.Download, { size: 15 })
|
|
18097
18129
|
]
|
|
18098
18130
|
}
|
|
18099
|
-
) : /* @__PURE__ */ (0,
|
|
18100
|
-
/* @__PURE__ */ (0,
|
|
18131
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
18132
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
18101
18133
|
"button",
|
|
18102
18134
|
{
|
|
18103
18135
|
type: "button",
|
|
@@ -18105,17 +18137,17 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
18105
18137
|
onClick: handleClear,
|
|
18106
18138
|
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]",
|
|
18107
18139
|
"aria-label": t("remove_file"),
|
|
18108
|
-
children: /* @__PURE__ */ (0,
|
|
18140
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react52.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
18109
18141
|
}
|
|
18110
18142
|
)
|
|
18111
18143
|
]
|
|
18112
18144
|
}
|
|
18113
|
-
) : /* @__PURE__ */ (0,
|
|
18114
|
-
/* @__PURE__ */ (0,
|
|
18145
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
18146
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react52.Paperclip, { size: 20 }) })
|
|
18115
18147
|
]
|
|
18116
18148
|
}
|
|
18117
18149
|
),
|
|
18118
|
-
/* @__PURE__ */ (0,
|
|
18150
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
18119
18151
|
Fieldset,
|
|
18120
18152
|
{
|
|
18121
18153
|
isFocused: false,
|
|
@@ -18133,9 +18165,9 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
18133
18165
|
}
|
|
18134
18166
|
)
|
|
18135
18167
|
] }),
|
|
18136
|
-
!error && optional && /* @__PURE__ */ (0,
|
|
18137
|
-
!error && helperText && /* @__PURE__ */ (0,
|
|
18138
|
-
error && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
18168
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
18169
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
18170
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
18139
18171
|
FieldErrorMessage,
|
|
18140
18172
|
{
|
|
18141
18173
|
id: errorId,
|
|
@@ -18150,10 +18182,10 @@ var FileInput = React69.forwardRef(function FileInput2({
|
|
|
18150
18182
|
});
|
|
18151
18183
|
|
|
18152
18184
|
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
18153
|
-
var
|
|
18154
|
-
var
|
|
18185
|
+
var React71 = __toESM(require("react"), 1);
|
|
18186
|
+
var import_jsx_runtime181 = require("react/jsx-runtime");
|
|
18155
18187
|
var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
|
|
18156
|
-
var SelectIconsBox =
|
|
18188
|
+
var SelectIconsBox = React71.forwardRef(
|
|
18157
18189
|
function SelectIconsBox2({
|
|
18158
18190
|
children,
|
|
18159
18191
|
icons,
|
|
@@ -18169,10 +18201,10 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
18169
18201
|
className,
|
|
18170
18202
|
boxClassName
|
|
18171
18203
|
}, ref) {
|
|
18172
|
-
const containerRef =
|
|
18204
|
+
const containerRef = React71.useRef(null);
|
|
18173
18205
|
const combinedContainerRef = useCombinedRef(containerRef, ref);
|
|
18174
18206
|
const isControlled = controlledOpen !== void 0;
|
|
18175
|
-
const [internalOpen, setInternalOpen] =
|
|
18207
|
+
const [internalOpen, setInternalOpen] = React71.useState(defaultOpen);
|
|
18176
18208
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
18177
18209
|
const setOpen = (next) => {
|
|
18178
18210
|
if (!isControlled) setInternalOpen(next);
|
|
@@ -18199,7 +18231,7 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
18199
18231
|
);
|
|
18200
18232
|
focusable?.focus();
|
|
18201
18233
|
};
|
|
18202
|
-
return /* @__PURE__ */ (0,
|
|
18234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(
|
|
18203
18235
|
"div",
|
|
18204
18236
|
{
|
|
18205
18237
|
ref: combinedContainerRef,
|
|
@@ -18209,7 +18241,7 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
18209
18241
|
className: cn("relative inline-block outline-none", className),
|
|
18210
18242
|
children: [
|
|
18211
18243
|
children,
|
|
18212
|
-
isOpen && /* @__PURE__ */ (0,
|
|
18244
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
|
|
18213
18245
|
"div",
|
|
18214
18246
|
{
|
|
18215
18247
|
className: cn(
|
|
@@ -18220,7 +18252,7 @@ var SelectIconsBox = React70.forwardRef(
|
|
|
18220
18252
|
boxClassName
|
|
18221
18253
|
),
|
|
18222
18254
|
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
18223
|
-
children: icons.map((iconName) => /* @__PURE__ */ (0,
|
|
18255
|
+
children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
|
|
18224
18256
|
"button",
|
|
18225
18257
|
{
|
|
18226
18258
|
type: "button",
|
|
@@ -18303,14 +18335,14 @@ function getErrorMessage(error) {
|
|
|
18303
18335
|
|
|
18304
18336
|
// src/lib/toastResponseError.tsx
|
|
18305
18337
|
var import_i18next = __toESM(require("i18next"), 1);
|
|
18306
|
-
var
|
|
18338
|
+
var import_jsx_runtime182 = require("react/jsx-runtime");
|
|
18307
18339
|
function addSupportEmailToMessage(message, prefixText) {
|
|
18308
18340
|
if (typeof message !== "string") {
|
|
18309
18341
|
return message;
|
|
18310
18342
|
}
|
|
18311
18343
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
18312
|
-
return /* @__PURE__ */ (0,
|
|
18313
|
-
/* @__PURE__ */ (0,
|
|
18344
|
+
return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { children: [
|
|
18345
|
+
/* @__PURE__ */ (0, import_jsx_runtime182.jsx)("div", { children: builtMessage }),
|
|
18314
18346
|
import_i18next.default.t("reach_us_at_email")
|
|
18315
18347
|
] });
|
|
18316
18348
|
}
|
|
@@ -18326,12 +18358,12 @@ function toastResponseError(error, options = {}) {
|
|
|
18326
18358
|
|
|
18327
18359
|
// src/legacy-fields/textarea/Textarea.tsx
|
|
18328
18360
|
var import_react89 = require("react");
|
|
18329
|
-
var
|
|
18361
|
+
var import_jsx_runtime183 = require("react/jsx-runtime");
|
|
18330
18362
|
var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
18331
18363
|
({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
|
|
18332
18364
|
const inputId = (0, import_react89.useId)();
|
|
18333
|
-
return /* @__PURE__ */ (0,
|
|
18334
|
-
/* @__PURE__ */ (0,
|
|
18365
|
+
return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { className: cn("relative", className), children: [
|
|
18366
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18335
18367
|
"textarea",
|
|
18336
18368
|
{
|
|
18337
18369
|
ref,
|
|
@@ -18347,7 +18379,7 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18347
18379
|
...textareaProps
|
|
18348
18380
|
}
|
|
18349
18381
|
),
|
|
18350
|
-
label && /* @__PURE__ */ (0,
|
|
18382
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
|
|
18351
18383
|
"label",
|
|
18352
18384
|
{
|
|
18353
18385
|
htmlFor: inputId,
|
|
@@ -18365,15 +18397,15 @@ var LegacyTextarea = (0, import_react89.forwardRef)(
|
|
|
18365
18397
|
LegacyTextarea.displayName = "LegacyTextarea";
|
|
18366
18398
|
|
|
18367
18399
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18368
|
-
var
|
|
18400
|
+
var React73 = __toESM(require("react"), 1);
|
|
18369
18401
|
var import_lucide_react54 = require("lucide-react");
|
|
18370
18402
|
|
|
18371
18403
|
// src/airbnb-fields/field-trigger/FieldTrigger.tsx
|
|
18372
|
-
var
|
|
18404
|
+
var React72 = __toESM(require("react"), 1);
|
|
18373
18405
|
var import_lucide_react53 = require("lucide-react");
|
|
18374
18406
|
var import_react_i18next42 = require("react-i18next");
|
|
18375
|
-
var
|
|
18376
|
-
var AirbnbFieldTrigger =
|
|
18407
|
+
var import_jsx_runtime184 = require("react/jsx-runtime");
|
|
18408
|
+
var AirbnbFieldTrigger = React72.forwardRef(
|
|
18377
18409
|
({
|
|
18378
18410
|
as = "button",
|
|
18379
18411
|
id,
|
|
@@ -18409,14 +18441,14 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18409
18441
|
const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
|
|
18410
18442
|
const visibleLabelText = labelText ?? label;
|
|
18411
18443
|
const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
|
|
18412
|
-
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0,
|
|
18413
|
-
/* @__PURE__ */ (0,
|
|
18414
|
-
optionalLabel && /* @__PURE__ */ (0,
|
|
18444
|
+
const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
|
|
18445
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)("span", { className: "min-w-0 truncate", children: visibleLabelText }),
|
|
18446
|
+
optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("span", { className: "text-current opacity-70 lowercase", children: [
|
|
18415
18447
|
"(",
|
|
18416
18448
|
optionalLabel,
|
|
18417
18449
|
")"
|
|
18418
18450
|
] }),
|
|
18419
|
-
tooltip && /* @__PURE__ */ (0,
|
|
18451
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18420
18452
|
HelpTooltip,
|
|
18421
18453
|
{
|
|
18422
18454
|
content: tooltip,
|
|
@@ -18431,9 +18463,9 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18431
18463
|
const hasInvalidState = Boolean(error);
|
|
18432
18464
|
const errorMessage = typeof error === "string" ? error : void 0;
|
|
18433
18465
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18434
|
-
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0,
|
|
18466
|
+
const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("span", { className: "flex items-center gap-2", children: [
|
|
18435
18467
|
trailingAdornment,
|
|
18436
|
-
loading && /* @__PURE__ */ (0,
|
|
18468
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18437
18469
|
import_lucide_react53.Loader2,
|
|
18438
18470
|
{
|
|
18439
18471
|
"aria-hidden": "true",
|
|
@@ -18449,8 +18481,8 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18449
18481
|
disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
|
|
18450
18482
|
className
|
|
18451
18483
|
);
|
|
18452
|
-
const sharedContent = /* @__PURE__ */ (0,
|
|
18453
|
-
/* @__PURE__ */ (0,
|
|
18484
|
+
const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(import_jsx_runtime184.Fragment, { children: [
|
|
18485
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
|
|
18454
18486
|
"span",
|
|
18455
18487
|
{
|
|
18456
18488
|
className: cn(
|
|
@@ -18459,7 +18491,7 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18459
18491
|
contentClassName
|
|
18460
18492
|
),
|
|
18461
18493
|
children: [
|
|
18462
|
-
/* @__PURE__ */ (0,
|
|
18494
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18463
18495
|
"span",
|
|
18464
18496
|
{
|
|
18465
18497
|
id: labelId,
|
|
@@ -18472,7 +18504,7 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18472
18504
|
children: animatedLabel
|
|
18473
18505
|
}
|
|
18474
18506
|
),
|
|
18475
|
-
children ? children : hasValue ? /* @__PURE__ */ (0,
|
|
18507
|
+
children ? children : hasValue ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18476
18508
|
"span",
|
|
18477
18509
|
{
|
|
18478
18510
|
id: valueId,
|
|
@@ -18483,11 +18515,11 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18483
18515
|
),
|
|
18484
18516
|
children: valueText
|
|
18485
18517
|
}
|
|
18486
|
-
) : /* @__PURE__ */ (0,
|
|
18518
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
|
|
18487
18519
|
]
|
|
18488
18520
|
}
|
|
18489
18521
|
),
|
|
18490
|
-
resolvedTrailingAdornment && /* @__PURE__ */ (0,
|
|
18522
|
+
resolvedTrailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18491
18523
|
"span",
|
|
18492
18524
|
{
|
|
18493
18525
|
"aria-hidden": "true",
|
|
@@ -18496,9 +18528,9 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18496
18528
|
}
|
|
18497
18529
|
)
|
|
18498
18530
|
] });
|
|
18499
|
-
return /* @__PURE__ */ (0,
|
|
18500
|
-
topLabel && /* @__PURE__ */ (0,
|
|
18501
|
-
as === "button" ? /* @__PURE__ */ (0,
|
|
18531
|
+
return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: "w-full", children: [
|
|
18532
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
|
|
18533
|
+
as === "button" ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18502
18534
|
"button",
|
|
18503
18535
|
{
|
|
18504
18536
|
id,
|
|
@@ -18515,7 +18547,7 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18515
18547
|
...props,
|
|
18516
18548
|
children: sharedContent
|
|
18517
18549
|
}
|
|
18518
|
-
) : /* @__PURE__ */ (0,
|
|
18550
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
|
|
18519
18551
|
"div",
|
|
18520
18552
|
{
|
|
18521
18553
|
id,
|
|
@@ -18532,16 +18564,16 @@ var AirbnbFieldTrigger = React71.forwardRef(
|
|
|
18532
18564
|
children: sharedContent
|
|
18533
18565
|
}
|
|
18534
18566
|
),
|
|
18535
|
-
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0,
|
|
18567
|
+
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(FieldErrorMessage, { id: errorId, message: errorMessage })
|
|
18536
18568
|
] });
|
|
18537
18569
|
}
|
|
18538
18570
|
);
|
|
18539
18571
|
AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
|
|
18540
18572
|
|
|
18541
18573
|
// src/airbnb-fields/datepicker/DatePicker.tsx
|
|
18542
|
-
var
|
|
18574
|
+
var import_jsx_runtime185 = require("react/jsx-runtime");
|
|
18543
18575
|
var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
|
|
18544
|
-
var AirbnbDatePicker =
|
|
18576
|
+
var AirbnbDatePicker = React73.forwardRef(
|
|
18545
18577
|
({
|
|
18546
18578
|
label,
|
|
18547
18579
|
topLabel,
|
|
@@ -18566,24 +18598,24 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18566
18598
|
formatValue = formatDateValue
|
|
18567
18599
|
}, ref) => {
|
|
18568
18600
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
18569
|
-
const [isOpen, setIsOpen] =
|
|
18570
|
-
const triggerId =
|
|
18571
|
-
const pickerId =
|
|
18572
|
-
const labelId =
|
|
18573
|
-
const valueId =
|
|
18574
|
-
const helperTextId =
|
|
18575
|
-
const errorId =
|
|
18576
|
-
const internalRef =
|
|
18601
|
+
const [isOpen, setIsOpen] = React73.useState(false);
|
|
18602
|
+
const triggerId = React73.useId();
|
|
18603
|
+
const pickerId = React73.useId();
|
|
18604
|
+
const labelId = React73.useId();
|
|
18605
|
+
const valueId = React73.useId();
|
|
18606
|
+
const helperTextId = React73.useId();
|
|
18607
|
+
const errorId = React73.useId();
|
|
18608
|
+
const internalRef = React73.useRef(null);
|
|
18577
18609
|
const combinedRef = useCombinedRef(ref, internalRef);
|
|
18578
|
-
const monthLabels =
|
|
18579
|
-
const resolvedMinDate =
|
|
18580
|
-
const resolvedMaxDate =
|
|
18581
|
-
const normalizedValue =
|
|
18582
|
-
const normalizedDefaultValue =
|
|
18610
|
+
const monthLabels = React73.useMemo(() => getMonthLabels(locale), [locale]);
|
|
18611
|
+
const resolvedMinDate = React73.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
|
|
18612
|
+
const resolvedMaxDate = React73.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
|
|
18613
|
+
const normalizedValue = React73.useMemo(() => normalizeDateValue(value), [value]);
|
|
18614
|
+
const normalizedDefaultValue = React73.useMemo(
|
|
18583
18615
|
() => normalizeDateValue(defaultValue),
|
|
18584
18616
|
[defaultValue]
|
|
18585
18617
|
);
|
|
18586
|
-
const resolvedValue =
|
|
18618
|
+
const resolvedValue = React73.useMemo(
|
|
18587
18619
|
() => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
|
|
18588
18620
|
[normalizedValue, resolvedMaxDate, resolvedMinDate]
|
|
18589
18621
|
);
|
|
@@ -18614,7 +18646,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18614
18646
|
minDate: resolvedMinDate,
|
|
18615
18647
|
maxDate: resolvedMaxDate
|
|
18616
18648
|
});
|
|
18617
|
-
const handleOpenChange =
|
|
18649
|
+
const handleOpenChange = React73.useCallback(
|
|
18618
18650
|
(nextOpen) => {
|
|
18619
18651
|
if (isBlocked && nextOpen) return;
|
|
18620
18652
|
setIsOpen(nextOpen);
|
|
@@ -18624,7 +18656,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18624
18656
|
},
|
|
18625
18657
|
[isBlocked]
|
|
18626
18658
|
);
|
|
18627
|
-
const handleDone =
|
|
18659
|
+
const handleDone = React73.useCallback(() => {
|
|
18628
18660
|
if (isBlocked) return;
|
|
18629
18661
|
onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
|
|
18630
18662
|
handleOpenChange(false);
|
|
@@ -18636,11 +18668,11 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18636
18668
|
resolvedMaxDate,
|
|
18637
18669
|
resolvedMinDate
|
|
18638
18670
|
]);
|
|
18639
|
-
const handleTriggerClick =
|
|
18671
|
+
const handleTriggerClick = React73.useCallback(() => {
|
|
18640
18672
|
if (isBlocked) return;
|
|
18641
18673
|
setIsOpen(true);
|
|
18642
18674
|
}, [isBlocked]);
|
|
18643
|
-
const handleTriggerKeyDown =
|
|
18675
|
+
const handleTriggerKeyDown = React73.useCallback(
|
|
18644
18676
|
(event) => {
|
|
18645
18677
|
if (isBlocked) return;
|
|
18646
18678
|
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
|
|
@@ -18650,13 +18682,13 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18650
18682
|
},
|
|
18651
18683
|
[isBlocked]
|
|
18652
18684
|
);
|
|
18653
|
-
|
|
18685
|
+
React73.useEffect(() => {
|
|
18654
18686
|
if (isBlocked) {
|
|
18655
18687
|
setIsOpen(false);
|
|
18656
18688
|
}
|
|
18657
18689
|
}, [isBlocked]);
|
|
18658
|
-
return /* @__PURE__ */ (0,
|
|
18659
|
-
name && /* @__PURE__ */ (0,
|
|
18690
|
+
return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
|
|
18691
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18660
18692
|
"input",
|
|
18661
18693
|
{
|
|
18662
18694
|
type: "hidden",
|
|
@@ -18664,7 +18696,7 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18664
18696
|
value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
|
|
18665
18697
|
}
|
|
18666
18698
|
),
|
|
18667
|
-
/* @__PURE__ */ (0,
|
|
18699
|
+
/* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18668
18700
|
AirbnbFieldTrigger,
|
|
18669
18701
|
{
|
|
18670
18702
|
id: triggerId,
|
|
@@ -18690,10 +18722,10 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18690
18722
|
onClick: handleTriggerClick,
|
|
18691
18723
|
onKeyDown: handleTriggerKeyDown,
|
|
18692
18724
|
onBlur,
|
|
18693
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
18725
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(import_lucide_react54.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
|
|
18694
18726
|
}
|
|
18695
18727
|
),
|
|
18696
|
-
/* @__PURE__ */ (0,
|
|
18728
|
+
/* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
|
|
18697
18729
|
AirbnbDatePickerContent,
|
|
18698
18730
|
{
|
|
18699
18731
|
baseId: pickerId,
|
|
@@ -18727,12 +18759,12 @@ var AirbnbDatePicker = React72.forwardRef(
|
|
|
18727
18759
|
AirbnbDatePicker.displayName = "AirbnbDatePicker";
|
|
18728
18760
|
|
|
18729
18761
|
// src/airbnb-fields/input/Input.tsx
|
|
18730
|
-
var
|
|
18762
|
+
var React74 = __toESM(require("react"), 1);
|
|
18731
18763
|
var import_lucide_react55 = require("lucide-react");
|
|
18732
18764
|
var import_react_i18next43 = require("react-i18next");
|
|
18733
|
-
var
|
|
18765
|
+
var import_jsx_runtime186 = require("react/jsx-runtime");
|
|
18734
18766
|
var getInputValue = (value) => value != null ? String(value) : "";
|
|
18735
|
-
var AirbnbInput =
|
|
18767
|
+
var AirbnbInput = React74.forwardRef(
|
|
18736
18768
|
({
|
|
18737
18769
|
label,
|
|
18738
18770
|
topLabel,
|
|
@@ -18761,16 +18793,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18761
18793
|
...props
|
|
18762
18794
|
}, ref) => {
|
|
18763
18795
|
const { t } = (0, import_react_i18next43.useTranslation)();
|
|
18764
|
-
const generatedId =
|
|
18765
|
-
const inputRef =
|
|
18796
|
+
const generatedId = React74.useId();
|
|
18797
|
+
const inputRef = React74.useRef(null);
|
|
18766
18798
|
const inputId = id ?? generatedId;
|
|
18767
18799
|
const fieldId = `${inputId}-field`;
|
|
18768
18800
|
const labelId = `${inputId}-label`;
|
|
18769
18801
|
const errorId = `${inputId}-error`;
|
|
18770
18802
|
const accessibleLabel = placeholder ?? label;
|
|
18771
|
-
const [isFocused, setIsFocused] =
|
|
18772
|
-
const [isPasswordRevealed, setIsPasswordRevealed] =
|
|
18773
|
-
const [currentValue, setCurrentValue] =
|
|
18803
|
+
const [isFocused, setIsFocused] = React74.useState(false);
|
|
18804
|
+
const [isPasswordRevealed, setIsPasswordRevealed] = React74.useState(false);
|
|
18805
|
+
const [currentValue, setCurrentValue] = React74.useState(
|
|
18774
18806
|
() => value != null ? getInputValue(value) : getInputValue(defaultValue)
|
|
18775
18807
|
);
|
|
18776
18808
|
const resolvedValue = value != null ? getInputValue(value) : currentValue;
|
|
@@ -18783,16 +18815,16 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18783
18815
|
const triggerError = error ?? invalid;
|
|
18784
18816
|
const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
|
|
18785
18817
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
18786
|
-
|
|
18818
|
+
React74.useLayoutEffect(() => {
|
|
18787
18819
|
const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
|
|
18788
18820
|
setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
|
|
18789
18821
|
}, [value]);
|
|
18790
|
-
|
|
18822
|
+
React74.useEffect(() => {
|
|
18791
18823
|
if (!isPasswordInput) {
|
|
18792
18824
|
setIsPasswordRevealed(false);
|
|
18793
18825
|
}
|
|
18794
18826
|
}, [isPasswordInput]);
|
|
18795
|
-
const setRefs =
|
|
18827
|
+
const setRefs = React74.useCallback(
|
|
18796
18828
|
(node) => {
|
|
18797
18829
|
inputRef.current = node;
|
|
18798
18830
|
if (node && value == null) {
|
|
@@ -18825,7 +18857,7 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18825
18857
|
const togglePasswordReveal = () => {
|
|
18826
18858
|
setIsPasswordRevealed((isRevealed) => !isRevealed);
|
|
18827
18859
|
};
|
|
18828
|
-
return /* @__PURE__ */ (0,
|
|
18860
|
+
return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
|
|
18829
18861
|
AirbnbFieldTrigger,
|
|
18830
18862
|
{
|
|
18831
18863
|
as: "div",
|
|
@@ -18854,7 +18886,7 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18854
18886
|
forceLabelText: hasLabelMeta,
|
|
18855
18887
|
hideErrorMessage: !renderErrorMessage,
|
|
18856
18888
|
children: [
|
|
18857
|
-
/* @__PURE__ */ (0,
|
|
18889
|
+
/* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
|
|
18858
18890
|
"input",
|
|
18859
18891
|
{
|
|
18860
18892
|
...props,
|
|
@@ -18884,7 +18916,7 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18884
18916
|
)
|
|
18885
18917
|
}
|
|
18886
18918
|
),
|
|
18887
|
-
shouldShowPasswordReveal && /* @__PURE__ */ (0,
|
|
18919
|
+
shouldShowPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
|
|
18888
18920
|
"button",
|
|
18889
18921
|
{
|
|
18890
18922
|
type: "button",
|
|
@@ -18892,7 +18924,7 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18892
18924
|
disabled: isBlocked,
|
|
18893
18925
|
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",
|
|
18894
18926
|
"aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
|
|
18895
|
-
children: /* @__PURE__ */ (0,
|
|
18927
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
|
|
18896
18928
|
import_lucide_react55.Eye,
|
|
18897
18929
|
{
|
|
18898
18930
|
size: 18,
|
|
@@ -18910,14 +18942,14 @@ var AirbnbInput = React73.forwardRef(
|
|
|
18910
18942
|
AirbnbInput.displayName = "AirbnbInput";
|
|
18911
18943
|
|
|
18912
18944
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
18913
|
-
var
|
|
18945
|
+
var React80 = __toESM(require("react"), 1);
|
|
18914
18946
|
var import_lucide_react57 = require("lucide-react");
|
|
18915
18947
|
|
|
18916
18948
|
// src/airbnb-fields/select/Select.tsx
|
|
18917
|
-
var
|
|
18949
|
+
var React79 = __toESM(require("react"), 1);
|
|
18918
18950
|
|
|
18919
18951
|
// src/airbnb-fields/select/SelectDesktopMenu.tsx
|
|
18920
|
-
var
|
|
18952
|
+
var import_jsx_runtime187 = require("react/jsx-runtime");
|
|
18921
18953
|
function AirbnbSelectDesktopMenu({
|
|
18922
18954
|
id,
|
|
18923
18955
|
options,
|
|
@@ -18936,7 +18968,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18936
18968
|
noOptionsMessage
|
|
18937
18969
|
}) {
|
|
18938
18970
|
const emptyMessage = noOptionsMessage?.();
|
|
18939
|
-
return /* @__PURE__ */ (0,
|
|
18971
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
|
|
18940
18972
|
"div",
|
|
18941
18973
|
{
|
|
18942
18974
|
id,
|
|
@@ -18949,12 +18981,12 @@ function AirbnbSelectDesktopMenu({
|
|
|
18949
18981
|
onKeyDown,
|
|
18950
18982
|
className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
|
|
18951
18983
|
children: [
|
|
18952
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
18984
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
18953
18985
|
options.map((option, index) => {
|
|
18954
18986
|
const isSelected = selectedValue?.value === option.value;
|
|
18955
18987
|
const isHighlighted = index === highlightedIndex;
|
|
18956
18988
|
const optionKey = `${String(option.value)}-${index}`;
|
|
18957
|
-
return /* @__PURE__ */ (0,
|
|
18989
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
18958
18990
|
"button",
|
|
18959
18991
|
{
|
|
18960
18992
|
id: getOptionId2(index),
|
|
@@ -18986,7 +19018,7 @@ function AirbnbSelectDesktopMenu({
|
|
|
18986
19018
|
}
|
|
18987
19019
|
|
|
18988
19020
|
// src/airbnb-fields/select/SelectDesktopContent.tsx
|
|
18989
|
-
var
|
|
19021
|
+
var import_jsx_runtime188 = require("react/jsx-runtime");
|
|
18990
19022
|
function AirbnbSelectDesktopContent({
|
|
18991
19023
|
isOpen,
|
|
18992
19024
|
listboxId,
|
|
@@ -19007,14 +19039,14 @@ function AirbnbSelectDesktopContent({
|
|
|
19007
19039
|
noOptionsMessage
|
|
19008
19040
|
}) {
|
|
19009
19041
|
if (!isOpen) return null;
|
|
19010
|
-
return /* @__PURE__ */ (0,
|
|
19042
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
19011
19043
|
"div",
|
|
19012
19044
|
{
|
|
19013
19045
|
className: cn(
|
|
19014
19046
|
"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)]",
|
|
19015
19047
|
dropdownClassName
|
|
19016
19048
|
),
|
|
19017
|
-
children: /* @__PURE__ */ (0,
|
|
19049
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
19018
19050
|
AirbnbSelectDesktopMenu,
|
|
19019
19051
|
{
|
|
19020
19052
|
id: listboxId,
|
|
@@ -19112,7 +19144,7 @@ function getMobileOptionStyles(index, scrollTop) {
|
|
|
19112
19144
|
}
|
|
19113
19145
|
|
|
19114
19146
|
// src/airbnb-fields/select/SelectMobileWheel.tsx
|
|
19115
|
-
var
|
|
19147
|
+
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
19116
19148
|
function AirbnbSelectMobileWheel({
|
|
19117
19149
|
id,
|
|
19118
19150
|
options,
|
|
@@ -19131,7 +19163,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19131
19163
|
}) {
|
|
19132
19164
|
const spacerHeight2 = getWheelSpacerHeight();
|
|
19133
19165
|
const emptyMessage = noOptionsMessage?.();
|
|
19134
|
-
return /* @__PURE__ */ (0,
|
|
19166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
|
|
19135
19167
|
"div",
|
|
19136
19168
|
{
|
|
19137
19169
|
id,
|
|
@@ -19143,10 +19175,10 @@ function AirbnbSelectMobileWheel({
|
|
|
19143
19175
|
onKeyDown,
|
|
19144
19176
|
className: cn("relative overflow-hidden outline-none", menuClassName),
|
|
19145
19177
|
children: [
|
|
19146
|
-
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0,
|
|
19147
|
-
/* @__PURE__ */ (0,
|
|
19148
|
-
/* @__PURE__ */ (0,
|
|
19149
|
-
/* @__PURE__ */ (0,
|
|
19178
|
+
options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
|
|
19179
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
|
|
19180
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
|
|
19181
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
19150
19182
|
"div",
|
|
19151
19183
|
{
|
|
19152
19184
|
"aria-hidden": true,
|
|
@@ -19156,7 +19188,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19156
19188
|
)
|
|
19157
19189
|
}
|
|
19158
19190
|
),
|
|
19159
|
-
/* @__PURE__ */ (0,
|
|
19191
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
|
|
19160
19192
|
"div",
|
|
19161
19193
|
{
|
|
19162
19194
|
ref: listRef,
|
|
@@ -19171,11 +19203,11 @@ function AirbnbSelectMobileWheel({
|
|
|
19171
19203
|
WebkitOverflowScrolling: "touch"
|
|
19172
19204
|
},
|
|
19173
19205
|
children: [
|
|
19174
|
-
/* @__PURE__ */ (0,
|
|
19206
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
|
|
19175
19207
|
options.map((option, index) => {
|
|
19176
19208
|
const { distance, style } = getMobileOptionStyles(index, scrollTop);
|
|
19177
19209
|
const optionKey = `${String(option.value)}-${index}`;
|
|
19178
|
-
return /* @__PURE__ */ (0,
|
|
19210
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
19179
19211
|
"button",
|
|
19180
19212
|
{
|
|
19181
19213
|
id: getOptionId2(index),
|
|
@@ -19196,7 +19228,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19196
19228
|
optionKey
|
|
19197
19229
|
);
|
|
19198
19230
|
}),
|
|
19199
|
-
/* @__PURE__ */ (0,
|
|
19231
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { style: { height: `${spacerHeight2}px` } })
|
|
19200
19232
|
]
|
|
19201
19233
|
}
|
|
19202
19234
|
)
|
|
@@ -19206,7 +19238,7 @@ function AirbnbSelectMobileWheel({
|
|
|
19206
19238
|
}
|
|
19207
19239
|
|
|
19208
19240
|
// src/airbnb-fields/select/SelectMobileContent.tsx
|
|
19209
|
-
var
|
|
19241
|
+
var import_jsx_runtime190 = require("react/jsx-runtime");
|
|
19210
19242
|
function AirbnbSelectMobileContent({
|
|
19211
19243
|
open,
|
|
19212
19244
|
onOpenChange,
|
|
@@ -19230,11 +19262,11 @@ function AirbnbSelectMobileContent({
|
|
|
19230
19262
|
getOptionId: getOptionId2,
|
|
19231
19263
|
noOptionsMessage
|
|
19232
19264
|
}) {
|
|
19233
|
-
return /* @__PURE__ */ (0,
|
|
19234
|
-
/* @__PURE__ */ (0,
|
|
19235
|
-
/* @__PURE__ */ (0,
|
|
19236
|
-
/* @__PURE__ */ (0,
|
|
19237
|
-
/* @__PURE__ */ (0,
|
|
19265
|
+
return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
|
|
19266
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
19267
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
19268
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
|
|
19269
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
19238
19270
|
AirbnbSelectMobileWheel,
|
|
19239
19271
|
{
|
|
19240
19272
|
id: listboxId,
|
|
@@ -19253,16 +19285,16 @@ function AirbnbSelectMobileContent({
|
|
|
19253
19285
|
noOptionsMessage
|
|
19254
19286
|
}
|
|
19255
19287
|
),
|
|
19256
|
-
/* @__PURE__ */ (0,
|
|
19288
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
|
|
19257
19289
|
] })
|
|
19258
19290
|
] }) });
|
|
19259
19291
|
}
|
|
19260
19292
|
|
|
19261
19293
|
// src/airbnb-fields/select/SelectTrigger.tsx
|
|
19262
|
-
var
|
|
19294
|
+
var React75 = __toESM(require("react"), 1);
|
|
19263
19295
|
var import_lucide_react56 = require("lucide-react");
|
|
19264
|
-
var
|
|
19265
|
-
var AirbnbSelectTrigger =
|
|
19296
|
+
var import_jsx_runtime191 = require("react/jsx-runtime");
|
|
19297
|
+
var AirbnbSelectTrigger = React75.forwardRef(
|
|
19266
19298
|
({
|
|
19267
19299
|
id,
|
|
19268
19300
|
open,
|
|
@@ -19286,7 +19318,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
|
|
|
19286
19318
|
onKeyDown,
|
|
19287
19319
|
onBlur
|
|
19288
19320
|
}, ref) => {
|
|
19289
|
-
return /* @__PURE__ */ (0,
|
|
19321
|
+
return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19290
19322
|
AirbnbFieldTrigger,
|
|
19291
19323
|
{
|
|
19292
19324
|
id,
|
|
@@ -19314,7 +19346,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
|
|
|
19314
19346
|
onClick,
|
|
19315
19347
|
onKeyDown,
|
|
19316
19348
|
onBlur,
|
|
19317
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
19349
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
19318
19350
|
import_lucide_react56.ChevronDown,
|
|
19319
19351
|
{
|
|
19320
19352
|
className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
|
|
@@ -19327,7 +19359,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
|
|
|
19327
19359
|
AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
|
|
19328
19360
|
|
|
19329
19361
|
// src/airbnb-fields/select/useDesktopSelect.ts
|
|
19330
|
-
var
|
|
19362
|
+
var React76 = __toESM(require("react"), 1);
|
|
19331
19363
|
function useDesktopSelect({
|
|
19332
19364
|
isMobile: isMobile3,
|
|
19333
19365
|
isOpen,
|
|
@@ -19336,12 +19368,12 @@ function useDesktopSelect({
|
|
|
19336
19368
|
disabled,
|
|
19337
19369
|
onChange
|
|
19338
19370
|
}) {
|
|
19339
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
19340
|
-
const triggerRef =
|
|
19341
|
-
const listRef =
|
|
19342
|
-
const optionRefs =
|
|
19371
|
+
const [highlightedIndex, setHighlightedIndex] = React76.useState(-1);
|
|
19372
|
+
const triggerRef = React76.useRef(null);
|
|
19373
|
+
const listRef = React76.useRef(null);
|
|
19374
|
+
const optionRefs = React76.useRef([]);
|
|
19343
19375
|
const selectedIndex = getOptionIndex2(options, value);
|
|
19344
|
-
|
|
19376
|
+
React76.useEffect(() => {
|
|
19345
19377
|
if (!isOpen || isMobile3) return;
|
|
19346
19378
|
setHighlightedIndex((currentIndex) => {
|
|
19347
19379
|
if (currentIndex >= 0) {
|
|
@@ -19356,34 +19388,34 @@ function useDesktopSelect({
|
|
|
19356
19388
|
window.cancelAnimationFrame(frameId);
|
|
19357
19389
|
};
|
|
19358
19390
|
}, [isMobile3, isOpen, options, selectedIndex]);
|
|
19359
|
-
|
|
19391
|
+
React76.useEffect(() => {
|
|
19360
19392
|
if (!isOpen || isMobile3 || highlightedIndex < 0) return;
|
|
19361
19393
|
optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
19362
19394
|
block: "nearest"
|
|
19363
19395
|
});
|
|
19364
19396
|
}, [highlightedIndex, isMobile3, isOpen]);
|
|
19365
|
-
|
|
19397
|
+
React76.useEffect(() => {
|
|
19366
19398
|
if (isOpen) return;
|
|
19367
19399
|
setHighlightedIndex(-1);
|
|
19368
19400
|
}, [isOpen]);
|
|
19369
|
-
const focusTrigger =
|
|
19401
|
+
const focusTrigger = React76.useCallback(() => {
|
|
19370
19402
|
triggerRef.current?.focus();
|
|
19371
19403
|
}, []);
|
|
19372
|
-
const handleSelect =
|
|
19404
|
+
const handleSelect = React76.useCallback(
|
|
19373
19405
|
(option) => {
|
|
19374
19406
|
if (option.isDisabled || disabled) return;
|
|
19375
19407
|
onChange?.(option);
|
|
19376
19408
|
},
|
|
19377
19409
|
[disabled, onChange]
|
|
19378
19410
|
);
|
|
19379
|
-
const openMenu =
|
|
19411
|
+
const openMenu = React76.useCallback(
|
|
19380
19412
|
(targetIndex) => {
|
|
19381
19413
|
const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19382
19414
|
setHighlightedIndex(targetIndex ?? fallbackIndex);
|
|
19383
19415
|
},
|
|
19384
19416
|
[options, selectedIndex]
|
|
19385
19417
|
);
|
|
19386
|
-
const handleTriggerKeyDown =
|
|
19418
|
+
const handleTriggerKeyDown = React76.useCallback(
|
|
19387
19419
|
(event, onOpen) => {
|
|
19388
19420
|
if (disabled) return;
|
|
19389
19421
|
if (event.key === "ArrowDown") {
|
|
@@ -19408,7 +19440,7 @@ function useDesktopSelect({
|
|
|
19408
19440
|
},
|
|
19409
19441
|
[disabled, openMenu, options, selectedIndex]
|
|
19410
19442
|
);
|
|
19411
|
-
const handleMenuKeyDown =
|
|
19443
|
+
const handleMenuKeyDown = React76.useCallback(
|
|
19412
19444
|
(event, onClose) => {
|
|
19413
19445
|
if (event.key === "Escape") {
|
|
19414
19446
|
event.preventDefault();
|
|
@@ -19458,7 +19490,7 @@ function useDesktopSelect({
|
|
|
19458
19490
|
},
|
|
19459
19491
|
[focusTrigger, highlightedIndex, onChange, options]
|
|
19460
19492
|
);
|
|
19461
|
-
const setOptionRef =
|
|
19493
|
+
const setOptionRef = React76.useCallback(
|
|
19462
19494
|
(index, node) => {
|
|
19463
19495
|
optionRefs.current[index] = node;
|
|
19464
19496
|
},
|
|
@@ -19478,23 +19510,23 @@ function useDesktopSelect({
|
|
|
19478
19510
|
}
|
|
19479
19511
|
|
|
19480
19512
|
// src/airbnb-fields/select/useMobileSelectWheel.ts
|
|
19481
|
-
var
|
|
19513
|
+
var React77 = __toESM(require("react"), 1);
|
|
19482
19514
|
function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
|
|
19483
|
-
const [pendingValue, setPendingValue] =
|
|
19515
|
+
const [pendingValue, setPendingValue] = React77.useState(
|
|
19484
19516
|
value ?? null
|
|
19485
19517
|
);
|
|
19486
|
-
const [mobileScrollTop, setMobileScrollTop] =
|
|
19487
|
-
const mobileListRef =
|
|
19488
|
-
const scrollSettleTimeoutRef =
|
|
19489
|
-
const scrollAnimationFrameRef =
|
|
19490
|
-
const getTargetIndex =
|
|
19518
|
+
const [mobileScrollTop, setMobileScrollTop] = React77.useState(0);
|
|
19519
|
+
const mobileListRef = React77.useRef(null);
|
|
19520
|
+
const scrollSettleTimeoutRef = React77.useRef(null);
|
|
19521
|
+
const scrollAnimationFrameRef = React77.useRef(null);
|
|
19522
|
+
const getTargetIndex = React77.useCallback(
|
|
19491
19523
|
(targetValue) => {
|
|
19492
19524
|
const selectedIndex = getOptionIndex2(options, targetValue);
|
|
19493
19525
|
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
|
|
19494
19526
|
},
|
|
19495
19527
|
[options]
|
|
19496
19528
|
);
|
|
19497
|
-
const syncScrollPosition =
|
|
19529
|
+
const syncScrollPosition = React77.useCallback(
|
|
19498
19530
|
(targetValue, behavior = "instant") => {
|
|
19499
19531
|
const targetIndex = getTargetIndex(targetValue);
|
|
19500
19532
|
if (targetIndex < 0) return;
|
|
@@ -19513,27 +19545,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19513
19545
|
},
|
|
19514
19546
|
[getTargetIndex, options]
|
|
19515
19547
|
);
|
|
19516
|
-
const clearScrollSettleTimeout =
|
|
19548
|
+
const clearScrollSettleTimeout = React77.useCallback(() => {
|
|
19517
19549
|
if (scrollSettleTimeoutRef.current === null) return;
|
|
19518
19550
|
window.clearTimeout(scrollSettleTimeoutRef.current);
|
|
19519
19551
|
scrollSettleTimeoutRef.current = null;
|
|
19520
19552
|
}, []);
|
|
19521
|
-
const clearScrollAnimationFrame =
|
|
19553
|
+
const clearScrollAnimationFrame = React77.useCallback(() => {
|
|
19522
19554
|
if (scrollAnimationFrameRef.current === null) return;
|
|
19523
19555
|
window.cancelAnimationFrame(scrollAnimationFrameRef.current);
|
|
19524
19556
|
scrollAnimationFrameRef.current = null;
|
|
19525
19557
|
}, []);
|
|
19526
|
-
|
|
19558
|
+
React77.useEffect(
|
|
19527
19559
|
() => () => {
|
|
19528
19560
|
clearScrollSettleTimeout();
|
|
19529
19561
|
clearScrollAnimationFrame();
|
|
19530
19562
|
},
|
|
19531
19563
|
[clearScrollAnimationFrame, clearScrollSettleTimeout]
|
|
19532
19564
|
);
|
|
19533
|
-
|
|
19565
|
+
React77.useEffect(() => {
|
|
19534
19566
|
setPendingValue(value ?? null);
|
|
19535
19567
|
}, [value]);
|
|
19536
|
-
|
|
19568
|
+
React77.useLayoutEffect(() => {
|
|
19537
19569
|
if (!isMobile3 || !isOpen) return;
|
|
19538
19570
|
const frameId = window.requestAnimationFrame(() => {
|
|
19539
19571
|
syncScrollPosition(value ?? null, "instant");
|
|
@@ -19542,7 +19574,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19542
19574
|
window.cancelAnimationFrame(frameId);
|
|
19543
19575
|
};
|
|
19544
19576
|
}, [isMobile3, isOpen, syncScrollPosition, value]);
|
|
19545
|
-
const settleScroll =
|
|
19577
|
+
const settleScroll = React77.useCallback(() => {
|
|
19546
19578
|
if (!mobileListRef.current) return;
|
|
19547
19579
|
const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
|
|
19548
19580
|
const nextOption = options[nextIndex];
|
|
@@ -19554,13 +19586,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19554
19586
|
}
|
|
19555
19587
|
setPendingValue(nextOption);
|
|
19556
19588
|
}, [options, pendingValue]);
|
|
19557
|
-
const scheduleScrollSettle =
|
|
19589
|
+
const scheduleScrollSettle = React77.useCallback(() => {
|
|
19558
19590
|
clearScrollSettleTimeout();
|
|
19559
19591
|
scrollSettleTimeoutRef.current = window.setTimeout(() => {
|
|
19560
19592
|
settleScroll();
|
|
19561
19593
|
}, MOBILE_SCROLL_SETTLE_DELAY);
|
|
19562
19594
|
}, [clearScrollSettleTimeout, settleScroll]);
|
|
19563
|
-
const handleScroll =
|
|
19595
|
+
const handleScroll = React77.useCallback(() => {
|
|
19564
19596
|
if (!mobileListRef.current) return;
|
|
19565
19597
|
const nextScrollTop = mobileListRef.current.scrollTop;
|
|
19566
19598
|
clearScrollAnimationFrame();
|
|
@@ -19570,7 +19602,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19570
19602
|
});
|
|
19571
19603
|
scheduleScrollSettle();
|
|
19572
19604
|
}, [clearScrollAnimationFrame, scheduleScrollSettle]);
|
|
19573
|
-
const focusOptionByIndex =
|
|
19605
|
+
const focusOptionByIndex = React77.useCallback(
|
|
19574
19606
|
(index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
|
|
19575
19607
|
if (!mobileListRef.current || index < 0 || index >= options.length) return;
|
|
19576
19608
|
const option = options[index];
|
|
@@ -19588,7 +19620,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19588
19620
|
},
|
|
19589
19621
|
[options, scheduleScrollSettle]
|
|
19590
19622
|
);
|
|
19591
|
-
const handleOptionClick =
|
|
19623
|
+
const handleOptionClick = React77.useCallback(
|
|
19592
19624
|
(option) => {
|
|
19593
19625
|
if (!mobileListRef.current || disabled || option.isDisabled) return;
|
|
19594
19626
|
const optionIndex = getOptionIndex2(options, option);
|
|
@@ -19597,7 +19629,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19597
19629
|
},
|
|
19598
19630
|
[disabled, focusOptionByIndex, options]
|
|
19599
19631
|
);
|
|
19600
|
-
const moveByStep =
|
|
19632
|
+
const moveByStep = React77.useCallback(
|
|
19601
19633
|
(step) => {
|
|
19602
19634
|
const currentIndex = getOptionIndex2(options, pendingValue);
|
|
19603
19635
|
const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
@@ -19609,7 +19641,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19609
19641
|
},
|
|
19610
19642
|
[focusOptionByIndex, options, pendingValue]
|
|
19611
19643
|
);
|
|
19612
|
-
const moveToBoundary =
|
|
19644
|
+
const moveToBoundary = React77.useCallback(
|
|
19613
19645
|
(boundary) => {
|
|
19614
19646
|
const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
|
|
19615
19647
|
if (targetIndex >= 0) {
|
|
@@ -19618,7 +19650,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19618
19650
|
},
|
|
19619
19651
|
[focusOptionByIndex, options]
|
|
19620
19652
|
);
|
|
19621
|
-
const syncPendingValue =
|
|
19653
|
+
const syncPendingValue = React77.useCallback(
|
|
19622
19654
|
(nextValue) => {
|
|
19623
19655
|
const normalizedValue = nextValue ?? null;
|
|
19624
19656
|
const matchedIndex = getOptionIndex2(options, normalizedValue);
|
|
@@ -19646,9 +19678,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
|
|
|
19646
19678
|
}
|
|
19647
19679
|
|
|
19648
19680
|
// src/airbnb-fields/select/useSelectIds.ts
|
|
19649
|
-
var
|
|
19681
|
+
var React78 = __toESM(require("react"), 1);
|
|
19650
19682
|
function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
19651
|
-
const reactId =
|
|
19683
|
+
const reactId = React78.useId().replace(/:/g, "");
|
|
19652
19684
|
const baseId = name ? `select-${name}` : `select-${reactId}`;
|
|
19653
19685
|
const triggerId = `${baseId}-trigger`;
|
|
19654
19686
|
const labelId = `${baseId}-label`;
|
|
@@ -19658,7 +19690,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19658
19690
|
const listboxId = `${baseId}-listbox`;
|
|
19659
19691
|
const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
|
|
19660
19692
|
const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
|
|
19661
|
-
const getOptionId2 =
|
|
19693
|
+
const getOptionId2 = React78.useCallback(
|
|
19662
19694
|
(index) => `${baseId}-option-${index}`,
|
|
19663
19695
|
[baseId]
|
|
19664
19696
|
);
|
|
@@ -19676,8 +19708,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
|
|
|
19676
19708
|
}
|
|
19677
19709
|
|
|
19678
19710
|
// src/airbnb-fields/select/Select.tsx
|
|
19679
|
-
var
|
|
19680
|
-
var AirbnbSelect =
|
|
19711
|
+
var import_jsx_runtime192 = require("react/jsx-runtime");
|
|
19712
|
+
var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
|
|
19681
19713
|
options = [],
|
|
19682
19714
|
value,
|
|
19683
19715
|
onChange,
|
|
@@ -19704,8 +19736,8 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19704
19736
|
filterOption
|
|
19705
19737
|
}, ref) {
|
|
19706
19738
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
19707
|
-
const [isOpen, setIsOpen] =
|
|
19708
|
-
const containerRef =
|
|
19739
|
+
const [isOpen, setIsOpen] = React79.useState(false);
|
|
19740
|
+
const containerRef = React79.useRef(null);
|
|
19709
19741
|
const filteredOptions = filterOption ? options.filter(filterOption) : options;
|
|
19710
19742
|
const hasValue = Boolean(value);
|
|
19711
19743
|
const helperText = placeholder ?? label;
|
|
@@ -19767,12 +19799,12 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19767
19799
|
onOutsideClick: () => setIsOpen(false),
|
|
19768
19800
|
isDisabled: !isOpen || isMobile3
|
|
19769
19801
|
});
|
|
19770
|
-
|
|
19802
|
+
React79.useEffect(() => {
|
|
19771
19803
|
if (isBlocked) {
|
|
19772
19804
|
setIsOpen(false);
|
|
19773
19805
|
}
|
|
19774
19806
|
}, [isBlocked]);
|
|
19775
|
-
|
|
19807
|
+
React79.useEffect(
|
|
19776
19808
|
function setCorrectOptionIfThereIsOnlyValue() {
|
|
19777
19809
|
if (value?.value === void 0 || value.value === null || value.label !== "") {
|
|
19778
19810
|
return;
|
|
@@ -19784,7 +19816,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19784
19816
|
},
|
|
19785
19817
|
[onChange, filteredOptions, value]
|
|
19786
19818
|
);
|
|
19787
|
-
const handleMobileOpenChange =
|
|
19819
|
+
const handleMobileOpenChange = React79.useCallback(
|
|
19788
19820
|
(nextOpen) => {
|
|
19789
19821
|
if (isBlocked && nextOpen) return;
|
|
19790
19822
|
setIsOpen(nextOpen);
|
|
@@ -19795,7 +19827,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19795
19827
|
},
|
|
19796
19828
|
[focusTrigger, isBlocked, syncPendingValue, value]
|
|
19797
19829
|
);
|
|
19798
|
-
const handleMobileDone =
|
|
19830
|
+
const handleMobileDone = React79.useCallback(() => {
|
|
19799
19831
|
if (isBlocked) return;
|
|
19800
19832
|
const finalOption = pendingValue;
|
|
19801
19833
|
if (finalOption && finalOption.value !== value?.value) {
|
|
@@ -19804,7 +19836,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19804
19836
|
setIsOpen(false);
|
|
19805
19837
|
focusTrigger();
|
|
19806
19838
|
}, [focusTrigger, isBlocked, onChange, pendingValue, value]);
|
|
19807
|
-
const handleTriggerClick =
|
|
19839
|
+
const handleTriggerClick = React79.useCallback(() => {
|
|
19808
19840
|
if (isBlocked) return;
|
|
19809
19841
|
setIsOpen((prev) => {
|
|
19810
19842
|
const nextOpen = !prev;
|
|
@@ -19857,13 +19889,13 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19857
19889
|
handleMobileOpenChange(false);
|
|
19858
19890
|
}
|
|
19859
19891
|
};
|
|
19860
|
-
return /* @__PURE__ */ (0,
|
|
19892
|
+
return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
|
|
19861
19893
|
"div",
|
|
19862
19894
|
{
|
|
19863
19895
|
ref: containerRef,
|
|
19864
19896
|
className: cn("relative w-full max-w-[var(--max-field-width)]", className),
|
|
19865
19897
|
children: [
|
|
19866
|
-
name && /* @__PURE__ */ (0,
|
|
19898
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
19867
19899
|
renderTrigger ? renderTrigger({
|
|
19868
19900
|
id: triggerId,
|
|
19869
19901
|
open: isOpen,
|
|
@@ -19884,7 +19916,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19884
19916
|
onClick: handleTriggerClick,
|
|
19885
19917
|
onKeyDown: handleRootTriggerKeyDown,
|
|
19886
19918
|
onBlur
|
|
19887
|
-
}) : /* @__PURE__ */ (0,
|
|
19919
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19888
19920
|
AirbnbSelectTrigger,
|
|
19889
19921
|
{
|
|
19890
19922
|
id: triggerId,
|
|
@@ -19911,7 +19943,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19911
19943
|
onBlur
|
|
19912
19944
|
}
|
|
19913
19945
|
),
|
|
19914
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
19946
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19915
19947
|
AirbnbSelectMobileContent,
|
|
19916
19948
|
{
|
|
19917
19949
|
open: isOpen,
|
|
@@ -19936,7 +19968,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19936
19968
|
getOptionId: getOptionId2,
|
|
19937
19969
|
noOptionsMessage
|
|
19938
19970
|
}
|
|
19939
|
-
) : /* @__PURE__ */ (0,
|
|
19971
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
19940
19972
|
AirbnbSelectDesktopContent,
|
|
19941
19973
|
{
|
|
19942
19974
|
isOpen,
|
|
@@ -19970,13 +20002,13 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
|
|
|
19970
20002
|
});
|
|
19971
20003
|
|
|
19972
20004
|
// src/airbnb-fields/phone-field/PhoneField.tsx
|
|
19973
|
-
var
|
|
20005
|
+
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
19974
20006
|
function formatPhoneCodeOptionLabel2(option) {
|
|
19975
20007
|
const label = String(option.label);
|
|
19976
20008
|
const value = String(option.value);
|
|
19977
20009
|
return label.includes(value) ? label : `${label} (${value})`;
|
|
19978
20010
|
}
|
|
19979
|
-
var AirbnbPhoneField =
|
|
20011
|
+
var AirbnbPhoneField = React80.forwardRef(
|
|
19980
20012
|
({
|
|
19981
20013
|
label,
|
|
19982
20014
|
topLabel,
|
|
@@ -20000,9 +20032,9 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20000
20032
|
codePlaceholder = "+00",
|
|
20001
20033
|
defaultCode
|
|
20002
20034
|
}, ref) => {
|
|
20003
|
-
const inputId =
|
|
20035
|
+
const inputId = React80.useId();
|
|
20004
20036
|
const effectiveCode = value?.code || defaultCode || "";
|
|
20005
|
-
const codeOptions =
|
|
20037
|
+
const codeOptions = React80.useMemo(
|
|
20006
20038
|
() => options.map((option) => ({
|
|
20007
20039
|
value: option.value,
|
|
20008
20040
|
label: formatPhoneCodeOptionLabel2(option),
|
|
@@ -20010,7 +20042,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20010
20042
|
})),
|
|
20011
20043
|
[options]
|
|
20012
20044
|
);
|
|
20013
|
-
const selectedCodeOption =
|
|
20045
|
+
const selectedCodeOption = React80.useMemo(
|
|
20014
20046
|
() => codeOptions.find((option) => option.value === effectiveCode) ?? null,
|
|
20015
20047
|
[codeOptions, effectiveCode]
|
|
20016
20048
|
);
|
|
@@ -20018,9 +20050,9 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20018
20050
|
const hasInvalidState = Boolean(error) || Boolean(invalid);
|
|
20019
20051
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
20020
20052
|
const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
|
|
20021
|
-
return /* @__PURE__ */ (0,
|
|
20022
|
-
name && /* @__PURE__ */ (0,
|
|
20023
|
-
codeName && /* @__PURE__ */ (0,
|
|
20053
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
|
|
20054
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
|
|
20055
|
+
codeName && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20024
20056
|
"input",
|
|
20025
20057
|
{
|
|
20026
20058
|
type: "hidden",
|
|
@@ -20029,7 +20061,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20029
20061
|
disabled
|
|
20030
20062
|
}
|
|
20031
20063
|
),
|
|
20032
|
-
numberName && /* @__PURE__ */ (0,
|
|
20064
|
+
numberName && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20033
20065
|
"input",
|
|
20034
20066
|
{
|
|
20035
20067
|
type: "hidden",
|
|
@@ -20038,7 +20070,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20038
20070
|
disabled
|
|
20039
20071
|
}
|
|
20040
20072
|
),
|
|
20041
|
-
topLabel && /* @__PURE__ */ (0,
|
|
20073
|
+
topLabel && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20042
20074
|
"label",
|
|
20043
20075
|
{
|
|
20044
20076
|
htmlFor: inputId,
|
|
@@ -20046,8 +20078,8 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20046
20078
|
children: topLabel
|
|
20047
20079
|
}
|
|
20048
20080
|
),
|
|
20049
|
-
/* @__PURE__ */ (0,
|
|
20050
|
-
/* @__PURE__ */ (0,
|
|
20081
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "flex items-stretch", children: [
|
|
20082
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20051
20083
|
AirbnbSelect,
|
|
20052
20084
|
{
|
|
20053
20085
|
ref,
|
|
@@ -20076,7 +20108,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20076
20108
|
onClick,
|
|
20077
20109
|
onKeyDown,
|
|
20078
20110
|
valueLabel
|
|
20079
|
-
}) => /* @__PURE__ */ (0,
|
|
20111
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
|
|
20080
20112
|
"button",
|
|
20081
20113
|
{
|
|
20082
20114
|
id,
|
|
@@ -20097,8 +20129,8 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20097
20129
|
triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
|
|
20098
20130
|
),
|
|
20099
20131
|
children: [
|
|
20100
|
-
/* @__PURE__ */ (0,
|
|
20101
|
-
/* @__PURE__ */ (0,
|
|
20132
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)("span", { children: valueLabel ?? codePlaceholder }),
|
|
20133
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20102
20134
|
import_lucide_react57.ChevronDown,
|
|
20103
20135
|
{
|
|
20104
20136
|
className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
|
|
@@ -20110,7 +20142,7 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20110
20142
|
)
|
|
20111
20143
|
}
|
|
20112
20144
|
),
|
|
20113
|
-
/* @__PURE__ */ (0,
|
|
20145
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
20114
20146
|
AirbnbInput,
|
|
20115
20147
|
{
|
|
20116
20148
|
id: inputId,
|
|
@@ -20139,18 +20171,18 @@ var AirbnbPhoneField = React79.forwardRef(
|
|
|
20139
20171
|
}
|
|
20140
20172
|
)
|
|
20141
20173
|
] }),
|
|
20142
|
-
error && /* @__PURE__ */ (0,
|
|
20174
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(FieldErrorMessage, { message: error })
|
|
20143
20175
|
] });
|
|
20144
20176
|
}
|
|
20145
20177
|
);
|
|
20146
20178
|
AirbnbPhoneField.displayName = "AirbnbPhoneField";
|
|
20147
20179
|
|
|
20148
20180
|
// src/airbnb-fields/searchable-select/SearchableSelect.tsx
|
|
20149
|
-
var
|
|
20181
|
+
var React81 = __toESM(require("react"), 1);
|
|
20150
20182
|
var import_lucide_react58 = require("lucide-react");
|
|
20151
20183
|
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
20152
20184
|
var import_react90 = require("react");
|
|
20153
|
-
var
|
|
20185
|
+
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
20154
20186
|
var ROW_HEIGHT = 48;
|
|
20155
20187
|
var DESKTOP_LIST_HEIGHT = 280;
|
|
20156
20188
|
var MOBILE_LIST_HEIGHT = 420;
|
|
@@ -20190,13 +20222,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20190
20222
|
loadingMessage
|
|
20191
20223
|
}, ref) => {
|
|
20192
20224
|
const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
|
|
20193
|
-
const reactId =
|
|
20194
|
-
const [open, setOpen] =
|
|
20195
|
-
const [internalSearchValue, setInternalSearchValue] =
|
|
20196
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
20197
|
-
const containerRef =
|
|
20198
|
-
const triggerRef =
|
|
20199
|
-
const inputRef =
|
|
20225
|
+
const reactId = React81.useId();
|
|
20226
|
+
const [open, setOpen] = React81.useState(false);
|
|
20227
|
+
const [internalSearchValue, setInternalSearchValue] = React81.useState("");
|
|
20228
|
+
const [highlightedIndex, setHighlightedIndex] = React81.useState(-1);
|
|
20229
|
+
const containerRef = React81.useRef(null);
|
|
20230
|
+
const triggerRef = React81.useRef(null);
|
|
20231
|
+
const inputRef = React81.useRef(null);
|
|
20200
20232
|
const listboxId = `${reactId}-listbox`;
|
|
20201
20233
|
const labelId = `${reactId}-label`;
|
|
20202
20234
|
const valueId = `${reactId}-value`;
|
|
@@ -20205,13 +20237,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20205
20237
|
const searchInputId = `${reactId}-search`;
|
|
20206
20238
|
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
20207
20239
|
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
20208
|
-
const visibleOptions =
|
|
20240
|
+
const visibleOptions = React81.useMemo(() => {
|
|
20209
20241
|
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
20210
20242
|
return options;
|
|
20211
20243
|
}
|
|
20212
20244
|
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
20213
20245
|
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
20214
|
-
const selectedIndex =
|
|
20246
|
+
const selectedIndex = React81.useMemo(
|
|
20215
20247
|
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
20216
20248
|
[value?.value, visibleOptions]
|
|
20217
20249
|
);
|
|
@@ -20237,7 +20269,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20237
20269
|
},
|
|
20238
20270
|
[handleOnOpenChange]
|
|
20239
20271
|
);
|
|
20240
|
-
|
|
20272
|
+
React81.useEffect(() => {
|
|
20241
20273
|
if (isBlocked) {
|
|
20242
20274
|
setSelectOpen(false);
|
|
20243
20275
|
return;
|
|
@@ -20250,7 +20282,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20250
20282
|
window.cancelAnimationFrame(frameId);
|
|
20251
20283
|
};
|
|
20252
20284
|
}, [isBlocked, open, setSelectOpen]);
|
|
20253
|
-
|
|
20285
|
+
React81.useEffect(() => {
|
|
20254
20286
|
if (!open) {
|
|
20255
20287
|
setHighlightedIndex(-1);
|
|
20256
20288
|
return;
|
|
@@ -20318,7 +20350,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20318
20350
|
}
|
|
20319
20351
|
}
|
|
20320
20352
|
}
|
|
20321
|
-
const content = /* @__PURE__ */ (0,
|
|
20353
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20322
20354
|
AirbnbSearchableSelectContent,
|
|
20323
20355
|
{
|
|
20324
20356
|
inputId: searchInputId,
|
|
@@ -20345,10 +20377,10 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20345
20377
|
onOptionHover: setHighlightedIndex
|
|
20346
20378
|
}
|
|
20347
20379
|
);
|
|
20348
|
-
|
|
20349
|
-
return /* @__PURE__ */ (0,
|
|
20350
|
-
name && /* @__PURE__ */ (0,
|
|
20351
|
-
/* @__PURE__ */ (0,
|
|
20380
|
+
React81.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
20381
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
20382
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
20383
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20352
20384
|
AirbnbFieldTrigger,
|
|
20353
20385
|
{
|
|
20354
20386
|
id: `${reactId}-trigger`,
|
|
@@ -20382,7 +20414,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20382
20414
|
},
|
|
20383
20415
|
onKeyDown: handleTriggerKeyDown,
|
|
20384
20416
|
onBlur,
|
|
20385
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
20417
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20386
20418
|
import_lucide_react58.ChevronDown,
|
|
20387
20419
|
{
|
|
20388
20420
|
className: cn(
|
|
@@ -20393,7 +20425,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20393
20425
|
)
|
|
20394
20426
|
}
|
|
20395
20427
|
),
|
|
20396
|
-
isMobile3 ? /* @__PURE__ */ (0,
|
|
20428
|
+
isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20397
20429
|
Drawer,
|
|
20398
20430
|
{
|
|
20399
20431
|
open,
|
|
@@ -20405,13 +20437,13 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20405
20437
|
}
|
|
20406
20438
|
closeSelect();
|
|
20407
20439
|
},
|
|
20408
|
-
children: /* @__PURE__ */ (0,
|
|
20409
|
-
/* @__PURE__ */ (0,
|
|
20410
|
-
/* @__PURE__ */ (0,
|
|
20411
|
-
/* @__PURE__ */ (0,
|
|
20440
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
20441
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
20442
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
20443
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
20412
20444
|
] })
|
|
20413
20445
|
}
|
|
20414
|
-
) : open ? /* @__PURE__ */ (0,
|
|
20446
|
+
) : open ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20415
20447
|
"div",
|
|
20416
20448
|
{
|
|
20417
20449
|
className: cn(
|
|
@@ -20423,7 +20455,7 @@ var AirbnbSearchableSelectInternal = ({
|
|
|
20423
20455
|
) : null
|
|
20424
20456
|
] });
|
|
20425
20457
|
};
|
|
20426
|
-
var AirbnbSearchableSelect =
|
|
20458
|
+
var AirbnbSearchableSelect = React81.forwardRef(
|
|
20427
20459
|
AirbnbSearchableSelectInternal
|
|
20428
20460
|
);
|
|
20429
20461
|
function AirbnbSearchableSelectContent({
|
|
@@ -20450,9 +20482,9 @@ function AirbnbSearchableSelectContent({
|
|
|
20450
20482
|
onOptionClick,
|
|
20451
20483
|
onOptionHover
|
|
20452
20484
|
}) {
|
|
20453
|
-
const listRef =
|
|
20454
|
-
const lastLoadMoreOptionsLengthRef =
|
|
20455
|
-
const previousHighlightedIndexRef =
|
|
20485
|
+
const listRef = React81.useRef(null);
|
|
20486
|
+
const lastLoadMoreOptionsLengthRef = React81.useRef(null);
|
|
20487
|
+
const previousHighlightedIndexRef = React81.useRef(highlightedIndex);
|
|
20456
20488
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
20457
20489
|
const virtualizer = (0, import_react_virtual3.useVirtualizer)({
|
|
20458
20490
|
count: rowCount,
|
|
@@ -20463,7 +20495,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20463
20495
|
const virtualItems = virtualizer.getVirtualItems();
|
|
20464
20496
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
20465
20497
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
20466
|
-
|
|
20498
|
+
React81.useEffect(() => {
|
|
20467
20499
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
20468
20500
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
20469
20501
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -20471,23 +20503,23 @@ function AirbnbSearchableSelectContent({
|
|
|
20471
20503
|
onLoadMore?.();
|
|
20472
20504
|
}
|
|
20473
20505
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
20474
|
-
|
|
20506
|
+
React81.useEffect(() => {
|
|
20475
20507
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
20476
20508
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
20477
20509
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
20478
20510
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
20479
20511
|
}
|
|
20480
20512
|
}, [highlightedIndex, virtualizer]);
|
|
20481
|
-
return /* @__PURE__ */ (0,
|
|
20482
|
-
/* @__PURE__ */ (0,
|
|
20483
|
-
/* @__PURE__ */ (0,
|
|
20513
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "p-2", children: [
|
|
20514
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "relative mb-2", children: [
|
|
20515
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20484
20516
|
import_lucide_react58.Search,
|
|
20485
20517
|
{
|
|
20486
20518
|
"aria-hidden": "true",
|
|
20487
20519
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
20488
20520
|
}
|
|
20489
20521
|
),
|
|
20490
|
-
/* @__PURE__ */ (0,
|
|
20522
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20491
20523
|
"input",
|
|
20492
20524
|
{
|
|
20493
20525
|
id: inputId,
|
|
@@ -20506,7 +20538,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20506
20538
|
}
|
|
20507
20539
|
)
|
|
20508
20540
|
] }),
|
|
20509
|
-
loading && options.length === 0 ? /* @__PURE__ */ (0,
|
|
20541
|
+
loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20510
20542
|
"div",
|
|
20511
20543
|
{
|
|
20512
20544
|
id: listboxId,
|
|
@@ -20515,7 +20547,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20515
20547
|
"aria-labelledby": labelId,
|
|
20516
20548
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
20517
20549
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
20518
|
-
children: /* @__PURE__ */ (0,
|
|
20550
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20519
20551
|
"div",
|
|
20520
20552
|
{
|
|
20521
20553
|
className: "relative w-full",
|
|
@@ -20523,7 +20555,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20523
20555
|
children: virtualItems.map((virtualItem) => {
|
|
20524
20556
|
const option = options[virtualItem.index];
|
|
20525
20557
|
if (!option) {
|
|
20526
|
-
return /* @__PURE__ */ (0,
|
|
20558
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20527
20559
|
"div",
|
|
20528
20560
|
{
|
|
20529
20561
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -20538,7 +20570,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20538
20570
|
}
|
|
20539
20571
|
const isSelected = value?.value === option.value;
|
|
20540
20572
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
20541
|
-
return /* @__PURE__ */ (0,
|
|
20573
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
20542
20574
|
"button",
|
|
20543
20575
|
{
|
|
20544
20576
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -20560,7 +20592,7 @@ function AirbnbSearchableSelectContent({
|
|
|
20560
20592
|
height: `${virtualItem.size}px`,
|
|
20561
20593
|
transform: `translateY(${virtualItem.start}px)`
|
|
20562
20594
|
},
|
|
20563
|
-
children: /* @__PURE__ */ (0,
|
|
20595
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("span", { className: "truncate text-center", children: String(option.label) })
|
|
20564
20596
|
},
|
|
20565
20597
|
`${String(option.value)}-${virtualItem.index}`
|
|
20566
20598
|
);
|
|
@@ -20589,16 +20621,16 @@ function getNextEnabledIndex(options, startIndex, step) {
|
|
|
20589
20621
|
}
|
|
20590
20622
|
|
|
20591
20623
|
// src/airbnb-fields/search-input/SearchInput.tsx
|
|
20592
|
-
var
|
|
20624
|
+
var React82 = __toESM(require("react"), 1);
|
|
20593
20625
|
var import_react_i18next44 = require("react-i18next");
|
|
20594
20626
|
var import_lucide_react59 = require("lucide-react");
|
|
20595
|
-
var
|
|
20596
|
-
var AirbnbSearchInput =
|
|
20627
|
+
var import_jsx_runtime195 = require("react/jsx-runtime");
|
|
20628
|
+
var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
|
|
20597
20629
|
const { t } = (0, import_react_i18next44.useTranslation)();
|
|
20598
20630
|
const placeholderText = placeholder || t("search_property") + "...";
|
|
20599
|
-
return /* @__PURE__ */ (0,
|
|
20600
|
-
/* @__PURE__ */ (0,
|
|
20601
|
-
/* @__PURE__ */ (0,
|
|
20631
|
+
return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
|
|
20632
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react59.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
|
|
20633
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20602
20634
|
"input",
|
|
20603
20635
|
{
|
|
20604
20636
|
...props,
|
|
@@ -20617,13 +20649,13 @@ var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20617
20649
|
)
|
|
20618
20650
|
}
|
|
20619
20651
|
),
|
|
20620
|
-
onReset && /* @__PURE__ */ (0,
|
|
20652
|
+
onReset && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
20621
20653
|
Button,
|
|
20622
20654
|
{
|
|
20623
20655
|
variant: "ghost",
|
|
20624
20656
|
onClick: onReset,
|
|
20625
20657
|
className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
|
|
20626
|
-
children: /* @__PURE__ */ (0,
|
|
20658
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react59.X, { className: "h-5 w-5" })
|
|
20627
20659
|
}
|
|
20628
20660
|
)
|
|
20629
20661
|
] });
|
|
@@ -20631,11 +20663,11 @@ var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClass
|
|
|
20631
20663
|
AirbnbSearchInput.displayName = "AirbnbSearchInput";
|
|
20632
20664
|
|
|
20633
20665
|
// src/airbnb-fields/switch/Switch.tsx
|
|
20634
|
-
var
|
|
20666
|
+
var React83 = __toESM(require("react"), 1);
|
|
20635
20667
|
var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
|
|
20636
20668
|
var import_lucide_react60 = require("lucide-react");
|
|
20637
|
-
var
|
|
20638
|
-
var AirbnbSwitch =
|
|
20669
|
+
var import_jsx_runtime196 = require("react/jsx-runtime");
|
|
20670
|
+
var AirbnbSwitch = React83.forwardRef(
|
|
20639
20671
|
({
|
|
20640
20672
|
className,
|
|
20641
20673
|
value,
|
|
@@ -20649,9 +20681,9 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20649
20681
|
wrapperClassName,
|
|
20650
20682
|
...props
|
|
20651
20683
|
}, ref) => {
|
|
20652
|
-
const generatedId =
|
|
20684
|
+
const generatedId = React83.useId();
|
|
20653
20685
|
const fieldId = id || generatedId;
|
|
20654
|
-
const switchElement = /* @__PURE__ */ (0,
|
|
20686
|
+
const switchElement = /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
|
|
20655
20687
|
SwitchPrimitives2.Root,
|
|
20656
20688
|
{
|
|
20657
20689
|
ref,
|
|
@@ -20671,14 +20703,14 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20671
20703
|
"aria-busy": loading,
|
|
20672
20704
|
"aria-readonly": readOnly,
|
|
20673
20705
|
...props,
|
|
20674
|
-
children: /* @__PURE__ */ (0,
|
|
20706
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
|
|
20675
20707
|
SwitchPrimitives2.Thumb,
|
|
20676
20708
|
{
|
|
20677
20709
|
className: cn(
|
|
20678
20710
|
"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",
|
|
20679
20711
|
"data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
|
|
20680
20712
|
),
|
|
20681
|
-
children: /* @__PURE__ */ (0,
|
|
20713
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
|
|
20682
20714
|
import_lucide_react60.Check,
|
|
20683
20715
|
{
|
|
20684
20716
|
"aria-hidden": "true",
|
|
@@ -20693,10 +20725,10 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20693
20725
|
if (!label && !error) {
|
|
20694
20726
|
return switchElement;
|
|
20695
20727
|
}
|
|
20696
|
-
return /* @__PURE__ */ (0,
|
|
20697
|
-
/* @__PURE__ */ (0,
|
|
20728
|
+
return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(import_jsx_runtime196.Fragment, { children: [
|
|
20729
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
|
|
20698
20730
|
switchElement,
|
|
20699
|
-
label && /* @__PURE__ */ (0,
|
|
20731
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
|
|
20700
20732
|
Label,
|
|
20701
20733
|
{
|
|
20702
20734
|
htmlFor: fieldId,
|
|
@@ -20708,7 +20740,7 @@ var AirbnbSwitch = React82.forwardRef(
|
|
|
20708
20740
|
}
|
|
20709
20741
|
)
|
|
20710
20742
|
] }),
|
|
20711
|
-
error && /* @__PURE__ */ (0,
|
|
20743
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(ErrorMessage, { disabled, children: error })
|
|
20712
20744
|
] });
|
|
20713
20745
|
}
|
|
20714
20746
|
);
|
|
@@ -20776,6 +20808,7 @@ AirbnbSwitch.displayName = "AirbnbSwitch";
|
|
|
20776
20808
|
CommingSoonBadge,
|
|
20777
20809
|
ConfirmationDialog,
|
|
20778
20810
|
CopyIcon,
|
|
20811
|
+
CopyInput,
|
|
20779
20812
|
CopyLinkButton,
|
|
20780
20813
|
CopyString,
|
|
20781
20814
|
Counter,
|