@useloops/design-system 1.4.724 → 1.4.726

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

@@ -1 +1 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{Stack as o,Collapse as t,Box as i}from"@mui/material";import{useState as n,useRef as a}from"react";import{useFieldArray as m,useFormState as d,Controller as s}from"react-hook-form";import"../../BrandCore/colorRamps.js";import"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import l from"../../BrandCore/Icon/Icon.js";import c from"../Button/Button.js";import p from"../IconButton/IconButton.js";import{CollapseMessage as u}from"./FieldMessage.js";import{getFieldDefinition as f,splitFieldProps as g}from"./fieldRegistry.js";const x=({field:x,control:h})=>{const{fields:v,append:j,remove:B}=m({control:h,name:x.name}),{errors:C}=d({control:h,name:x.name}),[I,b]=n(new Set),y=a(v);y.current=v;const M=a(!0),S=!M.current;M.current=!1;const w=v.length-I.size,F=w<=(x.minItems??0),R=void 0!==x.maxItems&&w>=x.maxItems,k=C?.[x.name],z=k?.root?.message??k?.message,A=e=>b(r=>new Set(r).add(e)),E=e=>j({value:e??x.defaultItem??""});return e(o,{children:[v.map((n,a)=>{const m=I.has(n.id),d=((e,r)=>"function"==typeof x.itemField?x.itemField(e,r):x.itemField)(a,{index:a,remove:()=>A(n.id),atMinimum:F,atMaximum:R}),c=f(d.fieldType);if(!c)return null;const v=c.component,j=g(d),C="none"===x.removeAction?{}:{endAdornment:r(p,{"aria-label":"Remove item",sizing:"xs",disabled:F||m,icon:r(l,{name:"delete"}),onClick:()=>A(n.id)})};return r(t,{in:!m,appear:S,timeout:"auto",onExited:()=>(e=>{const r=y.current.findIndex(r=>r.id===e);r>=0&&B(r),b(r=>{const o=new Set(r);return o.delete(e),o})})(n.id),children:r(i,{sx:{paddingBottom:"8px"},children:r(s,{name:`${x.name}.${a}.value`,control:h,render:({field:{ref:t,...i},fieldState:n})=>e(o,{children:[r(v,{fullWidth:!0,...C,...j,...i,inputRef:t,"aria-invalid":!!n.error||void 0}),r(u,{errorMessage:x.hideError||m?void 0:n.error?.message})]})})})},n.id)}),r(u,{errorMessage:x.hideError?void 0:z,edge:"bottom",gap:8,showicon:!0}),x.actions?x.actions({append:E,count:w,atMaximum:R}):r(c,{variation:"outlined",sizing:"sm",disabled:R,onClick:()=>E(),sx:{alignSelf:"flex-start"},children:x.addLabel??"Add"})]})};export{x as default};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useSensors as t,useSensor as o,MouseSensor as i,TouchSensor as n,KeyboardSensor as a,DndContext as d,MeasuringStrategy as s}from"@dnd-kit/core";import{sortableKeyboardCoordinates as m,SortableContext as l,verticalListSortingStrategy as c,useSortable as p}from"@dnd-kit/sortable";import{CSS as f}from"@dnd-kit/utilities";import{Stack as u,Box as g,Collapse as x}from"@mui/material";import{useState as v,useRef as h}from"react";import{useFieldArray as b,useFormState as y,Controller as I}from"react-hook-form";import"../../BrandCore/colorRamps.js";import"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import j,{iconSizeMap as B}from"../../BrandCore/Icon/Icon.js";import C from"../Button/Button.js";import A from"../IconButton/IconButton.js";import{CollapseMessage as M}from"./FieldMessage.js";import{getFieldDefinition as R,splitFieldProps as w}from"./fieldRegistry.js";const E=({transform:e})=>({...e,x:0}),S=({rowId:t,index:o,field:i,control:n,item:a,isExiting:d,appear:s,atMinimum:m,reorderable:l,onRemove:c,onExited:v})=>{const{attributes:h,listeners:b,setNodeRef:y,setActivatorNodeRef:C,transform:E,transition:S,isDragging:k}=p({id:t,disabled:!l}),z=R(a.fieldType);if(!z)return null;const F=z.component,T=w(a),D="none"===i.removeAction?{}:{endAdornment:e(A,{"aria-label":"Remove item",sizing:"xs",disabled:m||d,icon:e(j,{name:"delete"}),onClick:c})},N={ref:C,...h,...b,style:{touchAction:"none",cursor:k?"grabbing":"grab"}},$=l?"own"===a.dragAction?{dragHandleProps:N}:{startAdornment:e(g,{...N,"aria-label":"Reorder item",sx:{display:"flex",alignItems:"center",color:e=>e.custom.palette.text.placeholder},children:e(j,{name:"drag-handle-dots",size:B.md})})}:{};return e(x,{in:!d,appear:s,timeout:"auto",onExited:v,children:e(g,{ref:y,sx:{paddingBottom:"8px",position:"relative",transform:f.Translate.toString(E),transition:S,zIndex:k?1:void 0},children:e(I,{name:`${i.name}.${o}.value`,control:n,render:({field:{ref:t,...o},fieldState:n})=>r(u,{children:[e(F,{fullWidth:!0,...$,...D,...T,...o,inputRef:t,"aria-invalid":!!n.error||void 0}),e(M,{errorMessage:i.hideError||d?void 0:n.error?.message})]})})})})},k=({field:p,control:f})=>{const{fields:g,append:x,remove:I,move:j}=b({control:f,name:p.name}),{errors:B}=y({control:f,name:p.name}),[A,R]=v(new Set),w=h(g);w.current=g;const k=Boolean(p.reorderable),z=t(o(i,{activationConstraint:{distance:{y:2}}}),o(n,{activationConstraint:{distance:{y:2}}}),o(a,{coordinateGetter:m})),F=h(!0),T=!F.current;F.current=!1;const D=g.length-A.size,N=D<=(p.minItems??0),$=void 0!==p.maxItems&&D>=p.maxItems,G=B?.[p.name],H=G?.root?.message??G?.message,L=(e,r)=>"function"==typeof p.itemField?p.itemField(e,r):p.itemField,P=e=>R(r=>new Set(r).add(e)),V=e=>x((e=>"object"==typeof e&&null!==e&&!Array.isArray(e)&&"value"in e)(e)?e:{value:e??p.defaultItem??""});return e(d,{sensors:z,modifiers:[E],measuring:{droppable:{strategy:s.Always}},onDragEnd:({active:e,over:r})=>{if(!r||e.id===r.id)return;const t=w.current.findIndex(r=>r.id===e.id),o=w.current.findIndex(e=>e.id===r.id);t>=0&&o>=0&&j(t,o)},children:e(l,{items:g.map(e=>e.id),strategy:c,disabled:!k,children:r(u,{children:[g.map((r,t)=>{const o=A.has(r.id),i={index:t,remove:()=>P(r.id),atMinimum:N,atMaximum:$};return e(S,{rowId:r.id,index:t,field:p,control:f,item:L(t,i),isExiting:o,appear:T,atMinimum:N,reorderable:k,onRemove:()=>P(r.id),onExited:()=>(e=>{const r=w.current.findIndex(r=>r.id===e);r>=0&&I(r),R(r=>{const t=new Set(r);return t.delete(e),t})})(r.id)},r.id)}),e(M,{errorMessage:p.hideError?void 0:H,edge:"bottom",gap:8,showicon:!0}),p.actions?p.actions({append:V,count:D,atMaximum:$}):e(C,{variation:"outlined",sizing:"sm",disabled:$,onClick:()=>V(),sx:{alignSelf:"flex-start"},children:p.addLabel??"Add"})]})})})};export{k as default};

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

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

