@useloops/design-system 1.4.729 → 1.4.730

package/dist/esm/systems/WebCore/FormBuilder/Field.js

@@ -1 +1 @@
-import{jsxs as e,jsx as r,Fragment as o}from"react/jsx-runtime";import{useTheme as t}from"@mui/material";import{memo as n,useRef as i,useEffect as l}from"react";import{useWatch as a,Controller as c}from"react-hook-form";import{space as s}from"../../BrandCore/primitiveVariables.js";import d from"../Html/Html.js";import f from"../InputLabel/InputLabel.js";import p from"./ArrayFieldRows.js";import u from"./components/StrengthIndicator/StrengthIndicator.js";import m from"./FieldCollapse.js";import h,{CollapseMessage as v}from"./FieldMessage.js";import{extractNoneOfThese as g,splitFieldProps as y,getFieldDefinition as b}from"./fieldRegistry.js";const x=n(({field:n,fieldRef:x,control:j,appear:R=!1})=>{const{custom:S}=t(),B=n,{fieldType:I,name:F,label:T,labelProps:L,helperText:k,helpTextProps:w,content:P,styleOverrides:C,strengthIndicator:H,hidden:M,visibleWhen:O,deriveProps:$,hideError:z,focusOnReveal:A}=B,E=g(y(B)),V=Boolean(O)||Boolean($)||"function"==typeof T,W=a({control:j,disabled:!V}),q=Boolean(M)||!!O&&!O(W??{}),D=i(null),G=i(q),J=G.current&&!q;l(()=>{G.current=q});const K=Boolean(A)&&J,N=Boolean(E.autoFocus)||K&&"richTextfield"===I;l(()=>{if(!N&&!K)return;const e=D.current;if(e&&"function"==typeof e.focus&&(e.focus({preventScroll:!0}),"string"==typeof e.value&&"function"==typeof e.setSelectionRange))try{e.setSelectionRange(e.value.length,e.value.length)}catch{}},[N,K]);const Q=$?$(W??{}):void 0,U="function"==typeof T?T:void 0,X=U?U(W??{}):T,Y=a({control:j,name:F,disabled:!H}),Z="checkbox"===I?`${"lg"===E.sizing?s[600]:s[500]}px`:void 0,_=`${F}-error`;return e(m,{hidden:q,appear:R,sx:C?.sxInputStack,children:["switch"!==I?X&&r(f,{...L,children:X}):null,(()=>{if("html"===I)return P?r(d,{children:P}):null;if("array"===I)return r(p,{field:B,control:j});const t=b(I);if(!t)return null;const n=t.component;return r(c,{name:F,control:j,render:({field:{ref:i,...l},fieldState:a})=>e(o,{children:[r(n,{...E,...Q,...l,...t.adapt?.({...B,label:X},l)??{},autoFocus:N,"aria-invalid":!!a.error||void 0,"aria-describedby":a.error?_:void 0,inputRef:e=>{i(e),((e,r)=>{"function"==typeof e?e(r):e&&(e.current=r)})(x,e),D.current=e}}),H&&r(u,{value:Y}),r(v,{id:_,errorMessage:z?void 0:a.error?.message,paddingLeft:Z,showicon:!0})]})})})(),k?r(h,{helperText:k,paddingLeft:Z,...w}):null]})});export{x as default};
+import{jsxs as e,jsx as r,Fragment as o}from"react/jsx-runtime";import{useTheme as t}from"@mui/material";import{memo as n,useRef as i,useEffect as l}from"react";import{useWatch as a,Controller as c}from"react-hook-form";import{space as s}from"../../BrandCore/primitiveVariables.js";import d from"../Html/Html.js";import f from"../InputLabel/InputLabel.js";import p from"./ArrayFieldRows.js";import m from"./components/StrengthIndicator/StrengthIndicator.js";import u from"./FieldCollapse.js";import h,{CollapseMessage as v}from"./FieldMessage.js";import{extractNoneOfThese as g,splitFieldProps as y,getFieldDefinition as b}from"./fieldRegistry.js";const j=n(({field:n,fieldRef:j,control:x,appear:B=!1})=>{const{custom:R}=t(),S=n,{fieldType:I,name:F,label:T,labelProps:w,helperText:L,helpTextProps:k,content:A,styleOverrides:O,strengthIndicator:P,hidden:C,visibleWhen:E,deriveProps:H,watch:M,hideError:$,focusOnReveal:z}=S,V=g(y(S)),W=Boolean(E)||Boolean(H)||"function"==typeof T,q=W&&Array.isArray(M)&&M.length>0?M:void 0,D=a({control:x,name:q,disabled:!W||!q}),G=a({control:x,disabled:!W||Boolean(q)}),J=q?Object.fromEntries(q.map((e,r)=>[e,D?.[r]])):G,K=Boolean(C)||!!E&&!E(J??{}),N=i(null),Q=i(K),U=Q.current&&!K;l(()=>{Q.current=K});const X=Boolean(z)&&U,Y=Boolean(V.autoFocus)||X&&"richTextfield"===I;l(()=>{if(!Y&&!X)return;const e=N.current;if(e&&"function"==typeof e.focus&&(e.focus({preventScroll:!0}),"string"==typeof e.value&&"function"==typeof e.setSelectionRange))try{e.setSelectionRange(e.value.length,e.value.length)}catch{}},[Y,X]);const Z=H?H(J??{}):void 0,_="function"==typeof T?T:void 0,ee=_?_(J??{}):T,re=a({control:x,name:F,disabled:!P}),oe="checkbox"===I?`${"lg"===V.sizing?s[600]:s[500]}px`:void 0,te=`${F}-error`;return e(u,{hidden:K,appear:B,sx:O?.sxInputStack,children:["switch"!==I?ee&&r(f,{...w,children:ee}):null,(()=>{if("html"===I)return A?r(d,{children:A}):null;if("array"===I)return r(p,{field:S,control:x});const t=b(I);if(!t)return null;const n=t.component;return r(c,{name:F,control:x,render:({field:{ref:i,...l},fieldState:a})=>e(o,{children:[r(n,{...V,...Z,...l,...t.adapt?.({...S,label:ee},l)??{},autoFocus:Y,"aria-invalid":!!a.error||void 0,"aria-describedby":a.error?te:void 0,inputRef:e=>{i(e),((e,r)=>{"function"==typeof e?e(r):e&&(e.current=r)})(j,e),N.current=e}}),P&&r(m,{value:re}),r(v,{id:te,errorMessage:$?void 0:a.error?.message,paddingLeft:oe,showicon:!0})]})})})(),L?r(h,{helperText:L,paddingLeft:oe,...k}):null]})});export{j as default};

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

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

