@useloops/design-system 1.4.722 → 1.4.724

package/dist/systems/WebCore/FormBuilder/fieldRegistry.d.ts

@@ -1,7 +1,7 @@
 import { CustomFieldProps } from '../CustomField/CustomField.js';
 import { RichTextFieldProps } from '../RichTextField/RichTextField.js';
 import * as react from 'react';
-import { ComponentProps, ReactElement } from 'react';
+import { Ref, ReactElement, ReactNode, ComponentProps } from 'react';
 import { RankProps } from '../Rank/types.js';
 import { RadioGroupProps } from '../RadioGroup/RadioGroup.js';
 import { LikertProps } from '../Likert/Likert.js';
@@ -11,15 +11,49 @@ import { SliderProps } from '../Slider/Slider.js';
 import { SwitchProps } from '../Switch/Switch.js';
 import { CheckboxGroupProps } from '../CheckboxGroup/CheckboxGroup.js';
 import { CheckboxProps } from '../Checkbox/Checkbox.js';
+import { SxProps, Theme } from '@mui/material';
 import { AutocompleteFieldProps } from '../AutocompleteSingle/types.js';
 import { SelectProps } from '../Select/types.js';
 import { CreatableAutocompleteProps } from '../CreatableAutocomplete/CreatableAutocomplete.js';
 import { TextareaProps } from '../Textarea/Textarea.js';
 import { NumberFieldProps } from '../NumberField/types.js';
 import { TextFieldProps } from '../TextField/TextField.js';
-import { FieldValues } from 'react-hook-form';
-import { BaseField } from './types.js';
+import { FieldValues, FieldPath } from 'react-hook-form';
+import { InputLabelProps } from '../InputLabel/InputLabel.js';
+import { InputLabelHelpProps } from '../InputLabelHelp/InputLabelHelp.js';
 
+interface BaseField<TValues extends FieldValues = FieldValues> {
+    name: FieldPath<TValues>;
+    id?: string;
+    ref?: Ref<HTMLElement>;
+    /** A function label re-renders from the live form values — e.g. a toggle label that greys when off. */
+    label?: string | ReactElement | ((values: TValues) => string | ReactElement);
+    labelProps?: InputLabelProps;
+    helperText?: string | ReactNode;
+    helpTextProps?: InputLabelHelpProps;
+    hidden?: boolean;
+    /**
+     * Declarative visibility: the field shows only while this returns true for the live form values,
+     * animating in and out. The field stays registered while hidden unless the form unregisters hidden
+     * values (see `preserveHiddenValues`). Combines with `hidden` (either hides).
+     */
+    visibleWhen?: (values: TValues) => boolean;
+    /**
+     * Reactive props: recomputed from the live form values and merged over the field's static props —
+     * e.g. a select whose `selections` depend on how many rows another field holds.
+     */
+    deriveProps?: (values: TValues) => Record<string, unknown>;
+    /** Suppress the inline error message — for dense layouts that surface the error elsewhere. */
+    hideError?: boolean;
+    /** Narrowed per control type in `DynamicField`; declared here so the union is uniformly readable. */
+    defaultValue?: unknown;
+    disabled?: boolean;
+    styleOverrides?: {
+        sxInputWrapper?: SxProps<Theme>;
+        sxInputBase?: SxProps<Theme>;
+        sxInputStack?: SxProps<Theme>;
+    };
+}
 /** Props handed to a field's component on every render — supplied by the form, never the config. */
 interface RhfFieldProps {
     value: unknown;
@@ -124,7 +158,7 @@ type ControlField<K extends DynamicFieldType, TValues extends FieldValues = Fiel
     defaultValue?: ControlProps<K> extends {
         value?: infer V;
     } ? V : unknown;
-} & ExtrasFor<K> & Partial<Omit<ControlProps<K>, 'value' | 'onChange' | 'name' | 'inputRef' | 'internalChange' | 'defaultValue'>>;
+} & ExtrasFor<K> & Partial<Omit<ControlProps<K>, 'value' | 'onChange' | 'name' | 'inputRef' | 'internalChange' | 'defaultValue' | 'label'>>;
 type DynamicField<TValues extends FieldValues = FieldValues> = {
     [K in DynamicFieldType]: ControlField<K, TValues>;
 }[DynamicFieldType];
@@ -133,8 +167,51 @@ type HtmlField<TValues extends FieldValues = FieldValues> = Omit<BaseField<TValu
     fieldType: 'html';
     content: ReactElement;
 };
