@ultraviolet/ui 3.0.0-beta.26 → 3.0.0-beta.28

package/dist/components/DateInput/components/CalendarDaily.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useContext, useState } from "react";
 import { Button } from "../../Button/index.js";
 import { Row } from "../../Row/index.js";
@@ -32,36 +32,57 @@ const Daily = () => {
     hoveredDate,
     setHoveredDate
   } = useContext(DateInputContext);
-  const [rangeState, setRangeState] = useState(range?.start && !range?.end ? "end" : "start");
+  const [rangeState, setRangeState] = useState(
+    range?.start && !range?.end ? "end" : "start"
+  );
   const monthDays = new Date(yearToShow, monthToShow, 0).getDate();
   const daysFromPreviousMonth = getMonthFirstDay(monthToShow, yearToShow);
   const daysFromNextMonth = CALENDAR_WEEKS * 7 - (daysFromPreviousMonth + monthDays);
-  const [previousMonth, prevMonthYear] = getPreviousMonth(monthToShow, yearToShow);
+  const [previousMonth, prevMonthYear] = getPreviousMonth(
+    monthToShow,
+    yearToShow
+  );
   const [nextMonth, nextMonthYear] = getNextMonth(monthToShow, yearToShow);
   const previousMonthDays = new Date(prevMonthYear, previousMonth, 0).getDate();
-  const prevMonthDates = Array.from({
-    length: daysFromPreviousMonth
-  }, (_, index) => ({
-    day: index + 1 + (previousMonthDays - daysFromPreviousMonth),
-    month: -1
-  }));
-  const currentMonthDates = Array.from({
-    length: monthDays
-  }, (_, index) => ({
+  const prevMonthDates = Array.from(
+    { length: daysFromPreviousMonth },
+    (_, index) => ({
+      day: index + 1 + (previousMonthDays - daysFromPreviousMonth),
+      month: -1
+    })
+  );
+  const currentMonthDates = Array.from({ length: monthDays }, (_, index) => ({
     day: index + 1,
     month: 0
   }));
-  const nextMonthDates = Array.from({
-    length: daysFromNextMonth
-  }, (_, index) => ({
-    day: index + 1,
-    month: 1
-  }));
-  const allDaysToShow = [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];
+  const nextMonthDates = Array.from(
+    { length: daysFromNextMonth },
+    (_, index) => ({ day: index + 1, month: 1 })
+  );
+  const allDaysToShow = [
+    ...prevMonthDates,
+    ...currentMonthDates,
+    ...nextMonthDates
+  ];
   return /* @__PURE__ */ jsxs(Row, { gap: 1, templateColumns: "repeat(7, 1fr)", children: [
-    Object.entries(DAYS).map((day) => /* @__PURE__ */ jsx(Text, { as: "p", className: capitalizedTextDay, disabled, sentiment: "neutral", variant: "bodyStrong", children: day[1] }, day[0])),
+    Object.entries(DAYS).map((day) => /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "p",
+        className: capitalizedTextDay,
+        disabled,
+        sentiment: "neutral",
+        variant: "bodyStrong",
+        children: day[1]
+      },
+      day[0]
+    )),
     allDaysToShow.map((data) => {
-      const constructedDate = new Date(yearToShow, monthToShow - 1 + data.month, data.day);
+      const constructedDate = new Date(
+        yearToShow,
+        monthToShow - 1 + data.month,
+        data.day
+      );
       const isExcluded = excludeDates ? excludeDates.map((date) => isSameDay(constructedDate, date)).includes(true) : false;
       const isOutsideRange = !!(minDate && constructedDate < minDate) || !!(maxDate && constructedDate > maxDate);
       const isSelected = value && isSameDay(constructedDate, new Date(value)) || range?.end && isSameDay(constructedDate, range.end) || range?.start && isSameDay(constructedDate, range.start);
@@ -83,39 +104,45 @@ const Daily = () => {
       const onClickRange = (event, newDate) => {
         if (selectsRange) {
           if (rangeState === "end" && isAfterStartDate) {
-            setRange?.({
-              end: newDate,
-              start: range.start
-            });
+            setRange?.({ end: newDate, start: range.start });
             onChange?.([range.start, newDate], event);
-            setInputValue(formatValue(null, {
-              end: newDate,
-              start: range.start
-            }, false, true, format));
+            setInputValue(
+              formatValue(
+                null,
+                { end: newDate, start: range.start },
+                false,
+                true,
+                format
+              )
+            );
             setRangeState("start");
             setVisible(false);
           } else if (rangeState === "end" && !isAfterStartDate && range?.start) {
-            setRange?.({
-              end: range.start,
-              start: newDate
-            });
+            setRange?.({ end: range.start, start: newDate });
             onChange?.([newDate, range.start], event);
-            setInputValue(formatValue(null, {
-              end: range.start,
-              start: newDate
-            }, false, true, format));
+            setInputValue(
+              formatValue(
+                null,
+                { end: range.start, start: newDate },
+                false,
+                true,
+                format
+              )
+            );
             setRangeState("start");
             setVisible(false);
           } else {
-            setRange?.({
-              end: null,
-              start: newDate
-            });
+            setRange?.({ end: null, start: newDate });
             onChange?.([newDate, null], event);
-            setInputValue(formatValue(null, {
-              end: null,
-              start: newDate
-            }, false, true, format));
+            setInputValue(
+              formatValue(
+                null,
+                { end: null, start: newDate },
+                false,
+                true,
+                format
+              )
+            );
             setRangeState("end");
           }
         }
@@ -144,23 +171,39 @@ const Daily = () => {
         }
         return "neutral";
       };
-      return /* @__PURE__ */ jsx(Button, { "aria-label": dayState(), className: dayMonth, "data-testid": createTestId(), disabled: disabled || isExcluded || isOutsideRange, onClick: (event) => {
-        if (!isExcluded && !isOutsideRange && !readOnly) {
-          const newDate = getNewDate();
-          if (selectsRange) {
-            onClickRange(event, newDate);
-          } else {
-            setValue(newDate);
-            onChange?.(newDate, event);
-            setInputValue(formatValue(newDate, null, false, false, format));
-            setVisible(false);
-          }
-        }
-      }, onMouseEnter: () => {
-        if (selectsRange && range?.start) {
-          setHoveredDate(constructedDate);
-        }
-      }, sentiment: isSelected || isInHoveredRange ? "primary" : "neutral", variant: isSelected || isInHoveredRange ? "filled" : "ghost", children: data.day }, `${data.month}-${data.day}`);
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": dayState(),
+          className: dayMonth,
+          "data-testid": createTestId(),
+          disabled: disabled || isExcluded || isOutsideRange,
+          onClick: (event) => {
+            if (!isExcluded && !isOutsideRange && !readOnly) {
+              const newDate = getNewDate();
+              if (selectsRange) {
+                onClickRange(event, newDate);
+              } else {
+                setValue(newDate);
+                onChange?.(newDate, event);
+                setInputValue(
+                  formatValue(newDate, null, false, false, format)
+                );
+                setVisible(false);
+              }
+            }
+          },
+          onMouseEnter: () => {
+            if (selectsRange && range?.start) {
+              setHoveredDate(constructedDate);
+            }
+          },
+          sentiment: isSelected || isInHoveredRange ? "primary" : "neutral",
+          variant: isSelected || isInHoveredRange ? "filled" : "ghost",
+          children: data.day
+        },
+        `${data.month}-${data.day}`
+      );
     })
   ] });
 };

