@clickhouse/click-ui 0.2.0-test.0 → 0.2.1-rc.8

package/dist/esm/components/DatePicker/Common.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { styled } from 'styled-components';
 import { useId, useState, useRef, useEffect, useCallback } from 'react';
 import { useCalendar } from '@h6s/calendar';
-import { selectedDateFormatter, selectedDateTimeFormatterWithSeconds, selectedDateTimeFormatter, headerDateFormatter, weekdayFormatter } from './utils.js';
+import { shiftToTimezone, formatSelectedDate, formatSelectedDateTimeWithSeconds, formatSelectedDateTime, formatDateHeader, formatWeekday } from './utils.js';
 import { DAYS, YEARS, MONTHS, DAYS_IN_WEEK, getMonthNames } from '../../utils/date.js';
 import { InputStartContent, InputElement, InputWrapper } from '../InputWrapper/index.js';
 import { Icon as SvgImage } from '../Icon/index.js';
@@ -12,18 +12,16 @@ import { Dropdown } from '../Dropdown/index.js';
 import { IconButton } from '../IconButton/index.js';
 
 const explicitWidth = "250px";
-const TXT_ON_MONTH_SELECT = "Month";
-const TXT_ON_YEAR_SELECT = "Year";
-const VIEW_GRID_MONTHS = {
+const viewGridMonths = {
   columns: 4,
   rows: 3
 };
-const VIEW_GRID_YEARS = {
+const viewGridYears = {
   columns: 3,
   rows: 3
 };
-const VIEW_TOTAL_YEARS = VIEW_GRID_YEARS.columns * VIEW_GRID_YEARS.rows;
-const VIEW_NAVIGATION_OFFSET_YEARS = Math.floor(VIEW_TOTAL_YEARS / 2);
+const totalYears = viewGridYears.columns * viewGridYears.rows;
+const yearsOffset = Math.floor(totalYears / 2);
 const HighlightedInputWrapper = styled(InputWrapper).withConfig({
   componentId: "sc-1m6g9rm-0"
 })(["", "}"], ({
@@ -36,16 +34,16 @@ const HighlightedInputWrapper = styled(InputWrapper).withConfig({
     ${$width && `min-width: ${explicitWidth};`}
     `;
 });
-const formatPartialDate = (selectedDate, partialYear, partialMonth) => {
+const formatPartialDate = (timezone, selectedDate, partialYear, partialMonth) => {
   if (typeof partialYear === "number" && typeof partialMonth === "number") {
-    const date = new Date(partialYear, partialMonth, 1);
-    return headerDateFormatter.format(date);
+    const date = timezone === "UTC" ? new Date(Date.UTC(partialYear, partialMonth, 1)) : new Date(partialYear, partialMonth, 1);
+    return formatDateHeader(timezone, date);
   }
   if (typeof partialYear === "number") {
     return String(partialYear);
   }
   if (selectedDate instanceof Date) {
-    return selectedDateFormatter.format(selectedDate);
+    return formatSelectedDate(timezone, selectedDate);
   }
   return "";
 };
@@ -56,10 +54,11 @@ const DatePickerInput = ({
   partialMonth,
   partialYear,
   placeholder,
-  selectedDate
+  selectedDate,
+  timezone = "system"
 }) => {
   const defaultId = useId();
-  const formattedSelectedDate = formatPartialDate(selectedDate, partialYear, partialMonth);
+  const formattedSelectedDate = formatPartialDate(timezone, selectedDate, partialYear, partialMonth);
   return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
     /* @__PURE__ */ jsx(InputStartContent, { children: /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }) }),
     /* @__PURE__ */ jsx(InputElement, { $hasStartContent: true, "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
@@ -71,21 +70,22 @@ const DateRangePickerInput = ({
   id,
   placeholder,
   selectedEndDate,
-  selectedStartDate
+  selectedStartDate,
+  timezone = "system"
 }) => {
   const defaultId = useId();
   let formattedValue = /* @__PURE__ */ jsx(Text, { color: "muted", component: "span", children: placeholder ?? "" });
   if (selectedStartDate) {
     if (selectedEndDate) {
       formattedValue = /* @__PURE__ */ jsxs("span", { children: [
-        selectedDateFormatter.format(selectedStartDate),
+        formatSelectedDate(timezone, selectedStartDate),
         " –",
         " ",
-        selectedDateFormatter.format(selectedEndDate)
+        formatSelectedDate(timezone, selectedEndDate)
       ] });
     } else {
       formattedValue = /* @__PURE__ */ jsxs("span", { children: [
-        selectedDateFormatter.format(selectedStartDate),
+        formatSelectedDate(timezone, selectedStartDate),
         " ",
         /* @__PURE__ */ jsx(Text, { color: "muted", component: "span", children: "– end date" })
       ] });
@@ -103,23 +103,28 @@ const DateTimeRangePickerInput = ({
   placeholder,
   selectedEndDate,
   selectedStartDate,
-  shouldShowSeconds
+  shouldShowSeconds,
+  timezone = "system"
 }) => {
   const defaultId = useId();
-  const dateTimeFormatter = shouldShowSeconds ? selectedDateTimeFormatterWithSeconds : selectedDateTimeFormatter;
+  const formatDateTime = useCallback((date) => {
+    if (shouldShowSeconds) {
+      return formatSelectedDateTimeWithSeconds(timezone, date);
+    }
+    return formatSelectedDateTime(timezone, date);
+  }, [shouldShowSeconds, timezone]);
   let formattedValue = /* @__PURE__ */ jsx(Text, { color: "muted", component: "span", children: placeholder ?? "" });
   if (selectedStartDate) {
     if (selectedEndDate) {
       formattedValue = /* @__PURE__ */ jsxs("span", { children: [
-        dateTimeFormatter.format(selectedStartDate).replace("AM", "am").replace("PM", "pm"),
-        " ",
-        "–",
+        formatDateTime(selectedStartDate).replace("AM", "am").replace("PM", "pm"),
+        " –",
         " ",
-        dateTimeFormatter.format(selectedEndDate).replace("AM", "am").replace("PM", "pm")
+        formatDateTime(selectedEndDate).replace("AM", "am").replace("PM", "pm")
       ] });
     } else {
       formattedValue = /* @__PURE__ */ jsxs("span", { children: [
-        dateTimeFormatter.format(selectedStartDate).replace("AM", "am").replace("PM", "pm"),
+        formatDateTime(selectedStartDate).replace("AM", "am").replace("PM", "pm"),
         " ",
         /* @__PURE__ */ jsx(Text, { color: "muted", component: "span", children: "– end date" })
       ] });
@@ -130,7 +135,7 @@ const DateTimeRangePickerInput = ({
         "start date –",
         " "
       ] }),
-      dateTimeFormatter.format(selectedEndDate).replace("AM", "am").replace("PM", "pm")
+      formatDateTime(selectedEndDate).replace("AM", "am").replace("PM", "pm")
     ] });
   }
   return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, $width: "max-content", children: [
@@ -145,22 +150,20 @@ const DatePickerContainer = styled(Container).withConfig({
 }) => theme.click.datePicker.dateOption.color.background.default);
 const ClickableTitle = styled.button.withConfig({
   componentId: "sc-1m6g9rm-2"
-})(["", " background:transparent;cursor:pointer;user-select:none;padding:0.25rem 0.5rem;border-radius:", ";outline:none;&:hover{background:", ";}&:focus,&:focus-visible{border-color:", ";}"], ({
+})(["background:transparent;border:1px solid transparent;cursor:pointer;outline:none;padding:0.25rem 0.5rem;user-select:none;", ";&:hover{background:", ";}&:focus,&:focus-visible{border-color:", ";}"], ({
   theme
 }) => `
+    border-radius: ${theme.click.datePicker.dateOption.radii.default};
     color: ${theme.click.datePicker.color.title.default};
     font: ${theme.click.datePicker.typography.title.default};
-    border: 1px solid transparent;
   `, ({
   theme
-}) => theme.click.datePicker.dateOption.radii.default, ({
-  theme
 }) => theme.click.datePicker.dateOption.color.background.hover, ({
   theme
 }) => theme.click.datePicker.dateOption.color.stroke.hover);
 const UnselectableTitle = styled.h2.withConfig({
   componentId: "sc-1m6g9rm-3"
-})(["", " margin:0;padding:0;user-select:none;"], ({
+})(["margin:0;padding:0;user-select:none;", ""], ({
   theme
 }) => `
     color: ${theme.click.datePicker.color.title.default};
@@ -175,20 +178,20 @@ const GridContainer = styled.div.withConfig({
   `);
 const MonthsGrid = styled(GridContainer).withConfig({
   componentId: "sc-1m6g9rm-5"
-})(["grid-template-columns:repeat(", ",1fr);grid-template-rows:repeat(", ",1fr);"], VIEW_GRID_MONTHS.columns, VIEW_GRID_MONTHS.rows);
+})(["grid-template-columns:repeat(", ",1fr);grid-template-rows:repeat(", ",1fr);"], viewGridMonths.columns, viewGridMonths.rows);
 const YearsGrid = styled(GridContainer).withConfig({
   componentId: "sc-1m6g9rm-6"
-})(["grid-template-columns:repeat(", ",1fr);grid-template-rows:repeat(", ",1fr);"], VIEW_GRID_YEARS.columns, VIEW_GRID_YEARS.rows);
+})(["grid-template-columns:repeat(", ",1fr);grid-template-rows:repeat(", ",1fr);"], viewGridYears.columns, viewGridYears.rows);
 const GridCell = styled.button.withConfig({
   componentId: "sc-1m6g9rm-7"
-})(["", " ", " ", " display:flex;align-items:center;justify-content:center;padding:8px 4px;cursor:pointer;text-align:center;min-height:26px;", ""], ({
+})(["align-items:center;cursor:pointer;display:flex;justify-content:center;min-height:26px;padding:8px 4px;text-align:center;", " ", " ", " ", ""], ({
   theme
 }) => `
+    background: ${theme.click.datePicker.dateOption.color.background.default};
     border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.stroke.default};
     border-radius: ${theme.click.datePicker.dateOption.radii.default};
-    font: ${theme.click.datePicker.dateOption.typography.label.default};
     color: ${theme.click.datePicker.dateOption.color.label.default};
-    background: ${theme.click.datePicker.dateOption.color.background.default};
+    font: ${theme.click.datePicker.dateOption.typography.label.default};
   `, ({
   $isActive,
   theme
@@ -307,8 +310,13 @@ const CalendarRenderer = ({
   onYearSelect,
   onMonthSelect,
   selectedDate,
+  timezone = "system",
   ...props
 }) => {
+  const shiftedCalendarOptions = calendarOptions.defaultDate instanceof Date ? {
+    ...calendarOptions,
+    defaultDate: shiftToTimezone(calendarOptions.defaultDate, timezone)
+  } : calendarOptions;
   const {
     body,
     headers,
@@ -317,13 +325,13 @@ const CalendarRenderer = ({
     year
   } = useCalendar({
     defaultWeekStart: 1,
-    ...calendarOptions
+    ...shiftedCalendarOptions
   });
   const [view, setView] = useState(DAYS);
   const [selectedYear, setSelectedYear] = useState(null);
   const [yearOffset, setYearOffset] = useState(0);
   const [focusedMonthIndex, setFocusedMonthIndex] = useState(month);
-  const [focusedYearIndex, setFocusedYearIndex] = useState(VIEW_NAVIGATION_OFFSET_YEARS);
+  const [focusedYearIndex, setFocusedYearIndex] = useState(yearsOffset);
   const monthGridRef = useRef([]);
   const yearGridRef = useRef([]);
   const headerNavRefs = useRef([null, null, null]);
@@ -336,14 +344,14 @@ const CalendarRenderer = ({
   }, [view, focusedYearIndex, focusedMonthIndex]);
   const onNextClick = useCallback(() => {
     if (view === YEARS) {
-      setYearOffset((prev) => prev + VIEW_TOTAL_YEARS);
+      setYearOffset((prev) => prev + totalYears);
     } else {
       navigation.toNext();
     }
   }, [navigation, view]);
   const onPreviousClick = useCallback(() => {
     if (view === YEARS) {
-      setYearOffset((prev) => prev - VIEW_TOTAL_YEARS);
+      setYearOffset((prev) => prev - totalYears);
       return;
     }
     navigation.toPrev();
@@ -389,30 +397,30 @@ const CalendarRenderer = ({
     setSelectedYear(null);
     setYearOffset(0);
   }, [selectedYear, year, navigation, onMonthSelect]);
-  const onMonthGridKeyDown = useCallback((e, index) => {
-    const columns = VIEW_GRID_MONTHS.columns;
+  const onMonthGridKeyDown = useCallback((event, index) => {
+    const columns = viewGridMonths.columns;
     const totalItems = 12;
     let newIndex = index;
-    switch (e.key) {
+    switch (event.key) {
       case "ArrowRight":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index + 1) % totalItems;
         break;
       case "ArrowLeft":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index - 1 + totalItems) % totalItems;
         break;
       case "ArrowDown":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index + columns) % totalItems;
         break;
       case "ArrowUp":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index - columns + totalItems) % totalItems;
         break;
       case "Enter":
       case " ":
-        e.preventDefault();
+        event.preventDefault();
         onMonthSelection(index);
         return;
       default:
@@ -421,30 +429,30 @@ const CalendarRenderer = ({
     setFocusedMonthIndex(newIndex);
     monthGridRef.current[newIndex]?.focus();
   }, [onMonthSelection]);
-  const onYearGridKeyDown = useCallback((e, index, yearValue) => {
-    const columns = VIEW_GRID_YEARS.columns;
-    const totalItems = VIEW_TOTAL_YEARS;
+  const onYearGridKeyDown = useCallback((event, index, yearValue) => {
+    const columns = viewGridYears.columns;
+    const totalItems = totalYears;
     let newIndex = index;
-    switch (e.key) {
+    switch (event.key) {
       case "ArrowRight":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index + 1) % totalItems;
         break;
       case "ArrowLeft":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index - 1 + totalItems) % totalItems;
         break;
       case "ArrowDown":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index + columns) % totalItems;
         break;
       case "ArrowUp":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index - columns + totalItems) % totalItems;
         break;
       case "Enter":
       case " ":
-        e.preventDefault();
+        event.preventDefault();
         onYearSelection(yearValue);
         return;
       default:
@@ -458,34 +466,53 @@ const CalendarRenderer = ({
   headerDate.setFullYear(year);
   const getHeaderTitle = (view2) => {
     if (view2 === MONTHS) {
-      return TXT_ON_MONTH_SELECT;
+      return "Month";
     }
     if (view2 === YEARS) {
-      return TXT_ON_YEAR_SELECT;
+      return "Year";
     }
-    return headerDateFormatter.format(headerDate);
+    return formatDateHeader("system", headerDate);
   };
   const renderMonthsGrid = () => {
-    const today = /* @__PURE__ */ new Date();
-    const todayMonth = today.getMonth();
-    const todayYear = today.getFullYear();
-    const selectedMonth = selectedDate?.getMonth();
-    const selectedYear2 = selectedDate?.getFullYear();
-    return /* @__PURE__ */ jsx(MonthsGrid, { "data-testid": "months-grid", role: "grid", "aria-label": "Select month", children: monthAbbreviations.map((abbr, index) => /* @__PURE__ */ jsx(GridCell, { type: "button", ref: (el) => {
-      monthGridRef.current[index] = el;
-    }, $isActive: selectedDate && index === selectedMonth && year === selectedYear2, $isPresent: index === todayMonth && year === todayYear, onClick: () => onMonthSelection(index), onKeyDown: (e) => onMonthGridKeyDown(e, index), "data-testid": `month-cell-${index}`, tabIndex: index === focusedMonthIndex ? 0 : -1, "aria-label": abbr, children: abbr }, abbr)) });
+    const today = shiftToTimezone(/* @__PURE__ */ new Date(), timezone);
+    const thisMonth = today.getMonth();
+    const thisYear = today.getFullYear();
+    const shiftedSelected = selectedDate ? shiftToTimezone(selectedDate, timezone) : void 0;
+    const selectedMonth = shiftedSelected?.getMonth();
+    const selectedYear2 = shiftedSelected?.getFullYear();
+    return /* @__PURE__ */ jsx(MonthsGrid, { "data-testid": "months-grid", role: "grid", "aria-label": "Select month", children: monthAbbreviations.map((month2, index) => {
+      const handleKeyDown = (event) => {
+        onMonthGridKeyDown(event, index);
+      };
+      const handleClick = () => {
+        onMonthSelection(index);
+      };
+      const ref = (element) => {
+        monthGridRef.current[index] = element;
+      };
+      return /* @__PURE__ */ jsx(GridCell, { type: "button", ref, $isActive: selectedDate && index === selectedMonth && year === selectedYear2, $isPresent: index === thisMonth && year === thisYear, onClick: handleClick, onKeyDown: handleKeyDown, "data-testid": `month-cell-${index}`, tabIndex: index === focusedMonthIndex ? 0 : -1, "aria-label": month2, children: month2 }, month2);
+    }) });
   };
   const renderYearsGrid = () => {
     const years = [];
     const baseYear = year + yearOffset;
-    const todayYear = (/* @__PURE__ */ new Date()).getFullYear();
-    const selectedYear2 = selectedDate?.getFullYear();
-    for (let i = -VIEW_NAVIGATION_OFFSET_YEARS; i <= VIEW_NAVIGATION_OFFSET_YEARS; i++) {
+    const thisYear = shiftToTimezone(/* @__PURE__ */ new Date(), timezone).getFullYear();
+    const selectedYear2 = selectedDate ? shiftToTimezone(selectedDate, timezone).getFullYear() : void 0;
+    for (let i = -yearsOffset; i <= yearsOffset; i++) {
       years.push(baseYear + i);
     }
-    return /* @__PURE__ */ jsx(YearsGrid, { "data-testid": "years-grid", role: "grid", "aria-label": "Select year", children: years.map((currYear, index) => /* @__PURE__ */ jsx(GridCell, { type: "button", ref: (el) => {
-      yearGridRef.current[index] = el;
-    }, $isActive: selectedDate && currYear === selectedYear2, $isPresent: currYear === todayYear, onClick: () => onYearSelection(currYear), onKeyDown: (e) => onYearGridKeyDown(e, index, currYear), "data-testid": `year-cell-${currYear}`, tabIndex: index === focusedYearIndex ? 0 : -1, "aria-label": String(currYear), children: currYear }, currYear)) });
+    return /* @__PURE__ */ jsx(YearsGrid, { "data-testid": "years-grid", role: "grid", "aria-label": "Select year", children: years.map((currentYear, index) => {
+      const ref = (element) => {
+        yearGridRef.current[index] = element;
+      };
+      const handleClick = () => {
+        onYearSelection(currentYear);
+      };
+      const handleKeyDown = (event) => {
+        onYearGridKeyDown(event, index, currentYear);
+      };
+      return /* @__PURE__ */ jsx(GridCell, { type: "button", ref, $isActive: selectedDate && currentYear === selectedYear2, $isPresent: currentYear === thisYear, onClick: handleClick, onKeyDown: handleKeyDown, "data-testid": `year-cell-${currentYear}`, tabIndex: index === focusedYearIndex ? 0 : -1, "aria-label": String(currentYear), children: currentYear }, currentYear);
+    }) });
   };
   const renderTableContent = () => {
     if (view === MONTHS) {
@@ -499,7 +526,7 @@ const CalendarRenderer = ({
         key,
         value: date
       }) => {
-        return /* @__PURE__ */ jsx(DateTableHeader, { children: weekdayFormatter.format(date) }, key);
+        return /* @__PURE__ */ jsx(DateTableHeader, { children: formatWeekday("system", date) }, key);
       }) }) }),
       /* @__PURE__ */ jsx("tbody", { children: children(body) })
     ] });