@majoo-ui/react 1.54.21 → 1.55.0

package/components/datePicker/index.d.ts

@@ -1,5 +1,6 @@
 export * from './InputDatePicker';
 export * from './DatePicker';
+export * from './CustomDatePicker';
 export * from './AdvancedOption';
 export * from './state/reducer';
 export * from './timePicker';

package/index.esm.js

@@ -17626,6 +17626,124 @@ function InputDatePicker({
   }, void 0);
 }
 
+function CustomDatePicker({
+  children,
+  type = SINGLE_PICKER,
+  disabled,
+  onChange,
+  defaultValue: defaultDateValue,
+  value: dateValue,
+  defaultDate,
+  date,
+  advanceView,
+  placement = 'bottom-start',
+  showTimePicker,
+  minDate,
+  maxDate,
+  allowReset,
+  sideOffset = 8
+}) {
+  const [value, setValue] = useState(date || dateValue);
+  const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
+  useEffect(() => {
+    setValue(date || dateValue);
+  }, [date, dateValue]);
+  useEffect(() => {
+    setDefaultValue(defaultDate || defaultDateValue);
+  }, [defaultDate, defaultDateValue]);
+  const [{
+    selectedDate
+  }, dispatch] = useReducer(pickerReducer, {
+    selectedDate: defaultValue !== null && defaultValue !== void 0 ? defaultValue : value
+  });
+  const [openPicker, setOpenPicker] = useState(false);
+  useEffect(() => {
+    if (value) {
+      dispatch({
+        type: UPDATE_PICKER,
+        payload: value
+      });
+    }
+  }, [value]);
+  const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
+
+  function handleOpenChange() {
+    if (!disabled) {
+      setOpenPicker(!openPicker);
+    }
+  }
+
+  const handleDatePickerChange = value => {
+    dispatch({
+      type: 'UPDATE',
+      payload: value
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  };
+
+  const renderDatePicker = () => {
+    return jsx(DatePicker, {
+      advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
+        options: advancePickerOptions,
+        disabled: disabled,
+        optionHandler: value => {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate(value, undefined)
+          });
+          if (onChange) onChange(advancePickerDate(value, undefined));
+          setOpenPicker(false);
+        }
+      }, void 0) : {
+        advanceView
+      }),
+      type: type,
+      disabled: disabled,
+      date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
+      selected: selectedDate,
+      isMultiDatePicker: type !== SINGLE_PICKER,
+      onChange: handleDatePickerChange,
+      onClose: () => setOpenPicker(false),
+      showTimePicker: showTimePicker,
+      minDate: minDate,
+      maxDate: maxDate,
+      allowReset: allowReset
+    }, void 0);
+  };
+
+  return !isMobile ? jsxs(Popover, Object.assign({
+    open: openPicker,
+    onOpenChange: setOpenPicker,
+    placement: placement,
+    sideOffset: sideOffset
+  }, {
+    children: [jsx(PopoverTrigger, Object.assign({
+      disabled: disabled
+    }, {
+      children: children
+    }), void 0), jsx(PopoverContent, {
+      children: renderDatePicker()
+    }, void 0)]
+  }), void 0) : jsxs(Fragment, {
+    children: [/*#__PURE__*/React.cloneElement(children, Object.assign(Object.assign({}, children.props), {
+      onClick: handleOpenChange
+    })), jsx(Drawer, Object.assign({
+      open: openPicker,
+      onOpenChange: handleOpenChange,
+      side: "bottom"
+    }, {
+      children: jsx(DrawerContent, Object.assign({
+        css: {
+          position: 'fixed',
+          left: 0
+        }
+      }, {
+        children: renderDatePicker()
+      }), void 0)
+    }), void 0)]
+  }, void 0);
+}
+
 const removeUndefinedFields = obj => {
   let newObj = {};
   Object.keys(obj).forEach(key => {
@@ -34047,4 +34165,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };

package/index.umd.js

@@ -17915,6 +17915,140 @@
     }, void 0);
   }
 
