@skedulo/sked-ui 19.19.2 → 19.20.0

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

@@ -1,6 +1,7 @@
 import { RangeType } from './elements/RangePicker';
 export declare type DateDirection = 'forward' | 'backward';
+export declare type DateFormat = 'MonthDayYear' | 'DayMonthYear';
 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;
-export declare const formatShortDate: (date: Date) => string;
+export declare const formatLongDate: (date: Date, dateFormat?: DateFormat) => string;
+export declare const formatShortDate: (date: Date, dateFormat?: DateFormat) => string;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { IDateSelectorProps } from './elements/DateSelector';
-import { INavigationButtonProps } from './elements/NavigationButtons';
 import { IRangeProps, RangePicker, RangeType } from './elements/RangePicker';
 import { ValidationProps } from '../forms/elements/FormElements';
 export interface IBaseCalendarControlProps extends ValidationProps {
@@ -13,7 +12,7 @@ export interface IBaseCalendarControlProps extends ValidationProps {
      */
     selected?: Date;
 }
-export interface ICalendarControlProps extends React.HTMLAttributes<HTMLDivElement>, IDateSelectorProps, INavigationButtonProps, IRangeProps {
+export interface ICalendarControlProps extends React.HTMLAttributes<HTMLDivElement>, IBaseCalendarControlProps, IDateSelectorProps, IRangeProps {
     /**
      * Whenever the user clicks the `Today` button this callback is triggered
      */
@@ -23,7 +22,7 @@ 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 NavigationButtons: (props: import("./elements/DateSelector").IBaseDateSelectorProps) => JSX.Element;
     var DateSelector: React.FC<IDateSelectorProps>;
     var RangePicker: React.FC<IRangeProps>;
 }

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

@@ -1,12 +1,22 @@
 import React, { HTMLAttributes } from 'react';
+import { ReactDatePickerProps } from 'react-datepicker';
 import { ButtonTypes } from '../../..';
 import { IBaseCalendarControlProps } from '../CalendarControls';
+import { DateFormat } from '../CalendarControls-utils';
 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;
+    /**
+     * Minimum date allowed to be selected. This will also affect the month navigation
+     */
+    minDate?: ReactDatePickerProps['minDate'];
+    /**
+     * Latest date allowed to be selected. This will also affect the month navigation
+     */
+    maxDate?: ReactDatePickerProps['maxDate'];
 }
 export interface IDateSelectorProps extends IBaseDateSelectorProps, HTMLAttributes<HTMLDivElement> {
     /**
@@ -29,5 +39,9 @@ export interface IDateSelectorProps extends IBaseDateSelectorProps, HTMLAttribut
      * The type of Datepicker custom input button to be displayed. Primary | Secondary | Transparent
      */
     buttonType?: ButtonTypes;
+    /**
+     * User preferred date format
+     */
+    dateFormat?: DateFormat;
 }
 export declare const DateSelector: React.FC<IDateSelectorProps>;

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

@@ -1,5 +1,2 @@
-import React from 'react';
 import { IBaseDateSelectorProps } from './DateSelector';
-export interface INavigationButtonProps extends IBaseDateSelectorProps {
-}
-export declare const NavigationButtons: React.FC<INavigationButtonProps>;
+export declare const NavigationButtons: (props: IBaseDateSelectorProps) => JSX.Element;

package/dist/index.js

@@ -14560,7 +14560,11 @@ var DateSelector = function DateSelector(props) {
       selected = _calendarControlProps.selected,
       _calendarControlProps3 = _calendarControlProps.buttonType,
       buttonType = _calendarControlProps3 === void 0 ? 'transparent' : _calendarControlProps3,
-      validation = _calendarControlProps.validation;
+      validation = _calendarControlProps.validation,
+      _calendarControlProps4 = _calendarControlProps.dateFormat,
+      dateFormat = _calendarControlProps4 === void 0 ? 'MonthDayYear' : _calendarControlProps4,
+      minDate = _calendarControlProps.minDate,
+      maxDate = _calendarControlProps.maxDate;
 
   var className = props.className;
 
@@ -14575,9 +14579,9 @@ var DateSelector = function DateSelector(props) {
 
   var startDate = selected !== null && selected !== void 0 ? selected : new Date();
   var endDate = Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["endOfPeriod"])(selected, selectedRange);
-  var formattedStartDate = startDate.getFullYear() === endDate.getFullYear() ? Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatShortDate"])(startDate) : Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatLongDate"])(startDate);
-  var formattedEndDate = Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatLongDate"])(endDate);
-  var formattedDate = selectedRange === 'day' ? Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatLongDate"])(selected) : "".concat(formattedStartDate, " - ").concat(formattedEndDate);
+  var formattedStartDate = startDate.getFullYear() === endDate.getFullYear() ? Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatShortDate"])(startDate, dateFormat) : Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatLongDate"])(startDate, dateFormat);
+  var formattedEndDate = Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatLongDate"])(endDate, dateFormat);
+  var formattedDate = selectedRange === 'day' ? Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatLongDate"])(selected, dateFormat) : "".concat(formattedStartDate, " - ").concat(formattedEndDate);
   var buttonClasses = className !== null && className !== void 0 ? className : 'hover:sk-bg-neutral-250 sk-text-base sk-mr-3 sk-text-neutral-850 sk-px-3 sk-py-1 sk-leading-normal sk-border-none';
 
   var onChange = function onChange(date) {
@@ -14626,7 +14630,9 @@ var DateSelector = function DateSelector(props) {
     selectedRange: selectedRange,
     onClickOutside: toggleExpanded,
     clearable: false,
-    onCalendarClose: toggleExpanded
+    onCalendarClose: toggleExpanded,
+    minDate: minDate,
+    maxDate: maxDate
   });
 };
 
