bianic-ui 1.13.0 → 1.13.2

package/dist/cjs/types/components/Menu/MenuContainer.d.ts

@@ -7,6 +7,7 @@ interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     className?: string;
     isWithOverlay?: boolean;
     zIndex?: number;
+    onClickItem?: () => void;
 }
 declare const MenuContainer: React.ForwardRefExoticComponent<Omit<MenuContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default MenuContainer;

package/dist/cjs/types/components/Menu/MenuItem.d.ts

@@ -2,6 +2,7 @@ import React, { ComponentPropsWithoutRef } from 'react';
 export interface MenuItemProps extends ComponentPropsWithoutRef<'div'> {
     className?: string;
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    inheritedOnClick?: () => void;
     label: string;
     isChecked?: boolean | undefined;
     caption?: string | undefined;
@@ -9,7 +10,7 @@ export interface MenuItemProps extends ComponentPropsWithoutRef<'div'> {
     onClose?: () => void;
     zIndex?: number;
 }
-declare function MenuItem({ className, label, onClick, caption, isChecked, onClose, children, zIndex, ...props }: MenuItemProps): React.JSX.Element;
+declare function MenuItem({ className, label, onClick, caption, isChecked, onClose, children, zIndex, inheritedOnClick, ...props }: MenuItemProps): React.JSX.Element;
 declare namespace MenuItem {
     var defaultProps: {
         className: string;

package/dist/esm/index.js

@@ -1521,10 +1521,11 @@ var ContextualButton = function (_a) {
             : 'text-primary-white'
         : textColorConfig[variant];
     var stateColor = stateColorConfig[isSelected ? 'selected' : 'default'];
-    return (React.createElement("button", __assign({ className: "contextual-button box-border flex flex-row items-center rounded-radius-sm border border-transparent p-[1px] outline-none ".concat(stateColor, " ").concat(textColor) }, props, { disabled: disabled }),
+    return (React.createElement("button", __assign({ className: "bianic-contextual-button box-border flex flex-row items-center rounded-radius-sm border border-transparent p-[1px] outline-none ".concat(stateColor, " ").concat(textColor) }, props, { disabled: disabled }),
         icon,
-        label && (React.createElement("div", { className: "label max-h-[46px] px-[5px] text-[12px] leading-none" }, label)),
-        actionElement));
+        label && (React.createElement("div", { className: "label flex max-h-[46px] items-center px-[5px] text-[12px] leading-none" },
+            React.createElement("span", { className: "mr-0.5" }, label),
+            actionElement))));
 };
 
 function Color() {
@@ -1655,7 +1656,7 @@ var FileTree = function (_a) {
     var _b = useDetectOutsideClick(popupRef, false), isOpenContMenu = _b[0], setIsOpenContMenu = _b[1];
     var _c = useState({ x: 0, y: 0 }), contMenuPosition = _c[0], setContMenuPosition = _c[1];
     var menuStyle = {
-        position: 'absolute',
+        position: 'fixed',
         top: "".concat(contMenuPosition.y, "px"),
         left: "".concat(contMenuPosition.x, "px"),
         // Pastikan z-index cukup tinggi agar muncul di atas elemen lain
@@ -1670,9 +1671,12 @@ var FileTree = function (_a) {
             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, chevronColor: chevronColor, handleRightClick: handleRightClick, onMouseDownTreeItem: onMouseDown }, props)));
         }),
-        isOpenContMenu && (React.createElement("div", { style: menuStyle, ref: popupRef, className: "bianic-filetree-contextmenu absolute z-10" }, React.isValidElement(contextMenu)
+        isOpenContMenu && (React.createElement("div", { style: menuStyle, ref: popupRef, className: "bianic-filetree-contextmenu" }, React.isValidElement(contextMenu)
             ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
-                cloneElement(contextMenu, { isWithOverlay: false })
+                cloneElement(contextMenu, {
+                    isWithOverlay: false,
+                    onClickItem: function () { return setIsOpenContMenu(false); },
+                })
             : contextMenu))));
 };
 var TreeItem = function (_a) {
@@ -1721,7 +1725,7 @@ var TreeItem = function (_a) {
 };
 
 var MenuContainer = forwardRef(function MenuContainer(propsComp, ref) {
-    var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.zIndex, zIndex = _f === void 0 ? 100 : _f, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex"]);
+    var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     return (open && (React.createElement(React.Fragment, null,
         isWithOverlay && (React.createElement("div", { className: "bianic-menu-overlay fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); }, style: { zIndex: zIndex } })),
@@ -1733,6 +1737,7 @@ var MenuContainer = forwardRef(function MenuContainer(propsComp, ref) {
                     cloneElement(child, {
                         onClose: function () { return onClose(); },
                         zIndex: zIndex + 10,
+                        inheritedOnClick: function () { return onClickItem(); },
                     })
                 : child;
         })))));
@@ -1742,9 +1747,9 @@ MenuContainer.defaultProps = {
 };
 
 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, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex"]);
-    var _h = useState(false), isHovered = _h[0], setIsHovered = _h[1];
-    var _j = useState(false), isLeft = _j[0], setIsLeft = _j[1];
+    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, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.inheritedOnClick, inheritedOnClick = _h === void 0 ? function () { } : _h, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex", "inheritedOnClick"]);
+    var _j = useState(false), isHovered = _j[0], setIsHovered = _j[1];
+    var _k = useState(false), isLeft = _k[0], setIsLeft = _k[1];
     var isWithChecked = isChecked !== undefined;
     var leftPadding = isWithChecked ? 'pl-[5px]' : 'pl-[10px]';
     var rightPadding = caption || children ? 'pr-[5px]' : 'pr-[10px]';
@@ -1769,6 +1774,7 @@ function MenuItem(_a) {
     var currentZIndex = zIndex + 10;
     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]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
         React.createElement("div", __assign({ className: "relative flex items-center py-[5px] hover:bg-bia-blue-pastel ".concat(itemClass), role: "button", tabIndex: 0, onClick: function (e) {
+                inheritedOnClick();
                 onClick(e);
             }, onKeyDown: function () { }, style: {
                 zIndex: isHovered ? currentZIndex : currentZIndex + 15,
@@ -1778,7 +1784,7 @@ function MenuItem(_a) {
             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)))),
-        children && (React.createElement(MenuContainer, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10 }, children))));
+        children && (React.createElement(MenuContainer, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
 }
 MenuItem.defaultProps = {
     className: '',
@@ -2350,7 +2356,7 @@ function LiveSearch(_a) {
                 setIsDropUp(false);
         }
     }, [isOpen]);
-    var filteredOptions = options.filter(function (item) {
+    var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (item) {
         return item.label.toLowerCase().includes(value.label.toLowerCase());
     });
     var handleInputChange = function (e) {