package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.d.ts

@@ -5,40 +5,40 @@ import * as _mui_system from '@mui/system';
 import * as _mui_material from '@mui/material';
 import { SliderGraphBarProps, CommonComponentProps } from '../types.js';
 
-declare const SliderGraphWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const SliderGraphWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType | undefined;
 } & {
     maxHeight: number;
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ListItemButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof _mui_material.ListItemButtonOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled" | "sx" | "alignItems" | "style" | "children" | "autoFocus" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "dense" | "disableGutters" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
+declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ListItemButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof _mui_material.ListItemButtonOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "autoFocus" | "tabIndex" | "disableGutters" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "selected" | "dense" | "divider"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
     component?: React.ElementType | undefined;
 } & {
     maxHeight: number;
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const SliderGraphBarWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const SliderGraphBarWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType | undefined;
 } & {
     maxHeight: number;
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const VerticalBarValue: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const VerticalBarValue: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType | undefined;
 }, {}, {}>;
-declare const VerticalBar: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const VerticalBar: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType | undefined;
 } & CommonComponentProps & {
     value: number;
     checked: boolean;
 }, {}, {}>;
-declare const VerticalBarActions: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const VerticalBarActions: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType | undefined;
 }, {}, {}>;
-declare const VerticalBarLabel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const VerticalBarLabel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType | undefined;
 }, {}, {}>;
 declare const AxisSegmentWrapper: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
@@ -46,7 +46,7 @@ declare const AxisSegmentWrapper: _emotion_styled.StyledComponent<_mui_material.
 } & {
     maxHeight: number;
 } & Partial<SliderGraphBarProps>, {}, {}>;
