@verifiedinc-public/shared-ui-elements 12.13.0 → 12.15.0

package/dist/components/NetworkRules/editor/fields/ConditionRow.mjs

@@ -1 +1 @@
-"use strict";import{Stack as b,TextField as k,MenuItem as S,IconButton as P}from"@mui/material";import{Delete as j}from"@mui/icons-material";import{useFormContext as q,useController as h,useWatch as K}from"react-hook-form";import{getKeyDef as $,isOperatorMulti as D,getPresets as M,getOperatorLabel as O}from"../../utils/catalog.mjs";import{ConditionValuesInput as L}from"./ConditionValuesInput.mjs";import{jsxs as z,jsx as r}from"react/jsx-runtime";function A({index:t,catalog:a,onRemove:R,addedPresets:v,onCreatePreset:p,canRemove:w=!0,disabled:d=!1,autoFocus:V}){var g,x,y;const{control:s,setValue:u,formState:B}=q(),i=h({control:s,name:`conditions.${t}.key`}),l=h({control:s,name:`conditions.${t}.operator`}),m=h({control:s,name:`conditions.${t}.values`}),c=K({control:s,name:`conditions.${t}.values`})??[],o=$(a,i.field.value),I=o?.operators??[],T=D(a,l.field.value),f=B.isSubmitted,W=o?[...M(a,o.key),...v?.[o.key]??[]]:[],F=e=>{var n;i.field.onChange(e);const C=((n=$(a,e))==null?void 0:n.operators)??[];u(`conditions.${t}.operator`,C.length===1?C[0]:"",{shouldDirty:!0,shouldValidate:f}),u(`conditions.${t}.values`,[],{shouldDirty:!0,shouldValidate:f})};return z(b,{direction:{xs:"column",md:"row"},spacing:1.5,alignItems:"flex-start",children:[r(k,{select:!0,required:!0,label:"Key",value:i.field.value,onChange:e=>{F(e.target.value)},onBlur:i.field.onBlur,inputRef:i.field.ref,disabled:d,autoFocus:V,error:i.fieldState.error!==void 0,helperText:(g=i.fieldState.error)==null?void 0:g.message,sx:{minWidth:{md:200},width:{xs:"100%",md:"auto"}},children:a.keys.map(e=>r(S,{value:e.key,children:e.label},e.key))}),r(k,{select:!0,required:!0,label:"Operator",value:l.field.value,onChange:e=>{const n=e.target.value;l.field.onChange(n),!D(a,n)&&c.length>1&&u(`conditions.${t}.values`,c.slice(0,1),{shouldDirty:!0,shouldValidate:f})},onBlur:l.field.onBlur,inputRef:l.field.ref,disabled:d||o===void 0,error:l.fieldState.error!==void 0,helperText:(x=l.fieldState.error)==null?void 0:x.message,sx:{minWidth:{md:180},width:{xs:"100%",md:"auto"}},children:I.map(e=>r(S,{value:e,children:O(a,e)},e))}),r(b,{flex:1,width:"100%",minWidth:0,children:r(L,{keyDef:o,multi:T,values:c,onChange:e=>{m.field.onChange(e)},presets:W,onCreatePreset:p&&o?e=>{p(o.key,e)}:void 0,disabled:d||l.field.value==="",error:m.fieldState.error!==void 0,helperText:(y=m.fieldState.error)==null?void 0:y.message})}),r(P,{"aria-label":`Remove condition ${t+1}`,color:"error",onClick:R,disabled:d||!w,sx:{mt:{md:1}},children:r(j,{})})]})}export{A as ConditionRow};
+"use strict";import{Stack as b,Typography as j,TextField as k,MenuItem as S,IconButton as O}from"@mui/material";import{Delete as P}from"@mui/icons-material";import{useFormContext as q,useController as h,useWatch as K}from"react-hook-form";import{getKeyDef as $,isOperatorMulti as D,getPresets as M,getOperatorLabel as z}from"../../utils/catalog.mjs";import{ConditionValuesInput as A}from"./ConditionValuesInput.mjs";import{jsxs as H,jsx as l}from"react/jsx-runtime";function L({index:o,catalog:r,onRemove:R,addedPresets:v,onCreatePreset:p,canRemove:w=!0,disabled:d=!1,autoFocus:B}){var g,x,y;const{control:s,setValue:u,formState:I}=q(),a=h({control:s,name:`conditions.${o}.key`}),i=h({control:s,name:`conditions.${o}.operator`}),m=h({control:s,name:`conditions.${o}.values`}),c=K({control:s,name:`conditions.${o}.values`})??[],t=$(r,a.field.value),T=t?.operators??[],V=D(r,i.field.value),f=I.isSubmitted,W=t?[...M(r,t.key),...v?.[t.key]??[]]:[],F=e=>{var n;a.field.onChange(e);const C=((n=$(r,e))==null?void 0:n.operators)??[];u(`conditions.${o}.operator`,C.length===1?C[0]:"",{shouldDirty:!0,shouldValidate:f}),u(`conditions.${o}.values`,[],{shouldDirty:!0,shouldValidate:f})};return H(b,{direction:{xs:"column",md:"row"},spacing:1.5,alignItems:"flex-start",children:[l(j,{fontSize:20,fontWeight:300,sx:{display:"flex",alignItems:"center",justifyContent:{md:"flex-end"},minHeight:{md:56},minWidth:{md:48},flexShrink:0},children:o===0?"IF":"AND"}),l(k,{select:!0,required:!0,label:"Key",value:a.field.value,onChange:e=>{F(e.target.value)},onBlur:a.field.onBlur,inputRef:a.field.ref,disabled:d,autoFocus:B,error:a.fieldState.error!==void 0,helperText:(g=a.fieldState.error)==null?void 0:g.message,sx:{minWidth:{md:200},width:{xs:"100%",md:"auto"}},children:r.keys.map(e=>l(S,{value:e.key,children:e.label},e.key))}),l(k,{select:!0,required:!0,label:"Operator",value:i.field.value,onChange:e=>{const n=e.target.value;i.field.onChange(n),!D(r,n)&&c.length>1&&u(`conditions.${o}.values`,c.slice(0,1),{shouldDirty:!0,shouldValidate:f})},onBlur:i.field.onBlur,inputRef:i.field.ref,disabled:d||t===void 0,error:i.fieldState.error!==void 0,helperText:(x=i.fieldState.error)==null?void 0:x.message,sx:{minWidth:{md:180},width:{xs:"100%",md:"auto"}},children:T.map(e=>l(S,{value:e,children:z(r,e)},e))}),l(b,{flex:1,width:"100%",minWidth:0,children:l(A,{keyDef:t,multi:V,values:c,onChange:e=>{m.field.onChange(e)},presets:W,onCreatePreset:p&&t?e=>{p(t.key,e)}:void 0,disabled:d||i.field.value==="",error:m.fieldState.error!==void 0,helperText:(y=m.fieldState.error)==null?void 0:y.message})}),l(O,{"aria-label":`Remove condition ${o+1}`,color:"error",onClick:R,disabled:d||!w,sx:{mt:{md:1}},children:l(P,{})})]})}export{L as ConditionRow};

