@ftdata/ui 0.0.9 → 0.0.11

package/dist/index.js

@@ -10,7 +10,7 @@ import EmptyState from "./components/EmptyState/index.js";
 import Tooltips from "./components/Tooltips/index.js";
 import Collapse from "./components/Collapse/index.js";
 import UserMenu from "./components/UserMenu/index.js";
-import CustomSelect from "./components/CustomSelect/index.js";
+import Select from "./components/Select/index.js";
 import StateAlert from "./components/StateAlert/index.js";
 import MultiSelect from "./components/MultiSelect/index.js";
 import DoubleList from "./components/DoubleList/index.js";
@@ -18,4 +18,4 @@ import Menu from "./components/Menu/index.js";
 import { Input } from "./components/Input/index.js";
 export * from "./components/Grid/index.js";
 export * from "./components/Text/index.js";
-export { Avatar, Breadcrumb, Button, Checkbox, Collapse, CustomSelect, DoubleList, EmptyState, Input, Loading, Menu, MultiSelect, Radio, StateAlert, Switch, TextArea, Tooltips, UserMenu, useLoading };
+export { Avatar, Breadcrumb, Button, Checkbox, Collapse, DoubleList, EmptyState, Input, Loading, Menu, MultiSelect, Radio, Select, StateAlert, Switch, TextArea, Tooltips, UserMenu, useLoading };

package/dist/style/base.css

@@ -92,7 +92,7 @@ button, select {
 }
 
 button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
-  -webkit-appearance: button;
+  appearance: button;
   background-color: #0000;
   background-image: none;
 }
@@ -118,7 +118,7 @@ progress {
 }
 
 [type="search"] {
-  -webkit-appearance: textfield;
+  appearance: textfield;
   outline-offset: -2px;
 }
 
@@ -186,7 +186,6 @@ button, [role="button"] {
 }
 
 img, svg, video, canvas, audio, iframe, embed, object {
-  vertical-align: middle;
   display: block;
 }
 

package/dist/types/feedback.d.ts

@@ -1,3 +1,4 @@
 export type ColorFeedbackType = "success" | "warning" | "danger" | "info" | "neutral";
 export type StateFeedbackType = "loading" | "disabled" | "pending" | "success" | "error";
 export type FeedbackType = ColorFeedbackType | StateFeedbackType;
