@majoo-ui/react 1.54.18-rc.1 → 1.54.19

package/components/datePicker/InputDatePicker.d.ts

@@ -79,5 +79,9 @@ export interface InputDatePickerProps {
      * Invalid state input.
      */
     isInvalid?: boolean;
+    /**
+     * Allow DatePicker to reset selected date.
+     */
+    allowReset?: boolean;
 }
-export declare function InputDatePicker({ type, showRangeControl, rangePickerType, placeholder, size, disabled, onChange, defaultValue: defaultDateValue, value: dateValue, defaultDate, date, advanceView, placement, css, showTimePicker, minDate, maxDate, readOnly, isInvalid, }: InputDatePickerProps): JSX.Element;
+export declare function InputDatePicker({ type, showRangeControl, rangePickerType, placeholder, size, disabled, onChange, defaultValue: defaultDateValue, value: dateValue, defaultDate, date, advanceView, placement, css, showTimePicker, minDate, maxDate, readOnly, isInvalid, allowReset, }: InputDatePickerProps): JSX.Element;

package/components/datePicker/components/Calendar.d.ts

@@ -12,6 +12,7 @@ export interface CalendarProps extends RenderProps {
     onIsMultiDateChange?: (isMultiDate: boolean) => void;
     onUpdate?: () => void;
     onCancel: () => void;
+    onReset?: () => void;
     selected?: Date[];
     containerStyle?: CSS;
     disabled?: boolean;
@@ -19,6 +20,7 @@ export interface CalendarProps extends RenderProps {
     renderTimePicker?: () => React.ReactNode;
     minDate?: Date;
     maxDate?: Date;
+    allowReset?: boolean;
 }
-declare const CalendarBox: ({ calendars, getDateProps, advanceView, onCalendarDateChange, onIsMultiDateChange, onUpdate, onCancel, selected, containerStyle, disabled, showTimePicker, renderTimePicker, minDate, maxDate, }: CalendarProps) => JSX.Element | null;
+declare const CalendarBox: ({ calendars, getDateProps, advanceView, onCalendarDateChange, onIsMultiDateChange, onUpdate, onCancel, onReset, selected, containerStyle, disabled, showTimePicker, renderTimePicker, minDate, maxDate, allowReset, }: CalendarProps) => JSX.Element | null;
 export default CalendarBox;

package/components/datePicker/components/MobileCalendar.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CalendarProps } from './Calendar';
-declare const MobileCalendarBox: ({ calendars, getDateProps, advanceView, onCalendarDateChange, onIsMultiDateChange, onUpdate, onCancel, selected, containerStyle, disabled, minDate, maxDate, }: CalendarProps) => JSX.Element | null;
+declare const MobileCalendarBox: ({ calendars, getDateProps, advanceView, onCalendarDateChange, onIsMultiDateChange, onUpdate, onCancel, onReset, selected, containerStyle, disabled, minDate, maxDate, allowReset, }: CalendarProps) => JSX.Element | null;
 export default MobileCalendarBox;

package/index.esm.js

@@ -7623,7 +7623,7 @@ const TagComponent$1 = styled('span', {
   textOverflow: 'ellipsis'
 });
 const StyledIconRight$1 = styled('div', {
-  margin: '0 3px',
+  marginLeft: '6px',
   display: 'flex',
   verticalAlign: 'middle',
   alignItems: 'center',
@@ -7703,7 +7703,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
-    size: 14,
+    size: 16,
     color: colors$4.iconSecondary,
     style: {
       verticalAlign: 'middle'
@@ -10031,7 +10031,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   })) == null ? void 0 : _selectedItems$filter2.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
     disabled: disabled,
     isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
