@onesy/ui-react 1.0.125 → 1.0.127

package/TextField/TextField.js

@@ -401,7 +401,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
     const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
     const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
     const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', version = 'filled', size = 'regular', rootRef, valueDefault, value: value_, onChange, name, label: label_, align, start, startVerticalAlign = 'start', end: end_, endVerticalAlign: endVerticalAlign_ = 'start', placeholder, fullWidth: fullWidth_, helperText, counter, prefix, sufix, noPrefixMargin, noSufixMargin, enabled, autoFocus, autoComplete, type: type_ = 'text', required, optional, optionalText = 'optional', error, multiline, rows: rows_, minRows = 1, maxRows, clear, focus: focus_, footer: footer_, subscription, controlled, minimal, restoreSelection = false, minWidth, readOnly, disabled, onInput: onInput_, onFocus: onFocus_, onBlur: onBlur_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, inputProps = {}, InputWrapperProps = {}, HelperTextProps, IconProps, IconClear = IconMaterialCloseW100_1.default, InputComponent: InputComponent_, WrapperComponent = 'div', Component = 'div', className, style, children, 
+    const { tonal = true, color = 'primary', version = 'filled', size = 'regular', rootRef, valueDefault, value: value_, onChange, name, label: label_, align, start, startVerticalAlign: startVerticalAlign_ = 'start', end: end_, endVerticalAlign: endVerticalAlign_ = 'start', placeholder, fullWidth: fullWidth_, helperText, counter, prefix, sufix, noPrefixMargin, noSufixMargin, enabled, autoFocus, autoComplete, type: type_ = 'text', required, optional, optionalText = 'optional', error, multiline, rows: rows_, minRows = 1, maxRows, clear, focus: focus_, footer: footer_, subscription, controlled, minimal, restoreSelection = false, minWidth, readOnly, disabled, onInput: onInput_, onFocus: onFocus_, onBlur: onBlur_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, inputProps = {}, InputWrapperProps = {}, HelperTextProps, IconProps, IconClear = IconMaterialCloseW100_1.default, InputComponent: InputComponent_, WrapperComponent = 'div', Component = 'div', className, style, children, 
     // Other
     colorUnchecked } = props, other = __rest(props, ["tonal", "color", "version", "size", "rootRef", "valueDefault", "value", "onChange", "name", "label", "align", "start", "startVerticalAlign", "end", "endVerticalAlign", "placeholder", "fullWidth", "helperText", "counter", "prefix", "sufix", "noPrefixMargin", "noSufixMargin", "enabled", "autoFocus", "autoComplete", "type", "required", "optional", "optionalText", "error", "multiline", "rows", "minRows", "maxRows", "clear", "focus", "footer", "subscription", "controlled", "minimal", "restoreSelection", "minWidth", "readOnly", "disabled", "onInput", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "inputProps", "InputWrapperProps", "HelperTextProps", "IconProps", "IconClear", "InputComponent", "WrapperComponent", "Component", "className", "style", "children", "colorUnchecked"]);
     const { classes } = useStyle();
@@ -431,6 +431,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
         breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
     });
     const label = name !== undefined ? name : label_;
