@flightlesslabs/dodo-ui 0.9.1 → 0.10.0

package/dist/stories/components/Form/DatePicker/DatePicker.svelte.d.ts

@@ -0,0 +1,215 @@
+import type { ComponentSize } from '../../../../types/size.js';
+import type { ComponentRoundness } from '../../../../types/roundness.js';
+import type { Snippet } from 'svelte';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+export type DatePickerCalendarIconPosition = false | 'before' | 'after';
+export interface DatePickerProps {
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** editable DatePicker? */
+    editable?: boolean;
+    /** want a clearable DatePicker? */
+    clearable?: boolean;
+    /** onselect event handler */
+    onselect?: (value: Date, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
+    /** onclear event handler */
+    onclear?: MouseEventHandler<HTMLButtonElement>;
+    /** DatePicker ref */
+    ref?: HTMLInputElement | HTMLButtonElement;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+    /** Add a border around the button. Default True */
+    outline?: boolean;
+    /** DatePicker value */
+    value: Date | undefined;
+    /** How round should the border radius be? */
+    placeholder?: string;
+    /** disabled state */
+    disabled?: boolean;
+    /** Read only ? */
+    readonly?: boolean;
+    /** is there any associated Error ? */
+    error?: boolean;
+    /** Name */
+    name?: string;
+    /** Id */
+    id?: string;
+    /** Icon before button content */
+    before?: Snippet;
+    /** Icon after button content */
+    after?: Snippet;
+    /** Custom css class*/
+    class?: string;
+    /** onchange event handler */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    /** oninput event handler */
+    oninput?: FormEventHandler<HTMLInputElement>;
+    /** onblur event handler */
+    onblur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onfocus event handler */
+    onfocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onpaste event handler */
+    onpaste?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncopy event handler */
+    oncopy?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncut event handler */
+    oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** custom Content Formatting for variant button */
+    customInputContent?: (val: Date) => Snippet;
+    /** Custom Popup Content */
+    customPopupContent?: () => Snippet;
+    /** PaperProps: Paper component props for Popup */
+    paperProps?: Partial<PaperProps>;
+    /** PopperProps: Popper component props */
+    popperProps?: Partial<PopperProps>;
+    /** custom CalendarI Icon */
+    customCalendarIcon?: (open: boolean) => Snippet;
+    /** DatePicker CalendarI con Position */
+    calendarIconPosition?: DatePickerCalendarIconPosition;
+    /** Popup stick horizontally  */
+    popupPositionX?: PositionX;
+    /** Popup stick vertically  */
+    popupPositionY?: PositionY;
+    /** Lock positions, disable auto top, bottom position based  */
+    lockPoistions?: boolean;
+    /** Popper Height For Vertical Position, default 300 */
+    popperHeightForVerticalPosition?: number;
+    /** Date display format, Default: DD/MM/YYYY , [Supported formats](https://day.js.org/docs/en/display/format) */
+    format?: string;
+    /** Override format for editable input */
+    formatEditable?: string;
+    /** Control Popup Open state */
+    open?: boolean;
+    /** Start Of Week */
+    startOfWeek?: CalendarWeekNames;
+    /** Define active month to override month selected with value */
+    activeMonth?: Date;
+    /** Include leading days from the previous month */
+    showLastMonth?: boolean;
+    /** Include trailing days from the next month */
+    showNextMonth?: boolean;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Show slected */
+    showSelected?: boolean;
+    /** Show Today  */
+    showToday?: boolean;
+    /** Set today manually  */
+    today?: Date;
+    /** Minimum allowed date, rest of the dates will be disabled  */
+    minDate?: Date;
+    /** Maxium allowed date, rest of the dates will be disabled  */
+    maxDate?: Date;
+    /** Exclude Dates, these dates will be disabled */
+    excludeDates?: Date[];
+    /** Include Dates, rest of the dates will be disabled  */
+    includeDates?: Date[];
+    /** Timezone string (e.g., "America/New_York"). */
+    timezone?: string;
+    /** Whether to return the time in UTC. If true, overrides timezone. */
+    utc?: boolean;
+    /** calendarDateChipProps: CalendarDateChip component props */
+    calendarDateChipProps?: Partial<CalendarDateChipProps>;
+    /** Custom Calendar Chip Content */
+    customCalendarDateChipContent?: (dayOfMonth: DateOfMonth) => Snippet;
+    /** Custom Calendar Chip */
+    customCalendarDateChip?: (dayOfMonth: DateOfMonth) => Snippet;
+    /** Custom Calendar Week Content */
+    customCalendarWeekContent?: (week: CalendarWeekOption) => Snippet;
+    /** Custom Calendar Week */
+    customCalendarWeek?: (week: CalendarWeekOption) => Snippet;
+    /** Weekend days */
+    weekendDays?: CalendarWeekNames[];
+    /** Color Weekend days */
+    weekendDaysColorDays?: boolean;
+    /** Show Calendar Controls */
+    showCalendarControls?: boolean;
+    /** Custom Calendar Controls */
+    customCalendarControls?: () => Snippet;
+    /** Show Month Selector */
+    showCalendarMonthSelector?: boolean;
+    /** Show Year Selector */
+    showCalendarYearSelector?: boolean;
+    /** Show Navigator */
+    showCalendarNavigator?: boolean;
+    /** Month Selector Props */
+    calendarMonthSelectorProps?: Partial<CalendarMonthSelectorProps>;
+    /** Custom MonthSelector */
+    customCalendarMonthSelector?: (option: CalendarMonthOption) => Snippet;
+    /** Custom MonthSelector Content */
+    customCalendarMonthSelectorContent?: (option: CalendarMonthOption) => Snippet;
+    /** Month Selector Click */
+    onMonthSelectorClick?: (option: CalendarMonthOption, e: ButtonClickEvent) => void;
+    /** Year Selector Props */
+    calendarYearSelectorProps?: Partial<CalendarYearSelectorProps>;
+    /** Custom YearSelector */
+    customCalendarYearSelector?: (selectedYear: string) => Snippet;
+    /** Custom YearSelector Content */
+    customCalendarYearSelectorContent?: (selectedYear: string) => Snippet;
+    /** Year Selector Click */
+    onYearSelectorClick?: (selectedYear: string, e: ButtonClickEvent) => void;
+    /** Calendar Navigation Props */
+    calendarNavigationProps?: Partial<CalendarYearSelectorProps>;
+    /** Navigation Next */
+    onCalendarNavigationNextClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Navigation Previous */
+    onCalendarNavigationPrevClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Custom YearSelector */
+    customCalendarNavigation?: () => Snippet;
+    /** Custom NavigationNext */
+    customCalendarNavigationNext?: () => Snippet;
+    /** Custom NavigationPrev */
+    customCalendarNavigationPrev?: () => Snippet;
+    /** Custom NavigationNext Content */
+    customCalendarNavigationNextContent?: () => Snippet;
+    /** Custom NavigationPrev Content */
+    customCalendarNavigationPrevContent?: () => Snippet;
+    /** Next disabled state */
+    disabledCalendarNavigationNext?: boolean;
+    /** Prev disabled state */
+    disabledCalendarNavigationPrev?: boolean;
+    /** Calendar Month select */
+    onselectMonth?: (value: CalendarMonthNames, e: ButtonClickEvent) => void;
+    /** Calendar Month cancel */
+    oncancelMonth?: (e: ButtonClickEvent) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarMonthChipContent?: (value: CalendarMonthNames) => Snippet;
+    /** Custom Calendar Chip */
+    customCalendarMonthChip?: (value: CalendarMonthNames) => Snippet;
+    /** disabled Months */
+    disabledMonths?: CalendarMonthNames[];
+    /** calendarMonthChipProps: calendarMonthChip component props */
+    calendarMonthChipProps?: Partial<CalendarMonthChipProps>;
+    /** show month list controls */
+    showControlsMonthList?: boolean;
+    /** calendarYearChipProps: calendarYearChip component props */
+    calendarYearChipProps?: Partial<CalendarYearChipProps>;
+    /** Calendar Year select */
+    onselectYear?: (value: string, e: ButtonClickEvent) => void;
+    /** Calendar Year cancel */
+    oncancelYear?: (e: ButtonClickEvent) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarYearChipContent?: (value: string) => Snippet;
+    /** Custom Calendar Chip */
+    customCalendarYearChip?: (value: string) => Snippet;
+    /** show Year list controls */
+    showControlsYearList?: boolean;
+    /** calendarProps: calendar component props */
+    calendarProps?: Partial<CalendarProps>;
+    /** calendar Top Content*/
+    calendarTopContent?: (activeSection: CalendarActiveSection) => Snippet;
+    /** calendar Bottom Content*/
+    calendarBottomContent?: (activeSection: CalendarActiveSection) => Snippet;
+}
+import { type CalendarDateChipProps, type CalendarMonthChipProps, type CalendarMonthNames, type CalendarMonthOption, type CalendarMonthSelectorProps, type CalendarWeekNames, type CalendarWeekOption, type CalendarYearChipProps, type CalendarYearSelectorProps, type ComponentColor, type DateOfMonth, type PaperProps, type PopperProps, type PositionX, type PositionY } from '../../../../index.js';
+import type { ButtonClickEvent } from '../Button/Button.svelte';
+import { type CalendarActiveSection, type CalendarProps } from '../../Info/Calendar/Calendar.svelte';
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "ref" | "open">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/stories/components/Form/DatePicker/Datepicker.stories.svelte

@@ -0,0 +1,86 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DatePicker from './DatePicker.svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentSizeArray } from '../../../../types/size.js';
+import { componentColorArray } from '../../../../types/colors.js';
+import Icon from '@iconify/svelte';
+export const storyDatePickerArgTypes = {
+    roundness: {
+        control: { type: 'select' },
+        options: componentRoundnessArray,
+    },
+    size: {
+        control: { type: 'select' },
+        options: componentSizeArray,
+    },
+    color: {
+        control: { type: 'select' },
+        options: componentColorArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+let value = $state(new Date());
+</script>
+
+<!-- DatePicker with default style -->
+<Story name="Default" asChild>
+  <DatePicker {value} onselect={(val: Date) => (value = val)} />
+</Story>
+
+<!-- [Supported formats](https://day.js.org/docs/en/display/format) -->
+<Story name="FormatDate" asChild>
+  <DatePicker {value} onselect={(val: Date) => (value = val)} format="MMM, DD YYYY" />
+</Story>
+
+<Story name="Editable" asChild>
+  <DatePicker {value} editable onselect={(val: Date) => (value = val)} placeholder="DD/MM/YYYY" />
+</Story>
+
+<Story name="EditableInDiffrentFormat" asChild>
+  <DatePicker
+    {value}
+    editable
+    onselect={(val: Date) => (value = val)}
+    placeholder="DD/MM/YYYY"
+    formatEditable="YYYY-MM-DD"
+  />
+</Story>
+
+<Story name="Clearable" asChild>
+  <DatePicker
+    {value}
+    clearable
+    onselect={(val: Date) => (value = val)}
+    onclear={() => (value = undefined)}
+    placeholder="DD/MM/YYYY"
+  />
+</Story>
+
+<Story name="Disabled" asChild>
+  <DatePicker {value} disabled />
+</Story>
+
+<Story name="OpenByDefault" asChild>
+  <DatePicker {value} open={true} />
+</Story>
+
+<Story name="Custom calender icon" asChild>
+  <DatePicker {value}>
+    {#snippet customCalendarIcon()}
+      <Icon icon="mingcute:calendar-3-line" width="24" height="24" />
+    {/snippet}
+  </DatePicker>
+</Story>

package/dist/stories/components/Form/DatePicker/Datepicker.stories.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyDatePickerArgTypes: StoryBookArgTypes;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Datepicker: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Datepicker = InstanceType<typeof Datepicker>;
+export default Datepicker;

package/dist/stories/components/Form/DatePicker/Datepicker.svelte

@@ -0,0 +1,306 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
+import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
+import Icon from '@iconify/svelte';
+import { createDateOfMonth, DynamicInput, getMoment, Popper, } from '../../../../index.js';
+import Calendar, {} from '../../Info/Calendar/Calendar.svelte';
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, editable = false, clearable = false, onclear, customInputContent: customInputContentInternal, customPopupContent: customPopupContentInternal, customCalendarIcon: customCalendarIconInternal, paperProps, popperProps, calendarIconPosition = 'after', popupPositionX, popupPositionY, lockPoistions, popperHeightForVerticalPosition, color, format = 'DD/MM/YYYY', formatEditable: formatEditableRaw, open = $bindable(false), startOfWeek = 'sun', timezone, utc, calendarDateChipProps, activeMonth, showSelected, showLastMonth, showNextMonth, showToday, today, minDate, maxDate, excludeDates, includeDates, customCalendarDateChipContent, customCalendarDateChip, customCalendarWeekContent, customCalendarWeek, weekendDays, weekendDaysColorDays, customCalendarControls, showCalendarControls, calendarMonthSelectorProps, customCalendarMonthSelector, customCalendarMonthSelectorContent, onMonthSelectorClick, calendarYearSelectorProps, customCalendarYearSelector, customCalendarYearSelectorContent, onYearSelectorClick, calendarNavigationProps, customCalendarNavigation, customCalendarNavigationNext, customCalendarNavigationPrev, customCalendarNavigationNextContent, customCalendarNavigationPrevContent, onCalendarNavigationNextClick, onCalendarNavigationPrevClick, disabledCalendarNavigationNext, disabledCalendarNavigationPrev, showCalendarMonthSelector, showCalendarYearSelector, showCalendarNavigator, onselectMonth, customCalendarMonthChipContent, customCalendarMonthChip, disabledMonths, calendarMonthChipProps, calendarYearChipProps, onselectYear, customCalendarYearChipContent, customCalendarYearChip, oncancelMonth, oncancelYear, showControlsMonthList, showControlsYearList, calendarProps, calendarTopContent, calendarBottomContent, } = $props();
+const formatEditable = $derived(formatEditableRaw || format);
+let searchText = $derived(value ? getMoment(value, undefined, { timezone, utc }).format(format) : '');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customInputContentTyped = customInputContentInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customPopupContentTyped = customPopupContentInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customCalendarIconTyped = customCalendarIconInternal;
+const calenderSize = calendarProps?.size || size;
+let popupWidth = $state(`calc(var(--dodo-ui-element-height-normal) * 7 + var(--dodo-ui-space) * 2)`);
+if (calenderSize === 'normal') {
+    popupWidth = `calc(var(--dodo-ui-element-height-normal) * 7 + var(--dodo-ui-space) * 2)`;
+}
+else if (calenderSize === 'small') {
+    popupWidth = `calc(var(--dodo-ui-element-height-small) * 7 + var(--dodo-ui-space) * 2)`;
+}
+else if (calenderSize === 'large') {
+    popupWidth = `calc(var(--dodo-ui-element-height-large) * 7 + var(--dodo-ui-space) * 2)`;
+}
+function closePopup() {
+    open = false;
+    ref?.blur();
+}
+function openPopup() {
+    open = true;
+}
+function onfocusMod(e) {
+    openPopup();
+    if (editable) {
+        searchText = getMoment(searchText, format, { timezone, utc }).format(formatEditable);
+    }
+    if (onfocus) {
+        onfocus(e);
+    }
+}
+function onblurMod(e) {
+    if (editable) {
+        const searchTextrToMoment = getMoment(searchText, formatEditable, { timezone, utc });
+        if (searchTextrToMoment.isValid()) {
+            const searchTextrToDate = searchTextrToMoment.toDate();
+            const dayOfMonth = createDateOfMonth(searchTextrToDate, {
+                startOfWeek,
+                showLastMonth,
+                showNextMonth,
+                today,
+                minDate,
+                maxDate,
+                excludeDates,
+                includeDates,
+                timezone,
+                utc,
+            }, 'currentMonth');
+            searchText = searchTextrToMoment.format(format);
+            onselectMod(searchTextrToDate, dayOfMonth, e);
+        }
+        else {
+            searchText = value ? getMoment(value, undefined, { timezone, utc }).format(format) : '';
+        }
+    }
+    if (onblur) {
+        onblur(e);
+    }
+}
+function onClickOutside() {
+    closePopup();
+}
+function onselectMod(val, dayOfMonth, e) {
+    closePopup();
+    if (onselect) {
+        onselect(val, dayOfMonth, e);
+    }
+}
+function oninputMod(e) {
+    const target = e.target;
+    searchText = target.value;
+    if (oninput) {
+        oninput(e);
+    }
+}
+function onclearMod(e) {
+    closePopup();
+    if (onclear) {
+        onclear(e);
+    }
+}
+</script>
+
+{#snippet datePickerCalendarIcon()}
+  <UtilityButton {size} title="Dropdown" onclick={onfocusMod}>
+    {#if customCalendarIconTyped}
+      {@render customCalendarIconTyped(open)}
+    {:else if size === 'small'}
+      <Icon icon="ic:baseline-calendar-month" width="19" height="19" />
+    {:else}
+      <Icon icon="ic:baseline-calendar-month" width="24" height="24" />
+    {/if}
+  </UtilityButton>
+{/snippet}
+
+<div class={['dodo-ui-DatePicker', className].join(' ')}>
+  <Popper
+    {open}
+    fullWidth
+    {popupWidth}
+    {onClickOutside}
+    {...popperProps}
+    {popupPositionX}
+    {popupPositionY}
+    {paperProps}
+    {lockPoistions}
+    {popperHeightForVerticalPosition}
+    popupMaxHeight="800px"
+  >
+    <div
+      class:outline
+      class:disabled
+      class:error
+      class={[
+        'DatePicker',
+        `size--${size}`,
+        `${open ? 'focused' : ''}`,
+        `roundness--${roundness}`,
+        className,
+      ].join(' ')}
+    >
+      <InputEnclosure
+        {outline}
+        {disabled}
+        {error}
+        focused={open}
+        {size}
+        {roundness}
+        {before}
+        {after}
+      >
+        {#if calendarIconPosition === 'before'}
+          <div class:before class:open class="Calendar">
+            {@render datePickerCalendarIcon()}
+          </div>
+        {/if}
+
+        <DynamicInput
+          type="text"
+          {name}
+          {id}
+          {disabled}
+          bind:ref
+          oninput={oninputMod}
+          {onchange}
+          onfocus={onfocusMod}
+          onblur={onblurMod}
+          {onpaste}
+          {oncopy}
+          {oncut}
+          {onkeydown}
+          {onkeypress}
+          {onkeyup}
+          {placeholder}
+          value={editable
+            ? searchText
+            : getMoment(value, undefined, { timezone, utc }).format(format)}
+          {readonly}
+          variant={editable ? 'input' : 'button'}
+        >
+          {#snippet customInputContent()}
+            {#if customInputContentTyped}
+              {@render customInputContentTyped(value)}
+            {:else if value}
+              {getMoment(value, undefined, { timezone, utc }).format(format)}
+            {:else}
+              {placeholder}
+            {/if}
+          {/snippet}
+        </DynamicInput>
+
+        {#if value && clearable && !disabled}
+          <div class:after class="DatePickerClear">
+            <UtilityButton {size} title="Clear" onclick={onclearMod}>
+              <Icon icon="material-symbols:close-small" width="24" height="24" />
+            </UtilityButton>
+          </div>
+        {/if}
+
+        {#if calendarIconPosition === 'after'}
+          <div class:after class:open class="Calendar">
+            {@render datePickerCalendarIcon()}
+          </div>
+        {/if}
+      </InputEnclosure>
+    </div>
+
+    {#snippet popupChildren()}
+      {#if customPopupContentTyped}
+        {@render customPopupContentTyped()}
+      {:else}
+        <div class="CalendarContainer">
+          <Calendar
+            {value}
+            size={calenderSize}
+            {color}
+            {startOfWeek}
+            {timezone}
+            {utc}
+            {calendarDateChipProps}
+            {activeMonth}
+            {showSelected}
+            {showLastMonth}
+            {showNextMonth}
+            {showToday}
+            {today}
+            {minDate}
+            {maxDate}
+            {excludeDates}
+            {includeDates}
+            {customCalendarDateChipContent}
+            {customCalendarDateChip}
+            {customCalendarWeekContent}
+            {customCalendarWeek}
+            {weekendDays}
+            {weekendDaysColorDays}
+            {customCalendarControls}
+            {showCalendarControls}
+            {calendarMonthSelectorProps}
+            {customCalendarMonthSelector}
+            {customCalendarMonthSelectorContent}
+            {onMonthSelectorClick}
+            {calendarYearSelectorProps}
+            {customCalendarYearSelector}
+            {customCalendarYearSelectorContent}
+            {onYearSelectorClick}
+            {calendarNavigationProps}
+            {customCalendarNavigation}
+            {customCalendarNavigationNext}
+            {customCalendarNavigationPrev}
+            {customCalendarNavigationNextContent}
+            {customCalendarNavigationPrevContent}
+            {onCalendarNavigationNextClick}
+            {onCalendarNavigationPrevClick}
+            {disabledCalendarNavigationNext}
+            {disabledCalendarNavigationPrev}
+            {showCalendarMonthSelector}
+            {showCalendarYearSelector}
+            {showCalendarNavigator}
+            {onselectMonth}
+            {customCalendarMonthChipContent}
+            {customCalendarMonthChip}
+            {disabledMonths}
+            {calendarMonthChipProps}
+            {calendarYearChipProps}
+            {onselectYear}
+            {customCalendarYearChipContent}
+            {customCalendarYearChip}
+            {oncancelMonth}
+            {oncancelYear}
+            {showControlsMonthList}
+            {showControlsYearList}
+            onselect={onselectMod}
+            {calendarTopContent}
+            {calendarBottomContent}
+            {...calendarProps}
+          />
+        </div>
+      {/if}
+    {/snippet}
+  </Popper>
+</div>
+
+<style>.dodo-ui-DatePicker .DatePicker.size--normal .DatePickerClear.after {
+  margin-right: calc(var(--dodo-ui-space-small) * 2);
+}
+.dodo-ui-DatePicker .DatePicker.size--normal .Calendar.after {
+  margin-right: calc(var(--dodo-ui-space-small) * 2);
+}
+.dodo-ui-DatePicker .DatePicker.size--normal .Calendar.before {
+  margin-right: calc(var(--dodo-ui-space-small) * 2);
+}
+.dodo-ui-DatePicker .DatePicker.size--small .DatePickerClear.after {
+  margin-right: var(--dodo-ui-space);
+}
+.dodo-ui-DatePicker .DatePicker.size--small .Calendar.after {
+  margin-right: var(--dodo-ui-space);
+}
+.dodo-ui-DatePicker .DatePicker.size--small .Calendar.before {
+  margin-right: var(--dodo-ui-space);
+}
+.dodo-ui-DatePicker .DatePicker.size--large .DatePickerClear.after {
+  margin-right: calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-DatePicker .DatePicker.size--large .Calendar.after {
+  margin-right: calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-DatePicker .DatePicker.size--large .Calendar.before {
+  margin-right: calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-DatePicker .CalendarContainer {
+  padding: var(--dodo-ui-space);
+}</style>