@onesy/ui-react 1.0.164 → 1.0.167

package/esm/Calendar/Calendar.js

@@ -146,19 +146,19 @@ const useStyle = style(theme => ({
 const Calendar = /*#__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?.onesyCalendar?.props?.default), props__), [props__]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
-  const CalendarMonth = React.useMemo(() => theme?.elements?.CalendarMonth || CalendarMonthElement, [theme]);
-  const List = React.useMemo(() => theme?.elements?.List || ListElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
-  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Carousel = React.useMemo(() => theme?.elements?.Carousel || CarouselElement, [theme]);
-  const PaginationItem = React.useMemo(() => theme?.elements?.PaginationItem || PaginationItemElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCalendar?.props?.default), props__);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Fade = theme?.elements?.Fade || FadeElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const Button = theme?.elements?.Button || ButtonElement;
+  const CalendarMonth = theme?.elements?.CalendarMonth || CalendarMonthElement;
+  const List = theme?.elements?.List || ListElement;
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
+  const Divider = theme?.elements?.Divider || DividerElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Carousel = theme?.elements?.Carousel || CarouselElement;
+  const PaginationItem = theme?.elements?.PaginationItem || PaginationItemElement;
   const {
       tonal = true,
       color = 'default',
@@ -223,44 +223,44 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
   React.useEffect(() => {
     if (calendar_ !== undefined && calendar_ !== calendar) setCalendar(calendar_);
   }, [calendar_]);
-  const onUpdate = React.useCallback(valueNew => {
+  const onUpdate = valueNew => {
     // Inner update
     if (!props.hasOwnProperty('value')) setValue(valueNew);
     if (is('function', onChange)) onChange(!range ? valueNew[0] : valueNew);
-  }, [range, onChange]);
-  const onUpdateCalendar = React.useCallback(valueNew => {
+  };
+  const onUpdateCalendar = valueNew_0 => {
     // Inner update
-    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew);
-    if (is('function', onChangeCalendar)) onChangeCalendar(valueNew);
-  }, [onChangeCalendar]);
-  const onUpdateCalendarOption = React.useCallback(valueNew => {
+    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew_0);
+    if (is('function', onChangeCalendar)) onChangeCalendar(valueNew_0);
+  };
+  const onUpdateCalendarOption = valueNew_1 => {
     setOpen(null);
-    onUpdateCalendar(valueNew);
-  }, []);
-  const onCalendarMonthChange = React.useCallback(valueNew_ => {
-    const valueNew = is('array', valueNew_) ? valueNew_ : [valueNew_];
-    if (valueNew !== value) onUpdate(valueNew);
-  }, [value]);
-  const onCalendarMonthChangeCalendar = React.useCallback(valueNew => {
-    onUpdateCalendar(valueNew);
-  }, [calendar]);
-  const valid = React.useCallback((...args) => {
+    onUpdateCalendar(valueNew_1);
+  };
+  const onCalendarMonthChange = valueNew_ => {
+    const valueNew_2 = is('array', valueNew_) ? valueNew_ : [valueNew_];
+    if (valueNew_2 !== value) onUpdate(valueNew_2);
+  };
+  const onCalendarMonthChangeCalendar = valueNew_3 => {
+    onUpdateCalendar(valueNew_3);
+  };
+  const valid = (...args) => {
     if (is('function', valid_)) return valid_(...args);
     return true;
-  }, [valid_]);
-  const move = React.useCallback((next = true, unit = 'month') => {
+  };
+  const move = (next = true, unit = 'month') => {
     if (refs.inProgressTransition.current) return;
     onUpdateCalendar((next ? add : remove)(1, unit, calendar));
-  }, [calendar]);
-  const onOpen = React.useCallback((valueUpdate = 'month') => {
-    const valueNew = open === valueUpdate ? null : valueUpdate;
-    setOpen(valueNew);
+  };
+  const onOpen = (valueUpdate = 'month') => {
+    const valueNew_4 = open === valueUpdate ? null : valueUpdate;
+    setOpen(valueNew_4);
 
     // Scroll to the value
-    if (valueNew) setTimeout(() => {
-      const list = refs[valueNew]?.current;
+    if (valueNew_4) setTimeout(() => {
+      const list = refs[valueNew_4]?.current;
       if (list) {
-        const valueData = valueNew === 'month' ? calendar.month - 1 : calendar.year;
+        const valueData = valueNew_4 === 'month' ? calendar.month - 1 : calendar.year;
         Try(() => {
           const element = list.querySelector(`[data-value="${valueData}"]`);
           if (element) list.scrollTo({
@@ -270,8 +270,8 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
         });
       }
     });
-  }, [open, menu, calendar]);
-  const getMonths = is('function', getMonths_) ? getMonths_ : React.useCallback(() => {
+  };
+  const getMonths = is('function', getMonths_) ? getMonths_ : () => {
     const valueCalendar = set(14, 'day', calendar);
     const result = Array.from({
       length: 12
@@ -279,37 +279,37 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
       value: set(index, 'month', valueCalendar)
     }));
     return result;
-  }, [calendar]);
-  const getYears = is('function', getYears_) ? getYears_ : React.useCallback(() => {
+  };
+  const getYears = is('function', getYears_) ? getYears_ : () => {
     const minYear = 1970;
     const length = 130;
     return Array.from({
       length
-    }).map((item, index) => ({
-      value: set(minYear + index, 'year', calendar)
+    }).map((item_0, index_0) => ({
+      value: set(minYear + index_0, 'year', calendar)
     }));
-  }, []);
-  const onCarouselInit = React.useCallback(() => {
+  };
+  const onCarouselInit = () => {
     // Scroll to the value
     setTimeout(() => {
       Try(() => {
         const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-        let item = rootDocument.body.querySelector('[data-month-from]');
-        if (item) {
-          item = item.parentElement.parentElement;
+        let item_1 = rootDocument.body.querySelector('[data-month-from]');
+        if (item_1) {
+          item_1 = item_1.parentElement.parentElement;
           setCarousel({
-            y: item.offsetTop
+            y: item_1.offsetTop
           });
         }
       });
     }, 140);
-  }, []);
+  };
 
   // Prevent multiple moves of the calendar
   // before the previous transition is done
-  const onTransition = React.useCallback((element, status) => {
+  const onTransition = (element_0, status) => {
     refs.inProgressTransition.current = !['entered', 'exited', 'removed'].includes(status);
-  }, []);
+  };
   const calendarMonthProps = _objectSpread({
     renderDay,
     renderDayName,
@@ -332,29 +332,29 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
           onInit: onCarouselInit,
           items: Array.from({
             length: 12
-          }).map((item, index) => {
-            const calendarOnesyDate = set(index, 'month', calendar);
+          }).map((item_3, index_2) => {
+            const calendarOnesyDate_0 = set(index_2, 'month', calendar);
             return /*#__PURE__*/React.createElement(Line, {
-              key: index,
+              key: index_2,
               gap: 1.5,
               direction: "column",
               className: classNames([classes.carousel_item])
             }, /*#__PURE__*/React.createElement(Type, {
               version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
               className: classNames([classes.carousel_item_label])
-            }, format(calendarOnesyDate, 'MMMM', {
+            }, format(calendarOnesyDate_0, 'MMMM', {
               l
-            }), " ", format(calendarOnesyDate, 'YYYY', {
+            }), " ", format(calendarOnesyDate_0, 'YYYY', {
               l
             })), /*#__PURE__*/React.createElement(CalendarMonth, _extends({
               color: "default",
               value: value,
-              calendar: calendarOnesyDate,
+              calendar: calendarOnesyDate_0,
               valid: valid,
               now: now,
               size: size,
               range: range,
-              offset: index,
+              offset: index_2,
               min: min,
               max: max,
               validate: validate,
@@ -390,10 +390,10 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
           className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendars'], classes.calendars])
         }, Array.from({
           length: calendars
-        }).map((item, index) => {
-          const calendarOnesyDate = add(index, 'month', calendar);
+        }).map((item_2, index_1) => {
+          const calendarOnesyDate = add(index_1, 'month', calendar);
           return /*#__PURE__*/React.createElement(Line, {
-            key: index,
+            key: index_1,
             gap: 1,
             direction: "column",
             style: {
@@ -414,7 +414,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
             now: now,
             size: size,
             range: range,
-            offset: index,
+            offset: index_1,
             min: min,
             max: max,
             validate: validate
@@ -436,11 +436,11 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
     version: 'text'
   }, OptionButtonProps);
   return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: item => {
+    ref: item_4 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_4);else ref.current = item_4;
       }
-      refs.root.current = item;
+      refs.root.current = item_4;
     },
     className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-root', `onesy-Calendar-version-${version}`, `onesy-Calendar-size-${size}`], className, classes.root, classes[`size_${size}`], range && classes.range])
   }, other), start, /*#__PURE__*/React.createElement(Line, {
@@ -577,11 +577,11 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
     size: "large",
     menu: true,
     className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list])
-  }, getMonths(value, calendar, props).map((item, index) => {
-    const onesyDate = item.value;
+  }, getMonths(value, calendar, props).map((item_5, index_3) => {
+    const onesyDate = item_5.value;
     const selected = calendar.month === onesyDate.month;
     return /*#__PURE__*/React.createElement(ListItem, {
-      key: index,
+      key: index_3,
       onClick: () => onUpdateCalendarOption(onesyDate),
       primary: format(onesyDate, 'MMMM', {
         l
@@ -601,7 +601,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
       PrimaryProps: {
         version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
       },
-      "data-value": index,
+      "data-value": index_3,
       className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
     });
   }))), open === 'year' && /*#__PURE__*/React.createElement(Surface, {
@@ -616,25 +616,25 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
     size: size,
     menu: true,
     className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list])
-  }, getYears(value, calendar, props).map((item, index) => {
-    const onesyDate = item.value;
-    const yearValue = format(onesyDate, 'YYYY');
-    const selected = calendar.year === onesyDate.year;
+  }, getYears(value, calendar, props).map((item_6, index_4) => {
+    const onesyDate_0 = item_6.value;
+    const yearValue = format(onesyDate_0, 'YYYY');
+    const selected_0 = calendar.year === onesyDate_0.year;
     return /*#__PURE__*/React.createElement(ListItem, {
-      key: index,
-      onClick: () => onUpdateCalendarOption(onesyDate),
+      key: index_4,
+      onClick: () => onUpdateCalendarOption(onesyDate_0),
       primary: yearValue,
-      inset: !selected,
+      inset: !selected_0,
       startAlign: "center",
       size: size,
-      start: selected ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
+      start: selected_0 ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
         in: true,
         add: true,
         simple: true,
         size: size
       }) : undefined,
-      selected: selected,
-      disabled: !valid(onesyDate, 'year'),
+      selected: selected_0,
+      disabled: !valid(onesyDate_0, 'year'),
       button: true,
       PrimaryProps: {
         version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
@@ -650,12 +650,12 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
     wrap: "wrap",
     justify: "space-evenly",
     className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-version-year'], classes.list_version_year])
-  }, getYears(value, calendar, props).map((item, index) => {
-    const onesyDate = item.value;
-    const yearValue = format(onesyDate, 'YYYY');
-    const selected = calendar.year === onesyDate.year;
+  }, getYears(value, calendar, props).map((item_7, index_5) => {
+    const onesyDate_1 = item_7.value;
+    const yearValue_0 = format(onesyDate_1, 'YYYY');
+    const selected_1 = calendar.year === onesyDate_1.year;
     return /*#__PURE__*/React.createElement(PaginationItem, _extends({
-      key: index,
+      key: index_5,
       tonal: tonal,
       color: "inherit",
       size: size,
@@ -664,18 +664,18 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
       },
       TypeProps: {
         version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-        tone: !selected ? 'primary' : undefined
+        tone: !selected_1 ? 'primary' : undefined
       },
-      onClick: () => onUpdateCalendarOption(onesyDate),
-      "data-value": yearValue,
-      disabled: !valid(onesyDate, 'year')
+      onClick: () => onUpdateCalendarOption(onesyDate_1),
+      "data-value": yearValue_0,
+      disabled: !valid(onesyDate_1, 'year')
     }, PaginationItemsProps, {
       className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-day-version-year'], PaginationItemsProps?.className, classes.day_version_year]),
-      style: _objectSpread(_objectSpread({}, selected ? {
+      style: _objectSpread(_objectSpread({}, selected_1 ? {
         color: theme.methods.palette.color.value(undefined, 90, true, palette),
         backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
       } : undefined), PaginationItemsProps?.style)
-    }), yearValue);
+    }), yearValue_0);
   })))), end);
 });
 Calendar.displayName = 'onesy-Calendar';