@mirohq/design-system-calendar 1.0.0 → 1.1.1

package/dist/main.js

@@ -20,6 +20,8 @@ var reactUseControllableState = require('@radix-ui/react-use-controllable-state'
 var reactStately = require('react-stately');
 var date = require('@internationalized/date');
 var designSystemFlex = require('@mirohq/design-system-flex');
+var designSystemTypography = require('@mirohq/design-system-typography');
+var designSystemIconButton = require('@mirohq/design-system-icon-button');
 var designSystemButton = require('@mirohq/design-system-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -52,6 +54,12 @@ const StyledPlaceholder = designSystemStitches.styled(designSystemPrimitive.Prim
 const StyledValue$1 = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
   padding: "0 $50"
 });
+const StyledIconContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  display: "flex",
+  justifyContent: "center",
+  padding: "6px",
+  color: "$text-neutrals-subtle"
+});
 const StyledTrigger = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
   display: "inline-flex",
   gap: "$50",
@@ -61,11 +69,11 @@ const StyledTrigger = designSystemStitches.styled(designSystemBaseButton.BaseBut
   padding: "0 $100",
   minWidth: "230px",
   ...designSystemBaseTextField.textFieldStyles.variants.idle,
-  "& svg": {
-    color: "$text-neutrals-subtle",
-    square: "22px"
-  },
   _hover: designSystemBaseTextField.textFieldStyles.variants.hovered,
+  '&:disabled, &[aria-disabled="true"]': {
+    ...designSystemBaseTextField.textFieldStyles.variants.disabled,
+    color: "$text-neutrals-disabled"
+  },
   variants: {
     v1: {
       true: {
@@ -100,7 +108,10 @@ const StyledClearAction = designSystemStitches.styled(designSystemBaseButton.Bas
   right: "calc($100 + 1px)",
   // to compensate border width
   margin: "auto",
-  ...designSystemBaseTextField.actionButtonStyles
+  ...designSystemBaseTextField.actionButtonStyles,
+  '&:disabled, &[aria-disabled="true"]': {
+    color: "$icon-neutrals-disabled"
+  }
 });
 
 const ClearAction = React__default["default"].forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(designSystemTooltip.Tooltip, { children: [
@@ -204,7 +215,7 @@ const Trigger = React__default["default"].forwardRef(
     ...restProps
   }, forwardRef) => {
     const [v1] = designSystemExperiments.useNewDesignLanguage();
-    const { value, setValue } = useCalendarContext();
+    const { value, setValue, disabled, ariaDisabled } = useCalendarContext();
     const { formElementId, ariaDescribedBy: formFieldContextDescribedBy } = designSystemBaseForm.useFormFieldContext();
     if (asChild) {
       return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Trigger, { ref: forwardRef, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCustomTrigger, { asChild: true, ...restProps, children }) });
@@ -227,47 +238,40 @@ const Trigger = React__default["default"].forwardRef(
           ),
           v1,
           withClearButton: clearButtonVisible,
+          disabled,
+          "aria-disabled": ariaDisabled,
           ...restProps,
           children: [
             value != null ? /* @__PURE__ */ jsxRuntime.jsx(StyledValue$1, { children }) : /* @__PURE__ */ jsxRuntime.jsx(StyledPlaceholder, { children: placeholder }),
-            !clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, { weight: "thin" })
+            !clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(StyledIconContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, { weight: "thin", size: "small" }) })
           ]
         }
       ) }),
-      clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(ClearAction, { label: clearLabel, onPress: onClearHandler })
+      clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(
+        ClearAction,
+        {
+          label: clearLabel,
+          onPress: onClearHandler,
+          disabled: disabled != null ? disabled : designSystemUtils.booleanify(ariaDisabled)
+        }
+      )
     ] });
   }
 );
 
 const StyledContent = designSystemStitches.styled(RadixPopover.Content, {
   zIndex: "$calendar",
-  display: "inline-block",
-  background: "$background-neutrals"
-});
-const StyledBodyContent = designSystemStitches.styled(designSystemFlex.Flex, {
-  margin: "0 auto",
-  boxShadow: "$100",
   background: "$background-neutrals",
-  borderRadius: "$100"
+  borderRadius: "$100",
+  boxShadow: "$100"
 });
-const StyledGridContent = designSystemStitches.styled(designSystemFlex.Flex, {
-  paddingBottom: "$200",
-  "& [data-left-calendar]": {
-    paddingLeft: "$200",
-    paddingRight: "$100"
-  },
-  "& [data-right-calendar]": {
-    paddingLeft: "$100",
-    paddingRight: "$200"
-  }
-});
-const StyledBodyContentLeft = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  paddingLeft: "$200",
-  paddingRight: "$100"
+const StyledCalendarBody = designSystemStitches.styled(designSystemFlex.Flex, {
+  padding: "$200"
 });
+const StyledGridContent = designSystemStitches.styled(designSystemFlex.Flex, {});
+const StyledBodyContentLeft = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
 const StyledBodyContentRight = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  paddingLeft: "$100",
