@quen-ui/components 0.0.14 → 1.0.0

package/dist/InputDate/InputDate.cjs.js

@@ -0,0 +1,344 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const helpers$1 = require("@quen-ui/helpers");
+const hooks = require("@quen-ui/hooks");
+const styles = require("./styles.cjs.js");
+const Calendar = require("../Calendar/Calendar.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const iconClose = require("../assets/icon-close.svg.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const Dropdown = require("../Dropdown/Dropdown.cjs.js");
+const helpers = require("./helpers.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const InputDate = ({
+  label,
+  size = "m",
+  required,
+  disabled,
+  error,
+  minDate,
+  maxDate,
+  className,
+  classNameInput,
+  onBlur,
+  onFocus,
+  defaultValue,
+  id,
+  name,
+  placeholder,
+  rightContent,
+  value,
+  onChange,
+  leftContent,
+  isAutoFocus,
+  clearable,
+  onClear,
+  style,
+  range,
+  renderDay,
+  getDayProps,
+  dateFormat = "yyyy-mm-dd",
+  valueFormatter,
+  defaultLevel,
+  showButtonToday,
+  level,
+  locale,
+  ...props
+}) => {
+  const [openDropdownCalendar, setOpenDropdownCalendar] = React.useState(false);
+  const calendarRef = React.useRef(null);
+  const [singleDate, setSingleDate] = React.useState(
+    !range && value ? new Date(value) : null
+  );
+  const [rangeDate, setRangeDate] = React.useState(
+    range && value ? {
+      startDate: value.startDate ? new Date(value.startDate) : null,
+      endDate: value.endDate ? new Date(value.endDate) : null
+    } : { startDate: null, endDate: null }
+  );
+  const [inputValue, setInputValue] = React.useState(
+    !range && singleDate ? helpers.formatDate(singleDate, dateFormat) : ""
+  );
+  const [startInput, setStartInput] = React.useState(
+    rangeDate.startDate ? helpers.formatDate(rangeDate.startDate, dateFormat) : ""
+  );
+  const [endInput, setEndInput] = React.useState(
+    rangeDate.endDate ? helpers.formatDate(rangeDate.endDate, dateFormat) : ""
+  );
+  const [focus, setFocus] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const startInputRef = React.useRef(null);
+  const endInputRef = React.useRef(null);
+  const inputWrapperRef = React.useRef(null);
+  hooks.useOnClickOutside(
+    calendarRef,
+    () => {
+      setOpenDropdownCalendar(false);
+    },
+    { excludeRef: inputRef }
+  );
+  React.useEffect(() => {
+    if (!valueFormatter) {
+      if (range) {
+        setStartInput(
+          rangeDate.startDate ? helpers.formatDate(rangeDate.startDate, dateFormat) : ""
+        );
+        setEndInput(
+          rangeDate.endDate ? helpers.formatDate(rangeDate.endDate, dateFormat) : ""
+        );
+      } else {
+        setInputValue(singleDate ? helpers.formatDate(singleDate, dateFormat) : "");
+      }
+    }
+  }, [dateFormat]);
+  const handleClick = () => {
+    setFocus(true);
+    inputRef.current?.focus();
+    startInputRef.current?.focus();
+  };
+  const handleBlur = (event) => {
+    setFocus(false);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocus(true);
+    onFocus?.(event);
+  };
+  const handleClearClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onChange?.(null);
+    onClear?.(event);
+    setRangeDate({ endDate: null, startDate: null });
+    setSingleDate(null);
+    setInputValue("");
+    setStartInput("");
+    setEndInput("");
+  };
+  const handleInputChange = (e, type) => {
+    const raw = e.target.value;
+    const formatted = helpers.autoFormatInput(raw, dateFormat, valueFormatter);
+    const updateInput = (setInput, setDate, value2) => {
+      setInput(value2);
+      const clean = value2.replace(/\D/g, "");
+      if (clean.length === 8) {
+        const parsed = helpers.parseDate(value2, dateFormat);
+        if (parsed && !isNaN(parsed.getTime())) {
+          setDate(parsed);
+          return parsed;
+        }
+      }
+      setDate(null);
+      return null;
+    };
+    if (type === "single" && !range) {
+      const parsed = updateInput(setInputValue, setSingleDate, formatted);
+      if (!parsed) {
+        onChange?.(null);
+      } else if (helpers.checkRangeDate(parsed, minDate, maxDate)) {
+        onChange?.(parsed ? helpers.getDate(parsed) : null);
+      }
+      return;
+    }
+    if (range) {
+      if (type === "start") {
+        const newStart = updateInput(setStartInput, () => {
+        }, formatted);
+        setRangeDate((prev) => {
+          const updated = { ...prev, startDate: newStart };
+          const bothFilled = updated.startDate && updated.endDate;
+          const bothEmpty = !updated.startDate && !updated.endDate && !formatted;
+          if (bothFilled && helpers.checkRangeDate(updated.startDate, minDate, maxDate) && helpers.checkRangeDate(updated.endDate, minDate, maxDate)) {
+            onChange?.({
+              startDate: helpers.getDate(updated.startDate),
+              endDate: helpers.getDate(updated.endDate)
+            });
+          } else if (bothEmpty) {
+            onChange?.(null);
+          }
+          return updated;
+        });
+        if (newStart) {
+          endInputRef.current?.focus();
+        }
+      }
+      if (type === "end") {
+        const newEnd = updateInput(setEndInput, () => {
+        }, formatted);
+        setRangeDate((prev) => {
+          const updated = { ...prev, endDate: newEnd };
+          const bothFilled = updated.startDate && updated.endDate;
+          const bothEmpty = !updated.startDate && !updated.endDate && !formatted;
+          if (bothFilled && helpers.checkRangeDate(updated.startDate, minDate, maxDate) && helpers.checkRangeDate(updated.endDate, minDate, maxDate)) {
+            onChange?.({
+              startDate: helpers.getDate(updated.startDate),
+              endDate: helpers.getDate(updated.endDate)
+            });
+          } else if (bothEmpty) {
+            onChange?.(null);
+          }
+          return updated;
+        });
+        if (!formatted) {
+          startInputRef.current?.focus();
+        }
+      }
+    }
+  };
+  const handleChangeCalendar = (value2) => {
+    if (range && typeof value2 === "object" && value2) {
+      setRangeDate({
+        startDate: new Date(value2.startDate),
+        endDate: value2.endDate ? new Date(value2.endDate) : null
+      });
+      if (value2.startDate) {
+        setStartInput(
+          helpers.formatDate(new Date(value2.startDate), dateFormat, valueFormatter)
+        );
+      }
+      if (value2.endDate) {
+        setEndInput(
+          helpers.formatDate(new Date(value2.endDate), dateFormat, valueFormatter)
+        );
+      }
+      if (value2.startDate && value2.endDate) {
+        onChange?.({
+          startDate: value2.startDate,
+          endDate: value2.endDate
+        });
+      }
+    } else if (!range && typeof value2 === "string") {
+      const formatted = helpers.formatDate(new Date(value2), dateFormat, valueFormatter);
+      setSingleDate(new Date(value2));
+      setInputValue(formatted);
+      onChange?.(value2);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      styles.InputBaseStyled,
+      {
+        onClick: () => setOpenDropdownCalendar((prev) => !prev),
+        ref: inputWrapperRef,
+        className: helpers$1.cnMerge(className, {
+          "quen-ui__input-base--focus-input": focus
+        }),
+        id,
+        "data-testid": "input",
+        size,
+        disabled,
+        error,
+        label,
+        style,
+        leftContent,
+        required,
+        rightContent,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", justify: "space-between", className: "quen-ui__inputs-date-wrapper", children: [
+          range ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              styles.InputDateStyled,
+              {
+                ref: startInputRef,
+                "data-testid": "input-start-date",
+                onChange: (e) => handleInputChange(e, "start"),
+                autoFocus: isAutoFocus,
+                placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder,
+                name,
+                id,
+                value: startInput,
+                disabled,
+                className: helpers$1.cnMerge("quen-ui__input-date--input", classNameInput),
+                onClick: handleClick,
+                onBlur: handleBlur,
+                onFocus: handleFocus,
+                required,
+                "data-date-format": "yyyy-MM-dd"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: "-" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              styles.InputDateStyled,
+              {
+                ref: endInputRef,
+                "data-testid": "input-end-date",
+                autoFocus: isAutoFocus,
+                placeholder: Array.isArray(placeholder) ? placeholder[1] : placeholder,
+                name,
+                id,
+                value: endInput,
+                disabled,
+                className: helpers$1.cnMerge("quen-ui__input-date--input", classNameInput),
+                onClick: handleClick,
+                onBlur: handleBlur,
+                onFocus: handleFocus,
+                required,
+                onChange: (e) => handleInputChange(e, "end"),
+                "data-date-format": "yyyy-MM-dd"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+            styles.InputDateStyled,
+            {
+              ref: inputRef,
+              "data-testid": "input-single-date",
+              autoFocus: isAutoFocus,
+              placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder,
+              name,
+              id,
+              value: inputValue,
+              disabled,
+              className: classNameInput,
+              onClick: handleClick,
+              onBlur: handleBlur,
+              onFocus: handleFocus,
+              required,
+              onChange: (e) => handleInputChange(e, "single")
+            }
+          ),
+          clearable && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              "data-testid": "clearable-button",
+              view: "icon",
+              size: "xs",
+              onClick: handleClearClick,
+              disabled,
+              children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { width: 16, height: 16 })
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Dropdown,
+      {
+        anchorRef: inputWrapperRef,
+        open: openDropdownCalendar,
+        content: /* @__PURE__ */ jsxRuntime.jsx(
+          Calendar,
+          {
+            ref: calendarRef,
+            value: range ? {
+              startDate: rangeDate.startDate?.toISOString() || "",
+              endDate: rangeDate.endDate?.toISOString() || ""
+            } : singleDate?.toISOString() ?? "",
+            range,
+            renderDay,
+            getDayProps,
+            maxDate,
+            minDate,
+            onChange: handleChangeCalendar,
+            level,
+            locale,
+            defaultValue,
+            defaultLevel,
+            showButtonToday
+          }
+        )
+      }
+    )
+  ] });
+};
+module.exports = InputDate;

