@mirohq/design-system-calendar 0.1.81 → 0.2.0

package/dist/module.js

@@ -1,117 +1,19 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled } from '@mirohq/design-system-stitches';
 import * as React from 'react';
 import React__default, { useRef, useCallback } from 'react';
-import { useLocale, useDateField, useDateSegment, useButton, useFocusRing, mergeProps, useDialog, usePopover, Overlay, DismissButton, useDateFormatter, useCalendarCell, useCalendarGrid, useDateRangePicker, useRangeCalendar, useCalendar, useDatePicker } from 'react-aria';
-import { createCalendar, isSameMonth, isSameDay, getDayOfWeek, isWeekend, isToday, getLocalTimeZone, getWeeksInMonth } from '@internationalized/date';
-import { useDateFieldState, useDateRangePickerState, useRangeCalendarState, useCalendarState, useDatePickerState } from 'react-stately';
+import { useDialog, usePopover, Overlay, DismissButton, useButton, useFocusRing, mergeProps, useDateFormatter, useCalendarCell, useLocale, useCalendarGrid, useDateRangePicker, useRangeCalendar, useCalendar, useDatePicker } from 'react-aria';
+import { isSameMonth, isSameDay, getDayOfWeek, isWeekend, isToday, getLocalTimeZone, getWeeksInMonth, createCalendar } from '@internationalized/date';
+import { useDateRangePickerState, useRangeCalendarState, useCalendarState, useDatePickerState } from 'react-stately';
 import { Flex } from '@mirohq/design-system-flex';
-import { IconChevronLeft, IconChevronRight, IconCalendarBlank } from '@mirohq/design-system-icons';
 import { Button as Button$1 } from '@mirohq/design-system-button';
-
-const StyledDataSegment = styled(Primitive.div, {
-  color: "$text-neutrals-subtle",
-  "&[data-value]": {
-    color: "$text-neutrals"
-  },
-  "& span": {
-    pointerEvents: "none",
-    "&[data-placeholder]": {
-      display: "none",
-      height: "0",
-      color: "$text-neutrals-subtle"
-    }
-  }
-});
-
-const FieldDateSegment = ({ segment, state }) => {
-  const ref = useRef(null);
-  const { segmentProps } = useDateSegment(segment, state, ref);
-  const segmentPropsStyle = segmentProps.style;
-  delete segmentProps.style;
-  return /* @__PURE__ */ jsxs(
-    StyledDataSegment,
-    {
-      ...segmentProps,
-      UNSAFE_style: segmentPropsStyle,
-      ref,
-      "data-value": state.value !== null ? "" : void 0,
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            "data-placeholder": !segment.isPlaceholder ? "" : void 0,
-            children: segment.placeholder
-          }
-        ),
-        segment.isPlaceholder ? "" : segment.text
-      ]
-    }
-  );
-};
-const TextField = React__default.forwardRef((props, forwardRef) => {
-  const ref = useRef(null);
-  const { locale } = useLocale();
-  const state = useDateFieldState({
-    ...props,
-    isReadOnly: true,
-    locale,
-    createCalendar
-  });
-  const { fieldProps } = useDateField(props, state, ref);
-  return /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref: forwardRef, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(FieldDateSegment, { segment, state }, i)) });
-});
-
-const StyledButton = styled(Primitive.button, {
-  padding: "0",
-  backgroundColor: "$transparent",
-  border: "none",
-  cursor: "pointer",
-  color: "$text-neutrals",
-  "&[disabled]": {
-    cursor: "not-allowed"
-  }
-});
-const StyledFieldButton = styled(Primitive.button, {
-  padding: "0",
-  backgroundColor: "$transparent",
-  border: "none",
-  cursor: "pointer",
-  square: "28px",
-  "&[disabled]": {
-    cursor: "not-allowed"
-  },
-  "& svg": {
-    color: "$text-neutrals-subtle",
-    square: "22px"
-  },
-  "&[data-custom]": {
-    width: "100%",
-    height: "unset"
-  }
-});
-
-const Button = React__default.forwardRef((props, forwardRef) => {
-  const { buttonProps } = useButton(props, forwardRef);
-  const { focusProps } = useFocusRing();
-  const { children } = props;
-  return /* @__PURE__ */ jsx(StyledButton, { ...mergeProps(buttonProps, focusProps), ref: forwardRef, children });
-});
-const FieldButton = React__default.forwardRef((props, forwardRef) => {
-  const { buttonProps } = useButton(props, forwardRef);
-  const { customButton = false, children } = props;
-  return /* @__PURE__ */ jsx(
-    StyledFieldButton,
-    {
-      "data-custom": customButton ? "" : void 0,
-      ...buttonProps,
-      ref: forwardRef,
-      children
-    }
-  );
-});
+import { FloatingLabel } from '@mirohq/design-system-base-form';
+import { IconChevronLeft, IconChevronRight, IconCross, IconCalendarBlank } from '@mirohq/design-system-icons';
+import { textFieldStyles, actionButtonStyles } from '@mirohq/design-system-base-text-field';
+import { focus as focus$1 } from '@mirohq/design-system-styles';
+import { Tooltip } from '@mirohq/design-system-tooltip';
+import { BaseButton } from '@mirohq/design-system-base-button';
 
 const Popover = (props) => {
   const ref = React.useRef(null);
@@ -134,29 +36,8 @@ const Popover = (props) => {
   ] });
 };
 