package/dist/components/DateInput/components/CalendarMonthly.d.ts

@@ -1 +1 @@
-export declare const Monthly: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Monthly: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/DateInput/components/CalendarMonthly.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext, useState } from "react";
 import { Button } from "../../Button/index.js";
 import { Row } from "../../Row/index.js";
@@ -28,7 +28,9 @@ const Monthly = () => {
     setHoveredDate,
     hoveredDate
   } = useContext(DateInputContext);
-  const [rangeState, setRangeState] = useState(range?.start && !range.end ? "end" : "start");
+  const [rangeState, setRangeState] = useState(
+    range?.start && !range.end ? "end" : "start"
+  );
   return /* @__PURE__ */ jsx(Row, { gap: 1, templateColumns: "1fr 1fr 1fr", children: Object.entries(MONTHS).map((month, index) => {
     const constructedDate = new Date(yearToShow, index, 1);
     const isExcluded = excludeDates ? excludeDates.map((date) => isSameMonth(constructedDate, date)).includes(true) : false;
@@ -39,39 +41,45 @@ const Monthly = () => {
     const onClickRange = (event, newDate) => {
       if (selectsRange) {
         if (rangeState === "end" && isAfterStartDate) {
-          setRange?.({
-            end: newDate,
-            start: range.start
-          });
+          setRange?.({ end: newDate, start: range.start });
           onChange?.([range.start, newDate], event);
-          setInputValue(formatValue(null, {
-            end: newDate,
-            start: range.start
-          }, true, true, format));
+          setInputValue(
+            formatValue(
+              null,
+              { end: newDate, start: range.start },
+              true,
+              true,
+              format
+            )
+          );
           setVisible(false);
           setRangeState("start");
         } else if (rangeState === "end" && !isAfterStartDate && range) {
-          setRange?.({
-            end: range.start,
-            start: newDate
-          });
+          setRange?.({ end: range.start, start: newDate });
           onChange?.([newDate, range.start], event);
-          setInputValue(formatValue(null, {
-            end: range.start,
-            start: newDate
-          }, true, true, format));
+          setInputValue(
+            formatValue(
+              null,
+              { end: range.start, start: newDate },
+              true,
+              true,
+              format
+            )
+          );
           setVisible(false);
           setRangeState("start");
         } else {
-          setRange?.({
-            end: null,
-            start: newDate
-          });
+          setRange?.({ end: null, start: newDate });
           onChange?.([newDate, null], event);
-          setInputValue(formatValue(null, {
-            end: null,
-            start: newDate
-          }, true, true, format));
+          setInputValue(
+            formatValue(
+              null,
+              { end: null, start: newDate },
+              true,
+              true,
+              format
+            )
+          );
           setRangeState("end");
         }
       }
@@ -85,19 +93,34 @@ const Monthly = () => {
       }
       return "neutral";
     };
-    return /* @__PURE__ */ jsx(Button, { "aria-label": monthState(), className: `${dayMonth} ${capitalizedText}`, disabled: disabled || isExcluded || isOutsideRange, onClick: (event) => {
-      if (!isExcluded && !isOutsideRange && !readOnly) {
-        if (selectsRange) {
-          onClickRange(event, constructedDate);
-        } else {
-          setMonthToShow(index + 1);
-          setValue(constructedDate);
-          onChange?.(constructedDate, event);
-          setInputValue(formatValue(constructedDate, null, true, false, format));
-          setVisible(false);
-        }
-      }
-    }, onMouseEnter: () => setHoveredDate(constructedDate), sentiment: isSelected || isInHoveredRange ? "primary" : "neutral", variant: isSelected || isInHoveredRange ? "filled" : "ghost", children: month[1] }, month[0]);
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": monthState(),
+        className: `${dayMonth} ${capitalizedText}`,
+        disabled: disabled || isExcluded || isOutsideRange,
+        onClick: (event) => {
+          if (!isExcluded && !isOutsideRange && !readOnly) {
+            if (selectsRange) {
+              onClickRange(event, constructedDate);
+            } else {
+              setMonthToShow(index + 1);
+              setValue(constructedDate);
+              onChange?.(constructedDate, event);
+              setInputValue(
+                formatValue(constructedDate, null, true, false, format)
+              );
+              setVisible(false);
+            }
+          }
+        },
+        onMouseEnter: () => setHoveredDate(constructedDate),
+        sentiment: isSelected || isInHoveredRange ? "primary" : "neutral",
+        variant: isSelected || isInHoveredRange ? "filled" : "ghost",
+        children: month[1]
+      },
+      month[0]
+    );
   }) });
 };
 export {

package/dist/components/DateInput/components/Popup.d.ts

@@ -6,5 +6,5 @@ type PopupProps = {
     refInput: RefObject<HTMLInputElement | null>;
     content: ReactNode;
 };
-export declare const CalendarPopup: ({ children, visible, setVisible, refInput, content, }: PopupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CalendarPopup: ({ children, visible, setVisible, refInput, content, }: PopupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DateInput/components/Popup.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { Popup } from "../../Popup/index.js";
 import { POPUP_WIDTH } from "../constants.js";
@@ -18,10 +18,33 @@ const CalendarPopup = ({
 }) => {
   const ref = useRef(null);
   useEffect(() => {
-    document.addEventListener("mousedown", (event) => handleClickOutside(event, ref, setVisible, refInput));
-    return () => document.removeEventListener("mousedown", (event) => handleClickOutside(event, ref, setVisible, refInput));
+    document.addEventListener(
+      "mousedown",
+      (event) => handleClickOutside(event, ref, setVisible, refInput)
+    );
+    return () => document.removeEventListener(
+      "mousedown",
+      (event) => handleClickOutside(event, ref, setVisible, refInput)
+    );
   }, [ref, setVisible, refInput]);
-  return /* @__PURE__ */ jsx(Popup, { align: "start", className: dateinputPopup, debounceDelay: 0, disableAnimation: true, hasArrow: false, maxWidth: POPUP_WIDTH, placement: "bottom", ref, role: "dialog", tabIndex: 0, text: content, visible, children });
+  return /* @__PURE__ */ jsx(
+    Popup,
+    {
+      align: "start",
+      className: dateinputPopup,
+      debounceDelay: 0,
+      disableAnimation: true,
+      hasArrow: false,
+      maxWidth: POPUP_WIDTH,
+      placement: "bottom",
+      ref,
+      role: "dialog",
+      tabIndex: 0,
+      text: content,
+      visible,
+      children
+    }
+  );
 };
 export {
   CalendarPopup

package/dist/components/DateInput/helpers.js

@@ -22,7 +22,11 @@ const getDateISO = (showMonthYearPicker, date) => {
     if (showMonthYearPicker) {
       return [addZero(date.getMonth() + 1), date.getFullYear()].join("/");
     }
-    return [addZero(date.getMonth() + 1), addZero(date.getDate()), date.getFullYear()].join("/");
+    return [
+      addZero(date.getMonth() + 1),
+      addZero(date.getDate()),
+      date.getFullYear()
+    ].join("/");
   }
   return "";
 };
@@ -53,7 +57,10 @@ const createDate = (value, showMonthYearPicker) => {
 };
 const createDateRange = (value, showMonthYearPicker) => {
   const [startDateInput, endDateInput] = value.split(" - ").map((val) => createDate(val, showMonthYearPicker));
-  const computedNewRange = [startDateInput instanceof Date && !Number.isNaN(startDateInput.getTime()) ? startDateInput : null, endDateInput instanceof Date && !Number.isNaN(endDateInput.getTime()) ? endDateInput : null];
+  const computedNewRange = [
+    startDateInput instanceof Date && !Number.isNaN(startDateInput.getTime()) ? startDateInput : null,
+    endDateInput instanceof Date && !Number.isNaN(endDateInput.getTime()) ? endDateInput : null
+  ];
   return computedNewRange;
 };
 export {

package/dist/components/DateInput/helpersLocale.js

@@ -1,7 +1,5 @@
 const getLocalizedDays = (locale) => {
-  const formatter = new Intl.DateTimeFormat(locale, {
-    weekday: "long"
-  });
+  const formatter = new Intl.DateTimeFormat(locale, { weekday: "long" });
   const days = [];
   for (let i = 0; i < 7; i += 1) {
     const date = new Date(1970, 0, i + 4);
@@ -11,9 +9,7 @@ const getLocalizedDays = (locale) => {
 };
 const getLocalizedMonths = (locale) => {
   const computedLocale = typeof locale === "string" ? locale : locale.code;
-  const formatter = new Intl.DateTimeFormat(computedLocale, {
-    month: "long"
-  });
+  const formatter = new Intl.DateTimeFormat(computedLocale, { month: "long" });
   const months = [];
   for (let i = 0; i < 12; i += 1) {
     const date = new Date(1970, i);
@@ -22,9 +18,7 @@ const getLocalizedMonths = (locale) => {
   return months;
 };
 const getLocalizedShortMonths = (locale) => {
-  const formatter = new Intl.DateTimeFormat(locale, {
-    month: "short"
-  });
+  const formatter = new Intl.DateTimeFormat(locale, { month: "short" });
   const months = [];
   for (let i = 0; i < 12; i += 1) {
     const date = new Date(1970, i);

package/dist/components/DateInput/index.d.ts

@@ -43,5 +43,5 @@ type DateInputProps<IsRange extends undefined | boolean = false> = {
 /**
  * DateInput can be used to select a specific date
  */
-export declare const DateInput: <IsRange extends undefined | boolean>({ autoFocus, disabled, error, format, label, labelDescription, locale, maxDate, minDate, startDate, endDate, name, onBlur, onChange, placeholder, onFocus, required, excludeDates, value, className, id, success, helper, size, readOnly, tooltip, clearable, selectsRange, showMonthYearPicker, input, "data-testid": dataTestId, style, }: DateInputProps<IsRange>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DateInput: <IsRange extends undefined | boolean>({ autoFocus, disabled, error, format, label, labelDescription, locale, maxDate, minDate, startDate, endDate, name, onBlur, onChange, placeholder, onFocus, required, excludeDates, value, className, id, success, helper, size, readOnly, tooltip, clearable, selectsRange, showMonthYearPicker, input, "data-testid": dataTestId, style, }: DateInputProps<IsRange>) => import("react/jsx-runtime").JSX.Element;
 export {};