@ftdata/ui 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/Input/index.js +15 -11
  2. package/dist/components/Input/styles.d.ts +2 -1
  3. package/dist/components/Input/styles.js +27 -16
  4. package/dist/components/Select/List/index.d.ts +1 -0
  5. package/dist/components/Select/List/index.js +2 -2
  6. package/dist/components/Select/List/style.d.ts +5 -1
  7. package/dist/components/Select/List/style.js +3 -1
  8. package/dist/components/Select/index.d.ts +4 -3
  9. package/dist/components/Select/index.js +3 -1
  10. package/package.json +3 -3
package/dist/components/Input/index.js CHANGED
@@ -1,19 +1,15 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import "react";
3
- import { Container, ContainerTextField, DivIcon, HelpText, InputContainer, InputControl, TextField } from "./styles.js";
4
- import DoneCircleIcon from "../../assets/DoneCircleIcon.js";
5
- import CancelSquareIcon from "../../assets/CancelSquareIcon.js";
3
+ import { Container, DivIcon, HelpText, InputContainer, InputControl, StyledLabel } from "./styles.js";
6
4
  import { Icon } from "@ftdata/f-icons";
7
5
  const Input = ({ disabled, error, helpText, name, success, width, icon, textField, margin, required, ...rest })=>/*#__PURE__*/ jsxs(Container, {
8
6
  margin: margin,
9
7
  children: [
10
- textField && /*#__PURE__*/ jsxs(ContainerTextField, {
8
+ textField && /*#__PURE__*/ jsxs(StyledLabel, {
9
+ htmlFor: name,
11
10
  children: [
12
- /*#__PURE__*/ jsx(TextField, {
13
- children: textField
14
- }),
15
- required && /*#__PURE__*/ jsx("div", {
16
- className: "required",
11
+ textField,
12
+ required && /*#__PURE__*/ jsx("span", {
17
13
  children: "*"
18
14
  })
19
15
  ]
@@ -44,8 +40,16 @@ const Input = ({ disabled, error, helpText, name, success, width, icon, textFiel
44
40
  error: error,
45
41
  success: success,
46
42
  children: [
47
- !disabled && error && /*#__PURE__*/ jsx(CancelSquareIcon, {}) || success && /*#__PURE__*/ jsx(DoneCircleIcon, {}),
48
- helpText
43
+ error && /*#__PURE__*/ jsx("div", {
44
+ children: /*#__PURE__*/ jsx(Icon, {
45
+ name: "ui warning-circle",
46
+ size: "1rem",
47
+ color: "currentColor"
48
+ })
49
+ }),
50
+ /*#__PURE__*/ jsx("span", {
51
+ children: helpText
52
+ })
49
53
  ]
50
54
  })
51
55
  ]
package/dist/components/Input/styles.d.ts CHANGED
@@ -13,5 +13,6 @@ interface HelpTextProps extends React.AllHTMLAttributes<HTMLSpanElement> {
13
13
  error?: boolean;
14
14
  success?: boolean;
15
15
  }
16
- export declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, HelpTextProps>> & string;
16
+ export declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HelpTextProps>> & string;
17
+ export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
17
18
  export {};
package/dist/components/Input/styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import styled_components from "styled-components";
2
- import { BORDER_RADIUS_SM, COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_DARK, COLOR_SUCCESS_MEDIUM, FONT_FAMILY_01, FONT_SIZE_MD, FONT_SIZE_SM, FONT_SIZE_XS, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM, LINE_HEIGHT_MEDIUM, SPACING_INLINE_01, SPACING_INLINE_02, SPACING_INSET_SM, SPACING_SQUISH_NANO, SPACING_STACK_02 } from "@ftdata/f-tokens";
2
+ import { BORDER_RADIUS_SM, COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, FONT_FAMILY_01, FONT_SIZE_MD, FONT_SIZE_SM, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM, LINE_HEIGHT_MEDIUM, SPACING_INLINE_02, SPACING_INSET_SM, SPACING_SQUISH_NANO, SPACING_STACK_02 } from "@ftdata/f-tokens";
3
3
  import { Component } from "react";
4
4
  const ContainerTextField = styled_components.div`
5
5
  display: flex;
@@ -75,22 +75,33 @@ const InputControl = styled_components.input`
75
75
  color: ${({ disabled })=>disabled ? COLOR_NEUTRAL_LIGHT : COLOR_NEUTRAL_MEDIUM};
76
76
  }
77
77
  `;
78
- const HelpText = styled_components("span")`
79
- align-items: center;
80
- box-sizing: border-box;
81
- color: ${({ disabled, error, success })=>disabled && COLOR_NEUTRAL_MEDIUM || error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_DARK || COLOR_NEUTRAL_DARK};
78
+ const HelpText = styled_components.div`
79
+ color: ${({ error, success })=>error ? COLOR_DANGER_MEDIUM : success ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_DARK};
82
80
  display: flex;
83
- font-family: ${FONT_FAMILY_01};
84
- font-weight: ${FONT_WEIGHT_MEDIUM};
85
- line-height: ${LINE_HEIGHT_MEDIUM};
86
- font-size: ${FONT_SIZE_XS};
87
- margin-top: 8px;
81
+ gap: 0.25rem;
82
+ margin-top: 0.5rem;
88
83
 
89
- svg {
90
- margin-right: ${SPACING_INLINE_01};
91
- path {
92
- stroke: ${({ error, success })=>error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_MEDIUM || COLOR_NEUTRAL_DARK};
93
- }
84
+ div {
85
+ height: 1rem;
86
+ width: 1rem;
87
+ }
88
+
89
+ span {
90
+ font-size: 0.875rem;
91
+ line-height: 1rem;
92
+ font-weight: ${FONT_WEIGHT_MEDIUM};
93
+ }
94
+ `;
95
+ const StyledLabel = styled_components.label`
96
+ color: ${COLOR_NEUTRAL_DUSK};
97
+ display: flex;
98
+ font-size: 0.875rem;
99
+ font-weight: ${FONT_WEIGHT_BOLD};
100
+ line-height: 1rem;
101
+ margin-bottom: 0.5rem;
102
+
103
+ span {
104
+ color: ${COLOR_DANGER_MEDIUM};
94
105
  }
95
106
  `;
96
- export { Container, ContainerTextField, DivIcon, HelpText, InputContainer, InputControl, ReactInputMask, TextField };
107
+ export { Container, ContainerTextField, DivIcon, HelpText, InputContainer, InputControl, ReactInputMask, StyledLabel, TextField };
package/dist/components/Select/List/index.d.ts CHANGED
@@ -7,6 +7,7 @@ interface SelectListProps {
7
7
  isLoading?: boolean;
8
8
  handleCustomAction: (action: () => void) => void;
9
9
  onLoadMore?: () => Promise<void>;
10
+ dropdownPosition?: "top" | "bottom";
10
11
  }
11
12
  declare const SelectList: React.FC<SelectListProps>;
12
13
  export default SelectList;
package/dist/components/Select/List/index.js CHANGED
@@ -5,7 +5,7 @@ import { LoadingContainer, SelectDropdown } from "./style.js";
5
5
  import Loading from "../../Loading/index.js";
6
6
  import { TooltipWrapper } from "../../TooltipWrapper/index.js";
7
7
  import Row from "./Row/index.js";
8
- const SelectList = ({ options, onClickOption, selectedOption, isLoading, onLoadMore, handleCustomAction })=>{
8
+ const SelectList = ({ options, onClickOption, selectedOption, isLoading, onLoadMore, handleCustomAction, dropdownPosition })=>{
9
9
  const [lastIndex, setLastIndex] = useState(0);
10
10
  const [loadingMore, setLoadingMore] = useState(false);
11
11
  const OPTION_SIZE = 36;
@@ -13,7 +13,6 @@ const SelectList = ({ options, onClickOption, selectedOption, isLoading, onLoadM
13
13
  const height = OPTION_SIZE * (0 === optionLength ? 1 : optionLength >= 7 ? 7 : optionLength);
14
14
  const onItemsRendered = useCallback(async ({ stopIndex })=>{
15
15
  const isAtEnd = stopIndex >= options.length - 1;
16
- console.log(lastIndex, stopIndex, isAtEnd);
17
16
  if (loadingMore) return;
18
17
  try {
19
18
  setLoadingMore(true);
@@ -30,6 +29,7 @@ const SelectList = ({ options, onClickOption, selectedOption, isLoading, onLoadM
30
29
  lastIndex
31
30
  ]);
32
31
  return /*#__PURE__*/ jsx(SelectDropdown, {
32
+ position: dropdownPosition,
33
33
  children: isLoading ? /*#__PURE__*/ jsx(LoadingContainer, {
34
34
  children: /*#__PURE__*/ jsx(Loading, {
35
35
  size: "lg",
package/dist/components/Select/List/style.d.ts CHANGED
@@ -1,2 +1,6 @@
1
- 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;
1
+ interface SelectDropdownProps {
2
+ position?: "top" | "bottom";
3
+ }
4
+ 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;
2
5
  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;
6
+ export {};
package/dist/components/Select/List/style.js CHANGED
@@ -6,11 +6,13 @@ const SelectDropdown = styled_components.div`
6
6
  box-shadow: 0px 2px 4px rgba(107, 117, 124, 0.32);
7
7
  color: ${COLOR_NEUTRAL_DUSK};
8
8
  position: absolute;
9
- top: calc(100% + 0.5rem);
10
9
  width: 100%;
11
10
  height: auto;
12
11
  z-index: 3;
13
12
 
13
+ top: ${({ position })=>"top" === position ? "auto" : "calc(100% + 0.5rem)"};
14
+ bottom: ${({ position })=>"top" === position ? "calc(100% + 0.5rem)" : "auto"};
15
+
14
16
  .action {
15
17
  span {
16
18
  font-weight: 600;
package/dist/components/Select/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { InputHTMLAttributes, JSX } from "react";
1
+ import { InputHTMLAttributes, JSX } from "react";
2
2
  export interface ISelectOption {
3
3
  label: string;
4
4
  value: string;
@@ -25,10 +25,11 @@ export interface SelectProps extends InputPropsWithoutOnToggle {
25
25
  icon?: JSX.Element;
26
26
  variation?: "default" | "searchable";
27
27
  selected: ISelectOption | null;
28
- setSelected: React.Dispatch<React.SetStateAction<ISelectOption | null>>;
28
+ setSelected: (selected: ISelectOption | null) => void;
29
29
  onLoadMore?: () => Promise<void>;
30
30
  onToggle?: (open: boolean) => void;
31
+ dropdownPosition?: "top" | "bottom";
31
32
  }
32
- 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;
33
+ 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;
33
34
  export declare const normalizeOptions: (options: ISelectOption[]) => ISelectOption[];
34
35
  export {};
package/dist/components/Select/index.js CHANGED
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
3
3
  import { CavetButton, HelpText, IconContainer, InputWrapper, SelectContainer, StyledInput, StyledLabel } from "./styles.js";
4
4
  import { Icon } from "@ftdata/f-icons";
5
5
  import List from "./List/index.js";
6
- function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation = "default", selected, setSelected, onLoadMore, onToggle, ...rest }) {
6
+ function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation = "default", selected, setSelected, onLoadMore, onToggle, dropdownPosition, ...rest }) {
7
7
  const [showList, setShowList] = useState(false);
8
8
  const [currentValue, setCurrentValue] = useState("");
9
9
  const [filtered, setFiltered] = useState([]);
@@ -153,6 +153,7 @@ function Select({ helpText, isError, isSuccess, label, name, isRequired, options
153
153
  onClick: handleClickCavet,
154
154
  isListOpen: showList,
155
155
  ref: cavetRef,
156
+ type: "button",
156
157
  children: /*#__PURE__*/ jsx(Icon, {
157
158
  name: "arw caret-down",
158
159
  color: "currentColor",
@@ -160,6 +161,7 @@ function Select({ helpText, isError, isSuccess, label, name, isRequired, options
160
161
  })
161
162
  }),
162
163
  showList && /*#__PURE__*/ jsx(List, {
164
+ dropdownPosition: dropdownPosition,
163
165
  options: computedOptions() || [
164
166
  notFound
165
167
  ],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ftdata/ui",
3
- "version": "0.0.13",
3
+ "version": "0.0.15",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
@@ -31,8 +31,8 @@
31
31
  "react-input-mask-next": "3.0.0-alpha.12",
32
32
  "react-select": "^5.10.2",
33
33
  "react-window": "^2.0.2",
34
- "@ftdata/f-tokens": "0.0.1",
35
- "@ftdata/f-icons": "0.0.2"
34
+ "@ftdata/f-icons": "0.0.3",
35
+ "@ftdata/f-tokens": "0.0.1"
36
36
  },
37
37
  "publishConfig": {
38
38
  "access": "public"