fis-component 0.0.57 → 0.0.59

package/dist/cjs/types/src/components/Combobox/types.d.ts

@@ -10,7 +10,7 @@ export interface ComboboxOption {
     }[];
 }
 export type SingleSelect<T> = {
-    multi?: boolean;
+    multi?: false;
     value: T;
     onChange: (value: T) => void;
     displayValue?: (value: ComboboxOption) => string;

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

@@ -1,4 +1,5 @@
 import { InputFieldProps } from "../InputField";
+import dayjs from "dayjs";
 import { InputLabelProps } from "../InputLabel";
 export interface InputDateProps extends Omit<InputFieldProps, "value" | "onChange">, Partial<InputLabelProps> {
     /**Date value*/
@@ -11,6 +12,15 @@ export interface InputDateProps extends Omit<InputFieldProps, "value" | "onChang
     positive?: boolean;
     /** Handle on change action */
     onChange?: (date: Date | null) => void;
+    /**
+     * Function that returns the HTML element to render the popup container into.
+     * Useful for controlling where the date picker dropdown is attached in the DOM.
+     */
+    getPopupContainer?: () => HTMLElement;
+    /**The minimum selectable date. Dates before this value will be disabled.*/
+    minDate?: dayjs.Dayjs | undefined;
+    /**The maximum selectable date. Dates after this value will be disabled.*/
+    maxDate?: dayjs.Dayjs | undefined;
 }
 declare const FISInputDate: import("react").ForwardRefExoticComponent<InputDateProps & import("react").RefAttributes<HTMLInputElement>>;
 export default FISInputDate;

package/dist/cjs/types/src/components/MenuSelect/types.d.ts

@@ -1,7 +1,7 @@
 export interface MenuItem {
     label: string;
     description?: string;
-    value: string;
+    value: string | number;
 }
 export interface MenuGroup {
     groupLabel?: string;
@@ -16,8 +16,8 @@ export interface MenuProps {
     multi?: boolean;
     searchValue?: string;
     onSearchChange?: (value: string) => void;
-    selectedValues?: string[];
-    onChangeSelected?: (values: string[]) => void;
+    selectedValues?: (string | number)[];
+    onChangeSelected?: (values: (string | number)[]) => void;
     loading?: boolean;
     noData?: boolean;
     noResult?: boolean;

package/dist/cjs/types/src/components/Select/Select.stories.d.ts

@@ -2,6 +2,7 @@ import { Meta } from "@storybook/react";
 import { SelectProps } from "./types";
 type SingleSelectStoryProps = SelectProps<string>;
 type MultiSelectStoryProps = SelectProps<string>;
+type NumberSelectStoryProps = SelectProps<number>;
 declare const _default: Meta<SingleSelectStoryProps>;
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
@@ -11,3 +12,4 @@ export declare const WithValidation: import("@storybook/core/csf").AnnotatedStor
 export declare const Loading: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
 export declare const LargeSize: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
 export declare const Disabled: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
+export declare const NumberType: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, NumberSelectStoryProps>;

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

@@ -1,3 +1,3 @@
 import { SelectProps } from "./types";
-declare const FISSelect: import("react").ForwardRefExoticComponent<SelectProps<string> & import("react").RefAttributes<HTMLInputElement>>;
+declare const FISSelect: import("react").ForwardRefExoticComponent<SelectProps<string | number> & import("react").RefAttributes<HTMLInputElement>>;
 export default FISSelect;

package/dist/cjs/types/src/components/Select/types.d.ts

@@ -1,7 +1,7 @@
 import { InputLabelProps } from "../Input/InputLabel";
 import { MenuProps } from "../MenuSelect/types";
 import { SelectFieldProps } from "../SelectItem";
-export interface SelectOption<T = string> {
+export interface SelectOption<T = string | number> {
     groupLabel?: string;
     items: {
         label: string;
@@ -9,7 +9,7 @@ export interface SelectOption<T = string> {
         value: T;
     }[];
 }
-type BaseSelectProps<T> = Partial<InputLabelProps> & Omit<MenuProps, "groups" | "multi" | "selectedValues" | "onChangeSelected" | "onClickMenu" | "size"> & Omit<SelectFieldProps, "value" | "onChange"> & {
+type BaseSelectProps<T extends string | number> = Partial<InputLabelProps> & Omit<MenuProps, "groups" | "multi" | "selectedValues" | "onChangeSelected" | "onClickMenu" | "size"> & Omit<SelectFieldProps, "value" | "onChange"> & {
     options: SelectOption<T>[];
     message?: string;
     disabled?: boolean;
@@ -19,17 +19,17 @@ type BaseSelectProps<T> = Partial<InputLabelProps> & Omit<MenuProps, "groups" |
     renderOption?: (option: SelectOption<T>) => React.ReactNode;
     portal?: boolean;
 };
-export type SingleSelectProps<T> = BaseSelectProps<T> & {
+export type SingleSelectProps<T extends string | number> = BaseSelectProps<T> & {
     multi?: false;
     value: T;
     onChange: (value: T) => void;
     displayValue?: (value: SelectOption<T>) => string;
 };
-export type MultiSelectProps<T> = BaseSelectProps<T> & {
+export type MultiSelectProps<T extends string | number> = BaseSelectProps<T> & {
     multi: true;
     value: T[];
     onChange: (value: T[]) => void;
     displayValue?: (value: SelectOption<T>[]) => string;
 };
-export type SelectProps<T> = SingleSelectProps<T> | MultiSelectProps<T>;
+export type SelectProps<T extends string | number> = SingleSelectProps<T> | MultiSelectProps<T>;
 export {};

package/dist/esm/index.js

@@ -62950,6 +62950,7 @@ const FISTab = ({ children, active: propActive, defaultActive, size = "md", clas
                         return (jsxs(DivTabItemSC, { ref: (el) => (tabRefs.current[value] = el), "$isActive": activeKey === value, "$disabled": disabled, "$size": size, className: itemClassName, "$fullWidth": fullWidth, onClick: () => handleTabClick(value, disabled), children: [startIcon, title && jsx(SpanContentSC$1, { children: title }), endIcon] }, value));
                     }), jsx(DivActiveIndicatorSC, { style: indicatorStyle })] }), activeContent && jsx("div", { className: contentClassName, children: activeContent })] }));
 };
