@ftdata/ui 0.0.12 → 0.0.13

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

@@ -6,6 +6,7 @@ interface MultiSelectListProps {
     addAll?: (event: React.MouseEvent<HTMLDivElement>) => void;
     translation: (key: string) => string;
     onLoadMore?: () => Promise<void>;
+    dropdownPosition?: "top" | "bottom";
 }
-export default function MultiSelectList({ options, onClickOption, loading, addAll, translation, onLoadMore, }: MultiSelectListProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelectList({ options, onClickOption, loading, addAll, translation, onLoadMore, dropdownPosition, }: MultiSelectListProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,7 +4,7 @@ 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 }) {
+function MultiSelectList({ options, onClickOption, loading, addAll, translation, onLoadMore, dropdownPosition = "bottom" }) {
     const [lastIndex, setLastIndex] = useState(0);
     const [loadingMore, setLoadingMore] = useState(false);
     const selectAll = {
@@ -40,6 +40,7 @@ function MultiSelectList({ options, onClickOption, loading, addAll, translation,
         label: "loading"
     };
     return /*#__PURE__*/ jsx(SelectDropdown, {
+        position: dropdownPosition,
         children: loading ? /*#__PURE__*/ jsx(LoadingContainer, {
             children: /*#__PURE__*/ jsx(Loading, {
                 size: "lg",

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

@@ -1,2 +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 SelectDropdownProps {
+    position?: "top" | "bottom";
+}
+export declare const SelectDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectDropdownProps>> & string;
 export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

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

@@ -6,12 +6,14 @@ const SelectDropdown = styled_components.div`
   box-shadow: 0px 2px 4px rgba(107, 117, 124, 0.32);
   color: ${COLOR_NEUTRAL_DUSK};
   position: absolute;
-  top: calc(100% + 0.5rem);
   right: 0;
   width: 100%;
   height: auto;
   z-index: 3;
 
+  top: ${({ position })=>"top" === position ? "auto" : "calc(100% + 0.5rem)"};
+  bottom: ${({ position })=>"top" === position ? "calc(100% + 0.5rem)" : "auto"};
+
   & > div {
     border-radius: 0.25rem;
   }

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

@@ -23,5 +23,6 @@ export interface MultiSelectProps extends InputHTMLAttributes<HTMLDivElement> {
     total?: number;
     onLoadMore?: () => Promise<void>;
     toggle?: (open: boolean) => void;
+    dropdownPosition?: "top" | "bottom";
 }
-export default function MultiSelect({ helpText, label, sublabel, required, disabled, feedback, helpIcon, name, translation, state, updateState, placeholder, max, loading, actions, selectAll, total, icon, onLoadMore, toggle, ...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, toggle, dropdownPosition, ...rest }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MultiSelect/index.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, toggle, ...rest }) {
+function MultiSelect({ helpText, label, sublabel, required, disabled, feedback, helpIcon, name, translation, state, updateState, placeholder, max, loading, actions, selectAll, total, icon, onLoadMore, toggle, dropdownPosition, ...rest }) {
     const [showList, setShowList] = useState(false);
     const [query, setQuery] = useState("");
     const [inputSize, setInputSize] = useState(0);
@@ -216,7 +216,8 @@ function MultiSelect({ helpText, label, sublabel, required, disabled, feedback,
                         onClickOption: (e, option)=>handleAddOption(option),
                         loading: loading,
                         addAll: canShowSelectAll,
-                        onLoadMore: onLoadMore
+                        onLoadMore: onLoadMore,
+                        dropdownPosition: dropdownPosition
                     })
                 ]
             }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftdata/ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "exports": {
     ".": {
@@ -31,8 +31,8 @@
     "react-input-mask-next": "3.0.0-alpha.12",
     "react-select": "^5.10.2",
     "react-window": "^2.0.2",
-    "@ftdata/f-icons": "0.0.2",
-    "@ftdata/f-tokens": "0.0.1"
+    "@ftdata/f-tokens": "0.0.1",
+    "@ftdata/f-icons": "0.0.2"
   },
   "publishConfig": {
     "access": "public"