@webority/ui-react 0.75.0 → 0.75.1

package/dist/components/AppPopover.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"../lib/FocusPanel.js";import{cloneElement as r,useId as i,useRef as a,useState as o}from"react";import{OverlayTrigger as s,Popover as c}from"react-bootstrap";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d={start:`left`,end:`right`,top:`top`,bottom:`bottom`,auto:`auto`},f={modifiers:[{name:`computeStyles`,options:{gpuAcceleration:!1}}]},p=[`dialog`];function m({trigger:m,children:h,title:g,placement:_=`bottom`,triggerType:v=`click`,onToggle:y,className:b=``,show:x,role:S,labelledBy:C,autoFocus:w=!1,...T}){t(`AppPopover`,T),e(`AppPopover`,`role`,S,p);let E=i(),D=`${E}-title`,O=a(null),[k,A]=o(!1),j=x!==void 0,M=j?x:k,N=S===`dialog`,P=e=>{j||A(e),y?.(e)},F=u(c,{id:E,className:b||void 0,...N?{role:`dialog`,"aria-modal":`false`,"aria-labelledby":C??(g?D:void 0)}:{},children:[w&&l(n,{triggerRef:O}),g&&l(c.Header,{as:`h3`,id:D,children:g}),h==null?null:l(c.Body,{children:h})]}),{onClick:I,"aria-expanded":L,...R}=T,z=m.props[`aria-expanded`],B,V=v===`click`||Array.isArray(v)&&v.includes(`click`);L===void 0?z===void 0?V&&(B=M):B=z:B=L;let H=r(m,{...R,...B===void 0?{}:{"aria-expanded":B},onClick:e=>{O.current=e.currentTarget,I?.(e),typeof m.props.onClick==`function`&&m.props.onClick(e)}}),U=v===`click`,W=v===`hover`||Array.isArray(v)&&v.includes(`hover`);return l(s,{trigger:v,placement:d[_]||_,popperConfig:f,overlay:F,rootClose:U||N,delay:W?{show:80,hide:220}:void 0,onToggle:P,...j?{show:x}:{},children:H})}export{m as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"../lib/FocusPanel.js";import{cloneElement as r,useId as i,useRef as a,useState as o}from"react";import{OverlayTrigger as s,Popover as c}from"react-bootstrap";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d={start:`left`,end:`right`,top:`top`,bottom:`bottom`,auto:`auto`},f={modifiers:[{name:`computeStyles`,options:{gpuAcceleration:!1}}]},p=[`dialog`];function m({trigger:m,children:h,title:g,placement:_=`bottom`,triggerType:v=`click`,onToggle:y,className:b=``,show:x,role:S,labelledBy:C,autoFocus:w=!1,...T}){t(`AppPopover`,T),e(`AppPopover`,`role`,S,p);let E=i(),D=`${E}-title`,O=a(null),[k,A]=o(!1),j=x!==void 0,M=j?x:k,N=S===`dialog`,P=e=>{j||A(e),y?.(e)},F=u(c,{id:E,className:b||void 0,...N?{role:`dialog`,"aria-modal":`false`,"aria-labelledby":C??(g?D:void 0)}:{},children:[w&&l(n,{triggerRef:O}),g&&l(c.Header,{as:`div`,id:D,children:g}),h==null?null:l(c.Body,{children:h})]}),{onClick:I,"aria-expanded":L,...R}=T,z=m.props[`aria-expanded`],B,V=v===`click`||Array.isArray(v)&&v.includes(`click`);L===void 0?z===void 0?V&&(B=M):B=z:B=L;let H=r(m,{...R,...B===void 0?{}:{"aria-expanded":B},onClick:e=>{O.current=e.currentTarget,I?.(e),typeof m.props.onClick==`function`&&m.props.onClick(e)}}),U=v===`click`,W=v===`hover`||Array.isArray(v)&&v.includes(`hover`);return l(s,{trigger:v,placement:d[_]||_,popperConfig:f,overlay:F,rootClose:U||N,delay:W?{show:80,hide:220}:void 0,onToggle:P,...j?{show:x}:{},children:H})}export{m as default};

package/dist/components/AppTabs.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppTooltip.js";import r from"./AppIcon.js";import i from"./renderIconProp.js";import{formatNumber as a}from"@webority/ui-elements/helpers";import{useCallback as o,useEffect as s,useLayoutEffect as c,useRef as l,useState as ee}from"react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/overflow";var te=[`underline`,`pills`],p=[`horizontal`,`vertical`],m=[`sm`,`md`,`lg`],h=[`automatic`,`manual`],g=[`scroll`,`menu`],_=[`success`,`warning`,`danger`,`info`],v=1,y=28,ne=.7;function b({tabs:b,value:x,onChange:S,linkComponent:C,variant:w=`underline`,orientation:T=`horizontal`,size:E=`md`,fitted:D=!1,overflow:O=`scroll`,moreLabel:k=`More`,maxVisible:A,activation:j=`automatic`,ariaLabel:M,className:N=``,style:P,...F}){t(`AppTabs`,F),e(`AppTabs`,`variant`,w,te),e(`AppTabs`,`orientation`,T,p),e(`AppTabs`,`size`,E,m),e(`AppTabs`,`activation`,j,h),e(`AppTabs`,`overflow`,O,g);for(let t of b)e(`AppTabs`,`tabs[].tone`,t.tone,_);let I=l(null),L=l(null),R=T===`vertical`,z=(O===`menu`||A!=null)&&!R,[B,V]=ee(x);s(()=>{V(x)},[x]);let H=b.find(e=>!e.disabled)?.key,U=b.some(e=>e.key===B&&!e.disabled)?B:void 0,W=b.some(e=>e.key===x&&!e.disabled)?x:void 0,G=U??W??H,K=e=>{I.current?.querySelector(`[data-key="${CSS.escape(String(e))}"]`)?.focus()},q=o(()=>{let e=I.current,t=L.current;if(!e||!t||R||z)return;let n=e.scrollWidth-e.clientWidth;t.classList.toggle(`is-overflow-start`,e.scrollLeft>v),t.classList.toggle(`is-overflow-end`,n>v&&e.scrollLeft<n-v)},[R,z]),J=o(()=>{let e=I.current;if(!e)return;let t=e.querySelector(`.app-tab.active`);t?(R?(e.style.setProperty(`--wui-tab-y`,`${t.offsetTop}px`),e.style.setProperty(`--wui-tab-h`,`${t.offsetHeight}px`)):(e.style.setProperty(`--wui-tab-x`,`${t.offsetLeft}px`),e.style.setProperty(`--wui-tab-w`,`${t.offsetWidth}px`)),e.toggleAttribute(`data-active-danger`,!!b.find(e=>e.key===x)?.danger)):e.style.setProperty(R?`--wui-tab-h`:`--wui-tab-w`,`0px`),e.setAttribute(`data-wui-tabs`,``),q()},[R,b,x,q]),Y=e=>!z||!I.current?.querySelector(`[data-key="${CSS.escape(String(e))}"][data-wui-overflow-hidden]`),X=o(()=>{let e=I.current;if(!e||R)return;let t=e.querySelector(`.app-tab.active`);if(!t)return;let n=y,r=t.offsetLeft,i=r+t.offsetWidth;r-n<e.scrollLeft?e.scrollLeft=Math.max(0,r-n):i+n>e.scrollLeft+e.clientWidth&&(e.scrollLeft=i+n-e.clientWidth)},[R]);c(()=>{J()},[J]),c(()=>{X()},[x,X]);let Z=l(J);s(()=>{Z.current=J},[J]),s(()=>{if(typeof ResizeObserver>`u`)return;let e=new ResizeObserver(()=>Z.current());return I.current&&e.observe(I.current),L.current&&e.observe(L.current),()=>e.disconnect()},[R,z]),s(()=>{let e=L.current;if(!z||!e)return;let t=()=>Z.current();return e.addEventListener(`wui-overflow-change`,t),()=>e.removeEventListener(`wui-overflow-change`,t)},[z]);function re(e){let t=e.target?.dataset?.key;if(t==null)return;let n=b.findIndex(e=>e.key===t);if(n<0)return;let r=b.length,i=(e,t)=>{for(let n=1;n<=r;n++){let i=b[((e+t*n)%r+r)%r];if(!i.disabled&&Y(i.key))return i}return null},a=R?`ArrowDown`:`ArrowRight`,o=R?`ArrowUp`:`ArrowLeft`,s=null;if(e.key===a?s=i(n,1):e.key===o?s=i(n,-1):e.key===`Home`?s=b.find(e=>!e.disabled&&Y(e.key))??null:e.key===`End`&&(s=[...b].reverse().find(e=>!e.disabled&&Y(e.key))??null),!s)return;e.preventDefault(),V(s.key),K(s.key);let c=s.href!=null||s.to!=null;j===`automatic`&&!c&&S?.(s.key)}let Q=e=>{let t=I.current;t&&t.scrollBy({left:e*t.clientWidth*ne})},ie=[`app-tabs`,w===`pills`?`app-tabs-pills`:``,R?`app-tabs-vertical`:``,E===`sm`?`app-tabs-sm`:``,E===`lg`?`app-tabs-lg`:``,D?`app-tabs-fitted`:``,N].filter(Boolean).join(` `),$=f(`div`,{ref:I,role:`tablist`,"aria-orientation":R?`vertical`:void 0,"aria-label":M,className:ie,style:P,"data-wui-overflow-list":z?``:void 0,...F,onKeyDown:re,onScroll:q,children:[b.map(e=>{let t=e.key===x,r=e.href!=null||e.to!=null,o={role:`tab`,"data-key":e.key,"aria-selected":t,tabIndex:e.key===G?0:-1,className:`app-tab${t?` active`:``}${e.danger?` danger`:``}${r&&e.disabled?` disabled`:``}`},s=f(u,{children:[e.image?d(`img`,{className:`app-tab-img`,src:e.image,alt:e.imageAlt??``}):i(e.icon,{size:16,className:`app-tab-icon`}),e.label,(e.countLabel||e.count!=null)&&d(`span`,{className:`app-tab-count${e.tone?` ${e.tone}`:``}`,children:e.countLabel||a(e.count,{decimals:0})})]}),c;if(r){let t=e.to!=null&&C?C:`a`,n=e.rel??(e.target===`_blank`?`noopener noreferrer`:void 0),r=e.disabled?{"aria-disabled":!0}:t===`a`?{href:e.href??e.to,target:e.target,rel:n}:{to:e.to,target:e.target,rel:n},i=t=>{if(e.disabled){t.preventDefault();return}t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||(V(e.key),S?.(e.key))};c=d(t,{...o,...r,onClick:i,children:s},e.key)}else c=d(`button`,{type:`button`,...o,disabled:e.disabled,onClick:()=>{e.disabled||(V(e.key),S?.(e.key))},children:s},e.key);return e.tooltip?d(n,{content:e.tooltip,children:c},e.key):c}),d(`span`,{className:`app-tab-indicator`,"aria-hidden":`true`,"data-wui-overflow-skip":``})]});return R?$:z?d(`wui-overflow`,{ref:L,class:`app-tabs-wrap`,label:k,children:$}):f(`div`,{ref:L,className:`app-tabs-wrap`,children:[d(`button`,{type:`button`,className:`app-tabs-scroll-btn prev`,"aria-label":`Scroll tabs backward`,tabIndex:-1,onClick:()=>Q(-1),children:d(r,{name:`chevron-left`,size:16})}),$,d(`button`,{type:`button`,className:`app-tabs-scroll-btn next`,"aria-label":`Scroll tabs forward`,tabIndex:-1,onClick:()=>Q(1),children:d(r,{name:`chevron-right`,size:16})})]})}export{b as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppTooltip.js";import r from"./AppIcon.js";import i from"./renderIconProp.js";import{formatNumber as a}from"@webority/ui-elements/helpers";import{useCallback as o,useEffect as s,useLayoutEffect as c,useRef as l,useState as ee}from"react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/overflow";var te=[`underline`,`pills`],p=[`horizontal`,`vertical`],m=[`sm`,`md`,`lg`],h=[`automatic`,`manual`],g=[`scroll`,`menu`],_=[`success`,`warning`,`danger`,`info`],v=1,y=28,ne=.7;function b({tabs:b,value:x,onChange:S,linkComponent:C,variant:w=`underline`,orientation:T=`horizontal`,size:E=`md`,fitted:D=!1,overflow:O=`scroll`,moreLabel:k=`More`,maxVisible:A,activation:j=`automatic`,ariaLabel:M,className:N=``,style:P,...F}){t(`AppTabs`,F),e(`AppTabs`,`variant`,w,te),e(`AppTabs`,`orientation`,T,p),e(`AppTabs`,`size`,E,m),e(`AppTabs`,`activation`,j,h),e(`AppTabs`,`overflow`,O,g);for(let t of b)e(`AppTabs`,`tabs[].tone`,t.tone,_);let I=l(null),L=l(null),R=T===`vertical`,z=(O===`menu`||A!=null)&&!R,[B,V]=ee(x);s(()=>{V(x)},[x]);let H=b.find(e=>!e.disabled)?.key,U=b.some(e=>e.key===B&&!e.disabled)?B:void 0,W=b.some(e=>e.key===x&&!e.disabled)?x:void 0,G=U??W??H,K=e=>{I.current?.querySelector(`[data-key="${CSS.escape(String(e))}"]`)?.focus()},q=o(()=>{let e=I.current,t=L.current;if(!e||!t||R||z)return;let n=e.scrollWidth-e.clientWidth;t.classList.toggle(`is-overflow-start`,e.scrollLeft>v),t.classList.toggle(`is-overflow-end`,n>v&&e.scrollLeft<n-v)},[R,z]),J=o(()=>{let e=I.current;if(!e)return;let t=e.querySelector(`.app-tab.active`);t?(R?(e.style.setProperty(`--wui-tab-y`,`${t.offsetTop}px`),e.style.setProperty(`--wui-tab-h`,`${t.offsetHeight}px`)):(e.style.setProperty(`--wui-tab-x`,`${t.offsetLeft}px`),e.style.setProperty(`--wui-tab-w`,`${t.offsetWidth}px`)),e.toggleAttribute(`data-active-danger`,!!b.find(e=>e.key===x)?.danger)):e.style.setProperty(R?`--wui-tab-h`:`--wui-tab-w`,`0px`),e.setAttribute(`data-wui-tabs`,``),q()},[R,b,x,q]),Y=e=>!z||!I.current?.querySelector(`[data-key="${CSS.escape(String(e))}"][data-wui-overflow-hidden]`),X=o(()=>{let e=I.current;if(!e||R)return;let t=e.querySelector(`.app-tab.active`);if(!t)return;let n=y,r=t.offsetLeft,i=r+t.offsetWidth;r-n<e.scrollLeft?e.scrollLeft=Math.max(0,r-n):i+n>e.scrollLeft+e.clientWidth&&(e.scrollLeft=i+n-e.clientWidth)},[R]);c(()=>{J()},[J]),c(()=>{X()},[x,X]);let Z=l(J);s(()=>{Z.current=J},[J]),s(()=>{if(!document.fonts)return;let e=!0;return document.fonts.ready.then(()=>{e&&Z.current()}),()=>{e=!1}},[]),s(()=>{if(typeof ResizeObserver>`u`)return;let e=new ResizeObserver(()=>Z.current());return I.current&&e.observe(I.current),L.current&&e.observe(L.current),()=>e.disconnect()},[R,z]),s(()=>{let e=L.current;if(!z||!e)return;let t=()=>Z.current();return e.addEventListener(`wui-overflow-change`,t),()=>e.removeEventListener(`wui-overflow-change`,t)},[z]);function re(e){let t=e.target?.dataset?.key;if(t==null)return;let n=b.findIndex(e=>e.key===t);if(n<0)return;let r=b.length,i=(e,t)=>{for(let n=1;n<=r;n++){let i=b[((e+t*n)%r+r)%r];if(!i.disabled&&Y(i.key))return i}return null},a=R?`ArrowDown`:`ArrowRight`,o=R?`ArrowUp`:`ArrowLeft`,s=null;if(e.key===a?s=i(n,1):e.key===o?s=i(n,-1):e.key===`Home`?s=b.find(e=>!e.disabled&&Y(e.key))??null:e.key===`End`&&(s=[...b].reverse().find(e=>!e.disabled&&Y(e.key))??null),!s)return;e.preventDefault(),V(s.key),K(s.key);let c=s.href!=null||s.to!=null;j===`automatic`&&!c&&S?.(s.key)}let Q=e=>{let t=I.current;t&&t.scrollBy({left:e*t.clientWidth*ne})},ie=[`app-tabs`,w===`pills`?`app-tabs-pills`:``,R?`app-tabs-vertical`:``,E===`sm`?`app-tabs-sm`:``,E===`lg`?`app-tabs-lg`:``,D?`app-tabs-fitted`:``,N].filter(Boolean).join(` `),$=f(`div`,{ref:I,role:`tablist`,"aria-orientation":R?`vertical`:void 0,"aria-label":M,className:ie,style:P,"data-wui-overflow-list":z?``:void 0,...F,onKeyDown:re,onScroll:q,children:[b.map(e=>{let t=e.key===x,r=e.href!=null||e.to!=null,o={role:`tab`,"data-key":e.key,"aria-selected":t,tabIndex:e.key===G?0:-1,className:`app-tab${t?` active`:``}${e.danger?` danger`:``}${r&&e.disabled?` disabled`:``}`},s=f(u,{children:[e.image?d(`img`,{className:`app-tab-img`,src:e.image,alt:e.imageAlt??``}):i(e.icon,{size:16,className:`app-tab-icon`}),e.label,(e.countLabel||e.count!=null)&&d(`span`,{className:`app-tab-count${e.tone?` ${e.tone}`:``}`,children:e.countLabel||a(e.count,{decimals:0})})]}),c;if(r){let t=e.to!=null&&C?C:`a`,n=e.rel??(e.target===`_blank`?`noopener noreferrer`:void 0),r=e.disabled?{"aria-disabled":!0}:t===`a`?{href:e.href??e.to,target:e.target,rel:n}:{to:e.to,target:e.target,rel:n},i=t=>{if(e.disabled){t.preventDefault();return}t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||(V(e.key),S?.(e.key))};c=d(t,{...o,...r,onClick:i,children:s},e.key)}else c=d(`button`,{type:`button`,...o,disabled:e.disabled,onClick:()=>{e.disabled||(V(e.key),S?.(e.key))},children:s},e.key);return e.tooltip?d(n,{content:e.tooltip,children:c},e.key):c}),d(`span`,{className:`app-tab-indicator`,"aria-hidden":`true`,"data-wui-overflow-skip":``})]});return R?$:z?d(`wui-overflow`,{ref:L,class:`app-tabs-wrap`,label:k,children:$}):f(`div`,{ref:L,className:`app-tabs-wrap`,children:[d(`button`,{type:`button`,className:`app-tabs-scroll-btn prev`,"aria-label":`Scroll tabs backward`,tabIndex:-1,onClick:()=>Q(-1),children:d(r,{name:`chevron-left`,size:16})}),$,d(`button`,{type:`button`,className:`app-tabs-scroll-btn next`,"aria-label":`Scroll tabs forward`,tabIndex:-1,onClick:()=>Q(1),children:d(r,{name:`chevron-right`,size:16})})]})}export{b as default};

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

@@ -11,7 +11,7 @@
  *   App* like AppButton/AppActionIcon). It renders as written; clicking (or hovering/focusing) it
  *   toggles the panel.
  * @param {import('react').ReactNode} props.children The panel body.
- * @param {string} [props.title] Optional panel heading.
+ * @param {string} [props.title] Optional panel title (plain text, not a heading, so it never breaks the page's heading order).
  * @param {'top'|'bottom'|'start'|'end'|'auto'} [props.placement='bottom'] Where it opens; `auto`
  *   flips to stay in view.
  * @param {'click'|'hover'|'focus'|('click'|'hover'|'focus')[]} [props.triggerType='click'] What

package/package.json

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