fis-component 0.0.67 → 0.0.69

package/dist/cjs/types/src/components/Input/InputTime/index.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
 import { InputFieldProps } from "../InputField";
 import { InputLabelProps } from "../InputLabel";
-export interface InputTimeProps extends InputFieldProps, Partial<InputLabelProps> {
+export interface InputTimeProps extends Omit<InputFieldProps, "onChange">, Partial<InputLabelProps> {
     message?: string;
     positive?: boolean;
     format?: string;
+    onChange?: (date: Date | null) => void;
+    getPopupContainer?: () => HTMLElement;
 }
 declare const FISInputTime: React.ForwardRefExoticComponent<InputTimeProps & React.RefAttributes<HTMLInputElement>>;
 export default FISInputTime;

package/dist/esm/index.js

@@ -61532,12 +61532,12 @@ function LevelingIcon(props) {
 
 function CaretIcon(props) {
     const { width = 16, height = 16, ...rest } = props;
-    return (jsxs("svg", { width: width, height: height, viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsx("g", { "clip-path": "url(#clip0_11094_8532)", children: jsx("path", { d: "M4.66699 6L8.66699 10L12.667 6", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_11094_8532", children: jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0.666992)" }) }) })] }));
+    return (jsxs("svg", { width: width, height: height, viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsx("g", { clipPath: "url(#clip0_11094_8532)", children: jsx("path", { d: "M4.66699 6L8.66699 10L12.667 6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_11094_8532", children: jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0.666992)" }) }) })] }));
 }
 
 function ExitIcon(props) {
     const { width = 16, height = 16, ...rest } = props;
-    return (jsxs("svg", { width: width, height: height, viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { "clip-path": "url(#clip0_11161_972)", children: jsx("path", { d: "M12.6001 4L4.6001 12M4.6001 4L12.6001 12", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_11161_972", children: jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0.600098)" }) }) })] }));
+    return (jsxs("svg", { width: width, height: height, viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_11161_972)", children: jsx("path", { d: "M12.6001 4L4.6001 12M4.6001 4L12.6001 12", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_11161_972", children: jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0.600098)" }) }) })] }));
 }
 
 function InfoIcon(props) {
@@ -61546,7 +61546,7 @@ function InfoIcon(props) {
 
 function CheckIcon(props) {
     const { width = 20, height = 20, ...rest } = props;
-    return (jsx("svg", { width: width, height: height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { d: "M16.6666 5L7.49992 14.1667L3.33325 10", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+    return (jsx("svg", { width: width, height: height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { d: "M16.6666 5L7.49992 14.1667L3.33325 10", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 
 function WarningIcon(props) {
@@ -61566,7 +61566,7 @@ function PositiveIcon(props) {
 
 function ArrowDownIcon(props) {
     const { width = 16, height = 16, ...rest } = props;
-    return (jsxs("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsx("g", { "clip-path": "url(#clip0_11182_21084)", children: jsx("path", { d: "M4.66666 6L8.66666 10L12.6667 6", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_11182_21084", children: jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0.666656)" }) }) })] }));
+    return (jsxs("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsx("g", { clipPath: "url(#clip0_11182_21084)", children: jsx("path", { d: "M4.66666 6L8.66666 10L12.6667 6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_11182_21084", children: jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0.666656)" }) }) })] }));
 }
 
 function ArrowUpIcon(props) {
@@ -61576,12 +61576,12 @@ function ArrowUpIcon(props) {
 
 function CloseChipIcon(props) {
     const { width = 20, height = 20, ...rest } = props;
-    return (jsxs("svg", { width: width, height: height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsx("g", { "clip-path": "url(#clip0_10200_41079)", children: jsx("path", { d: "M15 5L5 15M5 5L15 15", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_10200_41079", children: jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
+    return (jsxs("svg", { width: width, height: height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsx("g", { clipPath: "url(#clip0_10200_41079)", children: jsx("path", { d: "M15 5L5 15M5 5L15 15", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_10200_41079", children: jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
 }
 
 function TimeIcon(props) {
     const { width = 16, height = 16, ...rest } = props;
-    return (jsxs("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsx("g", { "clip-path": "url(#clip0_10132_275)", children: jsx("path", { d: "M8.00004 4.00004V8.00004L10.6667 9.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_10132_275", children: jsx("rect", { width: width, height: height, fill: "white" }) }) })] }));
+    return (jsxs("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsx("g", { clipPath: "url(#clip0_10132_275)", children: jsx("path", { d: "M8.00004 4.00004V8.00004L10.6667 9.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_10132_275", children: jsx("rect", { width: width, height: height, fill: "white" }) }) })] }));
 }
 
 function DateIcon(props) {
@@ -70918,24 +70918,30 @@ const DivInputTimeSC = styled.div `
 `;
 
 const FISInputTime = forwardRef((props, ref) => {
-    const { className, textLabel = "", iconLabel, required, message, negative, positive, format = "HH:mm:ss", disabled, onClickIconLabel, ...rest } = props;
+    const { className, textLabel = "", iconLabel, required, message, negative, positive, format = "HH:mm:ss", disabled, onChange, onClickIconLabel, getPopupContainer, ...rest } = props;
     const [inputValue, setInputValue] = useState("");
     const [timeValue, setTimeValue] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef(null);
+    const timePickerRef = useRef(null);
     useEffect(() => {
         const handleClickOutside = (event) => {
+            const target = event.target;
             if (containerRef.current &&
-                !containerRef.current.contains(event.target)) {
+                !containerRef.current.contains(target) &&
+                !document.querySelector(".ant-picker-dropdown")?.contains(target)) {
                 setIsOpen(false);
             }
         };
-        document.addEventListener("mousedown", handleClickOutside);
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
         return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, []);
+    }, [isOpen]);
     const handleTimeChange = (time) => {
+        onChange?.(time ? time.toDate() : null);
         setTimeValue(time);
         setInputValue(time ? time.format(format) : "");
         setIsOpen(false);
@@ -70945,21 +70951,28 @@ const FISInputTime = forwardRef((props, ref) => {
         setInputValue(newValue);
         const parsedTime = dayjs(newValue, format, true);
         if (parsedTime.isValid()) {
+            onChange?.(parsedTime.toDate());
             setTimeValue(parsedTime);
         }
         else {
+            onChange?.(null);
             setTimeValue(null);
         }
     };
     const handleClickInput = () => {
-        setIsOpen(true);
+        if (!disabled) {
+            setIsOpen(true);
+        }
     };
     const handleOpenChange = (open) => {
-        if (open) {
-            setIsOpen(open);
+        setIsOpen(open);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Escape") {
+            setIsOpen(false);
         }
     };
-    return (jsxs(DivContainerSC$2, { className: className, ref: containerRef, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxs(DivInputTimeSC, { children: [jsx(FISInputField, { ...rest, ref: ref, typeSuffix: "icon", iconSuffix: jsx(TimeIcon, {}), negative: negative, value: inputValue, onChange: handleInputChange, onFocus: handleClickInput, onClickSuffix: handleClickInput }), jsx(HiddenTimePickerSC, { format: format, value: timeValue, onChange: handleTimeChange, open: isOpen, onOpenChange: handleOpenChange, getPopupContainer: (triggerNode) => triggerNode.parentElement || document.body })] }), message && (jsx(DivHintWrapperSC, { children: jsx(SpanHintSC, { className: classNames({
+    return (jsxs(DivContainerSC$2, { className: className, ref: containerRef, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxs(DivInputTimeSC, { children: [jsx(FISInputField, { ...rest, ref: ref, typeSuffix: "icon", iconSuffix: jsx(TimeIcon, {}), negative: negative, disabled: disabled, value: inputValue, onChange: handleInputChange, onFocus: handleClickInput, onClickSuffix: handleClickInput, onKeyDown: handleKeyDown }), jsx(HiddenTimePickerSC, { ref: timePickerRef, format: format, value: timeValue, onChange: handleTimeChange, open: isOpen, onOpenChange: handleOpenChange, getPopupContainer: getPopupContainer, showNow: true, inputReadOnly: true })] }), message && (jsx(DivHintWrapperSC, { children: jsx(SpanHintSC, { className: classNames({
                         disabled: disabled,
                         negative: negative,
                         positive: positive,