@ftdata/ui 0.0.9 → 0.0.10

package/dist/components/Menu/styles.js

@@ -1,26 +1,6 @@
 import styled_components, { keyframes } from "styled-components";
 import { generateColorScale } from "./helpers/generateColorScale.js";
 import { getLuminance } from "./helpers/getLuminance.js";
-const shrinkToRight = keyframes`
-  from {
-    transform: scaleX(1);
-    opacity: 1;
-  }
-  to {
-    transform: scaleX(0);
-    opacity: 0;
-  }
-`;
-const growFromRight = keyframes`
-  from {
-    transform: scaleX(0);
-    opacity: 0;
-  }
-  to {
-    transform: scaleX(1);
-    opacity: 1;
-  }
-`;
 const fadeOutAndHide = keyframes`
   0% {
     opacity: 1;
@@ -53,6 +33,26 @@ const fadeInAndShow = keyframes`
     display: flex;
   }
 `;
+const submenuEnter = keyframes`
+  from {
+    width: 0;
+    opacity: 0;
+  }
+  to {
+    width: 15.25rem;
+    opacity: 1;
+  }
+`;
+const submenuExit = keyframes`
+  from {
+    width: 15.25rem;
+    opacity: 1;
+  }
+  to {
+    width: 0;
+    opacity: 0;
+  }
+`;
 const MenuAside = styled_components.aside`
   background-color: ${({ background })=>background || "#000"};
   box-sizing: border-box;
@@ -78,6 +78,7 @@ const MenuHeader = styled_components.div`
 `;
 const ContainerLogo = styled_components.div`
   padding: 0 0.5rem;
+  max-height: 8.875rem;
   animation: ${({ $expand })=>$expand ? fadeInAndShow : fadeOutAndHide}
     0.25s forwards;
 
@@ -124,33 +125,40 @@ const ItemMenu = styled_components.div`
     transition:
       opacity 0.4s ease,
       transform 0.4s ease;
-    white-space: ${({ $expand })=>$expand ? "wrap" : "nowrap"};
+    white-space: ${({ $expand, $animating })=>$expand && !$animating ? "normal" : "nowrap"};
     overflow: hidden;
-
+    text-overflow: ellipsis;
     &:hover {
       opacity: 1;
     }
   }
 `;
 const SubItemsContainer = styled_components.div`
-  animation: ${({ $isClosing })=>$isClosing ? shrinkToRight : growFromRight}
-    0.4s ease forwards;
+  animation: ${({ $isClosing })=>$isClosing ? submenuExit : submenuEnter}
+    0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
   background-color: ${({ background })=>generateColorScale(background || "#000000")[500]};
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   height: 100%;
-  padding: 1rem 0 0 1rem;
+  padding: 0.5rem 0 0 1rem;
   position: absolute;
   right: 0;
   top: 0;
   transform-origin: right;
   width: 15.25rem;
   z-index: 1;
+  overflow: hidden;
 `;
 const SubItemsHeader = styled_components.div`
   padding: 0.5rem 0 1.5rem 0;
+  display: flex;
+  gap: 0.5rem;
+  color: ${({ fontcolor })=>fontcolor || "#FFFFFF"};
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
 
   button {
     align-items: center;
@@ -159,13 +167,18 @@ const SubItemsHeader = styled_components.div`
     color: ${({ fontcolor })=>fontcolor || "#FFFFFF"};
     cursor: pointer;
     display: flex;
-    font-size: 1rem;
-    font-weight: 500;
     gap: 0.5rem;
     line-height: 1rem;
     margin: 0;
+    border-radius: 50%;
     padding: 0;
-    transition: opacity 0.2s ease;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: ${({ background })=>generateColorScale(background || "#00000")["dark" === getLuminance(background || "#00000") ? 400 : 600]};
+      box-shadow: 0 0 0 2px
+        ${({ background })=>generateColorScale(background || "#00000")["dark" === getLuminance(background || "#00000") ? 400 : 600]};
+    }
   }
 `;
 const SubItemsWrapper = styled_components.div`
@@ -194,6 +207,9 @@ const SubMenuItem = styled_components.span`
   opacity: ${({ $active })=>$active ? "1" : "0.68"};
   padding: 0.5rem 0.75rem;
   transition: background-color 0.2s ease;
+  white-space: ${({ $expand, $animating })=>$expand && !$animating ? "normal" : "nowrap"};
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &:hover {
     opacity: 1;

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

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

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

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OptionContainer, SkeletonLine } from "./style.js";
+function Row({ index, style, options, onClickOption, addAll }) {
+    const option = options[index];
+    const hasSelectAll = "__select_all" === option.value;
+    const handleClick = (event)=>{
+        if (hasSelectAll) {
+            console.log(addAll);
+            addAll?.(event);
+            return;
+        }
+        onClickOption?.(event, option);
+    };
+    return /*#__PURE__*/ jsxs(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, {})
+        ]
+    });
+}
+export { Row as default };

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

