@mirohq/design-system-calendar 0.1.82 → 0.2.1

package/dist/main.js

@@ -10,8 +10,13 @@ var reactAria = require('react-aria');
 var date = require('@internationalized/date');
 var reactStately = require('react-stately');
 var designSystemFlex = require('@mirohq/design-system-flex');
-var designSystemIcons = require('@mirohq/design-system-icons');
 var designSystemButton = require('@mirohq/design-system-button');
+var designSystemBaseForm = require('@mirohq/design-system-base-form');
+var designSystemIcons = require('@mirohq/design-system-icons');
+var designSystemBaseTextField = require('@mirohq/design-system-base-text-field');
+var designSystemStyles = require('@mirohq/design-system-styles');
+var designSystemTooltip = require('@mirohq/design-system-tooltip');
+var designSystemBaseButton = require('@mirohq/design-system-base-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,111 +38,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-const StyledDataSegment = designSystemStitches.styled(designSystemPrimitive.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 = React.useRef(null);
-  const { segmentProps } = reactAria.useDateSegment(segment, state, ref);
-  const segmentPropsStyle = segmentProps.style;
-  delete segmentProps.style;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    StyledDataSegment,
-    {
-      ...segmentProps,
-      UNSAFE_style: segmentPropsStyle,
-      ref,
-      "data-value": state.value !== null ? "" : void 0,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            "data-placeholder": !segment.isPlaceholder ? "" : void 0,
-            children: segment.placeholder
-          }
-        ),
-        segment.isPlaceholder ? "" : segment.text
-      ]
-    }
-  );
-};
-const TextField = React__default["default"].forwardRef((props, forwardRef) => {
-  const ref = React.useRef(null);
-  const { locale } = reactAria.useLocale();
-  const state = reactStately.useDateFieldState({
-    ...props,
-    isReadOnly: true,
-    locale,
-    createCalendar: date.createCalendar
-  });
-  const { fieldProps } = reactAria.useDateField(props, state, ref);
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystemFlex.Flex, { ...fieldProps, ref: forwardRef, children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(FieldDateSegment, { segment, state }, i)) });
-});
-
-const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
-  padding: "0",
-  backgroundColor: "$transparent",
-  border: "none",
-  cursor: "pointer",
-  color: "$text-neutrals",
-  "&[disabled]": {
-    cursor: "not-allowed"
-  }
-});
-const StyledFieldButton = designSystemStitches.styled(designSystemPrimitive.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["default"].forwardRef((props, forwardRef) => {
-  const { buttonProps } = reactAria.useButton(props, forwardRef);
-  const { focusProps } = reactAria.useFocusRing();
-  const { children } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledButton, { ...reactAria.mergeProps(buttonProps, focusProps), ref: forwardRef, children });
-});
-const FieldButton = React__default["default"].forwardRef((props, forwardRef) => {
-  const { buttonProps } = reactAria.useButton(props, forwardRef);
-  const { customButton = false, children } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledFieldButton,
-    {
-      "data-custom": customButton ? "" : void 0,
-      ...buttonProps,
-      ref: forwardRef,
-      children
-    }
-  );
-});
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Popover = (props) => {
   const ref = React__namespace.useRef(null);
@@ -160,29 +62,8 @@ const Popover = (props) => {
   ] });
 };
 
-const StyledPickerInput = designSystemStitches.styled(designSystemPrimitive.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 = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  display: "flex",
-  alignItems: "center",
-  fontSize: "$200",
-  lineHeight: "24px",
-  width: "100%",
-  height: "48px"
+const StyledGroup = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  position: "relative"
 });
 const StyledPicker = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
 
@@ -257,6 +138,24 @@ const StyledClearContent = designSystemStitches.styled(designSystemPrimitive.Pri
   borderTop: "1px solid $border-neutrals"
 });
 
