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

package/README.md

@@ -1,49 +1,49 @@
-# Bianic 2.0
-
-DLS designed by BIAENERGI
-
-## Installation
-
-### First Installation
-
-`npm i bianic-ui`
-
-## Usage
-
-After Bianic-Ui succesfully installed, you can call the component using JSX tag declaration style ex: `<Alert />`. Futher documentation about component can be access [here](https://ristek.link/bianic-dev-docs)
-
-## Support
-
-If you found any bug, please contact at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
-
-## Contributing
-
-If you're interested in contributing to Bianic-Ui, please contact our team at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
-
-## Change Log
-
-Coming soon
-
-## Development Notes
-
-### Code Convention
-
-- Always separate style with tsx
-- For style config always try to be object with one level
-- Separate config file and component file for more readable code
-- The variable name of style config must be describe what you styling not describe the parameters (or key)
-- Use .tsx only when defining component, just us .ts if no component defined on the file
-- Don't import simulation or any demo to index.ts
-- Update storybook for every change or new component
-
-### Component attribute naming
-
-- Check on html documentation. Always try to use the exisiting html atribute name.
-- If there the attibute not listed on html documentation. You can make it on your own with rules :
-  - Use "is" prefix for boolean
-  - Use "on" prefix for event listener
-
-### Another Notes
-
-- Please assign class `...-primary-black` when need black color. If not assigned system will use #000000 black.
-- Just discuss any concept you had. **Discuss first, Implement later**.
+# Bianic 2.0
+
+DLS designed by BIAENERGI
+
+## Installation
+
+### First Installation
+
+`npm i bianic-ui`
+
+## Usage
+
+After Bianic-Ui succesfully installed, you can call the component using JSX tag declaration style ex: `<Alert />`. Futher documentation about component can be access [here](https://ristek.link/bianic-dev-docs)
+
+## Support
+
+If you found any bug, please contact at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
+
+## Contributing
+
+If you're interested in contributing to Bianic-Ui, please contact our team at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
+
+## Change Log
+
+Coming soon
+
+## Development Notes
+
+### Code Convention
+
+- Always separate style with tsx
+- For style config always try to be object with one level
+- Separate config file and component file for more readable code
+- The variable name of style config must be describe what you styling not describe the parameters (or key)
+- Use .tsx only when defining component, just us .ts if no component defined on the file
+- Don't import simulation or any demo to index.ts
+- Update storybook for every change or new component
+
+### Component attribute naming
+
+- Check on html documentation. Always try to use the exisiting html atribute name.
+- If there the attibute not listed on html documentation. You can make it on your own with rules :
+  - Use "is" prefix for boolean
+  - Use "on" prefix for event listener
+
+### Another Notes
+
+- Please assign class `...-primary-black` when need black color. If not assigned system will use #000000 black.
+- Just discuss any concept you had. **Discuss first, Implement later**.

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];
 };
 
