@ftdata/ui 0.0.16 → 0.0.18

package/dist/components/IconButton/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { IconsNames } from "@ftdata/f-icons";
+export type IconButtonVariants = "default" | "accent" | "danger" | "success" | "warning" | "light";
+export type IconButtonSizes = "small" | "medium" | "big";
+interface IconButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    icon: IconsNames;
+    variant?: IconButtonVariants;
+    size?: IconButtonSizes | string;
+    iconSize?: string;
+    color?: string;
+    disabled?: boolean;
+    active?: boolean;
+}
+export default function IconButton({ icon, variant, size, iconSize, color, disabled, active, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/IconButton/index.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { IconButtonStyled } from "./styles.js";
+import { Icon } from "@ftdata/f-icons";
+const SIZE_VARIANTS = {
+    small: {
+        buttonSize: "1.5rem",
+        iconSize: "1rem"
+    },
+    medium: {
+        buttonSize: "2rem",
+        iconSize: "1.5rem"
+    },
+    big: {
+        buttonSize: "2.5rem",
+        iconSize: "2rem"
+    }
+};
+function IconButton({ icon, variant = "default", size = "medium", iconSize, color, disabled = false, active = false, ...rest }) {
+    const isPresetSize = size in SIZE_VARIANTS;
+    const buttonSize = isPresetSize ? SIZE_VARIANTS[size].buttonSize : size;
+    const finalIconSize = iconSize || (isPresetSize ? SIZE_VARIANTS[size].iconSize : "1.5rem");
+    return /*#__PURE__*/ jsx(IconButtonStyled, {
+        variant: variant,
+        size: buttonSize,
+        color: color,
+        disabled: disabled,
+        $active: active,
+        ...rest,
+        children: /*#__PURE__*/ jsx(Icon, {
+            name: icon,
+            size: finalIconSize,
+            color: "currentColor"
+        })
+    });
+}
+export { IconButton as default };

package/dist/components/IconButton/modifiers/color.d.ts

@@ -0,0 +1,36 @@
+export declare const ICON_BUTTON_COLOR_MODIFIERS: {
+    default: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+    accent: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+    danger: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+    success: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+    warning: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+    light: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+};
+export declare const ICON_BUTTON_DISABLED_MODIFIERS: {
+    opacity: number;
+    cursor: string;
+};

package/dist/components/IconButton/modifiers/color.js

@@ -0,0 +1,38 @@
+import { COLOR_ACCENT_LIGHTER, COLOR_ACCENT_MEDIUM, COLOR_DANGER_LIGHTER, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_LIGHTER, COLOR_SUCCESS_LIGHTER, COLOR_SUCCESS_MEDIUM, COLOR_WARNING_LIGHTER, COLOR_WARNING_MEDIUM } from "@ftdata/f-tokens";
+const ICON_BUTTON_COLOR_MODIFIERS = {
+    default: {
+        background: COLOR_NEUTRAL_LIGHTER,
+        color: COLOR_NEUTRAL_DARKER,
+        hover: COLOR_NEUTRAL_LIGHTER
+    },
+    accent: {
+        background: COLOR_ACCENT_LIGHTER,
+        color: COLOR_ACCENT_MEDIUM,
+        hover: COLOR_NEUTRAL_LIGHTER
+    },
+    danger: {
+        background: COLOR_DANGER_LIGHTER,
+        color: COLOR_DANGER_MEDIUM,
+        hover: COLOR_NEUTRAL_LIGHTER
+    },
+    success: {
+        background: COLOR_SUCCESS_LIGHTER,
+        color: COLOR_SUCCESS_MEDIUM,
+        hover: COLOR_NEUTRAL_LIGHTER
+    },
+    warning: {
+        background: COLOR_WARNING_LIGHTER,
+        color: COLOR_WARNING_MEDIUM,
+        hover: COLOR_NEUTRAL_LIGHTER
+    },
+    light: {
+        background: "rgba(255, 255, 255, 0.5)",
+        color: COLOR_NEUTRAL_DAY,
+        hover: "rgba(255, 255, 255, 0.32)"
+    }
+};
+const ICON_BUTTON_DISABLED_MODIFIERS = {
+    opacity: 0.5,
+    cursor: "not-allowed"
+};
+export { ICON_BUTTON_COLOR_MODIFIERS, ICON_BUTTON_DISABLED_MODIFIERS };

package/dist/components/IconButton/styles.d.ts

@@ -0,0 +1,10 @@
+import { IconButtonVariants } from ".";
+interface IconButtonStyledProps {
+    variant: IconButtonVariants;
+    size: string;
+    color?: string;
+    disabled?: boolean;
+    $active?: boolean;
+}
+export declare const IconButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonStyledProps>> & string;
+export {};

package/dist/components/IconButton/styles.js

@@ -0,0 +1,32 @@
+import styled_components from "styled-components";
+import { ICON_BUTTON_COLOR_MODIFIERS, ICON_BUTTON_DISABLED_MODIFIERS } from "./modifiers/color.js";
+import { COLOR_NEUTRAL_DARKER } from "@ftdata/f-tokens";
+const IconButtonStyled = styled_components.button`
+  border-radius: 50%;
+  transition: all 0.15s ease-in-out;
+  width: ${({ size })=>size};
+  height: ${({ size })=>size};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ color })=>color || COLOR_NEUTRAL_DARKER};
+
+  &:hover {
+    background-color: ${({ variant })=>ICON_BUTTON_COLOR_MODIFIERS[variant].hover};
+  }
+
+  &:active {
+    background-color: ${({ variant })=>ICON_BUTTON_COLOR_MODIFIERS[variant].background};
+    color: ${({ variant })=>ICON_BUTTON_COLOR_MODIFIERS[variant].color};
+  }
+
+  ${({ $active, variant })=>$active && `
+    color: ${ICON_BUTTON_COLOR_MODIFIERS[variant].color};
+  `}
+
+  ${({ disabled })=>disabled && `
+    opacity: ${ICON_BUTTON_DISABLED_MODIFIERS.opacity};
+    pointer-events: none;
+  `}
+`;
+export { IconButtonStyled };

package/dist/components/Input/index.d.ts

@@ -10,5 +10,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     textField?: string;
     margin?: string;
     required?: boolean;
+    sublabel?: string;
 }
 export declare const Input: React.FC<InputProps>;

package/dist/components/Input/index.js

@@ -1,18 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { Container, DivIcon, HelpText, InputContainer, InputControl, StyledLabel } from "./styles.js";
+import { Container, DivIcon, InputContainer, InputControl } from "./styles.js";
 import { Icon } from "@ftdata/f-icons";
-const Input = ({ disabled, error, helpText, name, success, width, icon, textField, margin, required, ...rest })=>/*#__PURE__*/ jsxs(Container, {
+import Label from "../fields/components/Label/index.js";
+import HelpText from "../fields/components/HelpText/index.js";
+const Input = ({ disabled, error, helpText, name, success, width, icon, textField, margin, required, sublabel, ...rest })=>/*#__PURE__*/ jsxs(Container, {
         margin: margin,
         children: [
-            textField && /*#__PURE__*/ jsxs(StyledLabel, {
-                htmlFor: name,
-                children: [
-                    textField,
-                    required && /*#__PURE__*/ jsx("span", {
-                        children: "*"
-                    })
-                ]
+            textField && /*#__PURE__*/ jsx(Label, {
+                text: textField,
+                subtext: sublabel,
+                required: required,
+                htmlFor: name
             }),
             /*#__PURE__*/ jsxs(InputContainer, {
                 width: width,
@@ -35,22 +34,9 @@ const Input = ({ disabled, error, helpText, name, success, width, icon, textFiel
                     })
                 ]
             }),
-            helpText && /*#__PURE__*/ jsxs(HelpText, {
-                disabled: disabled,
-                error: error,
-                success: success,
-                children: [
-                    error && /*#__PURE__*/ jsx("div", {
-                        children: /*#__PURE__*/ jsx(Icon, {
-                            name: "ui warning-circle",
-                            size: "1rem",
-                            color: "currentColor"
-                        })
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        children: helpText
-                    })
-                ]
+            helpText && /*#__PURE__*/ jsx(HelpText, {
+                text: helpText,
+                feedback: error ? "danger" : success ? "success" : "info"
             })
         ]
     });

package/dist/components/Input/styles.js

@@ -18,6 +18,7 @@ const TextField = styled_components.span`
 `;
 const Container = styled_components.div`
   display: flex;
+  gap: 0.5rem;
   flex-direction: column;
   box-sizing: border-box;
   margin: ${({ margin })=>margin};
@@ -79,7 +80,6 @@ const HelpText = styled_components.div`
   color: ${({ error, success })=>error ? COLOR_DANGER_MEDIUM : success ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_DARK};
   display: flex;
   gap: 0.25rem;
-  margin-top: 0.5rem;
 
   div {
     height: 1rem;

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from "react";
+export type ModalSizeCustom = {
+    width: string;
+    height: string;
+};
+export type ModalSizes = "small" | "medium" | "large" | ModalSizeCustom;
+export type ModalAction = {
+    onClick: () => void;
+    label: string;
+    shouldClose?: boolean;
+    disabled?: boolean;
+};
+export type ModalActions = {
+    primary?: ModalAction;
+    secondary?: ModalAction;
+};
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: ModalSizes;
+    title?: string;
+    message?: string;
+    closeHandler: () => void;
+    actions?: ModalActions;
+}
+export default function Modal({ children, size, title, message, closeHandler, actions, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal/index.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { ActionsContainer, ContentContainer, ModalContainer } from "./styles.js";
+import { Title } from "../Texts/titles.js";
+import { Paragraph } from "../Texts/paragraphs.js";
+import Button from "../Button/index.js";
+import IconButton from "../IconButton/index.js";
+function Modal({ children, size, title, message, closeHandler, actions }) {
+    const [isClosing, setIsClosing] = useState(false);
+    const handleClose = useCallback(()=>{
+        setIsClosing(true);
+        setTimeout(()=>{
+            closeHandler();
+        }, 200);
+    }, [
+        closeHandler
+    ]);
+    const handleActionClick = useCallback((action)=>{
+        action.onClick();
+        if (action.shouldClose) handleClose();
+    }, [
+        handleClose
+    ]);
+    return /*#__PURE__*/ jsxs(ModalContainer, {
+        size: size,
+        isClosing: isClosing,
+        children: [
+            /*#__PURE__*/ jsx(IconButton, {
+                icon: "ui delete-disabled",
+                size: "small",
+                onClick: handleClose,
+                style: {
+                    position: "absolute",
+                    top: "1rem",
+                    right: "1rem"
+                }
+            }),
+            /*#__PURE__*/ jsxs(ContentContainer, {
+                children: [
+                    title && /*#__PURE__*/ jsx(Title, {
+                        as: "h2",
+                        children: title
+                    }),
+                    message && /*#__PURE__*/ jsx(Paragraph, {
+                        children: message
+                    })
+                ]
+            }),
+            children,
+            actions && /*#__PURE__*/ jsxs(ActionsContainer, {
+                children: [
+                    actions.secondary && /*#__PURE__*/ jsx(Button, {
+                        onClick: ()=>handleActionClick(actions.secondary),
+                        type: "button",
+                        variant: "secondary",
+                        children: actions.secondary.label
+                    }),
+                    actions.primary && /*#__PURE__*/ jsx(Button, {
+                        onClick: ()=>handleActionClick(actions.primary),
+                        type: "button",
+                        variant: "primary",
+                        children: actions.primary.label
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { Modal as default };

package/dist/components/Modal/styles.d.ts

@@ -0,0 +1,8 @@
+import { ModalProps, ModalSizes } from '.';
+export declare const getSize: (size?: ModalSizes) => import("styled-components").RuleSet<object> | undefined;
+export declare const ModalOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Partial<ModalProps> & {
+    isClosing?: boolean;
+}>> & string;
+export declare const ActionsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Modal/styles.js

@@ -0,0 +1,81 @@
+import styled_components, { css, keyframes } from "styled-components";
+import { COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK } from "@ftdata/f-tokens";
+const SIZES = {
+    small: '31.5rem',
+    medium: '42.5rem',
+    large: '53.5rem'
+};
+const slideIn = keyframes`
+  from {
+    opacity: 0.5;
+    transform: translateY(0.625rem) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+`;
+const fadeOut = keyframes`
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+`;
+const getSize = (size)=>{
+    if (!size) return;
+    if ('object' == typeof size) return css`
+      height: ${size.height};
+      width: ${size.width};
+    `;
+    return css`
+      width: ${SIZES[size]};
+    `;
+};
+const ModalOverlay = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DUSK};
+  position: fixed;
+  height: 100vh;
+  opacity: 0.32;
+  right: 0;
+  top: 0;
+  width: 100vw;
+  z-index: 999;
+`;
+const ModalContainer = styled_components.div`
+  display: flex;
+  position: relative;
+  padding: 2rem;
+  box-sizing: border-box;
+  border-radius: 0.5rem;
+  box-shadow: 0px 4px 8px 0px #6b757c52;
+  gap: 2rem;
+  position: relative;
+  flex-direction: column;
+  background-color: ${COLOR_NEUTRAL_DAY};
+  animation: ${({ isClosing })=>isClosing ? fadeOut : slideIn} 0.2s ease-out;
+
+  ${({ size })=>getSize(size)};
+`;
+const ActionsContainer = styled_components.div`
+  display: flex;
+  width: 100%;
+  gap: 1rem;
+  justify-content: flex-end;
+`;
+const ContentContainer = styled_components.div`
+  display: flex;
+  width: 100%;
+  gap: 1.5rem;
+  flex-direction: column;
+
+  h2 {
+    color: ${COLOR_NEUTRAL_DUSK};
+  }
+
+  p {
+    color: ${COLOR_NEUTRAL_DARKER};
+  }
+`;
+export { ActionsContainer, ContentContainer, ModalContainer, ModalOverlay, getSize };

package/dist/components/MultiSelect/components/Badge/index.d.ts

@@ -1,6 +1,7 @@
 interface BadgeProps {
     text: string;
     remove: () => void;
+    disabled?: boolean;
 }
-export default function Badge({ text, remove }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export default function Badge({ text, remove, disabled }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MultiSelect/components/Badge/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { BadgeContainer } from "./styles.js";
 import { Icon } from "@ftdata/f-icons";
-function Badge({ text, remove }) {
+function Badge({ text, remove, disabled }) {
     const [isVisible, setIsVisible] = useState(true);
     const handleRemove = ()=>{
         setIsVisible(false);
@@ -12,12 +12,15 @@ function Badge({ text, remove }) {
     };
     return /*#__PURE__*/ jsxs(BadgeContainer, {
         className: isVisible ? "" : "remove",
+        disabled: disabled,
+        title: text,
         children: [
             /*#__PURE__*/ jsx("span", {
                 children: text
             }),
-            /*#__PURE__*/ jsx("button", {
+            !disabled && /*#__PURE__*/ jsx("button", {
                 onClick: handleRemove,
+                type: "button",
                 children: /*#__PURE__*/ jsx(Icon, {
                     name: "ui delete-disabled",
                     size: "1rem",

package/dist/components/MultiSelect/components/Badge/styles.d.ts

@@ -1 +1,5 @@
-export declare const BadgeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+interface BadgeContainerProps {
+    disabled?: boolean;
+}
+export declare const BadgeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BadgeContainerProps>> & string;
+export {};

package/dist/components/MultiSelect/components/Badge/styles.js

@@ -21,7 +21,7 @@ const popOut = keyframes`
     }
 `;
 const BadgeContainer = styled_components.div`
-  background-color: ${COLOR_NEUTRAL_LIGHTER};
+  background-color: ${({ disabled })=>disabled ? "rgba(0, 0, 0, 0.06)" : COLOR_NEUTRAL_LIGHTER};
   border-radius: 0.25rem;
   display: flex;
   padding: 0.25rem 0.5rem;
@@ -29,6 +29,7 @@ const BadgeContainer = styled_components.div`
   opacity: 0;
   transform: scale(0.8);
   animation: ${popIn} 0.15s forwards;
+  cursor: default;
 
   &.remove {
     animation: ${popOut} 0.15s forwards;

package/dist/components/MultiSelect/components/MultiSelectList/Row/index.d.ts

@@ -1,7 +1,8 @@
 import { type RowComponentProps } from "react-window";
-import { IMultiSelectOption } from "../../../interfaces/state";
-export default function Row({ index, style, options, onClickOption, addAll, }: RowComponentProps<{
+import { IMultiSelectOption } from "../../..";
+export default function Row({ index, style, options, onClickOption, addAll, translation, }: RowComponentProps<{
     options: IMultiSelectOption[];
     onClickOption?: (event: React.MouseEvent<HTMLDivElement>, option: IMultiSelectOption) => void;
     addAll?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    translation: (key: string) => string;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/components/MultiSelect/components/MultiSelectList/Row/index.js

@@ -1,9 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { OptionContainer, SkeletonLine } from "./style.js";
-function Row({ index, style, options, onClickOption, addAll }) {
+import { jsx } from "react/jsx-runtime";
+import { OptionContainer } from "./style.js";
+function Row({ index, style, options, onClickOption, addAll, translation }) {
     const option = options[index];
     const hasSelectAll = "__select_all" === option.value;
+    const isLoading = "__loading__" === option.value;
     const handleClick = (event)=>{
+        if (isLoading) return;
         if (hasSelectAll) {
             console.log(addAll);
             addAll?.(event);
@@ -11,16 +13,25 @@ function Row({ index, style, options, onClickOption, addAll }) {
         }
         onClickOption?.(event, option);
     };
-    return /*#__PURE__*/ jsxs(OptionContainer, {
+    if (isLoading) return /*#__PURE__*/ jsx(OptionContainer, {
+        style: style,
+        className: "__loading",
+        title: translation("loading_more"),
+        children: /*#__PURE__*/ jsx("span", {
+            style: {
+                opacity: 0.6
+            },
+            children: translation("loading_more")
+        })
+    });
+    return /*#__PURE__*/ jsx(OptionContainer, {
         style: style,
         onClick: handleClick,
         className: hasSelectAll ? "__select_all" : "",
-        children: [
-            "__loading__" !== option.value && /*#__PURE__*/ jsx("span", {
-                children: option.label
-            }),
-            "__loading__" === option.value && /*#__PURE__*/ jsx(SkeletonLine, {})
-        ]
+        title: option.label,
+        children: /*#__PURE__*/ jsx("span", {
+            children: option.label
+        })
     });
 }
 export { Row as default };

package/dist/components/MultiSelect/components/MultiSelectList/Row/style.js

@@ -19,7 +19,6 @@ const OptionContainer = styled_components.div`
   }
 
   span {
-    max-width: 80%;
     color: ${COLOR_NEUTRAL_DARKER};
     font-size: 0.875rem;
     line-height: 1.25rem;

package/dist/components/MultiSelect/components/MultiSelectList/index.d.ts

@@ -1,4 +1,4 @@
-import { IMultiSelectOption } from "../../interfaces/state";
+import { IMultiSelectOption } from "../..";
 interface MultiSelectListProps {
     onClickOption?: (event: React.MouseEvent<HTMLDivElement>, option: IMultiSelectOption) => void;
     options: IMultiSelectOption[];
@@ -6,7 +6,7 @@ interface MultiSelectListProps {
     addAll?: (event: React.MouseEvent<HTMLDivElement>) => void;
     translation: (key: string) => string;
     onLoadMore?: () => Promise<void>;
-    dropdownPosition?: "top" | "bottom";
+    listPosition?: "top" | "bottom";
 }
-export default function MultiSelectList({ options, onClickOption, loading, addAll, translation, onLoadMore, dropdownPosition, }: MultiSelectListProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelectList({ options, onClickOption, loading, addAll, translation, onLoadMore, listPosition, }: MultiSelectListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MultiSelect/components/MultiSelectList/index.js

@@ -3,8 +3,8 @@ import { List } from "react-window";
 import Row from "./Row/index.js";
 import { LoadingContainer, SelectDropdown } from "./style.js";
 import Loading from "../../../Loading/index.js";
-import { useCallback, useState } from "react";
-function MultiSelectList({ options, onClickOption, loading, addAll, translation, onLoadMore, dropdownPosition = "bottom" }) {
+import { useState } from "react";
+function MultiSelectList({ options, onClickOption, loading, addAll, translation, onLoadMore, listPosition = "bottom" }) {
     const [lastIndex, setLastIndex] = useState(0);
     const [loadingMore, setLoadingMore] = useState(false);
     const selectAll = {
@@ -18,7 +18,7 @@ function MultiSelectList({ options, onClickOption, loading, addAll, translation,
     const OPTION_SIZE = 36;
     const optionLength = allOptions.length;
     const height = OPTION_SIZE * (0 === optionLength ? 1 : optionLength >= 7 ? 7 : optionLength);
-    const onItemsRendered = useCallback(async ({ stopIndex })=>{
+    const onItemsRendered = async ({ stopIndex })=>{
         const isAtEnd = stopIndex >= (addAll ? options.length : options.length - 1);
         if (loadingMore) return;
         try {
@@ -30,17 +30,13 @@ function MultiSelectList({ options, onClickOption, loading, addAll, translation,
         } finally{
             setLoadingMore(false);
         }
-    }, [
-        options.length,
-        onLoadMore,
-        lastIndex
-    ]);
+    };
     const loadingOption = {
         value: "__loading__",
-        label: "loading"
+        label: translation("loading_more")
     };
     return /*#__PURE__*/ jsx(SelectDropdown, {
-        position: dropdownPosition,
+        listPosition: listPosition,
         children: loading ? /*#__PURE__*/ jsx(LoadingContainer, {
             children: /*#__PURE__*/ jsx(Loading, {
                 size: "lg",
@@ -56,7 +52,8 @@ function MultiSelectList({ options, onClickOption, loading, addAll, translation,
                     loadingOption
                 ] : allOptions,
                 onClickOption,
-                addAll
+                addAll,
+                translation
             },
             style: {
                 height: `${height / 16}rem`,

package/dist/components/MultiSelect/components/MultiSelectList/style.d.ts

@@ -1,5 +1,5 @@
 interface SelectDropdownProps {
-    position?: "top" | "bottom";
+    listPosition?: "top" | "bottom";
 }
 export declare const SelectDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectDropdownProps>> & string;
 export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;