@ftdata/ui 0.0.15 → 0.0.17

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;

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

@@ -1,5 +1,21 @@
-import styled_components from "styled-components";
+import styled_components, { keyframes } from "styled-components";
 import { COLOR_ACCENT_MEDIUM, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, FONT_WEIGHT_BOLD } from "@ftdata/f-tokens";
+const slideDown = keyframes`
+  0% {
+    transform: translateY(-0.25rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+`;
+const slideUp = keyframes`
+  0% {
+    transform: translateY(0.25rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+`;
 const SelectDropdown = styled_components.div`
   background-color: ${COLOR_NEUTRAL_DAY};
   border-radius: 0.25rem;
@@ -11,8 +27,10 @@ const SelectDropdown = styled_components.div`
   height: auto;
   z-index: 3;
 
-  top: ${({ position })=>"top" === position ? "auto" : "calc(100% + 0.5rem)"};
-  bottom: ${({ position })=>"top" === position ? "calc(100% + 0.5rem)" : "auto"};
+  animation: ${({ listPosition })=>"top" === listPosition ? slideUp : slideDown}
+    0.18s ease-out;
+  top: ${({ listPosition })=>"top" === listPosition ? "auto" : "calc(100% + 0.5rem)"};
+  bottom: ${({ listPosition })=>"top" === listPosition ? "calc(100% + 0.5rem)" : "auto"};
 
   & > div {
     border-radius: 0.25rem;

package/dist/components/MultiSelect/helpers/addOption.d.ts

@@ -1,5 +1,5 @@
-import { IMultiSelectOption } from "../interfaces/state";
+import { IMultiSelectOption } from "..";
 export declare const addOption: (selected: IMultiSelectOption[], options: IMultiSelectOption[], option: IMultiSelectOption, max?: number) => {
-    selected: IMultiSelectOption[];
-    unselected: IMultiSelectOption[];
+    selected: import("../../Select").ISelectOption[];
+    unselected: import("../../Select").ISelectOption[];
 } | undefined;

package/dist/components/MultiSelect/helpers/computeUnselected.d.ts

@@ -1,2 +1,2 @@
-import { IMultiSelectOption } from "../interfaces/state";
+import { IMultiSelectOption } from "..";
 export declare const computeUnselected: (options: IMultiSelectOption[], selected: IMultiSelectOption[]) => IMultiSelectOption[];

package/dist/components/MultiSelect/helpers/computeUnselected.js

@@ -1,2 +1,2 @@
-const computeUnselected = (options, selected)=>options.filter((opt)=>!selected.some((s)=>s.value === opt.value));
+const computeUnselected = (options, selected)=>options.filter((opt)=>!selected.some((selected)=>selected.value === opt.value));
 export { computeUnselected };

package/dist/components/MultiSelect/helpers/feedbackText.d.ts

@@ -1,4 +1,4 @@
-import { IMultiSelectOption } from "../interfaces/state";
+import { IMultiSelectOption } from "..";
 export declare function feedbackText(translation: (key: string) => string, options: IMultiSelectOption[], filtered: IMultiSelectOption[], selected: IMultiSelectOption[], query: string, max?: number): {
     value: string;
     label: string;

package/dist/components/MultiSelect/helpers/feedbackText.js

@@ -1,27 +1,27 @@
 import { computeUnselected } from "./computeUnselected.js";
 function feedbackText(translation, options, filtered, selected, query, max) {
-    if (!options.length) return [
-        {
-            value: "feedback__",
-            label: translation("no_data_is_available")
-        }
-    ];
     if (max && selected.length >= max) return [
         {
-            value: "feedback__",
+            value: "__feedback",
             label: translation("the_selection_limit_has_been_reached")
         }
     ];
     if (query && !filtered.length) return [
         {
-            value: "feedback__",
+            value: "__feedback",
             label: translation("no_data_was_found")
         }
     ];
+    if (!options.length) return [
+        {
+            value: "__feedback",
+            label: translation("no_data_is_available")
+        }
+    ];
     const unselected = computeUnselected(options, selected);
     if (!query && !unselected.length) return [
         {
-            value: "feedback__",
+            value: "__feedback",
             label: translation("all_were_selected")
         }
     ];

package/dist/components/MultiSelect/helpers/filterOptions.d.ts

@@ -1,2 +1,2 @@
-import { IMultiSelectOption } from "../interfaces/state";
+import { IMultiSelectOption } from "..";
 export declare const filterOptions: (options: IMultiSelectOption[], query: string) => IMultiSelectOption[];

package/dist/components/MultiSelect/helpers/removeOptions.d.ts

@@ -1,5 +1,5 @@
-import { IMultiSelectOption } from "../interfaces/state";
+import { IMultiSelectOption } from "..";
 export declare const removeOption: (selected: IMultiSelectOption[], options: IMultiSelectOption[], option: IMultiSelectOption) => {
-    selected: IMultiSelectOption[];
-    unselected: IMultiSelectOption[];
+    selected: import("../../Select").ISelectOption[];
+    unselected: import("../../Select").ISelectOption[];
 };

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

@@ -1,28 +1,46 @@
 import { InputHTMLAttributes, JSX } from "react";
-import { FieldFeedbackType } from "../../types/feedback";
 import { IconsNames } from "@ftdata/f-icons";
-import { IMultiSelectActions } from "./interfaces/actions";
-import { IMultiSelectState } from "./interfaces/state";
-export interface MultiSelectProps extends InputHTMLAttributes<HTMLDivElement> {
-    disabled?: boolean;
-    helpText?: string;
-    helpIcon?: IconsNames;
-    icon?: IconsNames | JSX.Element;
-    rightItem?: JSX.Element;
+import { FieldFeedbackType } from "../../types/feedback";
+import { ISelectOption } from "../Select";
+export type IMultiSelectOption = ISelectOption;
+export interface MultiSelectProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Texto do label exibido acima do campo. */
     label?: string;
+    /** Texto auxiliar exibido abaixo do label. */
     sublabel?: string;
+    /** Texto de ajuda exibido abaixo do campo. */
+    helpText?: string;
+    /** Ícone exibido junto ao texto de ajuda. */
+    helpIcon?: IconsNames;
+    /** Estado de feedback visual do campo (ex.: erro, sucesso, aviso). */
     feedback?: FieldFeedbackType;
-    clear?: () => void;
-    loading?: boolean;
-    state: IMultiSelectState;
-    actions?: IMultiSelectActions;
-    updateState: (newPartial: Partial<IMultiSelectState>) => void;
-    translation: (key: string) => string;
-    max?: number;
+    /** Define se o campo está desabilitado. */
+    disabled?: boolean;
+    /** Quantidade máxima de itens que podem ser selecionados. */
+    maxItems?: number;
+    /** Define se a opção "Selecionar todos" deve ser exibida. */
     selectAll?: boolean;
-    total?: number;
+    /** Define se a lista de opções está em estado de carregamento. */
+    isLoading?: boolean;
+    /** Lista de opções disponíveis para seleção. */
+    options: IMultiSelectOption[];
+    /** Lista de opções atualmente selecionadas. */
+    selected: IMultiSelectOption[];
+    /** Função chamada sempre que a lista de selecionados for alterada. */
+    onChangeSelected: (selected: IMultiSelectOption[]) => void;
+    /** Função usada para traduzir textos internos do componente. */
+    translation: (key: string) => string;
+    /** Função chamada ao digitar no campo de busca. */
+    onSearch?: (query: string) => void;
+    /** Função chamada ao solicitar mais itens (scroll infinito/paginação). */
     onLoadMore?: () => Promise<void>;
+    /** Ícone exibido à esquerda do input. Pode ser `IconName` ou JSX. */
+    icon?: IconsNames | JSX.Element;
+    /** Define o estilo do componente. `alt` mostra caret, `default` não. */
+    variant?: "default" | "alt";
+    /** Define a posição da lista do componente */
+    listPosition?: "top" | "bottom";
+    /** Executa junto com o toggle da lista */
     toggle?: (open: boolean) => void;
-    dropdownPosition?: "top" | "bottom";
 }
-export default function MultiSelect({ helpText, label, sublabel, required, disabled, feedback, helpIcon, name, translation, state, updateState, placeholder, max, loading, actions, selectAll, total, icon, onLoadMore, toggle, dropdownPosition, ...rest }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelect({ label, sublabel, helpText, helpIcon, feedback, disabled, maxItems, selectAll, isLoading, options, selected, onChangeSelected, translation, onSearch, onLoadMore, placeholder, required, name, icon, listPosition, toggle, variant, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;