@mirohq/design-system-calendar 0.4.7 → 1.0.0

package/dist/types.d.ts

@@ -1,89 +1,323 @@
+import * as react from 'react';
+import react__default, { ComponentPropsWithRef, ReactNode, ForwardRefExoticComponent } from 'react';
+import { DateValue, DateRange } from 'react-aria';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
+import { StrictComponentProps } from '@mirohq/design-system-stitches';
 import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
-import React, { ComponentPropsWithRef } from 'react';
-import { DateRange as DateRange$1, DateValue } from 'react-aria';
-import { CalendarDate, DateDuration } from '@internationalized/date';
-import { DateRange } from '@react-types/datepicker';
+import * as packages_components_internal_base_button_src_base_button from 'packages/components/internal/base-button/src/base-button';
+import * as _mirohq_design_system_hooks_use_press from '@mirohq/design-system-hooks/use-press';
+import * as _radix_ui_react_popover from '@radix-ui/react-popover';
+import * as _mirohq_design_system_components_primitive from '@mirohq/design-system-components/primitive';
+import { BaseButtonProps } from '@mirohq/design-system-base-button';
 
-interface PredefinedRange {
-    id: string;
-    label: string;
-    date?: CalendarDate;
-    range?: DateRange;
-}
-
-declare const StyledCalendar: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
+declare const StyledCalendar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
 declare type StyledCalendarProps = ComponentPropsWithRef<typeof StyledCalendar>;
-interface CalendarProps extends Omit<StyledCalendarProps, 'defaultValue' | 'onChange'> {
+
+interface CalendarBaseProps extends Omit<StyledCalendarProps, 'defaultValue' | 'onChange'> {
+    /**
+     * The number of months visible on page
+     * @default 1
+     */
+    visibleMonths?: number;
+    /**
+     * Minimum allowed date to select from
+     */
+    minDate?: DateValue;
+    /**
+     * Maximum allowed date to select from
+     */
+    maxDate?: DateValue;
+    /**
+     * The content
+     */
+    children?: ReactNode;
+    /**
+     * The open state of the calendar when it is initially rendered. Use when you do
+     * not need to control its open state.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled open state of the calendar. Must be used in conjunction with
+     * onOpen and onClose.
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the calendar opens.
+     */
+    onOpen?: () => void;
+    /**
+     * Event handler called when the calendar closes.
+     */
+    onClose?: () => void;
+}
+interface CalendarDatePickerProps extends CalendarBaseProps {
     /**
      * Type of calendar
      */
-    picker?: 'single' | 'range';
+    picker: 'single';
     /**
      * Value given for already pre-selected date
      */
-    defaultValue?: DateRange$1 | CalendarDate;
+    defaultValue?: DateValue;
     /**
-     * Set of predefined ranges
+     * The controlled value of the Calendar. Should be used in conjunction with
+     * onValueChange.
      */
-    predefinedRanges?: PredefinedRange[];
+    value?: DateValue;
     /**
-     * By default it shows only one calendar, show more calendars
+     * Event handler called when the date value changes
      */
-    visibleMonths?: DateDuration;
+    onValueChange?: (value: DateValue | undefined) => void;
+}
+interface CalendarRangePickerProps extends CalendarBaseProps {
     /**
-     * Minimum allowed date to select from
+     * Type of calendar
      */
-    minDate?: DateValue;
+    picker: 'range';
     /**
-     * Maximum allowed date to select from
+     * Value given for already pre-selected date
      */
-    maxDate?: DateValue;
+    defaultValue?: DateRange;
+    /**
+     * The controlled value of the Calendar. Should be used in conjunction with
+     * onValueChange.
+     */
+    value?: DateRange;
     /**
-     * Custom input element
+     * Event handler called when the date value changes
      */
-    children?: JSX.Element;
+    onValueChange?: (value: DateRange | undefined) => void;
+}
+declare type PointerDownOutsideEvent = CustomEvent<{
+    originalEvent: PointerEvent;
+}>;
+declare type Side = 'top' | 'right' | 'bottom' | 'left';
+declare type Align = 'start' | 'center' | 'end';
+declare type Sticky = 'partial' | 'always';
+
+declare const StyledTrigger: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
+    children?: react.ReactNode;
+}, "v1" | "withClearButton"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "false" | "true" | undefined;
+    withClearButton?: boolean | "true" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
+    href: string;
+}, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
+    children?: react.ReactNode;
+}, "v1" | "withClearButton"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "false" | "true" | undefined;
+    withClearButton?: boolean | "true" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
+    href: string;
+}, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {
+    v1?: boolean | "false" | "true" | undefined;
+    withClearButton?: boolean | "true" | undefined;
+}, {}>;
+declare type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>;
+
+declare type TriggerSharedProps = Omit<StyledTriggerProps, 'v1' | 'withClearButton'> & {
     /**
-     * Clear button string
+     * The content that will be rendered inside the Calendar trigger when there is no value
      */
-    clearButtonText?: string;
+    placeholder?: string;
     /**
-     * Calendar open by default
+     * Show a button to clear the Calendar value
+     * @default false
      */
-    defaultOpen?: boolean;
+    clearable?: boolean;
+};
+declare type TriggerProps = TriggerSharedProps & ({
+    clearable: false;
+    clearLabel?: never;
+    onClear?: never;
+} | {
     /**
      * Event handler called when the calendar is cleared
      */
     onClear?: () => void;
     /**
-     * Event handler called when the date value changes
+     * The label text for Trigger's action button when Combobox has values selected. Will be rendered in a Tooltip.
      */
-    onChange?: (value: DateRange$1 | DateValue) => void;
+    clearLabel: string;
+});
+declare const Trigger: react__default.ForwardRefExoticComponent<(Omit<Omit<StyledTriggerProps, "v1" | "withClearButton"> & {
     /**
-     * The label text for trigger's clear button when Calendar has a value. Will be rendered in a Tooltip
+     * The content that will be rendered inside the Calendar trigger when there is no value
+     */
+    placeholder?: string | undefined;
+    /**
+     * Show a button to clear the Calendar value
+     * @default false
      */
-    label?: string;
+    clearable?: boolean | undefined;
+} & {
+    clearable: false;
+    clearLabel?: undefined;
+    onClear?: undefined;
+}, "ref"> | Omit<Omit<StyledTriggerProps, "v1" | "withClearButton"> & {
     /**
      * The content that will be rendered inside the Calendar trigger when there is no value
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
-     * A string that will be rendered in the trigger instead of the selected value
+     * Show a button to clear the Calendar value
+     * @default false
      */
-    displayValue?: string;
-}
-declare const Calendar: React.ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    clearable?: boolean | undefined;
+} & {
+    /**
+     * Event handler called when the calendar is cleared
+     */
+    onClear?: (() => void) | undefined;
+    /**
+     * The label text for Trigger's action button when Combobox has values selected. Will be rendered in a Tooltip.
+     */
+    clearLabel: string;
+}, "ref">) & react__default.RefAttributes<HTMLButtonElement>>;
 
