@ftdata/ui 0.0.13 → 0.0.14

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.13",
+  "version": "0.0.14",
   "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-tokens": "0.0.1",
-    "@ftdata/f-icons": "0.0.2"
+    "@ftdata/f-icons": "0.0.2",
+    "@ftdata/f-tokens": "0.0.1"
   },
   "publishConfig": {
     "access": "public"