pixelize-design-library 2.2.4 → 2.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/Components/Input/Switch/InputSwitch.js +4 -2
  2. package/dist/Components/MultiSelect/MultiSelect.d.ts +1 -1
  3. package/dist/Components/MultiSelect/MultiSelect.js +18 -10
  4. package/dist/Components/MultiSelect/MultiSelectProps.d.ts +1 -0
  5. package/dist/Components/SideBar/SideBar.d.ts +1 -1
  6. package/dist/Components/SideBar/SideBar.js +19 -11
  7. package/dist/Components/SideBar/SideBarProps.d.ts +1 -0
  8. package/dist/Components/SideBar/components/OverflowTooltipText.d.ts +9 -0
  9. package/dist/Components/SideBar/components/OverflowTooltipText.js +63 -0
  10. package/package.json +1 -1
package/dist/Components/Input/Switch/InputSwitch.js CHANGED
@@ -29,10 +29,12 @@ exports.InputSwitch = void 0;
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var react_2 = require("@chakra-ui/react");
31
31
  var FormLabel_1 = require("../../Common/FormLabel");
32
+ var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
32
33
  var InputSwitch = function (_a) {
33
34
  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"]);
34
- var activeColor = (0, react_2.useColorModeValue)("blue.500", "blue.300");
35
- var inactiveColor = (0, react_2.useColorModeValue)("gray.300", "gray.600");
35
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
36
+ var activeColor = (0, react_2.useColorModeValue)(theme.colors.primary[500], theme.colors.primary[300]);
37
+ var inactiveColor = (0, react_2.useColorModeValue)(theme.colors.gray[300], theme.colors.gray[600]);
36
38
  var sizeStyles = {
37
39
  sm: { fontSize: "sm", spacing: 1 },
38
40
  md: { fontSize: "md", spacing: 2 },
package/dist/Components/MultiSelect/MultiSelect.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { MultiSelectProps } from "./MultiSelectProps";
3
- export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, errorMessage, }: MultiSelectProps): React.JSX.Element;
3
+ 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 CHANGED
@@ -60,18 +60,19 @@ var generateUniqueId = (function () {
60
60
  };
61
61
  })();
62
62
  function MultiSelect(_a) {
63
- 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;
63
+ var _b, _c;
64
+ 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;
64
65
  var theme = (0, useCustomTheme_1.useCustomTheme)();
65
- var _h = (0, react_1.useState)(value), options = _h[0], setOptions = _h[1];
66
- var _j = (0, react_1.useState)(""), inputValue = _j[0], setInputValue = _j[1];
67
- var _k = (0, react_1.useState)(""), error = _k[0], setError = _k[1];
66
+ var _k = (0, react_1.useState)(value), options = _k[0], setOptions = _k[1];
67
+ var _l = (0, react_1.useState)(""), inputValue = _l[0], setInputValue = _l[1];
68
+ var _m = (0, react_1.useState)(""), localError = _m[0], setLocalError = _m[1];
68
69
  var inputRef = (0, react_1.useRef)(null);
69
70
  (0, react_1.useEffect)(function () {
70
71
  setOptions(value);
71
72
  }, [value]);
72
73
  var handleInputChange = function (e) {
73
74
  setInputValue(e.target.value);
74
- setError("");
75
+ setLocalError("");
75
76
  };
76
77
  var validateEmail = function (email) {
77
78
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -80,7 +81,7 @@ function MultiSelect(_a) {
80
81
  var handleKeyDown = function (e) {
81
82
  if (e.key === "Enter" && inputValue.trim() !== "") {
82
83
  if (!validateEmail(inputValue)) {
83
- setError("Invalid email address");
84
+ setLocalError("Invalid email address");
84
85
  return;
85
86
  }
86
87
  var existingOption = options.find(function (option) { return option.label === inputValue; });
@@ -105,15 +106,22 @@ function MultiSelect(_a) {
105
106
  };
106
107
  return (react_1.default.createElement(react_2.Box, { width: width },
107
108
  label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
108
- 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: {
109
- borderColor: theme.colors.primary[500],
110
- boxShadow: "0 0 0 1px " + theme.colors.primary[500],
109
+ react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2, align: "center", px: 2, border: "1px solid", borderColor: error || localError
110
+ ? theme.colors.red[500]
111
+ : theme.colors.gray[300], borderRadius: "sm", bg: theme.colors.white, minH: "42px", _focusWithin: {
112
+ borderColor: error || localError
113
+ ? theme.colors.red[500]
114
+ : theme.colors.primary[500],
115
+ boxShadow: "0 0 0 0.125rem" +
116
+ (error || localError
117
+ ? (_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error
118
+ : (_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary),
111
119
  } },
112
120
  options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", borderRadius: "full", variant: "subtle", colorScheme: "blue" },
113
121
  react_1.default.createElement(react_2.TagLabel, null, option.label),
114
122
  react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemove(option); } }))); }),
115
123
  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 : "" })),
116
- error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
124
+ (error || localError) && (react_1.default.createElement(ErrorMessage_1.default, { errorMessage: localError || errorMessage })),
117
125
  helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
118
126
  }
119
127
  exports.default = MultiSelect;
