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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cjs/index.js +23 -12
  2. package/dist/cjs/types/components/Forms/DatePicker/DatePicker.d.ts +2 -1
  3. package/dist/cjs/types/components/Forms/DatePicker/PickerCalendar/types/types.d.ts +1 -0
  4. package/dist/esm/index.js +23 -12
  5. package/dist/esm/types/components/Forms/DatePicker/DatePicker.d.ts +2 -1
  6. package/dist/esm/types/components/Forms/DatePicker/PickerCalendar/types/types.d.ts +1 -0
  7. package/dist/index.d.ts +3 -1
  8. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -1758,7 +1758,7 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
1758
1758
  break;
1759
1759
  case 'top-right':
1760
1760
  style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 10, "px");
1761
- style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
1761
+ style.left = "".concat(anchorRect.right - popupWidth + window.scrollX, "px");
1762
1762
  break;
1763
1763
  case 'bottom-left':
1764
1764
  style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
@@ -1766,7 +1766,7 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
1766
1766
  break;
1767
1767
  case 'bottom-right':
1768
1768
  style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
1769
- style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
1769
+ style.left = "".concat(anchorRect.right - popupWidth + window.scrollX, "px");
1770
1770
  break;
1771
1771
  }
1772
1772
  return style;
@@ -1777,11 +1777,21 @@ var getDropdownStyle = function (anchorRef, popupRef) {
1777
1777
  }
1778
1778
  var anchorRect = anchorRef.current.getBoundingClientRect();
1779
1779
  var popupHeight = popupRef.current.offsetHeight;
1780
+ var popupWidth = popupRef.current.offsetWidth;
1780
1781
  var spaceToBottom = window.innerHeight - anchorRect.bottom;
1781
1782
  var spaceToTop = anchorRect.top;
1783
+ var spaceToRight = window.innerWidth - anchorRect.right;
1784
+ var spaceToLeft = anchorRect.left;
1785
+ // Default align left with the anchor
1786
+ var left = anchorRect.left + window.scrollX;
1787
+ // If there's less space to the right than to the left,
1788
+ // align the popup's right edge with the anchor's right edge
1789
+ if (spaceToRight < spaceToLeft) {
1790
+ left = anchorRect.right - popupWidth + window.scrollX;
1791
+ }
1782
1792
  var style = {
1783
1793
  position: 'absolute',
1784
- left: "".concat(anchorRect.left + window.scrollX, "px"),
1794
+ left: "".concat(left, "px"),
1785
1795
  };
1786
1796
  // If space below is less than popup height,
1787
1797
  // AND space above is more than space below
@@ -2670,7 +2680,7 @@ var useLiveSearch = function (_a) {
2670
2680
  if (!isOpen && searchTerm !== '') {
2671
2681
  setSearchTerm(getItemLabel(value));
2672
2682
  }
2673
- }, [isOpen]);
2683
+ }, [isOpen, value]);
2674
2684
  var handleInputChange = function (e) {
2675
2685
  var newSearchTerm = e.target.value;
2676
2686
  setSearchTerm(newSearchTerm);
@@ -3137,10 +3147,11 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
3137
3147
  };
3138
3148
 
3139
3149
  var PickerCalendar = function (_a) {
3140
- 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"]);
3150
+ 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"]);
3141
3151
  // Hooks & States
3142
- 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;
3152
+ 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;
3143
3153
  var pickerCalendarRef = React.useRef(null);
3154
+ var style = props.style, className = props.className, restProps = __rest(props, ["style", "className"]);
3144
3155
  var positionStyle = usePopupPosition(anchorRef, pickerCalendarRef)[0];
3145
3156
  // Event Handlers
3146
3157
  var handleDateSelect = function (date) {
@@ -3154,7 +3165,7 @@ var PickerCalendar = function (_a) {
3154
3165
  setViewYearValue(year);
3155
3166
  handlePickerMode('month');
3156
3167
  };
3157
- 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),
3168
+ 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),
3158
3169
  React.createElement("div", { className: "bianic-datepicker-calendar-controller flex w-full items-center justify-between" },
3159
3170
  React.createElement("button", { className: "bianic-datepicker-calendar-prev-button text-bia-coolgrey disabled:text-bia-coolgrey-light-50", disabled: isPrevDisabled(), onClick: pickerMode === 'date'
3160
3171
  ? handlePrevMonth
@@ -3267,15 +3278,15 @@ var displayDateFormatter = function (date) {
3267
3278
  };
3268
3279
 
3269
3280
  function DatePicker(_a) {
3270
- 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;
3281
+ 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;
3271
3282
  // State and Ref
3272
3283
  var inputRef = React.useRef(null);
3273
3284
  var wrapperRef = React.useRef(null);
3274
- var _c = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
3285
+ var _d = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
3275
3286
  return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName), ref: wrapperRef },
3276
3287
  React.createElement("div", { className: "bianic-datepicker-field-container" },
3277
3288
  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 })),
