draft-components 2.1.0 → 2.3.0

package/css/draft-components.css

@@ -1528,8 +1528,8 @@
   background: var(--dc-password-input-toggle-bg);
 }
 
-.dc-password-input__toggle-button:focus,
-.dc-password-input__toggle-button:hover {
+.dc-password-input__toggle-button:not(:disabled):focus,
+.dc-password-input__toggle-button:not(:disabled):hover {
   color: var(--dc-password-input-toggle-color-hover);
   cursor: pointer;
   outline: none;

package/dist/components/password-input/password-input.d.ts

@@ -1,9 +1,11 @@
-import { ReactNode } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { TextInputProps } from '../text-input/index.js';
 export type PasswordInputBaseProps = Omit<TextInputProps, 'type' | 'slotRight'>;
 export type PasswordInputProps = {
+    loading?: boolean;
     defaultVisible?: boolean;
     getTooltipText?: (visible: boolean) => ReactNode;
     renderToggleButtonIcon?: (visible: boolean) => ReactNode;
+    onClickToggleButton?: MouseEventHandler<HTMLButtonElement>;
 } & PasswordInputBaseProps;
 export declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/password-input/password-input.js

@@ -5,13 +5,22 @@ import { TextInput } from '../text-input/index.js';
 import { Tooltip } from '../tooltip/index.js';
 import { EyeIcon } from '../hero-icons/24/outline/eye-icon.js';
 import { EyeSlashIcon } from '../hero-icons/24/outline/eye-slash-icon.js';
+import { Spinner } from '../spinner/index.js';
 const getDefaultTooltipText = (visible) => (visible
     ? 'Hide password'
     : 'Show password');
 const renderToggleButtonDefaultIcon = (visible) => (visible
     ? _jsx(EyeIcon, { width: "1.25em", height: "1.25em" })
     : _jsx(EyeSlashIcon, { width: "1.25em", height: "1.25em" }));
-export const PasswordInput = forwardRef(function PasswordInput({ className, defaultVisible = false, getTooltipText = getDefaultTooltipText, renderToggleButtonIcon = renderToggleButtonDefaultIcon, ...props }, ref) {
+export const PasswordInput = forwardRef(function PasswordInput({ className, loading = false, defaultVisible = false, getTooltipText = getDefaultTooltipText, renderToggleButtonIcon = renderToggleButtonDefaultIcon, onClickToggleButton, ...props }, ref) {
     const [visible, setVisible] = useState(defaultVisible);
-    return (_jsx(TextInput, { ...props, ref: ref, className: classNames('dc-password-input', className), type: visible ? 'text' : 'password', slotRight: () => (_jsx(Tooltip, { content: getTooltipText(visible), children: _jsx("button", { className: "dc-password-input__toggle-button", type: "button", onClick: () => setVisible(!visible), children: renderToggleButtonIcon(visible) }) })) }));
+    const handleClickToggleButton = (event) => {
+        setVisible(!visible);
+        if (typeof onClickToggleButton === 'function') {
+            onClickToggleButton(event);
+        }
+    };
+    return (_jsx(TextInput, { ...props, ref: ref, className: classNames('dc-password-input', className), type: visible ? 'text' : 'password', readOnly: loading ?? props.readOnly, slotRight: () => (_jsx(Tooltip, { content: getTooltipText(visible), children: _jsx("button", { className: "dc-password-input__toggle-button", type: "button", disabled: loading, onClick: handleClickToggleButton, children: loading
+                    ? _jsx(Spinner, { width: "1.15em" })
+                    : renderToggleButtonIcon(visible) }) })) }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {