@ftdata/ui 0.0.10 → 0.0.12

package/dist/components/MultiSelect/{MultiSelectList → components/MultiSelectList}/Row/index.d.ts

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

package/dist/components/MultiSelect/{MultiSelectList → components/MultiSelectList}/index.d.ts

@@ -1,4 +1,4 @@
-import { IMultiSelectOption } from "..";
+import { IMultiSelectOption } from "../../interfaces/state";
 interface MultiSelectListProps {
     onClickOption?: (event: React.MouseEvent<HTMLDivElement>, option: IMultiSelectOption) => void;
     options: IMultiSelectOption[];

package/dist/components/MultiSelect/{MultiSelectList → components/MultiSelectList}/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { List } from "react-window";
 import Row from "./Row/index.js";
 import { LoadingContainer, SelectDropdown } from "./style.js";
-import Loading from "../../Loading/index.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);

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { IMultiSelectOption } from "../interfaces/state";
+export declare function arraysEqual(a: IMultiSelectOption[], b: IMultiSelectOption[]): boolean;

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

@@ -0,0 +1,5 @@
+function arraysEqual(a, b) {
+    if (a.length !== b.length) return false;
+    return a.every((item, idx)=>item.value === b[idx].value);
+}
+export { arraysEqual };

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

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

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

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

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

@@ -1,2 +1,2 @@
-import { IMultiSelectOption } from '..';
+import { IMultiSelectOption } from "../interfaces/state";
 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((selected)=>selected.value === opt.value));
+const computeUnselected = (options, selected)=>options.filter((opt)=>!selected.some((s)=>s.value === opt.value));
 export { computeUnselected };

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

@@ -1,4 +1,4 @@
-import { IMultiSelectOption } from '..';
+import { IMultiSelectOption } from "../interfaces/state";
 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

@@ -2,27 +2,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')
+            value: "feedback__",
+            label: translation("no_data_is_available")
         }
     ];
     if (max && selected.length >= max) return [
         {
-            value: 'feedback__',
-            label: translation('the_selection_limit_has_been_reached')
+            value: "feedback__",
+            label: translation("the_selection_limit_has_been_reached")
         }
     ];
     if (query && !filtered.length) return [
         {
-            value: 'feedback__',
-            label: translation('no_data_was_found')
+            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')
+            value: "feedback__",
+            label: translation("all_were_selected")
         }
     ];
     return [];

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

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

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

@@ -1,5 +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));
+    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/getChangedFieds.d.ts

@@ -0,0 +1,2 @@
+import { IMultiSelectState } from "../interfaces/state";
+export declare function getChangedFields(base: Partial<IMultiSelectState>, compare: Partial<IMultiSelectState>): (keyof IMultiSelectState)[];

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

@@ -0,0 +1,17 @@
+import { arraysEqual } from "./arraysEqual.js";
+const FIELDS = [
+    "selected",
+    "options",
+    "filtered",
+    "unselected"
+];
+function getChangedFields(base, compare) {
+    const changed = [];
+    FIELDS.forEach((key)=>{
+        const last = base[key] || [];
+        const next = compare[key] || [];
+        if (arraysEqual(last, next)) changed.push(key);
+    });
+    return changed;
+}
+export { getChangedFields };

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

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

package/dist/components/MultiSelect/hooks/useMultiSelect.d.ts

@@ -0,0 +1,10 @@
+import { IMultiSelectState } from "../interfaces/state";
+import { IMultiSelectConfig } from "../interfaces/config";
+interface UseIMultiSelectConfig {
+    config?: IMultiSelectConfig;
+}
+export declare function useMultiSelect({ config }: UseIMultiSelectConfig): {
+    state: IMultiSelectState;
+    updateState: (newPartial: Partial<IMultiSelectState>) => void;
+};
+export {};

package/dist/components/MultiSelect/hooks/useMultiSelect.js