-type FieldTypes<TValues extends FieldValues = FieldValues> = DynamicField<TValues> | HtmlField<TValues>;
+/** Per-row control config for an `ArrayField` — any registry control, minus the row-managed keys. */
+type ArrayItemField = {
+    fieldType: DynamicFieldType;
+} & Record<string, unknown>;
+/** Handed to an `itemField` function so custom rows can own their remove action. */
+interface ArrayRowApi {
+    index: number;
+    /** Collapse this row away, then remove it from the array. */
+    remove: () => void;
+    atMinimum: boolean;
+    atMaximum: boolean;
+}
+/** Handed to the `actions` slot so custom footers can append rows (e.g. an import button). */
+interface ArrayActionsApi {
+    /** Append a row holding `value` (falls back to `defaultItem`, then `''`). */
+    append: (value?: unknown) => void;
+    count: number;
+    atMaximum: boolean;
+}
+/**
+ * A react-hook-form field array: `name` holds an array of `{ value }` rows (react-hook-form field arrays
+ * require object items), each rendered as an `itemField` control with a remove action, plus an append
+ * button. `itemField` may be a function of the row index (e.g. numbered placeholders) and receives the
+ * row's api for rows that render their own actions.
+ */
+type ArrayField<TValues extends FieldValues = FieldValues> = Omit<BaseField<TValues>, 'defaultValue'> & {
+    fieldType: 'array';
+    defaultValue?: {
+        value: unknown;
+    }[];
+    itemField: ArrayItemField | ((index: number, row: ArrayRowApi) => ArrayItemField);
+    /** Row removal disables at this count. */
+    minItems?: number;
+    /** The append button disables at this count. */
+    maxItems?: number;
+    addLabel?: string;
+    /** Value a newly appended row starts with. Defaults to `''`. */
+    defaultItem?: unknown;
+    /** `'none'` skips injecting the delete `endAdornment` — for rows that render their own actions. */
+    removeAction?: 'endAdornment' | 'none';
+    /** Replaces the default append button — e.g. Add + Import side by side. */
+    actions?: (api: ArrayActionsApi) => ReactNode;
+};
+type FieldTypes<TValues extends FieldValues = FieldValues> = DynamicField<TValues> | HtmlField<TValues> | ArrayField<TValues>;
 type FieldType = FieldTypes['fieldType'];
 
 export { FIELD_REGISTRY };
-export type { DynamicField, DynamicFieldType, FieldType, FieldTypes, HtmlField };
+export type { ArrayActionsApi, ArrayField, ArrayItemField, ArrayRowApi, BaseField, DynamicField, DynamicFieldType, FieldType, FieldTypes, HtmlField };

package/dist/systems/WebCore/FormBuilder/fieldRegistry.js

