fis-component 0.0.77 → 0.0.78

package/dist/cjs/types/src/components/CheckboxGroup/index.d.ts

@@ -7,7 +7,7 @@ type Option<T> = {
 };
 type CheckboxGroupProps<T extends Value> = {
     className?: string;
-    groupLabel: string;
+    groupLabel?: string;
     options: Option<T>[] | readonly Option<T>[];
     value: T[];
     direction?: "row" | "column";

package/dist/cjs/types/src/components/Input/InputDate/InputDate.stories.d.ts

@@ -3,3 +3,7 @@ import { InputDateProps } from ".";
 declare const _default: Meta;
 export default _default;
 export declare const Default: (args: InputDateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const YearPicker: (args: InputDateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MonthPicker: (args: InputDateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuarterPicker: (args: InputDateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AllModes: (args: InputDateProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { InputFieldProps } from "../InputField";
 import dayjs from "dayjs";
 import { InputLabelProps } from "../InputLabel";
+export type DatePickerMode = "date" | "month" | "year" | "quarter";
 export interface InputDateProps extends Omit<InputFieldProps, "value" | "onChange">, Partial<InputLabelProps> {
     className?: string | undefined;
     /**Date value*/
@@ -22,6 +23,26 @@ export interface InputDateProps extends Omit<InputFieldProps, "value" | "onChang
     minDate?: dayjs.Dayjs | undefined;
     /**The maximum selectable date. Dates after this value will be disabled.*/
     maxDate?: dayjs.Dayjs | undefined;
+    /**
+     * Picker mode - determines what user can select
+     * - "date": Full date picker (default)
+     * - "month": Month picker only
+     * - "year": Year picker only
+     * - "quarter": Quarter picker only
+     */
+    picker?: DatePickerMode;
+    /**Allow clear functionality*/
+    allowClear?: boolean;
+    /**Show today button*/
+    showToday?: boolean;
+    /**Show time selection*/
+    showTime?: boolean;
+    /**Auto focus when component mounted*/
+    autoFocus?: boolean;
+    /**Disabled date function*/
+    disabledDate?: (current: dayjs.Dayjs) => boolean;
+    /**Custom input format*/
+    inputReadOnly?: boolean;
 }
 declare const FISInputDate: import("react").ForwardRefExoticComponent<InputDateProps & import("react").RefAttributes<HTMLInputElement>>;
 export default FISInputDate;

package/dist/esm/index.js

@@ -71071,9 +71071,23 @@ function mergeRefs(...refs) {
 }
 
 const FISInputDate = 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] = useState(false);
-    const [inputValue, setInputValue] = useState(value ? dayjs(value).format(format) : "");
+    const [inputValue, setInputValue] = useState(value ? dayjs(value).format(finalFormat) : "");
     const [dateValue, setDateValue] = useState(value ? dayjs(value) : null);
     const inputRef = useRef(null);
     const mergeRef = mergeRefs(inputRef, ref);
@@ -71082,28 +71096,30 @@ const FISInputDate = 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());
@@ -71114,7 +71130,7 @@ const FISInputDate = forwardRef((props, ref) => {
             onChange?.(null);
         }
     };
-    return (jsxs(DivWrapperSC$2, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxs(DivInputWrapperSC$1, { children: [jsx(FISInputField, { ...restProps, ref: mergeRef, typeSuffix: "icon", iconSuffix: jsx(DateIcon, {}), value: inputValue, negative: negative, disabled: disabled, onFocus: () => setOpen(true), onChange: handleInputChange, onClickSuffix: () => setOpen(true) }), jsx(HiddenDatePickerSC, { open: open, value: dateValue, onChange: (value) => handleChange(value), onOpenChange: handleOpenChange, format: format, getPopupContainer: getPopupContainer, minDate: minDate, maxDate: maxDate })] }), message && (jsx(DivHintWrapperSC$1, { children: jsx(SpanHintSC$3, { className: classNames({
+    return (jsxs(DivWrapperSC$2, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxs(DivInputWrapperSC$1, { children: [jsx(FISInputField, { ...restProps, ref: mergeRef, typeSuffix: "icon", iconSuffix: jsx(DateIcon, {}), value: inputValue, negative: negative, disabled: disabled, placeholder: restProps.placeholder, readOnly: inputReadOnly, autoFocus: autoFocus, onFocus: () => setOpen(true), onChange: handleInputChange, onClickSuffix: () => setOpen(true) }), 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 && (jsx(DivHintWrapperSC$1, { children: jsx(SpanHintSC$3, { className: classNames({
                         disabled,
                         negative,
                         positive,