bianic-ui 2.3.1 → 2.4.0

package/dist/cjs/index.js

@@ -1989,9 +1989,9 @@ var usePopupPosition = function (anchorRef, popupRef, position) {
 };
 
 var MenuElement = React.forwardRef(function (_a, ref) {
-    var isTopFlat = _a.isTopFlat, children = _a.children, className = _a.className, zIndex = _a.zIndex, menuRef = _a.menuRef, onClose = _a.onClose, onClickItem = _a.onClickItem, style = _a.style, restProps = __rest(_a, ["isTopFlat", "children", "className", "zIndex", "menuRef", "onClose", "onClickItem", "style"]);
+    var isTopFlat = _a.isTopFlat, children = _a.children, className = _a.className, zIndex = _a.zIndex, menuRef = _a.menuRef, onClose = _a.onClose, onClickItem = _a.onClickItem, style = _a.style, onContextMenu = _a.onContextMenu, restProps = __rest(_a, ["isTopFlat", "children", "className", "zIndex", "menuRef", "onClose", "onClickItem", "style", "onContextMenu"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
-    return (React.createElement("div", __assign({ ref: menuRef, className: "w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), style: style }, restProps), React.Children.map(children, function (child) {
+    return (React.createElement("div", __assign({ ref: menuRef, className: "w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), style: style, onContextMenu: onContextMenu }, restProps), React.Children.map(children, function (child) {
         return React.isValidElement(child)
             ? React.cloneElement(child, {
                 onClose: function () { return onClose(); },
@@ -2002,7 +2002,7 @@ var MenuElement = React.forwardRef(function (_a, ref) {
     })));
 });
 var MenuContainer = function (props) {
-    var _a = props.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = props.children, _b = props.open, open = _b === void 0 ? true : _b, _c = props.onClose, onClose = _c === void 0 ? function () { } : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = props.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = props.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, anchorRef = props.anchorRef, matchAnchorWidth = props.matchAnchorWidth, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef", "matchAnchorWidth"]);
+    var _a = props.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = props.children, _b = props.open, open = _b === void 0 ? true : _b, _c = props.onClose, onClose = _c === void 0 ? function () { } : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = props.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = props.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, anchorRef = props.anchorRef, matchAnchorWidth = props.matchAnchorWidth, onContextMenu = props.onContextMenu, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef", "matchAnchorWidth", "onContextMenu"]);
     if (!open)
         return null;
     var MenuContainerRef = React.useRef(null);
@@ -2030,9 +2030,13 @@ var MenuContainer = function (props) {
         }
         return __assign(__assign({ zIndex: zIndex + 10 }, widthStyle), positionStyle);
     }, [positionStyle]);
-    var menuElement = (React.createElement(MenuElement, __assign({ isTopFlat: isTopFlat, children: children, className: className, zIndex: zIndex, menuRef: MenuContainerRef, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
+    var menuElement = (React.createElement(MenuElement, __assign({ isTopFlat: isTopFlat, children: children, className: className, zIndex: zIndex, menuRef: MenuContainerRef, onClose: onClose, onClickItem: onClickItem, style: newStyle, onContextMenu: function (e) {
+            return onContextMenu ? onContextMenu(e) : e.preventDefault();
+        } }, restProps)));
     return (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 } })),
+        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 }, onContextMenu: function (e) {
+                return onContextMenu ? onContextMenu(e) : e.preventDefault();
+            } })),
         (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
             ? reactDom.createPortal(menuElement, document.body)
             : menuElement));
@@ -2297,7 +2301,7 @@ var TextInput = React.forwardRef(function (_a, ref) {
     return (React.createElement("div", { className: "bianic-text-input-container bianic-fgc-container group/form flex w-full flex-col gap-y-2 text-bia-black" },
         label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
         React.createElement("div", { className: "relative w-full ".concat(disabledClass) },
-            React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target 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:cursor-not-allowed 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, autoComplete: autoComplete, ref: ref }, props)),
+            React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target 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:cursor-not-allowed 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, autoComplete: autoComplete, ref: ref, style: { paddingRight: "".concat(10 + Number(iconSize), "px") } }, props)),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
         (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 whitespace-nowrap text-xs ".concat(descColor) },
             React.createElement("span", null, descText),
@@ -2569,7 +2573,7 @@ function SelectInput(_a) {
                 }
                 return child;
             })))),
