bianic-ui 1.7.3-alpha.2 → 1.7.4-alpha.1

package/dist/cjs/index.js

@@ -263,7 +263,8 @@ var childrenElement = function (element) {
 var validUnion = function (value, union) {
     return union.includes(value) ? value : union[0];
 };
-var useDetectOutsideClick = function (ref, initialState) {
+var useDetectOutsideClick = function (ref, initialState, event) {
+    if (event === void 0) { event = 'click'; }
     var _a = React.useState(initialState), isActive = _a[0], setIsActive = _a[1];
     React.useEffect(function () {
         var pageClickEvent = function (event) {
@@ -274,8 +275,8 @@ var useDetectOutsideClick = function (ref, initialState) {
         };
         // If the item is active (ie open) then listen for clicks
         if (isActive)
-            window.addEventListener('click', pageClickEvent);
-        return function () { return window.removeEventListener('click', pageClickEvent); };
+            window.addEventListener(event, pageClickEvent);
+        return function () { return window.removeEventListener(event, pageClickEvent); };
     }, [isActive, ref]);
     return [isActive, setIsActive];
 };
@@ -1647,23 +1648,45 @@ Divider.defaultProps = {
 };
 
 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 data = _a.data, color = _a.color, contextMenu = _a.contextMenu, onMouseDown = _a.onMouseDown;
+    var popupRef = React.useRef(null); // Ref untuk div utama
+    var _b = useDetectOutsideClick(popupRef, false), isOpenContMenu = _b[0], setIsOpenContMenu = _b[1];
+    var _c = React.useState({ x: 0, y: 0 }), contMenuPosition = _c[0], setContMenuPosition = _c[1];
+    var menuStyle = {
+        position: 'absolute',
+        top: "".concat(contMenuPosition.y, "px"),
+        left: "".concat(contMenuPosition.x, "px"),
+        // Pastikan z-index cukup tinggi agar muncul di atas elemen lain
+        zIndex: 1000,
+    };
+    var handleRightClick = function (event) {
+        setIsOpenContMenu(true);
+        setContMenuPosition({ x: event.clientX, y: event.clientY });
+    };
+    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, handleRightClick: handleRightClick, onMouseDownTreeItem: onMouseDown }, props)));
+        }),
+        isOpenContMenu && (React.createElement("div", { style: menuStyle, ref: popupRef, className: "bianic-filetree-contextmenu absolute z-10" }, React.isValidElement(contextMenu)
+            ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
+                React.cloneElement(contextMenu, { isWithOverlay: false })
+            : contextMenu))));
 };
 var TreeItem = function (_a) {
-    var label = _a.label, nodes = _a.nodes, color = _a.color, props = __rest(_a, ["label", "nodes", "color"]);
+    var label = _a.label, nodes = _a.nodes, color = _a.color, handleRightClick = _a.handleRightClick, onMouseDownTreeItem = _a.onMouseDownTreeItem, props = __rest(_a, ["label", "nodes", "color", "handleRightClick", "onMouseDownTreeItem"]);
+    var treeRef = React.useRef(null);
     var _b = React.useState(false), isExpand = _b[0], setIsExpand = _b[1];
     var _c = React.useState(false), isFocused = _c[0], setIsFocused = _c[1];
+    var _d = useDetectOutsideClick(treeRef, false, 'mousedown'), isClickRight = _d[0], setIsClickRight = _d[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);
+    var focusedBgColor = color ? "bg-bia-".concat(color) : 'bg-bia-coolgrey-light-50';
+    var clickRightClass = 'outline outline-[3px] outline-bia-blue-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 && focusedBgColor, " ").concat(isClickRight && clickRightClass);
     return (React.createElement("div", { className: "bianic-tree-item" },
-        React.createElement("div", { className: "justify-left group flex items-center" },
+        React.createElement("div", { className: "justify-left group flex items-center", ref: treeRef },
             nodes && nodes.length > 0 ? (React.createElement("button", { className: "cursor-pointer", onClick: function (e) {
                     setIsExpand(function (prev) { return !prev; });
                 } },
@@ -1675,24 +1698,32 @@ var TreeItem = function (_a) {
                 }, onBlur: function (e) {
                     var _a;
                     setIsFocused(false);
+                    setIsClickRight(false); // Reset isClickRight saat blur
                     (_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,
-                    " "))),
+                }, className: textClass, onMouseDown: function (e) {
+                    if (e.button === 2) {
+                        // 2 = tombol kanan mouse
+                        e.preventDefault(); // Blokir default lebih awal
+                    }
+                    onMouseDownTreeItem === null || onMouseDownTreeItem === void 0 ? void 0 : onMouseDownTreeItem(e, __assign({ label: label, nodes: nodes }, props));
+                }, onContextMenu: function (e) {
+                    e.preventDefault();
+                    setIsClickRight(true);
+                    handleRightClick === null || handleRightClick === void 0 ? void 0 : handleRightClick(e);
+                } }, 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 }));
+            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, handleRightClick: handleRightClick, onMouseDownTreeItem: onMouseDownTreeItem }, props)));
         })))));
 };
 
 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 _b = _a.isTopFlat, isTopFlat = _b === void 0 ? false : _b, children = _a.children, _c = _a.open, open = _c === void 0 ? true : _c, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.isWithOverlay, isWithOverlay = _f === void 0 ? true : _f;
     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)] bg-bia-white ".concat(radiusClass, " ").concat(className) }, React.Children.map(children, function (child) {
