coles-solid-library 0.3.7 → 0.3.9

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,40 +1599,62 @@ 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());
-  const handleChange = e => {
-    const target = e.currentTarget;
-    const newChecked = target.checked;
+  // 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) {
-      setInternalChecked(newChecked);
-      props.onChange?.(newChecked);
-    } else {
-      // Controlled: prevent native state flip from persisting
-      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);
+      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 handleClick = e => {
+  const handleChange = e => {
+    const target = e.currentTarget;
+    const newChecked = target.checked;
     if (props.checked !== undefined) {
-      e.preventDefault();
-      const target = e.currentTarget;
+      // controlled: emit change; parent should update props.checked.
+      // After microtask (allow parent reactive update) sync DOM to current checkedState
+      props.onChange?.(newChecked);
       queueMicrotask(() => {
-        target.checked = !!props.checked;
+        // checkedState() reflects latest props / form context
+        const desired = checkedState();
+        if (target.checked !== desired) target.checked = desired;
       });
+      return;
     }
+    // uncontrolled / form-managed
+    commitValue(newChecked);
   };
   return (() => {
     var _el$ = _tmpl$$h(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
     _el$2.addEventListener("change", handleChange);
-    _el$2.$$click = handleClick;
     insert(_el$, (() => {
       var _c$ = createMemo(() => !!props.label);
       return () => _c$() && (() => {
@@ -1660,7 +1693,6 @@ function Checkbox(props) {
     return _el$;
   })();
 }
-delegateEvents(["click"]);
 
 var css_248z$c = ".selectStyles-module_solid_select__placeholder__VO5-- {\n  opacity: var(--text-emphasis-medium, 87%);\n  transition: all 0.7s ease;\n}\n\n.selectStyles-module_solid_select__transparent__nOpvm {\n  background-color: transparent;\n}\n\n.selectStyles-module_solid_select__3plh1 {\n  display: inline-block;\n  position: relative;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  text-align: left;\n  border-radius: 8px;\n  width: 100%;\n  margin: 0px 6px;\n}\n\n.selectStyles-module_solid_select__control__Wmmpg {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  max-height: 48px;\n  border-radius: 8px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  cursor: pointer;\n  transition: border 0.7s ease, padding 0.7s ease;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.selectStyles-module_solid_select__control__Wmmpg:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control__Wmmpg:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__control_no_form__Cq9Sc {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 48px;\n  border-radius: 8px;\n  width: 200px;\n  margin-top: 2px;\n  cursor: pointer;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__arrow__OPCZo {\n  font-size: 0.7em;\n}\n\n.selectStyles-module_solid_select__value__rNtqF {\n  flex-grow: 1;\n  transition: all 0.3s ease;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n}\n\n.selectStyles-module_multiselect-value__UUhhP {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n\n.selectStyles-module_solid_select__dropdown__UCt-N {\n  position: absolute;\n  background-color: var(--surface-color, #EEEEEE);\n  top: 100%;\n  left: 0;\n  z-index: 999999999999999;\n  max-height: 200px;\n  border-radius: 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n  transform-origin: top;\n  transform: scaleY(0);\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n  opacity: 0;\n}\n\n.selectStyles-module_dropTop__IVz9p {\n  transform-origin: bottom;\n}\n\n.selectStyles-module_dropBottom__cYJF0 {\n  transform-origin: top;\n}\n\n.selectStyles-module_open__f8zLA {\n  transform: scaleY(1);\n  opacity: 1;\n}\n\n.selectStyles-module_solid_select__option__47WMY {\n  padding: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  border-radius: 8px;\n}\n.selectStyles-module_solid_select__option__47WMY:hover {\n  border: 2px inset var(--primary-color-varient, #43A047);\n}\n.selectStyles-module_solid_select__option__47WMY:has(.selectStyles-module_selected__1-CKm) {\n  font-weight: bold;\n}\n\n.selectStyles-module_checkmark__UWcbd {\n  display: inline-block;\n  width: 1.2em;\n  margin-right: 4px;\n  text-align: center;\n}\n\n.selectStyles-module_option-label__bBFSW {\n  width: -moz-max-content;\n  width: max-content;\n  height: -moz-max-content;\n  height: max-content;\n}";
 var styles$7 = {"solid_select__placeholder":"selectStyles-module_solid_select__placeholder__VO5--","solid_select__transparent":"selectStyles-module_solid_select__transparent__nOpvm","solid_select":"selectStyles-module_solid_select__3plh1","solid_select__control":"selectStyles-module_solid_select__control__Wmmpg","solid_select__control_no_form":"selectStyles-module_solid_select__control_no_form__Cq9Sc","solid_select__arrow":"selectStyles-module_solid_select__arrow__OPCZo","solid_select__value":"selectStyles-module_solid_select__value__rNtqF","multiselect-value":"selectStyles-module_multiselect-value__UUhhP","solid_select__dropdown":"selectStyles-module_solid_select__dropdown__UCt-N","dropTop":"selectStyles-module_dropTop__IVz9p","dropBottom":"selectStyles-module_dropBottom__cYJF0","open":"selectStyles-module_open__f8zLA","solid_select__option":"selectStyles-module_solid_select__option__47WMY","selected":"selectStyles-module_selected__1-CKm","checkmark":"selectStyles-module_checkmark__UWcbd","option-label":"selectStyles-module_option-label__bBFSW"};
@@ -2006,6 +2038,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 +2062,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 +2214,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 +2380,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 : ""}`;
-      },
-      get value() {
-        return customProps.text();
+        return `${style$4.areaStyle} ${customProps.class ?? ''} ${customProps.transparent ? customProps.transparent : ''}`;
       },
-      "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 +3894,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.9",
   "description": "A SolidJS mostly UI library",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",