@onesy/ui-react 1.0.122 → 1.0.123

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Lazar Erić, lazareric2@gmail.com
+Copyright (c) 2025 Lazar Erić, lazareric1@proton.me
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.MD

@@ -32,8 +32,6 @@
 
 <br />
 
-## Getting started
-
 ### Add
 
 ```sh

package/TextField/TextField.js

@@ -18,7 +18,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("@onesy/utils");
 const style_react_1 = require("@onesy/style-react");
+const IconMaterialPassword2W100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialPassword2W100"));
+const IconMaterialPassword2OffW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialPassword2OffW100"));
 const IconMaterialCloseW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
+const Tooltip_1 = __importDefault(require("../Tooltip"));
+const IconButton_1 = __importDefault(require("../IconButton"));
 const Type_1 = __importDefault(require("../Type"));
 const Line_1 = __importDefault(require("../Line"));
 const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
@@ -76,7 +80,7 @@ const useStyle = (0, style_react_1.style)(theme => {
         },
         inputWrapper: Object.assign({ 
             // Reset
-            margin: '0', border: '0', fontFamily: 'inherit', fontSize: '100%', lineHeight: '1.15', overflow: 'visible', boxSizing: 'border-box', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', opacity: '0', transition: theme.methods.transitions.make('opacity'), borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, cursor: 'text', flex: '1 1 auto' }, theme.typography.values.b2),
+            margin: '0', border: '0', fontFamily: 'inherit', fontSize: '100%', lineHeight: '1.15', overflow: 'visible', boxSizing: 'border-box', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', opacity: '0', transition: theme.methods.transitions.make('opacity'), borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, cursor: 'text', zIndex: '1', flex: '1 1 auto' }, theme.typography.values.b2),
         inputWrapper_focus: {
             opacity: '1'
         },
@@ -144,7 +148,7 @@ const useStyle = (0, style_react_1.style)(theme => {
         input_align_end: {
             textAlign: 'end'
         },
-        label: Object.assign(Object.assign({ position: 'absolute', insetInlineStart: '16px', transformOrigin: 'top left', transition: theme.methods.transitions.make(['color', 'inset', 'margin', 'transform']), pointerEvents: 'none', userSelect: 'none' }, overflow), { width: 'auto' }),
+        label: Object.assign(Object.assign({ position: 'absolute', insetInlineStart: '16px', transformOrigin: 'top left', transition: theme.methods.transitions.make(['color', 'inset', 'margin', 'transform']), pointerEvents: 'none', userSelect: 'none', zIndex: '1' }, overflow), { width: 'auto' }),
         label_regular: {
             top: '50%',
             transform: 'translate(0px, -50%) scale(1)'
@@ -187,14 +191,14 @@ const useStyle = (0, style_react_1.style)(theme => {
             insetInlineStart: '15px',
             transform: 'translate(0, 6px) scale(0.667)'
         },
-        background: Object.assign(Object.assign({}, other), { background: 'currentColor', borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected, zIndex: '-1', transition: theme.methods.transitions.make(['opacity']) }),
+        background: Object.assign(Object.assign({}, other), { background: 'currentColor', borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected, zIndex: '0', transition: theme.methods.transitions.make(['opacity']) }),
         background_hover: {
             opacity: theme.palette.visual_contrast.default.opacity.focus
         },
         background_focus: {
             opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected
         },
-        border: Object.assign(Object.assign({}, other), { borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, boxShadow: 'inset 0px -1px 0px 0px currentColor', transition: theme.methods.transitions.make(['box-shadow']) }),
+        border: Object.assign(Object.assign({}, other), { borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, boxShadow: 'inset 0px -1px 0px 0px currentColor', zIndex: '1', transition: theme.methods.transitions.make(['box-shadow']) }),
         border_focus: {
             boxShadow: 'inset 0px -2px 0px 0px currentColor'
         },
@@ -368,6 +372,8 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyTextField) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     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, 
     // 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"]);
@@ -417,7 +423,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
     const [hover, setHover] = react_1.default.useState(false);
     const [row, setRow] = react_1.default.useState(rowValue);
     const [rows, setRows] = react_1.default.useState(1);
-    let end = end_;
+    const [visible, setVisible] = react_1.default.useState(false);
     let type = type_;
     const styles = {
         root: {},
@@ -473,6 +479,9 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
                 subscription.unsubscribe(method);
         };
     }, [subscription]);
+    const onToggleVisible = react_1.default.useCallback(() => {
+        setVisible((item) => !item);
+    }, []);
     const onUpdateRows = () => {
         if (multiline && row !== undefined) {
             const heightValue = refs.input.current.style.height;
@@ -582,19 +591,6 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
     const Wrapper = footer ? WrapperComponent : react_1.default.Fragment;
     let ComponentProps = {};
     let WrapperProps = {};
-    if (value && clear) {
-        if (!Array.isArray(end))
-            end = [end].filter(Boolean);
-        const exists = end === null || end === void 0 ? void 0 : end.find(item => item.key === refs.ids.clear);
-        if (!exists) {
-            if (props.endVerticalAlign === undefined)
-                endVerticalAlign = 'center';
-            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));
-        }
-    }
     if (footer) {
         WrapperProps = Object.assign({}, other);
         WrapperProps.ref = item => {
@@ -659,6 +655,28 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
     if (!['input', 'textarea'].includes(InputComponent)) {
         inputProps.onInput = onInput;
     }
+    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));
+            }
+        }
+        const iconButtonPassword = ((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: '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 (password)
+            endItems.unshift(iconButtonPassword);
+        return endItems;
+    }, [visible, onClear, type, end_]);
     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

@@ -7,7 +7,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { clamp, is, isEnvironment, unique } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialPassword2 from '@onesy/icons-material-rounded-react/IconMaterialPassword2W100';
+import IconMaterialPassword2Off from '@onesy/icons-material-rounded-react/IconMaterialPassword2OffW100';
 import IconMaterialClose from '@onesy/icons-material-rounded-react/IconMaterialCloseW100';
+import TooltipElement from '../Tooltip';
+import IconButtonElement from '../IconButton';
 import TypeElement from '../Type';
 import LineElement from '../Line';
 import useMediaQuery from '../useMediaQuery';
@@ -100,6 +104,7 @@ const useStyle = styleMethod(theme => {
       transition: theme.methods.transitions.make('opacity'),
       borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
       cursor: 'text',
+      zIndex: '1',
       flex: '1 1 auto'
     }, theme.typography.values.b2),
     inputWrapper_focus: {
@@ -182,7 +187,8 @@ const useStyle = styleMethod(theme => {
       transformOrigin: 'top left',
       transition: theme.methods.transitions.make(['color', 'inset', 'margin', 'transform']),
       pointerEvents: 'none',
-      userSelect: 'none'
+      userSelect: 'none',
+      zIndex: '1'
     }, overflow), {}, {
       width: 'auto'
     }),
@@ -232,7 +238,7 @@ const useStyle = styleMethod(theme => {
       background: 'currentColor',
       borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
       opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected,
-      zIndex: '-1',
+      zIndex: '0',
       transition: theme.methods.transitions.make(['opacity'])
     }),
     background_hover: {
@@ -244,6 +250,7 @@ const useStyle = styleMethod(theme => {
     border: _objectSpread(_objectSpread({}, other), {}, {
       borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
       boxShadow: 'inset 0px -1px 0px 0px currentColor',
+      zIndex: '1',
       transition: theme.methods.transitions.make(['box-shadow'])
     }),
     border_focus: {
@@ -447,6 +454,8 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTextField?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
   const {
       tonal = true,
       color = 'primary',
@@ -561,7 +570,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const [hover, setHover] = React.useState(false);
   const [row, setRow] = React.useState(rowValue);
   const [rows, setRows] = React.useState(1);
-  let end = end_;
+  const [visible, setVisible] = React.useState(false);
   let type = type_;
   const styles = {
     root: {},
@@ -614,6 +623,9 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (subscription) subscription.unsubscribe(method);
     };
   }, [subscription]);
+  const onToggleVisible = React.useCallback(() => {
+    setVisible(item => !item);
+  }, []);
   const onUpdateRows = () => {
     if (multiline && row !== undefined) {
       const heightValue = refs.input.current.style.height;
@@ -715,20 +727,6 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Wrapper = footer ? WrapperComponent : React.Fragment;
   let ComponentProps = {};
   let WrapperProps = {};
-  if (value && clear) {
-    if (!Array.isArray(end)) end = [end].filter(Boolean);
-    const exists = end?.find(item => item.key === refs.ids.clear);
-    if (!exists) {
-      if (props.endVerticalAlign === undefined) endVerticalAlign = 'center';
-      end.push(/*#__PURE__*/React.createElement(IconClear, _extends({
-        key: refs.ids.clear,
-        color: "inherit",
-        onClick: onClear
-      }, IconProps, {
-        className: classNames([IconProps?.className, classes.clear])
-      })));
-    }
-  }
   if (footer) {
     WrapperProps = _objectSpread({}, other);
     WrapperProps.ref = item => {
@@ -775,6 +773,36 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   if (!['input', 'textarea'].includes(InputComponent)) {
     inputProps.onInput = onInput;
   }
+  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])
+        })));
+      }
+    }
+    const iconButtonPassword = /*#__PURE__*/React.createElement(Tooltip, {
+      name: visible ? l('Hide password') : l('View password'),
+      color: "inverted"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      onClick: onToggleVisible,
+      color: "default",
+      size: "small"
+    }, visible ? /*#__PURE__*/React.createElement(IconMaterialPassword2Off, iconProps) : /*#__PURE__*/React.createElement(IconMaterialPassword2, iconProps)));
+    if (password) endItems.unshift(iconButtonPassword);
+    return endItems;
+  }, [visible, onClear, type, end_]);
   const valueWithData = value !== undefined && String(value);
   return /*#__PURE__*/React.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Component, _extends({
     onMouseEnter: onMouseEnter,

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.122",
+  "version": "1.0.123",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
-  "author": "Lazar <lazareric2@gmail.com>",
+  "author": "Lazar Erić <lazareric1@proton.me>",
   "license": "MIT",
   "private": false,
   "main": "./index.js",
@@ -54,4 +54,4 @@
     "node": ">=12.0.0",
     "yarn": ">=1.22"
   }
-}
+}