draft-components 2.2.0 → 2.3.1

package/css/draft-components.css

@@ -749,6 +749,7 @@
   transition-duration: 0.2s;
   transition-property: color, background-color;
   text-align: center;
+  white-space: nowrap;
   text-decoration: none;
   text-transform: none;
   border: 1px solid var(--dc-button-border-color);
@@ -2467,6 +2468,7 @@
   color-scheme: light;
   font: 14px/1 var(--dc-primary-font);
   display: inline-flex;
+  flex-shrink: 0;
   margin: 0;
   padding: 0;
   list-style: none;

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

@@ -1,4 +1,4 @@
-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 = {
@@ -6,5 +6,6 @@ export type PasswordInputProps = {
     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

@@ -12,9 +12,15 @@ const getDefaultTooltipText = (visible) => (visible
 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, loading = false, 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', readOnly: loading ?? props.readOnly, slotRight: () => (_jsx(Tooltip, { content: getTooltipText(visible), children: _jsx("button", { className: "dc-password-input__toggle-button", type: "button", disabled: loading, onClick: () => setVisible(!visible), children: loading
+    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.2.0",
+  "version": "2.3.1",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {