bianic-ui 1.3.0-beta → 1.4.0-beta

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, Children, cloneElement } from 'react';
 
 function Accordions(_a) {
     var title = _a.title, content = _a.content;
@@ -1496,6 +1496,82 @@ Divider.defaultProps = {
     classname: '',
 };
 
+var FileTree = function (_a) {
+    var data = _a.data, color = _a.color;
+    return (React.createElement("div", { className: "file-tree" }, data.map(function (_a, index) {
+        var label = _a.label, nodes = _a.nodes, props = __rest(_a, ["label", "nodes"]);
+        return (React.createElement(TreeItem, __assign({ label: label, nodes: nodes, key: index, color: color }, props)));
+    })));
+};
+var TreeItem = function (_a) {
+    var label = _a.label, nodes = _a.nodes, color = _a.color, props = __rest(_a, ["label", "nodes", "color"]);
+    var _b = useState(false), isExpand = _b[0], setIsExpand = _b[1];
+    var _c = useState(false), isFocused = _c[0], setIsFocused = _c[1];
+    var focusedIconColor = color
+        ? "text-bia-".concat(color)
+        : 'text-bia-coolgrey-light-50';
+    var foucusedBgColor = color ? "bg-bia-".concat(color) : 'bg-bia-coolgrey-light-50';
+    var textClass = "flex items-center rounded-radius-sm px-[2px] cursor-pointer hover:bg-bia-coolgrey-light-90 focus:pointer-events-none ".concat(isFocused && foucusedBgColor);
+    return (React.createElement("div", { className: "bianic-tree-item" },
+        React.createElement("div", { className: "justify-left group flex items-center" },
+            nodes && nodes.length > 0 ? (React.createElement("button", { className: "cursor-pointer", onClick: function (e) {
+                    setIsExpand(function (prev) { return !prev; });
+                } },
+                React.createElement(TbChevronRight, { className: "text-bia-coolgrey-light-50 ".concat(isFocused && focusedIconColor, " ").concat(isExpand && 'rotate-90'), size: 18 }))) : (React.createElement("div", { className: "aspect-square w-[18px]" })),
+            React.createElement("button", __assign({ onFocus: function (e) {
+                    var _a;
+                    setIsFocused(true);
+                    (_a = props === null || props === void 0 ? void 0 : props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                }, onBlur: function (e) {
+                    var _a;
+                    setIsFocused(false);
+                    (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                }, className: textClass }, props),
+                React.createElement(Text, { variant: "small-text" },
+                    " ",
+                    label,
+                    " "))),
+        isExpand && nodes && nodes.length > 0 && (React.createElement("div", { className: "ml-4" }, nodes.map(function (_a, index) {
+            var label = _a.label, nodes = _a.nodes;
+            return (React.createElement(TreeItem, { label: label, nodes: nodes, key: index, color: color }));
+        })))));
+};
+
+function MenuContainer(_a) {
+    var _b = _a.isTopFlat, isTopFlat = _b === void 0 ? false : _b, children = _a.children, open = _a.open, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
+    return (open && (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); } }),
+        React.createElement("div", { className: "w-fit shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className) }, Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
+                    cloneElement(child, { onClose: function () { return onClose(); } })
+                : child;
+        })))));
+}
+MenuContainer.defaultProps = {
+    isTopFlat: false,
+};
+
+function MenuItem(_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children"]);
+    var _g = useState(false), isHovered = _g[0], setIsHovered = _g[1];
+    return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px] ".concat(!isHovered && 'z-10'), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+        React.createElement("div", __assign({ className: "relative z-10 flex items-center p-[5px] font-arial hover:bg-bia-blue-pastel ".concat(className, "}"), role: "button", tabIndex: 0, onClick: function (e) {
+                onClick(e);
+            }, onKeyDown: function () { } }, props),
+            React.createElement("div", { className: "mr-[5px] aspect-square w-[14px]" }, isChecked !== undefined && isChecked && (React.createElement(TbCheck, { className: "text-primary-black", size: 14 }))),
+            React.createElement("span", { className: "whitespace-nowrap text-[11px]" }, label),
+            React.createElement("div", { className: "ml-auto flex items-center" },
+                children && React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-grey" }),
+                children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] text-bia-coolgrey" }, caption)))),
+        children && (React.createElement(MenuContainer, { open: isHovered, onClose: onClose, className: "absolute right-0 top-0 translate-x-full bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px]" }, children))));
+}
+MenuItem.defaultProps = {
+    className: '',
+    onClick: function () { },
+};
+
 var sizeConfig$a = {
     md: {
         fieldSize: 'text-size-base p-2.5 font-[350] h-10',
@@ -1525,6 +1601,10 @@ var styleConfig = {
         fieldStyle: '',
         iconStyle: 'pointer-events-none',
     },
+    'text-transparent': {
+        fieldStyle: 'px-0 ',
+        iconStyle: '',
+    },
 };
 
 function ValidationIcon(_a) {
@@ -1548,15 +1628,22 @@ function PasswordIcon(_a) {
 }
 
 function TextInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? false : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? '' : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength"]);
-    var _o = useState(false), isShow = _o[0], setIsShow = _o[1];
-    var _p = styleConfig[variant], fieldStyle = _p.fieldStyle, iconStyle = _p.iconStyle;
-    var _q = sizeConfig$a[size], iconSize = _q.iconSize, fieldSize = _q.fieldSize, iconPosition = _q.iconPosition;
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? false : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? '' : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o, _p = _a.isFlatRight, isFlatRight = _p === void 0 ? false : _p, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight"]);
+    var isTransparent = variant.includes('transparent');
+    var _q = useState(false), isShow = _q[0], setIsShow = _q[1];
+    var _r = styleConfig[variant], fieldStyle = _r.fieldStyle, iconStyle = _r.iconStyle;
+    var _s = isTransparent
+        ? __assign(__assign({}, sizeConfig$a[size]), { iconPosition: "right-0 ", fieldSize: sizeConfig$a[size].fieldSize +
+                " pe-[".concat(9 + sizeConfig$a[size].iconSize, "px]") }) : sizeConfig$a[size], iconSize = _s.iconSize, fieldSize = _s.fieldSize, iconPosition = _s.iconPosition;
+    var borderStyle = isTransparent
+        ? 'border-transparent bg-transparent' // customize border rule for transparent variant
+        : 'border border-bia-grey-dark-10 bg-primary-white';
+    var iconSizing = iconSize ? "text-[".concat(iconSize, "px]") : 'text-[18px]';
+    var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
+    var isExistValidation = isValid !== null;
     var typeVariant = variant;
     if (variant === 'password')
         typeVariant = isShow ? 'text' : 'password';
-    var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
-    var isExistValidation = isValid !== null;
     var descColor = 'text-primary-cool';
     if (!disabled && isExistValidation && isValid)
         descColor = 'text-bia-green';
@@ -1575,13 +1662,14 @@ function TextInput(_a) {
     if (variant === 'password') {
         iconElement = (React.createElement(PasswordIcon, { isShow: isShow, showHandler: setIsShow, iconSize: iconSize, disabled: disabled }));
     }
+    var extendedInputClassName = "".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor, " ").concat(inputClassName, " ").concat(borderStyle, " ").concat(isFlatRight && 'rounded-r-none');
     return (React.createElement("div", { className: "field-group flex w-full flex-col gap-y-2 text-bia-black" },
         React.createElement("label", { htmlFor: id, className: "label text-xs font-semibold" },
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "relative w-full" },
-            React.createElement("input", __assign({ className: "field w-full rounded  border border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength }, props)),
-            React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconStyle, " ").concat(iconPosition) }, iconElement)),
+            React.createElement("input", __assign({ className: "field w-full rounded read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength }, props)),
+            React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
         React.createElement("div", { className: "desc flex justify-between gap-1 text-xs ".concat(descColor) },
             descText && React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
@@ -1603,6 +1691,8 @@ TextInput.defaultProps = {
     variant: 'text',
     value: '',
     onChange: function () { },
+    inputClassName: '',
+    isFlatRight: false,
 };
 
 // Desc: Radio button size configuration
@@ -1813,7 +1903,7 @@ function SelectInput(_a) {
                         setIsOpen(false);
                     } }));
             })))),