package/dist/components/NetworkRules/editor/fields/ConditionsField.mjs

@@ -1 +1 @@
-"use strict";import{Stack as l,Typography as c,Button as x,Alert as F,FormHelperText as A}from"@mui/material";import{Add as I}from"@mui/icons-material";import{useFormContext as b,useFieldArray as j}from"react-hook-form";import{emptyConditionFormValues as w}from"../../utils/condition.mjs";import{ConditionRow as P}from"./ConditionRow.mjs";import{jsxs as m,jsx as e}from"react/jsx-runtime";function R({catalog:p,addedPresets:u,onCreatePreset:f,disabled:n,focusIndex:h}){var t,i,r;const{control:v,formState:s}=b(),{fields:a,append:g,remove:y}=j({control:v,name:"conditions"}),d=((i=(t=s.errors.conditions)==null?void 0:t.root)==null?void 0:i.message)??((r=s.errors.conditions)==null?void 0:r.message);return m(l,{spacing:2,children:[m(l,{direction:"row",justifyContent:"space-between",alignItems:"center",children:[e(c,{fontWeight:700,children:"Conditions"}),e(x,{startIcon:e(I,{}),disabled:n,onClick:()=>{g(w())},children:"Add Condition"})]}),e(F,{severity:"info",children:"If multiple values are selected for a given condition, that condition applies if any one of the values matches. (It's an inclusive OR.)"}),a.length===0&&e(c,{variant:"body2",color:"text.secondary",children:"No conditions yet. A rule needs at least one; all conditions must match."}),a.map((C,o)=>e(P,{index:o,catalog:p,addedPresets:u,onCreatePreset:f,disabled:n,autoFocus:o===h,onRemove:()=>{y(o)}},C.id)),d&&e(A,{error:!0,children:d})]})}export{R as ConditionsField};
+"use strict";import{Stack as l,Typography as c,Button as v,FormHelperText as F}from"@mui/material";import{Add as b}from"@mui/icons-material";import{useFormContext as A,useFieldArray as j}from"react-hook-form";import{emptyConditionFormValues as w}from"../../utils/condition.mjs";import{ConditionRow as I}from"./ConditionRow.mjs";import{jsxs as m,jsx as o}from"react/jsx-runtime";function P({catalog:p,addedPresets:u,onCreatePreset:f,disabled:n,focusIndex:C}){var t,r,s;const{control:g,formState:i}=A(),{fields:a,append:h,remove:x}=j({control:g,name:"conditions"}),d=((r=(t=i.errors.conditions)==null?void 0:t.root)==null?void 0:r.message)??((s=i.errors.conditions)==null?void 0:s.message);return m(l,{spacing:2,children:[m(l,{direction:"row",justifyContent:"space-between",alignItems:"center",children:[o(c,{fontWeight:700,children:"Conditions"}),o(v,{startIcon:o(b,{}),disabled:n,onClick:()=>{h(w())},children:"Add Condition"})]}),a.length===0&&o(c,{variant:"body2",color:"text.secondary",children:"No conditions yet. A rule needs at least one; all conditions must match."}),a.map((y,e)=>o(I,{index:e,catalog:p,addedPresets:u,onCreatePreset:f,disabled:n,autoFocus:e===C,onRemove:()=>{x(e)}},y.id)),d&&o(F,{error:!0,children:d})]})}export{P as ConditionsField};

