@agility/plenum-ui 1.3.38 → 1.3.39

package/lib/index.js

@@ -7035,8 +7035,10 @@ var DynamicIcons = function (_a) {
 };
 
 function Loader(_a) {
-    var className = _a.className;
-    var outerLoaderStyles = cn("rounded-full border-purple-700 inline-block border-r-gray-200 animate-spin", className ? className : "w-16 h-16 border-8 m-auto");
+    var classes = _a.classes;
+    var outerLoaderStyles = cn('rounded-full border-purple-700 inline-block border-r-gray-200 animate-spin m-auto', classes, {
+        'w-16 h-16 border-8': !classes
+    });
     return React__default["default"].createElement("div", { className: outerLoaderStyles, role: "status" });
 }
 
@@ -7061,10 +7063,10 @@ var Button = function (_a, ref) {
             : function () {
             }, disabled: isDisabled, "aria-disabled": isDisabled },
         iconObj &&
-            (isLoading ? (React__default["default"].createElement(Loader, { className: "h-5 w-5 border-2" })) : (React__default["default"].createElement(React__default["default"].Fragment, null, iconObj))),
+            (isLoading ? (React__default["default"].createElement(Loader, { classes: "h-5 w-5 border-2 m-0" })) : (React__default["default"].createElement(React__default["default"].Fragment, null, iconObj))),
         icon &&
