@douglasneuroinformatics/libui 2.0.5 → 2.0.7

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

@@ -9,5 +9,5 @@ export type DynamicFieldProps<TData extends FormDataType> = {
     setValues: React.Dispatch<React.SetStateAction<PartialFormDataType<TData>>>;
     values: PartialFormDataType<TData>;
 };
-export declare const DynamicField: <TData extends FormDataType>({ field, name, values, ...props }: DynamicFieldProps<TData>) => React.JSX.Element | null;
+export declare const DynamicField: <TData extends FormDataType>({ field, name, setValues, values, ...props }: DynamicFieldProps<TData>) => React.JSX.Element | null;
 //# sourceMappingURL=DynamicField.d.ts.map

package/dist/components/Form/DynamicField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicField.d.ts","sourceRoot":"","sources":["../../../src/components/Form/DynamicField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAKrH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,YAAY,IAAI;IAC1D,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACnE,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC5E,MAAM,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,YAAY,kEAKtB,kBAAkB,KAAK,CAAC,6BAqB1B,CAAC"}
+{"version":3,"file":"DynamicField.d.ts","sourceRoot":"","sources":["../../../src/components/Form/DynamicField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAKrH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,YAAY,IAAI;IAC1D,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACnE,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC5E,MAAM,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,YAAY,6EAMtB,kBAAkB,KAAK,CAAC,6BA2B1B,CAAC"}

package/dist/components/Form/DynamicField.js

@@ -1,11 +1,16 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { pick } from 'lodash-es';
 import { StaticField } from './StaticField.js';
-export const DynamicField = ({ field, name, values, ...props }) => {
+export const DynamicField = ({ field, name, setValues, values, ...props }) => {
     const [dependentValues, setDependentValues] = useState(pick(values, field.deps));
     const staticField = useMemo(() => {
         return field.render(values);
     }, [dependentValues, field.render]);
+    useEffect(() => {
+        if (!staticField) {
+            setValues((prevValues) => ({ ...prevValues, [name]: undefined }));
+        }
+    }, [staticField]);
     useEffect(() => {
         for (const key of field.deps) {
             if (dependentValues[key] !== values[key]) {
@@ -17,5 +22,5 @@ export const DynamicField = ({ field, name, values, ...props }) => {
     if (!staticField) {
         return null;
     }
-    return React.createElement(StaticField, { ...props, field: staticField, name: name, values: values });
+    return React.createElement(StaticField, { ...props, field: staticField, name: name, setValues: setValues, values: values });
 };

package/dist/components/Form/StringField/StringFieldInput.js

@@ -5,8 +5,8 @@ import { FieldGroup } from '../FieldGroup/FieldGroup.js';
 export const StringFieldInput = ({ description, error, label, name, setValue, value }) => {
     return (React.createElement(FieldGroup, null,
         React.createElement(FieldGroup.Row, null,
-            React.createElement(Label, null, label),
+            React.createElement(Label, { htmlFor: name }, label),
             React.createElement(FieldGroup.Description, { description: description })),
-        React.createElement(Input, { name: name, type: "text", value: value ?? '', onChange: (event) => setValue(event.target.value) }),
+        React.createElement(Input, { id: name, name: name, type: "text", value: value ?? '', onChange: (event) => setValue(event.target.value) }),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/dist/components/Form/StringField/StringFieldPassword.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StringFieldPassword.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/StringField/StringFieldPassword.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAQjF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,wBAAwB,GAAG,uBAAuB,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC;AAEzF,eAAO,MAAM,mBAAmB,yDAA0D,wBAAwB,sBA2BjH,CAAC"}
+{"version":3,"file":"StringFieldPassword.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/StringField/StringFieldPassword.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAQjF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,wBAAwB,GAAG,uBAAuB,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC;AAEzF,eAAO,MAAM,mBAAmB,yDAA0D,wBAAwB,sBA4BjH,CAAC"}

package/dist/components/Form/StringField/StringFieldPassword.js

@@ -8,10 +8,10 @@ export const StringFieldPassword = ({ description, error, label, name, setValue,
     const [show, setShow] = useState(false);
     return (React.createElement(FieldGroup, null,
         React.createElement(FieldGroup.Row, null,
-            React.createElement(Label, null, label),
+            React.createElement(Label, { htmlFor: name }, label),
             React.createElement(FieldGroup.Description, { description: description })),
         React.createElement(FieldGroup.Row, null,
-            React.createElement(Input, { name: name, type: show ? 'text' : 'password', value: value ?? '', onChange: (event) => setValue(event.target.value) }),
+            React.createElement(Input, { id: name, name: name, type: show ? 'text' : 'password', value: value ?? '', onChange: (event) => setValue(event.target.value) }),
             React.createElement("button", { className: "absolute right-0 flex h-full w-8 items-center justify-center text-muted-foreground", type: "button", onClick: () => setShow(!show) },
                 React.createElement(EyeIcon, { className: cn('absolute transition-all', show ? '-rotate-90 scale-0' : 'rotate-0 scale-100') }),
                 React.createElement(EyeOffIcon, { className: cn('absolute transition-all', !show ? 'rotate-90 scale-0' : 'rotate-0 scale-100') }))),

package/dist/components/Form/StringField/StringFieldTextArea.js

@@ -5,8 +5,8 @@ import { FieldGroup } from '../FieldGroup/FieldGroup.js';
 export const StringFieldTextArea = ({ description, error, label, name, setValue, value }) => {
     return (React.createElement(FieldGroup, null,
         React.createElement(FieldGroup.Row, null,
-            React.createElement(Label, null, label),
+            React.createElement(Label, { htmlFor: name }, label),
             React.createElement(FieldGroup.Description, { description: description })),
-        React.createElement(TextArea, { name: name, rows: 5, value: value ?? '', onChange: (event) => setValue(event.target.value) }),
+        React.createElement(TextArea, { id: name, name: name, rows: 5, value: value ?? '', onChange: (event) => setValue(event.target.value) }),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/dist/components/Tooltip/TooltipContent.d.ts

@@ -8,6 +8,7 @@ export type TooltipContentProps = {
     className?: string;
     /** The distance in pixels from the viewport edges where collision detection should occur */
     collisionPadding?: number;
+    side?: 'bottom' | 'left' | 'right' | 'top';
     /** The distance in pixels from the trigger */
     sideOffset?: number;
 };

package/dist/components/Tooltip/TooltipContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;IACnC,2EAA2E;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc,4FAe1B,CAAC"}
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;IACnC,2EAA2E;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAC3C,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc,4FAe1B,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "packageManager": "pnpm@8.15.3",
   "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
   "author": {

package/src/components/Form/DynamicField.tsx

@@ -19,6 +19,7 @@ export type DynamicFieldProps<TData extends FormDataType> = {
 export const DynamicField = <TData extends FormDataType>({
   field,
   name,
+  setValues,
   values,
   ...props
 }: DynamicFieldProps<TData>) => {
@@ -28,6 +29,12 @@ export const DynamicField = <TData extends FormDataType>({
     return field.render(values);
   }, [dependentValues, field.render]);
 
+  useEffect(() => {
+    if (!staticField) {
+      setValues((prevValues) => ({ ...prevValues, [name]: undefined }));
+    }
+  }, [staticField]);
+
   useEffect(() => {
     for (const key of field.deps) {
       if (dependentValues[key] !== values[key]) {
@@ -41,5 +48,5 @@ export const DynamicField = <TData extends FormDataType>({
     return null;
   }
 
-  return <StaticField {...props} field={staticField} name={name} values={values} />;
+  return <StaticField {...props} field={staticField} name={name} setValues={setValues} values={values} />;
 };

package/src/components/Form/StringField/StringFieldInput.tsx

@@ -14,10 +14,10 @@ export const StringFieldInput = ({ description, error, label, name, setValue, va
   return (
     <FieldGroup>
       <FieldGroup.Row>
-        <Label>{label}</Label>
+        <Label htmlFor={name}>{label}</Label>
         <FieldGroup.Description description={description} />
       </FieldGroup.Row>
-      <Input name={name} type="text" value={value ?? ''} onChange={(event) => setValue(event.target.value)} />
+      <Input id={name} name={name} type="text" value={value ?? ''} onChange={(event) => setValue(event.target.value)} />
       <FieldGroup.Error error={error} />
     </FieldGroup>
   );

package/src/components/Form/StringField/StringFieldPassword.tsx

@@ -17,11 +17,12 @@ export const StringFieldPassword = ({ description, error, label, name, setValue,
   return (
     <FieldGroup>
       <FieldGroup.Row>
-        <Label>{label}</Label>
+        <Label htmlFor={name}>{label}</Label>
         <FieldGroup.Description description={description} />
       </FieldGroup.Row>
       <FieldGroup.Row>
         <Input
+          id={name}
           name={name}
           type={show ? 'text' : 'password'}
           value={value ?? ''}

package/src/components/Form/StringField/StringFieldTextArea.tsx

@@ -14,10 +14,10 @@ export const StringFieldTextArea = ({ description, error, label, name, setValue,
   return (
     <FieldGroup>
       <FieldGroup.Row>
-        <Label>{label}</Label>
+        <Label htmlFor={name}>{label}</Label>
         <FieldGroup.Description description={description} />
       </FieldGroup.Row>
-      <TextArea name={name} rows={5} value={value ?? ''} onChange={(event) => setValue(event.target.value)} />
+      <TextArea id={name} name={name} rows={5} value={value ?? ''} onChange={(event) => setValue(event.target.value)} />
       <FieldGroup.Error error={error} />
     </FieldGroup>
   );

package/src/components/Tooltip/TooltipContent.tsx

@@ -13,6 +13,7 @@ export type TooltipContentProps = {
   className?: string;
   /** The distance in pixels from the viewport edges where collision detection should occur */
   collisionPadding?: number;
+  side?: 'bottom' | 'left' | 'right' | 'top';
   /** The distance in pixels from the trigger */
   sideOffset?: number;
 };