bianic-ui 1.16.0-beta.4 → 1.16.0-beta.7

package/dist/cjs/index.js

@@ -1513,7 +1513,7 @@ var stateColorConfig = {
     default: 'enabled:hover:bg-black/10 enabled:focus-visible:border-bia-blue-disabled enabled:focus-visible:outline-2 enabled:focus-visible:-outline-offset-1 enabled:focus-visible:outline-bia-blue-disabled enabled:active:bg-black/15',
 };
 
-var ContextualButton = function (_a) {
+var ContextualButton = React.forwardRef(function (_a, ref) {
     var actionElement = _a.actionElement, label = _a.label, icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? 'dark' : _b, disabled = _a.disabled; _a.isNotified; var _d = _a.isSelected, isSelected = _d === void 0 ? false : _d, props = __rest(_a, ["actionElement", "label", "icon", "variant", "disabled", "isNotified", "isSelected"]);
     var textColor = isSelected
         ? variant === 'dark'
@@ -1521,12 +1521,12 @@ var ContextualButton = function (_a) {
             : 'text-primary-white'
         : textColorConfig[variant];
     var stateColor = stateColorConfig[isSelected ? 'selected' : 'default'];
-    return (React.createElement("button", __assign({ className: "bianic-contextual-button box-border flex flex-row items-center rounded-radius-sm border border-transparent p-[1px] outline-none ".concat(stateColor, " ").concat(textColor) }, props, { disabled: disabled }),
+    return (React.createElement("button", __assign({ ref: ref, className: "bianic-contextual-button box-border flex flex-row items-center rounded-radius-sm border border-transparent p-[1px] outline-none ".concat(stateColor, " ").concat(textColor) }, props, { disabled: disabled }),
         icon,
         label && (React.createElement("div", { className: "label flex max-h-[46px] items-center px-[5px] text-[12px] leading-none" },
             React.createElement("span", { className: "mr-0.5" }, label),
             actionElement))));
-};
+});
 
 function Color() {
     var colors = [
@@ -1758,7 +1758,7 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
             break;
         case 'top-right':
             style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 10, "px");
-            style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
+            style.left = "".concat(anchorRect.right - popupWidth + window.scrollX, "px");
             break;
         case 'bottom-left':
             style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
@@ -1766,7 +1766,7 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
             break;
         case 'bottom-right':
             style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
-            style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
+            style.left = "".concat(anchorRect.right - popupWidth + window.scrollX, "px");
             break;
     }
     return style;
@@ -1777,11 +1777,21 @@ var getDropdownStyle = function (anchorRef, popupRef) {
     }
     var anchorRect = anchorRef.current.getBoundingClientRect();
     var popupHeight = popupRef.current.offsetHeight;
+    var popupWidth = popupRef.current.offsetWidth;
     var spaceToBottom = window.innerHeight - anchorRect.bottom;
     var spaceToTop = anchorRect.top;
+    var spaceToRight = window.innerWidth - anchorRect.right;
+    var spaceToLeft = anchorRect.left;
+    // Default align left with the anchor
+    var left = anchorRect.left + window.scrollX;
+    // If there's less space to the right than to the left,
+    // align the popup's right edge with the anchor's right edge
+    if (spaceToRight < spaceToLeft) {
+        left = anchorRect.right - popupWidth + window.scrollX;
+    }
     var style = {
         position: 'absolute',
-        left: "".concat(anchorRect.left + window.scrollX, "px"),
+        left: "".concat(left, "px"),
     };
     // If space below is less than popup height,
     // AND space above is more than space below
@@ -2070,8 +2080,8 @@ var styleConfig = {
     },
 };
 
-function TextInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? null : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? undefined : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o; _a.isFlatRight; var actionElement = _a.actionElement, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'off' : _q, ref = _a.ref, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete", "ref"]);
+var TextInput = React.forwardRef(function (_a, ref) {
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? null : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? undefined : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o; _a.isFlatRight; var actionElement = _a.actionElement, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'off' : _q, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete"]);
     var isTransparent = variant.includes('transparent');
     var _r = React.useState(false), isShow = _r[0], setIsShow = _r[1];
     var _s = styleConfig[variant], fieldStyle = _s.fieldStyle, iconStyle = _s.iconStyle;
@@ -2121,7 +2131,7 @@ function TextInput(_a) {
                 remainWords,
                 "/",
                 maxLength))))));