+  function CustomDatePicker(_a) {
+    var children = _a.children,
+        _b = _a.type,
+        type = _b === void 0 ? SINGLE_PICKER : _b,
+        disabled = _a.disabled,
+        onChange = _a.onChange,
+        defaultDateValue = _a.defaultValue,
+        dateValue = _a.value,
+        defaultDate = _a.defaultDate,
+        date = _a.date,
+        advanceView = _a.advanceView,
+        _c = _a.placement,
+        placement = _c === void 0 ? 'bottom-start' : _c,
+        showTimePicker = _a.showTimePicker,
+        minDate = _a.minDate,
+        maxDate = _a.maxDate,
+        allowReset = _a.allowReset,
+        _d = _a.sideOffset,
+        sideOffset = _d === void 0 ? 8 : _d;
+
+    var _e = React.useState(date || dateValue),
+        value = _e[0],
+        setValue = _e[1];
+
+    var _f = React.useState(defaultDate || defaultDateValue),
+        defaultValue = _f[0],
+        setDefaultValue = _f[1];
+
+    React.useEffect(function () {
+      setValue(date || dateValue);
+    }, [date, dateValue]);
+    React.useEffect(function () {
+      setDefaultValue(defaultDate || defaultDateValue);
+    }, [defaultDate, defaultDateValue]);
+
+    var _g = React.useReducer(pickerReducer, {
+      selectedDate: defaultValue !== null && defaultValue !== void 0 ? defaultValue : value
+    }),
+        selectedDate = _g[0].selectedDate,
+        dispatch = _g[1];
+
+    var _h = React.useState(false),
+        openPicker = _h[0],
+        setOpenPicker = _h[1];
+
+    React.useEffect(function () {
+      if (value) {
+        dispatch({
+          type: UPDATE_PICKER,
+          payload: value
+        });
+      }
+    }, [value]);
+    var isMobile = useMediaQuery("(max-width: ".concat(type === SINGLE_PICKER ? '480px' : '767px', ")"));
+
+    function handleOpenChange() {
+      if (!disabled) {
+        setOpenPicker(!openPicker);
+      }
+    }
+
+    var handleDatePickerChange = function handleDatePickerChange(value) {
+      dispatch({
+        type: 'UPDATE',
+        payload: value
+      });
+      onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+
+    var renderDatePicker = function renderDatePicker() {
+      return jsxRuntime.jsx(DatePicker, {
+        advanceView: type === ADVANCE_PICKER && (!advanceView ? jsxRuntime.jsx(AdvancedOption, {
+          options: advancePickerOptions,
+          disabled: disabled,
+          optionHandler: function (value) {
+            dispatch({
+              type: 'UPDATE',
+              payload: advancePickerDate(value, undefined)
+            });
+            if (onChange) onChange(advancePickerDate(value, undefined));
+            setOpenPicker(false);
+          }
+        }, void 0) : {
+          advanceView: advanceView
+        }),
+        type: type,
+        disabled: disabled,
+        date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
+        selected: selectedDate,
+        isMultiDatePicker: type !== SINGLE_PICKER,
+        onChange: handleDatePickerChange,
+        onClose: function () {
+          return setOpenPicker(false);
+        },
+        showTimePicker: showTimePicker,
+        minDate: minDate,
+        maxDate: maxDate,
+        allowReset: allowReset
+      }, void 0);
+    };
+
+    return !isMobile ? jsxRuntime.jsxs(Popover, __assign({
+      open: openPicker,
+      onOpenChange: setOpenPicker,
+      placement: placement,
+      sideOffset: sideOffset
+    }, {
+      children: [jsxRuntime.jsx(PopoverTrigger, __assign({
+        disabled: disabled
+      }, {
+        children: children
+      }), void 0), jsxRuntime.jsx(PopoverContent, {
+        children: renderDatePicker()
+      }, void 0)]
+    }), void 0) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/React__namespace.cloneElement(children, __assign(__assign({}, children.props), {
+        onClick: handleOpenChange
+      })), jsxRuntime.jsx(Drawer, __assign({
+        open: openPicker,
+        onOpenChange: handleOpenChange,
+        side: "bottom"
+      }, {
+        children: jsxRuntime.jsx(DrawerContent, __assign({
+          css: {
+            position: 'fixed',
+            left: 0
+          }
+        }, {
+          children: renderDatePicker()
+        }), void 0)
+      }), void 0)]
+    }, void 0);
+  }
+
   const removeUndefinedFields = obj => {
     let newObj = {};
     Object.keys(obj).forEach(key => {
@@ -34644,6 +34778,7 @@
   exports.ContextMenuItem = ContextMenuItem;
   exports.ContextMenuSeparator = ContextMenuSeparator;
   exports.ContextMenuTrigger = ContextMenuTrigger;
+  exports.CustomDatePicker = CustomDatePicker;
   exports.DATE_RANGE_PICKER = DATE_RANGE_PICKER;
   exports.DEFAULT = DEFAULT;
   exports.DateColumn = DateColumn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.54.21",
+  "version": "1.55.0",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",