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

package/dist/cjs/index.js

@@ -267,24 +267,34 @@ var validUnion = function (value, union) {
     return union.includes(value) ? value : union[0];
 };
 var useDetectOutsideClick = function (ref, initialState, ignoreRef, event) {
-    if (event === void 0) { event = 'click'; }
+    if (event === void 0) { event = 'pointerdown'; }
     var _a = React.useState(initialState), isActive = _a[0], setIsActive = _a[1];
     React.useEffect(function () {
-        var pageClickEvent = function (event) {
-            // If the active element exists and is clicked outside of
-            if (ignoreRef &&
-                ignoreRef.current &&
-                ignoreRef.current.contains(event.target)) ;
-            else if (ref.current !== null &&
-                !ref.current.contains(event.target)) {
-                setIsActive(!isActive);
+        var pageClickEvent = function (e) {
+            var target = e.target;
+            if (!ref || !ref.current)
+                return;
+            var path = e.composedPath
+                ? e.composedPath()
+                : null;
+            if (ignoreRef && ignoreRef.current) {
+                var insideIgnore = Array.isArray(path)
+                    ? path.includes(ignoreRef.current)
+                    : target && ignoreRef.current.contains(target);
+                if (insideIgnore)
+                    return;
             }
+            var inside = Array.isArray(path)
+                ? path.includes(ref.current)
+                : target && ref.current.contains(target);
+            if (inside)
+                return;
+            setIsActive(function (prev) { return !prev; });
         };
-        // If the item is active (ie open) then listen for clicks
         if (isActive)
-            window.addEventListener(event, pageClickEvent);
-        return function () { return window.removeEventListener(event, pageClickEvent); };
-    }, [isActive, ref]);
+            window.addEventListener(event, pageClickEvent, true);
+        return function () { return window.removeEventListener(event, pageClickEvent, true); };
+    }, [isActive, ref, ignoreRef, event]);
     return [isActive, setIsActive];
 };
 
@@ -3167,12 +3177,21 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
 };
 
 var PickerCalendar = function (_a) {
-    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"]);
+    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"]);
     // Hooks & States
-    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 _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;
     var pickerCalendarRef = React.useRef(null);
+    var _g = useDetectOutsideClick(anchorRef, false, pickerCalendarRef), isPickerOpen = _g[0], setIsPickerOpen = _g[1];
     var style = props.style, className = props.className, restProps = __rest(props, ["style", "className"]);
     var positionStyle = usePopupPosition(anchorRef, pickerCalendarRef)[0];
+    React.useEffect(function () {
+        setIsPickerOpen(isOpen);
+    }, [isOpen]);
+    React.useEffect(function () {
+        if (!isPickerOpen) {
+            onClose();
+        }
+    }, [isPickerOpen]);
     // Event Handlers
     var handleDateSelect = function (date) {
         handleSetSelectedDate(date, onDateChange);
@@ -3185,7 +3204,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 ".concat(className), ref: pickerCalendarRef, style: __assign(__assign({ zIndex: zIndex }, positionStyle), style) }, restProps),
+    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),
         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
@@ -3301,12 +3320,11 @@ function DatePicker(_a) {
     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 _d = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
-    return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName), ref: wrapperRef },
+    var _d = React.useState(false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
+    return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName) },
         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, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
