bianic-ui 2.3.0 → 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: '',
@@ -4420,6 +4421,42 @@ function Window(_a) {
         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)));
 }
 
+/**
+ * getRelativeTime
+ * Accepts a JavaScript Date and returns a human friendly relative time string.
+ * Rules:
+ * - < 1 minute: "just now"
+ * - < 1 hour: "x minutes ago"
+ * - < 1 day: "x hours ago"
+ * - < 30 days: "x days ago"
+ * - < 12 months: "x months ago" (uses 30-day months approximation)
+ * - >= 1 year: "x years ago" (uses 365-day years approximation; floors to whole years,
+ *   so e.g. 1 year 11 months => "1 years ago" as requested)
+ */
+function getRelativeTime(date) {
+    var now = new Date();
+    var diffMs = now.getTime() - date.getTime();
+    // If date is in the future or exactly now, return "just now"
+    if (diffMs <= 0)
+        return 'just now';
+    var minute = 60 * 1000;
+    var hour = 60 * minute;
+    var day = 24 * hour;
+    var month = 30 * day; // approximate month as 30 days
+    var year = 365 * day; // approximate year as 365 days
+    if (diffMs < minute)
+        return 'just now';
+    if (diffMs < hour)
+        return "".concat(Math.floor(diffMs / minute), " minutes ago");
+    if (diffMs < day)
+        return "".concat(Math.floor(diffMs / hour), " hours ago");
+    if (diffMs < month)
+        return "".concat(Math.floor(diffMs / day), " days ago");
+    if (diffMs < year)
+        return "".concat(Math.floor(diffMs / month), " months ago");
+    return "".concat(Math.floor(diffMs / year), " years ago");
+}
+
 exports.Accordions = Accordions;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
@@ -4498,4 +4535,5 @@ exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
 exports.TreeItem = TreeItem;
 exports.Window = Window;
+exports.getRelativeTime = getRelativeTime;
 exports.useFileTree = useFileTree;

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/cjs/types/components/index.d.ts

@@ -32,3 +32,4 @@ export { default as Tooltip } from './Tooltip';
 export { Display, P, Heading, Text, Link } from './Typography';
 export { Toaster } from './Toaster';
 export { default as Window } from './Window';
+export { getRelativeTime } from '../utility';

package/dist/cjs/types/utility/index.d.ts

@@ -0,0 +1 @@
+export { getRelativeTime } from './public/words';

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: '',
@@ -4418,4 +4419,40 @@ function Window(_a) {
         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)));
 }
 
-export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, Window, useFileTree };
+/**
+ * getRelativeTime
+ * Accepts a JavaScript Date and returns a human friendly relative time string.
+ * Rules:
+ * - < 1 minute: "just now"
+ * - < 1 hour: "x minutes ago"
+ * - < 1 day: "x hours ago"
+ * - < 30 days: "x days ago"
+ * - < 12 months: "x months ago" (uses 30-day months approximation)
+ * - >= 1 year: "x years ago" (uses 365-day years approximation; floors to whole years,
+ *   so e.g. 1 year 11 months => "1 years ago" as requested)
+ */
+function getRelativeTime(date) {
+    var now = new Date();
+    var diffMs = now.getTime() - date.getTime();
+    // If date is in the future or exactly now, return "just now"
+    if (diffMs <= 0)
+        return 'just now';
+    var minute = 60 * 1000;
+    var hour = 60 * minute;
+    var day = 24 * hour;
+    var month = 30 * day; // approximate month as 30 days
+    var year = 365 * day; // approximate year as 365 days
+    if (diffMs < minute)
+        return 'just now';
+    if (diffMs < hour)
+        return "".concat(Math.floor(diffMs / minute), " minutes ago");
+    if (diffMs < day)
+        return "".concat(Math.floor(diffMs / hour), " hours ago");
+    if (diffMs < month)
+        return "".concat(Math.floor(diffMs / day), " days ago");
+    if (diffMs < year)
+        return "".concat(Math.floor(diffMs / month), " months ago");
+    return "".concat(Math.floor(diffMs / year), " years ago");
+}
+
+export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, Window, getRelativeTime, useFileTree };

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/esm/types/components/index.d.ts

@@ -32,3 +32,4 @@ export { default as Tooltip } from './Tooltip';
 export { Display, P, Heading, Text, Link } from './Typography';
 export { Toaster } from './Toaster';
 export { default as Window } from './Window';
+export { getRelativeTime } from '../utility';

package/dist/esm/types/utility/index.d.ts

@@ -0,0 +1 @@
+export { getRelativeTime } from './public/words';

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: {
@@ -862,4 +862,18 @@ interface WindowProps extends ComponentPropsWithRef<'div'> {
 }
 declare function Window({ size, title, zIndex, onClose, ...rest }: WindowProps): React$1.JSX.Element;
 
-export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, Window, useFileTree };
+/**
+ * getRelativeTime
+ * Accepts a JavaScript Date and returns a human friendly relative time string.
+ * Rules:
+ * - < 1 minute: "just now"
+ * - < 1 hour: "x minutes ago"
+ * - < 1 day: "x hours ago"
+ * - < 30 days: "x days ago"
+ * - < 12 months: "x months ago" (uses 30-day months approximation)
+ * - >= 1 year: "x years ago" (uses 365-day years approximation; floors to whole years,
+ *   so e.g. 1 year 11 months => "1 years ago" as requested)
+ */
+declare function getRelativeTime(date: Date): string;
+
+export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, Window, getRelativeTime, useFileTree };

package/package.json

@@ -3,12 +3,8 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "2.3.0",
+  "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": [