@skedulo/sked-ui 19.11.1 → 19.12.2

package/dist/components/calendar-controls/CalendarControls-utils.d.ts

@@ -1,5 +1,5 @@
+import { RangeType } from './elements/RangePicker';
 export declare type DateDirection = 'forward' | 'backward';
-export declare type RangeType = 'day' | '3-days' | '2-weeks' | 'week' | 'month';
 export declare const moveDate: (selected: Date, days: RangeType, direction: DateDirection) => Date;
 export declare const endOfPeriod: (selected: Date, selectedRange: RangeType) => Date;
 export declare const formatLongDate: (date: Date) => string;

package/dist/components/calendar-controls/CalendarControls.d.ts

@@ -1,55 +1,29 @@
 import * as React from 'react';
-import { RangeType as Range } from './CalendarControls-utils';
-export declare type RangeType = Range;
-declare type SelectDateHandler = (date: Date) => void;
-interface IRangeProps {
-    selectedRange?: RangeType;
-    onRangeChange?: (range: RangeType) => void;
-    rangeOptions?: RangeType[];
-    selected?: Date;
-}
-export interface ICalendarControlProps extends React.HTMLAttributes<HTMLDivElement> {
+import { IDateSelectorProps } from './elements/DateSelector';
+import { INavigationButtonProps } from './elements/NavigationButtons';
+import { IRangeProps, RangePicker, RangeType } from './elements/RangePicker';
+export interface IBaseCalendarControlProps {
     /**
-     * The current focus date for the Calendar. If a range is provided this is the start of the range to render
-     */
-    selected: Date;
-    /**
-     * When a new range has been provided, this callback is triggered
+     * The current range to display. This will update the current range dropdown and the date range displayed
      */
-    onRangeChange?: (range: RangeType) => void;
+    selectedRange?: RangeType;
     /**
-     * Whenever the date is changed, either through direct select, clicking to or navigating, the new date is provided to this function
+     * The current focus date for the Calendar. If a range is provided this is the start of the range to render
      */
-    onDateSelect?: SelectDateHandler;
+    selected?: Date;
+}
+export interface ICalendarControlProps extends React.HTMLAttributes<HTMLDivElement>, IDateSelectorProps, INavigationButtonProps, IRangeProps {
     /**
      * Whenever the user clicks the `Today` button this callback is triggered
      */
     onTodayClick?: () => void;
-    /**
-     * The callback handler when a Day in the datepicker dropdown is hovered
-     */
-    onDayMouseEnter?: SelectDateHandler;
-    /**
-     * The callback handler for when the mouse leaves the datepicker dropdown
-     */
-    onMonthMouseLeave?: () => void;
-    /**
-     * A day of a week to highlight. It will highlight from Sunday to Saturday of the weeks selected based on rangeOptions
-     */
-    highlightWeek?: Date;
-    /**
-     * Highlight the entire week of the currently selected date, from Sunday to Saturday based on rangeOptions
-     */
-    selectWeek?: boolean;
-    /**
-     * The current range to display. This will update the current range dropdown and the date range displayed
-     */
-    selectedRange?: RangeType;
-    /**
-     * The list of options that can be chosen from. Current range options are 'day', '3-days', 'week' and 'month'
-     */
-    rangeOptions?: RangeType[];
 }
-export declare const RangePicker: React.FC<IRangeProps>;
-export declare const CalendarControls: ({ selected, onDateSelect, onTodayClick, onDayMouseEnter, onMonthMouseLeave, highlightWeek, selectWeek, selectedRange, onRangeChange, rangeOptions, className, ...rest }: ICalendarControlProps) => JSX.Element;
-export {};
+export declare function useCalendarControlsContext(): ICalendarControlProps;
+declare function CalendarControls(props: ICalendarControlProps): JSX.Element;
+declare namespace CalendarControls {
+    var TodayButton: React.FC<import("./elements/TodayButton").ITodayButtonProps>;
+    var NavigationButtons: React.FC<INavigationButtonProps>;
+    var DateSelector: React.FC<IDateSelectorProps>;
+    var RangePicker: React.FC<IRangeProps>;
+}
+export { CalendarControls, RangePicker, RangeType };

package/dist/components/calendar-controls/elements/DateSelector.d.ts

@@ -0,0 +1,33 @@
+import React, { HTMLAttributes } from 'react';
+import { ButtonTypes } from '../../..';
+import { IBaseCalendarControlProps } from '../CalendarControls';
+export declare type SelectDateHandler = (date: Date) => void;
+export interface IBaseDateSelectorProps extends IBaseCalendarControlProps {
+    /**
+     * Whenever the date is changed, either through direct select, clicking to or navigating, the new date is provided to this function
+     */
+    onDateSelect?: SelectDateHandler;
+}
+export interface IDateSelectorProps extends IBaseDateSelectorProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * The callback handler when a Day in the datepicker dropdown is hovered
+     */
+    onDayMouseEnter?: SelectDateHandler;
+    /**
+     * The callback handler for when the mouse leaves the datepicker dropdown
+     */
+    onMonthMouseLeave?: () => void;
+    /**
+     * A day of a week to highlight. It will highlight from Sunday to Saturday of the weeks selected based on rangeOptions
+     */
+    highlightWeek?: Date;
+    /**
+     * Highlight the entire week of the currently selected date, from Sunday to Saturday based on rangeOptions
+     */
+    selectWeek?: boolean;
+    /**
+     * The type of Datepicker custom input button to be displayed. Primary | Secondary | Transparent
+     */
+    buttonType?: ButtonTypes;
+}
+export declare const DateSelector: React.FC<IDateSelectorProps>;

