@pathscale/ui 1.1.78 → 1.1.79

package/dist/components/password-field/PasswordField.d.ts

@@ -1,20 +1,70 @@
 import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type PasswordFieldProps = IComponentBaseProps & {
+    id?: string;
     name?: string;
     label?: JSX.Element;
     placeholder?: string;
     disabled?: boolean;
     invalid?: boolean;
+    required?: boolean;
+    autofocus?: boolean;
     autocomplete?: "current-password" | "new-password" | "off";
+    "aria-describedby"?: string;
     startIcon?: JSX.Element;
     showLabel: string;
     hideLabel: string;
     value?: string;
+    inputRef?: (el: HTMLInputElement) => void;
     onInput?: (value: string) => void;
     onBlur?: () => void;
+    visibleIcon?: JSX.Element;
+    hiddenIcon?: JSX.Element;
+    onVisibilityChange?: (visible: boolean) => void;
     class?: string;
     inputClass?: string;
 };
+export type PasswordToggleSnapshot = {
+    hadFocus: boolean;
+    selectionStart: number | null;
+    selectionEnd: number | null;
+    selectionDirection: "forward" | "backward" | "none" | null;
+    valueBeforeToggle: string | null;
+};
+type PasswordFieldInputContractParams = Pick<PasswordFieldProps, "id" | "name" | "label" | "placeholder" | "required" | "autofocus" | "autocomplete" | "aria-describedby" | "value" | "disabled" | "invalid" | "startIcon" | "inputClass"> & {
+    isVisible: boolean;
+};
+export declare const createPasswordFieldInputContract: (params: PasswordFieldInputContractParams) => {
+    id: string | undefined;
+    name: string | undefined;
+    label: JSX.Element;
+    type: string;
+    placeholder: string | undefined;
+    required: boolean | undefined;
+    autofocus: boolean | undefined;
+    autocomplete: "off" | "current-password" | "new-password" | undefined;
+    "aria-describedby": string | undefined;
+    value: string | undefined;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    startIcon: JSX.Element;
+    class: string;
+};
+type PasswordFieldLike = {
+    value: string;
+    selectionStart: number | null;
+    selectionEnd: number | null;
+    selectionDirection: "forward" | "backward" | "none" | null;
+    focus: (options?: {
+        preventScroll?: boolean;
+    }) => void;
+    setSelectionRange: (selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none") => void;
+    dispatchEvent: (event: Event) => boolean;
+};
+export declare const getPasswordInputType: (isVisible: boolean) => "text" | "password";
+export declare const selectPasswordToggleIcon: (isVisible: boolean, visibleIcon: JSX.Element | undefined, hiddenIcon: JSX.Element | undefined, fallback: JSX.Element) => JSX.Element;
+export declare const capturePasswordToggleSnapshot: (field: PasswordFieldLike | undefined, activeElement: EventTarget | null) => PasswordToggleSnapshot;
+export declare const restorePasswordFieldAfterToggle: (field: PasswordFieldLike | undefined, snapshot: PasswordToggleSnapshot) => void;
+export declare const preventPasswordTogglePointerDown: (event: Pick<PointerEvent, "preventDefault">) => void;
 declare const PasswordField: Component<PasswordFieldProps>;
 export default PasswordField;

package/dist/components/password-field/PasswordField.js

@@ -5,27 +5,100 @@ import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../butto
 import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__ from "../input/index.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const PasswordField_PasswordField = (props)=>{
+const createPasswordFieldInputContract = (params)=>({
+        id: params.id,
+        name: params.name,
+        label: params.label,
+        type: getPasswordInputType(params.isVisible),
+        placeholder: params.placeholder,
+        required: params.required,
+        autofocus: params.autofocus,
+        autocomplete: params.autocomplete,
+        "aria-describedby": params["aria-describedby"],
+        value: params.value,
+        isDisabled: Boolean(params.disabled),
+        isInvalid: Boolean(params.invalid),
+        startIcon: params.startIcon,
+        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-full", params.inputClass)
+    });
+const getPasswordInputType = (isVisible)=>isVisible ? "text" : "password";
+const selectPasswordToggleIcon = (isVisible, visibleIcon, hiddenIcon, fallback)=>(isVisible ? visibleIcon : hiddenIcon) ?? fallback;
+const capturePasswordToggleSnapshot = (field, activeElement)=>({
+        hadFocus: activeElement === field,
+        selectionStart: field?.selectionStart ?? null,
+        selectionEnd: field?.selectionEnd ?? null,
+        selectionDirection: field?.selectionDirection ?? null,
+        valueBeforeToggle: field?.value ?? null
+    });
+const restorePasswordFieldAfterToggle = (field, snapshot)=>{
+    if (!field) return;
+    if (null !== snapshot.valueBeforeToggle && field.value !== snapshot.valueBeforeToggle) {
+        field.value = snapshot.valueBeforeToggle;
+        field.dispatchEvent(new Event("input", {
+            bubbles: true
+        }));
+    }
+    if (!snapshot.hadFocus) return;
+    field.focus({
+        preventScroll: true
+    });
+    if (null === snapshot.selectionStart || null === snapshot.selectionEnd) return;
+    try {
+        field.setSelectionRange(snapshot.selectionStart, snapshot.selectionEnd, snapshot.selectionDirection ?? void 0);
+    } catch  {}
+};
+const preventPasswordTogglePointerDown = (event)=>event.preventDefault();
+const PasswordField = (props)=>{
     const [local] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "id",
         "name",
         "label",
         "placeholder",
         "disabled",
         "invalid",
+        "required",
+        "autofocus",
         "autocomplete",
+        "aria-describedby",
         "startIcon",
         "showLabel",
         "hideLabel",
         "value",
+        "inputRef",
         "onInput",
         "onBlur",
+        "visibleIcon",
+        "hiddenIcon",
+        "onVisibilityChange",
         "inputClass",
         "class",
         "className",
         "dataTheme"
     ]);
     const [isVisible, setIsVisible] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let fieldRef;
     const toggleLabel = ()=>isVisible() ? local.hideLabel : local.showLabel;