-}
+});
 TextInput.defaultProps = {
     descText: '',
     disabled: false,
@@ -3137,10 +3147,11 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
 };
 
 var PickerCalendar = function (_a) {
-    var anchorRef = _a.anchorRef, maxDate = _a.maxDate, minDate = _a.minDate, onDateChange = _a.onDateChange; _a.ref; var _b = _a.selectedDate, selectedDate = _b === void 0 ? null : _b, props = __rest(_a, ["anchorRef", "maxDate", "minDate", "onDateChange", "ref", "selectedDate"]);
+    var _b = _a.zIndex, zIndex = _b === void 0 ? 100 : _b, anchorRef = _a.anchorRef, maxDate = _a.maxDate, minDate = _a.minDate, onDateChange = _a.onDateChange; _a.ref; var _c = _a.selectedDate, selectedDate = _c === void 0 ? null : _c, props = __rest(_a, ["zIndex", "anchorRef", "maxDate", "minDate", "onDateChange", "ref", "selectedDate"]);
     // Hooks & States
-    var _c = useCalendarLogic(selectedDate, minDate, maxDate), displayDays = _c.displayDays, handleNextDecade = _c.handleNextDecade, handleNextMonth = _c.handleNextMonth, handleNextYear = _c.handleNextYear, handlePickerMode = _c.handlePickerMode, handlePrevDecade = _c.handlePrevDecade, handlePrevMonth = _c.handlePrevMonth, handlePrevYear = _c.handlePrevYear, handleSetSelectedDate = _c.handleSetSelectedDate, isNextDisabled = _c.isNextDisabled, isPrevDisabled = _c.isPrevDisabled, maxDateValue = _c.maxDateValue, minDateValue = _c.minDateValue, pickerMode = _c.pickerMode, setViewMonthValue = _c.setViewMonthValue, setViewYearValue = _c.setViewYearValue, viewMonthValue = _c.viewMonthValue, viewYearValue = _c.viewYearValue, yearDisplayRange = _c.yearDisplayRange;
+    var _d = useCalendarLogic(selectedDate, minDate, maxDate), displayDays = _d.displayDays, handleNextDecade = _d.handleNextDecade, handleNextMonth = _d.handleNextMonth, handleNextYear = _d.handleNextYear, handlePickerMode = _d.handlePickerMode, handlePrevDecade = _d.handlePrevDecade, handlePrevMonth = _d.handlePrevMonth, handlePrevYear = _d.handlePrevYear, handleSetSelectedDate = _d.handleSetSelectedDate, isNextDisabled = _d.isNextDisabled, isPrevDisabled = _d.isPrevDisabled, maxDateValue = _d.maxDateValue, minDateValue = _d.minDateValue, pickerMode = _d.pickerMode, setViewMonthValue = _d.setViewMonthValue, setViewYearValue = _d.setViewYearValue, viewMonthValue = _d.viewMonthValue, viewYearValue = _d.viewYearValue, yearDisplayRange = _d.yearDisplayRange;
     var pickerCalendarRef = React.useRef(null);
+    var style = props.style, className = props.className, restProps = __rest(props, ["style", "className"]);
     var positionStyle = usePopupPosition(anchorRef, pickerCalendarRef)[0];
     // Event Handlers
     var handleDateSelect = function (date) {
@@ -3154,7 +3165,7 @@ var PickerCalendar = function (_a) {
         setViewYearValue(year);
         handlePickerMode('month');
     };
-    return (React.createElement("div", __assign({ className: "bianic-datepicker-calendar absolute flex w-[250px] flex-col gap-[15px] rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] text-bia-black shadow-md", ref: pickerCalendarRef, style: positionStyle }, props),
+    return reactDom.createPortal(React.createElement("div", __assign({ className: "bianic-datepicker-calendar absolute flex w-[250px] flex-col gap-[15px] rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] text-bia-black shadow-md ".concat(className), ref: pickerCalendarRef, style: __assign(__assign({ zIndex: zIndex }, positionStyle), style) }, restProps),
         React.createElement("div", { className: "bianic-datepicker-calendar-controller flex w-full items-center justify-between" },
             React.createElement("button", { className: "bianic-datepicker-calendar-prev-button text-bia-coolgrey disabled:text-bia-coolgrey-light-50", disabled: isPrevDisabled(), onClick: pickerMode === 'date'
                     ? handlePrevMonth
@@ -3185,7 +3196,7 @@ var PickerCalendar = function (_a) {
                 React.createElement(TbChevronRight, { size: 18 }))),
         pickerMode === 'date' && (React.createElement(DateDisplay, { displayDays: displayDays, maxDateValue: maxDateValue, minDateValue: minDateValue, onDateSelect: handleDateSelect, selectedDate: selectedDate, viewMonthValue: viewMonthValue })),
         pickerMode === 'month' && (React.createElement(MonthDisplay, { maxDateValue: maxDateValue, minDateValue: minDateValue, onMonthSelect: handleMonthSelect, selectedDate: selectedDate, viewMonthValue: viewMonthValue, viewYearValue: viewYearValue })),
-        pickerMode === 'year' && (React.createElement(YearDisplay, { maxDateValue: maxDateValue, minDateValue: minDateValue, onYearSelect: handleYearSelect, viewYearValue: viewYearValue, yearDisplayRange: yearDisplayRange }))));
+        pickerMode === 'year' && (React.createElement(YearDisplay, { maxDateValue: maxDateValue, minDateValue: minDateValue, onYearSelect: handleYearSelect, viewYearValue: viewYearValue, yearDisplayRange: yearDisplayRange }))), document.body);
 };
 
 var monthMap = [
@@ -3202,7 +3213,7 @@ var monthMap = [
     'November',
     'December',
 ];
-var DateInputDisplay = function (_a) {
+var DateInputDisplay = React.forwardRef(function (_a, ref) {
     var value = _a.value, setValue = _a.setValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'YYYY-MM-DD' : _b, label = _a.label, required = _a.required, id = _a.id, _c = _a.size, size = _c === void 0 ? 'sm' : _c, className = _a.className, _d = _a.disabled, disabled = _d === void 0 ? false : _d, buttonAction = _a.buttonAction, nullDisplay = _a.nullDisplay, props = __rest(_a, ["value", "setValue", "placeholder", "label", "required", "id", "size", "className", "disabled", "buttonAction", "nullDisplay"]);
     var _e = React.useState(false), isEditing = _e[0], setIsEditing = _e[1];
     var _f = React.useState(value), dateString = _f[0], setDateString = _f[1];
@@ -3251,8 +3262,8 @@ var DateInputDisplay = function (_a) {
         label && (React.createElement("label", { htmlFor: id, className: "bianic-text-input-label text-xs font-semibold ".concat(labelStatus) },
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*"))),
-        React.createElement("div", { className: "relative w-full" }, input)));
-};
+        React.createElement("div", { className: "relative w-full", ref: ref }, input)));
+});
 var dateToInputString = function (dateObj) {
     if (!(dateObj instanceof Date) || isNaN(dateObj))
         return ''; // Return empty string for invalid dates
@@ -3267,15 +3278,15 @@ var displayDateFormatter = function (date) {
 };
 
 function DatePicker(_a) {
-    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;
+    var _b = _a.zIndexCalendar, zIndexCalendar = _b === void 0 ? 100 : _b, 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 _c = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
+    var _d = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
     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: 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(PickerCalendar, { anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
+        isPickerOpen && (React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
 }
 
 var Node = function (_a) {
@@ -3519,7 +3530,7 @@ function Modal(_a) {
 
 var sizeConfig$2 = {
     md: 'min-w-[38px] h-[40px] text-[14px] font-semibold',
-    sm: 'min-w-[29px] h-[30px] mt-1 text-[12px] font-normal',
+    sm: 'min-w-[29px] h-[30px] text-[12px] font-normal',
 };
 var positionConfig = {
     start: 'justify-start',
@@ -3657,7 +3668,7 @@ function Popover(_a) {
     var wrapperRef = React.useRef(null);
     React.useRef(null);
     var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
-    return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit bg-bia-blue", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
+    return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
         isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction }))));
 }

package/dist/cjs/types/components/Button/ContextualButton/ContextualButton.d.ts

@@ -7,5 +7,5 @@ interface ContextualButtonProps extends ComponentPropsWithoutRef<'button'> {
     isNotified?: boolean;
     isSelected?: boolean;
 }
-declare const ContextualButton: ({ actionElement, label, icon, variant, disabled, isNotified, isSelected, ...props }: ContextualButtonProps) => React.JSX.Element;
+declare const ContextualButton: React.ForwardRefExoticComponent<ContextualButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default ContextualButton;

package/dist/cjs/types/components/Forms/DatePicker/DateInputDisplay.d.ts

@@ -12,5 +12,5 @@ interface DateInputDisplayProps extends Omit<TextInputProps, 'value'> {
     disabled: boolean;
     nullDisplay?: string;
 }
-declare const DateInputDisplay: ({ value, setValue, placeholder, label, required, id, size, className, disabled, buttonAction, nullDisplay, ...props }: DateInputDisplayProps) => React.JSX.Element;
+declare const DateInputDisplay: React.ForwardRefExoticComponent<Omit<DateInputDisplayProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default DateInputDisplay;

package/dist/cjs/types/components/Forms/DatePicker/DatePicker.d.ts

@@ -13,6 +13,7 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChan
     nullDisplay?: string;
     inputclassName?: string;
     containerClassName?: string;
+    zIndexCalendar?: number;
 }
-declare function DatePicker({ value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ zIndexCalendar, value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React.JSX.Element;
 export default DatePicker;

package/dist/cjs/types/components/Forms/DatePicker/PickerCalendar/types/types.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
 export interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
+    zIndex?: number | 'auto' | 'inherit';
     anchorRef: React.RefObject<HTMLDivElement>;
     minDate?: string;
     maxDate?: string;

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

@@ -1,23 +1,5 @@
 import React from 'react';
 import TextInputProps from './PropsInterface';
 import './style.css';
-declare function TextInput({ descText, disabled, icon, id, size, isValid, label, placeholder, readOnly, required, variant, value, onChange, maxLength, inputClassName, isFlatRight, actionElement, autoComplete, ref, ...props }: TextInputProps): React.JSX.Element;
-declare namespace TextInput {
-    var defaultProps: {
-        descText: string;
-        disabled: boolean;
-        icon: null;
-        id: string;
-        size: string;
-        isValid: null;
-        label: string;
-        placeholder: string;
-        readOnly: boolean;
-        variant: string;
-        value: undefined;
-        onChange: () => void;
-        inputClassName: string;
-        isFlatRight: boolean;
-    };
-}
+declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default TextInput;

package/dist/cjs/types/stories/Form/TextInput/TextInput.stories.d.ts

@@ -1,8 +1,8 @@
 import type { StoryObj } from '@storybook/react';
-import { TextInput } from '../../../components';
+import React from 'react';
 declare const meta: {
     title: string;
-    component: typeof TextInput;
+    component: React.ForwardRefExoticComponent<Omit<import("../../../components/Forms/TextInput/PropsInterface").default, "ref"> & React.RefAttributes<HTMLInputElement>>;
     parameters: {
         layout: string;
     };

package/dist/esm/index.js

@@ -1511,7 +1511,7 @@ var stateColorConfig = {
     default: 'enabled:hover:bg-black/10 enabled:focus-visible:border-bia-blue-disabled enabled:focus-visible:outline-2 enabled:focus-visible:-outline-offset-1 enabled:focus-visible:outline-bia-blue-disabled enabled:active:bg-black/15',
 };
 
-var ContextualButton = function (_a) {
+var ContextualButton = forwardRef(function (_a, ref) {
     var actionElement = _a.actionElement, label = _a.label, icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? 'dark' : _b, disabled = _a.disabled; _a.isNotified; var _d = _a.isSelected, isSelected = _d === void 0 ? false : _d, props = __rest(_a, ["actionElement", "label", "icon", "variant", "disabled", "isNotified", "isSelected"]);
     var textColor = isSelected
         ? variant === 'dark'
@@ -1519,12 +1519,12 @@ var ContextualButton = function (_a) {
             : 'text-primary-white'
         : textColorConfig[variant];
     var stateColor = stateColorConfig[isSelected ? 'selected' : 'default'];
-    return (React.createElement("button", __assign({ className: "bianic-contextual-button box-border flex flex-row items-center rounded-radius-sm border border-transparent p-[1px] outline-none ".concat(stateColor, " ").concat(textColor) }, props, { disabled: disabled }),
+    return (React.createElement("button", __assign({ ref: ref, className: "bianic-contextual-button box-border flex flex-row items-center rounded-radius-sm border border-transparent p-[1px] outline-none ".concat(stateColor, " ").concat(textColor) }, props, { disabled: disabled }),
         icon,
         label && (React.createElement("div", { className: "label flex max-h-[46px] items-center px-[5px] text-[12px] leading-none" },
             React.createElement("span", { className: "mr-0.5" }, label),
             actionElement))));
-};
+});
 
 function Color() {
     var colors = [
@@ -1756,7 +1756,7 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
             break;
         case 'top-right':
             style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 10, "px");
-            style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
+            style.left = "".concat(anchorRect.right - popupWidth + window.scrollX, "px");
             break;
         case 'bottom-left':
             style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
@@ -1764,7 +1764,7 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
             break;
         case 'bottom-right':
             style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
-            style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
+            style.left = "".concat(anchorRect.right - popupWidth + window.scrollX, "px");
             break;
     }
     return style;
@@ -1775,11 +1775,21 @@ var getDropdownStyle = function (anchorRef, popupRef) {
     }
     var anchorRect = anchorRef.current.getBoundingClientRect();
     var popupHeight = popupRef.current.offsetHeight;
+    var popupWidth = popupRef.current.offsetWidth;
     var spaceToBottom = window.innerHeight - anchorRect.bottom;
     var spaceToTop = anchorRect.top;
+    var spaceToRight = window.innerWidth - anchorRect.right;
+    var spaceToLeft = anchorRect.left;
+    // Default align left with the anchor
+    var left = anchorRect.left + window.scrollX;
+    // If there's less space to the right than to the left,
+    // align the popup's right edge with the anchor's right edge
+    if (spaceToRight < spaceToLeft) {
+        left = anchorRect.right - popupWidth + window.scrollX;
+    }
     var style = {
         position: 'absolute',
-        left: "".concat(anchorRect.left + window.scrollX, "px"),
+        left: "".concat(left, "px"),
     };
     // If space below is less than popup height,
     // AND space above is more than space below
@@ -2068,8 +2078,8 @@ var styleConfig = {
     },
 };
 
-function TextInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? null : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? undefined : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o; _a.isFlatRight; var actionElement = _a.actionElement, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'off' : _q, ref = _a.ref, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete", "ref"]);
+var TextInput = forwardRef(function (_a, ref) {
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? null : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? undefined : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o; _a.isFlatRight; var actionElement = _a.actionElement, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'off' : _q, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete"]);
     var isTransparent = variant.includes('transparent');
     var _r = useState(false), isShow = _r[0], setIsShow = _r[1];
     var _s = styleConfig[variant], fieldStyle = _s.fieldStyle, iconStyle = _s.iconStyle;
@@ -2119,7 +2129,7 @@ function TextInput(_a) {
                 remainWords,
                 "/",
                 maxLength))))));
-}
+});
 TextInput.defaultProps = {
     descText: '',
     disabled: false,
@@ -3135,10 +3145,11 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
 };
 
 var PickerCalendar = function (_a) {
-    var anchorRef = _a.anchorRef, maxDate = _a.maxDate, minDate = _a.minDate, onDateChange = _a.onDateChange; _a.ref; var _b = _a.selectedDate, selectedDate = _b === void 0 ? null : _b, props = __rest(_a, ["anchorRef", "maxDate", "minDate", "onDateChange", "ref", "selectedDate"]);
+    var _b = _a.zIndex, zIndex = _b === void 0 ? 100 : _b, anchorRef = _a.anchorRef, maxDate = _a.maxDate, minDate = _a.minDate, onDateChange = _a.onDateChange; _a.ref; var _c = _a.selectedDate, selectedDate = _c === void 0 ? null : _c, props = __rest(_a, ["zIndex", "anchorRef", "maxDate", "minDate", "onDateChange", "ref", "selectedDate"]);
     // Hooks & States
-    var _c = useCalendarLogic(selectedDate, minDate, maxDate), displayDays = _c.displayDays, handleNextDecade = _c.handleNextDecade, handleNextMonth = _c.handleNextMonth, handleNextYear = _c.handleNextYear, handlePickerMode = _c.handlePickerMode, handlePrevDecade = _c.handlePrevDecade, handlePrevMonth = _c.handlePrevMonth, handlePrevYear = _c.handlePrevYear, handleSetSelectedDate = _c.handleSetSelectedDate, isNextDisabled = _c.isNextDisabled, isPrevDisabled = _c.isPrevDisabled, maxDateValue = _c.maxDateValue, minDateValue = _c.minDateValue, pickerMode = _c.pickerMode, setViewMonthValue = _c.setViewMonthValue, setViewYearValue = _c.setViewYearValue, viewMonthValue = _c.viewMonthValue, viewYearValue = _c.viewYearValue, yearDisplayRange = _c.yearDisplayRange;
+    var _d = useCalendarLogic(selectedDate, minDate, maxDate), displayDays = _d.displayDays, handleNextDecade = _d.handleNextDecade, handleNextMonth = _d.handleNextMonth, handleNextYear = _d.handleNextYear, handlePickerMode = _d.handlePickerMode, handlePrevDecade = _d.handlePrevDecade, handlePrevMonth = _d.handlePrevMonth, handlePrevYear = _d.handlePrevYear, handleSetSelectedDate = _d.handleSetSelectedDate, isNextDisabled = _d.isNextDisabled, isPrevDisabled = _d.isPrevDisabled, maxDateValue = _d.maxDateValue, minDateValue = _d.minDateValue, pickerMode = _d.pickerMode, setViewMonthValue = _d.setViewMonthValue, setViewYearValue = _d.setViewYearValue, viewMonthValue = _d.viewMonthValue, viewYearValue = _d.viewYearValue, yearDisplayRange = _d.yearDisplayRange;
     var pickerCalendarRef = useRef(null);
+    var style = props.style, className = props.className, restProps = __rest(props, ["style", "className"]);
     var positionStyle = usePopupPosition(anchorRef, pickerCalendarRef)[0];
     // Event Handlers
     var handleDateSelect = function (date) {
@@ -3152,7 +3163,7 @@ var PickerCalendar = function (_a) {
         setViewYearValue(year);
         handlePickerMode('month');
     };
-    return (React.createElement("div", __assign({ className: "bianic-datepicker-calendar absolute flex w-[250px] flex-col gap-[15px] rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] text-bia-black shadow-md", ref: pickerCalendarRef, style: positionStyle }, props),
+    return createPortal(React.createElement("div", __assign({ className: "bianic-datepicker-calendar absolute flex w-[250px] flex-col gap-[15px] rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] text-bia-black shadow-md ".concat(className), ref: pickerCalendarRef, style: __assign(__assign({ zIndex: zIndex }, positionStyle), style) }, restProps),
         React.createElement("div", { className: "bianic-datepicker-calendar-controller flex w-full items-center justify-between" },
             React.createElement("button", { className: "bianic-datepicker-calendar-prev-button text-bia-coolgrey disabled:text-bia-coolgrey-light-50", disabled: isPrevDisabled(), onClick: pickerMode === 'date'
                     ? handlePrevMonth
@@ -3183,7 +3194,7 @@ var PickerCalendar = function (_a) {
                 React.createElement(TbChevronRight, { size: 18 }))),
         pickerMode === 'date' && (React.createElement(DateDisplay, { displayDays: displayDays, maxDateValue: maxDateValue, minDateValue: minDateValue, onDateSelect: handleDateSelect, selectedDate: selectedDate, viewMonthValue: viewMonthValue })),
         pickerMode === 'month' && (React.createElement(MonthDisplay, { maxDateValue: maxDateValue, minDateValue: minDateValue, onMonthSelect: handleMonthSelect, selectedDate: selectedDate, viewMonthValue: viewMonthValue, viewYearValue: viewYearValue })),
-        pickerMode === 'year' && (React.createElement(YearDisplay, { maxDateValue: maxDateValue, minDateValue: minDateValue, onYearSelect: handleYearSelect, viewYearValue: viewYearValue, yearDisplayRange: yearDisplayRange }))));
+        pickerMode === 'year' && (React.createElement(YearDisplay, { maxDateValue: maxDateValue, minDateValue: minDateValue, onYearSelect: handleYearSelect, viewYearValue: viewYearValue, yearDisplayRange: yearDisplayRange }))), document.body);
 };
 
 var monthMap = [
@@ -3200,7 +3211,7 @@ var monthMap = [
     'November',
     'December',
 ];
-var DateInputDisplay = function (_a) {
+var DateInputDisplay = forwardRef(function (_a, ref) {
     var value = _a.value, setValue = _a.setValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'YYYY-MM-DD' : _b, label = _a.label, required = _a.required, id = _a.id, _c = _a.size, size = _c === void 0 ? 'sm' : _c, className = _a.className, _d = _a.disabled, disabled = _d === void 0 ? false : _d, buttonAction = _a.buttonAction, nullDisplay = _a.nullDisplay, props = __rest(_a, ["value", "setValue", "placeholder", "label", "required", "id", "size", "className", "disabled", "buttonAction", "nullDisplay"]);
     var _e = useState(false), isEditing = _e[0], setIsEditing = _e[1];
     var _f = useState(value), dateString = _f[0], setDateString = _f[1];
@@ -3249,8 +3260,8 @@ var DateInputDisplay = function (_a) {
         label && (React.createElement("label", { htmlFor: id, className: "bianic-text-input-label text-xs font-semibold ".concat(labelStatus) },
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*"))),
-        React.createElement("div", { className: "relative w-full" }, input)));
-};
+        React.createElement("div", { className: "relative w-full", ref: ref }, input)));
+});
 var dateToInputString = function (dateObj) {
     if (!(dateObj instanceof Date) || isNaN(dateObj))
         return ''; // Return empty string for invalid dates
@@ -3265,15 +3276,15 @@ var displayDateFormatter = function (date) {
 };
 
 function DatePicker(_a) {
-    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;
+    var _b = _a.zIndexCalendar, zIndexCalendar = _b === void 0 ? 100 : _b, 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 = useRef(null);
     var wrapperRef = useRef(null);
-    var _c = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
+    var _d = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
     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: 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(PickerCalendar, { anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
+        isPickerOpen && (React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
 }
 
 var Node = function (_a) {
@@ -3517,7 +3528,7 @@ function Modal(_a) {
 
 var sizeConfig$2 = {
     md: 'min-w-[38px] h-[40px] text-[14px] font-semibold',
-    sm: 'min-w-[29px] h-[30px] mt-1 text-[12px] font-normal',
+    sm: 'min-w-[29px] h-[30px] text-[12px] font-normal',
 };
 var positionConfig = {
     start: 'justify-start',
@@ -3655,7 +3666,7 @@ function Popover(_a) {
     var wrapperRef = useRef(null);
     useRef(null);
     var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
-    return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit bg-bia-blue", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
+    return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
         isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction }))));
 }

package/dist/esm/types/components/Button/ContextualButton/ContextualButton.d.ts

@@ -7,5 +7,5 @@ interface ContextualButtonProps extends ComponentPropsWithoutRef<'button'> {
     isNotified?: boolean;
     isSelected?: boolean;
 }
-declare const ContextualButton: ({ actionElement, label, icon, variant, disabled, isNotified, isSelected, ...props }: ContextualButtonProps) => React.JSX.Element;
+declare const ContextualButton: React.ForwardRefExoticComponent<ContextualButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default ContextualButton;

package/dist/esm/types/components/Forms/DatePicker/DateInputDisplay.d.ts

@@ -12,5 +12,5 @@ interface DateInputDisplayProps extends Omit<TextInputProps, 'value'> {
     disabled: boolean;
     nullDisplay?: string;
 }
-declare const DateInputDisplay: ({ value, setValue, placeholder, label, required, id, size, className, disabled, buttonAction, nullDisplay, ...props }: DateInputDisplayProps) => React.JSX.Element;
+declare const DateInputDisplay: React.ForwardRefExoticComponent<Omit<DateInputDisplayProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default DateInputDisplay;

package/dist/esm/types/components/Forms/DatePicker/DatePicker.d.ts

@@ -13,6 +13,7 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChan
     nullDisplay?: string;
     inputclassName?: string;
     containerClassName?: string;
+    zIndexCalendar?: number;
 }
-declare function DatePicker({ value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ zIndexCalendar, value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React.JSX.Element;
 export default DatePicker;

package/dist/esm/types/components/Forms/DatePicker/PickerCalendar/types/types.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
 export interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
+    zIndex?: number | 'auto' | 'inherit';
     anchorRef: React.RefObject<HTMLDivElement>;
     minDate?: string;
     maxDate?: string;

package/dist/esm/types/components/Forms/TextInput/index.d.ts

@@ -1,23 +1,5 @@
 import React from 'react';
 import TextInputProps from './PropsInterface';
 import './style.css';
-declare function TextInput({ descText, disabled, icon, id, size, isValid, label, placeholder, readOnly, required, variant, value, onChange, maxLength, inputClassName, isFlatRight, actionElement, autoComplete, ref, ...props }: TextInputProps): React.JSX.Element;
-declare namespace TextInput {
-    var defaultProps: {
-        descText: string;
-        disabled: boolean;
-        icon: null;
-        id: string;
-        size: string;
-        isValid: null;
-        label: string;
-        placeholder: string;
-        readOnly: boolean;
-        variant: string;
-        value: undefined;
-        onChange: () => void;
-        inputClassName: string;
-        isFlatRight: boolean;
-    };
-}
+declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default TextInput;

package/dist/esm/types/stories/Form/TextInput/TextInput.stories.d.ts

@@ -1,8 +1,8 @@
 import type { StoryObj } from '@storybook/react';
-import { TextInput } from '../../../components';
+import React from 'react';
 declare const meta: {
     title: string;
-    component: typeof TextInput;
+    component: React.ForwardRefExoticComponent<Omit<import("../../../components/Forms/TextInput/PropsInterface").default, "ref"> & React.RefAttributes<HTMLInputElement>>;
     parameters: {
         layout: string;
     };

package/dist/index.d.ts

@@ -119,7 +119,7 @@ interface ContextualButtonProps extends ComponentPropsWithoutRef<'button'> {
     isNotified?: boolean;
     isSelected?: boolean;
 }
-declare const ContextualButton: ({ actionElement, label, icon, variant, disabled, isNotified, isSelected, ...props }: ContextualButtonProps) => React$1.JSX.Element;
+declare const ContextualButton: React$1.ForwardRefExoticComponent<ContextualButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare function Color(): React$1.JSX.Element;
 
@@ -209,25 +209,7 @@ interface TextInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
     actionElement?: React.ReactNode;
 }
 
-declare function TextInput({ descText, disabled, icon, id, size, isValid, label, placeholder, readOnly, required, variant, value, onChange, maxLength, inputClassName, isFlatRight, actionElement, autoComplete, ref, ...props }: TextInputProps): React$1.JSX.Element;
-declare namespace TextInput {
-    var defaultProps: {
-        descText: string;
-        disabled: boolean;
-        icon: null;
-        id: string;
-        size: string;
-        isValid: null;
-        label: string;
-        placeholder: string;
-        readOnly: boolean;
-        variant: string;
-        value: undefined;
-        onChange: () => void;
-        inputClassName: string;
-        isFlatRight: boolean;
-    };
-}
+declare const TextInput: React$1.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     label?: string;
@@ -473,10 +455,12 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChan
     nullDisplay?: string;
     inputclassName?: string;
     containerClassName?: string;
+    zIndexCalendar?: number;
 }
-declare function DatePicker({ value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React$1.JSX.Element;
+declare function DatePicker({ zIndexCalendar, value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React$1.JSX.Element;
 
 interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
+    zIndex?: number | 'auto' | 'inherit';
     anchorRef: React.RefObject<HTMLDivElement>;
     minDate?: string;
     maxDate?: string;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "1.16.0-beta.4",
+  "version": "1.16.0-beta.7",
   "description": "Design Language System develop by BIAENERGI",
   "scripts": {
     "rollup": "rollup -c",