package/dist/esm/systems/WebCore/RichTextField/RichTextField.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useTheme as o,Stack as i}from"@mui/material";import{Placeholder as r}from"@tiptap/extension-placeholder";import{StarterKit as n}from"@tiptap/starter-kit";import{MenuButtonBold as l,MenuButtonItalic as a,MenuButtonUnderline as m,MenuButtonBulletedList as d,MenuButtonOrderedList as s}from"mui-tiptap";import{useRef as c}from"react";import p from"./StyledRichTextEditor.js";const u=({onChange:u,value:h,internalChange:f,minWidth:g=100,minHeight:x=100,maxHeight:b,placeholder:H,options:L={}})=>{const k=c(null);o();const{bold:C=!0,italic:R=!0,underline:j=!0,bulletList:v=!1,orderedList:w=!1}=L;return t(p,{sx:{"& .ProseMirror":{overflowY:"auto",minHeight:x,minWidth:g,maxHeight:b}},ref:k,onUpdate:({editor:t})=>{u&&u(t.getHTML()),f&&f()},enableInputRules:!1,extensions:[n.configure({strike:!1,code:!1,heading:!1,blockquote:!1,horizontalRule:!1,codeBlock:!1,bold:!!C&&{},italic:!!R&&{},listItem:!(!v&&!w)&&{},bulletList:!!v&&{},orderedList:!!w&&{}}),r.configure({placeholder:H})],content:h,renderControls:()=>e(i,{direction:"row",children:[C&&t(l,{}),R&&t(a,{}),j&&t(m,{}),v&&t(d,{}),w&&t(s,{})]})})};export{u as default};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useTheme as o,Stack as i}from"@mui/material";import{Placeholder as r}from"@tiptap/extension-placeholder";import{StarterKit as n}from"@tiptap/starter-kit";import{MenuButtonBold as l,MenuButtonItalic as a,MenuButtonUnderline as m,MenuButtonBulletedList as d,MenuButtonOrderedList as s}from"mui-tiptap";import{useRef as c}from"react";import u from"./StyledRichTextEditor.js";const p=({onChange:p,value:h,internalChange:f,minWidth:g=100,minHeight:x=100,maxHeight:b,placeholder:H,options:L={},autoFocus:k=!1})=>{const C=c(null);o();const{bold:R=!0,italic:j=!0,underline:v=!0,bulletList:w=!1,orderedList:I=!1}=L;return t(u,{sx:{"& .ProseMirror":{overflowY:"auto",minHeight:x,minWidth:g,maxHeight:b}},ref:C,autofocus:!!k&&"end",onUpdate:({editor:t})=>{p&&p(t.getHTML()),f&&f()},enableInputRules:!1,extensions:[n.configure({strike:!1,code:!1,heading:!1,blockquote:!1,horizontalRule:!1,codeBlock:!1,bold:!!R&&{},italic:!!j&&{},listItem:!(!w&&!I)&&{},bulletList:!!w&&{},orderedList:!!I&&{}}),r.configure({placeholder:H})],content:h,renderControls:()=>e(i,{direction:"row",children:[R&&t(l,{}),j&&t(a,{}),v&&t(m,{}),w&&t(d,{}),I&&t(s,{})]})})};export{p as default};