package/dist/components/NetworkRules/editor/fields/values/InlineValuesInput.mjs

@@ -1 +1 @@
-"use strict";import{Autocomplete as h,TextField as x,Checkbox as v}from"@mui/material";import{OptionLabel as O}from"../../../shared/OptionLabel.mjs";import{toOptions as f}from"../../../utils/catalog.mjs";import{jsx as t,jsxs as g}from"react/jsx-runtime";function T({options:s,values:i,onChange:n,multi:a,label:p,error:u,helperText:c,disabled:d}){const m=f(i,s);return t(h,{multiple:!0,options:s,value:m,disabled:d,limitTags:4,disableCloseOnSelect:a,getOptionLabel:e=>e.label,isOptionEqualToValue:(e,l)=>e.value===l.value,onChange:(e,l)=>{const o=l.map(r=>r.value);n(a?o:o.slice(-1))},renderOption:(e,l,{selected:o})=>{const{key:r,...b}=e;return g("li",{...b,children:[a&&t(v,{checked:o,sx:{mr:1}}),t(O,{option:l})]},r)},renderInput:e=>t(x,{...e,label:p,placeholder:i.length===0?"Select\u2026":void 0,error:u,helperText:c})})}export{T as InlineValuesInput};
+"use strict";import{Fragment as f}from"react";import{Autocomplete as g,TextField as O,Chip as v,Checkbox as T}from"@mui/material";import{OptionLabel as C}from"../../../shared/OptionLabel.mjs";import{toOptions as k}from"../../../utils/catalog.mjs";import{OrSeparator as I}from"./OrSeparator.mjs";import{jsx as a,jsxs as p}from"react/jsx-runtime";function S({options:n,values:i,onChange:m,multi:t,label:u,error:c,helperText:d,disabled:b}){const h=k(i,n);return a(g,{multiple:!0,options:n,value:h,disabled:b,limitTags:4,disableCloseOnSelect:t,getOptionLabel:e=>e.label,isOptionEqualToValue:(e,l)=>e.value===l.value,onChange:(e,l)=>{const o=l.map(r=>r.value);m(t?o:o.slice(-1))},renderOption:(e,l,{selected:o})=>{const{key:r,...s}=e;return p("li",{...s,children:[t&&a(T,{checked:o,sx:{mr:1}}),a(C,{option:l})]},r)},renderTags:(e,l)=>e.map((o,r)=>{const{key:s,...x}=l({index:r});return p(f,{children:[r>0&&a(I,{}),a(v,{...x,label:o.label})]},s)}),renderInput:e=>a(O,{...e,label:u,placeholder:i.length===0?"Select\u2026":void 0,error:c,helperText:d})})}export{S as InlineValuesInput};

