@mirohq/design-system-calendar 1.0.0 → 1.1.0

package/dist/module.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { createContext, useState, useMemo, useCallback, useContext, useRef, useEffect } from 'react';
-import { useButton, useFocusRing, mergeProps, useDateFormatter, useCalendarCell, useLocale, useCalendarGrid, useCalendar, useRangeCalendar, I18nProvider } from 'react-aria';
+import { useDateFormatter, useCalendarCell, useFocusRing, mergeProps, useLocale, useCalendarGrid, useCalendar, useRangeCalendar, I18nProvider } from 'react-aria';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { Trigger as Trigger$1, Content as Content$1 } from '@radix-ui/react-popover';
 import { useFormFieldContext, FloatingLabel } from '@mirohq/design-system-base-form';
 import { IconCross, IconCalendarBlank, IconChevronLeft, IconChevronRight } from '@mirohq/design-system-icons';
 import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
-import { stringAttrValue } from '@mirohq/design-system-utils';
+import { stringAttrValue, booleanify } from '@mirohq/design-system-utils';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled, theme } from '@mirohq/design-system-stitches';
 import { textFieldStyles, actionButtonStyles } from '@mirohq/design-system-base-text-field';
@@ -15,8 +15,10 @@ import { BaseButton } from '@mirohq/design-system-base-button';
 import { Tooltip } from '@mirohq/design-system-tooltip';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useCalendarState, useRangeCalendarState } from 'react-stately';
-import { isSameMonth, isSameDay, getDayOfWeek, isWeekend, isToday, getLocalTimeZone, getWeeksInMonth, createCalendar } from '@internationalized/date';
+import { isSameMonth, isSameDay, isToday, getLocalTimeZone, getWeeksInMonth, createCalendar } from '@internationalized/date';
 import { Flex } from '@mirohq/design-system-flex';
