@ttoss/ui 4.0.0 → 4.0.2

package/dist/esm/index.js

@@ -360,7 +360,8 @@ var ValueContainer = ({
 }) => {
   const {
     leadingIcon,
-    trailingIcon
+    trailingIcon,
+    isSearchable
   } = props.selectProps;
   const hasError = props.selectProps["aria-invalid"] === "true";
   const trailingIconColor = (() => {
@@ -369,12 +370,18 @@ var ValueContainer = ({
     }
     return "text";
   })();
+  const finalLeadingIcon = (() => {
+    if (!isSearchable) {
+      return leadingIcon;
+    }
+    return leadingIcon || "search";
+  })();
   return /* @__PURE__ */jsxs6(Flex, {
     sx: {
       gap: "lg",
       flex: 1
     },
-    children: [leadingIcon && /* @__PURE__ */jsx7(Text, {
+    children: [finalLeadingIcon && /* @__PURE__ */jsx7(Text, {
       sx: {
         alignSelf: "center",
         pointerEvents: "none",
@@ -382,7 +389,7 @@ var ValueContainer = ({
         fontSize: "base"
       },
       children: /* @__PURE__ */jsx7(Icon5, {
-        icon: leadingIcon
+        icon: finalLeadingIcon
       })
     }), /* @__PURE__ */jsx7(Flex, {
       sx: {
@@ -408,6 +415,12 @@ var ValueContainer = ({
 var Select = /*#__PURE__*/React4.forwardRef(({
   ...props
 }, ref) => {
+  const value = props.options?.find(option => {
+    if ("value" in option) {
+      return option.value === props.value;
+    }
+    return false;
+  });
   return /* @__PURE__ */jsx7(ReactSelect, {
     ref,
     components: {
@@ -416,11 +429,22 @@ var Select = /*#__PURE__*/React4.forwardRef(({
       IndicatorsContainer,
       Placeholder,
       SelectContainer,
-      ValueContainer,
-      ...props.components
+      ValueContainer
     },
     isDisabled: props.disabled,
     ...props,
+    value,
+    onChange: value2 => {
+      props.onChange?.(value2?.value);
+    },
+    styles: {
+      input: baseStyles => {
+        return {
+          ...baseStyles,
+          position: "absolute"
+        };
+      }
+    },
     classNamePrefix: "react-select"
   });
 });

package/dist/index.d.mts

@@ -6,9 +6,6 @@ export { Keyframes, keyframes } from '@emotion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { IconType } from '@ttoss/react-icons';
-import * as react_select_dist_declarations_src_useStateManager from 'react-select/dist/declarations/src/useStateManager';
-import * as react_select_dist_declarations_src_Select from 'react-select/dist/declarations/src/Select';
-import * as react_select from 'react-select';
 import { Props } from 'react-select';
 
 type ThemeProviderProps = {
@@ -54,16 +51,25 @@ type LinkProps = LinkProps$1 & {
 };
 declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
+/**
+ * We're using React Select component to build ttoss Select.
+ * More info about React Select: https://react-select.com/home
+ * ttoss Figma: https://www.figma.com/file/VrB76VkH4hKCDUe9iYhpYu/_Component-%2F-Forms-%2F-Select?type=design&mode=design&t=ZBIeOpqcvQn3yq2t-0
+ */
+
+type SelectOptionValue = string;
 type SelectOption = {
     label: string;
-    value: string | number;
+    value: SelectOptionValue;
 };
 type SelectOptions = SelectOption[];
 /**
  * TODO: remove this when we accept multi select.
  */
 type IsMulti = false;
-type SelectProps = Props<SelectOption, IsMulti> & SxProp & {
+type SelectProps = Omit<Props<SelectOption, IsMulti>, 'styles' | 'value' | 'onChange' | 'components'> & SxProp & {
+    value?: SelectOptionValue;
+    onChange?: (value: SelectOptionValue | undefined) => void;
     disabled?: boolean;
     leadingIcon?: IconType;
     trailingIcon?: IconType;
@@ -71,7 +77,9 @@ type SelectProps = Props<SelectOption, IsMulti> & SxProp & {
 /**
  * https://react-select.com/home
  */
-declare const Select: React.ForwardRefExoticComponent<Omit<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>, "onChange" | "value" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<SelectOption> & SxProp & {
+declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "styles" | "onChange" | "value" | "components"> & SxProp & {
+    value?: string | undefined;
+    onChange?: ((value: SelectOptionValue | undefined) => void) | undefined;
     disabled?: boolean | undefined;
     leadingIcon?: IconType | undefined;
     trailingIcon?: IconType | undefined;
@@ -125,4 +133,4 @@ type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'>
 };
 declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, Container, HelpText, HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, SelectOption, SelectOptions, SelectProps, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, useTheme };

package/dist/index.d.ts

@@ -6,9 +6,6 @@ export { Keyframes, keyframes } from '@emotion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { IconType } from '@ttoss/react-icons';
-import * as react_select_dist_declarations_src_useStateManager from 'react-select/dist/declarations/src/useStateManager';
-import * as react_select_dist_declarations_src_Select from 'react-select/dist/declarations/src/Select';
-import * as react_select from 'react-select';
 import { Props } from 'react-select';
 
 type ThemeProviderProps = {
@@ -54,16 +51,25 @@ type LinkProps = LinkProps$1 & {
 };
 declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
+/**
+ * We're using React Select component to build ttoss Select.
+ * More info about React Select: https://react-select.com/home
+ * ttoss Figma: https://www.figma.com/file/VrB76VkH4hKCDUe9iYhpYu/_Component-%2F-Forms-%2F-Select?type=design&mode=design&t=ZBIeOpqcvQn3yq2t-0
+ */
+
+type SelectOptionValue = string;
 type SelectOption = {
     label: string;
-    value: string | number;
+    value: SelectOptionValue;
 };
 type SelectOptions = SelectOption[];
 /**
  * TODO: remove this when we accept multi select.
  */
 type IsMulti = false;
-type SelectProps = Props<SelectOption, IsMulti> & SxProp & {
+type SelectProps = Omit<Props<SelectOption, IsMulti>, 'styles' | 'value' | 'onChange' | 'components'> & SxProp & {
+    value?: SelectOptionValue;
+    onChange?: (value: SelectOptionValue | undefined) => void;
     disabled?: boolean;
     leadingIcon?: IconType;
     trailingIcon?: IconType;
@@ -71,7 +77,9 @@ type SelectProps = Props<SelectOption, IsMulti> & SxProp & {
 /**
  * https://react-select.com/home
  */
-declare const Select: React.ForwardRefExoticComponent<Omit<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>, "onChange" | "value" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<SelectOption> & SxProp & {
+declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "styles" | "onChange" | "value" | "components"> & SxProp & {
+    value?: string | undefined;
+    onChange?: ((value: SelectOptionValue | undefined) => void) | undefined;
     disabled?: boolean | undefined;
     leadingIcon?: IconType | undefined;
     trailingIcon?: IconType | undefined;
@@ -125,4 +133,4 @@ type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'>
 };
 declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, Container, HelpText, HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, SelectOption, SelectOptions, SelectProps, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, useTheme };

package/dist/index.js

@@ -436,7 +436,8 @@ var ValueContainer = ({
 }) => {
   const {
     leadingIcon,
-    trailingIcon
+    trailingIcon,
+    isSearchable
   } = props.selectProps;
   const hasError = props.selectProps["aria-invalid"] === "true";
   const trailingIconColor = (() => {
@@ -445,12 +446,18 @@ var ValueContainer = ({
     }
     return "text";
   })();
+  const finalLeadingIcon = (() => {
+    if (!isSearchable) {
+      return leadingIcon;
+    }
+    return leadingIcon || "search";
+  })();
   return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_theme_ui8.Flex, {
     sx: {
       gap: "lg",
       flex: 1
     },
-    children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+    children: [finalLeadingIcon && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
       sx: {
         alignSelf: "center",
         pointerEvents: "none",
@@ -458,7 +465,7 @@ var ValueContainer = ({
         fontSize: "base"
       },
       children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
-        icon: leadingIcon
+        icon: finalLeadingIcon
       })
     }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui8.Flex, {
       sx: {
@@ -484,6 +491,12 @@ var ValueContainer = ({
 var Select = React4.forwardRef(({
   ...props
 }, ref) => {
+  const value = props.options?.find(option => {
+    if ("value" in option) {
+      return option.value === props.value;
+    }
+    return false;
+  });
   return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_select.default, {
     ref,
     components: {
@@ -492,11 +505,22 @@ var Select = React4.forwardRef(({
       IndicatorsContainer,
       Placeholder,
       SelectContainer,
-      ValueContainer,
-      ...props.components
+      ValueContainer
     },
     isDisabled: props.disabled,
     ...props,
+    value,
+    onChange: value2 => {
+      props.onChange?.(value2?.value);
+    },
+    styles: {
+      input: baseStyles => {
+        return {
+          ...baseStyles,
+          position: "absolute"
+        };
+      }
+    },
     classNamePrefix: "react-select"
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -23,24 +23,24 @@
     "@theme-ui/match-media": "^0.16.1",
     "react-select": "^5.8.0",
     "theme-ui": "^0.16.1",
-    "@ttoss/theme": "^1.6.6"
+    "@ttoss/theme": "^1.6.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.2.1"
+    "@ttoss/react-icons": "^0.2.3"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
     "@iconify-icons/mdi-light": "^1.2.5",
-    "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.29",
+    "@types/jest": "^29.5.10",
+    "@types/react": "^18.2.38",
     "jest": "^29.7.0",
     "react": "^18.2.0",
-    "tsup": "^7.2.0",
-    "@ttoss/config": "^1.31.0",
-    "@ttoss/react-icons": "^0.2.1",
-    "@ttoss/test-utils": "^1.24.1"
+    "tsup": "^8.0.1",
+    "@ttoss/config": "^1.31.1",
+    "@ttoss/react-icons": "^0.2.3",
+    "@ttoss/test-utils": "^2.0.0"
   },
   "keywords": [
     "React",

package/src/components/Select.tsx

@@ -18,9 +18,11 @@ import ReactSelect, {
   components,
 } from 'react-select';
 
+type SelectOptionValue = string;
+
 export type SelectOption = {
   label: string;
-  value: string | number;
+  value: SelectOptionValue;
 };
 
 export type SelectOptions = SelectOption[];
@@ -30,8 +32,13 @@ export type SelectOptions = SelectOption[];
  */
 type IsMulti = false;
 
-export type SelectProps = ReactSelectProps<SelectOption, IsMulti> &
+export type SelectProps = Omit<
+  ReactSelectProps<SelectOption, IsMulti>,
+  'styles' | 'value' | 'onChange' | 'components'
+> &
   SxProp & {
+    value?: SelectOptionValue;
+    onChange?: (value: SelectOptionValue | undefined) => void;
     disabled?: boolean;
     leadingIcon?: IconType;
     trailingIcon?: IconType;
@@ -142,7 +149,7 @@ const SelectContainer = ({
   children,
   ...props
 }: ContainerProps<SelectOption, IsMulti>) => {
-  const { sx, css } = props.selectProps as SelectProps;
+  const { sx, css } = props.selectProps as unknown as SelectProps;
 
   return (
     <Box sx={sx} css={css}>
@@ -158,7 +165,8 @@ const ValueContainer = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ...props
 }: ValueContainerProps<SelectOption, IsMulti>) => {
-  const { leadingIcon, trailingIcon } = props.selectProps as SelectProps;
+  const { leadingIcon, trailingIcon, isSearchable } =
+    props.selectProps as unknown as SelectProps;
 
   const hasError = props.selectProps['aria-invalid'] === 'true';
 
@@ -170,6 +178,14 @@ const ValueContainer = ({
     return 'text';
   })();
 
+  const finalLeadingIcon = (() => {
+    if (!isSearchable) {
+      return leadingIcon;
+    }
+
+    return leadingIcon || 'search';
+  })();
+
   return (
     <Flex
       sx={{
@@ -177,7 +193,7 @@ const ValueContainer = ({
         flex: 1,
       }}
     >
-      {leadingIcon && (
+      {finalLeadingIcon && (
         <Text
           sx={{
             alignSelf: 'center',
@@ -186,7 +202,7 @@ const ValueContainer = ({
             fontSize: 'base',
           }}
         >
-          <Icon icon={leadingIcon} />
+          <Icon icon={finalLeadingIcon} />
         </Text>
       )}
       <Flex
@@ -221,6 +237,14 @@ const ValueContainer = ({
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const Select = React.forwardRef<any, SelectProps>(
   ({ ...props }, ref) => {
+    const value = props.options?.find((option) => {
+      if ('value' in option) {
+        return option.value === props.value;
+      }
+
+      return false;
+    }) as SelectOption | undefined;
+
     return (
       <ReactSelect<SelectOption, IsMulti>
         ref={ref}
@@ -234,10 +258,21 @@ export const Select = React.forwardRef<any, SelectProps>(
           Placeholder,
           SelectContainer,
           ValueContainer,
-          ...props.components,
         }}
         isDisabled={props.disabled}
         {...props}
+        value={value}
+        onChange={(value) => {
+          props.onChange?.(value?.value);
+        }}
+        styles={{
+          input: (baseStyles) => {
+            return {
+              ...baseStyles,
+              position: 'absolute',
+            };
+          },
+        }}
         /**
          * https://react-select.com/styles#the-classnameprefix-prop
          */