@webority/ui-react 0.77.0 → 0.77.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())},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>1&&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 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};

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

@@ -12,7 +12,8 @@ import "@webority/ui-elements/elements/filter-popover";
  * selects and date ranges narrow; it wraps only when full, and each facet takes its own line on a phone.
  *
  * Only the first `inline` facets sit in the row. The rest go in a panel behind a "Filters (n)" button,
- * n counting the active ones among them (no number while none is active); their chips stay in the row.
+ * n counting the active ones among them (no number while none is active); a folded facet's chip stays in
+ * the row, and an inline facet's chip is hidden on a desktop, where its control already shows the value.
  * The panel is a `<details>` that closes on an outside click or Escape. On a phone every facet folds
  * into that one button and the panel becomes a sheet from the bottom edge. The button and Clear all
  * never wrap.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.77.0",
+  "version": "0.77.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.77.0",
-    "@webority/ui-elements": "0.77.0"
+    "@webority/theme": "0.77.2",
+    "@webority/ui-elements": "0.77.2"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.23.0",