package/dist/InputDate/InputDate.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { TInputDateProps } from './types';
+declare const InputDate: ({ label, size, required, disabled, error, minDate, maxDate, className, classNameInput, onBlur, onFocus, defaultValue, id, name, placeholder, rightContent, value, onChange, leftContent, isAutoFocus, clearable, onClear, style, range, renderDay, getDayProps, dateFormat, valueFormatter, defaultLevel, showButtonToday, level, locale, ...props }: TInputDateProps) => ReactElement;
+export default InputDate;

package/dist/InputDate/InputDate.es.js

@@ -0,0 +1,345 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { cnMerge } from "@quen-ui/helpers";
+import { useOnClickOutside } from "@quen-ui/hooks";
+import { InputBaseStyled, InputDateStyled } from "./styles.es.js";
+import Calendar from "../Calendar/Calendar.es.js";
+import Button from "../Button/Button.es.js";
+import SvgIconClose from "../assets/icon-close.svg.es.js";
+import Flex from "../Flex/Flex.es.js";
+import Dropdown from "../Dropdown/Dropdown.es.js";
+import { formatDate, autoFormatInput, checkRangeDate, getDate, parseDate } from "./helpers.es.js";
+import Text from "../typography/Text/Text.es.js";
+const InputDate = ({
+  label,
+  size = "m",
+  required,
+  disabled,
+  error,
+  minDate,
+  maxDate,
+  className,
+  classNameInput,
+  onBlur,
+  onFocus,
+  defaultValue,
+  id,
+  name,
+  placeholder,
+  rightContent,
+  value,
+  onChange,
+  leftContent,
+  isAutoFocus,
+  clearable,
+  onClear,
+  style,
+  range,
+  renderDay,
+  getDayProps,
+  dateFormat = "yyyy-mm-dd",
+  valueFormatter,
+  defaultLevel,
+  showButtonToday,
+  level,
+  locale,
+  ...props
+}) => {
+  const [openDropdownCalendar, setOpenDropdownCalendar] = useState(false);
+  const calendarRef = useRef(null);
+  const [singleDate, setSingleDate] = useState(
+    !range && value ? new Date(value) : null
+  );
+  const [rangeDate, setRangeDate] = useState(
+    range && value ? {
+      startDate: value.startDate ? new Date(value.startDate) : null,
+      endDate: value.endDate ? new Date(value.endDate) : null
+    } : { startDate: null, endDate: null }
+  );
+  const [inputValue, setInputValue] = useState(
+    !range && singleDate ? formatDate(singleDate, dateFormat) : ""
+  );
+  const [startInput, setStartInput] = useState(
+    rangeDate.startDate ? formatDate(rangeDate.startDate, dateFormat) : ""
+  );
+  const [endInput, setEndInput] = useState(
+    rangeDate.endDate ? formatDate(rangeDate.endDate, dateFormat) : ""
+  );
+  const [focus, setFocus] = useState(false);
+  const inputRef = useRef(null);
+  const startInputRef = useRef(null);
+  const endInputRef = useRef(null);
+  const inputWrapperRef = useRef(null);
+  useOnClickOutside(
+    calendarRef,
+    () => {
+      setOpenDropdownCalendar(false);
+    },
+    { excludeRef: inputRef }
+  );
+  useEffect(() => {
+    if (!valueFormatter) {
+      if (range) {
+        setStartInput(
+          rangeDate.startDate ? formatDate(rangeDate.startDate, dateFormat) : ""
+        );
+        setEndInput(
+          rangeDate.endDate ? formatDate(rangeDate.endDate, dateFormat) : ""
+        );
+      } else {
+        setInputValue(singleDate ? formatDate(singleDate, dateFormat) : "");
+      }
+    }
+  }, [dateFormat]);
+  const handleClick = () => {
+    setFocus(true);
+    inputRef.current?.focus();
+    startInputRef.current?.focus();
+  };
+  const handleBlur = (event) => {
+    setFocus(false);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocus(true);
+    onFocus?.(event);
+  };
+  const handleClearClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onChange?.(null);
+    onClear?.(event);
+    setRangeDate({ endDate: null, startDate: null });
+    setSingleDate(null);
+    setInputValue("");
+    setStartInput("");
+    setEndInput("");
+  };
+  const handleInputChange = (e, type) => {
+    const raw = e.target.value;
+    const formatted = autoFormatInput(raw, dateFormat, valueFormatter);
+    const updateInput = (setInput, setDate, value2) => {
+      setInput(value2);
+      const clean = value2.replace(/\D/g, "");
+      if (clean.length === 8) {
+        const parsed = parseDate(value2, dateFormat);
+        if (parsed && !isNaN(parsed.getTime())) {
+          setDate(parsed);
+          return parsed;
+        }
+      }
+      setDate(null);
+      return null;
+    };
+    if (type === "single" && !range) {
+      const parsed = updateInput(setInputValue, setSingleDate, formatted);
+      if (!parsed) {
+        onChange?.(null);
+      } else if (checkRangeDate(parsed, minDate, maxDate)) {
+        onChange?.(parsed ? getDate(parsed) : null);
+      }
+      return;
+    }
+    if (range) {
+      if (type === "start") {
+        const newStart = updateInput(setStartInput, () => {
+        }, formatted);
+        setRangeDate((prev) => {
+          const updated = { ...prev, startDate: newStart };
+          const bothFilled = updated.startDate && updated.endDate;
+          const bothEmpty = !updated.startDate && !updated.endDate && !formatted;
+          if (bothFilled && checkRangeDate(updated.startDate, minDate, maxDate) && checkRangeDate(updated.endDate, minDate, maxDate)) {
+            onChange?.({
+              startDate: getDate(updated.startDate),
+              endDate: getDate(updated.endDate)
+            });
+          } else if (bothEmpty) {
+            onChange?.(null);
+          }
+          return updated;
+        });
+        if (newStart) {
+          endInputRef.current?.focus();
+        }
+      }
+      if (type === "end") {
+        const newEnd = updateInput(setEndInput, () => {
+        }, formatted);
+        setRangeDate((prev) => {
+          const updated = { ...prev, endDate: newEnd };
+          const bothFilled = updated.startDate && updated.endDate;
+          const bothEmpty = !updated.startDate && !updated.endDate && !formatted;
+          if (bothFilled && checkRangeDate(updated.startDate, minDate, maxDate) && checkRangeDate(updated.endDate, minDate, maxDate)) {
+            onChange?.({
+              startDate: getDate(updated.startDate),
+              endDate: getDate(updated.endDate)
+            });
+          } else if (bothEmpty) {
+            onChange?.(null);
+          }
+          return updated;
+        });
+        if (!formatted) {
+          startInputRef.current?.focus();
+        }
+      }
+    }
+  };
+  const handleChangeCalendar = (value2) => {
+    if (range && typeof value2 === "object" && value2) {
+      setRangeDate({
+        startDate: new Date(value2.startDate),
+        endDate: value2.endDate ? new Date(value2.endDate) : null
+      });
+      if (value2.startDate) {
+        setStartInput(
+          formatDate(new Date(value2.startDate), dateFormat, valueFormatter)
+        );
+      }
+      if (value2.endDate) {
+        setEndInput(
+          formatDate(new Date(value2.endDate), dateFormat, valueFormatter)
+        );
+      }
+      if (value2.startDate && value2.endDate) {
+        onChange?.({
+          startDate: value2.startDate,
+          endDate: value2.endDate
+        });
+      }
+    } else if (!range && typeof value2 === "string") {
+      const formatted = formatDate(new Date(value2), dateFormat, valueFormatter);
+      setSingleDate(new Date(value2));
+      setInputValue(formatted);
+      onChange?.(value2);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      InputBaseStyled,
+      {
+        onClick: () => setOpenDropdownCalendar((prev) => !prev),
+        ref: inputWrapperRef,
+        className: cnMerge(className, {
+          "quen-ui__input-base--focus-input": focus
+        }),
+        id,
+        "data-testid": "input",
+        size,
+        disabled,
+        error,
+        label,
+        style,
+        leftContent,
+        required,
+        rightContent,
+        ...props,
+        children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", className: "quen-ui__inputs-date-wrapper", children: [
+          range ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              InputDateStyled,
+              {
+                ref: startInputRef,
+                "data-testid": "input-start-date",
+                onChange: (e) => handleInputChange(e, "start"),
+                autoFocus: isAutoFocus,
+                placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder,
+                name,
+                id,
+                value: startInput,
+                disabled,
+                className: cnMerge("quen-ui__input-date--input", classNameInput),
+                onClick: handleClick,
+                onBlur: handleBlur,
+                onFocus: handleFocus,
+                required,
+                "data-date-format": "yyyy-MM-dd"
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { size, children: "-" }),
+            /* @__PURE__ */ jsx(
+              InputDateStyled,
+              {
+                ref: endInputRef,
+                "data-testid": "input-end-date",
+                autoFocus: isAutoFocus,
+                placeholder: Array.isArray(placeholder) ? placeholder[1] : placeholder,
+                name,
+                id,
+                value: endInput,
+                disabled,
+                className: cnMerge("quen-ui__input-date--input", classNameInput),
+                onClick: handleClick,
+                onBlur: handleBlur,
+                onFocus: handleFocus,
+                required,
+                onChange: (e) => handleInputChange(e, "end"),
+                "data-date-format": "yyyy-MM-dd"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            InputDateStyled,
+            {
+              ref: inputRef,
+              "data-testid": "input-single-date",
+              autoFocus: isAutoFocus,
+              placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder,
+              name,
+              id,
+              value: inputValue,
+              disabled,
+              className: classNameInput,
+              onClick: handleClick,
+              onBlur: handleBlur,
+              onFocus: handleFocus,
+              required,
+              onChange: (e) => handleInputChange(e, "single")
+            }
+          ),
+          clearable && /* @__PURE__ */ jsx(
+            Button,
+            {
+              "data-testid": "clearable-button",
+              view: "icon",
+              size: "xs",
+              onClick: handleClearClick,
+              disabled,
+              children: /* @__PURE__ */ jsx(SvgIconClose, { width: 16, height: 16 })
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        anchorRef: inputWrapperRef,
+        open: openDropdownCalendar,
+        content: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            ref: calendarRef,
+            value: range ? {
+              startDate: rangeDate.startDate?.toISOString() || "",
+              endDate: rangeDate.endDate?.toISOString() || ""
+            } : singleDate?.toISOString() ?? "",
+            range,
+            renderDay,
+            getDayProps,
+            maxDate,
+            minDate,
+            onChange: handleChangeCalendar,
+            level,
+            locale,
+            defaultValue,
+            defaultLevel,
+            showButtonToday
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  InputDate as default
+};