-const StyledPickerInput = styled(Primitive.div, {
-  display: "flex",
-  alignItems: "center",
-  paddingLeft: "$150",
-  paddingRight: "$100",
-  border: "1px solid $border-neutrals",
-  borderRadius: "$50",
-  background: "$background-neutrals",
-  color: "$text-neutrals",
-  minWidth: "230px",
-  boxSizing: "border-box",
-  "&:hover": {
-    border: "1px solid $border-primary-hover",
-    cursor: "pointer"
-  }
-});
-const StyledPickerInputContent = styled(Primitive.div, {
-  display: "flex",
-  alignItems: "center",
-  fontSize: "$200",
-  lineHeight: "24px",
-  width: "100%",
-  height: "48px"
+const StyledGroup = styled(Primitive.div, {
+  position: "relative"
 });
 const StyledPicker = styled(Primitive.div, {});
 
@@ -231,6 +112,24 @@ const StyledClearContent = styled(Primitive.div, {
   borderTop: "1px solid $border-neutrals"
 });
 
+const StyledButton = styled(Primitive.button, {
+  padding: "0",
+  backgroundColor: "$transparent",
+  border: "none",
+  cursor: "pointer",
+  color: "$text-neutrals",
+  "&[disabled]": {
+    cursor: "not-allowed"
+  }
+});
+
+const Button = React__default.forwardRef((props, forwardRef) => {
+  const { buttonProps } = useButton(props, forwardRef);
+  const { focusProps } = useFocusRing();
+  const { children } = props;
+  return /* @__PURE__ */ jsx(StyledButton, { ...mergeProps(buttonProps, focusProps), ref: forwardRef, children });
+});
+
 const StyledHeaderTitle = styled(Flex, {
   justifyContent: "center",
   flex: "3",
@@ -406,6 +305,125 @@ const Grid = React__default.forwardRef(
   }
 );
 
+const StyledPlaceholder = styled(Primitive.span, {
+  ...textFieldStyles.base.placeholder,
+  padding: "0 $50"
+});
+const StyledValue = styled(Primitive.span, {
+  padding: "0 $50"
+});
+const StyledTriggerContainer = styled(Primitive.div, {
+  position: "relative"
+});
+const StyledTrigger = styled(Primitive.button, {
+  all: "unset",
+  display: "inline-flex",
+  gap: "$50",
+  justifyContent: "space-between",
+  alignItems: "center",
+  height: "$10",
+  padding: "0 $100",
+  minWidth: "230px",
+  ...textFieldStyles.variants.idle,
+  "& svg": {
+    color: "$text-neutrals-subtle",
+    square: "22px"
+  },
+  _hover: textFieldStyles.variants.hovered,
+  ...focus$1.css(textFieldStyles.variants.focused),
+  variants: {
+    withClearButton: {
+      true: {
+        paddingRight: "calc($100 + $400)"
+        // initial left padding + clear button width + gap
+      }
+    }
+  }
+});
+const StyledCustomTrigger = styled(Primitive.button, {
+  width: "100%",
+  height: "unset",
+  padding: "0",
+  backgroundColor: "$transparent",
+  border: "none",
+  cursor: "pointer"
+});
+
+const StyledClearButton = styled(BaseButton, {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  right: "calc($100 + 1px)",
+  // to compensate border width
+  margin: "auto",
+  ...actionButtonStyles
+});
+
+const ClearButton = React__default.forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+  /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    StyledClearButton,
+    {
+      ...restProps,
+      ref: forwardRef,
+      "aria-label": ariaLabel != null ? ariaLabel : label,
+      children: /* @__PURE__ */ jsx(IconCross, {})
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip.Content, { children: label })
+] }));
+
+function dateToString(value) {
+  if (value == null) {
+    return void 0;
+  }
+  if ("start" in value) {
+    if (value.start == null || value.end == null) {
+      return void 0;
+    }
+    return "".concat(value.start, " - ").concat(value.end);
+  }
+  return value.toString();
+}
+const Trigger = React__default.forwardRef(
+  ({
+    placeholder,
+    displayValue,
+    stateValue,
+    asChild = false,
+    clearable = true,
+    clearActionLabel,
+    onClear,
+    ...restProps
+  }, forwardRef) => {
+    const { buttonProps } = useButton(
+      restProps,
+      forwardRef
+    );
+    const { children } = restProps;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(StyledCustomTrigger, { children });
+    }
+    const valueToDisplay = displayValue != null ? displayValue : dateToString(stateValue);
+    const clearButtonVisible = clearable && clearActionLabel !== void 0 && valueToDisplay != null;
+    return /* @__PURE__ */ jsxs(StyledTriggerContainer, { children: [
+      /* @__PURE__ */ jsxs(
+        StyledTrigger,
+        {
+          "data-custom": "",
+          ...buttonProps,
+          ref: forwardRef,
+          withClearButton: clearButtonVisible,
+          children: [
+            valueToDisplay != null ? /* @__PURE__ */ jsx(StyledValue, { children: valueToDisplay }) : /* @__PURE__ */ jsx(StyledPlaceholder, { children: placeholder }),
+            !clearButtonVisible && /* @__PURE__ */ jsx(IconCalendarBlank, { weight: "thin" })
+          ]
+        }
+      ),
+      clearButtonVisible && /* @__PURE__ */ jsx(ClearButton, { label: clearActionLabel, onPress: onClear })
+    ] });
+  }
+);
+
 const RangePicker = React__default.forwardRef((props, forwardRef) => {
   const {
     predefinedRanges,
@@ -415,17 +433,21 @@ const RangePicker = React__default.forwardRef((props, forwardRef) => {
     clearButtonText,
     children,
     defaultOpen,
-    onClear
+    onClear,
+    label,
+    placeholder,
+    displayValue
   } = props;
   const state = useDateRangePickerState(
     props
   );
   const ref = useRef(null);
   const { locale } = useLocale();
-  const { groupProps, startFieldProps, endFieldProps, buttonProps } = useDateRangePicker(
+  const { groupProps, labelProps, buttonProps } = useDateRangePicker(
     {
       ...props,
-      isOpen: defaultOpen
+      isOpen: defaultOpen,
+      label
     },
     state,
     ref
@@ -459,21 +481,32 @@ const RangePicker = React__default.forwardRef((props, forwardRef) => {
     },
     [rangeState, state]
   );
-  const clear = () => {
+  const onClearHandler = () => {
     state.setValue({ start: null, end: null });
     if (onClear !== void 0) {
       onClear();
       state.close();
     }
   };
+  const clearableTrigger = clearButtonText !== void 0 && onClear !== void 0;
   return /* @__PURE__ */ jsxs(StyledPicker, { ref: forwardRef, children: [
-    children === void 0 && /* @__PURE__ */ jsx(StyledPickerInput, { ...groupProps, ref, children: /* @__PURE__ */ jsxs(StyledPickerInputContent, { children: [
-      /* @__PURE__ */ jsx(TextField, { ...startFieldProps }),
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2013" }),
-      /* @__PURE__ */ jsx(TextField, { ...endFieldProps }),
-      /* @__PURE__ */ jsx(Flex, { css: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(FieldButton, { ...buttonProps, children: /* @__PURE__ */ jsx(IconCalendarBlank, {}) }) })
-    ] }) }),
-    children !== null && /* @__PURE__ */ jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsx(FieldButton, { ...buttonProps, customButton: true, children }) }),
+    children === void 0 && /* @__PURE__ */ jsxs(StyledGroup, { ...groupProps, ref, children: [
+      label !== void 0 && // todo refactoring: use Form Field context
+      /* @__PURE__ */ jsx(FloatingLabel, { floating: true, ...labelProps, children: label }),
+      /* @__PURE__ */ jsx(
+        Trigger,
+        {
+          ...buttonProps,
+          placeholder,
+          displayValue,
+          stateValue: state.value,
+          clearable: clearableTrigger,
+          clearActionLabel: clearableTrigger ? clearButtonText : void 0,
+          onClear: clearableTrigger ? onClearHandler : void 0
+        }
+      )
+    ] }),
+    children !== void 0 && /* @__PURE__ */ jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
     state.isOpen && /* @__PURE__ */ jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxs(StyledBodyContent, { children: [
       predefinedRanges !== void 0 && /* @__PURE__ */ jsx(
         PredefinedRanges,
@@ -508,7 +541,7 @@ const RangePicker = React__default.forwardRef((props, forwardRef) => {
           {
             size: "medium",
             type: "button",
-            onClick: clear,
+            onClick: onClearHandler,
             disabled: rangeState.value === null,
             children: clearButtonText
           }
@@ -587,27 +620,47 @@ const DatePicker = React__default.forwardRef((props, forwardRef) => {
     children,
     clearButtonText,
     defaultOpen,
-    onClear
+    onClear,
+    label,
+    placeholder,
+    displayValue
   } = props;
   const ref = useRef(null);
   const state = useDatePickerState(props);
-  const { groupProps, fieldProps, buttonProps, calendarProps } = useDatePicker(
-    { ...props, isOpen: defaultOpen },
+  const { groupProps, buttonProps, calendarProps, labelProps } = useDatePicker(
+    {
+      ...props,
+      isOpen: defaultOpen,
+      label
+    },
     state,
     ref
   );
-  const clearState = () => {
+  const onClearHandler = () => {
     state.setValue(null);
     if (onClear !== void 0) {
       onClear();
     }
   };
+  const clearableTrigger = clearButtonText !== void 0 && onClear !== void 0;
   return /* @__PURE__ */ jsx(Fragment, { children: picker === "single" ? /* @__PURE__ */ jsxs(StyledPicker, { ref: forwardRef, children: [
-    children === void 0 && /* @__PURE__ */ jsx(StyledPickerInput, { ...groupProps, ref, children: /* @__PURE__ */ jsxs(StyledPickerInputContent, { children: [
-      /* @__PURE__ */ jsx(TextField, { ...fieldProps }),
-      /* @__PURE__ */ jsx(Flex, { css: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(FieldButton, { ...buttonProps, children: /* @__PURE__ */ jsx(IconCalendarBlank, {}) }) })
-    ] }) }),
-    children !== void 0 && /* @__PURE__ */ jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsx(FieldButton, { ...buttonProps, customButton: true, children }) }),
+    children === void 0 && /* @__PURE__ */ jsxs(StyledGroup, { ...groupProps, ref, children: [
+      label !== void 0 && // todo refactoring: use Form Field context
+      /* @__PURE__ */ jsx(FloatingLabel, { floating: true, ...labelProps, children: label }),
+      /* @__PURE__ */ jsx(
+        Trigger,
+        {
+          ...buttonProps,
+          placeholder,
+          displayValue,
+          stateValue: state.value,
+          clearable: clearableTrigger,
+          clearActionLabel: clearableTrigger ? clearButtonText : void 0,
+          onClear: clearableTrigger ? onClearHandler : void 0
+        }
+      )
+    ] }),
+    children !== void 0 && /* @__PURE__ */ jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
     state.isOpen && /* @__PURE__ */ jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsx(
       DatePickerBody,
       {
@@ -615,7 +668,7 @@ const DatePicker = React__default.forwardRef((props, forwardRef) => {
         defaultValue,
         predefinedRanges,
         visibleMonths,
-        onClear: onClear !== void 0 ? clearState : void 0,
+        onClear: onClear !== void 0 ? onClearHandler : void 0,
         minDate,
         maxDate,
         clearButtonText: onClear !== void 0 ? clearButtonText : void 0,
@@ -630,7 +683,7 @@ const DatePicker = React__default.forwardRef((props, forwardRef) => {
       defaultValue,
       predefinedRanges,
       visibleMonths,
-      onClear: onClear !== void 0 ? clearState : void 0,
+      onClear: onClear !== void 0 ? onClearHandler : void 0,
       minDate,
       maxDate,
       clearButtonText: onClear !== void 0 ? clearButtonText : void 0