package/dist/components/NetworkRules/editor/fields/values/OrSeparator.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Sits between the chips of a multi-value condition so the inclusive OR between
+ * them is spelled out rather than implied.
+ */
+export declare function OrSeparator(): import("react").JSX.Element;

package/dist/components/NetworkRules/editor/fields/values/OrSeparator.mjs

@@ -0,0 +1 @@
+"use strict";import{Typography as r}from"@mui/material";import{jsx as o}from"react/jsx-runtime";function a(){return o(r,{component:"span",variant:"body2",color:"text.primary",sx:{alignSelf:"center",mx:.5},children:"OR"})}export{a as OrSeparator};

package/dist/components/NetworkRules/editor/fields/values/RemoteValuesInput.mjs

@@ -1 +1 @@
-"use strict";import{useState as d}from"react";import{Button as w,TextField as C,Autocomplete as R,Checkbox as U,Box as z,CircularProgress as M}from"@mui/material";import{LogoAvatar as N}from"../../../../UI/LogoAvatar.mjs";import{LogoChip as P}from"../../../../UI/LogoChip.mjs";import{useNetworkRuleSourceSearch as V}from"../../../hooks/useNetworkRuleSourceSearch.mjs";import{useResolvedConditionOptions as A}from"../../../hooks/useResolvedConditionOptions.mjs";import{OptionLabel as H}from"../../../shared/OptionLabel.mjs";import{jsx as l,jsxs as B}from"react/jsx-runtime";const E=50;function q({keyDef:n,values:p,onChange:O,multi:c,label:m,error:k,helperText:y,disabled:L}){const[u,h]=d(""),[g,f]=d(!1),[S,I]=d([]),t=V(n.values.source,u,{enabled:g}),b=A(n,p,{known:S}),v=t.service,x=t.isLoading||t.isLoadingMore,j=o=>{const e=o.currentTarget;e.scrollTop+e.clientHeight>=e.scrollHeight-E&&t.loadMore()};let T=u.trim()?"No matches":"Type to search";return t.error&&(T=l(w,{size:"small",onClick:t.retry,children:"Search failed. Retry"})),t.isSupported?l(R,{multiple:!0,open:g,onOpen:()=>{f(!0)},onClose:()=>{f(!1)},options:t.options,value:b.options,loading:x||b.isLoading,ListboxProps:{onScroll:j},popupIcon:x?l(z,{sx:{width:24,height:24,display:"flex",alignItems:"center",justifyContent:"center"},children:l(M,{color:"inherit",size:18})}):void 0,disabled:L,limitTags:4,disableCloseOnSelect:c,filterOptions:o=>o,inputValue:u,onInputChange:(o,e,r)=>{r!=="reset"&&h(e)},getOptionLabel:o=>o.label,isOptionEqualToValue:(o,e)=>o.value===e.value,onChange:(o,e)=>{I(s=>{const i=new Map(s.map(a=>[a.value,a]));for(const a of e)i.set(a.value,a);return[...i.values()]});const r=e.map(s=>s.value);O(c?r:r.slice(-1)),h("")},noOptionsText:T,renderOption:(o,e,{selected:r})=>{const{key:s,...i}=o;return B("li",{...i,children:[c&&l(U,{checked:r,sx:{mr:1}}),l(N,{name:e.label,logoUrl:e.logoUrl,size:28,sx:{mr:1}}),l(H,{option:e})]},s)},renderTags:(o,e)=>o.map((r,s)=>{const{key:i,...a}=e({index:s});return l(P,{...a,label:r.label,name:r.label,logoUrl:r.logoUrl},i)}),renderInput:o=>l(C,{...o,label:m,placeholder:p.length===0?v?.searchPlaceholder??"Type to search\u2026":void 0,error:k,helperText:y})}):l(C,{fullWidth:!0,disabled:!0,label:m,value:p.join(", "),error:!0,helperText:`No data source is registered for "${n.values.source}"`})}export{q as RemoteValuesInput};
+"use strict";import{useState as d,Fragment as R}from"react";import{Button as U,TextField as C,Autocomplete as z,Checkbox as M,Box as N,CircularProgress as P}from"@mui/material";import{LogoAvatar as V}from"../../../../UI/LogoAvatar.mjs";import{LogoChip as A}from"../../../../UI/LogoChip.mjs";import{useNetworkRuleSourceSearch as B}from"../../../hooks/useNetworkRuleSourceSearch.mjs";import{useResolvedConditionOptions as F}from"../../../hooks/useResolvedConditionOptions.mjs";import{OptionLabel as H}from"../../../shared/OptionLabel.mjs";import{OrSeparator as E}from"./OrSeparator.mjs";import{jsx as r,jsxs as O}from"react/jsx-runtime";const q=50;function D({keyDef:n,values:p,onChange:k,multi:c,label:m,error:y,helperText:L,disabled:S}){const[u,h]=d(""),[g,f]=d(!1),[j,w]=d([]),t=B(n.values.source,u,{enabled:g}),b=F(n,p,{known:j}),v=t.service,x=t.isLoading||t.isLoadingMore,I=o=>{const e=o.currentTarget;e.scrollTop+e.clientHeight>=e.scrollHeight-q&&t.loadMore()};let T=u.trim()?"No matches":"Type to search";return t.error&&(T=r(U,{size:"small",onClick:t.retry,children:"Search failed. Retry"})),t.isSupported?r(z,{multiple:!0,open:g,onOpen:()=>{f(!0)},onClose:()=>{f(!1)},options:t.options,value:b.options,loading:x||b.isLoading,ListboxProps:{onScroll:I},popupIcon:x?r(N,{sx:{width:24,height:24,display:"flex",alignItems:"center",justifyContent:"center"},children:r(P,{color:"inherit",size:18})}):void 0,disabled:S,limitTags:4,disableCloseOnSelect:c,filterOptions:o=>o,inputValue:u,onInputChange:(o,e,l)=>{l!=="reset"&&h(e)},getOptionLabel:o=>o.label,isOptionEqualToValue:(o,e)=>o.value===e.value,onChange:(o,e)=>{w(s=>{const i=new Map(s.map(a=>[a.value,a]));for(const a of e)i.set(a.value,a);return[...i.values()]});const l=e.map(s=>s.value);k(c?l:l.slice(-1)),h("")},noOptionsText:T,renderOption:(o,e,{selected:l})=>{const{key:s,...i}=o;return O("li",{...i,children:[c&&r(M,{checked:l,sx:{mr:1}}),r(V,{name:e.label,logoUrl:e.logoUrl,size:28,sx:{mr:1}}),r(H,{option:e})]},s)},renderTags:(o,e)=>o.map((l,s)=>{const{key:i,...a}=e({index:s});return O(R,{children:[s>0&&r(E,{}),r(A,{...a,label:l.label,name:l.label,logoUrl:l.logoUrl})]},i)}),renderInput:o=>r(C,{...o,label:m,placeholder:p.length===0?v?.searchPlaceholder??"Type to search\u2026":void 0,error:y,helperText:L})}):r(C,{fullWidth:!0,disabled:!0,label:m,value:p.join(", "),error:!0,helperText:`No data source is registered for "${n.values.source}"`})}export{D as RemoteValuesInput};

