bianic-ui 2.1.0-beta.1 → 2.1.0-beta.3

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 (6) hide show
  1. package/dist/cjs/index.js +54 -35
  2. package/dist/cjs/types/components/Forms/DatePicker/PickerCalendar/types/types.d.ts +2 -0
  3. package/dist/esm/index.js +54 -35
  4. package/dist/esm/types/components/Forms/DatePicker/PickerCalendar/types/types.d.ts +2 -0
  5. package/dist/index.d.ts +2 -0
  6. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -267,24 +267,34 @@ var validUnion = function (value, union) {
267
267
  return union.includes(value) ? value : union[0];
268
268
  };
269
269
  var useDetectOutsideClick = function (ref, initialState, ignoreRef, event) {
270
- if (event === void 0) { event = 'click'; }
270
+ if (event === void 0) { event = 'pointerdown'; }
271
271
  var _a = React.useState(initialState), isActive = _a[0], setIsActive = _a[1];
272
272
  React.useEffect(function () {
273
- var pageClickEvent = function (event) {
274
- // If the active element exists and is clicked outside of
275
- if (ignoreRef &&
276
- ignoreRef.current &&
277
- ignoreRef.current.contains(event.target)) ;
278
- else if (ref.current !== null &&
279
- !ref.current.contains(event.target)) {
280
- setIsActive(!isActive);
273
+ var pageClickEvent = function (e) {
274
+ var target = e.target;
275
+ if (!ref || !ref.current)
276
+ return;
277
+ var path = e.composedPath
278
+ ? e.composedPath()
279
+ : null;
280
+ if (ignoreRef && ignoreRef.current) {
281
+ var insideIgnore = Array.isArray(path)
282
+ ? path.includes(ignoreRef.current)
283
+ : target && ignoreRef.current.contains(target);
284
+ if (insideIgnore)
285
+ return;
281
286
  }
287
+ var inside = Array.isArray(path)
288
+ ? path.includes(ref.current)
289
+ : target && ref.current.contains(target);
290
+ if (inside)
291
+ return;
292
+ setIsActive(function (prev) { return !prev; });
282
293
  };
283
- // If the item is active (ie open) then listen for clicks
284
294
  if (isActive)
285
- window.addEventListener(event, pageClickEvent);
286
- return function () { return window.removeEventListener(event, pageClickEvent); };
287
- }, [isActive, ref]);
295
+ window.addEventListener(event, pageClickEvent, true);
296
+ return function () { return window.removeEventListener(event, pageClickEvent, true); };
297
+ }, [isActive, ref, ignoreRef, event]);
288
298
  return [isActive, setIsActive];
289
299
  };
290
300
 
