pixelize-design-library 2.2.5 → 2.2.6

package/dist/Components/Input/Switch/InputSwitch.js

@@ -29,10 +29,12 @@ exports.InputSwitch = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../../Common/FormLabel");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var InputSwitch = function (_a) {
     var switchText = _a.switchText, _b = _a.switchTextPosition, switchTextPosition = _b === void 0 ? "right" : _b, id = _a.id, isChecked = _a.isChecked, label = _a.label, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "md" : _c, props = __rest(_a, ["switchText", "switchTextPosition", "id", "isChecked", "label", "isInformation", "informationMessage", "isRequired", "size"]);
-    var activeColor = (0, react_2.useColorModeValue)("blue.500", "blue.300");
-    var inactiveColor = (0, react_2.useColorModeValue)("gray.300", "gray.600");
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var activeColor = (0, react_2.useColorModeValue)(theme.colors.primary[500], theme.colors.primary[300]);
+    var inactiveColor = (0, react_2.useColorModeValue)(theme.colors.gray[300], theme.colors.gray[600]);
     var sizeStyles = {
         sm: { fontSize: "sm", spacing: 1 },
         md: { fontSize: "md", spacing: 2 },

package/dist/Components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { MultiSelectProps } from "./MultiSelectProps";
-export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, errorMessage, }: MultiSelectProps): React.JSX.Element;
+export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, error, errorMessage, }: MultiSelectProps): React.JSX.Element;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -60,18 +60,19 @@ var generateUniqueId = (function () {
     };
 })();
 function MultiSelect(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.label, label = _c === void 0 ? "label" : _c, _d = _a.isRequired, isRequired = _d === void 0 ? true : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, _f = _a.informationMessage, informationMessage = _f === void 0 ? "" : _f, name = _a.name, id = _a.id, _g = _a.placeholderText, placeholderText = _g === void 0 ? "Type valid email and press enter" : _g, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, size = _a.size, inputStyle = _a.inputStyle, helperText = _a.helperText, errorMessage = _a.errorMessage;
+    var _b, _c;
+    var value = _a.value, onValueChange = _a.onValueChange, _d = _a.width, width = _d === void 0 ? "100%" : _d, _e = _a.label, label = _e === void 0 ? "label" : _e, _f = _a.isRequired, isRequired = _f === void 0 ? true : _f, _g = _a.isInformation, isInformation = _g === void 0 ? false : _g, _h = _a.informationMessage, informationMessage = _h === void 0 ? "" : _h, name = _a.name, id = _a.id, _j = _a.placeholderText, placeholderText = _j === void 0 ? "Type valid email and press enter" : _j, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, size = _a.size, inputStyle = _a.inputStyle, helperText = _a.helperText, error = _a.error, errorMessage = _a.errorMessage;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _h = (0, react_1.useState)(value), options = _h[0], setOptions = _h[1];
-    var _j = (0, react_1.useState)(""), inputValue = _j[0], setInputValue = _j[1];
-    var _k = (0, react_1.useState)(""), error = _k[0], setError = _k[1];
+    var _k = (0, react_1.useState)(value), options = _k[0], setOptions = _k[1];
+    var _l = (0, react_1.useState)(""), inputValue = _l[0], setInputValue = _l[1];
+    var _m = (0, react_1.useState)(""), localError = _m[0], setLocalError = _m[1];
     var inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         setOptions(value);
     }, [value]);
     var handleInputChange = function (e) {
         setInputValue(e.target.value);
-        setError("");
+        setLocalError("");
     };
     var validateEmail = function (email) {
         var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -80,7 +81,7 @@ function MultiSelect(_a) {
     var handleKeyDown = function (e) {
         if (e.key === "Enter" && inputValue.trim() !== "") {
             if (!validateEmail(inputValue)) {
-                setError("Invalid email address");
+                setLocalError("Invalid email address");
                 return;
             }
             var existingOption = options.find(function (option) { return option.label === inputValue; });
@@ -105,15 +106,22 @@ function MultiSelect(_a) {
     };
     return (react_1.default.createElement(react_2.Box, { width: width },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2, align: "center", px: 2, border: "1px solid", borderColor: theme.colors.gray[300], borderRadius: "sm", bg: theme.colors.white, minH: "42px", _focusWithin: {
-                borderColor: theme.colors.primary[500],
-                boxShadow: "0 0 0 1px " + theme.colors.primary[500],
+        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2, align: "center", px: 2, border: "1px solid", borderColor: error || localError
+                ? theme.colors.red[500]
+                : theme.colors.gray[300], borderRadius: "sm", bg: theme.colors.white, minH: "42px", _focusWithin: {
+                borderColor: error || localError
+                    ? theme.colors.red[500]
+                    : theme.colors.primary[500],
+                boxShadow: "0 0 0 0.125rem" +
+                    (error || localError
+                        ? (_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error
+                        : (_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary),
             } },
             options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", borderRadius: "full", variant: "subtle", colorScheme: "blue" },
                 react_1.default.createElement(react_2.TagLabel, null, option.label),
                 react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemove(option); } }))); }),
             react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", flex: "1", style: __assign(__assign({}, inputStyle), { backgroundColor: "transparent", fontWeight: 500, color: theme.colors.gray[700], fontSize: 15, letterSpacing: 0.3 }), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })),
-        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        (error || localError) && (react_1.default.createElement(ErrorMessage_1.default, { errorMessage: localError || errorMessage })),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }
 exports.default = MultiSelect;

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -11,6 +11,7 @@ export type MultiSelectProps = {
     placeholderText?: string;
     isDisabled?: boolean;
     isReadOnly?: boolean;
+    error?: boolean;
     size?: string;
     inputStyle?: {};
     errorMessage?: string;

package/dist/Components/SideBar/SideBar.js

@@ -21,7 +21,7 @@ var Sidebar_1 = require("../../Constants/Sidebar");
 var lucide_react_1 = require("lucide-react");
 var MenuItems_1 = __importDefault(require("./components/MenuItems"));
 var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
-var TextTruncation_1 = __importDefault(require("./components/TextTruncation"));
+var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 function Sidebar(_a) {
     var _b;
     var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, isLoading = _a.isLoading, loadingLines = _a.loadingLines;
@@ -36,8 +36,8 @@ function Sidebar(_a) {
                 react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName))) : (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "center", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
                 react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
                     react_1.default.createElement(defaultLogo_1.default, null)),
