@onesy/ui-react 1.0.164 → 1.0.167

package/esm/DatePicker/DatePicker.js

@@ -118,19 +118,19 @@ export const SEPARATOR = ` ${SEPARATOR_SYMBOL} `;
 const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDatePicker?.props?.default), props__), [props__]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
-  const AdvancedTextField = React.useMemo(() => theme?.elements?.AdvancedTextField || AdvancedTextFieldElement, [theme]);
-  const Modal = React.useMemo(() => theme?.elements?.Modal || ModalElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Calendar = React.useMemo(() => theme?.elements?.Calendar || CalendarElement, [theme]);
-  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
-  const Slide = React.useMemo(() => theme?.elements?.Slide || SlideElement, [theme]);
-  const ClickListener = React.useMemo(() => theme?.elements?.ClickListener || ClickListenerElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDatePicker?.props?.default), props__);
+  const Line = theme?.elements?.Line || LineElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const Button = theme?.elements?.Button || ButtonElement;
+  const AdvancedTextField = theme?.elements?.AdvancedTextField || AdvancedTextFieldElement;
+  const Modal = theme?.elements?.Modal || ModalElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Calendar = theme?.elements?.Calendar || CalendarElement;
+  const Divider = theme?.elements?.Divider || DividerElement;
+  const Slide = theme?.elements?.Slide || SlideElement;
+  const ClickListener = theme?.elements?.ClickListener || ClickListenerElement;
   const {
       tonal = true,
       color = 'primary',
@@ -206,13 +206,13 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     const result = [];
     const items = [switch__, useHelperText_];
     items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
   }, [switch__, useHelperText_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -230,21 +230,21 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const [open, setOpen] = React.useState(false);
   const [mode, setMode] = React.useState((touch ? openMobile : 'select') || 'select');
   const [error, setError] = React.useState(false);
-  const valueToInput = React.useCallback((valueNew = value) => {
-    let result = '';
+  const valueToInput = (valueNew = value) => {
+    let result_0 = '';
     const [from, to] = is('array', valueNew) ? valueNew : [valueNew];
     if (!(from || to)) return '';
-    const method = item => `${format(item, 'DD', {
+    const method = item_0 => `${format(item_0, 'DD', {
       l
-    })}/${format(item, 'MM', {
+    })}/${format(item_0, 'MM', {
       l
-    })}/${format(item, 'YYYY', {
+    })}/${format(item_0, 'YYYY', {
       l
     })}`;
-    result += `${method(from)}`;
-    if (range && to) result += `${SEPARATOR}${method(to)}`;
-    return result;
-  }, [value, range]);
+    result_0 += `${method(from)}`;
+    if (range && to) result_0 += `${SEPARATOR}${method(to)}`;
+    return result_0;
+  };
   const [input, setInput] = React.useState(valueToInput());
   const [inputModal, setInputModal] = React.useState(valueToInput());
   let version = version_;
@@ -252,25 +252,25 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     if (touch) version = 'mobile';else version = 'desktop';
   }
   const onUpdateValue = valueNew_ => {
-    const valueNew = is('array', valueNew_) ? valueNew_ : [valueNew_];
+    const valueNew_0 = is('array', valueNew_) ? valueNew_ : [valueNew_];
     const dateNow = new OnesyDate();
 
     // Update value
-    setValue(valueNew);
+    setValue(valueNew_0);
 
     // Update calendar
-    onUpdateCalendar(valueNew[0] || dateNow);
+    onUpdateCalendar(valueNew_0[0] || dateNow);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_0));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew));
+    setInputModal(valueToInput(valueNew_0));
   };
-  const errorCheck = React.useCallback((valueNew = value) => {
+  const errorCheck = (valueNew_1 = value) => {
     // Error
-    setError((valueNew || []).some((item, index) => !valid(item)));
-  }, [value]);
+    setError((valueNew_1 || []).some((item_1, index) => !valid(item_1)));
+  };
 
   // Init
   React.useEffect(() => {
@@ -287,115 +287,115 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   React.useEffect(() => {
     if (calendar_ !== undefined && calendar_ !== calendar) setCalendar(calendar_);
   }, [calendar_]);
-  const onUpdate = React.useCallback(valueNew => {
+  const onUpdate = valueNew_2 => {
     // Inner update
-    if (!props.hasOwnProperty('value')) setValue(valueNew);
-    if (is('function', onChange)) onChange(!range ? valueNew[0] : valueNew);
-  }, [onChange, range]);
-  const onUpdateCalendar = React.useCallback(valueNew => {
+    if (!props.hasOwnProperty('value')) setValue(valueNew_2);
+    if (is('function', onChange)) onChange(!range ? valueNew_2[0] : valueNew_2);
+  };
+  const onUpdateCalendar = valueNew_3 => {
     // Inner update
-    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew);
-    if (is('function', onChangeCalendar)) onChangeCalendar(valueNew);
-  }, [onChangeCalendar]);
+    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew_3);
+    if (is('function', onChangeCalendar)) onChangeCalendar(valueNew_3);
+  };
 
   // Update only internally, without using onChange
   // since it might be canceled
   // only use onChange on
   // input change, or ok
-  const onCalendarChange = React.useCallback(valueNew_ => {
-    const valueNew = is('array', valueNew_) ? valueNew_ : [valueNew_];
-    if (valueNew !== value) {
-      (!actions_ ? onUpdate : setValue)(valueNew);
+  const onCalendarChange = valueNew__0 => {
+    const valueNew_4 = is('array', valueNew__0) ? valueNew__0 : [valueNew__0];
+    if (valueNew_4 !== value) {
+      (!actions_ ? onUpdate : setValue)(valueNew_4);
 
       // Update input modal
-      setInputModal(valueToInput(valueNew));
+      setInputModal(valueToInput(valueNew_4));
     }
-  }, [value, actions_]);
-  const onCalendarChangeCalendar = React.useCallback(valueNew => {
-    if (valueNew !== calendar) onUpdateCalendar(valueNew);
-  }, [calendar]);
-  const inputToValue = React.useCallback((valueNew_ = input) => {
-    let valueNew = valueNew_;
-    let [from, to] = valueNew.split(SEPARATOR);
-    from = textToOnesyDate(from);
-    if (to) to = textToOnesyDate(to, false);
-    valueNew = [from, to].filter(Boolean);
-    return valueNew;
-  }, [input]);
-  const onOpen = React.useCallback(() => {
+  };
+  const onCalendarChangeCalendar = valueNew_5 => {
+    if (valueNew_5 !== calendar) onUpdateCalendar(valueNew_5);
+  };
+  const inputToValue = (valueNew__1 = input) => {
+    let valueNew_6 = valueNew__1;
+    let [from_0, to_0] = valueNew_6.split(SEPARATOR);
+    from_0 = textToOnesyDate(from_0);
+    if (to_0) to_0 = textToOnesyDate(to_0, false);
+    valueNew_6 = [from_0, to_0].filter(Boolean);
+    return valueNew_6;
+  };
+  const onOpen = () => {
     onMode();
     setOpen(!open);
-  }, [open, openMobile, version]);
-  const onClose = React.useCallback(event => {
+  };
+  const onClose = event => {
     setOpen(false);
     if (is('function', onClose_)) onClose_(event);
-  }, [onClose_]);
-  const onReset = React.useCallback(() => {
-    let valueNew = inputToValue();
-    const isValid = valueNew && valueNew?.[0]?.valid;
+  };
+  const onReset = () => {
+    let valueNew_7 = inputToValue();
+    const isValid = valueNew_7 && valueNew_7?.[0]?.valid;
     if (isValid) {
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_7);
 
       // Update calendar
-      onUpdateCalendar(valueNew[0]);
+      onUpdateCalendar(valueNew_7[0]);
 
       // Update input modal
       setInputModal(input);
     } else {
-      const dateNow = new OnesyDate();
-      valueNew = [];
+      const dateNow_0 = new OnesyDate();
+      valueNew_7 = [];
 
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_7);
 
       // Update calendar
-      onUpdateCalendar(dateNow);
+      onUpdateCalendar(dateNow_0);
 
       // Update input
-      setInput(valueToInput(valueNew));
+      setInput(valueToInput(valueNew_7));
 
       // Update input modal
-      setInputModal(valueToInput(valueNew));
+      setInputModal(valueToInput(valueNew_7));
     }
-  }, [input]);
-  const onToday = React.useCallback(event => {
-    const valueNew = [startOf(new OnesyDate(), 'day')];
-    if (range) valueNew.push(endOf(new OnesyDate(), 'day'));
+  };
+  const onToday = event_0 => {
+    const valueNew_8 = [startOf(new OnesyDate(), 'day')];
+    if (range) valueNew_8.push(endOf(new OnesyDate(), 'day'));
 
     // Update value
-    onUpdate(valueNew);
+    onUpdate(valueNew_8);
 
     // Update calendar
-    onUpdateCalendar(valueNew[0]);
+    onUpdateCalendar(valueNew_8[0]);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_8));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew));
-    onClose(event);
-    if (is('function', onToday_)) onToday_(event);
-  }, [input, range, onToday_]);
-  const onClear = React.useCallback(event => {
-    const dateNow = new OnesyDate();
-    const valueNew = [];
+    setInputModal(valueToInput(valueNew_8));
+    onClose(event_0);
+    if (is('function', onToday_)) onToday_(event_0);
+  };
+  const onClear = event_1 => {
+    const dateNow_1 = new OnesyDate();
+    const valueNew_9 = [];
 
     // Update value
-    onUpdate(valueNew);
+    onUpdate(valueNew_9);
 
     // Update calendar
-    onUpdateCalendar(dateNow);
+    onUpdateCalendar(dateNow_1);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_9));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew));
-    onClose(event);
-    if (is('function', onClear_)) onClear_(event);
-  }, [onClear_]);
-  const onOk = React.useCallback(event => {
+    setInputModal(valueToInput(valueNew_9));
+    onClose(event_1);
+    if (is('function', onClear_)) onClear_(event_1);
+  };
+  const onOk = event_2 => {
     // Error
     errorCheck();
 
@@ -407,15 +407,15 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
 
     // Update input modal
     setInputModal(valueToInput(value));
-    onClose(event);
-    if (is('function', onOk_)) onOk_(event);
-  }, [value, onOk_]);
-  const onCancel = React.useCallback(event => {
+    onClose(event_2);
+    if (is('function', onOk_)) onOk_(event_2);
+  };
+  const onCancel = event_3 => {
     onReset();
-    onClose(event);
-    if (is('function', onCancel_)) onCancel_(event);
-  }, [input, onCancel_]);
-  const valid = React.useCallback((...args) => {
+    onClose(event_3);
+    if (is('function', onCancel_)) onCancel_(event_3);
+  };
+  const valid = (...args) => {
     if (is('function', valid_)) return valid_(...args);
     const onesyDate = args[0];
     if (min || max || validate) {
@@ -426,63 +426,63 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
       return response;
     }
     return true;
-  }, [valid_, min, max, validate]);
-  const textToOnesyDate = React.useCallback((valueNew, start = true) => {
-    const [valueDay, valueMonth, valueYear] = (valueNew || '').split('/');
-    const onesyDate = new OnesyDate(new Date(`${valueMonth}/${valueDay}/${valueYear}`));
-    return start ? startOf(onesyDate, 'day') : endOf(onesyDate, 'day');
-  }, []);
-  const onInputChange = React.useCallback(valueNew_ => {
-    const valueNew = inputToValue(valueNew_);
-    const validValues = valueNew.every(item => item.valid);
+  };
+  const textToOnesyDate = (valueNew_10, start = true) => {
+    const [valueDay, valueMonth, valueYear] = (valueNew_10 || '').split('/');
+    const onesyDate_0 = new OnesyDate(new Date(`${valueMonth}/${valueDay}/${valueYear}`));
+    return start ? startOf(onesyDate_0, 'day') : endOf(onesyDate_0, 'day');
+  };
+  const onInputChange = valueNew__2 => {
+    const valueNew_11 = inputToValue(valueNew__2);
+    const validValues = valueNew_11.every(item_2 => item_2.valid);
 
     // Only update values if input is valid
     // format used to make the value
     if (validValues) {
       // Error
-      errorCheck(valueNew);
+      errorCheck(valueNew_11);
 
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_11);
 
       // Update calendar
-      onUpdateCalendar(valueNew[0]);
+      onUpdateCalendar(valueNew_11[0]);
     }
-    if (!valueNew_) {
+    if (!valueNew__2) {
       onUpdate([null, null]);
     }
 
     // Update input for free typing
-    setInput(valueNew_);
-  }, []);
-  const onInputChangeModal = React.useCallback(valueNew_ => {
-    const valueNew = inputToValue(valueNew_);
-    const validValues = valueNew.every(item => item.valid);
+    setInput(valueNew__2);
+  };
+  const onInputChangeModal = valueNew__3 => {
+    const valueNew_12 = inputToValue(valueNew__3);
+    const validValues_0 = valueNew_12.every(item_3 => item_3.valid);
 
     // Only update values if input is valid
     // format used to make the value
-    if (validValues) {
+    if (validValues_0) {
       // Error
-      errorCheck(valueNew);
+      errorCheck(valueNew_12);
 
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_12);
 
       // Update calendar
-      onUpdateCalendar(valueNew[0]);
+      onUpdateCalendar(valueNew_12[0]);
     }
 
     // Update input for free typing
-    setInputModal(valueNew_);
-  }, []);
-  const onMode = React.useCallback((mode_ = openMobile) => {
+    setInputModal(valueNew__3);
+  };
+  const onMode = (mode_ = openMobile) => {
     setMode(() => mode_);
-  }, []);
+  };
   const mask = [{
     pattern: '[0-3]'
-  }, (item, result, valueInput) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput), '/', {
+  }, (item_4, result_1, valueInput) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput), '/', {
     pattern: '[0-1]'
-  }, (item, result, valueInput) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])/.test(valueInput), '/', {
+  }, (item_5, result_2, valueInput_0) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])/.test(valueInput_0), '/', {
     pattern: '[1-2]'
   }, {
     pattern: '[0-9]'
@@ -627,8 +627,8 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     align: "center",
     justify: "space-between",
     className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-day-names'], classes.dayNames])
-  }, dayNames.map((day, index) => /*#__PURE__*/React.createElement(Line, {
-    key: index,
+  }, dayNames.map((day, index_0) => /*#__PURE__*/React.createElement(Line, {
+    key: index_0,
     version: "b3",
     direction: "row",
     align: "center",
@@ -720,11 +720,11 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }, 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 => {
+    rootRef: item_6 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_6);else ref.current = item_6;
       }
-      refs.root.current = item;
+      refs.root.current = item_6;
     },
     tonal: tonal,
     color: color,

package/esm/DateRangePicker/DateRangePicker.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["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 { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import DatePickerElement from '../DatePicker';
@@ -14,9 +15,10 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-DateRangePicker'
 });
 const DateRangePicker = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(5);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDateRangePicker?.props?.default), props_), [props_]);
-  const DatePicker = React.useMemo(() => theme?.elements?.DatePicker || DatePickerElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDateRangePicker?.props?.default), props_);
+  const DatePicker = theme?.elements?.DatePicker || DatePickerElement;
   const {
       className
     } = props,
@@ -24,11 +26,24 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(DatePicker, _extends({
-    ref: ref,
-    range: true,
-    className: classNames([staticClassName('DateRangePicker', theme) && ['onesy-DateRangePicker-root'], className, classes.root])
-  }, other));
+  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,
+      range: t0,
+      className: t1
+    }, other));
+    $[0] = DatePicker;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 });
 DateRangePicker.displayName = 'onesy-DateRangePicker';
 export default DateRangePicker;