+    let startVerticalAlign = startVerticalAlign_;
     let endVerticalAlign = endVerticalAlign_;
     const fullWidth = (0, utils_2.valueBreakpoints)(fullWidth_, undefined, breakpoints, theme);
     const rowValue = () => {
@@ -685,27 +686,26 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
     const iconProps = {
         size
     };
-    const end = react_1.default.useMemo(() => {
-        const endItems = (Array.isArray(end_) ? end_ : [end_]).filter(Boolean);
-        const password = type === 'password';
-        if (value && clear) {
-            const exists = endItems === null || endItems === void 0 ? void 0 : endItems.find(item => item.key === refs.ids.clear);
-            if (!exists) {
-                if (props.endVerticalAlign === undefined)
-                    endVerticalAlign = 'center';
-                endItems.push((0, jsx_runtime_1.jsx)(IconClear, Object.assign({ color: 'inherit', onClick: onClear }, IconProps, { className: (0, style_react_1.classNames)([
-                        IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
-                        classes.clear
-                    ]) }), refs.ids.clear));
-            }
-        }
-        if (value && password) {
-            if (!multiline && props.endVerticalAlign === undefined)
-                endVerticalAlign = version === 'text' ? 'end' : 'center';
-            endItems.unshift((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: visible ? l('Hide password') : l('View password'), color: 'inverted' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onToggleVisible, color: 'default', size: size === 'large' ? 'regular' : 'small' }, { children: visible ? (0, jsx_runtime_1.jsx)(IconMaterialPassword2OffW100_1.default, Object.assign({}, iconProps)) : (0, jsx_runtime_1.jsx)(IconMaterialPassword2W100_1.default, Object.assign({}, iconProps)) })) })));
+    const isTypePassword = type === 'password';
+    const end = (Array.isArray(end_) ? end_ : [end_]).filter(Boolean);
+    if (value && clear) {
+        const exists = end === null || end === void 0 ? void 0 : end.find(item => item.key === refs.ids.clear);
+        if (!exists) {
+            end.push((0, jsx_runtime_1.jsx)(IconClear, Object.assign({ color: 'inherit', onClick: onClear }, IconProps, { className: (0, style_react_1.classNames)([
+                    IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
+                    classes.clear
+                ]) }), refs.ids.clear));
         }
-        return endItems;
-    }, [value, version, multiline, visible, onClear, type, end_]);
+    }
+    if (value && isTypePassword) {
+        end.unshift((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: visible ? l('Hide password') : l('View password'), color: 'inverted' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onToggleVisible, color: 'default', size: size === 'large' ? 'regular' : 'small' }, { children: visible ? (0, jsx_runtime_1.jsx)(IconMaterialPassword2OffW100_1.default, Object.assign({}, iconProps)) : (0, jsx_runtime_1.jsx)(IconMaterialPassword2W100_1.default, Object.assign({}, iconProps)) })) })));
+    }
+    if (!multiline) {
+        if (props.startVerticalAlign === undefined)
+            startVerticalAlign = version === 'text' ? 'end' : 'center';
+        if (props.endVerticalAlign === undefined)
+            endVerticalAlign = version === 'text' ? 'end' : 'center';
+    }
     const valueWithData = value !== undefined && String(value);
     return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({}, WrapperProps, { children: [(0, jsx_runtime_1.jsxs)(Component, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchStart: onMouseEnter, onTouchEnd: onMouseLeave, role: 'textbox', "aria-multiline": multiline, "aria-labelledby": refs.ids.label }, ComponentProps, { className: (0, style_react_1.classNames)([
                     (0, utils_2.staticClassName)('TextField', theme) && [

package/esm/TextField/TextField.js

@@ -496,7 +496,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       label: label_,
       align,
       start,
-      startVerticalAlign = 'start',
+      startVerticalAlign: startVerticalAlign_ = 'start',
       end: end_,
       endVerticalAlign: endVerticalAlign_ = 'start',
       placeholder,
@@ -579,6 +579,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     });
   });
   const label = name !== undefined ? name : label_;
+  let startVerticalAlign = startVerticalAlign_;
   let endVerticalAlign = endVerticalAlign_;
   const fullWidth = valueBreakpoints(fullWidth_, undefined, breakpoints, theme);
   const rowValue = () => {
@@ -803,35 +804,34 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const iconProps = {
     size
   };
-  const end = React.useMemo(() => {
-    const endItems = (Array.isArray(end_) ? end_ : [end_]).filter(Boolean);
-    const password = type === 'password';
-    if (value && clear) {
-      const exists = endItems?.find(item => item.key === refs.ids.clear);
-      if (!exists) {
-        if (props.endVerticalAlign === undefined) endVerticalAlign = 'center';
-        endItems.push(/*#__PURE__*/React.createElement(IconClear, _extends({
-          key: refs.ids.clear,
-          color: "inherit",
-          onClick: onClear
-        }, IconProps, {
-          className: classNames([IconProps?.className, classes.clear])
-        })));
-      }
-    }
-    if (value && password) {
-      if (!multiline && props.endVerticalAlign === undefined) endVerticalAlign = version === 'text' ? 'end' : 'center';
-      endItems.unshift(/*#__PURE__*/React.createElement(Tooltip, {
-        name: visible ? l('Hide password') : l('View password'),
-        color: "inverted"
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        onClick: onToggleVisible,
-        color: "default",
-        size: size === 'large' ? 'regular' : 'small'
-      }, visible ? /*#__PURE__*/React.createElement(IconMaterialPassword2Off, iconProps) : /*#__PURE__*/React.createElement(IconMaterialPassword2, iconProps))));
+  const isTypePassword = type === 'password';
+  const end = (Array.isArray(end_) ? end_ : [end_]).filter(Boolean);
+  if (value && clear) {
+    const exists = end?.find(item => item.key === refs.ids.clear);
+    if (!exists) {
+      end.push(/*#__PURE__*/React.createElement(IconClear, _extends({
+        key: refs.ids.clear,
+        color: "inherit",
+        onClick: onClear
+      }, IconProps, {
+        className: classNames([IconProps?.className, classes.clear])
+      })));
     }
-    return endItems;
-  }, [value, version, multiline, visible, onClear, type, end_]);
+  }
+  if (value && isTypePassword) {
+    end.unshift(/*#__PURE__*/React.createElement(Tooltip, {
+      name: visible ? l('Hide password') : l('View password'),
+      color: "inverted"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      onClick: onToggleVisible,
+      color: "default",
+      size: size === 'large' ? 'regular' : 'small'
+    }, visible ? /*#__PURE__*/React.createElement(IconMaterialPassword2Off, iconProps) : /*#__PURE__*/React.createElement(IconMaterialPassword2, iconProps))));
+  }
+  if (!multiline) {
+    if (props.startVerticalAlign === undefined) startVerticalAlign = version === 'text' ? 'end' : 'center';
+    if (props.endVerticalAlign === undefined) endVerticalAlign = version === 'text' ? 'end' : 'center';
+  }
   const valueWithData = value !== undefined && String(value);
   return /*#__PURE__*/React.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Component, _extends({
     onMouseEnter: onMouseEnter,

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.124
+/** @license UiReact v1.0.126
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.125",
+  "version": "1.0.127",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar Erić <lazareric1@proton.me>",