@@ -1 +1 @@
-"use strict";var e=require("../AutocompleteField/AutocompleteField.js"),t=require("../Checkbox/Checkbox.js");require("../Checkbox/StyledCheckbox.js");var l=require("../CheckboxGroup/CheckboxGroup.js"),a=require("../CreatableAutocomplete/CreatableAutocomplete.js"),u=require("../CustomField/CustomField.js"),r=require("../Differential/Differential.js"),o=require("../Likert/Likert.js"),n=require("../NumberField/NumberField.js"),i=require("../RadioGroup/RadioGroup.js"),f=require("../Rank/Rank.js"),d=require("../RichTextField/RichTextField.js");require("../SelectItem/SelectItem.js");var s=require("../Select/Select.js"),c=require("../Slider/Slider.js"),p=require("../StarRating/StarRating.js"),m=require("../Switch/Switch.js"),g=require("../Textarea/Textarea.js");const h={textfield:{component:require("../TextField/TextField.js"),getDefault:e=>e.defaultValue??""},numberfield:{component:n.default,getDefault:e=>e.defaultValue??0},textarea:{component:g,getDefault:e=>e.defaultValue??""},creatableautocomplete:{component:a,getDefault:e=>e.defaultValue??""},select:{component:s,getDefault:e=>e.defaultValue??""},autocomplete:{component:e,getDefault:e=>e.defaultValue,adapt:(e,t)=>({onChange:(e,l)=>t.onChange(l)})},checkbox:{component:t,getDefault:e=>e.defaultValue??!1},checkboxGroup:{component:l,getDefault:e=>e.defaultValue??[]},switch:{component:m,getDefault:e=>e.defaultValue??!1,adapt:e=>({label:e.label})},slider:{component:c,getDefault:e=>Array.isArray(e.defaultValue)?e.defaultValue:e.defaultValue??e.min??0,adapt:(e,t)=>({onChange:(e,l)=>t.onChange(l)})},starRating:{component:p,getDefault:e=>e.defaultValue??0,adapt:(e,t)=>({onChange:(e,l)=>t.onChange(l)})},differential:{component:r,getDefault:e=>e.defaultValue??""},likert:{component:o,getDefault:e=>e.defaultValue??""},radioGroup:{component:i,getDefault:e=>e.defaultValue??""},ranking:{component:f,getDefault:e=>e.defaultValue?e.defaultValue.map(t=>e.options.find(e=>e.id===t)):e.options},richTextfield:{component:d,getDefault:e=>e.defaultValue??""},customfield:{component:u,getDefault:e=>e.defaultValue??""}},x=["fieldType","name","ref","label","labelProps","helperText","helpTextProps","content","styleOverrides","strengthIndicator","defaultValue","hidden"],D=e=>{if(e.noneOfThese)return!0;return(e.name||e.value||"").replace(/-/g,"_").includes("none_of_these")};exports.FIELD_REGISTRY=h,exports.extractNoneOfThese=e=>{if(!e.other?.enabled||!Array.isArray(e.options))return e;const t=e.options,l=t.findIndex(D);return-1===l?e:{...e,options:t.filter((e,t)=>t!==l),noneOfTheseOption:t[l]}},exports.getDefaultValues=e=>e.reduce((e,t)=>("html"!==t.fieldType&&(e[t.name]=h[t.fieldType].getDefault(t)),e),{}),exports.getFieldDefault=e=>"html"===e.fieldType?void 0:h[e.fieldType].getDefault(e),exports.getFieldDefinition=e=>h[e],exports.splitFieldProps=e=>{const t={};for(const l of Object.keys(e))x.includes(l)||(t[l]=e[l]);return t};
+"use strict";var e=require("../AutocompleteField/AutocompleteField.js"),t=require("../Checkbox/Checkbox.js");require("../Checkbox/StyledCheckbox.js");var a=require("../CheckboxGroup/CheckboxGroup.js"),l=require("../CreatableAutocomplete/CreatableAutocomplete.js"),r=require("../CustomField/CustomField.js"),u=require("../Differential/Differential.js"),o=require("../Likert/Likert.js"),i=require("../NumberField/NumberField.js"),n=require("../RadioGroup/RadioGroup.js"),d=require("../Rank/Rank.js"),f=require("../RichTextField/RichTextField.js");require("../SelectItem/SelectItem.js");var s=require("../Select/Select.js"),c=require("../Slider/Slider.js"),p=require("../StarRating/StarRating.js"),m=require("../Switch/Switch.js"),g=require("../Textarea/Textarea.js");const h={textfield:{component:require("../TextField/TextField.js"),getDefault:e=>e.defaultValue??""},numberfield:{component:i.default,getDefault:e=>e.defaultValue??0},textarea:{component:g,getDefault:e=>e.defaultValue??""},creatableautocomplete:{component:l,getDefault:e=>e.defaultValue??""},select:{component:s,getDefault:e=>e.defaultValue??""},autocomplete:{component:e,getDefault:e=>e.defaultValue,adapt:(e,t)=>({onChange:(e,a)=>t.onChange(a)})},checkbox:{component:t,getDefault:e=>e.defaultValue??!1},checkboxGroup:{component:a,getDefault:e=>e.defaultValue??[]},switch:{component:m,getDefault:e=>e.defaultValue??!1,adapt:e=>({label:e.label})},slider:{component:c,getDefault:e=>Array.isArray(e.defaultValue)?e.defaultValue:e.defaultValue??e.min??0,adapt:(e,t)=>({onChange:(e,a)=>t.onChange(a)})},starRating:{component:p,getDefault:e=>e.defaultValue??0,adapt:(e,t)=>({onChange:(e,a)=>t.onChange(a)})},differential:{component:u,getDefault:e=>e.defaultValue??""},likert:{component:o,getDefault:e=>e.defaultValue??""},radioGroup:{component:n,getDefault:e=>e.defaultValue??""},ranking:{component:d,getDefault:e=>e.defaultValue?e.defaultValue.map(t=>e.options.find(e=>e.id===t)):e.options},richTextfield:{component:f,getDefault:e=>e.defaultValue??""},customfield:{component:r,getDefault:e=>e.defaultValue??""}},x=e=>{if("html"!==e.fieldType)return"array"===e.fieldType?e.defaultValue??[]:h[e.fieldType].getDefault(e)},D=["fieldType","name","ref","label","labelProps","helperText","helpTextProps","content","styleOverrides","strengthIndicator","defaultValue","hidden","visibleWhen","hideError","itemField","minItems","maxItems","addLabel","defaultItem","removeAction","actions","deriveProps"],V=e=>{if(e.noneOfThese)return!0;return(e.name||e.value||"").replace(/-/g,"_").includes("none_of_these")};exports.FIELD_REGISTRY=h,exports.extractNoneOfThese=e=>{if(!e.other?.enabled||!Array.isArray(e.options))return e;const t=e.options,a=t.findIndex(V);return-1===a?e:{...e,options:t.filter((e,t)=>t!==a),noneOfTheseOption:t[a]}},exports.getDefaultValues=e=>e.reduce((e,t)=>("html"!==t.fieldType&&(e[t.name]=x(t)),e),{}),exports.getFieldDefault=x,exports.getFieldDefinition=e=>h[e],exports.splitFieldProps=e=>{const t={};for(const a of Object.keys(e))D.includes(a)||(t[a]=e[a]);return t};