3278
- isPickerOpen && (React.createElement(PickerCalendar, { anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
3289
+ isPickerOpen && (React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
3279
3290
  }
3280
3291
 
3281
3292
  var Node = function (_a) {
@@ -3519,7 +3530,7 @@ function Modal(_a) {
3519
3530
 
3520
3531
  var sizeConfig$2 = {
3521
3532
  md: 'min-w-[38px] h-[40px] text-[14px] font-semibold',
3522
- sm: 'min-w-[29px] h-[30px] mt-1 text-[12px] font-normal',
3533
+ sm: 'min-w-[29px] h-[30px] text-[12px] font-normal',
3523
3534
  };
3524
3535
  var positionConfig = {
3525
3536
  start: 'justify-start',
@@ -3657,7 +3668,7 @@ function Popover(_a) {
3657
3668
  var wrapperRef = React.useRef(null);
3658
3669
  React.useRef(null);
3659
3670
  var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
3660
- 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); } },
3671
+ return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
3661
3672
  children,
3662
3673
  isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction }))));
3663
3674
  }
package/dist/cjs/types/components/Forms/DatePicker/DatePicker.d.ts CHANGED
@@ -13,6 +13,7 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChan
13
13
  nullDisplay?: string;
14
14
  inputclassName?: string;
15
15
  containerClassName?: string;
16
+ zIndexCalendar?: number;
16
17
  }
17
- declare function DatePicker({ value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React.JSX.Element;
18
+ declare function DatePicker({ zIndexCalendar, value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React.JSX.Element;
18
19
  export default DatePicker;
package/dist/cjs/types/components/Forms/DatePicker/PickerCalendar/types/types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ComponentPropsWithRef } from 'react';
2
2
  export interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
3
+ zIndex?: number | 'auto' | 'inherit';
3
4
  anchorRef: React.RefObject<HTMLDivElement>;
4
5
  minDate?: string;
5
6
  maxDate?: string;
package/dist/esm/index.js CHANGED
@@ -1756,7 +1756,7 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
1756
1756
  break;
1757
1757
  case 'top-right':
1758
1758
  style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 10, "px");
1759
- style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
1759
+ style.left = "".concat(anchorRect.right - popupWidth + window.scrollX, "px");
1760
1760
  break;
1761
1761
  case 'bottom-left':
1762
1762
  style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
@@ -1764,7 +1764,7 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
1764
1764
  break;
1765
1765
  case 'bottom-right':
1766
1766
  style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
1767
- style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
1767
+ style.left = "".concat(anchorRect.right - popupWidth + window.scrollX, "px");
1768
1768
  break;
1769
1769
  }
1770
1770
  return style;
@@ -1775,11 +1775,21 @@ var getDropdownStyle = function (anchorRef, popupRef) {
1775
1775
  }
1776
1776
  var anchorRect = anchorRef.current.getBoundingClientRect();
1777
1777
  var popupHeight = popupRef.current.offsetHeight;
1778
+ var popupWidth = popupRef.current.offsetWidth;
1778
1779
  var spaceToBottom = window.innerHeight - anchorRect.bottom;
1779
1780
  var spaceToTop = anchorRect.top;
1781
+ var spaceToRight = window.innerWidth - anchorRect.right;
1782
+ var spaceToLeft = anchorRect.left;
1783
+ // Default align left with the anchor
1784
+ var left = anchorRect.left + window.scrollX;
1785
+ // If there's less space to the right than to the left,
1786
+ // align the popup's right edge with the anchor's right edge
1787
+ if (spaceToRight < spaceToLeft) {
1788
+ left = anchorRect.right - popupWidth + window.scrollX;
1789
+ }
1780
1790
  var style = {
1781
1791
  position: 'absolute',
1782
- left: "".concat(anchorRect.left + window.scrollX, "px"),
1792
+ left: "".concat(left, "px"),
1783
1793
  };
1784
1794
  // If space below is less than popup height,
1785
1795
  // AND space above is more than space below
@@ -2668,7 +2678,7 @@ var useLiveSearch = function (_a) {
2668
2678
  if (!isOpen && searchTerm !== '') {
2669
2679
  setSearchTerm(getItemLabel(value));
2670
2680
  }
2671
- }, [isOpen]);
2681
+ }, [isOpen, value]);
2672
2682
  var handleInputChange = function (e) {
2673
2683
  var newSearchTerm = e.target.value;
2674
2684
  setSearchTerm(newSearchTerm);
@@ -3135,10 +3145,11 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
3135
3145
  };
3136
3146
 