@@ -2018,7 +2028,7 @@ var FormLabel = function (_a) {
2018
2028
  var labelSize = size === 'sm' ? 'text-size-sm' : 'text-size-md';
2019
2029
  var labelFontWeight = fontWeight === 'semibold' ? 'font-semibold' : 'font-normal';
2020
2030
  var labelClass = "".concat(labelpointer, " ").concat(labelSize, " ").concat(labelFontWeight);
2021
- var labelContent = (React.createElement("label", { htmlFor: htmlFor, className: "bianic-form-label group/formlabel ".concat(labelClass, " ").concat(className) },
2031
+ var labelContent = (React.createElement("label", { htmlFor: htmlFor, className: "bianic-form-label group/formlabel text-bia-black ".concat(labelClass, " ").concat(className) },
2022
2032
  children,
2023
2033
  required && (React.createElement("span", { className: "p-1 text-bia-coolgrey group-hover/form:text-bia-red group-hover/formlabel:text-bia-red" }, "*"))));
2024
2034
  if (required)
@@ -2740,7 +2750,7 @@ function LiveSearch(_a) {
2740
2750
  var _q = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _q.renderedChildren, hasFilteredResults = _q.hasFilteredResults;
2741
2751
  return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container field-group group/form flex w-full flex-col gap-y-2 " },
2742
2752
  React.createElement("div", { className: "group relative w-full" },
2743
- React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target 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) {
2753
+ React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border border-bia-grey-dark-10 bg-primary-white text-bia-black read-only:pointer-events-none read-only:border-bia-grey-light-50 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
2744
2754
  onChangeText(e);
2745
2755
  handleInputChange(e);
2746
2756
  }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
@@ -2976,17 +2986,17 @@ var MonthDisplay = function (_a) {
2976
2986
  var viewYearValue = _a.viewYearValue, selectedDate = _a.selectedDate, viewMonthValue = _a.viewMonthValue, minDateValue = _a.minDateValue, maxDateValue = _a.maxDateValue, onMonthSelect = _a.onMonthSelect;
2977
2987
  return (React.createElement("div", { className: "bianic-datepicker-calendar-month-grid grid grid-cols-3 gap-y-1.5" }, MONTH_MAP.map(function (month, index) {
2978
2988
  var isOutOfRange = !!((minDateValue &&
2979
- (minDateValue.getFullYear() < viewYearValue ||
2980
- index <
2981
- (minDateValue.getFullYear() === viewYearValue
2982
- ? minDateValue.getMonth()
2983
- : 0))) ||
2989
+ minDateValue.getFullYear() <= viewYearValue &&
2990
+ index <
2991
+ (minDateValue.getFullYear() === viewYearValue
2992
+ ? minDateValue.getMonth()
2993
+ : 0)) ||
2984
2994
  (maxDateValue &&
2985
- (maxDateValue.getFullYear() > viewYearValue ||
2986
- index >
2987
- (maxDateValue.getFullYear() === viewYearValue
2988
- ? maxDateValue.getMonth()
2989
- : 11))));
2995
+ maxDateValue.getFullYear() >= viewYearValue &&
2996
+ index >
2997
+ (maxDateValue.getFullYear() === viewYearValue
2998
+ ? maxDateValue.getMonth()
2999
+ : 11)));
2990
3000
  var isSelected = selectedDate &&
2991
3001
  viewYearValue === parseInt(selectedDate.slice(0, 4)) &&
2992
3002
  index === viewMonthValue;
@@ -3102,7 +3112,7 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
3102
3112
  var startOfDecade = Math.floor(year / 10) * 10;
3103
3113
  var endOfDecade = startOfDecade + 9;
3104
3114
  var decadeRange = [];
3105
- for (var i = startOfDecade - 1; i <= endOfDecade + 2; i++) {
3115
+ for (var i = startOfDecade - 1; i < endOfDecade + 2; i++) {
3106
3116
  decadeRange.push(i);
3107
3117
  }
3108
3118
  return decadeRange;
@@ -3120,7 +3130,7 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
3120
3130
  }
3121
3131
  else {
3122
3132
  return (yearDisplayRange.includes(minDateValue.getFullYear()) &&
3123
- viewDecadeValue <= minDateValue.getFullYear());
3133
+ yearDisplayRange[0] <= minDateValue.getFullYear());
3124
3134
  }
3125
3135
  };
3126
3136
  var isNextDisabled = function () {
@@ -3135,7 +3145,7 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
3135
3145
  }
3136
3146
  else {
3137
3147
  return (yearDisplayRange.includes(maxDateValue.getFullYear()) &&
3138
- viewDecadeValue >= maxDateValue.getFullYear());
3148
+ yearDisplayRange[12] >= maxDateValue.getFullYear());
3139
3149
  }
3140
3150
  };
3141
3151
  return {
@@ -3167,12 +3177,22 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
3167
3177
  };
3168
3178
 
3169
3179
  var PickerCalendar = function (_a) {
3170
- 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"]);
3180
+ 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, _d = _a.isOpen, isOpen = _d === void 0 ? false : _d, _e = _a.onClose, onClose = _e === void 0 ? function () { } : _e, props = __rest(_a, ["zIndex", "anchorRef", "maxDate", "minDate", "onDateChange", "ref", "selectedDate", "isOpen", "onClose"]);
3171
3181
  // Hooks & States
3172
- 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;
3182
+ var _f = useCalendarLogic(selectedDate, minDate, maxDate), displayDays = _f.displayDays, handleNextDecade = _f.handleNextDecade, handleNextMonth = _f.handleNextMonth, handleNextYear = _f.handleNextYear, handlePickerMode = _f.handlePickerMode, handlePrevDecade = _f.handlePrevDecade, handlePrevMonth = _f.handlePrevMonth, handlePrevYear = _f.handlePrevYear, handleSetSelectedDate = _f.handleSetSelectedDate, isNextDisabled = _f.isNextDisabled, isPrevDisabled = _f.isPrevDisabled, maxDateValue = _f.maxDateValue, minDateValue = _f.minDateValue, pickerMode = _f.pickerMode, setViewMonthValue = _f.setViewMonthValue, setViewYearValue = _f.setViewYearValue, viewMonthValue = _f.viewMonthValue, viewYearValue = _f.viewYearValue, yearDisplayRange = _f.yearDisplayRange;
3173
3183
  var pickerCalendarRef = React.useRef(null);
3184
+ var _g = useDetectOutsideClick(anchorRef, false, pickerCalendarRef), isPickerOpen = _g[0], setIsPickerOpen = _g[1];
3174
3185
  var style = props.style, className = props.className, restProps = __rest(props, ["style", "className"]);
3175
3186
  var positionStyle = usePopupPosition(anchorRef, pickerCalendarRef)[0];
3187
+ React.useEffect(function () {
3188
+ setIsPickerOpen(isOpen);
3189
+ }, [isOpen]);
3190
+ React.useEffect(function () {
3191
+ if (!isPickerOpen) {
3192
+ onClose();
3193
+ handlePickerMode('date');
3194
+ }
3195
+ }, [isPickerOpen]);
3176
3196
  // Event Handlers
3177
3197
  var handleDateSelect = function (date) {
3178
3198
  handleSetSelectedDate(date, onDateChange);
@@ -3185,7 +3205,7 @@ var PickerCalendar = function (_a) {
3185
3205
  setViewYearValue(year);
3186
3206
  handlePickerMode('month');
3187
3207
  };
3188
- 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),
3208
+ 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, display: isPickerOpen ? 'block' : 'none' }, positionStyle), style) }, restProps),
3189
3209
  React.createElement("div", { className: "bianic-datepicker-calendar-controller flex w-full items-center justify-between" },
3190
3210
  React.createElement("button", { className: "bianic-datepicker-calendar-prev-button text-bia-coolgrey disabled:text-bia-coolgrey-light-50", disabled: isPrevDisabled(), onClick: pickerMode === 'date'
3191
3211
  ? handlePrevMonth
@@ -3301,12 +3321,11 @@ function DatePicker(_a) {
3301
3321
  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;
3302
3322
  // State and Ref
3303
3323
  var inputRef = React.useRef(null);
3304
- var wrapperRef = React.useRef(null);
3305
- var _d = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
3306
- return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName), ref: wrapperRef },
3324
+ var _d = React.useState(false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
3325
+ return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName) },
3307
3326
  React.createElement("div", { className: "bianic-datepicker-field-container" },
3308
3327
  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 })),
