@chekinapp/ui 0.0.72 → 0.0.73
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 +2191 -193
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +297 -2
- package/dist/index.d.ts +297 -2
- package/dist/index.js +2215 -224
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -76,12 +76,19 @@ __export(index_exports, {
|
|
|
76
76
|
CopyLinkButton: () => CopyLinkButton,
|
|
77
77
|
CopyString: () => CopyString,
|
|
78
78
|
CustomCheckboxDropdownGroup: () => CustomCheckboxDropdownGroup,
|
|
79
|
+
DEFAULT_DISPLAY_FORMAT: () => DEFAULT_DISPLAY_FORMAT,
|
|
79
80
|
DEVICE_BREAKPOINTS: () => DEVICE_BREAKPOINTS,
|
|
80
81
|
DashboardCreatableMultiSelect: () => DashboardCreatableMultiSelect,
|
|
82
|
+
DashboardDateRangePicker: () => DashboardDateRangePicker,
|
|
83
|
+
DashboardDatepicker: () => DashboardDatepicker,
|
|
84
|
+
DashboardFileInput: () => DashboardFileInput,
|
|
81
85
|
DashboardInfiniteScrollSelect: () => DashboardInfiniteScrollSelect,
|
|
82
86
|
DashboardInput: () => DashboardInput,
|
|
83
87
|
DashboardMultiSelect: () => DashboardMultiSelect,
|
|
84
88
|
DashboardSelect: () => DashboardSelect,
|
|
89
|
+
DashboardSelectIconsBox: () => DashboardSelectIconsBox,
|
|
90
|
+
DashboardTextarea: () => DashboardTextarea,
|
|
91
|
+
DashboardTimePicker: () => DashboardTimePicker,
|
|
85
92
|
DataTable: () => DataTable,
|
|
86
93
|
DatePicker: () => DatePicker,
|
|
87
94
|
DateTableFilter: () => DateTableFilter,
|
|
@@ -317,13 +324,17 @@ __export(index_exports, {
|
|
|
317
324
|
calendarClassNames: () => calendarClassNames,
|
|
318
325
|
cn: () => cn,
|
|
319
326
|
copyToClipboard: () => copyToClipboard,
|
|
327
|
+
createDisabledMatchers: () => createDisabledMatchers,
|
|
320
328
|
emptyMediaVariants: () => emptyMediaVariants,
|
|
329
|
+
formatDate: () => formatDate,
|
|
321
330
|
getErrorMessage: () => getErrorMessage,
|
|
322
331
|
getScrollableAreaState: () => getScrollableAreaState,
|
|
323
332
|
getSidebarState: () => getSidebarState,
|
|
324
333
|
inputVariants: () => inputVariants,
|
|
334
|
+
isDayBlocked: () => isDayBlocked,
|
|
325
335
|
isNumeric: () => isNumeric,
|
|
326
336
|
labelVariants: () => labelVariants,
|
|
337
|
+
parseDate: () => parseDate,
|
|
327
338
|
registerUiKitI18n: () => registerUiKitI18n,
|
|
328
339
|
scrollToTop: () => scrollToTop,
|
|
329
340
|
sectionTagVariants: () => sectionTagVariants,
|
|
@@ -374,7 +385,8 @@ __export(index_exports, {
|
|
|
374
385
|
useTimeout: () => useTimeout,
|
|
375
386
|
useTimeoutRef: () => useTimeoutRef,
|
|
376
387
|
useTimer: () => useTimer,
|
|
377
|
-
useUpdateToast: () => useUpdateToast
|
|
388
|
+
useUpdateToast: () => useUpdateToast,
|
|
389
|
+
useValidateDates: () => useValidateDates
|
|
378
390
|
});
|
|
379
391
|
module.exports = __toCommonJS(index_exports);
|
|
380
392
|
|
|
@@ -910,7 +922,19 @@ var switchThumbVariants = (0, import_class_variance_authority4.cva)(
|
|
|
910
922
|
}
|
|
911
923
|
);
|
|
912
924
|
var Switch = React5.forwardRef(
|
|
913
|
-
({
|
|
925
|
+
({
|
|
926
|
+
className,
|
|
927
|
+
size,
|
|
928
|
+
readOnly,
|
|
929
|
+
loading,
|
|
930
|
+
onChange,
|
|
931
|
+
value,
|
|
932
|
+
id,
|
|
933
|
+
label,
|
|
934
|
+
error,
|
|
935
|
+
wrapperClassName,
|
|
936
|
+
...props
|
|
937
|
+
}, ref) => {
|
|
914
938
|
const generatedId = React5.useId();
|
|
915
939
|
const fieldId = id || generatedId;
|
|
916
940
|
const switchElement = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
@@ -932,8 +956,8 @@ var Switch = React5.forwardRef(
|
|
|
932
956
|
if (!label && !error) {
|
|
933
957
|
return switchElement;
|
|
934
958
|
}
|
|
935
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
936
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
959
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
|
|
960
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex items-center gap-3", wrapperClassName), children: [
|
|
937
961
|
switchElement,
|
|
938
962
|
label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { htmlFor: fieldId, className: "cursor-pointer text-base font-medium", children: label })
|
|
939
963
|
] }),
|
|
@@ -5530,7 +5554,35 @@ var translation_default2 = {
|
|
|
5530
5554
|
would_you_like_to_save_them: "Would you like to save them?",
|
|
5531
5555
|
save: "Save",
|
|
5532
5556
|
dont_save: "Don't save",
|
|
5533
|
-
copied_exclamation: "Copied!"
|
|
5557
|
+
copied_exclamation: "Copied!",
|
|
5558
|
+
search_placeholder: "Search\u2026",
|
|
5559
|
+
loading_more: "Loading\u2026",
|
|
5560
|
+
no_options: "No options",
|
|
5561
|
+
select_option: "Select option",
|
|
5562
|
+
clear_all: "Clear all",
|
|
5563
|
+
remove_item: "Remove {{label}}",
|
|
5564
|
+
upload_file: "Upload file",
|
|
5565
|
+
download_attachment: "Download attachment",
|
|
5566
|
+
remove_file: "Remove file",
|
|
5567
|
+
open_calendar: "Open calendar",
|
|
5568
|
+
clear_dates: "Clear dates",
|
|
5569
|
+
select_dates: "Select dates",
|
|
5570
|
+
pick_date_range: "Pick a date range",
|
|
5571
|
+
from: "From",
|
|
5572
|
+
to: "To",
|
|
5573
|
+
pick_month: "Pick a month",
|
|
5574
|
+
pick_date: "Pick a date",
|
|
5575
|
+
month: "Month",
|
|
5576
|
+
day: "Day",
|
|
5577
|
+
year: "Year",
|
|
5578
|
+
done: "Done",
|
|
5579
|
+
wrong_period_of_dates: "Selected period is invalid",
|
|
5580
|
+
date_range_max_days_error_one: "Range cannot exceed {{count}} day",
|
|
5581
|
+
date_range_max_days_error_other: "Range cannot exceed {{count}} days",
|
|
5582
|
+
date_range_min_days_error_one: "Range must be at least {{count}} day",
|
|
5583
|
+
date_range_min_days_error_other: "Range must be at least {{count}} days",
|
|
5584
|
+
past_dates: "Date cannot be before {{minDate}}",
|
|
5585
|
+
future_dates: "Date cannot be after {{maxDate}}"
|
|
5534
5586
|
};
|
|
5535
5587
|
|
|
5536
5588
|
// src/locales/es/translation.json
|
|
@@ -13651,6 +13703,7 @@ AirbnbSearchInput.displayName = "SearchInput";
|
|
|
13651
13703
|
// src/dashboard/input/Input.tsx
|
|
13652
13704
|
var React53 = __toESM(require("react"), 1);
|
|
13653
13705
|
var import_lucide_react46 = require("lucide-react");
|
|
13706
|
+
var import_react_i18next26 = require("react-i18next");
|
|
13654
13707
|
|
|
13655
13708
|
// src/dashboard/_fieldset/Fieldset.tsx
|
|
13656
13709
|
var import_jsx_runtime154 = require("react/jsx-runtime");
|
|
@@ -13798,6 +13851,7 @@ var DashboardInput = React53.forwardRef(
|
|
|
13798
13851
|
const generatedId = React53.useId();
|
|
13799
13852
|
const inputId = id ?? name ?? generatedId;
|
|
13800
13853
|
const errorId = `${inputId}-error`;
|
|
13854
|
+
const { t } = (0, import_react_i18next26.useTranslation)();
|
|
13801
13855
|
const isEmpty = checkIfEmpty({ empty, value, defaultValue });
|
|
13802
13856
|
const [inputType, setInputType] = React53.useState(type);
|
|
13803
13857
|
const [isPasswordRevealed, setIsPasswordRevealed] = React53.useState(false);
|
|
@@ -13989,7 +14043,7 @@ var DashboardInput = React53.forwardRef(
|
|
|
13989
14043
|
{
|
|
13990
14044
|
"data-testid": `${name}-optional`,
|
|
13991
14045
|
className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]",
|
|
13992
|
-
children: typeof optional === "string" ? optional : "optional"
|
|
14046
|
+
children: typeof optional === "string" ? optional : t("optional")
|
|
13993
14047
|
}
|
|
13994
14048
|
),
|
|
13995
14049
|
!errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
@@ -14013,6 +14067,10 @@ DashboardInput.displayName = "DashboardInput";
|
|
|
14013
14067
|
// src/dashboard/select/Select.tsx
|
|
14014
14068
|
var React55 = __toESM(require("react"), 1);
|
|
14015
14069
|
var import_lucide_react47 = require("lucide-react");
|
|
14070
|
+
var import_react_i18next29 = require("react-i18next");
|
|
14071
|
+
|
|
14072
|
+
// src/dashboard/_select-internals/SelectMenu.tsx
|
|
14073
|
+
var import_react_i18next27 = require("react-i18next");
|
|
14016
14074
|
|
|
14017
14075
|
// src/dashboard/_select-internals/utils.ts
|
|
14018
14076
|
function getOptionIndex2(options, option) {
|
|
@@ -14065,7 +14123,8 @@ function SelectMenu({
|
|
|
14065
14123
|
emptyContent,
|
|
14066
14124
|
footer
|
|
14067
14125
|
}) {
|
|
14068
|
-
const
|
|
14126
|
+
const { t } = (0, import_react_i18next27.useTranslation)();
|
|
14127
|
+
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
14069
14128
|
const hasOptions = options.length > 0;
|
|
14070
14129
|
return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
|
|
14071
14130
|
"div",
|
|
@@ -14084,8 +14143,7 @@ function SelectMenu({
|
|
|
14084
14143
|
menuClassName
|
|
14085
14144
|
),
|
|
14086
14145
|
children: [
|
|
14087
|
-
!hasOptions &&
|
|
14088
|
-
!hasOptions && !emptyMessage && emptyContent,
|
|
14146
|
+
!hasOptions && (emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage })),
|
|
14089
14147
|
options.map((option, index) => {
|
|
14090
14148
|
const isSelected = isOptionSelected(option, selectedValue, selectedValues);
|
|
14091
14149
|
const isHighlighted = index === highlightedIndex;
|
|
@@ -14128,18 +14186,25 @@ function SelectMenu({
|
|
|
14128
14186
|
}
|
|
14129
14187
|
|
|
14130
14188
|
// src/dashboard/_select-internals/SelectMenuPanel.tsx
|
|
14189
|
+
var import_react_i18next28 = require("react-i18next");
|
|
14131
14190
|
var import_jsx_runtime157 = require("react/jsx-runtime");
|
|
14132
14191
|
function SelectMenuPanel({
|
|
14133
14192
|
isOpen,
|
|
14134
14193
|
isMobile: isMobile2,
|
|
14135
14194
|
onClose,
|
|
14136
14195
|
title,
|
|
14196
|
+
description,
|
|
14137
14197
|
className,
|
|
14138
14198
|
drawerClassName,
|
|
14199
|
+
drawerContentClassName,
|
|
14139
14200
|
children
|
|
14140
14201
|
}) {
|
|
14202
|
+
const { t } = (0, import_react_i18next28.useTranslation)();
|
|
14141
14203
|
if (!isOpen) return null;
|
|
14142
14204
|
if (isMobile2) {
|
|
14205
|
+
const fallbackTitle = t("select_option");
|
|
14206
|
+
const titleText = typeof title === "string" || typeof title === "number" ? String(title) : fallbackTitle;
|
|
14207
|
+
const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : titleText;
|
|
14143
14208
|
return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
|
|
14144
14209
|
Drawer,
|
|
14145
14210
|
{
|
|
@@ -14151,10 +14216,21 @@ function SelectMenuPanel({
|
|
|
14151
14216
|
DrawerContent,
|
|
14152
14217
|
{
|
|
14153
14218
|
onClose,
|
|
14219
|
+
lockScroll: false,
|
|
14154
14220
|
className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
|
|
14155
14221
|
children: [
|
|
14156
|
-
|
|
14157
|
-
/* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
|
|
14222
|
+
/* @__PURE__ */ (0, import_jsx_runtime157.jsx)(DrawerTitle, { className: "sr-only", children: titleText }),
|
|
14223
|
+
/* @__PURE__ */ (0, import_jsx_runtime157.jsx)(DrawerDescription, { className: "sr-only", children: descriptionText }),
|
|
14224
|
+
/* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
|
|
14225
|
+
"div",
|
|
14226
|
+
{
|
|
14227
|
+
className: cn(
|
|
14228
|
+
"flex min-h-0 flex-1 flex-col px-1 pb-4 pt-1",
|
|
14229
|
+
drawerContentClassName
|
|
14230
|
+
),
|
|
14231
|
+
children
|
|
14232
|
+
}
|
|
14233
|
+
)
|
|
14158
14234
|
]
|
|
14159
14235
|
}
|
|
14160
14236
|
)
|
|
@@ -14247,6 +14323,8 @@ function DashboardSelectInternal({
|
|
|
14247
14323
|
const [searchValue, setSearchValue] = React55.useState("");
|
|
14248
14324
|
const [highlightedIndex, setHighlightedIndex] = React55.useState(-1);
|
|
14249
14325
|
const isMobile2 = useIsMobile();
|
|
14326
|
+
const { t } = (0, import_react_i18next29.useTranslation)();
|
|
14327
|
+
const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
|
|
14250
14328
|
const hasValue = Boolean(value);
|
|
14251
14329
|
const isEmpty = !hasValue;
|
|
14252
14330
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
@@ -14390,7 +14468,7 @@ function DashboardSelectInternal({
|
|
|
14390
14468
|
loading && "cursor-progress"
|
|
14391
14469
|
),
|
|
14392
14470
|
children: [
|
|
14393
|
-
/* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder
|
|
14471
|
+
/* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
|
|
14394
14472
|
/* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
14395
14473
|
loading && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
14396
14474
|
/* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
|
|
@@ -14440,7 +14518,7 @@ function DashboardSelectInternal({
|
|
|
14440
14518
|
ref: searchInputRef,
|
|
14441
14519
|
type: "text",
|
|
14442
14520
|
value: searchValue,
|
|
14443
|
-
placeholder:
|
|
14521
|
+
placeholder: resolvedSearchPlaceholder,
|
|
14444
14522
|
onChange: (event) => setSearchValue(event.target.value),
|
|
14445
14523
|
onKeyDown: handleSearchKeyDown,
|
|
14446
14524
|
autoComplete: "off",
|
|
@@ -14474,7 +14552,7 @@ function DashboardSelectInternal({
|
|
|
14474
14552
|
}
|
|
14475
14553
|
)
|
|
14476
14554
|
] }),
|
|
14477
|
-
!errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
|
|
14555
|
+
!errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime158.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") }),
|
|
14478
14556
|
!errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
14479
14557
|
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
|
|
14480
14558
|
FieldErrorMessage,
|
|
@@ -14496,6 +14574,7 @@ var DashboardSelect = React55.forwardRef(
|
|
|
14496
14574
|
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14497
14575
|
var React56 = __toESM(require("react"), 1);
|
|
14498
14576
|
var import_lucide_react48 = require("lucide-react");
|
|
14577
|
+
var import_react_i18next30 = require("react-i18next");
|
|
14499
14578
|
var import_jsx_runtime159 = require("react/jsx-runtime");
|
|
14500
14579
|
var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
|
|
14501
14580
|
function DashboardMultiSelectInternal({
|
|
@@ -14540,6 +14619,7 @@ function DashboardMultiSelectInternal({
|
|
|
14540
14619
|
const [isFocused, setIsFocused] = React56.useState(false);
|
|
14541
14620
|
const [highlightedIndex, setHighlightedIndex] = React56.useState(-1);
|
|
14542
14621
|
const isMobile2 = useIsMobile();
|
|
14622
|
+
const { t } = (0, import_react_i18next30.useTranslation)();
|
|
14543
14623
|
const selectedValues = React56.useMemo(() => value ?? [], [value]);
|
|
14544
14624
|
const hasValue = selectedValues.length > 0;
|
|
14545
14625
|
const isEmpty = !hasValue;
|
|
@@ -14764,7 +14844,9 @@ function DashboardMultiSelectInternal({
|
|
|
14764
14844
|
removeOption(option);
|
|
14765
14845
|
},
|
|
14766
14846
|
className: "flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
|
|
14767
|
-
"aria-label":
|
|
14847
|
+
"aria-label": t("remove_item", {
|
|
14848
|
+
label: typeof option.label === "string" ? option.label : String(option.value)
|
|
14849
|
+
}),
|
|
14768
14850
|
children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
14769
14851
|
}
|
|
14770
14852
|
)
|
|
@@ -14791,7 +14873,7 @@ function DashboardMultiSelectInternal({
|
|
|
14791
14873
|
onKeyDown: handleInputKeyDown,
|
|
14792
14874
|
disabled: isBlocked,
|
|
14793
14875
|
readOnly,
|
|
14794
|
-
placeholder: hasValue
|
|
14876
|
+
placeholder: !hasValue && (isFocused || isOpen) ? placeholder ?? "" : "",
|
|
14795
14877
|
autoComplete: "off",
|
|
14796
14878
|
className: cn(
|
|
14797
14879
|
"m-0 box-border min-w-[40px] flex-1 border-0 bg-transparent p-0 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
|
|
@@ -14813,7 +14895,7 @@ function DashboardMultiSelectInternal({
|
|
|
14813
14895
|
clearAll();
|
|
14814
14896
|
},
|
|
14815
14897
|
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]",
|
|
14816
|
-
"aria-label": "
|
|
14898
|
+
"aria-label": t("clear_all"),
|
|
14817
14899
|
children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
14818
14900
|
}
|
|
14819
14901
|
),
|
|
@@ -14911,7 +14993,7 @@ function DashboardMultiSelectInternal({
|
|
|
14911
14993
|
}
|
|
14912
14994
|
)
|
|
14913
14995
|
] }),
|
|
14914
|
-
!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 : "optional" }),
|
|
14996
|
+
!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") }),
|
|
14915
14997
|
!errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
14916
14998
|
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
|
|
14917
14999
|
FieldErrorMessage,
|
|
@@ -14942,6 +15024,7 @@ var DashboardCreatableMultiSelect = React57.forwardRef(
|
|
|
14942
15024
|
var React58 = __toESM(require("react"), 1);
|
|
14943
15025
|
var import_lucide_react49 = require("lucide-react");
|
|
14944
15026
|
var import_react_virtual2 = require("@tanstack/react-virtual");
|
|
15027
|
+
var import_react_i18next31 = require("react-i18next");
|
|
14945
15028
|
var import_jsx_runtime161 = require("react/jsx-runtime");
|
|
14946
15029
|
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14947
15030
|
var DEFAULT_LIST_HEIGHT = 322;
|
|
@@ -14977,7 +15060,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14977
15060
|
canLoadMore,
|
|
14978
15061
|
isLoadingMore,
|
|
14979
15062
|
loadMoreItems,
|
|
14980
|
-
loadingMoreText
|
|
15063
|
+
loadingMoreText,
|
|
14981
15064
|
onSearchChange,
|
|
14982
15065
|
itemHeight = DEFAULT_ITEM_HEIGHT,
|
|
14983
15066
|
listHeight = DEFAULT_LIST_HEIGHT,
|
|
@@ -14988,10 +15071,15 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14988
15071
|
const triggerRef = React58.useRef(null);
|
|
14989
15072
|
const searchInputRef = React58.useRef(null);
|
|
14990
15073
|
const scrollRef = React58.useRef(null);
|
|
15074
|
+
const previousHighlightedIndexRef = React58.useRef(-1);
|
|
15075
|
+
const lastLoadMoreOptionsLengthRef = React58.useRef(null);
|
|
14991
15076
|
const [isOpen, setIsOpen] = React58.useState(false);
|
|
14992
15077
|
const [searchValue, setSearchValue] = React58.useState("");
|
|
14993
15078
|
const [highlightedIndex, setHighlightedIndex] = React58.useState(-1);
|
|
14994
15079
|
const isMobile2 = useIsMobile();
|
|
15080
|
+
const { t } = (0, import_react_i18next31.useTranslation)();
|
|
15081
|
+
const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
|
|
15082
|
+
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14995
15083
|
const hasValue = Boolean(value);
|
|
14996
15084
|
const isEmpty = !hasValue;
|
|
14997
15085
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
@@ -15022,28 +15110,35 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15022
15110
|
if (isBlocked) setIsOpen(false);
|
|
15023
15111
|
}, [isBlocked]);
|
|
15024
15112
|
React58.useEffect(() => {
|
|
15025
|
-
if (
|
|
15026
|
-
|
|
15027
|
-
|
|
15028
|
-
|
|
15029
|
-
|
|
15030
|
-
|
|
15031
|
-
|
|
15032
|
-
|
|
15033
|
-
)
|
|
15034
|
-
|
|
15035
|
-
|
|
15036
|
-
|
|
15037
|
-
|
|
15038
|
-
|
|
15113
|
+
if (isOpen) return;
|
|
15114
|
+
setSearchValue("");
|
|
15115
|
+
setHighlightedIndex(-1);
|
|
15116
|
+
previousHighlightedIndexRef.current = -1;
|
|
15117
|
+
lastLoadMoreOptionsLengthRef.current = null;
|
|
15118
|
+
}, [isOpen]);
|
|
15119
|
+
React58.useEffect(() => {
|
|
15120
|
+
if (!isOpen) return;
|
|
15121
|
+
setHighlightedIndex((current) => {
|
|
15122
|
+
const option = current >= 0 ? filteredOptions[current] : void 0;
|
|
15123
|
+
if (option && !option.isDisabled) return current;
|
|
15124
|
+
const selectedIndex = getOptionIndex2(filteredOptions, value);
|
|
15125
|
+
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(filteredOptions);
|
|
15126
|
+
});
|
|
15127
|
+
}, [isOpen, filteredOptions, value]);
|
|
15128
|
+
React58.useEffect(() => {
|
|
15129
|
+
if (!isOpen || !searchable) return;
|
|
15130
|
+
const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
|
|
15131
|
+
return () => window.cancelAnimationFrame(frame);
|
|
15132
|
+
}, [isOpen, searchable]);
|
|
15039
15133
|
const virtualItems = virtualizer.getVirtualItems();
|
|
15040
15134
|
React58.useEffect(() => {
|
|
15041
15135
|
if (!isOpen || !canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
15042
15136
|
if (virtualItems.length === 0) return;
|
|
15043
15137
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
15044
|
-
if (lastItem
|
|
15045
|
-
|
|
15046
|
-
|
|
15138
|
+
if (!lastItem || lastItem.index < filteredOptions.length - loadMoreThreshold) return;
|
|
15139
|
+
if (lastLoadMoreOptionsLengthRef.current === filteredOptions.length) return;
|
|
15140
|
+
lastLoadMoreOptionsLengthRef.current = filteredOptions.length;
|
|
15141
|
+
loadMoreItems();
|
|
15047
15142
|
}, [
|
|
15048
15143
|
canLoadMore,
|
|
15049
15144
|
filteredOptions.length,
|
|
@@ -15054,7 +15149,9 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15054
15149
|
virtualItems
|
|
15055
15150
|
]);
|
|
15056
15151
|
React58.useEffect(() => {
|
|
15057
|
-
|
|
15152
|
+
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
15153
|
+
previousHighlightedIndexRef.current = highlightedIndex;
|
|
15154
|
+
if (!isOpen || highlightedIndex < 0 || !changed) return;
|
|
15058
15155
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
15059
15156
|
}, [highlightedIndex, isOpen, virtualizer]);
|
|
15060
15157
|
const toggleMenu = () => {
|
|
@@ -15106,6 +15203,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15106
15203
|
const handleSearchChange = (event) => {
|
|
15107
15204
|
const next = event.target.value;
|
|
15108
15205
|
setSearchValue(next);
|
|
15206
|
+
lastLoadMoreOptionsLengthRef.current = null;
|
|
15109
15207
|
onSearchChange?.(next);
|
|
15110
15208
|
};
|
|
15111
15209
|
const emptyMessage = noOptionsMessage?.();
|
|
@@ -15158,7 +15256,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15158
15256
|
loading && "cursor-progress"
|
|
15159
15257
|
),
|
|
15160
15258
|
children: [
|
|
15161
|
-
/* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder
|
|
15259
|
+
/* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
|
|
15162
15260
|
/* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
15163
15261
|
loading && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
15164
15262
|
/* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
|
|
@@ -15208,7 +15306,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15208
15306
|
ref: searchInputRef,
|
|
15209
15307
|
type: "text",
|
|
15210
15308
|
value: searchValue,
|
|
15211
|
-
placeholder:
|
|
15309
|
+
placeholder: resolvedSearchPlaceholder,
|
|
15212
15310
|
onChange: handleSearchChange,
|
|
15213
15311
|
onKeyDown: handleSearchKeyDown,
|
|
15214
15312
|
autoComplete: "off",
|
|
@@ -15217,7 +15315,10 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15217
15315
|
className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-3 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
|
|
15218
15316
|
}
|
|
15219
15317
|
) }),
|
|
15220
|
-
|
|
15318
|
+
filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "flex items-center justify-center gap-2 px-4 py-[20px] text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
|
|
15319
|
+
/* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
15320
|
+
/* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { children: resolvedLoadingMoreText })
|
|
15321
|
+
] }) : filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
|
|
15221
15322
|
"div",
|
|
15222
15323
|
{
|
|
15223
15324
|
ref: scrollRef,
|
|
@@ -15250,8 +15351,8 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15250
15351
|
transform: `translateY(${virtualItem.start}px)`
|
|
15251
15352
|
},
|
|
15252
15353
|
children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
|
|
15253
|
-
/* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ThreeDotsLoader, { height:
|
|
15254
|
-
/* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { children:
|
|
15354
|
+
/* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ThreeDotsLoader, { height: 36, width: 36 }),
|
|
15355
|
+
/* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { children: resolvedLoadingMoreText })
|
|
15255
15356
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
|
|
15256
15357
|
"button",
|
|
15257
15358
|
{
|
|
@@ -15288,7 +15389,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
15288
15389
|
}
|
|
15289
15390
|
)
|
|
15290
15391
|
] }),
|
|
15291
|
-
!errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
|
|
15392
|
+
!errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime161.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") }),
|
|
15292
15393
|
!errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
15293
15394
|
errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
|
|
15294
15395
|
FieldErrorMessage,
|
|
@@ -15307,131 +15408,2016 @@ var DashboardInfiniteScrollSelect = React58.forwardRef(
|
|
|
15307
15408
|
DashboardInfiniteScrollSelectInternal
|
|
15308
15409
|
);
|
|
15309
15410
|
|
|
15310
|
-
// src/
|
|
15411
|
+
// src/dashboard/textarea/Textarea.tsx
|
|
15311
15412
|
var React59 = __toESM(require("react"), 1);
|
|
15312
|
-
var
|
|
15313
|
-
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
15314
|
-
var import_react82 = require("react");
|
|
15413
|
+
var import_react_i18next32 = require("react-i18next");
|
|
15315
15414
|
var import_jsx_runtime162 = require("react/jsx-runtime");
|
|
15316
|
-
var
|
|
15317
|
-
var
|
|
15318
|
-
|
|
15319
|
-
|
|
15320
|
-
|
|
15321
|
-
return
|
|
15415
|
+
var LINE_HEIGHT = 20;
|
|
15416
|
+
var VERTICAL_PADDING = 32;
|
|
15417
|
+
function getEmptyState(empty, value, defaultValue) {
|
|
15418
|
+
if (typeof empty === "boolean") return empty;
|
|
15419
|
+
if (value !== void 0) return !String(value);
|
|
15420
|
+
return !defaultValue;
|
|
15322
15421
|
}
|
|
15323
|
-
var
|
|
15324
|
-
|
|
15325
|
-
|
|
15326
|
-
|
|
15327
|
-
|
|
15328
|
-
|
|
15329
|
-
|
|
15330
|
-
|
|
15331
|
-
|
|
15332
|
-
|
|
15333
|
-
|
|
15334
|
-
|
|
15335
|
-
|
|
15336
|
-
|
|
15337
|
-
|
|
15338
|
-
|
|
15339
|
-
|
|
15340
|
-
|
|
15341
|
-
|
|
15342
|
-
|
|
15343
|
-
|
|
15344
|
-
|
|
15345
|
-
|
|
15346
|
-
|
|
15347
|
-
|
|
15348
|
-
|
|
15349
|
-
|
|
15350
|
-
|
|
15351
|
-
|
|
15352
|
-
|
|
15353
|
-
|
|
15354
|
-
|
|
15355
|
-
|
|
15356
|
-
|
|
15357
|
-
|
|
15358
|
-
|
|
15359
|
-
|
|
15360
|
-
|
|
15361
|
-
|
|
15362
|
-
|
|
15363
|
-
|
|
15364
|
-
|
|
15365
|
-
|
|
15366
|
-
|
|
15367
|
-
|
|
15368
|
-
|
|
15369
|
-
|
|
15370
|
-
|
|
15371
|
-
|
|
15372
|
-
|
|
15373
|
-
|
|
15374
|
-
|
|
15375
|
-
|
|
15376
|
-
|
|
15377
|
-
|
|
15378
|
-
|
|
15379
|
-
|
|
15380
|
-
|
|
15381
|
-
|
|
15382
|
-
|
|
15383
|
-
|
|
15384
|
-
|
|
15385
|
-
|
|
15386
|
-
|
|
15387
|
-
|
|
15388
|
-
|
|
15389
|
-
|
|
15390
|
-
|
|
15391
|
-
|
|
15392
|
-
|
|
15393
|
-
|
|
15394
|
-
|
|
15395
|
-
|
|
15396
|
-
|
|
15397
|
-
|
|
15398
|
-
|
|
15422
|
+
var DashboardTextarea = React59.forwardRef(
|
|
15423
|
+
function DashboardTextarea2({
|
|
15424
|
+
className,
|
|
15425
|
+
textareaClassName,
|
|
15426
|
+
label,
|
|
15427
|
+
invalid,
|
|
15428
|
+
error,
|
|
15429
|
+
empty,
|
|
15430
|
+
optional,
|
|
15431
|
+
disabled,
|
|
15432
|
+
readOnly,
|
|
15433
|
+
loading,
|
|
15434
|
+
tooltip,
|
|
15435
|
+
name,
|
|
15436
|
+
id,
|
|
15437
|
+
helperText,
|
|
15438
|
+
minRows = 3,
|
|
15439
|
+
maxRows,
|
|
15440
|
+
autosize = true,
|
|
15441
|
+
value,
|
|
15442
|
+
defaultValue,
|
|
15443
|
+
onInput,
|
|
15444
|
+
...textareaProps
|
|
15445
|
+
}, ref) {
|
|
15446
|
+
const innerRef = React59.useRef(null);
|
|
15447
|
+
const combinedRef = useCombinedRef(ref, innerRef);
|
|
15448
|
+
const reactId = React59.useId();
|
|
15449
|
+
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15450
|
+
const { t } = (0, import_react_i18next32.useTranslation)();
|
|
15451
|
+
const isInvalid = Boolean(invalid || error);
|
|
15452
|
+
const isEmpty = getEmptyState(empty, value, defaultValue);
|
|
15453
|
+
const isBlocked = Boolean(disabled);
|
|
15454
|
+
const resize = React59.useCallback(() => {
|
|
15455
|
+
const el = innerRef.current;
|
|
15456
|
+
if (!el || !autosize) return;
|
|
15457
|
+
el.style.height = "auto";
|
|
15458
|
+
const minHeight = minRows * LINE_HEIGHT + VERTICAL_PADDING;
|
|
15459
|
+
const maxHeight = maxRows ? maxRows * LINE_HEIGHT + VERTICAL_PADDING : Infinity;
|
|
15460
|
+
const nextHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
|
|
15461
|
+
el.style.height = `${nextHeight}px`;
|
|
15462
|
+
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15463
|
+
}, [autosize, maxRows, minRows]);
|
|
15464
|
+
React59.useLayoutEffect(() => {
|
|
15465
|
+
resize();
|
|
15466
|
+
}, [resize, value]);
|
|
15467
|
+
const handleInput = (event) => {
|
|
15468
|
+
resize();
|
|
15469
|
+
onInput?.(event);
|
|
15470
|
+
};
|
|
15471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
|
|
15472
|
+
"div",
|
|
15473
|
+
{
|
|
15474
|
+
className: cn(
|
|
15475
|
+
"relative block min-h-[88px] w-full",
|
|
15476
|
+
isBlocked && "cursor-not-allowed opacity-50",
|
|
15477
|
+
loading && "cursor-progress opacity-50",
|
|
15478
|
+
className
|
|
15479
|
+
),
|
|
15480
|
+
children: [
|
|
15481
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
|
|
15482
|
+
"label",
|
|
15483
|
+
{
|
|
15484
|
+
htmlFor: textareaId,
|
|
15485
|
+
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15486
|
+
children: [
|
|
15487
|
+
label,
|
|
15488
|
+
tooltip && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15489
|
+
]
|
|
15490
|
+
}
|
|
15491
|
+
),
|
|
15492
|
+
/* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
15493
|
+
"textarea",
|
|
15494
|
+
{
|
|
15495
|
+
ref: combinedRef,
|
|
15496
|
+
id: textareaId,
|
|
15497
|
+
name,
|
|
15498
|
+
value,
|
|
15499
|
+
defaultValue,
|
|
15500
|
+
rows: minRows,
|
|
15501
|
+
disabled: isBlocked || loading,
|
|
15502
|
+
readOnly: isBlocked || readOnly,
|
|
15503
|
+
"aria-invalid": isInvalid,
|
|
15504
|
+
"aria-busy": loading,
|
|
15505
|
+
onInput: handleInput,
|
|
15506
|
+
className: cn(
|
|
15507
|
+
"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",
|
|
15508
|
+
"border-[var(--chekin-color-gray-3)] placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)]",
|
|
15509
|
+
!isBlocked && "focus:border-[var(--chekin-color-brand-blue)]",
|
|
15510
|
+
isEmpty && "border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
|
|
15511
|
+
isInvalid && "border-[var(--error-message-color)] focus:border-[var(--error-message-color)]",
|
|
15512
|
+
(readOnly || isBlocked) && "cursor-default",
|
|
15513
|
+
isBlocked && "cursor-not-allowed",
|
|
15514
|
+
loading && "cursor-progress",
|
|
15515
|
+
textareaClassName
|
|
15516
|
+
),
|
|
15517
|
+
style: autosize ? { minHeight: minRows * LINE_HEIGHT + VERTICAL_PADDING } : void 0,
|
|
15518
|
+
...textareaProps
|
|
15519
|
+
}
|
|
15520
|
+
),
|
|
15521
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
15522
|
+
FieldErrorMessage,
|
|
15523
|
+
{
|
|
15524
|
+
id: `${textareaId}-error`,
|
|
15525
|
+
message: error,
|
|
15526
|
+
className: "mt-[1px] text-[14px]"
|
|
15527
|
+
}
|
|
15528
|
+
),
|
|
15529
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime162.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") }),
|
|
15530
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15531
|
+
]
|
|
15399
15532
|
}
|
|
15400
|
-
|
|
15401
|
-
|
|
15533
|
+
);
|
|
15534
|
+
}
|
|
15535
|
+
);
|
|
15536
|
+
|
|
15537
|
+
// src/dashboard/datepicker/Datepicker.tsx
|
|
15538
|
+
var React60 = __toESM(require("react"), 1);
|
|
15539
|
+
var import_lucide_react50 = require("lucide-react");
|
|
15540
|
+
var import_react_i18next33 = require("react-i18next");
|
|
15541
|
+
var import_jsx_runtime163 = require("react/jsx-runtime");
|
|
15542
|
+
var MONTHS_IN_YEAR2 = 12;
|
|
15543
|
+
var DEFAULT_MIN_DATE2 = new Date(1920, 0, 1);
|
|
15544
|
+
function getMonthLabels2(locale) {
|
|
15545
|
+
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
15546
|
+
return Array.from(
|
|
15547
|
+
{ length: MONTHS_IN_YEAR2 },
|
|
15548
|
+
(_, monthIndex) => formatter.format(new Date(2024, monthIndex, 1))
|
|
15402
15549
|
);
|
|
15403
|
-
|
|
15404
|
-
|
|
15405
|
-
|
|
15406
|
-
|
|
15407
|
-
|
|
15408
|
-
|
|
15409
|
-
|
|
15410
|
-
|
|
15550
|
+
}
|
|
15551
|
+
var DAY_PATTERN = /^([1-9]|[12]\d|3[01])$/;
|
|
15552
|
+
var PARTIAL_DAY_PATTERN = /^[0-9]{0,2}$/;
|
|
15553
|
+
var PARTIAL_YEAR_PATTERN = /^[0-9]{0,4}$/;
|
|
15554
|
+
var FULL_YEAR_PATTERN = /^(19|20)\d{2}$/;
|
|
15555
|
+
function isValidCalendarDate(year, monthIndex, day) {
|
|
15556
|
+
const date = new Date(year, monthIndex, day);
|
|
15557
|
+
return date.getFullYear() === year && date.getMonth() === monthIndex && date.getDate() === day;
|
|
15558
|
+
}
|
|
15559
|
+
function partsFromDate(date) {
|
|
15560
|
+
if (!date) return { day: "", monthIndex: null, year: "" };
|
|
15561
|
+
return {
|
|
15562
|
+
day: String(date.getDate()),
|
|
15563
|
+
monthIndex: date.getMonth(),
|
|
15564
|
+
year: String(date.getFullYear())
|
|
15565
|
+
};
|
|
15566
|
+
}
|
|
15567
|
+
function dateFromParts(day, monthIndex, year) {
|
|
15568
|
+
if (!day || monthIndex === null || !year) return null;
|
|
15569
|
+
if (!DAY_PATTERN.test(day) || !FULL_YEAR_PATTERN.test(year)) return null;
|
|
15570
|
+
const dayNum = parseInt(day, 10);
|
|
15571
|
+
const yearNum = parseInt(year, 10);
|
|
15572
|
+
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
15573
|
+
return new Date(yearNum, monthIndex, dayNum);
|
|
15574
|
+
}
|
|
15575
|
+
var DashboardDatepicker = React60.forwardRef(
|
|
15576
|
+
function DashboardDatepicker2({
|
|
15577
|
+
label,
|
|
15578
|
+
value,
|
|
15579
|
+
defaultValue,
|
|
15580
|
+
onChange,
|
|
15581
|
+
name,
|
|
15582
|
+
invalid,
|
|
15583
|
+
error,
|
|
15584
|
+
disabled,
|
|
15585
|
+
readOnly,
|
|
15586
|
+
loading,
|
|
15587
|
+
optional,
|
|
15588
|
+
tooltip,
|
|
15589
|
+
className,
|
|
15590
|
+
monthLabels,
|
|
15591
|
+
dayPlaceholder = "DD",
|
|
15592
|
+
yearPlaceholder = "YYYY",
|
|
15593
|
+
monthPlaceholder,
|
|
15594
|
+
mobilePlaceholder,
|
|
15595
|
+
mobileTitle,
|
|
15596
|
+
doneLabel,
|
|
15597
|
+
hideErrorMessage,
|
|
15598
|
+
helperText,
|
|
15599
|
+
width,
|
|
15600
|
+
locale = "en-US",
|
|
15601
|
+
minDate,
|
|
15602
|
+
maxDate,
|
|
15603
|
+
formatValue
|
|
15604
|
+
}, ref) {
|
|
15605
|
+
const containerRef = React60.useRef(null);
|
|
15606
|
+
const dayInputRef = React60.useRef(null);
|
|
15607
|
+
const monthInputRef = React60.useRef(null);
|
|
15608
|
+
const monthListRef = React60.useRef(null);
|
|
15609
|
+
const yearInputRef = React60.useRef(null);
|
|
15610
|
+
const mobileTriggerRef = React60.useRef(null);
|
|
15611
|
+
const wheelBaseId = React60.useId();
|
|
15612
|
+
const reactId = React60.useId();
|
|
15613
|
+
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
15614
|
+
const dayId = `${baseId}-day`;
|
|
15615
|
+
const monthId = `${baseId}-month`;
|
|
15616
|
+
const yearId = `${baseId}-year`;
|
|
15617
|
+
const labelId = `${baseId}-label`;
|
|
15618
|
+
const errorId = `${baseId}-error`;
|
|
15619
|
+
const { t } = (0, import_react_i18next33.useTranslation)();
|
|
15620
|
+
const resolvedMonthLabels = React60.useMemo(
|
|
15621
|
+
() => monthLabels ?? getMonthLabels2(locale),
|
|
15622
|
+
[locale, monthLabels]
|
|
15623
|
+
);
|
|
15624
|
+
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
15625
|
+
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
15626
|
+
const isControlled = value !== void 0;
|
|
15627
|
+
const initialParts = React60.useMemo(
|
|
15628
|
+
() => partsFromDate(value ?? defaultValue ?? null),
|
|
15629
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15630
|
+
[]
|
|
15631
|
+
);
|
|
15632
|
+
const [day, setDay] = React60.useState(initialParts.day);
|
|
15633
|
+
const [monthIndex, setMonthIndex] = React60.useState(
|
|
15634
|
+
initialParts.monthIndex
|
|
15635
|
+
);
|
|
15636
|
+
const [year, setYear] = React60.useState(initialParts.year);
|
|
15637
|
+
const [isMonthOpen, setIsMonthOpen] = React60.useState(false);
|
|
15638
|
+
const [isWheelOpen, setIsWheelOpen] = React60.useState(false);
|
|
15639
|
+
const [focusedField, setFocusedField] = React60.useState(null);
|
|
15640
|
+
const [monthInputValue, setMonthInputValue] = React60.useState("");
|
|
15641
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React60.useState(-1);
|
|
15642
|
+
const isMobile2 = useIsMobile();
|
|
15643
|
+
React60.useImperativeHandle(ref, () => dayInputRef.current, []);
|
|
15644
|
+
React60.useEffect(() => {
|
|
15645
|
+
if (!isControlled) return;
|
|
15646
|
+
const next = partsFromDate(value ?? null);
|
|
15647
|
+
setDay(next.day);
|
|
15648
|
+
setMonthIndex(next.monthIndex);
|
|
15649
|
+
setYear(next.year);
|
|
15650
|
+
}, [isControlled, value]);
|
|
15651
|
+
React60.useEffect(() => {
|
|
15652
|
+
if (focusedField === "month") return;
|
|
15653
|
+
setMonthInputValue(
|
|
15654
|
+
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
15655
|
+
);
|
|
15656
|
+
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
15657
|
+
const filteredMonths = React60.useMemo(() => {
|
|
15658
|
+
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
15659
|
+
const query = monthInputValue.trim().toLowerCase();
|
|
15660
|
+
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
15661
|
+
if (!query || monthInputValue === currentLabel) return all;
|
|
15662
|
+
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
15663
|
+
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
15664
|
+
React60.useEffect(() => {
|
|
15665
|
+
if (!isMonthOpen) {
|
|
15666
|
+
setMonthHighlightIndex(-1);
|
|
15667
|
+
return;
|
|
15668
|
+
}
|
|
15669
|
+
if (monthIndex !== null) {
|
|
15670
|
+
const currentLabel = resolvedMonthLabels[monthIndex];
|
|
15671
|
+
const index = filteredMonths.findIndex((o) => o.label === currentLabel);
|
|
15672
|
+
if (index >= 0) {
|
|
15673
|
+
setMonthHighlightIndex(index);
|
|
15674
|
+
return;
|
|
15675
|
+
}
|
|
15676
|
+
}
|
|
15677
|
+
setMonthHighlightIndex(filteredMonths.length > 0 ? 0 : -1);
|
|
15678
|
+
}, [isMonthOpen, filteredMonths.length]);
|
|
15679
|
+
const hasAnyValue = Boolean(day) || monthIndex !== null || Boolean(year);
|
|
15680
|
+
const isEmpty = !hasAnyValue;
|
|
15681
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
15682
|
+
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
15683
|
+
const isInvalid = Boolean(invalid || error);
|
|
15684
|
+
const wrapperWidth = toCssSize(width);
|
|
15685
|
+
const currentDate = React60.useMemo(
|
|
15686
|
+
() => dateFromParts(day, monthIndex, year),
|
|
15687
|
+
[day, monthIndex, year]
|
|
15688
|
+
);
|
|
15689
|
+
useOutsideClick({
|
|
15690
|
+
elementRef: containerRef,
|
|
15691
|
+
onOutsideClick: () => setIsMonthOpen(false),
|
|
15692
|
+
isDisabled: !isMonthOpen || isMobile2
|
|
15411
15693
|
});
|
|
15412
|
-
|
|
15413
|
-
|
|
15694
|
+
const emitChange = React60.useCallback(
|
|
15695
|
+
(nextDay, nextMonth, nextYear) => {
|
|
15696
|
+
if (!onChange) return;
|
|
15697
|
+
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
15698
|
+
onChange(date, name);
|
|
15699
|
+
},
|
|
15700
|
+
[name, onChange]
|
|
15701
|
+
);
|
|
15702
|
+
const handleDayChange = (event) => {
|
|
15703
|
+
const next = event.target.value;
|
|
15704
|
+
if (!PARTIAL_DAY_PATTERN.test(next)) return;
|
|
15705
|
+
setDay(next);
|
|
15706
|
+
emitChange(next, monthIndex, year);
|
|
15707
|
+
if (next.length === 2 && DAY_PATTERN.test(next)) {
|
|
15708
|
+
monthInputRef.current?.focus();
|
|
15709
|
+
}
|
|
15414
15710
|
};
|
|
15415
|
-
|
|
15416
|
-
|
|
15417
|
-
|
|
15418
|
-
|
|
15419
|
-
|
|
15420
|
-
}
|
|
15421
|
-
|
|
15422
|
-
|
|
15423
|
-
|
|
15711
|
+
const handleYearChange = (event) => {
|
|
15712
|
+
const next = event.target.value;
|
|
15713
|
+
if (!PARTIAL_YEAR_PATTERN.test(next)) return;
|
|
15714
|
+
setYear(next);
|
|
15715
|
+
emitChange(day, monthIndex, next);
|
|
15716
|
+
};
|
|
15717
|
+
const handleMonthSelect = (index) => {
|
|
15718
|
+
setMonthIndex(index);
|
|
15719
|
+
setMonthInputValue(resolvedMonthLabels[index] ?? "");
|
|
15720
|
+
setIsMonthOpen(false);
|
|
15721
|
+
emitChange(day, index, year);
|
|
15722
|
+
yearInputRef.current?.focus();
|
|
15723
|
+
};
|
|
15724
|
+
const handleMonthInputChange = (event) => {
|
|
15725
|
+
setMonthInputValue(event.target.value);
|
|
15726
|
+
setIsMonthOpen(true);
|
|
15727
|
+
setMonthHighlightIndex(0);
|
|
15728
|
+
};
|
|
15729
|
+
const commitMonthInput = React60.useCallback(() => {
|
|
15730
|
+
const query = monthInputValue.trim().toLowerCase();
|
|
15731
|
+
if (!query) {
|
|
15732
|
+
if (monthIndex !== null) {
|
|
15733
|
+
setMonthIndex(null);
|
|
15734
|
+
emitChange(day, null, year);
|
|
15735
|
+
}
|
|
15736
|
+
setMonthInputValue("");
|
|
15737
|
+
return;
|
|
15424
15738
|
}
|
|
15425
|
-
|
|
15426
|
-
|
|
15427
|
-
|
|
15428
|
-
|
|
15429
|
-
|
|
15430
|
-
|
|
15431
|
-
|
|
15432
|
-
|
|
15433
|
-
|
|
15434
|
-
|
|
15739
|
+
const exactMatch = resolvedMonthLabels.findIndex(
|
|
15740
|
+
(label2) => label2.toLowerCase() === query
|
|
15741
|
+
);
|
|
15742
|
+
if (exactMatch >= 0) {
|
|
15743
|
+
if (exactMatch !== monthIndex) {
|
|
15744
|
+
setMonthIndex(exactMatch);
|
|
15745
|
+
emitChange(day, exactMatch, year);
|
|
15746
|
+
}
|
|
15747
|
+
setMonthInputValue(resolvedMonthLabels[exactMatch]);
|
|
15748
|
+
return;
|
|
15749
|
+
}
|
|
15750
|
+
setMonthInputValue(monthIndex !== null ? resolvedMonthLabels[monthIndex] : "");
|
|
15751
|
+
}, [day, emitChange, monthIndex, monthInputValue, resolvedMonthLabels, year]);
|
|
15752
|
+
const handleMonthInputKeyDown = (event) => {
|
|
15753
|
+
if (isBlocked) return;
|
|
15754
|
+
if (event.key === "ArrowDown") {
|
|
15755
|
+
event.preventDefault();
|
|
15756
|
+
setIsMonthOpen(true);
|
|
15757
|
+
setMonthHighlightIndex(
|
|
15758
|
+
(prev) => filteredMonths.length === 0 ? -1 : Math.min(prev + 1, filteredMonths.length - 1)
|
|
15759
|
+
);
|
|
15760
|
+
return;
|
|
15761
|
+
}
|
|
15762
|
+
if (event.key === "ArrowUp") {
|
|
15763
|
+
event.preventDefault();
|
|
15764
|
+
setIsMonthOpen(true);
|
|
15765
|
+
setMonthHighlightIndex((prev) => Math.max(prev - 1, 0));
|
|
15766
|
+
return;
|
|
15767
|
+
}
|
|
15768
|
+
if (event.key === "Enter") {
|
|
15769
|
+
if (!isMonthOpen) return;
|
|
15770
|
+
event.preventDefault();
|
|
15771
|
+
const target = filteredMonths[monthHighlightIndex];
|
|
15772
|
+
if (target) {
|
|
15773
|
+
handleMonthSelect(target.index);
|
|
15774
|
+
} else {
|
|
15775
|
+
commitMonthInput();
|
|
15776
|
+
}
|
|
15777
|
+
return;
|
|
15778
|
+
}
|
|
15779
|
+
if (event.key === "Escape") {
|
|
15780
|
+
event.preventDefault();
|
|
15781
|
+
setIsMonthOpen(false);
|
|
15782
|
+
setMonthInputValue(monthIndex !== null ? resolvedMonthLabels[monthIndex] : "");
|
|
15783
|
+
return;
|
|
15784
|
+
}
|
|
15785
|
+
if (event.key === "Tab") {
|
|
15786
|
+
setIsMonthOpen(false);
|
|
15787
|
+
}
|
|
15788
|
+
};
|
|
15789
|
+
const focusDayInput = React60.useCallback(() => {
|
|
15790
|
+
if (isBlocked || readOnly) return;
|
|
15791
|
+
dayInputRef.current?.focus();
|
|
15792
|
+
}, [isBlocked, readOnly]);
|
|
15793
|
+
const openWheel = React60.useCallback(() => {
|
|
15794
|
+
if (isBlocked || readOnly) return;
|
|
15795
|
+
setIsWheelOpen(true);
|
|
15796
|
+
}, [isBlocked, readOnly]);
|
|
15797
|
+
const closeWheel = React60.useCallback(() => {
|
|
15798
|
+
setIsWheelOpen(false);
|
|
15799
|
+
mobileTriggerRef.current?.focus();
|
|
15800
|
+
}, []);
|
|
15801
|
+
const closeMonth = () => setIsMonthOpen(false);
|
|
15802
|
+
const showCoverage = isEmpty && !isFocused && !isMobile2;
|
|
15803
|
+
const wheel = useDatePickerWheel({
|
|
15804
|
+
isOpen: isWheelOpen,
|
|
15805
|
+
value: currentDate,
|
|
15806
|
+
defaultValue: null,
|
|
15807
|
+
minDate,
|
|
15808
|
+
maxDate
|
|
15809
|
+
});
|
|
15810
|
+
const handleWheelDone = React60.useCallback(() => {
|
|
15811
|
+
const next = wheel.draftDate;
|
|
15812
|
+
setDay(String(next.getDate()));
|
|
15813
|
+
setMonthIndex(next.getMonth());
|
|
15814
|
+
setYear(String(next.getFullYear()));
|
|
15815
|
+
onChange?.(next, name);
|
|
15816
|
+
setIsWheelOpen(false);
|
|
15817
|
+
mobileTriggerRef.current?.focus();
|
|
15818
|
+
}, [name, onChange, wheel.draftDate]);
|
|
15819
|
+
const defaultFormatValue = React60.useCallback(
|
|
15820
|
+
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
15821
|
+
[resolvedMonthLabels]
|
|
15822
|
+
);
|
|
15823
|
+
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
15824
|
+
const monthListboxId = `${monthId}-listbox`;
|
|
15825
|
+
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
15826
|
+
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime163.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_runtime163.jsx)(
|
|
15827
|
+
"ul",
|
|
15828
|
+
{
|
|
15829
|
+
ref: monthListRef,
|
|
15830
|
+
id: monthListboxId,
|
|
15831
|
+
role: "listbox",
|
|
15832
|
+
"aria-labelledby": labelId,
|
|
15833
|
+
className: "m-0 max-h-[260px] list-none overflow-y-auto p-1",
|
|
15834
|
+
children: filteredMonths.map((option, position) => {
|
|
15835
|
+
const isSelected = option.index === monthIndex;
|
|
15836
|
+
const isHighlighted = position === monthHighlightIndex;
|
|
15837
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
15838
|
+
"button",
|
|
15839
|
+
{
|
|
15840
|
+
id: getMonthOptionId(option.index),
|
|
15841
|
+
type: "button",
|
|
15842
|
+
role: "option",
|
|
15843
|
+
"aria-selected": isSelected,
|
|
15844
|
+
tabIndex: -1,
|
|
15845
|
+
onMouseDown: (event) => event.preventDefault(),
|
|
15846
|
+
onMouseMove: () => setMonthHighlightIndex(position),
|
|
15847
|
+
onClick: () => handleMonthSelect(option.index),
|
|
15848
|
+
className: cn(
|
|
15849
|
+
"flex w-full items-center justify-start rounded-md border-0 bg-transparent px-3 py-[10px] text-left text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors",
|
|
15850
|
+
isHighlighted && "bg-[var(--chekin-color-surface-pressed)] text-[var(--chekin-color-brand-blue)]",
|
|
15851
|
+
isSelected && "font-bold"
|
|
15852
|
+
),
|
|
15853
|
+
children: option.label
|
|
15854
|
+
}
|
|
15855
|
+
) }, option.index);
|
|
15856
|
+
})
|
|
15857
|
+
}
|
|
15858
|
+
);
|
|
15859
|
+
const subInputClass = cn(
|
|
15860
|
+
"m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-center text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
|
|
15861
|
+
isBlocked && "cursor-not-allowed",
|
|
15862
|
+
loading && "cursor-progress"
|
|
15863
|
+
);
|
|
15864
|
+
return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
15865
|
+
"div",
|
|
15866
|
+
{
|
|
15867
|
+
ref: containerRef,
|
|
15868
|
+
className: cn(
|
|
15869
|
+
"relative w-full max-w-[var(--max-field-width)]",
|
|
15870
|
+
disabled && "cursor-not-allowed opacity-50",
|
|
15871
|
+
loading && "cursor-progress",
|
|
15872
|
+
className
|
|
15873
|
+
),
|
|
15874
|
+
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
15875
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
|
|
15876
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "relative w-full", children: [
|
|
15877
|
+
isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
|
|
15878
|
+
"button",
|
|
15879
|
+
{
|
|
15880
|
+
ref: mobileTriggerRef,
|
|
15881
|
+
id: dayId,
|
|
15882
|
+
type: "button",
|
|
15883
|
+
"aria-haspopup": "dialog",
|
|
15884
|
+
"aria-expanded": isWheelOpen,
|
|
15885
|
+
"aria-labelledby": labelId,
|
|
15886
|
+
"aria-invalid": isInvalid,
|
|
15887
|
+
"aria-busy": loading,
|
|
15888
|
+
disabled: isBlocked || readOnly,
|
|
15889
|
+
onClick: openWheel,
|
|
15890
|
+
className: cn(
|
|
15891
|
+
"relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
|
|
15892
|
+
triggerText ? "bg-transparent text-[var(--chekin-color-brand-navy)]" : "bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
|
|
15893
|
+
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
15894
|
+
),
|
|
15895
|
+
children: [
|
|
15896
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
15897
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
15898
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
15899
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
15900
|
+
import_lucide_react50.ChevronDown,
|
|
15901
|
+
{
|
|
15902
|
+
size: 16,
|
|
15903
|
+
className: cn(
|
|
15904
|
+
"transition-transform duration-200",
|
|
15905
|
+
isWheelOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
|
|
15906
|
+
)
|
|
15907
|
+
}
|
|
15908
|
+
)
|
|
15909
|
+
] })
|
|
15910
|
+
]
|
|
15911
|
+
}
|
|
15912
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
|
|
15913
|
+
"div",
|
|
15914
|
+
{
|
|
15915
|
+
className: cn(
|
|
15916
|
+
"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)]"
|
|
15917
|
+
),
|
|
15918
|
+
children: [
|
|
15919
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
15920
|
+
"input",
|
|
15921
|
+
{
|
|
15922
|
+
ref: dayInputRef,
|
|
15923
|
+
id: dayId,
|
|
15924
|
+
type: "text",
|
|
15925
|
+
inputMode: "numeric",
|
|
15926
|
+
autoComplete: "off",
|
|
15927
|
+
name: name ? `${name}-day` : void 0,
|
|
15928
|
+
value: day,
|
|
15929
|
+
placeholder: dayPlaceholder,
|
|
15930
|
+
disabled: isBlocked,
|
|
15931
|
+
readOnly,
|
|
15932
|
+
"aria-invalid": isInvalid,
|
|
15933
|
+
"aria-labelledby": labelId,
|
|
15934
|
+
onChange: handleDayChange,
|
|
15935
|
+
onFocus: () => setFocusedField("day"),
|
|
15936
|
+
onBlur: () => setFocusedField(null),
|
|
15937
|
+
maxLength: 2,
|
|
15938
|
+
className: subInputClass
|
|
15939
|
+
}
|
|
15940
|
+
) }),
|
|
15941
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "relative flex h-full min-w-0 items-center gap-1 border-x border-[var(--chekin-color-gray-3)] px-2 sm:px-3", children: [
|
|
15942
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
15943
|
+
"input",
|
|
15944
|
+
{
|
|
15945
|
+
ref: monthInputRef,
|
|
15946
|
+
id: monthId,
|
|
15947
|
+
type: "text",
|
|
15948
|
+
role: "combobox",
|
|
15949
|
+
autoComplete: "off",
|
|
15950
|
+
"aria-haspopup": "listbox",
|
|
15951
|
+
"aria-expanded": isMonthOpen,
|
|
15952
|
+
"aria-controls": monthListboxId,
|
|
15953
|
+
"aria-autocomplete": "list",
|
|
15954
|
+
"aria-activedescendant": monthHighlightIndex >= 0 && filteredMonths[monthHighlightIndex] ? getMonthOptionId(filteredMonths[monthHighlightIndex].index) : void 0,
|
|
15955
|
+
"aria-labelledby": labelId,
|
|
15956
|
+
"aria-invalid": isInvalid,
|
|
15957
|
+
name: name ? `${name}-month` : void 0,
|
|
15958
|
+
value: monthInputValue,
|
|
15959
|
+
placeholder: resolvedMonthPlaceholder,
|
|
15960
|
+
disabled: isBlocked,
|
|
15961
|
+
readOnly,
|
|
15962
|
+
onChange: handleMonthInputChange,
|
|
15963
|
+
onFocus: () => {
|
|
15964
|
+
setFocusedField("month");
|
|
15965
|
+
if (!isBlocked && !readOnly) {
|
|
15966
|
+
setIsMonthOpen(true);
|
|
15967
|
+
monthInputRef.current?.select();
|
|
15968
|
+
}
|
|
15969
|
+
},
|
|
15970
|
+
onBlur: () => {
|
|
15971
|
+
setFocusedField(null);
|
|
15972
|
+
commitMonthInput();
|
|
15973
|
+
},
|
|
15974
|
+
onClick: () => {
|
|
15975
|
+
if (!isBlocked && !readOnly) setIsMonthOpen(true);
|
|
15976
|
+
},
|
|
15977
|
+
onKeyDown: handleMonthInputKeyDown,
|
|
15978
|
+
className: cn(
|
|
15979
|
+
"m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-center text-[16px] font-medium leading-5 outline-none placeholder:text-[var(--chekin-color-gray-1)]",
|
|
15980
|
+
monthIndex !== null ? "text-[var(--chekin-color-brand-navy)]" : "text-[var(--chekin-color-gray-1)]",
|
|
15981
|
+
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
15982
|
+
)
|
|
15983
|
+
}
|
|
15984
|
+
),
|
|
15985
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
15986
|
+
import_lucide_react50.ChevronDown,
|
|
15987
|
+
{
|
|
15988
|
+
size: 14,
|
|
15989
|
+
onMouseDown: (event) => {
|
|
15990
|
+
event.preventDefault();
|
|
15991
|
+
if (isBlocked || readOnly) return;
|
|
15992
|
+
setIsMonthOpen((prev) => !prev);
|
|
15993
|
+
monthInputRef.current?.focus();
|
|
15994
|
+
},
|
|
15995
|
+
className: cn(
|
|
15996
|
+
"shrink-0 cursor-pointer text-[var(--chekin-color-gray-2)] transition-transform duration-200",
|
|
15997
|
+
isMonthOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
|
|
15998
|
+
)
|
|
15999
|
+
}
|
|
16000
|
+
)
|
|
16001
|
+
] }),
|
|
16002
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
|
|
16003
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
16004
|
+
"input",
|
|
16005
|
+
{
|
|
16006
|
+
ref: yearInputRef,
|
|
16007
|
+
id: yearId,
|
|
16008
|
+
type: "text",
|
|
16009
|
+
inputMode: "numeric",
|
|
16010
|
+
autoComplete: "off",
|
|
16011
|
+
name: name ? `${name}-year` : void 0,
|
|
16012
|
+
value: year,
|
|
16013
|
+
placeholder: yearPlaceholder,
|
|
16014
|
+
disabled: isBlocked,
|
|
16015
|
+
readOnly,
|
|
16016
|
+
"aria-invalid": isInvalid,
|
|
16017
|
+
"aria-labelledby": labelId,
|
|
16018
|
+
onChange: handleYearChange,
|
|
16019
|
+
onFocus: () => setFocusedField("year"),
|
|
16020
|
+
onBlur: () => setFocusedField(null),
|
|
16021
|
+
maxLength: 4,
|
|
16022
|
+
className: subInputClass
|
|
16023
|
+
}
|
|
16024
|
+
),
|
|
16025
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
16026
|
+
ThreeDotsLoader,
|
|
16027
|
+
{
|
|
16028
|
+
height: 18,
|
|
16029
|
+
width: 18,
|
|
16030
|
+
className: "ml-2 text-[var(--chekin-color-gray-2)]"
|
|
16031
|
+
}
|
|
16032
|
+
)
|
|
16033
|
+
] })
|
|
16034
|
+
]
|
|
16035
|
+
}
|
|
16036
|
+
),
|
|
16037
|
+
showCoverage && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
16038
|
+
"div",
|
|
16039
|
+
{
|
|
16040
|
+
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--chekin-color-surface-input-empty)]",
|
|
16041
|
+
onClick: focusDayInput,
|
|
16042
|
+
"aria-hidden": "true"
|
|
16043
|
+
}
|
|
16044
|
+
),
|
|
16045
|
+
/* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
16046
|
+
Fieldset,
|
|
16047
|
+
{
|
|
16048
|
+
isFocused,
|
|
16049
|
+
invalid: isInvalid,
|
|
16050
|
+
isEmpty,
|
|
16051
|
+
isActivated: !isEmpty || isFocused,
|
|
16052
|
+
disabled,
|
|
16053
|
+
loading,
|
|
16054
|
+
readOnly,
|
|
16055
|
+
htmlFor: dayId,
|
|
16056
|
+
labelId,
|
|
16057
|
+
legend: label,
|
|
16058
|
+
label,
|
|
16059
|
+
tooltip,
|
|
16060
|
+
onClick: isMobile2 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
16061
|
+
}
|
|
16062
|
+
),
|
|
16063
|
+
isMonthOpen && !isMobile2 && /* @__PURE__ */ (0, import_jsx_runtime163.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 })
|
|
16064
|
+
] }),
|
|
16065
|
+
isMobile2 && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
16066
|
+
DatePickerContent,
|
|
16067
|
+
{
|
|
16068
|
+
baseId: wheelBaseId,
|
|
16069
|
+
open: isWheelOpen,
|
|
16070
|
+
isMobile: true,
|
|
16071
|
+
label: label ?? t("pick_date"),
|
|
16072
|
+
title: mobileTitle ?? label ?? t("pick_date"),
|
|
16073
|
+
doneLabel: resolvedDoneLabel,
|
|
16074
|
+
monthLabels: wheel.months.map((m) => resolvedMonthLabels[m] ?? ""),
|
|
16075
|
+
days: wheel.days,
|
|
16076
|
+
years: wheel.years,
|
|
16077
|
+
monthIndex: wheel.monthIndex,
|
|
16078
|
+
dayIndex: wheel.dayIndex,
|
|
16079
|
+
yearIndex: wheel.yearIndex,
|
|
16080
|
+
monthScrollTop: wheel.monthScrollTop,
|
|
16081
|
+
dayScrollTop: wheel.dayScrollTop,
|
|
16082
|
+
yearScrollTop: wheel.yearScrollTop,
|
|
16083
|
+
monthListRef: wheel.monthListRef,
|
|
16084
|
+
dayListRef: wheel.dayListRef,
|
|
16085
|
+
yearListRef: wheel.yearListRef,
|
|
16086
|
+
onOpenChange: (next) => next ? openWheel() : closeWheel(),
|
|
16087
|
+
onDone: handleWheelDone,
|
|
16088
|
+
onColumnScroll: wheel.handleColumnScroll,
|
|
16089
|
+
onColumnKeyDown: wheel.handleColumnKeyDown,
|
|
16090
|
+
onOptionSelect: wheel.handleOptionSelect
|
|
16091
|
+
}
|
|
16092
|
+
),
|
|
16093
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime163.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") }),
|
|
16094
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16095
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
|
|
16096
|
+
FieldErrorMessage,
|
|
16097
|
+
{
|
|
16098
|
+
id: errorId,
|
|
16099
|
+
message: error,
|
|
16100
|
+
className: "mt-[1px] text-[14px]"
|
|
16101
|
+
}
|
|
16102
|
+
)
|
|
16103
|
+
] })
|
|
16104
|
+
}
|
|
16105
|
+
);
|
|
16106
|
+
}
|
|
16107
|
+
);
|
|
16108
|
+
|
|
16109
|
+
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16110
|
+
var React64 = __toESM(require("react"), 1);
|
|
16111
|
+
var import_react_i18next34 = require("react-i18next");
|
|
16112
|
+
|
|
16113
|
+
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
16114
|
+
var import_date_fns2 = require("date-fns");
|
|
16115
|
+
|
|
16116
|
+
// src/dashboard/date-range-picker/dateUtils.ts
|
|
16117
|
+
var import_date_fns = require("date-fns");
|
|
16118
|
+
var DEFAULT_DISPLAY_FORMAT = "dd-MM-yyyy";
|
|
16119
|
+
var SUPPORTED_FORMATS = ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"];
|
|
16120
|
+
var formatDate = (format2 = DEFAULT_DISPLAY_FORMAT) => (date) => (0, import_date_fns.format)(date, format2);
|
|
16121
|
+
var parseDate = (displayFormat) => (dateStr) => {
|
|
16122
|
+
if (!dateStr) return void 0;
|
|
16123
|
+
const formats = displayFormat ? Array.from(/* @__PURE__ */ new Set([...SUPPORTED_FORMATS, displayFormat])) : SUPPORTED_FORMATS;
|
|
16124
|
+
for (const format2 of formats) {
|
|
16125
|
+
const parsed = (0, import_date_fns.parse)(dateStr, format2, /* @__PURE__ */ new Date());
|
|
16126
|
+
if ((0, import_date_fns.isValid)(parsed) && (0, import_date_fns.format)(parsed, format2) === dateStr) {
|
|
16127
|
+
return parsed;
|
|
16128
|
+
}
|
|
16129
|
+
}
|
|
16130
|
+
return void 0;
|
|
16131
|
+
};
|
|
16132
|
+
function toDate(input) {
|
|
16133
|
+
if (input === void 0 || input === null || input === "") return void 0;
|
|
16134
|
+
if (input instanceof Date) return Number.isNaN(input.getTime()) ? void 0 : input;
|
|
16135
|
+
const next = new Date(input);
|
|
16136
|
+
return Number.isNaN(next.getTime()) ? void 0 : next;
|
|
16137
|
+
}
|
|
16138
|
+
function resetTime(date) {
|
|
16139
|
+
const next = toDate(date) ?? /* @__PURE__ */ new Date();
|
|
16140
|
+
next.setHours(0, 0, 0, 0);
|
|
16141
|
+
return next;
|
|
16142
|
+
}
|
|
16143
|
+
|
|
16144
|
+
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
16145
|
+
var isDayBlocked = ({ minDate, maxDate, maxDays, minDays, datesRange }) => (date) => {
|
|
16146
|
+
const startDate = datesRange?.from ? resetTime(datesRange.from) : null;
|
|
16147
|
+
const endDate = datesRange?.to ? resetTime(datesRange.to) : null;
|
|
16148
|
+
const min = toDate(minDate);
|
|
16149
|
+
const max = toDate(maxDate);
|
|
16150
|
+
if (maxDays) {
|
|
16151
|
+
if (startDate && Math.abs((0, import_date_fns2.differenceInDays)(date, startDate)) + 1 > maxDays) {
|
|
16152
|
+
return true;
|
|
16153
|
+
}
|
|
16154
|
+
if (endDate && Math.abs((0, import_date_fns2.differenceInDays)(date, endDate)) + 1 > maxDays) {
|
|
16155
|
+
return true;
|
|
16156
|
+
}
|
|
16157
|
+
}
|
|
16158
|
+
if (minDays) {
|
|
16159
|
+
if (startDate && !(0, import_date_fns2.isSameDay)(date, startDate) && Math.abs((0, import_date_fns2.differenceInDays)(date, startDate)) < minDays) {
|
|
16160
|
+
return true;
|
|
16161
|
+
}
|
|
16162
|
+
if (endDate && !(0, import_date_fns2.isSameDay)(date, endDate) && Math.abs((0, import_date_fns2.differenceInDays)(date, endDate)) < minDays) {
|
|
16163
|
+
return true;
|
|
16164
|
+
}
|
|
16165
|
+
}
|
|
16166
|
+
if (min && (0, import_date_fns2.isBefore)(date, resetTime(min))) return true;
|
|
16167
|
+
if (max && (0, import_date_fns2.isAfter)(date, resetTime(max))) return true;
|
|
16168
|
+
return false;
|
|
16169
|
+
};
|
|
16170
|
+
|
|
16171
|
+
// src/dashboard/date-range-picker/createDisabledMatchers.ts
|
|
16172
|
+
var createDisabledMatchers = ({
|
|
16173
|
+
disabledDays,
|
|
16174
|
+
minDate,
|
|
16175
|
+
maxDate,
|
|
16176
|
+
maxDays,
|
|
16177
|
+
minDays,
|
|
16178
|
+
datesRange
|
|
16179
|
+
}) => {
|
|
16180
|
+
const result = [
|
|
16181
|
+
isDayBlocked({ minDate, maxDate, maxDays, minDays, datesRange })
|
|
16182
|
+
];
|
|
16183
|
+
if (Array.isArray(disabledDays)) result.push(...disabledDays);
|
|
16184
|
+
else if (disabledDays) result.push(disabledDays);
|
|
16185
|
+
return result;
|
|
16186
|
+
};
|
|
16187
|
+
|
|
16188
|
+
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
16189
|
+
var React61 = __toESM(require("react"), 1);
|
|
16190
|
+
function useRangeValue({
|
|
16191
|
+
value: externalValue,
|
|
16192
|
+
defaultValue,
|
|
16193
|
+
onChange,
|
|
16194
|
+
name
|
|
16195
|
+
}) {
|
|
16196
|
+
const isControlled = externalValue !== void 0;
|
|
16197
|
+
const [internalValue, setInternalValue] = React61.useState(
|
|
16198
|
+
defaultValue
|
|
16199
|
+
);
|
|
16200
|
+
const value = isControlled ? externalValue : internalValue;
|
|
16201
|
+
const commit = React61.useCallback(
|
|
16202
|
+
(next) => {
|
|
16203
|
+
if (!isControlled) setInternalValue(next);
|
|
16204
|
+
if (next === void 0) {
|
|
16205
|
+
onChange?.(void 0, name);
|
|
16206
|
+
return;
|
|
16207
|
+
}
|
|
16208
|
+
if (next?.from && next?.to) onChange?.(next, name);
|
|
16209
|
+
},
|
|
16210
|
+
[isControlled, name, onChange]
|
|
16211
|
+
);
|
|
16212
|
+
return { value, commit };
|
|
16213
|
+
}
|
|
16214
|
+
|
|
16215
|
+
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
16216
|
+
var React62 = __toESM(require("react"), 1);
|
|
16217
|
+
function useRangeTextInputs({
|
|
16218
|
+
value,
|
|
16219
|
+
format: format2,
|
|
16220
|
+
parse: parse3,
|
|
16221
|
+
onCommit,
|
|
16222
|
+
onBlur
|
|
16223
|
+
}) {
|
|
16224
|
+
const [fromText, setFromText] = React62.useState(value?.from ? format2(value.from) : "");
|
|
16225
|
+
const [toText, setToText] = React62.useState(value?.to ? format2(value.to) : "");
|
|
16226
|
+
React62.useEffect(() => {
|
|
16227
|
+
setFromText(value?.from ? format2(value.from) : "");
|
|
16228
|
+
setToText(value?.to ? format2(value.to) : "");
|
|
16229
|
+
}, [format2, value?.from, value?.to]);
|
|
16230
|
+
const handleFromBlur = React62.useCallback(() => {
|
|
16231
|
+
if (!fromText) {
|
|
16232
|
+
const next = { from: void 0, to: value?.to };
|
|
16233
|
+
onCommit(next);
|
|
16234
|
+
onBlur?.(next);
|
|
16235
|
+
return void 0;
|
|
16236
|
+
}
|
|
16237
|
+
const parsed = parse3(fromText);
|
|
16238
|
+
if (parsed) {
|
|
16239
|
+
const next = { from: parsed, to: value?.to };
|
|
16240
|
+
onCommit(next);
|
|
16241
|
+
onBlur?.(next);
|
|
16242
|
+
return parsed;
|
|
16243
|
+
}
|
|
16244
|
+
setFromText(value?.from ? format2(value.from) : "");
|
|
16245
|
+
return void 0;
|
|
16246
|
+
}, [format2, fromText, onBlur, onCommit, parse3, value?.from, value?.to]);
|
|
16247
|
+
const handleToBlur = React62.useCallback(() => {
|
|
16248
|
+
if (!toText) {
|
|
16249
|
+
const next = { from: value?.from, to: void 0 };
|
|
16250
|
+
onCommit(next);
|
|
16251
|
+
onBlur?.(next);
|
|
16252
|
+
return;
|
|
16253
|
+
}
|
|
16254
|
+
const parsed = parse3(toText);
|
|
16255
|
+
if (parsed) {
|
|
16256
|
+
const next = { from: value?.from, to: parsed };
|
|
16257
|
+
onCommit(next);
|
|
16258
|
+
onBlur?.(next);
|
|
16259
|
+
return;
|
|
16260
|
+
}
|
|
16261
|
+
setToText(value?.to ? format2(value.to) : "");
|
|
16262
|
+
}, [format2, onBlur, onCommit, parse3, toText, value?.from, value?.to]);
|
|
16263
|
+
return {
|
|
16264
|
+
fromText,
|
|
16265
|
+
toText,
|
|
16266
|
+
setFromText,
|
|
16267
|
+
setToText,
|
|
16268
|
+
handleFromBlur,
|
|
16269
|
+
handleToBlur
|
|
16270
|
+
};
|
|
16271
|
+
}
|
|
16272
|
+
|
|
16273
|
+
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
16274
|
+
var React63 = __toESM(require("react"), 1);
|
|
16275
|
+
function useRangeMonthSync(value) {
|
|
16276
|
+
const isPreloadedRef = React63.useRef(false);
|
|
16277
|
+
const [month, setMonth] = React63.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
16278
|
+
React63.useEffect(() => {
|
|
16279
|
+
if (value?.from && !isPreloadedRef.current) {
|
|
16280
|
+
setMonth(value.from);
|
|
16281
|
+
isPreloadedRef.current = true;
|
|
16282
|
+
}
|
|
16283
|
+
}, [value?.from]);
|
|
16284
|
+
const syncMonthToValue = React63.useCallback((next) => {
|
|
16285
|
+
isPreloadedRef.current = true;
|
|
16286
|
+
if (next?.from) setMonth(next.from);
|
|
16287
|
+
}, []);
|
|
16288
|
+
const resetPreload = React63.useCallback(() => {
|
|
16289
|
+
isPreloadedRef.current = false;
|
|
16290
|
+
}, []);
|
|
16291
|
+
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
16292
|
+
}
|
|
16293
|
+
|
|
16294
|
+
// src/dashboard/date-range-picker/utils/rangeSelection.ts
|
|
16295
|
+
var import_date_fns3 = require("date-fns");
|
|
16296
|
+
function resolveRangeSelection({
|
|
16297
|
+
previous,
|
|
16298
|
+
range,
|
|
16299
|
+
pickedDate
|
|
16300
|
+
}) {
|
|
16301
|
+
const startingNewRange = !previous?.from || previous.from && previous.to || range?.to && pickedDate && (0, import_date_fns3.isBefore)(pickedDate, range.to);
|
|
16302
|
+
if (startingNewRange) {
|
|
16303
|
+
return { next: { from: pickedDate, to: void 0 }, shouldClose: false };
|
|
16304
|
+
}
|
|
16305
|
+
const next = range;
|
|
16306
|
+
const shouldClose = Boolean(
|
|
16307
|
+
next?.from && next?.to || pickedDate && range?.from && (0, import_date_fns3.isBefore)(range.from, pickedDate)
|
|
16308
|
+
);
|
|
16309
|
+
return { next, shouldClose };
|
|
16310
|
+
}
|
|
16311
|
+
|
|
16312
|
+
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
16313
|
+
var import_lucide_react51 = require("lucide-react");
|
|
16314
|
+
var import_jsx_runtime164 = require("react/jsx-runtime");
|
|
16315
|
+
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
16316
|
+
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)]";
|
|
16317
|
+
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";
|
|
16318
|
+
function DateRangeInputs({
|
|
16319
|
+
fromId,
|
|
16320
|
+
toId,
|
|
16321
|
+
name,
|
|
16322
|
+
labelId,
|
|
16323
|
+
fromText,
|
|
16324
|
+
toText,
|
|
16325
|
+
fromPlaceholder = DEFAULT_PLACEHOLDER,
|
|
16326
|
+
toPlaceholder = DEFAULT_PLACEHOLDER,
|
|
16327
|
+
fromInputRef,
|
|
16328
|
+
toInputRef,
|
|
16329
|
+
isEmpty,
|
|
16330
|
+
isFocused,
|
|
16331
|
+
isBlocked,
|
|
16332
|
+
isInvalid,
|
|
16333
|
+
loading,
|
|
16334
|
+
readOnly,
|
|
16335
|
+
hideClearDates,
|
|
16336
|
+
hideCalendarIcon,
|
|
16337
|
+
isOpen,
|
|
16338
|
+
focusedInput,
|
|
16339
|
+
clearLabel,
|
|
16340
|
+
openCalendarLabel,
|
|
16341
|
+
onFromTextChange,
|
|
16342
|
+
onToTextChange,
|
|
16343
|
+
onFromFocus,
|
|
16344
|
+
onToFocus,
|
|
16345
|
+
onFromBlur,
|
|
16346
|
+
onToBlur,
|
|
16347
|
+
onRowClick,
|
|
16348
|
+
onReset,
|
|
16349
|
+
onToggleCalendar
|
|
16350
|
+
}) {
|
|
16351
|
+
const inputClass = cn(
|
|
16352
|
+
inputBaseClass,
|
|
16353
|
+
isBlocked && "cursor-not-allowed",
|
|
16354
|
+
loading && "cursor-progress"
|
|
16355
|
+
);
|
|
16356
|
+
return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
|
|
16357
|
+
"div",
|
|
16358
|
+
{
|
|
16359
|
+
className: cn(
|
|
16360
|
+
"relative box-border flex h-12 w-full items-center rounded-[6px] pr-2 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] transition-colors duration-200",
|
|
16361
|
+
isEmpty && !isFocused && "bg-[var(--chekin-color-surface-input-empty)]"
|
|
16362
|
+
),
|
|
16363
|
+
onClick: onRowClick,
|
|
16364
|
+
children: [
|
|
16365
|
+
/* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
16366
|
+
"input",
|
|
16367
|
+
{
|
|
16368
|
+
ref: fromInputRef,
|
|
16369
|
+
id: fromId,
|
|
16370
|
+
name: name ? `${name}-from` : void 0,
|
|
16371
|
+
type: "text",
|
|
16372
|
+
autoComplete: "off",
|
|
16373
|
+
placeholder: fromPlaceholder,
|
|
16374
|
+
value: fromText,
|
|
16375
|
+
disabled: isBlocked,
|
|
16376
|
+
readOnly,
|
|
16377
|
+
"aria-invalid": isInvalid,
|
|
16378
|
+
"aria-labelledby": labelId,
|
|
16379
|
+
onChange: (event) => onFromTextChange(event.target.value),
|
|
16380
|
+
onFocus: onFromFocus,
|
|
16381
|
+
onBlur: onFromBlur,
|
|
16382
|
+
className: cn(
|
|
16383
|
+
inputClass,
|
|
16384
|
+
"max-w-[110px] pl-[14px] pr-0",
|
|
16385
|
+
isEmpty && !isFocused && "placeholder:invisible"
|
|
16386
|
+
)
|
|
16387
|
+
}
|
|
16388
|
+
),
|
|
16389
|
+
/* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
16390
|
+
"span",
|
|
16391
|
+
{
|
|
16392
|
+
"aria-hidden": "true",
|
|
16393
|
+
className: cn(
|
|
16394
|
+
"shrink-0 px-2 text-[18px] leading-none text-[var(--chekin-color-gray-2)]",
|
|
16395
|
+
isEmpty && !isFocused && "invisible"
|
|
16396
|
+
),
|
|
16397
|
+
children: "\u2192"
|
|
16398
|
+
}
|
|
16399
|
+
),
|
|
16400
|
+
/* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
16401
|
+
"input",
|
|
16402
|
+
{
|
|
16403
|
+
ref: toInputRef,
|
|
16404
|
+
id: toId,
|
|
16405
|
+
name: name ? `${name}-to` : void 0,
|
|
16406
|
+
type: "text",
|
|
16407
|
+
autoComplete: "off",
|
|
16408
|
+
placeholder: toPlaceholder,
|
|
16409
|
+
value: toText,
|
|
16410
|
+
disabled: isBlocked,
|
|
16411
|
+
readOnly,
|
|
16412
|
+
"aria-invalid": isInvalid,
|
|
16413
|
+
"aria-labelledby": labelId,
|
|
16414
|
+
onChange: (event) => onToTextChange(event.target.value),
|
|
16415
|
+
onFocus: onToFocus,
|
|
16416
|
+
onBlur: onToBlur,
|
|
16417
|
+
className: cn(
|
|
16418
|
+
inputClass,
|
|
16419
|
+
"px-0",
|
|
16420
|
+
isEmpty && !isFocused && "placeholder:invisible"
|
|
16421
|
+
)
|
|
16422
|
+
}
|
|
16423
|
+
),
|
|
16424
|
+
/* @__PURE__ */ (0, import_jsx_runtime164.jsxs)("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
16425
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
16426
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
16427
|
+
"button",
|
|
16428
|
+
{
|
|
16429
|
+
type: "button",
|
|
16430
|
+
disabled: isBlocked,
|
|
16431
|
+
onClick: onReset,
|
|
16432
|
+
className: iconButtonClass,
|
|
16433
|
+
"aria-label": clearLabel,
|
|
16434
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_lucide_react51.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
16435
|
+
}
|
|
16436
|
+
),
|
|
16437
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
|
|
16438
|
+
"button",
|
|
16439
|
+
{
|
|
16440
|
+
type: "button",
|
|
16441
|
+
disabled: isBlocked,
|
|
16442
|
+
onClick: onToggleCalendar,
|
|
16443
|
+
"aria-pressed": isOpen,
|
|
16444
|
+
className: cn(
|
|
16445
|
+
"flex h-6 w-6 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 outline-none disabled:cursor-not-allowed",
|
|
16446
|
+
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
16447
|
+
),
|
|
16448
|
+
"aria-label": openCalendarLabel,
|
|
16449
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_lucide_react51.CalendarDays, { size: 18 })
|
|
16450
|
+
}
|
|
16451
|
+
)
|
|
16452
|
+
] })
|
|
16453
|
+
]
|
|
16454
|
+
}
|
|
16455
|
+
);
|
|
16456
|
+
}
|
|
16457
|
+
|
|
16458
|
+
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
16459
|
+
var import_lucide_react52 = require("lucide-react");
|
|
16460
|
+
var import_react_day_picker2 = require("react-day-picker");
|
|
16461
|
+
|
|
16462
|
+
// src/dashboard/_calendar/dashboardCalendarClassNames.ts
|
|
16463
|
+
var dashboardCalendarClassNames = {
|
|
16464
|
+
root: "relative",
|
|
16465
|
+
months: "relative flex flex-col gap-6 sm:flex-row sm:gap-8",
|
|
16466
|
+
month: "w-full",
|
|
16467
|
+
month_caption: "relative z-0 mb-3 flex h-9 items-center justify-center text-[18px] font-normal capitalize text-[var(--chekin-color-brand-navy)]",
|
|
16468
|
+
caption_label: "px-3 text-[18px] font-normal",
|
|
16469
|
+
nav: "absolute left-0 right-0 top-[4px] z-10 flex justify-between px-[6px] pointer-events-none",
|
|
16470
|
+
button_previous: "pointer-events-auto inline-flex h-[26px] w-[26px] items-center justify-center rounded-[2px] border border-[#9696b9] bg-transparent text-[var(--chekin-color-brand-blue)] outline-none transition-colors hover:bg-[#f0f8ff] disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent",
|
|
16471
|
+
button_next: "pointer-events-auto inline-flex h-[26px] w-[26px] items-center justify-center rounded-[2px] border border-[#9696b9] bg-transparent text-[var(--chekin-color-brand-blue)] outline-none transition-colors hover:bg-[#f0f8ff] disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent",
|
|
16472
|
+
weekday: "size-9 p-0 text-[14px] font-normal text-[var(--chekin-color-brand-blue)]",
|
|
16473
|
+
day_button: [
|
|
16474
|
+
"relative mx-auto flex size-9 items-center justify-center whitespace-nowrap rounded-full p-0",
|
|
16475
|
+
"text-[14px] font-light text-[var(--chekin-color-brand-navy)] outline-offset-2",
|
|
16476
|
+
"focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--chekin-color-brand-blue)]/60",
|
|
16477
|
+
"hover:bg-[#f0f8ff]",
|
|
16478
|
+
"group-data-[selected]:bg-[var(--chekin-color-brand-blue)] group-data-[selected]:text-white",
|
|
16479
|
+
"group-data-[disabled]:pointer-events-none group-data-[disabled]:text-[var(--chekin-color-gray-2)] group-data-[disabled]:line-through",
|
|
16480
|
+
"group-data-[outside]:text-[var(--chekin-color-gray-2)]",
|
|
16481
|
+
"group-data-[outside]:group-data-[selected]:text-white",
|
|
16482
|
+
"group-[.range-middle]:rounded-none group-[.range-middle]:bg-transparent",
|
|
16483
|
+
"group-data-[selected]:group-[.range-middle]:bg-[#edf7ff] group-data-[selected]:group-[.range-middle]:text-[var(--chekin-color-brand-navy)]"
|
|
16484
|
+
].join(" "),
|
|
16485
|
+
day: "group size-9 p-0 text-center text-[14px]",
|
|
16486
|
+
range_start: "range-start",
|
|
16487
|
+
range_end: "range-end",
|
|
16488
|
+
range_middle: "range-middle",
|
|
16489
|
+
today: [
|
|
16490
|
+
"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2",
|
|
16491
|
+
"*:after:z-10 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full",
|
|
16492
|
+
"*:after:bg-[var(--chekin-color-brand-blue)]",
|
|
16493
|
+
"[&[data-selected]:not(.range-middle)>*]:after:bg-white"
|
|
16494
|
+
].join(" "),
|
|
16495
|
+
outside: "text-[var(--chekin-color-gray-2)]",
|
|
16496
|
+
hidden: "invisible"
|
|
16497
|
+
};
|
|
16498
|
+
|
|
16499
|
+
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
16500
|
+
var import_jsx_runtime165 = require("react/jsx-runtime");
|
|
16501
|
+
var calendarComponents = {
|
|
16502
|
+
Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_lucide_react52.ArrowLeft, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_lucide_react52.ArrowRight, { size: 14, strokeWidth: 2, "aria-hidden": "true" })
|
|
16503
|
+
};
|
|
16504
|
+
function DateRangeCalendar({
|
|
16505
|
+
value,
|
|
16506
|
+
month,
|
|
16507
|
+
onMonthChange,
|
|
16508
|
+
onSelect,
|
|
16509
|
+
numberOfMonths,
|
|
16510
|
+
minDate,
|
|
16511
|
+
maxDate,
|
|
16512
|
+
maxDays,
|
|
16513
|
+
minDays,
|
|
16514
|
+
autoFocus,
|
|
16515
|
+
disabledMatchers,
|
|
16516
|
+
components: customComponents,
|
|
16517
|
+
...dayPickerProps
|
|
16518
|
+
}) {
|
|
16519
|
+
return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
|
|
16520
|
+
import_react_day_picker2.DayPicker,
|
|
16521
|
+
{
|
|
16522
|
+
mode: "range",
|
|
16523
|
+
selected: value,
|
|
16524
|
+
month,
|
|
16525
|
+
onMonthChange,
|
|
16526
|
+
onSelect,
|
|
16527
|
+
numberOfMonths,
|
|
16528
|
+
showOutsideDays: true,
|
|
16529
|
+
startMonth: minDate,
|
|
16530
|
+
endMonth: maxDate,
|
|
16531
|
+
max: maxDays,
|
|
16532
|
+
min: minDays,
|
|
16533
|
+
autoFocus,
|
|
16534
|
+
classNames: dashboardCalendarClassNames,
|
|
16535
|
+
components: { ...calendarComponents, ...customComponents },
|
|
16536
|
+
className: "p-5",
|
|
16537
|
+
disabled: disabledMatchers,
|
|
16538
|
+
...dayPickerProps
|
|
16539
|
+
}
|
|
16540
|
+
);
|
|
16541
|
+
}
|
|
16542
|
+
|
|
16543
|
+
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
16544
|
+
var import_jsx_runtime166 = require("react/jsx-runtime");
|
|
16545
|
+
function DateRangePopover({
|
|
16546
|
+
isOpen,
|
|
16547
|
+
isMobile: isMobile2,
|
|
16548
|
+
openDirection,
|
|
16549
|
+
drawerTitle,
|
|
16550
|
+
drawerDescription,
|
|
16551
|
+
onClose,
|
|
16552
|
+
children
|
|
16553
|
+
}) {
|
|
16554
|
+
if (!isOpen) return null;
|
|
16555
|
+
if (isMobile2) {
|
|
16556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
|
|
16557
|
+
Drawer,
|
|
16558
|
+
{
|
|
16559
|
+
open: isOpen,
|
|
16560
|
+
onOpenChange: (next) => {
|
|
16561
|
+
if (!next) onClose();
|
|
16562
|
+
},
|
|
16563
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
|
|
16564
|
+
DrawerContent,
|
|
16565
|
+
{
|
|
16566
|
+
onClose,
|
|
16567
|
+
lockScroll: false,
|
|
16568
|
+
className: "max-h-[calc(100vh-1rem)]",
|
|
16569
|
+
children: [
|
|
16570
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
16571
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
16572
|
+
/* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
16573
|
+
]
|
|
16574
|
+
}
|
|
16575
|
+
)
|
|
16576
|
+
}
|
|
16577
|
+
);
|
|
16578
|
+
}
|
|
16579
|
+
return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
|
|
16580
|
+
"div",
|
|
16581
|
+
{
|
|
16582
|
+
className: cn(
|
|
16583
|
+
"absolute left-0 z-30 w-max overflow-hidden rounded-[3px] border border-[var(--chekin-color-brand-blue)] bg-white shadow-[0_5px_5px_0_rgba(33,72,255,0.1)]",
|
|
16584
|
+
openDirection === "up" ? "bottom-full mb-2" : "top-full mt-1"
|
|
16585
|
+
),
|
|
16586
|
+
children
|
|
16587
|
+
}
|
|
16588
|
+
);
|
|
16589
|
+
}
|
|
16590
|
+
|
|
16591
|
+
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16592
|
+
var import_jsx_runtime167 = require("react/jsx-runtime");
|
|
16593
|
+
var DashboardDateRangePicker = React64.forwardRef(function DashboardDateRangePicker2({
|
|
16594
|
+
label,
|
|
16595
|
+
value: externalValue,
|
|
16596
|
+
defaultValue,
|
|
16597
|
+
onChange,
|
|
16598
|
+
onBlur,
|
|
16599
|
+
name,
|
|
16600
|
+
invalid,
|
|
16601
|
+
error,
|
|
16602
|
+
disabled,
|
|
16603
|
+
readOnly,
|
|
16604
|
+
loading,
|
|
16605
|
+
optional,
|
|
16606
|
+
tooltip,
|
|
16607
|
+
className,
|
|
16608
|
+
displayFormat = DEFAULT_DISPLAY_FORMAT,
|
|
16609
|
+
fromPlaceholder,
|
|
16610
|
+
toPlaceholder,
|
|
16611
|
+
minDate,
|
|
16612
|
+
maxDate,
|
|
16613
|
+
minDays,
|
|
16614
|
+
maxDays,
|
|
16615
|
+
disabledDays,
|
|
16616
|
+
hideClearDates,
|
|
16617
|
+
hideCalendarIcon,
|
|
16618
|
+
hideErrorMessage,
|
|
16619
|
+
helperText,
|
|
16620
|
+
width,
|
|
16621
|
+
numberOfMonths,
|
|
16622
|
+
openDirection = "down",
|
|
16623
|
+
autoFocusOnOpen = true,
|
|
16624
|
+
components: customComponents,
|
|
16625
|
+
...dayPickerProps
|
|
16626
|
+
}, ref) {
|
|
16627
|
+
const containerRef = React64.useRef(null);
|
|
16628
|
+
const fromInputRef = React64.useRef(null);
|
|
16629
|
+
const toInputRef = React64.useRef(null);
|
|
16630
|
+
const reactId = React64.useId();
|
|
16631
|
+
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
16632
|
+
const fromId = `${baseId}-from`;
|
|
16633
|
+
const toId = `${baseId}-to`;
|
|
16634
|
+
const labelId = `${baseId}-label`;
|
|
16635
|
+
const errorId = `${baseId}-error`;
|
|
16636
|
+
const normalizedValue = React64.useMemo(() => {
|
|
16637
|
+
if (externalValue === void 0) return void 0;
|
|
16638
|
+
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
16639
|
+
}, [externalValue]);
|
|
16640
|
+
const normalizedDefaultValue = React64.useMemo(() => {
|
|
16641
|
+
if (defaultValue === void 0) return void 0;
|
|
16642
|
+
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
16643
|
+
}, [defaultValue]);
|
|
16644
|
+
const { value, commit } = useRangeValue({
|
|
16645
|
+
value: normalizedValue,
|
|
16646
|
+
defaultValue: normalizedDefaultValue,
|
|
16647
|
+
onChange,
|
|
16648
|
+
name
|
|
16649
|
+
});
|
|
16650
|
+
const normalizedMinDate = React64.useMemo(() => toDate(minDate), [minDate]);
|
|
16651
|
+
const normalizedMaxDate = React64.useMemo(() => toDate(maxDate), [maxDate]);
|
|
16652
|
+
const formatter = React64.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
16653
|
+
const parser = React64.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
16654
|
+
const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({ value, format: formatter, parse: parser, onCommit: commit, onBlur });
|
|
16655
|
+
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
16656
|
+
const [isOpen, setIsOpen] = React64.useState(false);
|
|
16657
|
+
const [focusedInput, setFocusedInput] = React64.useState(null);
|
|
16658
|
+
const [autoFocus, setAutoFocus] = React64.useState(false);
|
|
16659
|
+
const isMobile2 = useIsMobile();
|
|
16660
|
+
const { t } = (0, import_react_i18next34.useTranslation)();
|
|
16661
|
+
const drawerTitle = label ?? t("select_dates");
|
|
16662
|
+
const drawerDescription = label ?? t("pick_date_range");
|
|
16663
|
+
const isEmpty = !value?.from && !value?.to;
|
|
16664
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
16665
|
+
const isInvalid = Boolean(invalid || error);
|
|
16666
|
+
const isFocused = focusedInput !== null || isOpen;
|
|
16667
|
+
const wrapperWidth = toCssSize(width);
|
|
16668
|
+
const monthsToShow = numberOfMonths ?? (isMobile2 ? 1 : 2);
|
|
16669
|
+
const closeCalendar = React64.useCallback(() => {
|
|
16670
|
+
setIsOpen(false);
|
|
16671
|
+
setFocusedInput(null);
|
|
16672
|
+
setAutoFocus(false);
|
|
16673
|
+
if (value?.from) setMonth(value.from);
|
|
16674
|
+
}, [setMonth, value?.from]);
|
|
16675
|
+
const openCalendar = React64.useCallback(() => {
|
|
16676
|
+
if (isBlocked || readOnly) return;
|
|
16677
|
+
setIsOpen(true);
|
|
16678
|
+
}, [isBlocked, readOnly]);
|
|
16679
|
+
useOutsideClick({
|
|
16680
|
+
elementRef: containerRef,
|
|
16681
|
+
onOutsideClick: closeCalendar,
|
|
16682
|
+
isDisabled: !isOpen || isMobile2
|
|
16683
|
+
});
|
|
16684
|
+
const handlePickerChange = React64.useCallback(
|
|
16685
|
+
(range, pickedDate) => {
|
|
16686
|
+
const { next, shouldClose } = resolveRangeSelection({
|
|
16687
|
+
previous: value,
|
|
16688
|
+
range,
|
|
16689
|
+
pickedDate
|
|
16690
|
+
});
|
|
16691
|
+
syncMonthToValue(next);
|
|
16692
|
+
commit(next);
|
|
16693
|
+
if (shouldClose) closeCalendar();
|
|
16694
|
+
},
|
|
16695
|
+
[closeCalendar, commit, syncMonthToValue, value]
|
|
16696
|
+
);
|
|
16697
|
+
const handleReset = (event) => {
|
|
16698
|
+
event.preventDefault();
|
|
16699
|
+
event.stopPropagation();
|
|
16700
|
+
commit(void 0);
|
|
16701
|
+
setFromText("");
|
|
16702
|
+
setToText("");
|
|
16703
|
+
setMonth(/* @__PURE__ */ new Date());
|
|
16704
|
+
};
|
|
16705
|
+
const disabledMatchers = React64.useMemo(
|
|
16706
|
+
() => createDisabledMatchers({
|
|
16707
|
+
minDate: normalizedMinDate,
|
|
16708
|
+
maxDate: normalizedMaxDate,
|
|
16709
|
+
maxDays,
|
|
16710
|
+
minDays,
|
|
16711
|
+
datesRange: value,
|
|
16712
|
+
disabledDays
|
|
16713
|
+
}),
|
|
16714
|
+
[disabledDays, maxDays, minDays, normalizedMaxDate, normalizedMinDate, value]
|
|
16715
|
+
);
|
|
16716
|
+
const toggleCalendar = () => {
|
|
16717
|
+
if (isOpen) {
|
|
16718
|
+
closeCalendar();
|
|
16719
|
+
return;
|
|
16720
|
+
}
|
|
16721
|
+
openCalendar();
|
|
16722
|
+
if (autoFocusOnOpen) setAutoFocus(true);
|
|
16723
|
+
};
|
|
16724
|
+
React64.useImperativeHandle(
|
|
16725
|
+
ref,
|
|
16726
|
+
() => ({
|
|
16727
|
+
setDateRange: (range) => {
|
|
16728
|
+
syncMonthToValue(range);
|
|
16729
|
+
commit(range);
|
|
16730
|
+
setFromText(range?.from ? formatter(range.from) : "");
|
|
16731
|
+
setToText(range?.to ? formatter(range.to) : "");
|
|
16732
|
+
},
|
|
16733
|
+
focus: () => fromInputRef.current?.focus(),
|
|
16734
|
+
open: openCalendar,
|
|
16735
|
+
close: closeCalendar
|
|
16736
|
+
}),
|
|
16737
|
+
[closeCalendar, commit, formatter, openCalendar, setFromText, setToText, syncMonthToValue]
|
|
16738
|
+
);
|
|
16739
|
+
return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
16740
|
+
"div",
|
|
16741
|
+
{
|
|
16742
|
+
ref: containerRef,
|
|
16743
|
+
className: cn(
|
|
16744
|
+
"relative w-full max-w-[var(--max-field-width)]",
|
|
16745
|
+
disabled && "cursor-not-allowed opacity-50",
|
|
16746
|
+
loading && "cursor-progress",
|
|
16747
|
+
className
|
|
16748
|
+
),
|
|
16749
|
+
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16750
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
|
|
16751
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { className: "relative w-full", children: [
|
|
16752
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
16753
|
+
DateRangeInputs,
|
|
16754
|
+
{
|
|
16755
|
+
fromId,
|
|
16756
|
+
toId,
|
|
16757
|
+
name,
|
|
16758
|
+
labelId,
|
|
16759
|
+
fromText,
|
|
16760
|
+
toText,
|
|
16761
|
+
fromPlaceholder,
|
|
16762
|
+
toPlaceholder,
|
|
16763
|
+
fromInputRef,
|
|
16764
|
+
toInputRef,
|
|
16765
|
+
isEmpty,
|
|
16766
|
+
isFocused,
|
|
16767
|
+
isBlocked,
|
|
16768
|
+
isInvalid,
|
|
16769
|
+
loading,
|
|
16770
|
+
readOnly,
|
|
16771
|
+
hideClearDates,
|
|
16772
|
+
hideCalendarIcon,
|
|
16773
|
+
isOpen,
|
|
16774
|
+
focusedInput,
|
|
16775
|
+
clearLabel: t("clear_dates"),
|
|
16776
|
+
openCalendarLabel: t("open_calendar"),
|
|
16777
|
+
onFromTextChange: setFromText,
|
|
16778
|
+
onToTextChange: setToText,
|
|
16779
|
+
onFromFocus: () => {
|
|
16780
|
+
setFocusedInput("from");
|
|
16781
|
+
if (!readOnly && !isBlocked) setIsOpen(true);
|
|
16782
|
+
},
|
|
16783
|
+
onToFocus: () => {
|
|
16784
|
+
setFocusedInput("to");
|
|
16785
|
+
if (!readOnly && !isBlocked) setIsOpen(true);
|
|
16786
|
+
},
|
|
16787
|
+
onFromBlur: () => {
|
|
16788
|
+
setFocusedInput((prev) => prev === "from" ? null : prev);
|
|
16789
|
+
handleFromBlur();
|
|
16790
|
+
},
|
|
16791
|
+
onToBlur: () => {
|
|
16792
|
+
setFocusedInput((prev) => prev === "to" ? null : prev);
|
|
16793
|
+
handleToBlur();
|
|
16794
|
+
},
|
|
16795
|
+
onRowClick: () => {
|
|
16796
|
+
if (isBlocked || readOnly) return;
|
|
16797
|
+
if (!focusedInput) fromInputRef.current?.focus();
|
|
16798
|
+
},
|
|
16799
|
+
onReset: handleReset,
|
|
16800
|
+
onToggleCalendar: toggleCalendar
|
|
16801
|
+
}
|
|
16802
|
+
),
|
|
16803
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
16804
|
+
Fieldset,
|
|
16805
|
+
{
|
|
16806
|
+
isFocused,
|
|
16807
|
+
invalid: isInvalid,
|
|
16808
|
+
isEmpty,
|
|
16809
|
+
isActivated: !isEmpty || isFocused,
|
|
16810
|
+
disabled,
|
|
16811
|
+
loading,
|
|
16812
|
+
readOnly,
|
|
16813
|
+
htmlFor: fromId,
|
|
16814
|
+
labelId,
|
|
16815
|
+
legend: label,
|
|
16816
|
+
label,
|
|
16817
|
+
tooltip
|
|
16818
|
+
}
|
|
16819
|
+
),
|
|
16820
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
16821
|
+
DateRangePopover,
|
|
16822
|
+
{
|
|
16823
|
+
isOpen: isOpen && !isMobile2,
|
|
16824
|
+
isMobile: false,
|
|
16825
|
+
openDirection,
|
|
16826
|
+
drawerTitle,
|
|
16827
|
+
drawerDescription,
|
|
16828
|
+
onClose: closeCalendar,
|
|
16829
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
16830
|
+
DateRangeCalendar,
|
|
16831
|
+
{
|
|
16832
|
+
value,
|
|
16833
|
+
month,
|
|
16834
|
+
onMonthChange: setMonth,
|
|
16835
|
+
onSelect: handlePickerChange,
|
|
16836
|
+
numberOfMonths: monthsToShow,
|
|
16837
|
+
minDate: normalizedMinDate,
|
|
16838
|
+
maxDate: normalizedMaxDate,
|
|
16839
|
+
maxDays,
|
|
16840
|
+
minDays,
|
|
16841
|
+
autoFocus,
|
|
16842
|
+
disabledMatchers,
|
|
16843
|
+
components: customComponents,
|
|
16844
|
+
...dayPickerProps
|
|
16845
|
+
}
|
|
16846
|
+
)
|
|
16847
|
+
}
|
|
16848
|
+
)
|
|
16849
|
+
] }),
|
|
16850
|
+
/* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
16851
|
+
DateRangePopover,
|
|
16852
|
+
{
|
|
16853
|
+
isOpen: isOpen && isMobile2,
|
|
16854
|
+
isMobile: true,
|
|
16855
|
+
openDirection,
|
|
16856
|
+
drawerTitle,
|
|
16857
|
+
drawerDescription,
|
|
16858
|
+
onClose: closeCalendar,
|
|
16859
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
16860
|
+
DateRangeCalendar,
|
|
16861
|
+
{
|
|
16862
|
+
value,
|
|
16863
|
+
month,
|
|
16864
|
+
onMonthChange: setMonth,
|
|
16865
|
+
onSelect: handlePickerChange,
|
|
16866
|
+
numberOfMonths: monthsToShow,
|
|
16867
|
+
minDate: normalizedMinDate,
|
|
16868
|
+
maxDate: normalizedMaxDate,
|
|
16869
|
+
maxDays,
|
|
16870
|
+
minDays,
|
|
16871
|
+
autoFocus,
|
|
16872
|
+
disabledMatchers,
|
|
16873
|
+
components: customComponents,
|
|
16874
|
+
...dayPickerProps
|
|
16875
|
+
}
|
|
16876
|
+
)
|
|
16877
|
+
}
|
|
16878
|
+
),
|
|
16879
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime167.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") }),
|
|
16880
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16881
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
|
|
16882
|
+
FieldErrorMessage,
|
|
16883
|
+
{
|
|
16884
|
+
id: errorId,
|
|
16885
|
+
message: error,
|
|
16886
|
+
className: "mt-[1px] text-[14px]"
|
|
16887
|
+
}
|
|
16888
|
+
)
|
|
16889
|
+
] })
|
|
16890
|
+
}
|
|
16891
|
+
);
|
|
16892
|
+
});
|
|
16893
|
+
|
|
16894
|
+
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
16895
|
+
var React65 = __toESM(require("react"), 1);
|
|
16896
|
+
var import_react_i18next35 = require("react-i18next");
|
|
16897
|
+
var import_date_fns4 = require("date-fns");
|
|
16898
|
+
var import_react_day_picker3 = require("react-day-picker");
|
|
16899
|
+
function isAfterMax(date, maxDate) {
|
|
16900
|
+
return (0, import_date_fns4.isAfter)(resetTime(date), resetTime(maxDate));
|
|
16901
|
+
}
|
|
16902
|
+
function isBeforeMin(date, minDate) {
|
|
16903
|
+
return (0, import_date_fns4.isBefore)(resetTime(date), resetTime(minDate));
|
|
16904
|
+
}
|
|
16905
|
+
function useValidateDates({
|
|
16906
|
+
minDays,
|
|
16907
|
+
maxDays,
|
|
16908
|
+
minDate,
|
|
16909
|
+
maxDate,
|
|
16910
|
+
disabledDays,
|
|
16911
|
+
onError,
|
|
16912
|
+
onSuccess,
|
|
16913
|
+
displayFormat
|
|
16914
|
+
}) {
|
|
16915
|
+
const { t } = (0, import_react_i18next35.useTranslation)();
|
|
16916
|
+
const handleError = useEvent(onError);
|
|
16917
|
+
const handleSuccess = useEvent(onSuccess);
|
|
16918
|
+
const errorFormatter = React65.useMemo(
|
|
16919
|
+
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
16920
|
+
[displayFormat]
|
|
16921
|
+
);
|
|
16922
|
+
const validateDates = React65.useCallback(
|
|
16923
|
+
(dates) => {
|
|
16924
|
+
const startDate = dates?.from;
|
|
16925
|
+
const endDate = dates?.to;
|
|
16926
|
+
if (!startDate || !endDate) return true;
|
|
16927
|
+
if (disabledDays && ((0, import_react_day_picker3.dateMatchModifiers)(startDate, disabledDays, import_react_day_picker3.dateLib) || (0, import_react_day_picker3.dateMatchModifiers)(endDate, disabledDays, import_react_day_picker3.dateLib))) {
|
|
16928
|
+
handleError(t("wrong_period_of_dates"));
|
|
16929
|
+
return false;
|
|
16930
|
+
}
|
|
16931
|
+
if ((0, import_date_fns4.isAfter)(startDate, endDate)) {
|
|
16932
|
+
handleError(t("wrong_period_of_dates"));
|
|
16933
|
+
return false;
|
|
16934
|
+
}
|
|
16935
|
+
if (maxDays && (0, import_date_fns4.differenceInDays)(endDate, startDate) + 1 > maxDays) {
|
|
16936
|
+
handleError(t("date_range_max_days_error", { count: maxDays }));
|
|
16937
|
+
return false;
|
|
16938
|
+
}
|
|
16939
|
+
if (minDays && (0, import_date_fns4.differenceInDays)(endDate, startDate) < minDays) {
|
|
16940
|
+
handleError(t("date_range_min_days_error", { count: minDays }));
|
|
16941
|
+
return false;
|
|
16942
|
+
}
|
|
16943
|
+
const min = toDate(minDate);
|
|
16944
|
+
const max = toDate(maxDate);
|
|
16945
|
+
if (min && isBeforeMin(startDate, min)) {
|
|
16946
|
+
handleError(t("past_dates", { minDate: errorFormatter(resetTime(min)) }));
|
|
16947
|
+
return false;
|
|
16948
|
+
}
|
|
16949
|
+
if (max && (isAfterMax(startDate, max) || isAfterMax(endDate, max))) {
|
|
16950
|
+
handleError(t("future_dates", { maxDate: errorFormatter(resetTime(max)) }));
|
|
16951
|
+
return false;
|
|
16952
|
+
}
|
|
16953
|
+
handleSuccess();
|
|
16954
|
+
return true;
|
|
16955
|
+
},
|
|
16956
|
+
[
|
|
16957
|
+
disabledDays,
|
|
16958
|
+
errorFormatter,
|
|
16959
|
+
handleError,
|
|
16960
|
+
handleSuccess,
|
|
16961
|
+
maxDate,
|
|
16962
|
+
maxDays,
|
|
16963
|
+
minDate,
|
|
16964
|
+
minDays,
|
|
16965
|
+
t
|
|
16966
|
+
]
|
|
16967
|
+
);
|
|
16968
|
+
return { validateDates };
|
|
16969
|
+
}
|
|
16970
|
+
|
|
16971
|
+
// src/dashboard/time-picker/TimePicker.tsx
|
|
16972
|
+
var React66 = __toESM(require("react"), 1);
|
|
16973
|
+
var import_date_fns5 = require("date-fns");
|
|
16974
|
+
var import_jsx_runtime168 = require("react/jsx-runtime");
|
|
16975
|
+
var SHORT_TIME_FORMAT = "HH:mm";
|
|
16976
|
+
function parseTime(value) {
|
|
16977
|
+
return (0, import_date_fns5.parse)(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
16978
|
+
}
|
|
16979
|
+
function getRange(settings) {
|
|
16980
|
+
const min = parseTime(settings.minTime);
|
|
16981
|
+
const max = settings.maxTime === "00:00" && settings.addNextDay ? (0, import_date_fns5.addDays)(parseTime(settings.maxTime), 1) : parseTime(settings.maxTime);
|
|
16982
|
+
return { min, max };
|
|
16983
|
+
}
|
|
16984
|
+
function buildOptions(settings) {
|
|
16985
|
+
const intervalUnit = settings.intervalUnit ?? "M";
|
|
16986
|
+
const interval = settings.interval ?? (intervalUnit === "H" ? 1 : 60);
|
|
16987
|
+
const minTime = settings.minTime ?? "00:00";
|
|
16988
|
+
const maxTime = settings.maxTime ?? (intervalUnit === "H" ? "23:00" : "23:00");
|
|
16989
|
+
const addNextDay = settings.addNextDay !== false;
|
|
16990
|
+
const { min, max } = getRange({ intervalUnit, interval, minTime, maxTime, addNextDay });
|
|
16991
|
+
const options = [];
|
|
16992
|
+
let current = new Date(min.getTime());
|
|
16993
|
+
while (current.getTime() <= max.getTime()) {
|
|
16994
|
+
const text = (0, import_date_fns5.format)(current, SHORT_TIME_FORMAT);
|
|
16995
|
+
options.push({ value: text, label: text });
|
|
16996
|
+
current = intervalUnit === "H" ? (0, import_date_fns5.addHours)(current, interval) : (0, import_date_fns5.addMinutes)(current, interval);
|
|
16997
|
+
}
|
|
16998
|
+
return options;
|
|
16999
|
+
}
|
|
17000
|
+
var FORMAT_SETTINGS = {
|
|
17001
|
+
time: { intervalUnit: "M", interval: 30, minTime: "00:00", maxTime: "23:30" },
|
|
17002
|
+
timeEach15Minutes: {
|
|
17003
|
+
intervalUnit: "M",
|
|
17004
|
+
interval: 15,
|
|
17005
|
+
minTime: "00:00",
|
|
17006
|
+
maxTime: "23:45"
|
|
17007
|
+
},
|
|
17008
|
+
timeEach30Minutes: {
|
|
17009
|
+
intervalUnit: "M",
|
|
17010
|
+
interval: 30,
|
|
17011
|
+
minTime: "00:00",
|
|
17012
|
+
maxTime: "23:30"
|
|
17013
|
+
},
|
|
17014
|
+
hours: { intervalUnit: "H", interval: 1, minTime: "00:00", maxTime: "23:00" }
|
|
17015
|
+
};
|
|
17016
|
+
var DashboardTimePicker = React66.forwardRef(
|
|
17017
|
+
function DashboardTimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
17018
|
+
const resolvedOptions = React66.useMemo(() => {
|
|
17019
|
+
if (options) return options;
|
|
17020
|
+
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
17021
|
+
return buildOptions(settings);
|
|
17022
|
+
}, [formatName, options, timeSettings]);
|
|
17023
|
+
return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(DashboardSelect, { ref, ...selectProps, options: resolvedOptions });
|
|
17024
|
+
}
|
|
17025
|
+
);
|
|
17026
|
+
|
|
17027
|
+
// src/dashboard/file-input/FileInput.tsx
|
|
17028
|
+
var React67 = __toESM(require("react"), 1);
|
|
17029
|
+
var import_lucide_react53 = require("lucide-react");
|
|
17030
|
+
var import_react_i18next36 = require("react-i18next");
|
|
17031
|
+
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
17032
|
+
function defaultFileNameFromUrl(url) {
|
|
17033
|
+
try {
|
|
17034
|
+
const parsed = new URL(url);
|
|
17035
|
+
const segments = parsed.pathname.split("/");
|
|
17036
|
+
return decodeURIComponent(segments[segments.length - 1] ?? url);
|
|
17037
|
+
} catch {
|
|
17038
|
+
return url;
|
|
17039
|
+
}
|
|
17040
|
+
}
|
|
17041
|
+
function defaultDownload(url) {
|
|
17042
|
+
window.open(url, "_blank", "noopener,noreferrer");
|
|
17043
|
+
}
|
|
17044
|
+
var DashboardFileInput = React67.forwardRef(
|
|
17045
|
+
function DashboardFileInput2({
|
|
17046
|
+
label,
|
|
17047
|
+
value,
|
|
17048
|
+
onChange,
|
|
17049
|
+
onDownload = defaultDownload,
|
|
17050
|
+
name = "file",
|
|
17051
|
+
placeholder,
|
|
17052
|
+
accept,
|
|
17053
|
+
multiple,
|
|
17054
|
+
disabled,
|
|
17055
|
+
readOnly,
|
|
17056
|
+
loading,
|
|
17057
|
+
invalid,
|
|
17058
|
+
error,
|
|
17059
|
+
optional,
|
|
17060
|
+
tooltip,
|
|
17061
|
+
helperText,
|
|
17062
|
+
hideErrorMessage,
|
|
17063
|
+
className,
|
|
17064
|
+
width,
|
|
17065
|
+
downloadLabel,
|
|
17066
|
+
fileNameFromUrl = defaultFileNameFromUrl
|
|
17067
|
+
}, ref) {
|
|
17068
|
+
const internalRef = React67.useRef(null);
|
|
17069
|
+
const inputRef = useCombinedRef(ref, internalRef);
|
|
17070
|
+
const { t } = (0, import_react_i18next36.useTranslation)();
|
|
17071
|
+
const resolvedLabel = label ?? t("upload_file");
|
|
17072
|
+
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
17073
|
+
const reactId = React67.useId();
|
|
17074
|
+
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
17075
|
+
const labelId = `${inputId}-label`;
|
|
17076
|
+
const errorId = `${inputId}-error`;
|
|
17077
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
17078
|
+
const isInvalid = Boolean(invalid || error);
|
|
17079
|
+
const isEmpty = !value;
|
|
17080
|
+
const wrapperWidth = toCssSize(width);
|
|
17081
|
+
const isUrl = typeof value === "string" && value.length > 0;
|
|
17082
|
+
const isFile = typeof File !== "undefined" && value instanceof File;
|
|
17083
|
+
const hasFileChip = isUrl || isFile;
|
|
17084
|
+
const handleFileChange = (event) => {
|
|
17085
|
+
const file = event.target.files?.[0] ?? null;
|
|
17086
|
+
onChange?.(file, event);
|
|
17087
|
+
};
|
|
17088
|
+
const handleClear = (event) => {
|
|
17089
|
+
event.preventDefault();
|
|
17090
|
+
event.stopPropagation();
|
|
17091
|
+
if (internalRef.current) internalRef.current.value = "";
|
|
17092
|
+
onChange?.(null);
|
|
17093
|
+
};
|
|
17094
|
+
const handleDownload = (event) => {
|
|
17095
|
+
event.preventDefault();
|
|
17096
|
+
event.stopPropagation();
|
|
17097
|
+
if (isUrl) onDownload(value);
|
|
17098
|
+
};
|
|
17099
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
|
|
17100
|
+
"label",
|
|
17101
|
+
{
|
|
17102
|
+
htmlFor: inputId,
|
|
17103
|
+
className: cn(
|
|
17104
|
+
"relative block w-full max-w-[var(--max-field-width)] cursor-pointer text-left",
|
|
17105
|
+
(disabled || readOnly) && "cursor-not-allowed",
|
|
17106
|
+
loading && "cursor-progress",
|
|
17107
|
+
disabled && "opacity-50",
|
|
17108
|
+
className
|
|
17109
|
+
),
|
|
17110
|
+
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
17111
|
+
children: [
|
|
17112
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
17113
|
+
"input",
|
|
17114
|
+
{
|
|
17115
|
+
ref: inputRef,
|
|
17116
|
+
id: inputId,
|
|
17117
|
+
name,
|
|
17118
|
+
type: "file",
|
|
17119
|
+
accept,
|
|
17120
|
+
multiple,
|
|
17121
|
+
disabled: isBlocked || readOnly,
|
|
17122
|
+
onChange: handleFileChange,
|
|
17123
|
+
className: "absolute h-[0.1px] w-[0.1px] opacity-0",
|
|
17124
|
+
"aria-labelledby": labelId,
|
|
17125
|
+
"aria-invalid": isInvalid
|
|
17126
|
+
}
|
|
17127
|
+
),
|
|
17128
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
|
|
17129
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "relative w-full", children: [
|
|
17130
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
|
|
17131
|
+
"div",
|
|
17132
|
+
{
|
|
17133
|
+
className: cn(
|
|
17134
|
+
"relative box-border flex h-12 w-full items-center justify-between gap-2 rounded-[6px] px-4 text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
17135
|
+
isEmpty && "bg-[var(--chekin-color-surface-input-empty)]"
|
|
17136
|
+
),
|
|
17137
|
+
children: [
|
|
17138
|
+
hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
|
|
17139
|
+
"div",
|
|
17140
|
+
{
|
|
17141
|
+
className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
|
|
17142
|
+
onClick: (event) => event.preventDefault(),
|
|
17143
|
+
children: [
|
|
17144
|
+
isUrl ? /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
|
|
17145
|
+
"button",
|
|
17146
|
+
{
|
|
17147
|
+
type: "button",
|
|
17148
|
+
onClick: handleDownload,
|
|
17149
|
+
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",
|
|
17150
|
+
children: [
|
|
17151
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
17152
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_lucide_react53.Download, { size: 15 })
|
|
17153
|
+
]
|
|
17154
|
+
}
|
|
17155
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
17156
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
17157
|
+
"button",
|
|
17158
|
+
{
|
|
17159
|
+
type: "button",
|
|
17160
|
+
disabled: isBlocked || readOnly,
|
|
17161
|
+
onClick: handleClear,
|
|
17162
|
+
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]",
|
|
17163
|
+
"aria-label": t("remove_file"),
|
|
17164
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
17165
|
+
import_lucide_react53.SquareX,
|
|
17166
|
+
{
|
|
17167
|
+
size: 15,
|
|
17168
|
+
fill: "#9696b9",
|
|
17169
|
+
color: "#f8f8f8",
|
|
17170
|
+
strokeWidth: 1.8
|
|
17171
|
+
}
|
|
17172
|
+
)
|
|
17173
|
+
}
|
|
17174
|
+
)
|
|
17175
|
+
]
|
|
17176
|
+
}
|
|
17177
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
17178
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
17179
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
17180
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_lucide_react53.Paperclip, { size: 20 })
|
|
17181
|
+
] })
|
|
17182
|
+
]
|
|
17183
|
+
}
|
|
17184
|
+
),
|
|
17185
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
17186
|
+
Fieldset,
|
|
17187
|
+
{
|
|
17188
|
+
isFocused: false,
|
|
17189
|
+
invalid: isInvalid,
|
|
17190
|
+
isEmpty,
|
|
17191
|
+
isActivated: !isEmpty,
|
|
17192
|
+
disabled,
|
|
17193
|
+
loading,
|
|
17194
|
+
readOnly,
|
|
17195
|
+
htmlFor: inputId,
|
|
17196
|
+
labelId,
|
|
17197
|
+
legend: resolvedLabel,
|
|
17198
|
+
label: resolvedLabel,
|
|
17199
|
+
tooltip
|
|
17200
|
+
}
|
|
17201
|
+
)
|
|
17202
|
+
] }),
|
|
17203
|
+
!error && optional && /* @__PURE__ */ (0, import_jsx_runtime169.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") }),
|
|
17204
|
+
!error && helperText && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
17205
|
+
error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
17206
|
+
FieldErrorMessage,
|
|
17207
|
+
{
|
|
17208
|
+
id: errorId,
|
|
17209
|
+
message: error,
|
|
17210
|
+
className: "mt-[1px] text-[14px]"
|
|
17211
|
+
}
|
|
17212
|
+
)
|
|
17213
|
+
] })
|
|
17214
|
+
]
|
|
17215
|
+
}
|
|
17216
|
+
);
|
|
17217
|
+
}
|
|
17218
|
+
);
|
|
17219
|
+
|
|
17220
|
+
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
17221
|
+
var React68 = __toESM(require("react"), 1);
|
|
17222
|
+
var import_jsx_runtime170 = require("react/jsx-runtime");
|
|
17223
|
+
function DashboardSelectIconsBox({
|
|
17224
|
+
children,
|
|
17225
|
+
icons,
|
|
17226
|
+
renderIcon,
|
|
17227
|
+
onSelect,
|
|
17228
|
+
columns = 4,
|
|
17229
|
+
iconsColor = "#6B6B95",
|
|
17230
|
+
isOpen: controlledOpen,
|
|
17231
|
+
defaultOpen = false,
|
|
17232
|
+
onOpenChange,
|
|
17233
|
+
position = "left",
|
|
17234
|
+
className,
|
|
17235
|
+
boxClassName
|
|
17236
|
+
}) {
|
|
17237
|
+
const containerRef = React68.useRef(null);
|
|
17238
|
+
const isControlled = controlledOpen !== void 0;
|
|
17239
|
+
const [internalOpen, setInternalOpen] = React68.useState(defaultOpen);
|
|
17240
|
+
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
17241
|
+
const setOpen = (next) => {
|
|
17242
|
+
if (!isControlled) setInternalOpen(next);
|
|
17243
|
+
onOpenChange?.(next);
|
|
17244
|
+
};
|
|
17245
|
+
const handleToggle = (event) => {
|
|
17246
|
+
if (event.target.closest("[data-icon-box-item]")) return;
|
|
17247
|
+
setOpen(!isOpen);
|
|
17248
|
+
};
|
|
17249
|
+
useOutsideClick({
|
|
17250
|
+
elementRef: containerRef,
|
|
17251
|
+
onOutsideClick: () => setOpen(false),
|
|
17252
|
+
isDisabled: !isOpen
|
|
17253
|
+
});
|
|
17254
|
+
const handlePick = (iconName) => {
|
|
17255
|
+
onSelect(iconName);
|
|
17256
|
+
setOpen(false);
|
|
17257
|
+
};
|
|
17258
|
+
return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
|
|
17259
|
+
"div",
|
|
17260
|
+
{
|
|
17261
|
+
ref: containerRef,
|
|
17262
|
+
onClick: handleToggle,
|
|
17263
|
+
className: cn("relative inline-block", className),
|
|
17264
|
+
children: [
|
|
17265
|
+
children,
|
|
17266
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
17267
|
+
"div",
|
|
17268
|
+
{
|
|
17269
|
+
className: cn(
|
|
17270
|
+
"absolute top-full z-30 mt-1 grid max-h-[192px] overflow-y-auto rounded-[6px] bg-white p-6 shadow-[0_15px_15px_0_rgba(33,72,255,0.2)]",
|
|
17271
|
+
position === "left" && "left-0",
|
|
17272
|
+
position === "right" && "right-0",
|
|
17273
|
+
position === "center" && "left-1/2 -translate-x-1/2",
|
|
17274
|
+
boxClassName
|
|
17275
|
+
),
|
|
17276
|
+
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
17277
|
+
children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
|
|
17278
|
+
"button",
|
|
17279
|
+
{
|
|
17280
|
+
type: "button",
|
|
17281
|
+
"data-icon-box-item": true,
|
|
17282
|
+
onClick: () => handlePick(iconName),
|
|
17283
|
+
className: "relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 outline-none hover:bg-[#f4f6f8]",
|
|
17284
|
+
"aria-label": iconName,
|
|
17285
|
+
children: renderIcon(iconName, iconsColor)
|
|
17286
|
+
},
|
|
17287
|
+
iconName
|
|
17288
|
+
))
|
|
17289
|
+
}
|
|
17290
|
+
)
|
|
17291
|
+
]
|
|
17292
|
+
}
|
|
17293
|
+
);
|
|
17294
|
+
}
|
|
17295
|
+
|
|
17296
|
+
// src/searchable-select/SearchableSelect.tsx
|
|
17297
|
+
var React69 = __toESM(require("react"), 1);
|
|
17298
|
+
var import_lucide_react54 = require("lucide-react");
|
|
17299
|
+
var import_react_virtual3 = require("@tanstack/react-virtual");
|
|
17300
|
+
var import_react82 = require("react");
|
|
17301
|
+
var import_jsx_runtime171 = require("react/jsx-runtime");
|
|
17302
|
+
var ROW_HEIGHT = 48;
|
|
17303
|
+
var DESKTOP_LIST_HEIGHT = 280;
|
|
17304
|
+
var MOBILE_LIST_HEIGHT = 420;
|
|
17305
|
+
var LOAD_MORE_THRESHOLD = 6;
|
|
17306
|
+
function defaultFilter(option, searchValue) {
|
|
17307
|
+
return String(option.label).toLowerCase().includes(searchValue.trim().toLowerCase());
|
|
17308
|
+
}
|
|
17309
|
+
var SearchableSelectInternal = ({
|
|
17310
|
+
options,
|
|
17311
|
+
value,
|
|
17312
|
+
onChange,
|
|
17313
|
+
onBlur,
|
|
17314
|
+
onOpenChange,
|
|
17315
|
+
searchValue,
|
|
17316
|
+
onSearchChange,
|
|
17317
|
+
filterOption = defaultFilter,
|
|
17318
|
+
loading,
|
|
17319
|
+
hasNextPage,
|
|
17320
|
+
onLoadMore,
|
|
17321
|
+
variant = "default",
|
|
17322
|
+
label,
|
|
17323
|
+
topLabel,
|
|
17324
|
+
placeholder,
|
|
17325
|
+
searchPlaceholder = "Search...",
|
|
17326
|
+
mobileTitle,
|
|
17327
|
+
getValueLabel,
|
|
17328
|
+
disabled,
|
|
17329
|
+
error,
|
|
17330
|
+
invalid,
|
|
17331
|
+
optional,
|
|
17332
|
+
tooltip,
|
|
17333
|
+
hideErrorMessage,
|
|
17334
|
+
name,
|
|
17335
|
+
className,
|
|
17336
|
+
dropdownClassName,
|
|
17337
|
+
menuClassName,
|
|
17338
|
+
noOptionsMessage,
|
|
17339
|
+
loadingMessage
|
|
17340
|
+
}, ref) => {
|
|
17341
|
+
const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
|
|
17342
|
+
const reactId = React69.useId();
|
|
17343
|
+
const [open, setOpen] = React69.useState(false);
|
|
17344
|
+
const [internalSearchValue, setInternalSearchValue] = React69.useState("");
|
|
17345
|
+
const [highlightedIndex, setHighlightedIndex] = React69.useState(-1);
|
|
17346
|
+
const containerRef = React69.useRef(null);
|
|
17347
|
+
const triggerRef = React69.useRef(null);
|
|
17348
|
+
const inputRef = React69.useRef(null);
|
|
17349
|
+
const listboxId = `${reactId}-listbox`;
|
|
17350
|
+
const labelId = `${reactId}-label`;
|
|
17351
|
+
const valueId = `${reactId}-value`;
|
|
17352
|
+
const helperTextId = `${reactId}-helper`;
|
|
17353
|
+
const errorId = `${reactId}-error`;
|
|
17354
|
+
const searchInputId = `${reactId}-search`;
|
|
17355
|
+
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
17356
|
+
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
17357
|
+
const visibleOptions = React69.useMemo(() => {
|
|
17358
|
+
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
17359
|
+
return options;
|
|
17360
|
+
}
|
|
17361
|
+
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
17362
|
+
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
17363
|
+
const selectedIndex = React69.useMemo(
|
|
17364
|
+
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
17365
|
+
[value?.value, visibleOptions]
|
|
17366
|
+
);
|
|
17367
|
+
const helperText = placeholder ?? label;
|
|
17368
|
+
const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
|
|
17369
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
17370
|
+
const triggerError = error ?? invalid;
|
|
17371
|
+
const describedBy = error && !hideErrorMessage ? errorId : void 0;
|
|
17372
|
+
const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
|
|
17373
|
+
useOutsideClick({
|
|
17374
|
+
elementRef: containerRef,
|
|
17375
|
+
onOutsideClick: () => closeSelect(),
|
|
17376
|
+
isDisabled: !open || isMobile2
|
|
17377
|
+
});
|
|
17378
|
+
const handleOnOpenChange = useEvent(onOpenChange);
|
|
17379
|
+
const setSelectOpen = (0, import_react82.useCallback)(
|
|
17380
|
+
(nextOpen, options2) => {
|
|
17381
|
+
setOpen(nextOpen);
|
|
17382
|
+
handleOnOpenChange?.(nextOpen);
|
|
17383
|
+
if (!nextOpen && options2?.restoreFocus) {
|
|
17384
|
+
triggerRef.current?.focus();
|
|
17385
|
+
}
|
|
17386
|
+
},
|
|
17387
|
+
[handleOnOpenChange]
|
|
17388
|
+
);
|
|
17389
|
+
React69.useEffect(() => {
|
|
17390
|
+
if (isBlocked) {
|
|
17391
|
+
setSelectOpen(false);
|
|
17392
|
+
return;
|
|
17393
|
+
}
|
|
17394
|
+
if (!open) return;
|
|
17395
|
+
const frameId = window.requestAnimationFrame(() => {
|
|
17396
|
+
inputRef.current?.focus();
|
|
17397
|
+
});
|
|
17398
|
+
return () => {
|
|
17399
|
+
window.cancelAnimationFrame(frameId);
|
|
17400
|
+
};
|
|
17401
|
+
}, [isBlocked, open, setSelectOpen]);
|
|
17402
|
+
React69.useEffect(() => {
|
|
17403
|
+
if (!open) {
|
|
17404
|
+
setHighlightedIndex(-1);
|
|
17405
|
+
return;
|
|
17406
|
+
}
|
|
17407
|
+
setHighlightedIndex((currentIndex) => {
|
|
17408
|
+
if (currentIndex >= 0 && currentIndex < visibleOptions.length && !visibleOptions[currentIndex]?.isDisabled) {
|
|
17409
|
+
return currentIndex;
|
|
17410
|
+
}
|
|
17411
|
+
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledIndex(visibleOptions);
|
|
17412
|
+
});
|
|
17413
|
+
}, [open, selectedIndex, visibleOptions]);
|
|
17414
|
+
function openSelect() {
|
|
17415
|
+
if (isBlocked) return;
|
|
17416
|
+
setSelectOpen(true);
|
|
17417
|
+
}
|
|
17418
|
+
function closeSelect() {
|
|
17419
|
+
setSelectOpen(false, { restoreFocus: true });
|
|
17420
|
+
}
|
|
15435
17421
|
function handleSearchChange(nextValue) {
|
|
15436
17422
|
if (!onSearchChange) {
|
|
15437
17423
|
setInternalSearchValue(nextValue);
|
|
@@ -15481,7 +17467,7 @@ var SearchableSelectInternal = ({
|
|
|
15481
17467
|
}
|
|
15482
17468
|
}
|
|
15483
17469
|
}
|
|
15484
|
-
const content = /* @__PURE__ */ (0,
|
|
17470
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
15485
17471
|
SearchableSelectContent,
|
|
15486
17472
|
{
|
|
15487
17473
|
inputId: searchInputId,
|
|
@@ -15508,10 +17494,10 @@ var SearchableSelectInternal = ({
|
|
|
15508
17494
|
onOptionHover: setHighlightedIndex
|
|
15509
17495
|
}
|
|
15510
17496
|
);
|
|
15511
|
-
|
|
15512
|
-
return /* @__PURE__ */ (0,
|
|
15513
|
-
name && /* @__PURE__ */ (0,
|
|
15514
|
-
/* @__PURE__ */ (0,
|
|
17497
|
+
React69.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
17498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
17499
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
17500
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
15515
17501
|
FieldTrigger,
|
|
15516
17502
|
{
|
|
15517
17503
|
id: `${reactId}-trigger`,
|
|
@@ -15546,8 +17532,8 @@ var SearchableSelectInternal = ({
|
|
|
15546
17532
|
},
|
|
15547
17533
|
onKeyDown: handleTriggerKeyDown,
|
|
15548
17534
|
onBlur,
|
|
15549
|
-
trailingAdornment: /* @__PURE__ */ (0,
|
|
15550
|
-
|
|
17535
|
+
trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
17536
|
+
import_lucide_react54.ChevronDown,
|
|
15551
17537
|
{
|
|
15552
17538
|
className: cn(
|
|
15553
17539
|
"h-6 w-6 text-[#1F1F1B] transition-transform",
|
|
@@ -15557,7 +17543,7 @@ var SearchableSelectInternal = ({
|
|
|
15557
17543
|
)
|
|
15558
17544
|
}
|
|
15559
17545
|
),
|
|
15560
|
-
isMobile2 ? /* @__PURE__ */ (0,
|
|
17546
|
+
isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
15561
17547
|
Drawer,
|
|
15562
17548
|
{
|
|
15563
17549
|
open,
|
|
@@ -15569,13 +17555,13 @@ var SearchableSelectInternal = ({
|
|
|
15569
17555
|
}
|
|
15570
17556
|
closeSelect();
|
|
15571
17557
|
},
|
|
15572
|
-
children: /* @__PURE__ */ (0,
|
|
15573
|
-
/* @__PURE__ */ (0,
|
|
15574
|
-
/* @__PURE__ */ (0,
|
|
15575
|
-
/* @__PURE__ */ (0,
|
|
17558
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
17559
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
17560
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)(DrawerDescription, { className: "sr-only", children: label }),
|
|
17561
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
15576
17562
|
] })
|
|
15577
17563
|
}
|
|
15578
|
-
) : open ? /* @__PURE__ */ (0,
|
|
17564
|
+
) : open ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
15579
17565
|
"div",
|
|
15580
17566
|
{
|
|
15581
17567
|
className: cn(
|
|
@@ -15587,7 +17573,7 @@ var SearchableSelectInternal = ({
|
|
|
15587
17573
|
) : null
|
|
15588
17574
|
] });
|
|
15589
17575
|
};
|
|
15590
|
-
var SearchableSelect =
|
|
17576
|
+
var SearchableSelect = React69.forwardRef(
|
|
15591
17577
|
SearchableSelectInternal
|
|
15592
17578
|
);
|
|
15593
17579
|
function SearchableSelectContent({
|
|
@@ -15614,9 +17600,9 @@ function SearchableSelectContent({
|
|
|
15614
17600
|
onOptionClick,
|
|
15615
17601
|
onOptionHover
|
|
15616
17602
|
}) {
|
|
15617
|
-
const listRef =
|
|
15618
|
-
const lastLoadMoreOptionsLengthRef =
|
|
15619
|
-
const previousHighlightedIndexRef =
|
|
17603
|
+
const listRef = React69.useRef(null);
|
|
17604
|
+
const lastLoadMoreOptionsLengthRef = React69.useRef(null);
|
|
17605
|
+
const previousHighlightedIndexRef = React69.useRef(highlightedIndex);
|
|
15620
17606
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
15621
17607
|
const virtualizer = (0, import_react_virtual3.useVirtualizer)({
|
|
15622
17608
|
count: rowCount,
|
|
@@ -15627,7 +17613,7 @@ function SearchableSelectContent({
|
|
|
15627
17613
|
const virtualItems = virtualizer.getVirtualItems();
|
|
15628
17614
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
15629
17615
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
15630
|
-
|
|
17616
|
+
React69.useEffect(() => {
|
|
15631
17617
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
15632
17618
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
15633
17619
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -15635,23 +17621,23 @@ function SearchableSelectContent({
|
|
|
15635
17621
|
onLoadMore?.();
|
|
15636
17622
|
}
|
|
15637
17623
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
15638
|
-
|
|
17624
|
+
React69.useEffect(() => {
|
|
15639
17625
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
15640
17626
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
15641
17627
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
15642
17628
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
15643
17629
|
}
|
|
15644
17630
|
}, [highlightedIndex, virtualizer]);
|
|
15645
|
-
return /* @__PURE__ */ (0,
|
|
15646
|
-
/* @__PURE__ */ (0,
|
|
15647
|
-
/* @__PURE__ */ (0,
|
|
15648
|
-
|
|
17631
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("div", { className: "p-2", children: [
|
|
17632
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("div", { className: "relative mb-2", children: [
|
|
17633
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
17634
|
+
import_lucide_react54.Search,
|
|
15649
17635
|
{
|
|
15650
17636
|
"aria-hidden": "true",
|
|
15651
17637
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
15652
17638
|
}
|
|
15653
17639
|
),
|
|
15654
|
-
/* @__PURE__ */ (0,
|
|
17640
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
15655
17641
|
"input",
|
|
15656
17642
|
{
|
|
15657
17643
|
id: inputId,
|
|
@@ -15670,7 +17656,7 @@ function SearchableSelectContent({
|
|
|
15670
17656
|
}
|
|
15671
17657
|
)
|
|
15672
17658
|
] }),
|
|
15673
|
-
loading && options.length === 0 ? /* @__PURE__ */ (0,
|
|
17659
|
+
loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
15674
17660
|
"div",
|
|
15675
17661
|
{
|
|
15676
17662
|
id: listboxId,
|
|
@@ -15679,7 +17665,7 @@ function SearchableSelectContent({
|
|
|
15679
17665
|
"aria-labelledby": labelId,
|
|
15680
17666
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
15681
17667
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
15682
|
-
children: /* @__PURE__ */ (0,
|
|
17668
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
15683
17669
|
"div",
|
|
15684
17670
|
{
|
|
15685
17671
|
className: "relative w-full",
|
|
@@ -15687,7 +17673,7 @@ function SearchableSelectContent({
|
|
|
15687
17673
|
children: virtualItems.map((virtualItem) => {
|
|
15688
17674
|
const option = options[virtualItem.index];
|
|
15689
17675
|
if (!option) {
|
|
15690
|
-
return /* @__PURE__ */ (0,
|
|
17676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
15691
17677
|
"div",
|
|
15692
17678
|
{
|
|
15693
17679
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -15702,7 +17688,7 @@ function SearchableSelectContent({
|
|
|
15702
17688
|
}
|
|
15703
17689
|
const isSelected = value?.value === option.value;
|
|
15704
17690
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
15705
|
-
return /* @__PURE__ */ (0,
|
|
17691
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
|
|
15706
17692
|
"button",
|
|
15707
17693
|
{
|
|
15708
17694
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -15724,7 +17710,7 @@ function SearchableSelectContent({
|
|
|
15724
17710
|
height: `${virtualItem.size}px`,
|
|
15725
17711
|
transform: `translateY(${virtualItem.start}px)`
|
|
15726
17712
|
},
|
|
15727
|
-
children: /* @__PURE__ */ (0,
|
|
17713
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("span", { className: "truncate text-center", children: String(option.label) })
|
|
15728
17714
|
},
|
|
15729
17715
|
`${String(option.value)}-${virtualItem.index}`
|
|
15730
17716
|
);
|
|
@@ -15810,14 +17796,14 @@ function getErrorMessage(error) {
|
|
|
15810
17796
|
|
|
15811
17797
|
// src/lib/toastResponseError.tsx
|
|
15812
17798
|
var import_i18next = __toESM(require("i18next"), 1);
|
|
15813
|
-
var
|
|
17799
|
+
var import_jsx_runtime172 = require("react/jsx-runtime");
|
|
15814
17800
|
function addSupportEmailToMessage(message, prefixText) {
|
|
15815
17801
|
if (typeof message !== "string") {
|
|
15816
17802
|
return message;
|
|
15817
17803
|
}
|
|
15818
17804
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
15819
|
-
return /* @__PURE__ */ (0,
|
|
15820
|
-
/* @__PURE__ */ (0,
|
|
17805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { children: [
|
|
17806
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { children: builtMessage }),
|
|
15821
17807
|
import_i18next.default.t("reach_us_at_email")
|
|
15822
17808
|
] });
|
|
15823
17809
|
}
|
|
@@ -15878,12 +17864,19 @@ function toastResponseError(error, options = {}) {
|
|
|
15878
17864
|
CopyLinkButton,
|
|
15879
17865
|
CopyString,
|
|
15880
17866
|
CustomCheckboxDropdownGroup,
|
|
17867
|
+
DEFAULT_DISPLAY_FORMAT,
|
|
15881
17868
|
DEVICE_BREAKPOINTS,
|
|
15882
17869
|
DashboardCreatableMultiSelect,
|
|
17870
|
+
DashboardDateRangePicker,
|
|
17871
|
+
DashboardDatepicker,
|
|
17872
|
+
DashboardFileInput,
|
|
15883
17873
|
DashboardInfiniteScrollSelect,
|
|
15884
17874
|
DashboardInput,
|
|
15885
17875
|
DashboardMultiSelect,
|
|
15886
17876
|
DashboardSelect,
|
|
17877
|
+
DashboardSelectIconsBox,
|
|
17878
|
+
DashboardTextarea,
|
|
17879
|
+
DashboardTimePicker,
|
|
15887
17880
|
DataTable,
|
|
15888
17881
|
DatePicker,
|
|
15889
17882
|
DateTableFilter,
|
|
@@ -16119,13 +18112,17 @@ function toastResponseError(error, options = {}) {
|
|
|
16119
18112
|
calendarClassNames,
|
|
16120
18113
|
cn,
|
|
16121
18114
|
copyToClipboard,
|
|
18115
|
+
createDisabledMatchers,
|
|
16122
18116
|
emptyMediaVariants,
|
|
18117
|
+
formatDate,
|
|
16123
18118
|
getErrorMessage,
|
|
16124
18119
|
getScrollableAreaState,
|
|
16125
18120
|
getSidebarState,
|
|
16126
18121
|
inputVariants,
|
|
18122
|
+
isDayBlocked,
|
|
16127
18123
|
isNumeric,
|
|
16128
18124
|
labelVariants,
|
|
18125
|
+
parseDate,
|
|
16129
18126
|
registerUiKitI18n,
|
|
16130
18127
|
scrollToTop,
|
|
16131
18128
|
sectionTagVariants,
|
|
@@ -16176,6 +18173,7 @@ function toastResponseError(error, options = {}) {
|
|
|
16176
18173
|
useTimeout,
|
|
16177
18174
|
useTimeoutRef,
|
|
16178
18175
|
useTimer,
|
|
16179
|
-
useUpdateToast
|
|
18176
|
+
useUpdateToast,
|
|
18177
|
+
useValidateDates
|
|
16180
18178
|
});
|
|
16181
18179
|
//# sourceMappingURL=index.cjs.map
|