@agility/plenum-ui 1.3.37 → 1.3.39

package/lib/index.js

@@ -7338,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 })))));
 };