-    size: size,
+    size: "lg",
     readOnly: readOnly,
     key: `selected-item-${index}`
   }, getSelectedItemProps({
@@ -15182,13 +15182,15 @@ const CalendarBox = ({
   onIsMultiDateChange,
   onUpdate,
   onCancel,
+  onReset,
   selected,
   containerStyle,
   disabled,
   showTimePicker,
   renderTimePicker,
   minDate,
-  maxDate
+  maxDate,
+  allowReset
 }) => {
   const [pickerState, setPickerState] = useState({
     type: DATE_PICKER,
@@ -15498,7 +15500,17 @@ const CalendarBox = ({
         }), void 0), jsxs(Flex$1, Object.assign({
           gap: 3
         }, {
-          children: [jsx(Button$4, Object.assign({
+          children: [allowReset ? jsx(Button$4, Object.assign({
+            buttonType: "ghost",
+            css: {
+              fontWeight: 600
+            },
+            onClick: onReset,
+            disabled: disabled,
+            size: "sm"
+          }, {
+            children: "Reset"
+          }), void 0) : jsx(Button$4, Object.assign({
             buttonType: "ghost",
             css: {
               fontWeight: 600
@@ -15786,11 +15798,13 @@ const MobileCalendarBox = ({
   onIsMultiDateChange,
   onUpdate,
   onCancel,
+  onReset,
   selected,
   containerStyle,
   disabled,
   minDate,
-  maxDate
+  maxDate,
+  allowReset
 }) => {
   const [pickerState, setPickerState] = useState({
     type: DATE_PICKER,
@@ -16073,7 +16087,20 @@ const MobileCalendarBox = ({
       }), void 0), jsxs(Flex$1, Object.assign({
         gap: 3
       }, {
-        children: [jsx(Button$4, Object.assign({
+        children: [allowReset ? jsx(Button$4, Object.assign({
+          buttonType: "ghost",
+          size: "sm",
+          css: {
+            width: '160px',
+            fontWeight: 600,
+            display: 'flex',
+            flex: 1
+          },
+          onClick: onReset,
+          disabled: disabled
+        }, {
+          children: "Reset"
+        }), void 0) : jsx(Button$4, Object.assign({
           buttonType: "ghost",
           size: "sm",
           css: {
@@ -16832,13 +16859,15 @@ const CalendarRangePicker = _a => {
     isRangeControl,
     onChange,
     onClose,
+    onReset,
     advanceView,
     selected,
     disabled,
     minDate,
-    maxDate
+    maxDate,
+    allowReset
   } = _a,
-      props = __rest(_a, ["isMultiDatePicker", "isRangeControl", "onChange", "onClose", "advanceView", "selected", "disabled", "minDate", "maxDate"]);
+      props = __rest(_a, ["isMultiDatePicker", "isRangeControl", "onChange", "onClose", "onReset", "advanceView", "selected", "disabled", "minDate", "maxDate", "allowReset"]);
 
   const today = new Date();
   const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
@@ -16886,6 +16915,14 @@ const CalendarRangePicker = _a => {
     onClose();
   };
 
+  const resetHandler = () => {
+    if (dateValue && onChange && dateValue.length > 1) {
+      onChange(null);
+    }
+
+    onClose();
+  };
+
   return isMobile ? jsx(MobileCalendarBox, Object.assign({
     onUpdate: isMultiDatePicker ? updateHandler : undefined,
     onCancel: onClose,
@@ -16895,7 +16932,9 @@ const CalendarRangePicker = _a => {
     onCalendarDateChange: setCalendarDate,
     onIsMultiDateChange: setIsMultiDate,
     minDate: minDate,
-    maxDate: maxDate
+    maxDate: maxDate,
+    allowReset: allowReset,
+    onReset: isMultiDatePicker ? resetHandler : undefined
   }, dayzedData), void 0) : jsx(CalendarBox, Object.assign({
     onUpdate: isMultiDatePicker ? updateHandler : undefined,
     onCancel: onClose,
@@ -16905,7 +16944,9 @@ const CalendarRangePicker = _a => {
     onCalendarDateChange: setCalendarDate,
     onIsMultiDateChange: setIsMultiDate,
     minDate: minDate,
-    maxDate: maxDate
+    maxDate: maxDate,
+    allowReset: allowReset,
+    onReset: isMultiDatePicker ? resetHandler : undefined
   }, dayzedData), void 0);
 };
 
@@ -17362,7 +17403,8 @@ function InputDatePicker({
   minDate,
   maxDate,
   readOnly,
-  isInvalid
+  isInvalid,
+  allowReset
 }) {
   const [value, setValue] = useState(date || dateValue);
   const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
@@ -17496,7 +17538,8 @@ function InputDatePicker({
       onClose: () => setOpenPicker(false),
       showTimePicker: showTimePicker,
       minDate: minDate,
-      maxDate: maxDate
+      maxDate: maxDate,
+      allowReset: allowReset
     }, void 0);
   };
 

package/index.umd.js

@@ -7701,7 +7701,7 @@
     textOverflow: 'ellipsis'
   });
   const StyledIconRight$1 = styled('div', {
-    margin: '0 3px',
+    marginLeft: '6px',
     display: 'flex',
     verticalAlign: 'middle',
     alignItems: 'center',
@@ -7781,7 +7781,7 @@
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
-      size: 14,
+      size: 16,
       color: colors$4.iconSecondary,
       style: {
         verticalAlign: 'middle'
@@ -10166,7 +10166,7 @@
     })) == null ? void 0 : _selectedItems$filter2.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
       disabled: disabled,
       isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
-      size: size,
+      size: "lg",
       readOnly: readOnly,
       key: `selected-item-${index}`
     }, getSelectedItemProps({
@@ -15358,13 +15358,15 @@
         onIsMultiDateChange = _a.onIsMultiDateChange,
         onUpdate = _a.onUpdate,
         onCancel = _a.onCancel,
+        onReset = _a.onReset,
         selected = _a.selected,
         containerStyle = _a.containerStyle,
         disabled = _a.disabled,
         showTimePicker = _a.showTimePicker,
         renderTimePicker = _a.renderTimePicker,
         minDate = _a.minDate,
-        maxDate = _a.maxDate;
+        maxDate = _a.maxDate,
+        allowReset = _a.allowReset;
 
     var _b = React.useState({
       type: DATE_PICKER,
@@ -15709,7 +15711,17 @@
           }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
             gap: 3
           }, {
-            children: [jsxRuntime.jsx(Button$4, __assign({
+            children: [allowReset ? jsxRuntime.jsx(Button$4, __assign({
+              buttonType: "ghost",
+              css: {
+                fontWeight: 600
+              },
+              onClick: onReset,
+              disabled: disabled,
+              size: "sm"
+            }, {
+              children: "Reset"
+            }), void 0) : jsxRuntime.jsx(Button$4, __assign({
               buttonType: "ghost",
               css: {
                 fontWeight: 600
@@ -16004,11 +16016,13 @@
         onIsMultiDateChange = _a.onIsMultiDateChange,
         onUpdate = _a.onUpdate,
         onCancel = _a.onCancel,
+        onReset = _a.onReset,
         selected = _a.selected,
         containerStyle = _a.containerStyle,
         disabled = _a.disabled,
         minDate = _a.minDate,
-        maxDate = _a.maxDate;
+        maxDate = _a.maxDate,
+        allowReset = _a.allowReset;
 
     var _b = React.useState({
       type: DATE_PICKER,
@@ -16325,7 +16339,20 @@
         }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
           gap: 3
         }, {
-          children: [jsxRuntime.jsx(Button$4, __assign({
+          children: [allowReset ? jsxRuntime.jsx(Button$4, __assign({
+            buttonType: "ghost",
+            size: "sm",
+            css: {
+              width: '160px',
+              fontWeight: 600,
+              display: 'flex',
+              flex: 1
+            },
+            onClick: onReset,
+            disabled: disabled
+          }, {
+            children: "Reset"
+          }), void 0) : jsxRuntime.jsx(Button$4, __assign({
             buttonType: "ghost",
             size: "sm",
             css: {
@@ -17087,13 +17114,15 @@
     var isMultiDatePicker = _a.isMultiDatePicker,
         isRangeControl = _a.isRangeControl,
         onChange = _a.onChange,
-        onClose = _a.onClose,
-        advanceView = _a.advanceView,
+        onClose = _a.onClose;
+        _a.onReset;
+        var advanceView = _a.advanceView,
         selected = _a.selected,
         disabled = _a.disabled,
         minDate = _a.minDate,
         maxDate = _a.maxDate,
-        props = __rest(_a, ["isMultiDatePicker", "isRangeControl", "onChange", "onClose", "advanceView", "selected", "disabled", "minDate", "maxDate"]);
+        allowReset = _a.allowReset,
+        props = __rest(_a, ["isMultiDatePicker", "isRangeControl", "onChange", "onClose", "onReset", "advanceView", "selected", "disabled", "minDate", "maxDate", "allowReset"]);
 
     var today = new Date();
     var prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
@@ -17151,6 +17180,14 @@
       onClose();
     };
 
+    var resetHandler = function resetHandler() {
+      if (dateValue && onChange && dateValue.length > 1) {
+        onChange(null);
+      }
+
+      onClose();
+    };
+
     return isMobile ? jsxRuntime.jsx(MobileCalendarBox, __assign({
       onUpdate: isMultiDatePicker ? updateHandler : undefined,
       onCancel: onClose,
@@ -17160,7 +17197,9 @@
       onCalendarDateChange: setCalendarDate,
       onIsMultiDateChange: setIsMultiDate,
       minDate: minDate,
-      maxDate: maxDate
+      maxDate: maxDate,
+      allowReset: allowReset,
+      onReset: isMultiDatePicker ? resetHandler : undefined
     }, dayzedData), void 0) : jsxRuntime.jsx(CalendarBox, __assign({
       onUpdate: isMultiDatePicker ? updateHandler : undefined,
       onCancel: onClose,
@@ -17170,7 +17209,9 @@
       onCalendarDateChange: setCalendarDate,
       onIsMultiDateChange: setIsMultiDate,
       minDate: minDate,
-      maxDate: maxDate
+      maxDate: maxDate,
+      allowReset: allowReset,
+      onReset: isMultiDatePicker ? resetHandler : undefined
     }, dayzedData), void 0);
   };
 
@@ -17632,7 +17673,8 @@
         minDate = _a.minDate,
         maxDate = _a.maxDate,
         readOnly = _a.readOnly,
-        isInvalid = _a.isInvalid;
+        isInvalid = _a.isInvalid,
+        allowReset = _a.allowReset;
 
     var _g = React.useState(date || dateValue),
         value = _g[0],
@@ -17779,7 +17821,8 @@
         },
         showTimePicker: showTimePicker,
         minDate: minDate,
-        maxDate: maxDate
+        maxDate: maxDate,
+        allowReset: allowReset
       }, void 0);
     };
 

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.54.18-rc.1",
+  "version": "1.54.19",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",
-    "@majoo-ui/icons": "^1.38.3",
+    "@majoo-ui/icons": "^1.38.4",
     "@stitches/react": "^1.2.8",
     "@radix-ui/react-alert-dialog": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.0",