@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.js
CHANGED
|
@@ -490,7 +490,7 @@ function ErrorMessage({ className, children, disabled }) {
|
|
|
490
490
|
}
|
|
491
491
|
|
|
492
492
|
// src/switch/Switch.tsx
|
|
493
|
-
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
493
|
+
import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
494
494
|
var switchVariants = cva4(
|
|
495
495
|
[
|
|
496
496
|
"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
|
|
@@ -530,7 +530,19 @@ var switchThumbVariants = cva4(
|
|
|
530
530
|
}
|
|
531
531
|
);
|
|
532
532
|
var Switch = React5.forwardRef(
|
|
533
|
-
({
|
|
533
|
+
({
|
|
534
|
+
className,
|
|
535
|
+
size,
|
|
536
|
+
readOnly,
|
|
537
|
+
loading,
|
|
538
|
+
onChange,
|
|
539
|
+
value,
|
|
540
|
+
id,
|
|
541
|
+
label,
|
|
542
|
+
error,
|
|
543
|
+
wrapperClassName,
|
|
544
|
+
...props
|
|
545
|
+
}, ref) => {
|
|
534
546
|
const generatedId = React5.useId();
|
|
535
547
|
const fieldId = id || generatedId;
|
|
536
548
|
const switchElement = /* @__PURE__ */ jsx9(
|
|
@@ -552,8 +564,8 @@ var Switch = React5.forwardRef(
|
|
|
552
564
|
if (!label && !error) {
|
|
553
565
|
return switchElement;
|
|
554
566
|
}
|
|
555
|
-
return /* @__PURE__ */ jsxs6(
|
|
556
|
-
/* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
|
|
567
|
+
return /* @__PURE__ */ jsxs6(Fragment2, { children: [
|
|
568
|
+
/* @__PURE__ */ jsxs6("div", { className: cn("flex items-center gap-3", wrapperClassName), children: [
|
|
557
569
|
switchElement,
|
|
558
570
|
label && /* @__PURE__ */ jsx9(Label, { htmlFor: fieldId, className: "cursor-pointer text-base font-medium", children: label })
|
|
559
571
|
] }),
|
|
@@ -685,7 +697,7 @@ function Breadcrumb({
|
|
|
685
697
|
// src/breadcrumbs/Breadcrumbs.tsx
|
|
686
698
|
import {
|
|
687
699
|
Children,
|
|
688
|
-
Fragment as
|
|
700
|
+
Fragment as Fragment3,
|
|
689
701
|
cloneElement,
|
|
690
702
|
isValidElement
|
|
691
703
|
} from "react";
|
|
@@ -701,7 +713,7 @@ function Breadcrumbs({ className, children }) {
|
|
|
701
713
|
return /* @__PURE__ */ jsx12("nav", { className: cn("breadcrumbs", className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx12("ul", { className: "m-0 flex list-none flex-wrap items-center gap-3 p-0", children: items.map((child, index) => {
|
|
702
714
|
const isLastVisibleItem = items.length - 1 === index;
|
|
703
715
|
const childWithProps = isValidElement(child) ? cloneElement(child, { current: isLastVisibleItem }) : child;
|
|
704
|
-
return /* @__PURE__ */ jsxs9(
|
|
716
|
+
return /* @__PURE__ */ jsxs9(Fragment3, { children: [
|
|
705
717
|
index > 0 ? /* @__PURE__ */ jsx12(
|
|
706
718
|
ChevronRight,
|
|
707
719
|
{
|
|
@@ -833,7 +845,7 @@ var buttonVariants = cva5(
|
|
|
833
845
|
);
|
|
834
846
|
|
|
835
847
|
// src/button/Button.tsx
|
|
836
|
-
import { Fragment as
|
|
848
|
+
import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
837
849
|
var Button = React6.forwardRef(
|
|
838
850
|
({
|
|
839
851
|
className,
|
|
@@ -873,7 +885,7 @@ var Button = React6.forwardRef(
|
|
|
873
885
|
disabled: isDisabled,
|
|
874
886
|
className: classNames,
|
|
875
887
|
...props,
|
|
876
|
-
children: loading ? /* @__PURE__ */ jsxs10(
|
|
888
|
+
children: loading ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
|
|
877
889
|
/* @__PURE__ */ jsx13(Spinner, {}),
|
|
878
890
|
showLoadingLabel ? /* @__PURE__ */ jsx13("span", { children: loadingText || t("please_wait") }) : null
|
|
879
891
|
] }) : children
|
|
@@ -1467,7 +1479,7 @@ function ScrollBar({
|
|
|
1467
1479
|
}
|
|
1468
1480
|
|
|
1469
1481
|
// src/checkbox/CheckboxGroup.tsx
|
|
1470
|
-
import { Fragment as
|
|
1482
|
+
import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1471
1483
|
var ScrollAreaWrapper = ({
|
|
1472
1484
|
children,
|
|
1473
1485
|
scrollable,
|
|
@@ -1522,7 +1534,7 @@ var CheckboxGroup = React10.forwardRef(
|
|
|
1522
1534
|
);
|
|
1523
1535
|
const isAllSelected = selectedAvailableValues.length > 0 && selectedAvailableValues.length === availableOptions.length;
|
|
1524
1536
|
return /* @__PURE__ */ jsxs15("div", { ref, className: cn("space-y-2", className), ...props, children: [
|
|
1525
|
-
showSelectAll && /* @__PURE__ */ jsxs15(
|
|
1537
|
+
showSelectAll && /* @__PURE__ */ jsxs15(Fragment5, { children: [
|
|
1526
1538
|
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
|
|
1527
1539
|
/* @__PURE__ */ jsx24(
|
|
1528
1540
|
BaseCheckbox,
|
|
@@ -3784,10 +3796,10 @@ var CheckboxDropdownGroup = forwardRef18(
|
|
|
3784
3796
|
CheckboxDropdownGroup.displayName = "CheckboxDropdownGroup";
|
|
3785
3797
|
|
|
3786
3798
|
// src/dropdown-menu/CheckboxDropdownMultiGroup.tsx
|
|
3787
|
-
import { forwardRef as forwardRef19, Fragment as
|
|
3799
|
+
import { forwardRef as forwardRef19, Fragment as Fragment6 } from "react";
|
|
3788
3800
|
import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3789
3801
|
var CheckboxDropdownMultiGroup = forwardRef19(({ groups, className = "", keepOpenOnSelect }, ref) => {
|
|
3790
|
-
return /* @__PURE__ */ jsx41("div", { ref, className: cn("space-y-1", className), children: groups.map((group, index) => /* @__PURE__ */ jsxs29(
|
|
3802
|
+
return /* @__PURE__ */ jsx41("div", { ref, className: cn("space-y-1", className), children: groups.map((group, index) => /* @__PURE__ */ jsxs29(Fragment6, { children: [
|
|
3791
3803
|
/* @__PURE__ */ jsxs29(DropdownMenuGroup, { children: [
|
|
3792
3804
|
/* @__PURE__ */ jsx41(DropdownMenuLabel, { children: group.label }),
|
|
3793
3805
|
group.multiple ? /* @__PURE__ */ jsx41(
|
|
@@ -4443,7 +4455,7 @@ FramedIcon.displayName = "FramedIcon";
|
|
|
4443
4455
|
|
|
4444
4456
|
// src/help-tooltip/HelpTooltip.tsx
|
|
4445
4457
|
import { CircleQuestionMark } from "lucide-react";
|
|
4446
|
-
import { Fragment as
|
|
4458
|
+
import { Fragment as Fragment7, jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
4447
4459
|
function HelpTooltip({
|
|
4448
4460
|
content,
|
|
4449
4461
|
side,
|
|
@@ -4462,7 +4474,7 @@ function HelpTooltip({
|
|
|
4462
4474
|
className
|
|
4463
4475
|
);
|
|
4464
4476
|
const triggerStyle = { width: size, height: size };
|
|
4465
|
-
const triggerContent = /* @__PURE__ */ jsxs36(
|
|
4477
|
+
const triggerContent = /* @__PURE__ */ jsxs36(Fragment7, { children: [
|
|
4466
4478
|
/* @__PURE__ */ jsx60(CircleQuestionMark, { "aria-hidden": "true", style: { width: size, height: size } }),
|
|
4467
4479
|
/* @__PURE__ */ jsx60("span", { className: "absolute -left-0.5 -top-0.5 h-5 w-5" })
|
|
4468
4480
|
] });
|
|
@@ -5170,7 +5182,35 @@ var translation_default2 = {
|
|
|
5170
5182
|
would_you_like_to_save_them: "Would you like to save them?",
|
|
5171
5183
|
save: "Save",
|
|
5172
5184
|
dont_save: "Don't save",
|
|
5173
|
-
copied_exclamation: "Copied!"
|
|
5185
|
+
copied_exclamation: "Copied!",
|
|
5186
|
+
search_placeholder: "Search\u2026",
|
|
5187
|
+
loading_more: "Loading\u2026",
|
|
5188
|
+
no_options: "No options",
|
|
5189
|
+
select_option: "Select option",
|
|
5190
|
+
clear_all: "Clear all",
|
|
5191
|
+
remove_item: "Remove {{label}}",
|
|
5192
|
+
upload_file: "Upload file",
|
|
5193
|
+
download_attachment: "Download attachment",
|
|
5194
|
+
remove_file: "Remove file",
|
|
5195
|
+
open_calendar: "Open calendar",
|
|
5196
|
+
clear_dates: "Clear dates",
|
|
5197
|
+
select_dates: "Select dates",
|
|
5198
|
+
pick_date_range: "Pick a date range",
|
|
5199
|
+
from: "From",
|
|
5200
|
+
to: "To",
|
|
5201
|
+
pick_month: "Pick a month",
|
|
5202
|
+
pick_date: "Pick a date",
|
|
5203
|
+
month: "Month",
|
|
5204
|
+
day: "Day",
|
|
5205
|
+
year: "Year",
|
|
5206
|
+
done: "Done",
|
|
5207
|
+
wrong_period_of_dates: "Selected period is invalid",
|
|
5208
|
+
date_range_max_days_error_one: "Range cannot exceed {{count}} day",
|
|
5209
|
+
date_range_max_days_error_other: "Range cannot exceed {{count}} days",
|
|
5210
|
+
date_range_min_days_error_one: "Range must be at least {{count}} day",
|
|
5211
|
+
date_range_min_days_error_other: "Range must be at least {{count}} days",
|
|
5212
|
+
past_dates: "Date cannot be before {{minDate}}",
|
|
5213
|
+
future_dates: "Date cannot be after {{maxDate}}"
|
|
5174
5214
|
};
|
|
5175
5215
|
|
|
5176
5216
|
// src/locales/es/translation.json
|
|
@@ -6676,7 +6716,7 @@ function useRadioOptions({ options, defaultValue, onChange }) {
|
|
|
6676
6716
|
}
|
|
6677
6717
|
|
|
6678
6718
|
// src/radio/Radio.tsx
|
|
6679
|
-
import { Fragment as
|
|
6719
|
+
import { Fragment as Fragment8, jsx as jsx84, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
6680
6720
|
var Radio = forwardRef36(
|
|
6681
6721
|
({ options, value, onChange, error, className = "", disabled = false, renderOption }, ref) => {
|
|
6682
6722
|
const { selectedValue, handleValueChange } = useRadioOptions({
|
|
@@ -6690,7 +6730,7 @@ var Radio = forwardRef36(
|
|
|
6690
6730
|
}
|
|
6691
6731
|
return option.value === selectedValue;
|
|
6692
6732
|
};
|
|
6693
|
-
return /* @__PURE__ */ jsxs51(
|
|
6733
|
+
return /* @__PURE__ */ jsxs51(Fragment8, { children: [
|
|
6694
6734
|
/* @__PURE__ */ jsx84(
|
|
6695
6735
|
RadioGroup2,
|
|
6696
6736
|
{
|
|
@@ -6707,7 +6747,7 @@ var Radio = forwardRef36(
|
|
|
6707
6747
|
"flex cursor-pointer items-center gap-2",
|
|
6708
6748
|
(disabled || option.disabled) && "cursor-default opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
6709
6749
|
),
|
|
6710
|
-
children: renderOption ? renderOption({ option, isSelected: getIsSelected(option) }) : /* @__PURE__ */ jsxs51(
|
|
6750
|
+
children: renderOption ? renderOption({ option, isSelected: getIsSelected(option) }) : /* @__PURE__ */ jsxs51(Fragment8, { children: [
|
|
6711
6751
|
/* @__PURE__ */ jsx84(
|
|
6712
6752
|
RadioGroupItem,
|
|
6713
6753
|
{
|
|
@@ -6773,7 +6813,7 @@ function RadioWithBorder({ ...props }) {
|
|
|
6773
6813
|
|
|
6774
6814
|
// src/radio-cards-group/RadioCardsGroup.tsx
|
|
6775
6815
|
import { forwardRef as forwardRef37, memo as memo4, useEffect as useEffect25 } from "react";
|
|
6776
|
-
import { Fragment as
|
|
6816
|
+
import { Fragment as Fragment9, jsx as jsx86, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
6777
6817
|
var isValueSelectOption = (value) => {
|
|
6778
6818
|
return value?.value !== void 0;
|
|
6779
6819
|
};
|
|
@@ -6805,7 +6845,7 @@ var RadioCardsGroup = forwardRef37(
|
|
|
6805
6845
|
[defaultValue, onChange, options, value]
|
|
6806
6846
|
);
|
|
6807
6847
|
const currentValue = isValueSelectOption(value) ? value.value : value;
|
|
6808
|
-
return /* @__PURE__ */ jsxs53(
|
|
6848
|
+
return /* @__PURE__ */ jsxs53(Fragment9, { children: [
|
|
6809
6849
|
/* @__PURE__ */ jsx86(
|
|
6810
6850
|
Radio,
|
|
6811
6851
|
{
|
|
@@ -8154,7 +8194,7 @@ var VALUE_PART = 1;
|
|
|
8154
8194
|
var getSidebarState = (stateName) => document.cookie.split("; ").find((row) => row.startsWith(`${stateName}=`))?.split("=")[VALUE_PART] === "true";
|
|
8155
8195
|
|
|
8156
8196
|
// src/signature-canvas/SignatureCanvas.tsx
|
|
8157
|
-
import { forwardRef as forwardRef40, Fragment as
|
|
8197
|
+
import { forwardRef as forwardRef40, Fragment as Fragment10, useEffect as useEffect27, useRef as useRef18 } from "react";
|
|
8158
8198
|
import { useTranslation as useTranslation16 } from "react-i18next";
|
|
8159
8199
|
import ReactSignatureCanvas from "react-signature-pad-wrapper";
|
|
8160
8200
|
|
|
@@ -8183,7 +8223,7 @@ var SIGNATURE_PROPS = {
|
|
|
8183
8223
|
dotSize: 1
|
|
8184
8224
|
};
|
|
8185
8225
|
function breakIntoLines(text = "") {
|
|
8186
|
-
return text.split("\n").map((line, index) => /* @__PURE__ */ jsxs63(
|
|
8226
|
+
return text.split("\n").map((line, index) => /* @__PURE__ */ jsxs63(Fragment10, { children: [
|
|
8187
8227
|
line,
|
|
8188
8228
|
/* @__PURE__ */ jsx103("br", {})
|
|
8189
8229
|
] }, index));
|
|
@@ -9777,7 +9817,7 @@ var Textarea = forwardRef53(
|
|
|
9777
9817
|
Textarea.displayName = "Textarea";
|
|
9778
9818
|
|
|
9779
9819
|
// src/three-dots-loader/ThreeDotsLoader.tsx
|
|
9780
|
-
import { Fragment as
|
|
9820
|
+
import { Fragment as Fragment11, jsx as jsx129, jsxs as jsxs77 } from "react/jsx-runtime";
|
|
9781
9821
|
function Dots({
|
|
9782
9822
|
height,
|
|
9783
9823
|
width,
|
|
@@ -9833,10 +9873,10 @@ function ThreeDotsLoader({
|
|
|
9833
9873
|
className
|
|
9834
9874
|
),
|
|
9835
9875
|
role: "progressbar",
|
|
9836
|
-
children: labelPlacement === "right" ? /* @__PURE__ */ jsxs77(
|
|
9876
|
+
children: labelPlacement === "right" ? /* @__PURE__ */ jsxs77(Fragment11, { children: [
|
|
9837
9877
|
dots,
|
|
9838
9878
|
/* @__PURE__ */ jsx129("div", { children: label })
|
|
9839
|
-
] }) : /* @__PURE__ */ jsxs77(
|
|
9879
|
+
] }) : /* @__PURE__ */ jsxs77(Fragment11, { children: [
|
|
9840
9880
|
/* @__PURE__ */ jsx129("div", { children: label }),
|
|
9841
9881
|
dots
|
|
9842
9882
|
] })
|
|
@@ -10065,7 +10105,7 @@ import {
|
|
|
10065
10105
|
VolumeX,
|
|
10066
10106
|
X as X8
|
|
10067
10107
|
} from "lucide-react";
|
|
10068
|
-
import { Fragment as
|
|
10108
|
+
import { Fragment as Fragment12, jsx as jsx133, jsxs as jsxs81 } from "react/jsx-runtime";
|
|
10069
10109
|
function VideoPlayer({
|
|
10070
10110
|
src,
|
|
10071
10111
|
poster,
|
|
@@ -10261,7 +10301,7 @@ function VideoPlayer({
|
|
|
10261
10301
|
onLoad: () => setIsLoading(false),
|
|
10262
10302
|
title: title || "Vimeo video player"
|
|
10263
10303
|
}
|
|
10264
|
-
) : /* @__PURE__ */ jsxs81(
|
|
10304
|
+
) : /* @__PURE__ */ jsxs81(Fragment12, { children: [
|
|
10265
10305
|
/* @__PURE__ */ jsxs81(
|
|
10266
10306
|
"video",
|
|
10267
10307
|
{
|
|
@@ -10378,7 +10418,7 @@ function isDOMException(error) {
|
|
|
10378
10418
|
}
|
|
10379
10419
|
|
|
10380
10420
|
// src/webcam/Webcam.tsx
|
|
10381
|
-
import { Fragment as
|
|
10421
|
+
import { Fragment as Fragment13, jsx as jsx134, jsxs as jsxs82 } from "react/jsx-runtime";
|
|
10382
10422
|
var SCREENSHOT_FORMAT = "image/jpeg";
|
|
10383
10423
|
var MEDIA_CONSTRAINTS = {
|
|
10384
10424
|
audio: false,
|
|
@@ -10469,7 +10509,7 @@ var Webcam = forwardRef54(
|
|
|
10469
10509
|
},
|
|
10470
10510
|
[onUserMediaError, onException]
|
|
10471
10511
|
);
|
|
10472
|
-
return /* @__PURE__ */ jsxs82(
|
|
10512
|
+
return /* @__PURE__ */ jsxs82(Fragment13, { children: [
|
|
10473
10513
|
/* @__PURE__ */ jsx134(
|
|
10474
10514
|
"div",
|
|
10475
10515
|
{
|
|
@@ -11401,7 +11441,7 @@ function FieldErrorMessage({
|
|
|
11401
11441
|
}
|
|
11402
11442
|
|
|
11403
11443
|
// src/field-trigger/FieldTrigger.tsx
|
|
11404
|
-
import { Fragment as
|
|
11444
|
+
import { Fragment as Fragment14, jsx as jsx140, jsxs as jsxs87 } from "react/jsx-runtime";
|
|
11405
11445
|
var FieldTrigger = React43.forwardRef(
|
|
11406
11446
|
({
|
|
11407
11447
|
as = "button",
|
|
@@ -11480,7 +11520,7 @@ var FieldTrigger = React43.forwardRef(
|
|
|
11480
11520
|
disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
|
|
11481
11521
|
className
|
|
11482
11522
|
);
|
|
11483
|
-
const sharedContent = /* @__PURE__ */ jsxs87(
|
|
11523
|
+
const sharedContent = /* @__PURE__ */ jsxs87(Fragment14, { children: [
|
|
11484
11524
|
/* @__PURE__ */ jsxs87(
|
|
11485
11525
|
"span",
|
|
11486
11526
|
{
|
|
@@ -13309,9 +13349,10 @@ AirbnbSearchInput.displayName = "SearchInput";
|
|
|
13309
13349
|
// src/dashboard/input/Input.tsx
|
|
13310
13350
|
import * as React53 from "react";
|
|
13311
13351
|
import { Eye, Minus as Minus3, Plus as Plus2, X as X10 } from "lucide-react";
|
|
13352
|
+
import { useTranslation as useTranslation26 } from "react-i18next";
|
|
13312
13353
|
|
|
13313
13354
|
// src/dashboard/_fieldset/Fieldset.tsx
|
|
13314
|
-
import { Fragment as
|
|
13355
|
+
import { Fragment as Fragment15, jsx as jsx152, jsxs as jsxs96 } from "react/jsx-runtime";
|
|
13315
13356
|
function Fieldset({
|
|
13316
13357
|
isActivated,
|
|
13317
13358
|
isFocused,
|
|
@@ -13331,7 +13372,7 @@ function Fieldset({
|
|
|
13331
13372
|
}) {
|
|
13332
13373
|
const showLegendText = Boolean(legend || typeof label === "string");
|
|
13333
13374
|
const raised = !isEmpty || isFocused;
|
|
13334
|
-
return /* @__PURE__ */ jsxs96(
|
|
13375
|
+
return /* @__PURE__ */ jsxs96(Fragment15, { children: [
|
|
13335
13376
|
/* @__PURE__ */ jsxs96(
|
|
13336
13377
|
"div",
|
|
13337
13378
|
{
|
|
@@ -13456,6 +13497,7 @@ var DashboardInput = React53.forwardRef(
|
|
|
13456
13497
|
const generatedId = React53.useId();
|
|
13457
13498
|
const inputId = id ?? name ?? generatedId;
|
|
13458
13499
|
const errorId = `${inputId}-error`;
|
|
13500
|
+
const { t } = useTranslation26();
|
|
13459
13501
|
const isEmpty = checkIfEmpty({ empty, value, defaultValue });
|
|
13460
13502
|
const [inputType, setInputType] = React53.useState(type);
|
|
13461
13503
|
const [isPasswordRevealed, setIsPasswordRevealed] = React53.useState(false);
|
|
@@ -13647,7 +13689,7 @@ var DashboardInput = React53.forwardRef(
|
|
|
13647
13689
|
{
|
|
13648
13690
|
"data-testid": `${name}-optional`,
|
|
13649
13691
|
className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]",
|
|
13650
|
-
children: typeof optional === "string" ? optional : "optional"
|
|
13692
|
+
children: typeof optional === "string" ? optional : t("optional")
|
|
13651
13693
|
}
|
|
13652
13694
|
),
|
|
13653
13695
|
!errorMessage && helperText && /* @__PURE__ */ jsx153("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
@@ -13671,6 +13713,10 @@ DashboardInput.displayName = "DashboardInput";
|
|
|
13671
13713
|
// src/dashboard/select/Select.tsx
|
|
13672
13714
|
import * as React55 from "react";
|
|
13673
13715
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
13716
|
+
import { useTranslation as useTranslation29 } from "react-i18next";
|
|
13717
|
+
|
|
13718
|
+
// src/dashboard/_select-internals/SelectMenu.tsx
|
|
13719
|
+
import { useTranslation as useTranslation27 } from "react-i18next";
|
|
13674
13720
|
|
|
13675
13721
|
// src/dashboard/_select-internals/utils.ts
|
|
13676
13722
|
function getOptionIndex2(options, option) {
|
|
@@ -13723,7 +13769,8 @@ function SelectMenu({
|
|
|
13723
13769
|
emptyContent,
|
|
13724
13770
|
footer
|
|
13725
13771
|
}) {
|
|
13726
|
-
const
|
|
13772
|
+
const { t } = useTranslation27();
|
|
13773
|
+
const emptyMessage = noOptionsMessage?.() ?? t("no_options");
|
|
13727
13774
|
const hasOptions = options.length > 0;
|
|
13728
13775
|
return /* @__PURE__ */ jsxs98(
|
|
13729
13776
|
"div",
|
|
@@ -13742,8 +13789,7 @@ function SelectMenu({
|
|
|
13742
13789
|
menuClassName
|
|
13743
13790
|
),
|
|
13744
13791
|
children: [
|
|
13745
|
-
!hasOptions &&
|
|
13746
|
-
!hasOptions && !emptyMessage && emptyContent,
|
|
13792
|
+
!hasOptions && (emptyContent ?? /* @__PURE__ */ jsx154("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage })),
|
|
13747
13793
|
options.map((option, index) => {
|
|
13748
13794
|
const isSelected = isOptionSelected(option, selectedValue, selectedValues);
|
|
13749
13795
|
const isHighlighted = index === highlightedIndex;
|
|
@@ -13786,18 +13832,25 @@ function SelectMenu({
|
|
|
13786
13832
|
}
|
|
13787
13833
|
|
|
13788
13834
|
// src/dashboard/_select-internals/SelectMenuPanel.tsx
|
|
13835
|
+
import { useTranslation as useTranslation28 } from "react-i18next";
|
|
13789
13836
|
import { jsx as jsx155, jsxs as jsxs99 } from "react/jsx-runtime";
|
|
13790
13837
|
function SelectMenuPanel({
|
|
13791
13838
|
isOpen,
|
|
13792
13839
|
isMobile: isMobile2,
|
|
13793
13840
|
onClose,
|
|
13794
13841
|
title,
|
|
13842
|
+
description,
|
|
13795
13843
|
className,
|
|
13796
13844
|
drawerClassName,
|
|
13845
|
+
drawerContentClassName,
|
|
13797
13846
|
children
|
|
13798
13847
|
}) {
|
|
13848
|
+
const { t } = useTranslation28();
|
|
13799
13849
|
if (!isOpen) return null;
|
|
13800
13850
|
if (isMobile2) {
|
|
13851
|
+
const fallbackTitle = t("select_option");
|
|
13852
|
+
const titleText = typeof title === "string" || typeof title === "number" ? String(title) : fallbackTitle;
|
|
13853
|
+
const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : titleText;
|
|
13801
13854
|
return /* @__PURE__ */ jsx155(
|
|
13802
13855
|
Drawer,
|
|
13803
13856
|
{
|
|
@@ -13809,10 +13862,21 @@ function SelectMenuPanel({
|
|
|
13809
13862
|
DrawerContent,
|
|
13810
13863
|
{
|
|
13811
13864
|
onClose,
|
|
13865
|
+
lockScroll: false,
|
|
13812
13866
|
className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
|
|
13813
13867
|
children: [
|
|
13814
|
-
|
|
13815
|
-
/* @__PURE__ */ jsx155(
|
|
13868
|
+
/* @__PURE__ */ jsx155(DrawerTitle, { className: "sr-only", children: titleText }),
|
|
13869
|
+
/* @__PURE__ */ jsx155(DrawerDescription, { className: "sr-only", children: descriptionText }),
|
|
13870
|
+
/* @__PURE__ */ jsx155(
|
|
13871
|
+
"div",
|
|
13872
|
+
{
|
|
13873
|
+
className: cn(
|
|
13874
|
+
"flex min-h-0 flex-1 flex-col px-1 pb-4 pt-1",
|
|
13875
|
+
drawerContentClassName
|
|
13876
|
+
),
|
|
13877
|
+
children
|
|
13878
|
+
}
|
|
13879
|
+
)
|
|
13816
13880
|
]
|
|
13817
13881
|
}
|
|
13818
13882
|
)
|
|
@@ -13905,6 +13969,8 @@ function DashboardSelectInternal({
|
|
|
13905
13969
|
const [searchValue, setSearchValue] = React55.useState("");
|
|
13906
13970
|
const [highlightedIndex, setHighlightedIndex] = React55.useState(-1);
|
|
13907
13971
|
const isMobile2 = useIsMobile();
|
|
13972
|
+
const { t } = useTranslation29();
|
|
13973
|
+
const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
|
|
13908
13974
|
const hasValue = Boolean(value);
|
|
13909
13975
|
const isEmpty = !hasValue;
|
|
13910
13976
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
@@ -14048,7 +14114,7 @@ function DashboardSelectInternal({
|
|
|
14048
14114
|
loading && "cursor-progress"
|
|
14049
14115
|
),
|
|
14050
14116
|
children: [
|
|
14051
|
-
/* @__PURE__ */ jsx156("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder
|
|
14117
|
+
/* @__PURE__ */ jsx156("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
|
|
14052
14118
|
/* @__PURE__ */ jsxs100("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
14053
14119
|
loading && /* @__PURE__ */ jsx156(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
14054
14120
|
/* @__PURE__ */ jsx156(
|
|
@@ -14098,7 +14164,7 @@ function DashboardSelectInternal({
|
|
|
14098
14164
|
ref: searchInputRef,
|
|
14099
14165
|
type: "text",
|
|
14100
14166
|
value: searchValue,
|
|
14101
|
-
placeholder:
|
|
14167
|
+
placeholder: resolvedSearchPlaceholder,
|
|
14102
14168
|
onChange: (event) => setSearchValue(event.target.value),
|
|
14103
14169
|
onKeyDown: handleSearchKeyDown,
|
|
14104
14170
|
autoComplete: "off",
|
|
@@ -14132,7 +14198,7 @@ function DashboardSelectInternal({
|
|
|
14132
14198
|
}
|
|
14133
14199
|
)
|
|
14134
14200
|
] }),
|
|
14135
|
-
!errorMessage && optional && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
|
|
14201
|
+
!errorMessage && optional && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
14136
14202
|
!errorMessage && helperText && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
14137
14203
|
errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx156(
|
|
14138
14204
|
FieldErrorMessage,
|
|
@@ -14154,6 +14220,7 @@ var DashboardSelect = React55.forwardRef(
|
|
|
14154
14220
|
// src/dashboard/multi-select/MultiSelect.tsx
|
|
14155
14221
|
import * as React56 from "react";
|
|
14156
14222
|
import { SquareX as SquareX2 } from "lucide-react";
|
|
14223
|
+
import { useTranslation as useTranslation30 } from "react-i18next";
|
|
14157
14224
|
import { jsx as jsx157, jsxs as jsxs101 } from "react/jsx-runtime";
|
|
14158
14225
|
var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
|
|
14159
14226
|
function DashboardMultiSelectInternal({
|
|
@@ -14198,6 +14265,7 @@ function DashboardMultiSelectInternal({
|
|
|
14198
14265
|
const [isFocused, setIsFocused] = React56.useState(false);
|
|
14199
14266
|
const [highlightedIndex, setHighlightedIndex] = React56.useState(-1);
|
|
14200
14267
|
const isMobile2 = useIsMobile();
|
|
14268
|
+
const { t } = useTranslation30();
|
|
14201
14269
|
const selectedValues = React56.useMemo(() => value ?? [], [value]);
|
|
14202
14270
|
const hasValue = selectedValues.length > 0;
|
|
14203
14271
|
const isEmpty = !hasValue;
|
|
@@ -14422,7 +14490,9 @@ function DashboardMultiSelectInternal({
|
|
|
14422
14490
|
removeOption(option);
|
|
14423
14491
|
},
|
|
14424
14492
|
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]",
|
|
14425
|
-
"aria-label":
|
|
14493
|
+
"aria-label": t("remove_item", {
|
|
14494
|
+
label: typeof option.label === "string" ? option.label : String(option.value)
|
|
14495
|
+
}),
|
|
14426
14496
|
children: /* @__PURE__ */ jsx157(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
14427
14497
|
}
|
|
14428
14498
|
)
|
|
@@ -14449,7 +14519,7 @@ function DashboardMultiSelectInternal({
|
|
|
14449
14519
|
onKeyDown: handleInputKeyDown,
|
|
14450
14520
|
disabled: isBlocked,
|
|
14451
14521
|
readOnly,
|
|
14452
|
-
placeholder: hasValue
|
|
14522
|
+
placeholder: !hasValue && (isFocused || isOpen) ? placeholder ?? "" : "",
|
|
14453
14523
|
autoComplete: "off",
|
|
14454
14524
|
className: cn(
|
|
14455
14525
|
"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)]",
|
|
@@ -14471,7 +14541,7 @@ function DashboardMultiSelectInternal({
|
|
|
14471
14541
|
clearAll();
|
|
14472
14542
|
},
|
|
14473
14543
|
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]",
|
|
14474
|
-
"aria-label": "
|
|
14544
|
+
"aria-label": t("clear_all"),
|
|
14475
14545
|
children: /* @__PURE__ */ jsx157(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
14476
14546
|
}
|
|
14477
14547
|
),
|
|
@@ -14569,7 +14639,7 @@ function DashboardMultiSelectInternal({
|
|
|
14569
14639
|
}
|
|
14570
14640
|
)
|
|
14571
14641
|
] }),
|
|
14572
|
-
!errorMessage && optional && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
|
|
14642
|
+
!errorMessage && optional && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
14573
14643
|
!errorMessage && helperText && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
14574
14644
|
errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx157(
|
|
14575
14645
|
FieldErrorMessage,
|
|
@@ -14600,6 +14670,7 @@ var DashboardCreatableMultiSelect = React57.forwardRef(
|
|
|
14600
14670
|
import * as React58 from "react";
|
|
14601
14671
|
import { ChevronDown as ChevronDown5 } from "lucide-react";
|
|
14602
14672
|
import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
|
|
14673
|
+
import { useTranslation as useTranslation31 } from "react-i18next";
|
|
14603
14674
|
import { jsx as jsx159, jsxs as jsxs102 } from "react/jsx-runtime";
|
|
14604
14675
|
var DEFAULT_ITEM_HEIGHT = 60;
|
|
14605
14676
|
var DEFAULT_LIST_HEIGHT = 322;
|
|
@@ -14635,7 +14706,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14635
14706
|
canLoadMore,
|
|
14636
14707
|
isLoadingMore,
|
|
14637
14708
|
loadMoreItems,
|
|
14638
|
-
loadingMoreText
|
|
14709
|
+
loadingMoreText,
|
|
14639
14710
|
onSearchChange,
|
|
14640
14711
|
itemHeight = DEFAULT_ITEM_HEIGHT,
|
|
14641
14712
|
listHeight = DEFAULT_LIST_HEIGHT,
|
|
@@ -14646,10 +14717,15 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14646
14717
|
const triggerRef = React58.useRef(null);
|
|
14647
14718
|
const searchInputRef = React58.useRef(null);
|
|
14648
14719
|
const scrollRef = React58.useRef(null);
|
|
14720
|
+
const previousHighlightedIndexRef = React58.useRef(-1);
|
|
14721
|
+
const lastLoadMoreOptionsLengthRef = React58.useRef(null);
|
|
14649
14722
|
const [isOpen, setIsOpen] = React58.useState(false);
|
|
14650
14723
|
const [searchValue, setSearchValue] = React58.useState("");
|
|
14651
14724
|
const [highlightedIndex, setHighlightedIndex] = React58.useState(-1);
|
|
14652
14725
|
const isMobile2 = useIsMobile();
|
|
14726
|
+
const { t } = useTranslation31();
|
|
14727
|
+
const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
|
|
14728
|
+
const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
|
|
14653
14729
|
const hasValue = Boolean(value);
|
|
14654
14730
|
const isEmpty = !hasValue;
|
|
14655
14731
|
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
@@ -14680,28 +14756,35 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14680
14756
|
if (isBlocked) setIsOpen(false);
|
|
14681
14757
|
}, [isBlocked]);
|
|
14682
14758
|
React58.useEffect(() => {
|
|
14683
|
-
if (
|
|
14684
|
-
|
|
14685
|
-
|
|
14686
|
-
|
|
14687
|
-
|
|
14688
|
-
|
|
14689
|
-
|
|
14690
|
-
|
|
14691
|
-
)
|
|
14692
|
-
|
|
14693
|
-
|
|
14694
|
-
|
|
14695
|
-
|
|
14696
|
-
|
|
14759
|
+
if (isOpen) return;
|
|
14760
|
+
setSearchValue("");
|
|
14761
|
+
setHighlightedIndex(-1);
|
|
14762
|
+
previousHighlightedIndexRef.current = -1;
|
|
14763
|
+
lastLoadMoreOptionsLengthRef.current = null;
|
|
14764
|
+
}, [isOpen]);
|
|
14765
|
+
React58.useEffect(() => {
|
|
14766
|
+
if (!isOpen) return;
|
|
14767
|
+
setHighlightedIndex((current) => {
|
|
14768
|
+
const option = current >= 0 ? filteredOptions[current] : void 0;
|
|
14769
|
+
if (option && !option.isDisabled) return current;
|
|
14770
|
+
const selectedIndex = getOptionIndex2(filteredOptions, value);
|
|
14771
|
+
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(filteredOptions);
|
|
14772
|
+
});
|
|
14773
|
+
}, [isOpen, filteredOptions, value]);
|
|
14774
|
+
React58.useEffect(() => {
|
|
14775
|
+
if (!isOpen || !searchable) return;
|
|
14776
|
+
const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
|
|
14777
|
+
return () => window.cancelAnimationFrame(frame);
|
|
14778
|
+
}, [isOpen, searchable]);
|
|
14697
14779
|
const virtualItems = virtualizer.getVirtualItems();
|
|
14698
14780
|
React58.useEffect(() => {
|
|
14699
14781
|
if (!isOpen || !canLoadMore || isLoadingMore || !loadMoreItems) return;
|
|
14700
14782
|
if (virtualItems.length === 0) return;
|
|
14701
14783
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
14702
|
-
if (lastItem
|
|
14703
|
-
|
|
14704
|
-
|
|
14784
|
+
if (!lastItem || lastItem.index < filteredOptions.length - loadMoreThreshold) return;
|
|
14785
|
+
if (lastLoadMoreOptionsLengthRef.current === filteredOptions.length) return;
|
|
14786
|
+
lastLoadMoreOptionsLengthRef.current = filteredOptions.length;
|
|
14787
|
+
loadMoreItems();
|
|
14705
14788
|
}, [
|
|
14706
14789
|
canLoadMore,
|
|
14707
14790
|
filteredOptions.length,
|
|
@@ -14712,7 +14795,9 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14712
14795
|
virtualItems
|
|
14713
14796
|
]);
|
|
14714
14797
|
React58.useEffect(() => {
|
|
14715
|
-
|
|
14798
|
+
const changed = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
14799
|
+
previousHighlightedIndexRef.current = highlightedIndex;
|
|
14800
|
+
if (!isOpen || highlightedIndex < 0 || !changed) return;
|
|
14716
14801
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
14717
14802
|
}, [highlightedIndex, isOpen, virtualizer]);
|
|
14718
14803
|
const toggleMenu = () => {
|
|
@@ -14764,6 +14849,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14764
14849
|
const handleSearchChange = (event) => {
|
|
14765
14850
|
const next = event.target.value;
|
|
14766
14851
|
setSearchValue(next);
|
|
14852
|
+
lastLoadMoreOptionsLengthRef.current = null;
|
|
14767
14853
|
onSearchChange?.(next);
|
|
14768
14854
|
};
|
|
14769
14855
|
const emptyMessage = noOptionsMessage?.();
|
|
@@ -14816,7 +14902,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14816
14902
|
loading && "cursor-progress"
|
|
14817
14903
|
),
|
|
14818
14904
|
children: [
|
|
14819
|
-
/* @__PURE__ */ jsx159("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder
|
|
14905
|
+
/* @__PURE__ */ jsx159("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
|
|
14820
14906
|
/* @__PURE__ */ jsxs102("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
14821
14907
|
loading && /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
14822
14908
|
/* @__PURE__ */ jsx159(
|
|
@@ -14866,7 +14952,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14866
14952
|
ref: searchInputRef,
|
|
14867
14953
|
type: "text",
|
|
14868
14954
|
value: searchValue,
|
|
14869
|
-
placeholder:
|
|
14955
|
+
placeholder: resolvedSearchPlaceholder,
|
|
14870
14956
|
onChange: handleSearchChange,
|
|
14871
14957
|
onKeyDown: handleSearchKeyDown,
|
|
14872
14958
|
autoComplete: "off",
|
|
@@ -14875,7 +14961,10 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14875
14961
|
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)]"
|
|
14876
14962
|
}
|
|
14877
14963
|
) }),
|
|
14878
|
-
|
|
14964
|
+
filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ jsxs102("div", { className: "flex items-center justify-center gap-2 px-4 py-[20px] text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
|
|
14965
|
+
/* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
14966
|
+
/* @__PURE__ */ jsx159("span", { children: resolvedLoadingMoreText })
|
|
14967
|
+
] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx159("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ jsx159(
|
|
14879
14968
|
"div",
|
|
14880
14969
|
{
|
|
14881
14970
|
ref: scrollRef,
|
|
@@ -14908,8 +14997,8 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14908
14997
|
transform: `translateY(${virtualItem.start}px)`
|
|
14909
14998
|
},
|
|
14910
14999
|
children: isLoaderRow ? /* @__PURE__ */ jsxs102("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
|
|
14911
|
-
/* @__PURE__ */ jsx159(ThreeDotsLoader, { height:
|
|
14912
|
-
/* @__PURE__ */ jsx159("span", { children:
|
|
15000
|
+
/* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 36, width: 36 }),
|
|
15001
|
+
/* @__PURE__ */ jsx159("span", { children: resolvedLoadingMoreText })
|
|
14913
15002
|
] }) : /* @__PURE__ */ jsxs102(
|
|
14914
15003
|
"button",
|
|
14915
15004
|
{
|
|
@@ -14946,7 +15035,7 @@ function DashboardInfiniteScrollSelectInternal({
|
|
|
14946
15035
|
}
|
|
14947
15036
|
)
|
|
14948
15037
|
] }),
|
|
14949
|
-
!errorMessage && optional && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
|
|
15038
|
+
!errorMessage && optional && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
14950
15039
|
!errorMessage && helperText && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
14951
15040
|
errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx159(
|
|
14952
15041
|
FieldErrorMessage,
|
|
@@ -14965,135 +15054,2025 @@ var DashboardInfiniteScrollSelect = React58.forwardRef(
|
|
|
14965
15054
|
DashboardInfiniteScrollSelectInternal
|
|
14966
15055
|
);
|
|
14967
15056
|
|
|
14968
|
-
// src/
|
|
15057
|
+
// src/dashboard/textarea/Textarea.tsx
|
|
14969
15058
|
import * as React59 from "react";
|
|
14970
|
-
import {
|
|
14971
|
-
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
14972
|
-
import { useCallback as useCallback35 } from "react";
|
|
15059
|
+
import { useTranslation as useTranslation32 } from "react-i18next";
|
|
14973
15060
|
import { jsx as jsx160, jsxs as jsxs103 } from "react/jsx-runtime";
|
|
14974
|
-
var
|
|
14975
|
-
var
|
|
14976
|
-
|
|
14977
|
-
|
|
14978
|
-
|
|
14979
|
-
return
|
|
15061
|
+
var LINE_HEIGHT = 20;
|
|
15062
|
+
var VERTICAL_PADDING = 32;
|
|
15063
|
+
function getEmptyState(empty, value, defaultValue) {
|
|
15064
|
+
if (typeof empty === "boolean") return empty;
|
|
15065
|
+
if (value !== void 0) return !String(value);
|
|
15066
|
+
return !defaultValue;
|
|
14980
15067
|
}
|
|
14981
|
-
var
|
|
14982
|
-
|
|
14983
|
-
|
|
14984
|
-
|
|
14985
|
-
|
|
14986
|
-
|
|
14987
|
-
|
|
14988
|
-
|
|
14989
|
-
|
|
14990
|
-
|
|
14991
|
-
|
|
14992
|
-
|
|
14993
|
-
|
|
14994
|
-
|
|
14995
|
-
|
|
14996
|
-
|
|
14997
|
-
|
|
14998
|
-
|
|
14999
|
-
|
|
15000
|
-
|
|
15001
|
-
|
|
15002
|
-
|
|
15003
|
-
|
|
15004
|
-
|
|
15005
|
-
|
|
15006
|
-
|
|
15007
|
-
|
|
15008
|
-
|
|
15009
|
-
|
|
15010
|
-
|
|
15011
|
-
|
|
15012
|
-
|
|
15013
|
-
|
|
15014
|
-
|
|
15015
|
-
|
|
15016
|
-
|
|
15017
|
-
|
|
15018
|
-
|
|
15019
|
-
|
|
15020
|
-
|
|
15021
|
-
|
|
15022
|
-
|
|
15023
|
-
|
|
15024
|
-
|
|
15025
|
-
|
|
15026
|
-
|
|
15027
|
-
|
|
15028
|
-
|
|
15029
|
-
|
|
15030
|
-
|
|
15031
|
-
|
|
15032
|
-
|
|
15033
|
-
|
|
15034
|
-
|
|
15035
|
-
|
|
15036
|
-
|
|
15037
|
-
|
|
15038
|
-
|
|
15039
|
-
|
|
15040
|
-
|
|
15041
|
-
|
|
15042
|
-
|
|
15043
|
-
|
|
15044
|
-
|
|
15045
|
-
|
|
15046
|
-
|
|
15047
|
-
|
|
15048
|
-
|
|
15049
|
-
|
|
15050
|
-
|
|
15051
|
-
|
|
15052
|
-
|
|
15053
|
-
|
|
15054
|
-
|
|
15055
|
-
|
|
15056
|
-
|
|
15068
|
+
var DashboardTextarea = React59.forwardRef(
|
|
15069
|
+
function DashboardTextarea2({
|
|
15070
|
+
className,
|
|
15071
|
+
textareaClassName,
|
|
15072
|
+
label,
|
|
15073
|
+
invalid,
|
|
15074
|
+
error,
|
|
15075
|
+
empty,
|
|
15076
|
+
optional,
|
|
15077
|
+
disabled,
|
|
15078
|
+
readOnly,
|
|
15079
|
+
loading,
|
|
15080
|
+
tooltip,
|
|
15081
|
+
name,
|
|
15082
|
+
id,
|
|
15083
|
+
helperText,
|
|
15084
|
+
minRows = 3,
|
|
15085
|
+
maxRows,
|
|
15086
|
+
autosize = true,
|
|
15087
|
+
value,
|
|
15088
|
+
defaultValue,
|
|
15089
|
+
onInput,
|
|
15090
|
+
...textareaProps
|
|
15091
|
+
}, ref) {
|
|
15092
|
+
const innerRef = React59.useRef(null);
|
|
15093
|
+
const combinedRef = useCombinedRef(ref, innerRef);
|
|
15094
|
+
const reactId = React59.useId();
|
|
15095
|
+
const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
|
|
15096
|
+
const { t } = useTranslation32();
|
|
15097
|
+
const isInvalid = Boolean(invalid || error);
|
|
15098
|
+
const isEmpty = getEmptyState(empty, value, defaultValue);
|
|
15099
|
+
const isBlocked = Boolean(disabled);
|
|
15100
|
+
const resize = React59.useCallback(() => {
|
|
15101
|
+
const el = innerRef.current;
|
|
15102
|
+
if (!el || !autosize) return;
|
|
15103
|
+
el.style.height = "auto";
|
|
15104
|
+
const minHeight = minRows * LINE_HEIGHT + VERTICAL_PADDING;
|
|
15105
|
+
const maxHeight = maxRows ? maxRows * LINE_HEIGHT + VERTICAL_PADDING : Infinity;
|
|
15106
|
+
const nextHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
|
|
15107
|
+
el.style.height = `${nextHeight}px`;
|
|
15108
|
+
el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
|
|
15109
|
+
}, [autosize, maxRows, minRows]);
|
|
15110
|
+
React59.useLayoutEffect(() => {
|
|
15111
|
+
resize();
|
|
15112
|
+
}, [resize, value]);
|
|
15113
|
+
const handleInput = (event) => {
|
|
15114
|
+
resize();
|
|
15115
|
+
onInput?.(event);
|
|
15116
|
+
};
|
|
15117
|
+
return /* @__PURE__ */ jsxs103(
|
|
15118
|
+
"div",
|
|
15119
|
+
{
|
|
15120
|
+
className: cn(
|
|
15121
|
+
"relative block min-h-[88px] w-full",
|
|
15122
|
+
isBlocked && "cursor-not-allowed opacity-50",
|
|
15123
|
+
loading && "cursor-progress opacity-50",
|
|
15124
|
+
className
|
|
15125
|
+
),
|
|
15126
|
+
children: [
|
|
15127
|
+
label && /* @__PURE__ */ jsxs103(
|
|
15128
|
+
"label",
|
|
15129
|
+
{
|
|
15130
|
+
htmlFor: textareaId,
|
|
15131
|
+
className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
|
|
15132
|
+
children: [
|
|
15133
|
+
label,
|
|
15134
|
+
tooltip && /* @__PURE__ */ jsx160("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx160(HelpTooltip, { content: tooltip, size: 16 }) })
|
|
15135
|
+
]
|
|
15136
|
+
}
|
|
15137
|
+
),
|
|
15138
|
+
/* @__PURE__ */ jsx160(
|
|
15139
|
+
"textarea",
|
|
15140
|
+
{
|
|
15141
|
+
ref: combinedRef,
|
|
15142
|
+
id: textareaId,
|
|
15143
|
+
name,
|
|
15144
|
+
value,
|
|
15145
|
+
defaultValue,
|
|
15146
|
+
rows: minRows,
|
|
15147
|
+
disabled: isBlocked || loading,
|
|
15148
|
+
readOnly: isBlocked || readOnly,
|
|
15149
|
+
"aria-invalid": isInvalid,
|
|
15150
|
+
"aria-busy": loading,
|
|
15151
|
+
onInput: handleInput,
|
|
15152
|
+
className: cn(
|
|
15153
|
+
"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",
|
|
15154
|
+
"border-[var(--chekin-color-gray-3)] placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)]",
|
|
15155
|
+
!isBlocked && "focus:border-[var(--chekin-color-brand-blue)]",
|
|
15156
|
+
isEmpty && "border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
|
|
15157
|
+
isInvalid && "border-[var(--error-message-color)] focus:border-[var(--error-message-color)]",
|
|
15158
|
+
(readOnly || isBlocked) && "cursor-default",
|
|
15159
|
+
isBlocked && "cursor-not-allowed",
|
|
15160
|
+
loading && "cursor-progress",
|
|
15161
|
+
textareaClassName
|
|
15162
|
+
),
|
|
15163
|
+
style: autosize ? { minHeight: minRows * LINE_HEIGHT + VERTICAL_PADDING } : void 0,
|
|
15164
|
+
...textareaProps
|
|
15165
|
+
}
|
|
15166
|
+
),
|
|
15167
|
+
error && /* @__PURE__ */ jsx160(
|
|
15168
|
+
FieldErrorMessage,
|
|
15169
|
+
{
|
|
15170
|
+
id: `${textareaId}-error`,
|
|
15171
|
+
message: error,
|
|
15172
|
+
className: "mt-[1px] text-[14px]"
|
|
15173
|
+
}
|
|
15174
|
+
),
|
|
15175
|
+
!error && optional && /* @__PURE__ */ jsx160("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
15176
|
+
!error && helperText && /* @__PURE__ */ jsx160("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
|
|
15177
|
+
]
|
|
15057
15178
|
}
|
|
15058
|
-
|
|
15059
|
-
|
|
15179
|
+
);
|
|
15180
|
+
}
|
|
15181
|
+
);
|
|
15182
|
+
|
|
15183
|
+
// src/dashboard/datepicker/Datepicker.tsx
|
|
15184
|
+
import * as React60 from "react";
|
|
15185
|
+
import { ChevronDown as ChevronDown6 } from "lucide-react";
|
|
15186
|
+
import { useTranslation as useTranslation33 } from "react-i18next";
|
|
15187
|
+
import { jsx as jsx161, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
15188
|
+
var MONTHS_IN_YEAR2 = 12;
|
|
15189
|
+
var DEFAULT_MIN_DATE2 = new Date(1920, 0, 1);
|
|
15190
|
+
function getMonthLabels2(locale) {
|
|
15191
|
+
const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
15192
|
+
return Array.from(
|
|
15193
|
+
{ length: MONTHS_IN_YEAR2 },
|
|
15194
|
+
(_, monthIndex) => formatter.format(new Date(2024, monthIndex, 1))
|
|
15060
15195
|
);
|
|
15061
|
-
|
|
15062
|
-
|
|
15063
|
-
|
|
15064
|
-
|
|
15065
|
-
|
|
15066
|
-
|
|
15067
|
-
|
|
15068
|
-
|
|
15196
|
+
}
|
|
15197
|
+
var DAY_PATTERN = /^([1-9]|[12]\d|3[01])$/;
|
|
15198
|
+
var PARTIAL_DAY_PATTERN = /^[0-9]{0,2}$/;
|
|
15199
|
+
var PARTIAL_YEAR_PATTERN = /^[0-9]{0,4}$/;
|
|
15200
|
+
var FULL_YEAR_PATTERN = /^(19|20)\d{2}$/;
|
|
15201
|
+
function isValidCalendarDate(year, monthIndex, day) {
|
|
15202
|
+
const date = new Date(year, monthIndex, day);
|
|
15203
|
+
return date.getFullYear() === year && date.getMonth() === monthIndex && date.getDate() === day;
|
|
15204
|
+
}
|
|
15205
|
+
function partsFromDate(date) {
|
|
15206
|
+
if (!date) return { day: "", monthIndex: null, year: "" };
|
|
15207
|
+
return {
|
|
15208
|
+
day: String(date.getDate()),
|
|
15209
|
+
monthIndex: date.getMonth(),
|
|
15210
|
+
year: String(date.getFullYear())
|
|
15211
|
+
};
|
|
15212
|
+
}
|
|
15213
|
+
function dateFromParts(day, monthIndex, year) {
|
|
15214
|
+
if (!day || monthIndex === null || !year) return null;
|
|
15215
|
+
if (!DAY_PATTERN.test(day) || !FULL_YEAR_PATTERN.test(year)) return null;
|
|
15216
|
+
const dayNum = parseInt(day, 10);
|
|
15217
|
+
const yearNum = parseInt(year, 10);
|
|
15218
|
+
if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
|
|
15219
|
+
return new Date(yearNum, monthIndex, dayNum);
|
|
15220
|
+
}
|
|
15221
|
+
var DashboardDatepicker = React60.forwardRef(
|
|
15222
|
+
function DashboardDatepicker2({
|
|
15223
|
+
label,
|
|
15224
|
+
value,
|
|
15225
|
+
defaultValue,
|
|
15226
|
+
onChange,
|
|
15227
|
+
name,
|
|
15228
|
+
invalid,
|
|
15229
|
+
error,
|
|
15230
|
+
disabled,
|
|
15231
|
+
readOnly,
|
|
15232
|
+
loading,
|
|
15233
|
+
optional,
|
|
15234
|
+
tooltip,
|
|
15235
|
+
className,
|
|
15236
|
+
monthLabels,
|
|
15237
|
+
dayPlaceholder = "DD",
|
|
15238
|
+
yearPlaceholder = "YYYY",
|
|
15239
|
+
monthPlaceholder,
|
|
15240
|
+
mobilePlaceholder,
|
|
15241
|
+
mobileTitle,
|
|
15242
|
+
doneLabel,
|
|
15243
|
+
hideErrorMessage,
|
|
15244
|
+
helperText,
|
|
15245
|
+
width,
|
|
15246
|
+
locale = "en-US",
|
|
15247
|
+
minDate,
|
|
15248
|
+
maxDate,
|
|
15249
|
+
formatValue
|
|
15250
|
+
}, ref) {
|
|
15251
|
+
const containerRef = React60.useRef(null);
|
|
15252
|
+
const dayInputRef = React60.useRef(null);
|
|
15253
|
+
const monthInputRef = React60.useRef(null);
|
|
15254
|
+
const monthListRef = React60.useRef(null);
|
|
15255
|
+
const yearInputRef = React60.useRef(null);
|
|
15256
|
+
const mobileTriggerRef = React60.useRef(null);
|
|
15257
|
+
const wheelBaseId = React60.useId();
|
|
15258
|
+
const reactId = React60.useId();
|
|
15259
|
+
const baseId = name ?? `dash-datepicker-${reactId}`;
|
|
15260
|
+
const dayId = `${baseId}-day`;
|
|
15261
|
+
const monthId = `${baseId}-month`;
|
|
15262
|
+
const yearId = `${baseId}-year`;
|
|
15263
|
+
const labelId = `${baseId}-label`;
|
|
15264
|
+
const errorId = `${baseId}-error`;
|
|
15265
|
+
const { t } = useTranslation33();
|
|
15266
|
+
const resolvedMonthLabels = React60.useMemo(
|
|
15267
|
+
() => monthLabels ?? getMonthLabels2(locale),
|
|
15268
|
+
[locale, monthLabels]
|
|
15269
|
+
);
|
|
15270
|
+
const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
|
|
15271
|
+
const resolvedDoneLabel = doneLabel ?? t("done");
|
|
15272
|
+
const isControlled = value !== void 0;
|
|
15273
|
+
const initialParts = React60.useMemo(
|
|
15274
|
+
() => partsFromDate(value ?? defaultValue ?? null),
|
|
15275
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15276
|
+
[]
|
|
15277
|
+
);
|
|
15278
|
+
const [day, setDay] = React60.useState(initialParts.day);
|
|
15279
|
+
const [monthIndex, setMonthIndex] = React60.useState(
|
|
15280
|
+
initialParts.monthIndex
|
|
15281
|
+
);
|
|
15282
|
+
const [year, setYear] = React60.useState(initialParts.year);
|
|
15283
|
+
const [isMonthOpen, setIsMonthOpen] = React60.useState(false);
|
|
15284
|
+
const [isWheelOpen, setIsWheelOpen] = React60.useState(false);
|
|
15285
|
+
const [focusedField, setFocusedField] = React60.useState(null);
|
|
15286
|
+
const [monthInputValue, setMonthInputValue] = React60.useState("");
|
|
15287
|
+
const [monthHighlightIndex, setMonthHighlightIndex] = React60.useState(-1);
|
|
15288
|
+
const isMobile2 = useIsMobile();
|
|
15289
|
+
React60.useImperativeHandle(ref, () => dayInputRef.current, []);
|
|
15290
|
+
React60.useEffect(() => {
|
|
15291
|
+
if (!isControlled) return;
|
|
15292
|
+
const next = partsFromDate(value ?? null);
|
|
15293
|
+
setDay(next.day);
|
|
15294
|
+
setMonthIndex(next.monthIndex);
|
|
15295
|
+
setYear(next.year);
|
|
15296
|
+
}, [isControlled, value]);
|
|
15297
|
+
React60.useEffect(() => {
|
|
15298
|
+
if (focusedField === "month") return;
|
|
15299
|
+
setMonthInputValue(
|
|
15300
|
+
monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
|
|
15301
|
+
);
|
|
15302
|
+
}, [monthIndex, resolvedMonthLabels, focusedField]);
|
|
15303
|
+
const filteredMonths = React60.useMemo(() => {
|
|
15304
|
+
const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
|
|
15305
|
+
const query = monthInputValue.trim().toLowerCase();
|
|
15306
|
+
const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
|
|
15307
|
+
if (!query || monthInputValue === currentLabel) return all;
|
|
15308
|
+
return all.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
15309
|
+
}, [monthInputValue, monthIndex, resolvedMonthLabels]);
|
|
15310
|
+
React60.useEffect(() => {
|
|
15311
|
+
if (!isMonthOpen) {
|
|
15312
|
+
setMonthHighlightIndex(-1);
|
|
15313
|
+
return;
|
|
15314
|
+
}
|
|
15315
|
+
if (monthIndex !== null) {
|
|
15316
|
+
const currentLabel = resolvedMonthLabels[monthIndex];
|
|
15317
|
+
const index = filteredMonths.findIndex((o) => o.label === currentLabel);
|
|
15318
|
+
if (index >= 0) {
|
|
15319
|
+
setMonthHighlightIndex(index);
|
|
15320
|
+
return;
|
|
15321
|
+
}
|
|
15322
|
+
}
|
|
15323
|
+
setMonthHighlightIndex(filteredMonths.length > 0 ? 0 : -1);
|
|
15324
|
+
}, [isMonthOpen, filteredMonths.length]);
|
|
15325
|
+
const hasAnyValue = Boolean(day) || monthIndex !== null || Boolean(year);
|
|
15326
|
+
const isEmpty = !hasAnyValue;
|
|
15327
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
15328
|
+
const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
|
|
15329
|
+
const isInvalid = Boolean(invalid || error);
|
|
15330
|
+
const wrapperWidth = toCssSize(width);
|
|
15331
|
+
const currentDate = React60.useMemo(
|
|
15332
|
+
() => dateFromParts(day, monthIndex, year),
|
|
15333
|
+
[day, monthIndex, year]
|
|
15334
|
+
);
|
|
15335
|
+
useOutsideClick({
|
|
15336
|
+
elementRef: containerRef,
|
|
15337
|
+
onOutsideClick: () => setIsMonthOpen(false),
|
|
15338
|
+
isDisabled: !isMonthOpen || isMobile2
|
|
15069
15339
|
});
|
|
15070
|
-
|
|
15071
|
-
|
|
15340
|
+
const emitChange = React60.useCallback(
|
|
15341
|
+
(nextDay, nextMonth, nextYear) => {
|
|
15342
|
+
if (!onChange) return;
|
|
15343
|
+
const date = dateFromParts(nextDay, nextMonth, nextYear);
|
|
15344
|
+
onChange(date, name);
|
|
15345
|
+
},
|
|
15346
|
+
[name, onChange]
|
|
15347
|
+
);
|
|
15348
|
+
const handleDayChange = (event) => {
|
|
15349
|
+
const next = event.target.value;
|
|
15350
|
+
if (!PARTIAL_DAY_PATTERN.test(next)) return;
|
|
15351
|
+
setDay(next);
|
|
15352
|
+
emitChange(next, monthIndex, year);
|
|
15353
|
+
if (next.length === 2 && DAY_PATTERN.test(next)) {
|
|
15354
|
+
monthInputRef.current?.focus();
|
|
15355
|
+
}
|
|
15072
15356
|
};
|
|
15073
|
-
|
|
15074
|
-
|
|
15075
|
-
|
|
15076
|
-
|
|
15077
|
-
|
|
15078
|
-
}
|
|
15079
|
-
|
|
15080
|
-
|
|
15081
|
-
|
|
15357
|
+
const handleYearChange = (event) => {
|
|
15358
|
+
const next = event.target.value;
|
|
15359
|
+
if (!PARTIAL_YEAR_PATTERN.test(next)) return;
|
|
15360
|
+
setYear(next);
|
|
15361
|
+
emitChange(day, monthIndex, next);
|
|
15362
|
+
};
|
|
15363
|
+
const handleMonthSelect = (index) => {
|
|
15364
|
+
setMonthIndex(index);
|
|
15365
|
+
setMonthInputValue(resolvedMonthLabels[index] ?? "");
|
|
15366
|
+
setIsMonthOpen(false);
|
|
15367
|
+
emitChange(day, index, year);
|
|
15368
|
+
yearInputRef.current?.focus();
|
|
15369
|
+
};
|
|
15370
|
+
const handleMonthInputChange = (event) => {
|
|
15371
|
+
setMonthInputValue(event.target.value);
|
|
15372
|
+
setIsMonthOpen(true);
|
|
15373
|
+
setMonthHighlightIndex(0);
|
|
15374
|
+
};
|
|
15375
|
+
const commitMonthInput = React60.useCallback(() => {
|
|
15376
|
+
const query = monthInputValue.trim().toLowerCase();
|
|
15377
|
+
if (!query) {
|
|
15378
|
+
if (monthIndex !== null) {
|
|
15379
|
+
setMonthIndex(null);
|
|
15380
|
+
emitChange(day, null, year);
|
|
15381
|
+
}
|
|
15382
|
+
setMonthInputValue("");
|
|
15383
|
+
return;
|
|
15082
15384
|
}
|
|
15083
|
-
|
|
15084
|
-
|
|
15085
|
-
|
|
15086
|
-
|
|
15087
|
-
|
|
15088
|
-
|
|
15089
|
-
|
|
15090
|
-
|
|
15091
|
-
|
|
15092
|
-
|
|
15093
|
-
|
|
15094
|
-
|
|
15095
|
-
|
|
15096
|
-
|
|
15385
|
+
const exactMatch = resolvedMonthLabels.findIndex(
|
|
15386
|
+
(label2) => label2.toLowerCase() === query
|
|
15387
|
+
);
|
|
15388
|
+
if (exactMatch >= 0) {
|
|
15389
|
+
if (exactMatch !== monthIndex) {
|
|
15390
|
+
setMonthIndex(exactMatch);
|
|
15391
|
+
emitChange(day, exactMatch, year);
|
|
15392
|
+
}
|
|
15393
|
+
setMonthInputValue(resolvedMonthLabels[exactMatch]);
|
|
15394
|
+
return;
|
|
15395
|
+
}
|
|
15396
|
+
setMonthInputValue(monthIndex !== null ? resolvedMonthLabels[monthIndex] : "");
|
|
15397
|
+
}, [day, emitChange, monthIndex, monthInputValue, resolvedMonthLabels, year]);
|
|
15398
|
+
const handleMonthInputKeyDown = (event) => {
|
|
15399
|
+
if (isBlocked) return;
|
|
15400
|
+
if (event.key === "ArrowDown") {
|
|
15401
|
+
event.preventDefault();
|
|
15402
|
+
setIsMonthOpen(true);
|
|
15403
|
+
setMonthHighlightIndex(
|
|
15404
|
+
(prev) => filteredMonths.length === 0 ? -1 : Math.min(prev + 1, filteredMonths.length - 1)
|
|
15405
|
+
);
|
|
15406
|
+
return;
|
|
15407
|
+
}
|
|
15408
|
+
if (event.key === "ArrowUp") {
|
|
15409
|
+
event.preventDefault();
|
|
15410
|
+
setIsMonthOpen(true);
|
|
15411
|
+
setMonthHighlightIndex((prev) => Math.max(prev - 1, 0));
|
|
15412
|
+
return;
|
|
15413
|
+
}
|
|
15414
|
+
if (event.key === "Enter") {
|
|
15415
|
+
if (!isMonthOpen) return;
|
|
15416
|
+
event.preventDefault();
|
|
15417
|
+
const target = filteredMonths[monthHighlightIndex];
|
|
15418
|
+
if (target) {
|
|
15419
|
+
handleMonthSelect(target.index);
|
|
15420
|
+
} else {
|
|
15421
|
+
commitMonthInput();
|
|
15422
|
+
}
|
|
15423
|
+
return;
|
|
15424
|
+
}
|
|
15425
|
+
if (event.key === "Escape") {
|
|
15426
|
+
event.preventDefault();
|
|
15427
|
+
setIsMonthOpen(false);
|
|
15428
|
+
setMonthInputValue(monthIndex !== null ? resolvedMonthLabels[monthIndex] : "");
|
|
15429
|
+
return;
|
|
15430
|
+
}
|
|
15431
|
+
if (event.key === "Tab") {
|
|
15432
|
+
setIsMonthOpen(false);
|
|
15433
|
+
}
|
|
15434
|
+
};
|
|
15435
|
+
const focusDayInput = React60.useCallback(() => {
|
|
15436
|
+
if (isBlocked || readOnly) return;
|
|
15437
|
+
dayInputRef.current?.focus();
|
|
15438
|
+
}, [isBlocked, readOnly]);
|
|
15439
|
+
const openWheel = React60.useCallback(() => {
|
|
15440
|
+
if (isBlocked || readOnly) return;
|
|
15441
|
+
setIsWheelOpen(true);
|
|
15442
|
+
}, [isBlocked, readOnly]);
|
|
15443
|
+
const closeWheel = React60.useCallback(() => {
|
|
15444
|
+
setIsWheelOpen(false);
|
|
15445
|
+
mobileTriggerRef.current?.focus();
|
|
15446
|
+
}, []);
|
|
15447
|
+
const closeMonth = () => setIsMonthOpen(false);
|
|
15448
|
+
const showCoverage = isEmpty && !isFocused && !isMobile2;
|
|
15449
|
+
const wheel = useDatePickerWheel({
|
|
15450
|
+
isOpen: isWheelOpen,
|
|
15451
|
+
value: currentDate,
|
|
15452
|
+
defaultValue: null,
|
|
15453
|
+
minDate,
|
|
15454
|
+
maxDate
|
|
15455
|
+
});
|
|
15456
|
+
const handleWheelDone = React60.useCallback(() => {
|
|
15457
|
+
const next = wheel.draftDate;
|
|
15458
|
+
setDay(String(next.getDate()));
|
|
15459
|
+
setMonthIndex(next.getMonth());
|
|
15460
|
+
setYear(String(next.getFullYear()));
|
|
15461
|
+
onChange?.(next, name);
|
|
15462
|
+
setIsWheelOpen(false);
|
|
15463
|
+
mobileTriggerRef.current?.focus();
|
|
15464
|
+
}, [name, onChange, wheel.draftDate]);
|
|
15465
|
+
const defaultFormatValue = React60.useCallback(
|
|
15466
|
+
(date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
|
|
15467
|
+
[resolvedMonthLabels]
|
|
15468
|
+
);
|
|
15469
|
+
const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
|
|
15470
|
+
const monthListboxId = `${monthId}-listbox`;
|
|
15471
|
+
const getMonthOptionId = (index) => `${monthId}-option-${index}`;
|
|
15472
|
+
const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ jsx161("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ jsx161(
|
|
15473
|
+
"ul",
|
|
15474
|
+
{
|
|
15475
|
+
ref: monthListRef,
|
|
15476
|
+
id: monthListboxId,
|
|
15477
|
+
role: "listbox",
|
|
15478
|
+
"aria-labelledby": labelId,
|
|
15479
|
+
className: "m-0 max-h-[260px] list-none overflow-y-auto p-1",
|
|
15480
|
+
children: filteredMonths.map((option, position) => {
|
|
15481
|
+
const isSelected = option.index === monthIndex;
|
|
15482
|
+
const isHighlighted = position === monthHighlightIndex;
|
|
15483
|
+
return /* @__PURE__ */ jsx161("li", { role: "presentation", children: /* @__PURE__ */ jsx161(
|
|
15484
|
+
"button",
|
|
15485
|
+
{
|
|
15486
|
+
id: getMonthOptionId(option.index),
|
|
15487
|
+
type: "button",
|
|
15488
|
+
role: "option",
|
|
15489
|
+
"aria-selected": isSelected,
|
|
15490
|
+
tabIndex: -1,
|
|
15491
|
+
onMouseDown: (event) => event.preventDefault(),
|
|
15492
|
+
onMouseMove: () => setMonthHighlightIndex(position),
|
|
15493
|
+
onClick: () => handleMonthSelect(option.index),
|
|
15494
|
+
className: cn(
|
|
15495
|
+
"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",
|
|
15496
|
+
isHighlighted && "bg-[var(--chekin-color-surface-pressed)] text-[var(--chekin-color-brand-blue)]",
|
|
15497
|
+
isSelected && "font-bold"
|
|
15498
|
+
),
|
|
15499
|
+
children: option.label
|
|
15500
|
+
}
|
|
15501
|
+
) }, option.index);
|
|
15502
|
+
})
|
|
15503
|
+
}
|
|
15504
|
+
);
|
|
15505
|
+
const subInputClass = cn(
|
|
15506
|
+
"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)]",
|
|
15507
|
+
isBlocked && "cursor-not-allowed",
|
|
15508
|
+
loading && "cursor-progress"
|
|
15509
|
+
);
|
|
15510
|
+
return /* @__PURE__ */ jsx161(
|
|
15511
|
+
"div",
|
|
15512
|
+
{
|
|
15513
|
+
ref: containerRef,
|
|
15514
|
+
className: cn(
|
|
15515
|
+
"relative w-full max-w-[var(--max-field-width)]",
|
|
15516
|
+
disabled && "cursor-not-allowed opacity-50",
|
|
15517
|
+
loading && "cursor-progress",
|
|
15518
|
+
className
|
|
15519
|
+
),
|
|
15520
|
+
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
15521
|
+
children: /* @__PURE__ */ jsxs104("div", { className: "relative min-h-[68px] w-full", children: [
|
|
15522
|
+
/* @__PURE__ */ jsxs104("div", { className: "relative w-full", children: [
|
|
15523
|
+
isMobile2 ? /* @__PURE__ */ jsxs104(
|
|
15524
|
+
"button",
|
|
15525
|
+
{
|
|
15526
|
+
ref: mobileTriggerRef,
|
|
15527
|
+
id: dayId,
|
|
15528
|
+
type: "button",
|
|
15529
|
+
"aria-haspopup": "dialog",
|
|
15530
|
+
"aria-expanded": isWheelOpen,
|
|
15531
|
+
"aria-labelledby": labelId,
|
|
15532
|
+
"aria-invalid": isInvalid,
|
|
15533
|
+
"aria-busy": loading,
|
|
15534
|
+
disabled: isBlocked || readOnly,
|
|
15535
|
+
onClick: openWheel,
|
|
15536
|
+
className: cn(
|
|
15537
|
+
"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",
|
|
15538
|
+
triggerText ? "bg-transparent text-[var(--chekin-color-brand-navy)]" : "bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
|
|
15539
|
+
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
15540
|
+
),
|
|
15541
|
+
children: [
|
|
15542
|
+
/* @__PURE__ */ jsx161("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
|
|
15543
|
+
/* @__PURE__ */ jsxs104("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
15544
|
+
loading && /* @__PURE__ */ jsx161(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
15545
|
+
/* @__PURE__ */ jsx161(
|
|
15546
|
+
ChevronDown6,
|
|
15547
|
+
{
|
|
15548
|
+
size: 16,
|
|
15549
|
+
className: cn(
|
|
15550
|
+
"transition-transform duration-200",
|
|
15551
|
+
isWheelOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
|
|
15552
|
+
)
|
|
15553
|
+
}
|
|
15554
|
+
)
|
|
15555
|
+
] })
|
|
15556
|
+
]
|
|
15557
|
+
}
|
|
15558
|
+
) : /* @__PURE__ */ jsxs104(
|
|
15559
|
+
"div",
|
|
15560
|
+
{
|
|
15561
|
+
className: cn(
|
|
15562
|
+
"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)]"
|
|
15563
|
+
),
|
|
15564
|
+
children: [
|
|
15565
|
+
/* @__PURE__ */ jsx161("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx161(
|
|
15566
|
+
"input",
|
|
15567
|
+
{
|
|
15568
|
+
ref: dayInputRef,
|
|
15569
|
+
id: dayId,
|
|
15570
|
+
type: "text",
|
|
15571
|
+
inputMode: "numeric",
|
|
15572
|
+
autoComplete: "off",
|
|
15573
|
+
name: name ? `${name}-day` : void 0,
|
|
15574
|
+
value: day,
|
|
15575
|
+
placeholder: dayPlaceholder,
|
|
15576
|
+
disabled: isBlocked,
|
|
15577
|
+
readOnly,
|
|
15578
|
+
"aria-invalid": isInvalid,
|
|
15579
|
+
"aria-labelledby": labelId,
|
|
15580
|
+
onChange: handleDayChange,
|
|
15581
|
+
onFocus: () => setFocusedField("day"),
|
|
15582
|
+
onBlur: () => setFocusedField(null),
|
|
15583
|
+
maxLength: 2,
|
|
15584
|
+
className: subInputClass
|
|
15585
|
+
}
|
|
15586
|
+
) }),
|
|
15587
|
+
/* @__PURE__ */ jsxs104("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: [
|
|
15588
|
+
/* @__PURE__ */ jsx161(
|
|
15589
|
+
"input",
|
|
15590
|
+
{
|
|
15591
|
+
ref: monthInputRef,
|
|
15592
|
+
id: monthId,
|
|
15593
|
+
type: "text",
|
|
15594
|
+
role: "combobox",
|
|
15595
|
+
autoComplete: "off",
|
|
15596
|
+
"aria-haspopup": "listbox",
|
|
15597
|
+
"aria-expanded": isMonthOpen,
|
|
15598
|
+
"aria-controls": monthListboxId,
|
|
15599
|
+
"aria-autocomplete": "list",
|
|
15600
|
+
"aria-activedescendant": monthHighlightIndex >= 0 && filteredMonths[monthHighlightIndex] ? getMonthOptionId(filteredMonths[monthHighlightIndex].index) : void 0,
|
|
15601
|
+
"aria-labelledby": labelId,
|
|
15602
|
+
"aria-invalid": isInvalid,
|
|
15603
|
+
name: name ? `${name}-month` : void 0,
|
|
15604
|
+
value: monthInputValue,
|
|
15605
|
+
placeholder: resolvedMonthPlaceholder,
|
|
15606
|
+
disabled: isBlocked,
|
|
15607
|
+
readOnly,
|
|
15608
|
+
onChange: handleMonthInputChange,
|
|
15609
|
+
onFocus: () => {
|
|
15610
|
+
setFocusedField("month");
|
|
15611
|
+
if (!isBlocked && !readOnly) {
|
|
15612
|
+
setIsMonthOpen(true);
|
|
15613
|
+
monthInputRef.current?.select();
|
|
15614
|
+
}
|
|
15615
|
+
},
|
|
15616
|
+
onBlur: () => {
|
|
15617
|
+
setFocusedField(null);
|
|
15618
|
+
commitMonthInput();
|
|
15619
|
+
},
|
|
15620
|
+
onClick: () => {
|
|
15621
|
+
if (!isBlocked && !readOnly) setIsMonthOpen(true);
|
|
15622
|
+
},
|
|
15623
|
+
onKeyDown: handleMonthInputKeyDown,
|
|
15624
|
+
className: cn(
|
|
15625
|
+
"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)]",
|
|
15626
|
+
monthIndex !== null ? "text-[var(--chekin-color-brand-navy)]" : "text-[var(--chekin-color-gray-1)]",
|
|
15627
|
+
(isBlocked || readOnly) && "cursor-not-allowed"
|
|
15628
|
+
)
|
|
15629
|
+
}
|
|
15630
|
+
),
|
|
15631
|
+
/* @__PURE__ */ jsx161(
|
|
15632
|
+
ChevronDown6,
|
|
15633
|
+
{
|
|
15634
|
+
size: 14,
|
|
15635
|
+
onMouseDown: (event) => {
|
|
15636
|
+
event.preventDefault();
|
|
15637
|
+
if (isBlocked || readOnly) return;
|
|
15638
|
+
setIsMonthOpen((prev) => !prev);
|
|
15639
|
+
monthInputRef.current?.focus();
|
|
15640
|
+
},
|
|
15641
|
+
className: cn(
|
|
15642
|
+
"shrink-0 cursor-pointer text-[var(--chekin-color-gray-2)] transition-transform duration-200",
|
|
15643
|
+
isMonthOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
|
|
15644
|
+
)
|
|
15645
|
+
}
|
|
15646
|
+
)
|
|
15647
|
+
] }),
|
|
15648
|
+
/* @__PURE__ */ jsxs104("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
|
|
15649
|
+
/* @__PURE__ */ jsx161(
|
|
15650
|
+
"input",
|
|
15651
|
+
{
|
|
15652
|
+
ref: yearInputRef,
|
|
15653
|
+
id: yearId,
|
|
15654
|
+
type: "text",
|
|
15655
|
+
inputMode: "numeric",
|
|
15656
|
+
autoComplete: "off",
|
|
15657
|
+
name: name ? `${name}-year` : void 0,
|
|
15658
|
+
value: year,
|
|
15659
|
+
placeholder: yearPlaceholder,
|
|
15660
|
+
disabled: isBlocked,
|
|
15661
|
+
readOnly,
|
|
15662
|
+
"aria-invalid": isInvalid,
|
|
15663
|
+
"aria-labelledby": labelId,
|
|
15664
|
+
onChange: handleYearChange,
|
|
15665
|
+
onFocus: () => setFocusedField("year"),
|
|
15666
|
+
onBlur: () => setFocusedField(null),
|
|
15667
|
+
maxLength: 4,
|
|
15668
|
+
className: subInputClass
|
|
15669
|
+
}
|
|
15670
|
+
),
|
|
15671
|
+
loading && /* @__PURE__ */ jsx161(
|
|
15672
|
+
ThreeDotsLoader,
|
|
15673
|
+
{
|
|
15674
|
+
height: 18,
|
|
15675
|
+
width: 18,
|
|
15676
|
+
className: "ml-2 text-[var(--chekin-color-gray-2)]"
|
|
15677
|
+
}
|
|
15678
|
+
)
|
|
15679
|
+
] })
|
|
15680
|
+
]
|
|
15681
|
+
}
|
|
15682
|
+
),
|
|
15683
|
+
showCoverage && /* @__PURE__ */ jsx161(
|
|
15684
|
+
"div",
|
|
15685
|
+
{
|
|
15686
|
+
className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--chekin-color-surface-input-empty)]",
|
|
15687
|
+
onClick: focusDayInput,
|
|
15688
|
+
"aria-hidden": "true"
|
|
15689
|
+
}
|
|
15690
|
+
),
|
|
15691
|
+
/* @__PURE__ */ jsx161(
|
|
15692
|
+
Fieldset,
|
|
15693
|
+
{
|
|
15694
|
+
isFocused,
|
|
15695
|
+
invalid: isInvalid,
|
|
15696
|
+
isEmpty,
|
|
15697
|
+
isActivated: !isEmpty || isFocused,
|
|
15698
|
+
disabled,
|
|
15699
|
+
loading,
|
|
15700
|
+
readOnly,
|
|
15701
|
+
htmlFor: dayId,
|
|
15702
|
+
labelId,
|
|
15703
|
+
legend: label,
|
|
15704
|
+
label,
|
|
15705
|
+
tooltip,
|
|
15706
|
+
onClick: isMobile2 ? openWheel : showCoverage ? focusDayInput : void 0
|
|
15707
|
+
}
|
|
15708
|
+
),
|
|
15709
|
+
isMonthOpen && !isMobile2 && /* @__PURE__ */ jsx161("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 })
|
|
15710
|
+
] }),
|
|
15711
|
+
isMobile2 && /* @__PURE__ */ jsx161(
|
|
15712
|
+
DatePickerContent,
|
|
15713
|
+
{
|
|
15714
|
+
baseId: wheelBaseId,
|
|
15715
|
+
open: isWheelOpen,
|
|
15716
|
+
isMobile: true,
|
|
15717
|
+
label: label ?? t("pick_date"),
|
|
15718
|
+
title: mobileTitle ?? label ?? t("pick_date"),
|
|
15719
|
+
doneLabel: resolvedDoneLabel,
|
|
15720
|
+
monthLabels: wheel.months.map((m) => resolvedMonthLabels[m] ?? ""),
|
|
15721
|
+
days: wheel.days,
|
|
15722
|
+
years: wheel.years,
|
|
15723
|
+
monthIndex: wheel.monthIndex,
|
|
15724
|
+
dayIndex: wheel.dayIndex,
|
|
15725
|
+
yearIndex: wheel.yearIndex,
|
|
15726
|
+
monthScrollTop: wheel.monthScrollTop,
|
|
15727
|
+
dayScrollTop: wheel.dayScrollTop,
|
|
15728
|
+
yearScrollTop: wheel.yearScrollTop,
|
|
15729
|
+
monthListRef: wheel.monthListRef,
|
|
15730
|
+
dayListRef: wheel.dayListRef,
|
|
15731
|
+
yearListRef: wheel.yearListRef,
|
|
15732
|
+
onOpenChange: (next) => next ? openWheel() : closeWheel(),
|
|
15733
|
+
onDone: handleWheelDone,
|
|
15734
|
+
onColumnScroll: wheel.handleColumnScroll,
|
|
15735
|
+
onColumnKeyDown: wheel.handleColumnKeyDown,
|
|
15736
|
+
onOptionSelect: wheel.handleOptionSelect
|
|
15737
|
+
}
|
|
15738
|
+
),
|
|
15739
|
+
!error && optional && /* @__PURE__ */ jsx161("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
15740
|
+
!error && helperText && /* @__PURE__ */ jsx161("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
15741
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx161(
|
|
15742
|
+
FieldErrorMessage,
|
|
15743
|
+
{
|
|
15744
|
+
id: errorId,
|
|
15745
|
+
message: error,
|
|
15746
|
+
className: "mt-[1px] text-[14px]"
|
|
15747
|
+
}
|
|
15748
|
+
)
|
|
15749
|
+
] })
|
|
15750
|
+
}
|
|
15751
|
+
);
|
|
15752
|
+
}
|
|
15753
|
+
);
|
|
15754
|
+
|
|
15755
|
+
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
15756
|
+
import * as React64 from "react";
|
|
15757
|
+
import { useTranslation as useTranslation34 } from "react-i18next";
|
|
15758
|
+
|
|
15759
|
+
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
15760
|
+
import { differenceInDays, isAfter, isBefore, isSameDay } from "date-fns";
|
|
15761
|
+
|
|
15762
|
+
// src/dashboard/date-range-picker/dateUtils.ts
|
|
15763
|
+
import { format as formatDateFns, isValid, parse } from "date-fns";
|
|
15764
|
+
var DEFAULT_DISPLAY_FORMAT = "dd-MM-yyyy";
|
|
15765
|
+
var SUPPORTED_FORMATS = ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"];
|
|
15766
|
+
var formatDate = (format2 = DEFAULT_DISPLAY_FORMAT) => (date) => formatDateFns(date, format2);
|
|
15767
|
+
var parseDate = (displayFormat) => (dateStr) => {
|
|
15768
|
+
if (!dateStr) return void 0;
|
|
15769
|
+
const formats = displayFormat ? Array.from(/* @__PURE__ */ new Set([...SUPPORTED_FORMATS, displayFormat])) : SUPPORTED_FORMATS;
|
|
15770
|
+
for (const format2 of formats) {
|
|
15771
|
+
const parsed = parse(dateStr, format2, /* @__PURE__ */ new Date());
|
|
15772
|
+
if (isValid(parsed) && formatDateFns(parsed, format2) === dateStr) {
|
|
15773
|
+
return parsed;
|
|
15774
|
+
}
|
|
15775
|
+
}
|
|
15776
|
+
return void 0;
|
|
15777
|
+
};
|
|
15778
|
+
function toDate(input) {
|
|
15779
|
+
if (input === void 0 || input === null || input === "") return void 0;
|
|
15780
|
+
if (input instanceof Date) return Number.isNaN(input.getTime()) ? void 0 : input;
|
|
15781
|
+
const next = new Date(input);
|
|
15782
|
+
return Number.isNaN(next.getTime()) ? void 0 : next;
|
|
15783
|
+
}
|
|
15784
|
+
function resetTime(date) {
|
|
15785
|
+
const next = toDate(date) ?? /* @__PURE__ */ new Date();
|
|
15786
|
+
next.setHours(0, 0, 0, 0);
|
|
15787
|
+
return next;
|
|
15788
|
+
}
|
|
15789
|
+
|
|
15790
|
+
// src/dashboard/date-range-picker/isDayBlocked.ts
|
|
15791
|
+
var isDayBlocked = ({ minDate, maxDate, maxDays, minDays, datesRange }) => (date) => {
|
|
15792
|
+
const startDate = datesRange?.from ? resetTime(datesRange.from) : null;
|
|
15793
|
+
const endDate = datesRange?.to ? resetTime(datesRange.to) : null;
|
|
15794
|
+
const min = toDate(minDate);
|
|
15795
|
+
const max = toDate(maxDate);
|
|
15796
|
+
if (maxDays) {
|
|
15797
|
+
if (startDate && Math.abs(differenceInDays(date, startDate)) + 1 > maxDays) {
|
|
15798
|
+
return true;
|
|
15799
|
+
}
|
|
15800
|
+
if (endDate && Math.abs(differenceInDays(date, endDate)) + 1 > maxDays) {
|
|
15801
|
+
return true;
|
|
15802
|
+
}
|
|
15803
|
+
}
|
|
15804
|
+
if (minDays) {
|
|
15805
|
+
if (startDate && !isSameDay(date, startDate) && Math.abs(differenceInDays(date, startDate)) < minDays) {
|
|
15806
|
+
return true;
|
|
15807
|
+
}
|
|
15808
|
+
if (endDate && !isSameDay(date, endDate) && Math.abs(differenceInDays(date, endDate)) < minDays) {
|
|
15809
|
+
return true;
|
|
15810
|
+
}
|
|
15811
|
+
}
|
|
15812
|
+
if (min && isBefore(date, resetTime(min))) return true;
|
|
15813
|
+
if (max && isAfter(date, resetTime(max))) return true;
|
|
15814
|
+
return false;
|
|
15815
|
+
};
|
|
15816
|
+
|
|
15817
|
+
// src/dashboard/date-range-picker/createDisabledMatchers.ts
|
|
15818
|
+
var createDisabledMatchers = ({
|
|
15819
|
+
disabledDays,
|
|
15820
|
+
minDate,
|
|
15821
|
+
maxDate,
|
|
15822
|
+
maxDays,
|
|
15823
|
+
minDays,
|
|
15824
|
+
datesRange
|
|
15825
|
+
}) => {
|
|
15826
|
+
const result = [
|
|
15827
|
+
isDayBlocked({ minDate, maxDate, maxDays, minDays, datesRange })
|
|
15828
|
+
];
|
|
15829
|
+
if (Array.isArray(disabledDays)) result.push(...disabledDays);
|
|
15830
|
+
else if (disabledDays) result.push(disabledDays);
|
|
15831
|
+
return result;
|
|
15832
|
+
};
|
|
15833
|
+
|
|
15834
|
+
// src/dashboard/date-range-picker/hooks/useRangeValue.ts
|
|
15835
|
+
import * as React61 from "react";
|
|
15836
|
+
function useRangeValue({
|
|
15837
|
+
value: externalValue,
|
|
15838
|
+
defaultValue,
|
|
15839
|
+
onChange,
|
|
15840
|
+
name
|
|
15841
|
+
}) {
|
|
15842
|
+
const isControlled = externalValue !== void 0;
|
|
15843
|
+
const [internalValue, setInternalValue] = React61.useState(
|
|
15844
|
+
defaultValue
|
|
15845
|
+
);
|
|
15846
|
+
const value = isControlled ? externalValue : internalValue;
|
|
15847
|
+
const commit = React61.useCallback(
|
|
15848
|
+
(next) => {
|
|
15849
|
+
if (!isControlled) setInternalValue(next);
|
|
15850
|
+
if (next === void 0) {
|
|
15851
|
+
onChange?.(void 0, name);
|
|
15852
|
+
return;
|
|
15853
|
+
}
|
|
15854
|
+
if (next?.from && next?.to) onChange?.(next, name);
|
|
15855
|
+
},
|
|
15856
|
+
[isControlled, name, onChange]
|
|
15857
|
+
);
|
|
15858
|
+
return { value, commit };
|
|
15859
|
+
}
|
|
15860
|
+
|
|
15861
|
+
// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
|
|
15862
|
+
import * as React62 from "react";
|
|
15863
|
+
function useRangeTextInputs({
|
|
15864
|
+
value,
|
|
15865
|
+
format: format2,
|
|
15866
|
+
parse: parse3,
|
|
15867
|
+
onCommit,
|
|
15868
|
+
onBlur
|
|
15869
|
+
}) {
|
|
15870
|
+
const [fromText, setFromText] = React62.useState(value?.from ? format2(value.from) : "");
|
|
15871
|
+
const [toText, setToText] = React62.useState(value?.to ? format2(value.to) : "");
|
|
15872
|
+
React62.useEffect(() => {
|
|
15873
|
+
setFromText(value?.from ? format2(value.from) : "");
|
|
15874
|
+
setToText(value?.to ? format2(value.to) : "");
|
|
15875
|
+
}, [format2, value?.from, value?.to]);
|
|
15876
|
+
const handleFromBlur = React62.useCallback(() => {
|
|
15877
|
+
if (!fromText) {
|
|
15878
|
+
const next = { from: void 0, to: value?.to };
|
|
15879
|
+
onCommit(next);
|
|
15880
|
+
onBlur?.(next);
|
|
15881
|
+
return void 0;
|
|
15882
|
+
}
|
|
15883
|
+
const parsed = parse3(fromText);
|
|
15884
|
+
if (parsed) {
|
|
15885
|
+
const next = { from: parsed, to: value?.to };
|
|
15886
|
+
onCommit(next);
|
|
15887
|
+
onBlur?.(next);
|
|
15888
|
+
return parsed;
|
|
15889
|
+
}
|
|
15890
|
+
setFromText(value?.from ? format2(value.from) : "");
|
|
15891
|
+
return void 0;
|
|
15892
|
+
}, [format2, fromText, onBlur, onCommit, parse3, value?.from, value?.to]);
|
|
15893
|
+
const handleToBlur = React62.useCallback(() => {
|
|
15894
|
+
if (!toText) {
|
|
15895
|
+
const next = { from: value?.from, to: void 0 };
|
|
15896
|
+
onCommit(next);
|
|
15897
|
+
onBlur?.(next);
|
|
15898
|
+
return;
|
|
15899
|
+
}
|
|
15900
|
+
const parsed = parse3(toText);
|
|
15901
|
+
if (parsed) {
|
|
15902
|
+
const next = { from: value?.from, to: parsed };
|
|
15903
|
+
onCommit(next);
|
|
15904
|
+
onBlur?.(next);
|
|
15905
|
+
return;
|
|
15906
|
+
}
|
|
15907
|
+
setToText(value?.to ? format2(value.to) : "");
|
|
15908
|
+
}, [format2, onBlur, onCommit, parse3, toText, value?.from, value?.to]);
|
|
15909
|
+
return {
|
|
15910
|
+
fromText,
|
|
15911
|
+
toText,
|
|
15912
|
+
setFromText,
|
|
15913
|
+
setToText,
|
|
15914
|
+
handleFromBlur,
|
|
15915
|
+
handleToBlur
|
|
15916
|
+
};
|
|
15917
|
+
}
|
|
15918
|
+
|
|
15919
|
+
// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
|
|
15920
|
+
import * as React63 from "react";
|
|
15921
|
+
function useRangeMonthSync(value) {
|
|
15922
|
+
const isPreloadedRef = React63.useRef(false);
|
|
15923
|
+
const [month, setMonth] = React63.useState(value?.from ?? /* @__PURE__ */ new Date());
|
|
15924
|
+
React63.useEffect(() => {
|
|
15925
|
+
if (value?.from && !isPreloadedRef.current) {
|
|
15926
|
+
setMonth(value.from);
|
|
15927
|
+
isPreloadedRef.current = true;
|
|
15928
|
+
}
|
|
15929
|
+
}, [value?.from]);
|
|
15930
|
+
const syncMonthToValue = React63.useCallback((next) => {
|
|
15931
|
+
isPreloadedRef.current = true;
|
|
15932
|
+
if (next?.from) setMonth(next.from);
|
|
15933
|
+
}, []);
|
|
15934
|
+
const resetPreload = React63.useCallback(() => {
|
|
15935
|
+
isPreloadedRef.current = false;
|
|
15936
|
+
}, []);
|
|
15937
|
+
return { month, setMonth, syncMonthToValue, resetPreload };
|
|
15938
|
+
}
|
|
15939
|
+
|
|
15940
|
+
// src/dashboard/date-range-picker/utils/rangeSelection.ts
|
|
15941
|
+
import { isBefore as isBefore2 } from "date-fns";
|
|
15942
|
+
function resolveRangeSelection({
|
|
15943
|
+
previous,
|
|
15944
|
+
range,
|
|
15945
|
+
pickedDate
|
|
15946
|
+
}) {
|
|
15947
|
+
const startingNewRange = !previous?.from || previous.from && previous.to || range?.to && pickedDate && isBefore2(pickedDate, range.to);
|
|
15948
|
+
if (startingNewRange) {
|
|
15949
|
+
return { next: { from: pickedDate, to: void 0 }, shouldClose: false };
|
|
15950
|
+
}
|
|
15951
|
+
const next = range;
|
|
15952
|
+
const shouldClose = Boolean(
|
|
15953
|
+
next?.from && next?.to || pickedDate && range?.from && isBefore2(range.from, pickedDate)
|
|
15954
|
+
);
|
|
15955
|
+
return { next, shouldClose };
|
|
15956
|
+
}
|
|
15957
|
+
|
|
15958
|
+
// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
|
|
15959
|
+
import { CalendarDays, SquareX as SquareX3 } from "lucide-react";
|
|
15960
|
+
import { jsx as jsx162, jsxs as jsxs105 } from "react/jsx-runtime";
|
|
15961
|
+
var DEFAULT_PLACEHOLDER = "00-00-0000";
|
|
15962
|
+
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)]";
|
|
15963
|
+
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";
|
|
15964
|
+
function DateRangeInputs({
|
|
15965
|
+
fromId,
|
|
15966
|
+
toId,
|
|
15967
|
+
name,
|
|
15968
|
+
labelId,
|
|
15969
|
+
fromText,
|
|
15970
|
+
toText,
|
|
15971
|
+
fromPlaceholder = DEFAULT_PLACEHOLDER,
|
|
15972
|
+
toPlaceholder = DEFAULT_PLACEHOLDER,
|
|
15973
|
+
fromInputRef,
|
|
15974
|
+
toInputRef,
|
|
15975
|
+
isEmpty,
|
|
15976
|
+
isFocused,
|
|
15977
|
+
isBlocked,
|
|
15978
|
+
isInvalid,
|
|
15979
|
+
loading,
|
|
15980
|
+
readOnly,
|
|
15981
|
+
hideClearDates,
|
|
15982
|
+
hideCalendarIcon,
|
|
15983
|
+
isOpen,
|
|
15984
|
+
focusedInput,
|
|
15985
|
+
clearLabel,
|
|
15986
|
+
openCalendarLabel,
|
|
15987
|
+
onFromTextChange,
|
|
15988
|
+
onToTextChange,
|
|
15989
|
+
onFromFocus,
|
|
15990
|
+
onToFocus,
|
|
15991
|
+
onFromBlur,
|
|
15992
|
+
onToBlur,
|
|
15993
|
+
onRowClick,
|
|
15994
|
+
onReset,
|
|
15995
|
+
onToggleCalendar
|
|
15996
|
+
}) {
|
|
15997
|
+
const inputClass = cn(
|
|
15998
|
+
inputBaseClass,
|
|
15999
|
+
isBlocked && "cursor-not-allowed",
|
|
16000
|
+
loading && "cursor-progress"
|
|
16001
|
+
);
|
|
16002
|
+
return /* @__PURE__ */ jsxs105(
|
|
16003
|
+
"div",
|
|
16004
|
+
{
|
|
16005
|
+
className: cn(
|
|
16006
|
+
"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",
|
|
16007
|
+
isEmpty && !isFocused && "bg-[var(--chekin-color-surface-input-empty)]"
|
|
16008
|
+
),
|
|
16009
|
+
onClick: onRowClick,
|
|
16010
|
+
children: [
|
|
16011
|
+
/* @__PURE__ */ jsx162(
|
|
16012
|
+
"input",
|
|
16013
|
+
{
|
|
16014
|
+
ref: fromInputRef,
|
|
16015
|
+
id: fromId,
|
|
16016
|
+
name: name ? `${name}-from` : void 0,
|
|
16017
|
+
type: "text",
|
|
16018
|
+
autoComplete: "off",
|
|
16019
|
+
placeholder: fromPlaceholder,
|
|
16020
|
+
value: fromText,
|
|
16021
|
+
disabled: isBlocked,
|
|
16022
|
+
readOnly,
|
|
16023
|
+
"aria-invalid": isInvalid,
|
|
16024
|
+
"aria-labelledby": labelId,
|
|
16025
|
+
onChange: (event) => onFromTextChange(event.target.value),
|
|
16026
|
+
onFocus: onFromFocus,
|
|
16027
|
+
onBlur: onFromBlur,
|
|
16028
|
+
className: cn(
|
|
16029
|
+
inputClass,
|
|
16030
|
+
"max-w-[110px] pl-[14px] pr-0",
|
|
16031
|
+
isEmpty && !isFocused && "placeholder:invisible"
|
|
16032
|
+
)
|
|
16033
|
+
}
|
|
16034
|
+
),
|
|
16035
|
+
/* @__PURE__ */ jsx162(
|
|
16036
|
+
"span",
|
|
16037
|
+
{
|
|
16038
|
+
"aria-hidden": "true",
|
|
16039
|
+
className: cn(
|
|
16040
|
+
"shrink-0 px-2 text-[18px] leading-none text-[var(--chekin-color-gray-2)]",
|
|
16041
|
+
isEmpty && !isFocused && "invisible"
|
|
16042
|
+
),
|
|
16043
|
+
children: "\u2192"
|
|
16044
|
+
}
|
|
16045
|
+
),
|
|
16046
|
+
/* @__PURE__ */ jsx162(
|
|
16047
|
+
"input",
|
|
16048
|
+
{
|
|
16049
|
+
ref: toInputRef,
|
|
16050
|
+
id: toId,
|
|
16051
|
+
name: name ? `${name}-to` : void 0,
|
|
16052
|
+
type: "text",
|
|
16053
|
+
autoComplete: "off",
|
|
16054
|
+
placeholder: toPlaceholder,
|
|
16055
|
+
value: toText,
|
|
16056
|
+
disabled: isBlocked,
|
|
16057
|
+
readOnly,
|
|
16058
|
+
"aria-invalid": isInvalid,
|
|
16059
|
+
"aria-labelledby": labelId,
|
|
16060
|
+
onChange: (event) => onToTextChange(event.target.value),
|
|
16061
|
+
onFocus: onToFocus,
|
|
16062
|
+
onBlur: onToBlur,
|
|
16063
|
+
className: cn(
|
|
16064
|
+
inputClass,
|
|
16065
|
+
"px-0",
|
|
16066
|
+
isEmpty && !isFocused && "placeholder:invisible"
|
|
16067
|
+
)
|
|
16068
|
+
}
|
|
16069
|
+
),
|
|
16070
|
+
/* @__PURE__ */ jsxs105("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
16071
|
+
loading && /* @__PURE__ */ jsx162(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
16072
|
+
!readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx162(
|
|
16073
|
+
"button",
|
|
16074
|
+
{
|
|
16075
|
+
type: "button",
|
|
16076
|
+
disabled: isBlocked,
|
|
16077
|
+
onClick: onReset,
|
|
16078
|
+
className: iconButtonClass,
|
|
16079
|
+
"aria-label": clearLabel,
|
|
16080
|
+
children: /* @__PURE__ */ jsx162(SquareX3, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
|
|
16081
|
+
}
|
|
16082
|
+
),
|
|
16083
|
+
!readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx162(
|
|
16084
|
+
"button",
|
|
16085
|
+
{
|
|
16086
|
+
type: "button",
|
|
16087
|
+
disabled: isBlocked,
|
|
16088
|
+
onClick: onToggleCalendar,
|
|
16089
|
+
"aria-pressed": isOpen,
|
|
16090
|
+
className: cn(
|
|
16091
|
+
"flex h-6 w-6 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 outline-none disabled:cursor-not-allowed",
|
|
16092
|
+
focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
|
|
16093
|
+
),
|
|
16094
|
+
"aria-label": openCalendarLabel,
|
|
16095
|
+
children: /* @__PURE__ */ jsx162(CalendarDays, { size: 18 })
|
|
16096
|
+
}
|
|
16097
|
+
)
|
|
16098
|
+
] })
|
|
16099
|
+
]
|
|
16100
|
+
}
|
|
16101
|
+
);
|
|
16102
|
+
}
|
|
16103
|
+
|
|
16104
|
+
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
16105
|
+
import { ArrowLeft, ArrowRight } from "lucide-react";
|
|
16106
|
+
import {
|
|
16107
|
+
DayPicker as DayPicker2
|
|
16108
|
+
} from "react-day-picker";
|
|
16109
|
+
|
|
16110
|
+
// src/dashboard/_calendar/dashboardCalendarClassNames.ts
|
|
16111
|
+
var dashboardCalendarClassNames = {
|
|
16112
|
+
root: "relative",
|
|
16113
|
+
months: "relative flex flex-col gap-6 sm:flex-row sm:gap-8",
|
|
16114
|
+
month: "w-full",
|
|
16115
|
+
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)]",
|
|
16116
|
+
caption_label: "px-3 text-[18px] font-normal",
|
|
16117
|
+
nav: "absolute left-0 right-0 top-[4px] z-10 flex justify-between px-[6px] pointer-events-none",
|
|
16118
|
+
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",
|
|
16119
|
+
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",
|
|
16120
|
+
weekday: "size-9 p-0 text-[14px] font-normal text-[var(--chekin-color-brand-blue)]",
|
|
16121
|
+
day_button: [
|
|
16122
|
+
"relative mx-auto flex size-9 items-center justify-center whitespace-nowrap rounded-full p-0",
|
|
16123
|
+
"text-[14px] font-light text-[var(--chekin-color-brand-navy)] outline-offset-2",
|
|
16124
|
+
"focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--chekin-color-brand-blue)]/60",
|
|
16125
|
+
"hover:bg-[#f0f8ff]",
|
|
16126
|
+
"group-data-[selected]:bg-[var(--chekin-color-brand-blue)] group-data-[selected]:text-white",
|
|
16127
|
+
"group-data-[disabled]:pointer-events-none group-data-[disabled]:text-[var(--chekin-color-gray-2)] group-data-[disabled]:line-through",
|
|
16128
|
+
"group-data-[outside]:text-[var(--chekin-color-gray-2)]",
|
|
16129
|
+
"group-data-[outside]:group-data-[selected]:text-white",
|
|
16130
|
+
"group-[.range-middle]:rounded-none group-[.range-middle]:bg-transparent",
|
|
16131
|
+
"group-data-[selected]:group-[.range-middle]:bg-[#edf7ff] group-data-[selected]:group-[.range-middle]:text-[var(--chekin-color-brand-navy)]"
|
|
16132
|
+
].join(" "),
|
|
16133
|
+
day: "group size-9 p-0 text-center text-[14px]",
|
|
16134
|
+
range_start: "range-start",
|
|
16135
|
+
range_end: "range-end",
|
|
16136
|
+
range_middle: "range-middle",
|
|
16137
|
+
today: [
|
|
16138
|
+
"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2",
|
|
16139
|
+
"*:after:z-10 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full",
|
|
16140
|
+
"*:after:bg-[var(--chekin-color-brand-blue)]",
|
|
16141
|
+
"[&[data-selected]:not(.range-middle)>*]:after:bg-white"
|
|
16142
|
+
].join(" "),
|
|
16143
|
+
outside: "text-[var(--chekin-color-gray-2)]",
|
|
16144
|
+
hidden: "invisible"
|
|
16145
|
+
};
|
|
16146
|
+
|
|
16147
|
+
// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
|
|
16148
|
+
import { jsx as jsx163 } from "react/jsx-runtime";
|
|
16149
|
+
var calendarComponents = {
|
|
16150
|
+
Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx163(ArrowLeft, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ jsx163(ArrowRight, { size: 14, strokeWidth: 2, "aria-hidden": "true" })
|
|
16151
|
+
};
|
|
16152
|
+
function DateRangeCalendar({
|
|
16153
|
+
value,
|
|
16154
|
+
month,
|
|
16155
|
+
onMonthChange,
|
|
16156
|
+
onSelect,
|
|
16157
|
+
numberOfMonths,
|
|
16158
|
+
minDate,
|
|
16159
|
+
maxDate,
|
|
16160
|
+
maxDays,
|
|
16161
|
+
minDays,
|
|
16162
|
+
autoFocus,
|
|
16163
|
+
disabledMatchers,
|
|
16164
|
+
components: customComponents,
|
|
16165
|
+
...dayPickerProps
|
|
16166
|
+
}) {
|
|
16167
|
+
return /* @__PURE__ */ jsx163(
|
|
16168
|
+
DayPicker2,
|
|
16169
|
+
{
|
|
16170
|
+
mode: "range",
|
|
16171
|
+
selected: value,
|
|
16172
|
+
month,
|
|
16173
|
+
onMonthChange,
|
|
16174
|
+
onSelect,
|
|
16175
|
+
numberOfMonths,
|
|
16176
|
+
showOutsideDays: true,
|
|
16177
|
+
startMonth: minDate,
|
|
16178
|
+
endMonth: maxDate,
|
|
16179
|
+
max: maxDays,
|
|
16180
|
+
min: minDays,
|
|
16181
|
+
autoFocus,
|
|
16182
|
+
classNames: dashboardCalendarClassNames,
|
|
16183
|
+
components: { ...calendarComponents, ...customComponents },
|
|
16184
|
+
className: "p-5",
|
|
16185
|
+
disabled: disabledMatchers,
|
|
16186
|
+
...dayPickerProps
|
|
16187
|
+
}
|
|
16188
|
+
);
|
|
16189
|
+
}
|
|
16190
|
+
|
|
16191
|
+
// src/dashboard/date-range-picker/components/DateRangePopover.tsx
|
|
16192
|
+
import { jsx as jsx164, jsxs as jsxs106 } from "react/jsx-runtime";
|
|
16193
|
+
function DateRangePopover({
|
|
16194
|
+
isOpen,
|
|
16195
|
+
isMobile: isMobile2,
|
|
16196
|
+
openDirection,
|
|
16197
|
+
drawerTitle,
|
|
16198
|
+
drawerDescription,
|
|
16199
|
+
onClose,
|
|
16200
|
+
children
|
|
16201
|
+
}) {
|
|
16202
|
+
if (!isOpen) return null;
|
|
16203
|
+
if (isMobile2) {
|
|
16204
|
+
return /* @__PURE__ */ jsx164(
|
|
16205
|
+
Drawer,
|
|
16206
|
+
{
|
|
16207
|
+
open: isOpen,
|
|
16208
|
+
onOpenChange: (next) => {
|
|
16209
|
+
if (!next) onClose();
|
|
16210
|
+
},
|
|
16211
|
+
children: /* @__PURE__ */ jsxs106(
|
|
16212
|
+
DrawerContent,
|
|
16213
|
+
{
|
|
16214
|
+
onClose,
|
|
16215
|
+
lockScroll: false,
|
|
16216
|
+
className: "max-h-[calc(100vh-1rem)]",
|
|
16217
|
+
children: [
|
|
16218
|
+
/* @__PURE__ */ jsx164(DrawerTitle, { className: "sr-only", children: drawerTitle }),
|
|
16219
|
+
/* @__PURE__ */ jsx164(DrawerDescription, { className: "sr-only", children: drawerDescription }),
|
|
16220
|
+
/* @__PURE__ */ jsx164("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
|
|
16221
|
+
]
|
|
16222
|
+
}
|
|
16223
|
+
)
|
|
16224
|
+
}
|
|
16225
|
+
);
|
|
16226
|
+
}
|
|
16227
|
+
return /* @__PURE__ */ jsx164(
|
|
16228
|
+
"div",
|
|
16229
|
+
{
|
|
16230
|
+
className: cn(
|
|
16231
|
+
"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)]",
|
|
16232
|
+
openDirection === "up" ? "bottom-full mb-2" : "top-full mt-1"
|
|
16233
|
+
),
|
|
16234
|
+
children
|
|
16235
|
+
}
|
|
16236
|
+
);
|
|
16237
|
+
}
|
|
16238
|
+
|
|
16239
|
+
// src/dashboard/date-range-picker/DateRangePicker.tsx
|
|
16240
|
+
import { jsx as jsx165, jsxs as jsxs107 } from "react/jsx-runtime";
|
|
16241
|
+
var DashboardDateRangePicker = React64.forwardRef(function DashboardDateRangePicker2({
|
|
16242
|
+
label,
|
|
16243
|
+
value: externalValue,
|
|
16244
|
+
defaultValue,
|
|
16245
|
+
onChange,
|
|
16246
|
+
onBlur,
|
|
16247
|
+
name,
|
|
16248
|
+
invalid,
|
|
16249
|
+
error,
|
|
16250
|
+
disabled,
|
|
16251
|
+
readOnly,
|
|
16252
|
+
loading,
|
|
16253
|
+
optional,
|
|
16254
|
+
tooltip,
|
|
16255
|
+
className,
|
|
16256
|
+
displayFormat = DEFAULT_DISPLAY_FORMAT,
|
|
16257
|
+
fromPlaceholder,
|
|
16258
|
+
toPlaceholder,
|
|
16259
|
+
minDate,
|
|
16260
|
+
maxDate,
|
|
16261
|
+
minDays,
|
|
16262
|
+
maxDays,
|
|
16263
|
+
disabledDays,
|
|
16264
|
+
hideClearDates,
|
|
16265
|
+
hideCalendarIcon,
|
|
16266
|
+
hideErrorMessage,
|
|
16267
|
+
helperText,
|
|
16268
|
+
width,
|
|
16269
|
+
numberOfMonths,
|
|
16270
|
+
openDirection = "down",
|
|
16271
|
+
autoFocusOnOpen = true,
|
|
16272
|
+
components: customComponents,
|
|
16273
|
+
...dayPickerProps
|
|
16274
|
+
}, ref) {
|
|
16275
|
+
const containerRef = React64.useRef(null);
|
|
16276
|
+
const fromInputRef = React64.useRef(null);
|
|
16277
|
+
const toInputRef = React64.useRef(null);
|
|
16278
|
+
const reactId = React64.useId();
|
|
16279
|
+
const baseId = name ?? `dash-daterange-${reactId}`;
|
|
16280
|
+
const fromId = `${baseId}-from`;
|
|
16281
|
+
const toId = `${baseId}-to`;
|
|
16282
|
+
const labelId = `${baseId}-label`;
|
|
16283
|
+
const errorId = `${baseId}-error`;
|
|
16284
|
+
const normalizedValue = React64.useMemo(() => {
|
|
16285
|
+
if (externalValue === void 0) return void 0;
|
|
16286
|
+
return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
|
|
16287
|
+
}, [externalValue]);
|
|
16288
|
+
const normalizedDefaultValue = React64.useMemo(() => {
|
|
16289
|
+
if (defaultValue === void 0) return void 0;
|
|
16290
|
+
return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
|
|
16291
|
+
}, [defaultValue]);
|
|
16292
|
+
const { value, commit } = useRangeValue({
|
|
16293
|
+
value: normalizedValue,
|
|
16294
|
+
defaultValue: normalizedDefaultValue,
|
|
16295
|
+
onChange,
|
|
16296
|
+
name
|
|
16297
|
+
});
|
|
16298
|
+
const normalizedMinDate = React64.useMemo(() => toDate(minDate), [minDate]);
|
|
16299
|
+
const normalizedMaxDate = React64.useMemo(() => toDate(maxDate), [maxDate]);
|
|
16300
|
+
const formatter = React64.useMemo(() => formatDate(displayFormat), [displayFormat]);
|
|
16301
|
+
const parser = React64.useMemo(() => parseDate(displayFormat), [displayFormat]);
|
|
16302
|
+
const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({ value, format: formatter, parse: parser, onCommit: commit, onBlur });
|
|
16303
|
+
const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
|
|
16304
|
+
const [isOpen, setIsOpen] = React64.useState(false);
|
|
16305
|
+
const [focusedInput, setFocusedInput] = React64.useState(null);
|
|
16306
|
+
const [autoFocus, setAutoFocus] = React64.useState(false);
|
|
16307
|
+
const isMobile2 = useIsMobile();
|
|
16308
|
+
const { t } = useTranslation34();
|
|
16309
|
+
const drawerTitle = label ?? t("select_dates");
|
|
16310
|
+
const drawerDescription = label ?? t("pick_date_range");
|
|
16311
|
+
const isEmpty = !value?.from && !value?.to;
|
|
16312
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
16313
|
+
const isInvalid = Boolean(invalid || error);
|
|
16314
|
+
const isFocused = focusedInput !== null || isOpen;
|
|
16315
|
+
const wrapperWidth = toCssSize(width);
|
|
16316
|
+
const monthsToShow = numberOfMonths ?? (isMobile2 ? 1 : 2);
|
|
16317
|
+
const closeCalendar = React64.useCallback(() => {
|
|
16318
|
+
setIsOpen(false);
|
|
16319
|
+
setFocusedInput(null);
|
|
16320
|
+
setAutoFocus(false);
|
|
16321
|
+
if (value?.from) setMonth(value.from);
|
|
16322
|
+
}, [setMonth, value?.from]);
|
|
16323
|
+
const openCalendar = React64.useCallback(() => {
|
|
16324
|
+
if (isBlocked || readOnly) return;
|
|
16325
|
+
setIsOpen(true);
|
|
16326
|
+
}, [isBlocked, readOnly]);
|
|
16327
|
+
useOutsideClick({
|
|
16328
|
+
elementRef: containerRef,
|
|
16329
|
+
onOutsideClick: closeCalendar,
|
|
16330
|
+
isDisabled: !isOpen || isMobile2
|
|
16331
|
+
});
|
|
16332
|
+
const handlePickerChange = React64.useCallback(
|
|
16333
|
+
(range, pickedDate) => {
|
|
16334
|
+
const { next, shouldClose } = resolveRangeSelection({
|
|
16335
|
+
previous: value,
|
|
16336
|
+
range,
|
|
16337
|
+
pickedDate
|
|
16338
|
+
});
|
|
16339
|
+
syncMonthToValue(next);
|
|
16340
|
+
commit(next);
|
|
16341
|
+
if (shouldClose) closeCalendar();
|
|
16342
|
+
},
|
|
16343
|
+
[closeCalendar, commit, syncMonthToValue, value]
|
|
16344
|
+
);
|
|
16345
|
+
const handleReset = (event) => {
|
|
16346
|
+
event.preventDefault();
|
|
16347
|
+
event.stopPropagation();
|
|
16348
|
+
commit(void 0);
|
|
16349
|
+
setFromText("");
|
|
16350
|
+
setToText("");
|
|
16351
|
+
setMonth(/* @__PURE__ */ new Date());
|
|
16352
|
+
};
|
|
16353
|
+
const disabledMatchers = React64.useMemo(
|
|
16354
|
+
() => createDisabledMatchers({
|
|
16355
|
+
minDate: normalizedMinDate,
|
|
16356
|
+
maxDate: normalizedMaxDate,
|
|
16357
|
+
maxDays,
|
|
16358
|
+
minDays,
|
|
16359
|
+
datesRange: value,
|
|
16360
|
+
disabledDays
|
|
16361
|
+
}),
|
|
16362
|
+
[disabledDays, maxDays, minDays, normalizedMaxDate, normalizedMinDate, value]
|
|
16363
|
+
);
|
|
16364
|
+
const toggleCalendar = () => {
|
|
16365
|
+
if (isOpen) {
|
|
16366
|
+
closeCalendar();
|
|
16367
|
+
return;
|
|
16368
|
+
}
|
|
16369
|
+
openCalendar();
|
|
16370
|
+
if (autoFocusOnOpen) setAutoFocus(true);
|
|
16371
|
+
};
|
|
16372
|
+
React64.useImperativeHandle(
|
|
16373
|
+
ref,
|
|
16374
|
+
() => ({
|
|
16375
|
+
setDateRange: (range) => {
|
|
16376
|
+
syncMonthToValue(range);
|
|
16377
|
+
commit(range);
|
|
16378
|
+
setFromText(range?.from ? formatter(range.from) : "");
|
|
16379
|
+
setToText(range?.to ? formatter(range.to) : "");
|
|
16380
|
+
},
|
|
16381
|
+
focus: () => fromInputRef.current?.focus(),
|
|
16382
|
+
open: openCalendar,
|
|
16383
|
+
close: closeCalendar
|
|
16384
|
+
}),
|
|
16385
|
+
[closeCalendar, commit, formatter, openCalendar, setFromText, setToText, syncMonthToValue]
|
|
16386
|
+
);
|
|
16387
|
+
return /* @__PURE__ */ jsx165(
|
|
16388
|
+
"div",
|
|
16389
|
+
{
|
|
16390
|
+
ref: containerRef,
|
|
16391
|
+
className: cn(
|
|
16392
|
+
"relative w-full max-w-[var(--max-field-width)]",
|
|
16393
|
+
disabled && "cursor-not-allowed opacity-50",
|
|
16394
|
+
loading && "cursor-progress",
|
|
16395
|
+
className
|
|
16396
|
+
),
|
|
16397
|
+
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16398
|
+
children: /* @__PURE__ */ jsxs107("div", { className: "relative min-h-[68px] w-full", children: [
|
|
16399
|
+
/* @__PURE__ */ jsxs107("div", { className: "relative w-full", children: [
|
|
16400
|
+
/* @__PURE__ */ jsx165(
|
|
16401
|
+
DateRangeInputs,
|
|
16402
|
+
{
|
|
16403
|
+
fromId,
|
|
16404
|
+
toId,
|
|
16405
|
+
name,
|
|
16406
|
+
labelId,
|
|
16407
|
+
fromText,
|
|
16408
|
+
toText,
|
|
16409
|
+
fromPlaceholder,
|
|
16410
|
+
toPlaceholder,
|
|
16411
|
+
fromInputRef,
|
|
16412
|
+
toInputRef,
|
|
16413
|
+
isEmpty,
|
|
16414
|
+
isFocused,
|
|
16415
|
+
isBlocked,
|
|
16416
|
+
isInvalid,
|
|
16417
|
+
loading,
|
|
16418
|
+
readOnly,
|
|
16419
|
+
hideClearDates,
|
|
16420
|
+
hideCalendarIcon,
|
|
16421
|
+
isOpen,
|
|
16422
|
+
focusedInput,
|
|
16423
|
+
clearLabel: t("clear_dates"),
|
|
16424
|
+
openCalendarLabel: t("open_calendar"),
|
|
16425
|
+
onFromTextChange: setFromText,
|
|
16426
|
+
onToTextChange: setToText,
|
|
16427
|
+
onFromFocus: () => {
|
|
16428
|
+
setFocusedInput("from");
|
|
16429
|
+
if (!readOnly && !isBlocked) setIsOpen(true);
|
|
16430
|
+
},
|
|
16431
|
+
onToFocus: () => {
|
|
16432
|
+
setFocusedInput("to");
|
|
16433
|
+
if (!readOnly && !isBlocked) setIsOpen(true);
|
|
16434
|
+
},
|
|
16435
|
+
onFromBlur: () => {
|
|
16436
|
+
setFocusedInput((prev) => prev === "from" ? null : prev);
|
|
16437
|
+
handleFromBlur();
|
|
16438
|
+
},
|
|
16439
|
+
onToBlur: () => {
|
|
16440
|
+
setFocusedInput((prev) => prev === "to" ? null : prev);
|
|
16441
|
+
handleToBlur();
|
|
16442
|
+
},
|
|
16443
|
+
onRowClick: () => {
|
|
16444
|
+
if (isBlocked || readOnly) return;
|
|
16445
|
+
if (!focusedInput) fromInputRef.current?.focus();
|
|
16446
|
+
},
|
|
16447
|
+
onReset: handleReset,
|
|
16448
|
+
onToggleCalendar: toggleCalendar
|
|
16449
|
+
}
|
|
16450
|
+
),
|
|
16451
|
+
/* @__PURE__ */ jsx165(
|
|
16452
|
+
Fieldset,
|
|
16453
|
+
{
|
|
16454
|
+
isFocused,
|
|
16455
|
+
invalid: isInvalid,
|
|
16456
|
+
isEmpty,
|
|
16457
|
+
isActivated: !isEmpty || isFocused,
|
|
16458
|
+
disabled,
|
|
16459
|
+
loading,
|
|
16460
|
+
readOnly,
|
|
16461
|
+
htmlFor: fromId,
|
|
16462
|
+
labelId,
|
|
16463
|
+
legend: label,
|
|
16464
|
+
label,
|
|
16465
|
+
tooltip
|
|
16466
|
+
}
|
|
16467
|
+
),
|
|
16468
|
+
/* @__PURE__ */ jsx165(
|
|
16469
|
+
DateRangePopover,
|
|
16470
|
+
{
|
|
16471
|
+
isOpen: isOpen && !isMobile2,
|
|
16472
|
+
isMobile: false,
|
|
16473
|
+
openDirection,
|
|
16474
|
+
drawerTitle,
|
|
16475
|
+
drawerDescription,
|
|
16476
|
+
onClose: closeCalendar,
|
|
16477
|
+
children: /* @__PURE__ */ jsx165(
|
|
16478
|
+
DateRangeCalendar,
|
|
16479
|
+
{
|
|
16480
|
+
value,
|
|
16481
|
+
month,
|
|
16482
|
+
onMonthChange: setMonth,
|
|
16483
|
+
onSelect: handlePickerChange,
|
|
16484
|
+
numberOfMonths: monthsToShow,
|
|
16485
|
+
minDate: normalizedMinDate,
|
|
16486
|
+
maxDate: normalizedMaxDate,
|
|
16487
|
+
maxDays,
|
|
16488
|
+
minDays,
|
|
16489
|
+
autoFocus,
|
|
16490
|
+
disabledMatchers,
|
|
16491
|
+
components: customComponents,
|
|
16492
|
+
...dayPickerProps
|
|
16493
|
+
}
|
|
16494
|
+
)
|
|
16495
|
+
}
|
|
16496
|
+
)
|
|
16497
|
+
] }),
|
|
16498
|
+
/* @__PURE__ */ jsx165(
|
|
16499
|
+
DateRangePopover,
|
|
16500
|
+
{
|
|
16501
|
+
isOpen: isOpen && isMobile2,
|
|
16502
|
+
isMobile: true,
|
|
16503
|
+
openDirection,
|
|
16504
|
+
drawerTitle,
|
|
16505
|
+
drawerDescription,
|
|
16506
|
+
onClose: closeCalendar,
|
|
16507
|
+
children: /* @__PURE__ */ jsx165(
|
|
16508
|
+
DateRangeCalendar,
|
|
16509
|
+
{
|
|
16510
|
+
value,
|
|
16511
|
+
month,
|
|
16512
|
+
onMonthChange: setMonth,
|
|
16513
|
+
onSelect: handlePickerChange,
|
|
16514
|
+
numberOfMonths: monthsToShow,
|
|
16515
|
+
minDate: normalizedMinDate,
|
|
16516
|
+
maxDate: normalizedMaxDate,
|
|
16517
|
+
maxDays,
|
|
16518
|
+
minDays,
|
|
16519
|
+
autoFocus,
|
|
16520
|
+
disabledMatchers,
|
|
16521
|
+
components: customComponents,
|
|
16522
|
+
...dayPickerProps
|
|
16523
|
+
}
|
|
16524
|
+
)
|
|
16525
|
+
}
|
|
16526
|
+
),
|
|
16527
|
+
!error && optional && /* @__PURE__ */ jsx165("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
16528
|
+
!error && helperText && /* @__PURE__ */ jsx165("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16529
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx165(
|
|
16530
|
+
FieldErrorMessage,
|
|
16531
|
+
{
|
|
16532
|
+
id: errorId,
|
|
16533
|
+
message: error,
|
|
16534
|
+
className: "mt-[1px] text-[14px]"
|
|
16535
|
+
}
|
|
16536
|
+
)
|
|
16537
|
+
] })
|
|
16538
|
+
}
|
|
16539
|
+
);
|
|
16540
|
+
});
|
|
16541
|
+
|
|
16542
|
+
// src/dashboard/date-range-picker/useValidateDates.ts
|
|
16543
|
+
import * as React65 from "react";
|
|
16544
|
+
import { useTranslation as useTranslation35 } from "react-i18next";
|
|
16545
|
+
import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
|
|
16546
|
+
import {
|
|
16547
|
+
dateMatchModifiers,
|
|
16548
|
+
dateLib
|
|
16549
|
+
} from "react-day-picker";
|
|
16550
|
+
function isAfterMax(date, maxDate) {
|
|
16551
|
+
return isAfter2(resetTime(date), resetTime(maxDate));
|
|
16552
|
+
}
|
|
16553
|
+
function isBeforeMin(date, minDate) {
|
|
16554
|
+
return isBefore3(resetTime(date), resetTime(minDate));
|
|
16555
|
+
}
|
|
16556
|
+
function useValidateDates({
|
|
16557
|
+
minDays,
|
|
16558
|
+
maxDays,
|
|
16559
|
+
minDate,
|
|
16560
|
+
maxDate,
|
|
16561
|
+
disabledDays,
|
|
16562
|
+
onError,
|
|
16563
|
+
onSuccess,
|
|
16564
|
+
displayFormat
|
|
16565
|
+
}) {
|
|
16566
|
+
const { t } = useTranslation35();
|
|
16567
|
+
const handleError = useEvent(onError);
|
|
16568
|
+
const handleSuccess = useEvent(onSuccess);
|
|
16569
|
+
const errorFormatter = React65.useMemo(
|
|
16570
|
+
() => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
|
|
16571
|
+
[displayFormat]
|
|
16572
|
+
);
|
|
16573
|
+
const validateDates = React65.useCallback(
|
|
16574
|
+
(dates) => {
|
|
16575
|
+
const startDate = dates?.from;
|
|
16576
|
+
const endDate = dates?.to;
|
|
16577
|
+
if (!startDate || !endDate) return true;
|
|
16578
|
+
if (disabledDays && (dateMatchModifiers(startDate, disabledDays, dateLib) || dateMatchModifiers(endDate, disabledDays, dateLib))) {
|
|
16579
|
+
handleError(t("wrong_period_of_dates"));
|
|
16580
|
+
return false;
|
|
16581
|
+
}
|
|
16582
|
+
if (isAfter2(startDate, endDate)) {
|
|
16583
|
+
handleError(t("wrong_period_of_dates"));
|
|
16584
|
+
return false;
|
|
16585
|
+
}
|
|
16586
|
+
if (maxDays && differenceInDays2(endDate, startDate) + 1 > maxDays) {
|
|
16587
|
+
handleError(t("date_range_max_days_error", { count: maxDays }));
|
|
16588
|
+
return false;
|
|
16589
|
+
}
|
|
16590
|
+
if (minDays && differenceInDays2(endDate, startDate) < minDays) {
|
|
16591
|
+
handleError(t("date_range_min_days_error", { count: minDays }));
|
|
16592
|
+
return false;
|
|
16593
|
+
}
|
|
16594
|
+
const min = toDate(minDate);
|
|
16595
|
+
const max = toDate(maxDate);
|
|
16596
|
+
if (min && isBeforeMin(startDate, min)) {
|
|
16597
|
+
handleError(t("past_dates", { minDate: errorFormatter(resetTime(min)) }));
|
|
16598
|
+
return false;
|
|
16599
|
+
}
|
|
16600
|
+
if (max && (isAfterMax(startDate, max) || isAfterMax(endDate, max))) {
|
|
16601
|
+
handleError(t("future_dates", { maxDate: errorFormatter(resetTime(max)) }));
|
|
16602
|
+
return false;
|
|
16603
|
+
}
|
|
16604
|
+
handleSuccess();
|
|
16605
|
+
return true;
|
|
16606
|
+
},
|
|
16607
|
+
[
|
|
16608
|
+
disabledDays,
|
|
16609
|
+
errorFormatter,
|
|
16610
|
+
handleError,
|
|
16611
|
+
handleSuccess,
|
|
16612
|
+
maxDate,
|
|
16613
|
+
maxDays,
|
|
16614
|
+
minDate,
|
|
16615
|
+
minDays,
|
|
16616
|
+
t
|
|
16617
|
+
]
|
|
16618
|
+
);
|
|
16619
|
+
return { validateDates };
|
|
16620
|
+
}
|
|
16621
|
+
|
|
16622
|
+
// src/dashboard/time-picker/TimePicker.tsx
|
|
16623
|
+
import * as React66 from "react";
|
|
16624
|
+
import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
|
|
16625
|
+
import { jsx as jsx166 } from "react/jsx-runtime";
|
|
16626
|
+
var SHORT_TIME_FORMAT = "HH:mm";
|
|
16627
|
+
function parseTime(value) {
|
|
16628
|
+
return parse2(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
|
|
16629
|
+
}
|
|
16630
|
+
function getRange(settings) {
|
|
16631
|
+
const min = parseTime(settings.minTime);
|
|
16632
|
+
const max = settings.maxTime === "00:00" && settings.addNextDay ? addDays(parseTime(settings.maxTime), 1) : parseTime(settings.maxTime);
|
|
16633
|
+
return { min, max };
|
|
16634
|
+
}
|
|
16635
|
+
function buildOptions(settings) {
|
|
16636
|
+
const intervalUnit = settings.intervalUnit ?? "M";
|
|
16637
|
+
const interval = settings.interval ?? (intervalUnit === "H" ? 1 : 60);
|
|
16638
|
+
const minTime = settings.minTime ?? "00:00";
|
|
16639
|
+
const maxTime = settings.maxTime ?? (intervalUnit === "H" ? "23:00" : "23:00");
|
|
16640
|
+
const addNextDay = settings.addNextDay !== false;
|
|
16641
|
+
const { min, max } = getRange({ intervalUnit, interval, minTime, maxTime, addNextDay });
|
|
16642
|
+
const options = [];
|
|
16643
|
+
let current = new Date(min.getTime());
|
|
16644
|
+
while (current.getTime() <= max.getTime()) {
|
|
16645
|
+
const text = format(current, SHORT_TIME_FORMAT);
|
|
16646
|
+
options.push({ value: text, label: text });
|
|
16647
|
+
current = intervalUnit === "H" ? addHours(current, interval) : addMinutes(current, interval);
|
|
16648
|
+
}
|
|
16649
|
+
return options;
|
|
16650
|
+
}
|
|
16651
|
+
var FORMAT_SETTINGS = {
|
|
16652
|
+
time: { intervalUnit: "M", interval: 30, minTime: "00:00", maxTime: "23:30" },
|
|
16653
|
+
timeEach15Minutes: {
|
|
16654
|
+
intervalUnit: "M",
|
|
16655
|
+
interval: 15,
|
|
16656
|
+
minTime: "00:00",
|
|
16657
|
+
maxTime: "23:45"
|
|
16658
|
+
},
|
|
16659
|
+
timeEach30Minutes: {
|
|
16660
|
+
intervalUnit: "M",
|
|
16661
|
+
interval: 30,
|
|
16662
|
+
minTime: "00:00",
|
|
16663
|
+
maxTime: "23:30"
|
|
16664
|
+
},
|
|
16665
|
+
hours: { intervalUnit: "H", interval: 1, minTime: "00:00", maxTime: "23:00" }
|
|
16666
|
+
};
|
|
16667
|
+
var DashboardTimePicker = React66.forwardRef(
|
|
16668
|
+
function DashboardTimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
|
|
16669
|
+
const resolvedOptions = React66.useMemo(() => {
|
|
16670
|
+
if (options) return options;
|
|
16671
|
+
const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
|
|
16672
|
+
return buildOptions(settings);
|
|
16673
|
+
}, [formatName, options, timeSettings]);
|
|
16674
|
+
return /* @__PURE__ */ jsx166(DashboardSelect, { ref, ...selectProps, options: resolvedOptions });
|
|
16675
|
+
}
|
|
16676
|
+
);
|
|
16677
|
+
|
|
16678
|
+
// src/dashboard/file-input/FileInput.tsx
|
|
16679
|
+
import * as React67 from "react";
|
|
16680
|
+
import { Download, Paperclip, SquareX as SquareX4 } from "lucide-react";
|
|
16681
|
+
import { useTranslation as useTranslation36 } from "react-i18next";
|
|
16682
|
+
import { jsx as jsx167, jsxs as jsxs108 } from "react/jsx-runtime";
|
|
16683
|
+
function defaultFileNameFromUrl(url) {
|
|
16684
|
+
try {
|
|
16685
|
+
const parsed = new URL(url);
|
|
16686
|
+
const segments = parsed.pathname.split("/");
|
|
16687
|
+
return decodeURIComponent(segments[segments.length - 1] ?? url);
|
|
16688
|
+
} catch {
|
|
16689
|
+
return url;
|
|
16690
|
+
}
|
|
16691
|
+
}
|
|
16692
|
+
function defaultDownload(url) {
|
|
16693
|
+
window.open(url, "_blank", "noopener,noreferrer");
|
|
16694
|
+
}
|
|
16695
|
+
var DashboardFileInput = React67.forwardRef(
|
|
16696
|
+
function DashboardFileInput2({
|
|
16697
|
+
label,
|
|
16698
|
+
value,
|
|
16699
|
+
onChange,
|
|
16700
|
+
onDownload = defaultDownload,
|
|
16701
|
+
name = "file",
|
|
16702
|
+
placeholder,
|
|
16703
|
+
accept,
|
|
16704
|
+
multiple,
|
|
16705
|
+
disabled,
|
|
16706
|
+
readOnly,
|
|
16707
|
+
loading,
|
|
16708
|
+
invalid,
|
|
16709
|
+
error,
|
|
16710
|
+
optional,
|
|
16711
|
+
tooltip,
|
|
16712
|
+
helperText,
|
|
16713
|
+
hideErrorMessage,
|
|
16714
|
+
className,
|
|
16715
|
+
width,
|
|
16716
|
+
downloadLabel,
|
|
16717
|
+
fileNameFromUrl = defaultFileNameFromUrl
|
|
16718
|
+
}, ref) {
|
|
16719
|
+
const internalRef = React67.useRef(null);
|
|
16720
|
+
const inputRef = useCombinedRef(ref, internalRef);
|
|
16721
|
+
const { t } = useTranslation36();
|
|
16722
|
+
const resolvedLabel = label ?? t("upload_file");
|
|
16723
|
+
const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
|
|
16724
|
+
const reactId = React67.useId();
|
|
16725
|
+
const inputId = `${name || "dash-file"}-${reactId}`;
|
|
16726
|
+
const labelId = `${inputId}-label`;
|
|
16727
|
+
const errorId = `${inputId}-error`;
|
|
16728
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
16729
|
+
const isInvalid = Boolean(invalid || error);
|
|
16730
|
+
const isEmpty = !value;
|
|
16731
|
+
const wrapperWidth = toCssSize(width);
|
|
16732
|
+
const isUrl = typeof value === "string" && value.length > 0;
|
|
16733
|
+
const isFile = typeof File !== "undefined" && value instanceof File;
|
|
16734
|
+
const hasFileChip = isUrl || isFile;
|
|
16735
|
+
const handleFileChange = (event) => {
|
|
16736
|
+
const file = event.target.files?.[0] ?? null;
|
|
16737
|
+
onChange?.(file, event);
|
|
16738
|
+
};
|
|
16739
|
+
const handleClear = (event) => {
|
|
16740
|
+
event.preventDefault();
|
|
16741
|
+
event.stopPropagation();
|
|
16742
|
+
if (internalRef.current) internalRef.current.value = "";
|
|
16743
|
+
onChange?.(null);
|
|
16744
|
+
};
|
|
16745
|
+
const handleDownload = (event) => {
|
|
16746
|
+
event.preventDefault();
|
|
16747
|
+
event.stopPropagation();
|
|
16748
|
+
if (isUrl) onDownload(value);
|
|
16749
|
+
};
|
|
16750
|
+
return /* @__PURE__ */ jsxs108(
|
|
16751
|
+
"label",
|
|
16752
|
+
{
|
|
16753
|
+
htmlFor: inputId,
|
|
16754
|
+
className: cn(
|
|
16755
|
+
"relative block w-full max-w-[var(--max-field-width)] cursor-pointer text-left",
|
|
16756
|
+
(disabled || readOnly) && "cursor-not-allowed",
|
|
16757
|
+
loading && "cursor-progress",
|
|
16758
|
+
disabled && "opacity-50",
|
|
16759
|
+
className
|
|
16760
|
+
),
|
|
16761
|
+
style: wrapperWidth ? { width: wrapperWidth } : void 0,
|
|
16762
|
+
children: [
|
|
16763
|
+
/* @__PURE__ */ jsx167(
|
|
16764
|
+
"input",
|
|
16765
|
+
{
|
|
16766
|
+
ref: inputRef,
|
|
16767
|
+
id: inputId,
|
|
16768
|
+
name,
|
|
16769
|
+
type: "file",
|
|
16770
|
+
accept,
|
|
16771
|
+
multiple,
|
|
16772
|
+
disabled: isBlocked || readOnly,
|
|
16773
|
+
onChange: handleFileChange,
|
|
16774
|
+
className: "absolute h-[0.1px] w-[0.1px] opacity-0",
|
|
16775
|
+
"aria-labelledby": labelId,
|
|
16776
|
+
"aria-invalid": isInvalid
|
|
16777
|
+
}
|
|
16778
|
+
),
|
|
16779
|
+
/* @__PURE__ */ jsxs108("div", { className: "relative min-h-[68px] w-full", children: [
|
|
16780
|
+
/* @__PURE__ */ jsxs108("div", { className: "relative w-full", children: [
|
|
16781
|
+
/* @__PURE__ */ jsxs108(
|
|
16782
|
+
"div",
|
|
16783
|
+
{
|
|
16784
|
+
className: cn(
|
|
16785
|
+
"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)]",
|
|
16786
|
+
isEmpty && "bg-[var(--chekin-color-surface-input-empty)]"
|
|
16787
|
+
),
|
|
16788
|
+
children: [
|
|
16789
|
+
hasFileChip ? /* @__PURE__ */ jsxs108(
|
|
16790
|
+
"div",
|
|
16791
|
+
{
|
|
16792
|
+
className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
|
|
16793
|
+
onClick: (event) => event.preventDefault(),
|
|
16794
|
+
children: [
|
|
16795
|
+
isUrl ? /* @__PURE__ */ jsxs108(
|
|
16796
|
+
"button",
|
|
16797
|
+
{
|
|
16798
|
+
type: "button",
|
|
16799
|
+
onClick: handleDownload,
|
|
16800
|
+
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",
|
|
16801
|
+
children: [
|
|
16802
|
+
/* @__PURE__ */ jsx167("span", { className: "truncate", children: resolvedDownloadLabel }),
|
|
16803
|
+
/* @__PURE__ */ jsx167(Download, { size: 15 })
|
|
16804
|
+
]
|
|
16805
|
+
}
|
|
16806
|
+
) : /* @__PURE__ */ jsx167("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
|
|
16807
|
+
/* @__PURE__ */ jsx167(
|
|
16808
|
+
"button",
|
|
16809
|
+
{
|
|
16810
|
+
type: "button",
|
|
16811
|
+
disabled: isBlocked || readOnly,
|
|
16812
|
+
onClick: handleClear,
|
|
16813
|
+
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]",
|
|
16814
|
+
"aria-label": t("remove_file"),
|
|
16815
|
+
children: /* @__PURE__ */ jsx167(
|
|
16816
|
+
SquareX4,
|
|
16817
|
+
{
|
|
16818
|
+
size: 15,
|
|
16819
|
+
fill: "#9696b9",
|
|
16820
|
+
color: "#f8f8f8",
|
|
16821
|
+
strokeWidth: 1.8
|
|
16822
|
+
}
|
|
16823
|
+
)
|
|
16824
|
+
}
|
|
16825
|
+
)
|
|
16826
|
+
]
|
|
16827
|
+
}
|
|
16828
|
+
) : /* @__PURE__ */ jsx167("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
|
|
16829
|
+
/* @__PURE__ */ jsxs108("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
|
|
16830
|
+
loading && /* @__PURE__ */ jsx167(ThreeDotsLoader, { height: 18, width: 18 }),
|
|
16831
|
+
/* @__PURE__ */ jsx167(Paperclip, { size: 20 })
|
|
16832
|
+
] })
|
|
16833
|
+
]
|
|
16834
|
+
}
|
|
16835
|
+
),
|
|
16836
|
+
/* @__PURE__ */ jsx167(
|
|
16837
|
+
Fieldset,
|
|
16838
|
+
{
|
|
16839
|
+
isFocused: false,
|
|
16840
|
+
invalid: isInvalid,
|
|
16841
|
+
isEmpty,
|
|
16842
|
+
isActivated: !isEmpty,
|
|
16843
|
+
disabled,
|
|
16844
|
+
loading,
|
|
16845
|
+
readOnly,
|
|
16846
|
+
htmlFor: inputId,
|
|
16847
|
+
labelId,
|
|
16848
|
+
legend: resolvedLabel,
|
|
16849
|
+
label: resolvedLabel,
|
|
16850
|
+
tooltip
|
|
16851
|
+
}
|
|
16852
|
+
)
|
|
16853
|
+
] }),
|
|
16854
|
+
!error && optional && /* @__PURE__ */ jsx167("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
|
|
16855
|
+
!error && helperText && /* @__PURE__ */ jsx167("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
|
|
16856
|
+
error && !hideErrorMessage && /* @__PURE__ */ jsx167(
|
|
16857
|
+
FieldErrorMessage,
|
|
16858
|
+
{
|
|
16859
|
+
id: errorId,
|
|
16860
|
+
message: error,
|
|
16861
|
+
className: "mt-[1px] text-[14px]"
|
|
16862
|
+
}
|
|
16863
|
+
)
|
|
16864
|
+
] })
|
|
16865
|
+
]
|
|
16866
|
+
}
|
|
16867
|
+
);
|
|
16868
|
+
}
|
|
16869
|
+
);
|
|
16870
|
+
|
|
16871
|
+
// src/dashboard/select-icons-box/SelectIconsBox.tsx
|
|
16872
|
+
import * as React68 from "react";
|
|
16873
|
+
import { jsx as jsx168, jsxs as jsxs109 } from "react/jsx-runtime";
|
|
16874
|
+
function DashboardSelectIconsBox({
|
|
16875
|
+
children,
|
|
16876
|
+
icons,
|
|
16877
|
+
renderIcon,
|
|
16878
|
+
onSelect,
|
|
16879
|
+
columns = 4,
|
|
16880
|
+
iconsColor = "#6B6B95",
|
|
16881
|
+
isOpen: controlledOpen,
|
|
16882
|
+
defaultOpen = false,
|
|
16883
|
+
onOpenChange,
|
|
16884
|
+
position = "left",
|
|
16885
|
+
className,
|
|
16886
|
+
boxClassName
|
|
16887
|
+
}) {
|
|
16888
|
+
const containerRef = React68.useRef(null);
|
|
16889
|
+
const isControlled = controlledOpen !== void 0;
|
|
16890
|
+
const [internalOpen, setInternalOpen] = React68.useState(defaultOpen);
|
|
16891
|
+
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
16892
|
+
const setOpen = (next) => {
|
|
16893
|
+
if (!isControlled) setInternalOpen(next);
|
|
16894
|
+
onOpenChange?.(next);
|
|
16895
|
+
};
|
|
16896
|
+
const handleToggle = (event) => {
|
|
16897
|
+
if (event.target.closest("[data-icon-box-item]")) return;
|
|
16898
|
+
setOpen(!isOpen);
|
|
16899
|
+
};
|
|
16900
|
+
useOutsideClick({
|
|
16901
|
+
elementRef: containerRef,
|
|
16902
|
+
onOutsideClick: () => setOpen(false),
|
|
16903
|
+
isDisabled: !isOpen
|
|
16904
|
+
});
|
|
16905
|
+
const handlePick = (iconName) => {
|
|
16906
|
+
onSelect(iconName);
|
|
16907
|
+
setOpen(false);
|
|
16908
|
+
};
|
|
16909
|
+
return /* @__PURE__ */ jsxs109(
|
|
16910
|
+
"div",
|
|
16911
|
+
{
|
|
16912
|
+
ref: containerRef,
|
|
16913
|
+
onClick: handleToggle,
|
|
16914
|
+
className: cn("relative inline-block", className),
|
|
16915
|
+
children: [
|
|
16916
|
+
children,
|
|
16917
|
+
isOpen && /* @__PURE__ */ jsx168(
|
|
16918
|
+
"div",
|
|
16919
|
+
{
|
|
16920
|
+
className: cn(
|
|
16921
|
+
"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)]",
|
|
16922
|
+
position === "left" && "left-0",
|
|
16923
|
+
position === "right" && "right-0",
|
|
16924
|
+
position === "center" && "left-1/2 -translate-x-1/2",
|
|
16925
|
+
boxClassName
|
|
16926
|
+
),
|
|
16927
|
+
style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
|
|
16928
|
+
children: icons.map((iconName) => /* @__PURE__ */ jsx168(
|
|
16929
|
+
"button",
|
|
16930
|
+
{
|
|
16931
|
+
type: "button",
|
|
16932
|
+
"data-icon-box-item": true,
|
|
16933
|
+
onClick: () => handlePick(iconName),
|
|
16934
|
+
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]",
|
|
16935
|
+
"aria-label": iconName,
|
|
16936
|
+
children: renderIcon(iconName, iconsColor)
|
|
16937
|
+
},
|
|
16938
|
+
iconName
|
|
16939
|
+
))
|
|
16940
|
+
}
|
|
16941
|
+
)
|
|
16942
|
+
]
|
|
16943
|
+
}
|
|
16944
|
+
);
|
|
16945
|
+
}
|
|
16946
|
+
|
|
16947
|
+
// src/searchable-select/SearchableSelect.tsx
|
|
16948
|
+
import * as React69 from "react";
|
|
16949
|
+
import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
|
|
16950
|
+
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
16951
|
+
import { useCallback as useCallback42 } from "react";
|
|
16952
|
+
import { jsx as jsx169, jsxs as jsxs110 } from "react/jsx-runtime";
|
|
16953
|
+
var ROW_HEIGHT = 48;
|
|
16954
|
+
var DESKTOP_LIST_HEIGHT = 280;
|
|
16955
|
+
var MOBILE_LIST_HEIGHT = 420;
|
|
16956
|
+
var LOAD_MORE_THRESHOLD = 6;
|
|
16957
|
+
function defaultFilter(option, searchValue) {
|
|
16958
|
+
return String(option.label).toLowerCase().includes(searchValue.trim().toLowerCase());
|
|
16959
|
+
}
|
|
16960
|
+
var SearchableSelectInternal = ({
|
|
16961
|
+
options,
|
|
16962
|
+
value,
|
|
16963
|
+
onChange,
|
|
16964
|
+
onBlur,
|
|
16965
|
+
onOpenChange,
|
|
16966
|
+
searchValue,
|
|
16967
|
+
onSearchChange,
|
|
16968
|
+
filterOption = defaultFilter,
|
|
16969
|
+
loading,
|
|
16970
|
+
hasNextPage,
|
|
16971
|
+
onLoadMore,
|
|
16972
|
+
variant = "default",
|
|
16973
|
+
label,
|
|
16974
|
+
topLabel,
|
|
16975
|
+
placeholder,
|
|
16976
|
+
searchPlaceholder = "Search...",
|
|
16977
|
+
mobileTitle,
|
|
16978
|
+
getValueLabel,
|
|
16979
|
+
disabled,
|
|
16980
|
+
error,
|
|
16981
|
+
invalid,
|
|
16982
|
+
optional,
|
|
16983
|
+
tooltip,
|
|
16984
|
+
hideErrorMessage,
|
|
16985
|
+
name,
|
|
16986
|
+
className,
|
|
16987
|
+
dropdownClassName,
|
|
16988
|
+
menuClassName,
|
|
16989
|
+
noOptionsMessage,
|
|
16990
|
+
loadingMessage
|
|
16991
|
+
}, ref) => {
|
|
16992
|
+
const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
|
|
16993
|
+
const reactId = React69.useId();
|
|
16994
|
+
const [open, setOpen] = React69.useState(false);
|
|
16995
|
+
const [internalSearchValue, setInternalSearchValue] = React69.useState("");
|
|
16996
|
+
const [highlightedIndex, setHighlightedIndex] = React69.useState(-1);
|
|
16997
|
+
const containerRef = React69.useRef(null);
|
|
16998
|
+
const triggerRef = React69.useRef(null);
|
|
16999
|
+
const inputRef = React69.useRef(null);
|
|
17000
|
+
const listboxId = `${reactId}-listbox`;
|
|
17001
|
+
const labelId = `${reactId}-label`;
|
|
17002
|
+
const valueId = `${reactId}-value`;
|
|
17003
|
+
const helperTextId = `${reactId}-helper`;
|
|
17004
|
+
const errorId = `${reactId}-error`;
|
|
17005
|
+
const searchInputId = `${reactId}-search`;
|
|
17006
|
+
const effectiveSearchValue = searchValue ?? internalSearchValue;
|
|
17007
|
+
const shouldFilterLocally = !onSearchChange && filterOption !== null;
|
|
17008
|
+
const visibleOptions = React69.useMemo(() => {
|
|
17009
|
+
if (!shouldFilterLocally || !effectiveSearchValue) {
|
|
17010
|
+
return options;
|
|
17011
|
+
}
|
|
17012
|
+
return options.filter((option) => filterOption(option, effectiveSearchValue));
|
|
17013
|
+
}, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
|
|
17014
|
+
const selectedIndex = React69.useMemo(
|
|
17015
|
+
() => visibleOptions.findIndex((option) => option.value === value?.value),
|
|
17016
|
+
[value?.value, visibleOptions]
|
|
17017
|
+
);
|
|
17018
|
+
const helperText = placeholder ?? label;
|
|
17019
|
+
const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
|
|
17020
|
+
const isBlocked = Boolean(disabled) || Boolean(loading);
|
|
17021
|
+
const triggerError = error ?? invalid;
|
|
17022
|
+
const describedBy = error && !hideErrorMessage ? errorId : void 0;
|
|
17023
|
+
const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
|
|
17024
|
+
useOutsideClick({
|
|
17025
|
+
elementRef: containerRef,
|
|
17026
|
+
onOutsideClick: () => closeSelect(),
|
|
17027
|
+
isDisabled: !open || isMobile2
|
|
17028
|
+
});
|
|
17029
|
+
const handleOnOpenChange = useEvent(onOpenChange);
|
|
17030
|
+
const setSelectOpen = useCallback42(
|
|
17031
|
+
(nextOpen, options2) => {
|
|
17032
|
+
setOpen(nextOpen);
|
|
17033
|
+
handleOnOpenChange?.(nextOpen);
|
|
17034
|
+
if (!nextOpen && options2?.restoreFocus) {
|
|
17035
|
+
triggerRef.current?.focus();
|
|
17036
|
+
}
|
|
17037
|
+
},
|
|
17038
|
+
[handleOnOpenChange]
|
|
17039
|
+
);
|
|
17040
|
+
React69.useEffect(() => {
|
|
17041
|
+
if (isBlocked) {
|
|
17042
|
+
setSelectOpen(false);
|
|
17043
|
+
return;
|
|
17044
|
+
}
|
|
17045
|
+
if (!open) return;
|
|
17046
|
+
const frameId = window.requestAnimationFrame(() => {
|
|
17047
|
+
inputRef.current?.focus();
|
|
17048
|
+
});
|
|
17049
|
+
return () => {
|
|
17050
|
+
window.cancelAnimationFrame(frameId);
|
|
17051
|
+
};
|
|
17052
|
+
}, [isBlocked, open, setSelectOpen]);
|
|
17053
|
+
React69.useEffect(() => {
|
|
17054
|
+
if (!open) {
|
|
17055
|
+
setHighlightedIndex(-1);
|
|
17056
|
+
return;
|
|
17057
|
+
}
|
|
17058
|
+
setHighlightedIndex((currentIndex) => {
|
|
17059
|
+
if (currentIndex >= 0 && currentIndex < visibleOptions.length && !visibleOptions[currentIndex]?.isDisabled) {
|
|
17060
|
+
return currentIndex;
|
|
17061
|
+
}
|
|
17062
|
+
return selectedIndex >= 0 ? selectedIndex : getFirstEnabledIndex(visibleOptions);
|
|
17063
|
+
});
|
|
17064
|
+
}, [open, selectedIndex, visibleOptions]);
|
|
17065
|
+
function openSelect() {
|
|
17066
|
+
if (isBlocked) return;
|
|
17067
|
+
setSelectOpen(true);
|
|
17068
|
+
}
|
|
17069
|
+
function closeSelect() {
|
|
17070
|
+
setSelectOpen(false, { restoreFocus: true });
|
|
17071
|
+
}
|
|
17072
|
+
function handleSearchChange(nextValue) {
|
|
17073
|
+
if (!onSearchChange) {
|
|
17074
|
+
setInternalSearchValue(nextValue);
|
|
17075
|
+
}
|
|
15097
17076
|
onSearchChange?.(nextValue);
|
|
15098
17077
|
}
|
|
15099
17078
|
function handleSelect(option) {
|
|
@@ -15139,7 +17118,7 @@ var SearchableSelectInternal = ({
|
|
|
15139
17118
|
}
|
|
15140
17119
|
}
|
|
15141
17120
|
}
|
|
15142
|
-
const content = /* @__PURE__ */
|
|
17121
|
+
const content = /* @__PURE__ */ jsx169(
|
|
15143
17122
|
SearchableSelectContent,
|
|
15144
17123
|
{
|
|
15145
17124
|
inputId: searchInputId,
|
|
@@ -15166,10 +17145,10 @@ var SearchableSelectInternal = ({
|
|
|
15166
17145
|
onOptionHover: setHighlightedIndex
|
|
15167
17146
|
}
|
|
15168
17147
|
);
|
|
15169
|
-
|
|
15170
|
-
return /* @__PURE__ */
|
|
15171
|
-
name && /* @__PURE__ */
|
|
15172
|
-
/* @__PURE__ */
|
|
17148
|
+
React69.useImperativeHandle(ref, () => triggerRef.current, []);
|
|
17149
|
+
return /* @__PURE__ */ jsxs110("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
|
|
17150
|
+
name && /* @__PURE__ */ jsx169("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
|
|
17151
|
+
/* @__PURE__ */ jsx169(
|
|
15173
17152
|
FieldTrigger,
|
|
15174
17153
|
{
|
|
15175
17154
|
id: `${reactId}-trigger`,
|
|
@@ -15204,8 +17183,8 @@ var SearchableSelectInternal = ({
|
|
|
15204
17183
|
},
|
|
15205
17184
|
onKeyDown: handleTriggerKeyDown,
|
|
15206
17185
|
onBlur,
|
|
15207
|
-
trailingAdornment: /* @__PURE__ */
|
|
15208
|
-
|
|
17186
|
+
trailingAdornment: /* @__PURE__ */ jsx169(
|
|
17187
|
+
ChevronDown7,
|
|
15209
17188
|
{
|
|
15210
17189
|
className: cn(
|
|
15211
17190
|
"h-6 w-6 text-[#1F1F1B] transition-transform",
|
|
@@ -15215,7 +17194,7 @@ var SearchableSelectInternal = ({
|
|
|
15215
17194
|
)
|
|
15216
17195
|
}
|
|
15217
17196
|
),
|
|
15218
|
-
isMobile2 ? /* @__PURE__ */
|
|
17197
|
+
isMobile2 ? /* @__PURE__ */ jsx169(
|
|
15219
17198
|
Drawer,
|
|
15220
17199
|
{
|
|
15221
17200
|
open,
|
|
@@ -15227,13 +17206,13 @@ var SearchableSelectInternal = ({
|
|
|
15227
17206
|
}
|
|
15228
17207
|
closeSelect();
|
|
15229
17208
|
},
|
|
15230
|
-
children: /* @__PURE__ */
|
|
15231
|
-
/* @__PURE__ */
|
|
15232
|
-
/* @__PURE__ */
|
|
15233
|
-
/* @__PURE__ */
|
|
17209
|
+
children: /* @__PURE__ */ jsxs110(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
|
|
17210
|
+
/* @__PURE__ */ jsx169(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
|
|
17211
|
+
/* @__PURE__ */ jsx169(DrawerDescription, { className: "sr-only", children: label }),
|
|
17212
|
+
/* @__PURE__ */ jsx169("div", { className: "px-5 pb-5 pt-1", children: content })
|
|
15234
17213
|
] })
|
|
15235
17214
|
}
|
|
15236
|
-
) : open ? /* @__PURE__ */
|
|
17215
|
+
) : open ? /* @__PURE__ */ jsx169(
|
|
15237
17216
|
"div",
|
|
15238
17217
|
{
|
|
15239
17218
|
className: cn(
|
|
@@ -15245,7 +17224,7 @@ var SearchableSelectInternal = ({
|
|
|
15245
17224
|
) : null
|
|
15246
17225
|
] });
|
|
15247
17226
|
};
|
|
15248
|
-
var SearchableSelect =
|
|
17227
|
+
var SearchableSelect = React69.forwardRef(
|
|
15249
17228
|
SearchableSelectInternal
|
|
15250
17229
|
);
|
|
15251
17230
|
function SearchableSelectContent({
|
|
@@ -15272,9 +17251,9 @@ function SearchableSelectContent({
|
|
|
15272
17251
|
onOptionClick,
|
|
15273
17252
|
onOptionHover
|
|
15274
17253
|
}) {
|
|
15275
|
-
const listRef =
|
|
15276
|
-
const lastLoadMoreOptionsLengthRef =
|
|
15277
|
-
const previousHighlightedIndexRef =
|
|
17254
|
+
const listRef = React69.useRef(null);
|
|
17255
|
+
const lastLoadMoreOptionsLengthRef = React69.useRef(null);
|
|
17256
|
+
const previousHighlightedIndexRef = React69.useRef(highlightedIndex);
|
|
15278
17257
|
const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
|
|
15279
17258
|
const virtualizer = useVirtualizer3({
|
|
15280
17259
|
count: rowCount,
|
|
@@ -15285,7 +17264,7 @@ function SearchableSelectContent({
|
|
|
15285
17264
|
const virtualItems = virtualizer.getVirtualItems();
|
|
15286
17265
|
const emptyMessage = noOptionsMessage?.() ?? "No matches found";
|
|
15287
17266
|
const loadingText = loadingMessage?.() ?? "Loading...";
|
|
15288
|
-
|
|
17267
|
+
React69.useEffect(() => {
|
|
15289
17268
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
15290
17269
|
const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
|
|
15291
17270
|
if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
|
|
@@ -15293,23 +17272,23 @@ function SearchableSelectContent({
|
|
|
15293
17272
|
onLoadMore?.();
|
|
15294
17273
|
}
|
|
15295
17274
|
}, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
|
|
15296
|
-
|
|
17275
|
+
React69.useEffect(() => {
|
|
15297
17276
|
const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
|
|
15298
17277
|
previousHighlightedIndexRef.current = highlightedIndex;
|
|
15299
17278
|
if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
|
|
15300
17279
|
virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
|
|
15301
17280
|
}
|
|
15302
17281
|
}, [highlightedIndex, virtualizer]);
|
|
15303
|
-
return /* @__PURE__ */
|
|
15304
|
-
/* @__PURE__ */
|
|
15305
|
-
/* @__PURE__ */
|
|
17282
|
+
return /* @__PURE__ */ jsxs110("div", { className: "p-2", children: [
|
|
17283
|
+
/* @__PURE__ */ jsxs110("div", { className: "relative mb-2", children: [
|
|
17284
|
+
/* @__PURE__ */ jsx169(
|
|
15306
17285
|
Search4,
|
|
15307
17286
|
{
|
|
15308
17287
|
"aria-hidden": "true",
|
|
15309
17288
|
className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
|
|
15310
17289
|
}
|
|
15311
17290
|
),
|
|
15312
|
-
/* @__PURE__ */
|
|
17291
|
+
/* @__PURE__ */ jsx169(
|
|
15313
17292
|
"input",
|
|
15314
17293
|
{
|
|
15315
17294
|
id: inputId,
|
|
@@ -15328,7 +17307,7 @@ function SearchableSelectContent({
|
|
|
15328
17307
|
}
|
|
15329
17308
|
)
|
|
15330
17309
|
] }),
|
|
15331
|
-
loading && options.length === 0 ? /* @__PURE__ */
|
|
17310
|
+
loading && options.length === 0 ? /* @__PURE__ */ jsx169("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx169("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx169(
|
|
15332
17311
|
"div",
|
|
15333
17312
|
{
|
|
15334
17313
|
id: listboxId,
|
|
@@ -15337,7 +17316,7 @@ function SearchableSelectContent({
|
|
|
15337
17316
|
"aria-labelledby": labelId,
|
|
15338
17317
|
className: cn("overflow-y-auto outline-none", menuClassName),
|
|
15339
17318
|
style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
|
|
15340
|
-
children: /* @__PURE__ */
|
|
17319
|
+
children: /* @__PURE__ */ jsx169(
|
|
15341
17320
|
"div",
|
|
15342
17321
|
{
|
|
15343
17322
|
className: "relative w-full",
|
|
@@ -15345,7 +17324,7 @@ function SearchableSelectContent({
|
|
|
15345
17324
|
children: virtualItems.map((virtualItem) => {
|
|
15346
17325
|
const option = options[virtualItem.index];
|
|
15347
17326
|
if (!option) {
|
|
15348
|
-
return /* @__PURE__ */
|
|
17327
|
+
return /* @__PURE__ */ jsx169(
|
|
15349
17328
|
"div",
|
|
15350
17329
|
{
|
|
15351
17330
|
className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
|
|
@@ -15360,7 +17339,7 @@ function SearchableSelectContent({
|
|
|
15360
17339
|
}
|
|
15361
17340
|
const isSelected = value?.value === option.value;
|
|
15362
17341
|
const isHighlighted = virtualItem.index === highlightedIndex;
|
|
15363
|
-
return /* @__PURE__ */
|
|
17342
|
+
return /* @__PURE__ */ jsx169(
|
|
15364
17343
|
"button",
|
|
15365
17344
|
{
|
|
15366
17345
|
id: getOptionId(idPrefix, virtualItem.index),
|
|
@@ -15382,7 +17361,7 @@ function SearchableSelectContent({
|
|
|
15382
17361
|
height: `${virtualItem.size}px`,
|
|
15383
17362
|
transform: `translateY(${virtualItem.start}px)`
|
|
15384
17363
|
},
|
|
15385
|
-
children: /* @__PURE__ */
|
|
17364
|
+
children: /* @__PURE__ */ jsx169("span", { className: "truncate text-center", children: String(option.label) })
|
|
15386
17365
|
},
|
|
15387
17366
|
`${String(option.value)}-${virtualItem.index}`
|
|
15388
17367
|
);
|
|
@@ -15468,14 +17447,14 @@ function getErrorMessage(error) {
|
|
|
15468
17447
|
|
|
15469
17448
|
// src/lib/toastResponseError.tsx
|
|
15470
17449
|
import i18next from "i18next";
|
|
15471
|
-
import { jsx as
|
|
17450
|
+
import { jsx as jsx170, jsxs as jsxs111 } from "react/jsx-runtime";
|
|
15472
17451
|
function addSupportEmailToMessage(message, prefixText) {
|
|
15473
17452
|
if (typeof message !== "string") {
|
|
15474
17453
|
return message;
|
|
15475
17454
|
}
|
|
15476
17455
|
const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
|
|
15477
|
-
return /* @__PURE__ */
|
|
15478
|
-
/* @__PURE__ */
|
|
17456
|
+
return /* @__PURE__ */ jsxs111("div", { children: [
|
|
17457
|
+
/* @__PURE__ */ jsx170("div", { children: builtMessage }),
|
|
15479
17458
|
i18next.t("reach_us_at_email")
|
|
15480
17459
|
] });
|
|
15481
17460
|
}
|
|
@@ -15535,12 +17514,19 @@ export {
|
|
|
15535
17514
|
CopyLinkButton,
|
|
15536
17515
|
CopyString,
|
|
15537
17516
|
CustomCheckboxDropdownGroup,
|
|
17517
|
+
DEFAULT_DISPLAY_FORMAT,
|
|
15538
17518
|
DEVICE_BREAKPOINTS,
|
|
15539
17519
|
DashboardCreatableMultiSelect,
|
|
17520
|
+
DashboardDateRangePicker,
|
|
17521
|
+
DashboardDatepicker,
|
|
17522
|
+
DashboardFileInput,
|
|
15540
17523
|
DashboardInfiniteScrollSelect,
|
|
15541
17524
|
DashboardInput,
|
|
15542
17525
|
DashboardMultiSelect,
|
|
15543
17526
|
DashboardSelect,
|
|
17527
|
+
DashboardSelectIconsBox,
|
|
17528
|
+
DashboardTextarea,
|
|
17529
|
+
DashboardTimePicker,
|
|
15544
17530
|
DataTable,
|
|
15545
17531
|
DatePicker,
|
|
15546
17532
|
DateTableFilter,
|
|
@@ -15776,13 +17762,17 @@ export {
|
|
|
15776
17762
|
calendarClassNames,
|
|
15777
17763
|
cn,
|
|
15778
17764
|
copyToClipboard,
|
|
17765
|
+
createDisabledMatchers,
|
|
15779
17766
|
emptyMediaVariants,
|
|
17767
|
+
formatDate,
|
|
15780
17768
|
getErrorMessage,
|
|
15781
17769
|
getScrollableAreaState,
|
|
15782
17770
|
getSidebarState,
|
|
15783
17771
|
inputVariants,
|
|
17772
|
+
isDayBlocked,
|
|
15784
17773
|
isNumeric,
|
|
15785
17774
|
labelVariants,
|
|
17775
|
+
parseDate,
|
|
15786
17776
|
registerUiKitI18n,
|
|
15787
17777
|
scrollToTop,
|
|
15788
17778
|
sectionTagVariants,
|
|
@@ -15833,6 +17823,7 @@ export {
|
|
|
15833
17823
|
useTimeout,
|
|
15834
17824
|
useTimeoutRef,
|
|
15835
17825
|
useTimer,
|
|
15836
|
-
useUpdateToast
|
|
17826
|
+
useUpdateToast,
|
|
17827
|
+
useValidateDates
|
|
15837
17828
|
};
|
|
15838
17829
|
//# sourceMappingURL=index.js.map
|