-interface RangePickerProps extends Omit<CalendarProps, 'picker' | 'defaultValue' | 'onChange'> {
+declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverContentProps & react.RefAttributes<HTMLDivElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverContentProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
+declare type StyledContentProps = ComponentPropsWithRef<typeof StyledContent>;
+
+declare type ContentProps = StyledContentProps & {
     /**
-     * Value given for already pre-selected date
+     * Calendar's content.
      */
-    defaultValue?: DateRange$1;
+    children?: ReactNode;
     /**
-     * Event handler called when the date value changes
+     * Event handler called when focus moves to the trigger after closing. It can
+     * be prevented by calling event.preventDefault.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
+    /**
+     * Event handler called when focus moves to the trigger after closing. It can
+     * be prevented by calling event.preventDefault.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Event handler called when a pointer event occurs outside the bounds of the
+     * component. It can be prevented by calling event.preventDefault.
+     */
+    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+    /**
+     * The preferred side of the anchor to render against when open. Will be
+     * reversed when collisions occur and avoidCollisions is enabled.
+     * @default 'bottom'
+     */
+    side?: Side;
+    /**
+     * The distance in pixels from the anchor.
+     * @default CONTENT_OFFSET
+     */
+    sideOffset?: number;
+    /**
+     * The preferred alignment against the anchor. May change when collisions
+     * occur.
+     * @default 'start'
+     */
+    align?: Align;
+    /**
+     * An offset in pixels from the "start" or "end" alignment options.
+     * @default 0
+     */
+    alignOffset?: number;
+    /**
+     * When true, overrides the side and align preferences to prevent collisions
+     * with boundary edges.
+     * @default true
+     */
+    avoidCollisions?: boolean;
+    /**
+     * The element used as the collision boundary. By default this is the
+     * viewport, though you can provide additional element(s) to be included in
+     * this check.
+     */
+    collisionBoundary?: Element | null;
+    /**
+     * The distance in pixels from the boundary edges where collision detection
+     * should occur. Accepts a number (same for all sides), or a partial padding
+     * object, for example: { top: 20, left: 20 }.
+     * @default 0
+     */
+    collisionPadding?: number | Partial<Record<Side, number>>;
+    /**
+     * The sticky behavior on the align axis. "partial" will keep the content in the
+     * boundary as long as the trigger is at least partially in the boundary whilst
+     * "always" will keep the content in the boundary regardless.
+     * @default 'partial'
+     */
+    sticky?: Sticky;
+    /**
+     * Whether to hide the content when the trigger becomes fully occluded.
+     * @default true
+     */
+    hideWhenDetached?: boolean;
+};
+declare const Content: react__default.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+
+declare const StyledValue: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>, {}, {}>;
+declare type StyledValueProps = ComponentPropsWithRef<typeof StyledValue>;
+
+declare type FormatOptions = Pick<Intl.DateTimeFormatOptions, 'weekday' | 'era' | 'year' | 'month' | 'day' | 'formatMatcher'>;
+declare type ValueProps = StyledValueProps & {
+    format?: FormatOptions;
+};
+declare const Value: react__default.ForwardRefExoticComponent<Omit<ValueProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
+
+declare type ClearButtonProps = BaseButtonProps & {
+    /**
+     * Event handler called when the calendar value is cleared
+     */
+    onClear?: () => void;
+};
+declare const ClearButton: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & {
+    /**
+     * Event handler called when the calendar value is cleared
+     */
+    onClear?: (() => void) | undefined;
+}, "ref"> | Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react__default.AnchorHTMLAttributes<"a"> & {
+    href: string;
+} & {
+    /**
+     * Event handler called when the calendar value is cleared
+     */
+    onClear?: (() => void) | undefined;
+}, "ref">) & react__default.RefAttributes<HTMLButtonElement>>;
+
+declare type SaveButtonProps = BaseButtonProps & {
+    /**
+     * Event handler called when the calendar value is saved
+     */
+    onSave?: () => void;
+};
+declare const SaveButton: react__default.ForwardRefExoticComponent<(Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & {
+    /**
+     * Event handler called when the calendar value is saved
+     */
+    onSave?: (() => void) | undefined;
+}, "ref"> | Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react__default.AnchorHTMLAttributes<"a"> & {
+    href: string;
+} & {
+    /**
+     * Event handler called when the calendar value is saved
+     */
+    onSave?: (() => void) | undefined;
+}, "ref">) & react__default.RefAttributes<HTMLButtonElement>>;
+
+declare type CalendarProps = (CalendarDatePickerProps | CalendarRangePickerProps) & {
+    /**
+     * The locale for Calendar internationalization
      */
-    onChange?: (value: DateRange$1) => void;
+    locale?: string;
+};
+declare const Calendar: ForwardRefExoticComponent<CalendarProps> & Partials;
+interface Partials {
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+    Value: typeof Value;
+    ClearButton: typeof ClearButton;
+    SaveButton: typeof SaveButton;
 }
 
