@ftdata/ui 0.0.12 → 0.0.14

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/dist/components/Select/List/index.d.ts

@@ -7,6 +7,7 @@ interface SelectListProps {
     isLoading?: boolean;
     handleCustomAction: (action: () => void) => void;
     onLoadMore?: () => Promise<void>;
+    dropdownPosition?: "top" | "bottom";
 }
 declare const SelectList: React.FC<SelectListProps>;
 export default SelectList;

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

@@ -5,7 +5,7 @@ import { LoadingContainer, SelectDropdown } from "./style.js";
 import Loading from "../../Loading/index.js";
 import { TooltipWrapper } from "../../TooltipWrapper/index.js";
 import Row from "./Row/index.js";
-const SelectList = ({ options, onClickOption, selectedOption, isLoading, onLoadMore, handleCustomAction })=>{
+const SelectList = ({ options, onClickOption, selectedOption, isLoading, onLoadMore, handleCustomAction, dropdownPosition })=>{
     const [lastIndex, setLastIndex] = useState(0);
     const [loadingMore, setLoadingMore] = useState(false);
     const OPTION_SIZE = 36;
@@ -30,6 +30,7 @@ const SelectList = ({ options, onClickOption, selectedOption, isLoading, onLoadM
         lastIndex
     ]);
     return /*#__PURE__*/ jsx(SelectDropdown, {
+        position: dropdownPosition,
         children: isLoading ? /*#__PURE__*/ jsx(LoadingContainer, {
             children: /*#__PURE__*/ jsx(Loading, {
                 size: "lg",

package/dist/components/Select/List/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/Select/List/style.js

@@ -6,11 +6,13 @@ 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);
   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"};
+
   .action {
     span {
       font-weight: 600;

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

@@ -28,7 +28,8 @@ export interface SelectProps extends InputPropsWithoutOnToggle {
     setSelected: React.Dispatch<React.SetStateAction<ISelectOption | null>>;
     onLoadMore?: () => Promise<void>;
     onToggle?: (open: boolean) => void;
+    dropdownPosition?: "top" | "bottom";
 }
-export default function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation, selected, setSelected, onLoadMore, onToggle, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation, selected, setSelected, onLoadMore, onToggle, dropdownPosition, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export declare const normalizeOptions: (options: ISelectOption[]) => ISelectOption[];
 export {};

package/dist/components/Select/index.js

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { CavetButton, HelpText, IconContainer, InputWrapper, SelectContainer, StyledInput, StyledLabel } from "./styles.js";
 import { Icon } from "@ftdata/f-icons";
 import List from "./List/index.js";
-function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation = "default", selected, setSelected, onLoadMore, onToggle, ...rest }) {
+function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation = "default", selected, setSelected, onLoadMore, onToggle, dropdownPosition, ...rest }) {
     const [showList, setShowList] = useState(false);
     const [currentValue, setCurrentValue] = useState("");
     const [filtered, setFiltered] = useState([]);
@@ -160,6 +160,7 @@ function Select({ helpText, isError, isSuccess, label, name, isRequired, options
                         })
                     }),
                     showList && /*#__PURE__*/ jsx(List, {
+                        dropdownPosition: dropdownPosition,
                         options: computedOptions() || [
                             notFound
                         ],

package/package.json

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