package/dist/esm/systems/WebCore/TextField/TextField.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{InputAdornment as t}from"@mui/material";import{space as n}from"../../BrandCore/primitiveVariables.js";import r from"../InputFieldBase/InputFieldBase.js";const i=({startAdornment:i,endAdornment:o,placeholder:s,onChange:a,internalChange:l,inputRef:p,...d})=>e(r,{placeholder:s,sx:{height:n[500],"& .MuiOutlinedInput-input":{pl:i?1:2,pr:i?1:2}},inputRef:p,slotProps:{input:{startAdornment:i?e(t,{position:"start",disablePointerEvents:d.disabled,sx:{pl:1},children:i}):null,endAdornment:o?e(t,{position:"start",disablePointerEvents:d.disabled,sx:{pr:1},children:o}):null}},...d,onChange:e=>{a&&a(e),l&&l()}});export{i as default};
+import{jsx as t}from"react/jsx-runtime";import{InputAdornment as e}from"@mui/material";import{space as n}from"../../BrandCore/primitiveVariables.js";import r from"../InputFieldBase/InputFieldBase.js";const i=({startAdornment:i,endAdornment:o,placeholder:s,onChange:l,internalChange:a,inputRef:p,slotProps:d,...m})=>t(r,{placeholder:s,sx:{height:n[500],"& .MuiOutlinedInput-input":{pl:i?1:2,pr:i?1:2}},inputRef:p,slotProps:{...d,input:{startAdornment:i?t(e,{position:"start",disablePointerEvents:m.disabled,sx:{pl:1},children:i}):null,endAdornment:o?t(e,{position:"start",disablePointerEvents:m.disabled,sx:{pr:1},children:o}):null,...d?.input??{}}},...m,onChange:t=>{l&&l(t),a&&a()}});export{i as default};

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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     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>, "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> & {
+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> & {
     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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     component?: React.ElementType | undefined;
 } & {
     showGraphLines?: boolean;

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

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),i=require("react"),t=require("react-hook-form");require("../../BrandCore/colorRamps.js"),require("../../BrandCore/primitiveVariables.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var n=require("../../BrandCore/Icon/Icon.js"),o=require("../Button/Button.js"),s=require("../IconButton/IconButton.js"),a=require("./FieldMessage.js"),d=require("./fieldRegistry.js");module.exports=({field:l,control:u})=>{const{fields:m,append:c,remove:x}=t.useFieldArray({control:u,name:l.name}),{errors:p}=t.useFormState({control:u,name:l.name}),[j,f]=i.useState(new Set),g=i.useRef(m);g.current=m;const v=i.useRef(!0),q=!v.current;v.current=!1;const h=m.length-j.size,C=h<=(l.minItems??0),B=void 0!==l.maxItems&&h>=l.maxItems,I=p?.[l.name],S=I?.root?.message??I?.message,F=e=>f(r=>new Set(r).add(e)),M=e=>c({value:e??l.defaultItem??""});return e.jsxs(r.Stack,{children:[m.map((i,o)=>{const m=j.has(i.id),c=((e,r)=>"function"==typeof l.itemField?l.itemField(e,r):l.itemField)(o,{index:o,remove:()=>F(i.id),atMinimum:C,atMaximum:B}),p=d.getFieldDefinition(c.fieldType);if(!p)return null;const v=p.component,h=d.splitFieldProps(c),I="none"===l.removeAction?{}:{endAdornment:e.jsx(s,{"aria-label":"Remove item",sizing:"xs",disabled:C||m,icon:e.jsx(n.default,{name:"delete"}),onClick:()=>F(i.id)})};return e.jsx(r.Collapse,{in:!m,appear:q,timeout:"auto",onExited:()=>(e=>{const r=g.current.findIndex(r=>r.id===e);r>=0&&x(r),f(r=>{const i=new Set(r);return i.delete(e),i})})(i.id),children:e.jsx(r.Box,{sx:{paddingBottom:"8px"},children:e.jsx(t.Controller,{name:`${l.name}.${o}.value`,control:u,render:({field:{ref:i,...t},fieldState:n})=>e.jsxs(r.Stack,{children:[e.jsx(v,{fullWidth:!0,...I,...h,...t,inputRef:i,"aria-invalid":!!n.error||void 0}),e.jsx(a.CollapseMessage,{errorMessage:l.hideError||m?void 0:n.error?.message})]})})})},i.id)}),e.jsx(a.CollapseMessage,{errorMessage:l.hideError?void 0:S,edge:"bottom",gap:8,showicon:!0}),l.actions?l.actions({append:M,count:h,atMaximum:B}):e.jsx(o,{variation:"outlined",sizing:"sm",disabled:B,onClick:()=>M(),sx:{alignSelf:"flex-start"},children:l.addLabel??"Add"})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@dnd-kit/core"),t=require("@dnd-kit/sortable"),i=require("@dnd-kit/utilities"),n=require("@mui/material"),o=require("react"),s=require("react-hook-form");require("../../BrandCore/colorRamps.js"),require("../../BrandCore/primitiveVariables.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var a=require("../../BrandCore/Icon/Icon.js"),d=require("../Button/Button.js"),l=require("../IconButton/IconButton.js"),u=require("./FieldMessage.js"),c=require("./fieldRegistry.js");const m=({transform:e})=>({...e,x:0}),x=({rowId:r,index:o,field:d,control:m,item:x,isExiting:g,appear:p,atMinimum:f,reorderable:j,onRemove:v,onExited:S})=>{const{attributes:b,listeners:y,setNodeRef:h,setActivatorNodeRef:C,transform:q,transition:I,isDragging:B}=t.useSortable({id:r,disabled:!j}),M=c.getFieldDefinition(x.fieldType);if(!M)return null;const A=M.component,R=c.splitFieldProps(x),k="none"===d.removeAction?{}:{endAdornment:e.jsx(l,{"aria-label":"Remove item",sizing:"xs",disabled:f||g,icon:e.jsx(a.default,{name:"delete"}),onClick:v})},w={ref:C,...b,...y,style:{touchAction:"none",cursor:B?"grabbing":"grab"}},E=j?"own"===x.dragAction?{dragHandleProps:w}:{startAdornment:e.jsx(n.Box,{...w,"aria-label":"Reorder item",sx:{display:"flex",alignItems:"center",color:e=>e.custom.palette.text.placeholder},children:e.jsx(a.default,{name:"drag-handle-dots",size:a.iconSizeMap.md})})}:{};return e.jsx(n.Collapse,{in:!g,appear:p,timeout:"auto",onExited:S,children:e.jsx(n.Box,{ref:h,sx:{paddingBottom:"8px",position:"relative",transform:i.CSS.Translate.toString(q),transition:I,zIndex:B?1:void 0},children:e.jsx(s.Controller,{name:`${d.name}.${o}.value`,control:m,render:({field:{ref:r,...t},fieldState:i})=>e.jsxs(n.Stack,{children:[e.jsx(A,{fullWidth:!0,...E,...k,...R,...t,inputRef:r,"aria-invalid":!!i.error||void 0}),e.jsx(u.CollapseMessage,{errorMessage:d.hideError||g?void 0:i.error?.message})]})})})})};module.exports=({field:i,control:a})=>{const{fields:l,append:c,remove:g,move:p}=s.useFieldArray({control:a,name:i.name}),{errors:f}=s.useFormState({control:a,name:i.name}),[j,v]=o.useState(new Set),S=o.useRef(l);S.current=l;const b=Boolean(i.reorderable),y=r.useSensors(r.useSensor(r.MouseSensor,{activationConstraint:{distance:{y:2}}}),r.useSensor(r.TouchSensor,{activationConstraint:{distance:{y:2}}}),r.useSensor(r.KeyboardSensor,{coordinateGetter:t.sortableKeyboardCoordinates})),h=o.useRef(!0),C=!h.current;h.current=!1;const q=l.length-j.size,I=q<=(i.minItems??0),B=void 0!==i.maxItems&&q>=i.maxItems,M=f?.[i.name],A=M?.root?.message??M?.message,R=(e,r)=>"function"==typeof i.itemField?i.itemField(e,r):i.itemField,k=e=>v(r=>new Set(r).add(e)),w=e=>c((e=>"object"==typeof e&&null!==e&&!Array.isArray(e)&&"value"in e)(e)?e:{value:e??i.defaultItem??""});return e.jsx(r.DndContext,{sensors:y,modifiers:[m],measuring:{droppable:{strategy:r.MeasuringStrategy.Always}},onDragEnd:({active:e,over:r})=>{if(!r||e.id===r.id)return;const t=S.current.findIndex(r=>r.id===e.id),i=S.current.findIndex(e=>e.id===r.id);t>=0&&i>=0&&p(t,i)},children:e.jsx(t.SortableContext,{items:l.map(e=>e.id),strategy:t.verticalListSortingStrategy,disabled:!b,children:e.jsxs(n.Stack,{children:[l.map((r,t)=>{const n=j.has(r.id),o={index:t,remove:()=>k(r.id),atMinimum:I,atMaximum:B};return e.jsx(x,{rowId:r.id,index:t,field:i,control:a,item:R(t,o),isExiting:n,appear:C,atMinimum:I,reorderable:b,onRemove:()=>k(r.id),onExited:()=>(e=>{const r=S.current.findIndex(r=>r.id===e);r>=0&&g(r),v(r=>{const t=new Set(r);return t.delete(e),t})})(r.id)},r.id)}),e.jsx(u.CollapseMessage,{errorMessage:i.hideError?void 0:A,edge:"bottom",gap:8,showicon:!0}),i.actions?i.actions({append:w,count:q,atMaximum:B}):e.jsx(d,{variation:"outlined",sizing:"sm",disabled:B,onClick:()=>w(),sx:{alignSelf:"flex-start"},children:i.addLabel??"Add"})]})})})};

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

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

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

@@ -45,6 +45,11 @@ interface BaseField<TValues extends FieldValues = FieldValues> {
     deriveProps?: (values: TValues) => Record<string, unknown>;
     /** Suppress the inline error message — for dense layouts that surface the error elsewhere. */
     hideError?: boolean;
+    /**
+     * Focus the field (caret at the end for text inputs) when it becomes visible on a live form —
+     * pairs with `visibleWhen`/`hidden` so toggling a section drops the user straight into it.
+     */
+    focusOnReveal?: boolean;
     /** Narrowed per control type in `DynamicField`; declared here so the union is uniformly readable. */
     defaultValue?: unknown;
     disabled?: boolean;
@@ -167,9 +172,14 @@ type HtmlField<TValues extends FieldValues = FieldValues> = Omit<BaseField<TValu
     fieldType: 'html';
     content: ReactElement;
 };
-/** Per-row control config for an `ArrayField` — any registry control, minus the row-managed keys. */
+/**
+ * Per-row control config for an `ArrayField` — any registry control, minus the row-managed keys.
+ * On a `reorderable` array, `dragAction: 'own'` hands the row a `dragHandleProps` prop (spread it onto
+ * your own handle element) instead of the injected `startAdornment` handle.
+ */
 type ArrayItemField = {
     fieldType: DynamicFieldType;
+    dragAction?: 'startAdornment' | 'own';
 } & Record<string, unknown>;
 /** Handed to an `itemField` function so custom rows can own their remove action. */
 interface ArrayRowApi {
@@ -181,7 +191,10 @@ interface ArrayRowApi {
 }
 /** 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 a row. A plain value becomes `{ value }` (falling back to `defaultItem`, then `''`); an
+     * object with a `value` key is appended as-is, so extra row keys (e.g. a persisted identity) ride along.
+     */
     append: (value?: unknown) => void;
     count: number;
     atMaximum: boolean;
@@ -207,6 +220,12 @@ type ArrayField<TValues extends FieldValues = FieldValues> = Omit<BaseField<TVal
     defaultItem?: unknown;
     /** `'none'` skips injecting the delete `endAdornment` — for rows that render their own actions. */
     removeAction?: 'endAdornment' | 'none';
+    /**
+     * Rows get a drag handle (`startAdornment`, or `dragHandleProps` for `dragAction: 'own'` rows) and
+     * can be dragged to reorder — the array value follows the new order. Rows keep their
+     * react-hook-form identity, so extra row keys move with them.
+     */
+    reorderable?: boolean;
     /** Replaces the default append button — e.g. Add + Import side by side. */
     actions?: (api: ArrayActionsApi) => ReactNode;
 };

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"),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};
+"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"),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:u,getDefault:e=>e.defaultValue??""},likert:{component:o,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)},D=["fieldType","name","ref","label","labelProps","helperText","helpTextProps","content","styleOverrides","strengthIndicator","defaultValue","hidden","visibleWhen","hideError","focusOnReveal","itemField","minItems","maxItems","addLabel","defaultItem","removeAction","reorderable","dragAction","actions","deriveProps"],b=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(b);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/RichTextField/RichTextField.d.ts

