@onesy/ui-react 1.0.172 → 1.0.174

package/esm/DatePicker/DatePicker.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "range", "now", "static", "openMobile", "placeholder", "calendars", "min", "max", "validate", "name", "nameFrom", "nameTo", "label", "labelFrom", "labelTo", "modeModalSubHeadingText", "modeModalSubHeadingTextRange", "selectModeHeadingText", "inputModeHeadingText", "useHelperText", "weekStartDay", "switch", "fullScreen", "today", "clear", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconEnter", "IconClose", "WrapperProps", "CalendarProps", "CalendarPropsDesktop", "CalendarPropsMobile", "IconButtonProps", "AdvancedTextFieldProps", "TooltipProps", "ButtonProps", "ModalProps", "IconProps", "MobileSurfaceProps", "className"];
+const _excluded = ["ref", "tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "range", "now", "static", "openMobile", "placeholder", "calendars", "min", "max", "validate", "name", "nameFrom", "nameTo", "label", "labelFrom", "labelTo", "modeModalSubHeadingText", "modeModalSubHeadingTextRange", "selectModeHeadingText", "inputModeHeadingText", "useHelperText", "weekStartDay", "switch", "fullScreen", "today", "clear", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconEnter", "IconClose", "WrapperProps", "CalendarProps", "CalendarPropsDesktop", "CalendarPropsMobile", "IconButtonProps", "AdvancedTextFieldProps", "TooltipProps", "ButtonProps", "ModalProps", "IconProps", "MobileSurfaceProps", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -25,6 +24,7 @@ import SlideElement from '../Slide';
 import ClickListenerElement from '../ClickListener';
 import useMediaQuery from '../useMediaQuery';
 import { valueBreakpoints, staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   header: {
@@ -115,7 +115,7 @@ const useStyle = styleMethod(theme => ({
 });
 export const SEPARATOR_SYMBOL = `–`;
 export const SEPARATOR = ` ${SEPARATOR_SYMBOL} `;
-const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
+const DatePicker = props__ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDatePicker?.props?.default), props__);
@@ -132,6 +132,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const Slide = theme?.elements?.Slide || SlideElement;
   const ClickListener = theme?.elements?.ClickListener || ClickListenerElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       version: version_ = 'auto',
@@ -507,38 +508,51 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const iconButtonProps = _objectSpread({
     size
   }, IconButtonProps);
-  const actions = /*#__PURE__*/React.createElement(Line, {
+  const actions = /*#__PURE__*/_jsxs(Line, {
     direction: "row",
     align: "center",
     justify: "space-between",
-    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-actions'], classes.actions])
-  }, (today || clear) && /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, today && /*#__PURE__*/React.createElement(Button, _extends({
-    onClick: onToday
-  }, buttonProps), l('Today')), clear && /*#__PURE__*/React.createElement(Button, _extends({
-    onClick: onClear
-  }, buttonProps), l('Clear'))), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Button, _extends({
-    onClick: onCancel
-  }, buttonProps), l('Cancel')), /*#__PURE__*/React.createElement(Button, _extends({
-    onClick: onOk
-  }, buttonProps), l('Ok'))));
+    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-actions'], classes.actions]),
+    children: [(today || clear) && /*#__PURE__*/_jsxs(Line, {
+      gap: 0,
+      direction: "row",
+      align: "center",
+      children: [today && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        onClick: onToday
+      }, buttonProps), {}, {
+        children: l('Today')
+      })), clear && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        onClick: onClear
+      }, buttonProps), {}, {
+        children: l('Clear')
+      }))]
+    }), /*#__PURE__*/_jsxs(Line, {
+      gap: 0,
+      direction: "row",
+      align: "center",
+      children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        onClick: onCancel
+      }, buttonProps), {}, {
+        children: l('Cancel')
+      })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        onClick: onOk
+      }, buttonProps), {}, {
+        children: l('Ok')
+      }))]
+    })]
+  });
   const moreProps = {};
   if (version === 'desktop') {
-    moreProps.end = /*#__PURE__*/React.createElement(IconButton, _extends({
+    moreProps.end = /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
       version: "text",
       onClick: onOpen,
       "aria-label": `${l('Choose date')}${range ? ' range' : ''}`,
       disabled: disabled || readOnly
-    }, iconButtonProps), /*#__PURE__*/React.createElement(Icon_, IconProps));
+    }, iconButtonProps), {}, {
+      children: /*#__PURE__*/_jsx(Icon_, _objectSpread({}, IconProps))
+    }));
   }
   if (version === 'mobile') {
     if (!(readOnly || disabled)) moreProps.onClick = onOpen;
@@ -562,137 +576,158 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     })}`;
   }
   const dayNames = [l('Mo'), l('Tu'), l('We'), l('Th'), l('Fr'), l('Sa'), l('Su')];
-  const mobile = /*#__PURE__*/React.createElement(Surface, _extends({
+  const mobile = /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
     color: "default",
     tonal: tonal,
     gap: 0,
     direction: "column",
     Component: Line,
     className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-mobile'], classes.mobile, fullScreen && classes.mobile_fullScreen])
-  }, MobileSurfaceProps), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "column",
-    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-header'], classes.header, fullScreen && classes.header_fullScreen])
-  }, actions_ && fullScreen && /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    style: {
-      width: '100%',
-      marginBottom: 8,
-      padding: `0px ${theme.methods.space.value(1, 'px')} 0px ${theme.methods.space.value(1.5, 'px')}`
-    }
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    color: "inherit",
-    version: "text",
-    onClick: onClose,
-    "aria-label": l('Close')
-  }, iconButtonProps), /*#__PURE__*/React.createElement(IconClose, IconProps)), /*#__PURE__*/React.createElement(Button, _extends({
-    onClick: onOk
-  }, buttonProps), l('Save'))), heading_ && /*#__PURE__*/React.createElement(Type, {
-    version: "l2",
-    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-subheading'], classes.subheading, fullScreen && classes.subheading_fullScreen])
-  }, !range ? modeModalSubHeadingText : modeModalSubHeadingTextRange), mode === 'select' && /*#__PURE__*/React.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-heading'], classes.heading, fullScreen && classes.heading_fullScreen])
-  }, /*#__PURE__*/React.createElement(Type, {
-    version: "h1"
-  }, textHeading), switch_ && /*#__PURE__*/React.createElement(Tooltip, {
-    name: l('Enter date')
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    tonal: tonal,
-    color: "inherit",
-    onClick: () => onMode('input'),
-    "aria-label": l('Enter date')
-  }, iconButtonProps), /*#__PURE__*/React.createElement(IconEnter, IconProps)))), mode === 'input' && /*#__PURE__*/React.createElement(Line, {
-    direction: "row",
-    align: "flex-start",
-    justify: "space-between",
-    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-heading'], classes.heading, fullScreen && classes.heading_fullScreen])
-  }, /*#__PURE__*/React.createElement(Type, {
-    version: "h1"
-  }, inputModeHeadingText), switch_ && /*#__PURE__*/React.createElement(Tooltip, {
-    name: l('Select date')
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    tonal: tonal,
-    color: "inherit",
-    onClick: () => onMode('select'),
-    "aria-label": l('Select date')
-  }, iconButtonProps), /*#__PURE__*/React.createElement(Icon_, IconProps))))), mode === 'select' && fullScreen && /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-day-names'], classes.dayNames])
-  }, dayNames.map((day, index_0) => /*#__PURE__*/React.createElement(Line, {
-    key: index_0,
-    version: "b3",
-    direction: "row",
-    align: "center",
-    justify: "center",
-    Component: Type,
-    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-day-name'], classes.dayName])
-  }, day))), /*#__PURE__*/React.createElement(Divider, {
-    tonal: false,
-    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-divider'], classes.divider])
-  }), mode === 'select' && /*#__PURE__*/React.createElement(Calendar, _extends({
-    version: !fullScreen ? 'regular' : 'year',
-    tonal: tonal,
-    color: color,
-    value: value,
-    menu: "month",
-    menu_month_previous_unit: fullScreen ? 'year' : 'month',
-    menu_month_next_unit: fullScreen ? 'year' : 'month',
-    calendar: calendar,
-    onChange: onCalendarChange,
-    onChangeCalendar: onCalendarChangeCalendar,
-    now: now,
-    size: size,
-    range: range,
-    calendars: 1,
-    valid: valid,
-    min: min,
-    max: max,
-    validate: validate
-  }, CalendarProps, CalendarPropsMobile, {
-    CalendarMonthProps: _objectSpread(_objectSpread({
-      outside: false,
-      labels: !fullScreen
-    }, CalendarProps?.CalendarMonthProps), CalendarPropsMobile?.CalendarMonthProps),
-    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-calendar', 'onesy-DatePicker-version-mobile'], CalendarProps?.className, CalendarPropsMobile?.className, classes.calendar, classes.calendar_mobile])
-  })), mode === 'input' && /*#__PURE__*/React.createElement(Line, {
-    gap: 1.5,
-    direction: "row",
-    align: "flex-start",
-    className: classNames([classes.modal_input])
-  }, /*#__PURE__*/React.createElement(AdvancedTextField, _extends({
-    tonal: tonal,
-    color: color,
-    version: "outlined",
-    size: size,
-    name: label,
-    mask: mask,
-    placeholder: placeholder,
-    value: inputModal,
-    onChange: onInputChangeModal,
-    helperText: useHelperText ? placeholder : undefined,
-    error: error,
-    readOnly: readOnly,
-    disabled: disabled
-  }, AdvancedTextFieldProps, {
-    className: classNames([AdvancedTextFieldProps?.className, classes.input_mobile])
-  }))), fullScreen && /*#__PURE__*/React.createElement(Divider, {
-    tonal: false,
-    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-divider'], classes.divider])
-  }), actions_ && /*#__PURE__*/React.cloneElement(actions, {
-    style: {
-      paddingTop: theme.methods.space.value(1, 'px')
-    }
+  }, MobileSurfaceProps), {}, {
+    children: [/*#__PURE__*/_jsxs(Line, {
+      gap: 0,
+      direction: "column",
+      className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-header'], classes.header, fullScreen && classes.header_fullScreen]),
+      children: [actions_ && fullScreen && /*#__PURE__*/_jsxs(Line, {
+        gap: 0,
+        direction: "row",
+        align: "center",
+        justify: "space-between",
+        style: {
+          width: '100%',
+          marginBottom: 8,
+          padding: `0px ${theme.methods.space.value(1, 'px')} 0px ${theme.methods.space.value(1.5, 'px')}`
+        },
+        children: [/*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+          color: "inherit",
+          version: "text",
+          onClick: onClose,
+          "aria-label": l('Close')
+        }, iconButtonProps), {}, {
+          children: /*#__PURE__*/_jsx(IconClose, _objectSpread({}, IconProps))
+        })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          onClick: onOk
+        }, buttonProps), {}, {
+          children: l('Save')
+        }))]
+      }), heading_ && /*#__PURE__*/_jsx(Type, {
+        version: "l2",
+        className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-subheading'], classes.subheading, fullScreen && classes.subheading_fullScreen]),
+        children: !range ? modeModalSubHeadingText : modeModalSubHeadingTextRange
+      }), mode === 'select' && /*#__PURE__*/_jsxs(Line, {
+        direction: "row",
+        align: "center",
+        justify: "space-between",
+        className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-heading'], classes.heading, fullScreen && classes.heading_fullScreen]),
+        children: [/*#__PURE__*/_jsx(Type, {
+          version: "h1",
+          children: textHeading
+        }), switch_ && /*#__PURE__*/_jsx(Tooltip, {
+          name: l('Enter date'),
+          children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            tonal: tonal,
+            color: "inherit",
+            onClick: () => onMode('input'),
+            "aria-label": l('Enter date')
+          }, iconButtonProps), {}, {
+            children: /*#__PURE__*/_jsx(IconEnter, _objectSpread({}, IconProps))
+          }))
+        })]
+      }), mode === 'input' && /*#__PURE__*/_jsxs(Line, {
+        direction: "row",
+        align: "flex-start",
+        justify: "space-between",
+        className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-heading'], classes.heading, fullScreen && classes.heading_fullScreen]),
+        children: [/*#__PURE__*/_jsx(Type, {
+          version: "h1",
+          children: inputModeHeadingText
+        }), switch_ && /*#__PURE__*/_jsx(Tooltip, {
+          name: l('Select date'),
+          children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            tonal: tonal,
+            color: "inherit",
+            onClick: () => onMode('select'),
+            "aria-label": l('Select date')
+          }, iconButtonProps), {}, {
+            children: /*#__PURE__*/_jsx(Icon_, _objectSpread({}, IconProps))
+          }))
+        })]
+      })]
+    }), mode === 'select' && fullScreen && /*#__PURE__*/_jsx(Line, {
+      gap: 0,
+      direction: "row",
+      align: "center",
+      justify: "space-between",
+      className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-day-names'], classes.dayNames]),
+      children: dayNames.map((day, index_0) => /*#__PURE__*/_jsx(Line, {
+        version: "b3",
+        direction: "row",
+        align: "center",
+        justify: "center",
+        Component: Type,
+        className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-day-name'], classes.dayName]),
+        children: day
+      }, index_0))
+    }), /*#__PURE__*/_jsx(Divider, {
+      tonal: false,
+      className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-divider'], classes.divider])
+    }), mode === 'select' && /*#__PURE__*/_jsx(Calendar, _objectSpread(_objectSpread(_objectSpread({
+      version: !fullScreen ? 'regular' : 'year',
+      tonal: tonal,
+      color: color,
+      value: value,
+      menu: "month",
+      menu_month_previous_unit: fullScreen ? 'year' : 'month',
+      menu_month_next_unit: fullScreen ? 'year' : 'month',
+      calendar: calendar,
+      onChange: onCalendarChange,
+      onChangeCalendar: onCalendarChangeCalendar,
+      now: now,
+      size: size,
+      range: range,
+      calendars: 1,
+      valid: valid,
+      min: min,
+      max: max,
+      validate: validate
+    }, CalendarProps), CalendarPropsMobile), {}, {
+      CalendarMonthProps: _objectSpread(_objectSpread({
+        outside: false,
+        labels: !fullScreen
+      }, CalendarProps?.CalendarMonthProps), CalendarPropsMobile?.CalendarMonthProps),
+      className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-calendar', 'onesy-DatePicker-version-mobile'], CalendarProps?.className, CalendarPropsMobile?.className, classes.calendar, classes.calendar_mobile])
+    })), mode === 'input' && /*#__PURE__*/_jsx(Line, {
+      gap: 1.5,
+      direction: "row",
+      align: "flex-start",
+      className: classNames([classes.modal_input]),
+      children: /*#__PURE__*/_jsx(AdvancedTextField, _objectSpread(_objectSpread({
+        tonal: tonal,
+        color: color,
+        version: "outlined",
+        size: size,
+        name: label,
+        mask: mask,
+        placeholder: placeholder,
+        value: inputModal,
+        onChange: onInputChangeModal,
+        helperText: useHelperText ? placeholder : undefined,
+        error: error,
+        readOnly: readOnly,
+        disabled: disabled
+      }, AdvancedTextFieldProps), {}, {
+        className: classNames([AdvancedTextFieldProps?.className, classes.input_mobile])
+      }))
+    }), fullScreen && /*#__PURE__*/_jsx(Divider, {
+      tonal: false,
+      className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-divider'], classes.divider])
+    }), actions_ && /*#__PURE__*/React.cloneElement(actions, {
+      style: {
+        paddingTop: theme.methods.space.value(1, 'px')
+      }
+    })]
   }));
-  const desktop = /*#__PURE__*/React.createElement(Calendar, _extends({
+  const desktop = /*#__PURE__*/_jsx(Calendar, _objectSpread(_objectSpread(_objectSpread({
     value: value,
     calendar: calendar,
     onChange: onCalendarChange,
@@ -706,63 +741,67 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     max: max,
     validate: validate,
     belowCalendars: actions_ ? actions : undefined
-  }, CalendarProps, CalendarPropsDesktop, {
+  }, CalendarProps), CalendarPropsDesktop), {}, {
     className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-calendar', 'onesy-DatePicker-version-desktop'], CalendarProps?.className, CalendarPropsDesktop?.className, classes.calendar, classes.calendar_desktop])
   }));
   if (static_) {
     if (version === 'mobile') return mobile;
     if (version === 'desktop') return desktop;
   }
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",
     fullWidth: fullWidth
-  }, WrapperProps, {
-    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-root', `onesy-DatePicker-version-${version}`, `onesy-DatePicker-size-${size}`, WrapperProps?.className, range && `onesy-DatePicker-range`, readOnly && `onesy-DatePicker-read-only`, disabled && `onesy-DatePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root])
-  }), /*#__PURE__*/React.createElement(AdvancedTextField, _extends({
-    rootRef: item_6 => {
-      if (ref) {
-        if (is('function', ref)) ref(item_6);else ref.current = item_6;
-      }
-      refs.root.current = item_6;
-    },
-    tonal: tonal,
-    color: color,
-    version: "outlined",
-    size: size,
-    name: label,
-    mask: mask,
-    placeholder: placeholder,
-    value: input,
-    onChange: onInputChange,
-    helperText: useHelperText ? placeholder : undefined,
-    endVerticalAlign: "center",
-    error: error,
-    fullWidth: fullWidth,
-    readOnly: readOnly,
-    disabled: disabled
-  }, moreProps, other, AdvancedTextFieldProps)), version === 'mobile' && /*#__PURE__*/React.createElement(Modal, _extends({
-    open: open,
-    modalWrapperSurface: false,
-    TransitionComponent: Slide,
-    fullScreen: fullScreen,
-    onClose: onClose
-  }, ModalProps), mobile), version === 'desktop' && /*#__PURE__*/React.createElement(Tooltip, _extends({
-    open: open,
-    portal: true,
-    anchorElement: refs.root.current,
-    alignment: "center",
-    position: "bottom",
-    hover: false,
-    focus: false,
-    longPress: false,
-    maxWidth: "unset",
-    noMargin: true,
-    name: /*#__PURE__*/React.createElement(ClickListener, {
-      onClickOutside: onCancel,
-      includeParentQueries: ['.onesy-Calendar-list']
-    }, desktop)
-  }, TooltipProps)));
-});
+  }, WrapperProps), {}, {
+    className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-root', `onesy-DatePicker-version-${version}`, `onesy-DatePicker-size-${size}`, WrapperProps?.className, range && `onesy-DatePicker-range`, readOnly && `onesy-DatePicker-read-only`, disabled && `onesy-DatePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root]),
+    children: [/*#__PURE__*/_jsx(AdvancedTextField, _objectSpread(_objectSpread(_objectSpread({
+      rootRef: item_6 => {
+        if (ref) {
+          if (is('function', ref)) ref(item_6);else ref.current = item_6;
+        }
+        refs.root.current = item_6;
+      },
+      tonal: tonal,
+      color: color,
+      version: "outlined",
+      size: size,
+      name: label,
+      mask: mask,
+      placeholder: placeholder,
+      value: input,
+      onChange: onInputChange,
+      helperText: useHelperText ? placeholder : undefined,
+      endVerticalAlign: "center",
+      error: error,
+      fullWidth: fullWidth,
+      readOnly: readOnly,
+      disabled: disabled
+    }, moreProps), other), AdvancedTextFieldProps)), version === 'mobile' && /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
+      open: open,
+      modalWrapperSurface: false,
+      TransitionComponent: Slide,
+      fullScreen: fullScreen,
+      onClose: onClose
+    }, ModalProps), {}, {
+      children: mobile
+    })), version === 'desktop' && /*#__PURE__*/_jsx(Tooltip, _objectSpread({
+      open: open,
+      portal: true,
+      anchorElement: refs.root.current,
+      alignment: "center",
+      position: "bottom",
+      hover: false,
+      focus: false,
+      longPress: false,
+      maxWidth: "unset",
+      noMargin: true,
+      name: /*#__PURE__*/_jsx(ClickListener, {
+        onClickOutside: onCancel,
+        includeParentQueries: ['.onesy-Calendar-list'],
+        children: desktop
+      })
+    }, TooltipProps))]
+  }));
+};
 DatePicker.displayName = 'onesy-DatePicker';
 export default DatePicker;

