@eleventheye/asui 2.1.4 → 2.1.5

package/dist/astextfield/ASTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASTextField.d.ts","sourceRoot":"","sources":["../../src/astextfield/ASTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUvD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmH3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ASTextField.d.ts","sourceRoot":"","sources":["../../src/astextfield/ASTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAK9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUvD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqI3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/astextfield/ASTextField.js

@@ -7,7 +7,8 @@ const ASUI_types_1 = require("../apptypes/ASUI.types");
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
 const icons_1 = require("../icons");
 const styles_1 = require("./styles");
-const ASTextField = ({ className = '', theme = astheme_1.default, value = '', onChange = () => undefined, size = ASUI_types_1.ASComponentSize.Medium, type = 'text', showClearButton = false, showSearchIcon = false, ...props }) => {
+const ASTextField = ({ className = '', theme = astheme_1.default, value = '', onChange = () => undefined, size = ASUI_types_1.ASComponentSize.Medium, type = 'text', showClearButton = false, showSearchIcon = false, disableAutofill = false, ...props }) => {
+    const passwordTypeRef = (0, react_1.useRef)(false);
     const genericId = (0, react_1.useId)();
     const textFieldId = props.id || genericId;
     const [valueString, setValueString] = (0, react_1.useState)(value);
@@ -18,9 +19,16 @@ const ASTextField = ({ className = '', theme = astheme_1.default, value = '', on
     const [leftIconCls, setLeftIconCls] = (0, react_1.useState)('LeftIconOff');
     const [passwordCls, setPasswordCls] = (0, react_1.useState)('');
     const [showType, setShowType] = (0, react_1.useState)(type);
+    (0, react_1.useEffect)(() => {
+        setShowType(type);
+    }, [type]);
     (0, react_1.useEffect)(() => {
         let searchIcon = showSearchIcon;
         let clearIcon = showClearButton;
+        if (passwordTypeRef.current && type !== 'text' && type !== 'password') {
+            passwordTypeRef.current = false;
+            setPasswordIconVisible(false);
+        }
         if (type === 'search') {
             searchIcon = true;
             clearIcon = true;
@@ -29,6 +37,7 @@ const ASTextField = ({ className = '', theme = astheme_1.default, value = '', on
             clearIcon = true;
         }
         if (type === 'password') {
+            passwordTypeRef.current = true;
             setPasswordIconVisible(true);
         }
         setSearchIconVisible(searchIcon);
@@ -63,6 +72,6 @@ const ASTextField = ({ className = '', theme = astheme_1.default, value = '', on
         setShowType(showType === 'password' ? 'text' : 'password');
     };
     const baseCls = `"ASTextFieldInputContainer" ${size} ${leftIconCls} ${rightIconCls} ${passwordCls} ${className}`;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ASTextFieldInputContainer, { theme: theme, className: baseCls, style: props.style, children: [searchIconVisible && ((0, jsx_runtime_1.jsx)(styles_1.ASTextFieldSearchIcon, { theme: theme, className: "ASTextFieldSearchIcon", children: (0, jsx_runtime_1.jsx)(icons_1.SearchIcon, { color: "#333333", fillColor: "#333333", size: 20 }) })), (0, jsx_runtime_1.jsx)(styles_1.ASTextFieldInput, { theme: theme, id: textFieldId, className: "ASTextFieldInput", type: showType, value: valueString, onChange: onValueChange, onFocus: onInputFieldFocus, ...props }), clearIconVisible && ((0, jsx_runtime_1.jsx)(styles_1.ASTextFieldClickIcon, { theme: theme, className: "ASTextFieldClearIcon", onClick: clearValue, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: "transparent", fillColor: "#333333", circleStrokeColor: "#666666", circleStrokeWidth: 0.5, size: 20 }) })), passwordIconVisible && ((0, jsx_runtime_1.jsxs)(styles_1.ASTextFieldClickIcon, { theme: theme, className: "ASTextFieldPasswordIcon", onClick: onPasswordShowHide, children: [showType === 'password' && (0, jsx_runtime_1.jsx)(styles_1.ScaledEyeIcon, { color: "#333333", fillColor: "#333333", size: 20 }), showType === 'text' && (0, jsx_runtime_1.jsx)(styles_1.ScaledSlashedEyeIcon, { color: "#333333", fillColor: "#333333", size: 20 })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ASTextFieldInputContainer, { theme: theme, className: baseCls, style: props.style, children: [searchIconVisible && ((0, jsx_runtime_1.jsx)(styles_1.ASTextFieldSearchIcon, { theme: theme, className: "ASTextFieldSearchIcon", children: (0, jsx_runtime_1.jsx)(icons_1.SearchIcon, { color: "#333333", fillColor: "#333333", size: 20 }) })), (0, jsx_runtime_1.jsx)(styles_1.ASTextFieldInput, { theme: theme, autoComplete: passwordIconVisible ? 'new-password' : disableAutofill ? 'off' : 'on', "aria-autocomplete": passwordIconVisible ? 'none' : 'list', autoCorrect: passwordIconVisible ? 'off' : 'on', autoCapitalize: 'none', spellCheck: passwordIconVisible ? 'false' : 'true', autoFocus: true, id: textFieldId, className: "ASTextFieldInput", type: showType, value: valueString, onChange: onValueChange, onFocus: onInputFieldFocus, ...props }), clearIconVisible && ((0, jsx_runtime_1.jsx)(styles_1.ASTextFieldClickIcon, { theme: theme, className: "ASTextFieldClearIcon", onClick: clearValue, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: "transparent", fillColor: "#333333", circleStrokeColor: "#666666", circleStrokeWidth: 0.5, size: 20 }) })), passwordIconVisible && ((0, jsx_runtime_1.jsxs)(styles_1.ASTextFieldClickIcon, { theme: theme, className: "ASTextFieldPasswordIcon", onClick: onPasswordShowHide, children: [showType === 'password' && (0, jsx_runtime_1.jsx)(styles_1.ScaledEyeIcon, { color: "#333333", fillColor: "#333333", size: 20 }), showType === 'text' && (0, jsx_runtime_1.jsx)(styles_1.ScaledSlashedEyeIcon, { color: "#333333", fillColor: "#333333", size: 20 })] }))] }));
 };
 exports.default = ASTextField;

package/dist/astextfield/ASTextField.types.d.ts

@@ -7,6 +7,7 @@ export type ASTextFieldProps = {
     onChange?: (value: string) => void;
     size?: ASComponentSize;
     showClearButton?: boolean;
+    disableAutofill?: boolean;
     showSearchIcon?: boolean;
 } & Pick<React.HTMLProps<HTMLInputElement>, 'style' | 'type' | 'placeholder' | 'id' | 'onBlur' | 'onFocus'>;
 //# sourceMappingURL=ASTextField.types.d.ts.map

package/dist/astextfield/ASTextField.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASTextField.types.d.ts","sourceRoot":"","sources":["../../src/astextfield/ASTextField.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,cAAc,MAAM,YAAY,CAAC;AAExC,MAAM,MAAM,gBAAgB,GAAG;IAK7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,KAAK,CAAC,EAAE,OAAO,cAAc,CAAC;IAM9B,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IASnC,IAAI,CAAC,EAAE,eAAe,CAAC;IAOvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAQ1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC"}
+{"version":3,"file":"ASTextField.types.d.ts","sourceRoot":"","sources":["../../src/astextfield/ASTextField.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,cAAc,MAAM,YAAY,CAAC;AAExC,MAAM,MAAM,gBAAgB,GAAG;IAK7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,KAAK,CAAC,EAAE,OAAO,cAAc,CAAC;IAM9B,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IASnC,IAAI,CAAC,EAAE,eAAe,CAAC;IAOvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAO1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAQ1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC"}

package/dist/astextfield/styles.js

@@ -98,7 +98,7 @@ exports.ASTextFieldInputContainer = styled_components_1.default.div `
 
   // Chrome autofill update
   // input:-webkit-autofill,
-  input:-webkit-autofill:hover,
+  * input:-webkit-autofill:hover,
   input:-webkit-autofill:focus,
   textarea:-webkit-autofill,
   textarea:-webkit-autofill:hover,

package/dist/icons/ASIcon.js

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("./styles");
 const CircleSvg = ({ size = 24, circleStrokeWidth = 1.5, circleFillColor = 'transparent', circleStrokeColor = '#fffff0', circleFillOpacity = 1, withCircle = false, }) => ((0, jsx_runtime_1.jsx)(styles_1.IconCircle, { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("circle", { fill: withCircle ? circleFillColor : 'none', fillOpacity: circleFillOpacity, cx: "12", cy: "12", r: "10.5", stroke: withCircle ? circleStrokeColor : 'transparent', strokeWidth: `${circleStrokeWidth}px` }) }));
 const ASIcon = ({ className = '', size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', withCircle = false, children, ...props }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.IconWrapper, { className: className, children: [(0, jsx_runtime_1.jsx)(CircleSvg, { size: size, circleStrokeColor, withCircle, ...props }), react_1.default.Children.map(children, (child) => react_1.default.isValidElement(child)
+    return ((0, jsx_runtime_1.jsxs)(styles_1.IconWrapper, { className: className, style: props.style, children: [(0, jsx_runtime_1.jsx)(CircleSvg, { size: size, circleStrokeColor, withCircle, ...props }), react_1.default.Children.map(children, (child) => react_1.default.isValidElement(child)
                 ? react_1.default.cloneElement(child, { size, color, fillColor, withCircle, fillOpacity, ...props })
                 : child)] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eleventheye/asui",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "private": false,
   "description": "AS UI React Library by eleventheye (another one!)",
   "keywords": [