3137
3147
  var PickerCalendar = function (_a) {
3138
- 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"]);
3148
+ 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"]);
3139
3149
  // Hooks & States
3140
- 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;
3150
+ 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;
3141
3151
  var pickerCalendarRef = useRef(null);
3152
+ var style = props.style, className = props.className, restProps = __rest(props, ["style", "className"]);
3142
3153
  var positionStyle = usePopupPosition(anchorRef, pickerCalendarRef)[0];
3143
3154
  // Event Handlers
3144
3155
  var handleDateSelect = function (date) {
@@ -3152,7 +3163,7 @@ var PickerCalendar = function (_a) {
3152
3163
  setViewYearValue(year);
3153
3164
  handlePickerMode('month');
3154
3165
  };
3155
- 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),
3166
+ 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),
3156
3167
  React.createElement("div", { className: "bianic-datepicker-calendar-controller flex w-full items-center justify-between" },
3157
3168
  React.createElement("button", { className: "bianic-datepicker-calendar-prev-button text-bia-coolgrey disabled:text-bia-coolgrey-light-50", disabled: isPrevDisabled(), onClick: pickerMode === 'date'
3158
3169
  ? handlePrevMonth
@@ -3265,15 +3276,15 @@ var displayDateFormatter = function (date) {
3265
3276
  };
3266
3277
 
3267
3278
  function DatePicker(_a) {
3268
- 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;
3279
+ 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;
3269
3280
  // State and Ref
3270
3281
  var inputRef = useRef(null);
3271
3282
  var wrapperRef = useRef(null);
3272
- var _c = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
3283
+ var _d = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
3273
3284
  return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName), ref: wrapperRef },
3274
3285
  React.createElement("div", { className: "bianic-datepicker-field-container" },
3275
3286
  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 })),
3276
- isPickerOpen && (React.createElement(PickerCalendar, { anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
3287
+ isPickerOpen && (React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
3277
3288
  }
3278
3289
 
3279
3290
  var Node = function (_a) {
@@ -3517,7 +3528,7 @@ function Modal(_a) {
3517
3528
 
3518
3529
  var sizeConfig$2 = {
3519
3530
  md: 'min-w-[38px] h-[40px] text-[14px] font-semibold',
3520
- sm: 'min-w-[29px] h-[30px] mt-1 text-[12px] font-normal',
3531
+ sm: 'min-w-[29px] h-[30px] text-[12px] font-normal',
3521
3532
  };
3522
3533
  var positionConfig = {
3523
3534
  start: 'justify-start',
@@ -3655,7 +3666,7 @@ function Popover(_a) {
3655
3666
  var wrapperRef = useRef(null);
3656
3667
  useRef(null);
3657
3668
  var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
3658
- 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); } },
3669
+ return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
3659
3670
  children,
3660
3671
  isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction }))));
3661
3672
  }
package/dist/esm/types/components/Forms/DatePicker/DatePicker.d.ts CHANGED
@@ -13,6 +13,7 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChan
13
13
  nullDisplay?: string;
14
14
  inputclassName?: string;
15
15
  containerClassName?: string;
16
+ zIndexCalendar?: number;
16
17
  }
17
- declare function DatePicker({ value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React.JSX.Element;
18
+ declare function DatePicker({ zIndexCalendar, value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React.JSX.Element;
18
19
  export default DatePicker;
package/dist/esm/types/components/Forms/DatePicker/PickerCalendar/types/types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ComponentPropsWithRef } from 'react';
2
2
  export interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
3
+ zIndex?: number | 'auto' | 'inherit';
3
4
  anchorRef: React.RefObject<HTMLDivElement>;
4
5
  minDate?: string;
5
6
  maxDate?: string;
package/dist/index.d.ts CHANGED
@@ -455,10 +455,12 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChan
455
455
  nullDisplay?: string;
456
456
  inputclassName?: string;
457
457
  containerClassName?: string;
458
+ zIndexCalendar?: number;
458
459
  }
459
- declare function DatePicker({ value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React$1.JSX.Element;
460
+ declare function DatePicker({ zIndexCalendar, value, onChange, size, disabled, placeholder, label, minDate, maxDate, required, nullDisplay, inputclassName, containerClassName, }: DatePickerProps): React$1.JSX.Element;
460
461
 
461
462
  interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
463
+ zIndex?: number | 'auto' | 'inherit';
462
464
  anchorRef: React.RefObject<HTMLDivElement>;
463
465
  minDate?: string;
464
466
  maxDate?: string;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
5
5
  },
6
- "version": "1.16.0-beta.5",
6
+ "version": "1.16.0-beta.8",
7
7
  "description": "Design Language System develop by BIAENERGI",
8
8
  "scripts": {
9
9
  "rollup": "rollup -c",