@@ -0,0 +1,6 @@
+export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SkeletonBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SkeletonLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, {
+    width?: string;
+    height?: string;
+}>> & string;

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

@@ -0,0 +1,48 @@
+import styled_components, { keyframes } from "styled-components";
+import { COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, FONT_FAMILY_01, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
+const OptionContainer = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DAY};
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  width: 100%;
+  align-items: center;
+
+  &:hover {
+    background-color: ${COLOR_NEUTRAL_LIGHTER};
+
+    span {
+      color: ${COLOR_NEUTRAL_DUSK};
+    }
+  }
+
+  span {
+    max-width: 80%;
+    color: ${COLOR_NEUTRAL_DARKER};
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-family: ${FONT_FAMILY_01};
+    font-weight: ${FONT_WEIGHT_MEDIUM};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+const pulse = keyframes`
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+`;
+const SkeletonBase = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_LIGHT};
+  border-radius: 0.25rem;
+  animation: ${pulse} 1.5s ease-in-out infinite;
+`;
+const SkeletonLine = styled_components(SkeletonBase)`
+  display: flex;
+  height: ${({ height })=>height || "1.125rem"};
+  width: ${({ width })=>width || "100%"};
+`;
+export { OptionContainer, SkeletonBase, SkeletonLine };

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

@@ -1,10 +1,11 @@
 import { IMultiSelectOption } from "..";
-interface MultiSelectProps {
+interface MultiSelectListProps {
     onClickOption?: (event: React.MouseEvent<HTMLDivElement>, option: IMultiSelectOption) => void;
     options: IMultiSelectOption[];
-    isLoading?: boolean;
+    loading?: boolean;
     addAll?: (event: React.MouseEvent<HTMLDivElement>) => void;
     translation: (key: string) => string;
+    onLoadMore?: () => Promise<void>;
 }
-export default function MultiSelect({ options, onClickOption, isLoading, addAll, translation, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelectList({ options, onClickOption, loading, addAll, translation, onLoadMore, }: MultiSelectListProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,59 +1,69 @@
 import { jsx } from "react/jsx-runtime";
-import { FixedSizeList } from "react-window";
-import { LoadingContainer, OptionContainer, SelectDropdown } from "./style.js";
-import Loading from "../../Loading/Loading/index.js";
-const renderRow = ({ data, index, style, onClickOption, addAll })=>{
-    const option = data[index];
-    const hasSelectAll = "__select_all" === option.value;
-    const handleClick = (event)=>{
-        if (hasSelectAll) {
-            if (addAll) addAll(event);
-            return;
-        }
-        onClickOption?.(event, option);
-    };
-    return /*#__PURE__*/ jsx(OptionContainer, {
-        style: style,
-        onClick: handleClick,
-        className: hasSelectAll ? "__select_all" : "",
-        children: /*#__PURE__*/ jsx("span", {
-            children: option.label
-        })
-    });
-};
-function MultiSelect({ options, onClickOption, isLoading, addAll, translation }) {
+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 }) {
+    const [lastIndex, setLastIndex] = useState(0);
+    const [loadingMore, setLoadingMore] = useState(false);
     const selectAll = {
         value: "__select_all",
         label: translation("select_all")
     };
-    const newOptions = addAll ? [
+    const allOptions = addAll ? [
         selectAll,
         ...options
     ] : options;
     const OPTION_SIZE = 36;
-    const optionLength = newOptions.length;
+    const optionLength = allOptions.length;
     const height = OPTION_SIZE * (0 === optionLength ? 1 : optionLength >= 7 ? 7 : optionLength);
+    const onItemsRendered = useCallback(async ({ stopIndex })=>{
+        const isAtEnd = stopIndex >= (addAll ? options.length : options.length - 1);
+        if (loadingMore) return;
+        try {
+            setLoadingMore(true);
+            if (lastIndex !== stopIndex && isAtEnd) {
+                if (onLoadMore) await onLoadMore();
+                setLastIndex(stopIndex);
+            }
+        } finally{
+            setLoadingMore(false);
+        }
+    }, [
+        options.length,
+        onLoadMore,
+        lastIndex
+    ]);
+    const loadingOption = {
+        value: "__loading__",
+        label: "loading"
+    };
     return /*#__PURE__*/ jsx(SelectDropdown, {
-        children: isLoading ? /*#__PURE__*/ jsx(LoadingContainer, {
+        children: loading ? /*#__PURE__*/ jsx(LoadingContainer, {
             children: /*#__PURE__*/ jsx(Loading, {
                 size: "lg",
                 variant: "light"
             })
-        }) : /*#__PURE__*/ jsx(FixedSizeList, {
-            itemCount: newOptions.length,
-            itemData: newOptions,
-            itemSize: 36,
-            height: height,
-            width: "100%",
-            itemKey: (index)=>newOptions[index].value || index,
-            children: ({ index, style, data })=>renderRow({
-                    data,
-                    index,
-                    style,
-                    onClickOption,
-                    addAll
-                })
+        }) : /*#__PURE__*/ jsx(List, {
+            rowComponent: Row,
+            rowCount: loadingMore ? allOptions.length + 1 : allOptions.length,
+            rowHeight: OPTION_SIZE,
+            rowProps: {
+                options: loadingMore ? [
+                    ...allOptions,
+                    loadingOption
+                ] : allOptions,
+                onClickOption,
+                addAll
+            },
+            style: {
+                height: `${height / 16}rem`,
+                width: "100%"
+            },
+            onRowsRendered: onItemsRendered,
+            overscanCount: 0
         })
     });
 }
-export { MultiSelect as default };
+export { MultiSelectList as default };

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

@@ -1,3 +1,2 @@
 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;
-export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & 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/MultiSelectList/style.js

@@ -1,5 +1,5 @@
 import styled_components from "styled-components";
-import { COLOR_ACCENT_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER, FONT_FAMILY_01, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
+import { COLOR_ACCENT_MEDIUM, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, FONT_WEIGHT_BOLD } from "@ftdata/f-tokens";
 const SelectDropdown = styled_components.div`
   background-color: ${COLOR_NEUTRAL_DAY};
   border-radius: 0.25rem;