+export type FieldFeedbackType = "danger" | "success" | "warning";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftdata/ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "exports": {
     ".": {
@@ -30,7 +30,7 @@
   "dependencies": {
     "react-input-mask-next": "3.0.0-alpha.12",
     "react-select": "^5.10.2",
-    "react-window": "^1.8.11",
+    "react-window": "^2.0.2",
     "@ftdata/f-icons": "0.0.2",
     "@ftdata/f-tokens": "0.0.1"
   },

package/dist/components/CustomSelect/CustomSelect.stories.d.ts

@@ -1,73 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import CustomSelect from ".";
-/**
- * CustomSelect permite que os usuários selecionem uma opção em uma lista suspensa customizada.
- * O componente suporta exibição de mensagens de erro, sucesso e ajuda, além de possibilitar a customização do ícone e placeholder.
- */
-declare const meta: Meta<typeof CustomSelect>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-/**
- * Variação padrão do CustomSelect com as propriedades obrigatórias.
- */
-export declare const Default: Story;
-/**
- * Variação interativa do CustomSelect.
- */
-export declare const InteractiveDemo: Story;
-/**
- * Variação padrão do CustomSelect com as opções de textos variados em tamanho.
- */
-export declare const DefaultWithBigTexts: Story;
-/**
- * Variação do CustomSelect pesquisável habilitando o onchange e a variation como "searchable".
- */
-export declare const Searchable: Story;
-/**
- * CustomSelect com texto de ajuda.
- */
-export declare const HelpText: Story;
-/**
- * CustomSelect com chips.
- */
-export declare const Chips: Story;
-/**
- * CustomSelect com Rótulo.
- */
-export declare const Label: Story;
-/**
- * CustomSelect em estado de erro, exibindo uma mensagem de validação.
- */
-export declare const Error: Story;
-/**
- * CustomSelect em estado de sucesso, exibindo uma mensagem de confirmação.
- */
-export declare const Success: Story;
-/**
- * CustomSelect desativado, onde não é possível selecionar opções.
- */
-export declare const Disabled: Story;
-/**
- * Variação do CustomSelect obrigatório.
- */
-export declare const Required: Story;
-/**
- * CustomSelect em estado de loading.
- */
-export declare const Loading: Story;
-/**
- * variação do CustomSelect quando nenhuma opção  é encontrada.
- */
-export declare const Empty: Story;
-/**
- *  Variação do input com readonly
- */
-export declare const Readonly: Story;
-/**
- *  Variação do input com readonly
- */
-export declare const CustomAction: Story;
-/**
- *  Variação do input com readonly
- */
-export declare const DemoCustomAction: Story;

package/dist/components/CustomSelect/CustomSelect.stories.js

@@ -1,477 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import index from "./index.js";
-import { Icon } from "@ftdata/f-icons";
-import { ChipExemple } from "./styles.js";
-import map_sample from "../../assets/img/map-sample.js";
-const meta = {
-    title: "DESIGN COMPONENTS/CustomSelect",
-    component: index,
-    tags: [
-        "autodocs"
-    ],
-    parameters: {
-        layout: "centered"
-    },
-    decorators: [
-        (Story)=>/*#__PURE__*/ jsx("div", {
-                style: {
-                    width: "600px",
-                    height: "350px",
-                    display: "flex",
-                    justifyContent: "center"
-                },
-                children: /*#__PURE__*/ jsx(Story, {})
-            })
-    ],
-    argTypes: {
-        t: {
-            description: "Fun\xe7\xe3o de tradu\xe7\xe3o do i18n."
-        },
-        helpText: {
-            description: "Texto de ajuda exibido abaixo do CustomSelect."
-        },
-        isError: {
-            description: "Define se o conte\xfado do CustomSelect possui um erro de valida\xe7\xe3o."
-        },
-        isSuccess: {
-            description: "Define se o conte\xfado do CustomSelect est\xe1 em estado de sucesso."
-        },
-        label: {
-            description: "R\xf3tulo exibido acima do CustomSelect."
-        },
-        isRequired: {
-            description: "Define se o CustomSelect \xe9 obrigat\xf3rio."
-        },
-        name: {
-            description: "Nome do campo input para formul\xe1rios."
-        },
-        options: {
-            description: "Define as op\xe7\xf5es dispon\xedveis no CustomSelect.",
-            table: {
-                type: {
-                    summary: "Array<{ label: string, value: string, chip?: JSX.Element }>"
-                }
-            }
-        },
-        placeholder: {
-            description: "Texto de placeholder exibido no campo input."
-        },
-        icon: {
-            description: "\xcdcone exibido ao lado do campo de sele\xe7\xe3o.",
-            options: [
-                "none",
-                "icon"
-            ],
-            mapping: {
-                none: null,
-                icon: /*#__PURE__*/ jsx(Icon, {
-                    name: "bld hotel-building",
-                    color: "#8E969B"
-                })
-            }
-        },
-        isLoading: {
-            description: "Define se o CustomSelect est\xe1 em estado de carregamento."
-        },
-        onChange: {
-            description: "Fun\xe7\xe3o chamada quando o valor do campo muda."
-        },
-        readOnly: {
-            description: "Define se o input pode fazer pesquisa ou apenas selecionar op\xe7\xf5es"
-        },
-        variation: {
-            description: "Define a varia\xe7\xe3o do select se \xe9 pesquisavel ou \xe9 padr\xe3o. por\xe9m para a pesquisa \xe9 necess\xe1rio um onChange",
-            table: {
-                type: {
-                    summary: '"searchable" | "default"'
-                }
-            }
-        }
-    }
-};
-const CustomSelect_stories = meta;
-const options = [
-    {
-        value: "1",
-        label: "Op\xe7\xe3o 1"
-    },
-    {
-        value: "2",
-        label: "Op\xe7\xe3o 2"
-    },
-    {
-        value: "3",
-        label: "Op\xe7\xe3o 3"
-    },
-    {
-        value: "4",
-        label: "Op\xe7\xe3o 4"
-    }
-];
-const biggerOptions = [
-    {
-        value: "1",
-        label: "Op\xe7\xe3o 1: Sele\xe7\xe3o padr\xe3o"
-    },
-    {
-        value: "2",
-        label: "Op\xe7\xe3o 2: Detalhes adicionais sobre esta op\xe7\xe3o"
-    },
-    {
-        value: "3",
-        label: "Op\xe7\xe3o 3: Texto m\xe9dio"
-    },
-    {
-        value: "4",
-        label: "Op\xe7\xe3o 4: Informa\xe7\xf5es extensas e abrangentes para testes"
-    },
-    {
-        value: "5",
-        label: "Op\xe7\xe3o 5: Simples"
-    },
-    {
-        value: "6",
-        label: "Op\xe7\xe3o 6: Uma descri\xe7\xe3o bem longa que pode testar a largura do componente"
-    },
-    {
-        value: "7",
-        label: "Op\xe7\xe3o 7: Informa\xe7\xe3o \xfatil"
-    },
-    {
-        value: "8",
-        label: "Op\xe7\xe3o 8: Exemplo"
-    },
-    {
-        value: "9",
-        label: "Op\xe7\xe3o 9: Outro exemplo que \xe9 um pouco mais longo do que o normal"
-    },
-    {
-        value: "10",
-        label: "Op\xe7\xe3o 10: Mais informa\xe7\xf5es sobre o que fazer"
-    }
-];
-const withChips = [
-    {
-        value: "1",
-        label: "Op\xe7\xe3o 1: Sele\xe7\xe3o padr\xe3o",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "2",
-        label: "Op\xe7\xe3o 2: Detalhes adicionais sobre esta op\xe7\xe3o",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "3",
-        label: "Op\xe7\xe3o 3: Texto m\xe9dio",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "4",
-        label: "Op\xe7\xe3o 4: Informa\xe7\xf5es extensas e abrangentes para testes",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "5",
-        label: "Op\xe7\xe3o 5: Simples",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "6",
-        label: "Op\xe7\xe3o 6: Uma descri\xe7\xe3o bem longa que pode testar a largura do componente",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "7",
-        label: "Op\xe7\xe3o 7: Informa\xe7\xe3o \xfatil",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "8",
-        label: "Op\xe7\xe3o 8: Exemplo",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "9",
-        label: "Op\xe7\xe3o 9: Outro exemplo que \xe9 um pouco mais longo do que o normal",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    }
-];
-const enterprises = [
-    {
-        value: "1",
-        label: "TechNova Ltda"
-    },
-    {
-        value: "2",
-        label: "GreenFuture Inc."
-    },
-    {
-        value: "3",
-        label: "Skyline Solutions"
-    },
-    {
-        value: "4",
-        label: "Oceanic Ventures"
-    },
-    {
-        value: "5",
-        label: "BrightWorks Co."
-    },
-    {
-        value: "6",
-        label: "UrbanCore Group"
-    }
-];
-const mockTranslate = (key)=>"not_found_any_data" === key ? "Nenhum dado encontrado" : key;
-const Default = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        t: mockTranslate
-    }
-};
-const InteractiveDemo = {
-    render: ()=>{
-        const [selected, setSelected] = useState(null);
-        return /*#__PURE__*/ jsx("div", {
-            style: {
-                display: "flex",
-                gap: "2rem"
-            },
-            children: /*#__PURE__*/ jsx("div", {
-                style: {
-                    width: "284px"
-                },
-                children: /*#__PURE__*/ jsx(index, {
-                    selected: selected,
-                    setSelected: setSelected,
-                    placeholder: "Selecione ...",
-                    options: enterprises,
-                    t: mockTranslate,
-                    label: `op\xe7\xe3o selecionada: ${selected?.label}`,
-                    variation: "searchable"
-                })
-            })
-        });
-    }
-};
-const DefaultWithBigTexts = {
-    args: {
-        placeholder: "Selecione ...",
-        options: biggerOptions,
-        t: mockTranslate
-    }
-};
-const Searchable = {
-    render: ()=>{
-        const [selected, setSelected] = useState(null);
-        const [searchValue, setSearchValue] = useState("");
-        const handleSearch = (query)=>{
-            setSearchValue(query);
-        };
-        return /*#__PURE__*/ jsxs("div", {
-            style: {
-                display: "flex",
-                gap: "2rem"
-            },
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        width: "284px"
-                    },
-                    children: /*#__PURE__*/ jsx(index, {
-                        selected: selected,
-                        setSelected: setSelected,
-                        placeholder: "Selecione ...",
-                        options: enterprises,
-                        t: mockTranslate,
-                        search: handleSearch,
-                        label: `op\xe7\xe3o selecionada: ${selected?.label}`,
-                        variation: "searchable"
-                    })
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        width: "284px"
-                    },
-                    children: /*#__PURE__*/ jsxs("span", {
-                        style: {
-                            fontFamily: "Inter",
-                            fontSize: "0.875rem",
-                            fontWeight: "500"
-                        },
-                        children: [
-                            "resultado pesquisa customizada: ",
-                            searchValue
-                        ]
-                    })
-                })
-            ]
-        });
-    }
-};
-const HelpText = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        t: mockTranslate,
-        helpText: "texto de ajuda"
-    }
-};
-const Chips = {
-    args: {
-        placeholder: "Selecione ...",
-        options: withChips,
-        t: mockTranslate
-    }
-};
-const Label = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        t: mockTranslate,
-        label: "Label do CustomSelect"
-    }
-};
-const Error = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        isError: true,
-        t: mockTranslate,
-        helpText: "Erro ao selecionar a op\xe7\xe3o."
-    }
-};
-const Success = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        isSuccess: true,
-        t: mockTranslate,
-        helpText: "Mensagem de Sucesso."
-    }
-};
-const Disabled = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        disabled: true,
-        t: mockTranslate
-    }
-};
-const Required = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        isRequired: true,
-        label: "Campo Obrigat\xf3rio",
-        t: mockTranslate
-    }
-};
-const Loading = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        t: mockTranslate,
-        isLoading: true
-    }
-};
-const Empty = {
-    args: {
-        placeholder: "Selecione ...",
-        options: [],
-        t: mockTranslate
-    }
-};
-const Readonly = {
-    args: {
-        placeholder: "Selecione ...",
-        options: biggerOptions,
-        t: mockTranslate,
-        readOnly: true
-    }
-};
-const CustomAction = {
-    args: {
-        placeholder: "Selecione ...",
-        options: [
-            {
-                value: "__custom_action",
-                label: "Clique Aqui",
-                action: ()=>console.log("clicou")
-            },
-            ...options
-        ],
-        t: mockTranslate
-    }
-};
-const DemoCustomAction = {
-    render: ()=>{
-        const [showImage, setShowImage] = useState(false);
-        const [selected, setSelected] = useState(null);
-        const customAction = ()=>setShowImage((prev)=>!prev);
-        return /*#__PURE__*/ jsxs("div", {
-            style: {
-                display: "flex",
-                gap: "2rem"
-            },
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        width: "284px"
-                    },
-                    children: /*#__PURE__*/ jsx(index, {
-                        selected: selected,
-                        setSelected: setSelected,
-                        placeholder: "Selecione ...",
-                        options: [
-                            {
-                                value: "__custom_action",
-                                label: "Toggle Mapa",
-                                action: ()=>customAction()
-                            },
-                            ...options
-                        ],
-                        t: mockTranslate,
-                        label: `Demonstra\xe7\xe3o de a\xe7\xe3o customizada`
-                    })
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        width: "284px"
-                    },
-                    children: showImage && /*#__PURE__*/ jsx("img", {
-                        src: map_sample,
-                        style: {
-                            width: "100%",
-                            height: "100%",
-                            objectFit: "cover",
-                            borderRadius: "0.5rem"
-                        }
-                    })
-                })
-            ]
-        });
-    }
-};
-export { Chips, CustomAction, Default, DefaultWithBigTexts, DemoCustomAction, Disabled, Empty, Error, HelpText, InteractiveDemo, Label, Loading, Readonly, Required, Searchable, Success, CustomSelect_stories as default };

