@ftdata/ui 0.0.9 → 0.0.11

package/dist/components/MultiSelect/index.js

@@ -1,282 +1,216 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { BadgesContainer, HelpText, LabelContainer, MaxItemsIndicator, MultiSelectContainer, MultiSelectWrapper, ResizableInput } from "./styles.js";
-import Badge from "./Badge/index.js";
-import MultiSelectList from "./MultiSelectList/index.js";
-import calcTextSize from "./calcTextSize.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { BadgesContainer, LabelContainer, MaxItemsIndicator, MultiSelectContainer, MultiSelectWrapper, ResizableInput } from "./styles.js";
+import Label from "../fields/components/Label/index.js";
+import { getHelpTextFeedbackType } from "../fields/helpers/getFeedbackType.js";
 import { Icon } from "@ftdata/f-icons";
-function MultiSelect({ helpText, label, isLoading, name, onChangeItems, optional, options, required, maxItems, placeholder, selectAll, isError, value = [], isSuccess, translation, ...rest }) {
-    const [unselected, setUnselected] = useState([]);
-    const [selected, setSelected] = useState([]);
-    const [filtered, setFiltered] = useState([]);
+import HelpText from "../fields/components/HelpText/index.js";
+import MultiSelectList from "./MultiSelectList/index.js";
+import Badge from "./Badge/index.js";
+import { addOption } from "./helpers/addOption.js";
+import { removeOption } from "./helpers/removeOptions.js";
+import { computeUnselected } from "./helpers/computeUnselected.js";
+import { filterOptions } from "./helpers/filterOptions.js";
+import { feedbackText } from "./helpers/feedbackText.js";
+import { COLOR_NEUTRAL_DARK } from "@ftdata/f-tokens";
+import RotateButton from "../fields/components/RotateButton/index.js";
+import calcTextSize from "./helpers/calcTextSize.js";
+function MultiSelect({ helpText, label, sublabel, required, disabled, feedback, helpIcon, name, translation, state, updateState, placeholder, max, loading, actions, selectAll, total, icon, onLoadMore }) {
     const [showList, setShowList] = useState(false);
-    const [inputValue, setInputValue] = useState("");
+    const [query, setQuery] = useState("");
     const [inputSize, setInputSize] = useState(0);
-    const [isFocused, setIsFocused] = useState(false);
-    const prevOptionsRef = useRef([]);
-    const valueRef = useRef([]);
     const inputRef = useRef(null);
     const containerRef = useRef(null);
-    const notFound = {
-        value: "",
-        label: translation("no_data_was_found")
-    };
-    const allSelected = {
-        value: "",
-        label: translation("all_were_selected")
-    };
-    const maxLimit = {
-        value: "",
-        label: translation("the_selection_limit_has_been_reached")
-    };
-    const empty = {
-        value: "",
-        label: translation("no_data_is_available")
-    };
-    const computedOptions = ()=>{
-        if (0 === options.length) return [
-            empty
-        ];
-        if (maxItems && maxItems > 0 && maxItems === selected.length) return [
-            maxLimit
-        ];
-        if ("" !== inputValue) return filtered;
-        if (unselected.length > 0) return unselected;
-        return [
-            allSelected
-        ];
-    };
-    const removeSelected = (value)=>{
-        const newSelected = selected.filter((option)=>option.value !== value);
-        setSelected(newSelected);
-        inputRef.current?.focus();
-        setIsFocused(true);
-    };
-    const addSelected = (event, option)=>{
-        event.stopPropagation();
-        if (maxItems && selected.length === maxItems) return void setUnselected([]);
-        if (0 === unselected.length) return;
-        setFiltered([]);
-        setInputValue("");
-        setSelected((prev)=>[
-                ...prev,
-                option
-            ]);
-        inputRef.current?.focus();
-        setIsFocused(true);
-    };
-    const addSelectedByEnter = (option)=>{
-        if (maxItems && selected.length === maxItems) return void setUnselected([]);
-        if (0 === unselected.length) return;
-        setFiltered([]);
-        setInputValue("");
+    const { selected, options, filtered, unselected } = state;
+    const handleAddOption = (option)=>{
+        const result = addOption(selected, options, option, max);
+        if (!result) return;
+        setQuery("");
         setInputSize(1);
-        setSelected((prev)=>[
-                ...prev,
-                option
-            ]);
+        updateState({
+            ...result,
+            filtered: []
+        });
         inputRef.current?.focus();
-        setIsFocused(true);
-    };
-    const toggleList = ()=>{
-        if (!inputRef.current) {
-            setShowList(false);
-            setIsFocused(false);
-            return;
-        }
-        if (showList) {
-            setShowList(false);
-            inputRef.current.blur();
-            setIsFocused(false);
-            return;
-        }
-        setShowList(true);
-        inputRef.current.focus();
-        setIsFocused(true);
-    };
-    const handleClickOutside = (event)=>{
-        if (containerRef.current && containerRef.current.contains(event.target)) return;
-        setShowList(false);
-        setIsFocused(false);
     };
-    const filter = (event)=>{
-        if (!event.target.value) return void setFiltered([]);
-        const valueNormalized = event.target.value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-        const newFiltered = unselected.filter((option)=>{
-            const labelNormalized = option.label.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-            return labelNormalized.includes(valueNormalized);
+    const handleRemoveOption = (option)=>{
+        const result = removeOption(selected, options, option);
+        updateState({
+            ...result,
+            filtered: []
         });
-        if (newFiltered.length > 0) return void setFiltered(newFiltered);
-        setFiltered([
-            notFound
-        ]);
+    };
+    const removeLast = ()=>{
+        if (!selected.length || query) return;
+        handleRemoveOption(selected[selected.length - 1]);
     };
     const handleChange = (event)=>{
-        filter(event);
+        const value = event.target.value;
+        setQuery(value);
         const textStyle = "500 14px Inter";
-        const newInputSize = calcTextSize(event.target.value, textStyle, "rem");
+        const newInputSize = calcTextSize(value, textStyle, "rem");
         if (newInputSize) setInputSize(newInputSize);
-        setInputValue(event.target.value);
-    };
-    const removeLast = ()=>{
-        if (0 === selected.length) return;
-        if ("" !== inputValue) return;
-        const idx = selected.length - 1;
-        const newSelected = selected.slice(0, idx);
-        setSelected(newSelected);
+        if (!value) return updateState({
+            filtered: []
+        });
+        if (actions.search) return void actions.search(value);
+        updateState({
+            filtered: filterOptions(computeUnselected(options, selected), value)
+        });
     };
     const handleKeyDown = (event)=>{
         if ("Backspace" === event.key) removeLast();
         if ("Enter" === event.key) {
-            if (filtered.length > 0) return void addSelectedByEnter(filtered[0]);
-            if (unselected.length > 0) return void addSelectedByEnter(unselected[0]);
+            const available = filtered.length ? filtered : computeUnselected(options, selected);
+            if (available[0]) handleAddOption(available[0]);
         }
     };
-    const handleClearAll = (event)=>{
-        event.preventDefault();
-        setSelected([]);
+    const currentDataOptions = useMemo(()=>{
+        const feedbackOptions = feedbackText(translation, options, filtered, selected, query, max);
+        if (feedbackOptions.length) return feedbackOptions;
+        if (filtered.length) return filtered;
+        return computeUnselected(options, selected);
+    }, [
+        query,
+        filtered,
+        selected,
+        options,
+        max
+    ]);
+    const handleClickOutside = (event)=>{
+        if (containerRef.current && !containerRef.current.contains(event.target)) setShowList(false);
     };
+    const clearSelected = ()=>updateState({
+            selected: []
+        });
     const handleAddAll = (event)=>{
         event.preventDefault();
-        if (maxItems && maxItems > 0) return setSelected(options.slice(0, maxItems));
-        setSelected(options);
+        if (max) {
+            if (selected.length) {
+                const index = selected.length - max;
+                const toAdd = unselected.slice(0, index);
+                updateState({
+                    selected: [
+                        ...selected,
+                        ...toAdd
+                    ],
+                    unselected: []
+                });
+                return;
+            }
+            updateState({
+                selected: options.slice(0, max),
+                unselected: []
+            });
+            return;
+        }
+        updateState({
+            selected: options,
+            unselected: []
+        });
     };
-    const canShowSelectAll = ()=>{
+    const canShowSelectAll = useMemo(()=>{
         if (!selectAll) return;
-        if (selected.length === options.length) return;
-        if (0 !== filtered.length) return;
-        if (maxItems && 0 === maxItems || maxItems === selected.length) return;
+        if (selected.length === total || selected.length === options.length) return;
+        if (query) return;
+        if (max && max === selected.length) return;
         return handleAddAll;
-    };
-    useEffect(()=>{
-        if (showList) document.addEventListener("click", handleClickOutside, true);
-        return ()=>{
-            document.removeEventListener("click", handleClickOutside, true);
-        };
-    }, [
-        showList
-    ]);
-    useEffect(()=>{
-        if (0 === selected.length) return void setUnselected(options);
-        const newUnselected = options.filter((option)=>!selected.some((opt)=>opt.value === option.value));
-        setUnselected(newUnselected);
     }, [
-        selected
+        query,
+        filtered,
+        selected,
+        options,
+        max
     ]);
     useEffect(()=>{
-        if (onChangeItems) onChangeItems(selected);
+        if (showList) document.addEventListener("mousedown", handleClickOutside);
+        return ()=>document.removeEventListener("mousedown", handleClickOutside);
     }, [
-        selected
-    ]);
-    useEffect(()=>{
-        if (value.length) return;
-        if (JSON.stringify(prevOptionsRef.current) !== JSON.stringify(options)) {
-            setUnselected(options);
-            prevOptionsRef.current = options;
-        }
-    }, [
-        options
-    ]);
-    useEffect(()=>{
-        if (JSON.stringify(valueRef.current) !== JSON.stringify(value)) {
-            valueRef.current = value;
-            if (value.length > 0) {
-                const newUnselected = [
-                    ...options.filter((opt)=>!value.includes(opt)),
-                    ...value.filter((opt)=>!options.includes(opt))
-                ];
-                setSelected(value);
-                setUnselected(newUnselected);
-            }
-        }
-    }, [
-        value
+        showList
     ]);
+    const feedBackHelpText = getHelpTextFeedbackType(feedback, disabled);
+    const toggleList = (event)=>{
+        event.stopPropagation();
+        setShowList((prev)=>!prev);
+    };
+    const handleClickContainer = (event)=>{
+        event.stopPropagation();
+        if (!showList) setShowList(true);
+        inputRef.current?.focus();
+    };
     return /*#__PURE__*/ jsxs(MultiSelectWrapper, {
-        ref: containerRef,
         children: [
             /*#__PURE__*/ jsxs(LabelContainer, {
-                required: required,
                 children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        children: [
-                            /*#__PURE__*/ jsx("label", {
-                                htmlFor: name,
-                                children: label
-                            }),
-                            optional && /*#__PURE__*/ jsx("span", {
-                                children: optional
-                            }),
-                            required && /*#__PURE__*/ jsx("span", {
-                                children: "*"
-                            })
-                        ]
+                    label && /*#__PURE__*/ jsx(Label, {
+                        text: label,
+                        subtext: sublabel,
+                        required: required,
+                        htmlFor: name
                     }),
-                    selected.length > 3 && /*#__PURE__*/ jsx("button", {
-                        onClick: handleClearAll,
+                    selected.length > 0 && /*#__PURE__*/ jsx("button", {
+                        onClick: clearSelected,
                         children: translation("remove_all")
                     })
                 ]
             }),
             /*#__PURE__*/ jsxs(MultiSelectContainer, {
-                onClick: toggleList,
-                isFocused: isFocused,
-                isSuccess: isSuccess,
-                isError: isError,
+                ref: containerRef,
+                onClick: handleClickContainer,
+                feedback: feedback,
+                disabled: disabled,
+                $active: showList,
                 children: [
+                    "string" == typeof icon ? /*#__PURE__*/ jsx(Icon, {
+                        name: icon,
+                        color: COLOR_NEUTRAL_DARK
+                    }) : icon,
                     /*#__PURE__*/ jsxs(BadgesContainer, {
                         children: [
-                            selected && /*#__PURE__*/ jsx(Fragment, {
-                                children: selected.map((option)=>/*#__PURE__*/ jsx(Badge, {
-                                        text: option.label,
-                                        remove: ()=>removeSelected(option.value)
-                                    }, option.value))
-                            }),
+                            selected.map((option)=>/*#__PURE__*/ jsx(Badge, {
+                                    text: option.label,
+                                    remove: ()=>handleRemoveOption(option)
+                                }, option.value)),
                             /*#__PURE__*/ jsx(ResizableInput, {
                                 type: "text",
                                 name: name,
                                 placeholder: selected.length ? "" : placeholder,
                                 ref: inputRef,
-                                value: inputValue,
+                                value: query,
                                 onKeyDown: handleKeyDown,
                                 onChange: handleChange,
                                 size: inputSize,
-                                wide: 0 === selected.length,
-                                ...rest
+                                wide: 0 === selected.length
                             })
                         ]
                     }),
-                    maxItems && maxItems > 0 ? /*#__PURE__*/ jsx(MaxItemsIndicator, {
+                    /*#__PURE__*/ jsx(RotateButton, {
+                        rotate: showList,
+                        onClick: toggleList
+                    }),
+                    !!max && /*#__PURE__*/ jsx(MaxItemsIndicator, {
                         children: /*#__PURE__*/ jsxs("span", {
                             children: [
                                 selected.length,
                                 "/",
-                                maxItems
+                                max
                             ]
                         })
-                    }) : "",
+                    }),
                     showList && /*#__PURE__*/ jsx(MultiSelectList, {
-                        options: computedOptions(),
-                        onClickOption: options.length ? addSelected : ()=>null,
-                        isLoading: isLoading,
-                        addAll: canShowSelectAll(),
-                        translation: translation
+                        options: currentDataOptions,
+                        translation: translation,
+                        onClickOption: (e, option)=>handleAddOption(option),
+                        loading: loading,
+                        addAll: canShowSelectAll,
+                        onLoadMore: onLoadMore
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxs(HelpText, {
-                isError: isError,
-                isSuccess: isSuccess,
-                children: [
-                    isError && /*#__PURE__*/ jsx(Icon, {
-                        name: "ui warning-circle",
-                        size: "1rem",
-                        color: "currentColor"
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        children: helpText
-                    })
-                ]
+            helpText && /*#__PURE__*/ jsx(HelpText, {
+                text: helpText,
+                feedback: feedBackHelpText,
+                icon: helpIcon
             })
         ]
     });

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

@@ -1,3 +1,4 @@
+import { FieldFeedbackType } from '../../types/feedback';
 export declare const MultiSelectWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 interface labelProps {
     required?: boolean;
@@ -8,6 +9,11 @@ interface MultiSelectContainerProps {
     isError?: boolean;
     isSuccess?: boolean;
 }
+interface MultiSelectContainerProps {
+    feedback?: FieldFeedbackType;
+    disabled?: boolean;
+    $active?: boolean;
+}
 export declare const MultiSelectContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, MultiSelectContainerProps>> & string;
 export declare const BadgesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 interface ResizableInputProps {
@@ -16,9 +22,4 @@ interface ResizableInputProps {
 }
 export declare const ResizableInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, ResizableInputProps>> & string;
 export declare const MaxItemsIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-interface HelpTextProps {
-    isError?: boolean;
-    isSuccess?: boolean;
-}
-export declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HelpTextProps>> & string;
 export {};

package/dist/components/MultiSelect/styles.js

@@ -1,5 +1,6 @@
 import styled_components, { keyframes } from "styled-components";
-import { COLOR_ACCENT_DARK, COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
+import { COLOR_ACCENT_DARK, COLOR_ACCENT_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
+import { selectColorModifier } from "../fields/modifiers/selectColorModifier.js";
 const MultiSelectWrapper = styled_components.div`
   display: flex;
   flex-direction: column;
@@ -18,34 +19,13 @@ const showButton = keyframes`
 `;
 const LabelContainer = styled_components.div`
   display: flex;
-  gap: ${({ required })=>required ? "0" : "0.5rem"};
+  gap: ${({ required })=>required ? '0' : '0.5rem'};
   position: relative;
   justify-content: space-between;
   align-items: flex-end;
 
-  div {
-    max-width: 70%;
-  }
-
-  label {
-    color: ${COLOR_NEUTRAL_DUSK};
-    font-size: 0.875rem;
-    font-weight: ${FONT_WEIGHT_BOLD};
-    line-height: 1rem;
-    white-space: normal;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-  }
-
-  span {
-    margin-left: ${({ required })=>required ? "0" : "0.5rem"};
-    color: ${({ required })=>required ? COLOR_DANGER_MEDIUM : COLOR_NEUTRAL_DARK};
-    font-size: 0.875rem;
-    font-weight: ${FONT_WEIGHT_BOLD};
-    line-height: 1rem;
-  }
-
   button {
+    white-space: nowrap;
     color: ${COLOR_ACCENT_MEDIUM};
     font-size: 0.875rem;
     font-weight: ${FONT_WEIGHT_BOLD};
@@ -58,48 +38,34 @@ const LabelContainer = styled_components.div`
     }
   }
 `;
-const boxShadows = {
-    focused: {
-        default: `inset 0 0 0 2px ${COLOR_NEUTRAL_MEDIUM}`,
-        error: `inset 0 0 0 2px ${COLOR_DANGER_MEDIUM}`,
-        success: `inset 0 0 0 2px ${COLOR_SUCCESS_MEDIUM}`
-    },
-    blurred: {
-        default: `inset 0 0 0 1px ${COLOR_NEUTRAL_MEDIUM}`,
-        error: `inset 0 0 0 1px ${COLOR_DANGER_MEDIUM}`,
-        success: `inset 0 0 0 1px ${COLOR_SUCCESS_MEDIUM}`
-    }
-};
-const verifyBoxShadow = (isFocused, isError, isSuccess)=>{
-    if (isFocused) {
-        if (isError) return boxShadows.focused.error;
-        if (isSuccess) return boxShadows.focused.success;
-        return boxShadows.focused.default;
-    }
-    if (!isFocused) {
-        if (isError) return boxShadows.blurred.error;
-        if (isSuccess) return boxShadows.blurred.success;
-        return boxShadows.blurred.default;
-    }
-    return `inset 0 0 0 1px ${COLOR_NEUTRAL_MEDIUM}`;
-};
 const MultiSelectContainer = styled_components.div`
   background-color: ${COLOR_NEUTRAL_DAY};
-  box-shadow: ${({ isFocused, isError, isSuccess })=>verifyBoxShadow(isFocused, isError, isSuccess)};
   border-radius: 0.25rem;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  padding: 0.5rem;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
   width: 100%;
+  box-shadow: 0 0 0
+    ${({ $active })=>$active ? '2px' : '1px'}${COLOR_NEUTRAL_MEDIUM};
   position: relative;
+
+  &:focus-within {
+    box-shadow: 0px 0px 0px 2px ${COLOR_NEUTRAL_MEDIUM};
+  }
+
+  ${({ disabled, feedback, $active })=>disabled ? `
+          background-color: ${COLOR_NEUTRAL_LIGHTER};
+          box-shadow: 0 0 0 1px ${COLOR_NEUTRAL_MEDIUM};
+          cursor: not-allowed;
+        ` : selectColorModifier(feedback, $active)}
 `;
 const BadgesContainer = styled_components.div`
   background-color: ${COLOR_NEUTRAL_DAY};
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  width: 100%;
+  flex: 1;
   max-height: 160px;
   overflow-y: auto;
 
@@ -127,7 +93,7 @@ const ResizableInput = styled_components.input`
   line-height: 1rem;
   font-weight: ${FONT_WEIGHT_MEDIUM};
   padding: 0.25rem 0;
-  width: ${({ size, wide })=>wide ? "100%" : size ? `${size}rem` : "1rem"};
+  width: ${({ size, wide })=>wide ? '100%' : size ? `${size}rem` : '1rem'};
 
   &::placeholder {
     color: ${COLOR_NEUTRAL_DARK};
@@ -150,16 +116,4 @@ const MaxItemsIndicator = styled_components.div`
     font-weight: ${FONT_WEIGHT_BOLD};
   }
 `;
-const HelpText = styled_components.div`
-  color: ${({ isError, isSuccess })=>isError ? COLOR_DANGER_MEDIUM : isSuccess ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_DARK};
-  display: flex;
-  gap: 0.25rem;
-  align-items: center;
-
-  span {
-    font-size: 0.875rem;
-    line-height: 1rem;
-    font-weight: ${FONT_WEIGHT_MEDIUM};
-  }
-`;
-export { BadgesContainer, HelpText, LabelContainer, MaxItemsIndicator, MultiSelectContainer, MultiSelectWrapper, ResizableInput };
+export { BadgesContainer, LabelContainer, MaxItemsIndicator, MultiSelectContainer, MultiSelectWrapper, ResizableInput };

package/dist/components/Select/List/Row/index.d.ts

@@ -0,0 +1,11 @@
+import { type RowComponentProps } from "react-window";
+import { ISelectOption } from "../..";
+export interface RowProps {
+    data: ISelectOption[];
+    onClickOption?: (event: React.MouseEvent<HTMLDivElement>, option: ISelectOption) => void;
+    selectedOption?: ISelectOption | null;
+    showTooltip: (event: React.MouseEvent<HTMLDivElement>, text: string) => void;
+    hideTooltip: () => void;
+    handleCustomAction: (action: () => void) => void;
+}
+export default function Row({ index, style, data, onClickOption, selectedOption, showTooltip, hideTooltip, handleCustomAction, }: RowComponentProps<RowProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/List/Row/index.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OptionContainer } from "./style.js";
+function Row({ index, style, data, 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
+        ]
+    });
+}
+export { Row as default };

package/dist/components/{CustomSelect/CustomSelectList → Select/List/Row}/style.d.ts

@@ -1,8 +1,6 @@
-export declare const SelectDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 interface OptionContainerProps {
     isSelected?: boolean;
 }
 export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, OptionContainerProps>> & 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;
 export declare const CustomAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "isSelected"> & OptionContainerProps, never>> & string;
 export {};