-        React.createElement("span", { className: "desc mt-2 text-xs text-primary-cool" }, descText)));
+        descText && (React.createElement("span", { className: "desc mt-2 text-xs text-primary-cool" }, descText))));
 }
 SelectInput.defaultProps = {
     descText: '',
@@ -1933,16 +2023,27 @@ var roundedConfig = {
     tn: 'first:rounded-l-radius-tn last:rounded-r-radius-tn',
 };
 var sizeConfig$2 = {
-    lg: 'text-size-md leading-[23.94px] px-[13px] py-[10.5px] min-w-[112px]',
-    md: 'text-size-base leading-[21px] px-[11px] py-[9px] min-w-[96px]',
-    sm: 'text-size-sm leading-[15.96px] px-[7px] py-[5px] min-w-[72px]',
-    tn: 'text-size-sm leading-[15.96px] px-[4px] py-[2px] min-w-[64px]',
+    lg: 'text-size-md leading-[23.94px] px-[13px] py-[10.5px] ',
+    md: 'text-size-base leading-[21px] px-[11px] py-[9px] ',
+    sm: 'text-size-sm leading-[15.96px] px-[7px] py-[5px] ',
+    tn: 'text-size-sm leading-[15.96px] px-[4px] py-[2px] ',
+};
+var minWidthConfig = {
+    lg: 'min-w-[112px]',
+    md: 'min-w-[96px]',
+    sm: 'min-w-[72px]',
+    tn: 'min-w-[64px]',
 };
 
 function SegmentButtonItem(_a) {
-    var _b = _a.selected, selected = _b === void 0 ? false : _b, size = _a.size, children = _a.children, disabled = _a.disabled, onClick = _a.onClick;
+    var _b = _a.selected, selected = _b === void 0 ? false : _b, size = _a.size, children = _a.children, disabled = _a.disabled, _c = _a.isfitContent, isfitContent = _c === void 0 ? false : _c, onClick = _a.onClick;
     var isSelected = selected ? 'selected' : 'notSelected';
-    return (React.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: "group:last:border-l-0 border-[1px] border-l-0 border-bia-grey-dark-10 first:border-l-[1px] focus-visible:z-50 focus-visible:outline focus-visible:outline-[3px] focus-visible:-outline-offset-1 focus-visible:outline-bia-blue-light-50 disabled:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 ".concat(isSelectedConfig[isSelected], " ").concat(roundedConfig[size], " ").concat(sizeConfig$2[size]) }, children));
+    var sizingStyle = isfitContent
+        ? "".concat(sizeConfig$2[size])
+        : "".concat(sizeConfig$2[size], " ").concat(minWidthConfig[size]);
+    var radiusStyle = "".concat(roundedConfig[size]);
+    var selectedStyle = "".concat(isSelectedConfig[isSelected]);
+    return (React.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: "group:last:border-l-0 border-[1px] border-l-0 border-bia-grey-dark-10 first:border-l-[1px] focus-visible:z-50 focus-visible:outline focus-visible:outline-[3px] focus-visible:-outline-offset-1 focus-visible:outline-bia-blue-light-50 disabled:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 ".concat(selectedStyle, " ").concat(radiusStyle, " ").concat(sizingStyle) }, children));
 }
 
 function SegmentButtonGroup(_a) {
@@ -1951,7 +2052,7 @@ function SegmentButtonGroup(_a) {
 }
 
 function Modal(_a) {
-    var size = _a.size, title = _a.title, open = _a.open, zIndex = _a.zIndex, onClose = _a.onClose, rest = __rest(_a, ["size", "title", "open", "zIndex", "onClose"]);
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, title = _a.title, open = _a.open, _c = _a.zIndex, zIndex = _c === void 0 ? 100 : _c, onClose = _a.onClose, rest = __rest(_a, ["size", "title", "open", "zIndex", "onClose"]);
     var modalSize;
     if (size === 'sm') {
         modalSize = 'w-[300px]';
@@ -1973,12 +2074,12 @@ function Modal(_a) {
     if (open) {
         return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-        React.createElement("div", { className: "fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onClick: handleClose },
-            React.createElement("div", { className: "modal flex flex-col gap-[20px] rounded-[5px] bg-white p-[20px] ".concat(modalSize) },
-                React.createElement("div", { className: "flex justify-between" },
-                    React.createElement("div", { className: " w-[260px] text-wrap font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
+        React.createElement("div", { className: "bianic-modal-wrapper fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "", onClick: handleClose },
+            React.createElement("div", { className: "bianic-modal flex flex-col gap-[20px] rounded-[5px] bg-white p-[20px] ".concat(modalSize) },
+                React.createElement("div", { className: "bianic-modal-header flex justify-between" },
+                    React.createElement("div", { className: " text-wrap text-left font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
                     React.createElement(Button, { variant: "subtle", radius: "full-rounded", iconLeft: React.createElement(TbX, null), size: "tn", onClick: function () { return onClose(); } })),
-                React.createElement("div", { className: "flex flex-col gap-[20px]" }, rest.children))));
+                React.createElement("div", { className: "bianic-modal-content flex w-full flex-col items-start gap-[20px]" }, rest.children))));
     }
     return null;
 }
@@ -2260,17 +2361,9 @@ var configTab = {
 };
 
 function Tab(_a) {
-    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.card, card = _e === void 0 ? false : _e, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size", "card"]);
+    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size"]);
     var disabledKeyTab = disabled || active ? ' pointer-events-none' : '';
     var cursor;
-    var cardColor;
-    if (active) {
-        cardColor = 'bg-white';
-    }
-    else {
-        cardColor =
-            'bg-bia-grey-light-50 hover:bg-bia-grey-light-20 active:bg-bia-grey';
-    }
     if (disabled) {
         cursor = 'cursor-not-allowed';
     }
@@ -2280,26 +2373,25 @@ function Tab(_a) {
     else {
         cursor = 'cursor-auto';
     }
+    var horizontalButtonStyle = mode === 'horizontal' ? '-mb-[1px] flex-col' : 'w-full flex-row';
+    var indicatorStyle = configTab[active ? 'true' : 'false'][mode];
+    var indicatorContainerStyle = mode === 'vertical' ? 'w-[3px] justify-end' : 'h-[3px] w-full';
+    var buttonContentStyle = size === 'sm'
+        ? " pt-[10px] ".concat(mode === 'vertical' ? 'pb-[10px] pe-[30px]' : 'px-[30px] pb-[8px]')
+        : "px-[30px] pt-[13px] ".concat(mode === 'vertical' ? 'pb-[13px]' : 'pb-[10px]', " ");
     var activeKeyTab = active
         ? 'group-disabled:text-bia-coolgrey-disabled text-primary-black'
         : 'text-bia-coolgrey group-hover:text-bia-coolgrey-hover group-active:text-bia-coolgrey-active group-disabled:text-bia-coolgrey-disabled';
     return (React.createElement("div", { className: "".concat(mode === 'horizontal' ? 'h-full' : 'w-full', " ").concat(cursor) },
-        React.createElement("button", __assign({ type: "button", disabled: disabled }, rest, { className: "-mb-[1px] flex items-stretch justify-between ".concat(card && cardColor, " ").concat(mode === 'horizontal' ? 'flex-col' : 'w-full flex-row', " group relative outline-none ").concat(disabledKeyTab, " ").concat(fit) }),
-            React.createElement("div", { className: "flex items-center justify-center ".concat(size === 'sm' ? " pt-[10px] ".concat(mode === 'vertical' ? 'pb-[10px] pe-[30px]' : 'px-[30px] pb-[8px]') : "px-[30px] pt-[13px] ".concat(mode === 'vertical' ? 'pb-[13px]' : 'pb-[10px]', " ")) },
+        React.createElement("button", __assign({ type: "button", disabled: disabled }, rest, { className: "flex items-stretch justify-between ".concat(horizontalButtonStyle, " group relative outline-none ").concat(disabledKeyTab, " ").concat(fit) }),
+            React.createElement("div", { className: "flex items-center justify-center ".concat(buttonContentStyle) },
                 React.createElement("div", { className: "flex  items-center justify-center " },
                     React.createElement("div", { className: "flex items-center space-x-1 text-nowrap ".concat(activeKeyTab, " ").concat(configTab[size].text) },
                         icon && React.createElement("div", { className: "mr-[5px]" }, icon),
                         children))),
-            React.createElement("div", { className: "flex flex-row  ".concat(mode === 'vertical' ? 'w-[3px] justify-end' : 'h-[3px] w-full', "  items-end") }, !card && (React.createElement("div", { className: "shadow-lg shadow-bia-blue ".concat(configTab[active ? 'true' : 'false'][mode]) }))))));
+            React.createElement("div", { className: "flex flex-row  ".concat(indicatorContainerStyle, "  items-end") },
+                React.createElement("div", { className: "shadow-lg shadow-bia-blue ".concat(indicatorStyle) })))));
 }
-Tab.defaultProps = {
-    children: null,
-    mode: 'horizontal',
-    fit: 'size-base',
-    size: 'md',
-    icon: null,
-    card: false,
-};
 
 var radiusConfig = {
     none: '',
@@ -2618,7 +2710,7 @@ var classConfig = {
 };
 
 function Tooltip(props) {
-    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? '300px' : _b;
+    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b;
     var timeout;
     var _c = useState(false), active = _c[0], setActive = _c[1];
     var showTip = function () {
@@ -2631,16 +2723,52 @@ function Tooltip(props) {
         setActive(false);
     };
     var _d = classConfig[direction], tooltipContainer = _d.tooltipContainer; _d.triangleContainer; _d.triangleShape;
-    return (React.createElement("div", { className: "Tooltip-Wrapper relative flex flex-col w-full h-fit", onMouseEnter: showTip, onMouseLeave: hideTip },
+    var tooltipContainerRef = useRef(null);
+    var _e = useState({
+        maxWidth: maxWidth + 'px',
+        whiteSpace: 'nowrap',
+    }), tooltipContainerStyle = _e[0], setTooltipContainerStyle = _e[1];
+    var tooltipContainerElement = tooltipContainerRef === null || tooltipContainerRef === void 0 ? void 0 : tooltipContainerRef.current;
+    var scrollWidth = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.scrollWidth; // Mendapatkan lebar konten aktual
+    var offsetWidth = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.offsetWidth;
+    var offsetHeight = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.offsetHeight;
+    useEffect(function () {
+        if (scrollWidth && offsetWidth) {
+            var maxWidthNumber = Number(maxWidth);
+            var isMultiLine = offsetHeight > 23; // 23 pixels is the approximate height of one line of text
+            // Tooltip Width and Whitespace Determination Rules:
+            // 1. Default Condition:
+            //    - width: fit-content
+            //    - whiteSpace: nowrap
+            // 2. When maxWidth is Set:
+            //    * Text Exceeds maxWidth:
+            //      - width: maxWidth
+            //      - whiteSpace: normal
+            //    * Text Equals maxWidth (Multi-line):
+            //      - width: maxWidth
+            //      - whiteSpace: normal
+            //    * Text Less Than maxWidth:
+            //      - width: fit-content
+            //      - whiteSpace: nowrap
+            var newWidth_1 = 'fit-content';
+            var newWhiteSpace_1 = 'nowrap';
+            if (scrollWidth > maxWidthNumber ||
+                (offsetWidth === maxWidthNumber && isMultiLine)) {
+                newWidth_1 = maxWidthNumber + 'px';
+                newWhiteSpace_1 = 'normal';
+            }
+            setTooltipContainerStyle(function (prev) { return (__assign(__assign({}, prev), { width: newWidth_1, whiteSpace: newWhiteSpace_1 })); });
+        }
+    }, [content, maxWidth, scrollWidth, offsetHeight]);
+    return (React.createElement("div", { className: "tooltip-wrapper relative inline-flex h-fit w-fit flex-col", onMouseEnter: showTip, onMouseLeave: hideTip },
         children,
-        active && (React.createElement("div", { className: "Tooltip absolute px-[7px] py-[4px] text-size-sm bg-primary-black text-primary-white z-50 whitespace-nowrap rounded-[4px] ".concat(tooltipContainer), style: { maxWidth: maxWidth } },
-            React.createElement("p", { className: " whitespace-pre-wrap break-words" }, content)))));
+        active && (React.createElement("div", { className: "tooltip-container break-word absolute z-50 inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white ".concat(tooltipContainer), style: tooltipContainerStyle, ref: tooltipContainerRef }, content))));
 }
 Tooltip.defaultProps = {
     delay: 400,
     direction: 'top',
-    maxWidth: '300px',
+    maxWidth: '300',
 };
 Tooltip.defaultProps = {};
 
-export { Accordions, Alert, Avatar, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, Display, Divider, Heading, LiveSearch, Modal, P, PaginationBar, Piils as Pills, Popover, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, Table, TableBody, TableCol, TableDemo, TableHead, TableRow, TagLabel, Text, TextArea, TextInput, Toggle, Tooltip };
+export { Accordions, Alert, Avatar, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, Display, Divider, FileTree, Heading, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Piils as Pills, Popover, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, Table, TableBody, TableCol, TableDemo, TableHead, TableRow, TagLabel, Text, TextArea, TextInput, Toggle, Tooltip };