@@ -0,0 +1,44 @@
+import { useEffect, useReducer } from "react";
+import { computeUnselected } from "../helpers/computeUnselected.js";
+import { stateReducer } from "../reducers/stateReducer.js";
+import { arraysEqual } from "../helpers/arraysEqual.js";
+function useMultiSelect({ config }) {
+    const initial = {
+        selected: config?.fields?.externalSelected ?? [],
+        options: config?.fields?.externalOptions ?? [],
+        filtered: config?.fields?.externalFiltered ?? [],
+        unselected: computeUnselected(config?.fields?.externalOptions ?? [], config?.fields?.externalSelected ?? [])
+    };
+    const [state, dispatch] = useReducer(stateReducer, initial);
+    useEffect(()=>{
+        if (!config) return;
+        const { fields, actions } = config;
+        const payload = {};
+        if (fields?.externalSelected && !arraysEqual(fields.externalSelected, state.selected)) payload.selected = fields.externalSelected;
+        if (fields?.externalOptions && !arraysEqual(fields.externalOptions, state.options)) payload.options = fields.externalOptions;
+        if (fields?.externalFiltered && !arraysEqual(fields.externalFiltered, state.filtered)) payload.filtered = fields.externalFiltered;
+        if (fields?.externalUnselected && !arraysEqual(fields.externalUnselected, state.unselected)) payload.unselected = fields.externalUnselected;
+        if (Object.keys(payload).length) dispatch({
+            type: "SET_STATE",
+            payload
+        });
+        if (actions?.onSelectedChange) actions.onSelectedChange(state.selected);
+        if (actions?.onOptionsChange) actions.onOptionsChange(state.options);
+        if (actions?.onFilteredChange) actions.onFilteredChange(state.filtered);
+        if (actions?.onUnselectedChange) actions.onUnselectedChange(state.unselected);
+    }, [
+        state,
+        config
+    ]);
+    const updateState = (newPartial)=>{
+        dispatch({
+            type: "SET_STATE",
+            payload: newPartial
+        });
+    };
+    return {
+        state,
+        updateState
+    };
+}
+export { useMultiSelect };

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

@@ -1,21 +1,9 @@
 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"> {
+import { IMultiSelectActions } from "./interfaces/actions";
+import { IMultiSelectState } from "./interfaces/state";
+export interface MultiSelectProps extends InputHTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
     helpText?: string;
     helpIcon?: IconsNames;
@@ -27,13 +15,13 @@ interface MultiSelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
     clear?: () => void;
     loading?: boolean;
     state: IMultiSelectState;
-    actions: IMultiSelectActions;
+    actions?: IMultiSelectActions;
     updateState: (newPartial: Partial<IMultiSelectState>) => void;
     translation: (key: string) => string;
     max?: number;
     selectAll?: boolean;
     total?: number;
     onLoadMore?: () => Promise<void>;
+    toggle?: (open: boolean) => void;
 }