package/dist/systems/WebCore/FormBuilder/types.d.ts

@@ -1,30 +1,10 @@
 import { SxProps, Theme } from '@mui/material';
-import { Ref, ReactElement, ReactNode } from 'react';
-import { FieldValues, FieldPath, Resolver, SubmitHandler, FieldErrors, UseFormSetValue, UseFormGetFieldState, UseFormTrigger, UseFormWatch } from 'react-hook-form';
-import '../../../index.js';
-import '../Text/types.js';
+import { ReactElement } from 'react';
+import { FieldValues, Resolver, SubmitHandler, FieldErrors, FieldPath, UseFormSetValue, UseFormGetFieldState, UseFormTrigger, UseFormWatch } from 'react-hook-form';
 import { ZodType } from 'zod';
 import { FieldTypes } from './fieldRegistry.js';
-export { DynamicFieldType, FieldType, HtmlField } from './fieldRegistry.js';
-import { InputLabelProps } from '../InputLabel/InputLabel.js';
-import { InputLabelHelpProps } from '../InputLabelHelp/InputLabelHelp.js';
+export { ArrayActionsApi, ArrayField, ArrayItemField, ArrayRowApi, BaseField, DynamicFieldType, FieldType, HtmlField } from './fieldRegistry.js';
 
-interface BaseField<TValues extends FieldValues = FieldValues> {
-    name: FieldPath<TValues>;
-    id?: string;
-    ref?: Ref<HTMLElement>;
-    label?: string | ReactElement;
-    labelProps?: InputLabelProps;
-    helperText?: string | ReactNode;
-    helpTextProps?: InputLabelHelpProps;
-    hidden?: boolean;
-    disabled?: boolean;
-    styleOverrides?: {
-        sxInputWrapper?: SxProps<Theme>;
-        sxInputBase?: SxProps<Theme>;
-        sxInputStack?: SxProps<Theme>;
-    };
-}
 interface FormBuilderConfig<TValues extends FieldValues = FieldValues> {
     fields: FieldTypes<TValues>[];
     schema?: ZodType<TValues>;
@@ -67,4 +47,4 @@ interface FormBuilderProps<TValues extends FieldValues = FieldValues> {
 }
 
 export { FieldTypes };
-export type { BaseField, FormBuilderConfig, FormBuilderHandle, FormBuilderProps };
+export type { FormBuilderConfig, FormBuilderHandle, FormBuilderProps };

package/dist/systems/WebCore/FormGenerator/types.d.ts

@@ -19,9 +19,9 @@ import { SwitchProps } from '../Switch/Switch.js';
 import { TextareaProps } from '../Textarea/Textarea.js';
 import { NumberFieldProps } from '../NumberField/types.js';
 import { TextFieldProps } from '../TextField/TextField.js';
-import { HtmlProps } from '../Html/Html.js';
 import { InputLabelProps } from '../InputLabel/InputLabel.js';
 import { InputLabelHelpProps } from '../InputLabelHelp/InputLabelHelp.js';
+import { HtmlProps } from '../Html/Html.js';
 
 /**
  * Form Generator Core Types

package/dist/theme/types.d.ts

@@ -38,6 +38,7 @@ interface CustomTheme {
             strong: string;
             light: string;
             subtle: string;
+            transparent: string;
             focus: string;
             disabled: string;
         };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@useloops/design-system",
-    "version": "1.4.722",
+    "version": "1.4.724",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",
@@ -245,7 +245,7 @@
         "merge-sx": "^3.5.0",
         "motion": "^12.40.0",
         "mui-tiptap": "^1.31.0",
-        "react-hook-form": "^7.78.0",
+        "react-hook-form": "^7.81.0",
         "react-intersection-observer": "^9.16.0",
         "react-number-format": "^5.4.5",
         "react-phone-number-input": "^3.4.17",