+    const toggleIcon = ()=>selectPasswordToggleIcon(isVisible(), local.visibleIcon, local.hiddenIcon, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+            width: 16,
+            height: 16,
+            get name () {
+                return isVisible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]";
+            },
+            class: "h-4 w-4"
+        }));
+    const setFieldRef = (el)=>{
+        fieldRef = el;
+        local.inputRef?.(el);
+    };
+    const toggleVisibility = ()=>{
+        const snapshot = capturePasswordToggleSnapshot(fieldRef, "undefined" != typeof document ? document.activeElement : null);
+        const nextVisible = !isVisible();
+        setIsVisible(nextVisible);
+        local.onVisibilityChange?.(nextVisible);
+        queueMicrotask(()=>{
+            restorePasswordFieldAfterToggle(fieldRef, snapshot);
+        });
+    };
     return (()=>{
         var _el$ = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
@@ -39,41 +112,27 @@ const PasswordField_PasswordField = (props)=>{
                 return isVisible() ? "true" : "false";
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get name () {
-                return local.name;
-            },
-            get label () {
-                return local.label;
-            },
-            get type () {
-                return isVisible() ? "text" : "password";
-            },
-            get placeholder () {
-                return local.placeholder;
-            },
-            get autocomplete () {
-                return local.autocomplete;
-            },
-            get value () {
-                return local.value;
-            },
-            get isDisabled () {
-                return Boolean(local.disabled);
-            },
-            get isInvalid () {
-                return Boolean(local.invalid);
-            },
-            get startIcon () {
-                return local.startIcon;
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>createPasswordFieldInputContract({
+                id: local.id,
+                name: local.name,
+                label: local.label,
+                isVisible: isVisible(),
+                placeholder: local.placeholder,
+                required: local.required,
+                autofocus: local.autofocus,
+                autocomplete: local.autocomplete,
+                "aria-describedby": local["aria-describedby"],
+                value: local.value,
+                disabled: local.disabled,
+                invalid: local.invalid,
+                startIcon: local.startIcon,
+                inputClass: local.inputClass
+            }), {
+            ref: setFieldRef,
             onInput: (event)=>{
                 local.onInput?.(event.currentTarget.value);
             },
-            onBlur: ()=>local.onBlur?.()
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-full", local.inputClass)
-            }), {
+            onBlur: ()=>local.onBlur?.(),
             get endIcon () {
                 return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], {
                     type: "button",
@@ -81,7 +140,11 @@ const PasswordField_PasswordField = (props)=>{
                     size: "sm",
                     isIconOnly: true,
                     class: "h-7 min-h-7 w-7 min-w-7",
-                    onClick: ()=>setIsVisible((value)=>!value),
+                    get isDisabled () {
+                        return Boolean(local.disabled);
+                    },
+                    onPointerDown: preventPasswordTogglePointerDown,
+                    onClick: toggleVisibility,
                     get ["aria-label"] () {
                         return toggleLabel();
                     },
@@ -92,14 +155,7 @@ const PasswordField_PasswordField = (props)=>{
                         return toggleLabel();
                     },
                     get children () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
-                            width: 16,
-                            height: 16,
-                            get name () {
-                                return isVisible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]";
-                            },
-                            class: "h-4 w-4"
-                        });
+                        return toggleIcon();
                     }
                 });
             }
@@ -107,5 +163,5 @@ const PasswordField_PasswordField = (props)=>{
         return _el$;
     })();
 };
-const PasswordField = PasswordField_PasswordField;
-export { PasswordField as default };
+const password_field_PasswordField = PasswordField;
+export { capturePasswordToggleSnapshot, createPasswordFieldInputContract, password_field_PasswordField as default, getPasswordInputType, preventPasswordTogglePointerDown, restorePasswordFieldAfterToggle, selectPasswordToggleIcon };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "1.1.78",
+  "version": "1.1.79",
   "author": "pathscale",
   "repository": {
     "type": "git",