coles-solid-library 0.3.7 → 0.3.8

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

@@ -14,6 +14,11 @@ export declare class FormGroup<T extends object> {
     private meta;
     private keys;
     constructor(data: FormGroupData<T>);
+    /**
+     * INTERNAL: returns the reactive internal store reference (DO NOT MUTATE outside FormGroup).
+     * Used for bridging into FormContext without triggering cloning loops.
+     */
+    _unsafeRaw(): T;
     /**
      * Gets the current form data or the value of a specific control.
      *

package/dist/components/TextArea/TextArea.d.ts

@@ -1,7 +1,9 @@
 import { Accessor, Component, JSX, Setter } from "solid-js";
 interface Props extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    text: Accessor<string>;
-    setText: Setter<string>;
+    /** Optional external accessor (legacy). If omitted and inside a FormField+Form, form data is used. */
+    text?: Accessor<string>;
+    /** Optional external setter (legacy). */
+    setText?: Setter<string>;
     class?: string;
     tooltip?: string;
     transparent?: boolean;

package/dist/index.esm.js

@@ -1441,6 +1441,17 @@ const FormInner = props => {
 const Provider = props => {
   const defaultData = props.value ?? {};
   const [data, setData] = createStore(defaultData);
+  // Bridge: keep FormContext store in sync with underlying FormGroup reactive store
+  // This allows programmatic calls to formGroup.set(...) to propagate into bound fields.
+  createEffect(() => {
+    const raw = props.formGroup._unsafeRaw(); // reactive read of underlying store
+    for (const k in raw) {
+      const nextVal = raw[k];
+      if (data[k] !== nextVal) {
+        setData(k, nextVal);
+      }
+    }
+  });
   return createComponent(FormContext.Provider, {
     get value() {
       return {
@@ -1588,23 +1599,52 @@ styleInject(css_248z$d);
 var _tmpl$$h = /*#__PURE__*/template(`<label><input type=checkbox><span>`),
   _tmpl$2$9 = /*#__PURE__*/template(`<span>`);
 function Checkbox(props) {
-  // Handle controlled vs. uncontrolled state
+  const field = useFormProvider();
+  const formCtx = useFormContext();
+  const formName = field?.formName;
+  // Internal state for uncontrolled usage outside form context
   const [internalChecked, setInternalChecked] = createSignal(props.defaultChecked ?? false);
-  const checkedState = createMemo(() => props.checked !== undefined ? props.checked : internalChecked());
+  // Derive current checked state with priority: controlled prop -> form context -> field local value -> internal state
+  const checkedState = createMemo(() => {
+    if (props.checked !== undefined) return !!props.checked;
+    if (formName && formCtx?.data) return !!formCtx.data[formName];
+    if (field?.getValue) return !!field.getValue();
+    return internalChecked();
+  });
+  // Keep field/form floating states in sync if programmatic changes occur
+  createEffect(() => {
+    const c = checkedState();
+    if (formName && formCtx?.data) {
+      field?.setTextInside?.(c);
+      field?.setValue?.(c);
+    }
+  });
+  const commitValue = next => {
+    if (props.checked === undefined) {
+      if (formName && formCtx?.formGroup) {
+        formCtx.formGroup.set(formName, next);
+        formCtx.setData?.(formName, next);
+      } else if (field?.setValue) {
+        field.setValue(next);
+      } else {
+        setInternalChecked(next);
+      }
+    }
+    field?.setTextInside?.(next);
+    props.onChange?.(next);
+  };
   const handleChange = e => {
     const target = e.currentTarget;
     const newChecked = target.checked;
-    if (props.checked === undefined) {
-      setInternalChecked(newChecked);
-      props.onChange?.(newChecked);
-    } else {
-      // Controlled: prevent native state flip from persisting
+    if (props.checked !== undefined) {
+      // controlled: revert DOM change and just emit
       e.preventDefault();
-      // Re-sync DOM to prop (in case browser already toggled visually before preventDefault took effect)
       queueMicrotask(() => {
         target.checked = !!props.checked;
       });
       props.onChange?.(newChecked);
+    } else {
+      commitValue(newChecked);
     }
   };
   const handleClick = e => {
@@ -2006,6 +2046,9 @@ function Select(props) {
     }
     // store orientation for class assignment
     setDropTop(placeAbove);
+    // Compute available vertical space for dropdown and clamp to a sensible minimum
+    const availableSpace = (placeAbove ? spaceAbove : spaceBelow) - VIEWPORT_MARGIN;
+    const maxHeight = Math.max(160, availableSpace); // ensure at least 160px so a few options are visible
     let newY;
     if (!placeAbove) {
       newY = baseRect.bottom + window.scrollY; // default below
@@ -2027,6 +2070,7 @@ function Select(props) {
     dropdown.style.left = `${newX}px`;
     dropdown.style.top = `${newY}px`;
     dropdown.style.width = `${baseRect.width}px`;
+    dropdown.style.maxHeight = `${maxHeight}px`;
   };
   // Update width of select to match option text width
   createEffect(() => {
@@ -2178,7 +2222,6 @@ function Select(props) {
           get children() {
             var _el$12 = _tmpl$4$1();
             use(setDropdownRef, _el$12);
-            _el$12.style.setProperty("max-height", "calc(100vh - 8px)");
             insert(_el$12, () => props.children);
             createRenderEffect(_p$ => {
               var _v$ = `${styles$7['solid_select__dropdown']} ${dropTop() ? styles$7.dropTop : styles$7.dropBottom} ${open() ? styles$7.open : ''} ${props.dropdownClass || ""}`,
@@ -2345,76 +2388,101 @@ var _tmpl$$e = /*#__PURE__*/template(`<textarea>`);
 const TextArea = props => {
   let myElement;
   const [customProps, normalProps] = splitProps(props, ["minSize", "text", "setText", "class", "tooltip", "transparent"]);
-  const context = useFormProvider();
-  /**
-     * Function to set the height of the textarea based on the content
-     */
-  function OnInput() {
-    if (myElement) {
-      myElement.style.height = 'auto';
-      const minHeight = customProps.minSize?.height ?? 100;
-      const currentHeight = myElement.scrollHeight < minHeight ? minHeight : myElement.scrollHeight;
-      myElement.style.height = `${currentHeight}px`;
-      myElement.setAttribute("style", "height:" + currentHeight + "px;overflow-y:hidden;");
-    }
+  const fieldCtx = useFormProvider();
+  const formCtx = useFormContext();
+  const formName = fieldCtx?.formName;
+  // Internal state only used when not provided externally and not in form context.
+  const [internal, setInternal] = createSignal(customProps.text ? customProps.text() : "");
+  // Determine current value priority: FormGroup -> external accessor -> internal state
+  const areaValue = createMemo(() => {
+    if (formName && formCtx?.data && !isNullish(formCtx.data[formName])) {
+      return formCtx.data[formName];
+    }
+    if (customProps.text) return customProps.text();
+    return internal();
+  });
+  function resizeToContent() {
+    if (!myElement) return;
+    myElement.style.height = 'auto';
+    const minHeight = customProps.minSize?.height ?? 100;
+    const currentHeight = Math.max(minHeight, myElement.scrollHeight);
+    myElement.style.height = `${currentHeight}px`;
+    myElement.style.overflowY = 'hidden';
   }
-  // sets the field type on mount and sets the height of the textarea
+  // Set field type & initial floating state
   onMount(() => {
-    OnInput();
-    context?.setFieldType("textarea");
+    resizeToContent();
+    fieldCtx?.setFieldType?.('textarea');
+    if (formName && formCtx?.data) {
+      const v = formCtx.data[formName];
+      if (!isNullish(v) && String(v).trim() !== '') {
+        fieldCtx?.setValue?.(v);
+        fieldCtx?.setTextInside?.(true);
+      } else {
+        fieldCtx?.setTextInside?.(false);
+      }
+    } else if (customProps.text) {
+      const v = customProps.text();
+      fieldCtx?.setTextInside?.(!(v === undefined || v === null || v.trim() === ''));
+    }
   });
-  // updates height of textarea when text is changed
-  createRenderEffect(() => {
-    OnInput();
-    customProps.text();
+  // React to programmatic FormGroup.set changes
+  createEffect(() => {
+    if (formName && formCtx?.data) {
+      const v = formCtx.data[formName];
+      // keep internal state aligned if unmanaged
+      if (!customProps.text && internal() !== v) setInternal(String(v ?? ''));
+      if (fieldCtx) {
+        const has = !(v === undefined || v === null || typeof v === 'string' && v.trim() === '');
+        fieldCtx.setTextInside(has);
+        fieldCtx.setValue?.(v);
+      }
+    }
   });
+  // Resize whenever value changes (user or programmatic)
   createEffect(() => {
-    if (Object.keys(props).includes("required") || props?.required === true) {
-      context?.setName(old => `${old} *`);
+    areaValue();
+    queueMicrotask(resizeToContent);
+  });
+  const handleInput = e => {
+    const newVal = e.currentTarget.value;
+    // Update whichever source is active
+    if (formName && formCtx?.formGroup) {
+      formCtx.formGroup.set(formName, newVal);
+      formCtx.setData?.(formName, newVal);
+    } else if (customProps.setText) {
+      customProps.setText(newVal);
     } else {
-      context?.setName(old => old);
+      setInternal(newVal);
     }
-  });
+    if (fieldCtx) {
+      fieldCtx.setValue?.(newVal);
+      fieldCtx.setTextInside?.(newVal.trim().length > 0);
+    }
+    resizeToContent();
+  };
   return (() => {
     var _el$ = _tmpl$$e();
     use(el => {
       myElement = el;
-      OnInput();
+      resizeToContent();
     }, _el$);
     spread(_el$, mergeProps(normalProps, {
-      "onFocus": e => {
-        if (!isNullish(context?.getName)) {
-          context?.setFocused(true);
-        }
-      },
-      "onBlur": e => {
-        if (context?.setFocused) {
-          context?.setFocused(false);
-        }
-      },
-      get placeholder() {
-        return !!context?.getName && context?.getTextInside() && !context?.getFocused() ? "" : props.placeholder;
+      get value() {
+        return areaValue();
       },
       get ["class"]() {
-        return `${style$4.areaStyle} ${customProps.class ?? ""} ${customProps.transparent ? customProps.transparent : ""}`;
+        return `${style$4.areaStyle} ${customProps.class ?? ''} ${customProps.transparent ? customProps.transparent : ''}`;
       },
-      get value() {
-        return customProps.text();
-      },
-      "onInput": e => {
-        customProps.setText(e.currentTarget.value);
-        OnInput();
-        if (!!context?.getName && !!e.currentTarget.value.trim()) {
-          context?.setValue(e.currentTarget.value);
-          context?.setTextInside(true);
-        } else if (!!context?.getName && !e.currentTarget.value.trim()) {
-          context?.setValue("");
-          context?.setTextInside(false);
-        }
+      get placeholder() {
+        return fieldCtx?.getTextInside?.() && !fieldCtx?.getFocused?.() ? '' : props.placeholder;
       },
       get title() {
         return customProps.tooltip;
-      }
+      },
+      "onInput": handleInput,
+      "onFocus": () => fieldCtx?.setFocused?.(true),
+      "onBlur": () => fieldCtx?.setFocused?.(false)
     }), false, false);
     return _el$;
   })();
@@ -3834,6 +3902,13 @@ class FormGroup {
     this.validators = newValidators;
     this.errors = createSignal(newErrors);
   }
+  /**
+   * INTERNAL: returns the reactive internal store reference (DO NOT MUTATE outside FormGroup).
+   * Used for bridging into FormContext without triggering cloning loops.
+   */
+  _unsafeRaw() {
+    return this.internalDataSignal[0];
+  }
   get(key) {
     if (!key) {
       // Custom clone that preserves FormArray instances (structuredClone fails on functions inside)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coles-solid-library",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "A SolidJS mostly UI library",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",