package/dist/components/calendar-controls/elements/NavigationButtons.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IBaseDateSelectorProps } from './DateSelector';
+export interface INavigationButtonProps extends IBaseDateSelectorProps {
+}
+export declare const NavigationButtons: React.FC<INavigationButtonProps>;

package/dist/components/calendar-controls/elements/RangePicker.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IBaseCalendarControlProps } from '../CalendarControls';
+export interface IRangeProps extends IBaseCalendarControlProps {
+    /**
+     * When a new range has been provided, this callback is triggered
+     */
+    onRangeChange?: (range: RangeType) => void;
+    /**
+     * The list of options that can be chosen from. Current range options are 'day', '3-days', 'week' and 'month'
+     */
+    rangeOptions?: RangeType[];
+}
+export declare type RangeType = 'day' | '3-days' | '2-weeks' | 'week' | 'month';
+export declare const dateRangeLabel: {
+    day: string;
+    '3-days': string;
+    week: string;
+    '2-weeks': string;
+    month: string;
+};
+export declare const RangePicker: React.FC<IRangeProps>;

package/dist/components/calendar-controls/elements/TodayButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface ITodayButtonProps {
+    onClick?: () => void;
+}
+export declare const TodayButton: React.FC<ITodayButtonProps>;

package/dist/components/datepicker/Datepicker.d.ts

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import { ReactDatePickerProps } from 'react-datepicker';
-import { RangeType } from '../calendar-controls/CalendarControls';
+import { RangeType } from '../calendar-controls/elements/RangePicker';
 export declare type LocaleType = 'AU' | 'US' | 'UK';
-export interface CustomInput extends React.PureComponent {
-    value: Date;
-    onClick: React.MouseEventHandler;
-}
 export interface DatepickerProps {
     /**
      * The currently selected date.
@@ -111,11 +107,13 @@ export interface DatepickerProps {
 declare type CustomInputType = React.InputHTMLAttributes<HTMLInputElement> & {
     onBlurCustom: () => void;
     openCalendar: (open: boolean) => void;
+    onBackspace: () => void;
     Component: (props: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>) => JSX.Element;
 };
 export declare const CustomInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
     onBlurCustom: () => void;
     openCalendar: (open: boolean) => void;
+    onBackspace: () => void;
     Component: (props: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>) => JSX.Element;
 } & React.RefAttributes<HTMLInputElement>>;
 export declare const Datepicker: React.FC<DatepickerProps>;