-                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", color: theme.colors.white, display: toggle ? "none" : "block", lineHeight: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", w: "45%" },
-                    react_1.default.createElement(TextTruncation_1.default, { open: toggle, fontSize: "1rem", flex: "1" }, companyName)))))),
+                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, display: toggle ? "none" : "flex", lineHeight: 2 },
+                    react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right" }, companyName)))))),
             react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
             react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
                 react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: loadingLines ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },

package/dist/Components/SideBar/components/OverflowTooltipText.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface OverflowWrapperWithTooltipProps {
+    children: React.ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    maxWidth?: string | number;
+    isTooltipDisabled?: boolean;
+}
+declare const OverflowTooltipText: React.FC<OverflowWrapperWithTooltipProps>;
+export default OverflowTooltipText;

package/dist/Components/SideBar/components/OverflowTooltipText.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+var OverflowTooltipText = function (_a) {
+    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? "bottom" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "200px" : _c, _d = _a.isTooltipDisabled, isTooltipDisabled = _d === void 0 ? false : _d;
+    var contentRef = (0, react_1.useRef)(null);
+    var _e = (0, react_1.useState)(""), textContent = _e[0], setTextContent = _e[1];
+    var _f = (0, react_1.useState)(false), isOverflowing = _f[0], setIsOverflowing = _f[1];
+    (0, react_1.useEffect)(function () {
+        var el = contentRef.current;
+        if (!el)
+            return;
+        var checkOverflow = function () {
+            setTextContent(el.textContent || "");
+            var sw = Math.round(el.scrollWidth);
+            var cw = Math.round(el.clientWidth);
+            setIsOverflowing(sw > cw + 1);
+        };
+        checkOverflow();
+        var ro = new ResizeObserver(function () { return checkOverflow(); });
+        ro.observe(el);
+        var mo = new MutationObserver(function () { return checkOverflow(); });
+        mo.observe(el, { childList: true, subtree: true, characterData: true });
+        window.addEventListener("resize", checkOverflow);
+        return function () {
+            ro.disconnect();
+            mo.disconnect();
+            window.removeEventListener("resize", checkOverflow);
+        };
+    }, [children]);
+    var shouldShowTooltip = isOverflowing && !isTooltipDisabled;
+    return (react_1.default.createElement(ToolTip_1.default, { label: textContent, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true },
+        react_1.default.createElement(react_2.Box, { ref: contentRef, as: "div", display: "inline-block", maxWidth: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children)));
+};
+exports.default = OverflowTooltipText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",