+const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
+  padding: "0",
+  backgroundColor: "$transparent",
+  border: "none",
+  cursor: "pointer",
+  color: "$text-neutrals",
+  "&[disabled]": {
+    cursor: "not-allowed"
+  }
+});
+
+const Button = React__default["default"].forwardRef((props, forwardRef) => {
+  const { buttonProps } = reactAria.useButton(props, forwardRef);
+  const { focusProps } = reactAria.useFocusRing();
+  const { children } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledButton, { ...reactAria.mergeProps(buttonProps, focusProps), ref: forwardRef, children });
+});
+
 const StyledHeaderTitle = designSystemStitches.styled(designSystemFlex.Flex, {
   justifyContent: "center",
   flex: "3",
@@ -432,6 +331,125 @@ const Grid = React__default["default"].forwardRef(
   }
 );
 
+const StyledPlaceholder = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  ...designSystemBaseTextField.textFieldStyles.base.placeholder,
+  padding: "0 $50"
+});
+const StyledValue = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  padding: "0 $50"
+});
+const StyledTriggerContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  position: "relative"
+});
+const StyledTrigger = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
+  all: "unset",
+  display: "inline-flex",
+  gap: "$50",
+  justifyContent: "space-between",
+  alignItems: "center",
+  height: "$10",
+  padding: "0 $100",
+  minWidth: "230px",
+  ...designSystemBaseTextField.textFieldStyles.variants.idle,
+  "& svg": {
+    color: "$text-neutrals-subtle",
+    square: "22px"
+  },
+  _hover: designSystemBaseTextField.textFieldStyles.variants.hovered,
+  ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.variants.focused),
+  variants: {
+    withClearButton: {
+      true: {
+        paddingRight: "calc($100 + $400)"
+        // initial left padding + clear button width + gap
+      }
+    }
+  }
+});
+const StyledCustomTrigger = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
+  width: "100%",
+  height: "unset",
+  padding: "0",
+  backgroundColor: "$transparent",
+  border: "none",
+  cursor: "pointer"
+});
+
+const StyledClearButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  right: "calc($100 + 1px)",
+  // to compensate border width
+  margin: "auto",
+  ...designSystemBaseTextField.actionButtonStyles
+});
+
+const ClearButton = React__default["default"].forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(designSystemTooltip.Tooltip, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    StyledClearButton,
+    {
+      ...restProps,
+      ref: forwardRef,
+      "aria-label": ariaLabel != null ? ariaLabel : label,
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
+    }
+  ) }),
+  /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.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["default"].forwardRef(
+  ({
+    placeholder,
+    displayValue,
+    stateValue,
+    asChild = false,
+    clearable = true,
+    clearActionLabel,
+    onClear,
+    ...restProps
+  }, forwardRef) => {
+    const { buttonProps } = reactAria.useButton(
+      restProps,
+      forwardRef
+    );
+    const { children } = restProps;
+    if (asChild) {
+      return /* @__PURE__ */ jsxRuntime.jsx(StyledCustomTrigger, { ...buttonProps, children });
+    }
+    const valueToDisplay = displayValue != null ? displayValue : dateToString(stateValue);
+    const clearButtonVisible = clearable && clearActionLabel !== void 0 && valueToDisplay != null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(StyledTriggerContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        StyledTrigger,
+        {
+          "data-custom": "",
+          ...buttonProps,
+          ref: forwardRef,
+          withClearButton: clearButtonVisible,
+          children: [
+            valueToDisplay != null ? /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { children: valueToDisplay }) : /* @__PURE__ */ jsxRuntime.jsx(StyledPlaceholder, { children: placeholder }),
+            !clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, { weight: "thin" })
+          ]
+        }
+      ),
+      clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { label: clearActionLabel, onPress: onClear })
+    ] });
+  }
+);
+
 const RangePicker = React__default["default"].forwardRef((props, forwardRef) => {
   const {
     predefinedRanges,
@@ -441,17 +459,21 @@ const RangePicker = React__default["default"].forwardRef((props, forwardRef) =>
     clearButtonText,
     children,
     defaultOpen,
-    onClear
+    onClear,
+    label,
+    placeholder,
+    displayValue
   } = props;
   const state = reactStately.useDateRangePickerState(
     props
   );
   const ref = React.useRef(null);
   const { locale } = reactAria.useLocale();
-  const { groupProps, startFieldProps, endFieldProps, buttonProps } = reactAria.useDateRangePicker(
+  const { groupProps, labelProps, buttonProps } = reactAria.useDateRangePicker(
     {
       ...props,
-      isOpen: defaultOpen
+      isOpen: defaultOpen,
+      label
     },
     state,
     ref
@@ -485,21 +507,32 @@ const RangePicker = React__default["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__ */ jsxRuntime.jsxs(StyledPicker, { ref: forwardRef, children: [
-    children === void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledPickerInput, { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledPickerInputContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TextField, { ...startFieldProps }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2013" }),
-      /* @__PURE__ */ jsxRuntime.jsx(TextField, { ...endFieldProps }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystemFlex.Flex, { css: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(FieldButton, { ...buttonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, {}) }) })
-    ] }) }),
-    children !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(FieldButton, { ...buttonProps, customButton: true, children }) }),
+    children === void 0 && /* @__PURE__ */ jsxRuntime.jsxs(StyledGroup, { ...groupProps, ref, children: [
+      label !== void 0 && // todo refactoring: use Form Field context
+      /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: true, ...labelProps, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Trigger,
+        {
+          ...buttonProps,
+          placeholder,
+          displayValue,
+          stateValue: state.value,
+          clearable: clearableTrigger,
+          clearActionLabel: clearableTrigger ? clearButtonText : void 0,
+          onClear: clearableTrigger ? onClearHandler : void 0
+        }
+      )
+    ] }),
+    children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
     state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsxRuntime.jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledBodyContent, { children: [
       predefinedRanges !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
         PredefinedRanges,
@@ -534,7 +567,7 @@ const RangePicker = React__default["default"].forwardRef((props, forwardRef) =>
           {
             size: "medium",
             type: "button",
-            onClick: clear,
+            onClick: onClearHandler,
             disabled: rangeState.value === null,
             children: clearButtonText
           }
@@ -613,27 +646,47 @@ const DatePicker = React__default["default"].forwardRef((props, forwardRef) => {
     children,
     clearButtonText,
     defaultOpen,
-    onClear
+    onClear,
+    label,
+    placeholder,
+    displayValue
   } = props;
   const ref = React.useRef(null);
   const state = reactStately.useDatePickerState(props);
-  const { groupProps, fieldProps, buttonProps, calendarProps } = reactAria.useDatePicker(
-    { ...props, isOpen: defaultOpen },
+  const { groupProps, buttonProps, calendarProps, labelProps } = reactAria.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: picker === "single" ? /* @__PURE__ */ jsxRuntime.jsxs(StyledPicker, { ref: forwardRef, children: [
-    children === void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledPickerInput, { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledPickerInputContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TextField, { ...fieldProps }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystemFlex.Flex, { css: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(FieldButton, { ...buttonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, {}) }) })
-    ] }) }),
-    children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(FieldButton, { ...buttonProps, customButton: true, children }) }),
+    children === void 0 && /* @__PURE__ */ jsxRuntime.jsxs(StyledGroup, { ...groupProps, ref, children: [
+      label !== void 0 && // todo refactoring: use Form Field context
+      /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: true, ...labelProps, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Trigger,
+        {
+          ...buttonProps,
+          placeholder,
+          displayValue,
+          stateValue: state.value,
+          clearable: clearableTrigger,
+          clearActionLabel: clearableTrigger ? clearButtonText : void 0,
+          onClear: clearableTrigger ? onClearHandler : void 0
+        }
+      )
+    ] }),
+    children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
     state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsxRuntime.jsx(
       DatePickerBody,
       {
@@ -641,7 +694,7 @@ const DatePicker = React__default["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,
@@ -656,7 +709,7 @@ const DatePicker = React__default["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