package/dist/components/CustomSelect/CustomSelectList/index.d.ts

@@ -1,10 +0,0 @@
-import { ICustomSelectOption } from "..";
-interface CustomSelectListProps {
-    onClickOption?: (event: React.MouseEvent<HTMLDivElement>, option: ICustomSelectOption) => void;
-    options: ICustomSelectOption[];
-    selectedOption?: ICustomSelectOption | null;
-    isLoading?: boolean;
-    handleCustomAction: (action: () => void) => void;
-}
-declare const CustomSelectList: React.FC<CustomSelectListProps>;
-export default CustomSelectList;

package/dist/components/CustomSelect/CustomSelectList/index.js

@@ -1,66 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FixedSizeList } from "react-window";
-import { LoadingContainer, OptionContainer, SelectDropdown } from "./style.js";
-import Loading from "../../Loading/Loading/index.js";
-import { TooltipWrapper } from "../../TooltipWrapper/index.js";
-const renderRow = ({ data, index, style, onClickOption, selectedOption, showTooltip, hideTooltip, handleCustomAction })=>{
-    const option = data[index];
-    const isSelected = selectedOption ? option.value === selectedOption.value : false;
-    const handleShowTooltip = (event)=>{
-        const target = event.currentTarget.querySelector("span");
-        if (target && target.scrollWidth > target.clientWidth) return void showTooltip(event, option.label);
-    };
-    const handleClick = (event)=>{
-        if (option.action) return void handleCustomAction(option.action);
-        if (onClickOption) onClickOption(event, option);
-    };
-    return /*#__PURE__*/ jsxs(OptionContainer, {
-        style: style,
-        isSelected: isSelected,
-        onMouseEnter: handleShowTooltip,
-        onMouseLeave: hideTooltip,
-        onClick: handleClick,
-        className: option.action ? "action" : "",
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                children: option.label
-            }),
-            option.chip || null
-        ]
-    });
-};
-const CustomSelectList = ({ options, onClickOption, selectedOption, isLoading, handleCustomAction })=>{
-    const OPTION_SIZE = 36;
-    const optionLength = options.length;
-    const height = OPTION_SIZE * (0 === optionLength ? 1 : optionLength >= 7 ? 7 : optionLength);
-    return /*#__PURE__*/ jsx(SelectDropdown, {
-        children: isLoading ? /*#__PURE__*/ jsx(LoadingContainer, {
-            children: /*#__PURE__*/ jsx(Loading, {
-                size: "lg",
-                variant: "light"
-            })
-        }) : /*#__PURE__*/ jsx(TooltipWrapper, {
-            spacing: 18,
-            children: ({ showTooltip, hideTooltip })=>/*#__PURE__*/ jsx(FixedSizeList, {
-                    itemCount: options.length,
-                    itemData: options,
-                    itemSize: 36,
-                    height: height,
-                    width: "100%",
-                    itemKey: (index)=>options[index].value || index,
-                    children: ({ index, style, data })=>renderRow({
-                            data,
-                            index,
-                            style,
-                            onClickOption,
-                            selectedOption,
-                            showTooltip,
-                            hideTooltip,
-                            handleCustomAction
-                        })
-                })
-        })
-    });
-};
-const CustomSelect_CustomSelectList = CustomSelectList;
-export { CustomSelect_CustomSelectList as default };