@pathscale/ui 0.0.83 → 0.0.84

package/dist/components/form/Form.d.ts

@@ -2,7 +2,10 @@ import { type JSX, type ParentComponent } from "solid-js";
 import { IComponentBaseProps } from "../types";
 import ValidatedForm, { useFormValidation } from "./ValidatedForm";
 export { type ValidatedFormProps } from "./ValidatedForm";
-export type FormProps = Omit<JSX.HTMLAttributes<HTMLFormElement>, "ref"> & IComponentBaseProps;
+export type FormProps = Omit<JSX.HTMLAttributes<HTMLFormElement>, "ref"> & IComponentBaseProps & {
+    autoFocus?: boolean;
+    cycleOnEnter?: boolean;
+};
 export { useFormValidation };
 declare const _default: ParentComponent<FormProps> & {
     Label: ParentComponent<import("./Label").LabelProps>;

package/dist/index.js

@@ -7440,16 +7440,61 @@ function ValidatedForm(props) {
 const form_ValidatedForm = ValidatedForm;
 var Form_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<form role=form>");
 const Form = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        autoFocus: true,
+        cycleOnEnter: true
+    }, props);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
         "children",
         "dataTheme",
         "class",
-        "className"
+        "className",
+        "autoFocus",
+        "cycleOnEnter"
     ]);
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
     const classes = ()=>twMerge("form-control", local.class, local.className);
+    let formRef;
+    const getFocusableElements = ()=>{
+        if (!formRef) return [];
+        return Array.from(formRef.querySelectorAll('input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled])'));
+    };
+    const handleKeyDown = (e)=>{
+        if (!local.cycleOnEnter || "Enter" !== e.key) return;
+        const focusableElements = getFocusableElements();
+        const activeElement = document.activeElement;
+        if (!formRef?.contains(activeElement)) return;
+        const currentIndex = focusableElements.indexOf(activeElement);
+        if (-1 === currentIndex) return;
+        e.preventDefault();
+        if (currentIndex === focusableElements.length - 1) formRef?.dispatchEvent(new Event("submit", {
+            bubbles: true,
+            cancelable: true
+        }));
+        else {
+            const nextElement = focusableElements[currentIndex + 1];
+            nextElement?.focus();
+        }
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (local.autoFocus && formRef) {
+            const focusableElements = getFocusableElements();
+            if (focusableElements.length > 0) {
+                const firstElement = focusableElements[0];
+                firstElement.focus();
+            }
+        }
+        if (local.cycleOnEnter && formRef) {
+            formRef.addEventListener("keydown", handleKeyDown);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+                formRef?.removeEventListener("keydown", handleKeyDown);
+            });
+        }
+    });
     return (()=>{
         var _el$ = Form_tmpl$();
+        var _ref$ = formRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : formRef = _el$;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["data-theme"] () {
                 return local.dataTheme;

package/package.json

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