@webority/ui-react 0.83.1 → 0.83.2

package/dist/components/AppFilterBar.js

@@ -1 +1 @@
-import{devWarn as e}from"../lib/devWarn.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import i from"./AppButton.js";import a from"./AppSegmented.js";import o from"./AppChip.js";import s from"./AppDateRangePicker.js";import{emptyFacetValue as c,isFacetActive as l}from"../lib/listQuery.js";import u from"./AppMultiSelect.js";import d from"./AppSearch.js";import f from"./AppSelect.js";import p from"./AppSwitch.js";import{useEffect as m,useId as h,useRef as g,useSyncExternalStore as _}from"react";import{jsx as v,jsxs as y}from"react/jsx-runtime";import"@webority/ui-elements/elements/filter-popover";var b=`(max-width: 575.98px)`,x=3,S=2,C=e=>{let t=window.matchMedia?.(b);return t?.addEventListener(`change`,e),()=>t?.removeEventListener(`change`,e)},w=()=>window.matchMedia?.(b).matches??!1,T=[`enum`,`multiEnum`,`dateRange`,`text`],E=4,D=e=>(e.type===`enum`||e.type===`multiEnum`)&&!e.options?.length,O=(e,t)=>e.options?.find(e=>e.value===t)?.label??t;function k(e,t){if(!l(e,t))return[];if(e.type===`enum`)return[{id:e.key,text:O(e,t),clear:()=>c(e)}];if(e.type===`multiEnum`)return t.map(n=>({id:`${e.key}:${n}`,text:O(e,n),clear:()=>t.filter(e=>e!==n)}));if(e.type===`dateRange`){let n=t.from&&t.to?`${t.from} to ${t.to}`:t.from?`From ${t.from}`:`Until ${t.to}`;return[{id:e.key,text:n,clear:()=>c(e)}]}return[]}var A=new Set;function j(t){let n=!0;try{n=process.env.NODE_ENV!==`production`}catch{n=!0}!n||A.has(t)||(A.add(t),e(`[@webority/ui-react] <AppFilterBar> facet "${t}" sets allLabel, which only an enum facet uses.`))}var M=new Set;function N(t){let n=!0;try{n=process.env.NODE_ENV!==`production`}catch{n=!0}!n||M.has(t)||(M.add(t),e(`[@webority/ui-react] <AppFilterBar> facet "${t}" sets presets, which only a dateRange facet uses.`))}function P({facets:e,value:a,onChange:s,inline:u=x,floating:d=!1,className:f=``,...b}){n(`AppFilterBar`,b);let E=_(C,w,()=>!1),O=g(null),A=h();for(let n of e)t(`AppFilterBar`,`facets[].type`,n.type,T);for(let t of e)t.allLabel!=null&&t.type!==`enum`&&j(t.key),t.presets!=null&&t.type!==`dateRange`&&N(t.key);let M=e.filter(e=>!D(e)),P=M.flatMap(e=>k(e,a[e.key]).map(t=>({...t,facet:e}))),I=M.filter(e=>l(e,a[e.key])),L=d||E?0:Math.max(0,u),R=M.slice(L),z=R.filter(e=>I.includes(e)).length,B=!d&&R.length>0;m(()=>{if(!B)return;let e=e=>{let t=O.current;t?.open&&(e.type===`keydown`?e.key===`Escape`:!e.composedPath().includes(t))&&(t.open=!1)};return document.addEventListener(`click`,e),document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`click`,e),document.removeEventListener(`keydown`,e)}},[B]);let V=e=>v(F,{facet:e,value:a[e.key],onChange:t=>s(e.key,t)},e.key),H=e=>y(`div`,{className:`wui-filter-popover-field`,children:[v(`span`,{className:`label`,"aria-hidden":`true`,children:e.label}),v(F,{facet:e,value:a[e.key],onChange:t=>s(e.key,t),floating:!0})]},e.key),U=(e,t)=>t>0&&v(`span`,{className:e,children:` (${t})`}),W=e=>v(o,{size:`sm`,label:`${e.facet.label}: ${e.text}`,removeLabel:`Remove ${e.facet.label} filter ${e.text}`,onRemove:()=>s(e.facet.key,e.clear()),className:!d&&M.indexOf(e.facet)<L?`wui-filter-chip-inline`:void 0},e.id),G=v(i,{variant:`ghost`,size:`sm`,onClick:()=>{for(let e of I)s(e.key,c(e))},children:`Clear all`});if(d){let e=P.slice(S),t=I.length;return y(`div`,{className:`wui-filter-bar d-flex flex-wrap align-items-center gap-2${f?` ${f}`:``}`,...b,children:[y(`wui-filter-popover`,{class:`wui-filter-popover`,children:[y(`button`,{type:`button`,className:`btn ${t>0?`btn-outline-primary`:`btn-ghost`} btn-sm wui-filter-popover-trigger`,"aria-expanded":`false`,"aria-controls":A,"aria-label":t>0?`Filters, ${t} active`:void 0,children:[v(r,{name:`filter`,size:14,className:`me-2`}),`Filters`,t>0&&v(`span`,{className:`badge rounded-pill text-bg-primary ms-1`,children:t})]}),y(`div`,{id:A,className:`wui-filter-popover-panel`,role:`dialog`,"aria-label":`Filters`,hidden:!0,children:[y(`div`,{className:`wui-filter-popover-head`,children:[v(`span`,{className:`wui-filter-popover-title`,children:`Filters`}),v(p,{label:`Keep open`,id:`${A}-pin`})]}),v(`div`,{className:`wui-filter-popover-grid`,children:M.map(H)}),y(`div`,{className:`wui-filter-popover-foot`,children:[v(`span`,{className:`wui-filter-popover-note`,children:`Changes apply at once.`}),t>0&&G]})]})]}),P.slice(0,S).map(W),e.length>0&&y(`span`,{className:`chip chip-sm wui-filter-popover-more`,title:e.map(e=>`${e.facet.label}: ${e.text}`).join(`, `),children:[`+`,e.length]})]})}return y(`div`,{className:`wui-filter-bar d-flex flex-wrap align-items-center gap-2${E&&B?` wui-filter-bar--folded`:``}${f?` ${f}`:``}`,...b,children:[M.slice(0,L).map(V),B&&y(`details`,{ref:O,className:`wui-filter-more`,children:[y(`summary`,{className:`btn btn-outline-primary btn-sm wui-filter-more-trigger`,children:[v(r,{name:`filter`,size:14,className:`me-2`}),`Filters`,U(`wui-filter-count-desktop`,z),U(`wui-filter-count-phone`,I.length)]}),y(`div`,{className:`wui-filter-more-panel`,children:[v(`div`,{className:`wui-filter-more-head`,children:`Filters`}),R.map(H)]})]}),P.map(W),I.length>0&&G]})}function F({facet:e,value:t,onChange:n,floating:r=!1}){if(e.type===`enum`){let i=e.options??[];return i.length<E?v(a,{label:e.label,name:e.key,size:`sm`,value:t??``,onChange:n,options:[{value:``,label:e.allLabel||`All`},...i]}):v(f,{"aria-label":e.label,name:e.key,placeholder:r?`Any`:e.label,size:`sm`,clearable:!0,value:t??``,onChange:n,options:i})}return e.type===`multiEnum`?v(u,{"aria-label":e.label,name:e.key,placeholder:r?`Any`:e.label,size:`sm`,collapseChips:!0,values:t??[],onChange:n,options:e.options??[]}):e.type===`dateRange`?v(s,{ariaLabel:e.label,startName:`${e.key}From`,endName:`${e.key}To`,placeholder:r?`Any`:e.label,size:`sm`,presets:e.presets,start:t?.from??``,end:t?.to??``,onChange:e=>n({from:e.start??``,to:e.end??``})}):v(d,{ariaLabel:e.label,name:e.key,placeholder:e.label,size:`sm`,value:t??``,onChange:n})}export{P as default};
+import{devWarn as e}from"../lib/devWarn.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import i from"./AppButton.js";import a from"./AppSegmented.js";import ee from"./AppChip.js";import o from"./AppDateRangePicker.js";import{emptyFacetValue as s,isFacetActive as c}from"../lib/listQuery.js";import l from"./AppMultiSelect.js";import u from"./AppSearch.js";import d from"./AppSelect.js";import f from"./AppSwitch.js";import{Fragment as te,useEffect as p,useId as m,useRef as h,useState as ne,useSyncExternalStore as re}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import"@webority/ui-elements/elements/filter-popover";var y=`(max-width: 575.98px)`,b=3,x=2,ie=e=>{let t=window.matchMedia?.(y);return t?.addEventListener(`change`,e),()=>t?.removeEventListener(`change`,e)},ae=()=>window.matchMedia?.(y).matches??!1,S=[`enum`,`multiEnum`,`dateRange`,`text`],C=4,w=e=>(e.type===`enum`||e.type===`multiEnum`)&&!e.options?.length,T=(e,t)=>e.options?.find(e=>e.value===t)?.label??t,oe=(e,t)=>JSON.stringify(e)===JSON.stringify(t);function se(e,t){if(!c(e,t))return[];if(e.type===`enum`)return[{id:e.key,text:T(e,t),clear:()=>s(e)}];if(e.type===`multiEnum`)return t.map(n=>({id:`${e.key}:${n}`,text:T(e,n),clear:()=>t.filter(e=>e!==n)}));if(e.type===`dateRange`){let n=t.from&&t.to?`${t.from} to ${t.to}`:t.from?`From ${t.from}`:`Until ${t.to}`;return[{id:e.key,text:n,clear:()=>s(e)}]}return[]}var E=new Set;function D(t){let n=!0;try{n=process.env.NODE_ENV!==`production`}catch{n=!0}!n||E.has(t)||(E.add(t),e(`[@webority/ui-react] <AppFilterBar> facet "${t}" sets allLabel, which only an enum facet uses.`))}var O=new Set;function k(t){let n=!0;try{n=process.env.NODE_ENV!==`production`}catch{n=!0}!n||O.has(t)||(O.add(t),e(`[@webority/ui-react] <AppFilterBar> facet "${t}" sets presets, which only a dateRange facet uses.`))}function A({facets:e,value:a,onChange:o,inline:l=b,floating:u=!1,apply:d=!1,className:y=``,...C}){n(`AppFilterBar`,C);let T=re(ie,ae,()=>!1),E=h(null),O=m(),[A,M]=ne({}),N=h(a);for(let n of e)t(`AppFilterBar`,`facets[].type`,n.type,S);for(let t of e)t.allLabel!=null&&t.type!==`enum`&&D(t.key),t.presets!=null&&t.type!==`dateRange`&&k(t.key);let P=e.filter(e=>!w(e)),F=P.flatMap(e=>se(e,a[e.key]).map(t=>({...t,facet:e}))),I=P.filter(e=>c(e,a[e.key])),L=u||T?0:Math.max(0,l),R=P.slice(L),z=R.filter(e=>I.includes(e)).length,B=!u&&R.length>0;p(()=>{if(!B)return;let e=e=>{let t=E.current;t?.open&&(e.type===`keydown`?e.key===`Escape`:!e.composedPath().includes(t))&&(t.open=!1)};return document.addEventListener(`click`,e),document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`click`,e),document.removeEventListener(`keydown`,e)}},[B]),p(()=>{let e=N.current;N.current=a,M(t=>{let n=Object.entries(t).filter(([t])=>oe(e[t],a[t]));return n.length===Object.keys(t).length?t:Object.fromEntries(n)})},[a]);let V=e=>d&&!u&&(e.type===`text`||e.type===`dateRange`),H=e=>V(e)&&Object.hasOwn(A,e.key)?A[e.key]:a[e.key],U=e=>t=>V(e)?M(n=>({...n,[e.key]:t})):o(e.key,t),W=()=>{for(let[e,t]of Object.entries(A))o(e,t);M({})},G=e=>{e.key===`Enter`&&W()},ce=e=>{e.preventDefault(),W()},K=(e,t)=>e.type===`text`&&V(e)?_(`span`,{onKeyDownCapture:G,children:t}):t,le=e=>_(te,{children:K(e,_(j,{facet:e,value:H(e),onChange:U(e)}))},e.key),q=e=>v(`div`,{className:`wui-filter-popover-field`,children:[_(`span`,{className:`label`,"aria-hidden":`true`,children:e.label}),K(e,_(j,{facet:e,value:H(e),onChange:U(e),floating:!0}))]},e.key),J=(e,t)=>t>0&&_(`span`,{className:e,children:` (${t})`}),Y=e=>_(ee,{size:`sm`,label:`${e.facet.label}: ${e.text}`,removeLabel:`Remove ${e.facet.label} filter ${e.text}`,onRemove:()=>o(e.facet.key,e.clear()),className:!u&&P.indexOf(e.facet)<L?`wui-filter-chip-inline`:void 0},e.id),X=_(i,{variant:`ghost`,size:`sm`,onClick:()=>{for(let e of I)o(e.key,s(e));M({})},children:`Clear all`});if(u){let e=F.slice(x),t=I.length;return v(`div`,{className:`wui-filter-bar d-flex flex-wrap align-items-center gap-2${y?` ${y}`:``}`,...C,children:[v(`wui-filter-popover`,{class:`wui-filter-popover`,children:[v(`button`,{type:`button`,className:`btn ${t>0?`btn-outline-primary`:`btn-ghost`} btn-sm wui-filter-popover-trigger`,"aria-expanded":`false`,"aria-controls":O,"aria-label":t>0?`Filters, ${t} active`:void 0,children:[_(r,{name:`filter`,size:14,className:`me-2`}),`Filters`,t>0&&_(`span`,{className:`badge rounded-pill text-bg-primary ms-1`,children:t})]}),v(`div`,{id:O,className:`wui-filter-popover-panel`,role:`dialog`,"aria-label":`Filters`,hidden:!0,children:[v(`div`,{className:`wui-filter-popover-head`,children:[_(`span`,{className:`wui-filter-popover-title`,children:`Filters`}),_(f,{label:`Keep open`,id:`${O}-pin`})]}),_(`div`,{className:`wui-filter-popover-grid`,children:P.map(q)}),v(`div`,{className:`wui-filter-popover-foot`,children:[_(`span`,{className:`wui-filter-popover-note`,children:`Changes apply at once.`}),t>0&&X]})]})]}),F.slice(0,x).map(Y),e.length>0&&v(`span`,{className:`chip chip-sm wui-filter-popover-more`,title:e.map(e=>`${e.facet.label}: ${e.text}`).join(`, `),children:[`+`,e.length]})]})}let Z=`wui-filter-bar d-flex flex-wrap align-items-center gap-2${T&&B?` wui-filter-bar--folded`:``}`,Q=e=>`${e}${y?` ${y}`:``}`,$=v(g,{children:[P.slice(0,L).map(le),B&&v(`details`,{ref:E,className:`wui-filter-more`,children:[v(`summary`,{className:`btn btn-outline-primary btn-sm wui-filter-more-trigger`,children:[_(r,{name:`filter`,size:14,className:`me-2`}),`Filters`,J(`wui-filter-count-desktop`,z),J(`wui-filter-count-phone`,I.length)]}),v(`div`,{className:`wui-filter-more-panel`,children:[_(`div`,{className:`wui-filter-more-head`,children:`Filters`}),R.map(q)]})]}),F.map(Y),I.length>0&&X]});return!d||!P.some(e=>e.type===`text`||e.type===`dateRange`)?_(`div`,{className:Q(Z),...C,children:$}):v(`div`,{className:Q(`wui-filter-form d-flex flex-wrap align-items-center gap-2`),...C,children:[_(`div`,{className:Z,children:$}),_(i,{type:`submit`,size:`sm`,onClick:ce,children:`Apply`})]})}function j({facet:e,value:t,onChange:n,floating:r=!1}){if(e.type===`enum`){let i=e.options??[];return i.length<C?_(a,{label:e.label,name:e.key,size:`sm`,value:t??``,onChange:n,options:[{value:``,label:e.allLabel||`All`},...i]}):_(d,{"aria-label":e.label,name:e.key,placeholder:r?`Any`:e.label,size:`sm`,clearable:!0,value:t??``,onChange:n,options:i})}return e.type===`multiEnum`?_(l,{"aria-label":e.label,name:e.key,placeholder:r?`Any`:e.label,size:`sm`,collapseChips:!0,values:t??[],onChange:n,options:e.options??[]}):e.type===`dateRange`?_(o,{ariaLabel:e.label,startName:`${e.key}From`,endName:`${e.key}To`,placeholder:r?`Any`:e.label,size:`sm`,presets:e.presets,start:t?.from??``,end:t?.to??``,onChange:e=>n({from:e.start??``,to:e.end??``})}):_(u,{ariaLabel:e.label,name:e.key,placeholder:e.label,size:`sm`,value:t??``,onChange:n})}export{A as default};

