nntc-ui 0.0.83 → 0.0.84

package/index.css

@@ -733,11 +733,12 @@
 }
 .dateTime_popoverTarget {
   position: absolute;
-  bottom: 0;
+  top: 0;
   left: 0;
-  z-index: 1;
+  z-index: 0;
   width: 100%;
-  height: 0;
+  height: 100%;
+  pointer-events: none;
 }
 .dateTime_popoverContent {
   max-width: none;

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonHTMLAttributes, ReactNode, DetailedHTMLProps, InputHTMLAttributes, PropsWithChildren, ChangeEvent, JSX, MutableRefObject, ReactElement, CSSProperties, HTMLProps, ElementType } from 'react';
+import { ButtonHTMLAttributes, ReactNode, DetailedHTMLProps, InputHTMLAttributes, PropsWithChildren, JSX, MutableRefObject, ReactElement, CSSProperties, HTMLProps, ElementType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Placement } from '@floating-ui/react';
 
@@ -96,6 +96,7 @@ interface Props$k {
     variant?: Variant$6;
     isPeriod?: boolean;
     valueType?: ValueType;
+    defaultOpen?: boolean;
     componentSize?: Size$9;
     fullWidth?: boolean;
     label?: string;
@@ -347,7 +348,7 @@ interface Props$8 {
     additionalColumnsViews?: (id: string, value: string | number | undefined, payload: {
         [key: string]: string;
     } | undefined) => {
-        edit: ((onChange: (e: ChangeEvent) => void, onBlur: () => void) => JSX.Element | null) | null;
+        edit: ((onChange: (changeValue?: string, withBlur?: boolean) => void, onBlur: () => void) => JSX.Element | null) | null;
         view: JSX.Element | null;
     };
     onChangeCell?: (rowIndex: number, columnId: string, value: string | number | undefined, original?: TableRow) => void;

package/index.js

@@ -1540,6 +1540,7 @@ var DateTime = forwardRef5(
     variant = "filled",
     isPeriod = false,
     valueType = "date",
+    defaultOpen = false,
     componentSize = "medium",
     fullWidth: fullWidth4,
     label: label9,
@@ -1551,12 +1552,15 @@ var DateTime = forwardRef5(
     dayjs: dayjsFromProps,
     classes,
     id,
+    onFocus,
+    onBlur,
     ...inputProps
   }, ref) => {
     const dayjs3 = dayjsFromProps ?? defaultDayjs2;
     const [stateValues, setStateValues] = useState5(
       values !== void 0 ? values : defaultValues
     );
+    const [isPopoverOpen, setIsPopoverOpen] = useState5(defaultOpen);
     const stateValuesRef = useRef4(stateValues);
     useEffect5(() => {
       if (values !== void 0) {
@@ -1573,16 +1577,48 @@ var DateTime = forwardRef5(
     }, [stateValues]);
     const effectiveValueType = isPeriod && valueType === "dateTime" ? "date" : valueType;
     const inputRef = useRef4(null);
-    const popoverTargetRef = useRef4(null);
     const reactId = useId2();
     const inputId = id ?? reactId;
-    const inputClickHandler = useCallback5(
-      (e) => {
-        e.preventDefault();
-        popoverTargetRef?.current?.click();
+    const inputFocusHandler = useCallback5(
+      (event) => {
+        setIsPopoverOpen(true);
+        onFocus?.(event);
       },
-      [popoverTargetRef]
+      [onFocus]
     );
+    const inputBlurHandler = useCallback5(
+      (event) => {
+        if (isPopoverOpen) {
+          return;
+        }
+        onBlur?.(event);
+      },
+      [isPopoverOpen, onBlur]
+    );
+    const popoverOpenChangeHandler = useCallback5(
+      (open) => {
+        setIsPopoverOpen(open);
+        if (!open) {
+          const currentValues = stateValuesRef.current;
+          if (currentValues !== void 0) {
+            onValueChange?.(currentValues);
+          }
+          const inputElement = inputRef.current;
+          if (!inputElement) {
+            return;
+          }
+          if (document.activeElement === inputElement) {
+            inputElement.blur();
+            return;
+          }
+          onBlur?.({ target: inputElement, currentTarget: inputElement });
+        }
+      },
+      [onBlur, onValueChange]
+    );
+    const iconClickHandler = useCallback5(() => {
+      inputRef.current?.focus();
+    }, []);
     const changeDates = useCallback5(
       (newStartDate, newEndDate) => {
         const newValues = isPeriod ? [newStartDate, newEndDate] : [newStartDate];
@@ -1594,9 +1630,8 @@ var DateTime = forwardRef5(
         }
         stateValuesRef.current = newValues;
         setStateValues(newValues);
-        onValueChange?.(newValues);
       },
-      [isPeriod, onValueChange]
+      [isPeriod]
     );
     return /* @__PURE__ */ jsxs7(
       "div",
@@ -1634,14 +1669,17 @@ var DateTime = forwardRef5(
                 )}` : "",
                 onChange: () => {
                 },
-                onClick: inputClickHandler
+                onFocus: inputFocusHandler,
+                onBlur: inputBlurHandler
               }
             ),
-            /* @__PURE__ */ jsx15("span", { onClick: inputClickHandler, className: classnames7(icon2, classes?.icon), children: /* @__PURE__ */ jsx15(DateRangeIcon, {}) }),
+            /* @__PURE__ */ jsx15("span", { onClick: iconClickHandler, className: classnames7(icon2, classes?.icon), children: /* @__PURE__ */ jsx15(DateRangeIcon, {}) }),
             /* @__PURE__ */ jsx15(
               Popover,
               {
                 placement: "bottom-start",
+                open: isPopoverOpen,
+                onOpenChange: popoverOpenChangeHandler,
                 classes: { ...classes?.popover, content: popoverContent2 },
                 containerOffset: 4,
                 description: /* @__PURE__ */ jsx15(
@@ -1658,7 +1696,7 @@ var DateTime = forwardRef5(
                     onClear
                   }
                 ),
-                children: /* @__PURE__ */ jsx15("div", { ref: popoverTargetRef, className: classnames7(popoverTarget2) })
+                children: /* @__PURE__ */ jsx15("div", { className: classnames7(popoverTarget2) })
               }
             )
           ] })
@@ -3266,15 +3304,19 @@ var DefaultColumn = {
         tableMeta?.updateData(index, id, value, original);
         setIsEdit(false);
       };
-      const onChange = (e) => {
-        setValue(e.target.value);
+      const onChange = (changeValue, withBlur) => {
+        setValue(changeValue);
+        if (withBlur) {
+          tableMeta?.updateData(index, id, changeValue, original);
+          setIsEdit(false);
+        }
       };
       return /* @__PURE__ */ jsx31(
         Tooltip,
         {
           label: original[id]?.tooltip ?? "",
           alertType: original[id]?.fill === "error" ? "error" : original[id]?.fill === "success" ? "success" : "default",
-          children: additionalViewResult?.edit !== null && additionalViewResult?.edit !== void 0 ? additionalViewResult.edit(onChange, onBlur) : /* @__PURE__ */ jsx31(Fragment6, { children: /* @__PURE__ */ jsx31("input", { onChange, onBlur, value: value ?? "", autoFocus: true }) })
+          children: additionalViewResult?.edit !== null && additionalViewResult?.edit !== void 0 ? additionalViewResult.edit(onChange, onBlur) : /* @__PURE__ */ jsx31(Fragment6, { children: /* @__PURE__ */ jsx31("input", { onChange: (e) => onChange(e.target.value), onBlur, value: value ?? "", autoFocus: true }) })
         }
       );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "author": "NNTC",
   "description": "React UI-kit for NNTC",
   "type": "module",