oolib 2.170.4 → 2.170.6

package/dist/components/shadcn/calendar.d.ts

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { DayPicker } from "react-day-picker";
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+    className?: string;
+    classNames?: Record<string, string>;
+    showOutsideDays?: boolean;
+};
 declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): React.JSX.Element;
 declare namespace Calendar {
     var displayName: string;

package/dist/components/shadcn/calendar.js

@@ -61,18 +61,21 @@ var icons_1 = require("../../icons");
 var react_day_picker_1 = require("react-day-picker");
 var twmerge_1 = require("../../utils/twmerge");
 var CaretLeft = icons_1.icons.CaretLeft, CaretRight = icons_1.icons.CaretRight;
+if (!CaretLeft || !CaretRight) {
+    console.error('Required icons are not available calender carets');
+}
 function Calendar(_a) {
     var className = _a.className, classNames = _a.classNames, _b = _a.showOutsideDays, showOutsideDays = _b === void 0 ? true : _b, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
-    return (React.createElement(react_day_picker_1.DayPicker, __assign({ showOutsideDays: showOutsideDays, className: (0, twmerge_1.cn)("p-3", className), classNames: __assign({ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4", caption: "flex justify-center pt-1 relative items-center", caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", nav_button: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100", nav_button_previous: "absolute left-1", nav_button_next: "absolute right-1", table: "w-full border-collapse space-y-1", head_row: "flex", head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: (0, twmerge_1.cn)("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range"
+    return (React.createElement(react_day_picker_1.DayPicker, __assign({ showOutsideDays: showOutsideDays, className: (0, twmerge_1.cn)("p-3", className !== null && className !== void 0 ? className : ''), classNames: __assign({ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4", caption: "flex justify-center pt-1 relative items-center", caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", nav_button: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100", nav_button_previous: "absolute left-1", nav_button_next: "absolute right-1", table: "w-full border-collapse space-y-1", head_row: "flex", head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: (0, twmerge_1.cn)("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", (props === null || props === void 0 ? void 0 : props.mode) === "range"
                 ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
                 : "[&:has([aria-selected])]:rounded-md"), day: "h-8 w-8 p-0 font-normal aria-selected:opacity-100", day_range_start: "day-range-start", day_range_end: "day-range-end", day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", day_outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", day_hidden: "invisible" }, classNames), components: {
             IconLeft: function (_a) {
                 var className = _a.className, props = __rest(_a, ["className"]);
-                return (React.createElement(CaretLeft, __assign({ className: (0, twmerge_1.cn)("h-4 w-4", className) }, props)));
+                return (React.createElement(CaretLeft, __assign({ className: (0, twmerge_1.cn)("h-4 w-4", className !== null && className !== void 0 ? className : '') }, props)));
             },
             IconRight: function (_a) {
                 var className = _a.className, props = __rest(_a, ["className"]);
-                return (React.createElement(CaretRight, __assign({ className: (0, twmerge_1.cn)("h-4 w-4", className) }, props)));
+                return (React.createElement(CaretRight, __assign({ className: (0, twmerge_1.cn)("h-4 w-4", className !== null && className !== void 0 ? className : '') }, props)));
             },
         } }, props)));
 }

package/dist/components/shadcn/popover.js

@@ -54,21 +54,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopoverAnchor = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = void 0;
 var React = __importStar(require("react"));
 var PopoverPrimitive = __importStar(require("@radix-ui/react-popover"));
 var twmerge_1 = require("../../utils/twmerge");
-var Popover = PopoverPrimitive.Root;
+var Popover = (PopoverPrimitive === null || PopoverPrimitive === void 0 ? void 0 : PopoverPrimitive.Root) || null;
 exports.Popover = Popover;
-var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverTrigger = (PopoverPrimitive === null || PopoverPrimitive === void 0 ? void 0 : PopoverPrimitive.Trigger) || null;
 exports.PopoverTrigger = PopoverTrigger;
-var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverAnchor = (PopoverPrimitive === null || PopoverPrimitive === void 0 ? void 0 : PopoverPrimitive.Anchor) || null;
 exports.PopoverAnchor = PopoverAnchor;
 var PopoverContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.align, align = _b === void 0 ? "center" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 4 : _c, props = __rest(_a, ["className", "align", "sideOffset"]);
-    return (React.createElement(PopoverPrimitive.Portal, null,
-        React.createElement(PopoverPrimitive.Content, __assign({ ref: ref, align: align, sideOffset: sideOffset, className: (0, twmerge_1.cn)("z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props))));
+    return ((PopoverPrimitive === null || PopoverPrimitive === void 0 ? void 0 : PopoverPrimitive.Portal) ? (React.createElement(PopoverPrimitive.Portal, null,
+        React.createElement(PopoverPrimitive.Content, __assign({ ref: ref, align: align, sideOffset: sideOffset, className: (0, twmerge_1.cn)("z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)))) : null);
 });
 exports.PopoverContent = PopoverContent;
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+PopoverContent.displayName = ((_a = PopoverPrimitive === null || PopoverPrimitive === void 0 ? void 0 : PopoverPrimitive.Content) === null || _a === void 0 ? void 0 : _a.displayName) || 'PopoverContent';

package/dist/v2/components/DatePickerShadCN/index.js

@@ -44,102 +44,146 @@ function DatePickerWithRangeV3(_a) {
     var className = _a.className, _b = _a.value, value = _b === void 0 ? [null, null] : _b, onChange = _a.onChange, id = _a.id, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, _d = _a.futureDateOnly, futureDateOnly = _d === void 0 ? false : _d, _e = _a.previousDateOnly, previousDateOnly = _e === void 0 ? false : _e, _f = _a.allowPresentlyOngoing, allowPresentlyOngoing = _f === void 0 ? false : _f, _g = _a.invert, invert = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.debug, debug = _j === void 0 ? false : _j, _k = _a.startDateLabel, startDateLabel = _k === void 0 ? "Start Date" : _k, _l = _a.endDateLabel, endDateLabel = _l === void 0 ? "End Date" : _l, _m = _a.withPortal, withPortal = _m === void 0 ? false : _m;
     var _o = (0, react_1.useState)(""), inputValue = _o[0], setInputValue = _o[1];
     var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
+    // Ensure we have valid dates or null
+    var safeValue = Array.isArray(value) ? value : [null, null];
+    var _q = safeValue.map(function (date) {
+        return date instanceof Date && (0, date_fns_1.isValid)(date) ? date : null;
+    }), startDate = _q[0], endDate = _q[1];
     var currentDate = new Date();
     currentDate.setHours(0, 0, 0, 0);
     var yesterday = new Date(currentDate);
     yesterday.setDate(currentDate.getDate() - 1);
     // Update input value when controlled value changes
     (0, react_1.useEffect)(function () {
-        if (value[0]) {
-            if (value[1] === null) {
-                setInputValue("".concat((0, date_fns_1.format)(value[0], "PP"), " - Ongoing"));
-            }
-            else if (value[1]) {
-                setInputValue("".concat((0, date_fns_1.format)(value[0], "PP"), " - ").concat((0, date_fns_1.format)(value[1], "PP")));
+        try {
+            if (startDate) {
+                if (endDate === null) {
+                    setInputValue("".concat((0, date_fns_1.format)(startDate, "PP"), " - Ongoing"));
+                }
+                else if (endDate) {
+                    setInputValue("".concat((0, date_fns_1.format)(startDate, "PP"), " - ").concat((0, date_fns_1.format)(endDate, "PP")));
+                }
+                else {
+                    setInputValue((0, date_fns_1.format)(startDate, "PP"));
+                }
             }
             else {
-                setInputValue((0, date_fns_1.format)(value[0], "PP"));
+                setInputValue("");
             }
         }
-        else {
+        catch (error) {
+            console.error('Error formatting dates:', error);
             setInputValue("");
         }
-    }, [value]);
+    }, [startDate, endDate]);
     var handleInputChange = function (inputVal) {
+        if (!inputVal || typeof inputVal !== 'string')
+            return;
         setInputValue(inputVal);
         if (readOnly)
             return;
-        var dates = inputVal.split("-").map(function (d) { return d.trim(); });
-        if (dates.length === 2) {
-            var fromDate = (0, date_fns_1.parse)(dates[0], "PP", new Date());
-            var toDate = dates[1].toLowerCase() === "ongoing" ? null :
-                (0, date_fns_1.parse)(dates[1], "PP", new Date());
-            if ((0, date_fns_1.isValid)(fromDate) && (toDate === null || (0, date_fns_1.isValid)(toDate))) {
-                if (isDateValid(fromDate) && (toDate === null || isDateValid(toDate))) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(id, [fromDate, toDate]);
+        try {
+            var dates = inputVal.split("-").map(function (d) { return d === null || d === void 0 ? void 0 : d.trim(); }).filter(Boolean);
+            if (dates.length === 2) {
+                var fromDate = (0, date_fns_1.parse)(dates[0], "PP", new Date());
+                var toDate = dates[1].toLowerCase() === "ongoing" ? null :
+                    (0, date_fns_1.parse)(dates[1], "PP", new Date());
+                if ((0, date_fns_1.isValid)(fromDate) && (toDate === null || (0, date_fns_1.isValid)(toDate))) {
+                    if (isDateValid(fromDate) && (toDate === null || isDateValid(toDate))) {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(id, [fromDate, toDate]);
+                    }
                 }
             }
-        }
-        else if (dates.length === 1) {
-            var singleDate = (0, date_fns_1.parse)(dates[0], "PP", new Date());
-            if ((0, date_fns_1.isValid)(singleDate) && isDateValid(singleDate)) {
-                onChange === null || onChange === void 0 ? void 0 : onChange(id, [singleDate, undefined]);
+            else if (dates.length === 1) {
+                var singleDate = (0, date_fns_1.parse)(dates[0], "PP", new Date());
+                if ((0, date_fns_1.isValid)(singleDate) && isDateValid(singleDate)) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(id, [singleDate, undefined]);
+                }
             }
         }
+        catch (error) {
+            console.error('Error parsing input dates:', error);
+        }
     };
     var isDateValid = function (date) {
-        if (!date)
+        if (!date || !(date instanceof Date))
+            return true;
+        try {
+            if (futureDateOnly && !invert) {
+                return isFuture(date) || (allowPresentlyOngoing && isToday(date));
+            }
+            if (previousDateOnly && !invert) {
+                return isPast(date) || isToday(date);
+            }
             return true;
-        if (futureDateOnly && !invert) {
-            return isFuture(date) || (allowPresentlyOngoing && isToday(date));
         }
-        if (previousDateOnly && !invert) {
-            return isPast(date) || isToday(date);
+        catch (error) {
+            console.error('Error validating date:', error);
+            return false;
         }
-        return true;
     };
     var getMinDate = function (isEndDate) {
-        if (futureDateOnly && !invert) {
-            return currentDate;
+        try {
+            if (futureDateOnly && !invert) {
+                return currentDate;
+            }
+            if (isEndDate && startDate && (0, date_fns_1.isValid)(startDate)) {
+                return startDate;
+            }
         }
-        if (isEndDate && value[0]) {
-            return value[0];
+        catch (error) {
+            console.error('Error getting min date:', error);
         }
         return undefined;
     };
     var getMaxDate = function () {
-        if (previousDateOnly && !invert) {
-            return yesterday;
+        try {
+            if (previousDateOnly && !invert) {
+                return yesterday;
+            }
+        }
+        catch (error) {
+            console.error('Error getting max date:', error);
         }
         return undefined;
     };
     var handleCalendarSelect = function (dates) {
         if (readOnly)
             return;
-        if (!dates) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(id, [null, null]);
-            return;
-        }
-        var from = dates.from, to = dates.to;
-        if (from && isDateValid(from)) {
-            if (to && isDateValid(to)) {
-                onChange === null || onChange === void 0 ? void 0 : onChange(id, [from, to]);
-                setIsOpen(false);
+        try {
+            if (!dates) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(id, [null, null]);
+                return;
             }
-            else {
-                onChange === null || onChange === void 0 ? void 0 : onChange(id, [from, undefined]);
+            var _a = dates || {}, from = _a.from, to = _a.to;
+            if (from && isDateValid(from)) {
+                if (to && isDateValid(to)) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(id, [from, to]);
+                    setIsOpen(false);
+                }
+                else {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(id, [from, undefined]);
+                }
             }
         }
+        catch (error) {
+            console.error('Error handling calendar selection:', error);
+        }
     };
     var handleOngoingToggle = function (checked) {
-        if (value[0]) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(id, [value[0], checked ? null : undefined]);
+        try {
+            if (startDate) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(id, [startDate, checked ? null : undefined]);
+            }
+        }
+        catch (error) {
+            console.error('Error handling ongoing toggle:', error);
         }
     };
     if (debug) {
         console.log({
             id: id,
-            value: value,
+            value: safeValue,
             inputValue: inputValue,
             isOpen: isOpen,
             readOnly: readOnly,
@@ -156,158 +200,25 @@ function DatePickerWithRangeV3(_a) {
                 react_1.default.createElement(popover_1.PopoverTrigger, { asChild: true },
                     react_1.default.createElement("div", { className: "relative" },
                         react_1.default.createElement(TextInputs_1.TextInput, { id: id, placeholder: "Pick a date range", value: inputValue, onChange: function (id, value) { return handleInputChange(value); }, className: "w-[225px]", icon: "CalendarBlank", disabled: disabled, readOnly: readOnly }))),
-                react_1.default.createElement(popover_1.PopoverContent, { className: "w-auto p-0", align: "start" },
-                    react_1.default.createElement(calendar_1.Calendar, { initialFocus: true, mode: "range", defaultMonth: value[0] || undefined, selected: value[1] === null ? { from: value[0], to: undefined } :
-                            { from: value[0], to: value[1] }, onSelect: function (range) { return handleCalendarSelect(range); }, numberOfMonths: 2, disabled: function (date) {
-                            if (disabled)
-                                return true;
-                            if (readOnly)
-                                return true;
-                            var minDate = getMinDate(false);
-                            var maxDate = getMaxDate();
-                            if (minDate && date < minDate)
+                !disabled && !readOnly && (react_1.default.createElement(popover_1.PopoverContent, { className: "w-auto p-0", align: "start" },
+                    react_1.default.createElement(calendar_1.Calendar, { initialFocus: true, mode: "range", defaultMonth: startDate || undefined, selected: endDate === null ?
+                            { from: startDate, to: undefined } :
+                            { from: startDate, to: endDate }, onSelect: function (range) { return handleCalendarSelect(range); }, numberOfMonths: 2, disabled: function (date) {
+                            if (!date || disabled || readOnly)
                                 return true;
-                            if (maxDate && date > maxDate)
+                            try {
+                                var minDate = getMinDate(false);
+                                var maxDate = getMaxDate();
+                                if (minDate && date < minDate)
+                                    return true;
+                                if (maxDate && date > maxDate)
+                                    return true;
+                                return false;
+                            }
+                            catch (error) {
+                                console.error('Error in date disabled check:', error);
                                 return true;
-                            return false;
-                        } }))),
-            debug && (react_1.default.createElement("pre", { className: "mt-4 p-4 bg-gray-100 rounded" }, JSON.stringify({ value: value, inputValue: inputValue }, null, 2))))));
+                            }
+                        } })))),
+            debug && (react_1.default.createElement("pre", { className: "mt-4 p-4 bg-gray-100 rounded" }, JSON.stringify({ value: safeValue, inputValue: inputValue }, null, 2))))));
 }
-//  DatePickerWithRangeV3
-// function DatePickerDemo() {
-//   const [date, setDate] = React.useState();
-//   return (
-//     <Popover>
-//       <PopoverTrigger asChild>
-//         <Button
-//           variant={"outline"}
-//           className={cn(
-//             "w-[280px] justify-start text-left font-normal",
-//             !date && "text-muted-foreground"
-//           )}
-//         >
-//           <CalendarIcon />
-//           {date ? format(date, "PPP") : <span>Pick a date</span>}
-//         </Button>
-//       </PopoverTrigger>
-//       <PopoverContent className="w-auto p-0">
-//         <Calendar
-//           mode="single"
-//           selected={date}
-//           onSelect={setDate}
-//           initialFocus
-//         />
-//       </PopoverContent>
-//     </Popover>
-//   );
-// }
-// function DatePickerWithRange({ className }) {
-//   const [date, setDate] = React.useState({
-//     from: new Date(2022, 0, 20),
-//     to: addDays(new Date(2022, 0, 20), 20),
-//   });
-//   return (
-//     <div className={cn("grid gap-2", className)}>
-//       <Popover>
-//         <PopoverTrigger asChild>
-//           <Button
-//             id="date"
-//             variant={"outline"}
-//             className={cn(
-//               "w-[300px] justify-start text-left font-normal",
-//               !date && "text-muted-foreground"
-//             )}
-//           >
-//             <CalendarIcon />
-//             {date?.from ? (
-//               date.to ? (
-//                 <>
-//                   {format(date.from, "LLL dd, y")} -{" "}
-//                   {format(date.to, "LLL dd, y")}
-//                 </>
-//               ) : (
-//                 format(date.from, "LLL dd, y")
-//               )
-//             ) : (
-//               <span>Pick a date</span>
-//             )}
-//           </Button>
-//         </PopoverTrigger>
-//         <PopoverContent className="w-auto p-0" align="start">
-//           <Calendar
-//             initialFocus
-//             mode="range"
-//             defaultMonth={date?.from}
-//             selected={date}
-//             onSelect={setDate}
-//             numberOfMonths={2}
-//           />
-//         </PopoverContent>
-//       </Popover>
-//     </div>
-//   );
-// }
-// function DatePickerWithRange2({ className }) {
-//   const [date, setDate] = React.useState();
-//   const [inputValue, setInputValue] = React.useState("");
-//   const [isOpen, setIsOpen] = React.useState(false);
-//   const handleInputChange = (value) => {
-//     // const value = event.target.value;
-//     setInputValue(value);
-//     const dates = value.split("-").map((d) => d.trim());
-//     if (dates.length === 2) {
-//       const fromDate = parse(dates[0], "PP", new Date());
-//       const toDate = parse(dates[1], "PP", new Date());
-//       if (isValid(fromDate) && isValid(toDate)) {
-//         setDate({ from: fromDate, to: toDate });
-//       }
-//     } else if (dates.length === 1) {
-//       const singleDate = parse(dates[0], "PP", new Date());
-//       if (isValid(singleDate)) {
-//         setDate({ from: singleDate, to: undefined });
-//       }
-//     }
-//   };
-//   React.useEffect(() => {
-//     if (date?.from) {
-//       if (date.to) {
-//         setInputValue(`${format(date.from, "PP")} - ${format(date.to, "PP")}`);
-//       } else {
-//         setInputValue(format(date.from, "PP"));
-//       }
-//     }
-//   }, [date]);
-//   return (
-//     <div className={cn("grid gap-2", className)}>
-//       <Popover open={isOpen} onOpenChange={setIsOpen}>
-//         <PopoverTrigger asChild>
-//           <div className="relative">
-//             <TextInput
-//               id="date"
-//               placeholder="Pick a date range"
-//               value={inputValue}
-//               onChange={(id, value) => handleInputChange(value)}
-//               className="w-max"
-//               icon={"CalendarBlank"}
-//             />
-//           </div>
-//         </PopoverTrigger>
-//         <PopoverContent className="w-auto p-0" align="start">
-//           <Calendar
-//             initialFocus
-//             mode="range"
-//             defaultMonth={date?.from}
-//             selected={date}
-//             onSelect={(newDate) => {
-//               setDate(newDate);
-//               if (newDate?.to) {
-//                 setIsOpen(false);
-//               }
-//             }}
-//             numberOfMonths={2}
-//           />
-//         </PopoverContent>
-//       </Popover>
-//     </div>
-//   );
-// }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.170.4",
+  "version": "2.170.6",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",