package/dist/types/components/AppFilterBar.d.ts

@@ -18,6 +18,8 @@ import "@webority/ui-elements/elements/filter-popover";
  * into that one button and the panel becomes a sheet from the bottom edge. The button and Clear all
  * never wrap.
  *
+ * With `apply`, a search box or date range waits for Apply, or Enter in a search box, before it calls `onChange`; other choices still apply as they change.
+ *
  * @param {object} props
  * @param {{ key: string, label: string, type: 'enum'|'multiEnum'|'dateRange'|'text',
  *   options?: { value: string, label: string }[], allLabel?: string, presets?: string[] }[]} props.facets `options` fills an `enum` or `multiEnum`;
@@ -29,9 +31,10 @@ import "@webority/ui-elements/elements/filter-popover";
  *   Called with the facet key and its new value. Clear all calls it once per active facet, with the empty value.
  * @param {number} [props.inline=3] How many facets stay in the row; the rest fold into the Filters button.
  * @param {boolean} [props.floating=false] A floating panel: hover, click or F opens the facets in a non-modal panel under the Filters button, with a chip summary in the row.
+ * @param {boolean} [props.apply=false] Hold search and date range edits until Apply (or Enter in a search box), as the Razor app-filter-bar does; other choices still apply when they change. Apply shows only when a text or dateRange facet is present, and never with floating.
  * @param {string} [props.className]
  */
-export default function AppFilterBar({ facets: allFacets, value, onChange, inline, floating, className, ...rest }: {
+export default function AppFilterBar({ facets: allFacets, value, onChange, inline, floating, apply, className, ...rest }: {
     facets: {
         key: string;
         label: string;
@@ -53,5 +56,6 @@ export default function AppFilterBar({ facets: allFacets, value, onChange, inlin
     }) => void;
     inline?: number;
     floating?: boolean;
+    apply?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.83.1",
+  "version": "0.83.2",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -27,8 +27,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.83.1",
-    "@webority/ui-elements": "0.83.1"
+    "@webority/theme": "0.83.2",
+    "@webority/ui-elements": "0.83.2"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.25.0",