mautourco-components 0.2.130 → 0.2.132

package/dist/components/molecules/ActionDropdown/ActionDropdown.css

@@ -2,7 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-.action-dropdown {
+.mtc-action-dropdown {
   position: relative;
   width: var(--max-width, 153px);
   background-color: #fff;
@@ -35,7 +35,7 @@
   }
 }
 
-.action-dropdown-trigger {
+.mtc-action-dropdown-trigger {
   display: flex;
   height: 2rem;
   width: 2rem;

package/dist/components/molecules/ActionDropdown/ActionDropdown.js

@@ -19,7 +19,7 @@ export function ActionDropdown(props) {
     var _d = useState(false), open = _d[0], setOpen = _d[1];
     return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { className: triggerClassName, children: typeof children === 'function'
                     ? children(open)
-                    : children !== null && children !== void 0 ? children : (_jsx("span", { className: "action-dropdown-trigger", children: _jsx(Icon, { name: "more-vertical" }) })) }), _jsx(PopoverContent, { className: cn('action-dropdown', popoverContentClassName), style: { '--max-width': maxWidth }, align: "end", side: "bottom", avoidCollisions: false, children: data.map(function (item, index) {
+                    : (children !== null && children !== void 0 ? children : (_jsx("span", { className: "mtc-action-dropdown-trigger", children: _jsx(Icon, { name: "more-vertical" }) }))) }), _jsx(PopoverContent, { className: cn('mtc-action-dropdown', popoverContentClassName), style: { '--max-width': maxWidth }, align: "end", side: "bottom", avoidCollisions: false, children: data.map(function (item, index) {
                     var defaultButton = (_jsx("button", { onClick: function () {
                             var _a;
                             if (item.disabled) {

package/dist/components/molecules/Calendar/DateTime.d.ts

@@ -19,6 +19,7 @@ export interface DateTimeProps {
         minute: string;
         meridiem: 'AM' | 'PM';
     };
+    defaultMonth?: Date;
     onChange?: (payload: DateTimeOnChangePayload) => void;
 }
 declare const DateTime: React.FC<DateTimeProps>;

package/dist/components/molecules/Calendar/DateTime.js

@@ -17,9 +17,9 @@ import { Calendar } from '../../ui/calendar';
 import TimePicker from './TimePicker';
 var DateTime = function (_a) {
     var _b, _c, _d;
-    var _e = _a.mode, mode = _e === void 0 ? 'both' : _e, _f = _a.selectionMode, selectionMode = _f === void 0 ? 'range' : _f, _g = _a.numberOfMonths, numberOfMonths = _g === void 0 ? 2 : _g, _h = _a.disableBeforeToday, disableBeforeToday = _h === void 0 ? true : _h, _j = _a.disableToday, disableToday = _j === void 0 ? false : _j, defaultDateRange = _a.defaultDateRange, defaultTime = _a.defaultTime, onChange = _a.onChange;
+    var _e = _a.mode, mode = _e === void 0 ? 'both' : _e, _f = _a.selectionMode, selectionMode = _f === void 0 ? 'range' : _f, _g = _a.numberOfMonths, numberOfMonths = _g === void 0 ? 2 : _g, _h = _a.disableBeforeToday, disableBeforeToday = _h === void 0 ? true : _h, _j = _a.disableToday, disableToday = _j === void 0 ? false : _j, defaultDateRange = _a.defaultDateRange, defaultTime = _a.defaultTime, defaultMonth = _a.defaultMonth, onChange = _a.onChange;
     var _k = useState(defaultDateRange), dateRange = _k[0], setDateRange = _k[1];
-    var _l = useState(defaultDateRange === null || defaultDateRange === void 0 ? void 0 : defaultDateRange.from), month = _l[0], setMonth = _l[1];
+    var _l = useState(defaultMonth), month = _l[0], setMonth = _l[1];
     var _m = useState((_b = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.hour) !== null && _b !== void 0 ? _b : '12'), hours = _m[0], setHours = _m[1];
     var _o = useState((_c = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.minute) !== null && _c !== void 0 ? _c : '00'), minutes = _o[0], setMinutes = _o[1];
     var _p = useState((_d = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.meridiem) !== null && _d !== void 0 ? _d : 'AM'), amPm = _p[0], setAmPm = _p[1];
@@ -79,10 +79,10 @@ var DateTime = function (_a) {
     };
     var disabledDays = buildDisabled();
     useEffect(function () {
-        if (defaultDateRange) {
-            setMonth(defaultDateRange === null || defaultDateRange === void 0 ? void 0 : defaultDateRange.from);
+        if (defaultMonth) {
+            setMonth(defaultMonth);
         }
-    }, [defaultDateRange]);
+    }, [defaultMonth]);
     return (_jsxs("div", { className: "calendar--dropdown", children: [mode !== 'time' &&
                 (function () {
                     var calendarProps = {

package/dist/components/organisms/DateTimePicker/DateTimePicker.js

@@ -19,6 +19,7 @@ var DateTimePicker = function (_a) {
     var _b = _a.placeholder, placeholder = _b === void 0 ? 'Select date' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.mode, mode = _d === void 0 ? 'both' : _d, _e = _a.selectionMode, selectionMode = _e === void 0 ? 'range' : _e, _f = _a.numberOfMonths, numberOfMonths = _f === void 0 ? 2 : _f, _g = _a.disableBeforeToday, disableBeforeToday = _g === void 0 ? true : _g, _h = _a.disableToday, disableToday = _h === void 0 ? false : _h, onValueChange = _a.onValueChange, defaultValue = _a.defaultValue, _j = _a.iconBGFull, iconBGFull = _j === void 0 ? true : _j, _k = _a.iconPosition, iconPosition = _k === void 0 ? 'right' : _k, _l = _a.showChevron, showChevron = _l === void 0 ? false : _l, icon = _a.icon, _m = _a.inputClassName, inputClassName = _m === void 0 ? '' : _m, _o = _a.calendarClassName, calendarClassName = _o === void 0 ? '' : _o, state = _a.state, _p = _a.scrollOnOpen, scrollOnOpen = _p === void 0 ? false : _p;
     var triggerRef = useRef(null);
     var popoverContentRef = useRef(null);
+    var openRef = useRef(false);
     // Parse default value and set initial state
     var parseDefaultValue = useMemo(function () {
         if (!defaultValue)
@@ -50,6 +51,7 @@ var DateTimePicker = function (_a) {
     var _r = useState([]), selectedDateRange = _r[0], setSelectedDateRange = _r[1];
     var _s = useState(undefined), selectedTime = _s[0], setSelectedTime = _s[1];
     var _t = useState(false), isOpen = _t[0], setIsOpen = _t[1];
+    var _u = useState(undefined), defaultMonth = _u[0], setDefaultMonth = _u[1];
     var handleDtChange = React.useCallback(function (payload) {
         var _a;
         var datePart = formatDateRange(payload.dateRange);
@@ -96,9 +98,11 @@ var DateTimePicker = function (_a) {
         }
     }, [onValueChange, selectionMode]);
     useEffect(function () {
+        var _a;
         setValue(parseDefaultValue.value);
         setSelectedDateRange(parseDefaultValue.dateRange);
-    }, [defaultValue]);
+        setDefaultMonth((_a = parseDefaultValue.dateRange) === null || _a === void 0 ? void 0 : _a.from);
+    }, [parseDefaultValue]);
     // Scroll to input when calendar opens (if scrollOnOpen is true)
     useEffect(function () {
         scrollIntoViewOnOpen(triggerRef, isOpen, scrollOnOpen);
@@ -108,7 +112,11 @@ var DateTimePicker = function (_a) {
         if (isOpen) {
             ensurePopoverVisible(popoverContentRef, triggerRef, isOpen);
         }
-    }, [isOpen]);
-    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { ref: triggerRef, children: _jsx(CalendarInput, { placeholder: placeholder, value: value, disabled: disabled, state: state, className: inputClassName, iconBGFull: iconBGFull, iconPosition: iconPosition, showChevron: showChevron, isOpen: isOpen, icon: icon }) }) }), _jsx(PopoverContent, { ref: popoverContentRef, className: "w-auto border-transparent !p-0 transfer-calendar", side: "bottom", align: "start", sideOffset: 8, avoidCollisions: false, children: _jsx(DateTime, { mode: mode, selectionMode: selectionMode, numberOfMonths: numberOfMonths, disableBeforeToday: disableBeforeToday, disableToday: disableToday, onChange: handleDtChange, defaultDateRange: selectedDateRange, defaultTime: selectedTime }) })] }));
+        if (openRef.current !== isOpen) {
+            setDefaultMonth(selectedDateRange.from);
+        }
+        openRef.current = isOpen;
+    }, [isOpen, selectedDateRange]);
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { ref: triggerRef, children: _jsx(CalendarInput, { placeholder: placeholder, value: value, disabled: disabled, state: state, className: inputClassName, iconBGFull: iconBGFull, iconPosition: iconPosition, showChevron: showChevron, isOpen: isOpen, icon: icon }) }) }), _jsx(PopoverContent, { ref: popoverContentRef, className: "w-auto border-transparent !p-0 transfer-calendar", side: "bottom", align: "start", sideOffset: 8, avoidCollisions: false, children: _jsx(DateTime, { mode: mode, selectionMode: selectionMode, numberOfMonths: numberOfMonths, disableBeforeToday: disableBeforeToday, disableToday: disableToday, onChange: handleDtChange, defaultDateRange: selectedDateRange, defaultTime: selectedTime, defaultMonth: defaultMonth }) })] }));
 };
 export default DateTimePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.130",
+  "version": "0.2.132",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

package/src/components/molecules/ActionDropdown/ActionDropdown.css

@@ -1,4 +1,4 @@
-.action-dropdown {
+.mtc-action-dropdown {
   @apply relative;
   width: var(--max-width, 153px);
   background-color: #fff;
@@ -16,7 +16,7 @@
   }
 }
 
-.action-dropdown-trigger {
+.mtc-action-dropdown-trigger {
   @apply w-8 h-8 flex items-center justify-center cursor-pointer;
   border-radius: var(--border-radius-rounded-lg);
   background-color: var(--color-neutral-100);

package/src/components/molecules/ActionDropdown/ActionDropdown.tsx

@@ -53,14 +53,14 @@ export function ActionDropdown(props: ActionDropdownProps) {
       <PopoverTrigger className={triggerClassName}>
         {typeof children === 'function'
           ? children(open)
-          : children ?? (
-              <span className="action-dropdown-trigger">
+          : (children ?? (
+              <span className="mtc-action-dropdown-trigger">
                 <Icon name="more-vertical" />
               </span>
-            )}
+            ))}
       </PopoverTrigger>
       <PopoverContent
-        className={cn('action-dropdown', popoverContentClassName)}
+        className={cn('mtc-action-dropdown', popoverContentClassName)}
         style={{ '--max-width': maxWidth } as React.CSSProperties}
         align="end"
         side="bottom"

package/src/components/molecules/Calendar/DateTime.tsx

@@ -1,11 +1,13 @@
 import { Locale } from 'date-fns/locale';
 import { useEffect, useState } from 'react';
-import { DateRange } from 'react-day-picker';
+import { DateRange, DayPicker } from 'react-day-picker';
 import Icon from '../../atoms/Icon/Icon';
 import { Button } from '../../ui/button';
 import { Calendar } from '../../ui/calendar';
 import TimePicker from './TimePicker';
 
+type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
 export interface DateTimeOnChangePayload {
   dateRange?: DateRange;
   time?: { hour: string; minute: string; meridiem: 'AM' | 'PM' };
@@ -19,6 +21,7 @@ export interface DateTimeProps {
   disableToday?: boolean;
   defaultDateRange?: DateRange;
   defaultTime?: { hour: string; minute: string; meridiem: 'AM' | 'PM' };
+  defaultMonth?: Date;
   onChange?: (payload: DateTimeOnChangePayload) => void;
 }
 
@@ -30,10 +33,11 @@ const DateTime: React.FC<DateTimeProps> = ({
   disableToday = false,
   defaultDateRange,
   defaultTime,
+  defaultMonth,
   onChange,
 }) => {
   const [dateRange, setDateRange] = useState<DateRange | undefined>(defaultDateRange);
-  const [month, setMonth] = useState<Date | undefined>(defaultDateRange?.from);
+  const [month, setMonth] = useState<Date | undefined>(defaultMonth);
   const [hours, setHours] = useState<string>(defaultTime?.hour ?? '12');
   const [minutes, setMinutes] = useState<string>(defaultTime?.minute ?? '00');
   const [amPm, setAmPm] = useState<'AM' | 'PM'>(defaultTime?.meridiem ?? 'AM');
@@ -85,7 +89,8 @@ const DateTime: React.FC<DateTimeProps> = ({
     setDateRange({ from: today, to: today });
   };
 
-  const calendarMode = selectionMode === 'single' ? 'single' : 'range';
+  const calendarMode: CalendarProps['mode'] =
+    selectionMode === 'single' ? 'single' : 'range';
 
   const buildDisabled = () => {
     const disabled: any[] = [];
@@ -105,16 +110,16 @@ const DateTime: React.FC<DateTimeProps> = ({
   const disabledDays = buildDisabled();
 
   useEffect(() => {
-    if (defaultDateRange) {
-      setMonth(defaultDateRange?.from);
+    if (defaultMonth) {
+      setMonth(defaultMonth);
     }
-  }, [defaultDateRange]);
+  }, [defaultMonth]);
 
   return (
     <div className="calendar--dropdown">
       {mode !== 'time' &&
         (() => {
-          const calendarProps: any = {
+          const calendarProps = {
             mode: calendarMode,
             selected: dateRange,
             onSelect: handleSelect,
@@ -132,7 +137,7 @@ const DateTime: React.FC<DateTimeProps> = ({
                   .toUpperCase();
               },
             },
-          };
+          } as CalendarProps;
 
           return <Calendar {...calendarProps} />;
         })()}

package/src/components/organisms/DateTimePicker/DateTimePicker.tsx

@@ -61,6 +61,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
 }) => {
   const triggerRef = useRef<HTMLDivElement>(null);
   const popoverContentRef = useRef<HTMLDivElement>(null);
+  const openRef = useRef<boolean>(false);
 
   // Parse default value and set initial state
   const parseDefaultValue = useMemo(() => {
@@ -95,6 +96,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
     { hour: string; minute: string; meridiem: 'AM' | 'PM' } | undefined
   >(undefined);
   const [isOpen, setIsOpen] = useState(false);
+  const [defaultMonth, setDefaultMonth] = useState<Date | undefined>(undefined);
 
   const handleDtChange = React.useCallback(
     (payload: {
@@ -148,7 +150,8 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   useEffect(() => {
     setValue(parseDefaultValue.value);
     setSelectedDateRange(parseDefaultValue.dateRange);
-  }, [defaultValue]);
+    setDefaultMonth(parseDefaultValue.dateRange?.from);
+  }, [parseDefaultValue]);
 
   // Scroll to input when calendar opens (if scrollOnOpen is true)
   useEffect(() => {
@@ -160,7 +163,11 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
     if (isOpen) {
       ensurePopoverVisible(popoverContentRef, triggerRef, isOpen);
     }
-  }, [isOpen]);
+    if (openRef.current !== isOpen) {
+      setDefaultMonth(selectedDateRange.from);
+    }
+    openRef.current = isOpen;
+  }, [isOpen, selectedDateRange]);
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
@@ -197,6 +204,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
           onChange={handleDtChange}
           defaultDateRange={selectedDateRange}
           defaultTime={selectedTime}
+          defaultMonth={defaultMonth}
         />
       </PopoverContent>
     </Popover>