@@ -14675,10 +14681,12 @@ var endOfPeriod = function endOfPeriod(selected, selectedRange) {
   return moveDate(nextPeriod, 'day', 'backward');
 };
 var formatLongDate = function formatLongDate(date) {
-  return Object(date_fns_format__WEBPACK_IMPORTED_MODULE_0__["default"])(date, 'MMM d, yyyy');
+  var dateFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'MonthDayYear';
+  return Object(date_fns_format__WEBPACK_IMPORTED_MODULE_0__["default"])(date, dateFormat === 'MonthDayYear' ? 'MMM d, yyyy' : 'd MMM, yyyy');
 };
 var formatShortDate = function formatShortDate(date) {
-  return Object(date_fns_format__WEBPACK_IMPORTED_MODULE_0__["default"])(date, 'MMM d');
+  var dateFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'MonthDayYear';
+  return Object(date_fns_format__WEBPACK_IMPORTED_MODULE_0__["default"])(date, dateFormat === 'MonthDayYear' ? 'MMM d' : 'd MMM');
 };
 
 /***/ }),
@@ -17438,7 +17446,9 @@ var NavigationButtons = function NavigationButtons(props) {
       _calendarControlProps2 = _calendarControlProps.selectedRange,
       selectedRange = _calendarControlProps2 === void 0 ? 'day' : _calendarControlProps2,
       onDateSelect = _calendarControlProps.onDateSelect,
-      selected = _calendarControlProps.selected;
+      selected = _calendarControlProps.selected,
+      minDate = _calendarControlProps.minDate,
+      maxDate = _calendarControlProps.maxDate;
 
   var backwardsHandler = function backwardsHandler() {
     return onDateSelect(Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_4__["moveDate"])(selected, selectedRange, 'backward'));
@@ -17457,6 +17467,7 @@ var NavigationButtons = function NavigationButtons(props) {
     icon: "chevronLeft",
     "data-sk-name": "navigate-backwards",
     onClick: backwardsHandler,
+    disabled: minDate && selected <= minDate,
     compact: true,
     tooltipContent: previousTooltip
   }), react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(___WEBPACK_IMPORTED_MODULE_3__["IconButton"], {
@@ -17464,6 +17475,7 @@ var NavigationButtons = function NavigationButtons(props) {
     icon: "chevronRight",
     "data-sk-name": "navigate-forwards",
     onClick: forwardsHandler,
+    disabled: maxDate && selected >= maxDate,
     compact: true,
     tooltipContent: nextTooltip
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skedulo/sked-ui",
-  "version": "19.19.2",
+  "version": "19.20.0",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",