fis-component 0.0.56 → 0.0.58

package/dist/cjs/index.js

@@ -66357,7 +66357,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%;
@@ -67468,7 +67468,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             onClickMenu?.();
         }
     };
-    return (jsxRuntime.jsxs(DivContainerSC$4, { className: className, children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), group.groupLabel && group.groupLabel !== "" && (jsxRuntime.jsx(FISMenuSection, { label: group.groupLabel })), group.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }));
+    return (jsxRuntime.jsx(DivContainerSC$4, { className: className, children: jsxRuntime.jsxs(DivWrapperMenuSC, { children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsxRuntime.jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }) }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";
 
@@ -70932,6 +70932,19 @@ const FISInputTime = React.forwardRef((props, ref) => {
     const [inputValue, setInputValue] = React.useState("");
     const [timeValue, setTimeValue] = React.useState(null);
     const [isOpen, setIsOpen] = React.useState(false);
+    const containerRef = React.useRef(null);
+    React.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) : "");
@@ -70956,7 +70969,7 @@ const FISInputTime = React.forwardRef((props, ref) => {
             setIsOpen(open);
         }
     };
-    return (jsxRuntime.jsxs(DivContainerSC$2, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsxs(DivInputTimeSC, { children: [jsxRuntime.jsx(FISInputField, { ...rest, ref: ref, typeSuffix: "icon", iconSuffix: jsxRuntime.jsx(TimeIcon, {}), negative: negative, value: inputValue, onChange: handleInputChange, onFocus: handleClickInput, onClickSuffix: handleClickInput }), jsxRuntime.jsx(HiddenTimePickerSC, { format: format, value: timeValue, onChange: handleTimeChange, open: isOpen, onOpenChange: handleOpenChange, getPopupContainer: (triggerNode) => triggerNode.parentElement || document.body })] }), message && (jsxRuntime.jsx(DivHintWrapperSC, { children: jsxRuntime.jsx(SpanHintSC, { className: classNames({
+    return (jsxRuntime.jsxs(DivContainerSC$2, { className: className, ref: containerRef, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsxs(DivInputTimeSC, { children: [jsxRuntime.jsx(FISInputField, { ...rest, ref: ref, typeSuffix: "icon", iconSuffix: jsxRuntime.jsx(TimeIcon, {}), negative: negative, value: inputValue, onChange: handleInputChange, onFocus: handleClickInput, onClickSuffix: handleClickInput }), jsxRuntime.jsx(HiddenTimePickerSC, { format: format, value: timeValue, onChange: handleTimeChange, open: isOpen, onOpenChange: handleOpenChange, getPopupContainer: (triggerNode) => triggerNode.parentElement || document.body })] }), message && (jsxRuntime.jsx(DivHintWrapperSC, { children: jsxRuntime.jsx(SpanHintSC, { className: classNames({
                         disabled: disabled,
                         negative: negative,
                         positive: positive,
@@ -73311,7 +73324,7 @@ function isMenuSize(value) {
     return value === "sm" || value === "md";
 }
 
-const FISSelect = React.forwardRef(({ className, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, searchValue, onSearchChange, portal, ...restProps }, ref) => {
+const FISSelect = React.forwardRef(({ className, style, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, searchValue, onSearchChange, portal, ...restProps }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [referenceElement, setReferenceElement] = React.useState(null);
     const [popperElement, setPopperElement] = React.useState(null);
@@ -73368,9 +73381,6 @@ const FISSelect = React.forwardRef(({ className, size = "md", options, value, di
     const computedDisplayValue = React.useMemo(() => {
         if (multi) {
             const count = value.length;
-            if (count === 0) {
-                return "";
-            }
             return multiDisplayText
                 ? multiDisplayText(count)
                 : `Selected ${count.toString().padStart(2, "0")} option${count !== 1 ? "s" : ""}`;
@@ -73446,7 +73456,7 @@ const FISSelect = React.forwardRef(({ className, size = "md", options, value, di
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [referenceElement, popperElement]);
-    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,
@@ -73470,7 +73480,6 @@ const useToast = () => {
     return context;
 };
 
-// import FISSelect from "../Select";
 const PaginationAntdSC = styled(Pagination) `
   display: flex;
   align-items: center;
@@ -73573,6 +73582,7 @@ const PaginationAntdSC = styled(Pagination) `
     `}
 `;
 const DivPaginationContainer = styled.div `
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -73594,10 +73604,6 @@ const SpanTotalSC = styled.span `
   ${getTheme("Paragraph/Sm")};
   color: ${getTheme("com/pagination/range-number/label/color-text")} !important;
 `;
-// export const SelectPageSizeSC = styled(FISSelect)`
-//   // fixed
-//   width: 100px;
-// `;
 
 const LIMIT_DEFAULT = 10;
 const FISPagination = ({ pageSize = LIMIT_DEFAULT, current = 1, total = 0, minimize, recordCounted, onIconPageRecordClick, showTotal, ...rest }) => {
@@ -73629,7 +73635,7 @@ const FISPagination = ({ pageSize = LIMIT_DEFAULT, current = 1, total = 0, minim
         }
         return originalElement;
     };
-    return (jsxRuntime.jsxs(DivPaginationContainer, { children: [jsxRuntime.jsx(SpanTotalSC, { children: showTotal ? showTotal(total, rangeRecords) : defaultShowTotal }), jsxRuntime.jsxs(DivPaginationContent, { children: [jsxRuntime.jsx(PaginationAntdSC, { ...mergedProps, "$minimize": Boolean(minimize), showSizeChanger: false, itemRender: itemRender }), jsxRuntime.jsx(FISSelect, { size: "xs", options: [
+    return (jsxRuntime.jsxs(DivPaginationContainer, { children: [jsxRuntime.jsx(SpanTotalSC, { children: showTotal ? showTotal(total, rangeRecords) : defaultShowTotal }), jsxRuntime.jsxs(DivPaginationContent, { children: [jsxRuntime.jsx(PaginationAntdSC, { ...mergedProps, "$minimize": Boolean(minimize), showSizeChanger: false, itemRender: itemRender }), jsxRuntime.jsx(FISSelect, { style: { width: "94px" }, size: "xs", options: [
                             {
                                 groupLabel: "",
                                 items: (rest.pageSizeOptions || [10, 20, 50, 100]).map((size) => ({