+        isWithOverlay && (React.createElement("div", { className: "bianic-menu-overlay fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); } })),
+        React.createElement("div", { className: "w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className) }, React.Children.map(children, function (child) {
             return React.isValidElement(child)
                 ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
                     React.cloneElement(child, { onClose: function () { return onClose(); } })
@@ -1711,7 +1742,7 @@ function MenuItem(_a) {
                 onClick(e);
             }, onKeyDown: function () { } }, props),
             isChecked !== undefined && (React.createElement("div", { className: "mr-[5px] aspect-square w-[14px]" }, isChecked && React.createElement(TbCheck, { className: "text-primary-black", size: 14 }))),
-            React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px]" }, label),
+            React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px] text-bia-black" }, label),
             React.createElement("div", { className: "ml-auto flex items-center" },
                 children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey" })),
                 children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] text-bia-coolgrey" }, caption)))),
@@ -2914,11 +2945,6 @@ var TabMenu = function (_a) {
                 React.createElement(TbX, { className: "rounded-radius-sm ".concat(usedActionButtonConfig), size: 14 })))));
 };
 
-var alignConfig = {
-    center: 'justify-center',
-    right: 'justify-end',
-    left: 'justify-start',
-};
 var sizeConfig$1 = {
     md: 'px-2.5 py-[9px]',
     sm: 'px-2.5 py-[7px]',
@@ -2936,19 +2962,18 @@ var headTextConfig = {
 };
 
 function TableCell(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'body' : _b, _c = _a.alignment, alignment = _c === void 0 ? 'left' : _c, className = _a.className, children = _a.children, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.lined, lined = _e === void 0 ? false : _e, _f = _a.bgColor, bgColor = _f === void 0 ? '' : _f, props = __rest(_a, ["variant", "alignment", "className", "children", "size", "lined", "bgColor"]);
+    var _b = _a.variant, variant = _b === void 0 ? 'body' : _b, className = _a.className, children = _a.children, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.lined, lined = _d === void 0 ? false : _d, _e = _a.bgColor, bgColor = _e === void 0 ? '' : _e, props = __rest(_a, ["variant", "className", "children", "size", "lined", "bgColor"]);
     var bottomLined = lined ? 'border-b border-bia-grey' : '';
     var bgColorClass = "bg-bia-".concat(bgColor);
     var isHead = variant === 'head';
     var textConfig = isHead ? headTextConfig[size] : bodyTextConfig[size];
-    var columnClass = "p-0 ".concat(sizeConfig$1[size], " ").concat(bottomLined, " ").concat(bgColorClass, " ").concat(alignConfig[alignment], " ").concat(textConfig, " ").concat(className);
+    var columnClass = "p-0 ".concat(sizeConfig$1[size], " ").concat(bottomLined, " ").concat(bgColorClass, " ").concat(textConfig, " ").concat(className);
     if (variant === 'head') {
         return (React.createElement("th", __assign({ className: "bianic-table-cell table-head bg-bia-grey-light-80 ".concat(columnClass) }, props), children));
     }
     return (React.createElement("td", __assign({ className: "bianic-table-cell table-col ".concat(columnClass) }, props), children));
 }
 TableCell.defaultProps = {
-    alignment: 'left',
     lined: false,
     size: 'md',
     variant: 'body',
@@ -3190,6 +3215,69 @@ Tooltip.defaultProps = {
 };
 Tooltip.defaultProps = {};
 
+var colorConfigs = {
+    default: 'bg-bia-black',
+    info: 'bg-bia-teal',
+    success: 'bg-bia-green',
+    danger: 'bg-bia-red',
+    warning: 'bg-bia-orange',
+};
+
+function Toaster(_a) {
+    var children = _a.children, title = _a.title, icon = _a.icon, onClose = _a.onClose, _b = _a.variant, variant = _b === void 0 ? 'default' : _b; _a.position;
+    // Default styles for the toaster based on variant
+    var colorStyles = "".concat(colorConfigs[variant], " text-bia-white");
+    // Logic for content alignment based on `isHeaderShow`
+    var content = title ? (React.createElement("div", { className: "bianic-content-area flex flex-col gap-[5px]" },
+        React.createElement("div", { className: "bianic-toaster-header-area flex flex-row items-center gap-[5px]" },
+            icon && React.createElement("div", { className: "bianic-toaster-icon-area" }, icon),
+            React.createElement("div", { className: "bianic-toaster-title-area text-[14px] font-semibold leading-[21px]" }, title)),
+        React.createElement("div", { className: "bianic-toaster-description-area text-[12px] font-normal leading-[134%]" }, children))) : (React.createElement("div", { className: "bianic-toaster-content-area flex flex-row gap-[5px]" },
+        icon && React.createElement("div", { className: "bianic-toaster-icon-area" }, icon),
+        React.createElement("div", { className: "bianic-toaster-description-area text-[12px] font-normal leading-[134%]" }, children)));
+    return (React.createElement("div", { className: "bianic-toaster flex max-w-[300px] flex-row gap-[5px] rounded-[5px] py-[10px] shadow-[0px_3px_20px_0px_rgba(0,0,0,0.10)] ".concat(colorStyles) },
+        React.createElement("span", { className: "mr-[10px] flex min-w-[3px] rounded-r-[10px] bg-bia-white/50" }),
+        content,
+        React.createElement("div", { className: "flex items-start pr-[11px] pt-[1px]" },
+            React.createElement("button", { onClick: onClose, className: "rounded-[3px] hover:bg-bia-white/20 focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-bia-white/50 active:bg-black/10" },
+                React.createElement(TbX, { size: 14 })))));
+}
+
+function Window(_a) {
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, title = _a.title, open = _a.open; _a.zIndex; var onClose = _a.onClose, rest = __rest(_a, ["size", "title", "open", "zIndex", "onClose"]);
+    var windowSize;
+    // sizing logic
+    switch (size) {
+        case 'sm':
+            windowSize = 'w-[300px]';
+            break;
+        case 'md':
+            windowSize = 'w-[540px]';
+            break;
+        case 'lg':
+            windowSize = 'w-[800px]';
+            break;
+        case 'xl':
+            windowSize = 'w-[1140px]';
+            break;
+        default:
+            windowSize = 'w-[540px]';
+    }
+    if (open) {
+        return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+        // <Draggable handle=".drag-handle" enableUserSelectHack={false}>
+        React.createElement("div", { className: "bianic-window drag-handle flex flex-col gap-[20px] rounded-[5px] bg-white ".concat(windowSize) },
+            React.createElement("div", { className: "bianic-window-header flex cursor-move justify-between px-[20px] pt-[20px]" },
+                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: "bianic-window-content flex w-full flex-col items-start gap-[20px] px-[20px] pb-[20px] text-primary-black" }, rest.children))
+        // </Draggable>
+        );
+    }
+    return null;
+}
+
 exports.Accordions = Accordions;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
@@ -3255,5 +3343,7 @@ exports.TagLabel = TagLabel;
 exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextInput = TextInput;
+exports.Toaster = Toaster;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
+exports.Window = Window;