+        React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate, isOpen: isPickerOpen, onClose: function () { return setIsPickerOpen(false); } })));
 }
 
 var Node = function (_a) {

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

@@ -2,6 +2,8 @@ import { ComponentPropsWithRef } from 'react';
 export interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
     zIndex?: number | 'auto' | 'inherit';
     anchorRef: React.RefObject<HTMLDivElement>;
+    isOpen?: boolean;
+    onClose?: () => void;
     minDate?: string;
     maxDate?: string;
     selectedDate?: string | null;

package/dist/esm/index.js

@@ -265,24 +265,34 @@ var validUnion = function (value, union) {
     return union.includes(value) ? value : union[0];
 };
 var useDetectOutsideClick = function (ref, initialState, ignoreRef, event) {
-    if (event === void 0) { event = 'click'; }
+    if (event === void 0) { event = 'pointerdown'; }
     var _a = useState(initialState), isActive = _a[0], setIsActive = _a[1];
     useEffect(function () {
-        var pageClickEvent = function (event) {
-            // If the active element exists and is clicked outside of
-            if (ignoreRef &&
-                ignoreRef.current &&
-                ignoreRef.current.contains(event.target)) ;
-            else if (ref.current !== null &&
-                !ref.current.contains(event.target)) {
-                setIsActive(!isActive);
+        var pageClickEvent = function (e) {
+            var target = e.target;
+            if (!ref || !ref.current)
+                return;
+            var path = e.composedPath
+                ? e.composedPath()
+                : null;
+            if (ignoreRef && ignoreRef.current) {
+                var insideIgnore = Array.isArray(path)
+                    ? path.includes(ignoreRef.current)
+                    : target && ignoreRef.current.contains(target);
+                if (insideIgnore)
+                    return;
             }
+            var inside = Array.isArray(path)
+                ? path.includes(ref.current)
+                : target && ref.current.contains(target);
+            if (inside)
+                return;
+            setIsActive(function (prev) { return !prev; });
         };
-        // If the item is active (ie open) then listen for clicks
         if (isActive)
-            window.addEventListener(event, pageClickEvent);
-        return function () { return window.removeEventListener(event, pageClickEvent); };
-    }, [isActive, ref]);
+            window.addEventListener(event, pageClickEvent, true);
+        return function () { return window.removeEventListener(event, pageClickEvent, true); };
+    }, [isActive, ref, ignoreRef, event]);
     return [isActive, setIsActive];
 };
 
@@ -3165,12 +3175,21 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
 };
 
 var PickerCalendar = function (_a) {
-    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"]);
+    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"]);
     // Hooks & States
-    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 _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;
     var pickerCalendarRef = useRef(null);
+    var _g = useDetectOutsideClick(anchorRef, false, pickerCalendarRef), isPickerOpen = _g[0], setIsPickerOpen = _g[1];
     var style = props.style, className = props.className, restProps = __rest(props, ["style", "className"]);
     var positionStyle = usePopupPosition(anchorRef, pickerCalendarRef)[0];
+    useEffect(function () {
+        setIsPickerOpen(isOpen);
+    }, [isOpen]);
+    useEffect(function () {
+        if (!isPickerOpen) {
+            onClose();
+        }
+    }, [isPickerOpen]);
     // Event Handlers
     var handleDateSelect = function (date) {
         handleSetSelectedDate(date, onDateChange);
@@ -3183,7 +3202,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 ".concat(className), ref: pickerCalendarRef, style: __assign(__assign({ zIndex: zIndex }, positionStyle), style) }, restProps),
+    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),
         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
@@ -3299,12 +3318,11 @@ function DatePicker(_a) {
     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 _d = useDetectOutsideClick(wrapperRef, false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
-    return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName), ref: wrapperRef },
+    var _d = useState(false), isPickerOpen = _d[0], setIsPickerOpen = _d[1];
+    return (React.createElement("div", { className: "bianic-datepicker-container relative ".concat(containerClassName) },
         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, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate }))));
+        React.createElement(PickerCalendar, { zIndex: zIndexCalendar, anchorRef: inputRef, selectedDate: value, onDateChange: onChange, minDate: minDate, maxDate: maxDate, isOpen: isPickerOpen, onClose: function () { return setIsPickerOpen(false); } })));
 }
 
 var Node = function (_a) {

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

@@ -2,6 +2,8 @@ import { ComponentPropsWithRef } from 'react';
 export interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
     zIndex?: number | 'auto' | 'inherit';
     anchorRef: React.RefObject<HTMLDivElement>;
+    isOpen?: boolean;
+    onClose?: () => void;
     minDate?: string;
     maxDate?: string;
     selectedDate?: string | null;

package/dist/index.d.ts

@@ -465,6 +465,8 @@ declare function DatePicker({ zIndexCalendar, value, onChange, size, disabled, p
 interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
     zIndex?: number | 'auto' | 'inherit';
     anchorRef: React.RefObject<HTMLDivElement>;
+    isOpen?: boolean;
+    onClose?: () => void;
     minDate?: string;
     maxDate?: string;
     selectedDate?: string | null;

package/package.json

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