3309
- isPickerOpen && (React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
3328
+ React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate, isOpen: isPickerOpen, onClose: function () { return setIsPickerOpen(false); } })));
3310
3329
  }
3311
3330
 
3312
3331
  var Node = function (_a) {
package/dist/cjs/types/components/Forms/DatePicker/PickerCalendar/types/types.d.ts CHANGED
@@ -2,6 +2,8 @@ import { ComponentPropsWithRef } from 'react';
2
2
  export interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
3
3
  zIndex?: number | 'auto' | 'inherit';
4
4
  anchorRef: React.RefObject<HTMLDivElement>;
5
+ isOpen?: boolean;
6
+ onClose?: () => void;
5
7
  minDate?: string;
6
8
  maxDate?: string;
7
9
  selectedDate?: string | null;
package/dist/esm/index.js CHANGED
@@ -265,24 +265,34 @@ var validUnion = function (value, union) {
265
265
  return union.includes(value) ? value : union[0];
266
266
  };
267
267
  var useDetectOutsideClick = function (ref, initialState, ignoreRef, event) {
268
- if (event === void 0) { event = 'click'; }
268
+ if (event === void 0) { event = 'pointerdown'; }
269
269
  var _a = useState(initialState), isActive = _a[0], setIsActive = _a[1];
270
270
  useEffect(function () {
271
- var pageClickEvent = function (event) {
272
- // If the active element exists and is clicked outside of
273
- if (ignoreRef &&
274
- ignoreRef.current &&
275
- ignoreRef.current.contains(event.target)) ;
276
- else if (ref.current !== null &&
277
- !ref.current.contains(event.target)) {
278
- setIsActive(!isActive);
271
+ var pageClickEvent = function (e) {
272
+ var target = e.target;
273
+ if (!ref || !ref.current)
274
+ return;
275
+ var path = e.composedPath
276
+ ? e.composedPath()
277
+ : null;
278
+ if (ignoreRef && ignoreRef.current) {
279
+ var insideIgnore = Array.isArray(path)
280
+ ? path.includes(ignoreRef.current)
281
+ : target && ignoreRef.current.contains(target);
282
+ if (insideIgnore)
283
+ return;
279
284
  }
285
+ var inside = Array.isArray(path)
286
+ ? path.includes(ref.current)
287
+ : target && ref.current.contains(target);
288
+ if (inside)
289
+ return;
290
+ setIsActive(function (prev) { return !prev; });
280
291
  };
281
- // If the item is active (ie open) then listen for clicks
282
292
  if (isActive)
283
- window.addEventListener(event, pageClickEvent);
284
- return function () { return window.removeEventListener(event, pageClickEvent); };
285
- }, [isActive, ref]);
293
+ window.addEventListener(event, pageClickEvent, true);
294
+ return function () { return window.removeEventListener(event, pageClickEvent, true); };
295
+ }, [isActive, ref, ignoreRef, event]);
286
296
  return [isActive, setIsActive];
287
297
  };
288
298
 
@@ -2016,7 +2026,7 @@ var FormLabel = function (_a) {
2016
2026
  var labelSize = size === 'sm' ? 'text-size-sm' : 'text-size-md';
2017
2027
  var labelFontWeight = fontWeight === 'semibold' ? 'font-semibold' : 'font-normal';
2018
2028
  var labelClass = "".concat(labelpointer, " ").concat(labelSize, " ").concat(labelFontWeight);
2019
- var labelContent = (React.createElement("label", { htmlFor: htmlFor, className: "bianic-form-label group/formlabel ".concat(labelClass, " ").concat(className) },
2029
+ var labelContent = (React.createElement("label", { htmlFor: htmlFor, className: "bianic-form-label group/formlabel text-bia-black ".concat(labelClass, " ").concat(className) },
2020
2030
  children,
2021
2031
  required && (React.createElement("span", { className: "p-1 text-bia-coolgrey group-hover/form:text-bia-red group-hover/formlabel:text-bia-red" }, "*"))));
2022
2032
  if (required)
@@ -2738,7 +2748,7 @@ function LiveSearch(_a) {
2738
2748
  var _q = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _q.renderedChildren, hasFilteredResults = _q.hasFilteredResults;
2739
2749
  return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container field-group group/form flex w-full flex-col gap-y-2 " },
2740
2750
  React.createElement("div", { className: "group relative w-full" },
2741
- React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target 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) {
2751
+ React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border border-bia-grey-dark-10 bg-primary-white text-bia-black read-only:pointer-events-none read-only:border-bia-grey-light-50 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
2742
2752
  onChangeText(e);
2743
2753
  handleInputChange(e);
2744
2754
  }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
@@ -2974,17 +2984,17 @@ var MonthDisplay = function (_a) {
2974
2984
  var viewYearValue = _a.viewYearValue, selectedDate = _a.selectedDate, viewMonthValue = _a.viewMonthValue, minDateValue = _a.minDateValue, maxDateValue = _a.maxDateValue, onMonthSelect = _a.onMonthSelect;
2975
2985
  return (React.createElement("div", { className: "bianic-datepicker-calendar-month-grid grid grid-cols-3 gap-y-1.5" }, MONTH_MAP.map(function (month, index) {
2976
2986
  var isOutOfRange = !!((minDateValue &&
2977
- (minDateValue.getFullYear() < viewYearValue ||
2978
- index <
2979
- (minDateValue.getFullYear() === viewYearValue
2980
- ? minDateValue.getMonth()
2981
- : 0))) ||
2987
+ minDateValue.getFullYear() <= viewYearValue &&
2988
+ index <
2989
+ (minDateValue.getFullYear() === viewYearValue
2990
+ ? minDateValue.getMonth()
2991
+ : 0)) ||
2982
2992
  (maxDateValue &&
2983
- (maxDateValue.getFullYear() > viewYearValue ||
2984
- index >
2985
- (maxDateValue.getFullYear() === viewYearValue
2986
- ? maxDateValue.getMonth()
2987
- : 11))));
2993
+ maxDateValue.getFullYear() >= viewYearValue &&
2994
+ index >
2995
+ (maxDateValue.getFullYear() === viewYearValue
2996
+ ? maxDateValue.getMonth()
2997
+ : 11)));
2988
2998
  var isSelected = selectedDate &&
2989
2999
  viewYearValue === parseInt(selectedDate.slice(0, 4)) &&
2990
3000
  index === viewMonthValue;
@@ -3100,7 +3110,7 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
3100
3110
  var startOfDecade = Math.floor(year / 10) * 10;
3101
3111
  var endOfDecade = startOfDecade + 9;
3102
3112
  var decadeRange = [];
3103
- for (var i = startOfDecade - 1; i <= endOfDecade + 2; i++) {
3113
+ for (var i = startOfDecade - 1; i < endOfDecade + 2; i++) {
3104
3114
  decadeRange.push(i);
3105
3115
  }
3106
3116
  return decadeRange;
@@ -3118,7 +3128,7 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
3118
3128
  }
3119
3129
  else {
3120
3130
  return (yearDisplayRange.includes(minDateValue.getFullYear()) &&
3121
- viewDecadeValue <= minDateValue.getFullYear());
3131
+ yearDisplayRange[0] <= minDateValue.getFullYear());
3122
3132
  }
3123
3133
  };
3124
3134
  var isNextDisabled = function () {
@@ -3133,7 +3143,7 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
3133
3143
  }
3134
3144
  else {
3135
3145
  return (yearDisplayRange.includes(maxDateValue.getFullYear()) &&
3136
- viewDecadeValue >= maxDateValue.getFullYear());
3146
+ yearDisplayRange[12] >= maxDateValue.getFullYear());
3137
3147
  }
3138
3148
  };
3139
3149
  return {
@@ -3165,12 +3175,22 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
3165
3175
  };
3166
3176
 
3167
3177
  var PickerCalendar = function (_a) {
3168
- 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"]);
3178
+ 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, _d = _a.isOpen, isOpen = _d === void 0 ? false : _d, _e = _a.onClose, onClose = _e === void 0 ? function () { } : _e, props = __rest(_a, ["zIndex", "anchorRef", "maxDate", "minDate", "onDateChange", "ref", "selectedDate", "isOpen", "onClose"]);
3169
3179
  // Hooks & States
3170
- 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;
3180
+ var _f = useCalendarLogic(selectedDate, minDate, maxDate), displayDays = _f.displayDays, handleNextDecade = _f.handleNextDecade, handleNextMonth = _f.handleNextMonth, handleNextYear = _f.handleNextYear, handlePickerMode = _f.handlePickerMode, handlePrevDecade = _f.handlePrevDecade, handlePrevMonth = _f.handlePrevMonth, handlePrevYear = _f.handlePrevYear, handleSetSelectedDate = _f.handleSetSelectedDate, isNextDisabled = _f.isNextDisabled, isPrevDisabled = _f.isPrevDisabled, maxDateValue = _f.maxDateValue, minDateValue = _f.minDateValue, pickerMode = _f.pickerMode, setViewMonthValue = _f.setViewMonthValue, setViewYearValue = _f.setViewYearValue, viewMonthValue = _f.viewMonthValue, viewYearValue = _f.viewYearValue, yearDisplayRange = _f.yearDisplayRange;
3171
3181
  var pickerCalendarRef = useRef(null);
3182
+ var _g = useDetectOutsideClick(anchorRef, false, pickerCalendarRef), isPickerOpen = _g[0], setIsPickerOpen = _g[1];
3172
3183
  var style = props.style, className = props.className, restProps = __rest(props, ["style", "className"]);
3173
3184
  var positionStyle = usePopupPosition(anchorRef, pickerCalendarRef)[0];
3185
+ useEffect(function () {
3186
+ setIsPickerOpen(isOpen);
3187
+ }, [isOpen]);
3188
+ useEffect(function () {
3189
+ if (!isPickerOpen) {
3190
+ onClose();
3191
+ handlePickerMode('date');
3192
+ }
3193
+ }, [isPickerOpen]);
3174
3194
  // Event Handlers
3175
3195
  var handleDateSelect = function (date) {
3176
3196
  handleSetSelectedDate(date, onDateChange);
@@ -3183,7 +3203,7 @@ var PickerCalendar = function (_a) {
3183
3203
  setViewYearValue(year);
3184
3204
  handlePickerMode('month');
3185
3205
  };
3186
- 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),
3206
+ 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, display: isPickerOpen ? 'block' : 'none' }, positionStyle), style) }, restProps),
3187
3207
  React.createElement("div", { className: "bianic-datepicker-calendar-controller flex w-full items-center justify-between" },
3188
3208
  React.createElement("button", { className: "bianic-datepicker-calendar-prev-button text-bia-coolgrey disabled:text-bia-coolgrey-light-50", disabled: isPrevDisabled(), onClick: pickerMode === 'date'
3189
3209
  ? handlePrevMonth
@@ -3299,12 +3319,11 @@ function DatePicker(_a) {
3299
3319
  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;
3300
3320
  // State and Ref
3301
3321
  var inputRef = useRef(null);
3302
- var wrapperRef = useRef(null);
3303
- var _d = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
3304
- return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName), ref: wrapperRef },
3322
+ var _d = useState(false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
3323
+ return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName) },
3305
3324
  React.createElement("div", { className: "bianic-datepicker-field-container" },
3306
3325
  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 })),
