@agility/plenum-ui 1.3.35 → 1.3.37

package/lib/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,29 @@
+import { FC } from "react";
+export interface IToggleSwitchProps {
+    /** size state */
+    size?: "sm" | "md" | "lg";
+    /** Toggle Switch label */
+    label?: string | null;
+    /** A Classname string to be used for the label*/
+    labelStyles?: string;
+    /** A Classname string to style the Switch Group*/
+    groupStyles?: string;
+    /** Toggle Switch ID */
+    id?: string;
+    /** Disabled state */
+    isDisabled?: boolean;
+    /** The value used when using this component inside a form, if it is checked.*/
+    value: "on" | "off";
+    /** Whether or not the switch is checked. */
+    isChecked: boolean;
+    /** If field is required */
+    isRequired?: boolean;
+    /** Error state */
+    /** Message or description */
+    /** The function to call when the switch is toggled. */
+    onChange?: (value: string) => void;
+    /** The name used when using this component inside a form.*/
+    name: string;
+}
+/** Comment */
+export declare const ToggleSwitch: FC<IToggleSwitchProps>;

package/lib/components/ToggleSwitch/ToggleSwitch.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react/types-6-0";
+import { Story } from "@storybook/react";
+import { IToggleSwitchProps } from "./ToggleSwitch";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const AllVariations: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentSm: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentMd: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentLg: Story<IToggleSwitchProps>;

package/lib/components/ToggleSwitch/ToggleSwitch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/ToggleSwitch/index.d.ts

@@ -0,0 +1 @@
+export * from "./ToggleSwitch";

package/lib/index.d.ts

@@ -1,14 +1,14 @@
-export * from './components/Button';
-export * from './components/Combobox';
-export * from './components/Dropdown';
-export * from './components/ButtonDropdown';
-export * from './components/Switch';
-export * from './components/TreeView';
-export * from './components/Avatar';
-export * from './components/Forms/TextInput';
-export * from './components/Forms/TextInputAddon';
-export * from './components/Forms/TextInputSelect';
-export * from './components/Forms/Radio';
-export * from './components/Forms/Textarea';
-export * from './components/Forms/Select';
-export * from './components/Forms/Checkbox';
+export * from "./components/Button";
+export * from "./components/Combobox";
+export * from "./components/Dropdown";
+export * from "./components/ButtonDropdown";
+export * from "./components/ToggleSwitch";
+export * from "./components/TreeView";
+export * from "./components/Avatar";
+export * from "./components/Forms/TextInput";
+export * from "./components/Forms/TextInputAddon";
+export * from "./components/Forms/TextInputSelect";
+export * from "./components/Forms/Radio";
+export * from "./components/Forms/Textarea";
+export * from "./components/Forms/Select";
+export * from "./components/Forms/Checkbox";

package/lib/index.esm.js

@@ -7037,11 +7037,11 @@ var Button = function (_a, ref) {
             : function () {
             }, disabled: isDisabled, "aria-disabled": isDisabled },
         iconObj &&
-            (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })) : (React__default.createElement(React__default.Fragment, null, iconObj))),
+            (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2 m-0" })) : (React__default.createElement(React__default.Fragment, null, iconObj))),
         icon &&
-            (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })) : (React__default.createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
-        !icon && !iconObj && isLoading && (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })),
-        label && React__default.createElement("span", null, label))) : (React__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.createElement(Loader, { classes: "h-5 w-5 border-2 m-0" })) : (React__default.createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
+        !icon && !iconObj && isLoading && (React__default.createElement(Loader, { classes: "h-5 w-5 border-2 m-0" })),
+        label && React__default.createElement("span", null, label))) : (React__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"
@@ -7311,19 +7311,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 = useState(defaultValue), enabled = _d[0], setEnabled = _d[1];
-    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 = useState(isChecked), t_isChecked = _g[0], T_setIsChecked = _g[1];
+    var _h = 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.createElement("div", { className: "text-center" },
-        React__default.createElement(ue, { checked: enabled, onChange: setEnabled, className: switchStyles },
-            React__default.createElement("span", { className: "sr-only" }, "Use setting"),
-            React__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.createElement(ue.Group, null,
+        React__default.createElement("div", { className: cn("flex items-center justify-between text-center", groupStyles && groupStyles) },
+            label && (React__default.createElement(ue.Label, { className: cn("mr-2", labelStyles && labelStyles
+                // isDisabled && "opacity-50"
+                ) }, label)),
+            React__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.createElement("span", { className: "sr-only" },
+                    "Use space to toggle ",
+                    toggleValue,
+                    "."),
+                React__default.createElement("span", { "aria-hidden": "true", className: toggleStyles })))));
 };
 
 /**
@@ -12790,5 +12804,5 @@ var Checkbox = function (_a) {
             message && (React__default.createElement("p", { id: "".concat(id, "-description"), className: "text-gray-500" }, message)))));
 };
 
-export { Avatar, _Button as Button, ButtonDropDown, Checkbox, Combobox, Dropdown, Placeholder, Radio, Select, Switch, _TextInput as TextInput, _TextInputAddon as TextInputAddon, TextInputSelect, _Textarea as Textarea, _TreeView as TreeView };
+export { Avatar, _Button as Button, ButtonDropDown, Checkbox, Combobox, Dropdown, Placeholder, Radio, Select, _TextInput as TextInput, _TextInputAddon as TextInputAddon, TextInputSelect, _Textarea as Textarea, ToggleSwitch, _TreeView as TreeView };
 //# sourceMappingURL=index.esm.js.map