fis-component 0.0.76 → 0.0.78

package/dist/cjs/index.js

@@ -71091,9 +71091,23 @@ function mergeRefs(...refs) {
 }
 
 const FISInputDate = React.forwardRef((props, ref) => {
-    const { className, value, textLabel = "", iconLabel, required, message = "", disabled, negative, positive, format = "DD/MM/YYYY", onClickIconLabel, onChange, getPopupContainer, minDate, maxDate, ...restProps } = props;
+    const { className, value, textLabel = "", iconLabel, required, message = "", disabled, negative, positive, format, onClickIconLabel, onChange, getPopupContainer, minDate, maxDate, picker = "date", allowClear = true, showToday = true, showTime = false, autoFocus = false, disabledDate, inputReadOnly = false, ...restProps } = props;
+    const getDefaultFormat = (pickerMode) => {
+        switch (pickerMode) {
+            case "year":
+                return "YYYY";
+            case "month":
+                return "MM/YYYY";
+            case "quarter":
+                return "YYYY-[Q]Q";
+            case "date":
+            default:
+                return "DD/MM/YYYY";
+        }
+    };
+    const finalFormat = format || getDefaultFormat(picker);
     const [open, setOpen] = React.useState(false);
-    const [inputValue, setInputValue] = React.useState(value ? dayjs(value).format(format) : "");
+    const [inputValue, setInputValue] = React.useState(value ? dayjs(value).format(finalFormat) : "");
     const [dateValue, setDateValue] = React.useState(value ? dayjs(value) : null);
     const inputRef = React.useRef(null);
     const mergeRef = mergeRefs(inputRef, ref);
@@ -71102,28 +71116,30 @@ const FISInputDate = React.forwardRef((props, ref) => {
         if (value) {
             const newDayjs = dayjs(value);
             setDateValue(newDayjs);
-            setInputValue(newDayjs.format(format));
+            setInputValue(newDayjs.format(finalFormat));
         }
         else {
             setDateValue(null);
             setInputValue("");
         }
-    }, [value, format]);
+    }, [value, finalFormat]);
     const handleOpenChange = (openState) => {
         setOpen(openState);
     };
     const handleChange = (selectedDate) => {
         const newDate = selectedDate ? selectedDate.toDate() : null;
         setDateValue(selectedDate);
-        setInputValue(selectedDate ? selectedDate.format(format) : "");
+        setInputValue(selectedDate ? selectedDate.format(finalFormat) : "");
         onChange?.(newDate);
         setOpen(false);
     };
     const handleInputChange = (e) => {
+        if (inputReadOnly)
+            return;
         const newInputValue = e.target.value;
         setInputValue(newInputValue);
         // Try to parse the input as a date
-        const parsedDate = dayjs(newInputValue, format);
+        const parsedDate = dayjs(newInputValue, finalFormat);
         if (parsedDate.isValid()) {
             setDateValue(parsedDate);
             onChange?.(parsedDate.toDate());
@@ -71134,7 +71150,7 @@ const FISInputDate = React.forwardRef((props, ref) => {
             onChange?.(null);
         }
     };
-    return (jsxRuntime.jsxs(DivWrapperSC$2, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsxs(DivInputWrapperSC$1, { children: [jsxRuntime.jsx(FISInputField, { ...restProps, ref: mergeRef, typeSuffix: "icon", iconSuffix: jsxRuntime.jsx(DateIcon, {}), value: inputValue, negative: negative, disabled: disabled, onFocus: () => setOpen(true), onChange: handleInputChange, onClickSuffix: () => setOpen(true) }), jsxRuntime.jsx(HiddenDatePickerSC, { open: open, value: dateValue, onChange: (value) => handleChange(value), onOpenChange: handleOpenChange, format: format, getPopupContainer: getPopupContainer, minDate: minDate, maxDate: maxDate })] }), message && (jsxRuntime.jsx(DivHintWrapperSC$1, { children: jsxRuntime.jsx(SpanHintSC$3, { className: classNames({
+    return (jsxRuntime.jsxs(DivWrapperSC$2, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsxs(DivInputWrapperSC$1, { children: [jsxRuntime.jsx(FISInputField, { ...restProps, ref: mergeRef, typeSuffix: "icon", iconSuffix: jsxRuntime.jsx(DateIcon, {}), value: inputValue, negative: negative, disabled: disabled, placeholder: restProps.placeholder, readOnly: inputReadOnly, autoFocus: autoFocus, onFocus: () => setOpen(true), onChange: handleInputChange, onClickSuffix: () => setOpen(true) }), jsxRuntime.jsx(HiddenDatePickerSC, { open: open, value: dateValue, onChange: (value) => handleChange(value), onOpenChange: handleOpenChange, format: finalFormat, getPopupContainer: getPopupContainer, minDate: minDate, maxDate: maxDate, picker: picker, allowClear: allowClear, showToday: showToday, showTime: showTime, disabledDate: disabledDate })] }), message && (jsxRuntime.jsx(DivHintWrapperSC$1, { children: jsxRuntime.jsx(SpanHintSC$3, { className: classNames({
                         disabled,
                         negative,
                         positive,
@@ -71715,7 +71731,7 @@ const DivIconSC = styled.div `
 `;
 
 const FISTableCell = React.forwardRef(({ className, textAlign, variant = COLUMN_VARIANT.PRIMARY, content, description, icon, disabled, hasBorder, onChange, contentWrapText = false, ...rest }, ref) => {
-    return (jsxRuntime.jsx(DivColumnCellContainerSC, { "$hasBorder": hasBorder, "$disabled": disabled, "$variant": variant, "$textAlign": textAlign, "$contentWrapText": contentWrapText, "$hasContent": content, "$hasDescription": description, ref: ref, className: classNames("column-cell-container", className), ...rest, children: textAlign === COLUMN_TEXT_ALIGN.SINGLE_LINE ? (jsxRuntime.jsxs("div", { className: "single-line-content", children: [icon && (jsxRuntime.jsx("div", { className: "icon-box", children: jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content, "$hasDescription": description, children: icon }) })), (content || description) && (jsxRuntime.jsxs("div", { className: "content-box", children: [content && jsxRuntime.jsx("div", { className: "content", children: content }), description && (jsxRuntime.jsx("div", { className: "description", children: description }))] }))] })) : (jsxRuntime.jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxRuntime.jsxs("div", { className: "content-box", children: [icon && (jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content, "$hasDescription": description, children: icon })), content && jsxRuntime.jsx("div", { className: "content", children: content })] })), description && jsxRuntime.jsx("div", { className: "description", children: description })] })) }));
+    return (jsxRuntime.jsx(DivColumnCellContainerSC, { "$hasBorder": hasBorder, "$disabled": disabled, "$variant": variant, "$textAlign": textAlign, "$contentWrapText": contentWrapText, "$hasContent": content ? "true" : undefined, "$hasDescription": description, ref: ref, className: classNames("column-cell-container", className), ...rest, children: textAlign === COLUMN_TEXT_ALIGN.SINGLE_LINE ? (jsxRuntime.jsxs("div", { className: "single-line-content", children: [icon && (jsxRuntime.jsx("div", { className: "icon-box", children: jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon }) })), (content || description) && (jsxRuntime.jsxs("div", { className: "content-box", children: [content && jsxRuntime.jsx("div", { className: "content", children: content }), description && (jsxRuntime.jsx("div", { className: "description", children: description }))] }))] })) : (jsxRuntime.jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxRuntime.jsxs("div", { className: "content-box", children: [icon && (jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon })), content && jsxRuntime.jsx("div", { className: "content", children: content })] })), description && jsxRuntime.jsx("div", { className: "description", children: description })] })) }));
 });
 FISTableCell.displayName = "FISTableCell";