@@ -45,38 +45,9 @@ const SelectDropdown = styled_components.div`
     }
   }
 `;
-const OptionContainer = styled_components.div`
-  background-color: ${COLOR_NEUTRAL_DAY};
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  width: 100%;
-
-  &:hover {
-    background-color: ${COLOR_NEUTRAL_LIGHTER};
-
-    span {
-      color: ${COLOR_NEUTRAL_DUSK};
-    }
-  }
-
-  span {
-    max-width: 80%;
-    color: ${COLOR_NEUTRAL_DARKER};
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-family: ${FONT_FAMILY_01};
-    font-weight: ${FONT_WEIGHT_MEDIUM};
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
 const LoadingContainer = styled_components.div`
   background-color: ${COLOR_NEUTRAL_DAY};
   height: 10rem;
   width: 100%;
 `;
-export { LoadingContainer, OptionContainer, SelectDropdown };
+export { LoadingContainer, SelectDropdown };

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

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

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

@@ -0,0 +1,14 @@
+import { computeUnselected } from "./computeUnselected.js";
+const addOption = (selected, options, option, max)=>{
+    if ('feedback__' === option.value) return;
+    if (max && selected.length >= max) return;
+    const newSelected = [
+        ...selected,
+        option
+    ];
+    return {
+        selected: newSelected,
+        unselected: computeUnselected(options, newSelected)
+    };
+};
+export { addOption };

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

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

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

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

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,30 @@
+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__',
+            label: translation('the_selection_limit_has_been_reached')
+        }
+    ];
+    if (query && !filtered.length) return [
+        {
+            value: 'feedback__',
+            label: translation('no_data_was_found')
+        }
+    ];
+    const unselected = computeUnselected(options, selected);
+    if (!query && !unselected.length) return [
+        {
+            value: 'feedback__',
+            label: translation('all_were_selected')
+        }
+    ];
+    return [];
+}
+export { feedbackText };

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

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

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

@@ -0,0 +1,5 @@
+const filterOptions = (options, query)=>{
+    const normalizedQuery = query.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+    return options.filter((o)=>o.label.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').includes(normalizedQuery));
+};
+export { filterOptions };

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

@@ -0,0 +1,5 @@
+import { IMultiSelectOption } from '..';
+export declare const removeOption: (selected: IMultiSelectOption[], options: IMultiSelectOption[], option: IMultiSelectOption) => {
+    selected: IMultiSelectOption[];
+    unselected: IMultiSelectOption[];
+};

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

@@ -0,0 +1,9 @@
+import { computeUnselected } from "./computeUnselected.js";
+const removeOption = (selected, options, option)=>{
+    const newSelected = selected.filter((o)=>o.value !== option.value);
+    return {
+        selected: newSelected,
+        unselected: computeUnselected(options, newSelected)
+    };
+};
+export { removeOption };

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

@@ -1,24 +1,39 @@
-import { InputHTMLAttributes } from "react";
+import { InputHTMLAttributes, JSX } from "react";
+import { FieldFeedbackType } from "../../types/feedback";
+import { IconsNames } from "@ftdata/f-icons";
 export interface IMultiSelectOption {
     value: string;
     label: string;
 }
+export interface IMultiSelectState {
+    selected: IMultiSelectOption[];
+    options: IMultiSelectOption[];
+    filtered: IMultiSelectOption[];
+    unselected: IMultiSelectOption[];
+}
+export interface IMultiSelectActions {
+    clear: () => void;
+    search?: (query: string) => void;
+}
 interface MultiSelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
+    disabled?: boolean;
     helpText?: string;
+    helpIcon?: IconsNames;
+    icon?: IconsNames | JSX.Element;
+    rightItem?: JSX.Element;
     label?: string;
-    name?: string;
-    onChangeItems?: (options: IMultiSelectOption[]) => void;
-    options: IMultiSelectOption[];
-    optional?: string;
-    required?: boolean;
-    selectAll?: boolean;
-    placeholder: string;
-    isLoading?: boolean;
-    isError?: boolean;
-    isSuccess?: boolean;
-    maxItems?: number;
+    sublabel?: string;
+    feedback?: FieldFeedbackType;
+    clear?: () => void;
+    loading?: boolean;
+    state: IMultiSelectState;
+    actions: IMultiSelectActions;
+    updateState: (newPartial: Partial<IMultiSelectState>) => void;
     translation: (key: string) => string;
-    value?: IMultiSelectOption[];
+    max?: number;
+    selectAll?: boolean;
+    total?: number;
+    onLoadMore?: () => Promise<void>;
 }
-export default function MultiSelect({ helpText, label, isLoading, name, onChangeItems, optional, options, required, maxItems, placeholder, selectAll, isError, value, isSuccess, translation, ...rest }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelect({ helpText, label, sublabel, required, disabled, feedback, helpIcon, name, translation, state, updateState, placeholder, max, loading, actions, selectAll, total, icon, onLoadMore, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
 export {};