Merge branch 'xola:master' into X2-6853

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.1.8",
+    "version": "2.1.13",
     "description": "Xola UI Kit",
     "license": "MIT",
     "files": [

src/components/Breakdown.jsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { createContext, useContext } from "react";
+import { isNumber } from "lodash";
 import { Currency } from "./Utilities/Currency";
 
 const colors = {
@@ -49,9 +50,13 @@ const BreakdownItem = ({ children, info, methodIcon, secondary, value, className
             </td>
 
             <td className="w-[1%] whitespace-nowrap pl-4 text-right">
-                <Currency shouldRemoveTrailingZeroes={false} currency={currency}>
-                    {value}
-                </Currency>
+                {isNumber(value) ? (
+                    <Currency shouldRemoveTrailingZeroes={false} currency={currency}>
+                        {value}
+                    </Currency>
+                ) : (
+                    <span>{value}</span>
+                )}
             </td>
         </tr>
     );

src/components/DatePicker/DatePickerPopover.jsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { cloneElement, forwardRef, useState } from "react";
+import React, { cloneElement, forwardRef, useEffect, useState } from "react";
 import { CalendarIcon, DownArrowIcon } from "../..";
 import { formatDate } from "../../helpers/date";
 import { Input } from "../Forms/Input";
@@ -42,11 +42,13 @@ export const DatePickerPopover = ({
     };
 
     const handleClickOutside = () => {
-        // Revert back to the original value because the user didn't apply the changes
-        onChange(originalValue);
         toggleVisibility();
     };
 
+    useEffect(() => {
+        setOriginalValue(value);
+    }, [value]);
+
     return (
         <Popover
             visible={isVisible}

src/components/Drawer.jsx

@@ -42,7 +42,7 @@ export const Drawer = ({ isOpen = false, title, content, onClose, classNames = {
                             leaveFrom="translate-x-0"
                             leaveTo={position === "right" ? "translate-x-full" : "-translate-x-full"}
                         >
-                            <div className="flex w-screen max-w-xl md:max-w-screen-md">
+                            <div className="flex w-screen md:max-w-screen-md 2xl:max-w-screen-lg">
                                 {position === "right" ? <CloseButton onClose={onClose} /> : null}
 
                                 <div

src/components/Forms/InlineValuePopover.jsx

@@ -35,7 +35,7 @@ export const InlineValuePopover = ({
                 )}
                 onClick={handleClick}
             >
-                <span className="border-b border-b-black font-bold text-black">
+                <span className={clsx("border-b border-b-black font-bold text-black", classNames?.textField)}>
                     <ValuePopoverText value={text} error={error} />
                 </span>
                 {showArrow && <DownArrowIcon size="medium" />}