bianic-ui 2.3.1 → 2.5.0

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/Notification/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface NotificationProps {
+    children?: React.ReactNode;
+    color?: 'red' | 'white';
+    isVisible?: boolean;
+}
+declare const Notification: (props: NotificationProps) => React.JSX.Element;
+export default Notification;

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

@@ -17,6 +17,7 @@ export { TextInput, Radio, TextArea, Checkbox, SelectInput, LiveSearch, Toggle,
 export * from './Icons';
 export { default as InfoPanel } from './InfoPanel';
 export { default as Modal } from './Modal/Modal';
+export { default as Notification } from './Notification';
 export { default as PaginationBar } from './PaginationBar/PaginationBar';
 export { default as Pills } from './Pills/Pills';
 export { default as Popover } from './Popover';

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: '',
@@ -3689,7 +3690,7 @@ function Modal(_a) {
     if (open) {
         return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-        createPortal(React.createElement("div", { className: "bianic-modal-wrapper fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onClick: handleClose },
+        createPortal(React.createElement("div", { className: "bianic-modal-wrapper fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onPointerDown: handleClose },
             React.createElement("div", { className: "bianic-modal flex flex-col gap-[20px] rounded-[5px] bg-white p-[20px] ".concat(modalSize), onClick: onClick },
                 React.createElement("div", { className: "bianic-modal-header flex justify-between" },
                     React.createElement("div", { className: " text-wrap text-left font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
@@ -3699,6 +3700,14 @@ function Modal(_a) {
     return null;
 }
 
+var Notification = function (props) {
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'red' : _a, _b = props.isVisible, isVisible = _b === void 0 ? true : _b;
+    var bgColor = color === 'red' ? 'bg-bia-red' : 'bg-bia-white';
+    return (React.createElement("div", { className: "relative" },
+        React.createElement("div", { className: "absolute -right-[3px] -top-[3px] h-1.5 w-1.5 rounded-radius-full ".concat(bgColor), style: { display: isVisible ? 'block' : 'none' } }),
+        children));
+};
+
 var sizeConfig$2 = {
     md: 'min-w-[38px] h-[40px] text-[14px] font-semibold',
     sm: 'min-w-[29px] h-[30px] text-[12px] font-normal',
@@ -4454,4 +4463,4 @@ function getRelativeTime(date) {
     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 };
+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, Notification, 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 };