@@ -16,6 +16,8 @@ type RichTextFieldProps = Omit<InputFieldBaseProps, 'value' | 'onChange'> & {
     maxHeight?: number;
     value: string;
     options?: RichTextFieldOptions;
+    /** Focus the editor on mount, with the caret at the end of the content. */
+    autoFocus?: boolean;
 };
 declare const RichTextField: FunctionComponent<RichTextFieldProps>;
 

package/dist/systems/WebCore/RichTextField/RichTextField.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@tiptap/extension-placeholder"),i=require("@tiptap/starter-kit"),n=require("mui-tiptap"),o=require("react"),l=require("./StyledRichTextEditor.js");module.exports=({onChange:u,value:s,internalChange:a,minWidth:d=100,minHeight:c=100,maxHeight:h,placeholder:x,options:m={}})=>{const p=o.useRef(null);t.useTheme();const{bold:g=!0,italic:j=!0,underline:q=!0,bulletList:B=!1,orderedList:L=!1}=m;return e.jsx(l,{sx:{"& .ProseMirror":{overflowY:"auto",minHeight:c,minWidth:d,maxHeight:h}},ref:p,onUpdate:({editor:e})=>{u&&u(e.getHTML()),a&&a()},enableInputRules:!1,extensions:[i.StarterKit.configure({strike:!1,code:!1,heading:!1,blockquote:!1,horizontalRule:!1,codeBlock:!1,bold:!!g&&{},italic:!!j&&{},listItem:!(!B&&!L)&&{},bulletList:!!B&&{},orderedList:!!L&&{}}),r.Placeholder.configure({placeholder:x})],content:s,renderControls:()=>e.jsxs(t.Stack,{direction:"row",children:[g&&e.jsx(n.MenuButtonBold,{}),j&&e.jsx(n.MenuButtonItalic,{}),q&&e.jsx(n.MenuButtonUnderline,{}),B&&e.jsx(n.MenuButtonBulletedList,{}),L&&e.jsx(n.MenuButtonOrderedList,{})]})})};
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@tiptap/extension-placeholder"),i=require("@tiptap/starter-kit"),o=require("mui-tiptap"),n=require("react"),u=require("./StyledRichTextEditor.js");module.exports=({onChange:l,value:s,internalChange:a,minWidth:d=100,minHeight:c=100,maxHeight:h,placeholder:x,options:m={},autoFocus:p=!1})=>{const g=n.useRef(null);t.useTheme();const{bold:j=!0,italic:q=!0,underline:B=!0,bulletList:L=!1,orderedList:M=!1}=m;return e.jsx(u,{sx:{"& .ProseMirror":{overflowY:"auto",minHeight:c,minWidth:d,maxHeight:h}},ref:g,autofocus:!!p&&"end",onUpdate:({editor:e})=>{l&&l(e.getHTML()),a&&a()},enableInputRules:!1,extensions:[i.StarterKit.configure({strike:!1,code:!1,heading:!1,blockquote:!1,horizontalRule:!1,codeBlock:!1,bold:!!j&&{},italic:!!q&&{},listItem:!(!L&&!M)&&{},bulletList:!!L&&{},orderedList:!!M&&{}}),r.Placeholder.configure({placeholder:x})],content:s,renderControls:()=>e.jsxs(t.Stack,{direction:"row",children:[j&&e.jsx(o.MenuButtonBold,{}),q&&e.jsx(o.MenuButtonItalic,{}),B&&e.jsx(o.MenuButtonUnderline,{}),L&&e.jsx(o.MenuButtonBulletedList,{}),M&&e.jsx(o.MenuButtonOrderedList,{})]})})};

