@skedulo/sked-ui 19.12.1 → 19.12.2

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

@@ -2,10 +2,6 @@ import * as React from 'react';
 import { ReactDatePickerProps } from 'react-datepicker';
 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>;

package/dist/index.js

@@ -17592,15 +17592,14 @@ var DefaultInput = react__WEBPACK_IMPORTED_MODULE_4__["forwardRef"](function (_r
 var CustomInput = react__WEBPACK_IMPORTED_MODULE_4__["forwardRef"](function (_ref2, ref) {
   var openCalendar = _ref2.openCalendar,
       onBlurCustom = _ref2.onBlurCustom,
+      onBackspace = _ref2.onBackspace,
       Component = _ref2.Component,
       keyDownOriginal = _ref2.onKeyDown,
       onBlur = _ref2.onBlur,
-      rest = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_3___default()(_ref2, ["openCalendar", "onBlurCustom", "Component", "onKeyDown", "onBlur"]);
+      rest = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_3___default()(_ref2, ["openCalendar", "onBlurCustom", "onBackspace", "Component", "onKeyDown", "onBlur"]);
 
   var onKeyDown = function onKeyDown(event) {
-    var key = event.key;
-
-    switch (key) {
+    switch (event.key) {
       case 'Enter':
       case 'Escape':
         openCalendar(false);
@@ -17609,6 +17608,10 @@ var CustomInput = react__WEBPACK_IMPORTED_MODULE_4__["forwardRef"](function (_re
       case 'ArrowDown':
         openCalendar(true);
         break;
+
+      case 'Backspace':
+        onBackspace();
+        break;
     }
 
     return keyDownOriginal(event);
@@ -17711,15 +17714,21 @@ var Datepicker = function Datepicker(_ref3) {
     setInputDateValue(formatDateValue(selected));
   }, [selected === null || selected === void 0 ? void 0 : selected.valueOf()]);
 
-  var setChange = function setChange(event) {
+  var handleOnBackspace = function handleOnBackspace() {
+    if (date && clearable) {
+      setInputDateValue(''); // if the date value is cleared, set the date to be null
+
+      setDate(null);
+    }
+  };
+
+  var setDateOnChangeRaw = function setDateOnChangeRaw(event) {
     var _event$target;
 
-    var dateValue = (event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value) || '';
-    setInputDateValue(dateValue);
-    calendarRef.current.setOpen(true); // if the date value is cleared, set the date to be null
+    var dateValue = event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value;
 
-    if (dateValue === '' && date && clearable) {
-      setDate(null);
+    if (dateValue !== undefined) {
+      setInputDateValue(dateValue);
     }
   };
 
@@ -17746,13 +17755,14 @@ var Datepicker = function Datepicker(_ref3) {
   }, react__WEBPACK_IMPORTED_MODULE_4__["createElement"](react_datepicker__WEBPACK_IMPORTED_MODULE_5___default.a, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_2___default()({
     value: inputDateValue,
     selected: date,
-    onChangeRaw: setChange,
+    onChangeRaw: setDateOnChangeRaw,
     onChange: setDateOnChange,
     nextMonthButtonLabel: "",
     previousMonthButtonLabel: "",
     customInput: react__WEBPACK_IMPORTED_MODULE_4__["createElement"](CustomInput, {
       openCalendar: setCalendarVisibleState,
       onBlurCustom: callOnChangeFunctions,
+      onBackspace: handleOnBackspace,
       Component: customInput || DefaultInput
     }),
     ref: calendarRef,

package/package.json

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