package/dist/components/NetworkRules/editor/fields/values/TextValuesInput.mjs

@@ -1 +1 @@
-"use strict";import{useState as x}from"react";import{Autocomplete as T,TextField as b}from"@mui/material";import{dedupeValues as y}from"../../../utils/condition.mjs";import{presetOptionLabel as O,filterPresetOptions as V}from"../presetOptions.mjs";import{jsx as p}from"react/jsx-runtime";function C({values:o,onChange:u,multi:m,label:d,presets:f=[],onCreatePreset:l,error:g,helperText:h,disabled:c,placeholder:v="Type a value and press Enter"}){const[n,a]=x(""),i=t=>{const e=y(t);u(m?e:e.slice(-1))};return p(T,{multiple:!0,freeSolo:!0,autoHighlight:!0,options:f,value:o,inputValue:n,disabled:c,limitTags:4,getOptionLabel:O,filterOptions:(t,e)=>V(t,e,l!==void 0),onInputChange:(t,e)=>{a(e)},onChange:(t,e)=>{const s=e.find(r=>typeof r!="string");s!==void 0&&typeof s!="string"&&l?.(s.inputValue),i(e.map(r=>typeof r=="string"?r:r.inputValue)),a("")},onBlur:()=>{n.trim()&&(i([...o,n]),a(""))},renderInput:t=>p(b,{...t,label:d,placeholder:o.length===0?v:void 0,error:g,helperText:h})})}export{C as TextValuesInput};
+"use strict";import{useState as y,Fragment as O}from"react";import{Autocomplete as C,TextField as V,Chip as I}from"@mui/material";import{dedupeValues as S}from"../../../utils/condition.mjs";import{presetOptionLabel as u,filterPresetOptions as j}from"../presetOptions.mjs";import{OrSeparator as F}from"./OrSeparator.mjs";import{jsx as a,jsxs as L}from"react/jsx-runtime";function P({values:l,onChange:m,multi:d,label:f,presets:g=[],onCreatePreset:s,error:h,helperText:c,disabled:x,placeholder:b="Type a value and press Enter"}){const[n,p]=y(""),i=t=>{const e=S(t);m(d?e:e.slice(-1))};return a(C,{multiple:!0,freeSolo:!0,autoHighlight:!0,options:g,value:l,inputValue:n,disabled:x,limitTags:4,getOptionLabel:u,filterOptions:(t,e)=>j(t,e,s!==void 0),onInputChange:(t,e)=>{p(e)},onChange:(t,e)=>{const o=e.find(r=>typeof r!="string");o!==void 0&&typeof o!="string"&&s?.(o.inputValue),i(e.map(r=>typeof r=="string"?r:r.inputValue)),p("")},onBlur:()=>{n.trim()&&(i([...l,n]),p(""))},renderTags:(t,e)=>t.map((o,r)=>{const{key:T,...v}=e({index:r});return L(O,{children:[r>0&&a(F,{}),a(I,{...v,label:u(o)})]},T)}),renderInput:t=>a(V,{...t,label:f,placeholder:l.length===0?b:void 0,error:h,helperText:c})})}export{P as TextValuesInput};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "12.13.0",
+  "version": "12.15.0",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "sideEffects": false,