bianic-ui 1.16.0-beta.0 → 1.16.0-beta.2

package/dist/cjs/index.js

@@ -443,10 +443,10 @@ var minWidthConfig$1 = {
     tn: 'min-w-[64px]',
 };
 var iconOnlySizeConfig$1 = {
-    lg: 'py-[13px] h-[48px] h-[48px] flex items-center justify-center gap-[10px]',
+    lg: 'py-[13px] h-[48px] w-[48px] flex items-center justify-center gap-[10px]',
     md: 'py-[11px] h-[40px] w-[40px] flex items-center justify-center gap-[5px]',
-    sm: 'py-[8px] h-[30px] h-[30px] flex items-center justify-center gap-[5px] ',
-    tn: 'py-[4px] h-[22px] h-[22px] flex items-center justify-center gap-[3px]',
+    sm: 'py-[8px] h-[30px] w-[30px] flex items-center justify-center gap-[5px] ',
+    tn: 'py-[4px] h-[22px] w-[22px] flex items-center justify-center gap-[3px]',
 };
 var shadow = 'shadow-[0px_6px_18px_1px_rgba(188,199,237,0.5)] disabled:shadow-none active:shadow-none';
 var variantConfig$2 = {
@@ -2401,10 +2401,11 @@ var getDropdownStyle = function (anchorRef, dropdownRef) {
     // AND space above is more than space below
     // then flip up
     if (spaceToBottom < dropdownHeight && spaceToTop > spaceToBottom) {
-        style.bottom = "".concat(window.innerHeight - anchorRect.top, "px");
+        var topPositionForFlip = anchorRect.top + window.scrollY - dropdownHeight;
+        style.bottom = "".concat(topPositionForFlip, "px");
     }
     else {
-        style.top = "".concat(anchorRect.bottom, "px");
+        style.top = "".concat(anchorRect.bottom + window.scrollY, "px");
     }
     return style;
 };
@@ -2520,111 +2521,129 @@ var matchSearchTerm = function (content, term, variant) {
             return lowerContent.includes(lowerTerm);
     }
 };
