@webority/ui-react 0.66.0 → 0.67.0

package/dist/components/AppPopover.js

@@ -1 +1 @@
-import e from"./warnUnknownProps.js";import{cloneElement as t,useId as n,useState as r}from"react";import{OverlayTrigger as i,Popover as a}from"react-bootstrap";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c={start:`left`,end:`right`,top:`top`,bottom:`bottom`,auto:`auto`},l={modifiers:[{name:`computeStyles`,options:{gpuAcceleration:!1}}]};function u({trigger:u,children:d,title:f,placement:p=`bottom`,triggerType:m=`click`,onToggle:h,className:g=``,..._}){e(`AppPopover`,_);let v=n(),[y,b]=r(!1),x=e=>{b(e),h?.(e)},S=s(a,{id:v,className:g||void 0,children:[f&&o(a.Header,{as:`h3`,children:f}),d==null?null:o(a.Body,{children:d})]}),{onClick:C,"aria-expanded":w,...T}=_,E=u.props[`aria-expanded`],D,O=m===`click`||Array.isArray(m)&&m.includes(`click`);w===void 0?E===void 0?O&&(D=y):D=E:D=w;let k=t(u,{...T,...D===void 0?{}:{"aria-expanded":D},onClick:e=>{C?.(e),typeof u.props.onClick==`function`&&u.props.onClick(e)}}),A=m===`click`,j=m===`hover`||Array.isArray(m)&&m.includes(`hover`);return o(i,{trigger:m,placement:c[p]||p,popperConfig:l,overlay:S,rootClose:A,delay:j?{show:80,hide:220}:void 0,onToggle:x,children:k})}export{u 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:`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};

package/dist/lib/FocusPanel.js

@@ -0,0 +1 @@
+import{useEffect as e,useRef as t}from"react";import{jsx as n}from"react/jsx-runtime";var r=`a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`;function i({triggerRef:i}){let a=t(null);return e(()=>{let e=i.current??document.activeElement;return a.current?.parentElement?.querySelector(r)?.focus(),()=>e?.focus?.()},[i]),n(`span`,{ref:a,hidden:!0})}export{i as default};

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

@@ -18,8 +18,14 @@
  *   opens it; pass an array for multiple (e.g. ['hover', 'focus']).
  * @param {(show: boolean) => void} [props.onToggle] Callback fired when the panel opens/closes.
  * @param {string} [props.className] Class on the popover panel.
+ * @param {boolean} [props.show] Controls the open state. When set, the panel follows it, and
+ *   `onToggle` reports each request to change it.
+ * @param {'dialog'} [props.role] `dialog` names the panel after `title` or `labelledBy`, sets
+ *   `aria-modal="false"`, and lets Escape close it.
+ * @param {string} [props.labelledBy] Id of the element that names a dialog panel; wins over `title`.
+ * @param {boolean} [props.autoFocus=false] Moves focus into the panel on open and back to the trigger on close.
  */
-export default function AppPopover({ trigger, children, title, placement, triggerType, onToggle, className, ...rest }: {
+export default function AppPopover({ trigger, children, title, placement, triggerType, onToggle, className, show, role, labelledBy, autoFocus, ...rest }: {
     trigger: import('react').ReactElement;
     children: import('react').ReactNode;
     title?: string;
@@ -27,4 +33,8 @@ export default function AppPopover({ trigger, children, title, placement, trigge
     triggerType?: 'click' | 'hover' | 'focus' | ('click' | 'hover' | 'focus')[];
     onToggle?: (show: boolean) => void;
     className?: string;
+    show?: boolean;
+    role?: 'dialog';
+    labelledBy?: string;
+    autoFocus?: boolean;
 }): import("react").JSX.Element;

package/dist/types/lib/FocusPanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Rendered inside an open panel: mounting it moves focus to the panel's first focusable element, and
+ * unmounting it (close, Escape or an outside click) hands focus back to whatever opened the panel,
+ * which is the trigger for a click.
+ * @internal not exported from the package barrel
+ */
+export default function FocusPanel({ triggerRef }: {
+    triggerRef: any;
+}): import("react").JSX.Element;

package/package.json

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