+FISTab.displayName = "FISTab";
 
 const DivSegmentedContainerSC = styled.div `
   width: 100%;
@@ -66337,7 +66338,7 @@ const PTitleSC$2 = styled.p `
   ${getTheme("Paragraph/Sm")}
   color: ${getTheme("com/menu/item/action/label/color-text/default")};
 `;
-styled.div `
+const DivWrapperMenuSC = styled.div `
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -67448,7 +67449,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             onClickMenu?.();
         }
     };
-    return (jsxs(DivContainerSC$4, { className: className, children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), group.groupLabel && group.groupLabel !== "" && (jsx(FISMenuSection, { label: group.groupLabel })), group.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }));
+    return (jsx(DivContainerSC$4, { className: className, children: jsxs(DivWrapperMenuSC, { children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }) }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";
 
@@ -70912,6 +70913,19 @@ const FISInputTime = forwardRef((props, ref) => {
     const [inputValue, setInputValue] = useState("");
     const [timeValue, setTimeValue] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
     const handleTimeChange = (time) => {
         setTimeValue(time);
         setInputValue(time ? time.format(format) : "");
@@ -70936,7 +70950,7 @@ const FISInputTime = forwardRef((props, ref) => {
             setIsOpen(open);
         }
     };
-    return (jsxs(DivContainerSC$2, { className: className, 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, 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({
                         disabled: disabled,
                         negative: negative,
                         positive: positive,
@@ -70987,7 +71001,7 @@ function mergeRefs(...refs) {
 }
 
 const FISInputDate = forwardRef((props, ref) => {
-    const { value, textLabel = "", iconLabel, required, message = "", disabled, negative, positive, format = "DD/MM/YYYY", onClickIconLabel, onChange, ...restProps } = props;
+    const { value, textLabel = "", iconLabel, required, message = "", disabled, negative, positive, format = "DD/MM/YYYY", onClickIconLabel, onChange, getPopupContainer, minDate, maxDate, ...restProps } = props;
     const [open, setOpen] = useState(false);
     const [inputValue, setInputValue] = useState(value ? dayjs(value).format(format) : "");
     const [dateValue, setDateValue] = useState(value ? dayjs(value) : null);
@@ -71030,7 +71044,7 @@ const FISInputDate = forwardRef((props, ref) => {
             onChange?.(null);
         }
     };
-    return (jsxs(DivWrapperSC$2, { 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 })] }), message && (jsx(DivHintWrapperSC$1, { children: jsx(SpanHintSC$3, { className: classNames({
+    return (jsxs(DivWrapperSC$2, { 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({
                         disabled,
                         negative,
                         positive,
@@ -73348,9 +73362,6 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
     const computedDisplayValue = useMemo$1(() => {
         if (multi) {
             const count = value.length;
-            if (count === 0) {
-                return "";
-            }
             return multiDisplayText
                 ? multiDisplayText(count)
                 : `Selected ${count.toString().padStart(2, "0")} option${count !== 1 ? "s" : ""}`;
@@ -73552,6 +73563,7 @@ const PaginationAntdSC = styled(Pagination) `
     `}
 `;
 const DivPaginationContainer = styled.div `
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -73604,7 +73616,7 @@ const FISPagination = ({ pageSize = LIMIT_DEFAULT, current = 1, total = 0, minim
         }
         return originalElement;
     };
-    return (jsxs(DivPaginationContainer, { children: [jsx(SpanTotalSC, { children: showTotal ? showTotal(total, rangeRecords) : defaultShowTotal }), jsxs(DivPaginationContent, { children: [jsx(PaginationAntdSC, { ...mergedProps, "$minimize": Boolean(minimize), showSizeChanger: false, itemRender: itemRender }), jsx(FISSelect, { style: { width: "92px" }, size: "xs", options: [
+    return (jsxs(DivPaginationContainer, { children: [jsx(SpanTotalSC, { children: showTotal ? showTotal(total, rangeRecords) : defaultShowTotal }), jsxs(DivPaginationContent, { children: [jsx(PaginationAntdSC, { ...mergedProps, "$minimize": Boolean(minimize), showSizeChanger: false, itemRender: itemRender }), jsx(FISSelect, { style: { width: "94px" }, size: "xs", options: [
                             {
                                 groupLabel: "",
                                 items: (rest.pageSizeOptions || [10, 20, 50, 100]).map((size) => ({