-  paddingRight: "$200"
+  paddingLeft: "$200"
 });
 const StyledClearContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "flex",
@@ -276,40 +280,33 @@ const StyledClearContent = designSystemStitches.styled(designSystemPrimitive.Pri
   borderTop: "1px solid $border-neutrals"
 });
 
-const StyledHeaderTitle = designSystemStitches.styled(designSystemFlex.Flex, {
-  justifyContent: "center",
-  flex: "3",
-  color: "$text-neutrals"
+const StyledHeaderTitle = designSystemStitches.styled(designSystemTypography.Heading, {
+  margin: 0,
+  flex: "2",
+  textAlign: "center"
 });
-const StyledHeader = designSystemStitches.styled(designSystemFlex.Flex, {
-  padding: "0 $200",
-  color: "$text-neutrals"
+const StyledHeaderPlaceholder = designSystemStitches.styled("div", {
+  height: "$8",
+  // to compensate icon buttons' width and space between 2 calendars
+  width: "calc($8 * 2 + $space$200)"
 });
-
-const StyledHeaderButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
-  padding: "0",
-  backgroundColor: "$transparent",
-  border: "none",
-  cursor: "pointer",
+const StyledHeader = designSystemStitches.styled(designSystemFlex.Flex, {
   color: "$text-neutrals",
-  "&[disabled]": {
-    cursor: "not-allowed"
-  }
+  height: "$8",
+  alignItems: "center",
+  justifyContent: "space-between"
 });
 
-const HeaderButton = React__default["default"].forwardRef((props, forwardRef) => {
-  const { buttonProps } = reactAria.useButton(props, forwardRef);
-  const { focusProps } = reactAria.useFocusRing();
-  const { children } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledHeaderButton,
-    {
-      ...reactAria.mergeProps(buttonProps, focusProps),
-      ref: forwardRef,
-      children
-    }
-  );
-});
+const HeaderButton = React__default["default"].forwardRef(({ isDisabled, children, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
+  designSystemIconButton.IconButton,
+  {
+    ...restProps,
+    size: "medium",
+    disabled: isDisabled,
+    ref: forwardRef,
+    children
+  }
+));
 
 const Header = ({
   state,
@@ -324,77 +321,93 @@ const Header = ({
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(StyledHeader, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(HeaderButton, { ...prevButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronLeft, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
+    /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: monthDateFormatter.format(
       state.visibleRange.start.toDate(state.timeZone)
-    ) }) }),
-    visibleMonths === 2 && /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
-      state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
-    ) }) }),
+    ) }),
+    visibleMonths === 2 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderPlaceholder, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: monthDateFormatter.format(
+        state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
+      ) })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(HeaderButton, { ...nextButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, {}) })
   ] });
 };
 
+const StyledCell = designSystemStitches.styled(designSystemPrimitive.Primitive.td, {
+  square: "$10",
+  marginTop: "$50",
+  position: "relative"
+});
 const StyledCellContent = designSystemStitches.styled(designSystemPrimitive.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]": {
+  ...designSystemStyles.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 = designSystemStitches.styled(designSystemPrimitive.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"
       }
     }
   }
@@ -403,37 +416,27 @@ const StyledCell = designSystemStitches.styled(designSystemPrimitive.Primitive.d
 const Cell = (props) => {
   const { state, date: date$1, currentMonth } = props;
   const ref = React.useRef(null);
-  const { cellProps, buttonProps, isSelected, isDisabled, formattedDate } = reactAria.useCalendarCell({ date: date$1 }, state, ref);
+  const { cellProps, buttonProps, isSelected, formattedDate } = reactAria.useCalendarCell(
+    { date: date$1 },
+    state,
+    ref
+  );
   const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
   const isSelectionStart = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.start) : isSelected;
   const isSelectionEnd = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.end) : isSelected;
-  const { locale } = reactAria.useLocale();
-  const dayOfWeek = date.getDayOfWeek(date$1, locale);
-  const isWeekendDay = date.isWeekend(date$1, locale);
-  const isRoundedLeft = isSelected && (isSelectionStart || dayOfWeek === 0 || date$1.day === 1);
-  const isRoundedRight = isSelected && (isSelectionEnd || dayOfWeek === 6 || date$1.day === date$1.calendar.getDaysInMonth(date$1));
   const { focusProps } = reactAria.useFocusRing();
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-    StyledCell,
+  const isRange = isSelected && (!isSelectionStart || !isSelectionEnd);
+  const rangeVariant = isRange ? isSelectionStart ? "start" : isSelectionEnd ? "end" : "middle" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    StyledCellContent,
     {
       ...reactAria.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__ */ jsxRuntime.jsx(
-        StyledCellContent,
-        {
-          "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
-          "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
-          "data-disabled": isDisabled ? "" : void 0,
-          "data-today": date.isToday(date$1, date.getLocalTimeZone()) ? "" : void 0,
-          "data-weekend": isWeekendDay ? "" : void 0,
-          children: formattedDate
-        }
-      )
+      selected: isSelected && (isSelectionStart || isSelectionEnd),
+      today: date.isToday(date$1, date.getLocalTimeZone()),
+      range: rangeVariant,
+      hidden: isOutsideMonth,
+      children: formattedDate
     }
   ) });
 };