-            (isLoading ? (React__default["default"].createElement(Loader, { className: "h-5 w-5 border-2" })) : (React__default["default"].createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
-        !icon && !iconObj && isLoading && (React__default["default"].createElement(Loader, { className: "h-5 w-5 border-2" })),
+            (isLoading ? (React__default["default"].createElement(Loader, { classes: "h-5 w-5 border-2 m-0" })) : (React__default["default"].createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
+        !icon && !iconObj && isLoading && (React__default["default"].createElement(Loader, { classes: "h-5 w-5 border-2 m-0" })),
         label && React__default["default"].createElement("span", null, label))) : (React__default["default"].createElement("a", { type: isSubmit ? "submit" : "button", title: asLink.title || title, href: asLink.href, target: asLink.target, className: cn("inline-flex items-center justify-center space-x-2 rounded border transition-all", { "w-full": isWidthFull === true }, { "px-4 py-2 text-sm": size === "sm" }, { "px-5 py-2 text-base": size === "base" }, { "px-5 py-2 text-lg": size === "lg" }, {
             "cursor-auto  opacity-50": isDisabled
         }, {
@@ -7077,10 +7079,10 @@ var Button = function (_a, ref) {
             "border-red-300 bg-red-600 text-white hover:bg-red-700 hover:text-white": type === "danger"
         }, className), "aria-disabled": isDisabled },
         iconObj &&
-            (isLoading ? (React__default["default"].createElement(Loader, { className: "h-5 w-5 border-2" })) : (React__default["default"].createElement(React__default["default"].Fragment, null, iconObj))),
+            (isLoading ? (React__default["default"].createElement(Loader, { classes: "h-5 w-5 border-2" })) : (React__default["default"].createElement(React__default["default"].Fragment, null, iconObj))),
         icon &&
-            (isLoading ? (React__default["default"].createElement(Loader, { className: "h-5 w-5 border-2" })) : (React__default["default"].createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
-        !icon && !iconObj && isLoading && (React__default["default"].createElement(Loader, { className: "h-5 w-5 border-2" })),
+            (isLoading ? (React__default["default"].createElement(Loader, { classes: "h-5 w-5 border-2" })) : (React__default["default"].createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
+        !icon && !iconObj && isLoading && (React__default["default"].createElement(Loader, { classes: "h-5 w-5 border-2" })),
         label && React__default["default"].createElement("span", null, label)));
 };
 var _Button = React.forwardRef(Button);
@@ -7336,30 +7338,38 @@ var ButtonDropDown = function (_a) {
 
 /** Comment */
 var ToggleSwitch = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.label, label = _c === void 0 ? "Label" : _c, labelStyles = _a.labelStyles, groupStyles = _a.groupStyles, isDisabled = _a.isDisabled, _d = _a.value, value = _d === void 0 ? "off" : _d, _e = _a.isChecked, isChecked = _e === void 0 ? false : _e, _f = _a.id, id = _f === void 0 ? "" : _f, name = _a.name, onChange = _a.onChange;
-    var _g = React.useState(isChecked), t_isChecked = _g[0], T_setIsChecked = _g[1];
-    var _h = React.useState(t_isChecked ? "on" : "off"), toggleValue = _h[0], setToggleValue = _h[1];
+    var _b = _a.size, size = _b === void 0 ? "md" : _b, label = _a.label, labelStyles = _a.labelStyles, groupStyles = _a.groupStyles, isDisabled = _a.isDisabled, isChecked = _a.isChecked, onChangeHandler = _a.onChangeHandler, id = _a.id, name = _a.name, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, _d = _a.isError
+    // onChange
+    , isError = _d === void 0 ? false : _d
+    // onChange
+    ;
+    var _e = React.useState(isChecked), toggleChecked = _e[0], setToggleChecked = _e[1];
+    var toggleValue = React.useState(toggleChecked ? "on" : "off")[0];
+    React.useEffect(function () { return setToggleChecked(isChecked); }, [isChecked]);
+    //Styles for the switch input/button
+    var switchStyles = cn("relative inline-flex flex-shrink-0 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-purple-500 focus-visible:ring-opacity-75 focus-within:ring-2  focus-within:ring-purple-500 focus-within:ring-opacity-75 focus:ring-2  focus:ring-purple-500 focus:ring-opacity-75", { "bg-purple-600": toggleChecked }, { "bg-gray-200": !toggleChecked }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" }, {
+        "focus-visible:ring-red-600 focus-within:ring-red-600 focus:ring-red-600 !bg-red-400": isError
+    }, { "opacity-75 !bg-purple-300": isDisabled });
+    // Styles for the  circular button inside the switch
+    var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", " transform ring-0 transition ease-in-out duration-200", { "translate-x-9": toggleChecked }, { "translate-x-0": !toggleChecked }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && toggleChecked }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !toggleChecked });
     var handleToggleChange = function (v) {
         if (v === null)
             return;
-        T_setIsChecked(v);
-        setToggleValue(!v ? "off" : "on");
-        onChange && onChange(toggleValue);
+        console.log(v);
+        setToggleChecked(v);
+        onChangeHandler && onChangeHandler(v, toggleValue);
     };
-    var switchStyles = cn("relative inline-flex flex-shrink-0", "border-2 border-transparent rounded-full cursor-pointer", "transition-colors ease-in-out duration-200 focus:outline-none", "focus-visible:ring-2  focus-visible:ring-purple-500 focus-visible:ring-opacity-75", "focus-within:ring-2  focus-within:ring-purple-500 focus-within:ring-opacity-75", "focus:ring-2  focus:ring-purple-500 focus:ring-opacity-75", { "bg-purple-600": t_isChecked }, { "bg-gray-200": !t_isChecked }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" }, isDisabled && "opacity-75 !bg-purple-300");
-    // the circular button inside the switch
-    var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", " transform ring-0 transition ease-in-out duration-200", { "translate-x-9": t_isChecked }, { "translate-x-0": !t_isChecked }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && t_isChecked }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !t_isChecked });
     return (React__default["default"].createElement(ue.Group, null,
         React__default["default"].createElement("div", { className: cn("flex items-center justify-between text-center", groupStyles && groupStyles) },
-            label && (React__default["default"].createElement(ue.Label, { className: cn("mr-2", labelStyles && labelStyles
-                // isDisabled && "opacity-50"
-                ) }, label)),
-            React__default["default"].createElement(ue, { checked: t_isChecked || toggleValue === "on" || value === "on", name: name, value: toggleValue, id: id, className: switchStyles, onChange: isDisabled
+            label && (React__default["default"].createElement(ue.Label, { className: cn("mr-2", labelStyles && labelStyles) },
+                label,
+                isRequired && (React__default["default"].createElement("span", { className: "text-red-500" }, "\u00A0*")))),
+            React__default["default"].createElement(ue, { checked: toggleChecked, name: name, value: toggleValue, id: id, className: switchStyles, onChange: isDisabled
                     ? function () { return handleToggleChange(null); }
-                    : function () { return handleToggleChange(!t_isChecked); }, "aria-disabled": isDisabled },
+                    : function (v) { return handleToggleChange(v); }, "aria-disabled": isDisabled },
                 React__default["default"].createElement("span", { className: "sr-only" },
                     "Use space to toggle ",
-                    toggleValue,
+                    toggleChecked ? "on" : "off",
                     "."),
                 React__default["default"].createElement("span", { "aria-hidden": "true", className: toggleStyles })))));
 };