-export { Calendar, PredefinedRange as CalendarPredefinedRange, CalendarProps, RangePickerProps as CalendarRangePickerProps };
+export { Calendar, ClearButtonProps as CalendarClearButtonProps, ContentProps as CalendarContentProps, CalendarProps, SaveButtonProps as CalendarSaveButtonProps, TriggerProps as CalendarTriggerProps, ValueProps as CalendarValueProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-calendar",
-  "version": "0.4.7",
+  "version": "1.0.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -23,24 +23,29 @@
   },
   "peerDependencies": {
     "@stitches/react": "^1.2.8",
-    "react": "^16.14 || ^17 || ^18"
+    "react": "^16.14 || ^17 || ^18",
+    "react-dom": "^16.14 || ^17 || ^18"
   },
   "dependencies": {
     "@internationalized/date": "^3.3.0",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-use-controllable-state": "1.0.1",
     "@react-types/datepicker": "^3.4.0",
+    "@react-types/shared": "^3.18.1",
     "react-aria": "^3.25.0",
     "react-stately": "^3.23.0",
-    "@mirohq/design-system-base-button": "^0.4.67",
-    "@mirohq/design-system-base-form": "^0.3.3",
-    "@mirohq/design-system-base-text-field": "^0.2.2",
-    "@mirohq/design-system-button": "^4.2.5",
+    "@mirohq/design-system-base-button": "^0.4.68",
+    "@mirohq/design-system-base-form": "^0.3.4",
+    "@mirohq/design-system-base-text-field": "^0.2.3",
     "@mirohq/design-system-experiments": "^0.2.0",
-    "@mirohq/design-system-flex": "^2.1.65",
-    "@mirohq/design-system-icons": "^0.62.0",
+    "@mirohq/design-system-flex": "^2.1.66",
+    "@mirohq/design-system-button": "^4.2.6",
+    "@mirohq/design-system-icons": "^0.62.1",
     "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-stitches": "^2.6.29",
-    "@mirohq/design-system-styles": "^1.2.29",
-    "@mirohq/design-system-tooltip": "^3.5.8"
+    "@mirohq/design-system-styles": "^1.2.30",
+    "@mirohq/design-system-stitches": "^2.6.30",
+    "@mirohq/design-system-tooltip": "^3.5.9",
+    "@mirohq/design-system-utils": "^0.15.5"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",