@skedulo/sked-ui 19.19.1 → 19.21.0

package/dist/components/buttons/icon-button/IconButton.d.ts

@@ -6,6 +6,7 @@ interface IconButtonProps {
     icon: IconNames;
     tooltipContent: ITooltipProps['content'];
     tooltipDelay?: ITooltipProps['delayShow'];
+    disableTooltip?: boolean;
 }
 export declare type IIconButton = IconButtonProps & Partial<IButtonProps>;
 export declare const IconButton: React.FC<IIconButton>;

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

@@ -13,7 +13,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, INavigationButtonProps, IRangeProps {
     /**
      * Whenever the user clicks the `Today` button this callback is triggered
      */
@@ -23,7 +23,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: INavigationButtonProps) => 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,5 @@
-import React from 'react';
 import { IBaseDateSelectorProps } from './DateSelector';
 export interface INavigationButtonProps extends IBaseDateSelectorProps {
+    hideTooltipIfDisabled?: boolean;
 }
-export declare const NavigationButtons: React.FC<INavigationButtonProps>;
+export declare const NavigationButtons: (props: INavigationButtonProps) => JSX.Element;

package/dist/index.js

@@ -14344,17 +14344,24 @@ var IconButton = function IconButton(_ref) {
       buttonType = _ref.buttonType,
       className = _ref.className,
       tooltipDelay = _ref.tooltipDelay,
-      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref, ["icon", "tooltipContent", "buttonType", "className", "tooltipDelay"]);
+      disableTooltip = _ref.disableTooltip,
+      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref, ["icon", "tooltipContent", "buttonType", "className", "tooltipDelay", "disableTooltip"]);
+
+  var button = react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_button_Button__WEBPACK_IMPORTED_MODULE_5__["Button"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
+    buttonType: buttonType || 'transparent',
+    className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sked-button--icon-only', className),
+    icon: icon
+  }, otherProps));
+
+  if (disableTooltip) {
+    return button;
+  }
 
   return react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_popups_tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_4__["Tooltip"], {
     content: tooltipContent,
     position: "top",
     delayShow: tooltipDelay
-  }, react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_button_Button__WEBPACK_IMPORTED_MODULE_5__["Button"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-    buttonType: buttonType || 'transparent',
-    className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sked-button--icon-only', className),
-    icon: icon
-  }, otherProps)));
+  }, button);
 };
 
 /***/ }),
@@ -14495,7 +14502,7 @@ function CalendarControls(props) {
       children = props.children,
       rest = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(props, ["selected", "onDateSelect", "onTodayClick", "onDayMouseEnter", "onMonthMouseLeave", "highlightWeek", "selectWeek", "validation", "selectedRange", "onRangeChange", "rangeOptions", "className", "children"]);
 
-  var classNames = classnames__WEBPACK_IMPORTED_MODULE_3___default()('sked-calendar-controls sk-flex sk-w-full sk-items-center', className);
+  var classNames = classnames__WEBPACK_IMPORTED_MODULE_3___default()('sked-calendar-controls sk-flex sk-items-center', className);
   var value = react__WEBPACK_IMPORTED_MODULE_2__["useMemo"](function () {
     return props;
   }, [selected, onDateSelect, onTodayClick, onDayMouseEnter, onMonthMouseLeave, highlightWeek, selectWeek, validation, selectedRange, onRangeChange, rangeOptions, className, children]);
@@ -14560,7 +14567,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 +14586,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 +14637,9 @@ var DateSelector = function DateSelector(props) {
     selectedRange: selectedRange,
     onClickOutside: toggleExpanded,
     clearable: false,
-    onCalendarClose: toggleExpanded
+    onCalendarClose: toggleExpanded,
+    minDate: minDate,
+    maxDate: maxDate
   });
 };
 
@@ -14675,10 +14688,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 +17453,11 @@ 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,
+      _calendarControlProps3 = _calendarControlProps.hideTooltipIfDisabled,
+      hideTooltipIfDisabled = _calendarControlProps3 === void 0 ? false : _calendarControlProps3;
 
   var backwardsHandler = function backwardsHandler() {
     return onDateSelect(Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_4__["moveDate"])(selected, selectedRange, 'backward'));
@@ -17448,6 +17467,8 @@ var NavigationButtons = function NavigationButtons(props) {
     return onDateSelect(Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_4__["moveDate"])(selected, selectedRange, 'forward'));
   };
 
+  var isBackwardsDisabled = minDate && selected <= minDate;
+  var isForwardsDisabled = maxDate && selected >= maxDate;
   var previousTooltip = Object(lodash__WEBPACK_IMPORTED_MODULE_1__["capitalize"])("Previous ".concat(_RangePicker__WEBPACK_IMPORTED_MODULE_5__["dateRangeLabel"][selectedRange]));
   var nextTooltip = Object(lodash__WEBPACK_IMPORTED_MODULE_1__["capitalize"])("Next ".concat(_RangePicker__WEBPACK_IMPORTED_MODULE_5__["dateRangeLabel"][selectedRange]));
   return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", {
@@ -17457,14 +17478,18 @@ var NavigationButtons = function NavigationButtons(props) {
     icon: "chevronLeft",
     "data-sk-name": "navigate-backwards",
     onClick: backwardsHandler,
+    disabled: isBackwardsDisabled,
     compact: true,
+    disableTooltip: hideTooltipIfDisabled && isBackwardsDisabled,
     tooltipContent: previousTooltip
   }), react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(___WEBPACK_IMPORTED_MODULE_3__["IconButton"], {
     className: "sk-inline-flex",
     icon: "chevronRight",
     "data-sk-name": "navigate-forwards",
     onClick: forwardsHandler,
+    disabled: isForwardsDisabled,
     compact: true,
+    disableTooltip: hideTooltipIfDisabled && isForwardsDisabled,
     tooltipContent: nextTooltip
   }));
 };

package/package.json

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