@agility/plenum-ui 1.3.38 → 1.3.40

package/lib/components/Button/Button.d.ts

@@ -35,7 +35,7 @@ export interface ButtonProps {
     isSubmit?: boolean;
     isWidthFull?: boolean;
     /**
-     * Add on className
+     * Add on classes
      */
     className?: string;
     iconObj?: React.ReactNode;

package/lib/components/Forms/InputCounter/InputCounter.d.ts

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+import { FC } from "react";
 export interface InputCounterProps {
     /** Counter limit */
-    limit: number;
+    limit: number | undefined;
     /** Counter current number */
     current: number;
 }

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

@@ -1,27 +1,26 @@
 import { FC } from "react";
 export interface IToggleSwitchProps {
-    /** size state */
+    /** size of the toggle - default value is "md" */
     size?: "sm" | "md" | "lg";
     /** Toggle Switch label */
     label?: string | null;
-    /** A Classname string to be used for the label*/
+    /** A Classname to be used for the label*/
     labelStyles?: string;
-    /** A Classname string to style the Switch Group*/
+    /** A Classname  to style the Switch Group*/
     groupStyles?: string;
-    /** Toggle Switch ID */
-    id?: string;
-    /** Disabled state */
+    /** Toggle Switch ID*/
+    id: string;
+    /** Disabled state - default value is false*/
     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 */
+    /**A function to update isChecked State*/
+    onChangeHandler: (state: boolean, value: string) => void;
+    /** If field is required - default value is false */
     isRequired?: boolean;
-    /** Error state */
+    /** Error state - default value is false*/
+    isError?: boolean;
     /** 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;
 }

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

@@ -4,6 +4,18 @@ 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>;
+export declare const ToggleSwitchComponentSmDisabled: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentSmChecked: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentSmUnchecked: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentSmError: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentSmRequired: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentMdDisabled: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentMdChecked: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentMdUnchecked: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentMdError: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentMdRequired: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentLgDisabled: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentLgChecked: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentLgUnchecked: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentLgError: Story<IToggleSwitchProps>;
+export declare const ToggleSwitchComponentLgRequired: Story<IToggleSwitchProps>;

package/lib/index.esm.js

@@ -7009,8 +7009,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.createElement("div", { className: outerLoaderStyles, role: "status" });
 }
 
@@ -7035,10 +7037,10 @@ var Button = function (_a, ref) {
             : function () {
             }, disabled: isDisabled, "aria-disabled": isDisabled },
         iconObj &&
-            (isLoading ? (React__default.createElement(Loader, { className: "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, { className: "h-5 w-5 border-2" })) : (React__default.createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
-        !icon && !iconObj && isLoading && (React__default.createElement(Loader, { className: "h-5 w-5 border-2" })),
+            (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
         }, {
@@ -7051,10 +7053,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.createElement(Loader, { className: "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" })) : (React__default.createElement(React__default.Fragment, null, iconObj))),
         icon &&
-            (isLoading ? (React__default.createElement(Loader, { className: "h-5 w-5 border-2" })) : (React__default.createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
-        !icon && !iconObj && isLoading && (React__default.createElement(Loader, { className: "h-5 w-5 border-2" })),
+            (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)));
 };
 var _Button = forwardRef(Button);
@@ -7310,30 +7312,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 = useState(isChecked), t_isChecked = _g[0], T_setIsChecked = _g[1];
-    var _h = 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 = useState(isChecked), toggleChecked = _e[0], setToggleChecked = _e[1];
+    var toggleValue = useState(toggleChecked ? "on" : "off")[0];
+    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.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
+            label && (React__default.createElement(ue.Label, { className: cn("mr-2", labelStyles && labelStyles) },
+                label,
+                isRequired && (React__default.createElement("span", { className: "text-red-500" }, "\u00A0*")))),
+            React__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.createElement("span", { className: "sr-only" },
                     "Use space to toggle ",
-                    toggleValue,
+                    toggleChecked ? "on" : "off",
                     "."),
                 React__default.createElement("span", { "aria-hidden": "true", className: toggleStyles })))));
 };
@@ -12397,14 +12407,12 @@ var Avatar = function (_a) {
 /** Primary UI component for user interaction */
 var InputCounter = function (_a) {
     var _b = _a.current, current = _b === void 0 ? 0 : _b, limit = _a.limit;
-    return (React__default.createElement("span", { className: "text-gray-500 text-sm mt-1 block text-center" },
-        React__default.createElement("span", { className: "currentCount" },
-            current > limit ? limit : current,
-            " "),
-        "/",
-        React__default.createElement("span", { className: "limitCount" },
-            " ",
-            limit)));
+    return (React__default.createElement("div", { className: "mt-1 text-center text-sm text-gray-500 flex gap-1" },
+        React__default.createElement("div", { className: "currentCount" }, current),
+        (limit || 0) > 0 &&
+            React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", null, "/"),
+                React__default.createElement("div", { className: "limitCount" }, limit))));
 };
 
 /** default input styles */
@@ -12443,11 +12451,11 @@ var useId = function () {
 };
 
 var TextInput = function (_a, ref) {
-    var label = _a.label, isFocused = _a.isFocused, isError = _a.isError, id = _a.id, name = _a.name, isRequired = _a.isRequired, type = _a.type, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, isReadonly = _a.isReadonly, message = _a.message, isShowCounter = _a.isShowCounter, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, onChange = _a.onChange, externalValue = _a.value, className = _a.className;
+    var label = _a.label, isFocused = _a.isFocused, isError = _a.isError, id = _a.id, name = _a.name, isRequired = _a.isRequired, type = _a.type, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, isReadonly = _a.isReadonly, message = _a.message, isShowCounter = _a.isShowCounter, maxLength = _a.maxLength, onChange = _a.onChange, externalValue = _a.value, className = _a.className;
     var uniqueID = useId();
-    var _c = useState(Boolean(isFocused)), isFocus = _c[0], setIsFocus = _c[1];
-    var _d = useState(false); _d[0]; var setIsActive = _d[1];
-    var _e = useState(externalValue || defaultValue || ""), value = _e[0], setValue = _e[1];
+    var _b = useState(Boolean(isFocused)), isFocus = _b[0], setIsFocus = _b[1];
+    var _c = useState(false); _c[0]; var setIsActive = _c[1];
+    var _d = useState(externalValue || defaultValue || ""), value = _d[0], setValue = _d[1];
     var inputRef = useRef(null);
     useEffect(function () {
         //if the external value is updated by the parent component, reset the value in here...