3307
- isPickerOpen && (React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
3326
+ React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate, isOpen: isPickerOpen, onClose: function () { return setIsPickerOpen(false); } })));
3308
3327
  }
3309
3328
 
3310
3329
  var Node = function (_a) {
package/dist/esm/types/components/Forms/DatePicker/PickerCalendar/types/types.d.ts CHANGED
@@ -2,6 +2,8 @@ import { ComponentPropsWithRef } from 'react';
2
2
  export interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
3
3
  zIndex?: number | 'auto' | 'inherit';
4
4
  anchorRef: React.RefObject<HTMLDivElement>;
5
+ isOpen?: boolean;
6
+ onClose?: () => void;
5
7
  minDate?: string;
6
8
  maxDate?: string;
7
9
  selectedDate?: string | null;
package/dist/index.d.ts CHANGED
@@ -465,6 +465,8 @@ declare function DatePicker({ zIndexCalendar, value, onChange, size, disabled, p
465
465
  interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
466
466
  zIndex?: number | 'auto' | 'inherit';
467
467
  anchorRef: React.RefObject<HTMLDivElement>;
468
+ isOpen?: boolean;
469
+ onClose?: () => void;
468
470
  minDate?: string;
469
471
  maxDate?: string;
470
472
  selectedDate?: string | null;
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": "2.1.0-beta.1",
6
+ "version": "2.1.0-beta.3",
7
7
  "description": "Design Language System develop by BIAENERGI",
8
8
  "scripts": {
9
9
  "rollup": "rollup -c",