@@ -443,8 +446,10 @@ const StyledGrid = designSystemStitches.styled(designSystemPrimitive.Primitive.t
   borderSpacing: " 0 $50"
 });
 const StyledDays = designSystemStitches.styled(designSystemPrimitive.Primitive.th, {
-  square: "36px",
-  color: "$text-neutrals"
+  height: "$10",
+  color: "$text-neutrals-subtle",
+  fontWeight: "$regular",
+  paddingTop: "$50"
 });
 
 const Grid = React__default["default"].forwardRef(
@@ -476,27 +481,34 @@ const Grid = React__default["default"].forwardRef(
 
 const CONTENT_OFFSET = parseInt(designSystemStitches.theme.space[50]);
 const SharedContent = React__default["default"].forwardRef(
-  ({ calendarProps, prevButtonProps, nextButtonProps, children, state }, forwardRef) => {
+  ({ calendarProps, prevButtonProps, nextButtonProps, state }, forwardRef) => {
     const { visibleDuration } = useCalendarContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContent, { ...calendarProps, ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Header,
-        {
-          state,
-          prevButtonProps,
-          nextButtonProps,
-          visibleMonths: visibleDuration.months
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state }) }),
-        visibleDuration.months === 2 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state, offset: { months: 1 } }) })
-      ] }),
-      children != null && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children })
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledCalendarBody,
+      {
+        direction: "column",
+        ...calendarProps,
+        ref: forwardRef,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Header,
+            {
+              state,
+              prevButtonProps,
+              nextButtonProps,
+              visibleMonths: visibleDuration.months
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state }) }),
+            visibleDuration.months === 2 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state, offset: { months: 1 } }) })
+          ] })
+        ]
+      }
+    );
   }
 );
-const DatePickerContent = ({ children }) => {
+const DatePickerContent = () => {
   const { locale } = reactAria.useLocale();
   const {
     calendarValue,
@@ -525,12 +537,11 @@ const DatePickerContent = ({ children }) => {
       calendarProps,
       prevButtonProps,
       nextButtonProps,
-      state,
-      children
+      state
     }
   );
 };
-const RangePickerContent = ({ children }) => {
+const RangePickerContent = () => {
   const { locale } = reactAria.useLocale();
   const {
     calendarValue,
@@ -562,8 +573,7 @@ const RangePickerContent = ({ children }) => {
       calendarProps,
       prevButtonProps,
       nextButtonProps,
-      state,
-      children
+      state
     }
   );
 };
@@ -597,7 +607,10 @@ const Content = React__default["default"].forwardRef(
         avoidCollisions,
         sticky,
         hideWhenDetached,
-        children: picker === "single" ? /* @__PURE__ */ jsxRuntime.jsx(DatePickerContent, { children }) : /* @__PURE__ */ jsxRuntime.jsx(RangePickerContent, { children })
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", children: [
+          picker === "single" ? /* @__PURE__ */ jsxRuntime.jsx(DatePickerContent, {}) : /* @__PURE__ */ jsxRuntime.jsx(RangePickerContent, {}),
+          children != null && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children })
+        ] })
       }
     );
   }
@@ -610,11 +623,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;
   }
@@ -622,21 +634,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__default["default"].forwardRef(({ format = DEFAULT_FORMAT, ...restProps }, forwardRef) => {
   const { value } = useCalendarContext();
+  const timeZone = React.useMemo(date.getLocalTimeZone, [format]);
   const formatWithTimeZone = React.useMemo(
-    () => ({ ...format, DEFAULT_TIMEZONE }),
-    [format]
+    () => ({ ...format, timeZone }),
+    [format, timeZone]
   );
   const dateFormatter = reactAria.useDateFormatter(formatWithTimeZone);
-  const valueToDisplay = formatValue(value, dateFormatter);
+  const valueToDisplay = formatValue(value, dateFormatter, timeZone);
   return /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { ref: forwardRef, ...restProps, children: valueToDisplay });
 });
 
@@ -713,6 +727,8 @@ const Calendar = React__default["default"].forwardRef(
     visibleMonths,
     minDate,
     maxDate,
+    disabled,
+    "aria-disabled": ariaDisabled,
     children,
     ...props
   }, forwardRef) => {
@@ -727,7 +743,9 @@ const Calendar = React__default["default"].forwardRef(
       defaultOpen,
       open,
       onClose,
-      onOpen
+      onOpen,
+      disabled,
+      ariaDisabled
     };
     return /* @__PURE__ */ jsxRuntime.jsx(reactAria.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarProvider, { ...providerProps, children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...props, ref: forwardRef, children }) }) });
   }