-        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc text-xs ".concat(descColor) }, descText))));
 }
 SelectInput.defaultProps = {
     descText: '',
@@ -2727,11 +2731,7 @@ function DropdownItem(_a) {
         : 'right-0 translate-x-full';
     var currentZIndex = zIndex + 10;
     return (React.createElement("div", { className: "bianic-dropdown-item group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[5px] last:rounded-b-radius-sm last:pb-[5px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement("button", __assign({ className: "relative flex w-full !min-w-fit items-center justify-start whitespace-nowrap px-[15px] py-[5px] text-left text-bia-black disabled:cursor-not-allowed disabled:text-bia-coolgrey-light-50 hover:[&:not(:disabled)]:bg-bia-blue-pastel ".concat(itemClass), style: {
-                zIndex: isHovered ? currentZIndex : currentZIndex + 15,
-            }, onClick: function (e) {
-                onClickItem(e, value);
-            }, onKeyDown: function () { }, disabled: disabled, type: "button" }, props),
+        React.createElement("button", __assign({ className: "relative flex w-full !min-w-fit items-center justify-start whitespace-nowrap px-[15px] py-[5px] text-left text-bia-black disabled:cursor-not-allowed disabled:text-bia-coolgrey-light-50 hover:[&:not(:disabled)]:bg-bia-blue-pastel ".concat(itemClass), style: { zIndex: currentZIndex + 15 }, onClick: function (e) { return onClickItem(e, value); }, onKeyDown: function () { }, disabled: disabled, type: "button" }, props),
             content,
             React.createElement("div", { className: "ml-auto flex items-center" }, children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey", size: chevronSize })))),
         children && (React.createElement(DropdownContNoAnchor, { 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), onClose: onClose, open: isHovered, onClickItem: function (e, value) { return onClickItem(e, value); }, size: size, ref: DropdownContRef, zIndex: currentZIndex + 10 }, children))));
@@ -2761,11 +2761,12 @@ var filterOptions = function (options, searchTerm) {
     });
 };
 
+var isObjectWithLabel = function (value) {
+    return typeof value === 'object' && value !== null && 'label' in value;
+};
 var getItemLabel = function (value) {
     var _a;
-    return typeof value === 'object' && value !== null && 'label' in value
-        ? (_a = value.label) !== null && _a !== void 0 ? _a : ''
-        : String(value !== null && value !== void 0 ? value : '');
+    return isObjectWithLabel(value) ? (_a = value.label) !== null && _a !== void 0 ? _a : '' : String(value !== null && value !== void 0 ? value : '');
 };
 var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick) {
     if (searchVariant === void 0) { searchVariant = 'include'; }
@@ -2869,7 +2870,7 @@ function LiveSearch(_a) {
     }), isOpen = _m.isOpen, setIsOpen = _m.setIsOpen, searchTerm = _m.searchTerm, handleInputChange = _m.handleInputChange, handleDropdownItemClick = _m.handleDropdownItemClick;
     var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
     var _p = dropContProps || {}, dropContClassName = _p.className; _p.onClickItem; _p.anchorRef; var restDropContProps = __rest(_p, ["className", "onClickItem", "anchorRef"]);
-    var isValueExist = value && value.label !== undefined && value.label !== '';
+    var isSearchTermExist = searchTerm && searchTerm !== '';
     var descColor = 'text-primary-cool';
     var isExistValidation = isValid !== null && isValid !== undefined;
     if (!disabled && isExistValidation && isValid)