+import { Heading } from '@mirohq/design-system-typography';
+import { IconButton } from '@mirohq/design-system-icon-button';
 import { Button } from '@mirohq/design-system-button';
 
 const StyledPlaceholder = styled(Primitive.span, {
@@ -26,6 +28,12 @@ const StyledPlaceholder = styled(Primitive.span, {
 const StyledValue$1 = styled(Primitive.span, {
   padding: "0 $50"
 });
+const StyledIconContainer = styled(Primitive.span, {
+  display: "flex",
+  justifyContent: "center",
+  padding: "6px",
+  color: "$text-neutrals-subtle"
+});
 const StyledTrigger = styled(BaseButton, {
   display: "inline-flex",
   gap: "$50",
@@ -35,11 +43,11 @@ const StyledTrigger = styled(BaseButton, {
   padding: "0 $100",
   minWidth: "230px",
   ...textFieldStyles.variants.idle,
-  "& svg": {
-    color: "$text-neutrals-subtle",
-    square: "22px"
-  },
   _hover: textFieldStyles.variants.hovered,
+  '&:disabled, &[aria-disabled="true"]': {
+    ...textFieldStyles.variants.disabled,
+    color: "$text-neutrals-disabled"
+  },
   variants: {
     v1: {
       true: {
@@ -74,7 +82,10 @@ const StyledClearAction = styled(BaseButton, {
   right: "calc($100 + 1px)",
   // to compensate border width
   margin: "auto",
-  ...actionButtonStyles
+  ...actionButtonStyles,
+  '&:disabled, &[aria-disabled="true"]': {
+    color: "$icon-neutrals-disabled"
+  }
 });
 
 const ClearAction = React.forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -178,7 +189,7 @@ const Trigger = React.forwardRef(
     ...restProps
   }, forwardRef) => {
     const [v1] = useNewDesignLanguage();
-    const { value, setValue } = useCalendarContext();
+    const { value, setValue, disabled, ariaDisabled } = useCalendarContext();
     const { formElementId, ariaDescribedBy: formFieldContextDescribedBy } = useFormFieldContext();
     if (asChild) {
       return /* @__PURE__ */ jsx(Trigger$1, { ref: forwardRef, asChild: true, children: /* @__PURE__ */ jsx(StyledCustomTrigger, { asChild: true, ...restProps, children }) });
@@ -201,47 +212,40 @@ const Trigger = React.forwardRef(
           ),
           v1,
           withClearButton: clearButtonVisible,
+          disabled,
+          "aria-disabled": ariaDisabled,
           ...restProps,
           children: [
             value != null ? /* @__PURE__ */ jsx(StyledValue$1, { children }) : /* @__PURE__ */ jsx(StyledPlaceholder, { children: placeholder }),
-            !clearButtonVisible && /* @__PURE__ */ jsx(IconCalendarBlank, { weight: "thin" })
+            !clearButtonVisible && /* @__PURE__ */ jsx(StyledIconContainer, { children: /* @__PURE__ */ jsx(IconCalendarBlank, { weight: "thin", size: "small" }) })
           ]
         }
       ) }),
-      clearButtonVisible && /* @__PURE__ */ jsx(ClearAction, { label: clearLabel, onPress: onClearHandler })
+      clearButtonVisible && /* @__PURE__ */ jsx(
+        ClearAction,
+        {
+          label: clearLabel,
+          onPress: onClearHandler,
+          disabled: disabled != null ? disabled : booleanify(ariaDisabled)
+        }
+      )
     ] });
   }
 );
 
 const StyledContent = styled(Content$1, {
   zIndex: "$calendar",
-  display: "inline-block",
-  background: "$background-neutrals"
-});
-const StyledBodyContent = styled(Flex, {
-  margin: "0 auto",
-  boxShadow: "$100",
   background: "$background-neutrals",
-  borderRadius: "$100"
+  borderRadius: "$100",
+  boxShadow: "$100"
 });
-const StyledGridContent = styled(Flex, {
-  paddingBottom: "$200",
-  "& [data-left-calendar]": {
-    paddingLeft: "$200",
-    paddingRight: "$100"
-  },
-  "& [data-right-calendar]": {
-    paddingLeft: "$100",
-    paddingRight: "$200"
-  }
-});
-const StyledBodyContentLeft = styled(Primitive.div, {
-  paddingLeft: "$200",
-  paddingRight: "$100"
+const StyledCalendarBody = styled(Flex, {
+  padding: "$200"
 });
+const StyledGridContent = styled(Flex, {});
+const StyledBodyContentLeft = styled(Primitive.div, {});
 const StyledBodyContentRight = styled(Primitive.div, {
-  paddingLeft: "$100",
-  paddingRight: "$200"
+  paddingLeft: "$200"
 });
 const StyledClearContent = styled(Primitive.div, {
   display: "flex",
@@ -250,40 +254,33 @@ const StyledClearContent = styled(Primitive.div, {
   borderTop: "1px solid $border-neutrals"
 });
 
-const StyledHeaderTitle = styled(Flex, {
-  justifyContent: "center",
-  flex: "3",
-  color: "$text-neutrals"
+const StyledHeaderTitle = styled(Heading, {
+  margin: 0,
+  flex: "2",
+  textAlign: "center"
 });
-const StyledHeader = styled(Flex, {
-  padding: "0 $200",
-  color: "$text-neutrals"
+const StyledHeaderPlaceholder = styled("div", {
+  height: "$8",
+  // to compensate icon buttons' width and space between 2 calendars
+  width: "calc($8 * 2 + $space$200)"
 });
-
-const StyledHeaderButton = styled(Primitive.button, {
-  padding: "0",
-  backgroundColor: "$transparent",
-  border: "none",
-  cursor: "pointer",
+const StyledHeader = styled(Flex, {
   color: "$text-neutrals",
-  "&[disabled]": {
-    cursor: "not-allowed"
-  }
+  height: "$8",
+  alignItems: "center",
+  justifyContent: "space-between"
 });
 
-const HeaderButton = React.forwardRef((props, forwardRef) => {
-  const { buttonProps } = useButton(props, forwardRef);
-  const { focusProps } = useFocusRing();
-  const { children } = props;
-  return /* @__PURE__ */ jsx(
-    StyledHeaderButton,
-    {
-      ...mergeProps(buttonProps, focusProps),
-      ref: forwardRef,
-      children
-    }
-  );
-});
+const HeaderButton = React.forwardRef(({ isDisabled, children, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    ...restProps,
+    size: "medium",
+    disabled: isDisabled,
+    ref: forwardRef,
+    children
+  }
+));
 
 const Header = ({
   state,
@@ -298,77 +295,93 @@ const Header = ({
   });
   return /* @__PURE__ */ jsxs(StyledHeader, { children: [
     /* @__PURE__ */ jsx(HeaderButton, { ...prevButtonProps, children: /* @__PURE__ */ jsx(IconChevronLeft, {}) }),
-    /* @__PURE__ */ jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsx("h2", { children: monthDateFormatter.format(
+    /* @__PURE__ */ jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: monthDateFormatter.format(
       state.visibleRange.start.toDate(state.timeZone)
-    ) }) }),
-    visibleMonths === 2 && /* @__PURE__ */ jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsx("h2", { children: monthDateFormatter.format(
-      state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
-    ) }) }),
+    ) }),
+    visibleMonths === 2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(StyledHeaderPlaceholder, {}),
+      /* @__PURE__ */ jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: monthDateFormatter.format(
+        state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
+      ) })
+    ] }),
     /* @__PURE__ */ jsx(HeaderButton, { ...nextButtonProps, children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
   ] });
 };
 
+const StyledCell = styled(Primitive.td, {
+  square: "$10",
+  marginTop: "$50",
+  position: "relative"
+});
 const StyledCellContent = styled(Primitive.div, {
-  square: "28px",
+  cursor: "pointer",
+  square: "$10",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   borderRadius: "$50",
   color: "$text-neutrals",
-  "&[data-today]": {
-    color: "$text-primary"
-  },
-  "&[data-weekend]": {
-    color: "$text-neutrals-subtle"
-  },
-  "&[data-selected-middle]": {
-    color: "$text-neutrals"
-  },
-  "&[data-selection]": {
-    borderRadius: "$50",
-    background: "$background-primary-prominent-selected",
-    color: "$text-primary-inverted",
-    fontWeight: "600"
-  },
-  "&[data-disabled]": {
+  ...focus.css({
+    top: "0",
+    left: "0",
+    position: "absolute",
+    zIndex: "1",
+    boxShadow: "$focus-v1",
+    outline: "1px solid transparent"
+  }),
+  '&[aria-disabled="true"]': {
     textDecoration: "line-through",
-    color: "$text-neutrals-disabled"
-  }
-});
-const StyledCell = styled(Primitive.div, {
-  square: "36px",
-  cursor: "pointer",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  "&:hover": {
-    background: "$background-primary-subtle-hover",
-    ["& ".concat(StyledCellContent)]: {
-      background: "$background-primary-prominent-hover",
-      color: "$text-primary-inverted"
-    }
+    color: "$text-neutrals-disabled",
+    cursor: "default"
   },
-  "&[data-selected]": {
-    background: "$background-primary-subtle-hover"
-  },
-  "&[data-selection-start]": {
-    borderBottomLeftRadius: "$lg",
-    borderTopLeftRadius: "$lg"
-  },
-  "&[data-selection-end]": {
-    borderBottomRightRadius: "$lg",
-    borderTopRightRadius: "$lg"
-  },
-  "&[data-hidden]": {
-    display: "none"
+  '&:not([aria-disabled="true"])': {
+    _hover: {
+      backgroundColor: "$background-neutrals-subtle-hover",
+      color: "$text-neutrals"
+    }
   },
-  "&[data-disabled]": {
-    cursor: "not-allowed",
-    "&:hover": {
-      backgroundColor: "$transparent",
-      ["& ".concat(StyledCellContent)]: {
-        backgroundColor: "$transparent",
-        color: "$text-neutrals-disabled"
+  variants: {
+    today: {
+      true: {
+        backgroundColor: "$background-neutrals-subtle-hover",
+        color: "$text-neutrals"
+      }
+    },
+    selected: {
+      true: {
+        backgroundColor: "$background-primary-prominent-selected",
+        color: "$text-neutrals-inverted",
+        '&:not([aria-disabled="true"])': {
+          _hover: {
+            backgroundColor: "$background-primary-prominent-hover",
+            color: "$text-neutrals-inverted"
+          }
+        }
+      }
+    },
+    range: {
+      middle: {
+        backgroundColor: "$background-primary-subtle-selected",
+        color: "$text-neutrals",
+        borderRadius: 0,
+        '&:not([aria-disabled="true"])': {
+          _hover: {
+            backgroundColor: "$background-primary-subtle-hover"
+          }
+        }
+      },
+      start: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      end: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      }
+    },
+    hidden: {
+      true: {
+        display: "none"
       }
     }
   }
@@ -377,37 +390,27 @@ const StyledCell = styled(Primitive.div, {
 const Cell = (props) => {
   const { state, date, currentMonth } = props;
   const ref = useRef(null);
-  const { cellProps, buttonProps, isSelected, isDisabled, formattedDate } = useCalendarCell({ date }, state, ref);
+  const { cellProps, buttonProps, isSelected, formattedDate } = useCalendarCell(
+    { date },
+    state,
+    ref
+  );
   const isOutsideMonth = !isSameMonth(currentMonth, date);
   const isSelectionStart = state.highlightedRange !== void 0 && state.highlightedRange !== null ? isSameDay(date, state.highlightedRange.start) : isSelected;
   const isSelectionEnd = state.highlightedRange !== void 0 && state.highlightedRange !== null ? isSameDay(date, state.highlightedRange.end) : isSelected;
-  const { locale } = useLocale();
-  const dayOfWeek = getDayOfWeek(date, locale);
-  const isWeekendDay = isWeekend(date, locale);
-  const isRoundedLeft = isSelected && (isSelectionStart || dayOfWeek === 0 || date.day === 1);
-  const isRoundedRight = isSelected && (isSelectionEnd || dayOfWeek === 6 || date.day === date.calendar.getDaysInMonth(date));
   const { focusProps } = useFocusRing();
-  return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
-    StyledCell,
+  const isRange = isSelected && (!isSelectionStart || !isSelectionEnd);
+  const rangeVariant = isRange ? isSelectionStart ? "start" : isSelectionEnd ? "end" : "middle" : void 0;
+  return /* @__PURE__ */ jsx(StyledCell, { ...cellProps, children: /* @__PURE__ */ jsx(
+    StyledCellContent,
     {
       ...mergeProps(buttonProps, focusProps),
       ref,
-      "data-selected": isSelected ? "" : void 0,
-      "data-selection-start": isRoundedLeft ? "" : void 0,
-      "data-selection-end": isRoundedRight ? "" : void 0,
-      "data-disabled": isDisabled ? "" : void 0,
-      "data-hidden": isOutsideMonth ? "" : void 0,
-      children: /* @__PURE__ */ jsx(
-        StyledCellContent,
-        {
-          "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
-          "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
-          "data-disabled": isDisabled ? "" : void 0,
-          "data-today": isToday(date, getLocalTimeZone()) ? "" : void 0,
-          "data-weekend": isWeekendDay ? "" : void 0,
-          children: formattedDate
-        }
-      )
+      selected: isSelected && (isSelectionStart || isSelectionEnd),
+      today: isToday(date, getLocalTimeZone()),
+      range: rangeVariant,
+      hidden: isOutsideMonth,
+      children: formattedDate
     }
   ) });
 };
@@ -417,8 +420,10 @@ const StyledGrid = styled(Primitive.table, {
   borderSpacing: " 0 $50"
 });
 const StyledDays = styled(Primitive.th, {
-  square: "36px",
-  color: "$text-neutrals"
+  height: "$10",
+  color: "$text-neutrals-subtle",
+  fontWeight: "$regular",
+  paddingTop: "$50"
 });
 
 const Grid = React.forwardRef(
@@ -450,27 +455,34 @@ const Grid = React.forwardRef(
 
 const CONTENT_OFFSET = parseInt(theme.space[50]);
 const SharedContent = React.forwardRef(
-  ({ calendarProps, prevButtonProps, nextButtonProps, children, state }, forwardRef) => {
+  ({ calendarProps, prevButtonProps, nextButtonProps, state }, forwardRef) => {
     const { visibleDuration } = useCalendarContext();
-    return /* @__PURE__ */ jsx(StyledBodyContent, { ...calendarProps, ref: forwardRef, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-      /* @__PURE__ */ jsx(
-        Header,
-        {
-          state,
-          prevButtonProps,
-          nextButtonProps,
-          visibleMonths: visibleDuration.months
-        }
-      ),
-      /* @__PURE__ */ jsxs(StyledGridContent, { children: [
-        /* @__PURE__ */ jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsx(Grid, { state }) }),
-        visibleDuration.months === 2 && /* @__PURE__ */ jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsx(Grid, { state, offset: { months: 1 } }) })
-      ] }),
-      children != null && /* @__PURE__ */ jsx(StyledClearContent, { children })
-    ] }) });
+    return /* @__PURE__ */ jsxs(
+      StyledCalendarBody,
+      {
+        direction: "column",
+        ...calendarProps,
+        ref: forwardRef,
+        children: [
+          /* @__PURE__ */ jsx(
+            Header,
+            {
+              state,
+              prevButtonProps,
+              nextButtonProps,
+              visibleMonths: visibleDuration.months
+            }
+          ),
+          /* @__PURE__ */ jsxs(StyledGridContent, { children: [
+            /* @__PURE__ */ jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsx(Grid, { state }) }),
+            visibleDuration.months === 2 && /* @__PURE__ */ jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsx(Grid, { state, offset: { months: 1 } }) })
+          ] })
+        ]
+      }
+    );
   }
 );
-const DatePickerContent = ({ children }) => {
+const DatePickerContent = () => {
   const { locale } = useLocale();
   const {
     calendarValue,
@@ -499,12 +511,11 @@ const DatePickerContent = ({ children }) => {
       calendarProps,
       prevButtonProps,
       nextButtonProps,
-      state,
-      children
+      state
     }
   );
 };
-const RangePickerContent = ({ children }) => {
+const RangePickerContent = () => {
   const { locale } = useLocale();
   const {
     calendarValue,
@@ -536,8 +547,7 @@ const RangePickerContent = ({ children }) => {
       calendarProps,
       prevButtonProps,
       nextButtonProps,
-      state,
-      children
+      state
     }
   );
 };
@@ -571,7 +581,10 @@ const Content = React.forwardRef(
         avoidCollisions,
         sticky,
         hideWhenDetached,
-        children: picker === "single" ? /* @__PURE__ */ jsx(DatePickerContent, { children }) : /* @__PURE__ */ jsx(RangePickerContent, { children })
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+          picker === "single" ? /* @__PURE__ */ jsx(DatePickerContent, {}) : /* @__PURE__ */ jsx(RangePickerContent, {}),
+          children != null && /* @__PURE__ */ jsx(StyledClearContent, { children })
+        ] })
       }
     );
   }
@@ -584,11 +597,10 @@ const DEFAULT_FORMAT = {
   month: "short",
   year: "numeric"
 };
-const DEFAULT_TIMEZONE = "UTC";
-function formatDate(date, formatter) {
-  return formatter.format(date.toDate(DEFAULT_TIMEZONE));
+function formatDate(date, formatter, timeZone) {
+  return formatter.format(date.toDate(timeZone));
 }
-function formatValue(value, formatter) {
+function formatValue(value, formatter, timeZone) {
   if (value == null) {
     return void 0;
   }
@@ -596,21 +608,23 @@ function formatValue(value, formatter) {
     if (value.start == null || value.end == null) {
       return void 0;
     }
-    return "".concat(formatDate(value.start, formatter), " - ").concat(formatDate(
+    return "".concat(formatDate(value.start, formatter, timeZone), " - ").concat(formatDate(
       value.end,
-      formatter
+      formatter,
+      timeZone
     ));
   }
-  return formatDate(value, formatter);
+  return formatDate(value, formatter, timeZone);
 }
 const Value = React.forwardRef(({ format = DEFAULT_FORMAT, ...restProps }, forwardRef) => {
   const { value } = useCalendarContext();
+  const timeZone = useMemo(getLocalTimeZone, [format]);
   const formatWithTimeZone = useMemo(
-    () => ({ ...format, DEFAULT_TIMEZONE }),
-    [format]
+    () => ({ ...format, timeZone }),
+    [format, timeZone]
   );
   const dateFormatter = useDateFormatter(formatWithTimeZone);
-  const valueToDisplay = formatValue(value, dateFormatter);
+  const valueToDisplay = formatValue(value, dateFormatter, timeZone);
   return /* @__PURE__ */ jsx(StyledValue, { ref: forwardRef, ...restProps, children: valueToDisplay });
 });
 
@@ -687,6 +701,8 @@ const Calendar = React.forwardRef(
     visibleMonths,
     minDate,
     maxDate,
+    disabled,
+    "aria-disabled": ariaDisabled,
     children,
     ...props
   }, forwardRef) => {
@@ -701,7 +717,9 @@ const Calendar = React.forwardRef(
       defaultOpen,
       open,
       onClose,
-      onOpen
+      onOpen,
+      disabled,
+      ariaDisabled
     };
     return /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(CalendarProvider, { ...providerProps, children: /* @__PURE__ */ jsx(Root, { ...props, ref: forwardRef, children }) }) });
   }