draft-components 2.0.1 → 2.2.0

package/css/draft-components-utilities.css

@@ -18,6 +18,22 @@
   border: 0 !important;
 }
 
+.border-top-0 {
+  border-top: 0 !important;
+}
+
+.border-right-0 {
+  border-right: 0 !important;
+}
+
+.border-bottom-0 {
+  border-bottom: 0 !important;
+}
+
+.border-left-0 {
+  border-left: 0 !important;
+}
+
 .border-transparent-1 {
   border: 1px solid var(--dc-border-color-transparent-1) !important;
 }

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

@@ -2,6 +2,7 @@ import { 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;

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

@@ -5,13 +5,16 @@ 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, ...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) }) })) }));
+    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
+                    ? _jsx(Spinner, { width: "1.15em" })
+                    : renderToggleButtonIcon(visible) }) })) }));
 });

package/package.json

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