@@ -2882,13 +2883,13 @@ function LiveSearch(_a) {
     return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container field-group group/form flex w-full flex-col gap-y-2" },
         label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
         React.createElement("div", { className: "group relative w-full ".concat(disabledClass) },
-            React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white text-bia-black read-only:pointer-events-none read-only:border-bia-grey-light-50 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
+            React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white text-bia-black read-only:pointer-events-none read-only:border-bia-grey-light-50 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(inputClass), style: { paddingRight: "".concat(10 + Number(iconSize), "px") }, onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
                     onChangeText(e);
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconClass) },
-                !isValueExist && (React.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
-                isValueExist && (React.createElement("button", { onClick: function () { return setValue({ id: null, label: '' }); }, className: "flex h-full w-full items-center" },
+                !isSearchTermExist && (React.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
+                isSearchTermExist && (React.createElement("button", { onClick: function () { return setValue({ id: null, label: '' }); }, className: "flex h-full w-full items-center disabled:cursor-not-allowed", disabled: disabled },
                     React.createElement(TbX, { className: "text-primary-black", style: { fontSize: iconSize } })))),
             children === undefined && isOpen && (React.createElement("div", { className: "border-grey-100 absolute z-10 max-h-60 w-full overflow-y-auto rounded-b-md border bg-primary-white shadow-lg", onClick: onClickDropdown }, filteredOptions.map(function (option) {
                 var isSelected = value && value.id && option.id === value.id;
@@ -2904,7 +2905,7 @@ function LiveSearch(_a) {
                 ? renderedChildren
                 : // If no results and searchTerm is present
                     searchTerm.length > 0 && (React.createElement(DropdownItem, { content: React.createElement("div", { className: "px-4 py-2 text-gray-500" }, "Tidak ada hasil ditemukan.") }))))),
-        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc text-xs ".concat(descColor) }, descText))));
 }
 LiveSearch.defaultProps = {
     descText: '',

package/dist/cjs/types/components/Forms/LiveSearch/utils/dropdownUtils.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SearchVariant } from '../types';
+export declare const isObjectWithLabel: (value: any) => boolean;
 export declare const getItemLabel: (value: any) => string;
 export declare const processDropdownChildren: (nodes: React.ReactNode, currentSearchTerm: string, includeAllIfNoSearch: boolean, searchVariant: SearchVariant | undefined, handleDropdownItemClick: (e: React.MouseEvent<HTMLDivElement>, value: any) => void) => React.ReactNode;
 export declare const processRenderedChildren: (children: React.ReactNode | undefined, searchTerm: string, searchVariant: SearchVariant, handleDropdownItemClick: (e: React.MouseEvent<HTMLDivElement>, value: any) => void) => {

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

@@ -1,3 +1,4 @@
+import React, { ComponentPropsWithRef } from 'react';
 interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     isTopFlat?: boolean;
     children: React.ReactNode | undefined;
@@ -9,8 +10,8 @@ interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     onClickItem?: () => void;
     anchorRef?: React.RefObject<HTMLElement>;
     matchAnchorWidth?: undefined | 'min' | 'exact';
+    onContextMenu?: (event: React.MouseEvent<HTMLElement>) => void;
 }
-import React, { ComponentPropsWithRef } from 'react';
 declare const MenuContainer: {
     (props: MenuContainerProps): React.JSX.Element | null;
     defaultProps: {

package/dist/esm/index.js

@@ -1987,9 +1987,9 @@ var usePopupPosition = function (anchorRef, popupRef, position) {
 };
 
 var MenuElement = forwardRef(function (_a, ref) {
-    var isTopFlat = _a.isTopFlat, children = _a.children, className = _a.className, zIndex = _a.zIndex, menuRef = _a.menuRef, onClose = _a.onClose, onClickItem = _a.onClickItem, style = _a.style, restProps = __rest(_a, ["isTopFlat", "children", "className", "zIndex", "menuRef", "onClose", "onClickItem", "style"]);
+    var isTopFlat = _a.isTopFlat, children = _a.children, className = _a.className, zIndex = _a.zIndex, menuRef = _a.menuRef, onClose = _a.onClose, onClickItem = _a.onClickItem, style = _a.style, onContextMenu = _a.onContextMenu, restProps = __rest(_a, ["isTopFlat", "children", "className", "zIndex", "menuRef", "onClose", "onClickItem", "style", "onContextMenu"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
-    return (React.createElement("div", __assign({ ref: menuRef, className: "w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), style: style }, restProps), Children.map(children, function (child) {
+    return (React.createElement("div", __assign({ ref: menuRef, className: "w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), style: style, onContextMenu: onContextMenu }, restProps), Children.map(children, function (child) {
         return React.isValidElement(child)
             ? cloneElement(child, {
                 onClose: function () { return onClose(); },
@@ -2000,7 +2000,7 @@ var MenuElement = forwardRef(function (_a, ref) {
     })));
 });
 var MenuContainer = function (props) {
-    var _a = props.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = props.children, _b = props.open, open = _b === void 0 ? true : _b, _c = props.onClose, onClose = _c === void 0 ? function () { } : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = props.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = props.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, anchorRef = props.anchorRef, matchAnchorWidth = props.matchAnchorWidth, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef", "matchAnchorWidth"]);
+    var _a = props.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = props.children, _b = props.open, open = _b === void 0 ? true : _b, _c = props.onClose, onClose = _c === void 0 ? function () { } : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = props.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = props.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, anchorRef = props.anchorRef, matchAnchorWidth = props.matchAnchorWidth, onContextMenu = props.onContextMenu, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef", "matchAnchorWidth", "onContextMenu"]);
     if (!open)
         return null;
     var MenuContainerRef = useRef(null);
@@ -2028,9 +2028,13 @@ var MenuContainer = function (props) {
         }
         return __assign(__assign({ zIndex: zIndex + 10 }, widthStyle), positionStyle);
     }, [positionStyle]);
-    var menuElement = (React.createElement(MenuElement, __assign({ isTopFlat: isTopFlat, children: children, className: className, zIndex: zIndex, menuRef: MenuContainerRef, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
+    var menuElement = (React.createElement(MenuElement, __assign({ isTopFlat: isTopFlat, children: children, className: className, zIndex: zIndex, menuRef: MenuContainerRef, onClose: onClose, onClickItem: onClickItem, style: newStyle, onContextMenu: function (e) {
+            return onContextMenu ? onContextMenu(e) : e.preventDefault();
+        } }, restProps)));
     return (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 } })),
+        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 }, onContextMenu: function (e) {
+                return onContextMenu ? onContextMenu(e) : e.preventDefault();
+            } })),
         (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
             ? createPortal(menuElement, document.body)
             : menuElement));
@@ -2295,7 +2299,7 @@ var TextInput = forwardRef(function (_a, ref) {
     return (React.createElement("div", { className: "bianic-text-input-container bianic-fgc-container group/form flex w-full flex-col gap-y-2 text-bia-black" },
         label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
         React.createElement("div", { className: "relative w-full ".concat(disabledClass) },
-            React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target 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:cursor-not-allowed 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, autoComplete: autoComplete, ref: ref }, props)),
+            React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target 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:cursor-not-allowed 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, autoComplete: autoComplete, ref: ref, style: { paddingRight: "".concat(10 + Number(iconSize), "px") } }, props)),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
         (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 whitespace-nowrap text-xs ".concat(descColor) },
             React.createElement("span", null, descText),
@@ -2567,7 +2571,7 @@ function SelectInput(_a) {
                 }
                 return child;
             })))),
-        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc text-xs ".concat(descColor) }, descText))));
 }
 SelectInput.defaultProps = {
     descText: '',
@@ -2725,11 +2729,7 @@ function DropdownItem(_a) {
         : 'right-0 translate-x-full';
     var currentZIndex = zIndex + 10;
     return (React.createElement("div", { className: "bianic-dropdown-item group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[5px] last:rounded-b-radius-sm last:pb-[5px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement("button", __assign({ className: "relative flex w-full !min-w-fit items-center justify-start whitespace-nowrap px-[15px] py-[5px] text-left text-bia-black disabled:cursor-not-allowed disabled:text-bia-coolgrey-light-50 hover:[&:not(:disabled)]:bg-bia-blue-pastel ".concat(itemClass), style: {
-                zIndex: isHovered ? currentZIndex : currentZIndex + 15,
-            }, onClick: function (e) {
-                onClickItem(e, value);
-            }, onKeyDown: function () { }, disabled: disabled, type: "button" }, props),
+        React.createElement("button", __assign({ className: "relative flex w-full !min-w-fit items-center justify-start whitespace-nowrap px-[15px] py-[5px] text-left text-bia-black disabled:cursor-not-allowed disabled:text-bia-coolgrey-light-50 hover:[&:not(:disabled)]:bg-bia-blue-pastel ".concat(itemClass), style: { zIndex: currentZIndex + 15 }, onClick: function (e) { return onClickItem(e, value); }, onKeyDown: function () { }, disabled: disabled, type: "button" }, props),
             content,
             React.createElement("div", { className: "ml-auto flex items-center" }, children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey", size: chevronSize })))),
         children && (React.createElement(DropdownContNoAnchor, { 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), onClose: onClose, open: isHovered, onClickItem: function (e, value) { return onClickItem(e, value); }, size: size, ref: DropdownContRef, zIndex: currentZIndex + 10 }, children))));
@@ -2759,11 +2759,12 @@ var filterOptions = function (options, searchTerm) {
     });
 };
 
+var isObjectWithLabel = function (value) {
+    return typeof value === 'object' && value !== null && 'label' in value;
+};
 var getItemLabel = function (value) {
     var _a;
-    return typeof value === 'object' && value !== null && 'label' in value
-        ? (_a = value.label) !== null && _a !== void 0 ? _a : ''
-        : String(value !== null && value !== void 0 ? value : '');
+    return isObjectWithLabel(value) ? (_a = value.label) !== null && _a !== void 0 ? _a : '' : String(value !== null && value !== void 0 ? value : '');
 };
 var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick) {
     if (searchVariant === void 0) { searchVariant = 'include'; }
@@ -2867,7 +2868,7 @@ function LiveSearch(_a) {
     }), isOpen = _m.isOpen, setIsOpen = _m.setIsOpen, searchTerm = _m.searchTerm, handleInputChange = _m.handleInputChange, handleDropdownItemClick = _m.handleDropdownItemClick;
     var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
     var _p = dropContProps || {}, dropContClassName = _p.className; _p.onClickItem; _p.anchorRef; var restDropContProps = __rest(_p, ["className", "onClickItem", "anchorRef"]);
-    var isValueExist = value && value.label !== undefined && value.label !== '';
+    var isSearchTermExist = searchTerm && searchTerm !== '';
     var descColor = 'text-primary-cool';
     var isExistValidation = isValid !== null && isValid !== undefined;
     if (!disabled && isExistValidation && isValid)
@@ -2880,13 +2881,13 @@ function LiveSearch(_a) {
     return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container field-group group/form flex w-full flex-col gap-y-2" },
         label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
         React.createElement("div", { className: "group relative w-full ".concat(disabledClass) },
-            React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white text-bia-black read-only:pointer-events-none read-only:border-bia-grey-light-50 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
+            React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white text-bia-black read-only:pointer-events-none read-only:border-bia-grey-light-50 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(inputClass), style: { paddingRight: "".concat(10 + Number(iconSize), "px") }, onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
                     onChangeText(e);
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconClass) },
-                !isValueExist && (React.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
-                isValueExist && (React.createElement("button", { onClick: function () { return setValue({ id: null, label: '' }); }, className: "flex h-full w-full items-center" },
+                !isSearchTermExist && (React.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
+                isSearchTermExist && (React.createElement("button", { onClick: function () { return setValue({ id: null, label: '' }); }, className: "flex h-full w-full items-center disabled:cursor-not-allowed", disabled: disabled },
                     React.createElement(TbX, { className: "text-primary-black", style: { fontSize: iconSize } })))),
             children === undefined && isOpen && (React.createElement("div", { className: "border-grey-100 absolute z-10 max-h-60 w-full overflow-y-auto rounded-b-md border bg-primary-white shadow-lg", onClick: onClickDropdown }, filteredOptions.map(function (option) {
                 var isSelected = value && value.id && option.id === value.id;
@@ -2902,7 +2903,7 @@ function LiveSearch(_a) {
                 ? renderedChildren
                 : // If no results and searchTerm is present
                     searchTerm.length > 0 && (React.createElement(DropdownItem, { content: React.createElement("div", { className: "px-4 py-2 text-gray-500" }, "Tidak ada hasil ditemukan.") }))))),
-        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc text-xs ".concat(descColor) }, descText))));
 }
 LiveSearch.defaultProps = {
     descText: '',

package/dist/esm/types/components/Forms/LiveSearch/utils/dropdownUtils.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SearchVariant } from '../types';
+export declare const isObjectWithLabel: (value: any) => boolean;
 export declare const getItemLabel: (value: any) => string;
 export declare const processDropdownChildren: (nodes: React.ReactNode, currentSearchTerm: string, includeAllIfNoSearch: boolean, searchVariant: SearchVariant | undefined, handleDropdownItemClick: (e: React.MouseEvent<HTMLDivElement>, value: any) => void) => React.ReactNode;
 export declare const processRenderedChildren: (children: React.ReactNode | undefined, searchTerm: string, searchVariant: SearchVariant, handleDropdownItemClick: (e: React.MouseEvent<HTMLDivElement>, value: any) => void) => {

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

@@ -1,3 +1,4 @@
+import React, { ComponentPropsWithRef } from 'react';
 interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     isTopFlat?: boolean;
     children: React.ReactNode | undefined;
@@ -9,8 +10,8 @@ interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     onClickItem?: () => void;
     anchorRef?: React.RefObject<HTMLElement>;
     matchAnchorWidth?: undefined | 'min' | 'exact';
+    onContextMenu?: (event: React.MouseEvent<HTMLElement>) => void;
 }
-import React, { ComponentPropsWithRef } from 'react';
 declare const MenuContainer: {
     (props: MenuContainerProps): React.JSX.Element | null;
     defaultProps: {

package/dist/index.d.ts

@@ -197,8 +197,8 @@ interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     onClickItem?: () => void;
     anchorRef?: React$1.RefObject<HTMLElement>;
     matchAnchorWidth?: undefined | 'min' | 'exact';
+    onContextMenu?: (event: React$1.MouseEvent<HTMLElement>) => void;
 }
-
 declare const MenuContainer: {
     (props: MenuContainerProps): React$1.JSX.Element | null;
     defaultProps: {

package/package.json

@@ -3,12 +3,8 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Design Language System develop by BIAENERGI",
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:bia-energi/bianic-2.0.git"
-  },
   "scripts": {
     "rollup": "rollup -c",
     "storybook": "storybook dev -p 6006",
@@ -18,8 +14,8 @@
     "lint:fix": "npx eslint src/components --fix",
     "prepare": "husky install",
     "release": "standard-version",
-    "full-release": "npm run release && git push --follow-tags origin development && npm publish",
-    "release:beta": "npm run release -- --prerelease beta && git push --follow-tags origin development && npm publish --tag beta"
+    "full-release": "npm run release && git push --follow-tags origin development-temporary && npm run rollup && npm publish",
+    "release:beta": "npm run release -- --prerelease beta && git push --follow-tags origin development-temporary && npm publish --tag beta"
   },
   "standard-version": {
     "types": [