-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 {};
+export default function MultiSelect({ helpText, label, sublabel, required, disabled, feedback, helpIcon, name, translation, state, updateState, placeholder, max, loading, actions, selectAll, total, icon, onLoadMore, toggle, ...rest }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MultiSelect/index.js

@@ -5,8 +5,8 @@ import Label from "../fields/components/Label/index.js";
 import { getHelpTextFeedbackType } from "../fields/helpers/getFeedbackType.js";
 import { Icon } from "@ftdata/f-icons";
 import HelpText from "../fields/components/HelpText/index.js";
-import MultiSelectList from "./MultiSelectList/index.js";
-import Badge from "./Badge/index.js";
+import MultiSelectList from "./components/MultiSelectList/index.js";
+import Badge from "./components/Badge/index.js";
 import { addOption } from "./helpers/addOption.js";
 import { removeOption } from "./helpers/removeOptions.js";
 import { computeUnselected } from "./helpers/computeUnselected.js";
@@ -15,7 +15,7 @@ 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 }) {
+function MultiSelect({ helpText, label, sublabel, required, disabled, feedback, helpIcon, name, translation, state, updateState, placeholder, max, loading, actions, selectAll, total, icon, onLoadMore, toggle, ...rest }) {
     const [showList, setShowList] = useState(false);
     const [query, setQuery] = useState("");
     const [inputSize, setInputSize] = useState(0);
@@ -53,7 +53,7 @@ function MultiSelect({ helpText, label, sublabel, required, disabled, feedback,
         if (!value) return updateState({
             filtered: []
         });
-        if (actions.search) return void actions.search(value);
+        if (actions?.search) return void actions.search(value);
         updateState({
             filtered: filterOptions(computeUnselected(options, selected), value)
         });
@@ -131,14 +131,22 @@ function MultiSelect({ helpText, label, sublabel, required, disabled, feedback,
     const feedBackHelpText = getHelpTextFeedbackType(feedback, disabled);
     const toggleList = (event)=>{
         event.stopPropagation();
+        if (disabled) return;
         setShowList((prev)=>!prev);
     };
     const handleClickContainer = (event)=>{
         event.stopPropagation();
+        if (disabled) return;
         if (!showList) setShowList(true);
         inputRef.current?.focus();
     };
+    useEffect(()=>{
+        if (toggle) toggle(showList);
+    }, [
+        showList
+    ]);
     return /*#__PURE__*/ jsxs(MultiSelectWrapper, {
+        ...rest,
         children: [
             /*#__PURE__*/ jsxs(LabelContainer, {
                 children: [
@@ -179,6 +187,7 @@ function MultiSelect({ helpText, label, sublabel, required, disabled, feedback,
                                 value: query,
                                 onKeyDown: handleKeyDown,
                                 onChange: handleChange,
+                                disabled: disabled,
                                 size: inputSize,
                                 wide: 0 === selected.length
                             })
@@ -186,7 +195,11 @@ function MultiSelect({ helpText, label, sublabel, required, disabled, feedback,
                     }),
                     /*#__PURE__*/ jsx(RotateButton, {
                         rotate: showList,
-                        onClick: toggleList
+                        onClick: toggleList,
+                        disabled: disabled,
+                        style: {
+                            cursor: disabled ? "not-allowed" : "pointer"
+                        }
                     }),
                     !!max && /*#__PURE__*/ jsx(MaxItemsIndicator, {
                         children: /*#__PURE__*/ jsxs("span", {

package/dist/components/MultiSelect/interfaces/actions.d.ts

@@ -0,0 +1,4 @@
+export interface IMultiSelectActions {
+    clear: () => void;
+    search?: (query: string) => void;
+}

package/dist/components/MultiSelect/interfaces/config.d.ts

@@ -0,0 +1,17 @@
+import { IMultiSelectState, IMultiSelectOption } from "./state";
+export interface IMultiSelectConfigFields {
+    externalSelected?: IMultiSelectOption[];
+    externalOptions?: IMultiSelectOption[];
+    externalFiltered?: IMultiSelectOption[];
+    externalUnselected?: IMultiSelectOption[];
+}
+export interface IMultiSelectConfigActions {
+    onSelectedChange?: (selected: IMultiSelectState["selected"]) => void;
+    onOptionsChange?: (options: IMultiSelectState["options"]) => void;
+    onFilteredChange?: (filtered: IMultiSelectState["filtered"]) => void;
+    onUnselectedChange?: (unselected: IMultiSelectState["unselected"]) => void;
+}
+export interface IMultiSelectConfig {
+    fields?: IMultiSelectConfigFields;
+    actions?: IMultiSelectConfigActions;
+}

package/dist/components/MultiSelect/interfaces/state.d.ts

@@ -0,0 +1,10 @@
+export interface IMultiSelectOption {
+    value: string;
+    label: string;
+}
+export interface IMultiSelectState {
+    selected: IMultiSelectOption[];
+    options: IMultiSelectOption[];
+    filtered: IMultiSelectOption[];
+    unselected: IMultiSelectOption[];
+}

package/dist/components/MultiSelect/reducers/stateReducer.d.ts

@@ -0,0 +1,21 @@
+import { IMultiSelectOption, IMultiSelectState } from "../interfaces/state";
+type MultiSelectAction = {
+    type: "SET_STATE";
+    payload: Partial<IMultiSelectState>;
+} | {
+    type: "SET_OPTIONS";
+    payload: IMultiSelectOption[];
+} | {
+    type: "SET_SELECTED";
+    payload: IMultiSelectOption[];
+} | {
+    type: "SET_UNSELECTED";
+    payload: IMultiSelectOption[];
+} | {
+    type: "SET_FILTERED";
+    payload: IMultiSelectOption[];
+} | {
+    type: "CLEAR";
+};
+export declare function stateReducer(state: IMultiSelectState, action: MultiSelectAction): IMultiSelectState;
+export {};

package/dist/components/MultiSelect/reducers/stateReducer.js

@@ -0,0 +1,44 @@
+import { computeUnselected } from "../helpers/computeUnselected.js";
+import { computeSelected } from "../helpers/computeSelected.js";
+function stateReducer(state, action) {
+    switch(action.type){
+        case "SET_STATE":
+            return {
+                ...state,
+                ...action.payload,
+                unselected: computeUnselected(action.payload.options ?? state.options, action.payload.selected ?? state.selected)
+            };
+        case "SET_OPTIONS":
+            return {
+                ...state,
+                options: action.payload,
+                unselected: computeUnselected(action.payload, state.selected)
+            };
+        case "SET_SELECTED":
+            return {
+                ...state,
+                selected: action.payload,
+                unselected: computeUnselected(state.options, action.payload)
+            };
+        case "SET_UNSELECTED":
+            return {
+                ...state,
+                selected: computeSelected(state.options, action.payload),
+                unselected: action.payload
+            };
+        case "SET_FILTERED":
+            return {
+                ...state,
+                filtered: action.payload
+            };
+        case "CLEAR":
+            return {
+                ...state,
+                selected: [],
+                unselected: state.options
+            };
+        default:
+            return state;
+    }
+}
+export { stateReducer };

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

@@ -1,4 +1,4 @@
-import { FieldFeedbackType } from '../../types/feedback';
+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;

package/dist/components/MultiSelect/styles.js

@@ -19,7 +19,7 @@ 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;
@@ -47,7 +47,7 @@ const MultiSelectContainer = styled_components.div`
   padding: 0.5rem 0.5rem 0.5rem 1rem;
   width: 100%;
   box-shadow: 0 0 0
-    ${({ $active })=>$active ? '2px' : '1px'}${COLOR_NEUTRAL_MEDIUM};
+    ${({ $active })=>$active ? "2px" : "1px"}${COLOR_NEUTRAL_MEDIUM};
   position: relative;
 
   &:focus-within {
@@ -88,12 +88,13 @@ const BadgesContainer = styled_components.div`
 const ResizableInput = styled_components.input`
   outline: none;
   border: none;
+  background-color: transparent;
   color: ${COLOR_NEUTRAL_DUSK};
   font-size: 0.875rem;
   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};
@@ -102,6 +103,11 @@ const ResizableInput = styled_components.input`
     font-weight: ${FONT_WEIGHT_MEDIUM};
     line-height: 1.5rem;
   }
+
+  &:disabled {
+    background-color: ${COLOR_NEUTRAL_LIGHTER};
+    cursor: not-allowed;
+  }
 `;
 const MaxItemsIndicator = styled_components.div`
   display: flex;

package/dist/components/fields/components/RotateButton/index.d.ts

@@ -2,5 +2,5 @@ import { ButtonHTMLAttributes } from "react";
 interface RotateButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     rotate?: boolean;
 }
-export default function RotateButton({ rotate }: RotateButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function RotateButton({ rotate, ...rest }: RotateButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/fields/components/RotateButton/index.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { Icon } from "@ftdata/f-icons";
 import { Rotate } from "./styles.js";
-function RotateButton({ rotate }) {
+function RotateButton({ rotate, ...rest }) {
     return /*#__PURE__*/ jsx(Rotate, {
         rotate: rotate,
+        ...rest,
         children: /*#__PURE__*/ jsx(Icon, {
             name: "arw caret-down",
             color: "currentColor"

package/dist/index.d.ts

@@ -14,9 +14,14 @@ export { default as Collapse } from "./components/Collapse";
 export { default as UserMenu } from "./components/UserMenu";
 export { default as Select } from "./components/Select";
 export type { ISelectOption } from "./components/Select";
+export type { SelectProps } from "./components/Select";
 export { default as StateAlert } from "./components/StateAlert";
 export { default as MultiSelect } from "./components/MultiSelect";
-export type { IMultiSelectOption } from "./components/MultiSelect";
+export { useMultiSelect } from "./components/MultiSelect/hooks/useMultiSelect";
+export type { MultiSelectProps } from "./components/MultiSelect";
+export type { IMultiSelectActions } from "./components/MultiSelect/interfaces/actions";
+export type { IMultiSelectOption, IMultiSelectState, } from "./components/MultiSelect/interfaces/state";
+export type { IMultiSelectConfig, IMultiSelectConfigActions, IMultiSelectConfigFields, } from "./components/MultiSelect/interfaces/config";
 export { default as DoubleList } from "./components/DoubleList";
 export { default as Menu } from "./components/Menu";
 export type { MenuItem, MenuItemData, SubMenu, SubMenuData, } from "./components/Menu/types/MenuItem";

package/dist/index.js

@@ -13,9 +13,10 @@ import UserMenu from "./components/UserMenu/index.js";
 import Select from "./components/Select/index.js";
 import StateAlert from "./components/StateAlert/index.js";
 import MultiSelect from "./components/MultiSelect/index.js";
+import { useMultiSelect } from "./components/MultiSelect/hooks/useMultiSelect.js";
 import DoubleList from "./components/DoubleList/index.js";
 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, DoubleList, EmptyState, Input, Loading, Menu, MultiSelect, Radio, Select, 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, useMultiSelect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftdata/ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "exports": {
     ".": {