@monolith-forensics/monolith-ui 1.1.55 → 1.1.56

package/dist/DateInput/DateInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import moment from "moment";
-import { useFloating, flip, offset, FloatingPortal } from "@floating-ui/react";
+import { useFloating, flip, offset, FloatingPortal, useDismiss, useInteractions, autoUpdate } from "@floating-ui/react";
 import { useEffect, useMemo, useRef, useState, } from "react";
 import styled from "styled-components";
 import { FieldLabel, Calendar } from "..";
@@ -236,14 +236,19 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
     const isDateOnly = format.match(/(HH|h|mm|ss|SSS|A|Z)/) === null;
     const mainRef = useRef(null);
     const typedKeys = useRef("");
-    const { refs, floatingStyles } = useFloating({
+    const { refs, floatingStyles, context } = useFloating({
         open: isOpen,
         onOpenChange: setIsOpen,
         placement: "bottom-start",
         strategy: "absolute",
         // Handle collisions with the viewport
         middleware: [flip(), offset(5)],
+        whileElementsMounted: autoUpdate,
     });
+    const dismiss = useDismiss(context);
+    const { getReferenceProps } = useInteractions([
+        dismiss,
+    ]);
     const segments = useMemo(() => parseTimestamp(moment(value).toISOString(), format, utc), [value, format, utc]);
     const checkValidRange = (value) => {
         if (min && moment(value).isBefore(min))
@@ -252,11 +257,6 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
             return false;
         return true;
     };
-    const toggleOpen = () => {
-        setIsOpen((prev) => {
-            return !prev;
-        });
-    };
     const handleClear = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -286,7 +286,6 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                 input.focus();
             }
         }
-        toggleOpen();
         setIsOpen(true);
         setSelectedSegment(segments[0]);
     };
@@ -403,32 +402,18 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
     const handleWheelEvent = (e) => {
         if (!selectedSegment)
             return;
-        if (e.deltaY > 0) {
-            setValue((prev) => {
-                if (selectedSegment.type === "separator")
-                    return prev;
-                const newValue = prev
-                    ? moment(prev).subtract(1, selectedSegment.type).toISOString()
-                    : moment().toISOString();
-                if (!checkValidRange(newValue))
-                    return prev;
-                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                return newValue;
-            });
-        }
-        else {
-            setValue((prev) => {
-                if (selectedSegment.type === "separator")
-                    return prev;
-                const newValue = prev
-                    ? moment(prev).add(1, selectedSegment.type).toISOString()
-                    : moment().toISOString();
-                if (!checkValidRange(newValue))
-                    return prev;
-                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                return newValue;
-            });
-        }
+        setValue((prev) => {
+            if (selectedSegment.type === "separator")
+                return prev;
+            if (!prev)
+                return isDateOnly ? moment().format(format) : moment().toISOString();
+            let newValue = e.deltaY > 0 ? moment(prev).subtract(1, selectedSegment.type).toISOString() : moment(prev).add(1, selectedSegment.type).toISOString();
+            if (!checkValidRange(newValue))
+                return prev;
+            newValue = isDateOnly ? moment(newValue).format(format) : newValue;
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            return newValue;
+        });
     };
     const handlePaste = (e) => {
         var _a, _b;
@@ -476,6 +461,8 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                 }, onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: (e) => {
                     e.preventDefault();
                     setSelectedSegment(segments[0]);
+                }, onBlur: () => {
+                    setSelectedSegment(null);
                 }, "data-empty": !value, role: "textbox", size: size, variant: variant, "data-button-right": arrow || clearable, children: [segments.map((segment, i) => {
                         if (segment.type === "separator") {
                             return (_jsx("div", { className: "separator", tabIndex: -1, onClick: (e) => {
@@ -483,8 +470,8 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                                     e.stopPropagation();
                                 }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segment.text }, i));
                         }
-                        return (_jsx(InputSegment, { className: "input", contentEditable: true, suppressContentEditableWarning: true, tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: value ? segment.text : segment.placeholder }, i));
-                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { defaultValue: value ? moment(value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
+                        return (_jsx(InputSegment, { className: "input", tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: value ? segment.text : segment.placeholder }, i));
+                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getReferenceProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { defaultValue: value ? moment(value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
                                     setValue((prev) => {
                                         // make copy of prev variable
                                         const oldValue = moment(prev).toISOString();
@@ -499,6 +486,6 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                                         setIsOpen(closeOnSelect ? false : true);
                                         return isoResult;
                                     });
-                                }, includeTime: false }, 1) }) }) }) }))] }));
+                                }, includeTime: false }, 1) }) }) })) }))] }));
 }) ``;
 export default DateInput;

package/dist/SelectBox/SelectBox.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
-import { useFloating, flip, offset, FloatingPortal, } from "@floating-ui/react";
+import { useFloating, flip, offset, FloatingPortal, autoUpdate, } from "@floating-ui/react";
 import { useCallback, useEffect, useRef, useState, } from "react";
 import { Input, FieldLabel, Tooltip } from "..";
 import { useDebouncedCallback } from "use-debounce";
@@ -206,6 +206,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
         strategy: "absolute",
         // Handle collisions with the viewport
         middleware: [flip(), offset(5)],
+        whileElementsMounted: autoUpdate,
     });
     const toggleOpen = () => {
         setIsOpen((prev) => {

package/dist/TagBox/TagBox.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
-import { useFloating, flip, offset } from "@floating-ui/react";
+import { useFloating, flip, offset, autoUpdate } from "@floating-ui/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Input, Tooltip, FieldLabel, Pill } from "..";
 import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, } from "../core";
@@ -344,6 +344,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         strategy: "absolute",
         // Handle collisions with the viewport
         middleware: [flip(), offset(5)],
+        whileElementsMounted: autoUpdate,
     });
     const toggleOpen = () => {
         setIsOpen((prev) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.55",
+  "version": "1.1.56",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",