@agility/plenum-ui 1.3.35 → 1.3.37

package/lib/index.js

@@ -7063,11 +7063,11 @@ var Button = function (_a, ref) {
             : function () {
             }, disabled: isDisabled, "aria-disabled": isDisabled },
         iconObj &&
-            (isLoading ? (React__default["default"].createElement(Loader, { classes: "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, { 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))) : (React__default["default"].createElement("a", { type: isSubmit ? "submit" : "button", title: asLink.title || title, href: asLink.href, 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" }, {
+            (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
         }, {
             "active: border-purple-600 bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 active:border-purple-800 active:bg-purple-800": type === "primary"
@@ -7337,19 +7337,33 @@ var ButtonDropDown = function (_a) {
 };
 
 /** Comment */
-var Switch = function (_a) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? "md" : _c;
-    var _d = React.useState(defaultValue), enabled = _d[0], setEnabled = _d[1];
-    React.useEffect(function () {
-        onChange && onChange(enabled);
-    }, [enabled]);
-    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-white focus-visible:ring-opacity-75", { "bg-purple-600": enabled }, { "bg-gray-200": !enabled }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" });
+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 handleToggleChange = function (v) {
+        if (v === null)
+            return;
+        T_setIsChecked(v);
+        setToggleValue(!v ? "off" : "on");
+        onChange && onChange(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": enabled }, { "translate-x-0": !enabled }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && enabled }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !enabled });
-    return (React__default["default"].createElement("div", { className: "text-center" },
-        React__default["default"].createElement(ue, { checked: enabled, onChange: setEnabled, className: switchStyles },
-            React__default["default"].createElement("span", { className: "sr-only" }, "Use setting"),
-            React__default["default"].createElement("span", { "aria-hidden": "true", className: toggleStyles }))));
+    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
+                    ? function () { return handleToggleChange(null); }
+                    : function () { return handleToggleChange(!t_isChecked); }, "aria-disabled": isDisabled },
+                React__default["default"].createElement("span", { className: "sr-only" },
+                    "Use space to toggle ",
+                    toggleValue,
+                    "."),
+                React__default["default"].createElement("span", { "aria-hidden": "true", className: toggleStyles })))));
 };
 
 /**
@@ -12825,10 +12839,10 @@ exports.Dropdown = Dropdown;
 exports.Placeholder = Placeholder;
 exports.Radio = Radio;
 exports.Select = Select;
-exports.Switch = Switch;
 exports.TextInput = _TextInput;
 exports.TextInputAddon = _TextInputAddon;
 exports.TextInputSelect = TextInputSelect;
 exports.Textarea = _Textarea;
+exports.ToggleSwitch = ToggleSwitch;
 exports.TreeView = _TreeView;
 //# sourceMappingURL=index.js.map