package/dist/systems/WebCore/TextField/TextField.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),n=require("@mui/material"),t=require("../../BrandCore/primitiveVariables.js"),r=require("../InputFieldBase/InputFieldBase.js");module.exports=({startAdornment:i,endAdornment:s,placeholder:a,onChange:l,internalChange:d,inputRef:o,...p})=>e.jsx(r,{placeholder:a,sx:{height:t.space[500],"& .MuiOutlinedInput-input":{pl:i?1:2,pr:i?1:2}},inputRef:o,slotProps:{input:{startAdornment:i?e.jsx(n.InputAdornment,{position:"start",disablePointerEvents:p.disabled,sx:{pl:1},children:i}):null,endAdornment:s?e.jsx(n.InputAdornment,{position:"start",disablePointerEvents:p.disabled,sx:{pr:1},children:s}):null}},...p,onChange:e=>{l&&l(e),d&&d()}});
+"use strict";var e=require("react/jsx-runtime"),n=require("@mui/material"),t=require("../../BrandCore/primitiveVariables.js"),r=require("../InputFieldBase/InputFieldBase.js");module.exports=({startAdornment:i,endAdornment:s,placeholder:l,onChange:a,internalChange:d,inputRef:o,slotProps:p,...u})=>e.jsx(r,{placeholder:l,sx:{height:t.space[500],"& .MuiOutlinedInput-input":{pl:i?1:2,pr:i?1:2}},inputRef:o,slotProps:{...p,input:{startAdornment:i?e.jsx(n.InputAdornment,{position:"start",disablePointerEvents:u.disabled,sx:{pl:1},children:i}):null,endAdornment:s?e.jsx(n.InputAdornment,{position:"start",disablePointerEvents:u.disabled,sx:{pr:1},children:s}):null,...p?.input??{}}},...u,onChange:e=>{a&&a(e),d&&d()}});

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" | "lg" | "md" | "xl";
+    breakpoint: "" | "sm" | "md" | "lg" | "xl";
     custom: CustomTheme;
     gridOverlayVisible: boolean;
     mode: PaletteMode;

package/package.json

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