@ttoss/ui 4.0.1 → 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;

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;

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.1",
+  "version": "4.0.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -23,12 +23,12 @@
     "@theme-ui/match-media": "^0.16.1",
     "react-select": "^5.8.0",
     "theme-ui": "^0.16.1",
-    "@ttoss/theme": "^1.6.7"
+    "@ttoss/theme": "^1.6.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.2.2"
+    "@ttoss/react-icons": "^0.2.3"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
@@ -39,7 +39,7 @@
     "react": "^18.2.0",
     "tsup": "^8.0.1",
     "@ttoss/config": "^1.31.1",
-    "@ttoss/react-icons": "^0.2.2",
+    "@ttoss/react-icons": "^0.2.3",
     "@ttoss/test-utils": "^2.0.0"
   },
   "keywords": [

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
          */