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

package/dist/cjs/index.js

@@ -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
@@ -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 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", 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
@@ -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/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/esm/index.js

@@ -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
@@ -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 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", 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
@@ -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/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/index.d.ts

@@ -455,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.5",
+  "version": "1.16.0-beta.7",
   "description": "Design Language System develop by BIAENERGI",
   "scripts": {
     "rollup": "rollup -c",