-function LiveSearch(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h, _j = _a.children, children = _j === void 0 ? undefined : _j, _k = _a.dropContProps, dropContProps = _k === void 0 ? { className: undefined } : _k, _l = _a.searchVariant, searchVariant = _l === void 0 ? 'include' : _l;
-    var _m = React.useState(false), isOpen = _m[0], setIsOpen = _m[1];
-    var _o = React.useState(value.label || ''), searchTerm = _o[0], setSearchTerm = _o[1];
-    var _p = sizeConfig$6[size], iconClass = _p.iconClass, iconSize = _p.iconSize, inputClass = _p.inputClass;
-    var dropContClassName = dropContProps.className, dropContOnClickItem = dropContProps.onClickItem, restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
-    var isValueExist = value && value.label !== undefined && value.label !== '';
-    var inputRef = React.useRef(null);
-    var dropdownContRef = React.useRef(null);
-    // Will be used soon
-    // const handleOutsideClick = (e: MouseEvent) => {
-    //   if (inputRef.current && !inputRef.current.contains(e.target as Node)) {
-    //     setIsOpen(false)
-    //   }
-    // }
-    // useEffect(() => {
-    //   document.addEventListener('mousedown', handleOutsideClick)
-    //   return () => {
-    //     document.removeEventListener('mousedown', handleOutsideClick)
-    //   }
-    // })
-    // Synchronize internal searchTerm with external value prop
-    React.useEffect(function () {
-        // Only update searchTerm if the label from the value prop differs from the current searchTerm
-        // This prevents infinite loops if searchTerm is already the same as value.label
-        if (value.label !== searchTerm) {
-            setSearchTerm(value.label || '');
-        }
-    }, [value.label, searchTerm]);
-    var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (item) {
-        return item.label.toLowerCase().includes(value.label.toLowerCase());
+var filterOptions = function (options, searchTerm) {
+    return options === null || options === void 0 ? void 0 : options.filter(function (item) {
+        return item.label.toLowerCase().includes(searchTerm.toLowerCase());
     });
-    var handleInputChange = function (e) {
-        var newSearchTerm = e.target.value;
-        setSearchTerm(newSearchTerm);
-        setIsOpen(true); // Ensure dropdown opens when typing
-    };
-    var handleDropdownItemClick = React.useCallback(function (clickedValue) {
-        setSearchTerm(clickedValue.label); // Set input text to the selected label
-        setValue(clickedValue); // Update the value in the parent
-        setIsOpen(false);
-    }, [setValue]);
-    // Recursive function to filter and clone DropdownItems, including nested items
-    var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch) {
-        return React.Children.map(nodes, function (child) {
-            if (!React.isValidElement(child) || child.type !== DropdownItem) {
-                return child;
-            }
-            var itemProps = child.props;
-            // Assume content is a string for filtering; otherwise, filtering won't work well
-            var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
-            var itemValue = itemProps.value;
-            var isDisabled = itemProps.disabled;
-            // 2. Filtering Logic (Uses Global Search Variant)
-            if (!includeAllIfNoSearch) {
-                // Use the matchSearchTerm utility with the selected searchVariant
-                if (currentSearchTerm && !matchSearchTerm(itemValue, currentSearchTerm, searchVariant)) {
-                    return null; // Item does not match the search criteria
-                }
+};
+
+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 : '');
+};
+var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick) {
+    if (searchVariant === void 0) { searchVariant = 'include'; }
+    return React.Children.map(nodes, function (child) {
+        if (!React.isValidElement(child) || child.type !== DropdownItem) {
+            return child;
+        }
+        var itemProps = child.props;
+        var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
+        var itemValue = itemProps.value;
+        var isDisabled = itemProps.disabled;
+        // Filtering Logic
+        if (!includeAllIfNoSearch) {
+            var itemValueStr = typeof itemValue === 'object'
+                ? itemValue.label
+                : String(itemValue || '');
+            if (currentSearchTerm &&
+                !matchSearchTerm(itemValueStr, currentSearchTerm, searchVariant)) {
+                return null;
             }
-            // 3. Process Nested Children (Recursion)
-            var clonedChildren = itemProps.children
-                ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch)
-                : null;
-            // 4. Clone and Inject Click Handler
-            return React.cloneElement(child, {
-                onClick: function (e) {
-                    if (!isDisabled) {
-                        handleDropdownItemClick({
-                            id: itemValue !== undefined ? itemValue : itemContent,
-                            label: itemValue !== undefined ? itemValue : itemContent
-                        });
-                    }
-                    if (dropContOnClickItem) {
-                        dropContOnClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+        }
+        // Process Nested Children
+        var clonedChildren = itemProps.children
+            ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick)
+            : null;
+        // Clone and Inject Click Handler
+        return React.cloneElement(child, {
+            onClick: function (e) {
+                if (!isDisabled) {
+                    if (itemValue === undefined &&
+                        typeof itemProps.content === 'string') {
+                        return handleDropdownItemClick(e, itemContent);
                     }
-                    if (itemProps.onClickItem) {
-                        itemProps.onClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+                    if (typeof itemValue === 'object' || itemValue !== undefined) {
+                        return handleDropdownItemClick(e, itemValue);
                     }
-                },
-                children: clonedChildren
-            });
+                }
+                if (itemProps.onClickItem) {
+                    itemProps.onClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+                }
+            },
+            children: clonedChildren,
         });
-    };
-    // Determine which children to display
+    });
+};
+var processRenderedChildren = function (children, searchTerm, searchVariant, handleDropdownItemClick) {
     var renderedChildren = null;
     var hasFilteredResults = false;
     if (searchTerm) {
-        // If there's a searchTerm, filter children
-        renderedChildren = processDropdownChildren(children, searchTerm, false);
+        renderedChildren = processDropdownChildren(children, searchTerm, false, searchVariant, handleDropdownItemClick);
         hasFilteredResults =
             React.Children.toArray(renderedChildren).filter(Boolean).length > 0;
     }
     else {
-        // If searchTerm is empty, display all children without filtering (but with onClick injected)
-        renderedChildren = processDropdownChildren(children, '', true);
+        renderedChildren = processDropdownChildren(children, '', true, searchVariant, handleDropdownItemClick);
         hasFilteredResults =
-            React.Children.toArray(renderedChildren).filter(Boolean).length > 0; // Should always be true if there are initial children
+            React.Children.toArray(renderedChildren).filter(Boolean).length > 0;
     }
+    return { renderedChildren: renderedChildren, hasFilteredResults: hasFilteredResults };
+};
+
+var useLiveSearch = function (_a) {
+    var value = _a.value, setValue = _a.setValue, onChangeText = _a.onChangeText, dropContOnClickItem = _a.dropContOnClickItem;
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = React.useState(String(value.label || '')), searchTerm = _c[0], setSearchTerm = _c[1];
+    React.useEffect(function () {
+        if (!isOpen && searchTerm !== '') {
+            setSearchTerm(getItemLabel(value));
+        }
+    }, [isOpen]);
+    var handleInputChange = function (e) {
+        var newSearchTerm = e.target.value;
+        setSearchTerm(newSearchTerm);
+        setIsOpen(true);
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(e);
+    };
+    var handleDropdownItemClick = React.useCallback(function (event, clickedValue) {
+        dropContOnClickItem === null || dropContOnClickItem === void 0 ? void 0 : dropContOnClickItem(event, clickedValue);
+        var newLabel = getItemLabel(clickedValue);
+        setSearchTerm(newLabel);
+        setValue(clickedValue);
+        setIsOpen(false);
+    }, [setValue, dropContOnClickItem]);
+    return {
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        searchTerm: searchTerm,
+        handleInputChange: handleInputChange,
+        handleDropdownItemClick: handleDropdownItemClick,
+    };
+};
+
+function LiveSearch(_a) {
+    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.dropContProps, dropContProps = _e === void 0 ? { className: undefined } : _e, id = _a.id, label = _a.label, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, options = _a.options, placeholder = _a.placeholder, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? false : _j, _k = _a.searchVariant, searchVariant = _k === void 0 ? 'include' : _k, setValue = _a.setValue, _l = _a.size, size = _l === void 0 ? 'md' : _l, value = _a.value;
+    var inputRef = React.useRef(null);
+    var dropdownContRef = React.useRef(null);
+    var _m = useLiveSearch({
+        value: value,
+        setValue: setValue,
+        onChangeText: onChangeText,
+        dropContOnClickItem: dropContProps.onClickItem
+    }), 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 dropContClassName = dropContProps.className; dropContProps.onClickItem; var restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
+    var isValueExist = value && value.label !== undefined && value.label !== '';
+    var filteredOptions = filterOptions(options || [], value.label);
+    var _p = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _p.renderedChildren, hasFilteredResults = _p.hasFilteredResults;
     return (React.createElement("div", { className: "bianic-livesearch 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" },
             React.createElement("input", { className: "bianic-livesearch-input field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled 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-10 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) {
                     onChangeText(e);
-                    setValue({ id: null, label: e.target.value });
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconClass) },
@@ -3134,15 +3153,15 @@ var displayDateFormatter = function (date) {
 };
 
 function DatePicker(_a) {
-    var className = _a.className, value = _a.value, onChange = _a.onChange, size = _a.size, disabled = _a.disabled; _a.placeholder; var label = _a.label, minDate = _a.minDate, maxDate = _a.maxDate, required = _a.required, nullDisplay = _a.nullDisplay;
+    var value = _a.value, onChange = _a.onChange, size = _a.size, disabled = _a.disabled; _a.placeholder; var label = _a.label, minDate = _a.minDate, maxDate = _a.maxDate, required = _a.required, nullDisplay = _a.nullDisplay, inputclassName = _a.inputclassName, containerClassName = _a.containerClassName;
     // State and Ref
     var inputRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
     var pickerRef = React.useRef(null);
     var _c = useDetectOutsideClick(wrapperRef, false, pickerRef), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
-    return (React.createElement("div", { className: "bianic-datepicker-container relative", ref: wrapperRef },
+    return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName), ref: wrapperRef },
         React.createElement("div", { className: "bianic-datepicker-field-container" },
-            React.createElement(DateInputDisplay, { inputClassName: className, value: value, setValue: onChange, placeholder: "YYYY-MM-DD", nullDisplay: nullDisplay, size: size, label: label, required: required, buttonAction: function () { return setIsPickerOpen(!isPickerOpen); }, ref: inputRef, disabled: disabled })),
+            React.createElement(DateInputDisplay, { inputClassName: inputclassName, value: value, setValue: onChange, placeholder: "YYYY-MM-DD", nullDisplay: nullDisplay, size: size, label: label, required: required, buttonAction: function () { return setIsPickerOpen(!isPickerOpen); }, ref: inputRef, disabled: disabled })),
         isPickerOpen && (React.createElement("div", { className: "bianic-datepicker-calendar-container absolute left-0 w-[250px] rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] shadow-md" },
             React.createElement(PickerCalendar, { selectedDate: value, onDateChange: onChange, ref: pickerRef, minDate: minDate, maxDate: maxDate })))));
 }
@@ -3340,18 +3359,17 @@ var sizeConfig$3 = {
 };
 
 var InfoPanel = function (_a) {
-    var variant = _a.variant, color = _a.color, className = _a.className, textClassName = _a.textClassName;
+    var variant = _a.variant, color = _a.color, className = _a.className, children = _a.children;
     var sizeClass = sizeConfig$3[variant || 'container'];
     var colorClass = colorConfig$1[color || 'yellow'];
     var allClasses = "".concat(sizeClass, " ").concat(colorClass, " ").concat(className);
-    return (React.createElement("div", { className: "flex items-center justify-center rounded-radius-md ".concat(allClasses) },
-        React.createElement(Text, { variant: "medium-text", extended: textClassName }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")));
+    return (React.createElement("div", { className: "flex items-center justify-center rounded-radius-md ".concat(allClasses) }, children));
 };
 InfoPanel.defaultProps = {
     variant: 'container',
     color: 'yellow',
     className: '',
-    textClassName: '',
+    children: null,
 };
 
 function Modal(_a) {
@@ -3438,7 +3456,7 @@ function PaginationBar(_a) {
     return (React.createElement("div", { className: "flex ".concat(positionConfig[position], " gap-[5px]") },
         React.createElement(Button, { variant: "subtle-link", size: size, type: "button", onClick: function () { return handlePageChange(currentPage - 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronLeft, { size: iconSize }), disabled: currentPage === 1 }),
         showedPages.map(function (page) { return (React.createElement(Button, { key: page, variant: currentPage === page ? 'default' : 'subtle-link', size: size, type: "button", onClick: function () { return handlePageChange(page); }, className: "cursor-pointer ".concat(sizeConfig$2[size]), label: page.toString(), minWidth: buttonSizingStyle })); }),
-        React.createElement(Button, { variant: "subtle-link", size: "md", type: "button", onClick: function () { return handlePageChange(currentPage + 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages })));
+        React.createElement(Button, { variant: "subtle-link", size: size, type: "button", onClick: function () { return handlePageChange(currentPage + 1); }, className: "cursor-pointer", iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages })));
 }
 
 var activeConfig = {
@@ -3756,7 +3774,7 @@ var configTab = {
 };
 
 function Tab(_a) {
-    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size"]);
+    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, className = _a.className, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size", "className"]);
     var disabledKeyTab = disabled || active ? ' pointer-events-none' : '';
     var cursor;
     if (disabled) {
@@ -3777,8 +3795,9 @@ function Tab(_a) {
     var activeKeyTab = active
         ? 'group-disabled:text-bia-coolgrey-disabled text-primary-black'
         : 'text-bia-coolgrey group-hover:text-bia-coolgrey-hover group-active:text-bia-coolgrey-active group-disabled:text-bia-coolgrey-disabled';
+    var buttonClassName = "".concat(horizontalButtonStyle, " ").concat(disabledKeyTab, " ").concat(fit, " ").concat(className ? className : '');
     return (React.createElement("div", { className: "".concat(mode === 'horizontal' ? 'h-full' : 'w-full', " ").concat(cursor) },
-        React.createElement("button", __assign({ type: "button", disabled: disabled }, rest, { className: "flex items-stretch justify-between ".concat(horizontalButtonStyle, " group relative outline-none ").concat(disabledKeyTab, " ").concat(fit) }),
+        React.createElement("button", __assign({ type: "button", className: "flex items-stretch justify-between  group relative outline-none ".concat(buttonClassName), disabled: disabled }, rest),
             React.createElement("div", { className: "flex items-center justify-center ".concat(buttonContentStyle) },
                 React.createElement("div", { className: "flex  items-center justify-center " },
                     React.createElement("div", { className: "flex items-center space-x-1 text-nowrap ".concat(activeKeyTab, " ").concat(configTab[size].text) },