@@ -1900,9 +1910,9 @@ MenuContainerNoAnchor.defaultProps = {
 };
 
 function MenuItem(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.inheritedOnClick, inheritedOnClick = _h === void 0 ? function () { } : _h, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex", "inheritedOnClick"]);
-    var _j = React.useState(false), isHovered = _j[0], setIsHovered = _j[1];
-    var _k = React.useState(false), isLeft = _k[0], setIsLeft = _k[1];
+    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.inheritedOnClick, inheritedOnClick = _h === void 0 ? function () { } : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex", "inheritedOnClick", "disabled"]);
+    var _k = React.useState(false), isHovered = _k[0], setIsHovered = _k[1];
+    var _l = React.useState(false), isLeft = _l[0], setIsLeft = _l[1];
     var isWithChecked = isChecked !== undefined;
     var leftPadding = isWithChecked ? 'pl-[5px]' : 'pl-[10px]';
     var rightPadding = caption || children ? 'pr-[5px]' : 'pr-[10px]';
@@ -1924,19 +1934,21 @@ function MenuItem(_a) {
         ? 'left-0 -translate-x-full'
         : 'right-0 translate-x-full';
     var currentZIndex = zIndex + 10;
-    return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement("div", __assign({ className: "relative flex items-center py-[5px] hover:bg-bia-blue-pastel ".concat(itemClass), role: "button", tabIndex: 0, onClick: function (e) {
+    return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return !disabled && setIsHovered(true); }, onMouseLeave: function () { return !disabled && setIsHovered(false); } },
+        React.createElement("div", __assign({ className: "relative flex items-center py-[5px] ".concat(itemClass, " ").concat(disabled ? 'cursor-not-allowed' : 'hover:bg-bia-blue-pastel'), role: "button", "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: function (e) {
+                if (disabled)
+                    return;
                 inheritedOnClick();
                 onClick(e);
             }, onKeyDown: function () { }, style: {
                 zIndex: isHovered ? currentZIndex : currentZIndex + 15,
             } }, props),
             isWithChecked && (React.createElement("div", { className: "mr-[5px] aspect-square w-[14px]" }, isChecked && React.createElement(TbCheck, { className: "text-primary-black", size: 14 }))),
-            React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px] text-bia-black" }, label),
+            React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px] ".concat(disabled ? 'text-bia-coolgrey-light-50' : 'text-bia-black') }, label),
             React.createElement("div", { className: "ml-auto flex items-center" },
                 children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey" })),
-                children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] text-bia-coolgrey" }, caption)))),
-        children && (React.createElement(MenuContainerNoAnchor, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
+                children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] ".concat(disabled ? 'text-bia-coolgrey-light-50' : 'text-bia-coolgrey') }, caption)))),
+        children && !disabled && (React.createElement(MenuContainerNoAnchor, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
 }
 MenuItem.defaultProps = {
     className: '',
@@ -2132,7 +2144,7 @@ var TextInput = React.forwardRef(function (_a, ref) {
         React.createElement("div", { className: "relative w-full" },
             React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target w-full rounded read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none focus:rounded-b-none focus-visible:outline-none disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete, ref: ref }, props)),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
-        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs ".concat(descColor) },
+        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs whitespace-nowrap ".concat(descColor) },
             React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
                 remainWords,
@@ -2393,11 +2405,11 @@ DropdownContNoAnchor.defaultProps = {
 
 var sizeUnion$2 = ['md', 'sm'];
 function SelectInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.required, required = _e === void 0 ? false : _e, selected = _a.selected, setSelected = _a.setSelected, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.dropContProps, _h = _g === void 0 ? {} : _g, _j = _h.className, dropContClassName = _j === void 0 ? '' : _j, restDropContProps = __rest(_h, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
-    var _k = React.useState(false), isOpen = _k[0], setIsOpen = _k[1];
-    var _l = React.useState(false), isDropUp = _l[0], setIsDropUp = _l[1];
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, _d = _a.isValid, isValid = _d === void 0 ? null : _d, label = _a.label, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.required, required = _f === void 0 ? false : _f, selected = _a.selected, setSelected = _a.setSelected, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, children = _a.children, _h = _a.dropContProps, _j = _h === void 0 ? {} : _h, _k = _j.className, dropContClassName = _k === void 0 ? '' : _k, restDropContProps = __rest(_j, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "isValid", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
+    var _l = React.useState(false), isOpen = _l[0], setIsOpen = _l[1];
+    var _m = React.useState(false), isDropUp = _m[0], setIsDropUp = _m[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _m = sizeConfig$8[validatedSize], searchSize = _m.searchSize, iconSize = _m.iconSize;
+    var _o = sizeConfig$8[validatedSize], searchSize = _o.searchSize, iconSize = _o.iconSize;
     var inputRef = React.useRef(null);
     var dropdownContRef = React.useRef(null);
     var handleOutsideClick = function (e) {
@@ -2447,12 +2459,18 @@ function SelectInput(_a) {
         }
     }, [isOpen]);
     var dropdownPosition = isDropUp ? 'bottom-full' : 'top-full';
-    return (React.createElement("div", { className: "field-group flex w-full flex-col", ref: inputRef },
+    var descColor = 'text-primary-cool';
+    var isExistValidation = isValid !== null && isValid !== undefined;
+    if (!disabled && isExistValidation && isValid)
+        descColor = 'text-bia-green';
+    if (!disabled && isExistValidation && !isValid)
+        descColor = 'text-bia-red';
+    return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col", ref: inputRef },
         React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             childrenElement(label),
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", __assign({ className: "field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 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:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
+            React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full  cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 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:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
             React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
             children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg ".concat(dropdownPosition), ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
@@ -2478,7 +2496,7 @@ function SelectInput(_a) {
                 }
                 return child;
             })))),
-        descText && (React.createElement("span", { className: "desc mt-2 text-xs text-primary-cool" }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
 }
 SelectInput.defaultProps = {
     descText: '',
@@ -2711,23 +2729,28 @@ var useLiveSearch = function (_a) {
 };
 
 function LiveSearch(_a) {
-    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id, label = _a.label, _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, value = _a.value;
+    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id; _a.label; var _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, _l = _a.isValid, isValid = _l === void 0 ? null : _l, value = _a.value;
     var inputRef = React.useRef(null);
-    var _l = useLiveSearch({
+    var _m = useLiveSearch({
         value: value,
         setValue: setValue,
         onChangeText: onChangeText,
         dropContOnClickItem: dropContProps === null || dropContProps === void 0 ? void 0 : dropContProps.onClickItem,
-    }), isOpen = _l.isOpen, setIsOpen = _l.setIsOpen, searchTerm = _l.searchTerm, handleInputChange = _l.handleInputChange, handleDropdownItemClick = _l.handleDropdownItemClick;
-    var _m = sizeConfig$6[size], iconClass = _m.iconClass, iconSize = _m.iconSize, inputClass = _m.inputClass;
-    var _o = dropContProps || {}, dropContClassName = _o.className; _o.onClickItem; _o.anchorRef; var restDropContProps = __rest(_o, ["className", "onClickItem", "anchorRef"]);
+    }), isOpen = _m.isOpen, setIsOpen = _m.setIsOpen, searchTerm = _m.searchTerm, handleInputChange = _m.handleInputChange, handleDropdownItemClick = _m.handleDropdownItemClick;
+    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
+    var _p = dropContProps || {}, dropContClassName = _p.className; _p.onClickItem; _p.anchorRef; var restDropContProps = __rest(_p, ["className", "onClickItem", "anchorRef"]);
     var isValueExist = value && value.label !== undefined && value.label !== '';
+    var descColor = 'text-primary-cool';
+    var isExistValidation = isValid !== null && isValid !== undefined;
+    if (!disabled && isExistValidation && isValid)
+        descColor = 'text-bia-green';
+    if (!disabled && isExistValidation && !isValid)
+        descColor = 'text-bia-red';
     var filteredOptions = filterOptions(options || [], value.label);
-    var _p = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _p.renderedChildren, hasFilteredResults = _p.hasFilteredResults;
-    return (React.createElement("div", { className: "bianic-livesearch field-group group/form flex w-full flex-col gap-y-2 " },
-        label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
+    var _q = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _q.renderedChildren, hasFilteredResults = _q.hasFilteredResults;
+    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 " },
         React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", { className: "bianic-livesearch-input 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) {
+            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) {
                     onChangeText(e);
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
@@ -2749,7 +2772,7 @@ function LiveSearch(_a) {
                 ? renderedChildren
                 : // If no results and searchTerm is present
                     searchTerm.length > 0 && (React.createElement(DropdownItem, { content: React.createElement("div", { className: "px-4 py-2 text-gray-500" }, "Tidak ada hasil ditemukan.") }))))),
-        descText && (React.createElement("span", { className: "desc text-xs text-primary-cool" }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
 }
 LiveSearch.defaultProps = {
     descText: '',
@@ -3154,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);
@@ -3172,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
@@ -3288,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) {