shad-m 1.0.0 → 1.0.2

package/dist/common/interactive/date-picker.mjs

@@ -1,594 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ButtonGroup, Button } from '@/components/button';
-import { Calendar } from '@/components/calendar';
-import { Popover, PopoverTrigger, PopoverContent } from '@/components/popover';
-import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@/components/sheet';
-import { useDevice } from '@/hooks/useDevice';
-import { CloseCircleFilledIcon, CalendarOutlinedIcon } from '@/icons';
-import { cn } from '@/lib/utils';
-import { format, isValid, parse } from 'date-fns';
-import { vi } from 'date-fns/locale';
-import * as React from 'react';
-import { DateInput } from './date-input';
-import { DateRangeInput } from './date-range-input';
-
-const parseStringToDate = (dateStr) => {
-  if (!dateStr) return void 0;
-  const supportedFormats = [
-    "dd/MM/yyyy",
-    // 01/12/2023
-    "DD/MM/YYYY",
-    // 01/12/2023 (same as above but with different case)
-    "d/M/yyyy",
-    // 1/1/2023
-    "dd-MM-yyyy",
-    // 01-12-2023
-    "d-M-yyyy",
-    // 1-1-2023
-    "dd.MM.yyyy",
-    // 01.12.2023
-    "d.M.yyyy",
-    // 1.1.2023
-    "yyyy/MM/dd",
-    // 2023/12/01
-    "yyyy-MM-dd"
-    // 2023-12-01
-  ];
-  try {
-    for (const format2 of supportedFormats) {
-      try {
-        const parsedDate = parse(dateStr, format2, /* @__PURE__ */ new Date());
-        if (isValid(parsedDate)) {
-          return parsedDate;
-        }
-      } catch {
-        continue;
-      }
-    }
-    console.warn(`\u26A0\uFE0F DatePicker: Could not parse '${dateStr}' with any supported format`);
-    return void 0;
-  } catch (error) {
-    console.error(`\u274C DatePicker: Error parsing '${dateStr}':`, error);
-    return void 0;
-  }
-};
-const getDateValue = (value) => {
-  if (!value) return void 0;
-  if (typeof value === "string") return parseStringToDate(value);
-  if (typeof value === "number") {
-    const timestampMs = value.toString().length === 10 ? value * 1e3 : value;
-    const date = new Date(timestampMs);
-    return isValid(date) ? date : void 0;
-  }
-  return value instanceof Date && isValid(value) ? value : void 0;
-};
-const DatePickerFooter = React.forwardRef(({ onClear, onApply, onClose, hasValue }, ref) => {
-  const handleClear = React.useCallback(
-    (e) => {
-      e.stopPropagation();
-      onClear?.();
-    },
-    [onClear]
-  );
-  const handleApply = React.useCallback(
-    (e) => {
-      e.stopPropagation();
-      if (!hasValue) {
-        onClose?.();
-        return;
-      }
-      onApply?.();
-      onClose?.();
-    },
-    [onApply, onClose, hasValue]
-  );
-  return /* @__PURE__ */ jsxs(ButtonGroup, { ref, className: "w-full border-t p-3", children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        className: "w-full px-0",
-        style: {
-          flex: 1
-        },
-        variant: "secondary",
-        size: "sm",
-        onClick: handleClear,
-        children: "B\u1ECF ch\u1ECDn"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        className: "w-full flex-1",
-        style: {
-          flex: 2
-        },
-        variant: "default",
-        size: "sm",
-        onClick: handleApply,
-        children: "\xC1p d\u1EE5ng"
-      }
-    )
-  ] });
-});
-DatePickerFooter.displayName = "DatePickerFooter";
-const DatePicker = React.forwardRef(
-  ({
-    value,
-    range,
-    mode = "single",
-    onChange,
-    onRangeChange,
-    onClearValue,
-    onApply,
-    disabled = false,
-    className,
-    minDate,
-    maxDate,
-    disabledDates,
-    size = "default",
-    error = false,
-    helperText,
-    helperTextClass,
-    label,
-    isRequired,
-    hasRemoveIcon = true,
-    ...props
-  }, ref) => {
-    const [open, setOpen] = React.useState(false);
-    const [calendarMonth, setCalendarMonth] = React.useState(() => /* @__PURE__ */ new Date());
-    const [calendarNavView, setCalendarNavView] = React.useState(
-      "days"
-    );
-    const [tempRange, setTempRange] = React.useState(
-      mode === "range" && range ? {
-        from: getDateValue(range.from),
-        to: getDateValue(range.to)
-      } : void 0
-    );
-    const [isApplyingManually, setIsApplyingManually] = React.useState(false);
-    const { isDesktop } = useDevice();
-    const { onBlur, onFocus, ...rest } = props;
-    const dateInputRef = React.useRef(null);
-    const dateRangeInputRef = React.useRef(null);
-    React.useEffect(() => {
-      if (disabled && open) {
-        setOpen(false);
-      }
-    }, [disabled, open]);
-    React.useEffect(() => {
-      if (mode === "range") {
-        setTempRange(
-          range && (range.from || range.to) ? {
-            from: getDateValue(range.from),
-            to: getDateValue(range.to)
-          } : void 0
-        );
-      }
-    }, [range, mode, open]);
-    React.useEffect(() => {
-      if (mode === "single") {
-        const dateValue = getDateValue(value);
-        if (dateValue && !isNaN(dateValue.getTime())) {
-          const newMonth = new Date(dateValue.getFullYear(), dateValue.getMonth(), 1);
-          setCalendarMonth((prev) => {
-            if (prev.getFullYear() !== newMonth.getFullYear() || prev.getMonth() !== newMonth.getMonth()) {
-              return newMonth;
-            }
-            return prev;
-          });
-        } else if (!value) {
-          const currentMonth = /* @__PURE__ */ new Date();
-          currentMonth.setDate(1);
-          setCalendarMonth((prev) => {
-            const now = /* @__PURE__ */ new Date();
-            if (prev.getFullYear() !== now.getFullYear() || prev.getMonth() !== now.getMonth()) {
-              return currentMonth;
-            }
-            return prev;
-          });
-        }
-      } else if (mode === "range") {
-        const fromDate = getDateValue(range?.from);
-        if (fromDate && !isNaN(fromDate.getTime())) {
-          const newMonth = new Date(fromDate.getFullYear(), fromDate.getMonth(), 1);
-          setCalendarMonth((prev) => {
-            if (prev.getFullYear() !== newMonth.getFullYear() || prev.getMonth() !== newMonth.getMonth()) {
-              return newMonth;
-            }
-            return prev;
-          });
-        } else if (!range?.from) {
-          const currentMonth = /* @__PURE__ */ new Date();
-          currentMonth.setDate(1);
-          setCalendarMonth((prev) => {
-            const now = /* @__PURE__ */ new Date();
-            if (prev.getFullYear() !== now.getFullYear() || prev.getMonth() !== now.getMonth()) {
-              return currentMonth;
-            }
-            return prev;
-          });
-        }
-      }
-    }, [value, range, mode]);
-    React.useImperativeHandle(ref, () => ({
-      focus: () => {
-        if (mode === "single") {
-          dateInputRef.current?.focus();
-        } else {
-          dateRangeInputRef.current?.focus();
-        }
-      },
-      resetToFirstSegment: () => {
-        if (mode === "single") {
-          dateInputRef.current?.resetToFirstSegment();
-        } else {
-          dateRangeInputRef.current?.resetToFirstSegment();
-        }
-      }
-    }));
-    const handleDateSelect = React.useCallback(
-      (selectedDate) => {
-        if (mode === "single") {
-          const formattedDate = selectedDate ? format(selectedDate, "dd/MM/yyyy", { locale: vi }) : void 0;
-          const returnValue = typeof value === "string" ? formattedDate : selectedDate;
-          onChange?.(returnValue, formattedDate);
-          setOpen(false);
-        }
-      },
-      [mode, value, onChange]
-    );
-    const handleRangeSelect = React.useCallback(
-      (selectedRange) => {
-        if (mode === "range") {
-          setTempRange(selectedRange);
-        }
-      },
-      [mode]
-    );
-    const handleFooterClear = React.useCallback(() => {
-      if (mode === "range") {
-        setTempRange(void 0);
-        const currentMonth = /* @__PURE__ */ new Date();
-        currentMonth.setDate(1);
-        setCalendarMonth(currentMonth);
-        onClearValue?.();
-        const fromWasString = range?.from && typeof range.from === "string";
-        const toWasString = range?.to && typeof range.to === "string";
-        const returnRange = fromWasString || toWasString ? { from: void 0, to: void 0 } : void 0;
-        onRangeChange?.(returnRange, void 0);
-        setTimeout(() => {
-          if (dateRangeInputRef.current) {
-            dateRangeInputRef.current.resetToFirstSegment();
-          }
-        }, 0);
-      }
-    }, [mode, range, onClearValue, onRangeChange]);
-    const handleFooterApply = React.useCallback(() => {
-      if (mode === "range" && tempRange && (tempRange.from || tempRange.to)) {
-        setIsApplyingManually(true);
-        const formattedRange = tempRange ? {
-          from: tempRange.from ? format(tempRange.from, "dd/MM/yyyy", { locale: vi }) : void 0,
-          to: tempRange.to ? format(tempRange.to, "dd/MM/yyyy", { locale: vi }) : void 0
-        } : void 0;
-        const fromWasString = range?.from && typeof range.from === "string";
-        const toWasString = range?.to && typeof range.to === "string";
-        const returnRange = tempRange ? {
-          from: fromWasString ? formattedRange?.from : tempRange.from,
-          to: toWasString ? formattedRange?.to : tempRange.to
-        } : void 0;
-        onApply?.(returnRange, formattedRange);
-        onRangeChange?.(returnRange, formattedRange);
-        setOpen(false);
-        setTimeout(() => setIsApplyingManually(false), 100);
-      }
-    }, [mode, tempRange, range, onApply, onRangeChange]);
-    const handleOpenChange = React.useCallback(
-      (newOpen) => {
-        if (!newOpen && mode === "range" && tempRange && (tempRange.from || tempRange.to) && !isApplyingManually) {
-          const formattedRange = tempRange ? {
-            from: tempRange.from ? format(tempRange.from, "dd/MM/yyyy", { locale: vi }) : void 0,
-            to: tempRange.to ? format(tempRange.to, "dd/MM/yyyy", { locale: vi }) : void 0
-          } : void 0;
-          const fromWasString = range?.from && typeof range.from === "string";
-          const toWasString = range?.to && typeof range.to === "string";
-          const returnRange = tempRange ? {
-            from: fromWasString ? formattedRange?.from : tempRange.from,
-            to: toWasString ? formattedRange?.to : tempRange.to
-          } : void 0;
-          onRangeChange?.(returnRange, formattedRange);
-        }
-        setOpen(newOpen);
-      },
-      [mode, tempRange, range, onRangeChange, isApplyingManually]
-    );
-    const handleClearValue = React.useCallback(
-      (e) => {
-        e.stopPropagation();
-        const currentMonth = /* @__PURE__ */ new Date();
-        currentMonth.setDate(1);
-        setCalendarMonth(currentMonth);
-        onClearValue?.();
-        if (mode === "single") {
-          const returnValue = typeof value === "string" ? void 0 : void 0;
-          onChange?.(returnValue, void 0);
-        } else {
-          const fromWasString = range?.from && typeof range.from === "string";
-          const toWasString = range?.to && typeof range.to === "string";
-          const returnRange = fromWasString || toWasString ? { from: void 0, to: void 0 } : void 0;
-          onRangeChange?.(returnRange, void 0);
-        }
-        setTimeout(() => {
-          if (mode === "single") {
-            if (dateInputRef.current) {
-              dateInputRef.current.resetToFirstSegment();
-            }
-          } else {
-            if (dateRangeInputRef.current) {
-              dateRangeInputRef.current.resetToFirstSegment();
-            }
-          }
-        }, 0);
-        setOpen(true);
-      },
-      [mode, value, range, onClearValue, onChange, onRangeChange]
-    );
-    const defaultMinDate = React.useMemo(() => new Date(1900, 0, 1), []);
-    const defaultMaxDate = React.useMemo(() => new Date(2099, 11, 31), []);
-    const effectiveMinDate = minDate || defaultMinDate;
-    const effectiveMaxDate = maxDate || defaultMaxDate;
-    const isDateDisabled = React.useCallback(
-      (date) => {
-        if (effectiveMinDate && date < effectiveMinDate) return true;
-        if (effectiveMaxDate && date > effectiveMaxDate) return true;
-        if (disabledDates) return disabledDates(date);
-        return false;
-      },
-      [effectiveMinDate, effectiveMaxDate, disabledDates]
-    );
-    const handleCalendarIconClick = React.useCallback(
-      (e) => {
-        e.stopPropagation();
-        setOpen(true);
-        setTimeout(() => {
-          if (mode === "single") {
-            if (dateInputRef.current) {
-              dateInputRef.current.focus();
-            }
-          } else {
-            if (dateRangeInputRef.current) {
-              dateRangeInputRef.current.focus();
-            }
-          }
-        }, 0);
-      },
-      [mode]
-    );
-    const hasValue = React.useMemo(
-      () => mode === "single" ? !!value : !!range?.from,
-      [mode, value, range?.from]
-    );
-    const displayRange = React.useMemo(() => {
-      if (mode !== "range") return void 0;
-      if (open && tempRange) {
-        return {
-          from: tempRange.from,
-          to: tempRange.to
-        };
-      }
-      return range;
-    }, [mode, open, tempRange, range]);
-    const iconSizeClasses = React.useMemo(
-      () => ({
-        default: "h-5 w-5",
-        lg: "h-5 w-5"
-      }),
-      []
-    );
-    const Comp = !isDesktop ? Sheet : Popover;
-    const TriggerComp = !isDesktop ? SheetTrigger : PopoverTrigger;
-    const ContentComp = !isDesktop ? SheetContent : PopoverContent;
-    return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
-      Comp,
-      {
-        open: disabled ? false : open,
-        modal: !isDesktop,
-        onOpenChange: disabled ? void 0 : handleOpenChange,
-        children: [
-          /* @__PURE__ */ jsx(TriggerComp, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: mode === "single" ? /* @__PURE__ */ jsx(
-            DateInput,
-            {
-              ref: dateInputRef,
-              value,
-              minDate: effectiveMinDate,
-              maxDate: effectiveMaxDate,
-              onChange: (date, formattedDate) => {
-                if (date) {
-                  onChange?.(date, formattedDate);
-                } else {
-                  onChange?.(void 0, void 0);
-                }
-              },
-              label,
-              placeholder: label,
-              autoComplete: "off",
-              autoCorrect: "off",
-              helpText: helperText,
-              helpTextClassName: cn(
-                "mt-1 text-sm",
-                error ? "text-destructive" : "text-muted-foreground",
-                helperTextClass
-              ),
-              className: cn(
-                "border-input bg-background focus:border-primary min-w-[200px] rounded-md border focus:outline-none",
-                {
-                  "border-destructive": error,
-                  "cursor-pointer": !disabled
-                },
-                className
-              ),
-              onClick: () => setOpen(true),
-              size,
-              disabled,
-              isRequired,
-              buttonIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
-                hasRemoveIcon && hasValue && !disabled && /* @__PURE__ */ jsx(
-                  CloseCircleFilledIcon,
-                  {
-                    className: "input-remove-icon mr-1 cursor-pointer hover:opacity-70",
-                    onClick: handleClearValue
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  CalendarOutlinedIcon,
-                  {
-                    className: cn(
-                      "cursor-pointer opacity-50 hover:opacity-70",
-                      iconSizeClasses[size]
-                    ),
-                    onClick: handleCalendarIconClick
-                  }
-                )
-              ] }),
-              showRemoveIcon: false,
-              ...rest
-            }
-          ) : /* @__PURE__ */ jsx(
-            DateRangeInput,
-            {
-              ref: dateRangeInputRef,
-              value: displayRange,
-              onChange: (dateRange, formattedRange) => {
-                onRangeChange?.(dateRange, formattedRange);
-              },
-              minDate: effectiveMinDate,
-              maxDate: effectiveMaxDate,
-              disabled,
-              error,
-              className: cn(
-                "border-input bg-background focus:border-primary min-w-[260px] rounded-md border focus:outline-none",
-                {
-                  "border-destructive": error,
-                  "cursor-pointer": !disabled
-                },
-                className
-              ),
-              label,
-              placeholder: label,
-              onClick: () => setOpen(true),
-              size,
-              isRequired,
-              helpText: helperText,
-              helpTextClassName: cn(
-                "mt-1 text-sm",
-                error ? "text-destructive" : "text-muted-foreground",
-                helperTextClass
-              ),
-              buttonIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
-                hasRemoveIcon && hasValue && !disabled && /* @__PURE__ */ jsx(
-                  CloseCircleFilledIcon,
-                  {
-                    className: "input-remove-icon mr-1 cursor-pointer hover:opacity-70",
-                    onClick: handleClearValue
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  CalendarOutlinedIcon,
-                  {
-                    className: cn(
-                      "cursor-pointer opacity-50 hover:opacity-70",
-                      iconSizeClasses[size]
-                    ),
-                    onClick: handleCalendarIconClick
-                  }
-                )
-              ] }),
-              showRemoveIcon: false,
-              ...rest
-            }
-          ) }) }),
-          /* @__PURE__ */ jsxs(
-            ContentComp,
-            {
-              className: cn(
-                !isDesktop ? "w-full" : "p-0",
-                mode === "range" && isDesktop && calendarNavView === "days" ? "min-w-[558px]" : "w-auto",
-                {
-                  "date-picker-popover-content": !!isDesktop
-                }
-              ),
-              align: !isDesktop ? void 0 : "start",
-              onOpenAutoFocus: (e) => e.preventDefault(),
-              onCloseAutoFocus: (e) => e.preventDefault(),
-              ...!!isDesktop && {
-                sticky: "always",
-                hideWhenDetached: true,
-                avoidCollisions: true,
-                collisionPadding: 8,
-                sideOffset: 4,
-                alignOffset: -4
-              },
-              ...!isDesktop && { side: "bottom" },
-              children: [
-                !isDesktop && label && /* @__PURE__ */ jsxs(SheetHeader, { children: [
-                  /* @__PURE__ */ jsx(SheetTitle, { children: label }),
-                  /* @__PURE__ */ jsx(SheetDescription, { className: "text-center", children: mode === "single" ? getDateValue(value) ? format(getDateValue(value), "dd/MM/yyyy", { locale: vi }) : "" : tempRange?.from || tempRange?.to ? `${tempRange?.from ? format(tempRange.from, "dd/MM/yyyy", { locale: vi }) : ""}${tempRange?.from && tempRange?.to ? " - " : ""}${tempRange?.to ? format(tempRange.to, "dd/MM/yyyy", { locale: vi }) : ""}` : "" })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "flex w-full justify-center", children: mode === "single" ? /* @__PURE__ */ jsx(
-                  Calendar,
-                  {
-                    mode: "single",
-                    selected: getDateValue(value),
-                    onSelect: handleDateSelect,
-                    disabled: isDateDisabled,
-                    startMonth: effectiveMinDate,
-                    endMonth: effectiveMaxDate,
-                    locale: vi,
-                    className: "w-full p-3",
-                    autoFocus: false,
-                    defaultMonth: calendarMonth,
-                    onNavViewChange: setCalendarNavView
-                  }
-                ) : /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center lg:items-start", children: [
-                  /* @__PURE__ */ jsx(
-                    Calendar,
-                    {
-                      autoFocus: false,
-                      mode: "range",
-                      selected: tempRange,
-                      onSelect: handleRangeSelect,
-                      disabled: isDateDisabled,
-                      startMonth: effectiveMinDate,
-                      endMonth: effectiveMaxDate,
-                      locale: vi,
-                      className: "p-3",
-                      numberOfMonths: !isDesktop ? 1 : 2,
-                      defaultMonth: calendarMonth,
-                      onNavViewChange: setCalendarNavView
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    DatePickerFooter,
-                    {
-                      onClear: handleFooterClear,
-                      onApply: handleFooterApply,
-                      onClose: () => setOpen(false),
-                      hasValue: !!(tempRange?.from || tempRange?.to)
-                    }
-                  )
-                ] }) })
-              ]
-            }
-          )
-        ]
-      }
-    ) });
-  }
-);
-DatePicker.displayName = "DatePicker";
-
-export { DatePicker };
-//# sourceMappingURL=date-picker.mjs.map
-//# sourceMappingURL=date-picker.mjs.map