@tecsinapse/react-web-kit 3.3.8 → 3.3.9

package/dist/cjs/components/molecules/Select/Select.js

@@ -104,13 +104,25 @@ const Select = ({
     () => setDropDownVisible((prev) => !prev),
     [setDropDownVisible]
   );
+  const RightComponent = React.useMemo(
+    () => /* @__PURE__ */ React.createElement(
+      styled.StyledIconComponent,
+      {
+        name: "chevron-down",
+        type: "material-community",
+        size: "centi",
+        disabled
+      }
+    ),
+    [disabled]
+  );
   return /* @__PURE__ */ React.createElement(styled.StyledContainer, { ref: refDropDown, ...rest }, /* @__PURE__ */ React.createElement(styled.StyledInputContainer, { onFocus: handlePressInput }, /* @__PURE__ */ React.createElement(
     reactCore.PressableInputContainer,
     {
       label: _label,
       onPress,
       disabled,
-      rightComponent: styled.RightComponent
+      rightComponent: RightComponent
     },
     /* @__PURE__ */ React.createElement(
       reactCore.Text,

package/dist/cjs/components/molecules/Select/styled.js

@@ -2,7 +2,7 @@
 
 var styled = require('@emotion/styled');
 var reactCore = require('@tecsinapse/react-core');
-var React = require('react');
+var styled$1 = require('@emotion/native');
 
 const StyledContainer = styled("div")`
   display: flex;
@@ -15,16 +15,11 @@ const StyledContainer = styled("div")`
 const StyledInputContainer = styled("div")`
   width: 100%;
 `;
-const RightComponent = /* @__PURE__ */ React.createElement(
-  reactCore.Icon,
-  {
-    name: "chevron-down",
-    type: "material-community",
-    size: "centi",
-    style: { marginRight: 12 }
-  }
-);
+const StyledIconComponent = styled$1(reactCore.Icon)`
+  margin-right: 12px;
+  color: ${({ disabled, theme }) => disabled ? theme.color.secondary.light : "inherit"};
+`;
 
-exports.RightComponent = RightComponent;
 exports.StyledContainer = StyledContainer;
+exports.StyledIconComponent = StyledIconComponent;
 exports.StyledInputContainer = StyledInputContainer;

package/dist/esm/components/molecules/Select/Select.js

@@ -1,11 +1,11 @@
 import { PressableInputContainer, Text } from '@tecsinapse/react-core';
-import React__default, { useState, useId, useEffect } from 'react';
+import React__default, { useState, useId, useEffect, useMemo } from 'react';
 import { Transition } from 'react-transition-group';
 import { useClickAwayListener } from '../../../hooks/useClickAwayListener.js';
 import { defaultStyles, transition } from './animations.js';
 import Dropdown from './Dropdown/Dropdown.js';
 import { getDisplayValue } from './functions.js';
-import { StyledContainer, StyledInputContainer, RightComponent } from './styled.js';
+import { StyledIconComponent, StyledContainer, StyledInputContainer } from './styled.js';
 
 const Select = ({
   value,
@@ -102,6 +102,18 @@ const Select = ({
     () => setDropDownVisible((prev) => !prev),
     [setDropDownVisible]
   );
+  const RightComponent = useMemo(
+    () => /* @__PURE__ */ React__default.createElement(
+      StyledIconComponent,
+      {
+        name: "chevron-down",
+        type: "material-community",
+        size: "centi",
+        disabled
+      }
+    ),
+    [disabled]
+  );
   return /* @__PURE__ */ React__default.createElement(StyledContainer, { ref: refDropDown, ...rest }, /* @__PURE__ */ React__default.createElement(StyledInputContainer, { onFocus: handlePressInput }, /* @__PURE__ */ React__default.createElement(
     PressableInputContainer,
     {

package/dist/esm/components/molecules/Select/styled.js

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Icon } from '@tecsinapse/react-core';
-import React__default from 'react';
+import styled$1 from '@emotion/native';
 
 const StyledContainer = styled("div")`
   display: flex;
@@ -13,14 +13,9 @@ const StyledContainer = styled("div")`
 const StyledInputContainer = styled("div")`
   width: 100%;
 `;
-const RightComponent = /* @__PURE__ */ React__default.createElement(
-  Icon,
-  {
-    name: "chevron-down",
-    type: "material-community",
-    size: "centi",
-    style: { marginRight: 12 }
-  }
-);
+const StyledIconComponent = styled$1(Icon)`
+  margin-right: 12px;
+  color: ${({ disabled, theme }) => disabled ? theme.color.secondary.light : "inherit"};
+`;
 
-export { RightComponent, StyledContainer, StyledInputContainer };
+export { StyledContainer, StyledIconComponent, StyledInputContainer };

package/dist/types/components/molecules/Select/styled.d.ts

@@ -1,10 +1,15 @@
-import React from 'react';
+/// <reference types="react" />
 export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledInputContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const RightComponent: JSX.Element;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledIconComponent: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps & {
+    disabled: boolean;
+}>, {}, {}>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "3.3.8",
+  "version": "3.3.9",
   "license": "MIT",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -21,7 +21,7 @@
     "@emotion/native": "~11.11.0",
     "@emotion/react": "~11.11.0",
     "@emotion/styled": "~11.11.0",
-    "@tecsinapse/react-core": "3.3.5",
+    "@tecsinapse/react-core": "3.3.6",
     "date-fns": "~2.30.0",
     "react-native-vector-icons": "^9.2.0",
     "react-transition-group": "~4.4.5"
@@ -40,5 +40,5 @@
     "react-dom": "^18.0.0",
     "react-native-web": ">=0.18.0 <1"
   },
-  "gitHead": "588127ddda450b66ab81cb32352f0b4d8fcf584c"
+  "gitHead": "a1489e62337d020ca4e197c864e64f464a20d1a1"
 }