package/dist/Components/MultiSelect/MultiSelectProps.d.ts CHANGED
@@ -11,6 +11,7 @@ export type MultiSelectProps = {
11
11
  placeholderText?: string;
12
12
  isDisabled?: boolean;
13
13
  isReadOnly?: boolean;
14
+ error?: boolean;
14
15
  size?: string;
15
16
  inputStyle?: {};
16
17
  errorMessage?: string;
package/dist/Components/SideBar/SideBar.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { SidebarProps } from "./SideBarProps";
3
- export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, isLoading, }: SidebarProps): React.JSX.Element;
3
+ export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, isLoading, loadingLines, }: SidebarProps): React.JSX.Element;
package/dist/Components/SideBar/SideBar.js CHANGED
@@ -21,28 +21,36 @@ var Sidebar_1 = require("../../Constants/Sidebar");
21
21
  var lucide_react_1 = require("lucide-react");
22
22
  var MenuItems_1 = __importDefault(require("./components/MenuItems"));
23
23
  var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
24
+ var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
24
25
  function Sidebar(_a) {
25
26
  var _b;
26
- 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;
27
+ 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;
27
28
  var theme = (0, useCustomTheme_1.useCustomTheme)();
28
29
  return (react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "4.688rem" : "15.625rem", flexDir: "column", justifyContent: "space-between", background: theme.colors.sidebar.background[500] },
29
30
  react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
30
- logo ? (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "left", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
31
+ isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
32
+ react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
33
+ react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
34
+ react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))) : (react_1.default.createElement(react_1.default.Fragment, null, logo ? (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "center", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
31
35
  react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
32
- react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 18, 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" },
36
+ 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" },
33
37
  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" } },
34
38
  react_1.default.createElement(defaultLogo_1.default, null)),
35
- react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, display: toggle ? "none" : "flex", lineHeight: 2 }, companyName))),
39
+ react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, display: toggle ? "none" : "flex", lineHeight: 2 },
40
+ react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right" }, companyName)))))),
36
41
  react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
37
42
  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" },
38
- 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: 6 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 2 },
39
- react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md", startColor: theme.colors.gray[600], endColor: theme.colors.gray[500] }))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
43
+ 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" },
44
+ react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
45
+ react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
46
+ react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
40
47
  react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
41
- !isDisableAddNew && (isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
42
- react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" }))) : (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
43
- react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
44
- react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
45
- react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
48
+ !isDisableAddNew &&
49
+ (isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
50
+ react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" }))) : (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
51
+ react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
52
+ react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
53
+ react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
46
54
  react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: changeToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
47
55
  react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
48
56
  react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse"))))));
package/dist/Components/SideBar/SideBarProps.d.ts CHANGED
@@ -10,6 +10,7 @@ export type SidebarProps = {
10
10
  onAddNewClick?: () => void;
11
11
  selectedSubMenu?: string | null;
12
12
  isLoading?: boolean;
13
+ loadingLines?: number;
13
14
  };
14
15
  export type MenuProps = {
15
16
  id: string | number;
package/dist/Components/SideBar/components/OverflowTooltipText.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ interface OverflowWrapperWithTooltipProps {
3
+ children: React.ReactNode;
4
+ placement?: "top" | "bottom" | "left" | "right";
5
+ maxWidth?: string | number;
6
+ isTooltipDisabled?: boolean;
7
+ }
8
+ declare const OverflowTooltipText: React.FC<OverflowWrapperWithTooltipProps>;
9
+ export default OverflowTooltipText;
package/dist/Components/SideBar/components/OverflowTooltipText.js ADDED
@@ -0,0 +1,63 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ var react_1 = __importStar(require("react"));
30
+ var react_2 = require("@chakra-ui/react");
31
+ var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
32
+ var OverflowTooltipText = function (_a) {
33
+ 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;
34
+ var contentRef = (0, react_1.useRef)(null);
35
+ var _e = (0, react_1.useState)(""), textContent = _e[0], setTextContent = _e[1];
36
+ var _f = (0, react_1.useState)(false), isOverflowing = _f[0], setIsOverflowing = _f[1];
37
+ (0, react_1.useEffect)(function () {
38
+ var el = contentRef.current;
39
+ if (!el)
40
+ return;
41
+ var checkOverflow = function () {
42
+ setTextContent(el.textContent || "");
43
+ var sw = Math.round(el.scrollWidth);
44
+ var cw = Math.round(el.clientWidth);
45
+ setIsOverflowing(sw > cw + 1);
46
+ };
47
+ checkOverflow();
48
+ var ro = new ResizeObserver(function () { return checkOverflow(); });
49
+ ro.observe(el);
50
+ var mo = new MutationObserver(function () { return checkOverflow(); });
51
+ mo.observe(el, { childList: true, subtree: true, characterData: true });
52
+ window.addEventListener("resize", checkOverflow);
53
+ return function () {
54
+ ro.disconnect();
55
+ mo.disconnect();
56
+ window.removeEventListener("resize", checkOverflow);
57
+ };
58
+ }, [children]);
59
+ var shouldShowTooltip = isOverflowing && !isTooltipDisabled;
60
+ return (react_1.default.createElement(ToolTip_1.default, { label: textContent, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true },
61
+ react_1.default.createElement(react_2.Box, { ref: contentRef, as: "div", display: "inline-block", maxWidth: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children)));
62
+ };
63
+ exports.default = OverflowTooltipText;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.4",
3
+ "version": "2.2.6",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",