@useloops/design-system 1.4.725 → 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/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","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/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/fieldRegistry.d.ts

@@ -172,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 {
@@ -186,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;
@@ -212,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"),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","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/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.725",
+    "version": "1.4.726",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",