@raystack/apsara 0.19.1 → 0.20.0

package/dist/index.css

@@ -1067,10 +1067,10 @@ html[data-theme="dark"] {
   padding: var(--pd-8);
 }
 
-.inputfield-module_textfield-invlid__lcwL- {
+.inputfield-module_textfield-invalid__XFKPz {
   border: 1px solid var(--border-danger);
 }
-.inputfield-module_textfield-invlid__lcwL-:focus {
+.inputfield-module_textfield-invalid__XFKPz:focus {
   border: 1px solid var(--border-danger);
 }
 
@@ -1086,6 +1086,7 @@ html[data-theme="dark"] {
 .inputfield-module_bold__MzkDx {
   font-weight: 500 !important;
 }
+
 .link-module_link__3Pld2 {
   flex-shrink: 0;
   outline: 0;
@@ -1940,10 +1941,6 @@ html[data-theme="dark"] {
   min-width: max-content;
 }
 
-.calendar-module_datePickerInput__aOnRQ {
-  cursor: pointer;
-}
-
 .calendar-module_dropdowns__Wn53e {
   display: flex;
   align-items: center;
@@ -2030,10 +2027,10 @@ html[data-theme="dark"] {
   padding: var(--pd-8);
 }
 
-.textfield-module_textfield-invlid__zo9MF {
+.textfield-module_textfield-invalid__RtgIy {
   outline: 1px solid var(--border-danger);
 }
-.textfield-module_textfield-invlid__zo9MF:focus {
+.textfield-module_textfield-invalid__RtgIy:focus {
   outline: 1px solid var(--border-danger);
 }
 

package/dist/index.js

@@ -10168,7 +10168,7 @@ function Image({ alt, children, className, ...props }) {
     return jsxRuntimeExports.jsx("img", { alt: alt, className: image({ className }), ...props });
 }
 
-var styles$k = {"textfield":"inputfield-module_textfield__l6K73","textfield-sm":"inputfield-module_textfield-sm__QTt1x","textfield-md":"inputfield-module_textfield-md__pQWpW","textfield-invlid":"inputfield-module_textfield-invlid__lcwL-","textfield-valid":"inputfield-module_textfield-valid__euwnE","bold":"inputfield-module_bold__MzkDx"};
+var styles$k = {"textfield":"inputfield-module_textfield__l6K73","textfield-sm":"inputfield-module_textfield-sm__QTt1x","textfield-md":"inputfield-module_textfield-md__pQWpW","textfield-invalid":"inputfield-module_textfield-invalid__XFKPz","textfield-valid":"inputfield-module_textfield-valid__euwnE","bold":"inputfield-module_bold__MzkDx"};
 
 const InputField = ({ label, children, ...props }) => {
     return (jsxRuntimeExports.jsxs(Flex, { direction: "column", gap: "extra-small", ...props, children: [label && jsxRuntimeExports.jsx(Label, { className: styles$k.bold, children: label }), children] }));
@@ -28025,7 +28025,7 @@ function DayPicker(props) {
             props.footer && (React__default.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
 }
 
-var styles$6 = {"calendarRoot":"calendar-module_calendarRoot__KnBz-","caption_label":"calendar-module_caption_label__C5Ys7","dropdowns":"calendar-module_dropdowns__Wn53e","dropdown_trigger":"calendar-module_dropdown_trigger__dsyaq","dropdown_item_text":"calendar-module_dropdown_item_text__Tudqv","nav_button":"calendar-module_nav_button__8W5py","nav_button_previous":"calendar-module_nav_button_previous__lWJYm","nav_button_next":"calendar-module_nav_button_next__1MzRT","months":"calendar-module_months__IN75k","nav":"calendar-module_nav__aGeze","month_caption":"calendar-module_month_caption__Ws6Hx","day":"calendar-module_day__rQFGK","disabled":"calendar-module_disabled__jqgRB","outside":"calendar-module_outside__nq5XC","selected":"calendar-module_selected__kiiAZ","range_middle":"calendar-module_range_middle__PmzFi","range_start":"calendar-module_range_start__ZUooG","range_end":"calendar-module_range_end__PKrm7","week":"calendar-module_week__kCvKJ","day_button":"calendar-module_day_button__vCKP1","today":"calendar-module_today__iXQIQ","weekday":"calendar-module_weekday__xzf6F","hidden":"calendar-module_hidden__wqJVo","calendarPopover":"calendar-module_calendarPopover__PY4sa","datePickerInput":"calendar-module_datePickerInput__aOnRQ","dropdown_icon":"calendar-module_dropdown_icon__rDTbz","dropdown_content":"calendar-module_dropdown_content__ajJ5V"};
+var styles$6 = {"calendarRoot":"calendar-module_calendarRoot__KnBz-","caption_label":"calendar-module_caption_label__C5Ys7","dropdowns":"calendar-module_dropdowns__Wn53e","dropdown_trigger":"calendar-module_dropdown_trigger__dsyaq","dropdown_item_text":"calendar-module_dropdown_item_text__Tudqv","nav_button":"calendar-module_nav_button__8W5py","nav_button_previous":"calendar-module_nav_button_previous__lWJYm","nav_button_next":"calendar-module_nav_button_next__1MzRT","months":"calendar-module_months__IN75k","nav":"calendar-module_nav__aGeze","month_caption":"calendar-module_month_caption__Ws6Hx","day":"calendar-module_day__rQFGK","disabled":"calendar-module_disabled__jqgRB","outside":"calendar-module_outside__nq5XC","selected":"calendar-module_selected__kiiAZ","range_middle":"calendar-module_range_middle__PmzFi","range_start":"calendar-module_range_start__ZUooG","range_end":"calendar-module_range_end__PKrm7","week":"calendar-module_week__kCvKJ","day_button":"calendar-module_day_button__vCKP1","today":"calendar-module_today__iXQIQ","weekday":"calendar-module_weekday__xzf6F","hidden":"calendar-module_hidden__wqJVo","calendarPopover":"calendar-module_calendarPopover__PY4sa","dropdown_icon":"calendar-module_dropdown_icon__rDTbz","dropdown_content":"calendar-module_dropdown_content__ajJ5V"};
 
 const root$1 = cva(styles$6.calendarRoot);
 function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
@@ -28079,7 +28079,7 @@ const Calendar = function ({ className, classNames, showOutsideDays = true, onDr
         }, className: root$1({ className }), mode: "single", ...props }));
 };
 
-var styles$5 = {"textfield":"textfield-module_textfield__u4AGg","textfield-sm":"textfield-module_textfield-sm__OKPic","textfield-md":"textfield-module_textfield-md__e2ayW","textfield-invlid":"textfield-module_textfield-invlid__zo9MF","textfield-valid":"textfield-module_textfield-valid__6rMM9","textfield-leading":"textfield-module_textfield-leading__AE-ld","textfield-trailing":"textfield-module_textfield-trailing__Hj2jX","leadingIcon":"textfield-module_leadingIcon__u-GJ6","trailingIcon":"textfield-module_trailingIcon__q-49S"};
+var styles$5 = {"textfield":"textfield-module_textfield__u4AGg","textfield-sm":"textfield-module_textfield-sm__OKPic","textfield-md":"textfield-module_textfield-md__e2ayW","textfield-invalid":"textfield-module_textfield-invalid__RtgIy","textfield-valid":"textfield-module_textfield-valid__6rMM9","textfield-leading":"textfield-module_textfield-leading__AE-ld","textfield-trailing":"textfield-module_textfield-trailing__Hj2jX","leadingIcon":"textfield-module_leadingIcon__u-GJ6","trailingIcon":"textfield-module_trailingIcon__q-49S"};
 
 const textfield = cva(styles$5.textfield, {
     variants: {
@@ -28124,24 +28124,105 @@ var dayjs_min = {exports: {}};
 var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
-function DatePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps, calendarProps, value = new Date(), onSelect = () => { }, }) {
+var customParseFormat$1 = {exports: {}};
+
+(function (module, exports) {
+	!function(e,t){module.exports=t();}(commonjsGlobal,(function(){var e={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},t=/(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g,n=/\d\d/,r=/\d\d?/,i=/\d*[^-_:/,()\s\d]+/,o={},s=function(e){return (e=+e)+(e>68?1900:2e3)};var a=function(e){return function(t){this[e]=+t;}},f=[/[+-]\d\d:?(\d\d)?|Z/,function(e){(this.zone||(this.zone={})).offset=function(e){if(!e)return 0;if("Z"===e)return 0;var t=e.match(/([+-]|\d\d)/g),n=60*t[1]+(+t[2]||0);return 0===n?0:"+"===t[0]?-n:n}(e);}],h=function(e){var t=o[e];return t&&(t.indexOf?t:t.s.concat(t.f))},u=function(e,t){var n,r=o.meridiem;if(r){for(var i=1;i<=24;i+=1)if(e.indexOf(r(i,0,t))>-1){n=i>12;break}}else n=e===(t?"pm":"PM");return n},d={A:[i,function(e){this.afternoon=u(e,!1);}],a:[i,function(e){this.afternoon=u(e,!0);}],S:[/\d/,function(e){this.milliseconds=100*+e;}],SS:[n,function(e){this.milliseconds=10*+e;}],SSS:[/\d{3}/,function(e){this.milliseconds=+e;}],s:[r,a("seconds")],ss:[r,a("seconds")],m:[r,a("minutes")],mm:[r,a("minutes")],H:[r,a("hours")],h:[r,a("hours")],HH:[r,a("hours")],hh:[r,a("hours")],D:[r,a("day")],DD:[n,a("day")],Do:[i,function(e){var t=o.ordinal,n=e.match(/\d+/);if(this.day=n[0],t)for(var r=1;r<=31;r+=1)t(r).replace(/\[|\]/g,"")===e&&(this.day=r);}],M:[r,a("month")],MM:[n,a("month")],MMM:[i,function(e){var t=h("months"),n=(h("monthsShort")||t.map((function(e){return e.slice(0,3)}))).indexOf(e)+1;if(n<1)throw new Error;this.month=n%12||n;}],MMMM:[i,function(e){var t=h("months").indexOf(e)+1;if(t<1)throw new Error;this.month=t%12||t;}],Y:[/[+-]?\d+/,a("year")],YY:[n,function(e){this.year=s(e);}],YYYY:[/\d{4}/,a("year")],Z:f,ZZ:f};function c(n){var r,i;r=n,i=o&&o.formats;for(var s=(n=r.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var o=r&&r.toUpperCase();return n||i[r]||e[r]||i[o].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,n){return t||n.slice(1)}))}))).match(t),a=s.length,f=0;f<a;f+=1){var h=s[f],u=d[h],c=u&&u[0],l=u&&u[1];s[f]=l?{regex:c,parser:l}:h.replace(/^\[|\]$/g,"");}return function(e){for(var t={},n=0,r=0;n<a;n+=1){var i=s[n];if("string"==typeof i)r+=i.length;else {var o=i.regex,f=i.parser,h=e.slice(r),u=o.exec(h)[0];f.call(t,u),e=e.replace(u,"");}}return function(e){var t=e.afternoon;if(void 0!==t){var n=e.hours;t?n<12&&(e.hours+=12):12===n&&(e.hours=0),delete e.afternoon;}}(t),t}}return function(e,t,n){n.p.customParseFormat=!0,e&&e.parseTwoDigitYear&&(s=e.parseTwoDigitYear);var r=t.prototype,i=r.parse;r.parse=function(e){var t=e.date,r=e.utc,s=e.args;this.$u=r;var a=s[1];if("string"==typeof a){var f=!0===s[2],h=!0===s[3],u=f||h,d=s[2];h&&(d=s[2]),o=this.$locale(),!f&&d&&(o=n.Ls[d]),this.$d=function(e,t,n){try{if(["x","X"].indexOf(t)>-1)return new Date(("X"===t?1e3:1)*e);var r=c(t)(e),i=r.year,o=r.month,s=r.day,a=r.hours,f=r.minutes,h=r.seconds,u=r.milliseconds,d=r.zone,l=new Date,m=s||(i||o?1:l.getDate()),M=i||l.getFullYear(),Y=0;i&&!o||(Y=o>0?o-1:l.getMonth());var p=a||0,v=f||0,D=h||0,g=u||0;return d?new Date(Date.UTC(M,Y,m,p,v,D,g+60*d.offset*1e3)):n?new Date(Date.UTC(M,Y,m,p,v,D,g)):new Date(M,Y,m,p,v,D,g)}catch(e){return new Date("")}}(t,a,r),this.init(),d&&!0!==d&&(this.$L=this.locale(d).$L),u&&t!=this.format(a)&&(this.$d=new Date("")),o={};}else if(a instanceof Array)for(var l=a.length,m=1;m<=l;m+=1){s[1]=a[m-1];var M=n.apply(this,s);if(M.isValid()){this.$d=M.$d,this.$L=M.$L,this.init();break}m===l&&(this.$d=new Date(""));}else i.call(this,e);};}})); 
+} (customParseFormat$1));
+
+var customParseFormatExports = customParseFormat$1.exports;
+var customParseFormat = /*@__PURE__*/getDefaultExportFromCjs(customParseFormatExports);
+
+dayjs.extend(customParseFormat);
+function DatePicker({ side = "top", dateFormat = "DD/MM/YYYY", placeholder = "DD/MM/YYYY", textFieldProps, calendarProps, value = new Date(), onSelect = () => { }, }) {
+    const defaultDate = dayjs(value).format(dateFormat);
     const [showCalendar, setShowCalendar] = useState(false);
-    const dateValue = dayjs(value).format(dateFormat);
-    const isDropdownOpenedRef = useRef(false);
+    const [calendarVal, setCalendarVal] = useState(value);
+    const [inputState, setInputState] = useState();
+    const isDropdownOpenRef = useRef(false);
+    const textFieldRef = useRef(null);
+    const contentRef = useRef(null);
+    const isInputFieldFocused = useRef(false);
+    function isElementOutside(el) {
+        return !isDropdownOpenRef.current && // Month and Year dropdown from Date picker
+            !textFieldRef.current?.contains(el) && // TextField
+            !contentRef.current?.contains(el);
+    }
+    const handleMouseDown = useCallback((event) => {
+        const el = (event.target);
+        if (el && isElementOutside(el))
+            removeEventListeners();
+    }, []);
+    function registerEventListeners() {
+        isInputFieldFocused.current = true;
+        document.addEventListener('mouseup', handleMouseDown, true);
+    }
+    function removeEventListeners() {
+        isInputFieldFocused.current = false;
+        setShowCalendar(false);
+        const updatedVal = dayjs(calendarVal).format(dateFormat);
+        if (textFieldRef.current)
+            textFieldRef.current.value = updatedVal;
+        if (inputState === undefined)
+            onSelect(dayjs(updatedVal).toDate());
+        document.removeEventListener('mouseup', handleMouseDown);
+    }
     const handleSelect = (day) => {
         onSelect(day);
-        setShowCalendar(false);
+        setCalendarVal(day);
+        setInputState(undefined);
+        removeEventListeners();
     };
     function onDropdownOpen() {
-        isDropdownOpenedRef.current = true;
+        isDropdownOpenRef.current = true;
     }
     function onOpenChange(open) {
-        if (!isDropdownOpenedRef.current) {
+        if (!isDropdownOpenRef.current && !(isInputFieldFocused.current && showCalendar)) {
             setShowCalendar(Boolean(open));
         }
-        isDropdownOpenedRef.current = false;
+        isDropdownOpenRef.current = false;
+    }
+    function handleInputFocus() {
+        if (isInputFieldFocused.current)
+            return;
+        if (!showCalendar)
+            setShowCalendar(true);
+    }
+    function handleInputBlur(event) {
+        if (isInputFieldFocused.current) {
+            const el = event.relatedTarget;
+            if (el && isElementOutside(el))
+                removeEventListeners();
+        }
+        else {
+            registerEventListeners();
+            setTimeout(() => textFieldRef.current?.focus());
+        }
+    }
+    function handleKeyUp(event) {
+        if (event.code === 'Enter' && textFieldRef.current) {
+            textFieldRef.current.blur();
+            removeEventListeners();
+        }
+    }
+    function handleInputChange(event) {
+        const { value } = event.target;
+        const format = value.includes("/") ? "DD/MM/YYYY" : value.includes("-") ? "DD-MM-YYYY" : undefined;
+        const date = dayjs(value, format);
+        const isValidDate = date.isValid();
+        const isAfter = calendarProps?.startMonth !== undefined ? dayjs(date).isSameOrAfter(calendarProps.startMonth) : true;
+        const isBefore = calendarProps?.endMonth !== undefined ? dayjs(date).isSameOrBefore(calendarProps.endMonth) : true;
+        const isValid = isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());
+        if (isValid) {
+            setCalendarVal(date.toDate());
+            if (inputState === 'invalid')
+                setInputState(undefined);
+        }
+        else {
+            setInputState('invalid');
+        }
     }
-    return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: jsxRuntimeExports.jsx(TextField, { value: dateValue, trailing: jsxRuntimeExports.jsx(CalendarIcon, {}), className: styles$6.datePickerInput, readOnly: true, ...textFieldProps }) }), jsxRuntimeExports.jsx(Popover.Content, { side: side, className: styles$6.calendarPopover, children: jsxRuntimeExports.jsx(Calendar, { required: true, ...calendarProps, onDropdownOpen: onDropdownOpen, mode: "single", selected: value, defaultMonth: value, onSelect: handleSelect }) })] }));
+    return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(TextField, { ref: textFieldRef, defaultValue: defaultDate, trailing: jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: jsxRuntimeExports.jsx(CalendarIcon, {}) }), onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, state: inputState, placeholder: placeholder, onKeyUp: handleKeyUp, ...textFieldProps }), jsxRuntimeExports.jsx(Popover.Content, { side: side, className: styles$6.calendarPopover, ref: contentRef, children: jsxRuntimeExports.jsx(Calendar, { required: true, ...calendarProps, onDropdownOpen: onDropdownOpen, mode: "single", selected: calendarVal, month: calendarVal, onSelect: handleSelect, onMonthChange: setCalendarVal }) })] }));
 }
 
 function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps, calendarProps, onSelect = () => { }, value = {