pixelize-design-library 2.2.47 → 2.2.52

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -89,7 +89,7 @@ var PaymentCard = function (_a) {
                     react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1 },
                         react_1.default.createElement(react_2.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.billing),
                         react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax)))),
-                plan.priceDescription && (react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan === null || plan === void 0 ? void 0 : plan.priceDescription)),
+                plan.priceDescription && (react_1.default.createElement(react_2.Text, { color: theme.colors.green[800], mt: 2 }, plan === null || plan === void 0 ? void 0 : plan.priceDescription)),
                 react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan.description)),
             !isActive && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
             react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },

package/dist/Components/DatePicker/DatePicker.js

@@ -195,7 +195,7 @@ function CustomDatePicker(props) {
                 !popoverRef.current.contains(event.target) &&
                 !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
                 if (tempDate) {
-                    props.onChange(tempDate); // add new
+                    props.onChange(tempDate); // commit latest temp on outside click
                 }
                 onClose();
             }
@@ -209,7 +209,7 @@ function CustomDatePicker(props) {
         return function () {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [isOpen, onClose]);
+    }, [isOpen, onClose, tempDate, props]);
     return (react_1.default.createElement(react_2.Box, { width: width, position: "relative" },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
         react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true },

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -134,7 +134,7 @@ var RangeDatePicker = function (props) {
         };
         document.addEventListener("mousedown", handleMouseDownOutside, true);
         return function () { return document.removeEventListener("mousedown", handleMouseDownOutside, true); };
-    }, [isOpen, onClose]);
+    }, [isOpen, onClose, tempRangeStart, tempRangeEnd]);
     var handleClear = function () {
         setTempRangeStart(null);
         setTempRangeEnd(null);

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -542,7 +542,7 @@ var SingleDatePicker = function (props) {
             document.removeEventListener("mousedown", handleClickOutside, true);
             document.removeEventListener("click", handleClickOutside, true);
         };
-    }, [isOpen]);
+    }, [isOpen, tempDate, activeFormat]);
     var ensureMaskValue = (0, react_1.useCallback)(function () {
         var _a, _b, _c, _d;
         if (!enableMask) {
@@ -933,7 +933,7 @@ var SingleDatePicker = function (props) {
         : tempDate
             ? (0, date_fns_1.format)(tempDate, resolvedDateFormat)
             : "";
-    return (react_1.default.createElement(react_2.FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width },
+    return (react_1.default.createElement(react_2.FormControl, { id: id, isDisabled: disabled, width: width },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
         react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: function () {
                 if (suppressOnCloseFinalizeRef.current) {

package/dist/Components/DatePicker/TimePicker.js

@@ -28,15 +28,22 @@ var react_2 = require("@chakra-ui/react");
 var TimePicker = function (_a) {
     var date = _a.date, onChange = _a.onChange, dateFormat = _a.dateFormat;
     var is12HourFormat = /(hh|h).*a/i.test(dateFormat);
-    var _b = (0, react_1.useState)(date.getHours()), hour = _b[0], setHour = _b[1];
+    var deriveDisplayHour = function (rawHour) {
+        if (!is12HourFormat)
+            return rawHour;
+        var mod = rawHour % 12;
+        return mod === 0 ? 12 : mod;
+    };
+    var initialHour = deriveDisplayHour(date.getHours());
+    var _b = (0, react_1.useState)(initialHour), hour = _b[0], setHour = _b[1];
     var _c = (0, react_1.useState)(date.getMinutes()), minute = _c[0], setMinute = _c[1];
     var _d = (0, react_1.useState)(is12HourFormat ? (date.getHours() >= 12 ? "PM" : "AM") : ""), ampm = _d[0], setAmpm = _d[1];
     (0, react_1.useEffect)(function () {
-        var newHour = date.getHours();
-        setHour(newHour);
+        var rawHour = date.getHours();
+        setHour(deriveDisplayHour(rawHour));
         setMinute(date.getMinutes());
         if (is12HourFormat) {
-            setAmpm(newHour >= 12 ? "PM" : "AM");
+            setAmpm(rawHour >= 12 ? "PM" : "AM");
         }
     }, [date, is12HourFormat]);
     var convertTo24Hour = function (hr, meridiem) {
@@ -45,8 +52,9 @@ var TimePicker = function (_a) {
         return hr === 12 ? 12 : hr + 12;
     };
     var updateTime = function (hrInput, min, meridiem) {
+        var effectiveMeridiem = meridiem || ampm || "AM";
         var newHour = is12HourFormat
-            ? convertTo24Hour(hrInput, meridiem || ampm)
+            ? convertTo24Hour(hrInput, effectiveMeridiem)
             : hrInput;
         var newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), newHour, min, 0, 0);
         onChange(newDate);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.47",
+  "version": "2.2.52",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",