-declare const AxisSegment: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const AxisSegment: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType | undefined;
 } & {
     showGraphLines?: boolean;

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

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("react"),n=require("react-hook-form"),o=require("../../BrandCore/primitiveVariables.js"),i=require("../Html/Html.js"),s=require("../InputLabel/InputLabel.js"),l=require("./ArrayFieldRows.js"),a=require("./components/StrengthIndicator/StrengthIndicator.js"),u=require("./FieldCollapse.js"),c=require("./FieldMessage.js"),d=require("./fieldRegistry.js");var f=t.memo(({field:f,fieldRef:p,control:h,appear:x=!1})=>{const{custom:m}=r.useTheme(),g=f,{fieldType:j,name:v,label:y,labelProps:b,helperText:q,helpTextProps:R,content:F,styleOverrides:S,strengthIndicator:T,hidden:B,visibleWhen:I,deriveProps:C,hideError:L,focusOnReveal:P}=g,k=d.extractNoneOfThese(d.splitFieldProps(g)),w=Boolean(I)||Boolean(C)||"function"==typeof y,E=n.useWatch({control:h,disabled:!w}),M=Boolean(B)||!!I&&!I(E??{}),O=t.useRef(null),W=t.useRef(M),H=W.current&&!M;t.useEffect(()=>{W.current=M});const $=Boolean(P)&&H,z=Boolean(k.autoFocus)||$&&"richTextfield"===j;t.useEffect(()=>{if(!z&&!$)return;const e=O.current;if(e&&"function"==typeof e.focus&&(e.focus({preventScroll:!0}),"string"==typeof e.value&&"function"==typeof e.setSelectionRange))try{e.setSelectionRange(e.value.length,e.value.length)}catch{}},[z,$]);const A=C?C(E??{}):void 0,D="function"==typeof y?y:void 0,N=D?D(E??{}):y,V=n.useWatch({control:h,name:v,disabled:!T}),G="checkbox"===j?`${"lg"===k.sizing?o.space[600]:o.space[500]}px`:void 0,J=`${v}-error`;return e.jsxs(u,{hidden:M,appear:x,sx:S?.sxInputStack,children:["switch"!==j?N&&e.jsx(s,{...b,children:N}):null,(()=>{if("html"===j)return F?e.jsx(i,{children:F}):null;if("array"===j)return e.jsx(l,{field:g,control:h});const r=d.getFieldDefinition(j);if(!r)return null;const t=r.component;return e.jsx(n.Controller,{name:v,control:h,render:({field:{ref:n,...o},fieldState:i})=>e.jsxs(e.Fragment,{children:[e.jsx(t,{...k,...A,...o,...r.adapt?.({...g,label:N},o)??{},autoFocus:z,"aria-invalid":!!i.error||void 0,"aria-describedby":i.error?J:void 0,inputRef:e=>{n(e),((e,r)=>{"function"==typeof e?e(r):e&&(e.current=r)})(p,e),O.current=e}}),T&&e.jsx(a,{value:V}),e.jsx(c.CollapseMessage,{id:J,errorMessage:L?void 0:i.error?.message,paddingLeft:G,showicon:!0})]})})})(),q?e.jsx(c.default,{helperText:q,paddingLeft:G,...R}):null]})});module.exports=f;
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("react"),n=require("react-hook-form"),o=require("../../BrandCore/primitiveVariables.js"),i=require("../Html/Html.js"),s=require("../InputLabel/InputLabel.js"),l=require("./ArrayFieldRows.js"),a=require("./components/StrengthIndicator/StrengthIndicator.js"),c=require("./FieldCollapse.js"),u=require("./FieldMessage.js"),d=require("./fieldRegistry.js");var f=t.memo(({field:f,fieldRef:p,control:h,appear:m=!1})=>{const{custom:x}=r.useTheme(),g=f,{fieldType:j,name:v,label:y,labelProps:b,helperText:q,helpTextProps:R,content:F,styleOverrides:B,strengthIndicator:S,hidden:T,visibleWhen:I,deriveProps:w,watch:C,hideError:E,focusOnReveal:L}=g,O=d.extractNoneOfThese(d.splitFieldProps(g)),P=Boolean(I)||Boolean(w)||"function"==typeof y,W=P&&Array.isArray(C)&&C.length>0?C:void 0,k=n.useWatch({control:h,name:W,disabled:!P||!W}),A=n.useWatch({control:h,disabled:!P||Boolean(W)}),M=W?Object.fromEntries(W.map((e,r)=>[e,k?.[r]])):A,H=Boolean(T)||!!I&&!I(M??{}),$=t.useRef(null),z=t.useRef(H),D=z.current&&!H;t.useEffect(()=>{z.current=H});const N=Boolean(L)&&D,V=Boolean(O.autoFocus)||N&&"richTextfield"===j;t.useEffect(()=>{if(!V&&!N)return;const e=$.current;if(e&&"function"==typeof e.focus&&(e.focus({preventScroll:!0}),"string"==typeof e.value&&"function"==typeof e.setSelectionRange))try{e.setSelectionRange(e.value.length,e.value.length)}catch{}},[V,N]);const G=w?w(M??{}):void 0,J="function"==typeof y?y:void 0,K=J?J(M??{}):y,Q=n.useWatch({control:h,name:v,disabled:!S}),U="checkbox"===j?`${"lg"===O.sizing?o.space[600]:o.space[500]}px`:void 0,X=`${v}-error`;return e.jsxs(c,{hidden:H,appear:m,sx:B?.sxInputStack,children:["switch"!==j?K&&e.jsx(s,{...b,children:K}):null,(()=>{if("html"===j)return F?e.jsx(i,{children:F}):null;if("array"===j)return e.jsx(l,{field:g,control:h});const r=d.getFieldDefinition(j);if(!r)return null;const t=r.component;return e.jsx(n.Controller,{name:v,control:h,render:({field:{ref:n,...o},fieldState:i})=>e.jsxs(e.Fragment,{children:[e.jsx(t,{...O,...G,...o,...r.adapt?.({...g,label:K},o)??{},autoFocus:V,"aria-invalid":!!i.error||void 0,"aria-describedby":i.error?X:void 0,inputRef:e=>{n(e),((e,r)=>{"function"==typeof e?e(r):e&&(e.current=r)})(p,e),$.current=e}}),S&&e.jsx(a,{value:Q}),e.jsx(u.CollapseMessage,{id:X,errorMessage:E?void 0:i.error?.message,paddingLeft:U,showicon:!0})]})})})(),q?e.jsx(u.default,{helperText:q,paddingLeft:U,...R}):null]})});module.exports=f;

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

@@ -43,6 +43,13 @@ interface BaseField<TValues extends FieldValues = FieldValues> {
      * e.g. a select whose `selections` depend on how many rows another field holds.
      */
     deriveProps?: (values: TValues) => Record<string, unknown>;
+    /**
+     * Scopes this field's reactive config (`visibleWhen`/`deriveProps`/function `label`) to the named
+     * fields: it then only re-renders when THOSE values change, and the reactive callbacks receive a
+     * partial values record holding just these keys. Without it, reactive fields re-render on every
+     * form value change — expensive in large forms. List every field the callbacks read.
+     */
+    watch?: string[];
     /** Suppress the inline error message — for dense layouts that surface the error elsewhere. */
     hideError?: boolean;
     /**

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 a=require("../CheckboxGroup/CheckboxGroup.js"),l=require("../CreatableAutocomplete/CreatableAutocomplete.js"),r=require("../CustomField/CustomField.js"),o=require("../Differential/Differential.js"),u=require("../Likert/Likert.js"),n=require("../NumberField/NumberField.js"),i=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:n.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:o,getDefault:e=>e.defaultValue??""},likert:{component:u,getDefault:e=>e.defaultValue??""},radioGroup:{component:i,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)},b=["fieldType","name","ref","label","labelProps","helperText","helpTextProps","content","styleOverrides","strengthIndicator","defaultValue","hidden","visibleWhen","hideError","focusOnReveal","itemField","minItems","maxItems","addLabel","defaultItem","removeAction","rowActionsTabIndex","reorderable","dragAction","actions","deriveProps"],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,a=t.findIndex(D);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))b.includes(a)||(t[a]=e[a]);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"),o=require("../Differential/Differential.js"),u=require("../Likert/Likert.js"),n=require("../NumberField/NumberField.js"),i=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:n.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:o,getDefault:e=>e.defaultValue??""},likert:{component:u,getDefault:e=>e.defaultValue??""},radioGroup:{component:i,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)},b=["fieldType","name","ref","label","labelProps","helperText","helpTextProps","content","styleOverrides","strengthIndicator","defaultValue","hidden","visibleWhen","hideError","focusOnReveal","watch","itemField","minItems","maxItems","addLabel","defaultItem","removeAction","rowActionsTabIndex","reorderable","dragAction","actions","deriveProps"],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,a=t.findIndex(D);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))b.includes(a)||(t[a]=e[a]);return t};

package/dist/systems/WebCore/InputFieldBase/InputFieldBase.d.ts

@@ -6,7 +6,7 @@ import { TextFieldProps } from '@mui/material';
 type InputFieldBaseProps = TextFieldProps;
 declare const InputFieldBase: _emotion_styled.StyledComponent<{
     variant?: _mui_material.TextFieldVariants | undefined;
-} & Omit<_mui_material.FilledTextFieldProps | _mui_material.OutlinedTextFieldProps | _mui_material.StandardTextFieldProps, "variant"> & (_mui_system.MUIStyledCommonProps<_mui_material.Theme> & InputFieldBaseProps), {}, {}>;
+} & Omit<_mui_material.OutlinedTextFieldProps | _mui_material.FilledTextFieldProps | _mui_material.StandardTextFieldProps, "variant"> & (_mui_system.MUIStyledCommonProps<_mui_material.Theme> & InputFieldBaseProps), {}, {}>;
 
 export { InputFieldBase as default };
 export type { InputFieldBaseProps };

package/dist/theme/theme.hooks.d.ts

@@ -4,7 +4,7 @@ import { PaletteMode, Direction } from '@mui/material';
 import { ScreenSize, CustomTheme } from './types.js';
 
 declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
-    breakpoint: "" | "sm" | "md" | "lg" | "xl";
+    breakpoint: "" | "sm" | "lg" | "md" | "xl";
     custom: CustomTheme;
     gridOverlayVisible: boolean;
     mode: PaletteMode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@useloops/design-system",
-    "version": "1.4.729",
+    "version": "1.4.730",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",