package/esm/DateRangePicker/DateRangePicker.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["className"];
@@ -9,13 +8,14 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import DatePickerElement from '../DatePicker';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-DateRangePicker'
 });
-const DateRangePicker = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(5);
+const DateRangePicker = props_ => {
+  const $ = _c(4);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDateRangePicker?.props?.default), props_);
   const DatePicker = theme?.elements?.DatePicker || DatePickerElement;
@@ -29,21 +29,19 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t0 = true;
   const t1 = classNames([staticClassName("DateRangePicker", theme) && ["onesy-DateRangePicker-root"], className, classes.root]);
   let t2;
-  if ($[0] !== DatePicker || $[1] !== other || $[2] !== ref || $[3] !== t1) {
-    t2 = /*#__PURE__*/React.createElement(DatePicker, _extends({
-      ref: ref,
+  if ($[0] !== DatePicker || $[1] !== other || $[2] !== t1) {
+    t2 = /*#__PURE__*/_jsx(DatePicker, _objectSpread({
       range: t0,
       className: t1
     }, other));
     $[0] = DatePicker;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t1;
-    $[4] = t2;
+    $[2] = t1;
+    $[3] = t2;
   } else {
-    t2 = $[4];
+    t2 = $[3];
   }
   return t2;
-});
+};
 DateRangePicker.displayName = 'onesy-DateRangePicker';
 export default DateRangePicker;